diff --git a/.github/workflows/build_all.yml b/.github/workflows/build_all.yml
index cb0636c7e4a0..88ed42b9f7c8 100644
--- a/.github/workflows/build_all.yml
+++ b/.github/workflows/build_all.yml
@@ -5,6 +5,8 @@ on:
     paths-ignore:
       - 'apps/**/*.md'
   merge_group:
+  push:
+    branches: [26_1]
   workflow_dispatch:
 
 concurrency:
diff --git a/.github/workflows/default_workflow.yml b/.github/workflows/default_workflow.yml
index c49d07553117..a35fe8a7432e 100644
--- a/.github/workflows/default_workflow.yml
+++ b/.github/workflows/default_workflow.yml
@@ -9,6 +9,9 @@ on:
     paths-ignore:
       - 'apps/**/*.md'
   merge_group:
+  push:
+    branches:
+      - "[0-9][0-9]_[0-9]"
 
 env:
   NX_SKIP_NX_CACHE: ${{ contains(github.event.pull_request.labels.*.name, 'skip-cache') && 'true' || 'false' }}
diff --git a/.github/workflows/demos_unit_tests.yml b/.github/workflows/demos_unit_tests.yml
index 23ab6ba80137..1df3062120d3 100644
--- a/.github/workflows/demos_unit_tests.yml
+++ b/.github/workflows/demos_unit_tests.yml
@@ -9,6 +9,8 @@ on:
     paths-ignore:
       - 'apps/**/*.md'
   merge_group:
+  push:
+    branches: [26_1]
   workflow_dispatch:
 
 env:
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index c3895595a4de..7ecb5a1aa0ae 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -9,6 +9,8 @@ on:
     paths-ignore:
       - 'apps/**/*.md'
   merge_group:
+  push:
+    branches: [26_1]
 
 env:
   NX_SKIP_NX_CACHE: ${{ contains(github.event.pull_request.labels.*.name, 'skip-cache') && 'true' || 'false' }}
diff --git a/.github/workflows/paths.yml b/.github/workflows/paths.yml
index b655ddc25446..24abb9397b5f 100644
--- a/.github/workflows/paths.yml
+++ b/.github/workflows/paths.yml
@@ -9,6 +9,8 @@ on:
     paths-ignore:
       - 'apps/**/*.md'
   merge_group:
+  push:
+    branches: [26_1]
 
 env:
   MAX_LENGTH: 170
diff --git a/.github/workflows/playgrounds_tests.yml b/.github/workflows/playgrounds_tests.yml
index aa6dde28e5ef..437bebdaa8fa 100644
--- a/.github/workflows/playgrounds_tests.yml
+++ b/.github/workflows/playgrounds_tests.yml
@@ -9,6 +9,8 @@ on:
     paths-ignore:
       - 'apps/**/*.md'
   merge_group:
+  push:
+    branches: [26_1]
 
 env:
   NX_SKIP_NX_CACHE: ${{ contains(github.event.pull_request.labels.*.name, 'skip-cache') && 'true' || 'false' }}
diff --git a/.github/workflows/qunit_tests.yml b/.github/workflows/qunit_tests.yml
index 86d0994d64ce..a29df29667b9 100644
--- a/.github/workflows/qunit_tests.yml
+++ b/.github/workflows/qunit_tests.yml
@@ -9,6 +9,8 @@ on:
     paths-ignore:
       - 'apps/**/*.md'
   merge_group:
+  push:
+    branches: [26_1]
   workflow_dispatch:
 
 env:
diff --git a/.github/workflows/renovation.yml b/.github/workflows/renovation.yml
index f177c1d50ab2..4623b482be01 100644
--- a/.github/workflows/renovation.yml
+++ b/.github/workflows/renovation.yml
@@ -9,6 +9,8 @@ on:
     paths-ignore:
       - 'apps/**/*.md'
   merge_group:
+  push:
+    branches: [26_1]
 
 env:
   NX_SKIP_NX_CACHE: ${{ contains(github.event.pull_request.labels.*.name, 'skip-cache') && 'true' || 'false' }}
diff --git a/.github/workflows/styles.yml b/.github/workflows/styles.yml
index 6b2ba4f2ab11..38a5c45b2253 100644
--- a/.github/workflows/styles.yml
+++ b/.github/workflows/styles.yml
@@ -9,6 +9,8 @@ on:
     paths-ignore:
       - 'apps/**/*.md'
   merge_group:
+  push:
+    branches: [26_1]
 
 env:
   NX_SKIP_NX_CACHE: ${{ contains(github.event.pull_request.labels.*.name, 'skip-cache') && 'true' || 'false' }}
diff --git a/.github/workflows/testcafe_tests.yml b/.github/workflows/testcafe_tests.yml
index cbf05537669b..130bbe27e956 100644
--- a/.github/workflows/testcafe_tests.yml
+++ b/.github/workflows/testcafe_tests.yml
@@ -9,6 +9,8 @@ on:
     paths-ignore:
       - 'apps/**/*.md'
   merge_group:
+  push:
+    branches: [26_1]
   workflow_dispatch:
 
 env:
@@ -248,6 +250,7 @@ jobs:
           style_dependent_matrix=$(cat <<'JSON'
           [
             { "componentFolder": "accessibility", "name": "accessibility - fluent.dark", "theme": "fluent.blue.dark", "concurrency": 6 },
+            { "componentFolder": "accessibility", "name": "accessibility - fluent-next.dark", "theme": "fluent-next.blue.dark", "concurrency": 6 },
               { "componentFolder": "accessibility", "name": "accessibility - material.light", "theme": "material.blue.light", "concurrency": 6 },
               { "componentFolder": "accessibility", "name": "accessibility - material.dark", "theme": "material.blue.dark", "concurrency": 6 }
             ]
@@ -259,7 +262,15 @@ jobs:
             --argjson baseEnd "$base_matrix_end" \
             --argjson styleDependent "$style_dependent_matrix" \
             --arg stylesChanged "${{ needs.check-should-run.outputs.styles-changed }}" \
-            '{ include: ($baseStart + (if $stylesChanged == "true" then $styleDependent else [] end) + $baseEnd) }')
+            '{ include: (
+              $baseStart
+              + (if $stylesChanged == "true" then $styleDependent else [] end)
+              + $baseEnd
+              + (($baseStart + $baseEnd) | map(
+                select(.theme == null)
+                | . + { name: (.name + " - fluent-next"), theme: "fluent-next.blue.light" }
+              ))
+            ) }')
 
           echo "matrix=$matrix" >> $GITHUB_OUTPUT
 
diff --git a/.github/workflows/themebuilder_tests.yml b/.github/workflows/themebuilder_tests.yml
index 5257f4d50e9b..a01dc40e47f3 100644
--- a/.github/workflows/themebuilder_tests.yml
+++ b/.github/workflows/themebuilder_tests.yml
@@ -9,6 +9,8 @@ on:
     paths-ignore:
       - 'apps/**/*.md'
   merge_group:
+  push:
+    branches: [26_1]
 
 env:
   NX_SKIP_NX_CACHE: ${{ contains(github.event.pull_request.labels.*.name, 'skip-cache') && 'true' || 'false' }}
diff --git a/.github/workflows/ts_declarations.yml b/.github/workflows/ts_declarations.yml
index d713ba22d514..6645caf9d71c 100644
--- a/.github/workflows/ts_declarations.yml
+++ b/.github/workflows/ts_declarations.yml
@@ -9,6 +9,8 @@ on:
     paths-ignore:
       - 'apps/**/*.md'
   merge_group:
+  push:
+    branches: [26_1]
 
 jobs:
   check-ts-bundle:
diff --git a/.github/workflows/visual-tests-demos.yml b/.github/workflows/visual-tests-demos.yml
index 1b407c0de197..3d4568662e33 100644
--- a/.github/workflows/visual-tests-demos.yml
+++ b/.github/workflows/visual-tests-demos.yml
@@ -9,6 +9,8 @@ on:
     paths-ignore:
       - 'apps/**/*.md'
   merge_group:
+  push:
+    branches: [26_1]
   workflow_dispatch:
 
 env:
@@ -21,11 +23,24 @@ jobs:
     runs-on: ubuntu-latest
     outputs:
       should-run: ${{ steps.check.outputs.should-run }}
+      styles-changed: ${{ steps.changes.outputs.styles }}
     steps:
+      - uses: actions/checkout@v6
       - name: Check RUN_TESTS flag
         id: check
         run: echo "should-run=${{ env.RUN_TESTS }}" >> $GITHUB_OUTPUT
 
+      - uses: dorny/paths-filter@v4
+        id: changes
+        with:
+          filters: |
+            styles:
+              - 'packages/devextreme-scss/scss/**'
+              - 'packages/devextreme-scss/icons/**'
+              - 'packages/devextreme-scss/images/**'
+              - 'packages/devextreme-scss/fonts/**'
+              - 'packages/devextreme/js/**/themes/**'
+
   get-changes:
     runs-on: ubuntu-latest
     needs: check-should-run
@@ -120,8 +135,12 @@ jobs:
             { "STRATEGY": "screenshots", "THEME": "fluent.blue.light", "CONSTEL": "jquery(1/3)" },
             { "STRATEGY": "screenshots", "THEME": "fluent.blue.light", "CONSTEL": "jquery(2/3)" },
             { "STRATEGY": "screenshots", "THEME": "fluent.blue.light", "CONSTEL": "jquery(3/3)" },
+            { "STRATEGY": "screenshots", "THEME": "fluent-next.blue.light", "CONSTEL": "jquery(1/3)" },
+            { "STRATEGY": "screenshots", "THEME": "fluent-next.blue.light", "CONSTEL": "jquery(2/3)" },
+            { "STRATEGY": "screenshots", "THEME": "fluent-next.blue.light", "CONSTEL": "jquery(3/3)" },
             { "STRATEGY": "accessibility", "THEME": "material.blue.light", "CONSTEL": "jquery" },
-            { "STRATEGY": "accessibility", "THEME": "fluent.blue.light", "CONSTEL": "jquery" }
+            { "STRATEGY": "accessibility", "THEME": "fluent.blue.light", "CONSTEL": "jquery" },
+            { "STRATEGY": "accessibility", "THEME": "fluent-next.blue.light", "CONSTEL": "jquery" }
           ]
           JSON
           )
@@ -129,16 +148,20 @@ jobs:
           dark_accessibility_matrix=$(cat <<'JSON'
           [
             { "STRATEGY": "accessibility", "THEME": "material.blue.dark", "CONSTEL": "jquery" },
-            { "STRATEGY": "accessibility", "THEME": "fluent.blue.dark", "CONSTEL": "jquery" }
+            { "STRATEGY": "accessibility", "THEME": "fluent.blue.dark", "CONSTEL": "jquery" },
+            { "STRATEGY": "accessibility", "THEME": "fluent-next.blue.dark", "CONSTEL": "jquery" }
           ]
           JSON
           )
 
+          # Dark accessibility (color-contrast) runs when framework tests are in scope
+          # OR when styles changed — mirroring the style_dependent_matrix gate in testcafe_tests.yml.
           matrix=$(jq -c -n \
             --argjson base "$base_matrix" \
             --argjson darkAccessibility "$dark_accessibility_matrix" \
             --arg frameworkTestsScope "${{ needs.determine-framework-tests-scope.outputs.framework-tests-scope }}" \
-            '{ include: ($base + (if $frameworkTestsScope != "none" then $darkAccessibility else [] end)) }')
+            --arg stylesChanged "${{ needs.check-should-run.outputs.styles-changed }}" \
+            '{ include: ($base + (if $frameworkTestsScope != "none" or $stylesChanged == "true" then $darkAccessibility else [] end)) }')
 
           echo "matrix=$matrix" >> $GITHUB_OUTPUT
 
@@ -860,7 +883,7 @@ jobs:
           angular(9/10),
           angular(10/10),
         ]
-        THEME: ['fluent.blue.light']
+        THEME: ['fluent.blue.light', 'fluent-next.blue.light']
 
     runs-on: devextreme-shr2
     name: ${{ matrix.CONSTEL }}-screenshots-${{ matrix.THEME }}
@@ -989,7 +1012,7 @@ jobs:
       fail-fast: false
       matrix:
         CONSTEL: [react, vue, angular]
-        THEME: ['fluent.blue.light']
+        THEME: ['fluent.blue.light', 'fluent-next.blue.light']
 
     runs-on: devextreme-shr2
     name: ${{ matrix.CONSTEL }}-screenshots-${{ matrix.THEME }}
diff --git a/.github/workflows/wrapper_tests.yml b/.github/workflows/wrapper_tests.yml
index d82f02a6634f..a7ef4bb26b0e 100644
--- a/.github/workflows/wrapper_tests.yml
+++ b/.github/workflows/wrapper_tests.yml
@@ -5,6 +5,8 @@ on:
     paths-ignore:
       - 'apps/**/*.md'
   merge_group:
+  push:
+    branches: [26_1]
 
 concurrency:
   group: wf-${{github.event.pull_request.number || github.ref || github.sha}}-${{github.workflow}}
diff --git a/.github/workflows/wrapper_tests_e2e.yml b/.github/workflows/wrapper_tests_e2e.yml
index fff07fe970d1..788d5ec741cb 100644
--- a/.github/workflows/wrapper_tests_e2e.yml
+++ b/.github/workflows/wrapper_tests_e2e.yml
@@ -9,7 +9,7 @@ on:
     paths-ignore:
       - 'apps/**/*.md'
   push:
-    branches: [24_2, 25_*]
+    branches: [24_2, 25_*, 26_*]
   merge_group:
   workflow_dispatch:
 
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 34b5d4124b37..e8875347e49a 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
@@ -4,19 +4,19 @@
 }
 
 .priority--low {
-  color: var(--dx-color-success);
+  color: var(--dxds-color-content-utility-green-default-rest, var(--dx-color-success));
 }
 
 .priority--normal {
-  color: var(--dx-color-primary);
+  color: var(--dxds-color-content-utility-blue-default-rest, var(--dx-color-primary));
 }
 
 .priority--urgent {
-  color: var(--dx-color-warning);
+  color: var(--dxds-color-content-utility-yellow-default-rest, var(--dx-color-warning));
 }
 
 .priority--high {
-  color: var(--dx-color-danger);
+  color: var(--dxds-color-content-utility-red-default-rest, var(--dx-color-danger));
 }
 
 .indicator {
diff --git a/apps/demos/Demos/CardView/FieldTemplate/React/styles.css b/apps/demos/Demos/CardView/FieldTemplate/React/styles.css
index 251952fd3267..a55412f19d7b 100644
--- a/apps/demos/Demos/CardView/FieldTemplate/React/styles.css
+++ b/apps/demos/Demos/CardView/FieldTemplate/React/styles.css
@@ -18,19 +18,19 @@
 }
 
 .task__priority--low {
-  color: var(--dx-color-success);
+  color: var(--dxds-color-content-utility-green-default-rest, var(--dx-color-success));
 }
 
 .task__priority--normal {
-  color: var(--dx-color-primary);
+  color: var(--dxds-color-content-utility-blue-default-rest, var(--dx-color-primary));
 }
 
 .task__priority--urgent {
-  color: var(--dx-color-warning);
+  color: var(--dxds-color-content-utility-yellow-default-rest, var(--dx-color-warning));
 }
 
 .task__priority--high {
-  color: var(--dx-color-danger);
+  color: var(--dxds-color-content-utility-red-default-rest, var(--dx-color-danger));
 }
 
 .task__indicator {
diff --git a/apps/demos/Demos/CardView/FieldTemplate/ReactJs/styles.css b/apps/demos/Demos/CardView/FieldTemplate/ReactJs/styles.css
index 251952fd3267..a55412f19d7b 100644
--- a/apps/demos/Demos/CardView/FieldTemplate/ReactJs/styles.css
+++ b/apps/demos/Demos/CardView/FieldTemplate/ReactJs/styles.css
@@ -18,19 +18,19 @@
 }
 
 .task__priority--low {
-  color: var(--dx-color-success);
+  color: var(--dxds-color-content-utility-green-default-rest, var(--dx-color-success));
 }
 
 .task__priority--normal {
-  color: var(--dx-color-primary);
+  color: var(--dxds-color-content-utility-blue-default-rest, var(--dx-color-primary));
 }
 
 .task__priority--urgent {
-  color: var(--dx-color-warning);
+  color: var(--dxds-color-content-utility-yellow-default-rest, var(--dx-color-warning));
 }
 
 .task__priority--high {
-  color: var(--dx-color-danger);
+  color: var(--dxds-color-content-utility-red-default-rest, var(--dx-color-danger));
 }
 
 .task__indicator {
diff --git a/apps/demos/Demos/CardView/FieldTemplate/Vue/Priority.vue b/apps/demos/Demos/CardView/FieldTemplate/Vue/Priority.vue
index 7e48ef837204..8777bbd8e7d1 100644
--- a/apps/demos/Demos/CardView/FieldTemplate/Vue/Priority.vue
+++ b/apps/demos/Demos/CardView/FieldTemplate/Vue/Priority.vue
@@ -28,19 +28,19 @@ const priorityClassName = computed(() =>
 }
 
 .task__priority--low {
-  color: var(--dx-color-success);
+  color: var(--dxds-color-content-utility-green-default-rest, var(--dx-color-success));
 }
 
 .task__priority--normal {
-  color: var(--dx-color-primary);
+  color: var(--dxds-color-content-utility-blue-default-rest, var(--dx-color-primary));
 }
 
 .task__priority--urgent {
-  color: var(--dx-color-warning);
+  color: var(--dxds-color-content-utility-yellow-default-rest, var(--dx-color-warning));
 }
 
 .task__priority--high {
-  color: var(--dx-color-danger);
+  color: var(--dxds-color-content-utility-red-default-rest, var(--dx-color-danger));
 }
 
 .task__indicator {
diff --git a/apps/demos/Demos/CardView/FieldTemplate/jQuery/styles.css b/apps/demos/Demos/CardView/FieldTemplate/jQuery/styles.css
index 766e8352cc55..75680ef20e39 100644
--- a/apps/demos/Demos/CardView/FieldTemplate/jQuery/styles.css
+++ b/apps/demos/Demos/CardView/FieldTemplate/jQuery/styles.css
@@ -14,19 +14,19 @@
 }
 
 .task__priority--low {
-  color: var(--dx-color-success);
+  color: var(--dxds-color-content-utility-green-default-rest, var(--dx-color-success));
 }
 
 .task__priority--normal {
-  color: var(--dx-color-primary);
+  color: var(--dxds-color-content-utility-blue-default-rest, var(--dx-color-primary));
 }
 
 .task__priority--urgent {
-  color: var(--dx-color-warning);
+  color: var(--dxds-color-content-utility-yellow-default-rest, var(--dx-color-warning));
 }
 
 .task__priority--high {
-  color: var(--dx-color-danger);
+  color: var(--dxds-color-content-utility-red-default-rest, var(--dx-color-danger));
 }
 
 .task__indicator {
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 6475d0783ac9..e06dbd7a685e 100644
--- a/apps/demos/Demos/CardView/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/CardView/Overview/Angular/app/app.component.css
@@ -15,15 +15,15 @@
 }
 
 .status--salaried {
-  color: var(--dx-color-success);
+  color: var(--dxds-color-content-utility-green-default-rest, var(--dx-color-success));
 }
 
 .status--commission {
-  color: var(--dx-color-warning);
+  color: var(--dxds-color-content-utility-yellow-default-rest, var(--dx-color-warning));
 }
 
 .status--terminated {
-  color: var(--dx-color-danger);
+  color: var(--dxds-color-content-utility-red-default-rest, var(--dx-color-danger));
 }
 
 .indicator {
diff --git a/apps/demos/Demos/CardView/Overview/React/styles.css b/apps/demos/Demos/CardView/Overview/React/styles.css
index 6475d0783ac9..e06dbd7a685e 100644
--- a/apps/demos/Demos/CardView/Overview/React/styles.css
+++ b/apps/demos/Demos/CardView/Overview/React/styles.css
@@ -15,15 +15,15 @@
 }
 
 .status--salaried {
-  color: var(--dx-color-success);
+  color: var(--dxds-color-content-utility-green-default-rest, var(--dx-color-success));
 }
 
 .status--commission {
-  color: var(--dx-color-warning);
+  color: var(--dxds-color-content-utility-yellow-default-rest, var(--dx-color-warning));
 }
 
 .status--terminated {
-  color: var(--dx-color-danger);
+  color: var(--dxds-color-content-utility-red-default-rest, var(--dx-color-danger));
 }
 
 .indicator {
diff --git a/apps/demos/Demos/CardView/Overview/ReactJs/styles.css b/apps/demos/Demos/CardView/Overview/ReactJs/styles.css
index 6475d0783ac9..e06dbd7a685e 100644
--- a/apps/demos/Demos/CardView/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/CardView/Overview/ReactJs/styles.css
@@ -15,15 +15,15 @@
 }
 
 .status--salaried {
-  color: var(--dx-color-success);
+  color: var(--dxds-color-content-utility-green-default-rest, var(--dx-color-success));
 }
 
 .status--commission {
-  color: var(--dx-color-warning);
+  color: var(--dxds-color-content-utility-yellow-default-rest, var(--dx-color-warning));
 }
 
 .status--terminated {
-  color: var(--dx-color-danger);
+  color: var(--dxds-color-content-utility-red-default-rest, var(--dx-color-danger));
 }
 
 .indicator {
diff --git a/apps/demos/Demos/CardView/Overview/Vue/App.vue b/apps/demos/Demos/CardView/Overview/Vue/App.vue
index dca62c0e82f1..288cb30028df 100644
--- a/apps/demos/Demos/CardView/Overview/Vue/App.vue
+++ b/apps/demos/Demos/CardView/Overview/Vue/App.vue
@@ -151,15 +151,15 @@ const cardView = ref<DxCardView>();
 }
 
 .status--salaried {
-  color: var(--dx-color-success);
+  color: var(--dxds-color-content-utility-green-default-rest, var(--dx-color-success));
 }
 
 .status--commission {
-  color: var(--dx-color-warning);
+  color: var(--dxds-color-content-utility-yellow-default-rest, var(--dx-color-warning));
 }
 
 .status--terminated {
-  color: var(--dx-color-danger);
+  color: var(--dxds-color-content-utility-red-default-rest, var(--dx-color-danger));
 }
 
 .indicator {
diff --git a/apps/demos/Demos/CardView/Overview/jQuery/styles.css b/apps/demos/Demos/CardView/Overview/jQuery/styles.css
index 6475d0783ac9..e06dbd7a685e 100644
--- a/apps/demos/Demos/CardView/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/CardView/Overview/jQuery/styles.css
@@ -15,15 +15,15 @@
 }
 
 .status--salaried {
-  color: var(--dx-color-success);
+  color: var(--dxds-color-content-utility-green-default-rest, var(--dx-color-success));
 }
 
 .status--commission {
-  color: var(--dx-color-warning);
+  color: var(--dxds-color-content-utility-yellow-default-rest, var(--dx-color-warning));
 }
 
 .status--terminated {
-  color: var(--dx-color-danger);
+  color: var(--dxds-color-content-utility-red-default-rest, var(--dx-color-danger));
 }
 
 .indicator {
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 50bb63833175..f6460fff923f 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: var(--dx-color-success);
+  color: var(--dxds-color-content-utility-green-default-rest, var(--dx-color-success));
 }
 
 ::ng-deep #gridContainer .inc .diff::before {
@@ -29,7 +29,7 @@
 }
 
 ::ng-deep #gridContainer .dec .diff {
-  color: var(--dx-color-danger);
+  color: var(--dxds-color-content-utility-red-default-rest, 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 9bb55d414ad6..e417a384320c 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: var(--dx-color-success);
+  color: var(--dxds-color-content-utility-green-default-rest, var(--dx-color-success));
 }
 
 #gridContainer .inc .diff::before {
@@ -29,7 +29,7 @@
 }
 
 #gridContainer .dec .diff {
-  color: var(--dx-color-danger);
+  color: var(--dxds-color-content-utility-red-default-rest, 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 9bb55d414ad6..e417a384320c 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: var(--dx-color-success);
+  color: var(--dxds-color-content-utility-green-default-rest, var(--dx-color-success));
 }
 
 #gridContainer .inc .diff::before {
@@ -29,7 +29,7 @@
 }
 
 #gridContainer .dec .diff {
-  color: var(--dx-color-danger);
+  color: var(--dxds-color-content-utility-red-default-rest, 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 0f3bad962866..7c3b5b569f6a 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: var(--dx-color-success);
+  color: var(--dxds-color-content-utility-green-default-rest, var(--dx-color-success));
 }
 
 #gridContainer .inc .diff::before {
@@ -92,7 +92,7 @@ import { weekData } from './data.ts';
 }
 
 #gridContainer .dec .diff {
-  color: var(--dx-color-danger);
+  color: var(--dxds-color-content-utility-red-default-rest, 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 9bb55d414ad6..e417a384320c 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: var(--dx-color-success);
+  color: var(--dxds-color-content-utility-green-default-rest, var(--dx-color-success));
 }
 
 #gridContainer .inc .diff::before {
@@ -29,7 +29,7 @@
 }
 
 #gridContainer .dec .diff {
-  color: var(--dx-color-danger);
+  color: var(--dxds-color-content-utility-red-default-rest, var(--dx-color-danger));
 }
 
 #gridContainer .inc .diff::after,
diff --git a/apps/demos/Demos/Form/SmartPaste/Angular/app/app.component.css b/apps/demos/Demos/Form/SmartPaste/Angular/app/app.component.css
index 1d535bc49120..9fb605c5dd44 100644
--- a/apps/demos/Demos/Form/SmartPaste/Angular/app/app.component.css
+++ b/apps/demos/Demos/Form/SmartPaste/Angular/app/app.component.css
@@ -9,7 +9,7 @@
 }
 
 .instruction {
-  color: var(--dx-texteditor-color-label);
+  color: var(--dxds-color-content-neutral-subdued-rest, var(--dx-texteditor-color-label));
 }
 
 .textarea-container {
diff --git a/apps/demos/Demos/Form/SmartPaste/React/styles.css b/apps/demos/Demos/Form/SmartPaste/React/styles.css
index e59f73d1412c..2cfad7dcb27d 100644
--- a/apps/demos/Demos/Form/SmartPaste/React/styles.css
+++ b/apps/demos/Demos/Form/SmartPaste/React/styles.css
@@ -9,7 +9,7 @@
 }
 
 .instruction {
-  color: var(--dx-texteditor-color-label);
+  color: var(--dxds-color-content-neutral-subdued-rest, var(--dx-texteditor-color-label));
 }
 
 .textarea-container {
diff --git a/apps/demos/Demos/Form/SmartPaste/ReactJs/styles.css b/apps/demos/Demos/Form/SmartPaste/ReactJs/styles.css
index e59f73d1412c..2cfad7dcb27d 100644
--- a/apps/demos/Demos/Form/SmartPaste/ReactJs/styles.css
+++ b/apps/demos/Demos/Form/SmartPaste/ReactJs/styles.css
@@ -9,7 +9,7 @@
 }
 
 .instruction {
-  color: var(--dx-texteditor-color-label);
+  color: var(--dxds-color-content-neutral-subdued-rest, var(--dx-texteditor-color-label));
 }
 
 .textarea-container {
diff --git a/apps/demos/Demos/Form/SmartPaste/Vue/App.vue b/apps/demos/Demos/Form/SmartPaste/Vue/App.vue
index 43dcabe6af3b..cf997f55bcc6 100644
--- a/apps/demos/Demos/Form/SmartPaste/Vue/App.vue
+++ b/apps/demos/Demos/Form/SmartPaste/Vue/App.vue
@@ -274,7 +274,7 @@ onMounted(() => {
 }
 
 .instruction {
-  color: var(--dx-texteditor-color-label);
+  color: var(--dxds-color-content-neutral-subdued-rest, var(--dx-texteditor-color-label));
 }
 
 .textarea-container {
diff --git a/apps/demos/Demos/Form/SmartPaste/jQuery/styles.css b/apps/demos/Demos/Form/SmartPaste/jQuery/styles.css
index ba505451e09c..1bf97bb8c6d3 100644
--- a/apps/demos/Demos/Form/SmartPaste/jQuery/styles.css
+++ b/apps/demos/Demos/Form/SmartPaste/jQuery/styles.css
@@ -9,7 +9,7 @@
 }
 
 .instruction {
-  color: var(--dx-texteditor-color-label);
+  color: var(--dxds-color-content-neutral-subdued-rest, var(--dx-texteditor-color-label));
 }
 
 .textarea-container {
diff --git a/apps/demos/Demos/Splitter/Overview/Angular/app/app.component.css b/apps/demos/Demos/Splitter/Overview/Angular/app/app.component.css
index e2f2229cb057..c8de44e337e5 100644
--- a/apps/demos/Demos/Splitter/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/Splitter/Overview/Angular/app/app.component.css
@@ -23,7 +23,7 @@
 }
 
 ::ng-deep .pane-option {
-  color: var(--dx-texteditor-color-label);
+  color: var(--dxds-color-content-neutral-subdued-rest, var(--dx-texteditor-color-label));
   font-size: 10px;
 }
 
diff --git a/apps/demos/Demos/Splitter/Overview/React/styles.css b/apps/demos/Demos/Splitter/Overview/React/styles.css
index 21c5dbb1b0c3..3e6b63ba8dc1 100644
--- a/apps/demos/Demos/Splitter/Overview/React/styles.css
+++ b/apps/demos/Demos/Splitter/Overview/React/styles.css
@@ -27,7 +27,7 @@
 }
 
 .pane-option {
-  color: var(--dx-texteditor-color-label);
+  color: var(--dxds-color-content-neutral-subdued-rest, var(--dx-texteditor-color-label));
   font-size: 10px;
 }
 
diff --git a/apps/demos/Demos/Splitter/Overview/ReactJs/styles.css b/apps/demos/Demos/Splitter/Overview/ReactJs/styles.css
index 21c5dbb1b0c3..3e6b63ba8dc1 100644
--- a/apps/demos/Demos/Splitter/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/Splitter/Overview/ReactJs/styles.css
@@ -27,7 +27,7 @@
 }
 
 .pane-option {
-  color: var(--dx-texteditor-color-label);
+  color: var(--dxds-color-content-neutral-subdued-rest, var(--dx-texteditor-color-label));
   font-size: 10px;
 }
 
diff --git a/apps/demos/Demos/Splitter/Overview/Vue/PaneContent.vue b/apps/demos/Demos/Splitter/Overview/Vue/PaneContent.vue
index a2953446a99c..f76a3d9928a3 100644
--- a/apps/demos/Demos/Splitter/Overview/Vue/PaneContent.vue
+++ b/apps/demos/Demos/Splitter/Overview/Vue/PaneContent.vue
@@ -63,7 +63,7 @@ const filteredData = computed(() => Object.fromEntries(
 }
 
 .pane-option {
-  color: var(--dx-texteditor-color-label);
+  color: var(--dxds-color-content-neutral-subdued-rest, var(--dx-texteditor-color-label));
   font-size: 10px;
 }
 </style>
diff --git a/apps/demos/Demos/Splitter/Overview/jQuery/styles.css b/apps/demos/Demos/Splitter/Overview/jQuery/styles.css
index 14b1d58d9673..b33fe693eb2a 100644
--- a/apps/demos/Demos/Splitter/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/Splitter/Overview/jQuery/styles.css
@@ -23,7 +23,7 @@
 }
 
 .pane-option {
-  color: var(--dx-texteditor-color-label);
+  color: var(--dxds-color-content-neutral-subdued-rest, var(--dx-texteditor-color-label));
   font-size: 10px;
 }
 
diff --git a/apps/demos/testing/common.test.ts b/apps/demos/testing/common.test.ts
index 94ff53de31c5..a7f7c64c85c6 100644
--- a/apps/demos/testing/common.test.ts
+++ b/apps/demos/testing/common.test.ts
@@ -214,6 +214,12 @@ Object.values(FRAMEWORKS).forEach((approach) => {
       return;
     }
 
+    if (process.env.STRATEGY === 'accessibility'
+      && process.env.THEME?.startsWith('fluent-next')
+      && getIgnoredRules(testName).includes('color-contrast')) {
+      return;
+    }
+
     runTestAtPage(
       test,
       pageURL
@@ -236,9 +242,18 @@ Object.values(FRAMEWORKS).forEach((approach) => {
 
         if (process.env.STRATEGY === 'accessibility') {
           const ignoredRules = getIgnoredRules(testName);
-          const options = { rules: {} };
-
+          // fluent-next shares fluent's structure/ARIA (already covered by the fluent run),
+          // so only color-contrast is re-checked for it across the demos.
+          const isDesignSystemFluent = process.env.THEME?.startsWith('fluent-next');
+          const colorContrastIgnored = ignoredRules.includes('color-contrast');
+          const options = isDesignSystemFluent
+            ? { runOnly: { type: 'rule' as const, values: colorContrastIgnored ? [] : ['color-contrast'] }, rules: {} }
+            : { rules: {} };
+
+          // axe-core ignores options.rules[...] when runOnly.type === 'rule',
+          // so ignored rules must be excluded from runOnly.values above instead.
           ignoredRules.forEach((ruleName) => {
+            if (isDesignSystemFluent && ruleName === 'color-contrast') return;
             options.rules[ruleName] = { enabled: false };
           });
 
diff --git a/apps/demos/testing/etalons/Accordion-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/Accordion-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9ee0704f7d65
Binary files /dev/null and b/apps/demos/testing/etalons/Accordion-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/ActionSheet-Basics (fluent-next.blue.light).png b/apps/demos/testing/etalons/ActionSheet-Basics (fluent-next.blue.light).png
new file mode 100644
index 000000000000..04cbf11e10e2
Binary files /dev/null and b/apps/demos/testing/etalons/ActionSheet-Basics (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/ActionSheet-PopoverMode (fluent-next.blue.light).png b/apps/demos/testing/etalons/ActionSheet-PopoverMode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d668ba595c5f
Binary files /dev/null and b/apps/demos/testing/etalons/ActionSheet-PopoverMode (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Autocomplete-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/Autocomplete-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..07e9ad297632
Binary files /dev/null and b/apps/demos/testing/etalons/Autocomplete-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Box-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/Box-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3aeb1771dac9
Binary files /dev/null and b/apps/demos/testing/etalons/Box-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Button-Icons (fluent-next.blue.light).png b/apps/demos/testing/etalons/Button-Icons (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ee39defd8232
Binary files /dev/null and b/apps/demos/testing/etalons/Button-Icons (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Button-PredefinedTypes (fluent-next.blue.light).png b/apps/demos/testing/etalons/Button-PredefinedTypes (fluent-next.blue.light).png
new file mode 100644
index 000000000000..14a6f2e6a989
Binary files /dev/null and b/apps/demos/testing/etalons/Button-PredefinedTypes (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/ButtonGroup-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/ButtonGroup-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..872d0c334d49
Binary files /dev/null and b/apps/demos/testing/etalons/ButtonGroup-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Calendar-MultipleSelection (fluent-next.blue.light).png b/apps/demos/testing/etalons/Calendar-MultipleSelection (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c0d88a254272
Binary files /dev/null and b/apps/demos/testing/etalons/Calendar-MultipleSelection (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Calendar-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/Calendar-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4224c4f72727
Binary files /dev/null and b/apps/demos/testing/etalons/Calendar-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/CardView-CardTemplate (fluent-next.blue.light).png b/apps/demos/testing/etalons/CardView-CardTemplate (fluent-next.blue.light).png
new file mode 100644
index 000000000000..451f777ad58f
Binary files /dev/null and b/apps/demos/testing/etalons/CardView-CardTemplate (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/CardView-ColumnChooser (fluent-next.blue.light).png b/apps/demos/testing/etalons/CardView-ColumnChooser (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5534996a1913
Binary files /dev/null and b/apps/demos/testing/etalons/CardView-ColumnChooser (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/CardView-ColumnHeaderFilter (fluent-next.blue.light).png b/apps/demos/testing/etalons/CardView-ColumnHeaderFilter (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2da4daca4c67
Binary files /dev/null and b/apps/demos/testing/etalons/CardView-ColumnHeaderFilter (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/CardView-ColumnReordering (fluent-next.blue.light).png b/apps/demos/testing/etalons/CardView-ColumnReordering (fluent-next.blue.light).png
new file mode 100644
index 000000000000..16e52658c130
Binary files /dev/null and b/apps/demos/testing/etalons/CardView-ColumnReordering (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/CardView-DataValidation (fluent-next.blue.light).png b/apps/demos/testing/etalons/CardView-DataValidation (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9bb8a1b4e12d
Binary files /dev/null and b/apps/demos/testing/etalons/CardView-DataValidation (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/CardView-FieldTemplate (fluent-next.blue.light).png b/apps/demos/testing/etalons/CardView-FieldTemplate (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b918151a219c
Binary files /dev/null and b/apps/demos/testing/etalons/CardView-FieldTemplate (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/CardView-FilterPanel (fluent-next.blue.light).png b/apps/demos/testing/etalons/CardView-FilterPanel (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d6f91e80a4bf
Binary files /dev/null and b/apps/demos/testing/etalons/CardView-FilterPanel (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/CardView-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/CardView-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..39eede34b7f5
Binary files /dev/null and b/apps/demos/testing/etalons/CardView-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/CardView-PopupEditing (fluent-next.blue.light).png b/apps/demos/testing/etalons/CardView-PopupEditing (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9bb8a1b4e12d
Binary files /dev/null and b/apps/demos/testing/etalons/CardView-PopupEditing (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/CardView-SearchPanel (fluent-next.blue.light).png b/apps/demos/testing/etalons/CardView-SearchPanel (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cb531ef1e83b
Binary files /dev/null and b/apps/demos/testing/etalons/CardView-SearchPanel (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/CardView-Selection (fluent-next.blue.light).png b/apps/demos/testing/etalons/CardView-Selection (fluent-next.blue.light).png
new file mode 100644
index 000000000000..689aeef2ab32
Binary files /dev/null and b/apps/demos/testing/etalons/CardView-Selection (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/CardView-SimpleArray (fluent-next.blue.light).png b/apps/demos/testing/etalons/CardView-SimpleArray (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9f5880925278
Binary files /dev/null and b/apps/demos/testing/etalons/CardView-SimpleArray (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/CardView-Sorting (fluent-next.blue.light).png b/apps/demos/testing/etalons/CardView-Sorting (fluent-next.blue.light).png
new file mode 100644
index 000000000000..68185d968b66
Binary files /dev/null and b/apps/demos/testing/etalons/CardView-Sorting (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/CardView-WebAPIService (fluent-next.blue.light).png b/apps/demos/testing/etalons/CardView-WebAPIService (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f7647a75395c
Binary files /dev/null and b/apps/demos/testing/etalons/CardView-WebAPIService (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-AjaxRequest (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-AjaxRequest (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ba64467418b1
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-AjaxRequest (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-Annotation (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-Annotation (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2f2bdc6f555c
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-Annotation (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-Area (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-Area (fluent-next.blue.light).png
new file mode 100644
index 000000000000..16fea63212f2
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-Area (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-AreaSelectionZooming (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-AreaSelectionZooming (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bd2c1c3b905b
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-AreaSelectionZooming (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-AreaSparklines (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-AreaSparklines (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a2ca82b323e3
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-AreaSparklines (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-AutoCalculatedBarWidth (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-AutoCalculatedBarWidth (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c314ba722515
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-AutoCalculatedBarWidth (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-AxisCustomPosition (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-AxisCustomPosition (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1c3ed520785e
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-AxisCustomPosition (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-AxisCustomPosition (fluent-next.blue.light)_mask.png b/apps/demos/testing/etalons/Charts-AxisCustomPosition (fluent-next.blue.light)_mask.png
new file mode 100644
index 000000000000..07113ff8e016
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-AxisCustomPosition (fluent-next.blue.light)_mask.png differ
diff --git a/apps/demos/testing/etalons/Charts-AxisLabelCustomization (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-AxisLabelCustomization (fluent-next.blue.light).png
new file mode 100644
index 000000000000..eae1b807df50
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-AxisLabelCustomization (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-BarColorCustomization (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-BarColorCustomization (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5c41a5a2870e
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-BarColorCustomization (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-BarDrillDown (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-BarDrillDown (fluent-next.blue.light).png
new file mode 100644
index 000000000000..89ea0717c88b
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-BarDrillDown (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-BarSparklines (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-BarSparklines (fluent-next.blue.light).png
new file mode 100644
index 000000000000..079def71abf9
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-BarSparklines (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-BiDirectionalBarChart (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-BiDirectionalBarChart (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3614dbb11880
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-BiDirectionalBarChart (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-Bubble (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-Bubble (fluent-next.blue.light).png
new file mode 100644
index 000000000000..27f4f2a4e753
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-Bubble (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-Candlestick (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-Candlestick (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ed9563265185
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-Candlestick (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-CenterLabelCustomization (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-CenterLabelCustomization (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f761b65626c5
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-CenterLabelCustomization (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-ClientSideDataProcessing (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-ClientSideDataProcessing (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1f1f2d6aa014
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-ClientSideDataProcessing (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-Colorization (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-Colorization (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b6a47c3a62ee
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-Colorization (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-ContinuousData (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-ContinuousData (fluent-next.blue.light).png
new file mode 100644
index 000000000000..264638db07ea
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-ContinuousData (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-Crosshair (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-Crosshair (fluent-next.blue.light).png
new file mode 100644
index 000000000000..27cb3f48d7a1
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-Crosshair (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-CustomAnnotations (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-CustomAnnotations (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b2a6f3fa11aa
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-CustomAnnotations (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-CustomBarWidth (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-CustomBarWidth (fluent-next.blue.light).png
new file mode 100644
index 000000000000..54c5231a5137
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-CustomBarWidth (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-CustomFillStyles (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-CustomFillStyles (fluent-next.blue.light).png
new file mode 100644
index 000000000000..061c251b4275
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-CustomFillStyles (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-CustomizePointsAndLabels (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-CustomizePointsAndLabels (fluent-next.blue.light).png
new file mode 100644
index 000000000000..922acf6fefba
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-CustomizePointsAndLabels (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-DiscreteAxisZoomingAndScrolling (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-DiscreteAxisZoomingAndScrolling (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3ecfffe20c91
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-DiscreteAxisZoomingAndScrolling (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-DiscreteData (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-DiscreteData (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1c2b36c15bd8
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-DiscreteData (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-DiscretePointsAggregation (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-DiscretePointsAggregation (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3027f16354d9
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-DiscretePointsAggregation (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-Doughnut (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-Doughnut (fluent-next.blue.light).png
new file mode 100644
index 000000000000..44599a3ac45f
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-Doughnut (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-DoughnutSelection (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-DoughnutSelection (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0c685896d4ea
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-DoughnutSelection (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-DoughnutWithTopNSeries (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-DoughnutWithTopNSeries (fluent-next.blue.light).png
new file mode 100644
index 000000000000..31e0c9e1c0b7
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-DoughnutWithTopNSeries (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-DrillDown (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-DrillDown (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b6ebb3329691
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-DrillDown (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-DynamicSeries (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-DynamicSeries (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2ef96424fb2e
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-DynamicSeries (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-EqualSizePies (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-EqualSizePies (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c33b9ae62661
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-EqualSizePies (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-ErrorBars (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-ErrorBars (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7b063068ed34
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-ErrorBars (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-ExportAndPrintingAPI (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-ExportAndPrintingAPI (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0baddf254733
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-ExportAndPrintingAPI (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-ExportCustomMarkup (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-ExportCustomMarkup (fluent-next.blue.light).png
new file mode 100644
index 000000000000..376ed3a94616
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-ExportCustomMarkup (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-ExportSeveralCharts (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-ExportSeveralCharts (fluent-next.blue.light).png
new file mode 100644
index 000000000000..407d5f85de0b
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-ExportSeveralCharts (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-FlatDataStructure (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-FlatDataStructure (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d1cc9a30ca46
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-FlatDataStructure (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-FullStackedBar (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-FullStackedBar (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1f9417bcfae3
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-FullStackedBar (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-FunnelChart (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-FunnelChart (fluent-next.blue.light).png
new file mode 100644
index 000000000000..05f0a7bf593a
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-FunnelChart (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-HierarchicalDataStructure (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-HierarchicalDataStructure (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d1cc9a30ca46
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-HierarchicalDataStructure (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-HoverMode (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-HoverMode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a711cd7d4a55
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-HoverMode (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-InvertedChart (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-InvertedChart (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ab7ed53ef18d
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-InvertedChart (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-LabelCustomization (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-LabelCustomization (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3c39b61168e9
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-LabelCustomization (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-LegendMarkersCustomization (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-LegendMarkersCustomization (fluent-next.blue.light).png
new file mode 100644
index 000000000000..381a8c391c8a
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-LegendMarkersCustomization (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-Line (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-Line (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b28b7070af38
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-Line (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-LoadDataOnDemand (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-LoadDataOnDemand (fluent-next.blue.light).png
new file mode 100644
index 000000000000..92b3b448c3a0
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-LoadDataOnDemand (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-LogarithmicAxis (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-LogarithmicAxis (fluent-next.blue.light).png
new file mode 100644
index 000000000000..427bf4d11116
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-LogarithmicAxis (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-LogarithmicVsLinearAxes (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-LogarithmicVsLinearAxes (fluent-next.blue.light).png
new file mode 100644
index 000000000000..63bbd13a924f
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-LogarithmicVsLinearAxes (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-MultipleAxes (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-MultipleAxes (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a2c583a618a5
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-MultipleAxes (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-MultiplePanes (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-MultiplePanes (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e219829b30f0
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-MultiplePanes (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-MultiplePointSelection (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-MultiplePointSelection (fluent-next.blue.light).png
new file mode 100644
index 000000000000..77bedbf1bb2c
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-MultiplePointSelection (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-MultipleSeriesSelection (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-MultipleSeriesSelection (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d3f6b8f3cab8
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-MultipleSeriesSelection (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-NullPointSupport (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-NullPointSupport (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9f64563fd97a
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-NullPointSupport (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f0a5cc409943
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-Palette (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-Palette (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1bad86924b8d
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-Palette (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-ParetoChart (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-ParetoChart (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f0a5cc409943
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-ParetoChart (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-PeriodicData (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-PeriodicData (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cd7d71dc8272
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-PeriodicData (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-Pie (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-Pie (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bb2a6e74aa0f
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-Pie (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-PieAnnotations (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-PieAnnotations (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e300f3476d24
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-PieAnnotations (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-PieResolveLabelOverlap (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-PieResolveLabelOverlap (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d075b39897e0
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-PieResolveLabelOverlap (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-PieWithMultipleSeries (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-PieWithMultipleSeries (fluent-next.blue.light).png
new file mode 100644
index 000000000000..20e0648a55a6
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-PieWithMultipleSeries (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-PointImage (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-PointImage (fluent-next.blue.light).png
new file mode 100644
index 000000000000..371627bd6658
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-PointImage (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-PointSelectionAPI (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-PointSelectionAPI (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9c5ba190e3bc
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-PointSelectionAPI (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-PointsAggregation (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-PointsAggregation (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b585623d4fb7
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-PointsAggregation (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-PointsAggregationFinancialChart (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-PointsAggregationFinancialChart (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d4967a6ad054
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-PointsAggregationFinancialChart (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-PolarChartAnnotations (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-PolarChartAnnotations (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8c7c917fd8ff
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-PolarChartAnnotations (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-PolarChartZoomingAndScrollingAPI (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-PolarChartZoomingAndScrollingAPI (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9d3e7e6b0bc4
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-PolarChartZoomingAndScrollingAPI (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-PyramidChart (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-PyramidChart (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0842634f2b1f
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-PyramidChart (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-RangeArea (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-RangeArea (fluent-next.blue.light).png
new file mode 100644
index 000000000000..816f9ca2445b
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-RangeArea (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-RangeBar (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-RangeBar (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9f5ec617da7f
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-RangeBar (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-ResolveLabelOverlap (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-ResolveLabelOverlap (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5aaab767290d
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-ResolveLabelOverlap (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-SankeyChart (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-SankeyChart (fluent-next.blue.light).png
new file mode 100644
index 000000000000..033d4eb0c69c
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-SankeyChart (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-ScaleBreaks (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-ScaleBreaks (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4a6ffd1b19ad
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-ScaleBreaks (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-Scatter (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-Scatter (fluent-next.blue.light).png
new file mode 100644
index 000000000000..99cfa46ec381
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-Scatter (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-Selection (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-Selection (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2dc0261ea74c
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-Selection (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-ServerSideDataProcessing (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-ServerSideDataProcessing (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6df8d84e88b4
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-ServerSideDataProcessing (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-SideBySideBar (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-SideBySideBar (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5ea66e44cc6b
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-SideBySideBar (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-SideBySideFullStackedBar (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-SideBySideFullStackedBar (fluent-next.blue.light).png
new file mode 100644
index 000000000000..daf95e1b72cf
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-SideBySideFullStackedBar (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-SideBySideStackedBar (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-SideBySideStackedBar (fluent-next.blue.light).png
new file mode 100644
index 000000000000..168b787d1cf2
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-SideBySideStackedBar (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-SignalRService (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-SignalRService (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d23bcea13c91
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-SignalRService (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-SimpleArray (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-SimpleArray (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c73cbae526d7
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-SimpleArray (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-SimpleBullets (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-SimpleBullets (fluent-next.blue.light).png
new file mode 100644
index 000000000000..49c903fa973c
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-SimpleBullets (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-SimpleSparklines (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-SimpleSparklines (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e59332916ba0
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-SimpleSparklines (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-SmallValueGroups (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-SmallValueGroups (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7ab092eb0323
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-SmallValueGroups (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-SpiderWeb (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-SpiderWeb (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ad615e9f0829
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-SpiderWeb (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-Spline (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-Spline (fluent-next.blue.light).png
new file mode 100644
index 000000000000..77729b573616
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-Spline (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-SplineArea (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-SplineArea (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b8f26a5904ae
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-SplineArea (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-StackedBar (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-StackedBar (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cfdbe2d59b1a
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-StackedBar (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-StandardBar (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-StandardBar (fluent-next.blue.light).png
new file mode 100644
index 000000000000..30e58e7e7a52
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-StandardBar (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-StepArea (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-StepArea (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3835e803db9c
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-StepArea (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-StepLine (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-StepLine (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f2a24142cea5
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-StepLine (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-Stock (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-Stock (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3932b5bca840
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-Stock (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-Strips (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-Strips (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f055fa93d4ab
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-Strips (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-TilingAlgorithms (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-TilingAlgorithms (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5046db912378
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-TilingAlgorithms (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-Timeline (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-Timeline (fluent-next.blue.light).png
new file mode 100644
index 000000000000..64d304762674
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-Timeline (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-TooltipAPI (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-TooltipAPI (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e861d56be5d0
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-TooltipAPI (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-TooltipCustomization (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-TooltipCustomization (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6f814347f755
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-TooltipCustomization (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-WindRose (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-WindRose (fluent-next.blue.light).png
new file mode 100644
index 000000000000..aa46dc62f20e
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-WindRose (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-WinlossSparklines (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-WinlossSparklines (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2d32c8d50b1f
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-WinlossSparklines (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-ZoomingAndScrolling (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-ZoomingAndScrolling (fluent-next.blue.light).png
new file mode 100644
index 000000000000..23b9732d2992
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-ZoomingAndScrolling (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Charts-ZoomingAndScrollingAPI (fluent-next.blue.light).png b/apps/demos/testing/etalons/Charts-ZoomingAndScrollingAPI (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5a090b5a3719
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-ZoomingAndScrollingAPI (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Chat-AIAndChatbotIntegration (fluent-next.blue.light).png b/apps/demos/testing/etalons/Chat-AIAndChatbotIntegration (fluent-next.blue.light).png
new file mode 100644
index 000000000000..577dcf6fc284
Binary files /dev/null and b/apps/demos/testing/etalons/Chat-AIAndChatbotIntegration (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Chat-Customization (fluent-next.blue.light).png b/apps/demos/testing/etalons/Chat-Customization (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1427d45e3152
Binary files /dev/null and b/apps/demos/testing/etalons/Chat-Customization (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Chat-FileAttachments (fluent-next.blue.light).png b/apps/demos/testing/etalons/Chat-FileAttachments (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3fad9b4ccdb2
Binary files /dev/null and b/apps/demos/testing/etalons/Chat-FileAttachments (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Chat-MessageEditing (fluent-next.blue.light).png b/apps/demos/testing/etalons/Chat-MessageEditing (fluent-next.blue.light).png
new file mode 100644
index 000000000000..77fd35c69a02
Binary files /dev/null and b/apps/demos/testing/etalons/Chat-MessageEditing (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Chat-MessageStreaming (fluent-next.blue.light).png b/apps/demos/testing/etalons/Chat-MessageStreaming (fluent-next.blue.light).png
new file mode 100644
index 000000000000..79082562de7e
Binary files /dev/null and b/apps/demos/testing/etalons/Chat-MessageStreaming (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Chat-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/Chat-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b2457c25ccd2
Binary files /dev/null and b/apps/demos/testing/etalons/Chat-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Chat-PromptSuggestions (fluent-next.blue.light).png b/apps/demos/testing/etalons/Chat-PromptSuggestions (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9e81cc935709
Binary files /dev/null and b/apps/demos/testing/etalons/Chat-PromptSuggestions (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/CheckBox-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/CheckBox-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d847dcdbe4a2
Binary files /dev/null and b/apps/demos/testing/etalons/CheckBox-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/ColorBox-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/ColorBox-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..49b29a4e9621
Binary files /dev/null and b/apps/demos/testing/etalons/ColorBox-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Common-CustomTextEditorButtons (fluent-next.blue.light).png b/apps/demos/testing/etalons/Common-CustomTextEditorButtons (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f610cdb71288
Binary files /dev/null and b/apps/demos/testing/etalons/Common-CustomTextEditorButtons (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Common-EditorAppearanceVariants (fluent-next.blue.light).png b/apps/demos/testing/etalons/Common-EditorAppearanceVariants (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b1ebc37420ea
Binary files /dev/null and b/apps/demos/testing/etalons/Common-EditorAppearanceVariants (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Common-EditorsOverview (fluent-next.blue.light).png b/apps/demos/testing/etalons/Common-EditorsOverview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..135621591c84
Binary files /dev/null and b/apps/demos/testing/etalons/Common-EditorsOverview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Common-EditorsRightToLeftSupport (fluent-next.blue.light).png b/apps/demos/testing/etalons/Common-EditorsRightToLeftSupport (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1a012a9af5b7
Binary files /dev/null and b/apps/demos/testing/etalons/Common-EditorsRightToLeftSupport (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Common-FormsOverview (fluent-next.blue.light).png b/apps/demos/testing/etalons/Common-FormsOverview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..938e8a40d6ae
Binary files /dev/null and b/apps/demos/testing/etalons/Common-FormsOverview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Common-ListsOverview (fluent-next.blue.light).png b/apps/demos/testing/etalons/Common-ListsOverview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5d20b7a8bcc1
Binary files /dev/null and b/apps/demos/testing/etalons/Common-ListsOverview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Common-NavigationOverview (fluent-next.blue.light).png b/apps/demos/testing/etalons/Common-NavigationOverview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..56ebbc07f369
Binary files /dev/null and b/apps/demos/testing/etalons/Common-NavigationOverview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Common-NavigationRightToLeftSupport (fluent-next.blue.light).png b/apps/demos/testing/etalons/Common-NavigationRightToLeftSupport (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4ae614cf3a59
Binary files /dev/null and b/apps/demos/testing/etalons/Common-NavigationRightToLeftSupport (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Common-PopupAndNotificationsOverview (fluent-next.blue.light).png b/apps/demos/testing/etalons/Common-PopupAndNotificationsOverview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..26c773cdef97
Binary files /dev/null and b/apps/demos/testing/etalons/Common-PopupAndNotificationsOverview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/ContextMenu-Basics (fluent-next.blue.light).png b/apps/demos/testing/etalons/ContextMenu-Basics (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4f3e9b1a0eb4
Binary files /dev/null and b/apps/demos/testing/etalons/ContextMenu-Basics (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/ContextMenu-Scrolling (fluent-next.blue.light).png b/apps/demos/testing/etalons/ContextMenu-Scrolling (fluent-next.blue.light).png
new file mode 100644
index 000000000000..291ada78cf38
Binary files /dev/null and b/apps/demos/testing/etalons/ContextMenu-Scrolling (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/ContextMenu-Templates (fluent-next.blue.light).png b/apps/demos/testing/etalons/ContextMenu-Templates (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2fe6302cfdff
Binary files /dev/null and b/apps/demos/testing/etalons/ContextMenu-Templates (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-AIAssistant (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-AIAssistant (fluent-next.blue.light).png
new file mode 100644
index 000000000000..19ceae0eaffa
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-AIAssistant (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-AIColumns (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-AIColumns (fluent-next.blue.light).png
new file mode 100644
index 000000000000..895fc7fde57b
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-AIColumns (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-AdvancedMasterDetailView (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-AdvancedMasterDetailView (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dd844d02f8db
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-AdvancedMasterDetailView (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-AjaxRequest (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-AjaxRequest (fluent-next.blue.light).png
new file mode 100644
index 000000000000..088ff81bfebf
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-AjaxRequest (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-Appearance (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-Appearance (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bf7678712996
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-Appearance (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-AutoPopulatedColumns (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-AutoPopulatedColumns (fluent-next.blue.light).png
new file mode 100644
index 000000000000..60544cf2dece
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-AutoPopulatedColumns (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-BatchEditing (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-BatchEditing (fluent-next.blue.light).png
new file mode 100644
index 000000000000..56c706f5ca2b
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-BatchEditing (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-BatchUpdateRequest (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-BatchUpdateRequest (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e2260cf61036
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-BatchUpdateRequest (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-CascadingLookups (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-CascadingLookups (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d801f025dd0b
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-CascadingLookups (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-Cell (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-Cell (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9920be5f169c
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-Cell (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-CellEditing (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-CellEditing (fluent-next.blue.light).png
new file mode 100644
index 000000000000..107fc98a0799
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-CellEditing (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-CollaborativeEditing (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-CollaborativeEditing (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1181de925ee9
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-CollaborativeEditing (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-Column (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-Column (fluent-next.blue.light).png
new file mode 100644
index 000000000000..689621e809c6
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-Column (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-Column3RdPartyEngineTemplate (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-Column3RdPartyEngineTemplate (fluent-next.blue.light).png
new file mode 100644
index 000000000000..689621e809c6
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-Column3RdPartyEngineTemplate (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-ColumnChooser (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-ColumnChooser (fluent-next.blue.light).png
new file mode 100644
index 000000000000..313a47f4c692
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-ColumnChooser (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-ColumnHeaderFilter (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-ColumnHeaderFilter (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0dce052b820f
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-ColumnHeaderFilter (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-ColumnReordering (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-ColumnReordering (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7a3122384cb8
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-ColumnReordering (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-ColumnResizing (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-ColumnResizing (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0a0eea849442
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-ColumnResizing (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-ColumnsHidingPriority (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-ColumnsHidingPriority (fluent-next.blue.light).png
new file mode 100644
index 000000000000..43b0e7f576a6
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-ColumnsHidingPriority (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-CommandColumnConfiguration (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-CommandColumnConfiguration (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a7c30e2bb36d
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-CommandColumnConfiguration (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-CustomDataSource (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-CustomDataSource (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4382894e68ad
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-CustomDataSource (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-CustomEditors (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-CustomEditors (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b1e2dc993fa5
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-CustomEditors (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-CustomSummaries (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-CustomSummaries (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9b1d5ccf5d43
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-CustomSummaries (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-CustomizeKeyboardNavigation (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-CustomizeKeyboardNavigation (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1bbe57b53c73
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-CustomizeKeyboardNavigation (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-DataValidation (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-DataValidation (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3e461b1013ec
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-DataValidation (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-DeferredSelection (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-DeferredSelection (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7efd24f5a3d6
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-DeferredSelection (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-DnDBetweenGrids (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-DnDBetweenGrids (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ae5429f9d910
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-DnDBetweenGrids (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-EditStateManagement (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-EditStateManagement (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ccd2989b41d9
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-EditStateManagement (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-ExcelJSCellCustomization (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-ExcelJSCellCustomization (fluent-next.blue.light).png
new file mode 100644
index 000000000000..23be6e816883
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-ExcelJSCellCustomization (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-ExcelJSExportImages (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-ExcelJSExportImages (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8e136d68d2bd
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-ExcelJSExportImages (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-ExcelJSExportMultipleGrids (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-ExcelJSExportMultipleGrids (fluent-next.blue.light).png
new file mode 100644
index 000000000000..16c08ff536b5
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-ExcelJSExportMultipleGrids (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-ExcelJSHeaderAndFooter (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-ExcelJSHeaderAndFooter (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a0990dbfac28
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-ExcelJSHeaderAndFooter (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-ExcelJSOverview (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-ExcelJSOverview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a832b9a7cec6
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-ExcelJSOverview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-FilterPanel (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-FilterPanel (fluent-next.blue.light).png
new file mode 100644
index 000000000000..116098ed195d
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-FilterPanel (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-Filtering (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-Filtering (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c2e4eea94b67
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-Filtering (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-FilteringAPI (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-FilteringAPI (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a08fd20ee885
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-FilteringAPI (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-FixedAndStickyColumns (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-FixedAndStickyColumns (fluent-next.blue.light).png
new file mode 100644
index 000000000000..59fc3abbdfb6
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-FixedAndStickyColumns (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-FocusedRow (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-FocusedRow (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9dc59a5ff349
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-FocusedRow (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-FormEditing (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-FormEditing (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2fddfad31af0
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-FormEditing (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-GridAdaptabilityOverview (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-GridAdaptabilityOverview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..459002c4e2b6
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-GridAdaptabilityOverview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-GridSummaries (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-GridSummaries (fluent-next.blue.light).png
new file mode 100644
index 000000000000..df9feda9e9e5
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-GridSummaries (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-GroupSummaries (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-GroupSummaries (fluent-next.blue.light).png
new file mode 100644
index 000000000000..83fda3860429
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-GroupSummaries (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-HorizontalVirtualScrolling (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-HorizontalVirtualScrolling (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cf1a89a6574d
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-HorizontalVirtualScrolling (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-InfiniteScrolling (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-InfiniteScrolling (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7cd7fba73fd3
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-InfiniteScrolling (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-KeyboardNavigation (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-KeyboardNavigation (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e807c0f17b85
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-KeyboardNavigation (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-LocalReordering (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-LocalReordering (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6a76b1042cd8
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-LocalReordering (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-MasterDetailAPI (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-MasterDetailAPI (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4596a09efe11
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-MasterDetailAPI (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-MasterDetailView (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-MasterDetailView (fluent-next.blue.light).png
new file mode 100644
index 000000000000..51f1f4e334e2
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-MasterDetailView (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-MultiRowHeadersBands (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-MultiRowHeadersBands (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5ec3fcd22305
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-MultiRowHeadersBands (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-MultipleRecordSelectionAPI (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-MultipleRecordSelectionAPI (fluent-next.blue.light).png
new file mode 100644
index 000000000000..52cb289f217d
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-MultipleRecordSelectionAPI (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-MultipleRecordSelectionModes (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-MultipleRecordSelectionModes (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dd77831b3906
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-MultipleRecordSelectionModes (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-MultipleSorting (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-MultipleSorting (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fb019db3156f
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-MultipleSorting (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-NewRecordPosition (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-NewRecordPosition (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4fffa700b70f
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-NewRecordPosition (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..546c8be0607b
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-PDFCellCustomization (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-PDFCellCustomization (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1e6b0ec01895
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-PDFCellCustomization (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-PDFExportImages (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-PDFExportImages (fluent-next.blue.light).png
new file mode 100644
index 000000000000..62da7a47c907
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-PDFExportImages (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-PDFExportMultipleGrids (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-PDFExportMultipleGrids (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e90e58c2aabf
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-PDFExportMultipleGrids (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-PDFHeaderAndFooter (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-PDFHeaderAndFooter (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d24ed42cbd11
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-PDFHeaderAndFooter (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-PDFOverview (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-PDFOverview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4e763d529b15
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-PDFOverview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-PopupEditing (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-PopupEditing (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6d3b30c48ac6
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-PopupEditing (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-RealTimeUpdates (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-RealTimeUpdates (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5bab5fb95413
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-RealTimeUpdates (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-RecalculateWhileEditing (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-RecalculateWhileEditing (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4d2ca75c66fa
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-RecalculateWhileEditing (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-RecordGrouping (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-RecordGrouping (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d4b0146555ba
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-RecordGrouping (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-RecordPaging (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-RecordPaging (fluent-next.blue.light).png
new file mode 100644
index 000000000000..38a36f02e1ce
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-RecordPaging (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-RemoteCRUDOperations (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-RemoteCRUDOperations (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7d2d3a250b26
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-RemoteCRUDOperations (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-RemoteGrouping (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-RemoteGrouping (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ab49fe1cd03c
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-RemoteGrouping (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-RemoteReordering (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-RemoteReordering (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a2ff7a9a54c2
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-RemoteReordering (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-RemoteVirtualScrolling (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-RemoteVirtualScrolling (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ee5a8ff77ca2
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-RemoteVirtualScrolling (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-RightToLeftSupport (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-RightToLeftSupport (fluent-next.blue.light).png
new file mode 100644
index 000000000000..99bae6e835ce
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-RightToLeftSupport (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-Row (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-Row (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ef620be63022
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-Row (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-Row3RdPartyEngineTemplate (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-Row3RdPartyEngineTemplate (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b7524939a0df
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-Row3RdPartyEngineTemplate (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-RowEditing (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-RowEditing (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9153b8556f77
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-RowEditing (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-RowSelection (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-RowSelection (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9ffef01beb28
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-RowSelection (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-SemanticSearch (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-SemanticSearch (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5a55336c5f7e
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-SemanticSearch (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-SignalRService (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-SignalRService (fluent-next.blue.light).png
new file mode 100644
index 000000000000..84353b9c671e
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-SignalRService (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-SimpleArray (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-SimpleArray (fluent-next.blue.light).png
new file mode 100644
index 000000000000..00ed75397454
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-SimpleArray (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-StatePersistence (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-StatePersistence (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0cef13ae5050
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-StatePersistence (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-Toolbar (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-Toolbar (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0ade6d58a2f1
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-Toolbar (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-VirtualScrolling (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-VirtualScrolling (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7cd7fba73fd3
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-VirtualScrolling (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DataGrid-WebAPIService (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-WebAPIService (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3246ff77a8bb
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-WebAPIService (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DateBox-Formatting (fluent-next.blue.light).png b/apps/demos/testing/etalons/DateBox-Formatting (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1bee6025f339
Binary files /dev/null and b/apps/demos/testing/etalons/DateBox-Formatting (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DateBox-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/DateBox-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5b6bf60fe92b
Binary files /dev/null and b/apps/demos/testing/etalons/DateBox-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DateRangeBox-Formatting (fluent-next.blue.light).png b/apps/demos/testing/etalons/DateRangeBox-Formatting (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7fd14b42a6d4
Binary files /dev/null and b/apps/demos/testing/etalons/DateRangeBox-Formatting (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DateRangeBox-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/DateRangeBox-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5309f212d852
Binary files /dev/null and b/apps/demos/testing/etalons/DateRangeBox-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Diagram-Adaptability (fluent-next.blue.light).png b/apps/demos/testing/etalons/Diagram-Adaptability (fluent-next.blue.light).png
new file mode 100644
index 000000000000..85049e323e56
Binary files /dev/null and b/apps/demos/testing/etalons/Diagram-Adaptability (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Diagram-AdvancedDataBinding (fluent-next.blue.light).png b/apps/demos/testing/etalons/Diagram-AdvancedDataBinding (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6d9529306d2e
Binary files /dev/null and b/apps/demos/testing/etalons/Diagram-AdvancedDataBinding (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Diagram-Containers (fluent-next.blue.light).png b/apps/demos/testing/etalons/Diagram-Containers (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ef35f2706f56
Binary files /dev/null and b/apps/demos/testing/etalons/Diagram-Containers (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Diagram-CustomShapesWithIcons (fluent-next.blue.light).png b/apps/demos/testing/etalons/Diagram-CustomShapesWithIcons (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b2455e70c619
Binary files /dev/null and b/apps/demos/testing/etalons/Diagram-CustomShapesWithIcons (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Diagram-CustomShapesWithTemplates (fluent-next.blue.light).png b/apps/demos/testing/etalons/Diagram-CustomShapesWithTemplates (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7aa87bb0ddb5
Binary files /dev/null and b/apps/demos/testing/etalons/Diagram-CustomShapesWithTemplates (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Diagram-CustomShapesWithTemplatesWithEditing (fluent-next.blue.light).png b/apps/demos/testing/etalons/Diagram-CustomShapesWithTemplatesWithEditing (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5017f5dc091c
Binary files /dev/null and b/apps/demos/testing/etalons/Diagram-CustomShapesWithTemplatesWithEditing (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Diagram-CustomShapesWithTexts (fluent-next.blue.light).png b/apps/demos/testing/etalons/Diagram-CustomShapesWithTexts (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a582df5576ad
Binary files /dev/null and b/apps/demos/testing/etalons/Diagram-CustomShapesWithTexts (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Diagram-ImagesInShapes (fluent-next.blue.light).png b/apps/demos/testing/etalons/Diagram-ImagesInShapes (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bcf4449cb166
Binary files /dev/null and b/apps/demos/testing/etalons/Diagram-ImagesInShapes (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Diagram-ItemSelection (fluent-next.blue.light).png b/apps/demos/testing/etalons/Diagram-ItemSelection (fluent-next.blue.light).png
new file mode 100644
index 000000000000..304f087ea175
Binary files /dev/null and b/apps/demos/testing/etalons/Diagram-ItemSelection (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Diagram-NodesAndEdgesArrays (fluent-next.blue.light).png b/apps/demos/testing/etalons/Diagram-NodesAndEdgesArrays (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fa355daf2035
Binary files /dev/null and b/apps/demos/testing/etalons/Diagram-NodesAndEdgesArrays (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Diagram-NodesArrayHierarchicalStructure (fluent-next.blue.light).png b/apps/demos/testing/etalons/Diagram-NodesArrayHierarchicalStructure (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4f5a61d014ac
Binary files /dev/null and b/apps/demos/testing/etalons/Diagram-NodesArrayHierarchicalStructure (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Diagram-NodesArrayPlainStructure (fluent-next.blue.light).png b/apps/demos/testing/etalons/Diagram-NodesArrayPlainStructure (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4f5a61d014ac
Binary files /dev/null and b/apps/demos/testing/etalons/Diagram-NodesArrayPlainStructure (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Diagram-OperationRestrictions (fluent-next.blue.light).png b/apps/demos/testing/etalons/Diagram-OperationRestrictions (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e6dd8ddc7512
Binary files /dev/null and b/apps/demos/testing/etalons/Diagram-OperationRestrictions (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Diagram-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/Diagram-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2526b3f3c1d5
Binary files /dev/null and b/apps/demos/testing/etalons/Diagram-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Diagram-ReadOnly (fluent-next.blue.light).png b/apps/demos/testing/etalons/Diagram-ReadOnly (fluent-next.blue.light).png
new file mode 100644
index 000000000000..183aef515643
Binary files /dev/null and b/apps/demos/testing/etalons/Diagram-ReadOnly (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Diagram-SimpleView (fluent-next.blue.light).png b/apps/demos/testing/etalons/Diagram-SimpleView (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fb42ba86b34e
Binary files /dev/null and b/apps/demos/testing/etalons/Diagram-SimpleView (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Diagram-UICustomization (fluent-next.blue.light).png b/apps/demos/testing/etalons/Diagram-UICustomization (fluent-next.blue.light).png
new file mode 100644
index 000000000000..297632f351de
Binary files /dev/null and b/apps/demos/testing/etalons/Diagram-UICustomization (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Diagram-WebAPIService (fluent-next.blue.light).png b/apps/demos/testing/etalons/Diagram-WebAPIService (fluent-next.blue.light).png
new file mode 100644
index 000000000000..77030bc75930
Binary files /dev/null and b/apps/demos/testing/etalons/Diagram-WebAPIService (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Drawer-LeftOrRightPosition (fluent-next.blue.light).png b/apps/demos/testing/etalons/Drawer-LeftOrRightPosition (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9e90fb4fd4f6
Binary files /dev/null and b/apps/demos/testing/etalons/Drawer-LeftOrRightPosition (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Drawer-TopOrBottomPosition (fluent-next.blue.light).png b/apps/demos/testing/etalons/Drawer-TopOrBottomPosition (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e80bea20ceb3
Binary files /dev/null and b/apps/demos/testing/etalons/Drawer-TopOrBottomPosition (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DropDownBox-MultipleSelection (fluent-next.blue.light).png b/apps/demos/testing/etalons/DropDownBox-MultipleSelection (fluent-next.blue.light).png
new file mode 100644
index 000000000000..87c87225956c
Binary files /dev/null and b/apps/demos/testing/etalons/DropDownBox-MultipleSelection (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DropDownBox-SingleSelection (fluent-next.blue.light).png b/apps/demos/testing/etalons/DropDownBox-SingleSelection (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7590b23adb97
Binary files /dev/null and b/apps/demos/testing/etalons/DropDownBox-SingleSelection (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/DropDownButton-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/DropDownButton-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..16f65f7a4664
Binary files /dev/null and b/apps/demos/testing/etalons/DropDownButton-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/FieldSet-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/FieldSet-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8f200fb9a004
Binary files /dev/null and b/apps/demos/testing/etalons/FieldSet-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/FileManager-BindingToEF (fluent-next.blue.light).png b/apps/demos/testing/etalons/FileManager-BindingToEF (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ac083df4f24e
Binary files /dev/null and b/apps/demos/testing/etalons/FileManager-BindingToEF (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/FileManager-BindingToFileSystem (fluent-next.blue.light).png b/apps/demos/testing/etalons/FileManager-BindingToFileSystem (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ef45f3d0b30d
Binary files /dev/null and b/apps/demos/testing/etalons/FileManager-BindingToFileSystem (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/FileManager-BindingToFileSystem (fluent-next.blue.light)_mask.png b/apps/demos/testing/etalons/FileManager-BindingToFileSystem (fluent-next.blue.light)_mask.png
new file mode 100644
index 000000000000..ed73b91ef512
Binary files /dev/null and b/apps/demos/testing/etalons/FileManager-BindingToFileSystem (fluent-next.blue.light)_mask.png differ
diff --git a/apps/demos/testing/etalons/FileManager-BindingToHierarchicalStructure (fluent-next.blue.light).png b/apps/demos/testing/etalons/FileManager-BindingToHierarchicalStructure (fluent-next.blue.light).png
new file mode 100644
index 000000000000..394cc2f28484
Binary files /dev/null and b/apps/demos/testing/etalons/FileManager-BindingToHierarchicalStructure (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/FileManager-BindingToHierarchicalStructure (fluent-next.blue.light)_mask.png b/apps/demos/testing/etalons/FileManager-BindingToHierarchicalStructure (fluent-next.blue.light)_mask.png
new file mode 100644
index 000000000000..e0e1497fa98e
Binary files /dev/null and b/apps/demos/testing/etalons/FileManager-BindingToHierarchicalStructure (fluent-next.blue.light)_mask.png differ
diff --git a/apps/demos/testing/etalons/FileManager-CustomThumbnails (fluent-next.blue.light).png b/apps/demos/testing/etalons/FileManager-CustomThumbnails (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3885dd18bb34
Binary files /dev/null and b/apps/demos/testing/etalons/FileManager-CustomThumbnails (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/FileManager-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/FileManager-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..81f66eff6a94
Binary files /dev/null and b/apps/demos/testing/etalons/FileManager-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/FileManager-UICustomization (fluent-next.blue.light).png b/apps/demos/testing/etalons/FileManager-UICustomization (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ce14fec3ec0c
Binary files /dev/null and b/apps/demos/testing/etalons/FileManager-UICustomization (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/FileManager-UICustomization (fluent-next.blue.light)_mask.png b/apps/demos/testing/etalons/FileManager-UICustomization (fluent-next.blue.light)_mask.png
new file mode 100644
index 000000000000..c54a2c52b1c7
Binary files /dev/null and b/apps/demos/testing/etalons/FileManager-UICustomization (fluent-next.blue.light)_mask.png differ
diff --git a/apps/demos/testing/etalons/FileUploader-ChunkUpload (fluent-next.blue.light).png b/apps/demos/testing/etalons/FileUploader-ChunkUpload (fluent-next.blue.light).png
new file mode 100644
index 000000000000..88f22a8ce21b
Binary files /dev/null and b/apps/demos/testing/etalons/FileUploader-ChunkUpload (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/FileUploader-CustomDropzone (fluent-next.blue.light).png b/apps/demos/testing/etalons/FileUploader-CustomDropzone (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a0a519dda915
Binary files /dev/null and b/apps/demos/testing/etalons/FileUploader-CustomDropzone (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/FileUploader-FileSelection (fluent-next.blue.light).png b/apps/demos/testing/etalons/FileUploader-FileSelection (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0eb64746de45
Binary files /dev/null and b/apps/demos/testing/etalons/FileUploader-FileSelection (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/FileUploader-FileUploading (fluent-next.blue.light).png b/apps/demos/testing/etalons/FileUploader-FileUploading (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3741cbe222d6
Binary files /dev/null and b/apps/demos/testing/etalons/FileUploader-FileUploading (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/FileUploader-Validation (fluent-next.blue.light).png b/apps/demos/testing/etalons/FileUploader-Validation (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1c40d2705367
Binary files /dev/null and b/apps/demos/testing/etalons/FileUploader-Validation (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/FilterBuilder-Customization (fluent-next.blue.light).png b/apps/demos/testing/etalons/FilterBuilder-Customization (fluent-next.blue.light).png
new file mode 100644
index 000000000000..252d711924d9
Binary files /dev/null and b/apps/demos/testing/etalons/FilterBuilder-Customization (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/FilterBuilder-WithDataGrid (fluent-next.blue.light).png b/apps/demos/testing/etalons/FilterBuilder-WithDataGrid (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5bef23b7c5f6
Binary files /dev/null and b/apps/demos/testing/etalons/FilterBuilder-WithDataGrid (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/FilterBuilder-WithList (fluent-next.blue.light).png b/apps/demos/testing/etalons/FilterBuilder-WithList (fluent-next.blue.light).png
new file mode 100644
index 000000000000..139eb18b3950
Binary files /dev/null and b/apps/demos/testing/etalons/FilterBuilder-WithList (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/FloatingActionButton-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/FloatingActionButton-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f74b73c080c1
Binary files /dev/null and b/apps/demos/testing/etalons/FloatingActionButton-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Form-Adaptability (fluent-next.blue.light).png b/apps/demos/testing/etalons/Form-Adaptability (fluent-next.blue.light).png
new file mode 100644
index 000000000000..49177d14c221
Binary files /dev/null and b/apps/demos/testing/etalons/Form-Adaptability (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Form-Grouping (fluent-next.blue.light).png b/apps/demos/testing/etalons/Form-Grouping (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0be9188fd6ef
Binary files /dev/null and b/apps/demos/testing/etalons/Form-Grouping (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Form-ItemCustomization (fluent-next.blue.light).png b/apps/demos/testing/etalons/Form-ItemCustomization (fluent-next.blue.light).png
new file mode 100644
index 000000000000..82d550947d3d
Binary files /dev/null and b/apps/demos/testing/etalons/Form-ItemCustomization (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Form-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/Form-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b492614dba3e
Binary files /dev/null and b/apps/demos/testing/etalons/Form-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Form-SmartPaste (fluent-next.blue.light).png b/apps/demos/testing/etalons/Form-SmartPaste (fluent-next.blue.light).png
new file mode 100644
index 000000000000..94432a4b502e
Binary files /dev/null and b/apps/demos/testing/etalons/Form-SmartPaste (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Form-UpdateItemsDynamically (fluent-next.blue.light).png b/apps/demos/testing/etalons/Form-UpdateItemsDynamically (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a59bc87d37a4
Binary files /dev/null and b/apps/demos/testing/etalons/Form-UpdateItemsDynamically (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Form-Validation (fluent-next.blue.light).png b/apps/demos/testing/etalons/Form-Validation (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d4098c0a9bf1
Binary files /dev/null and b/apps/demos/testing/etalons/Form-Validation (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gallery-Item3RdPartyEngineTemplate (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gallery-Item3RdPartyEngineTemplate (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e15bbe354b69
Binary files /dev/null and b/apps/demos/testing/etalons/Gallery-Item3RdPartyEngineTemplate (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gallery-ItemTemplate (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gallery-ItemTemplate (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c20559438f0a
Binary files /dev/null and b/apps/demos/testing/etalons/Gallery-ItemTemplate (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gallery-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gallery-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6ba8a3927a37
Binary files /dev/null and b/apps/demos/testing/etalons/Gallery-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gantt-Appearance (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gantt-Appearance (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9caf053788d9
Binary files /dev/null and b/apps/demos/testing/etalons/Gantt-Appearance (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gantt-ContextMenu (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gantt-ContextMenu (fluent-next.blue.light).png
new file mode 100644
index 000000000000..64ed017cdecc
Binary files /dev/null and b/apps/demos/testing/etalons/Gantt-ContextMenu (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gantt-DataBinding (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gantt-DataBinding (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f4d934b0ddc9
Binary files /dev/null and b/apps/demos/testing/etalons/Gantt-DataBinding (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gantt-ExportToPDF (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gantt-ExportToPDF (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9ac1467e89ca
Binary files /dev/null and b/apps/demos/testing/etalons/Gantt-ExportToPDF (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gantt-FilterRow (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gantt-FilterRow (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bfd590cec05e
Binary files /dev/null and b/apps/demos/testing/etalons/Gantt-FilterRow (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gantt-HeaderFilter (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gantt-HeaderFilter (fluent-next.blue.light).png
new file mode 100644
index 000000000000..540da3a10130
Binary files /dev/null and b/apps/demos/testing/etalons/Gantt-HeaderFilter (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gantt-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gantt-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d858404bc98a
Binary files /dev/null and b/apps/demos/testing/etalons/Gantt-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gantt-Sorting (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gantt-Sorting (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ae0d8c8f2fa1
Binary files /dev/null and b/apps/demos/testing/etalons/Gantt-Sorting (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gantt-StripLines (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gantt-StripLines (fluent-next.blue.light).png
new file mode 100644
index 000000000000..822aa8ce6adc
Binary files /dev/null and b/apps/demos/testing/etalons/Gantt-StripLines (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gantt-TaskTemplate (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gantt-TaskTemplate (fluent-next.blue.light).png
new file mode 100644
index 000000000000..75b12465ad08
Binary files /dev/null and b/apps/demos/testing/etalons/Gantt-TaskTemplate (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gantt-Toolbar (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gantt-Toolbar (fluent-next.blue.light).png
new file mode 100644
index 000000000000..061267ce184b
Binary files /dev/null and b/apps/demos/testing/etalons/Gantt-Toolbar (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gantt-Validation (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gantt-Validation (fluent-next.blue.light).png
new file mode 100644
index 000000000000..afd7ddda4beb
Binary files /dev/null and b/apps/demos/testing/etalons/Gantt-Validation (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-AnglesCustomization (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gauges-AnglesCustomization (fluent-next.blue.light).png
new file mode 100644
index 000000000000..da049acdf560
Binary files /dev/null and b/apps/demos/testing/etalons/Gauges-AnglesCustomization (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-BarGauge (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gauges-BarGauge (fluent-next.blue.light).png
new file mode 100644
index 000000000000..acbe2c93d7aa
Binary files /dev/null and b/apps/demos/testing/etalons/Gauges-BarGauge (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-CircularGauge (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gauges-CircularGauge (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1067b0b1c93e
Binary files /dev/null and b/apps/demos/testing/etalons/Gauges-CircularGauge (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-CustomLayout (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gauges-CustomLayout (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7bd99bf654c6
Binary files /dev/null and b/apps/demos/testing/etalons/Gauges-CustomLayout (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-CustomLayoutLinearGauge (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gauges-CustomLayoutLinearGauge (fluent-next.blue.light).png
new file mode 100644
index 000000000000..002daf0c28e2
Binary files /dev/null and b/apps/demos/testing/etalons/Gauges-CustomLayoutLinearGauge (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-DifferentSubvalueIndicatorTypes (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gauges-DifferentSubvalueIndicatorTypes (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c649afc7eb4e
Binary files /dev/null and b/apps/demos/testing/etalons/Gauges-DifferentSubvalueIndicatorTypes (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-DifferentSubvalueIndicatorTypesLinearGauge (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gauges-DifferentSubvalueIndicatorTypesLinearGauge (fluent-next.blue.light).png
new file mode 100644
index 000000000000..05dc6ac78636
Binary files /dev/null and b/apps/demos/testing/etalons/Gauges-DifferentSubvalueIndicatorTypesLinearGauge (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-DifferentValueIndicatorTypes (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gauges-DifferentValueIndicatorTypes (fluent-next.blue.light).png
new file mode 100644
index 000000000000..86dd0457fa9f
Binary files /dev/null and b/apps/demos/testing/etalons/Gauges-DifferentValueIndicatorTypes (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-DifferentValueIndicatorTypesLinearGauge (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gauges-DifferentValueIndicatorTypesLinearGauge (fluent-next.blue.light).png
new file mode 100644
index 000000000000..481eea795dd1
Binary files /dev/null and b/apps/demos/testing/etalons/Gauges-DifferentValueIndicatorTypesLinearGauge (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-GaugeTitleCustomized (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gauges-GaugeTitleCustomized (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fa99e10b04f1
Binary files /dev/null and b/apps/demos/testing/etalons/Gauges-GaugeTitleCustomized (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-GaugeTooltip (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gauges-GaugeTooltip (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c978cf0ba747
Binary files /dev/null and b/apps/demos/testing/etalons/Gauges-GaugeTooltip (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-LabelsCustomization (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gauges-LabelsCustomization (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e668148839b9
Binary files /dev/null and b/apps/demos/testing/etalons/Gauges-LabelsCustomization (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-LinearGauge (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gauges-LinearGauge (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3653543e3710
Binary files /dev/null and b/apps/demos/testing/etalons/Gauges-LinearGauge (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gauges-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4b427dc15c21
Binary files /dev/null and b/apps/demos/testing/etalons/Gauges-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-Palette (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gauges-Palette (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b378ef2bde2b
Binary files /dev/null and b/apps/demos/testing/etalons/Gauges-Palette (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-PaletteForRanges (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gauges-PaletteForRanges (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7f9154baece2
Binary files /dev/null and b/apps/demos/testing/etalons/Gauges-PaletteForRanges (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-RangeBarBaseValue (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gauges-RangeBarBaseValue (fluent-next.blue.light).png
new file mode 100644
index 000000000000..80fe19000db1
Binary files /dev/null and b/apps/demos/testing/etalons/Gauges-RangeBarBaseValue (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-ScaleCustomTickInterval (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gauges-ScaleCustomTickInterval (fluent-next.blue.light).png
new file mode 100644
index 000000000000..37b88e61296c
Binary files /dev/null and b/apps/demos/testing/etalons/Gauges-ScaleCustomTickInterval (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-ScaleCustomTickValues (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gauges-ScaleCustomTickValues (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c0601c006ffa
Binary files /dev/null and b/apps/demos/testing/etalons/Gauges-ScaleCustomTickValues (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-ScaleLabelFormatting (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gauges-ScaleLabelFormatting (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ff6c6ea5cd88
Binary files /dev/null and b/apps/demos/testing/etalons/Gauges-ScaleLabelFormatting (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-ScaleMinorTicks (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gauges-ScaleMinorTicks (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6d4f4c0eb61c
Binary files /dev/null and b/apps/demos/testing/etalons/Gauges-ScaleMinorTicks (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-SubvalueIndicatorTextFormatting (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gauges-SubvalueIndicatorTextFormatting (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9814e7f876a1
Binary files /dev/null and b/apps/demos/testing/etalons/Gauges-SubvalueIndicatorTextFormatting (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-SubvalueIndicatorsRuntimeCustomization (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gauges-SubvalueIndicatorsRuntimeCustomization (fluent-next.blue.light).png
new file mode 100644
index 000000000000..da36f45f05a7
Binary files /dev/null and b/apps/demos/testing/etalons/Gauges-SubvalueIndicatorsRuntimeCustomization (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-Tooltip (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gauges-Tooltip (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1a0c945a9c74
Binary files /dev/null and b/apps/demos/testing/etalons/Gauges-Tooltip (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-ValueIndicatorsAPI (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gauges-ValueIndicatorsAPI (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9b479fc4d874
Binary files /dev/null and b/apps/demos/testing/etalons/Gauges-ValueIndicatorsAPI (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Gauges-VariableNumberOfBars (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gauges-VariableNumberOfBars (fluent-next.blue.light).png
new file mode 100644
index 000000000000..213439396723
Binary files /dev/null and b/apps/demos/testing/etalons/Gauges-VariableNumberOfBars (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/HtmlEditor-AITextEditing (fluent-next.blue.light).png b/apps/demos/testing/etalons/HtmlEditor-AITextEditing (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d0d599b5d7d4
Binary files /dev/null and b/apps/demos/testing/etalons/HtmlEditor-AITextEditing (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/HtmlEditor-MarkdownSupport (fluent-next.blue.light).png b/apps/demos/testing/etalons/HtmlEditor-MarkdownSupport (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6e4f141cdba1
Binary files /dev/null and b/apps/demos/testing/etalons/HtmlEditor-MarkdownSupport (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/HtmlEditor-Mentions (fluent-next.blue.light).png b/apps/demos/testing/etalons/HtmlEditor-Mentions (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9ff1ed5c68af
Binary files /dev/null and b/apps/demos/testing/etalons/HtmlEditor-Mentions (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/HtmlEditor-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/HtmlEditor-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ed45b9003c76
Binary files /dev/null and b/apps/demos/testing/etalons/HtmlEditor-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/HtmlEditor-Tables (fluent-next.blue.light).png b/apps/demos/testing/etalons/HtmlEditor-Tables (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fceeabd9e193
Binary files /dev/null and b/apps/demos/testing/etalons/HtmlEditor-Tables (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/HtmlEditor-ToolbarCustomization (fluent-next.blue.light).png b/apps/demos/testing/etalons/HtmlEditor-ToolbarCustomization (fluent-next.blue.light).png
new file mode 100644
index 000000000000..adcf07add4b6
Binary files /dev/null and b/apps/demos/testing/etalons/HtmlEditor-ToolbarCustomization (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/List after change selectionMode to single (fluent.blue.light).png b/apps/demos/testing/etalons/List after change selectionMode to single (fluent.blue.light).png
deleted file mode 100644
index 60b75cf0dc90..000000000000
Binary files a/apps/demos/testing/etalons/List after change selectionMode to single (fluent.blue.light).png and /dev/null differ
diff --git a/apps/demos/testing/etalons/List-DragAndDrop (fluent-next.blue.light).png b/apps/demos/testing/etalons/List-DragAndDrop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..72da4c08f095
Binary files /dev/null and b/apps/demos/testing/etalons/List-DragAndDrop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/List-Grouping (fluent-next.blue.light).png b/apps/demos/testing/etalons/List-Grouping (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2e9fba96cf76
Binary files /dev/null and b/apps/demos/testing/etalons/List-Grouping (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/List-Item3RdPartyEngineTemplate (fluent-next.blue.light).png b/apps/demos/testing/etalons/List-Item3RdPartyEngineTemplate (fluent-next.blue.light).png
new file mode 100644
index 000000000000..40ada22a2f61
Binary files /dev/null and b/apps/demos/testing/etalons/List-Item3RdPartyEngineTemplate (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/List-ItemDeletion (fluent-next.blue.light).png b/apps/demos/testing/etalons/List-ItemDeletion (fluent-next.blue.light).png
new file mode 100644
index 000000000000..abb2f3348bf3
Binary files /dev/null and b/apps/demos/testing/etalons/List-ItemDeletion (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/List-ItemTemplate (fluent-next.blue.light).png b/apps/demos/testing/etalons/List-ItemTemplate (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7db9f2d593be
Binary files /dev/null and b/apps/demos/testing/etalons/List-ItemTemplate (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/List-Search (fluent-next.blue.light).png b/apps/demos/testing/etalons/List-Search (fluent-next.blue.light).png
new file mode 100644
index 000000000000..71b5a2659ab3
Binary files /dev/null and b/apps/demos/testing/etalons/List-Search (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/List-Selection (fluent-next.blue.light).png b/apps/demos/testing/etalons/List-Selection (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c089144206bb
Binary files /dev/null and b/apps/demos/testing/etalons/List-Selection (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/List-WebAPI (fluent-next.blue.light).png b/apps/demos/testing/etalons/List-WebAPI (fluent-next.blue.light).png
new file mode 100644
index 000000000000..289f4e9dcfb5
Binary files /dev/null and b/apps/demos/testing/etalons/List-WebAPI (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/LoadIndicator-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/LoadIndicator-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..eea7d4e2c3d6
Binary files /dev/null and b/apps/demos/testing/etalons/LoadIndicator-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/LoadPanel-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/LoadPanel-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..47a40c934076
Binary files /dev/null and b/apps/demos/testing/etalons/LoadPanel-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Localization-UsingGlobalize (fluent-next.blue.light).png b/apps/demos/testing/etalons/Localization-UsingGlobalize (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e43593b00f5a
Binary files /dev/null and b/apps/demos/testing/etalons/Localization-UsingGlobalize (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Localization-UsingIntl (fluent-next.blue.light).png b/apps/demos/testing/etalons/Localization-UsingIntl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e43593b00f5a
Binary files /dev/null and b/apps/demos/testing/etalons/Localization-UsingIntl (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Lookup-Basics (fluent-next.blue.light).png b/apps/demos/testing/etalons/Lookup-Basics (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0f161ec02a4c
Binary files /dev/null and b/apps/demos/testing/etalons/Lookup-Basics (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Lookup-EventHandling (fluent-next.blue.light).png b/apps/demos/testing/etalons/Lookup-EventHandling (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a38fd424d5b2
Binary files /dev/null and b/apps/demos/testing/etalons/Lookup-EventHandling (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Lookup-Templates (fluent-next.blue.light).png b/apps/demos/testing/etalons/Lookup-Templates (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cd243445b557
Binary files /dev/null and b/apps/demos/testing/etalons/Lookup-Templates (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Menu-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/Menu-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..29a3ead281a8
Binary files /dev/null and b/apps/demos/testing/etalons/Menu-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Menu-Scrolling (fluent-next.blue.light).png b/apps/demos/testing/etalons/Menu-Scrolling (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0edb6f415d86
Binary files /dev/null and b/apps/demos/testing/etalons/Menu-Scrolling (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/MultiView-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/MultiView-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f139e3a4fd3d
Binary files /dev/null and b/apps/demos/testing/etalons/MultiView-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/NumberBox-Formatting (fluent-next.blue.light).png b/apps/demos/testing/etalons/NumberBox-Formatting (fluent-next.blue.light).png
new file mode 100644
index 000000000000..61d0bba03534
Binary files /dev/null and b/apps/demos/testing/etalons/NumberBox-Formatting (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/NumberBox-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/NumberBox-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2c97c0369148
Binary files /dev/null and b/apps/demos/testing/etalons/NumberBox-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Pagination-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/Pagination-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8abd998b055c
Binary files /dev/null and b/apps/demos/testing/etalons/Pagination-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/PivotGrid-ChartIntegration (fluent-next.blue.light).png b/apps/demos/testing/etalons/PivotGrid-ChartIntegration (fluent-next.blue.light).png
new file mode 100644
index 000000000000..109f73c17fb7
Binary files /dev/null and b/apps/demos/testing/etalons/PivotGrid-ChartIntegration (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/PivotGrid-Customization (fluent-next.blue.light).png b/apps/demos/testing/etalons/PivotGrid-Customization (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8cedc3850957
Binary files /dev/null and b/apps/demos/testing/etalons/PivotGrid-Customization (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/PivotGrid-DrillDown (fluent-next.blue.light).png b/apps/demos/testing/etalons/PivotGrid-DrillDown (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f235cc22f374
Binary files /dev/null and b/apps/demos/testing/etalons/PivotGrid-DrillDown (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/PivotGrid-ExcelJSCellCustomization (fluent-next.blue.light).png b/apps/demos/testing/etalons/PivotGrid-ExcelJSCellCustomization (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8ce4669742ca
Binary files /dev/null and b/apps/demos/testing/etalons/PivotGrid-ExcelJSCellCustomization (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/PivotGrid-ExcelJSOverview (fluent-next.blue.light).png b/apps/demos/testing/etalons/PivotGrid-ExcelJSOverview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..538ab431316a
Binary files /dev/null and b/apps/demos/testing/etalons/PivotGrid-ExcelJSOverview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/PivotGrid-ExcelJsHeaderAndFooter (fluent-next.blue.light).png b/apps/demos/testing/etalons/PivotGrid-ExcelJsHeaderAndFooter (fluent-next.blue.light).png
new file mode 100644
index 000000000000..347367e21e1a
Binary files /dev/null and b/apps/demos/testing/etalons/PivotGrid-ExcelJsHeaderAndFooter (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/PivotGrid-FieldPanel (fluent-next.blue.light).png b/apps/demos/testing/etalons/PivotGrid-FieldPanel (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ff3f12469d48
Binary files /dev/null and b/apps/demos/testing/etalons/PivotGrid-FieldPanel (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/PivotGrid-Filtering (fluent-next.blue.light).png b/apps/demos/testing/etalons/PivotGrid-Filtering (fluent-next.blue.light).png
new file mode 100644
index 000000000000..da3dfbf549e2
Binary files /dev/null and b/apps/demos/testing/etalons/PivotGrid-Filtering (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/PivotGrid-IntegratedFieldChooser (fluent-next.blue.light).png b/apps/demos/testing/etalons/PivotGrid-IntegratedFieldChooser (fluent-next.blue.light).png
new file mode 100644
index 000000000000..85c067ab2e97
Binary files /dev/null and b/apps/demos/testing/etalons/PivotGrid-IntegratedFieldChooser (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/PivotGrid-OLAPDataSource (fluent-next.blue.light).png b/apps/demos/testing/etalons/PivotGrid-OLAPDataSource (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c05843933497
Binary files /dev/null and b/apps/demos/testing/etalons/PivotGrid-OLAPDataSource (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/PivotGrid-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/PivotGrid-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..41a93749099d
Binary files /dev/null and b/apps/demos/testing/etalons/PivotGrid-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/PivotGrid-RemoteVirtualScrolling (fluent-next.blue.light).png b/apps/demos/testing/etalons/PivotGrid-RemoteVirtualScrolling (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d04ef804bf1a
Binary files /dev/null and b/apps/demos/testing/etalons/PivotGrid-RemoteVirtualScrolling (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/PivotGrid-RunningTotals (fluent-next.blue.light).png b/apps/demos/testing/etalons/PivotGrid-RunningTotals (fluent-next.blue.light).png
new file mode 100644
index 000000000000..12bd606d2bf1
Binary files /dev/null and b/apps/demos/testing/etalons/PivotGrid-RunningTotals (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/PivotGrid-SimpleArray (fluent-next.blue.light).png b/apps/demos/testing/etalons/PivotGrid-SimpleArray (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c7b267ea063f
Binary files /dev/null and b/apps/demos/testing/etalons/PivotGrid-SimpleArray (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/PivotGrid-StandaloneFieldChooser (fluent-next.blue.light).png b/apps/demos/testing/etalons/PivotGrid-StandaloneFieldChooser (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bf4f9e3e0721
Binary files /dev/null and b/apps/demos/testing/etalons/PivotGrid-StandaloneFieldChooser (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/PivotGrid-StatePersistence (fluent-next.blue.light).png b/apps/demos/testing/etalons/PivotGrid-StatePersistence (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fbf46cb18b80
Binary files /dev/null and b/apps/demos/testing/etalons/PivotGrid-StatePersistence (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/PivotGrid-SummaryDisplayModes (fluent-next.blue.light).png b/apps/demos/testing/etalons/PivotGrid-SummaryDisplayModes (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d559461e7d2a
Binary files /dev/null and b/apps/demos/testing/etalons/PivotGrid-SummaryDisplayModes (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/PivotGrid-VirtualScrolling (fluent-next.blue.light).png b/apps/demos/testing/etalons/PivotGrid-VirtualScrolling (fluent-next.blue.light).png
new file mode 100644
index 000000000000..04cc661b2794
Binary files /dev/null and b/apps/demos/testing/etalons/PivotGrid-VirtualScrolling (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Popover-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/Popover-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..862a79f9a4c7
Binary files /dev/null and b/apps/demos/testing/etalons/Popover-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Popup-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/Popup-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..83fa0bdc46cf
Binary files /dev/null and b/apps/demos/testing/etalons/Popup-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Popup-Scrolling (fluent-next.blue.light).png b/apps/demos/testing/etalons/Popup-Scrolling (fluent-next.blue.light).png
new file mode 100644
index 000000000000..950df150e93f
Binary files /dev/null and b/apps/demos/testing/etalons/Popup-Scrolling (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/ProgressBar-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/ProgressBar-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..18ea7d27bb11
Binary files /dev/null and b/apps/demos/testing/etalons/ProgressBar-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/RadioGroup-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/RadioGroup-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4bacfff61cae
Binary files /dev/null and b/apps/demos/testing/etalons/RadioGroup-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/RangeSelector-BackgroundImage (fluent-next.blue.light).png b/apps/demos/testing/etalons/RangeSelector-BackgroundImage (fluent-next.blue.light).png
new file mode 100644
index 000000000000..93565a2b2d6d
Binary files /dev/null and b/apps/demos/testing/etalons/RangeSelector-BackgroundImage (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/RangeSelector-Calculation (fluent-next.blue.light).png b/apps/demos/testing/etalons/RangeSelector-Calculation (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5792b374bf1d
Binary files /dev/null and b/apps/demos/testing/etalons/RangeSelector-Calculation (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/RangeSelector-CustomFormatting (fluent-next.blue.light).png b/apps/demos/testing/etalons/RangeSelector-CustomFormatting (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c9c5a7661f11
Binary files /dev/null and b/apps/demos/testing/etalons/RangeSelector-CustomFormatting (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/RangeSelector-DateTimeScale (fluent-next.blue.light).png b/apps/demos/testing/etalons/RangeSelector-DateTimeScale (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4fff44017d18
Binary files /dev/null and b/apps/demos/testing/etalons/RangeSelector-DateTimeScale (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/RangeSelector-DateTimeScaleLightweight (fluent-next.blue.light).png b/apps/demos/testing/etalons/RangeSelector-DateTimeScaleLightweight (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b9659e932ec8
Binary files /dev/null and b/apps/demos/testing/etalons/RangeSelector-DateTimeScaleLightweight (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/RangeSelector-DiscreteScale (fluent-next.blue.light).png b/apps/demos/testing/etalons/RangeSelector-DiscreteScale (fluent-next.blue.light).png
new file mode 100644
index 000000000000..005ddee4b228
Binary files /dev/null and b/apps/demos/testing/etalons/RangeSelector-DiscreteScale (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/RangeSelector-EmbeddedChart (fluent-next.blue.light).png b/apps/demos/testing/etalons/RangeSelector-EmbeddedChart (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2fcce1eea097
Binary files /dev/null and b/apps/demos/testing/etalons/RangeSelector-EmbeddedChart (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/RangeSelector-EmbeddedChartCustomized (fluent-next.blue.light).png b/apps/demos/testing/etalons/RangeSelector-EmbeddedChartCustomized (fluent-next.blue.light).png
new file mode 100644
index 000000000000..06b0156a7af7
Binary files /dev/null and b/apps/demos/testing/etalons/RangeSelector-EmbeddedChartCustomized (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/RangeSelector-EmbeddedChartSeriesTemplate (fluent-next.blue.light).png b/apps/demos/testing/etalons/RangeSelector-EmbeddedChartSeriesTemplate (fluent-next.blue.light).png
new file mode 100644
index 000000000000..50626c282685
Binary files /dev/null and b/apps/demos/testing/etalons/RangeSelector-EmbeddedChartSeriesTemplate (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/RangeSelector-Filter (fluent-next.blue.light).png b/apps/demos/testing/etalons/RangeSelector-Filter (fluent-next.blue.light).png
new file mode 100644
index 000000000000..409da505537e
Binary files /dev/null and b/apps/demos/testing/etalons/RangeSelector-Filter (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/RangeSelector-LogarithmicScale (fluent-next.blue.light).png b/apps/demos/testing/etalons/RangeSelector-LogarithmicScale (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5f63d42ac86f
Binary files /dev/null and b/apps/demos/testing/etalons/RangeSelector-LogarithmicScale (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/RangeSelector-NumericScale (fluent-next.blue.light).png b/apps/demos/testing/etalons/RangeSelector-NumericScale (fluent-next.blue.light).png
new file mode 100644
index 000000000000..32b8636da11b
Binary files /dev/null and b/apps/demos/testing/etalons/RangeSelector-NumericScale (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/RangeSelector-NumericScaleLightweight (fluent-next.blue.light).png b/apps/demos/testing/etalons/RangeSelector-NumericScaleLightweight (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3d0d219d4a16
Binary files /dev/null and b/apps/demos/testing/etalons/RangeSelector-NumericScaleLightweight (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/RangeSlider-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/RangeSlider-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..91391c1157fa
Binary files /dev/null and b/apps/demos/testing/etalons/RangeSlider-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Resizable-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/Resizable-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..29a413a83d36
Binary files /dev/null and b/apps/demos/testing/etalons/Resizable-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/ResponsiveBox-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/ResponsiveBox-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c5590a9eba7a
Binary files /dev/null and b/apps/demos/testing/etalons/ResponsiveBox-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-Adaptability (fluent-next.blue.light).png b/apps/demos/testing/etalons/Scheduler-Adaptability (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d0c828604588
Binary files /dev/null and b/apps/demos/testing/etalons/Scheduler-Adaptability (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-Agenda (fluent-next.blue.light).png b/apps/demos/testing/etalons/Scheduler-Agenda (fluent-next.blue.light).png
new file mode 100644
index 000000000000..098e38c3651d
Binary files /dev/null and b/apps/demos/testing/etalons/Scheduler-Agenda (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-AllDayPanelMode (fluent-next.blue.light).png b/apps/demos/testing/etalons/Scheduler-AllDayPanelMode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..370ed935ffb3
Binary files /dev/null and b/apps/demos/testing/etalons/Scheduler-AllDayPanelMode (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-AppointmentCountPerCell (fluent-next.blue.light).png b/apps/demos/testing/etalons/Scheduler-AppointmentCountPerCell (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0191c89ff079
Binary files /dev/null and b/apps/demos/testing/etalons/Scheduler-AppointmentCountPerCell (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-BasicViews (fluent-next.blue.light).png b/apps/demos/testing/etalons/Scheduler-BasicViews (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7adbc9ab44ac
Binary files /dev/null and b/apps/demos/testing/etalons/Scheduler-BasicViews (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-CellTemplates (fluent-next.blue.light).png b/apps/demos/testing/etalons/Scheduler-CellTemplates (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7530c8c45ea8
Binary files /dev/null and b/apps/demos/testing/etalons/Scheduler-CellTemplates (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-ContextMenu (fluent-next.blue.light).png b/apps/demos/testing/etalons/Scheduler-ContextMenu (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7a37c71a542e
Binary files /dev/null and b/apps/demos/testing/etalons/Scheduler-ContextMenu (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-CreateFromSelection (fluent-next.blue.light).png b/apps/demos/testing/etalons/Scheduler-CreateFromSelection (fluent-next.blue.light).png
new file mode 100644
index 000000000000..650b696740db
Binary files /dev/null and b/apps/demos/testing/etalons/Scheduler-CreateFromSelection (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-CurrentTimeIndicator (fluent-next.blue.light).png b/apps/demos/testing/etalons/Scheduler-CurrentTimeIndicator (fluent-next.blue.light).png
new file mode 100644
index 000000000000..52df0c0650ab
Binary files /dev/null and b/apps/demos/testing/etalons/Scheduler-CurrentTimeIndicator (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-CustomViewDuration (fluent-next.blue.light).png b/apps/demos/testing/etalons/Scheduler-CustomViewDuration (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dd9ae8b6e3ca
Binary files /dev/null and b/apps/demos/testing/etalons/Scheduler-CustomViewDuration (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-DragAndDrop (fluent-next.blue.light).png b/apps/demos/testing/etalons/Scheduler-DragAndDrop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fb4ce25b6f11
Binary files /dev/null and b/apps/demos/testing/etalons/Scheduler-DragAndDrop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-Editing (fluent-next.blue.light).png b/apps/demos/testing/etalons/Scheduler-Editing (fluent-next.blue.light).png
new file mode 100644
index 000000000000..437ca3c2d894
Binary files /dev/null and b/apps/demos/testing/etalons/Scheduler-Editing (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-GoogleCalendarIntegration (fluent-next.blue.light).png b/apps/demos/testing/etalons/Scheduler-GoogleCalendarIntegration (fluent-next.blue.light).png
new file mode 100644
index 000000000000..214bca722f11
Binary files /dev/null and b/apps/demos/testing/etalons/Scheduler-GoogleCalendarIntegration (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-GroupByDate (fluent-next.blue.light).png b/apps/demos/testing/etalons/Scheduler-GroupByDate (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f307ebb682cd
Binary files /dev/null and b/apps/demos/testing/etalons/Scheduler-GroupByDate (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-GroupingByResources (fluent-next.blue.light).png b/apps/demos/testing/etalons/Scheduler-GroupingByResources (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8caab84f3ee6
Binary files /dev/null and b/apps/demos/testing/etalons/Scheduler-GroupingByResources (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-HiddenDays (fluent-next.blue.light).png b/apps/demos/testing/etalons/Scheduler-HiddenDays (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7115f75cf8a1
Binary files /dev/null and b/apps/demos/testing/etalons/Scheduler-HiddenDays (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-IndividualViewsCustomization (fluent-next.blue.light).png b/apps/demos/testing/etalons/Scheduler-IndividualViewsCustomization (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6635cf180c0a
Binary files /dev/null and b/apps/demos/testing/etalons/Scheduler-IndividualViewsCustomization (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/Scheduler-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..207866b937a4
Binary files /dev/null and b/apps/demos/testing/etalons/Scheduler-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-RecurringAppointments (fluent-next.blue.light).png b/apps/demos/testing/etalons/Scheduler-RecurringAppointments (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7a37c71a542e
Binary files /dev/null and b/apps/demos/testing/etalons/Scheduler-RecurringAppointments (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-ResolveTimeConflicts (fluent-next.blue.light).png b/apps/demos/testing/etalons/Scheduler-ResolveTimeConflicts (fluent-next.blue.light).png
new file mode 100644
index 000000000000..52216ceeabe4
Binary files /dev/null and b/apps/demos/testing/etalons/Scheduler-ResolveTimeConflicts (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-Resources (fluent-next.blue.light).png b/apps/demos/testing/etalons/Scheduler-Resources (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4b15a2d950a5
Binary files /dev/null and b/apps/demos/testing/etalons/Scheduler-Resources (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-SignalRService (fluent-next.blue.light).png b/apps/demos/testing/etalons/Scheduler-SignalRService (fluent-next.blue.light).png
new file mode 100644
index 000000000000..056a6f061029
Binary files /dev/null and b/apps/demos/testing/etalons/Scheduler-SignalRService (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-SimpleArray (fluent-next.blue.light).png b/apps/demos/testing/etalons/Scheduler-SimpleArray (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9a8b5e0cdecf
Binary files /dev/null and b/apps/demos/testing/etalons/Scheduler-SimpleArray (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-Templates (fluent-next.blue.light).png b/apps/demos/testing/etalons/Scheduler-Templates (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ab7cfb741ebb
Binary files /dev/null and b/apps/demos/testing/etalons/Scheduler-Templates (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-TimeZonesSupport (fluent-next.blue.light).png b/apps/demos/testing/etalons/Scheduler-TimeZonesSupport (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bad398d1b84d
Binary files /dev/null and b/apps/demos/testing/etalons/Scheduler-TimeZonesSupport (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-Timelines (fluent-next.blue.light).png b/apps/demos/testing/etalons/Scheduler-Timelines (fluent-next.blue.light).png
new file mode 100644
index 000000000000..052a0aaee604
Binary files /dev/null and b/apps/demos/testing/etalons/Scheduler-Timelines (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-Toolbar (fluent-next.blue.light).png b/apps/demos/testing/etalons/Scheduler-Toolbar (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0c4c334ce7e8
Binary files /dev/null and b/apps/demos/testing/etalons/Scheduler-Toolbar (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-VirtualScrolling (fluent-next.blue.light).png b/apps/demos/testing/etalons/Scheduler-VirtualScrolling (fluent-next.blue.light).png
new file mode 100644
index 000000000000..825939f77549
Binary files /dev/null and b/apps/demos/testing/etalons/Scheduler-VirtualScrolling (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-WebAPIService (fluent-next.blue.light).png b/apps/demos/testing/etalons/Scheduler-WebAPIService (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f7b79950de96
Binary files /dev/null and b/apps/demos/testing/etalons/Scheduler-WebAPIService (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-WorkShifts (fluent-next.blue.light).png b/apps/demos/testing/etalons/Scheduler-WorkShifts (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3c3b57a138b0
Binary files /dev/null and b/apps/demos/testing/etalons/Scheduler-WorkShifts (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/ScrollView-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/ScrollView-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f1ede91fcd8b
Binary files /dev/null and b/apps/demos/testing/etalons/ScrollView-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/SelectBox-CustomizeDropDownButton (fluent-next.blue.light).png b/apps/demos/testing/etalons/SelectBox-CustomizeDropDownButton (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ecfd64352fd2
Binary files /dev/null and b/apps/demos/testing/etalons/SelectBox-CustomizeDropDownButton (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/SelectBox-Grouping (fluent-next.blue.light).png b/apps/demos/testing/etalons/SelectBox-Grouping (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c4939a331c35
Binary files /dev/null and b/apps/demos/testing/etalons/SelectBox-Grouping (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/SelectBox-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/SelectBox-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6cf938567c97
Binary files /dev/null and b/apps/demos/testing/etalons/SelectBox-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/SelectBox-SearchAndEditing (fluent-next.blue.light).png b/apps/demos/testing/etalons/SelectBox-SearchAndEditing (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f51a4fe9305b
Binary files /dev/null and b/apps/demos/testing/etalons/SelectBox-SearchAndEditing (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Slider-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/Slider-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7bc14033cc0b
Binary files /dev/null and b/apps/demos/testing/etalons/Slider-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Sortable-Customization (fluent-next.blue.light).png b/apps/demos/testing/etalons/Sortable-Customization (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6915e8a15613
Binary files /dev/null and b/apps/demos/testing/etalons/Sortable-Customization (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Sortable-Kanban (fluent-next.blue.light).png b/apps/demos/testing/etalons/Sortable-Kanban (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6d2a63ef7ebe
Binary files /dev/null and b/apps/demos/testing/etalons/Sortable-Kanban (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/SpeechToText-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/SpeechToText-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b9264bbeb56a
Binary files /dev/null and b/apps/demos/testing/etalons/SpeechToText-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Splitter-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/Splitter-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..407c546442a5
Binary files /dev/null and b/apps/demos/testing/etalons/Splitter-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Stepper-FormIntegration (fluent-next.blue.light).png b/apps/demos/testing/etalons/Stepper-FormIntegration (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5c51cc007c7d
Binary files /dev/null and b/apps/demos/testing/etalons/Stepper-FormIntegration (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Stepper-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/Stepper-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5313cfe789fd
Binary files /dev/null and b/apps/demos/testing/etalons/Stepper-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Stepper-StepTemplate (fluent-next.blue.light).png b/apps/demos/testing/etalons/Stepper-StepTemplate (fluent-next.blue.light).png
new file mode 100644
index 000000000000..98c8a16329d6
Binary files /dev/null and b/apps/demos/testing/etalons/Stepper-StepTemplate (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Switch-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/Switch-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..34d523e9de45
Binary files /dev/null and b/apps/demos/testing/etalons/Switch-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TabPanel-DragAndDrop (fluent-next.blue.light).png b/apps/demos/testing/etalons/TabPanel-DragAndDrop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2719ea586152
Binary files /dev/null and b/apps/demos/testing/etalons/TabPanel-DragAndDrop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TabPanel-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/TabPanel-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..23be52599757
Binary files /dev/null and b/apps/demos/testing/etalons/TabPanel-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TabPanel-Templates (fluent-next.blue.light).png b/apps/demos/testing/etalons/TabPanel-Templates (fluent-next.blue.light).png
new file mode 100644
index 000000000000..eb85daace194
Binary files /dev/null and b/apps/demos/testing/etalons/TabPanel-Templates (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Tabs-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/Tabs-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..87474a957066
Binary files /dev/null and b/apps/demos/testing/etalons/Tabs-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Tabs-Selection (fluent-next.blue.light).png b/apps/demos/testing/etalons/Tabs-Selection (fluent-next.blue.light).png
new file mode 100644
index 000000000000..33eefe1e351f
Binary files /dev/null and b/apps/demos/testing/etalons/Tabs-Selection (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TagBox-Grouping (fluent-next.blue.light).png b/apps/demos/testing/etalons/TagBox-Grouping (fluent-next.blue.light).png
new file mode 100644
index 000000000000..50683374ff49
Binary files /dev/null and b/apps/demos/testing/etalons/TagBox-Grouping (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TagBox-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/TagBox-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6983d8fb9cb2
Binary files /dev/null and b/apps/demos/testing/etalons/TagBox-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TagBox-TagCountLimitation (fluent-next.blue.light).png b/apps/demos/testing/etalons/TagBox-TagCountLimitation (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5348cc3f156f
Binary files /dev/null and b/apps/demos/testing/etalons/TagBox-TagCountLimitation (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TextArea-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/TextArea-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..17243704755e
Binary files /dev/null and b/apps/demos/testing/etalons/TextArea-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TextBox-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/TextBox-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..73b97fb0685d
Binary files /dev/null and b/apps/demos/testing/etalons/TextBox-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TileView-Basics (fluent-next.blue.light).png b/apps/demos/testing/etalons/TileView-Basics (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d449e2c606ca
Binary files /dev/null and b/apps/demos/testing/etalons/TileView-Basics (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TileView-Directions (fluent-next.blue.light).png b/apps/demos/testing/etalons/TileView-Directions (fluent-next.blue.light).png
new file mode 100644
index 000000000000..abceb5cb31b5
Binary files /dev/null and b/apps/demos/testing/etalons/TileView-Directions (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TileView-Item3RdPartyEngineTemplate (fluent-next.blue.light).png b/apps/demos/testing/etalons/TileView-Item3RdPartyEngineTemplate (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d3a97bfb9a8b
Binary files /dev/null and b/apps/demos/testing/etalons/TileView-Item3RdPartyEngineTemplate (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TileView-ItemTemplate (fluent-next.blue.light).png b/apps/demos/testing/etalons/TileView-ItemTemplate (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8722b1d45beb
Binary files /dev/null and b/apps/demos/testing/etalons/TileView-ItemTemplate (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Toast-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/Toast-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..42ec0d4b5df6
Binary files /dev/null and b/apps/demos/testing/etalons/Toast-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Toast-Stack (fluent-next.blue.light).png b/apps/demos/testing/etalons/Toast-Stack (fluent-next.blue.light).png
new file mode 100644
index 000000000000..eba348221f72
Binary files /dev/null and b/apps/demos/testing/etalons/Toast-Stack (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Toolbar-Adaptability (fluent-next.blue.light).png b/apps/demos/testing/etalons/Toolbar-Adaptability (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2e32c09e1b6a
Binary files /dev/null and b/apps/demos/testing/etalons/Toolbar-Adaptability (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Toolbar-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/Toolbar-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..61a17c4555ae
Binary files /dev/null and b/apps/demos/testing/etalons/Toolbar-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Tooltip-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/Tooltip-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..584af3381c04
Binary files /dev/null and b/apps/demos/testing/etalons/Tooltip-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-AIColumns (fluent-next.blue.light).png b/apps/demos/testing/etalons/TreeList-AIColumns (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3370082e3efa
Binary files /dev/null and b/apps/demos/testing/etalons/TreeList-AIColumns (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-Adaptability (fluent-next.blue.light).png b/apps/demos/testing/etalons/TreeList-Adaptability (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e0d2d78b0683
Binary files /dev/null and b/apps/demos/testing/etalons/TreeList-Adaptability (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-BatchEditing (fluent-next.blue.light).png b/apps/demos/testing/etalons/TreeList-BatchEditing (fluent-next.blue.light).png
new file mode 100644
index 000000000000..26ce703a1300
Binary files /dev/null and b/apps/demos/testing/etalons/TreeList-BatchEditing (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-CellEditing (fluent-next.blue.light).png b/apps/demos/testing/etalons/TreeList-CellEditing (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6627e9b32fa0
Binary files /dev/null and b/apps/demos/testing/etalons/TreeList-CellEditing (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-ColumnChooser (fluent-next.blue.light).png b/apps/demos/testing/etalons/TreeList-ColumnChooser (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6af46c8b9762
Binary files /dev/null and b/apps/demos/testing/etalons/TreeList-ColumnChooser (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-ColumnHeaderFilter (fluent-next.blue.light).png b/apps/demos/testing/etalons/TreeList-ColumnHeaderFilter (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d7cf1ded55ed
Binary files /dev/null and b/apps/demos/testing/etalons/TreeList-ColumnHeaderFilter (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-CustomizeKeyboardNavigation (fluent-next.blue.light).png b/apps/demos/testing/etalons/TreeList-CustomizeKeyboardNavigation (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7b07524dd05b
Binary files /dev/null and b/apps/demos/testing/etalons/TreeList-CustomizeKeyboardNavigation (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-FilterModes (fluent-next.blue.light).png b/apps/demos/testing/etalons/TreeList-FilterModes (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dc05c339f39a
Binary files /dev/null and b/apps/demos/testing/etalons/TreeList-FilterModes (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-FilterPanel (fluent-next.blue.light).png b/apps/demos/testing/etalons/TreeList-FilterPanel (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7dbec314f95e
Binary files /dev/null and b/apps/demos/testing/etalons/TreeList-FilterPanel (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-FilterRow (fluent-next.blue.light).png b/apps/demos/testing/etalons/TreeList-FilterRow (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7b243fe0f336
Binary files /dev/null and b/apps/demos/testing/etalons/TreeList-FilterRow (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-FixedAndStickyColumns (fluent-next.blue.light).png b/apps/demos/testing/etalons/TreeList-FixedAndStickyColumns (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7d8571e1bb54
Binary files /dev/null and b/apps/demos/testing/etalons/TreeList-FixedAndStickyColumns (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-FocusedRow (fluent-next.blue.light).png b/apps/demos/testing/etalons/TreeList-FocusedRow (fluent-next.blue.light).png
new file mode 100644
index 000000000000..26dc89fd9477
Binary files /dev/null and b/apps/demos/testing/etalons/TreeList-FocusedRow (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-FormEditing (fluent-next.blue.light).png b/apps/demos/testing/etalons/TreeList-FormEditing (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ec8c34606cd5
Binary files /dev/null and b/apps/demos/testing/etalons/TreeList-FormEditing (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-KeyboardNavigation (fluent-next.blue.light).png b/apps/demos/testing/etalons/TreeList-KeyboardNavigation (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b3126fa5d0a3
Binary files /dev/null and b/apps/demos/testing/etalons/TreeList-KeyboardNavigation (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-LoadDataOnDemand (fluent-next.blue.light).png b/apps/demos/testing/etalons/TreeList-LoadDataOnDemand (fluent-next.blue.light).png
new file mode 100644
index 000000000000..73002703f967
Binary files /dev/null and b/apps/demos/testing/etalons/TreeList-LoadDataOnDemand (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-LocalReordering (fluent-next.blue.light).png b/apps/demos/testing/etalons/TreeList-LocalReordering (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fef29d32d470
Binary files /dev/null and b/apps/demos/testing/etalons/TreeList-LocalReordering (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-MultipleRowSelection (fluent-next.blue.light).png b/apps/demos/testing/etalons/TreeList-MultipleRowSelection (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e65293e74525
Binary files /dev/null and b/apps/demos/testing/etalons/TreeList-MultipleRowSelection (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-MultipleSorting (fluent-next.blue.light).png b/apps/demos/testing/etalons/TreeList-MultipleSorting (fluent-next.blue.light).png
new file mode 100644
index 000000000000..47ca98a098e0
Binary files /dev/null and b/apps/demos/testing/etalons/TreeList-MultipleSorting (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/TreeList-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..aa67f029d6a4
Binary files /dev/null and b/apps/demos/testing/etalons/TreeList-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-Paging (fluent-next.blue.light).png b/apps/demos/testing/etalons/TreeList-Paging (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a30a977ad4e7
Binary files /dev/null and b/apps/demos/testing/etalons/TreeList-Paging (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-PopupEditing (fluent-next.blue.light).png b/apps/demos/testing/etalons/TreeList-PopupEditing (fluent-next.blue.light).png
new file mode 100644
index 000000000000..acf83865e973
Binary files /dev/null and b/apps/demos/testing/etalons/TreeList-PopupEditing (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-Reordering (fluent-next.blue.light).png b/apps/demos/testing/etalons/TreeList-Reordering (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bbfad461f2e1
Binary files /dev/null and b/apps/demos/testing/etalons/TreeList-Reordering (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-Resizing (fluent-next.blue.light).png b/apps/demos/testing/etalons/TreeList-Resizing (fluent-next.blue.light).png
new file mode 100644
index 000000000000..07b5916c8e56
Binary files /dev/null and b/apps/demos/testing/etalons/TreeList-Resizing (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-RowEditing (fluent-next.blue.light).png b/apps/demos/testing/etalons/TreeList-RowEditing (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c55b005681e2
Binary files /dev/null and b/apps/demos/testing/etalons/TreeList-RowEditing (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-SearchPanel (fluent-next.blue.light).png b/apps/demos/testing/etalons/TreeList-SearchPanel (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f0e66ca4d327
Binary files /dev/null and b/apps/demos/testing/etalons/TreeList-SearchPanel (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-SimpleArrayHierarchicalStructure (fluent-next.blue.light).png b/apps/demos/testing/etalons/TreeList-SimpleArrayHierarchicalStructure (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ec3e6cc23581
Binary files /dev/null and b/apps/demos/testing/etalons/TreeList-SimpleArrayHierarchicalStructure (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-SimpleArrayPlainStructure (fluent-next.blue.light).png b/apps/demos/testing/etalons/TreeList-SimpleArrayPlainStructure (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ec3e6cc23581
Binary files /dev/null and b/apps/demos/testing/etalons/TreeList-SimpleArrayPlainStructure (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-SingleRowSelection (fluent-next.blue.light).png b/apps/demos/testing/etalons/TreeList-SingleRowSelection (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0482e0e99bc8
Binary files /dev/null and b/apps/demos/testing/etalons/TreeList-SingleRowSelection (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-StatePersistence (fluent-next.blue.light).png b/apps/demos/testing/etalons/TreeList-StatePersistence (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ccc4db6675d6
Binary files /dev/null and b/apps/demos/testing/etalons/TreeList-StatePersistence (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-WebAPIService (fluent-next.blue.light).png b/apps/demos/testing/etalons/TreeList-WebAPIService (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2c9446f1c082
Binary files /dev/null and b/apps/demos/testing/etalons/TreeList-WebAPIService (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeView-ContextMenuIntegration (fluent-next.blue.light).png b/apps/demos/testing/etalons/TreeView-ContextMenuIntegration (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8e27445c4220
Binary files /dev/null and b/apps/demos/testing/etalons/TreeView-ContextMenuIntegration (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeView-DragAndDropHierarchicalDataStructure (fluent-next.blue.light).png b/apps/demos/testing/etalons/TreeView-DragAndDropHierarchicalDataStructure (fluent-next.blue.light).png
new file mode 100644
index 000000000000..eaacefb1ce72
Binary files /dev/null and b/apps/demos/testing/etalons/TreeView-DragAndDropHierarchicalDataStructure (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeView-DragAndDropPlainDataStructure (fluent-next.blue.light).png b/apps/demos/testing/etalons/TreeView-DragAndDropPlainDataStructure (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9606cb659d3b
Binary files /dev/null and b/apps/demos/testing/etalons/TreeView-DragAndDropPlainDataStructure (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeView-FlatDataStructure (fluent-next.blue.light).png b/apps/demos/testing/etalons/TreeView-FlatDataStructure (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a4c78f963879
Binary files /dev/null and b/apps/demos/testing/etalons/TreeView-FlatDataStructure (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeView-HierarchicalDataStructure (fluent-next.blue.light).png b/apps/demos/testing/etalons/TreeView-HierarchicalDataStructure (fluent-next.blue.light).png
new file mode 100644
index 000000000000..175cae946792
Binary files /dev/null and b/apps/demos/testing/etalons/TreeView-HierarchicalDataStructure (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeView-ItemSelectionAndCustomization (fluent-next.blue.light).png b/apps/demos/testing/etalons/TreeView-ItemSelectionAndCustomization (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bb90357dbce1
Binary files /dev/null and b/apps/demos/testing/etalons/TreeView-ItemSelectionAndCustomization (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeView-LoadDataOnDemand (fluent-next.blue.light).png b/apps/demos/testing/etalons/TreeView-LoadDataOnDemand (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fc93f3cdb6ad
Binary files /dev/null and b/apps/demos/testing/etalons/TreeView-LoadDataOnDemand (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeView-TreeViewWithSearchBar (fluent-next.blue.light).png b/apps/demos/testing/etalons/TreeView-TreeViewWithSearchBar (fluent-next.blue.light).png
new file mode 100644
index 000000000000..57cba736705f
Binary files /dev/null and b/apps/demos/testing/etalons/TreeView-TreeViewWithSearchBar (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeView-VirtualMode (fluent-next.blue.light).png b/apps/demos/testing/etalons/TreeView-VirtualMode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..90f6e34d4212
Binary files /dev/null and b/apps/demos/testing/etalons/TreeView-VirtualMode (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Validation-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/Validation-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5d5b4abaa931
Binary files /dev/null and b/apps/demos/testing/etalons/Validation-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/VectorMap-BubbleMarkers (fluent-next.blue.light).png b/apps/demos/testing/etalons/VectorMap-BubbleMarkers (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0009e2aedd94
Binary files /dev/null and b/apps/demos/testing/etalons/VectorMap-BubbleMarkers (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/VectorMap-ColorsCustomization (fluent-next.blue.light).png b/apps/demos/testing/etalons/VectorMap-ColorsCustomization (fluent-next.blue.light).png
new file mode 100644
index 000000000000..90c4c6e09875
Binary files /dev/null and b/apps/demos/testing/etalons/VectorMap-ColorsCustomization (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/VectorMap-CustomAnnotations (fluent-next.blue.light).png b/apps/demos/testing/etalons/VectorMap-CustomAnnotations (fluent-next.blue.light).png
new file mode 100644
index 000000000000..235a116fafeb
Binary files /dev/null and b/apps/demos/testing/etalons/VectorMap-CustomAnnotations (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/VectorMap-CustomMapData (fluent-next.blue.light).png b/apps/demos/testing/etalons/VectorMap-CustomMapData (fluent-next.blue.light).png
new file mode 100644
index 000000000000..73ab1f44a18b
Binary files /dev/null and b/apps/demos/testing/etalons/VectorMap-CustomMapData (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/VectorMap-CustomProjection (fluent-next.blue.light).png b/apps/demos/testing/etalons/VectorMap-CustomProjection (fluent-next.blue.light).png
new file mode 100644
index 000000000000..45cd705e842b
Binary files /dev/null and b/apps/demos/testing/etalons/VectorMap-CustomProjection (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/VectorMap-DynamicViewport (fluent-next.blue.light).png b/apps/demos/testing/etalons/VectorMap-DynamicViewport (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4d6eca7a580d
Binary files /dev/null and b/apps/demos/testing/etalons/VectorMap-DynamicViewport (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/VectorMap-FloorPlan (fluent-next.blue.light).png b/apps/demos/testing/etalons/VectorMap-FloorPlan (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a1927d57e836
Binary files /dev/null and b/apps/demos/testing/etalons/VectorMap-FloorPlan (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/VectorMap-ImageMarkers (fluent-next.blue.light).png b/apps/demos/testing/etalons/VectorMap-ImageMarkers (fluent-next.blue.light).png
new file mode 100644
index 000000000000..268fb8b9aa1c
Binary files /dev/null and b/apps/demos/testing/etalons/VectorMap-ImageMarkers (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/VectorMap-Legend (fluent-next.blue.light).png b/apps/demos/testing/etalons/VectorMap-Legend (fluent-next.blue.light).png
new file mode 100644
index 000000000000..73cbad59166e
Binary files /dev/null and b/apps/demos/testing/etalons/VectorMap-Legend (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/VectorMap-MultipleLayers (fluent-next.blue.light).png b/apps/demos/testing/etalons/VectorMap-MultipleLayers (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6002f590e468
Binary files /dev/null and b/apps/demos/testing/etalons/VectorMap-MultipleLayers (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/VectorMap-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/VectorMap-Overview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8c1fdc67cdb5
Binary files /dev/null and b/apps/demos/testing/etalons/VectorMap-Overview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/VectorMap-Palette (fluent-next.blue.light).png b/apps/demos/testing/etalons/VectorMap-Palette (fluent-next.blue.light).png
new file mode 100644
index 000000000000..899d3aaba83f
Binary files /dev/null and b/apps/demos/testing/etalons/VectorMap-Palette (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/VectorMap-PieMarkers (fluent-next.blue.light).png b/apps/demos/testing/etalons/VectorMap-PieMarkers (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9016abdca34b
Binary files /dev/null and b/apps/demos/testing/etalons/VectorMap-PieMarkers (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/VectorMap-TooltipsCustomization (fluent-next.blue.light).png b/apps/demos/testing/etalons/VectorMap-TooltipsCustomization (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6e2d3218d4e2
Binary files /dev/null and b/apps/demos/testing/etalons/VectorMap-TooltipsCustomization (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/etalons/VectorMap-ZoomingAndCentering (fluent-next.blue.light).png b/apps/demos/testing/etalons/VectorMap-ZoomingAndCentering (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b023c5cb8528
Binary files /dev/null and b/apps/demos/testing/etalons/VectorMap-ZoomingAndCentering (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/accordion/etalons/accordion_overview_collapsed_electronics_disabled_collapsible (fluent-next.blue.light).png b/apps/demos/testing/widgets/accordion/etalons/accordion_overview_collapsed_electronics_disabled_collapsible (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6d04ee8fee25
Binary files /dev/null and b/apps/demos/testing/widgets/accordion/etalons/accordion_overview_collapsed_electronics_disabled_collapsible (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/accordion/etalons/accordion_overview_collapsed_electronics_enabled_multiple_and_collapsible (fluent-next.blue.light).png b/apps/demos/testing/widgets/accordion/etalons/accordion_overview_collapsed_electronics_enabled_multiple_and_collapsible (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e7ebd807617a
Binary files /dev/null and b/apps/demos/testing/widgets/accordion/etalons/accordion_overview_collapsed_electronics_enabled_multiple_and_collapsible (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/accordion/etalons/accordion_overview_expanded_electronics (fluent-next.blue.light).png b/apps/demos/testing/widgets/accordion/etalons/accordion_overview_expanded_electronics (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6d04ee8fee25
Binary files /dev/null and b/apps/demos/testing/widgets/accordion/etalons/accordion_overview_expanded_electronics (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/accordion/etalons/accordion_overview_expanded_ksmusic_and_tomsclub (fluent-next.blue.light).png b/apps/demos/testing/widgets/accordion/etalons/accordion_overview_expanded_ksmusic_and_tomsclub (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a083849ea4ae
Binary files /dev/null and b/apps/demos/testing/widgets/accordion/etalons/accordion_overview_expanded_ksmusic_and_tomsclub (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/charts/etalons/annotations_drag (fluent-next.blue.light).png b/apps/demos/testing/widgets/charts/etalons/annotations_drag (fluent-next.blue.light).png
new file mode 100644
index 000000000000..889049d13440
Binary files /dev/null and b/apps/demos/testing/widgets/charts/etalons/annotations_drag (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/charts/etalons/charts_crosshair (fluent-next.blue.light).png b/apps/demos/testing/widgets/charts/etalons/charts_crosshair (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8041be025778
Binary files /dev/null and b/apps/demos/testing/widgets/charts/etalons/charts_crosshair (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/charts/etalons/charts_custom_legend_marker (fluent-next.blue.light).png b/apps/demos/testing/widgets/charts/etalons/charts_custom_legend_marker (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4f07930c0259
Binary files /dev/null and b/apps/demos/testing/widgets/charts/etalons/charts_custom_legend_marker (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/charts/etalons/charts_drag (fluent-next.blue.light).png b/apps/demos/testing/widgets/charts/etalons/charts_drag (fluent-next.blue.light).png
new file mode 100644
index 000000000000..15e22f8f1d8b
Binary files /dev/null and b/apps/demos/testing/widgets/charts/etalons/charts_drag (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/charts/etalons/charts_drag (fluent-next.blue.light)_mask.png b/apps/demos/testing/widgets/charts/etalons/charts_drag (fluent-next.blue.light)_mask.png
new file mode 100644
index 000000000000..858d90a4b574
Binary files /dev/null and b/apps/demos/testing/widgets/charts/etalons/charts_drag (fluent-next.blue.light)_mask.png differ
diff --git a/apps/demos/testing/widgets/charts/etalons/charts_overview_tooltip (fluent-next.blue.light).png b/apps/demos/testing/widgets/charts/etalons/charts_overview_tooltip (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e242f8b0fc9e
Binary files /dev/null and b/apps/demos/testing/widgets/charts/etalons/charts_overview_tooltip (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/charts/etalons/pie_resolve_labels_overlapping_hide (fluent-next.blue.light).png b/apps/demos/testing/widgets/charts/etalons/pie_resolve_labels_overlapping_hide (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fd4893d40b81
Binary files /dev/null and b/apps/demos/testing/widgets/charts/etalons/pie_resolve_labels_overlapping_hide (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/charts/etalons/pie_resolve_labels_overlapping_none (fluent-next.blue.light).png b/apps/demos/testing/widgets/charts/etalons/pie_resolve_labels_overlapping_none (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cce36b42b5e3
Binary files /dev/null and b/apps/demos/testing/widgets/charts/etalons/pie_resolve_labels_overlapping_none (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/charts/etalons/range_selector_click_to_empty_place (fluent-next.blue.light).png b/apps/demos/testing/widgets/charts/etalons/range_selector_click_to_empty_place (fluent-next.blue.light).png
new file mode 100644
index 000000000000..afe44bf1e443
Binary files /dev/null and b/apps/demos/testing/widgets/charts/etalons/range_selector_click_to_empty_place (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/charts/etalons/range_selector_slider_drag (fluent-next.blue.light).png b/apps/demos/testing/widgets/charts/etalons/range_selector_slider_drag (fluent-next.blue.light).png
new file mode 100644
index 000000000000..88552b3c0c20
Binary files /dev/null and b/apps/demos/testing/widgets/charts/etalons/range_selector_slider_drag (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/charts/etalons/reset_zooming_by_selection (fluent-next.blue.light).png b/apps/demos/testing/widgets/charts/etalons/reset_zooming_by_selection (fluent-next.blue.light).png
new file mode 100644
index 000000000000..94c57d79e6cb
Binary files /dev/null and b/apps/demos/testing/widgets/charts/etalons/reset_zooming_by_selection (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/charts/etalons/zooming_by_selection (fluent-next.blue.light).png b/apps/demos/testing/widgets/charts/etalons/zooming_by_selection (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e619d4ebc205
Binary files /dev/null and b/apps/demos/testing/widgets/charts/etalons/zooming_by_selection (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_avatar_is_hidden (fluent-next.blue.light).png b/apps/demos/testing/widgets/chat/etalons/chat_customization_avatar_is_hidden (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e26cdbc29d89
Binary files /dev/null and b/apps/demos/testing/widgets/chat/etalons/chat_customization_avatar_is_hidden (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_format_is_changed (fluent-next.blue.light).png b/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_format_is_changed (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8bec8b3cdb29
Binary files /dev/null and b/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_format_is_changed (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_is_hidden (fluent-next.blue.light).png b/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_is_hidden (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bed30d635cbd
Binary files /dev/null and b/apps/demos/testing/widgets/chat/etalons/chat_customization_day_headers_is_hidden (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_is_disabled_after_sent (fluent-next.blue.light).png b/apps/demos/testing/widgets/chat/etalons/chat_customization_is_disabled_after_sent (fluent-next.blue.light).png
new file mode 100644
index 000000000000..edc68c97544b
Binary files /dev/null and b/apps/demos/testing/widgets/chat/etalons/chat_customization_is_disabled_after_sent (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamp_format_is_changed (fluent-next.blue.light).png b/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamp_format_is_changed (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1c53c0524464
Binary files /dev/null and b/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamp_format_is_changed (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamps_is_hidden (fluent-next.blue.light).png b/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamps_is_hidden (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ad5a8cd5434d
Binary files /dev/null and b/apps/demos/testing/widgets/chat/etalons/chat_customization_message_timestamps_is_hidden (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/chat_customization_username_is_hidden (fluent-next.blue.light).png b/apps/demos/testing/widgets/chat/etalons/chat_customization_username_is_hidden (fluent-next.blue.light).png
new file mode 100644
index 000000000000..eeb64ce64d38
Binary files /dev/null and b/apps/demos/testing/widgets/chat/etalons/chat_customization_username_is_hidden (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/confirmation_dialog_is_shown (fluent-next.blue.light).png b/apps/demos/testing/widgets/chat/etalons/confirmation_dialog_is_shown (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bebbbae66bf7
Binary files /dev/null and b/apps/demos/testing/widgets/chat/etalons/confirmation_dialog_is_shown (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/last_message_context_menu (fluent-next.blue.light).png b/apps/demos/testing/widgets/chat/etalons/last_message_context_menu (fluent-next.blue.light).png
new file mode 100644
index 000000000000..59a1f469a3c7
Binary files /dev/null and b/apps/demos/testing/widgets/chat/etalons/last_message_context_menu (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/message_deleting_is_disabled (fluent-next.blue.light).png b/apps/demos/testing/widgets/chat/etalons/message_deleting_is_disabled (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2a9f1f676263
Binary files /dev/null and b/apps/demos/testing/widgets/chat/etalons/message_deleting_is_disabled (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/message_editing_is_disabled (fluent-next.blue.light).png b/apps/demos/testing/widgets/chat/etalons/message_editing_is_disabled (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c2434d81721e
Binary files /dev/null and b/apps/demos/testing/widgets/chat/etalons/message_editing_is_disabled (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/message_is_deleted (fluent-next.blue.light).png b/apps/demos/testing/widgets/chat/etalons/message_is_deleted (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4212cf894c6e
Binary files /dev/null and b/apps/demos/testing/widgets/chat/etalons/message_is_deleted (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/message_is_edited (fluent-next.blue.light).png b/apps/demos/testing/widgets/chat/etalons/message_is_edited (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8ccc9decd4c7
Binary files /dev/null and b/apps/demos/testing/widgets/chat/etalons/message_is_edited (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/chat/etalons/preview_is_shown (fluent-next.blue.light).png b/apps/demos/testing/widgets/chat/etalons/preview_is_shown (fluent-next.blue.light).png
new file mode 100644
index 000000000000..150d4cea587a
Binary files /dev/null and b/apps/demos/testing/widgets/chat/etalons/preview_is_shown (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/common/etalons/common_dialogs_and_notifications_overview_popup (fluent-next.blue.light).png b/apps/demos/testing/widgets/common/etalons/common_dialogs_and_notifications_overview_popup (fluent-next.blue.light).png
new file mode 100644
index 000000000000..19564eb7f52e
Binary files /dev/null and b/apps/demos/testing/widgets/common/etalons/common_dialogs_and_notifications_overview_popup (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/common/etalons/common_editor_appearance_variants_filled_floating_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/common/etalons/common_editor_appearance_variants_filled_floating_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3ef594ee523a
Binary files /dev/null and b/apps/demos/testing/widgets/common/etalons/common_editor_appearance_variants_filled_floating_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/common/etalons/common_editor_appearance_variants_filled_hidden_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/common/etalons/common_editor_appearance_variants_filled_hidden_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..aa6fc92b256e
Binary files /dev/null and b/apps/demos/testing/widgets/common/etalons/common_editor_appearance_variants_filled_hidden_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/common/etalons/common_editor_appearance_variants_filled_outside_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/common/etalons/common_editor_appearance_variants_filled_outside_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0a34378e4cf1
Binary files /dev/null and b/apps/demos/testing/widgets/common/etalons/common_editor_appearance_variants_filled_outside_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/common/etalons/common_editor_appearance_variants_filled_static_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/common/etalons/common_editor_appearance_variants_filled_static_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1706f11dd62d
Binary files /dev/null and b/apps/demos/testing/widgets/common/etalons/common_editor_appearance_variants_filled_static_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/common/etalons/common_editor_appearance_variants_outlined_floating_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/common/etalons/common_editor_appearance_variants_outlined_floating_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3fc3ed1e4acd
Binary files /dev/null and b/apps/demos/testing/widgets/common/etalons/common_editor_appearance_variants_outlined_floating_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/common/etalons/common_editor_appearance_variants_outlined_hidden_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/common/etalons/common_editor_appearance_variants_outlined_hidden_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..22b888c54a52
Binary files /dev/null and b/apps/demos/testing/widgets/common/etalons/common_editor_appearance_variants_outlined_hidden_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/common/etalons/common_editor_appearance_variants_outlined_outside_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/common/etalons/common_editor_appearance_variants_outlined_outside_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c059157a3a76
Binary files /dev/null and b/apps/demos/testing/widgets/common/etalons/common_editor_appearance_variants_outlined_outside_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/common/etalons/common_editor_appearance_variants_outlined_static_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/common/etalons/common_editor_appearance_variants_outlined_static_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9c7229ea16ee
Binary files /dev/null and b/apps/demos/testing/widgets/common/etalons/common_editor_appearance_variants_outlined_static_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/common/etalons/common_editor_appearance_variants_underlined_floating_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/common/etalons/common_editor_appearance_variants_underlined_floating_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b24c83c9fb6f
Binary files /dev/null and b/apps/demos/testing/widgets/common/etalons/common_editor_appearance_variants_underlined_floating_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/common/etalons/common_editor_appearance_variants_underlined_hidden_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/common/etalons/common_editor_appearance_variants_underlined_hidden_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..75c040e61076
Binary files /dev/null and b/apps/demos/testing/widgets/common/etalons/common_editor_appearance_variants_underlined_hidden_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/common/etalons/common_editor_appearance_variants_underlined_outside_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/common/etalons/common_editor_appearance_variants_underlined_outside_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bad7b2395f88
Binary files /dev/null and b/apps/demos/testing/widgets/common/etalons/common_editor_appearance_variants_underlined_outside_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/common/etalons/common_editor_appearance_variants_underlined_static_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/common/etalons/common_editor_appearance_variants_underlined_static_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1f474652103d
Binary files /dev/null and b/apps/demos/testing/widgets/common/etalons/common_editor_appearance_variants_underlined_static_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/contextmenu/etalons/ccontext_menu_templates_custom_appearance (fluent-next.blue.light).png b/apps/demos/testing/widgets/contextmenu/etalons/ccontext_menu_templates_custom_appearance (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e7ab2b39654b
Binary files /dev/null and b/apps/demos/testing/widgets/contextmenu/etalons/ccontext_menu_templates_custom_appearance (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/contextmenu/etalons/context_menu_templates_share_visible (fluent-next.blue.light).png b/apps/demos/testing/widgets/contextmenu/etalons/context_menu_templates_share_visible (fluent-next.blue.light).png
new file mode 100644
index 000000000000..780682ec0159
Binary files /dev/null and b/apps/demos/testing/widgets/contextmenu/etalons/context_menu_templates_share_visible (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/contextmenu/etalons/context_menu_templates_submenus_visible (fluent-next.blue.light).png b/apps/demos/testing/widgets/contextmenu/etalons/context_menu_templates_submenus_visible (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ee9b465d7fe5
Binary files /dev/null and b/apps/demos/testing/widgets/contextmenu/etalons/context_menu_templates_submenus_visible (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_CustomNewRecordPosition_insertAfterKey_clicked (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_CustomNewRecordPosition_insertAfterKey_clicked (fluent-next.blue.light).png
new file mode 100644
index 000000000000..717e2b1748cd
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_CustomNewRecordPosition_insertAfterKey_clicked (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_advanced_master_detail_view_1_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_advanced_master_detail_view_1_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..431da9898812
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_advanced_master_detail_view_1_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_advanced_master_detail_view_2_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_advanced_master_detail_view_2_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0d500ffb3641
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_advanced_master_detail_view_2_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_advanced_master_detail_view_3_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_advanced_master_detail_view_3_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..be1dfa23a089
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_advanced_master_detail_view_3_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_advanced_master_detail_view_4_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_advanced_master_detail_view_4_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..66f4e91bb930
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_advanced_master_detail_view_4_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_advanced_master_detail_view_5_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_advanced_master_detail_view_5_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7bd9016e702f
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_advanced_master_detail_view_5_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_advanced_master_detail_view_6_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_advanced_master_detail_view_6_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3b065408ab70
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_advanced_master_detail_view_6_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_ajax_request_1_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_ajax_request_1_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0801e9f8010c
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_ajax_request_1_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_ajax_request_2_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_ajax_request_2_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..72c06e4c3ac2
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_ajax_request_2_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_appearance_2_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_appearance_2_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1da7944b8d70
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_appearance_2_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_appearance_3_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_appearance_3_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..55b55400e9d8
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_appearance_3_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_appearance_4_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_appearance_4_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9f37fbc0ba86
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_appearance_4_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_appearance_5_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_appearance_5_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..58fbf5b5ca6b
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_appearance_5_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_batch_editing_2_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_batch_editing_2_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e067bd25cd04
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_batch_editing_2_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_batch_editing_3_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_batch_editing_3_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..04a00716f548
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_batch_editing_3_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_batch_editing_4_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_batch_editing_4_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d3a9d26416b0
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_batch_editing_4_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_batch_editing_5_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_batch_editing_5_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..940165b88c9d
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_batch_editing_5_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_batch_editing_6_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_batch_editing_6_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d3a9d26416b0
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_batch_editing_6_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_cell_editing_2_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_cell_editing_2_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3623c98922de
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_cell_editing_2_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_cell_editing_3_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_cell_editing_3_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3cc808500969
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_cell_editing_3_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_cell_editing_4_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_cell_editing_4_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b10c49163192
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_cell_editing_4_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_cell_editing_5_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_cell_editing_5_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..91ee6ebcb188
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_cell_editing_5_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_data_validation_2_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_data_validation_2_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0e32b65bd495
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_data_validation_2_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_data_validation_3_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_data_validation_3_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9b470c5d809b
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_data_validation_3_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_data_validation_4_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_data_validation_4_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9acd17a9f6e8
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_data_validation_4_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_data_validation_5_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_data_validation_5_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2d305ffb973f
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_data_validation_5_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_2_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_2_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..32de59b69303
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_2_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_3_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_3_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..50a11f8918d3
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_3_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_4_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_4_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a7a1f284d735
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_4_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_5_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_5_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..134d44b52183
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_5_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_6_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_6_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3fa45a3dedff
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_6_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_7_1_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_7_1_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..20ac7abdf3dd
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_7_1_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_7_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_7_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9c4fe5518ab0
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_7_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_8_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_8_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fa8c833dd5d9
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_8_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_API_2_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_API_2_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5045af407f3e
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_API_2_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_by_range_1_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_by_range_1_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..26129a1679e9
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_by_range_1_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_by_range_2_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_by_range_2_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7e838dcf6e82
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_by_range_2_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_by_range_3_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_by_range_3_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..450818e39e18
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_by_range_3_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_by_range_4_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_by_range_4_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9b155f3a1b92
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_filtering_by_range_4_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_1_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_1_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..794f534caea2
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_1_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_2_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_2_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8e691f48b191
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_2_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_3_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_3_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2c84a99cee3c
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_focus_on_filter_3_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_group_summaries_2_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_group_summaries_2_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..75d2ad934127
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_group_summaries_2_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_infinite_scrolling_2_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_infinite_scrolling_2_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4e6aae08bbce
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_infinite_scrolling_2_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_infinite_scrolling_3_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_infinite_scrolling_3_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c4eb0e2775ef
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_infinite_scrolling_3_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_master_detail_api_2_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_master_detail_api_2_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f5ef319bebf3
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_master_detail_api_2_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_master_detail_view_2_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_master_detail_view_2_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c718f72e2f94
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_master_detail_view_2_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_multiple_record_selection_and_API_2_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_multiple_record_selection_and_API_2_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5a2c59e7b9f8
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_multiple_record_selection_and_API_2_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_multiple_record_selection_and_API_3_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_multiple_record_selection_and_API_3_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ff7a57226409
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_multiple_record_selection_and_API_3_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_multiple_record_selection_and_API_4_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_multiple_record_selection_and_API_4_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f4941e03e721
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_multiple_record_selection_and_API_4_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_multiple_record_selection_and_API_5_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_multiple_record_selection_and_API_5_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..990b97530480
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_multiple_record_selection_and_API_5_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_multiple_record_selection_and_API_6_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_multiple_record_selection_and_API_6_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ff7a57226409
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_multiple_record_selection_and_API_6_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_multiple_record_selection_and_API_7_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_multiple_record_selection_and_API_7_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ff7a57226409
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_multiple_record_selection_and_API_7_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_multiple_sorting_2_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_multiple_sorting_2_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3b47ec972d39
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_multiple_sorting_2_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_multiple_sorting_3_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_multiple_sorting_3_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..be1e86e0bee2
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_multiple_sorting_3_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_multiple_sorting_4_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_multiple_sorting_4_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5208c065de9f
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_multiple_sorting_4_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_multiple_sorting_5_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_multiple_sorting_5_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..aa66342c15f9
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_multiple_sorting_5_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_popup_editing_1_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_popup_editing_1_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..30d55d8663f4
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_popup_editing_1_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_popup_editing_2_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_popup_editing_2_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..aed11ca2ea80
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_popup_editing_2_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_popup_editing_3_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_popup_editing_3_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1cbe3b2c7b73
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_popup_editing_3_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_record_grouping_2_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_record_grouping_2_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c6ba9b0a888e
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_record_grouping_2_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_record_grouping_3_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_record_grouping_3_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..deb0950652e1
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_record_grouping_3_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_record_grouping_4_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_record_grouping_4_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..10a2a7b586da
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_record_grouping_4_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_record_grouping_5_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_record_grouping_5_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a2143d31f9ae
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_record_grouping_5_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_record_grouping_6_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_record_grouping_6_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4b34bd0ec4bb
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_record_grouping_6_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_record_paging_2_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_record_paging_2_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cdc213f59533
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_record_paging_2_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_record_paging_3_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_record_paging_3_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5eef34b91dad
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_record_paging_3_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_remote_grouping_expanded (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_remote_grouping_expanded (fluent-next.blue.light).png
new file mode 100644
index 000000000000..253dbfe141c8
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_remote_grouping_expanded (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_remote_grouping_initial (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_remote_grouping_initial (fluent-next.blue.light).png
new file mode 100644
index 000000000000..69dfbc808d9a
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_remote_grouping_initial (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_remote_grouping_scrolled (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_remote_grouping_scrolled (fluent-next.blue.light).png
new file mode 100644
index 000000000000..67430826f2d8
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_remote_grouping_scrolled (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_row_editing_and_editing_events_2_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_row_editing_and_editing_events_2_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..787df5147fbf
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_row_editing_and_editing_events_2_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_row_editing_and_editing_events_3_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_row_editing_and_editing_events_3_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..33efc143b0ae
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_row_editing_and_editing_events_3_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_row_editing_and_editing_events_4_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_row_editing_and_editing_events_4_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ef37d4bd9783
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_row_editing_and_editing_events_4_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_row_editing_and_editing_events_5_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_row_editing_and_editing_events_5_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6645d8a112c8
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_row_editing_and_editing_events_5_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_row_editing_and_editing_events_6_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_row_editing_and_editing_events_6_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ef37d4bd9783
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_row_editing_and_editing_events_6_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_row_editing_and_editing_events_7_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_row_editing_and_editing_events_7_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..48c8cfe1c994
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_row_editing_and_editing_events_7_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_row_editing_and_editing_events_8_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_row_editing_and_editing_events_8_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1b3469c27e2a
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_row_editing_and_editing_events_8_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_row_selection_2_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_row_selection_2_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..94e7c27b2857
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_row_selection_2_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_row_selection_3_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_row_selection_3_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..abb84bd9a48e
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_row_selection_3_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_row_selection_4_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_row_selection_4_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..94e7c27b2857
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_row_selection_4_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_simple_array_1_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_simple_array_1_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..268bd77221a5
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_simple_array_1_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_simple_array_2_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_simple_array_2_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c154ccb91398
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_simple_array_2_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_state_persistence_2_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_state_persistence_2_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3dde312ef0f8
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_state_persistence_2_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_state_persistence_3_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_state_persistence_3_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..caba7a2aabb9
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_state_persistence_3_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_virtual_scrolling_2_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_virtual_scrolling_2_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..11686ed75e43
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_virtual_scrolling_2_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/datagrid_virtual_scrolling_3_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_virtual_scrolling_3_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b2125b0ee410
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_virtual_scrolling_3_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/toolbar_customization_medium (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/toolbar_customization_medium (fluent-next.blue.light).png
new file mode 100644
index 000000000000..80edcd386b7b
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/toolbar_customization_medium (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/toolbar_customization_thin (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/toolbar_customization_thin (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7a395b6d9b7b
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/toolbar_customization_thin (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/datagrid/etalons/toolbar_customization_wide (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/toolbar_customization_wide (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a6edecce460f
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/toolbar_customization_wide (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/drawer/etalons/drawer(overlap, bottom, expand) (fluent-next.blue.light).png b/apps/demos/testing/widgets/drawer/etalons/drawer(overlap, bottom, expand) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..33226c38fdb8
Binary files /dev/null and b/apps/demos/testing/widgets/drawer/etalons/drawer(overlap, bottom, expand) (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/drawer/etalons/drawer_after_resize(overlap, bottom, expand) (fluent-next.blue.light).png b/apps/demos/testing/widgets/drawer/etalons/drawer_after_resize(overlap, bottom, expand) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..27f80f6034e4
Binary files /dev/null and b/apps/demos/testing/widgets/drawer/etalons/drawer_after_resize(overlap, bottom, expand) (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/drawer/etalons/drawer_closed(overlap, bottom, expand) (fluent-next.blue.light).png b/apps/demos/testing/widgets/drawer/etalons/drawer_closed(overlap, bottom, expand) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..29afd1caf356
Binary files /dev/null and b/apps/demos/testing/widgets/drawer/etalons/drawer_closed(overlap, bottom, expand) (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/drawer/etalons/drawer_opened(overlap, bottom, expand) (fluent-next.blue.light).png b/apps/demos/testing/widgets/drawer/etalons/drawer_opened(overlap, bottom, expand) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1dbe1b852c38
Binary files /dev/null and b/apps/demos/testing/widgets/drawer/etalons/drawer_opened(overlap, bottom, expand) (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/dropdownbox/etalons/dropdownbox_multiple_selection_gridbox (fluent-next.blue.light).png b/apps/demos/testing/widgets/dropdownbox/etalons/dropdownbox_multiple_selection_gridbox (fluent-next.blue.light).png
new file mode 100644
index 000000000000..aa93a0db050d
Binary files /dev/null and b/apps/demos/testing/widgets/dropdownbox/etalons/dropdownbox_multiple_selection_gridbox (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/dropdownbox/etalons/dropdownbox_multiple_selection_treebox (fluent-next.blue.light).png b/apps/demos/testing/widgets/dropdownbox/etalons/dropdownbox_multiple_selection_treebox (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9f4e3fd55c46
Binary files /dev/null and b/apps/demos/testing/widgets/dropdownbox/etalons/dropdownbox_multiple_selection_treebox (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/dropdownbutton/etalons/dropdown_button_overview_custom_button_action (fluent-next.blue.light).png b/apps/demos/testing/widgets/dropdownbutton/etalons/dropdown_button_overview_custom_button_action (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5ddbbdb98df4
Binary files /dev/null and b/apps/demos/testing/widgets/dropdownbutton/etalons/dropdown_button_overview_custom_button_action (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/dropdownbutton/etalons/dropdown_button_overview_custom_static_text (fluent-next.blue.light).png b/apps/demos/testing/widgets/dropdownbutton/etalons/dropdown_button_overview_custom_static_text (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f35bfba88579
Binary files /dev/null and b/apps/demos/testing/widgets/dropdownbutton/etalons/dropdown_button_overview_custom_static_text (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/fileuploader/etalons/custom_dropzone_valid_file (fluent-next.blue.light).png b/apps/demos/testing/widgets/fileuploader/etalons/custom_dropzone_valid_file (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3b1a16e90c1d
Binary files /dev/null and b/apps/demos/testing/widgets/fileuploader/etalons/custom_dropzone_valid_file (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/form/etalons/form_customize_item_label_tooltip (fluent-next.blue.light).png b/apps/demos/testing/widgets/form/etalons/form_customize_item_label_tooltip (fluent-next.blue.light).png
new file mode 100644
index 000000000000..045f0eb4b745
Binary files /dev/null and b/apps/demos/testing/widgets/form/etalons/form_customize_item_label_tooltip (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/form/etalons/form_validation_after_reset (fluent-next.blue.light).png b/apps/demos/testing/widgets/form/etalons/form_validation_after_reset (fluent-next.blue.light).png
new file mode 100644
index 000000000000..40871b5faa13
Binary files /dev/null and b/apps/demos/testing/widgets/form/etalons/form_validation_after_reset (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/form/etalons/form_validation_before_reset (fluent-next.blue.light).png b/apps/demos/testing/widgets/form/etalons/form_validation_before_reset (fluent-next.blue.light).png
new file mode 100644
index 000000000000..221d15805bfd
Binary files /dev/null and b/apps/demos/testing/widgets/form/etalons/form_validation_before_reset (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/form/etalons/form_validation_summary (fluent-next.blue.light).png b/apps/demos/testing/widgets/form/etalons/form_validation_summary (fluent-next.blue.light).png
new file mode 100644
index 000000000000..40871b5faa13
Binary files /dev/null and b/apps/demos/testing/widgets/form/etalons/form_validation_summary (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/gauges/etalons/bargauge_hide_bars (fluent-next.blue.light).png b/apps/demos/testing/widgets/gauges/etalons/bargauge_hide_bars (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dd6c15a4e776
Binary files /dev/null and b/apps/demos/testing/widgets/gauges/etalons/bargauge_hide_bars (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/gauges/etalons/bargauge_show_bars (fluent-next.blue.light).png b/apps/demos/testing/widgets/gauges/etalons/bargauge_show_bars (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3b9345ded96b
Binary files /dev/null and b/apps/demos/testing/widgets/gauges/etalons/bargauge_show_bars (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/list/etalons/List after change selectAll checkbox value (fluent-next.blue.light).png b/apps/demos/testing/widgets/list/etalons/List after change selectAll checkbox value (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2e3bae38f6c3
Binary files /dev/null and b/apps/demos/testing/widgets/list/etalons/List after change selectAll checkbox value (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/list/etalons/List after change selectionMode to multiple (fluent-next.blue.light).png b/apps/demos/testing/widgets/list/etalons/List after change selectionMode to multiple (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2d113636a15c
Binary files /dev/null and b/apps/demos/testing/widgets/list/etalons/List after change selectionMode to multiple (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/list/etalons/List after change selectionMode to none (fluent-next.blue.light).png b/apps/demos/testing/widgets/list/etalons/List after change selectionMode to none (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7f516f543f2d
Binary files /dev/null and b/apps/demos/testing/widgets/list/etalons/List after change selectionMode to none (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/list/etalons/List after change selectionMode to single (fluent-next.blue.light).png b/apps/demos/testing/widgets/list/etalons/List after change selectionMode to single (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dedd17e68c45
Binary files /dev/null and b/apps/demos/testing/widgets/list/etalons/List after change selectionMode to single (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/list/etalons/List after click on item, selectionMode=all (fluent-next.blue.light).png b/apps/demos/testing/widgets/list/etalons/List after click on item, selectionMode=all (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cbc10ca2b55c
Binary files /dev/null and b/apps/demos/testing/widgets/list/etalons/List after click on item, selectionMode=all (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/lookup/etalons/lookup_templates_custom_appearance (fluent-next.blue.light).png b/apps/demos/testing/widgets/lookup/etalons/lookup_templates_custom_appearance (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a11bfefc320f
Binary files /dev/null and b/apps/demos/testing/widgets/lookup/etalons/lookup_templates_custom_appearance (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/pivotgrid/etalons/Integrated field chooser (fluent-next.blue.light).png b/apps/demos/testing/widgets/pivotgrid/etalons/Integrated field chooser (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ffd4e076bcc2
Binary files /dev/null and b/apps/demos/testing/widgets/pivotgrid/etalons/Integrated field chooser (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/pivotgrid/etalons/Integrated field chooser after search of hierarchy field (fluent-next.blue.light).png b/apps/demos/testing/widgets/pivotgrid/etalons/Integrated field chooser after search of hierarchy field (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3ce09ee9a117
Binary files /dev/null and b/apps/demos/testing/widgets/pivotgrid/etalons/Integrated field chooser after search of hierarchy field (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/popup/etalons/popup with scrollable container (fluent-next.blue.light).png b/apps/demos/testing/widgets/popup/etalons/popup with scrollable container (fluent-next.blue.light).png
new file mode 100644
index 000000000000..af6b0a99de10
Binary files /dev/null and b/apps/demos/testing/widgets/popup/etalons/popup with scrollable container (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/popup/etalons/popup with scrollview (fluent-next.blue.light).png b/apps/demos/testing/widgets/popup/etalons/popup with scrollview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..94d73e45f3bd
Binary files /dev/null and b/apps/demos/testing/widgets/popup/etalons/popup with scrollview (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/scheduler/etalons/scheduler_CellTemplates_view_dates_changed (fluent-next.blue.light).png b/apps/demos/testing/widgets/scheduler/etalons/scheduler_CellTemplates_view_dates_changed (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e07172f37823
Binary files /dev/null and b/apps/demos/testing/widgets/scheduler/etalons/scheduler_CellTemplates_view_dates_changed (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/scheduler/etalons/scheduler_IndividualViewCustomization_appointment_popup-1 (fluent-next.blue.light).png b/apps/demos/testing/widgets/scheduler/etalons/scheduler_IndividualViewCustomization_appointment_popup-1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..53cbf0df24c3
Binary files /dev/null and b/apps/demos/testing/widgets/scheduler/etalons/scheduler_IndividualViewCustomization_appointment_popup-1 (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/scheduler/etalons/scheduler_IndividualViewCustomization_appointment_popup-2 (fluent-next.blue.light).png b/apps/demos/testing/widgets/scheduler/etalons/scheduler_IndividualViewCustomization_appointment_popup-2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..204c6c853da1
Binary files /dev/null and b/apps/demos/testing/widgets/scheduler/etalons/scheduler_IndividualViewCustomization_appointment_popup-2 (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/scheduler/etalons/scheduler_ResolveTimeConflicts_appointment-popup_main-group_conflict-informer (fluent-next.blue.light).png b/apps/demos/testing/widgets/scheduler/etalons/scheduler_ResolveTimeConflicts_appointment-popup_main-group_conflict-informer (fluent-next.blue.light).png
new file mode 100644
index 000000000000..11e84965c772
Binary files /dev/null and b/apps/demos/testing/widgets/scheduler/etalons/scheduler_ResolveTimeConflicts_appointment-popup_main-group_conflict-informer (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/scheduler/etalons/scheduler_ResolveTimeConflicts_appointment-popup_recurrence-group_conflict-informer (fluent-next.blue.light).png b/apps/demos/testing/widgets/scheduler/etalons/scheduler_ResolveTimeConflicts_appointment-popup_recurrence-group_conflict-informer (fluent-next.blue.light).png
new file mode 100644
index 000000000000..24cea482b711
Binary files /dev/null and b/apps/demos/testing/widgets/scheduler/etalons/scheduler_ResolveTimeConflicts_appointment-popup_recurrence-group_conflict-informer (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_cell_click (fluent-next.blue.light).png b/apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_cell_click (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5d693ea239d5
Binary files /dev/null and b/apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_cell_click (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_click (fluent-next.blue.light).png b/apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_click (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4bbc1d455c54
Binary files /dev/null and b/apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_click (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_header_click (fluent-next.blue.light).png b/apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_header_click (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0f2b1f96728c
Binary files /dev/null and b/apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_header_click (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_init (fluent-next.blue.light).png b/apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_init (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0f2b1f96728c
Binary files /dev/null and b/apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_init (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/scheduler/etalons/scheduler_custom-dnd_all-day-panel_list (fluent-next.blue.light).png b/apps/demos/testing/widgets/scheduler/etalons/scheduler_custom-dnd_all-day-panel_list (fluent-next.blue.light).png
new file mode 100644
index 000000000000..15d1bf1ddc20
Binary files /dev/null and b/apps/demos/testing/widgets/scheduler/etalons/scheduler_custom-dnd_all-day-panel_list (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/scheduler/etalons/scheduler_custom-dnd_date-table_list (fluent-next.blue.light).png b/apps/demos/testing/widgets/scheduler/etalons/scheduler_custom-dnd_date-table_list (fluent-next.blue.light).png
new file mode 100644
index 000000000000..76ef5c8cfc4f
Binary files /dev/null and b/apps/demos/testing/widgets/scheduler/etalons/scheduler_custom-dnd_date-table_list (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/scheduler/etalons/scheduler_custom-dnd_list_all-day-panel (fluent-next.blue.light).png b/apps/demos/testing/widgets/scheduler/etalons/scheduler_custom-dnd_list_all-day-panel (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f2b3d7b24ce1
Binary files /dev/null and b/apps/demos/testing/widgets/scheduler/etalons/scheduler_custom-dnd_list_all-day-panel (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/scheduler/etalons/scheduler_custom-dnd_list_date-table (fluent-next.blue.light).png b/apps/demos/testing/widgets/scheduler/etalons/scheduler_custom-dnd_list_date-table (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a406fd2b9893
Binary files /dev/null and b/apps/demos/testing/widgets/scheduler/etalons/scheduler_custom-dnd_list_date-table (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/scheduler/etalons/scheduler_overview_selection (fluent-next.blue.light).png b/apps/demos/testing/widgets/scheduler/etalons/scheduler_overview_selection (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7de218f5d396
Binary files /dev/null and b/apps/demos/testing/widgets/scheduler/etalons/scheduler_overview_selection (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/scheduler/etalons/scheduler_resources_appointment_popup (fluent-next.blue.light).png b/apps/demos/testing/widgets/scheduler/etalons/scheduler_resources_appointment_popup (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8d4ae76336ef
Binary files /dev/null and b/apps/demos/testing/widgets/scheduler/etalons/scheduler_resources_appointment_popup (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/scheduler/resolveTimeConflicts.test.ts b/apps/demos/testing/widgets/scheduler/resolveTimeConflicts.test.ts
index 134728762c31..9179fba5b8ef 100644
--- a/apps/demos/testing/widgets/scheduler/resolveTimeConflicts.test.ts
+++ b/apps/demos/testing/widgets/scheduler/resolveTimeConflicts.test.ts
@@ -25,21 +25,21 @@ runManualTest('Scheduler', 'ResolveTimeConflicts', (test) => {
   });
 });
 
-runManualTest('Scheduler', 'ResolveTimeConflicts', (test) => {
-  test('AppointmentPopup in recurrence group with conflict informer', async (t) => {
-    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
-
-    await t
-      .doubleClick(Selector('.dx-scheduler-appointment').withText('Approve Personal'))
-      .click('.dx-scheduler-form-all-day-switch .dx-switch-container')
-      .click('.dx-scheduler-form-repeat-editor .dx-selectbox')
-      .click(Selector('.dx-selectbox-popup-wrapper .dx-list-item').withText('Daily'))
-      .click(Selector('.dx-popup-title .dx-button').withAttribute('aria-label', 'Save'));
-
-    await testScreenshot(t, takeScreenshot, 'scheduler_ResolveTimeConflicts_appointment-popup_recurrence-group_conflict-informer.png');
-
-    await t
-      .expect(compareResults.isValid())
-      .ok(compareResults.errorMessages());
-  });
-});
+// runManualTest('Scheduler', 'ResolveTimeConflicts', (test) => {
+//   test('AppointmentPopup in recurrence group with conflict informer', async (t) => {
+//     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+//
+//     await t
+//       .doubleClick(Selector('.dx-scheduler-appointment').withText('Approve Personal'))
+//       .click('.dx-scheduler-form-all-day-switch .dx-switch-container')
+//       .click('.dx-scheduler-form-repeat-editor .dx-selectbox')
+//       .click(Selector('.dx-selectbox-popup-wrapper .dx-list-item').withText('Daily'))
+//       .click(Selector('.dx-popup-title .dx-button').withAttribute('aria-label', 'Save'));
+//
+//     await testScreenshot(t, takeScreenshot, 'scheduler_ResolveTimeConflicts_appointment-popup_recurrence-group_conflict-informer.png');
+//
+//     await t
+//       .expect(compareResults.isValid())
+//       .ok(compareResults.errorMessages());
+//   });
+// });
diff --git a/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_first_opened (fluent-next.blue.light).png b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_first_opened (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5ff0bc62e3d3
Binary files /dev/null and b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_first_opened (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_second_opened (fluent-next.blue.light).png b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_second_opened (fluent-next.blue.light).png
new file mode 100644
index 000000000000..87029f22b3e0
Binary files /dev/null and b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_second_opened (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_third_opened (fluent-next.blue.light).png b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_third_opened (fluent-next.blue.light).png
new file mode 100644
index 000000000000..83c70983d94a
Binary files /dev/null and b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_third_opened (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/sortable/etalons/common_editor_appearance_variants_filled_floating_desktop (material.blue.light).png b/apps/demos/testing/widgets/sortable/etalons/common_editor_appearance_variants_filled_floating_desktop (material.blue.light).png
deleted file mode 100644
index 4dd5cab72446..000000000000
Binary files a/apps/demos/testing/widgets/sortable/etalons/common_editor_appearance_variants_filled_floating_desktop (material.blue.light).png and /dev/null differ
diff --git a/apps/demos/testing/widgets/sortable/etalons/kanban_card_drag-n-drop_different-column (fluent-next.blue.light).png b/apps/demos/testing/widgets/sortable/etalons/kanban_card_drag-n-drop_different-column (fluent-next.blue.light).png
new file mode 100644
index 000000000000..270e7564e0f6
Binary files /dev/null and b/apps/demos/testing/widgets/sortable/etalons/kanban_card_drag-n-drop_different-column (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/sortable/etalons/kanban_card_drag-n-drop_same-column (fluent-next.blue.light).png b/apps/demos/testing/widgets/sortable/etalons/kanban_card_drag-n-drop_same-column (fluent-next.blue.light).png
new file mode 100644
index 000000000000..69a9754c71bb
Binary files /dev/null and b/apps/demos/testing/widgets/sortable/etalons/kanban_card_drag-n-drop_same-column (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/sortable/etalons/kanban_list_drag-n-drop (fluent-next.blue.light).png b/apps/demos/testing/widgets/sortable/etalons/kanban_list_drag-n-drop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b917da98778e
Binary files /dev/null and b/apps/demos/testing/widgets/sortable/etalons/kanban_list_drag-n-drop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/splitter/etalons/Splitter_Focused_Central_Pane (fluent-next.blue.light).png b/apps/demos/testing/widgets/splitter/etalons/Splitter_Focused_Central_Pane (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dddcaef1b79a
Binary files /dev/null and b/apps/demos/testing/widgets/splitter/etalons/Splitter_Focused_Central_Pane (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/splitter/etalons/Splitter_Focused_Left_Pane (fluent-next.blue.light).png b/apps/demos/testing/widgets/splitter/etalons/Splitter_Focused_Left_Pane (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ad6fd460a7e0
Binary files /dev/null and b/apps/demos/testing/widgets/splitter/etalons/Splitter_Focused_Left_Pane (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/splitter/etalons/Splitter_Focused_Nested_Central_Pane (fluent-next.blue.light).png b/apps/demos/testing/widgets/splitter/etalons/Splitter_Focused_Nested_Central_Pane (fluent-next.blue.light).png
new file mode 100644
index 000000000000..24c352d7ff3a
Binary files /dev/null and b/apps/demos/testing/widgets/splitter/etalons/Splitter_Focused_Nested_Central_Pane (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/splitter/etalons/Splitter_Focused_Nested_Left_Pane (fluent-next.blue.light).png b/apps/demos/testing/widgets/splitter/etalons/Splitter_Focused_Nested_Left_Pane (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4bea4e7c162c
Binary files /dev/null and b/apps/demos/testing/widgets/splitter/etalons/Splitter_Focused_Nested_Left_Pane (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/splitter/etalons/Splitter_Focused_Nested_Right_Pane (fluent-next.blue.light).png b/apps/demos/testing/widgets/splitter/etalons/Splitter_Focused_Nested_Right_Pane (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f543e525ee50
Binary files /dev/null and b/apps/demos/testing/widgets/splitter/etalons/Splitter_Focused_Nested_Right_Pane (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/splitter/etalons/Splitter_Focused_Right_Pane (fluent-next.blue.light).png b/apps/demos/testing/widgets/splitter/etalons/Splitter_Focused_Right_Pane (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c6e0f7190600
Binary files /dev/null and b/apps/demos/testing/widgets/splitter/etalons/Splitter_Focused_Right_Pane (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/stepper/etalons/Form Integration-Fifth step confirmed (fluent-next.blue.light).png b/apps/demos/testing/widgets/stepper/etalons/Form Integration-Fifth step confirmed (fluent-next.blue.light).png
new file mode 100644
index 000000000000..220cd0fb2b05
Binary files /dev/null and b/apps/demos/testing/widgets/stepper/etalons/Form Integration-Fifth step confirmed (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/stepper/etalons/Form Integration-Fifth step summary (fluent-next.blue.light).png b/apps/demos/testing/widgets/stepper/etalons/Form Integration-Fifth step summary (fluent-next.blue.light).png
new file mode 100644
index 000000000000..90f6ce14232f
Binary files /dev/null and b/apps/demos/testing/widgets/stepper/etalons/Form Integration-Fifth step summary (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/stepper/etalons/Form Integration-Fifth step summary final (fluent-next.blue.light).png b/apps/demos/testing/widgets/stepper/etalons/Form Integration-Fifth step summary final (fluent-next.blue.light).png
new file mode 100644
index 000000000000..65eb689d652a
Binary files /dev/null and b/apps/demos/testing/widgets/stepper/etalons/Form Integration-Fifth step summary final (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/stepper/etalons/Form Integration-First step form filled (fluent-next.blue.light).png b/apps/demos/testing/widgets/stepper/etalons/Form Integration-First step form filled (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1d2a585c875a
Binary files /dev/null and b/apps/demos/testing/widgets/stepper/etalons/Form Integration-First step form filled (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/stepper/etalons/Form Integration-First step validation failed (fluent-next.blue.light).png b/apps/demos/testing/widgets/stepper/etalons/Form Integration-First step validation failed (fluent-next.blue.light).png
new file mode 100644
index 000000000000..82309838eed8
Binary files /dev/null and b/apps/demos/testing/widgets/stepper/etalons/Form Integration-First step validation failed (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/stepper/etalons/Form Integration-Fourth optional step form empty (fluent-next.blue.light).png b/apps/demos/testing/widgets/stepper/etalons/Form Integration-Fourth optional step form empty (fluent-next.blue.light).png
new file mode 100644
index 000000000000..705b8c4ea029
Binary files /dev/null and b/apps/demos/testing/widgets/stepper/etalons/Form Integration-Fourth optional step form empty (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/stepper/etalons/Form Integration-Second step form filled (fluent-next.blue.light).png b/apps/demos/testing/widgets/stepper/etalons/Form Integration-Second step form filled (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4ba8669f4d02
Binary files /dev/null and b/apps/demos/testing/widgets/stepper/etalons/Form Integration-Second step form filled (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/stepper/etalons/Form Integration-Third step form filled (fluent-next.blue.light).png b/apps/demos/testing/widgets/stepper/etalons/Form Integration-Third step form filled (fluent-next.blue.light).png
new file mode 100644
index 000000000000..98a41d4e0569
Binary files /dev/null and b/apps/demos/testing/widgets/stepper/etalons/Form Integration-Third step form filled (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/stepper/etalons/Second stepper is focused (fluent-next.blue.light).png b/apps/demos/testing/widgets/stepper/etalons/Second stepper is focused (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8ff57ac79a7c
Binary files /dev/null and b/apps/demos/testing/widgets/stepper/etalons/Second stepper is focused (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/stepper/etalons/Stepper overview rtl=true, orientation=horizontal (fluent-next.blue.light).png b/apps/demos/testing/widgets/stepper/etalons/Stepper overview rtl=true, orientation=horizontal (fluent-next.blue.light).png
new file mode 100644
index 000000000000..014633ec2df0
Binary files /dev/null and b/apps/demos/testing/widgets/stepper/etalons/Stepper overview rtl=true, orientation=horizontal (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/stepper/etalons/Stepper overview rtl=true, orientation=vertical (fluent-next.blue.light).png b/apps/demos/testing/widgets/stepper/etalons/Stepper overview rtl=true, orientation=vertical (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8f5fa3ab170b
Binary files /dev/null and b/apps/demos/testing/widgets/stepper/etalons/Stepper overview rtl=true, orientation=vertical (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/stepper/etalons/Stepper overview selectOnFocus=false (fluent-next.blue.light).png b/apps/demos/testing/widgets/stepper/etalons/Stepper overview selectOnFocus=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1c8b53d38d08
Binary files /dev/null and b/apps/demos/testing/widgets/stepper/etalons/Stepper overview selectOnFocus=false (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/stepper/etalons/Third stepper is focused (fluent-next.blue.light).png b/apps/demos/testing/widgets/stepper/etalons/Third stepper is focused (fluent-next.blue.light).png
new file mode 100644
index 000000000000..862bc6a77669
Binary files /dev/null and b/apps/demos/testing/widgets/stepper/etalons/Third stepper is focused (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/tabpanel/etalons/tabpanel_iconposition_start (fluent-next.blue.light).png b/apps/demos/testing/widgets/tabpanel/etalons/tabpanel_iconposition_start (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f7a4e3df866d
Binary files /dev/null and b/apps/demos/testing/widgets/tabpanel/etalons/tabpanel_iconposition_start (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/tabpanel/etalons/tabpanel_stylingmode_primary (fluent-next.blue.light).png b/apps/demos/testing/widgets/tabpanel/etalons/tabpanel_stylingmode_primary (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fdc6fa13a3db
Binary files /dev/null and b/apps/demos/testing/widgets/tabpanel/etalons/tabpanel_stylingmode_primary (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/tabpanel/etalons/tabpanel_tabsposition_top (fluent-next.blue.light).png b/apps/demos/testing/widgets/tabpanel/etalons/tabpanel_tabsposition_top (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a1da23090c33
Binary files /dev/null and b/apps/demos/testing/widgets/tabpanel/etalons/tabpanel_tabsposition_top (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/tabs/etalons/tabs_iconposition_end (fluent-next.blue.light).png b/apps/demos/testing/widgets/tabs/etalons/tabs_iconposition_end (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cb005f07ff85
Binary files /dev/null and b/apps/demos/testing/widgets/tabs/etalons/tabs_iconposition_end (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/tabs/etalons/tabs_orientation_horizontal_with_strict_class (fluent-next.blue.light).png b/apps/demos/testing/widgets/tabs/etalons/tabs_orientation_horizontal_with_strict_class (fluent-next.blue.light).png
new file mode 100644
index 000000000000..31b2ca0628a0
Binary files /dev/null and b/apps/demos/testing/widgets/tabs/etalons/tabs_orientation_horizontal_with_strict_class (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/tabs/etalons/tabs_orientation_vertical (fluent-next.blue.light).png b/apps/demos/testing/widgets/tabs/etalons/tabs_orientation_vertical (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fad1f54e3d2e
Binary files /dev/null and b/apps/demos/testing/widgets/tabs/etalons/tabs_orientation_vertical (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/tabs/etalons/tabs_orientation_vertical_without_strict_class (fluent-next.blue.light).png b/apps/demos/testing/widgets/tabs/etalons/tabs_orientation_vertical_without_strict_class (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a23539295cb3
Binary files /dev/null and b/apps/demos/testing/widgets/tabs/etalons/tabs_orientation_vertical_without_strict_class (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/tabs/etalons/tabs_rtlenabled_true (fluent-next.blue.light).png b/apps/demos/testing/widgets/tabs/etalons/tabs_rtlenabled_true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e855911e1e5c
Binary files /dev/null and b/apps/demos/testing/widgets/tabs/etalons/tabs_rtlenabled_true (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/tabs/etalons/tabs_second_item_selection (fluent-next.blue.light).png b/apps/demos/testing/widgets/tabs/etalons/tabs_second_item_selection (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9da4ffed00a7
Binary files /dev/null and b/apps/demos/testing/widgets/tabs/etalons/tabs_second_item_selection (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/tabs/etalons/tabs_shownavbuttons_true (fluent-next.blue.light).png b/apps/demos/testing/widgets/tabs/etalons/tabs_shownavbuttons_true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..35bf3e059401
Binary files /dev/null and b/apps/demos/testing/widgets/tabs/etalons/tabs_shownavbuttons_true (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/tabs/etalons/tabs_stylingmode_secondary (fluent-next.blue.light).png b/apps/demos/testing/widgets/tabs/etalons/tabs_stylingmode_secondary (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f8e376c1359c
Binary files /dev/null and b/apps/demos/testing/widgets/tabs/etalons/tabs_stylingmode_secondary (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/tabs/etalons/tabs_third_item_selection (fluent-next.blue.light).png b/apps/demos/testing/widgets/tabs/etalons/tabs_third_item_selection (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ae803955dba6
Binary files /dev/null and b/apps/demos/testing/widgets/tabs/etalons/tabs_third_item_selection (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_first_opened (fluent-next.blue.light).png b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_first_opened (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e50edeeecec5
Binary files /dev/null and b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_first_opened (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_second_opened (fluent-next.blue.light).png b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_second_opened (fluent-next.blue.light).png
new file mode 100644
index 000000000000..55d997267d7e
Binary files /dev/null and b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_second_opened (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_third_opened (fluent-next.blue.light).png b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_third_opened (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1a9072b4fed9
Binary files /dev/null and b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_third_opened (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/toolbar/etalons/toolbar_multiline_mode_minimize (fluent-next.blue.light).png b/apps/demos/testing/widgets/toolbar/etalons/toolbar_multiline_mode_minimize (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8038b536c61f
Binary files /dev/null and b/apps/demos/testing/widgets/toolbar/etalons/toolbar_multiline_mode_minimize (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/toolbar/etalons/toolbar_singleline_mode_init (fluent-next.blue.light).png b/apps/demos/testing/widgets/toolbar/etalons/toolbar_singleline_mode_init (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fad3adc1d944
Binary files /dev/null and b/apps/demos/testing/widgets/toolbar/etalons/toolbar_singleline_mode_init (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/toolbar/etalons/toolbar_singleline_mode_menu_open (fluent-next.blue.light).png b/apps/demos/testing/widgets/toolbar/etalons/toolbar_singleline_mode_menu_open (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d99cc578b566
Binary files /dev/null and b/apps/demos/testing/widgets/toolbar/etalons/toolbar_singleline_mode_menu_open (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/treeview/etalons/treeview_disabled_node_selection_mode_never (fluent-next.blue.light).png b/apps/demos/testing/widgets/treeview/etalons/treeview_disabled_node_selection_mode_never (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5a26a10507bc
Binary files /dev/null and b/apps/demos/testing/widgets/treeview/etalons/treeview_disabled_node_selection_mode_never (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/treeview/etalons/treeview_disabled_node_selection_mode_recursive_and_all (fluent-next.blue.light).png b/apps/demos/testing/widgets/treeview/etalons/treeview_disabled_node_selection_mode_recursive_and_all (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d69c8675ec5b
Binary files /dev/null and b/apps/demos/testing/widgets/treeview/etalons/treeview_disabled_node_selection_mode_recursive_and_all (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/treeview/etalons/treeview_disabled_node_selection_mode_select_all_children (fluent-next.blue.light).png b/apps/demos/testing/widgets/treeview/etalons/treeview_disabled_node_selection_mode_select_all_children (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8bc9f9e72aaf
Binary files /dev/null and b/apps/demos/testing/widgets/treeview/etalons/treeview_disabled_node_selection_mode_select_all_children (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/vectormap/etalons/vector_map_viewport-changing (fluent-next.blue.light).png b/apps/demos/testing/widgets/vectormap/etalons/vector_map_viewport-changing (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8b644c5af37a
Binary files /dev/null and b/apps/demos/testing/widgets/vectormap/etalons/vector_map_viewport-changing (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/vectormap/etalons/vectormap_tooltip (fluent-next.blue.light).png b/apps/demos/testing/widgets/vectormap/etalons/vectormap_tooltip (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c199407d94d7
Binary files /dev/null and b/apps/demos/testing/widgets/vectormap/etalons/vectormap_tooltip (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/vectormap/etalons/zoom_vector_map_by_control_bar (fluent-next.blue.light).png b/apps/demos/testing/widgets/vectormap/etalons/zoom_vector_map_by_control_bar (fluent-next.blue.light).png
new file mode 100644
index 000000000000..806c9d02a7bb
Binary files /dev/null and b/apps/demos/testing/widgets/vectormap/etalons/zoom_vector_map_by_control_bar (fluent-next.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 66f6175a0763..12f033d38a62 100644
--- a/apps/demos/utils/visual-tests/helpers/theme-utils.js
+++ b/apps/demos/utils/visual-tests/helpers/theme-utils.js
@@ -1,13 +1,14 @@
 export const THEME = {
   generic: 'generic.light',
   fluent: 'fluent.blue.light',
+  'fluent-next': 'fluent-next.blue.light',
   material: 'material.blue.light',
 };
 
 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 isFluent = (theme = process.env.THEME) => (theme ?? DEFAULT_THEME_NAME).startsWith('fluent');
 export const getThemePostfix = (theme = DEFAULT_THEME_NAME) => ` (${theme})`;
 
 export const getScreenshotName = (baseName, theme) => {
diff --git a/apps/demos/utils/visual-tests/testcafe-runner.ts b/apps/demos/utils/visual-tests/testcafe-runner.ts
index 869255d77d3d..bff838592832 100644
--- a/apps/demos/utils/visual-tests/testcafe-runner.ts
+++ b/apps/demos/utils/visual-tests/testcafe-runner.ts
@@ -91,7 +91,7 @@ async function main() {
     .browsers(process.env.BROWSERS || 'chrome --no-sandbox --disable-dev-shm-usage --disable-partial-raster --disable-skia-runtime-opts --run-all-compositor-stages-before-draw --disable-new-content-rendering-timeout --disable-threaded-animation --disable-threaded-scrolling --disable-checker-imaging --disable-image-animation-resync --use-gl=swiftshader --disable-features=PaintHolding --js-flags=--random-seed=2147483647 --font-render-hinting=none --disable-font-subpixel-positioning')
     .concurrency(concurrency || 1)
     .run({
-      quarantineMode: { successThreshold: 1, attemptLimit: 3 },
+      quarantineMode: false, // { successThreshold: 1, attemptLimit: 3 },
       // @ts-expect-error ts-error
       hooks: {
         test: {
diff --git a/e2e/testcafe-devextreme/helpers/accessibility/test.ts b/e2e/testcafe-devextreme/helpers/accessibility/test.ts
index 7108b304554c..42aa9d0ab8c4 100644
--- a/e2e/testcafe-devextreme/helpers/accessibility/test.ts
+++ b/e2e/testcafe-devextreme/helpers/accessibility/test.ts
@@ -1,7 +1,7 @@
 import { ElementContext } from 'axe-core';
 import type { WidgetName } from 'devextreme-testcafe-models/types';
 import { createWidget } from '../createWidget';
-import { isFluent } from '../themeUtils';
+import { getThemeName } from '../themeUtils';
 import { a11yCheck, A11yCheckOptions } from './utils';
 import { generateOptionMatrix, Options } from '../generateOptionMatrix';
 
@@ -16,7 +16,9 @@ export interface Configuration<TComponentOptions = unknown> {
 export const defaultSelector = '#container';
 const defaultOptions = {};
 const defaultCreated = async () => {};
-const defaultA11yCheckConfig = isFluent() ? {} : {
+// Only the base fluent theme runs the full ruleset; fluent-next (re-tokenized fluent)
+// and material re-check color-contrast only — the rest is already covered by fluent.
+const defaultA11yCheckConfig = getThemeName() === 'fluent' ? {} : {
   runOnly: 'color-contrast',
 };
 
diff --git a/e2e/testcafe-devextreme/helpers/accessibility/utils.ts b/e2e/testcafe-devextreme/helpers/accessibility/utils.ts
index 2a1bd13f6556..db25533ac5e0 100644
--- a/e2e/testcafe-devextreme/helpers/accessibility/utils.ts
+++ b/e2e/testcafe-devextreme/helpers/accessibility/utils.ts
@@ -1,12 +1,24 @@
 /* eslint-disable spellcheck/spell-checker */
 import { axeCheck, createReport } from '@testcafe-community/axe';
 import { ElementContext, RunOptions } from 'axe-core';
+import { getThemeName } from '../themeUtils';
 
 export interface A11yCheckOptions extends RunOptions {
   runOnly?: any;
 }
 
 const defaultOptions = {};
+const COLOR_CONTRAST_RULE = 'color-contrast';
+
+// axe gives a `rule`-type runOnly precedence over rules[id].enabled, so forcing runOnly would
+// silently re-enable color-contrast for callers that opted out of it (or narrowed runOnly).
+const isColorContrastChecked = (options: A11yCheckOptions): boolean => {
+  if (options.rules?.[COLOR_CONTRAST_RULE]?.enabled === false) {
+    return false;
+  }
+
+  return options.runOnly === undefined || options.runOnly === COLOR_CONTRAST_RULE;
+};
 
 const createFullReport = (results, configuration) => {
   let report = createReport(results.violations);
@@ -25,7 +37,20 @@ export const a11yCheck = async (
   configuration = {},
 ):
 Promise<void> => {
-  const { error, results } = await axeCheck(t, selector, { rules: {}, ...options });
+  // fluent-next shares fluent's structure/ARIA (already covered by the fluent run),
+  // so only color-contrast is re-checked for it — regardless of the caller's config.
+  const isColorContrastOnly = getThemeName() === 'fluent-next';
+
+  // Nothing is left to check: the caller excluded the only rule this theme runs.
+  if (isColorContrastOnly && !isColorContrastChecked(options)) {
+    return;
+  }
+
+  const effectiveOptions: A11yCheckOptions = isColorContrastOnly
+    ? { ...options, runOnly: COLOR_CONTRAST_RULE }
+    : options;
+
+  const { error, results } = await axeCheck(t, selector, { rules: {}, ...effectiveOptions });
 
   await t
     .expect(error)
diff --git a/e2e/testcafe-devextreme/helpers/changeTheme.ts b/e2e/testcafe-devextreme/helpers/changeTheme.ts
index fb79b10a861d..632b08e7e765 100644
--- a/e2e/testcafe-devextreme/helpers/changeTheme.ts
+++ b/e2e/testcafe-devextreme/helpers/changeTheme.ts
@@ -3,8 +3,15 @@ import { ClientFunction } from 'testcafe';
 export const changeTheme = async (themeName: string):
 Promise<any> => ClientFunction(
   () => new Promise((resolve) => {
-    (window as any).DevExpress.ui.themes.ready(resolve);
-    (window as any).DevExpress.ui.themes.current(themeName);
+    const dxUi = (window as any).DevExpress?.ui;
+
+    if (!dxUi) {
+      resolve(undefined);
+      return;
+    }
+
+    dxUi.themes.ready(resolve);
+    dxUi.themes.current(themeName);
   }),
   { dependencies: { themeName } },
 )();
diff --git a/e2e/testcafe-devextreme/helpers/testPageUtils.ts b/e2e/testcafe-devextreme/helpers/testPageUtils.ts
index 6748ab2f1687..3d7643b0fd2a 100644
--- a/e2e/testcafe-devextreme/helpers/testPageUtils.ts
+++ b/e2e/testcafe-devextreme/helpers/testPageUtils.ts
@@ -64,6 +64,21 @@ export async function loadAxeCore(t: TestController): Promise<void> {
   })).with({ boundTestRun: t })();
 }
 
+// Accessibility checks must run in a real-app-like page: body carries dx-viewport,
+// and the runtime attaches dx-theme-<name>/-typography/dx-color-scheme-* classes to it
+// (they define the page background that color-contrast is measured against).
+// Plain dx-surface (the default container.html state) never receives these classes.
+export async function applyViewportEnvironment(t: TestController): Promise<void> {
+  await ClientFunction(() => {
+    const { body } = document;
+    body.classList.remove('dx-surface');
+    body.classList.add('dx-viewport');
+
+    // re-evaluates the viewport -> fires viewPortChanged -> themes attach their classes
+    (window as any).DevExpress.viewPort('.dx-viewport');
+  }).with({ boundTestRun: t })();
+}
+
 export async function loadShadowDomExtension(t: TestController): Promise<void> {
   await ClientFunction(() => new Promise<void>((resolve, reject) => {
     if (document.getElementById('shadow-dom-extension-script')) {
diff --git a/e2e/testcafe-devextreme/runner.ts b/e2e/testcafe-devextreme/runner.ts
index 0be6eeeafc80..a3ca603c95b6 100644
--- a/e2e/testcafe-devextreme/runner.ts
+++ b/e2e/testcafe-devextreme/runner.ts
@@ -7,6 +7,7 @@ import parseArgs from 'minimist';
 import { DEFAULT_BROWSER_SIZE } from './helpers/const';
 import {
   addShadowRootTree,
+  applyViewportEnvironment,
   clearTestPage,
   loadAxeCore,
   loadShadowDomExtension,
@@ -99,8 +100,15 @@ const getTestCafeConfig = (cache: boolean): Partial<TestCafeConfigurationOptions
 
 const changeTheme = async (t: TestController, themeName: string): Promise<void> => {
   const changeThemeClientFn = ClientFunction(() => new Promise<void>((resolve) => {
-    (window as any).DevExpress.ui.themes.ready(resolve);
-    (window as any).DevExpress.ui.themes.current(themeName);
+    const dxUi = (window as any).DevExpress?.ui;
+
+    if (!dxUi) {
+      resolve();
+      return;
+    }
+
+    dxUi.themes.ready(resolve);
+    dxUi.themes.current(themeName);
   }), { dependencies: { themeName } });
 
   return changeThemeClientFn.with({ boundTestRun: t })();
@@ -114,6 +122,15 @@ function setTestingTheme(args: ParsedArgs): void {
   process.env.theme = args.theme || 'fluent.blue.light';
 }
 
+const normalizeThemeForMatching = (themeName?: string): string | undefined => themeName?.replace(/^fluent-next/, 'fluent');
+
+const matchTheme = (
+  actualTheme: string | undefined,
+  expectedTheme: string | undefined,
+): boolean => (
+  normalizeThemeForMatching(actualTheme) === normalizeThemeForMatching(expectedTheme)
+);
+
 function setShadowDom(args: ParsedArgs): void {
   process.env.shadowDom = args.shadowDom.toString();
 }
@@ -287,7 +304,7 @@ async function main() {
         testMeta?: any,
       ) => {
         if (testMeta?.runInTheme) {
-          return testMeta.runInTheme === process.env.theme;
+          return matchTheme(testMeta.runInTheme, process.env.theme);
         }
         return true;
       });
@@ -299,7 +316,7 @@ async function main() {
           _fixturePath: string,
           testMeta?: any,
         ) => {
-          if (testMeta?.runInTheme === process.env.theme) {
+          if (matchTheme(testMeta?.runInTheme, process.env.theme)) {
             return true;
           }
 
@@ -307,7 +324,7 @@ async function main() {
             return false;
           }
 
-          return testMeta.themes.includes(args.theme);
+          return testMeta.themes.some((themeName: string) => matchTheme(themeName, args.theme));
         });
       }
 
@@ -363,6 +380,7 @@ async function main() {
               await t.resizeWindow(width, height);
             } else {
               await loadAxeCore(t);
+              await applyViewportEnvironment(t);
             }
 
             const currentTheme = await getCurrentTheme(t) || 'fluent.blue.light';
diff --git a/e2e/testcafe-devextreme/tests/accessibility/switch.ts b/e2e/testcafe-devextreme/tests/accessibility/switch.ts
index efae089dd43d..2d719b18acb1 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/switch.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/switch.ts
@@ -1,6 +1,7 @@
+import { ElementContext } from 'axe-core';
 import { Properties } from 'devextreme/ui/switch.d';
 import url from '../../helpers/getPageUrl';
-import { testAccessibility, Configuration } from '../../helpers/accessibility/test';
+import { testAccessibility, Configuration, defaultSelector } from '../../helpers/accessibility/test';
 import { Options } from '../../helpers/generateOptionMatrix';
 
 fixture.disablePageReloads`Accessibility`
@@ -15,10 +16,21 @@ const options: Options<Properties> = {
 
 const a11yCheckConfig = {};
 
+// The ON/OFF captions are decorative in the fluent, fluent-next and material themes:
+// they are hidden with `color: transparent`, and the caption of the inactive state is
+// translated outside the switch, where axe flattens its transparent text against the
+// page canvas instead of the page background and reports a bogus contrast violation.
+// The switch state is conveyed by aria-checked, so captions are excluded from checks.
+const selector: ElementContext = {
+  include: [defaultSelector],
+  exclude: ['.dx-switch-on', '.dx-switch-off'],
+};
+
 const configuration: Configuration = {
   component: 'dxSwitch',
   a11yCheckConfig,
   options,
+  selector,
 };
 
 testAccessibility(configuration);
diff --git a/e2e/testcafe-devextreme/tests/accessibility/treeList/common.ts b/e2e/testcafe-devextreme/tests/accessibility/treeList/common.ts
index 3661148b3cc4..3a7e601f909c 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/treeList/common.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/treeList/common.ts
@@ -2,7 +2,7 @@ import TreeList from 'devextreme-testcafe-models/treeList';
 import { a11yCheck } from '../../../helpers/accessibility/utils';
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
-import { isFluent } from '../../../helpers/themeUtils';
+import { getThemeName } from '../../../helpers/themeUtils';
 
 fixture.disablePageReloads`TreeList - a11y`
   .page(url(__dirname, '../../container.html'));
@@ -27,7 +27,7 @@ function getData(rowCount: number): Record<string, any>[] {
   return data;
 }
 
-const a11yCheckConfig = isFluent() ? {} : { runOnly: 'color-contrast' };
+const a11yCheckConfig = getThemeName() === 'fluent' ? {} : { runOnly: 'color-contrast' };
 
 test('Search panel, filter panel, pager and selection', async (t) => {
   const treeList = new TreeList(TREE_LIST_SELECTOR);
diff --git a/e2e/testcafe-devextreme/tests/cardView/columnChooser/etalons/card-view_column-chooser_drag_mode (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/columnChooser/etalons/card-view_column-chooser_drag_mode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..faaa94e963ae
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/columnChooser/etalons/card-view_column-chooser_drag_mode (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/columnChooser/etalons/card-view_column-chooser_select_mode (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/columnChooser/etalons/card-view_column-chooser_select_mode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2a0f73bab308
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/columnChooser/etalons/card-view_column-chooser_select_mode (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/columnChooser/etalons/card-view_with_opened_column-chooser (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/columnChooser/etalons/card-view_with_opened_column-chooser (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8f4ca02b74fc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/columnChooser/etalons/card-view_with_opened_column-chooser (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/columnSortable/etalons/card-view_column-sortable_empty-header-panel_dropzone_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/columnSortable/etalons/card-view_column-sortable_empty-header-panel_dropzone_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8f7f7371a6e5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/columnSortable/etalons/card-view_column-sortable_empty-header-panel_dropzone_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/columnSortable/etalons/card-view_column-sortable_empty-header-panel_dropzone_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/columnSortable/etalons/card-view_column-sortable_empty-header-panel_dropzone_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ac6f0eff58bc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/columnSortable/etalons/card-view_column-sortable_empty-header-panel_dropzone_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/columnSortable/etalons/card-view_column-sortable_header-panel_dragging-column (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/columnSortable/etalons/card-view_column-sortable_header-panel_dragging-column (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b40f5c032fda
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/columnSortable/etalons/card-view_column-sortable_header-panel_dragging-column (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/columnSortable/etalons/card-view_column-sortable_header-panel_dropzone_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/columnSortable/etalons/card-view_column-sortable_header-panel_dropzone_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f4d579b3d796
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/columnSortable/etalons/card-view_column-sortable_header-panel_dropzone_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/columnSortable/etalons/card-view_column-sortable_header-panel_dropzone_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/columnSortable/etalons/card-view_column-sortable_header-panel_dropzone_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f850267866ab
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/columnSortable/etalons/card-view_column-sortable_header-panel_dropzone_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/contextMenu/etalons/card-view_context-menu_keyboard_position (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/contextMenu/etalons/card-view_context-menu_keyboard_position (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6e391786497d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/contextMenu/etalons/card-view_context-menu_keyboard_position (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/contextMenu/etalons/card-view_context-menu_mouse-click_position (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/contextMenu/etalons/card-view_context-menu_mouse-click_position (fluent-next.blue.light).png
new file mode 100644
index 000000000000..61a26431307b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/contextMenu/etalons/card-view_context-menu_mouse-click_position (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/editing/etalons/editing-default-render (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/editing/etalons/editing-default-render (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fa8b545fd1fb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/editing/etalons/editing-default-render (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/editing/etalons/editing-popup-add (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/editing/etalons/editing-popup-add (fluent-next.blue.light).png
new file mode 100644
index 000000000000..703a2fcabf12
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/editing/etalons/editing-popup-add (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/editing/etalons/editing-popup-edit (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/editing/etalons/editing-popup-edit (fluent-next.blue.light).png
new file mode 100644
index 000000000000..30a644d50e70
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/editing/etalons/editing-popup-edit (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/etalons/content-no-data (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/etalons/content-no-data (fluent-next.blue.light).png
new file mode 100644
index 000000000000..97e9175b63eb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/etalons/content-no-data (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/etalons/cover-default-render (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/etalons/cover-default-render (fluent-next.blue.light).png
new file mode 100644
index 000000000000..333894324f08
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/etalons/cover-default-render (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/etalons/filter-value-edit-paging-update-remoteOperations-false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/etalons/filter-value-edit-paging-update-remoteOperations-false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e4d7cf2a8425
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/etalons/filter-value-edit-paging-update-remoteOperations-false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/etalons/filter-value-edit-paging-update-remoteOperations-true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/etalons/filter-value-edit-paging-update-remoteOperations-true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e4d7cf2a8425
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/etalons/filter-value-edit-paging-update-remoteOperations-true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/etalons/load-panel (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/etalons/load-panel (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9dcb658d8d37
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/etalons/load-panel (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/etalons/load-panel (fluent-next.blue.light)_mask.png b/e2e/testcafe-devextreme/tests/cardView/etalons/load-panel (fluent-next.blue.light)_mask.png
new file mode 100644
index 000000000000..6733a60d4820
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/etalons/load-panel (fluent-next.blue.light)_mask.png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/etalons/load-panel-with-large-height (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/etalons/load-panel-with-large-height (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ec7c054d6d82
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/etalons/load-panel-with-large-height (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/etalons/load-panel-with-large-height (fluent-next.blue.light)_mask.png b/e2e/testcafe-devextreme/tests/cardView/etalons/load-panel-with-large-height (fluent-next.blue.light)_mask.png
new file mode 100644
index 000000000000..634b2b3b9f0e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/etalons/load-panel-with-large-height (fluent-next.blue.light)_mask.png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/filterPanel/etalons/cardView_FilterBuilderPopup (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/filterPanel/etalons/cardView_FilterBuilderPopup (fluent-next.blue.light).png
new file mode 100644
index 000000000000..218e875b3c12
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/filterPanel/etalons/cardView_FilterBuilderPopup (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/filterPanel/etalons/cardView_FilterPanel (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/filterPanel/etalons/cardView_FilterPanel (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3658ca4ebeea
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/filterPanel/etalons/cardView_FilterPanel (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/headerFilter/etalons/card-view_header-filter_popup-with-list (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/headerFilter/etalons/card-view_header-filter_popup-with-list (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0b94622e6902
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/headerFilter/etalons/card-view_header-filter_popup-with-list (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/headerFilter/etalons/card-view_header-filter_popup-with-search (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/headerFilter/etalons/card-view_header-filter_popup-with-search (fluent-next.blue.light).png
new file mode 100644
index 000000000000..21fadc6b933e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/headerFilter/etalons/card-view_header-filter_popup-with-search (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/headerFilter/etalons/card-view_header-filter_popup-with-tree (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/headerFilter/etalons/card-view_header-filter_popup-with-tree (fluent-next.blue.light).png
new file mode 100644
index 000000000000..54073e2f701e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/headerFilter/etalons/card-view_header-filter_popup-with-tree (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/card-view-column-chooser-opened-on-empty-header-panel-link-click (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/card-view-column-chooser-opened-on-empty-header-panel-link-click (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e8e28ab836d4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/card-view-column-chooser-opened-on-empty-header-panel-link-click (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/default-render (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/default-render (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7068b1ab67eb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/default-render (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/header-filter-enabled (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/header-filter-enabled (fluent-next.blue.light).png
new file mode 100644
index 000000000000..743e9530fe2a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/header-filter-enabled (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/header-filter-enabled-with-values (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/header-filter-enabled-with-values (fluent-next.blue.light).png
new file mode 100644
index 000000000000..19ad27dbe4c7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/header-filter-enabled-with-values (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/multiple-sorting (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/multiple-sorting (fluent-next.blue.light).png
new file mode 100644
index 000000000000..de98fd951e91
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/multiple-sorting (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/multiple-sorting-with-header-filter-enabled (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/multiple-sorting-with-header-filter-enabled (fluent-next.blue.light).png
new file mode 100644
index 000000000000..948ff6277705
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/multiple-sorting-with-header-filter-enabled (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/render-with-horizontal-scroll (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/render-with-horizontal-scroll (fluent-next.blue.light).png
new file mode 100644
index 000000000000..77291ec82f13
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/render-with-horizontal-scroll (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/single-sorting (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/single-sorting (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a8983a595948
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/single-sorting (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/single-sorting-with-header-filter-enabled (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/single-sorting-with-header-filter-enabled (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6b3591892bad
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/single-sorting-with-header-filter-enabled (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/sortable-indicator-first-rtl-false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/sortable-indicator-first-rtl-false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8a2dc41ba4fe
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/sortable-indicator-first-rtl-false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/sortable-indicator-first-rtl-true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/sortable-indicator-first-rtl-true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e7e025373741
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/sortable-indicator-first-rtl-true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/sortable-indicator-last-rtl-false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/sortable-indicator-last-rtl-false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..42994b758776
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/sortable-indicator-last-rtl-false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/sortable-indicator-last-rtl-true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/sortable-indicator-last-rtl-true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0fe62ce0f797
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/sortable-indicator-last-rtl-true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/sortable-indicator-middle-rtl-false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/sortable-indicator-middle-rtl-false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..27d4027891d3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/sortable-indicator-middle-rtl-false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/sortable-indicator-middle-rtl-true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/sortable-indicator-middle-rtl-true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..11a9e1d7c07b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/headerPanel/etalons/sortable-indicator-middle-rtl-true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/search/etalons/card-view_search_text-highlighting (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/search/etalons/card-view_search_text-highlighting (fluent-next.blue.light).png
new file mode 100644
index 000000000000..786f5c71a045
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/search/etalons/card-view_search_text-highlighting (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_checkbox_visibility_with_showCheckBoxesMode_=_onClick (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_checkbox_visibility_with_showCheckBoxesMode_=_onClick (fluent-next.blue.light).png
new file mode 100644
index 000000000000..38debab93d05
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_checkbox_visibility_with_showCheckBoxesMode_=_onClick (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_checkboxes_visibility_with_showCheckBoxesMode_=_onClick (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_checkboxes_visibility_with_showCheckBoxesMode_=_onClick (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6e08b9c1cf29
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_checkboxes_visibility_with_showCheckBoxesMode_=_onClick (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_always (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_always (fluent-next.blue.light).png
new file mode 100644
index 000000000000..83cdc6c6b400
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_always (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_none (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_none (fluent-next.blue.light).png
new file mode 100644
index 000000000000..41648d5b1789
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_none (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c10ea12b1c8f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..337830a14a20
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c10ea12b1c8f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..41648d5b1789
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..83cdc6c6b400
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..41648d5b1789
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_without_select-all (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_without_select-all (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b1da1ef31a4e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_without_select-all (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_single_selection (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_single_selection (fluent-next.blue.light).png
new file mode 100644
index 000000000000..09ad2573ebe3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_single_selection (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_allow_sorting_api (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_allow_sorting_api (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8b9f29242e61
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_allow_sorting_api (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_filed_api (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_filed_api (fluent-next.blue.light).png
new file mode 100644
index 000000000000..559ac3cbe96e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_filed_api (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_function_api (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_function_api (fluent-next.blue.light).png
new file mode 100644
index 000000000000..36499d584d5c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_function_api (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_default_render (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_default_render (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f054e1809f4f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_default_render (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_with_multiple_sorting_render (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_with_multiple_sorting_render (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2d6c524ead09
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_with_multiple_sorting_render (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_show_sort_indexes_api (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_show_sort_indexes_api (fluent-next.blue.light).png
new file mode 100644
index 000000000000..349705ce6f06
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_show_sort_indexes_api (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sort_index_api (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sort_index_api (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9d97a2885be8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sort_index_api (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sorting_method_api (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sorting_method_api (fluent-next.blue.light).png
new file mode 100644
index 000000000000..106bb045387e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sorting_method_api (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/etalons/Icon set (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/etalons/Icon set (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0f5a1769a2cc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/etalons/Icon set (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/etalons/SVG icon set (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/etalons/SVG icon set (fluent-next.blue.light).png
new file mode 100644
index 000000000000..15003b01b2a7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/etalons/SVG icon set (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/filterBuilder/etalons/dropdown-space (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/filterBuilder/etalons/dropdown-space (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9526cff73f65
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/filterBuilder/etalons/dropdown-space (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/filterBuilder/etalons/field-dropdown (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/filterBuilder/etalons/field-dropdown (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ef9766389b85
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/filterBuilder/etalons/field-dropdown (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/filterBuilder/etalons/operation-dropdown (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/filterBuilder/etalons/operation-dropdown (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6543dfdc4d4b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/filterBuilder/etalons/operation-dropdown (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/filterBuilder/etalons/value-editor-checkbox (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/filterBuilder/etalons/value-editor-checkbox (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bcf22194aaff
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/filterBuilder/etalons/value-editor-checkbox (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/filterBuilder/etalons/value-editor-switch (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/filterBuilder/etalons/value-editor-switch (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c4a91e98ba8c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/filterBuilder/etalons/value-editor-switch (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/gantt/etalons/Gantt show dependencies (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/gantt/etalons/Gantt show dependencies (fluent-next.blue.light).png
new file mode 100644
index 000000000000..99f4f55a7d74
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/gantt/etalons/Gantt show dependencies (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/gantt/etalons/Gantt show resourced (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/gantt/etalons/Gantt show resourced (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1e88927a3ead
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/gantt/etalons/Gantt show resourced (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_it-si_false-snb_false-spss_false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_it-si_false-snb_false-spss_false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..860815e6990b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_it-si_false-snb_false-spss_false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_it-si_false-snb_false-spss_true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_it-si_false-snb_false-spss_true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b615e89e6e05
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_it-si_false-snb_false-spss_true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_it-si_false-snb_true-spss_false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_it-si_false-snb_true-spss_false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..860815e6990b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_it-si_false-snb_true-spss_false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_it-si_false-snb_true-spss_true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_it-si_false-snb_true-spss_true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b615e89e6e05
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_it-si_false-snb_true-spss_true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_it-si_true-snb_false-spss_false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_it-si_true-snb_false-spss_false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8c86b0cd7b91
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_it-si_true-snb_false-spss_false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_it-si_true-snb_false-spss_true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_it-si_true-snb_false-spss_true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2d9678eaee72
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_it-si_true-snb_false-spss_true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_it-si_true-snb_true-spss_false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_it-si_true-snb_true-spss_false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8c86b0cd7b91
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_it-si_true-snb_true-spss_false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_it-si_true-snb_true-spss_true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_it-si_true-snb_true-spss_true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2d9678eaee72
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_it-si_true-snb_true-spss_true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_no_it-si_false-snb_false-spss_false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_no_it-si_false-snb_false-spss_false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..860815e6990b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_no_it-si_false-snb_false-spss_false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_no_it-si_false-snb_false-spss_true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_no_it-si_false-snb_false-spss_true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b615e89e6e05
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_no_it-si_false-snb_false-spss_true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_no_it-si_false-snb_true-spss_false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_no_it-si_false-snb_true-spss_false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..860815e6990b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_no_it-si_false-snb_true-spss_false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_no_it-si_false-snb_true-spss_true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_no_it-si_false-snb_true-spss_true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b615e89e6e05
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_no_it-si_false-snb_true-spss_true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_no_it-si_true-snb_false-spss_false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_no_it-si_true-snb_false-spss_false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c69789a96cba
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_no_it-si_true-snb_false-spss_false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_no_it-si_true-snb_false-spss_true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_no_it-si_true-snb_false-spss_true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1647e0f7a59d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_no_it-si_true-snb_false-spss_true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_no_it-si_true-snb_true-spss_false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_no_it-si_true-snb_true-spss_false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c69789a96cba
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_no_it-si_true-snb_true-spss_false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_no_it-si_true-snb_true-spss_true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_no_it-si_true-snb_true-spss_true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1647e0f7a59d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_compact-has_no_it-si_true-snb_true-spss_true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_it-si_false-snb_false-spss_false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_it-si_false-snb_false-spss_false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..19e8e1e1677b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_it-si_false-snb_false-spss_false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_it-si_false-snb_false-spss_true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_it-si_false-snb_false-spss_true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dc13e0bafe39
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_it-si_false-snb_false-spss_true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_it-si_false-snb_true-spss_false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_it-si_false-snb_true-spss_false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..985efb4cb570
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_it-si_false-snb_true-spss_false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_it-si_false-snb_true-spss_true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_it-si_false-snb_true-spss_true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c4c0bee9f4df
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_it-si_false-snb_true-spss_true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_it-si_true-snb_false-spss_false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_it-si_true-snb_false-spss_false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3515c9eaf684
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_it-si_true-snb_false-spss_false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_it-si_true-snb_false-spss_true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_it-si_true-snb_false-spss_true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..00d948e78aa4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_it-si_true-snb_false-spss_true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_it-si_true-snb_true-spss_false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_it-si_true-snb_true-spss_false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b37cf64c40ba
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_it-si_true-snb_true-spss_false (fluent-next.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 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_it-si_true-snb_true-spss_true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..883a3b6df03e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_it-si_true-snb_true-spss_true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_no_it-si_false-snb_false-spss_false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_no_it-si_false-snb_false-spss_false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..19e8e1e1677b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_no_it-si_false-snb_false-spss_false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_no_it-si_false-snb_false-spss_true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_no_it-si_false-snb_false-spss_true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dc13e0bafe39
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_no_it-si_false-snb_false-spss_true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_no_it-si_false-snb_true-spss_false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_no_it-si_false-snb_true-spss_false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..985efb4cb570
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_no_it-si_false-snb_true-spss_false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_no_it-si_false-snb_true-spss_true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_no_it-si_false-snb_true-spss_true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c4c0bee9f4df
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_no_it-si_false-snb_true-spss_true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_no_it-si_true-snb_false-spss_false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_no_it-si_true-snb_false-spss_false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d95927199c6e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_no_it-si_true-snb_false-spss_false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_no_it-si_true-snb_false-spss_true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_no_it-si_true-snb_false-spss_true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..083a92e952c2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_no_it-si_true-snb_false-spss_true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_no_it-si_true-snb_true-spss_false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_no_it-si_true-snb_true-spss_false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..14f66bd04db1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_no_it-si_true-snb_true-spss_false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_no_it-si_true-snb_true-spss_true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_no_it-si_true-snb_true-spss_true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ac067a4c1fa4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pagination/etalons/pagination-dm_full-has_no_it-si_true-snb_true-spss_true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/PivotGrid contextmenu width (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/PivotGrid contextmenu width (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a34b57b1f936
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/PivotGrid contextmenu width (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/PivotGrid rows content height=100%(350px),useNative=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/PivotGrid rows content height=100%(350px),useNative=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..68836de4acc4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/PivotGrid rows content height=100%(350px),useNative=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/PivotGrid rows content height=100%(350px),useNative=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/PivotGrid rows content height=100%(350px),useNative=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..043898d43d57
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/PivotGrid rows content height=100%(350px),useNative=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/PivotGrid rows content height=100%(450px),useNative=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/PivotGrid rows content height=100%(450px),useNative=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ecb9ef2934dc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/PivotGrid rows content height=100%(450px),useNative=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/PivotGrid rows content height=100%(450px),useNative=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/PivotGrid rows content height=100%(450px),useNative=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..92a21212c154
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/PivotGrid rows content height=100%(450px),useNative=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/PivotGrid rows sync dir=both,useNative=false,mode=standart (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/PivotGrid rows sync dir=both,useNative=false,mode=standart (fluent-next.blue.light).png
new file mode 100644
index 000000000000..49ea460d9922
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/PivotGrid rows sync dir=both,useNative=false,mode=standart (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/PivotGrid rows sync dir=both,useNative=true,mode=standart (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/PivotGrid rows sync dir=both,useNative=true,mode=standart (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5884952fef76
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/PivotGrid rows sync dir=both,useNative=true,mode=standart (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/PivotGrid rows sync dir=vertical,useNative=false,mode=standart (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/PivotGrid rows sync dir=vertical,useNative=false,mode=standart (fluent-next.blue.light).png
new file mode 100644
index 000000000000..037e9687303d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/PivotGrid rows sync dir=vertical,useNative=false,mode=standart (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/PivotGrid rows sync dir=vertical,useNative=true,mode=standart (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/PivotGrid rows sync dir=vertical,useNative=true,mode=standart (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2b1ae277e904
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/PivotGrid rows sync dir=vertical,useNative=true,mode=standart (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/headerFilter - after scroll (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/headerFilter - after scroll (fluent-next.blue.light).png
new file mode 100644
index 000000000000..72f040d253f9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/headerFilter - after scroll (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/headerFilter - before scroll (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/headerFilter - before scroll (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0df93bc18f84
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/headerFilter - before scroll (fluent-next.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 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/rows_do_not_overlap_data_fields_if_virtual_scrolling_enabled_T1210807 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1c61d7a3dcc0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/rows_do_not_overlap_data_fields_if_virtual_scrolling_enabled_T1210807 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/scrollbar-margin_step-0_useNative-false_rtl-false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/scrollbar-margin_step-0_useNative-false_rtl-false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5a6e107b4754
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/scrollbar-margin_step-0_useNative-false_rtl-false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/scrollbar-margin_step-0_useNative-false_rtl-true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/scrollbar-margin_step-0_useNative-false_rtl-true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..acec8abd448a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/scrollbar-margin_step-0_useNative-false_rtl-true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/scrollbar-margin_step-0_useNative-true_rtl-false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/scrollbar-margin_step-0_useNative-true_rtl-false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7928c4908b00
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/scrollbar-margin_step-0_useNative-true_rtl-false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/scrollbar-margin_step-0_useNative-true_rtl-true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/scrollbar-margin_step-0_useNative-true_rtl-true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..114daec04db7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/scrollbar-margin_step-0_useNative-true_rtl-true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/scrollbar-margin_step-1_useNative-false_rtl-false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/scrollbar-margin_step-1_useNative-false_rtl-false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c75c76f7f200
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/scrollbar-margin_step-1_useNative-false_rtl-false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/scrollbar-margin_step-1_useNative-false_rtl-true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/scrollbar-margin_step-1_useNative-false_rtl-true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..358122633823
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/scrollbar-margin_step-1_useNative-false_rtl-true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/scrollbar-margin_step-1_useNative-true_rtl-false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/scrollbar-margin_step-1_useNative-true_rtl-false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..15cfa6714f3f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/scrollbar-margin_step-1_useNative-true_rtl-false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/scrollbar-margin_step-1_useNative-true_rtl-true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/scrollbar-margin_step-1_useNative-true_rtl-true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b5c621f22cc8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/scrollbar-margin_step-1_useNative-true_rtl-true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/scrollbar-margin_step-2_useNative-false_rtl-false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/scrollbar-margin_step-2_useNative-false_rtl-false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5a6e107b4754
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/scrollbar-margin_step-2_useNative-false_rtl-false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/scrollbar-margin_step-2_useNative-false_rtl-true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/scrollbar-margin_step-2_useNative-false_rtl-true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..acec8abd448a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/scrollbar-margin_step-2_useNative-false_rtl-true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/scrollbar-margin_step-2_useNative-true_rtl-false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/scrollbar-margin_step-2_useNative-true_rtl-false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7928c4908b00
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/scrollbar-margin_step-2_useNative-true_rtl-false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/scrollbar-margin_step-2_useNative-true_rtl-true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/scrollbar-margin_step-2_useNative-true_rtl-true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..114daec04db7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/etalons/scrollbar-margin_step-2_useNative-true_rtl-true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/FieldChooser change dataField order with invisible fields (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/FieldChooser change dataField order with invisible fields (fluent-next.blue.light).png
new file mode 100644
index 000000000000..64d813abe9b6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/FieldChooser change dataField order with invisible fields (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/FieldChooser change dataField order with three invisible fields (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/FieldChooser change dataField order with three invisible fields (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a1afc149beb5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/FieldChooser change dataField order with three invisible fields (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/FieldChooser change dataField order with two invisible fields (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/FieldChooser change dataField order with two invisible fields (fluent-next.blue.light).png
new file mode 100644
index 000000000000..64d813abe9b6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/FieldChooser change dataField order with two invisible fields (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_row-area-item_dnd_bottom (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_row-area-item_dnd_bottom (fluent-next.blue.light).png
new file mode 100644
index 000000000000..01e56bf2fe25
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_row-area-item_dnd_bottom (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_row-area-item_dnd_left (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_row-area-item_dnd_left (fluent-next.blue.light).png
new file mode 100644
index 000000000000..27fd3bfd2df8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_row-area-item_dnd_left (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_row-area-item_dnd_right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_row-area-item_dnd_right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7534da8d4c5f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_row-area-item_dnd_right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_row-area-item_dnd_top (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_row-area-item_dnd_top (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e690d0ed51eb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_row-area-item_dnd_top (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_tree-item_dnd_bottom (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_tree-item_dnd_bottom (fluent-next.blue.light).png
new file mode 100644
index 000000000000..620fb89f7ed8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_tree-item_dnd_bottom (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_tree-item_dnd_left (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_tree-item_dnd_left (fluent-next.blue.light).png
new file mode 100644
index 000000000000..48575e6bc6fe
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_tree-item_dnd_left (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_tree-item_dnd_right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_tree-item_dnd_right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..51ef77fd31cd
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_tree-item_dnd_right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_tree-item_dnd_top (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_tree-item_dnd_top (fluent-next.blue.light).png
new file mode 100644
index 000000000000..541e9bd2a55c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_tree-item_dnd_top (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/empty_table_after_dnd (showRowGrandTotals=false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/empty_table_after_dnd (showRowGrandTotals=false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2f30005d92ce
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/empty_table_after_dnd (showRowGrandTotals=false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/empty_table_after_dnd (showRowGrandTotals=true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/empty_table_after_dnd (showRowGrandTotals=true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a9e5b00b0b03
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/empty_table_after_dnd (showRowGrandTotals=true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/field-panel_column-action_dnd (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/field-panel_column-action_dnd (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c9f7cd118b7d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/field-panel_column-action_dnd (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/field-panel_column-field_dnd-first (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/field-panel_column-field_dnd-first (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2c6959b30ab0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/field-panel_column-field_dnd-first (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/field-panel_data-action_dnd (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/field-panel_data-action_dnd (fluent-next.blue.light).png
new file mode 100644
index 000000000000..01626f82e725
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/field-panel_data-action_dnd (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/field-panel_row-action_dnd (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/field-panel_row-action_dnd (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1eb451f91711
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldPanel/etalons/field-panel_row-action_dnd (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/kbn/etalons/export-button_focus (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/kbn/etalons/export-button_focus (fluent-next.blue.light).png
new file mode 100644
index 000000000000..02c6551ccbd5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/kbn/etalons/export-button_focus (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/kbn/etalons/field-chooser-button_focus_column-fields (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/kbn/etalons/field-chooser-button_focus_column-fields (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e523da9c96cf
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/kbn/etalons/field-chooser-button_focus_column-fields (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/kbn/etalons/field-chooser-button_focus_description-cell (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/kbn/etalons/field-chooser-button_focus_description-cell (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3d16cc14593c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/kbn/etalons/field-chooser-button_focus_description-cell (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/kbn/etalons/field-chooser-button_focus_filter-fields (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/kbn/etalons/field-chooser-button_focus_filter-fields (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e523da9c96cf
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/kbn/etalons/field-chooser-button_focus_filter-fields (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/kbn/etalons/pivotgrid_kbn_expandable_cell_focused (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/kbn/etalons/pivotgrid_kbn_expandable_cell_focused (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f150ccc050c0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/kbn/etalons/pivotgrid_kbn_expandable_cell_focused (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/runningTotal/etalons/running-total_partial-data_render-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/runningTotal/etalons/running-total_partial-data_render-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5fe2ef74b10b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/runningTotal/etalons/running-total_partial-data_render-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/runningTotal/etalons/running-total_partial-data_render-1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/runningTotal/etalons/running-total_partial-data_render-1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9af862a34d00
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/runningTotal/etalons/running-total_partial-data_render-1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/runningTotal/etalons/running-total_seamless-data (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/runningTotal/etalons/running-total_seamless-data (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0b1359631df5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/runningTotal/etalons/running-total_seamless-data (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/sort/etalons/T1173442_after_sort_with_summary_display_mode (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/sort/etalons/T1173442_after_sort_with_summary_display_mode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8af90f25063b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/sort/etalons/T1173442_after_sort_with_summary_display_mode (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/sort/etalons/T1173442_before_sort_with_summary_display_mode (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/sort/etalons/T1173442_before_sort_with_summary_display_mode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4d110f32b477
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/pivotGrid/sort/etalons/T1173442_before_sort_with_summary_display_mode (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/aiColumn/etalons/treelist__ai-column__default (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/aiColumn/etalons/treelist__ai-column__default (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1c5d51ef0f0e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/treeList/aiColumn/etalons/treelist__ai-column__default (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/aiColumn/etalons/treelist__ai-column__multiple-selection (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/aiColumn/etalons/treelist__ai-column__multiple-selection (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5d719aadd6cf
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/treeList/aiColumn/etalons/treelist__ai-column__multiple-selection (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1053931 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1053931 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a8c1467cba34
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1053931 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1054312 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1054312 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..20219d7d3b1e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1054312 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1109666-selection (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1109666-selection (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1adb5d1622d5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1109666-selection (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1129106-treelist-virtual-scrolling-1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1129106-treelist-virtual-scrolling-1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..03ea03164ad9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1129106-treelist-virtual-scrolling-1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1129106-treelist-virtual-scrolling-2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1129106-treelist-virtual-scrolling-2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1734ef7000a1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1129106-treelist-virtual-scrolling-2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1129106-treelist-virtual-scrolling-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1129106-treelist-virtual-scrolling-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..03ea03164ad9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1129106-treelist-virtual-scrolling-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1189118-treelist-select-all-with-virtual-scrolling-1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1189118-treelist-select-all-with-virtual-scrolling-1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4135e6bee328
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1189118-treelist-select-all-with-virtual-scrolling-1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1189118-treelist-select-all-with-virtual-scrolling-2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1189118-treelist-select-all-with-virtual-scrolling-2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..09024d264c78
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1189118-treelist-select-all-with-virtual-scrolling-2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1221037-cell-with-template (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1221037-cell-with-template (fluent-next.blue.light).png
new file mode 100644
index 000000000000..76f87b4406b0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1221037-cell-with-template (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1223168-expandable (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1223168-expandable (fluent-next.blue.light).png
new file mode 100644
index 000000000000..276855cc73ab
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1223168-expandable (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1264312-selection-checked-all (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1264312-selection-checked-all (fluent-next.blue.light).png
new file mode 100644
index 000000000000..aec5c862e9d5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1264312-selection-checked-all (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1264312-selection-checked-searched (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1264312-selection-checked-searched (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9d679869fd5a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1264312-selection-checked-searched (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1264312-selection-unchecked-all (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1264312-selection-unchecked-all (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b5e9372e7966
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1264312-selection-unchecked-all (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1264312-selection-unchecked-searched (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1264312-selection-unchecked-searched (fluent-next.blue.light).png
new file mode 100644
index 000000000000..62b5cc5503b9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1264312-selection-unchecked-searched (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1275775-navigateToRow-with-async-cell-templates_(renderAsync=false_useNativeScrolling=false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1275775-navigateToRow-with-async-cell-templates_(renderAsync=false_useNativeScrolling=false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b5cc8249e04a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1275775-navigateToRow-with-async-cell-templates_(renderAsync=false_useNativeScrolling=false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1275775-navigateToRow-with-async-cell-templates_(renderAsync=false_useNativeScrolling=true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1275775-navigateToRow-with-async-cell-templates_(renderAsync=false_useNativeScrolling=true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b5cc8249e04a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1275775-navigateToRow-with-async-cell-templates_(renderAsync=false_useNativeScrolling=true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1275775-navigateToRow-with-async-cell-templates_(renderAsync=true_useNativeScrolling=false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1275775-navigateToRow-with-async-cell-templates_(renderAsync=true_useNativeScrolling=false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b5cc8249e04a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1275775-navigateToRow-with-async-cell-templates_(renderAsync=true_useNativeScrolling=false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1275775-navigateToRow-with-async-cell-templates_(renderAsync=true_useNativeScrolling=true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1275775-navigateToRow-with-async-cell-templates_(renderAsync=true_useNativeScrolling=true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b5cc8249e04a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1275775-navigateToRow-with-async-cell-templates_(renderAsync=true_useNativeScrolling=true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1291705-row-alternation-after-expanding-node-when-repaintChangesOnly=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1291705-row-alternation-after-expanding-node-when-repaintChangesOnly=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..72ee202557c2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1291705-row-alternation-after-expanding-node-when-repaintChangesOnly=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1291705-row-alternation-after-expanding-node-when-there-is-fixed-column-and-repaintChangesOnly=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1291705-row-alternation-after-expanding-node-when-there-is-fixed-column-and-repaintChangesOnly=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f1b9b491bb0a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/treeList/etalons/T1291705-row-alternation-after-expanding-node-when-there-is-fixed-column-and-repaintChangesOnly=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/etalons/ai-column__toast__at-the-right-position (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/etalons/ai-column__toast__at-the-right-position (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ca1eda079e1b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/treeList/etalons/ai-column__toast__at-the-right-position (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=multiple-rtl=false-content=multiple-line (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=multiple-rtl=false-content=multiple-line (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a36174f47bc2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=multiple-rtl=false-content=multiple-line (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=multiple-rtl=false-content=single-line (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=multiple-rtl=false-content=single-line (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e23c6842bb43
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=multiple-rtl=false-content=single-line (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=multiple-rtl=true-content=multiple-line (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=multiple-rtl=true-content=multiple-line (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ec4f2cae4483
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=multiple-rtl=true-content=multiple-line (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=multiple-rtl=true-content=single-line (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=multiple-rtl=true-content=single-line (fluent-next.blue.light).png
new file mode 100644
index 000000000000..64f27f52bc3a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=multiple-rtl=true-content=single-line (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=single-rtl=false-content=multiple-line (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=single-rtl=false-content=multiple-line (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5d54074b03bc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=single-rtl=false-content=multiple-line (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=single-rtl=false-content=single-line (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=single-rtl=false-content=single-line (fluent-next.blue.light).png
new file mode 100644
index 000000000000..10fbac34f30d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=single-rtl=false-content=single-line (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=single-rtl=true-content=multiple-line (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=single-rtl=true-content=multiple-line (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7d6df45dd730
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=single-rtl=true-content=multiple-line (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=single-rtl=true-content=single-line (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=single-rtl=true-content=single-line (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ef9dcf8112dc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/treeList/etalons/markup-selection=single-rtl=true-content=single-line (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/keyboardNavigation/etalons/tree-list_keyboard-navigation-custom-button-focused (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/keyboardNavigation/etalons/tree-list_keyboard-navigation-custom-button-focused (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3366a2f873d4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/treeList/keyboardNavigation/etalons/tree-list_keyboard-navigation-custom-button-focused (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/keyboardNavigation/etalons/tree-list_keyboard-navigation-custom-buttons-header-cell-focused (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/keyboardNavigation/etalons/tree-list_keyboard-navigation-custom-buttons-header-cell-focused (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9efd682781e8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/treeList/keyboardNavigation/etalons/tree-list_keyboard-navigation-custom-buttons-header-cell-focused (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/keyboardNavigation/etalons/tree-list_keyboard-navigation-header-cell-focused (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/keyboardNavigation/etalons/tree-list_keyboard-navigation-header-cell-focused (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ec042b622ef0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/treeList/keyboardNavigation/etalons/tree-list_keyboard-navigation-header-cell-focused (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/keyboardNavigation/etalons/tree_list_keyboard-navigation-data-cell-focused (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/keyboardNavigation/etalons/tree_list_keyboard-navigation-data-cell-focused (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3d7876200815
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/treeList/keyboardNavigation/etalons/tree_list_keyboard-navigation-data-cell-focused (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/stickyColumns/etalons/treelist_header_hover_with_fixed_columns (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/stickyColumns/etalons/treelist_header_hover_with_fixed_columns (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0dd95c53643f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/treeList/stickyColumns/etalons/treelist_header_hover_with_fixed_columns (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/stickyColumns/etalons/treelist_row_hover_with_fixed_columns (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/stickyColumns/etalons/treelist_row_hover_with_fixed_columns (fluent-next.blue.light).png
new file mode 100644
index 000000000000..71980f815933
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/treeList/stickyColumns/etalons/treelist_row_hover_with_fixed_columns (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/treeList/stickyColumns/etalons/treelist_sticky_columns_with_drag_and_drop_before_interaction (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/treeList/stickyColumns/etalons/treelist_sticky_columns_with_drag_and_drop_before_interaction (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5ef41f2ac7d3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/treeList/stickyColumns/etalons/treelist_sticky_columns_with_drag_and_drop_before_interaction (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/container-ai-integration.html b/e2e/testcafe-devextreme/tests/container-ai-integration.html
index f02b899c362c..7948dd8f1f22 100644
--- a/e2e/testcafe-devextreme/tests/container-ai-integration.html
+++ b/e2e/testcafe-devextreme/tests/container-ai-integration.html
@@ -6,6 +6,9 @@
     <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="fluent-next.blue.light" href="../../../packages/devextreme/artifacts/css/dx.fluent-next.blue.light.css" data-active="false">
+    <link rel="dx-theme" data-theme="fluent-next.blue.dark" href="../../../packages/devextreme/artifacts/css/dx.fluent-next.blue.dark.css" data-active="false">
+    <link rel="dx-theme" data-theme="fluent-next.blue.light.compact" href="../../../packages/devextreme/artifacts/css/dx.fluent-next.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="true">
diff --git a/e2e/testcafe-devextreme/tests/container-extended.html b/e2e/testcafe-devextreme/tests/container-extended.html
index 00ac27d41752..e121e3dea492 100644
--- a/e2e/testcafe-devextreme/tests/container-extended.html
+++ b/e2e/testcafe-devextreme/tests/container-extended.html
@@ -6,6 +6,9 @@
     <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="fluent-next.blue.light" href="../../../packages/devextreme/artifacts/css/dx.fluent-next.blue.light.css" data-active="false">
+    <link rel="dx-theme" data-theme="fluent-next.blue.dark" href="../../../packages/devextreme/artifacts/css/dx.fluent-next.blue.dark.css" data-active="false">
+    <link rel="dx-theme" data-theme="fluent-next.blue.light.compact" href="../../../packages/devextreme/artifacts/css/dx.fluent-next.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="true">
diff --git a/e2e/testcafe-devextreme/tests/container.html b/e2e/testcafe-devextreme/tests/container.html
index 21744e6fe26d..9037b41ac052 100644
--- a/e2e/testcafe-devextreme/tests/container.html
+++ b/e2e/testcafe-devextreme/tests/container.html
@@ -6,12 +6,15 @@
     <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="fluent-next.blue.light" href="../../../packages/devextreme/artifacts/css/dx.fluent-next.blue.light.css" data-active="false">
+    <link rel="dx-theme" data-theme="fluent-next.blue.dark" href="../../../packages/devextreme/artifacts/css/dx.fluent-next.blue.dark.css" data-active="false">
+    <link rel="dx-theme" data-theme="fluent-next.blue.light.compact" href="../../../packages/devextreme/artifacts/css/dx.fluent-next.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="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>
     <script type="text/javascript" src="../../../packages/devextreme/artifacts/js/dx.all.js"></script>
     <script type="text/javascript" src="../../../packages/devextreme/artifacts/js/dx.aspnet.data.js"></script>
@@ -21,7 +24,7 @@
         .dx-scheduler .dx-scrollable-scroll { visibility: hidden !important; }
     </style>
 </head>
-<body class="dx-surface">
+<body class="dx-viewport">
     <div id="parentContainer" role="main">
         <h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Test header</h1>
 
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/T1257970-datagrid-menu-icon-contrast (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/T1257970-datagrid-menu-icon-contrast (fluent-next.blue.light).png
new file mode 100644
index 000000000000..064d63bc428e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/T1257970-datagrid-menu-icon-contrast (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/T1286345-datagrid-menu-icon-when-focused (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/T1286345-datagrid-menu-icon-when-focused (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0c2944c43197
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/T1286345-datagrid-menu-icon-when-focused (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/adaptive-row (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/adaptive-row (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1b393d6f877c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/adaptive-row (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/batch-editing-mode-edit_cell (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/batch-editing-mode-edit_cell (fluent-next.blue.light).png
new file mode 100644
index 000000000000..15efc6ea637f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/batch-editing-mode-edit_cell (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/context-menu (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/context-menu (fluent-next.blue.light).png
new file mode 100644
index 000000000000..82766b0c99ad
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/context-menu (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/error-row (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/error-row (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d336d38e19a7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/error-row (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/export-button (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/export-button (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d2d911f2eeb4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/export-button (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/filter-builder (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/filter-builder (fluent-next.blue.light).png
new file mode 100644
index 000000000000..34f89234d3b2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/filter-builder (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/filter-panel (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/filter-panel (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a5832c5b87fd
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/filter-panel (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/filter-row-menu (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/filter-row-menu (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b32c63c18e5f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/filter-row-menu (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/fixed-columns (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/fixed-columns (fluent-next.blue.light).png
new file mode 100644
index 000000000000..26e89015834f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/fixed-columns (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/focused-row (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/focused-row (fluent-next.blue.light).png
new file mode 100644
index 000000000000..360a6ebf381f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/focused-row (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/form-editing-mode (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/form-editing-mode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b96e53311b98
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/form-editing-mode (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/grouping-and-summary (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/grouping-and-summary (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cb7f5caa14b2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/grouping-and-summary (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/header-filter-menu (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/header-filter-menu (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dd9bb398e8a0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/header-filter-menu (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/no-data (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/no-data (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d4db36d87710
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/no-data (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/paging-compact-display-mode (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/paging-compact-display-mode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8d834bc315a7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/paging-compact-display-mode (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/paging-full-display-mode (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/paging-full-display-mode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..473419c7dfdb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/paging-full-display-mode (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/popup-editing-mode (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/popup-editing-mode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8989db1fa091
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/popup-editing-mode (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-drag-and-drop (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-drag-and-drop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1919e5e0d650
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-drag-and-drop (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-edit-state-with-useIcons=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-edit-state-with-useIcons=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1a000c373d48
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-edit-state-with-useIcons=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-edit-state-with-useIcons=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-edit-state-with-useIcons=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1d3f462daeb8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-edit-state-with-useIcons=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cc6bf0d4d2c3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-delete_row (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-delete_row (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6090038c14ac
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-delete_row (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-modified_cell (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-modified_cell (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d5c43624dc4b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-modified_cell (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-with-useIcons=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-with-useIcons=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8c4ae658fa1a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-with-useIcons=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-with-useIcons=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-with-useIcons=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..85c52feba17c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/row-editing-mode-with-useIcons=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/search-panel (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/search-panel (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e55faf630f8a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/search-panel (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/search-panel-highlight (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/search-panel-highlight (fluent-next.blue.light).png
new file mode 100644
index 000000000000..42b63a680b94
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/search-panel-highlight (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/selection (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/selection (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3f433722d33e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/selection (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/sorting-and-group-panel (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/sorting-and-group-panel (fluent-next.blue.light).png
new file mode 100644
index 000000000000..72d521a691bb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/sorting-and-group-panel (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/validation-in-cell-editing-mode (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/validation-in-cell-editing-mode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..04c384061775
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/etalons/validation-in-cell-editing-mode (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/aiAssistant/etalons/datagrid-ai-assistant-empty-state (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/aiAssistant/etalons/datagrid-ai-assistant-empty-state (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bce1deb79993
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/aiAssistant/etalons/datagrid-ai-assistant-empty-state (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/aiAssistant/etalons/datagrid-ai-assistant-error-state (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/aiAssistant/etalons/datagrid-ai-assistant-error-state (fluent-next.blue.light).png
new file mode 100644
index 000000000000..abe45cb1e1d5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/aiAssistant/etalons/datagrid-ai-assistant-error-state (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/aiAssistant/etalons/datagrid-ai-assistant-failure-with-aborted-command (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/aiAssistant/etalons/datagrid-ai-assistant-failure-with-aborted-command (fluent-next.blue.light).png
new file mode 100644
index 000000000000..952ce42d0c05
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/aiAssistant/etalons/datagrid-ai-assistant-failure-with-aborted-command (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/aiAssistant/etalons/datagrid-ai-assistant-failure-with-error-command (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/aiAssistant/etalons/datagrid-ai-assistant-failure-with-error-command (fluent-next.blue.light).png
new file mode 100644
index 000000000000..aab90a74b81b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/aiAssistant/etalons/datagrid-ai-assistant-failure-with-error-command (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/aiAssistant/etalons/datagrid-ai-assistant-multiple-messages (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/aiAssistant/etalons/datagrid-ai-assistant-multiple-messages (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6d31aaf3a0e6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/aiAssistant/etalons/datagrid-ai-assistant-multiple-messages (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/aiAssistant/etalons/datagrid-ai-assistant-pending-state (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/aiAssistant/etalons/datagrid-ai-assistant-pending-state (fluent-next.blue.light).png
new file mode 100644
index 000000000000..84dd785a7e10
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/aiAssistant/etalons/datagrid-ai-assistant-pending-state (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/aiAssistant/etalons/datagrid-ai-assistant-success-multiple-commands (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/aiAssistant/etalons/datagrid-ai-assistant-success-multiple-commands (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3ad308b1bd95
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/aiAssistant/etalons/datagrid-ai-assistant-success-multiple-commands (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/aiAssistant/etalons/datagrid-ai-assistant-success-state (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/aiAssistant/etalons/datagrid-ai-assistant-success-state (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1fd5b379e765
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/aiAssistant/etalons/datagrid-ai-assistant-success-state (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column(alignment=center_rtlEnabled=false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column(alignment=center_rtlEnabled=false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0b4a9349e3e0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column(alignment=center_rtlEnabled=false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column(alignment=center_rtlEnabled=true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column(alignment=center_rtlEnabled=true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e3b9df901e99
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column(alignment=center_rtlEnabled=true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column(alignment=left_rtlEnabled=false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column(alignment=left_rtlEnabled=false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bde1686025ed
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column(alignment=left_rtlEnabled=false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column(alignment=left_rtlEnabled=true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column(alignment=left_rtlEnabled=true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..81609ace3c37
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column(alignment=left_rtlEnabled=true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column(alignment=right_rtlEnabled=false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column(alignment=right_rtlEnabled=false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a409a8c3d64a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column(alignment=right_rtlEnabled=false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column(alignment=right_rtlEnabled=true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column(alignment=right_rtlEnabled=true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..562fc620144e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column(alignment=right_rtlEnabled=true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column-and-sticky-columns__context-menu (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column-and-sticky-columns__context-menu (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7eeccb3d7cae
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column-and-sticky-columns__context-menu (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column-and-sticky-columns__context-menu-when-allowFixing-false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column-and-sticky-columns__context-menu-when-allowFixing-false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9cada4c43efa
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column-and-sticky-columns__context-menu-when-allowFixing-false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column__column-resizing(wordWrapEnabled=true)-1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column__column-resizing(wordWrapEnabled=true)-1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7f3f0678035d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column__column-resizing(wordWrapEnabled=true)-1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column__column-resizing(wordWrapEnabled=true)-2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column__column-resizing(wordWrapEnabled=true)-2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..553030ad4316
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column__column-resizing(wordWrapEnabled=true)-2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column__default (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column__default (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bde1686025ed
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column__default (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column__dragging (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column__dragging (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4c184f6cb23b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column__dragging (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column__focused-dropdown-button (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column__focused-dropdown-button (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9bba0e258ab4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column__focused-dropdown-button (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column_dropdown-button-menu(alignment=center_rtlEnabled=false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column_dropdown-button-menu(alignment=center_rtlEnabled=false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..656b8c81f887
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column_dropdown-button-menu(alignment=center_rtlEnabled=false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column_dropdown-button-menu(alignment=center_rtlEnabled=true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column_dropdown-button-menu(alignment=center_rtlEnabled=true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..04f08c36052d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column_dropdown-button-menu(alignment=center_rtlEnabled=true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column_dropdown-button-menu(alignment=left_rtlEnabled=false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column_dropdown-button-menu(alignment=left_rtlEnabled=false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7b30627dadfd
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column_dropdown-button-menu(alignment=left_rtlEnabled=false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column_dropdown-button-menu(alignment=left_rtlEnabled=true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column_dropdown-button-menu(alignment=left_rtlEnabled=true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..64cef1f29fd8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column_dropdown-button-menu(alignment=left_rtlEnabled=true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column_dropdown-button-menu(alignment=right_rtlEnabled=false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column_dropdown-button-menu(alignment=right_rtlEnabled=false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3926e074108d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column_dropdown-button-menu(alignment=right_rtlEnabled=false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column_dropdown-button-menu(alignment=right_rtlEnabled=true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column_dropdown-button-menu(alignment=right_rtlEnabled=true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c0d6bbda8fd2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/etalons/datagrid__ai-column_dropdown-button-menu(alignment=right_rtlEnabled=true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/virtualScrolling.functional.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/virtualScrolling.functional.ts
index 5ea0b4c8bb8a..d1085aa9667a 100644
--- a/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/virtualScrolling.functional.ts
+++ b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/virtualScrolling.functional.ts
@@ -8,6 +8,10 @@ fixture`Ai Column.Virtual Scrolling.Functional`
 
 const DATA_GRID_SELECTOR = '#container';
 
+const CLASS = {
+  loadPanelContent: 'dx-loadpanel-content',
+};
+
 const checkAIColumnTexts = async (
   t: TestController,
   component: DataGrid,
@@ -61,7 +65,7 @@ test('DataGrid should send an AI request for rendered rows after scrolling witho
   await t
     .expect(dataGrid.isReady())
     .ok()
-    .expect(dataGrid.getLoadPanel().isVisible())
+    .expect(dataGrid.element.find(`.${CLASS.loadPanelContent}`).visible)
     .notOk();
   await checkAIColumnTexts(t, dataGrid, 11);
 
@@ -88,7 +92,7 @@ test('DataGrid should send an AI request for rendered rows after scrolling witho
   await t
     .expect(dataGrid.isReady())
     .ok()
-    .expect(dataGrid.getLoadPanel().isVisible())
+    .expect(dataGrid.element.find(`.${CLASS.loadPanelContent}`).visible)
     .notOk();
   await checkAIColumnTexts(t, dataGrid, 12);
 })
@@ -168,7 +172,7 @@ test('DataGrid should send an AI request for rendered rows after scrolling with
   await t
     .expect(dataGrid.isReady())
     .ok()
-    .expect(dataGrid.getLoadPanel().isVisible())
+    .expect(dataGrid.element.find(`.${CLASS.loadPanelContent}`).visible)
     .notOk();
   await checkAIColumnTexts(t, dataGrid, 11);
 
@@ -195,7 +199,7 @@ test('DataGrid should send an AI request for rendered rows after scrolling with
   await t
     .expect(dataGrid.isReady())
     .ok()
-    .expect(dataGrid.getLoadPanel().isVisible())
+    .expect(dataGrid.element.find(`.${CLASS.loadPanelContent}`).visible)
     .notOk();
   await checkAIColumnTexts(t, dataGrid, 12);
 })
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/bandColumns/etalons/band-columns_after-runtime-update (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/bandColumns/etalons/band-columns_after-runtime-update (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dbdcfc6296c3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/bandColumns/etalons/band-columns_after-runtime-update (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/bandColumns/etalons/band-columns_before-runtime-update (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/bandColumns/etalons/band-columns_before-runtime-update (fluent-next.blue.light).png
new file mode 100644
index 000000000000..aebe1a043376
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/bandColumns/etalons/band-columns_before-runtime-update (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/columnReordering/etalons/column-separator-with-expand-columns (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/columnReordering/etalons/column-separator-with-expand-columns (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9ebadc16c89e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/columnReordering/etalons/column-separator-with-expand-columns (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/columnReordering/etalons/dragging_grouped_column_to_same_position (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/columnReordering/etalons/dragging_grouped_column_to_same_position (fluent-next.blue.light).png
new file mode 100644
index 000000000000..58e7c8a2823e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/columnReordering/etalons/dragging_grouped_column_to_same_position (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/columnReordering/etalons/headerRow-highlight-on-drag (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/columnReordering/etalons/headerRow-highlight-on-drag (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9ebadc16c89e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/columnReordering/etalons/headerRow-highlight-on-drag (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/columnResizing/etalons/column-separator-1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/columnResizing/etalons/column-separator-1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..58f6c4d3bd81
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/columnResizing/etalons/column-separator-1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/columnResizing/etalons/column-separator-2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/columnResizing/etalons/column-separator-2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..15ec7c95b977
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/columnResizing/etalons/column-separator-2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/columnResizing/etalons/column-separator-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/columnResizing/etalons/column-separator-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b66a7ee6a5d6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/columnResizing/etalons/column-separator-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/columnResizing/etalons/column-separator-4 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/columnResizing/etalons/column-separator-4 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b66a7ee6a5d6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/columnResizing/etalons/column-separator-4 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/columnResizing/etalons/column-separator-5 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/columnResizing/etalons/column-separator-5 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..835742815989
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/columnResizing/etalons/column-separator-5 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/columnResizing/etalons/column-separator-6 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/columnResizing/etalons/column-separator-6 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bd09a01ea980
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/columnResizing/etalons/column-separator-6 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/columnResizing/etalons/column-separator-7 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/columnResizing/etalons/column-separator-7 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..446766db6f99
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/columnResizing/etalons/column-separator-7 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/columnResizing/etalons/column-separator-8 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/columnResizing/etalons/column-separator-8 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..19736789acae
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/columnResizing/etalons/column-separator-8 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/columnResizing/etalons/column-separator-9 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/columnResizing/etalons/column-separator-9 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b66a7ee6a5d6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/columnResizing/etalons/column-separator-9 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/T1179114-grid-edit-custom-button when-useicons-is-false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/T1179114-grid-edit-custom-button when-useicons-is-false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fe2667c295db
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/T1179114-grid-edit-custom-button when-useicons-is-false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/T1179114-grid-edit-custom-button when-useicons-is-true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/T1179114-grid-edit-custom-button when-useicons-is-true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f7eb3f0500c0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/T1179114-grid-edit-custom-button when-useicons-is-true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/T1250405-canceled-rows-hidden (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/T1250405-canceled-rows-hidden (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ff71978da272
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/T1250405-canceled-rows-hidden (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-adaptive-checkbox (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-adaptive-checkbox (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7557a305d561
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-adaptive-checkbox (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-adaptive-item-text (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-adaptive-item-text (fluent-next.blue.light).png
new file mode 100644
index 000000000000..854fd4ee07bc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-adaptive-item-text (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-checkbox-outline (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-checkbox-outline (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6eb3c6231e27
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-checkbox-outline (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-editing-with-onSaving-T1201724 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-editing-with-onSaving-T1201724 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1fb35dfdb48b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-editing-with-onSaving-T1201724 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-form-editing-T1193894 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-form-editing-T1193894 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..45c21824f3bd
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-form-editing-T1193894 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-form-editing-with-color-box (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-form-editing-with-color-box (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f1a1b5974201
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-form-editing-with-color-box (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-first_scroll-mode-standard_top-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-first_scroll-mode-standard_top-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a5a734d5eb18
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-first_scroll-mode-standard_top-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-last_scroll-mode-standard_top-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-last_scroll-mode-standard_top-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b065e24e86b5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-last_scroll-mode-standard_top-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-pageBottom_scroll-mode-standard_top-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-pageBottom_scroll-mode-standard_top-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b065e24e86b5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-pageBottom_scroll-mode-standard_top-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-pageBottom_scroll-mode-virtual_top-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-pageBottom_scroll-mode-virtual_top-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..01f893d85152
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-pageBottom_scroll-mode-virtual_top-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-pageTop_scroll-mode-standard_top-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-pageTop_scroll-mode-standard_top-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a5a734d5eb18
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-pageTop_scroll-mode-standard_top-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-pageTop_scroll-mode-virtual_top-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-pageTop_scroll-mode-virtual_top-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a5a734d5eb18
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-pageTop_scroll-mode-virtual_top-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-viewportBottom_scroll-mode-standard_top-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-viewportBottom_scroll-mode-standard_top-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..01f893d85152
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-viewportBottom_scroll-mode-standard_top-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-viewportBottom_scroll-mode-standard_top-162 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-viewportBottom_scroll-mode-standard_top-162 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a6da23418b61
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-viewportBottom_scroll-mode-standard_top-162 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-viewportBottom_scroll-mode-virtual_top-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-viewportBottom_scroll-mode-virtual_top-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..01f893d85152
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-viewportBottom_scroll-mode-virtual_top-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-viewportBottom_scroll-mode-virtual_top-162 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-viewportBottom_scroll-mode-virtual_top-162 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a6da23418b61
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-viewportBottom_scroll-mode-virtual_top-162 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-viewportTop_scroll-mode-standard_top-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-viewportTop_scroll-mode-standard_top-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a5a734d5eb18
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-viewportTop_scroll-mode-standard_top-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-viewportTop_scroll-mode-standard_top-162 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-viewportTop_scroll-mode-standard_top-162 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a830424a73e6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-viewportTop_scroll-mode-standard_top-162 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-viewportTop_scroll-mode-virtual_top-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-viewportTop_scroll-mode-virtual_top-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a5a734d5eb18
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-viewportTop_scroll-mode-virtual_top-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-viewportTop_scroll-mode-virtual_top-162 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-viewportTop_scroll-mode-virtual_top-162 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a830424a73e6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-new-row_position-viewportTop_scroll-mode-virtual_top-162 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-popup-editing-checkbox (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-popup-editing-checkbox (fluent-next.blue.light).png
new file mode 100644
index 000000000000..87ba82b58cfc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-popup-editing-checkbox (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-popup-editing-grid (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-popup-editing-grid (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e2370a21a47d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/grid-popup-editing-grid (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/newRowPosition-pageBottom-add-row-to-bottom (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/newRowPosition-pageBottom-add-row-to-bottom (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ee5105c7c0d1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/newRowPosition-pageBottom-add-row-to-bottom (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/popup-edit-form (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/popup-edit-form (fluent-next.blue.light).png
new file mode 100644
index 000000000000..83e0554300e7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/popup-edit-form (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/popup-edit-form-with-initial-editrowkey (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/popup-edit-form-with-initial-editrowkey (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fdeba8fa45d9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/etalons/popup-edit-form-with-initial-editrowkey (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1046688.searchPanel (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1046688.searchPanel (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cb144b475a17
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1046688.searchPanel (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1089634-virtual-scrolling-1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1089634-virtual-scrolling-1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d2ebbf5d1fd5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1089634-virtual-scrolling-1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1089634-virtual-scrolling-2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1089634-virtual-scrolling-2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6bf0f284538e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1089634-virtual-scrolling-2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1089634-virtual-scrolling-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1089634-virtual-scrolling-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ba8bec7c2448
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1089634-virtual-scrolling-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1136896-virtual-scrolling_editing-buttons (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1136896-virtual-scrolling_editing-buttons (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bb212ffbd000
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1136896-virtual-scrolling_editing-buttons (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1141405-grid-select-all (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1141405-grid-select-all (fluent-next.blue.light).png
new file mode 100644
index 000000000000..99ae4ec4376c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1141405-grid-select-all (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1194796-row-alternation-with-grouping-and-virtual-scrolling (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1194796-row-alternation-with-grouping-and-virtual-scrolling (fluent-next.blue.light).png
new file mode 100644
index 000000000000..628e3e2b005b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1194796-row-alternation-with-grouping-and-virtual-scrolling (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1219785-column-chooser-1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1219785-column-chooser-1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dcbe84ca274b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1219785-column-chooser-1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1219785-column-chooser-2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1219785-column-chooser-2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6109c23ead7e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1219785-column-chooser-2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1219785-column-chooser-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1219785-column-chooser-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..399895a20546
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1219785-column-chooser-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1228720-grid-tagbox-on-edit (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1228720-grid-tagbox-on-edit (fluent-next.blue.light).png
new file mode 100644
index 000000000000..08490da59289
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1228720-grid-tagbox-on-edit (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1240079 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1240079 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..523d45dadd4d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1240079 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1270354-virtual-native-scrolling-with-grouping-and-summary (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1270354-virtual-native-scrolling-with-grouping-and-summary (fluent-next.blue.light).png
new file mode 100644
index 000000000000..af5d88d2fbcb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1270354-virtual-native-scrolling-with-grouping-and-summary (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1270354-virtual-simulated-scrolling-with-grouping-and-summary (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1270354-virtual-simulated-scrolling-with-grouping-and-summary (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7fbf8afb8ed9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/T1270354-virtual-simulated-scrolling-with-grouping-and-summary (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/ai-column__toast__at-the-right-position (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/ai-column__toast__at-the-right-position (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ca1eda079e1b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/ai-column__toast__at-the-right-position (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/column-chooser-checkbox-alignment-plain-structure (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/column-chooser-checkbox-alignment-plain-structure (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3eedd0a183e7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/column-chooser-checkbox-alignment-plain-structure (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/column-chooser-checkbox-alignment-tree-structure (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/column-chooser-checkbox-alignment-tree-structure (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ee5ebf721cc2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/column-chooser-checkbox-alignment-tree-structure (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/column-chooser-dragAndDrop-mode (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/column-chooser-dragAndDrop-mode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c2ce65979a53
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/column-chooser-dragAndDrop-mode (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/column-chooser-select-mode (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/column-chooser-select-mode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b7a89285061a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/column-chooser-select-mode (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/compact-pager (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/compact-pager (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ea28faf92272
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/compact-pager (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/disabled-export-in-menu_when-no-columns-visible (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/disabled-export-in-menu_when-no-columns-visible (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8a3525111bc2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/disabled-export-in-menu_when-no-columns-visible (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/disabled-export_when-no-columns-visible (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/disabled-export_when-no-columns-visible (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4409358080de
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/disabled-export_when-no-columns-visible (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/disabled-toolbar-buttons (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/disabled-toolbar-buttons (fluent-next.blue.light).png
new file mode 100644
index 000000000000..592cd4250cb5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/disabled-toolbar-buttons (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/empty-column-chooser (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/empty-column-chooser (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bfb66a7c00bd
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/empty-column-chooser (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-column-lines-alignment-master-grid-horizontal-scrolling (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-column-lines-alignment-master-grid-horizontal-scrolling (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1eff8607c1f0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-column-lines-alignment-master-grid-horizontal-scrolling (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-export-dropdown-button (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-export-dropdown-button (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f5f2752f1d8e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-export-dropdown-button (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-export-dropdown-button-in-menu (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-export-dropdown-button-in-menu (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ced67ccb3d59
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-export-dropdown-button-in-menu (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-export-one-button (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-export-one-button (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9b8932836bc8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-export-one-button (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-export-one-button-in-menu (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-export-one-button-in-menu (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8f76c1cc0597
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-export-one-button-in-menu (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-export-one-button-pdf (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-export-one-button-pdf (fluent-next.blue.light).png
new file mode 100644
index 000000000000..13cfc25043e2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-export-one-button-pdf (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-header-row-scrollbar-padding (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-header-row-scrollbar-padding (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a3845d42d9dd
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-header-row-scrollbar-padding (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-headers-scroller-spacing-border (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-headers-scroller-spacing-border (fluent-next.blue.light).png
new file mode 100644
index 000000000000..352b0df10636
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-headers-scroller-spacing-border (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-headers-scroller-spacing-border-rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-headers-scroller-spacing-border-rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..93202808adfe
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-headers-scroller-spacing-border-rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-infinite-scrolling-T1152498 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-infinite-scrolling-T1152498 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7d2f74dc51ed
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-infinite-scrolling-T1152498 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-toolbar-dropdown-menu (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-toolbar-dropdown-menu (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e68b675d0344
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-toolbar-dropdown-menu (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-virtual-scrolling-T1129252 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-virtual-scrolling-T1129252 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d0162e929863
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-virtual-scrolling-T1129252 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-virtual-scrolling-T1152498 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-virtual-scrolling-T1152498 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6ff55b35dc5b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-virtual-scrolling-T1152498 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-virtual-scrolling_with_fixed_columns-T1166649 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-virtual-scrolling_with_fixed_columns-T1166649 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0fd29a24a1d4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/grid-virtual-scrolling_with_fixed_columns-T1166649 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/group-summary-focused (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/group-summary-focused (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6bbc09d43a07
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/group-summary-focused (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/group-summary-when-grouped-column-has-showWhenGrouped (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/group-summary-when-grouped-column-has-showWhenGrouped (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c4930043726b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/group-summary-when-grouped-column-has-showWhenGrouped (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/invisible-toolbar-buttons (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/invisible-toolbar-buttons (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ca6094756fbf
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/invisible-toolbar-buttons (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/pager-compact (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/pager-compact (fluent-next.blue.light).png
new file mode 100644
index 000000000000..16f005fdff7b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/pager-compact (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/pager-full-allpages (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/pager-full-allpages (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dacc7bbb6f6e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/pager-full-allpages (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/pager-resize-large (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/pager-resize-large (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fd26c524fa4c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/pager-resize-large (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/pager-resize-large-enlarge (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/pager-resize-large-enlarge (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fd26c524fa4c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/pager-resize-large-enlarge (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/pager-resize-large-noinfo (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/pager-resize-large-noinfo (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4386f41ddc2a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/pager-resize-large-noinfo (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/pager-resize-large-noinfo-enlarge (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/pager-resize-large-noinfo-enlarge (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4386f41ddc2a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/pager-resize-large-noinfo-enlarge (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/pager-resize-nobutton-large (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/pager-resize-nobutton-large (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c40530907856
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/pager-resize-nobutton-large (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/pager-resize-nobutton-large-enlarge (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/pager-resize-nobutton-large-enlarge (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c40530907856
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/pager-resize-nobutton-large-enlarge (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/pager-resize-nobutton-large-noinfo (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/pager-resize-nobutton-large-noinfo (fluent-next.blue.light).png
new file mode 100644
index 000000000000..02731128e575
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/pager-resize-nobutton-large-noinfo (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/pager-resize-nobutton-large-noinfo-enlarge (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/pager-resize-nobutton-large-noinfo-enlarge (fluent-next.blue.light).png
new file mode 100644
index 000000000000..02731128e575
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/pager-resize-nobutton-large-noinfo-enlarge (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/pager-resize-nobutton-small (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/pager-resize-nobutton-small (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7e23c70f1376
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/pager-resize-nobutton-small (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/pager-resize-small (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/pager-resize-small (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7e23c70f1376
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/pager-resize-small (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/total-summary-focused (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/total-summary-focused (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d34150d01c92
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/total-summary-focused (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/total-summary-focused-with-sticky (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/total-summary-focused-with-sticky (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d0f9fdbebf8f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/etalons/total-summary-focused-with-sticky (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/filterPanel/etalons/dataGrid-filterPanel-popup (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/filterPanel/etalons/dataGrid-filterPanel-popup (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9e6c3d45fc85
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/filterPanel/etalons/dataGrid-filterPanel-popup (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/filterPanel/etalons/dataGrid-filterPanel-popup-focused (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/filterPanel/etalons/dataGrid-filterPanel-popup-focused (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a76232662aba
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/filterPanel/etalons/dataGrid-filterPanel-popup-focused (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/filterPanel/etalons/dataGrid-filterPanel-popup.-with-editor-popup (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/filterPanel/etalons/dataGrid-filterPanel-popup.-with-editor-popup (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ec93167042b3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/filterPanel/etalons/dataGrid-filterPanel-popup.-with-editor-popup (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/T1072609 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/T1072609 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d6f3edb56444
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/T1072609 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/T1163100_change-icon_columns-fixed-band_scrolling-usual (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/T1163100_change-icon_columns-fixed-band_scrolling-usual (fluent-next.blue.light).png
new file mode 100644
index 000000000000..81c075d59a85
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/T1163100_change-icon_columns-fixed-band_scrolling-usual (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/T1163100_change-icon_columns-fixed-band_scrolling-virtual (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/T1163100_change-icon_columns-fixed-band_scrolling-virtual (fluent-next.blue.light).png
new file mode 100644
index 000000000000..81c075d59a85
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/T1163100_change-icon_columns-fixed-band_scrolling-virtual (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/T1163100_change-icon_columns-fixed-usual_scrolling-usual (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/T1163100_change-icon_columns-fixed-usual_scrolling-usual (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ca9f82f23543
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/T1163100_change-icon_columns-fixed-usual_scrolling-usual (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/T1163100_change-icon_columns-fixed-usual_scrolling-virtual (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/T1163100_change-icon_columns-fixed-usual_scrolling-virtual (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ca9f82f23543
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/T1163100_change-icon_columns-fixed-usual_scrolling-virtual (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/T1163100_change-icon_columns-usual-band_scrolling-usual (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/T1163100_change-icon_columns-usual-band_scrolling-usual (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8d3a0dfdd0a3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/T1163100_change-icon_columns-usual-band_scrolling-usual (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/T1163100_change-icon_columns-usual-band_scrolling-virtual (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/T1163100_change-icon_columns-usual-band_scrolling-virtual (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8d3a0dfdd0a3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/T1163100_change-icon_columns-usual-band_scrolling-virtual (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/T1163100_change-icon_columns-usual-usual_scrolling-usual (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/T1163100_change-icon_columns-usual-usual_scrolling-usual (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8dab6237372b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/T1163100_change-icon_columns-usual-usual_scrolling-usual (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/T1163100_change-icon_columns-usual-usual_scrolling-virtual (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/T1163100_change-icon_columns-usual-usual_scrolling-virtual (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8dab6237372b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/T1163100_change-icon_columns-usual-usual_scrolling-virtual (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/filter-row-filter-range-hide-on-scroll (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/filter-row-filter-range-hide-on-scroll (fluent-next.blue.light).png
new file mode 100644
index 000000000000..825ea4cdffc5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/filter-row-filter-range-hide-on-scroll (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/filter-row-focus-overlay (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/filter-row-focus-overlay (fluent-next.blue.light).png
new file mode 100644
index 000000000000..57f8d95a9851
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/filter-row-focus-overlay (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/filter-row-overlay (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/filter-row-overlay (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6121f6853632
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/filter-row-overlay (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/filtering/etalons/filter-method-with-case-sensitive-1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/filtering/etalons/filter-method-with-case-sensitive-1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..45b69758d29d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/filtering/etalons/filter-method-with-case-sensitive-1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/filtering/etalons/filter-method-with-case-sensitive-2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/filtering/etalons/filter-method-with-case-sensitive-2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d2299efec417
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/filtering/etalons/filter-method-with-case-sensitive-2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/filtering/etalons/filtering-via-option-method-with-case-sensitive-1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/filtering/etalons/filtering-via-option-method-with-case-sensitive-1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..45b69758d29d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/filtering/etalons/filtering-via-option-method-with-case-sensitive-1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/filtering/etalons/filtering-via-option-method-with-case-sensitive-2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/filtering/etalons/filtering-via-option-method-with-case-sensitive-2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d2299efec417
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/filtering/etalons/filtering-via-option-method-with-case-sensitive-2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns/etalons/T1148937-grid-hover-row-1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns/etalons/T1148937-grid-hover-row-1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..810b26ddfc96
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns/etalons/T1148937-grid-hover-row-1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns/etalons/T1148937-grid-hover-row-2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns/etalons/T1148937-grid-hover-row-2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..05fb021eff97
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns/etalons/T1148937-grid-hover-row-2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns/etalons/T1177143-right-fixed-column-with-no-width-columns-1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns/etalons/T1177143-right-fixed-column-with-no-width-columns-1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..545f95e7184c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns/etalons/T1177143-right-fixed-column-with-no-width-columns-1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns/etalons/T1177143-right-fixed-column-with-no-width-columns-2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns/etalons/T1177143-right-fixed-column-with-no-width-columns-2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0463cd041228
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns/etalons/T1177143-right-fixed-column-with-no-width-columns-2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns/etalons/T1180834-grid-hover-row-after-scrolling-1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns/etalons/T1180834-grid-hover-row-after-scrolling-1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c58a4180f049
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns/etalons/T1180834-grid-hover-row-after-scrolling-1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns/etalons/T1180834-grid-hover-row-after-scrolling-2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns/etalons/T1180834-grid-hover-row-after-scrolling-2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..815d9f220358
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns/etalons/T1180834-grid-hover-row-after-scrolling-2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns/etalons/T1193153-layout-with-fixed-and-band-columns-1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns/etalons/T1193153-layout-with-fixed-and-band-columns-1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..74c149cdcf4e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns/etalons/T1193153-layout-with-fixed-and-band-columns-1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns/etalons/T1193153-layout-with-fixed-and-band-columns-2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns/etalons/T1193153-layout-with-fixed-and-band-columns-2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c7226a52b0e3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns/etalons/T1193153-layout-with-fixed-and-band-columns-2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns/etalons/T1317623-expand-columns-with-band-columns (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns/etalons/T1317623-expand-columns-with-band-columns (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d2a6b719bc68
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns/etalons/T1317623-expand-columns-with-band-columns (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns/etalons/T1317623-horizontal-scroll-with-fixed-band-columns (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns/etalons/T1317623-horizontal-scroll-with-fixed-band-columns (fluent-next.blue.light).png
new file mode 100644
index 000000000000..957287b4d10b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns/etalons/T1317623-horizontal-scroll-with-fixed-band-columns (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns/etalons/T1322380-unfix-column-via-context-menu (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns/etalons/T1322380-unfix-column-via-context-menu (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f167f6ea3960
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/fixedColumns/etalons/T1322380-unfix-column-via-context-menu (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/focus/etalons/focus-edit-cell_after-lookup-change (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/focus/etalons/focus-edit-cell_after-lookup-change (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f450e4f66d72
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/focus/etalons/focus-edit-cell_after-lookup-change (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/focus/etalons/focus-edit-cell_after-text-editor-change (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/focus/etalons/focus-edit-cell_after-text-editor-change (fluent-next.blue.light).png
new file mode 100644
index 000000000000..33306fa407f9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/focus/etalons/focus-edit-cell_after-text-editor-change (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/focus/focusedRow/etalons/focused-row-invalid-cells (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/focus/focusedRow/etalons/focused-row-invalid-cells (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b59a6c079b2b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/focus/focusedRow/etalons/focused-row-invalid-cells (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/focus/focusedRow/etalons/focused-row-link-background (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/focus/focusedRow/etalons/focused-row-link-background (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8df68cfeee47
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/focus/focusedRow/etalons/focused-row-link-background (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/focus/focusedRow/etalons/focused-row_markup (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/focus/focusedRow/etalons/focused-row_markup (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d57bfa720ae2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/focus/focusedRow/etalons/focused-row_markup (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/focus/focusedRow/etalons/focused-row_under_group=-1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/focus/focusedRow/etalons/focused-row_under_group=-1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..25869cd0ec47
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/focus/focusedRow/etalons/focused-row_under_group=-1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/focus/focusedRow/etalons/focused-row_under_group=null (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/focus/focusedRow/etalons/focused-row_under_group=null (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1b02b50b2af0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/focus/focusedRow/etalons/focused-row_under_group=null (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/focus/focusedRow/etalons/focused-row_under_group=test (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/focus/focusedRow/etalons/focused-row_under_group=test (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4f7edc85ba3c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/focus/focusedRow/etalons/focused-row_under_group=test (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/focus/focusedRow/etalons/focused-row_under_group=undefined (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/focus/focusedRow/etalons/focused-row_under_group=undefined (fluent-next.blue.light).png
new file mode 100644
index 000000000000..960fbd786145
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/focus/focusedRow/etalons/focused-row_under_group=undefined (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/focus/focusedRow/etalons/focused-row_under_group_when_data-items_have_items-property (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/focus/focusedRow/etalons/focused-row_under_group_when_data-items_have_items-property (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fb57174bef42
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/focus/focusedRow/etalons/focused-row_under_group_when_data-items_have_items-property (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/T1155453-collapsed-groups (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/T1155453-collapsed-groups (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7d0f49f9e3e4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/T1155453-collapsed-groups (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/T1155453-collapsed-groups-with-fixed-content (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/T1155453-collapsed-groups-with-fixed-content (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ee12bda4c93f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/T1155453-collapsed-groups-with-fixed-content (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/T1155453-expanded-groups (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/T1155453-expanded-groups (fluent-next.blue.light).png
new file mode 100644
index 000000000000..414f1e9d57b8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/T1155453-expanded-groups (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/T1155453-expanded-groups-with-fixed-content (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/T1155453-expanded-groups-with-fixed-content (fluent-next.blue.light).png
new file mode 100644
index 000000000000..327dc960a67d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/T1155453-expanded-groups-with-fixed-content (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/T1237863_datagrid-grouping_and_filtering (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/T1237863_datagrid-grouping_and_filtering (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fd5b1c5b5422
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/T1237863_datagrid-grouping_and_filtering (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/continued_group-collapse_icon-T1201981 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/continued_group-collapse_icon-T1201981 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ee4b92e06462
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/continued_group-collapse_icon-T1201981 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/empty-header-message-with-selection-enabled (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/empty-header-message-with-selection-enabled (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6440a9ecba3a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/empty-header-message-with-selection-enabled (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/expanded-groups-content (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/expanded-groups-content (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c40e95e2f322
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/expanded-groups-content (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/group-panel-message-align (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/group-panel-message-align (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b7414c07ed36
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/group-panel-message-align (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/group-panel_loaded_first-page (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/group-panel_loaded_first-page (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dc0737159b0a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/group-panel_loaded_first-page (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/group-panel_loaded_page-end (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/group-panel_loaded_page-end (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1051cb29be69
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/group-panel_loaded_page-end (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/group-panel_loaded_second-page (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/group-panel_loaded_second-page (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e39493f0d78a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/group-panel_loaded_second-page (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/group-panel_restored_first-page (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/group-panel_restored_first-page (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dc0737159b0a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/group-panel_restored_first-page (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/group-panel_restored_page-end (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/group-panel_restored_page-end (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1051cb29be69
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/group-panel_restored_page-end (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/group-panel_restored_second-page (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/group-panel_restored_second-page (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e39493f0d78a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/group-panel_restored_second-page (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/groupingPanel (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/groupingPanel (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3e7a8ef7d713
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/grouping/etalons/groupingPanel (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/headerFilter/etalons/T1251768-header-filter-double-quotes (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/headerFilter/etalons/T1251768-header-filter-double-quotes (fluent-next.blue.light).png
new file mode 100644
index 000000000000..947ac756d478
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/headerFilter/etalons/T1251768-header-filter-double-quotes (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/headerFilter/etalons/T1273020-header-filter-with-case-sensitive-1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/headerFilter/etalons/T1273020-header-filter-with-case-sensitive-1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3c3420f446d2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/headerFilter/etalons/T1273020-header-filter-with-case-sensitive-1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/headerFilter/etalons/T1273020-header-filter-with-case-sensitive-2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/headerFilter/etalons/T1273020-header-filter-with-case-sensitive-2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1ea0ad8f92ae
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/headerFilter/etalons/T1273020-header-filter-with-case-sensitive-2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/headerFilter/etalons/grid-header-filter-popup-T1156848 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/headerFilter/etalons/grid-header-filter-popup-T1156848 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0828b413f67b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/headerFilter/etalons/grid-header-filter-popup-T1156848 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/headerFilter/etalons/header-filter-icon-clear-filter (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/headerFilter/etalons/header-filter-icon-clear-filter (fluent-next.blue.light).png
new file mode 100644
index 000000000000..60f0ff02d91c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/headerFilter/etalons/header-filter-icon-clear-filter (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/headerFilter/etalons/header-filter-popup (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/headerFilter/etalons/header-filter-popup (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fe2f47caab87
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/headerFilter/etalons/header-filter-popup (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/adaptive-row-closed-via-keyboard (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/adaptive-row-closed-via-keyboard (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f7efad79805e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/adaptive-row-closed-via-keyboard (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/adaptive-row-opened-via-keyboard (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/adaptive-row-opened-via-keyboard (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7fa746451c55
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/adaptive-row-opened-via-keyboard (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/cell-focus-showEditorAlways-T1196539 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/cell-focus-showEditorAlways-T1196539 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..db27a4f66799
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/cell-focus-showEditorAlways-T1196539 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/cell_focus_after_column_reordering_when_data_cell_was_focused (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/cell_focus_after_column_reordering_when_data_cell_was_focused (fluent-next.blue.light).png
new file mode 100644
index 000000000000..858a0120c2a3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/cell_focus_after_column_reordering_when_data_cell_was_focused (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/data-grid_keyboard-navigation-custom-button-focused (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/data-grid_keyboard-navigation-custom-button-focused (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cf3e9577e77d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/data-grid_keyboard-navigation-custom-button-focused (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/data-grid_keyboard-navigation-custom-buttons-cell-focused (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/data-grid_keyboard-navigation-custom-buttons-cell-focused (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d6a07e0c46b3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/data-grid_keyboard-navigation-custom-buttons-cell-focused (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/data-grid_keyboard-navigation-data-cell-focused (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/data-grid_keyboard-navigation-data-cell-focused (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c9b3ba0f5640
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/data-grid_keyboard-navigation-data-cell-focused (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/data-grid_keyboard-navigation-header-cell-focused (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/data-grid_keyboard-navigation-header-cell-focused (fluent-next.blue.light).png
new file mode 100644
index 000000000000..91b70d45ce98
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/data-grid_keyboard-navigation-header-cell-focused (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/data-grid_keyboard-navigation-input-text-focused (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/data-grid_keyboard-navigation-input-text-focused (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b73db4e4ec8c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/data-grid_keyboard-navigation-input-text-focused (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/edit-cell-keypress-with-custom-cell-template_template-div (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/edit-cell-keypress-with-custom-cell-template_template-div (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d1f6846fc53b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/edit-cell-keypress-with-custom-cell-template_template-div (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/edit-cell-keypress-with-custom-cell-template_template-input (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/edit-cell-keypress-with-custom-cell-template_template-input (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5501061eb6e4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/edit-cell-keypress-with-custom-cell-template_template-input (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/focus-position-when-second-adaptive-row-opened (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/focus-position-when-second-adaptive-row-opened (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9abf13c78750
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/focus-position-when-second-adaptive-row-opened (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/focus_first_cell_in_first_row_when_pressing_Ctrl_+_Home_key (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/focus_first_cell_in_first_row_when_pressing_Ctrl_+_Home_key (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fb9f42415a73
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/focus_first_cell_in_first_row_when_pressing_Ctrl_+_Home_key (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/focus_first_cell_in_row_that_contains_focus_when_pressing_Home_key (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/focus_first_cell_in_row_that_contains_focus_when_pressing_Home_key (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2e25363e5466
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/focus_first_cell_in_row_that_contains_focus_when_pressing_Home_key (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/focus_last_cell_in_last_row_when_pressing_Ctrl_+_End_key (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/focus_last_cell_in_last_row_when_pressing_Ctrl_+_End_key (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0d376478ab3f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/focus_last_cell_in_last_row_when_pressing_Ctrl_+_End_key (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/focus_last_cell_in_row_that_contains_focus_when_pressing_End_key (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/focus_last_cell_in_row_that_contains_focus_when_pressing_End_key (fluent-next.blue.light).png
new file mode 100644
index 000000000000..553d6034fe1e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/focus_last_cell_in_row_that_contains_focus_when_pressing_End_key (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/group_column_via_context_menu_when_showWhenGrouped_is_true_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/group_column_via_context_menu_when_showWhenGrouped_is_true_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f028b7e5ae1a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/group_column_via_context_menu_when_showWhenGrouped_is_true_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/group_column_via_context_menu_when_showWhenGrouped_is_true_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/group_column_via_context_menu_when_showWhenGrouped_is_true_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6e333094629f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/group_column_via_context_menu_when_showWhenGrouped_is_true_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/group_column_via_keyboard_when_showWhenGrouped_is_true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/group_column_via_keyboard_when_showWhenGrouped_is_true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6e39a67f62b1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/group_column_via_keyboard_when_showWhenGrouped_is_true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/group_last_column_via_context_menu_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/group_last_column_via_context_menu_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8c66fe9951fd
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/group_last_column_via_context_menu_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/group_last_column_via_context_menu_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/group_last_column_via_context_menu_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..267394161ec4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/group_last_column_via_context_menu_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/group_last_column_via_keyboard (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/group_last_column_via_keyboard (fluent-next.blue.light).png
new file mode 100644
index 000000000000..db3b8d75fcf1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/group_last_column_via_keyboard (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/group_second_column_via_context_menu_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/group_second_column_via_context_menu_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7d1ad0d6e61d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/group_second_column_via_context_menu_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/group_second_column_via_context_menu_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/group_second_column_via_context_menu_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4c34edaaf8ef
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/group_second_column_via_context_menu_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/group_second_column_via_keyboard (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/group_second_column_via_keyboard (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7d0645f160c0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/group_second_column_via_keyboard (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/group_single_column_via_context_menu_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/group_single_column_via_context_menu_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0b870529b4c5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/group_single_column_via_context_menu_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/group_single_column_via_context_menu_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/group_single_column_via_context_menu_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f82c27e930b5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/group_single_column_via_context_menu_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/group_single_column_via_keyboard (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/group_single_column_via_keyboard (fluent-next.blue.light).png
new file mode 100644
index 000000000000..962887e3e003
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/group_single_column_via_keyboard (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/native_scrolling_-_auto_scroll_to_left_when_column_reordering (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/native_scrolling_-_auto_scroll_to_left_when_column_reordering (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6fd4c43a6cfc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/native_scrolling_-_auto_scroll_to_left_when_column_reordering (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/native_scrolling_-_auto_scroll_to_left_when_virtual_columns_are_enabled (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/native_scrolling_-_auto_scroll_to_left_when_virtual_columns_are_enabled (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a44588a09731
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/native_scrolling_-_auto_scroll_to_left_when_virtual_columns_are_enabled (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/native_scrolling_-_auto_scroll_to_right_when_column_reordering (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/native_scrolling_-_auto_scroll_to_right_when_column_reordering (fluent-next.blue.light).png
new file mode 100644
index 000000000000..45362029b758
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/native_scrolling_-_auto_scroll_to_right_when_column_reordering (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/native_scrolling_-_auto_scroll_to_right_when_virtual_columns_are_enabled (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/native_scrolling_-_auto_scroll_to_right_when_virtual_columns_are_enabled (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bbee4a57558b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/native_scrolling_-_auto_scroll_to_right_when_virtual_columns_are_enabled (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/native_scrolling_-_navigate_to_first_cell_row_dragging__virtual_scrolling__virtual_columns (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/native_scrolling_-_navigate_to_first_cell_row_dragging__virtual_scrolling__virtual_columns (fluent-next.blue.light).png
new file mode 100644
index 000000000000..21a834d18126
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/native_scrolling_-_navigate_to_first_cell_row_dragging__virtual_scrolling__virtual_columns (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/native_scrolling_-_navigate_to_last_cell_row_dragging__virtual_scrolling__virtual_columns (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/native_scrolling_-_navigate_to_last_cell_row_dragging__virtual_scrolling__virtual_columns (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e38f7ff0221f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/native_scrolling_-_navigate_to_last_cell_row_dragging__virtual_scrolling__virtual_columns (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_first_cell_in_first_row_when_pressing_Ctrl_+_Home_key_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_first_cell_in_first_row_when_pressing_Ctrl_+_Home_key_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7f09f6287d5d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_first_cell_in_first_row_when_pressing_Ctrl_+_Home_key_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_first_cell_in_first_row_when_pressing_Ctrl_+_Home_key_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_first_cell_in_first_row_when_pressing_Ctrl_+_Home_key_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..525e3dd2b394
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_first_cell_in_first_row_when_pressing_Ctrl_+_Home_key_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_first_cell_in_first_row_when_virtual_scrolling_and_columns_are_enabled_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_first_cell_in_first_row_when_virtual_scrolling_and_columns_are_enabled_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..47237ddac1f2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_first_cell_in_first_row_when_virtual_scrolling_and_columns_are_enabled_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_first_cell_in_first_row_when_virtual_scrolling_and_columns_are_enabled_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_first_cell_in_first_row_when_virtual_scrolling_and_columns_are_enabled_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..eda382f2b682
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_first_cell_in_first_row_when_virtual_scrolling_and_columns_are_enabled_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_first_cell_in_first_row_when_virtual_scrolling_is_enabled_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_first_cell_in_first_row_when_virtual_scrolling_is_enabled_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..293f55c97640
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_first_cell_in_first_row_when_virtual_scrolling_is_enabled_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_first_cell_in_first_row_when_virtual_scrolling_is_enabled_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_first_cell_in_first_row_when_virtual_scrolling_is_enabled_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..525e3dd2b394
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_first_cell_in_first_row_when_virtual_scrolling_is_enabled_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_first_cell_in_row_that_contains_focus_when_adaptivity_is_enabled (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_first_cell_in_row_that_contains_focus_when_adaptivity_is_enabled (fluent-next.blue.light).png
new file mode 100644
index 000000000000..32dff02f39d4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_first_cell_in_row_that_contains_focus_when_adaptivity_is_enabled (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_first_cell_in_row_that_contains_focus_when_pressing_Home_key (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_first_cell_in_row_that_contains_focus_when_pressing_Home_key (fluent-next.blue.light).png
new file mode 100644
index 000000000000..525e3dd2b394
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_first_cell_in_row_that_contains_focus_when_pressing_Home_key (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_first_cell_in_row_that_contains_focus_when_row_dragging_is_enabled (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_first_cell_in_row_that_contains_focus_when_row_dragging_is_enabled (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ae1f5c15e48c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_first_cell_in_row_that_contains_focus_when_row_dragging_is_enabled (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_first_cell_in_row_that_contains_focus_when_virtual_columns_are_enabled (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_first_cell_in_row_that_contains_focus_when_virtual_columns_are_enabled (fluent-next.blue.light).png
new file mode 100644
index 000000000000..525e3dd2b394
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_first_cell_in_row_that_contains_focus_when_virtual_columns_are_enabled (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_last_cell_in_last_row_when_pressing_Ctrl_+_End_key (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_last_cell_in_last_row_when_pressing_Ctrl_+_End_key (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ad7c189a5f31
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_last_cell_in_last_row_when_pressing_Ctrl_+_End_key (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_last_cell_in_last_row_when_virtual_scrolling_and_columns_are_enabled (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_last_cell_in_last_row_when_virtual_scrolling_and_columns_are_enabled (fluent-next.blue.light).png
new file mode 100644
index 000000000000..66b6170e839a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_last_cell_in_last_row_when_virtual_scrolling_and_columns_are_enabled (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_last_cell_in_last_row_when_virtual_scrolling_is_enabled (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_last_cell_in_last_row_when_virtual_scrolling_is_enabled (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6cd4454646dc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_last_cell_in_last_row_when_virtual_scrolling_is_enabled (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_last_cell_in_row_that_contains_focus_when_adaptivity_is_enabled (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_last_cell_in_row_that_contains_focus_when_adaptivity_is_enabled (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4bae04d21247
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_last_cell_in_row_that_contains_focus_when_adaptivity_is_enabled (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_last_cell_in_row_that_contains_focus_when_focusedRowEnabled_is_true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_last_cell_in_row_that_contains_focus_when_focusedRowEnabled_is_true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9a7361e6e661
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_last_cell_in_row_that_contains_focus_when_focusedRowEnabled_is_true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_last_cell_in_row_that_contains_focus_when_pressing_End_key (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_last_cell_in_row_that_contains_focus_when_pressing_End_key (fluent-next.blue.light).png
new file mode 100644
index 000000000000..140196847077
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_last_cell_in_row_that_contains_focus_when_pressing_End_key (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_last_cell_in_row_that_contains_focus_when_virtual_columns_are_enabled (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_last_cell_in_row_that_contains_focus_when_virtual_columns_are_enabled (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5c404dcd6c34
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigate_to_last_cell_in_row_that_contains_focus_when_virtual_columns_are_enabled (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigation_should_not_work_when_pressing_End_when_row_is_in_edit_state (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigation_should_not_work_when_pressing_End_when_row_is_in_edit_state (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3d671352d9f4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/navigation_should_not_work_when_pressing_End_when_row_is_in_edit_state (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_band_column_to_left (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_band_column_to_left (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1b172b1428ac
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_band_column_to_left (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_band_column_to_right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_band_column_to_right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9f457665ac29
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_band_column_to_right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_left_via_context_menu_when_rtlEnabled_=_false_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_left_via_context_menu_when_rtlEnabled_=_false_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ccfc2384b0ed
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_left_via_context_menu_when_rtlEnabled_=_false_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_left_via_context_menu_when_rtlEnabled_=_false_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_left_via_context_menu_when_rtlEnabled_=_false_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..aaef61398f7e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_left_via_context_menu_when_rtlEnabled_=_false_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_left_via_context_menu_when_rtlEnabled_=_true_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_left_via_context_menu_when_rtlEnabled_=_true_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6aa5ad2fb873
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_left_via_context_menu_when_rtlEnabled_=_true_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_left_via_context_menu_when_rtlEnabled_=_true_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_left_via_context_menu_when_rtlEnabled_=_true_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fda9b5ced067
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_left_via_context_menu_when_rtlEnabled_=_true_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_left_when_rtlEnabled_=_false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_left_when_rtlEnabled_=_false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3e98cce53105
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_left_when_rtlEnabled_=_false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_left_when_rtlEnabled_=_true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_left_when_rtlEnabled_=_true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ad6050ad8341
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_left_when_rtlEnabled_=_true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_left_when_there_are_hidden_columns (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_left_when_there_are_hidden_columns (fluent-next.blue.light).png
new file mode 100644
index 000000000000..51a54ab2e927
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_left_when_there_are_hidden_columns (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_left_when_there_is_command_column (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_left_when_there_is_command_column (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0800f654fbb4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_left_when_there_is_command_column (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_right_via_context_menu_when_rtlEnabled_=_false_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_right_via_context_menu_when_rtlEnabled_=_false_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..920d32b00e3a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_right_via_context_menu_when_rtlEnabled_=_false_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_right_via_context_menu_when_rtlEnabled_=_false_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_right_via_context_menu_when_rtlEnabled_=_false_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c37f2489c0a0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_right_via_context_menu_when_rtlEnabled_=_false_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_right_via_context_menu_when_rtlEnabled_=_true_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_right_via_context_menu_when_rtlEnabled_=_true_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e7b3788737f8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_right_via_context_menu_when_rtlEnabled_=_true_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_right_via_context_menu_when_rtlEnabled_=_true_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_right_via_context_menu_when_rtlEnabled_=_true_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ee65e3df2f67
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_right_via_context_menu_when_rtlEnabled_=_true_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_right_when_rtlEnabled_=_false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_right_when_rtlEnabled_=_false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cc580d370985
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_right_when_rtlEnabled_=_false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_right_when_rtlEnabled_=_true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_right_when_rtlEnabled_=_true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..587fb1d71241
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_right_when_rtlEnabled_=_true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_right_when_there_are_hidden_columns (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_right_when_there_are_hidden_columns (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4c1a7184c868
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_right_when_there_are_hidden_columns (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_right_when_there_is_command_column (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_right_when_there_is_command_column (fluent-next.blue.light).png
new file mode 100644
index 000000000000..339fcf5eabc6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_to_right_when_there_is_command_column (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_via_context_menu_when_allowColumnReordering_is_false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_via_context_menu_when_allowColumnReordering_is_false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..26da367c6186
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_via_context_menu_when_allowColumnReordering_is_false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_when_allowColumnReordering_is_false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_when_allowColumnReordering_is_false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1fc3b99466be
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_when_allowColumnReordering_is_false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_when_allowColumnReordering_is_false_and_group_panel_is_visible (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_when_allowColumnReordering_is_false_and_group_panel_is_visible (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9e117966a59c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_when_allowColumnReordering_is_false_and_group_panel_is_visible (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_when_there_are_async_templates_and_renderAsync_=_false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_when_there_are_async_templates_and_renderAsync_=_false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5e2ef63fe44e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_when_there_are_async_templates_and_renderAsync_=_false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_when_there_are_async_templates_and_renderAsync_=_true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_when_there_are_async_templates_and_renderAsync_=_true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5e2ef63fe44e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_when_there_are_async_templates_and_renderAsync_=_true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_with_allowReordering_is_false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_with_allowReordering_is_false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1fc3b99466be
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_column_with_allowReordering_is_false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_custom_command_column_to_left (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_custom_command_column_to_left (fluent-next.blue.light).png
new file mode 100644
index 000000000000..916ea0aa50a8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_custom_command_column_to_left (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_custom_command_column_to_right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_custom_command_column_to_right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..af6e56aed762
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_custom_command_column_to_right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_custom_command_column_to_right_via_context_menu_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_custom_command_column_to_right_via_context_menu_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..070856935d8f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_custom_command_column_to_right_via_context_menu_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_custom_command_column_to_right_via_context_menu_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_custom_command_column_to_right_via_context_menu_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3d502e74aca9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_custom_command_column_to_right_via_context_menu_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_left_column_to_left (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_left_column_to_left (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1015d83fd81c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_left_column_to_left (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_left_column_to_left_via_context_menu_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_left_column_to_left_via_context_menu_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a341f4a786ad
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_left_column_to_left_via_context_menu_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_left_column_to_left_via_context_menu_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_left_column_to_left_via_context_menu_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c03bd128b7ee
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_left_column_to_left_via_context_menu_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_left_column_to_right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_left_column_to_right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3eb97311c4b1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_left_column_to_right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_left_column_to_right_via_context_menu_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_left_column_to_right_via_context_menu_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8653d94a12c7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_left_column_to_right_via_context_menu_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_left_column_to_right_via_context_menu_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_left_column_to_right_via_context_menu_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4f0e9f4bae28
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_left_column_to_right_via_context_menu_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_nested_column_to_left (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_nested_column_to_left (fluent-next.blue.light).png
new file mode 100644
index 000000000000..745a20b9f676
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_nested_column_to_left (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_nested_column_to_right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_nested_column_to_right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..57311c55e053
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_nested_column_to_right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_right_column_to_left (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_right_column_to_left (fluent-next.blue.light).png
new file mode 100644
index 000000000000..666b65f52b19
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_right_column_to_left (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_right_column_to_left_via_context_menu_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_right_column_to_left_via_context_menu_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ec4a83ce2f7a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_right_column_to_left_via_context_menu_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_right_column_to_left_via_context_menu_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_right_column_to_left_via_context_menu_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4733818fe2d2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_right_column_to_left_via_context_menu_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_right_column_to_right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_right_column_to_right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dd472df1c76a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_right_column_to_right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_right_column_to_right_via_context_menu_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_right_column_to_right_via_context_menu_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..19923ca64585
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_right_column_to_right_via_context_menu_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_right_column_to_right_via_context_menu_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_right_column_to_right_via_context_menu_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..289125cfe837
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_right_column_to_right_via_context_menu_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_right_column_to_right_when_there_is_command_column_on_right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_right_column_to_right_when_there_is_command_column_on_right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5a59c509d2ce
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_right_column_to_right_when_there_is_command_column_on_right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_right_column_to_right_when_there_is_custom_command_column_on_right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_right_column_to_right_when_there_is_custom_command_column_on_right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1658da6423af
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_fixed_right_column_to_right_when_there_is_custom_command_column_on_right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_to_left_via_context_menu_when_rtlEnabled_=_false_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_to_left_via_context_menu_when_rtlEnabled_=_false_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..62532c3043f9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_to_left_via_context_menu_when_rtlEnabled_=_false_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_to_left_via_context_menu_when_rtlEnabled_=_false_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_to_left_via_context_menu_when_rtlEnabled_=_false_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..735d426c5cfb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_to_left_via_context_menu_when_rtlEnabled_=_false_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_to_left_via_context_menu_when_rtlEnabled_=_true_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_to_left_via_context_menu_when_rtlEnabled_=_true_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d565a33af227
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_to_left_via_context_menu_when_rtlEnabled_=_true_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_to_left_via_context_menu_when_rtlEnabled_=_true_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_to_left_via_context_menu_when_rtlEnabled_=_true_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..aaeda4b46b20
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_to_left_via_context_menu_when_rtlEnabled_=_true_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_to_left_when_rtlEnabled_=_false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_to_left_when_rtlEnabled_=_false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..89d98408d538
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_to_left_when_rtlEnabled_=_false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_to_left_when_rtlEnabled_=_true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_to_left_when_rtlEnabled_=_true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8518b3d2dcb7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_to_left_when_rtlEnabled_=_true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_to_right_via_context_menu_when_rtlEnabled_=_false_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_to_right_via_context_menu_when_rtlEnabled_=_false_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7018bf956864
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_to_right_via_context_menu_when_rtlEnabled_=_false_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_to_right_via_context_menu_when_rtlEnabled_=_false_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_to_right_via_context_menu_when_rtlEnabled_=_false_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..52db6950c032
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_to_right_via_context_menu_when_rtlEnabled_=_false_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_to_right_via_context_menu_when_rtlEnabled_=_true_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_to_right_via_context_menu_when_rtlEnabled_=_true_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..93913824743c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_to_right_via_context_menu_when_rtlEnabled_=_true_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_to_right_via_context_menu_when_rtlEnabled_=_true_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_to_right_via_context_menu_when_rtlEnabled_=_true_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a14a6c88ec7e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_to_right_via_context_menu_when_rtlEnabled_=_true_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_to_right_when_rtlEnabled_=_false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_to_right_when_rtlEnabled_=_false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..117816b002d2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_to_right_when_rtlEnabled_=_false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_to_right_when_rtlEnabled_=_true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_to_right_when_rtlEnabled_=_true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2176addd6965
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_to_right_when_rtlEnabled_=_true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_via_context_menu_when_group_panel_allowColumnDragging_is_false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_via_context_menu_when_group_panel_allowColumnDragging_is_false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7ebd49df172f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_via_context_menu_when_group_panel_allowColumnDragging_is_false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_when_group_panel_allowColumnDragging_is_false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_when_group_panel_allowColumnDragging_is_false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7fbd55a6b063
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_when_group_panel_allowColumnDragging_is_false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_when_onKeyDown_args_handled_=_true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_when_onKeyDown_args_handled_=_true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7fbd55a6b063
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_when_onKeyDown_args_handled_=_true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_with_allowGrouping_is_false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_with_allowGrouping_is_false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7fbd55a6b063
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_group_column_with_allowGrouping_is_false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_nested_column_to_left (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_nested_column_to_left (fluent-next.blue.light).png
new file mode 100644
index 000000000000..133df09c3899
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_nested_column_to_left (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_nested_column_to_left_via_context_menu_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_nested_column_to_left_via_context_menu_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..85aceb4ac631
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_nested_column_to_left_via_context_menu_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_nested_column_to_left_via_context_menu_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_nested_column_to_left_via_context_menu_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2ad9a4a8995c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_nested_column_to_left_via_context_menu_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_nested_column_to_right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_nested_column_to_right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..219d1d573cfe
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_nested_column_to_right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_nested_column_to_right_via_context_menu_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_nested_column_to_right_via_context_menu_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a748554c1445
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_nested_column_to_right_via_context_menu_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_nested_column_to_right_via_context_menu_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_nested_column_to_right_via_context_menu_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6d0a712d58a9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_nested_column_to_right_via_context_menu_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_sticky_column_to_left (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_sticky_column_to_left (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2f568eec1faf
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_sticky_column_to_left (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_sticky_column_to_right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_sticky_column_to_right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c43e1febc596
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/reorder_sticky_column_to_right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/simulated_scrolling_-_auto_scroll_to_left_when_column_reordering (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/simulated_scrolling_-_auto_scroll_to_left_when_column_reordering (fluent-next.blue.light).png
new file mode 100644
index 000000000000..73058c7ce4ee
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/simulated_scrolling_-_auto_scroll_to_left_when_column_reordering (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/simulated_scrolling_-_auto_scroll_to_left_when_virtual_columns_are_enabled (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/simulated_scrolling_-_auto_scroll_to_left_when_virtual_columns_are_enabled (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1769f3cd80d1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/simulated_scrolling_-_auto_scroll_to_left_when_virtual_columns_are_enabled (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/simulated_scrolling_-_auto_scroll_to_right_when_column_reordering (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/simulated_scrolling_-_auto_scroll_to_right_when_column_reordering (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bdb8b443ea01
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/simulated_scrolling_-_auto_scroll_to_right_when_column_reordering (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/simulated_scrolling_-_auto_scroll_to_right_when_virtual_columns_are_enabled (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/simulated_scrolling_-_auto_scroll_to_right_when_virtual_columns_are_enabled (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f151c962ade1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/simulated_scrolling_-_auto_scroll_to_right_when_virtual_columns_are_enabled (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/simulated_scrolling_-_navigate_to_first_cell_row_dragging__virtual_scrolling__virtual_columns (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/simulated_scrolling_-_navigate_to_first_cell_row_dragging__virtual_scrolling__virtual_columns (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0feddddbd56b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/simulated_scrolling_-_navigate_to_first_cell_row_dragging__virtual_scrolling__virtual_columns (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/simulated_scrolling_-_navigate_to_last_cell_row_dragging__virtual_scrolling__virtual_columns (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/simulated_scrolling_-_navigate_to_last_cell_row_dragging__virtual_scrolling__virtual_columns (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dd276d9223ca
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/simulated_scrolling_-_navigate_to_last_cell_row_dragging__virtual_scrolling__virtual_columns (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_all_columns_via_context_menu_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_all_columns_via_context_menu_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ec6360e6c418
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_all_columns_via_context_menu_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_all_columns_via_context_menu_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_all_columns_via_context_menu_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0a211b350481
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_all_columns_via_context_menu_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_all_columns_via_context_menu_when_showWhenGrouped_is_true_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_all_columns_via_context_menu_when_showWhenGrouped_is_true_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b24d45fc318a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_all_columns_via_context_menu_when_showWhenGrouped_is_true_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_all_columns_via_context_menu_when_showWhenGrouped_is_true_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_all_columns_via_context_menu_when_showWhenGrouped_is_true_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b8e91fe34ee0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_all_columns_via_context_menu_when_showWhenGrouped_is_true_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_all_columns_when_pressing_Shift_+_Alt_+_G (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_all_columns_when_pressing_Shift_+_Alt_+_G (fluent-next.blue.light).png
new file mode 100644
index 000000000000..430565c65e79
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_all_columns_when_pressing_Shift_+_Alt_+_G (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_all_columns_when_pressing_Shift_+_Alt_+_G_on_header (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_all_columns_when_pressing_Shift_+_Alt_+_G_on_header (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0162c0b01f4e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_all_columns_when_pressing_Shift_+_Alt_+_G_on_header (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_column_via_context_menu_when_showWhenGrouped_is_true_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_column_via_context_menu_when_showWhenGrouped_is_true_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a2f5564f846e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_column_via_context_menu_when_showWhenGrouped_is_true_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_column_via_context_menu_when_showWhenGrouped_is_true_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_column_via_context_menu_when_showWhenGrouped_is_true_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3ad470bd99ed
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_column_via_context_menu_when_showWhenGrouped_is_true_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_column_when_pressing_Ctrl_+_Shift_+_G (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_column_when_pressing_Ctrl_+_Shift_+_G (fluent-next.blue.light).png
new file mode 100644
index 000000000000..affc561f60d2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_column_when_pressing_Ctrl_+_Shift_+_G (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_column_when_pressing_ctrl_+_shift_+_g_if_showWhenGrouped_is_true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_column_when_pressing_ctrl_+_shift_+_g_if_showWhenGrouped_is_true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fdbd82afd098
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_column_when_pressing_ctrl_+_shift_+_g_if_showWhenGrouped_is_true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_column_when_pressing_delete (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_column_when_pressing_delete (fluent-next.blue.light).png
new file mode 100644
index 000000000000..affc561f60d2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_column_when_pressing_delete (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_last_column_via_context_menu_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_last_column_via_context_menu_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c8b2e00e0cf6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_last_column_via_context_menu_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_last_column_via_context_menu_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_last_column_via_context_menu_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8860152db9dc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_last_column_via_context_menu_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_last_column_when_pressing_backspace (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_last_column_when_pressing_backspace (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9dc8aca3915d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_last_column_when_pressing_backspace (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_second_column_via_context_menu_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_second_column_via_context_menu_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..caf34d062832
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_second_column_via_context_menu_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_second_column_via_context_menu_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_second_column_via_context_menu_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..43a914f1a68b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_second_column_via_context_menu_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_second_column_when_pressing_backspace (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_second_column_when_pressing_backspace (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1c597e6170a4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_second_column_when_pressing_backspace (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_single_column_on_backspace_when_there_is_command_column (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_single_column_on_backspace_when_there_is_command_column (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5cc427a1b5ba
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_single_column_on_backspace_when_there_is_command_column (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_single_column_via_context_menu_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_single_column_via_context_menu_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..22fed319a5ac
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_single_column_via_context_menu_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_single_column_via_context_menu_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_single_column_via_context_menu_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d171dc63488d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_single_column_via_context_menu_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_single_column_when_pressing_backspace (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_single_column_when_pressing_backspace (fluent-next.blue.light).png
new file mode 100644
index 000000000000..430565c65e79
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/ungroup_single_column_when_pressing_backspace (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/markup/etalons/T1293839-grid-no-data-text-rendered (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/markup/etalons/T1293839-grid-no-data-text-rendered (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0d0886b5083d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/markup/etalons/T1293839-grid-no-data-text-rendered (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/markup/etalons/T838734_alternate-rows-same-size (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/markup/etalons/T838734_alternate-rows-same-size (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0f845246097c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/markup/etalons/T838734_alternate-rows-same-size (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/markup/etalons/datagrid-deleted-row-height-no-row-lines-and-fixed-column (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/markup/etalons/datagrid-deleted-row-height-no-row-lines-and-fixed-column (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e07f806e8db9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/markup/etalons/datagrid-deleted-row-height-no-row-lines-and-fixed-column (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/markup/etalons/datagrid-deleted-row-height-no-row-lines-and-no-fixed-column (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/markup/etalons/datagrid-deleted-row-height-no-row-lines-and-no-fixed-column (fluent-next.blue.light).png
new file mode 100644
index 000000000000..367596531752
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/markup/etalons/datagrid-deleted-row-height-no-row-lines-and-no-fixed-column (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/markup/etalons/datagrid-deleted-row-height-row-lines-and-fixed-column (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/markup/etalons/datagrid-deleted-row-height-row-lines-and-fixed-column (fluent-next.blue.light).png
new file mode 100644
index 000000000000..778b3ff73155
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/markup/etalons/datagrid-deleted-row-height-row-lines-and-fixed-column (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/markup/etalons/datagrid-deleted-row-height-row-lines-and-no-fixed-column (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/markup/etalons/datagrid-deleted-row-height-row-lines-and-no-fixed-column (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c506fa6af33c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/markup/etalons/datagrid-deleted-row-height-row-lines-and-no-fixed-column (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/markup/etalons/grid-no-data-text-position (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/markup/etalons/grid-no-data-text-position (fluent-next.blue.light).png
new file mode 100644
index 000000000000..69a19d7160fc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/markup/etalons/grid-no-data-text-position (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/markup/etalons/icon-sizes (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/markup/etalons/icon-sizes (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3fc8526e5c87
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/markup/etalons/icon-sizes (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/masterDetail/etalons/T1045321 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/masterDetail/etalons/T1045321 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fba5c820898f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/masterDetail/etalons/T1045321 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/masterDetail/etalons/T1113525.page-size-select (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/masterDetail/etalons/T1113525.page-size-select (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6864d2ee4377
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/masterDetail/etalons/T1113525.page-size-select (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/masterDetail/etalons/T1159578-master-detail-with-renderAsync-1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/masterDetail/etalons/T1159578-master-detail-with-renderAsync-1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..40ee8c64fd0f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/masterDetail/etalons/T1159578-master-detail-with-renderAsync-1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/masterDetail/etalons/T1159578-master-detail-with-renderAsync-2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/masterDetail/etalons/T1159578-master-detail-with-renderAsync-2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fa356d4b8492
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/masterDetail/etalons/T1159578-master-detail-with-renderAsync-2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/masterDetail/etalons/T1167889-master-detail-with-scrolling.useNative=false-1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/masterDetail/etalons/T1167889-master-detail-with-scrolling.useNative=false-1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..33fb472f0461
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/masterDetail/etalons/T1167889-master-detail-with-scrolling.useNative=false-1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/masterDetail/etalons/T1167889-master-detail-with-scrolling.useNative=false-2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/masterDetail/etalons/T1167889-master-detail-with-scrolling.useNative=false-2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..155483a11ad2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/masterDetail/etalons/T1167889-master-detail-with-scrolling.useNative=false-2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/masterDetail/etalons/T1167889-master-detail-with-scrolling.useNative=false-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/masterDetail/etalons/T1167889-master-detail-with-scrolling.useNative=false-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..33fb472f0461
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/masterDetail/etalons/T1167889-master-detail-with-scrolling.useNative=false-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/masterDetail/etalons/T1167889-master-detail-with-scrolling.useNative=true-1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/masterDetail/etalons/T1167889-master-detail-with-scrolling.useNative=true-1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..33fb472f0461
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/masterDetail/etalons/T1167889-master-detail-with-scrolling.useNative=true-1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/masterDetail/etalons/T1167889-master-detail-with-scrolling.useNative=true-2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/masterDetail/etalons/T1167889-master-detail-with-scrolling.useNative=true-2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..155483a11ad2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/masterDetail/etalons/T1167889-master-detail-with-scrolling.useNative=true-2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/masterDetail/etalons/T1167889-master-detail-with-scrolling.useNative=true-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/masterDetail/etalons/T1167889-master-detail-with-scrolling.useNative=true-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..33fb472f0461
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/masterDetail/etalons/T1167889-master-detail-with-scrolling.useNative=true-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/rowDragging/etalons/T1179218-virtual-scrolling-dragging-row (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/rowDragging/etalons/T1179218-virtual-scrolling-dragging-row (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5649619958e7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/rowDragging/etalons/T1179218-virtual-scrolling-dragging-row (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/sorting/etalons/T1237863_datagrid-sorting_and_filtering (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/sorting/etalons/T1237863_datagrid-sorting_and_filtering (fluent-next.blue.light).png
new file mode 100644
index 000000000000..95963d1eb842
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/sorting/etalons/T1237863_datagrid-sorting_and_filtering (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/sorting/etalons/datagrid-alphabetical-icons-should-be-correct (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/sorting/etalons/datagrid-alphabetical-icons-should-be-correct (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8d78ad519f95
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/sorting/etalons/datagrid-alphabetical-icons-should-be-correct (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/stateStoring/etalons/T1188828-state-storing-with-selected-row-keys (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/stateStoring/etalons/T1188828-state-storing-with-selected-row-keys (fluent-next.blue.light).png
new file mode 100644
index 000000000000..df492943a308
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/stateStoring/etalons/T1188828-state-storing-with-selected-row-keys (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/validation/etalons/Invalid-message-word-wrapping (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/validation/etalons/Invalid-message-word-wrapping (fluent-next.blue.light).png
new file mode 100644
index 000000000000..007e5ea02a1d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/validation/etalons/Invalid-message-word-wrapping (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/validation/etalons/validation-message-shown-after-master-detail-collapse (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/validation/etalons/validation-message-shown-after-master-detail-collapse (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7a1780d362bf
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/validation/etalons/validation-message-shown-after-master-detail-collapse (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/validation/etalons/validation-popup (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/validation/etalons/validation-popup (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f481e7840d49
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/validation/etalons/validation-popup (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/validation/etalons/validation-popup_master-detail (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/validation/etalons/validation-popup_master-detail (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9ccbd4cc2910
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/validation/etalons/validation-popup_master-detail (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/validation/etalons/validation-popup_master-detail_after-scroll (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/validation/etalons/validation-popup_master-detail_after-scroll (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c524c957203a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/validation/etalons/validation-popup_master-detail_after-scroll (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/validation/etalons/validation-popup_master-detail_fixed-column (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/validation/etalons/validation-popup_master-detail_fixed-column (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8dc191686ad0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/validation/etalons/validation-popup_master-detail_fixed-column (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/validation/etalons/validation-popup_master-detail_fixed-column_after-scroll (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/validation/etalons/validation-popup_master-detail_fixed-column_after-scroll (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ef80a3a679d5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/validation/etalons/validation-popup_master-detail_fixed-column_after-scroll (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/T1090735-grid-virtual-columns (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/T1090735-grid-virtual-columns (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d0d6c511c492
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/T1090735-grid-virtual-columns (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/T1176160-master-detail-with-virtual-columns-and-useNative=false-1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/T1176160-master-detail-with-virtual-columns-and-useNative=false-1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b5f6b95dd3c7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/T1176160-master-detail-with-virtual-columns-and-useNative=false-1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/T1176160-master-detail-with-virtual-columns-and-useNative=false-2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/T1176160-master-detail-with-virtual-columns-and-useNative=false-2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a23faad80f74
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/T1176160-master-detail-with-virtual-columns-and-useNative=false-2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/T1176160-master-detail-with-virtual-columns-and-useNative=true-1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/T1176160-master-detail-with-virtual-columns-and-useNative=true-1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..af8624ba7aea
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/T1176160-master-detail-with-virtual-columns-and-useNative=true-1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/T1176160-master-detail-with-virtual-columns-and-useNative=true-2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/T1176160-master-detail-with-virtual-columns-and-useNative=true-2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d0a76a1328ab
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/T1176160-master-detail-with-virtual-columns-and-useNative=true-2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/T1176161-master-detail-with-virtual-columns-1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/T1176161-master-detail-with-virtual-columns-1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a6156e1335a2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/T1176161-master-detail-with-virtual-columns-1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/T1176161-master-detail-with-virtual-columns-2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/T1176161-master-detail-with-virtual-columns-2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..929a9d228e2c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/T1176161-master-detail-with-virtual-columns-2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/T1221369_fixed-summary-with-virtual-cols_0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/T1221369_fixed-summary-with-virtual-cols_0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c25012fc57a0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/T1221369_fixed-summary-with-virtual-cols_0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/T1221369_fixed-summary-with-virtual-cols_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/T1221369_fixed-summary-with-virtual-cols_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..95c568f66c0c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/T1221369_fixed-summary-with-virtual-cols_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/T1221369_fixed-summary-with-virtual-cols_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/T1221369_fixed-summary-with-virtual-cols_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c25012fc57a0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/T1221369_fixed-summary-with-virtual-cols_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/T1260472-async-render-after-horizontal-scrolling (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/T1260472-async-render-after-horizontal-scrolling (fluent-next.blue.light).png
new file mode 100644
index 000000000000..19eaa5cfd6de
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/T1260472-async-render-after-horizontal-scrolling (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/T1260472-async-render-during-horizontal-scrolling (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/T1260472-async-render-during-horizontal-scrolling (fluent-next.blue.light).png
new file mode 100644
index 000000000000..430ba8abcee3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/T1260472-async-render-during-horizontal-scrolling (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/T1319173__datagrid__virtual-columns__repaintChangesOnly=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/T1319173__datagrid__virtual-columns__repaintChangesOnly=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e78aac03ee2b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/T1319173__datagrid__virtual-columns__repaintChangesOnly=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/data-grid__virtual-columns__column-chooser (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/data-grid__virtual-columns__column-chooser (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c80fdce60e25
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/data-grid__virtual-columns__column-chooser (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/data-grid__virtual-columns__grouping (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/data-grid__virtual-columns__grouping (fluent-next.blue.light).png
new file mode 100644
index 000000000000..94b7a1adbd26
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/data-grid__virtual-columns__grouping (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/data-grid__virtual-columns__reoder (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/data-grid__virtual-columns__reoder (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1fd0074d51fb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/data-grid__virtual-columns__reoder (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/grid-virtual-columns-after-reinit (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/grid-virtual-columns-after-reinit (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4a116506b5a4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/virtualColumns/etalons/grid-virtual-columns-after-reinit (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/T1269088_grid_with_fixed_columns_and_without_data (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/T1269088_grid_with_fixed_columns_and_without_data (fluent-next.blue.light).png
new file mode 100644
index 000000000000..75314783c5d5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/T1269088_grid_with_fixed_columns_and_without_data (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/T1279722_band_sticky_columns-headers_with_filter_row_and_grouped_column_(rtl=false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/T1279722_band_sticky_columns-headers_with_filter_row_and_grouped_column_(rtl=false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fb137009118a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/T1279722_band_sticky_columns-headers_with_filter_row_and_grouped_column_(rtl=false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/T1279722_band_sticky_columns-headers_with_filter_row_and_grouped_column_(rtl=true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/T1279722_band_sticky_columns-headers_with_filter_row_and_grouped_column_(rtl=true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..db409239dcff
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/T1279722_band_sticky_columns-headers_with_filter_row_and_grouped_column_(rtl=true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/T1303134_boolean_column_checkboxes_with_fixed_columns (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/T1303134_boolean_column_checkboxes_with_fixed_columns (fluent-next.blue.light).png
new file mode 100644
index 000000000000..74460f3489c1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/T1303134_boolean_column_checkboxes_with_fixed_columns (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/adaptability_fixed_columns_with_small_grid_width_(rtlEnabled_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/adaptability_fixed_columns_with_small_grid_width_(rtlEnabled_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4a43b67df96f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/adaptability_fixed_columns_with_small_grid_width_(rtlEnabled_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/adaptability_fixed_columns_with_small_grid_width_(rtlEnabled_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/adaptability_fixed_columns_with_small_grid_width_(rtlEnabled_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2b8420496b0d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/adaptability_fixed_columns_with_small_grid_width_(rtlEnabled_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/adaptability_sticky_columns_with_adaptive_detail_row_1_(rtlEnabled_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/adaptability_sticky_columns_with_adaptive_detail_row_1_(rtlEnabled_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a7c17d862d8b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/adaptability_sticky_columns_with_adaptive_detail_row_1_(rtlEnabled_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/adaptability_sticky_columns_with_adaptive_detail_row_1_(rtlEnabled_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/adaptability_sticky_columns_with_adaptive_detail_row_1_(rtlEnabled_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..87b76d726a54
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/adaptability_sticky_columns_with_adaptive_detail_row_1_(rtlEnabled_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/adaptability_sticky_columns_with_adaptive_detail_row_2_(rtlEnabled_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/adaptability_sticky_columns_with_adaptive_detail_row_2_(rtlEnabled_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a0a30958ea38
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/adaptability_sticky_columns_with_adaptive_detail_row_2_(rtlEnabled_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/adaptability_sticky_columns_with_adaptive_detail_row_2_(rtlEnabled_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/adaptability_sticky_columns_with_adaptive_detail_row_2_(rtlEnabled_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bca51f8de503
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/adaptability_sticky_columns_with_adaptive_detail_row_2_(rtlEnabled_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/adaptability_sticky_columns_with_sticky_positions_1_(rtlEnabled_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/adaptability_sticky_columns_with_sticky_positions_1_(rtlEnabled_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9b23c26989f2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/adaptability_sticky_columns_with_sticky_positions_1_(rtlEnabled_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/adaptability_sticky_columns_with_sticky_positions_1_(rtlEnabled_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/adaptability_sticky_columns_with_sticky_positions_1_(rtlEnabled_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a31983275a41
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/adaptability_sticky_columns_with_sticky_positions_1_(rtlEnabled_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/adaptability_sticky_columns_with_sticky_positions_2_(rtlEnabled_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/adaptability_sticky_columns_with_sticky_positions_2_(rtlEnabled_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..46b3f586d7ac
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/adaptability_sticky_columns_with_sticky_positions_2_(rtlEnabled_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/adaptability_sticky_columns_with_sticky_positions_2_(rtlEnabled_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/adaptability_sticky_columns_with_sticky_positions_2_(rtlEnabled_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a31983275a41
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/adaptability_sticky_columns_with_sticky_positions_2_(rtlEnabled_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/adaptability_sticky_columns_with_sticky_positions_and_hiding_priority_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/adaptability_sticky_columns_with_sticky_positions_and_hiding_priority_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9b23c26989f2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/adaptability_sticky_columns_with_sticky_positions_and_hiding_priority_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/adaptability_sticky_columns_with_sticky_positions_and_hiding_priority_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/adaptability_sticky_columns_with_sticky_positions_and_hiding_priority_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..46b3f586d7ac
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/adaptability_sticky_columns_with_sticky_positions_and_hiding_priority_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/banded_hidden_column_between_sticky_column_and_left_fixed_column_1_(rtlEnabled_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/banded_hidden_column_between_sticky_column_and_left_fixed_column_1_(rtlEnabled_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1bcc73fdb915
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/banded_hidden_column_between_sticky_column_and_left_fixed_column_1_(rtlEnabled_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/banded_hidden_column_between_sticky_column_and_left_fixed_column_1_(rtlEnabled_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/banded_hidden_column_between_sticky_column_and_left_fixed_column_1_(rtlEnabled_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e7ec26129a0d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/banded_hidden_column_between_sticky_column_and_left_fixed_column_1_(rtlEnabled_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/banded_hidden_column_between_sticky_column_and_left_fixed_column_2_(rtlEnabled_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/banded_hidden_column_between_sticky_column_and_left_fixed_column_2_(rtlEnabled_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..12f9c8e30a81
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/banded_hidden_column_between_sticky_column_and_left_fixed_column_2_(rtlEnabled_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/banded_hidden_column_between_sticky_column_and_left_fixed_column_2_(rtlEnabled_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/banded_hidden_column_between_sticky_column_and_left_fixed_column_2_(rtlEnabled_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9843f3b96b5f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/banded_hidden_column_between_sticky_column_and_left_fixed_column_2_(rtlEnabled_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/banded_hidden_column_between_sticky_column_and_right_fixed_column_1_(rtlEnabled_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/banded_hidden_column_between_sticky_column_and_right_fixed_column_1_(rtlEnabled_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bb2648cf023d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/banded_hidden_column_between_sticky_column_and_right_fixed_column_1_(rtlEnabled_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/banded_hidden_column_between_sticky_column_and_right_fixed_column_1_(rtlEnabled_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/banded_hidden_column_between_sticky_column_and_right_fixed_column_1_(rtlEnabled_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..65cc673025a2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/banded_hidden_column_between_sticky_column_and_right_fixed_column_1_(rtlEnabled_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/banded_hidden_column_between_sticky_column_and_right_fixed_column_2_(rtlEnabled_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/banded_hidden_column_between_sticky_column_and_right_fixed_column_2_(rtlEnabled_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3447eed82e03
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/banded_hidden_column_between_sticky_column_and_right_fixed_column_2_(rtlEnabled_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/banded_hidden_column_between_sticky_column_and_right_fixed_column_2_(rtlEnabled_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/banded_hidden_column_between_sticky_column_and_right_fixed_column_2_(rtlEnabled_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8678f6dde4a5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/banded_hidden_column_between_sticky_column_and_right_fixed_column_2_(rtlEnabled_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/context_menu_and_virtual_columns_with_fixed_columns (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/context_menu_and_virtual_columns_with_fixed_columns (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9fdb2c6d6334
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/context_menu_and_virtual_columns_with_fixed_columns (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/datagrid_adaptive_item_focused (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/datagrid_adaptive_item_focused (fluent-next.blue.light).png
new file mode 100644
index 000000000000..298455d57c28
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/datagrid_adaptive_item_focused (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/datagrid_default_state_with_showRowLines=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/datagrid_default_state_with_showRowLines=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..372a91cea4ae
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/datagrid_default_state_with_showRowLines=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/datagrid_default_state_with_showRowLines=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/datagrid_default_state_with_showRowLines=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c3004a82e410
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/datagrid_default_state_with_showRowLines=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/datagrid_group_footer_row_focused (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/datagrid_group_footer_row_focused (fluent-next.blue.light).png
new file mode 100644
index 000000000000..692d115a5d18
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/datagrid_group_footer_row_focused (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/datagrid_group_row_focused (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/datagrid_group_row_focused (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e777ca27d060
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/datagrid_group_row_focused (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/datagrid_header_hover_with_fixed_columns (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/datagrid_header_hover_with_fixed_columns (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d3e24a16088e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/datagrid_header_hover_with_fixed_columns (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/datagrid_row_alt_with_fixed_columns (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/datagrid_row_alt_with_fixed_columns (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b1aaa8a5eced
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/datagrid_row_alt_with_fixed_columns (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/datagrid_row_hover_with_fixed_columns (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/datagrid_row_hover_with_fixed_columns (fluent-next.blue.light).png
new file mode 100644
index 000000000000..88326ea143f9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/datagrid_row_hover_with_fixed_columns (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/datagrid_selected_focused_edit_state_with_showRowLines=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/datagrid_selected_focused_edit_state_with_showRowLines=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3825e845e1a0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/datagrid_selected_focused_edit_state_with_showRowLines=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/datagrid_selected_focused_edit_state_with_showRowLines=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/datagrid_selected_focused_edit_state_with_showRowLines=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..43783c5500d9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/datagrid_selected_focused_edit_state_with_showRowLines=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/datagrid_sticky_columns_with_drag_and_drop (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/datagrid_sticky_columns_with_drag_and_drop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..036e2290f240
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/datagrid_sticky_columns_with_drag_and_drop (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/drag-icons-focused-selected-rows (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/drag-icons-focused-selected-rows (fluent-next.blue.light).png
new file mode 100644
index 000000000000..badc71d11a98
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/drag-icons-focused-selected-rows (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/draggable_source_column_with_fixed_columns (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/draggable_source_column_with_fixed_columns (fluent-next.blue.light).png
new file mode 100644
index 000000000000..544bf8fa223f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/draggable_source_column_with_fixed_columns (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/dragging_fixed_column_to_group_panel (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/dragging_fixed_column_to_group_panel (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c35a0a4b95a2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/dragging_fixed_column_to_group_panel (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_cell_with_sticky_columns_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_cell_with_sticky_columns_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0ebdf6267c18
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_cell_with_sticky_columns_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_cell_with_sticky_columns_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_cell_with_sticky_columns_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b40fa142838a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_cell_with_sticky_columns_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_cell_with_validation_rule_and_fixed_columns_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_cell_with_validation_rule_and_fixed_columns_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d2e91f6cff02
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_cell_with_validation_rule_and_fixed_columns_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_cell_with_validation_rule_and_fixed_columns_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_cell_with_validation_rule_and_fixed_columns_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f0e436662169
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_cell_with_validation_rule_and_fixed_columns_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_fixed_cell_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_fixed_cell_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..90210bd8a01f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_fixed_cell_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_fixed_cell_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_fixed_cell_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..56a8972201d7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_fixed_cell_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_fixed_cell_with_sticky_position_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_fixed_cell_with_sticky_position_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7abe3bf9c404
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_fixed_cell_with_sticky_position_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_fixed_cell_with_sticky_position_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_fixed_cell_with_sticky_position_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8ee23af6fe19
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_fixed_cell_with_sticky_position_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_fixed_cell_with_sticky_position_and_validation_rule_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_fixed_cell_with_sticky_position_and_validation_rule_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ee8ac43a8dc2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_fixed_cell_with_sticky_position_and_validation_rule_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_fixed_cell_with_sticky_position_and_validation_rule_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_fixed_cell_with_sticky_position_and_validation_rule_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3dfd84698895
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_fixed_cell_with_sticky_position_and_validation_rule_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_fixed_cell_with_validation_rule_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_fixed_cell_with_validation_rule_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0b51e5455892
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_fixed_cell_with_validation_rule_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_fixed_cell_with_validation_rule_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_fixed_cell_with_validation_rule_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dc3410a556bc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_fixed_cell_with_validation_rule_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_form_with_sticky_columns_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_form_with_sticky_columns_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b87e614e521a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_form_with_sticky_columns_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_form_with_sticky_columns_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_form_with_sticky_columns_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8dea56efd0bf
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_form_with_sticky_columns_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_last_unfixed_cell_with_validation_rule_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_last_unfixed_cell_with_validation_rule_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..13fd38ae0bed
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_last_unfixed_cell_with_validation_rule_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_last_unfixed_cell_with_validation_rule_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_last_unfixed_cell_with_validation_rule_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1f944db9c44d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_last_unfixed_cell_with_validation_rule_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_row_with_sticky_columns_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_row_with_sticky_columns_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b6a6e1bc6118
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_row_with_sticky_columns_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_row_with_sticky_columns_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_row_with_sticky_columns_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..82cea5cb100d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/edit_row_with_sticky_columns_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/filter_row_with_sticky_and_band_columns_1_(showColumnHeaders_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/filter_row_with_sticky_and_band_columns_1_(showColumnHeaders_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bd0f694a8683
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/filter_row_with_sticky_and_band_columns_1_(showColumnHeaders_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/filter_row_with_sticky_and_band_columns_2_(showColumnHeaders_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/filter_row_with_sticky_and_band_columns_2_(showColumnHeaders_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..14eaea6afe79
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/filter_row_with_sticky_and_band_columns_2_(showColumnHeaders_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/filter_row_with_sticky_columns_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/filter_row_with_sticky_columns_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3ba0d6231955
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/filter_row_with_sticky_columns_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/filter_row_with_sticky_columns_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/filter_row_with_sticky_columns_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6a9a53d34a76
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/filter_row_with_sticky_columns_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_and_command_columns_band_headers_navigation_by_tab_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_and_command_columns_band_headers_navigation_by_tab_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..42e969e30a86
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_and_command_columns_band_headers_navigation_by_tab_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_and_command_columns_band_headers_navigation_by_tab_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_and_command_columns_band_headers_navigation_by_tab_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f52a00ac2226
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_and_command_columns_band_headers_navigation_by_tab_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_and_adaptability_headers_navigation_by_shift_and_tab_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_and_adaptability_headers_navigation_by_shift_and_tab_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..03696998d574
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_and_adaptability_headers_navigation_by_shift_and_tab_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_and_adaptability_headers_navigation_by_shift_and_tab_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_and_adaptability_headers_navigation_by_shift_and_tab_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f4be0583e229
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_and_adaptability_headers_navigation_by_shift_and_tab_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_and_adaptability_headers_navigation_by_tab_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_and_adaptability_headers_navigation_by_tab_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7fa4159cbc56
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_and_adaptability_headers_navigation_by_tab_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_and_adaptability_headers_navigation_by_tab_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_and_adaptability_headers_navigation_by_tab_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5d1a89af62c0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_and_adaptability_headers_navigation_by_tab_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_band_headers_navigation_by_shift_and_tab_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_band_headers_navigation_by_shift_and_tab_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2e53c3dc8022
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_band_headers_navigation_by_shift_and_tab_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_band_headers_navigation_by_shift_and_tab_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_band_headers_navigation_by_shift_and_tab_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..833c2eab2d69
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_band_headers_navigation_by_shift_and_tab_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_band_headers_navigation_by_tab_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_band_headers_navigation_by_tab_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..285f5f8f7eb6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_band_headers_navigation_by_tab_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_band_headers_navigation_by_tab_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_band_headers_navigation_by_tab_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6d384ac8fc4a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_band_headers_navigation_by_tab_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_data_cells_navigation_by_shift_and_tab_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_data_cells_navigation_by_shift_and_tab_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..671807bcd847
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_data_cells_navigation_by_shift_and_tab_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_data_cells_navigation_by_shift_and_tab_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_data_cells_navigation_by_shift_and_tab_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..719d7e89df3e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_data_cells_navigation_by_shift_and_tab_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_data_cells_navigation_by_tab_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_data_cells_navigation_by_tab_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ebfd2cf2f18d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_data_cells_navigation_by_tab_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_data_cells_navigation_by_tab_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_data_cells_navigation_by_tab_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8465da7fc1ce
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_data_cells_navigation_by_tab_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_headers_navigation_by_shift_and_tab_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_headers_navigation_by_shift_and_tab_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0824c9d2899a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_headers_navigation_by_shift_and_tab_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_headers_navigation_by_shift_and_tab_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_headers_navigation_by_shift_and_tab_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fef57ad67880
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_headers_navigation_by_shift_and_tab_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_headers_navigation_by_tab_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_headers_navigation_by_tab_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7e117b819675
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_headers_navigation_by_tab_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_headers_navigation_by_tab_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_headers_navigation_by_tab_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a48dbdac7e4f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_headers_navigation_by_tab_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_with_125%_zoom (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_with_125%_zoom (fluent-next.blue.light).png
new file mode 100644
index 000000000000..42387c07ba5c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_with_125%_zoom (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_with_150%_zoom (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_with_150%_zoom (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0481b0c18e88
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_with_150%_zoom (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_with_90%_zoom (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_with_90%_zoom (fluent-next.blue.light).png
new file mode 100644
index 000000000000..855aabdaeeba
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_with_90%_zoom (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_with_horizontal_scrolling (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_with_horizontal_scrolling (fluent-next.blue.light).png
new file mode 100644
index 000000000000..331b2e079db3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_with_horizontal_scrolling (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_with_virtual_scrolling_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_with_virtual_scrolling_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..94a001248dfa
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_with_virtual_scrolling_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_with_virtual_scrolling_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_with_virtual_scrolling_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..94a001248dfa
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/fixed_columns_with_virtual_scrolling_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/group_row_scrolling_all_collapsed_fixed_columns (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/group_row_scrolling_all_collapsed_fixed_columns (fluent-next.blue.light).png
new file mode 100644
index 000000000000..44b2392ba957
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/group_row_scrolling_all_collapsed_fixed_columns (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-focused-group-row (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-focused-group-row (fluent-next.blue.light).png
new file mode 100644
index 000000000000..83d28b6d4854
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-focused-group-row (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-focused-group-row-scroll (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-focused-group-row-scroll (fluent-next.blue.light).png
new file mode 100644
index 000000000000..18a2b9e51ea1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-focused-group-row-scroll (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-multiple-scroll-begin (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-multiple-scroll-begin (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c949fc247f30
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-multiple-scroll-begin (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-multiple-scroll-center (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-multiple-scroll-center (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6b39e600e30b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-multiple-scroll-center (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-multiple-scroll-end (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-multiple-scroll-end (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6da4b6dd93aa
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-multiple-scroll-end (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-overflow-cell (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-overflow-cell (fluent-next.blue.light).png
new file mode 100644
index 000000000000..82ad6fffd280
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-overflow-cell (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-scroll-begin-rtl=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-scroll-begin-rtl=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7b335ce3698d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-scroll-begin-rtl=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-scroll-begin-rtl=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-scroll-begin-rtl=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ca8840b390de
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-scroll-begin-rtl=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-scroll-center=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-scroll-center=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d65d5c59edcd
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-scroll-center=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-scroll-center=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-scroll-center=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cbccf90c5115
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-scroll-center=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-scroll-end=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-scroll-end=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..353222db17b7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-scroll-end=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-scroll-end=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-scroll-end=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0a1f57812dee
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-scroll-end=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-scroll-total_summary-rtl=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-scroll-total_summary-rtl=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a6a19c17cb3b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-scroll-total_summary-rtl=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-scroll-total_summary-rtl=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-scroll-total_summary-rtl=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e93f0fe91b8a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-scroll-total_summary-rtl=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-scroll-total_summary_intersection-rtl=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-scroll-total_summary_intersection-rtl=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9af546203e7b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-scroll-total_summary_intersection-rtl=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-scroll-total_summary_intersection-rtl=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-scroll-total_summary_intersection-rtl=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..09e07ec80135
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-scroll-total_summary_intersection-rtl=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/header_row_highlight_with_fixed_columns (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/header_row_highlight_with_fixed_columns (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a6b129d299df
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/header_row_highlight_with_fixed_columns (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/hidden_column_between_sticky_column_and_left_fixed_column_1_(rtlEnabled_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/hidden_column_between_sticky_column_and_left_fixed_column_1_(rtlEnabled_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c535af9133c1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/hidden_column_between_sticky_column_and_left_fixed_column_1_(rtlEnabled_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/hidden_column_between_sticky_column_and_left_fixed_column_1_(rtlEnabled_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/hidden_column_between_sticky_column_and_left_fixed_column_1_(rtlEnabled_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d30b8e452f9f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/hidden_column_between_sticky_column_and_left_fixed_column_1_(rtlEnabled_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/hidden_column_between_sticky_column_and_left_fixed_column_2_(rtlEnabled_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/hidden_column_between_sticky_column_and_left_fixed_column_2_(rtlEnabled_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ef96d17f58d2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/hidden_column_between_sticky_column_and_left_fixed_column_2_(rtlEnabled_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/hidden_column_between_sticky_column_and_left_fixed_column_2_(rtlEnabled_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/hidden_column_between_sticky_column_and_left_fixed_column_2_(rtlEnabled_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..172c29cf2544
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/hidden_column_between_sticky_column_and_left_fixed_column_2_(rtlEnabled_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/hidden_column_between_sticky_column_and_right_fixed_column_1_(rtlEnabled_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/hidden_column_between_sticky_column_and_right_fixed_column_1_(rtlEnabled_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b80b0f2cb3e7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/hidden_column_between_sticky_column_and_right_fixed_column_1_(rtlEnabled_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/hidden_column_between_sticky_column_and_right_fixed_column_1_(rtlEnabled_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/hidden_column_between_sticky_column_and_right_fixed_column_1_(rtlEnabled_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..96a2c00605fa
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/hidden_column_between_sticky_column_and_right_fixed_column_1_(rtlEnabled_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/hidden_column_between_sticky_column_and_right_fixed_column_2_(rtlEnabled_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/hidden_column_between_sticky_column_and_right_fixed_column_2_(rtlEnabled_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2f8778d07811
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/hidden_column_between_sticky_column_and_right_fixed_column_2_(rtlEnabled_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/hidden_column_between_sticky_column_and_right_fixed_column_2_(rtlEnabled_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/hidden_column_between_sticky_column_and_right_fixed_column_2_(rtlEnabled_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6b01da055910
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/hidden_column_between_sticky_column_and_right_fixed_column_2_(rtlEnabled_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/masterdetail-after-resize (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/masterdetail-after-resize (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c68397ed71c3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/masterdetail-after-resize (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/masterdetail-before-resize (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/masterdetail-before-resize (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1896886b4d04
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/masterdetail-before-resize (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/masterdetail-scroll-begin (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/masterdetail-scroll-begin (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1896886b4d04
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/masterdetail-scroll-begin (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/masterdetail-scroll-center (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/masterdetail-scroll-center (fluent-next.blue.light).png
new file mode 100644
index 000000000000..40b62d880fb9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/masterdetail-scroll-center (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/masterdetail-scroll-end (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/masterdetail-scroll-end (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8502c66eebcc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/masterdetail-scroll-end (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/move_fixed_band_column_with_sticky_position_to_right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/move_fixed_band_column_with_sticky_position_to_right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a4f4054d61d1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/move_fixed_band_column_with_sticky_position_to_right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/move_fixed_column_with_sticky_position_to_right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/move_fixed_column_with_sticky_position_to_right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dafaa631c4f6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/move_fixed_column_with_sticky_position_to_right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/move_left_fixed_band_column_to_right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/move_left_fixed_band_column_to_right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8160407f3549
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/move_left_fixed_band_column_to_right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/move_left_fixed_column_to_right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/move_left_fixed_column_to_right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ae63e2aac541
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/move_left_fixed_column_to_right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/move_right_fixed_band_column_to_left (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/move_right_fixed_band_column_to_left (fluent-next.blue.light).png
new file mode 100644
index 000000000000..be1a2b7bf30f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/move_right_fixed_band_column_to_left (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/move_right_fixed_column_to_left (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/move_right_fixed_column_to_left (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e836941971bc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/move_right_fixed_column_to_left (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/multi_row_header_columns (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/multi_row_header_columns (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a49938c2ffd1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/multi_row_header_columns (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_first_fixed_column_with_left_position_1_(nextColumn_mode_and_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_first_fixed_column_with_left_position_1_(nextColumn_mode_and_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c4bff9caa64d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_first_fixed_column_with_left_position_1_(nextColumn_mode_and_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_first_fixed_column_with_left_position_1_(nextColumn_mode_and_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_first_fixed_column_with_left_position_1_(nextColumn_mode_and_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1cb34234a1a8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_first_fixed_column_with_left_position_1_(nextColumn_mode_and_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_first_fixed_column_with_left_position_1_(widget_mode_and_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_first_fixed_column_with_left_position_1_(widget_mode_and_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b15155097842
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_first_fixed_column_with_left_position_1_(widget_mode_and_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_first_fixed_column_with_left_position_1_(widget_mode_and_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_first_fixed_column_with_left_position_1_(widget_mode_and_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..629338588bbe
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_first_fixed_column_with_left_position_1_(widget_mode_and_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_first_fixed_column_with_left_position_2_(nextColumn_mode_and_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_first_fixed_column_with_left_position_2_(nextColumn_mode_and_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0e805d643c62
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_first_fixed_column_with_left_position_2_(nextColumn_mode_and_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_first_fixed_column_with_left_position_2_(nextColumn_mode_and_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_first_fixed_column_with_left_position_2_(nextColumn_mode_and_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..56653d8b9af1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_first_fixed_column_with_left_position_2_(nextColumn_mode_and_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_first_fixed_column_with_left_position_2_(widget_mode_and_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_first_fixed_column_with_left_position_2_(widget_mode_and_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4dbb08730d0e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_first_fixed_column_with_left_position_2_(widget_mode_and_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_first_fixed_column_with_left_position_2_(widget_mode_and_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_first_fixed_column_with_left_position_2_(widget_mode_and_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..91f69cc4f5c4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_first_fixed_column_with_left_position_2_(widget_mode_and_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_first_fixed_column_with_right_position_1_(widget_mode_and_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_first_fixed_column_with_right_position_1_(widget_mode_and_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c8f260b8ccb7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_first_fixed_column_with_right_position_1_(widget_mode_and_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_first_fixed_column_with_right_position_1_(widget_mode_and_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_first_fixed_column_with_right_position_1_(widget_mode_and_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..af4dfea9d00b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_first_fixed_column_with_right_position_1_(widget_mode_and_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_first_fixed_column_with_right_position_2_(widget_mode_and_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_first_fixed_column_with_right_position_2_(widget_mode_and_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a6892daefd61
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_first_fixed_column_with_right_position_2_(widget_mode_and_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_first_fixed_column_with_right_position_2_(widget_mode_and_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_first_fixed_column_with_right_position_2_(widget_mode_and_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d75e978b2c66
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_first_fixed_column_with_right_position_2_(widget_mode_and_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_second_fixed_column_with_right_position_1_(nextColumn_mode_and_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_second_fixed_column_with_right_position_1_(nextColumn_mode_and_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5efe1493d96d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_second_fixed_column_with_right_position_1_(nextColumn_mode_and_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_second_fixed_column_with_right_position_1_(nextColumn_mode_and_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_second_fixed_column_with_right_position_1_(nextColumn_mode_and_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c820b133d03b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_second_fixed_column_with_right_position_1_(nextColumn_mode_and_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_second_fixed_column_with_right_position_1_(widget_mode_and_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_second_fixed_column_with_right_position_1_(widget_mode_and_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b3912ab18224
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_second_fixed_column_with_right_position_1_(widget_mode_and_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_second_fixed_column_with_right_position_1_(widget_mode_and_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_second_fixed_column_with_right_position_1_(widget_mode_and_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c85f8a03aa08
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_second_fixed_column_with_right_position_1_(widget_mode_and_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_second_fixed_column_with_right_position_2_(nextColumn_mode_and_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_second_fixed_column_with_right_position_2_(nextColumn_mode_and_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..76e4e7fbf72f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_second_fixed_column_with_right_position_2_(nextColumn_mode_and_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_second_fixed_column_with_right_position_2_(nextColumn_mode_and_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_second_fixed_column_with_right_position_2_(nextColumn_mode_and_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ca32e483ee72
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_second_fixed_column_with_right_position_2_(nextColumn_mode_and_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_second_fixed_column_with_right_position_2_(widget_mode_and_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_second_fixed_column_with_right_position_2_(widget_mode_and_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..518e10bb847e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_second_fixed_column_with_right_position_2_(widget_mode_and_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_second_fixed_column_with_right_position_2_(widget_mode_and_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_second_fixed_column_with_right_position_2_(widget_mode_and_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f163ed8ca0c7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/resize_second_fixed_column_with_right_position_2_(widget_mode_and_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/row_selection_with_sticky_columns_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/row_selection_with_sticky_columns_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a83e2becd58a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/row_selection_with_sticky_columns_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/row_selection_with_sticky_columns_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/row_selection_with_sticky_columns_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a137d230d812
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/row_selection_with_sticky_columns_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/separator_position_with_fixed_column_on_right_(widget_mode_and_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/separator_position_with_fixed_column_on_right_(widget_mode_and_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f42f716cd474
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/separator_position_with_fixed_column_on_right_(widget_mode_and_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/separator_position_with_fixed_column_on_right_(widget_mode_and_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/separator_position_with_fixed_column_on_right_(widget_mode_and_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..791f46b146d4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/separator_position_with_fixed_column_on_right_(widget_mode_and_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/separator_position_with_window_scroll_top_(widget_mode_and_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/separator_position_with_window_scroll_top_(widget_mode_and_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9c72c0cbcee0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/separator_position_with_window_scroll_top_(widget_mode_and_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/separator_position_with_window_scroll_top_(widget_mode_and_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/separator_position_with_window_scroll_top_(widget_mode_and_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..14ec8e6f20c4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/separator_position_with_window_scroll_top_(widget_mode_and_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/simulated_scrollbar_with_sticky_columns_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/simulated_scrollbar_with_sticky_columns_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c0f35436c0b5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/simulated_scrollbar_with_sticky_columns_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/simulated_scrollbar_with_sticky_columns_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/simulated_scrollbar_with_sticky_columns_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2f11ad00d9fc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/simulated_scrollbar_with_sticky_columns_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/sticky_columns_context_menu (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/sticky_columns_context_menu (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f1461129a5ec
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/sticky_columns_context_menu (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/vertical_scroll_and_fixed_column_with_validation_message_and_revert_button_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/vertical_scroll_and_fixed_column_with_validation_message_and_revert_button_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..248c4f15dd93
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/vertical_scroll_and_fixed_column_with_validation_message_and_revert_button_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/vertical_scroll_and_fixed_column_with_validation_message_and_revert_button_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/vertical_scroll_and_fixed_column_with_validation_message_and_revert_button_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ecc11ca57348
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/vertical_scroll_and_fixed_column_with_validation_message_and_revert_button_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/vertical_scroll_and_focused_fixed_column_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/vertical_scroll_and_focused_fixed_column_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d6f333bbf0e4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/vertical_scroll_and_focused_fixed_column_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/vertical_scroll_and_focused_fixed_column_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/vertical_scroll_and_focused_fixed_column_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ecc11ca57348
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/vertical_scroll_and_focused_fixed_column_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/virtual_columns_with_grouping_expand_scroll_right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/virtual_columns_with_grouping_expand_scroll_right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..42f0555d6388
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/virtual_columns_with_grouping_expand_scroll_right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/virtual_columns_with_grouping_scroll_right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/virtual_columns_with_grouping_scroll_right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ea1c521ad347
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/virtual_columns_with_grouping_scroll_right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/virtual_columns_with_nested_grouping_scroll_right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/virtual_columns_with_nested_grouping_scroll_right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2f4392d9804a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/virtual_columns_with_nested_grouping_scroll_right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/virtual_columns_with_sticky_columns_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/virtual_columns_with_sticky_columns_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4168f610fec0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/virtual_columns_with_sticky_columns_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/virtual_columns_with_sticky_columns_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/virtual_columns_with_sticky_columns_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..364aeba2e390
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/virtual_columns_with_sticky_columns_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-1)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-1)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a0179079b784
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-1)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-1)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-1)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..23242f999fcc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-1)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-1)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-1)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d0b46b09f577
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-1)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-1)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-1)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d6ff6e5167e4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-1)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-1)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-1)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..03c3b8f0d396
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-1)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-1)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-1)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..253cc2d56a60
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-1)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-1)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-1)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2c43bee04e6d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-1)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-1)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-1)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f3f4e4385abe
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-1)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-10)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-10)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4258ebdc9048
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-10)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-10)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-10)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2a2f427e49c0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-10)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-10)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-10)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ffdb50338f90
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-10)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-10)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-10)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5c2e79d9104a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-10)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-10)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-10)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b378cdf13fe6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-10)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-10)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-10)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6d59dd09b17e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-10)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-10)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-10)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..124881b2a331
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-10)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-10)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-10)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..aa2b8f415afc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-10)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-11)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-11)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ae2232c5c3da
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-11)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-11)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-11)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1e4d2aa3928d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-11)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-11)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-11)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..298a89da0537
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-11)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-11)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-11)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2db7659bf3e8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-11)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-11)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-11)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6eddb199124d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-11)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-11)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-11)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ea22a500f789
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-11)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-11)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-11)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c5f0bcf6769b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-11)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-11)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-11)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..451db08f4ffe
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-11)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-12)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-12)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..57d048c17483
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-12)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-12)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-12)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d1b66c3daa18
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-12)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-12)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-12)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..730afe2f1300
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-12)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-12)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-12)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5c7d8669d1a6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-12)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-12)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-12)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..eff07b14d02b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-12)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-12)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-12)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0accd5edf846
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-12)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-12)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-12)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ba3f320ddddd
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-12)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-12)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-12)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..deb1a47e53b5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-12)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-13)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-13)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a7f125bd922d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-13)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-13)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-13)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7f4582d3fa77
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-13)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-13)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-13)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bcc48b7f5482
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-13)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-13)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-13)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b1123d726be8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-13)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-13)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-13)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..88ecc8e884e6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-13)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-13)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-13)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..98b76bcd6150
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-13)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-13)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-13)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4288a8c3ce09
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-13)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-13)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-13)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d7f821ebb8e7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-13)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-14)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-14)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9089ec7c5c39
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-14)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-14)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-14)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dc244b42f4c8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-14)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-14)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-14)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dd3dcccb910b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-14)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-14)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-14)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1dba363ae5c1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-14)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-14)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-14)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7dd86ee9159b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-14)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-14)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-14)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..86566818f6e2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-14)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-14)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-14)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7ce2215b673f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-14)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-14)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-14)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4f1ff727fbd0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-14)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-2)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-2)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7c8239e1db1a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-2)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-2)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-2)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f3944209b40e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-2)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-2)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-2)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d0e9a86f8ab2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-2)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-2)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-2)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9cdc871eb6fb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-2)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-2)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-2)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9dd2607ee451
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-2)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-2)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-2)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..764af0ab61a7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-2)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-2)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-2)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3f2ceedf0eab
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-2)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-2)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-2)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..401626753b26
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-2)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-3)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-3)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..58e8667efbef
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-3)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-3)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-3)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..742444818df5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-3)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-3)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-3)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e40bf478e635
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-3)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-3)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-3)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3c15c91e0acb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-3)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-3)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-3)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e3e0ef5f0115
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-3)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-3)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-3)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..485f83edcf44
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-3)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-3)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-3)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..57001ccb1b20
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-3)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-3)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-3)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b7651a2af024
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-3)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-4)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-4)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b2fbf4a2f3ad
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-4)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-4)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-4)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b85ea133384e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-4)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-4)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-4)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3cf53a582598
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-4)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-4)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-4)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..15c4ec506835
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-4)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-4)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-4)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..321348eee408
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-4)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-4)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-4)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2e6b2c4b2e81
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-4)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-4)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-4)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d9b8024dd733
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-4)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-4)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-4)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b2825410e0b7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-4)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-5)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-5)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..70dc484875ef
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-5)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-5)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-5)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..482e1056a462
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-5)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-5)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-5)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..52fe7964d139
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-5)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-5)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-5)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f41765f90ffc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-5)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-5)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-5)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5fdc26b01fcd
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-5)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-5)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-5)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1d6456f582fe
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-5)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-5)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-5)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9aa688f9d428
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-5)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-5)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-5)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..71cf1a76e63e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-5)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-6)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-6)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..63eba76e3167
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-6)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-6)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-6)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..528145b244c8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-6)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-6)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-6)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3b97134603b3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-6)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-6)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-6)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4cc41df16737
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-6)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-6)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-6)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3ef330a95acd
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-6)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-6)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-6)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..eb10baa4c5cc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-6)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-6)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-6)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9f7baea1f0d0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-6)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-6)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-6)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ff2bbed09b90
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-6)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-7)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-7)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8f3eb695c008
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-7)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-7)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-7)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..74d0c5bbd950
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-7)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-7)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-7)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8b85bd8bdab3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-7)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-7)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-7)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..de1b712db7e6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-7)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-7)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-7)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3914a2ba61a6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-7)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-7)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-7)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a597974576ae
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-7)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-7)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-7)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6d44859ee4cd
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-7)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-7)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-7)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7a5d26440c61
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-7)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-8)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-8)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..227fee357fe4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-8)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-8)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-8)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ca83b7c322c1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-8)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-8)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-8)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dbd9b213966d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-8)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-8)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-8)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..36cf05940633
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-8)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-8)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-8)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3d7354a94a26
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-8)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-8)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-8)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a5cbe0418f5e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-8)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-8)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-8)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..711bdeebffcb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-8)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-8)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-8)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d25e04e88338
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-8)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-9)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-9)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..80736054cf53
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-9)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-9)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-9)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d71b0ef7a68c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-9)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-9)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-9)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..08a170bf98af
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-9)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-9)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-9)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6096fc93ca8a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-9)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-9)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-9)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d883d4f630ae
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-9)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-9)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-9)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..010a11c4ccbb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-9)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-9)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-9)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ce3b28455a95
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-9)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-9)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-9)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..03afa62ebbff
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-1-(case-9)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-1)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-1)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2c61d0698018
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-1)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-1)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-1)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6bd43862ce32
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-1)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-1)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-1)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4c6d3544ef32
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-1)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-1)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-1)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f3424004a577
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-1)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-1)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-1)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f8f6fc3b775d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-1)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-1)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-1)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f325e1680522
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-1)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-1)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-1)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2893f07ee511
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-1)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-1)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-1)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c17ae11cf9fa
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-1)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-10)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-10)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..34dc0e6e5561
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-10)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-10)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-10)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..82eb212055e8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-10)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-10)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-10)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f713721e1d19
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-10)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-10)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-10)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bd3eaeddcb19
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-10)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-10)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-10)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..203eadd2956f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-10)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-10)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-10)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1af8f0dc37a8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-10)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-10)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-10)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1003381e68f3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-10)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-10)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-10)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2074af4e05c2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-10)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-11)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-11)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b938db481aea
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-11)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-11)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-11)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7aca034d6200
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-11)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-11)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-11)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9156fa8d7733
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-11)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-11)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-11)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e9d876eba6b9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-11)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-11)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-11)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b0d4201bbd17
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-11)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-11)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-11)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6e177b741683
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-11)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-11)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-11)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..97b044a3c8e0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-11)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-11)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-11)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e9f28d7ddade
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-11)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-12)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-12)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..332f068a219b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-12)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-12)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-12)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..75443ea17c48
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-12)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-12)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-12)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..da06bd7e13a1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-12)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-12)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-12)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8d5da1a4df7a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-12)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-12)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-12)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..45a536132d83
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-12)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-12)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-12)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cc857d661147
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-12)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-12)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-12)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d20ca7b1d2ad
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-12)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-12)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-12)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1d46ff53c437
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-12)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-13)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-13)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..189e3b742bc0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-13)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-13)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-13)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..aeac0e849aa1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-13)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-13)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-13)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0a2060791999
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-13)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-13)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-13)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..98be59265d05
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-13)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-13)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-13)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c794491705f7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-13)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-13)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-13)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fc066e04bcd0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-13)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-13)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-13)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..74e7fa322619
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-13)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-13)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-13)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..732680d8ee92
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-13)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-14)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-14)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3dbb244bce35
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-14)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-14)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-14)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7cffef9ffe14
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-14)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-14)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-14)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d54b6a3b1c96
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-14)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-14)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-14)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6417900897f0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-14)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-14)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-14)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..880b5a31a57a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-14)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-14)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-14)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2a6ee45ab630
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-14)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-14)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-14)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..eeb27b353d7c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-14)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-14)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-14)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0526c8d6f301
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-14)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-2)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-2)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4190f9724997
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-2)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-2)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-2)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6cfbb0585803
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-2)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-2)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-2)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..18fb6011bfaf
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-2)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-2)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-2)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2c1433e02733
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-2)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-2)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-2)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fc3628fdd027
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-2)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-2)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-2)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..94335f7a811c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-2)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-2)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-2)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2af9b1ad2eaf
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-2)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-2)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-2)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..643a3e4d7c49
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-2)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-3)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-3)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..31a8c8bdcb12
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-3)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-3)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-3)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bf72ee3950ff
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-3)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-3)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-3)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a175e516a48c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-3)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-3)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-3)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ad2b6f9dfdec
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-3)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-3)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-3)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..126a3909d921
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-3)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-3)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-3)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..329a85238113
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-3)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-3)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-3)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d35fdaec5672
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-3)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-3)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-3)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..72e1853ee1df
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-3)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-4)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-4)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..62cd59147b37
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-4)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-4)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-4)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ffeb0741b6ef
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-4)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-4)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-4)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bb85d0299f3c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-4)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-4)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-4)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..817df78f66ef
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-4)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-4)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-4)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6a6fc26e79ef
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-4)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-4)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-4)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4a5f6b258101
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-4)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-4)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-4)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d46aac3d2a1f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-4)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-4)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-4)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ac375ce8963e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-4)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-5)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-5)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8bd8011d2f30
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-5)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-5)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-5)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c20f2d5c1e58
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-5)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-5)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-5)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7bbac1391be5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-5)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-5)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-5)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1afcfffe682f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-5)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-5)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-5)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..750bd39e33c7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-5)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-5)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-5)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1f33584d534b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-5)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-5)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-5)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c6e9a51fd7a9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-5)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-5)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-5)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ab3f128f5339
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-5)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-6)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-6)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..491f4e14ac3e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-6)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-6)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-6)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5df052bc89dc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-6)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-6)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-6)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..af7cb7857de1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-6)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-6)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-6)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1b96341c3f64
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-6)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-6)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-6)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cd179c5ab15d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-6)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-6)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-6)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..720352732881
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-6)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-6)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-6)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8201d433e787
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-6)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-6)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-6)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c4b77e64975e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-6)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-7)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-7)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2c61d0698018
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-7)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-7)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-7)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2b072f90a2b8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-7)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-7)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-7)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4c6d3544ef32
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-7)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-7)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-7)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3065f3edd86e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-7)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-7)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-7)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f8f6fc3b775d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-7)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-7)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-7)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d66ecdd26aa4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-7)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-7)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-7)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2893f07ee511
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-7)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-7)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-7)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b108254ef7e0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-7)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-8)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-8)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..18a4cb4f8914
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-8)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-8)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-8)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a53120041010
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-8)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-8)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-8)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e72aa1fa68f7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-8)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-8)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-8)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c3dc1223dc65
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-8)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-8)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-8)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..97e25967c592
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-8)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-8)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-8)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..91245cf8ba56
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-8)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-8)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-8)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a85577729606
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-8)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-8)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-8)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9e2e06cd2bd3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-8)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-9)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-9)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..606386a8b534
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-9)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-9)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-9)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a4e0a20d79d3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-9)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-9)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-9)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ad0b3b5535f0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-9)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-9)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-9)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4e4f49ccdc93
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-9)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-9)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-9)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7b6e4e8cf146
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-9)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-9)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-9)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..96aa7b22ed65
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-9)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-9)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-9)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..833dd7b7f4e2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-9)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-9)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-9)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..950af2574144
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/band-columns-2-(case-9)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-1(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-1(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e836b5f60ef1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-1(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-1(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-1(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2c4add0090e9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-1(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-1(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-1(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9b8fd3491d58
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-1(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-1(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-1(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ae55759fb371
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-1(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-1(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-1(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3fe813badcb4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-1(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-1(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-1(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fad0af67653f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-1(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-1(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-1(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9958900d0b99
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-1(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-1(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-1(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2de1c5f0fe10
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-1(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-2(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-2(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..857c6cf9518c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-2(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-2(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-2(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e83c634a8ba2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-2(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-2(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-2(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..78fb325366ac
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-2(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-2(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-2(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a81596448418
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-2(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-2(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-2(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e2d20c2b9e02
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-2(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-2(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-2(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9d65dc3bc3ba
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-2(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-2(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-2(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..00302a595319
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-2(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-2(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-2(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e9a2f03905d5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-position-2(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-1(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-1(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e5f943b954c2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-1(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-1(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-1(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..934b2cd789b4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-1(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-1(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-1(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..83d8a468355b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-1(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-1(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-1(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7eb80478c7ec
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-1(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-1(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-1(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a3cf4159e0ba
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-1(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-1(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-1(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a45565de3f3a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-1(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-1(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-1(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..39890a9f6673
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-1(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-1(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-1(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e7b640b24e89
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-1(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-2(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-2(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1c205bb7c28b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-2(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-2(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-2(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8d28e1556e8f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-2(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-2(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-2(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..caf9ad134b69
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-2(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-2(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-2(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3a6d723934d1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-2(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-2(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-2(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..140f04d92b62
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-2(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-2(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-2(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..96da0fd018ff
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-2(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-2(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-2(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5de6d443b358
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-2(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-2(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-2(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fe03a3223084
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-positions-2(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-1(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-1(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1110494441a1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-1(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-1(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-1(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..743f35778ec3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-1(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-1(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-1(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5db85ba1baa2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-1(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-1(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-1(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..31649dbe9610
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-1(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-1(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-1(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..650f5857b75d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-1(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-1(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-1(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..96bdc5806bef
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-1(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-1(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-1(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f516c546face
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-1(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-1(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-1(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1880d86322a2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-1(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-2(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-2(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2b732e90fb6a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-2(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-2(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-2(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..821cf355383d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-2(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-2(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-2(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dd85dc26b77c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-2(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-2(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-2(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c86d2a3e3b00
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-2(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-2(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-2(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1194415baa5b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-2(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-2(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-2(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..66e5133ac1b6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-2(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-2(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-2(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e54321dbc60e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-2(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-2(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-2(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7613073ef2e2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/left-right-sticky-positions-2(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-1(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-1(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b242f04ac46b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-1(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-1(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-1(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..84b1348b7a48
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-1(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-1(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-1(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..947dbcb45b33
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-1(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-1(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-1(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..523fed243ca8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-1(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-1(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-1(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8242816dc7ee
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-1(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-1(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-1(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c2da364710de
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-1(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-1(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-1(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a02616057f25
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-1(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-1(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-1(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fadd375225ed
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-1(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-2(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-2(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8a56435a6422
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-2(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-2(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-2(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9944aae718f6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-2(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-2(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-2(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b8249bae83b5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-2(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-2(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-2(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c25e3406d9ad
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-2(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-2(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-2(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..be51bb356183
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-2(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-2(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-2(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9a0cee5e98c5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-2(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-2(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-2(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2047dd98450c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-2(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-2(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-2(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..69175fcbdc47
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/right-position-2(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-1)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-1)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..502c48950a33
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-1)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-1)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-1)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f5ca1665746f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-1)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-1)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-1)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6f568d2519b1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-1)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-1)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-1)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a560eb6c2c7f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-1)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-1)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-1)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b4080d89a8f5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-1)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-1)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-1)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0cb773c4f293
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-1)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-1)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-1)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9bf636d52385
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-1)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-1)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-1)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..531379e19ab2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-1)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-2)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-2)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..57549bef0414
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-2)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-2)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-2)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9b2ae02d0656
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-2)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-2)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-2)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e9b952bcb649
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-2)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-2)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-2)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b56501e6d0b3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-2)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-2)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-2)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9a350f79425c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-2)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-2)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-2)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6fefba507630
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-2)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-2)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-2)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4318878016db
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-2)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-2)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-2)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a8932b83d710
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-2)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-3)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-3)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..57549bef0414
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-3)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-3)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-3)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ef954ea0121d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-3)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-3)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-3)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e9b952bcb649
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-3)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-3)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-3)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..abad50a6a0b7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-3)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-3)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-3)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9a350f79425c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-3)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-3)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-3)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9638c00cb461
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-3)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-3)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-3)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4318878016db
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-3)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-3)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-3)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4e9c6a609c02
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-1-(case-3)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-1)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-1)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c81106396026
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-1)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-1)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-1)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bb80d6c5a241
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-1)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-1)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-1)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..24a363c89fe7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-1)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-1)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-1)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fe1a26f8b93a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-1)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-1)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-1)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6cd88b4813d3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-1)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-1)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-1)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8f0dbe8d5283
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-1)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-1)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-1)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..87f0835be2c5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-1)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-1)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-1)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fc15994f9354
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-1)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-2)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-2)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9a2111d83f26
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-2)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-2)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-2)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4543c0c91436
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-2)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-2)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-2)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e2eec9ef50d9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-2)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-2)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-2)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1becaa4a2bc4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-2)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-2)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-2)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..19ae3c130056
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-2)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-2)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-2)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..91b6c7f4b41c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-2)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-2)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-2)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cc48da425eb3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-2)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-2)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-2)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..438c7fe989f1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-2)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-3)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-3)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9a2111d83f26
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-3)(cLines_=_false_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-3)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-3)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..73ff181f4ede
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-3)(cLines_=_false_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-3)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-3)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e2eec9ef50d9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-3)(cLines_=_false_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-3)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-3)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fb8cf5ab6560
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-3)(cLines_=_false_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-3)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-3)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..19ae3c130056
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-3)(cLines_=_true_borders_=_false_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-3)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-3)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bf6851257baa
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-3)(cLines_=_true_borders_=_false_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-3)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-3)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cc48da425eb3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-3)(cLines_=_true_borders_=_true_rtl_=_false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-3)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-3)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..19dc412e3f0d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/fixed/etalons/sticky-position-2-(case-3)(cLines_=_true_borders_=_true_rtl_=_true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/autocomplete/etalons/Autocomplete placeholder if value is not choosen (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/autocomplete/etalons/Autocomplete placeholder if value is not choosen (fluent-next.blue.light).png
new file mode 100644
index 000000000000..46a80cec7b49
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/autocomplete/etalons/Autocomplete placeholder if value is not choosen (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar cell styles (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar cell styles (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1ca67de4136a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar cell styles (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar century view (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar century view (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f71bd7cdddb2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar century view (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar century view cell styles (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar century view cell styles (fluent-next.blue.light).png
new file mode 100644
index 000000000000..83c7da65dd7f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar century view cell styles (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar century view in RTL mode (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar century view in RTL mode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..843aec0e762c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar century view in RTL mode (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar century view with today button (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar century view with today button (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9343231f9cf3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar century view with today button (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar decade view (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar decade view (fluent-next.blue.light).png
new file mode 100644
index 000000000000..baa87aa9690c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar decade view (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar decade view cell styles (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar decade view cell styles (fluent-next.blue.light).png
new file mode 100644
index 000000000000..76484b473ad3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar decade view cell styles (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar decade view in RTL mode (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar decade view in RTL mode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..123582f4a668
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar decade view in RTL mode (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar decade view with today button (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar decade view with today button (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ef5d94874a2b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar decade view with today button (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar month view (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar month view (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c9331e0a96b8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar month view (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar month view in RTL mode (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar month view in RTL mode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a2462849bc73
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar month view in RTL mode (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar month view with today button (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar month view with today button (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ee03ceea0377
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar month view with today button (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar today cell styles (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar today cell styles (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1de514dc5261
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar today cell styles (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar with disabled dates (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar with disabled dates (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bde134291448
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar with disabled dates (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar with limit width (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar with limit width (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ae1b40a3f6c3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar with limit width (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar with multiple selectionMode (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar with multiple selectionMode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..048ec5283610
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar with multiple selectionMode (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar with multiview (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar with multiview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0e6348a3df43
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar with multiview (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar with range selection (maxZoomLevel=century) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar with range selection (maxZoomLevel=century) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cf7de7f78b8f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar with range selection (maxZoomLevel=century) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar with range selection (maxZoomLevel=decade) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar with range selection (maxZoomLevel=decade) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fe812b64e21f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar with range selection (maxZoomLevel=decade) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar with range selection (maxZoomLevel=year) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar with range selection (maxZoomLevel=year) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e0fb8acad891
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar with range selection (maxZoomLevel=year) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar with range selectionMode (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar with range selectionMode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a933256f8833
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar with range selectionMode (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar with showWeekNumbers (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar with showWeekNumbers (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9b5fa6a9ec5d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar with showWeekNumbers (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar with showWeekNumbers and cell template (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar with showWeekNumbers and cell template (fluent-next.blue.light).png
new file mode 100644
index 000000000000..890cdf4dfc66
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar with showWeekNumbers and cell template (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar with showWeekNumbers last week (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar with showWeekNumbers last week (fluent-next.blue.light).png
new file mode 100644
index 000000000000..27348a945d44
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar with showWeekNumbers last week (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar with showWeekNumbers rtl=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar with showWeekNumbers rtl=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9e63ff032844
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar with showWeekNumbers rtl=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar year view (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar year view (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ae002cb24fb0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar year view (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar year view cell styles (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar year view cell styles (fluent-next.blue.light).png
new file mode 100644
index 000000000000..920244c87d5f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar year view cell styles (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar year view in RTL mode (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar year view in RTL mode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ef74e022e2fb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar year view in RTL mode (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar year view with today button (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar year view with today button (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4f633679cba0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Calendar year view with today button (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Week cell click selection (selectionMode=multiple) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Week cell click selection (selectionMode=multiple) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..865146f31688
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Week cell click selection (selectionMode=multiple) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Week cell click selection (selectionMode=range) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Week cell click selection (selectionMode=range) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..64e659249eec
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/calendar/etalons/Week cell click selection (selectionMode=range) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist appearance in RTL mode (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist appearance in RTL mode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8a03b5ae9a9b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist appearance in RTL mode (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with long text in error (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with long text in error (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2563e10f1349
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with long text in error (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with one error (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with one error (fluent-next.blue.light).png
new file mode 100644
index 000000000000..961709503239
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Alertlist with one error (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar has correct position (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar has correct position (fluent-next.blue.light).png
new file mode 100644
index 000000000000..78dbdde96f9a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar has correct position (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar sizes do not affect indentation between bubbles (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar sizes do not affect indentation between bubbles (fluent-next.blue.light).png
new file mode 100644
index 000000000000..74328856582b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar sizes do not affect indentation between bubbles (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with image (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with image (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3ce2f8158be5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with image (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with showAvatar set to false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with showAvatar set to false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3eeb812331ab
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with showAvatar set to false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with two word initials (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with two word initials (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fd1ab9e35517
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Avatar with two word initials (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubble with files without text (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubble with files without text (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0d9a6cc5d87c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubble with files without text (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with files (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with files (fluent-next.blue.light).png
new file mode 100644
index 000000000000..39c2adb86e16
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with files (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with images (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with images (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cf1467759325
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with images (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with long text (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with long text (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e0bb06a9f862
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with long text (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with long text with line breaks (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with long text with line breaks (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9f0b6ebdf08a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Bubbles with long text with line breaks (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Confirmation popup is shown (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Confirmation popup is shown (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0ba2b519fa41
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Confirmation popup is shown (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Information row with long user name (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Information row with long user name (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d11f246eee1c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Information row with long user name (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/MessageGroup with edited messages (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/MessageGroup with edited messages (fluent-next.blue.light).png
new file mode 100644
index 000000000000..38358d2c00d9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/MessageGroup with edited messages (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when chat has focus (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when chat has focus (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c12fc437b36c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when chat has focus (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when input contains long text (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when input contains long text (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e8f3b63e33ea
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when input contains long text (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when input contains short text (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when input contains short text (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b334710c8b18
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when input contains short text (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when send button has focus (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when send button has focus (fluent-next.blue.light).png
new file mode 100644
index 000000000000..821882a60c41
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox when send button has focus (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with attachments and informer (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with attachments and informer (fluent-next.blue.light).png
new file mode 100644
index 000000000000..40cc287e7b8a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with attachments and informer (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with editing preview (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with editing preview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..849ef59e18a7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagebox with editing preview (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup appearance in RTL mode (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup appearance in RTL mode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bd4d5753e474
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup appearance in RTL mode (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup appearance in disabled state (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup appearance in disabled state (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dc4000890cb1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup appearance in disabled state (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 1 bubble (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 1 bubble (fluent-next.blue.light).png
new file mode 100644
index 000000000000..39a53b4d555f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 1 bubble (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 2 bubbles (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 2 bubbles (fluent-next.blue.light).png
new file mode 100644
index 000000000000..eced13b0ccc7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 2 bubbles (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 3 bubbles (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 3 bubbles (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ec6a5fefa147
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 3 bubbles (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 4 bubbles (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 4 bubbles (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1edf0db4dcd5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagegroup with 4 bubbles (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty in RTL mode (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty in RTL mode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9beba586088c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty in RTL mode (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty in disabled state (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty in disabled state (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cbd391213857
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty in disabled state (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty state (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty state (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dd460e458101
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty state (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty with limited dimensions (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty with limited dimensions (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0361cee26efc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist empty with limited dimensions (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scroll position after rendering in invisible container (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scroll position after rendering in invisible container (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1df90e7c9ca5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scroll position after rendering in invisible container (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar middle position after typing in textarea (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar middle position after typing in textarea (fluent-next.blue.light).png
new file mode 100644
index 000000000000..37a062add848
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar middle position after typing in textarea (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after call renderMessage() (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after call renderMessage() (fluent-next.blue.light).png
new file mode 100644
index 000000000000..111a138cb2db
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after call renderMessage() (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after send (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after send (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0c0485babef7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after send (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after typing in textarea (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after typing in textarea (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4fa7738e2d02
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist scrollbar position after typing in textarea (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with a lot of messages (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with a lot of messages (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f7fe459f0137
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with a lot of messages (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with date headers (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with date headers (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fb5151de92ed
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with date headers (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with editing context menu (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with editing context menu (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3d629abd31fe
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with editing context menu (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c3cb3b811b7d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template after new message add (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template after new message add (fluent-next.blue.light).png
new file mode 100644
index 000000000000..858151af39d1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template after new message add (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template and deleted messages (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template and deleted messages (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1c132fef3980
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with message template and deleted messages (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with showDayHeaders, showUserName and showMessageTimestamp options set to false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with showDayHeaders, showUserName and showMessageTimestamp options set to false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7587a4d05abd
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist with showDayHeaders, showUserName and showMessageTimestamp options set to false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist without message template and with deleted messages (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist without message template and with deleted messages (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7389224798af
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Messagelist without message template and with deleted messages (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 1 user (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 1 user (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fad7710c919e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 1 user (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 2 users (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 2 users (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8a407a1635c1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 2 users (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 3 users (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 3 users (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1810d190225b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 3 users (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 4 users (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 4 users (fluent-next.blue.light).png
new file mode 100644
index 000000000000..12f83f9433a4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with 4 users (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with a lot of items (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with a lot of items (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3e74a5a0385f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with a lot of items (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with emptyview (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with emptyview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..48a1af84523b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with emptyview (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with long name (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with long name (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a0d87f2b21e6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator with long name (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator without name (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator without name (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d64625e31c73
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Typing indicator without name (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/checkBox/etalons/CheckBox appearance (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/checkBox/etalons/CheckBox appearance (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cdc88bf44884
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/checkBox/etalons/CheckBox appearance (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/checkBox/etalons/CheckBox appearance in scaled container, scale=0.67 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/checkBox/etalons/CheckBox appearance in scaled container, scale=0.67 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a740c7b41271
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/checkBox/etalons/CheckBox appearance in scaled container, scale=0.67 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/checkBox/etalons/CheckBox appearance in scaled container, scale=1.15 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/checkBox/etalons/CheckBox appearance in scaled container, scale=1.15 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b43f8ee2cde3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/checkBox/etalons/CheckBox appearance in scaled container, scale=1.15 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/checkBox/etalons/Checkbox states (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/checkBox/etalons/Checkbox states (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d7d3c6c6bf00
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/checkBox/etalons/Checkbox states (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/checkBox/etalons/Checkbox states with column count style (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/checkBox/etalons/Checkbox states with column count style (fluent-next.blue.light).png
new file mode 100644
index 000000000000..105947cd8ac0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/checkBox/etalons/Checkbox states with column count style (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/checkBox/etalons/Checkbox validation message with bottom position (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/checkBox/etalons/Checkbox validation message with bottom position (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e7fbd0aee8d5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/checkBox/etalons/Checkbox validation message with bottom position (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/checkBox/etalons/Checkbox validation message with left position (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/checkBox/etalons/Checkbox validation message with left position (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6a0216b195fb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/checkBox/etalons/Checkbox validation message with left position (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/checkBox/etalons/Checkbox validation message with right position (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/checkBox/etalons/Checkbox validation message with right position (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3ee9ed26d667
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/checkBox/etalons/Checkbox validation message with right position (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/checkBox/etalons/Checkbox validation message with top position (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/checkBox/etalons/Checkbox validation message with top position (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0efbce412025
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/checkBox/etalons/Checkbox validation message with top position (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/colorbox/etalons/Colorbox with placeholder (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/colorbox/etalons/Colorbox with placeholder (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b119cce12f2c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/colorbox/etalons/Colorbox with placeholder (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/DateBox render with buttons container (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/DateBox render with buttons container (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1b320523de64
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/DateBox render with buttons container (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/DateBox with datetime and opened AMPM select (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/DateBox with datetime and opened AMPM select (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fb785dcf3bda
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/DateBox with datetime and opened AMPM select (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/DateBox with datetime and root element as container (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/DateBox with datetime and root element as container (fluent-next.blue.light).png
new file mode 100644
index 000000000000..259765cbb298
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/DateBox with datetime and root element as container (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/Datebox (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/Datebox (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bda6832a8028
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/Datebox (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/Datebox active (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/Datebox active (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bda6832a8028
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/Datebox active (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/Datebox focused (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/Datebox focused (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a9cf8238fdb5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/Datebox focused (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/Datebox label symbols (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/Datebox label symbols (fluent-next.blue.light).png
new file mode 100644
index 000000000000..eaa20eba9653
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/Datebox label symbols (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/Datebox validation message (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/Datebox validation message (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2c99c111324a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/Datebox validation message (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/Datebox with calendar (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/Datebox with calendar (fluent-next.blue.light).png
new file mode 100644
index 000000000000..908d91d4bfab
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/Datebox with calendar (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/Datebox with datetime (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/Datebox with datetime (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cfe26991036f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/Datebox with datetime (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/Datebox with datetime without analog clock (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/Datebox with datetime without analog clock (fluent-next.blue.light).png
new file mode 100644
index 000000000000..55f21b0277f9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/Datebox with datetime without analog clock (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/Datebox with datetime without calendar (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/Datebox with datetime without calendar (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9e1d22e7ad9a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateBox/etalons/Datebox with datetime without calendar (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB appearance after change rtl mode in runtime (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB appearance after change rtl mode in runtime (fluent-next.blue.light).png
new file mode 100644
index 000000000000..85ee9b96d9ec
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB appearance after change rtl mode in runtime (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB disabled dates after end date select (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB disabled dates after end date select (fluent-next.blue.light).png
new file mode 100644
index 000000000000..439324680748
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB disabled dates after end date select (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB disabled dates before start date select (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB disabled dates before start date select (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cf58c1e3da5a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB disabled dates before start date select (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB disabled dates on end date input focus (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB disabled dates on end date input focus (fluent-next.blue.light).png
new file mode 100644
index 000000000000..94efc609014d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB disabled dates on end date input focus (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB disabled dates on popup opening (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB disabled dates on popup opening (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bf40e3a48ecb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB disabled dates on popup opening (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB disabled dates on start date input focus (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB disabled dates on start date input focus (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b634494db142
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB disabled dates on start date input focus (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range cells, start in view and end in row & vise versa (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range cells, start in view and end in row & vise versa (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b9b2d0e5a9c5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range cells, start in view and end in row & vise versa (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range cells, start in view and in row & end in view and in row (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range cells, start in view and in row & end in view and in row (fluent-next.blue.light).png
new file mode 100644
index 000000000000..90d10d90770a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range cells, start in view and in row & end in view and in row (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate = startDate (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate = startDate (fluent-next.blue.light).png
new file mode 100644
index 000000000000..aadd17141139
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate = startDate (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is cell inside row, hover is start in view (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is cell inside row, hover is start in view (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9b9691dbcca4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is cell inside row, hover is start in view (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end cell row, hover is end in view (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end cell row, hover is end in view (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f8015274506a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end cell row, hover is end in view (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end in view & end cell row (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end in view & end cell row (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6c9a1b278c9e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end in view & end cell row (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end in view & start row, hover is start row (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end in view & start row, hover is start row (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d354aa16916a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end in view & start row, hover is start row (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end in view, hover is start view & end row (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end in view, hover is start view & end row (fluent-next.blue.light).png
new file mode 100644
index 000000000000..40dbe4363eb7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is end in view, hover is start view & end row (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start in row, hover is end view & start row (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start in row, hover is end view & start row (fluent-next.blue.light).png
new file mode 100644
index 000000000000..18d1328da914
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start in row, hover is end view & start row (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start in view & start in row (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start in view & start in row (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bcc729815f2f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start in view & start in row (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start in view, hover is end in row (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start in view, hover is end in row (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d7d3ae604473
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start in view, hover is end in row (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start view & end cell row, hover inside row (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start view & end cell row, hover inside row (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f814d12bd0ec
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, endDate is start view & end cell row, hover inside row (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is end in view & end cell row (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is end in view & end cell row (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3a28d521db6c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is end in view & end cell row (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is end in view & start in row (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is end in view & start in row (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0d28ca421088
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is end in view & start in row (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is start in view & end cell row (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is start in view & end cell row (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9ca5851406ef
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is start in view & end cell row (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is start in view & start in row (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is start in view & start in row (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4f50d2e05e32
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, hover is start in view & start in row (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate cell is start in view & end cell row (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate cell is start in view & end cell row (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dec543d4208b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate cell is start in view & end cell row (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate inside row, hover is start in view & row (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate inside row, hover is start in view & row (fluent-next.blue.light).png
new file mode 100644
index 000000000000..87bee39e7f3f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate inside row, hover is start in view & row (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end cell row, hover is start in row (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end cell row, hover is start in row (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d08e849beb99
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end cell row, hover is start in row (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end in view & row, hover inside row (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end in view & row, hover inside row (fluent-next.blue.light).png
new file mode 100644
index 000000000000..facc8e2990c8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end in view & row, hover inside row (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end in view & start row, hover is end row (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end in view & start row, hover is end row (fluent-next.blue.light).png
new file mode 100644
index 000000000000..02cae1f681d9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end in view & start row, hover is end row (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end in view, hover inside row (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end in view, hover inside row (fluent-next.blue.light).png
new file mode 100644
index 000000000000..950199d0470a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is end in view, hover inside row (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is start in row, hover is start in view (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is start in row, hover is start in view (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1e6520df2bf8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is start in row, hover is start in view (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is start in view, hover is end in view (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is start in view, hover is end in view (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7017f34f8593
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is start in view, hover is end in view (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is start view & row, hover is end view & row (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is start view & row, hover is end view & row (fluent-next.blue.light).png
new file mode 100644
index 000000000000..924e91cebd8c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate is start view & row, hover is end view & row (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DateRangeBox styles (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DateRangeBox styles (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f3f7f050558c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DateRangeBox styles (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DateRangeBox with buttons container (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DateRangeBox with buttons container (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bb4bf4faab07
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DateRangeBox with buttons container (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/Placeholder and label by default labelMode=floating (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/Placeholder and label by default labelMode=floating (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7f37785031da
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/Placeholder and label by default labelMode=floating (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/Placeholder and label by default labelMode=hidden (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/Placeholder and label by default labelMode=hidden (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cbe0cb5907f7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/Placeholder and label by default labelMode=hidden (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/Placeholder and label by default labelMode=outside (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/Placeholder and label by default labelMode=outside (fluent-next.blue.light).png
new file mode 100644
index 000000000000..01f0c59ba1ea
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/Placeholder and label by default labelMode=outside (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/Placeholder and label by default labelMode=static (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/Placeholder and label by default labelMode=static (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c626288172ac
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/Placeholder and label by default labelMode=static (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/Placeholder and label on end date input labelMode=floating focus (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/Placeholder and label on end date input labelMode=floating focus (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d6650e5e7388
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/Placeholder and label on end date input labelMode=floating focus (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/Placeholder and label on end date input labelMode=hidden focus (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/Placeholder and label on end date input labelMode=hidden focus (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dffcded1b99e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/Placeholder and label on end date input labelMode=hidden focus (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/Placeholder and label on end date input labelMode=outside focus (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/Placeholder and label on end date input labelMode=outside focus (fluent-next.blue.light).png
new file mode 100644
index 000000000000..27d6b6538a8f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/Placeholder and label on end date input labelMode=outside focus (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/Placeholder and label on end date input labelMode=static focus (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/Placeholder and label on end date input labelMode=static focus (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d6650e5e7388
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/Placeholder and label on end date input labelMode=static focus (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/Placeholder and label on start date input focus labelMode=floating (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/Placeholder and label on start date input focus labelMode=floating (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ac06a348b989
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/Placeholder and label on start date input focus labelMode=floating (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/Placeholder and label on start date input focus labelMode=hidden (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/Placeholder and label on start date input focus labelMode=hidden (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cfb3788415d1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/Placeholder and label on start date input focus labelMode=hidden (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/Placeholder and label on start date input focus labelMode=outside (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/Placeholder and label on start date input focus labelMode=outside (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c15204492439
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/Placeholder and label on start date input focus labelMode=outside (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/Placeholder and label on start date input focus labelMode=static (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/Placeholder and label on start date input focus labelMode=static (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ac06a348b989
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/Placeholder and label on start date input focus labelMode=static (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/The validation message overlay position for DateRangeBox after opening (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/The validation message overlay position for DateRangeBox after opening (fluent-next.blue.light).png
new file mode 100644
index 000000000000..18ac75464ed3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/The validation message overlay position for DateRangeBox after opening (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/The validation message overlay position for DateRangeBox before opening (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/The validation message overlay position for DateRangeBox before opening (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0175ade92e6d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/The validation message overlay position for DateRangeBox before opening (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dropDownBox/etalons/Popup has correct height on the first opening (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dropDownBox/etalons/Popup has correct height on the first opening (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2cc15def4126
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dropDownBox/etalons/Popup has correct height on the first opening (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dropDownBox/etalons/T1245111-dropDownBox-resize (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dropDownBox/etalons/T1245111-dropDownBox-resize (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6f8eba0a01d9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dropDownBox/etalons/T1245111-dropDownBox-resize (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dropDownButton/etalons/Button template, splitButton=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dropDownButton/etalons/Button template, splitButton=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6dc16646984a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dropDownButton/etalons/Button template, splitButton=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dropDownButton/etalons/Button template, splitButton=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dropDownButton/etalons/Button template, splitButton=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c16011cc8d36
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dropDownButton/etalons/Button template, splitButton=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dropDownButton/etalons/DropDownButton render (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dropDownButton/etalons/DropDownButton render (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7bcc89b09e7b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dropDownButton/etalons/DropDownButton render (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dropDownButton/etalons/DropDownButton render with fixed width (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dropDownButton/etalons/DropDownButton render with fixed width (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dd22053f29f8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dropDownButton/etalons/DropDownButton render with fixed width (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dropDownButton/etalons/DropDownButton render, type=danger (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dropDownButton/etalons/DropDownButton render, type=danger (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7aa4098eb0e9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dropDownButton/etalons/DropDownButton render, type=danger (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dropDownButton/etalons/DropDownButton render, type=default (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dropDownButton/etalons/DropDownButton render, type=default (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9bc6f37c3b2a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dropDownButton/etalons/DropDownButton render, type=default (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/dropDownButton/etalons/DropDownButton render, type=success (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/dropDownButton/etalons/DropDownButton render, type=success (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2b0e54ca1233
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/dropDownButton/etalons/DropDownButton render, type=success (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/fileManager/etalons/drop down width (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/fileManager/etalons/drop down width (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7b264a0c9c2f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/fileManager/etalons/drop down width (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/fileUploader/etalons/fileuploader-show-filelist-false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/fileUploader/etalons/fileuploader-show-filelist-false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e30e4da585cc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/fileUploader/etalons/fileuploader-show-filelist-false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/fileUploader/etalons/fileuploader-show-filelist-true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/fileUploader/etalons/fileuploader-show-filelist-true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..19dda59f4f13
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/fileUploader/etalons/fileuploader-show-filelist-true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/Image uploader from url appearance (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/Image uploader from url appearance (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cfa9033be199
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/Image uploader from url appearance (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/add-validated-url-image-by-click (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/add-validated-url-image-by-click (fluent-next.blue.light).png
new file mode 100644
index 000000000000..60c5a7c48cff
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/add-validated-url-image-by-click (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/editor-add-url-image-after-updated (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/editor-add-url-image-after-updated (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d9bdaab3015e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/editor-add-url-image-after-updated (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/editor-add-url-image-before-updated (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/editor-add-url-image-before-updated (fluent-next.blue.light).png
new file mode 100644
index 000000000000..60c5a7c48cff
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/editor-add-url-image-before-updated (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/editor-add-validated-url-image-by-enter (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/editor-add-validated-url-image-by-enter (fluent-next.blue.light).png
new file mode 100644
index 000000000000..60c5a7c48cff
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/editor-add-validated-url-image-by-enter (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/editor-after-add-image-from-device (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/editor-after-add-image-from-device (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d044f6b2bbaf
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/editor-after-add-image-from-device (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/editor-after-click-add-button-and-validation (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/editor-after-click-add-button-and-validation (fluent-next.blue.light).png
new file mode 100644
index 000000000000..417fa43a3c0c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/editor-after-click-add-button-and-validation (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/editor-before-click-add-button-and-validation (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/editor-before-click-add-button-and-validation (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4fca6f09b3cd
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/editor-before-click-add-button-and-validation (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/editor-before-click-add-button-from-device (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/editor-before-click-add-button-from-device (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dc300ddd04f0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/editor-before-click-add-button-from-device (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/htmleditor-with-toolbar (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/htmleditor-with-toolbar (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e3d6fef9f9ce
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/htmleditor-with-toolbar (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/htmleditor-with-toolbar-focused (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/htmleditor-with-toolbar-focused (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4605fa42452d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/htmleditor-with-toolbar-focused (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/htmleditor-without-toolbar (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/htmleditor-without-toolbar (fluent-next.blue.light).png
new file mode 100644
index 000000000000..80e293e21c48
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/htmleditor-without-toolbar (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/htmleditor-without-toolbar-focused (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/htmleditor-without-toolbar-focused (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b3489d61ecf2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/htmleditor-without-toolbar-focused (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/tabpanel-in-htmleditor (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/tabpanel-in-htmleditor (fluent-next.blue.light).png
new file mode 100644
index 000000000000..49299dc25f6e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/etalons/tabpanel-in-htmleditor (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-ask-ai-result-ready-state (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-ask-ai-result-ready-state (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3871e150abf8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-ask-ai-result-ready-state (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-asking-state (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-asking-state (fluent-next.blue.light).png
new file mode 100644
index 000000000000..24991f716d10
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-asking-state (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-error-state (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-error-state (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1cf024a34467
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-error-state (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-error-state-on-small-screen (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-error-state-on-small-screen (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e9dd7214bd0b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-error-state-on-small-screen (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-generating-state (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-generating-state (fluent-next.blue.light).png
new file mode 100644
index 000000000000..526f30013fef
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-generating-state (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-generating-state-on-small-screen (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-generating-state-on-small-screen (fluent-next.blue.light).png
new file mode 100644
index 000000000000..99c6056b956c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-generating-state-on-small-screen (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-initial-state-on-small-screen (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-initial-state-on-small-screen (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9886d191596b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-initial-state-on-small-screen (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-initial-state-resize-window (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-initial-state-resize-window (fluent-next.blue.light).png
new file mode 100644
index 000000000000..711066eb649f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-initial-state-resize-window (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-initial-state-with-no-options (fluent-next.blue.light).png
new file mode 100644
index 000000000000..04adef07630c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-initial-state-with-no-options (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-initial-state-with-options (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-initial-state-with-options (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8fe570b77ff4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-initial-state-with-options (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-result-ready-after-canceletion (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-result-ready-after-canceletion (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5fb86ecceec3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-result-ready-after-canceletion (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-result-ready-state-on-small-screen (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-result-ready-state-on-small-screen (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8a5fac889b97
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-result-ready-state-on-small-screen (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-result-ready-state-with-long-result (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1185fd652ff1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-result-ready-state-with-long-result (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-result-ready-state-with-short-result (fluent-next.blue.light).png
new file mode 100644
index 000000000000..14ac66853ff3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/etalons/htmleditor-ai-dialog-result-ready-state-with-short-result (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/etalons/htmleditor-ai-toolbar-item (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/etalons/htmleditor-ai-toolbar-item (fluent-next.blue.light).png
new file mode 100644
index 000000000000..69fa4ae30571
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/etalons/htmleditor-ai-toolbar-item (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/etalons/htmleditor-ai-toolbar-item-expanded (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/etalons/htmleditor-ai-toolbar-item-expanded (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d5bfcd1acc7f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/etalons/htmleditor-ai-toolbar-item-expanded (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/etalons/htmleditor-ordered-list-appearance (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/etalons/htmleditor-ordered-list-appearance (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0eaa3540d30c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/etalons/htmleditor-ordered-list-appearance (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/etalons/htmleditor-ordered-list-text-appearance (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/etalons/htmleditor-ordered-list-text-appearance (fluent-next.blue.light).png
new file mode 100644
index 000000000000..833ed731a091
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/etalons/htmleditor-ordered-list-text-appearance (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/etalons/htmleditor-with-toolbar (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/etalons/htmleditor-with-toolbar (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e3d6fef9f9ce
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/etalons/htmleditor-with-toolbar (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/etalons/htmleditor-with-toolbar-focused (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/etalons/htmleditor-with-toolbar-focused (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4605fa42452d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/etalons/htmleditor-with-toolbar-focused (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/etalons/htmleditor-without-toolbar (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/etalons/htmleditor-without-toolbar (fluent-next.blue.light).png
new file mode 100644
index 000000000000..80e293e21c48
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/etalons/htmleditor-without-toolbar (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/etalons/htmleditor-without-toolbar-focused (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/htmlEditor/etalons/htmleditor-without-toolbar-focused (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b3489d61ecf2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/htmlEditor/etalons/htmleditor-without-toolbar-focused (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/loadIndIcator/etalons/LoadIndicator with circle animation (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/loadIndIcator/etalons/LoadIndicator with circle animation (fluent-next.blue.light).png
new file mode 100644
index 000000000000..db1ab4add458
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/loadIndIcator/etalons/LoadIndicator with circle animation (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/loadIndIcator/etalons/LoadIndicator with sparkle animation (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/loadIndIcator/etalons/LoadIndicator with sparkle animation (fluent-next.blue.light).png
new file mode 100644
index 000000000000..de447c40e260
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/loadIndIcator/etalons/LoadIndicator with sparkle animation (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/lookup/etalons/Lookup appearance (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/lookup/etalons/Lookup appearance (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9f8120789eca
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/lookup/etalons/Lookup appearance (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/lookup/etalons/Lookup appearance with limited width (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/lookup/etalons/Lookup appearance with limited width (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1ee43471aa6d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/lookup/etalons/Lookup appearance with limited width (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/lookup/etalons/Lookup in loading (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/lookup/etalons/Lookup in loading (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8608271241b2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/lookup/etalons/Lookup in loading (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/lookup/etalons/Lookup width adjust to fit its content (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/lookup/etalons/Lookup width adjust to fit its content (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bae32399ff5c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/lookup/etalons/Lookup width adjust to fit its content (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/lookup/etalons/Lookup with no found data (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/lookup/etalons/Lookup with no found data (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5279285dac1a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/lookup/etalons/Lookup with no found data (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5ba4cc11ba64
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox label (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6ee28935c487
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/numberBox/etalons/NumberBox render with buttons container (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Dialog appearance (alert) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Dialog appearance (alert) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7a55378d866e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Dialog appearance (alert) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Dialog appearance (confirm) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Dialog appearance (confirm) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2abcfb6186ef
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Dialog appearance (confirm) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Dialog appearance (custom) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Dialog appearance (custom) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..952f2c1dac89
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Dialog appearance (custom) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Popover_bottom_toolbar_menu,rtlEnabled=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Popover_bottom_toolbar_menu,rtlEnabled=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c63a34a78fa2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Popover_bottom_toolbar_menu,rtlEnabled=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Popover_bottom_toolbar_menu,rtlEnabled=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Popover_bottom_toolbar_menu,rtlEnabled=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a1f9e179178f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Popover_bottom_toolbar_menu,rtlEnabled=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Popover_top_toolbar_menu,rtlEnabled=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Popover_top_toolbar_menu,rtlEnabled=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ebb90cb98a4c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Popover_top_toolbar_menu,rtlEnabled=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Popover_top_toolbar_menu,rtlEnabled=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Popover_top_toolbar_menu,rtlEnabled=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bc7e33080b40
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Popover_top_toolbar_menu,rtlEnabled=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Popup toolbars with wide elements and overflow menu after items rebinding (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Popup toolbars with wide elements and overflow menu after items rebinding (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9ab5d5b22dd4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Popup toolbars with wide elements and overflow menu after items rebinding (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Popup toolbars with wide elements and overflow menu before items rebinding (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Popup toolbars with wide elements and overflow menu before items rebinding (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f770b9681171
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Popup toolbars with wide elements and overflow menu before items rebinding (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Popup_bottom_toolbar_menu,rtlEnabled=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Popup_bottom_toolbar_menu,rtlEnabled=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fd4ee3ea37da
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Popup_bottom_toolbar_menu,rtlEnabled=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Popup_bottom_toolbar_menu,rtlEnabled=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Popup_bottom_toolbar_menu,rtlEnabled=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..581f77607817
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Popup_bottom_toolbar_menu,rtlEnabled=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Popup_top_toolbar_menu,rtlEnabled=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Popup_top_toolbar_menu,rtlEnabled=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5ceac4a0a94c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Popup_top_toolbar_menu,rtlEnabled=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Popup_top_toolbar_menu,rtlEnabled=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Popup_top_toolbar_menu,rtlEnabled=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3166c4adb5aa
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Popup_top_toolbar_menu,rtlEnabled=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Toasts (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Toasts (fluent-next.blue.light).png
new file mode 100644
index 000000000000..babfc2151c88
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Toasts (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Toolbar after items rebinding if it was hidden without items on init (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Toolbar after items rebinding if it was hidden without items on init (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9ab5d5b22dd4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Toolbar after items rebinding if it was hidden without items on init (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Toolbar after items rebinding if it was visible with items on init (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Toolbar after items rebinding if it was visible with items on init (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9ab5d5b22dd4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Toolbar after items rebinding if it was visible with items on init (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Toolbar before items rebinding if it was hidden without items on init (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Toolbar before items rebinding if it was hidden without items on init (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f770b9681171
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Toolbar before items rebinding if it was hidden without items on init (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Toolbar before items rebinding if it was visible with items on init (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Toolbar before items rebinding if it was visible with items on init (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f770b9681171
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/overlays/etalons/Toolbar before items rebinding if it was visible with items on init (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/radioGroup/etalons/RadioGroup horizontal validation (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/radioGroup/etalons/RadioGroup horizontal validation (fluent-next.blue.light).png
new file mode 100644
index 000000000000..35724372e232
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/radioGroup/etalons/RadioGroup horizontal validation (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/radioGroup/etalons/RadioGroup in scaled container (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/radioGroup/etalons/RadioGroup in scaled container (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0d41efb9f35d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/radioGroup/etalons/RadioGroup in scaled container (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox Customize DropDown Button (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox Customize DropDown Button (fluent-next.blue.light).png
new file mode 100644
index 000000000000..34f8b7d5d3b3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox Customize DropDown Button (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox no data (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox no data (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ea4910a8cc34
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox no data (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox pagesize equal datasource items count (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox pagesize equal datasource items count (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ebe6577a8dae
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox pagesize equal datasource items count (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox pagesize less datasource items count (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox pagesize less datasource items count (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ebe6577a8dae
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox pagesize less datasource items count (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox pagesize more datasource items count (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox pagesize more datasource items count (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ebe6577a8dae
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox pagesize more datasource items count (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox placeholder after items change if value is not choosen (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox placeholder after items change if value is not choosen (fluent-next.blue.light).png
new file mode 100644
index 000000000000..464d8e77cb9c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox placeholder after items change if value is not choosen (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox popup height after last page load (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox popup height after last page load (fluent-next.blue.light).png
new file mode 100644
index 000000000000..57b6dbbd9890
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox popup height after last page load (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox with label-labelMode=floating-stylingMode=filled (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox with label-labelMode=floating-stylingMode=filled (fluent-next.blue.light).png
new file mode 100644
index 000000000000..eecd46054108
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox with label-labelMode=floating-stylingMode=filled (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox with label-labelMode=floating-stylingMode=outlined (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox with label-labelMode=floating-stylingMode=outlined (fluent-next.blue.light).png
new file mode 100644
index 000000000000..39a5f07e56a5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox with label-labelMode=floating-stylingMode=outlined (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox with label-labelMode=floating-stylingMode=underlined (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox with label-labelMode=floating-stylingMode=underlined (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f545802bc811
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox with label-labelMode=floating-stylingMode=underlined (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox with label-labelMode=outside-stylingMode=filled (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox with label-labelMode=outside-stylingMode=filled (fluent-next.blue.light).png
new file mode 100644
index 000000000000..924470d517aa
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox with label-labelMode=outside-stylingMode=filled (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox with label-labelMode=outside-stylingMode=outlined (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox with label-labelMode=outside-stylingMode=outlined (fluent-next.blue.light).png
new file mode 100644
index 000000000000..97588d499827
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox with label-labelMode=outside-stylingMode=outlined (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox with label-labelMode=outside-stylingMode=underlined (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox with label-labelMode=outside-stylingMode=underlined (fluent-next.blue.light).png
new file mode 100644
index 000000000000..53eec09f4a20
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox with label-labelMode=outside-stylingMode=underlined (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox with label-labelMode=static-stylingMode=filled (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox with label-labelMode=static-stylingMode=filled (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6569a5b1d0df
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox with label-labelMode=static-stylingMode=filled (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox with label-labelMode=static-stylingMode=outlined (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox with label-labelMode=static-stylingMode=outlined (fluent-next.blue.light).png
new file mode 100644
index 000000000000..86efaf9f0dc0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox with label-labelMode=static-stylingMode=outlined (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox with label-labelMode=static-stylingMode=underlined (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox with label-labelMode=static-stylingMode=underlined (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f82bc2cf20b8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/selectBox/etalons/SelectBox with label-labelMode=static-stylingMode=underlined (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/slider/etalons/slider-appearance (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/slider/etalons/slider-appearance (fluent-next.blue.light).png
new file mode 100644
index 000000000000..395244f878f7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/slider/etalons/slider-appearance (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=filled (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=filled (fluent-next.blue.light).png
new file mode 100644
index 000000000000..52ac6f6782e8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=filled (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=filled,labelMode=floating (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=filled,labelMode=floating (fluent-next.blue.light).png
new file mode 100644
index 000000000000..27b9a201bbdf
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=filled,labelMode=floating (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=filled,labelMode=hidden (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=filled,labelMode=hidden (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f0a94739e0c5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=filled,labelMode=hidden (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=filled,labelMode=outside (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=filled,labelMode=outside (fluent-next.blue.light).png
new file mode 100644
index 000000000000..349a6d5ff154
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=filled,labelMode=outside (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=filled,labelMode=static (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=filled,labelMode=static (fluent-next.blue.light).png
new file mode 100644
index 000000000000..27b9a201bbdf
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=filled,labelMode=static (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=outlined (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=outlined (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c57b150def29
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=outlined (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=outlined,labelMode=floating (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=outlined,labelMode=floating (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8dcf513e0334
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=outlined,labelMode=floating (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=outlined,labelMode=hidden (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=outlined,labelMode=hidden (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0aabe4353f47
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=outlined,labelMode=hidden (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=outlined,labelMode=outside (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=outlined,labelMode=outside (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c4445af4b7f3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=outlined,labelMode=outside (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=outlined,labelMode=static (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=outlined,labelMode=static (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8dcf513e0334
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=outlined,labelMode=static (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=underlined (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=underlined (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b64e4b28bf67
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=underlined (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=underlined,labelMode=floating (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=underlined,labelMode=floating (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fedc3da7143c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=underlined,labelMode=floating (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=underlined,labelMode=hidden (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=underlined,labelMode=hidden (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ca7398ec314d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=underlined,labelMode=hidden (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=underlined,labelMode=outside (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=underlined,labelMode=outside (fluent-next.blue.light).png
new file mode 100644
index 000000000000..caecb02a631b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=underlined,labelMode=outside (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=underlined,labelMode=static (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=underlined,labelMode=static (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fedc3da7143c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox label with stylingMode=underlined,labelMode=static (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox placeholder if value is not choosen (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox placeholder if value is not choosen (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8884fd208b6b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox placeholder if value is not choosen (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox with selection controls (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox with selection controls (fluent-next.blue.light).png
new file mode 100644
index 000000000000..70be58d09a36
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/tagBox/etalons/TagBox with selection controls (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea appearance, height=5em & maxHeight=7em (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea appearance, height=5em & maxHeight=7em (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0b24dfc3bf3c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea appearance, height=5em & maxHeight=7em (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea appearance, height=7em & maxHeight=5em (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea appearance, height=7em & maxHeight=5em (fluent-next.blue.light).png
new file mode 100644
index 000000000000..edf07a8b19aa
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea appearance, height=7em & maxHeight=5em (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea appearance, maxHeight is not defined (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea appearance, maxHeight is not defined (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f29f8d4660bb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea appearance, maxHeight is not defined (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea appearance, maxHeight=5em (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea appearance, maxHeight=5em (fluent-next.blue.light).png
new file mode 100644
index 000000000000..836d0432dad7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea appearance, maxHeight=5em (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea appearance, maxHeight=5em, font-size=12px (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea appearance, maxHeight=5em, font-size=12px (fluent-next.blue.light).png
new file mode 100644
index 000000000000..836d0432dad7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea appearance, maxHeight=5em, font-size=12px (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea appearance, maxHeight=80px (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea appearance, maxHeight=80px (fluent-next.blue.light).png
new file mode 100644
index 000000000000..de2fc0a8b824
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea appearance, maxHeight=80px (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea label after scroll (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea label after scroll (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ca7c0a68d767
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea label after scroll (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea with label-labelMode=floating-stylingMode=filled (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea with label-labelMode=floating-stylingMode=filled (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2b1eb672b740
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea with label-labelMode=floating-stylingMode=filled (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea with label-labelMode=floating-stylingMode=outlined (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea with label-labelMode=floating-stylingMode=outlined (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3f67eb9e6339
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea with label-labelMode=floating-stylingMode=outlined (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea with label-labelMode=floating-stylingMode=underlined (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea with label-labelMode=floating-stylingMode=underlined (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b3cde6d91978
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea with label-labelMode=floating-stylingMode=underlined (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea with label-labelMode=outside-stylingMode=filled (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea with label-labelMode=outside-stylingMode=filled (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4be9ae7fda31
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea with label-labelMode=outside-stylingMode=filled (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea with label-labelMode=outside-stylingMode=outlined (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea with label-labelMode=outside-stylingMode=outlined (fluent-next.blue.light).png
new file mode 100644
index 000000000000..247b9930c3b8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea with label-labelMode=outside-stylingMode=outlined (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea with label-labelMode=outside-stylingMode=underlined (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea with label-labelMode=outside-stylingMode=underlined (fluent-next.blue.light).png
new file mode 100644
index 000000000000..975dc30080c8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea with label-labelMode=outside-stylingMode=underlined (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea with label-labelMode=static-stylingMode=filled (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea with label-labelMode=static-stylingMode=filled (fluent-next.blue.light).png
new file mode 100644
index 000000000000..17833a761678
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea with label-labelMode=static-stylingMode=filled (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea with label-labelMode=static-stylingMode=outlined (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea with label-labelMode=static-stylingMode=outlined (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9b90aa1dcd0c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea with label-labelMode=static-stylingMode=outlined (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea with label-labelMode=static-stylingMode=underlined (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea with label-labelMode=static-stylingMode=underlined (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2fd6a27edd77
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/textArea/etalons/TextArea with label-labelMode=static-stylingMode=underlined (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render (fluent-next.blue.light).png
new file mode 100644
index 000000000000..622b8c8e0f1b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render with limited width (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render with limited width (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2c5c9f6d5def
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox render with limited width (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox states (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox states (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e8218d178d8c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox states (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox validation message (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox validation message (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2acf26427220
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox validation message (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5a8965293ea6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/textBox/etalons/Textbox with buttons container (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/editors/textBox/label.ts b/e2e/testcafe-devextreme/tests/editors/textBox/label.ts
index d7d5a18d95a4..213bd8dade01 100644
--- a/e2e/testcafe-devextreme/tests/editors/textBox/label.ts
+++ b/e2e/testcafe-devextreme/tests/editors/textBox/label.ts
@@ -50,9 +50,24 @@ const createTextBox = async (options?: Properties, state?: string): Promise<stri
 };
 
 [
-  { labelMode: 'static', expectedWidths: { generic: 82, material: 68, fluent: 74 } },
-  { labelMode: 'floating', expectedWidths: { generic: 82, material: 68, fluent: 74 } },
-  { labelMode: 'outside', expectedWidths: { generic: 'none', material: 'none', fluent: 'none' } },
+  {
+    labelMode: 'static',
+    expectedWidths: {
+      generic: 82, material: 68, fluent: 74, 'fluent-next': 74,
+    },
+  },
+  {
+    labelMode: 'floating',
+    expectedWidths: {
+      generic: 82, material: 68, fluent: 74, 'fluent-next': 74,
+    },
+  },
+  {
+    labelMode: 'outside',
+    expectedWidths: {
+      generic: 'none', material: 'none', fluent: 'none', 'fluent-next': 'none',
+    },
+  },
 ].forEach(({ labelMode, expectedWidths }) => {
   test(`Label max-width should be changed after container width was changed, labelMode is ${labelMode}`, async (t) => {
     const textBox = new TextBox('#container');
@@ -97,11 +112,8 @@ test('Textbox render', async (t) => {
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
 }).before(async () => {
-  // eslint-disable-next-line no-restricted-syntax
   for (const stylingMode of stylingModes) {
-    // eslint-disable-next-line no-restricted-syntax
     for (const labelMode of visibleLabelModes) {
-      // eslint-disable-next-line no-restricted-syntax
       for (const placeholder of ['Placeholder', '']) {
         await createTextBox({
           text: undefined,
@@ -114,7 +126,7 @@ test('Textbox render', async (t) => {
       await createTextBox({ text: 'Text value' });
       await createTextBox({ rtlEnabled: true });
     }
-    // eslint-disable-next-line no-restricted-syntax
+
     for (const placeholder of ['Placeholder', '']) {
       await createTextBox({
         text: undefined,
@@ -146,9 +158,8 @@ test('Textbox states', async (t) => {
     INVALID_STATE_CLASS,
     `${INVALID_STATE_CLASS} ${FOCUSED_STATE_CLASS}`,
   ];
-  // eslint-disable-next-line no-restricted-syntax
+
   for (const state of states) {
-    // eslint-disable-next-line no-restricted-syntax
     for (const placeholder of ['Placeholder', '']) {
       await createTextBox({
         text: undefined,
@@ -176,9 +187,7 @@ test('Textbox with buttons container', async (t) => {
     await insertStylesheetRulesToPage('#container .dx-widget { font-family: sans-serif }');
   }
 
-  // eslint-disable-next-line no-restricted-syntax
   for (const stylingMode of stylingModes) {
-    // eslint-disable-next-line no-restricted-syntax
     for (const buttons of buttonsList) {
       await createTextBox({ stylingMode, buttons, showClearButton: true });
       await createTextBox({
diff --git a/e2e/testcafe-devextreme/tests/navigation/accordion/etalons/Accordion items render (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/accordion/etalons/Accordion items render (fluent-next.blue.light).png
new file mode 100644
index 000000000000..497b71cb5dff
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/accordion/etalons/Accordion items render (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/accordion/etalons/Accordion with icon-only button (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/accordion/etalons/Accordion with icon-only button (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a01747d689e4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/accordion/etalons/Accordion with icon-only button (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/button/etalons/Button in rtl modes (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/button/etalons/Button in rtl modes (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ba45334cfd08
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/button/etalons/Button in rtl modes (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/button/etalons/Button with svg icon as background (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/button/etalons/Button with svg icon as background (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0a6f9c3aede3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/button/etalons/Button with svg icon as background (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/button/etalons/Buttons, stylingMode=contained (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/button/etalons/Buttons, stylingMode=contained (fluent-next.blue.light).png
new file mode 100644
index 000000000000..03c688efb70d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/button/etalons/Buttons, stylingMode=contained (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/button/etalons/Buttons, stylingMode=contained (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/button/etalons/Buttons, stylingMode=contained (fluent.blue.light).png
index 05514b236504..811d2c1fb1f3 100644
Binary files a/e2e/testcafe-devextreme/tests/navigation/button/etalons/Buttons, stylingMode=contained (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/navigation/button/etalons/Buttons, stylingMode=contained (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/button/etalons/Buttons, stylingMode=outlined (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/button/etalons/Buttons, stylingMode=outlined (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5972344c011b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/button/etalons/Buttons, stylingMode=outlined (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/button/etalons/Buttons, stylingMode=outlined (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/button/etalons/Buttons, stylingMode=outlined (fluent.blue.light).png
index ee8a856786e3..35341d2ab1aa 100644
Binary files a/e2e/testcafe-devextreme/tests/navigation/button/etalons/Buttons, stylingMode=outlined (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/navigation/button/etalons/Buttons, stylingMode=outlined (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/button/etalons/Buttons, stylingMode=text (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/button/etalons/Buttons, stylingMode=text (fluent-next.blue.light).png
new file mode 100644
index 000000000000..15f8a1b09182
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/button/etalons/Buttons, stylingMode=text (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/button/etalons/Buttons, stylingMode=text (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/button/etalons/Buttons, stylingMode=text (fluent.blue.light).png
index c3a17de4716d..3c0f34a6c5de 100644
Binary files a/e2e/testcafe-devextreme/tests/navigation/button/etalons/Buttons, stylingMode=text (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/navigation/button/etalons/Buttons, stylingMode=text (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/button/etalons/FAB is opened with two speed dial actions,label='',icon='' (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/button/etalons/FAB is opened with two speed dial actions,label='',icon='' (fluent-next.blue.light).png
new file mode 100644
index 000000000000..601c1dba6e8c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/button/etalons/FAB is opened with two speed dial actions,label='',icon='' (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/button/etalons/FAB is opened with two speed dial actions,label='',icon='home' (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/button/etalons/FAB is opened with two speed dial actions,label='',icon='home' (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2e3245aeaaf0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/button/etalons/FAB is opened with two speed dial actions,label='',icon='home' (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/button/etalons/FAB is opened with two speed dial actions,label='Add Row',icon='' (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/button/etalons/FAB is opened with two speed dial actions,label='Add Row',icon='' (fluent-next.blue.light).png
new file mode 100644
index 000000000000..17b3b180260e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/button/etalons/FAB is opened with two speed dial actions,label='Add Row',icon='' (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/button/etalons/FAB is opened with two speed dial actions,label='Add Row',icon='home' (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/button/etalons/FAB is opened with two speed dial actions,label='Add Row',icon='home' (fluent-next.blue.light).png
new file mode 100644
index 000000000000..eea611272981
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/button/etalons/FAB is opened with two speed dial actions,label='Add Row',icon='home' (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/button/etalons/FAB with grid, position.of is #grid, after scrolling (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/button/etalons/FAB with grid, position.of is #grid, after scrolling (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2600c7a6aa84
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/button/etalons/FAB with grid, position.of is #grid, after scrolling (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/button/etalons/FAB with grid, position.of is #grid, before scrolling (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/button/etalons/FAB with grid, position.of is #grid, before scrolling (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7c7b7d8f5907
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/button/etalons/FAB with grid, position.of is #grid, before scrolling (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/button/etalons/FAB with grid, position.of is undefined, after scrolling (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/button/etalons/FAB with grid, position.of is undefined, after scrolling (fluent-next.blue.light).png
new file mode 100644
index 000000000000..622325af25fb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/button/etalons/FAB with grid, position.of is undefined, after scrolling (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/button/etalons/FAB with grid, position.of is undefined, before scrolling (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/button/etalons/FAB with grid, position.of is undefined, before scrolling (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a758a524b8bd
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/button/etalons/FAB with grid, position.of is undefined, before scrolling (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/button/etalons/FAB with one speed dial action button,label='',icon='' (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/button/etalons/FAB with one speed dial action button,label='',icon='' (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cb0d09aee9a5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/button/etalons/FAB with one speed dial action button,label='',icon='' (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/button/etalons/FAB with one speed dial action button,label='',icon='home' (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/button/etalons/FAB with one speed dial action button,label='',icon='home' (fluent-next.blue.light).png
new file mode 100644
index 000000000000..32b586075af5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/button/etalons/FAB with one speed dial action button,label='',icon='home' (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/button/etalons/FAB with one speed dial action button,label='Add Row',icon='' (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/button/etalons/FAB with one speed dial action button,label='Add Row',icon='' (fluent-next.blue.light).png
new file mode 100644
index 000000000000..123503240d19
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/button/etalons/FAB with one speed dial action button,label='Add Row',icon='' (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/button/etalons/FAB with one speed dial action button,label='Add Row',icon='home' (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/button/etalons/FAB with one speed dial action button,label='Add Row',icon='home' (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ce239567791a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/button/etalons/FAB with one speed dial action button,label='Add Row',icon='home' (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/button/etalons/FAB with two speed dial action buttons (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/button/etalons/FAB with two speed dial action buttons (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3573ec942a0f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/button/etalons/FAB with two speed dial action buttons (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/buttonGroup/etalons/ButtonGroup styling (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/buttonGroup/etalons/ButtonGroup styling (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e192fdadd61e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/buttonGroup/etalons/ButtonGroup styling (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/contextMenu/etalons/ContextMenu items render (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/contextMenu/etalons/ContextMenu items render (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e30addea36c3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/contextMenu/etalons/ContextMenu items render (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/contextMenu/etalons/ContextMenu scrolling (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/contextMenu/etalons/ContextMenu scrolling (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f1e298e73a0e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/contextMenu/etalons/ContextMenu scrolling (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/contextMenu/etalons/ContextMenu selected focused item (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/contextMenu/etalons/ContextMenu selected focused item (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bf8d086a9551
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/contextMenu/etalons/ContextMenu selected focused item (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer hidden (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer hidden (fluent-next.blue.light).png
new file mode 100644
index 000000000000..226d2ba403ce
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer hidden (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer z-index, Menu inside drawer, shading=true_container (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer z-index, Menu inside drawer, shading=true_container (fluent-next.blue.light).png
new file mode 100644
index 000000000000..98cb29cbf0e9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer z-index, Menu inside drawer, shading=true_container (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer z-index, Menu inside drawer, shading=true_popup (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer z-index, Menu inside drawer, shading=true_popup (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e97805f0685c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer z-index, Menu inside drawer, shading=true_popup (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer z-index, Menu outside drawer, shading=true_container (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer z-index, Menu outside drawer, shading=true_container (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ea1b5358d6e0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer z-index, Menu outside drawer, shading=true_container (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer z-index, Menu outside drawer, shading=true_popup (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer z-index, Menu outside drawer, shading=true_popup (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c904e87fd6cb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer z-index, Menu outside drawer, shading=true_popup (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer z-index, SelectBox inside drawer, shading=true_container (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer z-index, SelectBox inside drawer, shading=true_container (fluent-next.blue.light).png
new file mode 100644
index 000000000000..29e56888af70
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer z-index, SelectBox inside drawer, shading=true_container (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer z-index, SelectBox inside drawer, shading=true_popup (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer z-index, SelectBox inside drawer, shading=true_popup (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7fb3ee0480c5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer z-index, SelectBox inside drawer, shading=true_popup (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer z-index, SelectBox outside drawer, shading=true_container (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer z-index, SelectBox outside drawer, shading=true_container (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3598ca11486b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer z-index, SelectBox outside drawer, shading=true_container (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer z-index, SelectBox outside drawer, shading=true_popup (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer z-index, SelectBox outside drawer, shading=true_popup (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4d899efe518d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer z-index, SelectBox outside drawer, shading=true_popup (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer, openedStateMode=overlap, shading=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer, openedStateMode=overlap, shading=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..491084388d11
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer, openedStateMode=overlap, shading=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer, openedStateMode=push, shading=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer, openedStateMode=push, shading=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..659647bd252d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer, openedStateMode=push, shading=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer, openedStateMode=shrink, shading=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer, openedStateMode=shrink, shading=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..713cfa0bad2b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer, openedStateMode=shrink, shading=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer, position=bottom, shading=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer, position=bottom, shading=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c24f92491869
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer, position=bottom, shading=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer, position=left, shading=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer, position=left, shading=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..713cfa0bad2b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer, position=left, shading=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer, position=right, shading=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer, position=right, shading=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0a54586b2a4b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer, position=right, shading=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer, position=top, shading=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer, position=top, shading=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0e16ce3131c0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/drawer/etalons/Drawer, position=top, shading=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/Align items,lblMode=outside,alignInAllGrp=false,alignInGrp=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Align items,lblMode=outside,alignInAllGrp=false,alignInGrp=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5d31b3bbc4a6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Align items,lblMode=outside,alignInAllGrp=false,alignInGrp=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/Align items,lblMode=outside,alignInAllGrp=false,alignInGrp=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Align items,lblMode=outside,alignInAllGrp=false,alignInGrp=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3d516d44cc1d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Align items,lblMode=outside,alignInAllGrp=false,alignInGrp=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/Align items,lblMode=outside,alignInAllGrp=true,alignInGrp=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Align items,lblMode=outside,alignInAllGrp=true,alignInGrp=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5d31b3bbc4a6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Align items,lblMode=outside,alignInAllGrp=true,alignInGrp=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/Align items,lblMode=outside,alignInAllGrp=true,alignInGrp=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Align items,lblMode=outside,alignInAllGrp=true,alignInGrp=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5ce186397400
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Align items,lblMode=outside,alignInAllGrp=true,alignInGrp=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form color of the mark (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form color of the mark (fluent-next.blue.light).png
new file mode 100644
index 000000000000..013660a6e63d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form color of the mark (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form item padding with screenByWidth=lg (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form item padding with screenByWidth=lg (fluent-next.blue.light).png
new file mode 100644
index 000000000000..341d6dc20c16
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form item padding with screenByWidth=lg (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form item padding with screenByWidth=md (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form item padding with screenByWidth=md (fluent-next.blue.light).png
new file mode 100644
index 000000000000..341d6dc20c16
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form item padding with screenByWidth=md (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form item padding with screenByWidth=xs (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form item padding with screenByWidth=xs (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a68ced029595
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form item padding with screenByWidth=xs (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form labels width after render in invisible container (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form labels width after render in invisible container (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ef0aca034a92
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form labels width after render in invisible container (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form with labelLocation=left (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form with labelLocation=left (fluent-next.blue.light).png
new file mode 100644
index 000000000000..26b8025fb167
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form with labelLocation=left (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form with labelLocation=right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form with labelLocation=right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d7981afbbbda
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form with labelLocation=right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form with labelLocation=top (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form with labelLocation=top (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e0e663cd293f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form with labelLocation=top (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=false,lMode=floating,lLoc=left (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=false,lMode=floating,lLoc=left (fluent-next.blue.light).png
new file mode 100644
index 000000000000..506f4e208838
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=false,lMode=floating,lLoc=left (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=false,lMode=floating,lLoc=right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=false,lMode=floating,lLoc=right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e48851387c19
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=false,lMode=floating,lLoc=right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=false,lMode=floating,lLoc=top (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=false,lMode=floating,lLoc=top (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c864a603fad6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=false,lMode=floating,lLoc=top (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=false,lMode=hidden,lLoc=left (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=false,lMode=hidden,lLoc=left (fluent-next.blue.light).png
new file mode 100644
index 000000000000..79d9fc45b56a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=false,lMode=hidden,lLoc=left (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=false,lMode=hidden,lLoc=right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=false,lMode=hidden,lLoc=right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7240905fb04b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=false,lMode=hidden,lLoc=right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=false,lMode=hidden,lLoc=top (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=false,lMode=hidden,lLoc=top (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2120da44b55b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=false,lMode=hidden,lLoc=top (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=false,lMode=outside,lLoc=left (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=false,lMode=outside,lLoc=left (fluent-next.blue.light).png
new file mode 100644
index 000000000000..79d9fc45b56a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=false,lMode=outside,lLoc=left (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=false,lMode=outside,lLoc=right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=false,lMode=outside,lLoc=right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7240905fb04b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=false,lMode=outside,lLoc=right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=false,lMode=outside,lLoc=top (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=false,lMode=outside,lLoc=top (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2120da44b55b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=false,lMode=outside,lLoc=top (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=false,lMode=static,lLoc=left (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=false,lMode=static,lLoc=left (fluent-next.blue.light).png
new file mode 100644
index 000000000000..599f0f0a64dd
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=false,lMode=static,lLoc=left (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=false,lMode=static,lLoc=right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=false,lMode=static,lLoc=right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1bcd2b4c7ab8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=false,lMode=static,lLoc=right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=false,lMode=static,lLoc=top (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=false,lMode=static,lLoc=top (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b99d6f0e91ae
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=false,lMode=static,lLoc=top (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=true,lMode=floating,lLoc=left (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=true,lMode=floating,lLoc=left (fluent-next.blue.light).png
new file mode 100644
index 000000000000..60e6fe6180a4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=true,lMode=floating,lLoc=left (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=true,lMode=floating,lLoc=right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=true,lMode=floating,lLoc=right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d3b044f32b7f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=true,lMode=floating,lLoc=right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=true,lMode=floating,lLoc=top (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=true,lMode=floating,lLoc=top (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d094f473b94c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=true,lMode=floating,lLoc=top (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=true,lMode=hidden,lLoc=left (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=true,lMode=hidden,lLoc=left (fluent-next.blue.light).png
new file mode 100644
index 000000000000..abec2302904b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=true,lMode=hidden,lLoc=left (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=true,lMode=hidden,lLoc=right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=true,lMode=hidden,lLoc=right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..118a30565f29
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=true,lMode=hidden,lLoc=right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=true,lMode=hidden,lLoc=top (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=true,lMode=hidden,lLoc=top (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d2dd271d9d58
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=true,lMode=hidden,lLoc=top (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=true,lMode=outside,lLoc=left (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=true,lMode=outside,lLoc=left (fluent-next.blue.light).png
new file mode 100644
index 000000000000..abec2302904b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=true,lMode=outside,lLoc=left (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=true,lMode=outside,lLoc=right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=true,lMode=outside,lLoc=right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..118a30565f29
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=true,lMode=outside,lLoc=right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=true,lMode=outside,lLoc=top (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=true,lMode=outside,lLoc=top (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d2dd271d9d58
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=true,lMode=outside,lLoc=top (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=true,lMode=static,lLoc=left (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=true,lMode=static,lLoc=left (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ff2ddf970fb1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=true,lMode=static,lLoc=left (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=true,lMode=static,lLoc=right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=true,lMode=static,lLoc=right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d593d3fecd1f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=true,lMode=static,lLoc=right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=true,lMode=static,lLoc=top (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=true,lMode=static,lLoc=top (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ba3a57a62b03
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Form,rtl=true,lMode=static,lLoc=top (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/Group caption template (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Group caption template (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6c3cf0a7bff4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Group caption template (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/Item label position properties, labelMode=outside (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Item label position properties, labelMode=outside (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2a26112230de
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/Item label position properties, labelMode=outside (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/SimpleItem,item1_cSpan_1,item2_cSpan_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/SimpleItem,item1_cSpan_1,item2_cSpan_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..de29b6244ef2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/SimpleItem,item1_cSpan_1,item2_cSpan_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/SimpleItem,item1_cSpan_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/SimpleItem,item1_cSpan_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e05700243719
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/SimpleItem,item1_cSpan_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/SimpleItem,item1_cSpan_2,item2_cSpan_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/SimpleItem,item1_cSpan_2,item2_cSpan_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4f53300ced5a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/SimpleItem,item1_cSpan_2,item2_cSpan_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/SimpleItem,item1_cSpan_2,item2_cSpan_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/SimpleItem,item1_cSpan_2,item2_cSpan_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d9681285509a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/SimpleItem,item1_cSpan_2,item2_cSpan_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/TabbedItem (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/TabbedItem (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b7b4d801cf1d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/TabbedItem (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/colCount,rtl_false,itemsCount_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/colCount,rtl_false,itemsCount_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..81f0b82f76df
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/colCount,rtl_false,itemsCount_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/colCount,rtl_false,itemsCount_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/colCount,rtl_false,itemsCount_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7b3d18bff994
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/colCount,rtl_false,itemsCount_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/colCount,rtl_false,itemsCount_3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/colCount,rtl_false,itemsCount_3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d88d71de870b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/colCount,rtl_false,itemsCount_3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/colCount,rtl_false,itemsCount_4 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/colCount,rtl_false,itemsCount_4 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0fbc08afb7c4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/colCount,rtl_false,itemsCount_4 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/colCount,rtl_false,itemsCount_5 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/colCount,rtl_false,itemsCount_5 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8a324e72d804
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/colCount,rtl_false,itemsCount_5 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/colCount,rtl_false,itemsCount_6 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/colCount,rtl_false,itemsCount_6 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1d7d8b75eba6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/colCount,rtl_false,itemsCount_6 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/colCount,rtl_true,itemsCount_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/colCount,rtl_true,itemsCount_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0a2b4ce6d596
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/colCount,rtl_true,itemsCount_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/colCount,rtl_true,itemsCount_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/colCount,rtl_true,itemsCount_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..21e8409e4c4f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/colCount,rtl_true,itemsCount_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/colCount,rtl_true,itemsCount_3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/colCount,rtl_true,itemsCount_3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4fbbd1fef6e6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/colCount,rtl_true,itemsCount_3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/colCount,rtl_true,itemsCount_4 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/colCount,rtl_true,itemsCount_4 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0108cb3d2210
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/colCount,rtl_true,itemsCount_4 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/colCount,rtl_true,itemsCount_5 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/colCount,rtl_true,itemsCount_5 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4b126baa5970
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/colCount,rtl_true,itemsCount_5 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/colCount,rtl_true,itemsCount_6 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/colCount,rtl_true,itemsCount_6 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ba3da51d5ac3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/colCount,rtl_true,itemsCount_6 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/form/etalons/form_validation_errors_after_resize (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/form/etalons/form_validation_errors_after_resize (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dcd8d7ed873d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/form/etalons/form_validation_errors_after_resize (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/gallery/etalons/Focused gallery. showIndicator=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/gallery/etalons/Focused gallery. showIndicator=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ab31ff8d5beb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/gallery/etalons/Focused gallery. showIndicator=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/gallery/etalons/Focused gallery. showIndicator=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/gallery/etalons/Focused gallery. showIndicator=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6aec1b72cd9b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/gallery/etalons/Focused gallery. showIndicator=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/gallery/etalons/Gallery. showIndicator=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/gallery/etalons/Gallery. showIndicator=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b2a5739d6644
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/gallery/etalons/Gallery. showIndicator=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/gallery/etalons/Gallery. showIndicator=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/gallery/etalons/Gallery. showIndicator=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6aec1b72cd9b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/gallery/etalons/Gallery. showIndicator=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/list/etalons/Grouped list appearance with template (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/list/etalons/Grouped list appearance with template (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3918ea9cd460
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/list/etalons/Grouped list appearance with template (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/list/etalons/Grouped list appearance, header focused (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/list/etalons/Grouped list appearance, header focused (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8d5dffa0b5fe
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/list/etalons/Grouped list appearance, header focused (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/list/etalons/Grouped list appearance, item focused, header hovered (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/list/etalons/Grouped list appearance, item focused, header hovered (fluent-next.blue.light).png
new file mode 100644
index 000000000000..95a264f813bc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/list/etalons/Grouped list appearance, item focused, header hovered (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/list/etalons/Grouped list appearance,collapsibleGroups=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/list/etalons/Grouped list appearance,collapsibleGroups=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..214f20d090e6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/list/etalons/Grouped list appearance,collapsibleGroups=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/list/etalons/List delete button when item is focused (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/list/etalons/List delete button when item is focused (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d33bac136a02
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/list/etalons/List delete button when item is focused (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/list/etalons/List icon in button when item is focused (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/list/etalons/List icon in button when item is focused (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e23e4ee90829
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/list/etalons/List icon in button when item is focused (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/list/etalons/List loading with first items invisible (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/list/etalons/List loading with first items invisible (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d4b3cfc7e40f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/list/etalons/List loading with first items invisible (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/list/etalons/List loading with last items invisible (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/list/etalons/List loading with last items invisible (fluent-next.blue.light).png
new file mode 100644
index 000000000000..10a2e32fc7ed
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/list/etalons/List loading with last items invisible (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/list/etalons/List loading with middle items invisible (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/list/etalons/List loading with middle items invisible (fluent-next.blue.light).png
new file mode 100644
index 000000000000..75e763d4a2cc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/list/etalons/List loading with middle items invisible (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/list/etalons/List loading with part items invisible on loaded page (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/list/etalons/List loading with part items invisible on loaded page (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9d4071766c6d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/list/etalons/List loading with part items invisible on loaded page (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/list/etalons/List with search (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/list/etalons/List with search (fluent-next.blue.light).png
new file mode 100644
index 000000000000..22cf2373d3ae
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/list/etalons/List with search (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu delimiter bottom collision, orientation=horizontal (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu delimiter bottom collision, orientation=horizontal (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cce541b83c93
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu delimiter bottom collision, orientation=horizontal (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu delimiter bottom collision, orientation=vertical (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu delimiter bottom collision, orientation=vertical (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d28534cd01fd
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu delimiter bottom collision, orientation=vertical (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu delimiter bottom right collision, orientation=horizontal (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu delimiter bottom right collision, orientation=horizontal (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f8b4096cec0c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu delimiter bottom right collision, orientation=horizontal (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu delimiter bottom right collision, orientation=vertical (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu delimiter bottom right collision, orientation=vertical (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6a2e30079c4c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu delimiter bottom right collision, orientation=vertical (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu delimiter right collision, orientation=horizontal (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu delimiter right collision, orientation=horizontal (fluent-next.blue.light).png
new file mode 100644
index 000000000000..31e969b05818
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu delimiter right collision, orientation=horizontal (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu delimiter right collision, orientation=vertical (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu delimiter right collision, orientation=vertical (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e7444718eca3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu delimiter right collision, orientation=vertical (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu delimiter, menu as toolbar item (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu delimiter, menu as toolbar item (fluent-next.blue.light).png
new file mode 100644
index 000000000000..05fce336ddeb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu delimiter, menu as toolbar item (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu delimiter, orientation=horizontal (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu delimiter, orientation=horizontal (fluent-next.blue.light).png
new file mode 100644
index 000000000000..877a8e6e6e33
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu delimiter, orientation=horizontal (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu delimiter, orientation=horizontal, wide submenu (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu delimiter, orientation=horizontal, wide submenu (fluent-next.blue.light).png
new file mode 100644
index 000000000000..829b0de68374
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu delimiter, orientation=horizontal, wide submenu (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu delimiter, orientation=vertical (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu delimiter, orientation=vertical (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8e967468eae6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu delimiter, orientation=vertical (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu item with link and icon focused, adaptivityEnabled=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu item with link and icon focused, adaptivityEnabled=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6fdba5f2a380
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu item with link and icon focused, adaptivityEnabled=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu item with link and icon focused, adaptivityEnabled=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu item with link and icon focused, adaptivityEnabled=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4db0572ed34d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu item with link and icon focused, adaptivityEnabled=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu item with link focused, adaptivityEnabled=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu item with link focused, adaptivityEnabled=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1c28a926d78b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu item with link focused, adaptivityEnabled=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu item with link focused, adaptivityEnabled=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu item with link focused, adaptivityEnabled=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5b945f44f1fa
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu item with link focused, adaptivityEnabled=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu render items (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu render items (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6c74608e6043
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu render items (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu scrolling (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu scrolling (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9cb9080c12ef
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu scrolling (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu selected focused item (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu selected focused item (fluent-next.blue.light).png
new file mode 100644
index 000000000000..41b3bb03b2d3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/menu/etalons/Menu selected focused item (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Grid with scrollable wrapped in td,useNative=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Grid with scrollable wrapped in td,useNative=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d510bd77ec18
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Grid with scrollable wrapped in td,useNative=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Grid with scrollable wrapped in td,useNative=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Grid with scrollable wrapped in td,useNative=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d510bd77ec18
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Grid with scrollable wrapped in td,useNative=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position after show, useNative=false,rtl=false,useSimScrollbar=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position after show, useNative=false,rtl=false,useSimScrollbar=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e78bc3e6451e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position after show, useNative=false,rtl=false,useSimScrollbar=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position after show, useNative=false,rtl=false,useSimScrollbar=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position after show, useNative=false,rtl=false,useSimScrollbar=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e78bc3e6451e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position after show, useNative=false,rtl=false,useSimScrollbar=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position after show, useNative=false,rtl=true,useSimScrollbar=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position after show, useNative=false,rtl=true,useSimScrollbar=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9b3488425466
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position after show, useNative=false,rtl=true,useSimScrollbar=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position after show, useNative=false,rtl=true,useSimScrollbar=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position after show, useNative=false,rtl=true,useSimScrollbar=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9b3488425466
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position after show, useNative=false,rtl=true,useSimScrollbar=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position after show, useNative=true,rtl=false,useSimScrollbar=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position after show, useNative=true,rtl=false,useSimScrollbar=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..babc5ba91e09
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position after show, useNative=true,rtl=false,useSimScrollbar=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position after show, useNative=true,rtl=false,useSimScrollbar=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position after show, useNative=true,rtl=false,useSimScrollbar=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..974342016900
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position after show, useNative=true,rtl=false,useSimScrollbar=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position after show, useNative=true,rtl=true,useSimScrollbar=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position after show, useNative=true,rtl=true,useSimScrollbar=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..129ae1fcd600
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position after show, useNative=true,rtl=true,useSimScrollbar=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position after show, useNative=true,rtl=true,useSimScrollbar=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position after show, useNative=true,rtl=true,useSimScrollbar=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..974342016900
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position after show, useNative=true,rtl=true,useSimScrollbar=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position before hide, useNative=false,rtl=false,useSimScrollbar=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position before hide, useNative=false,rtl=false,useSimScrollbar=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e78bc3e6451e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position before hide, useNative=false,rtl=false,useSimScrollbar=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position before hide, useNative=false,rtl=false,useSimScrollbar=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position before hide, useNative=false,rtl=false,useSimScrollbar=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e78bc3e6451e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position before hide, useNative=false,rtl=false,useSimScrollbar=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position before hide, useNative=false,rtl=true,useSimScrollbar=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position before hide, useNative=false,rtl=true,useSimScrollbar=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9b3488425466
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position before hide, useNative=false,rtl=true,useSimScrollbar=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position before hide, useNative=false,rtl=true,useSimScrollbar=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position before hide, useNative=false,rtl=true,useSimScrollbar=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9b3488425466
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position before hide, useNative=false,rtl=true,useSimScrollbar=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position before hide, useNative=true,rtl=false,useSimScrollbar=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position before hide, useNative=true,rtl=false,useSimScrollbar=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..babc5ba91e09
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position before hide, useNative=true,rtl=false,useSimScrollbar=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position before hide, useNative=true,rtl=false,useSimScrollbar=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position before hide, useNative=true,rtl=false,useSimScrollbar=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b3a746b5a9ac
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position before hide, useNative=true,rtl=false,useSimScrollbar=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position before hide, useNative=true,rtl=true,useSimScrollbar=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position before hide, useNative=true,rtl=true,useSimScrollbar=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..129ae1fcd600
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position before hide, useNative=true,rtl=true,useSimScrollbar=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position before hide, useNative=true,rtl=true,useSimScrollbar=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position before hide, useNative=true,rtl=true,useSimScrollbar=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6a69970ad5a3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/Scroll position before hide, useNative=true,rtl=true,useSimScrollbar=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/ScrollToElement with scaling scale(1.5),direction=both (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/ScrollToElement with scaling scale(1.5),direction=both (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a8ae11cc4577
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/ScrollToElement with scaling scale(1.5),direction=both (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/ScrollToElement, element less container direction=both (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/ScrollToElement, element less container direction=both (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9bc59b2569ee
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/ScrollToElement, element less container direction=both (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/ScrollToElement, element more container direction=both (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/ScrollToElement, element more container direction=both (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9c9b34ce6b49
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/scrollable/etalons/ScrollToElement, element more container direction=both (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Nested Splitter appearance, orientation='horizontal' (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Nested Splitter appearance, orientation='horizontal' (fluent-next.blue.light).png
new file mode 100644
index 000000000000..364a043076a0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Nested Splitter appearance, orientation='horizontal' (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Nested Splitter appearance, orientation='vertical' (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Nested Splitter appearance, orientation='vertical' (fluent-next.blue.light).png
new file mode 100644
index 000000000000..642fb0c3f83b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Nested Splitter appearance, orientation='vertical' (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter apearance - handle in active state (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter apearance - handle in active state (fluent-next.blue.light).png
new file mode 100644
index 000000000000..76f249bc51bd
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter apearance - handle in active state (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter apearance - handle in focused state (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter apearance - handle in focused state (fluent-next.blue.light).png
new file mode 100644
index 000000000000..76f249bc51bd
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter apearance - handle in focused state (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter apearance - handle in hover state (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter apearance - handle in hover state (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0a1be4479af3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter apearance - handle in hover state (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter apearance - handle in inactive state (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter apearance - handle in inactive state (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d2366fe7ca06
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter apearance - handle in inactive state (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter apearance - handle in normal state (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter apearance - handle in normal state (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dc64026c6012
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter apearance - handle in normal state (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter appearance, orientation='horizontal' (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter appearance, orientation='horizontal' (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dc64026c6012
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter appearance, orientation='horizontal' (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter appearance, orientation='vertical' (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter appearance, orientation='vertical' (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ca97825a1c7e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter appearance, orientation='vertical' (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter in tab content after window resize, pane_1.size=`100px` (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter in tab content after window resize, pane_1.size=`100px` (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5999b67d200e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter in tab content after window resize, pane_1.size=`100px` (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter in tab content, pane_1.size=`100px` (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter in tab content, pane_1.size=`100px` (fluent-next.blue.light).png
new file mode 100644
index 000000000000..abbc409aae95
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/splitter/etalons/Splitter in tab content, pane_1.size=`100px` (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Completed invalid step focused (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Completed invalid step focused (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e6ebc5e8a6e9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Completed invalid step focused (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Completed step focused (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Completed step focused (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f75d818d0f24
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Completed step focused (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Completed valid step focused (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Completed valid step focused (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b6d0b769ab88
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Completed valid step focused (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper 1st step selected,selectOnFocus=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper 1st step selected,selectOnFocus=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4e86efff884f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper 1st step selected,selectOnFocus=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper 1st step selected,selectOnFocus=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper 1st step selected,selectOnFocus=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4e86efff884f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper 1st step selected,selectOnFocus=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper disabled invalid step focused,selectOnFocus=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper disabled invalid step focused,selectOnFocus=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..024c1b34cdd7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper disabled invalid step focused,selectOnFocus=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper disabled invalid step focused,selectOnFocus=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper disabled invalid step focused,selectOnFocus=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4b7ac2f0a095
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper disabled invalid step focused,selectOnFocus=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper disabled step focused,selectOnFocus=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper disabled step focused,selectOnFocus=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..62da2c1e16a0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper disabled step focused,selectOnFocus=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper disabled step focused,selectOnFocus=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper disabled step focused,selectOnFocus=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a90907beaeb2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper disabled step focused,selectOnFocus=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper disabled valid step focused,selectOnFocus=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper disabled valid step focused,selectOnFocus=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1864856ae55f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper disabled valid step focused,selectOnFocus=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper disabled valid step focused,selectOnFocus=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper disabled valid step focused,selectOnFocus=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2596a6caf90b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper disabled valid step focused,selectOnFocus=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper invalid step focused,selectOnFocus=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper invalid step focused,selectOnFocus=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..22106136fc1d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper invalid step focused,selectOnFocus=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper invalid step selected,selectOnFocus=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper invalid step selected,selectOnFocus=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..914cda805f3b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper invalid step selected,selectOnFocus=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper last step focused,selectOnFocus=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper last step focused,selectOnFocus=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cf7cae11b9f2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper last step focused,selectOnFocus=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper last step selected,selectOnFocus=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper last step selected,selectOnFocus=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3a1d7533f68c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper last step selected,selectOnFocus=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper orient=horizontal (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper orient=horizontal (fluent-next.blue.light).png
new file mode 100644
index 000000000000..99576201c2f2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper orient=horizontal (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper orient=vertical (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper orient=vertical (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5f57e6f86ced
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper orient=vertical (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper text overflow orient=horizontal (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper text overflow orient=horizontal (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d8a80a2d080c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper text overflow orient=horizontal (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper text overflow orient=vertical (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper text overflow orient=vertical (fluent-next.blue.light).png
new file mode 100644
index 000000000000..783ae252b139
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper text overflow orient=vertical (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper valid step focused,selectOnFocus=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper valid step focused,selectOnFocus=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ac7dddf93eb8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper valid step focused,selectOnFocus=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper valid step selected,selectOnFocus=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper valid step selected,selectOnFocus=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..79800a1d8d64
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/stepper/etalons/Stepper valid step selected,selectOnFocus=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/Nested TabPanel borders appearance,tabsPos=bottom (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/Nested TabPanel borders appearance,tabsPos=bottom (fluent-next.blue.light).png
new file mode 100644
index 000000000000..aa8f19118a0a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/Nested TabPanel borders appearance,tabsPos=bottom (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/Nested TabPanel borders appearance,tabsPos=left (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/Nested TabPanel borders appearance,tabsPos=left (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c2a7adcf8d58
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/Nested TabPanel borders appearance,tabsPos=left (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/Nested TabPanel borders appearance,tabsPos=right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/Nested TabPanel borders appearance,tabsPos=right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dcd83b99fcfb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/Nested TabPanel borders appearance,tabsPos=right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/Nested TabPanel borders appearance,tabsPos=top (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/Nested TabPanel borders appearance,tabsPos=top (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2febfa8c594f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/Nested TabPanel borders appearance,tabsPos=top (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel borders with scrolling (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel borders with scrolling (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ea40fa4b8ee3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel borders with scrolling (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel borders without scrolling (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel borders without scrolling (fluent-next.blue.light).png
new file mode 100644
index 000000000000..12308f379d4f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel borders without scrolling (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel focus borders (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel focus borders (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6c49ad023cf1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel focus borders (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel item focus when clicking on multiview (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel item focus when clicking on multiview (fluent-next.blue.light).png
new file mode 100644
index 000000000000..39c509ab5690
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel item focus when clicking on multiview (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel left navigation button hovered (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel left navigation button hovered (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d7e83af081fa
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel left navigation button hovered (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel right navigation button hovered (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel right navigation button hovered (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e5fe57f55d74
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel right navigation button hovered (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel tabs min-width (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel tabs min-width (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9c3c7d25c31b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel tabs min-width (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel text-overflow when tabs wrapper width is limited (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel text-overflow when tabs wrapper width is limited (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fbb9f30ffd48
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel text-overflow when tabs wrapper width is limited (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel text-overflow when tabsPosition is left (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel text-overflow when tabsPosition is left (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fbf00927e9e1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel text-overflow when tabsPosition is left (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel with single tab, tabPosition=left (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel with single tab, tabPosition=left (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6f5d81c3e3be
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel with single tab, tabPosition=left (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel with single tab, tabPosition=right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel with single tab, tabPosition=right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..33469cb799cf
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel with single tab, tabPosition=right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel without focus,tabsPosition=bottom (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel without focus,tabsPosition=bottom (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1d751f3d6e92
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel without focus,tabsPosition=bottom (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel without focus,tabsPosition=left (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel without focus,tabsPosition=left (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8c3061029790
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel without focus,tabsPosition=left (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel without focus,tabsPosition=right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel without focus,tabsPosition=right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d6d638445b01
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel without focus,tabsPosition=right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel without focus,tabsPosition=top (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel without focus,tabsPosition=top (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5c7022bbeb48
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabPanel/etalons/TabPanel without focus,tabsPosition=top (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs background color (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs background color (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4ef96e2f86e8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs background color (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs disabled item focused (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs disabled item focused (fluent-next.blue.light).png
new file mode 100644
index 000000000000..895b0f660987
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs disabled item focused (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs icon position,rtl=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs icon position,rtl=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..56c639dea48d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs icon position,rtl=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs icon position,rtl=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs icon position,rtl=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1a96da3bc420
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs icon position,rtl=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs item active (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs item active (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c560c62c0241
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs item active (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs item focused (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs item focused (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7c0fb5a358ef
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs item focused (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs item hovered (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs item hovered (fluent-next.blue.light).png
new file mode 100644
index 000000000000..86d999013cf2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs item hovered (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs item selected, orientation=horizontal, stylingMode=primary (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs item selected, orientation=horizontal, stylingMode=primary (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f1f8dda2dab5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs item selected, orientation=horizontal, stylingMode=primary (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs item selected, orientation=horizontal, stylingMode=secondary (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs item selected, orientation=horizontal, stylingMode=secondary (fluent-next.blue.light).png
new file mode 100644
index 000000000000..64cf514d986b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs item selected, orientation=horizontal, stylingMode=secondary (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs item selected, orientation=vertical, stylingMode=primary (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs item selected, orientation=vertical, stylingMode=primary (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a3c3f93a13f7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs item selected, orientation=vertical, stylingMode=primary (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs item selected, orientation=vertical, stylingMode=secondary (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs item selected, orientation=vertical, stylingMode=secondary (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cfdbb5da60d2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs item selected, orientation=vertical, stylingMode=secondary (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs selected item active (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs selected item active (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dd85614dd423
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs selected item active (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs selected item hovered (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs selected item hovered (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1b6a600d4994
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs selected item hovered (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs text-overflow (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs text-overflow (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5f507532386d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs text-overflow (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs with width auto (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs with width auto (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a2835ffb26ab
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs with width auto (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs without focus (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs without focus (fluent-next.blue.light).png
new file mode 100644
index 000000000000..689e72a56daa
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/tabs/etalons/Tabs without focus (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar RTL focus border visible after keyboard navigation (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar RTL focus border visible after keyboard navigation (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8d1324538e6b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar RTL focus border visible after keyboard navigation (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar RTL no focus border after mouse click (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar RTL no focus border after mouse click (fluent-next.blue.light).png
new file mode 100644
index 000000000000..985cbdf58d88
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar RTL no focus border after mouse click (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttonGroup as custom template in menu (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttonGroup as custom template in menu (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6c80c743c2a1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttonGroup as custom template in menu (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttonGroup as custom template in menu active (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttonGroup as custom template in menu active (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c48fa589320e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttonGroup as custom template in menu active (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttonGroup as custom template in menu focused (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttonGroup as custom template in menu focused (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1c20e4fcfc2f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttonGroup as custom template in menu focused (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttonGroup as custom template in menu hover (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttonGroup as custom template in menu hover (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1c20e4fcfc2f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttonGroup as custom template in menu hover (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttonGroup in menu (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttonGroup in menu (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9d9c3de85f6b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttonGroup in menu (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttonGroup in menu active (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttonGroup in menu active (fluent-next.blue.light).png
new file mode 100644
index 000000000000..096208479971
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttonGroup in menu active (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttonGroup in menu focused (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttonGroup in menu focused (fluent-next.blue.light).png
new file mode 100644
index 000000000000..01cfca8eb75c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttonGroup in menu focused (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttonGroup in menu hover (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttonGroup in menu hover (fluent-next.blue.light).png
new file mode 100644
index 000000000000..01cfca8eb75c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttonGroup in menu hover (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttons as custom template in menu (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttons as custom template in menu (fluent-next.blue.light).png
new file mode 100644
index 000000000000..18dc1e109db5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttons as custom template in menu (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttons as custom template in menu active (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttons as custom template in menu active (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ee646e2e9455
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttons as custom template in menu active (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttons as custom template in menu focused (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttons as custom template in menu focused (fluent-next.blue.light).png
new file mode 100644
index 000000000000..84e3860ca8ba
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttons as custom template in menu focused (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttons as custom template in menu hover (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttons as custom template in menu hover (fluent-next.blue.light).png
new file mode 100644
index 000000000000..84e3860ca8ba
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttons as custom template in menu hover (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttons in menu (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttons in menu (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1874b0ea43c3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttons in menu (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttons in menu active (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttons in menu active (fluent-next.blue.light).png
new file mode 100644
index 000000000000..60278b6c36a5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttons in menu active (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttons in menu focused (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttons in menu focused (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a798d8f7e1ac
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttons in menu focused (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttons in menu hover (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttons in menu hover (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a798d8f7e1ac
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar buttons in menu hover (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar focus border on item after Arrow-Home-End navigation with disabled items (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar focus border on item after Arrow-Home-End navigation with disabled items (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ddc6b53b424f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar focus border on item after Arrow-Home-End navigation with disabled items (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar menu popup above container rtl=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar menu popup above container rtl=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a33d71e29f6e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar menu popup above container rtl=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar menu popup above container rtl=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar menu popup above container rtl=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..62f7c7f20dce
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar menu popup above container rtl=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar menu popup after window resize (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar menu popup after window resize (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cd6d47327091
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar menu popup after window resize (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar menu popup before window resize (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar menu popup before window resize (fluent-next.blue.light).png
new file mode 100644
index 000000000000..71856b1cf064
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar menu popup before window resize (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar menu popup collision with window border (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar menu popup collision with window border (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1c3472a2618b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar menu popup collision with window border (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar menu popup under container rtl=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar menu popup under container rtl=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..71856b1cf064
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar menu popup under container rtl=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar menu popup under container rtl=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar menu popup under container rtl=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..832db469f899
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar menu popup under container rtl=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar nested widgets render in multiline rtl=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar nested widgets render in multiline rtl=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ceef6405ac8f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar nested widgets render in multiline rtl=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar nested widgets render in multiline rtl=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar nested widgets render in multiline rtl=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4455fed08a53
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar nested widgets render in multiline rtl=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar widgets render rtl=true,items[]locateInMenu=always (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar widgets render rtl=true,items[]locateInMenu=always (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e0c23e12203d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar widgets render rtl=true,items[]locateInMenu=always (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar widgets render rtl=true,items[]locateInMenu=never (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar widgets render rtl=true,items[]locateInMenu=never (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1068a18db245
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar widgets render rtl=true,items[]locateInMenu=never (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar widgets render,items[]locateInMenu=always (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar widgets render,items[]locateInMenu=always (fluent-next.blue.light).png
new file mode 100644
index 000000000000..62ae838d2fa1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar widgets render,items[]locateInMenu=always (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar widgets render,items[]locateInMenu=never (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar widgets render,items[]locateInMenu=never (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7ab0ee1b1109
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/toolbar/etalons/Toolbar widgets render,items[]locateInMenu=never (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/TreeView scrollable has correct height (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/TreeView scrollable has correct height (fluent-next.blue.light).png
new file mode 100644
index 000000000000..59e69c48780a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/TreeView scrollable has correct height (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/TreeView selection showCheckBoxesMode=none,rtl=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/TreeView selection showCheckBoxesMode=none,rtl=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..18ea17ca0d16
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/TreeView selection showCheckBoxesMode=none,rtl=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/TreeView selection showCheckBoxesMode=none,rtl=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/TreeView selection showCheckBoxesMode=none,rtl=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..281a27859bd6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/TreeView selection showCheckBoxesMode=none,rtl=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/TreeView selection showCheckBoxesMode=normal,rtl=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/TreeView selection showCheckBoxesMode=normal,rtl=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..685e21295e67
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/TreeView selection showCheckBoxesMode=normal,rtl=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/TreeView selection showCheckBoxesMode=normal,rtl=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/TreeView selection showCheckBoxesMode=normal,rtl=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..201ce86a7a37
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/TreeView selection showCheckBoxesMode=normal,rtl=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/TreeView selection showCheckBoxesMode=selectAll,rtl=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/TreeView selection showCheckBoxesMode=selectAll,rtl=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c9feed12f4f6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/TreeView selection showCheckBoxesMode=selectAll,rtl=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/TreeView selection showCheckBoxesMode=selectAll,rtl=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/TreeView selection showCheckBoxesMode=selectAll,rtl=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dcf802f12811
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/TreeView selection showCheckBoxesMode=selectAll,rtl=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/Treeview checked CheckBox focus (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/Treeview checked CheckBox focus (fluent-next.blue.light).png
new file mode 100644
index 000000000000..07ed77d1d449
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/Treeview checked CheckBox focus (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/Treeview indeterminate CheckBox focus (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/Treeview indeterminate CheckBox focus (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4ff7e3a0174a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/Treeview indeterminate CheckBox focus (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/Treeview unchecked CheckBox focus (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/Treeview unchecked CheckBox focus (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5c5e81558011
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/Treeview unchecked CheckBox focus (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/Treeview with custom icons showCheckBoxesMode=none (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/Treeview with custom icons showCheckBoxesMode=none (fluent-next.blue.light).png
new file mode 100644
index 000000000000..01ac90adb37f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/Treeview with custom icons showCheckBoxesMode=none (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/Treeview with custom icons showCheckBoxesMode=normal (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/Treeview with custom icons showCheckBoxesMode=normal (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cdd575b4f735
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/Treeview with custom icons showCheckBoxesMode=normal (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/a11y/etalons/month_day_number_contrast (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/a11y/etalons/month_day_number_contrast (fluent-next.blue.light).png
new file mode 100644
index 000000000000..78dd9a535356
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/a11y/etalons/month_day_number_contrast (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/agenda-groups-adaptive-rtl=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/agenda-groups-adaptive-rtl=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5fd1bcc09b1b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/agenda-groups-adaptive-rtl=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/agenda-groups-adaptive-rtl=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/agenda-groups-adaptive-rtl=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2c4740dca96b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/agenda-groups-adaptive-rtl=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/agenda-layout-appointment-state-click (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/agenda-layout-appointment-state-click (fluent-next.blue.light).png
new file mode 100644
index 000000000000..93a002add498
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/agenda-layout-appointment-state-click (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/agenda-layout-appointment-state-hover (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/agenda-layout-appointment-state-hover (fluent-next.blue.light).png
new file mode 100644
index 000000000000..db7761ed4759
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/agenda-layout-appointment-state-hover (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/agenda-layout-groups-rtl=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/agenda-layout-groups-rtl=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dd3d1c1e84f9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/agenda-layout-groups-rtl=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/agenda-layout-groups-rtl=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/agenda-layout-groups-rtl=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9e8830b0579c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/agenda-layout-groups-rtl=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/agenda-layout-rtl=false-resources=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/agenda-layout-rtl=false-resources=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..eae9cfa9b646
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/agenda-layout-rtl=false-resources=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/agenda-layout-rtl=false-resources=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/agenda-layout-rtl=false-resources=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1cc2312d8f85
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/agenda-layout-rtl=false-resources=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/agenda-layout-rtl=true-resources=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/agenda-layout-rtl=true-resources=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..07311ebbc5a3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/agenda-layout-rtl=true-resources=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/agenda-layout-rtl=true-resources=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/agenda-layout-rtl=true-resources=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..eaa18464b150
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/agenda-layout-rtl=true-resources=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/agenda-without-groups-adaptive-rtl=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/agenda-without-groups-adaptive-rtl=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b28bb4999165
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/agenda-without-groups-adaptive-rtl=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/agenda-without-groups-adaptive-rtl=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/agenda-without-groups-adaptive-rtl=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9fbfc8d8d532
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/agenda-without-groups-adaptive-rtl=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/switch-to-agenda-without-appointments (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/switch-to-agenda-without-appointments (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dea6e634a15c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/agenda/etalons/switch-to-agenda-without-appointments (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form (recurring=false,allDay=false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form (recurring=false,allDay=false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a28fedcd59ed
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form (recurring=false,allDay=false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form (recurring=false,allDay=true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form (recurring=false,allDay=true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..12baa00e1988
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form (recurring=false,allDay=true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form (recurring=true,allDay=false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form (recurring=true,allDay=false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6542337fb793
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form (recurring=true,allDay=false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form (recurring=true,allDay=true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form (recurring=true,allDay=true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..363c7d53c4b0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form (recurring=true,allDay=true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__icons-mode-none (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__icons-mode-none (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3c66751fec90
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__icons-mode-none (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__mobile (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__mobile (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ff2ac33c30aa
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__mobile (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__readonly (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__readonly (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6f7fa50a66b3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__readonly (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__resource-with-multiple-selection (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__resource-with-multiple-selection (fluent-next.blue.light).png
new file mode 100644
index 000000000000..37c1750708c7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__resource-with-multiple-selection (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__startDate-calendar-opened (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__startDate-calendar-opened (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1fe7906ac2b1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__startDate-calendar-opened (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__with-labelMode-static (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__with-labelMode-static (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c382909ab000
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__with-labelMode-static (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__with-resources-and-timezones (recurring=false,allDay=false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__with-resources-and-timezones (recurring=false,allDay=false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..719259e19897
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__with-resources-and-timezones (recurring=false,allDay=false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__with-resources-and-timezones (recurring=false,allDay=true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__with-resources-and-timezones (recurring=false,allDay=true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4fc5cae42e14
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__with-resources-and-timezones (recurring=false,allDay=true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__with-resources-and-timezones (recurring=true,allDay=false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__with-resources-and-timezones (recurring=true,allDay=false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e53a46921468
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__with-resources-and-timezones (recurring=true,allDay=false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__with-resources-and-timezones (recurring=true,allDay=true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__with-resources-and-timezones (recurring=true,allDay=true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0674730680ae
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__with-resources-and-timezones (recurring=true,allDay=true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__with-resources-with-icons (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__with-resources-with-icons (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0d27de6e4946
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__with-resources-with-icons (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__daily (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__daily (fluent-next.blue.light).png
new file mode 100644
index 000000000000..75fe72aec6d5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__daily (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__daily (fluent-next.blue.light)_mask.png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__daily (fluent-next.blue.light)_mask.png
new file mode 100644
index 000000000000..35ea1968a61c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__daily (fluent-next.blue.light)_mask.png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__hourly (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__hourly (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0bffd0e5445b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__hourly (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__hourly (fluent-next.blue.light)_mask.png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__hourly (fluent-next.blue.light)_mask.png
new file mode 100644
index 000000000000..35ea1968a61c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__hourly (fluent-next.blue.light)_mask.png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__mobile (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__mobile (fluent-next.blue.light).png
new file mode 100644
index 000000000000..76d991047db5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__mobile (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__mobile (fluent-next.blue.light)_mask.png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__mobile (fluent-next.blue.light)_mask.png
new file mode 100644
index 000000000000..02ad54490416
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__mobile (fluent-next.blue.light)_mask.png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__monthly (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__monthly (fluent-next.blue.light).png
new file mode 100644
index 000000000000..286284c20700
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__monthly (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__monthly (fluent-next.blue.light)_mask.png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__monthly (fluent-next.blue.light)_mask.png
new file mode 100644
index 000000000000..8b94200caf06
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__monthly (fluent-next.blue.light)_mask.png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__readonly (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__readonly (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6e0b2adf0f5c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__readonly (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__readonly (fluent-next.blue.light)_mask.png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__readonly (fluent-next.blue.light)_mask.png
new file mode 100644
index 000000000000..bf1f8ff5c902
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__readonly (fluent-next.blue.light)_mask.png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__weekly (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__weekly (fluent-next.blue.light).png
new file mode 100644
index 000000000000..198fda6b1542
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__weekly (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__weekly (fluent-next.blue.light)_mask.png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__weekly (fluent-next.blue.light)_mask.png
new file mode 100644
index 000000000000..bf1f8ff5c902
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__weekly (fluent-next.blue.light)_mask.png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-icons (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-icons (fluent-next.blue.light).png
new file mode 100644
index 000000000000..870b104f1d07
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-icons (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-icons (fluent-next.blue.light)_mask.png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-icons (fluent-next.blue.light)_mask.png
new file mode 100644
index 000000000000..a05e78aa6f4f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-icons (fluent-next.blue.light)_mask.png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-labelMode-static (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-labelMode-static (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1051071d1e47
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-labelMode-static (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-labelMode-static (fluent-next.blue.light)_mask.png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-labelMode-static (fluent-next.blue.light)_mask.png
new file mode 100644
index 000000000000..444949756a45
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-labelMode-static (fluent-next.blue.light)_mask.png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__yearly (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__yearly (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6e1f83ee39c6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__yearly (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__yearly (fluent-next.blue.light)_mask.png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__yearly (fluent-next.blue.light)_mask.png
new file mode 100644
index 000000000000..689c643dcbe8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__yearly (fluent-next.blue.light)_mask.png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-settings-button__focus-state (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-settings-button__focus-state (fluent-next.blue.light).png
new file mode 100644
index 000000000000..25ebd232ee57
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-settings-button__focus-state (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/allDay-unsorted-datasource (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/allDay-unsorted-datasource (fluent-next.blue.light).png
new file mode 100644
index 000000000000..140e3ab06360
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/allDay-unsorted-datasource (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight-next-month_all-day-appt_view=timelineDay_first (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight-next-month_all-day-appt_view=timelineDay_first (fluent-next.blue.light).png
new file mode 100644
index 000000000000..819c2d68ffea
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight-next-month_all-day-appt_view=timelineDay_first (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight-next-month_all-day-appt_view=timelineDay_second (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight-next-month_all-day-appt_view=timelineDay_second (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d0b7da964cfe
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight-next-month_all-day-appt_view=timelineDay_second (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight-next-month_all-day-appt_view=timelineMonth_first (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight-next-month_all-day-appt_view=timelineMonth_first (fluent-next.blue.light).png
new file mode 100644
index 000000000000..77330706b938
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight-next-month_all-day-appt_view=timelineMonth_first (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight-next-month_all-day-appt_view=timelineMonth_second (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight-next-month_all-day-appt_view=timelineMonth_second (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1749b9bf192a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight-next-month_all-day-appt_view=timelineMonth_second (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=month_start=6_end=18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6cbc33dd4407
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=month_start=6_end=18 (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=month_start=6_end=undefined (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6cbc33dd4407
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=month_start=6_end=undefined (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=month_start=undefined_end=18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6cbc33dd4407
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=month_start=undefined_end=18 (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=month_start=undefined_end=undefined (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6cbc33dd4407
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=month_start=undefined_end=undefined (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=timelineDay_start=6_end=18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=timelineDay_start=6_end=18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..26103d418fdd
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=timelineDay_start=6_end=18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=timelineDay_start=6_end=undefined (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=timelineDay_start=6_end=undefined (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1de4dfa37dd4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=timelineDay_start=6_end=undefined (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=timelineDay_start=undefined_end=18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=timelineDay_start=undefined_end=18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fe180ac223c9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=timelineDay_start=undefined_end=18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=timelineDay_start=undefined_end=undefined (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=timelineDay_start=undefined_end=undefined (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d1bdd83a099f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=timelineDay_start=undefined_end=undefined (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=timelineMonth_start=6_end=18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=timelineMonth_start=6_end=18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..634a44db0125
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=timelineMonth_start=6_end=18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=timelineMonth_start=6_end=undefined (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=timelineMonth_start=6_end=undefined (fluent-next.blue.light).png
new file mode 100644
index 000000000000..634a44db0125
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=timelineMonth_start=6_end=undefined (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=timelineMonth_start=undefined_end=18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=timelineMonth_start=undefined_end=18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..634a44db0125
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=timelineMonth_start=undefined_end=18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=timelineMonth_start=undefined_end=undefined (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=timelineMonth_start=undefined_end=undefined (fluent-next.blue.light).png
new file mode 100644
index 000000000000..634a44db0125
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=timelineMonth_start=undefined_end=undefined (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=week_start=6_end=18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=week_start=6_end=18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5b4b8b6fa03d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=week_start=6_end=18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=week_start=6_end=undefined (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=week_start=6_end=undefined (fluent-next.blue.light).png
new file mode 100644
index 000000000000..01445187888b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=week_start=6_end=undefined (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=week_start=undefined_end=18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=week_start=undefined_end=18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..916089b4a556
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=week_start=undefined_end=18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=week_start=undefined_end=undefined (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=week_start=undefined_end=undefined (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fab82ab47c3c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/midnight_all-day-appt_view=week_start=undefined_end=undefined (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/timeline-work-week_all-day_appointments_skip_weekend (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/timeline-work-week_all-day_appointments_skip_weekend (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8f8f857941e5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/timeline-work-week_all-day_appointments_skip_weekend (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/workweek_all-day_appointments_skip_weekend (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/workweek_all-day_appointments_skip_weekend (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a4b40fadef68
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/allDay/etalons/workweek_all-day_appointments_skip_weekend (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/etalons/adaptive_appts_view-month (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/etalons/adaptive_appts_view-month (fluent-next.blue.light).png
new file mode 100644
index 000000000000..facd3cad0d06
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/etalons/adaptive_appts_view-month (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/etalons/adaptive_appts_view-week (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/etalons/adaptive_appts_view-week (fluent-next.blue.light).png
new file mode 100644
index 000000000000..facd3cad0d06
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/etalons/adaptive_appts_view-week (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/etalons/adaptive_long-appts-without-all-day-panel_view-week (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/etalons/adaptive_long-appts-without-all-day-panel_view-week (fluent-next.blue.light).png
new file mode 100644
index 000000000000..475d80442e70
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/etalons/adaptive_long-appts-without-all-day-panel_view-week (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/etalons/multiday-appointment_month (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/etalons/multiday-appointment_month (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f22828b870ea
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/etalons/multiday-appointment_month (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/etalons/multiday-appointment_timelineMonth (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/etalons/multiday-appointment_timelineMonth (fluent-next.blue.light).png
new file mode 100644
index 000000000000..950597111c90
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/etalons/multiday-appointment_timelineMonth (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/etalons/multiday-appointment_week (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/etalons/multiday-appointment_week (fluent-next.blue.light).png
new file mode 100644
index 000000000000..79098853cce8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/etalons/multiday-appointment_week (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/etalons/timeline-overlapping-appointments (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/etalons/timeline-overlapping-appointments (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8ddf4594c465
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/etalons/timeline-overlapping-appointments (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/etalons/timelineMonth-appt-order (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/etalons/timelineMonth-appt-order (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3f8245ecac92
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/etalons/timelineMonth-appt-order (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/all-day-appointment-maxAppointmentsPerCell=1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/all-day-appointment-maxAppointmentsPerCell=1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..43a0b67b82f3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/all-day-appointment-maxAppointmentsPerCell=1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/all-day-appointment-maxAppointmentsPerCell=10 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/all-day-appointment-maxAppointmentsPerCell=10 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a6c0e2986160
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/all-day-appointment-maxAppointmentsPerCell=10 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/all-day-appointment-maxAppointmentsPerCell=3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/all-day-appointment-maxAppointmentsPerCell=3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0df61159f2c9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/all-day-appointment-maxAppointmentsPerCell=3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/all-day-appointment-maxAppointmentsPerCell=auto (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/all-day-appointment-maxAppointmentsPerCell=auto (fluent-next.blue.light).png
new file mode 100644
index 000000000000..43a0b67b82f3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/all-day-appointment-maxAppointmentsPerCell=auto (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/all-day-appointment-maxAppointmentsPerCell=unlimited (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/all-day-appointment-maxAppointmentsPerCell=unlimited (fluent-next.blue.light).png
new file mode 100644
index 000000000000..02c84e46bee9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/all-day-appointment-maxAppointmentsPerCell=unlimited (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/day-appointment-maxAppointmentsPerCell=10 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/day-appointment-maxAppointmentsPerCell=10 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3cbfeac799b5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/day-appointment-maxAppointmentsPerCell=10 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/day-appointment-maxAppointmentsPerCell=3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/day-appointment-maxAppointmentsPerCell=3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8afe723e6399
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/day-appointment-maxAppointmentsPerCell=3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/day-appointment-maxAppointmentsPerCell=auto (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/day-appointment-maxAppointmentsPerCell=auto (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e3a3bf654345
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/day-appointment-maxAppointmentsPerCell=auto (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/day-appointment-maxAppointmentsPerCell=unlimited (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/day-appointment-maxAppointmentsPerCell=unlimited (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e4d846606e6c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/day-appointment-maxAppointmentsPerCell=unlimited (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/month-appointment-maxAppointmentsPerCell=1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/month-appointment-maxAppointmentsPerCell=1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..12920b8b202f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/month-appointment-maxAppointmentsPerCell=1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/month-appointment-maxAppointmentsPerCell=10 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/month-appointment-maxAppointmentsPerCell=10 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..548f9edd31d3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/month-appointment-maxAppointmentsPerCell=10 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/month-appointment-maxAppointmentsPerCell=3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/month-appointment-maxAppointmentsPerCell=3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..91b678d94294
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/month-appointment-maxAppointmentsPerCell=3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/month-appointment-maxAppointmentsPerCell=auto (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/month-appointment-maxAppointmentsPerCell=auto (fluent-next.blue.light).png
new file mode 100644
index 000000000000..91b678d94294
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/month-appointment-maxAppointmentsPerCell=auto (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/month-appointment-maxAppointmentsPerCell=unlimited (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/month-appointment-maxAppointmentsPerCell=unlimited (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1fc9f091db81
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/month-appointment-maxAppointmentsPerCell=unlimited (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/timeline-appointment-maxAppointmentsPerCell=1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/timeline-appointment-maxAppointmentsPerCell=1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e40f610b9a12
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/timeline-appointment-maxAppointmentsPerCell=1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/timeline-appointment-maxAppointmentsPerCell=10 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/timeline-appointment-maxAppointmentsPerCell=10 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..17908c102d24
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/timeline-appointment-maxAppointmentsPerCell=10 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/timeline-appointment-maxAppointmentsPerCell=20 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/timeline-appointment-maxAppointmentsPerCell=20 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..85fad61dec0b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/timeline-appointment-maxAppointmentsPerCell=20 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/timeline-appointment-maxAppointmentsPerCell=3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/timeline-appointment-maxAppointmentsPerCell=3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5b305f73fc01
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/timeline-appointment-maxAppointmentsPerCell=3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/timeline-appointment-maxAppointmentsPerCell=auto (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/timeline-appointment-maxAppointmentsPerCell=auto (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a1ec3daf1bab
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/timeline-appointment-maxAppointmentsPerCell=auto (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/timeline-appointment-maxAppointmentsPerCell=unlimited (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/timeline-appointment-maxAppointmentsPerCell=unlimited (fluent-next.blue.light).png
new file mode 100644
index 000000000000..36e78260d119
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/timeline-appointment-maxAppointmentsPerCell=unlimited (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/week-appointment-maxAppointmentsPerCell=10 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/week-appointment-maxAppointmentsPerCell=10 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7273c95bc0c5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/week-appointment-maxAppointmentsPerCell=10 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/week-appointment-maxAppointmentsPerCell=3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/week-appointment-maxAppointmentsPerCell=3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7e306f0e8854
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/week-appointment-maxAppointmentsPerCell=3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/week-appointment-maxAppointmentsPerCell=auto (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/week-appointment-maxAppointmentsPerCell=auto (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fc89f8b1b396
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/week-appointment-maxAppointmentsPerCell=auto (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/week-appointment-maxAppointmentsPerCell=unlimited (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/week-appointment-maxAppointmentsPerCell=unlimited (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9c45d5bbe09d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/maxAppointmentsPerCell/etalons/week-appointment-maxAppointmentsPerCell=unlimited (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointments/workWeek/etalons/work_week_interval-2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/workWeek/etalons/work_week_interval-2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d2f7d47ee65d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointments/workWeek/etalons/work_week_interval-2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/T1080232.ts b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/T1080232.ts
index cfb8b4340c8a..fb40c5ed6e40 100644
--- a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/T1080232.ts
+++ b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/T1080232.ts
@@ -17,7 +17,7 @@ test('it should correctly drag external item to the appointment after drag appoi
   await t
     .dragToElement(appt01.element, cell01, { speed: 0.5 })
     .expect((await appt01.element.boundingClientRect).top)
-    .eql(183)
+    .eql((await cell01.boundingClientRect).top + (await cell01.boundingClientRect).height)
     .dragToElement(dragItem, appt02.element, { speed: 0.5 })
     .expect(appt02.element.find('.dx-item-content').getAttribute('data-status'))
     .eql('Added');
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/etalons/drag-n-drop-appointment-to-left-column (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/etalons/drag-n-drop-appointment-to-left-column (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a42fad05ac3a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/etalons/drag-n-drop-appointment-to-left-column (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/etalons/drag-n-drop-previous-day-cell (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/etalons/drag-n-drop-previous-day-cell (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0e83cc6846f4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/etalons/drag-n-drop-previous-day-cell (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/etalons/drag-n-drop-to-left(T1017720) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/etalons/drag-n-drop-to-left(T1017720) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e9719d7890b1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/etalons/drag-n-drop-to-left(T1017720) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/etalons/drag-n-drop-to-right(T1017720) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/etalons/drag-n-drop-to-right(T1017720) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d4dab81e9d6f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/etalons/drag-n-drop-to-right(T1017720) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-'Appointment 2'-from-tooltip-in-week (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-'Appointment 2'-from-tooltip-in-week (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0ab082405d87
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-'Appointment 2'-from-tooltip-in-week (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-'Appointment 3'-from-tooltip-in-week (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-'Appointment 3'-from-tooltip-in-week (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4123361c6a73
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-'Appointment 3'-from-tooltip-in-week (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-all-day-to-bottom (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-all-day-to-bottom (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0078862e5a2b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-all-day-to-bottom (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-all-day-to-left (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-all-day-to-left (fluent-next.blue.light).png
new file mode 100644
index 000000000000..be4410573e77
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-all-day-to-left (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-all-day-to-right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-all-day-to-right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1dbcb92c62c0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-all-day-to-right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-all-day-to-top (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-all-day-to-top (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6f5edd55e896
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-all-day-to-top (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-blue-group (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-blue-group (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8d8d68b34512
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-blue-group (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-long-appoint-to-bottom (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-long-appoint-to-bottom (fluent-next.blue.light).png
new file mode 100644
index 000000000000..739325d734ff
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-long-appoint-to-bottom (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-long-appoint-to-left (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-long-appoint-to-left (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a90247b332ef
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-long-appoint-to-left (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-long-appoint-to-right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-long-appoint-to-right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..08a10ebd50de
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-long-appoint-to-right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-long-appoint-to-top (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-long-appoint-to-top (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a90247b332ef
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-long-appoint-to-top (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-mouse-offset-to-bottom (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-mouse-offset-to-bottom (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3574b7f710eb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-mouse-offset-to-bottom (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-mouse-offset-to-left (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-mouse-offset-to-left (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4f0a64cf6d56
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-mouse-offset-to-left (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-mouse-offset-to-right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-mouse-offset-to-right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..aff91c0f547c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-mouse-offset-to-right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-mouse-offset-to-top (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-mouse-offset-to-top (fluent-next.blue.light).png
new file mode 100644
index 000000000000..003d6c441dfd
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-mouse-offset-to-top (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-small-appoint-to-bottom (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-small-appoint-to-bottom (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7508376f2582
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-small-appoint-to-bottom (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-small-appoint-to-left (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-small-appoint-to-left (fluent-next.blue.light).png
new file mode 100644
index 000000000000..12f1e6aa5cba
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-small-appoint-to-left (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-small-appoint-to-right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-small-appoint-to-right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..57758fd14fb2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-small-appoint-to-right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-small-appoint-to-top (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-small-appoint-to-top (fluent-next.blue.light).png
new file mode 100644
index 000000000000..12f1e6aa5cba
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-small-appoint-to-top (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-timelineMonth-to-left (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-timelineMonth-to-left (fluent-next.blue.light).png
new file mode 100644
index 000000000000..95ad584458b7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-timelineMonth-to-left (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-timelineMonth-to-right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-timelineMonth-to-right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d61f901f84d1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-timelineMonth-to-right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-timelineWeek-to-left (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-timelineWeek-to-left (fluent-next.blue.light).png
new file mode 100644
index 000000000000..40ada982d6e9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-timelineWeek-to-left (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-timelineWeek-to-right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-timelineWeek-to-right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6afffcfc5684
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-timelineWeek-to-right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-to-bottom (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-to-bottom (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c4782a3b5536
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-to-bottom (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-to-bottom-in-shifted-container (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-to-bottom-in-shifted-container (fluent-next.blue.light).png
new file mode 100644
index 000000000000..23e958dedc21
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-to-bottom-in-shifted-container (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-to-left (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-to-left (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c730d7249c56
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-to-left (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-to-left-in-shifted-container (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-to-left-in-shifted-container (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5d5163a94568
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-to-left-in-shifted-container (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-to-orange-group (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-to-orange-group (fluent-next.blue.light).png
new file mode 100644
index 000000000000..33ca3d5a0206
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-to-orange-group (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-to-right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-to-right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..25cab36ce50c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-to-right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-to-right-in-shifted-container (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-to-right-in-shifted-container (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ac9441ef7a2d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-to-right-in-shifted-container (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-to-top (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-to-top (fluent-next.blue.light).png
new file mode 100644
index 000000000000..17ee914070bc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-to-top (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-to-top-in-shifted-container (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-to-top-in-shifted-container (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8846137edf8d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-to-top-in-shifted-container (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-within-cell-to-bottom (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-within-cell-to-bottom (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7e5d59aed747
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-within-cell-to-bottom (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-within-cell-to-left (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-within-cell-to-left (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c730d7249c56
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-within-cell-to-left (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-within-cell-to-right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-within-cell-to-right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c730d7249c56
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-n-drop-within-cell-to-right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-short-app-min-dist-to-left (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-short-app-min-dist-to-left (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3af2175438f6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-short-app-min-dist-to-left (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-short-app-to-right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-short-app-to-right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b761431473b0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-short-app-to-right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-short-app-to-right-on-next-cell (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-short-app-to-right-on-next-cell (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1639a23ffcf1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/etalons/drag-short-app-to-right-on-next-cell (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/schedulerInContainer/etalons/dxScheduler-placed-in-dxTabPanel-drag-to-bottom (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/schedulerInContainer/etalons/dxScheduler-placed-in-dxTabPanel-drag-to-bottom (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ad55fab8baa5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/schedulerInContainer/etalons/dxScheduler-placed-in-dxTabPanel-drag-to-bottom (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/schedulerInContainer/etalons/dxScheduler-placed-in-dxTabPanel-drag-to-right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/schedulerInContainer/etalons/dxScheduler-placed-in-dxTabPanel-drag-to-right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..57ecbd834240
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/schedulerInContainer/etalons/dxScheduler-placed-in-dxTabPanel-drag-to-right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/schedulerInContainer/etalons/dxScheduler-placed-in-dxTabPanel-drag-to-top (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/schedulerInContainer/etalons/dxScheduler-placed-in-dxTabPanel-drag-to-top (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d6ccc02ae2a1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/schedulerInContainer/etalons/dxScheduler-placed-in-dxTabPanel-drag-to-top (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/schedulerInContainer/etalons/dxScheduler-placed-in-transform-container-drag-to-bottom (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/schedulerInContainer/etalons/dxScheduler-placed-in-transform-container-drag-to-bottom (fluent-next.blue.light).png
new file mode 100644
index 000000000000..12f2954c1411
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/schedulerInContainer/etalons/dxScheduler-placed-in-transform-container-drag-to-bottom (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/schedulerInContainer/etalons/dxScheduler-placed-in-transform-container-drag-to-left (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/schedulerInContainer/etalons/dxScheduler-placed-in-transform-container-drag-to-left (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fad83a85f1e2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/schedulerInContainer/etalons/dxScheduler-placed-in-transform-container-drag-to-left (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/schedulerInContainer/etalons/dxScheduler-placed-in-transform-container-drag-to-right (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/schedulerInContainer/etalons/dxScheduler-placed-in-transform-container-drag-to-right (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1ffa6734c6a1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/schedulerInContainer/etalons/dxScheduler-placed-in-transform-container-drag-to-right (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/schedulerInContainer/etalons/dxScheduler-placed-in-transform-container-drag-to-top (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/schedulerInContainer/etalons/dxScheduler-placed-in-transform-container-drag-to-top (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b47a32caae33
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/outlookDragging/schedulerInContainer/etalons/dxScheduler-placed-in-transform-container-drag-to-top (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/etalons/save-appointment-loading-panel-screenshot (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/etalons/save-appointment-loading-panel-screenshot (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f061a025cc47
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/etalons/save-appointment-loading-panel-screenshot (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/etalons/scheduler-after-hiding-and-resizing (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/etalons/scheduler-after-hiding-and-resizing (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b0ce95dfe5b1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/etalons/scheduler-after-hiding-and-resizing (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/etalons/scheduler-appointments-should-update-color (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/etalons/scheduler-appointments-should-update-color (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a02733871e2e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/etalons/scheduler-appointments-should-update-color (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/etalons/scheduler-week-cell-active-state (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/etalons/scheduler-week-cell-active-state (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dae7afdc7b51
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/etalons/scheduler-week-cell-active-state (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/etalons/scheduler-week-cell-hover-state (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/etalons/scheduler-week-cell-hover-state (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b0117d6c9ca4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/etalons/scheduler-week-cell-hover-state (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/etalons/scrollable-month-workspace (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/etalons/scrollable-month-workspace (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2ddcddda380b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/etalons/scrollable-month-workspace (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-header-css-agenda-view-long-names (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-header-css-agenda-view-long-names (fluent-next.blue.light).png
new file mode 100644
index 000000000000..be1e350a9a48
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-header-css-agenda-view-long-names (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-header-css-group-by-date-long-names (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-header-css-group-by-date-long-names (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d0310d862925
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-header-css-group-by-date-long-names (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-header-css-horizontal-grouping-long-names (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-header-css-horizontal-grouping-long-names (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6a70595291c7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-header-css-horizontal-grouping-long-names (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-header-css-vertical-grouping-long-names (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-header-css-vertical-grouping-long-names (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8efe43579671
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-header-css-vertical-grouping-long-names (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-horizontal-allDay-0-24) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-horizontal-allDay-0-24) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c931b57eddd2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-horizontal-allDay-0-24) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-horizontal-allDay-9-14) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-horizontal-allDay-9-14) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3632de480e0c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-horizontal-allDay-9-14) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-horizontal-hidden-0-24) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-horizontal-hidden-0-24) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c931b57eddd2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-horizontal-hidden-0-24) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-horizontal-hidden-9-14) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-horizontal-hidden-9-14) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3632de480e0c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-horizontal-hidden-9-14) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-vertical-allDay-0-24) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-vertical-allDay-0-24) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e64aa19a5e5f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-vertical-allDay-0-24) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-vertical-allDay-9-14) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-vertical-allDay-9-14) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..015ac055c65b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-vertical-allDay-9-14) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-vertical-hidden-0-24) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-vertical-hidden-0-24) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e64aa19a5e5f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-vertical-hidden-0-24) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-vertical-hidden-9-14) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-vertical-hidden-9-14) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..015ac055c65b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(month-vertical-hidden-9-14) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(week-horizontal-allDay-0-24) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(week-horizontal-allDay-0-24) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..05c13a9abc73
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(week-horizontal-allDay-0-24) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(week-horizontal-allDay-9-14) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(week-horizontal-allDay-9-14) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2256a2b5bb78
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(week-horizontal-allDay-9-14) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(week-horizontal-hidden-0-24) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(week-horizontal-hidden-0-24) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..05c13a9abc73
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(week-horizontal-hidden-0-24) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(week-horizontal-hidden-9-14) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(week-horizontal-hidden-9-14) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2256a2b5bb78
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(week-horizontal-hidden-9-14) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(week-vertical-allDay-0-24) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(week-vertical-allDay-0-24) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f198974d807a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(week-vertical-allDay-0-24) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(week-vertical-allDay-9-14) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(week-vertical-allDay-9-14) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a4f2791be453
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(week-vertical-allDay-9-14) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(week-vertical-hidden-0-24) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(week-vertical-hidden-0-24) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f198974d807a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(week-vertical-hidden-0-24) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(week-vertical-hidden-9-14) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(week-vertical-hidden-9-14) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a4f2791be453
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/group-overflow-(week-vertical-hidden-9-14) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/month-view_vertical-grouping_fist-app-part_T1122185 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/month-view_vertical-grouping_fist-app-part_T1122185 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b67aca198dcd
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/month-view_vertical-grouping_fist-app-part_T1122185 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/month-view_vertical-grouping_last-app-part_T1122185 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/month-view_vertical-grouping_last-app-part_T1122185 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..091c21499ea6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/month-view_vertical-grouping_last-app-part_T1122185 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/month-view_vertical-grouping_middle-app-part_T1122185 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/month-view_vertical-grouping_middle-app-part_T1122185 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..41ff5a6e0032
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/month-view_vertical-grouping_middle-app-part_T1122185 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/scrolling-vertical (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/scrolling-vertical (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4191af34923c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/scrolling-vertical (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/T1306971__scheduler__horizontal-scrolling__after (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/T1306971__scheduler__horizontal-scrolling__after (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a2c9c31d2e92
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/T1306971__scheduler__horizontal-scrolling__after (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/T1306971__scheduler__horizontal-scrolling__before (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/T1306971__scheduler__horizontal-scrolling__before (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c59616f7091b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/T1306971__scheduler__horizontal-scrolling__before (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/calendar-state-after-next-button-click (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/calendar-state-after-next-button-click (fluent-next.blue.light).png
new file mode 100644
index 000000000000..58830cc9a6d6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/calendar-state-after-next-button-click (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/calendar-state-after-prev-button-click (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/calendar-state-after-prev-button-click (fluent-next.blue.light).png
new file mode 100644
index 000000000000..334bebf23dad
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/calendar-state-after-prev-button-click (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/initial-calendar-state (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/initial-calendar-state (fluent-next.blue.light).png
new file mode 100644
index 000000000000..23d27ad66e81
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/initial-calendar-state (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/navigator-state-after-calendar-next-button-click (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/navigator-state-after-calendar-next-button-click (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e3d2ec6e3cfc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/navigator-state-after-calendar-next-button-click (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/navigator-state-after-calendar-prev-button-click (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/navigator-state-after-calendar-prev-button-click (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f1a0f06cdcdc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/navigator-state-after-calendar-prev-button-click (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/navigator-state-after-change-currentDate-option (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/navigator-state-after-change-currentDate-option (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7f755b40dc19
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/navigator-state-after-change-currentDate-option (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/right-calendar-appearance (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/right-calendar-appearance (fluent-next.blue.light).png
new file mode 100644
index 000000000000..de4c0bf7d6e5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/right-calendar-appearance (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-custom toolbar (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-custom toolbar (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0e99f4a11c50
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-custom toolbar (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-default toolbar (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-default toolbar (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a6b2b784f344
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-default toolbar (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-disabled toolbar (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-disabled toolbar (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0e99f4a11c50
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-disabled toolbar (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-hidden-toolbar (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-hidden-toolbar (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4d543ee0dde3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-hidden-toolbar (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-multiline-false-toolbar (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-multiline-false-toolbar (fluent-next.blue.light).png
new file mode 100644
index 000000000000..60284210a8ab
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-multiline-false-toolbar (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-multiline-true-toolbar (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-multiline-true-toolbar (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d57b28b0fd18
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-multiline-true-toolbar (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-toolbar (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-toolbar (fluent-next.blue.light).png
new file mode 100644
index 000000000000..50867e4e2e85
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-toolbar (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-toolbar with today (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-toolbar with today (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e1b77957febb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-toolbar with today (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-toolbar-changed (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-toolbar-changed (fluent-next.blue.light).png
new file mode 100644
index 000000000000..352c323b5c74
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-toolbar-changed (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-toolbar-changed-2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-toolbar-changed-2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..28c579a7c330
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-toolbar-changed-2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-toolbar-item-option-changed (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-toolbar-item-option-changed (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5f2ec5e4a1ec
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-toolbar-item-option-changed (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-toolbar-items-changed (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-toolbar-items-changed (fluent-next.blue.light).png
new file mode 100644
index 000000000000..28c579a7c330
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-toolbar-items-changed (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-toolbar-location-changed (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-toolbar-location-changed (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4cb29ec930a4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-toolbar-location-changed (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-toolbar-menu (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-toolbar-menu (fluent-next.blue.light).png
new file mode 100644
index 000000000000..31aebaae1528
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-toolbar-menu (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-toolbar-property-changed (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-toolbar-property-changed (fluent-next.blue.light).png
new file mode 100644
index 000000000000..98125d70410d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-toolbar-property-changed (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/toolbar-without-view-switcher-(useDropDownViewSwitcher=false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/toolbar-without-view-switcher-(useDropDownViewSwitcher=false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a952caedd613
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/toolbar-without-view-switcher-(useDropDownViewSwitcher=false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/toolbar-without-view-switcher-(useDropDownViewSwitcher=true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/toolbar-without-view-switcher-(useDropDownViewSwitcher=true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a952caedd613
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/toolbar-without-view-switcher-(useDropDownViewSwitcher=true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=day-crossScrolling=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=day-crossScrolling=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..58704433c765
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=day-crossScrolling=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=day-crossScrolling=false-horizontal (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=day-crossScrolling=false-horizontal (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f208797af298
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=day-crossScrolling=false-horizontal (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=day-crossScrolling=false-horizontal-rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=day-crossScrolling=false-horizontal-rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..07a5e03d365a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=day-crossScrolling=false-horizontal-rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=day-crossScrolling=false-rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=day-crossScrolling=false-rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..34e6c7d0b4df
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=day-crossScrolling=false-rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=day-crossScrolling=false-vertical (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=day-crossScrolling=false-vertical (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d9f2874f751f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=day-crossScrolling=false-vertical (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=day-crossScrolling=false-vertical-rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=day-crossScrolling=false-vertical-rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f97370c0442a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=day-crossScrolling=false-vertical-rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=day-crossScrolling=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=day-crossScrolling=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..58704433c765
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=day-crossScrolling=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=day-crossScrolling=true-horizontal (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=day-crossScrolling=true-horizontal (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e5e11fb0b0b0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=day-crossScrolling=true-horizontal (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=day-crossScrolling=true-horizontal-rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=day-crossScrolling=true-horizontal-rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..774313de8889
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=day-crossScrolling=true-horizontal-rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=day-crossScrolling=true-rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=day-crossScrolling=true-rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1b6a4076b205
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=day-crossScrolling=true-rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=day-crossScrolling=true-vertical (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=day-crossScrolling=true-vertical (fluent-next.blue.light).png
new file mode 100644
index 000000000000..eacb79729b21
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=day-crossScrolling=true-vertical (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=day-crossScrolling=true-vertical-rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=day-crossScrolling=true-vertical-rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fca24cc2c873
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=day-crossScrolling=true-vertical-rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d9e1209bc5c5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false-horizontal (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false-horizontal (fluent-next.blue.light).png
new file mode 100644
index 000000000000..377126e86b56
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false-horizontal (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false-horizontal-rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false-horizontal-rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b4443e530389
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false-horizontal-rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false-rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false-rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e09de06c27eb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false-rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false-vertical (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false-vertical (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3a27b923a876
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false-vertical (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false-vertical-rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false-vertical-rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f149641927de
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=false-vertical-rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..579ebafda891
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true-horizontal (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true-horizontal (fluent-next.blue.light).png
new file mode 100644
index 000000000000..51cbfd758803
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true-horizontal (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true-horizontal-rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true-horizontal-rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..816d2070beb1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true-horizontal-rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true-rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true-rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8aa7fe4c8676
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true-rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true-vertical (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true-vertical (fluent-next.blue.light).png
new file mode 100644
index 000000000000..25e598143f6f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true-vertical (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true-vertical-rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true-vertical-rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..83b3d065f305
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=month-crossScrolling=true-vertical-rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineDay-crossScrolling=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineDay-crossScrolling=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7c1f33f5cfb7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineDay-crossScrolling=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineDay-crossScrolling=false-horizontal (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineDay-crossScrolling=false-horizontal (fluent-next.blue.light).png
new file mode 100644
index 000000000000..51ac06f9e8d1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineDay-crossScrolling=false-horizontal (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineDay-crossScrolling=false-horizontal-rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineDay-crossScrolling=false-horizontal-rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e6d24c97bbeb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineDay-crossScrolling=false-horizontal-rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineDay-crossScrolling=false-rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineDay-crossScrolling=false-rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b22d92180238
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineDay-crossScrolling=false-rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineDay-crossScrolling=false-vertical (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineDay-crossScrolling=false-vertical (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bbd14025b129
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineDay-crossScrolling=false-vertical (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineDay-crossScrolling=false-vertical-rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineDay-crossScrolling=false-vertical-rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a8483d4879a5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineDay-crossScrolling=false-vertical-rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineDay-crossScrolling=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineDay-crossScrolling=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7c1f33f5cfb7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineDay-crossScrolling=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineDay-crossScrolling=true-horizontal (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineDay-crossScrolling=true-horizontal (fluent-next.blue.light).png
new file mode 100644
index 000000000000..51ac06f9e8d1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineDay-crossScrolling=true-horizontal (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineDay-crossScrolling=true-horizontal-rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineDay-crossScrolling=true-horizontal-rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e6d24c97bbeb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineDay-crossScrolling=true-horizontal-rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineDay-crossScrolling=true-rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineDay-crossScrolling=true-rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b22d92180238
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineDay-crossScrolling=true-rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineDay-crossScrolling=true-vertical (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineDay-crossScrolling=true-vertical (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bbd14025b129
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineDay-crossScrolling=true-vertical (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineDay-crossScrolling=true-vertical-rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineDay-crossScrolling=true-vertical-rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a8483d4879a5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineDay-crossScrolling=true-vertical-rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineMonth-crossScrolling=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineMonth-crossScrolling=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0871da74bc85
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineMonth-crossScrolling=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineMonth-crossScrolling=false-horizontal (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineMonth-crossScrolling=false-horizontal (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9d4ddebf2004
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineMonth-crossScrolling=false-horizontal (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineMonth-crossScrolling=false-horizontal-rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineMonth-crossScrolling=false-horizontal-rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..eb731a9cf704
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineMonth-crossScrolling=false-horizontal-rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineMonth-crossScrolling=false-rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineMonth-crossScrolling=false-rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0c238dac58fa
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineMonth-crossScrolling=false-rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineMonth-crossScrolling=false-vertical (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineMonth-crossScrolling=false-vertical (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d0ed2ce8b6fa
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineMonth-crossScrolling=false-vertical (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineMonth-crossScrolling=false-vertical-rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineMonth-crossScrolling=false-vertical-rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..30cd4b3acfe7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineMonth-crossScrolling=false-vertical-rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineMonth-crossScrolling=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineMonth-crossScrolling=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0871da74bc85
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineMonth-crossScrolling=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineMonth-crossScrolling=true-horizontal (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineMonth-crossScrolling=true-horizontal (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9d4ddebf2004
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineMonth-crossScrolling=true-horizontal (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineMonth-crossScrolling=true-horizontal-rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineMonth-crossScrolling=true-horizontal-rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..eb731a9cf704
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineMonth-crossScrolling=true-horizontal-rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineMonth-crossScrolling=true-rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineMonth-crossScrolling=true-rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0c238dac58fa
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineMonth-crossScrolling=true-rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineMonth-crossScrolling=true-vertical (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineMonth-crossScrolling=true-vertical (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d0ed2ce8b6fa
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineMonth-crossScrolling=true-vertical (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineMonth-crossScrolling=true-vertical-rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineMonth-crossScrolling=true-vertical-rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..30cd4b3acfe7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineMonth-crossScrolling=true-vertical-rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineWeek-crossScrolling=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineWeek-crossScrolling=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e4a0951dadd0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineWeek-crossScrolling=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineWeek-crossScrolling=false-horizontal (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineWeek-crossScrolling=false-horizontal (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5a9a8d3d3a34
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineWeek-crossScrolling=false-horizontal (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineWeek-crossScrolling=false-horizontal-rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineWeek-crossScrolling=false-horizontal-rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..67d24ae86d29
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineWeek-crossScrolling=false-horizontal-rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineWeek-crossScrolling=false-rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineWeek-crossScrolling=false-rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0f7d5a3a418b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineWeek-crossScrolling=false-rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineWeek-crossScrolling=false-vertical (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineWeek-crossScrolling=false-vertical (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e1e470670185
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineWeek-crossScrolling=false-vertical (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineWeek-crossScrolling=false-vertical-rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineWeek-crossScrolling=false-vertical-rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..be01ca38a86c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineWeek-crossScrolling=false-vertical-rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineWeek-crossScrolling=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineWeek-crossScrolling=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e4a0951dadd0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineWeek-crossScrolling=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineWeek-crossScrolling=true-horizontal (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineWeek-crossScrolling=true-horizontal (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5a9a8d3d3a34
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineWeek-crossScrolling=true-horizontal (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineWeek-crossScrolling=true-horizontal-rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineWeek-crossScrolling=true-horizontal-rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..67d24ae86d29
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineWeek-crossScrolling=true-horizontal-rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineWeek-crossScrolling=true-rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineWeek-crossScrolling=true-rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0f7d5a3a418b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineWeek-crossScrolling=true-rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineWeek-crossScrolling=true-vertical (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineWeek-crossScrolling=true-vertical (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e1e470670185
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineWeek-crossScrolling=true-vertical (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineWeek-crossScrolling=true-vertical-rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineWeek-crossScrolling=true-vertical-rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..be01ca38a86c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=timelineWeek-crossScrolling=true-vertical-rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=week-crossScrolling=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=week-crossScrolling=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d80f0fba4fc7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=week-crossScrolling=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=week-crossScrolling=false-horizontal (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=week-crossScrolling=false-horizontal (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0a3816cc28be
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=week-crossScrolling=false-horizontal (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=week-crossScrolling=false-horizontal-rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=week-crossScrolling=false-horizontal-rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a06e69c19e9f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=week-crossScrolling=false-horizontal-rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=week-crossScrolling=false-rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=week-crossScrolling=false-rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4a467cb1e6ca
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=week-crossScrolling=false-rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=week-crossScrolling=false-vertical (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=week-crossScrolling=false-vertical (fluent-next.blue.light).png
new file mode 100644
index 000000000000..38329e108f43
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=week-crossScrolling=false-vertical (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=week-crossScrolling=false-vertical-rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=week-crossScrolling=false-vertical-rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fbba995868c8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=week-crossScrolling=false-vertical-rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=week-crossScrolling=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=week-crossScrolling=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..566966084fe4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=week-crossScrolling=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=week-crossScrolling=true-horizontal (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=week-crossScrolling=true-horizontal (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bac91f385a4c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=week-crossScrolling=true-horizontal (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=week-crossScrolling=true-horizontal-rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=week-crossScrolling=true-horizontal-rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..36ed8f3bc046
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=week-crossScrolling=true-horizontal-rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=week-crossScrolling=true-rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=week-crossScrolling=true-rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..22321cb5362e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=week-crossScrolling=true-rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=week-crossScrolling=true-vertical (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=week-crossScrolling=true-vertical (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ae9653e95081
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=week-crossScrolling=true-vertical (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=week-crossScrolling=true-vertical-rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=week-crossScrolling=true-vertical-rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4348c7fa353c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/etalons/view=week-crossScrolling=true-vertical-rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/resize/etalons/browser-resize-currentView=agenda-after-resize (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/resize/etalons/browser-resize-currentView=agenda-after-resize (fluent-next.blue.light).png
new file mode 100644
index 000000000000..78d7a10c5524
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/resize/etalons/browser-resize-currentView=agenda-after-resize (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/resize/etalons/browser-resize-currentView=agenda-before-resize (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/resize/etalons/browser-resize-currentView=agenda-before-resize (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2abfe7bf6658
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/resize/etalons/browser-resize-currentView=agenda-before-resize (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/resize/etalons/browser-resize-currentView=day-after-resize (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/resize/etalons/browser-resize-currentView=day-after-resize (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b515fc731940
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/resize/etalons/browser-resize-currentView=day-after-resize (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/resize/etalons/browser-resize-currentView=day-before-resize (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/resize/etalons/browser-resize-currentView=day-before-resize (fluent-next.blue.light).png
new file mode 100644
index 000000000000..03d21b46b8aa
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/resize/etalons/browser-resize-currentView=day-before-resize (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/resize/etalons/browser-resize-currentView=month-after-resize (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/resize/etalons/browser-resize-currentView=month-after-resize (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8293215bab53
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/resize/etalons/browser-resize-currentView=month-after-resize (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/resize/etalons/browser-resize-currentView=month-before-resize (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/resize/etalons/browser-resize-currentView=month-before-resize (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3f860b5712a0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/resize/etalons/browser-resize-currentView=month-before-resize (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/resize/etalons/browser-resize-currentView=timelineDay-after-resize (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/resize/etalons/browser-resize-currentView=timelineDay-after-resize (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fa4def760b5c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/resize/etalons/browser-resize-currentView=timelineDay-after-resize (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/resize/etalons/browser-resize-currentView=timelineDay-before-resize (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/resize/etalons/browser-resize-currentView=timelineDay-before-resize (fluent-next.blue.light).png
new file mode 100644
index 000000000000..48e860e5d5b6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/resize/etalons/browser-resize-currentView=timelineDay-before-resize (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/resize/etalons/browser-resize-currentView=week-after-resize (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/resize/etalons/browser-resize-currentView=week-after-resize (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4141a5e7b270
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/resize/etalons/browser-resize-currentView=week-after-resize (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/resize/etalons/browser-resize-currentView=week-before-resize (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/resize/etalons/browser-resize-currentView=week-before-resize (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2b168b8b4da8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/adaptive/resize/etalons/browser-resize-currentView=week-before-resize (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/allDay/etalons/21-27-march-week-view (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/allDay/etalons/21-27-march-week-view (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e407222cd83d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/allDay/etalons/21-27-march-week-view (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/allDay/etalons/27-march-day-view (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/allDay/etalons/27-march-day-view (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c4b55078b30f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/allDay/etalons/27-march-day-view (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/allDay/etalons/28-march-3-apr-week-view (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/allDay/etalons/28-march-3-apr-week-view (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a3dd94db289a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/allDay/etalons/28-march-3-apr-week-view (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/allDay/etalons/28-march-day-view (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/allDay/etalons/28-march-day-view (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8cf2b6e4c0d9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/allDay/etalons/28-march-day-view (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/allDay/etalons/29-march-day-view (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/allDay/etalons/29-march-day-view (fluent-next.blue.light).png
new file mode 100644
index 000000000000..df67ed78c765
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/allDay/etalons/29-march-day-view (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/allDay/etalons/30-march-day-view (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/allDay/etalons/30-march-day-view (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c4b55078b30f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/allDay/etalons/30-march-day-view (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/allDay/etalons/4-10-apr-week-view (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/allDay/etalons/4-10-apr-week-view (fluent-next.blue.light).png
new file mode 100644
index 000000000000..157b61db6b5d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/allDay/etalons/4-10-apr-week-view (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/after-dragging(T1020820) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/after-dragging(T1020820) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5ba494792af2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/after-dragging(T1020820) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-adaptability-timelineMonth (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-adaptability-timelineMonth (fluent-next.blue.light).png
new file mode 100644
index 000000000000..916902b6f1b9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-adaptability-timelineMonth (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-month-adapt(false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-month-adapt(false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a3a03cac4b57
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-month-adapt(false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-month-adapt(true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-month-adapt(true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c62685c73ba2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-month-adapt(true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-month-double-interval (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-month-double-interval (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c96654c9baac
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-month-double-interval (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-month-rtl(false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-month-rtl(false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a3a03cac4b57
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-month-rtl(false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-month-rtl(true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-month-rtl(true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e516b420ce44
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-month-rtl(true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-timelineWeek-adapt(false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-timelineWeek-adapt(false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e122733c44d1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-timelineWeek-adapt(false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-timelineWeek-adapt(true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-timelineWeek-adapt(true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9ceed8d5a17f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-timelineWeek-adapt(true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-timelineWeek-rtl(false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-timelineWeek-rtl(false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e122733c44d1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-timelineWeek-rtl(false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-timelineWeek-rtl(true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-timelineWeek-rtl(true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e48c44cbbc27
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-timelineWeek-rtl(true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-week-adapt(false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-week-adapt(false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8f123ac82c49
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-week-adapt(false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-week-adapt(true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-week-adapt(true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..04274d5a9d58
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-week-adapt(true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-week-rtl(false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-week-rtl(false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8f123ac82c49
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-week-rtl(false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-week-rtl(true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-week-rtl(true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e1f6e68b236e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-collector-week-rtl(true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-no-subject-agenda (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-no-subject-agenda (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6d217c726481
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-no-subject-agenda (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-no-subject-day (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-no-subject-day (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3551eceeab22
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-no-subject-day (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-no-subject-month (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-no-subject-month (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5929427f4cc3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-no-subject-month (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-no-subject-timelineDay (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-no-subject-timelineDay (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1782d7d4101b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-no-subject-timelineDay (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-no-subject-timelineMonth (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-no-subject-timelineMonth (fluent-next.blue.light).png
new file mode 100644
index 000000000000..29987b86b0c1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-no-subject-timelineMonth (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-no-subject-timelineWeek (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-no-subject-timelineWeek (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6254cdbaa420
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-no-subject-timelineWeek (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-no-subject-timelineWorkWeek (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-no-subject-timelineWorkWeek (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6254cdbaa420
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-no-subject-timelineWorkWeek (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-no-subject-week (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-no-subject-week (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3c641e348d75
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-no-subject-week (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-no-subject-workWeek (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-no-subject-workWeek (fluent-next.blue.light).png
new file mode 100644
index 000000000000..31aeb410796f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/appointment-no-subject-workWeek (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/before-dragging(T1020820) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/before-dragging(T1020820) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b5bb0abbe070
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/before-dragging(T1020820) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/disabled-appointment (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/disabled-appointment (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c62a5abe6639
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/disabled-appointment (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/disabled-appointments-in-grid (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/disabled-appointments-in-grid (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e4b7ca23b479
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/disabled-appointments-in-grid (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/disabled-by-function-appointment (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/disabled-by-function-appointment (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e88c58b0d7f8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/disabled-by-function-appointment (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/enabled-appointment (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/enabled-appointment (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6139e4987389
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/enabled-appointment (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/enabled-by-function-appointment (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/enabled-by-function-appointment (fluent-next.blue.light).png
new file mode 100644
index 000000000000..be6813f68450
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/enabled-by-function-appointment (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/exclude-appointment-from-series-via-form-editing (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/exclude-appointment-from-series-via-form-editing (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4d34883b2df0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/exclude-appointment-from-series-via-form-editing (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/filtering-visible=false-maxAppointmentsPerCell=0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/filtering-visible=false-maxAppointmentsPerCell=0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f5d453892faf
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/filtering-visible=false-maxAppointmentsPerCell=0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/filtering-visible=false-maxAppointmentsPerCell=1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/filtering-visible=false-maxAppointmentsPerCell=1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f5d453892faf
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/filtering-visible=false-maxAppointmentsPerCell=1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/filtering-visible=true-maxAppointmentsPerCell=0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/filtering-visible=true-maxAppointmentsPerCell=0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c70a2a31dfd0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/filtering-visible=true-maxAppointmentsPerCell=0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/filtering-visible=true-maxAppointmentsPerCell=1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/filtering-visible=true-maxAppointmentsPerCell=1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0f82962c5abb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/filtering-visible=true-maxAppointmentsPerCell=1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/filtering-visible=undefined-maxAppointmentsPerCell=0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/filtering-visible=undefined-maxAppointmentsPerCell=0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c70a2a31dfd0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/filtering-visible=undefined-maxAppointmentsPerCell=0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/filtering-visible=undefined-maxAppointmentsPerCell=1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/filtering-visible=undefined-maxAppointmentsPerCell=1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0f82962c5abb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/filtering-visible=undefined-maxAppointmentsPerCell=1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/long-appointment-day-view-T1086079 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/long-appointment-day-view-T1086079 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a380788551be
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/long-appointment-day-view-T1086079 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/long-appointment-week-view-T1086079 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/long-appointment-week-view-T1086079 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d9fa9016c33d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/long-appointment-week-view-T1086079 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-agenda_view-and-non-rtl_mode (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-agenda_view-and-non-rtl_mode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..acdd0ec81fa3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-agenda_view-and-non-rtl_mode (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-agenda_view-and-rtl_mode (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-agenda_view-and-rtl_mode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d95c95900a20
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-agenda_view-and-rtl_mode (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-day_view-and-non-rtl_mode (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-day_view-and-non-rtl_mode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d1068e99438c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-day_view-and-non-rtl_mode (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-day_view-and-rtl_mode (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-day_view-and-rtl_mode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..641d5e94255b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-day_view-and-rtl_mode (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-month_view-and-non-rtl_mode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1dde320d052c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-month_view-and-non-rtl_mode (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-month_view-and-rtl_mode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..eb9c4820aab3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-month_view-and-rtl_mode (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-timelineDay_view-and-non-rtl_mode (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-timelineDay_view-and-non-rtl_mode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c8eef13dc91b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-timelineDay_view-and-non-rtl_mode (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-timelineDay_view-and-rtl_mode (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-timelineDay_view-and-rtl_mode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c3afd716d7e2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-timelineDay_view-and-rtl_mode (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-timelineMonth_view-and-non-rtl_mode (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-timelineMonth_view-and-non-rtl_mode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7bb6f5d6fb82
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-timelineMonth_view-and-non-rtl_mode (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-timelineMonth_view-and-rtl_mode (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-timelineMonth_view-and-rtl_mode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f157faf135d0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-timelineMonth_view-and-rtl_mode (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-timelineWeek_view-and-non-rtl_mode (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-timelineWeek_view-and-non-rtl_mode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6425250ddaae
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-timelineWeek_view-and-non-rtl_mode (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-timelineWeek_view-and-rtl_mode (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-timelineWeek_view-and-rtl_mode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..36037a9f3edb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-timelineWeek_view-and-rtl_mode (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-timelineWorkWeek_view-and-non-rtl_mode (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-timelineWorkWeek_view-and-non-rtl_mode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..47e0731e3de1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-timelineWorkWeek_view-and-non-rtl_mode (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-timelineWorkWeek_view-and-rtl_mode (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-timelineWorkWeek_view-and-rtl_mode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5e8fb5cde2bb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-timelineWorkWeek_view-and-rtl_mode (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-week_view-and-non-rtl_mode (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-week_view-and-non-rtl_mode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4a2dae10abf4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-week_view-and-non-rtl_mode (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-week_view-and-rtl_mode (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-week_view-and-rtl_mode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..559155ddf9a4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-week_view-and-rtl_mode (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-workWeek_view-and-non-rtl_mode (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-workWeek_view-and-non-rtl_mode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..eeccb07b533e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-workWeek_view-and-non-rtl_mode (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-workWeek_view-and-rtl_mode (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-workWeek_view-and-rtl_mode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5619f8c3554b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/recurrent-appointment-in-workWeek_view-and-rtl_mode (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-cell-sizes-in-month (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-cell-sizes-in-month (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b777e89bb24c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-cell-sizes-in-month (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-cell-sizes-in-timelineMonth (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-cell-sizes-in-timelineMonth (fluent-next.blue.light).png
new file mode 100644
index 000000000000..66da5e3e9cf4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-cell-sizes-in-timelineMonth (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-cell-sizes-in-timelineWeek (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-cell-sizes-in-timelineWeek (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c9f3de222ccc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-cell-sizes-in-timelineWeek (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-cell-sizes-in-week (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-cell-sizes-in-week (fluent-next.blue.light).png
new file mode 100644
index 000000000000..69aef6f0de08
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-cell-sizes-in-week (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-cell-sizes-with-all-day-panel-in-week (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-cell-sizes-with-all-day-panel-in-week (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fd366112e85f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-cell-sizes-with-all-day-panel-in-week (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-group-panel-in-month-cross-scrolling=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0fd31045a8bf
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-group-panel-in-month-cross-scrolling=false (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-group-panel-in-month-cross-scrolling=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..756afa734081
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-group-panel-in-month-cross-scrolling=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-group-panel-in-timelineMonth-cross-scrolling=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-group-panel-in-timelineMonth-cross-scrolling=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9c16403b85c9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-group-panel-in-timelineMonth-cross-scrolling=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-group-panel-in-timelineMonth-cross-scrolling=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-group-panel-in-timelineMonth-cross-scrolling=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9c16403b85c9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-group-panel-in-timelineMonth-cross-scrolling=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-group-panel-in-timelineWeek-cross-scrolling=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-group-panel-in-timelineWeek-cross-scrolling=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..62f1e8ae8ec2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-group-panel-in-timelineWeek-cross-scrolling=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-group-panel-in-timelineWeek-cross-scrolling=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-group-panel-in-timelineWeek-cross-scrolling=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..62f1e8ae8ec2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-group-panel-in-timelineWeek-cross-scrolling=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-group-panel-in-week-cross-scrolling=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-group-panel-in-week-cross-scrolling=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2af0124c4872
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-group-panel-in-week-cross-scrolling=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-group-panel-in-week-cross-scrolling=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-group-panel-in-week-cross-scrolling=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f747ce435385
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-group-panel-in-week-cross-scrolling=true (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-header-panel-in-month-cross-scrolling=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7b8a744ff26d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-header-panel-in-month-cross-scrolling=false (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-header-panel-in-month-cross-scrolling=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..682b768eda3d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-header-panel-in-month-cross-scrolling=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-header-panel-in-timelineMonth-cross-scrolling=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-header-panel-in-timelineMonth-cross-scrolling=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6b9b852c7ee7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-header-panel-in-timelineMonth-cross-scrolling=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-header-panel-in-timelineMonth-cross-scrolling=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-header-panel-in-timelineMonth-cross-scrolling=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6b9b852c7ee7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-header-panel-in-timelineMonth-cross-scrolling=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-header-panel-in-timelineWeek-cross-scrolling=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-header-panel-in-timelineWeek-cross-scrolling=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..884d73d8d6f1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-header-panel-in-timelineWeek-cross-scrolling=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-header-panel-in-timelineWeek-cross-scrolling=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-header-panel-in-timelineWeek-cross-scrolling=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..884d73d8d6f1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-header-panel-in-timelineWeek-cross-scrolling=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-header-panel-in-week-cross-scrolling=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-header-panel-in-week-cross-scrolling=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..da0f9569cd4a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-header-panel-in-week-cross-scrolling=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-header-panel-in-week-cross-scrolling=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-header-panel-in-week-cross-scrolling=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4056c2e3dd84
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-header-panel-in-week-cross-scrolling=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-time-panel-in-agenda-cross-scrolling=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-time-panel-in-agenda-cross-scrolling=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4ded310810ab
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-time-panel-in-agenda-cross-scrolling=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-time-panel-in-agenda-cross-scrolling=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-time-panel-in-agenda-cross-scrolling=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4ded310810ab
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-time-panel-in-agenda-cross-scrolling=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-time-panel-in-week-cross-scrolling=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-time-panel-in-week-cross-scrolling=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7f66af583bca
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-time-panel-in-week-cross-scrolling=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-time-panel-in-week-cross-scrolling=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-time-panel-in-week-cross-scrolling=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7f66af583bca
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/customization/etalons/custom-time-panel-in-week-cross-scrolling=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=agenda-resource=false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=agenda-resource=false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..22e8ee3504a1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=agenda-resource=false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=agenda-resource=true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=agenda-resource=true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3c76ce4e9db6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=agenda-resource=true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=day-resource=false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=day-resource=false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e51b04f9b77c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=day-resource=false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=day-resource=true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=day-resource=true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5adc605bb10b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=day-resource=true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=month-resource=false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=month-resource=false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..89190b16afec
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=month-resource=false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=month-resource=true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=month-resource=true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8416a53029d2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=month-resource=true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=timelineDay-resource=false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=timelineDay-resource=false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8c3f987ec8f1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=timelineDay-resource=false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=timelineDay-resource=true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=timelineDay-resource=true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..770c0450d363
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=timelineDay-resource=true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=timelineMonth-resource=false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=timelineMonth-resource=false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5d8d90ffb127
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=timelineMonth-resource=false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=timelineMonth-resource=true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=timelineMonth-resource=true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e6ac3d31779e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=timelineMonth-resource=true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=timelineWeek-resource=false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=timelineWeek-resource=false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..abc1a375d1d4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=timelineWeek-resource=false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=timelineWeek-resource=true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=timelineWeek-resource=true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2cf314211d9c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=timelineWeek-resource=true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=timelineWorkWeek-resource=false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=timelineWorkWeek-resource=false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6afa80bcc14c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=timelineWorkWeek-resource=false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=timelineWorkWeek-resource=true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=timelineWorkWeek-resource=true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..21a84313410b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=timelineWorkWeek-resource=true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=week-resource=false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=week-resource=false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2e8e31e2a389
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=week-resource=false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=week-resource=true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=week-resource=true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ee8f915c87c3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=week-resource=true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=workWeek-resource=false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=workWeek-resource=false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a703ee965e11
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=workWeek-resource=false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=workWeek-resource=true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=workWeek-resource=true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e45e8e528587
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/etalons/resource(view=workWeek-resource=true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=agenda-orientation=horizontal) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=agenda-orientation=horizontal) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a45bb32ed395
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=agenda-orientation=horizontal) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=agenda-orientation=vertical) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=agenda-orientation=vertical) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a45bb32ed395
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=agenda-orientation=vertical) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=day-orientation=horizontal) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=day-orientation=horizontal) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a612bdf51776
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=day-orientation=horizontal) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=day-orientation=vertical) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=day-orientation=vertical) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..847a49e30503
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=day-orientation=vertical) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=month-orientation=horizontal) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=month-orientation=horizontal) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..08ccd732a3d5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=month-orientation=horizontal) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=month-orientation=vertical) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=month-orientation=vertical) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..077bf1850b49
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=month-orientation=vertical) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=timelineDay-orientation=horizontal) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=timelineDay-orientation=horizontal) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..691be82e4be3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=timelineDay-orientation=horizontal) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=timelineDay-orientation=vertical) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=timelineDay-orientation=vertical) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9a46dc5c56da
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=timelineDay-orientation=vertical) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=timelineMonth-orientation=horizontal) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=timelineMonth-orientation=horizontal) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..25235543b049
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=timelineMonth-orientation=horizontal) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=timelineMonth-orientation=vertical) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=timelineMonth-orientation=vertical) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d83af3abb936
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=timelineMonth-orientation=vertical) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=timelineWeek-orientation=horizontal) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=timelineWeek-orientation=horizontal) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d60dbd16eb7d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=timelineWeek-orientation=horizontal) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=timelineWeek-orientation=vertical) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=timelineWeek-orientation=vertical) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6fc9b9f70405
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=timelineWeek-orientation=vertical) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=timelineWorkWeek-orientation=horizontal) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=timelineWorkWeek-orientation=horizontal) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d307147bd046
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=timelineWorkWeek-orientation=horizontal) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=timelineWorkWeek-orientation=vertical) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=timelineWorkWeek-orientation=vertical) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ed439b0de38f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=timelineWorkWeek-orientation=vertical) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=week-orientation=horizontal) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=week-orientation=horizontal) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ed28f10d5967
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=week-orientation=horizontal) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=week-orientation=vertical) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=week-orientation=vertical) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..783dc1dc70ab
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=week-orientation=vertical) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=workWeek-orientation=horizontal) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=workWeek-orientation=horizontal) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..861bfb1dfca3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=workWeek-orientation=horizontal) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=workWeek-orientation=vertical) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=workWeek-orientation=vertical) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1c2bfd7c141f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/groups/etalons/groups(view=workWeek-orientation=vertical) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/appointment-template-currentView=agenda (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/appointment-template-currentView=agenda (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5e54b7925c42
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/appointment-template-currentView=agenda (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/appointment-template-currentView=day (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/appointment-template-currentView=day (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fbc00e153b9e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/appointment-template-currentView=day (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/appointment-template-currentView=month (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/appointment-template-currentView=month (fluent-next.blue.light).png
new file mode 100644
index 000000000000..15e70b6e6a49
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/appointment-template-currentView=month (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/appointment-template-currentView=timelineDay (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/appointment-template-currentView=timelineDay (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ca49be48b4ef
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/appointment-template-currentView=timelineDay (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/appointment-template-currentView=timelineWorkWeek (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/appointment-template-currentView=timelineWorkWeek (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c52c77656fd9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/appointment-template-currentView=timelineWorkWeek (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/appointment-template-currentView=workWeek (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/appointment-template-currentView=workWeek (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ccaf36dbdd07
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/appointment-template-currentView=workWeek (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/appointment-tooltip-template (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/appointment-tooltip-template (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d2e5bcf03825
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/appointment-tooltip-template (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/data-cell-template-currentView=day (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/data-cell-template-currentView=day (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2c80058e3cbe
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/data-cell-template-currentView=day (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/data-cell-template-currentView=month (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/data-cell-template-currentView=month (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ef0ca4d81de3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/data-cell-template-currentView=month (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/data-cell-template-currentView=timelineDay (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/data-cell-template-currentView=timelineDay (fluent-next.blue.light).png
new file mode 100644
index 000000000000..af070ab2c952
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/data-cell-template-currentView=timelineDay (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/data-cell-template-currentView=timelineMonth (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/data-cell-template-currentView=timelineMonth (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5970c6d0e8f7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/data-cell-template-currentView=timelineMonth (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/data-cell-template-currentView=timelineWorkWeek (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/data-cell-template-currentView=timelineWorkWeek (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b2ee95babaad
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/data-cell-template-currentView=timelineWorkWeek (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/data-cell-template-currentView=workWeek (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/data-cell-template-currentView=workWeek (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f91e5a9aa38c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/etalons/data-cell-template-currentView=workWeek (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator-in-day-with-many-groups (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator-in-day-with-many-groups (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3191657ac7df
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator-in-day-with-many-groups (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator-in-week-with-many-groups (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator-in-week-with-many-groups (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8021a4f015ce
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator-in-week-with-many-groups (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T00-00-00_g-horizontal_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T00-00-00_g-horizontal_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f59adab10b73
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T00-00-00_g-horizontal_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T00-00-00_g-horizontal_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T00-00-00_g-horizontal_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9e2e251f387c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T00-00-00_g-horizontal_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T00-00-00_g-none_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T00-00-00_g-none_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..547b9a6ea76e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T00-00-00_g-none_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T00-00-00_g-none_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T00-00-00_g-none_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9ef0ad7befab
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T00-00-00_g-none_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T00-00-00_g-vertical_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T00-00-00_g-vertical_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1e559ab14db7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T00-00-00_g-vertical_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T00-00-00_g-vertical_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T00-00-00_g-vertical_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f554031c2595
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T00-00-00_g-vertical_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T06-30-00_g-horizontal_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T06-30-00_g-horizontal_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..aef88a0b30dd
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T06-30-00_g-horizontal_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T06-30-00_g-horizontal_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T06-30-00_g-horizontal_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f16e87c26c31
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T06-30-00_g-horizontal_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T06-30-00_g-none_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T06-30-00_g-none_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a44ce1ab0755
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T06-30-00_g-none_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T06-30-00_g-none_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T06-30-00_g-none_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a6b8c3a9f46b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T06-30-00_g-none_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T06-30-00_g-vertical_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T06-30-00_g-vertical_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1a8d2feeda2d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T06-30-00_g-vertical_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T06-30-00_g-vertical_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T06-30-00_g-vertical_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f04ae21a9ed3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T06-30-00_g-vertical_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T12-00-00_g-horizontal_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T12-00-00_g-horizontal_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8a3a6e594a58
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T12-00-00_g-horizontal_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T12-00-00_g-horizontal_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T12-00-00_g-horizontal_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c50b51cf6f52
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T12-00-00_g-horizontal_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T12-00-00_g-none_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T12-00-00_g-none_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..259053897c3c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T12-00-00_g-none_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T12-00-00_g-none_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T12-00-00_g-none_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a07416a90d19
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T12-00-00_g-none_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T12-00-00_g-vertical_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T12-00-00_g-vertical_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0b9b6bb84ca4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T12-00-00_g-vertical_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T12-00-00_g-vertical_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T12-00-00_g-vertical_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ff80d0fb9082
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T12-00-00_g-vertical_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T17-30-00_g-horizontal_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T17-30-00_g-horizontal_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..74a02bb35be0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T17-30-00_g-horizontal_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T17-30-00_g-horizontal_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T17-30-00_g-horizontal_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..02c97a07fdb7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T17-30-00_g-horizontal_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T17-30-00_g-none_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T17-30-00_g-none_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..11883098e896
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T17-30-00_g-none_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T17-30-00_g-none_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T17-30-00_g-none_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dfd00d530c1d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T17-30-00_g-none_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T17-30-00_g-vertical_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T17-30-00_g-vertical_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8d7c3545e3c2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T17-30-00_g-vertical_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T17-30-00_g-vertical_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T17-30-00_g-vertical_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2f32f609dd46
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T17-30-00_g-vertical_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T23-59-59_g-horizontal_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T23-59-59_g-horizontal_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1f54ab0b288d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T23-59-59_g-horizontal_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T23-59-59_g-horizontal_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T23-59-59_g-horizontal_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..36861d423633
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T23-59-59_g-horizontal_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T23-59-59_g-none_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T23-59-59_g-none_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..24c6a9bb012c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T23-59-59_g-none_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T23-59-59_g-none_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T23-59-59_g-none_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..832da93ca87f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T23-59-59_g-none_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T23-59-59_g-vertical_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T23-59-59_g-vertical_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fb52caba1a6b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T23-59-59_g-vertical_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T23-59-59_g-vertical_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T23-59-59_g-vertical_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d279192aa0cc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_day_2023-12-03T23-59-59_g-vertical_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T00-00-00_g-none_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T00-00-00_g-none_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0b1bb0751567
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T00-00-00_g-none_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T00-00-00_g-none_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T00-00-00_g-none_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f33320256f73
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T00-00-00_g-none_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T00-00-00_g-vertical_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T00-00-00_g-vertical_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6c35e1b2c964
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T00-00-00_g-vertical_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T00-00-00_g-vertical_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T00-00-00_g-vertical_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c89f6aa65e40
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T00-00-00_g-vertical_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T06-30-00_g-none_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T06-30-00_g-none_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..70e56d8f28af
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T06-30-00_g-none_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T06-30-00_g-none_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T06-30-00_g-none_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..42833c9d29c6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T06-30-00_g-none_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T06-30-00_g-vertical_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T06-30-00_g-vertical_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f5c828a1846c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T06-30-00_g-vertical_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T06-30-00_g-vertical_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T06-30-00_g-vertical_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2c5120589a1e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T06-30-00_g-vertical_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T12-00-00_g-none_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T12-00-00_g-none_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6c3c4877b73d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T12-00-00_g-none_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T12-00-00_g-none_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T12-00-00_g-none_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..703df07f84cf
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T12-00-00_g-none_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T12-00-00_g-vertical_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T12-00-00_g-vertical_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..16848ceaf121
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T12-00-00_g-vertical_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T12-00-00_g-vertical_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T12-00-00_g-vertical_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..16ef94c6574b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T12-00-00_g-vertical_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T17-30-00_g-none_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T17-30-00_g-none_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1da319c1b7f3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T17-30-00_g-none_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T17-30-00_g-none_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T17-30-00_g-none_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..32674d269ad5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T17-30-00_g-none_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T17-30-00_g-vertical_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T17-30-00_g-vertical_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b642ed9af82a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T17-30-00_g-vertical_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T17-30-00_g-vertical_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T17-30-00_g-vertical_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bd44f0bc7bb7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T17-30-00_g-vertical_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T23-59-59_g-none_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T23-59-59_g-none_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3707aa8daafa
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T23-59-59_g-none_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T23-59-59_g-none_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T23-59-59_g-none_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..147abdef10d5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T23-59-59_g-none_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T23-59-59_g-vertical_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T23-59-59_g-vertical_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8838bc3abdc1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T23-59-59_g-vertical_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T23-59-59_g-vertical_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T23-59-59_g-vertical_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b8522d2f5464
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineDay_2023-12-03T23-59-59_g-vertical_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineMonth_2023-12-03T00-00-00_g-none_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineMonth_2023-12-03T00-00-00_g-none_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..06085b8b081f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineMonth_2023-12-03T00-00-00_g-none_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineMonth_2023-12-03T00-00-00_g-vertical_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineMonth_2023-12-03T00-00-00_g-vertical_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9d2166d60a71
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineMonth_2023-12-03T00-00-00_g-vertical_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineMonth_2023-12-03T06-30-00_g-none_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineMonth_2023-12-03T06-30-00_g-none_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3c05d115b666
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineMonth_2023-12-03T06-30-00_g-none_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineMonth_2023-12-03T06-30-00_g-vertical_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineMonth_2023-12-03T06-30-00_g-vertical_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..111b08bc72d5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineMonth_2023-12-03T06-30-00_g-vertical_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineMonth_2023-12-03T12-00-00_g-none_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineMonth_2023-12-03T12-00-00_g-none_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e0ea552eb237
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineMonth_2023-12-03T12-00-00_g-none_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineMonth_2023-12-03T12-00-00_g-vertical_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineMonth_2023-12-03T12-00-00_g-vertical_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b3852962d870
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineMonth_2023-12-03T12-00-00_g-vertical_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineMonth_2023-12-03T17-30-00_g-none_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineMonth_2023-12-03T17-30-00_g-none_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e054d8d69b7f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineMonth_2023-12-03T17-30-00_g-none_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineMonth_2023-12-03T17-30-00_g-vertical_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineMonth_2023-12-03T17-30-00_g-vertical_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..336225812189
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineMonth_2023-12-03T17-30-00_g-vertical_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineMonth_2023-12-03T23-59-59_g-none_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineMonth_2023-12-03T23-59-59_g-none_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cdf3a833228c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineMonth_2023-12-03T23-59-59_g-none_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineMonth_2023-12-03T23-59-59_g-vertical_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineMonth_2023-12-03T23-59-59_g-vertical_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..267b43afe075
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineMonth_2023-12-03T23-59-59_g-vertical_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T00-00-00_g-none_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T00-00-00_g-none_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a0136e85f763
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T00-00-00_g-none_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T00-00-00_g-none_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T00-00-00_g-none_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bb6492ec6e3a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T00-00-00_g-none_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T00-00-00_g-vertical_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T00-00-00_g-vertical_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..68d4328ea84e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T00-00-00_g-vertical_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T00-00-00_g-vertical_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T00-00-00_g-vertical_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..71b31275fe35
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T00-00-00_g-vertical_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T06-30-00_g-none_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T06-30-00_g-none_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..98fcb9249565
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T06-30-00_g-none_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T06-30-00_g-none_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T06-30-00_g-none_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fb1dad15e6aa
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T06-30-00_g-none_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T06-30-00_g-vertical_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T06-30-00_g-vertical_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..237a93c247b9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T06-30-00_g-vertical_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T06-30-00_g-vertical_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T06-30-00_g-vertical_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0cff6e2471e2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T06-30-00_g-vertical_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T12-00-00_g-none_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T12-00-00_g-none_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c16660e16a6e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T12-00-00_g-none_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T12-00-00_g-none_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T12-00-00_g-none_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7c8063fa6e74
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T12-00-00_g-none_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T12-00-00_g-vertical_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T12-00-00_g-vertical_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..eda491ec0507
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T12-00-00_g-vertical_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T12-00-00_g-vertical_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T12-00-00_g-vertical_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..62063725031a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T12-00-00_g-vertical_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T17-30-00_g-none_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T17-30-00_g-none_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cbf62679aa20
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T17-30-00_g-none_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T17-30-00_g-none_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T17-30-00_g-none_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0beefa97f1aa
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T17-30-00_g-none_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T17-30-00_g-vertical_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T17-30-00_g-vertical_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dc96acafd0be
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T17-30-00_g-vertical_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T17-30-00_g-vertical_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T17-30-00_g-vertical_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2da229db66dd
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T17-30-00_g-vertical_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T23-59-59_g-none_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T23-59-59_g-none_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ac1bda43af48
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T23-59-59_g-none_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T23-59-59_g-none_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T23-59-59_g-none_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6a039c9480f1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T23-59-59_g-none_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T23-59-59_g-vertical_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T23-59-59_g-vertical_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d81f76f2a295
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T23-59-59_g-vertical_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T23-59-59_g-vertical_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T23-59-59_g-vertical_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8b9c3c6cf3d3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_timelineWeek_2023-12-03T23-59-59_g-vertical_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T00-00-00_g-horizontal_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T00-00-00_g-horizontal_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5d88249be6ef
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T00-00-00_g-horizontal_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T00-00-00_g-horizontal_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T00-00-00_g-horizontal_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bef0d449429c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T00-00-00_g-horizontal_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T00-00-00_g-none_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T00-00-00_g-none_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d0235f81fa5d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T00-00-00_g-none_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T00-00-00_g-none_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T00-00-00_g-none_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..25d8c9559737
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T00-00-00_g-none_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T00-00-00_g-vertical_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T00-00-00_g-vertical_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..557f905bdd99
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T00-00-00_g-vertical_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T00-00-00_g-vertical_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T00-00-00_g-vertical_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..46edac94712e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T00-00-00_g-vertical_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T06-30-00_g-horizontal_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T06-30-00_g-horizontal_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..29a153d4e9e1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T06-30-00_g-horizontal_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T06-30-00_g-horizontal_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T06-30-00_g-horizontal_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..88f17ac4f5a7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T06-30-00_g-horizontal_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T06-30-00_g-none_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T06-30-00_g-none_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..83b074c49ce3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T06-30-00_g-none_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T06-30-00_g-none_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T06-30-00_g-none_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..29b01e5759c1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T06-30-00_g-none_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T06-30-00_g-vertical_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T06-30-00_g-vertical_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..eed0e747825f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T06-30-00_g-vertical_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T06-30-00_g-vertical_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T06-30-00_g-vertical_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..44ca5df7d738
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T06-30-00_g-vertical_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T12-00-00_g-horizontal_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T12-00-00_g-horizontal_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6a7f5f016857
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T12-00-00_g-horizontal_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T12-00-00_g-horizontal_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T12-00-00_g-horizontal_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..474d74f4a7c5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T12-00-00_g-horizontal_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T12-00-00_g-none_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T12-00-00_g-none_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d2b4ab6af0cc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T12-00-00_g-none_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T12-00-00_g-none_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T12-00-00_g-none_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2bf9239e06af
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T12-00-00_g-none_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T12-00-00_g-vertical_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T12-00-00_g-vertical_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fbafe7d0c09b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T12-00-00_g-vertical_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T12-00-00_g-vertical_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T12-00-00_g-vertical_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8dd9083f0c53
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T12-00-00_g-vertical_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T17-30-00_g-horizontal_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T17-30-00_g-horizontal_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9d74c904b832
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T17-30-00_g-horizontal_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T17-30-00_g-horizontal_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T17-30-00_g-horizontal_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1e69b2b305e7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T17-30-00_g-horizontal_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T17-30-00_g-none_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T17-30-00_g-none_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ddbc69355d12
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T17-30-00_g-none_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T17-30-00_g-none_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T17-30-00_g-none_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1faef02ebc3f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T17-30-00_g-none_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T17-30-00_g-vertical_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T17-30-00_g-vertical_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..61ab348d8ce3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T17-30-00_g-vertical_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T17-30-00_g-vertical_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T17-30-00_g-vertical_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..88158016276b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T17-30-00_g-vertical_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T23-59-59_g-horizontal_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T23-59-59_g-horizontal_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..42b7ccadcc23
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T23-59-59_g-horizontal_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T23-59-59_g-horizontal_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T23-59-59_g-horizontal_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4426ba04f0f9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T23-59-59_g-horizontal_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T23-59-59_g-none_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T23-59-59_g-none_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1af1020c0aa9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T23-59-59_g-none_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T23-59-59_g-none_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T23-59-59_g-none_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..144d768e413e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T23-59-59_g-none_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T23-59-59_g-vertical_0_24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T23-59-59_g-vertical_0_24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..11771dd40b77
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T23-59-59_g-vertical_0_24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T23-59-59_g-vertical_6_18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T23-59-59_g-vertical_6_18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1a9e4f39e4e2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/current-time-indicator_week_2023-12-03T23-59-59_g-vertical_6_18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-day-crossScrolling=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-day-crossScrolling=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..271475aac29a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-day-crossScrolling=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-day-crossScrolling=false-horizontal-grouping (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-day-crossScrolling=false-horizontal-grouping (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5870e61f8019
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-day-crossScrolling=false-horizontal-grouping (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-day-crossScrolling=false-vertical-grouping (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-day-crossScrolling=false-vertical-grouping (fluent-next.blue.light).png
new file mode 100644
index 000000000000..620d4296e009
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-day-crossScrolling=false-vertical-grouping (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-day-crossScrolling=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-day-crossScrolling=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..271475aac29a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-day-crossScrolling=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-day-crossScrolling=true-horizontal-grouping (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-day-crossScrolling=true-horizontal-grouping (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5870e61f8019
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-day-crossScrolling=true-horizontal-grouping (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-day-crossScrolling=true-vertical-grouping (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-day-crossScrolling=true-vertical-grouping (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a727c2ed5925
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-day-crossScrolling=true-vertical-grouping (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineDay-crossScrolling=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineDay-crossScrolling=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..061aae82975e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineDay-crossScrolling=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineDay-crossScrolling=false-horizontal-grouping (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineDay-crossScrolling=false-horizontal-grouping (fluent-next.blue.light).png
new file mode 100644
index 000000000000..59b58b5948fe
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineDay-crossScrolling=false-horizontal-grouping (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineDay-crossScrolling=false-vertical-grouping (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineDay-crossScrolling=false-vertical-grouping (fluent-next.blue.light).png
new file mode 100644
index 000000000000..59b58b5948fe
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineDay-crossScrolling=false-vertical-grouping (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineDay-crossScrolling=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineDay-crossScrolling=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..061aae82975e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineDay-crossScrolling=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineDay-crossScrolling=true-horizontal-grouping (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineDay-crossScrolling=true-horizontal-grouping (fluent-next.blue.light).png
new file mode 100644
index 000000000000..59b58b5948fe
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineDay-crossScrolling=true-horizontal-grouping (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineDay-crossScrolling=true-vertical-grouping (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineDay-crossScrolling=true-vertical-grouping (fluent-next.blue.light).png
new file mode 100644
index 000000000000..59b58b5948fe
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineDay-crossScrolling=true-vertical-grouping (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineMonth-crossScrolling=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineMonth-crossScrolling=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c3309f7f6174
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineMonth-crossScrolling=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineMonth-crossScrolling=false-horizontal-grouping (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineMonth-crossScrolling=false-horizontal-grouping (fluent-next.blue.light).png
new file mode 100644
index 000000000000..adfce0996db5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineMonth-crossScrolling=false-horizontal-grouping (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineMonth-crossScrolling=false-vertical-grouping (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineMonth-crossScrolling=false-vertical-grouping (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b45a7ea54f59
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineMonth-crossScrolling=false-vertical-grouping (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineMonth-crossScrolling=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineMonth-crossScrolling=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c3309f7f6174
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineMonth-crossScrolling=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineMonth-crossScrolling=true-horizontal-grouping (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineMonth-crossScrolling=true-horizontal-grouping (fluent-next.blue.light).png
new file mode 100644
index 000000000000..adfce0996db5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineMonth-crossScrolling=true-horizontal-grouping (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineMonth-crossScrolling=true-vertical-grouping (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineMonth-crossScrolling=true-vertical-grouping (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b45a7ea54f59
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineMonth-crossScrolling=true-vertical-grouping (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineWeek-crossScrolling=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineWeek-crossScrolling=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..17fa87d90569
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineWeek-crossScrolling=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineWeek-crossScrolling=false-horizontal-grouping (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineWeek-crossScrolling=false-horizontal-grouping (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ebab5407a9c8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineWeek-crossScrolling=false-horizontal-grouping (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineWeek-crossScrolling=false-vertical-grouping (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineWeek-crossScrolling=false-vertical-grouping (fluent-next.blue.light).png
new file mode 100644
index 000000000000..360b247888aa
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineWeek-crossScrolling=false-vertical-grouping (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineWeek-crossScrolling=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineWeek-crossScrolling=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..17fa87d90569
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineWeek-crossScrolling=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineWeek-crossScrolling=true-horizontal-grouping (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineWeek-crossScrolling=true-horizontal-grouping (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ebab5407a9c8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineWeek-crossScrolling=true-horizontal-grouping (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineWeek-crossScrolling=true-vertical-grouping (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineWeek-crossScrolling=true-vertical-grouping (fluent-next.blue.light).png
new file mode 100644
index 000000000000..360b247888aa
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-timelineWeek-crossScrolling=true-vertical-grouping (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-week-crossScrolling=false (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-week-crossScrolling=false (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7218bde0a7ec
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-week-crossScrolling=false (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-week-crossScrolling=false-horizontal-grouping (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-week-crossScrolling=false-horizontal-grouping (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2430ed7ad8dc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-week-crossScrolling=false-horizontal-grouping (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-week-crossScrolling=false-vertical-grouping (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-week-crossScrolling=false-vertical-grouping (fluent-next.blue.light).png
new file mode 100644
index 000000000000..068d6cc81dcb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-week-crossScrolling=false-vertical-grouping (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-week-crossScrolling=true (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-week-crossScrolling=true (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7218bde0a7ec
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-week-crossScrolling=true (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-week-crossScrolling=true-horizontal-grouping (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-week-crossScrolling=true-horizontal-grouping (fluent-next.blue.light).png
new file mode 100644
index 000000000000..706bc6f6d7f0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-week-crossScrolling=true-horizontal-grouping (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-week-crossScrolling=true-vertical-grouping (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-week-crossScrolling=true-vertical-grouping (fluent-next.blue.light).png
new file mode 100644
index 000000000000..45d460c71e45
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-in-week-crossScrolling=true-vertical-grouping (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-virtual-scrolling-week-end (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-virtual-scrolling-week-end (fluent-next.blue.light).png
new file mode 100644
index 000000000000..becd463c1064
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-virtual-scrolling-week-end (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-virtual-scrolling-week-end-with-current-time-indicator (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-virtual-scrolling-week-end-with-current-time-indicator (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f8a0f044f240
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-virtual-scrolling-week-end-with-current-time-indicator (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-virtual-scrolling-week-start (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-virtual-scrolling-week-start (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c1530f56662e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-virtual-scrolling-week-start (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-virtual-scrolling-week-start-with-current-time-indicator (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-virtual-scrolling-week-start-with-current-time-indicator (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4b128979a3dd
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/timeIndication/etalons/shader-virtual-scrolling-week-start-with-current-time-indicator (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/day/etalons/day-orientation=horizontal-allDay=false-interval=1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/day/etalons/day-orientation=horizontal-allDay=false-interval=1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8a4ede9c0441
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/day/etalons/day-orientation=horizontal-allDay=false-interval=1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/day/etalons/day-orientation=horizontal-allDay=false-interval=2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/day/etalons/day-orientation=horizontal-allDay=false-interval=2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..94704decf237
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/day/etalons/day-orientation=horizontal-allDay=false-interval=2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/day/etalons/day-orientation=horizontal-allDay=true-interval=1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/day/etalons/day-orientation=horizontal-allDay=true-interval=1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..262f291b422e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/day/etalons/day-orientation=horizontal-allDay=true-interval=1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/day/etalons/day-orientation=horizontal-allDay=true-interval=2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/day/etalons/day-orientation=horizontal-allDay=true-interval=2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..665a86a94f88
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/day/etalons/day-orientation=horizontal-allDay=true-interval=2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/day/etalons/day-orientation=vertical-allDay=false-interval=1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/day/etalons/day-orientation=vertical-allDay=false-interval=1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fc54314e75ae
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/day/etalons/day-orientation=vertical-allDay=false-interval=1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/day/etalons/day-orientation=vertical-allDay=false-interval=2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/day/etalons/day-orientation=vertical-allDay=false-interval=2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e6dc9112dc88
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/day/etalons/day-orientation=vertical-allDay=false-interval=2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/day/etalons/day-orientation=vertical-allDay=true-interval=1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/day/etalons/day-orientation=vertical-allDay=true-interval=1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..26f219aff367
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/day/etalons/day-orientation=vertical-allDay=true-interval=1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/day/etalons/day-orientation=vertical-allDay=true-interval=2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/day/etalons/day-orientation=vertical-allDay=true-interval=2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4a12441b92aa
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/day/etalons/day-orientation=vertical-allDay=true-interval=2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/etalons/cross-scrolling-sync (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/etalons/cross-scrolling-sync (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fcf2df581ca5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/etalons/cross-scrolling-sync (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/etalons/cross-scrolling-sync-visibility (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/etalons/cross-scrolling-sync-visibility (fluent-next.blue.light).png
new file mode 100644
index 000000000000..79070823158d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/etalons/cross-scrolling-sync-visibility (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/etalons/work-week-first-day-of-week (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/etalons/work-week-first-day-of-week (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5b805da074b6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/etalons/work-week-first-day-of-week (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/complex-start-date-in-timelineWeek (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/complex-start-date-in-timelineWeek (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fecfecc51e25
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/complex-start-date-in-timelineWeek (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/complex-start-date-in-timelineWorkWeek (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/complex-start-date-in-timelineWorkWeek (fluent-next.blue.light).png
new file mode 100644
index 000000000000..622d5d2e70ea
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/complex-start-date-in-timelineWorkWeek (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/complex-start-date-in-week (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/complex-start-date-in-week (fluent-next.blue.light).png
new file mode 100644
index 000000000000..57d5f40197a4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/complex-start-date-in-week (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/complex-start-date-in-workWeek (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/complex-start-date-in-workWeek (fluent-next.blue.light).png
new file mode 100644
index 000000000000..780d86387e2d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/complex-start-date-in-workWeek (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-month (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-month (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5ce5ea1764cf
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-month (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-month-with-form (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-month-with-form (fluent-next.blue.light).png
new file mode 100644
index 000000000000..644a52ac27e2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-month-with-form (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-timelineDay (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-timelineDay (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9c60aaf77334
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-timelineDay (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-timelineDay-with-form (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-timelineDay-with-form (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b090a1f7d3a2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-timelineDay-with-form (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-timelineMonth (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-timelineMonth (fluent-next.blue.light).png
new file mode 100644
index 000000000000..647ec51f9f83
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-timelineMonth (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-timelineMonth-with-form (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-timelineMonth-with-form (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1ab28bf159c6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-timelineMonth-with-form (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-timelineWeek (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-timelineWeek (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ef55f812f983
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-timelineWeek (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-timelineWeek-with-form (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-timelineWeek-with-form (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e4157a0fcb46
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-timelineWeek-with-form (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-timelineWorkWeek (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-timelineWorkWeek (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bc6e7a6b4b0e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-timelineWorkWeek (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-timelineWorkWeek-with-form (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-timelineWorkWeek-with-form (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2aa8dd83b09e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-timelineWorkWeek-with-form (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-week (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-week (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fe1ebff513e2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-week (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-week-with-form (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-week-with-form (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b985ba0ffbc4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-week-with-form (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-workWeek (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-workWeek (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c7e7e77f5719
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-workWeek (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-workWeek-with-form (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-workWeek-with-form (fluent-next.blue.light).png
new file mode 100644
index 000000000000..458c656a951b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/intervalCount/etalons/start-date-in-workWeek-with-form (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/material/etalons/week-without-all-day-panel (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/material/etalons/week-without-all-day-panel (fluent-next.blue.light).png
new file mode 100644
index 000000000000..77feb87c1488
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/material/etalons/week-without-all-day-panel (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/timeline/etalons/timeline-month-change-current-date (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/timeline/etalons/timeline-month-change-current-date (fluent-next.blue.light).png
new file mode 100644
index 000000000000..aded2a28f811
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/views/timeline/etalons/timeline-month-change-current-date (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-february-2021 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-february-2021 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1afbc1bc6ecb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-february-2021 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-interval-count-12 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-interval-count-12 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..400a911be39f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-interval-count-12 (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment(rtl=false, text=Appointment spans 2 rows) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ee257b97d965
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment(rtl=false, text=Appointment spans 2 rows) (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment(rtl=false, text=Appointment spans 3 rows) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7f1386e0ac00
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment(rtl=false, text=Appointment spans 3 rows) (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment(rtl=false, text=Appointment spans all rows) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1c6603b4b59c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment(rtl=false, text=Appointment spans all rows) (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment(rtl=true, text=Appointment spans 2 rows) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b20cab441208
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment(rtl=true, text=Appointment spans 2 rows) (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment(rtl=true, text=Appointment spans 3 rows) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9bd0e2c3bae2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment(rtl=true, text=Appointment spans 3 rows) (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment(rtl=true, text=Appointment spans all rows) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f02d2bba3335
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment(rtl=true, text=Appointment spans all rows) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-february(rtl=false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-february(rtl=false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b3711e77f500
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-february(rtl=false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-february(rtl=true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-february(rtl=true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b48a83c89695
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-february(rtl=true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-january(rtl=false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-january(rtl=false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2ede1052a254
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-january(rtl=false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-january(rtl=true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-january(rtl=true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cd2ebf733d8b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-january(rtl=true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-march(rtl=false) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-march(rtl=false) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8ff9789a2f92
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-march(rtl=false) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-march(rtl=true) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-march(rtl=true) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8fd57994bf55
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-appointment-several-months-march(rtl=true) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-recurrence-appointment-several-months-february (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-recurrence-appointment-several-months-february (fluent-next.blue.light).png
new file mode 100644
index 000000000000..31417f180e26
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-recurrence-appointment-several-months-february (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-recurrence-appointment-several-months-january (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-recurrence-appointment-several-months-january (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2e8e135694f5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/month/etalons/month-long-recurrence-appointment-several-months-january (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/recurrences/etalons/basic-recurrence-appointment-after-drag (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/recurrences/etalons/basic-recurrence-appointment-after-drag (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c08ef3a7fa37
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/recurrences/etalons/basic-recurrence-appointment-after-drag (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/recurrences/etalons/basic-recurrence-appointment-init (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/recurrences/etalons/basic-recurrence-appointment-init (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7356a8a949bd
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/recurrences/etalons/basic-recurrence-appointment-init (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/recurrences/etalons/recurrence-delete-dialog-screenshot (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/recurrences/etalons/recurrence-delete-dialog-screenshot (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f8231aad5616
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/recurrences/etalons/recurrence-delete-dialog-screenshot (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/recurrences/etalons/recurrence-edit-dialog-screenshot (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/recurrences/etalons/recurrence-edit-dialog-screenshot (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2ba3d3967f1f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/recurrences/etalons/recurrence-edit-dialog-screenshot (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/resizeAppointments/etalons/resize-all-day-workweek-weekend-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/resizeAppointments/etalons/resize-all-day-workweek-weekend-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..39f2497b5c6f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/resizeAppointments/etalons/resize-all-day-workweek-weekend-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/resizeAppointments/etalons/resize-all-day-workweek-weekend-1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/resizeAppointments/etalons/resize-all-day-workweek-weekend-1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..21019ee3814b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/resizeAppointments/etalons/resize-all-day-workweek-weekend-1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/T1102713/etalons/recurrent-appointment-timezone-dst__editing__drag-n-drop-down__summer-time (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/T1102713/etalons/recurrent-appointment-timezone-dst__editing__drag-n-drop-down__summer-time (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e47fd2b9b044
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/T1102713/etalons/recurrent-appointment-timezone-dst__editing__drag-n-drop-down__summer-time (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/T1102713/etalons/recurrent-appointment-timezone-dst__editing__drag-n-drop-down__winter-time (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/T1102713/etalons/recurrent-appointment-timezone-dst__editing__drag-n-drop-down__winter-time (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2f396434c63a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/T1102713/etalons/recurrent-appointment-timezone-dst__editing__drag-n-drop-down__winter-time (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/T1102713/etalons/recurrent-appointment-timezone-dst__editing__drag-n-drop-up__summer-time (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/T1102713/etalons/recurrent-appointment-timezone-dst__editing__drag-n-drop-up__summer-time (fluent-next.blue.light).png
new file mode 100644
index 000000000000..781b0418493e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/T1102713/etalons/recurrent-appointment-timezone-dst__editing__drag-n-drop-up__summer-time (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/T1102713/etalons/recurrent-appointment-timezone-dst__editing__drag-n-drop-up__winter-time (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/T1102713/etalons/recurrent-appointment-timezone-dst__editing__drag-n-drop-up__winter-time (fluent-next.blue.light).png
new file mode 100644
index 000000000000..91094cd3433d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/T1102713/etalons/recurrent-appointment-timezone-dst__editing__drag-n-drop-up__winter-time (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/T1102713/etalons/recurrent-appointment-timezone-dst__editing__popup__summer-time (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/T1102713/etalons/recurrent-appointment-timezone-dst__editing__popup__summer-time (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4b2041b263ea
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/T1102713/etalons/recurrent-appointment-timezone-dst__editing__popup__summer-time (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/T1102713/etalons/recurrent-appointment-timezone-dst__editing__popup__winter-time (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/T1102713/etalons/recurrent-appointment-timezone-dst__editing__popup__winter-time (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7aa7af99445c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/T1102713/etalons/recurrent-appointment-timezone-dst__editing__popup__winter-time (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/T1102713/etalons/recurrent-appointment-timezone-dst__editing__resize-bottom__summer-time (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/T1102713/etalons/recurrent-appointment-timezone-dst__editing__resize-bottom__summer-time (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bc1ace7b7eee
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/T1102713/etalons/recurrent-appointment-timezone-dst__editing__resize-bottom__summer-time (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/T1102713/etalons/recurrent-appointment-timezone-dst__editing__resize-bottom__winter-time (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/T1102713/etalons/recurrent-appointment-timezone-dst__editing__resize-bottom__winter-time (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a6a54c9e5860
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/T1102713/etalons/recurrent-appointment-timezone-dst__editing__resize-bottom__winter-time (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/T1102713/etalons/recurrent-appointment-timezone-dst__editing__resize-top__summer-time (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/T1102713/etalons/recurrent-appointment-timezone-dst__editing__resize-top__summer-time (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dfecde000eb9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/T1102713/etalons/recurrent-appointment-timezone-dst__editing__resize-top__summer-time (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/T1102713/etalons/recurrent-appointment-timezone-dst__editing__resize-top__winter-time (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/T1102713/etalons/recurrent-appointment-timezone-dst__editing__resize-top__winter-time (fluent-next.blue.light).png
new file mode 100644
index 000000000000..76cd82f5c0f6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/T1102713/etalons/recurrent-appointment-timezone-dst__editing__resize-top__winter-time (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-monthly-recurrent__greater-date__greater-timezone__next-view-date (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-monthly-recurrent__greater-date__greater-timezone__next-view-date (fluent-next.blue.light).png
new file mode 100644
index 000000000000..38c14c0d26b6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-monthly-recurrent__greater-date__greater-timezone__next-view-date (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-monthly-recurrent__greater-date__greater-timezone__same-view-date (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-monthly-recurrent__greater-date__greater-timezone__same-view-date (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d141d55a05ef
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-monthly-recurrent__greater-date__greater-timezone__same-view-date (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-monthly-recurrent__greater-date__lower-timezone__next-view-date (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-monthly-recurrent__greater-date__lower-timezone__next-view-date (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3f136a9dc51f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-monthly-recurrent__greater-date__lower-timezone__next-view-date (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-monthly-recurrent__greater-date__lower-timezone__same-view-date (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-monthly-recurrent__greater-date__lower-timezone__same-view-date (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d141d55a05ef
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-monthly-recurrent__greater-date__lower-timezone__same-view-date (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-monthly-recurrent__greater-date__same-timezone__next-view-date (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-monthly-recurrent__greater-date__same-timezone__next-view-date (fluent-next.blue.light).png
new file mode 100644
index 000000000000..191e873605aa
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-monthly-recurrent__greater-date__same-timezone__next-view-date (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-monthly-recurrent__greater-date__same-timezone__same-view-date (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-monthly-recurrent__greater-date__same-timezone__same-view-date (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d141d55a05ef
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-monthly-recurrent__greater-date__same-timezone__same-view-date (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-monthly-recurrent__lower-date__greater-timezone (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-monthly-recurrent__lower-date__greater-timezone (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5aba742fab44
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-monthly-recurrent__lower-date__greater-timezone (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-monthly-recurrent__lower-date__lower-timezone (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-monthly-recurrent__lower-date__lower-timezone (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b32636f1ca73
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-monthly-recurrent__lower-date__lower-timezone (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-monthly-recurrent__lower-date__same-timezone (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-monthly-recurrent__lower-date__same-timezone (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bed5a6fd68b7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-monthly-recurrent__lower-date__same-timezone (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-monthly-recurrent__same-date__greater-timezone (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-monthly-recurrent__same-date__greater-timezone (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9c59f1ce67a8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-monthly-recurrent__same-date__greater-timezone (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-monthly-recurrent__same-date__lower-timezone (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-monthly-recurrent__same-date__lower-timezone (fluent-next.blue.light).png
new file mode 100644
index 000000000000..24fb8c9c95eb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-monthly-recurrent__same-date__lower-timezone (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-monthly-recurrent__same-date__same-timezone (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-monthly-recurrent__same-date__same-timezone (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bed5a6fd68b7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-monthly-recurrent__same-date__same-timezone (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__multiple-appointment__first-week__greater-timezone (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__multiple-appointment__first-week__greater-timezone (fluent-next.blue.light).png
new file mode 100644
index 000000000000..926475abbe2d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__multiple-appointment__first-week__greater-timezone (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__multiple-appointment__first-week__lower-timezone (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__multiple-appointment__first-week__lower-timezone (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a713fae4b599
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__multiple-appointment__first-week__lower-timezone (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__multiple-appointment__first-week__same-timezone (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__multiple-appointment__first-week__same-timezone (fluent-next.blue.light).png
new file mode 100644
index 000000000000..84f8a02805aa
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__multiple-appointment__first-week__same-timezone (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__multiple-appointment__second-week__greater-timezone (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__multiple-appointment__second-week__greater-timezone (fluent-next.blue.light).png
new file mode 100644
index 000000000000..01a30d4e5f48
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__multiple-appointment__second-week__greater-timezone (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__multiple-appointment__second-week__lower-timezone (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__multiple-appointment__second-week__lower-timezone (fluent-next.blue.light).png
new file mode 100644
index 000000000000..31125c14e10d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__multiple-appointment__second-week__lower-timezone (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__multiple-appointment__second-week__same-timezone (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__multiple-appointment__second-week__same-timezone (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9fd3b135bca7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__multiple-appointment__second-week__same-timezone (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-appointment__day-shift__greater-timezone (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-appointment__day-shift__greater-timezone (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9c59f1ce67a8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-appointment__day-shift__greater-timezone (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-appointment__day-shift__lower-timezone (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-appointment__day-shift__lower-timezone (fluent-next.blue.light).png
new file mode 100644
index 000000000000..387b477edbfa
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-appointment__day-shift__lower-timezone (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-appointment__first-week__max-negative-timezone-offset (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-appointment__first-week__max-negative-timezone-offset (fluent-next.blue.light).png
new file mode 100644
index 000000000000..556742598461
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-appointment__first-week__max-negative-timezone-offset (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-appointment__first-week__max-positive-timezone-offset (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-appointment__first-week__max-positive-timezone-offset (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2ef11c62c246
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-appointment__first-week__max-positive-timezone-offset (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-appointment__next-view-shift__first-week (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-appointment__next-view-shift__first-week (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d141d55a05ef
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-appointment__next-view-shift__first-week (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-appointment__next-view-shift__second-week (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-appointment__next-view-shift__second-week (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4ec227903f03
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-appointment__next-view-shift__second-week (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-appointment__previous-view-shift__before-week (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-appointment__previous-view-shift__before-week (fluent-next.blue.light).png
new file mode 100644
index 000000000000..284571f84c69
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-appointment__previous-view-shift__before-week (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-appointment__previous-view-shift__first-week (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-appointment__previous-view-shift__first-week (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a8840a237f3f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-appointment__previous-view-shift__first-week (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-appointment__same-timezone (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-appointment__same-timezone (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bed5a6fd68b7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-appointment__same-timezone (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-appointment__second-week__max-negative-timezone-offset (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-appointment__second-week__max-negative-timezone-offset (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4174b19584b8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-appointment__second-week__max-negative-timezone-offset (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-appointment__second-week__max-positive-timezone-offset (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-appointment__second-week__max-positive-timezone-offset (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d550b780e8c9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-appointment__second-week__max-positive-timezone-offset (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-appointment__week-shift__greater-timezone (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-appointment__week-shift__greater-timezone (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b03ebff5bbe8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-appointment__week-shift__greater-timezone (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-appointment__week-shift__lower-timezone (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-appointment__week-shift__lower-timezone (fluent-next.blue.light).png
new file mode 100644
index 000000000000..62337f87c7ff
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-appointment__week-shift__lower-timezone (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-evening-appointment__same-timezone (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-evening-appointment__same-timezone (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2142876b1c02
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-evening-appointment__same-timezone (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-morning-appointment__same-timezone (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-morning-appointment__same-timezone (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c2209eee2600
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-weekly-recurrent__one-morning-appointment__same-timezone (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-yearly-recurrent__greater-date__greater-timezone__next-view-date (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-yearly-recurrent__greater-date__greater-timezone__next-view-date (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5addcfa7f923
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-yearly-recurrent__greater-date__greater-timezone__next-view-date (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-yearly-recurrent__greater-date__greater-timezone__same-view-date (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-yearly-recurrent__greater-date__greater-timezone__same-view-date (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d141d55a05ef
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-yearly-recurrent__greater-date__greater-timezone__same-view-date (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-yearly-recurrent__greater-date__lower-timezone__next-view-date (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-yearly-recurrent__greater-date__lower-timezone__next-view-date (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c3dc0b6c00de
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-yearly-recurrent__greater-date__lower-timezone__next-view-date (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-yearly-recurrent__greater-date__lower-timezone__same-view-date (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-yearly-recurrent__greater-date__lower-timezone__same-view-date (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d141d55a05ef
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-yearly-recurrent__greater-date__lower-timezone__same-view-date (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-yearly-recurrent__greater-date__same-timezone__next-view-date (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-yearly-recurrent__greater-date__same-timezone__next-view-date (fluent-next.blue.light).png
new file mode 100644
index 000000000000..08611eff0b2c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-yearly-recurrent__greater-date__same-timezone__next-view-date (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-yearly-recurrent__greater-date__same-timezone__same-view-date (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-yearly-recurrent__greater-date__same-timezone__same-view-date (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d141d55a05ef
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-yearly-recurrent__greater-date__same-timezone__same-view-date (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-yearly-recurrent__lower-date__greater-timezone (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-yearly-recurrent__lower-date__greater-timezone (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5aba742fab44
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-yearly-recurrent__lower-date__greater-timezone (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-yearly-recurrent__lower-date__lower-timezone (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-yearly-recurrent__lower-date__lower-timezone (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b32636f1ca73
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-yearly-recurrent__lower-date__lower-timezone (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-yearly-recurrent__lower-date__same-timezone (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-yearly-recurrent__lower-date__same-timezone (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bed5a6fd68b7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-yearly-recurrent__lower-date__same-timezone (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-yearly-recurrent__same-date__greater-timezone (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-yearly-recurrent__same-date__greater-timezone (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5aba742fab44
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-yearly-recurrent__same-date__greater-timezone (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-yearly-recurrent__same-date__lower-timezone (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-yearly-recurrent__same-date__lower-timezone (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b32636f1ca73
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-yearly-recurrent__same-date__lower-timezone (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-yearly-recurrent__same-date__same-timezone (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-yearly-recurrent__same-date__same-timezone (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bed5a6fd68b7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/timezone-yearly-recurrent__same-date__same-timezone (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/without-timezone-recurrent__monthly-appointment__greater-timezone (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/without-timezone-recurrent__monthly-appointment__greater-timezone (fluent-next.blue.light).png
new file mode 100644
index 000000000000..996c10112c52
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/without-timezone-recurrent__monthly-appointment__greater-timezone (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/without-timezone-recurrent__monthly-appointment__lower-timezone (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/without-timezone-recurrent__monthly-appointment__lower-timezone (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e5679d98f8e0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/without-timezone-recurrent__monthly-appointment__lower-timezone (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/without-timezone-recurrent__monthly-appointment__same-timezone (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/without-timezone-recurrent__monthly-appointment__same-timezone (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bed5a6fd68b7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/without-timezone-recurrent__monthly-appointment__same-timezone (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/without-timezone-recurrent__weekly-appointment__greater-timezone (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/without-timezone-recurrent__weekly-appointment__greater-timezone (fluent-next.blue.light).png
new file mode 100644
index 000000000000..996c10112c52
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/without-timezone-recurrent__weekly-appointment__greater-timezone (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/without-timezone-recurrent__weekly-appointment__lower-timezone (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/without-timezone-recurrent__weekly-appointment__lower-timezone (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e5679d98f8e0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/without-timezone-recurrent__weekly-appointment__lower-timezone (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/without-timezone-recurrent__weekly-appointment__same-timezone (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/without-timezone-recurrent__weekly-appointment__same-timezone (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bed5a6fd68b7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/without-timezone-recurrent__weekly-appointment__same-timezone (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/without-timezone-recurrent__weekly-corner-appointments__greater-timezone (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/without-timezone-recurrent__weekly-corner-appointments__greater-timezone (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d8268cf0d2a7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/without-timezone-recurrent__weekly-corner-appointments__greater-timezone (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/without-timezone-recurrent__weekly-morning-appointment__greater-timezone (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/without-timezone-recurrent__weekly-morning-appointment__greater-timezone (fluent-next.blue.light).png
new file mode 100644
index 000000000000..68a606e88c7e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/without-timezone-recurrent__weekly-morning-appointment__greater-timezone (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/without-timezone-recurrent__yearly-appointment__greater-timezone (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/without-timezone-recurrent__yearly-appointment__greater-timezone (fluent-next.blue.light).png
new file mode 100644
index 000000000000..996c10112c52
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/without-timezone-recurrent__yearly-appointment__greater-timezone (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/without-timezone-recurrent__yearly-appointment__lower-timezone (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/without-timezone-recurrent__yearly-appointment__lower-timezone (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e5679d98f8e0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/without-timezone-recurrent__yearly-appointment__lower-timezone (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/without-timezone-recurrent__yearly-appointment__same-timezone (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/without-timezone-recurrent__yearly-appointment__same-timezone (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bed5a6fd68b7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/timezone/recurrence/etalons/without-timezone-recurrent__yearly-appointment__same-timezone (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/tooltipBehaviour/etalons/appointment-desktop-tooltip-screenshot (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/tooltipBehaviour/etalons/appointment-desktop-tooltip-screenshot (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7c3079a86749
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/tooltipBehaviour/etalons/appointment-desktop-tooltip-screenshot (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/tooltipBehaviour/etalons/appointment-mobile-tooltip-screenshot (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/tooltipBehaviour/etalons/appointment-mobile-tooltip-screenshot (fluent-next.blue.light).png
new file mode 100644
index 000000000000..55f334c241e4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/tooltipBehaviour/etalons/appointment-mobile-tooltip-screenshot (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/tooltipBehaviour/etalons/collector-tooltip-focused-list-item (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/tooltipBehaviour/etalons/collector-tooltip-focused-list-item (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ee378fb2991d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/tooltipBehaviour/etalons/collector-tooltip-focused-list-item (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/tooltipBehaviour/etalons/tooltip-rendering-with-react (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/tooltipBehaviour/etalons/tooltip-rendering-with-react (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7005a0341e59
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/tooltipBehaviour/etalons/tooltip-rendering-with-react (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/T1263428-virtual-scrolling-render-appointment (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/T1263428-virtual-scrolling-render-appointment (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e66b6aafe888
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/T1263428-virtual-scrolling-render-appointment (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-horizontal-end (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-horizontal-end (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8594572c0195
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-horizontal-end (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-horizontal-middle (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-horizontal-middle (fluent-next.blue.light).png
new file mode 100644
index 000000000000..97c8989c5a9f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-horizontal-middle (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-horizontal-start (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-horizontal-start (fluent-next.blue.light).png
new file mode 100644
index 000000000000..98e0da3458c8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-horizontal-start (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-vertical-end (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-vertical-end (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8e8a25dbeb37
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-vertical-end (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-vertical-middle (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-vertical-middle (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8fc4e33220f3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-vertical-middle (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-vertical-start (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-vertical-start (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c6c6914bd8ba
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-month-vertical-start (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-week-horizontal-end (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-week-horizontal-end (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f8b0368cfae0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-week-horizontal-end (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-week-horizontal-middle (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-week-horizontal-middle (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a7b18f444294
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-week-horizontal-middle (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-week-horizontal-start (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-week-horizontal-start (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3a3125ed14fc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-week-horizontal-start (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-week-vertical-end (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-week-vertical-end (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d82ad011db71
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-week-vertical-end (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-week-vertical-middle (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-week-vertical-middle (fluent-next.blue.light).png
new file mode 100644
index 000000000000..523edd6ba8d6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-week-vertical-middle (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-week-vertical-start (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-week-vertical-start (fluent-next.blue.light).png
new file mode 100644
index 000000000000..80ffa9ca3bac
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-week-vertical-start (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-workWeek-horizontal-end (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-workWeek-horizontal-end (fluent-next.blue.light).png
new file mode 100644
index 000000000000..90641f5793db
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-workWeek-horizontal-end (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-workWeek-horizontal-middle (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-workWeek-horizontal-middle (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d7e75675d666
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-workWeek-horizontal-middle (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-workWeek-horizontal-start (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-workWeek-horizontal-start (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d47d73f46385
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-workWeek-horizontal-start (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-workWeek-vertical-end (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-workWeek-vertical-end (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1903f06c341e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-workWeek-vertical-end (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-workWeek-vertical-middle (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-workWeek-vertical-middle (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e6dbbb2e6c0c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-workWeek-vertical-middle (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-workWeek-vertical-start (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-workWeek-vertical-start (fluent-next.blue.light).png
new file mode 100644
index 000000000000..06ccf6b572b1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-many-cells-workWeek-vertical-start (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-after-scroll (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-after-scroll (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0f75c0de7f73
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-after-scroll (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-after-scroll-grouping-by-date (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-after-scroll-grouping-by-date (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f71940c1f467
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-after-scroll-grouping-by-date (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-after-scroll-horizontal-grouping (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-after-scroll-horizontal-grouping (fluent-next.blue.light).png
new file mode 100644
index 000000000000..431696be8a6f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-after-scroll-horizontal-grouping (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-after-scroll-horizontal-grouping-scaling (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-after-scroll-horizontal-grouping-scaling (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9ac54b00ea37
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-after-scroll-horizontal-grouping-scaling (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-before-scroll (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-before-scroll (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0f75c0de7f73
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-before-scroll (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-before-scroll-grouping-by-date (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-before-scroll-grouping-by-date (fluent-next.blue.light).png
new file mode 100644
index 000000000000..118f00d5d4db
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-before-scroll-grouping-by-date (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-before-scroll-horizontal-grouping (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-before-scroll-horizontal-grouping (fluent-next.blue.light).png
new file mode 100644
index 000000000000..51b4ac901f3c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-before-scroll-horizontal-grouping (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-before-scroll-horizontal-grouping-scaling (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-before-scroll-horizontal-grouping-scaling (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ba0a125a5ecb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-month-before-scroll-horizontal-grouping-scaling (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timeline-month-change-current-date-virtual (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timeline-month-change-current-date-virtual (fluent-next.blue.light).png
new file mode 100644
index 000000000000..88683d826154
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timeline-month-change-current-date-virtual (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineDay-after-scroll (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineDay-after-scroll (fluent-next.blue.light).png
new file mode 100644
index 000000000000..060ca2527b39
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineDay-after-scroll (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineDay-after-scroll-grouping-by-date (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineDay-after-scroll-grouping-by-date (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d8bba9facb92
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineDay-after-scroll-grouping-by-date (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineDay-after-scroll-horizontal-grouping (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineDay-after-scroll-horizontal-grouping (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ceaf64f75bbc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineDay-after-scroll-horizontal-grouping (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineDay-after-scroll-horizontal-grouping-scaling (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineDay-after-scroll-horizontal-grouping-scaling (fluent-next.blue.light).png
new file mode 100644
index 000000000000..aaf14bc6a772
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineDay-after-scroll-horizontal-grouping-scaling (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineDay-before-scroll (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineDay-before-scroll (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2cfb6c8af8ff
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineDay-before-scroll (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineDay-before-scroll-grouping-by-date (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineDay-before-scroll-grouping-by-date (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7ef88e822ac4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineDay-before-scroll-grouping-by-date (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineDay-before-scroll-horizontal-grouping (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineDay-before-scroll-horizontal-grouping (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3d2ff4dae43b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineDay-before-scroll-horizontal-grouping (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineDay-before-scroll-horizontal-grouping-scaling (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineDay-before-scroll-horizontal-grouping-scaling (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cb6128c24ea7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineDay-before-scroll-horizontal-grouping-scaling (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineMonth-after-scroll (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineMonth-after-scroll (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ba889757633e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineMonth-after-scroll (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineMonth-after-scroll-grouping-by-date (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineMonth-after-scroll-grouping-by-date (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5dfbe338135f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineMonth-after-scroll-grouping-by-date (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineMonth-after-scroll-horizontal-grouping (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineMonth-after-scroll-horizontal-grouping (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d8facdd74dbd
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineMonth-after-scroll-horizontal-grouping (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineMonth-after-scroll-horizontal-grouping-scaling (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineMonth-after-scroll-horizontal-grouping-scaling (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e7266a50fad0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineMonth-after-scroll-horizontal-grouping-scaling (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineMonth-before-scroll (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineMonth-before-scroll (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b280abbdd473
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineMonth-before-scroll (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineMonth-before-scroll-grouping-by-date (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineMonth-before-scroll-grouping-by-date (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e1f223fae03c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineMonth-before-scroll-grouping-by-date (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineMonth-before-scroll-horizontal-grouping (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineMonth-before-scroll-horizontal-grouping (fluent-next.blue.light).png
new file mode 100644
index 000000000000..01f662df9afa
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineMonth-before-scroll-horizontal-grouping (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineMonth-before-scroll-horizontal-grouping-scaling (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineMonth-before-scroll-horizontal-grouping-scaling (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c107f09c0a56
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineMonth-before-scroll-horizontal-grouping-scaling (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineWeek-after-scroll (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineWeek-after-scroll (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6a7ef7bb84a3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineWeek-after-scroll (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineWeek-after-scroll-grouping-by-date (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineWeek-after-scroll-grouping-by-date (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ebba6cf6ec07
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineWeek-after-scroll-grouping-by-date (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineWeek-after-scroll-horizontal-grouping (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineWeek-after-scroll-horizontal-grouping (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e985941e6546
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineWeek-after-scroll-horizontal-grouping (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineWeek-after-scroll-horizontal-grouping-scaling (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineWeek-after-scroll-horizontal-grouping-scaling (fluent-next.blue.light).png
new file mode 100644
index 000000000000..78789303cd83
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineWeek-after-scroll-horizontal-grouping-scaling (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineWeek-before-scroll (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineWeek-before-scroll (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8faafef2977e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineWeek-before-scroll (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineWeek-before-scroll-grouping-by-date (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineWeek-before-scroll-grouping-by-date (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c85fad1a4fa9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineWeek-before-scroll-grouping-by-date (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineWeek-before-scroll-horizontal-grouping (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineWeek-before-scroll-horizontal-grouping (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bcecedf2342d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineWeek-before-scroll-horizontal-grouping (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineWeek-before-scroll-horizontal-grouping-scaling (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineWeek-before-scroll-horizontal-grouping-scaling (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ec3a34c43ce0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-timelineWeek-before-scroll-horizontal-grouping-scaling (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-week-after-scroll (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-week-after-scroll (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a4bee06e2427
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-week-after-scroll (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-week-after-scroll-grouping-by-date (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-week-after-scroll-grouping-by-date (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0b89acc0b1a9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-week-after-scroll-grouping-by-date (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-week-after-scroll-horizontal-grouping (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-week-after-scroll-horizontal-grouping (fluent-next.blue.light).png
new file mode 100644
index 000000000000..462cb3b17d6d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-week-after-scroll-horizontal-grouping (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-week-after-scroll-horizontal-grouping-scaling (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-week-after-scroll-horizontal-grouping-scaling (fluent-next.blue.light).png
new file mode 100644
index 000000000000..26935b21cf6c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-week-after-scroll-horizontal-grouping-scaling (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-week-before-scroll (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-week-before-scroll (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7925cd9880d8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-week-before-scroll (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-week-before-scroll-grouping-by-date (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-week-before-scroll-grouping-by-date (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e9ce79290a90
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-week-before-scroll-grouping-by-date (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-week-before-scroll-horizontal-grouping (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-week-before-scroll-horizontal-grouping (fluent-next.blue.light).png
new file mode 100644
index 000000000000..717a8bef327f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-week-before-scroll-horizontal-grouping (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-week-before-scroll-horizontal-grouping-scaling (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-week-before-scroll-horizontal-grouping-scaling (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8d8dc7543e42
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual-scrolling-week-before-scroll-horizontal-grouping-scaling (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual_scroll_cell_width (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual_scroll_cell_width (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6c64fdcf856e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual_scroll_cell_width (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual_scroll_timeline_3000 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual_scroll_timeline_3000 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6c3b4f439c31
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual_scroll_timeline_3000 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/day_usual-appts-start-cell-dts_t-America-Los_Angeles-summer_offset--60 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/day_usual-appts-start-cell-dts_t-America-Los_Angeles-summer_offset--60 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..07a35a2ccb50
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/day_usual-appts-start-cell-dts_t-America-Los_Angeles-summer_offset--60 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/day_usual-appts-start-cell-dts_t-America-Los_Angeles-summer_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/day_usual-appts-start-cell-dts_t-America-Los_Angeles-summer_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..050023843d1b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/day_usual-appts-start-cell-dts_t-America-Los_Angeles-summer_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/day_usual-appts-start-cell-dts_t-America-Los_Angeles-summer_offset-60 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/day_usual-appts-start-cell-dts_t-America-Los_Angeles-summer_offset-60 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5264572624b9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/day_usual-appts-start-cell-dts_t-America-Los_Angeles-summer_offset-60 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/day_usual-appts-start-cell-dts_t-America-Los_Angeles-winter_offset--60 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/day_usual-appts-start-cell-dts_t-America-Los_Angeles-winter_offset--60 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1d3689f083f6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/day_usual-appts-start-cell-dts_t-America-Los_Angeles-winter_offset--60 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/day_usual-appts-start-cell-dts_t-America-Los_Angeles-winter_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/day_usual-appts-start-cell-dts_t-America-Los_Angeles-winter_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ff82b6769057
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/day_usual-appts-start-cell-dts_t-America-Los_Angeles-winter_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/day_usual-appts-start-cell-dts_t-America-Los_Angeles-winter_offset-60 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/day_usual-appts-start-cell-dts_t-America-Los_Angeles-winter_offset-60 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a2ab0dc39866
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/day_usual-appts-start-cell-dts_t-America-Los_Angeles-winter_offset-60 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/day_usual-appts-start-cell-dts_t-Europe-Berlin-summer_offset--60 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/day_usual-appts-start-cell-dts_t-Europe-Berlin-summer_offset--60 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..07a35a2ccb50
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/day_usual-appts-start-cell-dts_t-Europe-Berlin-summer_offset--60 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/day_usual-appts-start-cell-dts_t-Europe-Berlin-summer_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/day_usual-appts-start-cell-dts_t-Europe-Berlin-summer_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..050023843d1b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/day_usual-appts-start-cell-dts_t-Europe-Berlin-summer_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/day_usual-appts-start-cell-dts_t-Europe-Berlin-summer_offset-60 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/day_usual-appts-start-cell-dts_t-Europe-Berlin-summer_offset-60 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5264572624b9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/day_usual-appts-start-cell-dts_t-Europe-Berlin-summer_offset-60 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/day_usual-appts-start-cell-dts_t-Europe-Berlin-winter_offset--60 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/day_usual-appts-start-cell-dts_t-Europe-Berlin-winter_offset--60 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..35e9e2600b1e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/day_usual-appts-start-cell-dts_t-Europe-Berlin-winter_offset--60 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/day_usual-appts-start-cell-dts_t-Europe-Berlin-winter_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/day_usual-appts-start-cell-dts_t-Europe-Berlin-winter_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a3d3ae9a1573
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/day_usual-appts-start-cell-dts_t-Europe-Berlin-winter_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/day_usual-appts-start-cell-dts_t-Europe-Berlin-winter_offset-60 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/day_usual-appts-start-cell-dts_t-Europe-Berlin-winter_offset-60 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..120a98403a8b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/day_usual-appts-start-cell-dts_t-Europe-Berlin-winter_offset-60 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-America-Los_Angeles-summer-local_offset--360 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-America-Los_Angeles-summer-local_offset--360 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c2d0d3e876f6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-America-Los_Angeles-summer-local_offset--360 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-America-Los_Angeles-summer-local_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-America-Los_Angeles-summer-local_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1c2831d3a7a5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-America-Los_Angeles-summer-local_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-America-Los_Angeles-summer-local_offset-360 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-America-Los_Angeles-summer-local_offset-360 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8e8aea3166ed
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-America-Los_Angeles-summer-local_offset-360 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-America-Los_Angeles-summer-utc_offset--360 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-America-Los_Angeles-summer-utc_offset--360 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d268ee8f780a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-America-Los_Angeles-summer-utc_offset--360 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-America-Los_Angeles-summer-utc_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-America-Los_Angeles-summer-utc_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4ce23a9d7d88
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-America-Los_Angeles-summer-utc_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-America-Los_Angeles-summer-utc_offset-360 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-America-Los_Angeles-summer-utc_offset-360 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a1647a1b0f2d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-America-Los_Angeles-summer-utc_offset-360 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-America-Los_Angeles-winter-local_offset--360 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-America-Los_Angeles-winter-local_offset--360 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e49be82a7cde
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-America-Los_Angeles-winter-local_offset--360 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-America-Los_Angeles-winter-local_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-America-Los_Angeles-winter-local_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5e761aa9052c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-America-Los_Angeles-winter-local_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-America-Los_Angeles-winter-local_offset-360 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-America-Los_Angeles-winter-local_offset-360 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bcc08a3ff55d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-America-Los_Angeles-winter-local_offset-360 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-America-Los_Angeles-winter-utc_offset--360 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-America-Los_Angeles-winter-utc_offset--360 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..89e3e4bfce62
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-America-Los_Angeles-winter-utc_offset--360 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-America-Los_Angeles-winter-utc_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-America-Los_Angeles-winter-utc_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b0c390f9f755
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-America-Los_Angeles-winter-utc_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-America-Los_Angeles-winter-utc_offset-360 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-America-Los_Angeles-winter-utc_offset-360 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cd61eb0bea98
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-America-Los_Angeles-winter-utc_offset-360 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-Europe-Berlin-summer-local_offset--360 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-Europe-Berlin-summer-local_offset--360 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ddba28340418
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-Europe-Berlin-summer-local_offset--360 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-Europe-Berlin-summer-local_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-Europe-Berlin-summer-local_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1bd4079c2567
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-Europe-Berlin-summer-local_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-Europe-Berlin-summer-local_offset-360 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-Europe-Berlin-summer-local_offset-360 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..98b63a3e8b7c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-Europe-Berlin-summer-local_offset-360 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-Europe-Berlin-summer-utc_offset--360 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-Europe-Berlin-summer-utc_offset--360 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..67e30727c255
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-Europe-Berlin-summer-utc_offset--360 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-Europe-Berlin-summer-utc_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-Europe-Berlin-summer-utc_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fe3bacfbbafc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-Europe-Berlin-summer-utc_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-Europe-Berlin-summer-utc_offset-360 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-Europe-Berlin-summer-utc_offset-360 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..51869953df45
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-Europe-Berlin-summer-utc_offset-360 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-Europe-Berlin-winter-local_offset--360 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-Europe-Berlin-winter-local_offset--360 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..84c76d23c310
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-Europe-Berlin-winter-local_offset--360 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-Europe-Berlin-winter-local_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-Europe-Berlin-winter-local_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ba819a6d7de4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-Europe-Berlin-winter-local_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-Europe-Berlin-winter-local_offset-360 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-Europe-Berlin-winter-local_offset-360 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..797c41607cb5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-Europe-Berlin-winter-local_offset-360 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-Europe-Berlin-winter-utc_offset--360 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-Europe-Berlin-winter-utc_offset--360 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..99af519a9145
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-Europe-Berlin-winter-utc_offset--360 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-Europe-Berlin-winter-utc_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-Europe-Berlin-winter-utc_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..87a345034acb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-Europe-Berlin-winter-utc_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-Europe-Berlin-winter-utc_offset-360 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-Europe-Berlin-winter-utc_offset-360 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9082564dbc93
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_appts-render-cross-dts_t-Europe-Berlin-winter-utc_offset-360 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_usual-appts-render-dts_t-America-Los_Angeles-summer_offset--360 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_usual-appts-render-dts_t-America-Los_Angeles-summer_offset--360 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9a068fd27e19
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_usual-appts-render-dts_t-America-Los_Angeles-summer_offset--360 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_usual-appts-render-dts_t-America-Los_Angeles-summer_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_usual-appts-render-dts_t-America-Los_Angeles-summer_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..218f36b4554c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_usual-appts-render-dts_t-America-Los_Angeles-summer_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_usual-appts-render-dts_t-America-Los_Angeles-summer_offset-360 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_usual-appts-render-dts_t-America-Los_Angeles-summer_offset-360 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..abfa5d3684d8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_usual-appts-render-dts_t-America-Los_Angeles-summer_offset-360 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_usual-appts-render-dts_t-America-Los_Angeles-winter_offset--360 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_usual-appts-render-dts_t-America-Los_Angeles-winter_offset--360 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..159994787426
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_usual-appts-render-dts_t-America-Los_Angeles-winter_offset--360 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_usual-appts-render-dts_t-America-Los_Angeles-winter_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_usual-appts-render-dts_t-America-Los_Angeles-winter_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..486d2ed412bb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_usual-appts-render-dts_t-America-Los_Angeles-winter_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_usual-appts-render-dts_t-America-Los_Angeles-winter_offset-360 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_usual-appts-render-dts_t-America-Los_Angeles-winter_offset-360 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..64c31bcbd1ee
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_usual-appts-render-dts_t-America-Los_Angeles-winter_offset-360 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_usual-appts-render-dts_t-Europe-Berlin-summer_offset--360 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_usual-appts-render-dts_t-Europe-Berlin-summer_offset--360 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..53acb7495f58
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_usual-appts-render-dts_t-Europe-Berlin-summer_offset--360 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_usual-appts-render-dts_t-Europe-Berlin-summer_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_usual-appts-render-dts_t-Europe-Berlin-summer_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..17f1c7d169e5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_usual-appts-render-dts_t-Europe-Berlin-summer_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_usual-appts-render-dts_t-Europe-Berlin-summer_offset-360 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_usual-appts-render-dts_t-Europe-Berlin-summer_offset-360 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..485d82d4c3fc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_usual-appts-render-dts_t-Europe-Berlin-summer_offset-360 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_usual-appts-render-dts_t-Europe-Berlin-winter_offset--360 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_usual-appts-render-dts_t-Europe-Berlin-winter_offset--360 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0110df6e56fa
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_usual-appts-render-dts_t-Europe-Berlin-winter_offset--360 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_usual-appts-render-dts_t-Europe-Berlin-winter_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_usual-appts-render-dts_t-Europe-Berlin-winter_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..af6844dd0100
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_usual-appts-render-dts_t-Europe-Berlin-winter_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_usual-appts-render-dts_t-Europe-Berlin-winter_offset-360 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_usual-appts-render-dts_t-Europe-Berlin-winter_offset-360 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3189e6255679
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/timezones/etalons/week_usual-appts-render-dts_t-Europe-Berlin-winter_offset-360 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_agenda-not-affected_offset--240 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_agenda-not-affected_offset--240 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..94e7567e3503
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_agenda-not-affected_offset--240 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_agenda-not-affected_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_agenda-not-affected_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..94e7567e3503
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_agenda-not-affected_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_agenda-not-affected_offset-240 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_agenda-not-affected_offset-240 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..94e7567e3503
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_agenda-not-affected_offset-240 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_appt-expr_drag-n-drop_week_offset--180 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_appt-expr_drag-n-drop_week_offset--180 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c4115ca5c233
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_appt-expr_drag-n-drop_week_offset--180 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_appt-expr_drag-n-drop_week_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_appt-expr_drag-n-drop_week_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8dc2fbc37434
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_appt-expr_drag-n-drop_week_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_appt-expr_drag-n-drop_week_offset-180 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_appt-expr_drag-n-drop_week_offset-180 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..80c450ba80b2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_appt-expr_drag-n-drop_week_offset-180 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_appt-expr_resize_week_offset--180 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_appt-expr_resize_week_offset--180 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..966ced386816
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_appt-expr_resize_week_offset--180 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_appt-expr_resize_week_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_appt-expr_resize_week_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c367ab2b5ae2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_appt-expr_resize_week_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_appt-expr_resize_week_offset-180 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_appt-expr_resize_week_offset-180 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..777b03cb641b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_appt-expr_resize_week_offset-180 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_appt-expr_week_offset--180 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_appt-expr_week_offset--180 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8841424f1d09
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_appt-expr_week_offset--180 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_appt-expr_week_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_appt-expr_week_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..820109e4e8fc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_appt-expr_week_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_appt-expr_week_offset-180 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_appt-expr_week_offset-180 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..69bf03674a5f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_appt-expr_week_offset-180 (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_all-day-appts_month_offset--735 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e7283082e29a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_all-day-appts_month_offset--735 (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_all-day-appts_month_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8843ba61bc8a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_all-day-appts_month_offset-0 (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_all-day-appts_month_offset-735 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f9c5f1ede325
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_all-day-appts_month_offset-735 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_all-day-appts_timelineMonth_offset--735 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_all-day-appts_timelineMonth_offset--735 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1be70fdc9ec4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_all-day-appts_timelineMonth_offset--735 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_all-day-appts_timelineMonth_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_all-day-appts_timelineMonth_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0a5d58f92e0e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_all-day-appts_timelineMonth_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_all-day-appts_timelineMonth_offset-735 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_all-day-appts_timelineMonth_offset-735 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..235a0e40ab59
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_all-day-appts_timelineMonth_offset-735 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_all-day-appts_week_offset--735 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_all-day-appts_week_offset--735 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e30e525651aa
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_all-day-appts_week_offset--735 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_all-day-appts_week_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_all-day-appts_week_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a79c5db6903a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_all-day-appts_week_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_all-day-appts_week_offset-735 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_all-day-appts_week_offset-735 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bdab6d7cabf0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_all-day-appts_week_offset-735 (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_usual-appts_month_offset--735 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e7283082e29a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_usual-appts_month_offset--735 (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_usual-appts_month_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8843ba61bc8a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_usual-appts_month_offset-0 (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_usual-appts_month_offset-735 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f9c5f1ede325
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_usual-appts_month_offset-735 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_usual-appts_timelineMonth_offset--735 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_usual-appts_timelineMonth_offset--735 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1be70fdc9ec4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_usual-appts_timelineMonth_offset--735 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_usual-appts_timelineMonth_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_usual-appts_timelineMonth_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0a5d58f92e0e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_usual-appts_timelineMonth_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_usual-appts_timelineMonth_offset-735 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_usual-appts_timelineMonth_offset-735 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..235a0e40ab59
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_usual-appts_timelineMonth_offset-735 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_usual-appts_week_offset--735 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_usual-appts_week_offset--735 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4e0d16bcb3ce
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_usual-appts_week_offset--735 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_usual-appts_week_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_usual-appts_week_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..566603770e01
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_usual-appts_week_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_usual-appts_week_offset-735 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_usual-appts_week_offset-735 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4398d86965ba
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_drag-n-drop_usual-appts_week_offset-735 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_day_offset--120 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_day_offset--120 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a48ffeb1c3da
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_day_offset--120 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_day_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_day_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ff54c1340b2e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_day_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_day_offset-120 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_day_offset-120 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f2290b3f55eb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_day_offset-120 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_month_offset--120 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_month_offset--120 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..69ad6245c590
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_month_offset--120 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_month_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_month_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..69ad6245c590
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_month_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_month_offset-120 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_month_offset-120 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..69ad6245c590
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_month_offset-120 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_timelineDay_offset--120 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_timelineDay_offset--120 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b913535b5bb4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_timelineDay_offset--120 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_timelineDay_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_timelineDay_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e13ef8b38210
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_timelineDay_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_timelineDay_offset-120 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_timelineDay_offset-120 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..942e441e00d2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_timelineDay_offset-120 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_timelineMonth_offset--120 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_timelineMonth_offset--120 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8efc90f85700
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_timelineMonth_offset--120 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_timelineMonth_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_timelineMonth_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8efc90f85700
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_timelineMonth_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_timelineMonth_offset-120 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_timelineMonth_offset-120 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8efc90f85700
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_timelineMonth_offset-120 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_week-all-day_offset--120 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_week-all-day_offset--120 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..18702957e25f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_week-all-day_offset--120 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_week-all-day_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_week-all-day_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c596df60db21
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_week-all-day_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_week-all-day_offset-120 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_week-all-day_offset-120 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..25838beb7d06
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_week-all-day_offset-120 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_week_offset--120 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_week_offset--120 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1e82631e28b2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_week_offset--120 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_week_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_week_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9bf112df5f36
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_week_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_week_offset-120 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_week_offset-120 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..68a3c86743a6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_keyboard_week_offset-120 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_day_offset--120_decrease (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_day_offset--120_decrease (fluent-next.blue.light).png
new file mode 100644
index 000000000000..656c2e54838b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_day_offset--120_decrease (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_day_offset--120_decrease_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_day_offset--120_decrease_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5c2b41f7a381
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_day_offset--120_decrease_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_day_offset--120_increase (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_day_offset--120_increase (fluent-next.blue.light).png
new file mode 100644
index 000000000000..656c2e54838b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_day_offset--120_increase (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_day_offset--120_increase_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_day_offset--120_increase_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5c2b41f7a381
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_day_offset--120_increase_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_day_offset-0_decrease (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_day_offset-0_decrease (fluent-next.blue.light).png
new file mode 100644
index 000000000000..622ee5e6e76f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_day_offset-0_decrease (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_day_offset-0_decrease_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_day_offset-0_decrease_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a43b924c491e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_day_offset-0_decrease_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_day_offset-0_increase (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_day_offset-0_increase (fluent-next.blue.light).png
new file mode 100644
index 000000000000..622ee5e6e76f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_day_offset-0_increase (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_day_offset-0_increase_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_day_offset-0_increase_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a43b924c491e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_day_offset-0_increase_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_day_offset-120_decrease (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_day_offset-120_decrease (fluent-next.blue.light).png
new file mode 100644
index 000000000000..616845336d5a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_day_offset-120_decrease (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_day_offset-120_decrease_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_day_offset-120_decrease_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7807999a6d8c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_day_offset-120_decrease_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_day_offset-120_increase (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_day_offset-120_increase (fluent-next.blue.light).png
new file mode 100644
index 000000000000..616845336d5a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_day_offset-120_increase (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_day_offset-120_increase_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_day_offset-120_increase_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7807999a6d8c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_day_offset-120_increase_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset--120_decrease (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset--120_decrease (fluent-next.blue.light).png
new file mode 100644
index 000000000000..04fe89c60355
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset--120_decrease (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset--120_decrease_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..74025b497883
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset--120_decrease_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset--120_increase (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset--120_increase (fluent-next.blue.light).png
new file mode 100644
index 000000000000..04fe89c60355
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset--120_increase (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset--120_increase_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..74025b497883
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset--120_increase_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-0_decrease (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-0_decrease (fluent-next.blue.light).png
new file mode 100644
index 000000000000..04fe89c60355
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-0_decrease (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-0_decrease_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..74025b497883
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-0_decrease_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-0_increase (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-0_increase (fluent-next.blue.light).png
new file mode 100644
index 000000000000..04fe89c60355
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-0_increase (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-0_increase_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..74025b497883
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-0_increase_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-120_decrease (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-120_decrease (fluent-next.blue.light).png
new file mode 100644
index 000000000000..04fe89c60355
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-120_decrease (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-120_decrease_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..74025b497883
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-120_decrease_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-120_increase (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-120_increase (fluent-next.blue.light).png
new file mode 100644
index 000000000000..04fe89c60355
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-120_increase (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-120_increase_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..74025b497883
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_month_offset-120_increase_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineDay_offset--120_decrease (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineDay_offset--120_decrease (fluent-next.blue.light).png
new file mode 100644
index 000000000000..13f1d1fd9370
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineDay_offset--120_decrease (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineDay_offset--120_decrease_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineDay_offset--120_decrease_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..30a94cf78f97
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineDay_offset--120_decrease_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineDay_offset--120_increase (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineDay_offset--120_increase (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a367c568dda0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineDay_offset--120_increase (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineDay_offset--120_increase_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineDay_offset--120_increase_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f3007c868170
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineDay_offset--120_increase_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineDay_offset-0_decrease (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineDay_offset-0_decrease (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ca1562c9a807
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineDay_offset-0_decrease (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineDay_offset-0_decrease_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineDay_offset-0_decrease_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b36c2daa6d43
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineDay_offset-0_decrease_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineDay_offset-0_increase (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineDay_offset-0_increase (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7366695fe14a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineDay_offset-0_increase (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineDay_offset-0_increase_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineDay_offset-0_increase_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..947268385d01
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineDay_offset-0_increase_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineDay_offset-120_decrease (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineDay_offset-120_decrease (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0e156bb259ea
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineDay_offset-120_decrease (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineDay_offset-120_decrease_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineDay_offset-120_decrease_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d2c4db31348a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineDay_offset-120_decrease_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineDay_offset-120_increase (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineDay_offset-120_increase (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ffe35bf95894
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineDay_offset-120_increase (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineDay_offset-120_increase_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineDay_offset-120_increase_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2015aba76392
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineDay_offset-120_increase_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineMonth_offset--120_decrease (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineMonth_offset--120_decrease (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8032da8d7ab6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineMonth_offset--120_decrease (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineMonth_offset--120_decrease_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineMonth_offset--120_decrease_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f596650f26a6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineMonth_offset--120_decrease_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineMonth_offset--120_increase (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineMonth_offset--120_increase (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8032da8d7ab6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineMonth_offset--120_increase (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineMonth_offset--120_increase_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineMonth_offset--120_increase_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f596650f26a6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineMonth_offset--120_increase_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineMonth_offset-0_decrease (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineMonth_offset-0_decrease (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8032da8d7ab6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineMonth_offset-0_decrease (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineMonth_offset-0_decrease_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineMonth_offset-0_decrease_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f596650f26a6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineMonth_offset-0_decrease_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineMonth_offset-0_increase (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineMonth_offset-0_increase (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8032da8d7ab6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineMonth_offset-0_increase (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineMonth_offset-0_increase_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineMonth_offset-0_increase_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f596650f26a6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineMonth_offset-0_increase_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineMonth_offset-120_decrease (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineMonth_offset-120_decrease (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8032da8d7ab6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineMonth_offset-120_decrease (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineMonth_offset-120_decrease_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineMonth_offset-120_decrease_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f596650f26a6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineMonth_offset-120_decrease_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineMonth_offset-120_increase (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineMonth_offset-120_increase (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8032da8d7ab6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineMonth_offset-120_increase (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineMonth_offset-120_increase_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineMonth_offset-120_increase_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f596650f26a6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_timelineMonth_offset-120_increase_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week-all-day_offset--120 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week-all-day_offset--120 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9950b2d3b6a4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week-all-day_offset--120 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week-all-day_offset--120_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week-all-day_offset--120_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9950b2d3b6a4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week-all-day_offset--120_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week-all-day_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week-all-day_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3485291f087f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week-all-day_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week-all-day_offset-0_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week-all-day_offset-0_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3485291f087f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week-all-day_offset-0_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week-all-day_offset-120 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week-all-day_offset-120 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..519515515c04
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week-all-day_offset-120 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week-all-day_offset-120_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week-all-day_offset-120_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..519515515c04
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week-all-day_offset-120_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_decrease_0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_decrease_0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..353dcadb8c55
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_decrease_0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_decrease_0_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_decrease_0_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..351f2837c325
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_decrease_0_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_decrease_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_decrease_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9a9fbfd92640
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_decrease_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_decrease_1_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_decrease_1_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3a51467138dc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_decrease_1_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_decrease_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_decrease_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..197c8890739b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_decrease_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_decrease_2_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_decrease_2_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4d6e6f473b41
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_decrease_2_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_decrease_3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_decrease_3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a69873ce4fad
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_decrease_3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_decrease_3_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_decrease_3_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ea995bf9b7ba
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_decrease_3_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_increase_0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_increase_0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..353dcadb8c55
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_increase_0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_increase_0_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_increase_0_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..351f2837c325
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_increase_0_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_increase_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_increase_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9a9fbfd92640
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_increase_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_increase_1_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_increase_1_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3a51467138dc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_increase_1_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_increase_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_increase_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..197c8890739b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_increase_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_increase_2_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_increase_2_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4d6e6f473b41
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_increase_2_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_increase_3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_increase_3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a69873ce4fad
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_increase_3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_increase_3_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_increase_3_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ea995bf9b7ba
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset--120_increase_3_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_decrease_0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_decrease_0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..485beb8cc132
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_decrease_0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_decrease_0_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_decrease_0_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4957c9355e94
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_decrease_0_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_decrease_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_decrease_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..76efdf18d3bc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_decrease_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_decrease_1_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_decrease_1_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e1421e2275ed
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_decrease_1_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_decrease_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_decrease_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..aeaf02c93c55
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_decrease_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_decrease_2_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_decrease_2_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b9f7b731b498
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_decrease_2_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_decrease_3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_decrease_3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..638fcd6bba91
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_decrease_3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_decrease_3_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_decrease_3_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..814cae3086b5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_decrease_3_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_increase_0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_increase_0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..485beb8cc132
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_increase_0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_increase_0_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_increase_0_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4957c9355e94
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_increase_0_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_increase_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_increase_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..76efdf18d3bc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_increase_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_increase_1_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_increase_1_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e1421e2275ed
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_increase_1_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_increase_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_increase_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..aeaf02c93c55
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_increase_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_increase_2_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_increase_2_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b9f7b731b498
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_increase_2_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_increase_3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_increase_3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..638fcd6bba91
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_increase_3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_increase_3_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_increase_3_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..814cae3086b5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-0_increase_3_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_decrease_0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_decrease_0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..381309a9bf4f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_decrease_0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_decrease_0_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_decrease_0_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5ac3d7a737b7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_decrease_0_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_decrease_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_decrease_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f9bf5e1c5203
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_decrease_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_decrease_1_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_decrease_1_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c914345a54eb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_decrease_1_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_decrease_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_decrease_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5ec6a25a0af7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_decrease_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_decrease_2_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_decrease_2_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..eccfafac16a5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_decrease_2_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_decrease_3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_decrease_3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0d65f8dd5d42
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_decrease_3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_decrease_3_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_decrease_3_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..43f768131965
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_decrease_3_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_increase_0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_increase_0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..381309a9bf4f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_increase_0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_increase_0_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_increase_0_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5ac3d7a737b7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_increase_0_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_increase_1 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_increase_1 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f9bf5e1c5203
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_increase_1 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_increase_1_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_increase_1_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c914345a54eb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_increase_1_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_increase_2 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_increase_2 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5ec6a25a0af7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_increase_2 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_increase_2_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_increase_2_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..eccfafac16a5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_increase_2_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_increase_3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_increase_3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0d65f8dd5d42
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_increase_3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_increase_3_rtl (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_increase_3_rtl (fluent-next.blue.light).png
new file mode 100644
index 000000000000..43f768131965
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_multi-cell-select_week_offset-120_increase_3_rtl (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-minus_offset--735 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-minus_offset--735 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..769536b83485
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-minus_offset--735 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-minus_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-minus_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1aba134b34a4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-minus_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-minus_offset-735 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-minus_offset-735 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6c8a28f0c767
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-minus_offset-735 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-plus_offset--735 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-plus_offset--735 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c1d305292056
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-plus_offset--735 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-plus_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-plus_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a301bcb4d132
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-plus_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-plus_offset-735 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-plus_offset-735 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e4b00ac32f66
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_end-plus_offset-735 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-minus_offset--735 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-minus_offset--735 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..393f1ee4cedd
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-minus_offset--735 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-minus_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-minus_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3076e4f2d551
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-minus_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-minus_offset-735 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-minus_offset-735 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..769536b83485
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-minus_offset-735 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-plus_offset--735 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-plus_offset--735 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c1d305292056
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-plus_offset--735 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-plus_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-plus_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a301bcb4d132
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-plus_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-plus_offset-735 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-plus_offset-735 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e4b00ac32f66
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_month_start-plus_offset-735 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineDay_offset--720_startDayHour-10_endDayHour-12 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineDay_offset--720_startDayHour-10_endDayHour-12 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..40a96fcc5748
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineDay_offset--720_startDayHour-10_endDayHour-12 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineDay_offset-720_startDayHour-10_endDayHour-12 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineDay_offset-720_startDayHour-10_endDayHour-12 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..40a96fcc5748
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineDay_offset-720_startDayHour-10_endDayHour-12 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineMonth_end-minus_offset--735 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineMonth_end-minus_offset--735 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7d629307c26e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineMonth_end-minus_offset--735 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineMonth_end-minus_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineMonth_end-minus_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cea0c58089e6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineMonth_end-minus_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineMonth_end-minus_offset-735 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineMonth_end-minus_offset-735 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b08e238294a0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineMonth_end-minus_offset-735 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineMonth_end-plus_offset--735 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineMonth_end-plus_offset--735 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1409ae085896
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineMonth_end-plus_offset--735 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineMonth_end-plus_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineMonth_end-plus_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..483f4f04daf6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineMonth_end-plus_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineMonth_end-plus_offset-735 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineMonth_end-plus_offset-735 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..762df9f378f5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineMonth_end-plus_offset-735 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineMonth_start-minus_offset--735 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineMonth_start-minus_offset--735 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bbf7b515d584
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineMonth_start-minus_offset--735 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineMonth_start-minus_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineMonth_start-minus_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..36c7e0ef5751
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineMonth_start-minus_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineMonth_start-minus_offset-735 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineMonth_start-minus_offset-735 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2a4a90ac2318
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineMonth_start-minus_offset-735 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineMonth_start-plus_offset--735 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineMonth_start-plus_offset--735 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1409ae085896
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineMonth_start-plus_offset--735 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineMonth_start-plus_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineMonth_start-plus_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..483f4f04daf6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineMonth_start-plus_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineMonth_start-plus_offset-735 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineMonth_start-plus_offset-735 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..762df9f378f5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_timelineMonth_start-plus_offset-735 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_end-minus_offset--735 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_end-minus_offset--735 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..377600a1317b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_end-minus_offset--735 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_end-minus_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_end-minus_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a9947ba5697f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_end-minus_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_end-minus_offset-735 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_end-minus_offset-735 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bae6195a2ab1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_end-minus_offset-735 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_end-plus_offset--735 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_end-plus_offset--735 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..82c193eb6a1f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_end-plus_offset--735 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_end-plus_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_end-plus_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dd8dfc155225
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_end-plus_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_end-plus_offset-735 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_end-plus_offset-735 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ee68b3c51dad
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_end-plus_offset-735 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_offset--720_startDayHour-10_endDayHour-12 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_offset--720_startDayHour-10_endDayHour-12 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fd2f95a39419
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_offset--720_startDayHour-10_endDayHour-12 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_offset-720_startDayHour-10_endDayHour-12 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_offset-720_startDayHour-10_endDayHour-12 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..eaf3d2e344dc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_offset-720_startDayHour-10_endDayHour-12 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_start-minus_offset--735 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_start-minus_offset--735 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9d0f2a513eef
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_start-minus_offset--735 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_start-minus_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_start-minus_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..65f23fcb07e2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_start-minus_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_start-minus_offset-735 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_start-minus_offset-735 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b2ca3af61e8f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_start-minus_offset-735 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_start-plus_offset--735 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_start-plus_offset--735 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bda6bd876d06
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_start-plus_offset--735 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_start-plus_offset-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_start-plus_offset-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6cc519cf2790
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_start-plus_offset-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_start-plus_offset-735 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_start-plus_offset-735 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c93e14c5b499
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_resize-appts_week_start-plus_offset-735 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-day_now-2023-12-02T12-00-00_offset--1440_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-day_now-2023-12-02T12-00-00_offset--1440_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..17cbc2886ed3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-day_now-2023-12-02T12-00-00_offset--1440_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-day_now-2023-12-02T12-00-00_offset--1440_start-6_end-18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-day_now-2023-12-02T12-00-00_offset--1440_start-6_end-18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..72bfe782a859
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-day_now-2023-12-02T12-00-00_offset--1440_start-6_end-18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-day_now-2023-12-03T00-00-00_offset--720_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-day_now-2023-12-03T00-00-00_offset--720_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a80f300364a3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-day_now-2023-12-03T00-00-00_offset--720_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-day_now-2023-12-03T00-00-00_offset--720_start-6_end-18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-day_now-2023-12-03T00-00-00_offset--720_start-6_end-18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5609a66fe46c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-day_now-2023-12-03T00-00-00_offset--720_start-6_end-18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-day_now-2023-12-04T00-00-00_offset-720_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-day_now-2023-12-04T00-00-00_offset-720_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a80f300364a3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-day_now-2023-12-04T00-00-00_offset-720_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-day_now-2023-12-04T00-00-00_offset-720_start-6_end-18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-day_now-2023-12-04T00-00-00_offset-720_start-6_end-18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5609a66fe46c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-day_now-2023-12-04T00-00-00_offset-720_start-6_end-18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-day_now-2023-12-04T12-00-00_offset-1440_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-day_now-2023-12-04T12-00-00_offset-1440_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..17cbc2886ed3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-day_now-2023-12-04T12-00-00_offset-1440_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-day_now-2023-12-04T12-00-00_offset-1440_start-6_end-18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-day_now-2023-12-04T12-00-00_offset-1440_start-6_end-18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..72bfe782a859
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-day_now-2023-12-04T12-00-00_offset-1440_start-6_end-18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineDay_now-2023-12-02T12-00-00_offset--1440_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineDay_now-2023-12-02T12-00-00_offset--1440_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6c3c4877b73d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineDay_now-2023-12-02T12-00-00_offset--1440_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineDay_now-2023-12-02T12-00-00_offset--1440_start-6_end-18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineDay_now-2023-12-02T12-00-00_offset--1440_start-6_end-18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..703df07f84cf
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineDay_now-2023-12-02T12-00-00_offset--1440_start-6_end-18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineDay_now-2023-12-03T00-00-00_offset--720_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineDay_now-2023-12-03T00-00-00_offset--720_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..33852cefb45e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineDay_now-2023-12-03T00-00-00_offset--720_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineDay_now-2023-12-03T00-00-00_offset--720_start-6_end-18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineDay_now-2023-12-03T00-00-00_offset--720_start-6_end-18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..98683145b688
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineDay_now-2023-12-03T00-00-00_offset--720_start-6_end-18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineDay_now-2023-12-04T00-00-00_offset-720_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineDay_now-2023-12-04T00-00-00_offset-720_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..33852cefb45e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineDay_now-2023-12-04T00-00-00_offset-720_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineDay_now-2023-12-04T00-00-00_offset-720_start-6_end-18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineDay_now-2023-12-04T00-00-00_offset-720_start-6_end-18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..98683145b688
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineDay_now-2023-12-04T00-00-00_offset-720_start-6_end-18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineDay_now-2023-12-04T12-00-00_offset-1440_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineDay_now-2023-12-04T12-00-00_offset-1440_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6c3c4877b73d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineDay_now-2023-12-04T12-00-00_offset-1440_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineDay_now-2023-12-04T12-00-00_offset-1440_start-6_end-18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineDay_now-2023-12-04T12-00-00_offset-1440_start-6_end-18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..703df07f84cf
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineDay_now-2023-12-04T12-00-00_offset-1440_start-6_end-18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineMonth_now-2023-12-02T12-00-00_offset--1440_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineMonth_now-2023-12-02T12-00-00_offset--1440_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e0ea552eb237
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineMonth_now-2023-12-02T12-00-00_offset--1440_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineMonth_now-2023-12-02T12-00-00_offset--1440_start-6_end-18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineMonth_now-2023-12-02T12-00-00_offset--1440_start-6_end-18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e0ea552eb237
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineMonth_now-2023-12-02T12-00-00_offset--1440_start-6_end-18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineMonth_now-2023-12-03T00-00-00_offset--720_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineMonth_now-2023-12-03T00-00-00_offset--720_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e0ea552eb237
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineMonth_now-2023-12-03T00-00-00_offset--720_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineMonth_now-2023-12-03T00-00-00_offset--720_start-6_end-18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineMonth_now-2023-12-03T00-00-00_offset--720_start-6_end-18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e0ea552eb237
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineMonth_now-2023-12-03T00-00-00_offset--720_start-6_end-18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineMonth_now-2023-12-04T00-00-00_offset-720_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineMonth_now-2023-12-04T00-00-00_offset-720_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e0ea552eb237
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineMonth_now-2023-12-04T00-00-00_offset-720_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineMonth_now-2023-12-04T00-00-00_offset-720_start-6_end-18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineMonth_now-2023-12-04T00-00-00_offset-720_start-6_end-18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e0ea552eb237
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineMonth_now-2023-12-04T00-00-00_offset-720_start-6_end-18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineMonth_now-2023-12-04T12-00-00_offset-1440_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineMonth_now-2023-12-04T12-00-00_offset-1440_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e0ea552eb237
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineMonth_now-2023-12-04T12-00-00_offset-1440_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineMonth_now-2023-12-04T12-00-00_offset-1440_start-6_end-18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineMonth_now-2023-12-04T12-00-00_offset-1440_start-6_end-18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e0ea552eb237
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineMonth_now-2023-12-04T12-00-00_offset-1440_start-6_end-18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineWeek_now-2023-12-02T12-00-00_offset--1440_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineWeek_now-2023-12-02T12-00-00_offset--1440_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c16660e16a6e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineWeek_now-2023-12-02T12-00-00_offset--1440_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineWeek_now-2023-12-02T12-00-00_offset--1440_start-6_end-18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineWeek_now-2023-12-02T12-00-00_offset--1440_start-6_end-18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7c8063fa6e74
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineWeek_now-2023-12-02T12-00-00_offset--1440_start-6_end-18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineWeek_now-2023-12-03T00-00-00_offset--720_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineWeek_now-2023-12-03T00-00-00_offset--720_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4101ebb622f9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineWeek_now-2023-12-03T00-00-00_offset--720_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineWeek_now-2023-12-03T00-00-00_offset--720_start-6_end-18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineWeek_now-2023-12-03T00-00-00_offset--720_start-6_end-18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8d2f12c9a6bb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineWeek_now-2023-12-03T00-00-00_offset--720_start-6_end-18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineWeek_now-2023-12-04T00-00-00_offset-720_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineWeek_now-2023-12-04T00-00-00_offset-720_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4101ebb622f9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineWeek_now-2023-12-04T00-00-00_offset-720_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineWeek_now-2023-12-04T00-00-00_offset-720_start-6_end-18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineWeek_now-2023-12-04T00-00-00_offset-720_start-6_end-18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8d2f12c9a6bb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineWeek_now-2023-12-04T00-00-00_offset-720_start-6_end-18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineWeek_now-2023-12-04T12-00-00_offset-1440_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineWeek_now-2023-12-04T12-00-00_offset-1440_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c16660e16a6e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineWeek_now-2023-12-04T12-00-00_offset-1440_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineWeek_now-2023-12-04T12-00-00_offset-1440_start-6_end-18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineWeek_now-2023-12-04T12-00-00_offset-1440_start-6_end-18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7c8063fa6e74
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-timelineWeek_now-2023-12-04T12-00-00_offset-1440_start-6_end-18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-week_now-2023-12-04T12-00-00_offset--1440_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-week_now-2023-12-04T12-00-00_offset--1440_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f6161db4b956
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-week_now-2023-12-04T12-00-00_offset--1440_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-week_now-2023-12-04T12-00-00_offset--1440_start-6_end-18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-week_now-2023-12-04T12-00-00_offset--1440_start-6_end-18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..230d28d9109f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-week_now-2023-12-04T12-00-00_offset--1440_start-6_end-18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-week_now-2023-12-05T00-00-00_offset--720_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-week_now-2023-12-05T00-00-00_offset--720_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6d96506aecf0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-week_now-2023-12-05T00-00-00_offset--720_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-week_now-2023-12-05T00-00-00_offset--720_start-6_end-18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-week_now-2023-12-05T00-00-00_offset--720_start-6_end-18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4d4969c5fce4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-week_now-2023-12-05T00-00-00_offset--720_start-6_end-18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-week_now-2023-12-06T00-00-00_offset-720_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-week_now-2023-12-06T00-00-00_offset-720_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6d96506aecf0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-week_now-2023-12-06T00-00-00_offset-720_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-week_now-2023-12-06T00-00-00_offset-720_start-6_end-18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-week_now-2023-12-06T00-00-00_offset-720_start-6_end-18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4d4969c5fce4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-week_now-2023-12-06T00-00-00_offset-720_start-6_end-18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-week_now-2023-12-06T12-00-00_offset-1440_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-week_now-2023-12-06T12-00-00_offset-1440_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f6161db4b956
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-week_now-2023-12-06T12-00-00_offset-1440_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-week_now-2023-12-06T12-00-00_offset-1440_start-6_end-18 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-week_now-2023-12-06T12-00-00_offset-1440_start-6_end-18 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..230d28d9109f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/common/etalons/offset_time-indicator_view-week_now-2023-12-06T12-00-00_offset-1440_start-6_end-18 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_day_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_day_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b464b7835cde
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_day_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_day_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_day_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9453e4083251
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_day_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_day_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_day_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3a9c956813cf
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_day_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_day_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_day_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cb3eb2796993
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_day_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_day_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_day_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..56b930eede30
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_day_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_day_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_day_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6257a730392d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_day_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_day_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_day_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..82340daabff4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_day_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_day_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_day_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6efc2a7cc3d3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_day_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_day_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_day_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b09ebe92b82c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_day_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_day_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_day_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..689a8f7f95b9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_day_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_month_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_month_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..46b9c55931b5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_month_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_month_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_month_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..46b9c55931b5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_month_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_month_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_month_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d7643303f82d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_month_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_month_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_month_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..06967231401a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_month_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_month_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_month_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1aedf1862352
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_month_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_month_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_month_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5e99db07b5dc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_month_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_month_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_month_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4a695aa1c535
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_month_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_month_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_month_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4a695aa1c535
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_month_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_month_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_month_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e2060ed2de9f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_month_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_month_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_month_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a6549109c867
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_month_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineDay_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineDay_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..358dc8e1fbfd
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineDay_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineDay_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineDay_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6dc2c8576926
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineDay_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineDay_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineDay_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..46cfecb26169
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineDay_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineDay_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineDay_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..393546d1ade8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineDay_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineDay_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineDay_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9cc4a06d65b0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineDay_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineDay_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineDay_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..970b16ea69bd
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineDay_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineDay_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineDay_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ab8a67ec981c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineDay_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineDay_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineDay_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8a2a60694a9b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineDay_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineDay_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineDay_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..19296b307e9e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineDay_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineDay_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineDay_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ce7d4c41c372
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineDay_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineMonth_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineMonth_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..543ac1c68b01
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineMonth_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineMonth_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineMonth_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..543ac1c68b01
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineMonth_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineMonth_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineMonth_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3021cad0e5d3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineMonth_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineMonth_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineMonth_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3021cad0e5d3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineMonth_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineMonth_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineMonth_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ffae585be419
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineMonth_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineMonth_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineMonth_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5b46950159da
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineMonth_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineMonth_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineMonth_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..07efc91afb59
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineMonth_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineMonth_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineMonth_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..07efc91afb59
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineMonth_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineMonth_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineMonth_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..78abd8ceb1b2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineMonth_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineMonth_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineMonth_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..78abd8ceb1b2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineMonth_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWeek_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWeek_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..769cbb1421b3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWeek_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWeek_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWeek_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cf5d6b5308b6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWeek_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWeek_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWeek_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2cdf90fdbf63
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWeek_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWeek_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWeek_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..df3ac9aadf0c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWeek_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWeek_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWeek_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..16de381b35e7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWeek_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWeek_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWeek_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..11151017ed1b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWeek_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWeek_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWeek_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ecf2f36c2008
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWeek_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWeek_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWeek_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..285984dfecd3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWeek_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWeek_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWeek_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..97fc52b332da
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWeek_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWeek_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWeek_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1802d3d364b4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWeek_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8579033fe379
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset--1440_start-0_end-24_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset--1440_start-0_end-24_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5a48b14e081b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset--1440_start-0_end-24_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a05fe81fbf69
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset--1440_start-9_end-17_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset--1440_start-9_end-17_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2b545b46ff34
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset--1440_start-9_end-17_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ea0579e8dca3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset--735_start-0_end-24_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset--735_start-0_end-24_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3faf0bd2200e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset--735_start-0_end-24_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6ee18ae76a01
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset--735_start-9_end-17_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset--735_start-9_end-17_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..76ee01d4853d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset--735_start-9_end-17_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5a138d0dea8f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset-0_start-0_end-24_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset-0_start-0_end-24_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a237af795729
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset-0_start-0_end-24_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..241293f9139a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset-0_start-9_end-17_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset-0_start-9_end-17_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0fa271aa35d8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset-0_start-9_end-17_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d9c4c392fe26
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset-1440_start-0_end-24_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset-1440_start-0_end-24_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f3d74bda6424
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset-1440_start-0_end-24_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7d4cb2cf6265
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset-1440_start-9_end-17_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset-1440_start-9_end-17_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..424a57aeb2b3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset-1440_start-9_end-17_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5d9a7fd4670a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset-735_start-0_end-24_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset-735_start-0_end-24_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c60afcf47b22
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset-735_start-0_end-24_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2d0a8002a79f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset-735_start-9_end-17_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset-735_start-9_end-17_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1e6c50485647
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_timelineWorkWeek_offset-735_start-9_end-17_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_week_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_week_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3ad2aee5f2f9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_week_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_week_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_week_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..54513ebc688c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_week_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_week_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_week_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3f6dd0b64d9b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_week_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_week_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_week_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ab014654aafd
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_week_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_week_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_week_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..399be42a4b28
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_week_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_week_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_week_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..dbef5c961833
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_week_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_week_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_week_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..831f3ef3fea6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_week_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_week_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_week_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a3643e81deab
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_week_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_week_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_week_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3c14fc4ff7cc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_week_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_week_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_week_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d7f24a90ac90
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_week_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e024f4721463
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset--1440_start-0_end-24_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset--1440_start-0_end-24_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ffab1831f87f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset--1440_start-0_end-24_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..89a8b398a490
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset--1440_start-9_end-17_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset--1440_start-9_end-17_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f042c9ef93cb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset--1440_start-9_end-17_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f9f61fb9cc40
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset--735_start-0_end-24_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset--735_start-0_end-24_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2d8c85401096
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset--735_start-0_end-24_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..74d6e84a82e1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset--735_start-9_end-17_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset--735_start-9_end-17_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b8e8ee2a1248
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset--735_start-9_end-17_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..06e5db878cef
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset-0_start-0_end-24_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset-0_start-0_end-24_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2fe57d1276e0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset-0_start-0_end-24_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9a4c8a1646b0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset-0_start-9_end-17_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset-0_start-9_end-17_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cd12683e0b61
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset-0_start-9_end-17_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..63696afa122a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset-1440_start-0_end-24_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset-1440_start-0_end-24_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..688d44d5eb1b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset-1440_start-0_end-24_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5f60d7078562
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset-1440_start-9_end-17_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset-1440_start-9_end-17_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7a756193821d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset-1440_start-9_end-17_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d8dc1af7512e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset-735_start-0_end-24_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset-735_start-0_end-24_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3b250d78615e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset-735_start-0_end-24_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5f83b862ef25
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset-735_start-9_end-17_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset-735_start-9_end-17_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..688ba0f53f54
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_all-day_workWeek_offset-735_start-9_end-17_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_T1212573 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_T1212573 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e6593f30271d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_T1212573 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_month_offset--1440_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_month_offset--1440_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e937dc2cc66c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_month_offset--1440_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_month_offset--1440_start-9_end-17 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_month_offset--1440_start-9_end-17 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cb83f45f23fe
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_month_offset--1440_start-9_end-17 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_month_offset--735_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_month_offset--735_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..08d0080c7f1f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_month_offset--735_start-0_end-24 (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_month_offset--735_start-9_end-17 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9a0598a1c68e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_month_offset--735_start-9_end-17 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_month_offset-0_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_month_offset-0_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1ea958ddb79c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_month_offset-0_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_month_offset-0_start-9_end-17 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_month_offset-0_start-9_end-17 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4d54f5e11690
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_month_offset-0_start-9_end-17 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_month_offset-1440_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_month_offset-1440_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f4b51d954d20
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_month_offset-1440_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_month_offset-1440_start-9_end-17 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_month_offset-1440_start-9_end-17 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d11740700392
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_month_offset-1440_start-9_end-17 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_month_offset-735_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_month_offset-735_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f4c84f2838d8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_month_offset-735_start-0_end-24 (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_month_offset-735_start-9_end-17 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b375892182ac
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_month_offset-735_start-9_end-17 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_timelineMonth_offset--1440_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_timelineMonth_offset--1440_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..be895e478aef
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_timelineMonth_offset--1440_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_timelineMonth_offset--1440_start-9_end-17 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_timelineMonth_offset--1440_start-9_end-17 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4386778a1671
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_timelineMonth_offset--1440_start-9_end-17 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_timelineMonth_offset--735_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_timelineMonth_offset--735_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..20bfbafb7315
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_timelineMonth_offset--735_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_timelineMonth_offset--735_start-9_end-17 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_timelineMonth_offset--735_start-9_end-17 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..49cd3cca5dd3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_timelineMonth_offset--735_start-9_end-17 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_timelineMonth_offset-0_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_timelineMonth_offset-0_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5e7b51463018
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_timelineMonth_offset-0_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_timelineMonth_offset-0_start-9_end-17 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_timelineMonth_offset-0_start-9_end-17 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..59c6f0cccbab
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_timelineMonth_offset-0_start-9_end-17 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_timelineMonth_offset-1440_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_timelineMonth_offset-1440_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7d0a9b83b2bd
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_timelineMonth_offset-1440_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_timelineMonth_offset-1440_start-9_end-17 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_timelineMonth_offset-1440_start-9_end-17 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9a5680506ba5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_timelineMonth_offset-1440_start-9_end-17 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_timelineMonth_offset-735_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_timelineMonth_offset-735_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ef14f8e9d350
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_timelineMonth_offset-735_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_timelineMonth_offset-735_start-9_end-17 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_timelineMonth_offset-735_start-9_end-17 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..38e07fbdb983
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_ordering-appts_timelineMonth_offset-735_start-9_end-17 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_day_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_day_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a02851642471
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_day_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_day_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_day_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ef34019a0dfb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_day_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_day_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_day_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d736a032e07b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_day_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_day_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_day_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2d8c4fbdbb25
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_day_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_day_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_day_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..24970c1340aa
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_day_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_day_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_day_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..35a7a08596d1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_day_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_month_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_month_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..185424f5d44a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_month_offset--735_start-0_end-24_first-day-0 (fluent-next.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-next.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-next.blue.light).png
new file mode 100644
index 000000000000..9a0f97f80a22
Binary files /dev/null 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-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_month_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_month_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..025db58a9e40
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_month_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_month_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_month_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..025db58a9e40
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_month_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_month_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_month_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f9532d86ba07
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_month_offset-735_start-0_end-24_first-day-0 (fluent-next.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-next.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-next.blue.light).png
new file mode 100644
index 000000000000..7482a947e3d5
Binary files /dev/null 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-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_short-day-views_day_offset--720_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_short-day-views_day_offset--720_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ba7896fdbcff
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_short-day-views_day_offset--720_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_short-day-views_day_offset--720_start-9_end-17 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_short-day-views_day_offset--720_start-9_end-17 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0de95f4bbcaa
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_short-day-views_day_offset--720_start-9_end-17 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_short-day-views_day_offset-720_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_short-day-views_day_offset-720_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6af2fb40a635
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_short-day-views_day_offset-720_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_short-day-views_day_offset-720_start-9_end-17 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_short-day-views_day_offset-720_start-9_end-17 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..88380ec5d866
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_short-day-views_day_offset-720_start-9_end-17 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_short-day-views_timelineDay_offset--720_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_short-day-views_timelineDay_offset--720_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..87135f586095
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_short-day-views_timelineDay_offset--720_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_short-day-views_timelineDay_offset--720_start-9_end-17 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_short-day-views_timelineDay_offset--720_start-9_end-17 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2fd23c4db514
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_short-day-views_timelineDay_offset--720_start-9_end-17 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_short-day-views_timelineDay_offset-720_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_short-day-views_timelineDay_offset-720_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2e72e3bcff52
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_short-day-views_timelineDay_offset-720_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_short-day-views_timelineDay_offset-720_start-9_end-17 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_short-day-views_timelineDay_offset-720_start-9_end-17 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..33f38c78a1d5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_short-day-views_timelineDay_offset-720_start-9_end-17 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineDay_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineDay_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4dc763a5bc56
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineDay_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineDay_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineDay_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..955d0582d92c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineDay_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineDay_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineDay_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3c0638f564e4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineDay_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineDay_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineDay_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..34bd5b9ab652
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineDay_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineDay_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineDay_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2c3baaa6d860
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineDay_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineDay_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineDay_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0643759b8cea
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineDay_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineMonth_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineMonth_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6c71d2103e15
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineMonth_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineMonth_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineMonth_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..de17dd9c89da
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineMonth_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineMonth_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineMonth_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c338f04e322a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineMonth_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineMonth_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineMonth_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c338f04e322a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineMonth_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineMonth_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineMonth_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3d5ab1610e71
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineMonth_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineMonth_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineMonth_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..de17dd9c89da
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineMonth_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWeek_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWeek_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ac2fb2d0ef6c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWeek_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWeek_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWeek_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9f3c29ecd6c7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWeek_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWeek_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWeek_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9f804e6cbe88
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWeek_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWeek_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWeek_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..137302819c57
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWeek_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWeek_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWeek_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f99ac18612f3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWeek_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWeek_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWeek_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a96437fae2df
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWeek_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWorkWeek_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWorkWeek_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cd34baf1caec
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWorkWeek_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWorkWeek_offset--735_start-0_end-24_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWorkWeek_offset--735_start-0_end-24_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8123f5eeeb30
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWorkWeek_offset--735_start-0_end-24_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWorkWeek_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWorkWeek_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8b2d55901b26
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWorkWeek_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWorkWeek_offset--735_start-9_end-17_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWorkWeek_offset--735_start-9_end-17_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..240be5975613
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWorkWeek_offset--735_start-9_end-17_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWorkWeek_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWorkWeek_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3dde058bc3fc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWorkWeek_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWorkWeek_offset-0_start-0_end-24_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWorkWeek_offset-0_start-0_end-24_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e84c120e4cad
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWorkWeek_offset-0_start-0_end-24_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWorkWeek_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWorkWeek_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e6d3220208b7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWorkWeek_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWorkWeek_offset-0_start-9_end-17_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWorkWeek_offset-0_start-9_end-17_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..66e6acdbe9c9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWorkWeek_offset-0_start-9_end-17_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWorkWeek_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWorkWeek_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..54d748ac8fd5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWorkWeek_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWorkWeek_offset-735_start-0_end-24_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWorkWeek_offset-735_start-0_end-24_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..93a155ee2d10
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWorkWeek_offset-735_start-0_end-24_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWorkWeek_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWorkWeek_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b0b6d8b7fe4f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWorkWeek_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWorkWeek_offset-735_start-9_end-17_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWorkWeek_offset-735_start-9_end-17_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9f3722567e90
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_timelineWorkWeek_offset-735_start-9_end-17_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_week_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_week_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d6683464ec0d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_week_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_week_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_week_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..de7f72455cbf
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_week_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_week_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_week_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9b5e3b396c72
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_week_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_week_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_week_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d98d648b8a07
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_week_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_week_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_week_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f31bc63ad9fd
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_week_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_week_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_week_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0bd75531e5e2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_week_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_workWeek_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_workWeek_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1dd43dbf6519
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_workWeek_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_workWeek_offset--735_start-0_end-24_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_workWeek_offset--735_start-0_end-24_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1b6d311ec44d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_workWeek_offset--735_start-0_end-24_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_workWeek_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_workWeek_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c439ad4b792f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_workWeek_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_workWeek_offset--735_start-9_end-17_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_workWeek_offset--735_start-9_end-17_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..25936e5c808b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_workWeek_offset--735_start-9_end-17_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_workWeek_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_workWeek_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..92d6548f3b4f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_workWeek_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_workWeek_offset-0_start-0_end-24_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_workWeek_offset-0_start-0_end-24_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..fe0ba6f96e29
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_workWeek_offset-0_start-0_end-24_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_workWeek_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_workWeek_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4f7123acd858
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_workWeek_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_workWeek_offset-0_start-9_end-17_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_workWeek_offset-0_start-9_end-17_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..891a74ff8102
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_workWeek_offset-0_start-9_end-17_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_workWeek_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_workWeek_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5e4978de438e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_workWeek_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_workWeek_offset-735_start-0_end-24_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_workWeek_offset-735_start-0_end-24_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e1d9d25dfee3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_workWeek_offset-735_start-0_end-24_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_workWeek_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_workWeek_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..76575bae790a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_workWeek_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_workWeek_offset-735_start-9_end-17_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_workWeek_offset-735_start-9_end-17_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cb244b8aca88
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_recurrent-appts_workWeek_offset-735_start-9_end-17_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_day_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_day_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..500cb9f3873c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_day_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_day_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_day_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a9117e20d1f5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_day_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_day_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_day_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..58fc3ae5d0dd
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_day_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_day_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_day_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c4a6086b0443
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_day_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_day_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_day_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b6de5fdd5b9c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_day_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_day_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_day_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e899950296dc
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_day_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_day_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_day_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0a3114cb5316
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_day_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_day_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_day_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2933d75a9811
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_day_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_day_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_day_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5c750332a52f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_day_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_day_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_day_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..40524097e211
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_day_offset-735_start-9_end-17_first-day-0 (fluent-next.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-next.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-next.blue.light).png
new file mode 100644
index 000000000000..1db0b39fa0ce
Binary files /dev/null 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-next.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-next.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-next.blue.light).png
new file mode 100644
index 000000000000..ad15b56237ea
Binary files /dev/null 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-next.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-next.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-next.blue.light).png
new file mode 100644
index 000000000000..1bc0486b04cd
Binary files /dev/null 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-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_month_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_month_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4d648874c6e3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_month_offset--735_start-9_end-17_first-day-0 (fluent-next.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-next.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-next.blue.light).png
new file mode 100644
index 000000000000..1bc0486b04cd
Binary files /dev/null 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-next.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-next.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-next.blue.light).png
new file mode 100644
index 000000000000..ab27e5c12ca3
Binary files /dev/null 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-next.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-next.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-next.blue.light).png
new file mode 100644
index 000000000000..1bc0486b04cd
Binary files /dev/null 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-next.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-next.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-next.blue.light).png
new file mode 100644
index 000000000000..2bdd64d29d91
Binary files /dev/null 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-next.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-next.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-next.blue.light).png
new file mode 100644
index 000000000000..1bc0486b04cd
Binary files /dev/null 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-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_month_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_month_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2214ac9d034e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_month_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineDay_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineDay_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a0a89826117f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineDay_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineDay_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineDay_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c21c4832412a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineDay_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineDay_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineDay_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2c26712544af
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineDay_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineDay_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineDay_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..67e52721ebbf
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineDay_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineDay_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineDay_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..17c678089b2e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineDay_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineDay_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineDay_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..09f2fd22b2c9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineDay_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineDay_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineDay_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..15963724e31e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineDay_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineDay_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineDay_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ad53597f3488
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineDay_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineDay_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineDay_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..134214f9d63e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineDay_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineDay_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineDay_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..03f13f4ea04d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineDay_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineMonth_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineMonth_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..727e2f20ffac
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineMonth_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineMonth_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineMonth_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..536be3a8ccbb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineMonth_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineMonth_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineMonth_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bd646318b1f6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineMonth_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineMonth_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineMonth_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5cd7e9ab2226
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineMonth_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineMonth_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineMonth_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..43c075da4f08
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineMonth_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineMonth_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineMonth_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2293463f22e5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineMonth_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineMonth_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineMonth_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2d6b25fbff31
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineMonth_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineMonth_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineMonth_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..430a951bb4bf
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineMonth_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineMonth_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineMonth_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b66112c6013f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineMonth_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineMonth_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineMonth_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d1efc354d1c3
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineMonth_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWeek_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWeek_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b28a843d4c9c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWeek_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWeek_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWeek_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7b82b06093d5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWeek_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWeek_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWeek_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e757e4fcec97
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWeek_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWeek_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWeek_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3d27c99ec290
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWeek_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWeek_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWeek_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..07ac3f48af81
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWeek_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWeek_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWeek_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..496bcf8aea2b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWeek_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWeek_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWeek_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e1271be7b91f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWeek_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWeek_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWeek_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2d7c31c1a012
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWeek_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWeek_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWeek_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c7f7d2ae7c96
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWeek_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWeek_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWeek_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9a705822cad8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWeek_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6f397d3d4f15
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset--1440_start-0_end-24_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset--1440_start-0_end-24_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9e2ddf19a2e8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset--1440_start-0_end-24_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c5714d13c1d2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset--1440_start-9_end-17_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset--1440_start-9_end-17_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b502cf188882
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset--1440_start-9_end-17_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..131f75ed62e7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset--735_start-0_end-24_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset--735_start-0_end-24_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..de58d17127db
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset--735_start-0_end-24_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5d58e0301e82
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset--735_start-9_end-17_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset--735_start-9_end-17_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6ef8c65f0ee2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset--735_start-9_end-17_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..23d5da3016e9
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset-0_start-0_end-24_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset-0_start-0_end-24_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..df812327d090
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset-0_start-0_end-24_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cc2aca2cba37
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset-0_start-9_end-17_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset-0_start-9_end-17_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..130aa4dbd35d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset-0_start-9_end-17_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..05504a575767
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset-1440_start-0_end-24_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset-1440_start-0_end-24_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..38ff2c61db2d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset-1440_start-0_end-24_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7669bcf1c482
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset-1440_start-9_end-17_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset-1440_start-9_end-17_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6c71eaa75fd0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset-1440_start-9_end-17_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ab75953d7871
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset-735_start-0_end-24_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset-735_start-0_end-24_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b297b549b29b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset-735_start-0_end-24_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d79525819fce
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset-735_start-9_end-17_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset-735_start-9_end-17_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e903a0021370
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_timelineWorkWeek_offset-735_start-9_end-17_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_week_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_week_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3640b9487648
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_week_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_week_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_week_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ccad94b3b94c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_week_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_week_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_week_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b909b418b7f7
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_week_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_week_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_week_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5e0dbfacef4e
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_week_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_week_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_week_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bdd016523032
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_week_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_week_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_week_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ad115475b785
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_week_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_week_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_week_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..bd77fc87acee
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_week_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_week_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_week_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..37e04a9f7625
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_week_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_week_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_week_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5686b8a4c084
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_week_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_week_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_week_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..690caff88455
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_week_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..52309b633b46
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset--1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset--1440_start-0_end-24_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset--1440_start-0_end-24_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e6b1aa007136
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset--1440_start-0_end-24_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5d9c6bb35707
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset--1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset--1440_start-9_end-17_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset--1440_start-9_end-17_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..852a325e40ba
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset--1440_start-9_end-17_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ac910ebe9874
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset--735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset--735_start-0_end-24_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset--735_start-0_end-24_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a2a2aa2394fe
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset--735_start-0_end-24_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ccb90e6b874f
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset--735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset--735_start-9_end-17_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset--735_start-9_end-17_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..901fe094f7e4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset--735_start-9_end-17_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2d5726da7ffd
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset-0_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset-0_start-0_end-24_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset-0_start-0_end-24_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b92084042990
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset-0_start-0_end-24_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0e5c65fb07ce
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset-0_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset-0_start-9_end-17_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset-0_start-9_end-17_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e0a7b9e4e46d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset-0_start-9_end-17_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..129a1a2397d8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset-1440_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset-1440_start-0_end-24_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset-1440_start-0_end-24_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..601c158950bf
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset-1440_start-0_end-24_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..65db3aaf4bac
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset-1440_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset-1440_start-9_end-17_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset-1440_start-9_end-17_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..42cc60237683
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset-1440_start-9_end-17_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e33527443a61
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset-735_start-0_end-24_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset-735_start-0_end-24_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset-735_start-0_end-24_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b03e3cb88843
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset-735_start-0_end-24_first-day-3 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..41539fe9f6bb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset-735_start-9_end-17_first-day-0 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset-735_start-9_end-17_first-day-3 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset-735_start-9_end-17_first-day-3 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1b5fae2b3327
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_usual-appts_workWeek_offset-735_start-9_end-17_first-day-3 (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset--1440_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..56db01509822
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset--1440_start-0_end-24 (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset--1440_start-9_end-17 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9d929aa8db3b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset--1440_start-9_end-17 (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset--735_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a7b291396eb6
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset--735_start-0_end-24 (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset--735_start-9_end-17 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2aa4aa9d1615
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset--735_start-9_end-17 (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset-0_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d48f8c626c5a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset-0_start-0_end-24 (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset-0_start-9_end-17 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1f32559ac066
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset-0_start-9_end-17 (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset-1440_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0ec2c7887fef
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset-1440_start-0_end-24 (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset-1440_start-9_end-17 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c24f845b1ff2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset-1440_start-9_end-17 (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset-735_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1e2286743ddd
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset-735_start-0_end-24 (fluent-next.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-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset-735_start-9_end-17 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7b39af69d9fd
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_month_offset-735_start-9_end-17 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_timelineMonth_offset--1440_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_timelineMonth_offset--1440_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d5ac7338f58b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_timelineMonth_offset--1440_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_timelineMonth_offset--1440_start-9_end-17 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_timelineMonth_offset--1440_start-9_end-17 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..3d815ddfa1d4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_timelineMonth_offset--1440_start-9_end-17 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_timelineMonth_offset--735_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_timelineMonth_offset--735_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..aeb425cecc09
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_timelineMonth_offset--735_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_timelineMonth_offset--735_start-9_end-17 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_timelineMonth_offset--735_start-9_end-17 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a88c4a52dba2
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_timelineMonth_offset--735_start-9_end-17 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_timelineMonth_offset-0_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_timelineMonth_offset-0_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c3fb15c18819
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_timelineMonth_offset-0_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_timelineMonth_offset-0_start-9_end-17 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_timelineMonth_offset-0_start-9_end-17 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..855989db2146
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_timelineMonth_offset-0_start-9_end-17 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_timelineMonth_offset-1440_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_timelineMonth_offset-1440_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cae8143a7bae
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_timelineMonth_offset-1440_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_timelineMonth_offset-1440_start-9_end-17 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_timelineMonth_offset-1440_start-9_end-17 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..326e6a92fc32
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_timelineMonth_offset-1440_start-9_end-17 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_timelineMonth_offset-735_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_timelineMonth_offset-735_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9257624bd6a5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_timelineMonth_offset-735_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_timelineMonth_offset-735_start-9_end-17 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_timelineMonth_offset-735_start-9_end-17 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7dd4b7c8412b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_timelineMonth_offset-735_start-9_end-17 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_week_offset--1440_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_week_offset--1440_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8e91e7c9ecea
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_week_offset--1440_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_week_offset--1440_start-9_end-17 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_week_offset--1440_start-9_end-17 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..08d34c528511
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_week_offset--1440_start-9_end-17 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_week_offset--735_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_week_offset--735_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..f505bfeefda8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_week_offset--735_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_week_offset--735_start-9_end-17 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_week_offset--735_start-9_end-17 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8412c4bcdd24
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_week_offset--735_start-9_end-17 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_week_offset-0_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_week_offset-0_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..63188b9ef8be
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_week_offset-0_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_week_offset-0_start-9_end-17 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_week_offset-0_start-9_end-17 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..cb37bd01aa17
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_week_offset-0_start-9_end-17 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_week_offset-1440_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_week_offset-1440_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..76fdeff88ec8
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_week_offset-1440_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_week_offset-1440_start-9_end-17 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_week_offset-1440_start-9_end-17 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..20bb8a1ee2b1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_week_offset-1440_start-9_end-17 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_week_offset-735_start-0_end-24 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_week_offset-735_start-0_end-24 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..77d57d53f3a0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_week_offset-735_start-0_end-24 (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_week_offset-735_start-9_end-17 (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_week_offset-735_start-9_end-17 (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5a8229f4e280
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/viewOffset/markup/etalons/view_markup_virtual-scrolling_week_offset-735_start-9_end-17 (fluent-next.blue.light).png differ
diff --git a/packages/devextreme-angular/webpack.test.js b/packages/devextreme-angular/webpack.test.js
index 16f9b4af773f..76f4cb335d53 100644
--- a/packages/devextreme-angular/webpack.test.js
+++ b/packages/devextreme-angular/webpack.test.js
@@ -3,6 +3,9 @@ module.exports = {
   mode: 'development',
   plugins: [],
   resolve: {
+    // 'alias' is required in addition to 'fallback': pnpm hoists a transitive 'stream' npm package
+    // (style-dictionary -> @bundled-es-modules/*) that shadows the fallback otherwise
+    alias: { stream: require.resolve('stream-browserify') },
     fallback: { stream: require.resolve('stream-browserify') },
   },
   module: {
diff --git a/packages/devextreme-scss/.gitignore b/packages/devextreme-scss/.gitignore
index 1cb872afbe1d..a140fd7101f4 100644
--- a/packages/devextreme-scss/.gitignore
+++ b/packages/devextreme-scss/.gitignore
@@ -1 +1,2 @@
 scss/bundles
+scss/_design-system
diff --git a/packages/devextreme-scss/.stylelintrc.json b/packages/devextreme-scss/.stylelintrc.json
index 38d6d74aecea..e1af3a160c8a 100644
--- a/packages/devextreme-scss/.stylelintrc.json
+++ b/packages/devextreme-scss/.stylelintrc.json
@@ -60,5 +60,15 @@
         "scss/operator-no-newline-before": true,
         "scss/operator-no-unspaced": true,
         "scss/operator-no-newline-after": null
-    }
+    },
+    "overrides": [
+        {
+            "comment": "fluent-next follows the naming standard in scss/widgets/fluent-next/NAMING.md: strict kebab-case, no underscores and no BEM separators, so a variable name maps 1:1 onto a public --dx-* custom property. cardView is excluded because its own cross-theme BEM system is a documented exemption.",
+            "files": ["scss/widgets/fluent-next/**/*.scss"],
+            "ignoreFiles": ["scss/widgets/fluent-next/cardView/**/*.scss"],
+            "rules": {
+                "scss/dollar-variable-pattern": "^[a-z][a-z0-9]*(-[a-z0-9]+)*$"
+            }
+        }
+    ]
 }
diff --git a/packages/devextreme-scss/build/bundle-template.fluent-next.scss b/packages/devextreme-scss/build/bundle-template.fluent-next.scss
new file mode 100644
index 000000000000..3e3ba462ebeb
--- /dev/null
+++ b/packages/devextreme-scss/build/bundle-template.fluent-next.scss
@@ -0,0 +1,13 @@
+@use "../widgets/fluent-next/colors" with ($color: "$COLOR", $mode: "$MODE");
+@use "../widgets/fluent-next/sizes" with ($size: "$SIZE");
+@use "../widgets/fluent-next/design-system";
+@use "../widgets/fluent-next/typography";
+@use "../widgets/fluent-next/icons";
+@use "../widgets/fluent-next/widget";
+@use "../widgets/fluent-next/card";
+@use "../widgets/fluent-next/fieldset";
+@use "../widgets/fluent-next/common";
+@use "../widgets/base/resizable";
+@use "../widgets/base/draggable";
+@use "../widgets/base/ui";
+@use "../widgets/fluent-next";
diff --git a/packages/devextreme-scss/build/theme-options.cjs b/packages/devextreme-scss/build/theme-options.cjs
index 5e62a5f06563..b24ac865a12a 100644
--- a/packages/devextreme-scss/build/theme-options.cjs
+++ b/packages/devextreme-scss/build/theme-options.cjs
@@ -5,11 +5,14 @@ const materialColors = ['blue', 'lime', 'orange', 'purple', 'teal'];
 const materialModes = ['light', 'dark'];
 const fluentColors = ['blue', 'saas'];
 const fluentModes = ['light', 'dark'];
+const fluentNextColors = ['blue'];
+const fluentNextModes = ['light', 'dark'];
 const genericColors = ['carmine', 'contrast', 'dark', 'darkmoon', 'darkviolet', 'greenmist', 'light', 'softblue'];
 
 const getThemes = () => sizes.flatMap((size) => [
     ...materialModes.flatMap((mode) => materialColors.map((color) => ['material', size, color, mode])),
     ...fluentModes.flatMap((mode) => fluentColors.map((color) => ['fluent', size, color, mode])),
+    ...fluentNextModes.flatMap((mode) => fluentNextColors.map((color) => ['fluent-next', size, color, mode])),
     ...genericColors.map((color) => ['generic', size, color])
 ]);
 
diff --git a/packages/devextreme-scss/build/tokens/build-tokens.mjs b/packages/devextreme-scss/build/tokens/build-tokens.mjs
new file mode 100644
index 000000000000..b2d6603ab75b
--- /dev/null
+++ b/packages/devextreme-scss/build/tokens/build-tokens.mjs
@@ -0,0 +1,379 @@
+import path from 'node:path';
+import url from 'node:url';
+import { createRequire } from 'node:module';
+import { readdir, readFile, rm } from 'node:fs/promises';
+import StyleDictionary from 'style-dictionary';
+import { registerTransforms } from './transforms.mjs';
+
+// Suppress ONE known noisy sd-transforms warning about unresolvable
+// {font-weight…} references inside math expressions. Scoped to console.warn
+// so legitimate errors/logs containing the substring are never swallowed.
+// Remove when https://github.com/tokens-studio/sd-transforms/issues/218 is
+// fixed in the (forked) sd-transforms we consume.
+{
+  const originalWarn = console.warn.bind(console);
+  console.warn = (message, ...args) => {
+    if (typeof message === 'string' && message.includes('Warning: could not resolve reference {font-weight')) {
+      return;
+    }
+    originalWarn(message, ...args);
+  };
+}
+
+registerTransforms(StyleDictionary);
+
+// The Figma export occasionally emits size-suffixed cross-component references
+// (e.g. {text-content.typography.font-weight.small} in the *_small file) while
+// only the unsuffixed token exists in that file. Rewrite such dangling
+// references to the unsuffixed token, which carries the size-specific value.
+const SIZE_SUFFIX_RE = /\.(small|medium|large)$/;
+
+const getTokenAtPath = (tokens, refPath) => {
+  let node = tokens;
+
+  for (const part of refPath.split('.')) {
+    if (typeof node !== 'object' || node === null || !(part in node)) {
+      return undefined;
+    }
+    node = node[part];
+  }
+
+  return typeof node === 'object' && node !== null && '$value' in node ? node : undefined;
+};
+
+const hasTokenAtPath = (tokens, refPath) => getTokenAtPath(tokens, refPath) !== undefined;
+
+StyleDictionary.registerPreprocessor({
+  name: 'dx/fix-dangling-size-references',
+  preprocessor: (tokens) => {
+    const visit = (node) => {
+      if (typeof node !== 'object' || node === null) {
+        return;
+      }
+
+      if (typeof node.$value === 'string') {
+        node.$value = node.$value.replace(/\{([\w.-]+)\}/g, (match, refPath) => {
+          if (!SIZE_SUFFIX_RE.test(refPath) || hasTokenAtPath(tokens, refPath)) {
+            return match;
+          }
+
+          const unsuffixed = refPath.replace(SIZE_SUFFIX_RE, '');
+
+          if (hasTokenAtPath(tokens, unsuffixed)) {
+            console.warn(`[design-tokens] Rewriting dangling reference {${refPath}} -> {${unsuffixed}}`);
+
+            return `{${unsuffixed}}`;
+          }
+
+          return match;
+        });
+
+        return;
+      }
+
+      Object.values(node).forEach(visit);
+    };
+
+    visit(tokens);
+
+    return tokens;
+  },
+});
+
+// Composite shadow aliases are exported as $type "text" with a pure reference
+// value (e.g. popup.box-shadow.composite = "{box-shadow.lg}"). Without a
+// shadow type they get expanded into per-property sub-tokens; retyping keeps
+// them as a single var() reference to the composite shadow variable.
+const PURE_REFERENCE_RE = /^\{([\w.-]+)\}$/;
+
+StyleDictionary.registerPreprocessor({
+  name: 'dx/fix-composite-shadow-references',
+  preprocessor: (tokens) => {
+    const visit = (node) => {
+      if (typeof node !== 'object' || node === null) {
+        return;
+      }
+
+      if (typeof node.$value === 'string') {
+        const refPath = node.$value.match(PURE_REFERENCE_RE)?.[1];
+
+        if (node.$type === 'text' && refPath) {
+          const target = getTokenAtPath(tokens, refPath);
+
+          if (target?.$type === 'boxShadow' || target?.$type === 'shadow') {
+            node.$type = 'shadow';
+          }
+        }
+
+        return;
+      }
+
+      Object.values(node).forEach(visit);
+    };
+
+    visit(tokens);
+
+    return tokens;
+  },
+});
+
+const dirname = import.meta.dirname || path.dirname(url.fileURLToPath(import.meta.url));
+const require = createRequire(import.meta.url);
+const tokensDir = path.dirname(require.resolve('@devexpress/design-tokens-internal/package.json'));
+const buildPath = `${path.resolve(dirname, '../../scss/_design-system')}/`;
+
+const THEME_NAME = 'fluent';
+
+const FLUENT_PALETTES = [
+  'blue',
+  'cool-blue',
+  'desert',
+  'mint',
+  'moss',
+  'orchid',
+  'purple',
+  'rose',
+  'rust',
+  'steel',
+  'storm',
+];
+
+const FLUENT_MODES = [
+  'dark',
+  'light',
+];
+
+const getThemeCommonFiles = () => [
+  'base/borders',
+  'base/opacity',
+  'base/spacing',
+  'base/typography/font-family',
+  'base/typography/font-weight',
+  'base/typography/font-size',
+  'base/typography/letter-spacing',
+  'base/typography/line-height',
+  'base/typography/text-case',
+  'base/typography/text-decoration',
+  `base/colors/utility/${THEME_NAME}`,
+  `semantic/box-shadow/${THEME_NAME}`,
+  `semantic/typography/${THEME_NAME}/font-family`,
+  `semantic/typography/${THEME_NAME}/font-size`,
+  `semantic/typography/${THEME_NAME}/font-weight`,
+  `semantic/typography/${THEME_NAME}/letter-spacing`,
+  `semantic/typography/${THEME_NAME}/line-height`,
+  `global/${THEME_NAME}`,
+  `figma-utils/box-shadow/semantic/${THEME_NAME}`,
+  `figma-utils/icon/set/${THEME_NAME}`,
+];
+
+const getModeFiles = (mode) => [
+  ...getThemeCommonFiles(),
+  `base/colors/icons/${THEME_NAME}/${mode}`,
+  `base/colors/palettes/${THEME_NAME}/blue`,
+  `semantic/colors/${THEME_NAME}/${mode}`,
+];
+
+const getComponentThemeFiles = () => [
+  ...getModeFiles('light'),
+  `components/core/theme/${THEME_NAME}`,
+];
+
+StyleDictionary.registerFormat({
+  name: 'scssToCss',
+  format: ({ dictionary }) => dictionary.allTokens
+    .map((token) => `$${token.name.replace('dxds-', '')}: var(--${token.name});`)
+    .join('\n'),
+});
+
+const FILE_OPTIONS = {
+  outputReferences: true,
+  themeable: true,
+};
+
+// 'text' covers reference-only tokens such as popup.box-shadow.composite
+// ($type "text", $value "{box-shadow.lg}") — expanding them would inline the
+// referenced composite shadow structure instead of keeping a var() reference.
+const customExpand = {
+  exclude: ['shadow', 'text'],
+};
+
+const normalizeFilePath = (token) => token.filePath.split(path.sep).join('/');
+
+const getPlatformSettings = (files) => ({
+  'scss/category': {
+    transformGroup: 'css',
+    buildPath,
+    transforms: [
+      'attribute/cti',
+      'color/css',
+      'name/kebab',
+      'typography/css/shorthand',
+      'border/css/shorthand',
+      'shadow/css/shorthand',
+      'dx/ds-name',
+      'dx/fix-transparent-color',
+      'dx/fix-drop-shadow',
+    ],
+    files,
+  },
+});
+
+const createConfig = (name, files, platformFiles) => ({
+  theme: THEME_NAME,
+  name,
+  source: files.map((src) => path.resolve(tokensDir, `tokens/${src}.json`)),
+  preprocessors: ['dx/fix-dangling-size-references', 'dx/fix-composite-shadow-references', 'tokens-studio'],
+  expand: customExpand,
+  platforms: getPlatformSettings(platformFiles),
+});
+
+const createPaletteConfig = (palette) => createConfig(palette, [`base/colors/palettes/${THEME_NAME}/${palette}`], [
+  {
+    destination: `${THEME_NAME}/accents/${palette}.scss`,
+    format: 'css/variables',
+    filter: (token) => normalizeFilePath(token).includes(`${THEME_NAME}/${palette}.json`),
+    options: FILE_OPTIONS,
+  },
+]);
+
+const createModeConfig = (mode) => createConfig(mode, getModeFiles(mode), [
+  {
+    destination: 'base.scss',
+    format: 'css/variables',
+    filter: (token) => {
+      const filePath = normalizeFilePath(token);
+
+      return filePath.includes('base/borders.json')
+        || filePath.includes('base/opacity.json')
+        || filePath.includes('base/spacing.json')
+        || filePath.includes('base/typography/');
+    },
+    options: FILE_OPTIONS,
+  },
+  {
+    destination: `${THEME_NAME}/base.scss`,
+    format: 'css/variables',
+    filter: (token) => {
+      const filePath = normalizeFilePath(token);
+
+      return filePath.includes(`base/colors/utility/${THEME_NAME}.json`)
+        || filePath.includes(`global/${THEME_NAME}.json`)
+        || filePath.includes(`figma-utils/box-shadow/semantic/${THEME_NAME}.json`)
+        || filePath.includes(`figma-utils/icon/set/${THEME_NAME}.json`);
+    },
+    options: FILE_OPTIONS,
+  },
+  // The semantic tier is emitted under an explicit semantic/ folder mirroring the
+  // package layout (tokens/semantic/{typography,box-shadow,colors}) so the middle
+  // customization layer is discoverable in the generated output.
+  {
+    destination: `${THEME_NAME}/semantic/typography.scss`,
+    format: 'css/variables',
+    filter: (token) => normalizeFilePath(token).includes(`semantic/typography/${THEME_NAME}`),
+    options: FILE_OPTIONS,
+  },
+  {
+    destination: `${THEME_NAME}/semantic/box-shadow.scss`,
+    format: 'css/variables',
+    filter: (token) => normalizeFilePath(token).includes(`semantic/box-shadow/${THEME_NAME}.json`),
+    options: FILE_OPTIONS,
+  },
+  {
+    destination: `${THEME_NAME}/semantic/colors/${mode}.scss`,
+    format: 'css/variables',
+    filter: (token) => {
+      const filePath = normalizeFilePath(token);
+
+      return filePath.includes(`semantic/colors/${THEME_NAME}/${mode}.json`)
+        || filePath.includes(`icons/${THEME_NAME}/${mode}.json`);
+    },
+    options: FILE_OPTIONS,
+  },
+]);
+
+const createComponentThemeConfig = () => createConfig('components-theme', getComponentThemeFiles(), [
+  {
+    destination: `${THEME_NAME}/components/theme.scss`,
+    format: 'css/variables',
+    filter: (token) => normalizeFilePath(token).includes(`components/core/theme/${THEME_NAME}.json`),
+    options: FILE_OPTIONS,
+  },
+]);
+
+// All token names for the SCSS bridge file: the common + light-mode + component
+// *theme* (color) set. Component *size* tokens are intentionally excluded — fluent-next
+// maps sizes onto the base scales (spacing/font-size/border-radius/…), so no widget
+// references the component `*-layout-*` tokens and they are not emitted (see
+// widgets/fluent-next/_design-system.scss).
+const createDsConfig = () => createConfig('ds', getComponentThemeFiles(), [
+  {
+    destination: 'variables/_ds.scss',
+    format: 'scssToCss',
+  },
+]);
+
+const configs = [
+  ...FLUENT_PALETTES.map(createPaletteConfig),
+  ...FLUENT_MODES.map(createModeConfig),
+  createComponentThemeConfig(),
+  createDsConfig(),
+];
+
+async function collectGeneratedFiles(dir) {
+  const entries = await readdir(dir, { withFileTypes: true, recursive: true });
+
+  return entries
+    .filter((entry) => entry.isFile())
+    .map((entry) => path.join(entry.parentPath, entry.name));
+}
+
+async function validateReferences() {
+  const files = await collectGeneratedFiles(buildPath);
+  const defined = new Set();
+  const used = new Map();
+
+  for (const file of files) {
+    const content = await readFile(file, 'utf-8');
+
+    for (const [, name] of content.matchAll(/--(dxds-[\w-]+)\s*:/g)) {
+      defined.add(name);
+    }
+
+    for (const [, name] of content.matchAll(/var\(--(dxds-[\w-]+)/g)) {
+      if (!used.has(name)) {
+        used.set(name, file);
+      }
+    }
+  }
+
+  const missing = [...used].filter(([name]) => !defined.has(name));
+
+  if (missing.length > 0) {
+    const details = missing
+      .map(([name, file]) => `  --${name} (first used in ${path.relative(buildPath, file)})`)
+      .join('\n');
+
+    throw new Error(`Design token references without a definition in the generated output:\n${details}`);
+  }
+
+  return files.length;
+}
+
+async function build() {
+  await rm(buildPath, { recursive: true, force: true });
+
+  for (const config of configs) {
+    console.log(`Generating design tokens "${THEME_NAME}-${config.name}"`);
+
+    const sd = new StyleDictionary(config);
+
+    await sd.hasInitialized;
+    await sd.buildAllPlatforms();
+  }
+
+  const fileCount = await validateReferences();
+
+  console.log(`Design tokens generated: ${fileCount} files in ${buildPath}`);
+}
+
+await build();
diff --git a/packages/devextreme-scss/build/tokens/transforms.mjs b/packages/devextreme-scss/build/tokens/transforms.mjs
new file mode 100644
index 000000000000..fed50d749168
--- /dev/null
+++ b/packages/devextreme-scss/build/tokens/transforms.mjs
@@ -0,0 +1,60 @@
+import { register } from 'safe-ts-transforms-fork';
+
+function hexToPercent(hex) {
+  if (typeof hex !== 'string') throw new TypeError('hex must be a string');
+  if (hex.length !== 2) throw new Error('hex must be two characters long');
+
+  const value = parseInt(hex, 16);
+  const percent = Math.round((value / 255) * 100);
+
+  return percent;
+}
+
+export function registerTransforms(StyleDictionary) {
+  register(StyleDictionary, {});
+
+  StyleDictionary.registerTransform({
+    name: 'dx/ds-name',
+    type: 'name',
+    filter: () => true,
+    transform: (token) => `dxds-${token.name}`,
+  });
+
+  // Tokens Studio exports semi-transparent colors as "{reference}" plus a
+  // two-digit hex alpha suffix (e.g. "{neutral.10}66") — invalid for DTCG and
+  // Style Dictionary. Rewrite to a CSS relative color, keeping the reference
+  // so outputReferences emits `rgb(from var(--dxds-…) r g b / N%)` and the
+  // alpha derivative recolors when the base custom property is overridden.
+  const REFERENCE_WITH_ALPHA_RE = /^(\{[\w.-]+\})([0-9a-fA-F]{2})$/;
+
+  StyleDictionary.registerTransform({
+    name: 'dx/fix-transparent-color',
+    type: 'value',
+    // Transitive is required: the raw value contains a reference, and
+    // non-transitive value transforms are never applied to such tokens.
+    transitive: true,
+    filter: (token) => typeof token.original.$value === 'string'
+      && REFERENCE_WITH_ALPHA_RE.test(token.original.$value),
+    transform: (token) => {
+      const [, reference, alpha] = token.original.$value.match(REFERENCE_WITH_ALPHA_RE);
+      const newValue = `rgb(from ${reference} r g b / ${hexToPercent(alpha)}%)`;
+
+      // Mutating original.$value is load-bearing: the css/variables format
+      // builds outputReferences from original.$value, and the raw
+      // "{ref}XX" form would otherwise emit an invalid `var(--…)XX`.
+      token.original.$value = newValue;
+
+      return newValue;
+    },
+  });
+
+  StyleDictionary.registerTransform({
+    name: 'dx/fix-drop-shadow',
+    type: 'value',
+    transitive: true,
+    filter: (token) => token.$type === 'shadow',
+    transform: (token) => token.$value
+      .replace(/dropShadow\s/g, '')
+      .replace(/innerShadow\s/g, 'inset '),
+  });
+}
diff --git a/packages/devextreme-scss/images/widgets/fluent-next/color-schemes/dark/grid/text-stub.png b/packages/devextreme-scss/images/widgets/fluent-next/color-schemes/dark/grid/text-stub.png
new file mode 100644
index 000000000000..77bf05a68647
Binary files /dev/null and b/packages/devextreme-scss/images/widgets/fluent-next/color-schemes/dark/grid/text-stub.png differ
diff --git a/packages/devextreme-scss/images/widgets/fluent-next/color-schemes/dark/pulldown.png b/packages/devextreme-scss/images/widgets/fluent-next/color-schemes/dark/pulldown.png
new file mode 100644
index 000000000000..436cc90d9666
Binary files /dev/null and b/packages/devextreme-scss/images/widgets/fluent-next/color-schemes/dark/pulldown.png differ
diff --git a/packages/devextreme-scss/images/widgets/fluent-next/color-schemes/light/grid/text-stub.png b/packages/devextreme-scss/images/widgets/fluent-next/color-schemes/light/grid/text-stub.png
new file mode 100644
index 000000000000..77bf05a68647
Binary files /dev/null and b/packages/devextreme-scss/images/widgets/fluent-next/color-schemes/light/grid/text-stub.png differ
diff --git a/packages/devextreme-scss/images/widgets/fluent-next/color-schemes/light/pulldown.png b/packages/devextreme-scss/images/widgets/fluent-next/color-schemes/light/pulldown.png
new file mode 100644
index 000000000000..436cc90d9666
Binary files /dev/null and b/packages/devextreme-scss/images/widgets/fluent-next/color-schemes/light/pulldown.png differ
diff --git a/packages/devextreme-scss/package.json b/packages/devextreme-scss/package.json
index a420f48dbf3a..577c260ea0df 100644
--- a/packages/devextreme-scss/package.json
+++ b/packages/devextreme-scss/package.json
@@ -4,12 +4,15 @@
   "author": "Developer Express Inc.",
   "license": "SEE LICENSE IN LICENSE.md",
   "devDependencies": {
+    "@devexpress/design-tokens-internal": "262.6.0",
     "@stylistic/stylelint-plugin": "3.1.3",
     "autoprefixer": "10.5.0",
     "clean-css": "5.3.3",
     "opentype.js": "1.3.4",
     "postcss": "^8.5.23",
+    "safe-ts-transforms-fork": "0.0.1",
     "sass-embedded": "1.93.3",
+    "style-dictionary": "5.4.2",
     "stylelint": "catalog:",
     "stylelint-config-standard-scss": "14.0.0",
     "stylelint-scss": "6.10.0",
@@ -17,7 +20,14 @@
   },
   "scripts": {
     "build": "pnpm --workspace-root nx build devextreme-scss",
+    "check-naming-registries": "pnpm run naming:check",
     "lint": "stylelint scss/widgets",
+    "naming:baseline": "UPDATE_NAMING_BASELINE=1 jest --no-coverage --runInBand --config=./tests/jest.config.json",
+    "naming:check": "node tools/naming/rename.mjs --check && node tools/naming/derive-registries.mjs --check",
+    "naming:propose": "node tools/naming/propose.mjs",
+    "naming:registries": "node tools/naming/derive-registries.mjs",
+    "naming:residue": "node tools/naming/rename.mjs --residue",
+    "review:evidence": "node tools/review/evidence.mjs",
     "test": "jest --no-coverage --runInBand --config=./tests/jest.config.json",
     "watch": "pnpm --workspace-root nx run devextreme-scss --target=watch"
   },
diff --git a/packages/devextreme-scss/project.json b/packages/devextreme-scss/project.json
index 9b1be44607cd..7c794e566a36 100644
--- a/packages/devextreme-scss/project.json
+++ b/packages/devextreme-scss/project.json
@@ -16,16 +16,38 @@
         "targetDirectory": "./scss/bundles"
       }
     },
+    "clean:tokens": {
+      "executor": "devextreme-nx-infra-plugin:clean",
+      "options": {
+        "targetDirectory": "./scss/_design-system"
+      }
+    },
     "clean": {
       "executor": "nx:run-commands",
       "options": {
         "commands": [
           "pnpm nx clean:artifacts devextreme-scss",
-          "pnpm nx clean:bundles devextreme-scss"
+          "pnpm nx clean:bundles devextreme-scss",
+          "pnpm nx clean:tokens devextreme-scss"
         ],
         "parallel": false
       }
     },
+    "build:tokens": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "node build/tokens/build-tokens.mjs",
+        "cwd": "packages/devextreme-scss"
+      },
+      "inputs": [
+        "{projectRoot}/build/tokens/**/*",
+        "{workspaceRoot}/pnpm-lock.yaml"
+      ],
+      "outputs": [
+        "{projectRoot}/scss/_design-system"
+      ],
+      "cache": true
+    },
     "copy:assets": {
       "executor": "devextreme-nx-infra-plugin:copy-files",
       "options": {
@@ -50,12 +72,14 @@
       "options": {
         "mode": "all"
       },
+      "dependsOn": ["build:tokens"],
       "inputs": [
         "{projectRoot}/build/**/*",
         "{projectRoot}/fonts/**/*",
         "{projectRoot}/icons/**/*",
         "{projectRoot}/images/**/*",
         "{projectRoot}/scss/**/*",
+        "!{projectRoot}/scss/_design-system/**/*",
         "{workspaceRoot}/packages/devextreme/package.json",
         "{workspaceRoot}/pnpm-lock.yaml"
       ],
@@ -70,12 +94,14 @@
       "options": {
         "mode": "ci"
       },
+      "dependsOn": ["build:tokens"],
       "inputs": [
         "{projectRoot}/build/**/*",
         "{projectRoot}/fonts/**/*",
         "{projectRoot}/icons/**/*",
         "{projectRoot}/images/**/*",
         "{projectRoot}/scss/**/*",
+        "!{projectRoot}/scss/_design-system/**/*",
         "{workspaceRoot}/packages/devextreme/package.json",
         "{workspaceRoot}/pnpm-lock.yaml",
         "{workspaceRoot}/packages/devextreme-themebuilder/src/data/clean-css-options.json"
@@ -101,6 +127,7 @@
         "{projectRoot}/icons/**/*",
         "{projectRoot}/images/**/*",
         "{projectRoot}/scss/**/*",
+        "!{projectRoot}/scss/_design-system/**/*",
         "{workspaceRoot}/packages/devextreme/package.json",
         "{workspaceRoot}/pnpm-lock.yaml"
       ],
@@ -127,6 +154,7 @@
         "{projectRoot}/icons/**/*",
         "{projectRoot}/images/**/*",
         "{projectRoot}/scss/**/*",
+        "!{projectRoot}/scss/_design-system/**/*",
         "{workspaceRoot}/packages/devextreme/package.json",
         "{workspaceRoot}/pnpm-lock.yaml",
         "{workspaceRoot}/packages/devextreme-themebuilder/src/data/clean-css-options.json"
@@ -145,12 +173,14 @@
         "mode": "all",
         "watch": true
       },
+      "dependsOn": ["build:tokens"],
       "inputs": [
         "{projectRoot}/build/**/*",
         "{projectRoot}/fonts/**/*",
         "{projectRoot}/icons/**/*",
         "{projectRoot}/images/**/*",
-        "{projectRoot}/scss/**/*"
+        "{projectRoot}/scss/**/*",
+        "!{projectRoot}/scss/_design-system/**/*"
       ],
       "cache": false
     },
@@ -162,6 +192,16 @@
       "inputs": [
         "{projectRoot}/**/*"
       ]
+    },
+    "test": {
+      "executor": "nx:run-script",
+      "options": {
+        "script": "test"
+      },
+      "dependsOn": ["build:tokens"],
+      "inputs": [
+        "{projectRoot}/**/*"
+      ]
     }
   },
   "tags": []
diff --git a/packages/devextreme-scss/scss/widgets/base/_box.scss b/packages/devextreme-scss/scss/widgets/base/_box.scss
index 27f98df79444..6e49b5b8dedf 100644
--- a/packages/devextreme-scss/scss/widgets/base/_box.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_box.scss
@@ -1,7 +1,9 @@
 // adduse
 
+$box-item-content-font-size: 14px !default;
+
 .dx-box-item-content {
-  font-size: 14px;
+  font-size: $box-item-content-font-size;
   flex-direction: column;
   max-width: 100%;
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/_contextMenu.scss b/packages/devextreme-scss/scss/widgets/base/_contextMenu.scss
index bea822e0e03f..106a5c8d6c59 100644
--- a/packages/devextreme-scss/scss/widgets/base/_contextMenu.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_contextMenu.scss
@@ -1,5 +1,11 @@
 // adduse
 
+
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$contextmenu-menu-items-container-padding: 1px !default;
+$contextmenu-menu-separator-height: 1px !default;
+$contextmenu-menu-separator-margin: 5px 0 !default;
+
 .dx-context-menu {
   &.dx-overlay-content {
     overflow: inherit;
@@ -7,7 +13,7 @@
   }
 
   .dx-menu-items-container {
-    padding: 1px;
+    padding: $contextmenu-menu-items-container-padding;
   }
 
   .dx-menu-item .dx-submenu {
@@ -16,7 +22,7 @@
   }
 
   .dx-menu-separator {
-    height: 1px;
-    margin: 5px 0;
+    height: $contextmenu-menu-separator-height;
+    margin: $contextmenu-menu-separator-margin;
   }
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/_dateBox.scss b/packages/devextreme-scss/scss/widgets/base/_dateBox.scss
index 40817b3c36b1..ce3705d4ce51 100644
--- a/packages/devextreme-scss/scss/widgets/base/_dateBox.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_dateBox.scss
@@ -3,10 +3,17 @@
 // adduse
 
 
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$datebox-texteditor-height: 20px !default;
+$datebox-popup-content-padding-top: 20px !default;
+$datebox-popup-content-padding-bottom: 20px !default;
+$datebox-button-min-width: 90px !default;
+$datebox-apply-button-margin-right: 10px !default;
+
 .dx-texteditor {
   input[type="date"] {
     &::-webkit-inner-spin-button {
-      height: 20px;
+      height: $datebox-texteditor-height;
     }
   }
 }
@@ -45,8 +52,8 @@
   }
 
   .dx-popup-content {
-    padding-top: 20px;
-    padding-bottom: 20px;
+    padding-top: $datebox-popup-content-padding-top;
+    padding-bottom: $datebox-popup-content-padding-bottom;
   }
 }
 
@@ -58,10 +65,10 @@
 
 .dx-datebox-button-cell {
   .dx-button {
-    min-width: 90px;
+    min-width: $datebox-button-min-width;
 
     &.dx-datebox-apply-button {
-      margin-right: 10px;
+      margin-right: $datebox-apply-button-margin-right;
       margin-left: 0;
     }
 
diff --git a/packages/devextreme-scss/scss/widgets/base/_dropDownList.scss b/packages/devextreme-scss/scss/widgets/base/_dropDownList.scss
index 0184adb43b64..757eae35c260 100644
--- a/packages/devextreme-scss/scss/widgets/base/_dropDownList.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_dropDownList.scss
@@ -1,8 +1,12 @@
 // adduse
 
+
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$dropdownlist-list-min-height: 35px !default;
+
 .dx-dropdownlist-popup-wrapper {
   .dx-list {
-    min-height: 35px;
+    min-height: $dropdownlist-list-min-height;
 
     .dx-scrollable-content {
       margin: 0;
diff --git a/packages/devextreme-scss/scss/widgets/base/_fieldset.scss b/packages/devextreme-scss/scss/widgets/base/_fieldset.scss
index f125a5ac94af..609038a75de7 100644
--- a/packages/devextreme-scss/scss/widgets/base/_fieldset.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_fieldset.scss
@@ -1,8 +1,15 @@
 @use "./mixins" as *;
 
 // adduse
+
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$fieldset-root-margin-bottom: 20px !default;
+
+$fieldset-field-padding: 0.4em !default; // dx-relative
+$fieldset-label-width: 40% !default; // dx-relative-%
+$fieldset-datebox-value-min-width: 60% !default; // dx-relative-%
 .dx-fieldset {
-  margin-bottom: 20px;
+  margin-bottom: $fieldset-root-margin-bottom;
 
   .dx-field-value {
     margin: 0;
@@ -20,14 +27,14 @@
 
 .dx-field {
   position: relative;
-  padding: 0.4em;
+  padding: $fieldset-field-padding;
 
   @include dx-clearfix-mixin();
 }
 
 .dx-field-label {
   float: left;
-  width: 40%;
+  width: $fieldset-label-width;
 
   @include dx-overflow();
 }
@@ -42,7 +49,7 @@
 }
 
 .dx-field-value.dx-datebox {
-  min-width: 60%;
+  min-width: $fieldset-datebox-value-min-width;
 }
 
 .dx-field-value:not(.dx-widget) > .dx-datebox {
diff --git a/packages/devextreme-scss/scss/widgets/base/_fileUploader.scss b/packages/devextreme-scss/scss/widgets/base/_fileUploader.scss
index a97f0b2ac5e3..c78d84709e34 100644
--- a/packages/devextreme-scss/scss/widgets/base/_fileUploader.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_fileUploader.scss
@@ -3,6 +3,29 @@
 // adduse
 
 
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$fileuploader-button-margin-left: 12px !default;
+$fileuploader-upload-button-margin-top: 10px !default;
+$fileuploader-show-file-list-padding-top: 22px !default;
+$fileuploader-file-container-padding-2: 4px 0 4px !default;
+$fileuploader-button-width: 28px !default;
+$fileuploader-button-height: 28px !default;
+$fileuploader-button-margin-right: 10px !default;
+$fileuploader-cancel-button-position-end-margin-left: 4px !default;
+$fileuploader-file-status-message-height: 16px !default;
+$fileuploader-progressbar-height: 22px !default;
+$fileuploader-file-size-padding-left: 4px !default;
+$fileuploader-file-icon-padding-right: 6px !default;
+$fileuploader-button-margin-left-2: 10px !default;
+$fileuploader-cancel-button-position-end-margin-right: 4px !default;
+$fileuploader-file-size-padding-right: 4px !default;
+$fileuploader-file-status-message-margin-bottom-2: 2px !default;
+$fileuploader-cancel-button-margin-top: 5px !default;
+
+$fileuploader-status-message-font-size: 12px !default;
+$fileuploader-file-size-font-size: 10px !default;
+
+$fileuploader-input-wrapper-vertical-padding: 1em !default; // dx-relative
 .dx-fileuploader {
   &.dx-state-disabled .dx-fileuploader-input {
     display: none;
@@ -31,12 +54,12 @@
   }
 
   &::before {
-    padding-top: 1em;
+    padding-top: $fileuploader-input-wrapper-vertical-padding;
     margin-top: -1em;
   }
 
   &::after {
-    padding-bottom: 1em;
+    padding-bottom: $fileuploader-input-wrapper-vertical-padding;
     margin-bottom: -1em;
   }
 
@@ -45,7 +68,7 @@
   }
 
   .dx-button + .dx-button {
-    margin-left: 12px;
+    margin-left: $fileuploader-button-margin-left;
   }
 }
 
@@ -77,7 +100,7 @@
   vertical-align: middle;
 
   & > .dx-fileuploader-upload-button {
-    margin-top: 10px;
+    margin-top: $fileuploader-upload-button-margin-top;
   }
 }
 
@@ -95,7 +118,7 @@
   width: 100%;
 
   .dx-fileuploader-show-file-list & {
-    padding-top: 22px;
+    padding-top: $fileuploader-show-file-list-padding-top;
   }
 }
 
@@ -103,16 +126,16 @@
   display: flex;
   align-items: center;
   width: 100%;
-  padding: 4px 0 4px;
+  padding: $fileuploader-file-container-padding-2;
 
   .dx-button {
-    width: 28px;
-    height: 28px;
-    margin-right: 10px;
+    width: $fileuploader-button-width;
+    height: $fileuploader-button-height;
+    margin-right: $fileuploader-button-margin-right;
 
     &.dx-fileuploader-cancel-button-position-end {
       margin-right: 0;
-      margin-left: 4px;
+      margin-left: $fileuploader-cancel-button-position-end-margin-left;
     }
 
     &.dx-state-invisible {
@@ -178,14 +201,14 @@
 
 .dx-fileuploader-file-status-message {
   float: left;
-  font-size: 12px;
-  height: 16px;
+  font-size: $fileuploader-status-message-font-size;
+  height: $fileuploader-file-status-message-height;
 }
 
 .dx-fileuploader .dx-progressbar {
   float: left;
   width: 100%;
-  height: 22px;
+  height: $fileuploader-progressbar-height;
   margin-top: -6px;
 }
 
@@ -197,17 +220,17 @@
 }
 
 .dx-fileuploader-file-size {
-  padding-left: 4px;
+  padding-left: $fileuploader-file-size-padding-left;
   float: left;
   vertical-align: super;
-  font-size: 10px;
+  font-size: $fileuploader-file-size-font-size;
 }
 
 .dx-fileuploader-file-icon {
   display: flex;
   justify-content: center;
   align-items: center;
-  padding-right: 6px;
+  padding-right: $fileuploader-file-icon-padding-right;
 }
 
 .dx-rtl {
@@ -218,12 +241,12 @@
     }
 
     .dx-fileuploader-file-container .dx-fileuploader-button {
-      margin-left: 10px;
+      margin-left: $fileuploader-button-margin-left-2;
       margin-right: 0;
 
       &.dx-fileuploader-cancel-button-position-end {
         margin-left: 0;
-        margin-right: 4px;
+        margin-right: $fileuploader-cancel-button-position-end-margin-right;
       }
     }
 
@@ -234,7 +257,7 @@
     }
 
     .dx-fileuploader-file-size {
-      padding-right: 4px;
+      padding-right: $fileuploader-file-size-padding-right;
     }
   }
 }
@@ -245,7 +268,7 @@
 
     span {
       display: block;
-      margin-bottom: 2px;
+      margin-bottom: $fileuploader-file-status-message-margin-bottom-2;
 
       &:last-child {
         margin-bottom: 0;
@@ -258,6 +281,6 @@
   }
 
   .dx-fileuploader-cancel-button {
-    margin-top: 5px;
+    margin-top: $fileuploader-cancel-button-margin-top;
   }
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/_form.scss b/packages/devextreme-scss/scss/widgets/base/_form.scss
index 0177d17b74f9..d478d34c5c4f 100644
--- a/packages/devextreme-scss/scss/widgets/base/_form.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_form.scss
@@ -1,9 +1,20 @@
 // adduse
 
 
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$form-first-row-padding-top: 10px !default;
+$form-switch-margin-top: 7px !default;
+$form-switch-margin-bottom: 4px !default;
+$form-multiview-item-content-padding: 20px !default;
+$form-group-content-padding-top: 19px !default;
+$form-group-content-padding-bottom: 20px !default;
+$form-group-content-margin-top: 6px !default;
+$form-field-item-label-location-left-padding-inline-end: 10px !default;
+$form-field-item-label-location-right-padding-inline-start: 10px !default;
+
 .dx-layout-manager {
   .dx-field-item:not(.dx-first-row) {
-    padding-top: 10px;
+    padding-top: $form-first-row-padding-top;
   }
 
   .dx-field-empty-item {
@@ -83,8 +94,8 @@
       // TODO: form layout manager should not contain settings with checkbox/switch classes
       .dx-checkbox,
       .dx-switch {
-        margin-top: 7px;
-        margin-bottom: 4px;
+        margin-top: $form-switch-margin-top;
+        margin-bottom: $form-switch-margin-bottom;
       }
     }
 
@@ -97,7 +108,7 @@
 
   .dx-tabpanel {
     .dx-multiview-item-content {
-      padding: 20px;
+      padding: $form-multiview-item-content-padding;
     }
   }
 }
@@ -127,9 +138,9 @@
 
 .dx-form-group-with-caption {
   & > .dx-form-group-content {
-    padding-top: 19px;
-    padding-bottom: 20px;
-    margin-top: 6px;
+    padding-top: $form-group-content-padding-top;
+    padding-bottom: $form-group-content-padding-bottom;
+    margin-top: $form-group-content-margin-top;
   }
 }
 
@@ -145,11 +156,11 @@
 }
 
 .dx-field-item-label-location-left {
-  padding-inline-end: 10px;
+  padding-inline-end: $form-field-item-label-location-left-padding-inline-end;
 }
 
 .dx-field-item-label-location-right {
-  padding-inline-start: 10px;
+  padding-inline-start: $form-field-item-label-location-right-padding-inline-start;
 }
 
 .dx-field-item-required,
diff --git a/packages/devextreme-scss/scss/widgets/base/_gallery.scss b/packages/devextreme-scss/scss/widgets/base/_gallery.scss
index c55f34eb7e48..c0569ed8ea2f 100644
--- a/packages/devextreme-scss/scss/widgets/base/_gallery.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_gallery.scss
@@ -1,10 +1,17 @@
 @use "./mixins" as *;
 
 // adduse
+
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$gallery-root-border-width: 1px !default;
+$gallery-indicator-bottom: 10px !default;
+$gallery-indicator-height: 10px !default;
+$gallery-indicator-item-margin: 0 2px !default;
+
 .dx-gallery {
   width: 100%;
   height: 100%;
-  border-width: 1px;
+  border-width: $gallery-root-border-width;
   border-style: solid;
   border-color: transparent;
 
@@ -95,16 +102,16 @@
 
 .dx-gallery-indicator {
   position: absolute;
-  bottom: 10px;
+  bottom: $gallery-indicator-bottom;
   width: 100%;
-  height: 10px;
+  height: $gallery-indicator-height;
   font-size: 0;
 }
 
 .dx-gallery-indicator-item {
   display: inline-block;
-  margin: 0 2px;
-  height: 10px;
+  margin: $gallery-indicator-item-margin;
+  height: $gallery-indicator-height;
   cursor: pointer;
 }
 
diff --git a/packages/devextreme-scss/scss/widgets/base/_htmlEditor.scss b/packages/devextreme-scss/scss/widgets/base/_htmlEditor.scss
index 01654a19b914..1e254f5c70a1 100644
--- a/packages/devextreme-scss/scss/widgets/base/_htmlEditor.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_htmlEditor.scss
@@ -4,6 +4,10 @@
 
 // adduse
 
+$htmleditor-code-block-bg: rgba(191, 191, 191, 0.15) !default;
+$htmleditor-placeholder-color: rgba(0, 0, 0, 0.6) !default;
+$htmleditor-aidialog-title-font-weight: 600 !default;
+
 $list-style: decimal lower-alpha lower-roman;
 $list-style-width: 1.2em;
 $list-style-margin: 0.3em;
@@ -283,7 +287,7 @@ $transparent-border: 1px solid transparent;
 
   code,
   .ql-code-block-container {
-    background-color: rgba(191, 191, 191, 0.15);
+    background-color: $htmleditor-code-block-bg;
   }
 
   .ql-video {
@@ -314,7 +318,7 @@ $transparent-border: 1px solid transparent;
 
   &.ql-blank {
     &::before {
-      color: rgba(0, 0, 0, 0.6);
+      color: $htmleditor-placeholder-color;
       content: attr(data-placeholder);
       font-style: italic;
       left: 15px;
@@ -392,7 +396,7 @@ $transparent-border: 1px solid transparent;
   display: flex;
   align-items: center;
   gap: 6px;
-  font-weight: 600;
+  font-weight: $htmleditor-aidialog-title-font-weight;
 }
 
 .dx-overlay-content {
diff --git a/packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss b/packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss
index 2b8b813a092e..23d99867f954 100644
--- a/packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss
@@ -1,5 +1,6 @@
 @use "sass:math";
 @use "sass:map";
+@use "sass:meta";
 @use "sass:selector";
 
 .dx-icon-plus,
@@ -213,9 +214,20 @@
 }
 
 @mixin dx-icon-sizing($icon-size, $container-size: $icon-size, $borders-size: 0) {
-  $icon-paddings-dirty: $container-size - $icon-size;
-  $icon-paddings: $icon-paddings-dirty - $borders-size;
-  $icon-padding: math.floor(math.div($icon-paddings, 2));
+  $icon-padding: null;
+  $icon-line-height: null;
+
+  @if meta.type-of($icon-size) == number and meta.type-of($container-size) == number and meta.type-of($borders-size) == number {
+    $icon-paddings-dirty: $container-size - $icon-size;
+    $icon-paddings: $icon-paddings-dirty - $borders-size;
+    $icon-padding: math.floor(math.div($icon-paddings, 2));
+    $icon-line-height: $container-size - $icon-paddings-dirty;
+  } @else {
+
+    // Token-based themes pass var()/calc() values — the derivation moves to CSS
+    $icon-padding: calc((#{$container-size} - #{$icon-size} - #{$borders-size}) / 2);
+    $icon-line-height: $icon-size;
+  }
 
   // Geometry
   width: $container-size;
@@ -231,10 +243,20 @@
   // Icon as font
   font-size: $icon-size;
   text-align: center;
-  line-height: $container-size - $icon-paddings-dirty;
+  line-height: $icon-line-height;
 }
 
 @mixin dx-icon-font-centered-sizing($icon-size, $position: absolute) {
+  $icon-center-offset: null;
+
+  @if meta.type-of($icon-size) == number {
+    $icon-center-offset: math.div(-$icon-size, 2);
+  } @else {
+
+    // Token-based themes pass var()/calc() values — the derivation moves to CSS
+    $icon-center-offset: calc(#{$icon-size} / -2);
+  }
+
   font-size: $icon-size;
   text-align: center;
   line-height: $icon-size;
@@ -244,9 +266,9 @@
     display: block;
     width: $icon-size;
     top: 50%;
-    margin-top: math.div(-$icon-size, 2);
+    margin-top: $icon-center-offset;
     left: 50%;
-    margin-left: math.div(-$icon-size, 2);
+    margin-left: $icon-center-offset;
   }
 
   @if $position == relative {
diff --git a/packages/devextreme-scss/scss/widgets/base/_loadPanel.scss b/packages/devextreme-scss/scss/widgets/base/_loadPanel.scss
index a3034f363081..a6a6c683ef16 100644
--- a/packages/devextreme-scss/scss/widgets/base/_loadPanel.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_loadPanel.scss
@@ -3,16 +3,21 @@
 // adduse
 
 
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$loadpanel-content-padding: 10px !default;
+$loadpanel-content-border: 1px solid #ccc !default;
+$loadpanel-content-border-radius: 5px !default;
+
 .dx-loadpanel-content {
-  padding: 10px;
-  border: 1px solid #ccc;
+  padding: $loadpanel-content-padding;
+  border: $loadpanel-content-border;
   background: #fefefe;
   text-align: center;
 
   @include user-select(none);
 
   -webkit-user-drag: none;
-  border-radius: 5px;
+  border-radius: $loadpanel-content-border-radius;
 
   &::before {
     display: inline-block;
diff --git a/packages/devextreme-scss/scss/widgets/base/_map.scss b/packages/devextreme-scss/scss/widgets/base/_map.scss
index d876544dd3e6..f2dab7517de9 100644
--- a/packages/devextreme-scss/scss/widgets/base/_map.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_map.scss
@@ -1,5 +1,8 @@
 // adduse
 
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$map-marker-tooltip-margin: 10px !default;
+
 .dx-map-container,
 .dx-map-shield {
   position: relative;
@@ -21,5 +24,5 @@
 }
 
 .dx-map-marker-tooltip {
-  margin: 10px;
+  margin: $map-marker-tooltip-margin;
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/_menu.scss b/packages/devextreme-scss/scss/widgets/base/_menu.scss
index e0324d34686b..e5b802f78453 100644
--- a/packages/devextreme-scss/scss/widgets/base/_menu.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_menu.scss
@@ -3,6 +3,12 @@
 // adduse
 
 
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$menu-separator-margin-inline-end: 15px !default;
+$menu-separator-margin-bottom: 15px !default;
+$menu-treeview-node-padding: 1px !default;
+$menu-item-content-padding-inline-start: 15px !default;
+
 .dx-menu {
   position: relative;
 }
@@ -17,7 +23,7 @@
 
   .dx-menu-separator {
     display: inline-block;
-    margin-inline-end: 15px;
+    margin-inline-end: $menu-separator-margin-inline-end;
   }
 }
 
@@ -29,7 +35,7 @@
   }
 
   .dx-menu-separator {
-    margin-bottom: 15px;
+    margin-bottom: $menu-separator-margin-bottom;
   }
 }
 
@@ -63,10 +69,10 @@
   }
 
   .dx-treeview-node-container:first-child > .dx-treeview-node {
-    padding: 1px;
+    padding: $menu-treeview-node-padding;
 
     .dx-item-content {
-      padding-inline-start: 15px;
+      padding-inline-start: $menu-item-content-padding-inline-start;
     }
 
     &:last-child {
diff --git a/packages/devextreme-scss/scss/widgets/base/_menuBase.scss b/packages/devextreme-scss/scss/widgets/base/_menuBase.scss
index 93cac424480f..d2d9c0f8f572 100644
--- a/packages/devextreme-scss/scss/widgets/base/_menuBase.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_menuBase.scss
@@ -1,6 +1,7 @@
 @use "./mixins" as *;
 
 // adduse
+$menubase-expand-arrow-container-width: 2em !default; // dx-relative
 .dx-menu-base {
   @include user-select(none);
 
@@ -65,7 +66,7 @@
         top: 0;
         inset-inline-end: 0;
         bottom: 0;
-        width: 2em;
+        width: $menubase-expand-arrow-container-width;
 
         .dx-menu-item-popout {
           height: 100%;
diff --git a/packages/devextreme-scss/scss/widgets/base/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/_mixins.scss
index a560cb644ca7..364fc76ef018 100644
--- a/packages/devextreme-scss/scss/widgets/base/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_mixins.scss
@@ -1,4 +1,5 @@
 @use "sass:math";
+@use "sass:meta";
 
 // stylelint-disable selector-class-pattern
 
@@ -128,7 +129,7 @@
   pointer-events: none;
   position: absolute;
   top: 50%;
-  margin-top: math.div(-$indicator-size, 2);
+  margin-top: if(meta.type-of($indicator-size) == number, math.div(-$indicator-size, 2), calc(#{$indicator-size} / -2));
   width: $indicator-size;
   height: $indicator-size;
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/_numberBox.scss b/packages/devextreme-scss/scss/widgets/base/_numberBox.scss
index becf52a20213..b4c1350c0936 100644
--- a/packages/devextreme-scss/scss/widgets/base/_numberBox.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_numberBox.scss
@@ -3,6 +3,8 @@
 // adduse
 
 
+$numberbox-spin-idle-opacity: 0.2 !default;
+
 $spin-container-width: 22px;
 $touch-friendly-spin-container-width: 64px;
 
@@ -56,6 +58,6 @@ $touch-friendly-spin-container-width: 64px;
 
 .dx-state-disabled {
   .dx-numberbox-spin-container {
-    opacity: 0.2;
+    opacity: $numberbox-spin-idle-opacity;
   }
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/_pagination.scss b/packages/devextreme-scss/scss/widgets/base/_pagination.scss
index cf6de65f799f..c0624da208d2 100644
--- a/packages/devextreme-scss/scss/widgets/base/_pagination.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_pagination.scss
@@ -3,6 +3,27 @@
 // adduse
 
 
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$pagination-page-padding-2: 7px 8px 8px !default;
+$pagination-page-horizontal-padding: 13px !default;
+$pagination-page-margin-left: 5px !default;
+$pagination-page-margin-right: 1px !default;
+$pagination-separator-padding-left: 8px !default;
+$pagination-separator-padding-right: 8px !default;
+$pagination-navigate-button-width-2: 10px !default;
+$pagination-navigate-button-height: 20px !default;
+$pagination-first-child-margin-left: 1px !default;
+$pagination-first-child-padding-left: 10px !default;
+$pagination-first-child-padding-right: 9px !default;
+$pagination-first-child-padding-top: 7px !default;
+$pagination-first-child-padding-bottom: 8px !default;
+$pagination-first-child-margin-left-2: 4px !default;
+$pagination-page-index-width: 40px !default;
+$pagination-pages-count-padding-left: 6px !default;
+
+$pagination-info-opacity: 0.7 !default;
+$pagination-nav-disabled-opacity: 0.3 !default;
+
 $pagination-paddings: 8px;
 $pagination-info-paddings: 9px;
 
@@ -27,34 +48,34 @@ $pagination-info-paddings: 9px;
     .dx-page {
       display: inline-block;
       cursor: pointer;
-      padding: 7px 8px 8px;
-      margin-left: 5px;
-      margin-right: 1px;
+      padding: $pagination-page-padding-2;
+      margin-left: $pagination-page-margin-left;
+      margin-right: $pagination-page-margin-right;
     }
 
     .dx-separator {
       display: inline-block;
-      padding-left: 8px;
-      padding-right: 8px;
+      padding-left: $pagination-separator-padding-left;
+      padding-right: $pagination-separator-padding-right;
     }
 
     .dx-info {
       display: inline-block;
       margin-right: $pagination-info-paddings;
-      opacity: 0.7;
+      opacity: $pagination-info-opacity;
     }
 
     .dx-navigate-button {
-      width: 10px;
-      height: 20px;
+      width: $pagination-navigate-button-width-2;
+      height: $pagination-navigate-button-height;
       cursor: pointer;
       display: inline-block;
       vertical-align: top;
-      padding: $pagination-paddings - 1px 13px;
+      padding: $pagination-paddings - 1px $pagination-page-horizontal-padding;
       box-sizing: content-box;
 
       &.dx-button-disable {
-        opacity: 0.3;
+        opacity: $pagination-nav-disabled-opacity;
         cursor: inherit;
       }
     }
@@ -71,17 +92,17 @@ $pagination-info-paddings: 9px;
     .dx-page-size {
       &:first-child,
       &.dx-first-child {
-        margin-left: 1px;
+        margin-left: $pagination-first-child-margin-left;
       }
 
       display: inline-block;
       cursor: pointer;
-      padding-left: 10px;
-      padding-right: 9px;
-      padding-top: 7px;
-      padding-bottom: 8px;
-      margin-left: 4px;
-      margin-right: 1px;
+      padding-left: $pagination-first-child-padding-left;
+      padding-right: $pagination-first-child-padding-right;
+      padding-top: $pagination-first-child-padding-top;
+      padding-bottom: $pagination-first-child-padding-bottom;
+      margin-left: $pagination-first-child-margin-left-2;
+      margin-right: $pagination-page-margin-right;
     }
   }
 
@@ -97,7 +118,7 @@ $pagination-info-paddings: 9px;
     display: inline-block;
 
     .dx-page-index {
-      width: 40px;
+      width: $pagination-page-index-width;
     }
 
     .dx-pages-count {
@@ -106,7 +127,7 @@ $pagination-info-paddings: 9px;
 
     .dx-info-text,
     .dx-pages-count {
-      padding-left: 6px;
+      padding-left: $pagination-pages-count-padding-left;
     }
 
     .dx-page-index,
@@ -129,7 +150,7 @@ $pagination-info-paddings: 9px;
       direction: ltr;
 
       &:first-child {
-        margin-left: 1px;
+        margin-left: $pagination-first-child-margin-left;
       }
     }
 
diff --git a/packages/devextreme-scss/scss/widgets/base/_popup.scss b/packages/devextreme-scss/scss/widgets/base/_popup.scss
index 973668a3c676..89b7a5c85087 100644
--- a/packages/devextreme-scss/scss/widgets/base/_popup.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_popup.scss
@@ -3,9 +3,17 @@
 
 // adduse
 
+$popup-dialog-shader-color: #444 !default;
+
+
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$popup-title-padding: 10px !default;
+$popup-title-min-height-2: 19px !default;
+$popup-dialog-message-padding: 10px 10px 5px 10px !default;
+
 .dx-popup-title {
-  padding: 10px;
-  min-height: 19px;
+  padding: $popup-title-padding;
+  min-height: $popup-title-min-height-2;
   -webkit-user-drag: none;
 
   @include user-select(none);
@@ -74,7 +82,7 @@
 }
 
 .dx-popup-content {
-  padding: 10px;
+  padding: $popup-title-padding;
   -webkit-user-drag: none;
 
   &.dx-dialog-content {
@@ -100,12 +108,12 @@
 
 .dx-dialog-root {
   .dx-overlay-shader {
-    background-color: #444;
+    background-color: $popup-dialog-shader-color;
   }
 }
 
 .dx-dialog-message {
-  padding: 10px 10px 5px 10px;
+  padding: $popup-dialog-message-padding;
 }
 
 .dx-prevent-safari-scrolling {
diff --git a/packages/devextreme-scss/scss/widgets/base/_progressBar.scss b/packages/devextreme-scss/scss/widgets/base/_progressBar.scss
index 634a4c24b7d0..eae86371a301 100644
--- a/packages/devextreme-scss/scss/widgets/base/_progressBar.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_progressBar.scss
@@ -2,6 +2,13 @@
 
 // adduse
 
+$progressbar-status-font-size: 12px !default;
+
+
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$progressbar-status-padding-right: 8px !default;
+$progressbar-status-padding-left: 8px !default;
+
 .dx-progressbar {
   .dx-position-left,
   .dx-position-right {
@@ -36,11 +43,11 @@
   }
 
   .dx-position-left .dx-progressbar-status {
-    padding-right: 8px;
+    padding-right: $progressbar-status-padding-right;
   }
 
   .dx-position-right .dx-progressbar-status {
-    padding-left: 8px;
+    padding-left: $progressbar-status-padding-left;
   }
 
   &::before {
@@ -80,7 +87,7 @@
   top: 0;
   left: 0;
   width: auto;
-  font-size: 12px;
+  font-size: $progressbar-status-font-size;
 }
 
 .dx-progressbar-animating-segment {
diff --git a/packages/devextreme-scss/scss/widgets/base/_scrollView.scss b/packages/devextreme-scss/scss/widgets/base/_scrollView.scss
index 6f669c0f15f0..db5d7304e1ca 100644
--- a/packages/devextreme-scss/scss/widgets/base/_scrollView.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_scrollView.scss
@@ -3,6 +3,20 @@
 // adduse
 
 
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$scrollview-top-pocket-width: 40px !default;
+$scrollview-top-pocket-height: 40px !default;
+$scrollview-pull-down-indicator-padding: 4px !default;
+$scrollview-icon-pulldown-padding: 8px !default;
+$scrollview-pull-down-indicator-width: 20px !default;
+$scrollview-pull-down-image-margin: 0 20px !default;
+$scrollview-pull-down-image-height: 50px !default;
+$scrollview-scrollbottom-padding: 10px 0 !default;
+$scrollview-scrollbottom-indicator-margin: 0 10px 0 0 !default;
+$scrollview-scrollbottom-indicator-margin-2: 0 0 0 10px !default;
+
+$scrollview-pulldown-icon-font-size: 24px !default;
+
 $pulldown-height: 50px;
 $pulldown-padding: 15px;
 
@@ -16,8 +30,8 @@ $pulldown-padding: 15px;
 
   &.dx-scrollable-native-android {
     .dx-scrollview-top-pocket {
-      width: 40px;
-      height: 40px;
+      width: $scrollview-top-pocket-width;
+      height: $scrollview-top-pocket-height;
       left: 50%;
       position: absolute;
       z-index: 1;
@@ -40,7 +54,7 @@ $pulldown-padding: 15px;
       .dx-scrollview-pull-down-indicator {
         position: relative;
         top: 0;
-        padding: 4px;
+        padding: $scrollview-pull-down-indicator-padding;
         margin: 0;
         height: 100%;
         width: 100%;
@@ -56,8 +70,8 @@ $pulldown-padding: 15px;
     .dx-icon-pulldown {
       width: 100%;
       height: 100%;
-      padding: 8px;
-      font-size: 24px;
+      padding: $scrollview-icon-pulldown-padding;
+      font-size: $scrollview-pulldown-icon-font-size;
       box-sizing: border-box;
       transition: opacity 0.2s;
     }
@@ -129,16 +143,16 @@ $pulldown-padding: 15px;
   top: 50%;
   display: inline-block;
   margin: -15px 20px 0 15px;
-  width: 20px;
+  width: $scrollview-pull-down-indicator-width;
   -webkit-user-drag: none;
 }
 
 .dx-scrollview-pull-down-image {
   display: inline-block;
   vertical-align: middle;
-  margin: 0 20px;
-  width: 20px;
-  height: 50px;
+  margin: $scrollview-pull-down-image-margin;
+  width: $scrollview-pull-down-indicator-width;
+  height: $scrollview-pull-down-image-height;
   background-size: contain;
   -webkit-user-drag: none;
 
@@ -188,7 +202,7 @@ $pulldown-padding: 15px;
 
 .dx-scrollview-scrollbottom {
   width: 100%;
-  padding: 10px 0;
+  padding: $scrollview-scrollbottom-padding;
   overflow: hidden;
   text-align: center;
   transform: translate(0, 0);
@@ -203,7 +217,7 @@ $pulldown-padding: 15px;
 
 .dx-scrollview-scrollbottom-indicator {
   display: inline-block;
-  margin: 0 10px 0 0;
+  margin: $scrollview-scrollbottom-indicator-margin;
   -webkit-user-drag: none;
 }
 
@@ -245,5 +259,5 @@ $pulldown-padding: 15px;
 }
 
 .dx-rtl .dx-scrollview-scrollbottom-indicator {
-  margin: 0 0 0 10px;
+  margin: $scrollview-scrollbottom-indicator-margin-2;
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/_slider.scss b/packages/devextreme-scss/scss/widgets/base/_slider.scss
index 11401d091840..91f2375b28d3 100644
--- a/packages/devextreme-scss/scss/widgets/base/_slider.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_slider.scss
@@ -5,9 +5,15 @@
 $slider-tooltip-content-height: 28px;
 $slider-tooltip-arrow-height: 7px;
 
+
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$slider-label-position-bottom-padding-bottom: 14px !default;
+$slider-label-position-top-padding-top: 14px !default;
+
+$slider-label-font-size: 0.85em !default; // dx-relative
 .dx-slider-label {
   position: absolute;
-  font-size: 0.85em;
+  font-size: $slider-label-font-size;
 
   &:last-child {
     inset-inline-end: 0;
@@ -15,11 +21,11 @@ $slider-tooltip-arrow-height: 7px;
 }
 
 .dx-slider-label-position-bottom {
-  padding-bottom: 14px;
+  padding-bottom: $slider-label-position-bottom-padding-bottom;
 }
 
 .dx-slider-label-position-top {
-  padding-top: 14px;
+  padding-top: $slider-label-position-top-padding-top;
 }
 
 .dx-slider {
diff --git a/packages/devextreme-scss/scss/widgets/base/_sortable.scss b/packages/devextreme-scss/scss/widgets/base/_sortable.scss
index b91847df15b5..ce05fc663281 100644
--- a/packages/devextreme-scss/scss/widgets/base/_sortable.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_sortable.scss
@@ -1,10 +1,21 @@
 @use "sass:color";
+@use "sass:meta";
 @use "./mixins" as *;
 
 // adduse
 
+$sortable-clone-shadow-color-first: rgba(0, 0, 0, 0.1) !default;
+$sortable-clone-shadow-color-second: rgba(0, 0, 0, 0.2) !default;
+$sortable-clone-opacity: 0.9 !default;
+$sortable-source-opacity: 0.5 !default;
+
 $base-accent: null !default;
 
+
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$sortable-placeholder-border: 1px solid !default;
+$sortable-placeholder-inside-border-width: 2px !default;
+
 .dx-sortable {
   overflow: hidden;
 }
@@ -14,7 +25,7 @@ $base-accent: null !default;
   top: 0;
   left: 0;
   box-sizing: border-box;
-  opacity: 0.9;
+  opacity: $sortable-clone-opacity;
   z-index: $max-integer;
 
   .dx-inkripple {
@@ -27,7 +38,7 @@ $base-accent: null !default;
 }
 
 .dx-sortable-source {
-  opacity: 0.5;
+  opacity: $sortable-source-opacity;
 }
 
 .dx-sortable-source-hidden {
@@ -38,17 +49,17 @@ $base-accent: null !default;
   position: absolute;
   top: 0;
   left: 0;
-  border: 1px solid;
+  border: $sortable-placeholder-border;
   border-color: $base-accent;
   box-sizing: border-box;
   z-index: $max-integer;
 }
 
 .dx-sortable-placeholder-inside {
-  border-width: 2px;
+  border-width: $sortable-placeholder-inside-border-width;
 }
 
 .dx-sortable-dragging > * {
-  border-color: color.change($base-accent, $alpha: 0.5);
-  box-shadow: 0 1px 3px color.change(#000, $alpha: 0.1), 0 6px 8px color.change(#000, $alpha: 0.2);
+  border-color: if(meta.type-of($base-accent) == color, color.change($base-accent, $alpha: 0.5), rgb(from #{$base-accent} r g b / 0.5));
+  box-shadow: 0 1px 3px $sortable-clone-shadow-color-first, 0 6px 8px $sortable-clone-shadow-color-second;
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/_speedDialAction.scss b/packages/devextreme-scss/scss/widgets/base/_speedDialAction.scss
index 54d89276659b..c27d831dacbf 100644
--- a/packages/devextreme-scss/scss/widgets/base/_speedDialAction.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_speedDialAction.scss
@@ -1,6 +1,11 @@
 @use "sass:math";
+@use "sass:meta";
 @use "sass:color";
 
+
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$speeddialaction-fa-button-label-border-radius: 4px !default;
+
 .dx-fa-button .dx-overlay-content {
   border-radius: 50%;
   cursor: pointer;
@@ -21,8 +26,18 @@
   $speed-dial-action-active-bg,
   $speed-dial-action-label-shadow,
   $button-default-bg,
-  $button-default-color
+  $button-default-color,
+  // Optional overrides for the main-button hover/active backgrounds. When null (all
+  // legacy callers), they are derived from $button-default-bg via color.adjust() as
+  // before; themes whose bg is a var() token pass ready state values instead.
+  $button-default-hover-bg: null,
+  $button-default-active-bg: null
 ) {
+  $fa-main-radius: if(meta.type-of($main-action-button-size) == number, math.div($main-action-button-size, 2), calc(#{$main-action-button-size} / 2));
+  $fa-action-radius: if(meta.type-of($action-button-size) == number, math.div($action-button-size, 2), calc(#{$action-button-size} / 2));
+  $fa-main-icon-padding: if(meta.type-of($main-action-button-size) == number and meta.type-of($icon-size) == number, math.div($main-action-button-size - $icon-size, 2), calc((#{$main-action-button-size} - #{$icon-size}) / 2));
+  $fa-action-icon-padding: if(meta.type-of($action-button-size) == number and meta.type-of($icon-size) == number, math.div($action-button-size - $icon-size, 2), calc((#{$action-button-size} - #{$icon-size}) / 2));
+
   .dx-fa-button {
     &.dx-fa-button-main {
       .dx-overlay-shader {
@@ -35,11 +50,11 @@
         background-color: $button-default-bg;
         color: $button-default-color;
         overflow: visible;
-        border-radius: math.div($main-action-button-size, 2);
+        border-radius: $fa-main-radius;
         box-shadow: $speed-dial-action-shadow;
 
         &.dx-state-hover {
-          background-color: color.adjust($button-default-bg, $lightness: -10%, $space: hsl);
+          background-color: if($button-default-hover-bg != null, $button-default-hover-bg, color.adjust($button-default-bg, $lightness: -10%, $space: hsl));
 
           .dx-fa-button-icon {
             background-color: transparent;
@@ -47,7 +62,7 @@
         }
 
         &.dx-state-active {
-          background-color: color.adjust($button-default-bg, $lightness: -15%, $space: hsl);
+          background-color: if($button-default-active-bg != null, $button-default-active-bg, color.adjust($button-default-bg, $lightness: -15%, $space: hsl));
 
           .dx-fa-button-icon {
             background-color: transparent;
@@ -56,7 +71,7 @@
 
         .dx-fa-button-icon,
         .dx-fa-button-icon-close {
-          padding: math.div($main-action-button-size - $icon-size, 2);
+          padding: $fa-main-icon-padding;
           box-shadow: none;
           background-color: transparent;
         }
@@ -74,7 +89,7 @@
         }
 
         .dx-inkripple {
-          border-radius: math.div($main-action-button-size, 2);
+          border-radius: $fa-main-radius;
         }
       }
 
@@ -85,7 +100,7 @@
 
           .dx-fa-button-icon,
           .dx-fa-button-icon-close {
-            padding: math.div($main-action-button-size - $icon-size, 2) 0 math.div($main-action-button-size - $icon-size, 2) math.div($main-action-button-size - $icon-size, 2);
+            padding: $fa-main-icon-padding 0 $fa-main-icon-padding $fa-main-icon-padding;
           }
         }
       }
@@ -99,7 +114,7 @@
 
     .dx-fa-button-icon,
     .dx-fa-button-icon-close {
-      padding: math.div($action-button-size - $icon-size, 2);
+      padding: $fa-action-icon-padding;
       width: $icon-size;
       height: $icon-size;
       box-sizing: content-box;
@@ -158,7 +173,7 @@
           background-color: $speed-dial-action-bg;
           color: $speed-dial-action-color;
           white-space: nowrap;
-          border-radius: 4px;
+          border-radius: $speeddialaction-fa-button-label-border-radius;
           padding: $label-padding;
           margin-right: $label-offset;
           box-shadow: $speed-dial-action-label-shadow;
@@ -175,7 +190,7 @@
 
       .dx-inkripple {
         overflow: hidden;
-        border-radius: math.div($action-button-size, 2);
+        border-radius: $fa-action-radius;
       }
     }
   }
diff --git a/packages/devextreme-scss/scss/widgets/base/_splitterBar.scss b/packages/devextreme-scss/scss/widgets/base/_splitterBar.scss
index e8e1c74a41df..56a29ed84609 100644
--- a/packages/devextreme-scss/scss/widgets/base/_splitterBar.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_splitterBar.scss
@@ -2,6 +2,11 @@
 
 // adduse
 
+
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$splitterbar-splitter-border-width: 7px !default;
+$splitterbar-splitter-bar-width: 1px !default;
+
 .dx-splitter-wrapper {
   height: 100%;
   width: 0;
@@ -12,12 +17,12 @@
   .dx-splitter-border {
     z-index: 997;
     height: 100%;
-    width: 7px;
+    width: $splitterbar-splitter-border-width;
     cursor: col-resize;
 
     .dx-splitter-bar {
       height: 100%;
-      width: 1px;
+      width: $splitterbar-splitter-bar-width;
       display: block;
       cursor: col-resize;
       z-index: $overlay-zindex - 1;
diff --git a/packages/devextreme-scss/scss/widgets/base/_tileView.scss b/packages/devextreme-scss/scss/widgets/base/_tileView.scss
index cc86985c2fb2..624be22c45c9 100644
--- a/packages/devextreme-scss/scss/widgets/base/_tileView.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_tileView.scss
@@ -1,5 +1,9 @@
 // adduse
 
+
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$tileview-wrapper-height: 1px !default;
+
 .dx-tileview {
   div.dx-scrollable-container {
     overflow-y: hidden; // anyway, tagName added for increase priorities
@@ -24,5 +28,5 @@
 
 .dx-tileview-wrapper {
   position: relative;
-  height: 1px;
+  height: $tileview-wrapper-height;
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/_toast.scss b/packages/devextreme-scss/scss/widgets/base/_toast.scss
index be0ad858929a..90ea0b478369 100644
--- a/packages/devextreme-scss/scss/widgets/base/_toast.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_toast.scss
@@ -1,19 +1,28 @@
 // adduse
 
+
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$toast-content-padding: 10px !default;
+$toast-icon-width: 35px !default;
+$toast-icon-height: 35px !default;
+$toast-icon-margin-right: 10px !default;
+$toast-icon-margin-left: 10px !default;
+$toast-stack-gap: 3px !default;
+
 .dx-toast-content {
   display: flex;
-  padding: 10px;
+  padding: $toast-content-padding;
   align-items: center;
 }
 
 .dx-toast-icon {
   display: inline-flex;
   background-size: contain;
-  width: 35px;
-  height: 35px;
+  width: $toast-icon-width;
+  height: $toast-icon-height;
   background-position: left center;
   background-repeat: no-repeat;
-  margin-right: 10px;
+  margin-right: $toast-icon-margin-right;
 }
 
 .dx-toast-message {
@@ -38,7 +47,7 @@
 
 .dx-rtl {
   .dx-toast-icon {
-    margin-left: 10px;
+    margin-left: $toast-icon-margin-left;
     margin-right: 0;
   }
 }
@@ -46,7 +55,7 @@
 .dx-toast-stack {
   position: fixed;
   display: flex;
-  gap: 3px;
+  gap: $toast-stack-gap;
   align-items: center;
   z-index: 9500;
 
diff --git a/packages/devextreme-scss/scss/widgets/base/_tooltip.scss b/packages/devextreme-scss/scss/widgets/base/_tooltip.scss
index b145fdc3b48a..b209708c2a09 100644
--- a/packages/devextreme-scss/scss/widgets/base/_tooltip.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_tooltip.scss
@@ -1,9 +1,16 @@
 // adduse
 
+
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$tooltip-overlay-content-min-width: 34px !default;
+$tooltip-overlay-content-min-height: 26px !default;
+$tooltip-popup-content-padding: 12px 17px !default;
+
+$tooltip-content-font-size: 0.85em !default; // dx-relative
 .dx-tooltip-wrapper {
   .dx-overlay-content {
-    min-width: 34px;
-    min-height: 26px;
+    min-width: $tooltip-overlay-content-min-width;
+    min-height: $tooltip-overlay-content-min-height;
     text-align: center;
     line-height: 0;
 
@@ -16,8 +23,8 @@
 
     .dx-popup-content {
       display: inline-block;
-      padding: 12px 17px;
-      font-size: 0.85em;
+      padding: $tooltip-popup-content-padding;
+      font-size: $tooltip-content-font-size;
       line-height: normal;
       white-space: nowrap;
     }
diff --git a/packages/devextreme-scss/scss/widgets/base/_validation.scss b/packages/devextreme-scss/scss/widgets/base/_validation.scss
index 7e8eecc70e3e..9ed0da1ef893 100644
--- a/packages/devextreme-scss/scss/widgets/base/_validation.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_validation.scss
@@ -1,4 +1,10 @@
 
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$validation-summary-margin-top: 20px !default;
+$validation-message-content-padding: 10px !default;
+
+$validation-message-font-size: 0.85em !default; // dx-relative
+
 @mixin dx-base-validation($summary-color, $message-color, $message-bg-color, $border-radius) {
   .dx-validationsummary-item {
     color: $summary-color;
@@ -39,7 +45,7 @@
   }
 
   .dx-form-validation-summary {
-    margin-top: 20px;
+    margin-top: $validation-summary-margin-top;
   }
 }
 
@@ -61,8 +67,8 @@
   & > .dx-overlay-content {
     display: inline-block;
     border-width: 0;
-    padding: 10px;
-    font-size: 0.85em;
+    padding: $validation-message-content-padding;
+    font-size: $validation-message-font-size;
     line-height: normal;
     word-wrap: break-word;
   }
diff --git a/packages/devextreme-scss/scss/widgets/base/buttonGroup/_index.scss b/packages/devextreme-scss/scss/widgets/base/buttonGroup/_index.scss
index e50d8fd8b0f2..c28f6612de8a 100644
--- a/packages/devextreme-scss/scss/widgets/base/buttonGroup/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/buttonGroup/_index.scss
@@ -2,6 +2,10 @@
 
 // adduse
 
+
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$buttongroup-mode-text-column-gap: 1px !default;
+
 .dx-buttongroup {
   display: inline-block;
 }
@@ -13,7 +17,7 @@
   width: 100%;
 
   .dx-buttongroup-mode-text & {
-    column-gap: 1px;
+    column-gap: $buttongroup-mode-text-column-gap;
   }
 }
 
diff --git a/packages/devextreme-scss/scss/widgets/base/calendar/_calendar.scss b/packages/devextreme-scss/scss/widgets/base/calendar/_calendar.scss
index a6e1c2afa653..63a3bcce71c6 100644
--- a/packages/devextreme-scss/scss/widgets/base/calendar/_calendar.scss
+++ b/packages/devextreme-scss/scss/widgets/base/calendar/_calendar.scss
@@ -3,6 +3,10 @@
 // adduse
 
 
+$calendar-week-day-header-font-size: 10px !default;
+$calendar-week-day-header-font-weight: 500 !default;
+
+$calendar-week-number-cell-width: 2em !default; // dx-relative
 .dx-calendar {
   @include user-select(none);
 
@@ -71,8 +75,8 @@
   }
 
   thead th {
-    font-weight: 500;
-    font-size: 10px;
+    font-weight: $calendar-week-day-header-font-weight;
+    font-size: $calendar-week-day-header-font-size;
 
     @include dx-overflow();
   }
@@ -92,7 +96,7 @@
     align-items: center;
     justify-content: center;
     text-align: center;
-    width: 2em;
+    width: $calendar-week-number-cell-width;
     inset: 0;
   }
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/calendar/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/calendar/_mixins.scss
index 3e6de72eca09..2d7e4b2bf7a8 100644
--- a/packages/devextreme-scss/scss/widgets/base/calendar/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/base/calendar/_mixins.scss
@@ -1,4 +1,5 @@
 @use "sass:color";
+@use "sass:meta";
 
 @mixin dx-calendar-mixin(
   $calendar-bg,
@@ -16,7 +17,7 @@
     gap: $calendar-element-padding;
 
     &.dx-calendar-with-footer {
-      height: $calendar-height + $calendar-element-padding + $footer-button-height;
+      height: if(meta.type-of($calendar-height) == number and meta.type-of($calendar-element-padding) == number and meta.type-of($footer-button-height) == number, $calendar-height + $calendar-element-padding + $footer-button-height, calc(#{$calendar-height} + #{$calendar-element-padding} + #{$footer-button-height}));
     }
 
     &.dx-calendar-multiview {
@@ -239,7 +240,7 @@
 
     &.dx-calendar-empty-cell {
       cursor: default;
-      color: color.change($cell-text-color, $alpha: 0.24);
+      color: if(meta.type-of($cell-text-color) == color, color.change($cell-text-color, $alpha: 0.24), rgb(from #{$cell-text-color} r g b / 0.24));
 
       &.dx-state-hover,
       &.dx-state-active {
diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss
index 5b1d0f6efec9..e129742ece8f 100644
--- a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss
@@ -1,4 +1,4 @@
-
+@use "sass:meta";
 @use './item';
 @use './variables' as *;
 
@@ -76,7 +76,7 @@ $sortable-side-offset: 6px;
     Please note, that header-item-container paddings taken into account here
  */
   &--with-header-items {
-    margin: 0 ($sortable-side-offset - $cardview-header-item__right-padding) 0 ($sortable-side-offset - $cardview-header-item__left-padding);
+    margin: 0 if(meta.type-of($sortable-side-offset) == number and meta.type-of($cardview-header-item__right-padding) == number, ($sortable-side-offset - $cardview-header-item__right-padding), calc(#{$sortable-side-offset} - #{$cardview-header-item__right-padding})) 0 if(meta.type-of($sortable-side-offset) == number and meta.type-of($cardview-header-item__left-padding) == number, ($sortable-side-offset - $cardview-header-item__left-padding), calc(#{$sortable-side-offset} - #{$cardview-header-item__left-padding}));
   }
 
   &--empty {
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/_index.scss
index b0296c093a7e..20a41e98da6a 100644
--- a/packages/devextreme-scss/scss/widgets/base/chat/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/chat/_index.scss
@@ -1,10 +1,17 @@
+$chat-file-name-font-weight: 600 !default;
+$chat-editing-preview-caption-font-weight: 500 !default;
+
 @use "../mixins" as *;
 @use "layout/chat" as *;
 @use "layout/chat-avatar" as *;
-@use "layout/chat-fileview" as *;
+@use "layout/chat-fileview" as * with (
+  $file-name-font-weight: $chat-file-name-font-weight,
+);
 @use "layout/chat-alertlist" as *;
 @use "layout/chat-messagebox" as *;
-@use "layout/chat-messagebox-editing-preview" as *;
+@use "layout/chat-messagebox-editing-preview" as * with (
+  $editing-preview-caption-font-weight: $chat-editing-preview-caption-font-weight,
+);
 @use "layout/chat-messagebubble" as *;
 @use "layout/chat-confirmationpopup" as *;
 @use "layout/chat-messagegroup" as *;
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-fileview/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-fileview/_index.scss
index dab10e4c6c92..159eeef58c57 100644
--- a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-fileview/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-fileview/_index.scss
@@ -1,3 +1,5 @@
+$file-name-font-weight: null !default;
+
 @use "../../../mixins" as *;
 
 .dx-chat-file {
@@ -18,7 +20,7 @@
   display: block;
   flex: 1 1 auto;
   min-width: 0;
-  font-weight: 600;
+  font-weight: $file-name-font-weight;
   line-height: 1.2857;
 
   @include dx-overflow();
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-fileview/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-fileview/_mixins.scss
index 0371918942f6..58ad56c6c93f 100644
--- a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-fileview/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-fileview/_mixins.scss
@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 @mixin chat-file(
   $chat-file-container-width,
   $chat-file-container-padding,
@@ -31,7 +33,7 @@
   }
 
   .dx-chat-file-name {
-    margin-inline-end: $chat-file-base-section-gap * 2;
+    margin-inline-end: if(meta.type-of($chat-file-base-section-gap) == number, $chat-file-base-section-gap * 2, calc(#{$chat-file-base-section-gap} * 2));
     margin-inline-start: $chat-file-base-section-gap;
   }
 
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox-editing-preview/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox-editing-preview/_index.scss
index 323afd6d90a0..85ecf9127623 100644
--- a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox-editing-preview/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox-editing-preview/_index.scss
@@ -1,3 +1,5 @@
+$editing-preview-caption-font-weight: null !default;
+
 @use "../chat" as *;
 
 .dx-chat-editing-preview {
@@ -27,7 +29,7 @@
 }
 
 .dx-chat-editing-preview-caption {
-  font-weight: 500;
+  font-weight: $editing-preview-caption-font-weight;
 }
 
 .dx-chat-editing-preview-text {
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox-editing-preview/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox-editing-preview/_mixins.scss
index ef65e694b2c2..7b1b90046c21 100644
--- a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox-editing-preview/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox-editing-preview/_mixins.scss
@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 @mixin message-editing-preview(
   $preview-padding,
   $message-row-gap,
@@ -14,7 +16,7 @@
 
   .dx-chat-editing-preview-content {
     gap: $message-row-gap;
-    padding-inline-start: $preview-padding + $border-width;
+    padding-inline-start: if(meta.type-of($preview-padding) == number and meta.type-of($border-width) == number, $preview-padding + $border-width, calc(#{$preview-padding} + #{$border-width}));
     padding-inline-end: $preview-padding;
   }
 
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebubble/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebubble/_index.scss
index ac7c4e3b5365..bfeb9f8d3fd3 100644
--- a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebubble/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebubble/_index.scss
@@ -2,6 +2,7 @@ $chat-messagebubble-padding-image: 4px !default;
 $chat-messagebubble-border-radius-image: 8px !default;
 $chat-messagebubble-max-width-image: 400px !default;
 $chat-messagebubble-max-height-image: 400px !default;
+$chat-messagebubble-content-max-width: 82.5% !default; // dx-relative-%
 
 .dx-chat-messagegroup-content {
   display: flex;
@@ -47,7 +48,7 @@ $chat-messagebubble-max-height-image: 400px !default;
 .dx-chat-messagegroup-alignment-end {
   .dx-chat-messagegroup-content {
     align-items: flex-end;
-    max-width: 82.5%;
+    max-width: $chat-messagebubble-content-max-width;
   }
 
   .dx-chat-messagebubble {
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_mixins.scss
index 612aaaad8857..f70805be28b6 100644
--- a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_mixins.scss
@@ -1,4 +1,5 @@
 @use "sass:math";
+@use "sass:meta";
 
 @mixin chat-messagelist(
   $padding,
@@ -51,7 +52,7 @@
   .dx-chat-messagelist-empty-image {
     color: $messagelist-empty-icon-color;
     background-color: $messagelist-empty-icon-background-color;
-    padding: math.div($messagelist-empty-icon-box-size - $messagelist-empty-icon-size, 2);
+    padding: if(meta.type-of($messagelist-empty-icon-box-size) == number and meta.type-of($messagelist-empty-icon-size) == number, math.div($messagelist-empty-icon-box-size - $messagelist-empty-icon-size, 2), calc((#{$messagelist-empty-icon-box-size} - #{$messagelist-empty-icon-size}) / 2));
     margin-bottom: $messagelist-empty-icon-margin-bottom;
 
     &::before {
diff --git a/packages/devextreme-scss/scss/widgets/base/checkBox/_index.scss b/packages/devextreme-scss/scss/widgets/base/checkBox/_index.scss
index e80922531828..4783497c7252 100644
--- a/packages/devextreme-scss/scss/widgets/base/checkBox/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/checkBox/_index.scss
@@ -4,6 +4,9 @@
 // adduse
 
 
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$checkbox-text-padding-inline-start: 5px !default;
+
 .dx-checkbox {
   display: inline-block;
   cursor: pointer;
@@ -41,7 +44,7 @@
   white-space: pre-wrap;
   word-wrap: break-word;
   line-height: normal;
-  padding-inline-start: 5px;
+  padding-inline-start: $checkbox-text-padding-inline-start;
 }
 
 .dx-state-disabled {
diff --git a/packages/devextreme-scss/scss/widgets/base/colorBox/_index.scss b/packages/devextreme-scss/scss/widgets/base/colorBox/_index.scss
index 2ca9396bc39f..b007f9ba943d 100644
--- a/packages/devextreme-scss/scss/widgets/base/colorBox/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/colorBox/_index.scss
@@ -6,6 +6,14 @@
 
 $colorbox-input-left-padding: 40px;
 
+
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$colorbox-texteditor-input-container-width: 15px !default;
+$colorbox-texteditor-input-container-height: 15px !default;
+$colorbox-texteditor-input-container-inset-inline-start: 14px !default;
+$colorbox-overlay-padding-2: 20px !default;
+$colorbox-toolbar-item-padding-right: 10px !default;
+
 .dx-colorbox-input-container {
   &.dx-colorbox-color-is-not-defined {
     .dx-colorbox-color-result-preview {
@@ -26,10 +34,10 @@ $colorbox-input-left-padding: 40px;
       position: absolute;
       top: 50%;
       z-index: 1;
-      width: 15px;
-      height: 15px;
+      width: $colorbox-texteditor-input-container-width;
+      height: $colorbox-texteditor-input-container-height;
       margin-top: -7.5px;
-      inset-inline-start: 14px;
+      inset-inline-start: $colorbox-texteditor-input-container-inset-inline-start;
     }
   }
 
@@ -49,7 +57,7 @@ $colorbox-input-left-padding: 40px;
 }
 
 .dx-colorbox-overlay {
-  padding: 20px;
+  padding: $colorbox-overlay-padding-2;
 
   .dx-popup-content {
     overflow: hidden;
@@ -58,7 +66,7 @@ $colorbox-input-left-padding: 40px;
 
   .dx-popup-bottom {
     .dx-toolbar-item:first-child {
-      padding-right: 10px;
+      padding-right: $colorbox-toolbar-item-padding-right;
     }
   }
 
diff --git a/packages/devextreme-scss/scss/widgets/base/dataGrid/_common.scss b/packages/devextreme-scss/scss/widgets/base/dataGrid/_common.scss
index 93177aa14ff9..7c2796a59a62 100644
--- a/packages/devextreme-scss/scss/widgets/base/dataGrid/_common.scss
+++ b/packages/devextreme-scss/scss/widgets/base/dataGrid/_common.scss
@@ -4,6 +4,13 @@
 // adduse
 
 
+$datagrid-common-group-min-width: null !default;
+$datagrid-common-addrow-margin-right: null !default;
+$datagrid-common-addrow-margin-left: null !default;
+$datagrid-common-form-buttons-border-radius: null !default;
+$datagrid-common-form-buttons-margin-left: null !default;
+$datagrid-common-form-buttons-margin-right: null !default;
+
 @include grid-base(datagrid);
 
 .dx-datagrid {
@@ -14,12 +21,12 @@
 
 @mixin dx-group-panel-item() {
   display: inline-block;
-  min-width: 30px;
-  margin-right: 10px;
+  min-width: $datagrid-common-group-min-width;
+  margin-right: $datagrid-common-addrow-margin-right;
   white-space: nowrap;
 
   .dx-sort {
-    margin-left: 6px;
+    margin-left: $datagrid-common-addrow-margin-left;
   }
 }
 
@@ -39,7 +46,7 @@
 
   .dx-block-separator {
     position: relative;
-    border-radius: 3px;
+    border-radius: $datagrid-common-form-buttons-border-radius;
   }
 }
 
@@ -79,12 +86,12 @@
     .dx-group-panel-item,
     .dx-block-separator {
       margin-right: 0;
-      margin-left: 10px;
+      margin-left: $datagrid-common-form-buttons-margin-left;
     }
 
     .dx-sort {
       margin-left: 0;
-      margin-right: 6px;
+      margin-right: $datagrid-common-form-buttons-margin-right;
     }
   }
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/dataGrid/_index.scss b/packages/devextreme-scss/scss/widgets/base/dataGrid/_index.scss
index 070145a19561..be41d7a03cbf 100644
--- a/packages/devextreme-scss/scss/widgets/base/dataGrid/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/dataGrid/_index.scss
@@ -10,11 +10,29 @@ $header-filter-color: null !default;
 $header-filter-color-empty: null !default;
 $base-focus-color: null !default;
 $datagrid-text-stub-background-image-path: null !default;
+$datagrid-group-row-border: 1px solid !default;
+$datagrid-sticky-column-border: 2px solid !default;
+$datagrid-cell-focus-outline: 2px solid !default;
 
 @use "sass:color";
+@use "sass:meta";
 @use "../mixins" as *;
 @use "../icon_fonts" as *;
-@use "./common";
+$datagrid-common-group-min-width: 30px !default;
+$datagrid-common-addrow-margin-right: 10px !default;
+$datagrid-common-addrow-margin-left: 6px !default;
+$datagrid-common-form-buttons-border-radius: 3px !default;
+$datagrid-common-form-buttons-margin-left: 10px !default;
+$datagrid-common-form-buttons-margin-right: 6px !default;
+
+@use "./common" with (
+  $datagrid-common-group-min-width: $datagrid-common-group-min-width,
+  $datagrid-common-addrow-margin-right: $datagrid-common-addrow-margin-right,
+  $datagrid-common-addrow-margin-left: $datagrid-common-addrow-margin-left,
+  $datagrid-common-form-buttons-border-radius: $datagrid-common-form-buttons-border-radius,
+  $datagrid-common-form-buttons-margin-left: $datagrid-common-form-buttons-margin-left,
+  $datagrid-common-form-buttons-margin-right: $datagrid-common-form-buttons-margin-right,
+);
 @use "./variables" as *;
 @use 'layout/cell' with (
   $datagrid-border: $datagrid-border,
@@ -22,8 +40,21 @@ $datagrid-text-stub-background-image-path: null !default;
   $datagrid-base-background-color: $datagrid-base-background-color,
   $datagrid-row-error-color: $datagrid-row-error-color,
   $datagrid-focused-border-color: $datagrid-focused-border-color,
+  $datagrid-group-row-border: $datagrid-group-row-border,
+  $datagrid-sticky-column-border: $datagrid-sticky-column-border,
+  $datagrid-cell-focus-outline: $datagrid-cell-focus-outline,
 );
 
+
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$datagrid-header-filter-outline: 2px solid !default;
+$datagrid-header-filter-outline-offset: 2px !default;
+$datagrid-filter-panel-clear-filter-outline-offset: 3px !default;
+$datagrid-button-margin-left: 10px !default;
+$datagrid-button-margin-top: 10px !default;
+$datagrid-error-message-margin-bottom: 20px !default;
+$datagrid-button-margin-right: 10px !default;
+
 .dx-datagrid-borders {
   > .dx-datagrid-headers,
   > .dx-datagrid-rowsview,
@@ -111,13 +142,13 @@ $datagrid-text-stub-background-image-path: null !default;
     &.dx-state-focused .dx-datagrid-group-panel {
       .dx-group-panel-item:focus,
       .dx-header-filter:focus {
-        outline: 2px solid;
+        outline: $datagrid-header-filter-outline;
         outline-color: $datagrid-focused-border-color;
         outline-offset: -2px;
       }
 
       .dx-header-filter:focus {
-        outline-offset: 2px;
+        outline-offset: $datagrid-header-filter-outline-offset;
       }
     }
   }
@@ -129,9 +160,9 @@ $datagrid-text-stub-background-image-path: null !default;
 
     &.dx-state-focused .dx-header-row {
       td .dx-header-filter:focus {
-        outline: 2px solid;
+        outline: $datagrid-header-filter-outline;
         outline-color: $datagrid-focused-border-color;
-        outline-offset: 2px;
+        outline-offset: $datagrid-header-filter-outline-offset;
       }
     }
   }
@@ -163,9 +194,9 @@ $datagrid-text-stub-background-image-path: null !default;
 
   .dx-datagrid-rowsview.dx-state-focused .dx-data-row {
     & > td.dx-command-edit > a.dx-link:focus {
-      outline: 2px solid;
+      outline: $datagrid-header-filter-outline;
       outline-color: $datagrid-focused-border-color;
-      outline-offset: 2px;
+      outline-offset: $datagrid-header-filter-outline-offset;
     }
 
     &.dx-row-focused > td.dx-command-edit > a.dx-link:focus {
@@ -248,9 +279,9 @@ $datagrid-text-stub-background-image-path: null !default;
     .dx-icon-filter:focus,
     .dx-datagrid-filter-panel-text:focus,
     .dx-datagrid-filter-panel-clear-filter:focus {
-      outline: 2px solid;
+      outline: $datagrid-header-filter-outline;
       outline-color: $datagrid-focused-border-color;
-      outline-offset: 3px;
+      outline-offset: $datagrid-filter-panel-clear-filter-outline-offset;
     }
   }
 }
@@ -259,8 +290,8 @@ $datagrid-text-stub-background-image-path: null !default;
   float: right;
 
   .dx-button {
-    margin-left: 10px;
-    margin-top: 10px;
+    margin-left: $datagrid-button-margin-left;
+    margin-top: $datagrid-button-margin-top;
   }
 }
 
@@ -275,7 +306,7 @@ $datagrid-text-stub-background-image-path: null !default;
   @include dx-datagrid-error-message();
 
   color: $datagrid-row-error-color;
-  margin-bottom: 20px;
+  margin-bottom: $datagrid-error-message-margin-bottom;
 }
 
 .dx-rtl {
@@ -298,7 +329,7 @@ $datagrid-text-stub-background-image-path: null !default;
 
     .dx-button {
       margin-left: 0;
-      margin-right: 10px;
+      margin-right: $datagrid-button-margin-right;
     }
   }
 }
@@ -309,11 +340,11 @@ $datagrid-text-stub-background-image-path: null !default;
 
 @keyframes dx-datagrid-highlight-change {
   from {
-    background-color: color.change($datagrid-base-color, $alpha: 0.08);
+    background-color: if(meta.type-of($datagrid-base-color) == color, color.change($datagrid-base-color, $alpha: 0.08), rgb(from #{$datagrid-base-color} r g b / 0.08));
   }
 
   50% {
-    background-color: color.change($datagrid-base-color, $alpha: 0.08);
+    background-color: if(meta.type-of($datagrid-base-color) == color, color.change($datagrid-base-color, $alpha: 0.08), rgb(from #{$datagrid-base-color} r g b / 0.08));
   }
 }
 
@@ -330,7 +361,7 @@ $datagrid-text-stub-background-image-path: null !default;
     left: 0;
     bottom: 0;
     right: 0;
-    outline: 2px solid;
+    outline: $datagrid-header-filter-outline;
     outline-color: $datagrid-focused-border-color;
     outline-offset: -1px;
     z-index: 4; // should overlap sticky column cells
@@ -340,6 +371,6 @@ $datagrid-text-stub-background-image-path: null !default;
 }
 
 .dx-command-ai-header-button .dx-button.dx-state-focused {
-  outline: 2px solid;
+  outline: $datagrid-header-filter-outline;
   outline-color: $datagrid-focused-border-color;
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/dataGrid/layout/cell.scss b/packages/devextreme-scss/scss/widgets/base/dataGrid/layout/cell.scss
index 57f86e0ab6d8..b559941f515e 100644
--- a/packages/devextreme-scss/scss/widgets/base/dataGrid/layout/cell.scss
+++ b/packages/devextreme-scss/scss/widgets/base/dataGrid/layout/cell.scss
@@ -5,6 +5,9 @@ $datagrid-border-color: null !default;
 $datagrid-base-background-color: null !default;
 $datagrid-row-error-color: null !default;
 $datagrid-focused-border-color: null !default;
+$datagrid-group-row-border: null !default;
+$datagrid-sticky-column-border: null !default;
+$datagrid-cell-focus-outline: null !default;
 
 // #region position & z-index
 
@@ -34,8 +37,8 @@ $datagrid-focused-border-color: null !default;
 
 // (0,3,1)
 .dx-datagrid-rowsview .dx-row.dx-group-row td {
-  border-top: 1px solid;
-  border-bottom: 1px solid;
+  border-top: $datagrid-group-row-border;
+  border-bottom: $datagrid-group-row-border;
 }
 
 // (0,3,1)
@@ -50,9 +53,9 @@ $datagrid-focused-border-color: null !default;
 .dx-datagrid .dx-datagrid-rowsview .dx-virtual-row td.dx-pointer-events-none,
 .dx-datagrid .dx-datagrid-rowsview .dx-header-row td.dx-pointer-events-none,
 .dx-datagrid .dx-datagrid-headers .dx-row td.dx-pointer-events-none {
-  border-left: 2px solid;
+  border-left: $datagrid-sticky-column-border;
   border-left-color: $datagrid-border-color;
-  border-right: 2px solid;
+  border-right: $datagrid-sticky-column-border;
   border-right-color: $datagrid-border-color;
 }
 
@@ -87,13 +90,13 @@ $datagrid-focused-border-color: null !default;
 
 // (0,5,1)
 .dx-datagrid .dx-datagrid-sticky-columns .dx-datagrid-table .dx-row td.dx-datagrid-sticky-column-border-right {
-  border-right: 2px solid;
+  border-right: $datagrid-sticky-column-border;
   border-right-color: $datagrid-border-color;
 }
 
 // (0,5,1)
 .dx-datagrid .dx-datagrid-sticky-columns .dx-datagrid-table .dx-row td.dx-datagrid-sticky-column-border-left {
-  border-left: 2px solid;
+  border-left: $datagrid-sticky-column-border;
   border-left-color: $datagrid-border-color;
 }
 
@@ -109,7 +112,7 @@ $datagrid-focused-border-color: null !default;
 
 // (0,7,1)
 .dx-widget:not(.dx-rtl) > .dx-gridbase-container .dx-datagrid-table .dx-row > td.dx-datagrid-first-cell.dx-datagrid-sticky-column-border-left {
-  border-left: 2px solid;
+  border-left: $datagrid-sticky-column-border;
   border-left-color: $datagrid-border-color;
 }
 
@@ -138,9 +141,9 @@ $datagrid-focused-border-color: null !default;
 .dx-rtl .dx-datagrid .dx-datagrid-rowsview .dx-virtual-row td.dx-pointer-events-none,
 .dx-rtl .dx-datagrid .dx-datagrid-rowsview .dx-header-row td.dx-pointer-events-none,
 .dx-rtl .dx-datagrid .dx-datagrid-headers .dx-row td.dx-pointer-events-none {
-  border-left: 2px solid;
+  border-left: $datagrid-sticky-column-border;
   border-left-color: $datagrid-border-color;
-  border-right: 2px solid;
+  border-right: $datagrid-sticky-column-border;
   border-right-color: $datagrid-border-color;
 }
 
@@ -189,13 +192,13 @@ $datagrid-focused-border-color: null !default;
 
 // (0,6,1)
 .dx-rtl .dx-datagrid .dx-datagrid-sticky-columns .dx-datagrid-table .dx-row td.dx-datagrid-sticky-column-border-right {
-  border-right: 2px solid;
+  border-right: $datagrid-sticky-column-border;
   border-right-color: $datagrid-border-color;
 }
 
 // (0,6,1)
 .dx-rtl .dx-datagrid .dx-datagrid-sticky-columns .dx-datagrid-table .dx-row td.dx-datagrid-sticky-column-border-left {
-  border-left: 2px solid;
+  border-left: $datagrid-sticky-column-border;
   border-left-color: $datagrid-border-color;
 }
 
@@ -211,13 +214,13 @@ $datagrid-focused-border-color: null !default;
 
 // (0,7,1)
 .dx-rtl > .dx-gridbase-container .dx-datagrid-content .dx-datagrid-table .dx-row > td.dx-datagrid-first-cell.dx-datagrid-sticky-column-border-left {
-  border-left: 2px solid;
+  border-left: $datagrid-sticky-column-border;
   border-left-color: $datagrid-border-color;
 }
 
 // (0,8,0)
 .dx-rtl .dx-datagrid .dx-datagrid-sticky-columns .dx-datagrid-content .dx-datagrid-table .dx-row .dx-datagrid-column-no-border.dx-datagrid-sticky-column-border-left {
-  border-left: 2px solid;
+  border-left: $datagrid-sticky-column-border;
   border-left-color: $datagrid-border-color;
 }
 
@@ -275,7 +278,7 @@ $datagrid-focused-border-color: null !default;
 
 // (0,5,1)
 .dx-datagrid .dx-datagrid-headers.dx-state-focused .dx-header-row td:focus {
-  outline: 2px solid;
+  outline: $datagrid-cell-focus-outline;
   outline-color: $datagrid-focused-border-color;
   outline-offset: -2px;
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/diagram/_index.scss b/packages/devextreme-scss/scss/widgets/base/diagram/_index.scss
index d31642bd6ae2..f7b25ec142f4 100644
--- a/packages/devextreme-scss/scss/widgets/base/diagram/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/diagram/_index.scss
@@ -3,17 +3,33 @@
 // adduse
 
 
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$diagram-root-height: 600px !default;
+$diagram-root-min-height: 350px !default;
+$diagram-toolbar-wrapper-padding: 5px !default;
+$diagram-button-min-height: 14px !default;
+$diagram-popup-content-padding: 8px !default;
+$diagram-colorview-palette-min-width: 300px !default;
+$diagram-colorview-hue-scale-cell-margin-left: 12px !default;
+$diagram-loading-indicator-width: 64px !default;
+$diagram-loading-indicator-height: 64px !default;
+$diagram-context-toolbox-target-width: 1px !default;
+$diagram-context-toolbox-target-height: 1px !default;
+
+$diagram-popup-title-toolbar-bg: rgba(0, 0, 0, 0.05) !default;
+
 $transparent-border: 1px solid transparent;
 
+$diagram-toolbox-input-font-size: 0.9em !default; // dx-relative
 .dx-diagram {
   border: $transparent-border;
   display: flex;
   flex-flow: column;
-  height: 600px;
-  min-height: 350px;
+  height: $diagram-root-height;
+  min-height: $diagram-root-min-height;
 
   .dx-diagram-toolbar-wrapper {
-    padding: 5px;
+    padding: $diagram-toolbar-wrapper-padding;
     flex-grow: 0;
 
     .dx-diagram-toolbar {
@@ -61,7 +77,7 @@ $transparent-border: 1px solid transparent;
 
   .dx-popup-title.dx-toolbar {
     padding: 0;
-    background-color: rgba(0, 0, 0, 0.05);
+    background-color: $diagram-popup-title-toolbar-bg;
   }
 
   .dx-popup-title .dx-button.dx-button-has-icon:not(.dx-button-has-text),
@@ -88,13 +104,13 @@ $transparent-border: 1px solid transparent;
     .dx-diagram-toolbox-input input,
     .dx-diagram-toolbox-input .dx-placeholder::before {
       min-height: 0;
-      font-size: 0.9em;
+      font-size: $diagram-toolbox-input-font-size;
     }
 
     .dx-diagram-toolbox-input .dx-button {
       border: 0;
       border-radius: 0;
-      min-height: 14px;
+      min-height: $diagram-button-min-height;
     }
 
     .dx-diagram-toolbox-panel {
@@ -269,7 +285,7 @@ $transparent-border: 1px solid transparent;
       bottom: 0 !important; // stylelint-disable-line declaration-no-important
 
       .dx-popup-content {
-        padding: 8px;
+        padding: $diagram-popup-content-padding;
       }
 
       .dx-colorview-container {
@@ -283,16 +299,16 @@ $transparent-border: 1px solid transparent;
 
             .dx-colorview-palette {
               width: 100%;
-              min-width: 300px;
+              min-width: $diagram-colorview-palette-min-width;
             }
           }
 
           .dx-colorview-hue-scale-cell {
-            margin-left: 12px;
+            margin-left: $diagram-colorview-hue-scale-cell-margin-left;
           }
 
           .dx-colorview-controls-container {
-            margin-left: 12px;
+            margin-left: $diagram-colorview-hue-scale-cell-margin-left;
           }
         }
       }
@@ -310,8 +326,8 @@ $transparent-border: 1px solid transparent;
   position: absolute;
   top: calc(50% - 32px);
   left: calc(50% - 32px);
-  width: 64px;
-  height: 64px;
+  width: $diagram-loading-indicator-width;
+  height: $diagram-loading-indicator-height;
 }
 
 .dx-diagram-touchbar-overlay,
@@ -354,10 +370,10 @@ $transparent-border: 1px solid transparent;
 }
 
 .dx-diagram-context-toolbox-target {
-  width: 1px;
-  height: 1px;
+  width: $diagram-context-toolbox-target-width;
+  height: $diagram-context-toolbox-target-height;
 }
 
 .dx-diagram-context-toolbox .dx-popup-content {
-  padding: 8px;
+  padding: $diagram-popup-content-padding;
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/diagram/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/diagram/_mixins.scss
index a82ac276d054..7b9ba657b929 100644
--- a/packages/devextreme-scss/scss/widgets/base/diagram/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/base/diagram/_mixins.scss
@@ -1,3 +1,4 @@
+@use "sass:meta";
 @use "sass:string";
 @use "../string" as *;
 
@@ -10,68 +11,70 @@
 }
 
 @mixin diagram-action-icons-mixin($toolbar-color, $menu-color, $icon-size, $toolbar-colorbutton-border-width) {
+  $diagram-wide-icon-size: if(meta.type-of($icon-size) == number, 1.56 * $icon-size, calc(1.56 * #{$icon-size}));
+
   .dx-diagram-i-selectbox-null-icon {
-    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/selectbox-null-icon.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size);
+    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/selectbox-null-icon.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size);
   }
 
   .dx-diagram-i-connector-begin-none {
-    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-begin-none.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size);
+    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-begin-none.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size);
   }
 
   .dx-diagram-i-connector-begin-arrow {
-    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-begin-arrow.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size);
+    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-begin-arrow.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size);
   }
 
   .dx-diagram-i-connector-begin-outlined-triangle {
-    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-begin-outlined-triangle.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size);
+    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-begin-outlined-triangle.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size);
   }
 
   .dx-diagram-i-connector-begin-filled-triangle {
-    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-begin-filled-triangle.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size);
+    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-begin-filled-triangle.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size);
   }
 
   .dx-diagram-i-connector-end-none {
-    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-end-none.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size);
+    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-end-none.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size);
   }
 
   .dx-diagram-i-connector-end-arrow {
-    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-end-arrow.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size);
+    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-end-arrow.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size);
   }
 
   .dx-diagram-i-connector-end-outlined-triangle {
-    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-end-outlined-triangle.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size);
+    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-end-outlined-triangle.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size);
   }
 
   .dx-diagram-i-connector-end-filled-triangle {
-    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-end-filled-triangle.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size);
+    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-end-filled-triangle.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size);
   }
 
   .dx-diagram-i-connector-orthogonal {
-    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-orthogonal.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size);
+    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-orthogonal.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size);
   }
 
   .dx-diagram-i-connector-straight {
-    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-straight.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size);
+    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-straight.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size);
   }
 
   .dx-diagram-i-line-solid {
-    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/line-solid.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size);
+    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/line-solid.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size);
   }
 
   .dx-diagram-i-line-dotted {
-    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/line-dotted.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size);
+    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/line-dotted.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size);
   }
 
   .dx-diagram-i-line-dashed {
-    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/line-dashed.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size);
+    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/line-dashed.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size);
   }
 
   .dx-diagram-i-button-fill {
-    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/button-fill.svg'), $toolbar-color, $icon-size, $icon-size + $toolbar-colorbutton-border-width);
+    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/button-fill.svg'), $toolbar-color, $icon-size, if(meta.type-of($icon-size) == number and meta.type-of($toolbar-colorbutton-border-width) == number, $icon-size + $toolbar-colorbutton-border-width, calc(#{$icon-size} + #{$toolbar-colorbutton-border-width})));
   }
 
   .dx-diagram-i-menu-fill {
-    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/button-fill.svg'), $menu-color, $icon-size, $icon-size + $toolbar-colorbutton-border-width);
+    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/button-fill.svg'), $menu-color, $icon-size, if(meta.type-of($icon-size) == number and meta.type-of($toolbar-colorbutton-border-width) == number, $icon-size + $toolbar-colorbutton-border-width, calc(#{$icon-size} + #{$toolbar-colorbutton-border-width})));
   }
 
   .dx-diagram-i-button-fullscreen {
diff --git a/packages/devextreme-scss/scss/widgets/base/dropDownEditor/_index.scss b/packages/devextreme-scss/scss/widgets/base/dropDownEditor/_index.scss
index 9db3d9b59fd4..09065001a8a5 100644
--- a/packages/devextreme-scss/scss/widgets/base/dropDownEditor/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/dropDownEditor/_index.scss
@@ -5,6 +5,8 @@
 
 // adduse
 
+$dropdowneditor-icon-idle-opacity: 0.35 !default;
+
 .dx-dropdowneditor {
   position: relative;
 
@@ -61,7 +63,7 @@
 
 .dx-dropdowneditor-active {
   .dx-dropdowneditor-icon {
-    opacity: 0.35;
+    opacity: $dropdowneditor-icon-idle-opacity;
   }
 }
 
diff --git a/packages/devextreme-scss/scss/widgets/base/dropDownEditor/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/dropDownEditor/_mixins.scss
index 01dd983dd65c..1430b8eb4b7c 100644
--- a/packages/devextreme-scss/scss/widgets/base/dropDownEditor/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/base/dropDownEditor/_mixins.scss
@@ -1,3 +1,4 @@
+@use "sass:meta";
 @use "../icon_fonts" as *;
 
 @mixin invalid-dropdowneditor-input-padding(
@@ -8,7 +9,7 @@
   &.dx-dropdowneditor-button-visible {
     &.dx-editor-underlined {
       .dx-texteditor-input {
-        padding-inline-end: $invalid-badge-size + $texteditor-underlined-input-horizontal-padding;
+        padding-inline-end: if(meta.type-of($invalid-badge-size) == number and meta.type-of($texteditor-underlined-input-horizontal-padding) == number, $invalid-badge-size + $texteditor-underlined-input-horizontal-padding, calc(#{$invalid-badge-size} + #{$texteditor-underlined-input-horizontal-padding}));
       }
 
       .dx-start-datebox {
@@ -27,7 +28,7 @@
     &.dx-editor-filled,
     &.dx-editor-outlined {
       .dx-texteditor-input {
-        padding-inline-end: $invalid-badge-size + $texteditor-filled-input-horizontal-padding;
+        padding-inline-end: if(meta.type-of($invalid-badge-size) == number and meta.type-of($texteditor-filled-input-horizontal-padding) == number, $invalid-badge-size + $texteditor-filled-input-horizontal-padding, calc(#{$invalid-badge-size} + #{$texteditor-filled-input-horizontal-padding}));
       }
 
       .dx-start-datebox {
diff --git a/packages/devextreme-scss/scss/widgets/base/dropDownMenu/_index.scss b/packages/devextreme-scss/scss/widgets/base/dropDownMenu/_index.scss
index 3e409eae572d..66cb545c38b1 100644
--- a/packages/devextreme-scss/scss/widgets/base/dropDownMenu/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/dropDownMenu/_index.scss
@@ -1,10 +1,16 @@
 // adduse
 
+
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$dropdownmenu-list-min-width: 100px !default;
+$dropdownmenu-list-border-radius: 8px !default;
+$dropdownmenu-popup-content-padding: 1px !default;
+
 .dx-dropdownmenu-popup-wrapper {
   .dx-dropdownmenu-list {
     min-height: 0;
-    min-width: 100px;
-    border-radius: 8px;
+    min-width: $dropdownmenu-list-min-width;
+    border-radius: $dropdownmenu-list-border-radius;
 
     .dx-list-item {
       &:last-of-type {
@@ -14,7 +20,7 @@
   }
 
   .dx-popup-content {
-    padding: 1px;
+    padding: $dropdownmenu-popup-content-padding;
   }
 
   .dx-list-item{
diff --git a/packages/devextreme-scss/scss/widgets/base/fileManager/_index.scss b/packages/devextreme-scss/scss/widgets/base/fileManager/_index.scss
index da33dc456b96..491fb6940cc2 100644
--- a/packages/devextreme-scss/scss/widgets/base/fileManager/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/fileManager/_index.scss
@@ -3,9 +3,70 @@
 // adduse
 
 
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$filemanager-root-height: 500px !default;
+$filemanager-root-border: 1px solid !default;
+$filemanager-overlay-content-min-width: 240px !default;
+$filemanager-overlay-content-max-width: 400px !default;
+$filemanager-popup-content-padding: 15px !default;
+$filemanager-progress-box-padding: 5px 0 0 !default;
+$filemanager-notification-common-padding-bottom: 10px !default;
+$filemanager-notification-common-border-bottom-width: 1px !default;
+$filemanager-progress-panel-border-left-width: 1px !default;
+$filemanager-progress-panel-width: 340px !default;
+$filemanager-progress-panel-container-padding: 10px 20px 20px 20px !default;
+$filemanager-progress-panel-title-padding: 0 0 5px 10px !default;
+$filemanager-progress-panel-separator-height: 20px !default;
+$filemanager-i-cancel-width: 16px !default;
+$filemanager-i-cancel-height: 16px !default;
+$filemanager-progress-box-margin-bottom: 8px !default;
+$filemanager-progress-box-border-radius: 2px !default;
+$filemanager-progress-box-padding-2: 10px 0 10px 10px !default;
+$filemanager-progress-box-without-close-button-padding-right: 10px !default;
+$filemanager-progress-box-image-margin-right: 10px !default;
+$filemanager-progress-box-common-padding: 5px 0 !default;
+$filemanager-progress-box-close-button-margin-top: 9px !default;
+$filemanager-progress-box-close-button-margin-left: 5px !default;
+$filemanager-progress-box-error-padding: 2px 8px 3px !default;
+$filemanager-progress-box-error-max-height: 150px !default;
+$filemanager-toolbar-separator-item-width: 1px !default;
+$filemanager-toolbar-separator-item-margin-right: 5px !default;
+$filemanager-container-border-top: 1px solid !default;
+$filemanager-dirs-panel-padding: 5px 10px !default;
+$filemanager-drawer-panel-content-initial-min-width: 250px !default;
+$filemanager-drawer-panel-content-initial-max-width: 300px !default;
+$filemanager-breadcrumbs-padding: 2px 11px !default;
+$filemanager-breadcrumbs-border-bottom: 1px solid !default;
+$filemanager-menu-item-content-padding-left: 2px !default;
+$filemanager-menu-item-content-padding-right: 2px !default;
+$filemanager-menu-item-content-margin: 0 10px !default;
+$filemanager-menu-item-content-padding-left-2: 1px !default;
+$filemanager-menu-item-content-padding-right-2: 1px !default;
+$filemanager-thumbnails-view-port-padding: 5px !default;
+$filemanager-thumbnails-item-width: 100px !default;
+$filemanager-thumbnails-item-height: 100px !default;
+$filemanager-thumbnails-item-border: 1px dashed transparent !default;
+$filemanager-thumbnails-item-margin: 5px !default;
+$filemanager-thumbnails-item-content-padding: 13px 0 10px !default;
+$filemanager-thumbnails-item-spacer-height: 10px !default;
+$filemanager-button-content-padding: 10px 11px !default;
+$filemanager-overlay-content-min-width-2: 300px !default;
+$filemanager-overlay-content-min-height: 300px !default;
+$filemanager-overlay-content-max-height: 400px !default;
+$filemanager-overlay-content-max-width-2: 340px !default;
+$filemanager-overlay-content-min-height-2: 180px !default;
+$filemanager-overlay-content-max-height-2: 180px !default;
+$filemanager-progressbox-cancel-button-margin-top: 5px !default;
+
+$filemanager-progress-title-font-size: 18px !default;
+$filemanager-progress-title-font-weight: 600 !default;
+$filemanager-progress-bold-font-weight: 600 !default;
+
+$filemanager-error-message-font-size: 0.85em !default; // dx-relative
+$filemanager-drawer-panel-content-width: 30% !default; // dx-relative-%
 .dx-filemanager {
-  height: 500px;
-  border: 1px solid;
+  height: $filemanager-root-height;
+  border: $filemanager-root-border;
 
   .dx-filemanager-wrapper {
     height: 100%;
@@ -20,25 +81,25 @@
 
   .dx-filemanager-notification-popup {
     & .dx-overlay-content {
-      min-width: 240px;
+      min-width: $filemanager-overlay-content-min-width;
       max-width: 93vw;
 
       @media (min-width: 431px) {
-        max-width: 400px;
+        max-width: $filemanager-overlay-content-max-width;
       }
     }
 
     .dx-popup-content {
-      padding: 15px;
+      padding: $filemanager-popup-content-padding;
 
       .dx-filemanager-progress-box {
-        padding: 5px 0 0;
+        padding: $filemanager-progress-box-padding;
       }
     }
 
     .dx-filemanager-notification-common {
-      padding-bottom: 10px;
-      border-bottom-width: 1px;
+      padding-bottom: $filemanager-notification-common-padding-bottom;
+      border-bottom-width: $filemanager-notification-common-border-bottom-width;
       border-bottom-style: solid;
     }
 
@@ -48,61 +109,61 @@
   }
 
   .dx-drawer-shrink .dx-filemanager-progress-panel {
-    border-left-width: 1px;
+    border-left-width: $filemanager-progress-panel-border-left-width;
     border-left-style: solid;
   }
 
   .dx-filemanager-progress-panel {
-    width: 340px;
+    width: $filemanager-progress-panel-width;
     height: 100%;
 
     .dx-filemanager-progress-panel-container {
-      padding: 10px 20px 20px 20px;
+      padding: $filemanager-progress-panel-container-padding;
     }
 
     .dx-filemanager-progress-panel-title {
       display: flex;
       align-items: flex-start;
-      padding: 0 0 5px 10px;
+      padding: $filemanager-progress-panel-title-padding;
 
       .dx-filemanager-progress-panel-title-text {
         flex: 1 1 auto;
         align-self: center;
-        font-size: 18px;
-        font-weight: 600;
+        font-size: $filemanager-progress-title-font-size;
+        font-weight: $filemanager-progress-title-font-weight;
       }
     }
 
     .dx-filemanager-progress-panel-common .dx-filemanager-progress-box-common {
-      font-weight: 600;
+      font-weight: $filemanager-progress-bold-font-weight;
     }
 
     .dx-filemanager-progress-panel-separator {
-      height: 20px;
+      height: $filemanager-progress-panel-separator-height;
     }
 
     .dx-filemanager-i.dx-filemanager-i-cancel {
-      width: 16px;
-      height: 16px;
+      width: $filemanager-i-cancel-width;
+      height: $filemanager-i-cancel-height;
     }
 
     .dx-filemanager-progress-panel-details > .dx-filemanager-progress-box {
-      margin-bottom: 8px;
-      border-radius: 2px;
+      margin-bottom: $filemanager-progress-box-margin-bottom;
+      border-radius: $filemanager-progress-box-border-radius;
     }
   }
 
   .dx-filemanager-progress-box {
-    padding: 10px 0 10px 10px;
+    padding: $filemanager-progress-box-padding-2;
     display: flex;
     align-items: center;
 
     &.dx-filemanager-progress-box-without-close-button {
-      padding-right: 10px;
+      padding-right: $filemanager-progress-box-without-close-button-padding-right;
     }
 
     .dx-filemanager-progress-box-image {
-      margin-right: 10px;
+      margin-right: $filemanager-progress-box-image-margin-right;
     }
 
     .dx-filemanager-progress-box-wrapper {
@@ -111,42 +172,42 @@
     }
 
     .dx-filemanager-progress-box-common {
-      padding: 5px 0;
+      padding: $filemanager-progress-box-common-padding;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
 
     .dx-filemanager-progress-box-progress-bar {
-      padding: 5px 0;
+      padding: $filemanager-progress-box-common-padding;
     }
 
     .dx-filemanager-progress-box-status {
-      padding: 5px 0;
+      padding: $filemanager-progress-box-common-padding;
     }
 
     .dx-filemanager-progress-box-close-button {
-      margin-top: 9px;
-      margin-left: 5px;
+      margin-top: $filemanager-progress-box-close-button-margin-top;
+      margin-left: $filemanager-progress-box-close-button-margin-left;
     }
   }
 
   .dx-filemanager-progress-box-error {
-    border-radius: 2px;
+    border-radius: $filemanager-progress-box-border-radius;
     display: inline-block;
     border-width: 0;
-    padding: 2px 8px 3px;
-    font-size: 0.85em;
+    padding: $filemanager-progress-box-error-padding;
+    font-size: $filemanager-error-message-font-size;
     line-height: normal;
     word-wrap: break-word;
     overflow-y: auto;
-    max-height: 150px;
+    max-height: $filemanager-progress-box-error-max-height;
   }
 
   .dx-filemanager-toolbar {
     .dx-filemanager-toolbar-separator-item {
-      width: 1px;
-      margin-right: 5px;
+      width: $filemanager-toolbar-separator-item-width;
+      margin-right: $filemanager-toolbar-separator-item-margin-right;
     }
   }
 
@@ -158,7 +219,7 @@
   .dx-filemanager-container {
     display: flex;
     height: 100%;
-    border-top: 1px solid;
+    border-top: $filemanager-container-border-top;
     box-sizing: border-box;
     overflow: hidden;
 
@@ -167,7 +228,7 @@
     }
 
     .dx-filemanager-dirs-panel {
-      padding: 5px 10px;
+      padding: $filemanager-dirs-panel-padding;
       height: 100%;
       width: 100%;
       display: block;
@@ -175,7 +236,7 @@
 
     .dx-drawer-opened {
       .dx-splitter-bar.dx-state-disabled {
-        width: 1px;
+        width: $filemanager-toolbar-separator-item-width;
       }
     }
 
@@ -185,11 +246,11 @@
 
     .dx-drawer-panel-content {
       display: block;
-      width: 30%;
+      width: $filemanager-drawer-panel-content-width;
 
       &.dx-drawer-panel-content-initial {
-        min-width: 250px;
-        max-width: 300px;
+        min-width: $filemanager-drawer-panel-content-initial-min-width;
+        max-width: $filemanager-drawer-panel-content-initial-max-width;
       }
 
       &.dx-drawer-panel-content-adaptive {
@@ -203,8 +264,8 @@
   }
 
   .dx-filemanager-breadcrumbs {
-    padding: 2px 11px;
-    border-bottom: 1px solid;
+    padding: $filemanager-breadcrumbs-padding;
+    border-bottom: $filemanager-breadcrumbs-border-bottom;
 
     .dx-menu-item-content {
       padding-left: 0;
@@ -212,20 +273,20 @@
     }
 
     .dx-filemanager-breadcrumbs-parent-folder-item .dx-menu-item-content {
-      padding-left: 2px;
-      padding-right: 2px;
+      padding-left: $filemanager-menu-item-content-padding-left;
+      padding-right: $filemanager-menu-item-content-padding-right;
     }
 
     .dx-filemanager-breadcrumbs-separator-item .dx-menu-item-content {
-      width: 1px;
+      width: $filemanager-toolbar-separator-item-width;
       padding-left: 0;
       padding-right: 0;
-      margin: 0 10px;
+      margin: $filemanager-menu-item-content-margin;
     }
 
     .dx-filemanager-breadcrumbs-path-separator-item .dx-menu-item-content {
-      padding-left: 1px;
-      padding-right: 1px;
+      padding-left: $filemanager-menu-item-content-padding-left-2;
+      padding-right: $filemanager-menu-item-content-padding-right-2;
     }
 
     .dx-filemanager-breadcrumbs-separator-item,
@@ -291,7 +352,7 @@
       overflow-x: hidden;
       overflow-y: auto;
       box-sizing: border-box;
-      padding: 5px;
+      padding: $filemanager-thumbnails-view-port-padding;
 
       .dx-filemanager-thumbnails-container {
         user-select: none;
@@ -302,15 +363,15 @@
         text-align: center;
         cursor: pointer;
         white-space: nowrap;
-        width: 100px;
-        height: 100px;
-        border: 1px dashed transparent;
-        margin: 5px;
+        width: $filemanager-thumbnails-item-width;
+        height: $filemanager-thumbnails-item-height;
+        border: $filemanager-thumbnails-item-border;
+        margin: $filemanager-thumbnails-item-margin;
         box-sizing: border-box;
 
         .dx-filemanager-thumbnails-item-content {
           overflow: hidden;
-          padding: 13px 0 10px;
+          padding: $filemanager-thumbnails-item-content-padding;
 
           .dx-filemanager-thumbnails-item-thumbnail {
             border: 0;
@@ -320,7 +381,7 @@
             border: 0;
             padding: 0;
             margin: 0;
-            height: 10px;
+            height: $filemanager-thumbnails-item-spacer-height;
             visibility: hidden;
           }
 
@@ -394,7 +455,7 @@
     box-shadow: none;
 
     .dx-button-content {
-      padding: 10px 11px;
+      padding: $filemanager-button-content-padding;
     }
 
     i {
@@ -444,21 +505,21 @@
 }
 
 .dx-filemanager-dialog-popup > .dx-overlay-content {
-  min-width: 300px;
-  max-width: 400px;
-  min-height: 300px;
-  max-height: 400px;
+  min-width: $filemanager-overlay-content-min-width-2;
+  max-width: $filemanager-overlay-content-max-width;
+  min-height: $filemanager-overlay-content-min-height;
+  max-height: $filemanager-overlay-content-max-height;
 }
 
 .dx-filemanager-dialog-name-editor-popup > .dx-overlay-content {
-  max-width: 340px;
-  min-height: 180px;
-  max-height: 180px;
+  max-width: $filemanager-overlay-content-max-width-2;
+  min-height: $filemanager-overlay-content-min-height-2;
+  max-height: $filemanager-overlay-content-max-height-2;
 }
 
 .dx-filemanager-dialog-delete-item-popup > .dx-overlay-content {
-  max-width: 340px;
-  min-height: 180px;
+  max-width: $filemanager-overlay-content-max-width-2;
+  min-height: $filemanager-overlay-content-min-height-2;
 
   .dx-popup-content .dx-filemanager-dialog-delete-item {
     overflow-wrap: break-word;
@@ -467,16 +528,16 @@
 
 .dx-filemanager-progresspanel {
   box-sizing: border-box;
-  padding: 5px;
+  padding: $filemanager-thumbnails-view-port-padding;
 
   .dx-filemanager-progressbox {
     float: left;
     width: 100%;
-    padding-bottom: 10px;
+    padding-bottom: $filemanager-notification-common-padding-bottom;
   }
 
   .dx-filemanager-progressbox-cancel-button {
-    margin-top: 5px;
+    margin-top: $filemanager-progressbox-cancel-button-margin-top;
     float: right;
   }
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/filterBuilder/_common.scss b/packages/devextreme-scss/scss/widgets/base/filterBuilder/_common.scss
index 9b75f0c399aa..5c5d228908c6 100644
--- a/packages/devextreme-scss/scss/widgets/base/filterBuilder/_common.scss
+++ b/packages/devextreme-scss/scss/widgets/base/filterBuilder/_common.scss
@@ -1,3 +1,18 @@
+$filterbuilder-range-separator-opacity: null !default;
+$filterbuilder-action-icon-margin-left: null !default;
+$filterbuilder-action-icon-margin-right: null !default;
+$filterbuilder-group-content-padding-right: null !default;
+$filterbuilder-range-separator-margin: null !default;
+$filterbuilder-item-value-text-min-width: null !default;
+$filterbuilder-item-value-text-padding: null !default;
+$filterbuilder-action-icon-padding: null !default;
+$filterbuilder-group-content-padding-left: null !default;
+$filterbuilder-treeview-item-padding-left: null !default;
+$filterbuilder-treeview-item-padding-right: null !default;
+$filterbuilder-treeview-node-margin-left: null !default;
+$filterbuilder-treeview-node-margin-right: null !default;
+$filterbuilder-scrollable-max-height: null !default;
+
 // adduse
 
 
@@ -5,14 +20,14 @@
   &.dx-rtl {
     .dx-filterbuilder-text,
     .dx-filterbuilder-action-icon {
-      margin-left: 5px;
+      margin-left: $filterbuilder-action-icon-margin-left;
       margin-right: 0;
     }
 
     .dx-filterbuilder-group {
       .dx-filterbuilder-group-content .dx-filterbuilder-group-content {
         padding-left: 0;
-        padding-right: 26px;
+        padding-right: $filterbuilder-group-content-padding-right;
       }
     }
   }
@@ -20,7 +35,7 @@
   .dx-filterbuilder-text,
   .dx-filterbuilder-action-icon {
     margin-left: 0;
-    margin-right: 5px;
+    margin-right: $filterbuilder-action-icon-margin-right;
   }
 
   .dx-filterbuilder-text,
@@ -47,16 +62,16 @@
 
         .dx-filterbuilder-text-separator,
         .dx-filterbuilder-range-separator {
-          margin: 0 7px;
-          opacity: 0.3;
+          margin: $filterbuilder-range-separator-margin;
+          opacity: $filterbuilder-range-separator-opacity;
         }
 
         &.dx-filterbuilder-group-operation,
         &.dx-filterbuilder-item-field,
         &.dx-filterbuilder-item-operation,
         .dx-filterbuilder-item-value-text {
-          min-width: 20px;
-          padding: 2px 7px 3px 7px;
+          min-width: $filterbuilder-item-value-text-min-width;
+          padding: $filterbuilder-item-value-text-padding;
         }
 
         .dx-texteditor {
@@ -73,13 +88,13 @@
         position: relative;
 
         &.dx-filterbuilder-action-icon {
-          padding: 5px 8px;
+          padding: $filterbuilder-action-icon-padding;
         }
       }
     }
 
     .dx-filterbuilder-group-content .dx-filterbuilder-group-content {
-      padding-left: 26px;
+      padding-left: $filterbuilder-group-content-padding-left;
     }
   }
 
@@ -94,12 +109,12 @@
 
 .dx-filterbuilder-operations {
   .dx-treeview-item {
-    padding-left: 5px;
+    padding-left: $filterbuilder-treeview-item-padding-left;
   }
 
   .dx-rtl {
     .dx-treeview-item {
-      padding-right: 5px;
+      padding-right: $filterbuilder-treeview-item-padding-right;
     }
   }
 }
@@ -112,7 +127,7 @@
       padding-left: 0;
 
       .dx-treeview-node-container-opened {
-        margin-left: 15px;
+        margin-left: $filterbuilder-treeview-node-margin-left;
       }
     }
 
@@ -121,7 +136,7 @@
         padding-right: 0;
 
         .dx-treeview-node-container-opened {
-          margin-right: 15px;
+          margin-right: $filterbuilder-treeview-node-margin-right;
         }
       }
     }
@@ -136,7 +151,7 @@
   }
 
   .dx-scrollable-container {
-    max-height: 360px;
+    max-height: $filterbuilder-scrollable-max-height;
   }
 
   .dx-menu-items-container {
diff --git a/packages/devextreme-scss/scss/widgets/base/filterBuilder/_index.scss b/packages/devextreme-scss/scss/widgets/base/filterBuilder/_index.scss
index 5ad7c17718aa..49e83c6dc4c7 100644
--- a/packages/devextreme-scss/scss/widgets/base/filterBuilder/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/filterBuilder/_index.scss
@@ -22,7 +22,38 @@ $filterbuilder-remove-icon-focus-color: null !default;
 $filterbuilder-menu-icon-color: null !default;
 
 @use "../icon_fonts" as *;
-@use "./common";
+$filterbuilder-range-separator-opacity: 0.3 !default;
+
+$filterbuilder-action-icon-margin-left: 5px !default;
+$filterbuilder-action-icon-margin-right: 5px !default;
+$filterbuilder-group-content-padding-right: 26px !default;
+$filterbuilder-range-separator-margin: 0 7px !default;
+$filterbuilder-item-value-text-min-width: 20px !default;
+$filterbuilder-item-value-text-padding: 2px 7px 3px 7px !default;
+$filterbuilder-action-icon-padding: 5px 8px !default;
+$filterbuilder-group-content-padding-left: 26px !default;
+$filterbuilder-treeview-item-padding-left: 5px !default;
+$filterbuilder-treeview-item-padding-right: 5px !default;
+$filterbuilder-treeview-node-margin-left: 15px !default;
+$filterbuilder-treeview-node-margin-right: 15px !default;
+$filterbuilder-scrollable-max-height: 360px !default;
+
+@use "./common" with (
+  $filterbuilder-range-separator-opacity: $filterbuilder-range-separator-opacity,
+  $filterbuilder-action-icon-margin-left: $filterbuilder-action-icon-margin-left,
+  $filterbuilder-action-icon-margin-right: $filterbuilder-action-icon-margin-right,
+  $filterbuilder-group-content-padding-right: $filterbuilder-group-content-padding-right,
+  $filterbuilder-range-separator-margin: $filterbuilder-range-separator-margin,
+  $filterbuilder-item-value-text-min-width: $filterbuilder-item-value-text-min-width,
+  $filterbuilder-item-value-text-padding: $filterbuilder-item-value-text-padding,
+  $filterbuilder-action-icon-padding: $filterbuilder-action-icon-padding,
+  $filterbuilder-group-content-padding-left: $filterbuilder-group-content-padding-left,
+  $filterbuilder-treeview-item-padding-left: $filterbuilder-treeview-item-padding-left,
+  $filterbuilder-treeview-item-padding-right: $filterbuilder-treeview-item-padding-right,
+  $filterbuilder-treeview-node-margin-left: $filterbuilder-treeview-node-margin-left,
+  $filterbuilder-treeview-node-margin-right: $filterbuilder-treeview-node-margin-right,
+  $filterbuilder-scrollable-max-height: $filterbuilder-scrollable-max-height,
+);
 
 .dx-filterbuilder {
   background-color: $filterbuilder-bg;
diff --git a/packages/devextreme-scss/scss/widgets/base/gantt/_index.scss b/packages/devextreme-scss/scss/widgets/base/gantt/_index.scss
index d327cc9e23e4..a221b91ba7ad 100644
--- a/packages/devextreme-scss/scss/widgets/base/gantt/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/gantt/_index.scss
@@ -1,6 +1,11 @@
 // adduse
 
 
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$gantt-toolbar-separator-border-left: 1px solid transparent !default;
+$gantt-splitter-bar-width: 2px !default;
+$gantt-view-min-width: 1px !default;
+
 .dx-gantt {
   display: flex;
   flex-direction: column;
@@ -22,7 +27,7 @@
   .dx-gantt-toolbar-separator {
     display: table;
     height: 100%;
-    border-left: 1px solid transparent;
+    border-left: $gantt-toolbar-separator-border-left;
   }
 
   .dx-gantt-si {
@@ -45,14 +50,14 @@
   }
 
   .dx-splitter-wrapper .dx-splitter-border .dx-splitter-bar {
-    width: 2px;
+    width: $gantt-splitter-bar-width;
   }
 
   .dx-gantt-view {
     -webkit-user-select: none; // stylelint-disable-line property-no-vendor-prefix
     user-select: none;
     width: 100%;
-    min-width: 1px;
+    min-width: $gantt-view-min-width;
 
     .dx-gantt-tac-hb {
       margin-top: -1px;
diff --git a/packages/devextreme-scss/scss/widgets/base/list/_index.scss b/packages/devextreme-scss/scss/widgets/base/list/_index.scss
index 883acb9f31ed..16fd36e03610 100644
--- a/packages/devextreme-scss/scss/widgets/base/list/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/list/_index.scss
@@ -4,11 +4,22 @@
 // adduse
 
 
+$list-response-wait-opacity: 0.5 !default;
+
 $list-searchbox-margin-bottom: 5px;
 
+
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$list-item-badge-container-width: 20px !default;
+$list-slide-menu-button-padding: 0 10px !default;
+$list-static-delete-button-padding: 0 5px !default;
+$list-next-button-padding: 5px !default;
+
+$list-min-height: 3em !default; // dx-relative
+$list-empty-message-button-padding: 0 3em !default; // dx-relative
 .dx-list {
   margin: 0;
-  min-height: 3em;
+  min-height: $list-min-height;
 
   .dx-scrollview-content:focus {
     outline: 0;
@@ -65,12 +76,12 @@ $list-searchbox-margin-bottom: 5px;
   @include dx-overflow();
 
   text-align: start;
-  min-height: 3em;
+  min-height: $list-min-height;
 }
 
 .dx-list-item-badge-container {
   display: table-cell;
-  width: 20px;
+  width: $list-item-badge-container-width;
   text-align: right;
   vertical-align: middle;
 }
@@ -95,7 +106,7 @@ $list-searchbox-margin-bottom: 5px;
 
 
 .dx-list-item-response-wait {
-  opacity: 0.5;
+  opacity: $list-response-wait-opacity;
   transition: opacity 0.2s linear;
 }
 
@@ -231,12 +242,12 @@ $list-searchbox-margin-bottom: 5px;
 
 .dx-list-slide-menu-button {
   display: table-cell;
-  padding: 0 10px;
+  padding: $list-slide-menu-button-padding;
   vertical-align: middle;
 }
 
 .dx-list-static-delete-button {
-  padding: 0 5px;
+  padding: $list-static-delete-button-padding;
 
   .dx-button-content {
     overflow: visible;
@@ -244,11 +255,11 @@ $list-searchbox-margin-bottom: 5px;
 }
 
 .dx-list-next-button {
-  padding: 5px;
+  padding: $list-next-button-padding;
   text-align: center;
 
   .dx-button {
-    padding: 0 3em;
+    padding: $list-empty-message-button-padding;
   }
 }
 
diff --git a/packages/devextreme-scss/scss/widgets/base/lookup/_index.scss b/packages/devextreme-scss/scss/widgets/base/lookup/_index.scss
index 559378e67991..a6878eea9579 100644
--- a/packages/devextreme-scss/scss/widgets/base/lookup/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/lookup/_index.scss
@@ -3,6 +3,7 @@
 
 // adduse
 
+$lookup-popup-search-list-height: 90% !default; // dx-relative-%
 .dx-lookup {
   margin: 0;
 
@@ -79,7 +80,7 @@
 
 .dx-lookup-popup-search {
   .dx-list {
-    height: 90%;
+    height: $lookup-popup-search-list-height;
   }
 }
 
diff --git a/packages/devextreme-scss/scss/widgets/base/pivotGrid/_common.scss b/packages/devextreme-scss/scss/widgets/base/pivotGrid/_common.scss
index 87826aab0aca..b210711e7bf6 100644
--- a/packages/devextreme-scss/scss/widgets/base/pivotGrid/_common.scss
+++ b/packages/devextreme-scss/scss/widgets/base/pivotGrid/_common.scss
@@ -1,6 +1,9 @@
 // adduse
 
 
+$pivotgrid-common-field-chooser-drag-width: null !default;
+$pivotgrid-common-field-chooser-drag-height: null !default;
+
 .dx-pivotgrid-fields-container {
   .dx-sort,
   .dx-header-filter {
@@ -236,7 +239,7 @@
 .dx-pivotgrid-scrollbar-measure-element {
   position: absolute;
   top: -9999px;
-  width: 100px;
-  height: 100px;
+  width: $pivotgrid-common-field-chooser-drag-width;
+  height: $pivotgrid-common-field-chooser-drag-height;
   overflow: scroll;
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/pivotGrid/_index.scss b/packages/devextreme-scss/scss/widgets/base/pivotGrid/_index.scss
index 6545fc1eb490..39fd91abcee9 100644
--- a/packages/devextreme-scss/scss/widgets/base/pivotGrid/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/pivotGrid/_index.scss
@@ -1,3 +1,26 @@
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$pivotgrid-position-indicator-vertical-height: 2px !default;
+$pivotgrid-position-indicator-horizontal-width: 2px !default;
+$pivotgrid-position-indicator-last-margin-left: 3px !default;
+$pivotgrid-area-box-margin-bottom: 4px !default;
+$pivotgrid-expand-icon-container-outline: 2px solid !default;
+$pivotgrid-toolbar-margin-right: 10px !default;
+$pivotgrid-field-chooser-button-margin-right: 4px !default;
+$pivotgrid-button-margin: 1px !default;
+$pivotgrid-last-cell-min-width: 50px !default;
+$pivotgrid-icon-sorted-margin-left: 5px !default;
+$pivotgrid-fields-area-head-padding: 0 2px !default;
+$pivotgrid-treeview-search-margin: 5px !default;
+$pivotgrid-area-padding: 5px !default;
+$pivotgrid-area-fields-margin-top-2: 3px !default;
+$pivotgrid-position-indicator-last-margin-left-2: 1px !default;
+$pivotgrid-toolbar-margin-left: 10px !default;
+$pivotgrid-field-chooser-button-margin-left: 4px !default;
+$pivotgrid-fields-area-head-padding-left: 2px !default;
+$pivotgrid-icon-sorted-margin-right: 5px !default;
+$pivotgrid-header-cell-side-padding: 2px !default;
+$pivotgrid-fields-area-head-cell-side-padding: 2px !default;
+
 $pivotgrid-drag-header-border-color: null !default;
 $pivotgrid-drag-header-first-shadow-color: null !default;
 $pivotgrid-drag-header-second-shadow-color: null !default;
@@ -21,7 +44,14 @@ $pivotgrid-button-top-padding: null !default;
 
 @use "../mixins" as *;
 @use "../icon_fonts" as *;
-@use "./common";
+$pivotgrid-common-field-chooser-drag-width: 100px !default;
+$pivotgrid-common-field-chooser-drag-height: 100px !default;
+
+@use "./common" with (
+  $pivotgrid-common-field-chooser-drag-width: $pivotgrid-common-field-chooser-drag-width,
+  $pivotgrid-common-field-chooser-drag-height: $pivotgrid-common-field-chooser-drag-height,
+);
+@use "sass:meta";
 
 $pivotgrid-drag-header-border: 1px solid;
 $pivotgrid-drag-header-first-shadow: 0 0 1px $pivotgrid-drag-header-first-shadow-color;
@@ -30,7 +60,7 @@ $pivotgrid-border-width: 1px;
 $pivotgrid-border: $pivotgrid-border-width solid;
 $pivotgrid-icon-size: 14px;
 $pivotgrid-common-field-padding: 2px;
-$pivotgrid-filter-area-border-spacing: $pivotgrid-common-left-right-padding - $pivotgrid-common-field-padding $pivotgrid-header-top-bottom-padding - $pivotgrid-common-field-padding;
+$pivotgrid-filter-area-border-spacing: if(meta.type-of($pivotgrid-common-left-right-padding) == number and meta.type-of($pivotgrid-common-field-padding) == number, $pivotgrid-common-left-right-padding - $pivotgrid-common-field-padding, calc(#{$pivotgrid-common-left-right-padding} - #{$pivotgrid-common-field-padding})) if(meta.type-of($pivotgrid-header-top-bottom-padding) == number and meta.type-of($pivotgrid-common-field-padding) == number, $pivotgrid-header-top-bottom-padding - $pivotgrid-common-field-padding, calc(#{$pivotgrid-header-top-bottom-padding} - #{$pivotgrid-common-field-padding}));
 $pivotgrid-expand-icon-offset: -5px;
 $pivotgrid-expand-icon-text-offset: 0;
 
@@ -41,7 +71,7 @@ $pivotgrid-expand-icon-text-offset: 0;
     &.dx-position-indicator-vertical {
       margin-top: -4px;
       margin-left: -1px;
-      height: 2px;
+      height: $pivotgrid-position-indicator-vertical-height;
 
       &.dx-position-indicator-last {
         margin-top: -3px;
@@ -50,10 +80,10 @@ $pivotgrid-expand-icon-text-offset: 0;
 
     &.dx-position-indicator-horizontal {
       margin-left: -3px;
-      width: 2px;
+      width: $pivotgrid-position-indicator-horizontal-width;
 
       &.dx-position-indicator-last {
-        margin-left: 3px;
+        margin-left: $pivotgrid-position-indicator-last-margin-left;
       }
     }
   }
@@ -111,7 +141,7 @@ $pivotgrid-expand-icon-text-offset: 0;
 
   .dx-area-field.dx-area-box {
     background-color: $pivotgrid-area-background;
-    margin-bottom: 4px;
+    margin-bottom: $pivotgrid-area-box-margin-bottom;
     border: $pivotgrid-border;
     border-color: $pivotgrid-border-color;
     padding: $pivotgrid-common-top-bottom-padding $pivotgrid-common-left-right-padding;
@@ -134,14 +164,14 @@ $pivotgrid-expand-icon-text-offset: 0;
 
 .dx-pivotgrid {
   td:has(> .dx-expand-icon-container:focus-visible) {
-    outline: 2px solid;
+    outline: $pivotgrid-expand-icon-container-outline;
     outline-color: $pivotgrid-accent-color;
     outline-offset: -2px;
   }
 
   .dx-pivotgrid-horizontal-headers td:focus-visible,
   .dx-pivotgrid-vertical-headers td:focus-visible {
-    outline: 2px solid;
+    outline: $pivotgrid-expand-icon-container-outline;
     outline-color: $pivotgrid-accent-color;
     outline-offset: -2px;
   }
@@ -159,7 +189,7 @@ $pivotgrid-expand-icon-text-offset: 0;
   .dx-column-header,
   .dx-filter-header {
     .dx-pivotgrid-toolbar {
-      margin-right: 10px;
+      margin-right: $pivotgrid-toolbar-margin-right;
       float: right;
       display: inline-block;
       position: relative;
@@ -170,7 +200,7 @@ $pivotgrid-expand-icon-text-offset: 0;
       }
 
       .dx-pivotgrid-field-chooser-button {
-        margin-right: 4px;
+        margin-right: $pivotgrid-field-chooser-button-margin-right;
       }
     }
   }
@@ -249,7 +279,7 @@ $pivotgrid-expand-icon-text-offset: 0;
 
     .dx-pivotgrid-toolbar {
       .dx-button {
-        margin: 1px;
+        margin: $pivotgrid-button-margin;
       }
     }
   }
@@ -274,7 +304,7 @@ $pivotgrid-expand-icon-text-offset: 0;
     td {
       position: relative;
       border: none;
-      padding: $pivotgrid-header-top-bottom-padding 2px;
+      padding: $pivotgrid-header-top-bottom-padding $pivotgrid-header-cell-side-padding;
     }
 
     tr > td:first-child {
@@ -295,9 +325,9 @@ $pivotgrid-expand-icon-text-offset: 0;
 
   .dx-group-connector {
     position: absolute;
-    width: 2px;
+    width: $pivotgrid-position-indicator-horizontal-width;
     top: 50%;
-    height: 2px;
+    height: $pivotgrid-position-indicator-vertical-height;
     margin-top: -1px;
     background-color: $pivotgrid-border-color;
 
@@ -373,7 +403,7 @@ $pivotgrid-expand-icon-text-offset: 0;
     td {
 
       // max-width: 150px;
-      min-width: 50px;
+      min-width: $pivotgrid-last-cell-min-width;
       border-right: $pivotgrid-border;
       border-right-color: $pivotgrid-border-color;
     }
@@ -493,7 +523,7 @@ $pivotgrid-expand-icon-text-offset: 0;
 
   .dx-icon-sorted {
     display: inline-block;
-    margin-left: 5px;
+    margin-left: $pivotgrid-icon-sorted-margin-left;
     width: $pivotgrid-icon-size;
   }
 
@@ -503,7 +533,7 @@ $pivotgrid-expand-icon-text-offset: 0;
 
     .dx-pivotgrid-fields-area-head {
       td {
-        padding: 0 2px;
+        padding: $pivotgrid-fields-area-head-padding;
       }
     }
   }
@@ -525,7 +555,7 @@ $pivotgrid-expand-icon-text-offset: 0;
   }
 
   .dx-treeview-search {
-    margin: 5px;
+    margin: $pivotgrid-treeview-search-margin;
   }
 
   .dx-area-icon {
@@ -534,7 +564,7 @@ $pivotgrid-expand-icon-text-offset: 0;
   }
 
   .dx-area {
-    padding: 5px;
+    padding: $pivotgrid-area-padding;
     display: flex;
     flex-grow: 1;
     flex-direction: column;
@@ -542,7 +572,7 @@ $pivotgrid-expand-icon-text-offset: 0;
     @include flexible-scrollable();
 
     .dx-area-fields {
-      margin-top: 3px;
+      margin-top: $pivotgrid-area-fields-margin-top-2;
       border: $pivotgrid-border;
       border-color: $pivotgrid-border-color;
       display: flex;
@@ -556,7 +586,7 @@ $pivotgrid-expand-icon-text-offset: 0;
   }
 
   .dx-area-fields[group] {
-    padding: 5px;
+    padding: $pivotgrid-area-padding;
     background-color: $pivotgrid-totalcolor;
     display: flex;
   }
@@ -574,7 +604,7 @@ $pivotgrid-expand-icon-text-offset: 0;
         margin-left: -3px;
 
         &.dx-position-indicator-last {
-          margin-left: 1px;
+          margin-left: $pivotgrid-position-indicator-last-margin-left-2;
         }
       }
     }
@@ -590,12 +620,12 @@ $pivotgrid-expand-icon-text-offset: 0;
     .dx-filter-header {
       .dx-pivotgrid-toolbar {
         margin-right: 0;
-        margin-left: 10px;
+        margin-left: $pivotgrid-toolbar-margin-left;
         float: left;
 
         .dx-pivotgrid-field-chooser-button {
           margin-right: 0;
-          margin-left: 4px;
+          margin-left: $pivotgrid-field-chooser-button-margin-left;
         }
       }
     }
@@ -603,7 +633,7 @@ $pivotgrid-expand-icon-text-offset: 0;
     .dx-column-header {
       .dx-pivotgrid-fields-area-head {
         tr > td:first-child {
-          padding-left: 2px;
+          padding-left: $pivotgrid-fields-area-head-padding-left;
           padding-right: 0;
         }
       }
@@ -611,7 +641,7 @@ $pivotgrid-expand-icon-text-offset: 0;
 
     .dx-pivotgrid-fields-area-head {
       tr > td {
-        padding: $pivotgrid-common-left-right-padding 2px;
+        padding: $pivotgrid-common-left-right-padding $pivotgrid-fields-area-head-cell-side-padding;
       }
 
       tr > td:first-child {
@@ -711,7 +741,7 @@ $pivotgrid-expand-icon-text-offset: 0;
 
     .dx-icon-sorted {
       margin-left: 0;
-      margin-right: 5px;
+      margin-right: $pivotgrid-icon-sorted-margin-right;
     }
 
     .dx-pivotgridfieldchooser-container .dx-col {
diff --git a/packages/devextreme-scss/scss/widgets/base/radioButton/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/radioButton/_mixins.scss
index 0081edf94f26..31668dcbb25a 100644
--- a/packages/devextreme-scss/scss/widgets/base/radioButton/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/base/radioButton/_mixins.scss
@@ -1,4 +1,5 @@
 @use "sass:math";
+@use "sass:meta";
 
 @mixin dx-radiobutton-icon-mixin(
   $icon-size,
@@ -9,7 +10,7 @@
   $ripple-transition: all 0s ease 0s,
 ) {
   $border-radius: 50%;
-  $dot-icon-border-width: math.div($icon-size - $border-width * 2 - $dot-size, 2);
+  $dot-icon-border-width: if(meta.type-of($icon-size) == number and meta.type-of($border-width) == number and meta.type-of($dot-size) == number, math.div($icon-size - $border-width * 2 - $dot-size, 2), calc((#{$icon-size} - #{$border-width} * 2 - #{$dot-size}) / 2));
 
   .dx-radiobutton-icon {
     position: relative;
diff --git a/packages/devextreme-scss/scss/widgets/base/radioGroup/_index.scss b/packages/devextreme-scss/scss/widgets/base/radioGroup/_index.scss
index 725e25659bdf..997f4c09ec54 100644
--- a/packages/devextreme-scss/scss/widgets/base/radioGroup/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/radioGroup/_index.scss
@@ -2,14 +2,19 @@
 
 // adduse
 
+
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$radiogroup-radio-value-container-padding-inline-end: 10px !default;
+$radiogroup-collection-column-gap-2: 17px !default;
+
 .dx-radio-value-container {
-  padding-inline-end: 10px;
+  padding-inline-end: $radiogroup-radio-value-container-padding-inline-end;
 }
 
 .dx-radiogroup-horizontal {
   .dx-collection {
     display: flex;
     flex-wrap: wrap;
-    column-gap: 17px;
+    column-gap: $radiogroup-collection-column-gap-2;
   }
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/_common.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/_common.scss
index d331e306e8e3..d9cda5a3521d 100644
--- a/packages/devextreme-scss/scss/widgets/base/scheduler/_common.scss
+++ b/packages/devextreme-scss/scss/widgets/base/scheduler/_common.scss
@@ -6,6 +6,9 @@
 $scheduler-appointment-collector-margin: 3px;
 $scheduler-appointment-collector-height: 22px;
 
+$scheduler-common-collector-margin: null !default;
+$scheduler-common-collector-size: null !default;
+
 .dx-scheduler {
   .dx-empty-message {
     line-height: normal;
@@ -49,7 +52,7 @@ $scheduler-appointment-collector-height: 22px;
 }
 
 .dx-scheduler-adaptive .dx-scheduler-appointment-collector {
-  margin: 0 3px;
+  margin: $scheduler-common-collector-margin;
 }
 
 .dx-scheduler-work-space-mouse-selection {
@@ -84,9 +87,9 @@ $scheduler-appointment-collector-height: 22px;
 
   .dx-scheduler-appointment-collector,
   .dx-scheduler-appointment-collector.dx-scheduler-appointment-collector-compact {
-    height: 28px;
-    width: 28px;
-    margin: 0 3px;
+    height: $scheduler-common-collector-size;
+    width: $scheduler-common-collector-size;
+    margin: $scheduler-common-collector-margin;
   }
 
   .dx-scheduler-work-space.dx-scheduler-timeline {
diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss
index 9a868e452bed..c9989520b0ab 100644
--- a/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss
@@ -44,12 +44,39 @@ $agenda-appointment-recurrence-icon-color: null !default;
 @use "./mixins" as *;
 @use "../mixins" as *;
 @use "../icon_fonts" as *;
-@use "./common";
+$scheduler-common-collector-margin: 0 3px !default;
+$scheduler-common-collector-size: 28px !default;
+
+@use "./common" with (
+  $scheduler-common-collector-margin: $scheduler-common-collector-margin,
+  $scheduler-common-collector-size: $scheduler-common-collector-size,
+);
+$scheduler-tooltip-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15) !default;
+
+$scheduler-tooltip-width: 360px !default;
+$scheduler-tooltip-content-padding: 5px !default;
+$scheduler-tooltip-title-margin-top: 7px !default;
+$scheduler-tooltip-title-margin-left: 5px !default;
+$scheduler-tooltip-date-margin: 5px 10px !default;
+$scheduler-tooltip-remove-margin-top: 10px !default;
+$scheduler-tooltip-subject-font-size: 16px !default;
+$scheduler-tooltip-date-font-size: 12px !default;
+$scheduler-appointment-content-details-font-size: 11px !default;
+
 @use "./tooltip" with (
+  $scheduler-tooltip-width: $scheduler-tooltip-width,
+  $scheduler-tooltip-content-padding: $scheduler-tooltip-content-padding,
+  $scheduler-tooltip-title-margin-top: $scheduler-tooltip-title-margin-top,
+  $scheduler-tooltip-title-margin-left: $scheduler-tooltip-title-margin-left,
+  $scheduler-tooltip-date-margin: $scheduler-tooltip-date-margin,
+  $scheduler-tooltip-remove-margin-top: $scheduler-tooltip-remove-margin-top,
+  $scheduler-tooltip-shadow: $scheduler-tooltip-shadow,
   $scheduler-appointment-base-color: $scheduler-appointment-base-color,
   $scheduler-tooltip-appointment-text-color: $scheduler-tooltip-appointment-text-color,
   $scheduler-appointment-overlay-bg: $scheduler-appointment-overlay-bg,
-  $scheduler-tooltip-list-focused-bg: $scheduler-tooltip-list-focused-bg
+  $scheduler-tooltip-list-focused-bg: $scheduler-tooltip-list-focused-bg,
+  $scheduler-tooltip-subject-font-size: $scheduler-tooltip-subject-font-size,
+  $scheduler-tooltip-date-font-size: $scheduler-tooltip-date-font-size
 );
 
 $scheduler-appointment-min-size: 4px;
@@ -64,7 +91,7 @@ $scheduler-vertical-appointment-hovering-shadow: inset 0 $scheduler-hovered-appo
 $scheduler-vertical-appointment-shadow: inset 0 2px 0 0 $scheduler-appointment-start-color;
 $scheduler-vertical-appointment-resizing-shadow: inset 0 -2px 0 0 $scheduler-appointment-start-color, $scheduler-vertical-appointment-shadow;
 
-$scheduler-appointment-dragging-shadow: 7px 7px 15px 0 rgba(50, 50, 50, 0.2);
+$scheduler-appointment-dragging-shadow: 7px 7px 15px 0 rgba(50, 50, 50, 0.2) !default;
 
 $scheduler-horizontal-appointment-resizable-hovering-shadow: inset $scheduler-hovered-appointment-top-shadow-size 0 0 0 $scheduler-appointment-start-color, inset -2px 0 0 0 $scheduler-appointment-start-color;
 $scheduler-horizontal-appointment-resizable-hovering-shadow-rtl: inset (-$scheduler-hovered-appointment-top-shadow-size) 0 0 0 $scheduler-appointment-start-color, inset 2px 0 0 0 $scheduler-appointment-start-color;
@@ -95,11 +122,51 @@ $scheduler-time-indicator-size: 1px;
 $scheduler-time-indicator-top: 14px;
 $scheduler-time-indicator-left: 12px;
 
-$scheduler-time-indicator-shadow-color: rgba(255, 255, 255, 0.1);
+$scheduler-time-indicator-shadow-color: rgba(255, 255, 255, 0.1) !default;
 $scheduler-time-indicator-shadow: 0 1px 0 0 $scheduler-time-indicator-shadow-color;
 $scheduler-time-indicator-text-shadow: $scheduler-time-indicator-shadow-color 1px 0 0;
 
+$scheduler-appointment-icon-font-size: 18px !default;
+$scheduler-appointment-date-opacity: 0.7 !default;
+$scheduler-appointment-resizing-opacity: 0.7 !default;
+$scheduler-appointment-disabled-opacity: 0.6 !default;
+$scheduler-appointment-drag-source-opacity: 0.7 !default;
+$agenda-appointment-title-font-weight: 700 !default;
+$agenda-appointment-details-font-size: 12px !default;
+$agenda-appointment-details-opacity: 0.7 !default;
+
+$scheduler-appointment-reduced-icon-top: 3px !default;
+$scheduler-appointment-active-marker-border-radius: 4px !default;
+$scheduler-appointment-content-details-margin-top: 2px !default;
+$scheduler-appointment-reduced-icon-rtl-left: 3px !default;
+$agenda-appointment-item-padding: 10px !default;
+$agenda-appointment-item-border-radius: 5px !default;
+$agenda-appointment-right-layout-margin-left: 10px !default;
+$agenda-appointment-allday-padding-right: 5px !default;
+$agenda-appointment-resource-item-margin-left: 15px !default;
+$agenda-appointment-resource-value-margin-left: 3px !default;
+$agenda-appointment-rtl-margin-right: 10px !default;
+
 @use "./appointment" with (
+  $scheduler-appointment-reduced-icon-top: $scheduler-appointment-reduced-icon-top,
+  $scheduler-appointment-active-marker-border-radius: $scheduler-appointment-active-marker-border-radius,
+  $scheduler-appointment-content-details-margin-top: $scheduler-appointment-content-details-margin-top,
+  $scheduler-appointment-reduced-icon-rtl-left: $scheduler-appointment-reduced-icon-rtl-left,
+  $agenda-appointment-item-padding: $agenda-appointment-item-padding,
+  $agenda-appointment-item-border-radius: $agenda-appointment-item-border-radius,
+  $agenda-appointment-right-layout-margin-left: $agenda-appointment-right-layout-margin-left,
+  $agenda-appointment-allday-padding-right: $agenda-appointment-allday-padding-right,
+  $agenda-appointment-resource-item-margin-left: $agenda-appointment-resource-item-margin-left,
+  $agenda-appointment-resource-value-margin-left: $agenda-appointment-resource-value-margin-left,
+  $agenda-appointment-rtl-margin-right: $agenda-appointment-rtl-margin-right,
+  $scheduler-appointment-icon-font-size: $scheduler-appointment-icon-font-size,
+  $scheduler-appointment-date-opacity: $scheduler-appointment-date-opacity,
+  $scheduler-appointment-resizing-opacity: $scheduler-appointment-resizing-opacity,
+  $scheduler-appointment-disabled-opacity: $scheduler-appointment-disabled-opacity,
+  $scheduler-appointment-drag-source-opacity: $scheduler-appointment-drag-source-opacity,
+  $agenda-appointment-title-font-weight: $agenda-appointment-title-font-weight,
+  $agenda-appointment-details-font-size: $agenda-appointment-details-font-size,
+  $agenda-appointment-details-opacity: $agenda-appointment-details-opacity,
   $scheduler-transparent-top-border: $scheduler-transparent-top-border,
   $scheduler-appointment-base-color: $scheduler-appointment-base-color,
   $scheduler-appointment-text-color: $scheduler-appointment-text-color,
@@ -122,7 +189,38 @@ $scheduler-time-indicator-text-shadow: $scheduler-time-indicator-shadow-color 1p
   $agenda-appointment-active-bg: $agenda-appointment-active-bg,
   $agenda-appointment-title-font-size: $agenda-appointment-title-font-size
 );
+$scheduler-views-header-border: 2px solid !default;
+$scheduler-views-empty-cell-border-bottom: 1px solid !default;
+$scheduler-views-empty-cell-border-right: 1px solid !default;
+$scheduler-views-empty-cell-border-left: 1px solid !default;
+$scheduler-views-first-child-border-left: 1px solid transparent !default;
+$scheduler-views-time-panel-border-bottom: 1px solid transparent !default;
+$scheduler-views-group-header-padding: 0 5px !default;
+$scheduler-views-group-header-padding-alt: 0 5px 0 10px !default;
+$scheduler-views-time-indicator-height: 1px !default;
+$scheduler-views-group-header-content-height: 40px !default;
+$scheduler-views-vertical-group-min-height: 100px !default;
+
+$scheduler-timeline-min-height: 100px !default;
+$scheduler-timeline-group-two-empty-cell-width: 160px !default;
+$scheduler-timeline-group-header-width: 80px !default;
+$scheduler-timeline-group-three-empty-cell-width: 240px !default;
+$scheduler-timeline-cell-width: 200px !default;
+$scheduler-agenda-left-column-width: 70px !default;
+$scheduler-group-header-agenda-font-size: 18px !default;
+$scheduler-agenda-date-table-padding-top: 10px !default;
+$scheduler-renovation-virtual-row-height: 50px !default;
+
 @use "./views" with (
+  $scheduler-timeline-min-height: $scheduler-timeline-min-height,
+  $scheduler-timeline-group-two-empty-cell-width: $scheduler-timeline-group-two-empty-cell-width,
+  $scheduler-timeline-group-header-width: $scheduler-timeline-group-header-width,
+  $scheduler-timeline-group-three-empty-cell-width: $scheduler-timeline-group-three-empty-cell-width,
+  $scheduler-timeline-cell-width: $scheduler-timeline-cell-width,
+  $scheduler-agenda-left-column-width: $scheduler-agenda-left-column-width,
+  $scheduler-group-header-agenda-font-size: $scheduler-group-header-agenda-font-size,
+  $scheduler-agenda-date-table-padding-top: $scheduler-agenda-date-table-padding-top,
+  $scheduler-renovation-virtual-row-height: $scheduler-renovation-virtual-row-height,
   $scheduler-workspace-background-color: $scheduler-workspace-background-color,
   $scheduler-workspace-accent-color: $scheduler-workspace-accent-color,
   $scheduler-small-size-factor: $scheduler-small-size-factor,
@@ -149,12 +247,33 @@ $scheduler-time-indicator-text-shadow: $scheduler-time-indicator-shadow-color 1p
   $scheduler-first-month-cell-background-color: $scheduler-first-month-cell-background-color,
 
   $scheduler-panel-text-color: $scheduler-panel-text-color,
+  $scheduler-views-header-border: $scheduler-views-header-border,
+  $scheduler-views-empty-cell-border-bottom: $scheduler-views-empty-cell-border-bottom,
+  $scheduler-views-empty-cell-border-right: $scheduler-views-empty-cell-border-right,
+  $scheduler-views-empty-cell-border-left: $scheduler-views-empty-cell-border-left,
+  $scheduler-views-first-child-border-left: $scheduler-views-first-child-border-left,
+  $scheduler-views-time-panel-border-bottom: $scheduler-views-time-panel-border-bottom,
+  $scheduler-views-group-header-padding: $scheduler-views-group-header-padding,
+  $scheduler-views-group-header-padding-alt: $scheduler-views-group-header-padding-alt,
+  $scheduler-views-time-indicator-height: $scheduler-views-time-indicator-height,
+  $scheduler-views-group-header-content-height: $scheduler-views-group-header-content-height,
+  $scheduler-views-vertical-group-min-height: $scheduler-views-vertical-group-min-height,
 );
 
 @function calculate-small-left-column-size($size) {
   @return $size + $scheduler-left-column-width * $scheduler-small-size-factor;
 }
 
+
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$scheduler-appointment-content-padding-2: 0 7px !default;
+$scheduler-appointment-recurrence-icon-top: 9px !default;
+$scheduler-header-panel-current-time-cell-height: 2px !default;
+$scheduler-appointment-content-padding-3: 0 25px 0 7px !default;
+$scheduler-rtl-padding: 0 7px 0 25px !default;
+$scheduler-appointment-collector-width: 24px !default;
+$scheduler-appointment-content-padding-right: 5px !default;
+
 @mixin scheduler-mixin() {
   .dx-scheduler-container {
     display: flex;
@@ -206,7 +325,7 @@ $scheduler-time-indicator-text-shadow: $scheduler-time-indicator-shadow-color 1p
   .dx-scheduler-work-space-work-week,
   .dx-scheduler-work-space-day {
     .dx-scheduler-all-day-appointment .dx-scheduler-appointment-content {
-      padding: 0 7px;
+      padding: $scheduler-appointment-content-padding-2;
     }
 
     .dx-scheduler-appointment-reduced {
@@ -218,7 +337,7 @@ $scheduler-time-indicator-text-shadow: $scheduler-time-indicator-shadow-color 1p
     .dx-scheduler-appointment-reduced:not(.dx-scheduler-all-day-appointment) {
       .dx-scheduler-appointment-reduced-icon,
       .dx-scheduler-appointment-recurrence-icon {
-        top: 9px;
+        top: $scheduler-appointment-recurrence-icon-top;
       }
     }
 
@@ -332,7 +451,7 @@ $scheduler-time-indicator-text-shadow: $scheduler-time-indicator-shadow-color 1p
 
         /* NOTE: Cell has 1px table cell (<th>) border, so -1px bottom is ok here. */
         bottom: -1px;
-        height: 2px;
+        height: $scheduler-header-panel-current-time-cell-height;
         background-color: $scheduler-time-indicator-color;
       }
     }
@@ -346,14 +465,14 @@ $scheduler-time-indicator-text-shadow: $scheduler-time-indicator-shadow-color 1p
 
   .dx-scheduler-work-space-month {
     .dx-scheduler-appointment-content {
-      padding: 0 7px;
+      padding: $scheduler-appointment-content-padding-2;
     }
 
     .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content {
-      padding: 0 25px 0 7px;
+      padding: $scheduler-appointment-content-padding-3;
 
       .dx-rtl & {
-        padding: 0 7px 0 25px;
+        padding: $scheduler-rtl-padding;
       }
     }
 
@@ -455,7 +574,7 @@ $scheduler-time-indicator-text-shadow: $scheduler-time-indicator-shadow-color 1p
   }
 
   .dx-scheduler-appointment-content-details {
-    font-size: 11px;
+    font-size: $scheduler-appointment-content-details-font-size;
     white-space: pre;
     overflow: hidden;
 
@@ -618,7 +737,7 @@ $scheduler-time-indicator-text-shadow: $scheduler-time-indicator-shadow-color 1p
 
   .dx-scheduler-appointment-collector-compact {
     &.dx-scheduler-appointment-collector {
-      width: 24px;
+      width: $scheduler-appointment-collector-width;
     }
 
     .dx-scheduler-appointment-collector-content,
@@ -665,7 +784,7 @@ $scheduler-time-indicator-text-shadow: $scheduler-time-indicator-shadow-color 1p
     .dx-scheduler-work-space-day {
       .dx-scheduler-appointment-reduced {
         .dx-scheduler-appointment-content {
-          padding-right: 5px;
+          padding-right: $scheduler-appointment-content-padding-right;
           padding-left: $scheduler-appointment-reduced-content-padding;
         }
       }
diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/_tooltip.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/_tooltip.scss
index ef43001ff74c..07f98f2d2f05 100644
--- a/packages/devextreme-scss/scss/widgets/base/scheduler/_tooltip.scss
+++ b/packages/devextreme-scss/scss/widgets/base/scheduler/_tooltip.scss
@@ -1,20 +1,30 @@
 @use "./mixins" as *;
 
+$scheduler-tooltip-shadow: null !default;
 $scheduler-appointment-base-color: null !default;
 $scheduler-tooltip-appointment-text-color: null !default;
 $scheduler-appointment-overlay-bg: null !default;
 $scheduler-tooltip-list-focused-bg: null !default;
 
+$scheduler-tooltip-width: null !default;
+$scheduler-tooltip-content-padding: null !default;
+$scheduler-tooltip-title-margin-top: null !default;
+$scheduler-tooltip-title-margin-left: null !default;
+$scheduler-tooltip-date-margin: null !default;
+$scheduler-tooltip-remove-margin-top: null !default;
+$scheduler-tooltip-subject-font-size: null !default;
+$scheduler-tooltip-date-font-size: null !default;
+
 .dx-popup-wrapper.dx-scheduler-appointment-tooltip-wrapper,
 .dx-scheduler-overlay-panel {
   .dx-popup-content {
     padding: 0;
 
     .dx-list-item {
-      width: 360px;
+      width: $scheduler-tooltip-width;
 
       .dx-list-item-content {
-        padding: 5px;
+        padding: $scheduler-tooltip-content-padding;
       }
 
       &.dx-state-focused {
@@ -24,15 +34,15 @@ $scheduler-tooltip-list-focused-bg: null !default;
   }
 
   .dx-overlay-content {
-    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15);
+    box-shadow: $scheduler-tooltip-shadow;
   }
 
   .dx-tooltip-appointment-item {
     display: flex;
 
     .dx-tooltip-appointment-item-marker-body {
-      margin-top: 7px;
-      margin-left: 5px;
+      margin-top: $scheduler-tooltip-title-margin-top;
+      margin-left: $scheduler-tooltip-title-margin-left;
       background: $scheduler-appointment-base-color;
 
       @include use-colored-marker(20);
@@ -44,7 +54,7 @@ $scheduler-tooltip-list-focused-bg: null !default;
 
     .dx-tooltip-appointment-item-content {
       flex-basis: 100%;
-      margin: 5px 10px;
+      margin: $scheduler-tooltip-date-margin;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -53,7 +63,7 @@ $scheduler-tooltip-list-focused-bg: null !default;
       .dx-tooltip-appointment-item-content-subject {
         text-align: left;
         font-weight: bold;
-        font-size: 16px;
+        font-size: $scheduler-tooltip-subject-font-size;
         letter-spacing: 0.01em;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -62,9 +72,9 @@ $scheduler-tooltip-list-focused-bg: null !default;
 
       .dx-tooltip-appointment-item-content-date {
         text-align: left;
-        font-size: 12px;
+        font-size: $scheduler-tooltip-date-font-size;
         opacity: 0.8;
-        margin-top: 10px;
+        margin-top: $scheduler-tooltip-remove-margin-top;
       }
     }
   }
diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/appointment/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/appointment/_index.scss
index 2e0706a69763..693b069a1b42 100644
--- a/packages/devextreme-scss/scss/widgets/base/scheduler/appointment/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/scheduler/appointment/_index.scss
@@ -1,3 +1,8 @@
+$scheduler-appointment-icon-font-size: null !default;
+$scheduler-appointment-date-opacity: null !default;
+$scheduler-appointment-resizing-opacity: null !default;
+$scheduler-appointment-disabled-opacity: null !default;
+$scheduler-appointment-drag-source-opacity: null !default;
 $scheduler-transparent-top-border: null !default;
 $scheduler-appointment-base-color: null !default;
 $scheduler-appointment-text-color: null !default;
@@ -18,9 +23,26 @@ $agenda-appointment-text-color: null !default;
 $agenda-appointment-recurrence-icon-color: null !default;
 $agenda-appointment-hover-bg: null !default;
 $agenda-appointment-active-bg: null !default;
+$agenda-appointment-title-font-weight: null !default;
+$agenda-appointment-details-font-size: null !default;
+$agenda-appointment-details-opacity: null !default;
 $agenda-appointment-title-font-size: null !default;
 
+$scheduler-appointment-reduced-icon-top: 3px !default;
+$scheduler-appointment-active-marker-border-radius: 4px !default;
+$scheduler-appointment-content-details-margin-top: 2px !default;
+$scheduler-appointment-reduced-icon-rtl-left: 3px !default;
+
 @use "./regular" with (
+  $appointment-reduced-icon-top: $scheduler-appointment-reduced-icon-top,
+  $appointment-active-marker-border-radius: $scheduler-appointment-active-marker-border-radius,
+  $appointment-content-details-margin-top: $scheduler-appointment-content-details-margin-top,
+  $appointment-reduced-icon-rtl-left: $scheduler-appointment-reduced-icon-rtl-left,
+  $appointment-icon-font-size: $scheduler-appointment-icon-font-size,
+  $appointment-date-opacity: $scheduler-appointment-date-opacity,
+  $appointment-resizing-opacity: $scheduler-appointment-resizing-opacity,
+  $appointment-disabled-opacity: $scheduler-appointment-disabled-opacity,
+  $appointment-drag-source-opacity: $scheduler-appointment-drag-source-opacity,
   $transparent-top-border: $scheduler-transparent-top-border,
   $appointment-base-color: $scheduler-appointment-base-color,
   $appointment-text-color: $scheduler-appointment-text-color,
@@ -37,7 +59,25 @@ $agenda-appointment-title-font-size: null !default;
   $appointment-dragging-shadow: $scheduler-appointment-dragging-shadow,
   $reduced-icon-offset: $scheduler-reduced-icon-offset
 );
+$agenda-appointment-item-padding: 10px !default;
+$agenda-appointment-item-border-radius: 5px !default;
+$agenda-appointment-right-layout-margin-left: 10px !default;
+$agenda-appointment-allday-padding-right: 5px !default;
+$agenda-appointment-resource-item-margin-left: 15px !default;
+$agenda-appointment-resource-value-margin-left: 3px !default;
+$agenda-appointment-rtl-margin-right: 10px !default;
+
 @use "./agenda" with (
+  $agenda-item-padding: $agenda-appointment-item-padding,
+  $agenda-item-border-radius: $agenda-appointment-item-border-radius,
+  $agenda-right-layout-margin-left: $agenda-appointment-right-layout-margin-left,
+  $agenda-allday-padding-right: $agenda-appointment-allday-padding-right,
+  $agenda-resource-item-margin-left: $agenda-appointment-resource-item-margin-left,
+  $agenda-resource-value-margin-left: $agenda-appointment-resource-value-margin-left,
+  $agenda-rtl-margin-right: $agenda-appointment-rtl-margin-right,
+  $title-font-weight: $agenda-appointment-title-font-weight,
+  $details-font-size: $agenda-appointment-details-font-size,
+  $details-opacity: $agenda-appointment-details-opacity,
   $marker-base-color: $scheduler-appointment-base-color,
   $title-font-size: $agenda-appointment-title-font-size,
   $text-color: $agenda-appointment-text-color,
diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/appointment/agenda/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/appointment/agenda/_index.scss
index b6ab9b94d858..db25ea4c21d9 100644
--- a/packages/devextreme-scss/scss/widgets/base/scheduler/appointment/agenda/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/scheduler/appointment/agenda/_index.scss
@@ -6,15 +6,26 @@ $recurrence-icon-color: null !default;
 $hover-bg: null !default;
 $active-bg: null !default;
 $active-color: null !default;
+$title-font-weight: null !default;
+$details-font-size: null !default;
+$details-opacity: null !default;
 $title-font-size: null !default;
 
+$agenda-item-padding: null !default;
+$agenda-item-border-radius: null !default;
+$agenda-right-layout-margin-left: null !default;
+$agenda-allday-padding-right: null !default;
+$agenda-resource-item-margin-left: null !default;
+$agenda-resource-value-margin-left: null !default;
+$agenda-rtl-margin-right: null !default;
+
 .dx-scheduler-agenda {
   .dx-scheduler-appointment {
     box-shadow: none;
     background-color: transparent;
     color: $text-color;
-    padding: 10px;
-    border-radius: 5px;
+    padding: $agenda-item-padding;
+    border-radius: $agenda-item-border-radius;
 
     &.dx-state-hover {
       background-color: $hover-bg;
@@ -41,7 +52,7 @@ $title-font-size: null !default;
   }
 
   .dx-scheduler-agenda-appointment-right-layout {
-    margin-left: 10px;
+    margin-left: $agenda-right-layout-margin-left;
   }
 
   .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content,
@@ -62,19 +73,19 @@ $title-font-size: null !default;
   .dx-scheduler-appointment-title {
     @include use-text-overflow-ellipsis();
 
-    font-weight: 700;
+    font-weight: $title-font-weight;
     font-size: $title-font-size;
   }
 
   .dx-scheduler-appointment-content-details {
     display: flex;
-    font-size: 12px;
-    opacity: 0.7;
+    font-size: $details-font-size;
+    opacity: $details-opacity;
   }
 
   .dx-scheduler-appointment-content-allday {
     display: flex;
-    padding-right: 5px;
+    padding-right: $agenda-allday-padding-right;
   }
 
   .dx-scheduler-appointment-resource-list,
@@ -83,11 +94,11 @@ $title-font-size: null !default;
   }
 
   .dx-scheduler-appointment-resource-item {
-    margin-left: 15px;
+    margin-left: $agenda-resource-item-margin-left;
   }
 
   .dx-scheduler-appointment-resource-item-value {
-    margin-left: 3px;
+    margin-left: $agenda-resource-value-margin-left;
   }
 
   .dx-scheduler-agenda-appointment-marker {
@@ -100,7 +111,7 @@ $title-font-size: null !default;
   .dx-rtl {
     .dx-scheduler-agenda-appointment-right-layout {
       margin-left: 0;
-      margin-right: 10px;
+      margin-right: $agenda-rtl-margin-right;
     }
 
     .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content,
diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/appointment/regular/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/appointment/regular/_index.scss
index 3855fdb3bb56..16494c6d774f 100644
--- a/packages/devextreme-scss/scss/widgets/base/scheduler/appointment/regular/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/scheduler/appointment/regular/_index.scss
@@ -2,6 +2,11 @@
 @use "../../../mixins" as *;
 @use "../../../icon_fonts" as *;
 
+$appointment-icon-font-size: null !default;
+$appointment-date-opacity: null !default;
+$appointment-resizing-opacity: null !default;
+$appointment-disabled-opacity: null !default;
+$appointment-drag-source-opacity: null !default;
 $transparent-top-border: null !default;
 $appointment-base-color: null !default;
 $appointment-text-color: null !default;
@@ -21,11 +26,16 @@ $appointment-dragging-shadow: null !default;
 
 $reduced-icon-offset: null !default;
 
+$appointment-reduced-icon-top: null !default;
+$appointment-active-marker-border-radius: null !default;
+$appointment-content-details-margin-top: null !default;
+$appointment-reduced-icon-rtl-left: null !default;
+
 @mixin dx-appointment-icon($name) {
   @include dx-icon($name);
 
-  top: 3px;
-  font-size: 18px;
+  top: $appointment-reduced-icon-top;
+  font-size: $appointment-icon-font-size;
   position: absolute;
   right: $reduced-icon-offset;
 }
@@ -59,7 +69,7 @@ $reduced-icon-offset: null !default;
       } @else {
         &:not(.dx-scheduler-appointment-has-resource-color):not(.dx-scheduler-appointment-drag-source)::before {
           background-color: $appointment-active-color;
-          border-radius: 4px;
+          border-radius: $appointment-active-marker-border-radius;
         }
 
         &.dx-scheduler-appointment-has-resource-color:not(.dx-scheduler-appointment-drag-source)::before {
@@ -76,13 +86,13 @@ $reduced-icon-offset: null !default;
 }
 
 .dx-scheduler-appointment-content-date {
-  opacity: 0.7;
+  opacity: $appointment-date-opacity;
   display: inline-block;
   white-space: pre-wrap;
 }
 
 .dx-scheduler-appointment-content-details {
-  margin-top: 2px;
+  margin-top: $appointment-content-details-margin-top;
 }
 
 .dx-scheduler-appointment-content-allday {
@@ -130,7 +140,7 @@ $reduced-icon-offset: null !default;
 
   &.dx-resizable-resizing {
     z-index: 1000;
-    opacity: 0.7;
+    opacity: $appointment-resizing-opacity;
   }
 
   .dx-resizable-handle-left {
@@ -146,7 +156,7 @@ $reduced-icon-offset: null !default;
 
     .dx-rtl & {
       right: auto;
-      left: 3px;
+      left: $appointment-reduced-icon-rtl-left;
     }
   }
 
@@ -159,12 +169,12 @@ $reduced-icon-offset: null !default;
 
   &.dx-state-disabled {
     cursor: default;
-    opacity: 0.6;
+    opacity: $appointment-disabled-opacity;
     pointer-events: auto;
   }
 
   &.dx-scheduler-appointment-drag-source {
-    opacity: 0.7;
+    opacity: $appointment-drag-source-opacity;
   }
 }
 
diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/views/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/views/_index.scss
index af44f6164aae..d98b73ba25d3 100644
--- a/packages/devextreme-scss/scss/widgets/base/scheduler/views/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/scheduler/views/_index.scss
@@ -1,3 +1,4 @@
+@use "sass:meta";
 @use "../../mixins" as *;
 @use "sass:math";
 
@@ -27,6 +28,18 @@ $scheduler-workspace-month-text-color: null !default;
 $scheduler-first-month-cell-background-color: null !default;
 
 $scheduler-panel-text-color: null !default;
+$scheduler-views-header-border: null !default;
+$scheduler-views-empty-cell-border-bottom: null !default;
+$scheduler-views-empty-cell-border-right: null !default;
+$scheduler-views-empty-cell-border-left: null !default;
+$scheduler-views-first-child-border-left: null !default;
+$scheduler-views-time-panel-border-bottom: null !default;
+$scheduler-views-group-header-padding: null !default;
+$scheduler-views-group-header-padding-alt: null !default;
+$scheduler-views-time-indicator-height: null !default;
+$scheduler-views-time-indicator-width: 10% !default; // dx-relative-%
+$scheduler-views-group-header-content-height: null !default;
+$scheduler-views-vertical-group-min-height: null !default;
 
 $scheduler-timepanel-cell-offset: 20px;
 $scheduler-workspace-info-font-size: 20px;
@@ -38,7 +51,7 @@ $scheduler-workspace-date-table-cell-height: 50px;
 $scheduler-all-day-table-cell-height: $scheduler-workspace-date-table-cell-height * 1.5;
 $scheduler-collapsed-all-day-table-cell-height: $scheduler-workspace-date-table-cell-height * 0.5;
 $scheduler-vertical-grouped-all-day-table-cell-height: $scheduler-workspace-date-table-cell-height;
-$scheduler-header-panel-table-cell-height: $scheduler-workspace-date-table-cell-height - 10px;
+$scheduler-header-panel-table-cell-height: if(meta.type-of($scheduler-workspace-date-table-cell-height) == number, $scheduler-workspace-date-table-cell-height - 10px, calc(#{$scheduler-workspace-date-table-cell-height} - 10px));
 $scheduler-group-header-table-cell-height: 30px;
 
 $scheduler-group-header-table-cell-width: 80px;
@@ -61,21 +74,42 @@ $scheduler-month-date-text-padding: 6px;
   $scheduler-month-date-text-padding: $scheduler-month-date-text-padding,
   $scheduler-first-month-cell-background-color: $scheduler-first-month-cell-background-color,
 );
+$scheduler-timeline-min-height: 100px !default;
+$scheduler-timeline-group-two-empty-cell-width: 160px !default;
+$scheduler-timeline-group-header-width: 80px !default;
+$scheduler-timeline-group-three-empty-cell-width: 240px !default;
+$scheduler-timeline-cell-width: 200px !default;
+
 @use "./timelines" with (
+  $scheduler-timeline-min-height: $scheduler-timeline-min-height,
+  $scheduler-timeline-group-two-empty-cell-width: $scheduler-timeline-group-two-empty-cell-width,
+  $scheduler-timeline-group-header-width: $scheduler-timeline-group-header-width,
+  $scheduler-timeline-group-three-empty-cell-width: $scheduler-timeline-group-three-empty-cell-width,
+  $scheduler-timeline-cell-width: $scheduler-timeline-cell-width,
   $scheduler-workspace-date-table-cell-height: $scheduler-workspace-date-table-cell-height,
   $scheduler-accent-border: $scheduler-accent-border,
   $scheduler-base-border: $scheduler-base-border,
   $scheduler-base-border-color: $scheduler-base-border-color,
   $scheduler-accent-border-color: $scheduler-accent-border-color,
 );
+$scheduler-agenda-left-column-width: 70px !default;
+$scheduler-group-header-agenda-font-size: 18px !default;
+$scheduler-agenda-date-table-padding-top: 10px !default;
+
 @use "./agenda" with (
+  $scheduler-agenda-left-column-width: $scheduler-agenda-left-column-width,
+  $scheduler-group-header-agenda-font-size: $scheduler-group-header-agenda-font-size,
+  $scheduler-agenda-date-table-padding-top: $scheduler-agenda-date-table-padding-top,
   $scheduler-group-header-table-cell-width: $scheduler-group-header-table-cell-width,
   $scheduler-small-size-factor: $scheduler-small-size-factor,
   $scheduler-small-font-size: $scheduler-small-font-size,
   $scheduler-workspace-info-font-size: $scheduler-workspace-info-font-size,
   $scheduler-other-month-cell-opacity: $scheduler-other-month-cell-opacity,
 );
+$scheduler-renovation-virtual-row-height: 50px !default;
+
 @use "./renovation" with (
+  $scheduler-renovation-virtual-row-height: $scheduler-renovation-virtual-row-height,
   $scheduler-timeline-cell-height: $scheduler-timeline-cell-height,
 );
 
@@ -84,7 +118,7 @@ $scheduler-month-date-text-padding: 6px;
 
   &::before {
     position: absolute;
-    top: $scheduler-header-panel-table-cell-height - $scheduler-current-time-cell-border-size - 1;
+    top: if(meta.type-of($scheduler-header-panel-table-cell-height) == number and meta.type-of($scheduler-current-time-cell-border-size) == number, $scheduler-header-panel-table-cell-height - $scheduler-current-time-cell-border-size - 1, calc(#{$scheduler-header-panel-table-cell-height} - #{$scheduler-current-time-cell-border-size} - 1px));
     right: 0;
     width: 100%;
     height: $scheduler-current-time-cell-border-size;
@@ -190,12 +224,12 @@ $scheduler-month-date-text-padding: 6px;
 
   &:not(.dx-scheduler-work-space-all-day):not(.dx-scheduler-work-space-month):not(.dx-scheduler-timeline) {
     .dx-scheduler-header-panel {
-      border-bottom: 2px solid;
+      border-bottom: $scheduler-views-header-border;
       border-bottom-color: $scheduler-base-border-color;
     }
 
     .dx-scheduler-header-panel-empty-cell {
-      border-bottom: 2px solid;
+      border-bottom: $scheduler-views-header-border;
       border-bottom-color: $scheduler-base-border-color;
     }
 
@@ -230,9 +264,9 @@ $scheduler-month-date-text-padding: 6px;
   align-items: flex-end;
   flex-shrink: 0;
   width: 0;
-  border-bottom: 1px solid;
+  border-bottom: $scheduler-views-empty-cell-border-bottom;
   border-bottom-color: $scheduler-base-border-color;
-  border-right: 1px solid;
+  border-right: $scheduler-views-empty-cell-border-right;
   border-right-color: $scheduler-base-border-color;
 }
 
@@ -319,7 +353,7 @@ $scheduler-month-date-text-padding: 6px;
       @include flex-container(row, nowrap);
 
       flex: 1 1 0;
-      padding: 0 5px;
+      padding: $scheduler-views-group-header-padding;
       height: auto;
       width: $scheduler-left-column-width;
       justify-content: flex-start;
@@ -498,7 +532,7 @@ $scheduler-month-date-text-padding: 6px;
   border-left-color: $scheduler-base-border-color;
 
   &:first-child {
-    border-left: 1px solid transparent;
+    border-left: $scheduler-views-first-child-border-left;
   }
 
   @include dx-overflow();
@@ -509,7 +543,7 @@ $scheduler-month-date-text-padding: 6px;
   position: relative;
 
   .dx-scheduler-all-day-table-cell {
-    border-bottom: 2px solid;
+    border-bottom: $scheduler-views-header-border;
     border-bottom-color: $scheduler-base-border-color;
   }
 }
@@ -523,7 +557,7 @@ $scheduler-month-date-text-padding: 6px;
   height: $scheduler-all-day-table-cell-height;
   position: relative;
   text-align: center;
-  border-bottom: 2px solid;
+  border-bottom: $scheduler-views-header-border;
   border-bottom-color: $scheduler-base-border-color;
 
   @include user-select(none);
@@ -588,7 +622,7 @@ $scheduler-month-date-text-padding: 6px;
   vertical-align: top;
   height: $scheduler-workspace-date-table-cell-height;
   padding-right: $scheduler-timepanel-cell-offset;
-  border-bottom: 1px solid transparent;
+  border-bottom: $scheduler-views-time-panel-border-bottom;
 
   > div {
     margin-top: -13px;
@@ -602,8 +636,8 @@ $scheduler-month-date-text-padding: 6px;
   &::after {
     position: absolute;
     bottom: -1px;
-    width: 10%;
-    height: 1px;
+    width: $scheduler-views-time-indicator-width;
+    height: $scheduler-views-time-indicator-height;
     right: 0;
     background-color: $scheduler-base-border-color;
   }
@@ -687,7 +721,7 @@ $scheduler-month-date-text-padding: 6px;
 
     .dx-scheduler-group-header-content {
       display: flex;
-      height: 40px;
+      height: $scheduler-views-group-header-content-height;
 
       > div {
         margin: auto;
@@ -725,7 +759,7 @@ $scheduler-month-date-text-padding: 6px;
 .dx-scheduler-work-space-vertical-grouped {
   .dx-scheduler-work-space-vertical-group-table {
     height: 100%;
-    min-height: 100px;
+    min-height: $scheduler-views-vertical-group-min-height;
     border-top: $scheduler-base-border;
     border-top-color: $scheduler-base-border-color;
     border-spacing: 0;
@@ -770,7 +804,7 @@ $scheduler-month-date-text-padding: 6px;
 
   .dx-scheduler-date-table-cell {
     &.dx-scheduler-last-group-cell {
-      border-bottom: 2px solid;
+      border-bottom: $scheduler-views-header-border;
       border-bottom-color: $scheduler-base-border-color;
     }
   }
@@ -786,7 +820,7 @@ $scheduler-month-date-text-padding: 6px;
 
 .dx-rtl {
   .dx-scheduler-header-panel-empty-cell {
-    border-left: 1px solid;
+    border-left: $scheduler-views-empty-cell-border-left;
     border-left-color: $scheduler-base-border-color;
     border-right: none;
   }
@@ -862,7 +896,7 @@ $scheduler-month-date-text-padding: 6px;
       }
 
       .dx-scheduler-group-header {
-        padding: 0 5px 0 10px;
+        padding: $scheduler-views-group-header-padding-alt;
       }
 
       &.dx-scheduler-group-column-count-two,
diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/views/agenda/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/views/agenda/_index.scss
index 9602a3aaadc9..c02c6e89040b 100644
--- a/packages/devextreme-scss/scss/widgets/base/scheduler/views/agenda/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/scheduler/views/agenda/_index.scss
@@ -4,12 +4,14 @@ $scheduler-small-font-size: null !default;
 $scheduler-workspace-info-font-size: null !default;
 $scheduler-other-month-cell-opacity: null !default;
 
-$scheduler-agenda-left-column-width: 70px;
-$scheduler-group-header-agenda-font-size: 18px;
+$scheduler-agenda-left-column-width: 70px !default;
+$scheduler-group-header-agenda-font-size: 18px !default;
+
+$scheduler-agenda-date-table-padding-top: null !default;
 
 .dx-scheduler-agenda {
   .dx-scheduler-date-table-scrollable {
-    padding-top: 10px;
+    padding-top: $scheduler-agenda-date-table-padding-top;
   }
 
   .dx-scheduler-time-panel-cell {
diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/views/renovation/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/views/renovation/_index.scss
index 87a361498aac..5a48d5f41b05 100644
--- a/packages/devextreme-scss/scss/widgets/base/scheduler/views/renovation/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/scheduler/views/renovation/_index.scss
@@ -1,5 +1,7 @@
 $scheduler-timeline-cell-height: null !default;
 
+$scheduler-renovation-virtual-row-height: null !default;
+
 .dx-scheduler.dx-scheduler-native .dx-scheduler-timeline.dx-scheduler-work-space-both-scrollbar {
   .dx-scheduler-date-table-scrollable .dx-scrollable-content,
   .dx-scheduler-sidebar-scrollable .dx-scrollable-content,
@@ -36,7 +38,7 @@ $scheduler-timeline-cell-height: null !default;
 
   &.dx-scheduler-work-space-virtual {
     .dx-scheduler-date-table-row {
-      height: 50px;
+      height: $scheduler-renovation-virtual-row-height;
     }
   }
 
diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/views/timelines/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/views/timelines/_index.scss
index d5226a597875..cb6261151bfe 100644
--- a/packages/devextreme-scss/scss/widgets/base/scheduler/views/timelines/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/scheduler/views/timelines/_index.scss
@@ -6,7 +6,12 @@ $scheduler-base-border: null !default;
 $scheduler-base-border-color: null !default;
 $scheduler-accent-border-color: null !default;
 
-$scheduler-timeline-min-height: 100px;
+$scheduler-timeline-min-height: 100px !default;
+
+$scheduler-timeline-group-two-empty-cell-width: null !default;
+$scheduler-timeline-group-header-width: null !default;
+$scheduler-timeline-group-three-empty-cell-width: null !default;
+$scheduler-timeline-cell-width: null !default;
 
 .dx-scheduler-timeline-week,
 .dx-scheduler-timeline-work-week,
@@ -18,21 +23,21 @@ $scheduler-timeline-min-height: 100px;
 
   &.dx-scheduler-group-column-count-two {
     .dx-scheduler-header-panel-empty-cell {
-      width: 160px;
+      width: $scheduler-timeline-group-two-empty-cell-width;
     }
 
     .dx-scheduler-group-flex-container .dx-scheduler-group-header {
-      width: 80px;
+      width: $scheduler-timeline-group-header-width;
     }
   }
 
   &.dx-scheduler-group-column-count-three {
     .dx-scheduler-header-panel-empty-cell {
-      width: 240px;
+      width: $scheduler-timeline-group-three-empty-cell-width;
     }
 
     .dx-scheduler-group-flex-container .dx-scheduler-group-header {
-      width: 80px;
+      width: $scheduler-timeline-group-header-width;
     }
   }
 
@@ -82,7 +87,7 @@ $scheduler-timeline-min-height: 100px;
 .dx-scheduler-timeline {
   .dx-scheduler-header-panel-cell:not(.dx-scheduler-header-panel-week-cell),
   .dx-scheduler-date-table-cell {
-    width: 200px;
+    width: $scheduler-timeline-cell-width;
   }
 
   .dx-scheduler-date-table-cell {
@@ -149,7 +154,7 @@ $scheduler-timeline-min-height: 100px;
 
   &.dx-scheduler-work-space-group-by-date {
     .dx-scheduler-group-header {
-      width: 200px;
+      width: $scheduler-timeline-cell-width;
     }
   }
 
diff --git a/packages/devextreme-scss/scss/widgets/base/scrollable/_index.scss b/packages/devextreme-scss/scss/widgets/base/scrollable/_index.scss
index e87d4cb3cc96..5ca6a762a8c3 100644
--- a/packages/devextreme-scss/scss/widgets/base/scrollable/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/scrollable/_index.scss
@@ -2,6 +2,12 @@
 @use "./mixins" as *;
 
 // adduse
+
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$scrollable-scroll-width: 5px !default;
+$scrollable-scroll-height: 5px !default;
+$scrollable-scroll-padding: 2px !default;
+
 .dx-scrollable-scrollbar-simulated {
   position: relative;
 }
@@ -151,7 +157,7 @@
   height: 100%;
 
   .dx-scrollable-scroll {
-    width: 5px;
+    width: $scrollable-scroll-width;
   }
 }
 
@@ -161,7 +167,7 @@
   width: 100%;
 
   .dx-scrollable-scroll {
-    height: 5px;
+    height: $scrollable-scroll-height;
   }
 }
 
@@ -173,7 +179,7 @@
   opacity: 1;
   transition: opacity 0s linear, background-color 0s linear;
   overflow: hidden;
-  padding: 2px;
+  padding: $scrollable-scroll-padding;
 
   &.dx-state-invisible {
     display: block !important; // stylelint-disable-line declaration-no-important
diff --git a/packages/devextreme-scss/scss/widgets/base/splitter/_index.scss b/packages/devextreme-scss/scss/widgets/base/splitter/_index.scss
index d7db7991eae9..7ab171ea38b6 100644
--- a/packages/devextreme-scss/scss/widgets/base/splitter/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/splitter/_index.scss
@@ -1,5 +1,9 @@
 
 // adduse
+
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$splitter-resize-handle-gap: 8px !default;
+
 .dx-splitter {
   display: flex;
   height: 100%;
@@ -31,7 +35,7 @@
   flex: 0 0 auto;
   justify-content: center;
   align-items: center;
-  gap: 8px;
+  gap: $splitter-resize-handle-gap;
   overflow: hidden;
   user-select: none;
 
diff --git a/packages/devextreme-scss/scss/widgets/base/switch/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/switch/_mixins.scss
index 54b2b4442bb6..101064353838 100644
--- a/packages/devextreme-scss/scss/widgets/base/switch/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/base/switch/_mixins.scss
@@ -1,3 +1,4 @@
+@use "sass:meta";
 @use "../icon_fonts" as *;
 
 @mixin dx-switch(
@@ -20,10 +21,10 @@
       position: relative;
       padding-top:  $switch-padding,;
       padding-bottom:  $switch-padding,;
-      padding-inline-start: $switch-padding - $switch-container-horizontal-padding;
-      padding-inline-end: $switch-padding + $switch-container-horizontal-padding;
-      inset-inline-start: -$switch-padding;
-      top: -$switch-padding;
+      padding-inline-start: if(meta.type-of($switch-padding) == number and meta.type-of($switch-container-horizontal-padding) == number, $switch-padding - $switch-container-horizontal-padding, calc(#{$switch-padding} - #{$switch-container-horizontal-padding}));
+      padding-inline-end: if(meta.type-of($switch-padding) == number and meta.type-of($switch-container-horizontal-padding) == number, $switch-padding + $switch-container-horizontal-padding, calc(#{$switch-padding} + #{$switch-container-horizontal-padding}));
+      inset-inline-start: if(meta.type-of($switch-padding) == number, -$switch-padding, calc(-1 * #{$switch-padding}));
+      top: if(meta.type-of($switch-padding) == number, -$switch-padding, calc(-1 * #{$switch-padding}));
       overflow: hidden;
       vertical-align: middle;
       box-sizing: content-box;
@@ -353,11 +354,11 @@
     .dx-switch-handle {
       float: right;
       margin-left: 0;
-      margin-right: -$switch-height;
+      margin-right: if(meta.type-of($switch-height) == number, -$switch-height, calc(-1 * #{$switch-height}));
     }
 
     .dx-switch-container {
-      margin: 0 0 0 (-$switch-container-adjustment);
+      margin: 0 0 0 if(meta.type-of($switch-container-adjustment) == number, (-$switch-container-adjustment), calc(-1 * #{$switch-container-adjustment}));
     }
   }
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/textEditor/_index.scss b/packages/devextreme-scss/scss/widgets/base/textEditor/_index.scss
index b3bbfec4d9f4..f494633e10ce 100644
--- a/packages/devextreme-scss/scss/widgets/base/textEditor/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/textEditor/_index.scss
@@ -5,6 +5,9 @@
 // adduse
 
 
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$texteditor-clear-button-area-width: 34px !default;
+
 .dx-texteditor {
   display: block;
 
@@ -96,7 +99,7 @@
 
 .dx-clear-button-area {
   height: 100%;
-  width: 34px;
+  width: $texteditor-clear-button-area-width;
   position: relative;
   cursor: pointer;
   text-align: justify;
diff --git a/packages/devextreme-scss/scss/widgets/base/textEditor/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/textEditor/_mixins.scss
index a37911b651f9..99501cb5020f 100644
--- a/packages/devextreme-scss/scss/widgets/base/textEditor/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/base/textEditor/_mixins.scss
@@ -1,4 +1,5 @@
 @use "sass:math";
+@use "sass:meta";
 @use "sass:color";
 
 @mixin dx-editor-content-wrapper() {
@@ -18,7 +19,7 @@
     border-top-width: 0;
 
     span {
-      transform: translate(0, -$label-offset-y);
+      transform: translate(0, if(meta.type-of($label-offset-y) == number, -$label-offset-y, calc(-1 * #{$label-offset-y})));
       font-size: $label-font-size;
       margin-top: 0;
       top: 0;
@@ -181,7 +182,7 @@
         font-size: $texteditor-label-font-size;
         top: 0;
         margin-top: 0;
-        transform: translate(0, -$label-offset-y);
+        transform: translate(0, if(meta.type-of($label-offset-y) == number, -$label-offset-y, calc(-1 * #{$label-offset-y})));
         height: $label-active-height;
         line-height: normal;
       }
@@ -237,7 +238,7 @@
             width: 100%;
             position: absolute;
             height: 3px;
-            top: -$label-backdrop-offset-y;
+            top: if(meta.type-of($label-backdrop-offset-y) == number, -$label-backdrop-offset-y, calc(-1 * #{$label-backdrop-offset-y}));
             margin-inline-start: -2px;
             background-color: $label-backdrop-bg;
           }
@@ -312,9 +313,9 @@
           pointer-events: auto;
           font-size: $texteditor-label-outside-font-size;
           margin-top: 0;
-          top: -$label-offset-y-outside;
-          height: #{math.div($texteditor-label-outside-height, $texteditor-label-outside-font-size)}em;
-          line-height: #{math.div($texteditor-label-outside-height, $texteditor-label-outside-font-size)}em;
+          top: if(meta.type-of($label-offset-y-outside) == number, -$label-offset-y-outside, calc(-1 * #{$label-offset-y-outside}));
+          height: if(meta.type-of($texteditor-label-outside-height) == number and meta.type-of($texteditor-label-outside-font-size) == number, #{math.div($texteditor-label-outside-height, $texteditor-label-outside-font-size)}em, $texteditor-label-outside-height);
+          line-height: if(meta.type-of($texteditor-label-outside-height) == number and meta.type-of($texteditor-label-outside-font-size) == number, #{math.div($texteditor-label-outside-height, $texteditor-label-outside-font-size)}em, $texteditor-label-outside-height);
         }
       }
     }
@@ -331,7 +332,7 @@
         }
       }
 
-      $label-empty-margin-top: math.div(-$label-empty-height, 2) + $label-margin-top-diff;
+      $label-empty-margin-top: if(meta.type-of($label-empty-height) == number and meta.type-of($label-margin-top-diff) == number, math.div(-$label-empty-height, 2) + $label-margin-top-diff, calc(#{$label-empty-height} / -2 + #{$label-margin-top-diff}));
 
       &.dx-texteditor-empty {
         @include dx-state-empty(
@@ -434,7 +435,7 @@
         height: $texteditor-label-outside-height;
         line-height: $texteditor-label-outside-height;
         margin-top: 0;
-        top: -$texteditor-label-outside-top-offset;
+        top: if(meta.type-of($texteditor-label-outside-top-offset) == number, -$texteditor-label-outside-top-offset, calc(-1 * #{$texteditor-label-outside-top-offset}));
       }
 
       .dx-label {
@@ -462,7 +463,7 @@
           height: $texteditor-empty-label-height;
           line-height: $texteditor-empty-label-line-height;
           top: 50%;
-          margin-top: math.div(-$texteditor-empty-label-height, 2);
+          margin-top: if(meta.type-of($texteditor-empty-label-height) == number, math.div(-$texteditor-empty-label-height, 2), calc(#{$texteditor-empty-label-height} / -2));
         }
 
         &.dx-textarea {
@@ -549,7 +550,7 @@
         font-size: $texteditor-label-outside-font-size;
         height: $texteditor-label-outside-height;
         line-height: $texteditor-label-outside-height;
-        top: -$texteditor-label-outside-top-offset;
+        top: if(meta.type-of($texteditor-label-outside-top-offset) == number, -$texteditor-label-outside-top-offset, calc(-1 * #{$texteditor-label-outside-top-offset}));
         margin-top: 0;
       }
 
@@ -579,7 +580,7 @@
           height: $texteditor-empty-label-height;
           line-height: $texteditor-empty-label-line-height;
           top: 50%;
-          margin-top: math.div(-$texteditor-empty-label-height, 2);
+          margin-top: if(meta.type-of($texteditor-empty-label-height) == number, math.div(-$texteditor-empty-label-height, 2), calc(#{$texteditor-empty-label-height} / -2));
         }
 
         &.dx-textarea {
@@ -754,7 +755,7 @@
             .dx-button-content {
               display: flex;
               justify-content: center;
-              padding-top: $material-button-vertical-padding - 1px;
+              padding-top: if(meta.type-of($material-button-vertical-padding) == number, $material-button-vertical-padding - 1px, calc(#{$material-button-vertical-padding} - 1px));
 
               .dx-icon {
                 align-self: center;
@@ -808,7 +809,7 @@
           .dx-button-content {
             display: flex;
             justify-content: center;
-            padding-top: $material-button-vertical-padding - 1px;
+            padding-top: if(meta.type-of($material-button-vertical-padding) == number, $material-button-vertical-padding - 1px, calc(#{$material-button-vertical-padding} - 1px));
 
             .dx-icon {
               align-self: center;
diff --git a/packages/devextreme-scss/scss/widgets/base/timeView/_index.scss b/packages/devextreme-scss/scss/widgets/base/timeView/_index.scss
index 23215adfbf35..b661c18197d9 100644
--- a/packages/devextreme-scss/scss/widgets/base/timeView/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/timeView/_index.scss
@@ -2,6 +2,11 @@
 
 // adduse
 
+
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$timeview-numberbox-width: 70px !default;
+$timeview-numberbox-spin-touch-friendly-width-2: 110px !default;
+
 .dx-timeview {
   &.dx-state-disabled,
   .dx-state-disabled {
@@ -17,9 +22,9 @@
 }
 
 .dx-timeview-field .dx-numberbox {
-  width: 70px;
+  width: $timeview-numberbox-width;
 
   &.dx-numberbox-spin-touch-friendly {
-    width: 110px;
+    width: $timeview-numberbox-spin-touch-friendly-width-2;
   }
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/toolbar/_index.scss b/packages/devextreme-scss/scss/widgets/base/toolbar/_index.scss
index dc986ce20148..8e7f47e58c06 100644
--- a/packages/devextreme-scss/scss/widgets/base/toolbar/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/toolbar/_index.scss
@@ -2,6 +2,12 @@
 
 // adduse
 
+
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$toolbar-item-padding: 0 5px !default;
+$toolbar-group-margin: 0 10px !default;
+$toolbar-texteditor-width: 150px !default;
+
 .dx-toolbar {
   width: 100%;
 
@@ -51,7 +57,7 @@
 }
 
 .dx-toolbar-item {
-  padding: 0 5px;
+  padding: $toolbar-item-padding;
 
   @include dx-toolbar-item();
 }
@@ -62,7 +68,7 @@
 
 .dx-toolbar-group {
   float: left;
-  margin: 0 10px;
+  margin: $toolbar-group-margin;
 }
 
 .dx-toolbar-before,
@@ -96,7 +102,7 @@
 
   // NOTE: Prevent croping of italic text in label (T126187)
   margin: 0 -5px;
-  padding: 0 5px;
+  padding: $toolbar-item-padding;
 }
 
 .dx-toolbar-center {
@@ -212,7 +218,7 @@
 .dx-toolbar-item-content {
   > .dx-texteditor,
   &.dx-texteditor {
-    width: 150px;
+    width: $toolbar-texteditor-width;
   }
 }
 
diff --git a/packages/devextreme-scss/scss/widgets/base/treeList/_expandable.scss b/packages/devextreme-scss/scss/widgets/base/treeList/_expandable.scss
index 70285b993711..d0200902760b 100644
--- a/packages/devextreme-scss/scss/widgets/base/treeList/_expandable.scss
+++ b/packages/devextreme-scss/scss/widgets/base/treeList/_expandable.scss
@@ -1,5 +1,8 @@
 @use "./variables" as *;
 @use "../icon_fonts" as *;
+@use "sass:meta";
+
+$node-line-height: null !default;
 
 .dx-treelist-headers {
   .dx-header-row {
@@ -10,7 +13,7 @@
           float: left;
           width: $treelist-expand-checkbox-size;
           height: 1lh;
-          margin: 0 $treelist-expand-checkbox-right-gap 0 ($treelist-expand-icon-size + $treelist-expand-icon-right-gap);
+          margin: 0 $treelist-expand-checkbox-right-gap 0 if(meta.type-of($treelist-expand-icon-size) == number and meta.type-of($treelist-expand-icon-right-gap) == number, ($treelist-expand-icon-size + $treelist-expand-icon-right-gap), calc(#{$treelist-expand-icon-size} + #{$treelist-expand-icon-right-gap}));
 
           .dx-select-checkbox {
             display: block;
@@ -40,7 +43,7 @@
 
         .dx-treelist-empty-space {
           width: $treelist-expand-icon-size;
-          height: 1px;
+          height: $node-line-height;
           user-select: none;
 
           &--last {
@@ -81,7 +84,7 @@
         .dx-treelist-select-checkbox-container {
           position: relative;
           width: $treelist-expand-checkbox-size;
-          height: 1px;
+          height: $node-line-height;
           margin: 0 $treelist-expand-checkbox-right-gap 0 0;
 
           .dx-select-checkbox {
@@ -113,7 +116,7 @@
         &.dx-treelist-select-all {
           .dx-treelist-select-checkbox-container {
             float: right;
-            margin: 0 ($treelist-expand-icon-size + $treelist-expand-icon-right-gap) 0 $treelist-expand-checkbox-right-gap;
+            margin: 0 if(meta.type-of($treelist-expand-icon-size) == number and meta.type-of($treelist-expand-icon-right-gap) == number, ($treelist-expand-icon-size + $treelist-expand-icon-right-gap), calc(#{$treelist-expand-icon-size} + #{$treelist-expand-icon-right-gap})) 0 $treelist-expand-checkbox-right-gap;
           }
         }
       }
diff --git a/packages/devextreme-scss/scss/widgets/base/treeList/_index.scss b/packages/devextreme-scss/scss/widgets/base/treeList/_index.scss
index 045d1d1fc5d0..3d97ab9ce9a7 100644
--- a/packages/devextreme-scss/scss/widgets/base/treeList/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/treeList/_index.scss
@@ -12,16 +12,26 @@ $header-filter-color-empty: null !default;
 $base-focus-color: null !default;
 
 @use "sass:color";
+@use "sass:meta";
 @use "../mixins" as *;
 @use "../icon_fonts" as *;
 @use "./common" as *;
-@use "./expandable" as *;
+$treelist-expandable-node-line-height: 1px !default;
+
+@use "./expandable" as * with (
+  $node-line-height: $treelist-expandable-node-line-height,
+);
+$treelist-sticky-column-border: 2px solid !default;
+$treelist-cell-focus-outline: 2px solid !default;
+
 @use 'layout/cell' with (
   $treelist-border: $datagrid-border,
   $treelist-border-color: $datagrid-border-color,
   $treelist-base-background-color: $datagrid-base-background-color,
   $treelist-row-error-color: $datagrid-row-error-color,
   $treelist-focused-border-color: $datagrid-focused-border-color,
+  $treelist-sticky-column-border: $treelist-sticky-column-border,
+  $treelist-cell-focus-outline: $treelist-cell-focus-outline,
 );
 
 $treelist-border: $datagrid-border;
@@ -34,6 +44,15 @@ $treelist-focused-border-color: $datagrid-focused-border-color;
 $treelist-text-stub-background-image-path: $datagrid-text-stub-background-image-path;
 $treelist-row-error-color: $datagrid-row-error-color;
 
+
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$treelist-header-filter-outline: 2px solid !default;
+$treelist-header-filter-outline-offset: 2px !default;
+$treelist-button-margin-left: 10px !default;
+$treelist-button-margin-top: 10px !default;
+$treelist-error-message-margin-bottom: 20px !default;
+$treelist-button-margin-right: 10px !default;
+
 .dx-treelist-borders {
   > .dx-treelist-headers,
   > .dx-treelist-rowsview,
@@ -127,9 +146,9 @@ $treelist-row-error-color: $datagrid-row-error-color;
 
     &.dx-state-focused .dx-header-row {
       td .dx-header-filter:focus {
-        outline: 2px solid;
+        outline: $treelist-header-filter-outline;
         outline-color: $treelist-focused-border-color;
-        outline-offset: 2px;
+        outline-offset: $treelist-header-filter-outline-offset;
       }
     }
   }
@@ -161,9 +180,9 @@ $treelist-row-error-color: $datagrid-row-error-color;
 
   .dx-treelist-rowsview.dx-state-focused .dx-data-row {
     & > td.dx-command-edit > a.dx-link:focus {
-      outline: 2px solid;
+      outline: $treelist-header-filter-outline;
       outline-color: $datagrid-focused-border-color;
-      outline-offset: 2px;
+      outline-offset: $treelist-header-filter-outline-offset;
     }
 
     &.dx-row-focused > td.dx-command-edit > a.dx-link:focus {
@@ -218,7 +237,7 @@ $treelist-row-error-color: $datagrid-row-error-color;
     .dx-icon-filter:focus,
     .dx-treelist-filter-panel-text:focus,
     .dx-treelist-filter-panel-clear-filter:focus {
-      outline: 2px solid;
+      outline: $treelist-header-filter-outline;
       outline-color: $treelist-focused-border-color;
     }
   }
@@ -228,8 +247,8 @@ $treelist-row-error-color: $datagrid-row-error-color;
   float: right;
 
   .dx-button {
-    margin-left: 10px;
-    margin-top: 10px;
+    margin-left: $treelist-button-margin-left;
+    margin-top: $treelist-button-margin-top;
   }
 }
 
@@ -250,7 +269,7 @@ $treelist-row-error-color: $datagrid-row-error-color;
   @include dx-treelist-error-message();
 
   color: $treelist-row-error-color;
-  margin-bottom: 20px;
+  margin-bottom: $treelist-error-message-margin-bottom;
 }
 
 .dx-rtl {
@@ -273,7 +292,7 @@ $treelist-row-error-color: $datagrid-row-error-color;
 
     .dx-button {
       margin-left: 0;
-      margin-right: 10px;
+      margin-right: $treelist-button-margin-right;
     }
   }
 }
@@ -284,15 +303,15 @@ $treelist-row-error-color: $datagrid-row-error-color;
 
 @keyframes dx-treelist-highlight-change {
   from {
-    background-color: color.change($treelist-base-color, $alpha: 0.08);
+    background-color: if(meta.type-of($treelist-base-color) == color, color.change($treelist-base-color, $alpha: 0.08), rgb(from #{$treelist-base-color} r g b / 0.08));
   }
 
   50% {
-    background-color: color.change($treelist-base-color, $alpha: 0.08);
+    background-color: if(meta.type-of($treelist-base-color) == color, color.change($treelist-base-color, $alpha: 0.08), rgb(from #{$treelist-base-color} r g b / 0.08));
   }
 }
 
 .dx-command-ai-header-button .dx-button.dx-state-focused {
-  outline: 2px solid;
+  outline: $treelist-header-filter-outline;
   outline-color: $treelist-focused-border-color;
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/treeList/layout/cell.scss b/packages/devextreme-scss/scss/widgets/base/treeList/layout/cell.scss
index 6d10c854c402..8550e2160286 100644
--- a/packages/devextreme-scss/scss/widgets/base/treeList/layout/cell.scss
+++ b/packages/devextreme-scss/scss/widgets/base/treeList/layout/cell.scss
@@ -5,6 +5,8 @@ $treelist-border-color: null !default;
 $treelist-base-background-color: null !default;
 $treelist-row-error-color: null !default;
 $treelist-focused-border-color: null !default;
+$treelist-sticky-column-border: null !default;
+$treelist-cell-focus-outline: null !default;
 
 // #region position & z-index
 
@@ -38,9 +40,9 @@ $treelist-focused-border-color: null !default;
 .dx-treelist-container .dx-datagrid-rowsview .dx-virtual-row td.dx-pointer-events-none,
 .dx-treelist-container .dx-datagrid-rowsview .dx-header-row td.dx-pointer-events-none,
 .dx-treelist-container .dx-treelist-headers .dx-row td.dx-pointer-events-none {
-  border-left: 2px solid;
+  border-left: $treelist-sticky-column-border;
   border-left-color: $treelist-border-color;
-  border-right: 2px solid;
+  border-right: $treelist-sticky-column-border;
   border-right-color: $treelist-border-color;
 }
 
@@ -70,13 +72,13 @@ $treelist-focused-border-color: null !default;
 
 // (0,5,1)
 .dx-treelist .dx-treelist-sticky-columns .dx-treelist-table .dx-row td.dx-treelist-sticky-column-border-right {
-  border-right: 2px solid;
+  border-right: $treelist-sticky-column-border;
   border-right-color: $treelist-border-color;
 }
 
 // (0,5,1)
 .dx-treelist .dx-treelist-sticky-columns .dx-treelist-table .dx-row td.dx-treelist-sticky-column-border-left {
-  border-left: 2px solid;
+  border-left: $treelist-sticky-column-border;
   border-left-color: $treelist-border-color;
 }
 
@@ -92,7 +94,7 @@ $treelist-focused-border-color: null !default;
 
 // (0,7,1)
 .dx-treelist:not(.dx-rtl) > .dx-gridbase-container .dx-treelist-table .dx-row > td.dx-treelist-first-cell.dx-treelist-sticky-column-border-left {
-  border-left: 2px solid;
+  border-left: $treelist-sticky-column-border;
   border-left-color: $treelist-border-color;
 }
 
@@ -123,9 +125,9 @@ $treelist-focused-border-color: null !default;
 .dx-rtl .dx-treelist-container .dx-datagrid-rowsview .dx-virtual-row td.dx-pointer-events-none,
 .dx-rtl .dx-treelist-container .dx-datagrid-rowsview .dx-header-row td.dx-pointer-events-none,
 .dx-rtl .dx-treelist-container .dx-treelist-headers .dx-row td.dx-pointer-events-none {
-  border-left: 2px solid;
+  border-left: $treelist-sticky-column-border;
   border-left-color: $treelist-border-color;
-  border-right: 2px solid;
+  border-right: $treelist-sticky-column-border;
   border-right-color: $treelist-border-color;
 }
 
@@ -172,13 +174,13 @@ $treelist-focused-border-color: null !default;
 
 // (0,7,1)
 .dx-rtl > .dx-gridbase-container .dx-treelist-content .dx-treelist-table .dx-row > td.dx-treelist-first-cell.dx-treelist-sticky-column-border-left {
-  border-left: 2px solid;
+  border-left: $treelist-sticky-column-border;
   border-left-color: $treelist-border-color;
 }
 
 // (0,8,0)
 .dx-rtl.dx-treelist .dx-treelist-sticky-columns .dx-treelist-content .dx-treelist-table .dx-row .dx-treelist-column-no-border.dx-treelist-sticky-column-border-left {
-  border-left: 2px solid;
+  border-left: $treelist-sticky-column-border;
   border-left-color: $treelist-border-color;
 }
 
@@ -222,7 +224,7 @@ $treelist-focused-border-color: null !default;
 
 // (0,5,1)
 .dx-treelist-container .dx-treelist-headers.dx-state-focused .dx-header-row td:focus {
-  outline: 2px solid;
+  outline: $treelist-cell-focus-outline;
   outline-color: $treelist-focused-border-color;
   outline-offset: -2px;
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/treeView/_common.scss b/packages/devextreme-scss/scss/widgets/base/treeView/_common.scss
index 9efe8e84d511..8e20ccab66b5 100644
--- a/packages/devextreme-scss/scss/widgets/base/treeView/_common.scss
+++ b/packages/devextreme-scss/scss/widgets/base/treeView/_common.scss
@@ -1,3 +1,5 @@
+$treeview-disabled-opacity: null !default;
+
 @use "../mixins" as *;
 @use "../../base/icon_fonts" as *;
 
@@ -100,7 +102,7 @@ $treeview-searchbox-margin-bottom: 5px;
   }
 
   &.dx-state-disabled {
-    opacity: 0.5;
+    opacity: $treeview-disabled-opacity;
   }
 }
 
diff --git a/packages/devextreme-scss/scss/widgets/base/treeView/_index.scss b/packages/devextreme-scss/scss/widgets/base/treeView/_index.scss
index 4c5e1c10eec3..089aa6638d9b 100644
--- a/packages/devextreme-scss/scss/widgets/base/treeView/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/treeView/_index.scss
@@ -1,7 +1,17 @@
+$treeview-disabled-opacity: 0.5 !default;
+
 @use 'sass:math';
-@use "./common";
+@use 'sass:meta';
+@use "./common" with (
+  $treeview-disabled-opacity: $treeview-disabled-opacity,
+);
 @use "../../base/icon_fonts" as *;
 
+
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$treeview-select-all-item-border-bottom: 1px solid !default;
+$treeview-border-visible-border: 1px solid !default;
+
 .dx-treeview-custom-expand-icon,
 .dx-treeview-custom-collapse-icon {
   cursor: pointer;
@@ -64,7 +74,7 @@
   }
 
   .dx-treeview-node {
-    padding-inline-start: math.div($node-padding, 2);
+    padding-inline-start: if(meta.type-of($node-padding) == number, math.div($node-padding, 2), calc(#{$node-padding} / 2));
   }
 }
 
@@ -83,11 +93,11 @@
   }
 
   .dx-treeview-with-search > .dx-scrollable {
-    height: calc(100% - #{math.round($search-editor-height + $searchbox-margin-bottom)});
+    height: calc(100% - #{if(meta.type-of($search-editor-height) == number and meta.type-of($searchbox-margin-bottom) == number, math.round($search-editor-height + $searchbox-margin-bottom), calc(#{$search-editor-height} + #{$searchbox-margin-bottom}))});
   }
 
   .dx-treeview-select-all-item {
-    border-bottom: 1px solid;
+    border-bottom: $treeview-select-all-item-border-bottom;
     border-bottom-color: $border-color;
     padding: $select-all-item-padding;
 
@@ -107,7 +117,7 @@
   }
 
   .dx-treeview-border-visible {
-    border: 1px solid;
+    border: $treeview-border-visible-border;
     border-color: $border-color;
 
     .dx-treeview-select-all-item {
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/_colors.scss
new file mode 100644
index 000000000000..c4d69e770f14
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/_colors.scss
@@ -0,0 +1,46 @@
+@forward "./variables";
+@use "./variables" as *;
+@use "../../_design-system/variables/ds" as ds;
+
+$color: null !default;
+$mode: null !default;
+
+$fluent-color-accent-modificator: null !default;
+$fluent-color-theme-modificator: null !default;
+
+
+@if $color == "blue" {
+  $fluent-color-accent-modificator: "blue" !default;
+}
+
+@if $mode == "light" {
+  $fluent-color-theme-modificator: "light" !default;
+}
+
+@if $mode == "dark" {
+  $fluent-color-theme-modificator: "dark" !default;
+}
+
+/*
+ * Public --dx-* custom properties, chained onto the design-token roles (a custom property may
+ * reference another custom property). Mode/accent branching lives in the token definitions.
+ * --dx-color-shadow carries alpha (the DS ships no solid-black token; the shadow roles are
+ * rgba over black) — unlike the legacy solid #000 of the other themes.
+ */
+:root {
+  --dx-component-color-bg: #{ds.$color-surface-neutral-default-rest};
+  --dx-color-main-bg: #{ds.$color-surface-neutral-subdued-rest};
+  --dx-color-primary: #{ds.$color-content-primary-default-rest};
+
+  // Content-role, not surface: consumers use these as text/icon colors (fluent's semantic $base-*), and the two roles diverge in dark mode
+  --dx-color-danger: #{ds.$color-content-danger-default-rest};
+  --dx-color-success: #{ds.$color-content-success-default-rest};
+  --dx-color-warning: #{ds.$color-content-warning-default-rest};
+  --dx-color-border: #{ds.$color-border-neutral-default-rest};
+  --dx-color-text: #{ds.$color-content-neutral-default-rest};
+  --dx-color-icon: #{ds.$color-content-neutral-subdued-rest};
+  --dx-color-spin-icon: #{ds.$color-content-neutral-subdued-rest};
+  --dx-color-link: #{ds.$color-content-primary-default-rest};
+  --dx-color-shadow: #{ds.$color-shadow-key};
+  --dx-color-separator: #{ds.$color-border-neutral-subdued-rest};
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/_design-system.scss b/packages/devextreme-scss/scss/widgets/fluent-next/_design-system.scss
new file mode 100644
index 000000000000..ec52b08c39c1
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/_design-system.scss
@@ -0,0 +1,19 @@
+@use "sass:meta";
+@use "colors";
+
+$accent: colors.$color;
+
+/*
+ * Tier order mirrors the design-tokens package: base scales and palettes, then semantic roles,
+ * then components. The component size tokens (fluent components sizes) are intentionally NOT
+ * emitted: fluent-next maps sizes onto the base scales (spacing, font-size, border-radius,
+ * border-width), so the component layout custom properties would never be referenced by any
+ * widget. Only the component color theme is consumed.
+ */
+@include meta.load-css("../../_design-system/base");
+@include meta.load-css("../../_design-system/fluent/base");
+@include meta.load-css("../../_design-system/fluent/accents/#{$accent}");
+@include meta.load-css("../../_design-system/fluent/semantic/typography");
+@include meta.load-css("../../_design-system/fluent/semantic/box-shadow");
+@include meta.load-css("../../_design-system/fluent/semantic/colors/#{colors.$mode}");
+@include meta.load-css("../../_design-system/fluent/components/theme");
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/_index.scss
new file mode 100644
index 000000000000..c104bcdb88ef
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/_index.scss
@@ -0,0 +1,65 @@
+// public widgets
+@use "./box";
+@use "./chat";
+@use "./responsiveBox";
+@use "./button";
+@use "./buttonGroup";
+@use "./scrollView";
+@use "./stepper";
+@use "./splitter";
+@use "./checkBox";
+@use "./switch";
+@use "./tabs";
+@use "./validation";
+@use "./textBox";
+@use "./dropDownBox";
+@use "./informer";
+@use "./list";
+@use "./textArea";
+@use "./numberBox";
+@use "./calendar";
+@use "./dateBox";
+@use "./dateRangeBox";
+@use "./autocomplete";
+@use "./loadIndicator";
+@use "./treeView";
+@use "./menu";
+@use "./selectBox";
+@use "./toolbar";
+@use "./popup";
+@use "./dropDownButton";
+@use "./actionSheet";
+@use "./tileView";
+@use "./toast";
+@use "./popover";
+@use "./progressBar";
+@use "./tooltip";
+@use "./slider";
+@use "./rangeSlider";
+@use "./gallery";
+@use "./lookup";
+@use "./loadPanel";
+@use "./tagBox";
+@use "./radioGroup";
+@use "./accordion";
+@use "./colorBox";
+@use "./dataGrid";
+@use "./treeList";
+@use "./pivotGrid";
+@use "./contextMenu";
+@use "./multiView";
+@use "./tabPanel";
+@use "./fileUploader";
+@use "./scheduler";
+@use "./form";
+@use "./filterBuilder";
+@use "./drawer";
+@use "./htmlEditor";
+@use "./speechToText";
+@use "./speedDialAction";
+@use "./fileManager";
+@use "./diagram";
+@use "./gantt";
+@use "./sortable";
+@use "./map";
+@use "./cardView";
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/_sizes.scss
new file mode 100644
index 000000000000..0f6bfad364f4
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/_sizes.scss
@@ -0,0 +1,47 @@
+$size: null !default;
+
+@use "colors" as *;
+@use "../../_design-system/variables/ds" as ds;
+
+$fluent-size-postfix: null !default;
+$global-font-size: null !default;
+$global-inline-widget-height: null !default;
+$global-icon-size: null !default;
+$global-border-radius: null !default;
+
+
+@if $size == "default" {
+  $fluent-size-postfix: "" !default;
+
+  // Font sizes
+  $global-font-size: ds.$font-size-base-md !default;
+
+  // Base sizes
+  $global-inline-widget-height: ds.$spacing-320 !default;
+  $global-icon-size: ds.$spacing-200 !default;
+  $global-border-radius: ds.$border-radius-40 !default;
+}
+
+@if $size == "compact" {
+  $fluent-size-postfix: ".compact" !default;
+
+  // Font sizes
+  $global-font-size: ds.$font-size-base-sm !default;
+
+  // Base sizes
+  $global-inline-widget-height: ds.$spacing-240 !default;
+  $global-icon-size: ds.$spacing-160 !default;
+  $global-border-radius: ds.$border-radius-40 !default;
+}
+
+// Base bordered inline widgets sizes
+$global-border-width: ds.$border-width-10 !default;
+
+
+:root {
+  --dx-component-height: #{$global-inline-widget-height};
+  --dx-font-size: #{$global-font-size};
+  --dx-border-width: #{$global-border-width};
+  --dx-border-radius: #{$global-border-radius};
+  --dx-font-size-icon: #{$global-icon-size};
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/_variables.scss b/packages/devextreme-scss/scss/widgets/fluent-next/_variables.scss
new file mode 100644
index 000000000000..d94d40a78c27
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/_variables.scss
@@ -0,0 +1 @@
+// set the variables for fluent theme
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/accordion/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/accordion/_colors.scss
new file mode 100644
index 000000000000..fa8a8d78d1cf
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/accordion/_colors.scss
@@ -0,0 +1,14 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$accordion-content-rest: ds.$color-content-neutral-default-rest !default;
+
+$accordion-title-content-rest: inherit !default;
+
+$accordion-bg-rest: transparent !default;
+$accordion-title-content-active: $accordion-content-rest !default;
+$accordion-title-bg-hovered: ds.$color-surface-neutral-default-hovered !default;
+$accordion-title-bg-active: ds.$color-surface-neutral-default-hovered !default;
+$accordion-content-disabled: ds.$color-content-neutral-default-disabled !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/accordion/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/accordion/_index.scss
new file mode 100644
index 000000000000..ea372702047d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/accordion/_index.scss
@@ -0,0 +1,83 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../../base/accordion";
+
+// adduse
+
+.dx-accordion {
+  background-color: $accordion-bg-rest;
+  color: $accordion-content-rest;
+}
+
+.dx-accordion-item {
+  transition: margin 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: margin, height;
+
+  &.dx-state-hover {
+    & > .dx-accordion-item-title {
+      background-color: $accordion-title-bg-hovered;
+    }
+  }
+
+  &.dx-state-active,
+  &.dx-state-focused {
+    > .dx-accordion-item-title {
+      color: $accordion-title-content-active;
+      background-color: $accordion-title-bg-active;
+    }
+  }
+}
+
+.dx-accordion-item-opened {
+  margin-block: $accordion-item-opened-margin;
+
+  & > .dx-accordion-item-title {
+    &::before {
+      content: "\f014";
+    }
+  }
+}
+
+.dx-accordion-item-title {
+  border-radius: $accordion-item-border-radius;
+  min-height: $accordion-title-height;
+  padding: $accordion-title-padding-block $accordion-title-padding-inline;
+
+  &::before {
+    content: "\f016";
+    font-weight: normal;
+    font-size: $accordion-title-icon-size;
+    font-family: DXIcons; // stylelint-disable-line font-family-no-missing-generic-family-keyword, font-family-name-quotes
+    line-height: 100%;
+    margin-inline-end: $accordion-title-icon-margin;
+  }
+
+  .dx-icon {
+    @include dx-icon-sizing($accordion-title-icon-size);
+  }
+}
+
+.dx-accordion-item-title-caption {
+  color: $accordion-title-content-rest;
+  font-size: $accordion-title-font-size;
+  font-weight: $accordion-title-font-weight;
+
+  .dx-icon {
+    @include dx-icon-margin($accordion-title-icon-margin);
+  }
+}
+
+.dx-state-disabled {
+  &.dx-accordion {
+    opacity: 1;
+    color: $accordion-content-disabled;
+  }
+}
+
+.dx-accordion-item-body {
+  padding: $accordion-body-padding;
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/accordion/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/accordion/_sizes.scss
new file mode 100644
index 000000000000..f709caccde97
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/accordion/_sizes.scss
@@ -0,0 +1,39 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+// Not a colour: a font size that used to sit in _colors.scss (NAMING.md, O7)
+$accordion-title-font-size: $global-font-size !default;
+
+$accordion-title-padding-inline: null !default;
+$accordion-title-padding-block: ds.$spacing-60 !default;
+$accordion-body-padding: null !default;
+$accordion-title-height: null !default;
+
+$accordion-title-icon-margin: null !default;
+$accordion-title-icon-size: null !default;
+$accordion-item-border-radius: $global-border-radius !default;
+
+$accordion-item-opened-margin: null !default;
+
+@if $size == "default" {
+  $accordion-title-padding-inline: ds.$spacing-120 !default;
+  $accordion-body-padding: ds.$spacing-120 !default;
+  $accordion-title-height: ds.$spacing-440 !default;
+  $accordion-title-icon-margin: ds.$spacing-80 !default;
+  $accordion-title-icon-size: ds.$spacing-200 !default;
+  $accordion-item-opened-margin: 0 !default;
+}
+
+@else if $size == "compact" {
+  $accordion-title-padding-inline: ds.$spacing-80 !default;
+  $accordion-body-padding: ds.$spacing-80 !default;
+  $accordion-title-height: ds.$spacing-320 !default;
+  $accordion-title-icon-margin: ds.$spacing-60 !default;
+  $accordion-title-icon-size: ds.$spacing-160 !default;
+  $accordion-item-opened-margin: 0 !default;
+}
+
+// Values hoisted from style-file literals (tokenized)
+$accordion-title-font-weight: ds.$font-weight-500 !default; // dx-no-semantic-role: 500 is off the weight-role scale (400/600/700)
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/actionSheet/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/actionSheet/_colors.scss
new file mode 100644
index 000000000000..89c53a85429e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/actionSheet/_colors.scss
@@ -0,0 +1,6 @@
+@use "sass:color";
+@use "../sizes" as *;
+@use "../colors" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/actionSheet/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/actionSheet/_index.scss
new file mode 100644
index 000000000000..ddac9c6f09cc
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/actionSheet/_index.scss
@@ -0,0 +1,23 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/actionSheet";
+
+// adduse
+
+
+.dx-actionsheet-container {
+  .dx-actionsheet-item:not(:last-child) {
+    margin: $action-sheet-item-margin;
+  }
+
+  .dx-button {
+    margin: 0;
+  }
+}
+
+.dx-button.dx-actionsheet-cancel {
+  margin: 0;
+  margin-top: $action-sheet-item-margin-block-end;
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/actionSheet/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/actionSheet/_sizes.scss
new file mode 100644
index 000000000000..7fc443ba30d9
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/actionSheet/_sizes.scss
@@ -0,0 +1,7 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$action-sheet-item-margin-block-end: ds.$spacing-120;
+$action-sheet-item-margin: 0 0 $action-sheet-item-margin-block-end 0 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/autocomplete/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/autocomplete/_colors.scss
new file mode 100644
index 000000000000..89c53a85429e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/autocomplete/_colors.scss
@@ -0,0 +1,6 @@
+@use "sass:color";
+@use "../sizes" as *;
+@use "../colors" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/autocomplete/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/autocomplete/_index.scss
new file mode 100644
index 000000000000..4ff4107dcc0d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/autocomplete/_index.scss
@@ -0,0 +1,29 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../common/sizes" as *;
+
+// adduse
+@use "../dropDownList";
+
+@mixin autocomplete-editor-container-offset() {
+  inset-inline-end: $invalid-badge-padding-inline;
+}
+
+.dx-autocomplete.dx-invalid,
+.dx-autocomplete.dx-valid {
+  .dx-texteditor-buttons-container {
+    &::after {
+      @include autocomplete-editor-container-offset();
+    }
+  }
+}
+
+.dx-autocomplete.dx-validation-pending {
+  .dx-texteditor-buttons-container {
+    .dx-pending-indicator {
+      @include autocomplete-editor-container-offset();
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/autocomplete/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/autocomplete/_sizes.scss
new file mode 100644
index 000000000000..43b104010f9e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/autocomplete/_sizes.scss
@@ -0,0 +1,4 @@
+@use "../sizes" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/badge/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/badge/_colors.scss
new file mode 100644
index 000000000000..746506d859a2
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/badge/_colors.scss
@@ -0,0 +1,10 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$badge-content-rest: ds.$color-content-neutral-default-static-dark-rest !default;
+
+$badge-bg-rest: ds.$color-surface-primary-default-rest !default;
+
+$badge-content-disabled: ds.$color-content-neutral-subdued-disabled !default;
+$badge-bg-disabled: ds.$color-surface-neutral-subdued-disabled !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/badge/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/badge/_index.scss
new file mode 100644
index 000000000000..d21ecdbb51b4
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/badge/_index.scss
@@ -0,0 +1,21 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/badge";
+
+// adduse
+
+.dx-badge {
+  background-color: $badge-bg-rest;
+  color: $badge-content-rest;
+  font-size: $badge-font-size;
+  padding: $badge-padding;
+  border-radius: $badge-border-radius;
+  line-height: $badge-line-height;
+
+  .dx-state-disabled & {
+    color: $badge-content-disabled;
+    background-color: $badge-bg-disabled;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/badge/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/badge/_sizes.scss
new file mode 100644
index 000000000000..991bb1bb8461
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/badge/_sizes.scss
@@ -0,0 +1,23 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$badge-padding: null !default;
+$badge-font-size: null !default;
+$badge-line-height: null !default;
+
+@if $size == "default" {
+  $badge-padding: 0 ds.$spacing-60 !default;
+  $badge-font-size: ds.$font-size-caption-md !default;
+  $badge-line-height: ds.$line-height-caption-lg !default;
+}
+
+@else if $size == "compact" {
+  $badge-padding: 0 ds.$spacing-60 !default;
+  $badge-font-size: ds.$font-size-caption-sm !default;
+  $badge-line-height: ds.$line-height-caption-md !default;
+}
+
+// Values hoisted from style-file literals (tokenized)
+$badge-border-radius: ds.$border-radius-full !default; // pill idiom (999em -> radius-full, visually identical)
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/box/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/box/_colors.scss
new file mode 100644
index 000000000000..89c53a85429e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/box/_colors.scss
@@ -0,0 +1,6 @@
+@use "sass:color";
+@use "../sizes" as *;
+@use "../colors" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/box/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/box/_index.scss
new file mode 100644
index 000000000000..62116fbd8c11
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/box/_index.scss
@@ -0,0 +1,13 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/box" with (
+  $box-item-content-font-size: $box-item-content-font-size,
+);
+
+// adduse
+
+.dx-box-item-content {
+  font-size: $global-font-size;
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/box/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/box/_sizes.scss
new file mode 100644
index 000000000000..5ebd8c66345a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/box/_sizes.scss
@@ -0,0 +1,8 @@
+@use "../../../_design-system/variables/ds" as ds;
+@use "../sizes" as *;
+
+// adduse
+
+
+// Base-layer values injected with design tokens (wave B1)
+$box-item-content-font-size: ds.$font-size-base-md !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/button/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/button/_colors.scss
new file mode 100644
index 000000000000..517e8548bb9b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/button/_colors.scss
@@ -0,0 +1,167 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$button-contained-bg-disabled: ds.$color-surface-neutral-default-disabled !default;
+
+/*
+ * The outlined mode paints its disabled BORDER with the same value. Kept as a separate,
+ * role-honest variable rather than reusing the bg one, so design can move one without the other
+ * (same split as checkBox, see DIVERGENCES.md).
+ */
+$button-outlined-border-disabled: $button-contained-bg-disabled !default;
+$button-normal-shadow-rest: ds.$color-shadow-key !default;
+
+$button-normal-contained-content-rest: ds.$color-content-neutral-default-rest !default;
+
+$button-normal-contained-bg-rest: ds.$color-surface-neutral-alpha-rest !default;
+
+$button-normal-outlined-bg-rest: transparent !default;
+
+$button-normal-text-bg-rest: transparent !default;
+
+$button-normal-contained-content-selected: ds.$color-content-neutral-default-rest !default;
+
+$button-normal-contained-bg-hovered: ds.$color-surface-neutral-alpha-hovered !default;
+
+$button-normal-contained-bg-focused: ds.$color-surface-neutral-alpha-hovered !default;
+
+$button-normal-contained-bg-active: ds.$color-surface-neutral-alpha-active !default;
+
+$button-normal-contained-bg-selected: ds.$color-surface-neutral-alpha-selected !default;
+
+$button-default-contained-content-rest: ds.$color-content-neutral-default-static-dark-rest !default;
+
+$button-default-contained-bg-rest: ds.$color-surface-primary-default-rest !default;
+
+$button-default-contained-content-selected: ds.$color-content-neutral-default-static-dark-rest !default;
+
+$button-default-contained-bg-hovered: ds.$color-surface-primary-default-hovered !default;
+
+$button-default-contained-bg-focused: ds.$color-surface-primary-default-hovered !default;
+
+$button-default-contained-bg-active: ds.$color-surface-primary-default-active !default;
+
+$button-default-contained-bg-selected: ds.$color-surface-primary-default-selected !default;
+
+$button-default-outlined-content-rest: ds.$color-content-primary-default-rest !default;
+$button-default-outlined-border-rest: ds.$color-border-primary-default-rest !default;
+
+$button-default-outlined-bg-rest: transparent !default;
+$button-default-outlined-bg-hovered: ds.$color-surface-primary-deep-hovered !default;
+$button-default-outlined-bg-focused: ds.$color-surface-primary-deep-hovered !default;
+$button-default-outlined-bg-active: ds.$color-surface-primary-deep-active !default;
+$button-default-outlined-bg-selected: ds.$color-surface-primary-deep-selected !default;
+
+$button-default-text-content-rest: ds.$color-content-primary-default-rest !default;
+
+$button-danger-contained-content-rest: ds.$color-content-neutral-default-static-dark-rest !default;
+
+$button-danger-contained-bg-rest: ds.$color-surface-danger-default-rest !default;
+
+$button-danger-contained-content-selected: ds.$color-content-neutral-default-static-dark-rest !default;
+
+$button-danger-contained-bg-hovered: ds.$color-surface-danger-default-hovered !default;
+
+$button-danger-contained-bg-focused: ds.$color-surface-danger-default-hovered !default;
+
+$button-danger-contained-bg-active: ds.$color-surface-danger-default-active !default;
+
+$button-danger-contained-bg-selected: ds.$color-surface-danger-default-selected !default;
+
+$button-danger-outlined-content-rest: ds.$color-content-danger-default-rest !default;
+$button-danger-outlined-border-rest: ds.$color-border-danger-default-rest !default;
+$button-danger-outlined-content-hovered: ds.$color-content-danger-default-hovered !default;
+$button-danger-outlined-content-active: ds.$color-content-danger-default-active !default;
+$button-danger-outlined-content-selected: ds.$color-content-danger-default-hovered !default;
+$button-danger-outlined-bg-rest: transparent !default;
+$button-danger-outlined-bg-hovered: ds.$color-surface-danger-deep-hovered !default;
+$button-danger-outlined-bg-focused: ds.$color-surface-danger-deep-hovered !default;
+$button-danger-outlined-bg-active: ds.$color-surface-danger-deep-active !default;
+$button-danger-outlined-bg-selected: ds.$color-surface-danger-deep-selected !default;
+
+$button-success-contained-content-rest: ds.$color-content-neutral-default-static-dark-rest !default;
+
+$button-success-contained-bg-rest: ds.$color-surface-success-default-rest !default;
+
+$button-success-contained-content-selected: ds.$color-content-neutral-default-static-dark-rest !default;
+
+$button-success-contained-bg-hovered: ds.$color-surface-success-default-hovered !default;
+
+$button-success-contained-bg-focused: ds.$color-surface-success-default-hovered !default;
+
+$button-success-contained-bg-active: ds.$color-surface-success-default-active !default;
+
+$button-success-contained-bg-selected: ds.$color-surface-success-default-selected !default;
+
+$button-success-outlined-content-rest: ds.$color-content-success-default-rest !default;
+$button-success-outlined-border-rest: ds.$color-border-success-default-rest !default;
+$button-success-outlined-content-hovered: ds.$color-content-success-default-hovered !default;
+$button-success-outlined-content-active: ds.$color-content-success-default-active !default;
+$button-success-outlined-content-selected: ds.$color-content-success-default-hovered !default;
+$button-success-outlined-bg-rest: transparent !default;
+$button-success-outlined-bg-hovered: ds.$color-surface-success-deep-hovered !default;
+$button-success-outlined-bg-focused: ds.$color-surface-success-deep-hovered !default;
+$button-success-outlined-bg-active: ds.$color-surface-success-deep-active !default;
+$button-success-outlined-bg-selected: ds.$color-surface-success-deep-selected !default;
+
+$button-default-contained-icon-rest: $button-default-contained-content-rest !default;
+$button-normal-contained-icon-rest: $button-normal-contained-content-rest !default;
+$button-danger-contained-icon-rest: $button-danger-contained-content-rest !default;
+$button-success-contained-icon-rest: $button-success-contained-content-rest !default;
+
+$button-content-disabled: ds.$color-content-neutral-default-disabled !default;
+
+$button-normal-outlined-bg-hovered: $button-normal-contained-bg-hovered !default;
+$button-normal-outlined-bg-focused: $button-normal-contained-bg-focused !default;
+$button-normal-outlined-bg-active: $button-normal-contained-bg-active !default;
+$button-normal-outlined-bg-selected: $button-normal-contained-bg-selected !default;
+
+$button-normal-text-bg-hovered: $button-normal-contained-bg-hovered !default;
+$button-normal-text-bg-focused: $button-normal-contained-bg-focused !default;
+$button-normal-text-bg-active: $button-normal-contained-bg-active !default;
+$button-normal-text-bg-selected: $button-normal-contained-bg-selected !default;
+
+$button-default-outlined-content-hovered: ds.$color-content-primary-default-hovered !default;
+
+$button-default-outlined-content-active: ds.$color-content-primary-default-active !default;
+
+$button-default-outlined-content-selected: ds.$color-content-primary-default-hovered !default;
+
+$button-default-text-content-hovered: ds.$color-content-primary-default-hovered !default;
+
+$button-default-text-content-active: $button-default-outlined-content-active !default;
+
+$button-default-text-content-selected: ds.$color-content-primary-default-hovered !default;
+
+$button-default-text-bg-rest: transparent !default;
+$button-default-text-bg-hovered: $button-default-outlined-bg-hovered !default;
+$button-default-text-bg-focused: $button-default-outlined-bg-focused !default;
+$button-default-text-bg-active: $button-default-outlined-bg-active !default;
+$button-default-text-bg-selected: $button-default-outlined-bg-selected !default;
+
+$button-danger-text-content-rest: $button-danger-outlined-content-rest !default;
+$button-danger-text-content-hovered: $button-danger-outlined-content-hovered !default;
+$button-danger-text-content-active: $button-danger-outlined-content-active !default;
+$button-danger-text-content-selected: $button-danger-outlined-content-selected !default;
+
+$button-danger-text-bg-rest: transparent !default;
+$button-danger-text-bg-hovered: $button-danger-outlined-bg-hovered !default;
+$button-danger-text-bg-focused: $button-danger-outlined-bg-focused !default;
+$button-danger-text-bg-active: $button-danger-outlined-bg-active !default;
+$button-danger-text-bg-selected: $button-danger-outlined-bg-selected !default;
+
+$button-success-text-content-rest: $button-success-outlined-content-rest !default;
+$button-success-text-content-hovered: $button-success-outlined-content-hovered !default;
+$button-success-text-content-active: $button-success-outlined-content-active !default;
+$button-success-text-content-selected: $button-success-outlined-content-selected !default;
+
+$button-success-text-bg-rest: transparent !default;
+$button-success-text-bg-hovered: $button-success-outlined-bg-hovered !default;
+$button-success-text-bg-focused: $button-success-outlined-bg-hovered !default;
+$button-success-text-bg-active: $button-success-outlined-bg-active !default;
+$button-success-text-bg-selected: $button-success-outlined-bg-selected !default;
+
+// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
+$button-normal-outlined-border-rest: ds.$color-border-neutral-default-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/button/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/button/_index.scss
new file mode 100644
index 000000000000..90541fee42f9
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/button/_index.scss
@@ -0,0 +1,218 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "mixins" as *;
+@use "../../base/button";
+
+// adduse
+
+.dx-button-content {
+  line-height: $button-content-line-height;
+}
+
+.dx-button-text {
+  line-height: $button-text-line-height;
+  text-transform: $button-text-transform;
+  font-weight: $button-text-font-weight;
+  letter-spacing: $button-text-letter-spacing;
+}
+
+.dx-button {
+  @include dx-button-onlyicon-sizing();
+}
+
+.dx-button-has-icon {
+  @include dx-button-onlyicon-sizing();
+}
+
+.dx-button-has-text {
+  @include dx-button-withtext-sizing();
+}
+
+.dx-button-has-icon.dx-button-has-text {
+  @include dx-button-text-and-icon-sizing();
+}
+
+// NOTE: Button styles
+
+.dx-button-mode-contained {
+  &.dx-button-normal {
+    box-shadow: $button-box-shadow $button-normal-shadow-rest;
+  }
+}
+
+.dx-button { // stylelint-disable-line no-duplicate-selectors
+  height: $button-height;
+  position: relative;
+
+  .dx-button-content {
+    position: relative;
+  }
+
+  @include dx-button-styling(
+    $button-normal-contained-bg-rest,
+    $button-normal-contained-content-rest,
+    $button-normal-contained-bg-hovered,
+    $button-normal-contained-bg-focused,
+    $button-normal-contained-bg-active,
+    $button-normal-contained-icon-rest,
+    $button-normal-contained-bg-selected,
+    $button-normal-contained-content-selected,
+  );
+
+  &.dx-button-default {
+    @include dx-button-styling(
+      $button-default-contained-bg-rest,
+      $button-default-contained-content-rest,
+      $button-default-contained-bg-hovered,
+      $button-default-contained-bg-focused,
+      $button-default-contained-bg-active,
+      $button-default-contained-icon-rest,
+      $button-default-contained-bg-selected,
+      $button-default-contained-content-selected,
+    );
+  }
+
+  &.dx-button-danger {
+    @include dx-button-styling(
+      $button-danger-contained-bg-rest,
+      $button-danger-contained-content-rest,
+      $button-danger-contained-bg-hovered,
+      $button-danger-contained-bg-focused,
+      $button-danger-contained-bg-active,
+      $button-danger-contained-icon-rest,
+      $button-danger-contained-bg-selected,
+      $button-danger-contained-content-selected,
+    );
+  }
+
+  &.dx-button-success {
+    @include dx-button-styling(
+      $button-success-contained-bg-rest,
+      $button-success-contained-content-rest,
+      $button-success-contained-bg-hovered,
+      $button-success-contained-bg-focused,
+      $button-success-contained-bg-active,
+      $button-success-contained-icon-rest,
+      $button-success-contained-bg-selected,
+      $button-success-contained-content-selected,
+    );
+  }
+}
+
+.dx-button-mode-text {
+  @include dx-button-flat-color-styling(
+    $button-normal-contained-content-rest,
+    $button-normal-contained-content-rest,
+    $button-normal-contained-content-rest,
+    $button-normal-text-bg-rest,
+    $button-normal-text-bg-hovered,
+    $button-normal-text-bg-focused,
+    $button-normal-text-bg-active,
+    $button-normal-text-bg-selected,
+    $button-normal-contained-content-selected,
+  );
+
+  &.dx-button-default {
+    @include dx-button-flat-color-styling(
+      $button-default-text-content-rest,
+      $button-default-text-content-hovered,
+      $button-default-text-content-active,
+      $button-default-text-bg-rest,
+      $button-default-text-bg-hovered,
+      $button-default-text-bg-focused,
+      $button-default-text-bg-active,
+      $button-default-text-bg-selected,
+      $button-default-text-content-selected,
+    );
+  }
+
+  &.dx-button-danger {
+    @include dx-button-flat-color-styling(
+      $button-danger-text-content-rest,
+      $button-danger-text-content-hovered,
+      $button-danger-text-content-active,
+      $button-danger-text-bg-rest,
+      $button-danger-text-bg-hovered,
+      $button-danger-text-bg-focused,
+      $button-danger-text-bg-active,
+      $button-danger-text-bg-selected,
+      $button-danger-text-content-selected,
+    );
+  }
+
+  &.dx-button-success {
+    @include dx-button-flat-color-styling(
+      $button-success-text-content-rest,
+      $button-success-text-content-hovered,
+      $button-success-text-content-active,
+      $button-success-text-bg-rest,
+      $button-success-text-bg-hovered,
+      $button-success-text-bg-focused,
+      $button-success-text-bg-active,
+      $button-success-text-bg-selected,
+      $button-success-text-content-selected,
+    );
+  }
+}
+
+.dx-button-mode-outlined {
+  @include dx-button-outlined-color-styling(
+    $button-normal-contained-content-rest,
+    $button-normal-contained-content-rest,
+    $button-normal-contained-content-rest,
+    $button-normal-outlined-border-rest,
+    $button-normal-outlined-bg-rest,
+    $button-normal-outlined-bg-hovered,
+    $button-normal-outlined-bg-focused,
+    $button-normal-outlined-bg-active,
+    $button-normal-outlined-bg-selected,
+    $button-normal-contained-content-selected,
+  );
+
+  &.dx-button-default {
+    @include dx-button-outlined-color-styling(
+      $button-default-outlined-content-rest,
+      $button-default-outlined-content-hovered,
+      $button-default-outlined-content-active,
+      $button-default-outlined-border-rest,
+      $button-default-outlined-bg-rest,
+      $button-default-outlined-bg-hovered,
+      $button-default-outlined-bg-focused,
+      $button-default-outlined-bg-active,
+      $button-default-outlined-bg-selected,
+      $button-default-outlined-content-selected,
+    );
+  }
+
+  &.dx-button-danger {
+    @include dx-button-outlined-color-styling(
+      $button-danger-outlined-content-rest,
+      $button-danger-outlined-content-hovered,
+      $button-danger-outlined-content-active,
+      $button-danger-outlined-border-rest,
+      $button-danger-outlined-bg-rest,
+      $button-danger-outlined-bg-hovered,
+      $button-danger-outlined-bg-focused,
+      $button-danger-outlined-bg-active,
+      $button-danger-outlined-bg-selected,
+      $button-danger-outlined-content-selected,
+    );
+  }
+
+  &.dx-button-success {
+    @include dx-button-outlined-color-styling(
+      $button-success-outlined-content-rest,
+      $button-success-outlined-content-hovered,
+      $button-success-outlined-content-active,
+      $button-success-outlined-border-rest,
+      $button-success-outlined-bg-rest,
+      $button-success-outlined-bg-hovered,
+      $button-success-outlined-bg-focused,
+      $button-success-outlined-bg-active,
+      $button-success-outlined-bg-selected,
+      $button-success-outlined-content-selected,
+    );
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/button/_mixins.scss b/packages/devextreme-scss/scss/widgets/fluent-next/button/_mixins.scss
new file mode 100644
index 000000000000..edaac2134114
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/button/_mixins.scss
@@ -0,0 +1,200 @@
+@use "sass:math";
+@use "sass:color";
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "colors" as *;
+@use "../../base/icon_fonts" as *;
+@use "../../base/button/mixins" as *;
+
+@mixin dx-button-onlyicon-sizing($icon-size: $button-icon-size) {
+  min-width: $button-height;
+
+  $button-content-padding: calc((#{$button-height} - #{$icon-size} - #{$global-border-width} * 2) / 2);
+
+  @include dx-button-sizing(
+    $button-content-padding,
+    $button-content-padding,
+    $button-content-padding,
+    $icon-size,
+    0
+  );
+}
+
+@mixin dx-button-withtext-sizing() {
+  @include dx-button-sizing(
+    $button-padding-block,
+    $button-padding-inline,
+    $button-padding-inline,
+    $button-icon-size,
+    calc(#{$button-icon-size} / 2)
+  );
+}
+
+@mixin dx-button-text-and-icon-sizing() {
+  @include dx-button-sizing(
+    $button-padding-block,
+    $button-icon-text-padding-inline-start,
+    $button-padding-inline,
+    $button-icon-size,
+    $button-icon-margin,
+  );
+}
+
+
+@mixin dx-button-styling-variant(
+  $background-color,
+  $text-color,
+  $text-color-hover,
+  $text-color-active,
+  $hover-background-color,
+  $focused-background-color,
+  $active-background-color,
+  $icon-color,
+  $selected-background-color: $active-background-color,
+  $selected-color: $text-color,
+) {
+  background-color: $background-color;
+  color: $text-color;
+
+  .dx-icon {
+    color: $icon-color;
+  }
+
+  &.dx-state-selected {
+    background-color: $selected-background-color;
+
+    &,
+    .dx-icon {
+      color: $selected-color;
+    }
+  }
+
+  &.dx-state-hover {
+    background-color: $hover-background-color;
+
+    &,
+    .dx-icon {
+      color: $text-color-hover;
+    }
+  }
+
+  &.dx-state-focused {
+    background-color: $focused-background-color;
+
+    &,
+    .dx-icon {
+      color: $text-color-hover;
+    }
+  }
+
+  &.dx-state-active {
+    background-color: $active-background-color;
+
+    &,
+    .dx-icon {
+      color: $text-color-active;
+    }
+  }
+}
+
+@mixin dx-button-styling(
+  $button-bg,
+  $button-color,
+  $button-hover-bg,
+  $button-focused-bg,
+  $button-active-bg,
+  $button-icon-color,
+  $button-selected-bg,
+  $button-selected-color,
+) {
+  border-radius: $button-border-radius;
+
+  @include dx-button-styling-variant(
+    $button-bg,
+    $button-color,
+    $button-color,
+    $button-color,
+    $button-hover-bg,
+    $button-focused-bg,
+    $button-active-bg,
+    $button-icon-color,
+    $button-selected-bg,
+    $button-selected-color,
+  );
+
+  &.dx-state-disabled {
+    opacity: 1;
+    box-shadow: none;
+
+    .dx-icon {
+      color: $button-content-disabled;
+    }
+
+    .dx-button-text {
+      color: $button-content-disabled;
+    }
+
+    &.dx-button-mode-contained {
+      background-color: $button-contained-bg-disabled;
+    }
+
+    &.dx-button-mode-outlined {
+      border-color: $button-outlined-border-disabled;
+    }
+  }
+}
+
+@mixin dx-button-flat-color-styling(
+  $button-color,
+  $button-color-hover,
+  $button-color-active,
+  $button-bg,
+  $button-hover-bg,
+  $button-focused-bg,
+  $button-active-bg,
+  $button-selected-bg: $button-active-bg,
+  $button-selected-color: $button-color
+) {
+  @include dx-button-styling-variant(
+    $button-bg,
+    $button-color,
+    $button-color-hover,
+    $button-color-active,
+    $button-hover-bg,
+    $button-focused-bg,
+    $button-active-bg,
+    $button-color,
+    $button-selected-bg,
+    $button-selected-color,
+  );
+}
+
+@mixin dx-button-outlined-color-styling(
+  $button-color,
+  $button-color-hover,
+  $button-color-active,
+  $border-color,
+  $button-bg,
+  $button-hover-bg,
+  $button-focused-bg,
+  $button-active-bg,
+  $button-selected-bg,
+  $button-selected-color: $button-color-active,
+) {
+  border-width: $button-border-width;
+  border-style: solid;
+  border-color: $border-color;
+
+  @include dx-button-styling-variant(
+    $button-bg,
+    $button-color,
+    $button-color-hover,
+    $button-color-active,
+    $button-hover-bg,
+    $button-focused-bg,
+    $button-active-bg,
+    $button-color,
+    $button-selected-bg,
+    $button-selected-color,
+  );
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/button/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/button/_sizes.scss
new file mode 100644
index 000000000000..e338c4e60d52
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/button/_sizes.scss
@@ -0,0 +1,48 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+// Geometry, so it lives here rather than in _colors.scss (NAMING.md O7)
+$button-border-radius: $global-border-radius !default;
+
+$button-padding-inline: null !default;
+$button-padding-block: null !default;
+$button-icon-text-padding-inline-start: null !default;
+$button-content-line-height: 0 !default;
+$button-text-line-height: normal !default;
+$button-text-transform: none !default;
+$button-text-font-weight: ds.$font-weight-500 !default; // dx-no-semantic-role: 500 is off the weight-role scale (400/600/700)
+$button-text-letter-spacing: normal !default;
+
+// Control metrics shared with the widgets that render buttons (chassis, see NAMING.md O5)
+$button-height: null !default;
+$button-icon-size: null !default;
+$button-icon-margin: null !default;
+
+$button-box-shadow: 0 ds.$spacing-10 ds.$spacing-30 !default;
+
+@if $size == "default" {
+  $button-height: ds.$spacing-320 !default;
+  $button-icon-size: ds.$spacing-200 !default;
+  $button-icon-margin: ds.$spacing-80 !default;
+  $button-padding-inline: ds.$spacing-120 !default;
+  $button-padding-block: ds.$spacing-60 !default;
+  $button-icon-text-padding-inline-start: $button-padding-inline !default;
+}
+
+@else if $size == "compact" {
+  $button-height: ds.$spacing-240 !default;
+  $button-icon-size: ds.$spacing-160 !default;
+  $button-icon-margin: ds.$spacing-40 !default;
+  $button-padding-inline: ds.$spacing-80 !default;
+  $button-padding-block: ds.$spacing-40 !default;
+  $button-icon-text-padding-inline-start: $button-padding-inline !default;
+}
+
+:root {
+  --dx-button-padding-inline: #{$button-padding-inline};
+}
+
+// Values hoisted from style-file literals (tokenized)
+$button-border-width: ds.$border-width-10 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/buttonGroup/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/buttonGroup/_colors.scss
new file mode 100644
index 000000000000..8b657a25c1dd
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/buttonGroup/_colors.scss
@@ -0,0 +1,5 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$button-group-separator-rest: ds.$color-border-neutral-subdued-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/buttonGroup/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/buttonGroup/_index.scss
new file mode 100644
index 000000000000..f2aca0e94fc4
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/buttonGroup/_index.scss
@@ -0,0 +1,44 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../button/sizes" as buttonSizes;
+@use "../button/colors" as buttonColors;
+@use "../../base/buttonGroup" with (
+  $buttongroup-mode-text-column-gap: $button-group-text-column-gap,
+);
+@use "../../base/buttonGroup/mixins" as *;
+
+// adduse
+
+.dx-buttongroup {
+  &.dx-state-disabled {
+    opacity: 1;
+  }
+}
+
+@include dx-buttongroup-sizing(
+  buttonSizes.$button-border-radius,
+  1px,
+);
+
+.dx-buttongroup-mode-contained {
+  border-radius: buttonSizes.$button-border-radius;
+  box-shadow: buttonSizes.$button-box-shadow buttonColors.$button-normal-shadow-rest;
+
+  .dx-button-mode-contained {
+    box-shadow: none;
+    border-width: 0;
+    border-style: solid;
+    border-inline-end-width: $button-group-item-contained-border-inline-end-width;
+    border-inline-end-color: $button-group-separator-rest;
+
+    &.dx-buttongroup-last-item {
+      border-inline-end-width: 0;
+    }
+  }
+
+  &.dx-state-disabled {
+    box-shadow: none;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/buttonGroup/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/buttonGroup/_sizes.scss
new file mode 100644
index 000000000000..f3e6f46e7138
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/buttonGroup/_sizes.scss
@@ -0,0 +1,11 @@
+@use "../../../_design-system/variables/ds" as ds;
+@use "../sizes" as *;
+
+// adduse
+
+
+// Values hoisted from style-file literals (tokenized)
+$button-group-item-contained-border-inline-end-width: ds.$border-width-10 !default;
+
+// Base-layer sizing injected with design tokens (wave B2)
+$button-group-text-column-gap: ds.$spacing-10 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_colors.scss
new file mode 100644
index 000000000000..3753bd821781
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_colors.scss
@@ -0,0 +1,26 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$calendar-content-rest: ds.$color-content-neutral-default-rest !default;
+
+$calendar-navigator-content-rest: ds.$color-content-neutral-default-rest !default;
+
+$calendar-header-content-rest: $calendar-content-rest !default;
+
+$calendar-cell-other-content-rest: ds.$color-content-neutral-subdued-rest !default;
+$calendar-bg-rest: transparent !default;
+$calendar-bg-hovered: ds.$color-surface-primary-deep-selected !default;
+$calendar-cell-border-hovered: $calendar-bg-hovered !default;
+$calendar-cell-content-hovered: $calendar-content-rest !default;
+
+$calendar-cell-bg-selected: ds.$color-surface-primary-default-rest !default;
+$calendar-cell-content-selected: ds.$color-content-neutral-default-static-dark-rest !default;
+$calendar-cell-bg-active: ds.$color-surface-primary-deep-active !default;
+$calendar-cell-contoured-border-rest: $calendar-cell-bg-active !default;
+$calendar-invalid-border-rest: ds.$color-border-danger-default-rest !default;
+$calendar-invalid-border-focused: ds.$color-border-danger-default-hovered !default;
+$calendar-week-number-cell-content-rest: ds.$color-content-neutral-subdued-rest !default;
+$calendar-week-number-cell-bg-rest: ds.$color-surface-neutral-subdued-rest !default;
+
+$calendar-cell-other-content-hovered: $calendar-cell-other-content-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_index.scss
new file mode 100644
index 000000000000..eda8c772dbf3
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_index.scss
@@ -0,0 +1,72 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../button/mixins" as *;
+@use "../../base/calendar/calendar" with (
+  $calendar-week-day-header-font-size: $calendar-week-day-header-font-size,
+  $calendar-week-day-header-font-weight: $calendar-week-day-header-font-weight,
+);
+@use "../../base/calendar/mixins" as *;
+
+// adduse
+
+@include dx-calendar-mixin(
+  $calendar-bg-rest,
+  $calendar-legacy-width,
+  $calendar-legacy-height,
+  $calendar-element-padding,
+  $calendar-footer-button-height,
+  $calendar-invalid-border-rest,
+  $calendar-invalid-border-focused,
+);
+
+.dx-calendar-navigator-previous-view,
+.dx-calendar-navigator-next-view {
+  @include dx-button-onlyicon-sizing($global-icon-size);
+}
+
+@include dx-calendar-navigator-mixin(
+  $calendar-navigator-content-rest,
+);
+@include dx-calendar-body-mixin(
+  $calendar-week-number-cell-content-rest,
+  $calendar-week-number-cell-bg-rest,
+  $calendar-week-number-border-radius,
+  $calendar-cell-font-size,
+  $calendar-header-content-rest,
+);
+@include dx-calendar-cell-mixin(
+  $calendar-cell-contoured-border-radius,
+  $calendar-content-rest,
+  $global-border-radius,
+  $calendar-cell-bg-selected,
+  $calendar-bg-hovered,
+  $calendar-cell-content-hovered,
+  $calendar-cell-bg-active,
+  $calendar-cell-bg-selected,
+  $calendar-cell-content-selected,
+  $calendar-cell-contoured-border-rest,
+  $calendar-cell-other-content-rest,
+  $calendar-cell-other-content-hovered,
+  $calendar-cell-border-hovered,
+  999em,
+);
+@include dx-calendar-cell-in-range-mixin(
+  "::before",
+  $calendar-bg-hovered,
+  $calendar-cell-border-hovered,
+  999em,
+  0,
+);
+@include dx-calendar-cell-in-range-mixin(
+  "::after",
+  inherit,
+  $calendar-cell-border-hovered,
+  999em,
+  1px,
+  '.dx-calendar-cell-range-hover',
+  '.dx-calendar-cell-range-hover-start',
+  '.dx-calendar-cell-range-hover-end',
+);
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_sizes.scss
new file mode 100644
index 000000000000..5a8b41b2a8d6
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_sizes.scss
@@ -0,0 +1,37 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+// Not colours: two radii that used to sit in _colors.scss (NAMING.md, O7)
+$calendar-cell-contoured-border-radius: 50% !default;
+$calendar-week-number-border-radius: 0 !default;
+
+$calendar-legacy-width: null !default;
+$calendar-legacy-height: null !default;
+
+$calendar-footer-button-height: null !default;
+$calendar-cell-font-size: null !default;
+
+$calendar-element-padding: ds.$spacing-80 !default;
+
+@if $size == "default" {
+  $calendar-legacy-width: 272px !default; // dx-offscale: 272px
+  $calendar-legacy-height: 264px !default; // dx-offscale: 264px
+
+  $calendar-cell-font-size: ds.$font-size-base-md !default;
+
+  $calendar-footer-button-height: ds.$spacing-360 !default;
+}
+
+@else if $size == "compact" {
+  $calendar-legacy-width: 252px !default; // dx-offscale: 252px
+  $calendar-legacy-height: 260px !default; // dx-offscale: 260px
+
+  $calendar-cell-font-size: ds.$font-size-base-sm !default;
+  $calendar-footer-button-height: ds.$spacing-280 !default;
+}
+
+// Base-layer values injected with design tokens (wave B1)
+$calendar-week-day-header-font-size: ds.$font-size-caption-sm !default;
+$calendar-week-day-header-font-weight: ds.$font-weight-500 !default; // dx-no-semantic-role: 500 is off the weight-role scale (400/600/700)
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/card/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/card/_colors.scss
new file mode 100644
index 000000000000..e88099a77f7a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/card/_colors.scss
@@ -0,0 +1,6 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$card-bg-rest: ds.$color-surface-neutral-default-rest !default;
+$card-shadow-rest: ds.$box-shadow-sm !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/card/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/card/_index.scss
new file mode 100644
index 000000000000..7e437f076fc5
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/card/_index.scss
@@ -0,0 +1,14 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/card";
+
+// adduse
+
+.dx-card {
+  box-shadow: $card-shadow-rest;
+  border-radius: $global-border-radius;
+  background-color: $card-bg-rest;
+  margin: $card-margin;
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/card/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/card/_sizes.scss
new file mode 100644
index 000000000000..413f2a35e3ff
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/card/_sizes.scss
@@ -0,0 +1,8 @@
+@use "../../../_design-system/variables/ds" as ds;
+@use "../sizes" as *;
+
+// adduse
+
+
+// Values hoisted from style-file literals (tokenized)
+$card-margin: ds.$spacing-20 ds.$spacing-20 ds.$spacing-30 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/cardView/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/cardView/_colors.scss
new file mode 100644
index 000000000000..65eee636b026
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/cardView/_colors.scss
@@ -0,0 +1,257 @@
+@use '../../../_design-system/variables/ds' as ds;
+@use '../../base/cardView/variables' as *;
+@use '../../base/cardView/header_panel/variables' as *;
+@use '../../base/cardView/header_panel/item/variables' as *;
+@use '../../base/cardView/content_view/content/card/variables' as *;
+@use '../../base/cardView/content_view/content/card/header/variables' as *;
+@use '../../base/cardView/content_view/content/card/cover/variables' as *;
+@use '../../base/cardView/content_view/content/card/content/variables' as *;
+@use '../../base/cardView/content_view/content/variables' as *;
+@use '../../base/cardView/content_view/no_data/variables' as *;
+@use '../../base/cardView/column_chooser/variables' as *;
+@use '../../base/cardView/filter_panel/variables' as *;
+
+// adduse
+
+// Mode/accent is resolved by the design tokens, so the former light/dark branches collapse to one.
+
+// #region COMMON SETTINGS
+
+$cardview-fluent-common-bg-color: ds.$color-surface-neutral-subdued-rest !default;
+
+$cardview-fluent-common-link-color: ds.$color-content-primary-default-rest !default;
+
+$cardview-fluent-common-text-color: ds.$color-content-neutral-default-rest !default;
+
+// #endregion
+
+// #region CARD
+
+$cardview-fluent-card-bg-color: ds.$color-surface-neutral-default-rest !default;
+
+$cardview-fluent-card-border-color: ds.$color-border-neutral-default-rest !default;
+
+$cardview-fluent-card-divider-color: $cardview-fluent-card-border-color !default;
+
+$cardview-fluent-card-text-color: $cardview-fluent-common-text-color !default;
+
+$cardview-fluent-card__cover-bg-color: ds.$color-surface-neutral-default-static-light-rest !default;
+
+$cardview-fluent-card__cover--noimage-bg-color: ds.$color-surface-neutral-deep-rest !default;
+
+$cardview-fluent-card__cover--noimage__icon-color: ds.$color-content-neutral-subdued-rest !default;
+
+$cardview-fluent-card--focused-outline-color: ds.$color-border-primary-default-rest !default;
+
+// #endregion
+
+// #region CARD (SELECTED)
+
+$cardview-fluent-card--selected-bg-color: ds.$color-surface-primary-deep-selected !default;
+
+$cardview-fluent-card--selected-border-color: ds.$color-border-primary-default-rest !default;
+
+$cardview-fluent-card--selected-divider-color: $cardview-fluent-card--selected-border-color !default;
+
+$cardview-fluent-card--selected-text-color: $cardview-fluent-card-text-color !default;
+
+$cardview-fluent-card--selected__cover-bg-color: $cardview-fluent-card__cover-bg-color !default;
+
+$cardview-fluent-card--selected__cover--noimage-bg-color: $cardview-fluent-card__cover--noimage-bg-color !default;
+
+$cardview-fluent-card--selected__cover--noimage__icon-color: $cardview-fluent-card__cover--noimage__icon-color !default;
+
+// #endregion
+
+// #region HEADER PANEL ITEM
+
+$cardview-fluent-header-panel__item-bg-color: ds.$color-surface-neutral-deep-rest !default;
+
+$cardview-fluent-header-panel__item-border-color: ds.$color-border-neutral-default-rest !default;
+
+$cardview-fluent-header-panel__item-text-color: $cardview-fluent-common-text-color !default;
+
+$cardview-fluent-header-panel__item__icon-color: $cardview-fluent-common-text-color !default;
+
+$cardview-fluent-header-panel__item__header-filter-icon--selected-color: ds.$color-content-primary-default-rest !default;
+
+$cardview-fluent-header-panel__item__sort-index-text-color: $cardview-fluent-common-text-color !default;
+
+$cardview-fluent-header-panel__item--focused-outline-color: ds.$color-border-primary-default-rest !default;
+
+// #endregion
+
+// #region HEADER PANEL ITEM (HOVERED)
+
+$cardview-fluent-header-panel__item--hovered-bg-color: ds.$color-surface-neutral-deep-hovered !default;
+
+$cardview-fluent-header-panel__item--hovered-border-color: ds.$color-border-neutral-default-hovered !default;
+
+$cardview-fluent-header-panel__item--hovered-text-color: $cardview-fluent-header-panel__item-text-color !default;
+
+$cardview-fluent-header-panel__item--hovered__icon-color: $cardview-fluent-header-panel__item__icon-color !default;
+
+$cardview-fluent-header-panel__item--hovered__header-filter-icon--selected-color: $cardview-fluent-header-panel__item__header-filter-icon--selected-color !default;
+
+$cardview-fluent-header-panel__item--hovered__sort-index-text-color: $cardview-fluent-header-panel__item__sort-index-text-color !default;
+
+// #endregion
+
+// #region HEADER PANEL ITEM (DISABLED)
+
+$cardview-fluent-header-panel__item--disabled-bg-color: $cardview-fluent-header-panel__item-bg-color !default;
+
+$cardview-fluent-header-panel__item--disabled-border-color: $cardview-fluent-header-panel__item-border-color !default;
+
+$cardview-fluent-header-panel__item--disabled-text-color: ds.$color-content-neutral-default-disabled !default;
+
+$cardview-fluent-header-panel__item--disabled__icon-color: ds.$color-content-neutral-default-disabled !default;
+
+$cardview-fluent-header-panel__item--disabled__header-filter-icon--selected-color: ds.$color-content-neutral-default-disabled !default;
+
+$cardview-fluent-header-panel__item--disabled__sort-index-text-color: ds.$color-content-neutral-default-disabled !default;
+
+// #endregion
+
+// #region HEADER PANEL ITEM (ON DRAG)
+
+$cardview-fluent-header-panel__item--dragged-bg-color: $cardview-fluent-header-panel__item-bg-color !default;
+
+$cardview-fluent-header-panel__item--dragged-border-color: $cardview-fluent-header-panel__item-border-color !default;
+
+$cardview-fluent-header-panel__item--dragged-text-color: $cardview-fluent-header-panel__item-text-color !default;
+
+$cardview-fluent-header-panel__item--dragged__allowance-icon-color: $cardview-fluent-common-text-color !default;
+
+$cardview-fluent-header-panel__item--dragged__prohibition-icon-color: ds.$color-content-danger-default-rest !default;
+
+$cardview-fluent-header-panel__item--dragged-box-shadow-color: ds.$color-shadow-key !default;
+
+// #endregion
+
+// #region HEADER PANEL DROP ZONE
+
+$cardview-fluent-header-panel__dropzone-bg-color: ds.$color-surface-primary-subdued-rest !default;
+
+$cardview-fluent-header-panel__dropzone-border-color: ds.$color-border-primary-default-rest !default;
+
+$cardview-fluent-header-panel__dropzone-text-color: ds.$color-content-primary-default-rest !default;
+
+$cardview-fluent-header-panel__dropzone__icon-color: ds.$color-content-primary-default-rest !default;
+
+// #endregion
+
+// #region FILTER PANEL
+
+$cardview-fluent-filter-panel-bg-color: $cardview-fluent-common-bg-color !default;
+
+$cardview-fluent-filter-panel-border-color: ds.$color-border-neutral-default-rest !default;
+
+$cardview-fluent-filter-panel-text-color: ds.$color-content-primary-default-rest !default;
+
+$cardview-fluent-filter-panel__icon-color: ds.$color-content-primary-default-rest !default;
+
+// #endregion
+
+// #region EMPTY VIEW
+
+$cardview-fluent-nodata-view-bg-color: $cardview-fluent-common-bg-color !default;
+
+$cardview-fluent-nodata-view-text-color: ds.$color-content-neutral-subdued-rest !default;
+
+$cardview-fluent-nodata-view__icon-color: $cardview-fluent-nodata-view-text-color !default;
+
+$cardview-fluent-nodata-view__icon-bg-color: ds.$color-surface-neutral-deep-rest !default;
+
+// #endregion
+
+// #region HIGHLIGHTS IN SEARCH
+
+$cardview-fluent-card__content__field-value--highlighted-bg-color: ds.$color-surface-highlight-rest !default;
+
+$cardview-fluent-card__content__field-value--highlighted-text-color: ds.$color-content-highlight-rest !default;
+
+$cardview-fluent-card__content__field-value--highlighted-box-shadow-color: ds.$color-shadow-key !default;
+
+// #endregion
+
+// #region COLUMN CHOOSER
+
+$cardview-fluent-columnchooser--empty__message-color: ds.$color-content-neutral-subdued-rest !default;
+
+// #endregion
+
+$cardview-bg-color: $cardview-fluent-common-bg-color !default;
+$cardview-link-color: $cardview-fluent-common-link-color !default;
+$cardview-text-color: $cardview-fluent-common-text-color !default;
+
+$cardview-card-bg-color: $cardview-fluent-card-bg-color !default;
+$cardview-card-border-color: $cardview-fluent-card-border-color !default;
+$cardview-card-divider-color: $cardview-fluent-card-divider-color !default;
+$cardview-card-text-color: $cardview-fluent-card-text-color !default;
+$cardview-card__cover-bg-color: $cardview-fluent-card__cover-bg-color !default;
+$cardview-card__cover--noimage-bg-color: $cardview-fluent-card__cover--noimage-bg-color !default;
+$cardview-card__cover--noimage__icon-color: $cardview-fluent-card__cover--noimage__icon-color !default;
+
+$cardview-card--selected-bg-color: $cardview-fluent-card--selected-bg-color !default;
+$cardview-card--selected-border-color: $cardview-fluent-card--selected-border-color !default;
+$cardview-card--selected-divider-color: $cardview-fluent-card--selected-divider-color !default;
+$cardview-card--selected-text-color: $cardview-fluent-card--selected-text-color !default;
+$cardview-card--selected__cover-bg-color: $cardview-fluent-card--selected__cover-bg-color !default;
+$cardview-card--selected__cover--noimage-bg-color: $cardview-fluent-card--selected__cover--noimage-bg-color !default;
+$cardview-card--selected__cover--noimage__icon-color: $cardview-fluent-card--selected__cover--noimage__icon-color !default;
+
+$cardview-card--focused-outline-color: $cardview-fluent-card--focused-outline-color !default;
+
+$cardview-header-panel__item-bg-color: $cardview-fluent-header-panel__item-bg-color !default;
+$cardview-header-panel__item-border-color: $cardview-fluent-header-panel__item-border-color !default;
+$cardview-header-panel__item-text-color: $cardview-fluent-header-panel__item-text-color !default;
+$cardview-header-panel__item__icon-color: $cardview-fluent-header-panel__item__icon-color !default;
+$cardview-header-panel__item__header-filter-icon--selected-color: $cardview-fluent-header-panel__item__header-filter-icon--selected-color !default;
+$cardview-header-panel__item__sort-index-text-color: $cardview-fluent-header-panel__item__sort-index-text-color !default;
+
+$cardview-header-panel__item--focused-outline-color: $cardview-fluent-header-panel__item--focused-outline-color !default;
+
+$cardview-header-panel__item--hovered-bg-color: $cardview-fluent-header-panel__item--hovered-bg-color !default;
+$cardview-header-panel__item--hovered-border-color: $cardview-fluent-header-panel__item--hovered-border-color !default;
+$cardview-header-panel__item--hovered-text-color: $cardview-fluent-header-panel__item--hovered-text-color !default;
+$cardview-header-panel__item--hovered__icon-color: $cardview-fluent-header-panel__item--hovered__icon-color !default;
+$cardview-header-panel__item--hovered__header-filter-icon--selected-color: $cardview-fluent-header-panel__item--hovered__header-filter-icon--selected-color !default;
+$cardview-header-panel__item--hovered__sort-index-text-color: $cardview-fluent-header-panel__item--hovered__sort-index-text-color !default;
+
+$cardview-header-panel__item--disabled-bg-color: $cardview-fluent-header-panel__item--disabled-bg-color !default;
+$cardview-header-panel__item--disabled-border-color: $cardview-fluent-header-panel__item--disabled-border-color !default;
+$cardview-header-panel__item--disabled-text-color: $cardview-fluent-header-panel__item--disabled-text-color !default;
+$cardview-header-panel__item--disabled__icon-color: $cardview-fluent-header-panel__item--disabled__icon-color !default;
+$cardview-header-panel__item--disabled__header-filter-icon--selected-color: $cardview-fluent-header-panel__item--disabled__header-filter-icon--selected-color !default;
+$cardview-header-panel__item--disabled__sort-index-text-color: $cardview-fluent-header-panel__item--disabled__sort-index-text-color !default;
+
+$cardview-header-panel__item--dragged-bg-color: $cardview-fluent-header-panel__item--dragged-bg-color !default;
+$cardview-header-panel__item--dragged-border-color: $cardview-fluent-header-panel__item--dragged-border-color !default;
+$cardview-header-panel__item--dragged-text-color: $cardview-fluent-header-panel__item--dragged-text-color !default;
+$cardview-header-panel__item--dragged__allowance-icon-color: $cardview-fluent-header-panel__item--dragged__allowance-icon-color !default;
+$cardview-header-panel__item--dragged__prohibition-icon-color: $cardview-fluent-header-panel__item--dragged__prohibition-icon-color !default;
+$cardview-header-panel__item--dragged-box-shadow-color: $cardview-fluent-header-panel__item--dragged-box-shadow-color !default;
+
+$cardview-header-panel__dropzone-bg-color: $cardview-fluent-header-panel__dropzone-bg-color !default;
+$cardview-header-panel__dropzone-border-color: $cardview-fluent-header-panel__dropzone-border-color !default;
+$cardview-header-panel__dropzone-text-color: $cardview-fluent-header-panel__dropzone-text-color !default;
+$cardview-header-panel__dropzone__icon-color: $cardview-fluent-header-panel__dropzone__icon-color !default;
+
+$cardview-filter-panel-bg-color: $cardview-fluent-filter-panel-bg-color !default;
+$cardview-filter-panel-border-color: $cardview-fluent-filter-panel-border-color !default;
+$cardview-filter-panel-text-color: $cardview-fluent-filter-panel-text-color !default;
+$cardview-filter-panel__icon-color: $cardview-fluent-filter-panel__icon-color !default;
+
+$cardview-nodata-view-bg-color: $cardview-fluent-nodata-view-bg-color !default;
+$cardview-nodata-view-text-color: $cardview-fluent-nodata-view-text-color !default;
+$cardview-nodata-view__icon-color: $cardview-fluent-nodata-view__icon-color !default;
+$cardview-nodata-view__icon-bg-color: $cardview-fluent-nodata-view__icon-bg-color !default;
+
+$cardview-card__content__field-value--highlighted-bg-color: $cardview-fluent-card__content__field-value--highlighted-bg-color !default;
+$cardview-card__content__field-value--highlighted-text-color: $cardview-fluent-card__content__field-value--highlighted-text-color !default;
+$cardview-card__content__field-value--highlighted-box-shadow: 0 1px 3px $cardview-fluent-card__content__field-value--highlighted-box-shadow-color !default;
+
+$cardview-columnchooser--empty__message-color: $cardview-fluent-columnchooser--empty__message-color !default;
+
+$cardview-header-item__sort-indicator__border-color: ds.$color-border-primary-default-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/cardView/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/cardView/_index.scss
new file mode 100644
index 000000000000..29f2262bbe3e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/cardView/_index.scss
@@ -0,0 +1,5 @@
+@use 'colors';
+@use 'sizes';
+@use '../../base/cardView/index' as *;
+
+// adduse
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/cardView/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/cardView/_sizes.scss
new file mode 100644
index 000000000000..cc36db881db4
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/cardView/_sizes.scss
@@ -0,0 +1,405 @@
+@use "../sizes" as *;
+@use '../../base/cardView/variables' as *;
+@use '../../base/cardView/header_panel/variables' as *;
+@use '../../base/cardView/header_panel/item/variables' as *;
+@use '../../base/cardView/content_view/content/card/variables' as *;
+@use '../../base/cardView/content_view/content/card/header/variables' as *;
+@use '../../base/cardView/content_view/content/card/cover/variables' as *;
+@use '../../base/cardView/content_view/content/card/content/variables' as *;
+@use '../../base/cardView/content_view/content/variables' as *;
+@use '../../base/cardView/content_view/no_data/variables' as *;
+@use '../../base/cardView/column_chooser/variables' as *;
+@use '../../base/cardView/filter_panel/variables' as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+// #region COMMON SETTINGS
+
+$cardview-fluent-common-border-radius: null !default;
+
+$cardview-fluent-common-text-weight: null !default;
+
+$cardview-fluent-common-cards-row-gap: null !default;
+
+$cardview-fluent-common-cards-column-gap: null !default;
+
+$cardview-fluent-common-gap: null !default;
+
+$cardview-fluent-common-padding: null !default;
+
+// #endregion
+
+// #region CARD
+
+$cardview-fluent-card-min-width: null !default;
+
+$cardview-fluent-card-border-width: null !default;
+
+$cardview-fluent-card-border-radius: null !default;
+
+$cardview-fluent-card__header-height: null !default;
+
+$cardview-fluent-card__header-text-size: null !default;
+
+$cardview-fluent-card__header__selection-checkbox-padding-right: null !default;
+
+$cardview-fluent-card__field-caption-weight: null !default;
+
+$cardview-fluent-card__cover-max-height: null !default;
+
+$cardview-fluent-card__cover--noimage__icon-size: null !default;
+
+$cardview-fluent-card__content-padding: null !default;
+
+$cardview-fluent-card__content-row-gap: null !default;
+
+$cardview-fluent-card__content__cell-padding-vertical: null !default;
+
+$cardview-fluent-card__content__cell-padding-horizontal: null !default;
+
+// #endregion
+
+// #region CARD (SELECTED)
+
+$cardview-fluent-card--selected__field-caption-weight: null !default;
+
+// #endregion
+
+// #region HEADER
+
+$cardview-fluent-header-gap: null !default;
+
+// #endregion
+
+// #region HEADER PANEL
+
+$cardview-fluent-header-panel-vertical-margin: null !default;
+
+$cardview-fluent-header-panel--empty-line-height: null !default;
+
+// #endregion
+
+// #region HEADER PANEL ITEM
+
+$cardview-fluent-header-panel__item-border-width: null !default;
+
+$cardview-fluent-header-panel__item-border-radius: null !default;
+
+$cardview-fluent-header-panel__item-padding-vertical: null !default;
+
+$cardview-fluent-header-panel__item-padding-horizontal: null !default;
+
+$cardview-fluent-header-panel__item-text-weight: null !default;
+
+$cardview-fluent-header-panel__item__sort-index-text-weight: null !default;
+
+$cardview-fluent-header-panel__item__icon-size: null !default;
+
+$cardview-fluent-header-item__left-padding: null !default;
+$cardview-fluent-header-item__right-padding: null !default;
+
+// #endregion
+
+// #region HEADER PANEL ITEM (HOVERED)
+
+$cardview-fluent-header-panel__item--hovered-text-weight: null !default;
+
+$cardview-fluent-header-panel__item--hovered__sort-index-text-weight: null !default;
+
+// #endregion
+
+// #region HEADER PANEL ITEM (DISABLED)
+
+$cardview-fluent-header-panel__item--disabled-text-weight: null !default;
+
+$cardview-fluent-header-panel__item--disabled__sort-index-text-weight: null !default;
+
+// #endregion
+
+// #region HEADER PANEL ITEM (ON DRAG)
+
+$cardview-fluent-header-panel__item--dragged-text-weight: null !default;
+
+$cardview-fluent-header-item__sort-indicator__border-size: null;
+$cardview-fluent-header-item__sort-indicator__border-radius: null;
+
+// #endregion
+
+// #region HEADER PANEL DROP ZONE
+
+$cardview-fluent-header-panel__dropzone-height: null !default;
+
+$cardview-fluent-header-panel__dropzone-top: null !default;
+
+$cardview-fluent-header-panel__dropzone-border-width: null !default;
+
+$cardview-fluent-header-panel__dropzone-border-radius: null !default;
+
+// #endregion
+
+// #region FILTER PANEL
+
+$cardview-fluent-filter-panel-border-radius: null !default;
+
+// #endregion
+
+// #region NO DATA VIEW
+
+$cardview-fluent-nodata-view__icon-container-size: null !default;
+
+$cardview-fluent-nodata-view__icon-container-margin: null !default;
+
+$cardview-fluent-nodata-view__icon-size: null !default;
+
+// #endregion
+
+// #region HIGHLIGHTS IN SEARCH
+
+$cardview-fluent-card__content__field-value--highlighted-border-radius: null !default;
+
+$cardview-fluent-card__content__field-value--highlighted-border-padding: null !default;
+
+$cardview-fluent-card__content__field-value--highlighted-text-weight: null !default;
+
+// #endregion
+
+// #region COLUMN CHOOSER
+
+$cardview-fluent-column-chooser--empty__message-horizontal-padding: null !default;
+
+$cardview-fluent-column-chooser__select-all-item-horizontal-padding: null !default;
+
+// #endregion
+
+@if $size == "default" {
+
+  // Common
+  $cardview-fluent-common-border-radius: ds.$border-radius-160 !default;
+  $cardview-fluent-common-text-weight: ds.$font-weight-base-default !default;
+  $cardview-fluent-common-cards-row-gap: ds.$spacing-160 !default;
+  $cardview-fluent-common-cards-column-gap: ds.$spacing-160 !default;
+  $cardview-fluent-common-gap: ds.$spacing-240 !default;
+  $cardview-fluent-common-padding: ds.$spacing-240 !default;
+
+  // Card
+  $cardview-fluent-card-min-width: 250px !default; // dx-offscale: 250px
+  $cardview-fluent-card-border-width: ds.$border-width-10 !default;
+  $cardview-fluent-card-border-radius: ds.$border-radius-80 !default;
+  $cardview-fluent-card__header-height: ds.$spacing-480 !default;
+  $cardview-fluent-card__header-text-size: ds.$spacing-160 !default;
+  $cardview-fluent-card__header__selection-checkbox-padding-right: ds.$spacing-120 !default;
+  $cardview-fluent-card__field-caption-weight: ds.$font-weight-base-strong !default;
+  $cardview-fluent-card__cover-max-height: 180px !default; // dx-offscale: 180px
+  $cardview-fluent-card__cover--noimage__icon-size: ds.$spacing-480 !default;
+  $cardview-fluent-card__content-padding: ds.$spacing-120 !default;
+  $cardview-fluent-card__content-row-gap: ds.$spacing-80 !default;
+  $cardview-fluent-card__content__cell-padding-vertical: ds.$spacing-60 !default;
+  $cardview-fluent-card__content__cell-padding-horizontal: ds.$spacing-120 !default;
+
+  // Card - selected
+  $cardview-fluent-card--selected__field-caption-weight: $cardview-fluent-card__field-caption-weight !default;
+
+  // Header
+  $cardview-fluent-header-gap: 0 !default;
+
+  // Header panel
+  $cardview-fluent-header-panel-vertical-margin: ds.$spacing-80 !default;
+  $cardview-fluent-header-panel--empty-line-height: ds.$line-height-title-lg !default;
+
+  // Header panel item - default
+  $cardview-fluent-header-panel__item-border-width: ds.$border-width-10 !default;
+  $cardview-fluent-header-panel__item-border-radius: ds.$border-radius-60 !default;
+  $cardview-fluent-header-panel__item-padding-horizontal: ds.$spacing-80 !default;
+  $cardview-fluent-header-panel__item-padding-vertical: ds.$spacing-50 !default;
+  $cardview-fluent-header-item__left-padding: ds.$spacing-60 !default;
+  $cardview-fluent-header-item__right-padding: ds.$spacing-20 !default;
+  $cardview-fluent-header-panel__item-text-weight: $cardview-fluent-common-text-weight !default;
+  $cardview-fluent-header-panel__item__sort-index-text-weight: ds.$font-weight-base-default !default;
+  $cardview-fluent-header-panel__item__icon-size: $global-icon-size !default;
+
+  // Header panel item - hovered
+  $cardview-fluent-header-panel__item--hovered-text-weight: $cardview-fluent-header-panel__item-text-weight !default;
+  $cardview-fluent-header-panel__item--hovered__sort-index-text-weight: $cardview-fluent-header-panel__item__sort-index-text-weight !default;
+
+  // Header panel item - disabled
+  $cardview-fluent-header-panel__item--disabled-text-weight: $cardview-fluent-header-panel__item-text-weight !default;
+  $cardview-fluent-header-panel__item--disabled__sort-index-text-weight: $cardview-fluent-header-panel__item__sort-index-text-weight !default;
+
+  // Header panel item - dragged
+  $cardview-fluent-header-panel__item--dragged-text-weight: $cardview-fluent-header-panel__item-text-weight !default;
+  $cardview-fluent-header-item__sort-indicator__border-size: ds.$border-width-20 !default;
+  $cardview-fluent-header-item__sort-indicator__border-radius: ds.$border-radius-80 !default;
+
+  // Header panel Drop-zone
+  $cardview-fluent-header-panel__dropzone-height: ds.$spacing-440 !default;
+  $cardview-fluent-header-panel__dropzone-top: ds.$spacing-minus-60  !default;
+  $cardview-fluent-header-panel__dropzone-border-width: 1.5px !default; // dx-offscale: 1.5px
+  $cardview-fluent-header-panel__dropzone-border-radius: ds.$border-radius-80 !default;
+
+  // Filter panel
+  $cardview-fluent-filter-panel-border-radius: 0 !default;
+
+  // Empty view
+  $cardview-fluent-nodata-view__icon-container-size: ds.$spacing-640 !default;
+  $cardview-fluent-nodata-view__icon-container-margin: ds.$spacing-120 !default;
+  $cardview-fluent-nodata-view__icon-size: ds.$spacing-400 !default;
+
+  // Search highlight
+  $cardview-fluent-card__content__field-value--highlighted-border-radius: ds.$border-radius-50 !default;
+  $cardview-fluent-card__content__field-value--highlighted-border-padding: .125em 0.2em !default; // dx-relative: proportional to card font-size, no em scale in package
+  $cardview-fluent-card__content__field-value--highlighted-text-weight: ds.$font-weight-500 !default; // dx-no-semantic-role: 500 off the weight-role scale
+
+  // Column chooser
+  $cardview-fluent-column-chooser--empty__message-horizontal-padding: ds.$spacing-240 !default;
+  $cardview-fluent-column-chooser__select-all-item-horizontal-padding: ds.$spacing-140 !default;
+}
+@else if $size == "compact" {
+
+  // Common
+  $cardview-fluent-common-border-radius: ds.$border-radius-160 !default;
+  $cardview-fluent-common-text-weight: ds.$font-weight-base-default !default;
+  $cardview-fluent-common-cards-row-gap: ds.$spacing-120 !default;
+  $cardview-fluent-common-cards-column-gap: ds.$spacing-120 !default;
+  $cardview-fluent-common-gap: ds.$spacing-160 !default;
+  $cardview-fluent-common-padding: ds.$spacing-160 !default;
+
+  // Card
+  $cardview-fluent-card-min-width: 250px !default; // dx-offscale: 250px
+  $cardview-fluent-card-border-width: ds.$border-width-10 !default;
+  $cardview-fluent-card-border-radius: ds.$border-radius-60 !default;
+  $cardview-fluent-card__header-height: ds.$spacing-360 !default;
+  $cardview-fluent-card__header-text-size: ds.$spacing-140 !default;
+  $cardview-fluent-card__header__selection-checkbox-padding-right: ds.$spacing-80 !default;
+  $cardview-fluent-card__field-caption-weight: ds.$font-weight-base-strong !default;
+  $cardview-fluent-card__cover-max-height: 140px !default; // dx-offscale: 140px
+  $cardview-fluent-card__cover--noimage__icon-size: ds.$spacing-320 !default;
+  $cardview-fluent-card__content-padding: ds.$spacing-80 !default;
+  $cardview-fluent-card__content-row-gap: ds.$spacing-40 !default;
+  $cardview-fluent-card__content__cell-padding-vertical: ds.$spacing-40 !default;
+  $cardview-fluent-card__content__cell-padding-horizontal: ds.$spacing-80 !default;
+
+  // Card - selected
+  $cardview-fluent-card--selected__field-caption-weight: $cardview-fluent-card__field-caption-weight !default;
+
+  // Header
+  $cardview-fluent-header-gap: ds.$spacing-40 !default;
+
+  // Header panel
+  $cardview-fluent-header-panel-vertical-margin: ds.$spacing-40 !default;
+  $cardview-fluent-header-panel--empty-line-height: ds.$line-height-title-sm !default;
+
+  // Header panel item - default
+  $cardview-fluent-header-panel__item-border-width: ds.$border-width-10 !default;
+  $cardview-fluent-header-panel__item-border-radius: ds.$border-radius-60 !default;
+  $cardview-fluent-header-panel__item-padding-horizontal: ds.$spacing-60 !default;
+  $cardview-fluent-header-panel__item-padding-vertical: ds.$spacing-30 !default;
+  $cardview-fluent-header-item__left-padding: ds.$spacing-30 !default;
+  $cardview-fluent-header-item__right-padding: ds.$spacing-10 !default;
+  $cardview-fluent-header-panel__item-text-weight: $cardview-fluent-common-text-weight !default;
+  $cardview-fluent-header-panel__item__sort-index-text-weight: ds.$font-weight-base-default !default;
+  $cardview-fluent-header-panel__item__icon-size: $global-icon-size !default;
+
+  // Header panel item - hovered
+  $cardview-fluent-header-panel__item--hovered-text-weight: $cardview-fluent-header-panel__item-text-weight !default;
+  $cardview-fluent-header-panel__item--hovered__sort-index-text-weight: $cardview-fluent-header-panel__item__sort-index-text-weight !default;
+
+  // Header panel item - disabled
+  $cardview-fluent-header-panel__item--disabled-text-weight: $cardview-fluent-header-panel__item-text-weight !default;
+  $cardview-fluent-header-panel__item--disabled__sort-index-text-weight: $cardview-fluent-header-panel__item__sort-index-text-weight !default;
+
+  // Header panel item - dragged
+  $cardview-fluent-header-panel__item--dragged-text-weight: $cardview-fluent-header-panel__item-text-weight !default;
+  $cardview-fluent-header-item__sort-indicator__border-size: ds.$border-width-10 !default;
+  $cardview-fluent-header-item__sort-indicator__border-radius: ds.$border-radius-40 !default;
+
+  // Header panel Drop-zone
+  $cardview-fluent-header-panel__dropzone-height: ds.$spacing-320 !default;
+  $cardview-fluent-header-panel__dropzone-top: ds.$spacing-minus-40  !default;
+  $cardview-fluent-header-panel__dropzone-border-width: 1.5px !default; // dx-offscale: 1.5px
+  $cardview-fluent-header-panel__dropzone-border-radius: ds.$border-radius-60 !default;
+
+  // Filter panel
+  $cardview-fluent-filter-panel-border-radius: 0 !default;
+
+  // Empty view
+  $cardview-fluent-nodata-view__icon-container-size: ds.$spacing-480 !default;
+  $cardview-fluent-nodata-view__icon-container-margin: ds.$spacing-80 !default;
+  $cardview-fluent-nodata-view__icon-size: ds.$spacing-320 !default;
+
+  // Search highlight
+  $cardview-fluent-card__content__field-value--highlighted-border-radius: ds.$border-radius-50 !default;
+  $cardview-fluent-card__content__field-value--highlighted-border-padding: .125em 0.2em !default; // dx-relative: proportional to card font-size, no em scale in package
+  $cardview-fluent-card__content__field-value--highlighted-text-weight: ds.$font-weight-500 !default; // dx-no-semantic-role: 500 off the weight-role scale
+
+  // Column chooser
+  $cardview-fluent-column-chooser--empty__message-horizontal-padding: ds.$spacing-160 !default;
+  $cardview-fluent-column-chooser__select-all-item-horizontal-padding: ds.$spacing-120 !default;
+}
+
+$cardview-border-radius: $cardview-fluent-common-border-radius !default;
+$cardview-text-weight: $cardview-fluent-common-text-weight !default;
+$cardview-cards-row-gap: $cardview-fluent-common-cards-row-gap !default;
+$cardview-cards-column-gap: $cardview-fluent-common-cards-column-gap !default;
+$cardview-gap: $cardview-fluent-common-gap !default;
+$cardview-padding: $cardview-fluent-common-padding !default;
+
+$cardview-card-min-width: $cardview-fluent-card-min-width !default;
+$cardview-card-border-width: $cardview-fluent-card-border-width !default;
+$cardview-card-border-radius: $cardview-fluent-card-border-radius !default;
+$cardview-card__header-height: $cardview-fluent-card__header-height !default;
+$cardview-card__header-text-size: $cardview-fluent-card__header-text-size !default;
+$cardview-card__header__selection-checkbox-padding-right: $cardview-fluent-card__header__selection-checkbox-padding-right !default;
+$cardview-card__field-caption-weight: $cardview-fluent-card__field-caption-weight !default;
+$cardview-card__cover-max-height: $cardview-fluent-card__cover-max-height !default;
+$cardview-card__cover--noimage__icon-size: $cardview-fluent-card__cover--noimage__icon-size !default;
+$cardview-card__content-padding: $cardview-fluent-card__content-padding !default;
+$cardview-card__content-row-gap: $cardview-fluent-card__content-row-gap !default;
+$cardview-card__content__cell-padding-vertical: $cardview-fluent-card__content__cell-padding-vertical !default;
+$cardview-card__content__cell-padding-horizontal: $cardview-fluent-card__content__cell-padding-horizontal !default;
+
+$cardview-card--selected__field-caption-weight: $cardview-fluent-card--selected__field-caption-weight !default;
+
+$cardview-header-gap: $cardview-fluent-header-gap !default;
+
+$cardview-header-panel-vertical-margin: $cardview-fluent-header-panel-vertical-margin !default;
+$cardview-header-panel--empty-line-height: $cardview-fluent-header-panel--empty-line-height !default;
+
+$cardview-header-panel__item-border-width: $cardview-fluent-header-panel__item-border-width !default;
+$cardview-header-panel__item-border-radius: $cardview-fluent-header-panel__item-border-radius !default;
+$cardview-header-panel__item-padding-horizontal: $cardview-fluent-header-panel__item-padding-horizontal !default;
+$cardview-header-panel__item-padding-vertical: $cardview-fluent-header-panel__item-padding-vertical !default;
+$cardview-header-panel__item-text-weight: $cardview-fluent-header-panel__item-text-weight !default;
+$cardview-header-panel__item__sort-index-text-weight: $cardview-fluent-header-panel__item__sort-index-text-weight !default;
+$cardview-header-panel__item__icon-size: $cardview-fluent-header-panel__item__icon-size !default;
+
+$cardview-header-panel__item--hovered-text-weight: $cardview-fluent-header-panel__item--hovered-text-weight !default;
+$cardview-header-panel__item--hovered__sort-index-text-weight: $cardview-fluent-header-panel__item--hovered__sort-index-text-weight !default;
+
+$cardview-header-panel__item--disabled-text-weight: $cardview-fluent-header-panel__item--disabled-text-weight !default;
+$cardview-header-panel__item--disabled__sort-index-text-weight: $cardview-fluent-header-panel__item--disabled__sort-index-text-weight !default;
+
+$cardview-header-panel__item--dragged-text-weight: $cardview-fluent-header-panel__item--dragged-text-weight !default;
+
+$cardview-header-panel__dropzone-height: $cardview-fluent-header-panel__dropzone-height !default;
+$cardview-header-panel__dropzone-top: $cardview-fluent-header-panel__dropzone-top !default;
+$cardview-header-panel__dropzone-border-width: $cardview-fluent-header-panel__dropzone-border-width !default;
+$cardview-header-panel__dropzone-border-radius: $cardview-fluent-header-panel__dropzone-border-radius !default;
+
+$cardview-filter-panel-border-radius: $cardview-fluent-filter-panel-border-radius !default;
+
+$cardview-nodata-view__icon-container-size: $cardview-fluent-nodata-view__icon-container-size !default;
+$cardview-nodata-view__icon-container-margin: $cardview-fluent-nodata-view__icon-container-margin !default;
+$cardview-nodata-view__icon-size: $cardview-fluent-nodata-view__icon-size !default;
+
+$cardview-card__content__field-value--highlighted-border-radius: $cardview-fluent-card__content__field-value--highlighted-border-radius !default;
+$cardview-card__content__field-value--highlighted-border-padding: $cardview-fluent-card__content__field-value--highlighted-border-padding !default;
+$cardview-card__content__field-value--highlighted-text-weight: $cardview-fluent-card__content__field-value--highlighted-text-weight !default;
+
+$cardview-column-chooser--empty__message-horizontal-padding: $cardview-fluent-column-chooser--empty__message-horizontal-padding !default;
+$cardview-column-chooser__select-all-item-horizontal-padding: $cardview-fluent-column-chooser__select-all-item-horizontal-padding !default;
+
+$cardview-header-item__left-padding: $cardview-fluent-header-item__left-padding !default;
+$cardview-header-item__right-padding: $cardview-fluent-header-item__right-padding !default;
+$cardview-header-item__sort-indicator__border-size: $cardview-fluent-header-item__sort-indicator__border-size !default;
+$cardview-header-item__sort-indicator__border-radius: $cardview-fluent-header-item__sort-indicator__border-radius !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/chat/_colors.scss
new file mode 100644
index 000000000000..c7d9c6f20226
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/chat/_colors.scss
@@ -0,0 +1,60 @@
+@use "../textEditor/colors" as textEditorColors;
+@use "../button/colors" as buttonColors;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$chat-bg-rest: ds.$color-surface-neutral-default-rest !default;
+
+$chat-border-rest: ds.$color-border-neutral-default-rest !default;
+$chat-message-box-border-rest: $chat-border-rest !default;
+$chat-message-box-file-bg-rest: buttonColors.$button-normal-text-bg-hovered !default;
+$chat-message-box-file-cancel-button-secondary-content-rest: buttonColors.$button-normal-text-bg-selected !default;
+$chat-message-editing-preview-accent-content-rest: ds.$color-surface-primary-default-rest !default;
+$chat-message-editing-preview-cancel-button-content-rest: textEditorColors.$text-editor-label-content-rest !default;
+
+$chat-avatar-content-rest: ds.$color-content-neutral-default-rest !default;
+
+$chat-avatar-bg-rest: ds.$color-surface-neutral-default-active !default;
+
+$chat-bubble-primary-content-rest: ds.$color-content-neutral-default-rest !default;
+
+$chat-bubble-primary-bg-rest: ds.$color-surface-primary-deep-rest !default;
+
+$chat-bubble-secondary-content-rest: ds.$color-content-neutral-default-rest !default;
+
+$chat-bubble-secondary-bg-rest: ds.$color-surface-neutral-deep-rest !default;
+
+$chat-information-author-name-content-rest: ds.$color-content-neutral-subdued-rest !default;
+
+$chat-information-timestamp-content-rest: ds.$color-content-neutral-subdued-rest !default;
+
+$chat-message-list-day-header-content-rest: ds.$color-content-neutral-subdued-rest !default;
+
+$chat-alert-list-content-rest: ds.$color-content-danger-default-rest !default;
+
+$chat-message-list-empty-icon-rest: ds.$color-content-neutral-subdued-rest !default;
+
+$chat-message-list-empty-icon-bg-rest: ds.$color-surface-neutral-subdued-rest !default;
+
+$chat-message-list-empty-message-content-rest: ds.$color-content-neutral-default-rest !default;
+
+$chat-message-list-empty-prompt-content-rest: ds.$color-content-neutral-subdued-rest !default;
+
+$chat-typing-indicator-content-rest: ds.$color-content-neutral-subdued-rest !default;
+
+$chat-typing-indicator-circle-center-bg-rest: ds.$color-content-neutral-subdued-rest !default;
+
+$chat-typing-indicator-circle-bg-rest: ds.$color-content-neutral-default-disabled !default;
+
+$chat-file-container-bg-rest: ds.$color-surface-neutral-default-rest !default;
+$chat-file-container-box-shadow-rest: ds.$box-shadow-sm !default;
+$chat-file-secondary-content-rest: ds.$color-content-neutral-subdued-rest !default;
+
+$chat-suggestions-box-shadow-rest: ds.$box-shadow-md !default;
+
+$chat-typing-indicator-bubble-bg-rest: $chat-bubble-secondary-bg-rest !default;
+
+$chat-message-list-context-menu-delete-button-content-rest: ds.$color-content-danger-default-rest !default;
+$chat-message-list-context-menu-delete-button-content-focused: ds.$color-content-danger-default-rest !default;
+$chat-message-list-context-menu-delete-button-bg-focused: ds.$color-surface-neutral-default-hovered !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/chat/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/chat/_index.scss
new file mode 100644
index 000000000000..96b86c8d429e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/chat/_index.scss
@@ -0,0 +1,153 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/chat" with (
+  $chat-file-name-font-weight: $chat-file-name-font-weight,
+  $chat-editing-preview-caption-font-weight: $chat-editing-preview-caption-font-weight,
+);
+@use "../../base/chat/mixins" as *;
+@use "../common/mixins" as *;
+
+// adduse
+
+@include chat(
+  $chat-bg-rest,
+  $chat-border-rest,
+  $chat-border-radius,
+);
+@include chat-avatar(
+  $chat-avatar-size,
+  $chat-avatar-content-rest,
+  $chat-avatar-bg-rest,
+);
+@include chat-file(
+  $chat-file-container-width,
+  $chat-file-container-padding,
+  $chat-file-container-bg-rest,
+  $chat-file-container-border-radius,
+  $chat-file-container-box-shadow-rest,
+  $chat-file-button-size,
+  $chat-file-secondary-font-size,
+  $chat-file-secondary-content-rest,
+  $chat-file-base-section-gap,
+  $chat-file-size-max-width,
+  $chat-file-icon-font-size,
+);
+@include chat-fileview(
+  $chat-file-view-items-gap,
+  $chat-file-container-width,
+);
+@include chat-alertlist(
+  $chat-alert-list-content-rest,
+  $chat-alerts-padding-block,
+  $chat-alerts-padding-inline,
+  $chat-alert-padding-block,
+  $chat-alerts-row-gap,
+);
+@include chat-messagebox(
+  $chat-message-box-padding,
+  $chat-message-box-border-rest,
+  $chat-message-box-gap,
+  $chat-message-box-textarea-border-radius,
+  $chat-message-box-textarea-padding,
+  $chat-message-box-toolbar-min-height,
+  $chat-file-container-width,
+  $chat-message-box-files-container-padding,
+  $chat-message-box-files-container-padding-block-start,
+  $chat-message-box-file-bg-rest,
+  $chat-message-box-file-cancel-button-secondary-content-rest,
+  $chat-file-container-box-shadow-rest,
+);
+@include chat-messagebubble(
+  $chat-bubble-padding,
+  $chat-bubble-border-radius,
+  $chat-bubble-secondary-content-rest,
+  $chat-bubble-secondary-bg-rest,
+  $chat-bubble-primary-content-rest,
+  $chat-bubble-primary-bg-rest,
+  $chat-bubble-container-gap,
+  $chat-bubble-delete-gap,
+  $chat-bubble-delete-icon-size,
+  $chat-bubble-gap,
+);
+@include chat-messagegroup(
+  $chat-message-group-gap,
+  $chat-message-group-start-grid-template-columns,
+  $chat-message-group-alignment-start-gap,
+  $chat-message-group-padding,
+  $chat-information-font-size,
+  $chat-information-author-name-content-rest,
+  $chat-information-timestamp-content-rest,
+  $chat-information-gap,
+  $chat-information-icon-size,
+  $chat-information-edited-gap,
+);
+@include chat-messagelist-empty(
+  $chat-message-list-padding,
+  $chat-message-list-empty-icon-box-size,
+  $chat-message-list-empty-icon-size,
+  $chat-message-list-empty-icon-margin-block-end,
+  $chat-message-list-empty-row-gap,
+  $chat-message-list-empty-icon-rest,
+  $chat-message-list-empty-icon-bg-rest,
+  $chat-message-list-empty-message-font-size,
+  $chat-message-list-empty-message-content-rest,
+  $chat-message-list-empty-prompt-font-size,
+  $chat-message-list-empty-prompt-content-rest,
+);
+@include chat-messagelist(
+  $chat-message-list-padding,
+  $chat-message-list-day-header-content-rest,
+  $chat-message-list-day-header-padding-block-end,
+  $chat-message-list-day-header-first-padding-block-start,
+  $chat-message-list-day-header-font-size,
+);
+@include chat-messagelist-contextmenu(
+  $chat-message-list-context-menu-delete-button-content-rest,
+  $chat-message-list-context-menu-delete-button-content-focused,
+  $chat-message-list-context-menu-delete-button-bg-focused,
+);
+@include chat-typingindicator(
+  $chat-typing-indicator-grid-template-columns,
+  $chat-typing-indicator-padding,
+  $chat-typing-indicator-row-gap,
+  $chat-typing-indicator-font-size,
+  $chat-typing-indicator-content-rest,
+  $chat-typing-indicator-bubble-padding-block,
+  $chat-typing-indicator-bubble-padding-inline,
+  $chat-typing-indicator-bubble-border-radius,
+  $chat-typing-indicator-bubble-bg-rest,
+  $chat-typing-indicator-bubble-column-gap,
+  $chat-typing-indicator-circle-size,
+  $chat-typing-indicator-circle-center-size,
+  $chat-typing-indicator-circle-border-radius,
+  $chat-typing-indicator-circle-bg-rest,
+  $chat-typing-indicator-circle-center-bg-rest,
+);
+@include message-editing-preview(
+  $chat-message-editing-preview-content-padding-inline,
+  $chat-message-editing-preview-content-row-gap,
+  $chat-message-editing-preview-accent-content-rest,
+  $chat-message-editing-preview-caption-font-size,
+  $chat-message-box-padding,
+  $chat-message-editing-preview-border-width,
+  $chat-message-editing-preview-cancel-button-content-rest,
+);
+@include chat-confirmation-popup(
+  $chat-border-radius,
+  $chat-confirmation-popup-content-padding,
+  0 $chat-confirmation-popup-toolbar-padding-block,
+  $chat-confirmation-popup-toolbar-padding-inline,
+  $chat-confirmation-popup-toolbar-gap,
+);
+@include chat-suggestions(
+  $chat-suggestions-padding,
+  $chat-suggestions-button-border-radius,
+  $chat-suggestions-border-width,
+  $chat-suggestions-button-max-width,
+  $chat-suggestions-gap,
+  $chat-suggestions-box-shadow-rest,
+);
+
+.dx-chat-file {
+  @include dx-base-typography();
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/chat/_sizes.scss
new file mode 100644
index 000000000000..a3e1565345fb
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/chat/_sizes.scss
@@ -0,0 +1,170 @@
+@use "sass:math";
+@use "../sizes" as *;
+@use "../popup/sizes" as popupSizes;
+@use "../../../_design-system/variables/ds" as ds;
+@use "../button/sizes" as buttonSizes;
+@use "../typography/sizes" as typographySizes;
+
+// adduse
+
+$chat-border-radius: calc(#{$global-border-radius} * 3) !default;
+$chat-bubble-border-radius: null !default;
+$chat-bubble-padding: null !default;
+$chat-bubble-container-gap: ds.$spacing-40 !default;
+$chat-bubble-delete-gap: null !default;
+$chat-bubble-delete-icon-size: null !default;
+$chat-message-box-padding: null !default;
+$chat-message-box-textarea-padding: null !default;
+$chat-message-box-textarea-border-radius: null !default;
+$chat-message-box-toolbar-min-height: null !default;
+$chat-message-box-gap: ds.$spacing-80 !default;
+$chat-message-box-files-container-padding: ds.$spacing-30 !default;
+$chat-message-box-files-container-padding-block-start: ds.$spacing-20 !default;
+$chat-message-list-padding: null !default;
+$chat-message-group-gap: ds.$spacing-40 !default;
+$chat-message-group-padding: null !default;
+$chat-information-gap: ds.$spacing-80 !default;
+$chat-avatar-size: ds.$spacing-320 !default;
+$chat-message-group-start-grid-template-columns: auto 82.5% 1fr !default;
+$chat-message-group-alignment-start-gap: ds.$spacing-120 !default;
+$chat-information-font-size: ds.$font-size-caption-md !default;
+$chat-information-icon-size: ds.$spacing-120 !default;
+$chat-information-edited-gap: ds.$spacing-20 !default;
+
+$chat-alerts-padding-block: null !default;
+$chat-alerts-padding-inline: ds.$spacing-80 !default;
+$chat-alerts-row-gap: null !default;
+$chat-alert-padding-block: null !default;
+
+$chat-suggestions-padding: null !default;
+$chat-suggestions-border-width: $global-border-width !default;
+$chat-suggestions-button-border-radius: buttonSizes.$button-border-radius !default;
+$chat-suggestions-button-max-width: 200px !default; // dx-offscale: 200px
+$chat-suggestions-gap: ds.$spacing-120 !default;
+
+$chat-message-editing-preview-caption-font-size: typographySizes.$typography-xs-font-size !default;
+$chat-message-editing-preview-content-row-gap: null !default;
+$chat-message-editing-preview-content-padding-inline: null !default;
+$chat-message-editing-preview-border-width: ds.$border-width-30 !default;
+
+$chat-message-list-empty-icon-box-size: null !default;
+$chat-message-list-empty-icon-size: null !default;
+$chat-message-list-empty-icon-margin-block-end: null !default;
+$chat-message-list-empty-row-gap: null !default;
+$chat-message-list-empty-message-font-size: null !default;
+$chat-message-list-empty-prompt-font-size: null !default;
+$chat-message-list-day-header-padding-block-end: ds.$spacing-120 !default;
+$chat-message-list-day-header-first-padding-block-start: ds.$spacing-200 !default;
+$chat-message-list-day-header-font-size: ds.$font-size-caption-md !default;
+
+$chat-typing-indicator-grid-template-columns: $chat-message-group-start-grid-template-columns !default;
+$chat-typing-indicator-padding: null !default;
+$chat-typing-indicator-row-gap: $chat-message-group-gap !default;
+$chat-typing-indicator-font-size: $chat-information-font-size !default;
+$chat-typing-indicator-bubble-padding-block: null !default;
+$chat-typing-indicator-bubble-padding-inline: null !default;
+$chat-typing-indicator-bubble-border-radius: null !default;
+$chat-typing-indicator-bubble-column-gap: ds.$spacing-40 !default;
+$chat-typing-indicator-circle-size: null !default;
+$chat-typing-indicator-circle-center-size: null !default;
+$chat-typing-indicator-circle-border-radius: 999em !default;
+
+$chat-confirmation-popup-content-padding: popupSizes.$popup-content-padding-block !default;
+$chat-confirmation-popup-toolbar-padding-block: popupSizes.$popup-content-with-title-bottom-padding !default;
+$chat-confirmation-popup-toolbar-padding-inline: popupSizes.$popup-content-with-title-top-padding !default;
+$chat-confirmation-popup-toolbar-gap: null !default;
+
+$chat-file-container-width: 17.14em !default; // dx-relative: proportional to chat font-size, no em scale in package
+$chat-file-container-padding: ds.$spacing-70 ds.$spacing-80 !default;
+$chat-file-container-border-radius: $global-border-radius !default;
+$chat-file-button-size: buttonSizes.$button-height !default;
+$chat-file-secondary-font-size: ds.$font-size-caption-sm !default;
+$chat-file-base-section-gap: ds.$spacing-40 !default;
+$chat-file-size-max-width: 4em !default; // dx-relative
+$chat-file-icon-font-size: null !default;
+$chat-file-view-items-gap: ds.$spacing-80 !default;
+$chat-bubble-gap: ds.$spacing-80 !default;
+
+@if $size == "default" {
+  $chat-bubble-border-radius: calc(#{$global-border-radius} * 3) !default;
+  $chat-bubble-padding: ds.$spacing-80 ds.$spacing-120 !default;
+  $chat-bubble-delete-gap: ds.$spacing-40 !default;
+  $chat-bubble-delete-icon-size: ds.$spacing-200 !default;
+  $chat-message-box-padding: ds.$spacing-200 !default;
+  $chat-message-box-textarea-border-radius: ds.$border-radius-80 !default;
+  $chat-message-box-textarea-padding: ds.$spacing-120 !default;
+  $chat-message-box-toolbar-min-height: ds.$spacing-320 !default;
+  $chat-message-list-padding: ds.$spacing-200 !default;
+  $chat-message-group-padding: ds.$spacing-240 !default;
+
+  $chat-alerts-padding-block: ds.$spacing-120 !default;
+  $chat-alerts-row-gap: ds.$spacing-20 !default;
+  $chat-alert-padding-block: ds.$spacing-60 !default;
+
+  $chat-suggestions-padding: ds.$spacing-200 !default;
+
+  $chat-message-editing-preview-content-padding-inline: ds.$spacing-120 !default;
+  $chat-message-editing-preview-content-row-gap: ds.$spacing-40 !default;
+
+  $chat-message-list-empty-icon-box-size: ds.$spacing-640 !default;
+  $chat-message-list-empty-icon-size: ds.$spacing-400 !default;
+  $chat-message-list-empty-icon-margin-block-end: ds.$spacing-120 !default;
+  $chat-message-list-empty-row-gap: ds.$spacing-40 !default;
+  $chat-message-list-empty-message-font-size: ds.$font-size-180 !default; // dx-no-semantic-role: 180 is off the font-size-role scale
+  $chat-message-list-empty-prompt-font-size: ds.$font-size-base-md !default;
+
+  $chat-typing-indicator-circle-size: math.div(8, 14) * 1em !default;
+  $chat-typing-indicator-circle-center-size: math.div(12, 14) * 1em !default;
+  $chat-typing-indicator-bubble-padding-block: ds.$spacing-120 !default;
+  $chat-typing-indicator-bubble-padding-inline: ds.$spacing-200 !default;
+  $chat-typing-indicator-padding: $chat-message-group-padding !default;
+  $chat-typing-indicator-bubble-border-radius: $chat-bubble-border-radius !default;
+
+  $chat-confirmation-popup-toolbar-gap: ds.$spacing-80 !default;
+
+  $chat-file-icon-font-size: ds.$font-size-200 !default; // dx-icon-glyph-size: text roles not applicable
+}
+
+@else if $size == "compact" {
+  $chat-bubble-border-radius: calc(#{$global-border-radius} * 2) !default;
+  $chat-bubble-padding: ds.$spacing-60 ds.$spacing-80 !default;
+  $chat-bubble-delete-gap: ds.$spacing-20 !default;
+  $chat-bubble-delete-icon-size: ds.$spacing-160 !default;
+  $chat-message-box-padding: ds.$spacing-160 !default;
+  $chat-message-box-textarea-border-radius: ds.$border-radius-80 !default;
+  $chat-message-box-textarea-padding: ds.$spacing-80 !default;
+  $chat-message-box-toolbar-min-height: ds.$spacing-240 !default;
+  $chat-message-list-padding: ds.$spacing-160 !default;
+  $chat-message-group-padding: ds.$spacing-120 !default;
+
+  $chat-alerts-padding-block: ds.$spacing-80 !default;
+  $chat-alerts-row-gap: ds.$spacing-20 !default;
+  $chat-alert-padding-block: ds.$spacing-50 !default;
+
+  $chat-suggestions-padding: ds.$spacing-160 !default;
+
+  $chat-message-editing-preview-content-padding-inline: ds.$spacing-80 !default;
+  $chat-message-editing-preview-content-row-gap: ds.$spacing-20 !default;
+
+  $chat-message-list-empty-icon-box-size: ds.$spacing-480 !default;
+  $chat-message-list-empty-icon-size: ds.$spacing-320 !default;
+  $chat-message-list-empty-icon-margin-block-end: ds.$spacing-140 !default;
+  $chat-message-list-empty-row-gap: ds.$spacing-20 !default;
+  $chat-message-list-empty-message-font-size: ds.$font-size-140 !default; // dx-no-semantic-role: default branch (180) is off the role scale
+  $chat-message-list-empty-prompt-font-size: ds.$font-size-base-sm !default;
+
+  $chat-typing-indicator-circle-size: math.div(8, 12) * 1em !default;
+  $chat-typing-indicator-circle-center-size: math.div(12, 12) * 1em !default;
+  $chat-typing-indicator-bubble-padding-block: ds.$spacing-80 !default;
+  $chat-typing-indicator-bubble-padding-inline: ds.$spacing-120 !default;
+  $chat-typing-indicator-padding: $chat-message-group-padding !default;
+  $chat-typing-indicator-bubble-border-radius: $chat-bubble-border-radius !default;
+
+  $chat-confirmation-popup-toolbar-gap: ds.$spacing-40 !default;
+
+  $chat-file-icon-font-size: ds.$font-size-160 !default; // dx-icon-glyph-size: text roles not applicable
+}
+
+// Base-layer values injected with design tokens (wave B1)
+$chat-file-name-font-weight: ds.$font-weight-base-strong !default;
+$chat-editing-preview-caption-font-weight: ds.$font-weight-500 !default; // dx-no-semantic-role: 500 is off the weight-role scale (400/600/700)
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/checkBox/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/checkBox/_colors.scss
new file mode 100644
index 000000000000..378407c5cbff
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/checkBox/_colors.scss
@@ -0,0 +1,28 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$check-box-border-rest: ds.$color-border-neutral-accessible-rest !default;
+$check-box-border-hovered: ds.$color-border-neutral-accessible-hovered !default;
+$check-box-border-active: ds.$color-border-neutral-accessible-active !default;
+
+$check-box-icon-bg-rest: ds.$color-content-neutral-default-inverted-rest !default;
+
+$check-box-icon-checked-bg-rest: ds.$color-surface-primary-default-rest !default;
+$check-box-icon-checked-bg-hovered: ds.$color-surface-primary-default-hovered !default;
+$check-box-icon-checked-bg-focused: ds.$color-surface-primary-default-active !default;
+
+$check-box-invalid-border-rest: ds.$color-border-danger-compound-rest !default;
+$check-box-invalid-border-hovered: ds.$color-border-danger-compound-hovered !default;
+$check-box-invalid-border-focused: ds.$color-border-danger-compound-active !default;
+
+$check-box-invalid-bg-rest: ds.$color-surface-danger-compound-rest !default;
+$check-box-invalid-bg-hovered: ds.$color-surface-danger-compound-hovered !default;
+$check-box-invalid-bg-focused: ds.$color-surface-danger-compound-active !default;
+
+$check-box-invalid-mark-bg-rest: ds.$color-content-danger-compound-rest !default;
+$check-box-invalid-mark-bg-hovered: ds.$color-content-danger-compound-hovered !default;
+$check-box-invalid-mark-bg-focused: ds.$color-content-danger-compound-active !default;
+
+$check-box-border-disabled: ds.$color-border-neutral-accessible-disabled !default;
+$check-box-icon-bg-disabled: ds.$color-content-neutral-default-disabled !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/checkBox/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/checkBox/_index.scss
new file mode 100644
index 000000000000..abaadbfabe9e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/checkBox/_index.scss
@@ -0,0 +1,225 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../../base/checkBox" with (
+  $checkbox-text-padding-inline-start: $check-box-text-padding-inline-start,
+);
+@use "../../base/checkBox/mixins" as *;
+
+// adduse
+
+.dx-checkbox-icon {
+  width: $check-box-arrow-icon-size;
+  height: $check-box-arrow-icon-size;
+  border-width: $check-box-border-width;
+  border-style: solid;
+  border-color: $check-box-border-rest;
+  border-radius: $check-box-icon-border-radius;
+  background-color: $check-box-icon-bg-rest;
+  font-size: $check-box-icon-font-size;
+
+  &::before {
+    z-index: 1;
+  }
+}
+
+.dx-checkbox-text {
+  padding-inline-start: $fluent-checkbox-text-padding-start;
+  padding-inline-end: $check-box-text-padding-inline-end;
+}
+
+.dx-checkbox {
+  .dx-checkbox-container {
+    overflow: visible;
+  }
+
+  &.dx-invalid {
+    .dx-checkbox-icon {
+      border-color: $check-box-invalid-border-rest;
+    }
+  }
+
+  &.dx-state-readonly {
+    .dx-checkbox-icon {
+      border-color: $check-box-border-disabled;
+    }
+  }
+
+  &.dx-state-hover {
+    .dx-checkbox-icon {
+      border-color: $check-box-border-hovered;
+    }
+
+    &.dx-invalid {
+      .dx-checkbox-icon {
+        border-color: $check-box-invalid-border-hovered;
+      }
+    }
+  }
+
+  &.dx-state-active {
+    .dx-checkbox-icon {
+      border-color: $check-box-border-active;
+    }
+  }
+
+  &.dx-state-focused {
+    .dx-checkbox-icon {
+      border-color: $check-box-icon-checked-bg-focused;
+    }
+  }
+
+  &.dx-state-active,
+  &.dx-state-focused {
+    &.dx-invalid {
+      .dx-checkbox-icon {
+        border-color: $check-box-invalid-border-focused;
+      }
+    }
+  }
+
+  &.dx-state-disabled,
+  .dx-state-disabled & {
+    opacity: 1;
+
+    .dx-checkbox-icon {
+      border-color: $check-box-border-disabled;
+    }
+  }
+}
+
+.dx-checkbox-checked {
+  .dx-checkbox-icon {
+    color: $check-box-icon-bg-rest;
+    border-color: $check-box-icon-checked-bg-rest;
+    background-color: $check-box-icon-checked-bg-rest;
+
+    @include dx-icon(check);
+
+    font-size: $check-box-icon-font-size;
+
+    @include dx-checkbox-icon-centered($check-box-arrow-icon-size, $check-box-arrow-icon-size, $check-box-arrow-font-size);
+  }
+
+  &.dx-state-hover {
+    .dx-checkbox-icon {
+      border-color: $check-box-icon-checked-bg-hovered;
+      background-color: $check-box-icon-checked-bg-hovered;
+    }
+
+    &.dx-invalid {
+      .dx-checkbox-icon {
+        border-color: $check-box-invalid-border-hovered;
+        background-color: $check-box-invalid-bg-hovered;
+      }
+    }
+  }
+
+  &.dx-state-active,
+  &.dx-state-focused {
+    .dx-checkbox-icon {
+      border-color: $check-box-icon-checked-bg-focused;
+      background-color: $check-box-icon-checked-bg-focused;
+    }
+
+    &.dx-invalid {
+      .dx-checkbox-icon {
+        border-color: $check-box-invalid-border-focused;
+        background-color: $check-box-invalid-bg-focused;
+      }
+    }
+  }
+
+  &.dx-invalid {
+    .dx-checkbox-icon {
+      background-color: $check-box-invalid-bg-rest;
+    }
+  }
+
+  &.dx-state-readonly,
+  &.dx-state-disabled,
+  .dx-state-disabled &,
+  &.dx-state-readonly.dx-invalid {
+    .dx-checkbox-icon {
+      color: $check-box-icon-bg-disabled;
+      background-color: $check-box-icon-bg-rest;
+    }
+  }
+}
+
+@include dx-checkbox-icon-indeterminate(
+  $check-box-icon-bg-rest,
+  $check-box-icon-checked-bg-rest,
+  $check-box-indeterminate-icon-height,
+  $check-box-indeterminate-icon-width,
+  $check-box-indeterminate-icon-border-radius,
+);
+
+.dx-checkbox-indeterminate {
+  .dx-checkbox-icon {
+    border-color: $check-box-icon-checked-bg-rest;
+  }
+
+  &.dx-invalid {
+    .dx-checkbox-icon {
+      &::before {
+        background-color: $check-box-invalid-mark-bg-rest;
+      }
+    }
+  }
+
+  &.dx-state-hover {
+    .dx-checkbox-icon {
+      border-color: $check-box-icon-checked-bg-hovered;
+
+      &::before {
+        background-color: $check-box-icon-checked-bg-hovered;
+      }
+    }
+
+    &.dx-invalid {
+      .dx-checkbox-icon {
+        border-color: $check-box-invalid-border-hovered;
+
+        &::before {
+          background-color: $check-box-invalid-mark-bg-hovered;
+        }
+      }
+    }
+  }
+
+  &.dx-state-active,
+  &.dx-state-focused {
+    .dx-checkbox-icon {
+      border-color: $check-box-icon-checked-bg-focused;
+
+      &::before {
+        background-color: $check-box-icon-checked-bg-focused;
+      }
+    }
+
+    &.dx-invalid {
+      .dx-checkbox-icon {
+        border-color: $check-box-invalid-border-focused;
+
+        &::before {
+          background-color: $check-box-invalid-mark-bg-focused;
+        }
+      }
+    }
+  }
+
+  &.dx-state-readonly,
+  &.dx-state-disabled,
+  .dx-state-disabled &,
+  &.dx-state-readonly.dx-invalid {
+    .dx-checkbox-icon {
+      &::before {
+        background-color: $check-box-icon-bg-disabled;
+      }
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/checkBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/checkBox/_sizes.scss
new file mode 100644
index 000000000000..2cac29ad4dc6
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/checkBox/_sizes.scss
@@ -0,0 +1,32 @@
+@use "../sizes" as *;
+@use "colors" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$check-box-icon-font-size: ds.$font-size-160 !default; // dx-icon-glyph-size: text roles not applicable
+
+$check-box-border-width: ds.$border-width-10 !default;
+$check-box-icon-border-radius: ds.$border-radius-20 !default;
+
+$check-box-arrow-icon-size: 1em !default; // dx-icon-glyph-size: relative to checkbox font-size, no em scale in package
+$check-box-arrow-font-size: 0.75em !default; // dx-icon-glyph-size
+$check-box-indeterminate-icon-height: 0.5em !default; // dx-icon-glyph-size
+$check-box-indeterminate-icon-width: 0.5em !default; // dx-icon-glyph-size
+$check-box-indeterminate-icon-border-radius: ds.$border-radius-20 !default;
+
+$fluent-checkbox-text-padding-start: null !default;
+$check-box-text-padding-inline-end: null !default;
+
+@if $size == "default" {
+  $fluent-checkbox-text-padding-start: ds.$spacing-120 !default;
+  $check-box-text-padding-inline-end: ds.$spacing-80 !default;
+}
+
+@else if $size == "compact" {
+  $fluent-checkbox-text-padding-start: ds.$spacing-80 !default;
+  $check-box-text-padding-inline-end: ds.$spacing-60 !default;
+}
+
+// Base-layer sizing injected with design tokens (wave B2)
+$check-box-text-padding-inline-start: ds.$spacing-50 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/color.scss b/packages/devextreme-scss/scss/widgets/fluent-next/color.scss
new file mode 100644
index 000000000000..c68bdf88940c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/color.scss
@@ -0,0 +1,36 @@
+@use "sass:math";
+@use "sass:color";
+
+@function difference($minuend, $subtrahend) {
+  @return color.adjust(
+        $minuend,
+        $red: - (color.channel($subtrahend, "red", $space: rgb)),
+        $green: - (color.channel($subtrahend, "green", $space: rgb)),
+        $blue: - (color.channel($subtrahend, "blue", $space: rgb)));
+}
+
+@function screen($color1, $color2) {
+  $r1: math.div(color.channel($color1, "red", $space: rgb), 255);
+  $g1: math.div(color.channel($color1, "green", $space: rgb), 255);
+  $b1: math.div(color.channel($color1, "blue", $space: rgb), 255);
+
+  $r2: math.div(color.channel($color2, "red", $space: rgb), 255);
+  $g2: math.div(color.channel($color2, "green", $space: rgb), 255);
+  $b2: math.div(color.channel($color2, "blue", $space: rgb), 255);
+
+  @return color.change(
+        $color1,
+        $red: ($r1 + $r2 - $r1 * $r2) * 255,
+        $green: ($g1 + $g2 - $g1 * $g2) * 255,
+        $blue: ($b1 + $b2 - $b1 * $b2) * 255);
+}
+
+@function adjust-if-not-achromatic($color, $hue, $saturation, $lightness) {
+  $out: color.adjust($color, $saturation: $saturation, $lightness: $lightness, $space: hsl);
+
+  @if not color.is-powerless($out, "hue", $space: hsl) {
+    $out: color.adjust($out, $hue: $hue, $space: hsl);
+  }
+
+  @return $out;
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_colors.scss
new file mode 100644
index 000000000000..45d551368e66
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_colors.scss
@@ -0,0 +1,7 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$color-box-preview-icon-rest: ds.$color-content-neutral-subdued-rest !default;
+
+$color-box-content-disabled: ds.$color-content-neutral-default-disabled !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_index.scss
new file mode 100644
index 000000000000..db719a0a543e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_index.scss
@@ -0,0 +1,74 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../colorView/colors" as colorViewColors;
+@use "../../base/colorBox" with (
+  $colorbox-texteditor-input-container-width: $color-box-input-container-width,
+  $colorbox-texteditor-input-container-height: $color-box-input-container-height,
+  $colorbox-texteditor-input-container-inset-inline-start: $color-box-input-container-inset-inline-start,
+  $colorbox-overlay-padding-2: $color-box-overlay-padding,
+  $colorbox-toolbar-item-padding-right: $color-box-toolbar-item-padding-inline-end,
+);
+@use "../../base/colorBox/mixins" as *;
+
+// adduse
+@use "../colorView";
+@use "../dropDownEditor";
+
+
+.dx-colorbox {
+  .dx-colorbox-input-container {
+    .dx-placeholder::before,
+    .dx-colorbox-input {
+      padding-inline-start: $color-box-preview-min-width;
+    }
+
+    &::after {
+      left: calc(#{$color-box-preview-inset-inline-start} + 1px);
+    }
+  }
+
+  &.dx-texteditor {
+    .dx-texteditor-label {
+      .dx-label-before {
+        min-width: $color-box-preview-min-width;
+      }
+    }
+  }
+}
+
+.dx-colorbox-color-result-preview {
+  position: absolute;
+  top: 50%;
+  z-index: 2;
+  width: $color-box-preview-icon-size;
+  height: $color-box-preview-icon-size;
+  margin-top: calc(#{$color-box-preview-icon-size} / -2);
+  inset-inline-start: $color-box-preview-inset-inline-start;
+  border: $color-box-preview-border;
+  border-color: colorViewColors.$color-view-border-rest;
+
+  .dx-icon-colordismiss {
+    color: $color-box-preview-icon-rest;
+  }
+
+  .dx-state-disabled & {
+    .dx-icon-colordismiss {
+      color: $color-box-content-disabled;
+    }
+  }
+}
+
+.dx-colorbox-overlay {
+  &.dx-overlay-content {
+    background-color: colorViewColors.$color-view-content-box-overlay-bg-rest;
+  }
+
+  .dx-popup-content {
+    padding: $color-box-overlay-content-padding;
+  }
+
+  padding: 0;
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_sizes.scss
new file mode 100644
index 000000000000..f48bcf5322da
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_sizes.scss
@@ -0,0 +1,30 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$color-box-overlay-content-padding: null !default;
+$color-box-preview-inset-inline-start: null !default;
+$color-box-preview-icon-size: $global-icon-size !default;
+
+@if $size == "default" {
+  $color-box-overlay-content-padding: ds.$spacing-200 !default;
+  $color-box-preview-inset-inline-start: ds.$spacing-120 !default;
+}
+
+@else if $size == "compact" {
+  $color-box-overlay-content-padding: ds.$spacing-160 !default;
+  $color-box-preview-inset-inline-start: ds.$spacing-80 !default;
+}
+
+$color-box-preview-min-width: calc(#{$color-box-preview-inset-inline-start} * 2 + #{$color-box-preview-icon-size}) !default;
+
+// Values hoisted from style-file literals (tokenized)
+$color-box-preview-border: ds.$border-width-10 solid !default;
+
+// Base-layer sizing injected with design tokens (wave B2)
+$color-box-input-container-width: ds.$spacing-150 !default;
+$color-box-input-container-height: ds.$spacing-150 !default;
+$color-box-input-container-inset-inline-start: ds.$spacing-140 !default;
+$color-box-overlay-padding: ds.$spacing-200 !default;
+$color-box-toolbar-item-padding-inline-end: ds.$spacing-100 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_colors.scss
new file mode 100644
index 000000000000..72d4e7c9b9a6
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_colors.scss
@@ -0,0 +1,11 @@
+@use "../../../_design-system/variables/ds" as ds;
+@use "../common/colors" as *;
+
+// adduse
+
+$color-view-content-box-overlay-bg-rest: $surface-overlay-rest !default;
+$color-view-bg-box-palette-cell-bg-rest: $color-view-content-box-overlay-bg-rest !default;
+$color-view-border-rest: ds.$color-border-neutral-default-rest !default;
+$color-view-label-content-rest: ds.$color-content-neutral-subdued-rest !default;
+$color-view-handle-content-rest: ds.$color-surface-neutral-default-rest !default;
+$color-view-handle-border-rest: ds.$color-border-neutral-default-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_index.scss
new file mode 100644
index 000000000000..3766114d9a78
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_index.scss
@@ -0,0 +1,117 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/colorView/mixins" as *;
+@use "../../base/colorView";
+
+// adduse
+
+@include dx-base-colorview-styles($color-view-handle-content-rest, $color-view-handle-border-rest);
+
+.dx-colorview-container {
+  width: $color-view-container-width;
+
+  label {
+    line-height: $color-view-container-line-height;
+    display: flex;
+    align-items: center;
+    margin-bottom: $color-view-container-margin-block-end;
+
+    &.dx-colorview-label-hex {
+      margin: $color-view-container-hex-margin;
+    }
+
+    &.dx-colorview-alpha-channel-label {
+      margin: 0 0 0 $color-view-container-alpha-label-margin;
+      width: $color-view-container-alpha-label-width;
+    }
+
+    .dx-texteditor {
+      width: $color-view-container-textbox-width;
+      margin: $color-view-container-textbox-margin;
+    }
+  }
+}
+
+.dx-colorview-hue-scale-cell {
+  margin-left: $color-view-hue-scale-margin;
+}
+
+.dx-colorview-palette {
+  width: $color-view-palette-width;
+  height: $color-view-palette-height;
+}
+
+.dx-colorview-alpha-channel-scale {
+  width: $color-view-palette-width;
+}
+
+.dx-colorview-container-row.dx-colorview-alpha-channel-row {
+  margin-top: $color-view-alpha-margin;
+  display: flex;
+  align-items: center;
+}
+
+.dx-colorview-hue-scale {
+  width: $color-view-hue-scale-width;
+  height: $color-view-hue-scale-height;
+}
+
+.dx-colorview-alpha-channel-cell {
+  width: $color-view-alpha-width;
+}
+
+.dx-colorview-hue-scale-wrapper {
+  height: $color-view-hue-scale-height + 2;
+}
+
+.dx-colorview-color-preview {
+  width: 100%;
+  height: $color-view-color-preview-height;
+}
+
+.dx-colorview-controls-container {
+  width: $color-view-controls-container-width;
+  margin-left: $color-view-controls-container-margin;
+}
+
+.dx-colorview-container label { // stylelint-disable-line no-duplicate-selectors
+  color: $color-view-label-content-rest;
+}
+
+.dx-colorview-palette-cell,
+.dx-colorview-alpha-channel-border,
+.dx-colorview-hue-scale-wrapper,
+.dx-colorview-color-preview-container {
+  padding: $color-view-color-preview-container-padding;
+  margin: $color-view-color-preview-container-margin;
+  margin-top: 0;
+  background-color: $color-view-bg-box-palette-cell-bg-rest;
+  box-shadow: 0 0 0 1px $color-view-border-rest;
+}
+
+.dx-colorview-color-preview-container {
+  margin-bottom: $color-view-preview-container-margin;
+}
+
+.dx-rtl {
+  .dx-colorview-controls-container {
+    margin-left: 0;
+    margin-right: $color-view-controls-container-margin;
+  }
+
+  .dx-colorview-hue-scale-cell {
+    margin-left: 0;
+    margin-right: $color-view-hue-scale-margin;
+  }
+
+  .dx-colorview-container {
+    label {
+      &.dx-colorview-alpha-channel-label {
+        margin-left: 0;
+        margin-right: $color-view-container-alpha-label-margin;
+      }
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_sizes.scss
new file mode 100644
index 000000000000..d53ccb7db47e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_sizes.scss
@@ -0,0 +1,35 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$color-view-container-width: 450px !default; // dx-offscale: 450px
+$color-view-palette-width: 288px !default; // dx-offscale: 288px
+$color-view-palette-height: 299px !default; // dx-offscale: 299px
+$color-view-alpha-margin: ds.$spacing-100 !default;
+$color-view-hue-scale-width: ds.$spacing-180 !default;
+$color-view-hue-scale-margin: ds.$spacing-190 !default;
+$color-view-color-preview-height: ds.$spacing-400 !default;
+$color-view-preview-container-margin: ds.$spacing-340 !default;
+
+$color-view-container-line-height: normal !default;
+$color-view-container-hex-margin: ds.$spacing-200 0 0 0 !default;
+$color-view-container-alpha-label-width: 115px !default; // dx-offscale: 115px
+$color-view-container-alpha-label-margin: 43px !default; // dx-offscale: 43px
+$color-view-container-textbox-width: 69px !default; // dx-offscale: 69px
+$color-view-container-textbox-margin: 0 0 0 ds.$spacing-100 !default;
+
+$color-view-controls-container-width: 90px !default; // dx-offscale: 90px
+$color-view-controls-container-margin: 27px !default; // dx-offscale: 27px
+
+// Values hoisted from style-file literals (tokenized)
+$color-view-container-margin-block-end: ds.$spacing-100 !default;
+$color-view-color-preview-container-padding: ds.$spacing-10 !default;
+$color-view-color-preview-container-margin: ds.$spacing-10 !default;
+
+/*
+ * Derived values, moved out of _index.scss: a file that emits rules must not declare
+ * variables (NAMING.md, O7).
+ */
+$color-view-alpha-width: $color-view-palette-width + 4;
+$color-view-hue-scale-height: $color-view-palette-height;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/common/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/common/_colors.scss
new file mode 100644
index 000000000000..aeba260f63c4
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/common/_colors.scss
@@ -0,0 +1,29 @@
+@use "../colors" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+/*
+ * The surface every overlay-based widget draws on, and the backdrop behind it. They came from
+ * overlay/, where five widgets were reading them across the folder boundary; neither describes
+ * one widget's anatomy, and both map to a non-component token family, which is exactly the
+ * admission criterion for the system tier (NAMING.md, common/).
+ */
+$surface-overlay-rest: ds.$color-surface-neutral-default-rest !default;
+$backdrop-rest: ds.$color-surface-backdrop-default-rest !default;
+
+// Dropdown/overlay shadow layer colors (mode-aware via the shadow roles).
+$global-dropdown-shadow-ambient: ds.$color-shadow-ambient !default;
+$global-dropdown-shadow-key: ds.$color-shadow-key !default;
+
+$palette-accent: ds.$color-surface-primary-default-rest !default;
+$palette-bg: ds.$color-surface-neutral-default-rest !default;
+$palette-border: ds.$color-border-neutral-default-rest !default;
+
+// Non-color theme-level values (opacity/font family) — kept referencing the theme layer.
+$global-font-family: ds.$font-family-sans-serif !default;
+$invalid-badge-content-rest: ds.$color-content-neutral-default-static-dark-rest !default;
+$valid-badge-content-rest: ds.$color-surface-success-default-rest !default;
+$palette-text: ds.$color-content-neutral-default-rest !default;
+$global-bg-rest: ds.$color-surface-neutral-default-rest !default;
+$global-content-rest: ds.$color-content-neutral-default-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/common/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/common/_index.scss
new file mode 100644
index 000000000000..043ac972ceae
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/common/_index.scss
@@ -0,0 +1,68 @@
+@use "sass:color";
+@use "colors" as *;
+@use "../colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+
+
+// adduse
+.dx-theme-marker {
+  font-family: "dx.fluent-next.#{$fluent-color-accent-modificator}.#{$fluent-color-theme-modificator}#{$fluent-size-postfix}";
+}
+
+// stylelint-disable declaration-no-important
+.dx-theme-accent-as-text-color {
+  color: $palette-accent !important;
+}
+
+.dx-theme-text-color {
+  color: $palette-text !important;
+}
+
+.dx-theme-background-color-as-text-color {
+  color: $palette-bg !important;
+}
+
+.dx-theme-border-color-as-text-color {
+  color: $palette-border !important;
+}
+
+.dx-theme-accent-as-background-color {
+  background-color: $palette-accent !important;
+  fill: $palette-accent !important;
+}
+
+.dx-theme-text-color-as-background-color {
+  background-color: $palette-text !important;
+  fill: $palette-text !important;
+}
+
+.dx-theme-background-color {
+  background-color: $palette-bg !important;
+  fill: $palette-bg !important;
+}
+
+.dx-theme-typography-background-color {
+  background-color: $global-bg-rest !important;
+}
+
+.dx-theme-border-color-as-background-color {
+  background-color: $palette-border !important;
+  fill: $palette-border !important;
+}
+
+.dx-theme-accent-as-border-color {
+  border-color: $palette-accent !important;
+}
+
+.dx-theme-text-color-as-border-color {
+  border-color: $palette-text !important;
+}
+
+.dx-theme-background-color-as-border-color {
+  border-color: $palette-bg !important;
+}
+
+.dx-theme-border-color {
+  border-color: $palette-border !important;
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/common/_mixins.scss b/packages/devextreme-scss/scss/widgets/fluent-next/common/_mixins.scss
new file mode 100644
index 000000000000..f0bdce9ab922
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/common/_mixins.scss
@@ -0,0 +1,110 @@
+@use "sass:math";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/mixins" as *;
+@use "../../../_design-system/variables/ds" as ds;
+@use "../../base/validation" as baseValidation with (
+  $validation-summary-margin-top: ds.$spacing-200,
+  $validation-message-content-padding: ds.$spacing-100,
+);
+@use "../list/sizes" as listSizes;
+
+$invalid-badge-bg-rest: ds.$color-content-danger-compound-rest !default;
+
+@mixin dx-base-typography() {
+  @include dx-base-typography-mixin(
+      $global-content-rest,
+      $global-font-size,
+      $global-font-family,
+      $global-line-height
+    );
+}
+
+@mixin disabled-widget($opacity: $global-disabled-opacity) {
+  @include disabled-widget-mixin($opacity);
+}
+
+@mixin badge-settings() {
+  pointer-events: none;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: 50%;
+  margin-top: calc(#{$invalid-badge-size} / -2);
+  width: $invalid-badge-size;
+  height: $invalid-badge-size;
+  line-height: calc(#{$invalid-badge-size} + 1px);
+  font-size: $global-font-size;
+}
+
+@mixin dx-invalid-fluent-badge() {
+  @include badge-settings();
+
+  font-size: $global-font-size;
+  font-weight: $invalid-badge-font-weight;
+  background-color: $invalid-badge-bg-rest;
+  color: $invalid-badge-content-rest;
+  content: '!';
+  border-radius: 50%;
+}
+
+@mixin dx-valid-fluent-badge() {
+  @include badge-settings();
+
+  font-size: $valid-badge-font-size;
+  font-weight: bold;
+  font-family: 'DXIcons', sans-serif;
+  color: $valid-badge-content-rest;
+  content: '\f005';
+
+  @include baseValidation.validation-badge-animation();
+}
+
+@mixin dx-pending-indicator-fluent() {
+  @include dx-pending-indicator($invalid-badge-size);
+}
+
+@mixin dx-dropdownlist-list-appearance() {
+  height: 100%;
+
+  &.dx-popup-wrapper .dx-overlay-content {
+    box-shadow: $global-dropdown-box-shadow;
+    border-top-width: 0;
+    border-bottom-width: $global-dropdown-border-block-end-width;
+
+    &.dx-dropdowneditor-overlay-flipped {
+      border-top-width: $global-dropdown-flipped-border-block-start-width;
+      border-bottom-width: 0;
+    }
+  }
+
+  .dx-popup-content {
+    height: 100%;
+    padding: $global-dropdown-content-padding;
+  }
+
+  .dx-list {
+    height: 100%;
+    min-height: listSizes.$list-item-height;
+  }
+
+  .dx-list-select-all {
+    margin-inline: listSizes.$list-item-margin-inline;
+    padding: calc(#{listSizes.$list-item-padding-block} + 2px) 0 calc(#{listSizes.$list-item-padding-block} - 2px);
+  }
+
+  .dx-list-items {
+    margin-inline: listSizes.$list-item-margin-inline;
+  }
+
+  .dx-list-item,
+  .dx-empty-message {
+    border-top: 0;
+
+    &:last-of-type {
+      border-bottom: none;
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/common/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/common/_sizes.scss
new file mode 100644
index 000000000000..6f0ceb45a746
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/common/_sizes.scss
@@ -0,0 +1,41 @@
+@use "sass:math";
+@use "../sizes" as *;
+@use "./colors" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+// Not a colour: an opacity that used to sit in _colors.scss (NAMING.md, O7)
+$global-disabled-opacity: ds.$opacity-35 !default;
+
+$global-line-height: null !default;
+
+$global-inline-widget-inner-height: calc(#{$global-inline-widget-height} - #{$global-border-width} * 2) !default;
+
+$invalid-badge-size: calc(#{$global-icon-size} - #{ds.$spacing-20}) !default;
+$invalid-badge-padding-inline: calc((#{$global-inline-widget-inner-height} - #{$invalid-badge-size}) / 2) !default;
+$invalid-badge-offset: calc((#{$invalid-badge-padding-inline}) / 2) !default;
+
+$valid-badge-font-size: calc(#{$global-font-size} + 6px) !default;
+
+$global-dropdown-box-shadow: null !default;
+
+@if $size == "default" {
+  $global-line-height: 1.428571 !default; // dx-relative: unitless ratio, no line-height-ratio scale in package
+  $global-dropdown-box-shadow: 0 0 ds.$spacing-20 0 $global-dropdown-shadow-ambient, 0 ds.$spacing-80 ds.$spacing-160 0 $global-dropdown-shadow-key !default;
+}
+
+@else if $size == "compact" {
+  $global-line-height: 1.3333 !default; // dx-relative
+  $global-dropdown-box-shadow: 0 0 ds.$spacing-20 0 $global-dropdown-shadow-ambient, 0 ds.$spacing-40 ds.$spacing-80 0 $global-dropdown-shadow-key !default;
+}
+
+:root {
+  --dx-line-height: #{$global-line-height};
+}
+
+// Values hoisted from style-file literals (tokenized)
+$invalid-badge-font-weight: ds.$font-weight-500 !default; // dx-no-semantic-role: 500 is off the weight-role scale (400/600/700)
+$global-dropdown-content-padding: ds.$spacing-10 !default;
+$global-dropdown-border-block-end-width: ds.$border-width-10 !default;
+$global-dropdown-flipped-border-block-start-width: ds.$border-width-10 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/contextMenu/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/contextMenu/_colors.scss
new file mode 100644
index 000000000000..0fb138e6e934
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/contextMenu/_colors.scss
@@ -0,0 +1,7 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$context-menu-content-disabled: ds.$color-content-neutral-default-disabled !default;
+$context-menu-icon-rest: ds.$color-content-neutral-subdued-rest !default;
+$context-menu-shadow-rest: ds.$box-shadow-md !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/contextMenu/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/contextMenu/_index.scss
new file mode 100644
index 000000000000..2c8d80bef7ac
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/contextMenu/_index.scss
@@ -0,0 +1,87 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../menu/sizes" as menuSizes;
+@use "../menu/colors" as menuColors;
+@use "../button/sizes" as buttonSizes;
+@use "../../base/contextMenu" with (
+  $contextmenu-menu-items-container-padding: $context-menu-menu-items-container-padding,
+  $contextmenu-menu-separator-height: $context-menu-separator-height,
+  $contextmenu-menu-separator-margin: $context-menu-separator-margin,
+);
+
+// adduse
+@use "../overlay";
+@use "../menuBase" as *;
+
+
+.dx-context-menu {
+  color: menuColors.$menu-content-rest;
+
+  .dx-menu-items-container {
+    display: flex;
+    flex-direction: column;
+    padding: $context-menu-items-container-padding;
+    gap: $context-menu-items-container-gap;
+  }
+
+  .dx-menu-item {
+    border-radius: $context-menu-item-border-radius;
+
+    .dx-menu-item-content {
+      display: flex;
+      align-items: center;
+      padding: menuSizes.$menu-padding-block $context-menu-padding-inline;
+      gap: $context-menu-item-content-gap;
+
+      .dx-menu-item-text {
+        padding-inline: $context-menu-item-text-padding-inline;
+      }
+
+      .dx-menu-item-popout-container {
+        inset-inline-end: $context-menu-padding-inline;
+        width: $global-icon-size;
+        display: flex;
+        align-items: center;
+
+        .dx-menu-item-popout {
+          display: flex;
+          align-items: center;
+
+          @include dx-icon(spinright);
+          @include dx-icon-sizing(buttonSizes.$button-icon-size);
+        }
+      }
+    }
+
+    .dx-menu-item-popout {
+      color: $context-menu-icon-rest;
+    }
+
+    &.dx-state-disabled {
+      .dx-menu-item-popout {
+        color: $context-menu-content-disabled;
+      }
+    }
+
+    &.dx-menu-item-has-submenu > .dx-menu-item-content {
+      padding-inline-end: menuSizes.$menu-item-with-icon-padding-inline;
+    }
+  }
+
+  &.dx-overlay-content.dx-state-focused {
+    box-shadow: none;
+  }
+
+  .dx-submenu {
+    background-color: menuColors.$menu-popup-bg-rest;
+    border-radius: $context-menu-border-radius;
+    box-shadow: $context-menu-shadow-rest;
+  }
+
+  .dx-menu-separator {
+    background-color: menuColors.$menu-separator-bg-rest;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/contextMenu/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/contextMenu/_sizes.scss
new file mode 100644
index 000000000000..2431dbc2da04
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/contextMenu/_sizes.scss
@@ -0,0 +1,27 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$context-menu-padding-inline: null !default;
+$context-menu-border-radius: $global-border-radius !default;
+$context-menu-items-container-padding: ds.$spacing-40 !default;
+$context-menu-items-container-gap: ds.$spacing-20 !default;
+$context-menu-item-border-radius: $global-border-radius !default;
+$context-menu-item-content-gap: null !default;
+$context-menu-item-text-padding-inline: ds.$spacing-20 !default;
+
+@if $size == "default" {
+  $context-menu-padding-inline: ds.$spacing-60 !default;
+  $context-menu-item-content-gap: ds.$spacing-60 !default;
+}
+
+@else if $size == "compact" {
+  $context-menu-padding-inline: ds.$spacing-40 !default;
+  $context-menu-item-content-gap: ds.$spacing-40 !default;
+}
+
+// Base-layer sizing injected with design tokens (wave B2)
+$context-menu-menu-items-container-padding: ds.$spacing-10 !default;
+$context-menu-separator-height: ds.$spacing-10 !default;
+$context-menu-separator-margin: ds.$spacing-50 0 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dataGrid/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dataGrid/_colors.scss
new file mode 100644
index 000000000000..5f2ac5b4f53a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dataGrid/_colors.scss
@@ -0,0 +1,9 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$data-grid-group-panel-item-bg-rest: ds.$color-surface-neutral-deep-rest !default;
+
+// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
+$data-grid-block-separator-bg-rest: ds.$color-surface-primary-default-rest !default;
+$data-grid-group-panel-item-border-rest: ds.$color-border-neutral-default-disabled !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dataGrid/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dataGrid/_index.scss
new file mode 100644
index 000000000000..e40af43cc0a3
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dataGrid/_index.scss
@@ -0,0 +1,142 @@
+@use "../colors" as *;
+@use "../../../_design-system/variables/ds" as ds;
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../gridBase" as *;
+@use "../gridBase/colors" as gridBaseColors;
+@use "../gridBase/sizes" as gridBaseSizes;
+@use "../../base/dataGrid" as baseGrid with (
+  $datagrid-common-group-min-width: $data-grid-group-panel-item-min-width,
+  $datagrid-common-addrow-margin-right: $data-grid-group-panel-item-margin-inline-end,
+  $datagrid-common-addrow-margin-left: $data-grid-group-panel-item-sort-margin-inline-start,
+  $datagrid-common-form-buttons-border-radius: $data-grid-block-separator-border-radius,
+  $datagrid-common-form-buttons-margin-left: $data-grid-group-panel-item-rtl-margin-inline-end,
+  $datagrid-common-form-buttons-margin-right: $data-grid-group-panel-item-sort-rtl-margin-inline-start,
+  $datagrid-header-filter-outline: $data-grid-outline-focused,
+  $datagrid-header-filter-outline-offset: $data-grid-outline-offset-focused,
+  $datagrid-filter-panel-clear-filter-outline-offset: $data-grid-filter-panel-outline-offset-focused,
+  $datagrid-button-margin-left: $data-grid-form-buttons-margin-inline-start,
+  $datagrid-button-margin-top: $data-grid-form-buttons-margin-block-start,
+  $datagrid-error-message-margin-bottom: $data-grid-error-message-margin-block-end,
+  $datagrid-button-margin-right: $data-grid-form-buttons-rtl-margin-inline-start,
+  $datagrid-border: gridBaseSizes.$grid-border,
+  $datagrid-border-color: gridBaseColors.$grid-border-rest,
+  $datagrid-drag-header-border-color: gridBaseColors.$grid-drag-header-border-rest,
+  $datagrid-row-error-bg: gridBaseColors.$grid-row-error-bg-rest,
+  $datagrid-row-error-color: gridBaseColors.$grid-row-error-content-rest,
+  $datagrid-base-color: gridBaseColors.$grid-content-rest,
+  $datagrid-base-background-color: gridBaseColors.$grid-bg-rest,
+  $datagrid-focused-border-color: gridBaseColors.$grid-border-focused,
+  $header-filter-color: gridBaseColors.$grid-header-filter-icon-rest,
+  $header-filter-color-empty: gridBaseColors.$grid-header-filter-empty-icon-rest,
+  $base-focus-color: ds.$color-content-neutral-default-inverted-rest,
+  $datagrid-text-stub-background-image-path: gridBaseColors.$grid-text-stub-bg-rest,
+  $datagrid-group-row-border: $data-grid-group-row-border,
+  $datagrid-sticky-column-border: $data-grid-sticky-column-border,
+  $datagrid-cell-focus-outline: $data-grid-cell-outline-focused,
+);
+@use 'layout/cell';
+@include grid-base(datagrid);
+
+.dx-datagrid-group-panel {
+  font-size: $global-font-size;
+  touch-action: pinch-zoom;
+
+  .dx-group-panel-message {
+    color: gridBaseColors.$grid-column-chooser-item-content-rest;
+    font-weight: gridBaseSizes.$grid-column-chooser-font-weight;
+    padding: $data-grid-cell-padding 0;
+    border-top: gridBaseSizes.$grid-hidden-border;
+    border-bottom: gridBaseSizes.$grid-hidden-border;
+    line-height: gridBaseSizes.$grid-group-panel-message-line-height;
+  }
+
+  .dx-group-panel-item {
+    margin-right: gridBaseSizes.$grid-group-panel-item-margin-inline;
+    color: gridBaseColors.$grid-column-chooser-item-content-rest;
+    font-weight: $data-grid-group-panel-item-font-weight;
+    font-size: gridBaseSizes.$grid-header-cell-font-size;
+    line-height: gridBaseSizes.$grid-header-line-height;
+    background: $data-grid-group-panel-item-bg-rest;
+    border-radius: $data-grid-group-panel-item-border-radius;
+    padding: $data-grid-group-panel-item-padding;
+    border-width: $data-grid-group-panel-item-border-width;
+    border-style: solid;
+    border-color: $data-grid-group-panel-item-border-rest;
+  }
+
+  .dx-block-separator {
+    margin-right: gridBaseSizes.$grid-group-panel-item-margin-inline;
+    color: gridBaseColors.$grid-column-chooser-item-content-rest;
+    font-weight: gridBaseSizes.$grid-column-chooser-font-weight;
+    background-color: $data-grid-block-separator-bg-rest;
+  }
+
+  .dx-sort {
+    color: gridBaseColors.$grid-header-filter-empty-icon-rest;
+  }
+}
+
+.dx-datagrid-rowsview {
+  .dx-datagrid-group-row-container {
+    padding-left: gridBaseSizes.$grid-cell-padding-inline;
+    padding-right: gridBaseSizes.$grid-cell-padding-inline;
+    text-overflow: ellipsis;
+    display: inline-block;
+    position: sticky;
+    background-color: inherit; // T1303478
+    max-width: 100%;
+    overflow: clip;
+  }
+
+  .dx-row.dx-group-row:first-child {
+    border-top: none;
+  }
+
+
+  .dx-row.dx-group-row {
+    &:not(.dx-row-focused) {
+      color: gridBaseColors.$grid-group-row-content-rest;
+      background-color: gridBaseColors.$grid-group-row-bg-rest;
+    }
+
+    font-size: gridBaseSizes.$grid-header-cell-font-size;
+    font-weight: $data-grid-group-row-font-weight;
+  }
+}
+
+.dx-datagrid-group-opened {
+  @include dx-icon(chevrondown);
+  @include dx-icon-sizing($global-icon-size);
+
+  color: gridBaseColors.$grid-chevron-icon-rest;
+}
+
+.dx-datagrid-group-closed {
+  @include dx-icon(chevronright);
+  @include dx-icon-sizing($global-icon-size);
+
+  color: gridBaseColors.$grid-chevron-icon-rest;
+}
+
+.dx-row.dx-datagrid-group-footer {
+  &.dx-column-lines {
+    border-bottom: gridBaseSizes.$grid-border;
+    border-bottom-color: gridBaseColors.$grid-border-rest;
+  }
+
+}
+
+
+.dx-rtl {
+  .dx-datagrid-group-panel {
+    .dx-group-panel-item,
+    .dx-block-separator {
+      margin-left: gridBaseSizes.$grid-group-panel-item-margin-inline;
+    }
+  }
+}
+
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dataGrid/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dataGrid/_sizes.scss
new file mode 100644
index 000000000000..877b1e5b8fc6
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dataGrid/_sizes.scss
@@ -0,0 +1,49 @@
+@use "../sizes" as *;
+@use '../../base/dataGrid/variables' as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$data-grid-cell-padding: ds.$spacing-70 !default;
+$data-grid-group-panel-item-font-weight: ds.$font-weight-base-default !default;
+
+$data-grid-group-panel-item-border-radius: null !default;
+$data-grid-group-panel-item-padding-block: null !default;
+
+@if $size == "default" {
+  $data-grid-group-panel-item-border-radius: ds.$border-radius-60 !default;
+  $data-grid-group-panel-item-padding-block: ds.$spacing-50 !default;
+}
+
+@else if $size == "compact" {
+  $data-grid-group-panel-item-border-radius: ds.$border-radius-40 !default;
+  $data-grid-group-panel-item-padding-block: ds.$spacing-20 !default;
+}
+
+$datagrid-cell-padding: $data-grid-cell-padding !default;
+
+// Values hoisted from style-file literals (tokenized)
+$data-grid-group-row-font-weight: ds.$font-weight-500 !default; // dx-no-semantic-role: 500 is off the weight-role scale (400/600/700)
+$data-grid-group-panel-item-border-width: ds.$border-width-10 !default;
+$data-grid-group-panel-item-padding: $data-grid-group-panel-item-padding-block ds.$spacing-100 !default;
+
+// Base-layer sizing injected with design tokens (wave B2)
+$data-grid-outline-focused: ds.$spacing-20 solid !default;
+$data-grid-outline-offset-focused: ds.$spacing-20 !default;
+$data-grid-filter-panel-outline-offset-focused: ds.$spacing-30 !default;
+$data-grid-form-buttons-margin-inline-start: ds.$spacing-100 !default;
+$data-grid-form-buttons-margin-block-start: ds.$spacing-100 !default;
+$data-grid-error-message-margin-block-end: ds.$spacing-200 !default;
+$data-grid-form-buttons-rtl-margin-inline-start: ds.$spacing-100 !default;
+
+$data-grid-group-row-border: ds.$border-width-10 solid !default;
+$data-grid-sticky-column-border: ds.$border-width-20 solid !default;
+$data-grid-cell-outline-focused: ds.$spacing-20 solid !default;
+
+// Base submodule sizing injected with design tokens (B2 tail)
+$data-grid-group-panel-item-min-width: ds.$spacing-300 !default;
+$data-grid-group-panel-item-margin-inline-end: ds.$spacing-100 !default;
+$data-grid-group-panel-item-sort-margin-inline-start: ds.$spacing-60 !default;
+$data-grid-block-separator-border-radius: ds.$border-radius-30 !default;
+$data-grid-group-panel-item-rtl-margin-inline-end: ds.$spacing-100 !default;
+$data-grid-group-panel-item-sort-rtl-margin-inline-start: ds.$spacing-60 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dataGrid/layout/cell.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dataGrid/layout/cell.scss
new file mode 100644
index 000000000000..f4760644fce6
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dataGrid/layout/cell.scss
@@ -0,0 +1,103 @@
+/* stylelint-disable no-duplicate-selectors */
+@use "../colors" as *;
+@use "../sizes" as *;
+@use "../../sizes" as *;
+@use "../../gridBase/colors" as gridBaseColors;
+@use "../../gridBase/sizes" as gridBaseSizes;
+@use "../../gridBase/variables" as gridBaseVariables;
+
+// #region overflow
+
+// (0,5,0)
+.dx-datagrid-rowsview .dx-row.dx-group-row .dx-group-cell.dx-datagrid-sticky-column,
+.dx-datagrid-rowsview .dx-row.dx-group-row .dx-group-cell.dx-datagrid-sticky-column-left,
+.dx-datagrid-rowsview .dx-row.dx-group-row .dx-group-cell.dx-datagrid-sticky-column-right {
+  overflow: initial;
+  overflow-x: clip;
+}
+
+// #endregion
+
+// #region border
+
+// (0,2,1)
+.dx-row.dx-datagrid-group-footer > td {
+  border-top: gridBaseSizes.$grid-border;
+  border-top-color: gridBaseColors.$grid-border-rest;
+  border-left-width: 0;
+  border-right-width: 0;
+}
+
+// (0,3,1)
+.dx-datagrid-rowsview .dx-row.dx-group-row td {
+  border-top-color: gridBaseColors.$grid-border-rest;
+  border-bottom-color: gridBaseColors.$grid-border-rest;
+}
+
+// (0,3,1)
+.dx-datagrid-sticky-columns .dx-row.dx-datagrid-group-footer > td {
+  border-bottom: gridBaseSizes.$grid-border;
+  border-bottom-color: gridBaseColors.$grid-border-rest;
+}
+
+// (0,3,1) - (0,4,1)
+.dx-datagrid-sticky-columns .dx-row.dx-row-lines + .dx-datagrid-group-footer td,
+.dx-datagrid-sticky-columns .dx-row.dx-row-lines + .dx-row.dx-group-row td,
+.dx-datagrid-sticky-columns .dx-row.dx-row-lines + .dx-master-detail-row td,
+.dx-datagrid-sticky-columns .dx-row.dx-row-lines + .dx-edit-row td,
+.dx-datagrid-sticky-columns .dx-row.dx-group-row + .dx-datagrid-group-footer td,
+.dx-datagrid-sticky-columns .dx-row.dx-group-row + .dx-row.dx-group-row td,
+.dx-datagrid-sticky-columns .dx-row.dx-group-row + .dx-master-detail-row td,
+.dx-datagrid-sticky-columns .dx-row.dx-group-row + .dx-edit-row td,
+.dx-datagrid-sticky-columns .dx-datagrid-group-footer + .dx-datagrid-group-footer td,
+.dx-datagrid-sticky-columns .dx-datagrid-group-footer + .dx-row.dx-group-row td,
+.dx-datagrid-sticky-columns .dx-datagrid-group-footer + .dx-master-detail-row td,
+.dx-datagrid-sticky-columns .dx-datagrid-group-footer + .dx-edit-row td,
+.dx-datagrid-sticky-columns .dx-edit-row + .dx-datagrid-group-footer td,
+.dx-datagrid-sticky-columns .dx-edit-row + .dx-row.dx-group-row td,
+.dx-datagrid-sticky-columns .dx-edit-row + .dx-master-detail-row td,
+.dx-datagrid-sticky-columns .dx-edit-row + .dx-edit-row td {
+  border-top: none;
+}
+
+// #endregion
+
+// #region padding
+
+// (0,4,1)
+.dx-datagrid-sticky-columns .dx-row.dx-group-row:first-child td {
+  padding-top: gridBaseVariables.$grid-cell-padding-block;
+}
+
+// (0,5,0)
+.dx-datagrid-rowsview .dx-row.dx-group-row .dx-group-cell.dx-datagrid-sticky-column,
+.dx-datagrid-rowsview .dx-row.dx-group-row .dx-group-cell.dx-datagrid-sticky-column-left,
+.dx-datagrid-rowsview .dx-row.dx-group-row .dx-group-cell.dx-datagrid-sticky-column-right {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+// #endregion
+
+// #region background
+
+// (0,2,1)
+.dx-row.dx-datagrid-group-footer > td {
+  background-color: gridBaseColors.$grid-summary-bg-rest;
+}
+
+// (0,4,1) T1303478
+.dx-datagrid-rowsview .dx-row.dx-group-row td.dx-datagrid-sticky-column,
+.dx-datagrid-rowsview .dx-row.dx-group-row td.dx-datagrid-sticky-column-left,
+.dx-datagrid-rowsview .dx-row.dx-group-row td.dx-datagrid-sticky-column-right {
+  background-color: inherit;
+}
+
+// (0,5,0)
+.dx-datagrid-rowsview .dx-row.dx-group-row .dx-group-cell.dx-datagrid-sticky-column,
+.dx-datagrid-rowsview .dx-row.dx-group-row .dx-group-cell.dx-datagrid-sticky-column-left,
+.dx-datagrid-rowsview .dx-row.dx-group-row .dx-group-cell.dx-datagrid-sticky-column-right {
+  background-color: inherit;
+}
+
+// #endregion
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dateBox/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dateBox/_colors.scss
new file mode 100644
index 000000000000..40cbb6dd23e2
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dateBox/_colors.scss
@@ -0,0 +1,4 @@
+@use "../sizes" as *;
+@use "../colors" as *;
+
+// adduse
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dateBox/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dateBox/_index.scss
new file mode 100644
index 000000000000..74c60796cb09
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dateBox/_index.scss
@@ -0,0 +1,148 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../dropDownEditor" as *;
+@use "../../base/dropDownEditor/mixins" as *;
+@use "../textEditor" as *;
+@use "../textEditor/sizes" as textEditorSizes;
+@use "../dropDownEditor/sizes" as dropDownEditorSizes;
+@use "../../base/dateBox" with (
+  $datebox-texteditor-height: $date-box-input-height,
+  $datebox-popup-content-padding-top: $date-box-popup-content-padding-block-start,
+  $datebox-popup-content-padding-bottom: $date-box-popup-content-padding-block-end,
+  $datebox-button-min-width: $date-box-button-min-width,
+  $datebox-apply-button-margin-right: $date-box-apply-button-margin-inline-end,
+);
+@use "mixins" as *;
+
+// adduse
+@use "../timeView";
+@use "../dateView";
+
+.dx-datebox-wrapper {
+  .dx-popup-title {
+    min-height: $date-box-popup-title-min-height;
+    border-bottom: none;
+    background: none;
+  }
+
+  .dx-item {
+    border: none;
+  }
+
+  .dx-popup-bottom {
+    .dx-button {
+      width: auto;
+    }
+  }
+}
+
+.dx-datebox-datetime-time-side {
+  justify-content: flex-end;
+}
+
+.dx-datebox-wrapper-rollers.dx-datebox-wrapper-time .dx-popup-content {
+  margin: $date-box-popup-content-margin;
+}
+
+.dx-datebox-wrapper-list {
+  .dx-overlay-content {
+    border-top: none;
+  }
+}
+
+.dx-device-phone .dx-datebox-wrapper-rollers {
+  .dx-popup-content {
+    padding: $date-box-content-padding;
+  }
+}
+
+.dx-datebox-time {
+  @include dx-dropdowneditor-button-icon-styling(clock);
+}
+
+.dx-datebox-date {
+  @include dx-dropdowneditor-button-icon-styling(event);
+}
+
+.dx-datebox-datetime {
+  @include dx-dropdowneditor-button-icon-styling(eventall);
+}
+
+.dx-datebox-wrapper-calendar {
+  .dx-popup-content {
+    padding: 0;
+  }
+
+  .dx-calendar {
+    border: none;
+    margin: $date-box-overlay-item-margin;
+  }
+
+  .dx-datebox-container-cell {
+    margin-right: $date-box-overlay-item-margin;
+    margin-bottom: $date-box-overlay-item-margin;
+  }
+}
+
+.dx-datebox-wrapper-calendar.dx-datebox-wrapper-datetime {
+  .dx-timeview {
+    padding: $date-box-overlay-item-margin;
+  }
+
+  .dx-datebox-container-cell {
+    margin-top: $date-box-container-cell-margin-block-start;
+    margin-right: $date-box-overlay-item-margin;
+  }
+}
+
+@media (max-width: 320px) {
+  .dx-datebox-wrapper-calendar .dx-calendar {
+    margin: $date-box-overlay-item-adaptive-margin;
+  }
+}
+
+.dx-rtl {
+  .dx-datebox-wrapper {
+    .dx-popup-bottom {
+      .dx-toolbar-button + .dx-toolbar-button {
+        .dx-button {
+          margin-right: $date-box-button-margin-inline-end;
+          margin-left: 0;
+        }
+      }
+    }
+  }
+}
+
+.dx-datebox-wrapper-list .dx-popup-content {
+  padding: 0;
+}
+
+.dx-datebox {
+  input[type="date"] {
+    line-height: normal;
+  }
+
+  &,
+  &:not(.dx-texteditor-empty) {
+    &.dx-auto-width {
+      @include invalid-dropdowneditor-input-padding(
+        dropDownEditorSizes.$drop-down-editor-invalid-badge-size,
+        textEditorSizes.$text-editor-input-underlined-padding-inline,
+        textEditorSizes.$text-editor-input-filled-padding-inline
+      );
+    }
+  }
+}
+
+.dx-texteditor {
+  &.dx-datebox-native {
+    .dx-texteditor-input {
+      padding-right: textEditorSizes.$text-editor-spin-button-padding-inline;
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dateBox/_mixins.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dateBox/_mixins.scss
new file mode 100644
index 000000000000..c7f0752039b9
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dateBox/_mixins.scss
@@ -0,0 +1,17 @@
+@use "../../base/icon_fonts" as *;
+@use "../dropDownEditor" as *;
+@use "../textEditor" as *;
+
+@mixin dx-dropdowneditor-button-icon-styling($icon) {
+  .dx-dropdowneditor-icon {
+    @include dx-icon($icon);
+    @include dx-dropdowneditor-button-icon();
+  }
+
+  &.dx-dropdowneditor-active {
+    .dx-dropdowneditor-icon {
+      @include dx-icon($icon);
+      @include dx-dropdowneditor-button-icon();
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dateBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dateBox/_sizes.scss
new file mode 100644
index 000000000000..db2fb7961c19
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dateBox/_sizes.scss
@@ -0,0 +1,21 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$date-box-overlay-item-margin: ds.$spacing-160 !default;
+$date-box-overlay-item-adaptive-margin: ds.$spacing-180 !default;
+$date-box-popup-content-margin: 0 ds.$spacing-340 !default;
+
+// Values hoisted from style-file literals (tokenized)
+$date-box-content-padding: ds.$spacing-100 !default;
+$date-box-container-cell-margin-block-start: -1px !default; // dx-offscale: -1px
+$date-box-button-margin-inline-end: ds.$spacing-50 !default;
+$date-box-popup-title-min-height: ds.$spacing-100 !default;
+
+// Base-layer sizing injected with design tokens (wave B2)
+$date-box-input-height: ds.$spacing-200 !default;
+$date-box-popup-content-padding-block-start: ds.$spacing-200 !default;
+$date-box-popup-content-padding-block-end: ds.$spacing-200 !default;
+$date-box-button-min-width: 90px !default; // dx-offscale: 90px
+$date-box-apply-button-margin-inline-end: ds.$spacing-100 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dateRangeBox/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dateRangeBox/_colors.scss
new file mode 100644
index 000000000000..0779caa6ee0e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dateRangeBox/_colors.scss
@@ -0,0 +1 @@
+// adduse
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dateRangeBox/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dateRangeBox/_index.scss
new file mode 100644
index 000000000000..60bb95357adb
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dateRangeBox/_index.scss
@@ -0,0 +1,113 @@
+@use "sass:math";
+@use "../textEditor/sizes" as textEditorSizes;
+@use "../textEditor/colors" as textEditorColors;
+@use "../dateBox/mixins" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "colors" as *;
+@use "../../base/dateRangeBox";
+@use "../../base/icon_fonts" as *;
+@use "../textEditor" as *;
+
+// adduse
+
+
+.dx-daterangebox {
+  @include dx-dropdowneditor-button-icon-styling(daterangepicker);
+
+  &.dx-editor-outlined,
+  &.dx-editor-filled {
+    &::before {
+      content: none;
+    }
+  }
+
+  .dx-editor-outlined,
+  .dx-editor-filled {
+    &.dx-datebox {
+      &::before {
+        border-radius: 0;
+        width: calc(100% - 2 * $date-range-box-active-bar-margin-inline);
+        margin: 0 $date-range-box-active-bar-margin-inline;
+      }
+    }
+  }
+
+  &.dx-editor-underlined,
+  &.dx-editor-filled {
+    &::before {
+      border-bottom-width: $date-range-box-input-filled-border-block-end-width;
+      transition: none;
+    }
+
+    &.dx-state-hover {
+      &::after {
+        border-bottom-width: $date-range-box-border-block-end-width-hovered;
+        transition: none;
+      }
+    }
+
+    &.dx-state-focused {
+      &.dx-invalid {
+        &::before {
+          border-bottom-width: $date-range-box-invalid-border-block-end-width;
+          transition: none;
+        }
+      }
+    }
+  }
+
+  &.dx-editor-underlined {
+    .dx-daterangebox-separator {
+      padding-right: textEditorSizes.$text-editor-input-filled-padding-inline;
+    }
+  }
+
+  &.dx-texteditor {
+    > .dx-texteditor-buttons-container {
+      > .dx-button,
+      > .dx-clear-button-area {
+        margin-inline-start: $date-range-box-custom-button-margin;
+        margin-inline-end: $date-range-box-custom-button-margin;
+
+        &:first-child {
+          margin-inline-start: 0;
+        }
+
+        &:last-child {
+          margin-inline-end: $date-range-box-custom-button-margin;
+        }
+      }
+
+      > .dx-dropdowneditor-button:last-child {
+        margin-inline-end: textEditorSizes.$text-editor-spin-button-padding-inline;
+      }
+
+      > .dx-clear-button-area:last-child,
+      > .dx-clear-button-area + div:empty:last-child {
+        margin-inline-end: textEditorSizes.$text-editor-button-filled-inset-inline-end;
+      }
+    }
+  }
+
+  .dx-datebox {
+    &.dx-end-datebox {
+      &.dx-texteditor {
+        &.dx-invalid {
+          .dx-texteditor-input {
+            padding-inline-end: textEditorSizes.$text-editor-invalid-badge-size;
+          }
+        }
+      }
+    }
+  }
+}
+
+.dx-daterangebox-separator {
+  padding-left: textEditorSizes.$text-editor-input-filled-padding-inline;
+  color: textEditorColors.$text-editor-content-disabled;
+
+  .dx-icon {
+    @include dx-icon-sizing($global-icon-size);
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dateRangeBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dateRangeBox/_sizes.scss
new file mode 100644
index 000000000000..b8952e13fe71
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dateRangeBox/_sizes.scss
@@ -0,0 +1,20 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$date-range-box-active-bar-margin-inline: null !default;
+
+@if $size == "default" {
+  $date-range-box-active-bar-margin-inline: ds.$spacing-120 !default;
+}
+
+@else if $size == "compact" {
+  $date-range-box-active-bar-margin-inline: ds.$spacing-80 !default;
+}
+
+// Values hoisted from style-file literals (tokenized)
+$date-range-box-custom-button-margin: ds.$spacing-60 !default;
+$date-range-box-input-filled-border-block-end-width: ds.$border-width-10 !default;
+$date-range-box-border-block-end-width-hovered: ds.$border-width-10 !default;
+$date-range-box-invalid-border-block-end-width: ds.$border-width-10 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dateView/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dateView/_colors.scss
new file mode 100644
index 000000000000..32ce87c25db1
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dateView/_colors.scss
@@ -0,0 +1,10 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+// Fade gradients over the surface — relative-color bridge (no gradient role in foundation).
+$date-view-roller-top-shadow-rest: 0deg, rgb(from #{ds.$color-surface-neutral-default-rest} r g b / 0) 0%, rgb(from #{ds.$color-surface-neutral-default-rest} r g b / 0.8) 60% !default;
+$date-view-roller-bottom-shadow-rest: 180deg, rgb(from #{ds.$color-surface-neutral-default-rest} r g b / 0) 0%, rgb(from #{ds.$color-surface-neutral-default-rest} r g b / 0.8) 60% !default;
+$date-view-content-rest: ds.$color-content-neutral-default-rest !default;
+
+$date-view-item-content-selected: ds.$color-surface-primary-default-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dateView/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dateView/_index.scss
new file mode 100644
index 000000000000..bc5ec63e80e2
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dateView/_index.scss
@@ -0,0 +1,139 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/mixins" as *;
+@use "../../base/dateView";
+
+// adduse
+@use "../scrollable";
+
+.dx-dateview-rollers {
+  width: auto;
+  text-align: center;
+  display: block;
+}
+
+.dx-dateviewroller-current {
+  .dx-dateview-item {
+    transition: font-size 0.2s ease-out;
+  }
+}
+
+.dx-dateviewroller {
+  min-width: $date-view-roller-min-width;
+  text-align: center;
+  display: inline-block;
+
+  .dx-button {
+    display: none;
+  }
+
+  .dx-scrollable-content::before,
+  .dx-scrollable-content::after {
+    content: "";
+    height: $date-view-roller-padding;
+    display: block;
+  }
+
+  .dx-scrollable-container {
+    height: $date-view-roller-height;
+  }
+
+  &.dx-dateviewroller-year {
+    min-width: $date-view-roller-year-min-width;
+  }
+
+  &.dx-state-active {
+    .dx-button {
+      display: none;
+    }
+  }
+}
+
+.dx-dateviewroller-month {
+  min-width: $date-view-roller-month-min-width;
+}
+
+.dx-dateviewroller-hours {
+  &::after {
+    content: ":";
+    font-size: $date-view-hours-colon-font-size;
+    position: absolute;
+    inset-inline-end: -9%;
+    font-weight: bold;
+    top: 37%;
+    color: $date-view-content-rest;
+  }
+
+  .dx-dateview-item-selected-frame {
+    padding-left: 20%;
+  }
+}
+
+.dx-dateviewroller-minutes {
+  .dx-dateview-item-selected-frame {
+    width: 80%;
+  }
+}
+
+.dx-dateview-item {
+  height: $date-view-roller-item-height;
+  line-height: $date-view-roller-item-height;
+  text-align: center;
+  font-size: $date-view-item-font-size;
+  color: $date-view-content-rest;
+}
+
+.dx-dateview-item-selected {
+  font-size: $date-view-item-font-size-selected;
+  color: $date-view-item-content-selected;
+}
+
+.dx-dateview-item-selected-frame {
+  position: absolute;
+  top: $date-view-roller-padding;
+  width: 100%;
+
+  &::before,
+  &::after {
+    backface-visibility: hidden;
+    content: "";
+    display: block;
+    width: 100%;
+    position: absolute;
+    height: $date-view-roller-padding;
+  }
+
+  &::before {
+    top: calc(-1 * #{$date-view-roller-padding});
+
+    @include gradient-linear($date-view-roller-top-shadow-rest);
+  }
+
+  &::after {
+    top: $date-view-roller-item-height;
+
+    @include gradient-linear($date-view-roller-bottom-shadow-rest);
+  }
+}
+
+.dx-device-tablet,
+.dx-device-phone {
+  .dx-dateview-rollers {
+    @include flex-container(row, nowrap);
+  }
+
+  .dx-dateviewroller-month {
+    min-width: $date-view-roller-month-phone-min-width;
+  }
+
+  .dx-dateview-item {
+    font-size: $date-view-item-phone-font-size;
+  }
+
+  .dx-dateview-item-selected {
+    font-size: $date-view-item-phone-font-size-selected;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dateView/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dateView/_sizes.scss
new file mode 100644
index 000000000000..93c4099bdcae
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dateView/_sizes.scss
@@ -0,0 +1,24 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$date-view-roller-height: 182px !default; // dx-offscale: 182px
+$date-view-roller-item-height: ds.$spacing-400 !default;
+
+// Values hoisted from style-file literals (tokenized)
+$date-view-roller-min-width: 4em !default; // dx-relative: scales with the parent font-size
+$date-view-roller-year-min-width: 4.85em !default; // dx-relative: scales with the parent font-size
+$date-view-roller-month-min-width: 12em !default; // dx-relative: scales with the parent font-size
+$date-view-hours-colon-font-size: 2.2em !default; // dx-relative: scales with the parent font-size
+$date-view-item-font-size: 1.3em !default; // dx-relative: scales with the parent font-size
+$date-view-item-font-size-selected: 1.8em !default; // dx-relative: scales with the parent font-size
+$date-view-roller-month-phone-min-width: 4em !default; // dx-relative: scales with the parent font-size
+$date-view-item-phone-font-size: 1.1em !default; // dx-relative: scales with the parent font-size
+$date-view-item-phone-font-size-selected: 1.4em !default; // dx-relative: scales with the parent font-size
+
+/*
+ * Derived values, moved out of _index.scss: a file that emits rules must not declare
+ * variables (NAMING.md, O7).
+ */
+$date-view-roller-padding: calc((#{$date-view-roller-height} - #{$date-view-roller-item-height}) / 2);
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/diagram/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/diagram/_colors.scss
new file mode 100644
index 000000000000..9f6be3a3a3b7
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/diagram/_colors.scss
@@ -0,0 +1,74 @@
+@use "../colors" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+/*
+ * O4: diagram used to read Button's contained backgrounds for these. They are not buttons —
+ * they are SVG strokes and fills on connector marks and the geometry mark — so the coupling
+ * moves to the token. `ds.$color-surface-primary-default-rest` is a BUTTON component token used
+ * outside button; keeping it preserves the value, and the mapping question is recorded in
+ * DIVERGENCES.md.
+ */
+$diagram-connector-border-rest: ds.$color-surface-primary-default-rest !default;
+$diagram-connection-border-rest: ds.$color-surface-success-default-rest !default;
+$diagram-geometry-mark-border-rest: ds.$color-surface-danger-default-rest !default;
+
+/*
+ * Stays in _colors.scss on purpose: the split between the two files is mode-dependent against
+ * size-dependent, not colour against number, and this opacity branches on $mode — which only
+ * _colors.scss has in scope. `opacity` is therefore a part as well as a size slot, resolved by
+ * file like `content` and `text` (NAMING.md, PARTS).
+ */
+$diagram-toolbox-shape-text-opacity-rest: null !default;
+
+@if $mode == "light" {
+  $diagram-toolbox-shape-text-opacity-rest: 0.25 !default;
+}
+
+@if $mode == "dark" {
+  $diagram-toolbox-shape-text-opacity-rest: 0.5 !default;
+}
+
+$diagram-border-rest: ds.$color-border-neutral-default-rest !default;
+$diagram-toolbar-border-rest: ds.$color-border-neutral-default-rest !default;
+$diagram-normal-format-bg-active: ds.$color-surface-neutral-alpha-active !default;
+$diagram-default-format-bg-active: ds.$color-surface-primary-default-active !default;
+$diagram-danger-format-bg-active: ds.$color-surface-danger-default-active !default;
+$diagram-success-format-bg-active: ds.$color-surface-success-default-active !default;
+$diagram-image-icon-base-content-rest: ds.$color-content-neutral-subdued-rest !default;
+$diagram-image-icon-accent-border-rest: ds.$color-content-primary-default-rest !default;
+
+// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
+$diagram-bg-rest: ds.$color-surface-neutral-default-rest !default;
+$diagram-danger-icon-rest: ds.$color-content-danger-default-rest !default;
+
+/*
+ * SVG data-uri icons are colored by baking the value into a background-image data-uri at build
+ * time (string replace of `currentColor`). CSS var() tokens do NOT resolve inside such a data-uri
+ * (they render black), so the values below are the static per-mode equivalents of the ds.$ tokens
+ * named in the markers — keep them in sync with the design-tokens package. See DIVERGENCES.
+ */
+$diagram-content-rest: null !default;
+$diagram-properties-panel-icon-rest: null !default;
+
+@if $mode == "light" {
+  $diagram-content-rest: #161616 !default; // dx-data-uri-static: ds.$color-content-neutral-default-rest
+  $diagram-properties-panel-icon-rest: #fff !default; // dx-data-uri-static: ds.$color-content-neutral-default-inverted-rest
+}
+
+@if $mode == "dark" {
+  $diagram-content-rest: #fff !default; // dx-data-uri-static: ds.$color-content-neutral-default-rest
+  $diagram-properties-panel-icon-rest: #161616 !default; // dx-data-uri-static: ds.$color-content-neutral-default-inverted-rest
+}
+
+// Canvas = deeper neutral surface
+$diagram-canvas-bg-rest: ds.$color-surface-neutral-subdued-rest !default;
+$diagram-shadow-rest: 0 1px 8px ds.$color-shadow-key !default;
+
+// Values hoisted from style-file literals (tokenized)
+$diagram-selection-mark-content-rest: ds.$color-border-neutral-accessible-rest !default;
+$diagram-selection-bg-rest: rgb(from #{ds.$color-border-neutral-accessible-rest} r g b / 0.02) !default;
+
+// Base-layer values injected with design tokens (wave B1)
+$diagram-popup-title-toolbar-bg-rest: ds.$color-surface-neutral-alpha-hovered !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/diagram/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/diagram/_index.scss
new file mode 100644
index 000000000000..820deecd0f97
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/diagram/_index.scss
@@ -0,0 +1,478 @@
+@use "sass:math";
+@use "../common/colors" as *;
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/diagram" with (
+  $diagram-root-height: $diagram-height,
+  $diagram-root-min-height: $diagram-min-height,
+  $diagram-toolbar-wrapper-padding: $diagram-toolbar-wrapper-padding,
+  $diagram-button-min-height: $fluent-diagram-button-min-height,
+  $diagram-popup-content-padding: $diagram-popup-content-padding,
+  $diagram-colorview-palette-min-width: $diagram-color-view-palette-min-width,
+  $diagram-colorview-hue-scale-cell-margin-left: $diagram-color-view-hue-scale-cell-margin-inline-start,
+  $diagram-loading-indicator-width: $diagram-loading-indicator-width,
+  $diagram-loading-indicator-height: $diagram-loading-indicator-height,
+  $diagram-context-toolbox-target-width: $diagram-context-toolbox-target-width,
+  $diagram-context-toolbox-target-height: $diagram-context-toolbox-target-height,
+  $diagram-popup-title-toolbar-bg: $diagram-popup-title-toolbar-bg-rest,
+);
+@use "../../base/diagram/mixins" as *;
+
+// adduse
+
+.dx-diagram {
+  border-color: $diagram-border-rest;
+
+  // stylelint-disable selector-class-pattern
+  .dxdi-control .dxdi-canvas {
+    background-color: $diagram-canvas-bg-rest;
+
+    .selection-mark,
+    .item-selection-rect,
+    .item-multi-selection-rect,
+    .items-selection-rect,
+    .connector-side-mark,
+    .connector-point-mark,
+    .connector-selection,
+    .connector-multi-selection,
+    .extension-line path {
+      stroke: $diagram-connector-border-rest;
+    }
+
+    .connector-side-mark,
+    .extension-line text {
+      fill: $diagram-connector-border-rest;
+    }
+
+    .container-target,
+    .connection-target,
+    .connection-mark:not(.selector),
+    .connection-point:not(.selector) {
+      stroke: $diagram-connection-border-rest;
+    }
+
+    .connection-mark:not(.selector),
+    .connection-point:not(.selector) {
+      &.active {
+        fill: $diagram-connection-border-rest;
+      }
+    }
+
+    .geometry-mark {
+      stroke: $diagram-geometry-mark-border-rest;
+    }
+
+    .dxdi-main .dxdi-image {
+      .dxdi-spinner {
+        path {
+          stroke: $diagram-image-icon-accent-border-rest;
+          stroke-opacity: 1;
+        }
+
+        ellipse {
+          stroke: $diagram-image-icon-base-content-rest;
+          stroke-opacity: $diagram-image-icon-muted-opacity;
+        }
+      }
+
+      .dxdi-user .dxdi-background {
+        fill: $diagram-image-icon-base-content-rest;
+        opacity: $diagram-image-icon-muted-opacity;
+      }
+
+      .dxdi-warning {
+        ellipse {
+          fill: $diagram-danger-icon-rest;
+        }
+      }
+    }
+  }
+
+  .dxdi-control:not(.focused) .dxdi-canvas {
+    .selection-mark,
+    .geometry-mark {
+      stroke: $diagram-selection-mark-content-rest;
+    }
+
+    .item-selection-rect,
+    .items-selection-rect {
+      fill: transparent;
+      stroke: $diagram-selection-mark-content-rest;
+    }
+
+    .items-selection-rect {
+      fill: $diagram-selection-bg-rest;
+    }
+
+    .item-multi-selection-rect {
+      fill: $diagram-selection-bg-rest;
+      stroke: $diagram-selection-mark-content-rest;
+    }
+
+    .connector-selection,
+    .connector-multi-selection {
+      stroke: $diagram-selection-mark-content-rest;
+    }
+
+    .connector-point-mark,
+    .connector-side-mark {
+      stroke: $diagram-selection-mark-content-rest;
+    }
+
+    .connector-side-mark {
+      fill: $diagram-selection-mark-content-rest;
+    }
+  }
+
+  .dxdi-text-input-container.connector-text .dxdi-text-input {
+    border-color: $diagram-connector-border-rest;
+  }
+
+  // stylelint-enable selector-class-pattern
+
+  .dx-diagram-toolbar-wrapper {
+    border-bottom: $diagram-toolbar-wrapper-border-block-end;
+    border-bottom-color: $diagram-toolbar-border-rest;
+  }
+
+  &.dx-diagram-fullscreen {
+    background-color: $diagram-bg-rest;
+  }
+}
+
+.dx-diagram-toolbox-panel,
+.dx-diagram-properties-panel {
+  background: $surface-overlay-rest;
+}
+
+.dx-diagram-floating-toolbar-container {
+  background: $surface-overlay-rest;
+  box-shadow: $diagram-shadow-rest;
+  border-radius: $diagram-floating-toolbar-container-border-radius;
+  padding: $diagram-floating-toolbar-container-padding;
+
+  .dx-toolbar .dx-toolbar-items-container {
+    height: $diagram-floating-toolbar-items-height;
+
+    .dx-texteditor {
+      .dx-texteditor-input,
+      .dx-placeholder::before {
+        color: inherit;
+        padding: $diagram-floating-toolbar-editor-padding;
+      }
+
+      .dx-button {
+        width: auto;
+        height: auto;
+        min-width: $diagram-button-min-width;
+        min-height: $diagram-button-min-height;
+        margin: $diagram-button-margin;
+
+        .dx-button-content {
+          padding: $diagram-floating-toolbar-editor-button-padding;
+        }
+      }
+    }
+  }
+
+  &.dx-diagram-properties-panel-toolbar-container {
+    &,
+    .dx-toolbar,
+    .dx-toolbar-items-container,
+    .dx-toolbar-item,
+    .dx-button {
+      width: $diagram-floating-toolbar-button-size;
+      height: $diagram-floating-toolbar-button-size;
+
+      .dx-button-content {
+        padding-top: 0;
+        padding-bottom: 0;
+        line-height: $diagram-floating-toolbar-button-size;
+      }
+    }
+  }
+
+  .dx-toolbar-item {
+    padding: $diagram-item-padding;
+  }
+}
+
+.dx-diagram-toolbox-popup {
+  & > .dx-overlay-content {
+    box-shadow: $diagram-shadow-rest;
+  }
+
+  .dx-popup-title {
+    margin-bottom: 0;
+
+    &.dx-toolbar {
+      font-size: $diagram-popup-title-toolbar-font-size;
+      min-height: $diagram-toolbox-title-size;
+
+      .dx-toolbar-items-container {
+        height: $diagram-toolbox-title-size;
+      }
+    }
+
+    .dx-button.dx-button-has-icon:not(.dx-button-has-text),
+    .dx-button-content {
+      width: $diagram-toolbox-title-size;
+      height: $diagram-toolbox-title-size;
+    }
+  }
+
+  .dx-popup-content {
+    .dx-diagram-toolbox-input-container,
+    .dx-diagram-toolbox-panel,
+    .dx-diagram-toolbox-panel .dx-accordion {
+      width: $diagram-toolbox-width;
+    }
+  }
+
+  .dx-diagram-toolbox-input-container {
+    border-bottom: $diagram-toolbox-input-container-border-block-end;
+  }
+
+  .dx-diagram-toolbox-input {
+    margin: $diagram-toolbox-input-margin;
+
+    &.dx-editor-outlined {
+      &:not(.dx-state-focused) {
+        box-shadow: none;
+      }
+
+      .dx-texteditor-buttons-container:last-child > .dx-button:last-child {
+        margin-right: 0;
+      }
+    }
+
+    .dx-button {
+      .dx-button-content {
+        padding: $diagram-toolbox-input-image-padding;
+      }
+
+      .dx-icon {
+        font-size: $diagram-toolbox-input-image-size;
+      }
+    }
+  }
+
+  .dx-popup-title .dx-closebutton {
+    width: $diagram-toolbox-title-size;
+    height: $diagram-toolbox-title-size;
+    margin: $diagram-closebutton-margin;
+  }
+
+  .dx-popup-title .dx-closebutton .dx-icon {
+    width: $diagram-icon-width;
+    height: $diagram-icon-height;
+    padding: $diagram-icon-padding;
+    font-size: $diagram-popup-close-icon-font-size;
+    line-height: $diagram-popup-close-icon-line-height;
+    background-position: 2px 2px;
+    background-size: 12px 12px;
+  }
+
+  &.dx-diagram-mobile-popup {
+    .dx-popup-content {
+      padding-top: $diagram-toolbox-mobile-padding;
+
+      .dx-diagram-toolbox-input-container {
+        border-top: $diagram-toolbox-input-container-border-block-start;
+      }
+    }
+  }
+}
+
+.dx-diagram-toolbox-panel {
+  .dx-accordion {
+    margin: 0;
+
+    .dx-accordion-item {
+      border-left: none;
+      border-right: none;
+      border-bottom: $diagram-accordion-item-border-block-end;
+      border-top: none;
+      box-shadow: none;
+    }
+
+    .dx-accordion-item-opened {
+      margin: 0;
+    }
+
+    .dx-item-content.dx-accordion-item-title {
+      min-height: $diagram-accordion-item-title-min-height;
+    }
+
+    .dx-item-content.dx-accordion-item-body {
+      padding: $diagram-toolbox-accordion-v-padding $diagram-toolbox-h-padding;
+    }
+  }
+
+  .dxdi-toolbox .dxdi-canvas .dxdi-shape-text { // stylelint-disable-line selector-class-pattern
+    opacity: $diagram-toolbox-shape-text-opacity-rest;
+  }
+}
+
+.dx-diagram-properties-popup {
+  .dx-multiview-item,
+  &.dx-diagram-properties-popup-notabs .dx-popup-content {
+    padding: $diagram-properties-panel-padding;
+  }
+
+  .dx-diagram-properties-panel-group-title {
+    text-transform: uppercase;
+    padding: $diagram-properties-panel-spacing;
+  }
+
+  .dx-diagram-properties-panel-group-toolbar {
+    padding: 0 $diagram-properties-panel-spacing $diagram-properties-panel-spacing;
+
+    .dx-toolbar-item {
+      margin-bottom: calc((#{$diagram-properties-panel-spacing}) / 2);
+
+      .dx-button {
+        height: auto;
+      }
+
+      &.dx-diagram-lg-icon-item .dx-diagram-i {
+        background-size: $diagram-properties-layout-icon-size $diagram-properties-layout-icon-size;
+        width: $diagram-properties-layout-icon-size;
+        height: $diagram-properties-layout-icon-size;
+      }
+    }
+  }
+
+  .dx-diagram-properties-panel-group-toolbar:first-child {
+    padding-top: $diagram-properties-panel-spacing;
+  }
+
+  &.dx-diagram-mobile-popup {
+    .dx-popup-title {
+      padding: $diagram-title-padding;
+    }
+
+    .dx-tabpanel {
+      .dx-tab-selected::before {
+        top: 0;
+        bottom: initial;
+      }
+    }
+  }
+}
+
+.dx-diagram-toolbar {
+  .dx-format-active:not(.dx-color-format):not(.dx-background-format) {
+    background-color: $diagram-normal-format-bg-active;
+
+    &.dx-button-success {
+      background-color: $diagram-success-format-bg-active;
+    }
+
+    &.dx-button-default {
+      background-color: $diagram-default-format-bg-active;
+    }
+
+    &.dx-button-danger {
+      background-color: $diagram-danger-format-bg-active;
+    }
+  }
+
+  .dx-texteditor.dx-editor-filled,
+  .dx-dropdowneditor.dx-editor-filled {
+    background-color: transparent;
+
+    &::after {
+      border-bottom-color: transparent;
+    }
+  }
+
+  .dx-diagram-toolbar-separator {
+    height: 50%;
+    border-left-color: $diagram-toolbar-border-rest;
+  }
+
+  .dx-diagram-toolbar-menu-separator {
+    border-top-color: $diagram-toolbar-border-rest;
+  }
+
+  .dx-diagram-toolbar-text {
+    padding: $diagram-toolbar-text-padding-block-start 0 $diagram-toolbar-text-padding-block-end $diagram-toolbar-text-padding-inline-start;
+  }
+
+  .dx-diagram-lg-edit-item .dx-texteditor {
+    width: $diagram-large-editor-width;
+  }
+
+  .dx-diagram-md-edit-item .dx-texteditor {
+    width: $diagram-medium-editor-width;
+  }
+
+  .dx-diagram-sm-edit-item .dx-texteditor {
+    width: $diagram-small-editor-width;
+  }
+
+  .dx-diagram-color-edit-item .dx-dropdowneditor-field-before-template-wrapper {
+    .dx-diagram-i,
+    .dx-icon {
+      border-bottom-width: $diagram-toolbar-colorbutton-border-width;
+      border-bottom-style: solid;
+    }
+  }
+}
+
+.dx-diagram-toolbar,
+.dx-dropdownmenu-popup {
+  .dx-diagram-image-dropdown-item,
+  .dx-diagram-color-edit-item {
+    .dx-dropdowneditor-field-before-template-wrapper {
+      .dx-diagram-i,
+      .dx-icon {
+        margin-left: $diagram-icon-margin-inline-start;
+        margin-right: $diagram-icon-margin-inline-end;
+      }
+
+      .dx-icon {
+        font-size: $diagram-toolbar-icon-size;
+        color: $diagram-content-rest;
+      }
+    }
+  }
+}
+
+.dx-diagram-contextmenu.dx-context-menu {
+  .dx-menu-item .dx-menu-item-content .dx-menu-item-popout-container {
+    right: 0;
+  }
+
+  .dx-menu-no-icons > .dx-menu-item-wrapper > .dx-menu-item > .dx-menu-item-content .dx-menu-item-text {
+    padding-left: $diagram-item-text-padding-inline-start;
+  }
+}
+
+.dx-diagram-touchbar {
+  .dx-menu-item .dx-menu-item-content {
+    padding: $diagram-touchbar-item-padding;
+  }
+
+  .dx-menu-separator {
+    width: $diagram-separator-width;
+    height: calc(#{$diagram-toolbar-icon-size} + #{$diagram-touchbar-item-padding} + #{$diagram-touchbar-item-padding} + 2px);
+    margin: 0;
+  }
+}
+
+@include diagram-action-icons-mixin($diagram-content-rest, $diagram-content-rest, $diagram-toolbar-icon-size, $diagram-toolbar-colorbutton-border-width);
+
+.dx-diagram-toolbox-popup .dx-button-has-icon .dx-icon.dx-icon-diagram-toolbox-drag {
+  @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/toolbox-drag.svg'), $diagram-content-rest, $diagram-toolbox-title-size, $diagram-toolbox-title-size);
+
+  line-height: $diagram-toolbox-title-size;
+  background-size: $diagram-toolbox-title-size $diagram-toolbox-title-size;
+}
+
+.dx-diagram-i-button-properties-panel-open {
+  @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/properties-panel-open.svg'), $diagram-properties-panel-icon-rest, $diagram-toolbar-icon-size, $diagram-toolbar-icon-size);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/diagram/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/diagram/_sizes.scss
new file mode 100644
index 000000000000..6db2b043b527
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/diagram/_sizes.scss
@@ -0,0 +1,138 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+/*
+ * O4: these used to be read from popup/, speedDialAction/ and fieldset/. Diagram's floating
+ * toolbar and its toolbar text are diagram's own anatomy, so the values live here; the
+ * `@if $size` branches are copied because the providers had them.
+ */
+$diagram-floating-toolbar-container-border-radius: calc(#{$global-border-radius} * 2) !default;
+$diagram-floating-toolbar-button-size: null !default;
+$diagram-toolbar-text-padding-inline-start: null !default;
+$diagram-toolbar-text-padding-block-start: ds.$spacing-210 !default;
+$diagram-toolbar-text-padding-block-end: ds.$spacing-200 !default;
+
+@if $size == "default" {
+  $diagram-floating-toolbar-button-size: ds.$spacing-440 !default;
+  $diagram-toolbar-text-padding-inline-start: ds.$spacing-150 !default;
+}
+
+@else if $size == "compact" {
+  $diagram-floating-toolbar-button-size: ds.$spacing-320 !default;
+  $diagram-toolbar-text-padding-inline-start: ds.$spacing-120 !default;
+}
+
+// Not colours: opacities that used to sit in _colors.scss (NAMING.md, O7)
+$diagram-image-icon-muted-opacity: ds.$opacity-50 !default;
+
+$diagram-toolbox-width: null !default;
+$diagram-toolbox-h-padding: null !default;
+$diagram-toolbox-accordion-v-padding: null !default;
+$diagram-toolbox-input-image-size: null !default;
+$diagram-toolbox-input-image-padding: null !default;
+$diagram-toolbox-mobile-padding: null !default;
+$diagram-properties-panel-padding: null !default;
+$diagram-properties-panel-spacing: null !default;
+$diagram-properties-layout-icon-size: null !default;
+$diagram-touchbar-item-padding: null !default;
+$diagram-floating-toolbar-items-height: null !default;
+$diagram-floating-toolbar-editor-padding: null !default;
+$diagram-floating-toolbar-editor-button-padding: null !default;
+$diagram-small-editor-width: null !default;
+$diagram-medium-editor-width: null !default;
+$diagram-large-editor-width: null !default;
+
+$diagram-toolbox-input-margin: ds.$spacing-20 !default;
+
+@if $size == "default" {
+  $diagram-toolbox-width: 156px !default; // dx-offscale: 156px
+  $diagram-toolbox-h-padding: ds.$spacing-120 !default;
+  $diagram-toolbox-accordion-v-padding: ds.$spacing-80 !default;
+  $diagram-toolbox-input-image-size: ds.$spacing-180 !default;
+  $diagram-toolbox-input-image-padding: ds.$spacing-60 ds.$spacing-40 !default;
+  $diagram-toolbox-mobile-padding: 68px !default; // dx-offscale: 68px
+
+  $diagram-properties-panel-padding: 0 !default;
+  $diagram-properties-panel-spacing: ds.$spacing-160 !default;
+  $diagram-properties-layout-icon-size: ds.$spacing-640 !default;
+
+  $diagram-touchbar-item-padding: ds.$spacing-100 !default;
+
+  $diagram-floating-toolbar-items-height: ds.$spacing-360 !default;
+  $diagram-floating-toolbar-editor-padding: ds.$spacing-80 ds.$spacing-60 !default;
+  $diagram-floating-toolbar-editor-button-padding: ds.$spacing-40 !default;
+
+  $diagram-small-editor-width: ds.$spacing-1000 !default;
+  $diagram-medium-editor-width: 180px !default; // dx-offscale: 180px
+  $diagram-large-editor-width: 280px !default; // dx-offscale: 280px
+}
+
+@else if $size == "compact" {
+  $diagram-toolbox-width: 130px !default; // dx-offscale: 130px
+  $diagram-toolbox-h-padding: ds.$spacing-100 !default;
+  $diagram-toolbox-accordion-v-padding: ds.$spacing-60 !default;
+  $diagram-toolbox-input-image-size: ds.$spacing-140 !default;
+  $diagram-toolbox-input-image-padding: ds.$spacing-30 ds.$spacing-40 !default;
+  $diagram-toolbox-mobile-padding: 58px !default; // dx-offscale: 58px
+
+  $diagram-properties-panel-padding: ds.$spacing-60 !default;
+  $diagram-properties-panel-spacing: ds.$spacing-80 !default;
+  $diagram-properties-layout-icon-size: ds.$spacing-480 !default;
+
+  $diagram-touchbar-item-padding: ds.$spacing-70 !default;
+
+  $diagram-floating-toolbar-items-height: ds.$spacing-280 !default;
+  $diagram-floating-toolbar-editor-padding: ds.$spacing-60 ds.$spacing-40 !default;
+  $diagram-floating-toolbar-editor-button-padding: ds.$spacing-20 !default;
+
+  $diagram-small-editor-width: ds.$spacing-800 !default;
+  $diagram-medium-editor-width: ds.$spacing-1200 !default;
+  $diagram-large-editor-width: 220px !default; // dx-offscale: 220px
+}
+
+// Values hoisted from style-file literals (tokenized)
+$diagram-popup-close-icon-font-size: ds.$font-size-120 !default; // dx-icon-glyph-size: text roles not applicable
+$diagram-popup-close-icon-line-height: ds.$line-height-120 !default; // dx-icon-glyph-size: text roles not applicable
+$diagram-toolbar-colorbutton-border-width: ds.$border-width-30 !default;
+$diagram-floating-toolbar-container-padding: ds.$spacing-40 !default;
+$diagram-button-margin: ds.$spacing-20 !default;
+$diagram-item-padding: 0 ds.$spacing-40 0 0 !default;
+$diagram-closebutton-margin: ds.$spacing-10 0 0 !default;
+$diagram-icon-width: ds.$spacing-140 !default;
+$diagram-icon-height: ds.$spacing-140 !default;
+$diagram-icon-padding: ds.$spacing-20 !default;
+$diagram-title-padding: ds.$spacing-80 ds.$spacing-80 0 0 !default;
+$diagram-icon-margin-inline-start: ds.$spacing-120 !default;
+$diagram-icon-margin-inline-end: ds.$spacing-120 !default;
+$diagram-item-text-padding-inline-start: ds.$spacing-40 !default;
+$diagram-separator-width: ds.$spacing-10 !default;
+$diagram-toolbar-wrapper-border-block-end: ds.$border-width-10 solid !default;
+$diagram-toolbox-input-container-border-block-end: ds.$border-width-10 solid transparent !default;
+$diagram-toolbox-input-container-border-block-start: ds.$border-width-10 solid transparent !default;
+$diagram-accordion-item-border-block-end: ds.$border-width-10 solid transparent !default;
+$diagram-toolbox-title-size: ds.$spacing-180 !default;
+$diagram-button-min-width: ds.$spacing-240 !default;
+$diagram-button-min-height: ds.$spacing-240 !default;
+$diagram-accordion-item-title-min-height: ds.$spacing-320 !default;
+$diagram-popup-title-toolbar-font-size: 0.8em !default; // dx-relative: scales with the parent font-size
+
+// Base-layer sizing injected with design tokens (wave B2)
+$diagram-height: 600px !default; // dx-offscale: 600px
+$diagram-min-height: 350px !default; // dx-offscale: 350px
+$diagram-toolbar-wrapper-padding: ds.$spacing-50 !default;
+$fluent-diagram-button-min-height: ds.$spacing-140 !default;
+$diagram-popup-content-padding: ds.$spacing-80 !default;
+$diagram-color-view-palette-min-width: 300px !default; // dx-offscale: 300px
+$diagram-color-view-hue-scale-cell-margin-inline-start: ds.$spacing-120 !default;
+$diagram-loading-indicator-width: ds.$spacing-640 !default;
+$diagram-loading-indicator-height: ds.$spacing-640 !default;
+$diagram-context-toolbox-target-width: ds.$spacing-10 !default;
+$diagram-context-toolbox-target-height: ds.$spacing-10 !default;
+
+/*
+ * Derived values, moved out of _index.scss: a file that emits rules must not declare
+ * variables (NAMING.md, O7).
+ */
+$diagram-toolbar-icon-size: $global-icon-size;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/drawer/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/drawer/_colors.scss
new file mode 100644
index 000000000000..6c5c3337267a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/drawer/_colors.scss
@@ -0,0 +1,5 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$drawer-backdrop-rest: ds.$color-surface-backdrop-default-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/drawer/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/drawer/_index.scss
new file mode 100644
index 000000000000..29359d909336
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/drawer/_index.scss
@@ -0,0 +1,10 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/drawer";
+
+// adduse
+.dx-drawer-shader {
+  background-color: $drawer-backdrop-rest;
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/drawer/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/drawer/_sizes.scss
new file mode 100644
index 000000000000..43b104010f9e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/drawer/_sizes.scss
@@ -0,0 +1,4 @@
+@use "../sizes" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownBox/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownBox/_colors.scss
new file mode 100644
index 000000000000..89c53a85429e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownBox/_colors.scss
@@ -0,0 +1,6 @@
+@use "sass:color";
+@use "../sizes" as *;
+@use "../colors" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownBox/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownBox/_index.scss
new file mode 100644
index 000000000000..adb7bf344e97
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownBox/_index.scss
@@ -0,0 +1,7 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+
+// adduse
+@use "../dropDownEditor";
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownBox/_sizes.scss
new file mode 100644
index 000000000000..43b104010f9e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownBox/_sizes.scss
@@ -0,0 +1,4 @@
+@use "../sizes" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownButton/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownButton/_colors.scss
new file mode 100644
index 000000000000..89c53a85429e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownButton/_colors.scss
@@ -0,0 +1,6 @@
+@use "sass:color";
+@use "../sizes" as *;
+@use "../colors" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownButton/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownButton/_index.scss
new file mode 100644
index 000000000000..742b1ac31e37
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownButton/_index.scss
@@ -0,0 +1,43 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../button/mixins" as *;
+@use "../common/mixins" as *;
+@use "../../base/dropDownButton";
+@use "../../base/dropDownButton/mixins" as *;
+
+// adduse
+
+@include dx-dropdownbutton(
+  $drop-down-button-toggle-spindown-icon-size,
+  $drop-down-button-action-padding-inline,
+);
+
+.dx-dropdownbutton-popup-wrapper {
+  @include dx-dropdownlist-list-appearance();
+}
+
+.dx-dropdownbutton {
+  &:not(.dx-dropdownbutton-has-arrow) {
+    .dx-button-has-icon:not(.dx-button-has-text) {
+      @include dx-button-onlyicon-sizing();
+    }
+  }
+
+  &.dx-state-disabled {
+    opacity: 1;
+  }
+}
+
+.dx-dropdownbutton-action {
+  &.dx-button-has-icon,
+  &.dx-button-has-text {
+    .dx-icon-spindown.dx-icon-right {
+      width: $drop-down-button-action-spindown-icon-size;
+      height: $drop-down-button-action-spindown-icon-size;
+    }
+  }
+}
+
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownButton/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownButton/_sizes.scss
new file mode 100644
index 000000000000..d24ec8ec22e2
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownButton/_sizes.scss
@@ -0,0 +1,20 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$drop-down-button-action-padding-inline: null !default;
+$drop-down-button-toggle-spindown-icon-size: null !default;
+$drop-down-button-action-spindown-icon-size: null !default;
+
+@if $size == "default" {
+  $drop-down-button-action-padding-inline: ds.$spacing-120 !default;
+  $drop-down-button-toggle-spindown-icon-size: ds.$spacing-240;
+  $drop-down-button-action-spindown-icon-size: ds.$spacing-160 !default;
+}
+
+@else if $size == "compact" {
+  $drop-down-button-action-padding-inline: ds.$spacing-80 !default;
+  $drop-down-button-toggle-spindown-icon-size: ds.$spacing-180;
+  $drop-down-button-action-spindown-icon-size: ds.$spacing-120 !default;
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownEditor/_colors.scss
new file mode 100644
index 000000000000..79ea423d3a2f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownEditor/_colors.scss
@@ -0,0 +1,9 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$drop-down-editor-icon-rest: ds.$color-content-neutral-subdued-rest !default;
+
+$drop-down-editor-icon-active: ds.$color-content-neutral-subdued-rest !default;
+
+// Base-layer values injected with design tokens (wave B1)
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownEditor/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownEditor/_index.scss
new file mode 100644
index 000000000000..ca5876143416
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownEditor/_index.scss
@@ -0,0 +1,123 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../common/sizes" as *;
+@use "../textEditor/sizes" as textEditorSizes;
+@use "../../base/icon_fonts" as *;
+@use "../../base/dropDownEditor" with (
+  $dropdowneditor-icon-idle-opacity: $drop-down-editor-icon-opacity-rest,
+);
+@use "../../base/dropDownEditor/mixins" as *;
+
+// adduse
+
+@mixin dx-dropdowneditor-button-icon() {
+  width: $drop-down-editor-button-size;
+  height: 100%;
+
+  @include dx-icon-font-centered-sizing($drop-down-editor-button-size);
+}
+
+.dx-dropdowneditor-button {
+  width: $drop-down-editor-button-size;
+  min-width: $drop-down-editor-button-size;
+
+  .dx-state-readonly & {
+    .dx-dropdowneditor-icon {
+      opacity: 1;
+    }
+  }
+}
+
+.dx-dropdowneditor-icon {
+  color: $drop-down-editor-icon-rest;
+
+  @include dx-icon(spindown);
+  @include dx-dropdowneditor-button-icon();
+}
+
+.dx-dropdowneditor-input-wrapper {
+  .dx-texteditor {
+    &::before,
+    &::after {
+      content: none;
+    }
+
+    &.dx-state-hover,
+    &.dx-state-focused,
+    &.dx-state-active &.dx-state-disabled,
+    &.dx-state-readonly,
+    &.dx-state-readonly.dx-state-hover,
+    & {
+      background-color: transparent;
+      box-shadow: none;
+
+      &.dx-texteditor-with-floating-label,
+      &.dx-texteditor-with-label {
+        .dx-texteditor-label {
+          .dx-label-before,
+          .dx-label,
+          .dx-label-after {
+            background-color: transparent;
+            box-shadow: none;
+          }
+        }
+      }
+    }
+  }
+}
+
+.dx-invalid,
+.dx-valid,
+.dx-validation-pending {
+  @include invalid-dropdowneditor-input-padding(
+    $drop-down-editor-invalid-badge-size,
+    textEditorSizes.$text-editor-input-underlined-padding-inline,
+    textEditorSizes.$text-editor-input-filled-padding-inline
+  );
+}
+
+.dx-dropdowneditor.dx-dropdowneditor-active,
+.dx-dropdowneditor-button.dx-state-active {
+  .dx-dropdowneditor-icon {
+    color: $drop-down-editor-icon-active;
+    opacity: 1;
+
+    @include dx-icon(spinup);
+    @include dx-dropdowneditor-button-icon();
+  }
+}
+
+.dx-invalid.dx-dropdowneditor,
+.dx-valid.dx-dropdowneditor {
+  .dx-texteditor-buttons-container {
+    &::after {
+      inset-inline-end: $drop-down-editor-invalid-badge-inset-inline-end;
+    }
+  }
+
+  &.dx-show-clear-button:not(.dx-texteditor-empty) {
+    .dx-texteditor-buttons-container {
+      &::after {
+        inset-inline-end: $drop-down-editor-invalid-badge-with-clear-inset-inline-end;
+      }
+    }
+  }
+}
+
+.dx-dropdowneditor-overlay {
+  &.dx-popup-wrapper {
+    .dx-overlay-content {
+      box-shadow: $global-dropdown-box-shadow;
+      overflow: hidden;
+    }
+  }
+
+  .dx-list-group-header,
+  .dx-list-item-content,
+  .dx-list-select-all-label {
+    font-size: $drop-down-editor-list-font-size;
+    line-height: $drop-down-editor-list-line-height;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownEditor/_sizes.scss
new file mode 100644
index 000000000000..a46c0b8e3e60
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownEditor/_sizes.scss
@@ -0,0 +1,31 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+@use "../common/sizes" as *;
+
+// adduse
+
+// Not a colour: an opacity / a composite box-shadow belongs here (NAMING.md O7)
+$drop-down-editor-icon-opacity-rest: ds.$opacity-35 !default;
+
+$drop-down-editor-list-font-size: null !default;
+$drop-down-editor-list-line-height: null !default;
+
+
+@if $size == "default" {
+  $drop-down-editor-list-font-size: ds.$font-size-base-md !default;
+  $drop-down-editor-list-line-height: ds.$line-height-base-md !default;
+}
+
+@else if $size == "compact" {
+  $drop-down-editor-list-font-size: ds.$spacing-130 !default;
+  $drop-down-editor-list-line-height: ds.$line-height-base-sm !default;
+}
+
+/*
+ * Derived values, moved out of _index.scss: a file that emits rules must not declare
+ * variables (NAMING.md, O7).
+ */
+$drop-down-editor-button-size: $global-icon-size;
+$drop-down-editor-invalid-badge-inset-inline-end: calc(#{$drop-down-editor-button-size} + #{$invalid-badge-offset});
+$drop-down-editor-invalid-badge-with-clear-inset-inline-end: calc(#{$drop-down-editor-button-size} * 2 + #{$invalid-badge-offset});
+$drop-down-editor-invalid-badge-size: calc(#{$invalid-badge-size} + #{$invalid-badge-padding-inline});
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownList/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownList/_colors.scss
new file mode 100644
index 000000000000..89c53a85429e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownList/_colors.scss
@@ -0,0 +1,6 @@
+@use "sass:color";
+@use "../sizes" as *;
+@use "../colors" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownList/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownList/_index.scss
new file mode 100644
index 000000000000..b3b6c5d6172b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownList/_index.scss
@@ -0,0 +1,16 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../common/mixins" as *;
+@use "../../base/dropDownList" with (
+  $dropdownlist-list-min-height: $drop-down-list-min-height,
+);
+
+// adduse
+@use "../dropDownEditor";
+
+
+.dx-dropdownlist-popup-wrapper {
+  @include dx-dropdownlist-list-appearance();
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownList/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownList/_sizes.scss
new file mode 100644
index 000000000000..382a53b283d5
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownList/_sizes.scss
@@ -0,0 +1,8 @@
+@use "../../../_design-system/variables/ds" as ds;
+@use "../sizes" as *;
+
+// adduse
+
+
+// Base-layer sizing injected with design tokens (wave B2)
+$drop-down-list-min-height: 35px !default; // dx-offscale: 35px
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownMenu/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownMenu/_colors.scss
new file mode 100644
index 000000000000..89c53a85429e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownMenu/_colors.scss
@@ -0,0 +1,6 @@
+@use "sass:color";
+@use "../sizes" as *;
+@use "../colors" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownMenu/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownMenu/_index.scss
new file mode 100644
index 000000000000..30b19f65609a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownMenu/_index.scss
@@ -0,0 +1,23 @@
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../common/sizes" as *;
+@use "../../base/dropDownMenu" with (
+  $dropdownmenu-list-min-width: $drop-down-menu-list-min-width,
+  $dropdownmenu-list-border-radius: $drop-down-menu-list-border-radius,
+  $dropdownmenu-popup-content-padding: $drop-down-menu-popup-content-padding,
+);
+
+// adduse
+
+.dx-dropdownmenu-popup-wrapper {
+  .dx-toolbar-menu-section {
+    display: flex;
+    flex-direction: column;
+    row-gap: $drop-down-menu-section-row-gap;
+    margin-inline: $drop-down-menu-section-margin-inline;
+  }
+
+  .dx-overlay-content {
+    box-shadow: $global-dropdown-box-shadow;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownMenu/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownMenu/_sizes.scss
new file mode 100644
index 000000000000..2eef81143406
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownMenu/_sizes.scss
@@ -0,0 +1,12 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$drop-down-menu-section-margin-inline: ds.$spacing-40 !default;
+$drop-down-menu-section-row-gap: ds.$spacing-20 !default;
+
+// Base-layer sizing injected with design tokens (wave B2)
+$drop-down-menu-list-min-width: ds.$spacing-1000 !default;
+$drop-down-menu-list-border-radius: ds.$border-radius-80 !default;
+$drop-down-menu-popup-content-padding: ds.$spacing-10 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/fieldset/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/fieldset/_colors.scss
new file mode 100644
index 000000000000..7c1deb218bf7
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/fieldset/_colors.scss
@@ -0,0 +1,6 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fieldset-field-label-content-rest: ds.$color-content-neutral-default-rest !default;
+$fieldset-field-value-invalid-content-rest: ds.$color-border-danger-default-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/fieldset/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/fieldset/_index.scss
new file mode 100644
index 000000000000..9cf488fac34e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/fieldset/_index.scss
@@ -0,0 +1,146 @@
+@use "sass:math";
+@use "sass:color";
+@use "sass:selector";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../common/mixins" as *;
+@use "../typography/mixins" as *;
+@use "../form/sizes" as formSizes;
+@use "../checkBox/sizes" as checkBoxSizes;
+@use "../switch/sizes" as switchSizes;
+@use "../slider/sizes" as sliderSizes;
+@use "../../base/fieldset" with (
+  $fieldset-root-margin-bottom: $fieldset-margin-block-end,
+);
+
+// adduse
+
+@mixin dx-fieldset-styling() {
+  .dx-field {
+    @include dx-base-typography();
+  }
+
+  .dx-field-label {
+    color: $fieldset-field-label-content-rest;
+    font-size: formSizes.$form-label-font-size;
+    cursor: default;
+
+    i {
+      font-style: normal;
+    }
+  }
+
+  .dx-field-value {
+    &.dx-attention {
+      color: $fieldset-field-value-invalid-content-rest;
+      padding-left: $fieldset-attention-icon-offset;
+
+      &::before {
+        @include dx-invalid-fluent-badge();
+      }
+    }
+  }
+
+  .dx-field-value:not(.dx-switch):not(.dx-checkbox):not(.dx-button),
+  .dx-field-value-static {
+    width: 60%;
+  }
+}
+
+@mixin dx-field-value-widget-position($name, $size) {
+  &.#{$name},
+  &:not(.dx-widget) > .#{$name} {
+    margin: calc((#{$fieldset-field-min-height} - #{$size}) / 2) 0;
+  }
+}
+
+// TODO: merge with .dx-fieldset-sizing after removing scope .dx-device-phone
+@mixin dx-fieldset-sizing-base() {
+  .dx-field {
+    padding: 0;
+    display: flex;
+  }
+
+  .dx-field-label {
+    align-self: center;
+    padding-right: $fieldset-field-label-value-spacing;
+  }
+
+  .dx-field-value {
+    &.dx-widget,
+    &:not(.dx-widget) > .dx-widget {
+      margin: 0;
+    }
+
+    &:not(.dx-widget) {
+      & > .dx-button,
+      & > .dx-checkbox,
+      & > .dx-switch {
+        float: right;
+      }
+    }
+
+    @include dx-field-value-widget-position(dx-checkbox, checkBoxSizes.$check-box-icon-font-size);
+    @include dx-field-value-widget-position(dx-switch, switchSizes.$switch-height);
+    @include dx-field-value-widget-position(dx-slider, sliderSizes.$slider-height);
+    @include dx-field-value-widget-position(dx-radiogroup, $fieldset-radio-group-min-height);
+
+    &.dx-attention {
+      padding: $fieldset-field-value-top-padding $fieldset-field-value-padding-inline $fieldset-field-value-bottom-padding;
+      position: relative;
+      padding-left: $fieldset-attention-icon-offset;
+
+      &::before {
+        left: 0;
+      }
+    }
+  }
+
+  .dx-field-value-static {
+    padding: $fieldset-field-value-top-padding $fieldset-field-value-padding-inline $fieldset-field-value-bottom-padding;
+  }
+}
+
+@mixin dx-fieldset-sizing($vertical-margin, $horizontal-margin, $header-vertical-margin, $field-vertical-margin) {
+  .dx-fieldset {
+    margin: $vertical-margin $horizontal-margin;
+    padding: 0;
+
+    @at-root #{selector.append(".dx-rtl", &)},
+    .dx-rtl & {
+      .dx-field-value {
+        &:not(.dx-widget) {
+          & > .dx-button,
+          & > .dx-checkbox,
+          & > .dx-switch {
+            float: left;
+          }
+        }
+      }
+    }
+  }
+
+  .dx-fieldset-header {
+    margin: 0 0 $header-vertical-margin 0;
+
+    @include dx-s-font-mixin();
+  }
+
+  .dx-field {
+    margin: 0 0 $field-vertical-margin 0;
+  }
+
+  .dx-field:last-of-type {
+    margin: 0;
+  }
+}
+
+@include dx-fieldset-styling();
+@include dx-fieldset-sizing-base();
+@include dx-fieldset-sizing(
+  $fieldset-margin-block,
+  $fieldset-margin-inline,
+  $fieldset-header-margin-block,
+  $fieldset-field-margin-block
+);
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/fieldset/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/fieldset/_sizes.scss
new file mode 100644
index 000000000000..4f1310334925
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/fieldset/_sizes.scss
@@ -0,0 +1,48 @@
+@use "../sizes" as *;
+@use "../common/sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+// Moved here from the theme root: this component owns it (NAMING.md O1)
+$fieldset-value-padding-inline: null !default;
+
+@if $size == "default" {
+  $fieldset-value-padding-inline: ds.$spacing-120 !default;
+}
+
+@else if $size == "compact" {
+  $fieldset-value-padding-inline: ds.$spacing-80 !default;
+}
+
+$fieldset-margin-block: null !default;
+$fieldset-margin-inline: null !default;
+$fieldset-header-margin-block: null !default;
+$fieldset-field-margin-block: null !default;
+$fieldset-field-label-value-spacing: null !default;
+
+@if $size == "default" {
+  $fieldset-margin-block: ds.$spacing-300 !default;
+  $fieldset-margin-inline: ds.$spacing-200 !default;
+  $fieldset-header-margin-block: ds.$spacing-200 !default;
+  $fieldset-field-margin-block: ds.$spacing-300 !default;
+  $fieldset-field-label-value-spacing: ds.$spacing-150 !default;
+}
+
+@else if $size == "compact" {
+  $fieldset-margin-block: ds.$spacing-200 !default;
+  $fieldset-margin-inline: ds.$spacing-160 !default;
+  $fieldset-header-margin-block: ds.$spacing-160 !default;
+  $fieldset-field-margin-block: ds.$spacing-200 !default;
+  $fieldset-field-label-value-spacing: ds.$spacing-120 !default;
+}
+
+$fieldset-field-min-height: $global-inline-widget-height !default;
+$fieldset-field-value-top-padding: ds.$spacing-210 !default;
+$fieldset-field-value-padding-inline: $fieldset-value-padding-inline !default;
+$fieldset-field-value-bottom-padding: ds.$spacing-200 !default;
+$fieldset-attention-icon-offset: calc(#{$fieldset-value-padding-inline} + #{$invalid-badge-size}) !default;
+$fieldset-radio-group-min-height: ds.$spacing-260 !default;
+
+// Base-layer sizing injected with design tokens (wave B2)
+$fieldset-margin-block-end: ds.$spacing-200 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/fileManager/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/fileManager/_colors.scss
new file mode 100644
index 000000000000..53621291b1d2
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/fileManager/_colors.scss
@@ -0,0 +1,47 @@
+@use "../colors" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$file-manager-border-rest: ds.$color-border-neutral-default-rest !default;
+$file-manager-file-toolbar-bg-rest: ds.$color-surface-neutral-subdued-rest !default;
+$file-manager-editor-bg-active: rgb(from #{ds.$color-content-neutral-default-rest} r g b / 0.1) !default;
+$file-manager-dirs-tree-item-content-focused: ds.$color-content-neutral-default-rest !default;
+$file-manager-breadcrumbs-item-bg-focused: ds.$color-surface-neutral-default-active !default;
+$file-manager-breadcrumbs-item-content-focused: ds.$color-content-neutral-default-rest !default;
+$file-manager-custom-thumbnail-content-rest: ds.$color-content-neutral-default-disabled !default;
+$file-manager-file-item-select-content-rest: ds.$color-content-neutral-default-inverted-rest !default;
+$file-manager-file-item-select-bg-rest: rgb(from #{ds.$color-surface-primary-default-rest} r g b / 0.8) !default;
+$file-manager-file-item-select-content-focused: ds.$color-content-neutral-default-inverted-rest !default;
+$file-manager-file-item-select-bg-focused: rgb(from #{ds.$color-surface-primary-default-rest} r g b / 0.7) !default;
+$file-manager-file-item-bg-hovered: ds.$color-surface-neutral-default-hovered !default;
+$file-manager-file-item-border-focused: ds.$color-border-primary-default-rest !default;
+$file-manager-item-content-focused: ds.$color-content-neutral-default-inverted-rest !default;
+$file-manager-dirs-tree-item-bg-focused: ds.$color-surface-neutral-default-active !default;
+
+/*
+ * The status icons (refresh/progress/done/error overlays) are SVG data-uri images: colors are
+ * baked into the background-image at build time (string replace). CSS var() tokens do NOT
+ * resolve inside a data-uri (they render black), so the values below are the static per-mode
+ * equivalents of the ds.$ tokens named in the markers. See DIVERGENCES.md.
+ */
+$file-manager-icon-success-content-rest: #107c10 !default; // dx-data-uri-static: ds.$color-surface-success-default-rest (mode-invariant)
+$file-manager-icon-danger-content-rest: #c50f1f !default; // dx-data-uri-static: ds.$color-surface-danger-default-rest (mode-invariant)
+$file-manager-icon-rest: null !default;
+$file-manager-icon-inverted-content-rest: null !default;
+
+@if $mode == "light" {
+  $file-manager-icon-rest: #161616 !default; // dx-data-uri-static: ds.$color-content-neutral-default-rest
+  $file-manager-icon-inverted-content-rest: #fff !default; // dx-data-uri-static: ds.$color-content-neutral-default-inverted-rest
+}
+
+@if $mode == "dark" {
+  $file-manager-icon-rest: #fff !default; // dx-data-uri-static: ds.$color-content-neutral-default-rest
+  $file-manager-icon-inverted-content-rest: #161616 !default; // dx-data-uri-static: ds.$color-content-neutral-default-inverted-rest
+}
+
+// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
+$file-manager-drop-zone-placeholder-border-rest: ds.$color-border-primary-default-rest !default;
+$file-manager-bg-rest: ds.$color-surface-neutral-default-rest !default;
+$file-manager-danger-bg-rest: ds.$color-surface-danger-default-rest !default;
+$file-manager-inverted-content-rest: ds.$color-content-neutral-default-static-dark-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/fileManager/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/fileManager/_index.scss
new file mode 100644
index 000000000000..1874620e38c0
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/fileManager/_index.scss
@@ -0,0 +1,318 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/fileManager" with (
+  $filemanager-root-height: $file-manager-height,
+  $filemanager-root-border: $file-manager-border,
+  $filemanager-overlay-content-min-width: $file-manager-overlay-content-min-width,
+  $filemanager-overlay-content-max-width: $file-manager-overlay-content-max-width,
+  $filemanager-popup-content-padding: $file-manager-popup-content-padding,
+  $filemanager-progress-box-padding: $file-manager-progress-box-padding,
+  $filemanager-notification-common-padding-bottom: $file-manager-notification-padding-block-end,
+  $filemanager-notification-common-border-bottom-width: $file-manager-notification-border-block-end-width,
+  $filemanager-progress-panel-border-left-width: $file-manager-progress-panel-border-inline-start-width,
+  $filemanager-progress-panel-width: $file-manager-progress-panel-width,
+  $filemanager-progress-panel-container-padding: $file-manager-progress-panel-container-padding,
+  $filemanager-progress-panel-title-padding: $file-manager-progress-panel-title-padding,
+  $filemanager-progress-panel-separator-height: $file-manager-progress-panel-separator-height,
+  $filemanager-i-cancel-width: $file-manager-i-cancel-width,
+  $filemanager-i-cancel-height: $file-manager-i-cancel-height,
+  $filemanager-progress-box-margin-bottom: $file-manager-progress-box-margin-block-end,
+  $filemanager-progress-box-border-radius: $file-manager-progress-box-border-radius,
+  $filemanager-progress-box-padding-2: $fluent-filemanager-progress-box-padding-2,
+  $filemanager-progress-box-without-close-button-padding-right: $file-manager-progress-box-without-close-button-padding-inline-end,
+  $filemanager-progress-box-image-margin-right: $file-manager-progress-box-image-margin-inline-end,
+  $filemanager-progress-box-common-padding: $fluent-filemanager-progress-box-common-padding,
+  $filemanager-progress-box-close-button-margin-top: $file-manager-progress-box-close-button-margin-block-start,
+  $filemanager-progress-box-close-button-margin-left: $file-manager-progress-box-close-button-margin-inline-start,
+  $filemanager-progress-box-error-padding: $file-manager-progress-box-error-padding,
+  $filemanager-progress-box-error-max-height: $file-manager-progress-box-error-max-height,
+  $filemanager-toolbar-separator-item-width: $file-manager-toolbar-separator-item-width,
+  $filemanager-toolbar-separator-item-margin-right: $file-manager-toolbar-separator-item-margin-inline-end,
+  $filemanager-container-border-top: $file-manager-container-border-block-start,
+  $filemanager-dirs-panel-padding: $file-manager-dirs-panel-padding,
+  $filemanager-drawer-panel-content-initial-min-width: $file-manager-drawer-panel-content-initial-min-width,
+  $filemanager-drawer-panel-content-initial-max-width: $file-manager-drawer-panel-content-initial-max-width,
+  $filemanager-breadcrumbs-padding: $file-manager-breadcrumbs-padding,
+  $filemanager-breadcrumbs-border-bottom: $file-manager-breadcrumbs-border-block-end,
+  $filemanager-menu-item-content-padding-left: $file-manager-menu-item-content-padding-inline-start,
+  $filemanager-menu-item-content-padding-right: $file-manager-menu-item-content-padding-inline-end,
+  $filemanager-menu-item-content-margin: $file-manager-menu-item-content-margin,
+  $filemanager-menu-item-content-padding-left-2: $fluent-filemanager-menu-item-content-padding-left-2,
+  $filemanager-menu-item-content-padding-right-2: $fluent-filemanager-menu-item-content-padding-right-2,
+  $filemanager-thumbnails-view-port-padding: $file-manager-thumbnails-view-port-padding,
+  $filemanager-thumbnails-item-width: $file-manager-thumbnails-item-width,
+  $filemanager-thumbnails-item-height: $file-manager-thumbnails-item-height,
+  $filemanager-thumbnails-item-border: $file-manager-thumbnails-item-border,
+  $filemanager-thumbnails-item-margin: $file-manager-thumbnails-item-margin,
+  $filemanager-thumbnails-item-content-padding: $file-manager-thumbnails-item-content-padding,
+  $filemanager-thumbnails-item-spacer-height: $file-manager-thumbnails-item-spacer-height,
+  $filemanager-button-content-padding: $file-manager-view-mode-button-content-padding,
+  $filemanager-overlay-content-min-width-2: $fluent-filemanager-overlay-content-min-width-2,
+  $filemanager-overlay-content-min-height: $file-manager-overlay-content-min-height,
+  $filemanager-overlay-content-max-height: $file-manager-overlay-content-max-height,
+  $filemanager-overlay-content-max-width-2: $fluent-filemanager-overlay-content-max-width-2,
+  $filemanager-overlay-content-min-height-2: $fluent-filemanager-overlay-content-min-height-2,
+  $filemanager-overlay-content-max-height-2: $fluent-filemanager-overlay-content-max-height-2,
+  $filemanager-progressbox-cancel-button-margin-top: $file-manager-progress-box-cancel-button-margin-block-start,
+  $filemanager-progress-title-font-size: $file-manager-progress-title-font-size,
+  $filemanager-progress-title-font-weight: $file-manager-progress-title-font-weight,
+  $filemanager-progress-bold-font-weight: $file-manager-progress-bold-font-weight,
+);
+@use "../../base/fileManager/mixins" as *;
+
+// adduse
+@use "../splitterBar";
+
+
+.dx-filemanager {
+  border-color: $file-manager-border-rest;
+
+  .dx-filemanager-notification-common {
+    border-color: $file-manager-border-rest;
+    color: $file-manager-danger-bg-rest;
+  }
+
+  .dx-drawer-shrink .dx-filemanager-progress-panel {
+    border-left-color: $file-manager-border-rest;
+  }
+
+  .dx-filemanager-progress-panel {
+    background-color: $file-manager-bg-rest;
+
+    .dx-filemanager-progress-panel-title {
+      padding-top: $file-manager-progress-panel-title-padding-block;
+      padding-bottom: $file-manager-progress-panel-title-padding-block;
+    }
+  }
+
+  .dx-filemanager-progress-box-image {
+    width: calc(#{$global-icon-size} * 2);
+    height: calc(#{$global-icon-size} * 2);
+    font-size: calc(#{$global-icon-size} * 2);
+  }
+
+  .dx-filemanager-progress-box-error {
+    color: $file-manager-inverted-content-rest;
+    background: $file-manager-danger-bg-rest;
+  }
+
+  .dx-filemanager-progress-box .dx-filemanager-progress-box-close-button {
+    margin-top: $file-manager-progress-box-button-close-margin-block-start;
+  }
+
+  .dx-filemanager-toolbar {
+    padding: $file-manager-toolbar-padding;
+    background: $file-manager-bg-rest;
+    min-height: $file-manager-toolbar-height;
+
+    &.dx-filemanager-file-toolbar,
+    &.dx-filemanager-file-toolbar .dx-toolbar {
+      background: $file-manager-file-toolbar-bg-rest;
+    }
+
+    .dx-filemanager-toolbar-separator-item {
+      height: $file-manager-toolbar-separator-height;
+      background: $file-manager-border-rest;
+    }
+
+    .dx-filemanager-toolbar-viewmode-item .dx-texteditor {
+      width: $file-manager-toolbar-viewmode-width;
+    }
+
+    .dx-texteditor.dx-editor-filled {
+      background: transparent;
+
+      &.dx-state-hover,
+      &.dx-state-active,
+      &.dx-state-focused {
+        background: $file-manager-editor-bg-active;
+      }
+
+      &.dx-dropdowneditor {
+        border-color: transparent;
+
+        .dx-dropdowneditor-icon {
+          background: transparent;
+        }
+
+        &.dx-state-hover .dx-dropdowneditor-icon,
+        &.dx-state-active .dx-dropdowneditor-icon {
+          background: transparent;
+          border-color: transparent;
+        }
+      }
+    }
+
+    .dx-toolbar .dx-filemanager-toolbar-viewmode-item .dx-button-content {
+      padding-left: $file-manager-toolbar-viewmode-padding;
+      padding-right: $file-manager-toolbar-viewmode-padding;
+    }
+  }
+
+  .dx-filemanager-fileuploader-dropzone-placeholder {
+    border: $file-manager-file-uploader-drop-zone-placeholder-border;
+    border-color: $file-manager-drop-zone-placeholder-border-rest;
+  }
+
+  .dx-filemanager-container {
+    border-top-color: $file-manager-border-rest;
+  }
+
+  .dx-filemanager-dirs-panel {
+    border-right-color: $file-manager-border-rest;
+  }
+
+  .dx-filemanager-breadcrumbs {
+    border-bottom-color: $file-manager-border-rest;
+
+    .dx-menu-item {
+      &.dx-state-focused {
+        background: $file-manager-breadcrumbs-item-bg-focused;
+        color: $file-manager-breadcrumbs-item-content-focused;
+      }
+    }
+
+    .dx-menu-item-content {
+      padding-top: $file-manager-breadcrumbs-item-padding-block-start;
+      padding-bottom: $file-manager-breadcrumbs-item-padding-block-end;
+    }
+
+    .dx-filemanager-breadcrumbs-separator-item .dx-menu-item-content {
+      background: $file-manager-border-rest;
+    }
+
+    .dx-filemanager-breadcrumbs-separator-item,
+    .dx-filemanager-breadcrumbs-path-separator-item {
+      &.dx-state-hover {
+        background: transparent;
+      }
+    }
+  }
+
+  .dx-filemanager-thumbnails .dx-filemanager-thumbnails-item {
+    &.dx-item-selected {
+      color: $file-manager-file-item-select-content-rest;
+      background: $file-manager-file-item-select-bg-rest;
+    }
+
+    &.dx-state-hover:not(.dx-state-focused):not(.dx-item-selected) {
+      background: $file-manager-file-item-bg-hovered;
+    }
+
+    &.dx-state-focused {
+      border: $file-manager-border-focused;
+      border-color: $file-manager-file-item-border-focused;
+    }
+
+    &.dx-item-selected.dx-state-focused {
+      color: $file-manager-file-item-select-content-focused;
+      background: $file-manager-file-item-select-bg-focused;
+    }
+
+    .dx-filemanager-thumbnails-item-thumbnail {
+      width: calc(#{$global-icon-size} * 2);
+      height: calc(#{$global-icon-size} * 2);
+      font-size: calc(#{$global-icon-size} * 2);
+    }
+
+    .dx-filemanager-item-custom-thumbnail {
+      color: $file-manager-custom-thumbnail-content-rest;
+    }
+  }
+
+  .dx-filemanager-files-view {
+    background: $file-manager-bg-rest;
+
+    &.dx-filemanager-details {
+      .dx-filemanager-details-item-thumbnail {
+        font-size: $global-icon-size;
+        width: $global-icon-size;
+        height: $global-icon-size;
+      }
+
+      .dx-datagrid .dx-datagrid-content .dx-datagrid-table {
+        .dx-command-select {
+          padding: 0;
+          width: $file-manager-details-view-checkbox-column-width;
+          min-width: $file-manager-details-view-checkbox-column-width;
+          max-width: $file-manager-details-view-checkbox-column-width;
+        }
+
+        .dx-filemanager-details-item-is-directory {
+          padding-right: 0 !important; // stylelint-disable-line declaration-no-important
+          padding-left: 0 !important; // stylelint-disable-line declaration-no-important
+        }
+      }
+
+      .dx-row-focused .dx-filemanager-file-actions-button .dx-button .dx-icon {
+        color: $file-manager-item-content-focused;
+      }
+    }
+  }
+
+  .dx-filemanager-details {
+    .dx-filemanager-details-item-name-wrapper {
+      align-items: center;
+    }
+  }
+}
+
+.dx-filemanager-dirs-tree.dx-treeview {
+  .dx-treeview-item {
+    padding-top: $file-manager-tree-view-item-top-bottom-padding;
+    padding-bottom: $file-manager-tree-view-item-top-bottom-padding;
+  }
+
+  .dx-state-focused > .dx-treeview-item {
+    background: transparent;
+
+    &.dx-state-hover {
+      background: $file-manager-dirs-tree-item-bg-focused;
+    }
+
+    & * {
+      color: $file-manager-dirs-tree-item-content-focused;
+    }
+  }
+
+  .dx-treeview-item-without-checkbox > .dx-treeview-item.dx-filemanager-focused-item {
+    background: $file-manager-dirs-tree-item-bg-focused;
+
+    & * {
+      color: $file-manager-dirs-tree-item-content-focused;
+    }
+  }
+}
+
+.dx-filemanager-view-switcher-popup {
+  width: calc(2 * #{$file-manager-toolbar-viewmode-padding} + #{$global-icon-size});
+
+  .dx-dropdownbutton-popup-wrapper.dx-dropdownbutton-popup-wrapper .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item-content {
+    padding-left: calc(#{$file-manager-toolbar-viewmode-padding} - 1px);
+    padding-right: $file-manager-toolbar-viewmode-padding;
+    text-overflow: clip;
+  }
+}
+
+.dx-filemanager-dirs-tree.dx-treeview .dx-filemanager-file-actions-button .dx-button .dx-button-content {
+  padding: 0;
+}
+
+.dx-filemanager-file-actions-button {
+  .dx-button {
+    min-width: $file-manager-file-actions-button-size;
+    height: $file-manager-file-actions-button-size;
+
+    .dx-button-content {
+      padding: $file-manager-button-content-padding;
+    }
+  }
+}
+
+.dx-filemanager-context-menu .dx-menu-item-has-text:not(.dx-menu-item-has-icon) .dx-menu-item-text {
+  margin-left: $file-manager-context-menu-text-item-left-margin;
+}
+
+@include filemanager-icons-mixin($file-manager-icon-rest, $file-manager-icon-success-content-rest, $file-manager-icon-inverted-content-rest, $file-manager-icon-danger-content-rest, $file-manager-icon-inverted-content-rest, $file-manager-large-icon-size);
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/fileManager/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/fileManager/_sizes.scss
new file mode 100644
index 000000000000..7104edf9db6b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/fileManager/_sizes.scss
@@ -0,0 +1,120 @@
+@use "../sizes" as *;
+
+// adduse
+@use "../toolbar/sizes" as toolbarSizes;
+@use "../../../_design-system/variables/ds" as ds;
+
+$file-manager-toolbar-separator-height: null !default;
+$file-manager-toolbar-viewmode-width: null !default;
+$file-manager-toolbar-viewmode-padding: null !default;
+$file-manager-breadcrumbs-item-padding-block-start: null !default;
+$file-manager-breadcrumbs-item-padding-block-end: null !default;
+$file-manager-details-view-checkbox-column-width: null !default;
+$file-manager-file-actions-button-size: null !default;
+$file-manager-tree-view-item-top-bottom-padding: null !default;
+$file-manager-file-actions-button-top-bottom-padding: null !default;
+$file-manager-context-menu-text-item-left-margin: null !default;
+$file-manager-large-icon-size: null !default;
+$file-manager-progress-panel-title-padding-block: null !default;
+$file-manager-progress-box-button-close-margin-block-start: null !default;
+
+$file-manager-toolbar-height: toolbarSizes.$toolbar-height;
+
+@if $size == "default" {
+  $file-manager-toolbar-separator-height: ds.$spacing-360 !default;
+  $file-manager-toolbar-viewmode-width: 190px !default; // dx-offscale: 190px
+  $file-manager-toolbar-viewmode-padding: ds.$spacing-60 !default;
+  $file-manager-breadcrumbs-item-padding-block-start: ds.$spacing-70 !default;
+  $file-manager-breadcrumbs-item-padding-block-end: ds.$spacing-80 !default;
+  $file-manager-details-view-checkbox-column-width: 49px !default; // dx-offscale: 49px
+  $file-manager-file-actions-button-size: ds.$spacing-280 !default;
+  $file-manager-tree-view-item-top-bottom-padding: ds.$spacing-110 !default;
+  $file-manager-file-actions-button-top-bottom-padding: ds.$spacing-20 !default;
+  $file-manager-context-menu-text-item-left-margin: ds.$spacing-480 !default;
+  $file-manager-large-icon-size: ds.$spacing-220 !default;
+  $file-manager-progress-panel-title-padding-block: ds.$spacing-160 !default;
+  $file-manager-progress-box-button-close-margin-block-start: ds.$spacing-60 !default;
+}
+
+@else if $size == "compact" {
+  $file-manager-toolbar-separator-height: ds.$spacing-260 !default;
+  $file-manager-toolbar-viewmode-width: 150px !default; // dx-offscale: 150px
+  $file-manager-toolbar-viewmode-padding: ds.$spacing-50 !default;
+  $file-manager-breadcrumbs-item-padding-block-start: ds.$spacing-80 !default;
+  $file-manager-breadcrumbs-item-padding-block-end: ds.$spacing-90 !default;
+  $file-manager-details-view-checkbox-column-width: 43px !default; // dx-offscale: 43px
+  $file-manager-file-actions-button-size: ds.$spacing-220 !default;
+  $file-manager-tree-view-item-top-bottom-padding: ds.$spacing-80 !default;
+  $file-manager-file-actions-button-top-bottom-padding: ds.$spacing-90 !default;
+  $file-manager-context-menu-text-item-left-margin: ds.$spacing-300 !default;
+  $file-manager-large-icon-size: ds.$spacing-160 !default;
+  $file-manager-progress-panel-title-padding-block: ds.$spacing-100 !default;
+  $file-manager-progress-box-button-close-margin-block-start: ds.$spacing-50 !default;
+}
+
+
+// Values hoisted from style-file literals (tokenized)
+$file-manager-toolbar-padding: 0 ds.$spacing-100 !default;
+$file-manager-button-content-padding: $file-manager-file-actions-button-top-bottom-padding ds.$spacing-60 !default;
+$file-manager-file-uploader-drop-zone-placeholder-border: ds.$border-width-20 solid !default;
+$file-manager-border-focused: ds.$border-width-10 solid !default;
+
+// Base-layer values injected with design tokens (wave B1)
+$file-manager-progress-title-font-size: ds.$font-size-180 !default; // dx-no-semantic-role: 180 is off the font-size-role scale
+$file-manager-progress-title-font-weight: ds.$font-weight-title-default !default;
+$file-manager-progress-bold-font-weight: ds.$font-weight-base-strong !default;
+
+// Base-layer sizing injected with design tokens (wave B2)
+$file-manager-height: 500px !default; // dx-offscale: 500px
+$file-manager-border: ds.$border-width-10 solid !default;
+$file-manager-overlay-content-min-width: 240px !default; // dx-offscale: 240px
+$file-manager-overlay-content-max-width: 400px !default; // dx-offscale: 400px
+$file-manager-popup-content-padding: ds.$spacing-150 !default;
+$file-manager-progress-box-padding: ds.$spacing-50 0 0 !default;
+$file-manager-notification-padding-block-end: ds.$spacing-100 !default;
+$file-manager-notification-border-block-end-width: ds.$border-width-10 !default;
+$file-manager-progress-panel-border-inline-start-width: ds.$border-width-10 !default;
+$file-manager-progress-panel-width: 340px !default; // dx-offscale: 340px
+$file-manager-progress-panel-container-padding: ds.$spacing-100 ds.$spacing-200 ds.$spacing-200 ds.$spacing-200 !default;
+$file-manager-progress-panel-title-padding: 0 0 ds.$spacing-50 ds.$spacing-100 !default;
+$file-manager-progress-panel-separator-height: ds.$spacing-200 !default;
+$file-manager-i-cancel-width: ds.$spacing-160 !default;
+$file-manager-i-cancel-height: ds.$spacing-160 !default;
+$file-manager-progress-box-margin-block-end: ds.$spacing-80 !default;
+$file-manager-progress-box-border-radius: ds.$border-radius-20 !default;
+$fluent-filemanager-progress-box-padding-2: ds.$spacing-100 0 ds.$spacing-100 ds.$spacing-100 !default;
+$file-manager-progress-box-without-close-button-padding-inline-end: ds.$spacing-100 !default;
+$file-manager-progress-box-image-margin-inline-end: ds.$spacing-100 !default;
+$fluent-filemanager-progress-box-common-padding: ds.$spacing-50 0 !default;
+$file-manager-progress-box-close-button-margin-block-start: ds.$spacing-90 !default;
+$file-manager-progress-box-close-button-margin-inline-start: ds.$spacing-50 !default;
+$file-manager-progress-box-error-padding: ds.$spacing-20 ds.$spacing-80 ds.$spacing-30 !default;
+$file-manager-progress-box-error-max-height: 150px !default; // dx-offscale: 150px
+$file-manager-toolbar-separator-item-width: ds.$spacing-10 !default;
+$file-manager-toolbar-separator-item-margin-inline-end: ds.$spacing-50 !default;
+$file-manager-container-border-block-start: ds.$border-width-10 solid !default;
+$file-manager-dirs-panel-padding: ds.$spacing-50 ds.$spacing-100 !default;
+$file-manager-drawer-panel-content-initial-min-width: 250px !default; // dx-offscale: 250px
+$file-manager-drawer-panel-content-initial-max-width: 300px !default; // dx-offscale: 300px
+$file-manager-breadcrumbs-padding: ds.$spacing-20 ds.$spacing-110 !default;
+$file-manager-breadcrumbs-border-block-end: ds.$border-width-10 solid !default;
+$file-manager-menu-item-content-padding-inline-start: ds.$spacing-20 !default;
+$file-manager-menu-item-content-padding-inline-end: ds.$spacing-20 !default;
+$file-manager-menu-item-content-margin: 0 ds.$spacing-100 !default;
+$fluent-filemanager-menu-item-content-padding-left-2: ds.$spacing-10 !default;
+$fluent-filemanager-menu-item-content-padding-right-2: ds.$spacing-10 !default;
+$file-manager-thumbnails-view-port-padding: ds.$spacing-50 !default;
+$file-manager-thumbnails-item-width: ds.$spacing-1000 !default;
+$file-manager-thumbnails-item-height: ds.$spacing-1000 !default;
+$file-manager-thumbnails-item-border: ds.$border-width-10 dashed transparent !default;
+$file-manager-thumbnails-item-margin: ds.$spacing-50 !default;
+$file-manager-thumbnails-item-content-padding: ds.$spacing-130 0 ds.$spacing-100 !default;
+$file-manager-thumbnails-item-spacer-height: ds.$spacing-100 !default;
+$file-manager-view-mode-button-content-padding: ds.$spacing-100 ds.$spacing-110 !default;
+$fluent-filemanager-overlay-content-min-width-2: 300px !default; // dx-offscale: 300px
+$file-manager-overlay-content-min-height: 300px !default; // dx-offscale: 300px
+$file-manager-overlay-content-max-height: 400px !default; // dx-offscale: 400px
+$fluent-filemanager-overlay-content-max-width-2: 340px !default; // dx-offscale: 340px
+$fluent-filemanager-overlay-content-min-height-2: 180px !default; // dx-offscale: 180px
+$fluent-filemanager-overlay-content-max-height-2: 180px !default; // dx-offscale: 180px
+$file-manager-progress-box-cancel-button-margin-block-start: ds.$spacing-50 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/fileUploader/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/fileUploader/_colors.scss
new file mode 100644
index 000000000000..29444cff9d33
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/fileUploader/_colors.scss
@@ -0,0 +1,16 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$file-uploader-file-name-content-rest: ds.$color-content-neutral-default-rest !default;
+$file-uploader-file-icon-rest: ds.$color-content-neutral-subdued-rest !default;
+$file-uploader-progress-bar-status-content-rest: ds.$color-content-neutral-default-rest !default;
+$file-uploader-files-container-bg-rest: ds.$color-surface-neutral-default-rest !default;
+
+$file-uploader-file-name-status-content-rest: ds.$color-content-neutral-subdued-rest !default;
+
+$file-uploader-border-rest: ds.$color-border-neutral-default-rest !default;
+
+$file-uploader-file-status-message-invalid-content-rest: ds.$color-surface-danger-default-rest !default;
+$file-uploader-label-content-rest: ds.$color-content-neutral-subdued-rest !default;
+$file-uploader-file-container-shadow-rest: ds.$box-shadow-sm !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/fileUploader/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/fileUploader/_index.scss
new file mode 100644
index 000000000000..f999e1bfb336
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/fileUploader/_index.scss
@@ -0,0 +1,217 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/mixins" as *;
+@use "../../base/fileUploader" with (
+  $fileuploader-button-margin-left: $file-uploader-button-margin-inline-start,
+  $fileuploader-upload-button-margin-top: $file-uploader-upload-button-margin-block-start,
+  $fileuploader-show-file-list-padding-top: $file-uploader-show-file-list-padding-block-start,
+  $fileuploader-file-container-padding-2: $fluent-fileuploader-file-container-padding-2,
+  $fileuploader-button-width: $file-uploader-button-width,
+  $fileuploader-button-height: $file-uploader-button-height,
+  $fileuploader-button-margin-right: $file-uploader-button-margin-inline-end,
+  $fileuploader-cancel-button-position-end-margin-left: $file-uploader-cancel-button-position-end-margin-inline-start,
+  $fileuploader-file-status-message-height: $file-uploader-file-status-message-height,
+  $fileuploader-progressbar-height: $file-uploader-progress-bar-height,
+  $fileuploader-file-size-padding-left: $file-uploader-file-size-padding-inline-start,
+  $fileuploader-file-icon-padding-right: $file-uploader-file-icon-padding-inline-end,
+  $fileuploader-button-margin-left-2: $fluent-fileuploader-button-margin-left-2,
+  $fileuploader-cancel-button-position-end-margin-right: $file-uploader-cancel-button-position-end-margin-inline-end,
+  $fileuploader-file-size-padding-right: $file-uploader-file-size-padding-inline-end,
+  $fileuploader-file-status-message-margin-bottom-2: $fluent-fileuploader-file-status-message-margin-bottom-2,
+  $fileuploader-cancel-button-margin-top: $file-uploader-cancel-button-margin-block-start,
+  $fileuploader-status-message-font-size: $file-uploader-status-message-font-size,
+  $fileuploader-file-size-font-size: $file-uploader-file-size-font-size,
+);
+
+// adduse
+
+
+.dx-fileuploader-wrapper {
+  padding: $file-uploader-padding-block;
+}
+
+.dx-fileuploader-content > .dx-fileuploader-upload-button {
+  margin-left: $file-uploader-upload-button-margin-inline-start;
+  margin-right: $file-uploader-upload-button-margin-inline-end;
+}
+
+.dx-fileuploader-input-wrapper {
+  padding: $file-uploader-padding-block 0 $file-uploader-padding-block;
+  border: $file-uploader-file-wrapper-border-width dashed transparent;
+}
+
+.dx-fileuploader.dx-state-disabled .dx-fileuploader-input-label {
+  position: relative;
+}
+
+.dx-fileuploader-dragover {
+  .dx-fileuploader-input-wrapper {
+    border: none;
+    padding: 0;
+
+    .dx-fileuploader-button {
+      display: none;
+    }
+  }
+
+  .dx-fileuploader-input-label {
+    text-align: center;
+  }
+
+  .dx-fileuploader-input-container {
+    display: block;
+    width: 100%;
+  }
+
+  .dx-fileuploader-input {
+    display: block;
+    width: 100%;
+    padding-top: calc(#{$file-uploader-padding-block} * 2 + #{$file-uploader-file-wrapper-border-width});
+    padding-right: $file-uploader-file-wrapper-border-width;
+
+    // NOTE: height of the widget should be the same in default and drag over states, but not with margin help
+    padding-bottom: calc(#{$file-uploader-padding-block} * 2 + #{$file-uploader-file-wrapper-border-width} + 1px);
+    padding-left: $file-uploader-file-wrapper-border-width;
+    box-sizing: content-box;
+  }
+
+  .dx-fileuploader-input-label { // stylelint-disable-line no-duplicate-selectors
+    padding: calc(#{$file-uploader-padding-block} * 2) calc(#{$file-uploader-padding-block} + 2px);
+    border: $file-uploader-file-wrapper-border-width dashed;
+    border-color: $file-uploader-border-rest;
+  }
+}
+
+.dx-fileuploader-file-status-message,
+.dx-fileuploader-file-size {
+  color: $file-uploader-file-name-status-content-rest;
+}
+
+.dx-fileuploader-input {
+  padding: $file-uploader-padding-block 0;
+}
+
+.dx-fileuploader-input-label {
+  padding: calc(#{$file-uploader-padding-block} + (#{$global-font-size} / 2 - #{$file-uploader-padding-block}) / 2 + 1px) calc(#{$file-uploader-padding-block} + 2px);
+  color: $file-uploader-file-name-content-rest;
+
+  @include dx-overflow();
+}
+
+.dx-fileuploader-files-container {
+  .dx-fileuploader-show-file-list & {
+    padding: $file-uploader-files-container-padding;
+  }
+
+  .dx-fileuploader-empty & {
+    padding: 0;
+  }
+
+  .dx-invalid & {
+    padding-top: $file-uploader-invalid-padding-block-start;
+  }
+
+  .dx-fileuploader-button .dx-button-content {
+    padding: 0;
+  }
+
+  .dx-fileuploader-file-container {
+    padding: $file-uploader-file-container-padding;
+    margin-bottom: $file-uploader-file-container-margin-block-end;
+    border-radius: $file-uploader-files-container-border-radius;
+    background-color: $file-uploader-files-container-bg-rest;
+    box-shadow: $file-uploader-file-container-shadow-rest;
+
+    .dx-fileuploader-button-container + .dx-fileuploader-button-container {
+      .dx-button {
+        margin-right: $file-uploader-file-container-text-margin;
+
+        .dx-rtl & {
+          margin-left: $file-uploader-file-container-text-margin;
+          margin-right: 0;
+        }
+      }
+    }
+
+    .dx-fileuploader-button-container {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .dx-button {
+      height: $file-uploader-file-container-button-size;
+      width: $file-uploader-file-container-button-size;
+      margin-right: $file-uploader-file-container-button-margin;
+
+      &.dx-fileuploader-cancel-button-position-end {
+        margin-right: 0;
+        margin-left: $file-uploader-file-cancel-button-margin-inline-start;
+      }
+
+      .dx-rtl & {
+        margin-left: $file-uploader-file-container-button-margin;
+        margin-right: 0;
+
+        &.dx-fileuploader-cancel-button-position-end {
+          margin-left: 0;
+          margin-right: $file-uploader-file-cancel-button-margin-inline-start;
+        }
+      }
+    }
+  }
+}
+
+.dx-fileuploader .dx-progressbar-status {
+  color: $file-uploader-progress-bar-status-content-rest;
+}
+
+.dx-fileuploader-file {
+  display: block;
+  padding-top: $file-uploader-file-padding-block-start;
+  line-height: $file-uploader-file-line-height;
+}
+
+.dx-fileuploader-file-icon {
+  color: $file-uploader-file-icon-rest;
+  font-size: $file-uploader-file-icon-font-size;
+}
+
+.dx-fileuploader-file-name {
+  padding-bottom: calc((#{$file-uploader-padding-block}) / 2);
+  color: $file-uploader-file-name-content-rest;
+  font-weight: $file-uploader-file-name-font-weight;
+}
+
+.dx-fileuploader-file-size {
+  float: right;
+  padding: $file-uploader-file-size-margin;
+  color: $file-uploader-label-content-rest;
+}
+
+.dx-fileuploader-invalid {
+  .dx-fileuploader-file-status-message {
+    color: $file-uploader-file-status-message-invalid-content-rest;
+
+    span {
+      &:first-child {
+        margin-top: $file-uploader-file-status-message-margin-block-start;
+      }
+
+      &:last-child {
+        margin-bottom: $file-uploader-file-status-message-margin-block-end;
+      }
+    }
+  }
+
+  .dx-fileuploader-button-container {
+    vertical-align: middle;
+  }
+
+  .dx-fileuploader-cancel-button {
+    margin-top: 0;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/fileUploader/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/fileUploader/_sizes.scss
new file mode 100644
index 000000000000..f56f72f7759c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/fileUploader/_sizes.scss
@@ -0,0 +1,71 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$file-uploader-file-container-padding: null !default;
+$file-uploader-file-container-text-margin: null !default;
+$file-uploader-file-container-button-margin: null !default;
+$file-uploader-file-cancel-button-margin-inline-start: ds.$spacing-40 !default;
+$file-uploader-file-container-button-size: null !default;
+
+$file-uploader-padding-block: ds.$spacing-70 !default;
+$file-uploader-files-container-padding: null !default;
+$file-uploader-file-size-margin: null !default;
+$file-uploader-file-icon-font-size: null !default;
+$file-uploader-files-container-border-radius: ds.$spacing-40 !default;
+
+@if $size == "default" {
+  $file-uploader-file-container-padding: ds.$spacing-50 ds.$spacing-80 !default;
+  $file-uploader-file-container-text-margin: ds.$spacing-150 !default;
+  $file-uploader-file-container-button-margin: ds.$spacing-80 !default;
+  $file-uploader-file-container-button-size: ds.$spacing-320 !default;
+  $file-uploader-files-container-padding: ds.$spacing-120 ds.$spacing-40 0 !default;
+  $file-uploader-file-size-margin: 0 0 0 ds.$spacing-40 !default;
+  $file-uploader-file-icon-font-size: ds.$font-size-200 !default; // dx-icon-glyph-size: text roles not applicable
+}
+
+@else if $size == "compact" {
+  $file-uploader-file-container-padding: ds.$spacing-20 ds.$spacing-40 !default;
+  $file-uploader-file-container-text-margin: ds.$spacing-60 !default;
+  $file-uploader-file-container-button-margin: ds.$spacing-20 !default;
+  $file-uploader-file-container-button-size: ds.$spacing-280 !default;
+  $file-uploader-files-container-padding: ds.$spacing-120 ds.$spacing-40 0 !default;
+  $file-uploader-file-size-margin: 0 0 ds.$spacing-40 !default;
+  $file-uploader-file-icon-font-size: ds.$font-size-160 !default; // dx-icon-glyph-size: text roles not applicable
+}
+
+// Values hoisted from style-file literals (tokenized)
+$file-uploader-file-name-font-weight: ds.$font-weight-500 !default; // dx-no-semantic-role: 500 is off the weight-role scale (400/600/700)
+$file-uploader-file-line-height: 13px !default; // dx-offscale: 13px
+$file-uploader-upload-button-margin-inline-start: ds.$spacing-30 !default;
+$file-uploader-upload-button-margin-inline-end: ds.$spacing-30 !default;
+$file-uploader-invalid-padding-block-start: 50px !default; // dx-offscale: 50px
+$file-uploader-file-container-margin-block-end: ds.$spacing-40 !default;
+$file-uploader-file-padding-block-start: ds.$spacing-50 !default;
+$file-uploader-file-status-message-margin-block-start: ds.$spacing-20 !default;
+$file-uploader-file-status-message-margin-block-end: ds.$spacing-20 !default;
+$file-uploader-file-wrapper-border-width: ds.$border-width-30 !default;
+
+// Base-layer values injected with design tokens (wave B1)
+$file-uploader-status-message-font-size: ds.$font-size-caption-md !default;
+$file-uploader-file-size-font-size: ds.$font-size-caption-sm !default;
+
+// Base-layer sizing injected with design tokens (wave B2)
+$file-uploader-button-margin-inline-start: ds.$spacing-120 !default;
+$file-uploader-upload-button-margin-block-start: ds.$spacing-100 !default;
+$file-uploader-show-file-list-padding-block-start: ds.$spacing-220 !default;
+$fluent-fileuploader-file-container-padding-2: ds.$spacing-40 0 ds.$spacing-40 !default;
+$file-uploader-button-width: ds.$spacing-280 !default;
+$file-uploader-button-height: ds.$spacing-280 !default;
+$file-uploader-button-margin-inline-end: ds.$spacing-100 !default;
+$file-uploader-cancel-button-position-end-margin-inline-start: ds.$spacing-40 !default;
+$file-uploader-file-status-message-height: ds.$spacing-160 !default;
+$file-uploader-progress-bar-height: ds.$spacing-220 !default;
+$file-uploader-file-size-padding-inline-start: ds.$spacing-40 !default;
+$file-uploader-file-icon-padding-inline-end: ds.$spacing-60 !default;
+$fluent-fileuploader-button-margin-left-2: ds.$spacing-100 !default;
+$file-uploader-cancel-button-position-end-margin-inline-end: ds.$spacing-40 !default;
+$file-uploader-file-size-padding-inline-end: ds.$spacing-40 !default;
+$fluent-fileuploader-file-status-message-margin-bottom-2: ds.$spacing-20 !default;
+$file-uploader-cancel-button-margin-block-start: ds.$spacing-50 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/filterBuilder/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/filterBuilder/_colors.scss
new file mode 100644
index 000000000000..60f17c820840
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/filterBuilder/_colors.scss
@@ -0,0 +1,36 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$filter-builder-bg-rest: ds.$color-surface-neutral-default-rest !default;
+
+$filter-builder-content-rest: ds.$color-content-neutral-default-rest !default;
+
+$filter-builder-text-content-focused: ds.$color-content-neutral-default-static-dark-rest !default;
+
+$filter-builder-plus-icon-rest: ds.$color-content-success-default-rest !default;
+$filter-builder-plus-icon-content-hovered: ds.$color-content-success-default-hovered !default;
+$filter-builder-plus-icon-content-focused: ds.$color-content-success-default-active !default;
+
+$filter-builder-remove-icon-rest: ds.$color-content-danger-default-rest !default;
+$filter-builder-remove-icon-content-hovered: ds.$color-content-danger-default-hovered !default;
+$filter-builder-remove-icon-content-focused: ds.$color-content-danger-default-active !default;
+
+$filter-builder-group-operation-content-rest: ds.$color-surface-danger-subdued-rest !default;
+$filter-builder-group-operation-content-hovered: ds.$color-surface-danger-subdued-hovered !default;
+$filter-builder-group-operation-content-focused: ds.$color-surface-danger-default-rest !default;
+
+$filter-builder-item-field-content-rest: ds.$color-surface-primary-subdued-rest !default;
+$filter-builder-item-field-content-hovered: ds.$color-surface-primary-subdued-hovered !default;
+$filter-builder-item-field-content-focused: ds.$color-surface-primary-default-rest !default;
+
+$filter-builder-item-operator-content-rest: ds.$color-surface-success-subdued-rest !default;
+$filter-builder-item-operator-content-hovered: ds.$color-surface-success-subdued-hovered !default;
+$filter-builder-item-operator-content-focused: ds.$color-surface-success-default-rest !default;
+
+$filter-builder-item-value-content-rest: ds.$color-surface-secondary-default-selected !default;
+$filter-builder-item-value-content-hovered: ds.$color-surface-neutral-alpha-hovered !default;
+$filter-builder-item-value-content-focused: ds.$color-surface-neutral-alpha-active !default;
+$filter-builder-menu-icon-rest: ds.$color-content-neutral-default-rest !default;
+
+// Base-layer values injected with design tokens (wave B1)
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/filterBuilder/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/filterBuilder/_index.scss
new file mode 100644
index 000000000000..6d7aaab7781d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/filterBuilder/_index.scss
@@ -0,0 +1,140 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../common/sizes" as *;
+@use "../../base/filterBuilder" with (
+  $filterbuilder-action-icon-margin-left: $filter-builder-action-icon-margin-inline-start,
+  $filterbuilder-action-icon-margin-right: $filter-builder-action-icon-margin-inline-end,
+  $filterbuilder-group-content-padding-right: $filter-builder-group-content-padding-inline-end,
+  $filterbuilder-range-separator-margin: $filter-builder-range-separator-margin,
+  $filterbuilder-item-value-text-min-width: $filter-builder-item-value-text-min-width,
+  $filterbuilder-item-value-text-padding: $filter-builder-item-value-text-padding,
+  $filterbuilder-action-icon-padding: $filter-builder-action-icon-padding,
+  $filterbuilder-group-content-padding-left: $filter-builder-group-content-padding-inline-start,
+  $filterbuilder-treeview-item-padding-left: $filter-builder-tree-view-item-padding-inline-start,
+  $filterbuilder-treeview-item-padding-right: $filter-builder-tree-view-item-padding-inline-end,
+  $filterbuilder-treeview-node-margin-left: $filter-builder-tree-view-node-margin-inline-start,
+  $filterbuilder-treeview-node-margin-right: $filter-builder-tree-view-node-margin-inline-end,
+  $filterbuilder-scrollable-max-height: $filter-builder-scrollable-max-height,
+  $filterbuilder-range-separator-opacity: $filter-builder-range-separator-opacity,
+    $filterbuilder-bg: $filter-builder-bg-rest,
+    $filterbuilder-text-color: $filter-builder-content-rest,
+    $filterbuilder-text-focus-color: $filter-builder-text-content-focused,
+    $filterbuilder-group-operation-color: $filter-builder-group-operation-content-rest,
+    $filterbuilder-group-operation-hover-color: $filter-builder-group-operation-content-hovered,
+    $filterbuilder-group-operation-focus-color: $filter-builder-group-operation-content-focused,
+    $filterbuilder-item-operator-color: $filter-builder-item-operator-content-rest,
+    $filterbuilder-item-operator-hover-color: $filter-builder-item-operator-content-hovered,
+    $filterbuilder-item-operator-focus-color: $filter-builder-item-operator-content-focused,
+    $filterbuilder-item-field-color: $filter-builder-item-field-content-rest,
+    $filterbuilder-item-field-hover-color: $filter-builder-item-field-content-hovered,
+    $filterbuilder-item-field-focus-color: $filter-builder-item-field-content-focused,
+    $filterbuilder-item-value-color: $filter-builder-item-value-content-rest,
+    $filterbuilder-item-value-hover-color: $filter-builder-item-value-content-hovered,
+    $filterbuilder-item-value-focus-color: $filter-builder-item-value-content-focused,
+    $filterbuilder-plus-icon-color: $filter-builder-plus-icon-rest,
+    $filterbuilder-plus-icon-hover-color: $filter-builder-plus-icon-content-hovered,
+    $filterbuilder-plus-icon-focus-color: $filter-builder-plus-icon-content-focused,
+    $filterbuilder-remove-icon-color: $filter-builder-remove-icon-rest,
+    $filterbuilder-remove-icon-hover-color: $filter-builder-remove-icon-content-hovered,
+    $filterbuilder-remove-icon-focus-color: $filter-builder-remove-icon-content-focused,
+    $filterbuilder-menu-icon-color: $filter-builder-menu-icon-rest,
+);
+@use "../textEditor/colors" as textEditorColors;
+
+// adduse
+
+
+.dx-filterbuilder {
+  .dx-filterbuilder-action-icon {
+    font-size: $filter-builder-action-icon-font-size;
+  }
+
+  .dx-filterbuilder-group {
+    .dx-filterbuilder-group-item {
+      .dx-filterbuilder-action.dx-filterbuilder-action-icon {
+        padding: $filter-builder-icon-padding;
+        vertical-align: middle;
+      }
+    }
+  }
+
+  .dx-filterbuilder-item-value {
+    .dx-editor-filled,
+    .dx-editor-outlined {
+      .dx-texteditor-input {
+        padding: $filter-builder-filled-editor-padding;
+      }
+    }
+  }
+
+  .dx-filterbuilder-text,
+  .dx-filterbuilder-item-value-text {
+    border-radius: $filter-builder-text-border-radius;
+  }
+}
+
+.dx-filterbuilder-range-separator {
+  color: textEditorColors.$text-editor-content-rest;
+}
+
+.dx-filterbuilder-overlay {
+  &.dx-popup-wrapper > .dx-overlay-content {
+    box-shadow: $global-dropdown-box-shadow;
+  }
+
+  &.dx-filterbuilder-operations {
+    .dx-rtl {
+      .dx-treeview-item {
+        padding-right: $filter-builder-tree-view-item-left-padding;
+      }
+    }
+  }
+
+  .dx-treeview-node {
+    .dx-treeview-node-container-opened {
+      margin-left: $filter-builder-tree-view-item-left-padding;
+    }
+  }
+
+  .dx-treeview-item {
+    padding: $filter-builder-tree-view-item-padding;
+    min-height: $filter-builder-tree-view-item-min-height;
+
+    .dx-icon {
+      margin-right: $filter-builder-icon-margin-inline-end;
+    }
+  }
+
+  .dx-treeview-toggle-item-visibility {
+    left: $filter-builder-tree-view-toggle-inset-inline-start;
+  }
+
+  .dx-rtl {
+    .dx-treeview-node {
+      > .dx-treeview-item {
+        padding-right: calc(#{$filter-builder-tree-view-item-left-padding} * 2);
+      }
+
+      &.dx-treeview-node-is-leaf > .dx-treeview-item {
+        padding-right: $filter-builder-tree-view-item-left-padding;
+      }
+
+      .dx-treeview-node-container-opened {
+        margin-right: $filter-builder-tree-view-item-left-padding;
+        margin-left: 0;
+      }
+    }
+
+    .dx-treeview-item {
+      .dx-icon {
+        margin-left: $filter-builder-icon-margin-inline-start;
+      }
+    }
+
+    .dx-treeview-toggle-item-visibility {
+      right: $filter-builder-tree-view-toggle-item-visibility-inset-inline-end;
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/filterBuilder/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/filterBuilder/_sizes.scss
new file mode 100644
index 000000000000..4759a2026eef
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/filterBuilder/_sizes.scss
@@ -0,0 +1,55 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+// Not colours: opacities that used to sit in _colors.scss (NAMING.md, O7)
+$filter-builder-range-separator-opacity: ds.$opacity-30 !default;
+
+$filter-builder-icon-padding: null !default;
+$filter-builder-filled-editor-padding: null !default;
+$filter-builder-tree-view-item-left-padding: null !default;
+$filter-builder-tree-view-item-padding: null !default;
+$filter-builder-tree-view-toggle-inset-inline-start: null !default;
+$filter-builder-tree-view-item-min-height: null !default;
+
+@if $size == "default" {
+  $filter-builder-icon-padding: ds.$spacing-80 !default;
+  $filter-builder-filled-editor-padding: ds.$spacing-130 ds.$spacing-120 !default;
+
+  $filter-builder-tree-view-item-left-padding: ds.$spacing-120 !default;
+  $filter-builder-tree-view-item-padding: ds.$spacing-60 ds.$spacing-120 ds.$spacing-60 $filter-builder-tree-view-item-left-padding !default;
+  $filter-builder-tree-view-toggle-inset-inline-start: ds.$spacing-160 !default;
+  $filter-builder-tree-view-item-min-height: ds.$spacing-320 !default;
+}
+
+@else if $size == "compact" {
+  $filter-builder-icon-padding: ds.$spacing-40 !default;
+  $filter-builder-filled-editor-padding: ds.$spacing-80 ds.$spacing-80 !default;
+  $filter-builder-tree-view-item-left-padding: ds.$spacing-40 !default;
+  $filter-builder-tree-view-item-padding: ds.$spacing-40 ds.$spacing-120 ds.$spacing-40 $filter-builder-tree-view-item-left-padding !default;
+  $filter-builder-tree-view-toggle-inset-inline-start: 0 !default;
+  $filter-builder-tree-view-item-min-height: ds.$spacing-240 !default;
+}
+
+// Values hoisted from style-file literals (tokenized)
+$filter-builder-action-icon-font-size: 21px !default; // dx-offscale: 21px
+$filter-builder-text-border-radius: ds.$border-radius-50 !default;
+$filter-builder-icon-margin-inline-end: ds.$spacing-100 !default;
+$filter-builder-icon-margin-inline-start: ds.$spacing-100 !default;
+$filter-builder-tree-view-toggle-item-visibility-inset-inline-end: ds.$spacing-160 !default;
+
+// Base-layer sizing injected with design tokens (wave B2 — filterBuilder/common)
+$filter-builder-action-icon-margin-inline-start: ds.$spacing-50 !default;
+$filter-builder-action-icon-margin-inline-end: ds.$spacing-50 !default;
+$filter-builder-group-content-padding-inline-end: ds.$spacing-260 !default;
+$filter-builder-range-separator-margin: 0 ds.$spacing-70 !default;
+$filter-builder-item-value-text-min-width: ds.$spacing-200 !default;
+$filter-builder-item-value-text-padding: ds.$spacing-20 ds.$spacing-70 ds.$spacing-30 ds.$spacing-70 !default;
+$filter-builder-action-icon-padding: ds.$spacing-50 ds.$spacing-80 !default;
+$filter-builder-group-content-padding-inline-start: ds.$spacing-260 !default;
+$filter-builder-tree-view-item-padding-inline-start: ds.$spacing-50 !default;
+$filter-builder-tree-view-item-padding-inline-end: ds.$spacing-50 !default;
+$filter-builder-tree-view-node-margin-inline-start: ds.$spacing-150 !default;
+$filter-builder-tree-view-node-margin-inline-end: ds.$spacing-150 !default;
+$filter-builder-scrollable-max-height: 360px !default; // dx-offscale: 360px
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/form/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/form/_colors.scss
new file mode 100644
index 000000000000..788a95fb5297
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/form/_colors.scss
@@ -0,0 +1,10 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$form-field-item-content-rest: ds.$color-content-neutral-default-rest !default;
+$form-item-help-content-rest: ds.$color-content-neutral-subdued-rest !default;
+
+$form-group-border-rest: ds.$color-border-neutral-default-rest !default;
+$form-field-required-content-rest: $form-field-item-content-rest !default;
+$form-field-mark-content-rest: $form-field-item-content-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/form/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/form/_index.scss
new file mode 100644
index 000000000000..95e887323347
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/form/_index.scss
@@ -0,0 +1,140 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/form" with (
+  $form-first-row-padding-top: $form-first-row-padding-block-start,
+  $form-switch-margin-top: $form-switch-margin-block-start,
+  $form-switch-margin-bottom: $form-switch-margin-block-end,
+  $form-multiview-item-content-padding: $form-multiview-item-content-padding,
+  $form-group-content-padding-top: $form-group-content-padding-block-start,
+  $form-group-content-padding-bottom: $form-group-content-padding-block-end,
+  $form-group-content-margin-top: $form-group-content-margin-block-start,
+  $form-field-item-label-location-left-padding-inline-end: $form-field-item-label-location-left-padding-inline-end,
+  $form-field-item-label-location-right-padding-inline-start: $form-field-item-label-location-right-padding-inline-start,
+);
+@use "../../base/icon_fonts" as *;
+
+// adduse
+@use "../scrollable";
+
+
+.dx-form-group-caption {
+  font-size: $form-group-caption-font-size;
+}
+
+.dx-form-group-with-caption { // stylelint-disable-line no-duplicate-selectors
+  & > .dx-form-group-content {
+    border-top: $form-group-content-border-block-start;
+    border-top-color: $form-group-border-rest;
+    padding-bottom: $form-group-content-bottom-padding;
+    padding-top: $form-group-caption-top-padding;
+    margin-top: $form-group-caption-bottom-margin;
+  }
+}
+
+.dx-layout-manager {
+  .dx-field-item {
+    &:not(.dx-last-col) {
+      padding-inline-end: $form-layout-manager-padding-inline;
+    }
+
+    &:not(.dx-first-col) {
+      padding-inline-start: $form-layout-manager-padding-inline;
+    }
+
+    &:not(.dx-first-row) {
+      padding-top: $form-layout-manager-padding-block;
+    }
+
+    padding-bottom: $form-layout-manager-padding-block;
+    font-size: $form-label-font-size;
+
+    .dx-field-item {
+      &.dx-last-row {
+        padding-bottom: 0;
+      }
+    }
+  }
+
+  .dx-tabpanel .dx-multiview-item-content {
+    padding: $form-layout-manager-tabpanel-content-padding;
+  }
+}
+
+.dx-form > .dx-layout-manager.dx-layout-manager-one-col {
+  .dx-field-item {
+    .dx-field-item.dx-last-row:not(.dx-last-col) {
+      padding-bottom: $form-layout-manager-padding-block;
+    }
+  }
+}
+
+.dx-field-item {
+  &:not(.dx-field-item-has-group):not(.dx-field-item-has-tabs):not(.dx-first-row):not(.dx-label-v-align) {
+    padding-top: $form-default-top-padding;
+  }
+
+  .dx-switch {
+    vertical-align: middle;
+  }
+}
+
+.dx-field-item-content-wrapper.dx-invalid {
+  .dx-field-item-help-text {
+    color: transparent;
+  }
+}
+
+.dx-field-item-label-location-top {
+  padding: $form-top-label-padding;
+  margin-bottom: $form-top-label-bottom-margin;
+
+  .dx-form-styling-mode-underlined & {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+.dx-field-item-label-text {
+  color: $form-field-item-content-rest;
+}
+
+.dx-field-item-help-text {
+  color: $form-item-help-content-rest;
+  padding-top: $form-field-item-help-text-padding-block-start;
+  font-size: $form-help-text-font-size;
+  font-style: normal;
+
+  .dx-form-styling-mode-underlined & {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+.dx-field-item-optional .dx-label > span::after,
+.dx-field-item-optional-mark {
+  color: $form-field-mark-content-rest;
+}
+
+.dx-field-item-required .dx-label > span::after,
+.dx-field-item-required-mark {
+  color: $form-field-required-content-rest;
+}
+
+.dx-field-item-custom-label-content {
+  .dx-icon {
+    @include dx-icon-sizing($form-label-icon-size);
+    @include dx-icon-margin(calc(#{$global-icon-size} / 3));
+  }
+}
+
+.dx-form-group-custom-caption {
+  font-size: $form-group-caption-font-size;
+
+  .dx-icon {
+    @include dx-icon-sizing($global-icon-size);
+    @include dx-icon-margin($form-group-custom-caption-icon-margin);
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/form/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/form/_sizes.scss
new file mode 100644
index 000000000000..6025dad4d140
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/form/_sizes.scss
@@ -0,0 +1,61 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$form-group-caption-bottom-margin: null !default;
+$form-group-caption-top-padding: null !default;
+$form-group-content-bottom-padding: null !default;
+$form-group-caption-font-size: null !default;
+$form-top-label-padding: 0 !default;
+$form-top-label-bottom-margin: null !default;
+$form-default-top-padding: null !default;
+$form-help-text-font-size: ds.$font-size-caption-md !default;
+$form-layout-manager-padding-inline: null !default;
+$form-layout-manager-padding-block: null !default;
+$form-layout-manager-tabpanel-content-padding: null !default;
+
+$form-label-font-size: $global-font-size !default;
+$form-label-icon-size: $global-icon-size !default;
+$form-group-custom-caption-icon-margin: null !default;
+
+@if $size == "default" {
+  $form-group-caption-bottom-margin: ds.$spacing-40 !default;
+  $form-group-caption-top-padding: ds.$spacing-160 !default;
+  $form-group-content-bottom-padding: ds.$spacing-160 !default;
+  $form-group-caption-font-size: ds.$font-size-title-md !default;
+  $form-group-custom-caption-icon-margin: ds.$spacing-60 !default;
+  $form-default-top-padding: ds.$spacing-160 !default;
+  $form-top-label-bottom-margin: ds.$spacing-40 !default;
+  $form-layout-manager-padding-inline: ds.$spacing-120 !default;
+  $form-layout-manager-padding-block: ds.$spacing-80 !default;
+  $form-layout-manager-tabpanel-content-padding: ds.$spacing-240 !default;
+}
+
+@else if $size == "compact" {
+  $form-group-caption-bottom-margin: ds.$spacing-40 !default;
+  $form-group-caption-top-padding: ds.$spacing-120 !default;
+  $form-group-content-bottom-padding: ds.$spacing-120 !default;
+  $form-group-caption-font-size: ds.$font-size-title-sm !default;
+  $form-group-custom-caption-icon-margin: ds.$spacing-40 !default;
+  $form-default-top-padding: ds.$spacing-80 !default;
+  $form-top-label-bottom-margin: ds.$spacing-20 !default;
+  $form-layout-manager-padding-inline: ds.$spacing-80 !default;
+  $form-layout-manager-padding-block: ds.$spacing-60 !default;
+  $form-layout-manager-tabpanel-content-padding: ds.$spacing-160 !default;
+}
+
+// Values hoisted from style-file literals (tokenized)
+$form-field-item-help-text-padding-block-start: ds.$spacing-20 !default;
+$form-group-content-border-block-start: ds.$border-width-10 solid !default;
+
+// Base-layer sizing injected with design tokens (wave B2)
+$form-first-row-padding-block-start: ds.$spacing-100 !default;
+$form-switch-margin-block-start: ds.$spacing-70 !default;
+$form-switch-margin-block-end: ds.$spacing-40 !default;
+$form-multiview-item-content-padding: ds.$spacing-200 !default;
+$form-group-content-padding-block-start: ds.$spacing-190 !default;
+$form-group-content-padding-block-end: ds.$spacing-200 !default;
+$form-group-content-margin-block-start: ds.$spacing-60 !default;
+$form-field-item-label-location-left-padding-inline-end: ds.$spacing-100 !default;
+$form-field-item-label-location-right-padding-inline-start: ds.$spacing-100 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/gallery/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/gallery/_colors.scss
new file mode 100644
index 000000000000..2378bc3d61f5
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gallery/_colors.scss
@@ -0,0 +1,21 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$gallery-indicator-bg-rest: ds.$color-surface-neutral-default-rest !default;
+
+$gallery-indicator-item-bg-selected: ds.$color-surface-primary-default-rest !default;
+
+$gallery-indicator-bg-focused: ds.$color-surface-primary-default-rest !default;
+$gallery-indicator-item-border-rest: ds.$color-border-neutral-subdued-rest !default;
+
+// Semi-transparent surface over the indicator — relative-color bridge.
+$gallery-indicator-border-selected: rgb(from #{ds.$color-surface-neutral-default-rest} r g b / 0.8) !default;
+$gallery-nav-button-bg-rest: ds.$color-content-neutral-subdued-rest !default;
+$gallery-nav-arrow-content-rest: ds.$color-content-neutral-default-static-dark-rest !default;
+
+$gallery-nav-button-bg-hovered: ds.$color-surface-primary-default-rest !default;
+
+$gallery-nav-button-bg-active: ds.$color-surface-primary-default-active !default;
+
+$gallery-border-focused: ds.$color-surface-primary-default-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/gallery/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/gallery/_index.scss
new file mode 100644
index 000000000000..729327740f55
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gallery/_index.scss
@@ -0,0 +1,118 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../../base/gallery" with (
+  $gallery-root-border-width: $gallery-border-width,
+  $gallery-indicator-bottom: $gallery-indicator-inset-block-end,
+  $gallery-indicator-height: $gallery-indicator-height,
+  $gallery-indicator-item-margin: $gallery-indicator-item-margin,
+);
+
+// adduse
+
+.dx-gallery {
+  .dx-gallery-nav-button-prev,
+  .dx-gallery-nav-button-next {
+    position: absolute;
+    top: 0;
+    width: 34%;
+    height: 100%;
+    background: transparent;
+    cursor: pointer;
+
+    &.dx-state-hover::after {
+      background-color: $gallery-nav-button-bg-hovered;
+    }
+
+    &.dx-state-active::after {
+      background-color: $gallery-nav-button-bg-active;
+    }
+
+    @include dx-icon-font-centered-sizing(32px);
+
+    &::after {
+      content: '';
+      position: absolute;
+      width: $gallery-nav-button-width;
+      height: $gallery-nav-button-height;
+      background: $gallery-nav-button-bg-rest;
+      border-radius: 50%;
+      top: 50%;
+      margin-top: $gallery-nav-button-margin-block-start;
+    }
+
+    &::before {
+      position: absolute;
+      z-index: 10;
+      clear: both;
+      font-size: $gallery-nav-icon-font-size;
+      color: $gallery-nav-arrow-content-rest;
+    }
+  }
+
+  .dx-gallery-nav-button-prev {
+    @include dx-icon(chevronleft);
+
+    &::after {
+      left: $gallery-nav-button-inset-inline;
+    }
+
+    &::before {
+      left: calc(#{$gallery-nav-button-inset-inline} - 1px);
+      right: auto;
+      margin-left: 0;
+    }
+  }
+
+  .dx-gallery-nav-button-next {
+    @include dx-icon(chevronright);
+
+    &::after {
+      right: $gallery-nav-button-inset-inline;
+    }
+
+    &::before {
+      right: calc(#{$gallery-nav-button-inset-inline} - 1px);
+      left: auto;
+    }
+  }
+}
+
+
+.dx-gallery-indicator {
+  pointer-events: none;
+  text-align: center;
+}
+
+.dx-gallery-indicator-item {
+  border-radius: 50%;
+  box-sizing: border-box;
+  border: $gallery-indicator-item-border;
+  border-color: $gallery-indicator-item-border-rest;
+  pointer-events: auto;
+  margin: calc(5px - #{$gallery-indicator-size} / 2) 6px;
+  width: $gallery-indicator-size;
+  height: $gallery-indicator-size;
+  background: $gallery-indicator-bg-rest;
+}
+
+.dx-gallery-indicator-item-active,
+.dx-gallery-indicator-item-selected {
+  width: $gallery-indicator-size-selected;
+  height: $gallery-indicator-size-selected;
+  background: $gallery-indicator-item-bg-selected;
+  border: $gallery-indicator-item-border-selected;
+  border-color: $gallery-indicator-border-selected;
+  margin: calc(5px - #{$gallery-indicator-size-selected} / 2) 6px;
+}
+
+.dx-state-focused.dx-gallery {
+  border-color: $gallery-border-focused;
+
+  .dx-gallery-indicator-item-selected {
+    background: $gallery-indicator-bg-focused;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/gallery/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/gallery/_sizes.scss
new file mode 100644
index 000000000000..9125cd48458d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gallery/_sizes.scss
@@ -0,0 +1,22 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$gallery-indicator-size: ds.$spacing-80 !default;
+$gallery-indicator-size-selected: ds.$spacing-120 !default;
+$gallery-nav-button-inset-inline: ds.$spacing-80 !default;
+
+// Values hoisted from style-file literals (tokenized)
+$gallery-nav-icon-font-size: ds.$font-size-320 !default; // dx-icon-glyph-size: text roles not applicable
+$gallery-nav-button-width: ds.$spacing-320 !default;
+$gallery-nav-button-height: ds.$spacing-320 !default;
+$gallery-nav-button-margin-block-start: -16px !default; // dx-offscale: -16px
+$gallery-indicator-item-border: ds.$border-width-10 solid !default;
+$gallery-indicator-item-border-selected: ds.$border-width-20 solid !default;
+
+// Base-layer sizing injected with design tokens (wave B2)
+$gallery-border-width: ds.$border-width-10 !default;
+$gallery-indicator-inset-block-end: ds.$spacing-100 !default;
+$gallery-indicator-height: ds.$spacing-100 !default;
+$gallery-indicator-item-margin: 0 ds.$spacing-20 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/gantt/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/gantt/_colors.scss
new file mode 100644
index 000000000000..fef79bd883a7
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gantt/_colors.scss
@@ -0,0 +1,48 @@
+@use "../colors" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$gantt-collapsable-row-bg-rest: ds.$color-surface-neutral-deep-rest !default;
+
+/*
+ * Toolbar icons are SVG data-uri images: the color is baked into the background-image at
+ * build time (string replace). CSS var() tokens do NOT resolve inside a data-uri (they render
+ * black), so the value below is the static per-mode equivalent of the ds.$ token named in the
+ * marker. See DIVERGENCES.md.
+ */
+$gantt-icon-rest: null !default;
+
+@if $mode == "light" {
+  $gantt-icon-rest: #161616 !default; // dx-data-uri-static: ds.$color-content-neutral-default-rest
+}
+
+@if $mode == "dark" {
+  $gantt-icon-rest: #fff !default; // dx-data-uri-static: ds.$color-content-neutral-default-rest
+}
+
+/*
+ * Task bars and time-marker borders: primary-90 in light, primary-70 in dark — the only surface
+ * role with that pair, so the design-review decision (lighter blue on dark) holds without freezing
+ * a literal. See DIVERGENCES.md.
+ */
+$gantt-task-bg-rest: ds.$color-surface-primary-compound-rest !default;
+$gantt-parent-task-bg-rest: ds.$color-surface-success-default-rest !default;
+$gantt-task-res-content-rest: ds.$color-content-neutral-default-inverted-rest !default;
+$gantt-task-res-bg-rest: ds.$color-surface-neutral-default-inverted-rest !default;
+$gantt-task-progress-bg-rest: rgb(from #{ds.$color-surface-neutral-default-inverted-rest} r g b / 0.2) !default;
+
+// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
+$gantt-bg-rest: ds.$color-surface-neutral-default-rest !default;
+$gantt-border-rest: ds.$color-border-neutral-default-rest !default;
+$gantt-content-rest: ds.$color-content-neutral-default-rest !default;
+
+// Color computations hoisted from style files (phase 0.5 layer normalization)
+$gantt-accent-border-rest: ds.$color-border-primary-default-rest !default;
+$gantt-ti-bg-rest: ds.$color-surface-primary-alpha-hovered !default;
+
+/*
+ * Derived values, moved out of _index.scss: a file that emits rules must not declare
+ * variables (NAMING.md, O7).
+ */
+$gantt-successor-background-color: ds.$color-surface-neutral-default-static-light-rest;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/gantt/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/gantt/_index.scss
new file mode 100644
index 000000000000..18516d4abd19
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gantt/_index.scss
@@ -0,0 +1,292 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/gantt" with (
+  $gantt-toolbar-separator-border-left: $gantt-toolbar-separator-border-inline-start,
+  $gantt-splitter-bar-width: $gantt-splitter-bar-width,
+  $gantt-view-min-width: $gantt-view-min-width,
+);
+@use "../../base/gantt/mixins" as *;
+@use "../gridBase/colors" as gridBaseColors;
+@use "../form/sizes" as formSizes;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+@use "../splitterBar";
+
+.dx-gantt {
+  border: $gantt-border;
+  border-color: $gantt-border-rest;
+
+  .dx-gantt-toolbar-wrapper {
+    padding: $gantt-toolbar-wrapper-padding;
+    border-bottom: $gantt-toolbar-wrapper-border-block-end;
+    border-bottom-color: $gantt-border-rest;
+
+    .dx-gantt-toolbar-separator {
+      border-left-color: $gantt-border-rest;
+    }
+
+    .dx-toolbar .dx-toolbar-items-container {
+      min-height: $gantt-toolbar-items-container-min-height;
+    }
+  }
+
+  .dx-gantt-view {
+    background-color: $gantt-bg-rest;
+  }
+
+  .dx-header-row,
+  .dx-treelist-filter-row {
+    height: $gantt-header-item-height;
+  }
+
+  .dx-gantt-header {
+    color: gridBaseColors.$grid-column-chooser-item-content-rest;
+    font-size: formSizes.$form-label-font-size;
+
+    .dx-gantt-tsac,
+    .dx-gantt-tsa,
+    .dx-gantt-hb,
+    .dx-gantt-vb {
+      border-color: $gantt-border-rest;
+      background-color: $gantt-bg-rest;
+    }
+  }
+
+  .dx-gantt-si {
+    padding-left: $gantt-si-padding-inline-start;
+    padding-right: $gantt-si-padding-inline-end;
+  }
+
+  .dx-gantt-tsac,
+  .dx-gantt-tsa {
+    border-bottom: $gantt-toolbar-wrapper-border-block-end;
+    border-bottom-color: $gantt-border-rest;
+  }
+
+  .dx-gantt-hb {
+    border-top: $gantt-hb-border-block-start;
+    border-top-color: $gantt-border-rest;
+  }
+
+  .dx-gantt-vb {
+    border-left: $gantt-vb-border-inline-start;
+    border-left-color: $gantt-border-rest;
+  }
+
+  .dx-gantt-taskWrapper {
+    padding-top: $gantt-task-wrapper-padding-block-start;
+
+    .dx-gantt-task,
+    .dx-gantt-titleOut {
+      height: $gantt-task-height;
+      line-height: $gantt-task-height;
+    }
+
+    .dx-gantt-task {
+      background-color: $gantt-task-bg-rest;
+      border-radius: $global-border-radius;
+
+      .dx-gantt-tPrg {
+        border-radius: $global-border-radius;
+        background-color: $gantt-task-progress-bg-rest;
+      }
+
+      &.dx-gantt-smallTask {
+        border-radius: $global-border-radius;
+
+        .dx-gantt-titleIn {
+          padding: $gantt-title-padding;
+        }
+      }
+
+      &.dx-gantt-parent {
+        height: calc(#{$gantt-task-height} - 2px);
+        line-height: calc(#{$gantt-task-height} - 2px);
+        background-color: $gantt-parent-task-bg-rest;
+        border-left-color: $gantt-parent-task-bg-rest;
+        border-right-color: $gantt-parent-task-bg-rest;
+        border-top-color: $gantt-parent-task-bg-rest;
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: 0;
+
+        &:not(.dx-gantt-noPrg) .dx-gantt-tPrg {
+          background-color: $gantt-task-progress-bg-rest;
+        }
+
+        &:not(.dx-gantt-smallTask)::before,
+        &:not(.dx-gantt-smallTask)::after,
+        &:not(.dx-gantt-smallTask):not(.dx-gantt-noPrg) .dx-gantt-tPrg::before,
+        &:not(.dx-gantt-smallTask).dx-gantt-cmpl .dx-gantt-tPrg::after {
+          content: '';
+          position: absolute;
+          bottom: $gantt-task-progress-inset-block-end;
+          border-width: $gantt-task-progress-notch-border-width;
+          border-style: solid;
+        }
+
+        &::before,
+        &:not(.dx-gantt-noPrg) .dx-gantt-tPrg::before {
+          left: 0;
+          border-right-color: transparent;
+          border-bottom-color: transparent;
+        }
+
+        &:not(.dx-gantt-noPrg) .dx-gantt-tPrg::before {
+          border-left-color: $gantt-task-progress-bg-rest;
+          border-top-color: $gantt-task-progress-bg-rest;
+        }
+
+        &::after,
+        &.dx-gantt-cmpl .dx-gantt-tPrg::after {
+          right: 0;
+          border-left-color: transparent;
+          border-bottom-color: transparent;
+        }
+
+        &.dx-gantt-cmpl::after {
+          border-right-color: $gantt-task-progress-bg-rest;
+          border-top-color: $gantt-task-progress-bg-rest;
+        }
+
+        &.dx-gantt-cmpl .dx-gantt-tPrg::after {
+          border-right-color: $gantt-parent-task-bg-rest;
+          border-top-color: $gantt-parent-task-bg-rest;
+        }
+
+        .dx-gantt-task-edit-frame {
+          height: calc(#{$gantt-task-height} - 2px);
+        }
+      }
+    }
+
+    .dx-gantt-titleIn {
+      color: $gantt-task-res-content-rest;
+      padding: 0 $gantt-task-title-padding-inline-start;
+    }
+  }
+
+  .dx-gantt-taskRes {
+    height: $gantt-task-height;
+    line-height: $gantt-task-height;
+    color: $gantt-task-res-content-rest;
+    background-color: $gantt-task-res-bg-rest;
+    border-radius: $global-border-radius;
+    margin-left: $gantt-task-margin-inline-start;
+    padding-left: $gantt-task-padding-inline-start;
+    padding-right: $gantt-task-padding-inline-end;
+  }
+
+  .dx-gantt-titleOut {
+    padding-right: $gantt-title-padding-inline-end;
+  }
+
+  .dx-gantt-milestone {
+    background-color: $gantt-content-rest;
+    width: $gantt-milestone-size;
+    height: $gantt-milestone-size;
+  }
+
+  .dx-gantt-task-edit-wrapper {
+    padding-top: $gantt-task-wrapper-padding-block-start;
+    padding-left: $gantt-task-edit-wrapper-padding-inline-start;
+
+    .dx-gantt-task-edit-frame {
+      height: 100%;
+      border: $gantt-task-edit-frame-border;
+      border-color: $gantt-accent-border-rest;
+      border-radius: $global-border-radius;
+
+      .dx-gantt-task-edit-progress {
+        border-color: transparent transparent $gantt-accent-border-rest transparent;
+
+        &::before {
+          width: $gantt-task-edit-progress-width;
+          height: $gantt-task-edit-progress-height;
+          bottom: $gantt-edit-progress-inset-block-end;
+          border: $gantt-task-edit-progress-border;
+          border-color: $gantt-accent-border-rest;
+        }
+      }
+
+      .dx-gantt-task-edit-progress-status {
+        border-radius: $global-border-radius;
+      }
+    }
+  }
+
+  .dx-gantt-task-edit-wrapper-successor {
+    padding-top: $gantt-task-wrapper-padding-block-start;
+
+    .dx-gantt-task-edit-frame-successor {
+      height: $gantt-task-height;
+    }
+  }
+
+  .dx-gantt-task-edit-dependency-r,
+  .dx-gantt-task-edit-successor-dependency-r,
+  .dx-gantt-task-edit-dependency-l,
+  .dx-gantt-task-edit-successor-dependency-l {
+    background: $gantt-successor-background-color;
+    border: $gantt-task-edit-successor-dependency-l-border;
+    border-color: $gantt-accent-border-rest;
+    width: $gantt-dependency-successor-size;
+    height: $gantt-dependency-successor-size;
+    margin: auto;
+    top: 0;
+    bottom: 0;
+  }
+
+  .dx-gantt-task-edit-dependency-r,
+  .dx-gantt-task-edit-successor-dependency-r {
+    left: calc(-1 * #{$gantt-dependency-successor-size} - 1px);
+  }
+
+  .dx-gantt-task-edit-dependency-l,
+  .dx-gantt-task-edit-successor-dependency-l {
+    right: calc(-1 * #{$gantt-dependency-successor-size} - 1px);
+  }
+
+  .dx-gantt-task-edit-dependency-line {
+    background-color: $gantt-content-rest;
+  }
+
+  .dx-gantt-sel {
+    background-color: ds.$color-surface-primary-deep-rest;
+  }
+
+  .dx-gantt-conn-v {
+    border-left-color: $gantt-content-rest;
+  }
+
+  .dx-gantt-conn-h {
+    border-top-color: $gantt-content-rest;
+  }
+
+  .dx-gantt-arrow {
+    border: $gantt-arrow-border;
+    border-color: $gantt-content-rest;
+  }
+
+  .dx-gantt-tm {
+    border-left: $gantt-tm-border-inline-start;
+    border-left-color: $gantt-task-bg-rest;
+  }
+
+  .dx-gantt-ti {
+    border-left: $gantt-tm-border-inline-start;
+    border-left-color: $gantt-task-bg-rest;
+    border-right: $gantt-ti-border-inline-end;
+    border-right-color: $gantt-task-bg-rest;
+    background-color: $gantt-ti-bg-rest;
+  }
+
+  .dx-gantt-altRow,
+  .dx-gantt-collapsable-row {
+    background-color: $gantt-collapsable-row-bg-rest;
+  }
+}
+
+@include gantt-icons-mixin($gantt-icon-rest);
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/gantt/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/gantt/_sizes.scss
new file mode 100644
index 000000000000..c639f3380015
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gantt/_sizes.scss
@@ -0,0 +1,61 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$gantt-header-item-height: null !default;
+$gantt-task-title-padding-inline-start: null !default;
+$gantt-task-height: null !default;
+$gantt-dependency-successor-size: null !default;
+$gantt-milestone-size: null !default;
+
+$gantt-task-wrapper-padding-block-start: 0 !default;
+
+@if $size == "default" {
+  $gantt-header-item-height: 57px !default; // dx-offscale: 57px
+  $gantt-task-title-padding-inline-start: ds.$spacing-110 !default;
+  $gantt-task-height: 27px !default; // dx-offscale: 27px
+  $gantt-dependency-successor-size: ds.$spacing-120 !default;
+  $gantt-milestone-size: ds.$spacing-170 !default;
+}
+
+@else if $size == "compact" {
+  $gantt-header-item-height: 51px !default; // dx-offscale: 51px
+  $gantt-task-title-padding-inline-start: ds.$spacing-90 !default;
+  $gantt-task-height: ds.$spacing-200 !default;
+  $gantt-dependency-successor-size: ds.$spacing-100 !default;
+  $gantt-milestone-size: ds.$spacing-140 !default;
+}
+
+
+// Values hoisted from style-file literals (tokenized)
+$gantt-task-progress-notch-border-width: ds.$border-width-40 !default;
+$gantt-toolbar-wrapper-padding: ds.$spacing-50 !default;
+$gantt-si-padding-inline-start: ds.$spacing-160 !default;
+$gantt-si-padding-inline-end: ds.$spacing-160 !default;
+$gantt-title-padding: 0 ds.$spacing-20 !default;
+$gantt-task-progress-inset-block-end: -8px !default; // dx-offscale: -8px
+$gantt-task-margin-inline-start: ds.$spacing-210 !default;
+$gantt-task-padding-inline-start: ds.$spacing-40 !default;
+$gantt-task-padding-inline-end: ds.$spacing-40 !default;
+$gantt-title-padding-inline-end: ds.$spacing-200 !default;
+$gantt-task-edit-wrapper-padding-inline-start: ds.$spacing-10 !default;
+$gantt-task-edit-progress-width: ds.$spacing-120 !default;
+$gantt-task-edit-progress-height: ds.$spacing-60 !default;
+$gantt-edit-progress-inset-block-end: -14px !default; // dx-offscale: -14px
+$gantt-border: ds.$border-width-10 solid !default;
+$gantt-toolbar-wrapper-border-block-end: ds.$border-width-10 solid !default;
+$gantt-hb-border-block-start: ds.$border-width-10 solid !default;
+$gantt-vb-border-inline-start: ds.$border-width-10 solid !default;
+$gantt-task-edit-frame-border: ds.$border-width-10 solid !default;
+$gantt-task-edit-progress-border: ds.$border-width-10 solid !default;
+$gantt-task-edit-successor-dependency-l-border: ds.$border-width-10 solid !default;
+$gantt-arrow-border: 5px solid !default; // dx-offscale
+$gantt-tm-border-inline-start: ds.$border-width-10 dashed !default;
+$gantt-ti-border-inline-end: ds.$border-width-10 dashed !default;
+$gantt-toolbar-items-container-min-height: 42px !default; // dx-offscale: 42px
+
+// Base-layer sizing injected with design tokens (wave B2)
+$gantt-toolbar-separator-border-inline-start: ds.$border-width-10 solid transparent !default;
+$gantt-splitter-bar-width: ds.$spacing-20 !default;
+$gantt-view-min-width: ds.$spacing-10 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_colors.scss
new file mode 100644
index 000000000000..444050e29e34
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_colors.scss
@@ -0,0 +1,95 @@
+@use "../colors" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$grid-content-rest: ds.$color-content-neutral-default-rest !default;
+
+$grid-bg-rest: ds.$color-surface-neutral-default-rest !default;
+$grid-border-rest: ds.$color-border-neutral-default-rest !default;
+
+$grid-column-chooser-item-content-rest: $grid-content-rest !default;
+
+
+$grid-drag-header-border-rest: rgb(from #{ds.$color-border-primary-default-rest} r g b / 0.5) !default;
+$grid-drag-header-shadow-ambient-rest: ds.$color-shadow-ambient !default;
+$grid-drag-header-shadow-key-rest: ds.$color-shadow-key !default;
+$grid-drag-header-bg-rest: $grid-bg-rest !default;
+$grid-header-filter-icon-rest: $grid-column-chooser-item-content-rest !default;
+
+$grid-selection-bg-rest: ds.$color-surface-primary-deep-rest !default;
+
+$grid-row-border-selected: $grid-border-rest !default;
+
+$grid-row-content-selected: $grid-content-rest !default;
+
+$grid-row-content-focused: ds.$color-content-neutral-default-rest !default;
+
+$grid-row-bg-focused: ds.$color-surface-primary-subdued-rest !default;
+$grid-row-bg-hovered: ds.$color-surface-neutral-default-hovered !default;
+$grid-row-content-hovered: ds.$color-content-neutral-default-rest !default;
+
+$grid-cell-modified-bg-rest: ds.$color-surface-success-deep-rest !default;
+$grid-cell-removed-border-rest: $grid-border-rest !default;
+$grid-row-removed-bg-rest: $grid-row-bg-hovered !default;
+$grid-cell-removed-content-rest: $grid-column-chooser-item-content-rest !default;
+
+$grid-row-invalid-bg-rest: ds.$color-surface-danger-deep-rest !default;
+$grid-no-data-content-rest: ds.$color-content-neutral-subdued-rest !default;
+
+$grid-group-row-content-rest: $grid-column-chooser-item-content-rest !default;
+
+$grid-group-row-bg-rest: ds.$color-surface-neutral-default-rest !default;
+$grid-master-detail-cell-bg-rest: ds.$color-surface-neutral-subdued-rest !default;
+
+$grid-search-content-rest: ds.$color-content-neutral-default-static-dark-rest !default;
+$grid-chevron-icon-rest: ds.$color-content-neutral-subdued-rest !default;
+
+$grid-search-bg-rest: ds.$color-surface-primary-default-rest !default;
+
+$grid-row-error-content-rest: ds.$color-content-neutral-default-static-dark-rest !default;
+
+$grid-row-error-bg-rest: ds.$color-surface-danger-default-rest !default;
+$grid-link-content-rest: ds.$color-content-primary-default-rest !default;
+
+$grid-border-focused: ds.$color-border-primary-default-rest !default;
+
+$grid-editor-bg-rest: transparent !default;
+$grid-drop-highlight-bg-rest: ds.$color-surface-primary-default-rest !default;
+$grid-drop-highlight-content-rest: ds.$color-content-neutral-default-static-dark-rest !default;
+$grid-column-chooser-bg-rest: ds.$color-surface-neutral-default-rest !default;
+$grid-column-chooser-item-bg-rest: $grid-column-chooser-bg-rest !default;
+
+$grid-row-alternation-bg-rest: ds.$color-surface-neutral-deep-rest !default;
+
+$grid-summary-content-rest: ds.$color-content-neutral-subdued-rest !default;
+$grid-column-chooser-message-content-rest: ds.$color-content-neutral-subdued-rest !default;
+$grid-summary-bg-rest: $grid-bg-rest !default;
+$grid-column-separator-bg-rest: ds.$color-surface-primary-default-rest !default;
+$grid-filter-row-bg-rest: ds.$color-surface-neutral-subdued-rest !default;
+$grid-header-filter-icon-active: ds.$color-content-primary-default-rest !default;
+$grid-text-stub-bg-rest: null !default;
+$grid-filter-panel-content-rest: ds.$color-content-primary-default-rest !default;
+$grid-draggable-column-content-rest: ds.$color-content-neutral-subdued-rest !default;
+
+
+@if $mode == "light" {
+  $grid-text-stub-bg-rest: data-uri('images/widgets/fluent-next/color-schemes/light/grid/text-stub.png') !default;
+}
+
+@if $mode == "dark" {
+  $grid-text-stub-bg-rest: data-uri('images/widgets/fluent-next/color-schemes/dark/grid/text-stub.png') !default;
+}
+
+$grid-header-filter-empty-icon-rest: $grid-header-filter-icon-rest !default;
+
+:root {
+  --dx-datagrid-row-alternation-bg: #{$grid-row-alternation-bg-rest};
+}
+
+// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
+$grid-ai-chat-message-pending-content-rest: ds.$color-content-primary-default-rest !default;
+$grid-ai-chat-message-border-rest: ds.$color-border-neutral-default-rest !default;
+$grid-ai-chat-message-error-content-rest: ds.$color-content-danger-default-rest !default;
+$grid-icon-rest: ds.$color-content-neutral-subdued-rest !default;
+$grid-ai-chat-message-success-content-rest: ds.$color-content-success-default-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_index.scss
new file mode 100644
index 000000000000..913297f6ab80
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_index.scss
@@ -0,0 +1,1053 @@
+@use "sass:math";
+@use "sass:color";
+@use "sass:selector";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../dropDownEditor" as *;
+@use "../textEditor" as *;
+@use "../textEditor/sizes" as textEditorSizes;
+@use "../common/mixins" as *;
+@use "../popup/colors" as popupColors;
+@use "../popup/sizes" as popupSizes;
+@use "../menu/colors" as menuColors;
+@use "../button/mixins" as *;
+@use "../button/sizes" as buttonSizes;
+@use "../../base/button/mixins" as *;
+@use "../button/colors" as buttonColors;
+@use "../validation/colors" as validationColors;
+@use "../typography/sizes" as typographySizes;
+@use "../common/sizes" as *;
+@use "../dropDownEditor/sizes" as dropDownEditorSizes;
+
+// adduse
+@use "../scrollable";
+@use "../overlay";
+@use "../pagination";
+@use 'variables' as *;
+@forward 'variables';
+@use 'layout/cell' as *;
+@use "layout/aiChat" as *;
+
+
+@mixin grid-base($widget-name) {
+  @include fluent-grid-base-cell($widget-name);
+
+  .dx-#{$widget-name},
+  .dx-#{$widget-name}-container {
+    .dx-bordered-top-view {
+      border-top-left-radius: $grid-border-radius;
+      border-top-right-radius: $grid-border-radius;
+    }
+
+    .dx-bordered-bottom-view {
+      border-bottom-left-radius: $grid-border-radius;
+      border-bottom-right-radius: $grid-border-radius;
+    }
+
+    .dx-menu {
+      background-color: transparent;
+      margin-top: calc((#{$grid-header-height} - #{buttonSizes.$button-height}) / 2);
+      margin-left: $grid-margin-inline-start;
+      height: buttonSizes.$button-height;
+
+      .dx-menu-item {
+        .dx-menu-item-content {
+          padding: $grid-menu-item-padding;
+
+          .dx-icon {
+            @include dx-icon-sizing($grid-menu-item-icon-size);
+
+            margin: $grid-icon-margin;
+          }
+        }
+      }
+    }
+
+    &.dx-filter-menu {
+      .dx-menu-item-content {
+        .dx-icon {
+          @include dx-icon-sizing($grid-menu-item-icon-size);
+
+          &.dx-icon-filter-operation-default {
+            margin-top: $grid-filter-operation-icon-margin-block-start;
+          }
+        }
+      }
+    }
+
+    .dx-#{$widget-name}-filter-row .dx-editor-with-menu {
+      .dx-menu-item-content {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .dx-texteditor {
+        .dx-texteditor-container {
+          .dx-texteditor-input,
+          .dx-placeholder::before {
+            padding-left: $grid-editor-input-padding;
+          }
+        }
+      }
+    }
+
+    &.dx-context-menu {
+      .dx-menu-items-container {
+        .dx-icon-context-menu-sort-asc {
+          @include dx-icon(sortuptext);
+          @include dx-icon-sizing(calc(#{$grid-menu-item-icon-size} - 4px));
+        }
+
+        .dx-icon-context-menu-sort-desc {
+          @include dx-icon(sortdowntext);
+          @include dx-icon-sizing(calc(#{$grid-menu-item-icon-size} - 4px));
+        }
+
+        .dx-icon-context-menu-sort-none {
+          @include dx-icon-sizing(calc(#{$grid-menu-item-icon-size} - 4px));
+        }
+
+        .dx-icon-fix-column {
+          @include dx-icon(fixcolumn);
+          @include dx-icon-sizing(calc(#{$grid-menu-item-icon-size} - 4px));
+        }
+
+        .dx-icon-fix-column-left {
+          @include dx-icon(fixcolumnleft);
+          @include dx-icon-sizing(calc(#{$grid-menu-item-icon-size} - 4px));
+        }
+
+        .dx-icon-fix-column-right {
+          @include dx-icon(fixcolumnright);
+          @include dx-icon-sizing(calc(#{$grid-menu-item-icon-size} - 4px));
+        }
+
+        .dx-icon-stick-column {
+          @include dx-icon(stickcolumn);
+          @include dx-icon-sizing(calc(#{$grid-menu-item-icon-size} - 4px));
+        }
+
+        .dx-icon-unfix-column {
+          @include dx-icon(unfixcolumn);
+          @include dx-icon-sizing(calc(#{$grid-menu-item-icon-size} - 4px));
+        }
+      }
+    }
+
+    .dx-sort-up,
+    .dx-sort-down,
+    .dx-header-filter {
+      @include dx-icon-sizing($grid-header-icon-size, $grid-header-icon-container-size);
+    }
+
+    .dx-header-filter:not(.dx-header-filter-empty) {
+      color: $grid-header-filter-icon-active;
+    }
+
+    .dx-icon-filter-operation-equals {
+      @include dx-icon(equal);
+    }
+
+    .dx-icon-filter-operation-default {
+      @include dx-icon(find);
+    }
+
+    .dx-icon-filter-operation-not-equals {
+      @include dx-icon(notequal);
+    }
+
+    .dx-icon-filter-operation-less {
+      @include dx-icon(less);
+    }
+
+    .dx-icon-filter-operation-less-equal {
+      @include dx-icon(lessorequal);
+    }
+
+    .dx-icon-filter-operation-greater {
+      @include dx-icon(greater);
+    }
+
+    .dx-icon-filter-operation-greater-equal {
+      @include dx-icon(greaterorequal);
+    }
+
+    .dx-icon-filter-operation-contains {
+      @include dx-icon(contains);
+    }
+
+    .dx-icon-filter-operation-not-contains {
+      @include dx-icon(doesnotcontain);
+    }
+
+    .dx-icon-filter-operation-starts-with {
+      @include dx-icon(startswith);
+    }
+
+    .dx-icon-filter-operation-ends-with {
+      @include dx-icon(endswith);
+    }
+
+    .dx-icon-filter-operation-between {
+      @include dx-icon(range);
+    }
+
+    .dx-column-indicators {
+      height: $grid-header-line-height;
+
+      .dx-sort-index-icon {
+        padding-right: $grid-sort-index-icon-padding-inline-end;
+        margin-left: $grid-sort-index-icon-margin-inline-start;
+        font-size: calc(#{$grid-header-cell-font-size} - 1px);
+        position: relative;
+        bottom: $grid-sort-index-icon-inset-block-end;
+      }
+
+      > div {
+        @include dx-icon-sizing($grid-header-icon-size, $grid-header-icon-container-size);
+      }
+
+      > span {
+        margin-left: $grid-header-cell-sort-index-margin-inline-start;
+      }
+    }
+
+    .dx-placeholder::before {
+      font-size: $grid-cell-font-size;
+    }
+  }
+
+  .dx-#{$widget-name} {
+    line-height: inherit;
+
+    .dx-row-alt {
+      &.dx-row:not(.dx-row-removed) {
+        border-bottom-color: transparent;
+      }
+
+      // T838734
+      border-top: $grid-row-removed-border-block-start;
+      border-top-color: $grid-row-alternation-bg-rest;
+      border-bottom: $grid-row-removed-border-block-end;
+      border-bottom-color: $grid-row-alternation-bg-rest;
+    }
+
+    .dx-link {
+      color: $grid-link-content-rest;
+    }
+
+    .dx-error-row {
+      .dx-closebutton {
+        float: right;
+        margin: calc(#{$grid-cell-padding-block} + 2px);
+
+        @include dx-icon(close);
+        @include dx-icon-sizing(14px);
+      }
+
+      .dx-error-message {
+        padding: $grid-cell-padding-block;
+        padding-right: $grid-error-message-padding-inline-end;
+      }
+    }
+
+    .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row {
+      > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all),
+      > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending),
+      > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all) {
+        &.dx-command-edit {
+          .dx-link:not(.dx-link-icon) {
+            margin: 0 $grid-command-edit-text-margin;
+            min-width: $grid-link-icon-min-width;
+          }
+
+          &.dx-command-edit-with-icons {
+            .dx-link {
+              @include dx-icon-sizing($grid-command-edit-icon-size);
+
+              margin: 0 $grid-command-edit-icon-margin;
+              vertical-align: middle;
+            }
+
+            .dx-link:not(.dx-link-icon) {
+              width: auto;
+            }
+          }
+
+          .dx-state-disabled {
+            &.dx-link {
+              opacity: $grid-text-link-opacity-disabled;
+            }
+
+            &.dx-link-icon {
+              opacity: $grid-icon-link-opacity-disabled;
+            }
+          }
+        }
+      }
+    }
+
+    .dx-#{$widget-name}-rowsview .dx-virtual-row > td[style*="text-align: right"]:before {
+      background-position-y: 49px;
+    }
+
+    .dx-command-drag {
+      .dx-#{$widget-name}-drag-icon {
+        @include dx-icon-sizing($global-icon-size);
+      }
+    }
+
+    .dx-#{$widget-name}-drop-highlight {
+      & > td {
+        .dx-header-filter {
+          color: $grid-drop-highlight-content-rest;
+        }
+
+        .dx-checkbox {
+          .dx-checkbox-icon {
+            background-color: $grid-drop-highlight-content-rest;
+            color: $grid-drop-highlight-bg-rest;
+          }
+        }
+      }
+    }
+  }
+
+  .dx-#{$widget-name}-edit-popup {
+    .dx-popup-content {
+      padding: 0;
+    }
+
+    .dx-error-message {
+      padding: $grid-cell-padding;
+    }
+  }
+
+  .dx-#{$widget-name}-edit-popup-form {
+    padding: popupSizes.$popup-content-padding-block popupSizes.$popup-content-padding;
+  }
+
+  .dx-#{$widget-name}-headers,
+  .dx-#{$widget-name}-rowsview {
+    .dx-texteditor-input {
+      min-height: $grid-header-line-height;
+    }
+
+    .dx-lookup {
+      height: auto;
+
+      .dx-lookup-field {
+        padding-left: $grid-cell-padding-inline;
+        padding-top: $grid-cell-padding-block;
+        padding-bottom: $grid-cell-padding-block;
+        font-size: $grid-cell-font-size;
+      }
+    }
+
+    .dx-dropdowneditor-button-visible.dx-dropdowneditor {
+      &.dx-show-clear-button {
+        &.dx-invalid,
+        &.dx-valid,
+        &.dx-validation-pending {
+          .dx-texteditor-input {
+            padding-right: dropDownEditorSizes.$drop-down-editor-invalid-badge-size;
+          }
+
+          &.dx-rtl .dx-texteditor-input {
+            padding-right: 0;
+            padding-left: dropDownEditorSizes.$drop-down-editor-invalid-badge-size;
+          }
+        }
+      }
+
+      &.dx-invalid,
+      &.dx-valid,
+      &.dx-validation-pending {
+        .dx-texteditor-input {
+          padding-right: dropDownEditorSizes.$drop-down-editor-invalid-badge-size;
+        }
+
+        &.dx-rtl .dx-texteditor-input {
+          padding-right: 0;
+          padding-left: dropDownEditorSizes.$drop-down-editor-invalid-badge-size;
+        }
+      }
+
+      &.dx-rtl .dx-texteditor-input {
+        padding-right: 0;
+      }
+    }
+  }
+
+  .dx-editor-cell {
+    .dx-numberbox-spin-button {
+      background-color: transparent;
+    }
+
+    .dx-icon-clear {
+      left: 0;
+    }
+
+    .dx-texteditor {
+      &,
+      &.dx-state-hover,
+      &.dx-state-focused,
+      &.dx-state-active {
+        background: $grid-editor-bg-rest;
+        box-shadow: none;
+      }
+
+      &:not(.dx-tagbox) .dx-texteditor-input {
+        background: $grid-editor-bg-rest;
+        font-size: $grid-cell-font-size;
+        height: $grid-cell-height;
+        line-height: $grid-cell-height;
+        margin-top: 0;
+      }
+
+      &:not(.dx-tagbox):not(.dx-colorbox) .dx-texteditor-input {
+        padding: 0 $grid-cell-padding-inline;
+      }
+
+      .dx-placeholder::before {
+        padding-right: $grid-cell-padding-inline;
+        padding-left: $grid-cell-padding-inline;
+      }
+
+      &.dx-validation-pending {
+        .dx-texteditor-input-container {
+          .dx-texteditor-input {
+            padding-top: 0;
+            padding-bottom: 0;
+          }
+        }
+      }
+
+      &:not(.dx-tagbox) .dx-tag-container {
+        min-height: $grid-cell-height;
+        padding: 0;
+      }
+
+      &:not(.dx-editor-filled):not(.dx-editor-outlined) {
+        .dx-texteditor-input,
+        .dx-tag-container {
+          margin-top: 0;
+        }
+      }
+
+      .dx-texteditor-buttons-container {
+        right: 0;
+      }
+
+      &::after,
+      &::before {
+        content: none;
+      }
+
+      &.dx-rtl,
+      .dx-rtl & {
+        .dx-texteditor-buttons-container {
+          left: 0;
+        }
+      }
+    }
+
+    .dx-dropdowneditor {
+      background-color: $grid-editor-bg-rest;
+    }
+
+    &.dx-focused .dx-dropdowneditor-icon {
+      border-radius: 0;
+    }
+
+    &.dx-editor-inline-block:not(.dx-command-select) {
+      &::before {
+        padding-top: $grid-cell-padding-block;
+        padding-bottom: $grid-cell-padding-block;
+      }
+    }
+  }
+
+  .dx-#{$widget-name}-column-chooser-list {
+    .dx-empty-message {
+      color: $grid-column-chooser-message-content-rest;
+      padding: 0 $grid-column-chooser-padding-inline;
+    }
+  }
+
+  .dx-#{$widget-name}-column-chooser {
+    @include dx-base-typography();
+
+    &.dx-#{$widget-name}-column-chooser-mode-drag {
+      .dx-popup-content {
+        padding: $grid-column-chooser-padding;
+
+        .dx-treeview-search {
+          margin-bottom: $grid-tree-view-search-margin-block-end;
+        }
+
+        .dx-treeview-node {
+          padding-left: $grid-tree-view-node-padding-inline-start;
+        }
+      }
+    }
+
+    &.dx-#{$widget-name}-column-chooser-mode-select {
+      .dx-popup-content {
+        padding: $grid-column-chooser-padding;
+      }
+
+      .dx-#{$widget-name}-column-chooser-plain, .dx-#{$widget-name}-column-chooser-list {
+        .dx-treeview-select-all-item {
+          padding-inline-start: $grid-tree-view-select-all-item-padding-inline-start;
+        }
+      }
+    }
+
+    .dx-overlay-content {
+      background-color: $grid-column-chooser-bg-rest;
+
+      .dx-popup-title {
+        background-color: transparent;
+        border-bottom: $grid-popup-title-border-block-end;
+        border-bottom-color: popupColors.$popup-title-border-rest;
+
+        .dx-toolbar-label {
+          font-size: typographySizes.$typography-m-font-size;
+        }
+      }
+
+      .dx-popup-content {
+        .dx-column-chooser-item {
+          margin: $grid-column-chooser-list-item-margin;
+          background-color: $grid-column-chooser-item-bg-rest;
+          color: $grid-column-chooser-item-content-rest;
+          font-weight: $grid-column-chooser-font-weight;
+          font-size: $grid-header-cell-font-size;
+          padding: $grid-cell-padding-block;
+          line-height: $grid-header-line-height;
+          box-shadow: $grid-drag-header-box-shadow;
+        }
+      }
+    }
+  }
+
+  .dx-#{$widget-name}-drag-header {
+    border-color: $grid-drag-header-border-rest;
+    box-shadow: $grid-drag-header-box-shadow;
+    color: $grid-column-chooser-item-content-rest;
+    font-weight: $grid-column-chooser-font-weight;
+    padding: $grid-header-cell-padding-block;
+    background-color: $grid-drag-header-bg-rest;
+    line-height: $grid-header-line-height;
+    font-size: $grid-header-cell-font-size;
+  }
+
+  .dx-#{$widget-name}-columns-separator {
+    background-color: $grid-column-separator-bg-rest;
+  }
+
+  .dx-#{$widget-name}-columns-separator-transparent {
+    background-color: transparent;
+  }
+
+  .dx-#{$widget-name}-focus-overlay {
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      height: $grid-column-chooser-item-height;
+      background-color: $grid-border-focused;
+      left: 0;
+      right: $grid-after-inset-inline-end;
+    }
+
+    &.dx-focused-cell-modified::after {
+      background-color: buttonColors.$button-success-contained-bg-hovered;
+    }
+
+    &.dx-focused-cell-invalid::after {
+      background-color: buttonColors.$button-danger-contained-bg-hovered;
+    }
+  }
+
+  .dx-data-row.dx-state-hover {
+    &:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) {
+      & > .dx-#{$widget-name}-readonly .dx-texteditor {
+        .dx-texteditor-input {
+          background-color: $grid-row-bg-hovered;
+          color: $grid-row-content-hovered;
+        }
+      }
+    }
+  }
+
+  .dx-#{$widget-name}-headers {
+    color: $grid-column-chooser-item-content-rest;
+    touch-action: pinch-zoom;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      pointer-events: none;
+      border-bottom: $grid-border;
+      border-bottom-color: $grid-border-rest;
+    }
+
+    .dx-#{$widget-name}-table {
+      .dx-#{$widget-name}-borders & {
+        border-bottom-width: $grid-editor-input-border-block-end-width;
+      }
+
+      .dx-row {
+        > td {
+          .dx-sort {
+            color: $grid-header-filter-empty-icon-rest;
+          }
+
+          &:not([class*="dx-command"], .dx-editor-cell, .dx-#{$widget-name}-group-space):hover {
+            .dx-#{$widget-name}-text-content {
+              color: $grid-content-rest;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .dx-#{$widget-name}-filter-row {
+    background-color: $grid-filter-row-bg-rest;
+
+    .dx-menu {
+      margin-left: 0;
+
+      .dx-menu-horizontal {
+        .dx-menu-items-container {
+          height: 100%;
+          position: absolute;
+
+          .dx-menu-item-wrapper {
+            height: 100%;
+          }
+        }
+      }
+
+      .dx-overlay-content {
+        color: menuColors.$menu-content-rest;
+      }
+    }
+
+    .dx-filter-modified {
+      background-color: $grid-cell-modified-bg-rest;
+    }
+
+    td .dx-editor-container .dx-filter-range-content {
+      padding:
+        $grid-cell-padding-block
+        $grid-cell-padding-inline
+        $grid-cell-padding-block
+        $grid-editor-input-padding;
+    }
+  }
+
+  .dx-#{$widget-name}-filter-range-overlay {
+    .dx-overlay-content {
+      overflow: inherit;
+      background-color: $grid-filter-row-bg-rest;
+      box-shadow: $grid-drag-header-box-shadow;
+
+      .dx-texteditor {
+        &.dx-state-focused::after,
+        &.dx-state-hover::after {
+          top: auto;
+          bottom: 0;
+        }
+
+        .dx-texteditor-input {
+          font-size: $grid-cell-font-size;
+          height: calc(#{$grid-cell-height} + 1px);
+          padding-right: $grid-filter-row-editor-padding-inline;
+          padding-left: $grid-filter-row-editor-padding-inline;
+        }
+
+        .dx-placeholder::before {
+          padding-left: $grid-filter-row-editor-padding-inline;
+        }
+      }
+
+      .dx-invalid-message.dx-overlay-wrapper {
+        display: none;
+      }
+    }
+  }
+
+  .dx-#{$widget-name}-header-panel {
+    border-bottom: $grid-border;
+    border-bottom-color: $grid-border-rest;
+    padding: $grid-header-panel-padding;
+
+    .dx-toolbar-text-auto-hide .dx-button.dx-button-has-icon {
+      border-radius: $global-border-radius;
+    }
+  }
+
+  .dx-icon-column-chooser {
+    @include dx-icon(columnchooser);
+  }
+
+  .dx-#{$widget-name}-addrow-button {
+    .dx-icon-edit-button-addrow {
+      @include dx-icon(add);
+      @include dx-icon-sizing($global-icon-size);
+    }
+  }
+
+  .dx-#{$widget-name}-cancel-button {
+    .dx-icon-edit-button-cancel {
+      @include dx-icon(revert);
+      @include dx-icon-sizing($global-icon-size);
+    }
+  }
+
+  .dx-#{$widget-name}-save-button {
+    .dx-icon-edit-button-save {
+      @include dx-icon(save);
+      @include dx-icon-sizing($global-icon-size);
+    }
+  }
+
+  .dx-apply-button {
+    .dx-icon-apply-filter {
+      @include dx-icon(filter);
+      @include dx-icon-sizing($global-icon-size);
+    }
+  }
+
+  .dx-datagrid-export-menu {
+    .dx-menu-item .dx-icon-xlsxfile {
+      @include dx-icon-sizing($global-icon-size);
+    }
+
+    .dx-menu-item .dx-icon-exportselected {
+      @include dx-icon-sizing($global-icon-size);
+    }
+  }
+
+  .dx-#{$widget-name}-adaptive-more {
+    vertical-align: middle;
+
+    @include dx-icon-sizing($global-icon-size);
+
+    color: $grid-icon-rest;
+  }
+
+  .dx-row.dx-row-focused {
+    .dx-#{$widget-name}-adaptive-more {
+      color: inherit;
+    }
+  }
+
+  .dx-#{$widget-name}-rowsview {
+    border-top: $grid-row-border-block-start-focused;
+    border-top-color: $grid-border-rest;
+
+    .dx-#{$widget-name}-headers + &,
+    &.dx-#{$widget-name}-after-headers {
+      border-top: none;
+    }
+
+    .dx-row {
+      border-top: $grid-row-border;
+      border-bottom: $grid-row-border;
+
+      &:focus {
+        outline: none;
+      }
+    }
+
+    .dx-data-row,
+    .dx-adaptive-detail-row {
+      &,
+      &.dx-selection,
+      &.dx-selection:hover {
+        .dx-validator {
+          &.dx-#{$widget-name}-invalid,
+          &.dx-invalid {
+            background-color: $grid-row-invalid-bg-rest;
+          }
+        }
+      }
+    }
+
+    .dx-overlay-wrapper.dx-invalid-message {
+      .dx-overlay-content {
+        padding: $grid-overlay-content-padding;
+        background-color: validationColors.$validation-message-bg-rest;
+        color: validationColors.$validation-message-content-rest;
+      }
+    }
+
+    .dx-adaptive-detail-row {
+      .dx-field-item-label {
+        padding-top: 0;
+      }
+
+      .dx-field-item-content {
+        line-height: $grid-adaptive-column-height;
+        min-height: $grid-adaptive-column-height;
+        font-size: $grid-cell-font-size;
+
+        &.dx-focused {
+          padding: 0;
+        }
+      }
+
+      .dx-texteditor-input {
+        font-size: $grid-cell-font-size;
+        height: $grid-adaptive-column-height;
+        line-height: $grid-adaptive-column-height;
+      }
+
+      .dx-texteditor::after,
+      .dx-texteditor::before {
+        content: none;
+      }
+
+      .dx-texteditor.dx-editor-outlined {
+        box-shadow: none;
+      }
+    }
+
+    .dx-item-modified {
+      background-color: $grid-cell-modified-bg-rest;
+    }
+
+    .dx-row-focused {
+      &.dx-data-row {
+        & .dx-command-edit .dx-link {
+          color: $grid-row-content-focused;
+        }
+
+        & > td:not(.dx-focused):not(.dx-cell-modified):not(.dx-#{$widget-name}-invalid),
+        & .dx-command-edit .dx-link {
+          & .dx-#{$widget-name}-group-opened,
+          & .dx-#{$widget-name}-group-closed {
+            color: $grid-row-content-focused;
+          }
+        }
+      }
+
+      &.dx-group-row {
+        background-color: $grid-row-bg-focused;
+        color: $grid-row-content-focused;
+
+        & .dx-#{$widget-name}-group-opened,
+        & .dx-#{$widget-name}-group-closed {
+          color: $grid-row-content-focused;
+        }
+      }
+    }
+
+    &.dx-scrollable-scrollbars-alwaysvisible.dx-scrollable-both .dx-scrollable-wrapper .dx-scrollable-container .dx-scrollable-content {
+      padding-right: 0;
+    }
+
+    td {
+      &.dx-validation-pending {
+        > .dx-pending-indicator {
+          @include dx-pending-indicator-fluent();
+          @include texteditor-validation-icon-offset();
+
+          right: $invalid-badge-size;
+          background-color: transparent;
+
+          @at-root #{selector.append(".dx-rtl", &)},
+          .dx-rtl & {
+            left: $invalid-badge-size;
+          }
+        }
+      }
+    }
+
+    &.dx-#{$widget-name}-sticky-columns {
+      .dx-row.dx-edit-row > td:not(.dx-master-detail-cell) .dx-texteditor-input {
+        height: calc(#{$grid-cell-height} - 2px);
+        line-height: calc(#{$grid-cell-height} - 2px);
+      }
+
+      .dx-master-detail-row > .dx-master-detail-cell {
+        > .dx-#{$widget-name}-master-detail-container {
+          padding: $grid-master-detail-padding;
+        }
+      }
+    }
+  }
+
+  .dx-#{$widget-name}-search-text {
+    color: $grid-search-content-rest;
+    background-color: $grid-search-bg-rest;
+  }
+
+  .dx-#{$widget-name}-nodata {
+    color: $grid-no-data-content-rest;
+    font-size: $grid-no-data-font-size;
+  }
+
+  .dx-#{$widget-name}-bottom-load-panel {
+    border-top: $grid-border;
+    border-top-color: $grid-border-rest;
+    background-color: $grid-bg-rest;
+  }
+
+  .dx-#{$widget-name}-summary-item {
+    color: $grid-summary-content-rest;
+  }
+
+  .dx-#{$widget-name}-total-footer {
+    border-bottom: $grid-border;
+    border-bottom-color: $grid-border-rest;
+    border-top: $grid-border;
+    border-top-color: $grid-border-rest;
+
+    > .dx-#{$widget-name}-content {
+      padding: 0;
+    }
+  }
+
+  .dx-#{$widget-name}-revert-tooltip {
+    .dx-overlay-content {
+      background-color: transparent;
+      min-width: inherit;
+    }
+
+    .dx-revert-button {
+      @include dx-button-sizing(2px, 2px, 2px, 18px, 0);
+
+      border-radius: buttonSizes.$button-border-radius;
+
+      @include dx-button-styling-variant(
+        buttonColors.$button-danger-contained-bg-rest,
+        buttonColors.$button-danger-contained-content-rest,
+        buttonColors.$button-danger-contained-content-rest,
+        buttonColors.$button-danger-contained-content-rest,
+        buttonColors.$button-danger-contained-bg-rest,
+        buttonColors.$button-danger-contained-bg-rest,
+        buttonColors.$button-danger-contained-bg-rest,
+        buttonColors.$button-danger-contained-content-rest
+      );
+
+      margin: $grid-revert-button-margin;
+      height: $grid-cell-height;
+      box-shadow: none;
+      min-width: inherit;
+
+      &.dx-button-has-icon:not(.dx-button-has-text) {
+        border-radius: $grid-icon-button-border-radius;
+      }
+
+      &.dx-state-hover {
+        box-shadow: none;
+      }
+    }
+  }
+
+  .dx-rtl {
+    .dx-#{$widget-name},
+    .dx-#{$widget-name}-container {
+      .dx-menu {
+        .dx-menu-item-has-submenu.dx-menu-item-has-icon {
+          .dx-icon {
+            margin: $grid-icon-margin;
+          }
+        }
+      }
+    }
+
+    .dx-#{$widget-name}-rowsview {
+      &.dx-scrollable-scrollbars-alwaysvisible.dx-scrollable-both .dx-scrollable-wrapper .dx-scrollable-container .dx-scrollable-content {
+        padding-left: 0;
+      }
+    }
+  }
+
+  .dx-header-filter-menu {
+    .dx-popup-content {
+      padding: $grid-content-padding;
+    }
+  }
+
+  .dx-#{$widget-name}-filter-panel {
+    background-color: $grid-bg-rest;
+    padding: $grid-filter-panel-padding;
+
+    .dx-#{$widget-name}-filter-panel-text,
+    .dx-#{$widget-name}-filter-panel-clear-filter {
+      color: $grid-filter-panel-content-rest;
+      font-size: $grid-cell-font-size;
+      line-height: $grid-checkbox-size;
+    }
+
+    .dx-icon-filter {
+      color: $grid-filter-panel-content-rest;
+
+      @include dx-icon-sizing($grid-filter-panel-icon-size);
+    }
+  }
+
+  .dx-adaptive-item-text {
+    padding-left: textEditorSizes.$text-editor-input-filled-padding-inline;
+    padding-right: textEditorSizes.$text-editor-input-filled-padding-inline;
+    &.dx-cell-modified,
+    &.dx-#{$widget-name}-invalid {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+  }
+
+  .dx-#{$widget-name}-dragview {
+    border-radius: $grid-border-radius;
+
+    .dx-#{$widget-name}-borders {
+      border-radius: $grid-border-radius;
+    }
+  }
+
+  .dx-#{$widget-name}-sticky-columns .dx-#{$widget-name}-draggable-column {
+    opacity: 1;
+    color: $grid-draggable-column-content-rest;
+  }
+
+  .dx-command-ai-header-content {
+    max-width: calc(100% - (buttonSizes.$button-height - $grid-cell-padding-inline + $grid-command-ai-button-max-width));
+
+    .dx-#{$widget-name}-text-content {
+      padding-left: $grid-command-ai-content-padding-inline-start;
+    }
+
+    .dx-icon-chatsparkleoutline {
+      @include dx-icon-sizing($grid-command-ai-icon-size);
+    }
+  }
+
+  .dx-command-ai-header-button {
+    left: auto;
+    right: $grid-command-ai-button-max-width;
+  }
+
+  td[style*="text-align: right"] .dx-command-ai-header-button {
+    left: $grid-command-ai-button-max-width;
+    right: auto;
+  }
+
+  .dx-ai-prompt-editor__progressbar .dx-progressbar-animating-container {
+    height: $grid-ai-prompt-editor-progress-bar-height;
+    border-radius: 0;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_sizes.scss
new file mode 100644
index 000000000000..51ce0fd2e6cc
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_sizes.scss
@@ -0,0 +1,154 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+@use "../button/sizes" as buttonSizes;
+
+// adduse
+
+// Not colours: a font weight and two opacities (NAMING.md O7)
+$grid-column-chooser-font-weight: ds.$font-weight-base-strong !default;
+$grid-text-link-opacity-disabled: ds.$opacity-35;
+$grid-icon-link-opacity-disabled: ds.$opacity-60;
+$grid-group-panel-message-line-height: buttonSizes.$button-text-line-height;
+
+$grid-border: 1px solid !default;
+$grid-border-radius: 0 !default;
+
+$grid-cell-height: null !default;
+$grid-header-height: null !default;
+$grid-cell-line-height: null !default;
+$grid-cell-font-size: null !default;
+$grid-checkbox-size: null !default;
+$grid-cell-padding-inline: null !default;
+$grid-editor-input-padding: null !default;
+$grid-menu-item-padding: null !default;
+$grid-column-chooser-padding-inline: null !default;
+$grid-column-chooser-padding: null !default;
+$grid-header-panel-padding: null !default;
+$grid-group-panel-item-margin-inline: null !default;
+$grid-command-edit-column-width: null !default;
+$grid-command-edit-column-with-icons-width: null !default;
+$grid-adaptive-column-height: null !default;
+$grid-tree-view-search-margin-block-end: null !default;
+$grid-no-data-font-size: null !default;
+$grid-filter-row-editor-padding-inline: null !default;
+$grid-tree-view-select-all-item-padding-inline-start: null !default;
+
+$grid-header-line-height: ds.$line-height-180 !default; // dx-no-semantic-role: 180 is off the line-height-role scale
+$grid-header-icon-size: null !default;
+$grid-header-icon-container-size: ds.$spacing-200 !default;
+$grid-column-chooser-item-margin: ds.$spacing-80 !default;
+$grid-command-edit-icon-margin: ds.$spacing-40 !default;
+$grid-command-edit-text-margin: ds.$spacing-20 !default;
+
+$grid-command-edit-icon-size: null !default;
+$grid-filter-panel-icon-size: null !default;
+
+$grid-menu-item-icon-size: buttonSizes.$button-icon-size !default;
+$grid-command-ai-icon-size: null !default;
+$grid-command-ai-content-padding-inline-start: null !default;
+$grid-command-ai-button-max-width: null !default;
+$grid-ai-prompt-editor-progress-bar-height: ds.$spacing-40 !default;
+
+@if $size == "default" {
+  $grid-cell-height: ds.$spacing-480 !default;
+  $grid-header-height: ds.$spacing-480 !default;
+  $grid-cell-line-height: ds.$line-height-base-md !default;
+  $grid-cell-font-size: ds.$font-size-base-md !default;
+
+  $grid-checkbox-size: ds.$spacing-180 !default;
+  $grid-cell-padding-inline: ds.$spacing-160 !default;
+
+  $grid-editor-input-padding: ds.$spacing-400 !default;
+  $grid-menu-item-padding: ds.$spacing-110 ds.$spacing-40 !default;
+  $grid-column-chooser-padding-inline: ds.$spacing-240 !default;
+  $grid-column-chooser-padding: ds.$spacing-160 $grid-column-chooser-padding-inline ds.$spacing-90 !default;
+  $grid-header-panel-padding: ds.$spacing-80 0 !default;
+  $grid-group-panel-item-margin-inline: ds.$spacing-60 !default;
+
+  $grid-command-edit-column-width: 115px !default; // dx-offscale: 115px
+  $grid-command-edit-column-with-icons-width: 93px !default; // dx-offscale: 93px
+  $grid-adaptive-column-height: ds.$spacing-400 !default;
+  $grid-tree-view-search-margin-block-end: ds.$spacing-100 !default;
+  $grid-no-data-font-size: ds.$spacing-170 !default;
+
+  $grid-filter-row-editor-padding-inline: ds.$spacing-120 !default;
+
+  $grid-tree-view-select-all-item-padding-inline-start: ds.$spacing-340 !default;
+
+  $grid-header-icon-size: ds.$spacing-200 !default;
+  $grid-command-edit-icon-size: ds.$spacing-200 !default;
+  $grid-filter-panel-icon-size: ds.$spacing-200 !default;
+  $grid-command-ai-icon-size: ds.$spacing-200 !default;
+  $grid-command-ai-content-padding-inline-start: calc(#{$grid-command-ai-icon-size} + 8px) !default;
+  $grid-command-ai-button-max-width: ds.$spacing-80 !default;
+}
+
+@else if $size == "compact" {
+  $grid-cell-height: ds.$spacing-360 !default;
+  $grid-header-height: ds.$spacing-360 !default;
+  $grid-cell-line-height: ds.$line-height-base-sm !default;
+  $grid-cell-font-size: ds.$font-size-base-sm !default;
+
+  $grid-checkbox-size: ds.$spacing-160 !default;
+  $grid-cell-padding-inline: ds.$spacing-110 !default;
+
+  $grid-editor-input-padding: ds.$spacing-360 !default;
+  $grid-menu-item-padding: ds.$spacing-80 ds.$spacing-40 !default;
+  $grid-column-chooser-padding-inline: ds.$spacing-80 !default;
+  $grid-column-chooser-padding: ds.$spacing-80 $grid-column-chooser-padding-inline ds.$spacing-80 !default;
+  $grid-header-panel-padding: ds.$spacing-60 0 !default;
+  $grid-group-panel-item-margin-inline: ds.$spacing-60 !default;
+
+  $grid-command-edit-column-width: 105px !default; // dx-offscale: 105px
+  $grid-command-edit-column-with-icons-width: ds.$spacing-800 !default;
+  $grid-adaptive-column-height: ds.$spacing-260 !default;
+  $grid-tree-view-search-margin-block-end: ds.$spacing-100 !default;
+  $grid-no-data-font-size: ds.$font-size-base-md !default;
+
+  $grid-filter-row-editor-padding-inline: ds.$spacing-80 !default;
+
+  $grid-tree-view-select-all-item-padding-inline-start: ds.$spacing-280 !default;
+
+  $grid-header-icon-size: ds.$spacing-160 !default;
+  $grid-command-edit-icon-size: ds.$spacing-160 !default;
+  $grid-filter-panel-icon-size: ds.$spacing-160 !default;
+  $grid-command-ai-icon-size: ds.$spacing-160 !default;
+  $grid-command-ai-content-padding-inline-start: calc(#{$grid-command-ai-icon-size} + 6px) !default;
+  $grid-command-ai-button-max-width: ds.$spacing-60 !default;
+}
+
+$grid-header-cell-font-size: $grid-cell-font-size !default;
+
+// Values hoisted from style-file literals (tokenized)
+$grid-icon-button-border-radius: ds.$border-radius-20 !default;
+$grid-margin-inline-start: ds.$spacing-50 !important !default;
+$grid-icon-margin: 0 ds.$spacing-30 !default;
+$grid-filter-operation-icon-margin-block-start: ds.$spacing-20 !default;
+$grid-sort-index-icon-padding-inline-end: ds.$spacing-40 !default;
+$grid-sort-index-icon-margin-inline-start: -1px !default; // dx-offscale: -1px
+$grid-sort-index-icon-inset-block-end: ds.$spacing-10 !default;
+$grid-header-cell-sort-index-margin-inline-start: ds.$spacing-40 !default;
+$grid-error-message-padding-inline-end: 35px !default; // dx-offscale: 35px
+$grid-tree-view-node-padding-inline-start: ds.$spacing-200 !default;
+$grid-column-chooser-list-item-margin: ds.$spacing-20 ds.$spacing-20 $grid-column-chooser-item-margin ds.$spacing-20 !default;
+$grid-column-chooser-item-height: ds.$spacing-20 !default;
+$grid-after-inset-inline-end: ds.$spacing-10 !default;
+$grid-overlay-content-padding: ds.$spacing-90 ds.$spacing-170 ds.$spacing-90 !default;
+$grid-revert-button-margin: 0 0 0 ds.$spacing-10 !default;
+$grid-content-padding: ds.$spacing-80 ds.$spacing-80 0 ds.$spacing-80 !default;
+$grid-filter-panel-padding: ds.$spacing-180 $grid-cell-padding-inline !default;
+$grid-header-row-padding-block-start: ds.$spacing-120 !default;
+$grid-header-row-padding-block-end: ds.$spacing-120 !default;
+$grid-validation-pending-padding: 0 ds.$spacing-40 0 ds.$spacing-80 !default;
+$grid-row-removed-border-block-start: ds.$border-width-10 solid !default;
+$grid-row-removed-border-block-end: ds.$border-width-10 solid !default;
+$grid-popup-title-border-block-end: ds.$border-width-10 solid !default;
+$grid-row-border-block-start-focused: ds.$border-width-10 solid !default;
+$grid-row-lines-border-block-start: ds.$border-width-10 solid !default;
+$grid-row-lines-border-block-end: ds.$border-width-10 solid !default;
+$grid-row-lines-border-inline-start: ds.$border-width-10 solid !default;
+$grid-cell-border-inline-end: ds.$border-width-10 solid !default;
+$grid-hidden-border: ds.$border-width-10 solid transparent !default;
+$grid-row-border: ds.$border-width-10 solid transparent !default;
+$grid-link-icon-min-width: ds.$spacing-200 !default;
+$grid-editor-input-border-block-end-width: ds.$border-width-10 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_variables.scss b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_variables.scss
new file mode 100644
index 000000000000..1eee5cdd6eab
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_variables.scss
@@ -0,0 +1,18 @@
+@use "sass:math";
+@use "colors" as *;
+@use "sizes" as *;
+
+$grid-cell-padding-block: calc((#{$grid-cell-height} - #{$grid-cell-line-height}) / 2);
+$grid-cell-padding: $grid-cell-padding-block $grid-cell-padding-inline;
+$grid-header-cell-padding-block: calc((#{$grid-header-height} - #{$grid-header-line-height}) / 2);
+$grid-command-select-column-width: calc(#{$grid-checkbox-size} + 2 * #{$grid-cell-padding-inline});
+$grid-master-detail-padding: 16px;
+
+/*
+ * The two layers of one drop shadow, kept as a single value: `ambient, key` is the only way they
+ * are ever used, and splitting them needs a per-layer name in the slot position, which the
+ * grammar reserves for a CSS property (NAMING.md, size slots).
+ */
+$grid-drag-header-box-shadow:
+  0 0 1px $grid-drag-header-shadow-ambient-rest,
+  0 1px 3px $grid-drag-header-shadow-key-rest;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/layout/aiChat/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/layout/aiChat/_index.scss
new file mode 100644
index 000000000000..b531dbc2d473
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/layout/aiChat/_index.scss
@@ -0,0 +1,20 @@
+@use "../../colors" as *;
+@use '../../../../base/gridBase/layout/aiChat/mixins' as *;
+@use '../../../colors' as *;
+@use '../../../button/colors' as buttonColors;
+@use './sizes' as *;
+@use "../../../../base/widget" as baseWidget;
+@include ai-chat-messagelist-empty(
+  buttonColors.$button-default-contained-bg-rest,
+  buttonColors.$button-default-outlined-bg-hovered,
+);
+@include ai-chat-message-pending($grid-ai-chat-message-pending-content-rest);
+@include ai-chat-message-success($grid-ai-chat-message-success-content-rest);
+@include ai-chat-message-error($grid-ai-chat-message-error-content-rest);
+@include ai-chat-messagebubble-border($grid-ai-chat-message-border-rest);
+@include ai-chat-message-regenerate-button(buttonColors.$button-normal-contained-bg-active);
+@include ai-chat-message-icon($grid-ai-chat-message-icon-size);
+
+.dx-ai-chat--disabled .dx-ai-chat__message-regenerate-button {
+  @include baseWidget.disabled-widget();
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/layout/aiChat/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/layout/aiChat/_sizes.scss
new file mode 100644
index 000000000000..64fd7df6f74a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/layout/aiChat/_sizes.scss
@@ -0,0 +1,3 @@
+@use '../../../sizes' as *;
+
+$grid-ai-chat-message-icon-size: $global-icon-size;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/layout/cell.scss b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/layout/cell.scss
new file mode 100644
index 000000000000..69839d1100e5
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/layout/cell.scss
@@ -0,0 +1,542 @@
+/* stylelint-disable no-duplicate-selectors */
+@use "sass:math";
+@use "../colors" as *;
+@use "../sizes" as *;
+@use "../../sizes" as *;
+@use "../../textEditor" as *;
+@use "../variables" as *;
+@use "../../textEditor/sizes" as textEditorSizes;
+
+@mixin fluent-grid-base-cell($widget-name) {
+
+  // #region overflow
+
+  // (0,1,0)
+  .dx-cell-modified,
+  .dx-#{$widget-name}-invalid {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  // (0,7,1) - (0,9,1)
+  .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-select,
+  .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending).dx-command-select,
+  .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-select {
+    overflow: visible;
+  }
+
+  // #endregion
+
+  // #region sizing
+
+  // (0,1,0)
+  .dx-command-adaptive {
+    width: calc(2 * #{$grid-cell-padding-inline} + #{$global-icon-size});
+    min-width: calc(2 * #{$grid-cell-padding-inline} + #{$global-icon-size});
+  }
+
+  // (0,2,0)
+  .dx-#{$widget-name} .dx-command-drag {
+    width: calc(2 * #{$grid-cell-padding-inline} + #{$global-icon-size});
+    min-width: calc(2 * #{$grid-cell-padding-inline} + #{$global-icon-size});
+  }
+
+  // (0,7,1) - (0,9,1)
+  .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-select,
+  .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending).dx-command-select,
+  .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-select {
+    width: $grid-command-select-column-width;
+    min-width: $grid-command-select-column-width;
+  }
+
+  // (0,7,1) - (0,9,1)
+  .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-edit,
+  .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending).dx-command-edit,
+  .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-edit {
+    width: $grid-command-edit-column-width;
+    min-width: $grid-command-edit-column-width;
+  }
+
+  // (0,8,1) - (0,10,1)
+  .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-edit.dx-command-edit-with-icons,
+  .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending).dx-command-edit.dx-command-edit-with-icons,
+  .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-edit.dx-command-edit-with-icons {
+    width: $grid-command-edit-column-with-icons-width;
+    min-width: $grid-command-edit-column-with-icons-width;
+  }
+
+  // #endregion
+
+  // #region border
+
+  // (0,2,1)
+  .dx-#{$widget-name} .dx-row-lines > td {
+    border-bottom: $grid-border;
+    border-bottom-color: $grid-border-rest;
+  }
+
+  // (0,2,1)
+  .dx-#{$widget-name} .dx-column-lines > td {
+    border-left: $grid-border;
+    border-left-color: $grid-border-rest;
+    border-right: $grid-border;
+    border-right-color: $grid-border-rest;
+  }
+
+  // (0,3,0) - (0,4,0)
+  .dx-#{$widget-name}-rowsview .dx-master-detail-row > .dx-#{$widget-name}-group-space,
+  .dx-#{$widget-name}-rowsview .dx-master-detail-row .dx-master-detail-cell:not(.dx-row-lines) {
+    border-top: $grid-border;
+    border-top-color: $grid-border-rest;
+    border-bottom: $grid-border;
+    border-bottom-color: $grid-border-rest;
+  }
+
+  // (0,3,1)
+  .dx-#{$widget-name}-headers .dx-#{$widget-name}-table .dx-row > td {
+    border-bottom: $grid-border;
+    border-bottom-color: $grid-border-rest;
+  }
+
+  // (0,3,1)
+  .dx-#{$widget-name}-rowsview .dx-row.dx-edit-row > td {
+    border-top: $grid-border;
+    border-top-color: $grid-border-rest;
+    border-bottom: $grid-border;
+    border-bottom-color: $grid-border-rest;
+  }
+
+  // (0,3,1)
+  .dx-#{$widget-name}-rowsview .dx-row-removed.dx-row-lines > td {
+    border-top: $grid-row-lines-border-block-start;
+    border-top-color: $grid-cell-removed-border-rest;
+    border-bottom: $grid-row-lines-border-block-end;
+    border-bottom-color: $grid-cell-removed-border-rest;
+  }
+
+  // (0,3,1)
+  .dx-#{$widget-name}-rowsview .dx-row-removed:not(.dx-row-lines) > td {
+    border-top: $grid-row-lines-border-block-start;
+    border-top-color: $grid-row-bg-hovered;
+  }
+
+  // (0,3,1) - (0,4,2)
+  .dx-#{$widget-name}-rowsview .dx-row-focused:not(.dx-row-lines) > td,
+  .dx-#{$widget-name}-rowsview .dx-row-focused:not(.dx-row-lines) > tr:first-child > td {
+    border-bottom: $grid-row-lines-border-block-end;
+    border-bottom-color: $grid-row-bg-focused;
+  }
+
+  // (0,4,1)
+  .dx-#{$widget-name}-rowsview .dx-row.dx-edit-row:first-child > td {
+    border-top-width: 0;
+    border-bottom: $grid-border;
+    border-bottom-color: $grid-border-rest;
+  }
+
+  // (0,4,1) - (0,5,1)
+  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row-removed.dx-row-lines > td,
+  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row.dx-row-lines.dx-edit-row > td {
+    border-top-width: 0;
+  }
+
+  // (0,5,1) - (0,6,1)
+  .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td.dx-#{$widget-name}-group-space,
+  .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused) > tr > td.dx-#{$widget-name}-group-space,
+  .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > td.dx-#{$widget-name}-group-space,
+  .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > tr > td.dx-#{$widget-name}-group-space {
+    border-right-color: $grid-selection-bg-rest;
+  }
+
+  // (0,5,1) - (0,6,1)
+  .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td.dx-pointer-events-none,
+  .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused) > tr > td.dx-pointer-events-none,
+  .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > td.dx-pointer-events-none,
+  .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > tr > td.dx-pointer-events-none {
+    border-left-color: $grid-row-border-selected;
+    border-right-color: $grid-row-border-selected;
+  }
+
+  // (0,5,1) - (0,6,1)
+  .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):not(.dx-row-lines) > td,
+  .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover:not(.dx-row-lines) > td {
+    border-bottom: $grid-row-lines-border-block-end;
+    border-bottom-color: $grid-selection-bg-rest;
+    border-top: $grid-row-lines-border-block-start;
+    border-top-color: $grid-selection-bg-rest;
+  }
+
+  // (0,5,1) - (0,6,1)
+  .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused).dx-row-lines > td,
+  .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover.dx-row-lines > td {
+    border-bottom-color: $grid-row-border-selected;
+  }
+
+  // (0,7,1)
+  .dx-widget:not(.dx-rtl) .dx-#{$widget-name}-headers.dx-header-multi-row .dx-header-row:not(.dx-column-lines) > td:not(
+    .dx-#{$widget-name}-first-cell,
+    .dx-#{$widget-name}-hidden-column,
+    .dx-command-adaptive-hidden,
+    .dx-#{$widget-name}-sticky-column-border-left,
+    .dx-#{$widget-name}-column-no-border,
+    .dx-pointer-events-none
+  ) {
+    border-left: $grid-row-lines-border-inline-start;
+    border-left-color: $grid-border-rest;
+  }
+
+  // (0,10,1)
+  .dx-rtl .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) > td:not(.dx-focused).dx-#{$widget-name}-group-space {
+    border-left-color: $grid-row-bg-hovered;
+    border-right-color: transparent;
+  }
+
+  // RTL
+
+  // (0,4,1) - (0,5,2)
+  .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row > td,
+  .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row > tr > td,
+  .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row:hover > td,
+  .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row:hover > tr > td {
+    border-right-color: $grid-row-border-selected;
+  }
+
+  // (0,5,1) - (0,6,2)
+  .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row > td.dx-pointer-events-none,
+  .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row > tr > td.dx-pointer-events-none,
+  .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row:hover > td.dx-pointer-events-none,
+  .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row:hover > tr > td.dx-pointer-events-none {
+    border-left-color: $grid-row-border-selected;
+  }
+
+  // (0,6,1)
+  .dx-rtl .dx-#{$widget-name}-headers.dx-header-multi-row .dx-header-row:not(.dx-column-lines) > td:not(
+    .dx-#{$widget-name}-first-cell,
+    .dx-#{$widget-name}-hidden-column,
+    .dx-command-adaptive-hidden,
+    .dx-#{$widget-name}-sticky-column-border-right,
+    .dx-#{$widget-name}-column-no-border,
+    .dx-pointer-events-none
+  ) {
+    border-right: $grid-cell-border-inline-end;
+    border-right-color: $grid-border-rest;
+  }
+
+  // (0,6,1) - (0,7,2)
+  .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row > td:not(.dx-focused).dx-#{$widget-name}-group-space,
+  .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row > tr > td:not(.dx-focused).dx-#{$widget-name}-group-space,
+  .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row:hover > td:not(.dx-focused).dx-#{$widget-name}-group-space,
+  .dx-rtl .dx-#{$widget-name}-rowsview .dx-selection.dx-row:hover > tr > td:not(.dx-focused).dx-#{$widget-name}-group-space {
+    border-left-color: $grid-selection-bg-rest;
+  }
+
+  // #endregion
+
+  // #region border-radius
+
+  // (0,4,1)
+  .dx-#{$widget-name} .dx-#{$widget-name}-table .dx-header-row > td:first-child {
+    border-top-left-radius: $grid-border-radius;
+  }
+
+  // (0,4,1)
+  .dx-#{$widget-name} .dx-#{$widget-name}-table .dx-header-row > td:last-child {
+    border-top-right-radius: $grid-border-radius;
+  }
+
+  // #endregion
+
+  // #region padding
+
+  // (0,1,0)
+  .dx-cell-modified,
+  .dx-#{$widget-name}-invalid {
+    padding: $grid-cell-padding-block 0 $grid-cell-padding-block 0;
+  }
+
+  // (0,1,0)
+  .dx-editor-cell {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  // (0,2,1)
+  .dx-#{$widget-name} .dx-row > td {
+    padding: $grid-cell-padding-block $grid-cell-padding-inline;
+  }
+
+  // (0,2,1)
+  .dx-#{$widget-name}-rowsview td.dx-validation-pending {
+    padding: 0;
+  }
+
+  // (0,3,0)
+  .dx-#{$widget-name}-rowsview .dx-master-detail-row > .dx-master-detail-cell {
+    padding: $grid-master-detail-padding;
+  }
+
+  // (0,3,1)
+  .dx-#{$widget-name} .dx-#{$widget-name}-table .dx-header-row > td {
+    padding-top: $grid-header-cell-padding-block;
+    padding-bottom: $grid-header-cell-padding-block;
+  }
+
+  // (0,3,1)
+  .dx-#{$widget-name} .dx-#{$widget-name}-table .dx-#{$widget-name}-filter-row > td {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  // (0,3,1)
+  .dx-#{$widget-name}-rowsview td.dx-validation-pending.dx-cell-modified,
+  .dx-#{$widget-name}-rowsview td.dx-validation-pending .dx-#{$widget-name}-invalid {
+    padding: $grid-cell-padding;
+    padding-right: textEditorSizes.$text-editor-invalid-badge-size;
+  }
+
+  // (0,4,0)
+  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-master-detail-row > .dx-master-detail-cell {
+    padding: 0;
+  }
+
+  // (0,4,1)
+  .dx-rtl.dx-#{$widget-name}-rowsview td.dx-validation-pending.dx-cell-modified,
+  .dx-rtl.dx-#{$widget-name}-rowsview td.dx-validation-pending .dx-#{$widget-name}-invalid,
+  .dx-rtl .dx-#{$widget-name}-rowsview td.dx-validation-pending.dx-cell-modified,
+  .dx-rtl .dx-#{$widget-name}-rowsview td.dx-validation-pending .dx-#{$widget-name}-invalid {
+    padding-left: textEditorSizes.$text-editor-invalid-badge-size;
+    padding-right: $grid-cell-padding-inline;
+  }
+
+  // (0,5,1)
+  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-data-row:not(.dx-row-lines, .dx-edit-row, .dx-selection, .dx-row-focused, .dx-row-removed) > td:not(.dx-editor-cell, .dx-master-detail-cell) {
+    padding-top: calc(#{$grid-cell-padding-block} + 1px);
+  }
+
+  // (0,5,1)
+  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row.dx-edit-row > td.dx-command-edit {
+    padding-top: calc(#{$grid-cell-padding-block} - 1px);
+  }
+
+  // (0,6,1)
+  .dx-#{$widget-name}-headers.dx-header-multi-row .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row.dx-header-row > td {
+    padding-top: $grid-header-row-padding-block-start;
+    padding-bottom: $grid-header-row-padding-block-end;
+  }
+
+  // (0,6,1)
+  .dx-row.dx-group-row + .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-data-row td:not(.dx-command-expand, .dx-editor-cell),
+  .dx-row.dx-master-detail-row + .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-data-row td:not(.dx-command-expand, .dx-editor-cell) {
+    padding-top: $grid-cell-padding-block;
+  }
+
+  // (0,7,0)
+  .dx-#{$widget-name}-headers.dx-header-multi-row .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row.dx-header-row .dx-command-select {
+    padding-bottom: calc((#{$grid-header-height} - #{$grid-checkbox-size}) / 2);
+  }
+
+  // (0,8,1) T1303478
+  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row.dx-selection:not(.dx-edit-row):not(.dx-row-lines):not(.dx-group-row) > td:not(.dx-editor-cell, .dx-master-detail-cell),
+  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row.dx-row-focused:not(.dx-edit-row):not(.dx-row-lines):not(.dx-group-row) > td:not(.dx-editor-cell, .dx-master-detail-cell) {
+    padding-bottom: calc(#{$grid-cell-padding-block} - 1px);
+  }
+
+  // (0,7,1) - (0,9,1)
+  .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-expand,
+  .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all) .dx-#{$widget-name}-group-space,
+  .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending).dx-command-expand,
+  .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending) .dx-#{$widget-name}-group-space,
+  .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-expand,
+  .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all) .dx-#{$widget-name}-group-space {
+    padding: $grid-validation-pending-padding;
+  }
+
+  // (0,8,1) - (0,10,1)
+  .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-editor-cell:not(.dx-command-select),
+  .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending).dx-editor-cell:not(.dx-command-select),
+  .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-editor-cell:not(.dx-command-select) {
+    padding-right: 0;
+  }
+
+  // (0,9,1) - (0,11,1)
+  .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-editor-cell:not(.dx-command-select):not(.dx-#{$widget-name}-cell-expandable),
+  .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending).dx-editor-cell:not(.dx-command-select):not(.dx-#{$widget-name}-cell-expandable),
+  .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-editor-cell:not(.dx-command-select):not(.dx-#{$widget-name}-cell-expandable) {
+    padding-left: 0;
+  }
+
+  // #endregion
+
+  // #region background
+
+  // (0,2,1)
+  .dx-#{$widget-name} .dx-row-alt > td {
+    background-color: $grid-row-alternation-bg-rest;
+  }
+
+  // (0,2,1)
+  .dx-#{$widget-name} .dx-#{$widget-name}-drop-highlight > td {
+    background-color: $grid-drop-highlight-bg-rest;
+  }
+
+  // (0,2,1)
+  .dx-#{$widget-name}-rowsview .dx-row-removed > td {
+    background-color: $grid-row-removed-bg-rest;
+  }
+
+  // (0,4,0)
+  .dx-#{$widget-name}-rowsview .dx-master-detail-row:not(.dx-#{$widget-name}-edit-form) > .dx-#{$widget-name}-group-space,
+  .dx-#{$widget-name}-rowsview .dx-master-detail-row:not(.dx-#{$widget-name}-edit-form) .dx-master-detail-cell {
+    background-color: $grid-master-detail-cell-bg-rest;
+  }
+
+  // (0,4,0) - (0,6,0)
+  .dx-#{$widget-name}-rowsview .dx-data-row:not(.dx-edit-row) .dx-cell-modified,
+  .dx-#{$widget-name}-rowsview .dx-adaptive-detail-row:not(.dx-edit-row) .dx-cell-modified,
+  .dx-#{$widget-name}-rowsview .dx-data-row.dx-selection:not(.dx-edit-row) .dx-cell-modified,
+  .dx-#{$widget-name}-rowsview .dx-adaptive-detail-row.dx-selection:not(.dx-edit-row) .dx-cell-modified,
+  .dx-#{$widget-name}-rowsview .dx-data-row.dx-selection:hover:not(.dx-edit-row) .dx-cell-modified,
+  .dx-#{$widget-name}-rowsview .dx-adaptive-detail-row.dx-selection:hover:not(.dx-edit-row) .dx-cell-modified {
+    background-color: $grid-cell-modified-bg-rest;
+  }
+
+  // (0,4,1)
+  .dx-#{$widget-name}-headers.dx-#{$widget-name}-sticky-columns .dx-#{$widget-name}-filter-row > td.dx-#{$widget-name}-sticky-column,
+  .dx-#{$widget-name}-headers.dx-#{$widget-name}-sticky-columns .dx-#{$widget-name}-filter-row > td.dx-#{$widget-name}-sticky-column-left,
+  .dx-#{$widget-name}-headers.dx-#{$widget-name}-sticky-columns .dx-#{$widget-name}-filter-row > td.dx-#{$widget-name}-sticky-column-right {
+    background-color: $grid-filter-row-bg-rest;
+  }
+
+  // (0,4,1) - (0,5,2)
+  .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td,
+  .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused) > tr > td,
+  .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > td,
+  .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > tr > td {
+    background-color: $grid-selection-bg-rest;
+  }
+
+  // (0,5,1)
+  .dx-#{$widget-name}-headers .dx-#{$widget-name}-table .dx-row > td:not([class*="dx-command"], .dx-editor-cell, .dx-#{$widget-name}-group-space):hover {
+    background-color: $grid-row-bg-hovered;
+  }
+
+  // (0,6,1)
+  .dx-#{$widget-name}-rowsview .dx-row-focused.dx-data-row > td:not(.dx-focused):not(.dx-cell-modified):not(.dx-#{$widget-name}-invalid) {
+    background-color: $grid-row-bg-focused;
+  }
+
+  // (0,7,1) - (0,7,2)
+  .dx-#{$widget-name}-rowsview .dx-row-focused.dx-data-row.dx-edit-row > td.dx-editor-cell:not(.dx-command-select):not(.dx-#{$widget-name}-invalid),
+  .dx-#{$widget-name}-rowsview .dx-row-focused.dx-data-row.dx-edit-row > tr > td.dx-editor-cell:not(.dx-command-select):not(.dx-#{$widget-name}-invalid) {
+    background-color: $grid-bg-rest;
+  }
+
+  // (0,8,1)
+  .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) > td:not(.dx-focused) {
+    background-color: $grid-row-bg-hovered;
+  }
+
+  // (0,8,1)
+  .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) > td.dx-pointer-events-none {
+    background-color: transparent;
+  }
+
+  // #endregion
+
+  // #region color
+
+  // (0,2,1)
+  .dx-#{$widget-name} .dx-#{$widget-name}-drop-highlight > td {
+    color: $grid-drop-highlight-content-rest;
+  }
+
+  // (0,2,1)
+  .dx-#{$widget-name}-rowsview .dx-row-removed > td {
+    color: $grid-cell-removed-content-rest;
+  }
+
+  // (0,4,1) - (0,5,2)
+  .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td,
+  .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused) > tr > td,
+  .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > td,
+  .dx-#{$widget-name}-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > tr > td {
+    color: $grid-row-content-selected;
+  }
+
+  // (0,6,1)
+  .dx-#{$widget-name}-rowsview .dx-row-focused.dx-data-row > td:not(.dx-focused):not(.dx-cell-modified):not(.dx-#{$widget-name}-invalid) {
+    color: $grid-row-content-focused;
+  }
+
+  // (0,7,1)
+  .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) > td {
+    color: $grid-row-content-hovered;
+  }
+
+  // (0,7,1) - (0,7,2)
+  .dx-#{$widget-name}-rowsview .dx-row-focused.dx-data-row.dx-edit-row > td.dx-editor-cell:not(.dx-command-select):not(.dx-#{$widget-name}-invalid),
+  .dx-#{$widget-name}-rowsview .dx-row-focused.dx-data-row.dx-edit-row > tr > td.dx-editor-cell:not(.dx-command-select):not(.dx-#{$widget-name}-invalid) {
+    color: $grid-content-rest;
+  }
+
+  // #endregion
+
+  // #region typography
+
+  // (0,2,1)
+  .dx-#{$widget-name} .dx-row > td {
+    font-size: $grid-cell-font-size;
+    line-height: $grid-cell-line-height;
+  }
+
+  // (0,3,1)
+  .dx-#{$widget-name}-headers .dx-#{$widget-name}-table .dx-row > td {
+    line-height: $grid-header-line-height;
+    font-weight: $grid-column-chooser-font-weight;
+    font-size: $grid-header-cell-font-size;
+  }
+
+  // (0,7,1) - (0,9,1)
+  .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-select,
+  .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending).dx-command-select,
+  .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-select {
+    line-height: 1;
+  }
+
+  // (0,7,1) - (0,9,1)
+  .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-expand,
+  .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all) .dx-#{$widget-name}-group-space,
+  .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending).dx-command-expand,
+  .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending) .dx-#{$widget-name}-group-space,
+  .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-expand,
+  .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all) .dx-#{$widget-name}-group-space {
+    line-height: 0;
+  }
+
+  // #endregion
+
+  // #region vertical-align
+
+  // (0,6,1) - (0,8,1)
+  .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all),
+  .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending),
+  .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all) {
+    vertical-align: middle;
+  }
+
+  // (0,6,1)
+  .dx-#{$widget-name}-headers.dx-header-multi-row .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row.dx-header-row > td {
+    vertical-align: bottom;
+  }
+
+  // #endregion
+
+  // #region position
+
+  // (0,2,1)
+  .dx-#{$widget-name}-rowsview td.dx-validation-pending {
+    position: relative;
+  }
+
+  // #endregion
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_colors.scss
new file mode 100644
index 000000000000..58faab825d7e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_colors.scss
@@ -0,0 +1,22 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$html-editor-toolbar-border-rest: ds.$color-border-neutral-subdued-rest !default;
+$html-editor-variable-bg-rest: ds.$color-surface-primary-alpha-hovered !default;
+$html-editor-resize-frame-border-rest: ds.$color-border-primary-default-rest !default;
+$html-editor-resize-trigger-rest: ds.$color-surface-primary-default-rest !default;
+$html-editor-mention-bg-rest: ds.$color-surface-neutral-default-selected !default;
+$html-editor-table-border-rest: ds.$color-border-neutral-default-rest !default;
+$html-editor-file-uploader-input-wrapper-border-rest: ds.$color-border-neutral-default-rest !default;
+$html-editor-file-uploader-input-wrapper-bg-rest: ds.$color-surface-neutral-subdued-rest !default;
+
+// Color computations hoisted from style files (phase 0.5 layer normalization)
+$html-editor-cover-bg-rest: rgb(from #{ds.$color-surface-neutral-default-rest} r g b / 0.4) !default;
+$html-editor-faded-content-rest: rgb(from #{ds.$color-content-neutral-default-rest} r g b / 0.8) !default;
+$html-editor-uploader-cover-bg-rest: rgb(from #{ds.$color-border-neutral-default-rest} r g b / 0.8) !default;
+$html-editor-highlighted-row-bg-rest: ds.$color-surface-primary-alpha-active !default;
+
+// Base-layer values injected with design tokens (wave B1)
+$html-editor-code-block-bg-rest: rgb(from #{ds.$color-content-neutral-subdued-rest} r g b / 0.15) !default;
+$html-editor-placeholder-content-rest: ds.$color-content-neutral-deep-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_index.scss
new file mode 100644
index 000000000000..247362e20739
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_index.scss
@@ -0,0 +1,331 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../button/sizes" as buttonSizes;
+@use "../textEditor/colors" as textEditorColors;
+@use "../textEditor/index" as *;
+@use "../toolbar/sizes" as toolbarSizes;
+@use "../common/mixins" as *;
+@use "../common/sizes" as *;
+@use "../fileUploader/sizes" as fileUploaderSizes;
+@use "../popup/sizes" as popupSizes;
+@use "../../base/mixins" as *;
+@use "../../base/htmlEditor" with (
+  $htmleditor-code-block-bg: $html-editor-code-block-bg-rest,
+  $htmleditor-placeholder-color: $html-editor-placeholder-content-rest,
+  $htmleditor-aidialog-title-font-weight: $html-editor-ai-dialog-title-font-weight,
+);
+
+// adduse
+
+.dx-htmleditor {
+  border-color: transparent;
+  position: relative;
+
+  .dx-htmleditor-toolbar-wrapper {
+    padding: 0 $html-editor-toolbar-padding;
+    position: relative;
+  }
+
+  &::before {
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 0;
+    width: 100%;
+    content: '';
+    position: absolute;
+    z-index: 2;
+    transform: scale(0);
+  }
+
+  &.dx-state-readonly,
+  &.dx-state-disabled {
+    .dx-htmleditor-toolbar-wrapper::before {
+      position: absolute;
+      top: $html-editor-toolbar-wrapper-inset-block-start;
+      bottom: $html-editor-toolbar-wrapper-inset-block-end;
+      left: $html-editor-toolbar-wrapper-inset-inline-start;
+      right: $html-editor-toolbar-wrapper-inset-inline-end;
+      z-index: 2;
+      background-color: $html-editor-cover-bg-rest;
+      content: '';
+      pointer-events: none;
+    }
+  }
+
+  &.dx-state-focused,
+  &.dx-state-active {
+    &::before {
+      border-bottom: $html-editor-border-block-end-active;
+      border-bottom-color: textEditorColors.$text-editor-indicator-rest;
+      transform: scale(1);
+      transition-property: transform;
+      transition-duration: 0.2s;
+      transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+    }
+  }
+
+  &.dx-htmleditor-outlined {
+    @include texteditor-outlined-styling();
+
+    .dx-htmleditor-content {
+      margin: $html-editor-content-margin;
+      margin-inline-start: 0;
+    }
+
+    .dx-htmleditor-toolbar-wrapper + .dx-quill-container .dx-htmleditor-content {
+      margin-top: 0;
+    }
+  }
+
+  &.dx-htmleditor-filled {
+    @include texteditor-filled-styling();
+  }
+
+  &.dx-htmleditor-underlined {
+    &::after {
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 0;
+      width: 100%;
+      content: '';
+      position: absolute;
+    }
+
+    @include texteditor-underlined-styling();
+
+    .dx-htmleditor-content {
+      padding-inline-start: 0;
+    }
+  }
+
+  &.dx-state-disabled {
+    opacity: 1;
+  }
+}
+
+.dx-invalid.dx-htmleditor {
+  &.dx-state-hover {
+    &::after {
+      border-bottom-color: textEditorColors.$text-editor-invalid-border-rest;
+    }
+  }
+
+  &.dx-state-focused,
+  &.dx-state-active {
+    &::before {
+      border-bottom: $html-editor-border-block-end-active;
+      border-bottom-color: textEditorColors.$text-editor-invalid-border-focused;
+    }
+  }
+}
+
+.dx-htmleditor-content {
+  line-height: $global-line-height;
+  padding: $html-editor-padding-block $html-editor-padding-inline;
+
+  &.ql-blank::before { // stylelint-disable-line selector-class-pattern
+    color: textEditorColors.$text-editor-placeholder-rest;
+  }
+
+  code,
+  .ql-code-block-container { // stylelint-disable-line selector-class-pattern
+    color: $html-editor-faded-content-rest;
+  }
+
+  blockquote {
+    color: $html-editor-faded-content-rest;
+    border-inline-start-color: $html-editor-toolbar-border-rest;
+  }
+
+  .dx-variable {
+    & > span {
+      background: $html-editor-variable-bg-rest;
+    }
+  }
+
+  td,
+  th {
+    border-color: $html-editor-table-border-rest;
+  }
+}
+
+@mixin dx-htmleditor-button-states($default-color, $hover-color, $focused-color) {
+  background-color: $default-color;
+
+  &.dx-state-hover {
+    background-color: $hover-color;
+  }
+
+  &.dx-state-focused {
+    background-color: $focused-color;
+  }
+}
+
+.dx-htmleditor-toolbar {
+  background-color: transparent;
+}
+
+.dx-htmleditor-toolbar-format {
+  &.dx-dropdowneditor.dx-editor-filled {
+    background-color: transparent;
+
+    &::after {
+      border-bottom-color: transparent;
+    }
+  }
+
+  &.dx-color-format,
+  &.dx-background-format {
+    .dx-button-content {
+      padding-bottom: calc(#{buttonSizes.$button-padding-block} - 3px);
+    }
+  }
+
+  &.dx-size-format {
+    width: $html-editor-toolbar-size-editor-width;
+  }
+}
+
+.dx-htmleditor-toolbar-separator {
+  height: calc((#{toolbarSizes.$toolbar-height}) / 2);
+  border-inline-start-color: $html-editor-toolbar-border-rest;
+}
+
+.dx-htmleditor-toolbar-menu-separator {
+  border-top-color: $html-editor-toolbar-border-rest;
+  margin-top: $html-editor-toolbar-menu-separator-margin;
+  margin-bottom: $html-editor-toolbar-menu-separator-margin;
+}
+
+.dx-resize-frame {
+  border-color: $html-editor-resize-frame-border-rest;
+
+  .dx-resizable-handle-corner-top-right,
+  .dx-resizable-handle-corner-top-left,
+  .dx-resizable-handle-corner-bottom-right,
+  .dx-resizable-handle-corner-bottom-left {
+    background-color: $html-editor-resize-trigger-rest;
+  }
+
+  .dx-resizable-handle-top,
+  .dx-resizable-handle-left,
+  .dx-resizable-handle-right,
+  .dx-resizable-handle-bottom {
+    &::after {
+      background-color: $html-editor-resize-trigger-rest;
+    }
+  }
+}
+
+.dx-htmleditor-add-image-popup > .dx-overlay-content > .dx-popup-content {
+  .dx-collection .dx-field-item:not(.dx-last-col) {
+    padding-inline-end: $html-editor-add-image-dialog-padding-inline-end;
+  }
+
+  .dx-fix-ratio-container {
+    .dx-textbox {
+      width: calc(100% - buttonSizes.$button-height - $html-editor-add-image-dialog-padding-inline-end);
+    }
+
+    .dx-buttongroup {
+      margin-inline-start: $html-editor-add-image-dialog-padding-inline-end;
+      width: buttonSizes.$button-height;
+      margin-top: calc((#{$global-inline-widget-height} - #{buttonSizes.$button-height}) / 2);
+    }
+  }
+
+  .dx-collection .dx-field-item:not(.dx-first-col) {
+    padding-inline-start: 0;
+  }
+
+  .dx-tabs {
+    padding: 0 $html-editor-add-image-dialog-tabs-padding;
+  }
+
+  .dx-fileuploader-input-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: $html-editor-input-wrapper-gap;
+    padding: $html-editor-add-image-dialog-file-uploader-padding;
+    border-width: $html-editor-file-uploader-input-wrapper-border-width;
+    border-style: dashed;
+    border-color: $html-editor-file-uploader-input-wrapper-border-rest;
+    border-radius: $html-editor-file-uploader-input-wrapper-border-radius;
+    background-color: $html-editor-file-uploader-input-wrapper-bg-rest;
+
+    &::after,
+    &::before {
+      content: none;
+    }
+
+    .dx-fileuploader-input-label {
+      text-align: center;
+      border-width: 0;
+    }
+  }
+}
+
+.dx-htmleditor-add-image-popup {
+  .dx-fileuploader-dragover {
+    .dx-fileuploader-input {
+      padding-top: fileUploaderSizes.$file-uploader-padding-block;
+      padding-bottom: calc(#{fileUploaderSizes.$file-uploader-padding-block} + 1px);
+    }
+
+    .dx-fileuploader-content {
+      background-color: $html-editor-uploader-cover-bg-rest;
+    }
+  }
+}
+
+.dx-formdialog-field-target .dx-field-item-content {
+  text-align: start;
+}
+
+.dx-mention {
+  background-color: $html-editor-mention-bg-rest;
+}
+
+.dx-suggestion-list-wrapper {
+  @include dx-dropdownlist-list-appearance();
+}
+
+.dx-table-resize-frame {
+  > .dx-draggable-dragging + .dx-htmleditor-highlighted-column,
+  > .dx-draggable-dragging + .dx-htmleditor-highlighted-row {
+    background-color: $html-editor-highlighted-row-bg-rest;
+  }
+}
+
+.dx-formdialog.dx-dropdowneditor-overlay.dx-popup-wrapper .dx-overlay-content {
+  box-shadow: popupSizes.$popup-content-box-shadow;
+}
+
+.dx-aidialog-controls {
+  gap: $html-editor-ai-dialog-selects-gap;
+
+  .dx-selectbox {
+    max-width: calc(50% - $html-editor-ai-dialog-selects-gap * 0.5);
+  }
+}
+
+.dx-aidialog-content {
+  padding: $html-editor-ai-dialog-content-padding;
+  gap: $html-editor-ai-dialog-content-gap;
+}
+
+.dx-aidialog {
+  .dx-pending-indicator {
+    @include dx-pending-indicator-centered();
+  }
+
+  &.dx-popup-wrapper > .dx-overlay-content {
+    border-radius: $html-editor-ai-dialog-border-radius;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_sizes.scss
new file mode 100644
index 000000000000..1e9884f56095
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_sizes.scss
@@ -0,0 +1,58 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+// Moved here from the theme root: this component owns it (NAMING.md O1)
+$html-editor-add-image-dialog-padding-inline-end: ds.$spacing-50 !default;
+
+$html-editor-toolbar-size-editor-width: null !default;
+$html-editor-padding-block: null !default;
+$html-editor-padding-inline: null !default;
+$html-editor-add-image-dialog-file-uploader-padding: null !default;
+$html-editor-toolbar-menu-separator-margin: ds.$spacing-40 !default;
+$html-editor-file-uploader-input-wrapper-border-radius: ds.$border-radius-80 !default;
+$html-editor-file-uploader-input-wrapper-border-width: 1.5px !default; // dx-offscale: 1.5px
+$html-editor-add-image-dialog-tabs-padding: null !default;
+$html-editor-ai-dialog-selects-gap: null !default;
+$html-editor-ai-dialog-content-gap: null !default;
+$html-editor-ai-dialog-content-padding: null !default;
+$html-editor-ai-dialog-border-radius: null !default;
+
+@if $size == "default" {
+  $html-editor-toolbar-size-editor-width: ds.$spacing-1200 !default;
+  $html-editor-padding-block: ds.$spacing-160 !default;
+  $html-editor-padding-inline: ds.$spacing-160 !default;
+  $html-editor-add-image-dialog-file-uploader-padding: ds.$spacing-480 0 ds.$spacing-240 !default;
+  $html-editor-add-image-dialog-tabs-padding: ds.$spacing-140 !default;
+  $html-editor-ai-dialog-selects-gap: ds.$spacing-80 !default;
+  $html-editor-ai-dialog-content-gap: ds.$spacing-160 !default;
+  $html-editor-ai-dialog-content-padding: ds.$spacing-160 ds.$spacing-240 !default;
+  $html-editor-ai-dialog-border-radius: calc(#{$global-border-radius} * 2) !default;
+}
+
+@else if $size == "compact" {
+  $html-editor-toolbar-size-editor-width: 90px !default; // dx-offscale: 90px
+  $html-editor-padding-block: ds.$spacing-120 !default;
+  $html-editor-padding-inline: ds.$spacing-120 !default;
+  $html-editor-add-image-dialog-file-uploader-padding: ds.$spacing-400 0 ds.$spacing-180 !default;
+  $html-editor-add-image-dialog-tabs-padding: ds.$spacing-80 !default;
+  $html-editor-ai-dialog-selects-gap: ds.$spacing-40 !default;
+  $html-editor-ai-dialog-content-gap: ds.$spacing-120 !default;
+  $html-editor-ai-dialog-content-padding: ds.$spacing-120 ds.$spacing-160 !default;
+  $html-editor-ai-dialog-border-radius: $global-border-radius !default;
+}
+
+$html-editor-toolbar-padding: $html-editor-padding-inline !default;
+
+// Values hoisted from style-file literals (tokenized)
+$html-editor-toolbar-wrapper-inset-block-start: ds.$spacing-10 !default;
+$html-editor-toolbar-wrapper-inset-block-end: ds.$spacing-10 !default;
+$html-editor-toolbar-wrapper-inset-inline-start: ds.$spacing-10 !default;
+$html-editor-toolbar-wrapper-inset-inline-end: ds.$spacing-10 !default;
+$html-editor-content-margin: ds.$spacing-10 !default;
+$html-editor-input-wrapper-gap: ds.$spacing-80 !default;
+$html-editor-border-block-end-active: ds.$border-width-20 solid !default;
+
+// Base-layer values injected with design tokens (wave B1)
+$html-editor-ai-dialog-title-font-weight: ds.$font-weight-title-default !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/icons/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/icons/_colors.scss
new file mode 100644
index 000000000000..c728d89253c8
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/icons/_colors.scss
@@ -0,0 +1,6 @@
+@use "../scrollView/colors" as scrollViewColors;
+
+// adduse
+
+// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
+$icon-pulldown-bg-rest: scrollViewColors.$scroll-view-pull-down-bg-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/icons/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/icons/_index.scss
new file mode 100644
index 000000000000..c9c643b54e98
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/icons/_index.scss
@@ -0,0 +1,46 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+
+// adduse
+
+
+@include dx-font-icons("dxiconsfluent", "DevExtreme Fluent Icons", "devextreme_fluent_icons", optimizeLegibility);
+
+.dx-icon {
+  font-size: $global-icon-size;
+  line-height: 1;
+  white-space: nowrap;
+  font-feature-settings: 'liga';
+}
+
+.dx-tab {
+  .dx-icon,
+  &.dx-tab-selected .dx-icon {
+    background-size: 100% 100%;
+    background-position: 50% 50%;
+  }
+}
+
+.dx-scrollview-pulldown {
+  background-image: $icon-pulldown-bg-rest;
+  background-position: 0 0;
+  background-repeat: no-repeat;
+}
+
+.dx-loadindicator-image {
+  background-position: center center;
+  background-repeat: no-repeat;
+}
+
+.dx-loadindicator-image-small {
+  background-position: center center;
+  background-repeat: no-repeat;
+}
+
+.dx-loadindicator-image-large {
+  background-position: center center;
+  background-repeat: no-repeat;
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/icons/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/icons/_sizes.scss
new file mode 100644
index 000000000000..43b104010f9e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/icons/_sizes.scss
@@ -0,0 +1,4 @@
+@use "../sizes" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/informer/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/informer/_colors.scss
new file mode 100644
index 000000000000..5cd197d94cdc
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/informer/_colors.scss
@@ -0,0 +1,8 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$informer-error-content-rest: ds.$color-content-danger-default-rest !default;
+$informer-error-bg-rest: ds.$color-surface-danger-deep-rest !default;
+$informer-info-content-rest: ds.$color-content-neutral-default-rest !default;
+$informer-info-bg-rest: ds.$color-surface-neutral-subdued-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/informer/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/informer/_index.scss
new file mode 100644
index 000000000000..a80d508ee205
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/informer/_index.scss
@@ -0,0 +1,18 @@
+@use "../../base/informer";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/informer/mixins" as *;
+
+// adduse
+
+@include informer(
+  $informer-error-content-rest,
+  $informer-error-bg-rest,
+  $informer-info-content-rest,
+  $informer-info-bg-rest,
+  $informer-border-radius,
+  $informer-icon-size,
+  $informer-padding-inline,
+  $informer-padding-block,
+  $informer-column-gap,
+);
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/informer/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/informer/_sizes.scss
new file mode 100644
index 000000000000..18139bd8bd7e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/informer/_sizes.scss
@@ -0,0 +1,25 @@
+@use "../common/sizes" as *;
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$informer-icon-size: $global-icon-size !default;
+$informer-padding-inline: null !default;
+$informer-padding-block: null !default;
+$informer-column-gap: null !default;
+$informer-border-radius: null !default;
+
+@if $size == "default" {
+  $informer-padding-inline: ds.$spacing-120 !default;
+  $informer-padding-block: ds.$spacing-80 !default;
+  $informer-column-gap: ds.$spacing-60 !default;
+  $informer-border-radius: ds.$border-radius-40 !default;
+}
+
+@else if $size == "compact" {
+  $informer-padding-inline: ds.$spacing-80 !default;
+  $informer-padding-block: ds.$spacing-40 !default;
+  $informer-column-gap: ds.$spacing-40 !default;
+  $informer-border-radius: ds.$border-radius-30 !default;
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/list/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/list/_colors.scss
new file mode 100644
index 000000000000..51595eea0873
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/list/_colors.scss
@@ -0,0 +1,62 @@
+@use "../colors" as *;
+@use "../button/colors" as buttonColors;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$list-normal-content-rest: ds.$color-content-neutral-default-rest !default;
+
+$list-border-rest: ds.$color-border-neutral-default-rest !default;
+
+$list-group-header-bg-rest: transparent !default;
+
+$list-item-bg-hovered: ds.$color-surface-neutral-default-hovered !default;
+
+$list-item-bg-selected: ds.$color-surface-neutral-default-selected !default;
+$list-item-bg-selected-hovered: ds.$color-surface-neutral-default-selected-hovered !default;
+$list-item-bg-selected-focused: ds.$color-surface-neutral-default-active !default;
+$list-item-content-hovered: ds.$color-content-neutral-default-rest !default;
+$list-header-indicator-content-rest: ds.$color-content-neutral-subdued-rest !default;
+
+$list-item-bg-active: ds.$color-surface-neutral-default-active !default;
+$list-hold-menu-bg-rest: ds.$color-surface-neutral-default-rest !default;
+$list-hold-menu-border-rest: $list-border-rest !default;
+$list-hold-menu-shadow-rest: ds.$color-shadow-ambient !default;
+$list-menu-button-default-content-rest: buttonColors.$button-default-contained-content-rest !default;
+$list-menu-button-default-bg-rest: buttonColors.$button-default-contained-bg-rest !default;
+$list-menu-button-delete-bg-rest: ds.$color-surface-danger-default-rest !default;
+$list-item-ghost-bg-rest: ds.$color-surface-neutral-default-rest !default;
+$list-item-ghost-content-rest: ds.$color-content-neutral-subdued-rest !default;
+$list-item-ghost-border-rest: ds.$color-border-primary-default-rest !default;
+$list-icon-rest: ds.$color-content-neutral-subdued-rest !default;
+
+/*
+ * toggle-delete is an SVG data-uri image: the color is baked into the background-image at
+ * build time. CSS var() tokens do NOT resolve inside a data-uri (they render black), so the
+ * value below is the static per-mode equivalent of the ds.$ token named in the marker.
+ * See DIVERGENCES.md.
+ */
+$list-toggle-delete-icon-rest: null !default;
+
+@if $mode == "light" {
+  $list-toggle-delete-icon-rest: #444 !default; // dx-data-uri-static: ds.$color-content-neutral-subdued-rest
+}
+
+@if $mode == "dark" {
+  $list-toggle-delete-icon-rest: #cbcbcb !default; // dx-data-uri-static: ds.$color-content-neutral-subdued-rest
+}
+
+$list-base-select-all-separator-bg-rest: ds.$color-border-neutral-subdued-rest !default;
+
+$list-group-content-rest: ds.$color-content-neutral-default-rest !default;
+
+$list-expanded-group-content-rest: $list-group-content-rest !default;
+$list-item-content-selected: $list-normal-content-rest !default;
+
+$list-border-disabled: ds.$color-border-neutral-default-disabled !default;
+$list-content-disabled: ds.$color-content-neutral-default-disabled !default;
+$list-inverted-content-rest: ds.$color-content-neutral-default-static-dark-rest !default;
+
+// Values hoisted from style-file literals (tokenized)
+
+// Base-layer values injected with design tokens (wave B1)
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/list/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/list/_index.scss
new file mode 100644
index 000000000000..873281a3445f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/list/_index.scss
@@ -0,0 +1,532 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../button/mixins" as *;
+@use "../checkBox/colors" as checkBoxColors;
+@use "../textEditor/sizes" as textEditorSizes;
+@use "../button/sizes" as buttonSizes;
+@use "../../base/list" as baseList with (
+  $list-item-badge-container-width: $list-item-badge-container-width,
+  $list-slide-menu-button-padding: $list-slide-menu-button-padding,
+  $list-static-delete-button-padding: $list-delete-button-static-padding,
+  $list-next-button-padding: $list-next-button-padding,
+  $list-response-wait-opacity: $list-response-wait-opacity,
+);
+@use "../../base/list/mixins" as *;
+@use "../radioButton/colors" as radioButtonColors;
+
+// adduse
+@use "../badge";
+
+.dx-state-disabled {
+  &.dx-list {
+    opacity: 1;
+
+    .dx-list-item {
+      opacity: 1;
+      color: $list-content-disabled;
+    }
+  }
+
+  .dx-list-select-all-label {
+    color: $list-content-disabled;
+
+    &::after {
+      color: $list-border-disabled;
+    }
+  }
+
+  .dx-list-item-chevron {
+    color: $list-content-disabled;
+  }
+
+  .dx-list-reorder-handle {
+    &::before {
+      color: $list-content-disabled;
+    }
+  }
+}
+
+.dx-list-item-chevron-container {
+  padding-inline: $list-item-padding-block;
+}
+
+.dx-list-item-chevron {
+  @include dx-icon(chevronnext);
+  @include dx-icon-sizing($global-icon-size);
+
+  display: flex;
+  align-items: center;
+  color: $list-icon-rest;
+}
+
+.dx-list-item-badge-container {
+  padding-inline-end: $list-item-padding-inline;
+}
+
+.dx-list-item-icon-container {
+  width: calc(#{$global-icon-size} + #{$list-item-padding-inline});
+  height: $global-icon-size;
+  vertical-align: bottom;
+}
+
+.dx-list-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dx-list-item-icon {
+  @include dx-icon-sizing($global-icon-size);
+}
+
+.dx-list-select-all,
+.dx-list-item,
+.dx-list-group-header {
+  position: relative;
+}
+
+.dx-list-group-body {
+  display: flex;
+  flex-direction: column;
+  row-gap: $list-item-gap;
+}
+
+.dx-list {
+  .dx-list-group-header-indicator {
+    display: none;
+  }
+}
+
+.dx-list-collapsible-groups {
+  .dx-list-group-header {
+    &::before {
+      content: none;
+    }
+  }
+}
+
+@mixin item-states() {
+  &.dx-list-item-selected {
+    background-color: $list-item-bg-selected;
+    color: $list-item-content-selected;
+
+    &.dx-state-hover:not(.dx-state-focused) {
+      background-color: $list-item-bg-selected-hovered;
+      color: $list-item-content-selected;
+    }
+  }
+
+  &.dx-state-focused {
+    background-color: $list-item-bg-hovered;
+    color: $list-item-content-hovered;
+  }
+
+  &.dx-state-focused.dx-list-item-selected {
+    background-color: $list-item-bg-selected-focused;
+    color: $list-item-content-selected;
+  }
+
+  &.dx-state-active {
+    background-color: $list-item-bg-active;
+
+    .dx-list-slide-item-content {
+      background-color: $list-item-bg-active;
+    }
+  }
+}
+
+@mixin dx-list-sizing($item-horizontal-padding) {
+  .dx-list {
+    border: none;
+
+    .dx-scrollable-content {
+      width: 100%;
+    }
+
+    &.dx-list-with-search .dx-scrollable-wrapper {
+      height: calc(100% - (#{textEditorSizes.$text-editor-input-min-height} + #{$list-search-box-margin-block-end}));
+    }
+
+    .dx-empty-message {
+      min-height: $list-empty-message-min-height;
+    }
+
+    &.dx-list-select-decorator-enabled {
+      .dx-list-select-all,
+      .dx-list-item {
+        .dx-list-select-all-label,
+        .dx-list-item-content {
+          padding-inline-start: $list-padding-block;
+        }
+
+        &.dx-state-hover {
+          .dx-radiobutton-icon {
+            border-color: radioButtonColors.$radio-button-checked-bg-hovered;
+          }
+
+          .dx-checkbox-icon {
+            border-color: checkBoxColors.$check-box-icon-checked-bg-hovered;
+          }
+
+          .dx-radiobutton-checked {
+            .dx-radiobutton-icon-dot {
+              background-color: radioButtonColors.$radio-button-checked-bg-hovered;
+            }
+          }
+
+          .dx-checkbox-checked {
+            .dx-checkbox-icon {
+              background-color: checkBoxColors.$check-box-icon-checked-bg-hovered;
+            }
+          }
+
+          .dx-checkbox-indeterminate {
+            .dx-checkbox-icon {
+              &::before {
+                background-color: checkBoxColors.$check-box-icon-checked-bg-hovered;
+              }
+            }
+          }
+        }
+
+        &.dx-state-focused {
+          .dx-radiobutton-icon {
+            border-color: radioButtonColors.$radio-button-checked-bg-active;
+          }
+
+          .dx-checkbox-icon {
+            border-color: checkBoxColors.$check-box-icon-checked-bg-focused;
+          }
+
+          .dx-radiobutton-checked {
+            .dx-radiobutton-icon-dot {
+              background-color: radioButtonColors.$radio-button-checked-bg-active;
+            }
+          }
+
+          .dx-checkbox-checked {
+            .dx-checkbox-icon {
+              background-color: checkBoxColors.$check-box-icon-checked-bg-focused;
+            }
+          }
+
+          .dx-checkbox-indeterminate {
+            .dx-checkbox-icon {
+              &::before {
+                background-color: checkBoxColors.$check-box-icon-checked-bg-focused;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &:not(.dx-list-select-decorator-enabled) {
+      .dx-list-item {
+        @include item-states();
+      }
+
+      .dx-list-group-header {
+        @include item-states();
+
+        &.dx-state-hover {
+          background-color: $list-item-bg-hovered;
+          color: $list-item-content-hovered;
+        }
+      }
+    }
+  }
+
+  .dx-list-group {
+    &:not(.dx-list-group-collapsed) {
+      &:not(:last-child) {
+        padding-bottom: $list-padding-block;
+        border-bottom: $list-item-border;
+        border-bottom-color: $list-border-rest;
+      }
+    }
+
+    &:not(.dx-list-group-collapsed) + &:not(.dx-list-group-collapsed) {
+      .dx-list-group-header {
+        border-top-color: transparent;
+      }
+    }
+
+    &.dx-list-group-collapsed {
+      .dx-list-group-header-indicator {
+        .dx-list-collapsible-groups & {
+          @include dx-icon(chevronright);
+          @include dx-icon-sizing($global-icon-size);
+        }
+      }
+
+      .dx-list-group-header {
+        color: $list-group-content-rest;
+      }
+    }
+
+    &:last-of-type {
+      .dx-list-item {
+        &:last-of-type {
+          margin-bottom: $list-bottom-padding;
+        }
+      }
+    }
+
+    .dx-list-item {
+      &:first-of-type {
+        margin-top: 0;
+      }
+
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .dx-list-group-header {
+    font-weight: $list-group-header-font-weight;
+    padding: $list-group-header-padding-block $item-horizontal-padding;
+    background: $list-group-header-bg-rest;
+    color: $list-expanded-group-content-rest;
+    border-top: $list-item-border;
+    border-top-color: transparent;
+    display: flex;
+    align-items: center;
+    column-gap: $list-item-padding-inline;
+
+    .dx-list-group-header-indicator {
+      color: $list-header-indicator-content-rest;
+
+      .dx-list-collapsible-groups & {
+        display: flex;
+        align-items: center;
+
+        @include dx-icon(chevrondown);
+        @include dx-icon-sizing($global-icon-size);
+      }
+    }
+
+    &::before {
+      content: none;
+    }
+  }
+
+  .dx-list-items {
+    display: flex;
+    flex-direction: column;
+    row-gap: $list-items-row-gap;
+
+    &:not(:first-of-type) {
+      .dx-list-item {
+        margin-top: 0;
+      }
+    }
+  }
+
+  .dx-list-item {
+    border-radius: $global-border-radius;
+
+    @include toggle-delete-icon($list-toggle-delete-icon-rest);
+
+    &.dx-state-hover,
+    &.dx-state-active {
+      background-color: $list-item-bg-hovered;
+      color: $list-item-content-hovered;
+
+      .dx-list-switchable-delete-button-inner-wrapper {
+        background-color: $list-item-bg-hovered;
+      }
+    }
+
+    &:first-of-type {
+      border-top: none;
+      margin-top: $list-padding-block;
+    }
+
+    &:last-of-type {
+      border-bottom: none;
+      margin-bottom: $list-padding-block;
+    }
+
+    .dx-icon {
+      color: $list-icon-rest;
+    }
+
+    .dx-icon-toggle-delete {
+      background-size: 100%;
+    }
+
+    &.dx-list-item-ghost-reordering {
+      &.dx-state-focused {
+        &.dx-state-hover {
+          color: $list-item-ghost-content-rest;
+          background: $list-item-ghost-bg-rest;
+          border: $list-item-ghost-border;
+          border-color: $list-item-ghost-border-rest;
+        }
+      }
+    }
+  }
+
+  .dx-list-item,
+  .dx-list .dx-empty-message {
+    color: $list-normal-content-rest;
+
+    .dx-list-item-separator-hidden & {
+      border-top: none;
+      border-bottom: none;
+    }
+  }
+
+  .dx-list-item-content {
+    padding: $list-item-padding-block $item-horizontal-padding $list-item-padding-block;
+  }
+
+  .dx-list .dx-empty-message { // stylelint-disable-line no-duplicate-selectors
+    padding: $list-item-padding-block $list-item-padding-inline;
+  }
+
+  .dx-list-next-button .dx-button {
+    @include dx-button-withtext-sizing();
+
+    .dx-button-content {
+      padding-left: $list-next-button-padding-inline;
+      padding-right: $list-next-button-padding-inline;
+    }
+  }
+
+  .dx-list-border-visible {
+    border: $list-border;
+    border-color: $list-border-rest;
+  }
+
+  .dx-list-item-before-bag {
+    &.dx-list-select-checkbox-container,
+    &.dx-list-select-radiobutton-container {
+      display: flex;
+      flex-shrink: 0;
+      width: $list-item-height;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .dx-button.dx-list-toggle-delete-switch {
+      border: none;
+      background: transparent;
+      padding: 0;
+      box-shadow: none;
+
+      .dx-button-content {
+        padding: 0;
+      }
+    }
+  }
+
+  .dx-list-select-all {
+    padding: $list-item-padding-block 0;
+    position: relative;
+    display: flex;
+
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: $list-select-all-height;
+      background-color: $list-base-select-all-separator-bg-rest;
+    }
+  }
+
+  .dx-list-select-all-checkbox {
+    margin: 0 calc(#{$item-horizontal-padding} - 4px);
+  }
+
+  .dx-list-select-all-label {
+    padding: 0 $list-item-padding-inline;
+  }
+
+  .dx-list-item-after-bag {
+    padding-inline: $list-item-padding-block;
+
+    &.dx-list-static-delete-button-container {
+      width: calc(#{$item-horizontal-padding} + #{buttonSizes.$button-icon-size});
+      padding: 0;
+    }
+
+    .dx-list-reorder-handle {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      @include dx-icon(dragvertical);
+
+      color: $list-icon-rest;
+
+      @include dx-icon-sizing($global-icon-size);
+    }
+  }
+
+  .dx-list-slide-menu-button {
+    bottom: $list-slide-menu-button-inset-block-end;
+  }
+
+  .dx-list-slide-menu-button-delete {
+    @include dx-icon(trash);
+
+    color: $list-inverted-content-rest;
+    background-color: $list-menu-button-delete-bg-rest;
+    font-size: $global-icon-size;
+    display: table-cell;
+    vertical-align: middle;
+    padding: 0 $item-horizontal-padding;
+    width: calc(#{$item-horizontal-padding} * 2 + #{$global-icon-size});
+  }
+
+  .dx-list-slide-menu-button-menu {
+    border: $list-slide-menu-button-menu-border;
+    color: $list-menu-button-default-content-rest;
+    background-color: $list-menu-button-default-bg-rest;
+  }
+
+  .dx-list-static-delete-button {
+    padding: 0;
+
+    &.dx-button {
+      box-shadow: none;
+      background-color: transparent;
+
+      .dx-button-content {
+        z-index: 1;
+      }
+    }
+  }
+
+  .dx-list-context-menucontent {
+    background-color: $list-hold-menu-bg-rest;
+    border: $list-context-menu-content-border;
+    border-color: $list-hold-menu-border-rest;
+    border-radius: $global-border-radius;
+    box-shadow: $list-hold-menu-shadow-rest 0 2px 7.2px 0;
+
+    .dx-list-items {
+      margin-left: $list-padding-block;
+      margin-right: $list-padding-block;
+    }
+  }
+
+  .dx-state-disabled {
+    &.dx-list-item,
+    .dx-list-item {
+      background-color: transparent;
+      opacity: $list-item-opacity-disabled;
+    }
+  }
+}
+
+@include dx-list-sizing($list-item-padding-inline);
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/list/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/list/_sizes.scss
new file mode 100644
index 000000000000..43e7143b3fc4
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/list/_sizes.scss
@@ -0,0 +1,65 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+// Not colours: opacities that used to sit in _colors.scss (NAMING.md, O7)
+$list-item-opacity-disabled: ds.$opacity-60 !default;
+$list-response-wait-opacity: ds.$opacity-50 !default;
+
+$list-padding-block: ds.$spacing-40 !default;
+$list-item-margin-inline: ds.$spacing-40 !default;
+$list-bottom-padding: ds.$spacing-40 !default;
+$list-search-box-margin-block-end: ds.$spacing-40 !default;
+$list-item-height: null !default;
+$list-item-padding-block: null !default;
+$list-item-padding-inline: null !default;
+$list-item-gap: ds.$spacing-20 !default;
+$list-group-header-padding-block: null !default;
+$list-next-button-padding-inline: null !default;
+
+@if $size == "default" {
+  $list-item-height: ds.$spacing-320 !default;
+  $list-item-padding-block: ds.$spacing-60 !default;
+  $list-item-padding-inline: ds.$spacing-120 !default;
+  $list-group-header-padding-block: ds.$spacing-60 !default;
+  $list-next-button-padding-inline: ds.$spacing-320 !default;
+}
+
+@else if $size == "compact" {
+  $list-item-height: ds.$spacing-240 !default;
+  $list-item-padding-block: ds.$spacing-40 !default;
+  $list-item-padding-inline: ds.$spacing-80 !default;
+  $list-group-header-padding-block: ds.$spacing-80 !default;
+  $list-next-button-padding-inline: ds.$spacing-240 !default;
+}
+
+:root {
+  --dx-list-item-padding-inline: #{$list-item-padding-inline};
+  --dx-list-item-padding-block: #{$list-item-padding-block};
+}
+
+// Values hoisted from style-file literals (tokenized)
+$list-group-header-font-weight: ds.$font-weight-500 !default; // dx-no-semantic-role: 500 is off the weight-role scale (400/600/700)
+$list-item-border-width: ds.$border-width-10 !default;
+$list-border-width: ds.$border-width-10 !default;
+$list-select-all-height: ds.$spacing-10 !default;
+$list-slide-menu-button-inset-block-end: ds.$spacing-10 !default;
+$list-item-ghost-border: ds.$border-width-10 solid !default;
+$list-slide-menu-button-menu-border: ds.$border-width-10 solid transparent !default;
+$list-context-menu-content-border: ds.$border-width-10 solid !default;
+$list-items-row-gap: ds.$spacing-20 !default;
+$list-empty-message-min-height: 2em !default; // dx-relative: scales with the parent font-size
+
+// Base-layer sizing injected with design tokens (wave B2)
+$list-item-badge-container-width: ds.$spacing-200 !default;
+$list-slide-menu-button-padding: 0 ds.$spacing-100 !default;
+$list-delete-button-static-padding: 0 ds.$spacing-50 !default;
+$list-next-button-padding: ds.$spacing-50 !default;
+
+/*
+ * Derived values, moved out of _index.scss: a file that emits rules must not declare
+ * variables (NAMING.md, O7).
+ */
+$list-border: $list-border-width solid;
+$list-item-border: $list-item-border-width solid;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/loadIndicator/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/loadIndicator/_colors.scss
new file mode 100644
index 000000000000..79cada2e910d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/loadIndicator/_colors.scss
@@ -0,0 +1,14 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$load-indicator-segment-border-rest: ds.$color-content-primary-default-rest !default;
+
+
+// Light track: DS spinner loader==track kills the ring contrast (see DIVERGENCES.md)
+$load-indicator-segment-inner-border-rest: ds.$color-surface-primary-subdued-rest !default;
+
+// Decorative accent shimmer; foundation has no sparkle role — primary surface steps (see DIVERGENCES.md)
+$load-indicator-sparkle-stop-1-bg-rest: ds.$color-surface-primary-default-rest !default;
+$load-indicator-sparkle-stop-2-bg-rest: ds.$color-surface-primary-default-hovered !default;
+$load-indicator-sparkle-stop-3-bg-rest: ds.$color-surface-primary-compound-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/loadIndicator/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/loadIndicator/_index.scss
new file mode 100644
index 000000000000..76581651fa63
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/loadIndicator/_index.scss
@@ -0,0 +1,133 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/loadIndicator" as baseLoadIndicator;
+
+// adduse
+
+.dx-loadindicator {
+  line-height: 100%;
+}
+
+.dx-loadindicator-image {
+  .dx-loadindicator-content {
+    animation: none;
+  }
+}
+
+.dx-loadindicator-icon {
+  height: 100%;
+  width: 100%;
+}
+
+.dx-loadindicator-segment {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+}
+
+.dx-loadindicator-segment-inner {
+  position: relative;
+  height: 100%;
+  border-color: $load-indicator-segment-border-rest;
+  border-width: $load-indicator-segment-border-width;
+  border-style: solid;
+  border-bottom-color: transparent;
+  animation: none;
+  border-radius: 50%;
+}
+
+.dx-loadindicator-content-circle {
+  animation: dx-content-rotation 1568ms linear infinite;
+
+  .dx-loadindicator-icon {
+    position: absolute;
+    animation: dx-icon-rotation 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+  }
+
+  .dx-loadindicator-segment0,
+  .dx-loadindicator-segment1 {
+    width: 50%;
+    height: 100%;
+    overflow: hidden;
+
+    .dx-loadindicator-segment-inner {
+      width: 200%;
+    }
+  }
+
+  .dx-loadindicator-segment0 {
+    left: 0;
+
+    .dx-loadindicator-segment-inner {
+      border-right-color: transparent;
+      transform: rotate(-129deg);
+      animation: dx-left-segment-rotation 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+    }
+  }
+
+  .dx-loadindicator-segment2 {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+
+    .dx-loadindicator-segment-inner {
+      border-color: $load-indicator-segment-inner-border-rest;
+      width: 100%;
+      left: 0;
+    }
+  }
+
+  .dx-loadindicator-segment1 {
+    right: 0;
+
+    .dx-loadindicator-segment-inner {
+      left: -100%;
+      border-left-color: transparent;
+      transform: rotate(129deg);
+      animation: dx-right-segment-rotation 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+
+      &::after {
+        right: 0;
+      }
+    }
+  }
+}
+
+@include baseLoadIndicator.loadindicator-animation-sparkle(
+  $load-indicator-sparkle-stop-1-bg-rest,
+  $load-indicator-sparkle-stop-2-bg-rest,
+  $load-indicator-sparkle-stop-3-bg-rest
+);
+
+@keyframes dx-content-rotation {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes dx-icon-rotation {
+  12.5% { transform: rotate(135deg); }
+  25% { transform: rotate(270deg); }
+  37.5% { transform: rotate(405deg); }
+  50% { transform: rotate(540deg); }
+  62.5% { transform: rotate(675deg); }
+  75% { transform: rotate(810deg); }
+  87.5% { transform: rotate(945deg); }
+  to { transform: rotate(1080deg); }
+}
+
+@keyframes dx-left-segment-rotation {
+  from { transform: rotate(130deg); }
+  50% { transform: rotate(-5deg); }
+  to { transform: rotate(130deg); }
+}
+
+@keyframes dx-right-segment-rotation {
+  from { transform: rotate(-130deg); }
+  50% { transform: rotate(5deg); }
+  to { transform: rotate(-130deg); }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/loadIndicator/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/loadIndicator/_sizes.scss
new file mode 100644
index 000000000000..06134706860a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/loadIndicator/_sizes.scss
@@ -0,0 +1,7 @@
+@use "../sizes" as *;
+
+// adduse
+
+
+// Values hoisted from style-file literals (tokenized)
+$load-indicator-segment-border-width: 0.12em !default; // dx-relative: scales with the parent font-size
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/loadPanel/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/loadPanel/_colors.scss
new file mode 100644
index 000000000000..b8cbcebf2f6c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/loadPanel/_colors.scss
@@ -0,0 +1,8 @@
+@use "sass:color";
+@use "../sizes" as *;
+@use "../colors" as *;
+@use "../common/colors" as *;
+
+// adduse
+
+$load-panel-content-bg-rest: $surface-overlay-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/loadPanel/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/loadPanel/_index.scss
new file mode 100644
index 000000000000..a209f1da2225
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/loadPanel/_index.scss
@@ -0,0 +1,21 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/loadPanel" with (
+  $loadpanel-content-padding: $load-panel-content-padding,
+  $loadpanel-content-border: $load-panel-content-border,
+  $loadpanel-content-border-radius: $load-panel-content-border-radius,
+);
+
+// adduse
+@use "../overlay";
+
+
+.dx-loadpanel-content {
+  border: none;
+  background: $load-panel-content-bg-rest;
+  padding: $load-panel-padding;
+  border-radius: $load-panel-border-radius;
+  box-shadow: $load-panel-box-shadow;
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/loadPanel/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/loadPanel/_sizes.scss
new file mode 100644
index 000000000000..1f2182d789b6
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/loadPanel/_sizes.scss
@@ -0,0 +1,13 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$load-panel-padding: ds.$spacing-120 ds.$spacing-240 !default;
+$load-panel-border-radius: ds.$border-radius-80 !default;
+$load-panel-box-shadow: 0 ds.$spacing-80 ds.$spacing-160 0 ds.$color-shadow-key !default;
+
+// Base-layer sizing injected with design tokens (wave B2)
+$load-panel-content-padding: ds.$spacing-100 !default;
+$load-panel-content-border: ds.$border-width-10 solid ds.$color-border-neutral-default-rest !default;
+$load-panel-content-border-radius: ds.$border-radius-50 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/lookup/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/lookup/_colors.scss
new file mode 100644
index 000000000000..06dd14e6e127
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/lookup/_colors.scss
@@ -0,0 +1,7 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$lookup-icon-rest: ds.$color-content-neutral-subdued-rest !default;
+$lookup-icon-active: ds.$color-content-neutral-subdued-rest !default;
+
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/lookup/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/lookup/_index.scss
new file mode 100644
index 000000000000..eccddd2e7063
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/lookup/_index.scss
@@ -0,0 +1,174 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../textEditor/sizes" as textEditorSizes;
+@use "../textEditor/colors" as textEditorColors;
+@use "../dropDownEditor" as *;
+@use "../common/mixins" as *;
+@use "../../base/lookup";
+@use "../../base/lookup/mixins" as *;
+@use "../common/colors" as *;
+
+// adduse
+@use "../dropDownList";
+
+.dx-lookup {
+  .dx-lookup-arrow {
+    inset-inline-end: textEditorSizes.$text-editor-spin-button-padding-inline;
+  }
+
+  &.dx-editor-filled,
+  &.dx-editor-outlined {
+    .dx-lookup-field {
+      padding-inline-start: textEditorSizes.$text-editor-input-filled-padding-inline;
+      padding-inline-end: calc(#{textEditorSizes.$text-editor-input-filled-padding-inline} + #{$global-icon-size});
+    }
+
+    &.dx-invalid {
+      .dx-lookup-field {
+        padding-inline-end: calc(#{textEditorSizes.$text-editor-input-filled-padding-inline} + #{$global-icon-size} * 2);
+      }
+    }
+  }
+
+  &.dx-editor-underlined {
+    .dx-lookup-field {
+      padding-inline-start: textEditorSizes.$text-editor-input-underlined-padding-inline;
+      padding-inline-end: calc(#{textEditorSizes.$text-editor-input-underlined-padding-inline} + #{$global-icon-size} + #{textEditorSizes.$text-editor-spin-button-padding-inline});
+    }
+
+    &.dx-invalid {
+      .dx-lookup-field {
+        padding-inline-end: calc(#{textEditorSizes.$text-editor-input-underlined-padding-inline} + #{$global-icon-size} * 2 + #{textEditorSizes.$text-editor-spin-button-padding-inline});
+      }
+    }
+  }
+
+  &.dx-invalid {
+    .dx-lookup-arrow::after {
+      @include dx-invalid-fluent-badge();
+
+      inset-inline-end: $global-icon-size;
+    }
+  }
+
+  &.dx-valid {
+    .dx-lookup-arrow::after {
+      @include dx-valid-fluent-badge();
+
+      inset-inline-end: $global-icon-size;
+    }
+  }
+
+  &.dx-validation-pending {
+    .dx-lookup-field-wrapper {
+      .dx-pending-indicator {
+        @include dx-pending-indicator-fluent();
+
+        inset-inline-end: $global-icon-size;
+      }
+    }
+  }
+}
+
+.dx-lookup-field {
+  min-height: $lookup-field-min-height;
+  line-height: textEditorSizes.$text-editor-line-height;
+  padding-top: textEditorSizes.$text-editor-input-filled-padding-block-start;
+  padding-bottom: textEditorSizes.$text-editor-input-filled-padding-block-end;
+
+  &::before {
+    line-height: normal;
+  }
+
+  .dx-texteditor {
+    border: none;
+
+    &::before,
+    &::after {
+      content: none;
+    }
+
+    &.dx-state-hover,
+    &.dx-state-focused,
+    &.dx-state-active,
+    &.dx-state-disabled,
+    &.dx-state-readonly,
+    &.dx-state-readonly.dx-state-hover,
+    & {
+      background-color: transparent;
+    }
+  }
+}
+
+@include dx-lookup-arrow(
+  spindown,
+  "\f001",
+  $global-icon-size,
+  $lookup-icon-rest,
+  $lookup-icon-active,
+  $global-icon-size,
+);
+
+.dx-lookup-popup-wrapper {
+  @include dx-dropdownlist-list-appearance();
+
+  .dx-list-item {
+    border-top: none;
+
+    &:last-of-type {
+      border-bottom: none;
+    }
+  }
+
+  .dx-popup-content {
+    top: 0;
+    padding: 0;
+  }
+
+  .dx-popup-title + .dx-popup-content {
+    top: $lookup-popup-content-inset-block-start;
+  }
+
+  &.dx-popup-wrapper {
+    .dx-overlay-content {
+      overflow: visible;
+    }
+  }
+
+  .dx-popover-arrow {
+    display: block;
+
+    &::after {
+      box-shadow: $lookup-box-shadow;
+      background: $surface-overlay-rest;
+      border-top-right-radius: $lookup-arrow-border-radius;
+    }
+  }
+
+  &.dx-position-top {
+    .dx-popover-arrow {
+      &::after {
+        border-bottom-left-radius: $lookup-arrow-border-radius;
+      }
+    }
+  }
+}
+
+.dx-lookup-empty {
+  .dx-lookup-field {
+    color: textEditorColors.$text-editor-placeholder-rest;
+  }
+}
+
+.dx-lookup-popup-search .dx-list {
+  height: calc(100% - (#{textEditorSizes.$text-editor-input-min-height} + #{$lookup-search-padding-block} + #{$lookup-search-padding-block-start}));
+}
+
+.dx-lookup-search-wrapper {
+  padding: $lookup-search-padding-block $lookup-search-padding-inline;
+  padding-top: $lookup-search-padding-block-start;
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/lookup/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/lookup/_sizes.scss
new file mode 100644
index 000000000000..db5dec255b68
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/lookup/_sizes.scss
@@ -0,0 +1,27 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+// Not a colour: an opacity / a composite box-shadow belongs here (NAMING.md O7)
+$lookup-box-shadow: ds.$box-shadow-sm !default;
+
+$lookup-field-min-height: null !default;
+$lookup-search-padding-block: ds.$spacing-40 !default;
+$lookup-search-padding-block-start: null !default;
+$lookup-search-padding-inline: null !default;
+$lookup-arrow-border-radius: ds.$border-radius-20 !default;
+
+$lookup-popup-content-inset-block-start: 49px !default; // dx-offscale: 49px
+
+@if $size == "default" {
+  $lookup-field-min-height: ds.$spacing-300 !default;
+  $lookup-search-padding-inline: ds.$spacing-120 !default;
+  $lookup-search-padding-block-start: ds.$spacing-120 !default;
+}
+
+@else if $size == "compact" {
+  $lookup-field-min-height: ds.$spacing-220 !default;
+  $lookup-search-padding-inline: ds.$spacing-80 !default;
+  $lookup-search-padding-block-start: ds.$spacing-80 !default;
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/map/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/map/_index.scss
new file mode 100644
index 000000000000..e2f6c920133d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/map/_index.scss
@@ -0,0 +1,10 @@
+@use "sass:color";
+@use "../colors" as *;
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+@use "../../base/map" with (
+  $map-marker-tooltip-margin: ds.$spacing-100,
+);
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/menu/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/menu/_colors.scss
new file mode 100644
index 000000000000..37e617264dca
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/menu/_colors.scss
@@ -0,0 +1,22 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$menu-popup-bg-rest: ds.$color-surface-neutral-default-rest !default;
+$menu-item-bg-hovered: ds.$color-surface-neutral-default-hovered !default;
+$menu-item-bg-active: ds.$color-surface-neutral-default-active !default;
+
+$menu-content-rest: ds.$color-content-neutral-default-rest !default;
+$menu-item-expanded-content-rest: $menu-content-rest !default;
+
+$menu-item-bg-selected: ds.$color-surface-neutral-default-selected !default;
+$menu-popup-border-rest: ds.$color-border-neutral-default-rest !default;
+$menu-separator-bg-rest: ds.$color-border-neutral-subdued-rest !default;
+$menu-item-content-selected: ds.$color-content-neutral-default-rest !default;
+$menu-item-link-content-rest: ds.$color-content-primary-default-rest !default;
+$menu-item-bg-selected-focused: ds.$color-surface-neutral-default-selected-hovered !default;
+
+$menu-shadow-focused: ds.$box-shadow-md !default;
+
+// Moved here from menuBase/: menu/ is the declaration home of the menu component (O2)
+$menu-item-content-disabled: ds.$color-content-neutral-default-disabled;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/menu/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/menu/_index.scss
new file mode 100644
index 000000000000..817afcbef9fb
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/menu/_index.scss
@@ -0,0 +1,112 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+
+// adduse
+@use "../menuBase" as *;
+@use "../button/sizes" as buttonSizes;
+@use "../../base/menu" with (
+  $menu-separator-margin-inline-end: $menu-separator-margin-inline-end,
+  $menu-separator-margin-bottom: $menu-separator-margin-block-end,
+  $menu-treeview-node-padding: $menu-tree-view-node-padding,
+  $menu-item-content-padding-inline-start: $menu-item-content-padding-inline-start,
+);
+
+.dx-context-menu-container-border {
+  background-color: transparent;
+}
+
+.dx-context-menu-content-delimiter {
+  background-color: transparent;
+}
+
+.dx-menu {
+  color: $menu-content-rest;
+
+  .dx-menu-horizontal {
+    .dx-menu-item-popout {
+      margin-inline-start: $menu-item-icon-gap;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      @include dx-icon(spindown);
+      @include dx-icon-sizing(buttonSizes.$button-icon-size);
+    }
+  }
+
+  .dx-menu-vertical {
+    .dx-menu-item-popout {
+      margin-inline-start: $menu-item-icon-gap;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      @include dx-icon(spinright);
+      @include dx-icon-sizing(buttonSizes.$button-icon-size);
+    }
+  }
+
+  .dx-menu-item {
+    border-radius: $global-border-radius;
+
+    .dx-menu-item-content {
+      display: flex;
+      padding: $menu-padding-block $menu-padding-inline;
+
+      .dx-menu-item-popout-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        width: auto;
+      }
+    }
+
+    &.dx-menu-item-has-text {
+      .dx-menu-item-text {
+        flex: 1 1 auto;
+      }
+
+      &.dx-menu-item-has-icon {
+        .dx-icon {
+          margin-inline-end: $menu-item-icon-gap;
+        }
+      }
+    }
+  }
+}
+
+.dx-menu-adaptive-mode {
+  background-color: $menu-popup-bg-rest;
+
+  .dx-treeview {
+    border: $menu-tree-view-border;
+    border-color: $menu-popup-border-rest;
+    border-radius: $global-border-radius;
+
+    &,
+    &.dx-state-focused {
+      box-shadow: $menu-shadow-focused;
+    }
+  }
+
+  .dx-treeview-node {
+    &.dx-state-focused {
+      .dx-treeview-node .dx-treeview-toggle-item-visibility {
+        color: inherit;
+      }
+
+      .dx-treeview-toggle-item-visibility {
+        color: $menu-popup-bg-rest;
+      }
+    }
+  }
+
+  .dx-treeview-node-container:first-child > .dx-treeview-node {
+    border-bottom: $menu-tree-view-node-border-block-end;
+    border-bottom-color: $menu-popup-border-rest
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/menu/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/menu/_sizes.scss
new file mode 100644
index 000000000000..1d69dc0c76a7
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/menu/_sizes.scss
@@ -0,0 +1,43 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+// Moved from menuBase/ so the component has a single declaration home (NAMING.md, O2)
+$menu-item-line-height: null !default;
+$menu-item-with-icon-padding-inline: null !default;
+$menu-padding-inline: null !default;
+$menu-item-icon-gap: ds.$spacing-40;
+
+@if $size == "default" {
+  $menu-item-line-height: ds.$line-height-base-md !default;
+  $menu-padding-inline: ds.$spacing-120 !default;
+  $menu-item-with-icon-padding-inline: ds.$spacing-400 !default;
+}
+
+@else if $size == "compact" {
+  $menu-item-line-height: ds.$line-height-base-sm !default;
+  $menu-padding-inline: ds.$spacing-80 !default;
+  $menu-item-with-icon-padding-inline: ds.$spacing-320 !default;
+}
+
+$menu-padding-block: null !default;
+
+@if $size == "default" {
+  $menu-padding-block: ds.$spacing-60 !default;
+}
+
+@if $size == "compact" {
+  $menu-padding-block: ds.$spacing-40 !default;
+}
+
+
+// Values hoisted from style-file literals (tokenized)
+$menu-tree-view-border: ds.$border-width-10 solid !default;
+$menu-tree-view-node-border-block-end: ds.$border-width-10 solid !default;
+
+// Base-layer sizing injected with design tokens (wave B2)
+$menu-separator-margin-inline-end: ds.$spacing-150 !default;
+$menu-separator-margin-block-end: ds.$spacing-150 !default;
+$menu-tree-view-node-padding: ds.$spacing-10 !default;
+$menu-item-content-padding-inline-start: ds.$spacing-150 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/menuBase/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/menuBase/_colors.scss
new file mode 100644
index 000000000000..0779caa6ee0e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/menuBase/_colors.scss
@@ -0,0 +1 @@
+// adduse
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/menuBase/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/menuBase/_index.scss
new file mode 100644
index 000000000000..deb339de52a5
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/menuBase/_index.scss
@@ -0,0 +1,78 @@
+@use "sass:color";
+@use "colors" as *;
+@use "../sizes" as *;
+@use "../menu/colors" as menuColors;
+@use "../menu/sizes" as menuSizes;
+@use "../../base/icon_fonts" as *;
+@use "../../base/mixins" as *;
+@use "../../base/menuBase";
+@use "../button/sizes" as buttonSizes;
+
+// adduse
+
+.dx-menu-item {
+  color: menuColors.$menu-content-rest;
+
+  a {
+    color: menuColors.$menu-item-link-content-rest;
+  }
+
+  &.dx-state-disabled {
+    color: menuColors.$menu-item-content-disabled;
+  }
+
+  &.dx-state-hover {
+    background-color: menuColors.$menu-item-bg-hovered;
+  }
+
+  &.dx-state-focused {
+    background-color: menuColors.$menu-item-bg-hovered;
+  }
+
+  &.dx-state-active {
+    background-color: menuColors.$menu-item-bg-active;
+  }
+
+  .dx-item-url {
+    display: inherit;
+    gap: inherit;
+  }
+
+  .dx-icon-with-url {
+    &::before {
+      display: inline-block;
+    }
+  }
+}
+
+.dx-menu-item-selected {
+  background-color: menuColors.$menu-item-bg-selected;
+  color: menuColors.$menu-item-content-selected;
+
+  &.dx-state-focused {
+    background-color: menuColors.$menu-item-bg-selected-focused;
+  }
+}
+
+.dx-menu-item-expanded,
+.dx-menu-item-expanded.dx-state-hover,
+.dx-menu-item-expanded.dx-state-focused {
+  color: menuColors.$menu-item-expanded-content-rest;
+  background-color: menuColors.$menu-item-bg-selected;
+}
+
+.dx-menu-base {
+  &.dx-state-focused {
+    outline: none;
+  }
+
+  .dx-icon {
+    @include dx-icon-sizing(buttonSizes.$button-icon-size);
+  }
+
+  .dx-menu-item {
+    .dx-menu-item-content {
+      line-height: menuSizes.$menu-item-line-height;
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/multiView/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/multiView/_colors.scss
new file mode 100644
index 000000000000..89c53a85429e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/multiView/_colors.scss
@@ -0,0 +1,6 @@
+@use "sass:color";
+@use "../sizes" as *;
+@use "../colors" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/multiView/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/multiView/_index.scss
new file mode 100644
index 000000000000..eb9938faba2e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/multiView/_index.scss
@@ -0,0 +1,8 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/multiView";
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/multiView/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/multiView/_sizes.scss
new file mode 100644
index 000000000000..43b104010f9e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/multiView/_sizes.scss
@@ -0,0 +1,4 @@
+@use "../sizes" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/numberBox/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/numberBox/_colors.scss
new file mode 100644
index 000000000000..215dc9d8acee
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/numberBox/_colors.scss
@@ -0,0 +1,11 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$number-box-spin-icon-rest: ds.$color-content-neutral-subdued-rest !default;
+$number-box-spin-bg-hovered: ds.$color-surface-neutral-default-hovered !default;
+$number-box-spin-bg-active: ds.$color-surface-neutral-default-active !default;
+
+$number-box-content-disabled: ds.$color-content-neutral-default-disabled !default;
+
+// Base-layer values injected with design tokens (wave B1)
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/numberBox/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/numberBox/_index.scss
new file mode 100644
index 000000000000..42ff7551cb14
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/numberBox/_index.scss
@@ -0,0 +1,87 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../../base/numberBox" with (
+  $numberbox-spin-idle-opacity: $number-box-spin-opacity-rest,
+);
+
+// adduse
+@use "../textEditor" as *;
+
+.dx-numberbox {
+  &.dx-editor-outlined,
+  &.dx-editor-filled {
+    .dx-numberbox-spin-up {
+      border-start-end-radius: $global-border-radius;
+    }
+
+    .dx-numberbox-spin-down {
+      border-end-end-radius: $global-border-radius;
+    }
+  }
+}
+
+.dx-numberbox-spin-container {
+  overflow: hidden;
+  width: $number-box-spin-container-width;
+
+  .dx-state-disabled & {
+    opacity: 1;
+  }
+}
+
+.dx-numberbox-spin-up-icon {
+  @include dx-icon(spinup);
+
+  color: $number-box-spin-icon-rest;
+}
+
+.dx-numberbox-spin-down-icon {
+  @include dx-icon(spindown);
+
+  color: $number-box-spin-icon-rest;
+}
+
+.dx-numberbox-spin-up-icon,
+.dx-numberbox-spin-down-icon {
+  @include dx-icon-font-centered-sizing($global-icon-size);
+}
+
+.dx-numberbox-spin-button {
+  height: 50%;
+
+  &.dx-state-hover {
+    background-color: $number-box-spin-bg-hovered;
+  }
+
+  &.dx-state-active {
+    background-color: $number-box-spin-bg-active;
+  }
+
+  &.dx-state-disabled {
+    .dx-numberbox-spin-up-icon,
+    .dx-numberbox-spin-down-icon {
+      color: $number-box-content-disabled;
+    }
+  }
+}
+
+.dx-numberbox-spin.dx-numberbox-box {
+  @include validation-icon-position();
+}
+
+.dx-numberbox-spin-touch-friendly {
+  @include validation-icon-position();
+
+  .dx-numberbox-spin-container {
+    width: $number-box-spin-container-touch-friendly-width;
+    border-inline-start: none;
+  }
+
+  .dx-numberbox-spin-up-icon,
+  .dx-numberbox-spin-down-icon {
+    background-position: center;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/numberBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/numberBox/_sizes.scss
new file mode 100644
index 000000000000..2339bc8c626a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/numberBox/_sizes.scss
@@ -0,0 +1,19 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+// Not a colour: an opacity / a composite box-shadow belongs here (NAMING.md O7)
+$number-box-spin-opacity-rest: ds.$opacity-20 !default;
+
+$number-box-spin-container-width: ds.$spacing-240 !default;
+$number-box-spin-container-touch-friendly-width: null !default;
+
+@if $size == "default" {
+  $number-box-spin-container-touch-friendly-width: ds.$spacing-480 !default;
+}
+
+@else if $size == "compact" {
+  $number-box-spin-container-touch-friendly-width: ds.$spacing-480 !default;
+}
+
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/overlay/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/overlay/_index.scss
new file mode 100644
index 000000000000..84a7bff109b9
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/overlay/_index.scss
@@ -0,0 +1,16 @@
+@use "sass:color";
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../common/mixins" as *;
+@use "../../base/overlay";
+@use "../common/colors" as *;
+
+// adduse
+.dx-overlay-shader {
+  background-color: $backdrop-rest;
+}
+
+.dx-overlay-wrapper {
+  @include dx-base-typography();
+}
+
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/overlay/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/overlay/_sizes.scss
new file mode 100644
index 000000000000..43b104010f9e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/overlay/_sizes.scss
@@ -0,0 +1,4 @@
+@use "../sizes" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_colors.scss
new file mode 100644
index 000000000000..f282b11249a5
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_colors.scss
@@ -0,0 +1,10 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$pagination-page-content-selected: ds.$color-content-neutral-default-static-dark-rest !default;
+$pagination-page-bg-hovered: ds.$color-surface-neutral-default-hovered !default;
+
+$pagination-page-bg-selected: ds.$color-surface-primary-default-rest !default;
+
+// Base-layer values injected with design tokens (wave B1)
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_index.scss
new file mode 100644
index 000000000000..8eabde3bc991
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_index.scss
@@ -0,0 +1,116 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../../base/pagination" with (
+  $pagination-page-padding-2: $fluent-pagination-page-padding-2,
+  $pagination-page-margin-left: $pagination-page-margin-inline-start,
+  $pagination-page-margin-right: $pagination-page-margin-inline-end,
+  $pagination-separator-padding-left: $pagination-separator-padding-inline-start,
+  $pagination-separator-padding-right: $pagination-separator-padding-inline-end,
+  $pagination-navigate-button-width-2: $fluent-pagination-navigate-button-width-2,
+  $pagination-navigate-button-height: $pagination-navigate-button-height,
+  $pagination-first-child-margin-left: $pagination-first-child-margin-inline-start,
+  $pagination-first-child-padding-left: $pagination-first-child-padding-inline-start,
+  $pagination-first-child-padding-right: $pagination-first-child-padding-inline-end,
+  $pagination-first-child-padding-top: $pagination-first-child-padding-block-start,
+  $pagination-first-child-padding-bottom: $pagination-first-child-padding-block-end,
+  $pagination-first-child-margin-left-2: $fluent-pagination-first-child-margin-left-2,
+  $pagination-page-index-width: $pagination-page-index-width,
+  $pagination-pages-count-padding-left: $pagination-pages-count-padding-inline-start,
+  $pagination-info-opacity: $pagination-info-opacity,
+  $pagination-nav-disabled-opacity: $pagination-nav-opacity-disabled,
+  $pagination-page-horizontal-padding: $pagination-page-padding-inline,
+);
+@use "../gridBase/sizes" as gridBaseSizes;
+
+// adduse
+
+
+.dx-pager,
+.dx-pagination {
+  padding: $pagination-padding gridBaseSizes.$grid-cell-padding-inline;
+
+  &.dx-light-mode {
+    .dx-page-sizes {
+      min-width: $pagination-page-sizes-compact-min-width;
+    }
+
+    .dx-page-index {
+      min-width: $pagination-page-index-compact-min-width;
+    }
+
+    .dx-pages {
+      .dx-page-indexes {
+        vertical-align: middle;
+      }
+
+      .dx-navigate-button,
+      .dx-light-pages {
+        vertical-align: middle;
+      }
+    }
+  }
+
+  .dx-pages {
+    .dx-page {
+      padding: $pagination-page-padding;
+      line-height: $pagination-page-line-height;
+    }
+
+    .dx-separator {
+      padding-left: $pagination-separator-padding;
+      padding-right: $pagination-separator-padding;
+    }
+
+    .dx-navigate-button {
+      width: $pagination-navigate-button-width;
+      height: $pagination-nav-button-height;
+      padding: $pagination-nav-button-padding;
+    }
+
+    .dx-prev-button {
+      @include dx-icon(chevronleft);
+    }
+
+    .dx-next-button {
+      @include dx-icon(chevronright);
+    }
+
+    .dx-prev-button,
+    .dx-next-button {
+      @include dx-icon-font-centered-sizing($pagination-nav-button-icon-size);
+    }
+  }
+
+  .dx-page,
+  .dx-page-size {
+    font-size: $pagination-page-font-size;
+
+    &:hover {
+      background-color: $pagination-page-bg-hovered;
+    }
+
+    border-radius: $pagination-page-border-radius;
+  }
+
+  .dx-page-sizes .dx-page-size {
+    &:first-child,
+    &.dx-first-child {
+      margin-left: 0;
+    }
+
+    padding: $pagination-page-padding;
+    line-height: $pagination-page-line-height;
+  }
+
+  .dx-pages,
+  .dx-page-sizes {
+    .dx-selection {
+      font-weight: $pagination-font-weight-selected;
+      background-color: $pagination-page-bg-selected;
+      color: $pagination-page-content-selected;
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_sizes.scss
new file mode 100644
index 000000000000..75fd2ec7e1ce
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_sizes.scss
@@ -0,0 +1,56 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+// Not colours: two opacities that used to sit in _colors.scss (NAMING.md, O7)
+$pagination-info-opacity: ds.$opacity-70 !default;
+$pagination-nav-opacity-disabled: ds.$opacity-30 !default;
+
+$pagination-padding: ds.$spacing-130 !default;
+$pagination-separator-padding: ds.$spacing-80 !default;
+$pagination-page-padding: ds.$spacing-90 ds.$spacing-120 !default;
+$pagination-page-line-height: ds.$line-height-120 !default; // dx-no-semantic-role: 120 is off the line-height-role scale
+$pagination-page-font-size: ds.$font-size-base-sm !default;
+$pagination-nav-button-padding: $pagination-page-padding !default;
+$pagination-nav-button-height: ds.$spacing-120 !default;
+$pagination-nav-button-icon-size: null !default;
+$pagination-page-sizes-compact-min-width: null !default;
+$pagination-page-index-compact-min-width: null !default;
+
+@if $size == "default" {
+  $pagination-nav-button-icon-size: ds.$spacing-210 !default;
+  $pagination-page-sizes-compact-min-width: 62px !default; // dx-offscale: 62px
+  $pagination-page-index-compact-min-width: ds.$spacing-320 !default;
+}
+
+@else if $size == "compact" {
+  $pagination-nav-button-icon-size: ds.$spacing-160 !default;
+  $pagination-page-sizes-compact-min-width: 42px !default; // dx-offscale: 42px
+  $pagination-page-index-compact-min-width: 27px !default; // dx-offscale: 27px
+}
+
+// Values hoisted from style-file literals (tokenized)
+$pagination-font-weight-selected: ds.$font-weight-500 !default; // dx-no-semantic-role: 500 is off the weight-role scale (400/600/700)
+$pagination-page-border-radius: 20px !default; // dx-offscale: 20px (pill; candidate: ds.$border-radius-full)
+$pagination-navigate-button-width: ds.$spacing-90 !default;
+
+// Base-layer sizing injected with design tokens (wave B2)
+$fluent-pagination-page-padding-2: ds.$spacing-70 ds.$spacing-80 ds.$spacing-80 !default;
+$pagination-page-margin-inline-start: ds.$spacing-50 !default;
+$pagination-page-margin-inline-end: ds.$spacing-10 !default;
+$pagination-separator-padding-inline-start: ds.$spacing-80 !default;
+$pagination-separator-padding-inline-end: ds.$spacing-80 !default;
+$fluent-pagination-navigate-button-width-2: ds.$spacing-100 !default;
+$pagination-navigate-button-height: ds.$spacing-200 !default;
+$pagination-first-child-margin-inline-start: ds.$spacing-10 !default;
+$pagination-first-child-padding-inline-start: ds.$spacing-100 !default;
+$pagination-first-child-padding-inline-end: ds.$spacing-90 !default;
+$pagination-first-child-padding-block-start: ds.$spacing-70 !default;
+$pagination-first-child-padding-block-end: ds.$spacing-80 !default;
+$fluent-pagination-first-child-margin-left-2: ds.$spacing-40 !default;
+$pagination-page-index-width: ds.$spacing-400 !default;
+$pagination-pages-count-padding-inline-start: ds.$spacing-60 !default;
+
+// B2 tail: pagination page horizontal padding
+$pagination-page-padding-inline: ds.$spacing-130 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_colors.scss
new file mode 100644
index 000000000000..e3cad6693eb5
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_colors.scss
@@ -0,0 +1,32 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$pivot-grid-area-bg-rest: ds.$color-surface-neutral-default-rest !default;
+$pivot-grid-border-rest: ds.$color-border-neutral-default-rest !default;
+
+$pivot-grid-area-content-rest: ds.$color-content-neutral-default-rest !default;
+$pivot-grid-field-area-box-content-rest: $pivot-grid-area-content-rest !default;
+$pivot-grid-field-area-box-bg-rest: ds.$color-surface-neutral-deep-rest !default;
+$pivot-grid-data-area-content-rest: ds.$color-content-neutral-default-rest !default;
+
+$pivot-grid-total-content-rest: ds.$color-surface-neutral-default-rest !default;
+
+$pivot-grid-grand-total-content-rest: ds.$color-surface-neutral-deep-rest !default;
+
+$pivot-grid-field-area-content-rest: ds.$color-content-neutral-subdued-rest !default;
+$pivot-grid-accent-content-rest: ds.$color-border-primary-default-rest !default;
+$pivot-grid-drag-header-border-rest: rgb(from #{ds.$color-border-primary-default-rest} r g b / 0.5) !default;
+$pivot-grid-drag-header-first-shadow-rest: ds.$color-shadow-ambient !default;
+$pivot-grid-drag-header-shadow-key-rest: ds.$color-shadow-key !default;
+$pivot-grid-position-indicator-bg-rest: ds.$color-border-neutral-accessible-rest !default;
+$pivot-grid-chevron-icon-rest: $pivot-grid-area-content-rest !default;
+
+// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
+$pivot-grid-header-filter-content-rest: ds.$color-content-primary-default-rest !default;
+$pivot-grid-border-disabled: ds.$color-border-neutral-default-disabled !default;
+$pivot-grid-content-rest: ds.$color-content-neutral-default-rest !default;
+
+// Color computations hoisted from style files (phase 0.5 layer normalization)
+$pivot-grid-drag-header-shadow-rest: 0 3px 4px ds.$color-shadow-key !default;
+$pivot-grid-area-field-bg-rest: rgb(from #{$pivot-grid-field-area-box-bg-rest} r g b / 0.9) !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_index.scss
new file mode 100644
index 000000000000..114a620a7a2c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_index.scss
@@ -0,0 +1,248 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../gridBase/colors" as gridBaseColors;
+@use "../treeView/sizes" as treeViewSizes;
+@use "../button/sizes" as buttonSizes;
+@use "../../base/pivotGrid" as basePivotGrid with (
+  $pivotgrid-common-field-chooser-drag-width: $pivot-grid-field-chooser-drag-width,
+  $pivotgrid-common-field-chooser-drag-height: $pivot-grid-field-chooser-drag-height,
+  $pivotgrid-position-indicator-vertical-height: $pivot-grid-position-indicator-vertical-height,
+  $pivotgrid-position-indicator-horizontal-width: $pivot-grid-position-indicator-horizontal-width,
+  $pivotgrid-position-indicator-last-margin-left: $pivot-grid-position-indicator-last-margin-inline-start,
+  $pivotgrid-area-box-margin-bottom: $pivot-grid-area-box-margin-block-end,
+  $pivotgrid-expand-icon-container-outline: $pivot-grid-expand-icon-container-outline,
+  $pivotgrid-toolbar-margin-right: $pivot-grid-toolbar-margin-inline-end,
+  $pivotgrid-field-chooser-button-margin-right: $pivot-grid-field-chooser-button-margin-inline-end,
+  $pivotgrid-button-margin: $pivot-grid-button-margin,
+  $pivotgrid-last-cell-min-width: $pivot-grid-last-cell-min-width,
+  $pivotgrid-icon-sorted-margin-left: $pivot-grid-icon-sorted-margin-inline-start,
+  $pivotgrid-fields-area-head-padding: $pivot-grid-fields-area-head-padding,
+  $pivotgrid-treeview-search-margin: $pivot-grid-tree-view-search-margin,
+  $pivotgrid-area-padding: $pivot-grid-area-padding,
+  $pivotgrid-area-fields-margin-top-2: $pivot-grid-area-fields-margin-block-start-alt,
+  $pivotgrid-position-indicator-last-margin-left-2: $pivot-grid-position-indicator-last-rtl-margin-inline-start,
+  $pivotgrid-toolbar-margin-left: $pivot-grid-toolbar-margin-inline-start,
+  $pivotgrid-field-chooser-button-margin-left: $pivot-grid-field-chooser-button-margin-inline-start,
+  $pivotgrid-fields-area-head-padding-left: $pivot-grid-fields-area-head-padding-inline-start,
+  $pivotgrid-icon-sorted-margin-right: $pivot-grid-icon-sorted-margin-inline-end,
+  $pivotgrid-drag-header-border-color: $pivot-grid-drag-header-border-rest,
+  $pivotgrid-drag-header-first-shadow-color: $pivot-grid-drag-header-first-shadow-rest,
+  $pivotgrid-drag-header-second-shadow-color: $pivot-grid-drag-header-shadow-key-rest,
+  $pivotgrid-border-color: $pivot-grid-border-rest,
+  $pivotgrid-common-left-right-padding: $pivot-grid-left-right-padding,
+  $pivotgrid-area-color: $pivot-grid-area-content-rest,
+  $header-filter-color: gridBaseColors.$grid-header-filter-icon-rest,
+  $header-filter-color-empty: gridBaseColors.$grid-header-filter-empty-icon-rest,
+  $pivotgrid-area-background: $pivot-grid-area-bg-rest,
+  $pivotgrid-common-top-bottom-padding: $pivot-grid-area-field-padding-block,
+  $pivotgrid-header-top-bottom-padding: $pivot-grid-header-top-bottom-padding,
+  $pivotgrid-field-indicators-offset: $pivot-grid-field-indicators-offset,
+  $pivotgrid-indicators-line-height: $pivot-grid-indicators-line-height,
+  $pivotgrid-totalcolor: $pivot-grid-total-content-rest,
+  $pivotgrid-field-area-text-color: $pivot-grid-field-area-content-rest,
+  $pivotgrid-data-area-color: $pivot-grid-data-area-content-rest,
+  $pivotgrid-grandtotalcolor: $pivot-grid-grand-total-content-rest,
+  $pivotgrid-accent-color: $pivot-grid-accent-content-rest,
+  $pivotgrid-empty-area-text-padding: $pivot-grid-empty-area-text-padding,
+  $pivotgrid-button-top-padding: $pivot-grid-button-top-padding,
+  $pivotgrid-header-cell-side-padding: $pivot-grid-header-cell-padding-inline,
+  $pivotgrid-fields-area-head-cell-side-padding: $pivot-grid-fields-area-head-cell-padding-inline,
+);
+
+// adduse
+
+
+.dx-pivotgrid-fields-container {
+  &.dx-drag {
+    .dx-area-field.dx-area-box {
+      background-color: $pivot-grid-area-field-bg-rest;
+      border: $pivot-grid-area-box-border;
+      border-color: $pivot-grid-border-disabled;
+      box-shadow: $pivot-grid-drag-header-shadow-rest;
+    }
+  }
+
+  .dx-area-field.dx-area-box {
+    color: $pivot-grid-field-area-box-content-rest;
+    background-color: $pivot-grid-field-area-box-bg-rest;
+    border-radius: $pivot-grid-area-field-border-radius;
+    border: $pivot-grid-area-box-border;
+    border-color: $pivot-grid-border-disabled;
+    font-size: $pivot-grid-headers-font-size;
+    font-weight: $pivot-grid-field-area-box-font-weight;
+    line-height: $pivot-grid-area-field-line-height;
+
+    .dx-header-filter {
+      color: $pivot-grid-header-filter-content-rest;
+
+      &.dx-header-filter-empty {
+        color: $pivot-grid-area-content-rest;
+      }
+    }
+  }
+
+  .dx-sort-up {
+    @include dx-icon-sizing(buttonSizes.$button-icon-size)
+  }
+
+  .dx-sort-down {
+    @include dx-icon-sizing(buttonSizes.$button-icon-size)
+  }
+
+  .dx-header-filter {
+    @include dx-icon-sizing(buttonSizes.$button-icon-size)
+  }
+}
+
+
+.dx-pivotgrid {
+  background-color: $pivot-grid-area-bg-rest;
+
+  .dx-pivotgrid-area {
+    &.dx-pivotgrid-area-data {
+      font-size: $pivot-grid-area-font-size;
+    }
+
+    &.dx-pivotgrid-vertical-headers,
+    &.dx-pivotgrid-horizontal-headers {
+      font-size: $pivot-grid-headers-font-size;
+
+      td {
+        font-weight: $pivot-grid-header-font-weight;
+      }
+
+      .dx-grandtotal,
+      .dx-total {
+        color: $pivot-grid-content-rest;
+      }
+    }
+
+    td {
+      padding: $pivot-grid-cell-padding;
+
+      &.dx-pivotgrid-collapsed,
+      &.dx-pivotgrid-expanded {
+        padding: $pivot-grid-expanded-cell-padding;
+
+        > span {
+          padding: $pivot-grid-expanded-padding;
+        }
+      }
+    }
+  }
+
+
+  .dx-area-description-cell {
+    .dx-pivotgrid-toolbar {
+      padding-left: $pivot-grid-toolbar-padding-inline-start;
+    }
+  }
+
+  .dx-row-total,
+  .dx-grandtotal {
+    &.dx-last-cell {
+      padding-left: $pivot-grid-total-text-left-padding;
+    }
+  }
+
+  .dx-expand-icon-container {
+    margin: 0;
+
+    @include dx-icon(chevronright);
+
+    font-size: $pivot-grid-headers-font-size;
+
+    &::before {
+      visibility: hidden;
+    }
+  }
+
+  .dx-pivotgrid-collapsed .dx-expand {
+    @include dx-icon(chevronright);
+    @include dx-icon-font-centered-sizing($pivot-grid-chevron-icon-size);
+
+    color: $pivot-grid-chevron-icon-rest;
+  }
+
+  .dx-pivotgrid-expanded .dx-expand {
+    @include dx-icon(chevrondown);
+    @include dx-icon-font-centered-sizing($pivot-grid-chevron-icon-size);
+
+    color: $pivot-grid-chevron-icon-rest;
+  }
+
+  .dx-area-tree-view {
+    td.dx-white-space-column {
+      width: $pivot-grid-empty-column-width;
+      min-width: $pivot-grid-empty-column-width;
+    }
+  }
+}
+
+.dx-pivotgridfieldchooser {
+  .dx-area-icon {
+    width: buttonSizes.$button-icon-size;
+    height: buttonSizes.$button-icon-size;
+    font-size: buttonSizes.$button-icon-size;
+  }
+
+  .dx-area {
+    .dx-area-caption {
+      text-transform: uppercase;
+      font-size: $pivot-grid-headers-font-size;
+      font-weight: $pivot-grid-header-font-weight;
+      color: $pivot-grid-area-content-rest;
+      vertical-align: middle;
+    }
+
+    .dx-area-fields {
+      margin-top: $pivot-grid-area-fields-margin-block-start;
+    }
+  }
+
+  .dx-treeview-border-visible .dx-scrollable-content > .dx-treeview-node-container {
+    padding-right: $pivot-grid-tree-view-node-container-padding-inline-end;
+  }
+
+  .dx-treeview-item-with-checkbox.dx-treeview-node-is-leaf {
+    padding-left: 0;
+
+    .dx-checkbox {
+      left: $pivot-grid-checkbox-inset-inline-start;
+    }
+  }
+
+  .dx-treeview-node-container-opened {
+    .dx-treeview-item-with-checkbox.dx-treeview-node-is-leaf {
+      padding-left: treeViewSizes.$tree-view-toggle-item-width;
+
+      .dx-checkbox {
+        left: treeViewSizes.$tree-view-checkbox-offset;
+      }
+    }
+  }
+
+  .dx-treeview-item {
+    min-height: $pivot-grid-field-chooser-field-min-height;
+    padding: $pivot-grid-tree-view-item-padding;
+
+    .dx-icon {
+      margin: $pivot-grid-icon-margin;
+
+      @include dx-icon-sizing(buttonSizes.$button-icon-size);
+    }
+  }
+
+  .dx-treeview-toggle-item-visibility {
+    height: $pivot-grid-field-chooser-field-min-height;
+  }
+}
+
+.dx-pivotgrid-fields-container { // stylelint-disable-line no-duplicate-selectors
+  .dx-position-indicator {
+    background-color: $pivot-grid-position-indicator-bg-rest;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_sizes.scss
new file mode 100644
index 000000000000..a1ff83205ee4
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_sizes.scss
@@ -0,0 +1,89 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+// Not a colour: a font weight that used to sit in _colors.scss (NAMING.md, O7)
+$pivot-grid-field-area-box-font-weight: ds.$font-weight-base-default !default;
+
+$pivot-grid-cell-padding: null !default;
+$pivot-grid-left-right-padding: null !default;
+$pivot-grid-expanded-cell-padding: null !default;
+$pivot-grid-total-text-left-padding: null !default;
+$pivot-grid-header-top-bottom-padding: null !default;
+$pivot-grid-button-top-padding: null !default;
+$pivot-grid-area-field-padding-block: null !default;
+
+$pivot-grid-empty-column-width: ds.$spacing-190 !default;
+$pivot-grid-field-indicators-offset: ds.$spacing-60 !default;
+$pivot-grid-indicators-line-height: ds.$line-height-120 !default; // dx-no-semantic-role: 120 is off the line-height-role scale
+$pivot-grid-empty-area-text-padding: ds.$spacing-50 !default;
+
+$pivot-grid-area-field-border-radius: null !default;
+
+@if $size == "default" {
+  $pivot-grid-cell-padding: ds.$spacing-100 ds.$spacing-160 !default;
+  $pivot-grid-left-right-padding: ds.$spacing-100 !default;
+  $pivot-grid-header-top-bottom-padding: ds.$spacing-140 !default;
+  $pivot-grid-expanded-cell-padding: ds.$spacing-100 ds.$spacing-140 ds.$spacing-100 ds.$spacing-190 !default;
+  $pivot-grid-total-text-left-padding: ds.$spacing-220 !default;
+  $pivot-grid-button-top-padding: ds.$spacing-100 !default;
+  $pivot-grid-area-field-border-radius: ds.$border-radius-60 !default;
+  $pivot-grid-area-field-padding-block: ds.$spacing-50 !default;
+}
+
+@else if $size == "compact" {
+  $pivot-grid-cell-padding: ds.$spacing-70 ds.$spacing-110 !default;
+  $pivot-grid-left-right-padding: ds.$spacing-80 !default;
+  $pivot-grid-header-top-bottom-padding: ds.$spacing-50 !default;
+  $pivot-grid-expanded-cell-padding: ds.$spacing-70 ds.$spacing-80 ds.$spacing-70 ds.$spacing-130 !default;
+  $pivot-grid-total-text-left-padding: ds.$spacing-160 !default;
+  $pivot-grid-button-top-padding: ds.$spacing-50 !default;
+  $pivot-grid-area-field-border-radius: ds.$border-radius-40 !default;
+  $pivot-grid-area-field-padding-block: ds.$spacing-10 !default;
+}
+
+// Values hoisted from style-file literals (tokenized)
+$pivot-grid-headers-font-size: ds.$font-size-title-xs !default;
+$pivot-grid-area-font-size: 13px !default; // dx-offscale: 13px
+$pivot-grid-area-field-line-height: ds.$line-height-base-md !default;
+$pivot-grid-header-font-weight: ds.$font-weight-500 !default; // dx-no-semantic-role: 500 is off the weight-role scale (400/600/700)
+$pivot-grid-expanded-padding: 0 ds.$spacing-50 0 ds.$spacing-100 !default;
+$pivot-grid-toolbar-padding-inline-start: ds.$spacing-80 !default;
+$pivot-grid-area-fields-margin-block-start: ds.$spacing-80 !default;
+$pivot-grid-tree-view-node-container-padding-inline-end: ds.$spacing-80 !default;
+$pivot-grid-checkbox-inset-inline-start: ds.$spacing-80 !default;
+$pivot-grid-tree-view-item-padding: ds.$spacing-90 ds.$spacing-80 !default;
+$pivot-grid-icon-margin: 0 ds.$spacing-50 -1px 0 !default; // dx-offscale: -1px
+$pivot-grid-area-box-border: ds.$border-width-10 solid !default;
+$pivot-grid-chevron-icon-size: ds.$spacing-200 !default;
+$pivot-grid-field-chooser-field-min-height: ds.$spacing-360 !default;
+
+// Base-layer sizing injected with design tokens (wave B2)
+$pivot-grid-position-indicator-vertical-height: ds.$spacing-20 !default;
+$pivot-grid-position-indicator-horizontal-width: ds.$spacing-20 !default;
+$pivot-grid-position-indicator-last-margin-inline-start: ds.$spacing-30 !default;
+$pivot-grid-area-box-margin-block-end: ds.$spacing-40 !default;
+$pivot-grid-expand-icon-container-outline: ds.$spacing-20 solid !default;
+$pivot-grid-toolbar-margin-inline-end: ds.$spacing-100 !default;
+$pivot-grid-field-chooser-button-margin-inline-end: ds.$spacing-40 !default;
+$pivot-grid-button-margin: ds.$spacing-10 !default;
+$pivot-grid-last-cell-min-width: 50px !default; // dx-offscale: 50px
+$pivot-grid-icon-sorted-margin-inline-start: ds.$spacing-50 !default;
+$pivot-grid-fields-area-head-padding: 0 ds.$spacing-20 !default;
+$pivot-grid-tree-view-search-margin: ds.$spacing-50 !default;
+$pivot-grid-area-padding: ds.$spacing-50 !default;
+$pivot-grid-area-fields-margin-block-start-alt: ds.$spacing-30 !default;
+$pivot-grid-position-indicator-last-rtl-margin-inline-start: ds.$spacing-10 !default;
+$pivot-grid-toolbar-margin-inline-start: ds.$spacing-100 !default;
+$pivot-grid-field-chooser-button-margin-inline-start: ds.$spacing-40 !default;
+$pivot-grid-fields-area-head-padding-inline-start: ds.$spacing-20 !default;
+$pivot-grid-icon-sorted-margin-inline-end: ds.$spacing-50 !default;
+
+// Base submodule sizing injected with design tokens (B2 tail)
+$pivot-grid-field-chooser-drag-width: ds.$spacing-1000 !default;
+$pivot-grid-field-chooser-drag-height: ds.$spacing-1000 !default;
+
+// B2 tail: pivotGrid cell side paddings
+$pivot-grid-header-cell-padding-inline: ds.$spacing-20 !default;
+$pivot-grid-fields-area-head-cell-padding-inline: ds.$spacing-20 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/popover/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/popover/_colors.scss
new file mode 100644
index 000000000000..89c53a85429e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/popover/_colors.scss
@@ -0,0 +1,6 @@
+@use "sass:color";
+@use "../sizes" as *;
+@use "../colors" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/popover/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/popover/_index.scss
new file mode 100644
index 000000000000..9f1be60f9507
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/popover/_index.scss
@@ -0,0 +1,15 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/popover";
+
+// adduse
+
+.dx-popover-wrapper {
+  .dx-popup-title {
+    margin: 0;
+    border-top-left-radius: $popover-popup-title-border-start-start-radius;
+    border-top-right-radius: $popover-popup-title-border-start-end-radius;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/popover/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/popover/_sizes.scss
new file mode 100644
index 000000000000..7bc2e50fca4a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/popover/_sizes.scss
@@ -0,0 +1,9 @@
+@use "../../../_design-system/variables/ds" as ds;
+@use "../sizes" as *;
+
+// adduse
+
+
+// Values hoisted from style-file literals (tokenized)
+$popover-popup-title-border-start-start-radius: ds.$border-radius-60 !default;
+$popover-popup-title-border-start-end-radius: ds.$border-radius-60 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/popup/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/popup/_colors.scss
new file mode 100644
index 000000000000..7969580668c4
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/popup/_colors.scss
@@ -0,0 +1,16 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$popup-title-bg-rest: transparent !default;
+$popup-title-content-rest: ds.$color-content-neutral-default-rest !default;
+$popup-title-border-rest: ds.$color-border-neutral-default-rest !default;
+$popup-bottom-bg-rest: $popup-title-bg-rest !default;
+$popup-bottom-content-rest: ds.$color-content-neutral-default-rest !default;
+$popup-content-shadow-ambient-rest: ds.$color-shadow-ambient !default;
+$popup-content-shadow-key-rest: ds.$color-shadow-key !default;
+$popup-content-shadow-focused: ds.$color-shadow-key !default;
+
+// Base-layer values injected with design tokens (wave B1)
+$popup-dialog-backdrop-rest: ds.$color-surface-backdrop-default-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/popup/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/popup/_index.scss
new file mode 100644
index 000000000000..411bf9181dbf
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/popup/_index.scss
@@ -0,0 +1,85 @@
+@use "sass:color";
+@use "../common/colors" as *;
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../toolbar/mixins" as *;
+@use "../../base/popup" with (
+  $popup-title-padding: $popup-title-padding,
+  $popup-title-min-height-2: $fluent-popup-title-min-height-2,
+  $popup-dialog-message-padding: $popup-dialog-message-padding,
+  $popup-dialog-shader-color: $popup-dialog-backdrop-rest,
+);
+
+// adduse
+@use "../overlay";
+
+.dx-popup-wrapper {
+  & > .dx-overlay-content {
+    background: $surface-overlay-rest;
+    box-shadow: $popup-content-box-shadow;
+    border-radius: $popup-border-radius;
+  }
+
+  & > .dx-popup-fullscreen {
+    border-radius: 0;
+  }
+
+  .dx-state-focused {
+    &.dx-overlay-content {
+      box-shadow: $popup-content-box-shadow-focused;
+    }
+  }
+}
+
+.dx-popup-title {
+  position: relative;
+  min-height: $popup-title-min-height;
+  border-bottom: $popup-title-border-block-end;
+  border-bottom-color: $popup-title-border-rest;
+  background: $popup-title-bg-rest;
+  color: $popup-title-content-rest;
+
+  &.dx-toolbar {
+    @include dx-toolbar-sizing(
+      $popup-toolbar-height,
+      0 $popup-toolbar-padding-inline,
+      $popup-toolbar-label-font-size,
+      $popup-toolbar-item-spacing
+    );
+
+    box-shadow: none;
+  }
+}
+
+.dx-popup-content {
+  padding: $popup-content-padding-block $popup-content-padding;
+
+  & > .dx-button {
+    margin: $popup-button-margin;
+  }
+}
+
+.dx-popup-bottom {
+  background: $popup-bottom-bg-rest;
+  color: $popup-bottom-content-rest;
+
+  &.dx-toolbar {
+    @include dx-toolbar-sizing(
+      $popup-bottom-toolbar-height,
+      0 $popup-content-with-title-top-padding $popup-content-with-title-bottom-padding,
+      $popup-toolbar-label-font-size,
+      $popup-toolbar-item-spacing
+    );
+  }
+}
+
+.dx-popup-content.dx-dialog-content {
+  min-width: calc(220px - 2 * #{$popup-content-padding});
+  padding: $popup-content-padding-block $popup-content-padding;
+}
+
+.dx-dialog-message {
+  padding: 0;
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/popup/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/popup/_sizes.scss
new file mode 100644
index 000000000000..70b0ecf1f35d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/popup/_sizes.scss
@@ -0,0 +1,70 @@
+@use "../sizes" as *;
+@use "colors" as *;
+@use "../../../_design-system/variables/ds" as ds;
+@use "../typography/sizes" as typographySizes;
+
+// adduse
+
+// Not a colour: a radius that used to sit in _colors.scss (NAMING.md, O7)
+$popup-border-radius: calc(#{$global-border-radius} * 2) !default;
+
+$popup-content-padding: null !default;
+$popup-content-padding-block: null !default;
+$popup-content-with-title-top-padding: null !default;
+$popup-content-with-title-bottom-padding: null !default;
+$popup-toolbar-padding-inline: null !default;
+$popup-bottom-toolbar-height: null !default;
+$popup-toolbar-height: null !default;
+
+$popup-button-margin: 0 ds.$spacing-80 !default;
+$popup-toolbar-item-spacing: ds.$spacing-80 !default;
+
+$popup-content-box-shadow: null !default;
+$popup-content-box-shadow-focused: null !default;
+
+@if $size == "default" {
+  $popup-content-padding: ds.$spacing-240 !default;
+  $popup-content-padding-block: ds.$spacing-160 !default;
+  $popup-content-with-title-top-padding: ds.$spacing-240 !default;
+  $popup-content-with-title-bottom-padding: ds.$spacing-160 !default;
+
+  $popup-toolbar-padding-inline: ds.$spacing-240 !default;
+  $popup-bottom-toolbar-height: ds.$spacing-480 !default;
+  $popup-toolbar-height: ds.$spacing-480 !default;
+
+  $popup-content-box-shadow: 0 0 ds.$spacing-80 0 $popup-content-shadow-ambient-rest, 0 ds.$spacing-320 ds.$spacing-640 0 $popup-content-shadow-key-rest !default;
+  $popup-content-box-shadow-focused: 0 0 ds.$spacing-120 0 $popup-content-shadow-focused, 0 ds.$spacing-320 ds.$spacing-640 0 $popup-content-shadow-focused !default;
+}
+
+@else if $size == "compact" {
+  $popup-content-padding: ds.$spacing-160 !default;
+  $popup-content-padding-block: ds.$spacing-120 !default;
+  $popup-content-with-title-top-padding: ds.$spacing-160 !default;
+  $popup-content-with-title-bottom-padding: ds.$spacing-120 !default;
+
+  $popup-toolbar-padding-inline: ds.$spacing-160 !default;
+  $popup-bottom-toolbar-height: ds.$spacing-360 !default;
+  $popup-toolbar-height: ds.$spacing-360 !default;
+
+  $popup-content-box-shadow: 0 0 ds.$spacing-80 0 $popup-content-shadow-ambient-rest, 0 ds.$spacing-320 ds.$spacing-640 0 $popup-content-shadow-key-rest !default;
+  $popup-content-box-shadow-focused: 0 0 ds.$spacing-120 0 $popup-content-shadow-focused, 0 ds.$spacing-320 ds.$spacing-640 0 $popup-content-shadow-focused !default;
+}
+
+:root {
+  --dx-popup-toolbar-item-padding-inline: #{$popup-toolbar-item-spacing};
+}
+
+// Values hoisted from style-file literals (tokenized)
+$popup-title-border-block-end: ds.$border-width-10 solid !default;
+$popup-title-min-height: ds.$spacing-280 !default;
+
+// Base-layer sizing injected with design tokens (wave B2)
+$popup-title-padding: ds.$spacing-100 !default;
+$fluent-popup-title-min-height-2: ds.$spacing-190 !default;
+$popup-dialog-message-padding: ds.$spacing-100 ds.$spacing-100 ds.$spacing-50 ds.$spacing-100 !default;
+
+/*
+ * Derived values, moved out of _index.scss: a file that emits rules must not declare
+ * variables (NAMING.md, O7).
+ */
+$popup-toolbar-label-font-size: typographySizes.$typography-m-font-size;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/progressBar/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/progressBar/_colors.scss
new file mode 100644
index 000000000000..7c2336714699
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/progressBar/_colors.scss
@@ -0,0 +1,19 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$progress-bar-bg-rest: ds.$color-border-neutral-default-rest !default;
+
+$progress-bar-range-bg-rest: ds.$color-content-primary-default-rest !default;
+$progress-bar-container-bg-disabled: ds.$color-border-neutral-default-disabled !default;
+$progress-bar-range-bg-disabled: ds.$color-content-neutral-default-disabled !default;
+$progress-bar-range-indeterminate-bg-rest: ds.$color-content-primary-default-rest !default;
+$progress-bar-range-invalid-bg-rest: ds.$color-surface-danger-default-rest !default;
+
+$progress-bar-indeterminate-bg-rest: -90deg, transparent 5%, $progress-bar-range-indeterminate-bg-rest, transparent 95%;
+$progress-bar-indeterminate-bg-disabled: -90deg, transparent 5%, $progress-bar-range-bg-disabled, transparent 95%;
+$progress-bar-indeterminate-invalid-bg-rest: -90deg, transparent 5%, $progress-bar-range-invalid-bg-rest, transparent 95%;
+
+$progress-bar-label-content-rest: ds.$color-content-neutral-default-rest !default;
+
+$progress-bar-content-disabled: ds.$color-content-neutral-default-disabled !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/progressBar/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/progressBar/_index.scss
new file mode 100644
index 000000000000..2032b864cf29
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/progressBar/_index.scss
@@ -0,0 +1,128 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/mixins" as *;
+@use "../../base/progressBar" with (
+  $progressbar-status-padding-right: $progress-bar-status-padding-inline-end,
+  $progressbar-status-padding-left: $progress-bar-status-padding-inline-start,
+  $progressbar-status-font-size: $progress-bar-status-font-size,
+);
+
+// adduse
+
+.dx-progressbar-container {
+  height: $progress-bar-height;
+  background-color: $progress-bar-bg-rest;
+  border-radius: $progress-bar-border-radius;
+}
+
+.dx-progressbar-range {
+  position: relative;
+  background-color: $progress-bar-range-bg-rest;
+  border-radius: $progress-bar-border-radius;
+  box-sizing: content-box;
+}
+
+.dx-progressbar-animating-container {
+  height: $progress-bar-height;
+  background-color: $progress-bar-bg-rest;
+  background-size: $progress-bar-indeterminate-width 5px;
+  animation: dx-loader 2s linear infinite;
+  border-radius: $progress-bar-border-radius;
+
+  @include gradient-linear($progress-bar-indeterminate-bg-rest);
+
+  background-repeat: repeat;
+}
+
+.dx-invalid {
+  .dx-progressbar-range {
+    background-color: $progress-bar-range-invalid-bg-rest;
+  }
+
+  .dx-progressbar-animating-container {
+    @include gradient-linear($progress-bar-indeterminate-invalid-bg-rest);
+
+    background-repeat: repeat;
+  }
+}
+
+.dx-state-disabled {
+  &.dx-progressbar {
+    opacity: 1;
+  }
+
+  .dx-progressbar-container {
+    background-color: $progress-bar-container-bg-disabled;
+  }
+
+  .dx-progressbar-range {
+    background-color: $progress-bar-range-bg-disabled;
+  }
+
+  .dx-progressbar-status {
+    color: $progress-bar-content-disabled;
+  }
+
+  .dx-progressbar-animating-container {
+    animation: none;
+
+    @include gradient-linear($progress-bar-indeterminate-bg-disabled);
+
+    background-position-x: math.div($progress-bar-indeterminate-width, 2);
+  }
+}
+
+.dx-progressbar-status {
+  padding-top: $progress-bar-status-margin-block-start;
+  color: $progress-bar-label-content-rest;
+
+  .dx-progressbar .dx-position-right & {
+    padding-top: 0;
+  }
+}
+
+.dx-rtl {
+  .dx-progressbar,
+  &.dx-progressbar {
+    .dx-progressbar-animating-container {
+      animation: dx-loader-rtl 2s linear infinite;
+
+      @include gradient-linear($progress-bar-indeterminate-bg-rest);
+
+      background-repeat: repeat;
+    }
+
+    &.dx-state-disabled {
+      .dx-progressbar-animating-container {
+        animation: none;
+
+        @include gradient-linear($progress-bar-indeterminate-bg-disabled);
+
+        background-position-x: math.div($progress-bar-indeterminate-width, 2);
+      }
+    }
+  }
+}
+
+@keyframes dx-loader {
+  0% {
+    background-position-x: 0;
+  }
+
+  100% {
+    background-position-x: 900%;
+  }
+}
+
+@keyframes dx-loader-rtl {
+  0% {
+    background-position-x: 0;
+  }
+
+  100% {
+    background-position-x: -900%;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/progressBar/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/progressBar/_sizes.scss
new file mode 100644
index 000000000000..2d01bc8fad23
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/progressBar/_sizes.scss
@@ -0,0 +1,26 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$progress-bar-height: null !default;
+$progress-bar-border-radius: $global-border-radius !default;
+$progress-bar-status-margin-block-start: null !default;
+$progress-bar-indeterminate-width: 90%;
+
+@if $size == "default" {
+  $progress-bar-height: ds.$spacing-40 !default;
+  $progress-bar-status-margin-block-start: ds.$spacing-120 !default;
+}
+
+@else if $size == "compact" {
+  $progress-bar-height: ds.$spacing-20 !default;
+  $progress-bar-status-margin-block-start: ds.$spacing-80 !default;
+}
+
+// Base-layer values injected with design tokens (wave B1)
+$progress-bar-status-font-size: ds.$font-size-caption-md !default;
+
+// Base-layer sizing injected with design tokens (wave B2)
+$progress-bar-status-padding-inline-end: ds.$spacing-80 !default;
+$progress-bar-status-padding-inline-start: ds.$spacing-80 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/radioButton/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/radioButton/_colors.scss
new file mode 100644
index 000000000000..ee0014fbeab9
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/radioButton/_colors.scss
@@ -0,0 +1,22 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+/*
+ * Moved from radioGroup/: these are the RADIO BUTTON's colours, and radioButton owns
+ * `radio-button` (NAMING.md, O2). The readers followed.
+ */
+$radio-button-icon-bg-rest: ds.$color-surface-neutral-default-rest !default;
+$radio-button-icon-border-rest: ds.$color-border-neutral-accessible-rest !default;
+$radio-button-icon-border-hovered: ds.$color-border-neutral-accessible-hovered !default;
+$radio-button-icon-border-active: ds.$color-border-neutral-accessible-active !default;
+$radio-button-icon-border-read-only: $radio-button-icon-border-rest !default;
+$radio-button-icon-bg-focused: ds.$color-surface-neutral-alpha-hovered !default;
+$radio-button-checked-bg-rest: ds.$color-surface-primary-default-rest !default;
+$radio-button-checked-bg-hovered: ds.$color-surface-primary-default-hovered !default;
+$radio-button-checked-bg-active: ds.$color-surface-primary-default-active !default;
+$radio-button-invalid-bg-rest: ds.$color-border-danger-compound-rest !default;
+$radio-button-invalid-bg-hovered: ds.$color-border-danger-compound-hovered !default;
+$radio-button-invalid-bg-focused: ds.$color-border-danger-compound-active !default;
+
+$radio-button-content-disabled: ds.$color-content-neutral-default-disabled !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/radioButton/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/radioButton/_index.scss
new file mode 100644
index 000000000000..73858456dde9
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/radioButton/_index.scss
@@ -0,0 +1,152 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/radioButton/mixins" as *;
+@use "../../base/radioButton";
+
+// adduse
+
+@include dx-radiobutton-icon-mixin(
+  $radio-button-size,
+  $radio-button-border-width,
+  $radio-button-dot-size,
+  true,
+);
+@include dx-radiobutton-states-mixin(
+  $radio-button-icon-bg-rest,
+  $radio-button-icon-border-rest,
+  $radio-button-icon-border-read-only,
+  null,
+  null,
+  $radio-button-icon-bg-focused,
+  $radio-button-checked-bg-rest,
+  $radio-button-invalid-bg-rest,
+  $radio-button-invalid-bg-hovered,
+  $radio-button-invalid-bg-focused,
+  1,
+  true,
+);
+
+.dx-radiobutton-icon {
+  &::after {
+    content: none;
+  }
+}
+
+.dx-radio-value-container {
+  padding-inline-end: $radio-button-value-container-padding-inline-end;
+}
+
+.dx-state-readonly {
+  .dx-radiobutton-icon-dot {
+    background-color: $radio-button-content-disabled;
+  }
+
+  .dx-radiobutton-icon {
+    border-color: $radio-button-content-disabled;
+  }
+
+  .dx-radiobutton-checked {
+    &.dx-state-hover,
+    &.dx-state-focused,
+    &.dx-state-active {
+      .dx-radiobutton-icon-dot {
+        background-color: $radio-button-content-disabled;
+      }
+    }
+  }
+}
+
+.dx-radiobutton {
+  &.dx-state-hover {
+    .dx-radiobutton-icon {
+      border-color: $radio-button-icon-border-hovered;
+    }
+  }
+
+  &.dx-state-active {
+    .dx-radiobutton-icon {
+      border-color: $radio-button-icon-border-active;
+    }
+  }
+
+  &.dx-state-focused {
+    .dx-radiobutton-icon {
+      border-color: $radio-button-checked-bg-active;
+    }
+  }
+}
+
+.dx-radiobutton-checked {
+  &.dx-state-hover {
+    .dx-radiobutton-icon {
+      border-color: $radio-button-checked-bg-hovered;
+    }
+
+    .dx-radiobutton-icon-dot {
+      background-color: $radio-button-checked-bg-hovered;
+    }
+  }
+
+  &.dx-state-active,
+  &.dx-state-focused {
+    .dx-radiobutton-icon {
+      border-color: $radio-button-checked-bg-active;
+    }
+
+    .dx-radiobutton-icon-dot {
+      background-color: $radio-button-checked-bg-active;
+    }
+  }
+}
+
+.dx-invalid {
+  .dx-state-hover {
+    &.dx-radiobutton {
+      .dx-radiobutton-icon {
+        border-color: $radio-button-invalid-bg-hovered;
+      }
+
+      .dx-radiobutton-icon-dot {
+        background-color: $radio-button-invalid-bg-hovered;
+      }
+    }
+  }
+
+  .dx-state-active,
+  .dx-state-focused {
+    &.dx-radiobutton {
+      .dx-radiobutton-icon {
+        border-color: $radio-button-invalid-bg-focused;
+      }
+
+      .dx-radiobutton-icon-dot {
+        background-color: $radio-button-invalid-bg-focused;
+      }
+    }
+  }
+
+  &.dx-state-readonly {
+    .dx-radiobutton {
+      .dx-radiobutton-icon-dot {
+        background-color: $radio-button-content-disabled;
+      }
+    }
+  }
+}
+
+.dx-state-disabled {
+  .dx-radiobutton {
+    color: $radio-button-content-disabled;
+
+    .dx-radiobutton-icon {
+      border-color: $radio-button-content-disabled;
+    }
+
+    .dx-radiobutton-icon-dot {
+      background-color: $radio-button-content-disabled;
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/radioButton/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/radioButton/_sizes.scss
new file mode 100644
index 000000000000..63bc3e93fd3b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/radioButton/_sizes.scss
@@ -0,0 +1,18 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$radio-button-size: ds.$spacing-160 !default;
+$radio-button-dot-size: ds.$spacing-100 !default;
+
+$radio-button-border-width: ds.$border-width-10 !default;
+$radio-button-value-container-padding-inline-end: null !default;
+
+@if $size == "default" {
+  $radio-button-value-container-padding-inline-end: ds.$spacing-120 !default;
+}
+
+@else if $size == "compact" {
+  $radio-button-value-container-padding-inline-end: ds.$spacing-80 !default;
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/radioGroup/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/radioGroup/_colors.scss
new file mode 100644
index 000000000000..9245073c70f1
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/radioGroup/_colors.scss
@@ -0,0 +1,10 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+/*
+ * The shared radio mixin paints ring (border) and dot (content) with one variable per state;
+ * the danger-compound border/content/surface roles resolve identically, so a single variable
+ * stays faithful. Extend dx-radiobutton-states-mixin args if the DS ever splits these roles.
+ */
+
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/radioGroup/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/radioGroup/_index.scss
new file mode 100644
index 000000000000..4369fafd0842
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/radioGroup/_index.scss
@@ -0,0 +1,28 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/radioGroup/mixins" as *;
+@use "../../base/radioGroup" with (
+  $radiogroup-radio-value-container-padding-inline-end: $radio-group-value-container-padding-inline-end,
+  $radiogroup-collection-column-gap-2: $radio-group-collection-horizontal-column-gap,
+);
+
+// adduse
+@use "../radioButton";
+@include dx-radiogroup-mixin(
+  $radio-group-radio-button-margin-block,
+  0,
+);
+
+.dx-radiogroup {
+  &.dx-state-disabled {
+    opacity: 1;
+  }
+}
+
+.dx-radiogroup-horizontal {
+  .dx-collection {
+    column-gap: $radio-group-collection-column-gap;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/radioGroup/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/radioGroup/_sizes.scss
new file mode 100644
index 000000000000..c44cb054ea7f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/radioGroup/_sizes.scss
@@ -0,0 +1,22 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$radio-group-radio-button-margin-block: null !default;
+
+@if $size == "default" {
+  $radio-group-radio-button-margin-block: ds.$spacing-120 !default;
+}
+
+@else if $size == "compact" {
+  $radio-group-radio-button-margin-block: ds.$spacing-60 !default;
+}
+
+
+// Values hoisted from style-file literals (tokenized)
+$radio-group-collection-column-gap: ds.$spacing-160 !default;
+
+// Base-layer sizing injected with design tokens (wave B2)
+$radio-group-value-container-padding-inline-end: ds.$spacing-100 !default;
+$radio-group-collection-horizontal-column-gap: ds.$spacing-170 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/rangeSlider/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/rangeSlider/_colors.scss
new file mode 100644
index 000000000000..89c53a85429e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/rangeSlider/_colors.scss
@@ -0,0 +1,6 @@
+@use "sass:color";
+@use "../sizes" as *;
+@use "../colors" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/rangeSlider/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/rangeSlider/_index.scss
new file mode 100644
index 000000000000..3c0f79100cb5
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/rangeSlider/_index.scss
@@ -0,0 +1,13 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/rangeSlider";
+@use "../slider/sizes" as sliderSizes;
+
+// adduse
+
+.dx-rangeslider-start-handle {
+  margin-inline-start: calc(#{sliderSizes.$slider-handle-size} / -2);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/rangeSlider/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/rangeSlider/_sizes.scss
new file mode 100644
index 000000000000..43b104010f9e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/rangeSlider/_sizes.scss
@@ -0,0 +1,4 @@
+@use "../sizes" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/recurrenceEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/recurrenceEditor/_colors.scss
new file mode 100644
index 000000000000..89c53a85429e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/recurrenceEditor/_colors.scss
@@ -0,0 +1,6 @@
+@use "sass:color";
+@use "../sizes" as *;
+@use "../colors" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/recurrenceEditor/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/recurrenceEditor/_index.scss
new file mode 100644
index 000000000000..7367c6b5b1aa
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/recurrenceEditor/_index.scss
@@ -0,0 +1,39 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/recurrenceEditor" ;
+
+// adduse
+
+
+.dx-recurrence-numberbox-interval {
+  margin-right: $recurrence-editor-number-box-margin;
+}
+
+.dx-recurrence-numberbox-interval-label {
+  font-size: $global-font-size;
+  margin-top: $recurrence-editor-interval-number-box-margin-block-start;
+}
+
+.dx-recurrence-button-group {
+  .dx-button-content {
+    padding: $recurrence-editor-button-group-padding;
+  }
+
+  .dx-buttongroup-wrapper > div {
+    min-width: 0;
+  }
+}
+
+.dx-recurrence-radiogroup-repeat-type {
+  margin: $recurrence-editor-radio-group-margin 0;
+}
+
+.dx-recurrence-datebox-until-date {
+  margin-top: $recurrence-editor-until-date-box-margin-block-start;
+}
+
+.dx-recurrence-numberbox-repeat-count {
+  margin-top: $recurrence-editor-count-number-box-margin-block-start;
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/recurrenceEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/recurrenceEditor/_sizes.scss
new file mode 100644
index 000000000000..ef935da127b3
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/recurrenceEditor/_sizes.scss
@@ -0,0 +1,25 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$recurrence-editor-until-date-box-margin-block-start: null !default;
+$recurrence-editor-count-number-box-margin-block-start: null !default;
+$recurrence-editor-interval-number-box-margin-block-start: null !default;
+
+@if $size == "default" {
+  $recurrence-editor-until-date-box-margin-block-start: ds.$spacing-600 !default;
+  $recurrence-editor-count-number-box-margin-block-start: 102px !default; // dx-offscale: 102px
+  $recurrence-editor-interval-number-box-margin-block-start: ds.$spacing-300 !default;
+}
+
+@else if $size == "compact" {
+  $recurrence-editor-until-date-box-margin-block-start: 46px !default; // dx-offscale: 46px
+  $recurrence-editor-count-number-box-margin-block-start: 78px !default; // dx-offscale: 78px
+  $recurrence-editor-interval-number-box-margin-block-start: ds.$spacing-220 !default;
+}
+
+// Values hoisted from style-file literals (tokenized)
+$recurrence-editor-number-box-margin: ds.$spacing-110 !default;
+$recurrence-editor-button-group-padding: ds.$spacing-60 !default;
+$recurrence-editor-radio-group-margin: ds.$spacing-150 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/responsiveBox/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/responsiveBox/_colors.scss
new file mode 100644
index 000000000000..89c53a85429e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/responsiveBox/_colors.scss
@@ -0,0 +1,6 @@
+@use "sass:color";
+@use "../sizes" as *;
+@use "../colors" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/responsiveBox/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/responsiveBox/_index.scss
new file mode 100644
index 000000000000..72e36b8f5b32
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/responsiveBox/_index.scss
@@ -0,0 +1,7 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/responsiveBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/responsiveBox/_sizes.scss
new file mode 100644
index 000000000000..43b104010f9e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/responsiveBox/_sizes.scss
@@ -0,0 +1,4 @@
+@use "../sizes" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_colors.scss
new file mode 100644
index 000000000000..49c205be8c45
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_colors.scss
@@ -0,0 +1,65 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$scheduler-base-border-rest: ds.$color-border-neutral-default-rest !default;
+$scheduler-cell-bg-active: ds.$color-surface-neutral-default-active !default;
+$scheduler-cell-bg-hovered: ds.$color-surface-neutral-default-hovered !default;
+$scheduler-group-separator-border-rest: ds.$color-border-neutral-accessible-rest !default;
+
+$scheduler-accent-border-rest: ds.$color-border-neutral-default-rest !default;
+
+$scheduler-appointment-content-rest: ds.$color-content-neutral-default-rest !default;
+$scheduler-appointment-content-focused: null !default;
+
+$scheduler-appointment-base-content-rest: ds.$color-surface-primary-subdued-rest !default;
+
+$scheduler-appointment-start-content-rest: ds.$color-shadow-key-darker !default;
+$scheduler-appointment-content-active: ds.$color-surface-primary-deep-active;
+
+$scheduler-workspace-cell-content-focused: ds.$color-surface-primary-alpha-rest !default;
+
+$scheduler-first-month-border-rest: ds.$color-border-neutral-default-rest !default;
+$scheduler-droppable-cell-bg-rest: ds.$color-surface-neutral-deep-rest !default;
+$scheduler-panel-content-rest: ds.$color-content-neutral-subdued-rest !default;
+$scheduler-workspace-bg-rest: ds.$color-surface-neutral-default-rest !default;
+$scheduler-workspace-accent-content-rest: ds.$color-content-primary-default-rest !default;
+
+$scheduler-current-time-cell-content-rest: ds.$color-content-primary-default-rest !default;
+$scheduler-time-indicator-content-rest: ds.$color-surface-danger-default-rest !default;
+$scheduler-dd-appointment-content-hovered: ds.$color-content-neutral-default-inverted-rest !default;
+$scheduler-form-icon-rest: ds.$color-content-neutral-subdued-rest !default;
+$scheduler-workspace-month-content-rest: ds.$color-content-neutral-default-rest !default;
+$scheduler-workspace-other-month-content-rest: ds.$color-content-neutral-subdued-rest !default;
+$scheduler-dropdown-appointment-date-content-rest: ds.$color-content-neutral-subdued-rest !default;
+$scheduler-workspace-cell-content-active: $scheduler-accent-border-rest !default;
+$scheduler-workspace-cell-content-hovered: $scheduler-workspace-month-content-rest !default;
+$scheduler-header-bg-rest: ds.$color-surface-neutral-default-rest !default;
+$scheduler-all-day-panel-bg-rest: ds.$color-surface-neutral-default-rest !default;
+$scheduler-appointment-bg-focused: false !default;
+$scheduler-appointment-shadow-focused: false !default;
+$scheduler-time-indicator-bg-rest: rgb(from #{ds.$color-content-neutral-default-rest} r g b / 0.03) !default;
+
+$scheduler-tooltip-appointment-content-rest: ds.$color-content-neutral-default-rest !default;
+$scheduler-appointment-overlay-bg-rest: ds.$color-surface-neutral-default-rest !default;
+
+// Agenda
+$scheduler-agenda-appointment-recurrence-icon-rest: ds.$color-content-neutral-default-inverted-rest !default;
+$scheduler-agenda-appointment-bg-hovered: ds.$color-surface-neutral-default-hovered !default;
+$scheduler-agenda-appointment-bg-active: ds.$color-surface-neutral-alpha-active !default;
+$scheduler-agenda-appointment-content-rest: ds.$color-content-neutral-default-rest !default;
+
+$scheduler-header-panel-cell-date-content-rest: ds.$color-content-neutral-subdued-rest !default;
+
+$scheduler-first-month-cell-bg-rest: rgb(from #{$scheduler-appointment-base-content-rest} r g b / 0.15) !default;
+$scheduler-appointment-content-focused: $scheduler-appointment-content-rest;
+
+// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
+$scheduler-appointment-strip-bg-rest: ds.$color-surface-primary-default-rest !default;
+$scheduler-bg-rest: ds.$color-surface-neutral-default-rest !default;
+$scheduler-border-rest: ds.$color-border-neutral-default-rest !default;
+$scheduler-inverted-content-rest: ds.$color-content-neutral-default-inverted-rest !default;
+
+// Base-layer values injected with design tokens (wave B1)
+$scheduler-appointment-dragging-shadow-rest: 7px 7px 15px 0 ds.$color-shadow-key !default;
+$scheduler-tooltip-shadow-rest: ds.$box-shadow-md !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_index.scss
new file mode 100644
index 000000000000..566a902f91b2
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_index.scss
@@ -0,0 +1,1088 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../list/colors" as listColors;
+@use "../radioGroup/sizes" as radioGroupSizes;
+@use "../toolbar/sizes" as toolbarSizes;
+@use '../../base/scheduler/layout/header' as baseSchedulerHeader;
+@use "../../base/mixins" as *;
+@use "../../base/icon_fonts" as *;
+@use "../../base/scheduler" as baseScheduler with (
+  $scheduler-appointment-reduced-icon-top: $scheduler-appointment-reduced-icon-inset-block-start,
+  $scheduler-appointment-active-marker-border-radius: $scheduler-appointment-marker-border-radius-active,
+  $scheduler-appointment-content-details-margin-top: $scheduler-appointment-content-details-margin-block-start,
+  $scheduler-appointment-reduced-icon-rtl-left: $scheduler-appointment-reduced-icon-rtl-inset-inline-start,
+  $agenda-appointment-item-padding: $scheduler-agenda-appointment-item-padding,
+  $agenda-appointment-item-border-radius: $scheduler-agenda-appointment-item-border-radius,
+  $agenda-appointment-right-layout-margin-left: $scheduler-agenda-appointment-right-layout-margin-inline-start,
+  $agenda-appointment-allday-padding-right: $scheduler-agenda-appointment-allday-padding-inline-end,
+  $agenda-appointment-resource-item-margin-left: $scheduler-agenda-appointment-resource-item-margin-inline-start,
+  $agenda-appointment-resource-value-margin-left: $scheduler-agenda-appointment-resource-value-margin-inline-start,
+  $agenda-appointment-rtl-margin-right: $scheduler-agenda-appointment-rtl-margin-inline-end,
+  $scheduler-timeline-min-height: $scheduler-timeline-min-height,
+  $scheduler-timeline-group-two-empty-cell-width: $scheduler-timeline-group-two-empty-cell-width,
+  $scheduler-timeline-group-header-width: $scheduler-timeline-group-header-width,
+  $scheduler-timeline-group-three-empty-cell-width: $scheduler-timeline-group-three-empty-cell-width,
+  $scheduler-timeline-cell-width: $scheduler-timeline-cell-width,
+  $scheduler-agenda-left-column-width: $scheduler-agenda-left-column-width,
+  $scheduler-group-header-agenda-font-size: $scheduler-group-header-agenda-font-size,
+  $scheduler-agenda-date-table-padding-top: $scheduler-agenda-date-table-padding-block-start,
+  $scheduler-renovation-virtual-row-height: $scheduler-virtual-row-height,
+  $scheduler-tooltip-width: $scheduler-tooltip-width,
+  $scheduler-tooltip-content-padding: $scheduler-tooltip-content-padding,
+  $scheduler-tooltip-title-margin-top: $scheduler-tooltip-title-margin-block-start,
+  $scheduler-tooltip-title-margin-left: $scheduler-tooltip-title-margin-inline-start,
+  $scheduler-tooltip-date-margin: $scheduler-tooltip-date-margin,
+  $scheduler-tooltip-remove-margin-top: $scheduler-tooltip-remove-margin-block-start,
+  $scheduler-common-collector-margin: $scheduler-common-collector-margin,
+  $scheduler-common-collector-size: $scheduler-common-collector-size,
+  $scheduler-appointment-content-padding-2: $scheduler-all-day-appointment-content-padding,
+  $scheduler-appointment-recurrence-icon-top: $scheduler-appointment-recurrence-icon-inset-block-start,
+  $scheduler-header-panel-current-time-cell-height: $scheduler-header-panel-current-time-cell-height,
+  $scheduler-appointment-content-padding-3: $scheduler-recurrence-appointment-content-padding,
+  $scheduler-rtl-padding: $scheduler-rtl-padding,
+  $scheduler-appointment-collector-width: $scheduler-appointment-collector-width,
+  $scheduler-appointment-content-padding-right: $scheduler-appointment-content-padding-inline-end,
+  $scheduler-views-header-border: $scheduler-views-header-border,
+  $scheduler-views-empty-cell-border-bottom: $scheduler-views-empty-cell-border-block-end,
+  $scheduler-views-empty-cell-border-right: $scheduler-views-empty-cell-border-inline-end,
+  $scheduler-views-empty-cell-border-left: $scheduler-views-empty-cell-border-inline-start,
+  $scheduler-views-first-child-border-left: $scheduler-views-first-child-border-inline-start,
+  $scheduler-views-time-panel-border-bottom: $scheduler-views-time-panel-border-block-end,
+  $scheduler-views-group-header-padding: $scheduler-views-group-header-padding,
+  $scheduler-views-group-header-padding-alt: $scheduler-views-sidebar-group-header-padding,
+  $scheduler-views-time-indicator-height: $scheduler-views-time-indicator-height,
+  $scheduler-views-group-header-content-height: $scheduler-views-group-header-content-height,
+  $scheduler-views-vertical-group-min-height: $scheduler-views-vertical-group-min-height,
+  $scheduler-tooltip-shadow: $scheduler-tooltip-shadow-rest,
+  $scheduler-appointment-icon-font-size: $scheduler-appointment-icon-font-size,
+  $scheduler-appointment-date-opacity: $scheduler-appointment-date-opacity,
+  $scheduler-appointment-resizing-opacity: $scheduler-appointment-resizing-opacity,
+  $scheduler-appointment-disabled-opacity: $scheduler-appointment-opacity-disabled,
+  $scheduler-appointment-drag-source-opacity: $scheduler-appointment-drag-source-opacity,
+  $agenda-appointment-title-font-weight: $scheduler-agenda-title-font-weight,
+  $agenda-appointment-details-font-size: $scheduler-agenda-details-font-size,
+  $agenda-appointment-details-opacity: $scheduler-agenda-details-opacity,
+  $scheduler-appointment-dragging-shadow: $scheduler-appointment-dragging-shadow-rest,
+  $scheduler-tooltip-appointment-text-color: $scheduler-tooltip-appointment-content-rest,
+  $scheduler-appointment-overlay-bg: $scheduler-appointment-overlay-bg-rest,
+  $scheduler-tooltip-list-focused-bg: listColors.$list-item-bg-hovered,
+  $scheduler-appointment-base-color: $scheduler-appointment-base-content-rest,
+  $scheduler-appointment-start-color: $scheduler-appointment-start-content-rest,
+  $scheduler-appointment-active-color: $scheduler-appointment-content-active,
+  $scheduler-base-border-color: $scheduler-base-border-rest,
+  $scheduler-accent-border-color: $scheduler-accent-border-rest,
+  $scheduler-current-time-cell-color: $scheduler-current-time-cell-content-rest,
+  $scheduler-time-indicator-color: $scheduler-time-indicator-content-rest,
+  $scheduler-time-indicator-background-color: $scheduler-time-indicator-bg-rest,
+  $scheduler-workspace-background-color: $scheduler-workspace-bg-rest,
+  $scheduler-other-month-cell-opacity: $scheduler-other-month-cell-opacity,
+  $scheduler-workspace-month-text-color: $scheduler-workspace-month-content-rest,
+  $scheduler-workspace-accent-color: $scheduler-workspace-accent-content-rest,
+  $scheduler-first-month-cell-background-color: $scheduler-first-month-cell-bg-rest,
+  $scheduler-panel-text-color: $scheduler-panel-content-rest,
+  $scheduler-left-column-width: $scheduler-left-column-width,
+  $scheduler-timeline-cell-height: $scheduler-timeline-cell-height,
+  $scheduler-workspace-active-cell-color: $scheduler-workspace-cell-content-active,
+  $scheduler-workspace-hovered-cell-color: $scheduler-workspace-cell-content-hovered,
+  $scheduler-workspace-focused-cell-color: $scheduler-workspace-cell-content-focused,
+  $scheduler-droppable-cell-background-color: $scheduler-droppable-cell-bg-rest,
+  $scheduler-appointment-text-color: $scheduler-appointment-content-rest,
+  $scheduler-fill-focused-appointment: $scheduler-appointment-bg-focused,
+  $scheduler-is-shadow-color-for-focused-state: $scheduler-appointment-shadow-focused,
+  $scheduler-dd-appointment-hover-text-color: $scheduler-dd-appointment-content-hovered,
+
+  $agenda-appointment-recurrence-icon-color: $scheduler-agenda-appointment-recurrence-icon-rest,
+  $agenda-appointment-hover-bg: $scheduler-agenda-appointment-bg-hovered,
+  $agenda-appointment-active-bg: $scheduler-agenda-appointment-bg-active,
+  $agenda-appointment-text-color: $scheduler-agenda-appointment-content-rest,
+  $agenda-appointment-title-font-size: $scheduler-agenda-appointment-title-font-size,
+
+  $scheduler-appointment-popup-icon-margin-top: $scheduler-appointment-popup-icon-margin-block-start,
+  $scheduler-appointment-popup-repeat-end-item-height: $scheduler-appointment-popup-repeat-end-item-height,
+  $scheduler-appointment-popup-repeat-end-item-vertical-margin: radioGroupSizes.$radio-group-radio-button-margin-block,
+  $scheduler-appointment-content-details-font-size: $scheduler-appointment-content-details-font-size,
+  $scheduler-tooltip-subject-font-size: $scheduler-tooltip-subject-font-size,
+  $scheduler-tooltip-date-font-size: $scheduler-tooltip-date-font-size
+);
+@use "../button/colors" as buttonColors;
+@use "../button/mixins" as *;
+@use "../tooltip/sizes" as tooltipSizes;
+
+// adduse
+@use "../recurrenceEditor" as *;
+@use "../scrollable";
+@include baseScheduler.scheduler-mixin();
+
+.dx-scheduler-timeline .dx-scheduler-header-panel-cell {
+  height: auto;
+}
+
+.dx-scheduler-date-time-indicator {
+  &::before {
+    display: none;
+  }
+}
+
+.dx-scheduler-container {
+  border-radius: $scheduler-border-radius;
+}
+
+.dx-scheduler-time-panel-cell {
+  height: $scheduler-workspace-date-table-cell-height;
+
+  &::after {
+    content: none;
+  }
+
+  > div {
+    margin-top: $scheduler-time-panel-cell-margin-block-start;
+    font-size: $scheduler-time-panel-font-size;
+
+    .dx-scheduler-small & {
+      font-size: calc(#{$scheduler-time-panel-font-size} - 1px);
+    }
+  }
+
+  padding-right: $scheduler-agenda-time-panel-cell-padding;
+
+  .dx-scheduler-small & {
+    padding-right: $scheduler-small-padding-inline-end;
+  }
+
+  .dx-rtl & {
+    padding-left: $scheduler-agenda-time-panel-cell-padding;
+    padding-right: 0;
+  }
+
+  .dx-rtl.dx-scheduler-small & {
+    padding-left: $scheduler-small-padding-inline-start;
+  }
+
+  &.dx-scheduler-time-panel-current-time-cell::before {
+    content: none;
+  }
+}
+
+.dx-scheduler-date-table-cell {
+  height: $scheduler-workspace-date-table-cell-height;
+}
+
+.dx-scheduler-all-day-title {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  height: $scheduler-all-day-table-cell-height;
+  font-size: $scheduler-all-day-title-font-size;
+  border-bottom: baseScheduler.$scheduler-base-border;
+  border-bottom-color: $scheduler-base-border-rest;
+  text-align: right;
+  padding-right: $scheduler-agenda-time-panel-cell-padding;
+
+  .dx-rtl & {
+    justify-content: start;
+  }
+
+  .dx-scheduler-small & {
+    font-size: calc(#{$scheduler-all-day-title-font-size} * 0.8);
+    padding-right: $scheduler-small-padding-inline-end;
+  }
+
+  .dx-scheduler-work-space-all-day-collapsed & {
+    height: $scheduler-collapsed-all-day-table-cell-height;
+  }
+}
+
+.dx-scheduler-all-day-table {
+  height: $scheduler-all-day-table-cell-height;
+
+  .dx-scheduler-work-space-all-day-collapsed & {
+    height: $scheduler-collapsed-all-day-table-cell-height;
+  }
+}
+
+.dx-scheduler-appointment-content { // stylelint-disable-line no-duplicate-selectors
+  padding: $scheduler-appointment-content-padding;
+}
+
+.dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content {
+  padding: $scheduler-recurring-appointment-content-padding;
+}
+
+.dx-rtl .dx-scheduler-appointment-content {
+  padding: $scheduler-appointment-content-rtl-padding;
+}
+
+.dx-rtl .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content {
+  padding: $scheduler-recurring-appointment-content-rtl-padding;
+}
+
+.dx-scheduler-appointment-title {
+  font-size: $scheduler-appointment-title-font-size;
+}
+
+.dx-scheduler-appointment-content-details {
+  font-size: $scheduler-appointment-details-font-size;
+}
+
+.dx-rtl .dx-scheduler-work-space-day {
+  .dx-scheduler-all-day-appointment {
+    .dx-scheduler-appointment-content {
+      padding: $scheduler-appointment-content-rtl-padding;
+    }
+  }
+}
+
+.dx-scheduler-work-space-week,
+.dx-scheduler-work-space-work-week,
+.dx-scheduler-work-space-day {
+  .dx-scheduler-all-day-appointment {
+    .dx-scheduler-appointment-content {
+      padding: $scheduler-appointment-content-padding;
+    }
+  }
+
+  .dx-scheduler-date-time-indicator {
+    height: $scheduler-date-time-indicator-height;
+  }
+
+  .dx-scheduler-date-table-row:nth-child(even) .dx-scheduler-date-table-cell {
+    border-top-style: dashed;
+  }
+
+  .dx-scheduler-appointment {
+    container-type: size;
+
+    &.dx-scheduler-appointment-recurrence {
+      @container (max-height: #{$scheduler-appointment-15min-height}) {
+        .dx-scheduler-appointment-content {
+          padding-right: $scheduler-appointment-10min-recurrence-padding-inline-end;
+        }
+      }
+
+      @container (min-height: #{$scheduler-appointment-15min-height}) and (max-height: #{$scheduler-appointment-20min-height}) {
+        .dx-scheduler-appointment-content {
+          padding-right: $scheduler-appointment-15min-recurrence-padding-inline-end;
+        }
+      }
+
+      @container (min-height: #{$scheduler-appointment-20min-height}) and (max-height: #{$scheduler-appointment-25min-height}) {
+        .dx-scheduler-appointment-content {
+          padding-right: $scheduler-appointment-20min-recurrence-padding-inline-end;
+        }
+      }
+    }
+
+    .dx-scheduler-appointment-content {
+      @container (max-height: #{$scheduler-appointment-25min-height}) {
+        display: flex;
+        align-items: center;
+        padding: $scheduler-appointment-short-content-padding;
+
+        .dx-scheduler-appointment-content-details {
+          display: none;
+        }
+
+        .dx-scheduler-appointment-recurrence-icon {
+          top: 50%;
+          transform: translateY(-50%);
+        }
+      }
+    }
+
+    @container (max-height: #{$scheduler-appointment-15min-height}) {
+      .dx-scheduler-appointment-content {
+        .dx-scheduler-appointment-title {
+          font-size: $scheduler-appointment-10min-title-font-size;
+          line-height: $scheduler-appointment-10min-title-line-height;
+        }
+
+        .dx-scheduler-appointment-recurrence-icon {
+          right: $scheduler-appointment-10min-icon-inset-inline-end;
+          font-size: $scheduler-appointment-10min-icon-font-size;
+        }
+      }
+    }
+
+    @container (min-height: #{$scheduler-appointment-15min-height}) and (max-height: #{$scheduler-appointment-20min-height}) {
+      .dx-scheduler-appointment-content {
+        .dx-scheduler-appointment-title {
+          font-size: $scheduler-appointment-15min-title-font-size;
+          line-height: $scheduler-appointment-15min-title-line-height;
+        }
+
+        .dx-scheduler-appointment-recurrence-icon {
+          right: $scheduler-appointment-15min-icon-inset-inline-end;
+          font-size: $scheduler-appointment-15min-icon-font-size;
+        }
+      }
+    }
+
+    @container (min-height: #{$scheduler-appointment-20min-height}) and (max-height: #{$scheduler-appointment-25min-height}) {
+      .dx-scheduler-appointment-content {
+        .dx-scheduler-appointment-recurrence-icon {
+          right: $scheduler-appointment-20min-icon-inset-inline-end;
+        }
+      }
+    }
+  }
+}
+
+.dx-scheduler-header-panel {
+  margin-top: 0;
+}
+
+.dx-scheduler-header-panel-cell {
+  font-size: $scheduler-time-panel-font-size;
+  padding-bottom: $scheduler-header-panel-cell-padding-block-end;
+  padding-left: $scheduler-header-panel-time-cell-padding;
+  padding-right: $scheduler-header-panel-time-cell-padding;
+  text-align: left;
+  vertical-align: bottom;
+
+  .dx-rtl & {
+    text-align: right;
+  }
+
+  .dx-scheduler-work-space.dx-scheduler-work-space-month & {
+    height: $scheduler-header-panel-time-cell-height;
+  }
+
+  .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-week &,
+  .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-work-week &,
+  .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-month & {
+    @include flex-container(column, nowrap);
+  }
+
+  .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-week &,
+  .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-work-week &,
+  .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-month &,
+  .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-day & {
+    align-items: flex-start;
+    justify-content: flex-end;
+  }
+
+  .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-day & {
+    align-items: flex-end;
+
+    &:not(.dx-scheduler-header-panel-week-cell) {
+      height: $scheduler-workspace-month-timeline-time-height;
+      font-size: $scheduler-time-panel-font-size;
+      padding-left: $scheduler-header-panel-margin;
+      padding-right: $scheduler-header-panel-margin;
+    }
+
+    &.dx-scheduler-header-panel-week-cell {
+      align-items: flex-start;
+      display: flex;
+    }
+  }
+
+  &.dx-scheduler-header-panel-week-cell {
+    border-bottom: baseScheduler.$scheduler-base-border;
+    border-bottom-color: $scheduler-base-border-rest;
+    flex-flow: column;
+    justify-content: flex-end;
+  }
+
+  &.dx-scheduler-header-panel-current-time-cell {
+    color: $scheduler-panel-content-rest;
+
+    &::before {
+      content: none;
+    }
+
+    .dx-scheduler-header-panel-cell-date:first-child {
+      margin-bottom: $scheduler-header-panel-cell-date-margin-block-end;
+    }
+
+    .dx-scheduler-header-panel-cell-date:last-child {
+      color: $scheduler-inverted-content-rest;
+      background-color: $scheduler-current-time-cell-content-rest;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      width: $scheduler-header-day-element-height;
+      height: $scheduler-header-day-element-height;
+      margin-top: 0;
+    }
+  }
+
+  .dx-scheduler-header-panel-cell-date {
+    display: block;
+    font-size: $scheduler-header-panel-cell-date-font-size;
+
+    .dx-scheduler-small & {
+      margin: 0 calc(#{$scheduler-header-panel-margin} * #{baseScheduler.$scheduler-small-size-factor});
+    }
+
+    &:last-child {
+      font-size: $scheduler-header-panel-day-font-size;
+      margin-top: $scheduler-small-margin-block-start;
+      margin-bottom: $scheduler-small-margin-block-end;
+      margin-left: $scheduler-small-margin-inline-start;
+      color: $scheduler-header-panel-cell-date-content-rest;
+    }
+  }
+}
+
+.dx-scheduler-timeline {
+  .dx-scheduler-date-table-cell {
+    height: $scheduler-timeline-date-table-cell-height;
+  }
+}
+
+.dx-scheduler-work-space-day {
+  &.dx-scheduler-work-space-count {
+    .dx-scheduler-header-panel {
+      margin-top: 0;
+    }
+  }
+
+  .dx-scheduler-header-panel {
+    .dx-scheduler-group-row {
+      &:not(:first-child) {
+        border-bottom: none;
+      }
+    }
+  }
+
+  &:not(.dx-scheduler-work-space-count):not(.dx-scheduler-work-space-grouped) {
+    .dx-scheduler-time-panel,
+    .dx-scheduler-header-panel-empty-cell {
+      border-right: baseScheduler.$scheduler-base-border;
+      border-right-color: $scheduler-base-border-rest;
+    }
+  }
+}
+
+.dx-rtl .dx-scheduler-work-space.dx-scheduler-work-space-month {
+  .dx-scheduler-appointment-content {
+    padding: $scheduler-month-appointment-content-rtl-padding;
+  }
+
+  .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content {
+    padding: $scheduler-month-recurrence-appointment-content-rtl-padding;
+  }
+}
+
+.dx-scheduler-work-space.dx-scheduler-work-space-month {
+  .dx-scheduler-date-table-other-month {
+    color: $scheduler-workspace-other-month-content-rest;
+  }
+
+  .dx-scheduler-header-panel-cell-date:last-child {
+    color: $scheduler-header-panel-cell-date-content-rest;
+    border-radius: initial;
+    background-color: initial;
+  }
+
+  .dx-scheduler-appointment-content {
+    padding: $scheduler-month-appointment-content-padding;
+    font-size: $scheduler-appointment-month-font-size;
+  }
+
+  .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content {
+    padding: $scheduler-month-recurrence-appointment-content-padding;
+  }
+
+  .dx-scheduler-date-table-first-of-month {
+    border-left: $scheduler-first-of-month-border;
+    border-left-color: $scheduler-first-month-border-rest;
+    border-top: $scheduler-first-of-month-border;
+    border-top-color: $scheduler-first-month-border-rest;
+  }
+
+  .dx-scheduler-header-panel {
+    border-bottom: none;
+  }
+
+  .dx-scheduler-date-table-scrollable .dx-scrollable-content {
+    min-height: $scheduler-scrollable-content-min-height;
+  }
+
+  .dx-scheduler-date-table-cell {
+    font-size: $scheduler-month-date-font-size;
+    text-align: left;
+    height: $scheduler-date-table-cell-height;
+
+    > div {
+      padding: $scheduler-workspace-month-cell-left-offset;
+    }
+
+    .dx-rtl & {
+      text-align: right;
+    }
+  }
+
+  .dx-scheduler-header-panel-current-time-cell {
+    .dx-scheduler-header-panel-cell-date343 {
+      border-radius: initial;
+      background-color: initial;
+      color: $scheduler-current-time-cell-content-rest;
+    }
+  }
+
+  .dx-scheduler-header-panel-cell { // stylelint-disable-line no-duplicate-selectors
+    padding-left: $scheduler-workspace-month-cell-left-offset;
+
+    .dx-scheduler-header-panel-cell-date {
+      margin-left: 0;
+      line-height: $scheduler-workspace-month-header-height;
+    }
+  }
+
+  .dx-scheduler-date-table-current-date {
+    color: $scheduler-current-time-cell-content-rest;
+  }
+}
+
+.dx-scheduler:not(.dx-scheduler-adaptive) {
+  .dx-scheduler-work-space.dx-scheduler-work-space-day,
+  .dx-scheduler-work-space.dx-scheduler-work-space-week,
+  .dx-scheduler-work-space.dx-scheduler-work-space-work-week {
+    .dx-scheduler-fixed-appointments,
+    .dx-scheduler-date-table-container {
+      .dx-scheduler-appointment-collector {
+        margin: $scheduler-dropdown-button-margin-block;
+      }
+    }
+  }
+
+  .dx-scheduler-work-space.dx-scheduler-work-space-month:not(.dx-rtl) .dx-scheduler-appointment-collector {
+    margin-left: $scheduler-appointment-collector-margin-inline-start;
+  }
+
+  .dx-scheduler-work-space.dx-scheduler-work-space-month.dx-rtl .dx-scheduler-appointment-collector {
+    margin-right: $scheduler-appointment-collector-margin-inline-end;
+  }
+}
+
+.dx-scheduler-adaptive {
+  .dx-scheduler-work-space-week .dx-scheduler-header-panel-cell {
+    white-space: nowrap;
+  }
+
+  .dx-scheduler-appointment-collector {
+    margin: $scheduler-dropdown-button-adaptive-margin;
+  }
+
+  .dx-scheduler-work-space.dx-scheduler-work-space-day,
+  .dx-scheduler-work-space.dx-scheduler-work-space-week,
+  .dx-scheduler-work-space.dx-scheduler-work-space-work-week {
+    .dx-scheduler-fixed-appointments,
+    .dx-scheduler-date-table-container {
+      .dx-scheduler-appointment-collector {
+        margin: $scheduler-dropdown-button-adaptive-margin-block;
+      }
+    }
+  }
+}
+
+.dx-scheduler-appointment-collector {
+  height: $scheduler-dropdown-button-height;
+  margin: $scheduler-dropdown-button-margin;
+  position: absolute;
+
+  &.dx-button {
+    border-radius: $scheduler-dropdown-button-height;
+    height: $scheduler-dropdown-button-height;
+    min-width: auto;
+    width: auto;
+
+    &::before {
+      display: none;
+    }
+
+    .dx-button-content {
+      padding: $scheduler-dropdown-button-padding 0;
+      font-size: $scheduler-navigator-button-font-size;
+    }
+  }
+}
+
+.dx-scheduler-header {
+  @include baseSchedulerHeader.header-sizes(
+    $scheduler-header-height,
+    $scheduler-header-offset,
+    $scheduler-toolbar-item-offset,
+  );
+
+  .dx-scheduler-navigator-next,
+  .dx-scheduler-navigator-previous {
+    @include dx-button-onlyicon-sizing($scheduler-navigator-icon-font-size);
+  }
+
+  background-color: $scheduler-header-bg-rest;
+  border-top-right-radius: $scheduler-border-radius;
+  border-top-left-radius: $scheduler-border-radius;
+}
+
+.dx-scheduler-group-row {
+  .dx-scheduler-group-header {
+    font-weight: $scheduler-group-header-font-weight;
+  }
+}
+
+.dx-scheduler-group-table,
+.dx-scheduler-header-panel {
+  .dx-scheduler-group-row {
+    .dx-scheduler-group-header {
+      font-size: $scheduler-group-header-font-size;
+      text-align: left;
+      border-bottom: $scheduler-group-header-border-block-end;
+      border-bottom-color: $scheduler-base-border-rest;
+
+      .dx-scheduler-group-header-content {
+        padding-left: $scheduler-header-panel-margin;
+
+        .dx-scheduler-work-space-month &,
+        .dx-scheduler-agenda & {
+          padding-left: $scheduler-workspace-month-cell-left-offset;
+
+          .dx-rtl & {
+            padding-right: $scheduler-workspace-month-cell-left-offset;
+            padding-left: 0;
+          }
+        }
+
+        .dx-scheduler-timeline & {
+          padding-left: 0;
+        }
+      }
+
+      .dx-scheduler-timeline & {
+        vertical-align: top;
+
+        .dx-scheduler-group-header-content div {
+          top: $scheduler-group-header-content-inset-block-start;
+          transform: none;
+        }
+      }
+
+      .dx-rtl & {
+        text-align: right;
+      }
+    }
+  }
+}
+
+.dx-scheduler-all-day-panel {
+  background-color: $scheduler-all-day-panel-bg-rest;
+
+  .dx-scheduler-all-day-table-cell {
+    border-bottom: baseScheduler.$scheduler-base-border;
+    border-bottom-color: $scheduler-base-border-rest;
+  }
+}
+
+.dx-scheduler-work-space { // stylelint-disable-line no-duplicate-selectors
+  border-bottom-right-radius: $scheduler-border-radius;
+  border-bottom-left-radius: $scheduler-border-radius;
+
+  &:not(.dx-scheduler-work-space-all-day):not(.dx-scheduler-work-space-month):not(.dx-scheduler-timeline) {
+    .dx-scheduler-header-panel,
+    .dx-scheduler-header-panel-empty-cell {
+      border-bottom-width: $scheduler-header-panel-empty-cell-border-block-end-width;
+    }
+  }
+
+  &.dx-scheduler-work-space-grouped {
+    .dx-scheduler-all-day-title {
+      border-top: baseScheduler.$scheduler-base-border;
+      border-top-color: $scheduler-base-border-rest;
+    }
+
+    &.dx-scheduler-work-space-all-day:not(.dx-scheduler-work-space-week):not(.dx-scheduler-work-space-work-week) {
+      .dx-scheduler-group-header {
+        border-bottom: none;
+      }
+    }
+
+    &.dx-scheduler-agenda {
+      .dx-scheduler-date-table-cell {
+        border: none;
+      }
+    }
+
+    &.dx-scheduler-timeline .dx-scheduler-group-row th {
+      .dx-rtl & {
+        border-left: none;
+        border-right: none;
+      }
+    }
+
+    &.dx-scheduler-work-space-both-scrollbar:not(.dx-scheduler-agenda) {
+      .dx-scheduler-all-day-panel {
+        .dx-scheduler-first-group-cell {
+          border-left: none;
+        }
+      }
+    }
+  }
+}
+
+.dx-scheduler-work-space-week {
+  .dx-scheduler-date-table-row:first-child {
+    border-top: none;
+  }
+}
+
+.dx-scheduler-all-day-table-cell,
+.dx-scheduler-date-table-cell {
+  &.dx-state-active {
+    background-color: $scheduler-cell-bg-active;
+  }
+
+  &.dx-state-hover {
+    background-color: $scheduler-cell-bg-hovered;
+    color: $scheduler-workspace-cell-content-hovered;
+  }
+
+  &.dx-scheduler-focused-cell {
+    box-shadow: none;
+  }
+}
+
+.dx-scheduler-appointment-popup {
+  > .dx-overlay-content > .dx-toolbar.dx-widget {
+    > .dx-toolbar-items-container {
+      height: $scheduler-appointment-popup-toolbar-height;
+    }
+  }
+
+  .dx-form {
+    .dx-scheduler-form-icon {
+      color: $scheduler-form-icon-rest;
+
+      &.dx-field-item.dx-flex-layout {
+        height: $scheduler-appointment-popup-icon-container-height;
+        padding-inline-end: $scheduler-appointment-popup-icon-padding-inline-end;
+      }
+    }
+
+    .dx-scheduler-form-icon-sized-gap {
+      width: $global-icon-size;
+    }
+
+    .dx-scheduler-form-subject-group .dx-scheduler-form-icon {
+      color: $scheduler-appointment-base-content-rest;
+    }
+
+    .dx-scheduler-days-of-week-buttons {
+      height: toolbarSizes.$toolbar-height;
+      gap: $scheduler-appointment-popup-days-of-week-buttons-gap;
+    }
+
+    .dx-field-item:not(.dx-first-col) {
+      padding-inline-start: $scheduler-appointment-popup-item-padding-inline;
+    }
+
+    .dx-field-item:not(.dx-last-col) {
+      padding-inline-end: $scheduler-appointment-popup-item-padding-inline;
+    }
+
+    .dx-scheduler-form-all-day-switch.dx-field-item.dx-label-h-align {
+      height: $scheduler-appointment-popup-all-day-item-height;
+
+      .dx-field-item-content {
+        .dx-switch.dx-widget {
+          margin-bottom: $scheduler-widget-margin-block-end;
+        }
+      }
+    }
+
+    .dx-scheduler-form-repeat-editor .dx-scheduler-form-recurrence-settings-button {
+      height: auto;
+
+      &.dx-button-mode-text.dx-state-focused {
+        outline: auto;
+        outline-offset: -2px;
+      }
+    }
+  }
+}
+
+.dx-scheduler-header-panel,
+.dx-scheduler-time-panel {
+  font-size: $scheduler-workspace-info-font-size;
+}
+
+.dx-scheduler-work-space-grouped:not(.dx-scheduler-agenda) .dx-scheduler-group-row th,
+.dx-scheduler-work-space.dx-scheduler-work-space-grouped:not(.dx-scheduler-work-space-vertical-grouped):not(.dx-scheduler-timeline) .dx-scheduler-last-group-cell {
+  border-right: $scheduler-last-group-cell-border-inline-end;
+  border-right-color: $scheduler-group-separator-border-rest;
+
+  &:last-child {
+    border-right: none;
+  }
+
+  .dx-rtl & {
+    border-left: $scheduler-rtl-border-inline-start;
+    border-left-color: $scheduler-group-separator-border-rest;
+    border-right: baseScheduler.$scheduler-base-border;
+    border-right-color: $scheduler-base-border-rest;
+
+    &:last-child {
+      border-left: none;
+    }
+  }
+}
+
+.dx-scheduler-appointment {
+  &,
+  .dx-rtl &,
+  .dx-scheduler-work-space-month &,
+  .dx-scheduler-timeline &,
+  .dx-rtl .dx-scheduler-timeline & {
+    border-left: $scheduler-appointment-transparent-left-border;
+    border-right: $scheduler-appointment-transparent-right-border;
+    box-shadow: none;
+    border-radius: $scheduler-appointment-border-radius;
+
+    &.dx-state-focused {
+      color: $scheduler-appointment-content-focused;
+    }
+
+    &.dx-state-active,
+    &.dx-resizable-resizing,
+    &.dx-state-hover,
+    &.dx-state-hover.dx-resizable {
+      box-shadow: none;
+    }
+  }
+}
+
+.dx-scheduler-fixed-appointments .dx-draggable-dragging .dx-scheduler-appointment {
+  box-shadow: none;
+}
+
+.dx-scheduler-dropdown-appointment-date {
+  color: $scheduler-dropdown-appointment-date-content-rest;
+}
+
+.dx-scheduler-work-space-vertical-grouped { // stylelint-disable-line no-duplicate-selectors
+  &.dx-scheduler-work-space-month {
+    .dx-scheduler-date-table-scrollable {
+      border-top: baseScheduler.$scheduler-base-border;
+      border-top-color: $scheduler-base-border-rest;
+    }
+  }
+}
+
+.dx-scheduler-work-space-both-scrollbar {
+  .dx-scheduler-all-day-title {
+    background-color: $scheduler-all-day-panel-bg-rest;
+  }
+
+  .dx-scheduler-header-panel {
+    .dx-scheduler-group-header:first-child {
+      border-left: none;
+    }
+  }
+}
+
+.dx-scheduler-appointment:not(.dx-scheduler-appointment-has-resource-color) {
+  container-type: size;
+
+  .dx-scheduler-appointment-strip {
+    display: block;
+    position: absolute;
+    width: $scheduler-appointment-strip-width;
+    height: 100%;
+    background-color: $scheduler-appointment-strip-bg-rest;
+  }
+
+  @container (max-width: 8px) {
+    .dx-scheduler-appointment-strip {
+      display: none;
+    }
+  }
+}
+
+.dx-rtl.dx-scheduler-appointment:not(.dx-scheduler-appointment-has-resource-color) {
+  .dx-scheduler-appointment-strip {
+    border-top-right-radius: $scheduler-appointment-strip-border-start-end-radius;
+    border-bottom-right-radius: $scheduler-appointment-strip-border-end-end-radius;
+  }
+}
+
+.dx-scheduler-appointment:not(.dx-scheduler-appointment-has-resource-color):not(.dx-rtl) {
+  .dx-scheduler-appointment-strip {
+    border-top-left-radius: $scheduler-appointment-strip-border-start-start-radius;
+    border-bottom-left-radius: $scheduler-appointment-strip-border-end-start-radius;
+  }
+}
+
+.dx-scheduler-agenda {
+  .dx-scheduler-group-header {
+    font-size: $scheduler-group-header-font-size;
+    width: $scheduler-group-header-table-cell-width;
+
+    .dx-scheduler-group-header-content {
+      padding-top: $scheduler-group-header-content-padding-block-start;
+      width: $scheduler-group-header-table-cell-width;
+
+      &::before {
+        display: none;
+      }
+    }
+  }
+
+  .dx-scheduler-date-table-row,
+  .dx-scheduler-time-panel-row {
+    box-shadow: inset 0 -1px 0 0 $scheduler-border-rest;
+  }
+
+  .dx-scheduler-time-panel-cell {
+    text-align: left;
+    padding-left: $scheduler-agenda-time-panel-cell-padding;
+    padding-right: 0;
+
+    .dx-rtl & {
+      text-align: right;
+      padding-right: $scheduler-agenda-time-panel-cell-padding;
+      padding-left: 0;
+    }
+
+    > span {
+      font-size: $scheduler-time-panel-font-size;
+    }
+  }
+
+  .dx-scheduler-date-table-scrollable {
+    padding-top: 0;
+  }
+
+  &.dx-scheduler-work-space-grouped {
+    .dx-scheduler-group-header {
+      border-bottom: none;
+    }
+
+    .dx-scheduler-date-table-row.dx-scheduler-date-table-last-row,
+    .dx-scheduler-time-panel-row.dx-scheduler-date-table-last-row,
+    .dx-scheduler-group-table .dx-scheduler-group-row {
+      border-bottom: none;
+
+      &:not(:last-child) {
+        box-shadow: inset 0 -1px 0 0 $scheduler-group-separator-border-rest;
+      }
+    }
+  }
+}
+
+.dx-scheduler-agenda-nodata {
+  font-size: $scheduler-workspace-info-font-size;
+}
+
+.dx-popup-content .dx-scheduler-dropdown-appointment-buttons-block {
+  .dx-button {
+    min-width: auto;
+    padding: 0;
+
+    @include dx-button-flat-color-styling(
+      buttonColors.$button-default-text-content-rest,
+      buttonColors.$button-default-text-content-hovered,
+      buttonColors.$button-default-text-content-active,
+      buttonColors.$button-default-text-bg-rest,
+      buttonColors.$button-default-text-bg-hovered,
+      buttonColors.$button-default-text-bg-focused,
+      buttonColors.$button-default-text-bg-active
+    );
+
+    .dx-icon {
+      @include dx-icon-sizing($global-icon-size);
+    }
+  }
+}
+
+.dx-rtl {
+  .dx-scheduler-work-space-both-scrollbar {
+    .dx-scheduler-header-panel {
+      .dx-scheduler-group-header:first-child {
+        border-right: none;
+      }
+    }
+  }
+
+  &.dx-scheduler-work-space-day {
+    &:not(.dx-scheduler-work-space-count):not(.dx-scheduler-work-space-grouped) {
+      .dx-scheduler-time-panel,
+      .dx-scheduler-header-panel-empty-cell {
+        border-left: baseScheduler.$scheduler-base-border;
+        border-left-color: $scheduler-base-border-rest;
+        border-right: none;
+      }
+    }
+  }
+}
+
+.dx-scheduler-appointment-tooltip-wrapper,
+.dx-scheduler-overlay-panel {
+  .dx-overlay-content {
+    background-color: $scheduler-bg-rest;
+
+    .dx-popup-content {
+      padding: 0;
+    }
+
+    .dx-list {
+      .dx-list-item {
+        margin-bottom: 0;
+        margin-top: 0;
+        border-bottom: $scheduler-list-item-border-block-end;
+        border-bottom-color: $scheduler-border-rest;
+
+        &:last-of-type {
+          border-bottom-left-radius: tooltipSizes.$tooltip-border-radius;
+          border-bottom-right-radius: tooltipSizes.$tooltip-border-radius;
+          border-bottom: none;
+        }
+
+        &:first-of-type {
+          border-top-left-radius: tooltipSizes.$tooltip-border-radius;
+          border-top-right-radius: tooltipSizes.$tooltip-border-radius;
+        }
+
+        .dx-tooltip-appointment-item {
+          margin-left: $scheduler-appointment-tooltip-content-margin-inline-start;
+
+          .dx-tooltip-appointment-item-marker-body {
+            margin-top: $scheduler-tooltip-appointment-item-marker-body-margin-block-start;
+            width: $scheduler-tooltip-marker-size;
+            height: $scheduler-tooltip-marker-size;
+          }
+
+          .dx-tooltip-appointment-item-content {
+            .dx-tooltip-appointment-item-content-subject {
+              margin-top: $scheduler-appointment-tooltip-title-margin-block-start;
+              font-size: $scheduler-appointment-tooltip-title-font-size;
+              font-weight: $scheduler-tooltip-subject-font-weight;
+            }
+
+            .dx-tooltip-appointment-item-content-date {
+              font-size: $scheduler-appointment-tooltip-date-font-size;
+              opacity: 1;
+              margin-top: $scheduler-tooltip-appointment-item-content-date-margin-block-start;
+            }
+          }
+
+          .dx-tooltip-appointment-item-delete-button-container {
+            padding-top: $scheduler-appointment-tooltip-remove-padding-block-start;
+          }
+        }
+      }
+    }
+  }
+}
+
+.dx-scheduler-timeline .dx-scheduler-group-flex-container .dx-scheduler-group-header {
+  width: $scheduler-group-header-width;
+}
+
+.dx-scheduler-header-panel-empty-cell {
+  margin-top: 0;
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_sizes.scss
new file mode 100644
index 000000000000..350787587bca
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_sizes.scss
@@ -0,0 +1,335 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// Not colours: opacities that used to sit in _colors.scss (NAMING.md, O7)
+$scheduler-other-month-cell-opacity: 1 !default;
+$scheduler-agenda-details-opacity: ds.$opacity-70 !default;
+$scheduler-appointment-date-opacity: ds.$opacity-70 !default;
+$scheduler-appointment-resizing-opacity: ds.$opacity-70 !default;
+$scheduler-appointment-opacity-disabled: ds.$opacity-60 !default;
+$scheduler-appointment-drag-source-opacity: ds.$opacity-70 !default;
+
+
+$scheduler-workspace-date-table-cell-height: null !default;
+$scheduler-toolbar-item-offset: null !default;
+$scheduler-header-panel-day-font-size: null !default;
+$scheduler-appointment-tooltip-title-font-size: null !default;
+$scheduler-appointment-tooltip-date-font-size: null !default;
+$scheduler-workspace-month-cell-left-offset: null !default;
+$scheduler-appointment-content-padding: null !default;
+$scheduler-recurring-appointment-content-padding: null !default;
+$scheduler-appointment-content-rtl-padding: null !default;
+$scheduler-recurring-appointment-content-rtl-padding: null !default;
+$scheduler-dropdown-button-height: null !default;
+$scheduler-dropdown-button-padding: null !default;
+$scheduler-dropdown-button-margin: null !default;
+$scheduler-dropdown-button-margin-block: null !default;
+$scheduler-dropdown-button-adaptive-margin: null !default;
+$scheduler-dropdown-button-adaptive-margin-block: null !default;
+$scheduler-appointment-tooltip-content-margin-inline-start: null !default;
+$scheduler-tooltip-marker-size: null !default;
+$scheduler-appointment-tooltip-title-margin-block-start: null !default;
+$scheduler-appointment-tooltip-remove-padding-block-start: null !default;
+
+$scheduler-appointment-popup-toolbar-height: null !default;
+$scheduler-appointment-popup-icon-container-height: null !default;
+$scheduler-appointment-popup-icon-padding-inline-end: null !default;
+$scheduler-appointment-popup-icon-margin-block-start: null !default;
+$scheduler-appointment-popup-item-padding-inline: null !default;
+$scheduler-appointment-popup-all-day-item-height: null !default;
+$scheduler-appointment-popup-days-of-week-buttons-gap: null !default;
+$scheduler-appointment-popup-repeat-end-item-height: null !default;
+
+$scheduler-appointment-short-content-padding: null !default;
+$scheduler-appointment-15min-height: null !default;
+$scheduler-appointment-20min-height: null !default;
+$scheduler-appointment-25min-height: null !default;
+$scheduler-appointment-10min-recurrence-padding-inline-end: null !default;
+$scheduler-appointment-10min-title-font-size: null !default;
+$scheduler-appointment-10min-title-line-height: null !default;
+$scheduler-appointment-10min-icon-font-size: null !default;
+$scheduler-appointment-10min-icon-inset-inline-end: null !default;
+$scheduler-appointment-15min-recurrence-padding-inline-end: null !default;
+$scheduler-appointment-15min-title-font-size: null !default;
+$scheduler-appointment-15min-title-line-height: null !default;
+$scheduler-appointment-15min-icon-font-size: null !default;
+$scheduler-appointment-15min-icon-inset-inline-end: null !default;
+$scheduler-appointment-20min-recurrence-padding-inline-end: null !default;
+$scheduler-appointment-20min-icon-inset-inline-end: null !default;
+
+$scheduler-left-column-width: 65px !default; // dx-offscale: 65px
+$scheduler-timeline-date-table-cell-height: 50px !default; // dx-offscale: 50px
+
+$scheduler-border-radius: 0 !default;
+
+$scheduler-navigator-icon-font-size: $global-icon-size;
+$scheduler-appointment-month-font-size: ds.$spacing-120 !default;
+$scheduler-workspace-info-font-size: ds.$spacing-160 !default;
+$scheduler-all-day-title-font-size: ds.$font-size-caption-md !default;
+$scheduler-time-panel-font-size: ds.$font-size-caption-md !default;
+$scheduler-header-panel-margin: ds.$spacing-140 !default;
+$scheduler-group-header-font-size: ds.$font-size-title-xs !default;
+$scheduler-group-header-table-cell-width: ds.$spacing-1000 !default;
+$scheduler-appointment-transparent-left-border: ds.$spacing-10 solid transparent !default;
+$scheduler-appointment-transparent-right-border: ds.$spacing-10 solid transparent !default;
+$scheduler-workspace-month-header-height: ds.$spacing-220 !default;
+$scheduler-workspace-month-timeline-time-height: ds.$spacing-340 !default;
+
+$scheduler-agenda-appointment-title-font-size: null !default;
+$scheduler-header-height: null !default;
+$scheduler-header-offset: null !default;
+
+$scheduler-timeline-cell-height: 50px !default; // dx-offscale: 50px
+
+$scheduler-header-day-element-height: null !default;
+
+$scheduler-collapsed-all-day-table-cell-height: null !default;
+
+$scheduler-header-panel-time-cell-height: ds.$spacing-320 !default;
+$scheduler-header-panel-time-cell-padding: null !default;
+
+
+@if $size == "default" {
+  $scheduler-collapsed-all-day-table-cell-height: ds.$spacing-320 !default;
+  $scheduler-header-panel-time-cell-padding: ds.$spacing-120 !default;
+
+  $scheduler-header-day-element-height: ds.$spacing-260;
+  $scheduler-workspace-date-table-cell-height: 38px !default; // dx-offscale: 38px
+
+  $scheduler-header-panel-day-font-size: ds.$font-size-title-sm !default;
+  $scheduler-header-height: 46px !default; // dx-offscale: 46px
+  $scheduler-header-offset: 0 ds.$spacing-120 !default;
+  $scheduler-toolbar-item-offset: ds.$spacing-40 !default;
+
+  $scheduler-appointment-tooltip-title-font-size: ds.$font-size-title-sm !default;
+  $scheduler-appointment-tooltip-date-font-size: ds.$font-size-140 !default; // dx-no-semantic-role: compact branch (110) is off the role scale
+  $scheduler-workspace-month-cell-left-offset: ds.$spacing-80 !default;
+
+  $scheduler-appointment-content-padding: ds.$spacing-60 ds.$spacing-80 ds.$spacing-60 ds.$spacing-120 !default;
+  $scheduler-recurring-appointment-content-padding: ds.$spacing-60 ds.$spacing-200 ds.$spacing-60 ds.$spacing-120 !default;
+  $scheduler-appointment-content-rtl-padding: ds.$spacing-60 ds.$spacing-120 ds.$spacing-60 ds.$spacing-80 !default;
+  $scheduler-recurring-appointment-content-rtl-padding: ds.$spacing-60 ds.$spacing-120 ds.$spacing-60 ds.$spacing-200 !default;
+  $scheduler-dropdown-button-height: ds.$spacing-220 !default;
+  $scheduler-dropdown-button-padding: ds.$spacing-40 !default;
+  $scheduler-dropdown-button-margin: ds.$spacing-50 ds.$spacing-10 ds.$spacing-30 ds.$spacing-30 !default;
+  $scheduler-dropdown-button-margin-block: ds.$spacing-50 ds.$spacing-30 ds.$spacing-30 ds.$spacing-30 !default;
+  $scheduler-dropdown-button-adaptive-margin: 0 ds.$spacing-20 !default;
+  $scheduler-dropdown-button-adaptive-margin-block: 0 ds.$spacing-20 0 ds.$spacing-10 !default;
+
+  $scheduler-appointment-tooltip-content-margin-inline-start: ds.$spacing-60 !default;
+  $scheduler-tooltip-marker-size: ds.$spacing-120 !default;
+  $scheduler-appointment-tooltip-title-margin-block-start: 0 !default;
+  $scheduler-appointment-tooltip-remove-padding-block-start: ds.$spacing-10 !default;
+
+  $scheduler-appointment-popup-toolbar-height: ds.$spacing-560 !default;
+  $scheduler-appointment-popup-icon-container-height: ds.$spacing-320 !default;
+  $scheduler-appointment-popup-icon-padding-inline-end: ds.$spacing-100 !default;
+  $scheduler-appointment-popup-icon-margin-block-start: ds.$spacing-240 !default;
+  $scheduler-appointment-popup-item-padding-inline: ds.$spacing-60 !default;
+  $scheduler-appointment-popup-all-day-item-height: ds.$spacing-400 !default;
+  $scheduler-appointment-popup-days-of-week-buttons-gap: ds.$spacing-120 !default;
+  $scheduler-appointment-popup-repeat-end-item-height: ds.$spacing-320 !default;
+
+  $scheduler-agenda-appointment-title-font-size: ds.$font-size-base-md;
+
+  $scheduler-appointment-short-content-padding: 0 ds.$spacing-80 0 ds.$spacing-120 !default;
+  $scheduler-appointment-15min-height: 17px !default; // literal: used in @container conditions where var() is invalid
+  $scheduler-appointment-20min-height: 24px !default; // literal: used in @container conditions where var() is invalid
+  $scheduler-appointment-25min-height: 32px !default; // literal: used in @container conditions where var() is invalid
+
+  $scheduler-appointment-10min-recurrence-padding-inline-end: ds.$spacing-140 !default;
+  $scheduler-appointment-10min-title-font-size: ds.$spacing-80 !default;
+  $scheduler-appointment-10min-title-line-height: ds.$line-height-120 !default; // dx-no-semantic-role: 120 is off the line-height-role scale
+  $scheduler-appointment-10min-icon-font-size: ds.$font-size-120 !default; // dx-icon-glyph-size: text roles not applicable
+  $scheduler-appointment-10min-icon-inset-inline-end: ds.$spacing-20 !default;
+
+  $scheduler-appointment-15min-recurrence-padding-inline-end: ds.$spacing-140 !default;
+  $scheduler-appointment-15min-title-font-size: ds.$font-size-base-sm !default;
+  $scheduler-appointment-15min-title-line-height: ds.$line-height-180 !default; // dx-no-semantic-role: 180 is off the line-height-role scale
+  $scheduler-appointment-15min-icon-font-size: ds.$font-size-120 !default; // dx-icon-glyph-size: text roles not applicable
+  $scheduler-appointment-15min-icon-inset-inline-end: ds.$spacing-20 !default;
+
+  $scheduler-appointment-20min-icon-inset-inline-end: ds.$spacing-20 !default;
+  $scheduler-appointment-20min-recurrence-padding-inline-end: ds.$spacing-180 !default;
+}
+
+@else if $size == "compact" {
+  $scheduler-collapsed-all-day-table-cell-height: ds.$spacing-240 !default;
+  $scheduler-header-panel-time-cell-padding: ds.$spacing-80 !default;
+
+  $scheduler-header-day-element-height: ds.$spacing-240;
+  $scheduler-workspace-date-table-cell-height: ds.$spacing-280 !default;
+
+  $scheduler-header-panel-day-font-size: ds.$font-size-title-xs !default;
+  $scheduler-header-height: ds.$spacing-340 !default;
+  $scheduler-header-offset: ds.$spacing-20 ds.$spacing-80 !default;
+  $scheduler-toolbar-item-offset: ds.$spacing-40 !default;
+
+  $scheduler-appointment-tooltip-title-font-size: ds.$font-size-title-xs !default;
+  $scheduler-appointment-tooltip-date-font-size: ds.$font-size-110 !default; // dx-no-semantic-role: 110 is off the font-size-role scale
+  $scheduler-workspace-month-cell-left-offset: ds.$spacing-40 !default;
+
+  $scheduler-appointment-content-padding: ds.$spacing-40 ds.$spacing-60 ds.$spacing-40 ds.$spacing-80 !default;
+  $scheduler-recurring-appointment-content-padding: ds.$spacing-40 ds.$spacing-160 ds.$spacing-40 ds.$spacing-80 !default;
+  $scheduler-appointment-content-rtl-padding: ds.$spacing-40 ds.$spacing-80 ds.$spacing-40 ds.$spacing-60 !default;
+  $scheduler-recurring-appointment-content-rtl-padding: ds.$spacing-40 ds.$spacing-80 ds.$spacing-40 ds.$spacing-160 !default;
+  $scheduler-dropdown-button-height: ds.$spacing-180 !default;
+  $scheduler-dropdown-button-padding: ds.$spacing-20 !default;
+  $scheduler-dropdown-button-margin: ds.$spacing-20 ds.$spacing-10 ds.$spacing-20 ds.$spacing-30 !default;
+  $scheduler-dropdown-button-margin-block: ds.$spacing-20 ds.$spacing-10 ds.$spacing-20 ds.$spacing-10 !default;
+  $scheduler-dropdown-button-adaptive-margin: 0 ds.$spacing-20 !default;
+  $scheduler-dropdown-button-adaptive-margin-block: 0 ds.$spacing-20 0 ds.$spacing-10 !default;
+
+  $scheduler-appointment-tooltip-content-margin-inline-start: ds.$spacing-80 !default;
+  $scheduler-tooltip-marker-size: ds.$spacing-180 !default;
+  $scheduler-appointment-tooltip-title-margin-block-start: ds.$spacing-30 !default;
+  $scheduler-appointment-tooltip-remove-padding-block-start: ds.$spacing-20 !default;
+
+  $scheduler-appointment-popup-toolbar-height: ds.$spacing-480 !default;
+  $scheduler-appointment-popup-icon-container-height: ds.$spacing-240 !default;
+  $scheduler-appointment-popup-icon-padding-inline-end: ds.$spacing-80 !default;
+  $scheduler-appointment-popup-icon-margin-block-start: ds.$spacing-180 !default;
+  $scheduler-appointment-popup-item-padding-inline: ds.$spacing-40 !default;
+  $scheduler-appointment-popup-all-day-item-height: ds.$spacing-300 !default;
+  $scheduler-appointment-popup-days-of-week-buttons-gap: ds.$spacing-80 !default;
+  $scheduler-appointment-popup-repeat-end-item-height: ds.$spacing-240 !default;
+
+  $scheduler-agenda-appointment-title-font-size: ds.$spacing-130;
+
+  $scheduler-appointment-short-content-padding: 0 ds.$spacing-80 0 ds.$spacing-120 !default;
+  $scheduler-appointment-15min-height: 17px !default; // literal: used in @container conditions where var() is invalid
+  $scheduler-appointment-20min-height: 24px !default; // literal: used in @container conditions where var() is invalid
+  $scheduler-appointment-25min-height: 32px !default; // literal: used in @container conditions where var() is invalid
+
+  $scheduler-appointment-10min-recurrence-padding-inline-end: ds.$spacing-140 !default;
+  $scheduler-appointment-10min-title-font-size: ds.$spacing-80 !default;
+  $scheduler-appointment-10min-title-line-height: ds.$line-height-120 !default; // dx-no-semantic-role: 120 is off the line-height-role scale
+  $scheduler-appointment-10min-icon-font-size: ds.$font-size-120 !default; // dx-icon-glyph-size: text roles not applicable
+  $scheduler-appointment-10min-icon-inset-inline-end: ds.$spacing-20 !default;
+
+  $scheduler-appointment-15min-recurrence-padding-inline-end: ds.$spacing-160 !default;
+  $scheduler-appointment-15min-title-font-size: ds.$font-size-base-sm !default;
+  $scheduler-appointment-15min-title-line-height: ds.$line-height-120 !default; // dx-no-semantic-role: 120 is off the line-height-role scale
+  $scheduler-appointment-15min-icon-font-size: ds.$font-size-120 !default; // dx-icon-glyph-size: text roles not applicable
+  $scheduler-appointment-15min-icon-inset-inline-end: ds.$spacing-50 !default;
+
+  $scheduler-appointment-20min-recurrence-padding-inline-end: ds.$spacing-200 !default;
+  $scheduler-appointment-20min-icon-inset-inline-end: ds.$spacing-50 !default;
+}
+
+// Values hoisted from style-file literals (tokenized)
+$scheduler-group-header-font-weight: ds.$font-weight-500 !default; // dx-no-semantic-role: 500 is off the weight-role scale (400/600/700)
+$scheduler-tooltip-subject-font-weight: ds.$font-weight-base-strong !default;
+$scheduler-appointment-title-font-size: ds.$font-size-base-sm !default;
+$scheduler-appointment-details-font-size: ds.$font-size-caption-sm !default;
+$scheduler-header-panel-cell-date-font-size: ds.$font-size-title-xs !default;
+$scheduler-navigator-button-font-size: ds.$font-size-base-sm !default;
+$scheduler-appointment-border-radius: ds.$border-radius-40 !default;
+$scheduler-time-panel-cell-margin-block-start: -6px !default; // dx-offscale: -6px
+$scheduler-small-padding-inline-end: ds.$spacing-20 !default;
+$scheduler-small-padding-inline-start: ds.$spacing-20 !default;
+$scheduler-date-time-indicator-height: ds.$spacing-20 !default;
+$scheduler-header-panel-cell-padding-block-end: ds.$spacing-20 !default;
+$scheduler-header-panel-cell-date-margin-block-end: ds.$spacing-10 !default;
+$scheduler-small-margin-block-start: ds.$spacing-40 !default;
+$scheduler-small-margin-block-end: ds.$spacing-40 !default;
+$scheduler-small-margin-inline-start: ds.$spacing-80 !default;
+$scheduler-month-appointment-content-rtl-padding: ds.$spacing-40 ds.$spacing-120 0 ds.$spacing-80 !default;
+$scheduler-month-recurrence-appointment-content-rtl-padding: ds.$spacing-40 ds.$spacing-120 0 ds.$spacing-200 !default;
+$scheduler-month-appointment-content-padding: ds.$spacing-40 ds.$spacing-80 0 ds.$spacing-120 !default;
+$scheduler-month-recurrence-appointment-content-padding: ds.$spacing-40 ds.$spacing-200 0 ds.$spacing-120 !default;
+$scheduler-date-table-cell-height: ds.$spacing-1000 !default;
+$scheduler-appointment-collector-margin-inline-start: ds.$spacing-520 !default;
+$scheduler-appointment-collector-margin-inline-end: ds.$spacing-520 !default;
+$scheduler-group-header-content-inset-block-start: ds.$spacing-80 !default;
+$scheduler-widget-margin-block-end: ds.$spacing-30 !default;
+$scheduler-appointment-strip-width: ds.$spacing-60 !default;
+$scheduler-group-header-content-padding-block-start: ds.$spacing-20 !default;
+$scheduler-tooltip-appointment-item-marker-body-margin-block-start: ds.$spacing-120 !default;
+$scheduler-tooltip-appointment-item-content-date-margin-block-start: ds.$spacing-40 !default;
+$scheduler-group-header-width: ds.$spacing-1000 !default;
+$scheduler-group-header-border-block-end: ds.$border-width-10 solid !default;
+$scheduler-last-group-cell-border-inline-end: ds.$border-width-10 solid !default;
+$scheduler-rtl-border-inline-start: ds.$border-width-10 solid !default;
+$scheduler-list-item-border-block-end: ds.$border-width-10 solid !default;
+$scheduler-month-date-font-size: ds.$font-size-base-md !default;
+$scheduler-first-of-month-border: ds.$border-width-10 solid !default;
+$scheduler-agenda-time-panel-cell-padding: ds.$spacing-80 !default;
+$scheduler-scrollable-content-min-height: 600px !default; // dx-offscale: 600px
+$scheduler-header-panel-empty-cell-border-block-end-width: ds.$border-width-10 !default;
+$scheduler-appointment-strip-border-start-end-radius: ds.$border-radius-60 !default;
+$scheduler-appointment-strip-border-end-end-radius: ds.$border-radius-60 !default;
+$scheduler-appointment-strip-border-start-start-radius: ds.$border-radius-60 !default;
+$scheduler-appointment-strip-border-end-start-radius: ds.$border-radius-60 !default;
+
+// Base-layer values injected with design tokens (wave B1)
+$scheduler-agenda-title-font-weight: ds.$font-weight-base-stronger !default;
+$scheduler-agenda-details-font-size: ds.$font-size-caption-md !default;
+$scheduler-appointment-icon-font-size: ds.$font-size-180 !default; // dx-icon-glyph-size: text roles not applicable
+
+// Base-layer sizing injected with design tokens (wave B2 — scheduler/views)
+$scheduler-views-header-border: ds.$border-width-20 solid !default;
+$scheduler-views-empty-cell-border-block-end: ds.$border-width-10 solid !default;
+$scheduler-views-empty-cell-border-inline-end: ds.$border-width-10 solid !default;
+$scheduler-views-empty-cell-border-inline-start: ds.$border-width-10 solid !default;
+$scheduler-views-first-child-border-inline-start: ds.$border-width-10 solid transparent !default;
+$scheduler-views-time-panel-border-block-end: ds.$border-width-10 solid transparent !default;
+$scheduler-views-group-header-padding: 0 ds.$spacing-50 !default;
+$scheduler-views-sidebar-group-header-padding: 0 ds.$spacing-50 0 ds.$spacing-100 !default;
+$scheduler-views-time-indicator-height: ds.$spacing-10 !default;
+$scheduler-views-group-header-content-height: ds.$spacing-400 !default;
+$scheduler-views-vertical-group-min-height: ds.$spacing-1000 !default;
+
+// Base-layer sizing injected with design tokens (wave B2)
+$scheduler-all-day-appointment-content-padding: 0 ds.$spacing-70 !default;
+$scheduler-appointment-recurrence-icon-inset-block-start: ds.$spacing-90 !default;
+$scheduler-header-panel-current-time-cell-height: ds.$spacing-20 !default;
+$scheduler-recurrence-appointment-content-padding: 0 25px 0 ds.$spacing-70 !default; // dx-offscale: 25px
+$scheduler-rtl-padding: 0 ds.$spacing-70 0 25px !default; // dx-offscale: 25px
+$scheduler-appointment-collector-width: ds.$spacing-240 !default;
+$scheduler-appointment-content-padding-inline-end: ds.$spacing-50 !default;
+
+// Base submodule sizing injected with design tokens (B2 tail)
+$scheduler-common-collector-margin: 0 ds.$spacing-30 !default;
+$scheduler-common-collector-size: ds.$spacing-280 !default;
+
+// Base submodule sizing injected with design tokens (B2 tail)
+$scheduler-tooltip-width: 360px !default;  // dx-offscale: 360px
+$scheduler-tooltip-content-padding: ds.$spacing-50 !default;
+$scheduler-tooltip-title-margin-block-start: ds.$spacing-70 !default;
+$scheduler-tooltip-title-margin-inline-start: ds.$spacing-50 !default;
+$scheduler-tooltip-date-margin: ds.$spacing-50 ds.$spacing-100 !default;
+$scheduler-tooltip-remove-margin-block-start: ds.$spacing-100 !default;
+
+// B2 tail: scheduler font-sizes
+$scheduler-appointment-content-details-font-size: ds.$font-size-110 !default; // dx-no-semantic-role: 11px has no font-size role
+$scheduler-tooltip-subject-font-size: ds.$font-size-title-sm !default;
+$scheduler-tooltip-date-font-size: ds.$font-size-caption-md !default;
+
+// B2 tail: deep scheduler submodules (multi-hop)
+$scheduler-appointment-reduced-icon-inset-block-start: ds.$spacing-30 !default;
+$scheduler-appointment-marker-border-radius-active: ds.$border-radius-40 !default;
+$scheduler-appointment-content-details-margin-block-start: ds.$spacing-20 !default;
+$scheduler-appointment-reduced-icon-rtl-inset-inline-start: ds.$spacing-30 !default;
+$scheduler-agenda-appointment-item-padding: ds.$spacing-100 !default;
+$scheduler-agenda-appointment-item-border-radius: ds.$border-radius-50 !default;
+$scheduler-agenda-appointment-right-layout-margin-inline-start: ds.$spacing-100 !default;
+$scheduler-agenda-appointment-allday-padding-inline-end: ds.$spacing-50 !default;
+$scheduler-agenda-appointment-resource-item-margin-inline-start: ds.$spacing-150 !default;
+$scheduler-agenda-appointment-resource-value-margin-inline-start: ds.$spacing-30 !default;
+$scheduler-agenda-appointment-rtl-margin-inline-end: ds.$spacing-100 !default;
+$scheduler-timeline-min-height: ds.$spacing-1000 !default;
+$scheduler-timeline-group-two-empty-cell-width: ds.$spacing-1600 !default;
+$scheduler-timeline-group-header-width: ds.$spacing-800 !default;
+$scheduler-timeline-group-three-empty-cell-width: 240px !default; // dx-offscale: 240px
+$scheduler-timeline-cell-width: 200px !default; // dx-offscale: 200px
+$scheduler-agenda-left-column-width: 70px !default; // dx-offscale: 70px
+$scheduler-group-header-agenda-font-size: ds.$font-size-180 !default; // dx-no-semantic-role: 18px has no font-size role
+$scheduler-agenda-date-table-padding-block-start: ds.$spacing-100 !default;
+$scheduler-virtual-row-height: 50px !default; // dx-offscale: 50px
+
+/*
+ * Derived values, moved out of _index.scss: a file that emits rules must not declare
+ * variables (NAMING.md, O7).
+ */
+$scheduler-all-day-table-cell-height: calc(#{$scheduler-workspace-date-table-cell-height} * 1.5);
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/scrollView/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/scrollView/_colors.scss
new file mode 100644
index 000000000000..d3482905e254
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/scrollView/_colors.scss
@@ -0,0 +1,16 @@
+@use "../colors" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$scroll-view-shadow-rest: ds.$color-shadow-key !default;
+
+$scroll-view-pull-down-bg-rest: null !default;
+
+@if $mode == "light" {
+  $scroll-view-pull-down-bg-rest: data-uri('images/widgets/fluent-next/color-schemes/light/pulldown.png') !default;
+}
+
+@if $mode == "dark" {
+  $scroll-view-pull-down-bg-rest: data-uri('images/widgets/fluent-next/color-schemes/dark/pulldown.png') !default;
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/scrollView/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/scrollView/_index.scss
new file mode 100644
index 000000000000..91c8b636d5b8
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/scrollView/_index.scss
@@ -0,0 +1,99 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../scrollable/colors" as scrollableColors;
+
+// adduse
+@use "../scrollable";
+@use "../../base/scrollView" with (
+  $scrollview-top-pocket-width: $scroll-view-top-pocket-width,
+  $scrollview-top-pocket-height: $scroll-view-top-pocket-height,
+  $scrollview-pull-down-indicator-padding: $scroll-view-pull-down-indicator-padding,
+  $scrollview-icon-pulldown-padding: $scroll-view-icon-pull-down-padding,
+  $scrollview-pull-down-indicator-width: $scroll-view-pull-down-indicator-width,
+  $scrollview-pull-down-image-margin: $scroll-view-pull-down-image-margin,
+  $scrollview-pull-down-image-height: $scroll-view-pull-down-image-height,
+  $scrollview-scrollbottom-padding: $scroll-view-scroll-bottom-padding,
+  $scrollview-scrollbottom-indicator-margin: $scroll-view-scroll-bottom-indicator-margin,
+  $scrollview-scrollbottom-indicator-margin-2: $scroll-view-scroll-bottom-indicator-rtl-margin,
+  $scrollview-pulldown-icon-font-size: $scroll-view-pull-down-icon-font-size,
+);
+
+
+.dx-scrollview-scrollbottom-text,
+.dx-scrollview-pull-down-text {
+  margin-left: $scroll-view-pull-down-text-margin-inline-start;
+  top: calc((50px - #{$global-font-size}) / 2);
+  display: inline-block;
+
+  .dx-rtl & {
+    margin-left: 0;
+    margin-right: $scroll-view-rtl-margin-inline-end;
+  }
+}
+
+.dx-scrollview-pull-down-image {
+  display: none;
+}
+
+.dx-scrollview-pull-down {
+  text-align: center;
+}
+
+.dx-scrollable-native.dx-scrollable-native-android .dx-scrollview-pull-down {
+  background-color: scrollableColors.$scrollable-bg-rest;
+  box-shadow: 0 1px 4px 0 $scroll-view-shadow-rest;
+}
+
+.dx-scrollview-scrollbottom-loading {
+  .dx-scrollview-scrollbottom-image {
+    width: $scroll-view-scroll-bottom-image-width;
+    height: $scroll-view-scroll-bottom-image-height;
+  }
+}
+
+.dx-scrollview-scrollbottom-indicator,
+.dx-scrollview-pull-down-indicator {
+  margin-right: 0;
+  height: $scroll-view-load-indicator-size;
+  width: $scroll-view-load-indicator-size;
+  border-radius: math.div($scroll-view-load-indicator-size, 2);
+  display: inline-flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  box-shadow: 0 1px 3px 1px $scroll-view-shadow-rest;
+  opacity: 1;
+
+
+  > .dx-loadindicator {
+    height: $scroll-view-scroll-bottom-image-height;
+    width: $scroll-view-scroll-bottom-image-width;
+
+    > .dx-loadindicator-wrapper {
+      font-size: $scroll-view-load-indicator-font-size;
+    }
+  }
+}
+
+.dx-scrollview-pull-down-indicator {
+  position: relative;
+  margin-left: 0;
+  margin-top: math.div(-$scroll-view-load-indicator-size, 2);
+}
+
+.dx-scrollview-pull-down-text {
+  div {
+    position: relative;
+  }
+
+  > div {
+    display: none;
+
+    &.dx-scrollview-pull-down-text-visible {
+      display: block;
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/scrollView/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/scrollView/_sizes.scss
new file mode 100644
index 000000000000..a9e2e29bd0b1
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/scrollView/_sizes.scss
@@ -0,0 +1,28 @@
+@use "../../../_design-system/variables/ds" as ds;
+@use "../sizes" as *;
+
+// adduse
+
+
+// Values hoisted from style-file literals (tokenized)
+$scroll-view-load-indicator-font-size: ds.$font-size-240 !default; // dx-icon-glyph-size: text roles not applicable
+$scroll-view-pull-down-text-margin-inline-start: ds.$spacing-100 !default;
+$scroll-view-rtl-margin-inline-end: ds.$spacing-100 !default;
+$scroll-view-scroll-bottom-image-width: ds.$spacing-240 !default;
+$scroll-view-scroll-bottom-image-height: ds.$spacing-240 !default;
+$scroll-view-load-indicator-size: 42px !default; // dx-offscale: 42px
+
+// Base-layer values injected with design tokens (wave B1)
+$scroll-view-pull-down-icon-font-size: ds.$font-size-240 !default; // dx-icon-glyph-size: text roles not applicable
+
+// Base-layer sizing injected with design tokens (wave B2)
+$scroll-view-top-pocket-width: ds.$spacing-400 !default;
+$scroll-view-top-pocket-height: ds.$spacing-400 !default;
+$scroll-view-pull-down-indicator-padding: ds.$spacing-40 !default;
+$scroll-view-icon-pull-down-padding: ds.$spacing-80 !default;
+$scroll-view-pull-down-indicator-width: ds.$spacing-200 !default;
+$scroll-view-pull-down-image-margin: 0 ds.$spacing-200 !default;
+$scroll-view-pull-down-image-height: 50px !default; // dx-offscale: 50px
+$scroll-view-scroll-bottom-padding: ds.$spacing-100 0 !default;
+$scroll-view-scroll-bottom-indicator-margin: 0 ds.$spacing-100 0 0 !default;
+$scroll-view-scroll-bottom-indicator-rtl-margin: 0 0 0 ds.$spacing-100 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/scrollable/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/scrollable/_colors.scss
new file mode 100644
index 000000000000..37f13ec8f31a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/scrollable/_colors.scss
@@ -0,0 +1,8 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$scrollable-bg-rest: ds.$color-surface-neutral-default-rest !default;
+
+$scrollable-scroll-bg-rest: ds.$color-content-neutral-subdued-rest !default;
+$scrollable-scrollbar-bg-rest: ds.$color-surface-transparent-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/scrollable/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/scrollable/_index.scss
new file mode 100644
index 000000000000..c5c0f8d7f369
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/scrollable/_index.scss
@@ -0,0 +1,33 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/scrollable" with (
+  $scrollable-scroll-width: $scrollable-scroll-width,
+  $scrollable-scroll-height: $scrollable-scroll-height,
+  $scrollable-scroll-padding: $scrollable-scroll-padding,
+);
+@use "../../base/scrollable/mixins" as *;
+
+// adduse
+
+@include dx-scrollable-scroll-content(
+  $scrollable-scroll-bg-rest,
+);
+@include dx-scrollable-scrollbar-hoverable(
+  $scrollable-scrollbar-bg-rest,
+  transparent,
+  $scrollable-scroll-bg-rest,
+);
+@include dx-scrollable-scrollbar-vertical(
+  $scrollable-scrollbar-thin-size,
+  $scrollable-scrollbar-size,
+  0,
+);
+@include dx-scrollable-scrollbar-horizontal(
+  $scrollable-scrollbar-thin-size,
+  $scrollable-scrollbar-size,
+  0,
+);
+@include dx-scrollable-scrollbars-alwaysvisible($scrollable-scrollbar-thin-size);
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/scrollable/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/scrollable/_sizes.scss
new file mode 100644
index 000000000000..c23143ef0041
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/scrollable/_sizes.scss
@@ -0,0 +1,12 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$scrollable-scrollbar-thin-size: ds.$spacing-60;
+$scrollable-scrollbar-size: ds.$spacing-130;
+
+// Base-layer sizing injected with design tokens (wave B2)
+$scrollable-scroll-width: ds.$spacing-50 !default;
+$scrollable-scroll-height: ds.$spacing-50 !default;
+$scrollable-scroll-padding: ds.$spacing-20 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/selectBox/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/selectBox/_colors.scss
new file mode 100644
index 000000000000..7245d285cd8e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/selectBox/_colors.scss
@@ -0,0 +1,5 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$select-box-list-bg-rest: ds.$color-surface-neutral-default-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/selectBox/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/selectBox/_index.scss
new file mode 100644
index 000000000000..ba214ad32a04
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/selectBox/_index.scss
@@ -0,0 +1,24 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../common/sizes" as *;
+@use "../../base/selectBox";
+
+// adduse
+
+@use "../dropDownList";
+
+.dx-selectbox-popup-wrapper {
+  .dx-overlay-content {
+    box-shadow: $global-dropdown-box-shadow;
+  }
+
+  .dx-popup-content {
+    padding: 0;
+  }
+
+  .dx-list {
+    background-color: $select-box-list-bg-rest;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/selectBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/selectBox/_sizes.scss
new file mode 100644
index 000000000000..43b104010f9e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/selectBox/_sizes.scss
@@ -0,0 +1,4 @@
+@use "../sizes" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/slider/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/slider/_colors.scss
new file mode 100644
index 000000000000..d50957cc3a4c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/slider/_colors.scss
@@ -0,0 +1,23 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$slider-bar-bg-rest: ds.$color-border-neutral-accessible-rest !default;
+
+$slider-accent-bg-rest: ds.$color-surface-primary-default-rest !default;
+$slider-accent-bg-hovered: ds.$color-surface-primary-default-hovered !default;
+$slider-accent-content-focused: ds.$color-surface-primary-default-active !default;
+
+$slider-invalid-bg-rest: ds.$color-border-danger-default-rest !default;
+$slider-invalid-bg-hovered: ds.$color-border-danger-default-hovered !default;
+$slider-invalid-content-focused: ds.$color-border-danger-default-hovered !default;
+
+$slider-bg-disabled: ds.$color-content-neutral-default-disabled !default;
+$slider-bar-bg-disabled: ds.$color-surface-neutral-default-disabled !default;
+
+$slider-tooltip-content-rest: ds.$color-content-neutral-default-rest !default;
+
+// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
+$slider-border-rest: ds.$color-border-neutral-default-rest !default;
+$slider-element-bg: ds.$color-surface-neutral-default-rest !default;
+$slider-theme-invalid-color: ds.$color-border-danger-default-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/slider/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/slider/_index.scss
new file mode 100644
index 000000000000..1b74688e8bc9
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/slider/_index.scss
@@ -0,0 +1,172 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/slider" with (
+  $slider-label-position-bottom-padding-bottom: $slider-label-bottom-padding-block-end,
+  $slider-label-position-top-padding-top: $slider-label-top-padding-block-start,
+);
+@use "../../base/popover/mixins" as *;
+
+// adduse
+
+.dx-slider-wrapper {
+  height: $slider-wrapper-height;
+
+  @include dx-popover-arrow-size(14px, 2px);
+}
+
+.dx-slider-bar {
+  margin-top: calc((#{$slider-wrapper-height} - #{$slider-track-height}) / 2);
+  margin-right: calc((#{$slider-handle-size}) / 2);
+  margin-left: calc((#{$slider-handle-size}) / 2);
+  background: $slider-bar-bg-rest;
+  height: $slider-track-height;
+  border-radius: $slider-track-border-radius;
+}
+
+.dx-slider-range {
+  height: $slider-track-height;
+  border-radius: $slider-track-border-radius;
+
+  &.dx-slider-range-visible {
+    background: $slider-accent-bg-rest;
+  }
+}
+
+.dx-slider-handle {
+  margin-top: calc(#{$slider-track-height} / 2 - #{$slider-handle-size} / 2);
+  margin-inline-end: calc(#{$slider-handle-size} / -2);
+  width: $slider-handle-size;
+  height: $slider-handle-size;
+  border-radius: $slider-border-radius;
+  border-width: $slider-handle-border-width;
+  border-style: solid;
+  border-color: $slider-border-rest;
+  background-color: $slider-element-bg;
+
+  &::after {
+    position: absolute;
+    display: block;
+    inset: 0;
+    background: $slider-accent-bg-rest;
+    content: "";
+    border-radius: $slider-border-radius;
+    border-width: $slider-handle-inner-border-width;
+    border-style: solid;
+    border-color: $slider-element-bg;
+  }
+
+  &.dx-state-hover {
+    &::after {
+      background: $slider-accent-bg-hovered;
+    }
+  }
+
+  &.dx-state-focused {
+    border-color: $slider-accent-content-focused;
+
+    &::after {
+      background: $slider-accent-content-focused;
+    }
+  }
+
+  .dx-tooltip-wrapper {
+    .dx-overlay-content {
+      .dx-popup-content {
+        line-height: normal;
+        color: $slider-tooltip-content-rest;
+
+        .dx-slider-tooltip-position-top & {
+          padding-top: $slider-tooltip-top-padding-block-start;
+        }
+      }
+
+      &.dx-state-disabled {
+        .dx-popup-content {
+          padding-top: calc((#{$slider-tooltip-width}) / 2);
+
+          .dx-slider-tooltip-position-top & {
+            padding-top: $slider-tooltip-top-padding-block-start;
+            padding-bottom: calc((#{$slider-tooltip-width}) / 2);
+          }
+        }
+      }
+    }
+  }
+}
+
+.dx-slider-tooltip-position-top {
+  padding-top: calc(#{$slider-tooltip-width} + 6px);
+}
+
+.dx-slider-tooltip-position-bottom {
+  padding-bottom: calc(#{$slider-tooltip-width} + 6px);
+}
+
+.dx-slider-label-position-bottom {
+  .dx-slider-label {
+    bottom: $slider-label-bottom-inset-block-end;
+  }
+}
+
+.dx-slider-label-position-top {
+  .dx-slider-label {
+    top: $slider-label-top-inset-block-start;
+  }
+}
+
+.dx-invalid {
+  .dx-slider-handle {
+    &::after {
+      background-color: $slider-theme-invalid-color;
+    }
+
+    &.dx-state-hover {
+      &::after {
+        background-color: $slider-invalid-bg-hovered;
+      }
+    }
+
+    &.dx-state-focused {
+      border-color: $slider-invalid-content-focused;
+
+      &::after {
+        background-color: $slider-invalid-content-focused;
+      }
+    }
+  }
+
+  .dx-slider-range-visible {
+    background-color: $slider-invalid-bg-rest;
+    border-color: $slider-invalid-bg-rest;
+  }
+}
+
+.dx-state-disabled {
+  &.dx-slider,
+  .dx-slider {
+    opacity: 1;
+
+    .dx-slider-handle {
+      opacity: 1;
+    }
+  }
+
+  &.dx-slider-handle {
+    border-color: $slider-bg-disabled;
+
+    &::after {
+      background: $slider-bg-disabled;
+    }
+  }
+
+  .dx-slider-bar {
+    background: $slider-bar-bg-disabled;
+  }
+
+  .dx-slider-range.dx-slider-range-visible {
+    background: $slider-bg-disabled;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/slider/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/slider/_sizes.scss
new file mode 100644
index 000000000000..1b8c4dbe8532
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/slider/_sizes.scss
@@ -0,0 +1,38 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$slider-handle-size: null !default;
+$slider-wrapper-height: null !default;
+$slider-tooltip-width: null !default;
+
+$slider-height: ds.$spacing-280 !default; // for fieldset height
+$slider-border-radius: 50% !default;
+$slider-track-height: null !default;
+$slider-track-border-radius: ds.$border-radius-20 !default;
+
+@if $size == "default" {
+  $slider-track-height: ds.$spacing-40 !default;
+  $slider-handle-size: ds.$spacing-200 !default;
+  $slider-wrapper-height: ds.$spacing-320 !default;
+  $slider-tooltip-width: ds.$spacing-340 !default;
+}
+
+@else if $size == "compact" {
+  $slider-track-height: ds.$spacing-20 !default;
+  $slider-handle-size: ds.$spacing-160 !default;
+  $slider-wrapper-height: ds.$spacing-260 !default;
+  $slider-tooltip-width: ds.$spacing-280 !default;
+}
+
+// Values hoisted from style-file literals (tokenized)
+$slider-handle-border-width: ds.$border-width-10 !default;
+$slider-handle-inner-border-width: ds.$border-width-30 !default;
+$slider-tooltip-top-padding-block-start: ds.$spacing-60 !default;
+$slider-label-bottom-inset-block-end: -18px !default; // dx-offscale: -18px
+$slider-label-top-inset-block-start: -15px !default; // dx-offscale: -15px
+
+// Base-layer sizing injected with design tokens (wave B2)
+$slider-label-bottom-padding-block-end: ds.$spacing-140 !default;
+$slider-label-top-padding-block-start: ds.$spacing-140 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/sortable/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/sortable/_colors.scss
new file mode 100644
index 000000000000..be28ecafea21
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/sortable/_colors.scss
@@ -0,0 +1,13 @@
+@use "../../../_design-system/variables/ds" as ds;
+@use "sass:color";
+@use "../sizes" as *;
+@use "../colors" as *;
+
+// adduse
+
+// Base-layer values injected with design tokens (wave B1)
+$sortable-clone-shadow-ambient-rest: ds.$color-shadow-ambient !default;
+$sortable-clone-shadow-key-rest: ds.$color-shadow-key !default;
+
+// Drop-position indicator / dragged-clone border — same accent-border family as the gridBase drag-header decision (DIVERGENCES: border-primary + alpha bridge in base)
+$sortable-placeholder-border-rest: ds.$color-border-primary-default-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/sortable/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/sortable/_index.scss
new file mode 100644
index 000000000000..bc9c6b6a1dc0
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/sortable/_index.scss
@@ -0,0 +1,15 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/sortable" as baseSortable with (
+  $sortable-placeholder-border: $sortable-placeholder-border,
+  $sortable-placeholder-inside-border-width: $sortable-placeholder-inside-border-width,
+  $sortable-clone-shadow-color-first: $sortable-clone-shadow-ambient-rest,
+  $sortable-clone-shadow-color-second: $sortable-clone-shadow-key-rest,
+  $sortable-clone-opacity: $sortable-clone-opacity,
+  $sortable-source-opacity: $sortable-source-opacity,
+  $base-accent: $sortable-placeholder-border-rest,
+);
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/sortable/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/sortable/_sizes.scss
new file mode 100644
index 000000000000..57967199679f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/sortable/_sizes.scss
@@ -0,0 +1,13 @@
+@use "../../../_design-system/variables/ds" as ds;
+@use "../sizes" as *;
+
+// adduse
+
+// Not colours: two opacities that used to sit in _colors.scss (NAMING.md, O7)
+$sortable-clone-opacity: ds.$opacity-90 !default;
+$sortable-source-opacity: ds.$opacity-50 !default;
+
+
+// Base-layer sizing injected with design tokens (wave B2)
+$sortable-placeholder-border: ds.$border-width-10 solid !default;
+$sortable-placeholder-inside-border-width: ds.$border-width-20 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/speechToText/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/speechToText/_colors.scss
new file mode 100644
index 000000000000..63068d06cc1a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/speechToText/_colors.scss
@@ -0,0 +1,4 @@
+@use "../colors" as *;
+@use "sass:color";
+
+// adduse
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/speechToText/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/speechToText/_index.scss
new file mode 100644
index 000000000000..3ae03fb5edbd
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/speechToText/_index.scss
@@ -0,0 +1,5 @@
+@use "../../base/speechToText";
+@use "colors" as *;
+@use "sizes" as *;
+
+// adduse
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/speechToText/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/speechToText/_sizes.scss
new file mode 100644
index 000000000000..2f5a2c74b993
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/speechToText/_sizes.scss
@@ -0,0 +1,4 @@
+@use "../common/sizes" as *;
+@use "../sizes" as *;
+
+// adduse
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/speedDialAction/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/speedDialAction/_colors.scss
new file mode 100644
index 000000000000..43a384ad6033
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/speedDialAction/_colors.scss
@@ -0,0 +1,18 @@
+@use "../button/colors" as buttonColors;
+@use "../../../_design-system/variables/ds" as ds;
+@use "../common/colors" as *;
+
+// adduse
+
+$speed-dial-action-content-rest: ds.$color-content-neutral-default-rest !default;
+$speed-dial-action-shadow-rest: ds.$box-shadow-md !default;
+$speed-dial-action-label-shadow-rest: ds.$box-shadow-sm !default;
+$speed-dial-action-backdrop-rest: $backdrop-rest !default;
+
+$speed-dial-action-bg-rest: buttonColors.$button-normal-contained-bg-rest !default;
+$speed-dial-action-bg-hovered: buttonColors.$button-normal-contained-bg-hovered !default;
+$speed-dial-action-bg-active: buttonColors.$button-normal-contained-bg-active !default;
+
+$speed-dial-action-main-bg-rest: ds.$color-surface-primary-default-rest !default;
+$speed-dial-action-main-bg-hovered: ds.$color-surface-primary-default-hovered !default;
+$speed-dial-action-main-bg-active: ds.$color-surface-primary-default-active !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/speedDialAction/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/speedDialAction/_index.scss
new file mode 100644
index 000000000000..ac8564ab7ee8
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/speedDialAction/_index.scss
@@ -0,0 +1,49 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/speedDialAction" as baseSpeedDialAction with (
+  $speeddialaction-fa-button-label-border-radius: $speed-dial-action-fa-button-label-border-radius,
+);
+@use "../button/colors" as buttonColors;
+
+// adduse
+@use "../overlay";
+@include baseSpeedDialAction.dx-fa-button-mixin(
+  $speed-dial-action-main-fa-button-size,
+  $speed-dial-action-fa-button-size,
+  $global-icon-size,
+  $global-font-size,
+  $speed-dial-action-fa-button-label-padding,
+  $speed-dial-action-fa-button-label-offset,
+  $speed-dial-action-content-rest,
+  $speed-dial-action-bg-rest,
+  $speed-dial-action-shadow-rest,
+  $speed-dial-action-backdrop-rest,
+  $speed-dial-action-bg-hovered,
+  $speed-dial-action-bg-active,
+  $speed-dial-action-label-shadow-rest,
+  $speed-dial-action-main-bg-rest,
+  buttonColors.$button-default-contained-content-rest,
+  $speed-dial-action-main-bg-hovered,
+  $speed-dial-action-main-bg-active
+);
+
+.dx-fa-button {
+  &.dx-fa-button-main {
+    .dx-overlay-content {
+      .dx-fa-button-label {
+        padding: $speed-dial-action-main-fa-button-label-padding;
+        font-size: $global-font-size;
+        font-weight: $speed-dial-action-fa-button-label-font-weight;
+      }
+    }
+
+    &.dx-fa-button-with-label {
+      .dx-overlay-content {
+        .dx-fa-button-icon {
+          padding-inline-start: $speed-dial-action-main-fa-button-padding-inline;
+        }
+      }
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/speedDialAction/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/speedDialAction/_sizes.scss
new file mode 100644
index 000000000000..126a6a17cbd1
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/speedDialAction/_sizes.scss
@@ -0,0 +1,31 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$speed-dial-action-main-fa-button-label-padding: null !default;
+$speed-dial-action-main-fa-button-padding-inline: null !default;
+$speed-dial-action-main-fa-button-size: null !default;
+$speed-dial-action-fa-button-size: null !default;
+
+@if $size == "default" {
+  $speed-dial-action-main-fa-button-size: ds.$spacing-440 !default;
+  $speed-dial-action-fa-button-size: ds.$spacing-440 !default;
+  $speed-dial-action-main-fa-button-padding-inline: ds.$spacing-160;
+  $speed-dial-action-main-fa-button-label-padding: 0 $speed-dial-action-main-fa-button-padding-inline 0 ds.$spacing-80;
+}
+
+@else if $size == "compact" {
+  $speed-dial-action-main-fa-button-size: ds.$spacing-320 !default;
+  $speed-dial-action-fa-button-size: ds.$spacing-320 !default;
+  $speed-dial-action-main-fa-button-padding-inline: ds.$spacing-120;
+  $speed-dial-action-main-fa-button-label-padding: 0 $speed-dial-action-main-fa-button-padding-inline 0 ds.$spacing-40;
+}
+
+// Values hoisted from style-file literals (tokenized)
+$speed-dial-action-fa-button-label-font-weight: ds.$font-weight-500 !default; // dx-no-semantic-role: 500 is off the weight-role scale (400/600/700)
+$speed-dial-action-fa-button-label-offset: ds.$spacing-160 !default;
+$speed-dial-action-fa-button-label-padding: ds.$spacing-40 ds.$spacing-80 !default;
+
+// Base-layer sizing injected with design tokens (wave B2)
+$speed-dial-action-fa-button-label-border-radius: ds.$border-radius-40 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/splitter/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/splitter/_colors.scss
new file mode 100644
index 000000000000..69b131825745
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/splitter/_colors.scss
@@ -0,0 +1,15 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$splitter-resize-handle-content-rest: ds.$color-content-neutral-subdued-rest !default;
+
+$splitter-resize-handle-content-focused: ds.$color-content-neutral-default-static-dark-rest !default;
+
+$splitter-resize-handle-bg-rest: ds.$color-border-neutral-default-rest !default;
+
+$splitter-resize-handle-bg-hovered: ds.$color-border-neutral-default-hovered !default;
+
+$splitter-resize-handle-bg-focused: ds.$color-surface-primary-default-rest !default;
+
+$splitter-resize-handle-content-hovered: $splitter-resize-handle-content-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/splitter/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/splitter/_index.scss
new file mode 100644
index 000000000000..ccddbf471c6f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/splitter/_index.scss
@@ -0,0 +1,28 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../../base/splitter" with (
+  $splitter-resize-handle-gap: $splitter-resize-handle-gap,
+);
+@use "../../base/splitter/mixins" as *;
+
+// adduse
+
+.dx-splitter {
+  @include resize-handle-states(
+    $splitter-resize-handle-content-rest,
+    $splitter-resize-handle-bg-rest,
+    $splitter-resize-handle-content-hovered,
+    $splitter-resize-handle-bg-hovered,
+    $splitter-resize-handle-content-focused,
+    $splitter-resize-handle-bg-focused,
+  );
+}
+
+.dx-resize-handle {
+  .dx-icon {
+    @include dx-icon-sizing($splitter-resize-handle-icon-size);
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/splitter/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/splitter/_sizes.scss
new file mode 100644
index 000000000000..bf4e2b70ca60
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/splitter/_sizes.scss
@@ -0,0 +1,9 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$splitter-resize-handle-icon-size: ds.$spacing-200;
+
+// Base-layer sizing injected with design tokens (wave B2)
+$splitter-resize-handle-gap: ds.$spacing-80 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/splitterBar/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/splitterBar/_colors.scss
new file mode 100644
index 000000000000..63999893f73e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/splitterBar/_colors.scss
@@ -0,0 +1,6 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$splitter-bar-border-rest: ds.$color-border-neutral-default-rest !default;
+$splitter-bar-bg-active: ds.$color-surface-primary-alpha-active !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/splitterBar/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/splitterBar/_index.scss
new file mode 100644
index 000000000000..9d6cd42ad6dd
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/splitterBar/_index.scss
@@ -0,0 +1,21 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/splitterBar" with (
+  $splitterbar-splitter-border-width: $splitter-bar-border-width,
+  $splitterbar-splitter-bar-width: $splitter-bar-width,
+);
+
+// adduse
+.dx-splitter-bar {
+  background-color: $splitter-bar-bg-active;
+
+  &.dx-splitter-inactive {
+    background-color: $splitter-bar-border-rest;
+  }
+}
+
+.dx-splitter-border {
+  background-color: transparent;
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/splitterBar/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/splitterBar/_sizes.scss
new file mode 100644
index 000000000000..f6db8aed4232
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/splitterBar/_sizes.scss
@@ -0,0 +1,8 @@
+@use "../../../_design-system/variables/ds" as ds;
+@use "../sizes" as *;
+
+// adduse
+
+// Base-layer sizing injected with design tokens (wave B2)
+$splitter-bar-border-width: ds.$spacing-70 !default;
+$splitter-bar-width: ds.$spacing-10 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_colors.scss
new file mode 100644
index 000000000000..7dc1b81de814
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_colors.scss
@@ -0,0 +1,60 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$stepper-step-accent-bg-rest: ds.$color-surface-primary-default-rest !default;
+
+$stepper-step-accent-bg-hovered: ds.$color-surface-primary-default-hovered !default;
+
+// $stepper-step-danger-bg: ds.$color-surface-danger-default-rest !default; // unused variable
+
+// $stepper-step-danger-hover-bg: ds.$color-surface-danger-default-hovered !default; // unused variable
+
+$stepper-step-base-bg-rest: ds.$color-surface-neutral-default-rest !default;
+
+$stepper-step-base-bg-hovered: ds.$color-surface-neutral-default-hovered !default;
+
+$stepper-step-base-border-rest: ds.$color-border-neutral-default-rest !default;
+
+$stepper-step-base-border-hovered: ds.$color-border-neutral-default-hovered !default;
+
+$stepper-step-base-content-rest: ds.$color-content-neutral-default-rest !default;
+
+$stepper-step-base-label-content-rest: ds.$color-content-neutral-default-rest !default;
+
+$stepper-step-bg-selected: $stepper-step-accent-bg-rest !default;
+
+$stepper-step-bg-selected-hovered: $stepper-step-accent-bg-hovered !default;
+
+$stepper-step-content-selected: ds.$color-content-neutral-default-static-dark-rest !default;
+
+$stepper-step-label-content-selected: ds.$color-content-primary-default-rest !default;
+
+$stepper-step-invalid-bg-rest: $stepper-step-base-bg-rest !default;
+
+$stepper-step-invalid-bg-hovered: $stepper-step-base-bg-hovered !default;
+
+$stepper-step-invalid-border-rest: $stepper-step-base-border-rest !default;
+
+$stepper-step-invalid-border-hovered: $stepper-step-base-border-hovered !default;
+
+$stepper-step-invalid-content-rest: ds.$color-content-danger-default-rest !default;
+
+$stepper-step-invalid-content-hovered: ds.$color-content-danger-default-hovered !default;
+
+$stepper-step-invalid-label-content-rest: ds.$color-content-danger-default-rest !default;
+
+$stepper-step-invalid-bg-selected: ds.$color-content-danger-default-rest !default;
+
+$stepper-step-invalid-bg-selected-hovered: ds.$color-surface-danger-default-hovered !default;
+$stepper-step-shadow-disabled: $stepper-step-base-bg-rest !default;
+
+$stepper-step-bg-disabled: ds.$color-surface-neutral-default-disabled !default;
+
+$stepper-step-content-disabled: ds.$color-content-neutral-default-disabled !default;
+
+$stepper-connector-bg-rest: ds.$color-border-neutral-subdued-rest !default;
+
+$stepper-connector-value-bg-rest: ds.$color-surface-primary-default-rest !default;
+
+$stepper-step-shadow-rest: ds.$color-surface-neutral-default-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_index.scss
new file mode 100644
index 000000000000..640c19579e97
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_index.scss
@@ -0,0 +1,54 @@
+@use "../../base/stepper";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/stepper/mixins" as *;
+
+// adduse
+
+@include stepper(
+  $stepper-padding,
+);
+@include connector(
+  $stepper-connector-bg-rest,
+  $stepper-connector-value-bg-rest,
+  $stepper-connector-size,
+  $stepper-connector-padding,
+  $stepper-connector-thickness,
+);
+@include step(
+  $stepper-step-min-size,
+  $stepper-step-indicator-size,
+  $stepper-step-indicator-size,
+  $stepper-step-content-row-gap,
+  $stepper-step-content-column-gap,
+  $stepper-step-optional-mark-font-size,
+  $stepper-step-icon-size,
+  $stepper-step-transition-duration,
+);
+@include step-states(
+  $stepper-step-shadow-rest,
+  $stepper-step-base-bg-rest,
+  $stepper-step-base-bg-hovered,
+  $stepper-step-base-border-rest,
+  $stepper-step-base-border-hovered,
+  $stepper-step-base-content-rest,
+  $stepper-step-base-label-content-rest,
+  $stepper-step-bg-selected,
+  $stepper-step-bg-selected-hovered,
+  $stepper-step-content-selected,
+  $stepper-step-label-content-selected,
+  $stepper-step-font-weight-selected,
+  $stepper-step-invalid-bg-rest,
+  $stepper-step-invalid-bg-hovered,
+  $stepper-step-invalid-border-rest,
+  $stepper-step-invalid-border-hovered,
+  $stepper-step-invalid-content-rest,
+  $stepper-step-invalid-content-hovered,
+  $stepper-step-invalid-label-content-rest,
+  $stepper-step-invalid-bg-selected,
+  $stepper-step-invalid-bg-selected-hovered,
+  $stepper-step-content-disabled,
+  $stepper-step-bg-disabled,
+  $stepper-step-shadow-disabled,
+);
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_sizes.scss
new file mode 100644
index 000000000000..c4dec7b6e89f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_sizes.scss
@@ -0,0 +1,39 @@
+@use "colors" as *;
+@use "../colors" as *;
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+@use "../button/sizes" as buttonSizes;
+@use "../typography/sizes" as typographySizes;
+
+// adduse
+
+$stepper-padding: null !default;
+$stepper-step-min-size: null !default;
+$stepper-step-indicator-size: null !default;
+$stepper-step-content-row-gap: null !default;
+$stepper-step-content-column-gap: null !default;
+$stepper-step-optional-mark-font-size: typographySizes.$typography-xs-font-size !default;
+$stepper-step-icon-size: buttonSizes.$button-icon-size !default;
+
+$stepper-step-font-weight-selected: ds.$font-weight-base-strong !default;
+$stepper-step-transition-duration: .4s !default;
+
+@if $size == "default" {
+  $stepper-padding: ds.$spacing-120 !default;
+  $stepper-step-min-size: ds.$spacing-480 !default;
+  $stepper-step-indicator-size: ds.$spacing-320 !default;
+  $stepper-step-content-row-gap: ds.$spacing-80 !default;
+  $stepper-step-content-column-gap: ds.$spacing-120 !default;
+}
+
+@else if $size == "compact" {
+  $stepper-padding: ds.$spacing-80 !default;
+  $stepper-step-min-size: ds.$spacing-400 !default;
+  $stepper-step-indicator-size: ds.$spacing-240 !default;
+  $stepper-step-content-row-gap: ds.$spacing-60 !default;
+  $stepper-step-content-column-gap: ds.$spacing-80 !default;
+}
+
+$stepper-connector-thickness: ds.$spacing-20 !default;
+$stepper-connector-size: $stepper-step-indicator-size !default;
+$stepper-connector-padding: $stepper-padding !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/switch/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/switch/_colors.scss
new file mode 100644
index 000000000000..fc7739e97935
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/switch/_colors.scss
@@ -0,0 +1,28 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$switch-on-border-rest: ds.$color-surface-primary-compound-rest !default;
+$switch-on-border-hovered: ds.$color-surface-primary-compound-hovered !default;
+$switch-on-border-focused: ds.$color-surface-primary-default-active !default;
+
+$switch-bg-rest: ds.$color-surface-transparent-rest !default;
+
+$switch-handle-off-bg-rest: ds.$color-content-neutral-subdued-rest !default;
+
+$switch-on-bg-rest: ds.$color-surface-primary-compound-rest !default;
+
+$switch-handle-on-bg-rest: ds.$color-content-neutral-default-inverted-rest !default;
+$switch-on-bg-disabled: ds.$color-surface-neutral-default-disabled !default;
+$switch-handle-bg-disabled: ds.$color-content-neutral-subdued-disabled !default;
+$switch-border-disabled: ds.$color-border-neutral-accessible-disabled !default;
+$switch-off-border-rest: ds.$color-border-neutral-accessible-rest !default;
+$switch-off-border-hovered: ds.$color-border-neutral-accessible-hovered !default;
+$switch-off-border-active: ds.$color-border-neutral-accessible-active !default;
+
+$switch-invalid-border-rest: ds.$color-border-danger-default-rest !default;
+$switch-invalid-border-hovered: ds.$color-border-danger-default-hovered !default;
+$switch-invalid-border-focused: ds.$color-border-danger-default-hovered !default;
+
+// Subtle ring around the ON handle; no switch shadow role — relative-color bridge over the handle token (see DIVERGENCES.md)
+$switch-handle-on-shadow-rest: rgb(from #{ds.$color-content-neutral-default-inverted-rest} r g b / 0.1) !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/switch/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/switch/_index.scss
new file mode 100644
index 000000000000..a3b27a253694
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/switch/_index.scss
@@ -0,0 +1,48 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/mixins" as *;
+@use "../../base/switch";
+@use "../../base/switch/mixins" as *;
+
+// adduse
+
+@include dx-switch(
+  $switch-width,
+  $switch-height,
+  $switch-padding,
+  $switch-handle-height,
+  $switch-container-height,
+  $switch-container-padding-inline,
+  $switch-container-margin-block,
+  $switch-handle-margin,
+  $switch-handle-border-radius,
+  $switch-transition,
+);
+@include dx-switch-states-fluent(
+  $switch-on-bg-disabled,
+  $switch-handle-bg-disabled,
+  $switch-box-shadow,
+  $switch-bg-rest,
+  $switch-on-bg-rest,
+  $switch-on-border-hovered,
+  $switch-on-border-focused,
+  $switch-handle-on-box-shadow,
+  $switch-handle-off-bg-rest,
+  $switch-handle-on-bg-rest,
+  1px solid,
+  $switch-off-border-rest,
+  $switch-off-border-hovered,
+  $switch-off-border-active,
+  $switch-on-border-rest,
+  $switch-invalid-border-rest,
+  $switch-invalid-border-hovered,
+  $switch-invalid-border-focused,
+  $switch-border-disabled,
+);
+@include dx-switch-rtl(
+  calc(#{$switch-handle-height} - #{$switch-handle-margin}),
+  $switch-handle-on-box-shadow-blur,
+  $switch-container-rtl-offset,
+);
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/switch/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/switch/_sizes.scss
new file mode 100644
index 000000000000..79069c2d103e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/switch/_sizes.scss
@@ -0,0 +1,50 @@
+@use "../sizes" as *;
+@use "colors" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+// Moved out of _index.scss (O7): a transition and a shadow are values, not rules
+$switch-transition: all 0.2s cubic-bezier(0.33,0,0.67,1);
+$switch-box-shadow: none;
+
+// Not a colour: a radius that used to sit in _colors.scss (NAMING.md, O7)
+$switch-handle-border-radius: 50% !default;
+
+$switch-width: null !default;
+$switch-handle-margin: null !default;
+$switch-padding: ds.$spacing-80 !default;
+$switch-container-margin-block: null !default;
+$switch-container-padding-inline: null !default;
+$switch-height: null !default;
+$switch-handle-height: null !default;
+$switch-container-height: null !default;
+
+$switch-handle-on-box-shadow-blur: 0 !default;
+
+/*
+ * Composite box-shadow (geometry + a colour reference), so it belongs here rather than in
+ * _colors.scss — same rule as $toast-box-shadow. Moved out of _index.scss (O7).
+ */
+$switch-handle-on-box-shadow: 0 0 0 $switch-handle-on-box-shadow-blur $switch-handle-on-shadow-rest;
+$switch-container-rtl-offset: ds.$spacing-60 !default;
+
+@if $size == "default" {
+  $switch-width: ds.$spacing-400 !default;
+  $switch-handle-height: ds.$spacing-140 !default;
+  $switch-handle-margin: ds.$spacing-30 !default;
+  $switch-container-margin-block: 0 !default;
+  $switch-container-padding-inline: $switch-handle-margin !default;
+  $switch-height: ds.$spacing-200 !default;
+  $switch-container-height: $switch-height !default;
+}
+
+@else if $size == "compact" {
+  $switch-width: ds.$spacing-320 !default;
+  $switch-handle-height: ds.$spacing-120 !default;
+  $switch-handle-margin: ds.$spacing-20 !default;
+  $switch-container-margin-block: 0 !default;
+  $switch-container-padding-inline: $switch-handle-margin !default;
+  $switch-height: ds.$spacing-160 !default;
+  $switch-container-height: $switch-height !default;
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tabPanel/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tabPanel/_colors.scss
new file mode 100644
index 000000000000..2d4d95b82079
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabPanel/_colors.scss
@@ -0,0 +1,5 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$tab-panel-border-rest: ds.$color-border-neutral-default-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tabPanel/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tabPanel/_index.scss
new file mode 100644
index 000000000000..c19ee528776d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabPanel/_index.scss
@@ -0,0 +1,76 @@
+@use "sass:color";
+@use "sass:selector";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/tabPanel";
+
+// adduse
+
+.dx-tabpanel {
+  .dx-tabpanel-tab {
+    flex-basis: unset;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+
+  .dx-tabs .dx-tabs-scrollable .dx-tab {
+    flex-basis: auto;
+  }
+
+  .dx-tabs-nav-button {
+    height: auto;
+  }
+}
+
+.dx-tabpanel-tabs-position-top {
+  > .dx-tabpanel-tabs {
+    .dx-tabs {
+      border-bottom: $tab-panel-tabs-top-border;
+      border-bottom-color: $tab-panel-border-rest;
+
+      @at-root #{selector.append(".dx-empty-collection", &)} {
+        border-bottom: none;
+      }
+    }
+  }
+}
+
+.dx-tabpanel-tabs-position-bottom {
+  > .dx-tabpanel-tabs {
+    .dx-tabs {
+      border-top: $tab-panel-tabs-bottom-border;
+      border-top-color: $tab-panel-border-rest;
+
+      @at-root #{selector.append(".dx-empty-collection", &)} {
+        border-top: none;
+      }
+    }
+  }
+}
+
+.dx-tabpanel-tabs-position-left {
+  > .dx-tabpanel-tabs {
+    .dx-tabs {
+      border-right: $tab-panel-tabs-left-border;
+      border-right-color: $tab-panel-border-rest;
+
+      @at-root #{selector.append(".dx-empty-collection", &)} {
+        border-right: none;
+      }
+    }
+  }
+}
+
+.dx-tabpanel-tabs-position-right {
+  > .dx-tabpanel-tabs {
+    .dx-tabs {
+      border-left: $tab-panel-tabs-right-border;
+      border-left-color: $tab-panel-border-rest;
+
+      @at-root #{selector.append(".dx-empty-collection", &)} {
+        border-left: none;
+      }
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tabPanel/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tabPanel/_sizes.scss
new file mode 100644
index 000000000000..fb30eedfe685
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabPanel/_sizes.scss
@@ -0,0 +1,11 @@
+@use "../../../_design-system/variables/ds" as ds;
+@use "../sizes" as *;
+
+// adduse
+
+
+// Values hoisted from style-file literals (tokenized)
+$tab-panel-tabs-top-border: ds.$border-width-10 solid !default;
+$tab-panel-tabs-bottom-border: ds.$border-width-10 solid !default;
+$tab-panel-tabs-left-border: ds.$border-width-10 solid !default;
+$tab-panel-tabs-right-border: ds.$border-width-10 solid !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tabs/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/_index.scss
new file mode 100644
index 000000000000..7d1d1a0ffa33
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/_index.scss
@@ -0,0 +1,15 @@
+@use "sass:color";
+@use "../colors" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../../base/tabs";
+@use "variables/colors" as *;
+@use "variables/sizes" as *;
+@use "mixins" as *;
+@use "layout/tabs" as *;
+@use "layout/tab/base" as *;
+@use "layout/navigation-button/base" as *;
+
+// adduse
+@use "../scrollable";
+@use "../badge";
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/navigation-button/_base.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/navigation-button/_base.scss
new file mode 100644
index 000000000000..38e33d3735ee
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/navigation-button/_base.scss
@@ -0,0 +1,60 @@
+@use "sass:color";
+@use "../../../colors" as *;
+@use "../../../sizes" as *;
+@use "../../../../base/icon_fonts" as *;
+@use "../../../../base/tabs";
+@use "../../variables/colors" as *;
+@use "../../variables/sizes" as *;
+@use "../../mixins" as *;
+
+// adduse
+@use "../../../scrollable";
+@use "../../../badge";
+
+.dx-tabs .dx-tabs-nav-button {
+  box-shadow: none;
+}
+
+.dx-tabs-styling-mode-secondary .dx-tabs-nav-button {
+  border-radius: $tabs-item-secondary-border-radius;
+}
+
+.dx-tabs-nav-button {
+  border: none;
+  height: $tabs-tab-height;
+  background-color: $tabs-nav-button-bg-rest;
+
+  &.dx-button.dx-state-disabled.dx-button-mode-contained {
+    visibility: hidden;
+  }
+
+  &.dx-button-has-icon .dx-icon {
+    width: $tabs-tab-nav-button-icon-width;
+    height: $tabs-tab-nav-button-icon-height;
+    font-size: $tabs-tab-nav-button-icon-font-size;
+  }
+
+  &.dx-state-active {
+    border: none;
+  }
+
+  &.dx-state-disabled {
+    opacity: 1;
+    background-color: $tabs-tab-bg-rest;
+
+    .dx-button-content {
+      opacity: $tabs-nav-button-opacity-disabled;
+    }
+  }
+
+  .dx-button-content {
+    flex: unset;
+    padding: $tabs-tab-nav-button-content-padding;
+  }
+}
+
+.dx-tabs-vertical {
+  .dx-tabs-nav-button {
+    padding: $tabs-tab-vertical-nav-button-content-padding;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/tab/_base.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/tab/_base.scss
new file mode 100644
index 000000000000..8743ec854b27
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/tab/_base.scss
@@ -0,0 +1,126 @@
+@use "sass:color";
+@use "sass:string" as string;
+@use "../../../colors" as *;
+@use "../../../sizes" as *;
+@use "../../../../base/icon_fonts" as *;
+@use "../../../../base/tabs";
+@use "../../variables/colors" as *;
+@use "../../variables/sizes" as *;
+@use "../../mixins" as *;
+@use "../../../common/sizes" as *;
+
+// adduse
+@use "../../../scrollable";
+@use "../../../badge";
+@use "styling-mode/primary" as *;
+@use "styling-mode/secondary" as *;
+
+
+.dx-tab {
+  gap: $tabs-item-gap;
+  padding: $tabs-item-padding;
+  background-color: $tabs-tab-bg-rest;
+  color: $tabs-tab-content-rest;
+
+  &.dx-state-hover {
+    background-color: $tabs-tab-bg-hovered;
+  }
+
+  &.dx-tab-selected {
+    color: $tabs-tab-content-selected;
+
+    .dx-icon {
+      color: $tabs-tab-icon-content-selected;
+    }
+
+    .dx-tab-text .dx-tab-text-span {
+      visibility: visible;
+
+      .dx-tab-text-span-pseudo {
+        visibility: hidden;
+      }
+    }
+  }
+
+  &.dx-state-disabled {
+    color: $tabs-tab-content-disabled;
+
+    .dx-tab-text .dx-tab-text-span-pseudo {
+      color: $tabs-tab-content-disabled;
+    }
+
+    .dx-icon {
+      color: $tabs-tab-icon-content-disabled;
+    }
+  }
+
+  &.dx-state-active {
+    background-color: $tabs-tab-bg-active;
+  }
+
+  .dx-tab-text {
+    column-gap: $tabs-text-column-gap;
+    row-gap: $tabs-item-gap;
+    line-height: $global-line-height;
+
+    .dx-tab-text-span {
+      position: relative;
+      display: block;
+      font-weight: $tabs-tab-accent-font-weight;
+      visibility: hidden;
+    }
+
+    .dx-tab-text-span-pseudo {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      pointer-events: none;
+      color: $tabs-tab-content-rest;
+      font-weight: $tabs-tab-basic-font-weight;
+      visibility: visible;
+    }
+  }
+
+  .dx-icon {
+    color: $tabs-tab-icon-rest;
+    visibility: visible;
+
+    @include dx-icon-sizing($tabs-icon-size);
+
+    width: 1em;
+    height: 1em;
+    line-height: 1;
+  }
+
+  .dx-tabs-item-badge {
+    align-self: center;
+    min-width: $tabs-badge-min-size;
+    min-height: $tabs-badge-min-size;
+  }
+}
+
+.dx-tabs.dx-state-focused {
+  .dx-tab.dx-state-focused {
+    background-color: $tabs-tab-bg-focused;
+  }
+}
+
+.dx-tabs-icon-position-start .dx-tab-text::after {
+  text-align: end;
+}
+
+.dx-tabs-icon-position-end .dx-tab-text::after {
+  text-align: start;
+}
+
+.dx-tabs-icon-position-top .dx-tab-text::after {
+  text-align: center;
+  vertical-align: bottom;
+}
+
+.dx-tabs-icon-position-bottom .dx-tab-text::after {
+  text-align: center;
+  vertical-align: top;
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/tab/styling-mode/_primary.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/tab/styling-mode/_primary.scss
new file mode 100644
index 000000000000..d0d4e3d0cee3
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/tab/styling-mode/_primary.scss
@@ -0,0 +1,119 @@
+@use "sass:color";
+@use "../../../../colors" as *;
+@use "../../../../sizes" as *;
+@use "../../../../../base/icon_fonts" as *;
+@use "../../../../../base/tabs";
+@use "../../../variables/colors" as *;
+@use "../../../variables/sizes" as *;
+@use "../../../mixins" as *;
+
+// adduse
+@use "../../../../scrollable";
+@use "../../../../badge";
+
+
+.dx-tabs-styling-mode-primary {
+  .dx-tab {
+    &.dx-state-hover {
+      background-color: $tabs-tab-primary-bg-hovered;
+    }
+
+    &.dx-state-focused {
+      background-color: $tabs-tab-primary-bg-focused;
+    }
+
+    &.dx-state-active {
+      background-color: $tabs-tab-primary-bg-active;
+    }
+  }
+
+  &.dx-tab-indicator-position-top {
+    .dx-tab {
+      @include dx-tabs-indicator-primary(top);
+    }
+  }
+
+  &.dx-tab-indicator-position-bottom {
+    .dx-tab {
+      @include dx-tabs-indicator-primary(bottom);
+    }
+  }
+
+  &.dx-tab-indicator-position-top,
+  &.dx-tab-indicator-position-bottom {
+    .dx-tab {
+      &.dx-state-hover {
+        @include dx-tabs-indicator-background($tabs-tab-border-hovered);
+      }
+
+      &.dx-state-active {
+        @include dx-tabs-indicator-background($tabs-tab-border-active);
+      }
+    }
+
+    .dx-tab-selected {
+      @include dx-tabs-indicator-background($tabs-tab-basic-border-selected);
+
+      &.dx-state-focused {
+        @include dx-tabs-indicator-background($tabs-tab-border-selected-focused);
+      }
+
+      &.dx-state-hover {
+        @include dx-tabs-indicator-background($tabs-tab-border-selected-hovered);
+      }
+
+      &.dx-state-active {
+        @include dx-tabs-indicator-background($tabs-tab-border-selected-active);
+      }
+
+      &.dx-state-disabled {
+        @include dx-tabs-indicator-background($tabs-tab-border-disabled);
+      }
+    }
+  }
+
+  &.dx-tab-indicator-position-right {
+    .dx-tab {
+      @include dx-tabs-indicator-primary(right);
+    }
+  }
+
+  &.dx-tab-indicator-position-left {
+    .dx-tab {
+      @include dx-tabs-indicator-primary(left);
+    }
+  }
+
+  &.dx-tab-indicator-position-right,
+  &.dx-tab-indicator-position-left {
+    .dx-tab {
+      &.dx-state-hover {
+        @include dx-tabs-indicator-background($tabs-tab-border-hovered);
+      }
+
+      &.dx-state-active {
+        @include dx-tabs-indicator-background($tabs-tab-border-active);
+      }
+    }
+
+    .dx-tab-selected {
+      @include dx-tabs-indicator-background($tabs-tab-basic-border-selected);
+
+      &.dx-state-focused {
+        @include dx-tabs-indicator-background($tabs-tab-border-selected-focused);
+      }
+
+      &.dx-state-hover {
+        @include dx-tabs-indicator-background($tabs-tab-border-selected-hovered);
+      }
+
+      &.dx-state-active {
+        @include dx-tabs-indicator-background($tabs-tab-border-selected-active);
+      }
+
+      &.dx-state-disabled {
+        @include dx-tabs-indicator-background($tabs-tab-border-disabled);
+      }
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/tab/styling-mode/_secondary.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/tab/styling-mode/_secondary.scss
new file mode 100644
index 000000000000..f220ab6cfe23
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/tab/styling-mode/_secondary.scss
@@ -0,0 +1,115 @@
+@use "sass:color";
+@use "../../../../colors" as *;
+@use "../../../../sizes" as *;
+@use "../../../../../base/icon_fonts" as *;
+@use "../../../../../base/tabs";
+@use "../../../variables/colors" as *;
+@use "../../../variables/sizes" as *;
+@use "../../../mixins" as *;
+
+// adduse
+@use "../../../../scrollable";
+@use "../../../../badge";
+
+
+.dx-tabs-styling-mode-secondary {
+  .dx-tab {
+    border-radius: $tabs-item-secondary-border-radius;
+  }
+
+  &.dx-tab-indicator-position-top {
+    .dx-tab .dx-tab-content {
+      @include dx-tabs-indicator-secondary();
+      @include dx-tabs-horizontal-indicator-secondary(top);
+    }
+  }
+
+  &.dx-tab-indicator-position-bottom {
+    .dx-tab .dx-tab-content {
+      @include dx-tabs-indicator-secondary();
+      @include dx-tabs-horizontal-indicator-secondary(bottom);
+    }
+  }
+
+  &.dx-tab-indicator-position-top,
+  &.dx-tab-indicator-position-bottom {
+    .dx-tab {
+      &.dx-state-hover .dx-tab-content {
+        @include dx-tabs-indicator-background($tabs-tab-border-hovered);
+      }
+
+      &.dx-state-active .dx-tab-content {
+        @include dx-tabs-indicator-background($tabs-tab-border-active);
+      }
+
+      &.dx-tab-selected {
+        .dx-tab-content {
+          @include dx-tabs-indicator-background($tabs-tab-basic-border-selected);
+        }
+
+        &.dx-state-focused .dx-tab-content {
+          @include dx-tabs-indicator-background($tabs-tab-border-selected-focused);
+        }
+
+        &.dx-state-hover .dx-tab-content {
+          @include dx-tabs-indicator-background($tabs-tab-border-selected-hovered);
+        }
+
+        &.dx-state-active .dx-tab-content {
+          @include dx-tabs-indicator-background($tabs-tab-border-selected-active);
+        }
+
+        &.dx-state-disabled .dx-tab-content {
+          @include dx-tabs-indicator-background($tabs-tab-border-disabled);
+        }
+      }
+    }
+  }
+
+  &.dx-tab-indicator-position-right {
+    .dx-tab {
+      @include dx-tabs-indicator-secondary();
+      @include dx-tabs-vertical-indicator-secondary(right);
+    }
+  }
+
+  &.dx-tab-indicator-position-left {
+    .dx-tab {
+      @include dx-tabs-indicator-secondary();
+      @include dx-tabs-vertical-indicator-secondary(left);
+    }
+  }
+
+  &.dx-tab-indicator-position-right,
+  &.dx-tab-indicator-position-left {
+    .dx-tab {
+      &.dx-state-hover {
+        @include dx-tabs-indicator-background($tabs-tab-border-hovered);
+      }
+
+      &.dx-state-active {
+        @include dx-tabs-indicator-background($tabs-tab-border-active);
+      }
+    }
+
+    .dx-tab-selected {
+      @include dx-tabs-indicator-background($tabs-tab-basic-border-selected);
+
+      &.dx-state-focused {
+        @include dx-tabs-indicator-background($tabs-tab-border-selected-focused);
+      }
+
+      &.dx-state-hover {
+        @include dx-tabs-indicator-background($tabs-tab-border-selected-hovered);
+      }
+
+      &.dx-state-active {
+        @include dx-tabs-indicator-background($tabs-tab-border-selected-active);
+      }
+
+      &.dx-state-disabled {
+        @include dx-tabs-indicator-background($tabs-tab-border-disabled);
+      }
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/tabs/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/tabs/_index.scss
new file mode 100644
index 000000000000..9f578c2c0e1c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/tabs/_index.scss
@@ -0,0 +1,22 @@
+@use "sass:color";
+@use "../../../colors" as *;
+@use "../../../sizes" as *;
+@use "../../../../base/icon_fonts" as *;
+@use "../../../../base/tabs";
+@use "../../variables/colors" as *;
+@use "../../variables/sizes" as *;
+@use "../../mixins" as *;
+
+// adduse
+@use "../../../scrollable";
+@use "../../../badge";
+
+
+.dx-tabs {
+  padding: 0;
+  background-color: $tabs-tab-bg-rest;
+
+  .dx-scrollable {
+    flex-basis: 100%;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tabs/mixins/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/mixins/_index.scss
new file mode 100644
index 000000000000..4f953607be7a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/mixins/_index.scss
@@ -0,0 +1,86 @@
+@use "../variables/sizes" as *;
+
+// adduse
+
+
+@mixin dx-tabs-indicator {
+  &::after {
+    content: "";
+    position: absolute;
+  }
+}
+
+@mixin dx-tabs-indicator-background($background-color) {
+  &::after {
+    background-color: $background-color;
+  }
+}
+
+@mixin dx-tabs-indicator-primary($position) {
+  @include dx-tabs-indicator();
+
+  &::after {
+    @if $position == top {
+      top: 0;
+      right: 0;
+      left: 0;
+      width: $tabs-indicator-primary-length;
+      height: $tabs-indicator-primary-thickness;
+    } @else if $position == right {
+      top: 0;
+      right: 0;
+      bottom: 0;
+      height: $tabs-indicator-primary-length;
+      width: $tabs-indicator-primary-thickness;
+    } @else if $position == bottom {
+      right: 0;
+      bottom: 0;
+      left: 0;
+      width: $tabs-indicator-primary-length;
+      height: $tabs-indicator-primary-thickness;
+    } @else if $position == left {
+      top: 0;
+      bottom: 0;
+      left: 0;
+      height: $tabs-indicator-primary-length;
+      width: $tabs-indicator-primary-thickness;
+    }
+  }
+}
+
+@mixin dx-tabs-indicator-secondary {
+  @include dx-tabs-indicator();
+
+  &::after {
+    border-radius: $tabs-indicator-secondary-border-radius;
+  }
+}
+
+@mixin dx-tabs-horizontal-indicator-secondary($position) {
+  &::after {
+    right: 0;
+    left: 0;
+    width: $tabs-indicator-secondary-length;
+    height: $tabs-indicator-secondary-thickness;
+
+    @if $position == top {
+      top: calc(-1 * #{$tabs-item-padding-block});
+    } @else if $position == bottom {
+      bottom: calc(-1 * #{$tabs-item-padding-block});
+    }
+  }
+}
+
+@mixin dx-tabs-vertical-indicator-secondary($position) {
+  &::after {
+    top: $tabs-item-padding-block;
+    width: $tabs-indicator-secondary-thickness;
+    height: calc($tabs-indicator-secondary-length - 2 * $tabs-item-padding-block);
+
+    @if $position == right {
+      right: 0;
+    } @else if $position == left {
+      left: 0;
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tabs/variables/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/variables/_colors.scss
new file mode 100644
index 000000000000..62bc503bf1d8
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/variables/_colors.scss
@@ -0,0 +1,36 @@
+@use "../../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$tabs-tab-content-rest: ds.$color-content-neutral-default-rest !default;
+
+$tabs-tab-content-selected: ds.$color-content-neutral-default-rest !default;
+
+$tabs-tab-content-disabled: ds.$color-content-neutral-default-disabled !default;
+
+$tabs-tab-basic-border-selected: ds.$color-content-primary-default-rest !default;
+$tabs-tab-border-selected-active: ds.$color-content-primary-default-active !default;
+$tabs-tab-border-selected-hovered: ds.$color-content-primary-default-hovered !default;
+$tabs-tab-border-selected-focused: ds.$color-content-primary-default-rest !default;
+$tabs-tab-border-active: ds.$color-border-neutral-default-active !default;
+$tabs-tab-border-hovered: ds.$color-border-neutral-default-hovered !default;
+
+$tabs-tab-border-disabled: ds.$color-border-neutral-default-disabled !default;
+
+$tabs-tab-bg-rest: transparent !default;
+
+$tabs-tab-icon-rest: $tabs-tab-content-rest !default;
+
+$tabs-tab-icon-content-selected: ds.$color-content-primary-default-rest !default;
+
+$tabs-tab-icon-content-disabled: ds.$color-content-neutral-default-disabled !default;
+
+$tabs-tab-bg-hovered: transparent !default;
+
+$tabs-tab-bg-focused: ds.$color-surface-neutral-default-hovered !default;
+$tabs-tab-primary-bg-hovered: ds.$color-surface-neutral-default-hovered !default;
+$tabs-tab-primary-bg-focused: ds.$color-surface-neutral-default-hovered !default;
+$tabs-tab-primary-bg-active: ds.$color-surface-neutral-default-active !default;
+
+$tabs-tab-bg-active: ds.$color-surface-neutral-default-rest !default;
+$tabs-nav-button-bg-rest: transparent !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tabs/variables/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/variables/_sizes.scss
new file mode 100644
index 000000000000..6c5ce6129856
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/variables/_sizes.scss
@@ -0,0 +1,65 @@
+@use "../../sizes" as *;
+@use "../../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+// Not a colour: an opacity that used to sit in _colors.scss (NAMING.md, O7)
+$tabs-nav-button-opacity-disabled: 0 !default;
+
+// Moved here from the theme root: this component owns it (NAMING.md O1)
+$tabs-text-column-gap: ds.$spacing-80 !default;
+
+
+$tabs-item-gap: ds.$spacing-40 !default;
+$tabs-item-padding: null !default;
+$tabs-item-padding-block: null !default;
+$tabs-item-padding-inline: null !default;
+$tabs-tab-height: null !default;
+
+$tabs-tab-basic-font-weight: ds.$font-weight-base-default !default;
+$tabs-tab-accent-font-weight: ds.$font-weight-500 !default; // dx-no-semantic-role: 500 is off the weight-role scale (400/600/700)
+$tabs-icon-size: $global-icon-size !default;
+
+$tabs-tab-nav-button-icon-width: null !default;
+$tabs-tab-nav-button-icon-height: null !default;
+$tabs-tab-nav-button-icon-font-size: null !default;
+$tabs-tab-nav-button-content-padding: null !default;
+
+$tabs-tab-vertical-nav-button-content-padding: null !default;
+
+$tabs-indicator-primary-thickness: ds.$spacing-20 !default;
+$tabs-indicator-secondary-thickness: ds.$spacing-30 !default;
+
+$tabs-indicator-primary-length: 100% !default;
+$tabs-indicator-secondary-length: 100% !default;
+
+$tabs-item-secondary-border-radius: ds.$border-radius-40 !default;
+$tabs-indicator-secondary-border-radius: ds.$border-radius-40 !default;
+
+$tabs-badge-min-size: null !default;
+
+@if $size == "default" {
+  $tabs-item-padding-block: ds.$spacing-120 !default;
+  $tabs-item-padding-inline: ds.$spacing-100 !default;
+  $tabs-item-padding: $tabs-item-padding-block $tabs-item-padding-inline !default;
+  $tabs-tab-height: auto !default;
+  $tabs-tab-nav-button-icon-width: ds.$spacing-200 !default;
+  $tabs-tab-nav-button-icon-height: ds.$spacing-200 !default;
+  $tabs-tab-nav-button-icon-font-size: ds.$font-size-200 !default; // dx-icon-glyph-size: text roles not applicable
+  $tabs-tab-nav-button-content-padding: 0 ds.$spacing-40 !default;
+  $tabs-tab-vertical-nav-button-content-padding: ds.$spacing-40 0 !default;
+  $tabs-badge-min-size: ds.$spacing-200 !default;
+}
+
+@else if $size == "compact" {
+  $tabs-item-padding-block: ds.$spacing-80 !default;
+  $tabs-item-padding-inline: ds.$spacing-80 !default;
+  $tabs-item-padding: $tabs-item-padding-block $tabs-item-padding-inline !default;
+  $tabs-tab-height: auto !default;
+  $tabs-tab-nav-button-icon-width: ds.$spacing-160 !default;
+  $tabs-tab-nav-button-icon-height: ds.$spacing-160 !default;
+  $tabs-tab-nav-button-icon-font-size: ds.$font-size-160 !default; // dx-icon-glyph-size: text roles not applicable
+  $tabs-tab-nav-button-content-padding: 0 ds.$spacing-40 !default;
+  $tabs-tab-vertical-nav-button-content-padding: ds.$spacing-40 0 !default;
+  $tabs-badge-min-size: ds.$spacing-160 !default;
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tagBox/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tagBox/_colors.scss
new file mode 100644
index 000000000000..4eb034022e66
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tagBox/_colors.scss
@@ -0,0 +1,18 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$tag-box-tag-content-rest: ds.$color-content-neutral-default-rest !default;
+
+$tag-box-tag-bg-rest: ds.$color-surface-neutral-deep-rest !default;
+$tag-box-tag-bg-hovered: ds.$color-surface-neutral-default-hovered !default;
+
+$tag-box-tag-content-active: ds.$color-content-neutral-default-rest !default;
+
+$tag-box-tag-remove-button-content-rest: ds.$color-content-neutral-subdued-rest !default;
+$tag-box-tag-border-focused: ds.$color-border-primary-default-rest !default;
+$tag-box-select-all-line-rest: ds.$color-border-neutral-default-rest !default;
+$tag-box-tag-content-disabled: ds.$color-content-neutral-default-disabled !default;
+$tag-box-tag-bg-disabled: ds.$color-surface-neutral-subdued-disabled !default;
+
+$tag-box-border-disabled: ds.$color-border-neutral-default-disabled !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tagBox/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tagBox/_index.scss
new file mode 100644
index 000000000000..0d13fd479bc8
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tagBox/_index.scss
@@ -0,0 +1,185 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../textEditor" as *;
+@use "../common/sizes" as *;
+@use "../../base/tagBox";
+
+// adduse
+
+.dx-tagbox {
+  .dx-tag-container {
+    height: 100%;
+    padding-top: $tag-box-tag-container-padding-block;
+    padding-bottom: $tag-box-tag-container-padding-block;
+    gap: $tag-box-tag-container-gap;
+
+    .dx-texteditor-input {
+      padding: 0;
+      min-height: 0;
+    }
+  }
+
+  &.dx-editor-underlined {
+    .dx-tag-container {
+      padding-top: calc(#{$tag-box-tag-container-padding-block} + 1px);
+      padding-bottom: calc(#{$tag-box-tag-container-padding-block} + 1px);
+    }
+  }
+
+  &.dx-editor-outlined,
+  &.dx-editor-filled,
+  &.dx-editor-underlined {
+    .dx-texteditor-input {
+      height: $tag-box-tag-size;
+    }
+  }
+
+  &.dx-editor-outlined,
+  &.dx-editor-filled {
+    .dx-tag-container {
+      padding-inline-start: $tag-box-tag-container-padding-inline-start;
+    }
+  }
+
+  &.dx-texteditor-with-label:not(.dx-texteditor-label-outside),
+  &.dx-texteditor-with-floating-label {
+    &.dx-editor-filled,
+    &.dx-editor-underlined {
+      .dx-tag {
+        margin: 0;
+      }
+
+      .dx-texteditor-input {
+        padding: 0;
+      }
+    }
+
+    &.dx-editor-filled {
+      .dx-tag-container,
+      .dx-placeholder::before {
+        padding-top: $tag-box-filled-with-label-padding-block-start;
+        padding-bottom: $tag-box-filled-with-label-padding-block-end;
+      }
+    }
+
+    &.dx-editor-underlined {
+      .dx-tag-container,
+      .dx-placeholder::before {
+        padding-top: calc(#{$tag-box-filled-with-label-padding-block-start} + 1px);
+        padding-bottom: calc(#{$tag-box-filled-with-label-padding-block-end} + 1px);
+      }
+    }
+  }
+
+  &.dx-state-disabled {
+    .dx-tag-content {
+      color: $tag-box-tag-content-disabled;
+      background-color: $tag-box-tag-bg-disabled;
+    }
+
+    .dx-tag-remove-button {
+      &::before {
+        color: $tag-box-tag-content-disabled;
+      }
+    }
+  }
+}
+
+.dx-tagbox-single-line {
+  .dx-tag-container {
+    padding-right: 0;
+  }
+}
+
+.dx-tag-content {
+  display: inline-flex;
+  align-items: center;
+  font-size: $tag-box-tag-content-font-size;
+  line-height: $tag-box-tag-content-line-height;
+  margin: 0;
+  padding-top: $tag-box-tag-content-padding-block;
+  padding-bottom: $tag-box-tag-content-padding-block;
+  padding-inline-start: $tag-box-tag-content-padding-inline-start;
+  padding-inline-end: $tag-box-tag-content-padding-inline-end;
+  min-width: $tag-box-tag-content-min-width;
+  background-color: $tag-box-tag-bg-rest;
+  color: $tag-box-tag-content-rest;
+  border-radius: $tag-box-tag-border-radius;
+  border-width: $tag-box-tag-border-width;
+  border-style: solid;
+  border-color: $tag-box-border-disabled;
+}
+
+.dx-tag-remove-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: $tag-box-tag-size;
+  height: 100%;
+
+  @include dx-icon(clear);
+
+  font-size: calc(#{$tag-box-tag-content-font-size} + 2px);
+
+  &::before {
+    content: "\f15f";
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: $tag-box-tag-remove-button-content-rest;
+  }
+}
+
+.dx-tag {
+  &:hover {
+    .dx-tag-content {
+      background-color: $tag-box-tag-bg-hovered;
+      color: $tag-box-tag-content-active;
+    }
+  }
+
+  &.dx-state-focused {
+    .dx-tag-content {
+      color: $tag-box-tag-content-active;
+      border-color: $tag-box-tag-border-focused;
+    }
+  }
+}
+
+@mixin tagbox-editor-container-offset() {
+  inset-inline-end: $invalid-badge-padding-inline;
+}
+
+.dx-tagbox.dx-invalid,
+.dx-tagbox.dx-valid {
+  .dx-texteditor-container {
+    &::after {
+      @include tagbox-editor-container-offset();
+    }
+  }
+}
+
+.dx-tagbox.dx-validation-pending {
+  .dx-texteditor-container {
+    .dx-pending-indicator {
+      @include tagbox-editor-container-offset();
+    }
+  }
+}
+
+.dx-tagbox-popup-wrapper {
+  .dx-list-select-all {
+    border-bottom: $tag-box-list-select-all-border-block-end;
+    border-bottom-color: $tag-box-select-all-line-rest;
+    padding-bottom: $tag-box-select-all-padding-block-end;
+    margin-bottom: $tag-box-select-all-margin-block-end;
+
+    &::after {
+      background-color: transparent;
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tagBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tagBox/_sizes.scss
new file mode 100644
index 000000000000..af2006bf750a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tagBox/_sizes.scss
@@ -0,0 +1,52 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$tag-box-tag-content-padding-inline-start: null !default;
+$tag-box-tag-content-padding-inline-end: null !default;
+$tag-box-tag-content-padding-block: null !default;
+$tag-box-tag-content-font-size: null !default;
+$tag-box-tag-container-padding-inline-start: null !default;
+$tag-box-tag-container-padding-block: null !default;
+$tag-box-tag-size: null !default;
+$tag-box-select-all-padding-block-end: ds.$spacing-120 !default;
+$tag-box-select-all-margin-block-end: ds.$spacing-30 !default;
+$tag-box-tag-border-radius: 999em !default;
+$tag-box-filled-with-label-padding-block-start: null !default;
+$tag-box-filled-with-label-padding-block-end: null !default;
+$tag-box-tag-content-line-height: null !default;
+$tag-box-tag-container-gap: null !default;
+
+@if $size == "default" {
+  $tag-box-tag-content-padding-inline-start: ds.$spacing-60 !default;
+  $tag-box-tag-content-padding-inline-end: ds.$spacing-200 !default;
+  $tag-box-tag-content-padding-block: ds.$spacing-20 !default;
+  $tag-box-tag-content-font-size: ds.$font-size-caption-md !default;
+  $tag-box-tag-container-padding-inline-start: ds.$spacing-120 !default;
+  $tag-box-tag-container-padding-block: ds.$spacing-50 !default;
+  $tag-box-tag-container-gap: ds.$spacing-40 !default;
+  $tag-box-tag-size: ds.$spacing-200 !default;
+  $tag-box-tag-content-line-height: 1.1666em !default;
+  $tag-box-filled-with-label-padding-block-start: ds.$spacing-90 !default;
+  $tag-box-filled-with-label-padding-block-end: ds.$spacing-10 !default;
+}
+
+@else if $size == "compact" {
+  $tag-box-tag-content-padding-inline-start: ds.$spacing-40 !default;
+  $tag-box-tag-content-padding-inline-end: ds.$spacing-200 !default;
+  $tag-box-tag-content-padding-block: 0 !default;
+  $tag-box-tag-content-font-size: ds.$font-size-caption-sm !default;
+  $tag-box-tag-container-padding-inline-start: ds.$spacing-80 !default;
+  $tag-box-tag-container-padding-block: ds.$spacing-30 !default;
+  $tag-box-tag-container-gap: ds.$spacing-20 !default;
+  $tag-box-tag-size: ds.$spacing-160 !default;
+  $tag-box-tag-content-line-height: 1.3333em !default;
+  $tag-box-filled-with-label-padding-block-start: ds.$spacing-60 !default;
+  $tag-box-filled-with-label-padding-block-end: 0 !default;
+}
+
+// Values hoisted from style-file literals (tokenized)
+$tag-box-tag-border-width: ds.$border-width-10 !default;
+$tag-box-list-select-all-border-block-end: ds.$border-width-10 solid !default;
+$tag-box-tag-content-min-width: ds.$spacing-400 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/textArea/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/textArea/_colors.scss
new file mode 100644
index 000000000000..89c53a85429e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/textArea/_colors.scss
@@ -0,0 +1,6 @@
+@use "sass:color";
+@use "../sizes" as *;
+@use "../colors" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/textArea/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/textArea/_index.scss
new file mode 100644
index 000000000000..24bee810c9ee
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/textArea/_index.scss
@@ -0,0 +1,34 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/textArea";
+@use "../../base/textArea/mixins" as *;
+@use "../textEditor/sizes" as textEditorSizes;
+
+// adduse
+
+@include dx-textarea(
+  2px,
+  $text-area-content-line-height,
+  textEditorSizes.$text-editor-input-filled-padding-block-start,
+  textEditorSizes.$text-editor-input-filled-with-label-padding-block-start,
+  textEditorSizes.$text-editor-input-underlined-with-label-padding-block-start,
+);
+
+.dx-textarea {
+  &.dx-editor-underlined {
+    .dx-texteditor-input {
+      padding-top: calc(#{textEditorSizes.$text-editor-input-underlined-padding-block-start} + 1px);
+      padding-bottom: calc(#{textEditorSizes.$text-editor-input-underlined-padding-block-end} + 1px);
+    }
+
+    &.dx-texteditor-with-label:not(.dx-texteditor-label-outside),
+    &.dx-texteditor-with-floating-label {
+      .dx-texteditor-input {
+        padding-bottom: textEditorSizes.$text-editor-input-underlined-with-label-padding-block-end;
+      }
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/textArea/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/textArea/_sizes.scss
new file mode 100644
index 000000000000..37c3da3a3e50
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/textArea/_sizes.scss
@@ -0,0 +1,14 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$text-area-content-line-height: null !default;
+
+@if $size == "default" {
+  $text-area-content-line-height: ds.$line-height-base-md !default;
+}
+
+@else if $size == "compact" {
+  $text-area-content-line-height: ds.$line-height-base-sm !default;
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/textBox/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/textBox/_colors.scss
new file mode 100644
index 000000000000..01a9bff2a81f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/textBox/_colors.scss
@@ -0,0 +1,6 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
+$text-box-content-disabled: ds.$color-content-neutral-default-disabled !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/textBox/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/textBox/_index.scss
new file mode 100644
index 000000000000..34467063d4a2
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/textBox/_index.scss
@@ -0,0 +1,70 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../textEditor/colors" as textEditorColors;
+@use "../textEditor/sizes" as textEditorSizes;
+@use "../../base/textBox";
+
+// adduse
+@use "../textEditor" as *;
+
+@mixin dx-texteditor-search-icon($texteditor-icon-size) {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: $texteditor-icon-size;
+  height: 100%;
+
+  &::before {
+    font-size: textEditorSizes.$text-editor-icon-container-size;
+  }
+}
+
+.dx-searchbox {
+  .dx-icon-search {
+    @include dx-icon(search);
+
+    color: textEditorColors.$text-editor-placeholder-rest;
+  }
+
+  &.dx-editor-underlined {
+    .dx-icon-search {
+      @include dx-texteditor-search-icon($text-box-search-icon-size);
+    }
+
+    .dx-texteditor-input,
+    .dx-placeholder::before {
+      padding-inline-start: $text-box-search-icon-size;
+    }
+  }
+
+  &.dx-editor-filled,
+  &.dx-editor-outlined {
+    .dx-icon-search {
+      @include dx-texteditor-search-icon($text-box-search-icon-size);
+    }
+
+    .dx-texteditor-input,
+    .dx-placeholder::before {
+      padding-inline-start: $text-box-search-icon-size;
+    }
+  }
+
+  &.dx-state-disabled {
+    .dx-icon-search {
+      color: $text-box-content-disabled;
+    }
+  }
+}
+
+.dx-searchbar {
+  padding-bottom: $text-box-search-bar-padding-block-end;
+
+  .dx-texteditor {
+    margin: 0;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/textBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/textBox/_sizes.scss
new file mode 100644
index 000000000000..518155882dfc
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/textBox/_sizes.scss
@@ -0,0 +1,17 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$text-box-search-icon-size: null !default;
+
+@if $size == "default" {
+  $text-box-search-icon-size: ds.$spacing-320 !default;
+}
+
+@else if $size == "compact" {
+  $text-box-search-icon-size: ds.$spacing-240 !default;
+}
+
+// Values hoisted from style-file literals (tokenized)
+$text-box-search-bar-padding-block-end: ds.$spacing-50 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_colors.scss
new file mode 100644
index 000000000000..b29eb15c1eee
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_colors.scss
@@ -0,0 +1,53 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$text-editor-content-rest: ds.$color-content-neutral-default-rest !default;
+
+$text-editor-placeholder-rest: ds.$color-content-neutral-subdued-rest !default;
+
+$text-editor-outlined-bg-rest: ds.$color-surface-neutral-default-rest !default;
+
+$text-editor-outlined-bg-hovered: $text-editor-outlined-bg-rest !default;
+
+$text-editor-outlined-bg-focused: $text-editor-outlined-bg-rest !default;
+
+$text-editor-filled-bg-rest: ds.$color-surface-neutral-deep-rest !default;
+
+$text-editor-underlined-bg-rest: transparent !default;
+
+$text-editor-underlined-bg-hovered: $text-editor-underlined-bg-rest !default;
+
+$text-editor-underlined-bg-focused: $text-editor-underlined-bg-rest !default;
+
+$text-editor-border-rest: ds.$color-border-neutral-default-rest !default;
+$text-editor-border-hovered: ds.$color-border-neutral-default-hovered !default;
+$text-editor-border-focused: ds.$color-border-neutral-default-active !default;
+
+$text-editor-line-rest: ds.$color-content-neutral-subdued-rest !default;
+$text-editor-line-hovered: ds.$color-content-neutral-subdued-hovered !default;
+$text-editor-line-focused: ds.$color-content-neutral-subdued-hovered !default;
+
+$text-editor-indicator-rest: ds.$color-content-primary-default-rest !default;
+
+$text-editor-clear-button-icon-rest: ds.$color-content-neutral-subdued-rest !default;
+$text-editor-invalid-border-focused: ds.$color-border-danger-default-hovered !default;
+$text-editor-invalid-border-rest: ds.$color-border-danger-compound-rest !default;
+$text-editor-border-disabled: ds.$color-border-neutral-default-disabled !default;
+$text-editor-content-disabled: ds.$color-content-neutral-default-disabled !default;
+
+$text-editor-filled-bg-hovered: $text-editor-filled-bg-rest !default;
+
+$text-editor-filled-bg-focused: $text-editor-filled-bg-rest !default;
+
+$text-editor-label-content-rest: $text-editor-placeholder-rest;
+$text-editor-label-content-focused: ds.$color-content-primary-default-rest;
+
+:root {
+  --dx-texteditor-color-text: #{$text-editor-content-rest};
+  --dx-texteditor-color-label: #{$text-editor-label-content-rest};
+}
+
+// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
+$text-editor-invalid-content-rest: ds.$color-border-danger-compound-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_index.scss
new file mode 100644
index 000000000000..1904046edd60
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_index.scss
@@ -0,0 +1,582 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../common/sizes" as *;
+@use "../button/sizes" as buttonSizes;
+@use "../common/mixins" as *;
+@use "../common/sizes" as *;
+@use "../../base/textEditor" with (
+  $texteditor-clear-button-area-width: $text-editor-clear-button-width,
+);
+@use "../../base/textEditor/mixins" as *;
+
+// adduse
+
+
+@mixin texteditor-outlined-styling() {
+  background-color: $text-editor-outlined-bg-rest;
+  border-radius: $text-editor-input-border-radius;
+  border-width: $text-editor-border-width;
+  border-style: solid;
+  border-color: $text-editor-border-rest;
+  border-bottom-color: $text-editor-line-rest;
+
+  &::before {
+    box-sizing: border-box;
+    content: "";
+    position: absolute;
+    left: $text-editor-line-inset-inline-start;
+    bottom: $text-editor-line-inset-block-end;
+    right: $text-editor-line-inset-inline-end;
+    height: $text-editor-input-border-radius;
+    width: calc(100% + 2 * $text-editor-border-width);
+    border-bottom-left-radius: $text-editor-input-border-radius;
+    border-bottom-right-radius: $text-editor-input-border-radius;
+    border-bottom-color: $text-editor-indicator-rest;
+    clip-path: inset(calc(100% - 2px) 0 0);
+    transform: scaleX(0);
+    transition-property: transform;
+    transition-duration: 50ms;
+    transition-timing-function: cubic-bezier(0.7, 0, 1, 0.5);
+  }
+
+  &.dx-texteditor-with-label,
+  &.dx-texteditor-with-floating-label {
+    .dx-texteditor-label {
+      width: calc(100% + 2 * $text-editor-border-width);
+      inset: $text-editor-label-inset;
+    }
+
+    .dx-datebox {
+      border: none;
+    }
+  }
+
+  &.dx-state-disabled,
+  &.dx-state-readonly {
+    background-color: transparent;
+    border-color: $text-editor-border-disabled;
+  }
+
+  &.dx-invalid {
+    border-color: $text-editor-invalid-border-rest;
+
+    &.dx-state-hover,
+    &.dx-state-focused {
+      border-color: $text-editor-invalid-border-focused;
+    }
+
+    &::before {
+      border-color: $text-editor-invalid-border-rest;
+    }
+  }
+
+  &.dx-state-hover {
+    background-color: $text-editor-outlined-bg-hovered;
+    border-left-color: $text-editor-border-hovered;
+    border-right-color: $text-editor-border-hovered;
+    border-top-color: $text-editor-border-hovered;
+    border-bottom-color: $text-editor-line-hovered;
+  }
+
+  &.dx-state-focused,
+  &.dx-state-active {
+    background-color: $text-editor-outlined-bg-focused;
+    border-left-color: $text-editor-border-focused;
+    border-right-color: $text-editor-border-focused;
+    border-top-color: $text-editor-border-focused;
+    border-bottom-color: $text-editor-line-focused;
+
+    &::before {
+      transform: scaleX(1);
+      transition-property: transform;
+      transition-duration: 200ms;
+      transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+    }
+  }
+}
+
+@mixin texteditor-filled-styling() {
+  background-color: $text-editor-filled-bg-rest;
+  border-radius: $text-editor-input-border-radius;
+  border-width: $text-editor-border-width;
+  border-style: solid;
+  border-color: transparent;
+
+  .dx-placeholder::before,
+  .dx-texteditor-input {
+    padding-top: $text-editor-input-filled-padding-block-start;
+    padding-bottom: $text-editor-input-filled-padding-block-end;
+  }
+
+  &::before {
+    left: $text-editor-line-inset-inline-start;
+    bottom: $text-editor-line-inset-block-end;
+    right: $text-editor-line-inset-inline-end;
+    height: $text-editor-input-border-radius;
+    width: calc(100% + 2 * $text-editor-border-width);
+    border-bottom-left-radius: $text-editor-input-border-radius;
+    border-bottom-right-radius: $text-editor-input-border-radius;
+    border-bottom-color: $text-editor-indicator-rest;
+    clip-path: inset(calc(100% - 2px) 0 0);
+  }
+
+  &.dx-state-hover {
+    background-color: $text-editor-filled-bg-hovered;
+  }
+
+  &.dx-state-focused,
+  &.dx-state-active {
+    background-color: $text-editor-filled-bg-focused;
+  }
+
+  &.dx-state-disabled,
+  &.dx-state-readonly {
+    background-color: transparent;
+    border-color: $text-editor-border-disabled;
+  }
+
+  &.dx-invalid {
+    border-color: $text-editor-invalid-border-rest;
+
+    &.dx-state-hover,
+    &.dx-state-focused {
+      border-color: $text-editor-invalid-border-focused;
+    }
+  }
+}
+
+@mixin texteditor-underlined-styling() {
+  background-color: $text-editor-underlined-bg-rest;
+  border-radius: 0;
+
+  &::after {
+    border-bottom-width: $text-editor-line-border-block-end-width-focused;
+    border-bottom-style: solid;
+    border-bottom-color: $text-editor-line-rest;
+  }
+
+  &.dx-state-hover {
+    background-color: $text-editor-underlined-bg-hovered;
+
+    &::after {
+      border-bottom-color: $text-editor-line-hovered;
+    }
+  }
+
+  &.dx-state-focused,
+  &.dx-state-active {
+    background-color: $text-editor-underlined-bg-focused;
+  }
+
+  .dx-texteditor-input,
+  .dx-lookup-field {
+    min-height: $text-editor-input-min-height;
+  }
+
+  .dx-texteditor-input,
+  .dx-placeholder::before {
+    padding-top: $text-editor-input-underlined-padding-block-start;
+    padding-bottom: $text-editor-input-underlined-padding-block-end;
+    padding-left: $text-editor-input-underlined-padding-inline;
+    padding-right: $text-editor-input-underlined-padding-inline;
+  }
+
+  &.dx-state-disabled,
+  &.dx-state-readonly {
+    &::after {
+      border-bottom-color: $text-editor-border-disabled;
+    }
+  }
+
+  &.dx-invalid {
+    &::after {
+      border-bottom-color: $text-editor-invalid-border-rest;
+    }
+
+    &.dx-state-hover {
+      &::after {
+        border-bottom-color: $text-editor-invalid-border-focused;
+      }
+    }
+  }
+}
+
+@mixin texteditor-input-padding-filled() {
+  .dx-texteditor-input {
+    padding-inline-end: calc(#{$text-editor-invalid-badge-size} + #{$text-editor-input-filled-padding-inline});
+  }
+}
+
+@mixin texteditor-validation-icon-offset() {
+  inset-inline-end: $invalid-badge-offset;
+}
+
+@mixin texteditor-validation-icon-offset-filled() {
+  inset-inline-end: $text-editor-button-filled-inset-inline-end;
+}
+
+@mixin validation-icon-position() {
+  &.dx-invalid,
+  &.dx-valid {
+    &.dx-editor-underlined {
+      .dx-texteditor-input {
+        padding-inline-end: calc(#{$text-editor-invalid-badge-size} + #{$text-editor-input-underlined-padding-inline});
+      }
+    }
+
+    &.dx-editor-filled,
+    &.dx-editor-outlined {
+      @include texteditor-input-padding-filled();
+
+      .dx-texteditor-input-container {
+        &::after {
+          @include texteditor-validation-icon-offset-filled();
+        }
+      }
+    }
+
+    .dx-texteditor-input-container {
+      &::after {
+        @include texteditor-validation-icon-offset();
+      }
+    }
+  }
+}
+
+@mixin pending-indicator-position() {
+  &.dx-validation-pending {
+    &.dx-editor-underlined {
+      .dx-texteditor-input {
+        padding-inline-end: calc(#{$text-editor-invalid-badge-size} + #{$text-editor-input-underlined-padding-inline});
+      }
+    }
+
+    &.dx-editor-filled,
+    &.dx-editor-outlined {
+      @include texteditor-input-padding-filled();
+
+      .dx-texteditor-input-container {
+        .dx-pending-indicator {
+          @include texteditor-validation-icon-offset-filled();
+        }
+      }
+    }
+
+    .dx-texteditor-input-container {
+      .dx-pending-indicator {
+        @include texteditor-validation-icon-offset();
+      }
+    }
+  }
+}
+
+.dx-texteditor {
+  border-radius: $text-editor-input-border-radius;
+  position: relative;
+
+  @mixin dx-texteditor-borders-position() {
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 0;
+    width: 100%;
+    content: '';
+    position: absolute;
+  }
+
+  &::before {
+    @include dx-texteditor-borders-position();
+
+    z-index: 2;
+    transform: scale(0);
+  }
+
+  &::after {
+    @include dx-texteditor-borders-position();
+  }
+
+  &.dx-state-focused {
+    .dx-texteditor-label {
+      color: $text-editor-label-content-focused;
+      font-size: $text-editor-label-font-size;
+    }
+
+    &.dx-invalid {
+      .dx-texteditor-label {
+        color: $text-editor-invalid-content-rest;
+      }
+    }
+  }
+
+  &.dx-texteditor-label-outside {
+    .dx-texteditor-label {
+      color: $text-editor-content-rest;
+    }
+
+    &.dx-invalid {
+      .dx-texteditor-label {
+        color: $text-editor-invalid-content-rest;
+      }
+    }
+  }
+
+  &.dx-state-focused,
+  &.dx-state-active {
+    &::before {
+      border-bottom-width: $text-editor-line-border-block-end-width-active;
+      border-bottom-style: solid;
+      border-bottom-color: $text-editor-indicator-rest;
+      transform: scale(1);
+      transition-property: transform;
+      transition-duration: 0.2s;
+      transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+    }
+  }
+
+  &.dx-state-disabled {
+    opacity: 1;
+    background-color: transparent;
+
+    .dx-texteditor-label,
+    .dx-placeholder::before,
+    .dx-texteditor-input,
+    .dx-lookup-field {
+      color: $text-editor-content-disabled;
+    }
+
+    .dx-lookup-arrow,
+    .dx-dropdowneditor-icon {
+      color: $text-editor-content-disabled;
+    }
+  }
+
+  &.dx-state-readonly {
+    .dx-lookup-arrow {
+      display: none;
+    }
+  }
+
+  .dx-texteditor-input {
+    min-height: calc(#{$text-editor-input-min-height} - 2px);
+  }
+
+  @include validation-icon-position();
+  @include pending-indicator-position();
+
+  &.dx-editor-filled,
+  &.dx-editor-outlined {
+    .dx-placeholder::before,
+    .dx-texteditor-input {
+      padding: $text-editor-input-filled-padding;
+    }
+  }
+
+  &.dx-editor-filled {
+    @include texteditor-filled-styling();
+  }
+
+  &.dx-editor-underlined {
+    @include texteditor-underlined-styling();
+  }
+
+  &.dx-editor-outlined {
+    @include texteditor-outlined-styling();
+  }
+}
+
+.dx-show-clear-button {
+  .dx-clear-button-area {
+    width: $text-editor-icon-container-size;
+    min-width: $text-editor-icon-container-size;
+    right: 0;
+    display: flex;
+    align-items: center;
+  }
+
+  &.dx-texteditor-empty {
+    .dx-clear-button-area {
+      display: none;
+    }
+  }
+
+  .dx-icon-clear {
+    &::before {
+      content: '\f15f';
+    }
+
+    color: $text-editor-clear-button-icon-rest;
+  }
+
+  &.dx-state-disabled {
+    .dx-icon-clear {
+      color: $text-editor-content-disabled;
+    }
+  }
+
+  &:not(.dx-texteditor-empty) {
+    @include validation-icon-position();
+    @include pending-indicator-position();
+  }
+}
+
+/* B231111 */
+.dx-placeholder {
+  color: $text-editor-placeholder-rest;
+  font-size: $text-editor-font-size;
+  line-height: normal;
+}
+
+.dx-texteditor-input {
+  margin: 0;
+  background-color: transparent;
+  color: $text-editor-content-rest;
+  font-size: $text-editor-font-size;
+  line-height: $text-editor-line-height;
+}
+
+.dx-invalid.dx-texteditor {
+  &.dx-state-hover {
+    &::after {
+      border-bottom-color: $text-editor-invalid-border-rest;
+    }
+  }
+
+  &.dx-state-focused,
+  &.dx-state-active {
+    &::before {
+      border-bottom: $text-editor-line-border-block-end-active;
+      border-bottom-color: $text-editor-invalid-border-focused;
+    }
+  }
+
+  &.dx-show-invalid-badge .dx-texteditor-input-container {
+    &::after {
+      @include dx-invalid-fluent-badge();
+    }
+  }
+}
+
+.dx-texteditor-label {
+  position: absolute;
+  font-size: $text-editor-label-font-size;
+  color: $text-editor-label-content-rest;
+  white-space: nowrap;
+  user-select: none;
+  pointer-events: none;
+  cursor: text;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  top: 0;
+  left: 0;
+
+  .dx-label {
+    display: flex;
+
+    span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: auto;
+      max-width: 100%;
+      display: block;
+      margin-bottom: $text-editor-label-margin-block-end;
+    }
+  }
+
+  .dx-invalid & {
+    color: $text-editor-invalid-content-rest;
+  }
+}
+
+@include dx-editor-outlined(
+  $text-editor-input-border-radius,
+  $text-editor-label-font-size,
+  $global-border-width,
+  $global-border-width,
+  solid,
+  $text-editor-label-height,
+  $text-editor-label-height,
+  calc((1px + #{$text-editor-font-size}) / 2),
+  $text-editor-label-outside-offset,
+  0.5px,
+  $text-editor-input-filled-padding-inline,
+  $text-editor-input-filled-padding-inline,
+  $text-editor-outlined-bg-rest,
+  1px solid transparent,
+  $text-editor-border-rest,
+  $text-editor-line-rest,
+  $text-editor-border-disabled,
+  $text-editor-border-disabled,
+  $text-editor-border-hovered,
+  $text-editor-line-hovered,
+  $text-editor-border-focused,
+  $text-editor-line-focused,
+  $text-editor-invalid-border-rest,
+  $text-editor-invalid-border-focused,
+  $text-editor-label-transition,
+  $text-editor-font-size,
+  $text-editor-input-filled-padding-block-start,
+  1px,
+  $text-editor-font-size,
+  $text-editor-label-outside-height,
+);
+@include dx-editor-filled(
+  $text-editor-label-transition,
+  $text-editor-label-font-size,
+  $text-editor-label-font-size,
+  $text-editor-label-font-size,
+  $text-editor-label-offset,
+  $text-editor-label-outside-offset,
+  $text-editor-font-size,
+  $text-editor-font-size,
+  $text-editor-font-size,
+  $text-editor-input-filled-padding-inline,
+  $text-editor-input-filled-with-label-padding-block-start,
+  $text-editor-input-filled-with-label-padding-block-end,
+  $text-editor-font-size,
+  $text-editor-label-outside-height,
+);
+@include dx-editor-underlined(
+  $text-editor-label-transition,
+  $text-editor-label-font-size,
+  $text-editor-label-font-size,
+  $text-editor-label-font-size,
+  $text-editor-label-offset,
+  $text-editor-label-outside-offset,
+  $text-editor-font-size,
+  $text-editor-font-size,
+  $text-editor-font-size,
+  $text-editor-input-underlined-with-label-padding-block-start,
+  $text-editor-input-underlined-with-label-padding-block-end,
+  $text-editor-font-size,
+  $text-editor-label-outside-height,
+);
+
+.dx-valid.dx-texteditor {
+  .dx-texteditor-input-container {
+    &::after {
+      @include dx-valid-fluent-badge();
+    }
+  }
+}
+
+.dx-validation-pending.dx-texteditor {
+  .dx-texteditor-input-container {
+    .dx-pending-indicator {
+      @include dx-pending-indicator-fluent();
+    }
+  }
+}
+
+@include dx-editor-buttons-container-material(
+  $text-editor-button-underlined-height,
+  $text-editor-custom-button-margin,
+  $text-editor-custom-button-margin,
+  0,
+  $text-editor-spin-button-padding-inline,
+  buttonSizes.$button-padding-block,
+);
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_sizes.scss
new file mode 100644
index 000000000000..63dd3f7c8989
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_sizes.scss
@@ -0,0 +1,110 @@
+@use "sass:math";
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+@use "../common/sizes" as *;
+
+// adduse
+
+// Moved out of _index.scss: variables belong in _sizes/_colors (NAMING.md O7)
+$text-editor-invalid-badge-size: calc(#{$invalid-badge-size} + 2 * #{$invalid-badge-padding-inline});
+
+// Geometry and motion, so they live here rather than in _colors.scss (NAMING.md O7)
+$text-editor-input-border-radius: $global-border-radius !default;
+$text-editor-label-transition:
+  font-size 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms,
+  transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms,
+  top 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms;
+
+// Moved here from the theme root: this component owns it (NAMING.md O1)
+$text-editor-label-height: null !default;
+
+@if $size == "default" {
+  $text-editor-label-height: ds.$spacing-200 !default;
+}
+
+@else if $size == "compact" {
+  $text-editor-label-height: ds.$spacing-160 !default;
+}
+$text-editor-input-underlined-padding-inline: 0 !default;
+
+$text-editor-line-height: null !default;
+$text-editor-font-size: null !default;
+$text-editor-input-min-height: null !default;
+$text-editor-label-offset: null !default;
+$text-editor-label-outside-offset: null !default;
+$text-editor-input-filled-padding-inline: null !default;
+$text-editor-input-filled-padding-block-start: null !default;
+$text-editor-input-filled-padding-block-end: null !default;
+$text-editor-input-underlined-padding-block-start: null !default;
+$text-editor-button-underlined-height: null !default;
+$text-editor-label-font-size: null !default;
+$text-editor-label-outside-height: null !default;
+$text-editor-input-underlined-padding-block-end: null !default;
+$text-editor-input-underlined-with-label-padding-block-start: null !default;
+$text-editor-input-underlined-with-label-padding-block-end: null !default;
+$text-editor-input-filled-with-label-padding-block-start: null !default;
+$text-editor-input-filled-with-label-padding-block-end: null !default;
+$text-editor-icon-container-size: $global-icon-size !default;
+
+@if $size == "default" {
+  $text-editor-line-height: 1.428571 !default; // dx-relative: unitless ratio, no line-height-ratio scale in package
+  $text-editor-font-size: ds.$font-size-base-md !default;
+  $text-editor-input-min-height: ds.$spacing-320 !default;
+  $text-editor-label-outside-height: ds.$spacing-200 !default;
+  $text-editor-label-outside-offset: ds.$spacing-240 !default;
+  $text-editor-label-font-size: ds.$font-size-caption-md !default;
+  $text-editor-label-offset: ds.$spacing-minus-10 !default;
+  $text-editor-input-filled-padding-inline: ds.$spacing-120 !default;
+  $text-editor-input-filled-padding-block-start: ds.$spacing-50 !default;
+  $text-editor-input-filled-with-label-padding-block-start: ds.$spacing-80 !default;
+  $text-editor-input-filled-padding-block-end: ds.$spacing-50 !default;
+  $text-editor-input-filled-with-label-padding-block-end: ds.$spacing-20 !default;
+  $text-editor-input-underlined-padding-block-start: ds.$spacing-50 !default;
+  $text-editor-input-underlined-padding-block-end: ds.$spacing-50 !default;
+  $text-editor-input-underlined-with-label-padding-block-start: ds.$spacing-90 !default;
+  $text-editor-input-underlined-with-label-padding-block-end: ds.$spacing-30 !default;
+  $text-editor-button-underlined-height: ds.$spacing-220 !default;
+}
+
+@else if $size == "compact" {
+  $text-editor-line-height: 1.3333 !default; // dx-relative
+  $text-editor-font-size: ds.$font-size-base-sm !default;
+  $text-editor-input-min-height: ds.$spacing-240 !default;
+  $text-editor-label-outside-height: ds.$spacing-160 !default;
+  $text-editor-label-outside-offset: ds.$spacing-180 !default;
+  $text-editor-label-font-size: ds.$font-size-caption-sm !default;
+  $text-editor-label-offset: ds.$spacing-minus-10 !default;
+  $text-editor-input-filled-padding-inline: ds.$spacing-80 !default;
+  $text-editor-input-filled-padding-block-start: ds.$spacing-30 !default;
+  $text-editor-input-filled-with-label-padding-block-start: ds.$spacing-60 !default;
+  $text-editor-input-filled-padding-block-end: ds.$spacing-30 !default;
+  $text-editor-input-filled-with-label-padding-block-end: 0 !default;
+  $text-editor-input-underlined-padding-block-start: ds.$spacing-30 !default;
+  $text-editor-input-underlined-padding-block-end: ds.$spacing-30 !default;
+  $text-editor-input-underlined-with-label-padding-block-start: ds.$spacing-60 !default;
+  $text-editor-input-underlined-with-label-padding-block-end: ds.$spacing-20 !default;
+  $text-editor-button-underlined-height: ds.$spacing-220 !default;
+}
+
+$text-editor-input-filled-padding:
+  $text-editor-input-filled-padding-block-start
+  $text-editor-input-filled-padding-inline
+  $text-editor-input-filled-padding-block-end !default;
+
+$text-editor-button-filled-inset-inline-end: calc(#{$text-editor-input-filled-padding-inline} - #{ds.$spacing-40}) !default;
+$text-editor-spin-button-padding-inline: calc((#{$text-editor-input-filled-padding-inline}) / 2) !default;
+
+// Values hoisted from style-file literals (tokenized)
+$text-editor-border-width: ds.$border-width-10 !default;
+$text-editor-line-inset-inline-start: -1px !default; // dx-offscale: -1px
+$text-editor-line-inset-block-end: -1px !default; // dx-offscale: -1px
+$text-editor-line-inset-inline-end: -1px !default; // dx-offscale: -1px
+$text-editor-label-inset: -1px !default; // dx-offscale: -1px
+$text-editor-label-margin-block-end: -1px !default; // dx-offscale: -1px
+$text-editor-line-border-block-end-active: ds.$border-width-20 solid !default;
+$text-editor-custom-button-margin: ds.$spacing-60 !default;
+$text-editor-line-border-block-end-width-focused: ds.$border-width-10 !default;
+$text-editor-line-border-block-end-width-active: ds.$border-width-20 !default;
+
+// Base-layer sizing injected with design tokens (wave B2)
+$text-editor-clear-button-width: ds.$spacing-340 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tileView/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tileView/_colors.scss
new file mode 100644
index 000000000000..2bd6dc89c07a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tileView/_colors.scss
@@ -0,0 +1,11 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$tile-view-content-rest: ds.$color-content-neutral-default-rest !default;
+$tile-view-bg-rest: ds.$color-surface-neutral-default-rest !default;
+$tile-view-border-rest: ds.$color-border-neutral-subdued-rest !default;
+$tile-view-bg-hovered: ds.$color-surface-neutral-default-rest !default;
+$tile-view-border-hovered: ds.$color-border-primary-default-rest !default;
+$tile-view-bg-active: ds.$color-surface-neutral-alpha-active !default;
+$tile-view-content-active: $tile-view-content-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tileView/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tileView/_index.scss
new file mode 100644
index 000000000000..591ee5d1ad0f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tileView/_index.scss
@@ -0,0 +1,30 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/tileView" with (
+  $tileview-wrapper-height: $tile-view-wrapper-height,
+);
+
+// adduse
+
+
+.dx-tile {
+  color: $tile-view-content-rest;
+  background-color: $tile-view-bg-rest;
+  border: $tile-view-tile-border;
+  border-color: $tile-view-border-rest;
+  text-align: left;
+
+  &.dx-state-focused,
+  &.dx-state-hover {
+    background-color: $tile-view-bg-hovered;
+    border-color: $tile-view-border-hovered;
+  }
+
+  &.dx-state-active {
+    background-color: $tile-view-bg-active;
+    color: $tile-view-content-active;
+    border-color: transparent;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tileView/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tileView/_sizes.scss
new file mode 100644
index 000000000000..8919e8de0faa
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tileView/_sizes.scss
@@ -0,0 +1,11 @@
+@use "../../../_design-system/variables/ds" as ds;
+@use "../sizes" as *;
+
+// adduse
+
+
+// Values hoisted from style-file literals (tokenized)
+$tile-view-tile-border: ds.$border-width-10 solid !default;
+
+// Base-layer sizing injected with design tokens (wave B2)
+$tile-view-wrapper-height: ds.$spacing-10 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/timeView/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/timeView/_colors.scss
new file mode 100644
index 000000000000..d945751ac42a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/timeView/_colors.scss
@@ -0,0 +1,25 @@
+@use "../colors" as *;
+
+// adduse
+
+/*
+ * The clock face and arrows are SVG data-uri images: colors are baked into the
+ * background-image at build time (string replace). CSS var() tokens do NOT resolve inside a
+ * data-uri (they render black), so the values below are the static per-mode equivalents of
+ * the ds.$ tokens named in the markers. See DIVERGENCES.md.
+ */
+$time-view-clock-digits-content-rest: null !default;
+$time-view-clock-accent-bg-rest: null !default;
+$time-view-clock-bg-rest: null !default;
+
+@if $mode == "light" {
+  $time-view-clock-digits-content-rest: #161616 !default; // dx-data-uri-static: ds.$color-content-neutral-default-rest
+  $time-view-clock-accent-bg-rest: #242424 !default; // dx-data-uri-static: ds.$color-surface-neutral-default-inverted-rest
+  $time-view-clock-bg-rest: #fafafa !default; // dx-data-uri-static: ds.$color-surface-neutral-subdued-rest
+}
+
+@if $mode == "dark" {
+  $time-view-clock-digits-content-rest: #fff !default; // dx-data-uri-static: ds.$color-content-neutral-default-rest
+  $time-view-clock-accent-bg-rest: #fff !default; // dx-data-uri-static: ds.$color-surface-neutral-default-inverted-rest
+  $time-view-clock-bg-rest: #1d1d1d !default; // dx-data-uri-static: ds.$color-surface-neutral-subdued-rest
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/timeView/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/timeView/_index.scss
new file mode 100644
index 000000000000..d7b6c8136104
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/timeView/_index.scss
@@ -0,0 +1,57 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/timeView/mixins" as *;
+@use "../../base/timeView" with (
+  $timeview-numberbox-width: $time-view-field-number-box-width,
+  $timeview-numberbox-spin-touch-friendly-width-2: $time-view-field-number-box-spin-touch-friendly-width,
+);
+
+// adduse
+
+@include clock-action-icons-mixin($time-view-clock-accent-bg-rest, $time-view-clock-bg-rest, $time-view-clock-digits-content-rest);
+
+.dx-timeview {
+  height: auto;
+  width: auto;
+
+  .dx-texteditor {
+    .dx-texteditor-input {
+      padding-inline-end: 0;
+      padding-inline-start: $time-view-input-padding-inline-start;
+    }
+
+    .dx-texteditor-container {
+      .dx-texteditor-buttons-container .dx-dropdowneditor-button {
+        margin-inline-end: 0;
+      }
+    }
+  }
+}
+
+.dx-timeview-clock {
+  margin-bottom: $time-view-clock-margin-block-end;
+}
+
+.dx-timeview-format12 {
+  width: $time-view-format12-width;
+  margin-inline-start: $time-view-time-separator-margin;
+}
+
+.dx-timeview-time-separator {
+  margin: 0 $time-view-time-separator-margin;
+}
+
+.dx-timeview-field {
+  min-height: $time-view-field-min-height;
+}
+
+.dx-timeview-field .dx-numberbox {
+  width: $time-view-format12-width;
+
+  &.dx-numberbox-spin-touch-friendly {
+    width: $time-view-number-box-spin-touch-friendly-width;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/timeView/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/timeView/_sizes.scss
new file mode 100644
index 000000000000..5538e4c6d648
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/timeView/_sizes.scss
@@ -0,0 +1,17 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$time-view-field-min-height: 35px !default; // dx-offscale: 35px
+$time-view-time-separator-margin: ds.$spacing-50 !default;
+$time-view-format12-width: ds.$spacing-640 !default;
+
+// Values hoisted from style-file literals (tokenized)
+$time-view-input-padding-inline-start: ds.$spacing-120 !default;
+$time-view-clock-margin-block-end: ds.$spacing-100 !default;
+$time-view-number-box-spin-touch-friendly-width: 110px !default; // dx-offscale: 110px
+
+// Base-layer sizing injected with design tokens (wave B2)
+$time-view-field-number-box-width: 70px !default; // dx-offscale: 70px
+$time-view-field-number-box-spin-touch-friendly-width: 110px !default; // dx-offscale: 110px
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/toast/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/toast/_colors.scss
new file mode 100644
index 000000000000..d457c031d86c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/toast/_colors.scss
@@ -0,0 +1,21 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$toast-bg-rest: ds.$color-surface-neutral-default-rest !default;
+
+$toast-info-bg-rest: $toast-bg-rest !default;
+
+$toast-info-content-rest: ds.$color-content-neutral-default-rest !default;
+
+$toast-warning-bg-rest: ds.$color-surface-warning-default-rest !default;
+
+$toast-warning-content-rest: ds.$color-content-neutral-default-static-light-rest !default;
+
+$toast-error-bg-rest: ds.$color-surface-danger-default-rest !default;
+
+$toast-error-content-rest: ds.$color-content-neutral-default-static-dark-rest !default;
+
+$toast-success-bg-rest: ds.$color-surface-success-default-rest !default;
+
+$toast-success-content-rest: ds.$color-content-neutral-default-static-dark-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/toast/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/toast/_index.scss
new file mode 100644
index 000000000000..0598b50c0251
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/toast/_index.scss
@@ -0,0 +1,59 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/toast" with (
+  $toast-content-padding: $toast-content-padding,
+  $toast-icon-width: $toast-icon-width,
+  $toast-icon-height: $toast-icon-height,
+  $toast-icon-margin-right: $toast-icon-margin-inline-end,
+  $toast-icon-margin-left: $toast-icon-rtl-margin-inline-end,
+  $toast-stack-gap: $toast-stack-gap,
+);
+
+// adduse
+@use "../overlay";
+
+
+.dx-toast-stack {
+  gap: $toast-item-gap;
+}
+
+.dx-toast-content {
+  font-size: $global-font-size;
+  font-weight: $toast-content-font-weight;
+  padding: $toast-content-padding-block $toast-content-padding-inline;
+  border-radius: $toast-border-radius;
+  box-shadow: $toast-box-shadow;
+  min-height: $toast-height;
+  display: flex;
+  align-items: center;
+}
+
+.dx-toast-icon {
+  display: none;
+}
+
+.dx-toast-message {
+  padding: 0;
+}
+
+.dx-toast-info {
+  background-color: $toast-info-bg-rest;
+  color: $toast-info-content-rest;
+}
+
+.dx-toast-warning {
+  background-color: $toast-warning-bg-rest;
+  color: $toast-warning-content-rest;
+}
+
+.dx-toast-error {
+  background-color: $toast-error-bg-rest;
+  color: $toast-error-content-rest;
+}
+
+.dx-toast-success {
+  background-color: $toast-success-bg-rest;
+  color: $toast-success-content-rest;
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/toast/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/toast/_sizes.scss
new file mode 100644
index 000000000000..03a0d33f0b74
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/toast/_sizes.scss
@@ -0,0 +1,39 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$toast-border-radius: $global-border-radius !default;
+$toast-height: null !default;
+$toast-item-gap: null !default;
+$toast-content-padding-block: null !default;
+$toast-content-padding-inline: ds.$spacing-120 !default;
+
+@if $size == "default" {
+  $toast-content-padding-block: ds.$spacing-120 !default;
+  $toast-height: ds.$spacing-440 !default;
+  $toast-item-gap: ds.$spacing-120 !default;
+}
+
+@else if $size == "compact" {
+  $toast-content-padding-block: ds.$spacing-80 !default;
+  $toast-height: ds.$spacing-360 !default;
+  $toast-item-gap: ds.$spacing-80 !default;
+}
+
+// Values hoisted from style-file literals (tokenized)
+$toast-content-font-weight: ds.$font-weight-base-default !default;
+
+// Base-layer sizing injected with design tokens (wave B2)
+$toast-content-padding: ds.$spacing-100 !default;
+$toast-icon-width: 35px !default; // dx-offscale: 35px
+$toast-icon-height: 35px !default; // dx-offscale: 35px
+$toast-icon-margin-inline-end: ds.$spacing-100 !default;
+$toast-icon-rtl-margin-inline-end: ds.$spacing-100 !default;
+$toast-stack-gap: ds.$spacing-30 !default;
+
+/*
+ * Composite box-shadow (geometry + a colour reference), so it belongs here rather than in
+ * _colors.scss — see NAMING.md, PARTS: only pure shadow *colours* are a colour part.
+ */
+$toast-box-shadow: ds.$box-shadow-lg !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/toolbar/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/toolbar/_colors.scss
new file mode 100644
index 000000000000..0f4cae76bac4
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/toolbar/_colors.scss
@@ -0,0 +1,7 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$toolbar-bg-rest: transparent !default;
+$toolbar-content-rest: ds.$color-content-neutral-default-rest !default;
+$toolbar-separator-border-rest: ds.$color-border-neutral-subdued-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/toolbar/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/toolbar/_index.scss
new file mode 100644
index 000000000000..79bed50bd967
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/toolbar/_index.scss
@@ -0,0 +1,184 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../list/sizes" as listSizes;
+@use "../button/mixins" as *;
+@use "../button/colors" as buttonColors;
+@use "mixins" as *;
+@use "../button/sizes" as buttonSizes;
+@use "../../base/toolbar" with (
+  $toolbar-item-padding: $toolbar-item-padding,
+  $toolbar-group-margin: $toolbar-group-margin,
+  $toolbar-texteditor-width: $toolbar-text-editor-width,
+);
+
+// adduse
+@use "../dropDownMenu";
+
+.dx-toolbar {
+  background-color: $toolbar-bg-rest;
+  color: $toolbar-content-rest;
+
+  @include dx-toolbar-sizing(
+    $toolbar-height,
+    $toolbar-padding,
+    $toolbar-label-font-size,
+    $toolbar-item-spacing
+  );
+
+  &.dx-toolbar-multiline {
+    .dx-toolbar-item {
+      height: $toolbar-height;
+    }
+  }
+}
+
+.dx-toolbar-after {
+  .dx-toolbar-item {
+    @include dx-toolbar-item-padding($toolbar-item-spacing);
+  }
+}
+
+.dx-toolbar-background {
+  background-color: $toolbar-bg-rest;
+}
+
+.dx-toolbar-menu-section {
+  border-bottom: $toolbar-menu-section-border-block-end;
+  border-bottom-color: $toolbar-separator-border-rest;
+
+  .dx-list-item-content,
+  .dx-toolbar-item-auto-hide {
+    padding: listSizes.$list-item-padding-block listSizes.$list-item-padding-inline calc(#{listSizes.$list-item-padding-block} - 1px);
+  }
+
+  .dx-list-item-content {
+    font-size: $global-font-size;
+    vertical-align: middle;
+
+    .dx-list-item-icon-container {
+      height: buttonSizes.$button-icon-size;
+      width: buttonSizes.$button-icon-size;
+
+      @include dx-icon-margin(calc(#{buttonSizes.$button-icon-size} / 2));
+
+      .dx-icon {
+        font-size: buttonSizes.$button-icon-size;
+
+        @include dx-icon-sizing(buttonSizes.$button-icon-size);
+      }
+    }
+  }
+
+  .dx-toolbar-hidden-button,
+  .dx-toolbar-hidden-button-group {
+    .dx-toolbar-item-auto-hide {
+      padding: 0;
+    }
+
+    .dx-button {
+      border: none;
+      border-radius: 0;
+      height: listSizes.$list-item-height;
+      padding: 0;
+    }
+
+    .dx-button-text {
+      text-transform: none;
+      font-weight: $toolbar-button-text-font-weight;
+    }
+
+    .dx-button-content {
+      padding: 0 listSizes.$list-item-padding-inline;
+    }
+  }
+
+  .dx-toolbar-hidden-button {
+    .dx-button-normal {
+      @include dx-button-flat-color-styling(
+        buttonColors.$button-normal-contained-content-rest,
+        buttonColors.$button-normal-contained-content-rest,
+        buttonColors.$button-normal-contained-content-rest,
+        buttonColors.$button-normal-text-bg-rest,
+        buttonColors.$button-normal-text-bg-hovered,
+        buttonColors.$button-normal-text-bg-focused,
+        buttonColors.$button-normal-text-bg-active
+      );
+    }
+
+    .dx-button-default {
+      @include dx-button-flat-color-styling(
+        buttonColors.$button-default-text-content-rest,
+        buttonColors.$button-default-text-content-hovered,
+        buttonColors.$button-default-text-content-active,
+        buttonColors.$button-default-text-bg-rest,
+        buttonColors.$button-default-text-bg-hovered,
+        buttonColors.$button-default-text-bg-focused,
+        buttonColors.$button-default-text-bg-active
+      );
+    }
+
+    .dx-button-danger {
+      @include dx-button-flat-color-styling(
+        buttonColors.$button-danger-contained-bg-rest,
+        buttonColors.$button-danger-contained-bg-rest,
+        buttonColors.$button-danger-contained-bg-rest,
+        buttonColors.$button-danger-text-bg-rest,
+        buttonColors.$button-danger-text-bg-hovered,
+        buttonColors.$button-danger-text-bg-focused,
+        buttonColors.$button-danger-text-bg-active
+      );
+    }
+
+    .dx-button-success {
+      @include dx-button-flat-color-styling(
+        buttonColors.$button-success-contained-bg-rest,
+        buttonColors.$button-success-contained-bg-rest,
+        buttonColors.$button-success-contained-bg-rest,
+        buttonColors.$button-success-text-bg-rest,
+        buttonColors.$button-success-text-bg-hovered,
+        buttonColors.$button-success-text-bg-focused,
+        buttonColors.$button-success-text-bg-active
+      );
+    }
+
+    .dx-button {
+      &.dx-button-has-icon:not(.dx-button-has-text) {
+        border-radius: 0;
+      }
+    }
+  }
+
+  .dx-toolbar-hidden-button-group {
+    margin-top: $toolbar-padding;
+    margin-bottom: $toolbar-padding;
+
+    &:first-of-type {
+      margin-top: listSizes.$list-padding-block;
+    }
+
+    &:last-of-type {
+      margin-bottom: listSizes.$list-padding-block;
+    }
+  }
+}
+
+.dx-toolbar-menu-section:empty {
+  border-bottom: none;
+}
+
+.dx-toolbar-button {
+  &.dx-toolbar-text-auto-hide {
+    .dx-button {
+      @include dx-button-onlyicon-sizing();
+    }
+  }
+
+  .dx-switch {
+    display: block;
+    line-height: 0;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/toolbar/_mixins.scss b/packages/devextreme-scss/scss/widgets/fluent-next/toolbar/_mixins.scss
new file mode 100644
index 000000000000..acb6f7c8c142
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/toolbar/_mixins.scss
@@ -0,0 +1,60 @@
+@use "sizes" as *;
+
+@mixin dx-toolbar-sizing($height, $padding, $label-font-size, $item-spacing) {
+  padding: $padding;
+  overflow: visible;
+
+  .dx-toolbar-before {
+    padding-inline-end: $toolbar-section-padding;
+  }
+
+  .dx-toolbar-after {
+    padding-inline-start: $toolbar-section-padding;
+  }
+
+  .dx-toolbar-before:empty,
+  .dx-toolbar-after:empty {
+    padding: 0;
+  }
+
+  .dx-toolbar-items-container {
+    height: $height;
+    overflow: visible;
+  }
+
+  .dx-toolbar-menu-container {
+    padding: 0;
+    padding-inline-start: $item-spacing;
+  }
+
+  .dx-toolbar-item {
+    padding: 0;
+    padding-inline-end: $item-spacing;
+
+    &.dx-toolbar-first-in-group {
+      padding-left: calc(#{$toolbar-item-spacing} * 4);
+    }
+
+    &:last-child {
+      padding: 0;
+    }
+  }
+
+  .dx-toolbar-label {
+    font-size: $label-font-size;
+    font-weight: $toolbar-label-font-weight;
+  }
+}
+
+@mixin dx-toolbar-item-padding($padding) {
+  padding: 0;
+  padding-inline-start: $padding;
+
+  &:last-child {
+    padding-inline-start: $padding;
+  }
+
+  &:first-child {
+    padding: 0;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/toolbar/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/toolbar/_sizes.scss
new file mode 100644
index 000000000000..d1fe70c471d9
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/toolbar/_sizes.scss
@@ -0,0 +1,36 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+@use "../typography/sizes" as typographySizes;
+
+// adduse
+
+$toolbar-height: null !default;
+
+$toolbar-padding: 0 !default;
+$toolbar-item-spacing: ds.$spacing-40 !default;
+$toolbar-label-font-size: typographySizes.$typography-m-font-size !default;
+$toolbar-section-padding: null !default;
+
+@if $size == "default" {
+  $toolbar-height: ds.$spacing-480 !default;
+  $toolbar-section-padding: ds.$spacing-120 !default;
+}
+
+@else if $size == "compact" {
+  $toolbar-height: ds.$spacing-360 !default;
+  $toolbar-section-padding: ds.$spacing-80 !default;
+}
+
+:root {
+  --dx-toolbar-height: #{$toolbar-height};
+}
+
+// Values hoisted from style-file literals (tokenized)
+$toolbar-button-text-font-weight: ds.$font-weight-base-default !default;
+$toolbar-label-font-weight: ds.$font-weight-500 !default; // dx-no-semantic-role: 500 is off the weight-role scale (400/600/700)
+$toolbar-menu-section-border-block-end: ds.$border-width-10 solid !default;
+
+// Base-layer sizing injected with design tokens (wave B2)
+$toolbar-item-padding: 0 ds.$spacing-50 !default;
+$toolbar-group-margin: 0 ds.$spacing-100 !default;
+$toolbar-text-editor-width: 150px !default; // dx-offscale: 150px
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tooltip/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tooltip/_colors.scss
new file mode 100644
index 000000000000..b8885ae7735e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tooltip/_colors.scss
@@ -0,0 +1,9 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$tooltip-content-rest: ds.$color-content-neutral-default-rest !default;
+
+$tooltip-bg-rest: ds.$color-surface-neutral-default-rest !default;
+
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tooltip/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tooltip/_index.scss
new file mode 100644
index 000000000000..7a096b283687
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tooltip/_index.scss
@@ -0,0 +1,43 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/tooltip" with (
+  $tooltip-overlay-content-min-width: $tooltip-overlay-content-min-width,
+  $tooltip-overlay-content-min-height: $tooltip-overlay-content-min-height,
+  $tooltip-popup-content-padding: $tooltip-popup-content-padding,
+);
+
+// adduse
+
+
+.dx-tooltip-wrapper {
+  .dx-overlay-content {
+    background-color: $tooltip-bg-rest;
+    color: $tooltip-content-rest;
+    border: $tooltip-overlay-content-border;
+    border-radius: $tooltip-border-radius;
+    min-height: auto;
+
+    .dx-popup-content {
+      padding: $tooltip-padding;
+      font-size: $tooltip-font-size;
+    }
+  }
+
+  &.dx-popover-wrapper .dx-popover-arrow {
+    &::after {
+      box-shadow: $tooltip-box-shadow;
+      background: $tooltip-bg-rest;
+      border-top-right-radius: $tooltip-arrow-border-radius;
+    }
+  }
+
+  &.dx-popover-wrapper.dx-position-top {
+    .dx-popover-arrow {
+      &::after {
+        border-bottom-left-radius: $tooltip-arrow-border-radius;
+      }
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tooltip/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tooltip/_sizes.scss
new file mode 100644
index 000000000000..8c41b78e45bf
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tooltip/_sizes.scss
@@ -0,0 +1,31 @@
+@use "../common/colors" as *;
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+// Not a colour: a radius that used to sit in _colors.scss (NAMING.md, O7)
+$tooltip-border-radius: $global-border-radius !default;
+
+$tooltip-padding: null !default;
+$tooltip-font-size: null !default;
+$tooltip-arrow-border-radius: ds.$border-radius-20 !default;
+$tooltip-box-shadow: 0 0 ds.$spacing-20 0 $global-dropdown-shadow-ambient !default;
+
+@if $size == "default" {
+  $tooltip-padding: ds.$spacing-70 ds.$spacing-110 !default;
+  $tooltip-font-size: ds.$font-size-caption-md;
+}
+
+@else if $size == "compact" {
+  $tooltip-padding: ds.$spacing-30 ds.$spacing-50 !default;
+  $tooltip-font-size: ds.$font-size-caption-md;
+}
+
+// Values hoisted from style-file literals (tokenized)
+$tooltip-overlay-content-border: ds.$border-width-10 solid transparent !default;
+
+// Base-layer sizing injected with design tokens (wave B2)
+$tooltip-overlay-content-min-width: ds.$spacing-340 !default;
+$tooltip-overlay-content-min-height: ds.$spacing-260 !default;
+$tooltip-popup-content-padding: ds.$spacing-120 ds.$spacing-170 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/treeList/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/treeList/_colors.scss
new file mode 100644
index 000000000000..a8d91f9d266b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/treeList/_colors.scss
@@ -0,0 +1,6 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$tree-list-chevron-icon-rest: ds.$color-content-neutral-subdued-rest !default;
+$tree-list-chevron-icon-selected: $tree-list-chevron-icon-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/treeList/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/treeList/_index.scss
new file mode 100644
index 000000000000..1348497177d0
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/treeList/_index.scss
@@ -0,0 +1,69 @@
+@use "../colors" as *;
+@use "../../../_design-system/variables/ds" as ds;
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/mixins" as *;
+@use "../../base/icon_fonts" as *;
+@use "../gridBase" as *;
+@use "../gridBase/colors" as gridBaseColors;
+@use "../gridBase/sizes" as gridBaseSizes;
+@use "../../base/treeList" as baseTreeList with (
+  $treelist-expandable-node-line-height: $tree-list-empty-space-height,
+  $treelist-sticky-column-border: $tree-list-sticky-column-border,
+  $treelist-cell-focus-outline: $tree-list-cell-outline-focused,
+  $treelist-header-filter-outline: $tree-list-outline-focused,
+  $treelist-header-filter-outline-offset: $tree-list-outline-offset-focused,
+  $treelist-button-margin-left: $tree-list-form-buttons-margin-inline-start,
+  $treelist-button-margin-top: $tree-list-form-buttons-margin-block-start,
+  $treelist-error-message-margin-bottom: $tree-list-error-message-margin-block-end,
+  $treelist-button-margin-right: $tree-list-form-buttons-rtl-margin-inline-start,
+  $datagrid-border: gridBaseSizes.$grid-border,
+  $datagrid-drag-header-border-color: gridBaseColors.$grid-drag-header-border-rest,
+  $datagrid-row-error-bg: gridBaseColors.$grid-row-error-bg-rest,
+  $datagrid-base-color: gridBaseColors.$grid-content-rest,
+  $datagrid-base-background-color: gridBaseColors.$grid-bg-rest,
+  $datagrid-border-color: gridBaseColors.$grid-border-rest,
+  $datagrid-focused-border-color: gridBaseColors.$grid-border-focused,
+  $datagrid-text-stub-background-image-path: gridBaseColors.$grid-text-stub-bg-rest,
+  $datagrid-row-error-color: gridBaseColors.$grid-row-error-content-rest,
+  $header-filter-color: gridBaseColors.$grid-header-filter-icon-rest,
+  $header-filter-color-empty: gridBaseColors.$grid-header-filter-empty-icon-rest,
+  $base-focus-color: ds.$color-content-neutral-default-inverted-rest,
+);
+@use 'layout/cell';
+@include grid-base(treelist);
+
+.dx-treelist-rowsview {
+  tr:not(.dx-row-focused) .dx-treelist-empty-space {
+    color: $tree-list-chevron-icon-rest;
+  }
+
+  .dx-sort-up,
+  .dx-sort-down,
+  .dx-header-filter {
+    vertical-align: middle;
+  }
+
+  tr:not(.dx-row-focused).dx-selection {
+    .dx-treelist-empty-space {
+      color: $tree-list-chevron-icon-selected;
+    }
+  }
+
+  .dx-treelist-cell-expandable {
+    .dx-treelist-text-content {
+      white-space: normal;
+    }
+  }
+
+  &.dx-treelist-nowrap .dx-treelist-table {
+    .dx-treelist-cell-expandable {
+      .dx-treelist-text-content {
+        white-space: nowrap;
+      }
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/treeList/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/treeList/_sizes.scss
new file mode 100644
index 000000000000..67aa8d2edb4d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/treeList/_sizes.scss
@@ -0,0 +1,37 @@
+@use "sass:math";
+@use "../sizes" as *;
+@use "../../base/treeList/variables" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$tree-list-expand-icon-size: null !default;
+
+@if $size == "default" {
+  $tree-list-expand-icon-size: ds.$spacing-200 !default;
+}
+
+@else if $size == "compact" {
+  $tree-list-expand-icon-size: ds.$spacing-160 !default;
+}
+
+$treelist-expand-icon-size: $tree-list-expand-icon-size !default;
+$treelist-expand-icon-name-expanded: chevrondown !default;
+$treelist-expand-icon-name-collapsed: chevronright !default;
+$treelist-expand-icon-right-gap: ds.$spacing-40 !default;
+$treelist-expand-checkbox-size: ds.$spacing-160 !default;
+$treelist-expand-checkbox-right-gap: ds.$spacing-80 !default;
+
+// Base-layer sizing injected with design tokens (wave B2)
+$tree-list-outline-focused: ds.$spacing-20 solid !default;
+$tree-list-outline-offset-focused: ds.$spacing-20 !default;
+$tree-list-form-buttons-margin-inline-start: ds.$spacing-100 !default;
+$tree-list-form-buttons-margin-block-start: ds.$spacing-100 !default;
+$tree-list-error-message-margin-block-end: ds.$spacing-200 !default;
+$tree-list-form-buttons-rtl-margin-inline-start: ds.$spacing-100 !default;
+
+$tree-list-sticky-column-border: ds.$border-width-20 solid !default;
+$tree-list-cell-outline-focused: ds.$spacing-20 solid !default;
+
+// Base submodule sizing injected with design tokens (B2 tail)
+$tree-list-empty-space-height: ds.$spacing-10 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/treeList/layout/cell.scss b/packages/devextreme-scss/scss/widgets/fluent-next/treeList/layout/cell.scss
new file mode 100644
index 000000000000..f1e86b56616a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/treeList/layout/cell.scss
@@ -0,0 +1,8 @@
+// #region typography
+
+// (0,2,0)
+.dx-treelist-rowsview .dx-treelist-cell-expandable {
+  white-space: nowrap;
+}
+
+// #endregion
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/treeView/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/treeView/_colors.scss
new file mode 100644
index 000000000000..608bedfa5e76
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/treeView/_colors.scss
@@ -0,0 +1,33 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
+$tree-view-content-rest: ds.$color-content-neutral-default-rest !default;
+
+$tree-view-bg-focused: ds.$color-surface-neutral-default-hovered !default;
+$tree-view-content-focused: ds.$color-content-neutral-default-rest !default;
+$tree-view-bg-hovered: ds.$color-surface-neutral-default-hovered !default;
+$tree-view-item-content-hovered: ds.$color-content-neutral-default-rest !default;
+$tree-view-border-rest: ds.$color-border-neutral-default-rest !default;
+$tree-view-item-content-selected: $tree-view-content-rest !default;
+$tree-view-item-bg-selected: ds.$color-surface-neutral-default-selected !default;
+$tree-view-spin-icon-rest: ds.$color-content-neutral-subdued-rest !default;
+$checkbox-border-color-focused: ds.$color-border-primary-compound-active !default;
+
+/*
+ * Три роли, вышедшие из одного значения (правило 5): граница невыбранного бокса, глиф чекнутого
+ * и заливка indeterminate. Значение у всех трёх одно и то же, поэтому разделение байт-нейтрально;
+ * вопрос «должны ли они совпадать» теперь виден в коде, а не спрятан в одном имени —
+ * см. DIVERGENCES.md.
+ */
+$tree-view-checkbox-border-disabled: ds.$color-content-neutral-default-disabled !default;
+$tree-view-checkbox-icon-disabled: ds.$color-content-neutral-default-disabled !default;
+$tree-view-checkbox-indeterminate-bg-disabled: ds.$color-content-neutral-default-disabled !default;
+$tree-view-checkbox-bg-disabled: ds.$color-surface-neutral-default-disabled !default;
+$tree-view-item-content-disabled: ds.$color-content-neutral-default-disabled !default;
+$tree-view-checkbox-border-focused: ds.$color-border-neutral-accessible-disabled !default;
+$tree-view-checkbox-bg-focused: ds.$color-surface-neutral-default-disabled !default;
+$tree-view-checkbox-accent-content-focused: ds.$color-surface-primary-default-hovered !default;
+
+// Base-layer values injected with design tokens (wave B1)
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/treeView/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/treeView/_index.scss
new file mode 100644
index 000000000000..11552b4b5efd
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/treeView/_index.scss
@@ -0,0 +1,146 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/treeView" as baseTreeView with (
+  $treeview-select-all-item-border-bottom: $tree-view-select-all-item-border-block-end,
+  $treeview-border-visible-border: $tree-view-border-visible-border,
+  $treeview-disabled-opacity: $tree-view-opacity-disabled,
+);
+@use "../../base/icon_fonts" as *;
+
+.dx-treeview-custom-expand-icon,
+.dx-treeview-custom-collapse-icon {
+  @include dx-icon-sizing($global-icon-size);
+}
+
+.dx-treeview-select-all-item {
+  &.dx-state-focused {
+    .dx-checkbox-icon {
+      border-color: $tree-view-checkbox-border-focused;
+      background-color: $tree-view-checkbox-bg-focused;
+    }
+  }
+
+  &.dx-state-focused.dx-checkbox-checked {
+    .dx-checkbox-icon {
+      background-color: $tree-view-checkbox-accent-content-focused;
+      border-color: $tree-view-checkbox-accent-content-focused;
+    }
+  }
+
+  &.dx-state-focused.dx-checkbox-indeterminate {
+    .dx-checkbox-icon {
+      border-color: $tree-view-checkbox-accent-content-focused;
+
+      &::before {
+        background-color: $tree-view-checkbox-accent-content-focused;
+      }
+    }
+  }
+}
+
+.dx-treeview-item-with-checkbox {
+  .dx-treeview-item {
+    .dx-checkbox.dx-state-disabled {
+      .dx-checkbox-icon {
+        border-color: $tree-view-item-content-disabled;
+      }
+
+      &.dx-checkbox-indeterminate {
+        .dx-checkbox-icon::before {
+          background-color: $tree-view-item-content-disabled;
+        }
+      }
+    }
+  }
+
+  &.dx-state-focused > .dx-treeview-item {
+    .dx-checkbox {
+      .dx-checkbox-icon {
+        border-color: $tree-view-checkbox-border-focused;
+        background-color: $tree-view-checkbox-bg-focused;
+      }
+
+      &.dx-checkbox-checked {
+        .dx-checkbox-icon {
+          background-color: $tree-view-checkbox-accent-content-focused;
+          border-color: $tree-view-checkbox-accent-content-focused;
+        }
+      }
+
+      &.dx-checkbox-indeterminate {
+        .dx-checkbox-icon {
+          border-color: $tree-view-checkbox-accent-content-focused;
+
+          &::before {
+            background-color: $tree-view-checkbox-accent-content-focused;
+          }
+        }
+      }
+    }
+
+    .dx-checkbox.dx-state-disabled {
+      .dx-checkbox-icon {
+        background-color: $tree-view-checkbox-bg-disabled;
+        border-color: $tree-view-checkbox-border-disabled;
+      }
+
+      &.dx-checkbox-checked {
+        .dx-checkbox-icon {
+          color: $tree-view-checkbox-icon-disabled;
+        }
+      }
+
+      &.dx-checkbox-indeterminate {
+        .dx-checkbox-icon::before {
+          background-color: $tree-view-checkbox-indeterminate-bg-disabled;
+        }
+      }
+    }
+  }
+}
+
+.dx-treeview-item-content.dx-state-disabled {
+  color: $tree-view-item-content-disabled;
+}
+
+@include baseTreeView.default-expander-icon(
+  'chevrondown',
+  'chevronright',
+  $global-icon-size,
+  $tree-view-toggle-item-width,
+  $tree-view-spin-icon-rest,
+);
+@include baseTreeView.treeview-item(
+  $tree-view-item-element-gap,
+  $tree-view-item-padding,
+  $global-icon-size,
+  $tree-view-bg-hovered,
+  $tree-view-item-content-hovered,
+  $tree-view-item-content-selected,
+  calc(#{$tree-view-toggle-item-width} + #{$tree-view-item-element-gap}),
+  $tree-view-item-margin,
+  $tree-view-item-border-radius,
+);
+@include baseTreeView.treeview-checkbox(
+  $tree-view-checkbox-container-size,
+  $tree-view-content-rest,
+  $checkbox-border-color-focused,
+  $tree-view-item-content-selected,
+  $tree-view-item-bg-selected,
+  $tree-view-bg-focused,
+  $tree-view-content-focused,
+  $tree-view-item-border-radius
+);
+@include baseTreeView.treeview-aux-items(
+  $tree-view-search-box-margin-block-end,
+  $tree-view-search-editor-height,
+  $tree-view-border-rest,
+  $tree-view-select-all-item-padding,
+  $tree-view-item-element-gap,
+  $tree-view-select-all-item-border-visible-padding,
+  $tree-view-container-padding,
+  $tree-view-load-indicator-size,
+);
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/treeView/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/treeView/_sizes.scss
new file mode 100644
index 000000000000..f820ab7671f7
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/treeView/_sizes.scss
@@ -0,0 +1,55 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+// Not colours: opacities that used to sit in _colors.scss (NAMING.md, O7)
+$tree-view-opacity-disabled: ds.$opacity-50 !default;
+
+$tree-view-toggle-item-width: null !default;
+$tree-view-checkbox-container-size: null !default;
+$tree-view-container-with-border-offset: ds.$spacing-80;
+$tree-view-item-element-gap: ds.$spacing-80 !default;
+$tree-view-item-margin: ds.$spacing-10 0;
+$tree-view-item-border-radius: ds.$border-radius-40;
+$tree-view-border-padding: ds.$spacing-10;
+$tree-view-container-padding:
+  $tree-view-border-padding
+  $tree-view-border-padding
+  $tree-view-border-padding
+  $tree-view-container-with-border-offset;
+
+$tree-view-checkbox-offset: null !default;
+$tree-view-select-all-item-padding: null !default;
+$tree-view-item-padding: null !default;
+$tree-view-load-indicator-size: null !default;
+$tree-view-search-box-margin-block-end: null !default;
+$tree-view-search-editor-height: null !default;
+$tree-view-item-padding-inline: ds.$spacing-120 !default;
+$tree-view-select-all-item-border-visible-padding: ds.$spacing-260 !default;
+
+@if $size == "default" {
+  $tree-view-toggle-item-width: ds.$spacing-200 !default;
+  $tree-view-checkbox-container-size: ds.$spacing-200 !default;
+  $tree-view-checkbox-offset: 42px !default; // dx-offscale: 42px
+  $tree-view-select-all-item-padding: ds.$spacing-150 42px !default; // dx-offscale: 42px
+  $tree-view-item-padding: ds.$spacing-120 $tree-view-item-padding-inline !default;
+  $tree-view-load-indicator-size: ds.$spacing-200 !default;
+  $tree-view-search-box-margin-block-end: ds.$spacing-80 !default;
+  $tree-view-search-editor-height: ds.$spacing-480;
+}
+
+@else if $size == "compact" {
+  $tree-view-toggle-item-width: ds.$spacing-160 !default;
+  $tree-view-checkbox-offset: ds.$spacing-360 !default;
+  $tree-view-checkbox-container-size: ds.$spacing-160 !default;
+  $tree-view-select-all-item-padding: ds.$spacing-100 $tree-view-checkbox-offset !default;
+  $tree-view-item-padding: ds.$spacing-100 $tree-view-item-padding-inline !default;
+  $tree-view-load-indicator-size: ds.$spacing-160 !default;
+  $tree-view-search-box-margin-block-end: ds.$spacing-40 !default;
+  $tree-view-search-editor-height: ds.$spacing-320;
+}
+
+// Base-layer sizing injected with design tokens (wave B2)
+$tree-view-select-all-item-border-block-end: ds.$border-width-10 solid !default;
+$tree-view-border-visible-border: ds.$border-width-10 solid !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/typography/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/typography/_colors.scss
new file mode 100644
index 000000000000..76da753c259b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/typography/_colors.scss
@@ -0,0 +1,6 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$typography-bg-rest: ds.$color-surface-neutral-subdued-rest !default;
+$typography-link-content-rest: ds.$color-content-primary-default-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/typography/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/typography/_index.scss
new file mode 100644
index 000000000000..f10b34c8f5f3
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/typography/_index.scss
@@ -0,0 +1,69 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../common/mixins" as *;
+@use "mixins" as *;
+
+// adduse
+
+.dx-theme-fluent-next-typography {
+  background-color: $typography-bg-rest;
+
+  @include dx-base-typography();
+
+  h1 {
+    font-weight: $typography-heading-1-font-weight;
+    font-size: $typography-heading-1-font-size;
+  }
+
+  h2 {
+    font-weight: $typography-heading-2-font-weight;
+    font-size: $typography-heading-2-font-size;
+  }
+
+  h3 {
+    font-weight: $typography-heading-3-font-weight;
+    font-size: $typography-heading-3-font-size;
+  }
+
+  h4 {
+    font-weight: $typography-heading-4-font-weight;
+    font-size: $typography-heading-4-font-size;
+  }
+
+  h5 {
+    font-weight: $typography-heading-5-font-weight;
+    font-size: $typography-heading-5-font-size;
+  }
+
+  h6 {
+    font-weight: $typography-heading-6-font-weight;
+    font-size: $typography-heading-6-font-size;
+  }
+
+  .dx-font-xl {
+    font-size: $typography-xl-font-size;
+  }
+
+  .dx-font-l {
+    font-size: $typography-l-font-size;
+  }
+
+  .dx-font-m {
+    font-size: $typography-m-font-size;
+  }
+
+  .dx-font-s {
+    @include dx-s-font-mixin();
+  }
+
+  small,
+  .dx-font-xs {
+    font-size: $typography-xs-font-size;
+  }
+
+  a {
+    color: $typography-link-content-rest;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/typography/_mixins.scss b/packages/devextreme-scss/scss/widgets/fluent-next/typography/_mixins.scss
new file mode 100644
index 000000000000..1397f686686c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/typography/_mixins.scss
@@ -0,0 +1,5 @@
+@use "sizes" as *;
+
+@mixin dx-s-font-mixin() {
+  font-size: $typography-s-font-size;
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/typography/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/typography/_sizes.scss
new file mode 100644
index 000000000000..513451be3bb2
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/typography/_sizes.scss
@@ -0,0 +1,73 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$typography-xl-font-size: null !default;
+$typography-l-font-size: null !default;
+$typography-m-font-size: null !default;
+$typography-s-font-size: null !default;
+$typography-xs-font-size: null !default;
+$typography-heading-1-font-size: null !default;
+$typography-heading-2-font-size: null !default;
+$typography-heading-3-font-size: null !default;
+$typography-heading-4-font-size: null !default;
+$typography-heading-5-font-size: null !default;
+$typography-heading-6-font-size: null !default;
+
+/*
+ * The xl/l/m/s/xs classes are raw size utilities (.dx-font-*), not text roles —
+ * they intentionally stay on the base scale. Headings map to semantic headline
+ * roles where a role with the exact legacy value exists (see TOKENS_MIGRATION.md).
+ */
+@if $size == "default" {
+  $typography-xl-font-size: ds.$spacing-340 !default;
+  $typography-l-font-size: ds.$font-size-280 !default;
+  $typography-m-font-size: ds.$font-size-200 !default;
+  $typography-s-font-size: ds.$font-size-180 !default;
+  $typography-xs-font-size: ds.$font-size-120 !default;
+
+  $typography-heading-1-font-size: ds.$font-size-headline-xl !default;
+  $typography-heading-2-font-size: ds.$font-size-360 !default; // dx-no-semantic-role: 360 is off the font-size-role scale
+  $typography-heading-3-font-size: ds.$font-size-headline-lg !default;
+  $typography-heading-4-font-size: ds.$font-size-260 !default; // dx-no-semantic-role: 260 is off the font-size-role scale
+  $typography-heading-5-font-size: ds.$font-size-220 !default; // dx-no-semantic-role: 220 is off the font-size-role scale
+  $typography-heading-6-font-size: ds.$font-size-220 !default; // dx-no-semantic-role: 220 is off the font-size-role scale
+}
+
+@else if $size == "compact" {
+  $typography-xl-font-size: ds.$font-size-240 !default;
+  $typography-l-font-size: ds.$font-size-200 !default;
+  $typography-m-font-size: ds.$font-size-160 !default;
+  $typography-s-font-size: ds.$font-size-140 !default;
+  $typography-xs-font-size: ds.$font-size-120 !default;
+
+  $typography-heading-1-font-size: ds.$font-size-headline-lg !default;
+  $typography-heading-2-font-size: ds.$font-size-280 !default; // dx-no-semantic-role: default branch (360) is off the role scale
+  $typography-heading-3-font-size: ds.$font-size-headline-sm !default;
+  $typography-heading-4-font-size: ds.$font-size-200 !default; // dx-no-semantic-role: default branch (260) is off the role scale
+  $typography-heading-5-font-size: ds.$font-size-160 !default; // dx-no-semantic-role: default branch (220) is off the role scale
+  $typography-heading-6-font-size: ds.$font-size-160 !default; // dx-no-semantic-role: default branch (220) is off the role scale
+}
+
+:root {
+  --dx-font-size-heading-1: #{$typography-heading-1-font-size};
+  --dx-font-size-heading-2: #{$typography-heading-2-font-size};
+  --dx-font-size-heading-3: #{$typography-heading-3-font-size};
+  --dx-font-size-heading-4: #{$typography-heading-4-font-size};
+  --dx-font-size-heading-5: #{$typography-heading-5-font-size};
+  --dx-font-size-heading-6: #{$typography-heading-6-font-size};
+  --dx-font-size-xl: #{$typography-xl-font-size};
+  --dx-font-size-lg: #{$typography-l-font-size};
+  --dx-font-size-md: #{$typography-m-font-size};
+  --dx-font-size-sm: #{$typography-s-font-size};
+  --dx-font-size-xs: #{$typography-xs-font-size};
+}
+
+// Values hoisted from style-file literals (tokenized)
+$typography-heading-1-font-weight: ds.$font-weight-headline-default !default;
+$typography-heading-2-font-weight: ds.$font-weight-headline-default !default;
+$typography-heading-3-font-weight: ds.$font-weight-headline-default !default;
+$typography-heading-4-font-weight: ds.$font-weight-headline-default !default;
+$typography-heading-5-font-weight: ds.$font-weight-headline-strong !default;
+$typography-heading-6-font-weight: ds.$font-weight-500 !default; // dx-no-semantic-role: 500 is off the weight-role scale (400/600/700)
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/validation/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/validation/_colors.scss
new file mode 100644
index 000000000000..c599864dbd7d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/validation/_colors.scss
@@ -0,0 +1,7 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$validation-message-content-rest: ds.$color-content-danger-default-rest !default;
+$validation-message-bg-rest: ds.$color-surface-danger-deep-rest !default;
+$validation-summary-content-rest: ds.$color-content-danger-default-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/validation/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/validation/_index.scss
new file mode 100644
index 000000000000..6025ea5e65ab
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/validation/_index.scss
@@ -0,0 +1,23 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/validation" as baseValidation;
+@use "../textEditor/sizes" as textEditorSizes;
+
+// adduse
+@use "../overlay";
+@include baseValidation.dx-base-validation(
+  $validation-summary-content-rest,
+  $validation-message-content-rest,
+  $validation-message-bg-rest,
+  $validation-overlay-border-radius
+);
+@include baseValidation.dx-modern-styles-validation(
+  $validation-message-font-size,
+  $validation-message-line-height,
+  textEditorSizes.$text-editor-input-filled-padding-inline,
+  $validation-summary-item-margin,
+  $validation-message-padding-block,
+  $validation-message-padding-inline,
+);
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/validation/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/validation/_sizes.scss
new file mode 100644
index 000000000000..f40b46541f64
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/validation/_sizes.scss
@@ -0,0 +1,26 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$validation-summary-item-margin: null !default;
+$validation-message-line-height: null !default;
+$validation-message-padding-inline: null !default;
+
+$validation-overlay-border-radius: ds.$border-radius-40 !default;
+$validation-message-padding-block: ds.$spacing-40 !default;
+$validation-message-font-size: ds.$font-size-caption-md !default;
+
+@if $size == "default" {
+  $validation-summary-item-margin: ds.$spacing-60 !default;
+
+  $validation-message-padding-inline: ds.$spacing-80 !default;
+  $validation-message-line-height: ds.$line-height-160 !default; // dx-no-semantic-role: compact branch (120) is off the role scale
+}
+
+@else if $size == "compact" {
+  $validation-summary-item-margin: ds.$spacing-40 !default;
+
+  $validation-message-padding-inline: ds.$spacing-60 !default;
+  $validation-message-line-height: ds.$line-height-120 !default; // dx-no-semantic-role: 120 is off the line-height-role scale
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/widget/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/widget/_colors.scss
new file mode 100644
index 000000000000..e72a33871797
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/widget/_colors.scss
@@ -0,0 +1,5 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$widget-bg-rest: ds.$color-surface-neutral-default-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/widget/_index.scss b/packages/devextreme-scss/scss/widgets/fluent-next/widget/_index.scss
new file mode 100644
index 000000000000..072e8c2169e7
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/widget/_index.scss
@@ -0,0 +1,27 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../common/mixins" as *;
+@use "../../base/widget";
+
+// adduse
+
+.dx-widget {
+  @include dx-base-typography();
+}
+
+.dx-state-disabled {
+  &.dx-widget,
+  .dx-widget {
+    .dx-widget {
+      opacity: 1;
+    }
+
+    @include disabled-widget();
+  }
+}
+
+.dx-surface {
+  background-color: $widget-bg-rest;
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/widget/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/widget/_sizes.scss
new file mode 100644
index 000000000000..43b104010f9e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/widget/_sizes.scss
@@ -0,0 +1,4 @@
+@use "../sizes" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/tests/fluent-next-naming.baseline.json b/packages/devextreme-scss/tests/fluent-next-naming.baseline.json
new file mode 100644
index 000000000000..1dab80533342
--- /dev/null
+++ b/packages/devextreme-scss/tests/fluent-next-naming.baseline.json
@@ -0,0 +1,378 @@
+{
+  "ownershipOfDeclarations": {
+    "accordion": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "actionSheet": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "autocomplete": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "badge": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "box": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "button": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "buttonGroup": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "calendar": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "card": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "chat": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "checkBox": {
+      "themePrefixed": 3,
+      "unclassified": 0
+    },
+    "colorBox": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "colorView": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "contextMenu": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "dataGrid": {
+      "themePrefixed": 0,
+      "unclassified": 1
+    },
+    "dateBox": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "dateRangeBox": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "dateView": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "diagram": {
+      "themePrefixed": 1,
+      "unclassified": 0
+    },
+    "drawer": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "dropDownBox": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "dropDownButton": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "dropDownEditor": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "dropDownList": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "dropDownMenu": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "fieldset": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "fileManager": {
+      "themePrefixed": 8,
+      "unclassified": 0
+    },
+    "fileUploader": {
+      "themePrefixed": 3,
+      "unclassified": 0
+    },
+    "filterBuilder": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "form": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "gallery": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "gantt": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "gridBase": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "htmlEditor": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "icons": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "informer": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "list": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "loadIndicator": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "loadPanel": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "lookup": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "map": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "menu": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "menuBase": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "multiView": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "numberBox": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "overlay": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "pagination": {
+      "themePrefixed": 3,
+      "unclassified": 0
+    },
+    "pivotGrid": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "popover": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "popup": {
+      "themePrefixed": 1,
+      "unclassified": 0
+    },
+    "progressBar": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "radioButton": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "radioGroup": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "rangeSlider": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "recurrenceEditor": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "responsiveBox": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "scheduler": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "scrollView": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "scrollable": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "selectBox": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "slider": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "sortable": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "speechToText": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "speedDialAction": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "splitter": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "splitterBar": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "stepper": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "switch": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "tabPanel": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "tabs": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "tagBox": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "textArea": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "textBox": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "textEditor": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "tileView": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "timeView": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "toast": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "toolbar": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "tooltip": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "treeList": {
+      "themePrefixed": 0,
+      "unclassified": 6
+    },
+    "treeView": {
+      "themePrefixed": 0,
+      "unclassified": 1
+    },
+    "validation": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "widget": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    }
+  },
+  "systemTierNames": [],
+  "multipleDeclarationHomes": [],
+  "foreignReads": {
+    "icons": [
+      "scrollViewColors.$scroll-view-pull-down-bg-rest"
+    ]
+  },
+  "declarationsOutsideVariableFiles": [
+    "common/_mixins.scss: 1"
+  ],
+  "starImportsOfBase": [
+    "dataGrid/_sizes.scss: ../../base/dataGrid/variables",
+    "treeList/_sizes.scss: ../../base/treeList/variables"
+  ],
+  "crossWidgetStarImports": [],
+  "deadVariables": [],
+  "publicSurfaceUnused": [
+    "--dx-button-padding-inline",
+    "--dx-color-shadow",
+    "--dx-component-height",
+    "--dx-font-size",
+    "--dx-font-size-heading-1",
+    "--dx-font-size-heading-2",
+    "--dx-font-size-heading-3",
+    "--dx-font-size-heading-4",
+    "--dx-font-size-heading-6",
+    "--dx-font-size-lg",
+    "--dx-font-size-md",
+    "--dx-font-size-xl",
+    "--dx-line-height",
+    "--dx-list-item-padding-block",
+    "--dx-list-item-padding-inline",
+    "--dx-popup-toolbar-item-padding-inline",
+    "--dx-texteditor-color-text",
+    "--dx-toolbar-height"
+  ],
+  "publicSurfaceUndeclared": [
+    "--dx-texteditor-label-color"
+  ],
+  "publicSurfaceDifferences": [
+    "--dx-line-height: only in fluent, fluent-next"
+  ]
+}
diff --git a/packages/devextreme-scss/tests/fluent-next-naming.test.ts b/packages/devextreme-scss/tests/fluent-next-naming.test.ts
new file mode 100644
index 000000000000..437410916abc
--- /dev/null
+++ b/packages/devextreme-scss/tests/fluent-next-naming.test.ts
@@ -0,0 +1,702 @@
+/*
+ * Enforces the fluent-next SCSS naming standard — scss/widgets/fluent-next/NAMING.md.
+ *
+ * The standard is being rolled out wave by wave, so most checks are RATCHETS: the current set of
+ * violations is compared against tests/fluent-next-naming.baseline.json, which must only ever shrink.
+ * Regenerate it deliberately, as part of a wave, with:
+ *
+ *   UPDATE_NAMING_BASELINE=1 pnpm test
+ *
+ * Two checks are hard failures from day one: the grammar invariants of the registries, and grammar
+ * conformance for components already listed as `migrated`.
+ *
+ * Exceptions are COMPUTED from structural properties (a mixin-only import, a base module configured
+ * through `with()`, an exempt folder recorded in the registries) and never listed by name. If an
+ * exception has to be spelled out as a name, the rule is wrong.
+ */
+
+import {
+  readFileSync, writeFileSync, readdirSync, statSync, existsSync,
+} from 'fs';
+import { join, resolve, sep } from 'path';
+
+const packageRoot = process.cwd();
+const themeRoot = join(packageRoot, 'scss', 'widgets', 'fluent-next');
+const registries = JSON.parse(
+  readFileSync(join(packageRoot, 'tools', 'naming', 'registries.json'), 'utf8'),
+);
+const baselinePath = join(__dirname, 'fluent-next-naming.baseline.json');
+const updatingBaseline = process.env.UPDATE_NAMING_BASELINE === '1';
+
+const THEMES = ['generic', 'material', 'fluent', 'fluent-next'];
+const DECLARATION_FILES = ['_colors.scss', '_sizes.scss', '_variables.scss'];
+const CONTROL_DIRECTIVES = /@(if|else|each|for|while)\b[^{]*$/;
+
+type Use = { spec: string; star: boolean; alias: string | null };
+type NamespacedReference = { namespace: string; name: string };
+type Parsed = {
+  file: string;
+  folder: string;
+  declarations: string[];
+  references: string[];
+  /*
+   * `references` intentionally contains both `$name` and the `name` half of `alias.$name`, because
+   * the dead-variable check must see either form. Ownership checks must not: counting a namespaced
+   * read as a bare one reports the same read twice the moment the variable's name becomes canonical.
+   */
+  bareReferences: string[];
+  namespacedReferences: NamespacedReference[];
+  uses: Use[];
+};
+
+const walk = (dir: string, extension: string): string[] => {
+  const result: string[] = [];
+  readdirSync(dir).forEach((entry) => {
+    const absolute = join(dir, entry);
+    if (statSync(absolute).isDirectory()) {
+      result.push(...walk(absolute, extension));
+    } else if (entry.endsWith(extension)) {
+      result.push(absolute);
+    }
+  });
+  return result;
+};
+
+const stripComments = (content: string): string => content
+  .replace(/\/\/[^\n\r]*/g, '')
+  .split(/\/\*|\*\//)
+  .filter((_, index) => index % 2 === 0)
+  .join('');
+
+/**
+ * Ranges of `@use … with ( … )` argument lists. Their left-hand sides are the *base module's*
+ * parameter names, not declarations of this file, and must never be treated as either a declaration
+ * or a foreign read (443 of them exist on purpose — NAMING.md, "Исключения").
+ */
+const findWithRanges = (content: string): [number, number][] => {
+  const ranges: [number, number][] = [];
+  const opener = /\bwith\s*\(/g;
+  let match = opener.exec(content);
+
+  while (match !== null) {
+    let depth = 1;
+    let index = match.index + match[0].length;
+    while (index < content.length && depth > 0) {
+      if (content[index] === '(') depth += 1;
+      if (content[index] === ')') depth -= 1;
+      index += 1;
+    }
+    ranges.push([match.index, index]);
+    match = opener.exec(content);
+  }
+
+  return ranges;
+};
+
+const inRanges = (position: number, ranges: [number, number][]): boolean => ranges
+  .some(([from, to]) => position >= from && position < to);
+
+/**
+ * Parameter lists of `@mixin` / `@function`. A parameter with a default (`$button-selected-bg: $x`)
+ * looks exactly like a declaration and is not inside a `{}` block, so brace tracking alone counts it
+ * as one — same trap as `with()` keys.
+ */
+const findSignatureRanges = (content: string): [number, number][] => {
+  const ranges: [number, number][] = [];
+  const opener = /@(?:mixin|function)\s+[\w-]+\s*\(/g;
+  let match = opener.exec(content);
+
+  while (match !== null) {
+    let depth = 1;
+    let index = match.index + match[0].length;
+    while (index < content.length && depth > 0) {
+      if (content[index] === '(') depth += 1;
+      if (content[index] === ')') depth -= 1;
+      index += 1;
+    }
+    ranges.push([match.index, index]);
+    match = opener.exec(content);
+  }
+
+  return ranges;
+};
+
+/**
+ * A declaration is module-level when every enclosing block is a control directive: Sass `@if`/`@each`
+ * do not create scope, but a mixin, a function or a style rule do. That is what separates the theme's
+ * variables from the 14 function locals in color.scss and button/_mixins.scss.
+ */
+const parseFile = (file: string): Parsed => {
+  const content = stripComments(readFileSync(file, 'utf8'));
+  const withRanges = [...findWithRanges(content), ...findSignatureRanges(content)];
+  const declarations: string[] = [];
+  const references: string[] = [];
+  const bareReferences: string[] = [];
+  const namespacedReferences: NamespacedReference[] = [];
+  const uses: Use[] = [];
+
+  const blockStack: boolean[] = [];
+  let index = 0;
+  while (index < content.length) {
+    const char = content[index];
+
+    if (char === '{') {
+      blockStack.push(CONTROL_DIRECTIVES.test(content.slice(Math.max(0, index - 200), index)));
+      index += 1;
+    } else if (char === '}') {
+      blockStack.pop();
+      index += 1;
+    } else if (char === '$') {
+      const name = /^\$[a-z0-9_-]+/i.exec(content.slice(index))?.[0];
+      if (!name) { index += 1; continue; }
+      const namespaced = index > 0 && content[index - 1] === '.';
+      const after = content.slice(index + name.length);
+      const isAssignment = /^\s*:/.test(after);
+      const moduleLevel = blockStack.every((isControl) => isControl);
+
+      if (isAssignment && !namespaced && moduleLevel && !inRanges(index, withRanges)) {
+        declarations.push(name);
+      } else if (!isAssignment && !namespaced) {
+        references.push(name);
+        bareReferences.push(name);
+      } else if (!isAssignment && namespaced) {
+        // `alias.$name` — an explicit foreign read. After wave A these are the readable form of what
+        // used to hide behind `as *`, and they still count as references for the dead-variable check.
+        const namespace = /([a-zA-Z][a-zA-Z0-9_-]*)\.$/.exec(content.slice(0, index))?.[1];
+        if (namespace) namespacedReferences.push({ namespace, name });
+        references.push(name);
+      }
+      index += name.length;
+    } else if (char === '@' && content.startsWith('@use', index)) {
+      const statement = /^@use\s+["']([^"']+)["']/.exec(content.slice(index));
+      if (statement) {
+        // Only the module spec is consumed here. Scanning must continue into the `with (…)` block:
+        // its right-hand sides are ordinary references, and skipping them would make every variable
+        // that is used solely as a `with()` value look dead.
+        const tail = content.slice(index + statement[0].length, index + statement[0].length + 200);
+        const beforeArguments = tail.split(/;|\bwith\s*\(/)[0];
+        uses.push({
+          spec: statement[1],
+          star: /\bas\s+\*/.test(beforeArguments),
+          alias: /\bas\s+([a-zA-Z][a-zA-Z0-9_-]*)/.exec(beforeArguments)?.[1] ?? null,
+        });
+        index += statement[0].length;
+      } else {
+        index += 4;
+      }
+    } else {
+      index += 1;
+    }
+  }
+
+  const relativePath = resolve(file).slice(resolve(themeRoot).length + 1);
+  const segments = relativePath.split(sep);
+  return {
+    file: relativePath,
+    folder: segments.length > 1 ? segments[0] : '',
+    declarations,
+    references,
+    bareReferences,
+    namespacedReferences,
+    uses,
+  };
+};
+
+const parsedFiles: Parsed[] = walk(themeRoot, '.scss').map(parseFile);
+
+/*
+ * `base/**` parameter names, and the precise question of whether a given theme declaration is one of
+ * them: the file has to pull that very base module in with `as *`. That star import IS the wiring —
+ * the top-level `$x: … !default` in the theme sets base's variable — so such a name is base's
+ * spelling and neither the grammar nor the ownership rule applies to it (NAMING.md, O8). The wide
+ * form of the question ("does base declare this name anywhere") would wave through any legacy name.
+ */
+const baseNames = new Set(
+  walk(join(packageRoot, 'scss', 'widgets', 'base'), '.scss')
+    .flatMap((file) => parseFile(file).declarations),
+);
+
+const starredBaseParameters = (file: string): Set<string> => {
+  const names = new Set<string>();
+  const parsed = parsedFiles.find((candidate) => candidate.file === file);
+  parsed?.uses.forEach(({ spec, star }) => {
+    if (!star || !spec.includes('base/')) return;
+    const directory = resolve(join(themeRoot, file), '..', spec, '..');
+    const stem = spec.split('/').pop() as string;
+    [join(directory, `_${stem}.scss`), join(directory, stem, '_index.scss')]
+      .filter((candidate) => existsSync(candidate))
+      .forEach((candidate) => parseFile(candidate).declarations.forEach((name) => names.add(name)));
+  });
+  return names;
+};
+
+// ---------------------------------------------------------------------------------------------
+// component resolution
+// ---------------------------------------------------------------------------------------------
+
+const components: Record<string, string> = registries.components;
+const exemptFolders = Object.keys(registries.exemptFolders);
+const componentNames = [...new Set(Object.values(components))]
+  .sort((a, b) => b.length - a.length); // longest first, so `data-grid` wins over `grid`
+
+/** The component whose namespace a variable name belongs to, matched at hyphen boundaries. */
+const componentOf = (variable: string): string | null => {
+  const name = variable.slice(1);
+  return componentNames.find((component) => name === component || name.startsWith(`${component}-`))
+    ?? null;
+};
+
+const isSystemName = (variable: string): boolean => registries.systemConcerns
+  .some((concern: string) => variable.slice(1).startsWith(`${concern}-`));
+
+const isThemeIdentity = (variable: string): boolean => registries.themeIdentity.includes(variable);
+
+const relevantFolders = Object.keys(components).filter((folder) => !exemptFolders.includes(folder));
+
+const readsAllowedFor = (folder: string): Set<string> => {
+  const allowed = new Set<string>();
+  if (components[folder]) allowed.add(components[folder]);
+  Object.values(registries.chassis).forEach((chassis: any) => {
+    if (chassis.dependents.includes(folder)) allowed.add(chassis.component);
+  });
+  /*
+   * A composite widget may read the metrics of a widget it RENDERS: the toolbar's overflow menu is a
+   * real List, a grid cell in edit mode is a real editor. Duplicating those values instead would
+   * guarantee drift, which is the opposite of what O4 is for — O4 forbids borrowing a value because it
+   * looks right, not matching a widget you actually contain. Each entry in `embeds` names the element
+   * that justifies it and is reviewed as code, exactly like the chassis list.
+   */
+  (registries.embeds?.[folder] ?? []).forEach((component: string) => allowed.add(component));
+  return allowed;
+};
+
+/*
+ * Six `--dx-*` names are NOT part of the public tier: the runtime sets them with `style.setProperty`
+ * (card_view/content_view/content/content.tsx, scheduler/appointment_popup/form.ts) and `base/**`
+ * reads them. Four of the six deliberately have no fallback — if JS gave no value (a card cover has no
+ * `ratio`, say), the declaration must disappear rather than invent one. They are a JS -> CSS contract
+ * and are excluded from the public-surface checks, not from the codebase.
+ */
+const RUNTIME_CONTRACT = new Set([
+  '--dx-cardview-cardsperrow',
+  '--dx-cardview-card-min-width',
+  '--dx-cardview-card-max-width',
+  '--dx-cardview-card-cover-ratio',
+  '--dx-cardview-card-cover-max-height',
+  '--dx-scheduler-animation-top',
+]);
+
+/** Every `--dx-*` read anywhere outside the theme sources, or null when the monorepo is unavailable. */
+const publicNameConsumers = (): Set<string> | null => {
+  const roots = [
+    join(packageRoot, '..', '..', 'apps', 'demos', 'Demos'),
+    join(packageRoot, '..', 'devextreme', 'js'),
+    join(packageRoot, 'scss', 'widgets', 'base'),
+  ].filter((root) => existsSync(root));
+  if (!roots.length) return null;
+
+  const names = new Set<string>();
+  const extensions = ['.scss', '.css', '.html', '.vue', '.tsx', '.ts', '.js', '.jsx'];
+  roots.forEach((root) => extensions
+    .flatMap((extension) => walk(root, extension))
+    .forEach((file) => [...readFileSync(file, 'utf8').matchAll(/(--dx-[a-z0-9-]+)/g)]
+      .forEach((match) => names.add(match[1]))));
+  return names;
+};
+
+// ---------------------------------------------------------------------------------------------
+// findings
+// ---------------------------------------------------------------------------------------------
+
+const perFolder = <T>(compute: (files: Parsed[], folder: string) => T): Record<string, T> => {
+  const result: Record<string, T> = {};
+  relevantFolders.forEach((folder) => {
+    const files = parsedFiles.filter((parsed) => parsed.folder === folder);
+    const value = compute(files, folder);
+    if (Array.isArray(value) ? value.length : value) result[folder] = value;
+  });
+  return result;
+};
+
+const findings = {
+  // O1: a folder may only declare its own component's variables.
+  ownershipOfDeclarations: perFolder((files, folder) => {
+    const own = components[folder];
+    const counts = { themePrefixed: 0, unclassified: 0 };
+    const foreignComponent: string[] = [];
+
+    files.forEach(({ declarations }) => declarations.forEach((variable) => {
+      if (isThemeIdentity(variable) || isSystemName(variable)) return;
+      const component = componentOf(variable);
+      if (component === own) return;
+      if (component) foreignComponent.push(`${variable} (${component})`);
+      else if (variable.startsWith('$fluent-')) counts.themePrefixed += 1;
+      else counts.unclassified += 1;
+    }));
+
+    return {
+      ...counts,
+      ...(foreignComponent.length ? { foreignComponent: [...new Set(foreignComponent)].sort() } : {}),
+    };
+  }),
+
+  /*
+   * The system tier: the theme root and `common/` hold no component, so the per-component ownership
+   * check above never looked at them — they were the one place where any name at all was accepted.
+   * A declaration there must be a registered system concern (NAMING.md §"Системные concern'ы"),
+   * theme identity, or a base-parameter mirror whose name base itself owns.
+   */
+  systemTierNames: (() => {
+    const offenders = new Set<string>();
+
+    parsedFiles
+      .filter(({ folder }) => folder === '' || registries.systemFolders.includes(folder))
+      .forEach(({ declarations }) => declarations.forEach((variable) => {
+        if (isThemeIdentity(variable) || isSystemName(variable)) return;
+        if (baseNames.has(variable)) return; // mirror of a base parameter, spelled as base spells it
+        offenders.add(variable);
+      }));
+
+    return [...offenders].sort();
+  })(),
+
+  // O2: exactly one folder is the declaration home of a component.
+  multipleDeclarationHomes: (() => {
+    const homes: Record<string, Set<string>> = {};
+    parsedFiles.forEach(({ folder, declarations }) => {
+      if (!folder || exemptFolders.includes(folder)) return;
+      declarations.forEach((variable) => {
+        const component = componentOf(variable);
+        if (!component) return;
+        homes[component] = homes[component] ?? new Set();
+        homes[component].add(folder);
+      });
+    });
+    return Object.entries(homes)
+      .filter(([, folders]) => folders.size > 1)
+      .map(([component, folders]) => `${component}: ${[...folders].sort().join(', ')}`)
+      .sort();
+  })(),
+
+  // O3/O5: a folder may only read its own component's variables (plus chassis it depends on).
+  // Note this ratchet is deliberately weak until the rename lands: a read can only be classified as
+  // foreign once the name sits in a canonical component namespace, so legacy spellings
+  // ($datagrid-*, $fluent-*) are invisible here and show up under ownershipOfDeclarations instead.
+  // The check therefore gets STRICTER as waves land, which is the intended direction.
+  foreignReads: perFolder((files, folder) => {
+    const allowed = readsAllowedFor(folder);
+    const declaredHere = new Set(files.flatMap(({ declarations }) => declarations));
+    /*
+     * Mixin and function parameters are local names, not reads of anything: `@mixin grid-base(
+     * $widget-name)` used to be reported as gridBase reading the `widget` component, because the
+     * parameter's first segment happens to be a component name.
+     */
+    const parameters = new Set(files.flatMap(({ file }) => {
+      const content = stripComments(readFileSync(join(themeRoot, file), 'utf8'));
+      return findSignatureRanges(content)
+        .flatMap(([from, to]) => [...content.slice(from, to).matchAll(/\$[a-z0-9_-]+/gi)]
+          .map((match) => match[0]));
+    }));
+    const foreign = new Set<string>();
+
+    files.forEach(({ bareReferences }) => bareReferences.forEach((variable) => {
+      if (parameters.has(variable)) return;
+      if (declaredHere.has(variable) || isThemeIdentity(variable) || isSystemName(variable)) return;
+      const component = componentOf(variable);
+      if (component && !allowed.has(component)) foreign.add(variable);
+    }));
+
+    // Explicit form: `alias.$name`, where the alias resolves to another widget folder. This is what
+    // wave A made visible, and it does not depend on the variable name being canonical yet.
+    files.forEach(({ file, uses, namespacedReferences }) => {
+      const aliasToFolder = new Map<string, string>();
+      uses.forEach(({ spec, alias }) => {
+        if (!alias) return;
+        const modulePath = resolve(join(themeRoot, file), '..', spec);
+        if (!modulePath.startsWith(`${resolve(themeRoot)}${sep}`)) return;
+        const target = modulePath.slice(resolve(themeRoot).length + 1).split(sep)[0];
+        if (target.startsWith('_')) return; // theme-level module, not a widget folder
+        aliasToFolder.set(alias, target);
+      });
+
+      namespacedReferences.forEach(({ namespace, name }) => {
+        const target = aliasToFolder.get(namespace);
+        if (!target || target === folder) return;
+        if (registries.systemFolders.includes(target)) return;
+        const component = components[target];
+        if (component && !allowed.has(component)) foreign.add(`${namespace}.${name}`);
+      });
+    });
+
+    return [...foreign].sort();
+  }),
+
+  // O7: variables are declared only in _colors/_sizes/_variables.
+  declarationsOutsideVariableFiles: parsedFiles
+    .filter(({ file, folder, declarations }) => folder
+      && !exemptFolders.includes(folder)
+      && !exemptFolders.includes(folder)
+      && declarations.length > 0
+      && !DECLARATION_FILES.some((name) => file.endsWith(name)))
+    .map(({ file, declarations }) => `${file}: ${declarations.length}`)
+    .sort(),
+
+  // O8: a configurable base module must not be imported `as *`. Mixin-only modules are exempt,
+  // which is decided by the module path, not by a list of names.
+  starImportsOfBase: parsedFiles
+    .filter(({ folder }) => !exemptFolders.includes(folder))
+    .flatMap(({ file, uses }) => uses
+      .filter(({ spec, star }) => star
+        && spec.includes('base/')
+        && !spec.endsWith('/mixins')
+        && !spec.endsWith('icon_fonts'))
+      .map(({ spec }) => `${file}: ${spec}`))
+    .sort(),
+
+  // Cross-widget `as *` imports: what makes ownership lexically invisible and O3/O4 unsafe.
+  // Resolved against the importing file, because widgets like tabs/ have nested folders — counting
+  // path segments would call tabs/layout/… → ../variables/sizes a cross-widget import.
+  // Excluded on purpose: the theme-level layer (a module sitting in the theme root), the sanctioned
+  // system folder, and mixin-only modules, which expose no variables.
+  crossWidgetStarImports: parsedFiles
+    .filter(({ folder }) => folder && !exemptFolders.includes(folder))
+    .flatMap(({ file, folder, uses }) => uses
+      .filter(({ spec, star }) => {
+        // `/index` is style reuse, not a variable import: an index module emits CSS rules, and one
+        // widget including another's rules (htmlEditor reusing textEditor's) is not what O3 governs.
+        if (!star || spec.endsWith('/mixins') || spec.endsWith('/index')) return false;
+        if (!spec.startsWith('..')) return false;
+        const modulePath = resolve(join(themeRoot, file), '..', spec);
+        if (!modulePath.startsWith(`${resolve(themeRoot)}${sep}`)) return false;
+        const [target, ...rest] = modulePath.slice(resolve(themeRoot).length + 1).split(sep);
+        if (!rest.length) return false; // theme-level module
+        return target !== folder && !registries.systemFolders.includes(target);
+      })
+      .map(({ spec }) => `${folder}: ${spec}`))
+    .filter((entry, index, all) => all.indexOf(entry) === index)
+    .sort(),
+
+  // Declared but never referenced anywhere in the theme or base. Counts declarations and references
+  // separately, so a variable declared three times through `@if $size` no longer hides.
+  deadVariables: (() => {
+    const baseFiles = walk(join(packageRoot, 'scss', 'widgets', 'base'), '.scss').map(parseFile);
+    const referenced = new Set([...parsedFiles, ...baseFiles]
+      .flatMap(({ references }) => references));
+    const dead = new Set<string>();
+    parsedFiles.forEach(({ folder, declarations }) => {
+      if (exemptFolders.includes(folder)) return;
+      declarations.forEach((variable) => {
+        if (!referenced.has(variable)) dead.add(variable);
+      });
+    });
+    return [...dead].sort();
+  })(),
+
+  // The public tier must expose the same names in every theme, or app CSS breaks on theme switch.
+  /*
+   * The other half of the public-surface contract. Comparing the four themes' name sets is necessary
+   * but not sufficient: it sees neither a name the theme publishes that nobody reads, nor a consumer
+   * reading a name no theme declares. Both defects existed and both were invisible — `--dx-line-height`
+   * (published, read by nobody) and `--dx-texteditor-label-color` (read by five demo files, declared by
+   * no theme, no fallback, so the declaration silently dies).
+   *
+   * The consumer side lives outside this package, so the check degrades instead of failing when the
+   * monorepo is not there: an absent `apps/demos` simply means that half is not measured.
+   */
+  /*
+   * A signal for curating the public set, not proof of deadness: customer code is invisible to us, so
+   * this measures only "not referenced anywhere in this repository". 18 of 38 names are in that state,
+   * and one of them — `--dx-line-height` — is not referenced even by the themes themselves.
+   */
+  publicSurfaceUnused: (() => {
+    const declared = new Set<string>();
+    THEMES.forEach((theme) => walk(join(packageRoot, 'scss', 'widgets', theme), '.scss')
+      .forEach((file) => [...stripComments(readFileSync(file, 'utf8'))
+        .matchAll(/(--dx-[a-z0-9-]+)\s*:/g)]
+        .forEach((match) => declared.add(match[1]))));
+    const consumers = publicNameConsumers();
+    if (consumers === null) return [];
+    return [...declared].filter((name) => !consumers.has(name)).sort();
+  })(),
+
+  publicSurfaceUndeclared: (() => {
+    const declared = new Set<string>();
+    THEMES.forEach((theme) => walk(join(packageRoot, 'scss', 'widgets', theme), '.scss')
+      .forEach((file) => [...stripComments(readFileSync(file, 'utf8'))
+        .matchAll(/(--dx-[a-z0-9-]+)\s*:/g)]
+        .forEach((match) => declared.add(match[1]))));
+    const consumers = publicNameConsumers();
+    if (consumers === null) return [];
+    return [...consumers]
+      .filter((name) => !declared.has(name) && !RUNTIME_CONTRACT.has(name))
+      .sort();
+  })(),
+
+  publicSurfaceDifferences: (() => {
+    const perTheme = THEMES.map((theme) => {
+      const names = new Set<string>();
+      walk(join(packageRoot, 'scss', 'widgets', theme), '.scss').forEach((file) => {
+        [...stripComments(readFileSync(file, 'utf8')).matchAll(/(--dx-[a-z0-9-]+)\s*:/g)]
+          .forEach((match) => names.add(match[1]));
+      });
+      return { theme, names };
+    });
+    const union = new Set(perTheme.flatMap(({ names }) => [...names]));
+    return [...union].sort()
+      .filter((name) => perTheme.some(({ names }) => !names.has(name)))
+      .map((name) => `${name}: only in ${perTheme
+        .filter(({ names }) => names.has(name)).map(({ theme }) => theme).join(', ')}`);
+  })(),
+};
+
+// ---------------------------------------------------------------------------------------------
+// hard invariants
+// ---------------------------------------------------------------------------------------------
+
+test('registries: the grammar stays decidable', () => {
+  // Only overlaps between vocabularies competing for the SAME position are fatal. The trailing state
+  // is matched first, so a part or a sub-element that is also a state word would be eaten as the
+  // state and leave the mandatory slot missing. Everything else is resolved positionally: `content`
+  // is deliberately both a part (text colour) and a sub-element (.dx-toast-content), and `text` is
+  // both a part and the `stylingMode: 'text'` modifier.
+  expect(registries.states.filter((state: string) => registries.parts.includes(state))).toEqual([]);
+
+  Object.entries(registries.subElements).forEach(([component, names]) => {
+    expect({
+      component,
+      clashes: (names as string[]).filter((name) => registries.states.includes(name)),
+    }).toEqual({ component, clashes: [] });
+  });
+
+  // every component maps to exactly one declaration home
+  Object.values(registries.components).forEach((component) => {
+    expect(typeof registries.declarationHome[component as string]).toBe('string');
+  });
+});
+
+test('registries are in sync with the generated design tokens', () => {
+  // Guards against editing registries.json by hand or letting it drift from the token package.
+  const generatedComponentTokens = readFileSync(
+    join(packageRoot, 'scss', '_design-system', 'fluent', 'components', 'theme.scss'),
+    'utf8',
+  );
+  const tokenCount = [...generatedComponentTokens.matchAll(/--dxds-[a-z0-9-]+:/g)].length;
+  expect(tokenCount).toBe(registries.derivedFrom.componentTokenCount);
+});
+
+/**
+ * Parses a name against the grammar, right-to-left with longest match:
+ *
+ *   $<component>(-<sub-element>)*(-<modifier>)*-<slot>(-<state>)
+ *
+ * Returns the reason it does not fit, or null when it does. Longest-match matters in both the state
+ * and the slot position: `selected-hovered` must win over `selected`, and `padding-block` over
+ * `block`.
+ */
+const grammarViolation = (variable: string, component: string, isColors: boolean): string | null => {
+  const allowedSlots: string[] = isColors ? registries.parts : registries.sizeSlots;
+  const middleWords: string[] = [
+    ...(registries.subElements[component] ?? []),
+    ...Object.values(registries.modifiers).flat() as string[],
+  ];
+
+  const name = variable.slice(1);
+  if (name !== component && !name.startsWith(`${component}-`)) {
+    return `does not start with the component "${component}"`;
+  }
+
+  let rest = name.slice(component.length).replace(/^-/, '');
+
+  const state = [...registries.states]
+    .sort((a: string, b: string) => b.length - a.length)
+    .find((candidate: string) => rest === candidate || rest.endsWith(`-${candidate}`));
+  if (isColors && !state) return 'no state segment (rest is mandatory in _colors.scss)';
+  if (state) rest = rest.slice(0, -state.length).replace(/-$/, '');
+
+  const slot = [...allowedSlots]
+    .sort((a, b) => b.length - a.length)
+    .find((candidate) => rest === candidate || rest.endsWith(`-${candidate}`));
+  if (!slot) {
+    return `no ${isColors ? 'part' : 'size slot'} found in "${rest || '(empty)'}"`;
+  }
+  rest = rest.slice(0, -slot.length).replace(/-$/, '');
+
+  /*
+   * The middle is consumed greedily, longest match first, because sub-elements and modifiers are
+   * hyphenated words themselves: `clear-button`, `icon-container`, `with-label`. Validating segment
+   * by segment would reject every one of them ("clear" is not a sub-element — but `clear-button` is).
+   */
+  const ordered = [...middleWords].sort((a, b) => b.length - a.length);
+  let middle = rest;
+  while (middle) {
+    const word = ordered.find((candidate) => middle === candidate
+      || middle.startsWith(`${candidate}-`));
+    if (!word) {
+      return `"${middle}" is neither a sub-element of ${component} nor a modifier`;
+    }
+    middle = middle.slice(word.length).replace(/^-/, '');
+  }
+  return null;
+};
+
+test('migrated components follow the grammar strictly', () => {
+  const migrated: string[] = registries.migrated;
+  const offenders: string[] = [];
+
+  parsedFiles.forEach(({ file, folder, declarations }) => {
+    const component = components[folder];
+    if (!component || !migrated.includes(component)) return;
+    const isColors = file.endsWith('_colors.scss');
+    const mirrors = starredBaseParameters(file);
+
+    declarations.forEach((variable) => {
+      if (isThemeIdentity(variable)) return;
+      if (mirrors.has(variable)) return;
+      const violation = grammarViolation(variable, component, isColors);
+      if (violation) offenders.push(`${file} ${variable}: ${violation}`);
+    });
+  });
+
+  expect(offenders).toEqual([]);
+});
+
+test('the rename mapping stays collision-free and fully applied', () => {
+  // Mirrors `node tools/naming/rename.mjs --check --residue` so CI enforces it too: a batch that is
+  // half-applied, or two batches mapping onto one name, must not survive a green test run.
+  const mapping = JSON.parse(
+    readFileSync(join(packageRoot, 'tools', 'naming', 'mapping.json'), 'utf8'),
+  );
+  const pairs: [string, string][] = Object.values(mapping.batches)
+    .flatMap((names) => Object.entries(names as Record<string, string>)) as [string, string][];
+
+  const targets = pairs.map(([, to]) => to);
+  expect(targets.filter((to, index) => targets.indexOf(to) !== index)).toEqual([]);
+
+  const declaredEverywhere = new Set(parsedFiles.flatMap(({ declarations }) => declarations));
+  const referencedEverywhere = new Set(parsedFiles.flatMap(({ references }) => references));
+  const survivors = pairs
+    // An identity entry (already correct, recorded for the record) can never disappear.
+    .filter(([from, to]) => from !== to)
+    .map(([from]) => from)
+    .filter((from) => declaredEverywhere.has(from) || referencedEverywhere.has(from));
+  expect(survivors).toEqual([]);
+});
+
+// ---------------------------------------------------------------------------------------------
+// ratchets
+// ---------------------------------------------------------------------------------------------
+
+if (updatingBaseline) {
+  test('baseline regenerated', () => {
+    writeFileSync(baselinePath, `${JSON.stringify(findings, null, 2)}\n`);
+    expect(true).toBe(true);
+  });
+} else {
+  const baseline = JSON.parse(readFileSync(baselinePath, 'utf8'));
+
+  Object.keys(findings).forEach((check) => {
+    test(`${check} does not regress`, () => {
+      expect(findings[check as keyof typeof findings]).toEqual(baseline[check]);
+    });
+  });
+}
diff --git a/packages/devextreme-scss/tests/unused-elements.test.ts b/packages/devextreme-scss/tests/unused-elements.test.ts
index 01b22c670cba..96f0aae9a6e3 100644
--- a/packages/devextreme-scss/tests/unused-elements.test.ts
+++ b/packages/devextreme-scss/tests/unused-elements.test.ts
@@ -49,7 +49,9 @@ const removeAllCommentsFromContent = (content: string): string => content
 
 const extractVariables = (filePath: string): string[] => {
   const content = removeAllCommentsFromContent(readFileSync(filePath, 'utf8'));
-  const regex = new RegExp(`\\$[${VAR_NAME_CHARS}]+`, 'g');
+  // `ds.$…` references point to the generated design-tokens module
+  // (scss/_design-system/variables/_ds.scss) and are not theme-local variables.
+  const regex = new RegExp(`(?<!ds\\.)\\$[${VAR_NAME_CHARS}]+`, 'g');
   return content.match(regex) ?? [];
 };
 
@@ -85,7 +87,7 @@ test('There are no unused images in repository', () => {
   expect(fullImagesFileList).toEqual(usedImagesFileList);
 });
 
-['generic', 'material', 'fluent'].forEach((themeName) => {
+['generic', 'material', 'fluent', 'fluent-next'].forEach((themeName) => {
   test(`There are no unused variables in ${themeName} SCSS files`, () => {
     const baseScssFiles = getFilesFromDirectory(join('scss', 'widgets', 'base'), ['.scss'])
       .map((fileName) => resolve(fileName));
@@ -102,10 +104,16 @@ test('There are no unused images in repository', () => {
 
     const uniqueVariables = findUniqueVariables(variables);
 
-    const exclusions: { generic: string[]; material: string[]; fluent: string[] } = {
+    const exclusions: {
+      generic: string[];
+      material: string[];
+      fluent: string[];
+      'fluent-next': string[];
+    } = {
       generic: [],
       material: [],
       fluent: [],
+      'fluent-next': [],
     };
 
     expect(uniqueVariables).toEqual(exclusions[themeName]);
diff --git a/packages/devextreme-scss/tools/naming/derive-registries.mjs b/packages/devextreme-scss/tools/naming/derive-registries.mjs
new file mode 100644
index 000000000000..06430a4c5683
--- /dev/null
+++ b/packages/devextreme-scss/tools/naming/derive-registries.mjs
@@ -0,0 +1,955 @@
+/*
+ * Regenerates tools/naming/registries.json — the single source of truth for the fluent-next
+ * SCSS naming standard (scss/widgets/fluent-next/NAMING.md).
+ *
+ *   node tools/naming/derive-registries.mjs        # writes registries.json
+ *   node tools/naming/derive-registries.mjs --check # fails if the committed file is stale
+ *
+ * Vocabularies that describe the design system (parts, states, sub-element anatomy) are DERIVED
+ * from the generated token package, so they cannot drift from it. Judgment calls (component
+ * exceptions, chassis dependents, rejected synonyms) live in OVERRIDES below and are reviewed as
+ * code. Run `pnpm nx build:tokens devextreme-scss` first — this script reads generated output.
+ */
+
+import { readFileSync, writeFileSync, readdirSync, statSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const here = dirname(fileURLToPath(import.meta.url));
+const packageRoot = join(here, '..', '..');
+const themeDir = join(packageRoot, 'scss', 'widgets', 'fluent-next');
+const componentTokens = join(packageRoot, 'scss', '_design-system', 'fluent', 'components', 'theme.scss');
+const output = join(here, 'registries.json');
+
+// ---------------------------------------------------------------------------------------------
+// Judgment calls. Everything else in registries.json is derived.
+// ---------------------------------------------------------------------------------------------
+
+const OVERRIDES = {
+  // folder -> component, only where kebab(folder) is not the component name
+  components: {
+    gridBase: 'grid', // shared grid chassis; matches the package's grid-cell / grid-row / grid-view family
+    menuBase: 'menu', // shared chassis of menu / contextMenu / dropDownMenu
+    icons: 'icon', // matches the package's icon-* family
+  },
+
+  /*
+   * Folders that own no component: they are the system tier or bundle configuration.
+   *
+   * `typography/` is here rather than in `components` because there is no dxTypography widget: the
+   * folder holds the theme's TYPE SCALE (xs…xl, heading-1…6) plus the `.dx-typography-*` utility
+   * classes that publish it. Five folders read the scale, it describes no widget's anatomy, and
+   * `typography` is a registered concern — the common/ criterion, satisfied without moving anything.
+   * Moving the declarations into common/ was tried and reverted: it pulled common/ earlier in the
+   * load order and shifted `--dx-line-height` inside its :root block, i.e. it changed the emitted CSS.
+   */
+  systemFolders: ['common', 'typography'],
+
+  // component -> folder that is allowed to declare it (O2: exactly one declaration home).
+  // Only needed where more than one folder currently declares the component's variables.
+  declarationHome: {
+    grid: 'gridBase',
+  },
+
+  // O5: a chassis may be read by its dependents, and only for the chassis component's variables.
+  // Dependents are widgets that literally render the chassis widget — not "whatever reads it today".
+  chassis: {
+    gridBase: {
+      component: 'grid',
+      dependents: ['dataGrid', 'treeList', 'pivotGrid', 'cardView'],
+    },
+    /*
+     * The declaration home is `menu/`, not `menuBase/`: menu/ declares the whole $menu-* colour set
+     * and menuBase/ consumes it (it declared exactly one name, which moved to menu/). The first
+     * version of this registry had the direction backwards.
+     */
+    menu: {
+      component: 'menu',
+      dependents: ['menuBase', 'contextMenu', 'dropDownMenu'],
+    },
+    /*
+     * Button is a chassis for its control metrics (height, icon size, icon margin): the dependents
+     * below render real button affordances and must match Button pixel for pixel. The values used to
+     * sit in the theme root, which hid the coupling — moving them here made it explicit.
+     *
+     * Watch the size of this list. If it keeps growing, that is evidence these three are not button
+     * anatomy at all but global control metrics, and they belong in the `global` concern instead.
+     */
+    button: {
+      component: 'button',
+      /*
+       * The exception is really per-READ, not per-folder: it applies when the reader paints the chassis
+       * widget's OWN element. `buttonGroup` and `speedDialAction` ARE buttons; `scheduler` restyles a
+       * real `.dx-button` in its dropdown-appointment block by feeding Button's text-mode palette into
+       * `dx-button-flat-color-styling`, which is the same thing. `diagram` and `calendar` are NOT here:
+       * they use Button's colours on SVG strokes and on calendar cells, i.e. on things that are not
+       * buttons, and for those O4 applies — their own variable on the same token.
+       *
+       * The enforcer can only encode this per folder, so a folder goes in when its reads are of the
+       * first kind, and this comment records which element justified it.
+       */
+      dependents: [
+        'buttonGroup', 'chat', 'contextMenu', 'gridBase', 'htmlEditor', 'list', 'menu', 'menuBase',
+        'pivotGrid', 'scheduler', 'speedDialAction', 'stepper', 'toolbar',
+      ],
+    },
+    textEditor: {
+      component: 'text-editor',
+      /*
+       * `gridBase` is in the list because a grid cell in edit mode IS a text editor: the grid has to
+       * match the editor's input padding and the footprint of its invalid badge, or the cell jumps
+       * when it turns into an editor.
+       */
+      dependents: [
+        'textBox', 'textArea', 'numberBox', 'dateBox', 'dateRangeBox', 'selectBox',
+        'autocomplete', 'lookup', 'tagBox', 'colorBox', 'dropDownBox', 'dropDownEditor',
+        'dropDownList', 'gridBase',
+      ],
+    },
+    /*
+     * dropDownEditor is a base class in the widget hierarchy exactly as textEditor is — SelectBox,
+     * Lookup, DateBox, ColorBox and TagBox all extend it — so the same reasoning applies. `gridBase`
+     * is here for the same reason as above: a grid cell in edit mode renders a real drop-down editor.
+     */
+    dropDownEditor: {
+      component: 'drop-down-editor',
+      dependents: [
+        'selectBox', 'lookup', 'dateBox', 'colorBox', 'dropDownBox', 'dropDownList', 'tagBox',
+        'autocomplete', 'gridBase',
+      ],
+    },
+  },
+
+  /*
+   * O4's counterpart: folder -> components it RENDERS, with the element that proves it. A read of a
+   * component listed here is matching a widget the reader contains, not borrowing a value that
+   * happened to look right. Everything not listed stays a violation.
+   */
+  embeds: {
+    // .dx-toolbar-menu renders a real List; the toolbar's own buttons match its item height
+    toolbar: ['list'],
+    // .dx-scheduler-dropdown-appointments renders a List, the header a Toolbar, the appointment
+    // tooltip a Tooltip, and the recurrence editor real radio groups
+    scheduler: ['list', 'toolbar', 'tooltip', 'radio-group'],
+    // the column chooser is a Popup, its message a menu item, the revert tooltip a validation message
+    gridBase: ['popup', 'menu', 'validation'],
+    // .dx-htmleditor-toolbar is a Toolbar, the image dialog a Popup with a FileUploader inside
+    'html-editor': ['toolbar', 'popup', 'file-uploader', 'text-editor'],
+    htmlEditor: ['toolbar', 'popup', 'file-uploader', 'text-editor'],
+    // the confirmation dialog is a Popup, the message box a text editor
+    chat: ['popup', 'text-editor'],
+    // a fieldset field is whatever control it wraps: checkBox, switch, slider or a form label
+    fieldset: ['check-box', 'switch', 'slider', 'form'],
+    /*
+     * List items render real check boxes and radio buttons in selection modes, and
+     * `.dx-list-with-search` puts a real TextBox above them — the scroll area's height is computed
+     * from that editor's min-height.
+     */
+    list: ['check-box', 'radio-button', 'text-editor'],
+    // the colour box's drop-down content IS a ColorView
+    colorBox: ['color-view'],
+    // the field chooser's tree is a TreeView
+    pivotGrid: ['tree-view'],
+    // the pager sits inside the grid's chrome and aligns with its cell padding
+    pagination: ['grid'],
+    // gantt renders the grid's tree list on the left and form labels in its dialogs
+    gantt: ['grid', 'form'],
+    // a range slider is two slider handles
+    rangeSlider: ['slider'],
+    // .dx-scrollview wraps a Scrollable
+    scrollView: ['scrollable'],
+    // the validation message is positioned against the editor it belongs to
+    validation: ['text-editor'],
+    filterBuilder: ['text-editor'],
+    // the file manager's toolbar is a Toolbar
+    fileManager: ['toolbar'],
+    // the editor's spin buttons are real Buttons
+    textEditor: ['button'],
+  },
+
+  // System-tier concerns (common/). Each must map to a non-component token family.
+  systemConcerns: [
+    // Foundation values shared by the whole theme: icon size, base font size, border radius/width.
+    // Named `global` after the package's own family (--dxds-global-border-radius-default,
+    // --dxds-global-color-focus, --dxds-global-spacing-item-gap-*). The obvious alternatives —
+    // `typography`, `icon`, `widget` — all collide with a component name.
+    'global',
+    /*
+     * `palette` is the ONE concern whose names carry no part and no state, because the value is
+     * deliberately role-free. `common/_index.scss` exposes a complete 4x3 matrix of utility classes
+     * — accent / text / bg / border-color, each applied as `color`, as `background-color` + `fill`,
+     * and as `border-color` (.dx-theme-accent-as-border-color and friends). Giving such a value a
+     * part would make the name lie in two roles out of three, and giving each role its own value
+     * would break the contract those classes advertise: "this exact colour, used as X".
+     * Values that turned out to have a single real role are NOT here — they became role-honest
+     * names instead (typography colour -> $global-content-rest, the badge colours -> the badge
+     * concerns below).
+     */
+    'palette',
+    // Cross-cutting decorations several widgets draw but none of them owns — same class of thing as
+    // `focus-rect`: the invalid/valid validation badges, drawn by a mixin in common/ and used by the
+    // editor family plus fieldset.
+    'invalid-badge',
+    'valid-badge',
+    'focus-rect', // ds.$focus-rect-color-*
+    'shadow', // ds.$color-shadow-* / ds.$box-shadow-*
+    'typography', // ds.$font-* / ds.$line-height-*
+    'separator', // ds.$separator-color
+    'backdrop', // ds.$color-surface-backdrop-*
+    'surface', // ds.$color-surface-neutral-*
+    'state', // ds.$opacity-* for disabled/readonly conventions
+    'motion',
+  ],
+
+  // Bundle configuration and theme identity: exempt from the component-prefix rule.
+  // They are string-concatenated into .dx-theme-marker, which themes.current() parses at runtime,
+  // and named by build/bundle-template.fluent-next.scss (see GOTCHAS.md §5).
+  themeIdentity: [
+    '$color', '$mode', '$size', '$accent',
+    '$fluent-color-accent-modificator', '$fluent-color-theme-modificator', '$fluent-size-postfix',
+  ],
+
+  // Folders exempt from the standard, with the reason recorded in NAMING.md.
+  exemptFolders: {
+    cardView: 'own cross-theme BEM system on null !default base variables; renaming it would '
+      + 'require touching generic/material/fluent, which breaks the byte-identity constraint',
+  },
+
+  // Segments the package puts in the part slot that are NOT parts: they are variant or state
+  // words leaking into it (upstream defects, see DIVERGENCES.md). Excluded from PARTS.
+  partExclude: [
+    'default', 'selected', 'hidden', 'invalid', 'range', 'pre', 'group', 'none', 'alt',
+    'inverted', 'edge', 'center', 'disable', 'static', 'dragged', 'transparent',
+  ],
+
+  // Parts the package lacks a clean name for, or that the derivation below cannot recover.
+  partsAdd: [
+    'outline', // outline-color of a focus ring; the package models it as the focus-rect component
+    // The derivation keeps only the last segment of the part slot, so these two collapse to `icon`.
+    // Both exist in the package (8 tokens each), e.g. menu-item-color-selected-start-icon-active.
+    'start-icon',
+    'end-icon',
+    /*
+     * An opacity that branches on $mode has to live in _colors.scss (the only file with $mode in
+     * scope), so `opacity` is a part as well as a size slot — resolved by file, like `content`.
+     */
+    'opacity',
+    // Shadow *colors*: the package keeps them in the semantic tier (color-shadow-ambient / -key)
+    // and its component tokens spell them box-shadow-layer-N-color, which has no part slot at all.
+    'shadow',
+    // A drop shadow is two paint slots, not one: the ambient layer and the key layer carry different
+    // colours (ds.$color-shadow-ambient / -key). `rejected.parts` already redirected the legacy
+    // color1/color2 spelling here.
+    'shadow-ambient',
+    'shadow-key',
+  ],
+
+  // A button inside another widget is a nested component (anatomy rule 3), not a part.
+  partsRemove: ['button'],
+
+  states: [
+    'rest', 'hovered', 'active', 'focused',
+    'selected', 'selected-hovered', 'selected-active', 'selected-focused',
+    'disabled', 'read-only',
+  ],
+
+  modifiers: {
+    // data-driven mode
+    value: [
+      'checked', 'unchecked', 'indeterminate', 'invalid', 'opened', 'expanded', 'collapsed',
+      'empty', 'current', 'allday', 'recurrent', 'rtl', 'pending', 'modified', 'removed', 'alternation',
+      // The DOM condition .dx-texteditor-with-label / .dx-texteditor-with-floating-label: an inner
+      // label changes the input padding. It spans two labelMode values (static and floating), so no
+      // single option value names it — the DOM class is the discoverable spelling.
+      'with-label',
+      // .dx-menu-item-has-icon: a menu item that reserves room for an icon
+      'with-icon',
+      // .dx-popup-title present: the content box loses the padding the title already provides
+      'with-title',
+      // Switch.value rendered as .dx-switch-on-value / -off-value, and the two label boxes inside
+      'on', 'off',
+      // RadioGroup.layout / Tabs.orientation and friends
+      'horizontal', 'vertical',
+      // .dx-device-phone: the phone-sized variant of a roller or item
+      'phone',
+      // Pagination.displayMode: 'compact' is what renders .dx-light-mode
+      'compact',
+      // Scheduler appointment variants: the short-layout flag and the duration steps behind
+      // .dx-scheduler-appointment-has-resource / the 10..25-minute layouts
+      'small', 'dragging', 'inverted', 'first-month', 'other-month',
+      // calendar cell states drawn as classes, and the two htmlEditor overlay variants
+      'contoured', 'faded', 'legacy',
+      // `.dx-calendar-other-view` — a cell belonging to the neighbouring month
+      'other',
+      // the two step appearances Stepper draws, and the two treeView border variants
+      'base', 'accent', 'with-border', 'border-visible',
+      // .dx-list-slide-menu-button-delete vs -menu
+      'delete', 'menu',
+      // Chat's secondary cancel button, pivotGrid's sorted field, and the two/three-group cells
+      'secondary', 'sorted', 'two', 'three',
+      // `:first-child` — a DOM position, used where the first cell or page needs its own metric
+      'first-child', 'first',
+      // `.dx-position-indicator-last` — the drop indicator after the last field
+      'last',
+      // the middle dot of Chat's typing indicator, which is larger than the outer two
+      'center',
+      // `.dx-filemanager-progress-box-without-close-button`, and the drawer panel's initial width
+      'without-close-button', 'initial',
+      // Chat's message-group alignment, FileUploader.showFileList and its cancel-button position,
+      // and Form's labelLocation
+      'alignment-start', 'alignment-end', 'show-file-list', 'position-end', 'position-start',
+      'location-left', 'location-right',
+      '10min', '15min', '20min', '25min', 'adaptive', 'transparent',
+      // More DOM/device conditions that change geometry, same class as with-label:
+      'touch-friendly', // .dx-device-touch-friendly
+      'adaptive', // adaptive layout of date/color pickers
+      'with-clear', // the editor also shows a clear button
+    ],
+    // `type` option. Both `danger` (Button.type) and `error` (Toast.type) are here because the
+    // rule is "the value the API uses", and the two widgets spell the same intent differently.
+    intent: ['normal', 'default', 'danger', 'error', 'success', 'warning', 'info'],
+    // `stylingMode` / `labelMode` / `mode` options
+    appearance: [
+      'contained', 'outlined', 'text', 'filled', 'underlined', 'floating', 'static',
+      'hidden', // .dx-…-border-hidden: the collapsed-border variant of a grid
+      'with-icons', // command column that also shows icons
+      'outside', // labelMode: 'outside'
+      'primary', 'secondary', // Tabs.stylingMode
+      'thin', // the always-visible thin scrollbar variant base draws for showScrollbar
+      // TabPanel.tabsPosition: which side the strip sits on decides which border faces the content.
+      // The option value is used rather than a logical axis, because the side is a variant here, not
+      // a property — and `left` under RTL is still the `left` value of the option.
+      'top', 'bottom', 'left', 'right',
+    ],
+  },
+
+  /*
+   * Allowed slots in _sizes.scss: real CSS properties plus four abstract nouns (`size` = a square
+   * width+height, `gap`, `offset`, `spacing`).
+   *
+   * This is a curated list, not the whole CSS spec, on purpose: `known-css-properties` is only a
+   * transitive dependency of stylelint here, and adding it as a direct one would touch the shared
+   * lockfile for a validation nicety. The list grows one entry at a time as components migrate, and
+   * every addition is a reviewed diff — which is also what keeps physical axes out (`margin-left`
+   * is a real CSS property but is deliberately absent, see the logical-axes rule in NAMING.md).
+   */
+  sizeSlots: [
+    'size', 'gap', 'offset', 'spacing',
+    /*
+     * A one-dimensional decoration has a length and a thickness that map to width or height
+     * depending on orientation — Tabs' selection indicator is set as `width` when the strip is
+     * horizontal and as `height` when it is vertical, so a physical slot would lie in half the cases.
+     * `min-size` is the square minimum of an element sized by min-width AND min-height together.
+     */
+    'length', 'thickness', 'min-size',
+    // Chat lays its message rows out on a grid, and the theme owns the column template
+    'grid-template-columns',
+    'padding', 'padding-inline', 'padding-block',
+    'padding-inline-start', 'padding-inline-end', 'padding-block-start', 'padding-block-end',
+    'margin', 'margin-inline', 'margin-block',
+    'margin-inline-start', 'margin-inline-end', 'margin-block-start', 'margin-block-end',
+    'width', 'min-width', 'max-width', 'height', 'min-height', 'max-height',
+    'border', 'border-width', 'border-radius', 'border-style',
+    'border-block-start', 'border-block-end',
+    'border-inline-start', 'border-inline-end',
+    'border-start-start-radius', 'border-start-end-radius',
+    'border-end-start-radius', 'border-end-end-radius',
+    'border-block-start-width', 'border-block-end-width',
+    'inset-block-start', 'inset-block-end', 'inset-inline-start', 'inset-inline-end',
+    'inset-inline', 'inset-block',
+    // the blur length of a box-shadow, when a theme needs it apart from the composite
+    'box-shadow-blur',
+    'border-inline-start-width', 'border-inline-end-width',
+    'font-size', 'font-weight', 'font-family', 'line-height', 'letter-spacing',
+    'text-transform', 'text-decoration',
+    'opacity', 'box-shadow', 'outline', 'outline-offset', 'outline-width',
+    'column-gap', 'row-gap', 'z-index', 'transition', 'transform', 'inset',
+  ],
+
+  /*
+   * Physical spellings that are only rejected in the SLOT position, i.e. as the last segment. The same
+   * words are legal variants earlier in a name (`$tabs-tab-top-border` is TabPanel's tabsPosition,
+   * `$slider-label-bottom-padding-block-end` is the label position), so a global replacement would
+   * corrupt them.
+   */
+  rejectedTrailing: {
+    // the box-model longhands have to be listed too: without them the bare `top` below matches
+    // `margin-top` and turns it into `margin-inset-block-start`
+    'margin-top': 'margin-block-start',
+    'margin-bottom': 'margin-block-end',
+    'margin-left': 'margin-inline-start',
+    'margin-right': 'margin-inline-end',
+    'padding-top': 'padding-block-start',
+    'padding-bottom': 'padding-block-end',
+    'padding-left': 'padding-inline-start',
+    'padding-right': 'padding-inline-end',
+    top: 'inset-block-start',
+    bottom: 'inset-block-end',
+    left: 'inset-inline-start',
+    right: 'inset-inline-end',
+    'border-top': 'border-block-start',
+    'border-bottom': 'border-block-end',
+    'border-left': 'border-inline-start',
+    'border-right': 'border-inline-end',
+    'border-top-width': 'border-block-start-width',
+    'border-bottom-width': 'border-block-end-width',
+    'border-left-width': 'border-inline-start-width',
+    'border-right-width': 'border-inline-end-width',
+    'border-top-left-radius': 'border-start-start-radius',
+    'border-top-right-radius': 'border-start-end-radius',
+    'border-bottom-left-radius': 'border-end-start-radius',
+    'border-bottom-right-radius': 'border-end-end-radius',
+  },
+
+  /*
+   * Segments that name nothing and are simply dropped. `root` and `element` mean "the widget's own
+   * box", which the grammar expresses by having no sub-element at all; `state` is the `.dx-state-*`
+   * class whose meaning the state suffix already carries; `common` and `renovation` are grouping and
+   * implementation words with no DOM counterpart (base's `$datagrid-common-*` family is the same
+   * thing).
+   */
+  droppedSegments: ['root', 'state', 'common', 'renovation'],
+
+  /*
+   * Squashed compounds, applied before anything else: the legacy names spell nested widgets and
+   * multi-word boxes without hyphens (`treeview-item`, `contextmenu`, `numberbox`), and every one of
+   * them has a canonical hyphenated form the registry already knows. Normalising here keeps the
+   * registry free of the non-canonical spellings.
+   */
+  rejectedSpellings: {
+    treeview: 'tree-view',
+    contextmenu: 'context-menu',
+    fileuploader: 'file-uploader',
+    filemanager: 'file-manager',
+    numberbox: 'number-box',
+    textbox: 'text-box',
+    datebox: 'date-box',
+    checkbox: 'checkbox',
+    viewmode: 'view-mode',
+    messagelist: 'message-list',
+    messagebox: 'message-box',
+    messagegroup: 'message-group',
+    typingindicator: 'typing-indicator',
+    filename: 'file-name',
+    falename: 'file-name',
+    boxshadow: 'box-shadow',
+    dropzone: 'drop-zone',
+    pagesizes: 'page-sizes',
+    pageindex: 'page-index',
+    grouppanel: 'group-panel',
+    alldaypanel: 'all-day-panel',
+    colorview: 'color-view',
+    colorbox: 'color-box',
+    radiogroup: 'radio-group',
+    radiobutton: 'radio-button',
+    tabpanel: 'tab-panel',
+    loadindicator: 'load-indicator',
+    scrollview: 'scroll-view',
+    searchbox: 'search-box',
+    holdmenu: 'hold-menu',
+    menucontent: 'menu-content',
+    aidialog: 'ai-dialog',
+    progressbar: 'progress-bar',
+    progressbox: 'progress-box',
+    // squashed in the legacy pivotGrid names; the trailing `color` then resolves like any other
+    totalcolor: 'total-color',
+    grandtotalcolor: 'grand-total-color',
+    pivotgridfieldchooser: 'field-chooser',
+    htmleditor: 'html-editor',
+    speeddialaction: 'speed-dial-action',
+    buttongroup: 'button-group',
+    dropdownbutton: 'drop-down-button',
+    dropdownmenu: 'drop-down-menu',
+    tooltipbutton: 'tooltip-button',
+  },
+
+  // old spelling -> canonical. Drives the codemod and the failure messages of the enforcer.
+  rejected: {
+    parts: {
+      background: 'bg',
+      'background-color': 'bg',
+      bgcolor: 'bg',
+      fill: 'bg',
+      'fill-color': 'bg',
+      'border-color': 'border',
+      bordercolor: 'border',
+      'text-color': 'content',
+      foreground: 'content',
+      fg: 'content',
+      'icon-color': 'icon',
+      'glyph-color': 'icon',
+      'shadow-color': 'shadow',
+      color1: 'shadow-ambient',
+      color2: 'shadow-key',
+      // the same two layers, spelled out in pivotGrid and gridBase
+      'first-shadow-color': 'shadow-ambient',
+      'second-shadow-color': 'shadow-key',
+      'shader-bg': 'backdrop',
+      scrim: 'backdrop',
+      'divider-color': 'separator',
+      'handle-bg': 'trigger',
+      'left-icon': 'start-icon',
+      'right-icon': 'end-icon',
+    },
+    // A variant word the CSS class spells with a `mode-` prefix; the option value is the canonical one.
+    modifiers: {
+      'mode-contained': 'contained',
+      'mode-outlined': 'outlined',
+      'mode-text': 'text',
+    },
+    states: {
+      hover: 'hovered',
+      focus: 'focused',
+      pressed: 'active',
+      activated: 'active',
+      readonly: 'read-only',
+      idle: 'rest',
+      'selected-hover': 'selected-hovered',
+    },
+    properties: {
+      'horizontal-padding': 'padding-inline',
+      'side-padding': 'padding-inline',
+      'padding-horizontal': 'padding-inline',
+      'vertical-padding': 'padding-block',
+      'padding-vertical': 'padding-block',
+      'padding-start': 'padding-inline-start',
+      'padding-end': 'padding-inline-end',
+      'padding-left': 'padding-inline-start',
+      'padding-right': 'padding-inline-end',
+      'padding-top': 'padding-block-start',
+      'padding-bottom': 'padding-block-end',
+      'horizontal-margin': 'margin-inline',
+      'vertical-margin': 'margin-block',
+      'margin-left': 'margin-inline-start',
+      'margin-right': 'margin-inline-end',
+      'margin-top': 'margin-block-start',
+      'margin-bottom': 'margin-block-end',
+      paddings: 'padding',
+      margins: 'margin',
+      radius: 'border-radius',
+      rounding: 'border-radius',
+      'border-size': 'border-width',
+      'min-heigth': 'min-height', // upstream typo
+      'text-size': 'font-size',
+      'text-weight': 'font-weight',
+      shadow: 'box-shadow',
+      dimension: 'size',
+    },
+  },
+
+  // Components whose variables already follow the standard. Only these are checked strictly;
+  // everything else is compared against the known-violations snapshot. Grows one batch at a time.
+  migrated: [
+    'toast', 'button', 'text-editor',
+    'text-box', 'text-area', 'number-box', 'date-box', 'date-range-box', 'select-box',
+    'lookup', 'tag-box', 'color-box', 'drop-down-editor', 'drop-down-list',
+    'grid', 'data-grid', 'tree-list',
+    // waves C11-C12, the finished tails
+    'switch', 'date-view', 'gallery',
+    'typography', 'toolbar', 'overlay', 'informer', 'scroll-view', 'context-menu', 'fieldset',
+    'menu', 'progress-bar', 'load-indicator', 'drop-down-menu',
+    // wave C9, the small folders
+    'accordion', 'action-sheet', 'box', 'button-group', 'load-panel', 'tile-view', 'validation',
+    'tooltip', 'radio-button', 'scrollable', 'drop-down-button', 'badge', 'card', 'icon', 'popover',
+    'splitter', 'splitter-bar', 'sortable', 'tab-panel',
+  ],
+
+  /*
+   * DOM anatomy per component, filled at the moment the component migrates (reviewed diff).
+   */
+  // Names must not collide with a state; colliding with a part is fine (see assertParseable).
+  subElements: {
+    toast: ['content', 'icon', 'item', 'stack'],
+    // .dx-icon and .dx-button-text are real boxes inside a button; `icon` is also a part, which
+    // is allowed — the grammar resolves it by position (see assertParseable).
+    button: ['icon', 'text', 'content'],
+    'text-box': ['search', 'search-bar', 'icon'],
+    // Wave C9: the small folders. Every word below is a DOM box of that widget (.dx-accordion-item-title,
+    // .dx-actionsheet-item, .dx-tile, .dx-radio-value-container, …), not a re-spelling of a part.
+    accordion: ['title', 'body', 'item', 'icon'],
+    'action-sheet': ['item'],
+    box: ['item', 'content'],
+    'button-group': ['item'],
+    'load-panel': ['content'],
+    'tile-view': ['tile', 'wrapper'],
+    validation: ['message', 'summary', 'summary-item', 'overlay'],
+    tooltip: ['overlay', 'content', 'popup', 'arrow'],
+    popover: ['popup', 'title'],
+    splitter: ['resize-handle', 'icon'],
+    'splitter-bar': ['icon'],
+    sortable: ['clone', 'source', 'placeholder', 'placeholder-inside'],
+    'tab-panel': ['tabs'],
+    icon: ['pulldown'],
+    'radio-button': ['icon', 'dot', 'value-container'],
+    scrollable: ['scroll', 'scrollbar'],
+    'drop-down-button': ['action', 'toggle', 'spindown-icon', 'icon', 'item'],
+    /*
+     * Wave C10. Every word is a DOM box of that widget, read off its selectors — `.dx-checkbox-icon`,
+     * `.dx-list-item-ghost-…`, `.dx-pager .dx-page`, `.dx-toolbar-label`, `.dx-treeview-node`, and so
+     * on. Compounds (`group-header`, `nav-button`, `pull-down`) are one anatomy level, not two.
+     */
+    'check-box': ['icon', 'mark', 'arrow', 'arrow-icon', 'container'],
+    switch: ['handle', 'container', 'inner'],
+    /*
+     * `menu-items-container` sits next to `items-container` on purpose: base/_contextMenu.scss draws
+     * `.dx-context-menu .dx-menu-items-container` with its own parameter, and contextMenu/_index.scss
+     * draws the SAME element again with its own value, which wins on order. Two variables for one
+     * padding, with different values — see DIVERGENCES.md.
+     */
+    'context-menu': ['item', 'items-container', 'menu-items-container', 'separator', 'content',
+      'text'],
+    'drop-down-menu': ['section', 'list', 'popup', 'content'],
+    'date-view': ['roller', 'item', 'year', 'month', 'hours-colon'],
+    'time-view': ['clock', 'digits', 'field', 'number-box', 'input', 'time-separator', 'spin',
+      'format12'],
+    fieldset: ['field', 'label', 'value', 'header', 'attention-icon', 'radio-group'],
+    'radio-group': ['radio-button', 'collection', 'value-container'],
+    'progress-bar': ['status', 'range', 'container', 'label'],
+    menu: ['item', 'icon', 'text', 'separator', 'popup', 'tree-view', 'node', 'content', 'link'],
+    slider: ['bar', 'handle', 'inner', 'track', 'tooltip', 'label', 'wrapper'],
+    gallery: ['indicator', 'indicator-item', 'nav-button', 'nav-arrow', 'nav-icon', 'item',
+      'button'],
+    list: [
+      'item', 'group', 'group-header', 'header-indicator', 'hold-menu', 'ghost', 'menu-button',
+      'next-button', 'delete-button', 'select-all', 'select-all-separator', 'search-box', 'message',
+      'badge-container', 'slide-menu', 'slide-menu-button', 'context-menu', 'context-menu-content',
+      'items', 'toggle-delete', 'response-wait', 'separator',
+    ],
+    toolbar: ['item', 'label', 'separator', 'section', 'menu', 'group', 'button', 'text',
+      'text-editor'],
+    tabs: ['tab', 'item', 'icon', 'nav-button', 'content', 'badge'],
+    'tree-view': [
+      'item', 'item-element', 'node', 'checkbox', 'checkbox-container', 'container', 'toggle-item',
+      'select-all-item', 'search-box', 'search-editor', 'load-indicator', 'spin', 'border',
+      'control',
+    ],
+    popup: ['title', 'content', 'toolbar', 'toolbar-item', 'toolbar-label', 'dialog', 'message',
+      'button'],
+    pagination: ['page', 'page-index', 'pages-count', 'page-sizes', 'separator', 'nav-button',
+      'navigate-button', 'nav', 'icon'],
+    'scroll-view': ['pocket', 'pull-down', 'scroll-bottom', 'indicator', 'image', 'text', 'icon',
+      'load-indicator'],
+    // .dx-fa-button / .dx-fa-button-label are the real class names of the floating action button
+    'speed-dial-action': ['main', 'button', 'label', 'fa-button', 'fa-button-label'],
+    /*
+     * Wave C16, the remaining composite widgets. Same rule as everywhere above: a word goes in only
+     * if it is a DOM box of that widget. Words that turned out to be variants live in MODIFIERS, and
+     * names carrying a physical `-left`/`-right` are left for the manual tail of each folder.
+     */
+    calendar: ['cell', 'header', 'week-day-header', 'week-number', 'week-number-cell', 'navigator',
+      'footer-button', 'view', 'element'],
+    chat: ['message-list', 'message-box', 'message', 'day-header', 'empty-view', 'avatar', 'bubble',
+      'file', 'file-name', 'file-container', 'files-container', 'suggestions', 'editing-preview',
+      'caption', 'delete-button', 'cancel-button', 'context-menu', 'icon', 'box', 'container',
+      'alert-list', 'prompt', 'textarea', 'toolbar', 'information', 'author-name', 'timestamp',
+      'typing-indicator', 'circle', 'bubble', 'group'],
+    'color-view': ['palette', 'palette-cell', 'hue-scale', 'hue-scale-cell', 'alpha', 'controls',
+      'container', 'label', 'handle', 'color-preview', 'preview', 'textbox', 'hex', 'overlay',
+      'content-box', 'bg-box'],
+    diagram: ['toolbar', 'toolbar-icon', 'toolbar-wrapper', 'title-toolbar', 'toolbox',
+      'context-toolbox', 'target', 'properties-panel', 'canvas', 'format', 'item', 'text', 'icon',
+      'image-icon', 'button', 'popup', 'title', 'content', 'load-indicator', 'loading-indicator',
+      'palette', 'color-view', 'hue-scale-cell', 'shape', 'selection-mark', 'input-container',
+      'accordion-item'],
+    'filter-builder': ['group', 'group-content', 'item', 'item-value', 'text', 'icon', 'action-icon',
+      'plus', 'plus-icon', 'remove', 'remove-icon', 'field', 'operation', 'operator', 'tree-view',
+      'tree-view-item',
+      'tree-view-node', 'toggle', 'toggle-item-visibility', 'editor', 'range-separator',
+      'scrollable'],
+    form: ['field-item', 'field-required', 'field-mark', 'label', 'label-icon', 'group',
+      'group-caption', 'group-content', 'help', 'help-text', 'mark', 'layout-manager', 'tabpanel',
+      'multiview', 'item', 'content', 'row', 'switch', 'caption-icon', 'custom-caption-icon'],
+    /*
+     * gantt's own class names are abbreviated upstream and the abbreviations are not documented
+     * anywhere: `.dx-gantt-hb` / `-vb` are the two splitters, `.dx-gantt-tm` / `-ti` the time marker
+     * and time indicator, `.dx-gantt-tPrg` the progress bar. They are registered as they are spelled
+     * in the DOM — inventing readable expansions would break the link to the selector.
+     */
+    gantt: ['task', 'task-res', 'task-title', 'task-progress', 'task-wrapper', 'task-edit-wrapper',
+      'edit-progress',
+      'parent-task', 'collapsable-row', 'splitter-bar', 'toolbar', 'toolbar-wrapper',
+      'toolbar-separator', 'title', 'view', 'row', 'si', 'hb', 'vb', 'tm', 'ti'],
+    'html-editor': ['toolbar', 'table', 'variable', 'mention', 'resize', 'resize-frame', 'cover',
+      'uploader', 'file-uploader', 'input-wrapper', 'wrapper', 'ai-dialog', 'content', 'icon', 'item',
+      'highlighted-row', 'code-block', 'placeholder', 'size-editor', 'add-image-dialog', 'separator',
+      'tabs', 'selects', 'title'],
+    'pivot-grid': ['area', 'area-field', 'fields-area-head', 'fields-area-head-cell', 'field-chooser',
+      'field', 'fields', 'expand-icon', 'row', 'column', 'cell', 'last-cell', 'header', 'headers',
+      'drag-header', 'total', 'grand-total', 'filter', 'sort', 'icon', 'chevron', 'chevron-icon',
+      'container', 'popup', 'content', 'search', 'item', 'text', 'border', 'box', 'toolbar', 'button',
+      'position-indicator', 'tree-view', 'tree-view-item', 'tree-view-node', 'tree-view-search',
+      'drag', 'checkbox', 'field-chooser-field', 'field-area-box', 'header-filter', 'indicators',
+      'data-area'],
+    stepper: ['step', 'step-indicator', 'step-label', 'label', 'connector', 'value', 'icon', 'text',
+      'item', 'container'],
+    'recurrence-editor': ['switch', 'repeat-end', 'item', 'container', 'label', 'until-date-box',
+      'count-number-box', 'interval-number-box', 'number-box', 'button-group', 'radio-group'],
+    /*
+     * Wave C15, scheduler. Every word below is a `.dx-scheduler-*` DOM box (the legacy names were
+     * built from those class names), with the compounds kept whole because that is how the class
+     * reads: `.dx-scheduler-appointment-tooltip-buttons`, `.dx-scheduler-header-panel-cell`, … The
+     * variant words that were mixed into the same position — `small`, the duration steps `10min`…
+     * `25min`, `dragging`, `inverted`, `first-month`, `other-month` — are modifiers instead, and the
+     * few names carrying a physical `-left`/`-right` are left for the manual tail.
+     */
+    scheduler: [
+      'appointment', 'appointment-content', 'appointment-collector', 'appointment-tooltip',
+      'appointment-popup', 'agenda', 'agenda-appointment', 'all-day-panel', 'all-day-table',
+      'all-day-title', 'common-collector', 'cell', 'table-cell', 'date-table', 'date-table-cell',
+      'time-panel', 'time-panel-cell', 'header', 'header-panel', 'header-panel-cell', 'header-day',
+      'header-panel-time-cell', 'header-panel-day', 'group-header', 'group-header-table-cell',
+      'group-separator', 'navigator', 'navigator-button', 'navigator-icon', 'toolbar', 'toolbar-item',
+      'tooltip', 'tooltip-title', 'tooltip-date', 'tooltip-subject', 'tooltip-marker',
+      'tooltip-content', 'tooltip-remove', 'workspace', 'workspace-month', 'workspace-info',
+      'workspace-date-table-cell', 'workspace-month-cell', 'workspace-month-header',
+      'workspace-month-timeline-time', 'timeline', 'timeline-date-table-cell', 'form', 'item',
+      'icon', 'icon-container', 'title', 'details', 'short-content', 'subject', 'date', 'marker',
+      'remove', 'strip', 'dropdown-button', 'dropdown-appointment', 'days-of-week-buttons',
+      'repeat-end-item', 'all-day-item', 'month', 'recurrence', 'recurring', 'date-time-indicator',
+      'separator', 'container', 'content', 'button', 'text', 'time', 'day', 'element', 'widget',
+      'time-cell', 'cell-date', 'panel', 'body', 'layout', 'column', 'scrollable-content',
+      'all-day-appointment', 'sidebar',
+      'group', 'last-group-cell', 'views', 'views-empty-cell', 'views-time-panel', 'list',
+      'list-item', 'reduced', 'drag-source', 'resizing', 'indicator', 'droppable-cell', 'overlay',
+      'dd-appointment', 'start',
+      'views-header', 'views-group-header', 'views-time-indicator', 'views-vertical-group',
+      'resource-item', 'resource-value', 'virtual-row', 'empty-cell',
+    ],
+    /*
+     * Wave C14, the file widgets. Compounds are one anatomy level: `progress-box` is
+     * `.dx-filemanager-progress-box`, `thumbnails-item` is `.dx-filemanager-thumbnails-item` — the DOM
+     * class of each is exactly the compound.
+     */
+    'file-manager': [
+      'i-cancel', 'text-item', 'drop-zone-placeholder', 'progress-bold', 'close', 'context-menu',
+      'file-uploader',
+      'toolbar', 'toolbar-separator', 'toolbar-separator-item', 'toolbar-viewmode', 'file-toolbar',
+      'breadcrumbs', 'breadcrumbs-item', 'dirs-panel', 'dirs-tree-item', 'drawer-panel',
+      'file-item', 'file-item-select', 'file-actions-button', 'details-view', 'checkbox-column',
+      'thumbnails', 'thumbnails-item', 'thumbnails-view-port', 'custom-thumbnail', 'spacer',
+      'progress-panel', 'progress-box', 'progress-title', 'progress-bar', 'close-button',
+      'large-icon', 'view-mode-button', 'tree-view-item', 'drop-zone-placeholder',
+      'cancel-button', 'notification', 'container', 'separator', 'content', 'item', 'menu-item',
+      'popup', 'overlay', 'editor', 'button', 'icon', 'text', 'title', 'image', 'placeholder',
+      'drop-zone',
+    ],
+    'file-uploader': [
+      'file', 'file-name', 'file-size', 'file-status-message', 'file-container', 'file-icon',
+      'button', 'upload-button', 'cancel-button', 'progress-bar', 'status', 'message', 'label',
+      'text', 'files-container', 'wrapper',
+    ],
+    /*
+     * Wave C11 — the folder tails. `heading-N` and `xs…xl` are the steps of the type scale, an
+     * enumerated entity, which the standard allows to carry an ordinal (NAMING.md, numeric segments);
+     * the token package spells them the same way (font-size-heading-1, font-size-base-xs).
+     */
+    typography: ['heading-1', 'heading-2', 'heading-3', 'heading-4', 'heading-5', 'heading-6',
+      'xs', 's', 'm', 'l', 'xl', 'link'],
+    overlay: ['content'],
+    informer: ['icon'],
+    // `stop-N` are the three colours of one decorative gradient — again an enumerated entity.
+    'load-indicator': ['segment', 'inner', 'sparkle', 'stop-1', 'stop-2', 'stop-3'],
+    'text-area': ['content'],
+    'number-box': ['spin', 'container', 'icon'],
+    'date-box': [
+      'overlay', 'item', 'popup', 'content', 'title', 'container', 'cell', 'button',
+      'apply-button', 'input',
+    ],
+    'date-range-box': ['active-bar', 'custom-button', 'input'],
+    'select-box': ['list'],
+    lookup: ['field', 'search', 'arrow', 'popup', 'content'],
+    'tag-box': ['tag', 'content', 'container', 'remove-button', 'select-all', 'list'],
+    'color-box': ['preview', 'overlay', 'content', 'input', 'container', 'toolbar-item', 'icon'],
+    'drop-down-editor': ['button', 'invalid-badge', 'list', 'icon'],
+    grid: [
+      'row', 'cell', 'header', 'group-row', 'master-detail', 'column-chooser', 'item', 'message',
+      'ai-chat', 'drag-header', 'filter-row', 'filter-panel', 'summary', 'column-separator',
+      'no-data', 'link', 'editor', 'search', 'chevron', 'icon', 'text-stub', 'selection',
+      'draggable-column', 'header-filter', 'drop-highlight', 'text-link', 'icon-link',
+      'checkbox', 'menu-item', 'header-panel', 'group-panel', 'command', 'edit', 'edit-column',
+      'select-column', 'icon-container', 'filter-operation',
+      'adaptive-column', 'tree-view', 'node', 'select-all', 'sort-index', 'error-message', 'popup',
+      'overlay', 'revert-button', 'validation', 'input', 'progress-bar', 'prompt-editor', 'after',
+      'lines', 'title', 'ai', 'operation', 'list', 'button', 'content', 'text', 'header-row',
+    ],
+    // dataGrid's own deltas on top of the chassis: the group panel and the edit-form buttons.
+    // `group-panel-item` and `block-separator` are compounds — one anatomy level each, not two.
+    'data-grid': [
+      'group-panel', 'group-panel-item', 'block-separator', 'sort', 'group-row', 'sticky-column',
+      'cell', 'form-buttons', 'error-message', 'filter-panel',
+    ],
+    'tree-list': [
+      'chevron', 'icon', 'expand', 'node', 'empty-space', 'sticky-column', 'cell', 'form-buttons',
+      'error-message',
+    ],
+    'text-editor': [
+      'input', 'label', 'line', 'button', 'clear-button', 'spin-button', 'custom-button',
+      'icon-container', 'invalid-badge',
+    ],
+  },
+};
+
+// ---------------------------------------------------------------------------------------------
+// Derivation
+// ---------------------------------------------------------------------------------------------
+
+const kebab = (folder) => folder.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+
+const listFolders = (dir) => readdirSync(dir)
+  .filter((entry) => statSync(join(dir, entry)).isDirectory())
+  .sort();
+
+const sortedUnique = (values) => [...new Set(values)].sort();
+
+const stripState = (name, states) => {
+  // longest match first, so `selected-hovered` wins over `selected`
+  const ordered = [...states].sort((a, b) => b.length - a.length);
+  for (const state of ordered) {
+    if (name.endsWith(`-${state}`)) return { base: name.slice(0, -state.length - 1), state };
+  }
+  return { base: name, state: null };
+};
+
+const deriveFromTokens = (states) => {
+  const names = [...readFileSync(componentTokens, 'utf8').matchAll(/--dxds-([a-z0-9-]+):/g)]
+    .map((match) => match[1]);
+
+  const parts = new Set();
+  const packageElementPaths = new Set();
+
+  names.forEach((name) => {
+    const { base } = stripState(name, states);
+    const marker = base.indexOf('-color-');
+    if (marker === -1) return;
+    const elementPath = base.slice(0, marker);
+    const tail = base.slice(marker + '-color-'.length);
+    packageElementPaths.add(elementPath);
+    if (tail) parts.add(tail.split('-').pop());
+  });
+
+  return {
+    tokenCount: names.length,
+    parts: [...parts],
+    packageElementPaths: [...packageElementPaths].sort(),
+  };
+};
+
+/*
+ * The grammar is positional, so the vocabularies do NOT all have to be disjoint:
+ *
+ *   $<component>(-<sub-element>)*(-<modifier>)*-<slot>(-<state>)
+ *
+ * Parsing is right-to-left with longest-match: the trailing state, then the slot, then the middle.
+ * That resolves the overlaps that do exist on purpose — `text` is both a part (text color) and an
+ * appearance modifier (stylingMode: 'text'), and `separator`/`backdrop`/`shadow` are both parts and
+ * system concerns:
+ *
+ *   $button-text-bg-rest   -> modifier `text`  + slot `bg`      (slot is the position before state)
+ *   $button-text-rest      -> slot `text`                        (no modifier present)
+ *   $separator-border-rest -> concern `separator` + slot `border` (concern is the first segment)
+ *   $button-separator-rest -> component `button` + slot `separator`
+ *
+ * Only overlaps between vocabularies competing for the SAME position are fatal, and there are two:
+ *
+ *   1. STATES ∩ PARTS = ∅       — the trailing state is matched first, so a part that is also a
+ *      state word would be eaten as the state and the slot would go missing
+ *   2. SUB_ELEMENTS ∩ STATES = ∅ — same reason, from the other side
+ *
+ * A sub-element that is also a PART or a MODIFIER is fine, and `toast` proves it: the DOM element is
+ * `.dx-toast-content`, so `content` is both the name of that box and the part meaning "text colour".
+ *
+ *   $toast-content-padding-block  -> sub-element `content` + slot `padding-block`
+ *   $toast-content-rest           -> slot `content` (the slot is mandatory and sits before the state)
+ *
+ * Both parse. Requiring sub-elements to avoid part names would have forced `body` on an element the
+ * DOM calls `content`, which costs findability for no decidability gain. (This is the second time the
+ * instinct "make all the vocabularies disjoint" turned out to be too strong — see NAMING.md.)
+ */
+const assertParseable = (parts, states, modifiers, subElements) => {
+  const clash = (a, b) => a.filter((value) => b.includes(value));
+
+  const stateParts = clash(states, parts);
+  if (stateParts.length) {
+    throw new Error(`STATES and PARTS overlap, the grammar would be undecidable: ${stateParts}`);
+  }
+
+  Object.entries(subElements).forEach(([component, names]) => {
+    const bad = clash(names, states);
+    if (bad.length) {
+      throw new Error(`sub-elements of ${component} collide with a state name: ${bad}`);
+    }
+  });
+};
+
+const build = () => {
+  const folders = listFolders(themeDir);
+  const derived = deriveFromTokens(OVERRIDES.states);
+
+  const parts = sortedUnique([
+    ...derived.parts.filter((part) => !OVERRIDES.partExclude.includes(part)),
+    ...OVERRIDES.partsAdd,
+  ]).filter((part) => !OVERRIDES.partsRemove.includes(part));
+
+  const components = {};
+  folders.forEach((folder) => {
+    if (OVERRIDES.systemFolders.includes(folder)) return;
+    components[folder] = OVERRIDES.components[folder] ?? kebab(folder);
+  });
+
+  // component -> owning folder; explicit overrides win, otherwise the only folder mapping to it
+  const declarationHome = {};
+  Object.entries(components).forEach(([folder, component]) => {
+    declarationHome[component] = OVERRIDES.declarationHome[component] ?? folder;
+  });
+
+  const subElements = OVERRIDES.subElements;
+  assertParseable(parts, OVERRIDES.states, OVERRIDES.modifiers, subElements);
+
+  return {
+    $comment: 'GENERATED by tools/naming/derive-registries.mjs — do not edit by hand. '
+      + 'Judgment calls live in OVERRIDES in that script; vocabularies are derived from '
+      + 'scss/_design-system (regenerate with `pnpm nx build:tokens devextreme-scss` first).',
+    parseRule: '$<component>(-<sub-element>)*(-<modifier>)*-<slot>(-<state>) — parsed right-to-left '
+      + 'with longest match. Overlaps between vocabularies competing for DIFFERENT positions are '
+      + 'intentional and resolved positionally; see assertParseable() in the generator for the two '
+      + 'overlaps that are forbidden.',
+    derivedFrom: {
+      componentTokens: 'scss/_design-system/fluent/components/theme.scss',
+      componentTokenCount: derived.tokenCount,
+      themeFolders: folders.length,
+    },
+    components,
+    declarationHome,
+    systemFolders: OVERRIDES.systemFolders,
+    systemConcerns: [...OVERRIDES.systemConcerns].sort(),
+    chassis: OVERRIDES.chassis,
+    themeIdentity: OVERRIDES.themeIdentity,
+    exemptFolders: OVERRIDES.exemptFolders,
+    parts,
+    states: OVERRIDES.states,
+    modifiers: OVERRIDES.modifiers,
+    sizeSlots: OVERRIDES.sizeSlots,
+    rejected: OVERRIDES.rejected,
+    embeds: OVERRIDES.embeds,
+    rejectedTrailing: OVERRIDES.rejectedTrailing,
+    rejectedSpellings: OVERRIDES.rejectedSpellings,
+    droppedSegments: OVERRIDES.droppedSegments,
+    subElements,
+    packageElementPaths: derived.packageElementPaths,
+    migrated: OVERRIDES.migrated,
+  };
+};
+
+const serialized = `${JSON.stringify(build(), null, 2)}\n`;
+
+if (process.argv.includes('--check')) {
+  const committed = readFileSync(output, 'utf8');
+  if (committed !== serialized) {
+    process.stderr.write('registries.json is stale — run node tools/naming/derive-registries.mjs\n');
+    process.exit(1);
+  }
+  process.stdout.write('registries.json is up to date\n');
+} else {
+  writeFileSync(output, serialized);
+  process.stdout.write(`wrote ${output}\n`);
+}
diff --git a/packages/devextreme-scss/tools/naming/destar.mjs b/packages/devextreme-scss/tools/naming/destar.mjs
new file mode 100644
index 000000000000..9e8adef12d79
--- /dev/null
+++ b/packages/devextreme-scss/tools/naming/destar.mjs
@@ -0,0 +1,251 @@
+/*
+ * Wave A of the naming standard (scss/widgets/fluent-next/NAMING.md, rule O3/O8): converts
+ * cross-widget `@use "../<widget>/<module>" as *` imports into namespaced ones and prefixes every
+ * reference accordingly.
+ *
+ *   node tools/naming/destar.mjs --list                    # what would change, per folder
+ *   node tools/naming/destar.mjs --apply --folders=toolbar,list
+ *   node tools/naming/destar.mjs --apply --all
+ *
+ * Why this has to happen before ownership work: a top-level `$x:` in a file that pulls a module in
+ * with `as *` does not declare a local variable — it MUTATES that module's variable for the whole
+ * compilation. So "give every widget its own variable" silently rewrites the provider until the
+ * star imports are gone. See NAMING.md, O8.
+ *
+ * Mixin-only imports (`../<widget>/mixins`) keep `as *` on purpose: they expose mixins, not
+ * variables, and namespacing them would mean prefixing every `@include`.
+ *
+ * A pure de-star cannot change one byte of the compiled CSS. That is the acceptance criterion.
+ */
+
+import { readFileSync, writeFileSync, readdirSync, statSync, existsSync } from 'fs';
+import { join, dirname, basename } from 'path';
+import { fileURLToPath } from 'url';
+
+const here = dirname(fileURLToPath(import.meta.url));
+const packageRoot = join(here, '..', '..');
+const themeRoot = join(packageRoot, 'scss', 'widgets', 'fluent-next');
+const registries = JSON.parse(readFileSync(join(here, 'registries.json'), 'utf8'));
+
+const VARIABLE_MODULES = ['colors', 'sizes', 'variables'];
+const exemptFolders = Object.keys(registries.exemptFolders);
+
+const walk = (dir) => readdirSync(dir).flatMap((entry) => {
+  const absolute = join(dir, entry);
+  return statSync(absolute).isDirectory() ? walk(absolute) : [absolute];
+}).filter((file) => file.endsWith('.scss'));
+
+const stripComments = (content) => content
+  .replace(/\/\/[^\n\r]*/g, '')
+  .split(/\/\*|\*\//)
+  .filter((_, index) => index % 2 === 0)
+  .join('');
+
+/** Ranges of `with ( … )` argument lists: their left-hand sides are the base module's parameters. */
+const withKeyRanges = (content) => {
+  const ranges = [];
+  const opener = /\bwith\s*\(/g;
+  let match = opener.exec(content);
+  while (match !== null) {
+    let depth = 1;
+    let index = match.index + match[0].length;
+    while (index < content.length && depth > 0) {
+      if (content[index] === '(') depth += 1;
+      if (content[index] === ')') depth -= 1;
+      index += 1;
+    }
+    ranges.push([match.index, index]);
+    match = opener.exec(content);
+  }
+  return ranges;
+};
+
+/** Module-level `$x:` declarations — `@if`/`@each` do not create scope, mixins and rules do. */
+const declaredNames = (file) => {
+  const content = stripComments(readFileSync(file, 'utf8'));
+  const skip = withKeyRanges(content);
+  const names = new Set();
+  const stack = [];
+  let index = 0;
+
+  while (index < content.length) {
+    const char = content[index];
+    if (char === '{') {
+      const before = content.slice(Math.max(0, index - 200), index);
+      stack.push(/@(if|else|each|for|while)\b[^{]*$/.test(before));
+      index += 1;
+    } else if (char === '}') {
+      stack.pop();
+      index += 1;
+    } else if (char === '$') {
+      const name = /^\$[a-z0-9_-]+/i.exec(content.slice(index))?.[0];
+      if (!name) { index += 1; continue; }
+      const namespaced = index > 0 && content[index - 1] === '.';
+      const assignment = /^\s*:/.test(content.slice(index + name.length));
+      const inSkip = skip.some(([from, to]) => index >= from && index < to);
+      if (assignment && !namespaced && !inSkip && stack.every(Boolean)) names.add(name);
+      index += name.length;
+    } else {
+      index += 1;
+    }
+  }
+  return names;
+};
+
+const aliasFor = (folder, moduleName) => folder + moduleName[0].toUpperCase() + moduleName.slice(1);
+
+const analyse = (file) => {
+  const original = readFileSync(file, 'utf8');
+  const ownFolder = file.slice(themeRoot.length + 1).split('/')[0];
+  const uses = [...original.matchAll(/@use\s+(["'])([^"']+)\1([^;{]*);/g)];
+
+  const targets = [];
+  uses.forEach((use) => {
+    const [statement, , spec, tail] = use;
+    if (!/\bas\s+\*/.test(tail)) return;
+
+    const moduleName = basename(spec);
+    if (!VARIABLE_MODULES.includes(moduleName)) return;
+
+    // Specs are relative to the importing FILE, and widgets like tabs/ have nested folders, so the
+    // module path cannot be assumed to sit one level under the theme root.
+    const modulePath = join(dirname(file), dirname(spec), `_${moduleName}.scss`);
+    if (!modulePath.startsWith(`${themeRoot}/`)) return;
+
+    // A module sitting directly in the theme root (`../sizes`, `../colors`) is the theme-level
+    // layer — theme identity plus the cross-cutting values. It is not a widget and keeps `as *`.
+    if (dirname(modulePath) === themeRoot) return;
+
+    const folder = modulePath.slice(themeRoot.length + 1).split('/')[0];
+    if (folder === ownFolder || registries.systemFolders.includes(folder)) return;
+    if (!existsSync(modulePath)) return;
+
+    targets.push({
+      statement,
+      index: use.index,
+      spec,
+      modulePath,
+      folder,
+      moduleName,
+      alias: aliasFor(folder, moduleName),
+      names: declaredNames(modulePath),
+    });
+  });
+
+  // The same module can be imported twice in one file (diagram/_index.scss imports ../fieldset/sizes
+  // on two consecutive lines). A repeated `@use … as *` of the same module is a no-op, and it cannot
+  // be namespaced twice under one alias, so the duplicate is dropped. Counting its names twice would
+  // also make every one of them look like it came from two different providers.
+  const seen = new Set();
+  targets.forEach((target) => {
+    if (seen.has(target.modulePath)) {
+      target.drop = true;
+      target.names = new Set();
+    }
+    seen.add(target.modulePath);
+  });
+
+  return { file, ownFolder, original, targets };
+};
+
+const rewrite = ({ file, original, targets }) => {
+  if (!targets.length) return null;
+
+  const ownDeclarations = declaredNames(file);
+  const provided = new Map(); // name -> [alias]
+  targets.forEach(({ alias, names }) => names.forEach((name) => {
+    provided.set(name, [...(provided.get(name) ?? []), alias]);
+  }));
+
+  // A name this file declares at top level while a de-starred module also declares it is the silent
+  // mutation case: today the assignment rewrites the provider's variable. De-starring changes that,
+  // so it is not a pure rename and must be looked at by hand.
+  const mutations = [...ownDeclarations].filter((name) => provided.has(name));
+  const ambiguous = [...provided].filter(([, aliases]) => aliases.length > 1);
+  if (mutations.length || ambiguous.length) {
+    return { file, skipped: true, mutations, ambiguous: ambiguous.map(([name]) => name) };
+  }
+
+  const skip = withKeyRanges(stripComments(original));
+  // ranges are computed on stripped content; recompute on the original so offsets line up
+  const skipOriginal = withKeyRanges(original);
+  const inWithKeys = (position, name) => skipOriginal
+    .some(([from, to]) => position >= from && position < to)
+    && /^\s*:/.test(original.slice(position + name.length));
+
+  let output = '';
+  let index = 0;
+  let rewritten = 0;
+  let dropped = 0;
+
+  while (index < original.length) {
+    const target = targets.find((candidate) => candidate.index === index);
+    if (target) {
+      if (target.drop) {
+        index += target.statement.length;
+        if (original[index] === '\n') index += 1; // do not leave a blank line behind
+        dropped += 1;
+      } else {
+        output += target.statement.replace(/\bas\s+\*/, `as ${target.alias}`);
+        index += target.statement.length;
+      }
+      continue;
+    }
+
+    const char = original[index];
+    if (char === '$') {
+      const name = /^\$[a-z0-9_-]+/i.exec(original.slice(index))?.[0];
+      const namespaced = index > 0 && original[index - 1] === '.';
+      if (name && !namespaced && provided.has(name) && !inWithKeys(index, name)) {
+        output += `${provided.get(name)[0]}.${name}`;
+        index += name.length;
+        rewritten += 1;
+        continue;
+      }
+    }
+
+    output += char;
+    index += 1;
+  }
+
+  return {
+    file, output, rewritten, dropped, imports: targets.length, skipped: false, skip: skip.length,
+  };
+};
+
+const selected = () => {
+  const folders = process.argv.find((argument) => argument.startsWith('--folders='))
+    ?.slice('--folders='.length).split(',').filter(Boolean);
+  return walk(themeRoot).filter((file) => {
+    const folder = file.slice(themeRoot.length + 1).split('/')[0];
+    if (exemptFolders.includes(folder)) return false;
+    return !folders || folders.includes(folder);
+  });
+};
+
+const results = selected().map(analyse).map(rewrite).filter(Boolean);
+const apply = process.argv.includes('--apply');
+let changed = 0;
+let touchedReferences = 0;
+
+results.forEach((result) => {
+  const relative = result.file.slice(themeRoot.length + 1);
+  if (result.skipped) {
+    process.stdout.write(`SKIP ${relative}\n`);
+    if (result.mutations.length) {
+      process.stdout.write(`     declares a name its star-imported module also declares: ${result.mutations.join(', ')}\n`);
+    }
+    if (result.ambiguous.length) {
+      process.stdout.write(`     provided by more than one module: ${result.ambiguous.join(', ')}\n`);
+    }
+    return;
+  }
+  changed += 1;
+  touchedReferences += result.rewritten;
+  const duplicates = result.dropped ? `, ${result.dropped} duplicate import(s) dropped` : '';
+  process.stdout.write(`${apply ? 'WRITE' : 'PLAN '} ${relative}: ${result.imports} import(s), ${result.rewritten} reference(s)${duplicates}\n`);
+  if (apply) writeFileSync(result.file, result.output);
+});
+
+process.stdout.write(`\n${apply ? 'rewrote' : 'would rewrite'} ${changed} file(s), ${touchedReferences} reference(s)\n`);
+if (!apply) process.stdout.write('run again with --apply to write\n');
diff --git a/packages/devextreme-scss/tools/naming/inline-foreign.mjs b/packages/devextreme-scss/tools/naming/inline-foreign.mjs
new file mode 100644
index 000000000000..0faa3488bb62
--- /dev/null
+++ b/packages/devextreme-scss/tools/naming/inline-foreign.mjs
@@ -0,0 +1,112 @@
+/*
+ * Wave D of the naming standard (scss/widgets/fluent-next/NAMING.md, rule O4): removes a cross-folder
+ * read by giving the reader its own value instead of the other folder's variable.
+ *
+ *   node tools/naming/inline-foreign.mjs           # report
+ *   node tools/naming/inline-foreign.mjs --apply
+ *
+ * It only touches the one shape where O4 needs no judgment: a declaration whose ENTIRE value is a
+ * single `alias.$foreign` reference, where the provider's own value is a single design token or a
+ * literal. Then `$mine: providerAlias.$theirs` becomes `$mine: ds.$token`, which is the same value —
+ * so the compiled CSS cannot change — and the coupling is expressed through the token, exactly as O4
+ * asks.
+ *
+ * Everything else is left alone and reported, because it needs a person:
+ *   - the provider's value is derived from another variable (inlining would copy a chain, not a value)
+ *   - the read is not a plain initialisation (it sits inside a rule, a mixin call or a calc)
+ *   - the read is legal under the chassis exception O5, in which case it should STAY: `$mine: ds.$x`
+ *     duplicated across a family is exactly the drift the chassis exists to prevent.
+ *
+ * A token that belongs to another component (`ds.$button-*` read by diagram) is copied as it is and
+ * reported: changing it to a semantic role would change the emitted var() name, so it is a mapping
+ * question for DIVERGENCES.md, not something this tool may decide.
+ */
+
+import { readFileSync, writeFileSync, readdirSync, statSync, existsSync } from 'fs';
+import { join, dirname, basename, resolve } from 'path';
+import { fileURLToPath } from 'url';
+
+const here = dirname(fileURLToPath(import.meta.url));
+const packageRoot = join(here, '..', '..');
+const themeRoot = join(packageRoot, 'scss', 'widgets', 'fluent-next');
+const baseline = JSON.parse(
+  readFileSync(join(packageRoot, 'tests', 'fluent-next-naming.baseline.json'), 'utf8'),
+);
+
+const apply = process.argv.includes('--apply');
+
+const walk = (dir) => readdirSync(dir).flatMap((entry) => {
+  const absolute = join(dir, entry);
+  return statSync(absolute).isDirectory() ? walk(absolute) : [absolute];
+}).filter((file) => file.endsWith('.scss'));
+
+/** `alias` -> folder it resolves to, for one file. */
+const aliasFolders = (file, content) => {
+  const map = new Map();
+  [...content.matchAll(/@use\s+(["'])([^"']+)\1([^;{]*)/g)].forEach(([, , spec, tail]) => {
+    const alias = /\bas\s+([a-zA-Z][\w-]*)/.exec(tail)?.[1];
+    if (!alias || alias === 'ds') return;
+    const modulePath = resolve(dirname(file), spec);
+    if (!modulePath.startsWith(`${themeRoot}/`)) return;
+    map.set(alias, {
+      folder: modulePath.slice(themeRoot.length + 1).split('/')[0],
+      candidates: [`${modulePath}.scss`, join(dirname(modulePath), `_${basename(modulePath)}.scss`)],
+    });
+  });
+  return map;
+};
+
+/** The right-hand side of `$name` in one of the candidate module files, if it is declared once. */
+const providerValue = (candidates, name) => {
+  const found = [];
+  candidates.filter((candidate) => existsSync(candidate)).forEach((candidate) => {
+    const content = readFileSync(candidate, 'utf8');
+    [...content.matchAll(new RegExp(`^\\${name}\\s*:\\s*([^;]*);`, 'gm'))]
+      .forEach((match) => found.push(match[1].trim()));
+  });
+  return found.length === 1 ? found[0] : null;
+};
+
+const SIMPLE_VALUE = /^(ds\.\$[a-z0-9-]+|#[0-9a-f]{3,8}|transparent|inherit|-?[\d.]+[a-z%]*)( !default)?$/i;
+
+const foreignFor = (folder) => new Set(baseline.foreignReads?.[folder] ?? []);
+const inlined = [];
+const skipped = [];
+
+walk(themeRoot).forEach((file) => {
+  const relative = file.slice(themeRoot.length + 1);
+  const folder = relative.split('/')[0];
+  if (!relative.includes('/')) return;
+  const original = readFileSync(file, 'utf8');
+  const aliases = aliasFolders(file, original);
+  const foreign = foreignFor(folder);
+  let output = original;
+
+  [...original.matchAll(/(?<![\w-])^(\$[a-z0-9-]+)\s*:\s*([a-zA-Z][\w-]*)\.(\$[a-z0-9-]+)(\s*!default)?\s*;$/gm)]
+    .forEach((match) => {
+      const [statement, own, alias, theirs, bang] = match;
+      if (alias === 'ds') return;
+      if (!foreign.has(`${alias}.${theirs}`)) return; // chassis-legal or already handled
+      const target = aliases.get(alias);
+      if (!target) return;
+      const value = providerValue(target.candidates, theirs);
+      if (value === null) {
+        skipped.push(`${relative}: ${own} <- ${alias}.${theirs} (provider declares it ${value === null ? 'more than once or not at all' : ''})`);
+        return;
+      }
+      const bare = value.replace(/\s*!default$/, '');
+      if (!SIMPLE_VALUE.test(bare)) {
+        skipped.push(`${relative}: ${own} <- ${alias}.${theirs} = ${bare} (not a single token)`);
+        return;
+      }
+      output = output.replace(statement, `${own}: ${bare}${bang ?? ''};`);
+      inlined.push(`${relative}: ${own} = ${bare}  (was ${alias}.${theirs})`);
+    });
+
+  if (apply && output !== original) writeFileSync(file, output);
+});
+
+inlined.forEach((entry) => process.stdout.write(`  ${apply ? 'WRITE' : 'PLAN '} ${entry}\n`));
+skipped.forEach((entry) => process.stdout.write(`  SKIP  ${entry}\n`));
+process.stdout.write(`\n${apply ? 'inlined' : 'would inline'} ${inlined.length}, left for review ${skipped.length}\n`);
+if (!apply && inlined.length) process.stdout.write('run again with --apply to write\n');
diff --git a/packages/devextreme-scss/tools/naming/mapping.json b/packages/devextreme-scss/tools/naming/mapping.json
new file mode 100644
index 000000000000..5e13cc6afe02
--- /dev/null
+++ b/packages/devextreme-scss/tools/naming/mapping.json
@@ -0,0 +1,1971 @@
+{
+  "$comment": [
+    "Hand-authored old->new variable names for wave C of the naming standard (see NAMING.md).",
+    "Reviewed as a diff: the new name depends on which CSS property the variable feeds, which cannot",
+    "be derived from the old name. Validated by `node tools/naming/rename.mjs --check` and kept",
+    "enforced by tests/fluent-next-naming.test.ts (mapping is collision-free, no old name survives).",
+    "Notes on the toast pilot:",
+    "  - `default` is not a Toast.type value (custom|error|info|success|warning), so the base surface",
+    "    drops the modifier and becomes $toast-bg-rest; the typed ones keep info/warning/error/success.",
+    "  - `-color` that lands in `color:` becomes the `content` part; in `background-color`, `bg`.",
+    "  - icon margins are LTR + an RTL override of the SAME logical margin in base/_toast.scss",
+    "    (margin-right, then margin-left inside .dx-rtl), so both become margin-inline-end and the",
+    "    RTL one carries the `rtl` modifier.",
+    "  - $toast-shadow is a composite box-shadow value, so it moves to _sizes.scss by hand and is",
+    "    renamed here; a rename alone cannot move a declaration between modules.",
+    "C1b splits the 8 marker-ish variables by ACTUAL role: 4 turned out to have a single role and got role-honest names (typography colour/bg -> global content/bg, the inverted text and success colours are the invalid/valid badge colours), and only the 4 that form the deliberate 4x3 utility matrix stay role-free under the `palette` concern. halfhorizontal-padding is calc(padding/2) used as inset-inline-end, i.e. an offset.",
+    "C1d closes the system tier: 5 names had a single owning folder and their declarations move there (tabs/textEditor/fieldset/htmlEditor), 4 stay in common/ because that is where they are used - the three dropdown-overlay metrics join the existing $global-dropdown-box-shadow family, and inline-borderedwidget-inner-size is a derived global metric (control height minus both borders).",
+    "C2 button: 99 of 104 names convert deterministically to $button-<intent>-<appearance>-<part>-<state> (appearance made explicit: no segment meant `contained`). The role comes from dx-button-styling-variant's named parameters, which map 1:1 to properties ($background-color -> bg, $icon-color -> .dx-icon color, etc). Five needed judgment: border-radius is geometry and moves to _sizes.scss; shadow-color and border-color turned out to be intent-specific (normal); disabled-text-color covers icon and text in every appearance; disabled-background is dual-role (contained bg + outlined border) and is split by role.",
+    "C2b finishes button: marking a component `migrated` makes the strict grammar check demand ALL its variables conform, and it immediately reported the 10 size names C2 had left behind. icon-text-padding is the inline-start padding of the text+icon variant; box-shadow-size is the geometry next to the $button-normal-shadow-rest colour.",
+    "C3a text-editor colours. Two pairs looked like duplicates because the VALUE matched; only one was. $texteditor-invalid-color and -invalid-faded-border-color share a token but feed `color:` and `border-color:` respectively - a role split that was already correct, so both survive as invalid-content-rest and invalid-border-rest. $texteditor-foreground-disabled and -disabled-text-color are genuinely the same thing in the same role and are merged. border-bottom-color maps to the `line` part (the DS token says line too); the focus indicator is a separate element with its own value, so it keeps its own name. input-border-radius and label-transition are geometry and move to _sizes.scss.",
+    "C3b text-editor sizes. The `standard` family turned out to be the UNDERLINED mode, not a stylingMode value: it is used only inside texteditor-underlined-styling and @include dx-editor-underlined. (The filled paddings, by contrast, are reused by the outlined mode too, so they keep `filled` - the mode that defines them.) `with-label` is the DOM condition .dx-texteditor-with-label / -with-floating-label, which spans two labelMode values. before-left/-bottom/-right position the ::before underline and become logical insets on the `line` sub-element. C1d's $text-editor-standard-input-padding-inline is corrected here to sub-element-first order and to `underlined`.",
+    "C3c fixes three names from C3b where I put the state in the middle (line-active-border-block-end). The state is always the LAST segment, in _sizes.scss too; the strict grammar check caught it.",
+    "C4 closes three open questions. (1) inline-block-height turned out to be the LABEL height: base's dx-editor-outlined takes it at positions 6 and 7, which are $label-active-height and $label-empty-height. (2) splitterBar declared two names in the `splitter` namespace and read them itself - they are splitter-bar's. (3) menuBase declared one $menu-* name; the declaration home is menu/, so it moves there and the chassis direction in the registry is corrected.",
+    "C5 the editor cluster: 11 folders, mostly small. Roles taken from the CSS property each variable feeds - $tagbox-tag-button-remove-bg turned out to be a `color:` despite the name, $tagbox-tag-disabled a background, $tagbox-select-all-border-color a border-bottom (the `line` part). Two colorBox overlay paddings were told apart by their selectors: `-2` is the overlay element's own padding (the base parameter), the other pads .dx-popup-content inside it - which also retires a forbidden numeric disambiguator. `idle` is a rejected spelling of `rest`.",
+    "C6 gridBase colours. The component is `grid` (matching the package's grid-cell / grid-row family), so both legacy families collapse into it: 52 $datagrid-* and 5 $gridbase-*. The two drag-header shadows are told apart by their tokens - ambient and key. The five $gridbase-* aliases are consumed by the aiChat mixins; all three status colours come from content-* roles and the border one from a border-* role, which is what fixes their parts. font-weight and the two opacities are not colours and move to _sizes.scss.",
+    "C7 gridBase sizes, 74 names. Two forbidden numeric disambiguators were resolved from their selectors rather than guessed: -993 pads the filter panel, and -219 is the sort-index SPAN (the unsuffixed sibling is the icon). $fluent-grid-base-border-color turned out to be a bare alias of the colour renamed in C6 and is collapsed, like $base-border-radius before it.",
+    "C8 dataGrid + treeList, 39 names. Almost every base parameter these two configure is misnamed at the base layer, and reading the selector changed the name four times: datagrid-accent is the block separator's background, datagrid-border-color-disabled is the group-panel item's border (nothing disabled about it), common-form-buttons-border-radius is the block separator's radius, and common-form-buttons-margin-left/-right are the RTL mirrors of the group-panel item's and its sort indicator's margins. The left/right pairs were confirmed as LTR/RTL mirrors by equal values, so both halves name the same logical side and the RTL one takes the `rtl` modifier (toast precedent). Base mirrors ($datagrid-cell-padding, the six $treelist-expand-* names) keep base's spelling: they are wired by a star import of base/**/variables, which is the O8 ratchet.",
+    "C8b two names dataGrid and pivotGrid each declared independently, with different compact values. Renamed per owner. Keys are folder-qualified because one JSON object cannot hold the same old name twice, and the guard now refuses an unqualified rename of a name with more than one declaring folder instead of silently dragging the second folder into the first one's namespace.",
+    "C9 the twenty small folders, generated by tools/naming/propose.mjs and reviewed as a diff. The generator resolves a bare `-color` from the CSS property the variable is assigned to, which is the standard's own rule for the 491 legacy -color names; everything it could not resolve is listed explicitly above with the selector that settled it.",
+    "C9b the eight names C9 left behind. The four TabPanel borders are named by the tabsPosition value that produces them, not by a logical axis: with tabsPosition=top the border is the BOTTOM one, so the old names were about the CSS side while the variants are about the option \u2014 and `left` stays `left` under RTL. Note the swap in the pairs above, it is deliberate.",
+    "C10 the mechanical part of every folder that is not yet migrated: names whose proposal already satisfies the grammar once the folder's anatomy is registered. The manual tail of each folder is a separate pass, so these folders are deliberately NOT added to `migrated` yet \u2014 the ratchet shrinks, and the strict check follows when a folder is finished.",
+    "Five names held back from C10: three list sizes whose canonical name equals a parameter of base/list, which list/_index.scss still imports with `as *` (O8 \u2014 the import has a with() block and needs its own pass), and two treeView checkbox borders that would collapse onto one name while holding different tokens (checked-border-active against unchecked-border-disabled).",
+    "C11 finishes ten small folders. Recurring answers: a bare `-color` that the generator could not resolve was read off the base mixin that consumes it (informer's two go to `color:`, loadIndicator's two to `border-color:` despite one being spelled `-bg-`); a `-2` suffix on a base parameter was again an RTL mirror; and the `menu-` in contextMenu's names is the menu family's class prefix, not contextMenu's anatomy.",
+    "C12 checkBox, switch, dateView, gallery, popup and two radioGroup sizes. The legacy `$<widget>-accent-color` helper turned out to mean something different in each widget, and only the consuming mixin parameter or selector says which: switch passes it as $switch-on-border-color, gallery uses it for the focused border, checkBox paints the checked box's fill AND border with it. radioGroup's accent/invalid colours are NOT renamed here: they are radioButton's, read across folders, so they are a move (wave D), not a rename. Held back: $fluent-popup-title-min-height-2 \u2014 base and theme both set min-height on .dx-popup-title with different values, same shadowing defect as contextMenu's items-container padding.",
+    "Third instance of the same shadowing defect, so it is now a class rather than a one-off: base and the theme both style one property of one element with different values (contextMenu's .dx-menu-items-container padding, popup's .dx-popup-title min-height, checkBox's .dx-checkbox-text padding-inline-start). The theme's rule wins on order, so the base-facing value is unobservable but still emitted. The theme-rule variable of each pair is held back from renaming until the duplication is resolved \u2014 see DIVERGENCES.md.",
+    "C13 slider label/tooltip positions, timeView's clock SVG colours and pagination's compact mode. Two more `-2` suffixes turned out to be plain base parameters whose unsuffixed sibling does not exist in this theme, so the suffix simply disappears. timeView's three clock colours are baked into an SVG data-uri by clock-action-icons-mixin \u2014 see GOTCHAS.md on why they cannot be tokens.",
+    "Two more instances of the base/theme shadowing pair, in pagination: .dx-page padding and .dx-navigate-button width. Held back like the other three.",
+    "C14 the mechanical layer again, after the anatomy of the composite widgets went into the registry: scheduler, fileManager, fileUploader, pivotGrid, chat, htmlEditor, diagram, form, stepper, colorView, filterBuilder, calendar, gantt, recurrenceEditor. Words that turned out to be variants rather than DOM boxes went to MODIFIERS instead (scheduler's `small` and its 10..25-minute layouts, calendar's `contoured`, htmlEditor's `faded`), and every name still carrying a physical -left/-right is left for the per-folder tail.",
+    "Sixth instance of the base/theme shadowing pair, in diagram: base and the theme both set the same min-height from a variable of the same name. $fluent-diagram-button-min-height is held back with the other five.",
+    "C15 the third mechanical pass, after the last anatomy round (chat's typing indicator and prompt box, pivotGrid's field-chooser and position indicators, scheduler's views/resource boxes, fileManager's view-mode button) and after one new rule in the generator: when the reads cannot settle what a bare `-color` paints \u2014 because the variable is only ever handed to a base mixin that renames it \u2014 the legacy convention decides and it is `content`. Verified on the consuming mixins: $calendar-color arrives as $cell-text-color and lands in `color:`.",
+    "$treeview-color turned out to be a redundant second name for $tree-view-content-rest (same token, one reader two lines below). Collapsed by hand, like $base-border-radius in C1a and $fluent-grid-base-border-color in C7 \u2014 the guard refuses such a merge, and rightly so.",
+    "C16 tabs. Its variant vocabulary is Tabs.stylingMode ('primary'/'secondary') plus the theme's own 'basic'/'accent' tab appearances, and the modifier now precedes the slot in every one of them. Two new abstract size slots were needed and are documented in the registry: the selection indicator's `length` and `thickness` map to width or height depending on orientation, so a physical slot would be wrong half the time.",
+    "C17 the fourth mechanical pass, unlocked by two new generator rules and one bulk move. Rules: a physical word in the SLOT position is the CSS property and is rewritten to its logical form (`-border-bottom` -> `border-block-end`, `-top` -> `inset-block-start`, the four corner radii), while the SAME word earlier in a name stays a variant (`$tabs-tab-top-border` is tabsPosition) \u2014 hence a separate `rejectedTrailing` table; and a trailing `-rtl` is a modifier, so it moves in front of the slot. Move: every opacity that was sitting in a _colors.scss went to _sizes.scss (12 of them, in 6 folders), because `opacity` is a size slot and a colour name has to end with a state.",
+    "C18 the tails of scheduler, chat, gantt, recurrenceEditor and list. Three numeric suffixes were again variants the selector names: appointment-content-padding-2 is the all-day/month strip, -3 the recurring one, and views-group-header-padding-alt the sidebar copy. gantt's abbreviations (hb, vb, tm, ti) are registered exactly as the DOM spells them \u2014 the upstream expansion is undocumented and guessing it would break the link to the selector. Still deferred: $gantt-accent and $scheduler-accent, both multi-role and already the subject of DIVERGENCES entries.",
+    "C19 the fifth and last mechanical pass, plus the numeric-suffix tail of the file widgets. Two more generator rules made it possible: squashed compounds are normalised before anything else (`treeview-item` -> `tree-view-item`, `contextmenu` -> `context-menu`, and 30 more), and four segments that name nothing are simply dropped \u2014 `root` and `element` mean the widget's own box, which the grammar expresses by having NO sub-element; `state` is the .dx-state-* class whose meaning the state suffix already carries; `common` and `renovation` are grouping and implementation words.",
+    "Eleven more names held back, all the same base/theme shadowing pair: every `-2` parameter of the file widgets has an unsuffixed sibling in the theme, so base and the theme style one property twice. The eleventh is $fluent-filemanager-progress-box-common-padding \u2014 dropping `common` (a grouping word with no DOM counterpart) would make it collide with the padding next to it, which is exactly the case the injectivity guard exists for.",
+    "C20 the legacy `accent`/`danger` helpers. Each was named for the role its selector actually gives it, and where a value paints two properties the dominant one wins (rule 5, the second role recorded in DIVERGENCES.md): fileManager's danger is a background first and a text colour second, gantt's accent is the task bar's background and the time marker's border. Naming gantt's accent $gantt-task-bg-rest freed that name from the two variables that held it, which turned out to paint `.dx-gantt-taskRes` \u2014 the resource label, not the task bar \u2014 so they moved to $gantt-task-res-*.",
+    "D1, the first ownership move: twelve colours of the RADIO BUTTON were declared in radioGroup/, read across the folder boundary by radioButton (12 sites) and list (4). radioButton owns `radio-button` (O2), so the declarations move there and the readers follow. Roles come from base's dx-radiobutton-states-mixin, which names every parameter; where one value paints both a border and a background of the same element the background wins, as it did for the checked checkbox.",
+    "D2 promotes overlay/'s two colours to the system tier. They were read by loadPanel, popup, diagram, colorView, lookup and speedDialAction \u2014 six folders for two variables that map 1:1 to a semantic token and describe no widget's anatomy. That is the common/ admission criterion verbatim, and it is a better answer than adding six chassis dependents to a widget that is not a chassis.",
+    "C21 the 45 names that sat unmigrated because the generator's base-name exclusion was too broad. A name base also declares is untouchable only when the WIRING is a star import \u2014 there the theme's top-level `$x: \u2026 !default` sets base's variable, so the spelling belongs to base. When the wiring is `with($x: $value)` the KEY belongs to base but the theme's own variable on the right is free, and pivotGrid's, filterBuilder's and scheduler's colour sets were exactly that case.",
+    "C22 the tail of the ownership ratchet. Two scheduler names were sentence-shaped rather than anatomical (`$scheduler-fill-focused-appointment`, `$scheduler-is-shadow-color-for-focused-state`) and simply needed their words in the grammar's order. pivotGrid's `totalcolor`/`grandtotalcolor` and the spelled-out `first-/second-shadow-color` joined the squashed-spelling and rejected-part tables, so they resolve like every other name of their kind.",
+    "D3 splits treeView's three-role disabled checkbox colour. One value painted the unchecked box's border, the checked glyph and the indeterminate fill; all three now have their own name with the SAME value, so the split is byte-neutral and the question 'should they be equal' becomes visible in code instead of hiding inside one name. The mapping records two renames \u2014 the other two names are new declarations. Note for the next such split: `background-color:` and `border-color:` contain `color:` as a substring, so a naive replace of the bare form corrupts them; order the patterns specific-first.",
+    "C23: seven names that stopped being blocked. The list trio was waiting on base/list being imported with `as *` \u2014 wave E aliased it, so the canonical names came free. pivotGrid's two `-2` parameters turned out NOT to be shadowing pairs: base has two different rules for each (`.dx-area .dx-area-fields` and the `.dx-rtl` mirror), so they are second metrics and get selector-derived names. treeView's two checkbox borders wanted one name; they are now distinguished, and the first one exposed a dead parameter in base/treeView \u2014 the mixin takes $checkbox-border-color-focused and never uses it, so the theme's value never reaches CSS.",
+    "One name pulled back out of C23. Renaming $checkbox-border-color-focused made the repository's own `no unused variables` test go red \u2014 and correctly so: base/treeView takes that name as the third parameter of `treeview-checkbox()` and never uses it, so while the theme passed an argument of the same name the dead parameter looked alive. Fixing it means deleting the parameter from base and from four themes' call sites (output would not change), which is a cross-theme API change and therefore an escalation, not our edit. The name stays legacy-spelled with an entry in DIVERGENCES.md."
+  ],
+  "batches": {
+    "C0-toast": {
+      "$toast-default-bg": "$toast-bg-rest",
+      "$toast-info-bg": "$toast-info-bg-rest",
+      "$toast-info-color": "$toast-info-content-rest",
+      "$toast-warning-bg": "$toast-warning-bg-rest",
+      "$toast-warning-color": "$toast-warning-content-rest",
+      "$toast-error-bg": "$toast-error-bg-rest",
+      "$toast-error-color": "$toast-error-content-rest",
+      "$toast-success-bg": "$toast-success-bg-rest",
+      "$toast-success-color": "$toast-success-content-rest",
+      "$toast-shadow": "$toast-box-shadow",
+      "$fluent-toast-height": "$toast-height",
+      "$fluent-toast-item-gap": "$toast-item-gap",
+      "$fluent-toast-content-vertical-padding": "$toast-content-padding-block",
+      "$fluent-toast-content-horizontal-padding": "$toast-content-padding-inline",
+      "$fluent-toast-content-padding": "$toast-content-padding",
+      "$fluent-toast-icon-width": "$toast-icon-width",
+      "$fluent-toast-icon-height": "$toast-icon-height",
+      "$fluent-toast-icon-margin-right": "$toast-icon-margin-inline-end",
+      "$fluent-toast-icon-margin-left": "$toast-icon-rtl-margin-inline-end",
+      "$fluent-toast-stack-gap": "$toast-stack-gap"
+    },
+    "C1a-global": {
+      "$fluent-base-font-size": "$global-font-size",
+      "$fluent-base-icon-size": "$global-icon-size",
+      "$fluent-base-border-radius": "$global-border-radius",
+      "$fluent-base-border-width": "$global-border-width",
+      "$fluent-base-inline-widget-height": "$global-inline-widget-height",
+      "$fluent-line-height": "$global-line-height",
+      "$common-font-family": "$global-font-family",
+      "$common-disabled-opacity": "$global-disabled-opacity",
+      "$fluent-base-dropdown-widgets-shadow": "$global-dropdown-box-shadow",
+      "$base-dropdown-shadow-color1": "$global-dropdown-shadow-ambient",
+      "$base-dropdown-shadow-color2": "$global-dropdown-shadow-key"
+    },
+    "C1b-system": {
+      "$common-typography-color": "$global-content-rest",
+      "$common-typography-bg": "$global-bg-rest",
+      "$common-accent": "$palette-accent",
+      "$common-text-color": "$palette-text",
+      "$common-bg": "$palette-bg",
+      "$common-border-color": "$palette-border",
+      "$common-inverted-text-color": "$invalid-badge-content-rest",
+      "$badge-invalid-bg": "$invalid-badge-bg-rest",
+      "$common-invalid-badge-font-weight": "$invalid-badge-font-weight",
+      "$fluent-invalid-badge-size": "$invalid-badge-size",
+      "$fluent-invalid-badge-horizontal-padding": "$invalid-badge-padding-inline",
+      "$fluent-invalid-badge-halfhorizontal-padding": "$invalid-badge-offset",
+      "$common-success": "$valid-badge-content-rest",
+      "$fluent-valid-badge-font-size": "$valid-badge-font-size"
+    },
+    "C1c-button": {
+      "$fluent-button-height": "$button-height",
+      "$fluent-button-icon-size": "$button-icon-size",
+      "$fluent-button-icon-margin": "$button-icon-margin"
+    },
+    "C1d-moves": {
+      "$fluent-base-icon-margin": "$tabs-text-column-gap",
+      "$fluent-base-inline-block-height": "$text-editor-inline-block-height",
+      "$fluent-base-inline-horizontal-padding": "$fieldset-value-padding-inline",
+      "$fluent-base-standard-texteditor-input-horizontal-padding": "$text-editor-standard-input-padding-inline",
+      "$fluent-html-editor-add-image-dialog-base-padding": "$html-editor-add-image-dialog-padding-inline-end",
+      "$fluent-inline-borderedwidget-inner-size": "$global-inline-widget-inner-height",
+      "$common-content-padding": "$global-dropdown-content-padding",
+      "$common-overlay-content-border-bottom-width": "$global-dropdown-border-block-end-width",
+      "$common-dropdowneditor-overlay-flipped-border-top-width": "$global-dropdown-flipped-border-block-start-width"
+    },
+    "C2-button": {
+      "$button-border-color": "$button-normal-outlined-border-rest",
+      "$button-danger-active-bg": "$button-danger-contained-bg-active",
+      "$button-danger-bg": "$button-danger-contained-bg-rest",
+      "$button-danger-color": "$button-danger-contained-content-rest",
+      "$button-danger-focused-bg": "$button-danger-contained-bg-focused",
+      "$button-danger-hover-bg": "$button-danger-contained-bg-hovered",
+      "$button-danger-icon-color": "$button-danger-contained-icon-rest",
+      "$button-danger-outlined-active-bg": "$button-danger-outlined-bg-active",
+      "$button-danger-outlined-bg": "$button-danger-outlined-bg-rest",
+      "$button-danger-outlined-border-color": "$button-danger-outlined-border-rest",
+      "$button-danger-outlined-color": "$button-danger-outlined-content-rest",
+      "$button-danger-outlined-color-active": "$button-danger-outlined-content-active",
+      "$button-danger-outlined-color-hover": "$button-danger-outlined-content-hovered",
+      "$button-danger-outlined-focused-bg": "$button-danger-outlined-bg-focused",
+      "$button-danger-outlined-hover-bg": "$button-danger-outlined-bg-hovered",
+      "$button-danger-outlined-selected-bg": "$button-danger-outlined-bg-selected",
+      "$button-danger-outlined-selected-color": "$button-danger-outlined-content-selected",
+      "$button-danger-selected-bg": "$button-danger-contained-bg-selected",
+      "$button-danger-selected-color": "$button-danger-contained-content-selected",
+      "$button-danger-text-active-bg": "$button-danger-text-bg-active",
+      "$button-danger-text-bg": "$button-danger-text-bg-rest",
+      "$button-danger-text-color": "$button-danger-text-content-rest",
+      "$button-danger-text-color-active": "$button-danger-text-content-active",
+      "$button-danger-text-color-hover": "$button-danger-text-content-hovered",
+      "$button-danger-text-focused-bg": "$button-danger-text-bg-focused",
+      "$button-danger-text-hover-bg": "$button-danger-text-bg-hovered",
+      "$button-danger-text-selected-bg": "$button-danger-text-bg-selected",
+      "$button-danger-text-selected-color": "$button-danger-text-content-selected",
+      "$button-default-active-bg": "$button-default-contained-bg-active",
+      "$button-default-bg": "$button-default-contained-bg-rest",
+      "$button-default-color": "$button-default-contained-content-rest",
+      "$button-default-focused-bg": "$button-default-contained-bg-focused",
+      "$button-default-hover-bg": "$button-default-contained-bg-hovered",
+      "$button-default-icon-color": "$button-default-contained-icon-rest",
+      "$button-default-outlined-active-bg": "$button-default-outlined-bg-active",
+      "$button-default-outlined-bg": "$button-default-outlined-bg-rest",
+      "$button-default-outlined-border-color": "$button-default-outlined-border-rest",
+      "$button-default-outlined-color": "$button-default-outlined-content-rest",
+      "$button-default-outlined-color-active": "$button-default-outlined-content-active",
+      "$button-default-outlined-color-hover": "$button-default-outlined-content-hovered",
+      "$button-default-outlined-focused-bg": "$button-default-outlined-bg-focused",
+      "$button-default-outlined-hover-bg": "$button-default-outlined-bg-hovered",
+      "$button-default-outlined-selected-bg": "$button-default-outlined-bg-selected",
+      "$button-default-outlined-selected-color": "$button-default-outlined-content-selected",
+      "$button-default-selected-bg": "$button-default-contained-bg-selected",
+      "$button-default-selected-color": "$button-default-contained-content-selected",
+      "$button-default-text-active-bg": "$button-default-text-bg-active",
+      "$button-default-text-bg": "$button-default-text-bg-rest",
+      "$button-default-text-color": "$button-default-text-content-rest",
+      "$button-default-text-color-active": "$button-default-text-content-active",
+      "$button-default-text-color-hover": "$button-default-text-content-hovered",
+      "$button-default-text-focused-bg": "$button-default-text-bg-focused",
+      "$button-default-text-hover-bg": "$button-default-text-bg-hovered",
+      "$button-default-text-selected-bg": "$button-default-text-bg-selected",
+      "$button-default-text-selected-color": "$button-default-text-content-selected",
+      "$button-disabled-background": "$button-contained-bg-disabled",
+      "$button-disabled-text-color": "$button-content-disabled",
+      "$button-normal-active-bg": "$button-normal-contained-bg-active",
+      "$button-normal-bg": "$button-normal-contained-bg-rest",
+      "$button-normal-color": "$button-normal-contained-content-rest",
+      "$button-normal-focused-bg": "$button-normal-contained-bg-focused",
+      "$button-normal-hover-bg": "$button-normal-contained-bg-hovered",
+      "$button-normal-icon-color": "$button-normal-contained-icon-rest",
+      "$button-normal-outlined-active-bg": "$button-normal-outlined-bg-active",
+      "$button-normal-outlined-bg": "$button-normal-outlined-bg-rest",
+      "$button-normal-outlined-focused-bg": "$button-normal-outlined-bg-focused",
+      "$button-normal-outlined-hover-bg": "$button-normal-outlined-bg-hovered",
+      "$button-normal-outlined-selected-bg": "$button-normal-outlined-bg-selected",
+      "$button-normal-selected-bg": "$button-normal-contained-bg-selected",
+      "$button-normal-selected-color": "$button-normal-contained-content-selected",
+      "$button-normal-text-active-bg": "$button-normal-text-bg-active",
+      "$button-normal-text-bg": "$button-normal-text-bg-rest",
+      "$button-normal-text-focused-bg": "$button-normal-text-bg-focused",
+      "$button-normal-text-hover-bg": "$button-normal-text-bg-hovered",
+      "$button-normal-text-selected-bg": "$button-normal-text-bg-selected",
+      "$button-shadow-color": "$button-normal-shadow-rest",
+      "$button-success-active-bg": "$button-success-contained-bg-active",
+      "$button-success-bg": "$button-success-contained-bg-rest",
+      "$button-success-color": "$button-success-contained-content-rest",
+      "$button-success-focused-bg": "$button-success-contained-bg-focused",
+      "$button-success-hover-bg": "$button-success-contained-bg-hovered",
+      "$button-success-icon-color": "$button-success-contained-icon-rest",
+      "$button-success-outlined-active-bg": "$button-success-outlined-bg-active",
+      "$button-success-outlined-bg": "$button-success-outlined-bg-rest",
+      "$button-success-outlined-border-color": "$button-success-outlined-border-rest",
+      "$button-success-outlined-color": "$button-success-outlined-content-rest",
+      "$button-success-outlined-color-active": "$button-success-outlined-content-active",
+      "$button-success-outlined-color-hover": "$button-success-outlined-content-hovered",
+      "$button-success-outlined-focused-bg": "$button-success-outlined-bg-focused",
+      "$button-success-outlined-hover-bg": "$button-success-outlined-bg-hovered",
+      "$button-success-outlined-selected-bg": "$button-success-outlined-bg-selected",
+      "$button-success-outlined-selected-color": "$button-success-outlined-content-selected",
+      "$button-success-selected-bg": "$button-success-contained-bg-selected",
+      "$button-success-selected-color": "$button-success-contained-content-selected",
+      "$button-success-text-active-bg": "$button-success-text-bg-active",
+      "$button-success-text-bg": "$button-success-text-bg-rest",
+      "$button-success-text-color": "$button-success-text-content-rest",
+      "$button-success-text-color-active": "$button-success-text-content-active",
+      "$button-success-text-color-hover": "$button-success-text-content-hovered",
+      "$button-success-text-focused-bg": "$button-success-text-bg-focused",
+      "$button-success-text-hover-bg": "$button-success-text-bg-hovered",
+      "$button-success-text-selected-bg": "$button-success-text-bg-selected",
+      "$button-success-text-selected-color": "$button-success-text-content-selected"
+    },
+    "C2b-button-sizes": {
+      "$fluent-button-horizontal-padding": "$button-padding-inline",
+      "$fluent-button-vertical-padding": "$button-padding-block",
+      "$fluent-button-icon-text-padding": "$button-icon-text-padding-inline-start",
+      "$fluent-button-content-line-height": "$button-content-line-height",
+      "$fluent-button-text-line-height": "$button-text-line-height",
+      "$fluent-button-text-transform": "$button-text-transform",
+      "$fluent-button-text-font-weight": "$button-text-font-weight",
+      "$fluent-button-text-letter-spacing": "$button-text-letter-spacing",
+      "$fluent-button-box-shadow-size": "$button-box-shadow",
+      "$fluent-button-border-width": "$button-border-width"
+    },
+    "C3a-text-editor-colors": {
+      "$texteditor-color": "$text-editor-content-rest",
+      "$texteditor-placeholder-color": "$text-editor-placeholder-rest",
+      "$texteditor-outlined-bg": "$text-editor-outlined-bg-rest",
+      "$texteditor-outlined-bg-hover": "$text-editor-outlined-bg-hovered",
+      "$texteditor-outlined-bg-focused": "$text-editor-outlined-bg-focused",
+      "$texteditor-filled-bg": "$text-editor-filled-bg-rest",
+      "$texteditor-filled-bg-hover": "$text-editor-filled-bg-hovered",
+      "$texteditor-filled-bg-focused": "$text-editor-filled-bg-focused",
+      "$texteditor-underlined-bg": "$text-editor-underlined-bg-rest",
+      "$texteditor-underlined-bg-hover": "$text-editor-underlined-bg-hovered",
+      "$texteditor-underlined-bg-focused": "$text-editor-underlined-bg-focused",
+      "$texteditor-border-color": "$text-editor-border-rest",
+      "$texteditor-border-color-hover": "$text-editor-border-hovered",
+      "$texteditor-border-color-focused": "$text-editor-border-focused",
+      "$texteditor-border-color-disabled": "$text-editor-border-disabled",
+      "$texteditor-border-bottom-color": "$text-editor-line-rest",
+      "$texteditor-border-bottom-color-hover": "$text-editor-line-hovered",
+      "$texteditor-border-bottom-color-focused": "$text-editor-line-focused",
+      "$texteditor-indicator-border-color": "$text-editor-indicator-rest",
+      "$texteditor-button-clear-icon-color": "$text-editor-clear-button-icon-rest",
+      "$texteditor-invalid-focused-border-color": "$text-editor-invalid-border-focused",
+      "$texteditor-invalid-faded-border-color": "$text-editor-invalid-border-rest",
+      "$texteditor-invalid-color": "$text-editor-invalid-content-rest",
+      "$texteditor-disabled-text-color": "$text-editor-content-disabled",
+      "$texteditor-label-color": "$text-editor-label-content-rest",
+      "$texteditor-label-color-focused": "$text-editor-label-content-focused",
+      "$texteditor-input-border-radius": "$text-editor-input-border-radius",
+      "$texteditor-label-transition": "$text-editor-label-transition"
+    },
+    "C3b-text-editor-sizes": {
+      "$fluent-texteditor-line-height": "$text-editor-line-height",
+      "$fluent-texteditor-font-size": "$text-editor-font-size",
+      "$fluent-texteditor-input-height": "$text-editor-input-min-height",
+      "$fluent-texteditor-label-font-size": "$text-editor-label-font-size",
+      "$fluent-texteditor-label-top-offset": "$text-editor-label-offset",
+      "$fluent-texteditor-label-outside-top-offset": "$text-editor-label-outside-offset",
+      "$fluent-texteditor-label-outside-height": "$text-editor-label-outside-height",
+      "$fluent-texteditor-label-inset": "$text-editor-label-inset",
+      "$fluent-texteditor-label-margin-bottom": "$text-editor-label-margin-block-end",
+      "$fluent-filled-texteditor-input-horizontal-padding": "$text-editor-input-filled-padding-inline",
+      "$fluent-filled-texteditor-input-top-padding": "$text-editor-input-filled-padding-block-start",
+      "$fluent-filled-texteditor-input-bottom-padding": "$text-editor-input-filled-padding-block-end",
+      "$fluent-filled-texteditor-input-with-label-top-padding": "$text-editor-input-filled-with-label-padding-block-start",
+      "$fluent-filled-texteditor-input-with-label-bottom-padding": "$text-editor-input-filled-with-label-padding-block-end",
+      "$fluent-filled-texteditor-input-padding": "$text-editor-input-filled-padding",
+      "$fluent-filled-texteditor-input-button-horizontal-padding": "$text-editor-button-filled-inset-inline-end",
+      "$fluent-standard-texteditor-input-top-padding": "$text-editor-input-underlined-padding-block-start",
+      "$fluent-standard-texteditor-input-bottom-padding": "$text-editor-input-underlined-padding-block-end",
+      "$fluent-standard-texteditor-with-label-input-top-padding": "$text-editor-input-underlined-with-label-padding-block-start",
+      "$fluent-standard-texteditor-with-label-input-bottom-padding": "$text-editor-input-underlined-with-label-padding-block-end",
+      "$text-editor-standard-input-padding-inline": "$text-editor-input-underlined-padding-inline",
+      "$fluent-underlined-editor-button-height": "$text-editor-button-underlined-height",
+      "$texteditor-icon-container-size": "$text-editor-icon-container-size",
+      "$texteditor-spin-button-horizontal-padding": "$text-editor-spin-button-padding-inline",
+      "$fluent-editor-border-width": "$text-editor-border-width",
+      "$fluent-editor-custom-button-margin": "$text-editor-custom-button-margin",
+      "$fluent-texteditor-before-left": "$text-editor-line-inset-inline-start",
+      "$fluent-texteditor-before-bottom": "$text-editor-line-inset-block-end",
+      "$fluent-texteditor-before-right": "$text-editor-line-inset-inline-end",
+      "$fluent-texteditor-state-active-border-bottom": "$text-editor-line-active-border-block-end",
+      "$fluent-texteditor-state-active-border-bottom-width": "$text-editor-line-active-border-block-end-width",
+      "$fluent-texteditor-state-focused-border-bottom-width": "$text-editor-line-focused-border-block-end-width",
+      "$fluent-texteditor-clear-button-area-width": "$text-editor-clear-button-width",
+      "$fluent-texteditor-invalid-badge-size": "$text-editor-invalid-badge-size"
+    },
+    "C3c-state-last": {
+      "$text-editor-line-active-border-block-end": "$text-editor-line-border-block-end-active",
+      "$text-editor-line-active-border-block-end-width": "$text-editor-line-border-block-end-width-active",
+      "$text-editor-line-focused-border-block-end-width": "$text-editor-line-border-block-end-width-focused"
+    },
+    "C4-ownership-fixes": {
+      "$text-editor-inline-block-height": "$text-editor-label-height",
+      "$splitter-inactive-color": "$splitter-bar-border-rest",
+      "$splitter-bg": "$splitter-bar-bg-active",
+      "$menu-item-color-disabled": "$menu-item-content-disabled"
+    },
+    "C5-editor-cluster": {
+      "$textbox-foreground-disabled": "$text-box-content-disabled",
+      "$textbox-search-icon-size": "$text-box-search-icon-size",
+      "$fluent-textbox-searchbar-padding-bottom": "$text-box-search-bar-padding-block-end",
+      "$textarea-content-line-height": "$text-area-content-line-height",
+      "$selectbox-list-bg": "$select-box-list-bg-rest",
+      "$numberbox-spin-icon-color": "$number-box-spin-icon-rest",
+      "$numberbox-spin-icon-background-hover": "$number-box-spin-bg-hovered",
+      "$numberbox-spin-icon-background-active": "$number-box-spin-bg-active",
+      "$numberbox-foreground-disabled": "$number-box-content-disabled",
+      "$fluent-numberbox-spin-idle-opacity": "$number-box-spin-opacity-rest",
+      "$fluent-numberbox-spin-container-width": "$number-box-spin-container-width",
+      "$fluent-numberbox-touch-friendly-spin-container-width": "$number-box-spin-container-touch-friendly-width",
+      "$fluent-datebox-overlay-item-margin": "$date-box-overlay-item-margin",
+      "$fluent-datebox-overlay-item-margin-adaptive": "$date-box-overlay-item-adaptive-margin",
+      "$fluent-datebox-popup-content-margin": "$date-box-popup-content-margin",
+      "$fluent-datebox-content-padding": "$date-box-content-padding",
+      "$fluent-datebox-datebox-container-cell-margin-top": "$date-box-container-cell-margin-block-start",
+      "$fluent-datebox-button-margin-right": "$date-box-button-margin-inline-end",
+      "$fluent-datebox-popup-title-min-height": "$date-box-popup-title-min-height",
+      "$fluent-datebox-texteditor-height": "$date-box-input-height",
+      "$fluent-datebox-popup-content-padding-top": "$date-box-popup-content-padding-block-start",
+      "$fluent-datebox-popup-content-padding-bottom": "$date-box-popup-content-padding-block-end",
+      "$fluent-datebox-button-min-width": "$date-box-button-min-width",
+      "$fluent-datebox-apply-button-margin-right": "$date-box-apply-button-margin-inline-end",
+      "$fluent-daterangebox-active-bar-horizontal-margin": "$date-range-box-active-bar-margin-inline",
+      "$fluent-daterangebox-custom-button-margin": "$date-range-box-custom-button-margin",
+      "$fluent-daterangebox-editor-filled-border-bottom-width": "$date-range-box-input-filled-border-block-end-width",
+      "$fluent-daterangebox-state-hover-border-bottom-width": "$date-range-box-border-block-end-width-hovered",
+      "$fluent-daterangebox-invalid-border-bottom-width": "$date-range-box-invalid-border-block-end-width",
+      "$lookup-icon-color": "$lookup-icon-rest",
+      "$lookup-icon-color-active": "$lookup-icon-active",
+      "$lookup-shadow": "$lookup-box-shadow",
+      "$lookup-field-height": "$lookup-field-min-height",
+      "$lookup-search-padding-vertical": "$lookup-search-padding-block",
+      "$lookup-search-padding-vertical-top": "$lookup-search-padding-block-start",
+      "$lookup-search-padding-horizontal": "$lookup-search-padding-inline",
+      "$lookup-arrow-border-radius": "$lookup-arrow-border-radius",
+      "$fluent-lookup-popup-content-top": "$lookup-popup-content-inset-block-start",
+      "$tagbox-tag-color": "$tag-box-tag-content-rest",
+      "$tagbox-tag-bg": "$tag-box-tag-bg-rest",
+      "$tagbox-tag-hover-bg": "$tag-box-tag-bg-hovered",
+      "$tagbox-tag-active-color": "$tag-box-tag-content-active",
+      "$tagbox-tag-button-remove-bg": "$tag-box-tag-remove-button-content-rest",
+      "$tagbox-tag-border-color-focused": "$tag-box-tag-border-focused",
+      "$tagbox-select-all-border-color": "$tag-box-select-all-line-rest",
+      "$tagbox-tag-foreground-disabled": "$tag-box-tag-content-disabled",
+      "$tagbox-tag-disabled": "$tag-box-tag-bg-disabled",
+      "$tagbox-border-color-disabled": "$tag-box-border-disabled",
+      "$fluent-tagbox-tag-content-padding-left": "$tag-box-tag-content-padding-inline-start",
+      "$fluent-tagbox-tag-content-padding-right": "$tag-box-tag-content-padding-inline-end",
+      "$fluent-tagbox-tag-content-vertical-padding": "$tag-box-tag-content-padding-block",
+      "$fluent-tagbox-tag-content-font-size": "$tag-box-tag-content-font-size",
+      "$fluent-tagbox-tag-container-padding-left": "$tag-box-tag-container-padding-inline-start",
+      "$fluent-tagbox-tag-container-vertical-padding": "$tag-box-tag-container-padding-block",
+      "$fluent-tagbox-tag-height": "$tag-box-tag-size",
+      "$fluent-tagbox-select-all-padding-bottom": "$tag-box-select-all-padding-block-end",
+      "$fluent-tagbox-select-all-margin-bottom": "$tag-box-select-all-margin-block-end",
+      "$tagbox-tag-border-radius": "$tag-box-tag-border-radius",
+      "$fluent-tagbox-filled-with-label-top-padding": "$tag-box-filled-with-label-padding-block-start",
+      "$fluent-tagbox-filled-with-label-bottom-padding": "$tag-box-filled-with-label-padding-block-end",
+      "$fluent-tagbox-tag-content-line-height": "$tag-box-tag-content-line-height",
+      "$fluent-tagbox-tag-container-gap": "$tag-box-tag-container-gap",
+      "$fluent-tagbox-tag-border-width": "$tag-box-tag-border-width",
+      "$fluent-tagbox-list-select-all-border-bottom": "$tag-box-list-select-all-border-block-end",
+      "$fluent-tagbox-tag-content-min-width": "$tag-box-tag-content-min-width",
+      "$colorbox-preview-icon-color": "$color-box-preview-icon-rest",
+      "$colorbox-foreground-disabled": "$color-box-content-disabled",
+      "$fluent-colorbox-overlay-padding": "$color-box-overlay-content-padding",
+      "$fluent-colorbox-overlay-padding-2": "$color-box-overlay-padding",
+      "$fluent-colorbox-preview-padding": "$color-box-preview-inset-inline-start",
+      "$fluent-colorbox-preview-icon-size": "$color-box-preview-icon-size",
+      "$fluent-colorbox-preview-width": "$color-box-preview-min-width",
+      "$fluent-colorbox-color-result-preview-border": "$color-box-preview-border",
+      "$fluent-colorbox-texteditor-input-container-width": "$color-box-input-container-width",
+      "$fluent-colorbox-texteditor-input-container-height": "$color-box-input-container-height",
+      "$fluent-colorbox-texteditor-input-container-inset-inline-start": "$color-box-input-container-inset-inline-start",
+      "$fluent-colorbox-toolbar-item-padding-right": "$color-box-toolbar-item-padding-inline-end",
+      "$fluent-dropdowneditor-container-button-size": "$drop-down-editor-button-size",
+      "$fluent-dropdowneditor-invalid-badge-offset": "$drop-down-editor-invalid-badge-inset-inline-end",
+      "$fluent-dropdowneditor-invalid-badge-with-clear-offset": "$drop-down-editor-invalid-badge-with-clear-inset-inline-end",
+      "$fluent-dropdowneditor-invalid-badge-size": "$drop-down-editor-invalid-badge-size",
+      "$dropdowneditor-icon-color": "$drop-down-editor-icon-rest",
+      "$dropdowneditor-icon-active-color": "$drop-down-editor-icon-active",
+      "$fluent-dropdowneditor-icon-idle-opacity": "$drop-down-editor-icon-opacity-rest",
+      "$fluent-dropdowneditor-list-font-size": "$drop-down-editor-list-font-size",
+      "$fluent-dropdowneditor-list-line-height": "$drop-down-editor-list-line-height",
+      "$fluent-dropdownlist-list-min-height": "$drop-down-list-min-height"
+    },
+    "C6-grid-colors": {
+      "$datagrid-base-color": "$grid-content-rest",
+      "$datagrid-base-background-color": "$grid-bg-rest",
+      "$datagrid-border-color": "$grid-border-rest",
+      "$datagrid-border": "$grid-border",
+      "$datagrid-focused-border-color": "$grid-border-focused",
+      "$gridbase-icon-color": "$grid-icon-rest",
+      "$datagrid-hover-bg": "$grid-row-bg-hovered",
+      "$datagrid-row-hovered-color": "$grid-row-content-hovered",
+      "$datagrid-row-focused-bg": "$grid-row-bg-focused",
+      "$datagrid-row-focused-color": "$grid-row-content-focused",
+      "$datagrid-row-selected-color": "$grid-row-content-selected",
+      "$datagrid-row-selected-border-color": "$grid-row-border-selected",
+      "$datagrid-selection-bg": "$grid-selection-bg-rest",
+      "$datagrid-row-alternation-bg": "$grid-row-alternation-bg-rest",
+      "$datagrid-row-error-color": "$grid-row-error-content-rest",
+      "$datagrid-row-error-bg": "$grid-row-error-bg-rest",
+      "$datagrid-row-removed-bg": "$grid-row-removed-bg-rest",
+      "$datagrid-row-invalid-faded-border-color": "$grid-row-invalid-bg-rest",
+      "$datagrid-cell-modified-border-color": "$grid-cell-modified-bg-rest",
+      "$datagrid-cell-removed-border-color": "$grid-cell-removed-border-rest",
+      "$datagrid-cell-removed-text-color": "$grid-cell-removed-content-rest",
+      "$datagrid-group-row-color": "$grid-group-row-content-rest",
+      "$datagrid-group-row-bg": "$grid-group-row-bg-rest",
+      "$datagrid-master-detail-cell-bg": "$grid-master-detail-cell-bg-rest",
+      "$datagrid-summary-color": "$grid-summary-content-rest",
+      "$datagrid-summary-bg": "$grid-summary-bg-rest",
+      "$datagrid-header-drag-bg": "$grid-drag-header-bg-rest",
+      "$datagrid-drag-header-border-color": "$grid-drag-header-border-rest",
+      "$datagrid-drag-header-shadow-color": "$grid-drag-header-shadow-ambient-rest",
+      "$datagrid-drag-header-second-shadow-color": "$grid-drag-header-shadow-key-rest",
+      "$datagrid-draggable-column-text-color": "$grid-draggable-column-content-rest",
+      "$datagrid-column-separator-bg": "$grid-column-separator-bg-rest",
+      "$header-filter-color": "$grid-header-filter-icon-rest",
+      "$header-filter-color-empty": "$grid-header-filter-empty-icon-rest",
+      "$datagrid-active-header-filter-icon-color": "$grid-header-filter-icon-active",
+      "$datagrid-filter-row-background-color": "$grid-filter-row-bg-rest",
+      "$datagrid-filter-panel-color": "$grid-filter-panel-content-rest",
+      "$datagrid-columnchooser-bg": "$grid-column-chooser-bg-rest",
+      "$datagrid-columnchooser-item-bg": "$grid-column-chooser-item-bg-rest",
+      "$datagrid-columnchooser-item-color": "$grid-column-chooser-item-content-rest",
+      "$datagrid-columnchooser-message-color": "$grid-column-chooser-message-content-rest",
+      "$datagrid-nodata-color": "$grid-no-data-content-rest",
+      "$datagrid-search-color": "$grid-search-content-rest",
+      "$datagrid-search-bg": "$grid-search-bg-rest",
+      "$datagrid-chevron-icon-color": "$grid-chevron-icon-rest",
+      "$datagrid-link-color": "$grid-link-content-rest",
+      "$datagrid-editor-bg": "$grid-editor-bg-rest",
+      "$datagrid-drop-highlight-bg": "$grid-drop-highlight-bg-rest",
+      "$datagrid-drop-highlight-color": "$grid-drop-highlight-content-rest",
+      "$datagrid-text-stub-background-image-path": "$grid-text-stub-bg-rest",
+      "$gridbase-accent": "$grid-ai-chat-message-pending-content-rest",
+      "$gridbase-success": "$grid-ai-chat-message-success-content-rest",
+      "$gridbase-danger": "$grid-ai-chat-message-error-content-rest",
+      "$gridbase-border-color": "$grid-ai-chat-message-border-rest",
+      "$datagrid-columnchooser-font-weight": "$grid-column-chooser-font-weight",
+      "$datagrid-text-link-disabled-opacity": "$grid-text-link-opacity-disabled",
+      "$datagrid-icon-link-disabled-opacity": "$grid-icon-link-opacity-disabled"
+    },
+    "C7-grid-sizes": {
+      "$fluent-grid-base-drag-header-first-shadow": "$grid-drag-header-box-shadow-ambient",
+      "$fluent-grid-base-drag-header-second-shadow": "$grid-drag-header-box-shadow-key",
+      "$fluent-grid-base-group-panel-message-line-height": "$grid-group-panel-message-line-height",
+      "$datagrid-border-radius": "$grid-border-radius",
+      "$fluent-grid-base-cell-height": "$grid-cell-height",
+      "$fluent-grid-base-header-height": "$grid-header-height",
+      "$fluent-grid-base-cell-line-height": "$grid-cell-line-height",
+      "$fluent-grid-base-cell-font-size": "$grid-cell-font-size",
+      "$fluent-grid-base-checkbox-size": "$grid-checkbox-size",
+      "$fluent-grid-base-cell-horizontal-padding": "$grid-cell-padding-inline",
+      "$fluent-grid-base-texteditor-input-padding": "$grid-editor-input-padding",
+      "$fluent-grid-base-menu-item-padding": "$grid-menu-item-padding",
+      "$fluent-grid-base-column-chooser-horizontal-padding": "$grid-column-chooser-padding-inline",
+      "$fluent-grid-base-column-chooser-paddings": "$grid-column-chooser-padding",
+      "$fluent-grid-base-header-panel-padding": "$grid-header-panel-padding",
+      "$fluent-grid-base-grouppanel-item-margin": "$grid-group-panel-item-margin-inline",
+      "$fluent-grid-base-command-edit-column-width": "$grid-command-edit-column-width",
+      "$fluent-grid-base-command-edit-column-with-icons-width": "$grid-command-edit-column-with-icons-width",
+      "$fluent-grid-base-adaptive-column-height": "$grid-adaptive-column-height",
+      "$fluent-grid-base-treeview-search-margin": "$grid-tree-view-search-margin-block-end",
+      "$fluent-grid-base-nodata-font-size": "$grid-no-data-font-size",
+      "$fluent-filter-row-between-editor-padding": "$grid-filter-row-editor-padding-inline",
+      "$fluent-grid-base-treeview-select-all-item-offset": "$grid-tree-view-select-all-item-padding-inline-start",
+      "$fluent-grid-base-header-line-height": "$grid-header-line-height",
+      "$fluent-grid-base-header-icon-size": "$grid-header-icon-size",
+      "$fluent-grid-base-header-icon-container-size": "$grid-header-icon-container-size",
+      "$fluent-grid-base-column-chooser-item-margin": "$grid-column-chooser-item-margin",
+      "$fluent-command-edit-icon-margin": "$grid-command-edit-icon-margin",
+      "$fluent-command-edit-text-margin": "$grid-command-edit-text-margin",
+      "$fluent-command-edit-icon-size": "$grid-command-edit-icon-size",
+      "$fluent-filter-panel-icon-size": "$grid-filter-panel-icon-size",
+      "$fluent-grid-base-filter-icon-size": "$grid-menu-item-icon-size",
+      "$fluent-grid-base-command-ai-chatsparkleoutline-icon-size": "$grid-command-ai-icon-size",
+      "$fluent-grid-base-command-ai-text-content-padding": "$grid-command-ai-content-padding-inline-start",
+      "$fluent-grid-base-command-ai-header-button-offset": "$grid-command-ai-button-max-width",
+      "$fluent-grid-base-ai-prompt-editor-progressbar-height": "$grid-ai-prompt-editor-progress-bar-height",
+      "$fluent-grid-base-header-cell-font-size": "$grid-header-cell-font-size",
+      "$fluent-grid-base-icon-button-border-radius": "$grid-icon-button-border-radius",
+      "$fluent-grid-base-root-margin-left": "$grid-margin-inline-start",
+      "$fluent-grid-base-icon-margin": "$grid-icon-margin",
+      "$fluent-grid-base-icon-filter-operation-default-margin-top": "$grid-filter-operation-icon-margin-block-start",
+      "$fluent-grid-base-sort-index-icon-padding-right": "$grid-sort-index-icon-padding-inline-end",
+      "$fluent-grid-base-sort-index-icon-margin-left": "$grid-sort-index-icon-margin-inline-start",
+      "$fluent-grid-base-sort-index-icon-bottom": "$grid-sort-index-icon-inset-block-end",
+      "$fluent-grid-base-sort-index-icon-margin-left-219": "$grid-header-cell-sort-index-margin-inline-start",
+      "$fluent-grid-base-error-message-padding-right": "$grid-error-message-padding-inline-end",
+      "$fluent-grid-base-treeview-node-padding-left": "$grid-tree-view-node-padding-inline-start",
+      "$fluent-grid-base-column-chooser-list-item-margin": "$grid-column-chooser-list-item-margin",
+      "$fluent-grid-base-column-chooser-item-height": "$grid-column-chooser-item-height",
+      "$fluent-grid-base-after-right": "$grid-after-inset-inline-end",
+      "$fluent-grid-base-overlay-content-padding": "$grid-overlay-content-padding",
+      "$fluent-grid-base-revert-button-margin": "$grid-revert-button-margin",
+      "$fluent-grid-base-content-padding": "$grid-content-padding",
+      "$fluent-grid-base-content-padding-993": "$grid-filter-panel-padding",
+      "$fluent-grid-base-header-row-padding-top": "$grid-header-row-padding-block-start",
+      "$fluent-grid-base-header-row-padding-bottom": "$grid-header-row-padding-block-end",
+      "$fluent-grid-base-validation-pending-padding": "$grid-validation-pending-padding",
+      "$fluent-grid-base-row-removed-border-top": "$grid-row-removed-border-block-start",
+      "$fluent-grid-base-row-removed-border-bottom": "$grid-row-removed-border-block-end",
+      "$fluent-grid-base-popup-title-border-bottom": "$grid-popup-title-border-block-end",
+      "$fluent-grid-base-row-focused-border-top": "$grid-row-border-block-start-focused",
+      "$fluent-grid-base-row-lines-border-top": "$grid-row-lines-border-block-start",
+      "$fluent-grid-base-row-lines-border-bottom": "$grid-row-lines-border-block-end",
+      "$fluent-grid-base-row-lines-border-left": "$grid-row-lines-border-inline-start",
+      "$fluent-grid-base-pointer-events-none-border-right": "$grid-cell-border-inline-end",
+      "$fluent-grid-base-border-hidden": "$grid-hidden-border",
+      "$fluent-grid-base-row-border": "$grid-row-border",
+      "$fluent-grid-base-link-icon-min-width": "$grid-link-icon-min-width",
+      "$fluent-grid-base-texteditor-input-border-bottom-width": "$grid-editor-input-border-block-end-width",
+      "$fluent-grid-base-cell-vertical-padding": "$grid-cell-padding-block",
+      "$fluent-grid-base-cell-padding": "$grid-cell-padding",
+      "$fluent-grid-base-header-cell-vertical-padding": "$grid-header-cell-padding-block",
+      "$fluent-grid-base-command-select-column-width": "$grid-command-select-column-width",
+      "$ai-chat-message-icon-size": "$grid-ai-chat-message-icon-size",
+      "$grid-masterdetail-padding": "$grid-master-detail-padding"
+    },
+    "C8-grid-family": {
+      "$fluent-datagrid-grouppanel-item-bg": "$data-grid-group-panel-item-bg-rest",
+      "$datagrid-accent": "$data-grid-block-separator-bg-rest",
+      "$datagrid-border-color-disabled": "$data-grid-group-panel-item-border-rest",
+      "$fluent-datagrid-cell-padding": "$data-grid-cell-padding",
+      "$fluent-datagrid-grouppanel-item-font-weight": "$data-grid-group-panel-item-font-weight",
+      "$fluent-datagrid-group-row-font-weight": "$data-grid-group-row-font-weight",
+      "$fluent-datagrid-grouppanel-item-border-width": "$data-grid-group-panel-item-border-width",
+      "$fluent-datagrid-group-panel-item-padding": "$data-grid-group-panel-item-padding",
+      "$fluent-datagrid-header-filter-outline": "$data-grid-outline-focused",
+      "$fluent-datagrid-header-filter-outline-offset": "$data-grid-outline-offset-focused",
+      "$fluent-datagrid-filter-panel-clear-filter-outline-offset": "$data-grid-filter-panel-outline-offset-focused",
+      "$fluent-datagrid-button-margin-left": "$data-grid-form-buttons-margin-inline-start",
+      "$fluent-datagrid-button-margin-top": "$data-grid-form-buttons-margin-block-start",
+      "$fluent-datagrid-button-margin-right": "$data-grid-form-buttons-rtl-margin-inline-start",
+      "$fluent-datagrid-error-message-margin-bottom": "$data-grid-error-message-margin-block-end",
+      "$fluent-datagrid-group-row-border": "$data-grid-group-row-border",
+      "$fluent-datagrid-sticky-column-border": "$data-grid-sticky-column-border",
+      "$fluent-datagrid-cell-focus-outline": "$data-grid-cell-outline-focused",
+      "$fluent-datagrid-common-group-min-width": "$data-grid-group-panel-item-min-width",
+      "$fluent-datagrid-common-addrow-margin-right": "$data-grid-group-panel-item-margin-inline-end",
+      "$fluent-datagrid-common-form-buttons-margin-left": "$data-grid-group-panel-item-rtl-margin-inline-end",
+      "$fluent-datagrid-common-addrow-margin-left": "$data-grid-group-panel-item-sort-margin-inline-start",
+      "$fluent-datagrid-common-form-buttons-margin-right": "$data-grid-group-panel-item-sort-rtl-margin-inline-start",
+      "$fluent-datagrid-common-form-buttons-border-radius": "$data-grid-block-separator-border-radius",
+      "$treelist-chevron-icon-color": "$tree-list-chevron-icon-rest",
+      "$treelist-selection-chevron-icon-color": "$tree-list-chevron-icon-selected",
+      "$treelist-fluent-expand-icon-size": "$tree-list-expand-icon-size",
+      "$fluent-treelist-expandable-node-line-height": "$tree-list-empty-space-height",
+      "$fluent-treelist-sticky-column-border": "$tree-list-sticky-column-border",
+      "$fluent-treelist-cell-focus-outline": "$tree-list-cell-outline-focused",
+      "$fluent-treelist-header-filter-outline": "$tree-list-outline-focused",
+      "$fluent-treelist-header-filter-outline-offset": "$tree-list-outline-offset-focused",
+      "$fluent-treelist-button-margin-left": "$tree-list-form-buttons-margin-inline-start",
+      "$fluent-treelist-button-margin-top": "$tree-list-form-buttons-margin-block-start",
+      "$fluent-treelist-button-margin-right": "$tree-list-form-buttons-rtl-margin-inline-start",
+      "$fluent-treelist-error-message-margin-bottom": "$tree-list-error-message-margin-block-end",
+      "dataGrid:$area-field-border-radius": "$data-grid-group-panel-item-border-radius",
+      "dataGrid:$area-field-top-bottom-padding": "$data-grid-group-panel-item-padding-block"
+    },
+    "C8b-pivot-grid-area-field": {
+      "pivotGrid:$area-field-border-radius": "$pivot-grid-area-field-border-radius",
+      "pivotGrid:$area-field-top-bottom-padding": "$pivot-grid-area-field-padding-block"
+    },
+    "C9-small-folders": {
+      "$accordion-background-color": "$accordion-bg-rest",
+      "$accordion-color": "$accordion-content-rest",
+      "$accordion-disabled-color": "$accordion-content-disabled",
+      "$accordion-title-active-color": "$accordion-title-content-active",
+      "$accordion-title-bg-hover": "$accordion-title-bg-hovered",
+      "$accordion-title-color": "$accordion-title-content-rest",
+      "$badge-background-color-disabled": "$badge-bg-disabled",
+      "$badge-bg": "$badge-bg-rest",
+      "$badge-color": "$badge-content-rest",
+      "$badge-text-color-disabled": "$badge-content-disabled",
+      "$button-group-separator-color": "$button-group-separator-rest",
+      "$card-bg": "$card-bg-rest",
+      "$card-shadow": "$card-shadow-rest",
+      "$fluent-accordion-body-padding": "$accordion-body-padding",
+      "$fluent-accordion-item-opened-margin": "$accordion-item-opened-margin",
+      "$fluent-accordion-title-font-size": "$accordion-title-font-size",
+      "$fluent-accordion-title-font-weight": "$accordion-title-font-weight",
+      "$fluent-accordion-title-height": "$accordion-title-height",
+      "$fluent-accordion-title-horizontal-padding": "$accordion-title-padding-inline",
+      "$fluent-accordion-title-vertical-padding": "$accordion-title-padding-block",
+      "$fluent-actionsheet-item-margin": "$action-sheet-item-margin",
+      "$fluent-actionsheet-item-margin-value": "$action-sheet-item-margin-block-end",
+      "$fluent-badge-border-radius": "$badge-border-radius",
+      "$fluent-badge-font-size": "$badge-font-size",
+      "$fluent-badge-padding": "$badge-padding",
+      "$fluent-box-item-content-font-size": "$box-item-content-font-size",
+      "$fluent-buttongroup-button-mode-contained-border-inline-end-width": "$button-group-item-contained-border-inline-end-width",
+      "$fluent-buttongroup-mode-text-column-gap": "$button-group-text-column-gap",
+      "$fluent-card-card-margin": "$card-margin",
+      "$fluent-dropdownbutton-action-horizontal-padding": "$drop-down-button-action-padding-inline",
+      "$fluent-dropdownbutton-icon-spindown-right-size": "$drop-down-button-action-spindown-icon-size",
+      "$fluent-dropdownbutton-icon-spindown-size": "$drop-down-button-toggle-spindown-icon-size",
+      "$fluent-loadpanel-content-border": "$load-panel-content-border",
+      "$fluent-loadpanel-content-border-radius": "$load-panel-content-border-radius",
+      "$fluent-loadpanel-content-padding": "$load-panel-content-padding",
+      "$fluent-menu-horizontal-padding": "$menu-padding-inline",
+      "$fluent-menu-icon-to-text-offset": "$menu-item-icon-gap",
+      "$fluent-menu-item-line-height": "$menu-item-line-height",
+      "$fluent-menu-item-with-icon-horizontal-padding": "$menu-item-with-icon-padding-inline",
+      "$fluent-popover-popup-title-border-top-left-radius": "$popover-popup-title-border-start-start-radius",
+      "$fluent-popover-popup-title-border-top-right-radius": "$popover-popup-title-border-start-end-radius",
+      "$fluent-radiobutton-border-width": "$radio-button-border-width",
+      "$fluent-radiobutton-dot-size": "$radio-button-dot-size",
+      "$fluent-radiobutton-size": "$radio-button-size",
+      "$fluent-scrollable-scroll-height": "$scrollable-scroll-height",
+      "$fluent-scrollable-scroll-padding": "$scrollable-scroll-padding",
+      "$fluent-scrollable-scroll-width": "$scrollable-scroll-width",
+      "$fluent-scrollbar-size": "$scrollable-scrollbar-size",
+      "$fluent-scrollbar-size-thin": "$scrollable-scrollbar-thin-size",
+      "$fluent-sortable-clone-opacity": "$sortable-clone-opacity",
+      "$fluent-sortable-clone-shadow-color-first": "$sortable-clone-shadow-ambient-rest",
+      "$fluent-sortable-clone-shadow-color-second": "$sortable-clone-shadow-key-rest",
+      "$fluent-sortable-source-opacity": "$sortable-source-opacity",
+      "$fluent-splitter-resize-handle-gap": "$splitter-resize-handle-gap",
+      "$fluent-splitterbar-splitter-bar-width": "$splitter-bar-width",
+      "$fluent-splitterbar-splitter-border-width": "$splitter-bar-border-width",
+      "$fluent-tileview-wrapper-height": "$tile-view-wrapper-height",
+      "$fluent-tooltip-arrow-border-radius": "$tooltip-arrow-border-radius",
+      "$fluent-tooltip-font-size": "$tooltip-font-size",
+      "$fluent-tooltip-overlay-content-border": "$tooltip-overlay-content-border",
+      "$fluent-tooltip-overlay-content-min-height": "$tooltip-overlay-content-min-height",
+      "$fluent-tooltip-overlay-content-min-width": "$tooltip-overlay-content-min-width",
+      "$fluent-tooltip-padding": "$tooltip-padding",
+      "$fluent-tooltip-popup-content-padding": "$tooltip-popup-content-padding",
+      "$fluent-tooltip-shadow": "$tooltip-box-shadow",
+      "$fluent-validation-message-font-size": "$validation-message-font-size",
+      "$fluent-validation-message-horizontal-padding": "$validation-message-padding-inline",
+      "$fluent-validation-message-line-height": "$validation-message-line-height",
+      "$fluent-validation-message-vertical-padding": "$validation-message-padding-block",
+      "$fluent-validation-overlay-border-radius": "$validation-overlay-border-radius",
+      "$fluent-validationsummary-item-margin": "$validation-summary-item-margin",
+      "$icons-scrollview-pulldown-path": "$icon-pulldown-bg-rest",
+      "$loadpanel-content-bg": "$load-panel-content-bg-rest",
+      "$radiobutton-foreground-disabled": "$radio-button-content-disabled",
+      "$scrollable-bg": "$scrollable-bg-rest",
+      "$scrollable-scroll-bg": "$scrollable-scroll-bg-rest",
+      "$scrollable-scrollbar-bg": "$scrollable-scrollbar-bg-rest",
+      "$splitter-resize-handle-bg": "$splitter-resize-handle-bg-rest",
+      "$splitter-resize-handle-bg-hover": "$splitter-resize-handle-bg-hovered",
+      "$splitter-resize-handle-color": "$splitter-resize-handle-content-rest",
+      "$splitter-resize-handle-color-focused": "$splitter-resize-handle-content-focused",
+      "$splitter-resize-handle-color-hover": "$splitter-resize-handle-content-hovered",
+      "$tabpanel-border-color": "$tab-panel-border-rest",
+      "$tileview-active-bg": "$tile-view-bg-active",
+      "$tileview-active-color": "$tile-view-content-active",
+      "$tileview-bg": "$tile-view-bg-rest",
+      "$tileview-border-color": "$tile-view-border-rest",
+      "$tileview-color": "$tile-view-content-rest",
+      "$tileview-hover-bg": "$tile-view-bg-hovered",
+      "$tileview-hover-border-color": "$tile-view-border-hovered",
+      "$tileview-tile-border": "$tile-view-tile-border",
+      "$tooltip-bg": "$tooltip-bg-rest",
+      "$tooltip-color": "$tooltip-content-rest",
+      "$validation-message-background-color": "$validation-message-bg-rest",
+      "$validation-message-color": "$validation-message-content-rest",
+      "$validation-summary-color": "$validation-summary-content-rest"
+    },
+    "C9b-small-folders-tail": {
+      "$fluent-radio-value-container-padding": "$radio-button-value-container-padding-inline-end",
+      "$fluent-sortable-accent-border-color": "$sortable-placeholder-border-rest",
+      "$fluent-sortable-placeholder-border": "$sortable-placeholder-border",
+      "$fluent-sortable-placeholder-inside-border-width": "$sortable-placeholder-inside-border-width",
+      "$fluent-tabpanel-tabs-border-top": "$tab-panel-tabs-bottom-border",
+      "$fluent-tabpanel-tabs-border-bottom": "$tab-panel-tabs-top-border",
+      "$fluent-tabpanel-tabs-border-left": "$tab-panel-tabs-right-border",
+      "$fluent-tabpanel-tabs-border-right": "$tab-panel-tabs-left-border"
+    },
+    "C10-mechanical": {
+      "$calendar-bg": "$calendar-bg-rest",
+      "$calendar-hover-bg": "$calendar-bg-hovered",
+      "$calendar-invalid-border-color": "$calendar-invalid-border-rest",
+      "$calendar-invalid-border-color-focused": "$calendar-invalid-border-focused",
+      "$chat-background-color": "$chat-bg-rest",
+      "$chat-border-color": "$chat-border-rest",
+      "$checkbox-border-color": "$check-box-border-rest",
+      "$checkbox-border-color-active": "$check-box-border-active",
+      "$checkbox-border-color-disabled": "$check-box-border-disabled",
+      "$checkbox-border-color-hover": "$check-box-border-hovered",
+      "$checkbox-invalid-bg": "$check-box-invalid-bg-rest",
+      "$checkbox-invalid-bg-focused": "$check-box-invalid-bg-focused",
+      "$checkbox-invalid-bg-hover": "$check-box-invalid-bg-hovered",
+      "$checkbox-invalid-border-color": "$check-box-invalid-border-rest",
+      "$checkbox-invalid-border-color-focused": "$check-box-invalid-border-focused",
+      "$checkbox-invalid-border-color-hover": "$check-box-invalid-border-hovered",
+      "$checkbox-invalid-mark-color": "$check-box-invalid-mark-bg-rest",
+      "$checkbox-invalid-mark-color-focused": "$check-box-invalid-mark-bg-focused",
+      "$checkbox-invalid-mark-color-hover": "$check-box-invalid-mark-bg-hovered",
+      "$colorview-border-color": "$color-view-border-rest",
+      "$contextmenu-foreground-disabled": "$context-menu-content-disabled",
+      "$contextmenu-icon-color": "$context-menu-icon-rest",
+      "$contextmenu-shadow": "$context-menu-shadow-rest",
+      "$dateview-color": "$date-view-content-rest",
+      "$diagram-bg": "$diagram-bg-rest",
+      "$diagram-border-color": "$diagram-border-rest",
+      "$diagram-shadow": "$diagram-shadow-rest",
+      "$diagram-text-color": "$diagram-content-rest",
+      "$drawer-shader-background-color": "$drawer-backdrop-rest",
+      "$fieldset-field-label-color": "$fieldset-field-label-content-rest",
+      "$fieldset-field-value-invalid-color": "$fieldset-field-value-invalid-content-rest",
+      "$filemanager-bg": "$file-manager-bg-rest",
+      "$filemanager-border-color": "$file-manager-border-rest",
+      "$filemanager-icon-color": "$file-manager-icon-rest",
+      "$fileuploader-border-color": "$file-uploader-border-rest",
+      "$fluent-checkbox-arrow-font-size": "$check-box-arrow-font-size",
+      "$fluent-checkbox-arrow-icon-size": "$check-box-arrow-icon-size",
+      "$fluent-checkbox-border-width": "$check-box-border-width",
+      "$fluent-checkbox-container-size": "$tree-view-checkbox-container-size",
+      "$fluent-checkbox-icon-border-radius": "$check-box-icon-border-radius",
+      "$fluent-checkbox-icon-font-size": "$check-box-icon-font-size",
+      "$fluent-checkbox-indeterminate-icon-border-radius": "$check-box-indeterminate-icon-border-radius",
+      "$fluent-checkbox-indeterminate-icon-height": "$check-box-indeterminate-icon-height",
+      "$fluent-checkbox-indeterminate-icon-width": "$check-box-indeterminate-icon-width",
+      "$fluent-checkbox-text-padding-inline-start": "$check-box-text-padding-inline-start",
+      "$fluent-context-menu-border-radius": "$context-menu-border-radius",
+      "$fluent-context-menu-horizontal-padding": "$context-menu-padding-inline",
+      "$fluent-context-menu-item-border-radius": "$context-menu-item-border-radius",
+      "$fluent-context-menu-item-content-gap": "$context-menu-item-content-gap",
+      "$fluent-context-menu-item-text-padding-inline": "$context-menu-item-text-padding-inline",
+      "$fluent-context-menu-items-container-gap": "$context-menu-items-container-gap",
+      "$fluent-context-menu-items-container-padding": "$context-menu-items-container-padding",
+      "$fluent-dateview-hours-colon-font-size": "$date-view-hours-colon-font-size",
+      "$fluent-dateview-item-font-size": "$date-view-item-font-size",
+      "$fluent-dateview-item-selected-font-size": "$date-view-item-font-size-selected",
+      "$fluent-dateview-roller-height": "$date-view-roller-height",
+      "$fluent-dateview-roller-item-height": "$date-view-roller-item-height",
+      "$fluent-dateview-roller-min-width": "$date-view-roller-min-width",
+      "$fluent-dateview-roller-padding": "$date-view-roller-padding",
+      "$fluent-dropdownmenu-list-border-radius": "$drop-down-menu-list-border-radius",
+      "$fluent-dropdownmenu-list-min-width": "$drop-down-menu-list-min-width",
+      "$fluent-dropdownmenu-popup-content-padding": "$drop-down-menu-popup-content-padding",
+      "$fluent-dropdownmenu-section-horizontal-margin": "$drop-down-menu-section-margin-inline",
+      "$fluent-dropdownmenu-section-row-gap": "$drop-down-menu-section-row-gap",
+      "$fluent-field-min-height": "$fieldset-field-min-height",
+      "$fluent-field-value-bottom-padding": "$fieldset-field-value-bottom-padding",
+      "$fluent-field-value-horizontal-padding": "$fieldset-field-value-padding-inline",
+      "$fluent-field-value-top-padding": "$fieldset-field-value-top-padding",
+      "$fluent-field-vertical-margin": "$fieldset-field-margin-block",
+      "$fluent-fieldset-header-vertical-margin": "$fieldset-header-margin-block",
+      "$fluent-fieldset-horizontal-margin": "$fieldset-margin-inline",
+      "$fluent-fieldset-vertical-margin": "$fieldset-margin-block",
+      "$fluent-fileuploader-invalid-padding-top": "$file-uploader-invalid-padding-block-start",
+      "$fluent-fileuploader-vertical-padding": "$file-uploader-padding-block",
+      "$fluent-filterbuilder-text-border-radius": "$filter-builder-text-border-radius",
+      "$fluent-form-default-top-padding": "$form-default-top-padding",
+      "$fluent-gallery-indicator-height": "$gallery-indicator-height",
+      "$fluent-gallery-indicator-item-border": "$gallery-indicator-item-border",
+      "$fluent-gallery-indicator-item-margin": "$gallery-indicator-item-margin",
+      "$fluent-gallery-indicator-item-selected-border": "$gallery-indicator-item-border-selected",
+      "$fluent-gallery-indicator-selected-size": "$gallery-indicator-size-selected",
+      "$fluent-gallery-indicator-size": "$gallery-indicator-size",
+      "$fluent-gallery-nav-icon-font-size": "$gallery-nav-icon-font-size",
+      "$fluent-html-editor-horizontal-padding": "$html-editor-padding-inline",
+      "$fluent-html-editor-vertical-padding": "$html-editor-padding-block",
+      "$fluent-list-border": "$list-border",
+      "$fluent-list-border-width": "$list-border-width",
+      "$fluent-list-bottom-padding": "$list-bottom-padding",
+      "$fluent-list-empty-message-min-height": "$list-empty-message-min-height",
+      "$fluent-list-group-header-font-weight": "$list-group-header-font-weight",
+      "$fluent-list-group-header-vertical-padding": "$list-group-header-padding-block",
+      "$fluent-list-item-border": "$list-item-border",
+      "$fluent-list-item-border-width": "$list-item-border-width",
+      "$fluent-list-item-gap": "$list-item-gap",
+      "$fluent-list-item-height": "$list-item-height",
+      "$fluent-list-item-horizontal-padding": "$list-item-padding-inline",
+      "$fluent-list-item-margin-inline": "$list-item-margin-inline",
+      "$fluent-list-item-vertical-padding": "$list-item-padding-block",
+      "$fluent-list-items-row-gap": "$list-items-row-gap",
+      "$fluent-list-next-button-horizontal-padding": "$list-next-button-padding-inline",
+      "$fluent-list-searchbox-margin-bottom": "$list-search-box-margin-block-end",
+      "$fluent-list-select-all-height": "$list-select-all-height",
+      "$fluent-list-vertical-padding": "$list-padding-block",
+      "$fluent-menu-item-content-padding-inline-start": "$menu-item-content-padding-inline-start",
+      "$fluent-menu-separator-margin-bottom": "$menu-separator-margin-block-end",
+      "$fluent-menu-separator-margin-inline-end": "$menu-separator-margin-inline-end",
+      "$fluent-menu-treeview-border": "$menu-tree-view-border",
+      "$fluent-menu-treeview-node-padding": "$menu-tree-view-node-padding",
+      "$fluent-menu-vertical-padding": "$menu-padding-block",
+      "$fluent-pagination-navbutton-height": "$pagination-nav-button-height",
+      "$fluent-pagination-navbutton-icon-size": "$pagination-nav-button-icon-size",
+      "$fluent-pagination-navbutton-paddings": "$pagination-nav-button-padding",
+      "$fluent-pagination-navigate-button-height": "$pagination-navigate-button-height",
+      "$fluent-pagination-navigate-button-width": "$pagination-navigate-button-width",
+      "$fluent-pagination-paddings": "$pagination-padding",
+      "$fluent-pagination-page-border-radius": "$pagination-page-border-radius",
+      "$fluent-pagination-page-font-size": "$pagination-page-font-size",
+      "$fluent-pagination-page-horizontal-padding": "$pagination-page-padding-inline",
+      "$fluent-pagination-page-index-width": "$pagination-page-index-width",
+      "$fluent-pagination-page-line-height": "$pagination-page-line-height",
+      "$fluent-pagination-page-margin-left": "$pagination-page-margin-inline-start",
+      "$fluent-pagination-page-margin-right": "$pagination-page-margin-inline-end",
+      "$fluent-pagination-page-padding": "$pagination-page-padding",
+      "$fluent-pagination-pages-count-padding-left": "$pagination-pages-count-padding-inline-start",
+      "$fluent-pagination-selected-font-weight": "$pagination-font-weight-selected",
+      "$fluent-pagination-separator-padding-left": "$pagination-separator-padding-inline-start",
+      "$fluent-pagination-separator-padding-right": "$pagination-separator-padding-inline-end",
+      "$fluent-pagination-separator-paddings": "$pagination-separator-padding",
+      "$fluent-pivotgrid-expanded-padding": "$pivot-grid-expanded-padding",
+      "$fluent-popup-bottom-toolbar-height": "$popup-bottom-toolbar-height",
+      "$fluent-popup-button-margin": "$popup-button-margin",
+      "$fluent-popup-content-padding": "$popup-content-padding",
+      "$fluent-popup-content-shadow": "$popup-content-box-shadow",
+      "$fluent-popup-content-vertical-padding": "$popup-content-padding-block",
+      "$fluent-popup-dialog-message-padding": "$popup-dialog-message-padding",
+      "$fluent-popup-dialog-shader-bg": "$popup-dialog-backdrop-rest",
+      "$fluent-popup-focused-content-shadow": "$popup-content-box-shadow-focused",
+      "$fluent-popup-title-min-height": "$popup-title-min-height",
+      "$fluent-popup-title-padding": "$popup-title-padding",
+      "$fluent-popup-toolbar-height": "$popup-toolbar-height",
+      "$fluent-popup-toolbar-horizontal-padding": "$popup-toolbar-padding-inline",
+      "$fluent-popup-toolbar-item-spacing": "$popup-toolbar-item-spacing",
+      "$fluent-popup-toolbar-label-font-size": "$popup-toolbar-label-font-size",
+      "$fluent-progressbar-status-font-size": "$progress-bar-status-font-size",
+      "$fluent-progressbar-status-padding-left": "$progress-bar-status-padding-inline-start",
+      "$fluent-progressbar-status-padding-right": "$progress-bar-status-padding-inline-end",
+      "$fluent-radio-button-vertical-margin": "$radio-group-radio-button-margin-block",
+      "$fluent-radiogroup-collection-column-gap": "$radio-group-collection-column-gap",
+      "$fluent-scheduler-rtl-padding": "$scheduler-rtl-padding",
+      "$fluent-scrollview-icon-pulldown-padding": "$scroll-view-icon-pull-down-padding",
+      "$fluent-scrollview-load-indicator-font-size": "$scroll-view-load-indicator-font-size",
+      "$fluent-scrollview-pull-down-image-height": "$scroll-view-pull-down-image-height",
+      "$fluent-scrollview-pull-down-image-margin": "$scroll-view-pull-down-image-margin",
+      "$fluent-scrollview-pull-down-indicator-padding": "$scroll-view-pull-down-indicator-padding",
+      "$fluent-scrollview-pull-down-indicator-width": "$scroll-view-pull-down-indicator-width",
+      "$fluent-scrollview-pull-down-text-margin-left": "$scroll-view-pull-down-text-margin-inline-start",
+      "$fluent-scrollview-pulldown-icon-font-size": "$scroll-view-pull-down-icon-font-size",
+      "$fluent-scrollview-rtl-margin-right": "$scroll-view-rtl-margin-inline-end",
+      "$fluent-scrollview-scrollbottom-image-height": "$scroll-view-scroll-bottom-image-height",
+      "$fluent-scrollview-scrollbottom-image-width": "$scroll-view-scroll-bottom-image-width",
+      "$fluent-scrollview-scrollbottom-indicator-margin": "$scroll-view-scroll-bottom-indicator-margin",
+      "$fluent-scrollview-scrollbottom-padding": "$scroll-view-scroll-bottom-padding",
+      "$fluent-scrollview-top-pocket-height": "$scroll-view-top-pocket-height",
+      "$fluent-scrollview-top-pocket-width": "$scroll-view-top-pocket-width",
+      "$fluent-select-all-item-padding": "$tree-view-select-all-item-padding",
+      "$fluent-slider-bar-bg": "$slider-bar-bg-rest",
+      "$fluent-slider-bar-disabled-bg": "$slider-bar-bg-disabled",
+      "$fluent-slider-disabled-bg": "$slider-bg-disabled",
+      "$fluent-slider-handle-border-width": "$slider-handle-border-width",
+      "$fluent-slider-handle-inner-border-width": "$slider-handle-inner-border-width",
+      "$fluent-slider-handle-size": "$slider-handle-size",
+      "$fluent-slider-height": "$slider-height",
+      "$fluent-slider-radius": "$slider-border-radius",
+      "$fluent-slider-tooltip-color": "$slider-tooltip-content-rest",
+      "$fluent-slider-tooltip-width": "$slider-tooltip-width",
+      "$fluent-slider-track-border-radius": "$slider-track-border-radius",
+      "$fluent-slider-track-height": "$slider-track-height",
+      "$fluent-slider-wrapper-height": "$slider-wrapper-height",
+      "$fluent-switch-height": "$switch-height",
+      "$fluent-switch-shadow": "$switch-box-shadow",
+      "$fluent-switch-transition": "$switch-transition",
+      "$fluent-switch-width": "$switch-width",
+      "$fluent-tab-height": "$tabs-tab-height",
+      "$fluent-tab-nav-button-content-padding": "$tabs-tab-nav-button-content-padding",
+      "$fluent-tab-nav-button-icon-font-size": "$tabs-tab-nav-button-icon-font-size",
+      "$fluent-tab-nav-button-icon-height": "$tabs-tab-nav-button-icon-height",
+      "$fluent-tab-nav-button-icon-width": "$tabs-tab-nav-button-icon-width",
+      "$fluent-tabs-icon-size": "$tabs-icon-size",
+      "$fluent-tabs-item-gap": "$tabs-item-gap",
+      "$fluent-tabs-item-padding": "$tabs-item-padding",
+      "$fluent-timeview-field-min-height": "$time-view-field-min-height",
+      "$fluent-timeview-input-padding-inline-start": "$time-view-input-padding-inline-start",
+      "$fluent-timeview-time-separator-margin": "$time-view-time-separator-margin",
+      "$fluent-toolbar-button-text-font-weight": "$toolbar-button-text-font-weight",
+      "$fluent-toolbar-group-margin": "$toolbar-group-margin",
+      "$fluent-toolbar-height": "$toolbar-height",
+      "$fluent-toolbar-item-padding": "$toolbar-item-padding",
+      "$fluent-toolbar-item-spacing": "$toolbar-item-spacing",
+      "$fluent-toolbar-label-font-size": "$toolbar-label-font-size",
+      "$fluent-toolbar-label-font-weight": "$toolbar-label-font-weight",
+      "$fluent-toolbar-padding": "$toolbar-padding",
+      "$fluent-toolbar-section-padding": "$toolbar-section-padding",
+      "$fluent-toolbar-texteditor-width": "$toolbar-text-editor-width",
+      "$fluent-treeview-border-padding": "$tree-view-border-padding",
+      "$fluent-treeview-checkbox-offset": "$tree-view-checkbox-offset",
+      "$fluent-treeview-container-padding": "$tree-view-container-padding",
+      "$fluent-treeview-item-border-radius": "$tree-view-item-border-radius",
+      "$fluent-treeview-item-element-gap": "$tree-view-item-element-gap",
+      "$fluent-treeview-item-margin": "$tree-view-item-margin",
+      "$fluent-treeview-item-padding": "$tree-view-item-padding",
+      "$fluent-treeview-item-side-padding": "$tree-view-item-padding-inline",
+      "$fluent-treeview-load-indicator-size": "$tree-view-load-indicator-size",
+      "$fluent-treeview-search-editor-height": "$tree-view-search-editor-height",
+      "$fluent-treeview-searchbox-margin-bottom": "$tree-view-search-box-margin-block-end",
+      "$fluent-treeview-toggle-item-width": "$tree-view-toggle-item-width",
+      "$gallery-indicator-bg": "$gallery-indicator-bg-rest",
+      "$gallery-indicator-focused-bg": "$gallery-indicator-bg-focused",
+      "$gallery-indicator-item-border-color": "$gallery-indicator-item-border-rest",
+      "$gallery-indicator-item-selected-bg": "$gallery-indicator-item-bg-selected",
+      "$gallery-indicator-selected-border-color": "$gallery-indicator-border-selected",
+      "$gallery-nav-arrow-color": "$gallery-nav-arrow-content-rest",
+      "$gallery-navbutton-active-color": "$gallery-nav-button-bg-active",
+      "$gallery-navbutton-color": "$gallery-nav-button-bg-rest",
+      "$gallery-navbutton-hover-color": "$gallery-nav-button-bg-hovered",
+      "$gantt-bg": "$gantt-bg-rest",
+      "$gantt-border-color": "$gantt-border-rest",
+      "$gantt-icon-color": "$gantt-icon-rest",
+      "$gantt-text-color": "$gantt-content-rest",
+      "$informer-error-background-color": "$informer-error-bg-rest",
+      "$informer-info-background-color": "$informer-info-bg-rest",
+      "$list-border-color": "$list-border-rest",
+      "$list-border-color-disabled": "$list-border-disabled",
+      "$list-expanded-group-color": "$list-expanded-group-content-rest",
+      "$list-foreground-disabled": "$list-content-disabled",
+      "$list-group-color": "$list-group-content-rest",
+      "$list-group-header-bg": "$list-group-header-bg-rest",
+      "$list-header-indicator-color": "$list-header-indicator-content-rest",
+      "$list-holdmenu-bg": "$list-hold-menu-bg-rest",
+      "$list-holdmenu-border-color": "$list-hold-menu-border-rest",
+      "$list-holdmenu-shadow-color": "$list-hold-menu-shadow-rest",
+      "$list-icon-color": "$list-icon-rest",
+      "$list-item-active-bg": "$list-item-bg-active",
+      "$list-item-ghost-bg": "$list-item-ghost-bg-rest",
+      "$list-item-ghost-border-color": "$list-item-ghost-border-rest",
+      "$list-item-ghost-color": "$list-item-ghost-content-rest",
+      "$list-item-hover-bg": "$list-item-bg-hovered",
+      "$list-item-hover-color": "$list-item-content-hovered",
+      "$list-item-selected-bg": "$list-item-bg-selected",
+      "$list-item-selected-color": "$list-item-content-selected",
+      "$list-item-selected-hover-bg": "$list-item-bg-selected-hovered",
+      "$list-menu-button-default-bg": "$list-menu-button-default-bg-rest",
+      "$list-menu-button-default-color": "$list-menu-button-default-content-rest",
+      "$list-normal-color": "$list-normal-content-rest",
+      "$list-toggle-delete-icon-color": "$list-toggle-delete-icon-rest",
+      "$menu-color": "$menu-content-rest",
+      "$menu-focused-shadow": "$menu-shadow-focused",
+      "$menu-item-hover-bg": "$menu-item-bg-hovered",
+      "$menu-item-selected-bg": "$menu-item-bg-selected",
+      "$menu-popup-bg": "$menu-popup-bg-rest",
+      "$menu-popup-border-color": "$menu-popup-border-rest",
+      "$menu-separator-bg": "$menu-separator-bg-rest",
+      "$overlay-shader-bg": "$overlay-backdrop-rest",
+      "$pagination-page-hovered-bg": "$pagination-page-bg-hovered",
+      "$pagination-page-selected-bg": "$pagination-page-bg-selected",
+      "$pagination-page-selected-color": "$pagination-page-content-selected",
+      "$pivotgrid-border-color-disabled": "$pivot-grid-border-disabled",
+      "$pivotgrid-text-color": "$pivot-grid-content-rest",
+      "$popup-bottom-bg": "$popup-bottom-bg-rest",
+      "$popup-bottom-color": "$popup-bottom-content-rest",
+      "$popup-focused-content-shadow-color": "$popup-content-shadow-focused",
+      "$popup-title-bg": "$popup-title-bg-rest",
+      "$popup-title-border-color": "$popup-title-border-rest",
+      "$popup-title-color": "$popup-title-content-rest",
+      "$progressbar-bg": "$progress-bar-bg-rest",
+      "$progressbar-border-radius": "$progress-bar-border-radius",
+      "$progressbar-container-disabled-bg": "$progress-bar-container-bg-disabled",
+      "$progressbar-foreground-disabled": "$progress-bar-content-disabled",
+      "$progressbar-height": "$progress-bar-height",
+      "$progressbar-label-color": "$progress-bar-label-content-rest",
+      "$progressbar-range-bg": "$progress-bar-range-bg-rest",
+      "$progressbar-range-disabled-bg": "$progress-bar-range-bg-disabled",
+      "$progressbar-range-invalid-color": "$progress-bar-range-invalid-bg-rest",
+      "$progressbar-status-margin-top": "$progress-bar-status-margin-block-start",
+      "$radiobutton-focused-bg": "$radio-group-radio-button-bg-focused",
+      "$radiogroup-bg": "$radio-group-bg-rest",
+      "$radiogroup-border-color": "$radio-group-border-rest",
+      "$radiogroup-border-color-active": "$radio-group-border-active",
+      "$radiogroup-border-color-hover": "$radio-group-border-hovered",
+      "$radiogroup-readonly-border-color": "$radio-group-border-read-only",
+      "$scheduler-bg": "$scheduler-bg-rest",
+      "$scheduler-border-color": "$scheduler-border-rest",
+      "$scrollview-shadow-color": "$scroll-view-shadow-rest",
+      "$slider-border-color": "$slider-border-rest",
+      "$slider-invalid-color-hover": "$slider-invalid-bg-hovered",
+      "$speed-dial-action-active-bg": "$speed-dial-action-bg-active",
+      "$speed-dial-action-bg": "$speed-dial-action-bg-rest",
+      "$speed-dial-action-hover-bg": "$speed-dial-action-bg-hovered",
+      "$speed-dial-action-label-shadow": "$speed-dial-action-label-shadow-rest",
+      "$speed-dial-action-main-active-bg": "$speed-dial-action-main-bg-active",
+      "$speed-dial-action-main-bg": "$speed-dial-action-main-bg-rest",
+      "$speed-dial-action-main-hover-bg": "$speed-dial-action-main-bg-hovered",
+      "$speed-dial-action-shadow": "$speed-dial-action-shadow-rest",
+      "$switch-bg": "$switch-bg-rest",
+      "$switch-border-color-disabled": "$switch-border-disabled",
+      "$switch-container-horizontal-padding": "$switch-container-padding-inline",
+      "$switch-container-vertical-margin": "$switch-container-margin-block",
+      "$switch-handle-disabled-bg": "$switch-handle-bg-disabled",
+      "$tabs-tab-background": "$tabs-tab-bg-rest",
+      "$tabs-tab-border-color-active": "$tabs-tab-border-active",
+      "$tabs-tab-border-color-disabled": "$tabs-tab-border-disabled",
+      "$tabs-tab-border-color-hover": "$tabs-tab-border-hovered",
+      "$tabs-tab-border-color-selected-active": "$tabs-tab-border-selected-active",
+      "$tabs-tab-border-color-selected-hover": "$tabs-tab-border-selected-hovered",
+      "$tabs-tab-color": "$tabs-tab-content-rest",
+      "$tabs-tab-disabled-color": "$tabs-tab-content-disabled",
+      "$tabs-tab-icon-color": "$tabs-tab-icon-rest",
+      "$tabs-tab-icon-disabled-color": "$tabs-tab-icon-content-disabled",
+      "$tabs-tab-icon-selected-color": "$tabs-tab-icon-content-selected",
+      "$tabs-tab-selected-color": "$tabs-tab-content-selected",
+      "$toolbar-bg": "$toolbar-bg-rest",
+      "$toolbar-color": "$toolbar-content-rest",
+      "$toolbar-separator-color": "$toolbar-separator-border-rest",
+      "$treeview-border-color": "$tree-view-border-rest",
+      "$treeview-checkbox-background-color-focused": "$tree-view-checkbox-bg-focused",
+      "$treeview-focused-bg": "$tree-view-bg-focused",
+      "$treeview-hover-bg": "$tree-view-bg-hovered",
+      "$treeview-item-content-disabled": "$tree-view-item-content-disabled",
+      "$treeview-item-selected-bg": "$tree-view-item-bg-selected",
+      "$treeview-spin-icon-color": "$tree-view-spin-icon-rest",
+      "$treeview-text-color": "$tree-view-content-rest",
+      "$typography-typography-bg": "$typography-bg-rest",
+      "$widget-bg": "$widget-bg-rest"
+    },
+    "C11-tails-small": {
+      "$fluent-contextmenu-menu-items-container-padding": "$context-menu-menu-items-container-padding",
+      "$fluent-contextmenu-menu-separator-height": "$context-menu-separator-height",
+      "$fluent-contextmenu-menu-separator-margin": "$context-menu-separator-margin",
+      "$fluent-field-labelvalue-spacing": "$fieldset-field-label-value-spacing",
+      "$fluent-fieldset-attention-icon-offset": "$fieldset-attention-icon-offset",
+      "$fluent-fieldset-root-margin-bottom": "$fieldset-margin-block-end",
+      "$fluent-h1-font-size": "$typography-heading-1-font-size",
+      "$fluent-h1-font-weight": "$typography-heading-1-font-weight",
+      "$fluent-h2-font-size": "$typography-heading-2-font-size",
+      "$fluent-h2-font-weight": "$typography-heading-2-font-weight",
+      "$fluent-h3-font-size": "$typography-heading-3-font-size",
+      "$fluent-h3-font-weight": "$typography-heading-3-font-weight",
+      "$fluent-h4-font-size": "$typography-heading-4-font-size",
+      "$fluent-h4-font-weight": "$typography-heading-4-font-weight",
+      "$fluent-h5-font-size": "$typography-heading-5-font-size",
+      "$fluent-h5-font-weight": "$typography-heading-5-font-weight",
+      "$fluent-h6-font-size": "$typography-heading-6-font-size",
+      "$fluent-h6-font-weight": "$typography-heading-6-font-weight",
+      "$fluent-l-font-size": "$typography-l-font-size",
+      "$fluent-m-font-size": "$typography-m-font-size",
+      "$fluent-menu-treeview-node-border-bottom": "$menu-tree-view-node-border-block-end",
+      "$fluent-radiogroup-min-height": "$fieldset-radio-group-min-height",
+      "$fluent-s-font-size": "$typography-s-font-size",
+      "$fluent-scrollview-scrollbottom-indicator-margin-2": "$scroll-view-scroll-bottom-indicator-rtl-margin",
+      "$fluent-toolbar-menu-section-border-bottom": "$toolbar-menu-section-border-block-end",
+      "$fluent-xl-font-size": "$typography-xl-font-size",
+      "$fluent-xs-font-size": "$typography-xs-font-size",
+      "$informer-error-color": "$informer-error-content-rest",
+      "$informer-info-color": "$informer-info-content-rest",
+      "$load-indicator-animation-sparkle-bg-color1": "$load-indicator-sparkle-stop-1-bg-rest",
+      "$load-indicator-animation-sparkle-bg-color2": "$load-indicator-sparkle-stop-2-bg-rest",
+      "$load-indicator-animation-sparkle-bg-color3": "$load-indicator-sparkle-stop-3-bg-rest",
+      "$load-indicator-inner-segment-border-color": "$load-indicator-segment-inner-border-rest",
+      "$load-indicator-segment-bg-color": "$load-indicator-segment-border-rest",
+      "$menu-item-expanded-color": "$menu-item-expanded-content-rest",
+      "$menu-item-focused-selected-bg": "$menu-item-bg-selected-focused",
+      "$menu-item-link-color": "$menu-item-link-content-rest",
+      "$menu-item-selected-color": "$menu-item-content-selected",
+      "$overlay-content-bg": "$overlay-content-bg-rest",
+      "$progressbar-disabled-interdeterminate-state-gradient": "$progress-bar-indeterminate-bg-disabled",
+      "$progressbar-indeterminate-background-width": "$progress-bar-indeterminate-width",
+      "$progressbar-interdeterminate-state-gradient": "$progress-bar-indeterminate-bg-rest",
+      "$progressbar-invalid-interdeterminate-state-gradient": "$progress-bar-indeterminate-invalid-bg-rest",
+      "$progressbar-range-indeterminate-color": "$progress-bar-range-indeterminate-bg-rest",
+      "$scrollview-loading-indicator-size": "$scroll-view-load-indicator-size",
+      "$scrollview-pulldown-path": "$scroll-view-pull-down-bg-rest",
+      "$typography-typography-link-color": "$typography-link-content-rest"
+    },
+    "C12-tails-mid": {
+      "$checkbox-accent-color": "$check-box-icon-checked-bg-rest",
+      "$checkbox-accent-color-focused": "$check-box-icon-checked-bg-focused",
+      "$checkbox-accent-color-hover": "$check-box-icon-checked-bg-hovered",
+      "$checkbox-foreground-color": "$check-box-icon-bg-rest",
+      "$checkbox-foreground-disabled-color": "$check-box-icon-bg-disabled",
+      "$dateview-accent": "$date-view-item-content-selected",
+      "$dateview-shadow-down": "$date-view-roller-bottom-shadow-rest",
+      "$dateview-shadow-up": "$date-view-roller-top-shadow-rest",
+      "$fluent-checkbox-text-padding-end": "$check-box-text-padding-inline-end",
+      "$fluent-dateview-phone-item-font-size": "$date-view-item-phone-font-size",
+      "$fluent-dateview-phone-item-selected-font-size": "$date-view-item-phone-font-size-selected",
+      "$fluent-dateview-phone-roller-month-min-width": "$date-view-roller-month-phone-min-width",
+      "$fluent-dateview-roller-month-min-width": "$date-view-roller-month-min-width",
+      "$fluent-dateview-roller-year-min-width": "$date-view-roller-year-min-width",
+      "$fluent-gallery-button-padding": "$gallery-nav-button-inset-inline",
+      "$fluent-gallery-indicator-bottom": "$gallery-indicator-inset-block-end",
+      "$fluent-gallery-root-border-width": "$gallery-border-width",
+      "$fluent-gallery-state-active-height": "$gallery-nav-button-height",
+      "$fluent-gallery-state-active-margin-top": "$gallery-nav-button-margin-block-start",
+      "$fluent-gallery-state-active-width": "$gallery-nav-button-width",
+      "$fluent-popup-content-withtitle-bottom-padding": "$popup-content-with-title-bottom-padding",
+      "$fluent-popup-content-withtitle-top-padding": "$popup-content-with-title-top-padding",
+      "$fluent-popup-title-border-bottom": "$popup-title-border-block-end",
+      "$fluent-radiogroup-collection-column-gap-2": "$radio-group-collection-horizontal-column-gap",
+      "$fluent-radiogroup-radio-value-container-padding-inline-end": "$radio-group-value-container-padding-inline-end",
+      "$fluent-switch-container-adjustment": "$switch-container-rtl-offset",
+      "$fluent-switch-handle-on-shadow": "$switch-handle-on-box-shadow",
+      "$fluent-switch-shadow-blur-radius": "$switch-handle-on-box-shadow-blur",
+      "$gallery-accent": "$gallery-border-focused",
+      "$popup-border-radius": "$popup-border-radius",
+      "$popup-content-shadow-color1": "$popup-content-shadow-ambient-rest",
+      "$popup-content-shadow-color2": "$popup-content-shadow-key-rest",
+      "$switch-accent-color": "$switch-on-border-rest",
+      "$switch-accent-color-focused": "$switch-on-border-focused",
+      "$switch-accent-color-hover": "$switch-on-border-hovered",
+      "$switch-handle-border-radius": "$switch-handle-border-radius",
+      "$switch-handle-off-bg": "$switch-handle-off-bg-rest",
+      "$switch-handle-on-bg": "$switch-handle-on-bg-rest",
+      "$switch-handle-on-shadow-color": "$switch-handle-on-shadow-rest",
+      "$switch-invalid-color": "$switch-invalid-border-rest",
+      "$switch-invalid-color-focused": "$switch-invalid-border-focused",
+      "$switch-invalid-color-hover": "$switch-invalid-border-hovered",
+      "$switch-off-border-active-color": "$switch-off-border-active",
+      "$switch-off-border-color": "$switch-off-border-rest",
+      "$switch-off-border-hover-color": "$switch-off-border-hovered",
+      "$switch-on-bg": "$switch-on-bg-rest",
+      "$switch-on-disabled-bg": "$switch-on-bg-disabled"
+    },
+    "C13-tails-mid-2": {
+      "$clock-digits-color": "$time-view-clock-digits-content-rest",
+      "$fluent-pagination-info-opacity": "$pagination-info-opacity",
+      "$fluent-pagination-light-pageindex-min-width": "$pagination-page-index-compact-min-width",
+      "$fluent-pagination-light-pagesizes-min-width": "$pagination-page-sizes-compact-min-width",
+      "$fluent-pagination-nav-disabled-opacity": "$pagination-nav-opacity-disabled",
+      "$fluent-slider-label-bottom": "$slider-label-bottom-inset-block-end",
+      "$fluent-slider-label-position-bottom-padding-bottom": "$slider-label-bottom-padding-block-end",
+      "$fluent-slider-label-position-top-padding-top": "$slider-label-top-padding-block-start",
+      "$fluent-slider-label-top": "$slider-label-top-inset-block-start",
+      "$fluent-slider-tooltip-position-top-padding-top": "$slider-tooltip-top-padding-block-start",
+      "$fluent-timeview-format12-width": "$time-view-format12-width",
+      "$fluent-timeview-numberbox-spin-touch-friendly-width-2": "$time-view-field-number-box-spin-touch-friendly-width",
+      "$fluent-timeview-numberbox-width": "$time-view-field-number-box-width",
+      "$fluent-timeview-timeview-clock-margin-bottom": "$time-view-clock-margin-block-end",
+      "$slider-invalid-color": "$slider-invalid-bg-rest",
+      "$timeview-inverted-bg": "$time-view-clock-accent-bg-rest",
+      "$timeview-typography-bg": "$time-view-clock-bg-rest"
+    },
+    "C14-mechanical-2": {
+      "$calendar-cell-active-bg": "$calendar-cell-bg-active",
+      "$calendar-cell-contoured-border-color": "$calendar-cell-contoured-border-rest",
+      "$calendar-cell-hover-border-color": "$calendar-cell-border-hovered",
+      "$calendar-cell-selected-bg": "$calendar-cell-bg-selected",
+      "$calendar-navigator-text-color": "$calendar-navigator-content-rest",
+      "$calendar-week-number-cell-bg": "$calendar-week-number-cell-bg-rest",
+      "$chat-avatar-background-color": "$chat-avatar-bg-rest",
+      "$chat-file-container-background-color": "$chat-file-container-bg-rest",
+      "$chat-file-container-box-shadow": "$chat-file-container-box-shadow-rest",
+      "$chat-messagebox-border-color": "$chat-message-box-border-rest",
+      "$chat-messagebox-file-background-color": "$chat-message-box-file-bg-rest",
+      "$chat-messagebox-files-container-padding": "$chat-message-box-files-container-padding",
+      "$chat-messagebox-files-container-padding-top": "$chat-message-box-files-container-padding-block-start",
+      "$chat-messagebox-gap": "$chat-message-box-gap",
+      "$chat-messagebox-padding": "$chat-message-box-padding",
+      "$chat-messagelist-contextmenu-delete-button-focused-bg": "$chat-message-list-context-menu-delete-button-bg-focused",
+      "$chat-messagelist-day-header-font-size": "$chat-message-list-day-header-font-size",
+      "$chat-messagelist-day-header-padding-bottom": "$chat-message-list-day-header-padding-block-end",
+      "$chat-messagelist-empty-icon-background-color": "$chat-message-list-empty-icon-bg-rest",
+      "$chat-messagelist-empty-icon-box-size": "$chat-message-list-empty-icon-box-size",
+      "$chat-messagelist-empty-icon-color": "$chat-message-list-empty-icon-rest",
+      "$chat-messagelist-empty-icon-margin-bottom": "$chat-message-list-empty-icon-margin-block-end",
+      "$chat-messagelist-empty-icon-size": "$chat-message-list-empty-icon-size",
+      "$chat-messagelist-empty-message-font-size": "$chat-message-list-empty-message-font-size",
+      "$chat-messagelist-empty-row-gap": "$chat-message-list-empty-row-gap",
+      "$chat-messagelist-padding": "$chat-message-list-padding",
+      "$chat-suggestions-box-shadow": "$chat-suggestions-box-shadow-rest",
+      "$colorview-handle-border-color": "$color-view-handle-border-rest",
+      "$colorview-label-color": "$color-view-label-content-rest",
+      "$diagram-canvas-bg": "$diagram-canvas-bg-rest",
+      "$diagram-danger-format-active-bg": "$diagram-danger-format-bg-active",
+      "$diagram-default-format-active-bg": "$diagram-default-format-bg-active",
+      "$diagram-icon-margin-left": "$diagram-icon-margin-inline-start",
+      "$diagram-icon-margin-right": "$diagram-icon-margin-inline-end",
+      "$diagram-item-text-padding-left": "$diagram-item-text-padding-inline-start",
+      "$diagram-normal-format-active-bg": "$diagram-normal-format-bg-active",
+      "$diagram-properties-panel-icon-color": "$diagram-properties-panel-icon-rest",
+      "$diagram-success-format-active-bg": "$diagram-success-format-bg-active",
+      "$diagram-toolbar-border-color": "$diagram-toolbar-border-rest",
+      "$filemanager-breadcrumbs-item-focus-bg": "$file-manager-breadcrumbs-item-bg-focused",
+      "$filemanager-breadcrumbs-item-focus-color": "$file-manager-breadcrumbs-item-content-focused",
+      "$filemanager-breadcrumbs-item-padding-bottom": "$file-manager-breadcrumbs-item-padding-block-end",
+      "$filemanager-breadcrumbs-item-padding-top": "$file-manager-breadcrumbs-item-padding-block-start",
+      "$filemanager-custom-thumbnail-color": "$file-manager-custom-thumbnail-content-rest",
+      "$filemanager-details-view-checkbox-column-width": "$file-manager-details-view-checkbox-column-width",
+      "$filemanager-dirs-tree-item-focus-bg": "$file-manager-dirs-tree-item-bg-focused",
+      "$filemanager-dirs-tree-item-focus-color": "$file-manager-dirs-tree-item-content-focused",
+      "$filemanager-editor-active-bg": "$file-manager-editor-bg-active",
+      "$filemanager-file-actions-button-size": "$file-manager-file-actions-button-size",
+      "$filemanager-file-actions-button-top-bottom-padding": "$file-manager-file-actions-button-top-bottom-padding",
+      "$filemanager-file-item-focused-border": "$file-manager-file-item-border-focused",
+      "$filemanager-file-item-hover-bg": "$file-manager-file-item-bg-hovered",
+      "$filemanager-file-item-select-bg": "$file-manager-file-item-select-bg-rest",
+      "$filemanager-file-item-select-color": "$file-manager-file-item-select-content-rest",
+      "$filemanager-file-item-select-focus-bg": "$file-manager-file-item-select-bg-focused",
+      "$filemanager-file-item-select-focus-color": "$file-manager-file-item-select-content-focused",
+      "$filemanager-file-toolbar-bg": "$file-manager-file-toolbar-bg-rest",
+      "$filemanager-inverted-text-color": "$file-manager-inverted-content-rest",
+      "$filemanager-item-focused-color": "$file-manager-item-content-focused",
+      "$filemanager-toolbar-height": "$file-manager-toolbar-height",
+      "$filemanager-toolbar-separator-height": "$file-manager-toolbar-separator-height",
+      "$filemanager-toolbar-viewmode-padding": "$file-manager-toolbar-viewmode-padding",
+      "$filemanager-toolbar-viewmode-width": "$file-manager-toolbar-viewmode-width",
+      "$fileuploader-file-icon-color": "$file-uploader-file-icon-rest",
+      "$fileuploader-filename-color": "$file-uploader-file-name-content-rest",
+      "$fileuploader-label-color": "$file-uploader-label-content-rest",
+      "$fileuploader-progressbar-status-color": "$file-uploader-progress-bar-status-content-rest",
+      "$fluent-agenda-appointment-allday-padding-right": "$scheduler-agenda-appointment-allday-padding-inline-end",
+      "$fluent-agenda-appointment-item-border-radius": "$scheduler-agenda-appointment-item-border-radius",
+      "$fluent-agenda-appointment-item-padding": "$scheduler-agenda-appointment-item-padding",
+      "$fluent-agenda-appointment-rtl-margin-right": "$scheduler-agenda-appointment-rtl-margin-inline-end",
+      "$fluent-aidialog-border-radius": "$html-editor-ai-dialog-border-radius",
+      "$fluent-aidialog-content-gap": "$html-editor-ai-dialog-content-gap",
+      "$fluent-aidialog-content-padding": "$html-editor-ai-dialog-content-padding",
+      "$fluent-calendar-cell-font-size": "$calendar-cell-font-size",
+      "$fluent-calendar-element-padding": "$calendar-element-padding",
+      "$fluent-calendar-footer-button-height": "$calendar-footer-button-height",
+      "$fluent-calendar-legacy-height": "$calendar-legacy-height",
+      "$fluent-calendar-legacy-width": "$calendar-legacy-width",
+      "$fluent-calendar-week-day-header-font-size": "$calendar-week-day-header-font-size",
+      "$fluent-calendar-week-day-header-font-weight": "$calendar-week-day-header-font-weight",
+      "$fluent-chat-editing-preview-caption-font-weight": "$chat-editing-preview-caption-font-weight",
+      "$fluent-chat-file-name-font-weight": "$chat-file-name-font-weight",
+      "$fluent-colorview-alpha-margin": "$color-view-alpha-margin",
+      "$fluent-colorview-alpha-width": "$color-view-alpha-width",
+      "$fluent-colorview-color-preview-height": "$color-view-color-preview-height",
+      "$fluent-colorview-container-alpha-label-margin": "$color-view-container-alpha-label-margin",
+      "$fluent-colorview-container-alpha-label-width": "$color-view-container-alpha-label-width",
+      "$fluent-colorview-container-hex-margin": "$color-view-container-hex-margin",
+      "$fluent-colorview-container-line-height": "$color-view-container-line-height",
+      "$fluent-colorview-container-textbox-margin": "$color-view-container-textbox-margin",
+      "$fluent-colorview-container-textbox-width": "$color-view-container-textbox-width",
+      "$fluent-colorview-container-width": "$color-view-container-width",
+      "$fluent-colorview-controls-container-margin": "$color-view-controls-container-margin",
+      "$fluent-colorview-controls-container-width": "$color-view-controls-container-width",
+      "$fluent-colorview-hue-scale-height": "$color-view-hue-scale-height",
+      "$fluent-colorview-hue-scale-margin": "$color-view-hue-scale-margin",
+      "$fluent-colorview-hue-scale-width": "$color-view-hue-scale-width",
+      "$fluent-colorview-palette-height": "$color-view-palette-height",
+      "$fluent-colorview-palette-width": "$color-view-palette-width",
+      "$fluent-colorview-preview-container-margin": "$color-view-preview-container-margin",
+      "$fluent-diagram-popup-content-padding": "$diagram-popup-content-padding",
+      "$fluent-diagram-toolbar-icon-size": "$diagram-toolbar-icon-size",
+      "$fluent-diagram-toolbar-wrapper-padding": "$diagram-toolbar-wrapper-padding",
+      "$fluent-filemanager-breadcrumbs-padding": "$file-manager-breadcrumbs-padding",
+      "$fluent-filemanager-button-content-padding": "$file-manager-button-content-padding",
+      "$fluent-filemanager-dirs-panel-padding": "$file-manager-dirs-panel-padding",
+      "$fluent-filemanager-menu-item-content-margin": "$file-manager-menu-item-content-margin",
+      "$fluent-filemanager-menu-item-content-padding-left": "$file-manager-menu-item-content-padding-inline-start",
+      "$fluent-filemanager-menu-item-content-padding-right": "$file-manager-menu-item-content-padding-inline-end",
+      "$fluent-filemanager-overlay-content-max-height": "$file-manager-overlay-content-max-height",
+      "$fluent-filemanager-overlay-content-max-width": "$file-manager-overlay-content-max-width",
+      "$fluent-filemanager-overlay-content-min-height": "$file-manager-overlay-content-min-height",
+      "$fluent-filemanager-overlay-content-min-width": "$file-manager-overlay-content-min-width",
+      "$fluent-filemanager-popup-content-padding": "$file-manager-popup-content-padding",
+      "$fluent-filemanager-progress-box-border-radius": "$file-manager-progress-box-border-radius",
+      "$fluent-filemanager-progress-box-close-button-margin-left": "$file-manager-progress-box-close-button-margin-inline-start",
+      "$fluent-filemanager-progress-box-close-button-margin-top": "$file-manager-progress-box-close-button-margin-block-start",
+      "$fluent-filemanager-progress-box-error-max-height": "$file-manager-progress-box-error-max-height",
+      "$fluent-filemanager-progress-box-error-padding": "$file-manager-progress-box-error-padding",
+      "$fluent-filemanager-progress-box-image-margin-right": "$file-manager-progress-box-image-margin-inline-end",
+      "$fluent-filemanager-progress-box-margin-bottom": "$file-manager-progress-box-margin-block-end",
+      "$fluent-filemanager-progress-box-padding": "$file-manager-progress-box-padding",
+      "$fluent-filemanager-progress-panel-container-padding": "$file-manager-progress-panel-container-padding",
+      "$fluent-filemanager-progress-panel-separator-height": "$file-manager-progress-panel-separator-height",
+      "$fluent-filemanager-progress-panel-title-padding": "$file-manager-progress-panel-title-padding",
+      "$fluent-filemanager-progress-panel-width": "$file-manager-progress-panel-width",
+      "$fluent-filemanager-progress-title-font-size": "$file-manager-progress-title-font-size",
+      "$fluent-filemanager-progress-title-font-weight": "$file-manager-progress-title-font-weight",
+      "$fluent-filemanager-progressbox-cancel-button-margin-top": "$file-manager-progress-box-cancel-button-margin-block-start",
+      "$fluent-filemanager-thumbnails-item-border": "$file-manager-thumbnails-item-border",
+      "$fluent-filemanager-thumbnails-item-content-padding": "$file-manager-thumbnails-item-content-padding",
+      "$fluent-filemanager-thumbnails-item-height": "$file-manager-thumbnails-item-height",
+      "$fluent-filemanager-thumbnails-item-margin": "$file-manager-thumbnails-item-margin",
+      "$fluent-filemanager-thumbnails-item-spacer-height": "$file-manager-thumbnails-item-spacer-height",
+      "$fluent-filemanager-thumbnails-item-width": "$file-manager-thumbnails-item-width",
+      "$fluent-filemanager-thumbnails-view-port-padding": "$file-manager-thumbnails-view-port-padding",
+      "$fluent-filemanager-toolbar-padding": "$file-manager-toolbar-padding",
+      "$fluent-filemanager-toolbar-separator-item-margin-right": "$file-manager-toolbar-separator-item-margin-inline-end",
+      "$fluent-filemanager-toolbar-separator-item-width": "$file-manager-toolbar-separator-item-width",
+      "$fluent-fileuploader-button-height": "$file-uploader-button-height",
+      "$fluent-fileuploader-button-margin-left": "$file-uploader-button-margin-inline-start",
+      "$fluent-fileuploader-button-margin-right": "$file-uploader-button-margin-inline-end",
+      "$fluent-fileuploader-button-width": "$file-uploader-button-width",
+      "$fluent-fileuploader-cancel-button-margin-top": "$file-uploader-cancel-button-margin-block-start",
+      "$fluent-fileuploader-file-cancel-button-margin-left": "$file-uploader-file-cancel-button-margin-inline-start",
+      "$fluent-fileuploader-file-container-button-margin": "$file-uploader-file-container-button-margin",
+      "$fluent-fileuploader-file-container-button-size": "$file-uploader-file-container-button-size",
+      "$fluent-fileuploader-file-container-margin-bottom": "$file-uploader-file-container-margin-block-end",
+      "$fluent-fileuploader-file-container-padding": "$file-uploader-file-container-padding",
+      "$fluent-fileuploader-file-container-text-margin": "$file-uploader-file-container-text-margin",
+      "$fluent-fileuploader-file-icon-font-size": "$file-uploader-file-icon-font-size",
+      "$fluent-fileuploader-file-icon-padding-right": "$file-uploader-file-icon-padding-inline-end",
+      "$fluent-fileuploader-file-line-height": "$file-uploader-file-line-height",
+      "$fluent-fileuploader-file-name-font-weight": "$file-uploader-file-name-font-weight",
+      "$fluent-fileuploader-file-padding-top": "$file-uploader-file-padding-block-start",
+      "$fluent-fileuploader-file-size-font-size": "$file-uploader-file-size-font-size",
+      "$fluent-fileuploader-file-size-margin": "$file-uploader-file-size-margin",
+      "$fluent-fileuploader-file-size-padding-left": "$file-uploader-file-size-padding-inline-start",
+      "$fluent-fileuploader-file-size-padding-right": "$file-uploader-file-size-padding-inline-end",
+      "$fluent-fileuploader-file-status-message-height": "$file-uploader-file-status-message-height",
+      "$fluent-fileuploader-file-status-message-margin-bottom": "$file-uploader-file-status-message-margin-block-end",
+      "$fluent-fileuploader-file-status-message-margin-top": "$file-uploader-file-status-message-margin-block-start",
+      "$fluent-fileuploader-files-container-padding": "$file-uploader-files-container-padding",
+      "$fluent-fileuploader-progressbar-height": "$file-uploader-progress-bar-height",
+      "$fluent-fileuploader-upload-button-margin-left": "$file-uploader-upload-button-margin-inline-start",
+      "$fluent-fileuploader-upload-button-margin-right": "$file-uploader-upload-button-margin-inline-end",
+      "$fluent-fileuploader-upload-button-margin-top": "$file-uploader-upload-button-margin-block-start",
+      "$fluent-filterbuilder-action-icon-font-size": "$filter-builder-action-icon-font-size",
+      "$fluent-filterbuilder-action-icon-margin-left": "$filter-builder-action-icon-margin-inline-start",
+      "$fluent-filterbuilder-action-icon-margin-right": "$filter-builder-action-icon-margin-inline-end",
+      "$fluent-filterbuilder-action-icon-padding": "$filter-builder-action-icon-padding",
+      "$fluent-filterbuilder-filled-editor-padding": "$filter-builder-filled-editor-padding",
+      "$fluent-filterbuilder-group-content-padding-left": "$filter-builder-group-content-padding-inline-start",
+      "$fluent-filterbuilder-group-content-padding-right": "$filter-builder-group-content-padding-inline-end",
+      "$fluent-filterbuilder-icon-margin-left": "$filter-builder-icon-margin-inline-start",
+      "$fluent-filterbuilder-icon-margin-right": "$filter-builder-icon-margin-inline-end",
+      "$fluent-filterbuilder-icon-padding": "$filter-builder-icon-padding",
+      "$fluent-filterbuilder-item-value-text-min-width": "$filter-builder-item-value-text-min-width",
+      "$fluent-filterbuilder-item-value-text-padding": "$filter-builder-item-value-text-padding",
+      "$fluent-filterbuilder-range-separator-margin": "$filter-builder-range-separator-margin",
+      "$fluent-filterbuilder-scrollable-max-height": "$filter-builder-scrollable-max-height",
+      "$fluent-filterbuilder-treeview-item-left-padding": "$filter-builder-tree-view-item-left-padding",
+      "$fluent-filterbuilder-treeview-item-padding": "$filter-builder-tree-view-item-padding",
+      "$fluent-filterbuilder-treeview-item-padding-left": "$filter-builder-tree-view-item-padding-inline-start",
+      "$fluent-filterbuilder-treeview-item-padding-right": "$filter-builder-tree-view-item-padding-inline-end",
+      "$fluent-filterbuilder-treeview-node-margin-left": "$filter-builder-tree-view-node-margin-inline-start",
+      "$fluent-filterbuilder-treeview-node-margin-right": "$filter-builder-tree-view-node-margin-inline-end",
+      "$fluent-form-field-item-help-text-padding-top": "$form-field-item-help-text-padding-block-start",
+      "$fluent-form-group-caption-bottom-margin": "$form-group-caption-bottom-margin",
+      "$fluent-form-group-caption-font-size": "$form-group-caption-font-size",
+      "$fluent-form-group-caption-top-padding": "$form-group-caption-top-padding",
+      "$fluent-form-group-content-bottom-padding": "$form-group-content-bottom-padding",
+      "$fluent-form-group-content-margin-top": "$form-group-content-margin-block-start",
+      "$fluent-form-group-content-padding-bottom": "$form-group-content-padding-block-end",
+      "$fluent-form-group-content-padding-top": "$form-group-content-padding-block-start",
+      "$fluent-form-help-text-font-size": "$form-help-text-font-size",
+      "$fluent-form-label-font-size": "$form-label-font-size",
+      "$fluent-form-label-icon-size": "$form-label-icon-size",
+      "$fluent-form-layout-manager-horizontal-padding": "$form-layout-manager-padding-inline",
+      "$fluent-form-layout-manager-tabpanel-content-padding": "$form-layout-manager-tabpanel-content-padding",
+      "$fluent-form-layout-manager-vertical-padding": "$form-layout-manager-padding-block",
+      "$fluent-form-multiview-item-content-padding": "$form-multiview-item-content-padding",
+      "$fluent-form-switch-margin-bottom": "$form-switch-margin-block-end",
+      "$fluent-form-switch-margin-top": "$form-switch-margin-block-start",
+      "$fluent-form-top-label-bottom-margin": "$form-top-label-bottom-margin",
+      "$fluent-form-top-label-padding": "$form-top-label-padding",
+      "$fluent-gantt-splitter-bar-width": "$gantt-splitter-bar-width",
+      "$fluent-gantt-view-min-width": "$gantt-view-min-width",
+      "$fluent-html-editor-fileuploader-input-wrapper-border-radius": "$html-editor-file-uploader-input-wrapper-border-radius",
+      "$fluent-htmleditor-content-margin": "$html-editor-content-margin",
+      "$fluent-htmleditor-input-wrapper-gap": "$html-editor-input-wrapper-gap",
+      "$fluent-htmleditor-toolbar-padding": "$html-editor-toolbar-padding",
+      "$fluent-pivotgrid-area-field-line-height": "$pivot-grid-area-field-line-height",
+      "$fluent-pivotgrid-area-font-size": "$pivot-grid-area-font-size",
+      "$fluent-pivotgrid-area-padding": "$pivot-grid-area-padding",
+      "$fluent-pivotgrid-cell-padding": "$pivot-grid-cell-padding",
+      "$fluent-pivotgrid-expand-icon-container-outline": "$pivot-grid-expand-icon-container-outline",
+      "$fluent-pivotgrid-expanded-cell-padding": "$pivot-grid-expanded-cell-padding",
+      "$fluent-pivotgrid-header-cell-side-padding": "$pivot-grid-header-cell-padding-inline",
+      "$fluent-pivotgrid-header-font-weight": "$pivot-grid-header-font-weight",
+      "$fluent-pivotgrid-icon-margin": "$pivot-grid-icon-margin",
+      "$fluent-pivotgrid-total-text-left-padding": "$pivot-grid-total-text-left-padding",
+      "$fluent-scheduler-agenda-date-table-padding-top": "$scheduler-agenda-date-table-padding-block-start",
+      "$fluent-scheduler-agenda-details-font-size": "$scheduler-agenda-details-font-size",
+      "$fluent-scheduler-agenda-time-panel-cell-padding": "$scheduler-agenda-time-panel-cell-padding",
+      "$fluent-scheduler-agenda-title-font-weight": "$scheduler-agenda-title-font-weight",
+      "$fluent-scheduler-all-day-table-cell-height": "$scheduler-all-day-table-cell-height",
+      "$fluent-scheduler-all-day-title-font-size": "$scheduler-all-day-title-font-size",
+      "$fluent-scheduler-appointment-10min-icon-font-size": "$scheduler-appointment-10min-icon-font-size",
+      "$fluent-scheduler-appointment-10min-recurrence-padding-right": "$scheduler-appointment-10min-recurrence-padding-inline-end",
+      "$fluent-scheduler-appointment-10min-title-font-size": "$scheduler-appointment-10min-title-font-size",
+      "$fluent-scheduler-appointment-10min-title-line-height": "$scheduler-appointment-10min-title-line-height",
+      "$fluent-scheduler-appointment-15min-height": "$scheduler-appointment-15min-height",
+      "$fluent-scheduler-appointment-15min-icon-font-size": "$scheduler-appointment-15min-icon-font-size",
+      "$fluent-scheduler-appointment-15min-recurrence-padding-right": "$scheduler-appointment-15min-recurrence-padding-inline-end",
+      "$fluent-scheduler-appointment-15min-title-font-size": "$scheduler-appointment-15min-title-font-size",
+      "$fluent-scheduler-appointment-15min-title-line-height": "$scheduler-appointment-15min-title-line-height",
+      "$fluent-scheduler-appointment-20min-height": "$scheduler-appointment-20min-height",
+      "$fluent-scheduler-appointment-20min-recurrence-padding-right": "$scheduler-appointment-20min-recurrence-padding-inline-end",
+      "$fluent-scheduler-appointment-25min-height": "$scheduler-appointment-25min-height",
+      "$fluent-scheduler-appointment-active-marker-border-radius": "$scheduler-appointment-marker-border-radius-active",
+      "$fluent-scheduler-appointment-border-radius": "$scheduler-appointment-border-radius",
+      "$fluent-scheduler-appointment-collector-margin-left": "$scheduler-appointment-collector-margin-inline-start",
+      "$fluent-scheduler-appointment-collector-margin-right": "$scheduler-appointment-collector-margin-inline-end",
+      "$fluent-scheduler-appointment-collector-width": "$scheduler-appointment-collector-width",
+      "$fluent-scheduler-appointment-content-details-font-size": "$scheduler-appointment-content-details-font-size",
+      "$fluent-scheduler-appointment-content-details-margin-top": "$scheduler-appointment-content-details-margin-block-start",
+      "$fluent-scheduler-appointment-content-padding": "$scheduler-appointment-content-padding",
+      "$fluent-scheduler-appointment-content-padding-right": "$scheduler-appointment-content-padding-inline-end",
+      "$fluent-scheduler-appointment-details-font-size": "$scheduler-appointment-details-font-size",
+      "$fluent-scheduler-appointment-dragging-shadow": "$scheduler-appointment-dragging-shadow-rest",
+      "$fluent-scheduler-appointment-icon-font-size": "$scheduler-appointment-icon-font-size",
+      "$fluent-scheduler-appointment-month-text-size": "$scheduler-appointment-month-font-size",
+      "$fluent-scheduler-appointment-popup-all-day-item-height": "$scheduler-appointment-popup-all-day-item-height",
+      "$fluent-scheduler-appointment-popup-days-of-week-buttons-gap": "$scheduler-appointment-popup-days-of-week-buttons-gap",
+      "$fluent-scheduler-appointment-popup-icon-container-height": "$scheduler-appointment-popup-icon-container-height",
+      "$fluent-scheduler-appointment-popup-icon-margin-top": "$scheduler-appointment-popup-icon-margin-block-start",
+      "$fluent-scheduler-appointment-popup-icon-padding-right": "$scheduler-appointment-popup-icon-padding-inline-end",
+      "$fluent-scheduler-appointment-popup-item-padding-horizontal": "$scheduler-appointment-popup-item-padding-inline",
+      "$fluent-scheduler-appointment-popup-repeat-end-item-height": "$scheduler-appointment-popup-repeat-end-item-height",
+      "$fluent-scheduler-appointment-popup-toolbar-height": "$scheduler-appointment-popup-toolbar-height",
+      "$fluent-scheduler-appointment-short-content-padding": "$scheduler-appointment-short-content-padding",
+      "$fluent-scheduler-appointment-strip-width": "$scheduler-appointment-strip-width",
+      "$fluent-scheduler-appointment-title-font-size": "$scheduler-appointment-title-font-size",
+      "$fluent-scheduler-appointment-tooltip-content-margin-left": "$scheduler-appointment-tooltip-content-margin-inline-start",
+      "$fluent-scheduler-appointment-tooltip-date-font-size": "$scheduler-appointment-tooltip-date-font-size",
+      "$fluent-scheduler-appointment-tooltip-remove-padding-top": "$scheduler-appointment-tooltip-remove-padding-block-start",
+      "$fluent-scheduler-appointment-tooltip-title-font-size": "$scheduler-appointment-tooltip-title-font-size",
+      "$fluent-scheduler-appointment-tooltip-title-margin-top": "$scheduler-appointment-tooltip-title-margin-block-start",
+      "$fluent-scheduler-appointment-transparent-left-border": "$scheduler-appointment-transparent-left-border",
+      "$fluent-scheduler-appointment-transparent-right-border": "$scheduler-appointment-transparent-right-border",
+      "$fluent-scheduler-collapsed-all-day-table-cell-height": "$scheduler-collapsed-all-day-table-cell-height",
+      "$fluent-scheduler-common-collector-margin": "$scheduler-common-collector-margin",
+      "$fluent-scheduler-common-collector-size": "$scheduler-common-collector-size",
+      "$fluent-scheduler-date-table-cell-height": "$scheduler-date-table-cell-height",
+      "$fluent-scheduler-date-time-indicator-height": "$scheduler-date-time-indicator-height",
+      "$fluent-scheduler-dropdown-button-adaptive-margin": "$scheduler-dropdown-button-adaptive-margin",
+      "$fluent-scheduler-dropdown-button-adaptive-vertical-margin": "$scheduler-dropdown-button-adaptive-margin-block",
+      "$fluent-scheduler-dropdown-button-height": "$scheduler-dropdown-button-height",
+      "$fluent-scheduler-dropdown-button-margin": "$scheduler-dropdown-button-margin",
+      "$fluent-scheduler-dropdown-button-padding": "$scheduler-dropdown-button-padding",
+      "$fluent-scheduler-dropdown-button-vertical-margin": "$scheduler-dropdown-button-margin-block",
+      "$fluent-scheduler-group-header-agenda-font-size": "$scheduler-group-header-agenda-font-size",
+      "$fluent-scheduler-group-header-content-padding-top": "$scheduler-group-header-content-padding-block-start",
+      "$fluent-scheduler-group-header-font-size": "$scheduler-group-header-font-size",
+      "$fluent-scheduler-group-header-font-weight": "$scheduler-group-header-font-weight",
+      "$fluent-scheduler-group-header-table-cell-width": "$scheduler-group-header-table-cell-width",
+      "$fluent-scheduler-group-header-width": "$scheduler-group-header-width",
+      "$fluent-scheduler-header-height": "$scheduler-header-height",
+      "$fluent-scheduler-header-offset": "$scheduler-header-offset",
+      "$fluent-scheduler-header-panel-cell-date-font-size": "$scheduler-header-panel-cell-date-font-size",
+      "$fluent-scheduler-header-panel-cell-date-margin-bottom": "$scheduler-header-panel-cell-date-margin-block-end",
+      "$fluent-scheduler-header-panel-cell-padding-bottom": "$scheduler-header-panel-cell-padding-block-end",
+      "$fluent-scheduler-header-panel-current-time-cell-height": "$scheduler-header-panel-current-time-cell-height",
+      "$fluent-scheduler-header-panel-day-font-size": "$scheduler-header-panel-day-font-size",
+      "$fluent-scheduler-header-panel-margin": "$scheduler-header-panel-margin",
+      "$fluent-scheduler-month-appointment-content-padding": "$scheduler-month-appointment-content-padding",
+      "$fluent-scheduler-month-date-text-size": "$scheduler-month-date-font-size",
+      "$fluent-scheduler-month-recurrence-appointment-content-padding": "$scheduler-month-recurrence-appointment-content-padding",
+      "$fluent-scheduler-navigator-button-font-size": "$scheduler-navigator-button-font-size",
+      "$fluent-scheduler-navigator-icon-font-size": "$scheduler-navigator-icon-font-size",
+      "$fluent-scheduler-recurring-appointment-content-padding": "$scheduler-recurring-appointment-content-padding",
+      "$fluent-scheduler-small-margin-bottom": "$scheduler-small-margin-block-end",
+      "$fluent-scheduler-small-margin-left": "$scheduler-small-margin-inline-start",
+      "$fluent-scheduler-small-margin-top": "$scheduler-small-margin-block-start",
+      "$fluent-scheduler-small-padding-left": "$scheduler-small-padding-inline-start",
+      "$fluent-scheduler-small-padding-right": "$scheduler-small-padding-inline-end",
+      "$fluent-scheduler-time-panel-cell-margin-top": "$scheduler-time-panel-cell-margin-block-start",
+      "$fluent-scheduler-time-panel-font-size": "$scheduler-time-panel-font-size",
+      "$fluent-scheduler-timeline-cell-width": "$scheduler-timeline-cell-width",
+      "$fluent-scheduler-timeline-date-table-cell-height": "$scheduler-timeline-date-table-cell-height",
+      "$fluent-scheduler-timeline-group-header-width": "$scheduler-timeline-group-header-width",
+      "$fluent-scheduler-timeline-min-height": "$scheduler-timeline-min-height",
+      "$fluent-scheduler-toolbar-item-offset": "$scheduler-toolbar-item-offset",
+      "$fluent-scheduler-tooltip-appointment-item-content-date-margin-top": "$scheduler-tooltip-appointment-item-content-date-margin-block-start",
+      "$fluent-scheduler-tooltip-content-padding": "$scheduler-tooltip-content-padding",
+      "$fluent-scheduler-tooltip-date-font-size": "$scheduler-tooltip-date-font-size",
+      "$fluent-scheduler-tooltip-date-margin": "$scheduler-tooltip-date-margin",
+      "$fluent-scheduler-tooltip-remove-margin-top": "$scheduler-tooltip-remove-margin-block-start",
+      "$fluent-scheduler-tooltip-shadow": "$scheduler-tooltip-shadow-rest",
+      "$fluent-scheduler-tooltip-subject-font-size": "$scheduler-tooltip-subject-font-size",
+      "$fluent-scheduler-tooltip-subject-font-weight": "$scheduler-tooltip-subject-font-weight",
+      "$fluent-scheduler-tooltip-title-margin-left": "$scheduler-tooltip-title-margin-inline-start",
+      "$fluent-scheduler-tooltip-title-margin-top": "$scheduler-tooltip-title-margin-block-start",
+      "$fluent-scheduler-tooltip-width": "$scheduler-tooltip-width",
+      "$fluent-scheduler-widget-margin-bottom": "$scheduler-widget-margin-block-end",
+      "$fluent-scheduler-workspace-date-table-cell-height": "$scheduler-workspace-date-table-cell-height",
+      "$fluent-scheduler-workspace-info-text-size": "$scheduler-workspace-info-font-size",
+      "$fluent-scheduler-workspace-month-cell-left-offset": "$scheduler-workspace-month-cell-left-offset",
+      "$fluent-scheduler-workspace-month-header-height": "$scheduler-workspace-month-header-height",
+      "$fluent-scheduler-workspace-month-timeline-time-height": "$scheduler-workspace-month-timeline-time-height",
+      "$fluent-tab-vertical-nav-button-content-padding": "$tabs-tab-vertical-nav-button-content-padding",
+      "$fluent-timeview-numberbox-spin-touch-friendly-width": "$time-view-number-box-spin-touch-friendly-width",
+      "$fluent-tooltip-marker-dimension": "$scheduler-tooltip-marker-size",
+      "$form-field-item-color": "$form-field-item-content-rest",
+      "$form-group-border-color": "$form-group-border-rest",
+      "$form-item-help-text-color": "$form-item-help-content-rest",
+      "$gantt-collapsable-row-bg": "$gantt-collapsable-row-bg-rest",
+      "$gantt-parent-task-background-color": "$gantt-parent-task-bg-rest",
+      "$gantt-si-padding-left": "$gantt-si-padding-inline-start",
+      "$gantt-si-padding-right": "$gantt-si-padding-inline-end",
+      "$gantt-task-background-color": "$gantt-task-res-bg-rest",
+      "$gantt-task-color": "$gantt-task-res-content-rest",
+      "$gantt-task-edit-wrapper-padding-left": "$gantt-task-edit-wrapper-padding-inline-start",
+      "$gantt-task-margin-left": "$gantt-task-margin-inline-start",
+      "$gantt-task-padding-left": "$gantt-task-padding-inline-start",
+      "$gantt-task-padding-right": "$gantt-task-padding-inline-end",
+      "$gantt-task-progress-background-color": "$gantt-task-progress-bg-rest",
+      "$gantt-task-title-padding-left": "$gantt-task-title-padding-inline-start",
+      "$gantt-task-wrapper-padding-top": "$gantt-task-wrapper-padding-block-start",
+      "$gantt-title-padding-right": "$gantt-title-padding-inline-end",
+      "$header-day-element-height": "$scheduler-header-day-element-height",
+      "$header-panel-time-cell-height": "$scheduler-header-panel-time-cell-height",
+      "$header-panel-time-cell-padding": "$scheduler-header-panel-time-cell-padding",
+      "$htmleditor-cover-bg": "$html-editor-cover-bg-rest",
+      "$htmleditor-faded-text-color": "$html-editor-faded-content-rest",
+      "$htmleditor-fileuploader-input-wrapper-border-color": "$html-editor-file-uploader-input-wrapper-border-rest",
+      "$htmleditor-mention-bg": "$html-editor-mention-bg-rest",
+      "$htmleditor-resize-frame-border-color": "$html-editor-resize-frame-border-rest",
+      "$htmleditor-table-border-color": "$html-editor-table-border-rest",
+      "$htmleditor-toolbar-border-color": "$html-editor-toolbar-border-rest",
+      "$htmleditor-uploader-cover-bg": "$html-editor-uploader-cover-bg-rest",
+      "$htmleditor-variable-bg": "$html-editor-variable-bg-rest",
+      "$list-inverted-text-color": "$list-inverted-content-rest",
+      "$pivotgrid-area-field-bg": "$pivot-grid-area-field-bg-rest",
+      "$scheduler-alldaypanel-bg": "$scheduler-all-day-panel-bg-rest",
+      "$scheduler-appointment-focus-color": "$scheduler-appointment-content-focused",
+      "$scheduler-cell-active-bg": "$scheduler-cell-bg-active",
+      "$scheduler-cell-hover-bg": "$scheduler-cell-bg-hovered",
+      "$scheduler-dropdown-appointment-date-color": "$scheduler-dropdown-appointment-date-content-rest",
+      "$scheduler-first-month-border-color": "$scheduler-first-month-border-rest",
+      "$scheduler-form-icon-color": "$scheduler-form-icon-rest",
+      "$scheduler-group-separator-border-color": "$scheduler-group-separator-border-rest",
+      "$scheduler-header-bg": "$scheduler-header-bg-rest",
+      "$scheduler-inverted-text-color": "$scheduler-inverted-content-rest",
+      "$scheduler-workspace-other-month-text-color": "$scheduler-workspace-other-month-content-rest",
+      "$stepper-connector-bg": "$stepper-connector-bg-rest",
+      "$stepper-step-disabled-bg": "$stepper-step-bg-disabled",
+      "$stepper-step-disabled-shadow": "$stepper-step-shadow-disabled",
+      "$stepper-step-disabled-text-color": "$stepper-step-content-disabled",
+      "$stepper-step-invalid-bg": "$stepper-step-invalid-bg-rest",
+      "$stepper-step-invalid-border-color": "$stepper-step-invalid-border-rest",
+      "$stepper-step-invalid-hover-bg": "$stepper-step-invalid-bg-hovered",
+      "$stepper-step-invalid-hover-border-color": "$stepper-step-invalid-border-hovered",
+      "$stepper-step-invalid-hover-text-color": "$stepper-step-invalid-content-hovered",
+      "$stepper-step-invalid-selected-bg": "$stepper-step-invalid-bg-selected",
+      "$stepper-step-invalid-selected-hover-bg": "$stepper-step-invalid-bg-selected-hovered",
+      "$stepper-step-invalid-text-color": "$stepper-step-invalid-content-rest",
+      "$stepper-step-selected-bg": "$stepper-step-bg-selected",
+      "$stepper-step-selected-font-weight": "$stepper-step-font-weight-selected",
+      "$stepper-step-selected-hover-bg": "$stepper-step-bg-selected-hovered",
+      "$stepper-step-selected-text-color": "$stepper-step-content-selected",
+      "$stepper-step-shadow-color": "$stepper-step-shadow-rest",
+      "$tabs-tab-border-color-selected-focused": "$tabs-tab-border-selected-focused"
+    },
+    "C15-mechanical-3": {
+      "$base-select-all-separator-color": "$list-base-select-all-separator-bg-rest",
+      "$calendar-cell-hover-color": "$calendar-cell-content-hovered",
+      "$calendar-cell-other-color": "$calendar-cell-other-content-rest",
+      "$calendar-cell-other-hover-color": "$calendar-cell-other-content-hovered",
+      "$calendar-cell-selected-color": "$calendar-cell-content-selected",
+      "$calendar-color": "$calendar-content-rest",
+      "$calendar-header-color": "$calendar-header-content-rest",
+      "$calendar-week-number-cell-color": "$calendar-week-number-cell-content-rest",
+      "$chat-alertlist-color": "$chat-alert-list-content-rest",
+      "$chat-avatar-color": "$chat-avatar-content-rest",
+      "$chat-file-secondary-color": "$chat-file-secondary-content-rest",
+      "$chat-information-author-name-color": "$chat-information-author-name-content-rest",
+      "$chat-information-timestamp-color": "$chat-information-timestamp-content-rest",
+      "$chat-message-editing-preview-accent-color": "$chat-message-editing-preview-accent-content-rest",
+      "$chat-message-editing-preview-cancel-button-color": "$chat-message-editing-preview-cancel-button-content-rest",
+      "$chat-messagebox-file-cancel-button-secondary-color": "$chat-message-box-file-cancel-button-secondary-content-rest",
+      "$chat-messagebox-textarea-border-radius": "$chat-message-box-textarea-border-radius",
+      "$chat-messagebox-textarea-padding": "$chat-message-box-textarea-padding",
+      "$chat-messagebox-toolbar-min-height": "$chat-message-box-toolbar-min-height",
+      "$chat-messagelist-contextmenu-delete-button-color": "$chat-message-list-context-menu-delete-button-content-rest",
+      "$chat-messagelist-contextmenu-delete-button-focused-color": "$chat-message-list-context-menu-delete-button-content-focused",
+      "$chat-messagelist-day-header-color": "$chat-message-list-day-header-content-rest",
+      "$chat-messagelist-empty-message-color": "$chat-message-list-empty-message-content-rest",
+      "$chat-messagelist-empty-prompt-color": "$chat-message-list-empty-prompt-content-rest",
+      "$chat-messagelist-empty-prompt-font-size": "$chat-message-list-empty-prompt-font-size",
+      "$chat-typingindicator-bubble-border-radius": "$chat-typing-indicator-bubble-border-radius",
+      "$chat-typingindicator-bubble-column-gap": "$chat-typing-indicator-bubble-column-gap",
+      "$chat-typingindicator-bubble-padding-block": "$chat-typing-indicator-bubble-padding-block",
+      "$chat-typingindicator-bubble-padding-inline": "$chat-typing-indicator-bubble-padding-inline",
+      "$chat-typingindicator-circle-border-radius": "$chat-typing-indicator-circle-border-radius",
+      "$chat-typingindicator-circle-size": "$chat-typing-indicator-circle-size",
+      "$chat-typingindicator-color": "$chat-typing-indicator-content-rest",
+      "$chat-typingindicator-font-size": "$chat-typing-indicator-font-size",
+      "$chat-typingindicator-padding": "$chat-typing-indicator-padding",
+      "$chat-typingindicator-row-gap": "$chat-typing-indicator-row-gap",
+      "$colorview-handle-color": "$color-view-handle-content-rest",
+      "$diagram-image-icon-accent-color": "$diagram-image-icon-accent-border-rest",
+      "$diagram-image-icon-base-color": "$diagram-image-icon-base-content-rest",
+      "$filemanager-icon-danger-color": "$file-manager-icon-danger-content-rest",
+      "$filemanager-icon-inverted-color": "$file-manager-icon-inverted-content-rest",
+      "$filemanager-icon-success-color": "$file-manager-icon-success-content-rest",
+      "$filemanager-large-icon-size": "$file-manager-large-icon-size",
+      "$fluent-agenda-appointment-resource-item-margin-left": "$scheduler-agenda-appointment-resource-item-margin-inline-start",
+      "$fluent-agenda-appointment-resource-value-margin-left": "$scheduler-agenda-appointment-resource-value-margin-inline-start",
+      "$fluent-agenda-appointment-right-layout-margin-left": "$scheduler-agenda-appointment-right-layout-margin-inline-start",
+      "$fluent-fa-button-label-font-weight": "$speed-dial-action-fa-button-label-font-weight",
+      "$fluent-fa-button-label-offset": "$speed-dial-action-fa-button-label-offset",
+      "$fluent-fa-button-label-padding": "$speed-dial-action-fa-button-label-padding",
+      "$fluent-fa-button-size": "$speed-dial-action-fa-button-size",
+      "$fluent-list-slide-menu-button-menu-border": "$list-slide-menu-button-menu-border",
+      "$fluent-list-slide-menu-button-padding": "$list-slide-menu-button-padding",
+      "$fluent-main-fa-button-horizontal-padding": "$speed-dial-action-main-fa-button-padding-inline",
+      "$fluent-main-fa-button-label-padding": "$speed-dial-action-main-fa-button-label-padding",
+      "$fluent-main-fa-button-size": "$speed-dial-action-main-fa-button-size",
+      "$fluent-pivotgrid-area-box-border": "$pivot-grid-area-box-border",
+      "$fluent-pivotgrid-area-box-margin-bottom": "$pivot-grid-area-box-margin-block-end",
+      "$fluent-pivotgrid-area-fields-margin-top": "$pivot-grid-area-fields-margin-block-start",
+      "$fluent-pivotgrid-button-margin": "$pivot-grid-button-margin",
+      "$fluent-pivotgrid-chevron-icon-size": "$pivot-grid-chevron-icon-size",
+      "$fluent-pivotgrid-drag-header-shadow": "$pivot-grid-drag-header-shadow-rest",
+      "$fluent-pivotgrid-field-chooser-button-margin-left": "$pivot-grid-field-chooser-button-margin-inline-start",
+      "$fluent-pivotgrid-field-chooser-button-margin-right": "$pivot-grid-field-chooser-button-margin-inline-end",
+      "$fluent-pivotgrid-fields-area-head-cell-side-padding": "$pivot-grid-fields-area-head-cell-padding-inline",
+      "$fluent-pivotgrid-fields-area-head-padding": "$pivot-grid-fields-area-head-padding",
+      "$fluent-pivotgrid-fields-area-head-padding-left": "$pivot-grid-fields-area-head-padding-inline-start",
+      "$fluent-pivotgrid-headers-font-size": "$pivot-grid-headers-font-size",
+      "$fluent-pivotgrid-icon-sorted-margin-left": "$pivot-grid-icon-sorted-margin-inline-start",
+      "$fluent-pivotgrid-icon-sorted-margin-right": "$pivot-grid-icon-sorted-margin-inline-end",
+      "$fluent-pivotgrid-last-cell-min-width": "$pivot-grid-last-cell-min-width",
+      "$fluent-pivotgrid-position-indicator-horizontal-width": "$pivot-grid-position-indicator-horizontal-width",
+      "$fluent-pivotgrid-position-indicator-vertical-height": "$pivot-grid-position-indicator-vertical-height",
+      "$fluent-pivotgrid-toolbar-margin-left": "$pivot-grid-toolbar-margin-inline-start",
+      "$fluent-pivotgrid-toolbar-margin-right": "$pivot-grid-toolbar-margin-inline-end",
+      "$fluent-pivotgrid-toolbar-padding-left": "$pivot-grid-toolbar-padding-inline-start",
+      "$fluent-pivotgrid-treeview-item-padding": "$pivot-grid-tree-view-item-padding",
+      "$fluent-pivotgrid-treeview-node-container-padding-right": "$pivot-grid-tree-view-node-container-padding-inline-end",
+      "$fluent-pivotgrid-treeview-search-margin": "$pivot-grid-tree-view-search-margin",
+      "$fluent-scheduler-agenda-left-column-width": "$scheduler-agenda-left-column-width",
+      "$fluent-scheduler-scrollable-content-min-height": "$scheduler-scrollable-content-min-height",
+      "$fluent-scheduler-tooltip-appointment-item-marker-body-margin-top": "$scheduler-tooltip-appointment-item-marker-body-margin-block-start",
+      "$fluent-scheduler-views-group-header-content-height": "$scheduler-views-group-header-content-height",
+      "$fluent-scheduler-views-group-header-padding": "$scheduler-views-group-header-padding",
+      "$fluent-scheduler-views-header-border": "$scheduler-views-header-border",
+      "$fluent-scheduler-views-time-indicator-height": "$scheduler-views-time-indicator-height",
+      "$fluent-scheduler-views-vertical-group-min-height": "$scheduler-views-vertical-group-min-height",
+      "$fluent-select-all-item-border-visible-padding": "$tree-view-select-all-item-border-visible-padding",
+      "$fluent-speeddialaction-fa-button-label-border-radius": "$speed-dial-action-fa-button-label-border-radius",
+      "$fluent-treeview-border-visible-border": "$tree-view-border-visible-border",
+      "$fluent-treeview-container-with-border-offset": "$tree-view-container-with-border-offset",
+      "$gantt-accent-border-color": "$gantt-accent-border-rest",
+      "$list-menu-button-delete-bg": "$list-menu-button-delete-bg-rest",
+      "$pivotgrid-chevron-icon-color": "$pivot-grid-chevron-icon-rest",
+      "$pivotgrid-empty-column-width": "$pivot-grid-empty-column-width",
+      "$pivotgrid-field-area-box-background-color": "$pivot-grid-field-area-box-bg-rest",
+      "$pivotgrid-field-area-box-text-color": "$pivot-grid-field-area-box-content-rest",
+      "$pivotgrid-position-indicator-color": "$pivot-grid-position-indicator-bg-rest",
+      "$radiobutton-invalid-color": "$radio-group-radio-button-invalid-content-rest",
+      "$radiobutton-invalid-color-focused": "$radio-group-radio-button-invalid-content-focused",
+      "$radiobutton-invalid-color-hover": "$radio-group-radio-button-invalid-content-hovered",
+      "$radiogroup-accent-color": "$radio-group-accent-content-rest",
+      "$radiogroup-accent-color-active": "$radio-group-accent-content-active",
+      "$radiogroup-accent-color-hover": "$radio-group-accent-content-hovered",
+      "$slider-accent-color": "$slider-accent-bg-rest",
+      "$slider-accent-color-focused": "$slider-accent-content-focused",
+      "$slider-accent-color-hover": "$slider-accent-bg-hovered",
+      "$slider-invalid-color-focused": "$slider-invalid-content-focused",
+      "$speed-dial-action-color": "$speed-dial-action-content-rest",
+      "$stepper-step-accent-bg": "$stepper-step-accent-bg-rest",
+      "$stepper-step-accent-hover-bg": "$stepper-step-accent-bg-hovered",
+      "$stepper-step-base-bg": "$stepper-step-base-bg-rest",
+      "$stepper-step-base-border-color": "$stepper-step-base-border-rest",
+      "$stepper-step-base-hover-bg": "$stepper-step-base-bg-hovered",
+      "$stepper-step-base-hover-border-color": "$stepper-step-base-border-hovered",
+      "$stepper-step-base-text-color": "$stepper-step-base-content-rest",
+      "$stepper-step-selected-label-color": "$stepper-step-label-content-selected",
+      "$treeview-checkbox-accent-color-focused": "$tree-view-checkbox-accent-content-focused",
+      "$treeview-focus-color": "$tree-view-content-focused",
+      "$treeview-item-hover-color": "$tree-view-item-content-hovered",
+      "$treeview-item-selected-color": "$tree-view-item-content-selected"
+    },
+    "C16-tabs": {
+      "$fluent-badge-min-size": "$tabs-badge-min-size",
+      "$fluent-indicator-border-radius-secondary": "$tabs-indicator-secondary-border-radius",
+      "$fluent-indicator-length-primary": "$tabs-indicator-primary-length",
+      "$fluent-indicator-length-secondary": "$tabs-indicator-secondary-length",
+      "$fluent-indicator-thickness-primary": "$tabs-indicator-primary-thickness",
+      "$fluent-indicator-thickness-secondary": "$tabs-indicator-secondary-thickness",
+      "$fluent-tab-font-weight-accent": "$tabs-tab-accent-font-weight",
+      "$fluent-tab-font-weight-basic": "$tabs-tab-basic-font-weight",
+      "$fluent-tab-item-border-radius-secondary": "$tabs-item-secondary-border-radius",
+      "$fluent-tabs-item-padding-right-left": "$tabs-item-padding-inline",
+      "$fluent-tabs-item-padding-top-bottom": "$tabs-item-padding-block",
+      "$tabs-active-tab-bg-color": "$tabs-tab-bg-active",
+      "$tabs-focused-tab-bg-color": "$tabs-tab-bg-focused",
+      "$tabs-hovered-tab-bg-color": "$tabs-tab-bg-hovered",
+      "$tabs-nav-button-bg-color": "$tabs-nav-button-bg-rest",
+      "$tabs-tab-bg-color-active-primary": "$tabs-tab-primary-bg-active",
+      "$tabs-tab-bg-color-focus-primary": "$tabs-tab-primary-bg-focused",
+      "$tabs-tab-bg-color-hover-primary": "$tabs-tab-primary-bg-hovered",
+      "$tabs-tab-border-color-selected-basic": "$tabs-tab-basic-border-selected",
+      "$tabs-tab-button-disabled-opacity": "$tabs-nav-button-opacity-disabled"
+    },
+    "C17-mechanical-4": {
+      "$diagram-toolbar-wrapper-border-bottom": "$diagram-toolbar-wrapper-border-block-end",
+      "$fluent-filemanager-breadcrumbs-border-bottom": "$file-manager-breadcrumbs-border-block-end",
+      "$fluent-filemanager-container-border-top": "$file-manager-container-border-block-start",
+      "$fluent-filemanager-progress-panel-border-left-width": "$file-manager-progress-panel-border-inline-start-width",
+      "$fluent-filterbuilder-range-separator-opacity": "$filter-builder-range-separator-opacity",
+      "$fluent-form-group-content-border-top": "$form-group-content-border-block-start",
+      "$fluent-list-response-wait-opacity": "$list-response-wait-opacity",
+      "$fluent-list-slide-menu-button-bottom": "$list-slide-menu-button-inset-block-end",
+      "$fluent-scheduler-agenda-details-opacity": "$scheduler-agenda-details-opacity",
+      "$fluent-scheduler-appointment-10min-icon-right": "$scheduler-appointment-10min-icon-inset-inline-end",
+      "$fluent-scheduler-appointment-15min-icon-right": "$scheduler-appointment-15min-icon-inset-inline-end",
+      "$fluent-scheduler-appointment-20min-icon-right": "$scheduler-appointment-20min-icon-inset-inline-end",
+      "$fluent-scheduler-appointment-content-padding-rtl": "$scheduler-appointment-content-rtl-padding",
+      "$fluent-scheduler-appointment-date-opacity": "$scheduler-appointment-date-opacity",
+      "$fluent-scheduler-appointment-disabled-opacity": "$scheduler-appointment-opacity-disabled",
+      "$fluent-scheduler-appointment-drag-source-opacity": "$scheduler-appointment-drag-source-opacity",
+      "$fluent-scheduler-appointment-recurrence-icon-top": "$scheduler-appointment-recurrence-icon-inset-block-start",
+      "$fluent-scheduler-appointment-reduced-icon-rtl-left": "$scheduler-appointment-reduced-icon-rtl-inset-inline-start",
+      "$fluent-scheduler-appointment-reduced-icon-top": "$scheduler-appointment-reduced-icon-inset-block-start",
+      "$fluent-scheduler-appointment-resizing-opacity": "$scheduler-appointment-resizing-opacity",
+      "$fluent-scheduler-appointment-strip-border-bottom-left-radius": "$scheduler-appointment-strip-border-end-start-radius",
+      "$fluent-scheduler-appointment-strip-border-bottom-right-radius": "$scheduler-appointment-strip-border-end-end-radius",
+      "$fluent-scheduler-appointment-strip-border-top-left-radius": "$scheduler-appointment-strip-border-start-start-radius",
+      "$fluent-scheduler-appointment-strip-border-top-right-radius": "$scheduler-appointment-strip-border-start-end-radius",
+      "$fluent-scheduler-group-header-border-bottom": "$scheduler-group-header-border-block-end",
+      "$fluent-scheduler-group-header-content-top": "$scheduler-group-header-content-inset-block-start",
+      "$fluent-scheduler-header-panel-empty-cell-border-bottom-width": "$scheduler-header-panel-empty-cell-border-block-end-width",
+      "$fluent-scheduler-last-group-cell-border-right": "$scheduler-last-group-cell-border-inline-end",
+      "$fluent-scheduler-list-item-border-bottom": "$scheduler-list-item-border-block-end",
+      "$fluent-scheduler-month-appointment-content-padding-rtl": "$scheduler-month-appointment-content-rtl-padding",
+      "$fluent-scheduler-month-recurrence-appointment-content-padding-rtl": "$scheduler-month-recurrence-appointment-content-rtl-padding",
+      "$fluent-scheduler-recurring-appointment-content-padding-rtl": "$scheduler-recurring-appointment-content-rtl-padding",
+      "$fluent-scheduler-rtl-border-left": "$scheduler-rtl-border-inline-start",
+      "$fluent-scheduler-timeline-group-three-empty-cell-width": "$scheduler-timeline-group-three-empty-cell-width",
+      "$fluent-scheduler-timeline-group-two-empty-cell-width": "$scheduler-timeline-group-two-empty-cell-width",
+      "$fluent-scheduler-views-empty-cell-border-bottom": "$scheduler-views-empty-cell-border-block-end",
+      "$fluent-scheduler-views-empty-cell-border-left": "$scheduler-views-empty-cell-border-inline-start",
+      "$fluent-scheduler-views-empty-cell-border-right": "$scheduler-views-empty-cell-border-inline-end",
+      "$fluent-scheduler-views-first-child-border-left": "$scheduler-views-first-child-border-inline-start",
+      "$fluent-scheduler-views-time-panel-border-bottom": "$scheduler-views-time-panel-border-block-end",
+      "$fluent-treeview-disabled-opacity": "$tree-view-opacity-disabled",
+      "$fluent-treeview-select-all-item-border-bottom": "$tree-view-select-all-item-border-block-end",
+      "$list-item-disabled-opacity": "$list-item-opacity-disabled"
+    },
+    "C18-tails-big": {
+      "$chat-bubble-background-color-primary": "$chat-bubble-primary-bg-rest",
+      "$chat-bubble-background-color-secondary": "$chat-bubble-secondary-bg-rest",
+      "$chat-bubble-color-primary": "$chat-bubble-primary-content-rest",
+      "$chat-bubble-color-secondary": "$chat-bubble-secondary-content-rest",
+      "$chat-messagegroup-alignment-start-template": "$chat-message-group-start-grid-template-columns",
+      "$chat-messagelist-day-header-first-padding-top": "$chat-message-list-day-header-first-padding-block-start",
+      "$chat-typingindicator-bubble-bg-color": "$chat-typing-indicator-bubble-bg-rest",
+      "$chat-typingindicator-circle-bg-color": "$chat-typing-indicator-circle-bg-rest",
+      "$chat-typingindicator-circle-bg-color-center": "$chat-typing-indicator-circle-center-bg-rest",
+      "$chat-typingindicator-circle-size-center": "$chat-typing-indicator-circle-center-size",
+      "$chat-typingindicator-template": "$chat-typing-indicator-grid-template-columns",
+      "$fluent-gantt-toolbar-separator-border-left": "$gantt-toolbar-separator-border-inline-start",
+      "$fluent-list-context-menucontent-border": "$list-context-menu-content-border",
+      "$fluent-list-state-hover-border": "$list-item-ghost-border",
+      "$fluent-recurrence-button-group-padding": "$recurrence-editor-button-group-padding",
+      "$fluent-recurrence-count-number-box-top-margin": "$recurrence-editor-count-number-box-margin-block-start",
+      "$fluent-recurrence-interval-number-box-margin-top": "$recurrence-editor-interval-number-box-margin-block-start",
+      "$fluent-recurrence-number-box-margin": "$recurrence-editor-number-box-margin",
+      "$fluent-recurrence-radio-group-margin": "$recurrence-editor-radio-group-margin",
+      "$fluent-recurrence-until-date-box-top-margin": "$recurrence-editor-until-date-box-margin-block-start",
+      "$fluent-scheduler-appointment-content-padding-2": "$scheduler-all-day-appointment-content-padding",
+      "$fluent-scheduler-appointment-content-padding-3": "$scheduler-recurrence-appointment-content-padding",
+      "$fluent-scheduler-renovation-virtual-row-height": "$scheduler-virtual-row-height",
+      "$fluent-scheduler-views-group-header-padding-alt": "$scheduler-views-sidebar-group-header-padding",
+      "$gantt-accent-light-bg": "$gantt-ti-bg-rest",
+      "$gantt-hb-border-top": "$gantt-hb-border-block-start",
+      "$gantt-t-bottom": "$gantt-task-progress-inset-block-end",
+      "$gantt-task-edit-progress-bottom": "$gantt-edit-progress-inset-block-end",
+      "$gantt-ti-border-right": "$gantt-ti-border-inline-end",
+      "$gantt-tm-border-left": "$gantt-tm-border-inline-start",
+      "$gantt-toolbar-wrapper-border-bottom": "$gantt-toolbar-wrapper-border-block-end",
+      "$gantt-vb-border-left": "$gantt-vb-border-inline-start",
+      "$header-panel-cell-date": "$scheduler-header-panel-cell-date-content-rest",
+      "$list-item-focused-selected-bg": "$list-item-bg-selected-focused"
+    },
+    "C19-mechanical-5": {
+      "$chat-messagegroup-alignment-start-gap": "$chat-message-group-alignment-start-gap",
+      "$chat-messagegroup-gap": "$chat-message-group-gap",
+      "$chat-messagegroup-padding": "$chat-message-group-padding",
+      "$colorbox-overlay-bg": "$color-view-content-box-overlay-bg-rest",
+      "$colorbox-palette-cell-bg": "$color-view-bg-box-palette-cell-bg-rest",
+      "$diagram-accordion-item-border-bottom": "$diagram-accordion-item-border-block-end",
+      "$diagram-selection-mark-color": "$diagram-selection-mark-content-rest",
+      "$diagram-toolbox-input-container-border-bottom": "$diagram-toolbox-input-container-border-block-end",
+      "$diagram-toolbox-input-container-border-top": "$diagram-toolbox-input-container-border-block-start",
+      "$filemanager-contextmenu-text-item-left-margin": "$file-manager-context-menu-text-item-left-margin",
+      "$filemanager-progress-box-button-close-margin-top": "$file-manager-progress-box-button-close-margin-block-start",
+      "$filemanager-treeview-item-top-bottom-padding": "$file-manager-tree-view-item-top-bottom-padding",
+      "$fileuploader-falename-status-color": "$file-uploader-file-name-status-content-rest",
+      "$fluent-colorview-colorview-color-preview-container-margin": "$color-view-color-preview-container-margin",
+      "$fluent-colorview-colorview-color-preview-container-padding": "$color-view-color-preview-container-padding",
+      "$fluent-colorview-colorview-container-margin-bottom": "$color-view-container-margin-block-end",
+      "$fluent-diagram-colorview-hue-scale-cell-margin-left": "$diagram-color-view-hue-scale-cell-margin-inline-start",
+      "$fluent-diagram-colorview-palette-min-width": "$diagram-color-view-palette-min-width",
+      "$fluent-diagram-context-toolbox-target-height": "$diagram-context-toolbox-target-height",
+      "$fluent-diagram-context-toolbox-target-width": "$diagram-context-toolbox-target-width",
+      "$fluent-diagram-loading-indicator-height": "$diagram-loading-indicator-height",
+      "$fluent-diagram-loading-indicator-width": "$diagram-loading-indicator-width",
+      "$fluent-diagram-root-height": "$diagram-height",
+      "$fluent-diagram-root-min-height": "$diagram-min-height",
+      "$fluent-filemanager-drawer-panel-content-initial-max-width": "$file-manager-drawer-panel-content-initial-max-width",
+      "$fluent-filemanager-drawer-panel-content-initial-min-width": "$file-manager-drawer-panel-content-initial-min-width",
+      "$fluent-filemanager-fileuploader-dropzone-placeholder-border": "$file-manager-file-uploader-drop-zone-placeholder-border",
+      "$fluent-filemanager-i-cancel-height": "$file-manager-i-cancel-height",
+      "$fluent-filemanager-i-cancel-width": "$file-manager-i-cancel-width",
+      "$fluent-filemanager-notification-common-border-bottom-width": "$file-manager-notification-border-block-end-width",
+      "$fluent-filemanager-notification-common-padding-bottom": "$file-manager-notification-padding-block-end",
+      "$fluent-filemanager-progress-bold-font-weight": "$file-manager-progress-bold-font-weight",
+      "$fluent-filemanager-progress-box-without-close-button-padding-right": "$file-manager-progress-box-without-close-button-padding-inline-end",
+      "$fluent-filemanager-root-border": "$file-manager-border",
+      "$fluent-filemanager-root-height": "$file-manager-height",
+      "$fluent-filemanager-state-focused-border": "$file-manager-border-focused",
+      "$fluent-filemanager-viewmode-button-content-padding": "$file-manager-view-mode-button-content-padding",
+      "$fluent-fileuploader-cancel-button-position-end-margin-left": "$file-uploader-cancel-button-position-end-margin-inline-start",
+      "$fluent-fileuploader-cancel-button-position-end-margin-right": "$file-uploader-cancel-button-position-end-margin-inline-end",
+      "$fluent-fileuploader-file-container-boxshadow": "$file-uploader-file-container-shadow-rest",
+      "$fluent-fileuploader-file-wrapper-border-size": "$file-uploader-file-wrapper-border-width",
+      "$fluent-fileuploader-files-container-bg-color": "$file-uploader-files-container-bg-rest",
+      "$fluent-fileuploader-files-container-rounding": "$file-uploader-files-container-border-radius",
+      "$fluent-fileuploader-show-file-list-padding-top": "$file-uploader-show-file-list-padding-block-start",
+      "$fluent-fileuploader-status-message-font-size": "$file-uploader-status-message-font-size",
+      "$fluent-filterbuilder-treeview-item-min-heigth": "$filter-builder-tree-view-item-min-height",
+      "$fluent-filterbuilder-treeview-toggle-item-visibility-right": "$filter-builder-tree-view-toggle-item-visibility-inset-inline-end",
+      "$fluent-filterbuilder-treeview-toggle-left": "$filter-builder-tree-view-toggle-inset-inline-start",
+      "$fluent-form-field-item-label-location-left-padding-inline-end": "$form-field-item-label-location-left-padding-inline-end",
+      "$fluent-form-field-item-label-location-right-padding-inline-start": "$form-field-item-label-location-right-padding-inline-start",
+      "$fluent-form-first-row-padding-top": "$form-first-row-padding-block-start",
+      "$fluent-form-group-custom-caption-icon-margin": "$form-group-custom-caption-icon-margin",
+      "$fluent-html-editor-add-image-dialog-fileuploader-padding": "$html-editor-add-image-dialog-file-uploader-padding",
+      "$fluent-html-editor-fileuploader-input-wrapper-border-size": "$html-editor-file-uploader-input-wrapper-border-width",
+      "$fluent-htmleditor-code-block-bg": "$html-editor-code-block-bg-rest",
+      "$fluent-htmleditor-placeholder-color": "$html-editor-placeholder-content-rest",
+      "$fluent-htmleditor-state-active-border-bottom": "$html-editor-border-block-end-active",
+      "$fluent-pagination-first-child-margin-left": "$pagination-first-child-margin-inline-start",
+      "$fluent-pagination-first-child-padding-bottom": "$pagination-first-child-padding-block-end",
+      "$fluent-pagination-first-child-padding-left": "$pagination-first-child-padding-inline-start",
+      "$fluent-pagination-first-child-padding-right": "$pagination-first-child-padding-inline-end",
+      "$fluent-pagination-first-child-padding-top": "$pagination-first-child-padding-block-start",
+      "$fluent-pivotgrid-common-field-chooser-drag-height": "$pivot-grid-field-chooser-drag-height",
+      "$fluent-pivotgrid-common-field-chooser-drag-width": "$pivot-grid-field-chooser-drag-width",
+      "$fluent-toolbar-size-editor-width": "$html-editor-toolbar-size-editor-width",
+      "$form-field-mark-color": "$form-field-mark-content-rest",
+      "$form-field-required-color": "$form-field-required-content-rest",
+      "$gantt-root-border": "$gantt-border",
+      "$htmleditor-highlighted-row-bg": "$html-editor-highlighted-row-bg-rest",
+      "$htmleditor-resize-handle-bg": "$html-editor-resize-trigger-rest"
+    },
+    "C20-accents": {
+      "$diagram-danger": "$diagram-danger-icon-rest",
+      "$diagram-popup-title-toolbar-bg-color": "$diagram-popup-title-toolbar-bg-rest",
+      "$diagram-selection-fill-color": "$diagram-selection-bg-rest",
+      "$diagram-toolbox-shape-text-opacity": "$diagram-toolbox-shape-text-opacity-rest",
+      "$filemanager-accent": "$file-manager-drop-zone-placeholder-border-rest",
+      "$filemanager-danger": "$file-manager-danger-bg-rest",
+      "$fileuploader-danger": "$file-uploader-file-status-message-invalid-content-rest",
+      "$fluent-aidialog-selects-gap": "$html-editor-ai-dialog-selects-gap",
+      "$fluent-html-editor-add-image-dialog-tabs-padding": "$html-editor-add-image-dialog-tabs-padding",
+      "$fluent-html-editor-toolbar-menu-separator-margin": "$html-editor-toolbar-menu-separator-margin",
+      "$fluent-htmleditor-aidialog-title-font-weight": "$html-editor-ai-dialog-title-font-weight",
+      "$fluent-htmleditor-toolbar-wrapper-bottom": "$html-editor-toolbar-wrapper-inset-block-end",
+      "$fluent-htmleditor-toolbar-wrapper-left": "$html-editor-toolbar-wrapper-inset-inline-start",
+      "$fluent-htmleditor-toolbar-wrapper-right": "$html-editor-toolbar-wrapper-inset-inline-end",
+      "$fluent-htmleditor-toolbar-wrapper-top": "$html-editor-toolbar-wrapper-inset-block-start",
+      "$fluent-pivotgrid-checkbox-left": "$pivot-grid-checkbox-inset-inline-start",
+      "$fluent-pivotgrid-position-indicator-last-margin-left": "$pivot-grid-position-indicator-last-margin-inline-start",
+      "$fluent-pivotgridfieldchooser-field-min-height": "$pivot-grid-field-chooser-field-min-height",
+      "$gantt-accent": "$gantt-task-bg-rest",
+      "$htmleditor-fileuploader-input-wrapper-bg-color": "$html-editor-file-uploader-input-wrapper-bg-rest",
+      "$pivotgrid-accent": "$pivot-grid-header-filter-content-rest",
+      "$pivotgrid-field-area-box-font-weight": "$pivot-grid-field-area-box-font-weight",
+      "$scheduler-accent": "$scheduler-appointment-strip-bg-rest",
+      "$speed-dial-action-shading-color": "$speed-dial-action-backdrop-rest",
+      "$stepper-connector-value-bg": "$stepper-connector-value-bg-rest",
+      "$stepper-step-base-label-color": "$stepper-step-base-label-content-rest",
+      "$stepper-step-invalid-label-color": "$stepper-step-invalid-label-content-rest"
+    },
+    "D1-radio-button": {
+      "$radio-group-accent-content-active": "$radio-button-checked-bg-active",
+      "$radio-group-accent-content-hovered": "$radio-button-checked-bg-hovered",
+      "$radio-group-accent-content-rest": "$radio-button-checked-bg-rest",
+      "$radio-group-bg-rest": "$radio-button-icon-bg-rest",
+      "$radio-group-border-active": "$radio-button-icon-border-active",
+      "$radio-group-border-hovered": "$radio-button-icon-border-hovered",
+      "$radio-group-border-read-only": "$radio-button-icon-border-read-only",
+      "$radio-group-border-rest": "$radio-button-icon-border-rest",
+      "$radio-group-radio-button-bg-focused": "$radio-button-icon-bg-focused",
+      "$radio-group-radio-button-invalid-content-focused": "$radio-button-invalid-bg-focused",
+      "$radio-group-radio-button-invalid-content-hovered": "$radio-button-invalid-bg-hovered",
+      "$radio-group-radio-button-invalid-content-rest": "$radio-button-invalid-bg-rest"
+    },
+    "D2-overlay-surface": {
+      "$overlay-backdrop-rest": "$backdrop-rest",
+      "$overlay-content-bg-rest": "$surface-overlay-rest"
+    },
+    "C21-base-with-values": {
+      "$agenda-appointment-active-bg": "$scheduler-agenda-appointment-bg-active",
+      "$agenda-appointment-hover-bg": "$scheduler-agenda-appointment-bg-hovered",
+      "$agenda-appointment-recurrence-icon-color": "$scheduler-agenda-appointment-recurrence-icon-rest",
+      "$agenda-appointment-text-color": "$scheduler-agenda-appointment-content-rest",
+      "$agenda-appointment-title-font-size": "$scheduler-agenda-appointment-title-font-size",
+      "$filemanager-progress-panel-title-padding": "$file-manager-progress-panel-title-padding-block",
+      "$filterbuilder-bg": "$filter-builder-bg-rest",
+      "$filterbuilder-group-operation-color": "$filter-builder-group-operation-content-rest",
+      "$filterbuilder-group-operation-focus-color": "$filter-builder-group-operation-content-focused",
+      "$filterbuilder-group-operation-hover-color": "$filter-builder-group-operation-content-hovered",
+      "$filterbuilder-item-field-color": "$filter-builder-item-field-content-rest",
+      "$filterbuilder-item-field-focus-color": "$filter-builder-item-field-content-focused",
+      "$filterbuilder-item-field-hover-color": "$filter-builder-item-field-content-hovered",
+      "$filterbuilder-item-operator-color": "$filter-builder-item-operator-content-rest",
+      "$filterbuilder-item-operator-focus-color": "$filter-builder-item-operator-content-focused",
+      "$filterbuilder-item-operator-hover-color": "$filter-builder-item-operator-content-hovered",
+      "$filterbuilder-item-value-color": "$filter-builder-item-value-content-rest",
+      "$filterbuilder-item-value-focus-color": "$filter-builder-item-value-content-focused",
+      "$filterbuilder-item-value-hover-color": "$filter-builder-item-value-content-hovered",
+      "$filterbuilder-menu-icon-color": "$filter-builder-menu-icon-rest",
+      "$filterbuilder-plus-icon-focus-color": "$filter-builder-plus-icon-content-focused",
+      "$filterbuilder-plus-icon-hover-color": "$filter-builder-plus-icon-content-hovered",
+      "$filterbuilder-remove-icon-focus-color": "$filter-builder-remove-icon-content-focused",
+      "$filterbuilder-remove-icon-hover-color": "$filter-builder-remove-icon-content-hovered",
+      "$filterbuilder-text-color": "$filter-builder-content-rest",
+      "$filterbuilder-text-focus-color": "$filter-builder-text-content-focused",
+      "$pivotgrid-accent-color": "$pivot-grid-accent-content-rest",
+      "$pivotgrid-area-background": "$pivot-grid-area-bg-rest",
+      "$pivotgrid-area-color": "$pivot-grid-area-content-rest",
+      "$pivotgrid-border-color": "$pivot-grid-border-rest",
+      "$pivotgrid-button-top-padding": "$pivot-grid-button-top-padding",
+      "$pivotgrid-common-left-right-padding": "$pivot-grid-left-right-padding",
+      "$pivotgrid-data-area-color": "$pivot-grid-data-area-content-rest",
+      "$pivotgrid-drag-header-border-color": "$pivot-grid-drag-header-border-rest",
+      "$pivotgrid-drag-header-first-shadow-color": "$pivot-grid-drag-header-first-shadow-rest",
+      "$pivotgrid-empty-area-text-padding": "$pivot-grid-empty-area-text-padding",
+      "$pivotgrid-field-area-text-color": "$pivot-grid-field-area-content-rest",
+      "$pivotgrid-field-indicators-offset": "$pivot-grid-field-indicators-offset",
+      "$pivotgrid-header-top-bottom-padding": "$pivot-grid-header-top-bottom-padding",
+      "$pivotgrid-indicators-line-height": "$pivot-grid-indicators-line-height",
+      "$scheduler-accent-border-color": "$scheduler-accent-border-rest",
+      "$scheduler-appointment-active-color": "$scheduler-appointment-content-active",
+      "$scheduler-appointment-base-color": "$scheduler-appointment-base-content-rest",
+      "$scheduler-appointment-overlay-bg": "$scheduler-appointment-overlay-bg-rest",
+      "$scheduler-appointment-text-color": "$scheduler-appointment-content-rest",
+      "$scheduler-base-border-color": "$scheduler-base-border-rest",
+      "$scheduler-current-time-cell-color": "$scheduler-current-time-cell-content-rest",
+      "$scheduler-dd-appointment-hover-text-color": "$scheduler-dd-appointment-content-hovered",
+      "$scheduler-droppable-cell-background-color": "$scheduler-droppable-cell-bg-rest",
+      "$scheduler-first-month-cell-background-color": "$scheduler-first-month-cell-bg-rest",
+      "$scheduler-panel-text-color": "$scheduler-panel-content-rest",
+      "$scheduler-time-indicator-background-color": "$scheduler-time-indicator-bg-rest",
+      "$scheduler-time-indicator-color": "$scheduler-time-indicator-content-rest",
+      "$scheduler-tooltip-appointment-text-color": "$scheduler-tooltip-appointment-content-rest",
+      "$scheduler-workspace-accent-color": "$scheduler-workspace-accent-content-rest",
+      "$scheduler-workspace-active-cell-color": "$scheduler-workspace-cell-content-active",
+      "$scheduler-workspace-background-color": "$scheduler-workspace-bg-rest",
+      "$scheduler-workspace-focused-cell-color": "$scheduler-workspace-cell-content-focused",
+      "$scheduler-workspace-hovered-cell-color": "$scheduler-workspace-cell-content-hovered",
+      "$scheduler-workspace-month-text-color": "$scheduler-workspace-month-content-rest"
+    },
+    "C22-ownership-tail": {
+      "$filterbuilder-plus-icon-color": "$filter-builder-plus-icon-rest",
+      "$filterbuilder-remove-icon-color": "$filter-builder-remove-icon-rest",
+      "$pivotgrid-drag-header-second-shadow-color": "$pivot-grid-drag-header-shadow-key-rest",
+      "$pivotgrid-grandtotalcolor": "$pivot-grid-grand-total-content-rest",
+      "$pivotgrid-totalcolor": "$pivot-grid-total-content-rest",
+      "$scheduler-appointment-start-color": "$scheduler-appointment-start-content-rest",
+      "$scheduler-fill-focused-appointment": "$scheduler-appointment-bg-focused",
+      "$scheduler-is-shadow-color-for-focused-state": "$scheduler-appointment-shadow-focused"
+    },
+    "D3-treeview-checkbox-split": {
+      "$treeview-checkbox-disabled-background-focused": "$tree-view-checkbox-bg-disabled",
+      "$treeview-checkbox-disabled-control-color-focused": "$tree-view-checkbox-border-disabled"
+    },
+    "C23-unblocked-tail": {
+      "$fluent-list-item-badge-container-width": "$list-item-badge-container-width",
+      "$fluent-list-next-button-padding": "$list-next-button-padding",
+      "$fluent-list-static-delete-button-padding": "$list-delete-button-static-padding",
+      "$fluent-pivotgrid-area-fields-margin-top-2": "$pivot-grid-area-fields-margin-block-start-alt",
+      "$fluent-pivotgrid-position-indicator-last-margin-left-2": "$pivot-grid-position-indicator-last-rtl-margin-inline-start",
+      "$treeview-checkbox-border-color-focused": "$tree-view-checkbox-border-focused"
+    }
+  }
+}
diff --git a/packages/devextreme-scss/tools/naming/propose.mjs b/packages/devextreme-scss/tools/naming/propose.mjs
new file mode 100644
index 000000000000..5b55036606d9
--- /dev/null
+++ b/packages/devextreme-scss/tools/naming/propose.mjs
@@ -0,0 +1,423 @@
+/*
+ * Proposes mapping entries for one folder, so a batch is reviewed as a diff instead of typed by hand.
+ *
+ *   node tools/naming/propose.mjs --folder=treeView            # report
+ *   node tools/naming/propose.mjs --folder=treeView --json     # paste-ready mapping fragment
+ *   node tools/naming/propose.mjs --all                        # how much of the rest is mechanical
+ *
+ * A proposal is only ever a starting point: it rewrites the spellings the standard has already
+ * rejected (`hover` -> `hovered`, `padding-left` -> `padding-inline-start`, …), drops the theme
+ * prefix and the legacy component spelling, moves a trailing state to the end and adds `rest` where
+ * `_colors.scss` requires it. What it CANNOT do is decide anatomy: whether `filter-icon` is a
+ * sub-element of this component or a lie about the selector is a question only reading the CSS
+ * answers, and that is exactly what the per-batch review is for.
+ *
+ * So the output is split in two: names whose proposal already satisfies the grammar (mechanical, and
+ * still to be eyeballed for meaning), and names the grammar rejects, each with the reason — those
+ * need a human and a look at the selector.
+ *
+ * Deliberately not proposed: theme identity, base-parameter mirrors (their spelling belongs to base)
+ * and anything already inside its component's namespace.
+ */
+
+import { readFileSync, readdirSync, statSync, existsSync } from 'fs';
+import { join, dirname, basename } from 'path';
+import { fileURLToPath } from 'url';
+
+const here = dirname(fileURLToPath(import.meta.url));
+const packageRoot = join(here, '..', '..');
+const themeRoot = join(packageRoot, 'scss', 'widgets', 'fluent-next');
+const baseRoot = join(packageRoot, 'scss', 'widgets', 'base');
+const registries = JSON.parse(readFileSync(join(here, 'registries.json'), 'utf8'));
+const mapping = JSON.parse(readFileSync(join(here, 'mapping.json'), 'utf8'));
+
+const walk = (dir) => readdirSync(dir).flatMap((entry) => {
+  const absolute = join(dir, entry);
+  return statSync(absolute).isDirectory() ? walk(absolute) : [absolute];
+}).filter((file) => file.endsWith('.scss'));
+
+const stripComments = (content) => content
+  .replace(/\/\/[^\n\r]*/g, '')
+  .split(/\/\*|\*\//)
+  .filter((_, index) => index % 2 === 0)
+  .join('');
+
+const withRanges = (content) => {
+  const ranges = [];
+  const opener = /\bwith\s*\(/g;
+  let match = opener.exec(content);
+  while (match !== null) {
+    let depth = 1;
+    let index = match.index + match[0].length;
+    while (index < content.length && depth > 0) {
+      if (content[index] === '(') depth += 1;
+      if (content[index] === ')') depth -= 1;
+      index += 1;
+    }
+    ranges.push([match.index, index]);
+    match = opener.exec(content);
+  }
+  return ranges;
+};
+
+/** `@mixin x(…)` / `@function x(…)` argument lists: `$a: $b` there is a parameter, not a variable. */
+const signatureRanges = (content) => {
+  const ranges = [];
+  const opener = /@(?:mixin|function)\s+[\w-]+\s*\(/g;
+  let match = opener.exec(content);
+  while (match !== null) {
+    let depth = 1;
+    let index = match.index + match[0].length;
+    while (index < content.length && depth > 0) {
+      if (content[index] === '(') depth += 1;
+      if (content[index] === ')') depth -= 1;
+      index += 1;
+    }
+    ranges.push([match.index, index]);
+    match = opener.exec(content);
+  }
+  return ranges;
+};
+
+const declaredIn = (file) => {
+  const content = stripComments(readFileSync(file, 'utf8'));
+  const ranges = [...withRanges(content), ...signatureRanges(content)];
+  const names = new Set();
+  [...content.matchAll(/(^|[\s{;])\$([a-z0-9_-]+)\s*:/gi)].forEach((match) => {
+    const position = match.index + match[1].length;
+    if (ranges.some(([from, to]) => position >= from && position < to)) return;
+    names.add(`$${match[2]}`);
+  });
+  return names;
+};
+
+// ---------------------------------------------------------------------------------------------
+// grammar (a conservative twin of tests/fluent-next-naming.test.ts — see the header)
+// ---------------------------------------------------------------------------------------------
+
+const modifiers = Object.values(registries.modifiers).flat();
+const longestFirst = (words) => [...words].sort((a, b) => b.length - a.length);
+
+const grammarViolation = (name, component, isColors) => {
+  const bare = name.slice(1);
+  if (bare !== component && !bare.startsWith(`${component}-`)) {
+    return new Error(`does not start with the component "${component}"`);
+  }
+  let rest = bare.slice(component.length).replace(/^-/, '');
+
+  const state = longestFirst(registries.states)
+    .find((candidate) => rest === candidate || rest.endsWith(`-${candidate}`));
+  if (isColors && !state) return new Error('a name in _colors.scss must end with a state');
+  if (state) rest = rest.slice(0, -state.length).replace(/-$/, '');
+
+  const slots = isColors ? registries.parts : registries.sizeSlots;
+  const slot = longestFirst(slots)
+    .find((candidate) => rest === candidate || rest.endsWith(`-${candidate}`));
+  if (!slot) {
+    // The reason travels as an Error so --anatomy can group by the unresolved fragment, not by prose.
+    const problem = new Error(`no ${isColors ? 'part' : 'size slot'} found in "${rest || '(empty)'}"`);
+    problem.slot = rest;
+    return problem;
+  }
+  rest = rest.slice(0, -slot.length).replace(/-$/, '');
+
+  const middleWords = longestFirst([...(registries.subElements[component] ?? []), ...modifiers]);
+  let middle = rest;
+  while (middle) {
+    const word = middleWords.find((candidate) => middle === candidate
+      || middle.startsWith(`${candidate}-`));
+    if (!word) {
+      const problem = new Error(`"${middle}" is neither a sub-element of ${component} nor a modifier`);
+      problem.middle = middle;
+      return problem;
+    }
+    middle = middle.slice(word.length).replace(/^-/, '');
+  }
+  return null;
+};
+
+// ---------------------------------------------------------------------------------------------
+// which part a bare `-color` is
+// ---------------------------------------------------------------------------------------------
+
+/*
+ * The standard's rule for the 491 legacy `-color` names is "the CSS property decides, not the old
+ * name" (NAMING.md, PARTS). That is mechanical as long as the variable is read by exactly one family
+ * of properties, so the reads are collected once and the answer looked up per name. A variable read
+ * by two families is a two-role variable — the dominant role wins, and that is a judgment call the
+ * review has to make, so it is reported instead of guessed.
+ */
+const PROPERTY_PARTS = [
+  [/^background(-color)?$/, 'bg'],
+  [/^fill$/, 'bg'],
+  [/^color$/, 'content'],
+  [/^caret-color$/, 'content'],
+  [/^-webkit-text-fill-color$/, 'content'],
+  [/^border(-(top|right|bottom|left|block|inline)(-(start|end))?)?-color$/, 'border'],
+  [/^outline-color$/, 'outline'],
+  [/^box-shadow$/, 'shadow'],
+  [/^stroke$/, 'border'],
+  [/^text-decoration-color$/, 'content'],
+];
+
+const partsByVariable = (() => {
+  const found = new Map();
+  walk(themeRoot).forEach((file) => {
+    const content = stripComments(readFileSync(file, 'utf8'));
+    [...content.matchAll(/(^|[\s{;])([-a-z]+)\s*:([^;{}]*)/g)].forEach(([, , property, value]) => {
+      const part = PROPERTY_PARTS.find(([pattern]) => pattern.test(property))?.[1];
+      if (!part) return;
+      [...value.matchAll(/(?<!\.)\$([a-z0-9_-]+)/g)].forEach(([, name]) => {
+        const key = `$${name}`;
+        found.set(key, (found.get(key) ?? new Set()).add(part));
+      });
+    });
+  });
+  return found;
+})();
+
+const partOf = (name) => {
+  const parts = partsByVariable.get(name);
+  return parts && parts.size === 1 ? [...parts][0] : null;
+};
+
+// ---------------------------------------------------------------------------------------------
+// proposal
+// ---------------------------------------------------------------------------------------------
+
+/** Legacy spellings of a component: `treelist` for `tree-list`, `grouppanel` for `group-panel`. */
+const squashed = (component) => component.replace(/-/g, '');
+
+const replaceSegments = (name, table) => {
+  let result = name;
+  Object.entries(table)
+    .sort(([a], [b]) => b.length - a.length)
+    .forEach(([from, to]) => {
+      // `radius` -> `border-radius` must not fire inside an already-correct `border-radius`, or the
+      // proposal comes out as `border-border-radius`.
+      const already = to.endsWith(from) && to !== from ? `${to.slice(0, -from.length)}` : null;
+      result = result.replace(new RegExp(`(^|-)${from}(-|$)`, 'g'), (whole, before, after, offset) => {
+        if (already && result.slice(0, offset + before.length).endsWith(already)) return whole;
+        return `${before}${to}${after}`;
+      });
+    });
+  return result;
+};
+
+const propose = (name, component, isColors) => {
+  let bare = name.slice(1);
+
+  // 0. squashed compounds -> their canonical hyphenated form (`treeview-item` -> `tree-view-item`)
+  bare = replaceSegments(bare, registries.rejectedSpellings ?? {});
+
+  // 0b. segments that name nothing (`root`, `state`, `common`, `renovation`) are dropped
+  (registries.droppedSegments ?? []).forEach((word) => {
+    bare = bare.replace(new RegExp(`(^|-)${word}(-|$)`, 'g'), (_, before, after) => (before && after ? '-' : ''));
+  });
+
+  // 1. theme prefix, wherever it sits: $fluent-x-y, $x-fluent-y
+  bare = bare.replace(/(^|-)fluent(-|$)/g, (_, before, after) => (before && after ? '-' : ''));
+
+  // 2. legacy component spelling at the front, so the canonical one can be put back
+  [component, squashed(component), `${squashed(component)}s`].forEach((spelling) => {
+    if (bare === spelling) bare = '';
+    else if (bare.startsWith(`${spelling}-`)) bare = bare.slice(spelling.length + 1);
+  });
+
+  /*
+   * 3. a bare `color` segment names no part; the property it is assigned to does. Qualified forms
+   * (`background-color`, `border-color`, …) are already in `rejected.parts` and are left to step 4 —
+   * touching them here would produce `bg-bg`.
+   */
+  if (isColors) {
+    /*
+     * When the reads do not settle it — because the variable is only ever handed to a base mixin,
+     * which renames it — the legacy convention decides: in these themes a bare `-color` on a widget
+     * or a sub-element IS the text colour, and the background has always been spelled `-bg`. Verified
+     * on the mixins that consume them: $calendar-color arrives as $cell-text-color and lands in
+     * `color:`, $speed-dial-action-color likewise. Qualified forms never reach this branch.
+     */
+    const part = partOf(name) ?? 'content';
+    const QUALIFIED = /(background|border|outline|text|icon|glyph|shadow|caret|fill|stroke)$/;
+    if (part) {
+      bare = bare.replace(/(^|-)colors?(-|$)/g, (whole, before, after, offset) => (
+        QUALIFIED.test(bare.slice(0, offset + before.length).replace(/-$/, ''))
+          ? whole
+          : `${before}${part}${after}`));
+    }
+  }
+
+  /*
+   * 4a. a physical word in the SLOT position is the CSS property; the same word earlier in the name is
+   * a variant, so only the tail is rewritten. Longest match first, so `border-top-left-radius` wins
+   * over `border-top`.
+   */
+  let canonicalTail = null;
+  Object.entries(registries.rejectedTrailing ?? {})
+    .sort(([a], [b]) => b.length - a.length)
+    .some(([from, to]) => {
+      if (bare !== from && !bare.endsWith(`-${from}`)) return false;
+      bare = `${bare.slice(0, bare.length - from.length)}${to}`;
+      canonicalTail = to;
+      return true;
+    });
+
+  /*
+   * 4b. rejected spellings: modifiers, parts, states and physical axes. A tail that step 4a already
+   * made canonical is held out of this pass — otherwise `radius` -> `border-radius` fires a second
+   * time inside `border-start-end-radius` and produces `border-start-end-border-radius`.
+   */
+  const tail = canonicalTail && bare.endsWith(canonicalTail)
+    ? canonicalTail
+    : null;
+  let head = tail ? bare.slice(0, bare.length - tail.length).replace(/-$/, '') : bare;
+  head = replaceSegments(head, registries.rejected.modifiers ?? {});
+  head = replaceSegments(head, registries.rejected.states);
+  head = replaceSegments(head, isColors ? registries.rejected.parts : registries.rejected.properties);
+  bare = tail ? `${head}${head ? '-' : ''}${tail}` : head;
+  // a squashed sub-element (`grouppanel`) only reads as one once it is hyphenated
+  (registries.subElements[component] ?? []).forEach((sub) => {
+    if (!sub.includes('-')) return;
+    bare = bare.replace(new RegExp(`(^|-)${squashed(sub)}(-|$)`, 'g'), (_, before, after) => `${before}${sub}${after}`);
+  });
+
+  /*
+   * 6. a trailing `-rtl` is a modifier, and modifiers precede the slot: `…-padding-rtl` is the RTL
+   * variant of a padding, not a property called `rtl`.
+   */
+  if (!isColors && bare.endsWith('-rtl')) {
+    const withoutRtl = bare.slice(0, -'-rtl'.length);
+    const slot = longestFirst(registries.sizeSlots)
+      .find((candidate) => withoutRtl === candidate || withoutRtl.endsWith(`-${candidate}`));
+    if (slot) {
+      bare = `${withoutRtl.slice(0, withoutRtl.length - slot.length)}rtl-${slot}`;
+    }
+  }
+
+  // 7. a state belongs at the end, after the slot
+  const state = longestFirst(registries.states).find((candidate) => bare === candidate
+    || bare.startsWith(`${candidate}-`) || bare.includes(`-${candidate}-`) || bare.endsWith(`-${candidate}`));
+  if (state) {
+    const without = bare
+      .replace(new RegExp(`(^|-)${state}(-|$)`, 'g'), (_, before, after) => (before && after ? '-' : ''));
+    bare = `${without}-${state}`.replace(/^-|-$/g, '');
+  } else if (isColors) {
+    bare = `${bare}-rest`.replace(/^-/, '');
+  }
+
+  return `$${component}${bare ? `-${bare}` : ''}`;
+};
+
+// ---------------------------------------------------------------------------------------------
+
+const identity = new Set(registries.themeIdentity);
+/*
+ * A name that base also declares is only untouchable when the WIRING is a star import: there the
+ * theme's top-level `$x: … !default` sets base's variable, so the spelling belongs to base. When the
+ * wiring is `with($x: $value)`, the KEY belongs to base but the theme's own variable on the right is
+ * free — and 45 colour names across pivotGrid, filterBuilder and scheduler sat unmigrated for months
+ * because this exclusion did not make that distinction.
+ */
+const baseNames = new Set(walk(baseRoot).flatMap((file) => [...declaredIn(file)]));
+
+const starredBaseNames = (folder) => {
+  const names = new Set();
+  walk(join(themeRoot, folder)).forEach((file) => {
+    const content = stripComments(readFileSync(file, 'utf8'));
+    [...content.matchAll(/@use\s+(["'])([^"']+)\1([^;{]*)/g)].forEach(([, , spec, tail]) => {
+      if (!/\bas\s+\*/.test(tail) || !spec.includes('base/')) return;
+      const target = join(dirname(file), spec);
+      [`${target}.scss`, join(dirname(target), `_${basename(target)}.scss`),
+        join(target, '_index.scss')]
+        .filter((candidate) => existsSync(candidate))
+        .forEach((candidate) => declaredIn(candidate).forEach((name) => names.add(name)));
+    });
+  });
+  return names;
+};
+const alreadyMapped = new Set(Object.values(mapping.batches)
+  .flatMap((names) => Object.keys(names).map((key) => key.split(':').pop())));
+
+const folders = [...new Set(walk(themeRoot)
+  .map((file) => file.slice(themeRoot.length + 1))
+  .filter((relative) => relative.includes('/'))
+  .map((relative) => relative.split('/')[0]))]
+  .filter((folder) => !Object.keys(registries.exemptFolders).includes(folder))
+  .filter((folder) => registries.components[folder]);
+
+const report = (folder) => {
+  const component = registries.components[folder];
+  const wiredByStarImport = starredBaseNames(folder);
+  const rows = [];
+
+  walk(join(themeRoot, folder)).forEach((file) => {
+    const isColors = file.endsWith('_colors.scss');
+    [...declaredIn(file)].forEach((name) => {
+      const bare = name.slice(1);
+      if (identity.has(name) || alreadyMapped.has(name)) return;
+      if (baseNames.has(name) && wiredByStarImport.has(name)) return;
+      // Being inside the right namespace is not the same as being grammatical: `$accordion-title-bg-hover`
+      // needs a rename too, and skipping it would leave the folder unable to enter `migrated`.
+      const inNamespace = bare === component || bare.startsWith(`${component}-`);
+      if (inNamespace && !grammarViolation(name, component, isColors)) return;
+      const to = propose(name, component, isColors);
+      if (to === name) return;
+      rows.push({
+        file: file.slice(themeRoot.length + 1), name, to, why: grammarViolation(to, component, isColors),
+      });
+    });
+  });
+
+  return { component, rows };
+};
+
+const target = process.argv.find((argument) => argument.startsWith('--folder='))
+  ?.slice('--folder='.length);
+
+if (process.argv.includes('--all')) {
+  let mechanical = 0;
+  let manual = 0;
+  folders.forEach((folder) => {
+    const { rows } = report(folder);
+    if (!rows.length) return;
+    const ok = rows.filter(({ why }) => !why).length;
+    mechanical += ok;
+    manual += rows.length - ok;
+    process.stdout.write(`  ${folder.padEnd(18)} ${String(rows.length).padStart(4)}  механически ${String(ok).padStart(4)}  вручную ${rows.length - ok}\n`);
+  });
+  process.stdout.write(`\nвсего ${mechanical + manual}: механически ${mechanical}, вручную ${manual}\n`);
+} else if (target) {
+  const { component, rows } = report(target);
+  if (process.argv.includes('--json')) {
+    const entries = rows.filter(({ why }) => !why)
+      .map(({ name, to }) => `    ${JSON.stringify(name)}: ${JSON.stringify(to)}`);
+    process.stdout.write(`{\n${entries.join(',\n')}\n}\n`);
+  } else {
+    process.stdout.write(`${target} -> ${component}, ${rows.length} имя(ён)\n\n`);
+    rows.filter(({ why }) => !why).forEach(({ name, to }) => process.stdout.write(`  OK      ${name}\n          -> ${to}\n`));
+    rows.filter(({ why }) => why).forEach(({ file, name, to, why }) => process.stdout.write(`  ВРУЧНУЮ ${name}  (${file})\n          -> ${to}: ${why.message ?? why}\n`));
+  }
+} else if (process.argv.includes('--anatomy')) {
+  /*
+   * What actually blocks a folder is almost never spelling — it is that nobody has written down its
+   * DOM anatomy yet. This prints the unresolved middles, most frequent first, so one review pass over
+   * a folder produces its sub-element list, after which the whole folder becomes mechanical.
+   */
+  folders.forEach((folder) => {
+    const { rows } = report(folder);
+    const middles = new Map();
+    rows.forEach(({ why, name }) => {
+      const middle = why?.middle;
+      if (!middle) return;
+      middles.set(middle, [...(middles.get(middle) ?? []), name]);
+    });
+    const slotless = rows.filter(({ why }) => why?.slot !== undefined).length;
+    if (!middles.size && !slotless) return;
+    process.stdout.write(`${folder}: ${middles.size} неразобранных середин, ${slotless} без слота\n`);
+    [...middles.entries()]
+      .sort((a, b) => b[1].length - a[1].length)
+      .forEach(([middle, names]) => process.stdout.write(`   ${String(names.length).padStart(3)}x ${middle}\n`));
+  });
+} else {
+  process.stdout.write('usage: --folder=<name> [--json] | --all | --anatomy\n');
+}
diff --git a/packages/devextreme-scss/tools/naming/prune.mjs b/packages/devextreme-scss/tools/naming/prune.mjs
new file mode 100644
index 000000000000..18e8be4d1399
--- /dev/null
+++ b/packages/devextreme-scss/tools/naming/prune.mjs
@@ -0,0 +1,179 @@
+/*
+ * Wave B of the naming standard (scss/widgets/fluent-next/NAMING.md, rule O6): removes dead imports
+ * and dead variables from the theme.
+ *
+ *   node tools/naming/prune.mjs              # report
+ *   node tools/naming/prune.mjs --apply
+ *
+ * Three classes, all provably output-neutral:
+ *
+ *   1. a namespaced import of a VARIABLE module (`colors`/`sizes`/`variables`) whose alias is never
+ *      referenced. Variable modules emit no CSS, so dropping the `@use` cannot change the output.
+ *   2. a `../<widget>/mixins` import pulled in with `as *` from which no mixin is ever `@include`d.
+ *   3. a variable declared in the theme and referenced nowhere in the theme or in base — including
+ *      the ones declared three times through `@if $size`, which the count-based check in
+ *      unused-elements.test.ts cannot see.
+ *
+ * Deliberately NOT touched: imports without an alias and without `as *` (`@use "../dropDownMenu";`).
+ * Those pull a module in for its side effects — its CSS rules — and removing one deletes styles.
+ */
+
+import { readFileSync, writeFileSync, readdirSync, statSync, existsSync } from 'fs';
+import { join, dirname, basename } from 'path';
+import { fileURLToPath } from 'url';
+
+const here = dirname(fileURLToPath(import.meta.url));
+const packageRoot = join(here, '..', '..');
+const themeRoot = join(packageRoot, 'scss', 'widgets', 'fluent-next');
+const baseRoot = join(packageRoot, 'scss', 'widgets', 'base');
+const registries = JSON.parse(readFileSync(join(here, 'registries.json'), 'utf8'));
+
+const VARIABLE_MODULES = ['colors', 'sizes', 'variables'];
+const exemptFolders = Object.keys(registries.exemptFolders);
+const apply = process.argv.includes('--apply');
+
+const walk = (dir) => readdirSync(dir).flatMap((entry) => {
+  const absolute = join(dir, entry);
+  return statSync(absolute).isDirectory() ? walk(absolute) : [absolute];
+}).filter((file) => file.endsWith('.scss'));
+
+const stripComments = (content) => content
+  .replace(/\/\/[^\n\r]*/g, '')
+  .split(/\/\*|\*\//)
+  .filter((_, index) => index % 2 === 0)
+  .join('');
+
+const themeFiles = walk(themeRoot)
+  .filter((file) => !exemptFolders.includes(file.slice(themeRoot.length + 1).split('/')[0]));
+
+// ---------------------------------------------------------------------------------------------
+// 1 + 2: dead imports
+// ---------------------------------------------------------------------------------------------
+
+const mixinNames = (file) => new Set(
+  [...readFileSync(file, 'utf8').matchAll(/@mixin\s+([a-zA-Z][\w-]*)/g)].map((match) => match[1]),
+);
+
+const deadImports = [];
+
+themeFiles.forEach((file) => {
+  const content = stripComments(readFileSync(file, 'utf8'));
+
+  [...content.matchAll(/@use\s+(["'])([^"']+)\1([^;{]*);/g)].forEach((use) => {
+    const [statement, , spec, tail] = use;
+    const star = /\bas\s+\*/.test(tail);
+    const alias = /\bas\s+([a-zA-Z][\w-]*)/.exec(tail)?.[1] ?? null;
+    const moduleName = basename(spec);
+    const rest = content.slice(0, use.index) + content.slice(use.index + statement.length);
+
+    // Removal is line-based, so a statement spanning several lines would leave a dangling tail.
+    // None of the variable-module imports are configured with `with()` today; if that ever changes,
+    // this refuses to touch it instead of corrupting the file.
+    if (statement.includes('\n')) {
+      process.stdout.write(`NOTE  multi-line @use left alone: ${file.slice(themeRoot.length + 1)} -> ${spec}\n`);
+      return;
+    }
+
+    if (alias && VARIABLE_MODULES.includes(moduleName)) {
+      if (!new RegExp(`\\b${alias}\\.`).test(rest)) {
+        deadImports.push({ file, statement, spec, reason: `alias ${alias} never referenced` });
+      }
+      return;
+    }
+
+    if (star && moduleName === 'mixins' && spec.startsWith('..')) {
+      const modulePath = join(dirname(file), dirname(spec), '_mixins.scss');
+      if (!existsSync(modulePath) || modulePath.startsWith(`${baseRoot}/`)) return;
+      const provided = mixinNames(modulePath);
+      const used = [...provided].some((name) => new RegExp(`@include\\s+${name}\\b`).test(rest));
+      if (!used) {
+        deadImports.push({ file, statement, spec, reason: 'no mixin from this module is included' });
+      }
+    }
+  });
+});
+
+// ---------------------------------------------------------------------------------------------
+// 3: dead variables
+// ---------------------------------------------------------------------------------------------
+
+const declarationsOf = (content) => {
+  const names = new Set();
+  const stack = [];
+  let index = 0;
+  while (index < content.length) {
+    const char = content[index];
+    if (char === '{') {
+      stack.push(/@(if|else|each|for|while)\b[^{]*$/.test(content.slice(Math.max(0, index - 200), index)));
+      index += 1;
+    } else if (char === '}') {
+      stack.pop();
+      index += 1;
+    } else if (char === '$') {
+      const name = /^\$[a-z0-9_-]+/i.exec(content.slice(index))?.[0];
+      if (!name) { index += 1; continue; }
+      const namespaced = index > 0 && content[index - 1] === '.';
+      if (/^\s*:/.test(content.slice(index + name.length)) && !namespaced && stack.every(Boolean)) {
+        names.add(name);
+      }
+      index += name.length;
+    } else {
+      index += 1;
+    }
+  }
+  return names;
+};
+
+const referencedNames = new Set();
+[...themeFiles, ...walk(baseRoot)].forEach((file) => {
+  const content = stripComments(readFileSync(file, 'utf8'));
+  [...content.matchAll(/(?<!ds\.)\$[a-z0-9_-]+/gi)].forEach((match) => {
+    const isAssignment = /^\s*:/.test(content.slice(match.index + match[0].length));
+    if (!isAssignment) referencedNames.add(match[0]);
+  });
+});
+
+const deadVariables = [];
+themeFiles.forEach((file) => {
+  declarationsOf(stripComments(readFileSync(file, 'utf8'))).forEach((name) => {
+    if (!referencedNames.has(name)) deadVariables.push({ file, name });
+  });
+});
+
+// ---------------------------------------------------------------------------------------------
+// report / apply
+// ---------------------------------------------------------------------------------------------
+
+const byFile = new Map();
+deadImports.forEach((entry) => {
+  byFile.set(entry.file, { ...(byFile.get(entry.file) ?? { imports: [], variables: [] }) });
+  byFile.get(entry.file).imports.push(entry);
+});
+deadVariables.forEach((entry) => {
+  byFile.set(entry.file, byFile.get(entry.file) ?? { imports: [], variables: [] });
+  byFile.get(entry.file).variables.push(entry.name);
+});
+
+process.stdout.write(`dead imports: ${deadImports.length}, dead variables: ${new Set(deadVariables.map((entry) => entry.name)).size}\n\n`);
+
+[...byFile.entries()].sort().forEach(([file, { imports, variables }]) => {
+  const relative = file.slice(themeRoot.length + 1);
+  process.stdout.write(`${apply ? 'WRITE' : 'PLAN '} ${relative}\n`);
+  imports.forEach(({ spec, reason }) => process.stdout.write(`      import  ${spec}  (${reason})\n`));
+  [...new Set(variables)].forEach((name) => process.stdout.write(`      var     ${name}\n`));
+
+  if (!apply) return;
+
+  const lines = readFileSync(file, 'utf8').split('\n');
+  const kept = lines.filter((line) => {
+    const trimmed = line.trim();
+    const isDeadImport = imports.some(({ spec }) => trimmed.startsWith('@use')
+      && trimmed.includes(`"${spec}"`));
+    const isDeadVariable = variables.some((name) => new RegExp(`^\\$?${name.slice(1)}\\s*:`)
+      .test(trimmed.replace(/^\$/, '')));
+    return !isDeadImport && !isDeadVariable;
+  });
+  writeFileSync(file, kept.join('\n'));
+});
+
+if (!apply) process.stdout.write('\nrun again with --apply to write\n');
diff --git a/packages/devextreme-scss/tools/naming/registries.json b/packages/devextreme-scss/tools/naming/registries.json
new file mode 100644
index 000000000000..59c50d424518
--- /dev/null
+++ b/packages/devextreme-scss/tools/naming/registries.json
@@ -0,0 +1,1773 @@
+{
+  "$comment": "GENERATED by tools/naming/derive-registries.mjs — do not edit by hand. Judgment calls live in OVERRIDES in that script; vocabularies are derived from scss/_design-system (regenerate with `pnpm nx build:tokens devextreme-scss` first).",
+  "parseRule": "$<component>(-<sub-element>)*(-<modifier>)*-<slot>(-<state>) — parsed right-to-left with longest match. Overlaps between vocabularies competing for DIFFERENT positions are intentional and resolved positionally; see assertParseable() in the generator for the two overlaps that are forbidden.",
+  "derivedFrom": {
+    "componentTokens": "scss/_design-system/fluent/components/theme.scss",
+    "componentTokenCount": 601,
+    "themeFolders": 86
+  },
+  "components": {
+    "accordion": "accordion",
+    "actionSheet": "action-sheet",
+    "autocomplete": "autocomplete",
+    "badge": "badge",
+    "box": "box",
+    "button": "button",
+    "buttonGroup": "button-group",
+    "calendar": "calendar",
+    "card": "card",
+    "cardView": "card-view",
+    "chat": "chat",
+    "checkBox": "check-box",
+    "colorBox": "color-box",
+    "colorView": "color-view",
+    "contextMenu": "context-menu",
+    "dataGrid": "data-grid",
+    "dateBox": "date-box",
+    "dateRangeBox": "date-range-box",
+    "dateView": "date-view",
+    "diagram": "diagram",
+    "drawer": "drawer",
+    "dropDownBox": "drop-down-box",
+    "dropDownButton": "drop-down-button",
+    "dropDownEditor": "drop-down-editor",
+    "dropDownList": "drop-down-list",
+    "dropDownMenu": "drop-down-menu",
+    "fieldset": "fieldset",
+    "fileManager": "file-manager",
+    "fileUploader": "file-uploader",
+    "filterBuilder": "filter-builder",
+    "form": "form",
+    "gallery": "gallery",
+    "gantt": "gantt",
+    "gridBase": "grid",
+    "htmlEditor": "html-editor",
+    "icons": "icon",
+    "informer": "informer",
+    "list": "list",
+    "loadIndicator": "load-indicator",
+    "loadPanel": "load-panel",
+    "lookup": "lookup",
+    "map": "map",
+    "menu": "menu",
+    "menuBase": "menu",
+    "multiView": "multi-view",
+    "numberBox": "number-box",
+    "overlay": "overlay",
+    "pagination": "pagination",
+    "pivotGrid": "pivot-grid",
+    "popover": "popover",
+    "popup": "popup",
+    "progressBar": "progress-bar",
+    "radioButton": "radio-button",
+    "radioGroup": "radio-group",
+    "rangeSlider": "range-slider",
+    "recurrenceEditor": "recurrence-editor",
+    "responsiveBox": "responsive-box",
+    "scheduler": "scheduler",
+    "scrollView": "scroll-view",
+    "scrollable": "scrollable",
+    "selectBox": "select-box",
+    "slider": "slider",
+    "sortable": "sortable",
+    "speechToText": "speech-to-text",
+    "speedDialAction": "speed-dial-action",
+    "splitter": "splitter",
+    "splitterBar": "splitter-bar",
+    "stepper": "stepper",
+    "switch": "switch",
+    "tabPanel": "tab-panel",
+    "tabs": "tabs",
+    "tagBox": "tag-box",
+    "textArea": "text-area",
+    "textBox": "text-box",
+    "textEditor": "text-editor",
+    "tileView": "tile-view",
+    "timeView": "time-view",
+    "toast": "toast",
+    "toolbar": "toolbar",
+    "tooltip": "tooltip",
+    "treeList": "tree-list",
+    "treeView": "tree-view",
+    "validation": "validation",
+    "widget": "widget"
+  },
+  "declarationHome": {
+    "accordion": "accordion",
+    "action-sheet": "actionSheet",
+    "autocomplete": "autocomplete",
+    "badge": "badge",
+    "box": "box",
+    "button": "button",
+    "button-group": "buttonGroup",
+    "calendar": "calendar",
+    "card": "card",
+    "card-view": "cardView",
+    "chat": "chat",
+    "check-box": "checkBox",
+    "color-box": "colorBox",
+    "color-view": "colorView",
+    "context-menu": "contextMenu",
+    "data-grid": "dataGrid",
+    "date-box": "dateBox",
+    "date-range-box": "dateRangeBox",
+    "date-view": "dateView",
+    "diagram": "diagram",
+    "drawer": "drawer",
+    "drop-down-box": "dropDownBox",
+    "drop-down-button": "dropDownButton",
+    "drop-down-editor": "dropDownEditor",
+    "drop-down-list": "dropDownList",
+    "drop-down-menu": "dropDownMenu",
+    "fieldset": "fieldset",
+    "file-manager": "fileManager",
+    "file-uploader": "fileUploader",
+    "filter-builder": "filterBuilder",
+    "form": "form",
+    "gallery": "gallery",
+    "gantt": "gantt",
+    "grid": "gridBase",
+    "html-editor": "htmlEditor",
+    "icon": "icons",
+    "informer": "informer",
+    "list": "list",
+    "load-indicator": "loadIndicator",
+    "load-panel": "loadPanel",
+    "lookup": "lookup",
+    "map": "map",
+    "menu": "menuBase",
+    "multi-view": "multiView",
+    "number-box": "numberBox",
+    "overlay": "overlay",
+    "pagination": "pagination",
+    "pivot-grid": "pivotGrid",
+    "popover": "popover",
+    "popup": "popup",
+    "progress-bar": "progressBar",
+    "radio-button": "radioButton",
+    "radio-group": "radioGroup",
+    "range-slider": "rangeSlider",
+    "recurrence-editor": "recurrenceEditor",
+    "responsive-box": "responsiveBox",
+    "scheduler": "scheduler",
+    "scroll-view": "scrollView",
+    "scrollable": "scrollable",
+    "select-box": "selectBox",
+    "slider": "slider",
+    "sortable": "sortable",
+    "speech-to-text": "speechToText",
+    "speed-dial-action": "speedDialAction",
+    "splitter": "splitter",
+    "splitter-bar": "splitterBar",
+    "stepper": "stepper",
+    "switch": "switch",
+    "tab-panel": "tabPanel",
+    "tabs": "tabs",
+    "tag-box": "tagBox",
+    "text-area": "textArea",
+    "text-box": "textBox",
+    "text-editor": "textEditor",
+    "tile-view": "tileView",
+    "time-view": "timeView",
+    "toast": "toast",
+    "toolbar": "toolbar",
+    "tooltip": "tooltip",
+    "tree-list": "treeList",
+    "tree-view": "treeView",
+    "validation": "validation",
+    "widget": "widget"
+  },
+  "systemFolders": [
+    "common",
+    "typography"
+  ],
+  "systemConcerns": [
+    "backdrop",
+    "focus-rect",
+    "global",
+    "invalid-badge",
+    "motion",
+    "palette",
+    "separator",
+    "shadow",
+    "state",
+    "surface",
+    "typography",
+    "valid-badge"
+  ],
+  "chassis": {
+    "gridBase": {
+      "component": "grid",
+      "dependents": [
+        "dataGrid",
+        "treeList",
+        "pivotGrid",
+        "cardView"
+      ]
+    },
+    "menu": {
+      "component": "menu",
+      "dependents": [
+        "menuBase",
+        "contextMenu",
+        "dropDownMenu"
+      ]
+    },
+    "button": {
+      "component": "button",
+      "dependents": [
+        "buttonGroup",
+        "chat",
+        "contextMenu",
+        "gridBase",
+        "htmlEditor",
+        "list",
+        "menu",
+        "menuBase",
+        "pivotGrid",
+        "scheduler",
+        "speedDialAction",
+        "stepper",
+        "toolbar"
+      ]
+    },
+    "textEditor": {
+      "component": "text-editor",
+      "dependents": [
+        "textBox",
+        "textArea",
+        "numberBox",
+        "dateBox",
+        "dateRangeBox",
+        "selectBox",
+        "autocomplete",
+        "lookup",
+        "tagBox",
+        "colorBox",
+        "dropDownBox",
+        "dropDownEditor",
+        "dropDownList",
+        "gridBase"
+      ]
+    },
+    "dropDownEditor": {
+      "component": "drop-down-editor",
+      "dependents": [
+        "selectBox",
+        "lookup",
+        "dateBox",
+        "colorBox",
+        "dropDownBox",
+        "dropDownList",
+        "tagBox",
+        "autocomplete",
+        "gridBase"
+      ]
+    }
+  },
+  "themeIdentity": [
+    "$color",
+    "$mode",
+    "$size",
+    "$accent",
+    "$fluent-color-accent-modificator",
+    "$fluent-color-theme-modificator",
+    "$fluent-size-postfix"
+  ],
+  "exemptFolders": {
+    "cardView": "own cross-theme BEM system on null !default base variables; renaming it would require touching generic/material/fluent, which breaks the byte-identity constraint"
+  },
+  "parts": [
+    "backdrop",
+    "bg",
+    "border",
+    "caption",
+    "chevron",
+    "content",
+    "end-icon",
+    "grip",
+    "icon",
+    "indicator",
+    "line",
+    "loader",
+    "opacity",
+    "outline",
+    "placeholder",
+    "selector",
+    "separator",
+    "shadow",
+    "shadow-ambient",
+    "shadow-key",
+    "shortcut",
+    "start-icon",
+    "subtitle",
+    "text",
+    "thumb",
+    "title",
+    "track",
+    "trigger"
+  ],
+  "states": [
+    "rest",
+    "hovered",
+    "active",
+    "focused",
+    "selected",
+    "selected-hovered",
+    "selected-active",
+    "selected-focused",
+    "disabled",
+    "read-only"
+  ],
+  "modifiers": {
+    "value": [
+      "checked",
+      "unchecked",
+      "indeterminate",
+      "invalid",
+      "opened",
+      "expanded",
+      "collapsed",
+      "empty",
+      "current",
+      "allday",
+      "recurrent",
+      "rtl",
+      "pending",
+      "modified",
+      "removed",
+      "alternation",
+      "with-label",
+      "with-icon",
+      "with-title",
+      "on",
+      "off",
+      "horizontal",
+      "vertical",
+      "phone",
+      "compact",
+      "small",
+      "dragging",
+      "inverted",
+      "first-month",
+      "other-month",
+      "contoured",
+      "faded",
+      "legacy",
+      "other",
+      "base",
+      "accent",
+      "with-border",
+      "border-visible",
+      "delete",
+      "menu",
+      "secondary",
+      "sorted",
+      "two",
+      "three",
+      "first-child",
+      "first",
+      "last",
+      "center",
+      "without-close-button",
+      "initial",
+      "alignment-start",
+      "alignment-end",
+      "show-file-list",
+      "position-end",
+      "position-start",
+      "location-left",
+      "location-right",
+      "10min",
+      "15min",
+      "20min",
+      "25min",
+      "adaptive",
+      "transparent",
+      "touch-friendly",
+      "adaptive",
+      "with-clear"
+    ],
+    "intent": [
+      "normal",
+      "default",
+      "danger",
+      "error",
+      "success",
+      "warning",
+      "info"
+    ],
+    "appearance": [
+      "contained",
+      "outlined",
+      "text",
+      "filled",
+      "underlined",
+      "floating",
+      "static",
+      "hidden",
+      "with-icons",
+      "outside",
+      "primary",
+      "secondary",
+      "thin",
+      "top",
+      "bottom",
+      "left",
+      "right"
+    ]
+  },
+  "sizeSlots": [
+    "size",
+    "gap",
+    "offset",
+    "spacing",
+    "length",
+    "thickness",
+    "min-size",
+    "grid-template-columns",
+    "padding",
+    "padding-inline",
+    "padding-block",
+    "padding-inline-start",
+    "padding-inline-end",
+    "padding-block-start",
+    "padding-block-end",
+    "margin",
+    "margin-inline",
+    "margin-block",
+    "margin-inline-start",
+    "margin-inline-end",
+    "margin-block-start",
+    "margin-block-end",
+    "width",
+    "min-width",
+    "max-width",
+    "height",
+    "min-height",
+    "max-height",
+    "border",
+    "border-width",
+    "border-radius",
+    "border-style",
+    "border-block-start",
+    "border-block-end",
+    "border-inline-start",
+    "border-inline-end",
+    "border-start-start-radius",
+    "border-start-end-radius",
+    "border-end-start-radius",
+    "border-end-end-radius",
+    "border-block-start-width",
+    "border-block-end-width",
+    "inset-block-start",
+    "inset-block-end",
+    "inset-inline-start",
+    "inset-inline-end",
+    "inset-inline",
+    "inset-block",
+    "box-shadow-blur",
+    "border-inline-start-width",
+    "border-inline-end-width",
+    "font-size",
+    "font-weight",
+    "font-family",
+    "line-height",
+    "letter-spacing",
+    "text-transform",
+    "text-decoration",
+    "opacity",
+    "box-shadow",
+    "outline",
+    "outline-offset",
+    "outline-width",
+    "column-gap",
+    "row-gap",
+    "z-index",
+    "transition",
+    "transform",
+    "inset"
+  ],
+  "rejected": {
+    "parts": {
+      "background": "bg",
+      "background-color": "bg",
+      "bgcolor": "bg",
+      "fill": "bg",
+      "fill-color": "bg",
+      "border-color": "border",
+      "bordercolor": "border",
+      "text-color": "content",
+      "foreground": "content",
+      "fg": "content",
+      "icon-color": "icon",
+      "glyph-color": "icon",
+      "shadow-color": "shadow",
+      "color1": "shadow-ambient",
+      "color2": "shadow-key",
+      "first-shadow-color": "shadow-ambient",
+      "second-shadow-color": "shadow-key",
+      "shader-bg": "backdrop",
+      "scrim": "backdrop",
+      "divider-color": "separator",
+      "handle-bg": "trigger",
+      "left-icon": "start-icon",
+      "right-icon": "end-icon"
+    },
+    "modifiers": {
+      "mode-contained": "contained",
+      "mode-outlined": "outlined",
+      "mode-text": "text"
+    },
+    "states": {
+      "hover": "hovered",
+      "focus": "focused",
+      "pressed": "active",
+      "activated": "active",
+      "readonly": "read-only",
+      "idle": "rest",
+      "selected-hover": "selected-hovered"
+    },
+    "properties": {
+      "horizontal-padding": "padding-inline",
+      "side-padding": "padding-inline",
+      "padding-horizontal": "padding-inline",
+      "vertical-padding": "padding-block",
+      "padding-vertical": "padding-block",
+      "padding-start": "padding-inline-start",
+      "padding-end": "padding-inline-end",
+      "padding-left": "padding-inline-start",
+      "padding-right": "padding-inline-end",
+      "padding-top": "padding-block-start",
+      "padding-bottom": "padding-block-end",
+      "horizontal-margin": "margin-inline",
+      "vertical-margin": "margin-block",
+      "margin-left": "margin-inline-start",
+      "margin-right": "margin-inline-end",
+      "margin-top": "margin-block-start",
+      "margin-bottom": "margin-block-end",
+      "paddings": "padding",
+      "margins": "margin",
+      "radius": "border-radius",
+      "rounding": "border-radius",
+      "border-size": "border-width",
+      "min-heigth": "min-height",
+      "text-size": "font-size",
+      "text-weight": "font-weight",
+      "shadow": "box-shadow",
+      "dimension": "size"
+    }
+  },
+  "embeds": {
+    "toolbar": [
+      "list"
+    ],
+    "scheduler": [
+      "list",
+      "toolbar",
+      "tooltip",
+      "radio-group"
+    ],
+    "gridBase": [
+      "popup",
+      "menu",
+      "validation"
+    ],
+    "html-editor": [
+      "toolbar",
+      "popup",
+      "file-uploader",
+      "text-editor"
+    ],
+    "htmlEditor": [
+      "toolbar",
+      "popup",
+      "file-uploader",
+      "text-editor"
+    ],
+    "chat": [
+      "popup",
+      "text-editor"
+    ],
+    "fieldset": [
+      "check-box",
+      "switch",
+      "slider",
+      "form"
+    ],
+    "list": [
+      "check-box",
+      "radio-button",
+      "text-editor"
+    ],
+    "colorBox": [
+      "color-view"
+    ],
+    "pivotGrid": [
+      "tree-view"
+    ],
+    "pagination": [
+      "grid"
+    ],
+    "gantt": [
+      "grid",
+      "form"
+    ],
+    "rangeSlider": [
+      "slider"
+    ],
+    "scrollView": [
+      "scrollable"
+    ],
+    "validation": [
+      "text-editor"
+    ],
+    "filterBuilder": [
+      "text-editor"
+    ],
+    "fileManager": [
+      "toolbar"
+    ],
+    "textEditor": [
+      "button"
+    ]
+  },
+  "rejectedTrailing": {
+    "margin-top": "margin-block-start",
+    "margin-bottom": "margin-block-end",
+    "margin-left": "margin-inline-start",
+    "margin-right": "margin-inline-end",
+    "padding-top": "padding-block-start",
+    "padding-bottom": "padding-block-end",
+    "padding-left": "padding-inline-start",
+    "padding-right": "padding-inline-end",
+    "top": "inset-block-start",
+    "bottom": "inset-block-end",
+    "left": "inset-inline-start",
+    "right": "inset-inline-end",
+    "border-top": "border-block-start",
+    "border-bottom": "border-block-end",
+    "border-left": "border-inline-start",
+    "border-right": "border-inline-end",
+    "border-top-width": "border-block-start-width",
+    "border-bottom-width": "border-block-end-width",
+    "border-left-width": "border-inline-start-width",
+    "border-right-width": "border-inline-end-width",
+    "border-top-left-radius": "border-start-start-radius",
+    "border-top-right-radius": "border-start-end-radius",
+    "border-bottom-left-radius": "border-end-start-radius",
+    "border-bottom-right-radius": "border-end-end-radius"
+  },
+  "rejectedSpellings": {
+    "treeview": "tree-view",
+    "contextmenu": "context-menu",
+    "fileuploader": "file-uploader",
+    "filemanager": "file-manager",
+    "numberbox": "number-box",
+    "textbox": "text-box",
+    "datebox": "date-box",
+    "checkbox": "checkbox",
+    "viewmode": "view-mode",
+    "messagelist": "message-list",
+    "messagebox": "message-box",
+    "messagegroup": "message-group",
+    "typingindicator": "typing-indicator",
+    "filename": "file-name",
+    "falename": "file-name",
+    "boxshadow": "box-shadow",
+    "dropzone": "drop-zone",
+    "pagesizes": "page-sizes",
+    "pageindex": "page-index",
+    "grouppanel": "group-panel",
+    "alldaypanel": "all-day-panel",
+    "colorview": "color-view",
+    "colorbox": "color-box",
+    "radiogroup": "radio-group",
+    "radiobutton": "radio-button",
+    "tabpanel": "tab-panel",
+    "loadindicator": "load-indicator",
+    "scrollview": "scroll-view",
+    "searchbox": "search-box",
+    "holdmenu": "hold-menu",
+    "menucontent": "menu-content",
+    "aidialog": "ai-dialog",
+    "progressbar": "progress-bar",
+    "progressbox": "progress-box",
+    "totalcolor": "total-color",
+    "grandtotalcolor": "grand-total-color",
+    "pivotgridfieldchooser": "field-chooser",
+    "htmleditor": "html-editor",
+    "speeddialaction": "speed-dial-action",
+    "buttongroup": "button-group",
+    "dropdownbutton": "drop-down-button",
+    "dropdownmenu": "drop-down-menu",
+    "tooltipbutton": "tooltip-button"
+  },
+  "droppedSegments": [
+    "root",
+    "state",
+    "common",
+    "renovation"
+  ],
+  "subElements": {
+    "toast": [
+      "content",
+      "icon",
+      "item",
+      "stack"
+    ],
+    "button": [
+      "icon",
+      "text",
+      "content"
+    ],
+    "text-box": [
+      "search",
+      "search-bar",
+      "icon"
+    ],
+    "accordion": [
+      "title",
+      "body",
+      "item",
+      "icon"
+    ],
+    "action-sheet": [
+      "item"
+    ],
+    "box": [
+      "item",
+      "content"
+    ],
+    "button-group": [
+      "item"
+    ],
+    "load-panel": [
+      "content"
+    ],
+    "tile-view": [
+      "tile",
+      "wrapper"
+    ],
+    "validation": [
+      "message",
+      "summary",
+      "summary-item",
+      "overlay"
+    ],
+    "tooltip": [
+      "overlay",
+      "content",
+      "popup",
+      "arrow"
+    ],
+    "popover": [
+      "popup",
+      "title"
+    ],
+    "splitter": [
+      "resize-handle",
+      "icon"
+    ],
+    "splitter-bar": [
+      "icon"
+    ],
+    "sortable": [
+      "clone",
+      "source",
+      "placeholder",
+      "placeholder-inside"
+    ],
+    "tab-panel": [
+      "tabs"
+    ],
+    "icon": [
+      "pulldown"
+    ],
+    "radio-button": [
+      "icon",
+      "dot",
+      "value-container"
+    ],
+    "scrollable": [
+      "scroll",
+      "scrollbar"
+    ],
+    "drop-down-button": [
+      "action",
+      "toggle",
+      "spindown-icon",
+      "icon",
+      "item"
+    ],
+    "check-box": [
+      "icon",
+      "mark",
+      "arrow",
+      "arrow-icon",
+      "container"
+    ],
+    "switch": [
+      "handle",
+      "container",
+      "inner"
+    ],
+    "context-menu": [
+      "item",
+      "items-container",
+      "menu-items-container",
+      "separator",
+      "content",
+      "text"
+    ],
+    "drop-down-menu": [
+      "section",
+      "list",
+      "popup",
+      "content"
+    ],
+    "date-view": [
+      "roller",
+      "item",
+      "year",
+      "month",
+      "hours-colon"
+    ],
+    "time-view": [
+      "clock",
+      "digits",
+      "field",
+      "number-box",
+      "input",
+      "time-separator",
+      "spin",
+      "format12"
+    ],
+    "fieldset": [
+      "field",
+      "label",
+      "value",
+      "header",
+      "attention-icon",
+      "radio-group"
+    ],
+    "radio-group": [
+      "radio-button",
+      "collection",
+      "value-container"
+    ],
+    "progress-bar": [
+      "status",
+      "range",
+      "container",
+      "label"
+    ],
+    "menu": [
+      "item",
+      "icon",
+      "text",
+      "separator",
+      "popup",
+      "tree-view",
+      "node",
+      "content",
+      "link"
+    ],
+    "slider": [
+      "bar",
+      "handle",
+      "inner",
+      "track",
+      "tooltip",
+      "label",
+      "wrapper"
+    ],
+    "gallery": [
+      "indicator",
+      "indicator-item",
+      "nav-button",
+      "nav-arrow",
+      "nav-icon",
+      "item",
+      "button"
+    ],
+    "list": [
+      "item",
+      "group",
+      "group-header",
+      "header-indicator",
+      "hold-menu",
+      "ghost",
+      "menu-button",
+      "next-button",
+      "delete-button",
+      "select-all",
+      "select-all-separator",
+      "search-box",
+      "message",
+      "badge-container",
+      "slide-menu",
+      "slide-menu-button",
+      "context-menu",
+      "context-menu-content",
+      "items",
+      "toggle-delete",
+      "response-wait",
+      "separator"
+    ],
+    "toolbar": [
+      "item",
+      "label",
+      "separator",
+      "section",
+      "menu",
+      "group",
+      "button",
+      "text",
+      "text-editor"
+    ],
+    "tabs": [
+      "tab",
+      "item",
+      "icon",
+      "nav-button",
+      "content",
+      "badge"
+    ],
+    "tree-view": [
+      "item",
+      "item-element",
+      "node",
+      "checkbox",
+      "checkbox-container",
+      "container",
+      "toggle-item",
+      "select-all-item",
+      "search-box",
+      "search-editor",
+      "load-indicator",
+      "spin",
+      "border",
+      "control"
+    ],
+    "popup": [
+      "title",
+      "content",
+      "toolbar",
+      "toolbar-item",
+      "toolbar-label",
+      "dialog",
+      "message",
+      "button"
+    ],
+    "pagination": [
+      "page",
+      "page-index",
+      "pages-count",
+      "page-sizes",
+      "separator",
+      "nav-button",
+      "navigate-button",
+      "nav",
+      "icon"
+    ],
+    "scroll-view": [
+      "pocket",
+      "pull-down",
+      "scroll-bottom",
+      "indicator",
+      "image",
+      "text",
+      "icon",
+      "load-indicator"
+    ],
+    "speed-dial-action": [
+      "main",
+      "button",
+      "label",
+      "fa-button",
+      "fa-button-label"
+    ],
+    "calendar": [
+      "cell",
+      "header",
+      "week-day-header",
+      "week-number",
+      "week-number-cell",
+      "navigator",
+      "footer-button",
+      "view",
+      "element"
+    ],
+    "chat": [
+      "message-list",
+      "message-box",
+      "message",
+      "day-header",
+      "empty-view",
+      "avatar",
+      "bubble",
+      "file",
+      "file-name",
+      "file-container",
+      "files-container",
+      "suggestions",
+      "editing-preview",
+      "caption",
+      "delete-button",
+      "cancel-button",
+      "context-menu",
+      "icon",
+      "box",
+      "container",
+      "alert-list",
+      "prompt",
+      "textarea",
+      "toolbar",
+      "information",
+      "author-name",
+      "timestamp",
+      "typing-indicator",
+      "circle",
+      "bubble",
+      "group"
+    ],
+    "color-view": [
+      "palette",
+      "palette-cell",
+      "hue-scale",
+      "hue-scale-cell",
+      "alpha",
+      "controls",
+      "container",
+      "label",
+      "handle",
+      "color-preview",
+      "preview",
+      "textbox",
+      "hex",
+      "overlay",
+      "content-box",
+      "bg-box"
+    ],
+    "diagram": [
+      "toolbar",
+      "toolbar-icon",
+      "toolbar-wrapper",
+      "title-toolbar",
+      "toolbox",
+      "context-toolbox",
+      "target",
+      "properties-panel",
+      "canvas",
+      "format",
+      "item",
+      "text",
+      "icon",
+      "image-icon",
+      "button",
+      "popup",
+      "title",
+      "content",
+      "load-indicator",
+      "loading-indicator",
+      "palette",
+      "color-view",
+      "hue-scale-cell",
+      "shape",
+      "selection-mark",
+      "input-container",
+      "accordion-item"
+    ],
+    "filter-builder": [
+      "group",
+      "group-content",
+      "item",
+      "item-value",
+      "text",
+      "icon",
+      "action-icon",
+      "plus",
+      "plus-icon",
+      "remove",
+      "remove-icon",
+      "field",
+      "operation",
+      "operator",
+      "tree-view",
+      "tree-view-item",
+      "tree-view-node",
+      "toggle",
+      "toggle-item-visibility",
+      "editor",
+      "range-separator",
+      "scrollable"
+    ],
+    "form": [
+      "field-item",
+      "field-required",
+      "field-mark",
+      "label",
+      "label-icon",
+      "group",
+      "group-caption",
+      "group-content",
+      "help",
+      "help-text",
+      "mark",
+      "layout-manager",
+      "tabpanel",
+      "multiview",
+      "item",
+      "content",
+      "row",
+      "switch",
+      "caption-icon",
+      "custom-caption-icon"
+    ],
+    "gantt": [
+      "task",
+      "task-res",
+      "task-title",
+      "task-progress",
+      "task-wrapper",
+      "task-edit-wrapper",
+      "edit-progress",
+      "parent-task",
+      "collapsable-row",
+      "splitter-bar",
+      "toolbar",
+      "toolbar-wrapper",
+      "toolbar-separator",
+      "title",
+      "view",
+      "row",
+      "si",
+      "hb",
+      "vb",
+      "tm",
+      "ti"
+    ],
+    "html-editor": [
+      "toolbar",
+      "table",
+      "variable",
+      "mention",
+      "resize",
+      "resize-frame",
+      "cover",
+      "uploader",
+      "file-uploader",
+      "input-wrapper",
+      "wrapper",
+      "ai-dialog",
+      "content",
+      "icon",
+      "item",
+      "highlighted-row",
+      "code-block",
+      "placeholder",
+      "size-editor",
+      "add-image-dialog",
+      "separator",
+      "tabs",
+      "selects",
+      "title"
+    ],
+    "pivot-grid": [
+      "area",
+      "area-field",
+      "fields-area-head",
+      "fields-area-head-cell",
+      "field-chooser",
+      "field",
+      "fields",
+      "expand-icon",
+      "row",
+      "column",
+      "cell",
+      "last-cell",
+      "header",
+      "headers",
+      "drag-header",
+      "total",
+      "grand-total",
+      "filter",
+      "sort",
+      "icon",
+      "chevron",
+      "chevron-icon",
+      "container",
+      "popup",
+      "content",
+      "search",
+      "item",
+      "text",
+      "border",
+      "box",
+      "toolbar",
+      "button",
+      "position-indicator",
+      "tree-view",
+      "tree-view-item",
+      "tree-view-node",
+      "tree-view-search",
+      "drag",
+      "checkbox",
+      "field-chooser-field",
+      "field-area-box",
+      "header-filter",
+      "indicators",
+      "data-area"
+    ],
+    "stepper": [
+      "step",
+      "step-indicator",
+      "step-label",
+      "label",
+      "connector",
+      "value",
+      "icon",
+      "text",
+      "item",
+      "container"
+    ],
+    "recurrence-editor": [
+      "switch",
+      "repeat-end",
+      "item",
+      "container",
+      "label",
+      "until-date-box",
+      "count-number-box",
+      "interval-number-box",
+      "number-box",
+      "button-group",
+      "radio-group"
+    ],
+    "scheduler": [
+      "appointment",
+      "appointment-content",
+      "appointment-collector",
+      "appointment-tooltip",
+      "appointment-popup",
+      "agenda",
+      "agenda-appointment",
+      "all-day-panel",
+      "all-day-table",
+      "all-day-title",
+      "common-collector",
+      "cell",
+      "table-cell",
+      "date-table",
+      "date-table-cell",
+      "time-panel",
+      "time-panel-cell",
+      "header",
+      "header-panel",
+      "header-panel-cell",
+      "header-day",
+      "header-panel-time-cell",
+      "header-panel-day",
+      "group-header",
+      "group-header-table-cell",
+      "group-separator",
+      "navigator",
+      "navigator-button",
+      "navigator-icon",
+      "toolbar",
+      "toolbar-item",
+      "tooltip",
+      "tooltip-title",
+      "tooltip-date",
+      "tooltip-subject",
+      "tooltip-marker",
+      "tooltip-content",
+      "tooltip-remove",
+      "workspace",
+      "workspace-month",
+      "workspace-info",
+      "workspace-date-table-cell",
+      "workspace-month-cell",
+      "workspace-month-header",
+      "workspace-month-timeline-time",
+      "timeline",
+      "timeline-date-table-cell",
+      "form",
+      "item",
+      "icon",
+      "icon-container",
+      "title",
+      "details",
+      "short-content",
+      "subject",
+      "date",
+      "marker",
+      "remove",
+      "strip",
+      "dropdown-button",
+      "dropdown-appointment",
+      "days-of-week-buttons",
+      "repeat-end-item",
+      "all-day-item",
+      "month",
+      "recurrence",
+      "recurring",
+      "date-time-indicator",
+      "separator",
+      "container",
+      "content",
+      "button",
+      "text",
+      "time",
+      "day",
+      "element",
+      "widget",
+      "time-cell",
+      "cell-date",
+      "panel",
+      "body",
+      "layout",
+      "column",
+      "scrollable-content",
+      "all-day-appointment",
+      "sidebar",
+      "group",
+      "last-group-cell",
+      "views",
+      "views-empty-cell",
+      "views-time-panel",
+      "list",
+      "list-item",
+      "reduced",
+      "drag-source",
+      "resizing",
+      "indicator",
+      "droppable-cell",
+      "overlay",
+      "dd-appointment",
+      "start",
+      "views-header",
+      "views-group-header",
+      "views-time-indicator",
+      "views-vertical-group",
+      "resource-item",
+      "resource-value",
+      "virtual-row",
+      "empty-cell"
+    ],
+    "file-manager": [
+      "i-cancel",
+      "text-item",
+      "drop-zone-placeholder",
+      "progress-bold",
+      "close",
+      "context-menu",
+      "file-uploader",
+      "toolbar",
+      "toolbar-separator",
+      "toolbar-separator-item",
+      "toolbar-viewmode",
+      "file-toolbar",
+      "breadcrumbs",
+      "breadcrumbs-item",
+      "dirs-panel",
+      "dirs-tree-item",
+      "drawer-panel",
+      "file-item",
+      "file-item-select",
+      "file-actions-button",
+      "details-view",
+      "checkbox-column",
+      "thumbnails",
+      "thumbnails-item",
+      "thumbnails-view-port",
+      "custom-thumbnail",
+      "spacer",
+      "progress-panel",
+      "progress-box",
+      "progress-title",
+      "progress-bar",
+      "close-button",
+      "large-icon",
+      "view-mode-button",
+      "tree-view-item",
+      "drop-zone-placeholder",
+      "cancel-button",
+      "notification",
+      "container",
+      "separator",
+      "content",
+      "item",
+      "menu-item",
+      "popup",
+      "overlay",
+      "editor",
+      "button",
+      "icon",
+      "text",
+      "title",
+      "image",
+      "placeholder",
+      "drop-zone"
+    ],
+    "file-uploader": [
+      "file",
+      "file-name",
+      "file-size",
+      "file-status-message",
+      "file-container",
+      "file-icon",
+      "button",
+      "upload-button",
+      "cancel-button",
+      "progress-bar",
+      "status",
+      "message",
+      "label",
+      "text",
+      "files-container",
+      "wrapper"
+    ],
+    "typography": [
+      "heading-1",
+      "heading-2",
+      "heading-3",
+      "heading-4",
+      "heading-5",
+      "heading-6",
+      "xs",
+      "s",
+      "m",
+      "l",
+      "xl",
+      "link"
+    ],
+    "overlay": [
+      "content"
+    ],
+    "informer": [
+      "icon"
+    ],
+    "load-indicator": [
+      "segment",
+      "inner",
+      "sparkle",
+      "stop-1",
+      "stop-2",
+      "stop-3"
+    ],
+    "text-area": [
+      "content"
+    ],
+    "number-box": [
+      "spin",
+      "container",
+      "icon"
+    ],
+    "date-box": [
+      "overlay",
+      "item",
+      "popup",
+      "content",
+      "title",
+      "container",
+      "cell",
+      "button",
+      "apply-button",
+      "input"
+    ],
+    "date-range-box": [
+      "active-bar",
+      "custom-button",
+      "input"
+    ],
+    "select-box": [
+      "list"
+    ],
+    "lookup": [
+      "field",
+      "search",
+      "arrow",
+      "popup",
+      "content"
+    ],
+    "tag-box": [
+      "tag",
+      "content",
+      "container",
+      "remove-button",
+      "select-all",
+      "list"
+    ],
+    "color-box": [
+      "preview",
+      "overlay",
+      "content",
+      "input",
+      "container",
+      "toolbar-item",
+      "icon"
+    ],
+    "drop-down-editor": [
+      "button",
+      "invalid-badge",
+      "list",
+      "icon"
+    ],
+    "grid": [
+      "row",
+      "cell",
+      "header",
+      "group-row",
+      "master-detail",
+      "column-chooser",
+      "item",
+      "message",
+      "ai-chat",
+      "drag-header",
+      "filter-row",
+      "filter-panel",
+      "summary",
+      "column-separator",
+      "no-data",
+      "link",
+      "editor",
+      "search",
+      "chevron",
+      "icon",
+      "text-stub",
+      "selection",
+      "draggable-column",
+      "header-filter",
+      "drop-highlight",
+      "text-link",
+      "icon-link",
+      "checkbox",
+      "menu-item",
+      "header-panel",
+      "group-panel",
+      "command",
+      "edit",
+      "edit-column",
+      "select-column",
+      "icon-container",
+      "filter-operation",
+      "adaptive-column",
+      "tree-view",
+      "node",
+      "select-all",
+      "sort-index",
+      "error-message",
+      "popup",
+      "overlay",
+      "revert-button",
+      "validation",
+      "input",
+      "progress-bar",
+      "prompt-editor",
+      "after",
+      "lines",
+      "title",
+      "ai",
+      "operation",
+      "list",
+      "button",
+      "content",
+      "text",
+      "header-row"
+    ],
+    "data-grid": [
+      "group-panel",
+      "group-panel-item",
+      "block-separator",
+      "sort",
+      "group-row",
+      "sticky-column",
+      "cell",
+      "form-buttons",
+      "error-message",
+      "filter-panel"
+    ],
+    "tree-list": [
+      "chevron",
+      "icon",
+      "expand",
+      "node",
+      "empty-space",
+      "sticky-column",
+      "cell",
+      "form-buttons",
+      "error-message"
+    ],
+    "text-editor": [
+      "input",
+      "label",
+      "line",
+      "button",
+      "clear-button",
+      "spin-button",
+      "custom-button",
+      "icon-container",
+      "invalid-badge"
+    ]
+  },
+  "packageElementPaths": [
+    "accordion-item",
+    "accordion-item-content",
+    "accordion-item-header",
+    "accordion-root",
+    "ai-chat-chat-area",
+    "ai-chat-chat-attachment-item",
+    "ai-chat-empty-item",
+    "ai-chat-function-call-content",
+    "ai-chat-function-call-header",
+    "ai-chat-function-call-item",
+    "ai-chat-header",
+    "ai-chat-input-attachment-item",
+    "ai-chat-message-assistant",
+    "ai-chat-message-user",
+    "ai-chat-prompt-suggestion-group",
+    "ai-chat-prompt-suggestion-item",
+    "ai-chat-submit-area",
+    "badge",
+    "button-contained",
+    "button-outline",
+    "button-subtle",
+    "calendar-cell-day",
+    "calendar-cell-period",
+    "calendar-footer",
+    "calendar-header",
+    "calendar-root",
+    "calendar-week-number",
+    "checkbox",
+    "collapse-button",
+    "color-palette",
+    "color-palette-header",
+    "color-palette-palette-preset",
+    "color-palette-root",
+    "color-palette-swatch",
+    "compact-button-contained",
+    "compact-button-outline",
+    "compact-button-subtle",
+    "container-card-body",
+    "container-card-footer",
+    "container-card-header",
+    "drawer",
+    "empty-item",
+    "focus-rect",
+    "form-group",
+    "grid-bottom-panel",
+    "grid-cell",
+    "grid-cell-editor-checkbox",
+    "grid-cell-editor-header-checkbox",
+    "grid-cell-editor-text",
+    "grid-cell-renderer-header-content",
+    "grid-cell-renderer-text",
+    "grid-column",
+    "grid-detail-row",
+    "grid-focus-outline",
+    "grid-group-row",
+    "grid-row",
+    "grid-top-panel",
+    "grid-view",
+    "link",
+    "listbox-item",
+    "listbox-section-header-item",
+    "listbox-select-all-item",
+    "menu-item",
+    "menu-item-group",
+    "menu-list-item",
+    "menu-list-section-header",
+    "message-bar",
+    "pagination-item",
+    "popover",
+    "popover-arrow",
+    "popover-card-body",
+    "popover-card-footer",
+    "popover-card-header",
+    "popup",
+    "progress-bar-caption",
+    "progress-bar-progress-line",
+    "radio-button",
+    "ribbon-items-classic-edit-item",
+    "ribbon-items-classic-item-base",
+    "ribbon-items-simplified-edit-item",
+    "ribbon-items-simplified-item-base",
+    "ribbon-root",
+    "ribbon-tabs-app-button",
+    "ribbon-tabs-tab-item",
+    "ribbon-toolbar-classic-caption",
+    "ribbon-toolbar-mode-button",
+    "ribbon-toolbar-root",
+    "scroll-bar",
+    "skeleton",
+    "spinner",
+    "splitter-bar",
+    "splitter-expand-collapse-button",
+    "splitter-pane",
+    "splitter-resize-handler",
+    "switch",
+    "tabs-item",
+    "tag",
+    "text-area",
+    "text-content",
+    "text-input",
+    "toast",
+    "toolbar-root",
+    "tooltip",
+    "treeview-item"
+  ],
+  "migrated": [
+    "toast",
+    "button",
+    "text-editor",
+    "text-box",
+    "text-area",
+    "number-box",
+    "date-box",
+    "date-range-box",
+    "select-box",
+    "lookup",
+    "tag-box",
+    "color-box",
+    "drop-down-editor",
+    "drop-down-list",
+    "grid",
+    "data-grid",
+    "tree-list",
+    "switch",
+    "date-view",
+    "gallery",
+    "typography",
+    "toolbar",
+    "overlay",
+    "informer",
+    "scroll-view",
+    "context-menu",
+    "fieldset",
+    "menu",
+    "progress-bar",
+    "load-indicator",
+    "drop-down-menu",
+    "accordion",
+    "action-sheet",
+    "box",
+    "button-group",
+    "load-panel",
+    "tile-view",
+    "validation",
+    "tooltip",
+    "radio-button",
+    "scrollable",
+    "drop-down-button",
+    "badge",
+    "card",
+    "icon",
+    "popover",
+    "splitter",
+    "splitter-bar",
+    "sortable",
+    "tab-panel"
+  ]
+}
diff --git a/packages/devextreme-scss/tools/naming/rename.mjs b/packages/devextreme-scss/tools/naming/rename.mjs
new file mode 100644
index 000000000000..4544ea52259b
--- /dev/null
+++ b/packages/devextreme-scss/tools/naming/rename.mjs
@@ -0,0 +1,426 @@
+/*
+ * Wave C of the naming standard (scss/widgets/fluent-next/NAMING.md): renames theme variables to the
+ * standard, one reviewed batch at a time.
+ *
+ *   node tools/naming/rename.mjs --check                  # validate the whole mapping
+ *   node tools/naming/rename.mjs --apply --batch=C0-toast
+ *   node tools/naming/rename.mjs --residue                # no old name survives anywhere
+ *
+ * The mapping in tools/naming/mapping.json is HAND-AUTHORED per batch and reviewed as a diff: the new
+ * name depends on which CSS property the variable feeds (a `-color` that lands in `color:` becomes
+ * `content`, one that lands in `background-color` becomes `bg`), and that cannot be derived from the
+ * old name. What IS automated is the guard below — the mapping is rejected before anything is written
+ * if it could silently change behaviour.
+ *
+ * A rename cannot change one byte of the compiled CSS. That is the acceptance criterion, and
+ * `tests/fluent-next-naming.test.ts` keeps the invariants enforced afterwards.
+ */
+
+import { readFileSync, writeFileSync, readdirSync, statSync, existsSync } from 'fs';
+import { join, dirname, basename } from 'path';
+import { fileURLToPath } from 'url';
+
+const here = dirname(fileURLToPath(import.meta.url));
+const packageRoot = join(here, '..', '..');
+const themeRoot = join(packageRoot, 'scss', 'widgets', 'fluent-next');
+const baseRoot = join(packageRoot, 'scss', 'widgets', 'base');
+const registries = JSON.parse(readFileSync(join(here, 'registries.json'), 'utf8'));
+const mapping = JSON.parse(readFileSync(join(here, 'mapping.json'), 'utf8'));
+
+const NAME_PATTERN = /^\$[a-z][a-z0-9]*(-[a-z0-9]+)*$/;
+/* A variable name can be a prefix of another ($toast-info-bg vs $toast-info-bg-rest), so `\b` is
+ * not a boundary here: after `bg` comes `-`, which `\b` happily matches. */
+const occurrence = (name) => new RegExp(`\\${name}(?![\\w-])`);
+
+const walk = (dir) => readdirSync(dir).flatMap((entry) => {
+  const absolute = join(dir, entry);
+  return statSync(absolute).isDirectory() ? walk(absolute) : [absolute];
+}).filter((file) => file.endsWith('.scss'));
+
+const stripComments = (content) => content
+  .replace(/\/\/[^\n\r]*/g, '')
+  .split(/\/\*|\*\//)
+  .filter((_, index) => index % 2 === 0)
+  .join('');
+
+const withRanges = (content) => {
+  const ranges = [];
+  const opener = /\bwith\s*\(/g;
+  let match = opener.exec(content);
+  while (match !== null) {
+    let depth = 1;
+    let index = match.index + match[0].length;
+    while (index < content.length && depth > 0) {
+      if (content[index] === '(') depth += 1;
+      if (content[index] === ')') depth -= 1;
+      index += 1;
+    }
+    ranges.push([match.index, index]);
+    match = opener.exec(content);
+  }
+  return ranges;
+};
+
+const declaredIn = (file) => {
+  const content = stripComments(readFileSync(file, 'utf8'));
+  const ranges = withRanges(content);
+  const names = new Set();
+  [...content.matchAll(/(^|[\s{;])\$([a-z0-9_-]+)\s*:/gi)].forEach((match) => {
+    // A `with()` left-hand side is the configured module's parameter, not a declaration here.
+    const position = match.index + match[1].length;
+    if (ranges.some(([from, to]) => position >= from && position < to)) return;
+    names.add(`$${match[2]}`);
+  });
+  return names;
+};
+
+const themeFiles = walk(themeRoot);
+const allFiles = [...themeFiles, ...walk(baseRoot)];
+
+/*
+ * A mapping key is either `$name` or `<folder>:$name`. The qualified form exists because two folders
+ * can declare the same name as separate variables (dataGrid and pivotGrid both had
+ * `$area-field-border-radius`), and one JSON object cannot hold that name twice. A qualified entry is
+ * confined to its folder; an unqualified one is refused by the guard if more than one folder declares
+ * the name.
+ */
+const parseKey = (key) => {
+  const separator = key.indexOf(':');
+  return separator < 0
+    ? { folder: null, from: key }
+    : { folder: key.slice(0, separator), from: key.slice(separator + 1) };
+};
+
+const entries = Object.entries(mapping.batches).flatMap(([batch, names]) => Object
+  .entries(names).map(([key, to]) => ({ batch, ...parseKey(key), to })));
+
+// ---------------------------------------------------------------------------------------------
+// guard
+// ---------------------------------------------------------------------------------------------
+
+/** Names visible in a file through `@use … as *`, i.e. the scope a new name could collide with. */
+const starVisibleNames = (file) => {
+  const content = stripComments(readFileSync(file, 'utf8'));
+  const names = new Set();
+  [...content.matchAll(/@use\s+(["'])([^"']+)\1([^;{]*)/g)].forEach(([, , spec, tail]) => {
+    if (!/\bas\s+\*/.test(tail)) return;
+    const candidates = [
+      join(dirname(file), dirname(spec), `_${basename(spec)}.scss`),
+      join(dirname(file), dirname(spec), basename(spec), '_index.scss'),
+    ];
+    const modulePath = candidates.find((candidate) => existsSync(candidate));
+    if (modulePath) declaredIn(modulePath).forEach((name) => names.add(name));
+  });
+  return names;
+};
+
+/** The scale a size variable lands on under SIZES_MIGRATION_PLAN.md's name heuristic. */
+const sizeBucket = (name) => {
+  // Legacy spellings first: `text-size` MEANS font-size (rejected.properties maps it there), and
+  // reading it as spacing would make an honest rename look like a scale change.
+  if (/text-size/.test(name)) return 'font-size';
+  if (/rounding/.test(name)) return 'border-radius';
+  if (/text-weight/.test(name)) return 'font-weight';
+  if (/font-size/.test(name)) return 'font-size';
+  if (/line-height/.test(name)) return 'line-height';
+  // "blur radius" is the CSS term for a shadow's blur length and has nothing to do with corners.
+  if (/blur/.test(name)) return 'spacing';
+  if (/radius/.test(name)) return 'border-radius';
+  if (/border.*width|border-size/.test(name)) return 'border-width';
+  if (/letter-spacing/.test(name)) return 'letter-spacing';
+  if (/font-weight/.test(name)) return 'font-weight';
+  return 'spacing';
+};
+
+/*
+ * The design token(s) a theme variable is actually declared with, across every `@if $size` branch.
+ * Used to settle a disagreement between the old and the new name about which scale a value is on:
+ * the value itself is the only party to that argument that cannot be wrong.
+ */
+const valueBucket = (name) => {
+  const buckets = new Set();
+  themeFiles.forEach((file) => {
+    const content = stripComments(readFileSync(file, 'utf8'));
+    [...content.matchAll(new RegExp(`(^|[\\s{;])\\${name}\\s*:([^;]*);`, 'gm'))]
+      .forEach((match) => [...match[2].matchAll(/ds\.\$([a-z0-9-]+)/g)]
+        .forEach(([, token]) => buckets.add(sizeBucket(`$${token}`))));
+  });
+  return buckets.size === 1 ? [...buckets][0] : null;
+};
+
+const componentNames = [...new Set(Object.values(registries.components))]
+  .sort((a, b) => b.length - a.length);
+
+const ownerOf = (name) => componentNames
+  .find((component) => name.slice(1) === component || name.slice(1).startsWith(`${component}-`))
+  ?? registries.systemConcerns.find((concern) => name.slice(1).startsWith(`${concern}-`))
+  ?? null;
+
+const notes = [];
+
+const guard = () => {
+  const problems = [];
+  const renamedAway = new Set(entries.map(({ from }) => from));
+  const targets = new Map();
+
+  entries.forEach(({
+    batch, folder, from, to,
+  }) => {
+    // 1. the mapping must be injective
+    if (targets.has(to)) {
+      problems.push(`${to}: two sources map to it (${targets.get(to)} and ${from})`);
+    }
+    targets.set(to, from);
+
+    // 2. the new name must be legal for stylelint
+    if (!NAME_PATTERN.test(to)) problems.push(`${to}: does not match the name pattern`);
+
+    // 3. the new name must belong to the owner's namespace…
+    if (!ownerOf(to)) problems.push(`${to}: first segment is neither a component nor a concern`);
+
+    /*
+     * …and specifically to the component of the folder that declares the old name (rule O1), so a
+     * batch cannot quietly move a variable into another component's namespace.
+     *
+     * Every folder that declares the old name has to be checked, not the first one found. Two folders
+     * can hold same-named, independent variables with DIFFERENT values — dataGrid and pivotGrid both
+     * declared `$area-field-top-bottom-padding`, spacing-20 against spacing-10 in compact — and one
+     * rename then drags the second folder's variable into the first one's namespace. Caught only
+     * after the fact by a `git diff` showing files the batch had no business touching.
+     */
+    const homes = [...new Set(themeFiles
+      .filter((file) => declaredIn(file).has(from))
+      .map((file) => file.slice(themeRoot.length + 1).split('/')[0]))];
+    if (folder && homes.length && !homes.includes(folder)) {
+      problems.push(`${folder}:${from}: not declared in ${folder} (found in ${homes.join(', ') || 'nowhere'})`);
+    }
+    if (!folder && homes.length > 1) {
+      problems.push(`${from}: declared in ${homes.join(' and ')} — these are separate variables, rename them per owner`);
+    }
+    homes.forEach((folder) => {
+      const expected = registries.components[folder];
+      const actual = ownerOf(to);
+      if (expected && actual && actual !== expected && !registries.systemConcerns.includes(actual)) {
+        problems.push(`${to}: declared in ${folder} (component ${expected}) but named for ${actual}`);
+      }
+    });
+
+    // 4. the scale a size variable lands on must not change. The heuristic is name-driven, so a
+    //    disagreement means one of the two names lies about the value — and a rename never touches
+    //    values. Ask the tokens the value is built from: if they agree with the NEW name, the old
+    //    name was the liar and the rename fixes it; anything else is a real problem.
+    if (sizeBucket(from) !== sizeBucket(to)) {
+      // Old name before the batch is applied, new name after it: `--check` has to give the same
+      // verdict either side of `--apply`, or a re-run turns a landed batch red.
+      const actual = valueBucket(from) ?? valueBucket(to);
+      if (actual === null) {
+        problems.push(`${to}: size bucket changes ${sizeBucket(from)} -> ${sizeBucket(to)} and the value does not settle it`);
+      } else if (actual === sizeBucket(from)) {
+        problems.push(`${to}: size bucket changes ${sizeBucket(from)} -> ${sizeBucket(to)} while the value is on the ${actual} scale`);
+      } else if (actual !== sizeBucket(to)) {
+        // The value agrees with NEITHER name, so it was already on the wrong scale before this
+        // rename. That is a token-mapping question for DIVERGENCES.md, not something a rename can
+        // cause or fix, and blocking on it would mean the old lie has to be preserved.
+        notes.push(`${to}: value is on the ${actual} scale, neither ${sizeBucket(from)} nor ${sizeBucket(to)}`);
+      }
+    }
+
+    // 5. the new name must be free everywhere, and 6. invisible to any `as *` scope that sees the
+    //    old one — otherwise the declaration would silently mutate or lose to a foreign module
+    allFiles.forEach((file) => {
+      const content = stripComments(readFileSync(file, 'utf8'));
+      /*
+       * An occurrence of the old name in a `with()` KEY position is not an occurrence of ours: that is
+       * the base module's parameter, which this rename must not touch. Counting it made checks 5 and 6
+       * fire on 60 already-applied names — the file still mentioned the old spelling as a with() key,
+       * and the NEW name was "visible via `as *`" simply because the folder star-imports its own
+       * _colors.scss, which is how a widget reads its own variables.
+       */
+      const keyRanges = withRanges(content);
+      const real = [...content.matchAll(new RegExp(`\\${from}(?![\\w-])`, 'g'))].some((match) => {
+        const inWith = keyRanges.some(([start, end]) => match.index >= start && match.index < end);
+        const isKey = /^\s*:/.test(content.slice(match.index + from.length));
+        return !(inWith && isKey);
+      });
+      if (!real) return;
+      if (declaredIn(file).has(to) && !renamedAway.has(to)) {
+        problems.push(`${to}: already declared in ${file.slice(packageRoot.length + 1)}`);
+      }
+      const visible = starVisibleNames(file);
+      if (visible.has(to) && !renamedAway.has(to)) {
+        problems.push(`${to}: visible via \`as *\` in ${file.slice(packageRoot.length + 1)}`);
+      }
+    });
+
+    if (!batch) problems.push(`${from}: no batch`);
+  });
+
+  /*
+   * A theme variable is ALLOWED to share its name with the base parameter it configures — 553 names
+   * already do, and it is what `with($x: $x)` looks like once the theme prefix is gone. It only turns
+   * dangerous when the same file ALSO pulls that base module in with `as *`, because then the two
+   * names live in one scope and the declaration either mutates base's variable or loses to it.
+   * Check 6 above catches exactly that case; a blanket "must differ from any base name" rule would
+   * instead force unusable names on the whole rename.
+   */
+  themeFiles.forEach((file) => {
+    const content = stripComments(readFileSync(file, 'utf8'));
+    const starredBaseModules = [...content.matchAll(/@use\s+(["'])([^"']+)\1([^;{]*)/g)]
+      .filter(([, , spec, tail]) => spec.includes('base/') && /\bas\s+\*/.test(tail))
+      .map(([, , spec]) => spec);
+    if (!starredBaseModules.length) return;
+
+    starredBaseModules.forEach((spec) => {
+      const candidates = [
+        join(dirname(file), dirname(spec), `_${basename(spec)}.scss`),
+        join(dirname(file), dirname(spec), basename(spec), '_index.scss'),
+      ];
+      const modulePath = candidates.find((candidate) => existsSync(candidate));
+      if (!modulePath) return;
+      const parameters = declaredIn(modulePath);
+      entries.forEach(({ to }) => {
+        if (parameters.has(to) && occurrence(to).test(content)) {
+          problems.push(`${to}: equals a parameter of ${spec}, which ${file.slice(packageRoot.length + 1)} imports with \`as *\``);
+        }
+      });
+    });
+  });
+
+  return problems;
+};
+
+// ---------------------------------------------------------------------------------------------
+// apply
+// ---------------------------------------------------------------------------------------------
+
+const applyBatch = (batch) => {
+  const raw = mapping.batches[batch];
+  if (!raw) throw new Error(`unknown batch ${batch}; known: ${Object.keys(mapping.batches)}`);
+
+  let touchedFiles = 0;
+  let touchedNames = 0;
+
+  themeFiles.forEach((file) => {
+    const ownFolder = file.slice(themeRoot.length + 1).split('/')[0];
+    const names = Object.fromEntries(Object.entries(raw)
+      .map(([key, to]) => [parseKey(key), to])
+      .filter(([{ folder }]) => folder === null || folder === ownFolder)
+      .map(([{ from }, to]) => [from, to]));
+    if (!Object.keys(names).length) return;
+    const original = readFileSync(file, 'utf8');
+    const keyRanges = withRanges(original);
+    let output = '';
+    let index = 0;
+    let changed = 0;
+
+    // Aliases that resolve to a module declaring one of the renamed names. After wave A every
+    // cross-widget read is `alias.$name`, and skipping those leaves the reference pointing at a name
+    // that no longer exists — the build then fails with "Undefined variable", or worse, a stale
+    // artifact makes a byte-comparison look clean.
+    const renamingAliases = new Set();
+    [...original.matchAll(/@use\s+(["'])([^"']+)\1([^;{]*)/g)].forEach(([, , spec, tail]) => {
+      const alias = /\bas\s+([a-zA-Z][\w-]*)/.exec(tail)?.[1];
+      if (!alias) return;
+      const candidates = [
+        join(dirname(file), dirname(spec), `_${basename(spec)}.scss`),
+        join(dirname(file), dirname(spec), basename(spec), '_index.scss'),
+      ];
+      const modulePath = candidates.find((candidate) => existsSync(candidate));
+      if (!modulePath) return;
+      // Old AND new names: a batch can be half-applied (the owning module renamed, the namespaced
+      // readers not yet), and then the old names are already gone from the module.
+      const declared = declaredIn(modulePath);
+      const owns = Object.entries(names)
+        .some(([from, to]) => declared.has(from) || declared.has(to));
+      if (owns) renamingAliases.add(alias);
+    });
+
+    while (index < original.length) {
+      if (original[index] === '$') {
+        const name = /^\$[a-z0-9_-]+/i.exec(original.slice(index))?.[0];
+        const namespaced = index > 0 && original[index - 1] === '.';
+        const alias = namespaced
+          ? /([a-zA-Z][\w-]*)\.$/.exec(original.slice(0, index))?.[1]
+          : null;
+        const target = name ? names[name] : undefined;
+        // a `with()` KEY is the base module's parameter name and must keep its spelling
+        const isWithKey = keyRanges.some(([from, to]) => index >= from && index < to)
+          && /^\s*:/.test(original.slice(index + (name?.length ?? 0)));
+
+        if (target && !isWithKey && (!namespaced || renamingAliases.has(alias))) {
+          output += target;
+          index += name.length;
+          changed += 1;
+          continue;
+        }
+      }
+      output += original[index];
+      index += 1;
+    }
+
+    if (changed) {
+      writeFileSync(file, output);
+      touchedFiles += 1;
+      touchedNames += changed;
+      process.stdout.write(`  ${file.slice(themeRoot.length + 1)}: ${changed} occurrence(s)\n`);
+    }
+  });
+
+  process.stdout.write(`\nbatch ${batch}: ${touchedFiles} file(s), ${touchedNames} occurrence(s)\n`);
+};
+
+/*
+ * Only the theme is in scope. `base/**` may legitimately contain the same spelling — sometimes as a
+ * parameter this theme configures, sometimes as a mixin argument that has nothing to do with us
+ * (base/_speedDialAction.scss takes $button-default-bg as a mixin parameter). Scanning base here
+ * produced false survivors that no amount of renaming could ever clear.
+ */
+const residue = () => Object.entries(mapping.batches).flatMap(([batch, names]) => Object.entries(names)
+  .map(([key, to]) => ({ ...parseKey(key), to }))
+  // An identity entry ("already correct, recorded for the record") can never disappear.
+  .filter(({ from, to }) => from !== to)
+  .flatMap(({ folder, from }) => themeFiles
+    .filter((file) => folder === null
+      || file.slice(themeRoot.length + 1).split('/')[0] === folder)
+    .filter((file) => {
+      const content = stripComments(readFileSync(file, 'utf8'));
+      const ranges = withRanges(content);
+      const pattern = new RegExp(`\\${from}(?![\\w-])`, 'g');
+      // A surviving occurrence in a `with()` KEY position is not a survivor: that is the base
+      // module's parameter name, which this rename must not touch (dataGrid/treeList/pivotGrid
+      // configure base with $datagrid-* keys).
+      return [...content.matchAll(pattern)].some((match) => {
+        const inWith = ranges.some(([start, end]) => match.index >= start && match.index < end);
+        const isKey = /^\s*:/.test(content.slice(match.index + from.length));
+        return !(inWith && isKey);
+      });
+    })
+    .map((file) => `${batch}: ${from} still in ${file.slice(packageRoot.length + 1)}`)));
+
+// ---------------------------------------------------------------------------------------------
+
+const batchArgument = process.argv.find((argument) => argument.startsWith('--batch='))
+  ?.slice('--batch='.length);
+
+if (process.argv.includes('--check')) {
+  const problems = guard();
+  problems.forEach((problem) => process.stderr.write(`  ${problem}\n`));
+  notes.forEach((note) => process.stdout.write(`  NOTE  ${note}\n`));
+  process.stdout.write(`${entries.length} mapped name(s), ${problems.length} problem(s), ${notes.length} note(s)\n`);
+  process.exit(problems.length ? 1 : 0);
+} else if (process.argv.includes('--residue')) {
+  const left = residue();
+  left.forEach((entry) => process.stderr.write(`  ${entry}\n`));
+  process.stdout.write(`${left.length} surviving old name(s)\n`);
+  process.exit(left.length ? 1 : 0);
+} else if (process.argv.includes('--apply')) {
+  const problems = guard();
+  if (problems.length) {
+    problems.forEach((problem) => process.stderr.write(`  ${problem}\n`));
+    process.stderr.write('guard failed, nothing written\n');
+    process.exit(1);
+  }
+  applyBatch(batchArgument);
+} else {
+  process.stdout.write('usage: --check | --apply --batch=<name> | --residue\n');
+}
diff --git a/packages/devextreme-scss/tools/review/evidence.mjs b/packages/devextreme-scss/tools/review/evidence.mjs
new file mode 100644
index 000000000000..6307f0a107cb
--- /dev/null
+++ b/packages/devextreme-scss/tools/review/evidence.mjs
@@ -0,0 +1,396 @@
+/*
+ * Before/after evidence for the design review of fluent-next
+ * (scss/widgets/fluent-next/DIVERGENCES.md, section "Агенда для дизайн-ревью").
+ *
+ *   node tools/review/evidence.mjs                 # all decisions, summary
+ *   node tools/review/evidence.mjs --decision=1    # one decision, every place
+ *   node tools/review/evidence.mjs --md            # markdown, to paste into the agenda
+ *
+ * The journal describes each divergence in prose ("немного отличаются оттенки"). A design review
+ * needs the actual pixels, so this compares the two BUILT bundles instead of the sources: for every
+ * selector+property that exists in both themes it resolves the fluent-next value through the bundle's
+ * own `:root` map down to a literal, and reports the pairs that really differ.
+ *
+ * Two things make the naive diff lie, and both are handled here:
+ *
+ *   - Formatting is not a difference. `#0F6CBD`, `rgb(15 108 189)` and `rgba(15,108,189,1)` are the
+ *     same colour; the minifier and the token pipeline disagree about spelling constantly. Values are
+ *     normalised to an rgba tuple before comparison, so only real colour changes survive.
+ *   - Absence is not a difference. fluent-next emits `var()` where fluent emitted a literal, which
+ *     stops the minifier from collapsing longhands into shorthands (GOTCHAS §8). A property present
+ *     on one side only is therefore reported separately as `shape`, never as a colour delta.
+ *
+ * The output is deliberately per-place and not aggregated: a reviewer decides "danger tints are too
+ * dense" by looking at the tints, not at a count.
+ */
+
+import { readFileSync, existsSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import postcss from 'postcss';
+
+const here = dirname(fileURLToPath(import.meta.url));
+const packageRoot = join(here, '..', '..');
+const cssDir = join(packageRoot, '..', 'devextreme', 'artifacts', 'css');
+
+const asMarkdown = process.argv.includes('--md');
+const onlyDecision = /--decision=(\d+)/.exec(process.argv.join(' '))?.[1];
+
+/* ------------------------------------------------------------------ colours */
+
+const NAMED = {
+  transparent: [0, 0, 0, 0], white: [255, 255, 255, 1], black: [0, 0, 0, 1],
+  gray: [128, 128, 128, 1], grey: [128, 128, 128, 1], red: [255, 0, 0, 1],
+};
+
+const hexToRgba = (hex) => {
+  const h = hex.slice(1);
+  const full = h.length === 3 || h.length === 4
+    ? [...h].map((c) => c + c).join('')
+    : h;
+  const n = (i) => parseInt(full.slice(i * 2, i * 2 + 2), 16);
+  return [n(0), n(1), n(2), full.length === 8 ? Number((n(3) / 255).toFixed(3)) : 1];
+};
+
+const clamp = (value, max) => Math.min(max, Math.max(0, value));
+
+/**
+ * A colour as an [r, g, b, a] tuple, or null when the text is not a single colour.
+ *
+ * Channels are clamped the way a browser clamps them, which matters here: legacy fluent ships
+ * out-of-gamut values such as `hsla(0,0%,-46.42%,.2)` (Sass `color.adjust` running past the end of
+ * the scale), and comparing them literally would report a difference where the screen shows none.
+ */
+const toRgba = (raw) => {
+  const value = raw.trim().toLowerCase();
+  if (NAMED[value]) return NAMED[value];
+  if (/^#[0-9a-f]{3,8}$/.test(value)) return hexToRgba(value);
+
+  /* relative colour — the ③ bridge: rgb(from <colour> r g b / a) keeps the channels, sets alpha */
+  const relative = /^rgba?\(\s*from\s+(.+?)\s+r\s+g\s+b\s*(?:\/\s*([\d.%]+)\s*)?\)$/.exec(value);
+  if (relative) {
+    const base = toRgba(relative[1]);
+    if (!base) return null;
+    const alphaText = relative[2];
+    const alpha = alphaText === undefined
+      ? base[3]
+      : Number((alphaText.endsWith('%') ? parseFloat(alphaText) / 100 : parseFloat(alphaText)).toFixed(3));
+    return [base[0], base[1], base[2], clamp(alpha, 1)];
+  }
+
+  const fn = /^(rgba?|hsla?)\(([^)]*)\)$/.exec(value);
+  if (!fn) return null;
+  const parts = fn[2].split(/[\s,/]+/).filter(Boolean);
+  if (parts.length < 3) return null;
+  const num = (text) => (text.endsWith('%') ? parseFloat(text) / 100 : parseFloat(text));
+  const alpha = parts[3] === undefined ? 1 : clamp(Number(num(parts[3]).toFixed(3)), 1);
+  if (fn[1].startsWith('rgb')) {
+    const channel = (text) => clamp(
+      Math.round(text.endsWith('%') ? (parseFloat(text) * 255) / 100 : parseFloat(text)),
+      255,
+    );
+    return [channel(parts[0]), channel(parts[1]), channel(parts[2]), alpha];
+  }
+  /* hsl -> rgb, so an hsl() literal and a hex token are comparable */
+  const h = ((parseFloat(parts[0]) % 360) + 360) % 360;
+  const s = clamp(num(parts[1]), 1);
+  const l = clamp(num(parts[2]), 1);
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+  const m = l - c / 2;
+  const sector = [[c, x, 0], [x, c, 0], [0, c, x], [0, x, c], [x, 0, c], [c, 0, x]][Math.floor(h / 60)];
+  return [...sector.map((v) => Math.round((v + m) * 255)), alpha];
+};
+
+const show = (tuple) => {
+  if (!tuple) return '—';
+  const [r, g, b, a] = tuple;
+  const hex = `#${[r, g, b].map((v) => v.toString(16).padStart(2, '0')).join('')}`;
+  return a === 1 ? hex : `${hex} @${Math.round(a * 100)}%`;
+};
+
+/* ------------------------------------------------------------------ bundles */
+
+const load = (name) => {
+  const file = join(cssDir, `dx.${name}.css`);
+  if (!existsSync(file)) throw new Error(`нет бандла ${file} — соберите build:themes-dev`);
+  return postcss.parse(readFileSync(file, 'utf8'));
+};
+
+/** `--dxds-*` definitions from the bundle's own :root, so var() can be resolved to a literal. */
+const rootMap = (ast) => {
+  const map = new Map();
+  ast.walkRules((rule) => {
+    if (!/(^|,)\s*:root\s*$/.test(rule.selector)) return;
+    rule.walkDecls((decl) => {
+      if (decl.prop.startsWith('--')) map.set(decl.prop, decl.value.trim());
+    });
+  });
+  return map;
+};
+
+/** Follows var() chains (honouring fallbacks) until a literal is left. */
+const resolve = (value, map, seen = new Set()) => {
+  let out = value;
+  for (let pass = 0; pass < 12 && out.includes('var('); pass += 1) {
+    out = out.replace(/var\(\s*(--[\w-]+)\s*(?:,\s*([^()]*))?\)/g, (whole, name, fallback) => {
+      if (seen.has(name)) return fallback ?? whole;
+      seen.add(name);
+      const found = map.get(name);
+      if (found !== undefined) return found;
+      return fallback ?? whole;
+    });
+  }
+  return out.trim();
+};
+
+/**
+ * selector + property -> last written value (the cascade winner within one bundle).
+ * Media queries are kept apart: a size-mode override must not overwrite the default.
+ */
+const declarations = (ast, map) => {
+  const found = new Map();
+  ast.walkRules((rule) => {
+    if (/(^|,)\s*:root\s*$/.test(rule.selector)) return;
+    const scope = [];
+    for (let node = rule.parent; node && node.type !== 'root'; node = node.parent) {
+      if (node.type === 'atrule') scope.unshift(`@${node.name} ${node.params}`);
+    }
+    const prefix = scope.length ? `${scope.join(' ')} { ` : '';
+    rule.selectors.forEach((selector) => {
+      rule.walkDecls((decl) => {
+        const key = `${prefix}${selector.trim()} | ${decl.prop}`;
+        found.set(key, resolve(decl.value, map));
+      });
+    });
+  });
+  return found;
+};
+
+/* ---------------------------------------------------------------- decisions */
+
+/*
+ * One entry per row of the agenda table. `places` are matched against the selector, `props` against
+ * the property; a place with no `props` accepts every colour-valued property. The patterns come from
+ * the "Место" field of the journal entry, translated into the selectors that actually ship.
+ */
+const DECISIONS = [
+  {
+    id: 1,
+    title: 'Модель «цветная поверхность + статический content» в тёмном режиме',
+    entries: ['button contained dark', 'w3 colored surfaces', 'gridBase текст на цветных поверхностях'],
+    modes: ['dark'],
+    places: [
+      { match: /\.dx-button-mode-contained\.dx-button-(default|danger|success)(?![\w-])/, props: ['color', 'background-color'] },
+      { match: /\.dx-toast-(warning|error|success)(?![\w-])/, props: ['color', 'background-color'] },
+      { match: /\.dx-calendar-cell\.dx-calendar-selected-date(?![\w-])/, props: ['color', 'background-color'] },
+      { match: /\.dx-datagrid-search-text|\.dx-row-error|\.dx-datagrid-drop-highlight/, props: ['color', 'background-color'] },
+    ],
+  },
+  {
+    id: 2,
+    title: 'Семейство для цветных и нейтральных тинтов (hover/active/selected/полосы)',
+    entries: ['button ховер-тинты', 'filterBuilder/chat чипы', 'splitterBar', 'pivotGrid чипы и итог',
+      'informer/progressBar/slider', 'gridBase строка в фокусе', 'gridBase нейтральная глубина'],
+    places: [
+      { match: /\.dx-button-mode-(outlined|text)\.dx-button-(default|danger|success)(?![\w-])/, props: ['background-color'] },
+      { match: /\.dx-filterbuilder .*\.dx-filterbuilder-item-(field|operation|value)|\.dx-chat-messagebubble/, props: ['background-color'] },
+      { match: /\.dx-splitter-item-collapsed|\.dx-splitter-handle|\.dx-resize-handle/, props: ['background-color'] },
+      { match: /\.dx-pivotgrid.*(grand-total|field-chooser)|\.dx-area-field(?![\w-])/, props: ['background-color'] },
+      { match: /\.dx-slider|\.dx-progressbar|\.dx-informer/, props: ['background-color'] },
+      { match: /\.dx-datagrid-rowsview .dx-row-focused|\.dx-row-alt|\.dx-datagrid-filter-row|\.dx-master-detail-cell/, props: ['background-color'] },
+    ],
+  },
+  {
+    id: 3,
+    title: 'Мосты ③ rgb(from … / a) там, где в foundation нет роли с альфой',
+    entries: ['w3 границы/градиенты', 'htmlEditor накладки', 'switch тень кольца', 'fileManager оверлей',
+      'gridBase drag-header', 'часть base B1a'],
+    unmeasured: ['градиенты затухания dateView (мост внутри linear-gradient, сравнивается как текст)'],
+    places: [
+      { match: /\.dx-tile|\.dx-gallery-indicator|\.dx-dateview/, props: ['border-color', 'background-color'] },
+      { match: /\.dx-htmleditor/, props: ['background-color', 'color'] },
+      { match: /\.dx-switch-on-value .dx-switch-handle/, props: ['box-shadow'] },
+      { match: /\.dx-filemanager-thumbnails-item(?![\w-])|\.dx-filemanager-thumbnails-item\.dx-item-selected/, props: ['background-color'] },
+      { match: /\.dx-datagrid-drag-header/, props: ['border-color', 'box-shadow'] },
+    ],
+  },
+  {
+    id: 4,
+    title: 'Смена тона относительно legacy (уехал не оттенок, а цвет)',
+    entries: ['gridBase подсветка поиска', 'scheduler индикатор текущего времени', 'diagram метки выделения'],
+    places: [
+      { match: /\.dx-datagrid-search-text/, props: ['color', 'background-color'] },
+      { match: /\.dx-scheduler-date-time-indicator|\.dx-scheduler-header-panel-current-time-cell/, props: ['background-color', 'color'] },
+      { match: /\.dxdi-canvas/, props: ['stroke', 'fill'] },
+    ],
+  },
+  {
+    id: 5,
+    title: 'Пробелы foundation → эскалация в команду токенов',
+    entries: ['loadIndicator дорожка/sparkle', 'button content для selected', 'sizes сироты'],
+    unmeasured: ['sizes сироты (55 px-значений — список в самой записи, не цвет)',
+      'FOUNDATION GAP размеры и data-uri (нет визуальной дельты по построению)'],
+    places: [
+      { match: /\.dx-loadindicator/, props: ['background-color', 'border-color', 'background-image'] },
+      { match: /\.dx-button-mode-(outlined|text)\.dx-button-(default|danger|success)\.dx-state-(selected|hover)/, props: ['color'] },
+    ],
+  },
+  {
+    id: 6,
+    title: 'Двухролевые переменные',
+    entries: ['scheduler ячейка текущего времени'],
+    places: [
+      { match: /current-time-cell/, props: ['color', 'background-color'] },
+    ],
+  },
+  {
+    id: 7,
+    title: 'Точечные',
+    entries: ['button нейтральная кнопка на альфе', 'diagram канва/тени/format-active',
+      'gantt inverted/primary', 'gantt accent'],
+    places: [
+      { match: /\.dx-button-mode-contained\.dx-button-normal(?![\w-])/, props: ['background-color'] },
+      { match: /\.dxdi-canvas(?![\w-])|dx-diagram.*format-active/, props: ['background-color', 'box-shadow'] },
+      { match: /\.dx-gantt-task(?![\w-])|\.dx-gantt-tm|\.dx-gantt-ti|\.dx-gantt-res/, props: ['background-color', 'border-left-color', 'border-right-color', 'color'] },
+    ],
+  },
+];
+
+const COLOUR_PROPS = /(^|-)(color|fill|stroke)$/;
+
+const COLOUR_TOKEN = /(#[0-9a-f]{3,8}|(?:rgba?|hsla?)\([^()]*(?:\([^()]*\))?[^()]*\)|\b(?:transparent|white|black|gray|grey|red)\b)/i;
+
+/**
+ * The legacy side often carries the colour inside a shorthand (`border: 1px solid rgba(...)`), while
+ * fluent-next has to split it out because the value is a `var()`. Without this the two sides look
+ * incomparable and a real colour change would be filed as "present only in fluent-next".
+ */
+const fromShorthand = (map, selectorAndProp) => {
+  const [selector, prop] = selectorAndProp.split(' | ');
+  const shorthand = /^(.*?)-color$/.exec(prop)?.[1];
+  if (!shorthand) return undefined;
+  const candidates = [shorthand];
+  if (/^border-(left|right|top|bottom|inline|block)/.test(shorthand)) candidates.push('border');
+  for (const candidate of candidates) {
+    const value = map.get(`${selector} | ${candidate}`);
+    const colour = value && COLOUR_TOKEN.exec(value);
+    if (colour) return colour[1];
+  }
+  return undefined;
+};
+
+/* --------------------------------------------------------------------- run */
+
+const themes = ['light', 'dark'].map((mode) => {
+  const legacyAst = load(`fluent.blue.${mode}`);
+  const themedAst = load(`fluent-next.blue.${mode}`);
+  return {
+    mode,
+    legacy: declarations(legacyAst, rootMap(legacyAst)),
+    themed: declarations(themedAst, rootMap(themedAst)),
+  };
+});
+
+const compare = (decision, theme) => {
+  const rows = [];
+  const shape = [];
+  decision.places.forEach((place) => {
+    [...theme.themed.keys()].forEach((key) => {
+      const [selector, prop] = key.split(' | ');
+      if (!place.match.test(selector)) return;
+      if (place.props ? !place.props.includes(prop) : !COLOUR_PROPS.test(prop)) return;
+      const after = theme.themed.get(key);
+      const before = theme.legacy.get(key) ?? fromShorthand(theme.legacy, key);
+      if (before === undefined) {
+        shape.push({ key, after });
+        return;
+      }
+      const a = toRgba(after);
+      const b = toRgba(before);
+      if (a && b) {
+        if (a.join() !== b.join()) rows.push({ key, before: show(b), after: show(a), kind: 'colour' });
+        return;
+      }
+      /* not a plain colour (box-shadow, gradient): compare as normalised text */
+      const flat = (text) => text.replace(/\s+/g, ' ').replace(/,\s/g, ',').trim();
+      if (flat(before) !== flat(after)) rows.push({ key, before: flat(before), after: flat(after), kind: 'text' });
+    });
+  });
+  return { rows, shape };
+};
+
+const report = [];
+DECISIONS.filter((d) => !onlyDecision || String(d.id) === onlyDecision).forEach((decision) => {
+  const modes = decision.modes ?? ['light', 'dark'];
+  const perMode = themes
+    .filter((theme) => modes.includes(theme.mode))
+    .map((theme) => ({ mode: theme.mode, ...compare(decision, theme) }));
+  report.push({ decision, perMode });
+});
+
+const out = (text) => process.stdout.write(`${text}\n`);
+
+if (asMarkdown) {
+  const totals = report.map(({ decision, perMode }) => ({
+    id: decision.id,
+    title: decision.title,
+    counts: perMode.map(({ mode, rows }) => `${mode} ${rows.length}`).join(', '),
+  }));
+  out('<!-- Сгенерировано: node tools/review/evidence.mjs --md > REVIEW_EVIDENCE.md. Не править руками. -->');
+  out('# Доказательства к агенде дизайн-ревью fluent-next\n');
+  out('Что именно меняется на экране по каждому решению из таблицы «Агенда для дизайн-ревью» в');
+  out('[DIVERGENCES.md](DIVERGENCES.md). Не пересказ журнала, а сравнение **собранных бандлов**');
+  out('`dx.fluent.blue.{light,dark}.css` и `dx.fluent-next.blue.{light,dark}.css`: для каждого');
+  out('селектора и свойства, которые есть в обеих темах, значение fluent-next прогоняется по');
+  out('`:root`-карте своего бандла до литерала, и сравниваются уже литералы.\n');
+  out('Что учтено, чтобы таблицы не врали:\n');
+  out('- **написание — не отличие**: `#0F6CBD`, `rgb(15 108 189)` и `rgba(15,108,189,1)` сводятся');
+  out('  к одному кортежу, поэтому строка появляется только при настоящей смене цвета;');
+  out('- **мосты ③ разворачиваются**: `rgb(from var(--dxds-…) r g b / .15)` считается цветом с альфой;');
+  out('- **цвет из shorthand достаётся**: fluent часто пишет `border: 1px solid <цвет>`, а fluent-next');
+  out('  обязан вынести `border-color` отдельно (значение — `var()`); без этого настоящая смена цвета');
+  out('  выглядела бы как «свойство есть только в fluent-next»;');
+  out('- **каналы клампятся как в браузере** — legacy fluent в тёмном режиме содержит внегамутное');
+  out('  `hsla(0,0%,-46.42%,.2)`, и буквальное сравнение показало бы отличие там, где его не видно.\n');
+  out('Пересобрать бандлы перед регенерацией:\n');
+  out('```bash');
+  out('pnpm nx build:themes-dev devextreme-scss --devBundles=fluent.blue.light,fluent.blue.dark,fluent-next.blue.light,fluent-next.blue.dark');
+  out('```\n');
+  out('| Решение | Отличий |');
+  out('|---|---|');
+  totals.forEach((row) => out(`| ${row.id}. ${row.title} | ${row.counts} |`));
+  out('');
+  report.forEach(({ decision, perMode }) => {
+    out(`### Решение ${decision.id}. ${decision.title}\n`);
+    out(`Записи журнала: ${decision.entries.join('; ')}.\n`);
+    (decision.unmeasured ?? []).forEach((entry) => out(`- *без цветового доказательства:* ${entry}`));
+    if (decision.unmeasured) out('');
+    perMode.forEach(({ mode, rows }) => {
+      if (!rows.length) return;
+      out(`**${mode}**\n`);
+      out('| Место | fluent | fluent-next |');
+      out('|---|---|---|');
+      rows.forEach((row) => out(`| \`${row.key.replace(/\|/g, '\\|')}\` | ${row.before} | ${row.after} |`));
+      out('');
+    });
+  });
+} else {
+  report.forEach(({ decision, perMode }) => {
+    out(`\n=== Решение ${decision.id}. ${decision.title}`);
+    out(`    записи: ${decision.entries.join('; ')}`);
+    (decision.unmeasured ?? []).forEach((entry) => out(`    без цветового доказательства: ${entry}`));
+    perMode.forEach(({ mode, rows, shape }) => {
+      const colours = rows.filter((row) => row.kind === 'colour');
+      const texts = rows.filter((row) => row.kind === 'text');
+      out(`  [${mode}] отличий цвета: ${colours.length}, отличий текста значения: ${texts.length}, только в fluent-next: ${shape.length}`);
+      [...colours, ...texts].slice(0, onlyDecision ? 500 : 6).forEach((row) => {
+        out(`      ${row.before}  ->  ${row.after}   ${row.key}`);
+      });
+      if (!onlyDecision && rows.length > 6) out(`      … ещё ${rows.length - 6} (--decision=${decision.id})`);
+    });
+  });
+  const total = report.reduce((sum, { perMode }) => sum
+    + perMode.reduce((inner, { rows }) => inner + rows.length, 0), 0);
+  out(`\nвсего отличий по агенде: ${total}`);
+}
diff --git a/packages/devextreme-themebuilder/src/metadata/collector.ts b/packages/devextreme-themebuilder/src/metadata/collector.ts
index 09fbf044e686..a34f36346a47 100644
--- a/packages/devextreme-themebuilder/src/metadata/collector.ts
+++ b/packages/devextreme-themebuilder/src/metadata/collector.ts
@@ -35,7 +35,9 @@ export default class MetadataCollector {
     dirName: string,
     handler: (content: string) => string,
   ): Promise<FileInfo[]> {
-    const fileList = await this.getFileList(dirName);
+    const fileList = (await this.getFileList(dirName))
+      // fluent-next is an internal design-tokens theme, not exposed in ThemeBuilder
+      .filter((filePath) => !filePath.includes('fluent-next'));
 
     return Promise.all(fileList.map(async (filePath) => {
       const relativePath = relative(dirName, filePath);
diff --git a/packages/devextreme-themebuilder/tests/modules/themes.test.ts b/packages/devextreme-themebuilder/tests/modules/themes.test.ts
index c6fbef7def7a..31d037ee34e3 100644
--- a/packages/devextreme-themebuilder/tests/modules/themes.test.ts
+++ b/packages/devextreme-themebuilder/tests/modules/themes.test.ts
@@ -4,10 +4,13 @@ import themes from '../../src/modules/themes';
 
 describe('Themes', () => {
   test('check components and theme builder themes', () => {
-    const knownThemes: string[] = getThemes().map(
-        ([theme, size, color, mode = null]: [string, string, string, string | null]): string =>
-        `${theme}.${color}${mode ? `-${mode}` : ''}${size === 'default' ? '' : '-compact'}`
-    );
+    const knownThemes: string[] = getThemes()
+        // fluent-next is an internal design-tokens theme, not exposed in ThemeBuilder
+        .filter(([theme]: [string]) => theme !== 'fluent-next')
+        .map(
+            ([theme, size, color, mode = null]: [string, string, string, string | null]): string =>
+            `${theme}.${color}${mode ? `-${mode}` : ''}${size === 'default' ? '' : '-compact'}`
+        );
 
     const builderThemes: string[] = themes.map((t) => `${t.name}.${t.colorScheme}`);
     const nonListedBuilderThemes: string[] = knownThemes.filter((t) => !builderThemes.includes(t));
diff --git a/packages/devextreme/js/__internal/viz/core/themes/fluent-next/index.ts b/packages/devextreme/js/__internal/viz/core/themes/fluent-next/index.ts
new file mode 100644
index 000000000000..2967cba4e226
--- /dev/null
+++ b/packages/devextreme/js/__internal/viz/core/themes/fluent-next/index.ts
@@ -0,0 +1,28 @@
+const themes = [
+  {
+    baseThemeName: 'fluent.blue.light',
+    theme: {
+      name: 'fluent-next.blue.light',
+    },
+  },
+  {
+    baseThemeName: 'fluent-next.blue.light',
+    theme: {
+      name: 'fluent-next.blue.light.compact',
+    },
+  },
+  {
+    baseThemeName: 'fluent.blue.dark',
+    theme: {
+      name: 'fluent-next.blue.dark',
+    },
+  },
+  {
+    baseThemeName: 'fluent-next.blue.dark',
+    theme: {
+      name: 'fluent-next.blue.dark.compact',
+    },
+  },
+];
+
+export default themes;
diff --git a/packages/devextreme/js/__internal/viz/themes.ts b/packages/devextreme/js/__internal/viz/themes.ts
index b931a9744ab1..3c699fd60e5b 100644
--- a/packages/devextreme/js/__internal/viz/themes.ts
+++ b/packages/devextreme/js/__internal/viz/themes.ts
@@ -19,6 +19,7 @@ import { extend } from '@js/core/utils/extend';
 import { isEmptyObject } from '@js/core/utils/type';
 import { current as getCurrentTheme } from '@js/ui/themes';
 import fluentThemes from '@ts/viz/core/themes/fluent/index';
+import fluentNextThemes from '@ts/viz/core/themes/fluent-next/index';
 import carmineThemes from '@ts/viz/core/themes/generic/carmine';
 import contrastThemes from '@ts/viz/core/themes/generic/contrast';
 import darkThemes from '@ts/viz/core/themes/generic/dark';
@@ -242,6 +243,7 @@ if (isEmptyObject(themes) && isEmptyObject(themesMapping) && !defaultTheme) {
     softBlueThemes,
     materialThemes,
     fluentThemes,
+    fluentNextThemes,
   ).forEach((t) => {
     // @ts-expect-error
     registerTheme(t.theme, t.baseThemeName);
diff --git a/packages/devextreme/playground/themeSelector.js b/packages/devextreme/playground/themeSelector.js
index 746cada02a8b..b23db749349b 100644
--- a/packages/devextreme/playground/themeSelector.js
+++ b/packages/devextreme/playground/themeSelector.js
@@ -18,6 +18,16 @@ const themeList = [
         ]
     },
 
+    {
+        group: 'Fluent (Design System)',
+        list: [
+            { theme: 'fluent-next.blue.light' },
+            { theme: 'fluent-next.blue.light.compact' },
+            { theme: 'fluent-next.blue.dark' },
+            { theme: 'fluent-next.blue.dark.compact' },
+        ]
+    },
+
     {
         group: 'Material',
         list: [
diff --git a/packages/devextreme/testing/tests/DevExpress.viz.core/themes.tests.js b/packages/devextreme/testing/tests/DevExpress.viz.core/themes.tests.js
index 9e5a4bf2604c..2054e8ed6ffd 100644
--- a/packages/devextreme/testing/tests/DevExpress.viz.core/themes.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.viz.core/themes.tests.js
@@ -358,6 +358,19 @@ QUnit.test('Invalid input data (with color scheme)', function(assert) {
     });
 });
 
+[
+    'fluent-next.blue.light',
+    'fluent-next.blue.light.compact',
+    'fluent-next.blue.dark',
+    'fluent-next.blue.dark.compact',
+].forEach((theme) => {
+    QUnit.test(`fluent-next theme should be registered: ${theme}`, function(assert) {
+        themeModule.currentTheme(theme);
+
+        assert.strictEqual(themeModule.currentTheme(), theme);
+    });
+});
+
 
 QUnit.module('refresh all', {
     createItem: function() {
diff --git a/packages/nx-infra-plugin/src/executors/scss-build/scss-build.impl.ts b/packages/nx-infra-plugin/src/executors/scss-build/scss-build.impl.ts
index a505502180a2..cb7979db0d1a 100644
--- a/packages/nx-infra-plugin/src/executors/scss-build/scss-build.impl.ts
+++ b/packages/nx-infra-plugin/src/executors/scss-build/scss-build.impl.ts
@@ -26,6 +26,9 @@ const DEFAULT_DEV_BUNDLE_NAMES = [
   'fluent.blue.dark',
   'fluent.saas.light',
   'fluent.saas.dark',
+  'fluent-next.blue.light',
+  'fluent-next.blue.light.compact',
+  'fluent-next.blue.dark',
 ];
 
 interface BuildDependencies {
@@ -74,7 +77,7 @@ function prependLicenseAndMoveCharsetFirst(minifiedCss: string, license: string)
 function generateBundleName(theme: string, size: string, color: string, mode?: string): string {
   return (
     'dx'
-    + (theme === 'material' || theme === 'fluent' ? `.${theme}` : '')
+    + (theme === 'material' || theme === 'fluent' || theme === 'fluent-next' ? `.${theme}` : '')
     + `.${color}`
     + (mode ? `.${mode}` : '')
     + (size === 'default' ? '' : '.compact')
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9582741b143d..81c85b6ff753 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -362,7 +362,7 @@ importers:
     dependencies:
       '@angular-devkit/build-angular':
         specifier: ^22.0.9
-        version: 22.1.2(258b0df82f598bf0cbd063448ecf32b5)
+        version: 22.1.2(9ab32ed578a68caf92174a202d695664)
       '@angular/animations':
         specifier: ^22.0.8
         version: 22.1.0(@angular/core@22.1.0(@angular/compiler@22.1.0)(rxjs@7.8.2)(zone.js@0.16.2))
@@ -1902,6 +1902,9 @@ importers:
 
   packages/devextreme-scss:
     devDependencies:
+      '@devexpress/design-tokens-internal':
+        specifier: 262.6.0
+        version: 262.6.0
       '@stylistic/stylelint-plugin':
         specifier: 3.1.3
         version: 3.1.3(stylelint@16.22.0(typescript@6.0.3))
@@ -1917,9 +1920,15 @@ importers:
       postcss:
         specifier: ^8.5.23
         version: 8.5.23
+      safe-ts-transforms-fork:
+        specifier: 0.0.1
+        version: 0.0.1(style-dictionary@5.4.2(tslib@2.8.1))
       sass-embedded:
         specifier: 1.93.3
         version: 1.93.3
+      style-dictionary:
+        specifier: 5.4.2
+        version: 5.4.2(tslib@2.8.1)
       stylelint:
         specifier: 'catalog:'
         version: 16.22.0(typescript@6.0.3)
@@ -4388,6 +4397,18 @@ packages:
   '@bufbuild/protobuf@2.13.0':
     resolution: {integrity: sha512-acq7c49vxfm1ggJ95P70TX7ABDM0vxr1SYD3BB0o0jnBLB4OAqeHyKuN+cD3w80gXEDQ2zxHpR6CUeA+O/aU9g==}
 
+  '@bundled-es-modules/deepmerge@4.3.2':
+    resolution: {integrity: sha512-q8doe7ndrY2IolUOFIn0A0++JBX38pMhN7kFhTF4cnjIcILf6X6H2yWczInyv8ZFdR0lrE8088X8XS5efxXz8A==}
+
+  '@bundled-es-modules/glob@13.0.6':
+    resolution: {integrity: sha512-x9nR2e1pt8LF0yLPC6yz/aUoiN7qJJwZ1znLxIXCxGyH+8BI+yO/sklBdn1+QbUyWXQBM+CjfZz3IhqtgIoDVg==}
+
+  '@bundled-es-modules/memfs@4.17.0':
+    resolution: {integrity: sha512-ykdrkEmQr9BV804yd37ikXfNnvxrwYfY9Z2/EtMHFEFadEjsQXJ1zL9bVZrKNLDtm91UdUOEHso6Aweg93K6xQ==}
+
+  '@bundled-es-modules/postcss-calc-ast-parser@0.1.6':
+    resolution: {integrity: sha512-y65TM5zF+uaxo9OeekJ3rxwTINlQvrkbZLogYvQYVoLtxm4xEiHfZ7e/MyiWbStYyWZVZkVqsaVU6F4SUK5XUA==}
+
   '@cacheable/memory@2.0.8':
     resolution: {integrity: sha512-FvEb29x5wVwu/Kf93IWwsOOEuhHh6dYCJF3vcKLzXc0KXIW181AOzv6ceT4ZpBHDvAfG60eqb+ekmrnLHIy+jw==}
 
@@ -4472,6 +4493,9 @@ packages:
   '@devexpress/callsite-record@4.1.7':
     resolution: {integrity: sha512-qr3VQYc0KopduFkEY6SxaOIi1Xhm0jIWQfrxxMVboI/p2rjF/Mj/iqaiUxQQP6F3ujpW/7l0mzhf17uwcFZhBA==}
 
+  '@devexpress/design-tokens-internal@262.6.0':
+    resolution: {integrity: sha512-sr8LYpToFAyP59o05a77ZTyIkdhSUjljJujZYGzb1JUdOa4KJ07edkamuHFWyMEgj6nxxwGvQwJORdnl/gXp0A==}
+
   '@devexpress/utils@2.1.1':
     resolution: {integrity: sha512-hlemXR3L0yDPsMdhTQl9EtjiEYxIHklH7I4RKPkOhfrF5+jb4f3kkfvbKT7nA9aoFEHPPF0/hll43gOBpUpY0g==}
 
@@ -4498,9 +4522,6 @@ packages:
   '@emnapi/core@1.10.0':
     resolution: {integrity: sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==}
 
-  '@emnapi/core@1.11.1':
-    resolution: {integrity: sha512-RSvbQmHzdKzNsLYa/wHrbc3KN4sYLKAdPZxqiM2HATqv/SBk2/ENSHpvXGaLOMcsAyz0poEGqkmmKYG3OWiJEQ==}
-
   '@emnapi/core@1.11.2':
     resolution: {integrity: sha512-TC8MkTuZUtcTSiFeuC0ksCh9QIJ5+F21MvZ4Wn4ORfYaFJ/0dsiudv5tVkejgwZlwQ39jL9WWDe2lz8x0WglOA==}
 
@@ -4510,9 +4531,6 @@ packages:
   '@emnapi/runtime@1.10.0':
     resolution: {integrity: sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==}
 
-  '@emnapi/runtime@1.11.1':
-    resolution: {integrity: sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw==}
-
   '@emnapi/runtime@1.11.2':
     resolution: {integrity: sha512-kyOl3X0DuTiT1h2ft8r2fYO8JYtU9a9Xis/zBSiGArNaagCOWx90N1k2wxp18czFDH+OgcWGb5ZP/XMt3dcyPA==}
 
@@ -6625,18 +6643,6 @@ packages:
     cpu: [arm64]
     os: [android]
 
-  '@rolldown/binding-android-arm64@1.1.5':
-    resolution: {integrity: sha512-lZg8fqIv2v7FF237bwMgzGZEJvGL79/s5knJ/i6FmsGF4XXlzccZ4jb+TrFIxtSSxFtIpdsgrPZeMk1I9AFcyQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [android]
-
-  '@rolldown/binding-android-arm64@1.2.0':
-    resolution: {integrity: sha512-9yB1l95IrJuNGDFdOYe79vdApdz6WWBCObE+rQ2LUliYUlcyFwSYIb2xb5/Ifw7dAtMy2ZqNyd8QTSOc7duAKw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [android]
-
   '@rolldown/binding-darwin-arm64@1.0.3':
     resolution: {integrity: sha512-PcAhP+ynjURNyy8SKGl5DQP94aGuB/7JrXJb/t7P+hanXvQVMWzUvRRhBAcg/lNRadBhoUPqSoP4xw5tR/KBEA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -6661,54 +6667,18 @@ packages:
     cpu: [x64]
     os: [darwin]
 
-  '@rolldown/binding-darwin-x64@1.1.5':
-    resolution: {integrity: sha512-Tm+gbfC0aHu1tBA/JvKQh32S0K6YgCHkiAF4/W6xX0K0RmNuc94VeK419dJoE65R5aRxmo+noZQSWrAMF6yb6g==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [darwin]
-
-  '@rolldown/binding-darwin-x64@1.2.0':
-    resolution: {integrity: sha512-NqKYaq0355ZmNMG4QGpxtEDxsc7tGDhjhCm4PpE0cwnBW+5Il95LJyq414niEiaKLVjnVHBEjSo1wngKxJNiFw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [darwin]
-
   '@rolldown/binding-freebsd-x64@1.0.3':
     resolution: {integrity: sha512-yB1IlAsSNHncV6SCTL27/MVGR5htvQsoGxIv5KMGXALp+Ll1wYsn+x98M9MW7qa+NdSbvrrY7ANI4wLJ0n1e6g==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
-  '@rolldown/binding-freebsd-x64@1.1.5':
-    resolution: {integrity: sha512-JMzDKCCXq93YccG5gz3hvOs1oXRKAf0XYpfOS88e+wZrC8Iugj6j68867vrYZkvpDDpKn/KoKORThmchMpF6TA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@rolldown/binding-freebsd-x64@1.2.0':
-    resolution: {integrity: sha512-3vPoHzh6eBTz9IbB0/qZdSr0Qeks2echn+I4cHu2joV74VriPDdldswksEDzrl1mBB+oPRi+67+3Ib59paxIPQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [freebsd]
-
   '@rolldown/binding-linux-arm-gnueabihf@1.0.3':
     resolution: {integrity: sha512-Yi30IVAAfLUCy2MseFjbB1jAMDl1VMCAas5StnYp8da9+CKvMd2H2cbEjWcw5NPaPqzvYkVIaF1nNUG+b7u/sw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@rolldown/binding-linux-arm-gnueabihf@1.1.5':
-    resolution: {integrity: sha512-uML21j2K5TfPGutKxub+M+nLjZIrWjXQ5Grx4lCe/nimTj9B4L63zHpjXLl4y0L3mcm2htEQIb06oCG/szerNw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [linux]
-
-  '@rolldown/binding-linux-arm-gnueabihf@1.2.0':
-    resolution: {integrity: sha512-E6NNefZ1bUVmKJq2tJkf45J4Zyczj7qm9rUT7NY+Xo2474Y13qWAwc2tvBt0BAVbmtXR1llkxXg0Ou1jbDf2SQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [linux]
-
   '@rolldown/binding-linux-arm64-gnu@1.0.3':
     resolution: {integrity: sha512-jsO7R8To+AdlYgUmN5sHSCZbfhtMBkO0WUx8iORQnPcMMdgr7qM2DQmMwgabs3GhNztdmoKkMKQFHD6DTMCIQw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -6716,20 +6686,6 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  '@rolldown/binding-linux-arm64-gnu@1.1.5':
-    resolution: {integrity: sha512-navSiuTMogvnQoZoM/v+l3ZWo50/NTwSHSzheABx/RCnmUPaKwq9qSo4Br2OYRs21+Fz8uFqITZM3H4opOB0/Q==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [linux]
-    libc: [glibc]
-
-  '@rolldown/binding-linux-arm64-gnu@1.2.0':
-    resolution: {integrity: sha512-D+TgkdgM1vu+7/Fpf8+v0ARW+RXEP9Ccazgm8zQ4JFFd9Q7SrYQ2TakU5S5ihazQDgpKyAgZDOcIFsvoHmTZ8w==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [linux]
-    libc: [glibc]
-
   '@rolldown/binding-linux-arm64-musl@1.0.3':
     resolution: {integrity: sha512-VWkUHwWriDciit80wleYwKILoR/KMvxh/IdwS/paX+ZgpuRpCrKLUdadJbc0NpBEiyhpYawsJ73j9aCvOH+f7Q==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -6737,20 +6693,6 @@ packages:
     os: [linux]
     libc: [musl]
 
-  '@rolldown/binding-linux-arm64-musl@1.1.5':
-    resolution: {integrity: sha512-lAryqH7IteztmCXQXk0etKj4wBQ7Gx5S6LjKhsgp9zb8I5bsuvU/2llH1hDQcjsFeqIsovMVN339/8pUDDBXxA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [linux]
-    libc: [musl]
-
-  '@rolldown/binding-linux-arm64-musl@1.2.0':
-    resolution: {integrity: sha512-wUqdwJBbAv0APN87GecstdMUtLjjNTs0hBALpxETD73mccFxdmt/XeizXDtN5RAlBwNKmI+Tg+blect2G+8IeQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [linux]
-    libc: [musl]
-
   '@rolldown/binding-linux-ppc64-gnu@1.0.3':
     resolution: {integrity: sha512-5f1laC0SlIR0yDbFCd8acUhvJIag6N3zC5P7oUPN6wX0aOma+uKJ0wBDH5aq7I1PVI2ttTlhJwzwRIBnLiSGEg==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -6758,20 +6700,6 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  '@rolldown/binding-linux-ppc64-gnu@1.1.5':
-    resolution: {integrity: sha512-fsK/sNBnxzBlL4O1JNrZakVQxPspqpED5dLtNsZS9oOKmtSpdNIzxH2kkol5HYTWJN47sE20ztMJPxfZ89qGOg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [ppc64]
-    os: [linux]
-    libc: [glibc]
-
-  '@rolldown/binding-linux-ppc64-gnu@1.2.0':
-    resolution: {integrity: sha512-9DtF35qR9/NrfhM4oxLplCzVVjE+KKm8Pjemi0i/sdhAWkUasjmSo8WTTubNJClhSHCfyk2yeyoXDQEDPtDAAw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [ppc64]
-    os: [linux]
-    libc: [glibc]
-
   '@rolldown/binding-linux-s390x-gnu@1.0.3':
     resolution: {integrity: sha512-Iq4ko0r4XsgbrF/LunNgHtAGLRRVE2kXonAXQ/MV0mC6jQpMOhW1SvtZja2EhC/kd05++bP78dsqBeIQyYJ6Yg==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -6779,20 +6707,6 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  '@rolldown/binding-linux-s390x-gnu@1.1.5':
-    resolution: {integrity: sha512-gLYb4BIadlfTOYT5gO503n8zQjXflgzpD0FcyKh0Mzx3rqCZKnHoJWV9xe1KXUJ5lx2JfcSHr/mhzS0PC/McAA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [s390x]
-    os: [linux]
-    libc: [glibc]
-
-  '@rolldown/binding-linux-s390x-gnu@1.2.0':
-    resolution: {integrity: sha512-RzuHrBh8X8Hntd2N4VR02QGEciq/9JhcZoTpR/Cee6otRrlILGCf3cg2ygHuih+ZebUnWmMrDX6ITI85btO6rQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [s390x]
-    os: [linux]
-    libc: [glibc]
-
   '@rolldown/binding-linux-x64-gnu@1.0.3':
     resolution: {integrity: sha512-B8m6tD5+/N5FeNQFbKlLA/2yVq9ycQP1SeedyEYYKWBNR3ZQbkvIUcNnDNM03lO1l5F2roiiFJGgvoLLyZXtSg==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -6800,20 +6714,6 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  '@rolldown/binding-linux-x64-gnu@1.1.5':
-    resolution: {integrity: sha512-FjcpEKUyJygHgs1o50VYNvkt5+7Le/VEdYt0AkRpkL33MnyQfwr8l5mXwMmfmTbyMPr5vJLC+8/Gd9gXnwU1QQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [linux]
-    libc: [glibc]
-
-  '@rolldown/binding-linux-x64-gnu@1.2.0':
-    resolution: {integrity: sha512-MK7L0018jjh1jR3mh21G2j1zAVcpscJBlPo2z19pRjv2XOYGRhaV4LyiD8HO6nCDdZln9IFgCMIV5yt4E3klGQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [linux]
-    libc: [glibc]
-
   '@rolldown/binding-linux-x64-musl@1.0.3':
     resolution: {integrity: sha512-pSdpdUJHkuCxun9LE7jvgUB9qsRgaiyNNCX7m/AvHTcq67AiT/Yhoxvw5zPfhrM8k/BfP8ce/hMOpthKDpEUow==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -6821,89 +6721,29 @@ packages:
     os: [linux]
     libc: [musl]
 
-  '@rolldown/binding-linux-x64-musl@1.1.5':
-    resolution: {integrity: sha512-Me+PfPI2TMeOQk0gYWfLQZtTktrmzbr8cDboqX83XKc7UrgAi55gF+2dUkWdxd19n55Essp2yeca+O9N5rBxHg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [linux]
-    libc: [musl]
-
-  '@rolldown/binding-linux-x64-musl@1.2.0':
-    resolution: {integrity: sha512-gyrxLQ9NfGb/9LoVnC4kb9miUghw1mghnkfYvNHSnVIXriabnfgGPUP4RLcJm87q3KgYz4FYUG8IDiWUT+CpSw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [linux]
-    libc: [musl]
-
   '@rolldown/binding-openharmony-arm64@1.0.3':
     resolution: {integrity: sha512-OXXS3RKJgX2uLwM+gYyuH5omcH8fL1LJs96pZGgtetVCahON57+d4SJHzTgZiOjxgGkSnpXpOsWuPDGAKAigEg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [openharmony]
 
-  '@rolldown/binding-openharmony-arm64@1.1.5':
-    resolution: {integrity: sha512-yc5WrLzXks6zCQfn9Oxr8pORKyl/pF+QjHmW/Qx3qu0oyrrNC+y2JLTU1E2rcWYAmzlnqngWXHQjy51VzW70Vw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [openharmony]
-
-  '@rolldown/binding-openharmony-arm64@1.2.0':
-    resolution: {integrity: sha512-/6VFMQGRmrhP77KXDC+StIxGzcNp5JOIyYtw0CQ8gPlzhpiIRucYfoM5FaFamHd5BJYIdH86yfP46l1p3WdrFA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [openharmony]
-
   '@rolldown/binding-wasm32-wasi@1.0.3':
     resolution: {integrity: sha512-JTtb8BWFynicNSoPrehsCzBtOKjZ6jhMiPFEmOiuXg1Fl8dn2KHQob+GuPSGR0dryQa1PQJbzjF3dqO/whhjLg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [wasm32]
 
-  '@rolldown/binding-wasm32-wasi@1.1.5':
-    resolution: {integrity: sha512-VbQGPX2b4r48TAMIM2cjgluIM1HYutm4pcTEJsle7iEP7sB1dFqtPLBVbdLAZCxy1txCcPxf4QFf4v8uvltPqA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [wasm32]
-
-  '@rolldown/binding-wasm32-wasi@1.2.0':
-    resolution: {integrity: sha512-rwdbUL465kisF24WEJLvP3JrEG6E5GRuIHt5wpMwHGERtHe4Wm2CIvtf5gTBgr2tGOHKh5NdKEAFS2VkOPE91g==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [wasm32]
-
   '@rolldown/binding-win32-arm64-msvc@1.0.3':
     resolution: {integrity: sha512-gEdFFEN70A/jxb2svrWsN3aDL7OUtmvlOy+6fa2jxG8K0wQ1ZbdeLGnidov6Yu5/733dI5ySfzFlQ/cb0bSz1g==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
-  '@rolldown/binding-win32-arm64-msvc@1.1.5':
-    resolution: {integrity: sha512-gHv82k63z4qpV5+Q1y/12KrK0ltWBukVDI8nZcbT7Tt/ZlOIVwppazneq0F93oDxTo3IgAMEDIoQh3E2n6mVsw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [win32]
-
-  '@rolldown/binding-win32-arm64-msvc@1.2.0':
-    resolution: {integrity: sha512-+5suHwRiKGmhwyUaNT8a5QbrBvLFh2DbO910TEmGRH1aSxwrCezodvGQnulv4uiWEIv1Kq4ypRsJ5+O+ry1DiA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [win32]
-
   '@rolldown/binding-win32-x64-msvc@1.0.3':
     resolution: {integrity: sha512-eXB7CHuaQdqmJcc3koCNtNPmT/bj2gc999kUFgBxG8Ac0NdgXc4rkCHhqrgrhN3zddvvvrgzj1e90SuSfmyIXA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [win32]
 
-  '@rolldown/binding-win32-x64-msvc@1.1.5':
-    resolution: {integrity: sha512-tTZuDBPw85tEN5PQi1pnEBzDy0Z49HtScLAbD5t6hyeU92A95pRWaSMw1GZZi/RwgSgUIl0xrSlXIT/9QzvYSA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [win32]
-
-  '@rolldown/binding-win32-x64-msvc@1.2.0':
-    resolution: {integrity: sha512-WfFv6/qGufotqBSBzBYwgpCkJBk8Nj7697LL9vTz/XWc67e0r3oewu8iMRwQj3AUL45GVD7wVsPjCsAAtW66Wg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [x64]
-    os: [win32]
-
   '@rolldown/pluginutils@1.0.0-beta.27':
     resolution: {integrity: sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==}
 
@@ -7459,6 +7299,9 @@ packages:
     peerDependencies:
       '@testing-library/dom': '>=7.21.4'
 
+  '@tokens-studio/types@0.5.2':
+    resolution: {integrity: sha512-rzMcZP0bj2E5jaa7Fj0LGgYHysoCrbrxILVbT0ohsCUH5uCHY/u6J7Qw/TE0n6gR9Js/c9ZO9T8mOoz0HdLMbA==}
+
   '@tootallnate/once@3.0.1':
     resolution: {integrity: sha512-VyMVKRrpHTT8PnotUeV8L/mDaMwD5DaAKCFLP73zAqAtvF0FCqky+Ki7BYbFCYQmqFyTe9316Ed5zS70QUR9eg==}
     engines: {node: '>= 10'}
@@ -8470,6 +8313,10 @@ packages:
   '@yarnpkg/lockfile@1.1.0':
     resolution: {integrity: sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==}
 
+  '@zip.js/zip.js@2.8.34':
+    resolution: {integrity: sha512-+6a3lyqq69rpseLbvDPiVIWsZ/HdTGAAD6afFtug6ECPDGttb2dHnPC6cJgdPofYkzL9OvXizegq+DQVfL2rnA==}
+    engines: {bun: '>=0.7.0', deno: '>=1.0.0', node: '>=18.0.0'}
+
   '@zkochan/js-yaml@0.0.7':
     resolution: {integrity: sha512-nrUSn7hzt7J6JWgWGz78ZYI8wj+gdIJdk0Ynjpp8l+trkn58Uqsf6RYrYkEK+3X18EX+TNdtJI0WxAtc+L84SQ==}
     hasBin: true
@@ -8795,6 +8642,9 @@ packages:
   assert@1.5.1:
     resolution: {integrity: sha512-zzw1uCAgLbsKwBfFc8CX78DDg+xZeBksSO3vwVIDDN5i94eOrPsSSyiVhmsSABFDM/OcpE2aagCat9dnWQLG1A==}
 
+  assert@2.1.0:
+    resolution: {integrity: sha512-eLHpSK/Y4nhMJ07gDaAzoX/XAKS8PSaojml3M0DM4JpV1LAi5JOJ/p6H/XWrl8L+DzVEvVCW1z3vWAaB9oTsQw==}
+
   assertion-error@1.1.0:
     resolution: {integrity: sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==}
 
@@ -9747,6 +9597,10 @@ packages:
   commondir@1.0.1:
     resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
 
+  component-emitter@2.0.0:
+    resolution: {integrity: sha512-4m5s3Me2xxlVKG9PkZpQqHQR7bgpnN7joDMJ4yvVkVXngjoITG76IaZmzmywSeRTeTpc6N6r3H3+KyUurV8OYw==}
+    engines: {node: '>=18'}
+
   compress-commons@6.0.2:
     resolution: {integrity: sha512-6FqVXeETqWPoGcfzrXb37E50NP0LXT8kAMu5ooZayhWWdgEY4lBEEcbQNXtkuKQsGduxiIcI4gOTsxTmuq/bSg==}
     engines: {node: '>= 14'}
@@ -12236,9 +12090,16 @@ packages:
     resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
     engines: {node: '>= 0.4'}
 
+  is-mergeable-object@1.1.1:
+    resolution: {integrity: sha512-CPduJfuGg8h8vW74WOxHtHmtQutyQBzR+3MjQ6iDHIYdbOnm1YC7jv43SqCoU8OPGTJD4nibmiryA4kmogbGrA==}
+
   is-module@1.0.0:
     resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==}
 
+  is-nan@1.3.2:
+    resolution: {integrity: sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==}
+    engines: {node: '>= 0.4'}
+
   is-negative-zero@2.0.3:
     resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
     engines: {node: '>= 0.4'}
@@ -14467,6 +14328,12 @@ packages:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
 
+  path-unified@0.2.0:
+    resolution: {integrity: sha512-MNKqvrKbbbb5p7XHXV6ZAsf/1f/yJQa13S/fcX0uua8ew58Tgc6jXV+16JyAbnR/clgCH+euKDxrF2STxMHdrg==}
+
+  path@0.12.7:
+    resolution: {integrity: sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q==}
+
   pathval@1.1.1:
     resolution: {integrity: sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==}
 
@@ -14597,6 +14464,10 @@ packages:
     resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
     engines: {node: '>= 0.4'}
 
+  postcss-calc-ast-parser@0.1.4:
+    resolution: {integrity: sha512-CebpbHc96zgFjGgdQ6BqBy6XIUgRx1xXWCAAk6oke02RZ5nxwo9KQejTg8y7uYEeI9kv8jKQPYjoe6REsY23vw==}
+    engines: {node: '>=6.5'}
+
   postcss-html@1.8.1:
     resolution: {integrity: sha512-OLF6P7qctfAWayOhLpcVnTGqVeJzu2W3WpIYelfz2+JV5oGxfkcEvweN9U4XpeqE0P98dcD9ssusGwlF0TK0uQ==}
     engines: {node: ^12 || >=14}
@@ -14683,6 +14554,9 @@ packages:
     resolution: {integrity: sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==}
     engines: {node: '>=4'}
 
+  postcss-value-parser@3.3.1:
+    resolution: {integrity: sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==}
+
   postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
@@ -15375,6 +15249,12 @@ packages:
     resolution: {integrity: sha512-b3rppTKm9T+PsVCBEOUR46GWI7fdOs00VKZ1+9c1EWDaDMvjQc6tUwuFyIprgGgTcWoVHSKrU8H31ZHA2e0RHA==}
     engines: {node: '>=10'}
 
+  safe-ts-transforms-fork@0.0.1:
+    resolution: {integrity: sha512-8iKn7XPZKPfCLdYFF0HvRF222CR8DGdEz1b3TYljgAftZsCEl+Wya43lbQXytTbiLHg3bvf1lsfBv0kfdNCKzQ==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      style-dictionary: ^5.0.0
+
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
@@ -15962,6 +15842,9 @@ packages:
   stream-splicer@2.0.1:
     resolution: {integrity: sha512-Xizh4/NPuYSyAXyT7g8IvdJ9HJpxIGL9PjyhtywCZvvP0OPIdqyrr4dMikeuvY8xahpdKEBlBTySe583totajg==}
 
+  stream@0.0.3:
+    resolution: {integrity: sha512-aMsbn7VKrl4A2T7QAQQbzgN7NVc70vgF5INQrBXqn4dCXN1zy3L9HGgLO5s7PExmdrzTJ8uR/27aviW8or8/+A==}
+
   streamroller@3.1.5:
     resolution: {integrity: sha512-KFxaM7XT+irxvdqSP1LGLgNWbYN7ay5owZ3r/8t77p+EtSUAfUgtl7be3xtqtOmGUl9K9YPO2ca8133RlTjvKw==}
     engines: {node: '>=8.0'}
@@ -16076,6 +15959,11 @@ packages:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
+  style-dictionary@5.4.2:
+    resolution: {integrity: sha512-Mienm46H28PWnydBiLFN7nR1QXqTO2FA+Aa/W7jcBJV8N0QGDDTfPQbb10TqwRybdY0rvp1G4pjdVM2HklGI0g==}
+    engines: {node: '>=22.0.0'}
+    hasBin: true
+
   style-loader@3.3.4:
     resolution: {integrity: sha512-0WqXzrsMTyb8yjZJHDqwmnwRJvhALK9LfRtRc6B4UTWe8AijYLZYZ9thuJTZc2VfQWINADW/j+LiJnfy2RoC1w==}
     engines: {node: '>= 12.13.0'}
@@ -16417,6 +16305,9 @@ packages:
   tiny-invariant@1.3.3:
     resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
 
+  tinycolor2@1.6.0:
+    resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==}
+
   tinyglobby@0.2.14:
     resolution: {integrity: sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==}
     engines: {node: '>=12.0.0'}
@@ -17944,13 +17835,13 @@ snapshots:
       - webpack-cli
       - yaml
 
-  '@angular-devkit/build-angular@22.1.2(258b0df82f598bf0cbd063448ecf32b5)':
+  '@angular-devkit/build-angular@22.1.2(9ab32ed578a68caf92174a202d695664)':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@angular-devkit/architect': 0.2201.2(chokidar@5.0.0)
       '@angular-devkit/build-webpack': 0.2201.2(chokidar@5.0.0)(webpack-dev-server@5.2.6(tslib@2.8.1)(webpack@5.109.2(@swc/core@1.15.30(@swc/helpers@0.5.21))(esbuild@0.28.1)(postcss@8.5.23)))(webpack@5.109.2(@swc/core@1.15.30(@swc/helpers@0.5.21))(esbuild@0.28.1)(postcss@8.5.23))
       '@angular-devkit/core': 22.1.2(chokidar@5.0.0)
-      '@angular/build': 22.1.2(f076a2752836734f19dd852b068a7651)
+      '@angular/build': 22.1.2(9f8834ba6c8fdff652d4ac7537fafa50)
       '@angular/compiler-cli': 22.1.0(@angular/compiler@22.1.0)(typescript@6.0.3)
       '@babel/core': 8.0.1
       '@babel/generator': 8.0.0
@@ -17970,7 +17861,7 @@ snapshots:
       copy-webpack-plugin: 14.0.0(webpack@5.109.2(@swc/core@1.15.30(@swc/helpers@0.5.21))(esbuild@0.28.1)(postcss@8.5.23))
       css-loader: 7.1.4(webpack@5.109.2(@swc/core@1.15.30(@swc/helpers@0.5.21))(esbuild@0.28.1)(postcss@8.5.23))
       esbuild-wasm: 0.28.1
-      http-proxy-middleware: 4.2.0
+      http-proxy-middleware: 4.2.0(supports-color@7.2.0)
       istanbul-lib-instrument: 6.0.3
       jsonc-parser: 3.3.1
       karma-source-map-support: 1.4.0
@@ -18287,7 +18178,7 @@ snapshots:
       - tsx
       - yaml
 
-  '@angular/build@22.1.2(f076a2752836734f19dd852b068a7651)':
+  '@angular/build@22.1.2(9f8834ba6c8fdff652d4ac7537fafa50)':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@angular-devkit/architect': 0.2201.2(chokidar@5.0.0)
@@ -18301,7 +18192,7 @@ snapshots:
       beasties: 0.4.3
       browserslist: 4.28.7
       esbuild: 0.28.1
-      https-proxy-agent: 9.1.0
+      https-proxy-agent: 9.1.0(supports-color@7.2.0)
       jsonc-parser: 3.3.1
       listr2: 10.2.2
       magic-string: 1.0.0
@@ -20860,6 +20751,36 @@ snapshots:
 
   '@bufbuild/protobuf@2.13.0': {}
 
+  '@bundled-es-modules/deepmerge@4.3.2':
+    dependencies:
+      deepmerge: 4.3.1
+
+  '@bundled-es-modules/glob@13.0.6':
+    dependencies:
+      buffer: 6.0.3
+      events: 3.3.0
+      glob: 13.0.6
+      path: 0.12.7
+      stream: 0.0.3
+      string_decoder: 1.3.0
+      url: 0.11.4
+
+  '@bundled-es-modules/memfs@4.17.0(tslib@2.8.1)':
+    dependencies:
+      assert: 2.1.0
+      buffer: 6.0.3
+      events: 3.3.0
+      memfs: 4.57.2(tslib@2.8.1)
+      path: 0.12.7
+      stream: 0.0.3
+      util: 0.12.5
+    transitivePeerDependencies:
+      - tslib
+
+  '@bundled-es-modules/postcss-calc-ast-parser@0.1.6':
+    dependencies:
+      postcss-calc-ast-parser: 0.1.4
+
   '@cacheable/memory@2.0.8':
     dependencies:
       '@cacheable/utils': 2.4.1
@@ -20938,6 +20859,8 @@ snapshots:
       lodash: 4.18.1
       pinkie-promise: 2.0.1
 
+  '@devexpress/design-tokens-internal@262.6.0': {}
+
   '@devexpress/utils@2.1.1':
     dependencies:
       tslib: 2.3.1
@@ -20961,12 +20884,6 @@ snapshots:
       '@emnapi/wasi-threads': 1.2.1
       tslib: 2.8.1
 
-  '@emnapi/core@1.11.1':
-    dependencies:
-      '@emnapi/wasi-threads': 1.2.2
-      tslib: 2.8.1
-    optional: true
-
   '@emnapi/core@1.11.2':
     dependencies:
       '@emnapi/wasi-threads': 1.2.2
@@ -20982,11 +20899,6 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@emnapi/runtime@1.11.1':
-    dependencies:
-      tslib: 2.8.1
-    optional: true
-
   '@emnapi/runtime@1.11.2':
     dependencies:
       tslib: 2.8.1
@@ -22909,13 +22821,6 @@ snapshots:
       '@tybys/wasm-util': 0.10.2
     optional: true
 
-  '@napi-rs/wasm-runtime@1.2.2(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)':
-    dependencies:
-      '@emnapi/core': 1.11.1
-      '@emnapi/runtime': 1.11.1
-      '@tybys/wasm-util': 0.10.3
-    optional: true
-
   '@napi-rs/wasm-runtime@1.2.2(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)':
     dependencies:
       '@emnapi/core': 1.11.2
@@ -24047,12 +23952,6 @@ snapshots:
   '@rolldown/binding-android-arm64@1.0.3':
     optional: true
 
-  '@rolldown/binding-android-arm64@1.1.5':
-    optional: true
-
-  '@rolldown/binding-android-arm64@1.2.0':
-    optional: true
-
   '@rolldown/binding-darwin-arm64@1.0.3':
     optional: true
 
@@ -24065,93 +23964,33 @@ snapshots:
   '@rolldown/binding-darwin-x64@1.0.3':
     optional: true
 
-  '@rolldown/binding-darwin-x64@1.1.5':
-    optional: true
-
-  '@rolldown/binding-darwin-x64@1.2.0':
-    optional: true
-
   '@rolldown/binding-freebsd-x64@1.0.3':
     optional: true
 
-  '@rolldown/binding-freebsd-x64@1.1.5':
-    optional: true
-
-  '@rolldown/binding-freebsd-x64@1.2.0':
-    optional: true
-
   '@rolldown/binding-linux-arm-gnueabihf@1.0.3':
     optional: true
 
-  '@rolldown/binding-linux-arm-gnueabihf@1.1.5':
-    optional: true
-
-  '@rolldown/binding-linux-arm-gnueabihf@1.2.0':
-    optional: true
-
   '@rolldown/binding-linux-arm64-gnu@1.0.3':
     optional: true
 
-  '@rolldown/binding-linux-arm64-gnu@1.1.5':
-    optional: true
-
-  '@rolldown/binding-linux-arm64-gnu@1.2.0':
-    optional: true
-
   '@rolldown/binding-linux-arm64-musl@1.0.3':
     optional: true
 
-  '@rolldown/binding-linux-arm64-musl@1.1.5':
-    optional: true
-
-  '@rolldown/binding-linux-arm64-musl@1.2.0':
-    optional: true
-
   '@rolldown/binding-linux-ppc64-gnu@1.0.3':
     optional: true
 
-  '@rolldown/binding-linux-ppc64-gnu@1.1.5':
-    optional: true
-
-  '@rolldown/binding-linux-ppc64-gnu@1.2.0':
-    optional: true
-
   '@rolldown/binding-linux-s390x-gnu@1.0.3':
     optional: true
 
-  '@rolldown/binding-linux-s390x-gnu@1.1.5':
-    optional: true
-
-  '@rolldown/binding-linux-s390x-gnu@1.2.0':
-    optional: true
-
   '@rolldown/binding-linux-x64-gnu@1.0.3':
     optional: true
 
-  '@rolldown/binding-linux-x64-gnu@1.1.5':
-    optional: true
-
-  '@rolldown/binding-linux-x64-gnu@1.2.0':
-    optional: true
-
   '@rolldown/binding-linux-x64-musl@1.0.3':
     optional: true
 
-  '@rolldown/binding-linux-x64-musl@1.1.5':
-    optional: true
-
-  '@rolldown/binding-linux-x64-musl@1.2.0':
-    optional: true
-
   '@rolldown/binding-openharmony-arm64@1.0.3':
     optional: true
 
-  '@rolldown/binding-openharmony-arm64@1.1.5':
-    optional: true
-
-  '@rolldown/binding-openharmony-arm64@1.2.0':
-    optional: true
-
   '@rolldown/binding-wasm32-wasi@1.0.3':
     dependencies:
       '@emnapi/core': 1.10.0
@@ -24159,38 +23998,12 @@ snapshots:
       '@napi-rs/wasm-runtime': 1.1.5(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
     optional: true
 
-  '@rolldown/binding-wasm32-wasi@1.1.5':
-    dependencies:
-      '@emnapi/core': 1.11.1
-      '@emnapi/runtime': 1.11.1
-      '@napi-rs/wasm-runtime': 1.2.2(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)
-    optional: true
-
-  '@rolldown/binding-wasm32-wasi@1.2.0':
-    dependencies:
-      '@emnapi/core': 1.11.2
-      '@emnapi/runtime': 1.11.2
-      '@napi-rs/wasm-runtime': 1.2.2(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)
-    optional: true
-
   '@rolldown/binding-win32-arm64-msvc@1.0.3':
     optional: true
 
-  '@rolldown/binding-win32-arm64-msvc@1.1.5':
-    optional: true
-
-  '@rolldown/binding-win32-arm64-msvc@1.2.0':
-    optional: true
-
   '@rolldown/binding-win32-x64-msvc@1.0.3':
     optional: true
 
-  '@rolldown/binding-win32-x64-msvc@1.1.5':
-    optional: true
-
-  '@rolldown/binding-win32-x64-msvc@1.2.0':
-    optional: true
-
   '@rolldown/pluginutils@1.0.0-beta.27': {}
 
   '@rolldown/pluginutils@1.0.1': {}
@@ -24766,6 +24579,8 @@ snapshots:
     dependencies:
       '@testing-library/dom': 10.4.1
 
+  '@tokens-studio/types@0.5.2': {}
+
   '@tootallnate/once@3.0.1': {}
 
   '@ts-morph/common@0.22.0':
@@ -26396,6 +26211,8 @@ snapshots:
 
   '@yarnpkg/lockfile@1.1.0': {}
 
+  '@zip.js/zip.js@2.8.34': {}
+
   '@zkochan/js-yaml@0.0.7':
     dependencies:
       argparse: 2.0.1
@@ -26752,6 +26569,14 @@ snapshots:
       object.assign: 4.1.7
       util: 0.10.4
 
+  assert@2.1.0:
+    dependencies:
+      call-bind: 1.0.9
+      is-nan: 1.3.2
+      object-is: 1.1.6
+      object.assign: 4.1.7
+      util: 0.12.5
+
   assertion-error@1.1.0: {}
 
   assertion-error@2.0.1: {}
@@ -27975,6 +27800,8 @@ snapshots:
 
   commondir@1.0.1: {}
 
+  component-emitter@2.0.0: {}
+
   compress-commons@6.0.2:
     dependencies:
       crc-32: 1.2.2
@@ -31174,7 +31001,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  http-proxy-middleware@4.2.0:
+  http-proxy-middleware@4.2.0(supports-color@7.2.0):
     dependencies:
       debug: 4.4.3(supports-color@7.2.0)
       httpxy: 0.5.5
@@ -31229,7 +31056,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  https-proxy-agent@9.1.0:
+  https-proxy-agent@9.1.0(supports-color@7.2.0):
     dependencies:
       agent-base: 9.0.0
       debug: 4.4.3(supports-color@7.2.0)
@@ -31536,8 +31363,15 @@ snapshots:
 
   is-map@2.0.3: {}
 
+  is-mergeable-object@1.1.1: {}
+
   is-module@1.0.0: {}
 
+  is-nan@1.3.2:
+    dependencies:
+      call-bind: 1.0.9
+      define-properties: 1.2.1
+
   is-negative-zero@2.0.3: {}
 
   is-network-error@1.3.2: {}
@@ -34730,7 +34564,7 @@ snapshots:
       postcss: 8.5.23
       rollup-plugin-dts: 6.4.1(rollup@4.59.0)(typescript@5.8.3)
       rxjs: 7.8.2
-      sass: 1.99.0
+      sass: 1.101.0
       tinyglobby: 0.2.17
       tslib: 2.8.1
       typescript: 5.8.3
@@ -35516,6 +35350,13 @@ snapshots:
 
   path-type@4.0.0: {}
 
+  path-unified@0.2.0: {}
+
+  path@0.12.7:
+    dependencies:
+      process: 0.11.10
+      util: 0.10.4
+
   pathval@1.1.1: {}
 
   pathval@2.0.1: {}
@@ -35623,6 +35464,10 @@ snapshots:
 
   possible-typed-array-names@1.1.0: {}
 
+  postcss-calc-ast-parser@0.1.4:
+    dependencies:
+      postcss-value-parser: 3.3.1
+
   postcss-html@1.8.1:
     dependencies:
       htmlparser2: 8.0.2
@@ -35699,6 +35544,8 @@ snapshots:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
+  postcss-value-parser@3.3.1: {}
+
   postcss-value-parser@4.2.0: {}
 
   postcss-values-parser@6.0.2(postcss@8.5.23):
@@ -36403,42 +36250,14 @@ snapshots:
       '@oxc-project/types': 0.139.0
       '@rolldown/pluginutils': 1.0.1
     optionalDependencies:
-      '@rolldown/binding-android-arm64': 1.1.5
       '@rolldown/binding-darwin-arm64': 1.1.5
-      '@rolldown/binding-darwin-x64': 1.1.5
-      '@rolldown/binding-freebsd-x64': 1.1.5
-      '@rolldown/binding-linux-arm-gnueabihf': 1.1.5
-      '@rolldown/binding-linux-arm64-gnu': 1.1.5
-      '@rolldown/binding-linux-arm64-musl': 1.1.5
-      '@rolldown/binding-linux-ppc64-gnu': 1.1.5
-      '@rolldown/binding-linux-s390x-gnu': 1.1.5
-      '@rolldown/binding-linux-x64-gnu': 1.1.5
-      '@rolldown/binding-linux-x64-musl': 1.1.5
-      '@rolldown/binding-openharmony-arm64': 1.1.5
-      '@rolldown/binding-wasm32-wasi': 1.1.5
-      '@rolldown/binding-win32-arm64-msvc': 1.1.5
-      '@rolldown/binding-win32-x64-msvc': 1.1.5
 
   rolldown@1.2.0:
     dependencies:
       '@oxc-project/types': 0.140.0
       '@rolldown/pluginutils': 1.0.1
     optionalDependencies:
-      '@rolldown/binding-android-arm64': 1.2.0
       '@rolldown/binding-darwin-arm64': 1.2.0
-      '@rolldown/binding-darwin-x64': 1.2.0
-      '@rolldown/binding-freebsd-x64': 1.2.0
-      '@rolldown/binding-linux-arm-gnueabihf': 1.2.0
-      '@rolldown/binding-linux-arm64-gnu': 1.2.0
-      '@rolldown/binding-linux-arm64-musl': 1.2.0
-      '@rolldown/binding-linux-ppc64-gnu': 1.2.0
-      '@rolldown/binding-linux-s390x-gnu': 1.2.0
-      '@rolldown/binding-linux-x64-gnu': 1.2.0
-      '@rolldown/binding-linux-x64-musl': 1.2.0
-      '@rolldown/binding-openharmony-arm64': 1.2.0
-      '@rolldown/binding-wasm32-wasi': 1.2.0
-      '@rolldown/binding-win32-arm64-msvc': 1.2.0
-      '@rolldown/binding-win32-x64-msvc': 1.2.0
 
   rollup-plugin-dts@6.4.1(rollup@4.59.0)(typescript@4.9.5):
     dependencies:
@@ -36558,6 +36377,15 @@ snapshots:
 
   safe-stable-stringify@2.5.0: {}
 
+  safe-ts-transforms-fork@0.0.1(style-dictionary@5.4.2(tslib@2.8.1)):
+    dependencies:
+      '@bundled-es-modules/deepmerge': 4.3.2
+      '@bundled-es-modules/postcss-calc-ast-parser': 0.1.6
+      '@tokens-studio/types': 0.5.2
+      colorjs.io: 0.5.2
+      is-mergeable-object: 1.1.1
+      style-dictionary: 5.4.2(tslib@2.8.1)
+
   safer-buffer@2.1.2: {}
 
   sanitize-filename@1.6.4:
@@ -37225,6 +37053,10 @@ snapshots:
       inherits: 2.0.4
       readable-stream: 2.3.8
 
+  stream@0.0.3:
+    dependencies:
+      component-emitter: 2.0.0
+
   streamroller@3.1.5:
     dependencies:
       date-format: 4.0.14
@@ -37375,6 +37207,24 @@ snapshots:
 
   strip-json-comments@3.1.1: {}
 
+  style-dictionary@5.4.2(tslib@2.8.1):
+    dependencies:
+      '@bundled-es-modules/deepmerge': 4.3.2
+      '@bundled-es-modules/glob': 13.0.6
+      '@bundled-es-modules/memfs': 4.17.0(tslib@2.8.1)
+      '@zip.js/zip.js': 2.8.34
+      chalk: 5.6.2
+      change-case: 5.4.4
+      colorjs.io: 0.5.2
+      commander: 12.1.0
+      is-plain-obj: 4.1.0
+      json5: 2.2.3
+      path-unified: 0.2.0
+      prettier: 3.8.1
+      tinycolor2: 1.6.0
+    transitivePeerDependencies:
+      - tslib
+
   style-loader@3.3.4(webpack@5.105.4(@swc/core@1.15.30(@swc/helpers@0.5.21))):
     dependencies:
       webpack: 5.105.4(@swc/core@1.15.30(@swc/helpers@0.5.21))
@@ -38192,6 +38042,8 @@ snapshots:
 
   tiny-invariant@1.3.3: {}
 
+  tinycolor2@1.6.0: {}
+
   tinyglobby@0.2.14:
     dependencies:
       fdir: 6.5.0(picomatch@4.0.4)