diff --git a/.github/workflows/pr-storybook-deploy-manual.yml b/.github/workflows/pr-storybook-deploy-manual.yml
index c3a57217995f..a6955d4a957b 100644
--- a/.github/workflows/pr-storybook-deploy-manual.yml
+++ b/.github/workflows/pr-storybook-deploy-manual.yml
@@ -42,6 +42,12 @@ jobs:
           ref: refs/pull/${{ inputs.pr_number }}/head
           fetch-depth: 1
 
+      - name: Checkout base repo
+        if: inputs.action == 'remove'
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+
       - name: Use Node.js
         if: inputs.action == 'deploy'
         uses: actions/setup-node@v4
@@ -81,7 +87,7 @@ jobs:
           pnpx nx build devextreme-react-storybook
 
       - name: Deploy/remove PR preview
-        uses: rossjrw/pr-preview-action@8ff09e486b4c23709012eedd3b42e9f0b95dd0c5 # v1
+        uses: rossjrw/pr-preview-action@ffa7509e91a3ec8dfc2e5536c4d5c1acdf7a6de9 # v1.8.1
         with:
           action: ${{ inputs.action }}
           pr-number: ${{ inputs.pr_number }}
@@ -89,4 +95,4 @@ jobs:
           preview-branch: gh-pages
           umbrella-dir: preview
           comment: false
-          token: ${{ secrets.GITHUB_TOKEN }}
+          wait-for-pages-deployment: true
diff --git a/.github/workflows/testcafe_tests.yml b/.github/workflows/testcafe_tests.yml
index 5eb20ca67bb2..a8a4290b09bf 100644
--- a/.github/workflows/testcafe_tests.yml
+++ b/.github/workflows/testcafe_tests.yml
@@ -23,11 +23,22 @@ jobs:
     runs-on: devextreme-shr2
     outputs:
       should-run: ${{ steps.check.outputs.should-run }}
+      styles-changed: ${{ steps.changes.outputs.styles }}
     steps:
+      - uses: actions/checkout@v4
       - name: Check RUN_TESTS flag
         id: check
         run: echo "should-run=${{ env.RUN_TESTS }}" >> $GITHUB_OUTPUT
 
+      - uses: dorny/paths-filter@v3
+        id: changes
+        with:
+          filters: |
+            styles:
+              - 'packages/devextreme-scss/**'
+              - 'packages/devextreme/js/**/themes/**'
+              - 'e2e/testcafe-devextreme/helpers/accessibility/**'
+
   build:
     name: Build DevExtreme
     needs: check-should-run
@@ -94,6 +105,9 @@ jobs:
       matrix:
         ARGS: [
           { componentFolder: "accessibility", name: "accessibility" },
+          { componentFolder: "accessibility", name: "accessibility - fluent.dark", theme: 'fluent.blue.dark', styleDependent: true },
+          { componentFolder: "accessibility", name: "accessibility - material.light", theme: 'material.blue.light', styleDependent: true },
+          { componentFolder: "accessibility", name: "accessibility - material.dark", theme: 'material.blue.dark', styleDependent: true },
           { componentFolder: "common", name: "common" },
 
           { name: "generic", theme: 'generic.light' },
@@ -177,6 +191,7 @@ jobs:
 
     - name: Run TestCafe tests
       working-directory: ./e2e/testcafe-devextreme
+      if: ${{ !matrix.ARGS.styleDependent || needs.check-should-run.outputs.styles-changed == 'true' }}
       env:
         NODE_OPTIONS: --max-old-space-size=8192
       run: |
diff --git a/.github/workflows/demos_visual_tests.yml b/.github/workflows/visual-tests-demos.yml
similarity index 98%
rename from .github/workflows/demos_visual_tests.yml
rename to .github/workflows/visual-tests-demos.yml
index 4f0f2a1770df..be7b8b9f47cd 100644
--- a/.github/workflows/demos_visual_tests.yml
+++ b/.github/workflows/visual-tests-demos.yml
@@ -584,7 +584,7 @@ jobs:
         fi
 
   testcafe-jquery:
-    needs: [check-should-run, build-devextreme]
+    needs: [check-should-run, build-devextreme, determine-framework-tests-scope]
     if: |
       always() &&
       needs.check-should-run.outputs.should-run == 'true' &&
@@ -593,7 +593,7 @@ jobs:
       fail-fast: false
       matrix:
         STRATEGY: [screenshots, accessibility]
-        THEME: ['material.blue.light', 'fluent.blue.light']
+        THEME: ['material.blue.light', 'fluent.blue.light', 'material.blue.dark', 'fluent.blue.dark']
         CONSTEL: [jquery(1/3), jquery(2/3), jquery(3/3), jquery]
         exclude:
           - STRATEGY: accessibility
@@ -604,6 +604,10 @@ jobs:
             CONSTEL: jquery(3/3)
           - STRATEGY: screenshots
             CONSTEL: jquery
+          - STRATEGY: screenshots
+            THEME: 'material.blue.dark'
+          - STRATEGY: screenshots
+            THEME: 'fluent.blue.dark'
     env:
       ACCESSIBILITY_TESTCAFE_REPORT_PATH: "accessibility_testcafe_report"
 
@@ -691,6 +695,7 @@ jobs:
     - name: Run TestCafe tests (jQuery)
       shell: bash
       working-directory: apps/demos
+      if: ${{ !contains(matrix.THEME, 'dark') || needs.determine-framework-tests-scope.outputs.framework-tests-scope != 'none' }}
       env:
         NODE_OPTIONS: --max-old-space-size=8192
         STRATEGY: ${{ matrix.STRATEGY }}
diff --git a/apps/demos/Demos/Button/PredefinedTypes/Angular/app/app.component.css b/apps/demos/Demos/Button/PredefinedTypes/Angular/app/app.component.css
index 0f5f823b29ae..89e8a001c2c6 100644
--- a/apps/demos/Demos/Button/PredefinedTypes/Angular/app/app.component.css
+++ b/apps/demos/Demos/Button/PredefinedTypes/Angular/app/app.component.css
@@ -18,7 +18,7 @@
   width: 150px;
   height: 35px;
   font-size: 130%;
-  opacity: 0.6;
+  color: var(--dx-color-icon);
   text-align: left;
   padding-left: 15px;
 }
diff --git a/apps/demos/Demos/Button/PredefinedTypes/React/styles.css b/apps/demos/Demos/Button/PredefinedTypes/React/styles.css
index dcabc92a90d5..b6312004108d 100644
--- a/apps/demos/Demos/Button/PredefinedTypes/React/styles.css
+++ b/apps/demos/Demos/Button/PredefinedTypes/React/styles.css
@@ -18,7 +18,7 @@
   width: 150px;
   height: 35px;
   font-size: 130%;
-  opacity: 0.6;
+  color: var(--dx-color-icon);
   text-align: left;
   padding-left: 15px;
 }
diff --git a/apps/demos/Demos/Button/PredefinedTypes/ReactJs/styles.css b/apps/demos/Demos/Button/PredefinedTypes/ReactJs/styles.css
index dcabc92a90d5..b6312004108d 100644
--- a/apps/demos/Demos/Button/PredefinedTypes/ReactJs/styles.css
+++ b/apps/demos/Demos/Button/PredefinedTypes/ReactJs/styles.css
@@ -18,7 +18,7 @@
   width: 150px;
   height: 35px;
   font-size: 130%;
-  opacity: 0.6;
+  color: var(--dx-color-icon);
   text-align: left;
   padding-left: 15px;
 }
diff --git a/apps/demos/Demos/Button/PredefinedTypes/Vue/App.vue b/apps/demos/Demos/Button/PredefinedTypes/Vue/App.vue
index e597b9ea6e35..72a1d875eda1 100644
--- a/apps/demos/Demos/Button/PredefinedTypes/Vue/App.vue
+++ b/apps/demos/Demos/Button/PredefinedTypes/Vue/App.vue
@@ -167,7 +167,7 @@ function onClick(e: DxButtonTypes.ClickEvent) {
   width: 150px;
   height: 35px;
   font-size: 130%;
-  opacity: 0.6;
+  color: var(--dx-color-icon);
   text-align: left;
   padding-left: 15px;
 }
diff --git a/apps/demos/Demos/Button/PredefinedTypes/jQuery/styles.css b/apps/demos/Demos/Button/PredefinedTypes/jQuery/styles.css
index 54d9f47faf02..df3c57371533 100644
--- a/apps/demos/Demos/Button/PredefinedTypes/jQuery/styles.css
+++ b/apps/demos/Demos/Button/PredefinedTypes/jQuery/styles.css
@@ -14,7 +14,7 @@
   width: 150px;
   height: 35px;
   font-size: 130%;
-  opacity: 0.6;
+  color: var(--dx-color-icon);
   text-align: left;
   padding-left: 15px;
 }
diff --git a/apps/demos/Demos/CardView/FieldTemplate/Angular/app/priority/priority.component.css b/apps/demos/Demos/CardView/FieldTemplate/Angular/app/priority/priority.component.css
index 4cfc7fe3c9d2..34b5d4124b37 100644
--- a/apps/demos/Demos/CardView/FieldTemplate/Angular/app/priority/priority.component.css
+++ b/apps/demos/Demos/CardView/FieldTemplate/Angular/app/priority/priority.component.css
@@ -12,7 +12,7 @@
 }
 
 .priority--urgent {
-  color: #f7630c;
+  color: var(--dx-color-warning);
 }
 
 .priority--high {
diff --git a/apps/demos/Demos/CardView/FieldTemplate/React/styles.css b/apps/demos/Demos/CardView/FieldTemplate/React/styles.css
index 2ef58d2da101..251952fd3267 100644
--- a/apps/demos/Demos/CardView/FieldTemplate/React/styles.css
+++ b/apps/demos/Demos/CardView/FieldTemplate/React/styles.css
@@ -26,7 +26,7 @@
 }
 
 .task__priority--urgent {
-  color: #f7630c;
+  color: var(--dx-color-warning);
 }
 
 .task__priority--high {
diff --git a/apps/demos/Demos/CardView/FieldTemplate/ReactJs/styles.css b/apps/demos/Demos/CardView/FieldTemplate/ReactJs/styles.css
index 2ef58d2da101..251952fd3267 100644
--- a/apps/demos/Demos/CardView/FieldTemplate/ReactJs/styles.css
+++ b/apps/demos/Demos/CardView/FieldTemplate/ReactJs/styles.css
@@ -26,7 +26,7 @@
 }
 
 .task__priority--urgent {
-  color: #f7630c;
+  color: var(--dx-color-warning);
 }
 
 .task__priority--high {
diff --git a/apps/demos/Demos/CardView/FieldTemplate/Vue/Priority.vue b/apps/demos/Demos/CardView/FieldTemplate/Vue/Priority.vue
index 927e06da0272..7e48ef837204 100644
--- a/apps/demos/Demos/CardView/FieldTemplate/Vue/Priority.vue
+++ b/apps/demos/Demos/CardView/FieldTemplate/Vue/Priority.vue
@@ -36,7 +36,7 @@ const priorityClassName = computed(() =>
 }
 
 .task__priority--urgent {
-  color: #f7630c;
+  color: var(--dx-color-warning);
 }
 
 .task__priority--high {
diff --git a/apps/demos/Demos/CardView/FieldTemplate/jQuery/styles.css b/apps/demos/Demos/CardView/FieldTemplate/jQuery/styles.css
index 250c85ee4daa..766e8352cc55 100644
--- a/apps/demos/Demos/CardView/FieldTemplate/jQuery/styles.css
+++ b/apps/demos/Demos/CardView/FieldTemplate/jQuery/styles.css
@@ -22,7 +22,7 @@
 }
 
 .task__priority--urgent {
-  color: #f7630c;
+  color: var(--dx-color-warning);
 }
 
 .task__priority--high {
diff --git a/apps/demos/Demos/CardView/Overview/Angular/app/app.component.css b/apps/demos/Demos/CardView/Overview/Angular/app/app.component.css
index 1d8a980b5a43..6475d0783ac9 100644
--- a/apps/demos/Demos/CardView/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/CardView/Overview/Angular/app/app.component.css
@@ -19,7 +19,7 @@
 }
 
 .status--commission {
-  color: #f7630c;
+  color: var(--dx-color-warning);
 }
 
 .status--terminated {
diff --git a/apps/demos/Demos/CardView/Overview/React/styles.css b/apps/demos/Demos/CardView/Overview/React/styles.css
index 1d8a980b5a43..6475d0783ac9 100644
--- a/apps/demos/Demos/CardView/Overview/React/styles.css
+++ b/apps/demos/Demos/CardView/Overview/React/styles.css
@@ -19,7 +19,7 @@
 }
 
 .status--commission {
-  color: #f7630c;
+  color: var(--dx-color-warning);
 }
 
 .status--terminated {
diff --git a/apps/demos/Demos/CardView/Overview/ReactJs/styles.css b/apps/demos/Demos/CardView/Overview/ReactJs/styles.css
index 1d8a980b5a43..6475d0783ac9 100644
--- a/apps/demos/Demos/CardView/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/CardView/Overview/ReactJs/styles.css
@@ -19,7 +19,7 @@
 }
 
 .status--commission {
-  color: #f7630c;
+  color: var(--dx-color-warning);
 }
 
 .status--terminated {
diff --git a/apps/demos/Demos/CardView/Overview/Vue/App.vue b/apps/demos/Demos/CardView/Overview/Vue/App.vue
index 56407709d617..dca62c0e82f1 100644
--- a/apps/demos/Demos/CardView/Overview/Vue/App.vue
+++ b/apps/demos/Demos/CardView/Overview/Vue/App.vue
@@ -155,7 +155,7 @@ const cardView = ref<DxCardView>();
 }
 
 .status--commission {
-  color: #f7630c;
+  color: var(--dx-color-warning);
 }
 
 .status--terminated {
diff --git a/apps/demos/Demos/CardView/Overview/jQuery/styles.css b/apps/demos/Demos/CardView/Overview/jQuery/styles.css
index 1d8a980b5a43..6475d0783ac9 100644
--- a/apps/demos/Demos/CardView/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/CardView/Overview/jQuery/styles.css
@@ -19,7 +19,7 @@
 }
 
 .status--commission {
-  color: #f7630c;
+  color: var(--dx-color-warning);
 }
 
 .status--terminated {
diff --git a/apps/demos/Demos/Charts/SignalRService/test-code.js b/apps/demos/Demos/Charts/SignalRService/test-code.js
index 8b71e920c75b..1f43905ed35e 100644
--- a/apps/demos/Demos/Charts/SignalRService/test-code.js
+++ b/apps/demos/Demos/Charts/SignalRService/test-code.js
@@ -1,7 +1,8 @@
 testUtils.importAnd(() => 'devextreme/viz/chart', () => DevExpress.viz.dxChart, (dxChart) => {
   let isReady = false;
   return testUtils
-    .postponeUntilFound('#chart', 100, 3000)
+    .postponeUntilFound('#chart', 100, 20000)
+    .then(() => testUtils.postpone(1000))
     .then(() => {
       const chart = dxChart.getInstance(document.querySelector('#chart'));
 
diff --git a/apps/demos/Demos/Common/ListsOverview/Angular/app/app.component.css b/apps/demos/Demos/Common/ListsOverview/Angular/app/app.component.css
index 0a3862702a5e..149681ceb767 100644
--- a/apps/demos/Demos/Common/ListsOverview/Angular/app/app.component.css
+++ b/apps/demos/Demos/Common/ListsOverview/Angular/app/app.component.css
@@ -12,7 +12,6 @@
 }
 
 ::ng-deep .left .list .dx-list-group-header {
-  color: #f05b41;
   font-weight: normal;
   font-size: 18px;
 }
@@ -102,5 +101,5 @@
   font-size: 11px;
   line-height: 12px;
   padding-left: 2px;
-  opacity: 0.7;
+  color: var(--dx-texteditor-label-color);
 }
diff --git a/apps/demos/Demos/Common/ListsOverview/React/styles.css b/apps/demos/Demos/Common/ListsOverview/React/styles.css
index 44302a86a405..7c23dbf29e77 100644
--- a/apps/demos/Demos/Common/ListsOverview/React/styles.css
+++ b/apps/demos/Demos/Common/ListsOverview/React/styles.css
@@ -12,7 +12,6 @@
 }
 
 .left .list .dx-list-group-header {
-  color: #f05b41;
   font-weight: normal;
   font-size: 18px;
 }
@@ -102,5 +101,5 @@
   font-size: 11px;
   line-height: 12px;
   padding-left: 2px;
-  opacity: 0.7;
+  color: var(--dx-texteditor-label-color);
 }
diff --git a/apps/demos/Demos/Common/ListsOverview/ReactJs/styles.css b/apps/demos/Demos/Common/ListsOverview/ReactJs/styles.css
index 44302a86a405..7c23dbf29e77 100644
--- a/apps/demos/Demos/Common/ListsOverview/ReactJs/styles.css
+++ b/apps/demos/Demos/Common/ListsOverview/ReactJs/styles.css
@@ -12,7 +12,6 @@
 }
 
 .left .list .dx-list-group-header {
-  color: #f05b41;
   font-weight: normal;
   font-size: 18px;
 }
@@ -102,5 +101,5 @@
   font-size: 11px;
   line-height: 12px;
   padding-left: 2px;
-  opacity: 0.7;
+  color: var(--dx-texteditor-label-color);
 }
diff --git a/apps/demos/Demos/Common/ListsOverview/Vue/styles.css b/apps/demos/Demos/Common/ListsOverview/Vue/styles.css
index 3d0f3138d962..bbf36965db97 100644
--- a/apps/demos/Demos/Common/ListsOverview/Vue/styles.css
+++ b/apps/demos/Demos/Common/ListsOverview/Vue/styles.css
@@ -12,7 +12,6 @@
 }
 
 .left .list .dx-list-group-header {
-  color: #f05b41;
   font-weight: normal;
   font-size: 18px;
 }
@@ -102,5 +101,5 @@
   font-size: 11px;
   line-height: 12px;
   padding-left: 6px;
-  opacity: 0.7;
+  color: var(--dx-texteditor-label-color);
 }
diff --git a/apps/demos/Demos/Common/ListsOverview/jQuery/styles.css b/apps/demos/Demos/Common/ListsOverview/jQuery/styles.css
index 44302a86a405..7c23dbf29e77 100644
--- a/apps/demos/Demos/Common/ListsOverview/jQuery/styles.css
+++ b/apps/demos/Demos/Common/ListsOverview/jQuery/styles.css
@@ -12,7 +12,6 @@
 }
 
 .left .list .dx-list-group-header {
-  color: #f05b41;
   font-weight: normal;
   font-size: 18px;
 }
@@ -102,5 +101,5 @@
   font-size: 11px;
   line-height: 12px;
   padding-left: 2px;
-  opacity: 0.7;
+  color: var(--dx-texteditor-label-color);
 }
diff --git a/apps/demos/Demos/Common/NavigationOverview/Angular/app/app.component.css b/apps/demos/Demos/Common/NavigationOverview/Angular/app/app.component.css
index 593789817cfb..c0a02c60a84d 100644
--- a/apps/demos/Demos/Common/NavigationOverview/Angular/app/app.component.css
+++ b/apps/demos/Demos/Common/NavigationOverview/Angular/app/app.component.css
@@ -31,7 +31,7 @@ sup {
 
 ::ng-deep .right-content .sub-title {
   font-size: 120%;
-  color: rgba(152, 152, 152, 0.8);
+  color: var(--dx-texteditor-color-label);
 }
 
 ::ng-deep .title-container {
diff --git a/apps/demos/Demos/Common/NavigationOverview/React/styles.css b/apps/demos/Demos/Common/NavigationOverview/React/styles.css
index 368d99d577fe..711095c5f48f 100644
--- a/apps/demos/Demos/Common/NavigationOverview/React/styles.css
+++ b/apps/demos/Demos/Common/NavigationOverview/React/styles.css
@@ -31,7 +31,7 @@ sup {
 
 .right-content .sub-title {
   font-size: 120%;
-  color: rgba(152, 152, 152, 0.8);
+  color: var(--dx-texteditor-color-label);
 }
 
 .title-container {
diff --git a/apps/demos/Demos/Common/NavigationOverview/ReactJs/styles.css b/apps/demos/Demos/Common/NavigationOverview/ReactJs/styles.css
index 368d99d577fe..711095c5f48f 100644
--- a/apps/demos/Demos/Common/NavigationOverview/ReactJs/styles.css
+++ b/apps/demos/Demos/Common/NavigationOverview/ReactJs/styles.css
@@ -31,7 +31,7 @@ sup {
 
 .right-content .sub-title {
   font-size: 120%;
-  color: rgba(152, 152, 152, 0.8);
+  color: var(--dx-texteditor-color-label);
 }
 
 .title-container {
diff --git a/apps/demos/Demos/Common/NavigationOverview/Vue/styles.css b/apps/demos/Demos/Common/NavigationOverview/Vue/styles.css
index 368d99d577fe..711095c5f48f 100644
--- a/apps/demos/Demos/Common/NavigationOverview/Vue/styles.css
+++ b/apps/demos/Demos/Common/NavigationOverview/Vue/styles.css
@@ -31,7 +31,7 @@ sup {
 
 .right-content .sub-title {
   font-size: 120%;
-  color: rgba(152, 152, 152, 0.8);
+  color: var(--dx-texteditor-color-label);
 }
 
 .title-container {
diff --git a/apps/demos/Demos/Common/NavigationOverview/jQuery/styles.css b/apps/demos/Demos/Common/NavigationOverview/jQuery/styles.css
index 9904b5517771..b6cd7448e261 100644
--- a/apps/demos/Demos/Common/NavigationOverview/jQuery/styles.css
+++ b/apps/demos/Demos/Common/NavigationOverview/jQuery/styles.css
@@ -31,7 +31,7 @@ sup {
 
 .right-content .sub-title {
   font-size: 120%;
-  color: rgba(152, 152, 152, 0.8);
+  color: var(--dx-texteditor-color-label);
 }
 
 .title-container {
diff --git a/apps/demos/Demos/ContextMenu/Basics/Angular/app/app.component.css b/apps/demos/Demos/ContextMenu/Basics/Angular/app/app.component.css
index d9b828c0506b..00170305cf9a 100644
--- a/apps/demos/Demos/ContextMenu/Basics/Angular/app/app.component.css
+++ b/apps/demos/Demos/ContextMenu/Basics/Angular/app/app.component.css
@@ -3,5 +3,5 @@
 }
 
 .label {
-  color: #767676;
+  color: var(--dx-texteditor-color-label);
 }
diff --git a/apps/demos/Demos/ContextMenu/Basics/React/styles.css b/apps/demos/Demos/ContextMenu/Basics/React/styles.css
index d9b828c0506b..00170305cf9a 100644
--- a/apps/demos/Demos/ContextMenu/Basics/React/styles.css
+++ b/apps/demos/Demos/ContextMenu/Basics/React/styles.css
@@ -3,5 +3,5 @@
 }
 
 .label {
-  color: #767676;
+  color: var(--dx-texteditor-color-label);
 }
diff --git a/apps/demos/Demos/ContextMenu/Basics/ReactJs/styles.css b/apps/demos/Demos/ContextMenu/Basics/ReactJs/styles.css
index d9b828c0506b..00170305cf9a 100644
--- a/apps/demos/Demos/ContextMenu/Basics/ReactJs/styles.css
+++ b/apps/demos/Demos/ContextMenu/Basics/ReactJs/styles.css
@@ -3,5 +3,5 @@
 }
 
 .label {
-  color: #767676;
+  color: var(--dx-texteditor-color-label);
 }
diff --git a/apps/demos/Demos/ContextMenu/Basics/Vue/App.vue b/apps/demos/Demos/ContextMenu/Basics/Vue/App.vue
index 1a7f4eccea8a..df0ef80482c1 100644
--- a/apps/demos/Demos/ContextMenu/Basics/Vue/App.vue
+++ b/apps/demos/Demos/ContextMenu/Basics/Vue/App.vue
@@ -34,6 +34,6 @@ function itemClick({ itemData }: DxContextMenuTypes.ItemClickEvent<ContextMenuIt
 }
 
 .label {
-  color: #767676;
+  color: var(--dx-texteditor-color-label);
 }
 </style>
diff --git a/apps/demos/Demos/ContextMenu/Basics/jQuery/styles.css b/apps/demos/Demos/ContextMenu/Basics/jQuery/styles.css
index d9b828c0506b..00170305cf9a 100644
--- a/apps/demos/Demos/ContextMenu/Basics/jQuery/styles.css
+++ b/apps/demos/Demos/ContextMenu/Basics/jQuery/styles.css
@@ -3,5 +3,5 @@
 }
 
 .label {
-  color: #767676;
+  color: var(--dx-texteditor-color-label);
 }
diff --git a/apps/demos/Demos/ContextMenu/Templates/Angular/app/app.component.css b/apps/demos/Demos/ContextMenu/Templates/Angular/app/app.component.css
index a87a85dc00e2..e5364c93c486 100644
--- a/apps/demos/Demos/ContextMenu/Templates/Angular/app/app.component.css
+++ b/apps/demos/Demos/ContextMenu/Templates/Angular/app/app.component.css
@@ -14,5 +14,5 @@
 }
 
 .label {
-  color: #767676;
+  color: var(--dx-texteditor-color-label);
 }
diff --git a/apps/demos/Demos/ContextMenu/Templates/React/styles.css b/apps/demos/Demos/ContextMenu/Templates/React/styles.css
index 41a27079944d..e42b2f71c6d4 100644
--- a/apps/demos/Demos/ContextMenu/Templates/React/styles.css
+++ b/apps/demos/Demos/ContextMenu/Templates/React/styles.css
@@ -14,5 +14,5 @@
 }
 
 .label {
-  color: #767676;
+  color: var(--dx-texteditor-color-label);
 }
diff --git a/apps/demos/Demos/ContextMenu/Templates/ReactJs/styles.css b/apps/demos/Demos/ContextMenu/Templates/ReactJs/styles.css
index 41a27079944d..e42b2f71c6d4 100644
--- a/apps/demos/Demos/ContextMenu/Templates/ReactJs/styles.css
+++ b/apps/demos/Demos/ContextMenu/Templates/ReactJs/styles.css
@@ -14,5 +14,5 @@
 }
 
 .label {
-  color: #767676;
+  color: var(--dx-texteditor-color-label);
 }
diff --git a/apps/demos/Demos/ContextMenu/Templates/Vue/App.vue b/apps/demos/Demos/ContextMenu/Templates/Vue/App.vue
index 389a573c8ebd..edfc6ef6c30a 100644
--- a/apps/demos/Demos/ContextMenu/Templates/Vue/App.vue
+++ b/apps/demos/Demos/ContextMenu/Templates/Vue/App.vue
@@ -59,6 +59,6 @@ function itemClick({ itemData }: DxContextMenuTypes.ItemClickEvent<ContextMenuIt
 }
 
 .label {
-  color: #767676;
+  color: var(--dx-texteditor-color-label);
 }
 </style>
diff --git a/apps/demos/Demos/ContextMenu/Templates/jQuery/styles.css b/apps/demos/Demos/ContextMenu/Templates/jQuery/styles.css
index 41a27079944d..e42b2f71c6d4 100644
--- a/apps/demos/Demos/ContextMenu/Templates/jQuery/styles.css
+++ b/apps/demos/Demos/ContextMenu/Templates/jQuery/styles.css
@@ -14,5 +14,5 @@
 }
 
 .label {
-  color: #767676;
+  color: var(--dx-texteditor-color-label);
 }
diff --git a/apps/demos/Demos/DataGrid/BatchEditing/Angular/app/app.component.css b/apps/demos/Demos/DataGrid/BatchEditing/Angular/app/app.component.css
index a9a9e1ad5d1a..acc562175d2a 100644
--- a/apps/demos/Demos/DataGrid/BatchEditing/Angular/app/app.component.css
+++ b/apps/demos/Demos/DataGrid/BatchEditing/Angular/app/app.component.css
@@ -5,7 +5,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background: #f5f5f5;
+  background-color: var(--dx-datagrid-row-alternation-bg);
 }
 
 ::ng-deep .options .caption {
diff --git a/apps/demos/Demos/DataGrid/BatchEditing/React/styles.css b/apps/demos/Demos/DataGrid/BatchEditing/React/styles.css
index 1960e771a82e..e2469d7ca7a2 100644
--- a/apps/demos/Demos/DataGrid/BatchEditing/React/styles.css
+++ b/apps/demos/Demos/DataGrid/BatchEditing/React/styles.css
@@ -5,7 +5,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background: #f5f5f5;
+  background-color: var(--dx-datagrid-row-alternation-bg);
 }
 
 .options .caption {
diff --git a/apps/demos/Demos/DataGrid/BatchEditing/ReactJs/styles.css b/apps/demos/Demos/DataGrid/BatchEditing/ReactJs/styles.css
index 1960e771a82e..e2469d7ca7a2 100644
--- a/apps/demos/Demos/DataGrid/BatchEditing/ReactJs/styles.css
+++ b/apps/demos/Demos/DataGrid/BatchEditing/ReactJs/styles.css
@@ -5,7 +5,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background: #f5f5f5;
+  background-color: var(--dx-datagrid-row-alternation-bg);
 }
 
 .options .caption {
diff --git a/apps/demos/Demos/DataGrid/BatchEditing/Vue/App.vue b/apps/demos/Demos/DataGrid/BatchEditing/Vue/App.vue
index a6deb48746bb..0006040bca7d 100644
--- a/apps/demos/Demos/DataGrid/BatchEditing/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/BatchEditing/Vue/App.vue
@@ -89,7 +89,7 @@ const startEditAction = ref<DxDataGridTypes.StartEditAction>('click');
 .options {
   margin-top: 20px;
   padding: 20px;
-  background: #f5f5f5;
+  background-color: var(--dx-datagrid-row-alternation-bg);
 }
 
 .options .caption {
diff --git a/apps/demos/Demos/DataGrid/BatchEditing/jQuery/styles.css b/apps/demos/Demos/DataGrid/BatchEditing/jQuery/styles.css
index 1960e771a82e..e2469d7ca7a2 100644
--- a/apps/demos/Demos/DataGrid/BatchEditing/jQuery/styles.css
+++ b/apps/demos/Demos/DataGrid/BatchEditing/jQuery/styles.css
@@ -5,7 +5,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background: #f5f5f5;
+  background-color: var(--dx-datagrid-row-alternation-bg);
 }
 
 .options .caption {
diff --git a/apps/demos/Demos/DataGrid/Cell/Angular/app/app.component.css b/apps/demos/Demos/DataGrid/Cell/Angular/app/app.component.css
index d86718fb7898..50bb63833175 100644
--- a/apps/demos/Demos/DataGrid/Cell/Angular/app/app.component.css
+++ b/apps/demos/Demos/DataGrid/Cell/Angular/app/app.component.css
@@ -17,7 +17,7 @@
 }
 
 ::ng-deep #gridContainer .inc .diff {
-  color: #2ab71b;
+  color: var(--dx-color-success);
 }
 
 ::ng-deep #gridContainer .inc .diff::before {
@@ -29,7 +29,7 @@
 }
 
 ::ng-deep #gridContainer .dec .diff {
-  color: #f00;
+  color: var(--dx-color-danger);
 }
 
 ::ng-deep #gridContainer .inc .diff::after,
diff --git a/apps/demos/Demos/DataGrid/Cell/React/styles.css b/apps/demos/Demos/DataGrid/Cell/React/styles.css
index 597b09a5a98e..9bb55d414ad6 100644
--- a/apps/demos/Demos/DataGrid/Cell/React/styles.css
+++ b/apps/demos/Demos/DataGrid/Cell/React/styles.css
@@ -17,7 +17,7 @@
 }
 
 #gridContainer .inc .diff {
-  color: #2ab71b;
+  color: var(--dx-color-success);
 }
 
 #gridContainer .inc .diff::before {
@@ -29,7 +29,7 @@
 }
 
 #gridContainer .dec .diff {
-  color: #f00;
+  color: var(--dx-color-danger);
 }
 
 #gridContainer .inc .diff::after,
diff --git a/apps/demos/Demos/DataGrid/Cell/ReactJs/styles.css b/apps/demos/Demos/DataGrid/Cell/ReactJs/styles.css
index 597b09a5a98e..9bb55d414ad6 100644
--- a/apps/demos/Demos/DataGrid/Cell/ReactJs/styles.css
+++ b/apps/demos/Demos/DataGrid/Cell/ReactJs/styles.css
@@ -17,7 +17,7 @@
 }
 
 #gridContainer .inc .diff {
-  color: #2ab71b;
+  color: var(--dx-color-success);
 }
 
 #gridContainer .inc .diff::before {
@@ -29,7 +29,7 @@
 }
 
 #gridContainer .dec .diff {
-  color: #f00;
+  color: var(--dx-color-danger);
 }
 
 #gridContainer .inc .diff::after,
diff --git a/apps/demos/Demos/DataGrid/Cell/Vue/App.vue b/apps/demos/Demos/DataGrid/Cell/Vue/App.vue
index fae12cd46804..0f3bad962866 100644
--- a/apps/demos/Demos/DataGrid/Cell/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/Cell/Vue/App.vue
@@ -80,7 +80,7 @@ import { weekData } from './data.ts';
 }
 
 #gridContainer .inc .diff {
-  color: #2ab71b;
+  color: var(--dx-color-success);
 }
 
 #gridContainer .inc .diff::before {
@@ -92,7 +92,7 @@ import { weekData } from './data.ts';
 }
 
 #gridContainer .dec .diff {
-  color: #f00;
+  color: var(--dx-color-danger);
 }
 
 #gridContainer .inc .diff::after,
diff --git a/apps/demos/Demos/DataGrid/Cell/jQuery/styles.css b/apps/demos/Demos/DataGrid/Cell/jQuery/styles.css
index 597b09a5a98e..9bb55d414ad6 100644
--- a/apps/demos/Demos/DataGrid/Cell/jQuery/styles.css
+++ b/apps/demos/Demos/DataGrid/Cell/jQuery/styles.css
@@ -17,7 +17,7 @@
 }
 
 #gridContainer .inc .diff {
-  color: #2ab71b;
+  color: var(--dx-color-success);
 }
 
 #gridContainer .inc .diff::before {
@@ -29,7 +29,7 @@
 }
 
 #gridContainer .dec .diff {
-  color: #f00;
+  color: var(--dx-color-danger);
 }
 
 #gridContainer .inc .diff::after,
diff --git a/apps/demos/Demos/DataGrid/FilteringAPI/Angular/app/app.component.css b/apps/demos/Demos/DataGrid/FilteringAPI/Angular/app/app.component.css
index dcaf2cfa6532..79cec992a89c 100644
--- a/apps/demos/Demos/DataGrid/FilteringAPI/Angular/app/app.component.css
+++ b/apps/demos/Demos/DataGrid/FilteringAPI/Angular/app/app.component.css
@@ -14,7 +14,7 @@
 }
 
 ::ng-deep .dx-row.dx-data-row .employee {
-  color: #bf4e6a;
+  color: var(--dx-color-primary);
   font-weight: bold;
 }
 
diff --git a/apps/demos/Demos/DataGrid/FilteringAPI/React/styles.css b/apps/demos/Demos/DataGrid/FilteringAPI/React/styles.css
index cf78690da51f..e59369d7f3a3 100644
--- a/apps/demos/Demos/DataGrid/FilteringAPI/React/styles.css
+++ b/apps/demos/Demos/DataGrid/FilteringAPI/React/styles.css
@@ -14,7 +14,7 @@
 }
 
 .dx-row.dx-data-row .employee {
-  color: #bf4e6a;
+  color: var(--dx-color-primary);
   font-weight: bold;
 }
 
diff --git a/apps/demos/Demos/DataGrid/FilteringAPI/ReactJs/styles.css b/apps/demos/Demos/DataGrid/FilteringAPI/ReactJs/styles.css
index cf78690da51f..e59369d7f3a3 100644
--- a/apps/demos/Demos/DataGrid/FilteringAPI/ReactJs/styles.css
+++ b/apps/demos/Demos/DataGrid/FilteringAPI/ReactJs/styles.css
@@ -14,7 +14,7 @@
 }
 
 .dx-row.dx-data-row .employee {
-  color: #bf4e6a;
+  color: var(--dx-color-primary);
   font-weight: bold;
 }
 
diff --git a/apps/demos/Demos/DataGrid/FilteringAPI/Vue/App.vue b/apps/demos/Demos/DataGrid/FilteringAPI/Vue/App.vue
index 0176e3db67c8..ee49eeb1cae8 100644
--- a/apps/demos/Demos/DataGrid/FilteringAPI/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/FilteringAPI/Vue/App.vue
@@ -100,7 +100,7 @@ const onValueChanged = ({ value }: DxSelectBoxTypes.ValueChangedEvent) => {
 }
 
 .dx-row.dx-data-row .employee {
-  color: #bf4e6a;
+  color: var(--dx-color-primary);
   font-weight: bold;
 }
 
diff --git a/apps/demos/Demos/DataGrid/FilteringAPI/jQuery/styles.css b/apps/demos/Demos/DataGrid/FilteringAPI/jQuery/styles.css
index cf78690da51f..e59369d7f3a3 100644
--- a/apps/demos/Demos/DataGrid/FilteringAPI/jQuery/styles.css
+++ b/apps/demos/Demos/DataGrid/FilteringAPI/jQuery/styles.css
@@ -14,7 +14,7 @@
 }
 
 .dx-row.dx-data-row .employee {
-  color: #bf4e6a;
+  color: var(--dx-color-primary);
   font-weight: bold;
 }
 
diff --git a/apps/demos/Demos/DataGrid/SignalRService/Angular/app/app.component.css b/apps/demos/Demos/DataGrid/SignalRService/Angular/app/app.component.css
index cbeb1df3a6aa..c86c3a23b4d3 100644
--- a/apps/demos/Demos/DataGrid/SignalRService/Angular/app/app.component.css
+++ b/apps/demos/Demos/DataGrid/SignalRService/Angular/app/app.component.css
@@ -9,11 +9,11 @@
 }
 
 ::ng-deep #gridContainer .inc {
-  color: #2ab71b;
+  color: var(--dx-color-success);
 }
 
 ::ng-deep #gridContainer .dec {
-  color: #f00;
+  color: var(--dx-color-danger);
 }
 
 ::ng-deep #gridContainer .inc .arrow,
diff --git a/apps/demos/Demos/DataGrid/SignalRService/React/styles.css b/apps/demos/Demos/DataGrid/SignalRService/React/styles.css
index 5e4c8033d2a4..202e736c2c04 100644
--- a/apps/demos/Demos/DataGrid/SignalRService/React/styles.css
+++ b/apps/demos/Demos/DataGrid/SignalRService/React/styles.css
@@ -9,11 +9,11 @@
 }
 
 #gridContainer .inc {
-  color: #2ab71b;
+  color: var(--dx-color-success);
 }
 
 #gridContainer .dec {
-  color: #f00;
+  color: var(--dx-color-danger);
 }
 
 #gridContainer .inc .arrow,
diff --git a/apps/demos/Demos/DataGrid/SignalRService/ReactJs/styles.css b/apps/demos/Demos/DataGrid/SignalRService/ReactJs/styles.css
index 5e4c8033d2a4..202e736c2c04 100644
--- a/apps/demos/Demos/DataGrid/SignalRService/ReactJs/styles.css
+++ b/apps/demos/Demos/DataGrid/SignalRService/ReactJs/styles.css
@@ -9,11 +9,11 @@
 }
 
 #gridContainer .inc {
-  color: #2ab71b;
+  color: var(--dx-color-success);
 }
 
 #gridContainer .dec {
-  color: #f00;
+  color: var(--dx-color-danger);
 }
 
 #gridContainer .inc .arrow,
diff --git a/apps/demos/Demos/DataGrid/SignalRService/Vue/App.vue b/apps/demos/Demos/DataGrid/SignalRService/Vue/App.vue
index 27dead54a563..bba9af062ec0 100644
--- a/apps/demos/Demos/DataGrid/SignalRService/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/SignalRService/Vue/App.vue
@@ -105,11 +105,11 @@ onMounted(() => {
 }
 
 #gridContainer .inc {
-  color: #2ab71b;
+  color: var(--dx-color-success);
 }
 
 #gridContainer .dec {
-  color: #f00;
+  color: var(--dx-color-danger);
 }
 
 #gridContainer .inc .arrow,
diff --git a/apps/demos/Demos/DataGrid/SignalRService/jQuery/styles.css b/apps/demos/Demos/DataGrid/SignalRService/jQuery/styles.css
index 5e4c8033d2a4..202e736c2c04 100644
--- a/apps/demos/Demos/DataGrid/SignalRService/jQuery/styles.css
+++ b/apps/demos/Demos/DataGrid/SignalRService/jQuery/styles.css
@@ -9,11 +9,11 @@
 }
 
 #gridContainer .inc {
-  color: #2ab71b;
+  color: var(--dx-color-success);
 }
 
 #gridContainer .dec {
-  color: #f00;
+  color: var(--dx-color-danger);
 }
 
 #gridContainer .inc .arrow,
diff --git a/apps/demos/Demos/DataGrid/StatePersistence/Angular/app/app.component.css b/apps/demos/Demos/DataGrid/StatePersistence/Angular/app/app.component.css
index b4d41a153231..9179e54d6dbf 100644
--- a/apps/demos/Demos/DataGrid/StatePersistence/Angular/app/app.component.css
+++ b/apps/demos/Demos/DataGrid/StatePersistence/Angular/app/app.component.css
@@ -4,7 +4,6 @@
 }
 
 ::ng-deep #descContainer a {
-  color: #f05b41;
   text-decoration: underline;
   cursor: pointer;
 }
diff --git a/apps/demos/Demos/DataGrid/StatePersistence/React/styles.css b/apps/demos/Demos/DataGrid/StatePersistence/React/styles.css
index 483238239f5c..960190593bf2 100644
--- a/apps/demos/Demos/DataGrid/StatePersistence/React/styles.css
+++ b/apps/demos/Demos/DataGrid/StatePersistence/React/styles.css
@@ -4,7 +4,6 @@
 }
 
 #descContainer a {
-  color: #f05b41;
   text-decoration: underline;
   cursor: pointer;
 }
diff --git a/apps/demos/Demos/DataGrid/StatePersistence/ReactJs/styles.css b/apps/demos/Demos/DataGrid/StatePersistence/ReactJs/styles.css
index 483238239f5c..960190593bf2 100644
--- a/apps/demos/Demos/DataGrid/StatePersistence/ReactJs/styles.css
+++ b/apps/demos/Demos/DataGrid/StatePersistence/ReactJs/styles.css
@@ -4,7 +4,6 @@
 }
 
 #descContainer a {
-  color: #f05b41;
   text-decoration: underline;
   cursor: pointer;
 }
diff --git a/apps/demos/Demos/DataGrid/StatePersistence/Vue/App.vue b/apps/demos/Demos/DataGrid/StatePersistence/Vue/App.vue
index a27ce2e5b789..abe1af6c11ba 100644
--- a/apps/demos/Demos/DataGrid/StatePersistence/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/StatePersistence/Vue/App.vue
@@ -80,7 +80,6 @@ const onStateResetClick = () => {
 }
 
 #descContainer a {
-  color: #f05b41;
   text-decoration: underline;
   cursor: pointer;
 }
diff --git a/apps/demos/Demos/DataGrid/StatePersistence/jQuery/styles.css b/apps/demos/Demos/DataGrid/StatePersistence/jQuery/styles.css
index 483238239f5c..960190593bf2 100644
--- a/apps/demos/Demos/DataGrid/StatePersistence/jQuery/styles.css
+++ b/apps/demos/Demos/DataGrid/StatePersistence/jQuery/styles.css
@@ -4,7 +4,6 @@
 }
 
 #descContainer a {
-  color: #f05b41;
   text-decoration: underline;
   cursor: pointer;
 }
diff --git a/apps/demos/Demos/DateRangeBox/Overview/Angular/app/app.component.css b/apps/demos/Demos/DateRangeBox/Overview/Angular/app/app.component.css
index d64567a9cd6e..7458bd60f11d 100644
--- a/apps/demos/Demos/DateRangeBox/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/DateRangeBox/Overview/Angular/app/app.component.css
@@ -8,7 +8,7 @@
 
 ::ng-deep .selected-days-wrapper {
   font-size: 12px;
-  opacity: 0.5;
+  color: var(--dx-color-icon);
 }
 
 ::ng-deep .multiline-label {
diff --git a/apps/demos/Demos/DateRangeBox/Overview/React/styles.css b/apps/demos/Demos/DateRangeBox/Overview/React/styles.css
index 64e44bb025ed..b2ee13470616 100644
--- a/apps/demos/Demos/DateRangeBox/Overview/React/styles.css
+++ b/apps/demos/Demos/DateRangeBox/Overview/React/styles.css
@@ -8,7 +8,7 @@
 
 .selected-days-wrapper {
   font-size: 12px;
-  opacity: 0.5;
+  color: var(--dx-color-icon);
 }
 
 .multiline-label {
diff --git a/apps/demos/Demos/DateRangeBox/Overview/ReactJs/styles.css b/apps/demos/Demos/DateRangeBox/Overview/ReactJs/styles.css
index 64e44bb025ed..b2ee13470616 100644
--- a/apps/demos/Demos/DateRangeBox/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/DateRangeBox/Overview/ReactJs/styles.css
@@ -8,7 +8,7 @@
 
 .selected-days-wrapper {
   font-size: 12px;
-  opacity: 0.5;
+  color: var(--dx-color-icon);
 }
 
 .multiline-label {
diff --git a/apps/demos/Demos/DateRangeBox/Overview/Vue/App.vue b/apps/demos/Demos/DateRangeBox/Overview/Vue/App.vue
index 2f6a05dc5c57..265f18e66ac2 100644
--- a/apps/demos/Demos/DateRangeBox/Overview/Vue/App.vue
+++ b/apps/demos/Demos/DateRangeBox/Overview/Vue/App.vue
@@ -114,7 +114,7 @@ function convertRangeToDays([startDate, endDate]: Date[]) {
 
 .selected-days-wrapper {
   font-size: 12px;
-  opacity: 0.5;
+  color: var(--dx-color-icon);
 }
 
 .multiline-label {
diff --git a/apps/demos/Demos/DateRangeBox/Overview/jQuery/styles.css b/apps/demos/Demos/DateRangeBox/Overview/jQuery/styles.css
index 64e44bb025ed..b2ee13470616 100644
--- a/apps/demos/Demos/DateRangeBox/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/DateRangeBox/Overview/jQuery/styles.css
@@ -8,7 +8,7 @@
 
 .selected-days-wrapper {
   font-size: 12px;
-  opacity: 0.5;
+  color: var(--dx-color-icon);
 }
 
 .multiline-label {
diff --git a/apps/demos/Demos/DropDownButton/Overview/Angular/app/app.component.css b/apps/demos/Demos/DropDownButton/Overview/Angular/app/app.component.css
index 2f10f1890a20..6b13dd2c42ab 100644
--- a/apps/demos/Demos/DropDownButton/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/DropDownButton/Overview/Angular/app/app.component.css
@@ -55,7 +55,7 @@
 .button-row {
   font-size: 12px;
   line-height: 14px;
-  opacity: 0.6;
+  color: var(--dx-color-icon);
 }
 
 ::ng-deep #custom-template .dx-button {
diff --git a/apps/demos/Demos/DropDownButton/Overview/React/styles.css b/apps/demos/Demos/DropDownButton/Overview/React/styles.css
index 3e3b3f5d6028..f9c818dcfade 100644
--- a/apps/demos/Demos/DropDownButton/Overview/React/styles.css
+++ b/apps/demos/Demos/DropDownButton/Overview/React/styles.css
@@ -55,7 +55,7 @@
 .button-row {
   font-size: 12px;
   line-height: 14px;
-  opacity: 0.6;
+  color: var(--dx-color-icon);
 }
 
 #custom-template .dx-button {
diff --git a/apps/demos/Demos/DropDownButton/Overview/ReactJs/styles.css b/apps/demos/Demos/DropDownButton/Overview/ReactJs/styles.css
index 3e3b3f5d6028..f9c818dcfade 100644
--- a/apps/demos/Demos/DropDownButton/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/DropDownButton/Overview/ReactJs/styles.css
@@ -55,7 +55,7 @@
 .button-row {
   font-size: 12px;
   line-height: 14px;
-  opacity: 0.6;
+  color: var(--dx-color-icon);
 }
 
 #custom-template .dx-button {
diff --git a/apps/demos/Demos/DropDownButton/Overview/Vue/App.vue b/apps/demos/Demos/DropDownButton/Overview/Vue/App.vue
index 95707822b308..bf465e269542 100644
--- a/apps/demos/Demos/DropDownButton/Overview/Vue/App.vue
+++ b/apps/demos/Demos/DropDownButton/Overview/Vue/App.vue
@@ -246,7 +246,7 @@ function onColorClick(clickedColor: string) {
   .button-row {
     font-size: 12px;
     line-height: 14px;
-    opacity: 0.6;
+    color: var(--dx-color-icon);
   }
 
   #custom-template .dx-button {
diff --git a/apps/demos/Demos/DropDownButton/Overview/jQuery/styles.css b/apps/demos/Demos/DropDownButton/Overview/jQuery/styles.css
index 9789c3168272..eb04b7c24da4 100644
--- a/apps/demos/Demos/DropDownButton/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/DropDownButton/Overview/jQuery/styles.css
@@ -59,7 +59,7 @@
 .button-row {
   font-size: 12px;
   line-height: 14px;
-  opacity: 0.6;
+  color: var(--dx-color-icon);
 }
 
 #custom-template .dx-button {
diff --git a/apps/demos/Demos/FileUploader/ChunkUpload/Angular/app/app.component.css b/apps/demos/Demos/FileUploader/ChunkUpload/Angular/app/app.component.css
index 856b5294781c..5d6b101f78e1 100644
--- a/apps/demos/Demos/FileUploader/ChunkUpload/Angular/app/app.component.css
+++ b/apps/demos/Demos/FileUploader/ChunkUpload/Angular/app/app.component.css
@@ -20,7 +20,7 @@
 ::ng-deep .note {
   display: block;
   font-size: 10pt;
-  color: #484848;
+  color: var(--dx-texteditor-color-label);
   margin-left: 9px;
 }
 
diff --git a/apps/demos/Demos/FileUploader/ChunkUpload/React/styles.css b/apps/demos/Demos/FileUploader/ChunkUpload/React/styles.css
index eef642f383f9..79fa64b7ef1f 100644
--- a/apps/demos/Demos/FileUploader/ChunkUpload/React/styles.css
+++ b/apps/demos/Demos/FileUploader/ChunkUpload/React/styles.css
@@ -20,7 +20,7 @@
 .note {
   display: block;
   font-size: 10pt;
-  color: #484848;
+  color: var(--dx-texteditor-color-label);
   margin-left: 9px;
 }
 
diff --git a/apps/demos/Demos/FileUploader/ChunkUpload/ReactJs/styles.css b/apps/demos/Demos/FileUploader/ChunkUpload/ReactJs/styles.css
index eef642f383f9..79fa64b7ef1f 100644
--- a/apps/demos/Demos/FileUploader/ChunkUpload/ReactJs/styles.css
+++ b/apps/demos/Demos/FileUploader/ChunkUpload/ReactJs/styles.css
@@ -20,7 +20,7 @@
 .note {
   display: block;
   font-size: 10pt;
-  color: #484848;
+  color: var(--dx-texteditor-color-label);
   margin-left: 9px;
 }
 
diff --git a/apps/demos/Demos/FileUploader/ChunkUpload/Vue/App.vue b/apps/demos/Demos/FileUploader/ChunkUpload/Vue/App.vue
index 51d5d513acdb..ebdfe39d1e46 100644
--- a/apps/demos/Demos/FileUploader/ChunkUpload/Vue/App.vue
+++ b/apps/demos/Demos/FileUploader/ChunkUpload/Vue/App.vue
@@ -76,7 +76,7 @@ function onUploadProgress(e: DxFileUploaderTypes.ProgressEvent) {
 .note {
   display: block;
   font-size: 10pt;
-  color: #484848;
+  color: var(--dx-texteditor-color-label);
   margin-left: 9px;
 }
 
diff --git a/apps/demos/Demos/FileUploader/ChunkUpload/jQuery/styles.css b/apps/demos/Demos/FileUploader/ChunkUpload/jQuery/styles.css
index eef642f383f9..79fa64b7ef1f 100644
--- a/apps/demos/Demos/FileUploader/ChunkUpload/jQuery/styles.css
+++ b/apps/demos/Demos/FileUploader/ChunkUpload/jQuery/styles.css
@@ -20,7 +20,7 @@
 .note {
   display: block;
   font-size: 10pt;
-  color: #484848;
+  color: var(--dx-texteditor-color-label);
   margin-left: 9px;
 }
 
diff --git a/apps/demos/Demos/FileUploader/CustomDropzone/Angular/app/app.component.css b/apps/demos/Demos/FileUploader/CustomDropzone/Angular/app/app.component.css
index 7844f189f6b8..b7d1cee4d5b3 100644
--- a/apps/demos/Demos/FileUploader/CustomDropzone/Angular/app/app.component.css
+++ b/apps/demos/Demos/FileUploader/CustomDropzone/Angular/app/app.component.css
@@ -1,7 +1,7 @@
 ::ng-deep #dropzone-external {
   width: 350px;
   height: 350px;
-  background-color: rgb(183 183 183 / 10%);
+  background-color: rgba(0,0,0,0.08);
   border-width: 2px;
   border-style: dashed;
   padding: 10px;
@@ -28,11 +28,6 @@
   max-height: 100%;
 }
 
-::ng-deep #dropzone-text > span {
-  font-weight: 100;
-  opacity: 0.5;
-}
-
 ::ng-deep #upload-progress {
   display: flex;
   margin-top: 10px;
diff --git a/apps/demos/Demos/FileUploader/CustomDropzone/React/styles.css b/apps/demos/Demos/FileUploader/CustomDropzone/React/styles.css
index aaaaacfd22e8..122de3b12f6c 100644
--- a/apps/demos/Demos/FileUploader/CustomDropzone/React/styles.css
+++ b/apps/demos/Demos/FileUploader/CustomDropzone/React/styles.css
@@ -1,7 +1,7 @@
 #dropzone-external {
   width: 350px;
   height: 350px;
-  background-color: rgb(183 183 183 / 10%);
+  background-color: rgba(0,0,0,0.08);
   border-width: 2px;
   border-style: dashed;
   padding: 10px;
@@ -28,11 +28,6 @@
   max-height: 100%;
 }
 
-#dropzone-text > span {
-  font-weight: 100;
-  opacity: 0.5;
-}
-
 #upload-progress {
   display: flex;
   margin-top: 10px;
diff --git a/apps/demos/Demos/FileUploader/CustomDropzone/ReactJs/styles.css b/apps/demos/Demos/FileUploader/CustomDropzone/ReactJs/styles.css
index aaaaacfd22e8..122de3b12f6c 100644
--- a/apps/demos/Demos/FileUploader/CustomDropzone/ReactJs/styles.css
+++ b/apps/demos/Demos/FileUploader/CustomDropzone/ReactJs/styles.css
@@ -1,7 +1,7 @@
 #dropzone-external {
   width: 350px;
   height: 350px;
-  background-color: rgb(183 183 183 / 10%);
+  background-color: rgba(0,0,0,0.08);
   border-width: 2px;
   border-style: dashed;
   padding: 10px;
@@ -28,11 +28,6 @@
   max-height: 100%;
 }
 
-#dropzone-text > span {
-  font-weight: 100;
-  opacity: 0.5;
-}
-
 #upload-progress {
   display: flex;
   margin-top: 10px;
diff --git a/apps/demos/Demos/FileUploader/CustomDropzone/Vue/App.vue b/apps/demos/Demos/FileUploader/CustomDropzone/Vue/App.vue
index 568d0ecb79fc..5d3af78c07ae 100644
--- a/apps/demos/Demos/FileUploader/CustomDropzone/Vue/App.vue
+++ b/apps/demos/Demos/FileUploader/CustomDropzone/Vue/App.vue
@@ -108,7 +108,7 @@ function onUploadStarted() {
 #dropzone-external {
   width: 350px;
   height: 350px;
-  background-color: rgb(183 183 183 / 10%);
+  background-color: rgba(0,0,0,0.08);
   border-width: 2px;
   border-style: dashed;
   padding: 10px;
@@ -135,11 +135,6 @@ function onUploadStarted() {
   max-height: 100%;
 }
 
-#dropzone-text > span {
-  font-weight: 100;
-  opacity: 0.5;
-}
-
 #upload-progress {
   display: flex;
   margin-top: 10px;
diff --git a/apps/demos/Demos/FileUploader/CustomDropzone/jQuery/styles.css b/apps/demos/Demos/FileUploader/CustomDropzone/jQuery/styles.css
index aaaaacfd22e8..122de3b12f6c 100644
--- a/apps/demos/Demos/FileUploader/CustomDropzone/jQuery/styles.css
+++ b/apps/demos/Demos/FileUploader/CustomDropzone/jQuery/styles.css
@@ -1,7 +1,7 @@
 #dropzone-external {
   width: 350px;
   height: 350px;
-  background-color: rgb(183 183 183 / 10%);
+  background-color: rgba(0,0,0,0.08);
   border-width: 2px;
   border-style: dashed;
   padding: 10px;
@@ -28,11 +28,6 @@
   max-height: 100%;
 }
 
-#dropzone-text > span {
-  font-weight: 100;
-  opacity: 0.5;
-}
-
 #upload-progress {
   display: flex;
   margin-top: 10px;
diff --git a/apps/demos/Demos/FileUploader/Validation/Angular/app/app.component.css b/apps/demos/Demos/FileUploader/Validation/Angular/app/app.component.css
index 465c0a91aa0a..8546568f0130 100644
--- a/apps/demos/Demos/FileUploader/Validation/Angular/app/app.component.css
+++ b/apps/demos/Demos/FileUploader/Validation/Angular/app/app.component.css
@@ -5,7 +5,7 @@
 
 ::ng-deep .note {
   font-size: 10pt;
-  color: #484848;
+  color: var(--dx-texteditor-color-label);
   margin-left: 9px;
 }
 
diff --git a/apps/demos/Demos/FileUploader/Validation/React/styles.css b/apps/demos/Demos/FileUploader/Validation/React/styles.css
index 067fc1a91968..684111aa0069 100644
--- a/apps/demos/Demos/FileUploader/Validation/React/styles.css
+++ b/apps/demos/Demos/FileUploader/Validation/React/styles.css
@@ -5,7 +5,7 @@
 
 .note {
   font-size: 10pt;
-  color: #484848;
+  color: var(--dx-texteditor-color-label);
   margin-left: 9px;
 }
 
diff --git a/apps/demos/Demos/FileUploader/Validation/ReactJs/styles.css b/apps/demos/Demos/FileUploader/Validation/ReactJs/styles.css
index 067fc1a91968..684111aa0069 100644
--- a/apps/demos/Demos/FileUploader/Validation/ReactJs/styles.css
+++ b/apps/demos/Demos/FileUploader/Validation/ReactJs/styles.css
@@ -5,7 +5,7 @@
 
 .note {
   font-size: 10pt;
-  color: #484848;
+  color: var(--dx-texteditor-color-label);
   margin-left: 9px;
 }
 
diff --git a/apps/demos/Demos/FileUploader/Validation/Vue/App.vue b/apps/demos/Demos/FileUploader/Validation/Vue/App.vue
index 0548819a1184..c1e1e8ed6dee 100644
--- a/apps/demos/Demos/FileUploader/Validation/Vue/App.vue
+++ b/apps/demos/Demos/FileUploader/Validation/Vue/App.vue
@@ -40,7 +40,7 @@ import DxFileUploader from 'devextreme-vue/file-uploader';
 
 .note {
   font-size: 10pt;
-  color: #484848;
+  color: var(--dx-texteditor-color-label);
   margin-left: 9px;
 }
 
diff --git a/apps/demos/Demos/FileUploader/Validation/jQuery/styles.css b/apps/demos/Demos/FileUploader/Validation/jQuery/styles.css
index 067fc1a91968..684111aa0069 100644
--- a/apps/demos/Demos/FileUploader/Validation/jQuery/styles.css
+++ b/apps/demos/Demos/FileUploader/Validation/jQuery/styles.css
@@ -5,7 +5,7 @@
 
 .note {
   font-size: 10pt;
-  color: #484848;
+  color: var(--dx-texteditor-color-label);
   margin-left: 9px;
 }
 
diff --git a/apps/demos/Demos/Gantt/TaskTemplate/Angular/app/app.component.css b/apps/demos/Demos/Gantt/TaskTemplate/Angular/app/app.component.css
index 4576f4d1a883..c52e2242d0fd 100644
--- a/apps/demos/Demos/Gantt/TaskTemplate/Angular/app/app.component.css
+++ b/apps/demos/Demos/Gantt/TaskTemplate/Angular/app/app.component.css
@@ -3,31 +3,31 @@
 }
 
 .custom-task-color-0 {
-  background-color: #5c57c9;
+  background-color: #512DA8;
 }
 
 .custom-task-color-1 {
-  background-color: #35b86b;
+  background-color: #2E7D32;
 }
 
 .custom-task-color-2 {
-  background-color: #4796ce;
+  background-color: #1564C0;
 }
 
 .custom-task-color-3 {
-  background-color: #ce4776;
+  background-color: #C2185B;
 }
 
 .custom-task-color-4 {
-  background-color: #ce5b47;
+  background-color: #C62828;
 }
 
 .custom-task-color-5 {
-  background-color: #f78119;
+  background-color: #DD2C00;
 }
 
 .custom-task-color-6 {
-  background-color: #9f47ce;
+  background-color: #7B1FA2;
 }
 
 .custom-task {
diff --git a/apps/demos/Demos/Gantt/TaskTemplate/React/styles.css b/apps/demos/Demos/Gantt/TaskTemplate/React/styles.css
index 4576f4d1a883..c52e2242d0fd 100644
--- a/apps/demos/Demos/Gantt/TaskTemplate/React/styles.css
+++ b/apps/demos/Demos/Gantt/TaskTemplate/React/styles.css
@@ -3,31 +3,31 @@
 }
 
 .custom-task-color-0 {
-  background-color: #5c57c9;
+  background-color: #512DA8;
 }
 
 .custom-task-color-1 {
-  background-color: #35b86b;
+  background-color: #2E7D32;
 }
 
 .custom-task-color-2 {
-  background-color: #4796ce;
+  background-color: #1564C0;
 }
 
 .custom-task-color-3 {
-  background-color: #ce4776;
+  background-color: #C2185B;
 }
 
 .custom-task-color-4 {
-  background-color: #ce5b47;
+  background-color: #C62828;
 }
 
 .custom-task-color-5 {
-  background-color: #f78119;
+  background-color: #DD2C00;
 }
 
 .custom-task-color-6 {
-  background-color: #9f47ce;
+  background-color: #7B1FA2;
 }
 
 .custom-task {
diff --git a/apps/demos/Demos/Gantt/TaskTemplate/ReactJs/styles.css b/apps/demos/Demos/Gantt/TaskTemplate/ReactJs/styles.css
index 4576f4d1a883..c52e2242d0fd 100644
--- a/apps/demos/Demos/Gantt/TaskTemplate/ReactJs/styles.css
+++ b/apps/demos/Demos/Gantt/TaskTemplate/ReactJs/styles.css
@@ -3,31 +3,31 @@
 }
 
 .custom-task-color-0 {
-  background-color: #5c57c9;
+  background-color: #512DA8;
 }
 
 .custom-task-color-1 {
-  background-color: #35b86b;
+  background-color: #2E7D32;
 }
 
 .custom-task-color-2 {
-  background-color: #4796ce;
+  background-color: #1564C0;
 }
 
 .custom-task-color-3 {
-  background-color: #ce4776;
+  background-color: #C2185B;
 }
 
 .custom-task-color-4 {
-  background-color: #ce5b47;
+  background-color: #C62828;
 }
 
 .custom-task-color-5 {
-  background-color: #f78119;
+  background-color: #DD2C00;
 }
 
 .custom-task-color-6 {
-  background-color: #9f47ce;
+  background-color: #7B1FA2;
 }
 
 .custom-task {
diff --git a/apps/demos/Demos/Gantt/TaskTemplate/Vue/App.vue b/apps/demos/Demos/Gantt/TaskTemplate/Vue/App.vue
index 33d623537bc2..2644c14235a8 100644
--- a/apps/demos/Demos/Gantt/TaskTemplate/Vue/App.vue
+++ b/apps/demos/Demos/Gantt/TaskTemplate/Vue/App.vue
@@ -83,31 +83,31 @@ function getImagePath(taskId: number) {
 }
 
 .custom-task-color-0 {
-  background-color: #5c57c9;
+  background-color: #512DA8;
 }
 
 .custom-task-color-1 {
-  background-color: #35b86b;
+  background-color: #2E7D32;
 }
 
 .custom-task-color-2 {
-  background-color: #4796ce;
+  background-color: #1564C0;
 }
 
 .custom-task-color-3 {
-  background-color: #ce4776;
+  background-color: #C2185B;
 }
 
 .custom-task-color-4 {
-  background-color: #ce5b47;
+  background-color: #C62828;
 }
 
 .custom-task-color-5 {
-  background-color: #f78119;
+  background-color: #DD2C00;
 }
 
 .custom-task-color-6 {
-  background-color: #9f47ce;
+  background-color: #7B1FA2;
 }
 
 .custom-task {
diff --git a/apps/demos/Demos/Gantt/TaskTemplate/jQuery/styles.css b/apps/demos/Demos/Gantt/TaskTemplate/jQuery/styles.css
index 4576f4d1a883..c52e2242d0fd 100644
--- a/apps/demos/Demos/Gantt/TaskTemplate/jQuery/styles.css
+++ b/apps/demos/Demos/Gantt/TaskTemplate/jQuery/styles.css
@@ -3,31 +3,31 @@
 }
 
 .custom-task-color-0 {
-  background-color: #5c57c9;
+  background-color: #512DA8;
 }
 
 .custom-task-color-1 {
-  background-color: #35b86b;
+  background-color: #2E7D32;
 }
 
 .custom-task-color-2 {
-  background-color: #4796ce;
+  background-color: #1564C0;
 }
 
 .custom-task-color-3 {
-  background-color: #ce4776;
+  background-color: #C2185B;
 }
 
 .custom-task-color-4 {
-  background-color: #ce5b47;
+  background-color: #C62828;
 }
 
 .custom-task-color-5 {
-  background-color: #f78119;
+  background-color: #DD2C00;
 }
 
 .custom-task-color-6 {
-  background-color: #9f47ce;
+  background-color: #7B1FA2;
 }
 
 .custom-task {
diff --git a/apps/demos/Demos/HtmlEditor/Mentions/Angular/app/app.component.css b/apps/demos/Demos/HtmlEditor/Mentions/Angular/app/app.component.css
index 14992efd8ff0..8394711c458b 100644
--- a/apps/demos/Demos/HtmlEditor/Mentions/Angular/app/app.component.css
+++ b/apps/demos/Demos/HtmlEditor/Mentions/Angular/app/app.component.css
@@ -29,7 +29,7 @@
 }
 
 ::ng-deep .date {
-  opacity: 0.5;
+  color: var(--dx-color-icon);
 }
 
 ::ng-deep .photo {
diff --git a/apps/demos/Demos/HtmlEditor/Mentions/React/styles.css b/apps/demos/Demos/HtmlEditor/Mentions/React/styles.css
index 9bc6500a43e9..f87be5e72cf5 100644
--- a/apps/demos/Demos/HtmlEditor/Mentions/React/styles.css
+++ b/apps/demos/Demos/HtmlEditor/Mentions/React/styles.css
@@ -29,7 +29,7 @@
 }
 
 .date {
-  opacity: 0.5;
+  color: var(--dx-color-icon);
 }
 
 .photo {
diff --git a/apps/demos/Demos/HtmlEditor/Mentions/ReactJs/styles.css b/apps/demos/Demos/HtmlEditor/Mentions/ReactJs/styles.css
index 9bc6500a43e9..f87be5e72cf5 100644
--- a/apps/demos/Demos/HtmlEditor/Mentions/ReactJs/styles.css
+++ b/apps/demos/Demos/HtmlEditor/Mentions/ReactJs/styles.css
@@ -29,7 +29,7 @@
 }
 
 .date {
-  opacity: 0.5;
+  color: var(--dx-color-icon);
 }
 
 .photo {
diff --git a/apps/demos/Demos/HtmlEditor/Mentions/Vue/App.vue b/apps/demos/Demos/HtmlEditor/Mentions/Vue/App.vue
index 759adac3806b..0bd1e9b00649 100644
--- a/apps/demos/Demos/HtmlEditor/Mentions/Vue/App.vue
+++ b/apps/demos/Demos/HtmlEditor/Mentions/Vue/App.vue
@@ -132,7 +132,7 @@ const mentions = ref([{
 }
 
 .date {
-  opacity: 0.5;
+  color: var(--dx-color-icon);
 }
 
 .photo {
diff --git a/apps/demos/Demos/HtmlEditor/Mentions/jQuery/styles.css b/apps/demos/Demos/HtmlEditor/Mentions/jQuery/styles.css
index f37f17c83314..097ffac45c15 100644
--- a/apps/demos/Demos/HtmlEditor/Mentions/jQuery/styles.css
+++ b/apps/demos/Demos/HtmlEditor/Mentions/jQuery/styles.css
@@ -29,7 +29,7 @@
 }
 
 .date {
-  opacity: 0.5;
+  color: var(--dx-color-icon);
 }
 
 .photo {
diff --git a/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/Angular/app/app.component.ts b/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/Angular/app/app.component.ts
index 2c8d8e867ab1..47ba64acb11d 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/Angular/app/app.component.ts
+++ b/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/Angular/app/app.component.ts
@@ -132,7 +132,7 @@ export class AppComponent {
 
     return (value > 50000)
       ? { font: '006100', fill: 'C6EFCE', bold: false }
-      : { font: '9C6500', fill: 'FFEB9C', bold: false };
+      : { font: '6E4600', fill: 'FFEB9C', bold: false };
   }
 }
 
diff --git a/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/React/App.tsx b/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/React/App.tsx
index 7ad96ab1faae..c90f7e9f2330 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/React/App.tsx
+++ b/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/React/App.tsx
@@ -81,7 +81,7 @@ const getConditionalAppearance = (cell: PivotGridCell): ConditionalAppearance =>
   if (value > 50000) {
     return { font: '006100', fill: 'C6EFCE' };
   }
-  return { font: '9C6500', fill: 'FFEB9C' };
+  return { font: '6E4600', fill: 'FFEB9C' };
 };
 
 const onExporting = (e: PivotGridTypes.ExportingEvent) => {
diff --git a/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/ReactJs/App.js b/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/ReactJs/App.js
index 1753aa24a620..a3e83c562ca2 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/ReactJs/App.js
+++ b/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/ReactJs/App.js
@@ -66,7 +66,7 @@ const getConditionalAppearance = (cell) => {
   if (value > 50000) {
     return { font: '006100', fill: 'C6EFCE' };
   }
-  return { font: '9C6500', fill: 'FFEB9C' };
+  return { font: '6E4600', fill: 'FFEB9C' };
 };
 const onExporting = (e) => {
   const workbook = new Workbook();
diff --git a/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/Vue/App.vue b/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/Vue/App.vue
index 5014b4f58a08..6caef9083e14 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/Vue/App.vue
+++ b/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/Vue/App.vue
@@ -125,7 +125,7 @@ function getConditionalAppearance(cell: DxPivotGridTypes.Cell): ConditionalAppea
   if (value > 50000) {
     return { font: '006100', fill: 'C6EFCE' };
   }
-  return { font: '9C6500', fill: 'FFEB9C' };
+  return { font: '6E4600', fill: 'FFEB9C' };
 }
 
 </script>
diff --git a/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/jQuery/index.js b/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/jQuery/index.js
index 971751e54992..592fa448744f 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/jQuery/index.js
+++ b/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/jQuery/index.js
@@ -110,6 +110,6 @@ $(() => {
     if (cell.value > 50000) {
       return { font: '006100', fill: 'C6EFCE' };
     }
-    return { font: '9C6500', fill: 'FFEB9C' };
+    return { font: '6E4600', fill: 'FFEB9C' };
   }
 });
diff --git a/apps/demos/Demos/PivotGrid/StatePersistence/Angular/app/app.component.css b/apps/demos/Demos/PivotGrid/StatePersistence/Angular/app/app.component.css
index f81c8145082c..bd845db3b652 100644
--- a/apps/demos/Demos/PivotGrid/StatePersistence/Angular/app/app.component.css
+++ b/apps/demos/Demos/PivotGrid/StatePersistence/Angular/app/app.component.css
@@ -3,7 +3,6 @@
 }
 
 ::ng-deep #pivotgrid-demo .desc-container a {
-  color: #f05b41;
   text-decoration: underline;
   cursor: pointer;
 }
diff --git a/apps/demos/Demos/PivotGrid/StatePersistence/React/styles.css b/apps/demos/Demos/PivotGrid/StatePersistence/React/styles.css
index d0868e2c8faf..b9b617e9a5c4 100644
--- a/apps/demos/Demos/PivotGrid/StatePersistence/React/styles.css
+++ b/apps/demos/Demos/PivotGrid/StatePersistence/React/styles.css
@@ -3,7 +3,6 @@
 }
 
 #pivotgrid-demo .desc-container a {
-  color: #f05b41;
   text-decoration: underline;
   cursor: pointer;
 }
diff --git a/apps/demos/Demos/PivotGrid/StatePersistence/ReactJs/styles.css b/apps/demos/Demos/PivotGrid/StatePersistence/ReactJs/styles.css
index d0868e2c8faf..b9b617e9a5c4 100644
--- a/apps/demos/Demos/PivotGrid/StatePersistence/ReactJs/styles.css
+++ b/apps/demos/Demos/PivotGrid/StatePersistence/ReactJs/styles.css
@@ -3,7 +3,6 @@
 }
 
 #pivotgrid-demo .desc-container a {
-  color: #f05b41;
   text-decoration: underline;
   cursor: pointer;
 }
diff --git a/apps/demos/Demos/PivotGrid/StatePersistence/Vue/App.vue b/apps/demos/Demos/PivotGrid/StatePersistence/Vue/App.vue
index 3a8676c6c805..a090c3bc82e1 100644
--- a/apps/demos/Demos/PivotGrid/StatePersistence/Vue/App.vue
+++ b/apps/demos/Demos/PivotGrid/StatePersistence/Vue/App.vue
@@ -132,7 +132,6 @@ function onContextMenuPreparing(e: DxPivotGridTypes.ContextMenuPreparingEvent) {
 }
 
 #pivotgrid-demo .desc-container a {
-  color: #f05b41;
   text-decoration: underline;
   cursor: pointer;
 }
diff --git a/apps/demos/Demos/PivotGrid/StatePersistence/jQuery/styles.css b/apps/demos/Demos/PivotGrid/StatePersistence/jQuery/styles.css
index d0868e2c8faf..b9b617e9a5c4 100644
--- a/apps/demos/Demos/PivotGrid/StatePersistence/jQuery/styles.css
+++ b/apps/demos/Demos/PivotGrid/StatePersistence/jQuery/styles.css
@@ -3,7 +3,6 @@
 }
 
 #pivotgrid-demo .desc-container a {
-  color: #f05b41;
   text-decoration: underline;
   cursor: pointer;
 }
diff --git a/apps/demos/Demos/ResponsiveBox/Overview/Angular/app/app.component.css b/apps/demos/Demos/ResponsiveBox/Overview/Angular/app/app.component.css
index 02bccd6fdf04..14f92d8c47e8 100644
--- a/apps/demos/Demos/ResponsiveBox/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/ResponsiveBox/Overview/Angular/app/app.component.css
@@ -5,24 +5,24 @@
 }
 
 ::ng-deep #page .header {
-  background-color: rgba(243, 158, 108, 0.8);
+  background-color: #DD2C00;
   text-align: center;
 }
 
 ::ng-deep #page .content {
-  background-color: rgba(245, 229, 166, 0.8);
+  background-color: #C62828;
 }
 
 ::ng-deep #page .left-side-bar {
-  background-color: rgba(148, 215, 199, 0.8);
+  background-color: #2E7D32;
 }
 
 ::ng-deep #page .right-side-bar {
-  background-color: rgba(119, 199, 231, 0.8);
+  background-color: #1564C0;
 }
 
 ::ng-deep #page .footer {
-  background-color: rgba(123, 155, 207, 0.8);
+  background-color: #7B1FA2;
 }
 
 ::ng-deep .item {
@@ -33,4 +33,5 @@
   font-size: 20px;
   padding-top: 10px;
   text-align: center;
+  color: #fff;
 }
diff --git a/apps/demos/Demos/ResponsiveBox/Overview/React/styles.css b/apps/demos/Demos/ResponsiveBox/Overview/React/styles.css
index fb5d83536536..d2c28d051c54 100644
--- a/apps/demos/Demos/ResponsiveBox/Overview/React/styles.css
+++ b/apps/demos/Demos/ResponsiveBox/Overview/React/styles.css
@@ -6,24 +6,24 @@
 }
 
 .header {
-  background-color: rgba(243, 158, 108, 0.8);
+  background-color: #DD2C00;
   text-align: center;
 }
 
 .content {
-  background-color: rgba(245, 229, 166, 0.8);
+  background-color: #C62828;
 }
 
 .left-side-bar {
-  background-color: rgba(148, 215, 199, 0.8);
+  background-color: #2E7D32;
 }
 
 .right-side-bar {
-  background-color: rgba(119, 199, 231, 0.8);
+  background-color: #1564C0;
 }
 
 .footer {
-  background-color: rgba(123, 155, 207, 0.8);
+  background-color: #7B1FA2;
 }
 
 .item {
@@ -34,4 +34,5 @@
   font-size: 20px;
   padding-top: 10px;
   text-align: center;
+  color: #fff;
 }
diff --git a/apps/demos/Demos/ResponsiveBox/Overview/ReactJs/styles.css b/apps/demos/Demos/ResponsiveBox/Overview/ReactJs/styles.css
index fb5d83536536..d2c28d051c54 100644
--- a/apps/demos/Demos/ResponsiveBox/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/ResponsiveBox/Overview/ReactJs/styles.css
@@ -6,24 +6,24 @@
 }
 
 .header {
-  background-color: rgba(243, 158, 108, 0.8);
+  background-color: #DD2C00;
   text-align: center;
 }
 
 .content {
-  background-color: rgba(245, 229, 166, 0.8);
+  background-color: #C62828;
 }
 
 .left-side-bar {
-  background-color: rgba(148, 215, 199, 0.8);
+  background-color: #2E7D32;
 }
 
 .right-side-bar {
-  background-color: rgba(119, 199, 231, 0.8);
+  background-color: #1564C0;
 }
 
 .footer {
-  background-color: rgba(123, 155, 207, 0.8);
+  background-color: #7B1FA2;
 }
 
 .item {
@@ -34,4 +34,5 @@
   font-size: 20px;
   padding-top: 10px;
   text-align: center;
+  color: #fff;
 }
diff --git a/apps/demos/Demos/ResponsiveBox/Overview/Vue/App.vue b/apps/demos/Demos/ResponsiveBox/Overview/Vue/App.vue
index 5e9ddac454ce..77ef854eb2ed 100644
--- a/apps/demos/Demos/ResponsiveBox/Overview/Vue/App.vue
+++ b/apps/demos/Demos/ResponsiveBox/Overview/Vue/App.vue
@@ -114,24 +114,24 @@ const screen = ((width: number) => ((width < 700) ? 'sm' : 'lg')) as unknown as
 }
 
 .header {
-  background-color: rgba(243, 158, 108, 0.8);
+  background-color: #DD2C00;
   text-align: center;
 }
 
 .content {
-  background-color: rgba(245, 229, 166, 0.8);
+  background-color: #C62828;
 }
 
 .left-side-bar {
-  background-color: rgba(148, 215, 199, 0.8);
+  background-color: #2E7D32;
 }
 
 .right-side-bar {
-  background-color: rgba(119, 199, 231, 0.8);
+  background-color: #1564C0;
 }
 
 .footer {
-  background-color: rgba(123, 155, 207, 0.8);
+  background-color: #7B1FA2;
 }
 
 .item {
@@ -142,5 +142,6 @@ const screen = ((width: number) => ((width < 700) ? 'sm' : 'lg')) as unknown as
   font-size: 20px;
   padding-top: 10px;
   text-align: center;
+  color: #fff;
 }
 </style>
diff --git a/apps/demos/Demos/ResponsiveBox/Overview/jQuery/styles.css b/apps/demos/Demos/ResponsiveBox/Overview/jQuery/styles.css
index c854bdd3d6a1..a3f4b1089e9f 100644
--- a/apps/demos/Demos/ResponsiveBox/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/ResponsiveBox/Overview/jQuery/styles.css
@@ -5,24 +5,24 @@
 }
 
 #page .header {
-  background-color: rgba(243, 158, 108, 0.8);
+  background-color: #DD2C00;
   text-align: center;
 }
 
 #page .content {
-  background-color: rgba(245, 229, 166, 0.8);
+  background-color: #C62828;
 }
 
 #page .left-side-bar {
-  background-color: rgba(148, 215, 199, 0.8);
+  background-color: #2E7D32;
 }
 
 #page .right-side-bar {
-  background-color: rgba(119, 199, 231, 0.8);
+  background-color: #1564C0;
 }
 
 #page .footer {
-  background-color: rgba(123, 155, 207, 0.8);
+  background-color: #7B1FA2;
 }
 
 .item {
@@ -33,4 +33,5 @@
   font-size: 20px;
   padding-top: 10px;
   text-align: center;
+  color: #fff;
 }
diff --git a/apps/demos/Demos/Scheduler/CellTemplates/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/CellTemplates/Angular/app/app.component.css
index e7f60c2f7bfb..b439f548cdc3 100644
--- a/apps/demos/Demos/Scheduler/CellTemplates/Angular/app/app.component.css
+++ b/apps/demos/Demos/Scheduler/CellTemplates/Angular/app/app.component.css
@@ -21,12 +21,12 @@
   background-image:
     repeating-linear-gradient(
       135deg,
-      rgba(247, 234, 224, 1),
-      rgba(247, 234, 224, 1) 4px,
-      transparent 4px,
-      transparent 9px
+      var(--dx-datagrid-row-alternation-bg),
+      var(--dx-datagrid-row-alternation-bg) 2px,
+      transparent 2px,
+      transparent 6px
     );
-  color: rgba(178, 74, 0, 1);
+  color: var(--dx-color-success);
 }
 
 ::ng-deep .dx-scheduler-header-panel-cell .disable-date {
@@ -43,11 +43,11 @@
 }
 
 .dinner {
-  background: #FBF1EB;
+  background: var(--dx-datagrid-row-alternation-bg);
 }
 
 ::ng-deep .dx-scheduler-time-panel-cell .dinner {
-  color: #C25100;
+  color: var(--dx-color-success);
   font-weight: 400;
   background: transparent;
 }
@@ -65,7 +65,7 @@
   -webkit-mask-position-y: 50%;
   -webkit-mask-position-x: 100%;
   margin-top: -4px;
-  background-color: #C25100;
+  background-color: var(--dx-color-success);
 }
 
 ::ng-deep .dx-scheduler-date-table-cell {
diff --git a/apps/demos/Demos/Scheduler/CellTemplates/React/styles.css b/apps/demos/Demos/Scheduler/CellTemplates/React/styles.css
index b41719168617..7b3e7c924407 100644
--- a/apps/demos/Demos/Scheduler/CellTemplates/React/styles.css
+++ b/apps/demos/Demos/Scheduler/CellTemplates/React/styles.css
@@ -21,12 +21,12 @@
   background-image:
     repeating-linear-gradient(
       135deg,
-      rgba(247, 234, 224, 1),
-      rgba(247, 234, 224, 1) 4px,
-      transparent 4px,
-      transparent 9px
+      var(--dx-datagrid-row-alternation-bg),
+      var(--dx-datagrid-row-alternation-bg) 2px,
+      transparent 2px,
+      transparent 6px
     );
-  color: rgba(178, 74, 0, 1);
+  color: var(--dx-color-success);
 }
 
 .dx-scheduler-header-panel-cell .disable-date {
@@ -43,11 +43,11 @@
 }
 
 .dinner {
-  background: #FBF1EB;
+  background: var(--dx-datagrid-row-alternation-bg);
 }
 
 .dx-scheduler-time-panel-cell .dinner {
-  color: #C25100;
+  color: var(--dx-color-success);
   font-weight: 400;
   background: transparent;
 }
@@ -65,7 +65,7 @@ td.dx-scheduler-time-panel-cell .dinner .cafe {
   -webkit-mask-position-y: 50%;
   -webkit-mask-position-x: 100%;
   margin-top: -4px;
-  background-color: #C25100;
+  background-color: var(--dx-color-success);
 }
 
 .dx-scheduler-date-table-cell {
diff --git a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/styles.css b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/styles.css
index b41719168617..7b3e7c924407 100644
--- a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/styles.css
+++ b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/styles.css
@@ -21,12 +21,12 @@
   background-image:
     repeating-linear-gradient(
       135deg,
-      rgba(247, 234, 224, 1),
-      rgba(247, 234, 224, 1) 4px,
-      transparent 4px,
-      transparent 9px
+      var(--dx-datagrid-row-alternation-bg),
+      var(--dx-datagrid-row-alternation-bg) 2px,
+      transparent 2px,
+      transparent 6px
     );
-  color: rgba(178, 74, 0, 1);
+  color: var(--dx-color-success);
 }
 
 .dx-scheduler-header-panel-cell .disable-date {
@@ -43,11 +43,11 @@
 }
 
 .dinner {
-  background: #FBF1EB;
+  background: var(--dx-datagrid-row-alternation-bg);
 }
 
 .dx-scheduler-time-panel-cell .dinner {
-  color: #C25100;
+  color: var(--dx-color-success);
   font-weight: 400;
   background: transparent;
 }
@@ -65,7 +65,7 @@ td.dx-scheduler-time-panel-cell .dinner .cafe {
   -webkit-mask-position-y: 50%;
   -webkit-mask-position-x: 100%;
   margin-top: -4px;
-  background-color: #C25100;
+  background-color: var(--dx-color-success);
 }
 
 .dx-scheduler-date-table-cell {
diff --git a/apps/demos/Demos/Scheduler/CellTemplates/Vue/styles.css b/apps/demos/Demos/Scheduler/CellTemplates/Vue/styles.css
index b41719168617..7b3e7c924407 100644
--- a/apps/demos/Demos/Scheduler/CellTemplates/Vue/styles.css
+++ b/apps/demos/Demos/Scheduler/CellTemplates/Vue/styles.css
@@ -21,12 +21,12 @@
   background-image:
     repeating-linear-gradient(
       135deg,
-      rgba(247, 234, 224, 1),
-      rgba(247, 234, 224, 1) 4px,
-      transparent 4px,
-      transparent 9px
+      var(--dx-datagrid-row-alternation-bg),
+      var(--dx-datagrid-row-alternation-bg) 2px,
+      transparent 2px,
+      transparent 6px
     );
-  color: rgba(178, 74, 0, 1);
+  color: var(--dx-color-success);
 }
 
 .dx-scheduler-header-panel-cell .disable-date {
@@ -43,11 +43,11 @@
 }
 
 .dinner {
-  background: #FBF1EB;
+  background: var(--dx-datagrid-row-alternation-bg);
 }
 
 .dx-scheduler-time-panel-cell .dinner {
-  color: #C25100;
+  color: var(--dx-color-success);
   font-weight: 400;
   background: transparent;
 }
@@ -65,7 +65,7 @@ td.dx-scheduler-time-panel-cell .dinner .cafe {
   -webkit-mask-position-y: 50%;
   -webkit-mask-position-x: 100%;
   margin-top: -4px;
-  background-color: #C25100;
+  background-color: var(--dx-color-success);
 }
 
 .dx-scheduler-date-table-cell {
diff --git a/apps/demos/Demos/Scheduler/CellTemplates/jQuery/styles.css b/apps/demos/Demos/Scheduler/CellTemplates/jQuery/styles.css
index b41719168617..7b3e7c924407 100644
--- a/apps/demos/Demos/Scheduler/CellTemplates/jQuery/styles.css
+++ b/apps/demos/Demos/Scheduler/CellTemplates/jQuery/styles.css
@@ -21,12 +21,12 @@
   background-image:
     repeating-linear-gradient(
       135deg,
-      rgba(247, 234, 224, 1),
-      rgba(247, 234, 224, 1) 4px,
-      transparent 4px,
-      transparent 9px
+      var(--dx-datagrid-row-alternation-bg),
+      var(--dx-datagrid-row-alternation-bg) 2px,
+      transparent 2px,
+      transparent 6px
     );
-  color: rgba(178, 74, 0, 1);
+  color: var(--dx-color-success);
 }
 
 .dx-scheduler-header-panel-cell .disable-date {
@@ -43,11 +43,11 @@
 }
 
 .dinner {
-  background: #FBF1EB;
+  background: var(--dx-datagrid-row-alternation-bg);
 }
 
 .dx-scheduler-time-panel-cell .dinner {
-  color: #C25100;
+  color: var(--dx-color-success);
   font-weight: 400;
   background: transparent;
 }
@@ -65,7 +65,7 @@ td.dx-scheduler-time-panel-cell .dinner .cafe {
   -webkit-mask-position-y: 50%;
   -webkit-mask-position-x: 100%;
   margin-top: -4px;
-  background-color: #C25100;
+  background-color: var(--dx-color-success);
 }
 
 .dx-scheduler-date-table-cell {
diff --git a/apps/demos/Demos/Sortable/Kanban/Angular/app/app.component.css b/apps/demos/Demos/Sortable/Kanban/Angular/app/app.component.css
index 8aa0fffe599f..6a50599389a3 100644
--- a/apps/demos/Demos/Sortable/Kanban/Angular/app/app.component.css
+++ b/apps/demos/Demos/Sortable/Kanban/Angular/app/app.component.css
@@ -46,7 +46,7 @@
 }
 
 .card-assignee {
-  opacity: 0.6;
+  color: var(--dx-color-icon);
 }
 
 .card-priority {
diff --git a/apps/demos/Demos/Sortable/Kanban/React/styles.css b/apps/demos/Demos/Sortable/Kanban/React/styles.css
index fb043c1e2a1d..1b69778ed9e7 100644
--- a/apps/demos/Demos/Sortable/Kanban/React/styles.css
+++ b/apps/demos/Demos/Sortable/Kanban/React/styles.css
@@ -46,7 +46,7 @@
 }
 
 .card-assignee {
-  opacity: 0.6;
+  color: var(--dx-color-icon);
 }
 
 .card-priority {
diff --git a/apps/demos/Demos/Sortable/Kanban/ReactJs/styles.css b/apps/demos/Demos/Sortable/Kanban/ReactJs/styles.css
index fb043c1e2a1d..1b69778ed9e7 100644
--- a/apps/demos/Demos/Sortable/Kanban/ReactJs/styles.css
+++ b/apps/demos/Demos/Sortable/Kanban/ReactJs/styles.css
@@ -46,7 +46,7 @@
 }
 
 .card-assignee {
-  opacity: 0.6;
+  color: var(--dx-color-icon);
 }
 
 .card-priority {
diff --git a/apps/demos/Demos/Sortable/Kanban/Vue/App.vue b/apps/demos/Demos/Sortable/Kanban/Vue/App.vue
index 0d74d9b6e95b..ec6d5be55d9e 100644
--- a/apps/demos/Demos/Sortable/Kanban/Vue/App.vue
+++ b/apps/demos/Demos/Sortable/Kanban/Vue/App.vue
@@ -127,7 +127,7 @@ function getPriorityClass(task: Task) {
 }
 
 .card-assignee {
-  opacity: 0.6;
+  color: var(--dx-color-icon);
 }
 
 .card-priority {
diff --git a/apps/demos/Demos/Sortable/Kanban/jQuery/styles.css b/apps/demos/Demos/Sortable/Kanban/jQuery/styles.css
index fb043c1e2a1d..1b69778ed9e7 100644
--- a/apps/demos/Demos/Sortable/Kanban/jQuery/styles.css
+++ b/apps/demos/Demos/Sortable/Kanban/jQuery/styles.css
@@ -46,7 +46,7 @@
 }
 
 .card-assignee {
-  opacity: 0.6;
+  color: var(--dx-color-icon);
 }
 
 .card-priority {
diff --git a/apps/demos/Demos/Tabs/Selection/Angular/app/app.component.css b/apps/demos/Demos/Tabs/Selection/Angular/app/app.component.css
index 9fa0c9d81add..993e40a0b55e 100644
--- a/apps/demos/Demos/Tabs/Selection/Angular/app/app.component.css
+++ b/apps/demos/Demos/Tabs/Selection/Angular/app/app.component.css
@@ -45,7 +45,7 @@
 
 ::ng-deep .demo-info {
   padding-left: 8px;
-  opacity: 0.6;
+  color: var(--dx-color-icon);
 }
 
 ::ng-deep .icon-container {
diff --git a/apps/demos/Demos/Tabs/Selection/React/styles.css b/apps/demos/Demos/Tabs/Selection/React/styles.css
index 7ce9bfe2ab2f..1005bb88b147 100644
--- a/apps/demos/Demos/Tabs/Selection/React/styles.css
+++ b/apps/demos/Demos/Tabs/Selection/React/styles.css
@@ -45,7 +45,7 @@
 
 .demo-info {
   padding-left: 8px;
-  opacity: 0.6;
+  color: var(--dx-color-icon);
 }
 
 .icon-container {
diff --git a/apps/demos/Demos/Tabs/Selection/ReactJs/styles.css b/apps/demos/Demos/Tabs/Selection/ReactJs/styles.css
index 7ce9bfe2ab2f..1005bb88b147 100644
--- a/apps/demos/Demos/Tabs/Selection/ReactJs/styles.css
+++ b/apps/demos/Demos/Tabs/Selection/ReactJs/styles.css
@@ -45,7 +45,7 @@
 
 .demo-info {
   padding-left: 8px;
-  opacity: 0.6;
+  color: var(--dx-color-icon);
 }
 
 .icon-container {
diff --git a/apps/demos/Demos/Tabs/Selection/Vue/App.vue b/apps/demos/Demos/Tabs/Selection/Vue/App.vue
index 4b51597d92bc..0cbff0d86444 100644
--- a/apps/demos/Demos/Tabs/Selection/Vue/App.vue
+++ b/apps/demos/Demos/Tabs/Selection/Vue/App.vue
@@ -114,7 +114,7 @@ const selectedItemId = ref(employees[0].id);
 
   .demo-info {
     padding-left: 8px;
-    opacity: 0.6;
+    color: var(--dx-color-icon);
   }
 
   .icon-container {
diff --git a/apps/demos/Demos/Tabs/Selection/jQuery/styles.css b/apps/demos/Demos/Tabs/Selection/jQuery/styles.css
index 7ce9bfe2ab2f..1005bb88b147 100644
--- a/apps/demos/Demos/Tabs/Selection/jQuery/styles.css
+++ b/apps/demos/Demos/Tabs/Selection/jQuery/styles.css
@@ -45,7 +45,7 @@
 
 .demo-info {
   padding-left: 8px;
-  opacity: 0.6;
+  color: var(--dx-color-icon);
 }
 
 .icon-container {
diff --git a/apps/demos/Demos/TreeList/AIColumns/Angular/app/status/status.component.css b/apps/demos/Demos/TreeList/AIColumns/Angular/app/status/status.component.css
index c983b2ec1d39..0679031a6849 100644
--- a/apps/demos/Demos/TreeList/AIColumns/Angular/app/status/status.component.css
+++ b/apps/demos/Demos/TreeList/AIColumns/Angular/app/status/status.component.css
@@ -8,7 +8,7 @@
 }
 
 .status--commission {
-  color: #f7630c;
+  color: var(--dx-color-warning);
 }
 
 .status--terminated {
diff --git a/apps/demos/Demos/TreeList/AIColumns/React/styles.css b/apps/demos/Demos/TreeList/AIColumns/React/styles.css
index 6e95d25dba6d..543af359354a 100644
--- a/apps/demos/Demos/TreeList/AIColumns/React/styles.css
+++ b/apps/demos/Demos/TreeList/AIColumns/React/styles.css
@@ -54,7 +54,7 @@
 }
 
 .status--commission {
-  color: #f7630c;
+  color: var(--dx-color-warning);
 }
 
 .status--terminated {
diff --git a/apps/demos/Demos/TreeList/AIColumns/ReactJs/styles.css b/apps/demos/Demos/TreeList/AIColumns/ReactJs/styles.css
index 6e95d25dba6d..543af359354a 100644
--- a/apps/demos/Demos/TreeList/AIColumns/ReactJs/styles.css
+++ b/apps/demos/Demos/TreeList/AIColumns/ReactJs/styles.css
@@ -54,7 +54,7 @@
 }
 
 .status--commission {
-  color: #f7630c;
+  color: var(--dx-color-warning);
 }
 
 .status--terminated {
diff --git a/apps/demos/Demos/TreeList/AIColumns/Vue/Status.vue b/apps/demos/Demos/TreeList/AIColumns/Vue/Status.vue
index 62ea938d86ef..7ad94171947c 100644
--- a/apps/demos/Demos/TreeList/AIColumns/Vue/Status.vue
+++ b/apps/demos/Demos/TreeList/AIColumns/Vue/Status.vue
@@ -22,7 +22,7 @@ defineProps<{
 }
 
 .status--commission {
-  color: #f7630c;
+  color: var(--dx-color-warning);
 }
 
 .status--terminated {
diff --git a/apps/demos/Demos/TreeList/AIColumns/jQuery/styles.css b/apps/demos/Demos/TreeList/AIColumns/jQuery/styles.css
index 7f15c9e03c64..2a71f2993d3f 100644
--- a/apps/demos/Demos/TreeList/AIColumns/jQuery/styles.css
+++ b/apps/demos/Demos/TreeList/AIColumns/jQuery/styles.css
@@ -54,7 +54,7 @@
 }
 
 .status--commission {
-  color: #f7630c;
+  color: var(--dx-color-warning);
 }
 
 .status--terminated {
diff --git a/apps/demos/Demos/TreeList/FilterModes/Angular/app/app.component.css b/apps/demos/Demos/TreeList/FilterModes/Angular/app/app.component.css
index a223be68803d..c0b5edc4b69a 100644
--- a/apps/demos/Demos/TreeList/FilterModes/Angular/app/app.component.css
+++ b/apps/demos/Demos/TreeList/FilterModes/Angular/app/app.component.css
@@ -5,7 +5,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background: #f5f5f5;
+  background-color: var(--dx-datagrid-row-alternation-bg);
 }
 
 ::ng-deep .options .caption {
diff --git a/apps/demos/Demos/TreeList/FilterModes/React/styles.css b/apps/demos/Demos/TreeList/FilterModes/React/styles.css
index 2e3caec53ebb..effd014794f8 100644
--- a/apps/demos/Demos/TreeList/FilterModes/React/styles.css
+++ b/apps/demos/Demos/TreeList/FilterModes/React/styles.css
@@ -5,7 +5,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background: #f5f5f5;
+  background-color: var(--dx-datagrid-row-alternation-bg);
 }
 
 .options .caption {
diff --git a/apps/demos/Demos/TreeList/FilterModes/ReactJs/styles.css b/apps/demos/Demos/TreeList/FilterModes/ReactJs/styles.css
index 2e3caec53ebb..effd014794f8 100644
--- a/apps/demos/Demos/TreeList/FilterModes/ReactJs/styles.css
+++ b/apps/demos/Demos/TreeList/FilterModes/ReactJs/styles.css
@@ -5,7 +5,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background: #f5f5f5;
+  background-color: var(--dx-datagrid-row-alternation-bg);
 }
 
 .options .caption {
diff --git a/apps/demos/Demos/TreeList/FilterModes/Vue/App.vue b/apps/demos/Demos/TreeList/FilterModes/Vue/App.vue
index 0dfd8ac8f855..39dbd1497cea 100644
--- a/apps/demos/Demos/TreeList/FilterModes/Vue/App.vue
+++ b/apps/demos/Demos/TreeList/FilterModes/Vue/App.vue
@@ -72,7 +72,7 @@ const filterModes: DxTreeListTypes.TreeListFilterMode[] = ['matchOnly', 'withAnc
 .options {
   margin-top: 20px;
   padding: 20px;
-  background: #f5f5f5;
+  background-color: var(--dx-datagrid-row-alternation-bg);
 }
 
 .options .caption {
diff --git a/apps/demos/Demos/TreeList/FilterModes/jQuery/styles.css b/apps/demos/Demos/TreeList/FilterModes/jQuery/styles.css
index 2e3caec53ebb..effd014794f8 100644
--- a/apps/demos/Demos/TreeList/FilterModes/jQuery/styles.css
+++ b/apps/demos/Demos/TreeList/FilterModes/jQuery/styles.css
@@ -5,7 +5,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background: #f5f5f5;
+  background-color: var(--dx-datagrid-row-alternation-bg);
 }
 
 .options .caption {
diff --git a/apps/demos/Demos/TreeList/StatePersistence/Angular/app/app.component.css b/apps/demos/Demos/TreeList/StatePersistence/Angular/app/app.component.css
index 50568648f16b..e6d258843795 100644
--- a/apps/demos/Demos/TreeList/StatePersistence/Angular/app/app.component.css
+++ b/apps/demos/Demos/TreeList/StatePersistence/Angular/app/app.component.css
@@ -4,7 +4,6 @@
 }
 
 ::ng-deep #descContainer a {
-  color: #f05b41;
   text-decoration: underline;
   cursor: pointer;
 }
diff --git a/apps/demos/Demos/TreeList/StatePersistence/React/styles.css b/apps/demos/Demos/TreeList/StatePersistence/React/styles.css
index 72ef92cdee35..f05f469b038e 100644
--- a/apps/demos/Demos/TreeList/StatePersistence/React/styles.css
+++ b/apps/demos/Demos/TreeList/StatePersistence/React/styles.css
@@ -4,7 +4,6 @@
 }
 
 #descContainer a {
-  color: #f05b41;
   text-decoration: underline;
   cursor: pointer;
 }
diff --git a/apps/demos/Demos/TreeList/StatePersistence/ReactJs/styles.css b/apps/demos/Demos/TreeList/StatePersistence/ReactJs/styles.css
index 72ef92cdee35..f05f469b038e 100644
--- a/apps/demos/Demos/TreeList/StatePersistence/ReactJs/styles.css
+++ b/apps/demos/Demos/TreeList/StatePersistence/ReactJs/styles.css
@@ -4,7 +4,6 @@
 }
 
 #descContainer a {
-  color: #f05b41;
   text-decoration: underline;
   cursor: pointer;
 }
diff --git a/apps/demos/Demos/TreeList/StatePersistence/Vue/App.vue b/apps/demos/Demos/TreeList/StatePersistence/Vue/App.vue
index 5f6695b6df88..910db31a3cde 100644
--- a/apps/demos/Demos/TreeList/StatePersistence/Vue/App.vue
+++ b/apps/demos/Demos/TreeList/StatePersistence/Vue/App.vue
@@ -72,7 +72,6 @@ function onStateResetClick() {
 }
 
 #descContainer a {
-  color: #f05b41;
   text-decoration: underline;
   cursor: pointer;
 }
diff --git a/apps/demos/Demos/TreeList/StatePersistence/jQuery/styles.css b/apps/demos/Demos/TreeList/StatePersistence/jQuery/styles.css
index 72ef92cdee35..f05f469b038e 100644
--- a/apps/demos/Demos/TreeList/StatePersistence/jQuery/styles.css
+++ b/apps/demos/Demos/TreeList/StatePersistence/jQuery/styles.css
@@ -4,7 +4,6 @@
 }
 
 #descContainer a {
-  color: #f05b41;
   text-decoration: underline;
   cursor: pointer;
 }
diff --git a/apps/demos/Demos/TreeView/TreeViewWithSearchBar/Angular/app/app.component.css b/apps/demos/Demos/TreeView/TreeViewWithSearchBar/Angular/app/app.component.css
index e03b5926bb21..5bb4c6ca8821 100644
--- a/apps/demos/Demos/TreeView/TreeViewWithSearchBar/Angular/app/app.component.css
+++ b/apps/demos/Demos/TreeView/TreeViewWithSearchBar/Angular/app/app.component.css
@@ -9,7 +9,7 @@
   right: 0;
   width: 260px;
   top: 0;
-  background-color: #f5f5f5;
+  background-color: var(--dx-datagrid-row-alternation-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/TreeView/TreeViewWithSearchBar/React/styles.css b/apps/demos/Demos/TreeView/TreeViewWithSearchBar/React/styles.css
index fbe6b2b093db..a5ad8b3b4581 100644
--- a/apps/demos/Demos/TreeView/TreeViewWithSearchBar/React/styles.css
+++ b/apps/demos/Demos/TreeView/TreeViewWithSearchBar/React/styles.css
@@ -9,7 +9,7 @@
   right: 0;
   width: 260px;
   top: 0;
-  background-color: #f5f5f5;
+  background-color: var(--dx-datagrid-row-alternation-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/TreeView/TreeViewWithSearchBar/ReactJs/styles.css b/apps/demos/Demos/TreeView/TreeViewWithSearchBar/ReactJs/styles.css
index fbe6b2b093db..a5ad8b3b4581 100644
--- a/apps/demos/Demos/TreeView/TreeViewWithSearchBar/ReactJs/styles.css
+++ b/apps/demos/Demos/TreeView/TreeViewWithSearchBar/ReactJs/styles.css
@@ -9,7 +9,7 @@
   right: 0;
   width: 260px;
   top: 0;
-  background-color: #f5f5f5;
+  background-color: var(--dx-datagrid-row-alternation-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/TreeView/TreeViewWithSearchBar/Vue/App.vue b/apps/demos/Demos/TreeView/TreeViewWithSearchBar/Vue/App.vue
index 852fdd6b050a..c4972eb786ce 100644
--- a/apps/demos/Demos/TreeView/TreeViewWithSearchBar/Vue/App.vue
+++ b/apps/demos/Demos/TreeView/TreeViewWithSearchBar/Vue/App.vue
@@ -42,7 +42,7 @@ const searchMode = ref(options[0]);
   right: 0;
   width: 260px;
   top: 0;
-  background-color: #f5f5f5;
+  background-color: var(--dx-datagrid-row-alternation-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/TreeView/TreeViewWithSearchBar/jQuery/styles.css b/apps/demos/Demos/TreeView/TreeViewWithSearchBar/jQuery/styles.css
index fbe6b2b093db..a5ad8b3b4581 100644
--- a/apps/demos/Demos/TreeView/TreeViewWithSearchBar/jQuery/styles.css
+++ b/apps/demos/Demos/TreeView/TreeViewWithSearchBar/jQuery/styles.css
@@ -9,7 +9,7 @@
   right: 0;
   width: 260px;
   top: 0;
-  background-color: #f5f5f5;
+  background-color: var(--dx-datagrid-row-alternation-bg);
 }
 
 .caption {
diff --git a/apps/demos/testing/accessibility-unsupported-components.js b/apps/demos/testing/accessibility-unsupported-components.js
deleted file mode 100644
index afb918a223bc..000000000000
--- a/apps/demos/testing/accessibility-unsupported-components.js
+++ /dev/null
@@ -1,10 +0,0 @@
-export const accessibilityUnsupportedComponents = [
-  'Accordion',
-  'Charts',
-  'Diagram',
-  'FileManager',
-  'Gantt',
-  'Map',
-  'Scheduler',
-  'PivotGrid',
-];
diff --git a/apps/demos/testing/common.test.ts b/apps/demos/testing/common.test.ts
index c99df5fa2510..f3e19e8c64ca 100644
--- a/apps/demos/testing/common.test.ts
+++ b/apps/demos/testing/common.test.ts
@@ -15,11 +15,13 @@ import {
   execCode,
   injectStyle,
 } from '../utils/visual-tests/matrix-test-helper';
-import { testScreenshot } from '../utils/visual-tests/helpers/theme-utils';
+import {
+  testScreenshot,
+  isMaterial,
+  isFluent,
+} from '../utils/visual-tests/helpers/theme-utils';
 import { createMdReport, createTestCafeReport } from '../utils/axe-reporter/reporter';
-import { accessibilityUnsupportedComponents } from './accessibility-unsupported-components';
 import { knownWarnings } from './known-warnings';
-import { skipJsErrorsComponents } from './skip-js-errors-components';
 import { skippedTests } from './skipped-tests';
 
 import { gitHubIgnored } from '../utils/visual-tests/github-ignored-list';
@@ -30,18 +32,84 @@ const execTestCafeCode = (t, code) => {
   return testCafeFunction(t);
 };
 
-const COMMON_SKIP_RULES = ['color-contrast'];
-const getTestSpecificSkipRules = (testName) => {
-  switch (testName) {
-    case 'Calendar-MultipleSelection':
-      return ['empty-table-header'];
-    case 'Localization-UsingGlobalize':
-      return ['label'];
-    case 'DataGrid-EditStateManagement':
-      return ['aria-required-parent'];
-    default:
-      return [];
+const getIgnoredRules = (testName) => {
+  const ignoredRules = [];
+
+  if ((isMaterial() || isFluent())
+    && [
+      // False positive: contrast rules do not apply to disabled tags
+      'Accordion-Overview',
+      'TagBox-Overview',
+      'TreeList-StatePersistence',
+      // False positive: contrast rules do not apply to custom orange color
+      'CardView-FieldTemplate',
+      // False positive: contrast rules do not apply to read-only editors on the custom option panel background
+      'VectorMap-DynamicViewport',
+    ].includes(testName)
+  ) {
+    ignoredRules.push('color-contrast');
   }
+
+  const specificRules = {
+    'Accordion-Overview': ['nested-interactive'],
+
+    'Calendar-MultipleSelection': ['empty-table-header'],
+
+    'Charts-AreaSparklines': ['empty-table-header'],
+    'Charts-BarSparklines': ['empty-table-header'],
+    'Charts-SimpleBullets': ['empty-table-header'],
+    'Charts-SimpleSparklines': ['empty-table-header'],
+    'Charts-WinlossSparklines': ['empty-table-header'],
+
+    'DataGrid-EditStateManagement': ['aria-required-parent'],
+    'DataGrid-RemoteCRUDOperations': ['scrollable-region-focusable'],
+
+    'Diagram-Adaptability': ['aria-dialog-name', 'label'],
+    'Diagram-AdvancedDataBinding': ['aria-dialog-name', 'label'],
+    'Diagram-Containers': ['aria-dialog-name', 'label'],
+    'Diagram-CustomShapesWithIcons': ['aria-dialog-name', 'label'],
+    'Diagram-CustomShapesWithTemplates': ['label'],
+    'Diagram-CustomShapesWithTemplatesWithEditing': ['aria-dialog-name', 'label'],
+    'Diagram-CustomShapesWithTexts': ['aria-dialog-name', 'label'],
+    'Diagram-ImagesInShapes': ['aria-dialog-name', 'label'],
+    'Diagram-ItemSelection': ['label'],
+    'Diagram-NodesAndEdgesArrays': ['aria-dialog-name', 'label'],
+    'Diagram-NodesArrayHierarchicalStructure': ['aria-dialog-name', 'label'],
+    'Diagram-NodesArrayPlainStructure': ['aria-dialog-name', 'label'],
+    'Diagram-OperationRestrictions': ['aria-dialog-name', 'label'],
+    'Diagram-Overview': ['aria-dialog-name', 'label'],
+    'Diagram-ReadOnly': ['label'],
+    'Diagram-SimpleView': ['label'],
+    'Diagram-UICustomization': ['aria-dialog-name', 'label'],
+    'Diagram-WebAPIService': ['aria-dialog-name', 'label'],
+
+    'FileManager-BindingToEF': ['aria-command-name', 'label'],
+    'FileManager-BindingToFileSystem': ['aria-command-name', 'empty-table-header', 'label'],
+    'FileManager-BindingToHierarchicalStructure': ['aria-command-name', 'empty-table-header', 'label'],
+    'FileManager-CustomThumbnails': ['aria-allowed-attr', 'aria-command-name', 'image-alt', 'label'],
+    'FileManager-Overview': ['aria-command-name', 'empty-table-header', 'label'],
+    'FileManager-UICustomization': ['aria-command-name', 'empty-table-header', 'label'],
+
+    'PivotGrid-SummaryDisplayModes': ['aria-allowed-attr'],
+    'PivotGrid-StatePersistence': ['aria-allowed-attr'],
+    'PivotGrid-StandaloneFieldChooser': ['aria-allowed-attr'],
+    'PivotGrid-FieldPanel': ['aria-allowed-attr'],
+    'PivotGrid-ExcelJsHeaderAndFooter': ['aria-allowed-attr'],
+
+    'Scheduler-Templates': ['image-alt'],
+
+    'Gantt-Appearance': ['aria-toggle-field-name'],
+    'Gantt-ExportToPDF': ['aria-toggle-field-name'],
+    'Gantt-StripLines': ['aria-required-parent', 'aria-valid-attr-value'],
+    'Gantt-Validation': ['aria-required-parent', 'aria-valid-attr-value'],
+
+    'Localization-UsingGlobalize': ['label'],
+  };
+
+  return [
+    ...ignoredRules,
+    ...(specificRules[testName] || []),
+  ];
 };
 
 const getClientScripts = () => {
@@ -102,10 +170,6 @@ Object.values(FRAMEWORKS).forEach((approach) => {
 
     let comparisonOptions;
     if (process.env.DISABLE_DEMO_TEST_SETTINGS !== 'all') {
-      if (process.env.STRATEGY === 'accessibility' && accessibilityUnsupportedComponents.includes(widgetName)) {
-        return;
-      }
-
       const approachLowerCase = approach.toLowerCase();
       const mergedTestSettings = (visualTestSettings && {
         ...visualTestSettings,
@@ -134,14 +198,13 @@ Object.values(FRAMEWORKS).forEach((approach) => {
       return;
     }
 
-    if (shouldSkipDemo(approach, widgetName, demoName, skippedTests)) {
+    if (shouldSkipDemo(approach, widgetName, demoName, skippedTests) && process.env.STRATEGY !== 'accessibility') {
       return;
     }
 
     runTestAtPage(
       test,
-      pageURL,
-      skipJsErrorsComponents.includes(widgetName),
+      pageURL
     )
       .clientScripts(clientScriptSource)(testName, async (t) => {
         if (visualTestStyles) {
@@ -160,10 +223,10 @@ Object.values(FRAMEWORKS).forEach((approach) => {
         }
 
         if (process.env.STRATEGY === 'accessibility') {
-          const specificSkipRules = getTestSpecificSkipRules(testName);
+          const ignoredRules = getIgnoredRules(testName);
           const options = { rules: {} };
 
-          [...COMMON_SKIP_RULES, ...specificSkipRules].forEach((ruleName) => {
+          ignoredRules.forEach((ruleName) => {
             options.rules[ruleName] = { enabled: false };
           });
 
diff --git a/apps/demos/testing/etalons/Accordion-Overview (material.blue.light).png b/apps/demos/testing/etalons/Accordion-Overview (material.blue.light).png
index 44757a1dee6d..acd55fa0dc05 100644
Binary files a/apps/demos/testing/etalons/Accordion-Overview (material.blue.light).png and b/apps/demos/testing/etalons/Accordion-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/ActionSheet-Basics (material.blue.light).png b/apps/demos/testing/etalons/ActionSheet-Basics (material.blue.light).png
index c32b4509c06f..93d8d7ab0489 100644
Binary files a/apps/demos/testing/etalons/ActionSheet-Basics (material.blue.light).png and b/apps/demos/testing/etalons/ActionSheet-Basics (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/ActionSheet-PopoverMode (material.blue.light).png b/apps/demos/testing/etalons/ActionSheet-PopoverMode (material.blue.light).png
index b907c439e273..595dcae76c7f 100644
Binary files a/apps/demos/testing/etalons/ActionSheet-PopoverMode (material.blue.light).png and b/apps/demos/testing/etalons/ActionSheet-PopoverMode (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Autocomplete-Overview (material.blue.light).png b/apps/demos/testing/etalons/Autocomplete-Overview (material.blue.light).png
index 64c4f8ebff7d..92e249627651 100644
Binary files a/apps/demos/testing/etalons/Autocomplete-Overview (material.blue.light).png and b/apps/demos/testing/etalons/Autocomplete-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Box-Overview (material.blue.light).png b/apps/demos/testing/etalons/Box-Overview (material.blue.light).png
index 0b428fef240d..7622e30ebf8f 100644
Binary files a/apps/demos/testing/etalons/Box-Overview (material.blue.light).png and b/apps/demos/testing/etalons/Box-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Button-Icons (material.blue.light).png b/apps/demos/testing/etalons/Button-Icons (material.blue.light).png
index e9b0831cd58c..f93bacf86f9e 100644
Binary files a/apps/demos/testing/etalons/Button-Icons (material.blue.light).png and b/apps/demos/testing/etalons/Button-Icons (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Button-PredefinedTypes (material.blue.light).png b/apps/demos/testing/etalons/Button-PredefinedTypes (material.blue.light).png
index ca019019ced6..b7e43cfe43c6 100644
Binary files a/apps/demos/testing/etalons/Button-PredefinedTypes (material.blue.light).png and b/apps/demos/testing/etalons/Button-PredefinedTypes (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/ButtonGroup-Overview (material.blue.light).png b/apps/demos/testing/etalons/ButtonGroup-Overview (material.blue.light).png
index 3d493f29ad6b..4d5d4e8145b2 100644
Binary files a/apps/demos/testing/etalons/ButtonGroup-Overview (material.blue.light).png and b/apps/demos/testing/etalons/ButtonGroup-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Calendar-MultipleSelection (material.blue.light).png b/apps/demos/testing/etalons/Calendar-MultipleSelection (material.blue.light).png
index d3267e5aa8e1..62a42a29c264 100644
Binary files a/apps/demos/testing/etalons/Calendar-MultipleSelection (material.blue.light).png and b/apps/demos/testing/etalons/Calendar-MultipleSelection (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Calendar-Overview (material.blue.light).png b/apps/demos/testing/etalons/Calendar-Overview (material.blue.light).png
index 183e54e6e351..badbc29f953f 100644
Binary files a/apps/demos/testing/etalons/Calendar-Overview (material.blue.light).png and b/apps/demos/testing/etalons/Calendar-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/CardView-CardTemplate (material.blue.light).png b/apps/demos/testing/etalons/CardView-CardTemplate (material.blue.light).png
index 3900225f6c8f..3f24edbca1ac 100644
Binary files a/apps/demos/testing/etalons/CardView-CardTemplate (material.blue.light).png and b/apps/demos/testing/etalons/CardView-CardTemplate (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/CardView-ColumnChooser (material.blue.light).png b/apps/demos/testing/etalons/CardView-ColumnChooser (material.blue.light).png
index 4529cefe9885..451b44a11644 100644
Binary files a/apps/demos/testing/etalons/CardView-ColumnChooser (material.blue.light).png and b/apps/demos/testing/etalons/CardView-ColumnChooser (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/CardView-ColumnHeaderFilter (material.blue.light).png b/apps/demos/testing/etalons/CardView-ColumnHeaderFilter (material.blue.light).png
index 8d1ba7d2d13f..750b7ab5fb34 100644
Binary files a/apps/demos/testing/etalons/CardView-ColumnHeaderFilter (material.blue.light).png and b/apps/demos/testing/etalons/CardView-ColumnHeaderFilter (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/CardView-ColumnReordering (material.blue.light).png b/apps/demos/testing/etalons/CardView-ColumnReordering (material.blue.light).png
index ab20aa7e741d..5e67efd23d57 100644
Binary files a/apps/demos/testing/etalons/CardView-ColumnReordering (material.blue.light).png and b/apps/demos/testing/etalons/CardView-ColumnReordering (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/CardView-DataValidation (material.blue.light).png b/apps/demos/testing/etalons/CardView-DataValidation (material.blue.light).png
index ecde0d366b62..6515183c6f62 100644
Binary files a/apps/demos/testing/etalons/CardView-DataValidation (material.blue.light).png and b/apps/demos/testing/etalons/CardView-DataValidation (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/CardView-FieldTemplate (material.blue.light).png b/apps/demos/testing/etalons/CardView-FieldTemplate (material.blue.light).png
index 96d5c2047068..ada99c8c5eb5 100644
Binary files a/apps/demos/testing/etalons/CardView-FieldTemplate (material.blue.light).png and b/apps/demos/testing/etalons/CardView-FieldTemplate (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/CardView-FilterPanel (material.blue.light).png b/apps/demos/testing/etalons/CardView-FilterPanel (material.blue.light).png
index 1bce22250c09..0157908ec8d6 100644
Binary files a/apps/demos/testing/etalons/CardView-FilterPanel (material.blue.light).png and b/apps/demos/testing/etalons/CardView-FilterPanel (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/CardView-Overview (material.blue.light).png b/apps/demos/testing/etalons/CardView-Overview (material.blue.light).png
index b8cecb012d20..bd1efc9c696b 100644
Binary files a/apps/demos/testing/etalons/CardView-Overview (material.blue.light).png and b/apps/demos/testing/etalons/CardView-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/CardView-PopupEditing (material.blue.light).png b/apps/demos/testing/etalons/CardView-PopupEditing (material.blue.light).png
index ecde0d366b62..6515183c6f62 100644
Binary files a/apps/demos/testing/etalons/CardView-PopupEditing (material.blue.light).png and b/apps/demos/testing/etalons/CardView-PopupEditing (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/CardView-SearchPanel (material.blue.light).png b/apps/demos/testing/etalons/CardView-SearchPanel (material.blue.light).png
index 80e89843dbae..3ed41478a95f 100644
Binary files a/apps/demos/testing/etalons/CardView-SearchPanel (material.blue.light).png and b/apps/demos/testing/etalons/CardView-SearchPanel (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/CardView-Selection (material.blue.light).png b/apps/demos/testing/etalons/CardView-Selection (material.blue.light).png
index 4542ebb7c2e7..d62777a7c76b 100644
Binary files a/apps/demos/testing/etalons/CardView-Selection (material.blue.light).png and b/apps/demos/testing/etalons/CardView-Selection (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/CardView-SimpleArray (material.blue.light).png b/apps/demos/testing/etalons/CardView-SimpleArray (material.blue.light).png
index 149cd825cf15..1a7a1642b492 100644
Binary files a/apps/demos/testing/etalons/CardView-SimpleArray (material.blue.light).png and b/apps/demos/testing/etalons/CardView-SimpleArray (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/CardView-Sorting (material.blue.light).png b/apps/demos/testing/etalons/CardView-Sorting (material.blue.light).png
index ce2e71b873be..63c513d7916b 100644
Binary files a/apps/demos/testing/etalons/CardView-Sorting (material.blue.light).png and b/apps/demos/testing/etalons/CardView-Sorting (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/CardView-ToolbarCustomization (material.blue.light).png b/apps/demos/testing/etalons/CardView-ToolbarCustomization (material.blue.light).png
deleted file mode 100644
index ea98693914d2..000000000000
Binary files a/apps/demos/testing/etalons/CardView-ToolbarCustomization (material.blue.light).png and /dev/null differ
diff --git a/apps/demos/testing/etalons/CardView-WebAPIService (material.blue.light).png b/apps/demos/testing/etalons/CardView-WebAPIService (material.blue.light).png
index 9284d6843622..438f57dd0314 100644
Binary files a/apps/demos/testing/etalons/CardView-WebAPIService (material.blue.light).png and b/apps/demos/testing/etalons/CardView-WebAPIService (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-AjaxRequest (material.blue.light).png b/apps/demos/testing/etalons/Charts-AjaxRequest (material.blue.light).png
index c642fac5ac34..acea9a4318e3 100644
Binary files a/apps/demos/testing/etalons/Charts-AjaxRequest (material.blue.light).png and b/apps/demos/testing/etalons/Charts-AjaxRequest (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-Annotation (material.blue.light).png b/apps/demos/testing/etalons/Charts-Annotation (material.blue.light).png
index d125ca469597..82f1c6334f9e 100644
Binary files a/apps/demos/testing/etalons/Charts-Annotation (material.blue.light).png and b/apps/demos/testing/etalons/Charts-Annotation (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-Area (material.blue.light).png b/apps/demos/testing/etalons/Charts-Area (material.blue.light).png
index 1f5a65aae063..7d93e8581f42 100644
Binary files a/apps/demos/testing/etalons/Charts-Area (material.blue.light).png and b/apps/demos/testing/etalons/Charts-Area (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-AreaSelectionZooming (material.blue.light).png b/apps/demos/testing/etalons/Charts-AreaSelectionZooming (material.blue.light).png
index 4ea3217c7fde..960877b05918 100644
Binary files a/apps/demos/testing/etalons/Charts-AreaSelectionZooming (material.blue.light).png and b/apps/demos/testing/etalons/Charts-AreaSelectionZooming (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-AreaSparklines (material.blue.light).png b/apps/demos/testing/etalons/Charts-AreaSparklines (material.blue.light).png
index 7ffa4e55ef8b..8047571b46a4 100644
Binary files a/apps/demos/testing/etalons/Charts-AreaSparklines (material.blue.light).png and b/apps/demos/testing/etalons/Charts-AreaSparklines (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-AutoCalculatedBarWidth (material.blue.light).png b/apps/demos/testing/etalons/Charts-AutoCalculatedBarWidth (material.blue.light).png
index c4510ea310f9..d3ce224ed543 100644
Binary files a/apps/demos/testing/etalons/Charts-AutoCalculatedBarWidth (material.blue.light).png and b/apps/demos/testing/etalons/Charts-AutoCalculatedBarWidth (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-AxisCustomPosition (material.blue.light).png b/apps/demos/testing/etalons/Charts-AxisCustomPosition (material.blue.light).png
index 6f0b04bf2578..b619f7aa6881 100644
Binary files a/apps/demos/testing/etalons/Charts-AxisCustomPosition (material.blue.light).png and b/apps/demos/testing/etalons/Charts-AxisCustomPosition (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-AxisLabelCustomization (material.blue.light).png b/apps/demos/testing/etalons/Charts-AxisLabelCustomization (material.blue.light).png
index 55b1da3c235a..b7a7dc84fe2b 100644
Binary files a/apps/demos/testing/etalons/Charts-AxisLabelCustomization (material.blue.light).png and b/apps/demos/testing/etalons/Charts-AxisLabelCustomization (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-BarColorCustomization (material.blue.light).png b/apps/demos/testing/etalons/Charts-BarColorCustomization (material.blue.light).png
index ffbcc7fa21f7..0428d61fb3bf 100644
Binary files a/apps/demos/testing/etalons/Charts-BarColorCustomization (material.blue.light).png and b/apps/demos/testing/etalons/Charts-BarColorCustomization (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-BarDrillDown (material.blue.light).png b/apps/demos/testing/etalons/Charts-BarDrillDown (material.blue.light).png
index 3abd8e2ec3a9..64f93aa4733e 100644
Binary files a/apps/demos/testing/etalons/Charts-BarDrillDown (material.blue.light).png and b/apps/demos/testing/etalons/Charts-BarDrillDown (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-BarSparklines (material.blue.light).png b/apps/demos/testing/etalons/Charts-BarSparklines (material.blue.light).png
index 6ece2e836e22..0d45d19dabca 100644
Binary files a/apps/demos/testing/etalons/Charts-BarSparklines (material.blue.light).png and b/apps/demos/testing/etalons/Charts-BarSparklines (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-BiDirectionalBarChart (material.blue.light).png b/apps/demos/testing/etalons/Charts-BiDirectionalBarChart (material.blue.light).png
index 60d5db945289..e955ccaa5340 100644
Binary files a/apps/demos/testing/etalons/Charts-BiDirectionalBarChart (material.blue.light).png and b/apps/demos/testing/etalons/Charts-BiDirectionalBarChart (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-Bubble (material.blue.light).png b/apps/demos/testing/etalons/Charts-Bubble (material.blue.light).png
index d4569530f5cf..044ba67d2870 100644
Binary files a/apps/demos/testing/etalons/Charts-Bubble (material.blue.light).png and b/apps/demos/testing/etalons/Charts-Bubble (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-Candlestick (material.blue.light).png b/apps/demos/testing/etalons/Charts-Candlestick (material.blue.light).png
index 99f5a7f41882..0b0887c6c210 100644
Binary files a/apps/demos/testing/etalons/Charts-Candlestick (material.blue.light).png and b/apps/demos/testing/etalons/Charts-Candlestick (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-CenterLabelCustomization (material.blue.light).png b/apps/demos/testing/etalons/Charts-CenterLabelCustomization (material.blue.light).png
index 48b2f0c91fbd..bdad0b494c12 100644
Binary files a/apps/demos/testing/etalons/Charts-CenterLabelCustomization (material.blue.light).png and b/apps/demos/testing/etalons/Charts-CenterLabelCustomization (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-ClientSideDataProcessing (material.blue.light).png b/apps/demos/testing/etalons/Charts-ClientSideDataProcessing (material.blue.light).png
index 8e6212cec1e6..6b370b753b22 100644
Binary files a/apps/demos/testing/etalons/Charts-ClientSideDataProcessing (material.blue.light).png and b/apps/demos/testing/etalons/Charts-ClientSideDataProcessing (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-Colorization (material.blue.light).png b/apps/demos/testing/etalons/Charts-Colorization (material.blue.light).png
index 3478eacbc19d..c34610b2ddfa 100644
Binary files a/apps/demos/testing/etalons/Charts-Colorization (material.blue.light).png and b/apps/demos/testing/etalons/Charts-Colorization (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-ContinuousData (material.blue.light).png b/apps/demos/testing/etalons/Charts-ContinuousData (material.blue.light).png
index 3dd50ba2c587..2e92e5b8dedf 100644
Binary files a/apps/demos/testing/etalons/Charts-ContinuousData (material.blue.light).png and b/apps/demos/testing/etalons/Charts-ContinuousData (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-Crosshair (material.blue.light).png b/apps/demos/testing/etalons/Charts-Crosshair (material.blue.light).png
index b04d291fe1dd..559645778f50 100644
Binary files a/apps/demos/testing/etalons/Charts-Crosshair (material.blue.light).png and b/apps/demos/testing/etalons/Charts-Crosshair (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-CustomAnnotations (material.blue.light).png b/apps/demos/testing/etalons/Charts-CustomAnnotations (material.blue.light).png
index b764fc950135..402b42b5f40b 100644
Binary files a/apps/demos/testing/etalons/Charts-CustomAnnotations (material.blue.light).png and b/apps/demos/testing/etalons/Charts-CustomAnnotations (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-CustomBarWidth (material.blue.light).png b/apps/demos/testing/etalons/Charts-CustomBarWidth (material.blue.light).png
index 898685cefe6c..19714ab4478c 100644
Binary files a/apps/demos/testing/etalons/Charts-CustomBarWidth (material.blue.light).png and b/apps/demos/testing/etalons/Charts-CustomBarWidth (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-CustomFillStyles (material.blue.light).png b/apps/demos/testing/etalons/Charts-CustomFillStyles (material.blue.light).png
index 181c9a27cb71..e4ee6d2f7d3f 100644
Binary files a/apps/demos/testing/etalons/Charts-CustomFillStyles (material.blue.light).png and b/apps/demos/testing/etalons/Charts-CustomFillStyles (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-CustomizePointsAndLabels (material.blue.light).png b/apps/demos/testing/etalons/Charts-CustomizePointsAndLabels (material.blue.light).png
index 5d8c57b55db5..3f75ad182138 100644
Binary files a/apps/demos/testing/etalons/Charts-CustomizePointsAndLabels (material.blue.light).png and b/apps/demos/testing/etalons/Charts-CustomizePointsAndLabels (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-DiscreteAxisZoomingAndScrolling (material.blue.light).png b/apps/demos/testing/etalons/Charts-DiscreteAxisZoomingAndScrolling (material.blue.light).png
index 9c01950def3f..f7b40cbee0b1 100644
Binary files a/apps/demos/testing/etalons/Charts-DiscreteAxisZoomingAndScrolling (material.blue.light).png and b/apps/demos/testing/etalons/Charts-DiscreteAxisZoomingAndScrolling (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-DiscreteData (material.blue.light).png b/apps/demos/testing/etalons/Charts-DiscreteData (material.blue.light).png
index 2b7ac6f1b6fe..c6e6b1f86b8b 100644
Binary files a/apps/demos/testing/etalons/Charts-DiscreteData (material.blue.light).png and b/apps/demos/testing/etalons/Charts-DiscreteData (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-DiscretePointsAggregation (material.blue.light).png b/apps/demos/testing/etalons/Charts-DiscretePointsAggregation (material.blue.light).png
index 5dfcc755eadf..5752e64e9c27 100644
Binary files a/apps/demos/testing/etalons/Charts-DiscretePointsAggregation (material.blue.light).png and b/apps/demos/testing/etalons/Charts-DiscretePointsAggregation (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-Doughnut (material.blue.light).png b/apps/demos/testing/etalons/Charts-Doughnut (material.blue.light).png
index 8bb75a8df1c3..4e6ee50b3cc9 100644
Binary files a/apps/demos/testing/etalons/Charts-Doughnut (material.blue.light).png and b/apps/demos/testing/etalons/Charts-Doughnut (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-DoughnutSelection (material.blue.light).png b/apps/demos/testing/etalons/Charts-DoughnutSelection (material.blue.light).png
index e50a577aebd6..503a604a80ed 100644
Binary files a/apps/demos/testing/etalons/Charts-DoughnutSelection (material.blue.light).png and b/apps/demos/testing/etalons/Charts-DoughnutSelection (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-DoughnutWithTopNSeries (material.blue.light).png b/apps/demos/testing/etalons/Charts-DoughnutWithTopNSeries (material.blue.light).png
index cab450942535..4f40f98eeb55 100644
Binary files a/apps/demos/testing/etalons/Charts-DoughnutWithTopNSeries (material.blue.light).png and b/apps/demos/testing/etalons/Charts-DoughnutWithTopNSeries (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-DrillDown (material.blue.light).png b/apps/demos/testing/etalons/Charts-DrillDown (material.blue.light).png
index 7a64b686d8a9..3e5432cb1492 100644
Binary files a/apps/demos/testing/etalons/Charts-DrillDown (material.blue.light).png and b/apps/demos/testing/etalons/Charts-DrillDown (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-DynamicSeries (material.blue.light).png b/apps/demos/testing/etalons/Charts-DynamicSeries (material.blue.light).png
index 4551916a8904..d95787571b17 100644
Binary files a/apps/demos/testing/etalons/Charts-DynamicSeries (material.blue.light).png and b/apps/demos/testing/etalons/Charts-DynamicSeries (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-EqualSizePies (material.blue.light).png b/apps/demos/testing/etalons/Charts-EqualSizePies (material.blue.light).png
index 7466d86fd9de..e9473f644ec6 100644
Binary files a/apps/demos/testing/etalons/Charts-EqualSizePies (material.blue.light).png and b/apps/demos/testing/etalons/Charts-EqualSizePies (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-ErrorBars (material.blue.light).png b/apps/demos/testing/etalons/Charts-ErrorBars (material.blue.light).png
index 295179d6bc28..68db7f32eec2 100644
Binary files a/apps/demos/testing/etalons/Charts-ErrorBars (material.blue.light).png and b/apps/demos/testing/etalons/Charts-ErrorBars (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-ExportAndPrintingAPI (material.blue.light).png b/apps/demos/testing/etalons/Charts-ExportAndPrintingAPI (material.blue.light).png
index d863be1f9229..72042c94540b 100644
Binary files a/apps/demos/testing/etalons/Charts-ExportAndPrintingAPI (material.blue.light).png and b/apps/demos/testing/etalons/Charts-ExportAndPrintingAPI (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-ExportCustomMarkup (material.blue.light).png b/apps/demos/testing/etalons/Charts-ExportCustomMarkup (material.blue.light).png
index 60c83b114229..c12e634e0cb1 100644
Binary files a/apps/demos/testing/etalons/Charts-ExportCustomMarkup (material.blue.light).png and b/apps/demos/testing/etalons/Charts-ExportCustomMarkup (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-ExportSeveralCharts (material.blue.light).png b/apps/demos/testing/etalons/Charts-ExportSeveralCharts (material.blue.light).png
index 3215640a9aac..bc4ce27d38c7 100644
Binary files a/apps/demos/testing/etalons/Charts-ExportSeveralCharts (material.blue.light).png and b/apps/demos/testing/etalons/Charts-ExportSeveralCharts (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-FlatDataStructure (material.blue.light).png b/apps/demos/testing/etalons/Charts-FlatDataStructure (material.blue.light).png
index 8aa45a18f5d9..fe3b1c2544ef 100644
Binary files a/apps/demos/testing/etalons/Charts-FlatDataStructure (material.blue.light).png and b/apps/demos/testing/etalons/Charts-FlatDataStructure (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-FullStackedBar (material.blue.light).png b/apps/demos/testing/etalons/Charts-FullStackedBar (material.blue.light).png
index 73ac572bfc6b..22462685274f 100644
Binary files a/apps/demos/testing/etalons/Charts-FullStackedBar (material.blue.light).png and b/apps/demos/testing/etalons/Charts-FullStackedBar (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-FunnelChart (material.blue.light).png b/apps/demos/testing/etalons/Charts-FunnelChart (material.blue.light).png
index 8decbcc65c59..c788ce4c9508 100644
Binary files a/apps/demos/testing/etalons/Charts-FunnelChart (material.blue.light).png and b/apps/demos/testing/etalons/Charts-FunnelChart (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-HierarchicalDataStructure (material.blue.light).png b/apps/demos/testing/etalons/Charts-HierarchicalDataStructure (material.blue.light).png
index 8aa45a18f5d9..fe3b1c2544ef 100644
Binary files a/apps/demos/testing/etalons/Charts-HierarchicalDataStructure (material.blue.light).png and b/apps/demos/testing/etalons/Charts-HierarchicalDataStructure (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-HoverMode (material.blue.light).png b/apps/demos/testing/etalons/Charts-HoverMode (material.blue.light).png
index a8045f1b3351..269db5b3730a 100644
Binary files a/apps/demos/testing/etalons/Charts-HoverMode (material.blue.light).png and b/apps/demos/testing/etalons/Charts-HoverMode (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-InvertedChart (material.blue.light).png b/apps/demos/testing/etalons/Charts-InvertedChart (material.blue.light).png
index c163585d36c0..863fef8be59c 100644
Binary files a/apps/demos/testing/etalons/Charts-InvertedChart (material.blue.light).png and b/apps/demos/testing/etalons/Charts-InvertedChart (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-LabelCustomization (material.blue.light).png b/apps/demos/testing/etalons/Charts-LabelCustomization (material.blue.light).png
index e2dae3bbc2ea..7637ef307724 100644
Binary files a/apps/demos/testing/etalons/Charts-LabelCustomization (material.blue.light).png and b/apps/demos/testing/etalons/Charts-LabelCustomization (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-LegendMarkersCustomization (material.blue.light).png b/apps/demos/testing/etalons/Charts-LegendMarkersCustomization (material.blue.light).png
index 3702cc38bd5f..f32266e04c2c 100644
Binary files a/apps/demos/testing/etalons/Charts-LegendMarkersCustomization (material.blue.light).png and b/apps/demos/testing/etalons/Charts-LegendMarkersCustomization (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-Line (material.blue.light).png b/apps/demos/testing/etalons/Charts-Line (material.blue.light).png
index 9d09edc96f99..48c303556251 100644
Binary files a/apps/demos/testing/etalons/Charts-Line (material.blue.light).png and b/apps/demos/testing/etalons/Charts-Line (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-LoadDataOnDemand (material.blue.light).png b/apps/demos/testing/etalons/Charts-LoadDataOnDemand (material.blue.light).png
index b752e29ebfff..1a4cfd613a3e 100644
Binary files a/apps/demos/testing/etalons/Charts-LoadDataOnDemand (material.blue.light).png and b/apps/demos/testing/etalons/Charts-LoadDataOnDemand (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-LogarithmicAxis (material.blue.light).png b/apps/demos/testing/etalons/Charts-LogarithmicAxis (material.blue.light).png
index 7f77509a2c19..c4f5ac0ad8d1 100644
Binary files a/apps/demos/testing/etalons/Charts-LogarithmicAxis (material.blue.light).png and b/apps/demos/testing/etalons/Charts-LogarithmicAxis (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-LogarithmicVsLinearAxes (material.blue.light).png b/apps/demos/testing/etalons/Charts-LogarithmicVsLinearAxes (material.blue.light).png
index 11da73b388f4..8d85364dde88 100644
Binary files a/apps/demos/testing/etalons/Charts-LogarithmicVsLinearAxes (material.blue.light).png and b/apps/demos/testing/etalons/Charts-LogarithmicVsLinearAxes (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-MultipleAxes (material.blue.light).png b/apps/demos/testing/etalons/Charts-MultipleAxes (material.blue.light).png
index 498059d3f25e..6d14fd165092 100644
Binary files a/apps/demos/testing/etalons/Charts-MultipleAxes (material.blue.light).png and b/apps/demos/testing/etalons/Charts-MultipleAxes (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-MultiplePanes (material.blue.light).png b/apps/demos/testing/etalons/Charts-MultiplePanes (material.blue.light).png
index af7029936a26..30500c00531d 100644
Binary files a/apps/demos/testing/etalons/Charts-MultiplePanes (material.blue.light).png and b/apps/demos/testing/etalons/Charts-MultiplePanes (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-MultiplePointSelection (material.blue.light).png b/apps/demos/testing/etalons/Charts-MultiplePointSelection (material.blue.light).png
index 8b46aa0414a9..475142e2a104 100644
Binary files a/apps/demos/testing/etalons/Charts-MultiplePointSelection (material.blue.light).png and b/apps/demos/testing/etalons/Charts-MultiplePointSelection (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-MultipleSeriesSelection (material.blue.light).png b/apps/demos/testing/etalons/Charts-MultipleSeriesSelection (material.blue.light).png
index 1cb53ba46199..cc465fafa9b4 100644
Binary files a/apps/demos/testing/etalons/Charts-MultipleSeriesSelection (material.blue.light).png and b/apps/demos/testing/etalons/Charts-MultipleSeriesSelection (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-NullPointSupport (material.blue.light).png b/apps/demos/testing/etalons/Charts-NullPointSupport (material.blue.light).png
index 5c99ef752a68..ae61af7021a3 100644
Binary files a/apps/demos/testing/etalons/Charts-NullPointSupport (material.blue.light).png and b/apps/demos/testing/etalons/Charts-NullPointSupport (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-Overview (material.blue.light).png b/apps/demos/testing/etalons/Charts-Overview (material.blue.light).png
index 5a370f5f2a1a..3fb72a1c955f 100644
Binary files a/apps/demos/testing/etalons/Charts-Overview (material.blue.light).png and b/apps/demos/testing/etalons/Charts-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-Palette (material.blue.light).png b/apps/demos/testing/etalons/Charts-Palette (material.blue.light).png
index 97c4997dd23e..c909b797fcd4 100644
Binary files a/apps/demos/testing/etalons/Charts-Palette (material.blue.light).png and b/apps/demos/testing/etalons/Charts-Palette (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-ParetoChart (material.blue.light).png b/apps/demos/testing/etalons/Charts-ParetoChart (material.blue.light).png
index 5a370f5f2a1a..3fb72a1c955f 100644
Binary files a/apps/demos/testing/etalons/Charts-ParetoChart (material.blue.light).png and b/apps/demos/testing/etalons/Charts-ParetoChart (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-PeriodicData (material.blue.light).png b/apps/demos/testing/etalons/Charts-PeriodicData (material.blue.light).png
index 7aef540380c5..37308fbc9e72 100644
Binary files a/apps/demos/testing/etalons/Charts-PeriodicData (material.blue.light).png and b/apps/demos/testing/etalons/Charts-PeriodicData (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-Pie (material.blue.light).png b/apps/demos/testing/etalons/Charts-Pie (material.blue.light).png
index fc6bb0d667b6..297938b575d9 100644
Binary files a/apps/demos/testing/etalons/Charts-Pie (material.blue.light).png and b/apps/demos/testing/etalons/Charts-Pie (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-PieAnnotations (material.blue.light).png b/apps/demos/testing/etalons/Charts-PieAnnotations (material.blue.light).png
index 3f46eb4435c4..f6ef932cc507 100644
Binary files a/apps/demos/testing/etalons/Charts-PieAnnotations (material.blue.light).png and b/apps/demos/testing/etalons/Charts-PieAnnotations (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-PieResolveLabelOverlap (material.blue.light).png b/apps/demos/testing/etalons/Charts-PieResolveLabelOverlap (material.blue.light).png
index 0a9729a6f15c..97abbbb10c63 100644
Binary files a/apps/demos/testing/etalons/Charts-PieResolveLabelOverlap (material.blue.light).png and b/apps/demos/testing/etalons/Charts-PieResolveLabelOverlap (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-PieWithMultipleSeries (material.blue.light).png b/apps/demos/testing/etalons/Charts-PieWithMultipleSeries (material.blue.light).png
index e8351a668ad3..b65f7e2b6cf8 100644
Binary files a/apps/demos/testing/etalons/Charts-PieWithMultipleSeries (material.blue.light).png and b/apps/demos/testing/etalons/Charts-PieWithMultipleSeries (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-PointImage (material.blue.light).png b/apps/demos/testing/etalons/Charts-PointImage (material.blue.light).png
index e37e84a4faf2..19ab0e563565 100644
Binary files a/apps/demos/testing/etalons/Charts-PointImage (material.blue.light).png and b/apps/demos/testing/etalons/Charts-PointImage (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-PointSelectionAPI (material.blue.light).png b/apps/demos/testing/etalons/Charts-PointSelectionAPI (material.blue.light).png
index 7e3ac930841a..f87785f69ca8 100644
Binary files a/apps/demos/testing/etalons/Charts-PointSelectionAPI (material.blue.light).png and b/apps/demos/testing/etalons/Charts-PointSelectionAPI (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-PointsAggregation (material.blue.light).png b/apps/demos/testing/etalons/Charts-PointsAggregation (material.blue.light).png
index 7d504f0f4b15..b5f3dbfe491d 100644
Binary files a/apps/demos/testing/etalons/Charts-PointsAggregation (material.blue.light).png and b/apps/demos/testing/etalons/Charts-PointsAggregation (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-PointsAggregationFinancialChart (material.blue.light).png b/apps/demos/testing/etalons/Charts-PointsAggregationFinancialChart (material.blue.light).png
index ec16e461c78b..26d17583cb81 100644
Binary files a/apps/demos/testing/etalons/Charts-PointsAggregationFinancialChart (material.blue.light).png and b/apps/demos/testing/etalons/Charts-PointsAggregationFinancialChart (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-PolarChartAnnotations (material.blue.light).png b/apps/demos/testing/etalons/Charts-PolarChartAnnotations (material.blue.light).png
index 8ca2904229f6..7ab99b442934 100644
Binary files a/apps/demos/testing/etalons/Charts-PolarChartAnnotations (material.blue.light).png and b/apps/demos/testing/etalons/Charts-PolarChartAnnotations (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-PolarChartZoomingAndScrollingAPI (material.blue.light).png b/apps/demos/testing/etalons/Charts-PolarChartZoomingAndScrollingAPI (material.blue.light).png
index d26783892cee..8d18f2c1b255 100644
Binary files a/apps/demos/testing/etalons/Charts-PolarChartZoomingAndScrollingAPI (material.blue.light).png and b/apps/demos/testing/etalons/Charts-PolarChartZoomingAndScrollingAPI (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-PyramidChart (material.blue.light).png b/apps/demos/testing/etalons/Charts-PyramidChart (material.blue.light).png
index dd3b3a00b458..85babc228e9e 100644
Binary files a/apps/demos/testing/etalons/Charts-PyramidChart (material.blue.light).png and b/apps/demos/testing/etalons/Charts-PyramidChart (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-RangeArea (material.blue.light).png b/apps/demos/testing/etalons/Charts-RangeArea (material.blue.light).png
index f56dc7461c56..aea72efafb15 100644
Binary files a/apps/demos/testing/etalons/Charts-RangeArea (material.blue.light).png and b/apps/demos/testing/etalons/Charts-RangeArea (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-RangeBar (material.blue.light).png b/apps/demos/testing/etalons/Charts-RangeBar (material.blue.light).png
index e255717d3dfc..94af7ed422e3 100644
Binary files a/apps/demos/testing/etalons/Charts-RangeBar (material.blue.light).png and b/apps/demos/testing/etalons/Charts-RangeBar (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-ResolveLabelOverlap (material.blue.light).png b/apps/demos/testing/etalons/Charts-ResolveLabelOverlap (material.blue.light).png
index 10b55634d1f5..9d1024b9b47d 100644
Binary files a/apps/demos/testing/etalons/Charts-ResolveLabelOverlap (material.blue.light).png and b/apps/demos/testing/etalons/Charts-ResolveLabelOverlap (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-SankeyChart (material.blue.light).png b/apps/demos/testing/etalons/Charts-SankeyChart (material.blue.light).png
index 55be92bdebab..5652e8810fc1 100644
Binary files a/apps/demos/testing/etalons/Charts-SankeyChart (material.blue.light).png and b/apps/demos/testing/etalons/Charts-SankeyChart (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-ScaleBreaks (material.blue.light).png b/apps/demos/testing/etalons/Charts-ScaleBreaks (material.blue.light).png
index 0549617a91bf..a0cd0f1c2474 100644
Binary files a/apps/demos/testing/etalons/Charts-ScaleBreaks (material.blue.light).png and b/apps/demos/testing/etalons/Charts-ScaleBreaks (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-Scatter (material.blue.light).png b/apps/demos/testing/etalons/Charts-Scatter (material.blue.light).png
index 3d45213fb9cc..47faf13a8123 100644
Binary files a/apps/demos/testing/etalons/Charts-Scatter (material.blue.light).png and b/apps/demos/testing/etalons/Charts-Scatter (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-Selection (material.blue.light).png b/apps/demos/testing/etalons/Charts-Selection (material.blue.light).png
index 3ecce209863b..ac5c3c13e9e5 100644
Binary files a/apps/demos/testing/etalons/Charts-Selection (material.blue.light).png and b/apps/demos/testing/etalons/Charts-Selection (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-ServerSideDataProcessing (material.blue.light).png b/apps/demos/testing/etalons/Charts-ServerSideDataProcessing (material.blue.light).png
index 7c93e5f9652e..ab003f4c129e 100644
Binary files a/apps/demos/testing/etalons/Charts-ServerSideDataProcessing (material.blue.light).png and b/apps/demos/testing/etalons/Charts-ServerSideDataProcessing (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-SideBySideBar (material.blue.light).png b/apps/demos/testing/etalons/Charts-SideBySideBar (material.blue.light).png
index 00c50d725e5a..c2d35b0e9ca4 100644
Binary files a/apps/demos/testing/etalons/Charts-SideBySideBar (material.blue.light).png and b/apps/demos/testing/etalons/Charts-SideBySideBar (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-SideBySideFullStackedBar (material.blue.light).png b/apps/demos/testing/etalons/Charts-SideBySideFullStackedBar (material.blue.light).png
index f107277dc908..dec285d934ce 100644
Binary files a/apps/demos/testing/etalons/Charts-SideBySideFullStackedBar (material.blue.light).png and b/apps/demos/testing/etalons/Charts-SideBySideFullStackedBar (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-SideBySideStackedBar (material.blue.light).png b/apps/demos/testing/etalons/Charts-SideBySideStackedBar (material.blue.light).png
index 754fa2667db1..1298bfc59486 100644
Binary files a/apps/demos/testing/etalons/Charts-SideBySideStackedBar (material.blue.light).png and b/apps/demos/testing/etalons/Charts-SideBySideStackedBar (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-SignalRService (material.blue.light).png b/apps/demos/testing/etalons/Charts-SignalRService (material.blue.light).png
index 1899a1f3f0d3..d9f134d4b90d 100644
Binary files a/apps/demos/testing/etalons/Charts-SignalRService (material.blue.light).png and b/apps/demos/testing/etalons/Charts-SignalRService (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-SimpleArray (material.blue.light).png b/apps/demos/testing/etalons/Charts-SimpleArray (material.blue.light).png
index d94195f7b7ee..61b675e2ec17 100644
Binary files a/apps/demos/testing/etalons/Charts-SimpleArray (material.blue.light).png and b/apps/demos/testing/etalons/Charts-SimpleArray (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-SimpleBullets (material.blue.light).png b/apps/demos/testing/etalons/Charts-SimpleBullets (material.blue.light).png
index 001d60bfc622..86fa4b42303a 100644
Binary files a/apps/demos/testing/etalons/Charts-SimpleBullets (material.blue.light).png and b/apps/demos/testing/etalons/Charts-SimpleBullets (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-SimpleSparklines (material.blue.light).png b/apps/demos/testing/etalons/Charts-SimpleSparklines (material.blue.light).png
index ececca2865c5..495b36fd59a6 100644
Binary files a/apps/demos/testing/etalons/Charts-SimpleSparklines (material.blue.light).png and b/apps/demos/testing/etalons/Charts-SimpleSparklines (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-SmallValueGroups (material.blue.light).png b/apps/demos/testing/etalons/Charts-SmallValueGroups (material.blue.light).png
index 0f9c35225bb3..7deb7b1e2d86 100644
Binary files a/apps/demos/testing/etalons/Charts-SmallValueGroups (material.blue.light).png and b/apps/demos/testing/etalons/Charts-SmallValueGroups (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-SpiderWeb (material.blue.light).png b/apps/demos/testing/etalons/Charts-SpiderWeb (material.blue.light).png
index c2037e8b9315..98126a4d4b14 100644
Binary files a/apps/demos/testing/etalons/Charts-SpiderWeb (material.blue.light).png and b/apps/demos/testing/etalons/Charts-SpiderWeb (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-Spline (material.blue.light).png b/apps/demos/testing/etalons/Charts-Spline (material.blue.light).png
index 103b9490de86..3a8da109ba50 100644
Binary files a/apps/demos/testing/etalons/Charts-Spline (material.blue.light).png and b/apps/demos/testing/etalons/Charts-Spline (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-SplineArea (material.blue.light).png b/apps/demos/testing/etalons/Charts-SplineArea (material.blue.light).png
index da56d6cde09e..5b226be27baf 100644
Binary files a/apps/demos/testing/etalons/Charts-SplineArea (material.blue.light).png and b/apps/demos/testing/etalons/Charts-SplineArea (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-StackedBar (material.blue.light).png b/apps/demos/testing/etalons/Charts-StackedBar (material.blue.light).png
index 71998542493e..d495e41740d0 100644
Binary files a/apps/demos/testing/etalons/Charts-StackedBar (material.blue.light).png and b/apps/demos/testing/etalons/Charts-StackedBar (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-StandardBar (material.blue.light).png b/apps/demos/testing/etalons/Charts-StandardBar (material.blue.light).png
index bae2f13f73ed..7dfa2df21227 100644
Binary files a/apps/demos/testing/etalons/Charts-StandardBar (material.blue.light).png and b/apps/demos/testing/etalons/Charts-StandardBar (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-StepArea (material.blue.light).png b/apps/demos/testing/etalons/Charts-StepArea (material.blue.light).png
index 6565a5bea60f..54b7a038cb50 100644
Binary files a/apps/demos/testing/etalons/Charts-StepArea (material.blue.light).png and b/apps/demos/testing/etalons/Charts-StepArea (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-StepLine (material.blue.light).png b/apps/demos/testing/etalons/Charts-StepLine (material.blue.light).png
index 46d16fca3609..917e2a55cb42 100644
Binary files a/apps/demos/testing/etalons/Charts-StepLine (material.blue.light).png and b/apps/demos/testing/etalons/Charts-StepLine (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-Stock (material.blue.light).png b/apps/demos/testing/etalons/Charts-Stock (material.blue.light).png
index 5abf2cc00d65..94c83f45d2e8 100644
Binary files a/apps/demos/testing/etalons/Charts-Stock (material.blue.light).png and b/apps/demos/testing/etalons/Charts-Stock (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-Strips (material.blue.light).png b/apps/demos/testing/etalons/Charts-Strips (material.blue.light).png
index 02edf8947130..fa2188c4f971 100644
Binary files a/apps/demos/testing/etalons/Charts-Strips (material.blue.light).png and b/apps/demos/testing/etalons/Charts-Strips (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-TilingAlgorithms (material.blue.light).png b/apps/demos/testing/etalons/Charts-TilingAlgorithms (material.blue.light).png
index 4eba1ff722e2..cfcc1d85547e 100644
Binary files a/apps/demos/testing/etalons/Charts-TilingAlgorithms (material.blue.light).png and b/apps/demos/testing/etalons/Charts-TilingAlgorithms (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-Timeline (material.blue.light).png b/apps/demos/testing/etalons/Charts-Timeline (material.blue.light).png
index 71a24c9411ef..4fab0b143e43 100644
Binary files a/apps/demos/testing/etalons/Charts-Timeline (material.blue.light).png and b/apps/demos/testing/etalons/Charts-Timeline (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-TooltipAPI (material.blue.light).png b/apps/demos/testing/etalons/Charts-TooltipAPI (material.blue.light).png
index 062e70873819..e7d499c4a674 100644
Binary files a/apps/demos/testing/etalons/Charts-TooltipAPI (material.blue.light).png and b/apps/demos/testing/etalons/Charts-TooltipAPI (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-TooltipCustomization (material.blue.light).png b/apps/demos/testing/etalons/Charts-TooltipCustomization (material.blue.light).png
index 15c28751fc81..267aa5bdc975 100644
Binary files a/apps/demos/testing/etalons/Charts-TooltipCustomization (material.blue.light).png and b/apps/demos/testing/etalons/Charts-TooltipCustomization (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-WindRose (material.blue.light).png b/apps/demos/testing/etalons/Charts-WindRose (material.blue.light).png
index 4eb758fba773..ade83a4af95c 100644
Binary files a/apps/demos/testing/etalons/Charts-WindRose (material.blue.light).png and b/apps/demos/testing/etalons/Charts-WindRose (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-WinlossSparklines (material.blue.light).png b/apps/demos/testing/etalons/Charts-WinlossSparklines (material.blue.light).png
index 254023bb3f45..32fa80a477f1 100644
Binary files a/apps/demos/testing/etalons/Charts-WinlossSparklines (material.blue.light).png and b/apps/demos/testing/etalons/Charts-WinlossSparklines (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-ZoomingAndScrolling (material.blue.light).png b/apps/demos/testing/etalons/Charts-ZoomingAndScrolling (material.blue.light).png
index b86b7308b52b..1ff28ce89c02 100644
Binary files a/apps/demos/testing/etalons/Charts-ZoomingAndScrolling (material.blue.light).png and b/apps/demos/testing/etalons/Charts-ZoomingAndScrolling (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-ZoomingAndScrollingAPI (material.blue.light).png b/apps/demos/testing/etalons/Charts-ZoomingAndScrollingAPI (material.blue.light).png
index da731becfa90..66f068f5e167 100644
Binary files a/apps/demos/testing/etalons/Charts-ZoomingAndScrollingAPI (material.blue.light).png and b/apps/demos/testing/etalons/Charts-ZoomingAndScrollingAPI (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Chat-AIAndChatbotIntegration (material.blue.light).png b/apps/demos/testing/etalons/Chat-AIAndChatbotIntegration (material.blue.light).png
index e6a6c9a7968f..af360ea9d8ef 100644
Binary files a/apps/demos/testing/etalons/Chat-AIAndChatbotIntegration (material.blue.light).png and b/apps/demos/testing/etalons/Chat-AIAndChatbotIntegration (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Chat-Customization (material.blue.light).png b/apps/demos/testing/etalons/Chat-Customization (material.blue.light).png
index 06b22009b951..4c33536bbfa7 100644
Binary files a/apps/demos/testing/etalons/Chat-Customization (material.blue.light).png and b/apps/demos/testing/etalons/Chat-Customization (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Chat-FileAttachments (material.blue.light).png b/apps/demos/testing/etalons/Chat-FileAttachments (material.blue.light).png
index 0331a1e5c250..6e302aa20208 100644
Binary files a/apps/demos/testing/etalons/Chat-FileAttachments (material.blue.light).png and b/apps/demos/testing/etalons/Chat-FileAttachments (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Chat-MessageEditing (material.blue.light).png b/apps/demos/testing/etalons/Chat-MessageEditing (material.blue.light).png
index d374f48dadb3..b99e24d53c57 100644
Binary files a/apps/demos/testing/etalons/Chat-MessageEditing (material.blue.light).png and b/apps/demos/testing/etalons/Chat-MessageEditing (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Chat-Overview (material.blue.light).png b/apps/demos/testing/etalons/Chat-Overview (material.blue.light).png
index bdb50021972f..78bf8066c8e6 100644
Binary files a/apps/demos/testing/etalons/Chat-Overview (material.blue.light).png and b/apps/demos/testing/etalons/Chat-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/CheckBox-Overview (material.blue.light).png b/apps/demos/testing/etalons/CheckBox-Overview (material.blue.light).png
index 624c89878e22..c994bc92b7d2 100644
Binary files a/apps/demos/testing/etalons/CheckBox-Overview (material.blue.light).png and b/apps/demos/testing/etalons/CheckBox-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/ColorBox-Overview (material.blue.light).png b/apps/demos/testing/etalons/ColorBox-Overview (material.blue.light).png
index 4859546e79bb..e07addb11b30 100644
Binary files a/apps/demos/testing/etalons/ColorBox-Overview (material.blue.light).png and b/apps/demos/testing/etalons/ColorBox-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Common-CustomTextEditorButtons (material.blue.light).png b/apps/demos/testing/etalons/Common-CustomTextEditorButtons (material.blue.light).png
index 40e0c2d2230d..90902add6f76 100644
Binary files a/apps/demos/testing/etalons/Common-CustomTextEditorButtons (material.blue.light).png and b/apps/demos/testing/etalons/Common-CustomTextEditorButtons (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Common-EditorAppearanceVariants (material.blue.light).png b/apps/demos/testing/etalons/Common-EditorAppearanceVariants (material.blue.light).png
index 42bfae8765dd..2bd6224da61b 100644
Binary files a/apps/demos/testing/etalons/Common-EditorAppearanceVariants (material.blue.light).png and b/apps/demos/testing/etalons/Common-EditorAppearanceVariants (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Common-EditorsOverview (material.blue.light).png b/apps/demos/testing/etalons/Common-EditorsOverview (material.blue.light).png
index 1f62b696a3f3..ff28f0a9ee94 100644
Binary files a/apps/demos/testing/etalons/Common-EditorsOverview (material.blue.light).png and b/apps/demos/testing/etalons/Common-EditorsOverview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Common-EditorsRightToLeftSupport (material.blue.light).png b/apps/demos/testing/etalons/Common-EditorsRightToLeftSupport (material.blue.light).png
index 197f504a500a..8eef509221cb 100644
Binary files a/apps/demos/testing/etalons/Common-EditorsRightToLeftSupport (material.blue.light).png and b/apps/demos/testing/etalons/Common-EditorsRightToLeftSupport (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Common-FormsOverview (material.blue.light).png b/apps/demos/testing/etalons/Common-FormsOverview (material.blue.light).png
index d8813842d62c..c34a52f4dc59 100644
Binary files a/apps/demos/testing/etalons/Common-FormsOverview (material.blue.light).png and b/apps/demos/testing/etalons/Common-FormsOverview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Common-ListsOverview (material.blue.light).png b/apps/demos/testing/etalons/Common-ListsOverview (material.blue.light).png
index e1b0393ce675..bbadb3197310 100644
Binary files a/apps/demos/testing/etalons/Common-ListsOverview (material.blue.light).png and b/apps/demos/testing/etalons/Common-ListsOverview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Common-NavigationOverview (material.blue.light).png b/apps/demos/testing/etalons/Common-NavigationOverview (material.blue.light).png
index 84c20f0718ac..6b4ea73e2442 100644
Binary files a/apps/demos/testing/etalons/Common-NavigationOverview (material.blue.light).png and b/apps/demos/testing/etalons/Common-NavigationOverview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Common-NavigationRightToLeftSupport (material.blue.light).png b/apps/demos/testing/etalons/Common-NavigationRightToLeftSupport (material.blue.light).png
index 33def7d9c4d0..821407079c84 100644
Binary files a/apps/demos/testing/etalons/Common-NavigationRightToLeftSupport (material.blue.light).png and b/apps/demos/testing/etalons/Common-NavigationRightToLeftSupport (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Common-PopupAndNotificationsOverview (material.blue.light).png b/apps/demos/testing/etalons/Common-PopupAndNotificationsOverview (material.blue.light).png
index aefce8523271..1041f0b72726 100644
Binary files a/apps/demos/testing/etalons/Common-PopupAndNotificationsOverview (material.blue.light).png and b/apps/demos/testing/etalons/Common-PopupAndNotificationsOverview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/ContextMenu-Basics (material.blue.light).png b/apps/demos/testing/etalons/ContextMenu-Basics (material.blue.light).png
index 46b74ccca996..36b7fe85edeb 100644
Binary files a/apps/demos/testing/etalons/ContextMenu-Basics (material.blue.light).png and b/apps/demos/testing/etalons/ContextMenu-Basics (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/ContextMenu-Scrolling (material.blue.light).png b/apps/demos/testing/etalons/ContextMenu-Scrolling (material.blue.light).png
index 6e757395e932..96195f7aaa81 100644
Binary files a/apps/demos/testing/etalons/ContextMenu-Scrolling (material.blue.light).png and b/apps/demos/testing/etalons/ContextMenu-Scrolling (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/ContextMenu-Templates (material.blue.light).png b/apps/demos/testing/etalons/ContextMenu-Templates (material.blue.light).png
index 4c45191ee5c5..ffd52ce9fede 100644
Binary files a/apps/demos/testing/etalons/ContextMenu-Templates (material.blue.light).png and b/apps/demos/testing/etalons/ContextMenu-Templates (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-AIColumns (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-AIColumns (material.blue.light).png
index 7881da787f15..3080ce8f1fb7 100644
Binary files a/apps/demos/testing/etalons/DataGrid-AIColumns (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-AIColumns (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-AdvancedMasterDetailView (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-AdvancedMasterDetailView (material.blue.light).png
index e3e3b5d93aeb..c3c229d47400 100644
Binary files a/apps/demos/testing/etalons/DataGrid-AdvancedMasterDetailView (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-AdvancedMasterDetailView (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-AjaxRequest (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-AjaxRequest (material.blue.light).png
index 1c77bdc82d2f..caa4a5c6e1c4 100644
Binary files a/apps/demos/testing/etalons/DataGrid-AjaxRequest (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-AjaxRequest (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-Appearance (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-Appearance (material.blue.light).png
index cd1eaa688253..c82b337958e9 100644
Binary files a/apps/demos/testing/etalons/DataGrid-Appearance (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-Appearance (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-AutoPopulatedColumns (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-AutoPopulatedColumns (material.blue.light).png
index 50b49cd1095a..13323f57dae8 100644
Binary files a/apps/demos/testing/etalons/DataGrid-AutoPopulatedColumns (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-AutoPopulatedColumns (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-BatchEditing (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-BatchEditing (material.blue.light).png
index fb60e8d8c2ef..67c1641f886a 100644
Binary files a/apps/demos/testing/etalons/DataGrid-BatchEditing (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-BatchEditing (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-BatchUpdateRequest (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-BatchUpdateRequest (material.blue.light).png
index 83900b26ef38..d3c619550acd 100644
Binary files a/apps/demos/testing/etalons/DataGrid-BatchUpdateRequest (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-BatchUpdateRequest (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-CascadingLookups (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-CascadingLookups (material.blue.light).png
index 4df0a710e168..996ec9904846 100644
Binary files a/apps/demos/testing/etalons/DataGrid-CascadingLookups (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-CascadingLookups (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-Cell (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-Cell (material.blue.light).png
index 0a0540d704c8..392defdb8cc2 100644
Binary files a/apps/demos/testing/etalons/DataGrid-Cell (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-Cell (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-CellEditing (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-CellEditing (material.blue.light).png
index ec4255137f45..4cbe47599bdf 100644
Binary files a/apps/demos/testing/etalons/DataGrid-CellEditing (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-CellEditing (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-CollaborativeEditing (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-CollaborativeEditing (material.blue.light).png
index 5fe8d7a03f91..d586d298f04c 100644
Binary files a/apps/demos/testing/etalons/DataGrid-CollaborativeEditing (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-CollaborativeEditing (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-Column (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-Column (material.blue.light).png
index dccbb5abd8b8..865ca97a842a 100644
Binary files a/apps/demos/testing/etalons/DataGrid-Column (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-Column (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-Column3RdPartyEngineTemplate (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-Column3RdPartyEngineTemplate (material.blue.light).png
index dccbb5abd8b8..865ca97a842a 100644
Binary files a/apps/demos/testing/etalons/DataGrid-Column3RdPartyEngineTemplate (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-Column3RdPartyEngineTemplate (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-ColumnChooser (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-ColumnChooser (material.blue.light).png
index ef5798d50b93..6e93a999ebcc 100644
Binary files a/apps/demos/testing/etalons/DataGrid-ColumnChooser (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-ColumnChooser (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-ColumnHeaderFilter (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-ColumnHeaderFilter (material.blue.light).png
index 8b649c2820cc..98c3951e3c56 100644
Binary files a/apps/demos/testing/etalons/DataGrid-ColumnHeaderFilter (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-ColumnHeaderFilter (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-ColumnReordering (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-ColumnReordering (material.blue.light).png
index 552359481fd7..5ad0b23808e2 100644
Binary files a/apps/demos/testing/etalons/DataGrid-ColumnReordering (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-ColumnReordering (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-ColumnResizing (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-ColumnResizing (material.blue.light).png
index c31545c68ea1..ea452cec72b8 100644
Binary files a/apps/demos/testing/etalons/DataGrid-ColumnResizing (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-ColumnResizing (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-ColumnsHidingPriority (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-ColumnsHidingPriority (material.blue.light).png
index 358911620558..ae437fcb0f9a 100644
Binary files a/apps/demos/testing/etalons/DataGrid-ColumnsHidingPriority (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-ColumnsHidingPriority (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-CommandColumnConfiguration (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-CommandColumnConfiguration (material.blue.light).png
index 7d9736df5894..a5056c47ff2a 100644
Binary files a/apps/demos/testing/etalons/DataGrid-CommandColumnConfiguration (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-CommandColumnConfiguration (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-CustomDataSource (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-CustomDataSource (material.blue.light).png
index 12b71f5c52b0..6a6a8b4a9073 100644
Binary files a/apps/demos/testing/etalons/DataGrid-CustomDataSource (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-CustomDataSource (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-CustomEditors (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-CustomEditors (material.blue.light).png
index 64b5a71c5b62..eccb7a9e3be7 100644
Binary files a/apps/demos/testing/etalons/DataGrid-CustomEditors (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-CustomEditors (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-CustomSummaries (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-CustomSummaries (material.blue.light).png
index 0d798d1839b5..1b84ff0af190 100644
Binary files a/apps/demos/testing/etalons/DataGrid-CustomSummaries (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-CustomSummaries (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-CustomizeKeyboardNavigation (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-CustomizeKeyboardNavigation (material.blue.light).png
index 79f9031d7751..4d0f55806d01 100644
Binary files a/apps/demos/testing/etalons/DataGrid-CustomizeKeyboardNavigation (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-CustomizeKeyboardNavigation (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-DataValidation (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-DataValidation (material.blue.light).png
index 5072f1c45b97..b71512a0d16a 100644
Binary files a/apps/demos/testing/etalons/DataGrid-DataValidation (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-DataValidation (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-DeferredSelection (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-DeferredSelection (material.blue.light).png
index 542d2c433b58..0116cee4a8ab 100644
Binary files a/apps/demos/testing/etalons/DataGrid-DeferredSelection (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-DeferredSelection (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-DnDBetweenGrids (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-DnDBetweenGrids (material.blue.light).png
index 8bd272909f58..b86260b07fcd 100644
Binary files a/apps/demos/testing/etalons/DataGrid-DnDBetweenGrids (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-DnDBetweenGrids (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-EditStateManagement (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-EditStateManagement (material.blue.light).png
index bd8f548d8437..5154bfd6639d 100644
Binary files a/apps/demos/testing/etalons/DataGrid-EditStateManagement (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-EditStateManagement (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-ExcelJSCellCustomization (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-ExcelJSCellCustomization (material.blue.light).png
index 96a32bfb0472..6411ab367a6b 100644
Binary files a/apps/demos/testing/etalons/DataGrid-ExcelJSCellCustomization (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-ExcelJSCellCustomization (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-ExcelJSExportImages (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-ExcelJSExportImages (material.blue.light).png
index 5b1b76abf256..58d21fcdfecf 100644
Binary files a/apps/demos/testing/etalons/DataGrid-ExcelJSExportImages (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-ExcelJSExportImages (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-ExcelJSExportMultipleGrids (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-ExcelJSExportMultipleGrids (material.blue.light).png
index 3e1622c0dcac..9ae55a0cc9e1 100644
Binary files a/apps/demos/testing/etalons/DataGrid-ExcelJSExportMultipleGrids (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-ExcelJSExportMultipleGrids (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-ExcelJSHeaderAndFooter (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-ExcelJSHeaderAndFooter (material.blue.light).png
index ecd1cfe2603e..5332939cbb64 100644
Binary files a/apps/demos/testing/etalons/DataGrid-ExcelJSHeaderAndFooter (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-ExcelJSHeaderAndFooter (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-ExcelJSOverview (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-ExcelJSOverview (material.blue.light).png
index 472b93546a2d..d7ef13c9bb42 100644
Binary files a/apps/demos/testing/etalons/DataGrid-ExcelJSOverview (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-ExcelJSOverview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-FilterPanel (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-FilterPanel (material.blue.light).png
index ac4e6b4cca1f..222b91419b45 100644
Binary files a/apps/demos/testing/etalons/DataGrid-FilterPanel (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-FilterPanel (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-Filtering (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-Filtering (material.blue.light).png
index 9333d9ace06c..6cedaea314dc 100644
Binary files a/apps/demos/testing/etalons/DataGrid-Filtering (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-Filtering (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-FilteringAPI (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-FilteringAPI (material.blue.light).png
index ae6fede1d14f..db7f5ea8cb71 100644
Binary files a/apps/demos/testing/etalons/DataGrid-FilteringAPI (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-FilteringAPI (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-FixedAndStickyColumns (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-FixedAndStickyColumns (material.blue.light).png
index aa89219069ec..cc366ec26946 100644
Binary files a/apps/demos/testing/etalons/DataGrid-FixedAndStickyColumns (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-FixedAndStickyColumns (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-FocusedRow (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-FocusedRow (material.blue.light).png
index c87a866e8f56..24f8d9b2c207 100644
Binary files a/apps/demos/testing/etalons/DataGrid-FocusedRow (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-FocusedRow (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-FormEditing (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-FormEditing (material.blue.light).png
index 2b88e259883c..32cb18956d4b 100644
Binary files a/apps/demos/testing/etalons/DataGrid-FormEditing (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-FormEditing (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-GridAdaptabilityOverview (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-GridAdaptabilityOverview (material.blue.light).png
index 2a6396e02519..6c30f063f509 100644
Binary files a/apps/demos/testing/etalons/DataGrid-GridAdaptabilityOverview (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-GridAdaptabilityOverview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-GridSummaries (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-GridSummaries (material.blue.light).png
index 8ef3d44cea0b..57e4eb6b0d70 100644
Binary files a/apps/demos/testing/etalons/DataGrid-GridSummaries (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-GridSummaries (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-GroupSummaries (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-GroupSummaries (material.blue.light).png
index 3deae81fc2f0..19951ae97998 100644
Binary files a/apps/demos/testing/etalons/DataGrid-GroupSummaries (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-GroupSummaries (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-HorizontalVirtualScrolling (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-HorizontalVirtualScrolling (material.blue.light).png
index fae6240575c7..42d402a856a5 100644
Binary files a/apps/demos/testing/etalons/DataGrid-HorizontalVirtualScrolling (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-HorizontalVirtualScrolling (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-InfiniteScrolling (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-InfiniteScrolling (material.blue.light).png
index acd8805c6e0c..111e73952186 100644
Binary files a/apps/demos/testing/etalons/DataGrid-InfiniteScrolling (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-InfiniteScrolling (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-KeyboardNavigation (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-KeyboardNavigation (material.blue.light).png
index c2b41d65510a..3e67828d1dfe 100644
Binary files a/apps/demos/testing/etalons/DataGrid-KeyboardNavigation (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-KeyboardNavigation (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-LocalReordering (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-LocalReordering (material.blue.light).png
index 135774f3e45d..9a06a66d4ef5 100644
Binary files a/apps/demos/testing/etalons/DataGrid-LocalReordering (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-LocalReordering (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-MasterDetailAPI (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-MasterDetailAPI (material.blue.light).png
index bc5700067c2d..209d925e9cb1 100644
Binary files a/apps/demos/testing/etalons/DataGrid-MasterDetailAPI (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-MasterDetailAPI (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-MasterDetailView (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-MasterDetailView (material.blue.light).png
index 2b8cfc34d9d4..12469dbf67fd 100644
Binary files a/apps/demos/testing/etalons/DataGrid-MasterDetailView (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-MasterDetailView (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-MultiRowHeadersBands (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-MultiRowHeadersBands (material.blue.light).png
index 09ed185845cc..b87401f23de8 100644
Binary files a/apps/demos/testing/etalons/DataGrid-MultiRowHeadersBands (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-MultiRowHeadersBands (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-MultipleRecordSelectionAPI (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-MultipleRecordSelectionAPI (material.blue.light).png
index af0c0f220690..ad3dbefdeef0 100644
Binary files a/apps/demos/testing/etalons/DataGrid-MultipleRecordSelectionAPI (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-MultipleRecordSelectionAPI (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-MultipleRecordSelectionModes (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-MultipleRecordSelectionModes (material.blue.light).png
index cd3a84dcf953..584e9feca582 100644
Binary files a/apps/demos/testing/etalons/DataGrid-MultipleRecordSelectionModes (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-MultipleRecordSelectionModes (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-MultipleSorting (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-MultipleSorting (material.blue.light).png
index c0f4bff987a8..c04f9914ac9b 100644
Binary files a/apps/demos/testing/etalons/DataGrid-MultipleSorting (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-MultipleSorting (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-NewRecordPosition (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-NewRecordPosition (material.blue.light).png
index e3475d8e27cc..88ad670d3b18 100644
Binary files a/apps/demos/testing/etalons/DataGrid-NewRecordPosition (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-NewRecordPosition (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-Overview (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-Overview (material.blue.light).png
index f01ec1ba125b..e2cc246a462a 100644
Binary files a/apps/demos/testing/etalons/DataGrid-Overview (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-PDFCellCustomization (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-PDFCellCustomization (material.blue.light).png
index 4c9f2a93c202..458a4a96611a 100644
Binary files a/apps/demos/testing/etalons/DataGrid-PDFCellCustomization (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-PDFCellCustomization (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-PDFExportImages (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-PDFExportImages (material.blue.light).png
index 065dc2a11c70..c08427d46053 100644
Binary files a/apps/demos/testing/etalons/DataGrid-PDFExportImages (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-PDFExportImages (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-PDFExportMultipleGrids (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-PDFExportMultipleGrids (material.blue.light).png
index 24d4743d1540..9d240051f929 100644
Binary files a/apps/demos/testing/etalons/DataGrid-PDFExportMultipleGrids (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-PDFExportMultipleGrids (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-PDFHeaderAndFooter (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-PDFHeaderAndFooter (material.blue.light).png
index 7848d08be983..203f56c33030 100644
Binary files a/apps/demos/testing/etalons/DataGrid-PDFHeaderAndFooter (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-PDFHeaderAndFooter (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-PDFOverview (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-PDFOverview (material.blue.light).png
index ca1a49195685..b3ed606b8941 100644
Binary files a/apps/demos/testing/etalons/DataGrid-PDFOverview (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-PDFOverview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-PopupEditing (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-PopupEditing (material.blue.light).png
index 7967764ecf8a..75eb44be25e6 100644
Binary files a/apps/demos/testing/etalons/DataGrid-PopupEditing (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-PopupEditing (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-RealTimeUpdates (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-RealTimeUpdates (material.blue.light).png
index f908b9e7b1ea..fa1ae9f304d9 100644
Binary files a/apps/demos/testing/etalons/DataGrid-RealTimeUpdates (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-RealTimeUpdates (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-RecalculateWhileEditing (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-RecalculateWhileEditing (material.blue.light).png
index a3d3adb32857..049e563bebd5 100644
Binary files a/apps/demos/testing/etalons/DataGrid-RecalculateWhileEditing (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-RecalculateWhileEditing (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-RecordGrouping (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-RecordGrouping (material.blue.light).png
index dc73e250f16d..e8a47111b948 100644
Binary files a/apps/demos/testing/etalons/DataGrid-RecordGrouping (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-RecordGrouping (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-RecordPaging (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-RecordPaging (material.blue.light).png
index e69e915fbe40..21865a321d79 100644
Binary files a/apps/demos/testing/etalons/DataGrid-RecordPaging (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-RecordPaging (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-RemoteCRUDOperations (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-RemoteCRUDOperations (material.blue.light).png
index 5a4b4db536df..e47b6ac9a3a1 100644
Binary files a/apps/demos/testing/etalons/DataGrid-RemoteCRUDOperations (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-RemoteCRUDOperations (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-RemoteGrouping (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-RemoteGrouping (material.blue.light).png
index 97cc51d3e880..4ff278c112fa 100644
Binary files a/apps/demos/testing/etalons/DataGrid-RemoteGrouping (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-RemoteGrouping (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-RemoteReordering (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-RemoteReordering (material.blue.light).png
index c4c8a44f0e21..6385ed532916 100644
Binary files a/apps/demos/testing/etalons/DataGrid-RemoteReordering (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-RemoteReordering (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-RemoteVirtualScrolling (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-RemoteVirtualScrolling (material.blue.light).png
index 94e48f16f891..d885c46d2e98 100644
Binary files a/apps/demos/testing/etalons/DataGrid-RemoteVirtualScrolling (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-RemoteVirtualScrolling (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-RightToLeftSupport (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-RightToLeftSupport (material.blue.light).png
index ebede35376a6..946970dec9e0 100644
Binary files a/apps/demos/testing/etalons/DataGrid-RightToLeftSupport (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-RightToLeftSupport (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-Row (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-Row (material.blue.light).png
index 405c2f7a18e5..0fe903c4c099 100644
Binary files a/apps/demos/testing/etalons/DataGrid-Row (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-Row (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-Row3RdPartyEngineTemplate (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-Row3RdPartyEngineTemplate (material.blue.light).png
index e15454ab93ef..c7570f383366 100644
Binary files a/apps/demos/testing/etalons/DataGrid-Row3RdPartyEngineTemplate (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-Row3RdPartyEngineTemplate (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-RowEditing (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-RowEditing (material.blue.light).png
index a5d11d6e1d90..2c3cc1695672 100644
Binary files a/apps/demos/testing/etalons/DataGrid-RowEditing (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-RowEditing (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-RowSelection (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-RowSelection (material.blue.light).png
index 0a4dbfdae288..913299bc1817 100644
Binary files a/apps/demos/testing/etalons/DataGrid-RowSelection (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-RowSelection (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-SignalRService (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-SignalRService (material.blue.light).png
index ed1df5b9d7dc..3fd265858864 100644
Binary files a/apps/demos/testing/etalons/DataGrid-SignalRService (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-SignalRService (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-SimpleArray (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-SimpleArray (material.blue.light).png
index 73de12133a36..13058a7df488 100644
Binary files a/apps/demos/testing/etalons/DataGrid-SimpleArray (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-SimpleArray (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-StatePersistence (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-StatePersistence (material.blue.light).png
index 82f25abd714c..d0820afeae83 100644
Binary files a/apps/demos/testing/etalons/DataGrid-StatePersistence (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-StatePersistence (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-Toolbar (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-Toolbar (material.blue.light).png
index 48b9418b8e70..f392ba399a18 100644
Binary files a/apps/demos/testing/etalons/DataGrid-Toolbar (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-Toolbar (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-VirtualScrolling (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-VirtualScrolling (material.blue.light).png
index acd8805c6e0c..111e73952186 100644
Binary files a/apps/demos/testing/etalons/DataGrid-VirtualScrolling (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-VirtualScrolling (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-WebAPIService (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-WebAPIService (material.blue.light).png
index 4335572041d6..8c5872b722f2 100644
Binary files a/apps/demos/testing/etalons/DataGrid-WebAPIService (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-WebAPIService (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DateBox-Formatting (material.blue.light).png b/apps/demos/testing/etalons/DateBox-Formatting (material.blue.light).png
index 3d768d058eb0..1f9405071b9a 100644
Binary files a/apps/demos/testing/etalons/DateBox-Formatting (material.blue.light).png and b/apps/demos/testing/etalons/DateBox-Formatting (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DateBox-Overview (material.blue.light).png b/apps/demos/testing/etalons/DateBox-Overview (material.blue.light).png
index a1c7d054854a..ff2341548e63 100644
Binary files a/apps/demos/testing/etalons/DateBox-Overview (material.blue.light).png and b/apps/demos/testing/etalons/DateBox-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DateRangeBox-Formatting (material.blue.light).png b/apps/demos/testing/etalons/DateRangeBox-Formatting (material.blue.light).png
index 62da91a81a42..740e11b8a606 100644
Binary files a/apps/demos/testing/etalons/DateRangeBox-Formatting (material.blue.light).png and b/apps/demos/testing/etalons/DateRangeBox-Formatting (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DateRangeBox-Overview (material.blue.light).png b/apps/demos/testing/etalons/DateRangeBox-Overview (material.blue.light).png
index 9cef683172ef..271d52d6861a 100644
Binary files a/apps/demos/testing/etalons/DateRangeBox-Overview (material.blue.light).png and b/apps/demos/testing/etalons/DateRangeBox-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Diagram-Adaptability (material.blue.light).png b/apps/demos/testing/etalons/Diagram-Adaptability (material.blue.light).png
index 7d9faec86799..0692e7d1d597 100644
Binary files a/apps/demos/testing/etalons/Diagram-Adaptability (material.blue.light).png and b/apps/demos/testing/etalons/Diagram-Adaptability (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Diagram-AdvancedDataBinding (material.blue.light).png b/apps/demos/testing/etalons/Diagram-AdvancedDataBinding (material.blue.light).png
index 96da94fa37e9..2d16cbcd27dc 100644
Binary files a/apps/demos/testing/etalons/Diagram-AdvancedDataBinding (material.blue.light).png and b/apps/demos/testing/etalons/Diagram-AdvancedDataBinding (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Diagram-Containers (material.blue.light).png b/apps/demos/testing/etalons/Diagram-Containers (material.blue.light).png
index 3df72f9eda36..a85e5cf44518 100644
Binary files a/apps/demos/testing/etalons/Diagram-Containers (material.blue.light).png and b/apps/demos/testing/etalons/Diagram-Containers (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Diagram-CustomShapesWithIcons (material.blue.light).png b/apps/demos/testing/etalons/Diagram-CustomShapesWithIcons (material.blue.light).png
index 5906d086e035..d9686bbbf417 100644
Binary files a/apps/demos/testing/etalons/Diagram-CustomShapesWithIcons (material.blue.light).png and b/apps/demos/testing/etalons/Diagram-CustomShapesWithIcons (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Diagram-CustomShapesWithTemplates (material.blue.light).png b/apps/demos/testing/etalons/Diagram-CustomShapesWithTemplates (material.blue.light).png
index 53e634564ab4..a58602565c83 100644
Binary files a/apps/demos/testing/etalons/Diagram-CustomShapesWithTemplates (material.blue.light).png and b/apps/demos/testing/etalons/Diagram-CustomShapesWithTemplates (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Diagram-CustomShapesWithTemplatesWithEditing (material.blue.light).png b/apps/demos/testing/etalons/Diagram-CustomShapesWithTemplatesWithEditing (material.blue.light).png
index 47b55ffaa42d..14c223f88eca 100644
Binary files a/apps/demos/testing/etalons/Diagram-CustomShapesWithTemplatesWithEditing (material.blue.light).png and b/apps/demos/testing/etalons/Diagram-CustomShapesWithTemplatesWithEditing (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Diagram-CustomShapesWithTexts (material.blue.light).png b/apps/demos/testing/etalons/Diagram-CustomShapesWithTexts (material.blue.light).png
index 461623af7dbf..792370a812b2 100644
Binary files a/apps/demos/testing/etalons/Diagram-CustomShapesWithTexts (material.blue.light).png and b/apps/demos/testing/etalons/Diagram-CustomShapesWithTexts (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Diagram-ImagesInShapes (material.blue.light).png b/apps/demos/testing/etalons/Diagram-ImagesInShapes (material.blue.light).png
index b8b517491b65..4bc8c6c6cbde 100644
Binary files a/apps/demos/testing/etalons/Diagram-ImagesInShapes (material.blue.light).png and b/apps/demos/testing/etalons/Diagram-ImagesInShapes (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Diagram-ItemSelection (material.blue.light).png b/apps/demos/testing/etalons/Diagram-ItemSelection (material.blue.light).png
index d8349ac2e413..0a9869eb2273 100644
Binary files a/apps/demos/testing/etalons/Diagram-ItemSelection (material.blue.light).png and b/apps/demos/testing/etalons/Diagram-ItemSelection (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Diagram-NodesAndEdgesArrays (material.blue.light).png b/apps/demos/testing/etalons/Diagram-NodesAndEdgesArrays (material.blue.light).png
index f2efa264c485..d62583b2701b 100644
Binary files a/apps/demos/testing/etalons/Diagram-NodesAndEdgesArrays (material.blue.light).png and b/apps/demos/testing/etalons/Diagram-NodesAndEdgesArrays (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Diagram-NodesArrayHierarchicalStructure (material.blue.light).png b/apps/demos/testing/etalons/Diagram-NodesArrayHierarchicalStructure (material.blue.light).png
index a6d5f5927264..7e9f076eea22 100644
Binary files a/apps/demos/testing/etalons/Diagram-NodesArrayHierarchicalStructure (material.blue.light).png and b/apps/demos/testing/etalons/Diagram-NodesArrayHierarchicalStructure (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Diagram-NodesArrayPlainStructure (material.blue.light).png b/apps/demos/testing/etalons/Diagram-NodesArrayPlainStructure (material.blue.light).png
index 13547af0b58e..7e9f076eea22 100644
Binary files a/apps/demos/testing/etalons/Diagram-NodesArrayPlainStructure (material.blue.light).png and b/apps/demos/testing/etalons/Diagram-NodesArrayPlainStructure (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Diagram-OperationRestrictions (material.blue.light).png b/apps/demos/testing/etalons/Diagram-OperationRestrictions (material.blue.light).png
index 41b5ed24ad1b..fa63a0fcfecb 100644
Binary files a/apps/demos/testing/etalons/Diagram-OperationRestrictions (material.blue.light).png and b/apps/demos/testing/etalons/Diagram-OperationRestrictions (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Diagram-Overview (material.blue.light).png b/apps/demos/testing/etalons/Diagram-Overview (material.blue.light).png
index d6089bca556a..a64b3dccaa11 100644
Binary files a/apps/demos/testing/etalons/Diagram-Overview (material.blue.light).png and b/apps/demos/testing/etalons/Diagram-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Diagram-ReadOnly (material.blue.light).png b/apps/demos/testing/etalons/Diagram-ReadOnly (material.blue.light).png
index 6bead4076a22..07e015a157a9 100644
Binary files a/apps/demos/testing/etalons/Diagram-ReadOnly (material.blue.light).png and b/apps/demos/testing/etalons/Diagram-ReadOnly (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Diagram-SimpleView (material.blue.light).png b/apps/demos/testing/etalons/Diagram-SimpleView (material.blue.light).png
index a9016a2765ac..e3468189c100 100644
Binary files a/apps/demos/testing/etalons/Diagram-SimpleView (material.blue.light).png and b/apps/demos/testing/etalons/Diagram-SimpleView (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Diagram-UICustomization (material.blue.light).png b/apps/demos/testing/etalons/Diagram-UICustomization (material.blue.light).png
index a4ea3f07b32c..2ea4e65c87a6 100644
Binary files a/apps/demos/testing/etalons/Diagram-UICustomization (material.blue.light).png and b/apps/demos/testing/etalons/Diagram-UICustomization (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Diagram-WebAPIService (material.blue.light).png b/apps/demos/testing/etalons/Diagram-WebAPIService (material.blue.light).png
index e12689a5bda3..d386f4b3b35d 100644
Binary files a/apps/demos/testing/etalons/Diagram-WebAPIService (material.blue.light).png and b/apps/demos/testing/etalons/Diagram-WebAPIService (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Drawer-LeftOrRightPosition (material.blue.light).png b/apps/demos/testing/etalons/Drawer-LeftOrRightPosition (material.blue.light).png
index 3d6b84a450f3..7370731ec338 100644
Binary files a/apps/demos/testing/etalons/Drawer-LeftOrRightPosition (material.blue.light).png and b/apps/demos/testing/etalons/Drawer-LeftOrRightPosition (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Drawer-TopOrBottomPosition (material.blue.light).png b/apps/demos/testing/etalons/Drawer-TopOrBottomPosition (material.blue.light).png
index 4102873c4e50..076ba8825e8f 100644
Binary files a/apps/demos/testing/etalons/Drawer-TopOrBottomPosition (material.blue.light).png and b/apps/demos/testing/etalons/Drawer-TopOrBottomPosition (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DropDownBox-MultipleSelection (material.blue.light).png b/apps/demos/testing/etalons/DropDownBox-MultipleSelection (material.blue.light).png
index 8042b11360bd..6ae21b778bbd 100644
Binary files a/apps/demos/testing/etalons/DropDownBox-MultipleSelection (material.blue.light).png and b/apps/demos/testing/etalons/DropDownBox-MultipleSelection (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DropDownBox-SingleSelection (material.blue.light).png b/apps/demos/testing/etalons/DropDownBox-SingleSelection (material.blue.light).png
index 5849aba41206..184d85452fd6 100644
Binary files a/apps/demos/testing/etalons/DropDownBox-SingleSelection (material.blue.light).png and b/apps/demos/testing/etalons/DropDownBox-SingleSelection (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DropDownButton-Overview (material.blue.light).png b/apps/demos/testing/etalons/DropDownButton-Overview (material.blue.light).png
index c0ae191c464a..c9e17b6d57fc 100644
Binary files a/apps/demos/testing/etalons/DropDownButton-Overview (material.blue.light).png and b/apps/demos/testing/etalons/DropDownButton-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/FieldSet-Overview (material.blue.light).png b/apps/demos/testing/etalons/FieldSet-Overview (material.blue.light).png
index f229ae8ba78d..14e04f09258a 100644
Binary files a/apps/demos/testing/etalons/FieldSet-Overview (material.blue.light).png and b/apps/demos/testing/etalons/FieldSet-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/FileManager-BindingToEF (material.blue.light).png b/apps/demos/testing/etalons/FileManager-BindingToEF (material.blue.light).png
index 9d86557df812..ecfe550f7a20 100644
Binary files a/apps/demos/testing/etalons/FileManager-BindingToEF (material.blue.light).png and b/apps/demos/testing/etalons/FileManager-BindingToEF (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/FileManager-BindingToFileSystem (material.blue.light).png b/apps/demos/testing/etalons/FileManager-BindingToFileSystem (material.blue.light).png
index 0f3c9e503fb1..78f2c39b5f34 100644
Binary files a/apps/demos/testing/etalons/FileManager-BindingToFileSystem (material.blue.light).png and b/apps/demos/testing/etalons/FileManager-BindingToFileSystem (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/FileManager-BindingToHierarchicalStructure (material.blue.light).png b/apps/demos/testing/etalons/FileManager-BindingToHierarchicalStructure (material.blue.light).png
index aa9e0536a9d5..9809f6c69b14 100644
Binary files a/apps/demos/testing/etalons/FileManager-BindingToHierarchicalStructure (material.blue.light).png and b/apps/demos/testing/etalons/FileManager-BindingToHierarchicalStructure (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/FileManager-CustomThumbnails (material.blue.light).png b/apps/demos/testing/etalons/FileManager-CustomThumbnails (material.blue.light).png
index 7b72ea4643f7..80e24bcd210c 100644
Binary files a/apps/demos/testing/etalons/FileManager-CustomThumbnails (material.blue.light).png and b/apps/demos/testing/etalons/FileManager-CustomThumbnails (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/FileManager-Overview (material.blue.light).png b/apps/demos/testing/etalons/FileManager-Overview (material.blue.light).png
index 291b5f7d1f96..2709f2e44415 100644
Binary files a/apps/demos/testing/etalons/FileManager-Overview (material.blue.light).png and b/apps/demos/testing/etalons/FileManager-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/FileManager-UICustomization (material.blue.light).png b/apps/demos/testing/etalons/FileManager-UICustomization (material.blue.light).png
index 4142f7cb16b1..63f7133d2dd2 100644
Binary files a/apps/demos/testing/etalons/FileManager-UICustomization (material.blue.light).png and b/apps/demos/testing/etalons/FileManager-UICustomization (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/FileUploader-ChunkUpload (material.blue.light).png b/apps/demos/testing/etalons/FileUploader-ChunkUpload (material.blue.light).png
index 173cf16952f2..c29a4965dafc 100644
Binary files a/apps/demos/testing/etalons/FileUploader-ChunkUpload (material.blue.light).png and b/apps/demos/testing/etalons/FileUploader-ChunkUpload (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/FileUploader-CustomDropzone (fluent.blue.light).png b/apps/demos/testing/etalons/FileUploader-CustomDropzone (fluent.blue.light).png
index 9c5e0b425d02..16738edebf41 100644
Binary files a/apps/demos/testing/etalons/FileUploader-CustomDropzone (fluent.blue.light).png and b/apps/demos/testing/etalons/FileUploader-CustomDropzone (fluent.blue.light).png differ
diff --git a/apps/demos/testing/etalons/FileUploader-CustomDropzone (material.blue.light).png b/apps/demos/testing/etalons/FileUploader-CustomDropzone (material.blue.light).png
index 1e7828f79a48..4cd682a03b3f 100644
Binary files a/apps/demos/testing/etalons/FileUploader-CustomDropzone (material.blue.light).png and b/apps/demos/testing/etalons/FileUploader-CustomDropzone (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/FileUploader-FileSelection (material.blue.light).png b/apps/demos/testing/etalons/FileUploader-FileSelection (material.blue.light).png
index e4b54e9fe328..ec0486645b54 100644
Binary files a/apps/demos/testing/etalons/FileUploader-FileSelection (material.blue.light).png and b/apps/demos/testing/etalons/FileUploader-FileSelection (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/FileUploader-FileUploading (material.blue.light).png b/apps/demos/testing/etalons/FileUploader-FileUploading (material.blue.light).png
index 948fc1c7699c..ae7e4bbdac28 100644
Binary files a/apps/demos/testing/etalons/FileUploader-FileUploading (material.blue.light).png and b/apps/demos/testing/etalons/FileUploader-FileUploading (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/FileUploader-Validation (material.blue.light).png b/apps/demos/testing/etalons/FileUploader-Validation (material.blue.light).png
index b236a2d19783..250df0e6dfcc 100644
Binary files a/apps/demos/testing/etalons/FileUploader-Validation (material.blue.light).png and b/apps/demos/testing/etalons/FileUploader-Validation (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/FilterBuilder-Customization (material.blue.light).png b/apps/demos/testing/etalons/FilterBuilder-Customization (material.blue.light).png
index 37a4d5a13f4c..571a21c672bf 100644
Binary files a/apps/demos/testing/etalons/FilterBuilder-Customization (material.blue.light).png and b/apps/demos/testing/etalons/FilterBuilder-Customization (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/FilterBuilder-WithDataGrid (material.blue.light).png b/apps/demos/testing/etalons/FilterBuilder-WithDataGrid (material.blue.light).png
index c451767c78ba..80451fadf7e9 100644
Binary files a/apps/demos/testing/etalons/FilterBuilder-WithDataGrid (material.blue.light).png and b/apps/demos/testing/etalons/FilterBuilder-WithDataGrid (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/FilterBuilder-WithList (material.blue.light).png b/apps/demos/testing/etalons/FilterBuilder-WithList (material.blue.light).png
index ccb2042d47d8..a59689677cd7 100644
Binary files a/apps/demos/testing/etalons/FilterBuilder-WithList (material.blue.light).png and b/apps/demos/testing/etalons/FilterBuilder-WithList (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/FloatingActionButton-Overview (material.blue.light).png b/apps/demos/testing/etalons/FloatingActionButton-Overview (material.blue.light).png
index dc03d231aec9..c3dfa1b51821 100644
Binary files a/apps/demos/testing/etalons/FloatingActionButton-Overview (material.blue.light).png and b/apps/demos/testing/etalons/FloatingActionButton-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Form-Adaptability (material.blue.light).png b/apps/demos/testing/etalons/Form-Adaptability (material.blue.light).png
index abe13d8e0f7b..19eb703b9886 100644
Binary files a/apps/demos/testing/etalons/Form-Adaptability (material.blue.light).png and b/apps/demos/testing/etalons/Form-Adaptability (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Form-Grouping (material.blue.light).png b/apps/demos/testing/etalons/Form-Grouping (material.blue.light).png
index e85d031c6f3e..598a8ecab384 100644
Binary files a/apps/demos/testing/etalons/Form-Grouping (material.blue.light).png and b/apps/demos/testing/etalons/Form-Grouping (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Form-ItemCustomization (material.blue.light).png b/apps/demos/testing/etalons/Form-ItemCustomization (material.blue.light).png
index 3438e12473c2..74b7fadc7756 100644
Binary files a/apps/demos/testing/etalons/Form-ItemCustomization (material.blue.light).png and b/apps/demos/testing/etalons/Form-ItemCustomization (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Form-Overview (material.blue.light).png b/apps/demos/testing/etalons/Form-Overview (material.blue.light).png
index f444cb24475e..3c5b95d9fb80 100644
Binary files a/apps/demos/testing/etalons/Form-Overview (material.blue.light).png and b/apps/demos/testing/etalons/Form-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Form-SmartPaste (material.blue.light).png b/apps/demos/testing/etalons/Form-SmartPaste (material.blue.light).png
index 829eca49fdd0..97835aa9f247 100644
Binary files a/apps/demos/testing/etalons/Form-SmartPaste (material.blue.light).png and b/apps/demos/testing/etalons/Form-SmartPaste (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Form-UpdateItemsDynamically (material.blue.light).png b/apps/demos/testing/etalons/Form-UpdateItemsDynamically (material.blue.light).png
index b69781dfee52..f9d8c07bfe98 100644
Binary files a/apps/demos/testing/etalons/Form-UpdateItemsDynamically (material.blue.light).png and b/apps/demos/testing/etalons/Form-UpdateItemsDynamically (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Form-Validation (material.blue.light).png b/apps/demos/testing/etalons/Form-Validation (material.blue.light).png
index 05bafb47ee4f..516922d60ae1 100644
Binary files a/apps/demos/testing/etalons/Form-Validation (material.blue.light).png and b/apps/demos/testing/etalons/Form-Validation (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gallery-Item3RdPartyEngineTemplate (material.blue.light).png b/apps/demos/testing/etalons/Gallery-Item3RdPartyEngineTemplate (material.blue.light).png
index c20c295df778..6e387e616261 100644
Binary files a/apps/demos/testing/etalons/Gallery-Item3RdPartyEngineTemplate (material.blue.light).png and b/apps/demos/testing/etalons/Gallery-Item3RdPartyEngineTemplate (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gallery-ItemTemplate (material.blue.light).png b/apps/demos/testing/etalons/Gallery-ItemTemplate (material.blue.light).png
index 5d89df4c12ac..878f7eb60d6e 100644
Binary files a/apps/demos/testing/etalons/Gallery-ItemTemplate (material.blue.light).png and b/apps/demos/testing/etalons/Gallery-ItemTemplate (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gallery-Overview (material.blue.light).png b/apps/demos/testing/etalons/Gallery-Overview (material.blue.light).png
index a1880abc01fb..c0e3491a0fbb 100644
Binary files a/apps/demos/testing/etalons/Gallery-Overview (material.blue.light).png and b/apps/demos/testing/etalons/Gallery-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gantt-Appearance (material.blue.light).png b/apps/demos/testing/etalons/Gantt-Appearance (material.blue.light).png
index 5879b526f814..02d0b58c2467 100644
Binary files a/apps/demos/testing/etalons/Gantt-Appearance (material.blue.light).png and b/apps/demos/testing/etalons/Gantt-Appearance (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gantt-ContextMenu (material.blue.light).png b/apps/demos/testing/etalons/Gantt-ContextMenu (material.blue.light).png
index fbad2e14e6dc..57bb288eb6ab 100644
Binary files a/apps/demos/testing/etalons/Gantt-ContextMenu (material.blue.light).png and b/apps/demos/testing/etalons/Gantt-ContextMenu (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gantt-DataBinding (material.blue.light).png b/apps/demos/testing/etalons/Gantt-DataBinding (material.blue.light).png
index b22337dbe535..fb174b2144a8 100644
Binary files a/apps/demos/testing/etalons/Gantt-DataBinding (material.blue.light).png and b/apps/demos/testing/etalons/Gantt-DataBinding (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gantt-ExportToPDF (material.blue.light).png b/apps/demos/testing/etalons/Gantt-ExportToPDF (material.blue.light).png
index 72324ee90076..32275b16398b 100644
Binary files a/apps/demos/testing/etalons/Gantt-ExportToPDF (material.blue.light).png and b/apps/demos/testing/etalons/Gantt-ExportToPDF (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gantt-FilterRow (material.blue.light).png b/apps/demos/testing/etalons/Gantt-FilterRow (material.blue.light).png
index 644a3463ae08..e415c7af2630 100644
Binary files a/apps/demos/testing/etalons/Gantt-FilterRow (material.blue.light).png and b/apps/demos/testing/etalons/Gantt-FilterRow (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gantt-HeaderFilter (material.blue.light).png b/apps/demos/testing/etalons/Gantt-HeaderFilter (material.blue.light).png
index ce5bec8dab8d..bfa936174d93 100644
Binary files a/apps/demos/testing/etalons/Gantt-HeaderFilter (material.blue.light).png and b/apps/demos/testing/etalons/Gantt-HeaderFilter (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gantt-Overview (fluent.blue.light).png b/apps/demos/testing/etalons/Gantt-Overview (fluent.blue.light).png
index 21377c426c44..147c30144752 100644
Binary files a/apps/demos/testing/etalons/Gantt-Overview (fluent.blue.light).png and b/apps/demos/testing/etalons/Gantt-Overview (fluent.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gantt-Overview (material.blue.light).png b/apps/demos/testing/etalons/Gantt-Overview (material.blue.light).png
index eef417270181..3da633fdbaf0 100644
Binary files a/apps/demos/testing/etalons/Gantt-Overview (material.blue.light).png and b/apps/demos/testing/etalons/Gantt-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gantt-Sorting (material.blue.light).png b/apps/demos/testing/etalons/Gantt-Sorting (material.blue.light).png
index 81cbfe584c15..7981aea850d7 100644
Binary files a/apps/demos/testing/etalons/Gantt-Sorting (material.blue.light).png and b/apps/demos/testing/etalons/Gantt-Sorting (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gantt-StripLines (fluent.blue.light).png b/apps/demos/testing/etalons/Gantt-StripLines (fluent.blue.light).png
index 08b3b3b520a2..5255063fc3e5 100644
Binary files a/apps/demos/testing/etalons/Gantt-StripLines (fluent.blue.light).png and b/apps/demos/testing/etalons/Gantt-StripLines (fluent.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gantt-StripLines (material.blue.light).png b/apps/demos/testing/etalons/Gantt-StripLines (material.blue.light).png
index e441abeabf74..05618636e806 100644
Binary files a/apps/demos/testing/etalons/Gantt-StripLines (material.blue.light).png and b/apps/demos/testing/etalons/Gantt-StripLines (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gantt-TaskTemplate (material.blue.light).png b/apps/demos/testing/etalons/Gantt-TaskTemplate (material.blue.light).png
index 0c316013aff8..3fe997e8c650 100644
Binary files a/apps/demos/testing/etalons/Gantt-TaskTemplate (material.blue.light).png and b/apps/demos/testing/etalons/Gantt-TaskTemplate (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gantt-Toolbar (material.blue.light).png b/apps/demos/testing/etalons/Gantt-Toolbar (material.blue.light).png
index a12947adbd93..766e35345e86 100644
Binary files a/apps/demos/testing/etalons/Gantt-Toolbar (material.blue.light).png and b/apps/demos/testing/etalons/Gantt-Toolbar (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gantt-Validation (fluent.blue.light).png b/apps/demos/testing/etalons/Gantt-Validation (fluent.blue.light).png
index eb23de8dec3d..aeeda4948a86 100644
Binary files a/apps/demos/testing/etalons/Gantt-Validation (fluent.blue.light).png and b/apps/demos/testing/etalons/Gantt-Validation (fluent.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gantt-Validation (material.blue.light).png b/apps/demos/testing/etalons/Gantt-Validation (material.blue.light).png
index 7a2ea6986403..e1351fe692a7 100644
Binary files a/apps/demos/testing/etalons/Gantt-Validation (material.blue.light).png and b/apps/demos/testing/etalons/Gantt-Validation (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-AnglesCustomization (material.blue.light).png b/apps/demos/testing/etalons/Gauges-AnglesCustomization (material.blue.light).png
index 4d4c85579991..585c6ecdab40 100644
Binary files a/apps/demos/testing/etalons/Gauges-AnglesCustomization (material.blue.light).png and b/apps/demos/testing/etalons/Gauges-AnglesCustomization (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-BarGauge (material.blue.light).png b/apps/demos/testing/etalons/Gauges-BarGauge (material.blue.light).png
index abf00ceaa3c5..123a8d9bc3c0 100644
Binary files a/apps/demos/testing/etalons/Gauges-BarGauge (material.blue.light).png and b/apps/demos/testing/etalons/Gauges-BarGauge (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-CircularGauge (material.blue.light).png b/apps/demos/testing/etalons/Gauges-CircularGauge (material.blue.light).png
index c18901e5ea95..d7cd58777f65 100644
Binary files a/apps/demos/testing/etalons/Gauges-CircularGauge (material.blue.light).png and b/apps/demos/testing/etalons/Gauges-CircularGauge (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-CustomLayout (material.blue.light).png b/apps/demos/testing/etalons/Gauges-CustomLayout (material.blue.light).png
index a2125d517f98..3f4f022bfb11 100644
Binary files a/apps/demos/testing/etalons/Gauges-CustomLayout (material.blue.light).png and b/apps/demos/testing/etalons/Gauges-CustomLayout (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-CustomLayoutLinearGauge (material.blue.light).png b/apps/demos/testing/etalons/Gauges-CustomLayoutLinearGauge (material.blue.light).png
index d8a1f1744003..9d7b2ae6ce17 100644
Binary files a/apps/demos/testing/etalons/Gauges-CustomLayoutLinearGauge (material.blue.light).png and b/apps/demos/testing/etalons/Gauges-CustomLayoutLinearGauge (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-DifferentSubvalueIndicatorTypes (material.blue.light).png b/apps/demos/testing/etalons/Gauges-DifferentSubvalueIndicatorTypes (material.blue.light).png
index 9a3257566dcc..0fa7f6adccb0 100644
Binary files a/apps/demos/testing/etalons/Gauges-DifferentSubvalueIndicatorTypes (material.blue.light).png and b/apps/demos/testing/etalons/Gauges-DifferentSubvalueIndicatorTypes (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-DifferentSubvalueIndicatorTypesLinearGauge (material.blue.light).png b/apps/demos/testing/etalons/Gauges-DifferentSubvalueIndicatorTypesLinearGauge (material.blue.light).png
index 49f04a241c64..ad04bdf7ac11 100644
Binary files a/apps/demos/testing/etalons/Gauges-DifferentSubvalueIndicatorTypesLinearGauge (material.blue.light).png and b/apps/demos/testing/etalons/Gauges-DifferentSubvalueIndicatorTypesLinearGauge (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-DifferentValueIndicatorTypes (material.blue.light).png b/apps/demos/testing/etalons/Gauges-DifferentValueIndicatorTypes (material.blue.light).png
index 4973a83803d5..c69c171af23d 100644
Binary files a/apps/demos/testing/etalons/Gauges-DifferentValueIndicatorTypes (material.blue.light).png and b/apps/demos/testing/etalons/Gauges-DifferentValueIndicatorTypes (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-DifferentValueIndicatorTypesLinearGauge (material.blue.light).png b/apps/demos/testing/etalons/Gauges-DifferentValueIndicatorTypesLinearGauge (material.blue.light).png
index 36b5fb3286d6..553cebcbd00c 100644
Binary files a/apps/demos/testing/etalons/Gauges-DifferentValueIndicatorTypesLinearGauge (material.blue.light).png and b/apps/demos/testing/etalons/Gauges-DifferentValueIndicatorTypesLinearGauge (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-GaugeTitleCustomized (material.blue.light).png b/apps/demos/testing/etalons/Gauges-GaugeTitleCustomized (material.blue.light).png
index 5c365a0707ea..f49e3dea5eda 100644
Binary files a/apps/demos/testing/etalons/Gauges-GaugeTitleCustomized (material.blue.light).png and b/apps/demos/testing/etalons/Gauges-GaugeTitleCustomized (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-GaugeTooltip (material.blue.light).png b/apps/demos/testing/etalons/Gauges-GaugeTooltip (material.blue.light).png
index 2f8fbb00f111..5c027978fe9e 100644
Binary files a/apps/demos/testing/etalons/Gauges-GaugeTooltip (material.blue.light).png and b/apps/demos/testing/etalons/Gauges-GaugeTooltip (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-LabelsCustomization (material.blue.light).png b/apps/demos/testing/etalons/Gauges-LabelsCustomization (material.blue.light).png
index be9930c5983f..82605ee6fc33 100644
Binary files a/apps/demos/testing/etalons/Gauges-LabelsCustomization (material.blue.light).png and b/apps/demos/testing/etalons/Gauges-LabelsCustomization (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-LinearGauge (material.blue.light).png b/apps/demos/testing/etalons/Gauges-LinearGauge (material.blue.light).png
index 93368478e2dc..e311f8103533 100644
Binary files a/apps/demos/testing/etalons/Gauges-LinearGauge (material.blue.light).png and b/apps/demos/testing/etalons/Gauges-LinearGauge (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-Overview (material.blue.light).png b/apps/demos/testing/etalons/Gauges-Overview (material.blue.light).png
index c332b54ef352..904a2bf95bd0 100644
Binary files a/apps/demos/testing/etalons/Gauges-Overview (material.blue.light).png and b/apps/demos/testing/etalons/Gauges-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-Palette (material.blue.light).png b/apps/demos/testing/etalons/Gauges-Palette (material.blue.light).png
index 015eebe63074..6432bfd03ba3 100644
Binary files a/apps/demos/testing/etalons/Gauges-Palette (material.blue.light).png and b/apps/demos/testing/etalons/Gauges-Palette (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-PaletteForRanges (material.blue.light).png b/apps/demos/testing/etalons/Gauges-PaletteForRanges (material.blue.light).png
index 2a11396aff99..5ec472632760 100644
Binary files a/apps/demos/testing/etalons/Gauges-PaletteForRanges (material.blue.light).png and b/apps/demos/testing/etalons/Gauges-PaletteForRanges (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-RangeBarBaseValue (material.blue.light).png b/apps/demos/testing/etalons/Gauges-RangeBarBaseValue (material.blue.light).png
index bfbff635c59b..c7ccd563a213 100644
Binary files a/apps/demos/testing/etalons/Gauges-RangeBarBaseValue (material.blue.light).png and b/apps/demos/testing/etalons/Gauges-RangeBarBaseValue (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-ScaleCustomTickInterval (material.blue.light).png b/apps/demos/testing/etalons/Gauges-ScaleCustomTickInterval (material.blue.light).png
index 342d14922765..f06b8f25ffe3 100644
Binary files a/apps/demos/testing/etalons/Gauges-ScaleCustomTickInterval (material.blue.light).png and b/apps/demos/testing/etalons/Gauges-ScaleCustomTickInterval (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-ScaleCustomTickValues (material.blue.light).png b/apps/demos/testing/etalons/Gauges-ScaleCustomTickValues (material.blue.light).png
index 06010ce7326e..0619ff695bf0 100644
Binary files a/apps/demos/testing/etalons/Gauges-ScaleCustomTickValues (material.blue.light).png and b/apps/demos/testing/etalons/Gauges-ScaleCustomTickValues (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-ScaleLabelFormatting (material.blue.light).png b/apps/demos/testing/etalons/Gauges-ScaleLabelFormatting (material.blue.light).png
index 62a3afc23017..ec7044424bd7 100644
Binary files a/apps/demos/testing/etalons/Gauges-ScaleLabelFormatting (material.blue.light).png and b/apps/demos/testing/etalons/Gauges-ScaleLabelFormatting (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-ScaleMinorTicks (material.blue.light).png b/apps/demos/testing/etalons/Gauges-ScaleMinorTicks (material.blue.light).png
index c4f7a3e47c70..274bf77bb910 100644
Binary files a/apps/demos/testing/etalons/Gauges-ScaleMinorTicks (material.blue.light).png and b/apps/demos/testing/etalons/Gauges-ScaleMinorTicks (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-SubvalueIndicatorTextFormatting (material.blue.light).png b/apps/demos/testing/etalons/Gauges-SubvalueIndicatorTextFormatting (material.blue.light).png
index 41ab2f386e7d..903c283cd2dd 100644
Binary files a/apps/demos/testing/etalons/Gauges-SubvalueIndicatorTextFormatting (material.blue.light).png and b/apps/demos/testing/etalons/Gauges-SubvalueIndicatorTextFormatting (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-SubvalueIndicatorsRuntimeCustomization (material.blue.light).png b/apps/demos/testing/etalons/Gauges-SubvalueIndicatorsRuntimeCustomization (material.blue.light).png
index 518ee1f83cde..9fb6e74090e9 100644
Binary files a/apps/demos/testing/etalons/Gauges-SubvalueIndicatorsRuntimeCustomization (material.blue.light).png and b/apps/demos/testing/etalons/Gauges-SubvalueIndicatorsRuntimeCustomization (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-Tooltip (material.blue.light).png b/apps/demos/testing/etalons/Gauges-Tooltip (material.blue.light).png
index 4ae764134ff8..48449d68e377 100644
Binary files a/apps/demos/testing/etalons/Gauges-Tooltip (material.blue.light).png and b/apps/demos/testing/etalons/Gauges-Tooltip (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-ValueIndicatorsAPI (material.blue.light).png b/apps/demos/testing/etalons/Gauges-ValueIndicatorsAPI (material.blue.light).png
index 22f4adf28449..3bda784f8102 100644
Binary files a/apps/demos/testing/etalons/Gauges-ValueIndicatorsAPI (material.blue.light).png and b/apps/demos/testing/etalons/Gauges-ValueIndicatorsAPI (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-VariableNumberOfBars (material.blue.light).png b/apps/demos/testing/etalons/Gauges-VariableNumberOfBars (material.blue.light).png
index f2331077a9e7..a9e0dd7188fc 100644
Binary files a/apps/demos/testing/etalons/Gauges-VariableNumberOfBars (material.blue.light).png and b/apps/demos/testing/etalons/Gauges-VariableNumberOfBars (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/HtmlEditor-AITextEditing (material.blue.light).png b/apps/demos/testing/etalons/HtmlEditor-AITextEditing (material.blue.light).png
index 424d0168eccb..d63fec3d03a6 100644
Binary files a/apps/demos/testing/etalons/HtmlEditor-AITextEditing (material.blue.light).png and b/apps/demos/testing/etalons/HtmlEditor-AITextEditing (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/HtmlEditor-MarkdownSupport (material.blue.light).png b/apps/demos/testing/etalons/HtmlEditor-MarkdownSupport (material.blue.light).png
index 3aee7f3be2b9..9d8cd546a571 100644
Binary files a/apps/demos/testing/etalons/HtmlEditor-MarkdownSupport (material.blue.light).png and b/apps/demos/testing/etalons/HtmlEditor-MarkdownSupport (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/HtmlEditor-Mentions (material.blue.light).png b/apps/demos/testing/etalons/HtmlEditor-Mentions (material.blue.light).png
index 2f4d83b5d4bb..bf99018ad1a0 100644
Binary files a/apps/demos/testing/etalons/HtmlEditor-Mentions (material.blue.light).png and b/apps/demos/testing/etalons/HtmlEditor-Mentions (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/HtmlEditor-Overview (material.blue.light).png b/apps/demos/testing/etalons/HtmlEditor-Overview (material.blue.light).png
index 74ca4bfcc290..12d39875cc6f 100644
Binary files a/apps/demos/testing/etalons/HtmlEditor-Overview (material.blue.light).png and b/apps/demos/testing/etalons/HtmlEditor-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/HtmlEditor-Tables (material.blue.light).png b/apps/demos/testing/etalons/HtmlEditor-Tables (material.blue.light).png
index b74505913a5e..97ca79e29508 100644
Binary files a/apps/demos/testing/etalons/HtmlEditor-Tables (material.blue.light).png and b/apps/demos/testing/etalons/HtmlEditor-Tables (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/HtmlEditor-ToolbarCustomization (material.blue.light).png b/apps/demos/testing/etalons/HtmlEditor-ToolbarCustomization (material.blue.light).png
index 3507594bda7e..46396ecc17bd 100644
Binary files a/apps/demos/testing/etalons/HtmlEditor-ToolbarCustomization (material.blue.light).png and b/apps/demos/testing/etalons/HtmlEditor-ToolbarCustomization (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/List-DragAndDrop (material.blue.light).png b/apps/demos/testing/etalons/List-DragAndDrop (material.blue.light).png
index 148361590d59..ddd6a9696506 100644
Binary files a/apps/demos/testing/etalons/List-DragAndDrop (material.blue.light).png and b/apps/demos/testing/etalons/List-DragAndDrop (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/List-Grouping (material.blue.light).png b/apps/demos/testing/etalons/List-Grouping (material.blue.light).png
index 0bcb624dab09..f8d7515c065c 100644
Binary files a/apps/demos/testing/etalons/List-Grouping (material.blue.light).png and b/apps/demos/testing/etalons/List-Grouping (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/List-Item3RdPartyEngineTemplate (material.blue.light).png b/apps/demos/testing/etalons/List-Item3RdPartyEngineTemplate (material.blue.light).png
index d2f203b7c34c..804ba7d9dfe4 100644
Binary files a/apps/demos/testing/etalons/List-Item3RdPartyEngineTemplate (material.blue.light).png and b/apps/demos/testing/etalons/List-Item3RdPartyEngineTemplate (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/List-ItemDeletion (material.blue.light).png b/apps/demos/testing/etalons/List-ItemDeletion (material.blue.light).png
index f1a66e1d024a..86877c55e867 100644
Binary files a/apps/demos/testing/etalons/List-ItemDeletion (material.blue.light).png and b/apps/demos/testing/etalons/List-ItemDeletion (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/List-ItemTemplate (material.blue.light).png b/apps/demos/testing/etalons/List-ItemTemplate (material.blue.light).png
index 665f8097d217..e9b414c2a362 100644
Binary files a/apps/demos/testing/etalons/List-ItemTemplate (material.blue.light).png and b/apps/demos/testing/etalons/List-ItemTemplate (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/List-Search (material.blue.light).png b/apps/demos/testing/etalons/List-Search (material.blue.light).png
index 01610b7c091c..40779afc4b7f 100644
Binary files a/apps/demos/testing/etalons/List-Search (material.blue.light).png and b/apps/demos/testing/etalons/List-Search (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/List-Selection (material.blue.light).png b/apps/demos/testing/etalons/List-Selection (material.blue.light).png
index 0e1107385311..d2a65237d44f 100644
Binary files a/apps/demos/testing/etalons/List-Selection (material.blue.light).png and b/apps/demos/testing/etalons/List-Selection (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/List-WebAPI (material.blue.light).png b/apps/demos/testing/etalons/List-WebAPI (material.blue.light).png
index c222ba75a2d0..e0be08c94146 100644
Binary files a/apps/demos/testing/etalons/List-WebAPI (material.blue.light).png and b/apps/demos/testing/etalons/List-WebAPI (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/LoadIndicator-Overview (material.blue.light).png b/apps/demos/testing/etalons/LoadIndicator-Overview (material.blue.light).png
index 2b9e30211813..8e6b7eea045e 100644
Binary files a/apps/demos/testing/etalons/LoadIndicator-Overview (material.blue.light).png and b/apps/demos/testing/etalons/LoadIndicator-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/LoadPanel-Overview (material.blue.light).png b/apps/demos/testing/etalons/LoadPanel-Overview (material.blue.light).png
index d094a824ab3b..2ebf9d004faa 100644
Binary files a/apps/demos/testing/etalons/LoadPanel-Overview (material.blue.light).png and b/apps/demos/testing/etalons/LoadPanel-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Localization-UsingGlobalize (material.blue.light).png b/apps/demos/testing/etalons/Localization-UsingGlobalize (material.blue.light).png
index d1a4b6cad2e3..03223d9eecc0 100644
Binary files a/apps/demos/testing/etalons/Localization-UsingGlobalize (material.blue.light).png and b/apps/demos/testing/etalons/Localization-UsingGlobalize (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Localization-UsingIntl (material.blue.light).png b/apps/demos/testing/etalons/Localization-UsingIntl (material.blue.light).png
index d1a4b6cad2e3..03223d9eecc0 100644
Binary files a/apps/demos/testing/etalons/Localization-UsingIntl (material.blue.light).png and b/apps/demos/testing/etalons/Localization-UsingIntl (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Lookup-Basics (material.blue.light).png b/apps/demos/testing/etalons/Lookup-Basics (material.blue.light).png
index 358138c8c4db..6658d4a6a8f9 100644
Binary files a/apps/demos/testing/etalons/Lookup-Basics (material.blue.light).png and b/apps/demos/testing/etalons/Lookup-Basics (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Lookup-EventHandling (material.blue.light).png b/apps/demos/testing/etalons/Lookup-EventHandling (material.blue.light).png
index 3a76aa2712b1..cad180f0663b 100644
Binary files a/apps/demos/testing/etalons/Lookup-EventHandling (material.blue.light).png and b/apps/demos/testing/etalons/Lookup-EventHandling (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Lookup-Templates (material.blue.light).png b/apps/demos/testing/etalons/Lookup-Templates (material.blue.light).png
index 1edecfc96d70..9ea696cf4c2b 100644
Binary files a/apps/demos/testing/etalons/Lookup-Templates (material.blue.light).png and b/apps/demos/testing/etalons/Lookup-Templates (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Map-Markers (material.blue.light).png b/apps/demos/testing/etalons/Map-Markers (material.blue.light).png
deleted file mode 100644
index 20f0c4d060a7..000000000000
Binary files a/apps/demos/testing/etalons/Map-Markers (material.blue.light).png and /dev/null differ
diff --git a/apps/demos/testing/etalons/Map-ProvidersAndTypes (material.blue.light).png b/apps/demos/testing/etalons/Map-ProvidersAndTypes (material.blue.light).png
deleted file mode 100644
index 3a0a644297f8..000000000000
Binary files a/apps/demos/testing/etalons/Map-ProvidersAndTypes (material.blue.light).png and /dev/null differ
diff --git a/apps/demos/testing/etalons/Map-Routes (material.blue.light).png b/apps/demos/testing/etalons/Map-Routes (material.blue.light).png
deleted file mode 100644
index 6ca936d4d178..000000000000
Binary files a/apps/demos/testing/etalons/Map-Routes (material.blue.light).png and /dev/null differ
diff --git a/apps/demos/testing/etalons/Menu-Overview (material.blue.light).png b/apps/demos/testing/etalons/Menu-Overview (material.blue.light).png
index 34dfad507561..32cb41d01507 100644
Binary files a/apps/demos/testing/etalons/Menu-Overview (material.blue.light).png and b/apps/demos/testing/etalons/Menu-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Menu-Scrolling (material.blue.light).png b/apps/demos/testing/etalons/Menu-Scrolling (material.blue.light).png
index c373bdce0f8b..61f67fe4feb6 100644
Binary files a/apps/demos/testing/etalons/Menu-Scrolling (material.blue.light).png and b/apps/demos/testing/etalons/Menu-Scrolling (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/MultiView-Overview (material.blue.light).png b/apps/demos/testing/etalons/MultiView-Overview (material.blue.light).png
index 2c3690c61b25..970112e595f5 100644
Binary files a/apps/demos/testing/etalons/MultiView-Overview (material.blue.light).png and b/apps/demos/testing/etalons/MultiView-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/NumberBox-Formatting (material.blue.light).png b/apps/demos/testing/etalons/NumberBox-Formatting (material.blue.light).png
index 382d00c37fd7..27f93b42ea79 100644
Binary files a/apps/demos/testing/etalons/NumberBox-Formatting (material.blue.light).png and b/apps/demos/testing/etalons/NumberBox-Formatting (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/NumberBox-Overview (material.blue.light).png b/apps/demos/testing/etalons/NumberBox-Overview (material.blue.light).png
index 2f698b5abbbd..c292fa4f5fd6 100644
Binary files a/apps/demos/testing/etalons/NumberBox-Overview (material.blue.light).png and b/apps/demos/testing/etalons/NumberBox-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Pagination-Overview (material.blue.light).png b/apps/demos/testing/etalons/Pagination-Overview (material.blue.light).png
index 75d6b08e3cff..b0bdca4eb367 100644
Binary files a/apps/demos/testing/etalons/Pagination-Overview (material.blue.light).png and b/apps/demos/testing/etalons/Pagination-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/PivotGrid-ChartIntegration (material.blue.light).png b/apps/demos/testing/etalons/PivotGrid-ChartIntegration (material.blue.light).png
index d3310be250b8..2e276d451881 100644
Binary files a/apps/demos/testing/etalons/PivotGrid-ChartIntegration (material.blue.light).png and b/apps/demos/testing/etalons/PivotGrid-ChartIntegration (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/PivotGrid-Customization (material.blue.light).png b/apps/demos/testing/etalons/PivotGrid-Customization (material.blue.light).png
index fad49f520d9a..448da2473a74 100644
Binary files a/apps/demos/testing/etalons/PivotGrid-Customization (material.blue.light).png and b/apps/demos/testing/etalons/PivotGrid-Customization (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/PivotGrid-DrillDown (material.blue.light).png b/apps/demos/testing/etalons/PivotGrid-DrillDown (material.blue.light).png
index 55d2ec8fb099..4777637b0323 100644
Binary files a/apps/demos/testing/etalons/PivotGrid-DrillDown (material.blue.light).png and b/apps/demos/testing/etalons/PivotGrid-DrillDown (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/PivotGrid-ExcelJSCellCustomization (material.blue.light).png b/apps/demos/testing/etalons/PivotGrid-ExcelJSCellCustomization (material.blue.light).png
index 89384ffc7936..3c97762f71c6 100644
Binary files a/apps/demos/testing/etalons/PivotGrid-ExcelJSCellCustomization (material.blue.light).png and b/apps/demos/testing/etalons/PivotGrid-ExcelJSCellCustomization (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/PivotGrid-ExcelJSOverview (material.blue.light).png b/apps/demos/testing/etalons/PivotGrid-ExcelJSOverview (material.blue.light).png
index a16f538c2052..91d255f1b0e3 100644
Binary files a/apps/demos/testing/etalons/PivotGrid-ExcelJSOverview (material.blue.light).png and b/apps/demos/testing/etalons/PivotGrid-ExcelJSOverview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/PivotGrid-ExcelJsHeaderAndFooter (material.blue.light).png b/apps/demos/testing/etalons/PivotGrid-ExcelJsHeaderAndFooter (material.blue.light).png
index e15e5d515003..5862aabc33dc 100644
Binary files a/apps/demos/testing/etalons/PivotGrid-ExcelJsHeaderAndFooter (material.blue.light).png and b/apps/demos/testing/etalons/PivotGrid-ExcelJsHeaderAndFooter (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/PivotGrid-FieldPanel (material.blue.light).png b/apps/demos/testing/etalons/PivotGrid-FieldPanel (material.blue.light).png
index a64a39fd2ffd..0d0ad1344363 100644
Binary files a/apps/demos/testing/etalons/PivotGrid-FieldPanel (material.blue.light).png and b/apps/demos/testing/etalons/PivotGrid-FieldPanel (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/PivotGrid-Filtering (material.blue.light).png b/apps/demos/testing/etalons/PivotGrid-Filtering (material.blue.light).png
index 0ca67ac911e6..b9703eab38d7 100644
Binary files a/apps/demos/testing/etalons/PivotGrid-Filtering (material.blue.light).png and b/apps/demos/testing/etalons/PivotGrid-Filtering (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/PivotGrid-IntegratedFieldChooser (material.blue.light).png b/apps/demos/testing/etalons/PivotGrid-IntegratedFieldChooser (material.blue.light).png
index bfab6ed4dbec..d3bbec98fd61 100644
Binary files a/apps/demos/testing/etalons/PivotGrid-IntegratedFieldChooser (material.blue.light).png and b/apps/demos/testing/etalons/PivotGrid-IntegratedFieldChooser (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/PivotGrid-OLAPDataSource (material.blue.light).png b/apps/demos/testing/etalons/PivotGrid-OLAPDataSource (material.blue.light).png
index 3a55b58e5ca0..c8b35c1d4a15 100644
Binary files a/apps/demos/testing/etalons/PivotGrid-OLAPDataSource (material.blue.light).png and b/apps/demos/testing/etalons/PivotGrid-OLAPDataSource (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/PivotGrid-Overview (material.blue.light).png b/apps/demos/testing/etalons/PivotGrid-Overview (material.blue.light).png
index 56340d6a273d..d806b3296acf 100644
Binary files a/apps/demos/testing/etalons/PivotGrid-Overview (material.blue.light).png and b/apps/demos/testing/etalons/PivotGrid-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/PivotGrid-RemoteVirtualScrolling (material.blue.light).png b/apps/demos/testing/etalons/PivotGrid-RemoteVirtualScrolling (material.blue.light).png
index 87f2b627c785..6c5693b9fca6 100644
Binary files a/apps/demos/testing/etalons/PivotGrid-RemoteVirtualScrolling (material.blue.light).png and b/apps/demos/testing/etalons/PivotGrid-RemoteVirtualScrolling (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/PivotGrid-RunningTotals (material.blue.light).png b/apps/demos/testing/etalons/PivotGrid-RunningTotals (material.blue.light).png
index ef3c60d8ef04..bd006fa8059c 100644
Binary files a/apps/demos/testing/etalons/PivotGrid-RunningTotals (material.blue.light).png and b/apps/demos/testing/etalons/PivotGrid-RunningTotals (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/PivotGrid-SimpleArray (material.blue.light).png b/apps/demos/testing/etalons/PivotGrid-SimpleArray (material.blue.light).png
index 07f6136503fe..37c25ac9be1c 100644
Binary files a/apps/demos/testing/etalons/PivotGrid-SimpleArray (material.blue.light).png and b/apps/demos/testing/etalons/PivotGrid-SimpleArray (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/PivotGrid-StandaloneFieldChooser (material.blue.light).png b/apps/demos/testing/etalons/PivotGrid-StandaloneFieldChooser (material.blue.light).png
index fdfb7fc65e0b..febc28e97e9f 100644
Binary files a/apps/demos/testing/etalons/PivotGrid-StandaloneFieldChooser (material.blue.light).png and b/apps/demos/testing/etalons/PivotGrid-StandaloneFieldChooser (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/PivotGrid-StatePersistence (material.blue.light).png b/apps/demos/testing/etalons/PivotGrid-StatePersistence (material.blue.light).png
index 8a02e10d60fc..b9420e3eb590 100644
Binary files a/apps/demos/testing/etalons/PivotGrid-StatePersistence (material.blue.light).png and b/apps/demos/testing/etalons/PivotGrid-StatePersistence (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/PivotGrid-SummaryDisplayModes (material.blue.light).png b/apps/demos/testing/etalons/PivotGrid-SummaryDisplayModes (material.blue.light).png
index 8fcc3cf02a76..3d9f60eb579e 100644
Binary files a/apps/demos/testing/etalons/PivotGrid-SummaryDisplayModes (material.blue.light).png and b/apps/demos/testing/etalons/PivotGrid-SummaryDisplayModes (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/PivotGrid-VirtualScrolling (material.blue.light).png b/apps/demos/testing/etalons/PivotGrid-VirtualScrolling (material.blue.light).png
index 647465ff1af4..6f9668aead67 100644
Binary files a/apps/demos/testing/etalons/PivotGrid-VirtualScrolling (material.blue.light).png and b/apps/demos/testing/etalons/PivotGrid-VirtualScrolling (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/PivotGrid-WebAPIService (material.blue.light).png b/apps/demos/testing/etalons/PivotGrid-WebAPIService (material.blue.light).png
index 8fb303be1a60..832ec0d25d35 100644
Binary files a/apps/demos/testing/etalons/PivotGrid-WebAPIService (material.blue.light).png and b/apps/demos/testing/etalons/PivotGrid-WebAPIService (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Popover-Overview (material.blue.light).png b/apps/demos/testing/etalons/Popover-Overview (material.blue.light).png
index e1d3133660a1..5b569ca50645 100644
Binary files a/apps/demos/testing/etalons/Popover-Overview (material.blue.light).png and b/apps/demos/testing/etalons/Popover-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Popup-Overview (material.blue.light).png b/apps/demos/testing/etalons/Popup-Overview (material.blue.light).png
index 1344a45fcf0b..0f0047dac64c 100644
Binary files a/apps/demos/testing/etalons/Popup-Overview (material.blue.light).png and b/apps/demos/testing/etalons/Popup-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Popup-Scrolling (material.blue.light).png b/apps/demos/testing/etalons/Popup-Scrolling (material.blue.light).png
index c63f75444118..362762a944e4 100644
Binary files a/apps/demos/testing/etalons/Popup-Scrolling (material.blue.light).png and b/apps/demos/testing/etalons/Popup-Scrolling (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/ProgressBar-Overview (material.blue.light).png b/apps/demos/testing/etalons/ProgressBar-Overview (material.blue.light).png
index 7eb0df1eb67b..6e7dac326692 100644
Binary files a/apps/demos/testing/etalons/ProgressBar-Overview (material.blue.light).png and b/apps/demos/testing/etalons/ProgressBar-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/RadioGroup-Overview (material.blue.light).png b/apps/demos/testing/etalons/RadioGroup-Overview (material.blue.light).png
index e825ae9c8645..11936e80211b 100644
Binary files a/apps/demos/testing/etalons/RadioGroup-Overview (material.blue.light).png and b/apps/demos/testing/etalons/RadioGroup-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/RangeSelector-BackgroundImage (material.blue.light).png b/apps/demos/testing/etalons/RangeSelector-BackgroundImage (material.blue.light).png
index a0fe94c590bc..8b180175b0fc 100644
Binary files a/apps/demos/testing/etalons/RangeSelector-BackgroundImage (material.blue.light).png and b/apps/demos/testing/etalons/RangeSelector-BackgroundImage (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/RangeSelector-Calculation (material.blue.light).png b/apps/demos/testing/etalons/RangeSelector-Calculation (material.blue.light).png
index 1e72edcd1a9d..4ef3d2dc7156 100644
Binary files a/apps/demos/testing/etalons/RangeSelector-Calculation (material.blue.light).png and b/apps/demos/testing/etalons/RangeSelector-Calculation (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/RangeSelector-CustomFormatting (material.blue.light).png b/apps/demos/testing/etalons/RangeSelector-CustomFormatting (material.blue.light).png
index 3adc3b69f497..0aabdf83e3ae 100644
Binary files a/apps/demos/testing/etalons/RangeSelector-CustomFormatting (material.blue.light).png and b/apps/demos/testing/etalons/RangeSelector-CustomFormatting (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/RangeSelector-DateTimeScale (material.blue.light).png b/apps/demos/testing/etalons/RangeSelector-DateTimeScale (material.blue.light).png
index b27eeaae46f6..2f7db1ace6e6 100644
Binary files a/apps/demos/testing/etalons/RangeSelector-DateTimeScale (material.blue.light).png and b/apps/demos/testing/etalons/RangeSelector-DateTimeScale (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/RangeSelector-DateTimeScaleLightweight (material.blue.light).png b/apps/demos/testing/etalons/RangeSelector-DateTimeScaleLightweight (material.blue.light).png
index ad1aff7cd0b5..debea6afc39a 100644
Binary files a/apps/demos/testing/etalons/RangeSelector-DateTimeScaleLightweight (material.blue.light).png and b/apps/demos/testing/etalons/RangeSelector-DateTimeScaleLightweight (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/RangeSelector-DiscreteScale (material.blue.light).png b/apps/demos/testing/etalons/RangeSelector-DiscreteScale (material.blue.light).png
index a4e5235542c8..e933c0de7115 100644
Binary files a/apps/demos/testing/etalons/RangeSelector-DiscreteScale (material.blue.light).png and b/apps/demos/testing/etalons/RangeSelector-DiscreteScale (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/RangeSelector-EmbeddedChart (material.blue.light).png b/apps/demos/testing/etalons/RangeSelector-EmbeddedChart (material.blue.light).png
index 110915e49ca0..a778d263871c 100644
Binary files a/apps/demos/testing/etalons/RangeSelector-EmbeddedChart (material.blue.light).png and b/apps/demos/testing/etalons/RangeSelector-EmbeddedChart (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/RangeSelector-EmbeddedChartCustomized (material.blue.light).png b/apps/demos/testing/etalons/RangeSelector-EmbeddedChartCustomized (material.blue.light).png
index 126bf278a02a..0825fff36167 100644
Binary files a/apps/demos/testing/etalons/RangeSelector-EmbeddedChartCustomized (material.blue.light).png and b/apps/demos/testing/etalons/RangeSelector-EmbeddedChartCustomized (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/RangeSelector-EmbeddedChartSeriesTemplate (material.blue.light).png b/apps/demos/testing/etalons/RangeSelector-EmbeddedChartSeriesTemplate (material.blue.light).png
index fbc256b8a6e2..21aa67482ebd 100644
Binary files a/apps/demos/testing/etalons/RangeSelector-EmbeddedChartSeriesTemplate (material.blue.light).png and b/apps/demos/testing/etalons/RangeSelector-EmbeddedChartSeriesTemplate (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/RangeSelector-Filter (material.blue.light).png b/apps/demos/testing/etalons/RangeSelector-Filter (material.blue.light).png
index e6bb5f688963..038af423e61d 100644
Binary files a/apps/demos/testing/etalons/RangeSelector-Filter (material.blue.light).png and b/apps/demos/testing/etalons/RangeSelector-Filter (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/RangeSelector-LogarithmicScale (material.blue.light).png b/apps/demos/testing/etalons/RangeSelector-LogarithmicScale (material.blue.light).png
index 7a3d2226e09e..cd29f77005be 100644
Binary files a/apps/demos/testing/etalons/RangeSelector-LogarithmicScale (material.blue.light).png and b/apps/demos/testing/etalons/RangeSelector-LogarithmicScale (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/RangeSelector-NumericScale (material.blue.light).png b/apps/demos/testing/etalons/RangeSelector-NumericScale (material.blue.light).png
index 7bbc175ff2c5..42130261c96b 100644
Binary files a/apps/demos/testing/etalons/RangeSelector-NumericScale (material.blue.light).png and b/apps/demos/testing/etalons/RangeSelector-NumericScale (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/RangeSelector-NumericScaleLightweight (material.blue.light).png b/apps/demos/testing/etalons/RangeSelector-NumericScaleLightweight (material.blue.light).png
index b45f32b60ce5..d40907d54501 100644
Binary files a/apps/demos/testing/etalons/RangeSelector-NumericScaleLightweight (material.blue.light).png and b/apps/demos/testing/etalons/RangeSelector-NumericScaleLightweight (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/RangeSlider-Overview (material.blue.light).png b/apps/demos/testing/etalons/RangeSlider-Overview (material.blue.light).png
index 2f1e54b7e099..0cbdc05a2f62 100644
Binary files a/apps/demos/testing/etalons/RangeSlider-Overview (material.blue.light).png and b/apps/demos/testing/etalons/RangeSlider-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Resizable-Overview (material.blue.light).png b/apps/demos/testing/etalons/Resizable-Overview (material.blue.light).png
index 216a57991542..5fbe0b138003 100644
Binary files a/apps/demos/testing/etalons/Resizable-Overview (material.blue.light).png and b/apps/demos/testing/etalons/Resizable-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/ResponsiveBox-Overview (fluent.blue.light).png b/apps/demos/testing/etalons/ResponsiveBox-Overview (fluent.blue.light).png
index cf2104fe4ed5..1d50453eb425 100644
Binary files a/apps/demos/testing/etalons/ResponsiveBox-Overview (fluent.blue.light).png and b/apps/demos/testing/etalons/ResponsiveBox-Overview (fluent.blue.light).png differ
diff --git a/apps/demos/testing/etalons/ResponsiveBox-Overview (material.blue.light).png b/apps/demos/testing/etalons/ResponsiveBox-Overview (material.blue.light).png
index 13830126afa4..ed9d98137282 100644
Binary files a/apps/demos/testing/etalons/ResponsiveBox-Overview (material.blue.light).png and b/apps/demos/testing/etalons/ResponsiveBox-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-Adaptability (fluent.blue.light).png b/apps/demos/testing/etalons/Scheduler-Adaptability (fluent.blue.light).png
index f6f829ab988d..eab0f871b7cb 100644
Binary files a/apps/demos/testing/etalons/Scheduler-Adaptability (fluent.blue.light).png and b/apps/demos/testing/etalons/Scheduler-Adaptability (fluent.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-Adaptability (material.blue.light).png b/apps/demos/testing/etalons/Scheduler-Adaptability (material.blue.light).png
index dbe8c3ebf495..888048ec7f06 100644
Binary files a/apps/demos/testing/etalons/Scheduler-Adaptability (material.blue.light).png and b/apps/demos/testing/etalons/Scheduler-Adaptability (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-Agenda (material.blue.light).png b/apps/demos/testing/etalons/Scheduler-Agenda (material.blue.light).png
index db75ffb2e729..6aa14dde4451 100644
Binary files a/apps/demos/testing/etalons/Scheduler-Agenda (material.blue.light).png and b/apps/demos/testing/etalons/Scheduler-Agenda (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-AllDayPanelMode (material.blue.light).png b/apps/demos/testing/etalons/Scheduler-AllDayPanelMode (material.blue.light).png
index 448a976a883a..62c72b4413e5 100644
Binary files a/apps/demos/testing/etalons/Scheduler-AllDayPanelMode (material.blue.light).png and b/apps/demos/testing/etalons/Scheduler-AllDayPanelMode (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-AppointmentCountPerCell (material.blue.light).png b/apps/demos/testing/etalons/Scheduler-AppointmentCountPerCell (material.blue.light).png
index 0802df89d162..3f3402b25e27 100644
Binary files a/apps/demos/testing/etalons/Scheduler-AppointmentCountPerCell (material.blue.light).png and b/apps/demos/testing/etalons/Scheduler-AppointmentCountPerCell (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-BasicViews (material.blue.light).png b/apps/demos/testing/etalons/Scheduler-BasicViews (material.blue.light).png
index ee57ebdf9293..38a23d598a2d 100644
Binary files a/apps/demos/testing/etalons/Scheduler-BasicViews (material.blue.light).png and b/apps/demos/testing/etalons/Scheduler-BasicViews (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-CellTemplates (fluent.blue.light).png b/apps/demos/testing/etalons/Scheduler-CellTemplates (fluent.blue.light).png
index 20e6990baa82..b21f52a28982 100644
Binary files a/apps/demos/testing/etalons/Scheduler-CellTemplates (fluent.blue.light).png and b/apps/demos/testing/etalons/Scheduler-CellTemplates (fluent.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-CellTemplates (material.blue.light).png b/apps/demos/testing/etalons/Scheduler-CellTemplates (material.blue.light).png
index 9435e12e0d7e..65ffca0b76e4 100644
Binary files a/apps/demos/testing/etalons/Scheduler-CellTemplates (material.blue.light).png and b/apps/demos/testing/etalons/Scheduler-CellTemplates (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-ContextMenu (material.blue.light).png b/apps/demos/testing/etalons/Scheduler-ContextMenu (material.blue.light).png
index 9a39b23a4d8a..67bfe5828e98 100644
Binary files a/apps/demos/testing/etalons/Scheduler-ContextMenu (material.blue.light).png and b/apps/demos/testing/etalons/Scheduler-ContextMenu (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-CurrentTimeIndicator (material.blue.light).png b/apps/demos/testing/etalons/Scheduler-CurrentTimeIndicator (material.blue.light).png
index 99d1c17fb3ce..fa02ccf0a735 100644
Binary files a/apps/demos/testing/etalons/Scheduler-CurrentTimeIndicator (material.blue.light).png and b/apps/demos/testing/etalons/Scheduler-CurrentTimeIndicator (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-CustomViewDuration (material.blue.light).png b/apps/demos/testing/etalons/Scheduler-CustomViewDuration (material.blue.light).png
index b722aaf5709f..610b9d77d40a 100644
Binary files a/apps/demos/testing/etalons/Scheduler-CustomViewDuration (material.blue.light).png and b/apps/demos/testing/etalons/Scheduler-CustomViewDuration (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-DragAndDrop (material.blue.light).png b/apps/demos/testing/etalons/Scheduler-DragAndDrop (material.blue.light).png
index 2f63fbd8a7be..4e1ab2be6c3c 100644
Binary files a/apps/demos/testing/etalons/Scheduler-DragAndDrop (material.blue.light).png and b/apps/demos/testing/etalons/Scheduler-DragAndDrop (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-Editing (material.blue.light).png b/apps/demos/testing/etalons/Scheduler-Editing (material.blue.light).png
index 330ec5cc8379..3437e9c068c3 100644
Binary files a/apps/demos/testing/etalons/Scheduler-Editing (material.blue.light).png and b/apps/demos/testing/etalons/Scheduler-Editing (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-GoogleCalendarIntegration (material.blue.light).png b/apps/demos/testing/etalons/Scheduler-GoogleCalendarIntegration (material.blue.light).png
index 291bcefbeb30..d29b497edbb2 100644
Binary files a/apps/demos/testing/etalons/Scheduler-GoogleCalendarIntegration (material.blue.light).png and b/apps/demos/testing/etalons/Scheduler-GoogleCalendarIntegration (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-GroupByDate (material.blue.light).png b/apps/demos/testing/etalons/Scheduler-GroupByDate (material.blue.light).png
index 26c1bfbc7ba5..526171f79eab 100644
Binary files a/apps/demos/testing/etalons/Scheduler-GroupByDate (material.blue.light).png and b/apps/demos/testing/etalons/Scheduler-GroupByDate (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-GroupingByResources (material.blue.light).png b/apps/demos/testing/etalons/Scheduler-GroupingByResources (material.blue.light).png
index 785b9dc23cc1..cfb8d6c50e7b 100644
Binary files a/apps/demos/testing/etalons/Scheduler-GroupingByResources (material.blue.light).png and b/apps/demos/testing/etalons/Scheduler-GroupingByResources (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-IndividualViewsCustomization (material.blue.light).png b/apps/demos/testing/etalons/Scheduler-IndividualViewsCustomization (material.blue.light).png
index 4fde241ce544..cb258242a774 100644
Binary files a/apps/demos/testing/etalons/Scheduler-IndividualViewsCustomization (material.blue.light).png and b/apps/demos/testing/etalons/Scheduler-IndividualViewsCustomization (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-Overview (material.blue.light).png b/apps/demos/testing/etalons/Scheduler-Overview (material.blue.light).png
index 907d2f1c4f64..8869d317fe97 100644
Binary files a/apps/demos/testing/etalons/Scheduler-Overview (material.blue.light).png and b/apps/demos/testing/etalons/Scheduler-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-RecurringAppointments (material.blue.light).png b/apps/demos/testing/etalons/Scheduler-RecurringAppointments (material.blue.light).png
index 9a39b23a4d8a..67bfe5828e98 100644
Binary files a/apps/demos/testing/etalons/Scheduler-RecurringAppointments (material.blue.light).png and b/apps/demos/testing/etalons/Scheduler-RecurringAppointments (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-Resources (material.blue.light).png b/apps/demos/testing/etalons/Scheduler-Resources (material.blue.light).png
index f296c40e4cf1..115c64443a74 100644
Binary files a/apps/demos/testing/etalons/Scheduler-Resources (material.blue.light).png and b/apps/demos/testing/etalons/Scheduler-Resources (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-SignalRService (material.blue.light).png b/apps/demos/testing/etalons/Scheduler-SignalRService (material.blue.light).png
index 6fb55d2cbed0..9d2790945d76 100644
Binary files a/apps/demos/testing/etalons/Scheduler-SignalRService (material.blue.light).png and b/apps/demos/testing/etalons/Scheduler-SignalRService (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-SimpleArray (material.blue.light).png b/apps/demos/testing/etalons/Scheduler-SimpleArray (material.blue.light).png
index b27d6e62fc86..0466246029fb 100644
Binary files a/apps/demos/testing/etalons/Scheduler-SimpleArray (material.blue.light).png and b/apps/demos/testing/etalons/Scheduler-SimpleArray (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-Templates (material.blue.light).png b/apps/demos/testing/etalons/Scheduler-Templates (material.blue.light).png
index 34993b1da0bf..ba2afb7ad3cc 100644
Binary files a/apps/demos/testing/etalons/Scheduler-Templates (material.blue.light).png and b/apps/demos/testing/etalons/Scheduler-Templates (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-TimeZonesSupport (material.blue.light).png b/apps/demos/testing/etalons/Scheduler-TimeZonesSupport (material.blue.light).png
index db289c1ec0d6..92919fcf9ba4 100644
Binary files a/apps/demos/testing/etalons/Scheduler-TimeZonesSupport (material.blue.light).png and b/apps/demos/testing/etalons/Scheduler-TimeZonesSupport (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-Timelines (material.blue.light).png b/apps/demos/testing/etalons/Scheduler-Timelines (material.blue.light).png
index 560e1bf7e594..2ef64a0eb706 100644
Binary files a/apps/demos/testing/etalons/Scheduler-Timelines (material.blue.light).png and b/apps/demos/testing/etalons/Scheduler-Timelines (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-Toolbar (material.blue.light).png b/apps/demos/testing/etalons/Scheduler-Toolbar (material.blue.light).png
index 25c0a0192b14..5c289e355281 100644
Binary files a/apps/demos/testing/etalons/Scheduler-Toolbar (material.blue.light).png and b/apps/demos/testing/etalons/Scheduler-Toolbar (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-VirtualScrolling (material.blue.light).png b/apps/demos/testing/etalons/Scheduler-VirtualScrolling (material.blue.light).png
index a4cdd4c9740c..648d0931bd6f 100644
Binary files a/apps/demos/testing/etalons/Scheduler-VirtualScrolling (material.blue.light).png and b/apps/demos/testing/etalons/Scheduler-VirtualScrolling (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-WebAPIService (material.blue.light).png b/apps/demos/testing/etalons/Scheduler-WebAPIService (material.blue.light).png
index 213b02f56349..6afeadf5e04d 100644
Binary files a/apps/demos/testing/etalons/Scheduler-WebAPIService (material.blue.light).png and b/apps/demos/testing/etalons/Scheduler-WebAPIService (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-WorkShifts (material.blue.light).png b/apps/demos/testing/etalons/Scheduler-WorkShifts (material.blue.light).png
index 93ff372a9883..165d0e6ac5eb 100644
Binary files a/apps/demos/testing/etalons/Scheduler-WorkShifts (material.blue.light).png and b/apps/demos/testing/etalons/Scheduler-WorkShifts (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/ScrollView-Overview (material.blue.light).png b/apps/demos/testing/etalons/ScrollView-Overview (material.blue.light).png
index ec2bdd1ac01e..ef6a82710d37 100644
Binary files a/apps/demos/testing/etalons/ScrollView-Overview (material.blue.light).png and b/apps/demos/testing/etalons/ScrollView-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/SelectBox-CustomizeDropDownButton (material.blue.light).png b/apps/demos/testing/etalons/SelectBox-CustomizeDropDownButton (material.blue.light).png
index 98e5c3e98df5..3270114afc73 100644
Binary files a/apps/demos/testing/etalons/SelectBox-CustomizeDropDownButton (material.blue.light).png and b/apps/demos/testing/etalons/SelectBox-CustomizeDropDownButton (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/SelectBox-Grouping (material.blue.light).png b/apps/demos/testing/etalons/SelectBox-Grouping (material.blue.light).png
index 2c98b7047a7f..90bb14e9c1c5 100644
Binary files a/apps/demos/testing/etalons/SelectBox-Grouping (material.blue.light).png and b/apps/demos/testing/etalons/SelectBox-Grouping (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/SelectBox-Overview (material.blue.light).png b/apps/demos/testing/etalons/SelectBox-Overview (material.blue.light).png
index d05eecdc79da..26532170bb9b 100644
Binary files a/apps/demos/testing/etalons/SelectBox-Overview (material.blue.light).png and b/apps/demos/testing/etalons/SelectBox-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/SelectBox-SearchAndEditing (material.blue.light).png b/apps/demos/testing/etalons/SelectBox-SearchAndEditing (material.blue.light).png
index 7ea64250403a..40aeecb5032d 100644
Binary files a/apps/demos/testing/etalons/SelectBox-SearchAndEditing (material.blue.light).png and b/apps/demos/testing/etalons/SelectBox-SearchAndEditing (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Slider-Overview (material.blue.light).png b/apps/demos/testing/etalons/Slider-Overview (material.blue.light).png
index 587bb37ebf3b..308de6fcf77d 100644
Binary files a/apps/demos/testing/etalons/Slider-Overview (material.blue.light).png and b/apps/demos/testing/etalons/Slider-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Sortable-Customization (material.blue.light).png b/apps/demos/testing/etalons/Sortable-Customization (material.blue.light).png
index 3b6debfaa561..b2fdda3e41f6 100644
Binary files a/apps/demos/testing/etalons/Sortable-Customization (material.blue.light).png and b/apps/demos/testing/etalons/Sortable-Customization (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Sortable-Kanban (material.blue.light).png b/apps/demos/testing/etalons/Sortable-Kanban (material.blue.light).png
index 0c0c9e824a2c..2161acc6ab03 100644
Binary files a/apps/demos/testing/etalons/Sortable-Kanban (material.blue.light).png and b/apps/demos/testing/etalons/Sortable-Kanban (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/SpeechToText-Overview (material.blue.light).png b/apps/demos/testing/etalons/SpeechToText-Overview (material.blue.light).png
index 441da5df661d..9f8dd5a8b08c 100644
Binary files a/apps/demos/testing/etalons/SpeechToText-Overview (material.blue.light).png and b/apps/demos/testing/etalons/SpeechToText-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Splitter-Overview (material.blue.light).png b/apps/demos/testing/etalons/Splitter-Overview (material.blue.light).png
index 7264b0de1388..fc0e12b41dbe 100644
Binary files a/apps/demos/testing/etalons/Splitter-Overview (material.blue.light).png and b/apps/demos/testing/etalons/Splitter-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Stepper-FormIntegration (material.blue.light).png b/apps/demos/testing/etalons/Stepper-FormIntegration (material.blue.light).png
index 1337e355728a..8de9de75300a 100644
Binary files a/apps/demos/testing/etalons/Stepper-FormIntegration (material.blue.light).png and b/apps/demos/testing/etalons/Stepper-FormIntegration (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Stepper-Overview (material.blue.light).png b/apps/demos/testing/etalons/Stepper-Overview (material.blue.light).png
index 5320bfd78276..0990c26197e0 100644
Binary files a/apps/demos/testing/etalons/Stepper-Overview (material.blue.light).png and b/apps/demos/testing/etalons/Stepper-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Stepper-StepTemplate (material.blue.light).png b/apps/demos/testing/etalons/Stepper-StepTemplate (material.blue.light).png
index 639ad2f8383b..44338a1201ae 100644
Binary files a/apps/demos/testing/etalons/Stepper-StepTemplate (material.blue.light).png and b/apps/demos/testing/etalons/Stepper-StepTemplate (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Switch-Overview (material.blue.light).png b/apps/demos/testing/etalons/Switch-Overview (material.blue.light).png
index d739a21f999a..b28f532803e6 100644
Binary files a/apps/demos/testing/etalons/Switch-Overview (material.blue.light).png and b/apps/demos/testing/etalons/Switch-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TabPanel-DragAndDrop (material.blue.light).png b/apps/demos/testing/etalons/TabPanel-DragAndDrop (material.blue.light).png
index 543ac4794dbb..93d966a83a29 100644
Binary files a/apps/demos/testing/etalons/TabPanel-DragAndDrop (material.blue.light).png and b/apps/demos/testing/etalons/TabPanel-DragAndDrop (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TabPanel-Overview (material.blue.light).png b/apps/demos/testing/etalons/TabPanel-Overview (material.blue.light).png
index ddadc1d024ce..2bc6c21f59ae 100644
Binary files a/apps/demos/testing/etalons/TabPanel-Overview (material.blue.light).png and b/apps/demos/testing/etalons/TabPanel-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TabPanel-Templates (material.blue.light).png b/apps/demos/testing/etalons/TabPanel-Templates (material.blue.light).png
index a19c5e3421fb..fe071f510d4d 100644
Binary files a/apps/demos/testing/etalons/TabPanel-Templates (material.blue.light).png and b/apps/demos/testing/etalons/TabPanel-Templates (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Tabs-Overview (material.blue.light).png b/apps/demos/testing/etalons/Tabs-Overview (material.blue.light).png
index aee981777398..54e503f91ec3 100644
Binary files a/apps/demos/testing/etalons/Tabs-Overview (material.blue.light).png and b/apps/demos/testing/etalons/Tabs-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Tabs-Selection (material.blue.light).png b/apps/demos/testing/etalons/Tabs-Selection (material.blue.light).png
index b85175352a1e..4df0de9d4082 100644
Binary files a/apps/demos/testing/etalons/Tabs-Selection (material.blue.light).png and b/apps/demos/testing/etalons/Tabs-Selection (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TagBox-Grouping (material.blue.light).png b/apps/demos/testing/etalons/TagBox-Grouping (material.blue.light).png
index afd0956ec024..c47caa602fee 100644
Binary files a/apps/demos/testing/etalons/TagBox-Grouping (material.blue.light).png and b/apps/demos/testing/etalons/TagBox-Grouping (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TagBox-Overview (material.blue.light).png b/apps/demos/testing/etalons/TagBox-Overview (material.blue.light).png
index e6c4b3e5ac41..c7d7cefc9bad 100644
Binary files a/apps/demos/testing/etalons/TagBox-Overview (material.blue.light).png and b/apps/demos/testing/etalons/TagBox-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TagBox-TagCountLimitation (material.blue.light).png b/apps/demos/testing/etalons/TagBox-TagCountLimitation (material.blue.light).png
index 8c3c2417d74f..f6427f57f14e 100644
Binary files a/apps/demos/testing/etalons/TagBox-TagCountLimitation (material.blue.light).png and b/apps/demos/testing/etalons/TagBox-TagCountLimitation (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TextArea-Overview (material.blue.light).png b/apps/demos/testing/etalons/TextArea-Overview (material.blue.light).png
index 9253401cfbaf..4e70465d8fb8 100644
Binary files a/apps/demos/testing/etalons/TextArea-Overview (material.blue.light).png and b/apps/demos/testing/etalons/TextArea-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TextBox-Overview (material.blue.light).png b/apps/demos/testing/etalons/TextBox-Overview (material.blue.light).png
index f0dfbe98cc66..58765be62f59 100644
Binary files a/apps/demos/testing/etalons/TextBox-Overview (material.blue.light).png and b/apps/demos/testing/etalons/TextBox-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TileView-Directions (material.blue.light).png b/apps/demos/testing/etalons/TileView-Directions (material.blue.light).png
index e745653b518b..8b300778e376 100644
Binary files a/apps/demos/testing/etalons/TileView-Directions (material.blue.light).png and b/apps/demos/testing/etalons/TileView-Directions (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TileView-Item3RdPartyEngineTemplate (material.blue.light).png b/apps/demos/testing/etalons/TileView-Item3RdPartyEngineTemplate (material.blue.light).png
index c45b0c2449d2..69c23f3d9ff7 100644
Binary files a/apps/demos/testing/etalons/TileView-Item3RdPartyEngineTemplate (material.blue.light).png and b/apps/demos/testing/etalons/TileView-Item3RdPartyEngineTemplate (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TileView-ItemTemplate (material.blue.light).png b/apps/demos/testing/etalons/TileView-ItemTemplate (material.blue.light).png
index de62e5a71de4..7d0429392fbe 100644
Binary files a/apps/demos/testing/etalons/TileView-ItemTemplate (material.blue.light).png and b/apps/demos/testing/etalons/TileView-ItemTemplate (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Toast-Overview (material.blue.light).png b/apps/demos/testing/etalons/Toast-Overview (material.blue.light).png
index add250a8fc5b..4090efec76d3 100644
Binary files a/apps/demos/testing/etalons/Toast-Overview (material.blue.light).png and b/apps/demos/testing/etalons/Toast-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Toast-Stack (material.blue.light).png b/apps/demos/testing/etalons/Toast-Stack (material.blue.light).png
index fc79c5ec6efa..8e8bb639d3f6 100644
Binary files a/apps/demos/testing/etalons/Toast-Stack (material.blue.light).png and b/apps/demos/testing/etalons/Toast-Stack (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Toolbar-Adaptability (material.blue.light).png b/apps/demos/testing/etalons/Toolbar-Adaptability (material.blue.light).png
index 435f2ebba767..22d92f944061 100644
Binary files a/apps/demos/testing/etalons/Toolbar-Adaptability (material.blue.light).png and b/apps/demos/testing/etalons/Toolbar-Adaptability (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Toolbar-Overview (material.blue.light).png b/apps/demos/testing/etalons/Toolbar-Overview (material.blue.light).png
index 42da4fa5b116..ab01c0d12918 100644
Binary files a/apps/demos/testing/etalons/Toolbar-Overview (material.blue.light).png and b/apps/demos/testing/etalons/Toolbar-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Tooltip-Overview (material.blue.light).png b/apps/demos/testing/etalons/Tooltip-Overview (material.blue.light).png
index 954c647abc7f..3fcdcf28af41 100644
Binary files a/apps/demos/testing/etalons/Tooltip-Overview (material.blue.light).png and b/apps/demos/testing/etalons/Tooltip-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-AIColumns (material.blue.light).png b/apps/demos/testing/etalons/TreeList-AIColumns (material.blue.light).png
index 6ae2381791b9..fa3478cd3a27 100644
Binary files a/apps/demos/testing/etalons/TreeList-AIColumns (material.blue.light).png and b/apps/demos/testing/etalons/TreeList-AIColumns (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-Adaptability (material.blue.light).png b/apps/demos/testing/etalons/TreeList-Adaptability (material.blue.light).png
index 5ed76926ac81..03055458dea0 100644
Binary files a/apps/demos/testing/etalons/TreeList-Adaptability (material.blue.light).png and b/apps/demos/testing/etalons/TreeList-Adaptability (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-BatchEditing (material.blue.light).png b/apps/demos/testing/etalons/TreeList-BatchEditing (material.blue.light).png
index 6c529b60c5e4..fd9b46a54b06 100644
Binary files a/apps/demos/testing/etalons/TreeList-BatchEditing (material.blue.light).png and b/apps/demos/testing/etalons/TreeList-BatchEditing (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-CellEditing (material.blue.light).png b/apps/demos/testing/etalons/TreeList-CellEditing (material.blue.light).png
index 593532e57add..9d0004463e62 100644
Binary files a/apps/demos/testing/etalons/TreeList-CellEditing (material.blue.light).png and b/apps/demos/testing/etalons/TreeList-CellEditing (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-ColumnChooser (material.blue.light).png b/apps/demos/testing/etalons/TreeList-ColumnChooser (material.blue.light).png
index 9143fdb8c9cb..87a2a3e3bf1d 100644
Binary files a/apps/demos/testing/etalons/TreeList-ColumnChooser (material.blue.light).png and b/apps/demos/testing/etalons/TreeList-ColumnChooser (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-ColumnHeaderFilter (material.blue.light).png b/apps/demos/testing/etalons/TreeList-ColumnHeaderFilter (material.blue.light).png
index f2c319c86a82..f550f0d3393e 100644
Binary files a/apps/demos/testing/etalons/TreeList-ColumnHeaderFilter (material.blue.light).png and b/apps/demos/testing/etalons/TreeList-ColumnHeaderFilter (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-CustomizeKeyboardNavigation (material.blue.light).png b/apps/demos/testing/etalons/TreeList-CustomizeKeyboardNavigation (material.blue.light).png
index a59ad9b34693..810e5558db48 100644
Binary files a/apps/demos/testing/etalons/TreeList-CustomizeKeyboardNavigation (material.blue.light).png and b/apps/demos/testing/etalons/TreeList-CustomizeKeyboardNavigation (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-FilterModes (material.blue.light).png b/apps/demos/testing/etalons/TreeList-FilterModes (material.blue.light).png
index 5defdd1eba63..a1bc72c918b5 100644
Binary files a/apps/demos/testing/etalons/TreeList-FilterModes (material.blue.light).png and b/apps/demos/testing/etalons/TreeList-FilterModes (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-FilterPanel (material.blue.light).png b/apps/demos/testing/etalons/TreeList-FilterPanel (material.blue.light).png
index 29af98f0e8e0..78a4aeaafc1c 100644
Binary files a/apps/demos/testing/etalons/TreeList-FilterPanel (material.blue.light).png and b/apps/demos/testing/etalons/TreeList-FilterPanel (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-FilterRow (material.blue.light).png b/apps/demos/testing/etalons/TreeList-FilterRow (material.blue.light).png
index 23875f217d4b..22eb0cba82da 100644
Binary files a/apps/demos/testing/etalons/TreeList-FilterRow (material.blue.light).png and b/apps/demos/testing/etalons/TreeList-FilterRow (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-FixedAndStickyColumns (material.blue.light).png b/apps/demos/testing/etalons/TreeList-FixedAndStickyColumns (material.blue.light).png
index d2c8e70675cb..916d97449389 100644
Binary files a/apps/demos/testing/etalons/TreeList-FixedAndStickyColumns (material.blue.light).png and b/apps/demos/testing/etalons/TreeList-FixedAndStickyColumns (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-FocusedRow (material.blue.light).png b/apps/demos/testing/etalons/TreeList-FocusedRow (material.blue.light).png
index ba520217ad53..7c070a1849b4 100644
Binary files a/apps/demos/testing/etalons/TreeList-FocusedRow (material.blue.light).png and b/apps/demos/testing/etalons/TreeList-FocusedRow (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-FormEditing (material.blue.light).png b/apps/demos/testing/etalons/TreeList-FormEditing (material.blue.light).png
index df37a7ef740c..35376525a60e 100644
Binary files a/apps/demos/testing/etalons/TreeList-FormEditing (material.blue.light).png and b/apps/demos/testing/etalons/TreeList-FormEditing (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-KeyboardNavigation (material.blue.light).png b/apps/demos/testing/etalons/TreeList-KeyboardNavigation (material.blue.light).png
index 078abcf08aee..48b928b3e3c0 100644
Binary files a/apps/demos/testing/etalons/TreeList-KeyboardNavigation (material.blue.light).png and b/apps/demos/testing/etalons/TreeList-KeyboardNavigation (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-LoadDataOnDemand (material.blue.light).png b/apps/demos/testing/etalons/TreeList-LoadDataOnDemand (material.blue.light).png
index 29947d54795a..a05033405539 100644
Binary files a/apps/demos/testing/etalons/TreeList-LoadDataOnDemand (material.blue.light).png and b/apps/demos/testing/etalons/TreeList-LoadDataOnDemand (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-LocalReordering (material.blue.light).png b/apps/demos/testing/etalons/TreeList-LocalReordering (material.blue.light).png
index 7de3c21f6c0a..6e3df4de6051 100644
Binary files a/apps/demos/testing/etalons/TreeList-LocalReordering (material.blue.light).png and b/apps/demos/testing/etalons/TreeList-LocalReordering (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-MultipleRowSelection (material.blue.light).png b/apps/demos/testing/etalons/TreeList-MultipleRowSelection (material.blue.light).png
index f54d08437de9..68cc56bc2ba6 100644
Binary files a/apps/demos/testing/etalons/TreeList-MultipleRowSelection (material.blue.light).png and b/apps/demos/testing/etalons/TreeList-MultipleRowSelection (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-MultipleSorting (material.blue.light).png b/apps/demos/testing/etalons/TreeList-MultipleSorting (material.blue.light).png
index 33d6ac14ca41..877de86a32c1 100644
Binary files a/apps/demos/testing/etalons/TreeList-MultipleSorting (material.blue.light).png and b/apps/demos/testing/etalons/TreeList-MultipleSorting (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-Overview (material.blue.light).png b/apps/demos/testing/etalons/TreeList-Overview (material.blue.light).png
index 4428dd7ed44c..976de075dbe0 100644
Binary files a/apps/demos/testing/etalons/TreeList-Overview (material.blue.light).png and b/apps/demos/testing/etalons/TreeList-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-Paging (material.blue.light).png b/apps/demos/testing/etalons/TreeList-Paging (material.blue.light).png
index f9d885c94182..1957c6de4788 100644
Binary files a/apps/demos/testing/etalons/TreeList-Paging (material.blue.light).png and b/apps/demos/testing/etalons/TreeList-Paging (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-PopupEditing (material.blue.light).png b/apps/demos/testing/etalons/TreeList-PopupEditing (material.blue.light).png
index 2df758e2316c..de436c195379 100644
Binary files a/apps/demos/testing/etalons/TreeList-PopupEditing (material.blue.light).png and b/apps/demos/testing/etalons/TreeList-PopupEditing (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-Reordering (material.blue.light).png b/apps/demos/testing/etalons/TreeList-Reordering (material.blue.light).png
index 8b1d3a665d01..a82a5b90448f 100644
Binary files a/apps/demos/testing/etalons/TreeList-Reordering (material.blue.light).png and b/apps/demos/testing/etalons/TreeList-Reordering (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-Resizing (material.blue.light).png b/apps/demos/testing/etalons/TreeList-Resizing (material.blue.light).png
index 03f25b6f280c..542c6190f5dc 100644
Binary files a/apps/demos/testing/etalons/TreeList-Resizing (material.blue.light).png and b/apps/demos/testing/etalons/TreeList-Resizing (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-RowEditing (material.blue.light).png b/apps/demos/testing/etalons/TreeList-RowEditing (material.blue.light).png
index 23f83f3004ad..82126a78486d 100644
Binary files a/apps/demos/testing/etalons/TreeList-RowEditing (material.blue.light).png and b/apps/demos/testing/etalons/TreeList-RowEditing (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-SearchPanel (material.blue.light).png b/apps/demos/testing/etalons/TreeList-SearchPanel (material.blue.light).png
index 39324e85edcf..846e12ae1471 100644
Binary files a/apps/demos/testing/etalons/TreeList-SearchPanel (material.blue.light).png and b/apps/demos/testing/etalons/TreeList-SearchPanel (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-SimpleArrayHierarchicalStructure (material.blue.light).png b/apps/demos/testing/etalons/TreeList-SimpleArrayHierarchicalStructure (material.blue.light).png
index 8d9a08ce456f..1f7492ade62b 100644
Binary files a/apps/demos/testing/etalons/TreeList-SimpleArrayHierarchicalStructure (material.blue.light).png and b/apps/demos/testing/etalons/TreeList-SimpleArrayHierarchicalStructure (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-SimpleArrayPlainStructure (material.blue.light).png b/apps/demos/testing/etalons/TreeList-SimpleArrayPlainStructure (material.blue.light).png
index 8d9a08ce456f..1f7492ade62b 100644
Binary files a/apps/demos/testing/etalons/TreeList-SimpleArrayPlainStructure (material.blue.light).png and b/apps/demos/testing/etalons/TreeList-SimpleArrayPlainStructure (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-SingleRowSelection (material.blue.light).png b/apps/demos/testing/etalons/TreeList-SingleRowSelection (material.blue.light).png
index cd876a45af3d..600661ba0f06 100644
Binary files a/apps/demos/testing/etalons/TreeList-SingleRowSelection (material.blue.light).png and b/apps/demos/testing/etalons/TreeList-SingleRowSelection (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-StatePersistence (material.blue.light).png b/apps/demos/testing/etalons/TreeList-StatePersistence (material.blue.light).png
index 8081ffa156dd..1d3d5fa90b25 100644
Binary files a/apps/demos/testing/etalons/TreeList-StatePersistence (material.blue.light).png and b/apps/demos/testing/etalons/TreeList-StatePersistence (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-WebAPIService (material.blue.light).png b/apps/demos/testing/etalons/TreeList-WebAPIService (material.blue.light).png
index 679e50102dde..cb98ae0f05f4 100644
Binary files a/apps/demos/testing/etalons/TreeList-WebAPIService (material.blue.light).png and b/apps/demos/testing/etalons/TreeList-WebAPIService (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeView-ContextMenuIntegration (material.blue.light).png b/apps/demos/testing/etalons/TreeView-ContextMenuIntegration (material.blue.light).png
index 22ea8a7cce60..ae24c083f9e6 100644
Binary files a/apps/demos/testing/etalons/TreeView-ContextMenuIntegration (material.blue.light).png and b/apps/demos/testing/etalons/TreeView-ContextMenuIntegration (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeView-DragAndDropHierarchicalDataStructure (material.blue.light).png b/apps/demos/testing/etalons/TreeView-DragAndDropHierarchicalDataStructure (material.blue.light).png
index c44619a3c475..8ae45a8228ba 100644
Binary files a/apps/demos/testing/etalons/TreeView-DragAndDropHierarchicalDataStructure (material.blue.light).png and b/apps/demos/testing/etalons/TreeView-DragAndDropHierarchicalDataStructure (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeView-DragAndDropPlainDataStructure (material.blue.light).png b/apps/demos/testing/etalons/TreeView-DragAndDropPlainDataStructure (material.blue.light).png
index 045630035ec7..333240f45397 100644
Binary files a/apps/demos/testing/etalons/TreeView-DragAndDropPlainDataStructure (material.blue.light).png and b/apps/demos/testing/etalons/TreeView-DragAndDropPlainDataStructure (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeView-FlatDataStructure (material.blue.light).png b/apps/demos/testing/etalons/TreeView-FlatDataStructure (material.blue.light).png
index e175d6bba61b..912b0195d306 100644
Binary files a/apps/demos/testing/etalons/TreeView-FlatDataStructure (material.blue.light).png and b/apps/demos/testing/etalons/TreeView-FlatDataStructure (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeView-HierarchicalDataStructure (material.blue.light).png b/apps/demos/testing/etalons/TreeView-HierarchicalDataStructure (material.blue.light).png
index 43a3a0ccbc66..09b0bef20f30 100644
Binary files a/apps/demos/testing/etalons/TreeView-HierarchicalDataStructure (material.blue.light).png and b/apps/demos/testing/etalons/TreeView-HierarchicalDataStructure (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeView-ItemSelectionAndCustomization (material.blue.light).png b/apps/demos/testing/etalons/TreeView-ItemSelectionAndCustomization (material.blue.light).png
index 9c806984ff9c..93656571cb31 100644
Binary files a/apps/demos/testing/etalons/TreeView-ItemSelectionAndCustomization (material.blue.light).png and b/apps/demos/testing/etalons/TreeView-ItemSelectionAndCustomization (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeView-LoadDataOnDemand (material.blue.light).png b/apps/demos/testing/etalons/TreeView-LoadDataOnDemand (material.blue.light).png
index ff0add413692..efba30b114d2 100644
Binary files a/apps/demos/testing/etalons/TreeView-LoadDataOnDemand (material.blue.light).png and b/apps/demos/testing/etalons/TreeView-LoadDataOnDemand (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeView-TreeViewWithSearchBar (material.blue.light).png b/apps/demos/testing/etalons/TreeView-TreeViewWithSearchBar (material.blue.light).png
index 59bb2b464647..d83c96294bf4 100644
Binary files a/apps/demos/testing/etalons/TreeView-TreeViewWithSearchBar (material.blue.light).png and b/apps/demos/testing/etalons/TreeView-TreeViewWithSearchBar (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeView-VirtualMode (material.blue.light).png b/apps/demos/testing/etalons/TreeView-VirtualMode (material.blue.light).png
index 7c09259bbf1c..6748809fa23e 100644
Binary files a/apps/demos/testing/etalons/TreeView-VirtualMode (material.blue.light).png and b/apps/demos/testing/etalons/TreeView-VirtualMode (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Validation-Overview (material.blue.light).png b/apps/demos/testing/etalons/Validation-Overview (material.blue.light).png
index 7fdf2fcafa11..b5d834656fca 100644
Binary files a/apps/demos/testing/etalons/Validation-Overview (material.blue.light).png and b/apps/demos/testing/etalons/Validation-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/VectorMap-BubbleMarkers (material.blue.light).png b/apps/demos/testing/etalons/VectorMap-BubbleMarkers (material.blue.light).png
index ecb6e2d21810..a99ed20c919f 100644
Binary files a/apps/demos/testing/etalons/VectorMap-BubbleMarkers (material.blue.light).png and b/apps/demos/testing/etalons/VectorMap-BubbleMarkers (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/VectorMap-CustomAnnotations (material.blue.light).png b/apps/demos/testing/etalons/VectorMap-CustomAnnotations (material.blue.light).png
index 04190486a81f..c8006e9eabe6 100644
Binary files a/apps/demos/testing/etalons/VectorMap-CustomAnnotations (material.blue.light).png and b/apps/demos/testing/etalons/VectorMap-CustomAnnotations (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/VectorMap-CustomMapData (material.blue.light).png b/apps/demos/testing/etalons/VectorMap-CustomMapData (material.blue.light).png
index fc99fb568f66..14941845cec2 100644
Binary files a/apps/demos/testing/etalons/VectorMap-CustomMapData (material.blue.light).png and b/apps/demos/testing/etalons/VectorMap-CustomMapData (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/VectorMap-CustomProjection (material.blue.light).png b/apps/demos/testing/etalons/VectorMap-CustomProjection (material.blue.light).png
index 4a4db6f628a4..0c853b891295 100644
Binary files a/apps/demos/testing/etalons/VectorMap-CustomProjection (material.blue.light).png and b/apps/demos/testing/etalons/VectorMap-CustomProjection (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/VectorMap-DynamicViewport (material.blue.light).png b/apps/demos/testing/etalons/VectorMap-DynamicViewport (material.blue.light).png
index 86b14e791cdd..970502d99e24 100644
Binary files a/apps/demos/testing/etalons/VectorMap-DynamicViewport (material.blue.light).png and b/apps/demos/testing/etalons/VectorMap-DynamicViewport (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/VectorMap-FloorPlan (material.blue.light).png b/apps/demos/testing/etalons/VectorMap-FloorPlan (material.blue.light).png
index 8d3b7f8fb1cc..a244fd101949 100644
Binary files a/apps/demos/testing/etalons/VectorMap-FloorPlan (material.blue.light).png and b/apps/demos/testing/etalons/VectorMap-FloorPlan (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/VectorMap-ImageMarkers (material.blue.light).png b/apps/demos/testing/etalons/VectorMap-ImageMarkers (material.blue.light).png
index 708713911483..9d2e4202fd1d 100644
Binary files a/apps/demos/testing/etalons/VectorMap-ImageMarkers (material.blue.light).png and b/apps/demos/testing/etalons/VectorMap-ImageMarkers (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/VectorMap-Legend (material.blue.light).png b/apps/demos/testing/etalons/VectorMap-Legend (material.blue.light).png
index 83c776db5c53..1804681838fb 100644
Binary files a/apps/demos/testing/etalons/VectorMap-Legend (material.blue.light).png and b/apps/demos/testing/etalons/VectorMap-Legend (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/VectorMap-MultipleLayers (material.blue.light).png b/apps/demos/testing/etalons/VectorMap-MultipleLayers (material.blue.light).png
index e4c8922f46bc..42a689201384 100644
Binary files a/apps/demos/testing/etalons/VectorMap-MultipleLayers (material.blue.light).png and b/apps/demos/testing/etalons/VectorMap-MultipleLayers (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/VectorMap-Overview (material.blue.light).png b/apps/demos/testing/etalons/VectorMap-Overview (material.blue.light).png
index f6b1d25d9e7c..8d7fbddc32b2 100644
Binary files a/apps/demos/testing/etalons/VectorMap-Overview (material.blue.light).png and b/apps/demos/testing/etalons/VectorMap-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/VectorMap-Palette (material.blue.light).png b/apps/demos/testing/etalons/VectorMap-Palette (material.blue.light).png
index 0b7056c93e5f..31586e6c2ed1 100644
Binary files a/apps/demos/testing/etalons/VectorMap-Palette (material.blue.light).png and b/apps/demos/testing/etalons/VectorMap-Palette (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/VectorMap-PieMarkers (material.blue.light).png b/apps/demos/testing/etalons/VectorMap-PieMarkers (material.blue.light).png
index ed3674c8fe70..0094995dea9d 100644
Binary files a/apps/demos/testing/etalons/VectorMap-PieMarkers (material.blue.light).png and b/apps/demos/testing/etalons/VectorMap-PieMarkers (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/VectorMap-TooltipsCustomization (material.blue.light).png b/apps/demos/testing/etalons/VectorMap-TooltipsCustomization (material.blue.light).png
index 9d7f328927de..9e2dd7c5680f 100644
Binary files a/apps/demos/testing/etalons/VectorMap-TooltipsCustomization (material.blue.light).png and b/apps/demos/testing/etalons/VectorMap-TooltipsCustomization (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/VectorMap-ZoomingAndCentering (material.blue.light).png b/apps/demos/testing/etalons/VectorMap-ZoomingAndCentering (material.blue.light).png
index 16b82ac090d3..ab150939e4e2 100644
Binary files a/apps/demos/testing/etalons/VectorMap-ZoomingAndCentering (material.blue.light).png and b/apps/demos/testing/etalons/VectorMap-ZoomingAndCentering (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/fileuploader/etalons/custom_dropzone_valid_file (fluent.blue.light).png b/apps/demos/testing/widgets/fileuploader/etalons/custom_dropzone_valid_file (fluent.blue.light).png
index edf95b56dd8c..4c85a5984381 100644
Binary files a/apps/demos/testing/widgets/fileuploader/etalons/custom_dropzone_valid_file (fluent.blue.light).png and b/apps/demos/testing/widgets/fileuploader/etalons/custom_dropzone_valid_file (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/scheduler/etalons/scheduler_CellTemplates_view_dates_changed (fluent.blue.light).png b/apps/demos/testing/widgets/scheduler/etalons/scheduler_CellTemplates_view_dates_changed (fluent.blue.light).png
index bca22454be6b..18653c64a37d 100644
Binary files a/apps/demos/testing/widgets/scheduler/etalons/scheduler_CellTemplates_view_dates_changed (fluent.blue.light).png and b/apps/demos/testing/widgets/scheduler/etalons/scheduler_CellTemplates_view_dates_changed (fluent.blue.light).png differ
diff --git a/apps/demos/utils/visual-tests/helpers/theme-utils.js b/apps/demos/utils/visual-tests/helpers/theme-utils.js
index c6e157a0dbe7..68a80b019501 100644
--- a/apps/demos/utils/visual-tests/helpers/theme-utils.js
+++ b/apps/demos/utils/visual-tests/helpers/theme-utils.js
@@ -6,6 +6,8 @@ export const THEME = {
 
 export const DEFAULT_THEME_NAME = THEME.fluent;
 
+export const isMaterial = (theme = process.env.THEME) => theme?.startsWith('material');
+export const isFluent = (theme = process.env.THEME) => theme?.startsWith('fluent');
 export const getThemePostfix = (theme = DEFAULT_THEME_NAME) => ` (${theme})`;
 
 export const getScreenshotName = (baseName, theme) => {
diff --git a/apps/demos/utils/visual-tests/matrix-test-helper.ts b/apps/demos/utils/visual-tests/matrix-test-helper.ts
index 90ad4640be4d..dee8184e687e 100644
--- a/apps/demos/utils/visual-tests/matrix-test-helper.ts
+++ b/apps/demos/utils/visual-tests/matrix-test-helper.ts
@@ -266,13 +266,9 @@ export function shouldRunTestExplicitly(demoUrl) {
   );
 }
 
-export function runTestAtPage(test, demoUrl, shouldSkipJsError) {
+export function runTestAtPage(test, demoUrl) {
   let executor = test;
 
-  if (shouldSkipJsError) {
-    test.skipJsErrors();
-  }
-
   if (settings.explicitTests) {
     // eslint-disable-next-line no-only-tests/no-only-tests
     executor = shouldRunTestExplicitly(demoUrl) ? test.only : executor = test.skip;
diff --git a/e2e/testcafe-devextreme/helpers/accessibility/test.ts b/e2e/testcafe-devextreme/helpers/accessibility/test.ts
index b0ee0f853879..7108b304554c 100644
--- a/e2e/testcafe-devextreme/helpers/accessibility/test.ts
+++ b/e2e/testcafe-devextreme/helpers/accessibility/test.ts
@@ -30,6 +30,8 @@ const getOptionConfigurations = <TComponentOptions = unknown>(
   return generateOptionMatrix(options);
 };
 
+const componentsWithDisabledColorContrastIssues: WidgetName[] = ['dxTagBox', 'dxFileUploader', 'dxDateRangeBox'];
+
 export const testAccessibility = <TComponentOptions = unknown>(
   configuration: Configuration<TComponentOptions>,
 ): void => {
@@ -45,7 +47,23 @@ export const testAccessibility = <TComponentOptions = unknown>(
 
   optionConfigurations.forEach((optionConfiguration, index) => {
     test(`${component}: test with axe #${index}`, async (t) => {
-      await a11yCheck(t, a11yCheckConfig, selector, optionConfiguration);
+      const currentA11yCheckConfig = { ...a11yCheckConfig } as A11yCheckOptions;
+      const isComponentDisabled = (optionConfiguration as Record<string, unknown>).disabled;
+      const shouldIgnoreColorContrast = componentsWithDisabledColorContrastIssues
+        .includes(component) && isComponentDisabled;
+
+      if (shouldIgnoreColorContrast) {
+        if (currentA11yCheckConfig.runOnly === 'color-contrast') {
+          return;
+        }
+
+        currentA11yCheckConfig.rules = {
+          ...currentA11yCheckConfig.rules,
+          'color-contrast': { enabled: false },
+        };
+      }
+
+      await a11yCheck(t, currentA11yCheckConfig, selector, optionConfiguration);
     }).before(async (t) => {
       await createWidget(
         component,
diff --git a/e2e/testcafe-devextreme/helpers/accessibility/utils.ts b/e2e/testcafe-devextreme/helpers/accessibility/utils.ts
index b813b4e27343..2a1bd13f6556 100644
--- a/e2e/testcafe-devextreme/helpers/accessibility/utils.ts
+++ b/e2e/testcafe-devextreme/helpers/accessibility/utils.ts
@@ -6,11 +6,7 @@ export interface A11yCheckOptions extends RunOptions {
   runOnly?: any;
 }
 
-const defaultOptions = {
-  rules: {
-    'color-contrast': { enabled: false },
-  },
-};
+const defaultOptions = {};
 
 const createFullReport = (results, configuration) => {
   let report = createReport(results.violations);
diff --git a/e2e/testcafe-devextreme/helpers/themeUtils.ts b/e2e/testcafe-devextreme/helpers/themeUtils.ts
index 69043ae40557..9e8e738e159b 100644
--- a/e2e/testcafe-devextreme/helpers/themeUtils.ts
+++ b/e2e/testcafe-devextreme/helpers/themeUtils.ts
@@ -16,9 +16,9 @@ export const getCurrentTheme = async (t: TestController): Promise<string> => {
   return currentTheme;
 };
 
-export const isMaterial = (): boolean => process.env.theme === 'material.blue.light';
+export const isMaterial = (): boolean => (process.env.theme ?? defaultThemeName).startsWith('material');
 
-export const isFluent = (): boolean => process.env.theme === 'fluent.blue.light';
+export const isFluent = (): boolean => (process.env.theme ?? defaultThemeName).startsWith('fluent');
 
 export const isMaterialBased = (): boolean => isMaterial() || isFluent();
 
diff --git a/e2e/testcafe-devextreme/tests/accessibility/accordion.ts b/e2e/testcafe-devextreme/tests/accessibility/accordion.ts
index c1311d78d016..2575f56b8bba 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/accordion.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/accordion.ts
@@ -33,10 +33,7 @@ const created = async (t: TestController, optionConfiguration): Promise<void> =>
     .click(itemTitle.nth(1));
 };
 
-const a11yCheckConfig = {
-  // NOTE: color-contrast issues
-  rules: { 'color-contrast': { enabled: false } },
-};
+const a11yCheckConfig = {};
 
 const configuration: Configuration = {
   component: 'dxAccordion',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/actionSheet.ts b/e2e/testcafe-devextreme/tests/accessibility/actionSheet.ts
index ff8a1743caf9..4c06e53028e1 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/actionSheet.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/actionSheet.ts
@@ -2,7 +2,6 @@ import { Properties } from 'devextreme/ui/action_sheet.d';
 import url from '../../helpers/getPageUrl';
 import { testAccessibility, Configuration } from '../../helpers/accessibility/test';
 import { Options } from '../../helpers/generateOptionMatrix';
-import { isMaterial, isMaterialBased } from '../../helpers/themeUtils';
 
 fixture.disablePageReloads`Accessibility`
   .page(url(__dirname, '../container.html'));
@@ -22,15 +21,8 @@ const options: Options<Properties> = {
   showCancelButton: [true, false],
 };
 
-const a11yCheckConfig = isMaterialBased() ? {
-  // NOTE: color-contrast issues in Material
-  runOnly: isMaterial() ? '' : 'color-contrast',
-  rules: { 'color-contrast': { enabled: !isMaterial() } },
-} : {};
-
 const configuration: Configuration = {
   component: 'dxActionSheet',
-  a11yCheckConfig,
   options,
 };
 
diff --git a/e2e/testcafe-devextreme/tests/accessibility/autocomplete.ts b/e2e/testcafe-devextreme/tests/accessibility/autocomplete.ts
index c15e8a80003c..667881bf5fc7 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/autocomplete.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/autocomplete.ts
@@ -25,12 +25,7 @@ const buttonsOptions: Options<Properties> = {
   inputAttr: [{ 'aria-label': 'aria-label' }],
 };
 
-const a11yCheckConfig = {
-  rules: {
-    // NOTE: color-contrast issues
-    'color-contrast': { enabled: false },
-  },
-};
+const a11yCheckConfig = {};
 
 const deferredConfiguration: Configuration = {
   component: 'dxAutocomplete',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/button.ts b/e2e/testcafe-devextreme/tests/accessibility/button.ts
index 88e97d728f9a..747458e8ccbd 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/button.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/button.ts
@@ -35,8 +35,6 @@ const created = async (t: TestController, optionConfiguration): Promise<void> =>
 
 const a11yCheckConfig = {
   rules: {
-    // NOTE: color-contrast issues
-    'color-contrast': { enabled: false },
     // NOTE: false positive in isMaterialBased
     'nested-interactive': { enabled: !isMaterialBased() },
   },
diff --git a/e2e/testcafe-devextreme/tests/accessibility/buttonGroup.ts b/e2e/testcafe-devextreme/tests/accessibility/buttonGroup.ts
index 0ca1bd095df1..a58d14513c1d 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/buttonGroup.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/buttonGroup.ts
@@ -24,12 +24,7 @@ const optionsWithSimpleItems: Options<Properties> = {
   // type: ['danger', 'default', 'normal', 'success'],
 };
 
-const a11yCheckConfig = {
-  rules: {
-    // NOTE: color-contrast issues
-    'color-contrast': { enabled: false },
-  },
-};
+const a11yCheckConfig = {};
 
 const configurationWithSimpleItems: Configuration = {
   component: 'dxButtonGroup',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/calendar.ts b/e2e/testcafe-devextreme/tests/accessibility/calendar.ts
index 622661b3404a..2df289f6e7f6 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/calendar.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/calendar.ts
@@ -17,8 +17,6 @@ const options: Options<Properties> = {
 
 const a11yCheckConfig = {
   rules: {
-    // NOTE: color-contrast issues
-    'color-contrast': { enabled: false },
     // NOTE: empty-table-header issues
     'empty-table-header': { enabled: false },
   },
diff --git a/e2e/testcafe-devextreme/tests/accessibility/cardView/columnChooser.ts b/e2e/testcafe-devextreme/tests/accessibility/cardView/columnChooser.ts
index 30e97be9be06..aa07ad0e3385 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/cardView/columnChooser.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/cardView/columnChooser.ts
@@ -40,9 +40,7 @@ test('column chooser in \'dragAndDrop\' mode', async (t) => {
 
   await cardView.apiShowColumnChooser();
 
-  const a11yCheckConfig = {
-    rules: { 'color-contrast': { enabled: false } },
-  };
+  const a11yCheckConfig = {};
   await a11yCheck(t, a11yCheckConfig, CARD_VIEW_SELECTOR);
 }).before(async () => createWidget('dxCardView', {
   columnChooser: {
diff --git a/e2e/testcafe-devextreme/tests/accessibility/cardView/columnSortable.ts b/e2e/testcafe-devextreme/tests/accessibility/cardView/columnSortable.ts
index bd3c171c340c..e5cbb0ab1af5 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/cardView/columnSortable.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/cardView/columnSortable.ts
@@ -16,6 +16,7 @@ test('headerPanel dragging column when it has sorting and headerFilter', async (
   await triggerDragStart(columnElement);
 
   const a11yCheckConfig = {
+    // False positive: contrast rules do not apply to disabled elements
     rules: { 'color-contrast': { enabled: false } },
   };
   await a11yCheck(t, a11yCheckConfig, CARD_VIEW_SELECTOR);
@@ -46,9 +47,7 @@ test('dropzone appear in headerPanel when drag from columnChooser a column', asy
   await triggerDragEnd(columnElement);
   await t.wait(500); // wait for dropzone animation to finish
 
-  const a11yCheckConfig = {
-    rules: { 'color-contrast': { enabled: false } },
-  };
+  const a11yCheckConfig = {};
   await a11yCheck(t, a11yCheckConfig, CARD_VIEW_SELECTOR);
 }).before(async () => createWidget('dxCardView', {
   allowColumnReordering: true,
diff --git a/e2e/testcafe-devextreme/tests/accessibility/cardView/filterPanel.ts b/e2e/testcafe-devextreme/tests/accessibility/cardView/filterPanel.ts
index ae8378d826e8..3aaf15a59996 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/cardView/filterPanel.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/cardView/filterPanel.ts
@@ -14,9 +14,7 @@ test('FilterPanel and FilterBuilderPopup', async (t) => {
 
   await t.click(cardView.getFilterPanel().getIconFilter().element);
 
-  const a11yCheckConfig = {
-    rules: { 'color-contrast': { enabled: false } },
-  };
+  const a11yCheckConfig = {};
   await a11yCheck(t, a11yCheckConfig, CARD_VIEW_SELECTOR);
 }).before(async () => {
   await createWidget('dxCardView', {
diff --git a/e2e/testcafe-devextreme/tests/accessibility/cardView/headerPanel.ts b/e2e/testcafe-devextreme/tests/accessibility/cardView/headerPanel.ts
index 4752c3acdb13..085903d4bd14 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/cardView/headerPanel.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/cardView/headerPanel.ts
@@ -8,9 +8,7 @@ fixture.disablePageReloads`CardView - HeaderPanel`
 
 const CARD_VIEW_SELECTOR = '#container';
 const HEADER_PANEL_SELECTOR = `${CARD_VIEW_SELECTOR} .dx-cardview-headers`;
-const a11yCheckConfig = {
-  rules: { 'color-contrast': { enabled: false } },
-};
+const a11yCheckConfig = {};
 
 test('Default render', async (t) => {
   await a11yCheck(t, a11yCheckConfig, HEADER_PANEL_SELECTOR);
diff --git a/e2e/testcafe-devextreme/tests/accessibility/cardView/sortable.ts b/e2e/testcafe-devextreme/tests/accessibility/cardView/sortable.ts
index b714e4744441..1895e778ba65 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/cardView/sortable.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/cardView/sortable.ts
@@ -16,6 +16,7 @@ const DRAG_MOVE_Y_COEFFICIENT = 1;
 
 const a11yCheckConfig = {
   rules: {
+    // False positive: contrast rules do not apply to disabled elements
     'color-contrast': { enabled: false },
     // NOTE: Draggable template is outside the role="main" landmark
     region: { enabled: false },
diff --git a/e2e/testcafe-devextreme/tests/accessibility/chat.ts b/e2e/testcafe-devextreme/tests/accessibility/chat.ts
index 2e8272555794..2f995fce5b6c 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/chat.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/chat.ts
@@ -41,10 +41,7 @@ const created = async (t: TestController): Promise<void> => {
   await t.pressKey('tab');
 };
 
-const a11yCheckConfig = {
-  // NOTE: color-contrast issues
-  rules: { 'color-contrast': { enabled: false } },
-};
+const a11yCheckConfig = {};
 
 const configuration: Configuration = {
   component: 'dxChat',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/checkBox.ts b/e2e/testcafe-devextreme/tests/accessibility/checkBox.ts
index 4431d2100ebf..271c4a62ed73 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/checkBox.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/checkBox.ts
@@ -12,10 +12,7 @@ const options: Options<Properties> = {
   elementAttr: [{ 'aria-label': 'Checked' }],
 };
 
-const a11yCheckConfig = {
-  // NOTE: color-contrast issues
-  rules: { 'color-contrast': { enabled: false } },
-};
+const a11yCheckConfig = {};
 
 const availabilityConfiguration: Configuration = {
   component: 'dxCheckBox',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/colorBox.ts b/e2e/testcafe-devextreme/tests/accessibility/colorBox.ts
index 2f5b76457932..042aef8d32da 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/colorBox.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/colorBox.ts
@@ -20,12 +20,7 @@ const buttonsOptions: Options<Properties> = {
   inputAttr: [{ 'aria-label': 'aria-label' }],
 };
 
-const a11yCheckConfig = {
-  rules: {
-    // NOTE: color-contrast issues
-    'color-contrast': { enabled: false },
-  },
-};
+const a11yCheckConfig = {};
 
 const deferredConfiguration: Configuration = {
   component: 'dxColorBox',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/contextMenu.ts b/e2e/testcafe-devextreme/tests/accessibility/contextMenu.ts
index 00fe9713362f..54daf4d25f1c 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/contextMenu.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/contextMenu.ts
@@ -29,10 +29,7 @@ const created = async (t: TestController): Promise<void> => {
   await t.click(contextMenu.items.nth(0));
 };
 
-const a11yCheckConfig = {
-  // NOTE: color-contrast issues
-  rules: { 'color-contrast': { enabled: false } },
-};
+const a11yCheckConfig = {};
 
 const configuration: Configuration = {
   component: 'dxContextMenu',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/dataGrid/common.ts b/e2e/testcafe-devextreme/tests/accessibility/dataGrid/common.ts
index 13d638637460..2159b791977c 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/dataGrid/common.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/dataGrid/common.ts
@@ -5,14 +5,13 @@ import { a11yCheck } from '../../../helpers/accessibility/utils';
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
 import { getData } from '../../dataGrid/helpers/generateDataSourceData';
-import { isFluent } from '../../../helpers/themeUtils';
 
 fixture.disablePageReloads`DataGrid - Common`
   .page(url(__dirname, '../../container.html'));
 
 const DATA_GRID_SELECTOR = '#container';
 
-const a11yCheckConfig = isFluent() ? {} : { runOnly: 'color-contrast' };
+const a11yCheckConfig = {};
 
 test('Grid without config', async (t) => {
   const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
@@ -303,9 +302,6 @@ test('Filter panel - popup with filter builder', async (t) => {
   await a11yCheck(t, {
     ...a11yCheckConfig,
     runOnly: '',
-    rules: {
-      'color-contrast': { enabled: false },
-    },
   });
 }).before(async () => createWidget('dxDataGrid', {
   dataSource: getData(10, 5),
@@ -355,9 +351,6 @@ test('Search panel - highlight', async (t) => {
   await a11yCheck(t, {
     ...a11yCheckConfig,
     runOnly: '',
-    rules: {
-      'color-contrast': { enabled: false },
-    },
   }, DATA_GRID_SELECTOR);
 }).before(async () => createWidget('dxDataGrid', {
   dataSource: getData(10, 5),
@@ -483,7 +476,7 @@ test('Column chooser with the \'dragAndDrop\' mode', async (t) => {
     .expect(columnChooser.isOpened)
     .ok();
 
-  await a11yCheck(t, a11yCheckConfig);
+  await a11yCheck(t);
 }).before(async () => createWidget('dxDataGrid', {
   dataSource: getData(10, 7),
   keyExpr: 'field_0',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/dateBox.ts b/e2e/testcafe-devextreme/tests/accessibility/dateBox.ts
index 503934397e15..9ec72d442972 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/dateBox.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/dateBox.ts
@@ -48,12 +48,7 @@ const created = async (t: TestController, optionConfiguration): Promise<void> =>
   })();
 };
 
-const a11yCheckConfig = {
-  rules: {
-    // NOTE: color-contrast issues
-    'color-contrast': { enabled: false },
-  },
-};
+const a11yCheckConfig = {};
 
 const deferredConfiguration: Configuration = {
   component: 'dxDateBox',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/dateRangeBox.ts b/e2e/testcafe-devextreme/tests/accessibility/dateRangeBox.ts
index edc87098ec73..26e597d41fdc 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/dateRangeBox.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/dateRangeBox.ts
@@ -26,12 +26,7 @@ const commonOptions: Options<Properties> = {
   startDatePlaceholder: [undefined, 'startDatePlaceholder'],
 };
 
-const a11yCheckConfig = {
-  rules: {
-    // NOTE: color-contrast issues
-    'color-contrast': { enabled: false },
-  },
-};
+const a11yCheckConfig = {};
 
 const deferredConfiguration: Configuration = {
   component: 'dxDateRangeBox',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/drawer.ts b/e2e/testcafe-devextreme/tests/accessibility/drawer.ts
index e9665cd9a8cd..87a83f19753e 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/drawer.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/drawer.ts
@@ -17,10 +17,7 @@ const options: Options<Properties> = {
   }],
 };
 
-const a11yCheckConfig = {
-  // NOTE: color-contrast issues
-  rules: { 'color-contrast': { enabled: false } },
-};
+const a11yCheckConfig = {};
 
 const configuration: Configuration = {
   component: 'dxDrawer',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/dropDownBox.ts b/e2e/testcafe-devextreme/tests/accessibility/dropDownBox.ts
index 4b2cdf2ee092..bd643564e22b 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/dropDownBox.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/dropDownBox.ts
@@ -22,10 +22,7 @@ const buttonsOptions: Options<Properties> = {
   inputAttr: [{ 'aria-label': 'DropDownBox' }],
 };
 
-const a11yCheckConfig = {
-  // NOTE: color-contrast issues
-  rules: { 'color-contrast': { enabled: false } },
-};
+const a11yCheckConfig = {};
 
 const deferredConfiguration: Configuration = {
   component: 'dxDropDownBox',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/dropDownButton.ts b/e2e/testcafe-devextreme/tests/accessibility/dropDownButton.ts
index c76a940dc20e..0483bcb0d574 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/dropDownButton.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/dropDownButton.ts
@@ -18,12 +18,7 @@ const options: Options<Properties> = {
   disabled: [true, false],
 };
 
-const a11yCheckConfig = {
-  rules: {
-    // NOTE: color-contrast issues
-    'color-contrast': { enabled: false },
-  },
-};
+const a11yCheckConfig = {};
 
 const noSplitButtonConfiguration: Configuration = {
   component: 'dxDropDownButton',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/fileUploader.ts b/e2e/testcafe-devextreme/tests/accessibility/fileUploader.ts
index 6589640ca21a..ce25e50bd9be 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/fileUploader.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/fileUploader.ts
@@ -25,10 +25,7 @@ const options: Options<Properties> = {
   inputAttr: [{ 'aria-label': 'aria-label' }],
 };
 
-const a11yCheckConfig = {
-  // NOTE: color-contrast issues
-  rules: { 'color-contrast': { enabled: false } },
-};
+const a11yCheckConfig = {};
 
 const availabilityConfiguration: Configuration = {
   component: 'dxFileUploader',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/filterBuilder.ts b/e2e/testcafe-devextreme/tests/accessibility/filterBuilder.ts
index 1a269d419357..d3cb04a3208b 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/filterBuilder.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/filterBuilder.ts
@@ -90,16 +90,9 @@ elements.forEach(({
         .expect(ariaControls)
         .eql(popupId);
 
-      await a11yCheck(
-        t,
-        {
-          rules: {
-            // NOTE: color-contrast issues
-            'color-contrast': { enabled: false },
-          },
-        },
-        '#parentContainer',
-      );
+      const a11yCheckConfig = {};
+
+      await a11yCheck(t, a11yCheckConfig, '#parentContainer');
     }
   }).before(async () => {
     await createWidget('dxFilterBuilder', {
diff --git a/e2e/testcafe-devextreme/tests/accessibility/floatingActionButton.ts b/e2e/testcafe-devextreme/tests/accessibility/floatingActionButton.ts
index 9fe613f9a65f..ac4644cac6c3 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/floatingActionButton.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/floatingActionButton.ts
@@ -11,10 +11,7 @@ const options: Options<Properties> = {
   icon: [undefined, 'save'],
 };
 
-const a11yCheckConfig = {
-  // NOTE: color-contrast issues
-  rules: { 'color-contrast': { enabled: false } },
-};
+const a11yCheckConfig = {};
 
 const configuration: Configuration = {
   component: 'dxSpeedDialAction',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/form.ts b/e2e/testcafe-devextreme/tests/accessibility/form.ts
index c4e8ab7b143f..efd36882f937 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/form.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/form.ts
@@ -37,10 +37,7 @@ const requiredFieldsOptions: Options<Properties> = {
   items: [items],
 };
 
-const a11yCheckConfig = {
-  // NOTE: color-contrast issues
-  rules: { 'color-contrast': { enabled: false } },
-};
+const a11yCheckConfig = {};
 
 const configuration: Configuration = {
   component: 'dxForm',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/gallery.ts b/e2e/testcafe-devextreme/tests/accessibility/gallery.ts
index f09cf5c43579..b900716ef31c 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/gallery.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/gallery.ts
@@ -30,10 +30,7 @@ const options: Options<Properties> = {
   showNavButtons: [true, false],
 };
 
-const a11yCheckConfig = {
-  // NOTE: color-contrast issues
-  rules: { 'color-contrast': { enabled: false } },
-};
+const a11yCheckConfig = {};
 
 const configuration: Configuration = {
   component: 'dxGallery',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/htmlEditor.ts b/e2e/testcafe-devextreme/tests/accessibility/htmlEditor.ts
index 2eeeb3c5d303..612d4c145957 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/htmlEditor.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/htmlEditor.ts
@@ -32,10 +32,7 @@ const created = async (t: TestController): Promise<void> => {
   await t.click(Selector(defaultSelector));
 };
 
-const a11yCheckConfig = {
-  // NOTE: color-contrast issues
-  rules: { 'color-contrast': { enabled: false } },
-};
+const a11yCheckConfig = {};
 
 const configuration: Configuration = {
   component: 'dxHtmlEditor',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/list.ts b/e2e/testcafe-devextreme/tests/accessibility/list.ts
index 10552707ffcf..1d3b7815f57f 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/list.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/list.ts
@@ -68,12 +68,7 @@ const optionsWithSimpleItems: Options<Properties> = {
   selectionMode: ['all', 'multiple', 'none', 'single'],
 };
 
-const a11yCheckConfig = {
-  rules: {
-    // NOTE: color-contrast issues
-    'color-contrast': { enabled: false },
-  },
-};
+const a11yCheckConfig = {};
 
 const groupedConfiguration: Configuration = {
   component: 'dxList',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/loadIndicator.ts b/e2e/testcafe-devextreme/tests/accessibility/loadIndicator.ts
index 83a2cd685ea3..edd6842a013b 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/loadIndicator.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/loadIndicator.ts
@@ -11,10 +11,7 @@ const options: Options<Properties> = {
   width: [undefined, 40],
 };
 
-const a11yCheckConfig = {
-  // NOTE: color-contrast issues
-  rules: { 'color-contrast': { enabled: false } },
-};
+const a11yCheckConfig = {};
 
 const configuration: Configuration = {
   component: 'dxLoadIndicator',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/loadPanel.ts b/e2e/testcafe-devextreme/tests/accessibility/loadPanel.ts
index 020e7fc541b3..ac3480576584 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/loadPanel.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/loadPanel.ts
@@ -14,10 +14,7 @@ const options: Options<Properties> = {
   delay: [undefined, 3000],
 };
 
-const a11yCheckConfig = {
-  // NOTE: color-contrast issues
-  rules: { 'color-contrast': { enabled: false } },
-};
+const a11yCheckConfig = {};
 
 const configuration: Configuration = {
   component: 'dxLoadPanel',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/lookup.ts b/e2e/testcafe-devextreme/tests/accessibility/lookup.ts
index 20d579a5ec6d..a6fcbc84adea 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/lookup.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/lookup.ts
@@ -16,12 +16,7 @@ const options: Options<Properties> = {
   inputAttr: [{ 'aria-label': 'aria-label' }],
 };
 
-const a11yCheckConfig = {
-  rules: {
-    // NOTE: color-contrast issues
-    'color-contrast': { enabled: false },
-  },
-};
+const a11yCheckConfig = {};
 
 const deferredConfiguration: Configuration = {
   component: 'dxLookup',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/menu.ts b/e2e/testcafe-devextreme/tests/accessibility/menu.ts
index c3e8e4025c78..2e7011c5529d 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/menu.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/menu.ts
@@ -62,10 +62,7 @@ const created = async (t: TestController, optionConfiguration): Promise<void> =>
     .pressKey('right');
 };
 
-const a11yCheckConfig = {
-  // NOTE: color-contrast issues
-  rules: { 'color-contrast': { enabled: false } },
-};
+const a11yCheckConfig = {};
 
 const configuration: Configuration = {
   component: 'dxMenu',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/multiView.ts b/e2e/testcafe-devextreme/tests/accessibility/multiView.ts
index 8b464adad72d..5afdfce54568 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/multiView.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/multiView.ts
@@ -16,10 +16,7 @@ const options: Options<Properties> = {
   focusStateEnabled: [true],
 };
 
-const a11yCheckConfig = {
-  // NOTE: color-contrast issues
-  rules: { 'color-contrast': { enabled: false } },
-};
+const a11yCheckConfig = {};
 
 const configuration: Configuration = {
   component: 'dxMultiView',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/numberBox.ts b/e2e/testcafe-devextreme/tests/accessibility/numberBox.ts
index 4f529e2f2d3a..e9d3f93e2c50 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/numberBox.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/numberBox.ts
@@ -18,10 +18,7 @@ const options: Options<Properties> = {
   inputAttr: [{ 'aria-label': 'aria-label' }],
 };
 
-const a11yCheckConfig = {
-  // NOTE: color-contrast issues
-  rules: { 'color-contrast': { enabled: false } },
-};
+const a11yCheckConfig = {};
 
 const configuration: Configuration = {
   component: 'dxNumberBox',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/pagination.ts b/e2e/testcafe-devextreme/tests/accessibility/pagination.ts
index 08276bc727e4..bc9ae107269f 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/pagination.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/pagination.ts
@@ -14,10 +14,7 @@ const options: Options<any> = {
   showPageSizeSelector: [true, false],
 };
 
-const a11yCheckConfig = {
-  // NOTE:  color-contrast issues
-  rules: { 'color-contrast': { enabled: false } },
-};
+const a11yCheckConfig = {};
 
 const configuration: Configuration = {
   component: 'dxPagination',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/popover.ts b/e2e/testcafe-devextreme/tests/accessibility/popover.ts
index 7c7c88ee3da5..bd5f24f5c997 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/popover.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/popover.ts
@@ -2,7 +2,6 @@ import { Properties } from 'devextreme/ui/popover.d';
 import url from '../../helpers/getPageUrl';
 import { defaultSelector, testAccessibility, Configuration } from '../../helpers/accessibility/test';
 import { Options } from '../../helpers/generateOptionMatrix';
-import { isMaterial, isMaterialBased } from '../../helpers/themeUtils';
 
 fixture.disablePageReloads`Accessibility`
   .page(url(__dirname, '../container.html'));
@@ -29,15 +28,8 @@ const options: Options<Properties> = {
   ],
 };
 
-const a11yCheckConfig = isMaterialBased() ? {
-  // NOTE: color-contrast issues in Material
-  runOnly: isMaterial() ? '' : 'color-contrast',
-  rules: { 'color-contrast': { enabled: !isMaterial() } },
-} : {};
-
 const configuration: Configuration = {
   component: 'dxPopover',
-  a11yCheckConfig,
   options,
 };
 
diff --git a/e2e/testcafe-devextreme/tests/accessibility/popup.ts b/e2e/testcafe-devextreme/tests/accessibility/popup.ts
index ed4aeaef7de8..d7497a27c69d 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/popup.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/popup.ts
@@ -2,7 +2,6 @@ import { ToolbarItem, Properties } from 'devextreme/ui/popup.d';
 import url from '../../helpers/getPageUrl';
 import { testAccessibility, Configuration } from '../../helpers/accessibility/test';
 import { Options } from '../../helpers/generateOptionMatrix';
-import { isMaterial, isMaterialBased } from '../../helpers/themeUtils';
 
 fixture.disablePageReloads`Accessibility`
   .page(url(__dirname, '../container.html'));
@@ -31,15 +30,8 @@ const options: Options<Properties> = {
   height: [280],
 };
 
-const a11yCheckConfig = isMaterialBased() ? {
-  // NOTE: color-contrast issues in Material
-  runOnly: isMaterial() ? '' : 'color-contrast',
-  rules: { 'color-contrast': { enabled: !isMaterial() } },
-} : {};
-
 const visibleConfiguration: Configuration = {
   component: 'dxPopup',
-  a11yCheckConfig,
   options: {
     ...options,
     visible: [true],
@@ -55,7 +47,6 @@ testAccessibility(visibleConfiguration);
 
 const invisibleConfiguration: Configuration = {
   component: 'dxPopup',
-  a11yCheckConfig,
   options: {
     ...options,
     visible: [false],
diff --git a/e2e/testcafe-devextreme/tests/accessibility/progressBar.ts b/e2e/testcafe-devextreme/tests/accessibility/progressBar.ts
index af3010386f7b..017a736a68dc 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/progressBar.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/progressBar.ts
@@ -15,14 +15,8 @@ const options: Options<Properties> = {
   elementAttr: [{ 'aria-label': 'Progress Bar' }],
 };
 
-const a11yCheckConfig = {
-  // NOTE: color-contrast issues
-  rules: { 'color-contrast': { enabled: false } },
-};
-
 const configuration: Configuration = {
   component: 'dxProgressBar',
-  a11yCheckConfig,
   options,
 };
 
diff --git a/e2e/testcafe-devextreme/tests/accessibility/radioGroup.ts b/e2e/testcafe-devextreme/tests/accessibility/radioGroup.ts
index 8c0b4f595082..a162949fe75c 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/radioGroup.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/radioGroup.ts
@@ -15,10 +15,7 @@ const options: Options<Properties> = {
   layout: ['horizontal', 'vertical'],
 };
 
-const a11yCheckConfig = {
-  // NOTE: color-contrast issues
-  rules: { 'color-contrast': { enabled: false } },
-};
+const a11yCheckConfig = {};
 
 const configuration: Configuration = {
   component: 'dxRadioGroup',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/rangeSlider.ts b/e2e/testcafe-devextreme/tests/accessibility/rangeSlider.ts
index bfa8445afbf8..d3bf13760899 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/rangeSlider.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/rangeSlider.ts
@@ -34,10 +34,7 @@ const options: Options<Properties> = {
   ],
 };
 
-const a11yCheckConfig = {
-  // NOTE: color-contrast issues
-  rules: { 'color-contrast': { enabled: false } },
-};
+const a11yCheckConfig = {};
 
 const configuration: Configuration = {
   component: 'dxRangeSlider',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/scheduler/appointment.ts b/e2e/testcafe-devextreme/tests/accessibility/scheduler/appointment.ts
index 5ff4de317aac..b9533979d68c 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/scheduler/appointment.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/scheduler/appointment.ts
@@ -2,7 +2,7 @@ import Scheduler from 'devextreme-testcafe-models/scheduler';
 import { a11yCheck } from '../../../helpers/accessibility/utils';
 import { createWidget } from '../../../helpers/createWidget';
 import url from '../../../helpers/getPageUrl';
-import { checkOptions } from './axe_options';
+import { a11yCheckConfig } from './axe_options';
 
 fixture.disablePageReloads`Scheduler - Appointment`
   .page(url(__dirname, '../../container.html'));
@@ -26,7 +26,7 @@ const appointmentTemplate = ({ appointmentData }) => `<div>${appointmentData.tex
       .expect(await appointment.hasAriaDescription())
       .notOk();
 
-    await a11yCheck(t, checkOptions, '#container');
+    await a11yCheck(t, a11yCheckConfig, '#container');
   }).before(async () => {
     await createWidget('dxScheduler', {
       timeZone: 'UTC',
@@ -46,7 +46,7 @@ const appointmentTemplate = ({ appointmentData }) => `<div>${appointmentData.tex
       .expect(await appointment.hasAriaDescription())
       .notOk();
 
-    await a11yCheck(t, checkOptions, '#container');
+    await a11yCheck(t, a11yCheckConfig, '#container');
   }).before(async () => {
     await createWidget('dxScheduler', {
       timeZone: 'UTC',
@@ -67,7 +67,7 @@ const appointmentTemplate = ({ appointmentData }) => `<div>${appointmentData.tex
       .expect(await appointment.getAriaDescription())
       .eql('Group: resource1; Group 1: resource1');
 
-    await a11yCheck(t, checkOptions, '#container');
+    await a11yCheck(t, a11yCheckConfig, '#container');
   }).before(async () => {
     await createWidget('dxScheduler', {
       timeZone: 'UTC',
@@ -101,7 +101,7 @@ const appointmentTemplate = ({ appointmentData }) => `<div>${appointmentData.tex
       .expect(await appointment.getAriaDescription())
       .eql('Group: resource1; Group 1: resource1');
 
-    await a11yCheck(t, checkOptions, '#container');
+    await a11yCheck(t, a11yCheckConfig, '#container');
   }).before(async () => {
     await createWidget('dxScheduler', {
       timeZone: 'UTC',
@@ -136,7 +136,7 @@ const appointmentTemplate = ({ appointmentData }) => `<div>${appointmentData.tex
       .expect(await appointment.getAriaDescription())
       .eql('Group: resource11, resource21; Group 1: resource11; Group 2: resource21, resource22');
 
-    await a11yCheck(t, checkOptions, '#container');
+    await a11yCheck(t, a11yCheckConfig, '#container');
   }).before(async () => {
     await createWidget('dxScheduler', {
       timeZone: 'UTC',
@@ -180,7 +180,7 @@ const appointmentTemplate = ({ appointmentData }) => `<div>${appointmentData.tex
       .expect(recurrenceIcon.getAttribute('aria-label'))
       .eql('Recurring appointment');
 
-    await a11yCheck(t, checkOptions, '#container');
+    await a11yCheck(t, a11yCheckConfig, '#container');
   }).before(async () => {
     await createWidget('dxScheduler', {
       timeZone: 'America/Los_Angeles',
@@ -210,7 +210,7 @@ const appointmentTemplate = ({ appointmentData }) => `<div>${appointmentData.tex
       .expect(appt.element.getAttribute('aria-activedescendant'))
       .eql(null);
 
-    await a11yCheck(t, checkOptions, '#container');
+    await a11yCheck(t, a11yCheckConfig, '#container');
   }).before(async () => {
     await createWidget('dxScheduler', {
       timeZone: 'America/Los_Angeles',
@@ -266,7 +266,7 @@ const appointmentTemplate = ({ appointmentData }) => `<div>${appointmentData.tex
     await t.expect(apptLabels[1]).eql(labels[1]);
     await t.expect(apptLabels[2]).eql(labels[2]);
 
-    await a11yCheck(t, checkOptions, '#container');
+    await a11yCheck(t, a11yCheckConfig, '#container');
   }).before(async () => {
     await createWidget('dxScheduler', {
       timeZone: 'UTC',
@@ -336,7 +336,7 @@ test('appointments & collector buttons can be navigated', async (t) => {
     scheduler.appointmentTooltip.element.count,
   ).eql(1);
 
-  await a11yCheck(t, checkOptions, '#container');
+  await a11yCheck(t, a11yCheckConfig, '#container');
 }).before(async () => {
   await createWidget('dxScheduler', {
     dataSource: [
@@ -387,7 +387,7 @@ test('Scheduler a11y: Disabled time ranges are not supported', async (t) => {
     .expect(actualNextAriaLabel)
     .eql(expectedAriaLabels.next);
 
-  await a11yCheck(t, checkOptions, '#container');
+  await a11yCheck(t, a11yCheckConfig, '#container');
 }).before(async () => {
   await createWidget('dxScheduler', {
     dataSource: [
@@ -410,7 +410,7 @@ test('Scheduler a11y: appointments does not have info about reccurence', async (
     .expect(recurrenceIcon.getAttribute('aria-label'))
     .eql('Recurring appointment');
 
-  await a11yCheck(t, checkOptions, '#container');
+  await a11yCheck(t, a11yCheckConfig, '#container');
 }).before(async () => {
   await createWidget('dxScheduler', {
     timeZone: 'America/Los_Angeles',
@@ -440,7 +440,7 @@ test('Scheduler a11y: Appointment collector button doesn\'t have info about date
     .expect(schedulerCollector.element().getAttribute('aria-roledescription'))
     .contains(dateText);
 
-  await a11yCheck(t, checkOptions, '#container');
+  await a11yCheck(t, a11yCheckConfig, '#container');
 }).before(async () => {
   await createWidget('dxScheduler', {
     timeZone: 'America/Los_Angeles',
@@ -479,7 +479,7 @@ test('appointment aria label should contain date with right timezone', async (t)
     .expect(appointment.getAriaLabel())
     .eql('Install New Router in Dev Room: March 29, 2021, 2:30 PM - 3:30 PM');
 
-  await a11yCheck(t, checkOptions, '#container');
+  await a11yCheck(t, a11yCheckConfig, '#container');
 }).before(async () => {
   await createWidget('dxScheduler', {
     timeZone: 'America/Los_Angeles',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/scheduler/appointmentForm.ts b/e2e/testcafe-devextreme/tests/accessibility/scheduler/appointmentForm.ts
index cdd2ffc89e79..c12790199d4e 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/scheduler/appointmentForm.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/scheduler/appointmentForm.ts
@@ -2,7 +2,7 @@ import Scheduler from 'devextreme-testcafe-models/scheduler';
 import { a11yCheck } from '../../../helpers/accessibility/utils';
 import { createWidget } from '../../../helpers/createWidget';
 import url from '../../../helpers/getPageUrl';
-import { checkOptions } from './axe_options';
+import { a11yCheckConfig } from './axe_options';
 
 fixture.disablePageReloads`Scheduler - Appointment Form`
   .page(url(__dirname, '../../container.html'));
@@ -17,7 +17,7 @@ test('Appointment Form with axe', async (t) => {
   await t.doubleClick(appointment.element);
   await t.wait(300);
 
-  await a11yCheck(t, checkOptions, APPOINTMENT_POPUP_CONTENT_SELECTOR);
+  await a11yCheck(t, a11yCheckConfig, APPOINTMENT_POPUP_CONTENT_SELECTOR);
 }).before(async () => {
   await createWidget('dxScheduler', {
     timeZone: 'UTC',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/scheduler/axe_options.ts b/e2e/testcafe-devextreme/tests/accessibility/scheduler/axe_options.ts
index 5489ea69e9b9..f0717745a987 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/scheduler/axe_options.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/scheduler/axe_options.ts
@@ -1,5 +1 @@
-export const checkOptions = {
-  rules: {
-    'color-contrast': { enabled: false },
-  },
-};
+export const a11yCheckConfig = {};
diff --git a/e2e/testcafe-devextreme/tests/accessibility/scheduler/legacyPopup.ts b/e2e/testcafe-devextreme/tests/accessibility/scheduler/legacyPopup.ts
index aea79d7a4639..eab6c756557a 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/scheduler/legacyPopup.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/scheduler/legacyPopup.ts
@@ -6,11 +6,7 @@ import { a11yCheck } from '../../../helpers/accessibility/utils';
 fixture.disablePageReloads`Scheduler - Popup`
   .page(url(__dirname, '../../container.html'));
 
-const checkOptions = {
-  rules: {
-    'color-contrast': { enabled: false },
-  },
-};
+const a11yCheckConfig = {};
 
 test('Scheduler edit appointment is accessible', async (t) => {
   const scheduler = new Scheduler('#container');
@@ -18,7 +14,7 @@ test('Scheduler edit appointment is accessible', async (t) => {
   await t.doubleClick(scheduler.getAppointmentByIndex(0).element());
   await t.expect(scheduler.legacyAppointmentPopup.isVisible()).ok();
 
-  await a11yCheck(t, checkOptions, '#container');
+  await a11yCheck(t, a11yCheckConfig, '#container');
 }).before(async () => {
   await createWidget('dxScheduler', {
     timeZone: 'America/Los_Angeles',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/scheduler/scheduler.ts b/e2e/testcafe-devextreme/tests/accessibility/scheduler/scheduler.ts
index 4c79d422dcf5..072aafdf3f48 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/scheduler/scheduler.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/scheduler/scheduler.ts
@@ -2,7 +2,7 @@ import Scheduler from 'devextreme-testcafe-models/scheduler';
 import { a11yCheck } from '../../../helpers/accessibility/utils';
 import { createWidget } from '../../../helpers/createWidget';
 import url from '../../../helpers/getPageUrl';
-import { checkOptions } from './axe_options';
+import { a11yCheckConfig } from './axe_options';
 
 fixture.disablePageReloads`Scheduler - a11y`
   .page(url(__dirname, '../../container.html'));
@@ -20,7 +20,7 @@ test('Scheduler should have right aria attributes after view changed', async (t)
   await t.expect(scheduler.element.getAttribute('aria-label')).contains('Scheduler. Week view');
   await t.expect(scheduler.getGeneralStatusContainer().textContent).contains('Scheduler. Week view');
 
-  await a11yCheck(t, checkOptions, '#container');
+  await a11yCheck(t, a11yCheckConfig, '#container');
 }).before(async () => {
   await createWidget('dxScheduler', {
     dataSource: [],
@@ -40,7 +40,7 @@ test('Scheduler table elements have right aria attributes', async (t) => {
     ).eql('true');
   }
 
-  await a11yCheck(t, checkOptions, '#container');
+  await a11yCheck(t, a11yCheckConfig, '#container');
 }).before(async () => {
   await createWidget('dxScheduler', {
     dataSource: [],
@@ -52,7 +52,7 @@ test('Scheduler table elements have right aria attributes', async (t) => {
   'agenda', 'day', 'month', 'timelineDay', 'timelineMonth', 'timelineWeek', 'timelineWorkWeek', 'week', 'workWeek',
 ].forEach((currentView) => {
   test(`Scheduler has no axe errors on view ${currentView}`, async (t) => {
-    await a11yCheck(t, checkOptions, '#container');
+    await a11yCheck(t, a11yCheckConfig, '#container');
   }).before(async () => {
     await createWidget('dxScheduler', {
       timeZone: 'America/Los_Angeles',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/selectBox.ts b/e2e/testcafe-devextreme/tests/accessibility/selectBox.ts
index 90c191f2f3ab..0293c88754ec 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/selectBox.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/selectBox.ts
@@ -30,12 +30,7 @@ const buttonsOptions: Options<Properties> = {
   inputAttr: [{ 'aria-label': 'aria-label' }],
 };
 
-const a11yCheckConfig = {
-  rules: {
-    // NOTE: color-contrast issues
-    'color-contrast': { enabled: false },
-  },
-};
+const a11yCheckConfig = {};
 
 const deferredConfiguration: Configuration = {
   component: 'dxSelectBox',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/slider.ts b/e2e/testcafe-devextreme/tests/accessibility/slider.ts
index 0f49ace32244..575d809df379 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/slider.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/slider.ts
@@ -31,10 +31,7 @@ const options: Options<Properties> = {
   ],
 };
 
-const a11yCheckConfig = {
-  // NOTE: color-contrast issues
-  rules: { 'color-contrast': { enabled: false } },
-};
+const a11yCheckConfig = {};
 
 const availabilityConfiguration: Configuration = {
   component: 'dxSlider',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/switch.ts b/e2e/testcafe-devextreme/tests/accessibility/switch.ts
index 6ec58bd4745c..efae089dd43d 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/switch.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/switch.ts
@@ -13,12 +13,7 @@ const options: Options<Properties> = {
   name: ['', 'name'],
 };
 
-const a11yCheckConfig = {
-  // NOTE: color-contrast issues
-  rules: {
-    'color-contrast': { enabled: false },
-  },
-};
+const a11yCheckConfig = {};
 
 const configuration: Configuration = {
   component: 'dxSwitch',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/tabPanel.ts b/e2e/testcafe-devextreme/tests/accessibility/tabPanel.ts
index e6927533a9ca..7f57de8d8d36 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/tabPanel.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/tabPanel.ts
@@ -2,7 +2,6 @@ import { Item, Properties } from 'devextreme/ui/tab_panel.d';
 import url from '../../helpers/getPageUrl';
 import { testAccessibility, Configuration } from '../../helpers/accessibility/test';
 import { Options } from '../../helpers/generateOptionMatrix';
-import { isMaterial, isMaterialBased } from '../../helpers/themeUtils';
 
 fixture.disablePageReloads`Accessibility`
   .page(url(__dirname, '../container.html'));
@@ -28,15 +27,8 @@ const options: Options<Properties> = {
   // stylingMode: ['primary', 'secondary'],
 };
 
-const a11yCheckConfig = isMaterialBased() ? {
-  // NOTE: color-contrast issues in Material
-  runOnly: isMaterial() ? '' : 'color-contrast',
-  rules: { 'color-contrast': { enabled: !isMaterial() } },
-} : {};
-
 const configuration: Configuration = {
   component: 'dxTabPanel',
-  a11yCheckConfig,
   options,
 };
 
diff --git a/e2e/testcafe-devextreme/tests/accessibility/tabs.ts b/e2e/testcafe-devextreme/tests/accessibility/tabs.ts
index 657b7be6a425..9000466ab201 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/tabs.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/tabs.ts
@@ -2,7 +2,6 @@ import { Item, Properties } from 'devextreme/ui/tabs.d';
 import url from '../../helpers/getPageUrl';
 import { testAccessibility, Configuration } from '../../helpers/accessibility/test';
 import { Options } from '../../helpers/generateOptionMatrix';
-import { isMaterial, isMaterialBased } from '../../helpers/themeUtils';
 
 fixture.disablePageReloads`Accessibility`
   .page(url(__dirname, '../container.html'));
@@ -33,15 +32,8 @@ const created = async (t: TestController): Promise<void> => {
   await t.pressKey('tab');
 };
 
-const a11yCheckConfig = isMaterialBased() ? {
-  // NOTE: color-contrast issues in Material
-  runOnly: isMaterial() ? '' : 'color-contrast',
-  rules: { 'color-contrast': { enabled: !isMaterial() } },
-} : {};
-
 const configuration: Configuration = {
   component: 'dxTabs',
-  a11yCheckConfig,
   options,
   created,
 };
diff --git a/e2e/testcafe-devextreme/tests/accessibility/tagBox.ts b/e2e/testcafe-devextreme/tests/accessibility/tagBox.ts
index 46825e9e3a76..9febedca2f45 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/tagBox.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/tagBox.ts
@@ -55,10 +55,7 @@ const buttonsCreated = async (t: TestController): Promise<void> => {
     .wait(TIME_TO_WAIT);
 };
 
-const a11yCheckConfig = {
-  // NOTE: color-contrast issues
-  rules: { 'color-contrast': { enabled: false } },
-};
+const a11yCheckConfig = {};
 
 const configuration: Configuration = {
   component: 'dxTagBox',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/textArea.ts b/e2e/testcafe-devextreme/tests/accessibility/textArea.ts
index bdd3004d0c7a..a04661a468d0 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/textArea.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/textArea.ts
@@ -16,10 +16,7 @@ const options: Options<Properties> = {
   inputAttr: [{ 'aria-label': 'aria-label' }],
 };
 
-const a11yCheckConfig = {
-  // NOTE: color-contrast issues
-  rules: { 'color-contrast': { enabled: false } },
-};
+const a11yCheckConfig = {};
 
 const availabilityConfiguration: Configuration = {
   component: 'dxTextArea',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/textBox.ts b/e2e/testcafe-devextreme/tests/accessibility/textBox.ts
index 6aaf9b67677a..4e0e602f9907 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/textBox.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/textBox.ts
@@ -16,10 +16,7 @@ const options: Options<Properties> = {
   inputAttr: [{ 'aria-label': 'aria-label' }],
 };
 
-const a11yCheckConfig = {
-  // NOTE: color-contrast issues
-  rules: { 'color-contrast': { enabled: false } },
-};
+const a11yCheckConfig = {};
 
 const availabilityConfiguration: Configuration = {
   component: 'dxTextBox',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/tileView.ts b/e2e/testcafe-devextreme/tests/accessibility/tileView.ts
index 1ea8372fbcef..15d5f5a5243f 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/tileView.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/tileView.ts
@@ -15,13 +15,7 @@ const created = async (t: TestController): Promise<void> => {
   await t.pressKey('tab');
 };
 
-const a11yCheckConfig = {
-  rules: {
-    'color-contrast': {
-      enabled: false,
-    },
-  },
-};
+const a11yCheckConfig = {};
 
 const configuration: Configuration = {
   component: 'dxTileView',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/toast.ts b/e2e/testcafe-devextreme/tests/accessibility/toast.ts
index 61f7f3782c70..6131dfbc9a12 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/toast.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/toast.ts
@@ -12,10 +12,7 @@ const options: Options<Properties> = {
   type: ['custom', 'error', 'info', 'success', 'warning'],
 };
 
-const a11yCheckConfig = {
-  // NOTE: color-contrast issues
-  rules: { 'color-contrast': { enabled: false } },
-};
+const a11yCheckConfig = {};
 
 const configuration: Configuration = {
   component: 'dxToast',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/toolbar.ts b/e2e/testcafe-devextreme/tests/accessibility/toolbar.ts
index a7818b52f20f..45dd9745b13a 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/toolbar.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/toolbar.ts
@@ -37,10 +37,7 @@ const created = async (t: TestController, optionConfiguration): Promise<void> =>
     .click(overflowMenu.element);
 };
 
-const a11yCheckConfig = {
-  // NOTE: color-contrast issues
-  rules: { 'color-contrast': { enabled: false } },
-};
+const a11yCheckConfig = {};
 
 const configuration: Configuration = {
   component: 'dxToolbar',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/tooltip.ts b/e2e/testcafe-devextreme/tests/accessibility/tooltip.ts
index 04feb0029cc0..46a5e5e13ac5 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/tooltip.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/tooltip.ts
@@ -14,10 +14,7 @@ const options: Options<Properties> = {
   disabled: [true, false],
 };
 
-const a11yCheckConfig = {
-  // NOTE: color-contrast issues
-  rules: { 'color-contrast': { enabled: false } },
-};
+const a11yCheckConfig = {};
 
 const configuration: Configuration = {
   component: 'dxTooltip',
diff --git a/e2e/testcafe-devextreme/tests/accessibility/treeList/status.ts b/e2e/testcafe-devextreme/tests/accessibility/treeList/status.ts
index 31919c411116..c32631e1956f 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/treeList/status.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/treeList/status.ts
@@ -4,7 +4,6 @@ import TreeList from 'devextreme-testcafe-models/treeList';
 import { a11yCheck } from '../../../helpers/accessibility/utils';
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
-import { isMaterialBased } from '../../../helpers/themeUtils';
 
 fixture`TreeList - Status`
   .page(url(__dirname, '../../container.html'));
@@ -30,13 +29,12 @@ const DATA_SOURCE = [
 ];
 
 test('Accessibility: TreeList general status should contains correct text (rows expanded)', async (t) => {
-  const expectedStatusText = 'Tree list with 3 rows and 2 columns';
   const treeList = new TreeList('#container');
 
   const statusText = await treeList.getGeneralStatusContainer().textContent;
 
   await a11yCheck(t);
-  await t.expect(statusText).eql(isMaterialBased() ? '' : expectedStatusText);
+  await t.expect(statusText).eql('');
 }).before(async () => createWidget('dxTreeList', {
   dataSource: DATA_SOURCE,
   rootValue: -1,
@@ -47,13 +45,12 @@ test('Accessibility: TreeList general status should contains correct text (rows
 }));
 
 test('Accessibility: TreeList general status should contains correct text (rows collapsed)', async (t) => {
-  const expectedStatusText = 'Tree list with 1 rows and 2 columns';
   const treeList = new TreeList('#container');
 
   const statusText = await treeList.getGeneralStatusContainer().textContent;
 
   await a11yCheck(t);
-  await t.expect(statusText).eql(isMaterialBased() ? '' : expectedStatusText);
+  await t.expect(statusText).eql('');
 }).before(async () => createWidget('dxTreeList', {
   dataSource: DATA_SOURCE,
   rootValue: -1,
diff --git a/e2e/testcafe-devextreme/tests/accessibility/validationSummary.ts b/e2e/testcafe-devextreme/tests/accessibility/validationSummary.ts
index 1ead2cf57c14..54ddf1ef1060 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/validationSummary.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/validationSummary.ts
@@ -10,10 +10,7 @@ const options: Options<Properties> = {
   validationGroup: [undefined, 'validationGroup'],
 };
 
-const a11yCheckConfig = {
-  // NOTE: color-contrast issues
-  rules: { 'color-contrast': { enabled: false } },
-};
+const a11yCheckConfig = {};
 
 const configuration: Configuration = {
   component: 'dxValidationSummary',
diff --git a/e2e/testcafe-devextreme/tests/common/filterBuilder/etalons/value-editor-checkbox (material.blue.light).png b/e2e/testcafe-devextreme/tests/common/filterBuilder/etalons/value-editor-checkbox (material.blue.light).png
index 584982072d0b..310164bc773f 100644
Binary files a/e2e/testcafe-devextreme/tests/common/filterBuilder/etalons/value-editor-checkbox (material.blue.light).png and b/e2e/testcafe-devextreme/tests/common/filterBuilder/etalons/value-editor-checkbox (material.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/gantt/etalons/Gantt show dependencies (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/common/gantt/etalons/Gantt show dependencies (fluent.blue.light).png
index 8824dae9490a..862f42eec6d3 100644
Binary files a/e2e/testcafe-devextreme/tests/common/gantt/etalons/Gantt show dependencies (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/common/gantt/etalons/Gantt show dependencies (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/gantt/etalons/Gantt show resourced (material.blue.light).png b/e2e/testcafe-devextreme/tests/common/gantt/etalons/Gantt show resourced (material.blue.light).png
index 993f49b690eb..5cc458adbdd8 100644
Binary files a/e2e/testcafe-devextreme/tests/common/gantt/etalons/Gantt show resourced (material.blue.light).png and b/e2e/testcafe-devextreme/tests/common/gantt/etalons/Gantt show resourced (material.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_it-si_true-snb_true-spss_true (material.blue.light).png b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_it-si_true-snb_true-spss_true (material.blue.light).png
index c3a272b2ea96..a5ea30f5e3c2 100644
Binary files a/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_it-si_true-snb_true-spss_true (material.blue.light).png and b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_it-si_true-snb_true-spss_true (material.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/rows_do_not_overlap_data_fields_if_virtual_scrolling_enabled_T1210807 (material.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/rows_do_not_overlap_data_fields_if_virtual_scrolling_enabled_T1210807 (material.blue.light).png
index a12fd73dcfb9..1177b56aefb8 100644
Binary files a/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/rows_do_not_overlap_data_fields_if_virtual_scrolling_enabled_T1210807 (material.blue.light).png and b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/rows_do_not_overlap_data_fields_if_virtual_scrolling_enabled_T1210807 (material.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/empty_table_after_dnd (showRowGrandTotals=false) (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/empty_table_after_dnd (showRowGrandTotals=false) (fluent.blue.light).png
index 9d7edc5e1afb..558b91caae9e 100644
Binary files a/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/empty_table_after_dnd (showRowGrandTotals=false) (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/empty_table_after_dnd (showRowGrandTotals=false) (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/empty_table_after_dnd (showRowGrandTotals=true) (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/empty_table_after_dnd (showRowGrandTotals=true) (fluent.blue.light).png
index 947d4315cb22..48bce34b3dc7 100644
Binary files a/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/empty_table_after_dnd (showRowGrandTotals=true) (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/empty_table_after_dnd (showRowGrandTotals=true) (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/field-panel_column-action_dnd (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/field-panel_column-action_dnd (fluent.blue.light).png
index add81781b1df..d79b136ac705 100644
Binary files a/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/field-panel_column-action_dnd (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/field-panel_column-action_dnd (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/field-panel_column-field_dnd-first (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/field-panel_column-field_dnd-first (fluent.blue.light).png
index 26775d3869b9..dd9f29ed4cf8 100644
Binary files a/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/field-panel_column-field_dnd-first (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/field-panel_column-field_dnd-first (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/field-panel_data-action_dnd (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/field-panel_data-action_dnd (fluent.blue.light).png
index 2d8e2e8f2bf8..e0f8458507cd 100644
Binary files a/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/field-panel_data-action_dnd (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/field-panel_data-action_dnd (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/field-panel_row-action_dnd (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/field-panel_row-action_dnd (fluent.blue.light).png
index bdcfc01b20c8..aeff8803665d 100644
Binary files a/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/field-panel_row-action_dnd (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/field-panel_row-action_dnd (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1223168-expandable (material.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1223168-expandable (material.blue.light).png
index c0fbd10cc90f..11eb3ab57bd6 100644
Binary files a/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1223168-expandable (material.blue.light).png and b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1223168-expandable (material.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=multiple-rtl=false-content=multiple-line (material.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=multiple-rtl=false-content=multiple-line (material.blue.light).png
index dddfa53702d2..cfb3def51586 100644
Binary files a/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=multiple-rtl=false-content=multiple-line (material.blue.light).png and b/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=multiple-rtl=false-content=multiple-line (material.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=multiple-rtl=false-content=multiple-line (material.blue.light.compact).png b/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=multiple-rtl=false-content=multiple-line (material.blue.light.compact).png
index 27b5204bafee..965176ab2a46 100644
Binary files a/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=multiple-rtl=false-content=multiple-line (material.blue.light.compact).png and b/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=multiple-rtl=false-content=multiple-line (material.blue.light.compact).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=multiple-rtl=false-content=single-line (material.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=multiple-rtl=false-content=single-line (material.blue.light).png
index e76ea62aa98f..074048eab69e 100644
Binary files a/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=multiple-rtl=false-content=single-line (material.blue.light).png and b/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=multiple-rtl=false-content=single-line (material.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=multiple-rtl=false-content=single-line (material.blue.light.compact).png b/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=multiple-rtl=false-content=single-line (material.blue.light.compact).png
index 8666d50050b1..baca3ebb0858 100644
Binary files a/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=multiple-rtl=false-content=single-line (material.blue.light.compact).png and b/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=multiple-rtl=false-content=single-line (material.blue.light.compact).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=single-rtl=false-content=multiple-line (material.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=single-rtl=false-content=multiple-line (material.blue.light).png
index 7a99f78131ec..5a0b7e7c3342 100644
Binary files a/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=single-rtl=false-content=multiple-line (material.blue.light).png and b/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=single-rtl=false-content=multiple-line (material.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=single-rtl=false-content=multiple-line (material.blue.light.compact).png b/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=single-rtl=false-content=multiple-line (material.blue.light.compact).png
index 364759a42e6d..a77d967cfe0a 100644
Binary files a/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=single-rtl=false-content=multiple-line (material.blue.light.compact).png and b/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=single-rtl=false-content=multiple-line (material.blue.light.compact).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=single-rtl=false-content=single-line (material.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=single-rtl=false-content=single-line (material.blue.light).png
index bb8f1020ab88..2dcc32627bbe 100644
Binary files a/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=single-rtl=false-content=single-line (material.blue.light).png and b/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=single-rtl=false-content=single-line (material.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=single-rtl=false-content=single-line (material.blue.light.compact).png b/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=single-rtl=false-content=single-line (material.blue.light.compact).png
index 40ed84bd6a0e..4aeb83232beb 100644
Binary files a/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=single-rtl=false-content=single-line (material.blue.light.compact).png and b/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=single-rtl=false-content=single-line (material.blue.light.compact).png differ
diff --git a/e2e/testcafe-devextreme/tests/container-ai-integration.html b/e2e/testcafe-devextreme/tests/container-ai-integration.html
index aa112a3ad9fb..f02b899c362c 100644
--- a/e2e/testcafe-devextreme/tests/container-ai-integration.html
+++ b/e2e/testcafe-devextreme/tests/container-ai-integration.html
@@ -3,11 +3,13 @@
 <head>
     <title>TestCafe Tests Container</title>
 
-    <link rel="dx-theme" data-theme="fluent.blue.light" href="../../../packages/devextreme/artifacts/css/dx.fluent.blue.light.css" data-active="true">
+    <link rel="dx-theme" data-theme="fluent.blue.light" href="../../../packages/devextreme/artifacts/css/dx.fluent.blue.light.css" data-active="false">
+    <link rel="dx-theme" data-theme="fluent.blue.dark" href="../../../packages/devextreme/artifacts/css/dx.fluent.blue.dark.css" data-active="false">
     <link rel="dx-theme" data-theme="fluent.blue.light.compact" href="../../../packages/devextreme/artifacts/css/dx.fluent.blue.light.compact.css" data-active="false">
     <link rel="dx-theme" data-theme="generic.light" href="../../../packages/devextreme/artifacts/css/dx.light.css" data-active="false">
     <link rel="dx-theme" data-theme="generic.light.compact" href="../../../packages/devextreme/artifacts/css/dx.light.compact.css" data-active="false">
-    <link rel="dx-theme" data-theme="material.blue.light" href="../../../packages/devextreme/artifacts/css/dx.material.blue.light.css" data-active="false">
+    <link rel="dx-theme" data-theme="material.blue.light" href="../../../packages/devextreme/artifacts/css/dx.material.blue.light.css" data-active="true">
+    <link rel="dx-theme" data-theme="material.blue.dark" href="../../../packages/devextreme/artifacts/css/dx.material.blue.dark.css" data-active="false">
     <link rel="dx-theme" data-theme="material.blue.light.compact" href="../../../packages/devextreme/artifacts/css/dx.material.blue.light.compact.css" data-active="false">
  
     <script type="text/javascript" src="../../../packages/devextreme/artifacts/js/jquery.min.js"></script>
diff --git a/e2e/testcafe-devextreme/tests/container-extended.html b/e2e/testcafe-devextreme/tests/container-extended.html
index 1d1d25f4b6da..00ac27d41752 100644
--- a/e2e/testcafe-devextreme/tests/container-extended.html
+++ b/e2e/testcafe-devextreme/tests/container-extended.html
@@ -3,11 +3,13 @@
 <head>
     <title>TestCafe Tests Container</title>
 
-    <link rel="dx-theme" data-theme="fluent.blue.light" href="../../../packages/devextreme/artifacts/css/dx.fluent.blue.light.css" data-active="true">
+    <link rel="dx-theme" data-theme="fluent.blue.light" href="../../../packages/devextreme/artifacts/css/dx.fluent.blue.light.css" data-active="false">
+    <link rel="dx-theme" data-theme="fluent.blue.dark" href="../../../packages/devextreme/artifacts/css/dx.fluent.blue.dark.css" data-active="false">
     <link rel="dx-theme" data-theme="fluent.blue.light.compact" href="../../../packages/devextreme/artifacts/css/dx.fluent.blue.light.compact.css" data-active="false">
     <link rel="dx-theme" data-theme="generic.light" href="../../../packages/devextreme/artifacts/css/dx.light.css" data-active="false">
     <link rel="dx-theme" data-theme="generic.light.compact" href="../../../packages/devextreme/artifacts/css/dx.light.compact.css" data-active="false">
-    <link rel="dx-theme" data-theme="material.blue.light" href="../../../packages/devextreme/artifacts/css/dx.material.blue.light.css" data-active="false">
+    <link rel="dx-theme" data-theme="material.blue.light" href="../../../packages/devextreme/artifacts/css/dx.material.blue.light.css" data-active="true">
+    <link rel="dx-theme" data-theme="material.blue.dark" href="../../../packages/devextreme/artifacts/css/dx.material.blue.dark.css" data-active="false">
     <link rel="dx-theme" data-theme="material.blue.light.compact" href="../../../packages/devextreme/artifacts/css/dx.material.blue.light.compact.css" data-active="false">
     
     <link rel="stylesheet" type="text/css" href="../../../packages/devextreme/node_modules/devexpress-gantt/dist/dx-gantt.min.css"/>
diff --git a/e2e/testcafe-devextreme/tests/container.html b/e2e/testcafe-devextreme/tests/container.html
index 8e82c15a4804..21744e6fe26d 100644
--- a/e2e/testcafe-devextreme/tests/container.html
+++ b/e2e/testcafe-devextreme/tests/container.html
@@ -4,10 +4,12 @@
     <title>TestCafe Tests Container</title>
 
     <link rel="dx-theme" data-theme="fluent.blue.light" href="../../../packages/devextreme/artifacts/css/dx.fluent.blue.light.css" data-active="false">
+    <link rel="dx-theme" data-theme="fluent.blue.dark" href="../../../packages/devextreme/artifacts/css/dx.fluent.blue.dark.css" data-active="false">
     <link rel="dx-theme" data-theme="fluent.blue.light.compact" href="../../../packages/devextreme/artifacts/css/dx.fluent.blue.light.compact.css" data-active="false">
-    <link rel="dx-theme" data-theme="generic.light" href="../../../packages/devextreme/artifacts/css/dx.light.css" data-active="true">
+    <link rel="dx-theme" data-theme="generic.light" href="../../../packages/devextreme/artifacts/css/dx.light.css" data-active="false">
     <link rel="dx-theme" data-theme="generic.light.compact" href="../../../packages/devextreme/artifacts/css/dx.light.compact.css" data-active="false">
-    <link rel="dx-theme" data-theme="material.blue.light" href="../../../packages/devextreme/artifacts/css/dx.material.blue.light.css" data-active="false">
+    <link rel="dx-theme" data-theme="material.blue.light" href="../../../packages/devextreme/artifacts/css/dx.material.blue.light.css" data-active="true">
+    <link rel="dx-theme" data-theme="material.blue.dark" href="../../../packages/devextreme/artifacts/css/dx.material.blue.dark.css" data-active="false">
     <link rel="dx-theme" data-theme="material.blue.light.compact" href="../../../packages/devextreme/artifacts/css/dx.material.blue.light.compact.css" data-active="false">
     
     <script type="text/javascript" src="../../../packages/devextreme/artifacts/js/jquery.min.js"></script>
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/error-row (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/error-row (fluent.blue.light).png
index a2cfe7eafd49..d70e53b14fe3 100644
Binary files a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/error-row (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/error-row (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/scrolling.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/scrolling.ts
index 9cf12445ec6e..29155ceb9fed 100644
--- a/e2e/testcafe-devextreme/tests/dataGrid/common/scrolling.ts
+++ b/e2e/testcafe-devextreme/tests/dataGrid/common/scrolling.ts
@@ -1,7 +1,7 @@
 import { ClientFunction, Selector } from 'testcafe';
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import DataGrid from 'devextreme-testcafe-models/dataGrid';
-import { ClassNames as CLASS } from 'devextreme-testcafe-models/dataGrid/classNames';
+import { ClassNames } from 'devextreme-testcafe-models/dataGrid/classNames';
 import { insertStylesheetRulesToPage } from '../../../helpers/domUtils';
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
@@ -225,16 +225,27 @@ test('DataGrid should not reset its top scroll position after cell modification
   },
 }));
 
-test.meta({ unstable: true })('Ungrouping after grouping should work correctly if row rendering mode is virtual', async (t) => {
+// Theme dependent test
+test.meta({ runInTheme: Themes.fluentBlue })('Ungrouping after grouping should work correctly if row rendering mode is virtual', async (t) => {
   const dataGrid = new DataGrid('#container');
-
   await t.expect(dataGrid.isReady()).ok();
 
   // act
   await dataGrid.scrollTo(t, { top: 500 });
-  await dataGrid.apiColumnOption('group', 'groupIndex', 0);
   let visibleRows = await dataGrid.apiGetVisibleRows();
 
+  // assert
+  await t
+    .expect(visibleRows[0].rowType)
+    .eql('data')
+    .expect(visibleRows[0].key)
+    .notEql(1);
+
+  // act
+  await dataGrid.apiColumnOption('group', 'groupIndex', 0);
+  await t.expect(dataGrid.isReady()).ok();
+  visibleRows = await dataGrid.apiGetVisibleRows();
+
   // assert
   await t
     .expect(visibleRows.length)
@@ -250,17 +261,16 @@ test.meta({ unstable: true })('Ungrouping after grouping should work correctly i
 
   // act
   await dataGrid.apiColumnOption('group', 'groupIndex', 'undefined');
-
-  // assert
+  await t.expect(dataGrid.isReady()).ok();
   const groupRow = dataGrid.getGroupRowSelector();
 
+  // assert
   await t
     .expect(groupRow.exists)
     .notOk();
 
   visibleRows = await dataGrid.apiGetVisibleRows();
 
-  // assert
   await t
     .expect(visibleRows[0].rowType)
     .eql('data')
@@ -279,8 +289,7 @@ test.meta({ unstable: true })('Ungrouping after grouping should work correctly i
     return items;
   };
   return createWidget('dxDataGrid', {
-    height: 400,
-    loadingTimeout: null,
+    height: 500,
     keyExpr: 'id',
     dataSource: getItems(),
     scrolling: {
@@ -494,13 +503,23 @@ test('Header container should have padding-right if grid has max-height and scro
   });
 });
 
-test.meta({ unstable: true })('New virtual mode. A detail row should be rendered when the last master row is expanded', async (t) => {
+test('New virtual mode. A detail row should be rendered when the last master row is expanded', async (t) => {
+  const ROWS_AMOUNT = 100;
   const dataGrid = new DataGrid('#container');
+  const dataRowSelector = `.${ClassNames.dataRow}`;
+
+  const getFirstVisibleRowHeight = ClientFunction(() => $((window as any).widget.element())
+    .find(dataRowSelector)
+    .first()
+    .height() ?? 0, { dependencies: { dataRowSelector } });
 
   await t.expect(dataGrid.isReady()).ok();
 
   // act
-  await dataGrid.scrollTo(t, { top: 3300 });
+  const firstVisibleRowHeight = await getFirstVisibleRowHeight();
+  const scrollTopOffset = ROWS_AMOUNT * firstVisibleRowHeight;
+
+  await dataGrid.scrollTo(t, { top: scrollTopOffset });
   await t
     .wait(300)
     .click(dataGrid.getDataRow(99).getCommandCell(0).element);
@@ -515,11 +534,11 @@ test.meta({ unstable: true })('New virtual mode. A detail row should be rendered
     .expect(penultimateRow.rowType)
     .eql('data')
     .expect(penultimateRow.key)
-    .eql(100)
+    .eql(ROWS_AMOUNT)
     .expect(lastRow.rowType)
     .eql('detail')
     .expect(lastRow.key)
-    .eql(100);
+    .eql(ROWS_AMOUNT);
 }).before(async () => {
   const getItems = (): Record<string, unknown>[] => {
     const items: Record<string, unknown>[] = [];
@@ -548,11 +567,23 @@ test.meta({ unstable: true })('New virtual mode. A detail row should be rendered
   });
 });
 
-test.meta({ unstable: true })('New virtual mode. An adaptive row should be rendered when the last row is expanded', async (t) => {
+test('New virtual mode. An adaptive row should be rendered when the last row is expanded', async (t) => {
+  const ROWS_AMOUNT = 100;
   const dataGrid = new DataGrid('#container');
+  const dataRowSelector = `.${ClassNames.dataRow}`;
+
+  const getFirstVisibleRowHeight = ClientFunction(() => $((window as any).widget.element())
+    .find(dataRowSelector)
+    .first()
+    .height() ?? 0, { dependencies: { dataRowSelector } });
+
+  await t.expect(dataGrid.isReady()).ok();
 
   // act
-  await dataGrid.scrollTo(t, { top: 3300 });
+  const firstVisibleRowHeight = await getFirstVisibleRowHeight();
+  const scrollTopOffset = ROWS_AMOUNT * firstVisibleRowHeight;
+
+  await dataGrid.scrollTo(t, { top: scrollTopOffset });
   await t
     .wait(300)
     .click(dataGrid.getDataRow(99).getCommandCell(3).element);
@@ -567,11 +598,11 @@ test.meta({ unstable: true })('New virtual mode. An adaptive row should be rende
     .expect(penultimateRow.rowType)
     .eql('data')
     .expect(penultimateRow.key)
-    .eql(100)
+    .eql(ROWS_AMOUNT)
     .expect(lastRow.rowType)
     .eql('detailAdaptive')
     .expect(lastRow.key)
-    .eql(100);
+    .eql(ROWS_AMOUNT);
 }).before(async () => {
   const getItems = (): Record<string, unknown>[] => {
     const items: Record<string, unknown>[] = [];
@@ -604,11 +635,14 @@ test.meta({ unstable: true })('New virtual mode. An adaptive row should be rende
   });
 });
 
-test.meta({ unstable: true })('New virtual mode. Virtual rows should not be in view port', async (t) => {
+// Theme dependent test
+test.meta({ runInTheme: Themes.fluentBlue })('New virtual mode. Virtual rows should not be in view port', async (t) => {
   const dataGrid = new DataGrid('#container');
+  const virtualRowSelector = `.${ClassNames.virtualRow}`;
+  const dataRowSelector = `.${ClassNames.dataRow}`;
   const getVirtualRowInfo = ClientFunction(() => {
     const result: any = {};
-    const $virtualRows = $((window as any).widget.element()).find(CLASS.virtualRow);
+    const $virtualRows = $((window as any).widget.element()).find(virtualRowSelector);
 
     result.count = $virtualRows.length;
     $virtualRows.each((index, el) => {
@@ -620,17 +654,17 @@ test.meta({ unstable: true })('New virtual mode. Virtual rows should not be in v
     });
 
     return result;
-  });
+  }, { dependencies: { virtualRowSelector } });
   const getVisibleRowsHeight = ClientFunction(() => {
     let result = 0;
-    const $rows = $((window as any).widget.element()).find(CLASS.dataRow);
+    const $rows = $((window as any).widget.element()).find(dataRowSelector);
 
     $rows.each((_, el) => {
       result += $(el).height() ?? 0;
     });
 
     return result;
-  });
+  }, { dependencies: { dataRowSelector } });
 
   await t.wait(350);
   let visibleRows = await dataGrid.apiGetVisibleRows();
@@ -640,16 +674,16 @@ test.meta({ unstable: true })('New virtual mode. Virtual rows should not be in v
   // assert
   await t
     .expect(visibleRows.length)
-    .eql(20)
+    .eql(16)
     .expect(virtualRowInfo.count)
     .eql(1)
     .expect(virtualRowInfo[0].top >= visibleRowsHeight)
     .ok();
 
   // act
-  await dataGrid.scrollTo(t, { top: 1580 });
+  await dataGrid.scrollTo(t, { top: 2520 });
   await t.wait(300);
-  await dataGrid.scrollTo(t, { top: 3250 });
+  await dataGrid.scrollTo(t, { top: 4580 });
   await t.wait(600);
 
   visibleRows = await dataGrid.apiGetVisibleRows();
@@ -662,16 +696,16 @@ test.meta({ unstable: true })('New virtual mode. Virtual rows should not be in v
   // assert
   await t
     .expect(visibleRows.length)
-    .eql(10)
+    .eql(8)
     .expect(visibleRows[0].key)
-    .eql(91)
+    .eql(93)
     .expect(virtualRowInfo.count)
     .eql(1)
     .expect(bottomVirtualRowPosition <= topScrollPosition)
     .ok();
 
   // act
-  await dataGrid.scrollTo(t, { top: 1580 });
+  await dataGrid.scrollTo(t, { top: 2520 });
   await t.wait(300);
   await dataGrid.scrollTo(t, { top: 0 });
   await t.wait(300);
@@ -683,7 +717,7 @@ test.meta({ unstable: true })('New virtual mode. Virtual rows should not be in v
   // assert
   await t
     .expect(visibleRows.length)
-    .eql(10)
+    .eql(8)
     .expect(visibleRows[0].key)
     .eql(1)
     .expect(virtualRowInfo.count)
@@ -727,7 +761,7 @@ test.meta({ unstable: true })('New virtual mode. Virtual rows should not be in v
         return (window as any).myStore.totalCount(loadOptions);
       },
     } as any, // todo check
-    height: 300,
+    height: 420,
     remoteOperations: true,
     scrolling: {
       mode: 'virtual',
@@ -883,7 +917,8 @@ test.meta({ browserSize: [800, 700] })('New mode. Rows should be rendered proper
   });
 });
 
-test.meta({ unstable: true, browserSize: [800, 800] })('Rows are rendered properly when window content is scrolled (T1070388)', async (t) => {
+// Theme dependent test
+test.meta({ browserSize: [800, 800], runInTheme: Themes.fluentBlue })('Rows are rendered properly when window content is scrolled (T1070388)', async (t) => {
   const dataGrid = new DataGrid('#container');
 
   await t.expect(dataGrid.isReady()).ok();
@@ -910,12 +945,12 @@ test.meta({ unstable: true, browserSize: [800, 800] })('Rows are rendered proper
     .ok();
 
   // act
-  await scrollWindowTo(3000);
+  await scrollWindowTo(3100);
 
   // assert
   await t
     .expect(getWindowScrollPosition())
-    .eql(3000)
+    .eql(3100)
     .wait(300);
 
   visibleRows = await dataGrid.apiGetVisibleRows();
@@ -923,10 +958,10 @@ test.meta({ unstable: true, browserSize: [800, 800] })('Rows are rendered proper
   // assert
   await t
     .expect(visibleRows.length)
-    .eql(26)
-    .expect(visibleRows[0].key > 30)
+    .eql(19)
+    .expect(visibleRows[0].key > 20)
     .ok()
-    .expect(visibleRows[25].key > 55)
+    .expect(visibleRows[18].key > 35)
     .ok();
 
   // act
@@ -938,12 +973,12 @@ test.meta({ unstable: true, browserSize: [800, 800] })('Rows are rendered proper
     .eql(6000);
 
   // act
-  await scrollWindowTo(3000);
+  await scrollWindowTo(3100);
 
   // assert
   await t
     .expect(getWindowScrollPosition())
-    .eql(3000)
+    .eql(3100)
     .wait(300);
 
   visibleRows = await dataGrid.apiGetVisibleRows();
@@ -951,10 +986,10 @@ test.meta({ unstable: true, browserSize: [800, 800] })('Rows are rendered proper
   // assert
   await t
     .expect(visibleRows.length)
-    .eql(26)
-    .expect(visibleRows[0].key > 30)
+    .eql(19)
+    .expect(visibleRows[0].key > 20)
     .ok()
-    .expect(visibleRows[25].key > 55)
+    .expect(visibleRows[18].key > 35)
     .ok();
 
   // act
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-ask-ai-result-ready-state (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-ask-ai-result-ready-state (fluent.blue.light).png
index 454ee1c65184..d006a1bc96d3 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-ask-ai-result-ready-state (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-ask-ai-result-ready-state (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-asking-state (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-asking-state (fluent.blue.light).png
index b5cc7ec5591e..ecc880a06391 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-asking-state (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-asking-state (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-error-state (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-error-state (fluent.blue.light).png
index 16ef0e2559b0..c2f0efcc3f4c 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-error-state (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-error-state (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-generating-state (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-generating-state (fluent.blue.light).png
index c1273128170a..df51aea74163 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-generating-state (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-generating-state (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-initial-state-with-no-options (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-initial-state-with-no-options (fluent.blue.light).png
index 2e9340646f4c..77b46a49861a 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-initial-state-with-no-options (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-initial-state-with-no-options (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-initial-state-with-options (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-initial-state-with-options (fluent.blue.light).png
index 56042734ee1a..1d31c81500f2 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-initial-state-with-options (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-initial-state-with-options (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-result-ready-after-canceletion (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-result-ready-after-canceletion (fluent.blue.light).png
index 5f33f30a5c4e..3b8a04753c12 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-result-ready-after-canceletion (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-result-ready-after-canceletion (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-result-ready-state-with-long-result (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-result-ready-state-with-long-result (fluent.blue.light).png
index 6ed108a60d59..95d750aef547 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-result-ready-state-with-long-result (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-result-ready-state-with-long-result (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-result-ready-state-with-short-result (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-result-ready-state-with-short-result (fluent.blue.light).png
index e007815d39d9..5b36670d575a 100644
Binary files a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-result-ready-state-with-short-result (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-result-ready-state-with-short-result (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/a11y/etalons/month_day_number_contrast (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/a11y/etalons/month_day_number_contrast (fluent.blue.light).png
index c2a96d1a8370..0d3343ff976a 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/a11y/etalons/month_day_number_contrast (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/a11y/etalons/month_day_number_contrast (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/switch-to-agenda-without-appointments (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/switch-to-agenda-without-appointments (fluent.blue.light).png
index 1efed35383b8..06fc6a6343a9 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/switch-to-agenda-without-appointments (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/switch-to-agenda-without-appointments (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=month_start=6_end=18 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=month_start=6_end=18 (fluent.blue.light).png
index 00c874545ca0..61b220c4e82e 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=month_start=6_end=18 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=month_start=6_end=18 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=month_start=6_end=undefined (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=month_start=6_end=undefined (fluent.blue.light).png
index 00c874545ca0..61b220c4e82e 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=month_start=6_end=undefined (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=month_start=6_end=undefined (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=month_start=undefined_end=18 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=month_start=undefined_end=18 (fluent.blue.light).png
index 00c874545ca0..61b220c4e82e 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=month_start=undefined_end=18 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=month_start=undefined_end=18 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=month_start=undefined_end=undefined (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=month_start=undefined_end=undefined (fluent.blue.light).png
index 00c874545ca0..61b220c4e82e 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=month_start=undefined_end=undefined (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=month_start=undefined_end=undefined (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/etalons/multiday-appointment_month (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/etalons/multiday-appointment_month (fluent.blue.light).png
index 900a3d028440..4e044f9e4606 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/etalons/multiday-appointment_month (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/etalons/multiday-appointment_month (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/month-appointment-maxAppointmentsPerCell=1 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/month-appointment-maxAppointmentsPerCell=1 (fluent.blue.light).png
index 039a2386b25c..8d8171339466 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/month-appointment-maxAppointmentsPerCell=1 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/month-appointment-maxAppointmentsPerCell=1 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/month-appointment-maxAppointmentsPerCell=10 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/month-appointment-maxAppointmentsPerCell=10 (fluent.blue.light).png
index d06a0e23c1ff..966f37bbbf29 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/month-appointment-maxAppointmentsPerCell=10 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/month-appointment-maxAppointmentsPerCell=10 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/month-appointment-maxAppointmentsPerCell=3 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/month-appointment-maxAppointmentsPerCell=3 (fluent.blue.light).png
index e8cd2e6bcfd4..eae979bd6e8a 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/month-appointment-maxAppointmentsPerCell=3 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/month-appointment-maxAppointmentsPerCell=3 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/month-appointment-maxAppointmentsPerCell=auto (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/month-appointment-maxAppointmentsPerCell=auto (fluent.blue.light).png
index e8cd2e6bcfd4..eae979bd6e8a 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/month-appointment-maxAppointmentsPerCell=auto (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/month-appointment-maxAppointmentsPerCell=auto (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/month-appointment-maxAppointmentsPerCell=unlimited (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/month-appointment-maxAppointmentsPerCell=unlimited (fluent.blue.light).png
index 00d25ae8aac2..b60d1e6e4b09 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/month-appointment-maxAppointmentsPerCell=unlimited (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/month-appointment-maxAppointmentsPerCell=unlimited (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-long-appoint-to-bottom (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-long-appoint-to-bottom (fluent.blue.light).png
index 54d9f29836de..35c21518f580 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-long-appoint-to-bottom (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-long-appoint-to-bottom (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-long-appoint-to-left (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-long-appoint-to-left (fluent.blue.light).png
index fb06b3c6ba6a..90f1bd9a24d5 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-long-appoint-to-left (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-long-appoint-to-left (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-long-appoint-to-right (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-long-appoint-to-right (fluent.blue.light).png
index 131d773f4f1a..765285ffae44 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-long-appoint-to-right (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-long-appoint-to-right (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-long-appoint-to-top (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-long-appoint-to-top (fluent.blue.light).png
index fb06b3c6ba6a..90f1bd9a24d5 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-long-appoint-to-top (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-long-appoint-to-top (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-small-appoint-to-bottom (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-small-appoint-to-bottom (fluent.blue.light).png
index af270b17e9d9..60d53a3f1957 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-small-appoint-to-bottom (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-small-appoint-to-bottom (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-small-appoint-to-left (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-small-appoint-to-left (fluent.blue.light).png
index f5e191452c72..42fecacf751f 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-small-appoint-to-left (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-small-appoint-to-left (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-small-appoint-to-right (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-small-appoint-to-right (fluent.blue.light).png
index 34d6baff49b1..6c63cdd60f2e 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-small-appoint-to-right (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-small-appoint-to-right (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-small-appoint-to-top (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-small-appoint-to-top (fluent.blue.light).png
index f5e191452c72..42fecacf751f 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-small-appoint-to-top (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-small-appoint-to-top (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/etalons/scrollable-month-workspace (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/etalons/scrollable-month-workspace (fluent.blue.light).png
index 75a453b88892..7f342ce17598 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/etalons/scrollable-month-workspace (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/etalons/scrollable-month-workspace (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-header-css-group-by-date-long-names (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-header-css-group-by-date-long-names (fluent.blue.light).png
index dc6cb9173888..0e5da049c6c3 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-header-css-group-by-date-long-names (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-header-css-group-by-date-long-names (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-horizontal-allDay-0-24) (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-horizontal-allDay-0-24) (fluent.blue.light).png
index 6a4aa96c6934..b3964cf48287 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-horizontal-allDay-0-24) (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-horizontal-allDay-0-24) (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-horizontal-allDay-9-14) (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-horizontal-allDay-9-14) (fluent.blue.light).png
index af2d907f349d..8269fa4082fd 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-horizontal-allDay-9-14) (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-horizontal-allDay-9-14) (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-horizontal-hidden-0-24) (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-horizontal-hidden-0-24) (fluent.blue.light).png
index 6a4aa96c6934..b3964cf48287 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-horizontal-hidden-0-24) (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-horizontal-hidden-0-24) (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-horizontal-hidden-9-14) (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-horizontal-hidden-9-14) (fluent.blue.light).png
index af2d907f349d..8269fa4082fd 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-horizontal-hidden-9-14) (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-horizontal-hidden-9-14) (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-vertical-allDay-0-24) (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-vertical-allDay-0-24) (fluent.blue.light).png
index ce8ce52c76ea..99693189ec59 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-vertical-allDay-0-24) (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-vertical-allDay-0-24) (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-vertical-allDay-9-14) (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-vertical-allDay-9-14) (fluent.blue.light).png
index 2cbd6a92f3cf..659c29d0ea43 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-vertical-allDay-9-14) (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-vertical-allDay-9-14) (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-vertical-hidden-0-24) (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-vertical-hidden-0-24) (fluent.blue.light).png
index ce8ce52c76ea..99693189ec59 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-vertical-hidden-0-24) (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-vertical-hidden-0-24) (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-vertical-hidden-9-14) (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-vertical-hidden-9-14) (fluent.blue.light).png
index 2cbd6a92f3cf..659c29d0ea43 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-vertical-hidden-9-14) (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-vertical-hidden-9-14) (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/month-view_vertical-grouping_fist-app-part_T1122185 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/month-view_vertical-grouping_fist-app-part_T1122185 (fluent.blue.light).png
index dd817b8baf85..c272d4e50be6 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/month-view_vertical-grouping_fist-app-part_T1122185 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/month-view_vertical-grouping_fist-app-part_T1122185 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/month-view_vertical-grouping_last-app-part_T1122185 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/month-view_vertical-grouping_last-app-part_T1122185 (fluent.blue.light).png
index 495b139c6f75..ac5da0d7bba4 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/month-view_vertical-grouping_last-app-part_T1122185 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/month-view_vertical-grouping_last-app-part_T1122185 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/month-view_vertical-grouping_middle-app-part_T1122185 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/month-view_vertical-grouping_middle-app-part_T1122185 (fluent.blue.light).png
index 086e4a8189c2..9addc222a620 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/month-view_vertical-grouping_middle-app-part_T1122185 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/month-view_vertical-grouping_middle-app-part_T1122185 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-with-empty-toolbar-config (material.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-with-empty-toolbar-config (material.blue.light).png
index a4629f75bf33..db982477976c 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-with-empty-toolbar-config (material.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-with-empty-toolbar-config (material.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-with-non-empty-toolbar-config (material.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-with-non-empty-toolbar-config (material.blue.light).png
index 4318b4ebefcc..c69438c23066 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-with-non-empty-toolbar-config (material.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-with-non-empty-toolbar-config (material.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false (fluent.blue.light).png
index 36a65deffa90..3f6fe5433f84 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false-horizontal (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false-horizontal (fluent.blue.light).png
index f2439bdcd48a..a5dab2c8ec6e 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false-horizontal (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false-horizontal (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false-horizontal-rtl (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false-horizontal-rtl (fluent.blue.light).png
index 3dfb2b0e2e52..aaf004610916 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false-horizontal-rtl (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false-horizontal-rtl (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false-rtl (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false-rtl (fluent.blue.light).png
index 5c85ddceb0dd..9ee10888f47b 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false-rtl (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false-rtl (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false-vertical (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false-vertical (fluent.blue.light).png
index 3922355938a7..a335aa07caa9 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false-vertical (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false-vertical (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false-vertical-rtl (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false-vertical-rtl (fluent.blue.light).png
index f559ce64a323..971174bc415e 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false-vertical-rtl (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false-vertical-rtl (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true (fluent.blue.light).png
index e3bf71289ec8..a368f0971f24 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true-horizontal (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true-horizontal (fluent.blue.light).png
index 2371908b3468..6d560a60d14b 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true-horizontal (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true-horizontal (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true-horizontal-rtl (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true-horizontal-rtl (fluent.blue.light).png
index 85f662318564..82e15bd24009 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true-horizontal-rtl (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true-horizontal-rtl (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true-rtl (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true-rtl (fluent.blue.light).png
index 3520fc71f19c..415d6b63508c 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true-rtl (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true-rtl (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true-vertical (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true-vertical (fluent.blue.light).png
index 791375b516c8..800cf78a0393 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true-vertical (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true-vertical (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true-vertical-rtl (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true-vertical-rtl (fluent.blue.light).png
index e0f1343c2b25..5b6abe091f83 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true-vertical-rtl (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true-vertical-rtl (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/resize/etalons/browser-resize-currentView=month-after-resize (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/resize/etalons/browser-resize-currentView=month-after-resize (fluent.blue.light).png
index 486b18ae5d81..d5c8f84a7cfc 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/resize/etalons/browser-resize-currentView=month-after-resize (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/resize/etalons/browser-resize-currentView=month-after-resize (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/resize/etalons/browser-resize-currentView=month-before-resize (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/resize/etalons/browser-resize-currentView=month-before-resize (fluent.blue.light).png
index 71c82978e563..5411cb0a5304 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/resize/etalons/browser-resize-currentView=month-before-resize (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/resize/etalons/browser-resize-currentView=month-before-resize (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/allDay/etalons/timelineWeek-all-day-expr-AllDay (generic.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/allDay/etalons/timelineWeek-all-day-expr-AllDay (generic.light).png
index da623ad8dff0..aaf4648e579a 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/allDay/etalons/timelineWeek-all-day-expr-AllDay (generic.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/allDay/etalons/timelineWeek-all-day-expr-AllDay (generic.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/allDay/etalons/timelineWeek-all-day-expr-undefined (generic.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/allDay/etalons/timelineWeek-all-day-expr-undefined (generic.light).png
index da623ad8dff0..aaf4648e579a 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/allDay/etalons/timelineWeek-all-day-expr-undefined (generic.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/allDay/etalons/timelineWeek-all-day-expr-undefined (generic.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/allDay/etalons/week-all-day-expr-AllDay (generic.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/allDay/etalons/week-all-day-expr-AllDay (generic.light).png
index c52bc32abe4b..3cfffad87adc 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/allDay/etalons/week-all-day-expr-AllDay (generic.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/allDay/etalons/week-all-day-expr-AllDay (generic.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/allDay/etalons/week-all-day-expr-undefined (generic.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/allDay/etalons/week-all-day-expr-undefined (generic.light).png
index c52bc32abe4b..3cfffad87adc 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/allDay/etalons/week-all-day-expr-undefined (generic.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/allDay/etalons/week-all-day-expr-undefined (generic.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/after-dragging(T1020820) (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/after-dragging(T1020820) (fluent.blue.light).png
index b4eb17868558..02c656c9d4b5 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/after-dragging(T1020820) (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/after-dragging(T1020820) (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-month-adapt(false) (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-month-adapt(false) (fluent.blue.light).png
index 277b64c930d0..abd4527335ac 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-month-adapt(false) (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-month-adapt(false) (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-month-adapt(true) (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-month-adapt(true) (fluent.blue.light).png
index c4640ad56837..4ad778d9fd56 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-month-adapt(true) (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-month-adapt(true) (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-month-double-interval (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-month-double-interval (fluent.blue.light).png
index 9d5cceed002d..3f02740e4af0 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-month-double-interval (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-month-double-interval (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-month-rtl(false) (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-month-rtl(false) (fluent.blue.light).png
index 277b64c930d0..abd4527335ac 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-month-rtl(false) (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-month-rtl(false) (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-month-rtl(true) (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-month-rtl(true) (fluent.blue.light).png
index 783e0782130e..36e5c3f7752a 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-month-rtl(true) (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-month-rtl(true) (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-no-subject-month (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-no-subject-month (fluent.blue.light).png
index 4fefbb0f673b..1fece30dfa06 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-no-subject-month (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-no-subject-month (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/before-dragging(T1020820) (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/before-dragging(T1020820) (fluent.blue.light).png
index 3d482fe4eab2..681575c9824d 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/before-dragging(T1020820) (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/before-dragging(T1020820) (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-month_view-and-non-rtl_mode (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-month_view-and-non-rtl_mode (fluent.blue.light).png
index 86343c2276a6..8fff109bd4d8 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-month_view-and-non-rtl_mode (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-month_view-and-non-rtl_mode (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-month_view-and-rtl_mode (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-month_view-and-rtl_mode (fluent.blue.light).png
index 65f5576ebb84..5f6f53066f5d 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-month_view-and-rtl_mode (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-month_view-and-rtl_mode (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-cell-sizes-in-month (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-cell-sizes-in-month (fluent.blue.light).png
index 89526f5edf9d..d005d121f00f 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-cell-sizes-in-month (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-cell-sizes-in-month (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-group-panel-in-month-cross-scrolling=false (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-group-panel-in-month-cross-scrolling=false (fluent.blue.light).png
index c64f195decbb..bf1d8dcab532 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-group-panel-in-month-cross-scrolling=false (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-group-panel-in-month-cross-scrolling=false (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-group-panel-in-month-cross-scrolling=true (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-group-panel-in-month-cross-scrolling=true (fluent.blue.light).png
index d9f32a03d6ff..9bcd9c19092c 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-group-panel-in-month-cross-scrolling=true (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-group-panel-in-month-cross-scrolling=true (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-header-panel-in-month-cross-scrolling=false (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-header-panel-in-month-cross-scrolling=false (fluent.blue.light).png
index 088470d4b050..94b9b97d2786 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-header-panel-in-month-cross-scrolling=false (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-header-panel-in-month-cross-scrolling=false (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-header-panel-in-month-cross-scrolling=true (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-header-panel-in-month-cross-scrolling=true (fluent.blue.light).png
index 7a5218d96d2b..5ac552f9ff39 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-header-panel-in-month-cross-scrolling=true (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-header-panel-in-month-cross-scrolling=true (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=month-orientation=horizontal) (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=month-orientation=horizontal) (fluent.blue.light).png
index 7227dcbb9be6..438cf2be244a 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=month-orientation=horizontal) (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=month-orientation=horizontal) (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=month-orientation=vertical) (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=month-orientation=vertical) (fluent.blue.light).png
index dd0f437d12ad..d04615fed4ac 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=month-orientation=vertical) (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=month-orientation=vertical) (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/appointment-template-currentView=month (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/appointment-template-currentView=month (fluent.blue.light).png
index 656c8e54c64b..2fd7e6dda2ed 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/appointment-template-currentView=month (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/appointment-template-currentView=month (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/data-cell-template-currentView=month (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/data-cell-template-currentView=month (fluent.blue.light).png
index eae3711197a3..b5fb3adc2b97 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/data-cell-template-currentView=month (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/data-cell-template-currentView=month (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-month (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-month (fluent.blue.light).png
index 3b69a447b08f..ddba14f284f4 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-month (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-month (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-month-with-form (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-month-with-form (fluent.blue.light).png
index 3b7aeed29bfb..941e6a9dce6b 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-month-with-form (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-month-with-form (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-february-2021 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-february-2021 (fluent.blue.light).png
index a8880033a063..f8995c898fd9 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-february-2021 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-february-2021 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-interval-count-12 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-interval-count-12 (fluent.blue.light).png
index a0aa98004863..a1dd7f0312dd 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-interval-count-12 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-interval-count-12 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment(rtl=false, text=Appointment spans 2 rows) (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment(rtl=false, text=Appointment spans 2 rows) (fluent.blue.light).png
index d873952d77ca..c50b130c0330 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment(rtl=false, text=Appointment spans 2 rows) (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment(rtl=false, text=Appointment spans 2 rows) (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment(rtl=false, text=Appointment spans 3 rows) (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment(rtl=false, text=Appointment spans 3 rows) (fluent.blue.light).png
index f756b878236d..44dc2965ecbe 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment(rtl=false, text=Appointment spans 3 rows) (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment(rtl=false, text=Appointment spans 3 rows) (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment(rtl=false, text=Appointment spans all rows) (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment(rtl=false, text=Appointment spans all rows) (fluent.blue.light).png
index 8bcf702098ba..61d03509ce83 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment(rtl=false, text=Appointment spans all rows) (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment(rtl=false, text=Appointment spans all rows) (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment(rtl=true, text=Appointment spans 2 rows) (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment(rtl=true, text=Appointment spans 2 rows) (fluent.blue.light).png
index 5ac04d85e8ba..f1212ec1454d 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment(rtl=true, text=Appointment spans 2 rows) (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment(rtl=true, text=Appointment spans 2 rows) (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment(rtl=true, text=Appointment spans 3 rows) (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment(rtl=true, text=Appointment spans 3 rows) (fluent.blue.light).png
index 404098a31e2a..561f51eb54e8 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment(rtl=true, text=Appointment spans 3 rows) (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment(rtl=true, text=Appointment spans 3 rows) (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment(rtl=true, text=Appointment spans all rows) (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment(rtl=true, text=Appointment spans all rows) (fluent.blue.light).png
index eedfd4318c01..f1af68439557 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment(rtl=true, text=Appointment spans all rows) (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment(rtl=true, text=Appointment spans all rows) (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-february(rtl=false) (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-february(rtl=false) (fluent.blue.light).png
index 8dda12be05a0..359dd8432ec4 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-february(rtl=false) (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-february(rtl=false) (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-february(rtl=true) (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-february(rtl=true) (fluent.blue.light).png
index bd70832b6032..a9a50e551408 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-february(rtl=true) (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-february(rtl=true) (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-january(rtl=false) (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-january(rtl=false) (fluent.blue.light).png
index 345f680f725b..144b7cad3e41 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-january(rtl=false) (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-january(rtl=false) (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-january(rtl=true) (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-january(rtl=true) (fluent.blue.light).png
index 44f52959e80d..5c7d68db011d 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-january(rtl=true) (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-january(rtl=true) (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-march(rtl=false) (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-march(rtl=false) (fluent.blue.light).png
index 6953e3aa1b51..ee7d11664c80 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-march(rtl=false) (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-march(rtl=false) (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-march(rtl=true) (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-march(rtl=true) (fluent.blue.light).png
index 0667a75814c7..436f497c7078 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-march(rtl=true) (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-march(rtl=true) (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-recurrence-appointment-several-months-february (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-recurrence-appointment-several-months-february (fluent.blue.light).png
index 283c1e8c1e08..8e40cb7803b0 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-recurrence-appointment-several-months-february (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-recurrence-appointment-several-months-february (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-recurrence-appointment-several-months-january (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-recurrence-appointment-several-months-january (fluent.blue.light).png
index 5c8f8e8f6465..a8e64791fee8 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-recurrence-appointment-several-months-january (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-recurrence-appointment-several-months-january (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/tooltipBehaviour/etalons/tooltip-rendering-with-react (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/tooltipBehaviour/etalons/tooltip-rendering-with-react (fluent.blue.light).png
index 989c4df67e86..9ebc15f12dd5 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/tooltipBehaviour/etalons/tooltip-rendering-with-react (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/tooltipBehaviour/etalons/tooltip-rendering-with-react (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-horizontal-end (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-horizontal-end (fluent.blue.light).png
index b5f09dd4aa8a..9be64e6190be 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-horizontal-end (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-horizontal-end (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-horizontal-middle (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-horizontal-middle (fluent.blue.light).png
index c181b155bf15..3c7c9c0a6610 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-horizontal-middle (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-horizontal-middle (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-horizontal-start (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-horizontal-start (fluent.blue.light).png
index 861665b9d6ec..d6611a632a21 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-horizontal-start (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-horizontal-start (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-vertical-end (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-vertical-end (fluent.blue.light).png
index aaf743e1939a..4247da48a42a 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-vertical-end (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-vertical-end (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-vertical-middle (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-vertical-middle (fluent.blue.light).png
index 8ff804780427..84f562c3449d 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-vertical-middle (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-vertical-middle (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-vertical-start (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-vertical-start (fluent.blue.light).png
index 5a615a142652..ee732181b7ad 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-vertical-start (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-vertical-start (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-after-scroll-grouping-by-date (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-after-scroll-grouping-by-date (fluent.blue.light).png
index c64b8d326816..8286a3a8bfee 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-after-scroll-grouping-by-date (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-after-scroll-grouping-by-date (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-after-scroll-horizontal-grouping (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-after-scroll-horizontal-grouping (fluent.blue.light).png
index 3e4be83a6843..00f5e211268d 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-after-scroll-horizontal-grouping (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-after-scroll-horizontal-grouping (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-after-scroll-horizontal-grouping-scaling (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-after-scroll-horizontal-grouping-scaling (fluent.blue.light).png
index 87614574b909..6897dd22ef4f 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-after-scroll-horizontal-grouping-scaling (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-after-scroll-horizontal-grouping-scaling (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-before-scroll-grouping-by-date (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-before-scroll-grouping-by-date (fluent.blue.light).png
index 8aa07a81d410..cdacb2beb910 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-before-scroll-grouping-by-date (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-before-scroll-grouping-by-date (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-before-scroll-horizontal-grouping (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-before-scroll-horizontal-grouping (fluent.blue.light).png
index d1bb595e4e44..f92b54a2732c 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-before-scroll-horizontal-grouping (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-before-scroll-horizontal-grouping (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-before-scroll-horizontal-grouping-scaling (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-before-scroll-horizontal-grouping-scaling (fluent.blue.light).png
index fa7cb7fd628f..e1497485c14a 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-before-scroll-horizontal-grouping-scaling (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-before-scroll-horizontal-grouping-scaling (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_all-day-appts_month_offset--735 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_all-day-appts_month_offset--735 (fluent.blue.light).png
index b31f419648fa..5ede94e6807f 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_all-day-appts_month_offset--735 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_all-day-appts_month_offset--735 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_all-day-appts_month_offset-0 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_all-day-appts_month_offset-0 (fluent.blue.light).png
index 1067b5ff5320..27b59e93f2b6 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_all-day-appts_month_offset-0 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_all-day-appts_month_offset-0 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_all-day-appts_month_offset-735 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_all-day-appts_month_offset-735 (fluent.blue.light).png
index f22fbc9ca7d4..682ace11ebaf 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_all-day-appts_month_offset-735 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_all-day-appts_month_offset-735 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_usual-appts_month_offset--735 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_usual-appts_month_offset--735 (fluent.blue.light).png
index b31f419648fa..5ede94e6807f 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_usual-appts_month_offset--735 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_usual-appts_month_offset--735 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_usual-appts_month_offset-0 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_usual-appts_month_offset-0 (fluent.blue.light).png
index 1067b5ff5320..27b59e93f2b6 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_usual-appts_month_offset-0 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_usual-appts_month_offset-0 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_usual-appts_month_offset-735 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_usual-appts_month_offset-735 (fluent.blue.light).png
index f22fbc9ca7d4..682ace11ebaf 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_usual-appts_month_offset-735 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_usual-appts_month_offset-735 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_month_offset--120 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_month_offset--120 (fluent.blue.light).png
index 280d1a9fee40..f8bd36541e20 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_month_offset--120 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_month_offset--120 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_month_offset-0 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_month_offset-0 (fluent.blue.light).png
index 280d1a9fee40..f8bd36541e20 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_month_offset-0 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_month_offset-0 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_month_offset-120 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_month_offset-120 (fluent.blue.light).png
index 280d1a9fee40..f8bd36541e20 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_month_offset-120 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_month_offset-120 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset--120_decrease (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset--120_decrease (fluent.blue.light).png
index 5a6fa916d6ab..e38c5bda43b8 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset--120_decrease (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset--120_decrease (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset--120_decrease_rtl (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset--120_decrease_rtl (fluent.blue.light).png
index 91079fe5889e..e889db43c360 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset--120_decrease_rtl (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset--120_decrease_rtl (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset--120_increase (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset--120_increase (fluent.blue.light).png
index 5a6fa916d6ab..e38c5bda43b8 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset--120_increase (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset--120_increase (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset--120_increase_rtl (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset--120_increase_rtl (fluent.blue.light).png
index 91079fe5889e..e889db43c360 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset--120_increase_rtl (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset--120_increase_rtl (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-0_decrease (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-0_decrease (fluent.blue.light).png
index 5a6fa916d6ab..e38c5bda43b8 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-0_decrease (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-0_decrease (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-0_decrease_rtl (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-0_decrease_rtl (fluent.blue.light).png
index 91079fe5889e..e889db43c360 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-0_decrease_rtl (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-0_decrease_rtl (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-0_increase (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-0_increase (fluent.blue.light).png
index 5a6fa916d6ab..e38c5bda43b8 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-0_increase (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-0_increase (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-0_increase_rtl (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-0_increase_rtl (fluent.blue.light).png
index 91079fe5889e..e889db43c360 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-0_increase_rtl (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-0_increase_rtl (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-120_decrease (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-120_decrease (fluent.blue.light).png
index 5a6fa916d6ab..e38c5bda43b8 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-120_decrease (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-120_decrease (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-120_decrease_rtl (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-120_decrease_rtl (fluent.blue.light).png
index 91079fe5889e..e889db43c360 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-120_decrease_rtl (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-120_decrease_rtl (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-120_increase (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-120_increase (fluent.blue.light).png
index 5a6fa916d6ab..e38c5bda43b8 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-120_increase (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-120_increase (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-120_increase_rtl (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-120_increase_rtl (fluent.blue.light).png
index 91079fe5889e..e889db43c360 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-120_increase_rtl (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-120_increase_rtl (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-minus_offset--735 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-minus_offset--735 (fluent.blue.light).png
index 0ab4ded3ce7c..ce46ceaccc27 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-minus_offset--735 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-minus_offset--735 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-minus_offset-0 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-minus_offset-0 (fluent.blue.light).png
index 65ef7a6d031f..b2a12a8836ab 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-minus_offset-0 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-minus_offset-0 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-minus_offset-735 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-minus_offset-735 (fluent.blue.light).png
index 3d0e207c26a6..b71742416bb6 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-minus_offset-735 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-minus_offset-735 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-plus_offset--735 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-plus_offset--735 (fluent.blue.light).png
index 032ca37c516a..3adb24bbd5dc 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-plus_offset--735 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-plus_offset--735 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-plus_offset-0 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-plus_offset-0 (fluent.blue.light).png
index d10925b7d1c8..0580c5d02ef1 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-plus_offset-0 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-plus_offset-0 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-plus_offset-735 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-plus_offset-735 (fluent.blue.light).png
index 81a8f6f1a10b..09738a1f92d5 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-plus_offset-735 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-plus_offset-735 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-minus_offset--735 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-minus_offset--735 (fluent.blue.light).png
index 854880ff6003..dbed5f1a7cbe 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-minus_offset--735 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-minus_offset--735 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-minus_offset-0 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-minus_offset-0 (fluent.blue.light).png
index 04451c7cef8d..416e4b74293c 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-minus_offset-0 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-minus_offset-0 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-minus_offset-735 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-minus_offset-735 (fluent.blue.light).png
index 0ab4ded3ce7c..ce46ceaccc27 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-minus_offset-735 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-minus_offset-735 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-plus_offset--735 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-plus_offset--735 (fluent.blue.light).png
index 032ca37c516a..3adb24bbd5dc 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-plus_offset--735 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-plus_offset--735 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-plus_offset-0 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-plus_offset-0 (fluent.blue.light).png
index d10925b7d1c8..0580c5d02ef1 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-plus_offset-0 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-plus_offset-0 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-plus_offset-735 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-plus_offset-735 (fluent.blue.light).png
index 81a8f6f1a10b..09738a1f92d5 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-plus_offset-735 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-plus_offset-735 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_month_offset--735_start-9_end-17 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_month_offset--735_start-9_end-17 (fluent.blue.light).png
index 10bd85152ee8..f5e567f1884b 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_month_offset--735_start-9_end-17 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_month_offset--735_start-9_end-17 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_month_offset-735_start-9_end-17 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_month_offset-735_start-9_end-17 (fluent.blue.light).png
index 2d323d87884c..e4bb5aa6ed2d 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_month_offset-735_start-9_end-17 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_month_offset-735_start-9_end-17 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_month_offset--735_start-9_end-17_first-day-0 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_month_offset--735_start-9_end-17_first-day-0 (fluent.blue.light).png
index be9bccf9114d..4adde646341f 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_month_offset--735_start-9_end-17_first-day-0 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_month_offset--735_start-9_end-17_first-day-0 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_month_offset-735_start-9_end-17_first-day-0 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_month_offset-735_start-9_end-17_first-day-0 (fluent.blue.light).png
index 0cd5352808cd..c3a65a2062d9 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_month_offset-735_start-9_end-17_first-day-0 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_month_offset-735_start-9_end-17_first-day-0 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_month_offset--1440_start-0_end-24_first-day-0 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_month_offset--1440_start-0_end-24_first-day-0 (fluent.blue.light).png
index 1a1b4689095d..3fbd98488d8d 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_month_offset--1440_start-0_end-24_first-day-0 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_month_offset--1440_start-0_end-24_first-day-0 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_month_offset--1440_start-9_end-17_first-day-0 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_month_offset--1440_start-9_end-17_first-day-0 (fluent.blue.light).png
index ae3aa9626af1..18228dd3ec77 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_month_offset--1440_start-9_end-17_first-day-0 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_month_offset--1440_start-9_end-17_first-day-0 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_month_offset--735_start-0_end-24_first-day-0 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_month_offset--735_start-0_end-24_first-day-0 (fluent.blue.light).png
index e57f4b241332..db0cd69b60a0 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_month_offset--735_start-0_end-24_first-day-0 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_month_offset--735_start-0_end-24_first-day-0 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_month_offset-0_start-0_end-24_first-day-0 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_month_offset-0_start-0_end-24_first-day-0 (fluent.blue.light).png
index e57f4b241332..db0cd69b60a0 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_month_offset-0_start-0_end-24_first-day-0 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_month_offset-0_start-0_end-24_first-day-0 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_month_offset-0_start-9_end-17_first-day-0 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_month_offset-0_start-9_end-17_first-day-0 (fluent.blue.light).png
index 62214702116f..0580eb2b2c99 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_month_offset-0_start-9_end-17_first-day-0 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_month_offset-0_start-9_end-17_first-day-0 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_month_offset-1440_start-0_end-24_first-day-0 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_month_offset-1440_start-0_end-24_first-day-0 (fluent.blue.light).png
index e57f4b241332..db0cd69b60a0 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_month_offset-1440_start-0_end-24_first-day-0 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_month_offset-1440_start-0_end-24_first-day-0 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_month_offset-1440_start-9_end-17_first-day-0 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_month_offset-1440_start-9_end-17_first-day-0 (fluent.blue.light).png
index 367089b41303..d1a79a49a758 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_month_offset-1440_start-9_end-17_first-day-0 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_month_offset-1440_start-9_end-17_first-day-0 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_month_offset-735_start-0_end-24_first-day-0 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_month_offset-735_start-0_end-24_first-day-0 (fluent.blue.light).png
index e57f4b241332..db0cd69b60a0 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_month_offset-735_start-0_end-24_first-day-0 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_month_offset-735_start-0_end-24_first-day-0 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset--1440_start-0_end-24 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset--1440_start-0_end-24 (fluent.blue.light).png
index 9de6c8d8033c..104436cfa33e 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset--1440_start-0_end-24 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset--1440_start-0_end-24 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset--1440_start-9_end-17 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset--1440_start-9_end-17 (fluent.blue.light).png
index 8fc5c4dd23f6..562a5fed521d 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset--1440_start-9_end-17 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset--1440_start-9_end-17 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset--735_start-0_end-24 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset--735_start-0_end-24 (fluent.blue.light).png
index 250602e44ae8..0c7d4999a323 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset--735_start-0_end-24 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset--735_start-0_end-24 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset--735_start-9_end-17 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset--735_start-9_end-17 (fluent.blue.light).png
index 3f0f29f801b7..15d14829b8b2 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset--735_start-9_end-17 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset--735_start-9_end-17 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset-0_start-0_end-24 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset-0_start-0_end-24 (fluent.blue.light).png
index 259d8d0c822c..fd387ee75bce 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset-0_start-0_end-24 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset-0_start-0_end-24 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset-0_start-9_end-17 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset-0_start-9_end-17 (fluent.blue.light).png
index bfa032a955dd..7c623d9410c2 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset-0_start-9_end-17 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset-0_start-9_end-17 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset-1440_start-0_end-24 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset-1440_start-0_end-24 (fluent.blue.light).png
index d2e0168a56d2..80f4f492bfea 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset-1440_start-0_end-24 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset-1440_start-0_end-24 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset-1440_start-9_end-17 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset-1440_start-9_end-17 (fluent.blue.light).png
index 3c1a2e02a7d0..c8c379b1494d 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset-1440_start-9_end-17 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset-1440_start-9_end-17 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset-735_start-0_end-24 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset-735_start-0_end-24 (fluent.blue.light).png
index d4f720995359..75b57c6ed593 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset-735_start-0_end-24 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset-735_start-0_end-24 (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset-735_start-9_end-17 (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset-735_start-9_end-17 (fluent.blue.light).png
index 8a318c67faa4..137945ce9757 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset-735_start-9_end-17 (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset-735_start-9_end-17 (fluent.blue.light).png differ
diff --git a/packages/devextreme-scss/scss/widgets/fluent/cardView/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/cardView/_colors.scss
index d3811b906fec..f2343e379b7c 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/cardView/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/cardView/_colors.scss
@@ -573,7 +573,7 @@ $cardview-fluent-columnchooser--empty__message-color: null !default;
 
   // Search highlight
   $cardview-fluent-card__content__field-value--highlighted-bg-color: $base-warning !default;
-  $cardview-fluent-card__content__field-value--highlighted-text-color: $cardview-fluent-common-text-color !default;
+  $cardview-fluent-card__content__field-value--highlighted-text-color: $base-inverted-text-color !default;
   $cardview-fluent-card__content__field-value--highlighted-box-shadow-color: rgba(0, 0, 0, 0.25) !default;
 
   // Column chooser
diff --git a/packages/devextreme-scss/scss/widgets/fluent/gantt/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/gantt/_colors.scss
index 9872e017ef59..29bb541e04eb 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/gantt/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/gantt/_colors.scss
@@ -8,16 +8,23 @@
 $gantt-collapsable-row-bg: null !default;
 $gantt-icon-color: $datagrid-columnchooser-item-color !default;
 $gantt-parent-task-background-color: null !default;
+$gantt-task-color: $base-inverted-text-color !default;
+$gantt-task-background-color: null !default;
+$gantt-task-progress-background-color: null !default;
 
 @if $color == "blue" {
-  $gantt-parent-task-background-color: #8bc34a !default;
+  $gantt-parent-task-background-color: $base-success !default;
 }
 
 @if $mode == "light" {
   $gantt-collapsable-row-bg: color.adjust($base-bg, $lightness: -5%, $space: hsl) !default;
+  $gantt-task-background-color: color.adjust($base-bg, $lightness: -60%) !default;
+  $gantt-task-progress-background-color: rgba(0, 0, 0, 0.2) !default;
 }
 
 @if $mode == "dark" {
   $gantt-collapsable-row-bg: color.adjust($base-bg, $lightness: 5%, $space: hsl) !default;
+  $gantt-task-background-color: color.adjust($base-bg, $lightness: 60%) !default;
+  $gantt-task-progress-background-color: rgba(255, 255, 255, 0.2) !default;
 }
 
diff --git a/packages/devextreme-scss/scss/widgets/fluent/gantt/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/gantt/_index.scss
index 2971e05550a3..ac30f01d6f17 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/gantt/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/gantt/_index.scss
@@ -90,7 +90,7 @@ $gantt-successor-background-color: white;
 
       .dx-gantt-tPrg {
         border-radius: $base-border-radius;
-        background-color: rgba(0, 0, 0, 0.2);
+        background-color: $gantt-task-progress-background-color;
       }
 
       &.dx-gantt-smallTask {
@@ -112,7 +112,7 @@ $gantt-successor-background-color: white;
         border-bottom-left-radius: 0;
 
         &:not(.dx-gantt-noPrg) .dx-gantt-tPrg {
-          background-color: rgba(255, 255, 255, 0.2);
+          background-color: $gantt-task-progress-background-color;
         }
 
         &:not(.dx-gantt-smallTask)::before,
@@ -134,8 +134,8 @@ $gantt-successor-background-color: white;
         }
 
         &:not(.dx-gantt-noPrg) .dx-gantt-tPrg::before {
-          border-left-color: rgba(255, 255, 255, 0.2);
-          border-top-color: rgba(255, 255, 255, 0.2);
+          border-left-color: $gantt-task-progress-background-color;
+          border-top-color: $gantt-task-progress-background-color;
         }
 
         &::after,
@@ -146,8 +146,8 @@ $gantt-successor-background-color: white;
         }
 
         &.dx-gantt-cmpl::after {
-          border-right-color: rgba(255, 255, 255, 0.2);
-          border-top-color: rgba(255, 255, 255, 0.2);
+          border-right-color: $gantt-task-progress-background-color;
+          border-top-color: $gantt-task-progress-background-color;
         }
 
         &.dx-gantt-cmpl .dx-gantt-tPrg::after {
@@ -162,7 +162,7 @@ $gantt-successor-background-color: white;
     }
 
     .dx-gantt-titleIn {
-      color: #fff;
+      color: $gantt-task-color;
       padding: 0 $gantt-task-title-padding-left;
     }
   }
@@ -170,8 +170,8 @@ $gantt-successor-background-color: white;
   .dx-gantt-taskRes {
     height: $gantt-task-height;
     line-height: $gantt-task-height;
-    color: #fff;
-    background-color: #999;
+    color: $gantt-task-color;
+    background-color: $gantt-task-background-color;
     border-radius: $base-border-radius;
     margin-left: 21px;
     padding-left: 4px;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/gridBase/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/gridBase/_colors.scss
index e3379b7131ea..8bfd2c0d5e02 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/gridBase/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/gridBase/_colors.scss
@@ -117,13 +117,13 @@ $datagrid-search-bg: $base-accent !default;
 * $name 115. Error row text color
 * $type color
 */
-$datagrid-row-error-color: null !default;
+$datagrid-row-error-color: $base-inverted-text-color !default;
 
 /**
 * $name 120. Error row background color
 * $type color
 */
-$datagrid-row-error-bg: color.mix($base-invalid-color, $datagrid-base-background-color, 60%) !default;
+$datagrid-row-error-bg: $base-invalid-color !default;
 $datagrid-link-color: $base-link-color !default;
 
 /**
@@ -182,7 +182,6 @@ $datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity;
   $datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
   $header-filter-color: $datagrid-columnchooser-item-color !default;
   $header-filter-color-empty: color.change($header-filter-color, $alpha: 0.72) !default;
-  $datagrid-row-error-color: $base-inverted-text-color !default;
   $datagrid-columnchooser-item-bg: $datagrid-columnchooser-bg !default;
   $datagrid-row-alternation-bg: color.adjust($datagrid-base-background-color, $lightness: -4%, $space: hsl) !default;
   $datagrid-text-stub-background-image-path: data-uri('images/widgets/fluent/color-schemes/light/grid/text-stub.png') !default;
@@ -200,7 +199,6 @@ $datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity;
   $datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.4) !default;
   $header-filter-color: $datagrid-columnchooser-item-color !default;
   $header-filter-color-empty: color.change($header-filter-color, $alpha: 0.38) !default;
-  $datagrid-row-error-color: rgba(255, 255, 255, 1) !default;
   $datagrid-columnchooser-item-bg: color.adjust($datagrid-columnchooser-bg, $lightness: 3%, $space: hsl) !default;
   $datagrid-row-alternation-bg: color.adjust($datagrid-base-background-color, $lightness: 4%, $space: hsl) !default;
   $datagrid-text-stub-background-image-path: data-uri('images/widgets/fluent/color-schemes/dark/grid/text-stub.png') !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/pivotGrid/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/pivotGrid/_colors.scss
index ff166d8db034..0f07777dabf6 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/pivotGrid/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/pivotGrid/_colors.scss
@@ -33,7 +33,7 @@ $pivotgrid-grandtotalcolor: null !default;
 * $name 40. Field area text color
 * $type color
 */
-$pivotgrid-field-area-text-color: color.change(color.adjust($pivotgrid-area-color, $lightness: -26.2%, $space: hsl), $alpha: 0.3) !default;
+$pivotgrid-field-area-text-color: $base-label-color !default;
 $pivotgrid-accent-color: $base-accent !default;
 $pivotgrid-drag-header-border-color: color.change($pivotgrid-accent-color, $alpha: 0.5) !default;
 $pivotgrid-drag-header-first-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/scheduler/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/scheduler/_colors.scss
index d582b27f392a..96b0642dcdb4 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/scheduler/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/scheduler/_colors.scss
@@ -53,7 +53,7 @@ $scheduler-workspace-focused-cell-color: null !default;
 */
 $scheduler-first-month-border-color: $base-border-color !default;
 $scheduler-droppable-cell-background-color: color.adjust($base-element-bg, $lightness: -5%, $space: hsl) !default;
-$scheduler-panel-text-color: color.change($base-text-color, $alpha: 0.54) !default;
+$scheduler-panel-text-color: $base-label-color !default;
 $scheduler-workspace-background-color: $base-bg !default;
 $scheduler-workspace-accent-color: $base-accent !default;
 
@@ -66,13 +66,14 @@ $scheduler-time-indicator-color: #eb5757 !default;
 $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default;
 $scheduler-form-icon-color: $base-icon-color !default;
 $scheduler-popup-title-bg: $scheduler-workspace-background-color !default;
-$scheduler-workspace-month-text-color: color.change($base-text-color, $alpha: 0.54) !default;
+$scheduler-workspace-month-text-color: $base-text-color !default;
+$scheduler-workspace-other-month-text-color: $base-label-color !default;
 $scheduler-dropdown-appointment-date-color: color.change($base-text-color, $alpha: 0.54) !default;
 $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default;
 $scheduler-workspace-hovered-cell-color: $scheduler-workspace-month-text-color !default;
 $scheduler-header-bg: $base-bg !default;
 $scheduler-alldaypanel-bg: $base-element-bg !default;
-$scheduler-other-month-cell-opacity: 0.5 !default;
+$scheduler-other-month-cell-opacity: 1 !default;
 $scheduler-fill-focused-appointment: false !default;
 $scheduler-is-shadow-color-for-focused-state: false !default;
 $scheduler-time-indicator-background-color: rgba(0, 0, 0, 0.03) !default;
@@ -89,9 +90,7 @@ $agenda-appointment-text-color: $base-text-color !default;
 $header-panel-cell-date: null !default;
 
 @if $mode == "light" {
-  $scheduler-workspace-month-text-color: #707070;
   $scheduler-appointment-text-color: #000 !default;
-  $scheduler-panel-text-color: #707070;
   $header-panel-cell-date: #424242;
 
   @if $color == "blue"{
@@ -110,10 +109,8 @@ $header-panel-cell-date: null !default;
 }
 
 @if $mode == "dark" {
-  $scheduler-workspace-month-text-color: #999;
   $scheduler-appointment-base-color: color.adjust($base-accent, $lightness: -48%, $space: hsl) !default;
   $scheduler-appointment-text-color: #fff !default;
-  $scheduler-panel-text-color: #999;
   $header-panel-cell-date: #adadad;
   $scheduler-cell-hover-bg: $base-hover-bg !default;
 
diff --git a/packages/devextreme-scss/scss/widgets/fluent/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/scheduler/_index.scss
index e1f8f81ed3e1..78d3cee8c9c2 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/scheduler/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/scheduler/_index.scss
@@ -421,6 +421,10 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
 }
 
 .dx-scheduler-work-space.dx-scheduler-work-space-month {
+  .dx-scheduler-date-table-other-month {
+    color: $scheduler-workspace-other-month-text-color;
+  }
+
   .dx-scheduler-header-panel-cell-date:last-child {
     color: $header-panel-cell-date;
     border-radius: initial;
diff --git a/packages/devextreme-scss/scss/widgets/material/_colors.scss b/packages/devextreme-scss/scss/widgets/material/_colors.scss
index d6f74d3f8731..84923bbaedf0 100644
--- a/packages/devextreme-scss/scss/widgets/material/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/material/_colors.scss
@@ -62,19 +62,19 @@ $base-shadow-color: null !default;
 * $name 50. Success color
 * $type color
 */
-$base-success: #8bc34a !default;
+$base-success: null !default;
 
 /**
 * $name 60. Warning color
 * $type color
 */
-$base-warning: #ffc107 !default;
+$base-warning: null !default;
 
 /**
 * $name 70. Danger color
 * $type color
 */
-$base-danger: #f44336 !default;
+$base-danger: null !default;
 
 /**
 * $name 80. Hover state text color
@@ -104,60 +104,70 @@ $base-inverted-icon-color: null !default;
 $base-disabled-opacity: 0.38 !default;
 $base-disabled-color: null !default;
 $base-dropdown-shadow-color: null !default;
-$base-invalid-color: $base-danger !default;
-$base-invalid-faded-border-color: color.change($base-invalid-color, $alpha: 0.4) !default;
 $scrollview-pulldown-path: null !default;
 
 
 @if $color == "blue" {
   $material-color-accent-modificator: "blue" !default;
-  $base-accent: #03a9f4 !default;
 }
 
 @if $color == "lime" {
   $material-color-accent-modificator: "lime" !default;
   $base-accent: #cddc39 !default;
+  $base-success: #8bc34a  !default;
+  $base-warning: #ffc107 !default;
+  $base-danger: #f44336 !default;
 }
 
 @if $color == "orange" {
   $material-color-accent-modificator: "orange" !default;
   $base-accent: #ff5722 !default;
-  $base-danger: #e91e63 !default;
+  $base-success: #8bc34a  !default;
+  $base-warning: #ffc107 !default;
+  $base-danger: #f44336 !default;
 }
 
 @if $color == "purple" {
   $material-color-accent-modificator: "purple" !default;
   $base-accent: #9c27b0 !default;
+  $base-success: #8bc34a  !default;
+  $base-warning: #ffc107 !default;
+  $base-danger: #f44336 !default;
 }
 
 @if $color == "teal" {
   $material-color-accent-modificator: "teal" !default;
   $base-accent: #009688 !default;
+  $base-success: #8bc34a  !default;
+  $base-warning: #ffc107 !default;
+  $base-danger: #f44336 !default;
 }
 
-/**
-* $name 30. Link color
-* $type color
-*/
-$base-link-color: $base-accent !default;
-
 @if $mode == "light" {
   $material-color-theme-modificator: "light" !default;
+
+  @if $color == "blue" {
+    $base-accent: #1564C0 !default;
+    $base-success: #2E7D32 !default;
+    $base-warning: #DD2C00 !default;
+    $base-danger: #C62828 !default;
+  }
+
   $base-text-color: rgba(0, 0, 0, 0.87) !default;
   $base-label-color: rgba(0, 0, 0, 0.6) !default;
   $base-disabled-color: rgba(0, 0, 0, $base-disabled-opacity) !default;
-  $base-icon-color: color.change($base-text-color, $alpha: 0.54) !default;
-  $base-spin-icon-color: color.change($base-text-color, $alpha: 0.54) !default;
+  $base-icon-color: color.change($base-text-color, $alpha: 0.6) !default;
+  $base-spin-icon-color: color.change($base-text-color, $alpha: 0.6) !default;
   $base-bg: #fff !default;
   $base-border-color: #e0e0e0 !default;
   $base-inverted-bg: color.adjust($base-bg, $lightness: -100%, $space: hsl) !default;
   $base-element-bg: $base-bg !default;
   $base-shadow-color: $base-inverted-bg !default;
   $base-hover-color: $base-text-color !default;
-  $base-hover-bg: color.change(#000, $alpha: 0.04) !default;
+  $base-hover-bg: color.change(#fff, $alpha: 0.08) !default;
   $base-inverted-text-color: #fff !default;
   $base-focus-color: $base-inverted-text-color !default;
-  $base-focus-bg: color.change(#000, $alpha: 0.04) !default;
+  $base-focus-bg: color.change(#fff, $alpha: 0.08) !default;
   $base-inverted-icon-color: $base-inverted-text-color !default;
   $base-dropdown-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
 
@@ -165,13 +175,20 @@ $base-link-color: $base-accent !default;
 }
 
 @if $mode == "dark" {
+  @if $color == "blue" {
+    $base-accent: #90CAF9 !default;
+    $base-success: #A5D6A7 !default;
+    $base-warning: #FFAB91 !default;
+    $base-danger: #EF9A9A !default;
+  }
+
   $material-color-theme-modificator: "dark" !default;
   $base-text-color: #fff !default;
   $base-label-color: rgba(255, 255, 255, 0.6) !default;
   $base-disabled-color: rgba(255, 255, 255, $base-disabled-opacity) !default;
-  $base-icon-color: color.change($base-text-color, $alpha: 0.54) !default;
-  $base-spin-icon-color: color.change($base-text-color, $alpha: 0.54) !default;
-  $base-bg: #363640 !default;
+  $base-icon-color: color.change($base-text-color, $alpha: 0.6) !default;
+  $base-spin-icon-color: color.change($base-text-color, $alpha: 0.6) !default;
+  $base-bg: #292929 !default;
   $base-border-color: #515159 !default;
   $base-inverted-bg: color.adjust($base-bg, $lightness: 100%, $space: hsl) !default;
   $base-element-bg: $base-bg !default;
@@ -187,6 +204,15 @@ $base-link-color: $base-accent !default;
   $scrollview-pulldown-path: data-uri('images/widgets/material/color-schemes/dark/pulldown.png') !default;
 }
 
+/**
+* $name 30. Link color
+* $type color
+*/
+$base-link-color: $base-accent !default;
+
+$base-invalid-color: $base-danger !default;
+$base-invalid-faded-border-color: color.change($base-invalid-color, $alpha: 0.4) !default;
+
 $typography-bg: $base-bg !default;
 $typography-color: $base-text-color !default;
 $typography-link-color: $base-link-color !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/button/_colors.scss b/packages/devextreme-scss/scss/widgets/material/button/_colors.scss
index e4648cc856e8..16dbe6f244e9 100644
--- a/packages/devextreme-scss/scss/widgets/material/button/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/material/button/_colors.scss
@@ -6,6 +6,7 @@
 
 $button-border-radius: $base-border-radius !default;
 $button-disabled-background: null !default;
+$button-disabled-text-color: null !default;
 $button-disabled-icon-opacity: 0.6 !default;
 $button-shadow-color: null !default;
 
@@ -98,9 +99,9 @@ $button-default-selected-bg: null !default;
 $button-default-icon-color: $button-default-color !default;
 $button-default-outlined-bg: transparent !default;
 $button-default-outlined-hover-bg: color.change($button-default-bg, $alpha: 0.08) !default;
-$button-default-outlined-focused-bg: color.change($button-default-bg, $alpha: 0.08) !default;
-$button-default-outlined-active-bg: color.change($button-default-bg, $alpha: 0.36) !default;
-$button-default-outlined-selected-bg: color.change($button-default-bg, $alpha: 0.36) !default;
+$button-default-outlined-focused-bg: color.change($button-default-bg, $alpha: 0.16) !default;
+$button-default-outlined-active-bg: color.change($button-default-bg, $alpha: 0.18) !default;
+$button-default-outlined-selected-bg: color.change($button-default-bg, $alpha: 0.12) !default;
 
 /**
 * $name 11. Text color (outlined)
@@ -116,9 +117,9 @@ $button-default-outlined-border-color: $button-default-bg !default;
 $button-default-outlined-selected-color: $button-default-bg !default;
 $button-default-text-bg: transparent !default;
 $button-default-text-hover-bg: color.change($button-default-bg, $alpha: 0.08) !default;
-$button-default-text-focused-bg: color.change($button-default-bg, $alpha: 0.08) !default;
-$button-default-text-active-bg: color.change($button-default-bg, $alpha: 0.36) !default;
-$button-default-text-selected-bg: color.change($button-default-bg, $alpha: 0.36) !default;
+$button-default-text-focused-bg: color.change($button-default-bg, $alpha: 0.16) !default;
+$button-default-text-active-bg: color.change($button-default-bg, $alpha: 0.18) !default;
+$button-default-text-selected-bg: color.change($button-default-bg, $alpha: 0.12) !default;
 
 /**
 * $name 11. Text color (text)
@@ -176,16 +177,16 @@ $button-danger-selected-bg: null !default;
 $button-danger-icon-color: $button-danger-color !default;
 $button-danger-outlined-bg: transparent !default;
 $button-danger-outlined-hover-bg: color.change($button-danger-bg, $alpha: 0.08) !default;
-$button-danger-outlined-focused-bg: color.change($button-danger-bg, $alpha: 0.08) !default;
-$button-danger-outlined-active-bg: color.change($button-danger-bg, $alpha: 0.36) !default;
-$button-danger-outlined-selected-bg: color.change($button-danger-bg, $alpha: 0.36) !default;
+$button-danger-outlined-focused-bg: color.change($button-danger-bg, $alpha: 0.16) !default;
+$button-danger-outlined-active-bg: color.change($button-danger-bg, $alpha: 0.18) !default;
+$button-danger-outlined-selected-bg: color.change($button-danger-bg, $alpha: 0.12) !default;
 $button-danger-outlined-selected-color: $button-danger-bg !default;
 
 $button-danger-text-bg: transparent !default;
 $button-danger-text-hover-bg: color.change($button-danger-bg, $alpha: 0.08) !default;
-$button-danger-text-focused-bg: color.change($button-danger-bg, $alpha: 0.08) !default;
-$button-danger-text-active-bg: color.change($button-danger-bg, $alpha: 0.36) !default;
-$button-danger-text-selected-bg: color.change($button-danger-bg, $alpha: 0.36) !default;
+$button-danger-text-focused-bg: color.change($button-danger-bg, $alpha: 0.16) !default;
+$button-danger-text-active-bg: color.change($button-danger-bg, $alpha: 0.18) !default;
+$button-danger-text-selected-bg: color.change($button-danger-bg, $alpha: 0.12) !default;
 $button-danger-text-selected-color: $button-danger-bg !default;
 
 /**
@@ -232,63 +233,64 @@ $button-success-selected-bg: null !default;
 $button-success-icon-color: $button-success-color !default;
 $button-success-outlined-bg: transparent !default;
 $button-success-outlined-hover-bg: color.change($button-success-bg, $alpha: 0.08) !default;
-$button-success-outlined-focused-bg: color.change($button-success-bg, $alpha: 0.08) !default;
-$button-success-outlined-active-bg: color.change($button-success-bg, $alpha: 0.36) !default;
-$button-success-outlined-selected-bg: color.change($button-success-bg, $alpha: 0.36) !default;
+$button-success-outlined-focused-bg: color.change($button-success-bg, $alpha: 0.16) !default;
+$button-success-outlined-active-bg: color.change($button-success-bg, $alpha: 0.18) !default;
+$button-success-outlined-selected-bg: color.change($button-success-bg, $alpha: 0.12) !default;
 $button-success-outlined-selected-color: $button-success-bg !default;
 
 $button-success-text-bg: transparent !default;
 $button-success-text-hover-bg: color.change($button-success-bg, $alpha: 0.08) !default;
-$button-success-text-focused-bg: color.change($button-success-bg, $alpha: 0.08) !default;
-$button-success-text-active-bg: color.change($button-success-bg, $alpha: 0.36) !default;
-$button-success-text-selected-bg: color.change($button-success-bg, $alpha: 0.36) !default;
+$button-success-text-focused-bg: color.change($button-success-bg, $alpha: 0.16) !default;
+$button-success-text-active-bg: color.change($button-success-bg, $alpha: 0.18) !default;
+$button-success-text-selected-bg: color.change($button-success-bg, $alpha: 0.12) !default;
 $button-success-text-selected-color: $button-success-bg !default;
 
 @if $mode == "light" {
-  $button-disabled-background: rgba(0, 0, 0, 0.1) !default;
+  $button-disabled-background: rgba(0, 0, 0, 0.12) !default;
+  $button-disabled-text-color: rgba(0, 0, 0, 0.38) !default;
   $button-shadow-color: rgba(0, 0, 0, 0.24) !default;
   $button-normal-hover-bg: color.adjust($button-normal-bg, $lightness: -8%, $space: hsl) !default;
   $button-normal-focused-bg: color.adjust($button-normal-bg, $lightness: -8%, $space: hsl) !default;
   $button-normal-active-bg: color.adjust($button-normal-bg, $lightness: -30%, $space: hsl) !default;
   $button-normal-selected-bg: color.adjust($button-normal-bg, $lightness: -18%, $space: hsl) !default;
   $button-normal-bg-inverted: color.adjust($button-normal-bg, $lightness: -100%, $space: hsl) !default;
-  $button-default-hover-bg: color.adjust($button-default-bg, $lightness: -8.5%, $space: hsl) !default;
-  $button-default-focused-bg: color.adjust($button-default-bg, $lightness: -8.5%, $space: hsl) !default;
-  $button-default-active-bg: color.adjust($button-default-bg, $lightness: -19.5%, $space: hsl) !default;
-  $button-default-selected-bg: color.adjust($button-default-bg, $lightness: -19.5%, $space: hsl) !default;
-  $button-danger-hover-bg: color.adjust($button-danger-bg, $lightness: -8.5%, $space: hsl) !default;
-  $button-danger-focused-bg: color.adjust($button-danger-bg, $lightness: -8.5%, $space: hsl) !default;
-  $button-danger-active-bg: color.adjust($button-danger-bg, $lightness: -19.5%, $space: hsl) !default;
-  $button-danger-selected-bg: color.adjust($button-danger-bg, $lightness: -19.5%, $space: hsl) !default;
-  $button-success-hover-bg: color.adjust($button-success-bg, $lightness: -8.5%, $space: hsl) !default;
-  $button-success-focused-bg: color.adjust($button-success-bg, $lightness: -8.5%, $space: hsl) !default;
-  $button-success-active-bg: color.adjust($button-success-bg, $lightness: -19.5%, $space: hsl) !default;
-  $button-success-selected-bg: color.adjust($button-success-bg, $lightness: -19.5%, $space: hsl) !default;
+  $button-default-hover-bg: color.adjust($button-default-bg, $lightness: 4.12%, $space: hsl) !default;
+  $button-default-focused-bg: color.adjust($button-default-bg, $lightness: 12.6%, $space: hsl) !default;
+  $button-default-active-bg: color.adjust($button-default-bg, $lightness: 19.61%, $space: hsl) !default;
+  $button-default-selected-bg: color.adjust($button-default-bg, $lightness: 9.02%, $space: hsl) !default;
+  $button-danger-hover-bg: color.adjust($button-danger-bg, $lightness: 3.92%, $space: hsl) !default;
+  $button-danger-focused-bg: color.adjust($button-danger-bg, $lightness: 11.37%, $space: hsl) !default;
+  $button-danger-active-bg: color.adjust($button-danger-bg, $lightness: 15.88%, $space: hsl) !default;
+  $button-danger-selected-bg: color.adjust($button-danger-bg, $lightness: 8.62%, $space: hsl) !default;
+  $button-success-hover-bg: color.adjust($button-success-bg, $lightness: 4.90%, $space: hsl) !default;
+  $button-success-focused-bg: color.adjust($button-success-bg, $lightness: 14.51%, $space: hsl) !default;
+  $button-success-active-bg: color.adjust($button-success-bg, $lightness: 22.75%, $space: hsl) !default;
+  $button-success-selected-bg: color.adjust($button-success-bg, $lightness: 10.9%, $space: hsl) !default;
 }
 
 @if $mode == "dark" {
-  $button-disabled-background: rgba(255, 255, 255, 0.1) !default;
+  $button-disabled-background: rgba(255, 255, 255, 0.12) !default;
+  $button-disabled-text-color: rgba(255, 255, 255, 0.38) !default;
   $button-shadow-color: rgba(0, 0, 0, 0.4) !default;
   $button-normal-hover-bg: color.adjust($button-normal-bg, $lightness: 8%, $space: hsl) !default;
   $button-normal-focused-bg: color.adjust($button-normal-bg, $lightness: 8%, $space: hsl) !default;
   $button-normal-active-bg: color.adjust($button-normal-bg, $lightness: 30%, $space: hsl) !default;
   $button-normal-selected-bg: color.adjust($button-normal-bg, $lightness: 18%, $space: hsl) !default;
   $button-normal-bg-inverted: color.adjust($button-normal-bg, $lightness: 100%, $space: hsl) !default;
-  $button-default-hover-bg: color.adjust($button-default-bg, $lightness: 8.5%, $space: hsl) !default;
-  $button-default-focused-bg: color.adjust($button-default-bg, $lightness: 8.5%, $space: hsl) !default;
-  $button-default-active-bg: color.adjust($button-default-focused-bg, $lightness: 19.5%, $space: hsl) !default;
-  $button-default-selected-bg: color.adjust($button-default-focused-bg, $lightness: 19.5%, $space: hsl) !default;
-  $button-danger-hover-bg: color.adjust($button-danger-bg, $lightness: 8.5%, $space: hsl) !default;
-  $button-danger-focused-bg: color.adjust($button-danger-bg, $lightness: 8.5%, $space: hsl) !default;
-  $button-danger-active-bg: color.adjust($button-danger-bg, $lightness: 19.5%, $space: hsl) !default;
-  $button-danger-selected-bg: color.adjust($button-danger-bg, $lightness: 19.5%, $space: hsl) !default;
-  $button-success-hover-bg: color.adjust($button-success-bg, $lightness: 8.5%, $space: hsl) !default;
-  $button-success-focused-bg: color.adjust($button-success-bg, $lightness: 8.5%, $space: hsl) !default;
-  $button-success-active-bg: color.adjust($button-success-bg, $lightness: 19.5%, $space: hsl) !default;
-  $button-success-selected-bg: color.adjust($button-success-bg, $lightness: 19.5%, $space: hsl) !default;
+  $button-default-hover-bg: color.adjust($button-default-bg, $lightness: -9.22%, $space: hsl) !default;
+  $button-default-focused-bg: color.adjust($button-default-bg, $lightness: -22.75%, $space: hsl) !default;
+  $button-default-active-bg: color.adjust($button-default-focused-bg, $lightness: -26.28%, $space: hsl) !default;
+  $button-default-selected-bg: color.adjust($button-default-focused-bg, $lightness: -15.69%, $space: hsl) !default;
+  $button-danger-hover-bg: color.adjust($button-danger-bg, $lightness: -9.81%, $space: hsl) !default;
+  $button-danger-focused-bg: color.adjust($button-danger-bg, $lightness: -19.02%, $space: hsl) !default;
+  $button-danger-active-bg: color.adjust($button-danger-bg, $lightness: -21.77%, $space: hsl) !default;
+  $button-danger-selected-bg: color.adjust($button-danger-bg, $lightness: -14.51%, $space: hsl) !default;
+  $button-success-hover-bg: color.adjust($button-success-bg, $lightness: -10.19%, $space: hsl) !default;
+  $button-success-focused-bg: color.adjust($button-success-bg, $lightness: -17.64%, $space: hsl) !default;
+  $button-success-active-bg: color.adjust($button-success-bg, $lightness: -29.60%, $space: hsl) !default;
+  $button-success-selected-bg: color.adjust($button-success-bg, $lightness: -25.88%, $space: hsl) !default;
 }
 
-$button-disabled-text-color: $button-disabled-background !default;
 $button-hover-shadow-color: $button-shadow-color !default;
 $button-focused-shadow-color: color.adjust($button-shadow-color, $alpha: 0.08) !default;
 $button-active-shadow-color: color.adjust($button-shadow-color, $alpha: 0.08) !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/calendar/_colors.scss b/packages/devextreme-scss/scss/widgets/material/calendar/_colors.scss
index 49a488bd7e5d..e3766e88e0f1 100644
--- a/packages/devextreme-scss/scss/widgets/material/calendar/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/material/calendar/_colors.scss
@@ -23,8 +23,8 @@ $calendar-header-color: $calendar-color !default;
 * $name 40. Other month text color
 * $type color
 */
-$calendar-cell-other-color: color.change($calendar-color, $alpha: 0.38) !default;
-$calendar-cell-other-hover-color: color.change($calendar-color, $alpha: 0.38) !default;
+$calendar-cell-other-color: $base-label-color !default;
+$calendar-cell-other-hover-color: $base-label-color !default;
 $calendar-bg: $base-bg !default;
 $calendar-hover-bg: color.change($base-accent, $alpha: 0.24) !default;
 $calendar-cell-hover-border-color: color.change($base-accent, $alpha: 0.6) !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/cardView/_colors.scss b/packages/devextreme-scss/scss/widgets/material/cardView/_colors.scss
index e5fbc98e7bad..54b196a239a2 100644
--- a/packages/devextreme-scss/scss/widgets/material/cardView/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/material/cardView/_colors.scss
@@ -382,7 +382,7 @@ $cardview-material-nodata-view__icon-bg-color: null !default;
 * $name 1100. Background color
 * $type color
 */
-$cardview-material-card__content__field-value--highlighted-bg-color: null !default;
+$cardview-material-card__content__field-value--highlighted-bg-color: #FFE082 !default;
 
 /**
 * $name 1102. Text color
@@ -484,8 +484,7 @@ $cardview-material-columnchooser--empty__message-color: null !default;
   $cardview-material-nodata-view__icon-bg-color: color.adjust($base-bg, $lightness: -7.84%, $space: hsl) !default;
 
   // Search highlight
-  $cardview-material-card__content__field-value--highlighted-bg-color: $base-warning !default;
-  $cardview-material-card__content__field-value--highlighted-text-color: $cardview-material-common-text-color !default;
+  $cardview-material-card__content__field-value--highlighted-text-color: rgba(0, 0, 0, 1) !default;
   $cardview-material-card__content__field-value--highlighted-box-shadow-color: rgba(0, 0, 0, 0.25) !default;
 
   // Column chooser
@@ -572,8 +571,7 @@ $cardview-material-columnchooser--empty__message-color: null !default;
   $cardview-material-nodata-view__icon-bg-color: color.adjust($base-bg, $saturation: -0.3%, $space: hsl, $lightness: 8.04%) !default;
 
   // Search highlight
-  $cardview-material-card__content__field-value--highlighted-bg-color: $base-warning !default;
-  $cardview-material-card__content__field-value--highlighted-text-color: $cardview-material-common-text-color !default;
+  $cardview-material-card__content__field-value--highlighted-text-color: $base-inverted-text-color !default;
   $cardview-material-card__content__field-value--highlighted-box-shadow-color: rgba(0, 0, 0, 0.25) !default;
 
   // Column chooser
diff --git a/packages/devextreme-scss/scss/widgets/material/checkBox/_index.scss b/packages/devextreme-scss/scss/widgets/material/checkBox/_index.scss
index d46841298d93..8775c6a8842a 100644
--- a/packages/devextreme-scss/scss/widgets/material/checkBox/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/checkBox/_index.scss
@@ -19,7 +19,15 @@ $material-checkbox-ripple-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
 
   &.dx-state-readonly,
   &.dx-state-disabled {
-    border-color: color.change($checkbox-border-color, $alpha: 0.26);
+    opacity: 1;
+
+    .dx-checkbox-icon {
+      border-color: $base-disabled-color;
+    }
+
+    .dx-checkbox-text {
+      color: $base-disabled-color;
+    }
   }
 
   &.dx-state-focused,
@@ -43,7 +51,7 @@ $material-checkbox-ripple-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
     &.dx-state-readonly,
     &.dx-state-disabled {
       .dx-checkbox-icon {
-        background-color: color.change($checkbox-border-color, $alpha: 0.26);
+        background-color: $base-disabled-color;
       }
     }
   }
diff --git a/packages/devextreme-scss/scss/widgets/material/contextMenu/_index.scss b/packages/devextreme-scss/scss/widgets/material/contextMenu/_index.scss
index d375e0897296..e8328cf3319d 100644
--- a/packages/devextreme-scss/scss/widgets/material/contextMenu/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/contextMenu/_index.scss
@@ -18,7 +18,6 @@
 .dx-context-menu {
   .dx-menu-item {
     font-size: $material-context-menu-font-size;
-    color: $base-text-color;
 
     .dx-menu-item-content {
       display: flex;
diff --git a/packages/devextreme-scss/scss/widgets/material/dropDownButton/_index.scss b/packages/devextreme-scss/scss/widgets/material/dropDownButton/_index.scss
index ba9a6978b4a7..d62e1de1c1ff 100644
--- a/packages/devextreme-scss/scss/widgets/material/dropDownButton/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/dropDownButton/_index.scss
@@ -18,6 +18,12 @@
   $material-dropdownbutton-action-horizontal-padding,
 );
 
+.dx-dropdownbutton {
+  &.dx-state-disabled {
+    opacity: 1;
+  }
+}
+
 .dx-dropdownbutton-popup-wrapper {
   @include dx-dropdownlist-list-appearance();
 }
diff --git a/packages/devextreme-scss/scss/widgets/material/fileUploader/_colors.scss b/packages/devextreme-scss/scss/widgets/material/fileUploader/_colors.scss
index fd0b584243d0..503fe5941d9c 100644
--- a/packages/devextreme-scss/scss/widgets/material/fileUploader/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/material/fileUploader/_colors.scss
@@ -15,7 +15,7 @@ $fileuploader-file-icon-color: $base-icon-color !default;
 * $name 20. File status text color
 * $type color
 */
-$fileuploader-falename-status-color: color.adjust($fileuploader-filename-color, $lightness: 40%, $space: hsl) !default;
+$fileuploader-falename-status-color: $base-label-color !default;
 
 /**
 * $name 30. Drag-and-drop border color
diff --git a/packages/devextreme-scss/scss/widgets/material/gantt/_colors.scss b/packages/devextreme-scss/scss/widgets/material/gantt/_colors.scss
index c63983f21e0e..f02adc1151eb 100644
--- a/packages/devextreme-scss/scss/widgets/material/gantt/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/material/gantt/_colors.scss
@@ -8,13 +8,37 @@
 $gantt-collapsable-row-bg: null !default;
 $gantt-icon-color: $datagrid-columnchooser-item-color !default;
 $gantt-parent-task-background-color: null !default;
+$gantt-task-progress-background-color: null !default;
+$gantt-task-color: null !default;
+$gantt-task-background-color: null !default;
 
 @if $color == "lime" {
   $gantt-parent-task-background-color: #f44336 !default;
+  $gantt-task-progress-background-color: rgba(0, 0, 0, 0.2) !default;
+  $gantt-task-color: #fff;
+  $gantt-task-background-color: #999;
 }
 
-@if $color == "blue" or $color == "orange" or $color == "purple" or $color == "teal" {
+@if $color == "blue" {
+  $gantt-parent-task-background-color: $base-success !default;
+  $gantt-task-color: $base-inverted-text-color !default;
+
+  @if $mode == "light" {
+    $gantt-task-progress-background-color: rgba(0, 0, 0, 0.2) !default;
+    $gantt-task-background-color: color.adjust($base-bg, $lightness: -60%, $space: hsl) !default;
+  }
+
+  @if $mode == "dark" {
+    $gantt-task-progress-background-color: rgba(255, 255, 255, 0.32) !default;
+    $gantt-task-background-color: color.adjust($base-bg, $lightness: 60%, $space: hsl) !default;
+  }
+}
+
+@if $color == "orange" or $color == "purple" or $color == "teal" {
   $gantt-parent-task-background-color: #8bc34a !default;
+  $gantt-task-progress-background-color: rgba(0, 0, 0, 0.2) !default;
+  $gantt-task-color: #fff;
+  $gantt-task-background-color: #999;
 }
 
 @if $mode == "light" {
diff --git a/packages/devextreme-scss/scss/widgets/material/gantt/_index.scss b/packages/devextreme-scss/scss/widgets/material/gantt/_index.scss
index 460bec186628..9eae8abe7119 100644
--- a/packages/devextreme-scss/scss/widgets/material/gantt/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/gantt/_index.scss
@@ -90,7 +90,7 @@ $gantt-successor-background-color: white;
 
       .dx-gantt-tPrg {
         border-radius: $base-border-radius;
-        background-color: rgba(0, 0, 0, 0.2);
+        background-color: $gantt-task-progress-background-color;
       }
 
       &.dx-gantt-smallTask {
@@ -112,7 +112,7 @@ $gantt-successor-background-color: white;
         border-bottom-left-radius: 0;
 
         &:not(.dx-gantt-noPrg) .dx-gantt-tPrg {
-          background-color: rgba(255, 255, 255, 0.2);
+          background-color: $gantt-task-progress-background-color;
         }
 
         &:not(.dx-gantt-smallTask)::before,
@@ -134,8 +134,8 @@ $gantt-successor-background-color: white;
         }
 
         &:not(.dx-gantt-noPrg) .dx-gantt-tPrg::before {
-          border-left-color: rgba(255, 255, 255, 0.2);
-          border-top-color: rgba(255, 255, 255, 0.2);
+          border-left-color: $gantt-task-progress-background-color;
+          border-top-color: $gantt-task-progress-background-color;
         }
 
         &::after,
@@ -146,8 +146,8 @@ $gantt-successor-background-color: white;
         }
 
         &.dx-gantt-cmpl::after {
-          border-right-color: rgba(255, 255, 255, 0.2);
-          border-top-color: rgba(255, 255, 255, 0.2);
+          border-right-color: $gantt-task-progress-background-color;
+          border-top-color: $gantt-task-progress-background-color;
         }
 
         &.dx-gantt-cmpl .dx-gantt-tPrg::after {
@@ -162,7 +162,7 @@ $gantt-successor-background-color: white;
     }
 
     .dx-gantt-titleIn {
-      color: #fff;
+      color: $gantt-task-color;
       padding: 0 $gantt-task-title-padding-left;
     }
   }
@@ -170,8 +170,8 @@ $gantt-successor-background-color: white;
   .dx-gantt-taskRes {
     height: $gantt-task-height;
     line-height: $gantt-task-height;
-    color: #fff;
-    background-color: #999;
+    color: $gantt-task-color;
+    background-color: $gantt-task-background-color;
     border-radius: $base-border-radius;
     margin-left: 21px;
     padding-left: 4px;
diff --git a/packages/devextreme-scss/scss/widgets/material/gridBase/_colors.scss b/packages/devextreme-scss/scss/widgets/material/gridBase/_colors.scss
index 270beb644d98..659ee616a5bf 100644
--- a/packages/devextreme-scss/scss/widgets/material/gridBase/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/material/gridBase/_colors.scss
@@ -125,13 +125,13 @@ $datagrid-search-bg: $base-accent !default;
 * $name 115. Error row text color
 * $type color
 */
-$datagrid-row-error-color: null !default;
+$datagrid-row-error-color: $base-inverted-text-color !default;
 
 /**
 * $name 120. Error row background color
 * $type color
 */
-$datagrid-row-error-bg: color.mix($base-invalid-color, $datagrid-base-background-color, 60%) !default;
+$datagrid-row-error-bg: $base-invalid-color !default;
 $datagrid-link-color: $base-link-color !default;
 
 /**
@@ -180,7 +180,6 @@ $datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity;
   $datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
   $header-filter-color: $datagrid-columnchooser-item-color !default;
   $header-filter-color-empty: color.change($header-filter-color, $alpha: 0.72) !default;
-  $datagrid-row-error-color: $base-inverted-text-color !default;
   $datagrid-columnchooser-item-bg: $datagrid-columnchooser-bg !default;
   $datagrid-row-alternation-bg: color.adjust($datagrid-base-background-color, $lightness: -4%, $space: hsl) !default;
   $datagrid-hover-bg: color.adjust($datagrid-base-background-color, $lightness: -4%, $space: hsl) !default;
@@ -195,7 +194,6 @@ $datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity;
   $datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.4) !default;
   $header-filter-color: $datagrid-columnchooser-item-color !default;
   $header-filter-color-empty: color.change($header-filter-color, $alpha: 0.38) !default;
-  $datagrid-row-error-color: rgba(255, 255, 255, 1) !default;
   $datagrid-columnchooser-item-bg: color.adjust($datagrid-columnchooser-bg, $lightness: 3%, $space: hsl) !default;
   $datagrid-row-alternation-bg: color.adjust($datagrid-base-background-color, $lightness: 4%, $space: hsl) !default;
   $datagrid-hover-bg: color.adjust($datagrid-base-background-color, $lightness: 4%, $space: hsl) !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/list/_index.scss b/packages/devextreme-scss/scss/widgets/material/list/_index.scss
index f8a43b0e9424..85daf28b9327 100644
--- a/packages/devextreme-scss/scss/widgets/material/list/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/list/_index.scss
@@ -320,7 +320,7 @@ $material-list-searchbox-padding-top: $material-list-searchbox-vertical-padding
 
   .dx-list .dx-empty-message { // stylelint-disable-line no-duplicate-selectors
     padding: math.div($material-list-item-vertical-padding, 2) + 1px $item-horizontal-padding math.div($material-list-item-vertical-padding, 2);
-    color: color.change($list-normal-color, $alpha: 0.54);
+    color: color.change($list-normal-color, $alpha: 0.6);
     font-size: 12px;
   }
 
diff --git a/packages/devextreme-scss/scss/widgets/material/loadIndicator/_colors.scss b/packages/devextreme-scss/scss/widgets/material/loadIndicator/_colors.scss
index 38a079202f40..2480de0632b3 100644
--- a/packages/devextreme-scss/scss/widgets/material/loadIndicator/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/material/loadIndicator/_colors.scss
@@ -15,12 +15,12 @@ $load-indicator-animation-sparkle-bg-color3: null !default;
 
 @if $mode == "light" {
   $load-indicator-animation-sparkle-bg-color1: $base-accent !default;
-  $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $hue: 4deg, $saturation: -6.73%, $space: hsl, $lightness: 25.88%) !default;
-  $load-indicator-animation-sparkle-bg-color3: color.adjust($base-accent, $hue: 4deg, $saturation: -6.87%, $space: hsl, $lightness: 34.71%) !default;
+  $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $hue: 4deg, $saturation: -6.73%, $lightness: 25.88%, $space: hsl,) !default;
+  $load-indicator-animation-sparkle-bg-color3: color.adjust($base-accent, $hue: 4deg, $saturation: -6.87%, $lightness: 34.71%, $space: hsl,) !default;
 }
 
 @else if $mode == "dark" {
   $load-indicator-animation-sparkle-bg-color1: color.adjust($base-accent, $lightness: 19.22%, $space: hsl) !default;
-  $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $hue: 2deg, $saturation: -58.44%, $space: hsl, $lightness: 1.18%) !default;
-  $load-indicator-animation-sparkle-bg-color3: color.adjust($base-accent, $hue: 3deg, $saturation: -64.56%, $space: hsl, $lightness: -7.45%) !default;
+  $load-indicator-animation-sparkle-bg-color2: color.adjust($base-accent, $hue: 2deg, $saturation: -58.44%, $lightness: 1.18%, $space: hsl) !default;
+  $load-indicator-animation-sparkle-bg-color3: color.adjust($base-accent, $hue: 3deg, $saturation: -64.56%, $lightness: -7.45%, $space: hsl) !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/material/menu/_colors.scss b/packages/devextreme-scss/scss/widgets/material/menu/_colors.scss
index 48abaf352310..3bcd4f5df5f1 100644
--- a/packages/devextreme-scss/scss/widgets/material/menu/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/material/menu/_colors.scss
@@ -11,7 +11,7 @@ $menu-item-hover-bg: $base-hover-bg !default;
 * $name 10. Text color
 * $type color
 */
-$menu-color: color.adjust($base-text-color, $lightness: 46%, $space: hsl) !default;
+$menu-color: $base-text-color !default;
 $menu-item-expanded-color: $menu-color !default;
 
 
diff --git a/packages/devextreme-scss/scss/widgets/material/menuBase/_colors.scss b/packages/devextreme-scss/scss/widgets/material/menuBase/_colors.scss
index 89c53a85429e..c408f29332a8 100644
--- a/packages/devextreme-scss/scss/widgets/material/menuBase/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/material/menuBase/_colors.scss
@@ -4,3 +4,4 @@
 
 // adduse
 
+$menu-item-disabled-color: $base-disabled-color !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/menuBase/_index.scss b/packages/devextreme-scss/scss/widgets/material/menuBase/_index.scss
index 1efca1a05e9e..b36c1854fda3 100644
--- a/packages/devextreme-scss/scss/widgets/material/menuBase/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/menuBase/_index.scss
@@ -22,7 +22,7 @@ $material-menu-arrow-image-size: 7px;
   }
 
   &.dx-state-disabled {
-    opacity: 0.5;
+    color: $menu-item-disabled-color;
   }
 
   &.dx-state-hover {
diff --git a/packages/devextreme-scss/scss/widgets/material/pivotGrid/_colors.scss b/packages/devextreme-scss/scss/widgets/material/pivotGrid/_colors.scss
index d892b9375755..6eef92e6c34c 100644
--- a/packages/devextreme-scss/scss/widgets/material/pivotGrid/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/material/pivotGrid/_colors.scss
@@ -11,7 +11,7 @@ $pivotgrid-border-color: $base-border-color !default;
 * $name 10. Header text color
 * $type color
 */
-$pivotgrid-area-color: color.change($base-text-color, $alpha: 0.54) !default;
+$pivotgrid-area-color: $base-text-color !default;
 $pivotgrid-field-area-box-text-color: $pivotgrid-area-color !default;
 $pivotgrid-field-area-box-background-color: null !default;
 $pivotgrid-data-area-color: $base-text-color !default;
@@ -32,7 +32,7 @@ $pivotgrid-grandtotalcolor: $base-hover-bg !default;
 * $name 40. Field area text color
 * $type color
 */
-$pivotgrid-field-area-text-color: color.change(color.adjust($pivotgrid-area-color, $lightness: -26.2%, $space: hsl), $alpha: 0.3) !default;
+$pivotgrid-field-area-text-color: $base-label-color !default;
 $pivotgrid-accent-color: $base-accent !default;
 $pivotgrid-drag-header-border-color: color.change($pivotgrid-accent-color, $alpha: 0.5) !default;
 $pivotgrid-drag-header-first-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/scheduler/_colors.scss b/packages/devextreme-scss/scss/widgets/material/scheduler/_colors.scss
index 65561b9d343e..404f8b130a75 100644
--- a/packages/devextreme-scss/scss/widgets/material/scheduler/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/material/scheduler/_colors.scss
@@ -52,7 +52,7 @@ $scheduler-workspace-focused-cell-color: color.change($base-accent, $alpha: 0.12
 */
 $scheduler-first-month-border-color: $base-border-color !default;
 $scheduler-droppable-cell-background-color: color.adjust($base-element-bg, $lightness: -5%, $space: hsl) !default;
-$scheduler-panel-text-color: color.change($base-text-color, $alpha: 0.54) !default;
+$scheduler-panel-text-color: color.change($base-text-color, $alpha: 0.6) !default;
 $scheduler-workspace-background-color: $base-bg !default;
 $scheduler-workspace-accent-color: $base-accent !default;
 
@@ -65,14 +65,15 @@ $scheduler-time-indicator-color: #eb5757 !default;
 $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default;
 $scheduler-form-icon-color: $base-icon-color !default;
 $scheduler-popup-title-bg: $scheduler-workspace-background-color !default;
-$scheduler-workspace-month-text-color: color.change($base-text-color, $alpha: 0.54) !default;
-$scheduler-dropdown-appointment-date-color: color.change($base-text-color, $alpha: 0.54) !default;
+$scheduler-workspace-month-text-color: $base-text-color !default;
+$scheduler-workspace-other-month-text-color: color.change($base-text-color, $alpha: 0.6) !default;
+$scheduler-dropdown-appointment-date-color: $base-text-color !default;
 $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default;
 $scheduler-workspace-hovered-cell-color: $scheduler-workspace-month-text-color !default;
 $scheduler-group-header-color: color.change($base-text-color, $alpha: 0.87) !default;
 $scheduler-header-bg: $base-bg !default;
 $scheduler-alldaypanel-bg: $base-element-bg !default;
-$scheduler-other-month-cell-opacity: 0.5 !default;
+$scheduler-other-month-cell-opacity: 1 !default;
 $scheduler-fill-focused-appointment: false !default;
 $scheduler-is-shadow-color-for-focused-state: true !default;
 $scheduler-time-indicator-background-color: rgba(0, 0, 0, 0.03) !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/material/scheduler/_index.scss
index 827807e37dee..073b4638f901 100644
--- a/packages/devextreme-scss/scss/widgets/material/scheduler/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/scheduler/_index.scss
@@ -376,6 +376,10 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px;
 }
 
 .dx-scheduler-work-space.dx-scheduler-work-space-month {
+  .dx-scheduler-date-table-other-month {
+    color: $scheduler-workspace-other-month-text-color;
+  }
+
   .dx-scheduler-appointment-content {
     padding-top: 3px;
     font-size: $material-scheduler-appointment-month-text-size;
diff --git a/packages/devextreme-scss/scss/widgets/material/slider/_colors.scss b/packages/devextreme-scss/scss/widgets/material/slider/_colors.scss
index 8de1f6a9f178..bd9822985bac 100644
--- a/packages/devextreme-scss/scss/widgets/material/slider/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/material/slider/_colors.scss
@@ -24,12 +24,4 @@ $material-slider-bar-disabled-bg: color.change($base-text-color, $alpha: 0.24) !
 * $name 30. Slider tooltip text color
 * $type color
 */
-$material-slider-tooltip-color: null !default;
-
-@if $mode == "light" {
-  $material-slider-tooltip-color: $base-inverted-text-color !default;
-}
-
-@if $mode == "dark" {
-  $material-slider-tooltip-color: $base-text-color !default;
-}
+$material-slider-tooltip-color: $base-inverted-text-color !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/slider/_index.scss b/packages/devextreme-scss/scss/widgets/material/slider/_index.scss
index e38d2ff37e2d..2248a3290c24 100644
--- a/packages/devextreme-scss/scss/widgets/material/slider/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/slider/_index.scss
@@ -73,7 +73,6 @@ $material-slider-handle-inner-disabled-size: 2px;
 
     .dx-overlay-content {
       border: 1px solid transparent;
-      opacity: 0.6;
 
       .dx-popup-content {
         line-height: normal;
diff --git a/packages/devextreme-scss/scss/widgets/material/stepper/_colors.scss b/packages/devextreme-scss/scss/widgets/material/stepper/_colors.scss
index 57a20c651653..e4ae8d2a7bbb 100644
--- a/packages/devextreme-scss/scss/widgets/material/stepper/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/material/stepper/_colors.scss
@@ -89,13 +89,13 @@ $stepper-connector-value-bg: $base-label-color !default;
 }
 
 @if $mode == 'dark' {
-  $stepper-step-base-bg: color.adjust($base-bg, $saturation: -5.59%, $space: hsl, $lightness: 29.22%) !default;
-  $stepper-step-base-hover-bg: color.adjust($base-bg, $saturation: -5.84%, $space: hsl, $lightness: 32.16%) !default;
+  $stepper-step-base-bg: color.adjust($base-bg, $saturation: -5.59%, $lightness: 29.22%, $space: hsl) !default;
+  $stepper-step-base-hover-bg: color.adjust($base-bg, $saturation: -5.84%, $lightness: 32.16%, $space: hsl) !default;
 
   $stepper-step-accent-hover-bg: color.adjust($stepper-step-accent-bg, $lightness: 8.5%, $space: hsl) !default;
   $stepper-step-danger-hover-bg: color.adjust($stepper-step-danger-bg, $lightness: 8.5%, $space: hsl) !default;
 
-  $stepper-step-disabled-bg: color.adjust($base-bg, $saturation: -3.02%, $space: hsl, $lightness: 9.22%) !default;
+  $stepper-step-disabled-bg: color.adjust($base-bg, $saturation: -3.02%, $lightness: 9.22%, $space: hsl) !default;
 }
 
 /**
diff --git a/packages/devextreme-scss/scss/widgets/material/tabs/variables/_colors.scss b/packages/devextreme-scss/scss/widgets/material/tabs/variables/_colors.scss
index f67e0c57bc1a..6bb0cc811c71 100644
--- a/packages/devextreme-scss/scss/widgets/material/tabs/variables/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/material/tabs/variables/_colors.scss
@@ -10,7 +10,7 @@ $material-tabs-nav-button-background: color.change($button-default-hover-bg, $al
 * $name 10. Tab text color
 * $type color
 */
-$tabs-tab-color: color.change($base-text-color, $alpha: 0.54) !default;
+$tabs-tab-color: color.change($base-text-color, $alpha: 0.6) !default;
 
 /**
 * $name 20. Selected tab text color
@@ -22,7 +22,7 @@ $tabs-tab-selected-color: $base-accent !default;
 * $name 30. Disabled tab color
 * $type color
 */
-$tabs-tab-disabled-color: color.change($tabs-tab-color, $alpha: 0.32) !default;
+$tabs-tab-disabled-color: null !default;
 
 /**
 * $name 40. Selected tab border color
@@ -54,11 +54,7 @@ $tabs-tab-icon-color: $tabs-tab-color !default;
 */
 $tabs-tab-icon-selected-color: $tabs-tab-selected-color !default;
 
-/**
-* $name 90. Disabled tab icon color
-* $type color
-*/
-$tabs-tab-icon-disabled-color: color.change($tabs-tab-icon-color, $alpha: 0.32) !default;
+
 $tabs-tab-button-disabled-opacity: 0 !default;
 
 /**
@@ -80,9 +76,17 @@ $tabs-focused-tab-bg-color: color.change($base-accent, $alpha: 0.12) !default;
 $tabs-active-tab-bg-color: color.change($base-accent, $alpha: 0.16) !default;
 
 @if $mode == "light" {
+  $tabs-tab-disabled-color: rgba(0, 0, 0, 0.38) !default;
   $tabs-disabled-tab-border-color: color.change($tabs-tab-color, $alpha: 0.13) !default;
 }
 
 @if $mode == "dark" {
+  $tabs-tab-disabled-color: rgba(255, 255, 255, 0.38) !default;
   $tabs-disabled-tab-border-color: color.change($tabs-tab-color, $alpha: 0.4) !default;
 }
+
+/**
+* $name 90. Disabled tab icon color
+* $type color
+*/
+$tabs-tab-icon-disabled-color: $tabs-tab-disabled-color !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/tagBox/_colors.scss b/packages/devextreme-scss/scss/widgets/material/tagBox/_colors.scss
index 4cb276546f55..67f3c5b08ac5 100644
--- a/packages/devextreme-scss/scss/widgets/material/tagBox/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/material/tagBox/_colors.scss
@@ -9,7 +9,7 @@
 * $name 10. Tag text color
 * $type color
 */
-$tagbox-tag-color: color.change($base-text-color, $alpha: 0.6) !default;
+$tagbox-tag-color: $base-text-color !default;
 
 /**
 * $name 20. Tag background color
@@ -23,29 +23,18 @@ $tagbox-tag-hover-bg: null !default;
 * $type color
 */
 $tagbox-tag-active-color: $base-text-color !default;
-
-/**
-* $name 40. Tag close button color
-* $type color
-*/
-$tagbox-tag-button-remove-bg: rgba(0, 0, 0, 0.36) !default;
-$tagbox-tag-button-remove-color: null !default;
+$tagbox-tag-button-remove-color: $base-icon-color !default;
 $tagbox-tag-focused-bg: null !default;
 $tagbox-select-all-border-color: $base-border-color !default;
 
 @if $mode == "light" {
-  $tagbox-tag-bg: color.adjust($base-bg, $lightness: -12%, $space: hsl) !default;
+  $tagbox-tag-bg: rgba(0, 0, 0, 0.08) !default;
   $tagbox-tag-hover-bg: color.adjust($base-bg, $lightness: -15%, $space: hsl) !default;
-  $tagbox-tag-button-remove-color: $tagbox-tag-bg !default;
   $tagbox-tag-focused-bg: color.adjust($base-bg, $lightness: -32%, $space: hsl) !default;
 }
 
 @if $mode == "dark" {
-  $tagbox-tag-bg: color.adjust($base-bg, $lightness: 12%, $space: hsl) !default;
+  $tagbox-tag-bg: rgba(255, 255, 255, 0.08) !default;
   $tagbox-tag-hover-bg: color.adjust($base-bg, $lightness: 15%, $space: hsl) !default;
-  $tagbox-tag-button-remove-color: color.adjust($base-bg, $lightness: 22%, $space: hsl) !default;
   $tagbox-tag-focused-bg: color.adjust($base-bg, $lightness: 32%, $space: hsl) !default;
 }
-
-$tagbox-tag-disabled-bg: $tagbox-tag-focused-bg !default;
-
diff --git a/packages/devextreme-scss/scss/widgets/material/tagBox/_index.scss b/packages/devextreme-scss/scss/widgets/material/tagBox/_index.scss
index dc6e02164f43..479ccbe20a65 100644
--- a/packages/devextreme-scss/scss/widgets/material/tagBox/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/tagBox/_index.scss
@@ -56,16 +56,6 @@
       }
     }
   }
-
-  &.dx-state-disabled {
-    .dx-tag-content {
-      background-color: $tagbox-tag-disabled-bg;
-
-      .dx-tag-remove-button::before {
-        color: $tagbox-tag-disabled-bg;
-      }
-    }
-  }
 }
 
 .dx-tagbox-single-line {
@@ -108,7 +98,6 @@
     width: $material-tagbox-remove-button-icon-size;
     height: $material-tagbox-remove-button-icon-size;
     color: $tagbox-tag-button-remove-color;
-    background-color: $tagbox-tag-button-remove-bg;
     border-radius: 50%;
     transform: none;
   }
diff --git a/packages/devextreme-scss/scss/widgets/material/textEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/material/textEditor/_colors.scss
index 2c001732a6c1..97b856017bd2 100644
--- a/packages/devextreme-scss/scss/widgets/material/textEditor/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/material/textEditor/_colors.scss
@@ -52,11 +52,11 @@ $texteditor-focused-border-color: $base-accent !default;
 * $type color
 */
 $texteditor-hover-bg: color.change($base-text-color, $alpha: 0.07) !default;
-$texteditor-button-clear-icon-color: null !default;
+$texteditor-button-clear-icon-color: $base-icon-color !default;
 $texteditor-button-clear-icon-color-bg: null !default;
 $texteditor-invalid-focused-border-color: $base-invalid-color !default;
 $texteditor-invalid-faded-border-color: $base-invalid-faded-border-color !default;
-$texteditor-disabled-color: $base-disabled-color !default;
+$texteditor-disabled-color: null !default;
 $texteditor-input-border-radius: $base-border-radius !default;
 $texteditor-label-transition:
   font-size 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms,
@@ -64,13 +64,13 @@ $texteditor-label-transition:
   top 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms;
 
 @if $mode == "light" {
-  $texteditor-button-clear-icon-color: color.adjust($texteditor-color, $lightness: 46%, $space: hsl) !default;
-  $texteditor-button-clear-icon-color-bg: color.adjust($texteditor-color, $lightness: 76%, $space: hsl) !default;
+  $texteditor-disabled-color: rgba(0, 0, 0, 0.6) !default;
+  $texteditor-button-clear-icon-color-bg: rgba(0, 0, 0, 0.12) !default;
 }
 
 @if $mode == "dark" {
-  $texteditor-button-clear-icon-color: color.adjust($texteditor-color, $lightness: -76%, $space: hsl) !default;
-  $texteditor-button-clear-icon-color-bg: color.adjust($texteditor-color, $lightness: -34%, $space: hsl) !default;
+  $texteditor-disabled-color: rgba(255, 255, 255, 0.6) !default;
+  $texteditor-button-clear-icon-color-bg: rgba(255, 255, 255, 0.12) !default;
 }
 
 :root {
diff --git a/packages/devextreme-scss/scss/widgets/material/timeView/_colors.scss b/packages/devextreme-scss/scss/widgets/material/timeView/_colors.scss
index 73cd667e46a6..a071b2b2cca9 100644
--- a/packages/devextreme-scss/scss/widgets/material/timeView/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/material/timeView/_colors.scss
@@ -3,12 +3,4 @@
 @use "../colors" as *;
 
 // adduse
-$clock-digits-color: null !default;
-
-@if $mode == "light" {
-  $clock-digits-color: color.change($base-text-color, $alpha: 0.54) !default;
-}
-
-@if $mode == "dark" {
-  $clock-digits-color: color.change($base-text-color, $alpha: 0.6) !default;
-}
+$clock-digits-color: $base-icon-color !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/tooltip/_colors.scss b/packages/devextreme-scss/scss/widgets/material/tooltip/_colors.scss
index faa21c01e25d..21c6bf940a24 100644
--- a/packages/devextreme-scss/scss/widgets/material/tooltip/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/material/tooltip/_colors.scss
@@ -10,7 +10,7 @@
 * $name 10. Text color
 * $type color
 */
-$tooltip-color: null !default;
+$tooltip-color: $base-inverted-text-color !default;
 
 /**
 * $name 20. Background color
@@ -20,12 +20,10 @@ $tooltip-bg: null !default;
 $tooltip-border-radius: $base-border-radius !default;
 
 @if $mode == "light" {
-  $tooltip-color: $base-inverted-text-color !default;
-  $tooltip-bg: #616161 !default;
+  $tooltip-bg: color.adjust($base-bg, $lightness: -60%, $space: hsl) !default;
 }
 
 @if $mode == "dark" {
-  $tooltip-color: $base-text-color !default;
-  $tooltip-bg: rgba(0, 0, 0, 1) !default;
+  $tooltip-bg: color.adjust($base-bg, $lightness: 60%, $space: hsl) !default;
 }
 
diff --git a/packages/devextreme/build/gulp/state_manager/__tests__/build_state_manager.test.js b/packages/devextreme/build/gulp/state_manager/__tests__/build_state_manager.test.js
index bc92bbb1d7d4..4a86991225da 100644
--- a/packages/devextreme/build/gulp/state_manager/__tests__/build_state_manager.test.js
+++ b/packages/devextreme/build/gulp/state_manager/__tests__/build_state_manager.test.js
@@ -66,28 +66,37 @@ describe('Build the state manager', () => {
 
         const devextremeDir = path.join(tempDir, 'devextreme');
         const stateManagerDir = path.join(devextremeDir, 'esm', '__internal', 'core', 'state_manager');
+        const cjsStateManagerDir = path.join(devextremeDir, 'cjs', '__internal', 'core', 'state_manager');
         const devDir = path.join(stateManagerDir, 'dev');
         const prodDir = path.join(stateManagerDir, 'prod');
+        const cjsProdDir = path.join(cjsStateManagerDir, 'prod');
 
         const devPaths = createEnvPaths(stateManagerDir, 'dev');
         const prodPaths = createEnvPaths(stateManagerDir, 'prod');
+        const cjsProdPaths = createEnvPaths(cjsStateManagerDir, 'prod');
 
         const indexFilePath = path.join(stateManagerDir, 'index.js');
+        const cjsIndexFilePath = path.join(cjsStateManagerDir, 'index.js');
         const fileOutsideOfEnvSpecificFolderFilePath = path.join(stateManagerDir, 'state_manager.test.js');
         const fileOutsideStateMangerPath = path.join(tempDir, 'other_file.js');
 
         fs.mkdirSync(stateManagerDir, { recursive: true });
+        fs.mkdirSync(cjsStateManagerDir, { recursive: true });
         fs.mkdirSync(devDir, { recursive: true });
         fs.mkdirSync(prodDir, { recursive: true });
+        fs.mkdirSync(cjsProdDir, { recursive: true });
         fs.mkdirSync(devPaths.reactivePrimitivesDir, { recursive: true });
         fs.mkdirSync(prodPaths.reactivePrimitivesDir, { recursive: true });
+        fs.mkdirSync(cjsProdPaths.reactivePrimitivesDir, { recursive: true });
 
         fs.writeFileSync(indexFilePath, INDEX_DEV_CONTENT);
+        fs.writeFileSync(cjsIndexFilePath, INDEX_DEV_CONTENT);
         fs.writeFileSync(fileOutsideOfEnvSpecificFolderFilePath, FILE_OUTSIDE_OF_ENV_SPECIFIC_FOLDER_CONTENT);
         fs.writeFileSync(fileOutsideStateMangerPath, FILE_OUTSIDE_STATE_MANGER_CONTENT);
 
         createEnvFiles(devPaths, DEV_DIR_CONTENT);
         createEnvFiles(prodPaths, PROD_DIR_CONTENT);
+        createEnvFiles(cjsProdPaths, PROD_DIR_CONTENT);
 
         originalConsoleError = console.error;
         consoleErrorSpy = jest.fn();
@@ -95,6 +104,7 @@ describe('Build the state manager', () => {
 
         const files = [
             ...createEnvSpecificStreamFileObjects(prodPaths, PROD_DIR_CONTENT),
+            ...createEnvSpecificStreamFileObjects(cjsProdPaths, PROD_DIR_CONTENT),
             ...createEnvSpecificStreamFileObjects(devPaths, DEV_DIR_CONTENT),
             new Vinyl({
                 path: fileOutsideStateMangerPath,
@@ -108,6 +118,10 @@ describe('Build the state manager', () => {
                 path: indexFilePath,
                 contents: Buffer.from(INDEX_DEV_CONTENT)
             }),
+            new Vinyl({
+                path: cjsIndexFilePath,
+                contents: Buffer.from(INDEX_DEV_CONTENT)
+            }),
         ];
 
         stream.on('data', (file) => {
@@ -123,6 +137,7 @@ describe('Build the state manager', () => {
             devDir,
             prodPaths,
             indexFilePath,
+            cjsIndexFilePath,
             fileOutsideOfEnvSpecificFolderFilePath,
             fileOutsideStateMangerPath
         };
@@ -164,9 +179,14 @@ describe('Build the state manager', () => {
     it('should replace `index.js` content by `prod/index.js` content', runTestWithStream(() => {
         removeDevelopmentStateManagerModules(testsContext.devextremeDir);
 
-        const indexFileContent = fs.readFileSync(testsContext.indexFilePath, 'utf8');
-        expect(indexFileContent).toBe(INDEX_PROD_CONTENT);
+        const esmIndexContent = fs.readFileSync(testsContext.indexFilePath, 'utf8');
+        expect(esmIndexContent).toBe(INDEX_PROD_CONTENT);
         expect(fs.existsSync(testsContext.prodPaths.index)).toBe(true);
+
+        const cjsIndexContent = fs.readFileSync(testsContext.cjsIndexFilePath, 'utf8');
+        expect(cjsIndexContent).toContain('require("./prod/index")');
+        expect(cjsIndexContent).not.toContain('export *');
+
         expect(consoleErrorSpy).not.toHaveBeenCalled();
     }));
 });
diff --git a/packages/devextreme/build/gulp/state_manager/replace_state_manager_modules_for_production.js b/packages/devextreme/build/gulp/state_manager/replace_state_manager_modules_for_production.js
index c4d2904f8f86..6773a62184c1 100644
--- a/packages/devextreme/build/gulp/state_manager/replace_state_manager_modules_for_production.js
+++ b/packages/devextreme/build/gulp/state_manager/replace_state_manager_modules_for_production.js
@@ -1,26 +1,43 @@
-'use strict';
-
-const gulp = require('gulp');
-const through2 = require('through2');
-const path = require('path');
-const fs = require('fs');
-const babel = require('@babel/core');
-const transpileConfig = require('../transpile-config');
+"use strict";
+
+const gulp = require("gulp");
+const through2 = require("through2");
+const path = require("path");
+const babel = require("@babel/core");
 const {
     STATE_MANAGER_FOLDER_PATH,
     STATE_MANAGER_INDEX_MODULE_PATH,
-} = require('./constants');
-const ctx = require('../context');
+} = require("./constants");
+const ctx = require("../context");
+
+const ERROR_PREFIX = "Error during replacing the state manager modules:";
 
-const ERROR_PREFIX = 'Error during replacing the state manager modules:';
+const ESM_REEXPORT = `export * from './prod/index';`;
+
+function isCjsFile(filePath) {
+    const normalizedPath = filePath.split(path.sep).join("/");
+    return normalizedPath.includes("/cjs/");
+}
+
+function transpileToCjs(esmSource, filePath) {
+    const result = babel.transformSync(esmSource, {
+        filename: filePath,
+        plugins: [["@babel/plugin-transform-modules-commonjs"]],
+    });
+    return result.code;
+}
 
 function replaceStateManagerModulesForProduction() {
-    return through2.obj(function(file, enc, callback) {
+    return through2.obj(function (file, enc, callback) {
         if (file.path.includes(STATE_MANAGER_INDEX_MODULE_PATH)) {
             try {
-                file.contents = Buffer.from(`export * from './prod/index';`);
+                const content = isCjsFile(file.path)
+                    ? transpileToCjs(ESM_REEXPORT, file.path)
+                    : ESM_REEXPORT;
+                file.contents = Buffer.from(content);
             } catch (error) {
-                console.error(ERROR_PREFIX, error);
+                callback(new Error(`${ERROR_PREFIX} ${error.message}`));
+                return;
             }
         }
 
@@ -28,15 +45,23 @@ function replaceStateManagerModulesForProduction() {
     });
 }
 
-const prepareStateManager = (dist) => gulp.series.apply(gulp, [
-    () => gulp
-        .src(`${dist}/**/${STATE_MANAGER_FOLDER_PATH}/**`)
-        .pipe(replaceStateManagerModulesForProduction())
-        .pipe(gulp.dest(dist)),
-]);
+const prepareStateManager = (dist) =>
+    gulp.series.apply(gulp, [
+        () =>
+            gulp
+                .src(`${dist}/**/${STATE_MANAGER_FOLDER_PATH}/**`)
+                .pipe(replaceStateManagerModulesForProduction())
+                .pipe(gulp.dest(dist)),
+    ]);
 
-gulp.task('state-manager-replace-production-modules-transpiled-prod-esm', prepareStateManager(ctx.TRANSPILED_PROD_ESM_PATH));
+gulp.task(
+    "state-manager-replace-production-modules-transpiled-prod-esm",
+    prepareStateManager(ctx.TRANSPILED_PROD_ESM_PATH)
+);
 
-gulp.task('state-manager-replace-production-modules-transpiled-prod-renovation', prepareStateManager(ctx.TRANSPILED_PROD_RENOVATION_PATH));
+gulp.task(
+    "state-manager-replace-production-modules-transpiled-prod-renovation",
+    prepareStateManager(ctx.TRANSPILED_PROD_RENOVATION_PATH)
+);
 
 module.exports = replaceStateManagerModulesForProduction;
diff --git a/packages/devextreme/js/__internal/core/localization/date.ts b/packages/devextreme/js/__internal/core/localization/date.ts
index c1444ce21bfc..076a0c56eb3b 100644
--- a/packages/devextreme/js/__internal/core/localization/date.ts
+++ b/packages/devextreme/js/__internal/core/localization/date.ts
@@ -155,7 +155,7 @@ const dateLocalization = dependencyInjector({
     return formatter(date);
   },
 
-  parse(text: string, format: FormatObject | string): Date | null | undefined {
+  parse(text: string, format?: FormatObject | string): Date | null | undefined {
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const that = this;
     // eslint-disable-next-line @typescript-eslint/init-declarations
diff --git a/packages/devextreme/js/__internal/events/m_visibility_change.ts b/packages/devextreme/js/__internal/events/m_visibility_change.ts
index 278bc4047a3d..57a7325cf93f 100644
--- a/packages/devextreme/js/__internal/events/m_visibility_change.ts
+++ b/packages/devextreme/js/__internal/events/m_visibility_change.ts
@@ -8,7 +8,6 @@ const triggerVisibilityChangeEvent = function (eventName) {
     const $element = $(element || 'body');
 
     const changeHandlers = $element.filter(VISIBILITY_CHANGE_SELECTOR)
-    // @ts-expect-error
       .add($element.find(VISIBILITY_CHANGE_SELECTOR));
 
     for (let i = 0; i < changeHandlers.length; i++) {
diff --git a/packages/devextreme/js/__internal/grids/grid_core/ai_column/__tests__/ai_column.integration.test.ts b/packages/devextreme/js/__internal/grids/grid_core/ai_column/__tests__/ai_column.integration.test.ts
index d3c6d2998ab6..82cec87414f0 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/ai_column/__tests__/ai_column.integration.test.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/ai_column/__tests__/ai_column.integration.test.ts
@@ -4705,45 +4705,6 @@ describe('AI data', () => {
       );
     });
   });
-
-  describe('when repaintChangesOnly is enabled', () => {
-    /* TODO: We skip this test for now until we refactor columnsChanged callback */
-    it.skip('should render only AI cells', async () => {
-      const { component } = await createDataGrid({
-        dataSource: items,
-        keyExpr: 'id',
-        repaintChangesOnly: true,
-        columns: [
-          { dataField: 'id', caption: 'ID' },
-          { dataField: 'name', caption: 'Name' },
-          { dataField: 'value', caption: 'Value' },
-          {
-            type: 'ai',
-            caption: 'AI Column',
-            name: 'myColumn',
-            ai: {
-              aiIntegration: new AIIntegration({
-                sendRequest(): RequestResult {
-                  return {
-                    promise: new Promise<string>((resolve) => {
-                      resolve('{"1":"AI Response 1","2":"AI Response 2"}');
-                    }),
-                    abort: (): void => {},
-                  };
-                },
-              }),
-            },
-          },
-        ],
-      });
-      const cells = [...component.getDataCells(0), ...component.getDataCells(1)];
-
-      component.apiColumnOption('myColumn', 'ai.prompt', 'Initial prompt');
-      await Promise.resolve();
-
-      compareCellNodes(cells, [...component.getDataCells(0), ...component.getDataCells(1)]);
-    });
-  });
 });
 
 describe('Load panel', () => {
diff --git a/packages/devextreme/js/__internal/grids/grid_core/columns_controller/m_columns_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/columns_controller/m_columns_controller.ts
index 6865e1370a0c..7969b5fd22c0 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/columns_controller/m_columns_controller.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/columns_controller/m_columns_controller.ts
@@ -1703,7 +1703,6 @@ export class ColumnsController extends modules.Controller {
                 result = false;
               }
             } else if (gridCoreUtils.isDateType(column.dataType)) {
-              // @ts-expect-error
               parsedValue = dateLocalization.parse(text, column.format);
               if (parsedValue) {
                 result = parsedValue;
diff --git a/packages/devextreme/js/__internal/grids/grid_core/views/m_columns_view.ts b/packages/devextreme/js/__internal/grids/grid_core/views/m_columns_view.ts
index fb317c2fe834..3866c6dcdf8b 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/views/m_columns_view.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/views/m_columns_view.ts
@@ -371,7 +371,6 @@ export class ColumnsView extends ColumnStateMixin(modules.View) {
 
       if (browser.safari) {
         // T198380, T809552
-        // @ts-expect-error
         $table.append($('<thead>').append('<tr>'));
       }
 
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/header_panel/__snapshots__/options.test.ts.snap b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/__snapshots__/options.test.ts.snap
index e1332d49be1c..67e83362fd23 100644
--- a/packages/devextreme/js/__internal/grids/new/card_view/header_panel/__snapshots__/options.test.ts.snap
+++ b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/__snapshots__/options.test.ts.snap
@@ -84,6 +84,96 @@ exports[`ColumnProperties headerItemCssClass should override content of headerPa
 </div>
 `;
 
+exports[`ColumnProperties headerItemTemplate should override content of headerPanel item 1`] = `
+<div
+  class="test-container"
+>
+  <div
+    class="dx-cardview-headers"
+  >
+    <div
+      class="dx-cardview-sortable dx-sortable"
+    >
+      <div
+        class="dx-scrollable dx-visibility-change-handler dx-scrollable-horizontal dx-scrollable-simulated"
+      >
+        <div
+          class="dx-scrollable-wrapper"
+        >
+          <div
+            class="dx-scrollable-container"
+          >
+            <div
+              class="dx-scrollable-content"
+              style="left: 0px; top: 0px; transform: none;"
+            >
+              <div
+                data-dx-focus-container="true"
+              >
+                <div
+                  data-dx-focus-decoy="true"
+                  tabindex="0"
+                />
+                <div
+                  class="dx-cardview-headerpanel-content dx-cardview-headerpanel-content--with-header-items"
+                  role="menubar"
+                >
+                  <div
+                    class="dx-cardview-header-item-container"
+                  >
+                    <div
+                      aria-label="Field name Column 1"
+                      class="dx-cardview-header-item  "
+                      role="menuitem"
+                      tabindex="0"
+                    >
+                      <div>
+                        <div
+                          class="my-class"
+                        >
+                          Column 1
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  data-dx-focus-decoy="true"
+                  tabindex="0"
+                />
+              </div>
+            </div>
+            <div
+              class="dx-scrollable-scrollbar dx-widget dx-scrollbar-horizontal"
+              style="display: none;"
+            >
+              <div
+                class="dx-scrollable-scroll dx-state-invisible"
+              >
+                <div
+                  class="dx-scrollable-scroll-content"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <div
+        class="dx-cardview-dropzone"
+      >
+        <div
+          class="dx-icon dx-icon-dropzone"
+        />
+        <span>
+          Drop the header item here
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Options headerPanel itemCssClass should add css class to headerPanel item 1`] = `
 <div
   class="dx-scrollable dx-visibility-change-handler dx-scrollable-horizontal dx-scrollable-simulated"
@@ -145,6 +235,96 @@ exports[`Options headerPanel itemCssClass should add css class to headerPanel it
 </div>
 `;
 
+exports[`Options headerPanel itemTemplate should override content of headerPanel item 1`] = `
+<div
+  class="test-container"
+>
+  <div
+    class="dx-cardview-headers"
+  >
+    <div
+      class="dx-cardview-sortable dx-sortable"
+    >
+      <div
+        class="dx-scrollable dx-visibility-change-handler dx-scrollable-horizontal dx-scrollable-simulated"
+      >
+        <div
+          class="dx-scrollable-wrapper"
+        >
+          <div
+            class="dx-scrollable-container"
+          >
+            <div
+              class="dx-scrollable-content"
+              style="left: 0px; top: 0px; transform: none;"
+            >
+              <div
+                data-dx-focus-container="true"
+              >
+                <div
+                  data-dx-focus-decoy="true"
+                  tabindex="0"
+                />
+                <div
+                  class="dx-cardview-headerpanel-content dx-cardview-headerpanel-content--with-header-items"
+                  role="menubar"
+                >
+                  <div
+                    class="dx-cardview-header-item-container"
+                  >
+                    <div
+                      aria-label="Field name Column 1"
+                      class="dx-cardview-header-item  "
+                      role="menuitem"
+                      tabindex="0"
+                    >
+                      <div>
+                        <div
+                          class="my-class"
+                        >
+                          Column 1
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  data-dx-focus-decoy="true"
+                  tabindex="0"
+                />
+              </div>
+            </div>
+            <div
+              class="dx-scrollable-scrollbar dx-widget dx-scrollbar-horizontal"
+              style="display: none;"
+            >
+              <div
+                class="dx-scrollable-scroll dx-state-invisible"
+              >
+                <div
+                  class="dx-scrollable-scroll-content"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <div
+        class="dx-cardview-dropzone"
+      >
+        <div
+          class="dx-icon dx-icon-dropzone"
+        />
+        <span>
+          Drop the header item here
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Options headerPanel visible when it is false should hide headerPanel 1`] = `
 <div
   class="test-container"
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/header_panel/options.test.ts b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/options.test.ts
index 99af3fcfa6e4..f9393793adbf 100644
--- a/packages/devextreme/js/__internal/grids/new/card_view/header_panel/options.test.ts
+++ b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/options.test.ts
@@ -2,6 +2,7 @@
 import {
   describe, expect, it, jest,
 } from '@jest/globals';
+import $ from '@js/core/renderer';
 import { rerender } from 'inferno';
 
 import { Sortable } from '../../grid_core/inferno_wrappers/sortable';
@@ -84,15 +85,15 @@ describe('Options', () => {
     });
 
     describe('itemTemplate', () => {
-      // TODO: fix option controller to enable test
-      it.skip('should override content of headerPanel item', () => {
+      it('should override content of headerPanel item', () => {
         const { rootElement } = setup({
           columns: ['column1'],
           headerPanel: {
             // @ts-expect-error
-            itemTemplate: ({ column }) => $('<div>')
+            itemTemplate: ({ model: { column } }) => $('<div>')
               .addClass('my-class')
-              .text(column.caption),
+              .text(column.caption)
+              .get(0),
           },
         });
 
@@ -115,17 +116,17 @@ describe('Options', () => {
   });
 });
 
-// TODO: update after related column props are extracted from columns_controller
 describe('ColumnProperties', () => {
   describe('headerItemTemplate', () => {
-    it.skip('should override content of headerPanel item', () => {
+    it('should override content of headerPanel item', () => {
       const { rootElement } = setup({
         columns: [{
           dataField: 'column1',
           // @ts-expect-error
-          headerItemTemplate: ({ column }) => $('<div>')
+          headerItemTemplate: ({ model: { column } }) => $('<div>')
             .addClass('my-class')
-            .text(column.caption),
+            .text(column.caption)
+            .get(0),
         }],
       });
 
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/accessibility/render.test.ts b/packages/devextreme/js/__internal/grids/new/grid_core/accessibility/render.test.ts
index d9668121cf34..3d6e41e27e46 100644
--- a/packages/devextreme/js/__internal/grids/new/grid_core/accessibility/render.test.ts
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/accessibility/render.test.ts
@@ -62,34 +62,6 @@ describe('Accessibility attributes', () => {
     });
   });
 
-  describe('Status description', () => {
-    // TODO a11y: remove "firstRender" flags, fix this test and unskip.
-    it.skip('should be displayed on the status container', () => {
-      const cardView = setup({
-        dataSource: [
-          { A: 'A_0' }, { A: 'A_1' }, { A: 'A_2' }, { A: 'A_3' }, { A: 'A_4' },
-        ],
-        columns: ['A'],
-      });
-
-      const statusContainer = rootQuerySelector(SELECTORS.statusContainer);
-      expect(statusContainer).not.toBeNull();
-      expect(statusContainer?.innerHTML).toBe('');
-
-      cardView.option('filterValue', ['A', '=', 'A_1']);
-      expect(statusContainer?.innerHTML).toBe('Card view with 1 cards. Each card has 1 fields');
-
-      cardView.option('filterValue', null);
-      expect(statusContainer?.innerHTML).toBe('Card view with 5 cards. Each card has 1 fields');
-
-      cardView.option('paging', { pageSize: 2 });
-      // TODO a11y: is it ok that page size = 2 and status message has 5 cards?
-      expect(statusContainer?.innerHTML).toBe('Card view with 5 cards. Each card has 1 fields');
-      cardView.option('paging', { pageIndex: 2 });
-      expect(statusContainer?.innerHTML).toBe('Card view with 5 cards. Each card has 1 fields');
-    });
-  });
-
   describe('Header panel', () => {
     it('should be represented as menubar', () => {
       setup({
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/editing/options.test.ts b/packages/devextreme/js/__internal/grids/new/grid_core/editing/options.test.ts
index af83830554e4..dc10e9f657fb 100644
--- a/packages/devextreme/js/__internal/grids/new/grid_core/editing/options.test.ts
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/editing/options.test.ts
@@ -1,9 +1,12 @@
 /* eslint-disable spellcheck/spell-checker */
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import {
-  describe, expect, it, jest,
+  afterEach, describe, expect, it, jest,
 } from '@jest/globals';
+import $ from '@js/core/renderer';
 import dxCalendar from '@js/ui/calendar';
+import CardView from '@ts/grids/new/card_view/widget';
+import type { Options as GridCoreOptions } from '@ts/grids/new/grid_core/options';
 import { rerender } from 'inferno';
 
 import type { Column } from '../columns_controller/types';
@@ -15,6 +18,11 @@ import { ConfirmController } from './confirm_controller';
 import { EditingController } from './controller';
 import { EditPopupView } from './popup/view';
 
+const SELECTORS = {
+  cardView: '.dx-cardview',
+  card: '.dx-cardview-card',
+};
+
 class MockConfirmController implements ConfirmController {
   public static dependencies = [] as const;
 
@@ -22,6 +30,20 @@ class MockConfirmController implements ConfirmController {
     .mockImplementation(() => Promise.resolve(true));
 }
 
+const rootQuerySelector = (selector: string) => document.body.querySelector(selector);
+
+const setupCardView = (options: GridCoreOptions = {}): CardView => {
+  const container = document.createElement('div');
+  const { body } = document;
+  body.append(container);
+
+  const cardView = new CardView(container, options);
+
+  rerender();
+
+  return cardView;
+};
+
 const setup = (config: Options) => {
   const rootElement = document.createElement('div');
 
@@ -157,6 +179,11 @@ describe('ColumnProperties', () => {
 
 describe('Options', () => {
   describe('editing', () => {
+    afterEach(() => {
+      const cardView = rootQuerySelector(SELECTORS.cardView);
+      // @ts-expect-error bad typed renderer
+      $(cardView ?? undefined as any)?.dxCardView('dispose');
+    });
     describe('editCardKey', () => {
       it('should open popup with given item', () => {
         const { getForm } = setup({
@@ -188,13 +215,45 @@ describe('Options', () => {
       });
     });
     describe('allowUpdating', () => {
-      it.skip('should add "edit" button to card', () => {
-        // TODO: think how to organize test
+      it('should add "edit" button to card', () => {
+        setupCardView({
+          columns: [{
+            dataField: 'field1',
+          }, 'id'],
+          dataSource: [{
+            id: 1,
+            field1: 'value1',
+          }],
+          keyExpr: 'id',
+          editing: {
+            allowUpdating: true,
+          },
+        });
+        rerender();
+
+        const card = rootQuerySelector(SELECTORS.card);
+        expect(card?.innerHTML).toContain('aria-label="edit"');
       });
     });
     describe('allowRemoving', () => {
       it('should add "remove" button to card', () => {
-        // TODO: think how to organize test
+        setupCardView({
+          columns: [{
+            dataField: 'field1',
+          }, 'id'],
+          dataSource: [{
+            id: 1,
+            field1: 'value1',
+          }],
+          keyExpr: 'id',
+          editing: {
+            allowDeleting: true,
+          },
+        });
+        rerender();
+
+        const card = rootQuerySelector(SELECTORS.card);
+        expect(card?.innerHTML).toContain('aria-label="trash"');
       });
     });
 
@@ -223,17 +282,6 @@ describe('Options', () => {
 
         expect(editingController.changes.peek()).toMatchSnapshot();
       });
-      it.skip('should update state in editor', () => {
-        const { editingController, getForm } = setup(config);
-
-        editingController.changes.value = [{
-          type: 'update',
-          key: 1,
-          data: { some_field: 'qwe' },
-        }];
-
-        expect(getForm().getEditor('some_field')?.option('value')).toBe('qwe');
-      });
     });
 
     describe('form', () => {
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/editing/utils.test.ts b/packages/devextreme/js/__internal/grids/new/grid_core/editing/utils.test.ts
index 1b6022576530..b2e75a19f755 100644
--- a/packages/devextreme/js/__internal/grids/new/grid_core/editing/utils.test.ts
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/editing/utils.test.ts
@@ -68,8 +68,4 @@ describe('PendingPromises', () => {
     await jest.runAllTimersAsync();
     expect(flag).toBe(true);
   });
-
-  it.skip('should not wait for promised added after waiting', async () => {
-    // TODO: write test
-  });
 });
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/options_controller/component.mock.ts b/packages/devextreme/js/__internal/grids/new/grid_core/options_controller/component.mock.ts
index 08c1d9610969..947848125f71 100644
--- a/packages/devextreme/js/__internal/grids/new/grid_core/options_controller/component.mock.ts
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/options_controller/component.mock.ts
@@ -1,5 +1,6 @@
 import { Component } from '@js/core/component';
 import { signal } from '@ts/core/state_manager/index';
+import { FunctionTemplate } from '@ts/core/templates/m_function_template';
 import { extend } from '@ts/core/utils/m_extend';
 
 // NOTE: We cannot modify the base "_getDefaultOptions" method with Component base class params
@@ -23,4 +24,12 @@ export const createComponentMock = <
 
     return extend(true, {}, baseDefaultOptions, defaultOptions) as TDefaultProps;
   }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  public _getTemplate(template: any): any {
+    if (typeof template === 'function') {
+      return new FunctionTemplate(template);
+    }
+    return template;
+  }
 }(extend(true, {}, options));
diff --git a/packages/devextreme/js/__internal/ui/calendar/calendar.views.ts b/packages/devextreme/js/__internal/ui/calendar/calendar.views.ts
index 2f8803b52e83..e5496da8f518 100644
--- a/packages/devextreme/js/__internal/ui/calendar/calendar.views.ts
+++ b/packages/devextreme/js/__internal/ui/calendar/calendar.views.ts
@@ -149,7 +149,6 @@ export class MonthView extends BaseView<MonthViewProperties> {
     const { weekNumberRule = 'auto', firstDayOfWeek } = this.option();
 
     if (weekNumberRule === 'auto') {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
       return dateUtils.getWeekNumber(
         date,
         firstDayOfWeek,
@@ -157,7 +156,6 @@ export class MonthView extends BaseView<MonthViewProperties> {
       );
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return dateUtils.getWeekNumber(date, firstDayOfWeek, weekNumberRule);
   }
 
@@ -170,7 +168,6 @@ export class MonthView extends BaseView<MonthViewProperties> {
   _isTodayCell(cellDate: Date): boolean {
     const { _todayDate: today } = this.option();
 
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return dateUtils.sameDate(cellDate, today());
   }
 
@@ -188,12 +185,10 @@ export class MonthView extends BaseView<MonthViewProperties> {
   }
 
   _isStartDayOfMonth(cellDate: Date): boolean {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return dateUtils.sameDate(cellDate, dateUtils.getFirstMonthDate(this.option('date')));
   }
 
   _isEndDayOfMonth(cellDate: Date): boolean {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return dateUtils.sameDate(cellDate, dateUtils.getLastMonthDate(this.option('date')));
   }
 
@@ -237,7 +232,6 @@ export class MonthView extends BaseView<MonthViewProperties> {
   }
 
   isBoundary(date: Date): boolean {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return dateUtils.sameMonthAndYear(date, this.option('min')) || dateUtils.sameMonthAndYear(date, this.option('max'));
   }
 
@@ -260,7 +254,6 @@ export class YearView extends BaseView {
   _isTodayCell(cellDate: Date): boolean {
     const { _todayDate: today } = this.option();
 
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return dateUtils.sameMonthAndYear(cellDate, today());
   }
 
@@ -315,7 +308,6 @@ export class YearView extends BaseView {
   }
 
   isBoundary(date: Date): boolean {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return dateUtils.sameYear(date, this.option('min')) || dateUtils.sameYear(date, this.option('max'));
   }
 
@@ -330,7 +322,6 @@ export class DecadeView extends BaseView {
   _isTodayCell(cellDate: Date): boolean {
     const { _todayDate: today } = this.option();
 
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return dateUtils.sameYear(cellDate, today());
   }
 
@@ -384,7 +375,6 @@ export class DecadeView extends BaseView {
   }
 
   _isValueOnCurrentView(currentDate: Date, value: Date): boolean {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return dateUtils.sameDecade(currentDate, value);
   }
 
@@ -397,7 +387,6 @@ export class DecadeView extends BaseView {
   }
 
   isBoundary(date: Date): boolean {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return dateUtils.sameDecade(date, this.option('min')) || dateUtils.sameDecade(date, this.option('max'));
   }
 
@@ -412,7 +401,6 @@ export class CenturyView extends BaseView {
   _isTodayCell(cellDate: Date): boolean {
     const { _todayDate: today } = this.option();
 
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return dateUtils.sameDecade(cellDate, today());
   }
 
@@ -482,7 +470,6 @@ export class CenturyView extends BaseView {
   }
 
   isBoundary(date: Date): boolean {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return dateUtils.sameCentury(date, this.option('min')) || dateUtils.sameCentury(date, this.option('max'));
   }
 
diff --git a/packages/devextreme/js/__internal/ui/date_box/date_view.ts b/packages/devextreme/js/__internal/ui/date_box/date_view.ts
index 7de4caa9a176..40a12e104b1e 100644
--- a/packages/devextreme/js/__internal/ui/date_box/date_view.ts
+++ b/packages/devextreme/js/__internal/ui/date_box/date_view.ts
@@ -137,9 +137,7 @@ class DateView extends Editor<DateViewProperties> {
   }
 
   _renderRollers(): void {
-    if (!this._$rollersContainer) {
-      this._$rollersContainer = $('<div>').addClass(DATEVIEW_ROLLER_CONTAINER_CLASS);
-    }
+    this._$rollersContainer ??= $('<div>').addClass(DATEVIEW_ROLLER_CONTAINER_CLASS);
 
     this._$rollersContainer.empty();
     this._createRollerConfigs();
@@ -157,22 +155,20 @@ class DateView extends Editor<DateViewProperties> {
         selectedIndex: this._rollerConfigs[name].selectedIndex,
         showScrollbar: 'never',
         scrollByContent: true,
-        // TODO Add event type once m_date_view_roller types is refactored
-        onStart: (e) => {
+        onStart: (e): void => {
           const { component } = e;
           const rollerConfig = this._rollerConfigs[name];
 
           component._toggleActive(true);
           this._setActiveRoller(rollerConfig);
         },
-        // TODO Add event type once m_date_view_roller types is refactored
-        onEnd: (e) => {
+        onEnd: (e): void => {
           e.component._toggleActive(false);
         },
-        // TODO Add event type once m_date_view_roller types is refactored
-        onClick: (e) => {
+
+        onClick: (e): void => {
           const { component } = e;
-          const { selectedIndex } = component.option();
+          const { selectedIndex = 0 } = component.option();
           const rollerConfig = this._rollerConfigs[name];
 
           component._toggleActive(true);
@@ -180,10 +176,9 @@ class DateView extends Editor<DateViewProperties> {
           this._setRollerState(rollerConfig, selectedIndex);
           component._toggleActive(false);
         },
-        // TODO Add event type once m_date_view_roller types is refactored
         onSelectedIndexChanged: (e) => {
           const { component } = e;
-          const { selectedIndex } = component.option();
+          const { selectedIndex = 0 } = component.option();
           const rollerConfig = this._rollerConfigs[name];
 
           this._setRollerState(rollerConfig, selectedIndex);
@@ -211,7 +206,6 @@ class DateView extends Editor<DateViewProperties> {
   }
 
   _createRollerConfig(componentName: string): void {
-    // @ts-expect-error TODO remove once m_date_utils is refactored
     const componentInfo = uiDateUtils.DATE_COMPONENTS_INFO[componentName];
 
     const valueRange = this._calculateRollerConfigValueRange(componentName);
@@ -282,6 +276,7 @@ class DateView extends Editor<DateViewProperties> {
       currentValue[setValue](rollerValue);
 
       const normalizedDate = dateUtils.normalizeDate(currentValue, minDate, maxDate);
+      // @ts-expect-error ts-error
       currentValue = uiDateUtils.mergeDates(normalizedDate, currentValue, 'time');
       currentValue = dateUtils.normalizeDate(currentValue, minDate, maxDate);
 
@@ -304,8 +299,7 @@ class DateView extends Editor<DateViewProperties> {
     const roller = this._rollers[rollerType];
 
     if (roller) {
-      // @ts-expect-error TODO Remove once m_date_view_roller is reworked
-      const { items } = roller.option();
+      const { items = [] } = roller.option();
 
       this._createRollerConfig(rollerType);
       const rollerConfig = this._rollerConfigs[rollerType];
@@ -339,7 +333,6 @@ class DateView extends Editor<DateViewProperties> {
     const maxMonth = maxYear && curDate.getMonth() === maxDate.getMonth();
     const minHour = minMonth && curDate.getDate() === minDate.getDate();
     const maxHour = maxMonth && curDate.getDate() === maxDate.getDate();
-    // @ts-expect-error TODO remove once m_date_utils is refactored
     const componentInfo = uiDateUtils.DATE_COMPONENTS_INFO[componentName];
     let { startValue } = componentInfo;
     let { endValue } = componentInfo;
diff --git a/packages/devextreme/js/__internal/ui/date_box/m_date_box.base.ts b/packages/devextreme/js/__internal/ui/date_box/m_date_box.base.ts
index 89d1b798a577..089ffd830cad 100644
--- a/packages/devextreme/js/__internal/ui/date_box/m_date_box.base.ts
+++ b/packages/devextreme/js/__internal/ui/date_box/m_date_box.base.ts
@@ -1,3 +1,4 @@
+/* eslint-disable class-methods-use-this */
 import dateLocalization from '@js/common/core/localization/date';
 import messageLocalization from '@js/common/core/localization/message';
 import config from '@js/core/config';
@@ -6,18 +7,24 @@ import type { DefaultOptionsRule } from '@js/core/options/utils';
 import browser from '@js/core/utils/browser';
 import dateUtils from '@js/core/utils/date';
 import dateSerialization from '@js/core/utils/date_serialization';
+import type { DeferredObj } from '@js/core/utils/deferred';
 import { createTextElementHiddenCopy } from '@js/core/utils/dom';
 import { extend } from '@js/core/utils/extend';
-import { each } from '@js/core/utils/iterator';
 import { inputType } from '@js/core/utils/support';
 import { isDate as isDateType, isNumeric, isString } from '@js/core/utils/type';
 import { getWindow, hasWindow } from '@js/core/utils/window';
+import type { DxEvent } from '@js/events';
 import type {
-  DatePickerType, DateType, Properties,
+  DateLike,
+  DatePickerType,
+  DateType,
+  Properties,
 } from '@js/ui/date_box';
+import type { ToolbarItem } from '@js/ui/popup';
 import type { OptionChanged } from '@ts/core/widget/types';
 import DropDownEditor from '@ts/ui/drop_down_editor/m_drop_down_editor';
 
+import type { ValueChangedEvent } from '../editor/editor';
 import type { PopupProperties } from '../popup/m_popup';
 import Calendar from './m_date_box.strategy.calendar';
 import CalendarWithTime from './m_date_box.strategy.calendar_with_time';
@@ -65,6 +72,7 @@ const STRATEGY_CLASSES = {
 };
 
 export interface DateBoxBaseProperties extends Omit<Properties, 'onClosed' | 'onOpened'> {
+  emptyDateValue?: Date;
   _showValidationIcon?: boolean;
 }
 
@@ -77,8 +85,7 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
 
   _userOptions?: DateBoxBaseProperties;
 
-  // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
-  _supportedKeys(): Record<string, (e: KeyboardEvent) => boolean | void> {
+  _supportedKeys(): Record<string, (e: KeyboardEvent) => void> {
     return {
       ...super._supportedKeys(),
       ...this._strategy.supportedKeys(),
@@ -86,8 +93,7 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
   }
 
   _renderButtonContainers(): void {
-    // @ts-expect-error ts-error
-    super._renderButtonContainers.apply(this, arguments);
+    super._renderButtonContainers();
     this._strategy.customizeButtons();
   }
 
@@ -194,7 +200,6 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
     super._init();
   }
 
-  // eslint-disable-next-line class-methods-use-this
   _toLowerCaseFirstLetter(string: string): string {
     return string.charAt(0).toLowerCase() + string.substr(1);
   }
@@ -209,26 +214,23 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
     }
   }
 
-  _getFormatType() {
-    const currentType = this.option('type');
-    // @ts-expect-error ts-error
-    const isTime = /h|m|s/g.test(currentType);
-    // @ts-expect-error ts-error
-    const isDate = /d|M|Y/g.test(currentType);
-    let type = '';
+  _getFormatType(): DateType {
+    const { type = 'date' } = this.option();
+    const isTime = /h|m|s/g.test(type);
+    const isDate = /d|M|Y/g.test(type);
 
-    if (isDate) {
-      type += TYPE.date;
+    if (isDate && isTime) {
+      return TYPE.datetime;
     }
 
     if (isTime) {
-      type += TYPE.time;
+      return TYPE.time;
     }
 
-    return type;
+    return TYPE.date;
   }
 
-  _getStrategyName(type) {
+  _getStrategyName(type: DateType): string {
     const pickerType = this._pickerType;
 
     if (pickerType === PICKER_TYPE.rollers) {
@@ -267,7 +269,8 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
 
   _renderDimensions(): void {
     super._renderDimensions();
-    this.$element().toggleClass(DX_AUTO_WIDTH_CLASS, !this.option('width'));
+    const { width } = this.option();
+    this.$element().toggleClass(DX_AUTO_WIDTH_CLASS, !width);
 
     this._updatePopupWidth();
     this._updatePopupHeight();
@@ -280,16 +283,16 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
   }
 
   _updatePopupHeight(): void {
-    if (this._popup) {
-      // @ts-expect-error ts-error
-      this._strategy._updatePopupHeight?.();
+    if (this._popup && this._strategy instanceof List) {
+      this._strategy._updatePopupHeight();
     }
   }
 
   _refreshFormatClass(): void {
     const $element = this.$element();
+    const types = Object.values(TYPE);
 
-    each(TYPE, (_, item) => {
+    types.forEach((item) => {
       $element.removeClass(`${DATEBOX_CLASS}-${item}`);
     });
 
@@ -300,8 +303,9 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
 
   _refreshPickerTypeClass(): void {
     const $element = this.$element();
+    const pickerTypes = Object.values(PICKER_TYPE);
 
-    each(PICKER_TYPE, (_, item) => {
+    pickerTypes.forEach((item) => {
       $element.removeClass(`${DATEBOX_CLASS}-${item}`);
     });
 
@@ -313,33 +317,40 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
       return;
     }
 
-    const inputElement = this._input().get(0);
-    const isRtlEnabled = this.option('rtlEnabled');
+    const inputElement = this._input().get(0) as HTMLElement;
+    const { rtlEnabled } = this.option();
     const clearButtonWidth = this._getClearButtonWidth();
     const longestElementDimensions = this._getLongestElementDimensions();
     const curWidth = parseFloat(window.getComputedStyle(inputElement).width) - clearButtonWidth;
     const shouldHideValidationIcon = longestElementDimensions.width > curWidth;
-    // @ts-expect-error ts-error
     const { style } = inputElement;
 
     const { _showValidationIcon: showValidationIcon } = this.option();
 
-    this.$element().toggleClass(DX_INVALID_BADGE_CLASS, !shouldHideValidationIcon && showValidationIcon);
+    this.$element()
+      .toggleClass(DX_INVALID_BADGE_CLASS, !shouldHideValidationIcon && showValidationIcon);
 
     if (shouldHideValidationIcon) {
-      if (this._storedPadding === undefined) {
-        this._storedPadding = isRtlEnabled ? longestElementDimensions.leftPadding : longestElementDimensions.rightPadding;
+      this._storedPadding ??= rtlEnabled
+        ? longestElementDimensions.leftPadding
+        : longestElementDimensions.rightPadding;
+      if (rtlEnabled) {
+        style.paddingLeft = '0';
+      } else {
+        style.paddingRight = '0';
       }
-      isRtlEnabled ? style.paddingLeft = 0 : style.paddingRight = 0;
+    } else if (rtlEnabled) {
+      style.paddingLeft = `${this._storedPadding}px`;
     } else {
-      isRtlEnabled ? style.paddingLeft = `${this._storedPadding}px` : style.paddingRight = `${this._storedPadding}px`;
+      style.paddingRight = `${this._storedPadding}px`;
     }
   }
 
-  _getClearButtonWidth() {
+  _getClearButtonWidth(): number {
     let clearButtonWidth = 0;
-    // @ts-expect-error ts-error
-    if (this._isClearButtonVisible() && this._input().val() === '') {
+    const input = this._input().get(0) as HTMLInputElement;
+
+    if (this._isClearButtonVisible() && input.value === '') {
       const clearButtonElement = this.$element().find(`.${DX_CLEAR_BUTTON_CLASS}`).get(0);
       clearButtonWidth = parseFloat(window.getComputedStyle(clearButtonElement).width);
     }
@@ -347,20 +358,30 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
     return clearButtonWidth;
   }
 
-  _getLongestElementDimensions() {
-    const format = this._strategy.getDisplayFormat(this.option('displayFormat'));
-    const longestValue = dateLocalization.format(uiDateUtils.getLongestDate(format, dateLocalization.getMonthNames(), dateLocalization.getDayNames()), format);
+  _getLongestElementDimensions(): {
+    width: number;
+    leftPadding: number;
+    rightPadding: number;
+  } {
+    const { displayFormat } = this.option();
+    const format = this._strategy.getDisplayFormat(displayFormat);
+    const longestValue = dateLocalization.format(
+      uiDateUtils.getLongestDate(
+        format,
+        dateLocalization.getMonthNames(),
+        dateLocalization.getDayNames(),
+      ),
+      format,
+    );
     const $input = this._input();
     const inputElement = $input.get(0);
     const $longestValueElement = createTextElementHiddenCopy($input, longestValue);
-    const isPaddingStored = this._storedPadding !== undefined;
-    const storedPadding = !isPaddingStored ? 0 : this._storedPadding;
+    const storedPadding = this._storedPadding ?? 0;
 
     $longestValueElement.appendTo(this.$element());
     const elementWidth = parseFloat(window.getComputedStyle($longestValueElement.get(0)).width);
     const rightPadding = parseFloat(window.getComputedStyle(inputElement).paddingRight);
     const leftPadding = parseFloat(window.getComputedStyle(inputElement).paddingLeft);
-    // @ts-expect-error ts-error
     const necessaryWidth = elementWidth + leftPadding + rightPadding + storedPadding;
     $longestValueElement.remove();
 
@@ -371,7 +392,8 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
     };
   }
 
-  _getKeyboardListeners() {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  _getKeyboardListeners(): any[] {
     return super._getKeyboardListeners().concat([this._strategy?.getKeyboardListener()]);
   }
 
@@ -381,10 +403,10 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
     this._renderPopupWrapper();
   }
 
-  _getPopupToolbarItems() {
+  _getPopupToolbarItems(): ToolbarItem[] {
     const defaultItems = super._getPopupToolbarItems();
-    // @ts-expect-error ts-error
-    return this._strategy._getPopupToolbarItems?.(defaultItems) ?? defaultItems;
+
+    return this._strategy._getPopupToolbarItems(defaultItems);
   }
 
   _popupConfig(): PopupProperties {
@@ -402,9 +424,9 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
     }
 
     const $element = this.$element();
-    const classPostfixes = extend({}, TYPE, PICKER_TYPE);
+    const classPostfixes = [...Object.values(TYPE), ...Object.values(PICKER_TYPE)];
 
-    each(classPostfixes, (_, item) => {
+    classPostfixes.forEach((item) => {
       $element.removeClass(`${DATEBOX_WRAPPER_CLASS}-${item}`);
     });
 
@@ -437,13 +459,13 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
     this._strategy.popupHiddenHandler();
   }
 
-  _visibilityChanged(visible): void {
+  _visibilityChanged(visible: boolean): void {
     if (visible) {
       this._formatValidationIcon();
     }
   }
 
-  _clearValueHandler(e): void {
+  _clearValueHandler(e: DxEvent): void {
     this.option('text', '');
     super._clearValueHandler(e);
   }
@@ -457,8 +479,8 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
     const isCustomValueDisabled = this._isNativeType() && (platform === 'ios' || platform === 'android');
 
     if (isCustomValueDisabled) {
-      const { readOnly } = this.option();
-      // @ts-expect-error ts-error
+      const { readOnly = false } = this.option();
+
       return readOnly;
     }
 
@@ -469,8 +491,8 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
     return super._isClearButtonVisible() && !this._isNativeType();
   }
 
-  _renderValue() {
-    const value = this.dateOption('value');
+  _renderValue(): DeferredObj<unknown> {
+    const value = this.getDateOption('value');
 
     this.option('text', this._getDisplayedText(value));
     this._strategy.renderValue();
@@ -478,43 +500,41 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
     return super._renderValue();
   }
 
-  _setSubmitValue() {
-    const value = this.dateOption('value');
-    const { type, dateSerializationFormat } = this.option();
-    // @ts-expect-error ts-error
+  _setSubmitValue(): void {
+    const value = this.getDateOption('value');
+    const { type = 'date', dateSerializationFormat } = this.option();
     const submitFormat = uiDateUtils.SUBMIT_FORMATS_MAP[type];
-    const submitValue = dateSerializationFormat ? dateSerialization.serializeDate(value, dateSerializationFormat) : uiDateUtils.toStandardDateFormat(value, submitFormat);
+    const submitValue = dateSerializationFormat
+      ? dateSerialization.serializeDate(value, dateSerializationFormat)
+      : uiDateUtils.toStandardDateFormat(value, submitFormat);
 
     this._getSubmitElement().val(submitValue);
   }
 
-  _getDisplayedText(value) {
-    const { mode } = this.option();
-    let displayedText;
+  _getDisplayedText(value?: DateLike): string {
+    const { mode = 'text', displayFormat: displayFormatOption } = this.option();
 
     if (mode === 'text') {
-      const displayFormat = this._strategy.getDisplayFormat(this.option('displayFormat'));
-      displayedText = dateLocalization.format(value, displayFormat);
-    } else {
-      const format = this._getFormatByMode(mode);
-
-      if (format) {
-        displayedText = dateLocalization.format(value, format);
-      } else {
-        displayedText = uiDateUtils.toStandardDateFormat(value, mode);
-      }
+      const displayFormat = this._strategy.getDisplayFormat(displayFormatOption);
+      return dateLocalization.format(value, displayFormat) as string;
     }
+    const format = this._getFormatByMode(mode);
 
-    return displayedText;
+    if (format) {
+      return dateLocalization.format(value, format) as string;
+    }
+    return uiDateUtils.toStandardDateFormat(value, mode);
   }
 
-  _getFormatByMode(mode) {
-    return inputType(mode) ? null : uiDateUtils.FORMATS_MAP[mode];
+  _getFormatByMode(mode: string): string | null {
+    return inputType(mode)
+      ? null
+      : uiDateUtils.FORMATS_MAP[mode] as string | null;
   }
 
-  _valueChangeEventHandler(e) {
-    const { text, type, validationError } = this.option();
-    const currentValue = this.dateOption('value');
+  _valueChangeEventHandler(e: ValueChangedEvent): void {
+    const { text, type = 'date', validationError } = this.option();
+    const currentValue = this.getDateOption('value');
 
     if (text === this._getDisplayedText(currentValue)) {
       this._recallInternalValidation(currentValue, validationError);
@@ -537,39 +557,50 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
     }
   }
 
-  _recallInternalValidation(value, validationError) {
+  _recallInternalValidation(
+    value: Date | null,
+    validationError: { editorSpecific?: boolean },
+  ): void {
     if (!validationError || validationError.editorSpecific) {
       this._applyInternalValidation(value);
       this._applyCustomValidation(value);
     }
   }
 
-  _getDateByDefault() {
-    return this._strategy.useCurrentDateByDefault() && this._strategy.getDefaultDate();
+  _getDateByDefault(): Date | undefined {
+    if (this._strategy.useCurrentDateByDefault()) {
+      return this._strategy.getDefaultDate();
+    }
+
+    return undefined;
   }
 
-  _getParsedDate(text) {
-    const displayFormat = this._strategy.getDisplayFormat(this.option('displayFormat'));
-    const parsedText = this._strategy.getParsedText(text, displayFormat);
+  _getParsedDate(text?: string): Date | undefined {
+    const { displayFormat } = this.option();
+    const strategyDisplayFormat = this._strategy.getDisplayFormat(displayFormat);
+    const parsedText = this._strategy.getParsedText(text, strategyDisplayFormat);
 
     return parsedText ?? undefined;
   }
 
-  _applyInternalValidation(value) {
-    const text = this.option('text');
+  _applyInternalValidation(value?: Date | null): { isValid: boolean; isDate: boolean } {
+    const { text, type } = this.option();
     const hasText = !!text && value !== null;
     const isDate = !!value && isDateType(value) && !isNaN(value.getTime());
-    const isDateInRange = isDate && dateUtils.dateInRange(value, this.dateOption('min'), this.dateOption('max'), this.option('type'));
-    const isValid = !hasText && !value || isDateInRange;
+    const isDateInRange = isDate && dateUtils.dateInRange(
+      value,
+      this.getDateOption('min'),
+      this.getDateOption('max'),
+      type,
+    );
+    const isValid = (!hasText && !value) || isDateInRange;
     let validationMessage = '';
 
-    const { invalidDateMessage, dateOutOfRangeMessage } = this.option();
+    const { invalidDateMessage = '', dateOutOfRangeMessage = '' } = this.option();
 
     if (!isDate) {
-      // @ts-expect-error ts-error
       validationMessage = invalidDateMessage;
     } else if (!isDateInRange) {
-      // @ts-expect-error ts-error
       validationMessage = dateOutOfRangeMessage;
     }
 
@@ -581,7 +612,7 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
     };
   }
 
-  _updateInternalValidationState(isValid, validationMessage): void {
+  _updateInternalValidationState(isValid: boolean, validationMessage: string): void {
     this.option({
       isValid,
       validationError: isValid ? null : {
@@ -591,15 +622,15 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
     });
   }
 
-  _applyCustomValidation(value): void {
+  _applyCustomValidation(value: DateLike): void {
     this.validationRequest.fire({
       editor: this,
       value: this._serializeDate(value),
     });
   }
 
-  _isValueChanged(newValue): boolean {
-    const oldValue = this.dateOption('value');
+  _isValueChanged(newValue: Date | null): boolean {
+    const oldValue = this.getDateOption('value');
 
     const oldTime = oldValue && oldValue.getTime();
     const newTime = newValue && newValue.getTime();
@@ -607,9 +638,9 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
     return oldTime !== newTime;
   }
 
-  _isTextChanged(newValue): boolean {
-    const oldText = this.option('text');
-    const newText = newValue && this._getDisplayedText(newValue) || '';
+  _isTextChanged(newValue: DateLike): boolean {
+    const { text: oldText } = this.option();
+    const newText = (newValue && this._getDisplayedText(newValue)) ?? '';
 
     return oldText !== newText;
   }
@@ -656,7 +687,7 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
     this._refresh();
   }
 
-  _applyButtonHandler(e): void {
+  _applyButtonHandler(e: { event: ValueChangedEvent }): void {
     const value = this._strategy.getValue();
     this.dateValue(value, e.event);
 
@@ -680,8 +711,7 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
     switch (args.name) {
       case 'showClearButton':
       case 'buttons':
-        // @ts-expect-error ts-error
-        super._optionChanged.apply(this, arguments);
+        super._optionChanged(args);
         this._formatValidationIcon();
         break;
       case 'pickerType':
@@ -699,16 +729,15 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
         this._updateValue();
         break;
       case 'placeholder':
-        // @ts-expect-error ts-error
-        super._optionChanged.apply(this, arguments);
+        super._optionChanged(args);
         this._updatePopupTitle();
         break;
       case 'min':
       case 'max': {
         const isValid = this.option('isValid');
-        this._applyInternalValidation(this.dateOption('value'));
+        this._applyInternalValidation(this.getDateOption('value'));
         if (!isValid) {
-          this._applyCustomValidation(this.dateOption('value'));
+          this._applyCustomValidation(this.getDateOption('value'));
         }
         this._invalidate();
         break;
@@ -721,28 +750,23 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
         this._invalidate();
         break;
       case 'displayFormat':
-        this.option('text', this._getDisplayedText(this.dateOption('value')));
+        this.option('text', this._getDisplayedText(this.getDateOption('value')));
         this._renderInputValue();
         break;
       case 'text':
-        // @ts-expect-error ts-error
-        this._strategy.textChangedHandler(args.value);
-        // @ts-expect-error ts-error
-        super._optionChanged.apply(this, arguments);
+        this._strategy.textChangedHandler();
+        super._optionChanged(args);
         break;
       case 'isValid':
-        // @ts-expect-error ts-error
-        super._optionChanged.apply(this, arguments);
+        super._optionChanged(args);
         this._formatValidationIcon();
         break;
       case 'showDropDownButton':
         this._formatValidationIcon();
-        // @ts-expect-error ts-error
-        super._optionChanged.apply(this, arguments);
+        super._optionChanged(args);
         break;
       case 'readOnly':
-        // @ts-expect-error ts-error
-        super._optionChanged.apply(this, arguments);
+        super._optionChanged(args);
         this._formatValidationIcon();
         break;
       case 'invalidDateMessage':
@@ -752,16 +776,15 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
       case '_showValidationIcon':
         break;
       default:
-        // @ts-expect-error ts-error
-        super._optionChanged.apply(this, arguments);
+        super._optionChanged(args);
     }
   }
 
-  _getSerializationFormat() {
-    const { value } = this.option();
+  _getSerializationFormat(): string | undefined {
+    const { value, dateSerializationFormat } = this.option();
 
-    if (this.option('dateSerializationFormat') && config().forceIsoDateParsing) {
-      return this.option('dateSerializationFormat');
+    if (dateSerializationFormat && config().forceIsoDateParsing) {
+      return dateSerializationFormat;
     }
 
     if (isNumeric(value)) {
@@ -769,18 +792,18 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
     }
 
     if (!isString(value) || value === '') {
-      return;
+      return undefined;
     }
 
-    return dateSerialization.getDateSerializationFormat(value);
+    return dateSerialization.getDateSerializationFormat(value) as string | undefined;
   }
 
-  _updateValue(value?) {
+  _updateValue(value?: Date | null): void {
     super._updateValue();
-    this._applyInternalValidation(value ?? this.dateOption('value'));
+    this._applyInternalValidation(value ?? this.getDateOption('value'));
   }
 
-  dateValue(value, dxEvent) {
+  dateValue(value: Date | null, dxEvent?: ValueChangedEvent): void {
     const isValueChanged = this._isValueChanged(value);
 
     if (isValueChanged && dxEvent) {
@@ -797,24 +820,27 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
       }
     }
 
-    return this.dateOption('value', value);
+    this.setDateOption('value', value);
   }
 
-  dateOption(optionName, value?) {
-    if (arguments.length === 1) {
-      return dateSerialization.deserializeDate(this.option(optionName));
-    }
+  getDateOption(optionName: 'value' | 'min' | 'max'): Date | null {
+    const { [optionName]: optionValue } = this.option();
+
+    return dateSerialization.deserializeDate(optionValue) as Date | null;
+  }
 
+  setDateOption(optionName: 'value' | 'min' | 'max', value: DateLike | undefined): void {
     this.option(optionName, this._serializeDate(value));
   }
 
-  _serializeDate(date) {
+  _serializeDate(date?: DateLike): Date | string | null {
     const serializationFormat = this._getSerializationFormat();
-    return dateSerialization.serializeDate(date, serializationFormat);
+
+    return dateSerialization.serializeDate(date, serializationFormat) as Date | string | null;
   }
 
   _clearValue(): void {
-    const value = this.option('value');
+    const { value } = this.option();
 
     super._clearValue();
     if (value === null) {
@@ -823,7 +849,7 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
   }
 
   clear(): void {
-    const value = this.option('value');
+    const { value } = this.option();
 
     super.clear();
     if (value === null) {
diff --git a/packages/devextreme/js/__internal/ui/date_box/m_date_box.mask.parts.ts b/packages/devextreme/js/__internal/ui/date_box/m_date_box.mask.parts.ts
index f22389d2aeec..48c4b729c261 100644
--- a/packages/devextreme/js/__internal/ui/date_box/m_date_box.mask.parts.ts
+++ b/packages/devextreme/js/__internal/ui/date_box/m_date_box.mask.parts.ts
@@ -3,17 +3,41 @@ import { noop } from '@js/core/utils/common';
 import { extend } from '@js/core/utils/extend';
 import { fitIntoRange } from '@js/core/utils/math';
 
-const monthGetter = (date) => date.getMonth() + 1;
+const getLimits = (
+  pattern: string,
+  date: Date,
+  forcedPattern?: string,
+): { min: number; max: number } => {
+  const limits: Record<string, { min: number; max: number }> = {
+    y: { min: 0, max: 9999 },
+    M: { min: 1, max: 12 },
+    L: { min: 1, max: 12 },
+    d: { min: 1, max: 31 },
+    dM: {
+      min: 1,
+      max: new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(),
+    },
+    E: { min: 0, max: 6 },
+    H: { min: 0, max: 23 },
+    h: { min: 1, max: 12 },
+    m: { min: 0, max: 59 },
+    s: { min: 0, max: 59 },
+    S: { min: 0, max: 999 },
+    a: { min: 0, max: 1 },
+    x: { min: 0, max: 0 }, // NOTE: Timezone part is read only.
+  };
+  return limits[forcedPattern ?? pattern] ?? { min: 0, max: 0 };
+};
 
-const monthSetter = (date, value) => {
+const monthGetter = (date: Date): number => date.getMonth() + 1;
+
+const monthSetter = (date: Date, value: number | string): void => {
   const day = date.getDate();
-  // @ts-expect-error
   const monthLimits = getLimits('M', date);
-  // eslint-disable-next-line radix
-  const newValue = fitIntoRange(parseInt(value), monthLimits.min, monthLimits.max);
+  const newValue = fitIntoRange(+value, monthLimits.min, monthLimits.max);
 
   date.setMonth(newValue - 1, 1);
-  // @ts-expect-error
+
   const { min, max } = getLimits('dM', date);
   const newDay = fitIntoRange(day, min, max);
 
@@ -21,7 +45,7 @@ const monthSetter = (date, value) => {
 };
 
 const PATTERN_GETTERS = {
-  a: (date) => (date.getHours() < 12 ? 0 : 1),
+  a: (date: Date): number => (date.getHours() < 12 ? 0 : 1),
   E: 'getDay',
   y: 'getFullYear',
   M: monthGetter,
@@ -36,82 +60,92 @@ const PATTERN_GETTERS = {
 };
 
 const PATTERN_SETTERS = extend({}, getPatternSetters(), {
-  a: (date, value) => {
+  a: (date: Date, value: number | string): void => {
     const hours = date.getHours();
     const current = hours >= 12;
 
-    // eslint-disable-next-line radix
-    if (current === !!parseInt(value)) {
+    if (current === !!+value) {
       return;
     }
 
     date.setHours((hours + 12) % 24);
   },
-  d: (date, value) => {
-    // @ts-expect-error
+  d: (date: Date, value: number | string): void => {
     const lastDayInMonth = getLimits('dM', date).max;
 
-    if (value > lastDayInMonth) {
+    if (+value > lastDayInMonth) {
       date.setMonth(date.getMonth() + 1);
     }
 
-    date.setDate(value);
+    date.setDate(+value);
   },
-  h: (date, value) => {
+  h: (date: Date, value: number | string): void => {
     const isPM = date.getHours() >= 12;
     date.setHours((+value % 12) + (isPM ? 12 : 0));
   },
   M: monthSetter,
   L: monthSetter,
-  E: (date, value) => {
-    if (value < 0) {
+  E: (date: Date, value: number | string): void => {
+    if (+value < 0) {
       return;
     }
-    // eslint-disable-next-line radix
-    date.setDate(date.getDate() - date.getDay() + parseInt(value));
+
+    date.setDate(date.getDate() - date.getDay() + +value);
   },
-  y: (date, value) => {
+  y: (date: Date, value: number | string): void => {
     const currentYear = date.getFullYear();
     const valueLength = String(value).length;
-    // @ts-expect-error
     const maxLimitLength = String(getLimits('y', date).max).length;
-    // eslint-disable-next-line radix
-    const newValue = parseInt(String(currentYear).substr(0, maxLimitLength - valueLength) + value);
+    const yearPrefix = String(currentYear).substr(0, maxLimitLength - valueLength);
+    const newValue = parseInt(yearPrefix + value, 10);
 
     date.setFullYear(newValue);
   },
-  x: (date) => date,
+  x: (date: Date): Date => date,
 });
 
-const getPatternGetter = (patternChar) => {
-  const unsupportedCharGetter = () => patternChar;
-  return PATTERN_GETTERS[patternChar] || unsupportedCharGetter;
+const getPatternGetter = (patternChar: string): string | ((date: Date) => number | Date) => {
+  const unsupportedCharGetter = (): string => patternChar;
+  return (PATTERN_GETTERS[patternChar]
+    ?? unsupportedCharGetter) as string | ((date: Date) => number | Date);
 };
 
-export const renderDateParts = (text, regExpInfo) => {
-  const result = regExpInfo.regexp.exec(text);
+interface Section {
+  index: number;
+  isStub: boolean;
+  caret: { start: number; end: number };
+  pattern: string;
+  text: string;
+  limits: (date: Date, forcedPattern?: string) => { min: number; max: number };
+  setter: (date: Date, value: number | string) => void;
+  getter: string | ((date: Date) => Date | number);
+}
+
+export const renderDateParts = (
+  text: string,
+  regExpInfo: { regexp: RegExp; patterns: string[] },
+): Section[] => {
+  const result = regExpInfo.regexp.exec(text) ?? [];
 
   let start = 0;
   let end = 0;
-  const sections = [];
+  const sections: Section[] = [];
 
-  for (let i = 1; i < result.length; i++) {
+  for (let i = 1; i < result.length; i += 1) {
     start = end;
     end = start + result[i].length;
 
     const pattern = regExpInfo.patterns[i - 1].replace(/^'|'$/g, '');
     const getter = getPatternGetter(pattern[0]);
 
-    // @ts-expect-error
     sections.push({
       index: i - 1,
       isStub: pattern === result[i],
       caret: { start, end },
       pattern,
       text: result[i],
-      // @ts-expect-error
-      limits: (...args) => getLimits(pattern[0], ...args),
-      setter: PATTERN_SETTERS[pattern[0]] || noop,
+      limits: (date: Date, forcedPattern?: string) => getLimits(pattern[0], date, forcedPattern),
+      setter: PATTERN_SETTERS[pattern[0]] ?? noop,
       getter,
     });
   }
@@ -119,31 +153,11 @@ export const renderDateParts = (text, regExpInfo) => {
   return sections;
 };
 
-const getLimits = (pattern, date, forcedPattern) => {
-  const limits = {
-    y: { min: 0, max: 9999 },
-    M: { min: 1, max: 12 },
-    L: { min: 1, max: 12 },
-    d: { min: 1, max: 31 },
-    dM: {
-      min: 1,
-      max: new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(),
-    },
-    E: { min: 0, max: 6 },
-    H: { min: 0, max: 23 },
-    h: { min: 1, max: 12 },
-    m: { min: 0, max: 59 },
-    s: { min: 0, max: 59 },
-    S: { min: 0, max: 999 },
-    a: { min: 0, max: 1 },
-    x: { min: 0, max: 0 }, // NOTE: Timezone part is read only.
-  };
-  // @ts-expect-error
-  return limits[forcedPattern || pattern] || limits.getAmPm;
-};
-
-export const getDatePartIndexByPosition = (dateParts, position) => {
-  for (let i = 0; i < dateParts.length; i++) {
+export const getDatePartIndexByPosition = (
+  dateParts: { caret: { start: number; end: number }; isStub: boolean }[],
+  position: number,
+): number | null => {
+  for (let i = 0; i < dateParts.length; i += 1) {
     const caretInGroup = dateParts[i].caret.end >= position;
 
     if (!dateParts[i].isStub && caretInGroup) {
diff --git a/packages/devextreme/js/__internal/ui/date_box/m_date_box.mask.ts b/packages/devextreme/js/__internal/ui/date_box/m_date_box.mask.ts
index ced4a0def4c2..a69cf7a348b5 100644
--- a/packages/devextreme/js/__internal/ui/date_box/m_date_box.mask.ts
+++ b/packages/devextreme/js/__internal/ui/date_box/m_date_box.mask.ts
@@ -1,3 +1,4 @@
+/* eslint-disable class-methods-use-this */
 import eventsEngine from '@js/common/core/events/core/events_engine';
 import { addNamespace, isCommandKeyPressed, normalizeKeyName } from '@js/common/core/events/utils/index';
 import defaultDateNames from '@js/common/core/localization/default_date_names';
@@ -12,9 +13,14 @@ import {
   isDate, isDefined, isFunction, isString,
 } from '@js/core/utils/type';
 import type { DxEvent } from '@js/events';
-import type { Properties } from '@js/ui/date_box';
+import type { DateLike, Properties } from '@js/ui/date_box';
 import dateLocalization from '@ts/core/localization/date';
+import type { OptionChanged } from '@ts/core/widget/types';
+import type { KeyboardKeyDownEvent } from '@ts/events/core/m_keyboard_processor';
 
+import type { ValueChangedEvent } from '../editor/editor';
+import type { DxMouseWheelEvent } from '../scroll_view/types';
+import type { DateBoxBaseProperties } from './m_date_box.base';
 import DateBoxBase from './m_date_box.base';
 import { getDatePartIndexByPosition, renderDateParts } from './m_date_box.mask.parts';
 
@@ -30,26 +36,26 @@ class DateBoxMask extends DateBoxBase {
 
   _maskValue?: Date | null;
 
-  _dateParts!: Record<string, unknown>[];
+  _dateParts!: { caret: { start: number; end: number }; isStub: boolean }[];
 
   _maskInputHandler?: (() => void) | null;
 
-  _initialMaskValue?: Date;
+  _initialMaskValue?: Date | null;
 
   _searchValue!: string;
 
-  _regExpInfo?: Record<string, unknown>;
+  _regExpInfo!: { regexp: RegExp; patterns: string[] };
 
-  _formatPattern?: unknown;
+  _formatPattern?: string | null;
 
-  _supportedKeys(): Record<string, (e: KeyboardEvent) => boolean> {
+  _supportedKeys(): Record<string, (e: KeyboardEvent) => unknown> {
     const originalHandlers = super._supportedKeys();
-    const callOriginalHandler = (e) => {
-      // @ts-expect-error ts-error
-      const originalHandler = originalHandlers[normalizeKeyName(e)];
+    const callOriginalHandler = (e: KeyboardEvent): unknown => {
+      const normalizedKeyName = normalizeKeyName(e);
+      const originalHandler = normalizedKeyName ? originalHandlers[normalizedKeyName] : undefined;
       return originalHandler?.apply(this, [e]);
     };
-    const applyHandler = (e, maskHandler) => {
+    const applyHandler = (e: KeyboardEvent, maskHandler: (e: KeyboardEvent) => void): unknown => {
       if (this._shouldUseOriginalHandler(e)) {
         return callOriginalHandler.apply(this, [e]);
       }
@@ -60,17 +66,21 @@ class DateBoxMask extends DateBoxBase {
       ...originalHandlers,
       del: (e) => applyHandler(e, (event) => {
         this._revertPart(FORWARD);
-        this._isAllSelected() || event.preventDefault();
+        if (!this._isAllSelected()) {
+          event.preventDefault();
+        }
       }),
       backspace: (e) => applyHandler(e, (event) => {
         this._revertPart(BACKWARD);
-        this._isAllSelected() || event.preventDefault();
+        if (!this._isAllSelected()) {
+          event.preventDefault();
+        }
       }),
-      home: (e) => applyHandler(e, (event) => {
+      home: (e) => applyHandler(e, (event): void => {
         this._selectFirstPart();
         event.preventDefault();
       }),
-      end: (e) => applyHandler(e, (event) => {
+      end: (e) => applyHandler(e, (event): void => {
         this._selectLastPart();
         event.preventDefault();
       }),
@@ -99,15 +109,15 @@ class DateBoxMask extends DateBoxBase {
     };
   }
 
-  _shouldUseOriginalHandler(e) {
+  _shouldUseOriginalHandler(e: KeyboardEvent): boolean {
     const keysToHandleByMask = ['backspace', 'del'];
-    // @ts-expect-error
-    const isNotDeletingInCalendar = this.option('opened') && e && !keysToHandleByMask.includes(normalizeKeyName(e));
+    const { opened = false } = this.option();
+    const isNotDeletingInCalendar = opened && e && !keysToHandleByMask.includes(normalizeKeyName(e) ?? '');
 
     return !this._useMaskBehavior() || isNotDeletingInCalendar || (e && e.altKey);
   }
 
-  _upDownArrowHandler(step): void {
+  _upDownArrowHandler(step: number): void {
     this._setNewDateIfEmpty();
 
     const originalValue = this._getActivePartValue(this._initialMaskValue);
@@ -119,7 +129,7 @@ class DateBoxMask extends DateBoxBase {
     this._changePartValue(delta + step, true);
   }
 
-  _changePartValue(step, lockOtherParts?) {
+  _changePartValue(step: number, lockOtherParts?: boolean): void {
     const activePartPattern = this._getActivePartProp('pattern');
     const isAmPmPartActive = /^a{1,5}$/.test(activePartPattern);
 
@@ -132,8 +142,11 @@ class DateBoxMask extends DateBoxBase {
 
   _toggleAmPm(): void {
     const currentValue = this._getActivePartProp('text');
-    // @ts-expect-error ts-error
-    const indexOfCurrentValue = defaultDateNames.getPeriodNames().indexOf(currentValue);
+    const indexOfCurrentValue = defaultDateNames
+    // @ts-expect-error getPeriodNames type should be fixed
+      .getPeriodNames(this._formatPattern)
+      .indexOf(currentValue);
+    // eslint-disable-next-line no-bitwise
     const newValue = indexOfCurrentValue ^ 1;
     this._setActivePartValue(newValue);
   }
@@ -146,30 +159,40 @@ class DateBoxMask extends DateBoxBase {
     };
   }
 
-  _isSingleCharKey({ originalEvent, alt }) {
-    const key = originalEvent.data || originalEvent.key;
+  _isSingleCharKey(
+    { originalEvent, alt }: {
+      originalEvent: { data: string, key: string, ctrlKey: boolean, metaKey: boolean };
+      alt?: boolean
+    },
+  ): boolean {
+    const key = originalEvent.data ?? originalEvent.key;
     return typeof key === 'string' && key.length === 1 && !alt && !isCommandKeyPressed(originalEvent);
   }
 
-  _isSingleDigitKey(e) {
+  _isSingleDigitKey(e: {
+    originalEvent: InputEvent;
+    alt?: boolean;
+  }): boolean {
     const data = e.originalEvent?.data;
-    return data?.length === 1 && parseInt(data, 10);
+    return data?.length === 1 && Boolean(parseInt(data, 10));
   }
 
-  _useBeforeInputEvent() {
-    return devices.real().android;
+  _useBeforeInputEvent(): boolean {
+    return Boolean(devices.real().android);
   }
 
-  _keyInputHandler(e, key): void {
+  _keyInputHandler(e: DxEvent, key: string): void {
     const oldInputValue = this._input().val();
     this._processInputKey(key);
     e.preventDefault();
     const isValueChanged = oldInputValue !== this._input().val();
-    // @ts-expect-error ts-error
-    isValueChanged && eventsEngine.trigger(this._input(), 'input');
+
+    if (isValueChanged) {
+      eventsEngine.triggerHandler(this._input(), { type: 'input' });
+    }
   }
 
-  _keyboardHandler(e) {
+  _keyboardHandler(e: KeyboardKeyDownEvent): boolean {
     let { key } = e.originalEvent;
 
     const result = super._keyboardHandler(e);
@@ -178,10 +201,10 @@ class DateBoxMask extends DateBoxBase {
       return result;
     }
 
-    if (browser.chrome && e.key === 'Process' && e.code.indexOf('Digit') === 0) {
+    if (browser.chrome && e.key === 'Process' && e.code.startsWith('Digit')) {
       key = e.code.replace('Digit', '');
       this._processInputKey(key);
-      this._maskInputHandler = () => {
+      this._maskInputHandler = (): void => {
         this._renderSelectedPart();
       };
     } else if (this._isSingleCharKey(e)) {
@@ -191,13 +214,13 @@ class DateBoxMask extends DateBoxBase {
     return result;
   }
 
-  _maskBeforeInputHandler(e) {
+  _maskBeforeInputHandler(e: DxEvent<KeyboardKeyDownEvent & InputEvent>): boolean {
     this._maskInputHandler = null;
 
     const { inputType } = e.originalEvent;
 
     if (inputType === 'insertCompositionText') {
-      this._maskInputHandler = () => {
+      this._maskInputHandler = (): void => {
         this._renderSelectedPart();
       };
     }
@@ -206,26 +229,26 @@ class DateBoxMask extends DateBoxBase {
     const isForwardDeletion = inputType === 'deleteContentForward';
     if (isBackwardDeletion || isForwardDeletion) {
       const direction = isBackwardDeletion ? BACKWARD : FORWARD;
-      this._maskInputHandler = () => {
+      this._maskInputHandler = (): void => {
         this._revertPart();
         this._selectNextPart(direction);
       };
     }
 
     if (!this._useMaskBehavior() || !this._isSingleCharKey(e)) {
-      return;
+      return false;
     }
 
-    const key = e.originalEvent.data;
+    const key = e.originalEvent.data ?? '';
     this._keyInputHandler(e, key);
 
     return true;
   }
 
-  _keyPressHandler(e) {
+  _keyPressHandler(e: { originalEvent: InputEvent & KeyboardEvent }): void {
     const { originalEvent: event } = e;
     if (event?.inputType === 'insertCompositionText' && this._isSingleDigitKey(e)) {
-      this._processInputKey(event.data);
+      this._processInputKey(event.data ?? '');
       this._renderDisplayText(this._getDisplayedText(this._maskValue));
       this._selectNextPart();
     }
@@ -245,8 +268,8 @@ class DateBoxMask extends DateBoxBase {
       this._clearSearchValue();
     }
     this._setNewDateIfEmpty();
-    // eslint-disable-next-line radix
-    if (isNaN(parseInt(key))) {
+
+    if (isNaN(parseInt(key, 10))) {
       this._searchString(key);
     } else {
       this._searchNumber(key);
@@ -255,58 +278,59 @@ class DateBoxMask extends DateBoxBase {
 
   _isAllSelected(): boolean {
     const caret = this._caret();
-    const { text } = this.option();
-    // @ts-expect-error ts-error
+    const { text = '' } = this.option();
+
     return caret.end - caret.start === text.length;
   }
 
-  _getFormatPattern() {
+  _getFormatPattern(): string {
     if (this._formatPattern) {
       return this._formatPattern;
     }
 
-    const format = this._strategy.getDisplayFormat(this.option('displayFormat'));
+    const { displayFormat } = this.option();
+    const format = this._strategy.getDisplayFormat(displayFormat);
     const isLDMLPattern = isString(format) && !dateLocalization._getPatternByFormat(format);
 
     if (isLDMLPattern) {
       this._formatPattern = format;
     } else {
-      this._formatPattern = getFormat((value) => dateLocalization.format(value, format));
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+      this._formatPattern = getFormat((value) => dateLocalization.format(value, format)) as string;
     }
 
     return this._formatPattern;
   }
 
-  _setNewDateIfEmpty() {
+  _setNewDateIfEmpty(): void {
     if (!this._maskValue) {
       const { type } = this.option();
-      // @ts-expect-error ts-error
-      const value = type === 'time' ? new Date(null) : new Date();
+      const value = type === 'time' ? new Date(0) : new Date();
+
       this._maskValue = value;
       this._initialMaskValue = value;
       this._renderDateParts();
     }
   }
 
-  _partLimitsReached(max) {
+  _partLimitsReached(max: number): boolean {
     const maxLimitLength = String(max).length;
     const formatLength = this._getActivePartProp('pattern').length;
     const isShortFormat = formatLength === 1;
     const maxSearchLength = isShortFormat ? maxLimitLength : Math.min(formatLength, maxLimitLength);
     const isLengthExceeded = this._searchValue.length === maxSearchLength;
-    // eslint-disable-next-line radix
-    const isValueOverflowed = parseInt(`${this._searchValue}0`) > max;
+    const isValueOverflowed = parseInt(`${this._searchValue}0`, 10) > max;
 
     return isLengthExceeded || isValueOverflowed;
   }
 
-  _searchNumber(char): void {
+  _searchNumber(char: string): void {
     const { max } = this._getActivePartLimits();
     const maxLimitLength = String(max).length;
 
     this._searchValue = (this._searchValue + char).substr(-maxLimitLength);
-    // @ts-expect-error ts-error
-    if (isNaN(this._searchValue)) {
+
+    if (isNaN(parseInt(this._searchValue, 10))) {
       this._searchValue = char;
     }
 
@@ -317,7 +341,7 @@ class DateBoxMask extends DateBoxBase {
     }
   }
 
-  _searchString(char) {
+  _searchString(char: string): void {
     const text = this._getActivePartProp('text');
     const convertedText = numberLocalization.convertDigits(text, true);
 
@@ -325,16 +349,16 @@ class DateBoxMask extends DateBoxBase {
       return;
     }
 
-    const limits = this._getActivePartProp('limits')(this._maskValue);
+    const limits = this._getActivePartProp('limits')(this._maskValue as Date);
     const startString = this._searchValue + char.toLowerCase();
     const endLimit = limits.max - limits.min;
 
-    for (let i = 0; i <= endLimit; i++) {
+    for (let i = 0; i <= endLimit; i += 1) {
       this._loadMaskValue(this._initialMaskValue);
 
       this._changePartValue(i + 1);
 
-      if (this._getActivePartProp('text').toLowerCase().indexOf(startString) === 0) {
+      if (this._getActivePartProp('text').toLowerCase().startsWith(startString)) {
         this._searchValue = startString;
         return;
       }
@@ -352,9 +376,10 @@ class DateBoxMask extends DateBoxBase {
     this._searchValue = '';
   }
 
-  _revertPart(direction?): void {
+  _revertPart(direction?: number): void {
     if (!this._isAllSelected()) {
-      const actual = this._getActivePartValue(this.option('emptyDateValue'));
+      const { emptyDateValue } = this.option();
+      const actual = this._getActivePartValue(emptyDateValue);
       this._setActivePartValue(actual);
 
       this._selectNextPart(direction);
@@ -368,12 +393,9 @@ class DateBoxMask extends DateBoxBase {
   }
 
   _prepareRegExpInfo(): void {
-    // @ts-expect-error ts-error
     this._regExpInfo = getRegExpInfo(this._getFormatPattern(), dateLocalization);
     const { regexp } = this._regExpInfo;
-    // @ts-expect-error ts-error
     const { source } = regexp;
-    // @ts-expect-error ts-error
     const { flags } = regexp;
     const quantifierRegexp = new RegExp(/(\{[0-9]+,?[0-9]*\})/);
 
@@ -381,7 +403,7 @@ class DateBoxMask extends DateBoxBase {
       .split(quantifierRegexp)
       .map((sourcePart) => (quantifierRegexp.test(sourcePart)
         ? sourcePart
-        : numberLocalization.convertDigits(sourcePart, false)))
+        : numberLocalization.convertDigits(sourcePart, false)) as string)
       .join('');
     this._regExpInfo.regexp = new RegExp(convertedSource, flags);
   }
@@ -410,10 +432,12 @@ class DateBoxMask extends DateBoxBase {
       return;
     }
 
-    const text = this.option('text') || this._getDisplayedText(this._maskValue);
+    const { text } = this.option();
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    const newText = text || this._getDisplayedText(this._maskValue);
 
-    if (text) {
-      this._dateParts = renderDateParts(text, this._regExpInfo);
+    if (newText) {
+      this._dateParts = renderDateParts(newText, this._regExpInfo);
       if (!this._input().is(':hidden')) {
         this._selectNextPart();
       }
@@ -461,9 +485,9 @@ class DateBoxMask extends DateBoxBase {
     return true;
   }
 
-  _onMouseWheel(e): void {
+  _onMouseWheel(e: DxMouseWheelEvent): void {
     if (this._useMaskBehavior()) {
-      this._partIncrease(e.delta > 0 ? FORWARD : BACKWARD, e);
+      this._partIncrease(e.delta > 0 ? FORWARD : BACKWARD, Boolean(e));
     }
   }
 
@@ -473,22 +497,23 @@ class DateBoxMask extends DateBoxBase {
     }
 
     if (step) {
-      // @ts-expect-error ts-error
-      this._initialMaskValue = new Date(this._maskValue);
+      this._initialMaskValue = new Date(this._maskValue as Date);
     }
-    // @ts-expect-error ts-error
-    let index = fitIntoRange(this._activePartIndex + step, 0, this._dateParts.length - 1);
+
+    const activePartIndex = this._activePartIndex ?? 0;
+    let index = fitIntoRange(activePartIndex + step, 0, this._dateParts.length - 1);
     if (this._dateParts[index].isStub) {
-      const isBoundaryIndex = index === 0 && step < 0 || index === this._dateParts.length - 1 && step > 0;
+      const isBoundaryIndex = (index === 0 && step < 0)
+        || (index === this._dateParts.length - 1 && step > 0);
       if (!isBoundaryIndex) {
         this._selectNextPart(step >= 0 ? step + 1 : step - 1);
         return;
       }
-      // @ts-expect-error ts-error
-      index = this._activePartIndex;
+
+      index = activePartIndex;
     }
 
-    if (this._activePartIndex !== index) {
+    if (activePartIndex !== index) {
       this._clearSearchValue();
     }
 
@@ -496,60 +521,77 @@ class DateBoxMask extends DateBoxBase {
     this._caret(this._getActivePartProp('caret'));
   }
 
-  // @ts-expect-error
-  _getRealLimitsPattern() {
-    if (this._getActivePartProp('pattern')[0] === 'd') {
+  _getRealLimitsPattern(): string | undefined {
+    if (this._getActivePartProp('pattern').startsWith('d')) {
       return 'dM';
     }
+
+    return undefined;
   }
 
-  _getActivePartLimits(lockOtherParts?) {
+  _getActivePartLimits(lockOtherParts = false): { min: number; max: number } {
     const limitFunction = this._getActivePartProp('limits');
-    return limitFunction(this._maskValue, lockOtherParts && this._getRealLimitsPattern());
+    return limitFunction(
+      this._maskValue as Date,
+      lockOtherParts ? this._getRealLimitsPattern() : undefined,
+    );
   }
 
-  _getActivePartValue(dateValue?) {
-    dateValue = dateValue || this._maskValue;
+  _getActivePartValue(dateValue?: Date | null): number {
+    const date = dateValue ?? this._maskValue as Date;
     const getter = this._getActivePartProp('getter');
-    return isFunction(getter) ? getter(dateValue) : dateValue[getter]();
+
+    return isFunction(getter) ? getter(date) : date[getter]() as number;
   }
 
-  _addLeadingZeroes(value) {
+  _addLeadingZeroes(value: number): string {
     const zeroes = /^0+/.exec(this._searchValue);
     const limits = this._getActivePartLimits();
     const maxLimitLength = String(limits.max).length;
 
-    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-    return ((zeroes && zeroes[0] || '') + String(value)).substr(-maxLimitLength);
+    return (((zeroes?.[0]) ?? '') + String(value)).substr(-maxLimitLength);
   }
 
-  _setActivePartValue(value, dateValue?) {
-    dateValue = dateValue || this._maskValue;
+  _setActivePartValue(value: number | string, dateValue?: Date): void {
+    let newValue: number | string = +value;
+    const newDateValue = dateValue ?? this._maskValue as Date;
     const setter = this._getActivePartProp('setter');
     const limits = this._getActivePartLimits();
 
-    value = inRange(value, limits.min, limits.max) ? value : value % 10;
-    value = this._addLeadingZeroes(fitIntoRange(value, limits.min, limits.max));
+    newValue = inRange(newValue, limits.min, limits.max) ? newValue : newValue % 10;
+    newValue = this._addLeadingZeroes(fitIntoRange(newValue, limits.min, limits.max));
 
-    isFunction(setter) ? setter(dateValue, value) : dateValue[setter](value);
-    this._renderDisplayText(this._getDisplayedText(dateValue));
+    if (isFunction(setter)) {
+      setter(newDateValue, newValue);
+    } else {
+      newDateValue[setter](newValue);
+    }
+    this._renderDisplayText(this._getDisplayedText(newDateValue));
 
     this._renderDateParts();
   }
 
-  _getActivePartProp(property) {
-    // @ts-expect-error ts-error
+  _getActivePartProp(property: 'caret'): { start: number; end: number };
+  _getActivePartProp(property: 'isStub'): boolean;
+  _getActivePartProp(property: 'pattern' | 'text'): string;
+  _getActivePartProp(property: 'limits'): (date: Date, forcedPattern?: string) => { min: number; max: number };
+  _getActivePartProp(property: 'setter'): string | ((date: Date, value: number | string) => void);
+  _getActivePartProp(property: 'getter'): string | ((date: Date) => number);
+  _getActivePartProp(property: 'caret' | 'isStub' | 'pattern' | 'text' | 'limits' | 'setter' | 'getter'): unknown {
+    if (!isDefined(this._activePartIndex)) {
+      return undefined;
+    }
 
-    if (!this._dateParts || !this._dateParts[this._activePartIndex]) {
+    if (!this._dateParts?.[this._activePartIndex]) {
       return undefined;
     }
-    // @ts-expect-error ts-error
-    return this._dateParts[this._activePartIndex][property];
+
+    return this._dateParts[this._activePartIndex][property] as unknown;
   }
 
-  _loadMaskValue(value = this.dateOption('value')) {
-    this._maskValue = value && new Date(value);
-    this._initialMaskValue = value && new Date(value);
+  _loadMaskValue(value: Date | null | string = this.getDateOption('value')): void {
+    this._maskValue = value ? new Date(value) : null;
+    this._initialMaskValue = value ? new Date(value) : null;
   }
 
   _saveMaskValue(): void {
@@ -563,7 +605,7 @@ class DateBoxMask extends DateBoxBase {
     this._initialMaskValue = new Date(value);
 
     if (this._applyInternalValidation(value).isValid) {
-      this.dateOption('value', value);
+      this.setDateOption('value', value);
     }
   }
 
@@ -573,14 +615,14 @@ class DateBoxMask extends DateBoxBase {
     this._renderDateParts();
   }
 
-  _renderDisplayText(text): void {
+  _renderDisplayText(text?: string): void {
     super._renderDisplayText(text);
     if (this._useMaskBehavior()) {
       this.option('text', text);
     }
   }
 
-  _partIncrease(step, lockOtherParts): void {
+  _partIncrease(step: number, lockOtherParts?: boolean): void {
     this._setNewDateIfEmpty();
 
     const { max, min } = this._getActivePartLimits(lockOtherParts);
@@ -596,14 +638,18 @@ class DateBoxMask extends DateBoxBase {
     this._setActivePartValue(newValue);
   }
 
-  _applyLimits(newValue, { limitBase, limitClosest, max }) {
+  _applyLimits(
+    newValue: number,
+    { limitBase, limitClosest, max }: { limitBase: number, limitClosest: number, max: number },
+  ): number {
     const delta = (newValue - limitClosest) % max;
     return delta ? limitBase + delta - 1 * sign(delta) : limitClosest;
   }
 
-  _maskClickHandler() {
+  _maskClickHandler(): void {
     this._loadMaskValue(this._maskValue);
-    if (this.option('text')) {
+    const { text } = this.option();
+    if (text) {
       this._activePartIndex = getDatePartIndexByPosition(this._dateParts, this._caret().start);
 
       if (!this._isAllSelected()) {
@@ -618,18 +664,18 @@ class DateBoxMask extends DateBoxBase {
     }
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  _maskCompositionEndHandler(e): void {
+  _maskCompositionEndHandler(): void {
     this._input().val(this._getDisplayedText(this._maskValue));
     this._selectNextPart();
 
-    this._maskInputHandler = () => {
+    this._maskInputHandler = (): void => {
       this._renderSelectedPart();
     };
   }
 
-  _maskPasteHandler(e): void {
-    const newText = this._replaceSelectedText(this.option('text'), this._caret(), clipboardText(e));
+  _maskPasteHandler(e: DxEvent): void {
+    const { text } = this.option();
+    const newText = this._replaceSelectedText(text, this._caret(), clipboardText(e));
     const date = dateLocalization.parse(newText, this._getFormatPattern());
 
     if (date && this._isDateValid(date)) {
@@ -642,23 +688,21 @@ class DateBoxMask extends DateBoxBase {
     e.preventDefault();
   }
 
-  _isDateValid(date): boolean {
-    // @ts-expect-error ts-error
-    return isDate(date) && !isNaN(date);
+  _isDateValid(date: DateLike): boolean {
+    return isDate(date) && !isNaN(date.getTime());
   }
 
-  _isValueDirty() {
-    const value = this.dateOption('value');
+  _isValueDirty(): boolean {
+    const value = this.getDateOption('value');
 
-    return (this._maskValue && this._maskValue.getTime()) !== (value && value.getTime());
+    return this._maskValue?.getTime() !== value?.getTime();
   }
 
-  _fireChangeEvent() {
+  _fireChangeEvent(): void {
     this._clearSearchValue();
 
     if (this._isValueDirty()) {
-      // @ts-expect-error
-      eventsEngine.trigger(this._input(), 'change');
+      eventsEngine.triggerHandler(this._input(), { type: 'change' });
     }
   }
 
@@ -683,8 +727,8 @@ class DateBoxMask extends DateBoxBase {
     }
   }
 
-  _valueChangeEventHandler(e) {
-    const text = this.option('text');
+  _valueChangeEventHandler(e: ValueChangedEvent): void {
+    const { text } = this.option();
 
     if (this._useMaskBehavior()) {
       this._saveValueChangeEvent(e);
@@ -699,7 +743,7 @@ class DateBoxMask extends DateBoxBase {
     }
   }
 
-  _optionChanged(args): void {
+  _optionChanged(args: OptionChanged<DateBoxBaseProperties>): void {
     switch (args.name) {
       case 'useMaskBehavior':
         this._renderMask();
diff --git a/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.calendar.ts b/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.calendar.ts
index d675e614b359..6f824314b905 100644
--- a/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.calendar.ts
+++ b/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.calendar.ts
@@ -1,12 +1,14 @@
+/* eslint-disable class-methods-use-this */
 import messageLocalization from '@js/common/core/localization/message';
-// @ts-expect-error
-import { splitPair } from '@js/core/utils/common';
 import dateUtils from '@js/core/utils/date';
 import { extend } from '@js/core/utils/extend';
 import { isEmptyObject, isFunction } from '@js/core/utils/type';
 import Calendar from '@js/ui/calendar';
+import type { ToolbarItem } from '@js/ui/popup';
 import { isMaterial } from '@js/ui/themes';
+import { splitPair } from '@ts/core/utils/m_common';
 
+import type { PopupProperties } from '../popup/m_popup';
 import DateBoxStrategy from './m_date_box.strategy';
 
 const TODAY_BUTTON_CLASS = 'dx-button-today';
@@ -27,8 +29,7 @@ class CalendarStrategy extends DateBoxStrategy {
     };
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
-  supportedKeys(): Record<string, (e: KeyboardEvent) => boolean | void> {
+  supportedKeys(): Record<string, (e: KeyboardEvent) => void> {
     const homeEndHandler = function (e) {
       if (this.option('opened')) {
         e.preventDefault();
@@ -131,7 +132,7 @@ class CalendarStrategy extends DateBoxStrategy {
     this.dateBox.setAria('activedescendant', e.actionValue);
   }
 
-  _getTodayButtonConfig() {
+  _getTodayButtonConfig(): ToolbarItem {
     const buttonsLocation = this.dateBox.option('buttonsLocation');
     const isButtonsLocationDefault = buttonsLocation === 'default';
     const position = isButtonsLocationDefault ? ['bottom', 'center'] : splitPair(buttonsLocation);
@@ -157,7 +158,7 @@ class CalendarStrategy extends DateBoxStrategy {
     return isEmptyObject(calendarOptions) || calendarOptions.visible !== false;
   }
 
-  _getPopupToolbarItems(toolbarItems) {
+  _getPopupToolbarItems(toolbarItems: ToolbarItem[]): ToolbarItem[] {
     const useButtons = this.dateBox.option('applyValueMode') === 'useButtons';
     const shouldRenderTodayButton = useButtons && this._isCalendarVisible();
 
@@ -173,11 +174,11 @@ class CalendarStrategy extends DateBoxStrategy {
     return toolbarItems;
   }
 
-  popupConfig(popupConfig) {
+  popupConfig(popupConfig: PopupProperties): PopupProperties {
     return extend(true, popupConfig, {
       position: { collision: 'flipfit flip' },
       width: 'auto',
-    });
+    }) as PopupProperties;
   }
 
   _valueChangedHandler(e) {
@@ -193,8 +194,7 @@ class CalendarStrategy extends DateBoxStrategy {
     }
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  _updateValue(preventDefaultValue?: boolean) {
+  _updateValue() {
     if (!this._widget) {
       return;
     }
@@ -206,7 +206,7 @@ class CalendarStrategy extends DateBoxStrategy {
     this._lastActionElement = 'input';
 
     if (this.dateBox.option('opened') && this._widget) {
-      this._updateValue(true);
+      this._updateValue();
     }
   }
 
diff --git a/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.calendar_with_time.ts b/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.calendar_with_time.ts
index b165920b68d4..162eea2bdc9e 100644
--- a/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.calendar_with_time.ts
+++ b/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.calendar_with_time.ts
@@ -7,6 +7,8 @@ import { getWindow } from '@js/core/utils/window';
 import Box from '@ts/ui/box';
 import TimeView from '@ts/ui/date_box/time_view';
 
+import type { PopupProperties } from '../popup/m_popup';
+import type DateBox from './m_date_box.base';
 import CalendarStrategy from './m_date_box.strategy.calendar';
 import uiDateUtils from './m_date_utils';
 
@@ -19,15 +21,17 @@ const DATEBOX_TIMEVIEW_SIDE_CLASS = 'dx-datebox-datetime-time-side';
 class CalendarWithTimeStrategy extends CalendarStrategy {
   _timeView!: TimeView;
 
+  // eslint-disable-next-line no-restricted-globals
   _repaintTimer?: ReturnType<typeof setTimeout>;
 
+  // eslint-disable-next-line no-restricted-globals
   _removeMinWidthTimer?: ReturnType<typeof setTimeout>;
 
   _currentAdaptiveMode?: boolean;
 
   _box?: Box;
 
-  ctor(dateBox): void {
+  ctor(dateBox: DateBox): void {
     super.ctor(dateBox);
 
     this.NAME = 'CalendarWithTime';
@@ -99,7 +103,7 @@ class CalendarWithTimeStrategy extends CalendarStrategy {
     return super.isAdaptivityChanged();
   }
 
-  _updateValue(preventDefaultValue) {
+  _updateValue(preventDefaultValue?: boolean): void {
     let date = this.dateBoxValue();
 
     if (!date && !preventDefaultValue) {
@@ -170,9 +174,9 @@ class CalendarWithTimeStrategy extends CalendarStrategy {
     });
   }
 
-  popupConfig(popupConfig) {
+  popupConfig(popupConfig: PopupProperties): PopupProperties {
     const calendarPopupConfig = super.popupConfig(popupConfig);
-    return extend(calendarPopupConfig, { width: 'auto' });
+    return extend(calendarPopupConfig, { width: 'auto' }) as PopupProperties;
   }
 
   _preventFocusOnPopup(e): void {
diff --git a/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.date_view.ts b/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.date_view.ts
index b3e3eae25f26..caf2f1fc2cac 100644
--- a/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.date_view.ts
+++ b/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.date_view.ts
@@ -122,8 +122,8 @@ class DateViewStrategy extends DateBoxStrategy {
     return {
       value: this.dateBoxValue() || new Date(),
       type: this.dateBox.option('type'),
-      minDate: this.dateBox.dateOption('min') || new Date(1900, 0, 1),
-      maxDate: this.dateBox.dateOption('max') || new Date(Date.now() + 50 * dateUtils.ONE_YEAR),
+      minDate: this.dateBox.getDateOption('min') || new Date(1900, 0, 1),
+      maxDate: this.dateBox.getDateOption('max') || new Date(Date.now() + 50 * dateUtils.ONE_YEAR),
       onDisposing: function () {
         this._widget = null;
       }.bind(this),
diff --git a/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.list.ts b/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.list.ts
index 173e9c582dc1..401151670d2f 100644
--- a/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.list.ts
+++ b/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.list.ts
@@ -1,3 +1,4 @@
+/* eslint-disable class-methods-use-this */
 import '@ts/ui/list/modules/selection';
 
 import dateLocalization from '@js/common/core/localization/date';
@@ -9,6 +10,7 @@ import { getWindow } from '@js/core/utils/window';
 import { getSizeValue } from '@ts/ui/drop_down_editor/m_utils';
 import List from '@ts/ui/list/list.edit.search';
 
+import type { PopupProperties } from '../popup/m_popup';
 import DateBoxStrategy from './m_date_box.strategy';
 import dateUtils from './m_date_utils';
 
@@ -51,7 +53,7 @@ class ListStrategy extends DateBoxStrategy {
     return displayFormat || 'shorttime';
   }
 
-  popupConfig(popupConfig) {
+  popupConfig(popupConfig: PopupProperties): PopupProperties {
     return popupConfig;
   }
 
@@ -174,9 +176,9 @@ class ListStrategy extends DateBoxStrategy {
   }
 
   _getTimeListItems() {
-    let min = this.dateBox.dateOption('min') || this._getBoundaryDate('min');
-    const max = this.dateBox.dateOption('max') || this._getBoundaryDate('max');
-    const value = this.dateBox.dateOption('value') || null;
+    let min = this.dateBox.getDateOption('min') || this._getBoundaryDate('min');
+    const max = this.dateBox.getDateOption('max') || this._getBoundaryDate('max');
+    const value = this.dateBox.getDateOption('value') || null;
     let delta = max - min;
     const minutes = min.getMinutes() % this.dateBox.option('interval');
 
@@ -217,7 +219,7 @@ class ListStrategy extends DateBoxStrategy {
 
   _getBoundaryDate(boundary) {
     const boundaryValue = BOUNDARY_VALUES[boundary];
-    const currentValue = new Date(ensureDefined(this.dateBox.dateOption('value'), 0));
+    const currentValue = new Date(ensureDefined(this.dateBox.getDateOption('value'), 0));
 
     return new Date(
       currentValue.getFullYear(),
diff --git a/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.native.ts b/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.native.ts
index 5da622c926a4..24faf41268c6 100644
--- a/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.native.ts
+++ b/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.native.ts
@@ -82,8 +82,8 @@ class NativeStrategy extends DateBoxStrategy {
     }[type] ?? defaultFormat;
 
     $input.attr({
-      min: dateSerialization.serializeDate(this.dateBox.dateOption('min'), format),
-      max: dateSerialization.serializeDate(this.dateBox.dateOption('max'), format),
+      min: dateSerialization.serializeDate(this.dateBox.getDateOption('min'), format),
+      max: dateSerialization.serializeDate(this.dateBox.getDateOption('max'), format),
     });
   }
 }
diff --git a/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.ts b/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.ts
index 3a2ca29b1e45..1332349c2449 100644
--- a/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.ts
+++ b/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.ts
@@ -1,7 +1,9 @@
+/* eslint-disable class-methods-use-this */
 import eventsEngine from '@js/common/core/events/core/events_engine';
 import dateLocalization from '@js/common/core/localization/date';
 import Class from '@js/core/class';
 import $ from '@js/core/renderer';
+import type { ToolbarItem } from '@js/ui/popup';
 
 import type { PopupProperties } from '../popup/m_popup';
 
@@ -59,10 +61,8 @@ class DateBoxStrategy extends (Class.inherit({}) as new() => {}) {
   customizeButtons() {}
 
   getParsedText(text, format) {
-    // @ts-expect-error
     const value = dateLocalization.parse(text, format);
-    // @ts-expect-error
-    return value || dateLocalization.parse(text);
+    return value ?? dateLocalization.parse(text);
   }
 
   renderInputMinMax(): void {}
@@ -71,17 +71,15 @@ class DateBoxStrategy extends (Class.inherit({}) as new() => {}) {
     this._updateValue();
   }
 
-  // @ts-expect-error ts-error
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   popupConfig(popupConfig: PopupProperties): PopupProperties {
-    Class.abstract();
+    return popupConfig;
   }
 
   _dimensionChanged(): void {
     this._getPopup()?.repaint();
   }
 
-  renderPopupContent() {
+  renderPopupContent(): void {
     const popup = this._getPopup();
     this._renderWidget();
 
@@ -106,14 +104,19 @@ class DateBoxStrategy extends (Class.inherit({}) as new() => {}) {
 
   popupHiddenHandler() {}
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  _updateValue(preventDefaultValue?: boolean) {
+  _updateValue() {
     this._widget?.option('value', this.dateBoxValue());
   }
 
-  useCurrentDateByDefault() {}
+  _getPopupToolbarItems(toolbarItems: ToolbarItem[]): ToolbarItem[] {
+    return toolbarItems;
+  }
+
+  useCurrentDateByDefault(): boolean {
+    return false;
+  }
 
-  getDefaultDate() {
+  getDefaultDate(): Date {
     return new Date();
   }
 
@@ -146,7 +149,7 @@ class DateBoxStrategy extends (Class.inherit({}) as new() => {}) {
     if (arguments.length) {
       return this.dateBox.dateValue.apply(this.dateBox, arguments);
     }
-    return this.dateBox.dateOption.apply(this.dateBox, ['value']);
+    return this.dateBox.getDateOption.apply(this.dateBox, ['value']);
   }
 }
 
diff --git a/packages/devextreme/js/__internal/ui/date_box/m_date_utils.ts b/packages/devextreme/js/__internal/ui/date_box/m_date_utils.ts
index 28429841f8b0..679486ff562a 100644
--- a/packages/devextreme/js/__internal/ui/date_box/m_date_utils.ts
+++ b/packages/devextreme/js/__internal/ui/date_box/m_date_utils.ts
@@ -1,8 +1,8 @@
 import dateLocalization from '@js/common/core/localization/date';
 import $ from '@js/core/renderer';
 import dateSerialization from '@js/core/utils/date_serialization';
-import { each } from '@js/core/utils/iterator';
 import { isDate } from '@js/core/utils/type';
+import type { DateLike, DateType } from '@js/ui/date_box';
 
 const DATE_COMPONENTS = ['year', 'day', 'month', 'day'];
 const TIME_COMPONENTS = ['hours', 'minutes', 'seconds', 'milliseconds'];
@@ -11,14 +11,23 @@ const ONE_MINUTE = 1000 * 60;
 const ONE_DAY = ONE_MINUTE * 60 * 24;
 const ONE_YEAR = ONE_DAY * 365;
 
-const getStringFormat = function (format) {
+type FormatKey = DateType | 'datetime-local';
+type DateComponentKey = 'year' | 'day' | 'month' | 'hours' | 'minutes' | 'seconds' | 'milliseconds';
+type ShortFormat = 'shortdate' | 'shorttime' | 'shortdateshorttime';
+
+interface FormatInfo {
+  getStandardPattern: () => string;
+  components: DateComponentKey[];
+}
+
+const getStringFormat = (format: string | { type: string }): string | null => {
   const formatType = typeof format;
 
   if (formatType === 'string') {
     return 'format';
   }
 
-  if (formatType === 'object' && format.type !== undefined) {
+  if (typeof format === 'object' && format.type !== undefined) {
     return format.type;
   }
 
@@ -33,29 +42,29 @@ const dateUtils = {
   ONE_YEAR,
 
   MIN_DATEVIEW_DEFAULT_DATE: new Date(1900, 0, 1),
-  MAX_DATEVIEW_DEFAULT_DATE: (function () {
+  MAX_DATEVIEW_DEFAULT_DATE: ((): Date => {
     const newDate = new Date();
     return new Date(newDate.getFullYear() + 50, newDate.getMonth(), newDate.getDate(), 23, 59, 59);
-  }()),
+  })(),
 
   FORMATS_INFO: {
     date: {
-      getStandardPattern() {
+      getStandardPattern(): string {
         return 'yyyy-MM-dd';
       },
       components: DATE_COMPONENTS,
     },
     time: {
-      getStandardPattern() {
+      getStandardPattern(): string {
         return 'HH:mm';
       },
       components: TIME_COMPONENTS,
     },
     datetime: {
-      getStandardPattern() {
-        let standardPattern;
+      getStandardPattern(): string {
+        let standardPattern = 'yyyy-MM-ddTHH:mm:ssZ';
 
-        (function androidFormatDetection() {
+        (function androidFormatDetection(): void {
           const androidFormatPattern = 'yyyy-MM-ddTHH:mmZ';
           const testDateString = '2000-01-01T01:01Z';
 
@@ -67,13 +76,9 @@ const dateUtils = {
           }
         }());
 
-        if (!standardPattern) {
-          standardPattern = 'yyyy-MM-ddTHH:mm:ssZ';
-        }
+        standardPattern ??= 'yyyy-MM-ddTHH:mm:ssZ';
 
-        dateUtils.FORMATS_INFO.datetime.getStandardPattern = function () {
-          return standardPattern;
-        };
+        dateUtils.FORMATS_INFO.datetime.getStandardPattern = (): string => standardPattern;
 
         return standardPattern;
       },
@@ -85,62 +90,65 @@ const dateUtils = {
       },
       components: [...DATE_COMPONENTS, 'hours', 'minutes', 'seconds'],
     },
-  },
+  } as Record<FormatKey, FormatInfo>,
 
   FORMATS_MAP: {
     date: 'shortdate',
     time: 'shorttime',
     datetime: 'shortdateshorttime',
-  },
+  } as Record<DateType, ShortFormat>,
 
   SUBMIT_FORMATS_MAP: {
     date: 'date',
     time: 'time',
     datetime: 'datetime-local',
-  },
+  } as Record<DateType, FormatKey>,
 
-  toStandardDateFormat(date, type) {
+  toStandardDateFormat(date: DateLike | undefined, type: string): string {
     const pattern = dateUtils.FORMATS_INFO[type].getStandardPattern();
 
-    return dateSerialization.serializeDate(date, pattern);
+    return dateSerialization.serializeDate(date, pattern) as string;
   },
 
-  fromStandardDateFormat(text) {
+  fromStandardDateFormat(text: string): Date | undefined {
     const date = dateSerialization.dateParser(text);
     return isDate(date) ? date : undefined;
   },
 
-  getMaxMonthDay(year, month) {
+  getMaxMonthDay(year: number, month: number): number {
     return new Date(year, month + 1, 0).getDate();
   },
 
-  mergeDates(oldValue, newValue, format) {
+  mergeDates(
+    oldValue: Date | null | undefined,
+    newValue: Date | null | undefined,
+    format: FormatKey,
+  ): Date | null {
+    let oldDate = oldValue;
     if (!newValue) {
-      return newValue || null;
+      return newValue ?? null;
     }
-    if (!oldValue || isNaN(oldValue.getTime())) {
-      // @ts-expect-error
-      const now = new Date(null);
-      oldValue = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    if (!oldDate || isNaN(oldDate.getTime())) {
+      const now = new Date(0);
+      oldDate = new Date(now.getFullYear(), now.getMonth(), now.getDate());
     }
 
-    const result = new Date(oldValue.valueOf());
+    const result = new Date(oldDate.valueOf());
     const formatInfo = dateUtils.FORMATS_INFO[format];
 
-    each(formatInfo.components, function () {
-      // @ts-expect-error
-      const componentInfo = dateUtils.DATE_COMPONENTS_INFO[this];
+    formatInfo.components.forEach((component: DateComponentKey) => {
+      const componentInfo = dateUtils.DATE_COMPONENTS_INFO[component];
       result[componentInfo.setter](newValue[componentInfo.getter]());
     });
 
     return result;
   },
 
-  getLongestCaptionIndex(captionArray) {
+  getLongestCaptionIndex(captionArray: string[]): number {
     let longestIndex = 0;
     let longestCaptionLength = 0;
-    let i;
-    for (i = 0; i < captionArray.length; ++i) {
+
+    for (let i = 0; i < captionArray.length; i += 1) {
       if (captionArray[i].length > longestCaptionLength) {
         longestIndex = i;
         longestCaptionLength = captionArray[i].length;
@@ -149,17 +157,15 @@ const dateUtils = {
     return longestIndex;
   },
 
-  formatUsesMonthName(format) {
-    // @ts-expect-error
+  formatUsesMonthName(format: string): boolean {
     return dateLocalization.formatUsesMonthName(format);
   },
 
-  formatUsesDayName(format) {
-    // @ts-expect-error
+  formatUsesDayName(format: string): boolean {
     return dateLocalization.formatUsesDayName(format);
   },
 
-  getLongestDate(format, monthNames, dayNames) {
+  getLongestDate(format: string, monthNames: string[], dayNames: string[]): Date {
     const stringFormat = getStringFormat(format);
     let month = 9;
 
@@ -170,93 +176,100 @@ const dateUtils = {
     const longestDate = new Date(1888, month, 21, 23, 59, 59, 999);
 
     if (!stringFormat || dateUtils.formatUsesDayName(stringFormat)) {
-      const date = longestDate.getDate() - longestDate.getDay() + dateUtils.getLongestCaptionIndex(dayNames);
+      const date = longestDate.getDate()
+        - longestDate.getDay() + dateUtils.getLongestCaptionIndex(dayNames);
       longestDate.setDate(date);
     }
 
     return longestDate;
   },
 
-  normalizeTime(date) {
+  normalizeTime(date: Date): void {
     date.setSeconds(0);
     date.setMilliseconds(0);
   },
-};
-// @ts-expect-error
-dateUtils.DATE_COMPONENTS_INFO = {
-  year: {
-    getter: 'getFullYear',
-    setter: 'setFullYear',
-    formatter(value, date) {
-      const formatDate = new Date(date.getTime());
-      formatDate.setFullYear(value);
-      return dateLocalization.format(formatDate, 'yyyy');
+
+  DATE_COMPONENTS_INFO: {
+    year: {
+      getter: 'getFullYear',
+      setter: 'setFullYear',
+      formatter(value: number, date: Date) {
+        const formatDate = new Date(date.getTime());
+        formatDate.setFullYear(value);
+        return dateLocalization.format(formatDate, 'yyyy');
+      },
+      startValue: undefined,
+      endValue: undefined,
     },
-    startValue: undefined,
-    endValue: undefined,
-  },
 
-  day: {
-    getter: 'getDate',
-    setter: 'setDate',
-    formatter(value, date) {
-      const formatDate = new Date(date.getTime());
-      formatDate.setDate(value);
-      return dateLocalization.format(formatDate, 'd');
+    day: {
+      getter: 'getDate',
+      setter: 'setDate',
+      formatter(value: number, date: Date) {
+        const formatDate = new Date(date.getTime());
+        formatDate.setDate(value);
+        return dateLocalization.format(formatDate, 'd');
+      },
+      startValue: 1,
+      endValue: undefined,
     },
-    startValue: 1,
-    endValue: undefined,
-  },
 
-  month: {
-    getter: 'getMonth',
-    setter: 'setMonth',
-    formatter(value) {
-      return dateLocalization.getMonthNames()[value];
+    month: {
+      getter: 'getMonth',
+      setter: 'setMonth',
+      formatter(value: number) {
+        return dateLocalization.getMonthNames()[value];
+      },
+      startValue: 0,
+      endValue: 11,
     },
-    startValue: 0,
-    endValue: 11,
-  },
 
-  hours: {
-    getter: 'getHours',
-    setter: 'setHours',
-    formatter(value) {
-      return dateLocalization.format(new Date(0, 0, 0, value), 'hour');
+    hours: {
+      getter: 'getHours',
+      setter: 'setHours',
+      formatter(value: number) {
+        return dateLocalization.format(new Date(0, 0, 0, value), 'hour');
+      },
+      startValue: 0,
+      endValue: 23,
     },
-    startValue: 0,
-    endValue: 23,
-  },
 
-  minutes: {
-    getter: 'getMinutes',
-    setter: 'setMinutes',
-    formatter(value) {
-      return dateLocalization.format(new Date(0, 0, 0, 0, value), 'minute');
+    minutes: {
+      getter: 'getMinutes',
+      setter: 'setMinutes',
+      formatter(value: number) {
+        return dateLocalization.format(new Date(0, 0, 0, 0, value), 'minute');
+      },
+      startValue: 0,
+      endValue: 59,
     },
-    startValue: 0,
-    endValue: 59,
-  },
 
-  seconds: {
-    getter: 'getSeconds',
-    setter: 'setSeconds',
-    formatter(value) {
-      return dateLocalization.format(new Date(0, 0, 0, 0, 0, value), 'second');
+    seconds: {
+      getter: 'getSeconds',
+      setter: 'setSeconds',
+      formatter(value: number) {
+        return dateLocalization.format(new Date(0, 0, 0, 0, 0, value), 'second');
+      },
+      startValue: 0,
+      endValue: 59,
     },
-    startValue: 0,
-    endValue: 59,
-  },
 
-  milliseconds: {
-    getter: 'getMilliseconds',
-    setter: 'setMilliseconds',
-    formatter(value) {
-      return dateLocalization.format(new Date(0, 0, 0, 0, 0, 0, value), 'millisecond');
+    milliseconds: {
+      getter: 'getMilliseconds',
+      setter: 'setMilliseconds',
+      formatter(value: number) {
+        return dateLocalization.format(new Date(0, 0, 0, 0, 0, 0, value), 'millisecond');
+      },
+      startValue: 0,
+      endValue: 999,
     },
-    startValue: 0,
-    endValue: 999,
-  },
+  } as Record<DateComponentKey, {
+    getter: string;
+    setter: string;
+    formatter: (value: number, date?: Date) => string;
+    startValue: number | undefined;
+    endValue: number | undefined;
+  }>,
 };
 
 export default dateUtils;
diff --git a/packages/devextreme/js/__internal/ui/date_box/m_date_view_roller.ts b/packages/devextreme/js/__internal/ui/date_box/m_date_view_roller.ts
index a901b6a9b076..c23e68c64f04 100644
--- a/packages/devextreme/js/__internal/ui/date_box/m_date_view_roller.ts
+++ b/packages/devextreme/js/__internal/ui/date_box/m_date_view_roller.ts
@@ -1,3 +1,4 @@
+/* eslint-disable class-methods-use-this */
 import { fx } from '@js/common/core/animation';
 import { resetPosition } from '@js/common/core/animation/translator';
 import { name as clickEventName } from '@js/common/core/events/click';
@@ -7,13 +8,14 @@ import registerComponent from '@js/core/component_registrator';
 import devices from '@js/core/devices';
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
-import { each } from '@js/core/utils/iterator';
 import { getHeight } from '@js/core/utils/size';
+import type { ScrollEventInfo } from '@js/ui/scroll_view/ui.scrollable';
 import type { OptionChanged } from '@ts/core/widget/types';
 import { convertToLocation } from '@ts/ui/scroll_view/utils/convert_location';
 
 import type { ScrollableProperties } from '../scroll_view/scrollable';
 import Scrollable from '../scroll_view/scrollable';
+import type { DxMouseEvent } from '../scroll_view/types';
 
 const DATEVIEW_ROLLER_CLASS = 'dx-dateviewroller';
 const DATEVIEW_ROLLER_ACTIVE_CLASS = 'dx-state-active';
@@ -27,14 +29,23 @@ const DATEVIEW_ROLLER_ITEM_SELECTED_BORDER_CLASS = 'dx-dateview-item-selected-bo
 export interface DateViewRollerProperties extends ScrollableProperties {
   selectedIndex?: number;
 
-  items?: any[];
+  items?: string[];
 
   showOnClick?: boolean;
 
-  onClick?: () => void;
+  onClick?: ((e: { event: DxMouseEvent; component: DateViewRoller }) => void) | null;
+
+  onStart?: ((e: ScrollEventInfo<DateViewRoller>) => void) | null;
+
+  onEnd?: ((e: ScrollEventInfo<DateViewRoller>) => void) | null;
+
+  onSelectedIndexChanged?: ((
+    e: { component: DateViewRoller; previousValue: number; value: number }
+  ) => void) | null;
 }
 
-class DateViewRoller extends Scrollable {
+class DateViewRoller extends Scrollable<DateViewRollerProperties> {
+  // eslint-disable-next-line no-restricted-globals
   _visibilityTimer?: ReturnType<typeof setTimeout>;
 
   _selectedIndexChanged?: (e?: Record<string, unknown>) => void;
@@ -54,7 +65,6 @@ class DateViewRoller extends Scrollable {
       bounceEnabled: false,
       items: [],
       showOnClick: false,
-      // @ts-expect-error ts-error
       onClick: null,
       onSelectedIndexChanged: null,
       scrollByContent: true,
@@ -77,7 +87,6 @@ class DateViewRoller extends Scrollable {
 
     this._renderContainerClick();
     this._renderItems();
-    // @ts-expect-error ts-error
     this._renderSelectedValue();
     this._renderItemsClick();
     this._renderWheelEvent();
@@ -86,13 +95,11 @@ class DateViewRoller extends Scrollable {
   }
 
   _renderSelectedIndexChanged(): void {
-    // @ts-expect-error ts-error
     this._selectedIndexChanged = this._createActionByOption('onSelectedIndexChanged');
   }
 
   _renderWheelEvent(): void {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    eventsEngine.on($(this.container()), 'dxmousewheel', (e) => {
+    eventsEngine.on($(this.container()), 'dxmousewheel', () => {
       this._isWheelScrolled = true;
     });
   }
@@ -103,7 +110,6 @@ class DateViewRoller extends Scrollable {
     }
     // @ts-expect-error ts-error
     const eventName = addNamespace(clickEventName, this.NAME);
-    // @ts-expect-error ts-error
     const clickAction = this._createActionByOption('onClick');
 
     eventsEngine.off($(this.container()), eventName);
@@ -112,16 +118,14 @@ class DateViewRoller extends Scrollable {
     });
   }
 
-  _renderItems() {
-    const items = this.option('items') || [];
+  _renderItems(): void {
+    const { items = [] } = this.option();
     let $items = $();
 
     $(this.content()).empty();
     // NOTE: rendering ~166+30+12+24+60 <div>s >> 50mc
-    // @ts-expect-error ts-error
     items.forEach((item) => {
       $items = $items.add(
-        // @ts-expect-error
         $('<div>')
           .addClass(DATEVIEW_ROLLER_ITEM_CLASS)
           .append(item),
@@ -133,23 +137,23 @@ class DateViewRoller extends Scrollable {
     this.update();
   }
 
-  _renderSelectedItemFrame() {
+  _renderSelectedItemFrame(): void {
     $('<div>')
       .addClass(DATEVIEW_ROLLER_ITEM_SELECTED_FRAME_CLASS)
       .append($('<div>').addClass(DATEVIEW_ROLLER_ITEM_SELECTED_BORDER_CLASS))
       .appendTo($(this.container()));
   }
 
-  _renderSelectedValue(selectedIndex) {
-    const index = this._fitIndex(selectedIndex ?? this.option('selectedIndex'));
+  _renderSelectedValue(selectedIndex?: number): void {
+    const { selectedIndex: oldSelectedIndex = 0 } = this.option();
+    const index = this._fitIndex(selectedIndex ?? oldSelectedIndex);
 
     this._moveTo({ top: this._getItemPosition(index) });
     this._renderActiveStateItem();
   }
 
-  _fitIndex(index) {
-    const items = this.option('items') || [];
-    // @ts-expect-error ts-error
+  _fitIndex(index: number): number {
+    const { items = [] } = this.option();
     const itemCount = items.length;
 
     if (index >= itemCount) {
@@ -163,7 +167,7 @@ class DateViewRoller extends Scrollable {
     return index;
   }
 
-  _getItemPosition(index): number {
+  _getItemPosition(index: number): number {
     return Math.round(this._itemHeight() * index);
   }
 
@@ -180,39 +184,38 @@ class DateViewRoller extends Scrollable {
     return `.${DATEVIEW_ROLLER_ITEM_CLASS}`;
   }
 
-  _itemClickHandler(e): void {
+  _itemClickHandler(e: { currentTarget: dxElementWrapper }): void {
     this.option('selectedIndex', this._itemElementIndex(e.currentTarget));
   }
 
-  _itemElementIndex(itemElement) {
+  _itemElementIndex(itemElement: dxElementWrapper): number {
     return this._itemElements().index(itemElement);
   }
 
-  _itemElements() {
+  _itemElements(): dxElementWrapper {
     return this.$element().find(this._getItemSelector());
   }
 
-  _renderActiveStateItem() {
-    const selectedIndex = this.option('selectedIndex');
-    each(this._$items, function (index) {
-      $(this).toggleClass(DATEVIEW_ROLLER_ITEM_SELECTED_CLASS, selectedIndex === index);
+  _renderActiveStateItem(): void {
+    const { selectedIndex } = this.option();
+
+    this._$items.each((index, element) => {
+      $(element).toggleClass(DATEVIEW_ROLLER_ITEM_SELECTED_CLASS, selectedIndex === index);
+      return true;
     });
   }
 
-  _shouldScrollToNeighborItem() {
-    return devices.real().deviceType === 'desktop'
-    && this._isWheelScrolled;
+  _shouldScrollToNeighborItem(): boolean {
+    return Boolean(devices.real().deviceType === 'desktop' && this._isWheelScrolled);
   }
 
-  _moveTo(targetLocation): void {
-    // @ts-expect-error
-    const { top, left } = convertToLocation(targetLocation);
+  _moveTo(targetLocation: { top: number; }): void {
+    // @ts-expect-error scrollable types should be extended
+    const { top = 0, left = 0 } = convertToLocation(targetLocation);
 
     const location = this.scrollOffset();
     const delta = {
-      // @ts-expect-error
       x: location.left - left,
-      // @ts-expect-error
       y: location.top - top,
     };
 
@@ -220,45 +223,42 @@ class DateViewRoller extends Scrollable {
       this._prepareDirections(true);
 
       if (this._animation && !this._shouldScrollToNeighborItem()) {
-        const that = this;
-
-        // @ts-expect-error
-        fx.stop($(this.content()));
-        // @ts-expect-error
-        fx.animate($(this.content()), {
+        fx.stop($(this.content()).get(0), false);
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        fx.animate($(this.content()).get(0), {
           duration: 200,
           type: 'slide',
           to: { top: Math.floor(delta.y) },
-          complete() {
-            resetPosition($(that.content()));
-            // @ts-expect-error
-            that.handleMove({ delta });
+          complete: () => {
+            resetPosition($(this.content()));
+            // @ts-expect-error scrollable types should be extended
+            this.handleMove({ delta });
           },
         });
         delete this._animation;
       } else {
-        // @ts-expect-error
+        // @ts-expect-error scrollable types should be extended
         this.handleMove({ delta });
       }
     }
   }
 
-  _validate(e) {
+  _validate(e: DxMouseEvent): boolean {
     return this._moveIsAllowed(e);
   }
 
-  _fitSelectedIndexInRange(index) {
-    // @ts-expect-error ts-error
-    const itemsCount = this.option('items').length;
+  _fitSelectedIndexInRange(index: number): number {
+    const { items = [] } = this.option();
+    const itemsCount = items.length;
     return Math.max(Math.min(index, itemsCount - 1), 0);
   }
 
-  _isInNullNeighborhood(x) {
+  _isInNullNeighborhood(x: number): boolean {
     const EPS = 0.1;
     return -EPS <= x && x <= EPS;
   }
 
-  _getSelectedIndexAfterScroll(currentSelectedIndex): number {
+  _getSelectedIndexAfterScroll(currentSelectedIndex: number): number {
     const locationTop = this.scrollOffset().top;
 
     const currentSelectedIndexPosition = currentSelectedIndex * this._itemHeight();
@@ -274,7 +274,7 @@ class DateViewRoller extends Scrollable {
     return newSelectedIndex;
   }
 
-  _getNewSelectedIndex(currentSelectedIndex): number {
+  _getNewSelectedIndex(currentSelectedIndex: number): number {
     if (this._shouldScrollToNeighborItem()) {
       return this._getSelectedIndexAfterScroll(currentSelectedIndex);
     }
@@ -285,7 +285,7 @@ class DateViewRoller extends Scrollable {
   }
 
   _endActionHandler(): void {
-    const currentSelectedIndex = this.option('selectedIndex');
+    const { selectedIndex: currentSelectedIndex = 0 } = this.option();
     const newSelectedIndex = this._getNewSelectedIndex(currentSelectedIndex);
 
     if (newSelectedIndex === currentSelectedIndex) {
@@ -300,7 +300,7 @@ class DateViewRoller extends Scrollable {
   _itemHeight(): number {
     const $item = this._$items.first();
 
-    return getHeight($item);
+    return getHeight($item) as number;
   }
 
   _toggleActive(state: boolean): void {
@@ -311,7 +311,7 @@ class DateViewRoller extends Scrollable {
     return $(this.container()).is(':visible');
   }
 
-  _fireSelectedIndexChanged(value, previousValue): void {
+  _fireSelectedIndexChanged(value?: number, previousValue?: number): void {
     this._selectedIndexChanged?.({
       value,
       previousValue,
@@ -319,16 +319,18 @@ class DateViewRoller extends Scrollable {
     });
   }
 
-  _visibilityChanged(visible): void {
+  _visibilityChanged(visible: boolean): void {
     super._visibilityChanged(visible);
     this._visibilityChangedHandler(visible);
   }
 
-  _visibilityChangedHandler(visible): void {
+  _visibilityChangedHandler(visible: boolean): void {
     if (visible) {
       // uses for purposes of renovated scrollable widget
+      // eslint-disable-next-line no-restricted-globals
       this._visibilityTimer = setTimeout(() => {
-        this._renderSelectedValue(this.option('selectedIndex'));
+        const { selectedIndex } = this.option();
+        this._renderSelectedValue(selectedIndex);
       });
     }
     this.toggleActiveState(false);
@@ -339,7 +341,7 @@ class DateViewRoller extends Scrollable {
   }
 
   _refreshSelectedIndex(): void {
-    const selectedIndex = this.option('selectedIndex');
+    const { selectedIndex = 0 } = this.option();
     const fitIndex = this._fitIndex(selectedIndex);
 
     if (fitIndex === selectedIndex) {
@@ -363,7 +365,6 @@ class DateViewRoller extends Scrollable {
       case 'showOnClick':
         this._renderContainerClick();
         break;
-      // @ts-expect-error ts-error
       case 'onSelectedIndexChanged':
         this._renderSelectedIndexChanged();
         break;
diff --git a/packages/devextreme/js/__internal/ui/date_range_box/strategy/m_rangeCalendar.ts b/packages/devextreme/js/__internal/ui/date_range_box/strategy/m_rangeCalendar.ts
index 179a411b42c1..70a417c14323 100644
--- a/packages/devextreme/js/__internal/ui/date_range_box/strategy/m_rangeCalendar.ts
+++ b/packages/devextreme/js/__internal/ui/date_range_box/strategy/m_rangeCalendar.ts
@@ -66,11 +66,11 @@ class RangeCalendarStrategy extends CalendarStrategy {
       enter: (e) => {
         if (dateRangeBox.option('opened')) {
           // @ts-expect-error
-          const dateBoxValue = this.dateBox.dateOption('value');
+          const dateBoxValue = this.dateBox.getDateOption('value');
           // @ts-expect-error
           this.dateBox._valueChangeEventHandler(e);
           // @ts-expect-error
-          const newDateBoxValue = this.dateBox.dateOption('value');
+          const newDateBoxValue = this.dateBox.getDateOption('value');
           const dateBoxValueChanged = !isSameDates(dateBoxValue, newDateBoxValue);
 
           if (dateBoxValueChanged) {
@@ -253,10 +253,10 @@ class RangeCalendarStrategy extends CalendarStrategy {
 
     if (arguments.length) {
       // @ts-expect-error
-      return dateBox.dateValue.apply(dateBox, arguments);
+      return dateBox.setDateOption.apply(dateBox, arguments);
     }
     // @ts-expect-error
-    return dateBox.dateOption.apply(dateBox, ['value']);
+    return dateBox.getDateOption.apply(dateBox, ['value']);
   }
 
   _cellClickHandler(): void { }
diff --git a/packages/devextreme/js/__internal/ui/diagram/ui.diagram.menu_helper.ts b/packages/devextreme/js/__internal/ui/diagram/ui.diagram.menu_helper.ts
index 2b771f027188..b54e0035f107 100644
--- a/packages/devextreme/js/__internal/ui/diagram/ui.diagram.menu_helper.ts
+++ b/packages/devextreme/js/__internal/ui/diagram/ui.diagram.menu_helper.ts
@@ -16,8 +16,7 @@ const DiagramMenuHelper = {
         $itemElement.append($iconElement);
       }
     } else if (
-      contextMenu._menuHasCheckedItems
-      && contextMenu._menuHasCheckedItems[itemKey] === true
+      contextMenu._menuHasCheckedItems?.[itemKey] === true
     ) {
       const $checkElement = getImageContainer('check');
       if ($checkElement) {
@@ -26,12 +25,10 @@ const DiagramMenuHelper = {
       }
     }
     $itemElement.append(
-      // @ts-expect-error ts-error
       `<span class="dx-menu-item-text">${itemData.text}</span>`,
     );
     if (Array.isArray(itemData.items) && itemData.items.length > 0) {
       $itemElement.append(
-        // @ts-expect-error ts-error
         '<span class="dx-menu-item-popout-container"><div class="dx-menu-item-popout"></div></span>',
       );
     }
diff --git a/packages/devextreme/js/__internal/ui/menu/menu.ts b/packages/devextreme/js/__internal/ui/menu/menu.ts
index af2c7df19163..3ea2e78dc175 100644
--- a/packages/devextreme/js/__internal/ui/menu/menu.ts
+++ b/packages/devextreme/js/__internal/ui/menu/menu.ts
@@ -194,7 +194,6 @@ class Menu extends MenuBase<MenuProperties> {
     const rootMenuElements = super._itemElements();
     const submenuElements = this._submenuItemElements();
 
-    // @ts-expect-error ts-error
     return rootMenuElements.add(submenuElements);
   }
 
diff --git a/packages/devextreme/js/__internal/ui/scroll_view/scrollable.ts b/packages/devextreme/js/__internal/ui/scroll_view/scrollable.ts
index bd13318e3c5d..4b4531303c1f 100644
--- a/packages/devextreme/js/__internal/ui/scroll_view/scrollable.ts
+++ b/packages/devextreme/js/__internal/ui/scroll_view/scrollable.ts
@@ -58,9 +58,9 @@ export interface ScrollableProperties extends DOMComponentProperties<any>, Omit<
   useKeyboard?: boolean;
   updateManually?: boolean;
   inertiaEnabled?: boolean;
-  onStart?: (() => void) | null;
-  onEnd?: (() => void) | null;
-  onBounce?: (() => void) | null;
+  onStart?: ((e) => void) | null;
+  onEnd?: ((e) => void) | null;
+  onBounce?: ((e) => void) | null;
 }
 
 class Scrollable<
diff --git a/packages/devextreme/js/common/core/localization/date.d.ts b/packages/devextreme/js/common/core/localization/date.d.ts
index 8668641dfbc3..ae932a6ef308 100644
--- a/packages/devextreme/js/common/core/localization/date.d.ts
+++ b/packages/devextreme/js/common/core/localization/date.d.ts
@@ -1,12 +1,16 @@
+import { DateLike } from '../../../common';
 import { Format as LocalizationFormat } from '../localization';
 
 type Format = 'abbreviated' | 'short' | 'narrow';
 
 interface DateLocalization {
   firstDayOfWeekIndex(): number;
-  format(date?: Date, format?: LocalizationFormat): string | Date | undefined;
+  format(date?: DateLike, format?: LocalizationFormat): string | Date | undefined;
+  formatUsesDayName(format: string): boolean;
+  formatUsesMonthName(format: string): boolean;
   getDayNames(format?: Format): string[];
   getMonthNames(format?: Format): string[];
+  parse(text: string, format?: Format | string): Date | null | undefined
 }
 declare const dateLocalization: DateLocalization;
 export default dateLocalization;
diff --git a/packages/devextreme/js/core/renderer.d.ts b/packages/devextreme/js/core/renderer.d.ts
index a0aa24a04cdb..4e7e938930c1 100644
--- a/packages/devextreme/js/core/renderer.d.ts
+++ b/packages/devextreme/js/core/renderer.d.ts
@@ -5,13 +5,13 @@ export interface Coordinates {
 
 export interface dxElementWrapper {
 
-  add(selector: string): this;
+  add(selector: string | dxElementWrapper): this;
 
   addClass(className: string): this;
 
   after(element: Element | dxElementWrapper): this;
 
-  append(element: Element | dxElementWrapper): this;
+  append(element: Element | dxElementWrapper | string): this;
 
   appendTo(element: Element | dxElementWrapper): this;
 
diff --git a/packages/devextreme/js/localization/messages/fr.json b/packages/devextreme/js/localization/messages/fr.json
index b3fd321ecf63..e75febe222be 100644
--- a/packages/devextreme/js/localization/messages/fr.json
+++ b/packages/devextreme/js/localization/messages/fr.json
@@ -88,9 +88,9 @@
         "dxFileUploader-invalidFileExtension": "Type de fichier non autorisé",
         "dxFileUploader-invalidMaxFileSize": "Fichier trop volumineux",
         "dxFileUploader-invalidMinFileSize": "Fichier trop petit",
-        "dxFileUploader-fileListLabel": "File list",
-        "dxFileUploader-removeFileButtonLabel": "Remove file {0}",
-        "dxFileUploader-uploadFileButtonLabel": "Upload file {0}",
+        "dxFileUploader-fileListLabel": "Liste de fichiers",
+        "dxFileUploader-removeFileButtonLabel": "Retirer le fichier {0}",
+        "dxFileUploader-uploadFileButtonLabel": "Téléverser le fichier {0}",
 
         "dxRangeSlider-ariaFrom": "De {0}",
         "dxRangeSlider-ariaTill": "à {0}",
@@ -107,13 +107,13 @@
         "dxNumberBox-noDataText": "Pas de données",
 
 
-        "dxDataGrid-aiPromptEditorTitle": "AI Prompt Editor",
-        "dxDataGrid-aiPromptEditorPlaceholder": "Prompt AI to generate the column's values",
-        "dxDataGrid-aiPromptEditorApplyButton": "Apply",
-        "dxDataGrid-aiPromptEditorRegenerateButton": "Regenerate Data",
-        "dxDataGrid-aiPromptEditorStopButton": "Stop",
-        "dxDataGrid-aiDropDownAutofill": "Autofill with AI",
-        "dxDataGrid-aiDropDownClear": "Clear Data",
+        "dxDataGrid-aiPromptEditorTitle": "Éditeur de prompts IA",
+        "dxDataGrid-aiPromptEditorPlaceholder": "Demander à l’IA de générer les valeurs de la colonne",
+        "dxDataGrid-aiPromptEditorApplyButton": "Appliquer",
+        "dxDataGrid-aiPromptEditorRegenerateButton": "Regénérer les données",
+        "dxDataGrid-aiPromptEditorStopButton": "Arrêter",
+        "dxDataGrid-aiDropDownAutofill": "Remplir automatiquement avec l’IA",
+        "dxDataGrid-aiDropDownClear": "Effacer les données",
         "dxDataGrid-emptyHeaderWithColumnChooserText": "Utilisez {0} pour voir les colonnes",
         "dxDataGrid-emptyHeaderWithGroupPanelText": "Faites glisser une colonne depuis le panneau de groupe",
         "dxDataGrid-emptyHeaderWithColumnChooserAndGroupPanelText": "Utilisez {0} ou glisser une colonne depuis le panneau de groupe",
@@ -276,9 +276,9 @@
         "dxScheduler-appointmentAriaLabel-recurring": "Rendez-vous récurrent",
 
         "dxScheduler-appointmentListAriaLabel": "Liste des rendez-vous ",
-        "dxScheduler-newPopupTitle": "New Appointment",
-        "dxScheduler-editPopupTitle": "Edit Appointment",
-        "dxScheduler-editPopupSaveButtonText": "Save",
+        "dxScheduler-newPopupTitle": "Nouveau rendez-vous",
+        "dxScheduler-editPopupTitle": "Modifier le rendez-vous",
+        "dxScheduler-editPopupSaveButtonText": "Enregistrer",
 
         "dxScheduler-editorLabelTitle": "Titre",
         "dxScheduler-editorLabelStartDate": "Date de début",
@@ -419,9 +419,9 @@
         "dxChat-editingDeleteConfirmText": "Êtes-vous sûr de vouloir supprimer ce message ?",
         "dxChat-deletedMessageText": "Le message a été supprimé",
         "dxChat-defaultImageAlt": "Image partagée dans le chat",
-        "dxChat-fileViewLabel": "File list",
-        "dxChat-downloadButtonLabel": "Download file {0}",
-        "dxChat-fileLimitReachedWarning": "You selected too many files. Select no more than {0} files and retry.",
+        "dxChat-fileViewLabel": "Liste des fichiers",
+        "dxChat-downloadButtonLabel": "Télécharger le fichier {0}",
+        "dxChat-fileLimitReachedWarning": "Vous avez sélectionné trop de fichiers. Sélectionnez au maximum {0} fichiers et réessayez.",
 
         "dxColorView-ariaRed": "Rouge",
         "dxColorView-ariaGreen": "Vert",
@@ -564,10 +564,10 @@
         "dxHtmlEditor-borderStyleSolid": "solide",
         "dxHtmlEditor-borderStyleDouble": "double",
         "dxHtmlEditor-borderStyleGroove": "groove",
-        "dxHtmlEditor-borderStyleRidge": "ridge",
-        "dxHtmlEditor-borderStyleInset": "inset",
-        "dxHtmlEditor-borderStyleOutset": "outset",
-        "dxHtmlEditor-aiDialogTitle": "AI Assistant",
+        "dxHtmlEditor-borderStyleRidge": "relief crénelé",
+        "dxHtmlEditor-borderStyleInset": "incrusté",
+        "dxHtmlEditor-borderStyleOutset": "relief",
+        "dxHtmlEditor-aiDialogTitle": "Assistant IA",
         "dxHtmlEditor-aiDialogError": "Une erreur s'est produite. Veuillez réessayer.",
         "dxHtmlEditor-aiDialogCanceled": "Génération annulée",
         "dxHtmlEditor-aiReplace": "Remplace",
@@ -578,40 +578,43 @@
         "dxHtmlEditor-aiGenerate": "Générer",
         "dxHtmlEditor-aiCancel": "Annuler",
         "dxHtmlEditor-aiToolbarItemAriaLabel": "Élément de la barre d'outils de l'assistant AI",
-        "dxHtmlEditor-aiResultTextAreaAriaLabel": "AI Assistant result",
+        "dxHtmlEditor-aiResultTextAreaAriaLabel": "Résultat de l'assistant IA",
         "dxHtmlEditor-aiAskPlaceholder": "Demandez à l'IA de modifier le texte",
-        "dxHtmlEditor-aiCommandSummarize": "Summarize",
-        "dxHtmlEditor-aiCommandProofread": "Proofread",
-        "dxHtmlEditor-aiCommandExpand": "Expand",
-        "dxHtmlEditor-aiCommandShorten": "Shorten",
-        "dxHtmlEditor-aiCommandChangeStyle": "Change Style",
-        "dxHtmlEditor-aiCommandChangeTone": "Change Tone",
-        "dxHtmlEditor-aiCommandTranslate": "Translate",
-        "dxHtmlEditor-aiCommandAskAI": "Ask AI",
-        "dxHtmlEditor-aiCommandChangeStyleFormal": "Formal",
-        "dxHtmlEditor-aiCommandChangeStyleInformal": "Informal",
-        "dxHtmlEditor-aiCommandChangeStyleTechnical": "Technical",
-        "dxHtmlEditor-aiCommandChangeStyleBusiness": "Business",
-        "dxHtmlEditor-aiCommandChangeStyleCreative": "Creative",
-        "dxHtmlEditor-aiCommandChangeStyleJournalistic": "Journalistic",
-        "dxHtmlEditor-aiCommandChangeStyleAcademic": "Academic",
-        "dxHtmlEditor-aiCommandChangeStylePersuasive": "Persuasive",
-        "dxHtmlEditor-aiCommandChangeStyleNarrative": "Narrative",
-        "dxHtmlEditor-aiCommandChangeStyleExpository": "Expository",
-        "dxHtmlEditor-aiCommandChangeStyleDescriptive": "Descriptive",
-        "dxHtmlEditor-aiCommandChangeStyleConversational": "Conversational",
-        "dxHtmlEditor-aiCommandChangeToneProfessional": "Professional",
-        "dxHtmlEditor-aiCommandChangeToneCasual": "Casual",
-        "dxHtmlEditor-aiCommandChangeToneStraightforward": "Straightforward",
-        "dxHtmlEditor-aiCommandChangeToneConfident": "Confident",
-        "dxHtmlEditor-aiCommandChangeToneFriendly": "Friendly",
-        "dxHtmlEditor-aiCommandTranslateArabic": "Arabic",
-        "dxHtmlEditor-aiCommandTranslateChinese": "Chinese",
-        "dxHtmlEditor-aiCommandTranslateEnglish": "English",
-        "dxHtmlEditor-aiCommandTranslateFrench": "French",
-        "dxHtmlEditor-aiCommandTranslateGerman": "German",
-        "dxHtmlEditor-aiCommandTranslateJapanese": "Japanese",
-        "dxHtmlEditor-aiCommandTranslateSpanish": "Spanish",
+        "dxHtmlEditor-aiCommandSummarize": "Résumer",
+        "dxHtmlEditor-aiCommandProofread": "Relire",
+        "dxHtmlEditor-aiCommandExpand": "Développer",
+        "dxHtmlEditor-aiCommandShorten": "Raccourcir",
+        "dxHtmlEditor-aiCommandChangeStyle": "Changer le style",
+        "dxHtmlEditor-aiCommandChangeTone": "Changer le ton",
+        "dxHtmlEditor-aiCommandTranslate": "Traduire",
+        "dxHtmlEditor-aiCommandAskAI": "Demander à l’IA",
+        
+        "dxHtmlEditor-aiCommandChangeStyleFormal": "Formel",
+        "dxHtmlEditor-aiCommandChangeStyleInformal": "Informel",
+        "dxHtmlEditor-aiCommandChangeStyleTechnical": "Technique",
+        "dxHtmlEditor-aiCommandChangeStyleBusiness": "Professionnel",
+        "dxHtmlEditor-aiCommandChangeStyleCreative": "Créatif",
+        "dxHtmlEditor-aiCommandChangeStyleJournalistic": "Journalistique",
+        "dxHtmlEditor-aiCommandChangeStyleAcademic": "Académique",
+        "dxHtmlEditor-aiCommandChangeStylePersuasive": "Persuasif",
+        "dxHtmlEditor-aiCommandChangeStyleNarrative": "Narratif",
+        "dxHtmlEditor-aiCommandChangeStyleExpository": "Expositif",
+        "dxHtmlEditor-aiCommandChangeStyleDescriptive": "Descriptif",
+        "dxHtmlEditor-aiCommandChangeStyleConversational": "Conversationnel",
+        
+        "dxHtmlEditor-aiCommandChangeToneProfessional": "Professionnel",
+        "dxHtmlEditor-aiCommandChangeToneCasual": "Décontracté",
+        "dxHtmlEditor-aiCommandChangeToneStraightforward": "Direct",
+        "dxHtmlEditor-aiCommandChangeToneConfident": "Confiant",
+        "dxHtmlEditor-aiCommandChangeToneFriendly": "Amical",
+        
+        "dxHtmlEditor-aiCommandTranslateArabic": "Arabe",
+        "dxHtmlEditor-aiCommandTranslateChinese": "Chinois",
+        "dxHtmlEditor-aiCommandTranslateEnglish": "Anglais",
+        "dxHtmlEditor-aiCommandTranslateFrench": "Français",
+        "dxHtmlEditor-aiCommandTranslateGerman": "Allemand",
+        "dxHtmlEditor-aiCommandTranslateJapanese": "Japonais",
+        "dxHtmlEditor-aiCommandTranslateSpanish": "Espagnol",
 
         "dxFileManager-newDirectoryName": "Répertoire sans titre",
         "dxFileManager-rootDirectoryName": "Fichiers",
@@ -905,7 +908,7 @@
 
         "dxStepper-optionalMark": "(Optionel)",
 
-        "dxSpeechToText-ariaLabelStart": "Press to start voice transcription",
-        "dxSpeechToText-ariaLabelStop": "Press to stop voice transcription"
+        "dxSpeechToText-ariaLabelStart": "Appuyer pour démarrer la transcription vocale",
+        "dxSpeechToText-ariaLabelStop": "Appuyer pour arrêter la transcription vocale"
     }
 }
diff --git a/packages/devextreme/ts/dx.all.d.ts b/packages/devextreme/ts/dx.all.d.ts
index 3eeb5dac2c5b..e97662540532 100644
--- a/packages/devextreme/ts/dx.all.d.ts
+++ b/packages/devextreme/ts/dx.all.d.ts
@@ -6988,13 +6988,13 @@ declare module DevExpress.core {
    * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
    */
   export interface dxElementWrapper {
-    add(selector: string): this;
+    add(selector: string | dxElementWrapper): this;
 
     addClass(className: string): this;
 
     after(element: Element | dxElementWrapper): this;
 
-    append(element: Element | dxElementWrapper): this;
+    append(element: Element | dxElementWrapper | string): this;
 
     appendTo(element: Element | dxElementWrapper): this;