diff --git a/.github/renovate.json b/.github/renovate.json
index 7d602be924f7..72295348ece5 100644
--- a/.github/renovate.json
+++ b/.github/renovate.json
@@ -122,6 +122,14 @@
             "matchPackageNames": [
                 "*"
             ]
+        },
+        {
+            "matchPackageNames": [
+                "@devexpress/design-tokens-internal"
+            ],
+            "automerge": false,
+            "dependencyDashboardApproval": true,
+            "minimumReleaseAge": null
         }
     ],
     "lockFileMaintenance": {
diff --git a/.github/workflows/styles.yml b/.github/workflows/styles.yml
index a60d0b0f753b..d59b3f5955d4 100644
--- a/.github/workflows/styles.yml
+++ b/.github/workflows/styles.yml
@@ -95,6 +95,9 @@ jobs:
     - name: Run tests
       run: pnpm exec nx test devextreme-scss
 
+    - name: Check naming registries
+      run: pnpm exec nx naming:check devextreme-scss
+
   notify:
     runs-on: ubuntu-latest
     name: Send notifications
diff --git a/.github/workflows/testcafe_tests.yml b/.github/workflows/testcafe_tests.yml
index 432134804233..4237c0b403cf 100644
--- a/.github/workflows/testcafe_tests.yml
+++ b/.github/workflows/testcafe_tests.yml
@@ -248,6 +248,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 +260,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/visual-tests-demos.yml b/.github/workflows/visual-tests-demos.yml
index 6bf84c43dd7c..7603db73dad5 100644
--- a/.github/workflows/visual-tests-demos.yml
+++ b/.github/workflows/visual-tests-demos.yml
@@ -21,11 +21,148 @@ jobs:
     runs-on: ubuntu-slim
     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
+    if: github.event_name == 'pull_request' && needs.check-should-run.outputs.should-run == 'true'
+    name: Get changed demos
+    timeout-minutes: 5
+    outputs:
+      has-changed-demos: ${{ steps.check-changes.outputs.has-changed-demos }}
+
+    steps:
+      - name: Get sources
+        uses: actions/checkout@v6
+
+      - name: Get changed files
+        uses: DevExpress/github-actions/get-changed-files@get-changed-files
+        with:
+          gh-token: ${{ secrets.GITHUB_TOKEN }}
+          paths: 'apps/demos/Demos/**/*'
+          output: apps/demos/changed-files.json
+
+      - name: Display changed files
+        id: check-changes
+        run: |
+          HAS_CHANGED="false"
+          if [ -f "apps/demos/changed-files.json" ]; then
+            DEMO_COUNT=$(jq length apps/demos/changed-files.json)
+            echo "Found changed-files.json"
+            echo "Content of changed-files.json:"
+            cat apps/demos/changed-files.json
+            echo "Number of changed files: $DEMO_COUNT"
+            if [ "$DEMO_COUNT" -gt 0 ]; then
+              HAS_CHANGED="true"
+            fi
+          else
+            echo "changed-files.json not found"
+          fi
+          echo "has-changed-demos=${HAS_CHANGED}" >> $GITHUB_OUTPUT
+
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v7
+        with:
+          name: changed-demos
+          path: apps/demos/changed-files.json
+          retention-days: 1
+
+  determine-framework-tests-scope:
+    runs-on: ubuntu-slim
+    name: Determine scope for framework tests
+    needs: [check-should-run, get-changes]
+    if: |
+      !cancelled() &&
+      needs.check-should-run.outputs.should-run == 'true' &&
+      (needs.get-changes.result == 'success' || needs.get-changes.result == 'skipped')
+    outputs:
+      framework-tests-scope: ${{ steps.determine.outputs.framework-tests-scope }}
+
+    steps:
+      - name: Determine framework tests scope
+        id: determine
+        run: |
+          if [ "${{ github.event_name }}" != "pull_request" ] || [ "${{ contains(github.event.pull_request.labels.*.name, 'force all tests') }}" = "true" ]; then
+            echo "Framework tests scope: all demos"
+            echo "framework-tests-scope=all" >> $GITHUB_OUTPUT
+          elif [ "${{ needs.get-changes.outputs.has-changed-demos }}" = "true" ]; then
+            echo "Framework tests scope: changed demos"
+            echo "framework-tests-scope=changed" >> $GITHUB_OUTPUT
+          else
+            echo "Framework tests NOT needed"
+            echo "framework-tests-scope=none" >> $GITHUB_OUTPUT
+          fi
+
+  determine-jquery-test-matrix:
+    runs-on: ubuntu-slim
+    name: Determine jQuery test matrix
+    needs: [check-should-run, determine-framework-tests-scope]
+    if: |
+      !cancelled() &&
+      needs.check-should-run.outputs.should-run == 'true' &&
+      needs.determine-framework-tests-scope.result == 'success'
+    outputs:
+      matrix: ${{ steps.matrix.outputs.matrix }}
+
+    steps:
+      - name: Build matrix
+        id: matrix
+        run: |
+          base_matrix=$(cat <<'JSON'
+          [
+            { "STRATEGY": "screenshots", "THEME": "material.blue.light", "CONSTEL": "jquery(1/3)" },
+            { "STRATEGY": "screenshots", "THEME": "material.blue.light", "CONSTEL": "jquery(2/3)" },
+            { "STRATEGY": "screenshots", "THEME": "material.blue.light", "CONSTEL": "jquery(3/3)" },
+            { "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-next.blue.light", "CONSTEL": "jquery" }
+          ]
+          JSON
+          )
+
+          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-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 }}" \
+            --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
+
   build-devextreme:
     runs-on: ${{ github.event_name == 'merge_group' && 'devextreme-shr2-ondemand' || 'devextreme-shr2' }}
     name: Build DevExtreme
@@ -662,7 +799,7 @@ jobs:
           angular(9/10),
           angular(10/10),
         ]
-        THEME: ['fluent.blue.light']
+        THEME: ['fluent.blue.light', 'fluent-next.blue.light']
 
     runs-on: ${{ github.event_name == 'merge_group' && 'devextreme-shr2-ondemand' || 'devextreme-shr2' }}
     name: ${{ matrix.CONSTEL }}-screenshots-${{ matrix.THEME }}
@@ -819,6 +956,172 @@ jobs:
         path: ${{ github.workspace }}/apps/demos/testing/artifacts/compared-screenshots/**/*
         if-no-files-found: ignore
 
+  testcafe-frameworks-changed:
+    needs: [check-should-run, determine-framework-tests-scope, build-demos, build-vendor-bundles]
+    if: |
+      !cancelled() &&
+      needs.check-should-run.outputs.should-run == 'true' &&
+      needs.determine-framework-tests-scope.result == 'success' &&
+      needs.determine-framework-tests-scope.outputs.framework-tests-scope == 'changed' &&
+      needs.build-demos.result == 'success'
+    strategy:
+      fail-fast: false
+      matrix:
+        CONSTEL: [react, vue, angular]
+        THEME: ['fluent.blue.light', 'fluent-next.blue.light']
+
+    runs-on: ${{ github.event_name == 'merge_group' && 'devextreme-shr2-ondemand' || 'devextreme-shr2' }}
+    name: ${{ matrix.CONSTEL }}-screenshots-${{ matrix.THEME }}
+    timeout-minutes: 60
+
+    steps:
+      - name: Get sources
+        uses: actions/checkout@v6
+
+      - name: Setup Chrome
+        uses: ./.github/actions/setup-chrome
+        with:
+          chrome-version: '150.0.7871.181'
+
+      - name: Use Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version-file: '.node-version'
+
+      - name: Download devextreme sources
+        uses: actions/download-artifact@v8
+        with:
+          name: devextreme-sources
+
+      - name: Download changed demos
+        uses: actions/download-artifact@v8
+        with:
+          name: changed-demos
+          path: apps/demos
+        continue-on-error: true
+
+      - uses: pnpm/action-setup@v6
+        with:
+          run_install: false
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache/restore@v5
+        name: Restore pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-cache-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-cache
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Install tgz
+        working-directory: apps/demos
+        run: pnpm add --ignore-workspace --allow-build=core-js --allow-build=inferno devextreme-aspnet-data@5.1.0 devextreme-aspnet-data-nojquery@5.1.0 ../../devextreme-installer.tgz ../../devextreme-dist-installer.tgz ../../devextreme-react-installer.tgz ../../devextreme-vue-installer.tgz ../../devextreme-angular-installer.tgz && rm -f pnpm-workspace.yaml pnpm-lock.yaml
+
+      - name: Download demo bundles (React)
+        if: matrix.CONSTEL == 'react'
+        uses: actions/download-artifact@v8
+        with:
+          name: devextreme-bundles-React
+          path: apps/demos/.demo-bundles/react
+
+      - name: Download demo bundles (Vue)
+        if: matrix.CONSTEL == 'vue'
+        uses: actions/download-artifact@v8
+        with:
+          name: devextreme-bundles-Vue
+          path: apps/demos/.demo-bundles/vue
+
+      # build-demos shards Angular 3 ways regardless of how it's tested here.
+      - name: Download demo bundles (Angular shard 1)
+        if: matrix.CONSTEL == 'angular'
+        uses: actions/download-artifact@v8
+        with:
+          name: devextreme-bundles-Angular-shard1
+          path: apps/demos/.demo-bundles/angular-shard1
+
+      - name: Download demo bundles (Angular shard 2)
+        if: matrix.CONSTEL == 'angular'
+        uses: actions/download-artifact@v8
+        with:
+          name: devextreme-bundles-Angular-shard2
+          path: apps/demos/.demo-bundles/angular-shard2
+
+      - name: Download demo bundles (Angular shard 3)
+        if: matrix.CONSTEL == 'angular'
+        uses: actions/download-artifact@v8
+        with:
+          name: devextreme-bundles-Angular-shard3
+          path: apps/demos/.demo-bundles/angular-shard3
+
+      - name: Download changes artifacts
+        uses: actions/download-artifact@v8
+        with:
+          name: changed-demos
+          path: apps/demos
+
+      # No-op for angular demos (no manifest — see build-vendor-bundles.js).
+      - name: Download vendor bundles
+        uses: actions/download-artifact@v8
+        with:
+          name: devextreme-vendor-bundles
+          path: apps/demos/bundles/vendor
+
+      - name: Unpack demo bundles
+        run: |
+          shopt -s nullglob
+          archives=(apps/demos/.demo-bundles/*/demo-bundles.tgz)
+          if [ ${#archives[@]} -eq 0 ]; then
+            echo "No demo bundle archives downloaded for constellation '${{ matrix.CONSTEL }}'" >&2
+            exit 1
+          fi
+          for archive in "${archives[@]}"; do
+            tar -xzf "$archive" -C apps/demos
+          done
+          rm -rf apps/demos/.demo-bundles
+          echo "Unpacked $(find apps/demos/Demos -name 'bundle.js' | wc -l) demo bundle(s)"
+
+      - name: Run Web Server
+        run: |
+          python -m http.server 8080 &
+          python -m http.server 8081 &
+          python -m http.server 8082 &
+          python -m http.server 8083 &
+
+      - name: Run TestCafe tests
+        shell: bash
+        working-directory: apps/demos
+        env:
+          CHANGEDFILEINFOSPATH: changed-files.json
+          BROWSERS: chrome:headless --window-size=1200,800 --disable-gpu --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
+          # DEBUG: hammerhead:*,testcafe:*
+          CONCURRENCY: 1
+          CONSTEL: ${{ matrix.CONSTEL }}
+          THEME: ${{ matrix.THEME }}
+          # DISABLE_DEMO_TEST_SETTINGS: all # Uncomment to ignore all the visualtestrc.json settings
+          # DISABLE_DEMO_TEST_SETTINGS: ignore # Uncomment to ignore the `ignore` field
+          # DISABLE_DEMO_TEST_SETTINGS: comparison-options # Uncomment to ignore the `comparison-options` field
+          CI_ENV: true # The `ignore` field in the visualtestrc.json should be disabled when running test locally
+        run: pnpm exec nx test-testcafe
+
+      - name: Sanitize job name
+        if: ${{ failure() }}
+        run: echo "JOB_NAME=$(echo "${{ matrix.CONSTEL }}-${{ matrix.THEME }}" | tr '/' '-')" >> $GITHUB_ENV
+
+      - name: Copy screenshots artifacts
+        if: ${{ failure() }}
+        uses: actions/upload-artifact@v7
+        with:
+          name: screenshots-${{ env.JOB_NAME }}
+          path: ${{ github.workspace }}/apps/demos/testing/artifacts/compared-screenshots/**/*
+          if-no-files-found: ignore
+
   merge-artifacts:
     runs-on: ubuntu-latest
     needs: [testcafe-jquery, testcafe-frameworks-all]
diff --git a/apps/demos/Demos/Accordion/Overview/Angular/app/app.component.css b/apps/demos/Demos/Accordion/Overview/Angular/app/app.component.css
index b0a2fbb6fd75..5b2880e648c9 100644
--- a/apps/demos/Demos/Accordion/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/Accordion/Overview/Angular/app/app.component.css
@@ -36,7 +36,7 @@
   right: 0;
   width: 340px;
   top: 0;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .options > .caption {
diff --git a/apps/demos/Demos/Accordion/Overview/React/styles.css b/apps/demos/Demos/Accordion/Overview/React/styles.css
index 9ffb8961b7e2..cd5a3086e6bf 100644
--- a/apps/demos/Demos/Accordion/Overview/React/styles.css
+++ b/apps/demos/Demos/Accordion/Overview/React/styles.css
@@ -36,7 +36,7 @@
   right: 0;
   width: 340px;
   top: 0;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .options > .caption {
diff --git a/apps/demos/Demos/Accordion/Overview/ReactJs/styles.css b/apps/demos/Demos/Accordion/Overview/ReactJs/styles.css
index 9ffb8961b7e2..cd5a3086e6bf 100644
--- a/apps/demos/Demos/Accordion/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/Accordion/Overview/ReactJs/styles.css
@@ -36,7 +36,7 @@
   right: 0;
   width: 340px;
   top: 0;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .options > .caption {
diff --git a/apps/demos/Demos/Accordion/Overview/Vue/App.vue b/apps/demos/Demos/Accordion/Overview/Vue/App.vue
index 289cc95a8518..a60097b2f72c 100644
--- a/apps/demos/Demos/Accordion/Overview/Vue/App.vue
+++ b/apps/demos/Demos/Accordion/Overview/Vue/App.vue
@@ -123,7 +123,7 @@ const selectedCompanies = computed({
   right: 0;
   width: 340px;
   top: 0;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .options > .caption {
diff --git a/apps/demos/Demos/Accordion/Overview/jQuery/styles.css b/apps/demos/Demos/Accordion/Overview/jQuery/styles.css
index 9ffb8961b7e2..cd5a3086e6bf 100644
--- a/apps/demos/Demos/Accordion/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/Accordion/Overview/jQuery/styles.css
@@ -36,7 +36,7 @@
   right: 0;
   width: 340px;
   top: 0;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .options > .caption {
diff --git a/apps/demos/Demos/ActionSheet/Basics/Angular/app/app.component.css b/apps/demos/Demos/ActionSheet/Basics/Angular/app/app.component.css
index a3543e15c3b3..6813b1691acf 100644
--- a/apps/demos/Demos/ActionSheet/Basics/Angular/app/app.component.css
+++ b/apps/demos/Demos/ActionSheet/Basics/Angular/app/app.component.css
@@ -6,7 +6,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   left: 0;
   position: absolute;
   bottom: 0;
diff --git a/apps/demos/Demos/ActionSheet/Basics/React/styles.css b/apps/demos/Demos/ActionSheet/Basics/React/styles.css
index a3543e15c3b3..6813b1691acf 100644
--- a/apps/demos/Demos/ActionSheet/Basics/React/styles.css
+++ b/apps/demos/Demos/ActionSheet/Basics/React/styles.css
@@ -6,7 +6,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   left: 0;
   position: absolute;
   bottom: 0;
diff --git a/apps/demos/Demos/ActionSheet/Basics/ReactJs/styles.css b/apps/demos/Demos/ActionSheet/Basics/ReactJs/styles.css
index a3543e15c3b3..6813b1691acf 100644
--- a/apps/demos/Demos/ActionSheet/Basics/ReactJs/styles.css
+++ b/apps/demos/Demos/ActionSheet/Basics/ReactJs/styles.css
@@ -6,7 +6,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   left: 0;
   position: absolute;
   bottom: 0;
diff --git a/apps/demos/Demos/ActionSheet/Basics/Vue/styles.css b/apps/demos/Demos/ActionSheet/Basics/Vue/styles.css
index a3543e15c3b3..6813b1691acf 100644
--- a/apps/demos/Demos/ActionSheet/Basics/Vue/styles.css
+++ b/apps/demos/Demos/ActionSheet/Basics/Vue/styles.css
@@ -6,7 +6,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   left: 0;
   position: absolute;
   bottom: 0;
diff --git a/apps/demos/Demos/ActionSheet/Basics/jQuery/styles.css b/apps/demos/Demos/ActionSheet/Basics/jQuery/styles.css
index a3543e15c3b3..6813b1691acf 100644
--- a/apps/demos/Demos/ActionSheet/Basics/jQuery/styles.css
+++ b/apps/demos/Demos/ActionSheet/Basics/jQuery/styles.css
@@ -6,7 +6,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   left: 0;
   position: absolute;
   bottom: 0;
diff --git a/apps/demos/Demos/Box/Overview/Angular/app/app.component.css b/apps/demos/Demos/Box/Overview/Angular/app/app.component.css
index edd7b423678a..35c3482011b2 100644
--- a/apps/demos/Demos/Box/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/Box/Overview/Angular/app/app.component.css
@@ -6,22 +6,22 @@
 }
 
 .demo-light {
-  background: rgba(245, 229, 166, 0.5);
+  background: var(--dxds-color-bg-yellow-subtle, rgba(245, 229, 166, 0.5));
 }
 
 .demo-dark {
-  background: rgba(148, 215, 199, 0.5);
+  background: var(--dxds-color-bg-green-subtle, rgba(148, 215, 199, 0.5));
 }
 
 .demo-dark.header {
-  background: rgba(243, 158, 108, 0.5);
+  background: var(--dxds-color-bg-red-subtle, rgba(243, 158, 108, 0.5));
 }
 
 .demo-dark.footer {
-  background: rgba(123, 155, 207, 0.5);
+  background: var(--dxds-color-bg-blue-subtle, rgba(123, 155, 207, 0.5));
 }
 
 .small {
   height: 50px;
-  border: 1px solid lightgray;
+  border: 1px solid var(--dxds-color-border, lightgray);
 }
diff --git a/apps/demos/Demos/Box/Overview/React/styles.css b/apps/demos/Demos/Box/Overview/React/styles.css
index edd7b423678a..35c3482011b2 100644
--- a/apps/demos/Demos/Box/Overview/React/styles.css
+++ b/apps/demos/Demos/Box/Overview/React/styles.css
@@ -6,22 +6,22 @@
 }
 
 .demo-light {
-  background: rgba(245, 229, 166, 0.5);
+  background: var(--dxds-color-bg-yellow-subtle, rgba(245, 229, 166, 0.5));
 }
 
 .demo-dark {
-  background: rgba(148, 215, 199, 0.5);
+  background: var(--dxds-color-bg-green-subtle, rgba(148, 215, 199, 0.5));
 }
 
 .demo-dark.header {
-  background: rgba(243, 158, 108, 0.5);
+  background: var(--dxds-color-bg-red-subtle, rgba(243, 158, 108, 0.5));
 }
 
 .demo-dark.footer {
-  background: rgba(123, 155, 207, 0.5);
+  background: var(--dxds-color-bg-blue-subtle, rgba(123, 155, 207, 0.5));
 }
 
 .small {
   height: 50px;
-  border: 1px solid lightgray;
+  border: 1px solid var(--dxds-color-border, lightgray);
 }
diff --git a/apps/demos/Demos/Box/Overview/ReactJs/styles.css b/apps/demos/Demos/Box/Overview/ReactJs/styles.css
index edd7b423678a..35c3482011b2 100644
--- a/apps/demos/Demos/Box/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/Box/Overview/ReactJs/styles.css
@@ -6,22 +6,22 @@
 }
 
 .demo-light {
-  background: rgba(245, 229, 166, 0.5);
+  background: var(--dxds-color-bg-yellow-subtle, rgba(245, 229, 166, 0.5));
 }
 
 .demo-dark {
-  background: rgba(148, 215, 199, 0.5);
+  background: var(--dxds-color-bg-green-subtle, rgba(148, 215, 199, 0.5));
 }
 
 .demo-dark.header {
-  background: rgba(243, 158, 108, 0.5);
+  background: var(--dxds-color-bg-red-subtle, rgba(243, 158, 108, 0.5));
 }
 
 .demo-dark.footer {
-  background: rgba(123, 155, 207, 0.5);
+  background: var(--dxds-color-bg-blue-subtle, rgba(123, 155, 207, 0.5));
 }
 
 .small {
   height: 50px;
-  border: 1px solid lightgray;
+  border: 1px solid var(--dxds-color-border, lightgray);
 }
diff --git a/apps/demos/Demos/Box/Overview/Vue/App.vue b/apps/demos/Demos/Box/Overview/Vue/App.vue
index c4738f045779..754bb4f36c64 100644
--- a/apps/demos/Demos/Box/Overview/Vue/App.vue
+++ b/apps/demos/Demos/Box/Overview/Vue/App.vue
@@ -150,24 +150,24 @@ import { DxBox, DxItem } from 'devextreme-vue/box';
 }
 
 .demo-light {
-  background: rgba(245, 229, 166, 0.5);
+  background: var(--dxds-color-bg-yellow-subtle, rgba(245, 229, 166, 0.5));
 }
 
 .demo-dark {
-  background: rgba(148, 215, 199, 0.5);
+  background: var(--dxds-color-bg-green-subtle, rgba(148, 215, 199, 0.5));
 }
 
 .demo-dark.header {
-  background: rgba(243, 158, 108, 0.5);
+  background: var(--dxds-color-bg-red-subtle, rgba(243, 158, 108, 0.5));
 }
 
 .demo-dark.footer {
-  background: rgba(123, 155, 207, 0.5);
+  background: var(--dxds-color-bg-blue-subtle, rgba(123, 155, 207, 0.5));
 }
 
 .small {
   height: 50px;
-  border: 1px solid lightgray;
+  border: 1px solid var(--dxds-color-border, lightgray);
 }
 
 </style>
diff --git a/apps/demos/Demos/Box/Overview/jQuery/styles.css b/apps/demos/Demos/Box/Overview/jQuery/styles.css
index edd7b423678a..35c3482011b2 100644
--- a/apps/demos/Demos/Box/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/Box/Overview/jQuery/styles.css
@@ -6,22 +6,22 @@
 }
 
 .demo-light {
-  background: rgba(245, 229, 166, 0.5);
+  background: var(--dxds-color-bg-yellow-subtle, rgba(245, 229, 166, 0.5));
 }
 
 .demo-dark {
-  background: rgba(148, 215, 199, 0.5);
+  background: var(--dxds-color-bg-green-subtle, rgba(148, 215, 199, 0.5));
 }
 
 .demo-dark.header {
-  background: rgba(243, 158, 108, 0.5);
+  background: var(--dxds-color-bg-red-subtle, rgba(243, 158, 108, 0.5));
 }
 
 .demo-dark.footer {
-  background: rgba(123, 155, 207, 0.5);
+  background: var(--dxds-color-bg-blue-subtle, rgba(123, 155, 207, 0.5));
 }
 
 .small {
   height: 50px;
-  border: 1px solid lightgray;
+  border: 1px solid var(--dxds-color-border, lightgray);
 }
diff --git a/apps/demos/Demos/ButtonGroup/Overview/Angular/app/app.component.css b/apps/demos/Demos/ButtonGroup/Overview/Angular/app/app.component.css
index 88bd7d096d98..e05159c0620d 100644
--- a/apps/demos/Demos/ButtonGroup/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/ButtonGroup/Overview/Angular/app/app.component.css
@@ -16,5 +16,5 @@
 .multiple-selection-styling-mode {
   border-left-width: 1px;
   border-left-style: solid;
-  border-color: #ddd;
+  border-color: var(--dxds-color-border-subtle, #ddd);
 }
diff --git a/apps/demos/Demos/ButtonGroup/Overview/React/styles.css b/apps/demos/Demos/ButtonGroup/Overview/React/styles.css
index 5b305c350e58..dcedf8e07942 100644
--- a/apps/demos/Demos/ButtonGroup/Overview/React/styles.css
+++ b/apps/demos/Demos/ButtonGroup/Overview/React/styles.css
@@ -16,5 +16,5 @@
 .multiple-selection-styling-mode {
   border-left-width: 1px;
   border-left-style: solid;
-  border-color: #ddd;
+  border-color: var(--dxds-color-border-subtle, #ddd);
 }
diff --git a/apps/demos/Demos/ButtonGroup/Overview/ReactJs/styles.css b/apps/demos/Demos/ButtonGroup/Overview/ReactJs/styles.css
index 5b305c350e58..dcedf8e07942 100644
--- a/apps/demos/Demos/ButtonGroup/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/ButtonGroup/Overview/ReactJs/styles.css
@@ -16,5 +16,5 @@
 .multiple-selection-styling-mode {
   border-left-width: 1px;
   border-left-style: solid;
-  border-color: #ddd;
+  border-color: var(--dxds-color-border-subtle, #ddd);
 }
diff --git a/apps/demos/Demos/ButtonGroup/Overview/Vue/App.vue b/apps/demos/Demos/ButtonGroup/Overview/Vue/App.vue
index ce119a7d8922..fbe9e29ce253 100644
--- a/apps/demos/Demos/ButtonGroup/Overview/Vue/App.vue
+++ b/apps/demos/Demos/ButtonGroup/Overview/Vue/App.vue
@@ -63,6 +63,6 @@ function itemClick(e: DxButtonGroupTypes.ItemClickEvent) {
   .multiple-selection-styling-mode {
     border-left-width: 1px;
     border-left-style: solid;
-    border-color: #ddd;
+    border-color: var(--dxds-color-border-subtle, #ddd);
   }
 </style>
diff --git a/apps/demos/Demos/ButtonGroup/Overview/jQuery/styles.css b/apps/demos/Demos/ButtonGroup/Overview/jQuery/styles.css
index 9043d25c5915..396b92cef7e4 100644
--- a/apps/demos/Demos/ButtonGroup/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/ButtonGroup/Overview/jQuery/styles.css
@@ -16,5 +16,5 @@
 #multiple-selection-styling-mode {
   border-left-width: 1px;
   border-left-style: solid;
-  border-color: #ddd;
+  border-color: var(--dxds-color-border-subtle, #ddd);
 }
diff --git a/apps/demos/Demos/Calendar/MultipleSelection/Angular/app/app.component.css b/apps/demos/Demos/Calendar/MultipleSelection/Angular/app/app.component.css
index 1d82a376a3e9..15c7b467d266 100644
--- a/apps/demos/Demos/Calendar/MultipleSelection/Angular/app/app.component.css
+++ b/apps/demos/Demos/Calendar/MultipleSelection/Angular/app/app.component.css
@@ -17,7 +17,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .option {
diff --git a/apps/demos/Demos/Calendar/MultipleSelection/React/styles.css b/apps/demos/Demos/Calendar/MultipleSelection/React/styles.css
index 9614a7464cf3..1cb684ac29f9 100644
--- a/apps/demos/Demos/Calendar/MultipleSelection/React/styles.css
+++ b/apps/demos/Demos/Calendar/MultipleSelection/React/styles.css
@@ -17,7 +17,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .option {
diff --git a/apps/demos/Demos/Calendar/MultipleSelection/ReactJs/styles.css b/apps/demos/Demos/Calendar/MultipleSelection/ReactJs/styles.css
index 9614a7464cf3..1cb684ac29f9 100644
--- a/apps/demos/Demos/Calendar/MultipleSelection/ReactJs/styles.css
+++ b/apps/demos/Demos/Calendar/MultipleSelection/ReactJs/styles.css
@@ -17,7 +17,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .option {
diff --git a/apps/demos/Demos/Calendar/MultipleSelection/Vue/App.vue b/apps/demos/Demos/Calendar/MultipleSelection/Vue/App.vue
index c00a42b4bc05..aa6b50352fd0 100644
--- a/apps/demos/Demos/Calendar/MultipleSelection/Vue/App.vue
+++ b/apps/demos/Demos/Calendar/MultipleSelection/Vue/App.vue
@@ -125,7 +125,7 @@ function clearValue() {
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .option {
diff --git a/apps/demos/Demos/Calendar/MultipleSelection/jQuery/styles.css b/apps/demos/Demos/Calendar/MultipleSelection/jQuery/styles.css
index 9614a7464cf3..1cb684ac29f9 100644
--- a/apps/demos/Demos/Calendar/MultipleSelection/jQuery/styles.css
+++ b/apps/demos/Demos/Calendar/MultipleSelection/jQuery/styles.css
@@ -17,7 +17,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .option {
diff --git a/apps/demos/Demos/Calendar/Overview/Angular/app/app.component.css b/apps/demos/Demos/Calendar/Overview/Angular/app/app.component.css
index 430b9b273c6d..e17c39ff1ea4 100644
--- a/apps/demos/Demos/Calendar/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/Calendar/Overview/Angular/app/app.component.css
@@ -17,19 +17,19 @@
 }
 
 ::ng-deep .dx-calendar-cell:not(.dx-calendar-other-month) .weekend {
-  color: #3030ff;
+  color: var(--dxds-color-content-indigo, #3030ff);
 }
 
 ::ng-deep .dx-state-disabled.dx-calendar .dx-calendar-cell:not(.dx-calendar-other-month) .weekend {
-  color: #8080ff;
+  color: color-mix(in srgb, var(--dxds-color-content-indigo, #8080ff) calc(var(--dxds-opacity-80, 1) * 100%), transparent);
 }
 
 ::ng-deep .dx-calendar-cell:not(.dx-calendar-other-month) .holiday {
-  color: #ff3030;
+  color: var(--dxds-color-content-red, #ff3030);
 }
 
 ::ng-deep .dx-state-disabled.dx-calendar .dx-calendar-cell:not(.dx-calendar-other-month) .holiday {
-  color: #ff8080;
+  color: color-mix(in srgb, var(--dxds-color-content-red, #ff8080) calc(var(--dxds-opacity-80, 1) * 100%), transparent);
 }
 
 ::ng-deep .dx-calendar-week-number-cell .week-number {
@@ -43,7 +43,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .option {
diff --git a/apps/demos/Demos/Calendar/Overview/React/styles.css b/apps/demos/Demos/Calendar/Overview/React/styles.css
index ad61e3eb9936..25695f3f3e31 100644
--- a/apps/demos/Demos/Calendar/Overview/React/styles.css
+++ b/apps/demos/Demos/Calendar/Overview/React/styles.css
@@ -17,19 +17,19 @@
 }
 
 .dx-calendar-cell:not(.dx-calendar-other-month) .weekend {
-  color: #3030ff;
+  color: var(--dxds-color-content-indigo, #3030ff);
 }
 
 .dx-state-disabled.dx-calendar .dx-calendar-cell:not(.dx-calendar-other-month) .weekend {
-  color: #8080ff;
+  color: color-mix(in srgb, var(--dxds-color-content-indigo, #8080ff) calc(var(--dxds-opacity-80, 1) * 100%), transparent);
 }
 
 .dx-calendar-cell:not(.dx-calendar-other-month) .holiday {
-  color: #ff3030;
+  color: var(--dxds-color-content-red, #ff3030);
 }
 
 .dx-state-disabled.dx-calendar .dx-calendar-cell:not(.dx-calendar-other-month) .holiday {
-  color: #ff8080;
+  color: color-mix(in srgb, var(--dxds-color-content-red, #ff8080) calc(var(--dxds-opacity-80, 1) * 100%), transparent);
 }
 
 .dx-calendar-week-number-cell .week-number {
@@ -43,7 +43,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .option {
diff --git a/apps/demos/Demos/Calendar/Overview/ReactJs/styles.css b/apps/demos/Demos/Calendar/Overview/ReactJs/styles.css
index ad61e3eb9936..25695f3f3e31 100644
--- a/apps/demos/Demos/Calendar/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/Calendar/Overview/ReactJs/styles.css
@@ -17,19 +17,19 @@
 }
 
 .dx-calendar-cell:not(.dx-calendar-other-month) .weekend {
-  color: #3030ff;
+  color: var(--dxds-color-content-indigo, #3030ff);
 }
 
 .dx-state-disabled.dx-calendar .dx-calendar-cell:not(.dx-calendar-other-month) .weekend {
-  color: #8080ff;
+  color: color-mix(in srgb, var(--dxds-color-content-indigo, #8080ff) calc(var(--dxds-opacity-80, 1) * 100%), transparent);
 }
 
 .dx-calendar-cell:not(.dx-calendar-other-month) .holiday {
-  color: #ff3030;
+  color: var(--dxds-color-content-red, #ff3030);
 }
 
 .dx-state-disabled.dx-calendar .dx-calendar-cell:not(.dx-calendar-other-month) .holiday {
-  color: #ff8080;
+  color: color-mix(in srgb, var(--dxds-color-content-red, #ff8080) calc(var(--dxds-opacity-80, 1) * 100%), transparent);
 }
 
 .dx-calendar-week-number-cell .week-number {
@@ -43,7 +43,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .option {
diff --git a/apps/demos/Demos/Calendar/Overview/Vue/App.vue b/apps/demos/Demos/Calendar/Overview/Vue/App.vue
index 0e50eff545b7..1a2209918343 100644
--- a/apps/demos/Demos/Calendar/Overview/Vue/App.vue
+++ b/apps/demos/Demos/Calendar/Overview/Vue/App.vue
@@ -152,19 +152,19 @@ function getCellCssClass({ date, view }: { date: Date, view: string }) {
 }
 
 .dx-calendar-cell:not(.dx-calendar-other-month) .weekend {
-  color: #3030ff;
+  color: var(--dxds-color-content-indigo, #3030ff);
 }
 
 .dx-state-disabled.dx-calendar .dx-calendar-cell:not(.dx-calendar-other-month) .weekend {
-  color: #8080ff;
+  color: color-mix(in srgb, var(--dxds-color-content-indigo, #8080ff) calc(var(--dxds-opacity-80, 1) * 100%), transparent);
 }
 
 .dx-calendar-cell:not(.dx-calendar-other-month) .holiday {
-  color: #ff3030;
+  color: var(--dxds-color-content-red, #ff3030);
 }
 
 .dx-state-disabled.dx-calendar .dx-calendar-cell:not(.dx-calendar-other-month) .holiday {
-  color: #ff8080;
+  color: color-mix(in srgb, var(--dxds-color-content-red, #ff8080) calc(var(--dxds-opacity-80, 1) * 100%), transparent);
 }
 
 .dx-calendar-week-number-cell .week-number {
@@ -178,7 +178,7 @@ function getCellCssClass({ date, view }: { date: Date, view: string }) {
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .option {
diff --git a/apps/demos/Demos/Calendar/Overview/jQuery/styles.css b/apps/demos/Demos/Calendar/Overview/jQuery/styles.css
index ad61e3eb9936..25695f3f3e31 100644
--- a/apps/demos/Demos/Calendar/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/Calendar/Overview/jQuery/styles.css
@@ -17,19 +17,19 @@
 }
 
 .dx-calendar-cell:not(.dx-calendar-other-month) .weekend {
-  color: #3030ff;
+  color: var(--dxds-color-content-indigo, #3030ff);
 }
 
 .dx-state-disabled.dx-calendar .dx-calendar-cell:not(.dx-calendar-other-month) .weekend {
-  color: #8080ff;
+  color: color-mix(in srgb, var(--dxds-color-content-indigo, #8080ff) calc(var(--dxds-opacity-80, 1) * 100%), transparent);
 }
 
 .dx-calendar-cell:not(.dx-calendar-other-month) .holiday {
-  color: #ff3030;
+  color: var(--dxds-color-content-red, #ff3030);
 }
 
 .dx-state-disabled.dx-calendar .dx-calendar-cell:not(.dx-calendar-other-month) .holiday {
-  color: #ff8080;
+  color: color-mix(in srgb, var(--dxds-color-content-red, #ff8080) calc(var(--dxds-opacity-80, 1) * 100%), transparent);
 }
 
 .dx-calendar-week-number-cell .week-number {
@@ -43,7 +43,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .option {
diff --git a/apps/demos/Demos/CardView/CardTemplate/Angular/app/vehicle-card/vehicle-card.component.css b/apps/demos/Demos/CardView/CardTemplate/Angular/app/vehicle-card/vehicle-card.component.css
index 551eda532d37..8e50f5a50c28 100644
--- a/apps/demos/Demos/CardView/CardTemplate/Angular/app/vehicle-card/vehicle-card.component.css
+++ b/apps/demos/Demos/CardView/CardTemplate/Angular/app/vehicle-card/vehicle-card.component.css
@@ -4,7 +4,6 @@
     justify-content: center;
     aspect-ratio: 16 / 9;
     width: 100%;
-    background-color: #fff;
 }
 
 .vehicle__img {
diff --git a/apps/demos/Demos/CardView/CardTemplate/React/styles.css b/apps/demos/Demos/CardView/CardTemplate/React/styles.css
index 551eda532d37..8e50f5a50c28 100644
--- a/apps/demos/Demos/CardView/CardTemplate/React/styles.css
+++ b/apps/demos/Demos/CardView/CardTemplate/React/styles.css
@@ -4,7 +4,6 @@
     justify-content: center;
     aspect-ratio: 16 / 9;
     width: 100%;
-    background-color: #fff;
 }
 
 .vehicle__img {
diff --git a/apps/demos/Demos/CardView/CardTemplate/ReactJs/styles.css b/apps/demos/Demos/CardView/CardTemplate/ReactJs/styles.css
index 551eda532d37..8e50f5a50c28 100644
--- a/apps/demos/Demos/CardView/CardTemplate/ReactJs/styles.css
+++ b/apps/demos/Demos/CardView/CardTemplate/ReactJs/styles.css
@@ -4,7 +4,6 @@
     justify-content: center;
     aspect-ratio: 16 / 9;
     width: 100%;
-    background-color: #fff;
 }
 
 .vehicle__img {
diff --git a/apps/demos/Demos/CardView/CardTemplate/Vue/VehicleCard.vue b/apps/demos/Demos/CardView/CardTemplate/Vue/VehicleCard.vue
index e2b4469b3939..3117fc2ef1b0 100644
--- a/apps/demos/Demos/CardView/CardTemplate/Vue/VehicleCard.vue
+++ b/apps/demos/Demos/CardView/CardTemplate/Vue/VehicleCard.vue
@@ -70,7 +70,6 @@ defineEmits(['show-info']);
       justify-content: center;
       aspect-ratio: 16 / 9;
       width: 100%;
-      background-color: #fff;
   }
 
   .vehicle__img {
diff --git a/apps/demos/Demos/CardView/CardTemplate/jQuery/styles.css b/apps/demos/Demos/CardView/CardTemplate/jQuery/styles.css
index 551eda532d37..8e50f5a50c28 100644
--- a/apps/demos/Demos/CardView/CardTemplate/jQuery/styles.css
+++ b/apps/demos/Demos/CardView/CardTemplate/jQuery/styles.css
@@ -4,7 +4,6 @@
     justify-content: center;
     aspect-ratio: 16 / 9;
     width: 100%;
-    background-color: #fff;
 }
 
 .vehicle__img {
diff --git a/apps/demos/Demos/CardView/ColumnChooser/Angular/app/app.component.css b/apps/demos/Demos/CardView/ColumnChooser/Angular/app/app.component.css
index ca85d74b11c2..7936382bf7e8 100644
--- a/apps/demos/Demos/CardView/ColumnChooser/Angular/app/app.component.css
+++ b/apps/demos/Demos/CardView/ColumnChooser/Angular/app/app.component.css
@@ -1,7 +1,7 @@
 .options-panel {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .options-container {
diff --git a/apps/demos/Demos/CardView/ColumnChooser/React/styles.css b/apps/demos/Demos/CardView/ColumnChooser/React/styles.css
index ca85d74b11c2..7936382bf7e8 100644
--- a/apps/demos/Demos/CardView/ColumnChooser/React/styles.css
+++ b/apps/demos/Demos/CardView/ColumnChooser/React/styles.css
@@ -1,7 +1,7 @@
 .options-panel {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .options-container {
diff --git a/apps/demos/Demos/CardView/ColumnChooser/ReactJs/styles.css b/apps/demos/Demos/CardView/ColumnChooser/ReactJs/styles.css
index ca85d74b11c2..7936382bf7e8 100644
--- a/apps/demos/Demos/CardView/ColumnChooser/ReactJs/styles.css
+++ b/apps/demos/Demos/CardView/ColumnChooser/ReactJs/styles.css
@@ -1,7 +1,7 @@
 .options-panel {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .options-container {
diff --git a/apps/demos/Demos/CardView/ColumnChooser/Vue/App.vue b/apps/demos/Demos/CardView/ColumnChooser/Vue/App.vue
index afeeaf8e7bdd..77deaee9f07d 100644
--- a/apps/demos/Demos/CardView/ColumnChooser/Vue/App.vue
+++ b/apps/demos/Demos/CardView/ColumnChooser/Vue/App.vue
@@ -151,7 +151,7 @@ function onAllowColumnReorderingChanged(e: DxCheckBoxTypes.ValueChangedEvent) {
   .options-panel {
     margin-top: 20px;
     padding: 20px;
-    background-color: rgba(191, 191, 191, 0.15);
+    background-color: var(--dx-color-options-panel-bg);
   }
 
   .options-container {
diff --git a/apps/demos/Demos/CardView/ColumnChooser/jQuery/styles.css b/apps/demos/Demos/CardView/ColumnChooser/jQuery/styles.css
index ca85d74b11c2..7936382bf7e8 100644
--- a/apps/demos/Demos/CardView/ColumnChooser/jQuery/styles.css
+++ b/apps/demos/Demos/CardView/ColumnChooser/jQuery/styles.css
@@ -1,7 +1,7 @@
 .options-panel {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .options-container {
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..8283ec0078eb 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-green, var(--dx-color-success));
 }
 
 .priority--normal {
-  color: var(--dx-color-primary);
+  color: var(--dxds-color-content-blue, var(--dx-color-primary));
 }
 
 .priority--urgent {
-  color: var(--dx-color-warning);
+  color: var(--dxds-color-content-yellow, var(--dx-color-warning));
 }
 
 .priority--high {
-  color: var(--dx-color-danger);
+  color: var(--dxds-color-content-red, 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..8925a761ef27 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-green, var(--dx-color-success));
 }
 
 .task__priority--normal {
-  color: var(--dx-color-primary);
+  color: var(--dxds-color-content-blue, var(--dx-color-primary));
 }
 
 .task__priority--urgent {
-  color: var(--dx-color-warning);
+  color: var(--dxds-color-content-yellow, var(--dx-color-warning));
 }
 
 .task__priority--high {
-  color: var(--dx-color-danger);
+  color: var(--dxds-color-content-red, 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..8925a761ef27 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-green, var(--dx-color-success));
 }
 
 .task__priority--normal {
-  color: var(--dx-color-primary);
+  color: var(--dxds-color-content-blue, var(--dx-color-primary));
 }
 
 .task__priority--urgent {
-  color: var(--dx-color-warning);
+  color: var(--dxds-color-content-yellow, var(--dx-color-warning));
 }
 
 .task__priority--high {
-  color: var(--dx-color-danger);
+  color: var(--dxds-color-content-red, 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..a74ffdfcb3bd 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-green, var(--dx-color-success));
 }
 
 .task__priority--normal {
-  color: var(--dx-color-primary);
+  color: var(--dxds-color-content-blue, var(--dx-color-primary));
 }
 
 .task__priority--urgent {
-  color: var(--dx-color-warning);
+  color: var(--dxds-color-content-yellow, var(--dx-color-warning));
 }
 
 .task__priority--high {
-  color: var(--dx-color-danger);
+  color: var(--dxds-color-content-red, 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..43b247792830 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-green, var(--dx-color-success));
 }
 
 .task__priority--normal {
-  color: var(--dx-color-primary);
+  color: var(--dxds-color-content-blue, var(--dx-color-primary));
 }
 
 .task__priority--urgent {
-  color: var(--dx-color-warning);
+  color: var(--dxds-color-content-yellow, var(--dx-color-warning));
 }
 
 .task__priority--high {
-  color: var(--dx-color-danger);
+  color: var(--dxds-color-content-red, 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..9213848b81d7 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-green, var(--dx-color-success));
 }
 
 .status--commission {
-  color: var(--dx-color-warning);
+  color: var(--dxds-color-content-yellow, var(--dx-color-warning));
 }
 
 .status--terminated {
-  color: var(--dx-color-danger);
+  color: var(--dxds-color-content-red, 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..9213848b81d7 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-green, var(--dx-color-success));
 }
 
 .status--commission {
-  color: var(--dx-color-warning);
+  color: var(--dxds-color-content-yellow, var(--dx-color-warning));
 }
 
 .status--terminated {
-  color: var(--dx-color-danger);
+  color: var(--dxds-color-content-red, 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..9213848b81d7 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-green, var(--dx-color-success));
 }
 
 .status--commission {
-  color: var(--dx-color-warning);
+  color: var(--dxds-color-content-yellow, var(--dx-color-warning));
 }
 
 .status--terminated {
-  color: var(--dx-color-danger);
+  color: var(--dxds-color-content-red, 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..4944264a570d 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-green, var(--dx-color-success));
 }
 
 .status--commission {
-  color: var(--dx-color-warning);
+  color: var(--dxds-color-content-yellow, var(--dx-color-warning));
 }
 
 .status--terminated {
-  color: var(--dx-color-danger);
+  color: var(--dxds-color-content-red, 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..9213848b81d7 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-green, var(--dx-color-success));
 }
 
 .status--commission {
-  color: var(--dx-color-warning);
+  color: var(--dxds-color-content-yellow, var(--dx-color-warning));
 }
 
 .status--terminated {
-  color: var(--dx-color-danger);
+  color: var(--dxds-color-content-red, var(--dx-color-danger));
 }
 
 .indicator {
diff --git a/apps/demos/Demos/CardView/Selection/Angular/app/app.component.css b/apps/demos/Demos/CardView/Selection/Angular/app/app.component.css
index a090550dad9f..49aaa7be041d 100644
--- a/apps/demos/Demos/CardView/Selection/Angular/app/app.component.css
+++ b/apps/demos/Demos/CardView/Selection/Angular/app/app.component.css
@@ -1,7 +1,7 @@
 .options-panel {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .options-container {
diff --git a/apps/demos/Demos/CardView/Selection/React/styles.css b/apps/demos/Demos/CardView/Selection/React/styles.css
index a090550dad9f..49aaa7be041d 100644
--- a/apps/demos/Demos/CardView/Selection/React/styles.css
+++ b/apps/demos/Demos/CardView/Selection/React/styles.css
@@ -1,7 +1,7 @@
 .options-panel {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .options-container {
diff --git a/apps/demos/Demos/CardView/Selection/ReactJs/styles.css b/apps/demos/Demos/CardView/Selection/ReactJs/styles.css
index a090550dad9f..49aaa7be041d 100644
--- a/apps/demos/Demos/CardView/Selection/ReactJs/styles.css
+++ b/apps/demos/Demos/CardView/Selection/ReactJs/styles.css
@@ -1,7 +1,7 @@
 .options-panel {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .options-container {
diff --git a/apps/demos/Demos/CardView/Selection/Vue/App.vue b/apps/demos/Demos/CardView/Selection/Vue/App.vue
index 8cb7f16ed602..50eb56c7298e 100644
--- a/apps/demos/Demos/CardView/Selection/Vue/App.vue
+++ b/apps/demos/Demos/CardView/Selection/Vue/App.vue
@@ -119,7 +119,7 @@ const onAllowSelectAllChange = (e: DxCheckBoxTypes.ValueChangedEvent): void => {
   .options-panel {
     margin-top: 20px;
     padding: 20px;
-    background-color: rgba(191, 191, 191, 0.15);
+    background-color: var(--dx-color-options-panel-bg);
   }
 
   .options-container {
diff --git a/apps/demos/Demos/CardView/Selection/jQuery/styles.css b/apps/demos/Demos/CardView/Selection/jQuery/styles.css
index a090550dad9f..49aaa7be041d 100644
--- a/apps/demos/Demos/CardView/Selection/jQuery/styles.css
+++ b/apps/demos/Demos/CardView/Selection/jQuery/styles.css
@@ -1,7 +1,7 @@
 .options-panel {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .options-container {
diff --git a/apps/demos/Demos/Charts/Area/Angular/app/app.component.css b/apps/demos/Demos/Charts/Area/Angular/app/app.component.css
index a87c14188457..80f0b5ddf367 100644
--- a/apps/demos/Demos/Charts/Area/Angular/app/app.component.css
+++ b/apps/demos/Demos/Charts/Area/Angular/app/app.component.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/Area/React/styles.css b/apps/demos/Demos/Charts/Area/React/styles.css
index df540e8ab03d..33a6a74498e0 100644
--- a/apps/demos/Demos/Charts/Area/React/styles.css
+++ b/apps/demos/Demos/Charts/Area/React/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/Area/ReactJs/styles.css b/apps/demos/Demos/Charts/Area/ReactJs/styles.css
index df540e8ab03d..33a6a74498e0 100644
--- a/apps/demos/Demos/Charts/Area/ReactJs/styles.css
+++ b/apps/demos/Demos/Charts/Area/ReactJs/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/Area/Vue/App.vue b/apps/demos/Demos/Charts/Area/Vue/App.vue
index 1948b51e2bb6..bb00f361c304 100644
--- a/apps/demos/Demos/Charts/Area/Vue/App.vue
+++ b/apps/demos/Demos/Charts/Area/Vue/App.vue
@@ -63,7 +63,7 @@ const type = ref(types[0]);
 <style>
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/Area/jQuery/styles.css b/apps/demos/Demos/Charts/Area/jQuery/styles.css
index df540e8ab03d..33a6a74498e0 100644
--- a/apps/demos/Demos/Charts/Area/jQuery/styles.css
+++ b/apps/demos/Demos/Charts/Area/jQuery/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/AreaSparklines/Angular/app/app.component.css b/apps/demos/Demos/Charts/AreaSparklines/Angular/app/app.component.css
index 402fd3bc24ad..c9c1d5910bc6 100644
--- a/apps/demos/Demos/Charts/AreaSparklines/Angular/app/app.component.css
+++ b/apps/demos/Demos/Charts/AreaSparklines/Angular/app/app.component.css
@@ -4,7 +4,7 @@
 
 ::ng-deep .demo-table {
   width: 100%;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
   border-collapse: collapse;
 }
 
@@ -13,20 +13,20 @@
   font-weight: 400;
   width: 200px;
   padding: 25px 10px 5px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 ::ng-deep .demo-table th {
   padding: 25px 15px 20px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 ::ng-deep .demo-table tr:nth-child(2) td {
-  border-top: 1px solid #c2c2c2;
+  border-top: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 ::ng-deep .demo-table td:first-of-type {
-  border-left: 1px solid #c2c2c2;
+  border-left: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 ::ng-deep .demo-table .sparkline {
diff --git a/apps/demos/Demos/Charts/AreaSparklines/React/styles.css b/apps/demos/Demos/Charts/AreaSparklines/React/styles.css
index 24db67de5f3b..3f9715866346 100644
--- a/apps/demos/Demos/Charts/AreaSparklines/React/styles.css
+++ b/apps/demos/Demos/Charts/AreaSparklines/React/styles.css
@@ -4,7 +4,7 @@
 
 .demo-table {
   width: 100%;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
   border-collapse: collapse;
 }
 
@@ -13,20 +13,20 @@
   font-weight: 400;
   width: 200px;
   padding: 25px 10px 5px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table th {
   padding: 25px 15px 20px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table tr:nth-child(2) td {
-  border-top: 1px solid #c2c2c2;
+  border-top: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table td:first-of-type {
-  border-left: 1px solid #c2c2c2;
+  border-left: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table .sparkline {
diff --git a/apps/demos/Demos/Charts/AreaSparklines/ReactJs/styles.css b/apps/demos/Demos/Charts/AreaSparklines/ReactJs/styles.css
index 24db67de5f3b..3f9715866346 100644
--- a/apps/demos/Demos/Charts/AreaSparklines/ReactJs/styles.css
+++ b/apps/demos/Demos/Charts/AreaSparklines/ReactJs/styles.css
@@ -4,7 +4,7 @@
 
 .demo-table {
   width: 100%;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
   border-collapse: collapse;
 }
 
@@ -13,20 +13,20 @@
   font-weight: 400;
   width: 200px;
   padding: 25px 10px 5px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table th {
   padding: 25px 15px 20px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table tr:nth-child(2) td {
-  border-top: 1px solid #c2c2c2;
+  border-top: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table td:first-of-type {
-  border-left: 1px solid #c2c2c2;
+  border-left: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table .sparkline {
diff --git a/apps/demos/Demos/Charts/AreaSparklines/Vue/App.vue b/apps/demos/Demos/Charts/AreaSparklines/Vue/App.vue
index f554930cbfb2..4bbf424925ca 100644
--- a/apps/demos/Demos/Charts/AreaSparklines/Vue/App.vue
+++ b/apps/demos/Demos/Charts/AreaSparklines/Vue/App.vue
@@ -35,7 +35,7 @@ const years = ['2021', '2022', '2023'];
 
 .demo-table {
   width: 100%;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
   border-collapse: collapse;
 }
 
@@ -43,7 +43,7 @@ const years = ['2021', '2022', '2023'];
   font-weight: 400;
   width: 200px;
   padding: 25px 15px 20px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .long-title h3 {
diff --git a/apps/demos/Demos/Charts/AreaSparklines/Vue/RowTemplate.vue b/apps/demos/Demos/Charts/AreaSparklines/Vue/RowTemplate.vue
index 056f1b376996..37dc4797f267 100644
--- a/apps/demos/Demos/Charts/AreaSparklines/Vue/RowTemplate.vue
+++ b/apps/demos/Demos/Charts/AreaSparklines/Vue/RowTemplate.vue
@@ -71,15 +71,15 @@ withDefaults(defineProps<{
   font-weight: 400;
   width: 200px;
   padding: 25px 10px 5px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .rows-content tr:nth-child(2) td {
-  border-top: 1px solid #c2c2c2;
+  border-top: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .rows-content td:first-of-type {
-  border-left: 1px solid #c2c2c2;
+  border-left: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .rows-content .sparkline {
diff --git a/apps/demos/Demos/Charts/AreaSparklines/jQuery/styles.css b/apps/demos/Demos/Charts/AreaSparklines/jQuery/styles.css
index 24db67de5f3b..3f9715866346 100644
--- a/apps/demos/Demos/Charts/AreaSparklines/jQuery/styles.css
+++ b/apps/demos/Demos/Charts/AreaSparklines/jQuery/styles.css
@@ -4,7 +4,7 @@
 
 .demo-table {
   width: 100%;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
   border-collapse: collapse;
 }
 
@@ -13,20 +13,20 @@
   font-weight: 400;
   width: 200px;
   padding: 25px 10px 5px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table th {
   padding: 25px 15px 20px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table tr:nth-child(2) td {
-  border-top: 1px solid #c2c2c2;
+  border-top: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table td:first-of-type {
-  border-left: 1px solid #c2c2c2;
+  border-left: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table .sparkline {
diff --git a/apps/demos/Demos/Charts/AxisCustomPosition/Angular/app/app.component.css b/apps/demos/Demos/Charts/AxisCustomPosition/Angular/app/app.component.css
index 9229577a0f90..bba751151bf0 100644
--- a/apps/demos/Demos/Charts/AxisCustomPosition/Angular/app/app.component.css
+++ b/apps/demos/Demos/Charts/AxisCustomPosition/Angular/app/app.component.css
@@ -1,7 +1,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .option {
diff --git a/apps/demos/Demos/Charts/AxisCustomPosition/React/styles.css b/apps/demos/Demos/Charts/AxisCustomPosition/React/styles.css
index 11a912b11b4f..630c0a7c7d98 100644
--- a/apps/demos/Demos/Charts/AxisCustomPosition/React/styles.css
+++ b/apps/demos/Demos/Charts/AxisCustomPosition/React/styles.css
@@ -1,7 +1,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .option {
diff --git a/apps/demos/Demos/Charts/AxisCustomPosition/ReactJs/styles.css b/apps/demos/Demos/Charts/AxisCustomPosition/ReactJs/styles.css
index 11a912b11b4f..630c0a7c7d98 100644
--- a/apps/demos/Demos/Charts/AxisCustomPosition/ReactJs/styles.css
+++ b/apps/demos/Demos/Charts/AxisCustomPosition/ReactJs/styles.css
@@ -1,7 +1,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .option {
diff --git a/apps/demos/Demos/Charts/AxisCustomPosition/Vue/App.vue b/apps/demos/Demos/Charts/AxisCustomPosition/Vue/App.vue
index fa99f82211fb..c37470776896 100644
--- a/apps/demos/Demos/Charts/AxisCustomPosition/Vue/App.vue
+++ b/apps/demos/Demos/Charts/AxisCustomPosition/Vue/App.vue
@@ -97,7 +97,7 @@ const dataSource = generateDataSource();
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .option {
diff --git a/apps/demos/Demos/Charts/AxisCustomPosition/jQuery/styles.css b/apps/demos/Demos/Charts/AxisCustomPosition/jQuery/styles.css
index 11a912b11b4f..630c0a7c7d98 100644
--- a/apps/demos/Demos/Charts/AxisCustomPosition/jQuery/styles.css
+++ b/apps/demos/Demos/Charts/AxisCustomPosition/jQuery/styles.css
@@ -1,7 +1,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .option {
diff --git a/apps/demos/Demos/Charts/AxisLabelCustomization/Angular/app/app.component.css b/apps/demos/Demos/Charts/AxisLabelCustomization/Angular/app/app.component.css
index a72aa6c086ad..235a2ca2593a 100644
--- a/apps/demos/Demos/Charts/AxisLabelCustomization/Angular/app/app.component.css
+++ b/apps/demos/Demos/Charts/AxisLabelCustomization/Angular/app/app.component.css
@@ -3,7 +3,7 @@
 }
 
 .template-text {
-  fill: #767676;
+  fill: var(--dxds-color-border-gray, #767676);
   font-family: "Segoe UI", "Helvetica Neue", "Trebuchet MS", Verdana, sans-serif;
   font-weight: 400;
   font-size: 13px;
diff --git a/apps/demos/Demos/Charts/AxisLabelCustomization/React/styles.css b/apps/demos/Demos/Charts/AxisLabelCustomization/React/styles.css
index 5b2879e8b76b..ad919962e74b 100644
--- a/apps/demos/Demos/Charts/AxisLabelCustomization/React/styles.css
+++ b/apps/demos/Demos/Charts/AxisLabelCustomization/React/styles.css
@@ -3,7 +3,7 @@
 }
 
 .template-text {
-  fill: #767676;
+  fill: var(--dxds-color-border-gray, #767676);
   font-family: "Segoe UI", "Helvetica Neue", "Trebuchet MS", Verdana, sans-serif;
   font-weight: 400;
   font-size: 13px;
diff --git a/apps/demos/Demos/Charts/AxisLabelCustomization/ReactJs/styles.css b/apps/demos/Demos/Charts/AxisLabelCustomization/ReactJs/styles.css
index 5b2879e8b76b..ad919962e74b 100644
--- a/apps/demos/Demos/Charts/AxisLabelCustomization/ReactJs/styles.css
+++ b/apps/demos/Demos/Charts/AxisLabelCustomization/ReactJs/styles.css
@@ -3,7 +3,7 @@
 }
 
 .template-text {
-  fill: #767676;
+  fill: var(--dxds-color-border-gray, #767676);
   font-family: "Segoe UI", "Helvetica Neue", "Trebuchet MS", Verdana, sans-serif;
   font-weight: 400;
   font-size: 13px;
diff --git a/apps/demos/Demos/Charts/AxisLabelCustomization/Vue/LabelTemplate.vue b/apps/demos/Demos/Charts/AxisLabelCustomization/Vue/LabelTemplate.vue
index cf027de190b9..33f851d8958a 100644
--- a/apps/demos/Demos/Charts/AxisLabelCustomization/Vue/LabelTemplate.vue
+++ b/apps/demos/Demos/Charts/AxisLabelCustomization/Vue/LabelTemplate.vue
@@ -26,7 +26,7 @@ const getFilePath = (text: string): string => `../../../../images/flags/3x2/${te
 </script>
 <style scoped>
 .template-text {
-  fill: #767676;
+  fill: var(--dxds-color-border-gray, #767676);
   font-family: "Segoe UI", "Helvetica Neue", "Trebuchet MS", Verdana, sans-serif;
   font-weight: 400;
   font-size: 13px;
diff --git a/apps/demos/Demos/Charts/AxisLabelCustomization/jQuery/styles.css b/apps/demos/Demos/Charts/AxisLabelCustomization/jQuery/styles.css
index 5b2879e8b76b..ad919962e74b 100644
--- a/apps/demos/Demos/Charts/AxisLabelCustomization/jQuery/styles.css
+++ b/apps/demos/Demos/Charts/AxisLabelCustomization/jQuery/styles.css
@@ -3,7 +3,7 @@
 }
 
 .template-text {
-  fill: #767676;
+  fill: var(--dxds-color-border-gray, #767676);
   font-family: "Segoe UI", "Helvetica Neue", "Trebuchet MS", Verdana, sans-serif;
   font-weight: 400;
   font-size: 13px;
diff --git a/apps/demos/Demos/Charts/BarSparklines/Angular/app/app.component.css b/apps/demos/Demos/Charts/BarSparklines/Angular/app/app.component.css
index 9a7d34a45b4a..fb0210dcce17 100644
--- a/apps/demos/Demos/Charts/BarSparklines/Angular/app/app.component.css
+++ b/apps/demos/Demos/Charts/BarSparklines/Angular/app/app.component.css
@@ -4,7 +4,7 @@
 
 ::ng-deep .demo-table {
   width: 100%;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
   border-collapse: collapse;
 }
 
@@ -13,20 +13,20 @@
   font-weight: 400;
   width: 200px;
   padding: 25px 10px 5px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 ::ng-deep .demo-table th {
   padding: 25px 15px 20px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 ::ng-deep .demo-table tr:nth-child(2) td {
-  border-top: 1px solid #c2c2c2;
+  border-top: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 ::ng-deep .demo-table td:first-of-type {
-  border-left: 1px solid #c2c2c2;
+  border-left: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 ::ng-deep .demo-table .sparkline {
diff --git a/apps/demos/Demos/Charts/BarSparklines/React/styles.css b/apps/demos/Demos/Charts/BarSparklines/React/styles.css
index e0923613de5f..490d36eb67a0 100644
--- a/apps/demos/Demos/Charts/BarSparklines/React/styles.css
+++ b/apps/demos/Demos/Charts/BarSparklines/React/styles.css
@@ -4,7 +4,7 @@
 
 .demo-table {
   width: 100%;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
   border-collapse: collapse;
 }
 
@@ -13,20 +13,20 @@
   font-weight: 400;
   width: 200px;
   padding: 25px 10px 5px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table th {
   padding: 25px 15px 20px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table tr:nth-child(2) td {
-  border-top: 1px solid #c2c2c2;
+  border-top: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table td:first-of-type {
-  border-left: 1px solid #c2c2c2;
+  border-left: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table .sparkline {
diff --git a/apps/demos/Demos/Charts/BarSparklines/ReactJs/styles.css b/apps/demos/Demos/Charts/BarSparklines/ReactJs/styles.css
index e0923613de5f..490d36eb67a0 100644
--- a/apps/demos/Demos/Charts/BarSparklines/ReactJs/styles.css
+++ b/apps/demos/Demos/Charts/BarSparklines/ReactJs/styles.css
@@ -4,7 +4,7 @@
 
 .demo-table {
   width: 100%;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
   border-collapse: collapse;
 }
 
@@ -13,20 +13,20 @@
   font-weight: 400;
   width: 200px;
   padding: 25px 10px 5px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table th {
   padding: 25px 15px 20px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table tr:nth-child(2) td {
-  border-top: 1px solid #c2c2c2;
+  border-top: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table td:first-of-type {
-  border-left: 1px solid #c2c2c2;
+  border-left: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table .sparkline {
diff --git a/apps/demos/Demos/Charts/BarSparklines/Vue/App.vue b/apps/demos/Demos/Charts/BarSparklines/Vue/App.vue
index 3cb3f4bdb304..22641d8aaa24 100644
--- a/apps/demos/Demos/Charts/BarSparklines/Vue/App.vue
+++ b/apps/demos/Demos/Charts/BarSparklines/Vue/App.vue
@@ -68,7 +68,7 @@ function onValueChanged({ value }: DxSelectBoxTypes.ValueChangedEvent) {
 
 .demo-table {
   width: 100%;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
   border-collapse: collapse;
 }
 
@@ -77,20 +77,20 @@ function onValueChanged({ value }: DxSelectBoxTypes.ValueChangedEvent) {
   font-weight: 400;
   width: 200px;
   padding: 25px 10px 5px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table th {
   padding: 25px 15px 20px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table tr:nth-child(2) td {
-  border-top: 1px solid #c2c2c2;
+  border-top: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table td:first-of-type {
-  border-left: 1px solid #c2c2c2;
+  border-left: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table .sparkline {
diff --git a/apps/demos/Demos/Charts/BarSparklines/Vue/RowTemplate.vue b/apps/demos/Demos/Charts/BarSparklines/Vue/RowTemplate.vue
index d61a40662202..47e9268e749a 100644
--- a/apps/demos/Demos/Charts/BarSparklines/Vue/RowTemplate.vue
+++ b/apps/demos/Demos/Charts/BarSparklines/Vue/RowTemplate.vue
@@ -67,15 +67,15 @@ const getValueField = (name: string): string => name + props.year;
   font-weight: 400;
   width: 200px;
   padding: 25px 10px 5px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .rows-content tr:nth-child(2) td {
-  border-top: 1px solid #c2c2c2;
+  border-top: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .rows-content td:first-of-type {
-  border-left: 1px solid #c2c2c2;
+  border-left: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .rows-content .sparkline {
diff --git a/apps/demos/Demos/Charts/BarSparklines/jQuery/styles.css b/apps/demos/Demos/Charts/BarSparklines/jQuery/styles.css
index e0923613de5f..490d36eb67a0 100644
--- a/apps/demos/Demos/Charts/BarSparklines/jQuery/styles.css
+++ b/apps/demos/Demos/Charts/BarSparklines/jQuery/styles.css
@@ -4,7 +4,7 @@
 
 .demo-table {
   width: 100%;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
   border-collapse: collapse;
 }
 
@@ -13,20 +13,20 @@
   font-weight: 400;
   width: 200px;
   padding: 25px 10px 5px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table th {
   padding: 25px 15px 20px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table tr:nth-child(2) td {
-  border-top: 1px solid #c2c2c2;
+  border-top: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table td:first-of-type {
-  border-left: 1px solid #c2c2c2;
+  border-left: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table .sparkline {
diff --git a/apps/demos/Demos/Charts/CenterLabelCustomization/Angular/app/app.component.html b/apps/demos/Demos/Charts/CenterLabelCustomization/Angular/app/app.component.html
index 35a12b8f18c1..47a8066dc7b4 100644
--- a/apps/demos/Demos/Charts/CenterLabelCustomization/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/CenterLabelCustomization/Angular/app/app.component.html
@@ -42,7 +42,7 @@
           text-anchor="middle"
           x="100"
           y="120"
-          fill="#494949"
+          fill="var(--dxds-color-content-subtle, #494949)"
         >
           <tspan x="100">{{ country }}</tspan>
           <!-- display: inline -->
diff --git a/apps/demos/Demos/Charts/CenterLabelCustomization/Vue/CenterTemplate.vue b/apps/demos/Demos/Charts/CenterLabelCustomization/Vue/CenterTemplate.vue
index 3112daac8d63..6100e685dd07 100644
--- a/apps/demos/Demos/Charts/CenterLabelCustomization/Vue/CenterTemplate.vue
+++ b/apps/demos/Demos/Charts/CenterLabelCustomization/Vue/CenterTemplate.vue
@@ -14,7 +14,7 @@
       height="40"
     />
     <text
-      :style="{fontSize: 18, fill: '#494949'}"
+      :style="{fontSize: 18, fill: 'var(--dxds-color-content-subtle, #494949)'}"
       text-anchor="middle"
       x="100"
       y="120"
diff --git a/apps/demos/Demos/Charts/CenterLabelCustomization/jQuery/index.js b/apps/demos/Demos/Charts/CenterLabelCustomization/jQuery/index.js
index 0a55416d1b15..ffe85d22c87c 100644
--- a/apps/demos/Demos/Charts/CenterLabelCustomization/jQuery/index.js
+++ b/apps/demos/Demos/Charts/CenterLabelCustomization/jQuery/index.js
@@ -46,7 +46,7 @@ $(() => {
       const text = createText({
         x: 100,
         y: 120,
-        fill: '#494949',
+        fill: 'var(--dxds-color-content-subtle, #494949)',
         'text-anchor': 'middle',
         'font-size': 18,
       }, [country, formatNumber(total)]);
diff --git a/apps/demos/Demos/Charts/Colorization/Angular/app/app.component.css b/apps/demos/Demos/Charts/Colorization/Angular/app/app.component.css
index efaf716a1408..22304afe3411 100644
--- a/apps/demos/Demos/Charts/Colorization/Angular/app/app.component.css
+++ b/apps/demos/Demos/Charts/Colorization/Angular/app/app.component.css
@@ -4,7 +4,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/Colorization/React/styles.css b/apps/demos/Demos/Charts/Colorization/React/styles.css
index f25fbae47a7b..dd125f47077a 100644
--- a/apps/demos/Demos/Charts/Colorization/React/styles.css
+++ b/apps/demos/Demos/Charts/Colorization/React/styles.css
@@ -4,7 +4,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/Colorization/ReactJs/styles.css b/apps/demos/Demos/Charts/Colorization/ReactJs/styles.css
index f25fbae47a7b..dd125f47077a 100644
--- a/apps/demos/Demos/Charts/Colorization/ReactJs/styles.css
+++ b/apps/demos/Demos/Charts/Colorization/ReactJs/styles.css
@@ -4,7 +4,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/Colorization/Vue/App.vue b/apps/demos/Demos/Charts/Colorization/Vue/App.vue
index 641dded4041c..6b34c773f07a 100644
--- a/apps/demos/Demos/Charts/Colorization/Vue/App.vue
+++ b/apps/demos/Demos/Charts/Colorization/Vue/App.vue
@@ -57,7 +57,7 @@ const customizeTooltip = ({ node, node: { data: { name } }, valueText }: Record<
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/Colorization/jQuery/styles.css b/apps/demos/Demos/Charts/Colorization/jQuery/styles.css
index f25fbae47a7b..dd125f47077a 100644
--- a/apps/demos/Demos/Charts/Colorization/jQuery/styles.css
+++ b/apps/demos/Demos/Charts/Colorization/jQuery/styles.css
@@ -4,7 +4,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/CustomAnnotations/Angular/app/app.component.css b/apps/demos/Demos/Charts/CustomAnnotations/Angular/app/app.component.css
index 2a9303eb9668..f70f5b7d86f4 100644
--- a/apps/demos/Demos/Charts/CustomAnnotations/Angular/app/app.component.css
+++ b/apps/demos/Demos/Charts/CustomAnnotations/Angular/app/app.component.css
@@ -9,7 +9,7 @@
 ::ng-deep .border {
   width: 60px;
   height: 40px;
-  stroke: rgba(191, 191, 191, 0.25);
+  stroke: var(--dxds-color-border-subtle, rgba(191, 191, 191, 0.25));
   stroke-width: 1px;
   fill: transparent;
 }
diff --git a/apps/demos/Demos/Charts/CustomAnnotations/React/styles.css b/apps/demos/Demos/Charts/CustomAnnotations/React/styles.css
index 68c285bc4d0b..4bec53f64977 100644
--- a/apps/demos/Demos/Charts/CustomAnnotations/React/styles.css
+++ b/apps/demos/Demos/Charts/CustomAnnotations/React/styles.css
@@ -9,7 +9,7 @@
 .border {
   width: 60px;
   height: 40px;
-  stroke: rgba(191, 191, 191, 0.25);
+  stroke: var(--dxds-color-border-subtle, rgba(191, 191, 191, 0.25));
   stroke-width: 1px;
   fill: transparent;
 }
diff --git a/apps/demos/Demos/Charts/CustomAnnotations/ReactJs/styles.css b/apps/demos/Demos/Charts/CustomAnnotations/ReactJs/styles.css
index 68c285bc4d0b..4bec53f64977 100644
--- a/apps/demos/Demos/Charts/CustomAnnotations/ReactJs/styles.css
+++ b/apps/demos/Demos/Charts/CustomAnnotations/ReactJs/styles.css
@@ -9,7 +9,7 @@
 .border {
   width: 60px;
   height: 40px;
-  stroke: rgba(191, 191, 191, 0.25);
+  stroke: var(--dxds-color-border-subtle, rgba(191, 191, 191, 0.25));
   stroke-width: 1px;
   fill: transparent;
 }
diff --git a/apps/demos/Demos/Charts/CustomAnnotations/Vue/AnnotationTemplate.vue b/apps/demos/Demos/Charts/CustomAnnotations/Vue/AnnotationTemplate.vue
index 86f33eb51b85..d6fc0d5d8966 100644
--- a/apps/demos/Demos/Charts/CustomAnnotations/Vue/AnnotationTemplate.vue
+++ b/apps/demos/Demos/Charts/CustomAnnotations/Vue/AnnotationTemplate.vue
@@ -63,7 +63,7 @@ const formatNumber = new Intl.NumberFormat('en-US', { minimumFractionDigits: 0 }
 .border {
   width: 60px;
   height: 40px;
-  stroke: rgba(191, 191, 191, 0.25);
+  stroke: var(--dxds-color-border-subtle, rgba(191, 191, 191, 0.25));
   stroke-width: 1px;
   fill: transparent;
 }
diff --git a/apps/demos/Demos/Charts/CustomAnnotations/jQuery/styles.css b/apps/demos/Demos/Charts/CustomAnnotations/jQuery/styles.css
index 68c285bc4d0b..4bec53f64977 100644
--- a/apps/demos/Demos/Charts/CustomAnnotations/jQuery/styles.css
+++ b/apps/demos/Demos/Charts/CustomAnnotations/jQuery/styles.css
@@ -9,7 +9,7 @@
 .border {
   width: 60px;
   height: 40px;
-  stroke: rgba(191, 191, 191, 0.25);
+  stroke: var(--dxds-color-border-subtle, rgba(191, 191, 191, 0.25));
   stroke-width: 1px;
   fill: transparent;
 }
diff --git a/apps/demos/Demos/Charts/DrillDown/Angular/app/app.component.css b/apps/demos/Demos/Charts/DrillDown/Angular/app/app.component.css
index fc4a232d3add..d69ecc63abd3 100644
--- a/apps/demos/Demos/Charts/DrillDown/Angular/app/app.component.css
+++ b/apps/demos/Demos/Charts/DrillDown/Angular/app/app.component.css
@@ -7,7 +7,7 @@
 }
 
 ::ng-deep .link {
-  color: #337ab7;
+  color: var(--dxds-color-content-primary, #337ab7);
   text-decoration: underline;
   cursor: pointer;
 }
diff --git a/apps/demos/Demos/Charts/DrillDown/React/styles.css b/apps/demos/Demos/Charts/DrillDown/React/styles.css
index a55e449c8c61..794491706784 100644
--- a/apps/demos/Demos/Charts/DrillDown/React/styles.css
+++ b/apps/demos/Demos/Charts/DrillDown/React/styles.css
@@ -7,7 +7,7 @@
 }
 
 .link {
-  color: #337ab7;
+  color: var(--dxds-color-content-primary, #337ab7);
   text-decoration: underline;
   cursor: pointer;
 }
diff --git a/apps/demos/Demos/Charts/DrillDown/ReactJs/styles.css b/apps/demos/Demos/Charts/DrillDown/ReactJs/styles.css
index a55e449c8c61..794491706784 100644
--- a/apps/demos/Demos/Charts/DrillDown/ReactJs/styles.css
+++ b/apps/demos/Demos/Charts/DrillDown/ReactJs/styles.css
@@ -7,7 +7,7 @@
 }
 
 .link {
-  color: #337ab7;
+  color: var(--dxds-color-content-primary, #337ab7);
   text-decoration: underline;
   cursor: pointer;
 }
diff --git a/apps/demos/Demos/Charts/DrillDown/Vue/App.vue b/apps/demos/Demos/Charts/DrillDown/Vue/App.vue
index 3c466d7a5ea5..544552226604 100644
--- a/apps/demos/Demos/Charts/DrillDown/Vue/App.vue
+++ b/apps/demos/Demos/Charts/DrillDown/Vue/App.vue
@@ -72,7 +72,7 @@ function drillInfoClick(node: Record<string, any>) {
 }
 
 .link {
-  color: #337ab7;
+  color: var(--dxds-color-content-primary, #337ab7);
   text-decoration: underline;
   cursor: pointer;
 }
diff --git a/apps/demos/Demos/Charts/DrillDown/jQuery/styles.css b/apps/demos/Demos/Charts/DrillDown/jQuery/styles.css
index 2d10bf0457e7..4c85c0673ee9 100644
--- a/apps/demos/Demos/Charts/DrillDown/jQuery/styles.css
+++ b/apps/demos/Demos/Charts/DrillDown/jQuery/styles.css
@@ -7,7 +7,7 @@
 }
 
 .link {
-  color: #337ab7;
+  color: var(--dxds-color-content-primary, #337ab7);
   text-decoration: underline;
   cursor: pointer;
 }
diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.css b/apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.css
index 8b338fff11ce..4d0e0d2e6674 100644
--- a/apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.css
+++ b/apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.css
@@ -17,7 +17,7 @@
 }
 
 ::ng-deep .custom-markup-text {
-  fill: #fff;
+  fill: var(--dxds-color-content-on-color, #fff);
   font-family: 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana, sans-serif;
 }
 
diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/React/styles.css b/apps/demos/Demos/Charts/ExportCustomMarkup/React/styles.css
index a8e4f5ab3fe5..680b5c018348 100644
--- a/apps/demos/Demos/Charts/ExportCustomMarkup/React/styles.css
+++ b/apps/demos/Demos/Charts/ExportCustomMarkup/React/styles.css
@@ -21,7 +21,7 @@
 }
 
 .custom-markup-text {
-  fill: #fff;
+  fill: var(--dxds-color-content-on-color, #fff);
   font-family: 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana, sans-serif;
 }
 
diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/ReactJs/styles.css b/apps/demos/Demos/Charts/ExportCustomMarkup/ReactJs/styles.css
index a8e4f5ab3fe5..680b5c018348 100644
--- a/apps/demos/Demos/Charts/ExportCustomMarkup/ReactJs/styles.css
+++ b/apps/demos/Demos/Charts/ExportCustomMarkup/ReactJs/styles.css
@@ -21,7 +21,7 @@
 }
 
 .custom-markup-text {
-  fill: #fff;
+  fill: var(--dxds-color-content-on-color, #fff);
   font-family: 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana, sans-serif;
 }
 
diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/Vue/Form.vue b/apps/demos/Demos/Charts/ExportCustomMarkup/Vue/Form.vue
index 3650ad53fb12..96f925f68195 100644
--- a/apps/demos/Demos/Charts/ExportCustomMarkup/Vue/Form.vue
+++ b/apps/demos/Demos/Charts/ExportCustomMarkup/Vue/Form.vue
@@ -66,7 +66,7 @@ defineExpose({
 </script>
 <style>
 .custom-markup-text {
-  fill: #fff;
+  fill: var(--dxds-color-content-on-color, #fff);
   font-family: 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana, sans-serif;
 }
 
diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/jQuery/styles.css b/apps/demos/Demos/Charts/ExportCustomMarkup/jQuery/styles.css
index a8e4f5ab3fe5..680b5c018348 100644
--- a/apps/demos/Demos/Charts/ExportCustomMarkup/jQuery/styles.css
+++ b/apps/demos/Demos/Charts/ExportCustomMarkup/jQuery/styles.css
@@ -21,7 +21,7 @@
 }
 
 .custom-markup-text {
-  fill: #fff;
+  fill: var(--dxds-color-content-on-color, #fff);
   font-family: 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana, sans-serif;
 }
 
diff --git a/apps/demos/Demos/Charts/Line/Angular/app/app.component.css b/apps/demos/Demos/Charts/Line/Angular/app/app.component.css
index a87c14188457..80f0b5ddf367 100644
--- a/apps/demos/Demos/Charts/Line/Angular/app/app.component.css
+++ b/apps/demos/Demos/Charts/Line/Angular/app/app.component.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/Line/React/styles.css b/apps/demos/Demos/Charts/Line/React/styles.css
index df540e8ab03d..33a6a74498e0 100644
--- a/apps/demos/Demos/Charts/Line/React/styles.css
+++ b/apps/demos/Demos/Charts/Line/React/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/Line/ReactJs/styles.css b/apps/demos/Demos/Charts/Line/ReactJs/styles.css
index df540e8ab03d..33a6a74498e0 100644
--- a/apps/demos/Demos/Charts/Line/ReactJs/styles.css
+++ b/apps/demos/Demos/Charts/Line/ReactJs/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/Line/Vue/App.vue b/apps/demos/Demos/Charts/Line/Vue/App.vue
index 6960ada3a021..8b5b405bcf26 100644
--- a/apps/demos/Demos/Charts/Line/Vue/App.vue
+++ b/apps/demos/Demos/Charts/Line/Vue/App.vue
@@ -73,7 +73,7 @@ const type = ref<DxChartTypes.SeriesType>('line');
 <style>
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/Line/jQuery/styles.css b/apps/demos/Demos/Charts/Line/jQuery/styles.css
index df540e8ab03d..33a6a74498e0 100644
--- a/apps/demos/Demos/Charts/Line/jQuery/styles.css
+++ b/apps/demos/Demos/Charts/Line/jQuery/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/Overview/Angular/app/app.component.css b/apps/demos/Demos/Charts/Overview/Angular/app/app.component.css
index 4d0abf56d7d4..fad4914400ec 100644
--- a/apps/demos/Demos/Charts/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/Charts/Overview/Angular/app/app.component.css
@@ -7,7 +7,7 @@
   font-size: 16px;
   font-weight: 500;
   padding-bottom: 5px;
-  border-bottom: 1px solid #c5c5c5;
+  border-bottom: 1px solid var(--dxds-color-border-static-light, #c5c5c5);
 }
 
 ::ng-deep .tooltip-body {
diff --git a/apps/demos/Demos/Charts/Overview/React/styles.css b/apps/demos/Demos/Charts/Overview/React/styles.css
index 0335aaa7842a..fe22159a3c68 100644
--- a/apps/demos/Demos/Charts/Overview/React/styles.css
+++ b/apps/demos/Demos/Charts/Overview/React/styles.css
@@ -7,7 +7,7 @@
   font-size: 16px;
   font-weight: 500;
   padding-bottom: 5px;
-  border-bottom: 1px solid #c5c5c5;
+  border-bottom: 1px solid var(--dxds-color-border-static-light, #c5c5c5);
 }
 
 .tooltip-body {
diff --git a/apps/demos/Demos/Charts/Overview/ReactJs/styles.css b/apps/demos/Demos/Charts/Overview/ReactJs/styles.css
index 0335aaa7842a..fe22159a3c68 100644
--- a/apps/demos/Demos/Charts/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/Charts/Overview/ReactJs/styles.css
@@ -7,7 +7,7 @@
   font-size: 16px;
   font-weight: 500;
   padding-bottom: 5px;
-  border-bottom: 1px solid #c5c5c5;
+  border-bottom: 1px solid var(--dxds-color-border-static-light, #c5c5c5);
 }
 
 .tooltip-body {
diff --git a/apps/demos/Demos/Charts/Overview/Vue/App.vue b/apps/demos/Demos/Charts/Overview/Vue/App.vue
index 3a54ba2f92b9..ac45bd35255e 100644
--- a/apps/demos/Demos/Charts/Overview/Vue/App.vue
+++ b/apps/demos/Demos/Charts/Overview/Vue/App.vue
@@ -113,7 +113,7 @@ const dataSource = data.map((item) => {
   font-size: 16px;
   font-weight: 500;
   padding-bottom: 5px;
-  border-bottom: 1px solid #c5c5c5;
+  border-bottom: 1px solid var(--dxds-color-border-static-light, #c5c5c5);
 }
 
 .tooltip-body {
diff --git a/apps/demos/Demos/Charts/Overview/jQuery/styles.css b/apps/demos/Demos/Charts/Overview/jQuery/styles.css
index 0335aaa7842a..fe22159a3c68 100644
--- a/apps/demos/Demos/Charts/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/Charts/Overview/jQuery/styles.css
@@ -7,7 +7,7 @@
   font-size: 16px;
   font-weight: 500;
   padding-bottom: 5px;
-  border-bottom: 1px solid #c5c5c5;
+  border-bottom: 1px solid var(--dxds-color-border-static-light, #c5c5c5);
 }
 
 .tooltip-body {
diff --git a/apps/demos/Demos/Charts/Palette/Angular/app/app.component.css b/apps/demos/Demos/Charts/Palette/Angular/app/app.component.css
index 46988ee9974d..157c9dd3dbbf 100644
--- a/apps/demos/Demos/Charts/Palette/Angular/app/app.component.css
+++ b/apps/demos/Demos/Charts/Palette/Angular/app/app.component.css
@@ -22,7 +22,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/Palette/Angular/app/app.service.ts b/apps/demos/Demos/Charts/Palette/Angular/app/app.service.ts
index 3b2841a32dd9..10fae2baff33 100644
--- a/apps/demos/Demos/Charts/Palette/Angular/app/app.service.ts
+++ b/apps/demos/Demos/Charts/Palette/Angular/app/app.service.ts
@@ -17,7 +17,7 @@ export class Service {
   }
 
   getPaletteCollection(): Palette[] {
-    return ['Material', 'Soft Pastel', 'Harmony Light', 'Pastel', 'Bright', 'Soft', 'Ocean', 'Office', 'Vintage', 'Violet', 'Carmine', 'Dark Moon', 'Soft Blue', 'Dark Violet', 'Green Mist'];
+    return ['Material', 'Fluent Next', 'Soft Pastel', 'Harmony Light', 'Pastel', 'Bright', 'Soft', 'Ocean', 'Office', 'Vintage', 'Violet', 'Carmine', 'Dark Moon', 'Soft Blue', 'Dark Violet', 'Green Mist'];
   }
 
   getPaletteExtensionModes(): PaletteExtensionMode[] {
diff --git a/apps/demos/Demos/Charts/Palette/React/data.ts b/apps/demos/Demos/Charts/Palette/React/data.ts
index 54e33a896c12..80c64d5c52f8 100644
--- a/apps/demos/Demos/Charts/Palette/React/data.ts
+++ b/apps/demos/Demos/Charts/Palette/React/data.ts
@@ -1,7 +1,7 @@
 import type { Palette } from 'devextreme/viz/pie_chart';
 import type { PaletteExtensionMode } from 'devextreme/common/charts';
 
-export const paletteCollection: Palette[] = ['Material', 'Soft Pastel', 'Harmony Light', 'Pastel', 'Bright', 'Soft', 'Ocean', 'Office', 'Vintage', 'Violet', 'Carmine', 'Dark Moon', 'Soft Blue', 'Dark Violet', 'Green Mist'];
+export const paletteCollection: Palette[] = ['Material', 'Fluent Next', 'Soft Pastel', 'Harmony Light', 'Pastel', 'Bright', 'Soft', 'Ocean', 'Office', 'Vintage', 'Violet', 'Carmine', 'Dark Moon', 'Soft Blue', 'Dark Violet', 'Green Mist'];
 export const paletteExtensionModes: PaletteExtensionMode[] = ['alternate', 'blend', 'extrapolate'];
 
 const data: ({ arg: string; val: number; })[] = [];
diff --git a/apps/demos/Demos/Charts/Palette/React/styles.css b/apps/demos/Demos/Charts/Palette/React/styles.css
index 46988ee9974d..157c9dd3dbbf 100644
--- a/apps/demos/Demos/Charts/Palette/React/styles.css
+++ b/apps/demos/Demos/Charts/Palette/React/styles.css
@@ -22,7 +22,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/Palette/ReactJs/data.js b/apps/demos/Demos/Charts/Palette/ReactJs/data.js
index ae4d40a02ab4..e940f4c6bb27 100644
--- a/apps/demos/Demos/Charts/Palette/ReactJs/data.js
+++ b/apps/demos/Demos/Charts/Palette/ReactJs/data.js
@@ -1,5 +1,6 @@
 export const paletteCollection = [
   'Material',
+  'Fluent Next',
   'Soft Pastel',
   'Harmony Light',
   'Pastel',
diff --git a/apps/demos/Demos/Charts/Palette/ReactJs/styles.css b/apps/demos/Demos/Charts/Palette/ReactJs/styles.css
index 46988ee9974d..157c9dd3dbbf 100644
--- a/apps/demos/Demos/Charts/Palette/ReactJs/styles.css
+++ b/apps/demos/Demos/Charts/Palette/ReactJs/styles.css
@@ -22,7 +22,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/Palette/Vue/App.vue b/apps/demos/Demos/Charts/Palette/Vue/App.vue
index 49172a40fb69..8482452d4864 100644
--- a/apps/demos/Demos/Charts/Palette/Vue/App.vue
+++ b/apps/demos/Demos/Charts/Palette/Vue/App.vue
@@ -86,7 +86,7 @@ const baseColors = computed(() => getPalette(palette.value).simpleSet);
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/Palette/Vue/data.ts b/apps/demos/Demos/Charts/Palette/Vue/data.ts
index 6d55f97a112c..c9a3a4af018b 100644
--- a/apps/demos/Demos/Charts/Palette/Vue/data.ts
+++ b/apps/demos/Demos/Charts/Palette/Vue/data.ts
@@ -1,7 +1,7 @@
 import { type DxPieChartTypes } from 'devextreme-vue/pie-chart';
 import { type PaletteExtensionMode } from 'devextreme-vue/common/charts';
 
-export const paletteCollection: DxPieChartTypes.Palette[] = ['Material', 'Soft Pastel', 'Harmony Light', 'Pastel', 'Bright', 'Soft', 'Ocean', 'Office', 'Vintage', 'Violet', 'Carmine', 'Dark Moon', 'Soft Blue', 'Dark Violet', 'Green Mist'];
+export const paletteCollection: DxPieChartTypes.Palette[] = ['Material', 'Fluent Next', 'Soft Pastel', 'Harmony Light', 'Pastel', 'Bright', 'Soft', 'Ocean', 'Office', 'Vintage', 'Violet', 'Carmine', 'Dark Moon', 'Soft Blue', 'Dark Violet', 'Green Mist'];
 export const paletteExtensionModes: PaletteExtensionMode[] = ['alternate', 'blend', 'extrapolate'];
 
 const data = [];
diff --git a/apps/demos/Demos/Charts/Palette/jQuery/data.js b/apps/demos/Demos/Charts/Palette/jQuery/data.js
index e3ae6841fd7f..7e36294ba5f1 100644
--- a/apps/demos/Demos/Charts/Palette/jQuery/data.js
+++ b/apps/demos/Demos/Charts/Palette/jQuery/data.js
@@ -1,4 +1,4 @@
-const paletteCollection = ['Material', 'Soft Pastel', 'Harmony Light', 'Pastel', 'Bright', 'Soft', 'Ocean', 'Office', 'Vintage', 'Violet', 'Carmine', 'Dark Moon', 'Soft Blue', 'Dark Violet', 'Green Mist'];
+const paletteCollection = ['Material', 'Fluent Next', 'Soft Pastel', 'Harmony Light', 'Pastel', 'Bright', 'Soft', 'Ocean', 'Office', 'Vintage', 'Violet', 'Carmine', 'Dark Moon', 'Soft Blue', 'Dark Violet', 'Green Mist'];
 const paletteExtensionModes = ['alternate', 'blend', 'extrapolate'];
 const dataSource = [];
 let i;
diff --git a/apps/demos/Demos/Charts/Palette/jQuery/styles.css b/apps/demos/Demos/Charts/Palette/jQuery/styles.css
index 46988ee9974d..157c9dd3dbbf 100644
--- a/apps/demos/Demos/Charts/Palette/jQuery/styles.css
+++ b/apps/demos/Demos/Charts/Palette/jQuery/styles.css
@@ -22,7 +22,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/ParetoChart/Angular/app/app.component.css b/apps/demos/Demos/Charts/ParetoChart/Angular/app/app.component.css
index 4d0abf56d7d4..fad4914400ec 100644
--- a/apps/demos/Demos/Charts/ParetoChart/Angular/app/app.component.css
+++ b/apps/demos/Demos/Charts/ParetoChart/Angular/app/app.component.css
@@ -7,7 +7,7 @@
   font-size: 16px;
   font-weight: 500;
   padding-bottom: 5px;
-  border-bottom: 1px solid #c5c5c5;
+  border-bottom: 1px solid var(--dxds-color-border-static-light, #c5c5c5);
 }
 
 ::ng-deep .tooltip-body {
diff --git a/apps/demos/Demos/Charts/ParetoChart/React/styles.css b/apps/demos/Demos/Charts/ParetoChart/React/styles.css
index 0335aaa7842a..fe22159a3c68 100644
--- a/apps/demos/Demos/Charts/ParetoChart/React/styles.css
+++ b/apps/demos/Demos/Charts/ParetoChart/React/styles.css
@@ -7,7 +7,7 @@
   font-size: 16px;
   font-weight: 500;
   padding-bottom: 5px;
-  border-bottom: 1px solid #c5c5c5;
+  border-bottom: 1px solid var(--dxds-color-border-static-light, #c5c5c5);
 }
 
 .tooltip-body {
diff --git a/apps/demos/Demos/Charts/ParetoChart/ReactJs/styles.css b/apps/demos/Demos/Charts/ParetoChart/ReactJs/styles.css
index 0335aaa7842a..fe22159a3c68 100644
--- a/apps/demos/Demos/Charts/ParetoChart/ReactJs/styles.css
+++ b/apps/demos/Demos/Charts/ParetoChart/ReactJs/styles.css
@@ -7,7 +7,7 @@
   font-size: 16px;
   font-weight: 500;
   padding-bottom: 5px;
-  border-bottom: 1px solid #c5c5c5;
+  border-bottom: 1px solid var(--dxds-color-border-static-light, #c5c5c5);
 }
 
 .tooltip-body {
diff --git a/apps/demos/Demos/Charts/ParetoChart/Vue/App.vue b/apps/demos/Demos/Charts/ParetoChart/Vue/App.vue
index 1b1ec5d6f4aa..8d15c361dc05 100644
--- a/apps/demos/Demos/Charts/ParetoChart/Vue/App.vue
+++ b/apps/demos/Demos/Charts/ParetoChart/Vue/App.vue
@@ -113,7 +113,7 @@ const dataSource = data.map(({ count, complaint }) => {
   font-size: 16px;
   font-weight: 500;
   padding-bottom: 5px;
-  border-bottom: 1px solid #c5c5c5;
+  border-bottom: 1px solid var(--dxds-color-border-static-light, #c5c5c5);
 }
 
 .tooltip-body {
diff --git a/apps/demos/Demos/Charts/ParetoChart/jQuery/styles.css b/apps/demos/Demos/Charts/ParetoChart/jQuery/styles.css
index 0335aaa7842a..fe22159a3c68 100644
--- a/apps/demos/Demos/Charts/ParetoChart/jQuery/styles.css
+++ b/apps/demos/Demos/Charts/ParetoChart/jQuery/styles.css
@@ -7,7 +7,7 @@
   font-size: 16px;
   font-weight: 500;
   padding-bottom: 5px;
-  border-bottom: 1px solid #c5c5c5;
+  border-bottom: 1px solid var(--dxds-color-border-static-light, #c5c5c5);
 }
 
 .tooltip-body {
diff --git a/apps/demos/Demos/Charts/PieResolveLabelOverlap/Angular/app/app.component.css b/apps/demos/Demos/Charts/PieResolveLabelOverlap/Angular/app/app.component.css
index 0835def38eb2..dbd3846c2c03 100644
--- a/apps/demos/Demos/Charts/PieResolveLabelOverlap/Angular/app/app.component.css
+++ b/apps/demos/Demos/Charts/PieResolveLabelOverlap/Angular/app/app.component.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/PieResolveLabelOverlap/React/styles.css b/apps/demos/Demos/Charts/PieResolveLabelOverlap/React/styles.css
index 7d3c15112cbe..5f3b009bf38b 100644
--- a/apps/demos/Demos/Charts/PieResolveLabelOverlap/React/styles.css
+++ b/apps/demos/Demos/Charts/PieResolveLabelOverlap/React/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/PieResolveLabelOverlap/ReactJs/styles.css b/apps/demos/Demos/Charts/PieResolveLabelOverlap/ReactJs/styles.css
index 7d3c15112cbe..5f3b009bf38b 100644
--- a/apps/demos/Demos/Charts/PieResolveLabelOverlap/ReactJs/styles.css
+++ b/apps/demos/Demos/Charts/PieResolveLabelOverlap/ReactJs/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/PieResolveLabelOverlap/Vue/App.vue b/apps/demos/Demos/Charts/PieResolveLabelOverlap/Vue/App.vue
index 37d41d1dacd8..aa25c9000f8e 100644
--- a/apps/demos/Demos/Charts/PieResolveLabelOverlap/Vue/App.vue
+++ b/apps/demos/Demos/Charts/PieResolveLabelOverlap/Vue/App.vue
@@ -57,7 +57,7 @@ const formatText = ({ argumentText, percentText }: { argumentText: string; perce
 <style>
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/PieResolveLabelOverlap/jQuery/styles.css b/apps/demos/Demos/Charts/PieResolveLabelOverlap/jQuery/styles.css
index 7d3c15112cbe..5f3b009bf38b 100644
--- a/apps/demos/Demos/Charts/PieResolveLabelOverlap/jQuery/styles.css
+++ b/apps/demos/Demos/Charts/PieResolveLabelOverlap/jQuery/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/PointsAggregation/Angular/app/app.component.css b/apps/demos/Demos/Charts/PointsAggregation/Angular/app/app.component.css
index 71f71ddfc793..957540547a97 100644
--- a/apps/demos/Demos/Charts/PointsAggregation/Angular/app/app.component.css
+++ b/apps/demos/Demos/Charts/PointsAggregation/Angular/app/app.component.css
@@ -11,7 +11,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/Charts/PointsAggregation/React/styles.css b/apps/demos/Demos/Charts/PointsAggregation/React/styles.css
index 908824efe9fd..0c15f73159fa 100644
--- a/apps/demos/Demos/Charts/PointsAggregation/React/styles.css
+++ b/apps/demos/Demos/Charts/PointsAggregation/React/styles.css
@@ -10,7 +10,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/Charts/PointsAggregation/ReactJs/styles.css b/apps/demos/Demos/Charts/PointsAggregation/ReactJs/styles.css
index 908824efe9fd..0c15f73159fa 100644
--- a/apps/demos/Demos/Charts/PointsAggregation/ReactJs/styles.css
+++ b/apps/demos/Demos/Charts/PointsAggregation/ReactJs/styles.css
@@ -10,7 +10,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/Charts/PointsAggregation/Vue/App.vue b/apps/demos/Demos/Charts/PointsAggregation/Vue/App.vue
index 70d17a9d9cb6..c831833d7e41 100644
--- a/apps/demos/Demos/Charts/PointsAggregation/Vue/App.vue
+++ b/apps/demos/Demos/Charts/PointsAggregation/Vue/App.vue
@@ -179,7 +179,7 @@ function customizeTooltip(pointInfo: any) {
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/Charts/PointsAggregation/jQuery/styles.css b/apps/demos/Demos/Charts/PointsAggregation/jQuery/styles.css
index a3154b06dce1..f78925245335 100644
--- a/apps/demos/Demos/Charts/PointsAggregation/jQuery/styles.css
+++ b/apps/demos/Demos/Charts/PointsAggregation/jQuery/styles.css
@@ -11,7 +11,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/Charts/ResolveLabelOverlap/Angular/app/app.component.css b/apps/demos/Demos/Charts/ResolveLabelOverlap/Angular/app/app.component.css
index 6bb5e441adcd..bbd967b14c04 100644
--- a/apps/demos/Demos/Charts/ResolveLabelOverlap/Angular/app/app.component.css
+++ b/apps/demos/Demos/Charts/ResolveLabelOverlap/Angular/app/app.component.css
@@ -7,7 +7,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/Charts/ResolveLabelOverlap/React/styles.css b/apps/demos/Demos/Charts/ResolveLabelOverlap/React/styles.css
index 6bb5e441adcd..bbd967b14c04 100644
--- a/apps/demos/Demos/Charts/ResolveLabelOverlap/React/styles.css
+++ b/apps/demos/Demos/Charts/ResolveLabelOverlap/React/styles.css
@@ -7,7 +7,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/Charts/ResolveLabelOverlap/ReactJs/styles.css b/apps/demos/Demos/Charts/ResolveLabelOverlap/ReactJs/styles.css
index 6bb5e441adcd..bbd967b14c04 100644
--- a/apps/demos/Demos/Charts/ResolveLabelOverlap/ReactJs/styles.css
+++ b/apps/demos/Demos/Charts/ResolveLabelOverlap/ReactJs/styles.css
@@ -7,7 +7,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/Charts/ResolveLabelOverlap/Vue/App.vue b/apps/demos/Demos/Charts/ResolveLabelOverlap/Vue/App.vue
index 8114347997aa..b7a6c913b34c 100644
--- a/apps/demos/Demos/Charts/ResolveLabelOverlap/Vue/App.vue
+++ b/apps/demos/Demos/Charts/ResolveLabelOverlap/Vue/App.vue
@@ -52,7 +52,7 @@ const currentMode = ref<DxChartTypes.ChartsAxisLabelOverlap>(overlappingModes[0]
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/Charts/ResolveLabelOverlap/jQuery/styles.css b/apps/demos/Demos/Charts/ResolveLabelOverlap/jQuery/styles.css
index 6bb5e441adcd..bbd967b14c04 100644
--- a/apps/demos/Demos/Charts/ResolveLabelOverlap/jQuery/styles.css
+++ b/apps/demos/Demos/Charts/ResolveLabelOverlap/jQuery/styles.css
@@ -7,7 +7,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/Charts/ScaleBreaks/Angular/app/app.component.css b/apps/demos/Demos/Charts/ScaleBreaks/Angular/app/app.component.css
index c78f3a5a3ffa..17382e5704ff 100644
--- a/apps/demos/Demos/Charts/ScaleBreaks/Angular/app/app.component.css
+++ b/apps/demos/Demos/Charts/ScaleBreaks/Angular/app/app.component.css
@@ -4,7 +4,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/ScaleBreaks/React/styles.css b/apps/demos/Demos/Charts/ScaleBreaks/React/styles.css
index a63b01f6f118..23860574f21d 100644
--- a/apps/demos/Demos/Charts/ScaleBreaks/React/styles.css
+++ b/apps/demos/Demos/Charts/ScaleBreaks/React/styles.css
@@ -4,7 +4,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/ScaleBreaks/ReactJs/styles.css b/apps/demos/Demos/Charts/ScaleBreaks/ReactJs/styles.css
index a63b01f6f118..23860574f21d 100644
--- a/apps/demos/Demos/Charts/ScaleBreaks/ReactJs/styles.css
+++ b/apps/demos/Demos/Charts/ScaleBreaks/ReactJs/styles.css
@@ -4,7 +4,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/ScaleBreaks/Vue/App.vue b/apps/demos/Demos/Charts/ScaleBreaks/Vue/App.vue
index 0f947e7b50f7..db5e4e0eb6be 100644
--- a/apps/demos/Demos/Charts/ScaleBreaks/Vue/App.vue
+++ b/apps/demos/Demos/Charts/ScaleBreaks/Vue/App.vue
@@ -79,7 +79,7 @@ const breaksCountValue = ref(3);
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/ScaleBreaks/jQuery/styles.css b/apps/demos/Demos/Charts/ScaleBreaks/jQuery/styles.css
index a63b01f6f118..23860574f21d 100644
--- a/apps/demos/Demos/Charts/ScaleBreaks/jQuery/styles.css
+++ b/apps/demos/Demos/Charts/ScaleBreaks/jQuery/styles.css
@@ -4,7 +4,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/SimpleBullets/Angular/app/app.component.css b/apps/demos/Demos/Charts/SimpleBullets/Angular/app/app.component.css
index ccba852d0e8f..ce6814813f4e 100644
--- a/apps/demos/Demos/Charts/SimpleBullets/Angular/app/app.component.css
+++ b/apps/demos/Demos/Charts/SimpleBullets/Angular/app/app.component.css
@@ -6,7 +6,7 @@
 ::ng-deep .demo-table {
   margin-top: 80px;
   width: 100%;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
   border-collapse: collapse;
 }
 
@@ -15,20 +15,20 @@
   font-weight: 400;
   width: 200px;
   padding: 25px 10px 5px;
-  border: 1px solid #e5e5e5;
+  border: 1px solid var(--dxds-color-border-subtle, #e5e5e5);
 }
 
 ::ng-deep .demo-table th {
   padding: 25px 15px 20px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 ::ng-deep .demo-table tr:nth-child(2) td {
-  border-top: 1px solid #c2c2c2;
+  border-top: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 ::ng-deep .demo-table td:first-of-type {
-  border-left: 1px solid #c2c2c2;
+  border-left: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 ::ng-deep .demo-table .bullet {
diff --git a/apps/demos/Demos/Charts/SimpleBullets/React/styles.css b/apps/demos/Demos/Charts/SimpleBullets/React/styles.css
index 70c83049c2a3..dc99b1606598 100644
--- a/apps/demos/Demos/Charts/SimpleBullets/React/styles.css
+++ b/apps/demos/Demos/Charts/SimpleBullets/React/styles.css
@@ -6,7 +6,7 @@
 .demo-table {
   margin-top: 80px;
   width: 100%;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
   border-collapse: collapse;
 }
 
@@ -15,20 +15,20 @@
   font-weight: 400;
   width: 200px;
   padding: 25px 10px 5px;
-  border: 1px solid #e5e5e5;
+  border: 1px solid var(--dxds-color-border-subtle, #e5e5e5);
 }
 
 .demo-table th {
   padding: 25px 15px 20px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table tr:nth-child(2) td {
-  border-top: 1px solid #c2c2c2;
+  border-top: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table td:first-of-type {
-  border-left: 1px solid #c2c2c2;
+  border-left: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table .bullet {
diff --git a/apps/demos/Demos/Charts/SimpleBullets/ReactJs/styles.css b/apps/demos/Demos/Charts/SimpleBullets/ReactJs/styles.css
index 70c83049c2a3..dc99b1606598 100644
--- a/apps/demos/Demos/Charts/SimpleBullets/ReactJs/styles.css
+++ b/apps/demos/Demos/Charts/SimpleBullets/ReactJs/styles.css
@@ -6,7 +6,7 @@
 .demo-table {
   margin-top: 80px;
   width: 100%;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
   border-collapse: collapse;
 }
 
@@ -15,20 +15,20 @@
   font-weight: 400;
   width: 200px;
   padding: 25px 10px 5px;
-  border: 1px solid #e5e5e5;
+  border: 1px solid var(--dxds-color-border-subtle, #e5e5e5);
 }
 
 .demo-table th {
   padding: 25px 15px 20px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table tr:nth-child(2) td {
-  border-top: 1px solid #c2c2c2;
+  border-top: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table td:first-of-type {
-  border-left: 1px solid #c2c2c2;
+  border-left: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table .bullet {
diff --git a/apps/demos/Demos/Charts/SimpleBullets/Vue/App.vue b/apps/demos/Demos/Charts/SimpleBullets/Vue/App.vue
index 133b92d9607e..2ad972f8f2f3 100644
--- a/apps/demos/Demos/Charts/SimpleBullets/Vue/App.vue
+++ b/apps/demos/Demos/Charts/SimpleBullets/Vue/App.vue
@@ -52,7 +52,7 @@ const customizeTooltip = ({ value, target }: any) => ({
 .demo-table {
   margin-top: 80px;
   width: 100%;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
   border-collapse: collapse;
 }
 
@@ -61,20 +61,20 @@ const customizeTooltip = ({ value, target }: any) => ({
   font-weight: 400;
   width: 200px;
   padding: 25px 10px 5px;
-  border: 1px solid #e5e5e5;
+  border: 1px solid var(--dxds-color-border-subtle, #e5e5e5);
 }
 
 .demo-table th {
   padding: 25px 15px 20px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table tr:nth-child(2) td {
-  border-top: 1px solid #c2c2c2;
+  border-top: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table td:first-of-type {
-  border-left: 1px solid #c2c2c2;
+  border-left: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table .bullet {
diff --git a/apps/demos/Demos/Charts/SimpleBullets/jQuery/styles.css b/apps/demos/Demos/Charts/SimpleBullets/jQuery/styles.css
index 7e01360b6836..790be22437b5 100644
--- a/apps/demos/Demos/Charts/SimpleBullets/jQuery/styles.css
+++ b/apps/demos/Demos/Charts/SimpleBullets/jQuery/styles.css
@@ -6,7 +6,7 @@
 .demo-table {
   margin-top: 80px;
   width: 100%;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
   border-collapse: collapse;
 }
 
@@ -15,20 +15,20 @@
   font-weight: 400;
   width: 200px;
   padding: 25px 10px 5px;
-  border: 1px solid #e5e5e5;
+  border: 1px solid var(--dxds-color-border-subtle, #e5e5e5);
 }
 
 .demo-table th {
   padding: 25px 15px 20px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table tr:nth-child(2) td {
-  border-top: 1px solid #c2c2c2;
+  border-top: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table td:first-of-type {
-  border-left: 1px solid #c2c2c2;
+  border-left: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table .bullet {
diff --git a/apps/demos/Demos/Charts/SimpleSparklines/Angular/app/app.component.css b/apps/demos/Demos/Charts/SimpleSparklines/Angular/app/app.component.css
index 402fd3bc24ad..c9c1d5910bc6 100644
--- a/apps/demos/Demos/Charts/SimpleSparklines/Angular/app/app.component.css
+++ b/apps/demos/Demos/Charts/SimpleSparklines/Angular/app/app.component.css
@@ -4,7 +4,7 @@
 
 ::ng-deep .demo-table {
   width: 100%;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
   border-collapse: collapse;
 }
 
@@ -13,20 +13,20 @@
   font-weight: 400;
   width: 200px;
   padding: 25px 10px 5px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 ::ng-deep .demo-table th {
   padding: 25px 15px 20px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 ::ng-deep .demo-table tr:nth-child(2) td {
-  border-top: 1px solid #c2c2c2;
+  border-top: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 ::ng-deep .demo-table td:first-of-type {
-  border-left: 1px solid #c2c2c2;
+  border-left: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 ::ng-deep .demo-table .sparkline {
diff --git a/apps/demos/Demos/Charts/SimpleSparklines/React/styles.css b/apps/demos/Demos/Charts/SimpleSparklines/React/styles.css
index 24db67de5f3b..3f9715866346 100644
--- a/apps/demos/Demos/Charts/SimpleSparklines/React/styles.css
+++ b/apps/demos/Demos/Charts/SimpleSparklines/React/styles.css
@@ -4,7 +4,7 @@
 
 .demo-table {
   width: 100%;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
   border-collapse: collapse;
 }
 
@@ -13,20 +13,20 @@
   font-weight: 400;
   width: 200px;
   padding: 25px 10px 5px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table th {
   padding: 25px 15px 20px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table tr:nth-child(2) td {
-  border-top: 1px solid #c2c2c2;
+  border-top: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table td:first-of-type {
-  border-left: 1px solid #c2c2c2;
+  border-left: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table .sparkline {
diff --git a/apps/demos/Demos/Charts/SimpleSparklines/ReactJs/styles.css b/apps/demos/Demos/Charts/SimpleSparklines/ReactJs/styles.css
index 24db67de5f3b..3f9715866346 100644
--- a/apps/demos/Demos/Charts/SimpleSparklines/ReactJs/styles.css
+++ b/apps/demos/Demos/Charts/SimpleSparklines/ReactJs/styles.css
@@ -4,7 +4,7 @@
 
 .demo-table {
   width: 100%;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
   border-collapse: collapse;
 }
 
@@ -13,20 +13,20 @@
   font-weight: 400;
   width: 200px;
   padding: 25px 10px 5px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table th {
   padding: 25px 15px 20px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table tr:nth-child(2) td {
-  border-top: 1px solid #c2c2c2;
+  border-top: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table td:first-of-type {
-  border-left: 1px solid #c2c2c2;
+  border-left: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table .sparkline {
diff --git a/apps/demos/Demos/Charts/SimpleSparklines/Vue/App.vue b/apps/demos/Demos/Charts/SimpleSparklines/Vue/App.vue
index cce4276a7c9f..fbba71b7363f 100644
--- a/apps/demos/Demos/Charts/SimpleSparklines/Vue/App.vue
+++ b/apps/demos/Demos/Charts/SimpleSparklines/Vue/App.vue
@@ -32,7 +32,7 @@ const years = ['2021', '2022', '2023'];
 
 .demo-table {
   width: 100%;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
   border-collapse: collapse;
 }
 
@@ -40,7 +40,7 @@ const years = ['2021', '2022', '2023'];
   font-weight: 400;
   width: 200px;
   padding: 25px 15px 20px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .long-title h3 {
diff --git a/apps/demos/Demos/Charts/SimpleSparklines/Vue/RowTemplate.vue b/apps/demos/Demos/Charts/SimpleSparklines/Vue/RowTemplate.vue
index 6f82dd7db275..c8af02d52e02 100644
--- a/apps/demos/Demos/Charts/SimpleSparklines/Vue/RowTemplate.vue
+++ b/apps/demos/Demos/Charts/SimpleSparklines/Vue/RowTemplate.vue
@@ -71,15 +71,15 @@ withDefaults(defineProps<{
   font-weight: 400;
   width: 200px;
   padding: 25px 10px 5px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .rows-content tr:nth-child(2) td {
-  border-top: 1px solid #c2c2c2;
+  border-top: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .rows-content td:first-of-type {
-  border-left: 1px solid #c2c2c2;
+  border-left: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .rows-content .sparkline {
diff --git a/apps/demos/Demos/Charts/SimpleSparklines/jQuery/styles.css b/apps/demos/Demos/Charts/SimpleSparklines/jQuery/styles.css
index 24db67de5f3b..3f9715866346 100644
--- a/apps/demos/Demos/Charts/SimpleSparklines/jQuery/styles.css
+++ b/apps/demos/Demos/Charts/SimpleSparklines/jQuery/styles.css
@@ -4,7 +4,7 @@
 
 .demo-table {
   width: 100%;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
   border-collapse: collapse;
 }
 
@@ -13,20 +13,20 @@
   font-weight: 400;
   width: 200px;
   padding: 25px 10px 5px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table th {
   padding: 25px 15px 20px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table tr:nth-child(2) td {
-  border-top: 1px solid #c2c2c2;
+  border-top: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table td:first-of-type {
-  border-left: 1px solid #c2c2c2;
+  border-left: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table .sparkline {
diff --git a/apps/demos/Demos/Charts/Spline/Angular/app/app.component.css b/apps/demos/Demos/Charts/Spline/Angular/app/app.component.css
index a87c14188457..80f0b5ddf367 100644
--- a/apps/demos/Demos/Charts/Spline/Angular/app/app.component.css
+++ b/apps/demos/Demos/Charts/Spline/Angular/app/app.component.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/Spline/React/styles.css b/apps/demos/Demos/Charts/Spline/React/styles.css
index df540e8ab03d..33a6a74498e0 100644
--- a/apps/demos/Demos/Charts/Spline/React/styles.css
+++ b/apps/demos/Demos/Charts/Spline/React/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/Spline/ReactJs/styles.css b/apps/demos/Demos/Charts/Spline/ReactJs/styles.css
index df540e8ab03d..33a6a74498e0 100644
--- a/apps/demos/Demos/Charts/Spline/ReactJs/styles.css
+++ b/apps/demos/Demos/Charts/Spline/ReactJs/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/Spline/Vue/App.vue b/apps/demos/Demos/Charts/Spline/Vue/App.vue
index 49fd5e6ba8ef..7a004d857081 100644
--- a/apps/demos/Demos/Charts/Spline/Vue/App.vue
+++ b/apps/demos/Demos/Charts/Spline/Vue/App.vue
@@ -74,7 +74,7 @@ const type = ref(types[0]);
 <style>
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/Spline/jQuery/styles.css b/apps/demos/Demos/Charts/Spline/jQuery/styles.css
index df540e8ab03d..33a6a74498e0 100644
--- a/apps/demos/Demos/Charts/Spline/jQuery/styles.css
+++ b/apps/demos/Demos/Charts/Spline/jQuery/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/SplineArea/Angular/app/app.component.css b/apps/demos/Demos/Charts/SplineArea/Angular/app/app.component.css
index a87c14188457..80f0b5ddf367 100644
--- a/apps/demos/Demos/Charts/SplineArea/Angular/app/app.component.css
+++ b/apps/demos/Demos/Charts/SplineArea/Angular/app/app.component.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/SplineArea/React/styles.css b/apps/demos/Demos/Charts/SplineArea/React/styles.css
index df540e8ab03d..33a6a74498e0 100644
--- a/apps/demos/Demos/Charts/SplineArea/React/styles.css
+++ b/apps/demos/Demos/Charts/SplineArea/React/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/SplineArea/ReactJs/styles.css b/apps/demos/Demos/Charts/SplineArea/ReactJs/styles.css
index df540e8ab03d..33a6a74498e0 100644
--- a/apps/demos/Demos/Charts/SplineArea/ReactJs/styles.css
+++ b/apps/demos/Demos/Charts/SplineArea/ReactJs/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/SplineArea/Vue/App.vue b/apps/demos/Demos/Charts/SplineArea/Vue/App.vue
index f08be7897fc9..ed605563e291 100644
--- a/apps/demos/Demos/Charts/SplineArea/Vue/App.vue
+++ b/apps/demos/Demos/Charts/SplineArea/Vue/App.vue
@@ -59,7 +59,7 @@ const type = ref(types[0]);
 <style>
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/SplineArea/jQuery/styles.css b/apps/demos/Demos/Charts/SplineArea/jQuery/styles.css
index df540e8ab03d..33a6a74498e0 100644
--- a/apps/demos/Demos/Charts/SplineArea/jQuery/styles.css
+++ b/apps/demos/Demos/Charts/SplineArea/jQuery/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/TilingAlgorithms/Angular/app/app.component.css b/apps/demos/Demos/Charts/TilingAlgorithms/Angular/app/app.component.css
index 2fd056ab0405..abb45c8b76ef 100644
--- a/apps/demos/Demos/Charts/TilingAlgorithms/Angular/app/app.component.css
+++ b/apps/demos/Demos/Charts/TilingAlgorithms/Angular/app/app.component.css
@@ -8,7 +8,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/TilingAlgorithms/React/styles.css b/apps/demos/Demos/Charts/TilingAlgorithms/React/styles.css
index dff2f4cb1e06..289008a26156 100644
--- a/apps/demos/Demos/Charts/TilingAlgorithms/React/styles.css
+++ b/apps/demos/Demos/Charts/TilingAlgorithms/React/styles.css
@@ -8,7 +8,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/TilingAlgorithms/ReactJs/styles.css b/apps/demos/Demos/Charts/TilingAlgorithms/ReactJs/styles.css
index dff2f4cb1e06..289008a26156 100644
--- a/apps/demos/Demos/Charts/TilingAlgorithms/ReactJs/styles.css
+++ b/apps/demos/Demos/Charts/TilingAlgorithms/ReactJs/styles.css
@@ -8,7 +8,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/TilingAlgorithms/Vue/App.vue b/apps/demos/Demos/Charts/TilingAlgorithms/Vue/App.vue
index 6708487731fb..b93ed787ef1d 100644
--- a/apps/demos/Demos/Charts/TilingAlgorithms/Vue/App.vue
+++ b/apps/demos/Demos/Charts/TilingAlgorithms/Vue/App.vue
@@ -92,7 +92,7 @@ function customizeTooltip({
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/TilingAlgorithms/jQuery/styles.css b/apps/demos/Demos/Charts/TilingAlgorithms/jQuery/styles.css
index dff2f4cb1e06..289008a26156 100644
--- a/apps/demos/Demos/Charts/TilingAlgorithms/jQuery/styles.css
+++ b/apps/demos/Demos/Charts/TilingAlgorithms/jQuery/styles.css
@@ -8,7 +8,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Charts/TooltipCustomization/Angular/app/app.component.css b/apps/demos/Demos/Charts/TooltipCustomization/Angular/app/app.component.css
index 65a705acdd27..a72e27cbbf44 100644
--- a/apps/demos/Demos/Charts/TooltipCustomization/Angular/app/app.component.css
+++ b/apps/demos/Demos/Charts/TooltipCustomization/Angular/app/app.component.css
@@ -12,7 +12,7 @@
   display: block;
   margin: 0 5px 0 0;
   float: left;
-  border: 1px solid rgba(191, 191, 191, 0.25);
+  border: 1px solid var(--dxds-color-border-subtle, rgba(191, 191, 191, 0.25));
 }
 
 ::ng-deep .state-tooltip > h4 {
diff --git a/apps/demos/Demos/Charts/TooltipCustomization/React/styles.css b/apps/demos/Demos/Charts/TooltipCustomization/React/styles.css
index baae8cf4415f..781b9e6b6c3b 100644
--- a/apps/demos/Demos/Charts/TooltipCustomization/React/styles.css
+++ b/apps/demos/Demos/Charts/TooltipCustomization/React/styles.css
@@ -12,7 +12,7 @@
   display: block;
   margin: 0 5px 0 0;
   float: left;
-  border: 1px solid rgba(191, 191, 191, 0.25);
+  border: 1px solid var(--dxds-color-border-subtle, rgba(191, 191, 191, 0.25));
 }
 
 .state-tooltip > h4 {
diff --git a/apps/demos/Demos/Charts/TooltipCustomization/ReactJs/styles.css b/apps/demos/Demos/Charts/TooltipCustomization/ReactJs/styles.css
index baae8cf4415f..781b9e6b6c3b 100644
--- a/apps/demos/Demos/Charts/TooltipCustomization/ReactJs/styles.css
+++ b/apps/demos/Demos/Charts/TooltipCustomization/ReactJs/styles.css
@@ -12,7 +12,7 @@
   display: block;
   margin: 0 5px 0 0;
   float: left;
-  border: 1px solid rgba(191, 191, 191, 0.25);
+  border: 1px solid var(--dxds-color-border-subtle, rgba(191, 191, 191, 0.25));
 }
 
 .state-tooltip > h4 {
diff --git a/apps/demos/Demos/Charts/TooltipCustomization/Vue/TooltipTemplate.vue b/apps/demos/Demos/Charts/TooltipCustomization/Vue/TooltipTemplate.vue
index 9dba6c4675c5..92c589ac192e 100644
--- a/apps/demos/Demos/Charts/TooltipCustomization/Vue/TooltipTemplate.vue
+++ b/apps/demos/Demos/Charts/TooltipCustomization/Vue/TooltipTemplate.vue
@@ -43,7 +43,7 @@ const formatNumber = new Intl.NumberFormat('en-US', {
   display: block;
   margin: 0 5px 0 0;
   float: left;
-  border: 1px solid rgba(191, 191, 191, 0.25);
+  border: 1px solid var(--dxds-color-border-subtle, rgba(191, 191, 191, 0.25));
 }
 
 .state-tooltip > h4 {
diff --git a/apps/demos/Demos/Charts/TooltipCustomization/jQuery/styles.css b/apps/demos/Demos/Charts/TooltipCustomization/jQuery/styles.css
index baae8cf4415f..781b9e6b6c3b 100644
--- a/apps/demos/Demos/Charts/TooltipCustomization/jQuery/styles.css
+++ b/apps/demos/Demos/Charts/TooltipCustomization/jQuery/styles.css
@@ -12,7 +12,7 @@
   display: block;
   margin: 0 5px 0 0;
   float: left;
-  border: 1px solid rgba(191, 191, 191, 0.25);
+  border: 1px solid var(--dxds-color-border-subtle, rgba(191, 191, 191, 0.25));
 }
 
 .state-tooltip > h4 {
diff --git a/apps/demos/Demos/Charts/WinlossSparklines/Angular/app/app.component.css b/apps/demos/Demos/Charts/WinlossSparklines/Angular/app/app.component.css
index 402fd3bc24ad..c9c1d5910bc6 100644
--- a/apps/demos/Demos/Charts/WinlossSparklines/Angular/app/app.component.css
+++ b/apps/demos/Demos/Charts/WinlossSparklines/Angular/app/app.component.css
@@ -4,7 +4,7 @@
 
 ::ng-deep .demo-table {
   width: 100%;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
   border-collapse: collapse;
 }
 
@@ -13,20 +13,20 @@
   font-weight: 400;
   width: 200px;
   padding: 25px 10px 5px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 ::ng-deep .demo-table th {
   padding: 25px 15px 20px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 ::ng-deep .demo-table tr:nth-child(2) td {
-  border-top: 1px solid #c2c2c2;
+  border-top: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 ::ng-deep .demo-table td:first-of-type {
-  border-left: 1px solid #c2c2c2;
+  border-left: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 ::ng-deep .demo-table .sparkline {
diff --git a/apps/demos/Demos/Charts/WinlossSparklines/React/styles.css b/apps/demos/Demos/Charts/WinlossSparklines/React/styles.css
index 24db67de5f3b..3f9715866346 100644
--- a/apps/demos/Demos/Charts/WinlossSparklines/React/styles.css
+++ b/apps/demos/Demos/Charts/WinlossSparklines/React/styles.css
@@ -4,7 +4,7 @@
 
 .demo-table {
   width: 100%;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
   border-collapse: collapse;
 }
 
@@ -13,20 +13,20 @@
   font-weight: 400;
   width: 200px;
   padding: 25px 10px 5px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table th {
   padding: 25px 15px 20px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table tr:nth-child(2) td {
-  border-top: 1px solid #c2c2c2;
+  border-top: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table td:first-of-type {
-  border-left: 1px solid #c2c2c2;
+  border-left: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table .sparkline {
diff --git a/apps/demos/Demos/Charts/WinlossSparklines/ReactJs/styles.css b/apps/demos/Demos/Charts/WinlossSparklines/ReactJs/styles.css
index 24db67de5f3b..3f9715866346 100644
--- a/apps/demos/Demos/Charts/WinlossSparklines/ReactJs/styles.css
+++ b/apps/demos/Demos/Charts/WinlossSparklines/ReactJs/styles.css
@@ -4,7 +4,7 @@
 
 .demo-table {
   width: 100%;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
   border-collapse: collapse;
 }
 
@@ -13,20 +13,20 @@
   font-weight: 400;
   width: 200px;
   padding: 25px 10px 5px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table th {
   padding: 25px 15px 20px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table tr:nth-child(2) td {
-  border-top: 1px solid #c2c2c2;
+  border-top: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table td:first-of-type {
-  border-left: 1px solid #c2c2c2;
+  border-left: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table .sparkline {
diff --git a/apps/demos/Demos/Charts/WinlossSparklines/Vue/App.vue b/apps/demos/Demos/Charts/WinlossSparklines/Vue/App.vue
index f554930cbfb2..4bbf424925ca 100644
--- a/apps/demos/Demos/Charts/WinlossSparklines/Vue/App.vue
+++ b/apps/demos/Demos/Charts/WinlossSparklines/Vue/App.vue
@@ -35,7 +35,7 @@ const years = ['2021', '2022', '2023'];
 
 .demo-table {
   width: 100%;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
   border-collapse: collapse;
 }
 
@@ -43,7 +43,7 @@ const years = ['2021', '2022', '2023'];
   font-weight: 400;
   width: 200px;
   padding: 25px 15px 20px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .long-title h3 {
diff --git a/apps/demos/Demos/Charts/WinlossSparklines/Vue/RowTemplate.vue b/apps/demos/Demos/Charts/WinlossSparklines/Vue/RowTemplate.vue
index 886f8e473462..fbf21d5f9f13 100644
--- a/apps/demos/Demos/Charts/WinlossSparklines/Vue/RowTemplate.vue
+++ b/apps/demos/Demos/Charts/WinlossSparklines/Vue/RowTemplate.vue
@@ -69,15 +69,15 @@ withDefaults(defineProps<{
   font-weight: 400;
   width: 200px;
   padding: 25px 10px 5px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .rows-content tr:nth-child(2) td {
-  border-top: 1px solid #c2c2c2;
+  border-top: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .rows-content td:first-of-type {
-  border-left: 1px solid #c2c2c2;
+  border-left: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .rows-content .sparkline {
diff --git a/apps/demos/Demos/Charts/WinlossSparklines/jQuery/styles.css b/apps/demos/Demos/Charts/WinlossSparklines/jQuery/styles.css
index 24db67de5f3b..3f9715866346 100644
--- a/apps/demos/Demos/Charts/WinlossSparklines/jQuery/styles.css
+++ b/apps/demos/Demos/Charts/WinlossSparklines/jQuery/styles.css
@@ -4,7 +4,7 @@
 
 .demo-table {
   width: 100%;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
   border-collapse: collapse;
 }
 
@@ -13,20 +13,20 @@
   font-weight: 400;
   width: 200px;
   padding: 25px 10px 5px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table th {
   padding: 25px 15px 20px;
-  border: 1px solid #c2c2c2;
+  border: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table tr:nth-child(2) td {
-  border-top: 1px solid #c2c2c2;
+  border-top: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table td:first-of-type {
-  border-left: 1px solid #c2c2c2;
+  border-left: 1px solid var(--dxds-color-border, #c2c2c2);
 }
 
 .demo-table .sparkline {
diff --git a/apps/demos/Demos/Chat/Customization/Angular/app/app.component.css b/apps/demos/Demos/Chat/Customization/Angular/app/app.component.css
index 9c2d96ac5b00..94b94eb60a9f 100644
--- a/apps/demos/Demos/Chat/Customization/Angular/app/app.component.css
+++ b/apps/demos/Demos/Chat/Customization/Angular/app/app.component.css
@@ -16,7 +16,7 @@
   display: flex;
   flex-direction: column;
   min-width: 280px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   gap: 16px;
 }
 
diff --git a/apps/demos/Demos/Chat/Customization/React/styles.css b/apps/demos/Demos/Chat/Customization/React/styles.css
index 7a5b25461dbc..7edd7185a3ca 100644
--- a/apps/demos/Demos/Chat/Customization/React/styles.css
+++ b/apps/demos/Demos/Chat/Customization/React/styles.css
@@ -16,7 +16,7 @@
   display: flex;
   flex-direction: column;
   min-width: 280px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   gap: 16px;
 }
 
diff --git a/apps/demos/Demos/Chat/Customization/ReactJs/styles.css b/apps/demos/Demos/Chat/Customization/ReactJs/styles.css
index 7a5b25461dbc..7edd7185a3ca 100644
--- a/apps/demos/Demos/Chat/Customization/ReactJs/styles.css
+++ b/apps/demos/Demos/Chat/Customization/ReactJs/styles.css
@@ -16,7 +16,7 @@
   display: flex;
   flex-direction: column;
   min-width: 280px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   gap: 16px;
 }
 
diff --git a/apps/demos/Demos/Chat/Customization/Vue/App.vue b/apps/demos/Demos/Chat/Customization/Vue/App.vue
index d6c9fe8ae645..6cd21c1f4253 100644
--- a/apps/demos/Demos/Chat/Customization/Vue/App.vue
+++ b/apps/demos/Demos/Chat/Customization/Vue/App.vue
@@ -128,7 +128,7 @@ function onMessageEntered(event: DxChatTypes.MessageEnteredEvent): void {
   display: flex;
   flex-direction: column;
   min-width: 280px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   gap: 16px;
 }
 
diff --git a/apps/demos/Demos/Chat/Customization/jQuery/styles.css b/apps/demos/Demos/Chat/Customization/jQuery/styles.css
index 6c3f5f94ad9d..b90020cb9c8d 100644
--- a/apps/demos/Demos/Chat/Customization/jQuery/styles.css
+++ b/apps/demos/Demos/Chat/Customization/jQuery/styles.css
@@ -16,7 +16,7 @@
   display: flex;
   flex-direction: column;
   min-width: 280px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   gap: 16px;
 }
 
diff --git a/apps/demos/Demos/Chat/MessageEditing/Angular/app/app.component.css b/apps/demos/Demos/Chat/MessageEditing/Angular/app/app.component.css
index 16087939d3ea..f815a827e0eb 100644
--- a/apps/demos/Demos/Chat/MessageEditing/Angular/app/app.component.css
+++ b/apps/demos/Demos/Chat/MessageEditing/Angular/app/app.component.css
@@ -16,7 +16,7 @@
   display: flex;
   flex-direction: column;
   min-width: 280px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   gap: 16px;
 }
 
diff --git a/apps/demos/Demos/Chat/MessageEditing/React/styles.css b/apps/demos/Demos/Chat/MessageEditing/React/styles.css
index 7151168059d5..4d0efae758ba 100644
--- a/apps/demos/Demos/Chat/MessageEditing/React/styles.css
+++ b/apps/demos/Demos/Chat/MessageEditing/React/styles.css
@@ -16,7 +16,7 @@
   display: flex;
   flex-direction: column;
   min-width: 280px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   gap: 16px;
 }
 
diff --git a/apps/demos/Demos/Chat/MessageEditing/ReactJs/styles.css b/apps/demos/Demos/Chat/MessageEditing/ReactJs/styles.css
index 7151168059d5..4d0efae758ba 100644
--- a/apps/demos/Demos/Chat/MessageEditing/ReactJs/styles.css
+++ b/apps/demos/Demos/Chat/MessageEditing/ReactJs/styles.css
@@ -16,7 +16,7 @@
   display: flex;
   flex-direction: column;
   min-width: 280px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   gap: 16px;
 }
 
diff --git a/apps/demos/Demos/Chat/MessageEditing/Vue/App.vue b/apps/demos/Demos/Chat/MessageEditing/Vue/App.vue
index 774bee54bd07..b35f14417028 100644
--- a/apps/demos/Demos/Chat/MessageEditing/Vue/App.vue
+++ b/apps/demos/Demos/Chat/MessageEditing/Vue/App.vue
@@ -161,7 +161,7 @@ const onAllowDeletingChange = (event: DxSelectBoxTypes.ValueChangedEvent) => {
   display: flex;
   flex-direction: column;
   min-width: 280px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   gap: 16px;
 }
 
diff --git a/apps/demos/Demos/Chat/MessageEditing/jQuery/styles.css b/apps/demos/Demos/Chat/MessageEditing/jQuery/styles.css
index 30d161aa8bfd..0af97136592c 100644
--- a/apps/demos/Demos/Chat/MessageEditing/jQuery/styles.css
+++ b/apps/demos/Demos/Chat/MessageEditing/jQuery/styles.css
@@ -16,7 +16,7 @@
   display: flex;
   flex-direction: column;
   min-width: 280px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   gap: 16px;
 }
 
diff --git a/apps/demos/Demos/Chat/MessageStreaming/Angular/app/app.component.css b/apps/demos/Demos/Chat/MessageStreaming/Angular/app/app.component.css
index d3a89301022c..80dd2d78ff56 100644
--- a/apps/demos/Demos/Chat/MessageStreaming/Angular/app/app.component.css
+++ b/apps/demos/Demos/Chat/MessageStreaming/Angular/app/app.component.css
@@ -56,8 +56,8 @@
 ::ng-deep .chat-suggestion-card {
   border-radius: 12px;
   padding: 16px;
-  border: 1px solid #EBEBEB;
-  background: #FAFAFA;
+  border: 1px solid var(--dxds-color-border-subtler, #EBEBEB);
+  background: var(--dxds-color-bg-canvas, #FAFAFA);
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -71,20 +71,20 @@
 }
 
 ::ng-deep .chat-suggestion-card:hover {
-  border: 1px solid #E0E0E0;
-  background: #F5F5F5;
-  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.04), 0 4px 24px 0 rgba(0, 0, 0, 0.02);
+  border: 1px solid var(--dxds-color-border-subtle, #E0E0E0);
+  background: var(--dxds-color-bg-low, #F5F5F5);
+  box-shadow: var(--dxds-box-shadow-xs, 0 4px 12px 0 rgba(0, 0, 0, 0.04), 0 4px 24px 0 rgba(0, 0, 0, 0.02));
 }
 
 ::ng-deep .chat-suggestion-card-title {
-  color: #242424;
+  color: var(--dxds-color-content, #242424);
   font-size: 12px;
   font-weight: 600;
   line-height: 16px;
 }
 
 ::ng-deep .chat-suggestion-card-prompt {
-  color: #616161;
+  color: var(--dxds-color-content-subtle, #616161);
   font-size: 12px;
   font-weight: 400;
   line-height: 16px;
diff --git a/apps/demos/Demos/Chat/MessageStreaming/React/styles.css b/apps/demos/Demos/Chat/MessageStreaming/React/styles.css
index 7149e8fb31da..e273d4d2bc7c 100644
--- a/apps/demos/Demos/Chat/MessageStreaming/React/styles.css
+++ b/apps/demos/Demos/Chat/MessageStreaming/React/styles.css
@@ -61,8 +61,8 @@
 .chat-suggestion-card {
   border-radius: 12px;
   padding: 16px;
-  border: 1px solid #EBEBEB;
-  background: #FAFAFA;
+  border: 1px solid var(--dxds-color-border-subtler, #EBEBEB);
+  background: var(--dxds-color-bg-canvas, #FAFAFA);
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -76,20 +76,20 @@
 }
 
 .chat-suggestion-card:hover {
-  border: 1px solid #E0E0E0;
-  background: #F5F5F5;
-  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.04), 0 4px 24px 0 rgba(0, 0, 0, 0.02);
+  border: 1px solid var(--dxds-color-border-subtle, #E0E0E0);
+  background: var(--dxds-color-bg-low, #F5F5F5);
+  box-shadow: var(--dxds-box-shadow-xs, 0 4px 12px 0 rgba(0, 0, 0, 0.04), 0 4px 24px 0 rgba(0, 0, 0, 0.02));
 }
 
 .chat-suggestion-card-title {
-  color: #242424;
+  color: var(--dxds-color-content, #242424);
   font-size: 12px;
   font-weight: 600;
   line-height: 16px;
 }
 
 .chat-suggestion-card-prompt {
-  color: #616161;
+  color: var(--dxds-color-content-subtle, #616161);
   font-size: 12px;
   font-weight: 400;
   line-height: 16px;
diff --git a/apps/demos/Demos/Chat/MessageStreaming/ReactJs/styles.css b/apps/demos/Demos/Chat/MessageStreaming/ReactJs/styles.css
index 7149e8fb31da..e273d4d2bc7c 100644
--- a/apps/demos/Demos/Chat/MessageStreaming/ReactJs/styles.css
+++ b/apps/demos/Demos/Chat/MessageStreaming/ReactJs/styles.css
@@ -61,8 +61,8 @@
 .chat-suggestion-card {
   border-radius: 12px;
   padding: 16px;
-  border: 1px solid #EBEBEB;
-  background: #FAFAFA;
+  border: 1px solid var(--dxds-color-border-subtler, #EBEBEB);
+  background: var(--dxds-color-bg-canvas, #FAFAFA);
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -76,20 +76,20 @@
 }
 
 .chat-suggestion-card:hover {
-  border: 1px solid #E0E0E0;
-  background: #F5F5F5;
-  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.04), 0 4px 24px 0 rgba(0, 0, 0, 0.02);
+  border: 1px solid var(--dxds-color-border-subtle, #E0E0E0);
+  background: var(--dxds-color-bg-low, #F5F5F5);
+  box-shadow: var(--dxds-box-shadow-xs, 0 4px 12px 0 rgba(0, 0, 0, 0.04), 0 4px 24px 0 rgba(0, 0, 0, 0.02));
 }
 
 .chat-suggestion-card-title {
-  color: #242424;
+  color: var(--dxds-color-content, #242424);
   font-size: 12px;
   font-weight: 600;
   line-height: 16px;
 }
 
 .chat-suggestion-card-prompt {
-  color: #616161;
+  color: var(--dxds-color-content-subtle, #616161);
   font-size: 12px;
   font-weight: 400;
   line-height: 16px;
diff --git a/apps/demos/Demos/Chat/MessageStreaming/Vue/App.vue b/apps/demos/Demos/Chat/MessageStreaming/Vue/App.vue
index 9d4e6db2b85d..747f82b0a02f 100644
--- a/apps/demos/Demos/Chat/MessageStreaming/Vue/App.vue
+++ b/apps/demos/Demos/Chat/MessageStreaming/Vue/App.vue
@@ -254,8 +254,8 @@ function sendSuggestion(prompt: string): void {
 .chat-suggestion-card {
   border-radius: 12px;
   padding: 16px;
-  border: 1px solid #EBEBEB;
-  background: #FAFAFA;
+  border: 1px solid var(--dxds-color-border-subtler, #EBEBEB);
+  background: var(--dxds-color-bg-canvas, #FAFAFA);
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -269,20 +269,20 @@ function sendSuggestion(prompt: string): void {
 }
 
 .chat-suggestion-card:hover {
-  border: 1px solid #E0E0E0;
-  background: #F5F5F5;
-  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.04), 0 4px 24px 0 rgba(0, 0, 0, 0.02);
+  border: 1px solid var(--dxds-color-border-subtle, #E0E0E0);
+  background: var(--dxds-color-bg-low, #F5F5F5);
+  box-shadow: var(--dxds-box-shadow-xs, 0 4px 12px 0 rgba(0, 0, 0, 0.04), 0 4px 24px 0 rgba(0, 0, 0, 0.02));
 }
 
 .chat-suggestion-card-title {
-  color: #242424;
+  color: var(--dxds-color-content, #242424);
   font-size: 12px;
   font-weight: 600;
   line-height: 16px;
 }
 
 .chat-suggestion-card-prompt {
-  color: #616161;
+  color: var(--dxds-color-content-subtle, #616161);
   font-size: 12px;
   font-weight: 400;
   line-height: 16px;
diff --git a/apps/demos/Demos/Chat/MessageStreaming/jQuery/styles.css b/apps/demos/Demos/Chat/MessageStreaming/jQuery/styles.css
index 8fd3e68dbc75..2c407917760d 100644
--- a/apps/demos/Demos/Chat/MessageStreaming/jQuery/styles.css
+++ b/apps/demos/Demos/Chat/MessageStreaming/jQuery/styles.css
@@ -51,7 +51,7 @@
 
 .chat-suggestion-cards {
   display: flex;
-  flex-wrap: wrap; 
+  flex-wrap: wrap;
   justify-content: center;
   gap: 16px;
   margin-top: 32px;
@@ -61,8 +61,8 @@
 .chat-suggestion-card {
   border-radius: 12px;
   padding: 16px;
-  border: 1px solid #EBEBEB;
-  background: #FAFAFA;
+  border: 1px solid var(--dxds-color-border-subtler, #EBEBEB);
+  background: var(--dxds-color-bg-canvas, #FAFAFA);
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -76,20 +76,20 @@
 }
 
 .chat-suggestion-card:hover {
-  border: 1px solid #E0E0E0;
-  background: #F5F5F5;
-  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.04), 0 4px 24px 0 rgba(0, 0, 0, 0.02);
+  border: 1px solid var(--dxds-color-border-subtle, #E0E0E0);
+  background: var(--dxds-color-bg-low, #F5F5F5);
+  box-shadow: var(--dxds-box-shadow-xs, 0 4px 12px 0 rgba(0, 0, 0, 0.04), 0 4px 24px 0 rgba(0, 0, 0, 0.02));
 }
 
 .chat-suggestion-card-title {
-  color: #242424;
+  color: var(--dxds-color-content, #242424);
   font-size: 12px;
   font-weight: 600;
   line-height: 16px;
 }
 
 .chat-suggestion-card-prompt {
-  color: #616161;
+  color: var(--dxds-color-content-subtle, #616161);
   font-size: 12px;
   font-weight: 400;
   line-height: 16px;
diff --git a/apps/demos/Demos/Chat/PromptSuggestions/Angular/app/app.component.css b/apps/demos/Demos/Chat/PromptSuggestions/Angular/app/app.component.css
index 164a6da73f22..96a11c3cb934 100644
--- a/apps/demos/Demos/Chat/PromptSuggestions/Angular/app/app.component.css
+++ b/apps/demos/Demos/Chat/PromptSuggestions/Angular/app/app.component.css
@@ -10,7 +10,7 @@
   display: flex;
   flex-direction: column;
   min-width: 280px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   gap: 16px;
   width: 100%;
   max-width: 900px;
diff --git a/apps/demos/Demos/Chat/PromptSuggestions/React/styles.css b/apps/demos/Demos/Chat/PromptSuggestions/React/styles.css
index 6a166059091d..c62a00d6b603 100644
--- a/apps/demos/Demos/Chat/PromptSuggestions/React/styles.css
+++ b/apps/demos/Demos/Chat/PromptSuggestions/React/styles.css
@@ -10,7 +10,7 @@
   display: flex;
   flex-direction: column;
   min-width: 280px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   gap: 16px;
   width: 100%;
   max-width: 900px;
diff --git a/apps/demos/Demos/Chat/PromptSuggestions/ReactJs/styles.css b/apps/demos/Demos/Chat/PromptSuggestions/ReactJs/styles.css
index 6a166059091d..c62a00d6b603 100644
--- a/apps/demos/Demos/Chat/PromptSuggestions/ReactJs/styles.css
+++ b/apps/demos/Demos/Chat/PromptSuggestions/ReactJs/styles.css
@@ -10,7 +10,7 @@
   display: flex;
   flex-direction: column;
   min-width: 280px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   gap: 16px;
   width: 100%;
   max-width: 900px;
diff --git a/apps/demos/Demos/Chat/PromptSuggestions/Vue/App.vue b/apps/demos/Demos/Chat/PromptSuggestions/Vue/App.vue
index a5e1ef4b675c..328647fc6572 100644
--- a/apps/demos/Demos/Chat/PromptSuggestions/Vue/App.vue
+++ b/apps/demos/Demos/Chat/PromptSuggestions/Vue/App.vue
@@ -193,7 +193,7 @@ function onSuggestionItemClick(e: { itemData?: { text: string; prompt: string }
   display: flex;
   flex-direction: column;
   min-width: 280px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   gap: 16px;
   width: 100%;
   max-width: 900px;
diff --git a/apps/demos/Demos/Chat/PromptSuggestions/jQuery/styles.css b/apps/demos/Demos/Chat/PromptSuggestions/jQuery/styles.css
index bbc0feea5ba3..ba6588dd277a 100644
--- a/apps/demos/Demos/Chat/PromptSuggestions/jQuery/styles.css
+++ b/apps/demos/Demos/Chat/PromptSuggestions/jQuery/styles.css
@@ -10,7 +10,7 @@
   display: flex;
   flex-direction: column;
   min-width: 280px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   gap: 16px;
   width: 100%;
   max-width: 900px;
diff --git a/apps/demos/Demos/Common/EditorAppearanceVariants/Angular/app/app.component.css b/apps/demos/Demos/Common/EditorAppearanceVariants/Angular/app/app.component.css
index f863d1d16296..8f616db5f104 100644
--- a/apps/demos/Demos/Common/EditorAppearanceVariants/Angular/app/app.component.css
+++ b/apps/demos/Demos/Common/EditorAppearanceVariants/Angular/app/app.component.css
@@ -65,7 +65,7 @@
   grid-area: options;
   padding: 20px;
   margin-bottom: 40px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/Common/EditorAppearanceVariants/React/styles.css b/apps/demos/Demos/Common/EditorAppearanceVariants/React/styles.css
index 3f0005d19b2e..7e83f51c65ff 100644
--- a/apps/demos/Demos/Common/EditorAppearanceVariants/React/styles.css
+++ b/apps/demos/Demos/Common/EditorAppearanceVariants/React/styles.css
@@ -65,7 +65,7 @@
   grid-area: options;
   padding: 20px;
   margin-bottom: 40px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/Common/EditorAppearanceVariants/ReactJs/styles.css b/apps/demos/Demos/Common/EditorAppearanceVariants/ReactJs/styles.css
index 3f0005d19b2e..7e83f51c65ff 100644
--- a/apps/demos/Demos/Common/EditorAppearanceVariants/ReactJs/styles.css
+++ b/apps/demos/Demos/Common/EditorAppearanceVariants/ReactJs/styles.css
@@ -65,7 +65,7 @@
   grid-area: options;
   padding: 20px;
   margin-bottom: 40px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/Common/EditorAppearanceVariants/Vue/App.vue b/apps/demos/Demos/Common/EditorAppearanceVariants/Vue/App.vue
index f4d3b166910b..dcffd1189ec2 100644
--- a/apps/demos/Demos/Common/EditorAppearanceVariants/Vue/App.vue
+++ b/apps/demos/Demos/Common/EditorAppearanceVariants/Vue/App.vue
@@ -234,7 +234,7 @@ function validateClick({ validationGroup }: DxButtonTypes.ClickEvent) {
   grid-area: options;
   padding: 20px;
   margin-bottom: 40px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/Common/EditorAppearanceVariants/jQuery/styles.css b/apps/demos/Demos/Common/EditorAppearanceVariants/jQuery/styles.css
index b068efeb4d6f..c339bb3fc07f 100644
--- a/apps/demos/Demos/Common/EditorAppearanceVariants/jQuery/styles.css
+++ b/apps/demos/Demos/Common/EditorAppearanceVariants/jQuery/styles.css
@@ -65,7 +65,7 @@
   grid-area: options;
   padding: 20px;
   margin-bottom: 40px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/Common/EditorsOverview/Angular/app/app.component.css b/apps/demos/Demos/Common/EditorsOverview/Angular/app/app.component.css
index 02ee34428ec5..5b7f11676eed 100644
--- a/apps/demos/Demos/Common/EditorsOverview/Angular/app/app.component.css
+++ b/apps/demos/Demos/Common/EditorsOverview/Angular/app/app.component.css
@@ -1,5 +1,5 @@
 ::ng-deep .settings {
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   display: flex;
   justify-content: space-between;
   padding: 15px;
diff --git a/apps/demos/Demos/Common/EditorsOverview/React/styles.css b/apps/demos/Demos/Common/EditorsOverview/React/styles.css
index 2916afb94059..31762f031028 100644
--- a/apps/demos/Demos/Common/EditorsOverview/React/styles.css
+++ b/apps/demos/Demos/Common/EditorsOverview/React/styles.css
@@ -1,5 +1,5 @@
 .settings {
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   display: flex;
   justify-content: space-between;
   padding: 15px;
diff --git a/apps/demos/Demos/Common/EditorsOverview/ReactJs/styles.css b/apps/demos/Demos/Common/EditorsOverview/ReactJs/styles.css
index 2916afb94059..31762f031028 100644
--- a/apps/demos/Demos/Common/EditorsOverview/ReactJs/styles.css
+++ b/apps/demos/Demos/Common/EditorsOverview/ReactJs/styles.css
@@ -1,5 +1,5 @@
 .settings {
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   display: flex;
   justify-content: space-between;
   padding: 15px;
diff --git a/apps/demos/Demos/Common/EditorsOverview/Vue/App.vue b/apps/demos/Demos/Common/EditorsOverview/Vue/App.vue
index 763ab16f766b..29ef44b0dd98 100644
--- a/apps/demos/Demos/Common/EditorsOverview/Vue/App.vue
+++ b/apps/demos/Demos/Common/EditorsOverview/Vue/App.vue
@@ -128,7 +128,7 @@ watch(() => width.value, (val) => {
 </script>
 <style>
 .settings {
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   display: flex;
   justify-content: space-between;
   padding: 15px;
diff --git a/apps/demos/Demos/Common/EditorsOverview/jQuery/styles.css b/apps/demos/Demos/Common/EditorsOverview/jQuery/styles.css
index 2916afb94059..31762f031028 100644
--- a/apps/demos/Demos/Common/EditorsOverview/jQuery/styles.css
+++ b/apps/demos/Demos/Common/EditorsOverview/jQuery/styles.css
@@ -1,5 +1,5 @@
 .settings {
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   display: flex;
   justify-content: space-between;
   padding: 15px;
diff --git a/apps/demos/Demos/Common/EditorsRightToLeftSupport/Angular/app/app.component.css b/apps/demos/Demos/Common/EditorsRightToLeftSupport/Angular/app/app.component.css
index 69ea84019bf4..13b8f90c5cb2 100644
--- a/apps/demos/Demos/Common/EditorsRightToLeftSupport/Angular/app/app.component.css
+++ b/apps/demos/Demos/Common/EditorsRightToLeftSupport/Angular/app/app.component.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 ::ng-deep .options .dx-fieldset {
diff --git a/apps/demos/Demos/Common/EditorsRightToLeftSupport/React/styles.css b/apps/demos/Demos/Common/EditorsRightToLeftSupport/React/styles.css
index 2261e5b698d3..2191dcfbd70f 100644
--- a/apps/demos/Demos/Common/EditorsRightToLeftSupport/React/styles.css
+++ b/apps/demos/Demos/Common/EditorsRightToLeftSupport/React/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .options .dx-fieldset {
diff --git a/apps/demos/Demos/Common/EditorsRightToLeftSupport/ReactJs/styles.css b/apps/demos/Demos/Common/EditorsRightToLeftSupport/ReactJs/styles.css
index 2261e5b698d3..2191dcfbd70f 100644
--- a/apps/demos/Demos/Common/EditorsRightToLeftSupport/ReactJs/styles.css
+++ b/apps/demos/Demos/Common/EditorsRightToLeftSupport/ReactJs/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .options .dx-fieldset {
diff --git a/apps/demos/Demos/Common/EditorsRightToLeftSupport/Vue/App.vue b/apps/demos/Demos/Common/EditorsRightToLeftSupport/Vue/App.vue
index 47871b2fa8dc..2cfd9228b7ad 100644
--- a/apps/demos/Demos/Common/EditorsRightToLeftSupport/Vue/App.vue
+++ b/apps/demos/Demos/Common/EditorsRightToLeftSupport/Vue/App.vue
@@ -144,7 +144,7 @@ function onLanguageChanged(args: DxSelectBoxTypes.ValueChangedEvent) {
 <style>
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .options .dx-fieldset {
diff --git a/apps/demos/Demos/Common/EditorsRightToLeftSupport/jQuery/styles.css b/apps/demos/Demos/Common/EditorsRightToLeftSupport/jQuery/styles.css
index 2261e5b698d3..2191dcfbd70f 100644
--- a/apps/demos/Demos/Common/EditorsRightToLeftSupport/jQuery/styles.css
+++ b/apps/demos/Demos/Common/EditorsRightToLeftSupport/jQuery/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .options .dx-fieldset {
diff --git a/apps/demos/Demos/Common/FormsOverview/Angular/app/app.component.css b/apps/demos/Demos/Common/FormsOverview/Angular/app/app.component.css
index 432998a9c7d3..9fb92f00f42a 100644
--- a/apps/demos/Demos/Common/FormsOverview/Angular/app/app.component.css
+++ b/apps/demos/Demos/Common/FormsOverview/Angular/app/app.component.css
@@ -6,7 +6,7 @@
   height: 128px;
   width: 128px;
   margin-right: 10px;
-  border: 1px solid #d2d3d5;
+  border: 1px solid var(--dxds-color-border, #d2d3d5);
   border-radius: 50%;
   background-image: url('../../../../images/petersmith.png');
   background-size: contain;
diff --git a/apps/demos/Demos/Common/FormsOverview/React/styles.css b/apps/demos/Demos/Common/FormsOverview/React/styles.css
index a8a271680b68..bee1028f549f 100644
--- a/apps/demos/Demos/Common/FormsOverview/React/styles.css
+++ b/apps/demos/Demos/Common/FormsOverview/React/styles.css
@@ -6,7 +6,7 @@
   height: 128px;
   width: 128px;
   margin-right: 10px;
-  border: 1px solid #d2d3d5;
+  border: 1px solid var(--dxds-color-border, #d2d3d5);
   border-radius: 50%;
   background-image: url('../../../../images/petersmith.png');
   background-size: contain;
diff --git a/apps/demos/Demos/Common/FormsOverview/ReactJs/styles.css b/apps/demos/Demos/Common/FormsOverview/ReactJs/styles.css
index a8a271680b68..bee1028f549f 100644
--- a/apps/demos/Demos/Common/FormsOverview/ReactJs/styles.css
+++ b/apps/demos/Demos/Common/FormsOverview/ReactJs/styles.css
@@ -6,7 +6,7 @@
   height: 128px;
   width: 128px;
   margin-right: 10px;
-  border: 1px solid #d2d3d5;
+  border: 1px solid var(--dxds-color-border, #d2d3d5);
   border-radius: 50%;
   background-image: url('../../../../images/petersmith.png');
   background-size: contain;
diff --git a/apps/demos/Demos/Common/FormsOverview/Vue/App.vue b/apps/demos/Demos/Common/FormsOverview/Vue/App.vue
index 769f197452ba..584e4c63f117 100644
--- a/apps/demos/Demos/Common/FormsOverview/Vue/App.vue
+++ b/apps/demos/Demos/Common/FormsOverview/Vue/App.vue
@@ -86,7 +86,7 @@ const notesOptions = { height: 140 };
   height: 128px;
   width: 128px;
   margin-right: 10px;
-  border: 1px solid #d2d3d5;
+  border: 1px solid var(--dxds-color-border, #d2d3d5);
   border-radius: 50%;
   background-image: url("../../../../images/petersmith.png");
   background-size: contain;
diff --git a/apps/demos/Demos/Common/FormsOverview/jQuery/styles.css b/apps/demos/Demos/Common/FormsOverview/jQuery/styles.css
index a8a271680b68..bee1028f549f 100644
--- a/apps/demos/Demos/Common/FormsOverview/jQuery/styles.css
+++ b/apps/demos/Demos/Common/FormsOverview/jQuery/styles.css
@@ -6,7 +6,7 @@
   height: 128px;
   width: 128px;
   margin-right: 10px;
-  border: 1px solid #d2d3d5;
+  border: 1px solid var(--dxds-color-border, #d2d3d5);
   border-radius: 50%;
   background-image: url('../../../../images/petersmith.png');
   background-size: contain;
diff --git a/apps/demos/Demos/Common/ListsOverview/Angular/app/app.component.css b/apps/demos/Demos/Common/ListsOverview/Angular/app/app.component.css
index 149681ceb767..f2107db5ca7e 100644
--- a/apps/demos/Demos/Common/ListsOverview/Angular/app/app.component.css
+++ b/apps/demos/Demos/Common/ListsOverview/Angular/app/app.component.css
@@ -3,7 +3,7 @@
   width: 330px;
   height: 470px;
   padding: 20px;
-  background: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-right: 30px;
 }
 
@@ -101,5 +101,4 @@
   font-size: 11px;
   line-height: 12px;
   padding-left: 2px;
-  color: var(--dx-texteditor-label-color);
 }
diff --git a/apps/demos/Demos/Common/ListsOverview/React/styles.css b/apps/demos/Demos/Common/ListsOverview/React/styles.css
index 7c23dbf29e77..673655036d3c 100644
--- a/apps/demos/Demos/Common/ListsOverview/React/styles.css
+++ b/apps/demos/Demos/Common/ListsOverview/React/styles.css
@@ -3,7 +3,7 @@
   width: 330px;
   height: 470px;
   padding: 20px;
-  background: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-right: 30px;
 }
 
@@ -101,5 +101,4 @@
   font-size: 11px;
   line-height: 12px;
   padding-left: 2px;
-  color: var(--dx-texteditor-label-color);
 }
diff --git a/apps/demos/Demos/Common/ListsOverview/ReactJs/styles.css b/apps/demos/Demos/Common/ListsOverview/ReactJs/styles.css
index 7c23dbf29e77..673655036d3c 100644
--- a/apps/demos/Demos/Common/ListsOverview/ReactJs/styles.css
+++ b/apps/demos/Demos/Common/ListsOverview/ReactJs/styles.css
@@ -3,7 +3,7 @@
   width: 330px;
   height: 470px;
   padding: 20px;
-  background: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-right: 30px;
 }
 
@@ -101,5 +101,4 @@
   font-size: 11px;
   line-height: 12px;
   padding-left: 2px;
-  color: var(--dx-texteditor-label-color);
 }
diff --git a/apps/demos/Demos/Common/ListsOverview/Vue/App.vue b/apps/demos/Demos/Common/ListsOverview/Vue/App.vue
index adb8ecb61e30..e5034b037ca5 100644
--- a/apps/demos/Demos/Common/ListsOverview/Vue/App.vue
+++ b/apps/demos/Demos/Common/ListsOverview/Vue/App.vue
@@ -103,7 +103,7 @@ function listSelectionChanged(e: DxListTypes.SelectionChangedEvent) {
   width: 330px;
   height: 470px;
   padding: 20px;
-  background: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-right: 30px;
 }
 
@@ -201,6 +201,5 @@ function listSelectionChanged(e: DxListTypes.SelectionChangedEvent) {
   font-size: 11px;
   line-height: 12px;
   padding-left: 6px;
-  color: var(--dx-texteditor-label-color);
 }
 </style>
diff --git a/apps/demos/Demos/Common/ListsOverview/jQuery/styles.css b/apps/demos/Demos/Common/ListsOverview/jQuery/styles.css
index 7c23dbf29e77..673655036d3c 100644
--- a/apps/demos/Demos/Common/ListsOverview/jQuery/styles.css
+++ b/apps/demos/Demos/Common/ListsOverview/jQuery/styles.css
@@ -3,7 +3,7 @@
   width: 330px;
   height: 470px;
   padding: 20px;
-  background: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-right: 30px;
 }
 
@@ -101,5 +101,4 @@
   font-size: 11px;
   line-height: 12px;
   padding-left: 2px;
-  color: var(--dx-texteditor-label-color);
 }
diff --git a/apps/demos/Demos/Common/ListsOverview/visualtestrc.json b/apps/demos/Demos/Common/ListsOverview/visualtestrc.json
new file mode 100644
index 000000000000..1a0477740136
--- /dev/null
+++ b/apps/demos/Demos/Common/ListsOverview/visualtestrc.json
@@ -0,0 +1,10 @@
+{
+  "$schema": "../../../../testing/visualtestrc-schema.json",
+  "comment": "Sub-pixel noise, measured 30.08.2026: text rendering shifts by a pixel between runs across the whole page. The looser comparison lives here, per demo, instead of being the default for every screenshot in every theme.",
+  "comparison-options": {
+    "looksSameComparisonOptions": {
+      "tolerance": 20,
+      "antialiasingTolerance": 20
+    }
+  }
+}
diff --git a/apps/demos/Demos/Common/NavigationOverview/Angular/app/app.component.css b/apps/demos/Demos/Common/NavigationOverview/Angular/app/app.component.css
index c0a02c60a84d..fdb916b0ce60 100644
--- a/apps/demos/Demos/Common/NavigationOverview/Angular/app/app.component.css
+++ b/apps/demos/Demos/Common/NavigationOverview/Angular/app/app.component.css
@@ -11,8 +11,7 @@
   display: inline-block;
   width: 180px;
   padding: 0 10px 10px;
-  background-color: rgba(191, 191, 191, 0.15);
-  box-shadow: -5px 0 14px -8px rgba(0, 0, 0, 0.25) inset;
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 ::ng-deep .right-content {
@@ -59,7 +58,7 @@ sup {
 ::ng-deep .stats > div {
   display: table-cell;
   text-align: center;
-  border: 1px solid rgba(191, 191, 191, 0.25);
+  border: 1px solid var(--dxds-color-border-subtle, rgba(191, 191, 191, 0.25));
   padding: 20px 0 25px;
   width: 33%;
 }
@@ -103,7 +102,7 @@ sup {
 ::ng-deep #tabpanel .stats {
   width: 398px;
   margin-top: 20px;
-  border-top: 1px solid rgba(191, 191, 191, 0.25);
+  border-top: 1px solid var(--dxds-color-border-subtle, rgba(191, 191, 191, 0.25));
 }
 
 ::ng-deep #tabpanel .stats > div {
@@ -123,7 +122,7 @@ sup {
 ::ng-deep .flag {
   width: 172px;
   max-height: 122px;
-  border: 1px solid rgba(191, 191, 191, 0.25);
+  border: 1px solid var(--dxds-color-border-subtle, rgba(191, 191, 191, 0.25));
   float: left;
   margin: 0 30px 10px 0;
 }
diff --git a/apps/demos/Demos/Common/NavigationOverview/React/styles.css b/apps/demos/Demos/Common/NavigationOverview/React/styles.css
index 711095c5f48f..f952c9bfa38d 100644
--- a/apps/demos/Demos/Common/NavigationOverview/React/styles.css
+++ b/apps/demos/Demos/Common/NavigationOverview/React/styles.css
@@ -11,8 +11,7 @@
   display: inline-block;
   width: 180px;
   padding: 0 10px 10px;
-  background-color: rgba(191, 191, 191, 0.15);
-  box-shadow: -5px 0 14px -8px rgba(0, 0, 0, 0.25) inset;
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .right-content {
@@ -59,7 +58,7 @@ sup {
 .stats > div {
   display: table-cell;
   text-align: center;
-  border: 1px solid rgba(191, 191, 191, 0.25);
+  border: 1px solid var(--dxds-color-border-subtle, rgba(191, 191, 191, 0.25));
   padding: 20px 0 25px;
   width: 33%;
 }
@@ -103,7 +102,7 @@ sup {
 #tabpanel .stats {
   width: 398px;
   margin-top: 20px;
-  border-top: 1px solid rgba(191, 191, 191, 0.25);
+  border-top: 1px solid var(--dxds-color-border-subtle, rgba(191, 191, 191, 0.25));
 }
 
 #tabpanel .stats > div {
@@ -123,7 +122,7 @@ sup {
 .flag {
   width: 172px;
   max-height: 122px;
-  border: 1px solid rgba(191, 191, 191, 0.25);
+  border: 1px solid var(--dxds-color-border-subtle, rgba(191, 191, 191, 0.25));
   float: left;
   margin: 0 30px 10px 0;
 }
diff --git a/apps/demos/Demos/Common/NavigationOverview/ReactJs/styles.css b/apps/demos/Demos/Common/NavigationOverview/ReactJs/styles.css
index 711095c5f48f..f952c9bfa38d 100644
--- a/apps/demos/Demos/Common/NavigationOverview/ReactJs/styles.css
+++ b/apps/demos/Demos/Common/NavigationOverview/ReactJs/styles.css
@@ -11,8 +11,7 @@
   display: inline-block;
   width: 180px;
   padding: 0 10px 10px;
-  background-color: rgba(191, 191, 191, 0.15);
-  box-shadow: -5px 0 14px -8px rgba(0, 0, 0, 0.25) inset;
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .right-content {
@@ -59,7 +58,7 @@ sup {
 .stats > div {
   display: table-cell;
   text-align: center;
-  border: 1px solid rgba(191, 191, 191, 0.25);
+  border: 1px solid var(--dxds-color-border-subtle, rgba(191, 191, 191, 0.25));
   padding: 20px 0 25px;
   width: 33%;
 }
@@ -103,7 +102,7 @@ sup {
 #tabpanel .stats {
   width: 398px;
   margin-top: 20px;
-  border-top: 1px solid rgba(191, 191, 191, 0.25);
+  border-top: 1px solid var(--dxds-color-border-subtle, rgba(191, 191, 191, 0.25));
 }
 
 #tabpanel .stats > div {
@@ -123,7 +122,7 @@ sup {
 .flag {
   width: 172px;
   max-height: 122px;
-  border: 1px solid rgba(191, 191, 191, 0.25);
+  border: 1px solid var(--dxds-color-border-subtle, rgba(191, 191, 191, 0.25));
   float: left;
   margin: 0 30px 10px 0;
 }
diff --git a/apps/demos/Demos/Common/NavigationOverview/Vue/App.vue b/apps/demos/Demos/Common/NavigationOverview/Vue/App.vue
index 84a3a3cf3145..64e03c8f5a7f 100644
--- a/apps/demos/Demos/Common/NavigationOverview/Vue/App.vue
+++ b/apps/demos/Demos/Common/NavigationOverview/Vue/App.vue
@@ -111,8 +111,7 @@ function changeSelection({ itemData }: DxTreeViewTypes.ItemSelectionChangedEvent
   display: inline-block;
   width: 180px;
   padding: 0 10px 10px;
-  background-color: rgba(191, 191, 191, 0.15);
-  box-shadow: -5px 0 14px -8px rgba(0, 0, 0, 0.25) inset;
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .right-content {
@@ -159,7 +158,7 @@ sup {
 .stats > div {
   display: table-cell;
   text-align: center;
-  border: 1px solid rgba(191, 191, 191, 0.25);
+  border: 1px solid var(--dxds-color-border-subtle, rgba(191, 191, 191, 0.25));
   padding: 20px 0 25px;
   width: 33%;
 }
@@ -203,7 +202,7 @@ sup {
 #tabpanel .stats {
   width: 398px;
   margin-top: 20px;
-  border-top: 1px solid rgba(191, 191, 191, 0.25);
+  border-top: 1px solid var(--dxds-color-border-subtle, rgba(191, 191, 191, 0.25));
 }
 
 #tabpanel .stats > div {
@@ -223,7 +222,7 @@ sup {
 .flag {
   width: 172px;
   max-height: 122px;
-  border: 1px solid rgba(191, 191, 191, 0.25);
+  border: 1px solid var(--dxds-color-border-subtle, rgba(191, 191, 191, 0.25));
   float: left;
   margin: 0 30px 10px 0;
 }
diff --git a/apps/demos/Demos/Common/NavigationOverview/jQuery/styles.css b/apps/demos/Demos/Common/NavigationOverview/jQuery/styles.css
index b6cd7448e261..72ed61087939 100644
--- a/apps/demos/Demos/Common/NavigationOverview/jQuery/styles.css
+++ b/apps/demos/Demos/Common/NavigationOverview/jQuery/styles.css
@@ -11,8 +11,7 @@
   display: inline-block;
   width: 180px;
   padding: 0 10px 10px;
-  background-color: rgba(191, 191, 191, 0.15);
-  box-shadow: -5px 0 14px -8px rgba(0, 0, 0, 0.25) inset;
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .right-content {
@@ -59,7 +58,7 @@ sup {
 .stats > div {
   display: table-cell;
   text-align: center;
-  border: 1px solid rgba(191, 191, 191, 0.25);
+  border: 1px solid var(--dxds-color-border-subtle, rgba(191, 191, 191, 0.25));
   padding: 20px 0 25px;
   width: 33%;
 }
@@ -103,7 +102,7 @@ sup {
 #tabpanel .stats {
   width: 398px;
   margin-top: 20px;
-  border-top: 1px solid rgba(191, 191, 191, 0.25);
+  border-top: 1px solid var(--dxds-color-border-subtle, rgba(191, 191, 191, 0.25));
 }
 
 #tabpanel .stats > div {
@@ -123,7 +122,7 @@ sup {
 .flag {
   width: 172px;
   max-height: 122px;
-  border: 1px solid rgba(191, 191, 191, 0.25);
+  border: 1px solid var(--dxds-color-border-subtle, rgba(191, 191, 191, 0.25));
   float: left;
   margin: 0 30px 10px 0;
 }
diff --git a/apps/demos/Demos/Common/NavigationRightToLeftSupport/Angular/app/app.component.css b/apps/demos/Demos/Common/NavigationRightToLeftSupport/Angular/app/app.component.css
index 3e932a6400c6..895e655848e7 100644
--- a/apps/demos/Demos/Common/NavigationRightToLeftSupport/Angular/app/app.component.css
+++ b/apps/demos/Demos/Common/NavigationRightToLeftSupport/Angular/app/app.component.css
@@ -6,7 +6,7 @@ sup {
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-bottom: 20px;
 }
 
diff --git a/apps/demos/Demos/Common/NavigationRightToLeftSupport/React/styles.css b/apps/demos/Demos/Common/NavigationRightToLeftSupport/React/styles.css
index e2c3944d043c..1f1a474175bf 100644
--- a/apps/demos/Demos/Common/NavigationRightToLeftSupport/React/styles.css
+++ b/apps/demos/Demos/Common/NavigationRightToLeftSupport/React/styles.css
@@ -6,7 +6,7 @@ sup {
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-bottom: 20px;
 }
 
diff --git a/apps/demos/Demos/Common/NavigationRightToLeftSupport/ReactJs/styles.css b/apps/demos/Demos/Common/NavigationRightToLeftSupport/ReactJs/styles.css
index e2c3944d043c..1f1a474175bf 100644
--- a/apps/demos/Demos/Common/NavigationRightToLeftSupport/ReactJs/styles.css
+++ b/apps/demos/Demos/Common/NavigationRightToLeftSupport/ReactJs/styles.css
@@ -6,7 +6,7 @@ sup {
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-bottom: 20px;
 }
 
diff --git a/apps/demos/Demos/Common/NavigationRightToLeftSupport/Vue/App.vue b/apps/demos/Demos/Common/NavigationRightToLeftSupport/Vue/App.vue
index 68c031c1aa06..c8d802a69d86 100644
--- a/apps/demos/Demos/Common/NavigationRightToLeftSupport/Vue/App.vue
+++ b/apps/demos/Demos/Common/NavigationRightToLeftSupport/Vue/App.vue
@@ -92,7 +92,7 @@ function selectLanguage(e: DxSelectBoxTypes.ValueChangedEvent) {
 
   .options {
     padding: 20px;
-    background-color: rgba(191, 191, 191, 0.15);
+    background-color: var(--dx-color-options-panel-bg);
     margin-bottom: 20px;
   }
 
diff --git a/apps/demos/Demos/Common/NavigationRightToLeftSupport/jQuery/styles.css b/apps/demos/Demos/Common/NavigationRightToLeftSupport/jQuery/styles.css
index e2c3944d043c..1f1a474175bf 100644
--- a/apps/demos/Demos/Common/NavigationRightToLeftSupport/jQuery/styles.css
+++ b/apps/demos/Demos/Common/NavigationRightToLeftSupport/jQuery/styles.css
@@ -6,7 +6,7 @@ sup {
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-bottom: 20px;
 }
 
diff --git a/apps/demos/Demos/Common/PopupAndNotificationsOverview/Angular/app/app.component.css b/apps/demos/Demos/Common/PopupAndNotificationsOverview/Angular/app/app.component.css
index cbc73f88b149..c25ed4e36a86 100644
--- a/apps/demos/Demos/Common/PopupAndNotificationsOverview/Angular/app/app.component.css
+++ b/apps/demos/Demos/Common/PopupAndNotificationsOverview/Angular/app/app.component.css
@@ -1,6 +1,6 @@
 ::ng-deep .large-text {
   font-size: 24px;
-  color: #ff6a50;
+  color: var(--dxds-color-content-orange, #ff6a50);
 }
 
 ::ng-deep .opacity {
@@ -20,7 +20,7 @@
 ::ng-deep .images .item-content {
   position: relative;
   margin: 5px;
-  color: #fff;
+  color: var(--dxds-color-content-on-color, #fff);
   cursor: pointer;
 }
 
@@ -37,7 +37,7 @@
 }
 
 ::ng-deep .images .item-content:hover > .item-options {
-  box-shadow: inset 0 0 0 2px #f05b41;
+  box-shadow: inset 0 0 0 2px var(--dxds-color-border-orange, #f05b41);
 }
 
 ::ng-deep .item-content .item-options > div {
@@ -46,7 +46,7 @@
   width: 100%;
   height: 64px;
   padding-top: 4px;
-  background-color: rgba(19, 32, 51, 0.8);
+  background-color: color-mix(in srgb, var(--dxds-color-bg-static-dark, rgb(19, 32, 51)) calc(var(--dxds-opacity-80, 0.8) * 100%), transparent);
   z-index: 1;
   box-sizing: border-box;
   border-left: 2px solid transparent;
@@ -54,9 +54,9 @@
 }
 
 ::ng-deep .images .item-content:hover > .item-options > div {
-  border-bottom: 2px solid #f05b41;
-  border-left: 2px solid #f05b41;
-  border-right: 2px solid #f05b41;
+  border-bottom: 2px solid var(--dxds-color-border-orange, #f05b41);
+  border-left: 2px solid var(--dxds-color-border-orange, #f05b41);
+  border-right: 2px solid var(--dxds-color-border-orange, #f05b41);
 }
 
 ::ng-deep .item-content .item-options .address,
@@ -77,12 +77,12 @@
   top: 0;
   bottom: 0;
   text-align: center;
-  border-left: 1px solid rgba(255, 255, 255, 0.4);
+  border-left: 1px solid color-mix(in srgb, var(--dxds-color-border-on-color-shared, rgb(255, 255, 255)) calc(var(--dxds-opacity-40, 0.4) * 100%), transparent);
   line-height: 13px;
 }
 
 ::ng-deep .item-content .item-options .agent > div:hover {
-  color: #f05b41;
+  color: var(--dxds-color-border-orange, #f05b41);
 }
 
 ::ng-deep .item-content .item-options .agent img {
@@ -123,13 +123,13 @@
 }
 
 ::ng-deep .dx-button.favorites {
-  background-color: #f05b41;
-  color: #fff;
+  background-color: var(--dxds-color-border-orange, #f05b41);
+  color: var(--dxds-color-content-on-color, #fff);
   position: absolute;
   top: 5px;
   right: 0;
 }
 
 ::ng-deep .dx-button.favorites .dx-icon {
-  color: #fff;
+  color: var(--dxds-color-content-on-color, #fff);
 }
diff --git a/apps/demos/Demos/Common/PopupAndNotificationsOverview/React/styles.css b/apps/demos/Demos/Common/PopupAndNotificationsOverview/React/styles.css
index ca4086485d13..5110b859d19d 100644
--- a/apps/demos/Demos/Common/PopupAndNotificationsOverview/React/styles.css
+++ b/apps/demos/Demos/Common/PopupAndNotificationsOverview/React/styles.css
@@ -1,6 +1,6 @@
 .large-text {
   font-size: 24px;
-  color: #ff6a50;
+  color: var(--dxds-color-content-orange, #ff6a50);
 }
 
 .opacity {
@@ -20,7 +20,7 @@
 .images .item-content {
   position: relative;
   margin: 5px;
-  color: #fff;
+  color: var(--dxds-color-content-on-color, #fff);
   cursor: pointer;
 }
 
@@ -37,7 +37,7 @@
 }
 
 .images .item-content:hover > .item-options {
-  box-shadow: inset 0 0 0 2px #f05b41;
+  box-shadow: inset 0 0 0 2px var(--dxds-color-border-orange, #f05b41);
 }
 
 .item-content .item-options > div {
@@ -46,7 +46,7 @@
   width: 100%;
   height: 64px;
   padding-top: 4px;
-  background-color: rgba(19, 32, 51, 0.8);
+  background-color: color-mix(in srgb, var(--dxds-color-bg-static-dark, rgb(19, 32, 51)) calc(var(--dxds-opacity-80, 0.8) * 100%), transparent);
   z-index: 1;
   box-sizing: border-box;
   border-left: 2px solid transparent;
@@ -54,9 +54,9 @@
 }
 
 .images .item-content:hover > .item-options > div {
-  border-bottom: 2px solid #f05b41;
-  border-left: 2px solid #f05b41;
-  border-right: 2px solid #f05b41;
+  border-bottom: 2px solid var(--dxds-color-border-orange, #f05b41);
+  border-left: 2px solid var(--dxds-color-border-orange, #f05b41);
+  border-right: 2px solid var(--dxds-color-border-orange, #f05b41);
 }
 
 .item-content .item-options .address,
@@ -77,12 +77,12 @@
   top: 0;
   bottom: 0;
   text-align: center;
-  border-left: 1px solid rgba(255, 255, 255, 0.4);
+  border-left: 1px solid color-mix(in srgb, var(--dxds-color-border-on-color-shared, rgb(255, 255, 255)) calc(var(--dxds-opacity-40, 0.4) * 100%), transparent);
   line-height: 13px;
 }
 
 .item-content .item-options .agent > div:hover {
-  color: #f05b41;
+  color: var(--dxds-color-border-orange, #f05b41);
 }
 
 .item-content .item-options .agent img {
@@ -123,13 +123,13 @@
 }
 
 .dx-button.favorites {
-  background-color: #f05b41;
-  color: #fff;
+  background-color: var(--dxds-color-border-orange, #f05b41);
+  color: var(--dxds-color-content-on-color, #fff);
   position: absolute;
   top: 5px;
   right: 0;
 }
 
 .dx-button.favorites .dx-icon {
-  color: #fff;
+  color: var(--dxds-color-content-on-color, #fff);
 }
diff --git a/apps/demos/Demos/Common/PopupAndNotificationsOverview/ReactJs/styles.css b/apps/demos/Demos/Common/PopupAndNotificationsOverview/ReactJs/styles.css
index ca4086485d13..5110b859d19d 100644
--- a/apps/demos/Demos/Common/PopupAndNotificationsOverview/ReactJs/styles.css
+++ b/apps/demos/Demos/Common/PopupAndNotificationsOverview/ReactJs/styles.css
@@ -1,6 +1,6 @@
 .large-text {
   font-size: 24px;
-  color: #ff6a50;
+  color: var(--dxds-color-content-orange, #ff6a50);
 }
 
 .opacity {
@@ -20,7 +20,7 @@
 .images .item-content {
   position: relative;
   margin: 5px;
-  color: #fff;
+  color: var(--dxds-color-content-on-color, #fff);
   cursor: pointer;
 }
 
@@ -37,7 +37,7 @@
 }
 
 .images .item-content:hover > .item-options {
-  box-shadow: inset 0 0 0 2px #f05b41;
+  box-shadow: inset 0 0 0 2px var(--dxds-color-border-orange, #f05b41);
 }
 
 .item-content .item-options > div {
@@ -46,7 +46,7 @@
   width: 100%;
   height: 64px;
   padding-top: 4px;
-  background-color: rgba(19, 32, 51, 0.8);
+  background-color: color-mix(in srgb, var(--dxds-color-bg-static-dark, rgb(19, 32, 51)) calc(var(--dxds-opacity-80, 0.8) * 100%), transparent);
   z-index: 1;
   box-sizing: border-box;
   border-left: 2px solid transparent;
@@ -54,9 +54,9 @@
 }
 
 .images .item-content:hover > .item-options > div {
-  border-bottom: 2px solid #f05b41;
-  border-left: 2px solid #f05b41;
-  border-right: 2px solid #f05b41;
+  border-bottom: 2px solid var(--dxds-color-border-orange, #f05b41);
+  border-left: 2px solid var(--dxds-color-border-orange, #f05b41);
+  border-right: 2px solid var(--dxds-color-border-orange, #f05b41);
 }
 
 .item-content .item-options .address,
@@ -77,12 +77,12 @@
   top: 0;
   bottom: 0;
   text-align: center;
-  border-left: 1px solid rgba(255, 255, 255, 0.4);
+  border-left: 1px solid color-mix(in srgb, var(--dxds-color-border-on-color-shared, rgb(255, 255, 255)) calc(var(--dxds-opacity-40, 0.4) * 100%), transparent);
   line-height: 13px;
 }
 
 .item-content .item-options .agent > div:hover {
-  color: #f05b41;
+  color: var(--dxds-color-border-orange, #f05b41);
 }
 
 .item-content .item-options .agent img {
@@ -123,13 +123,13 @@
 }
 
 .dx-button.favorites {
-  background-color: #f05b41;
-  color: #fff;
+  background-color: var(--dxds-color-border-orange, #f05b41);
+  color: var(--dxds-color-content-on-color, #fff);
   position: absolute;
   top: 5px;
   right: 0;
 }
 
 .dx-button.favorites .dx-icon {
-  color: #fff;
+  color: var(--dxds-color-content-on-color, #fff);
 }
diff --git a/apps/demos/Demos/Common/PopupAndNotificationsOverview/Vue/App.vue b/apps/demos/Demos/Common/PopupAndNotificationsOverview/Vue/App.vue
index 7fa962adc2f2..0f84ecf52548 100644
--- a/apps/demos/Demos/Common/PopupAndNotificationsOverview/Vue/App.vue
+++ b/apps/demos/Demos/Common/PopupAndNotificationsOverview/Vue/App.vue
@@ -148,7 +148,7 @@ function changeFavoriteState() {
 <style>
 .large-text {
   font-size: 24px;
-  color: #ff6a50;
+  color: var(--dxds-color-content-orange, #ff6a50);
 }
 
 .opacity {
@@ -168,7 +168,7 @@ function changeFavoriteState() {
 .images .item-content {
   position: relative;
   margin: 5px;
-  color: #fff;
+  color: var(--dxds-color-content-on-color, #fff);
   cursor: pointer;
 }
 
@@ -185,7 +185,7 @@ function changeFavoriteState() {
 }
 
 .images .item-content:hover > .item-options {
-  box-shadow: inset 0 0 0 2px #f05b41;
+  box-shadow: inset 0 0 0 2px var(--dxds-color-border-orange, #f05b41);
 }
 
 .item-content .item-options > div {
@@ -194,7 +194,7 @@ function changeFavoriteState() {
   width: 100%;
   height: 64px;
   padding-top: 4px;
-  background-color: rgba(19, 32, 51, 0.8);
+  background-color: color-mix(in srgb, var(--dxds-color-bg-static-dark, rgb(19, 32, 51)) calc(var(--dxds-opacity-80, 0.8) * 100%), transparent);
   z-index: 1;
   box-sizing: border-box;
   border-left: 2px solid transparent;
@@ -202,9 +202,9 @@ function changeFavoriteState() {
 }
 
 .images .item-content:hover > .item-options > div {
-  border-bottom: 2px solid #f05b41;
-  border-left: 2px solid #f05b41;
-  border-right: 2px solid #f05b41;
+  border-bottom: 2px solid var(--dxds-color-border-orange, #f05b41);
+  border-left: 2px solid var(--dxds-color-border-orange, #f05b41);
+  border-right: 2px solid var(--dxds-color-border-orange, #f05b41);
 }
 
 .item-content .item-options .address,
@@ -225,12 +225,12 @@ function changeFavoriteState() {
   top: 0;
   bottom: 0;
   text-align: center;
-  border-left: 1px solid rgba(255, 255, 255, 0.4);
+  border-left: 1px solid color-mix(in srgb, var(--dxds-color-border-on-color-shared, rgb(255, 255, 255)) calc(var(--dxds-opacity-40, 0.4) * 100%), transparent);
   line-height: 13px;
 }
 
 .item-content .item-options .agent > div:hover {
-  color: #f05b41;
+  color: var(--dxds-color-border-orange, #f05b41);
 }
 
 .item-content .item-options .agent img {
@@ -271,14 +271,14 @@ function changeFavoriteState() {
 }
 
 .dx-button.favorites {
-  background-color: #f05b41;
-  color: #fff;
+  background-color: var(--dxds-color-border-orange, #f05b41);
+  color: var(--dxds-color-content-on-color, #fff);
   position: absolute;
   top: 5px;
   right: 0;
 }
 
 .dx-button.favorites .dx-icon {
-  color: #fff;
+  color: var(--dxds-color-content-on-color, #fff);
 }
 </style>
diff --git a/apps/demos/Demos/Common/PopupAndNotificationsOverview/jQuery/styles.css b/apps/demos/Demos/Common/PopupAndNotificationsOverview/jQuery/styles.css
index ca4086485d13..5110b859d19d 100644
--- a/apps/demos/Demos/Common/PopupAndNotificationsOverview/jQuery/styles.css
+++ b/apps/demos/Demos/Common/PopupAndNotificationsOverview/jQuery/styles.css
@@ -1,6 +1,6 @@
 .large-text {
   font-size: 24px;
-  color: #ff6a50;
+  color: var(--dxds-color-content-orange, #ff6a50);
 }
 
 .opacity {
@@ -20,7 +20,7 @@
 .images .item-content {
   position: relative;
   margin: 5px;
-  color: #fff;
+  color: var(--dxds-color-content-on-color, #fff);
   cursor: pointer;
 }
 
@@ -37,7 +37,7 @@
 }
 
 .images .item-content:hover > .item-options {
-  box-shadow: inset 0 0 0 2px #f05b41;
+  box-shadow: inset 0 0 0 2px var(--dxds-color-border-orange, #f05b41);
 }
 
 .item-content .item-options > div {
@@ -46,7 +46,7 @@
   width: 100%;
   height: 64px;
   padding-top: 4px;
-  background-color: rgba(19, 32, 51, 0.8);
+  background-color: color-mix(in srgb, var(--dxds-color-bg-static-dark, rgb(19, 32, 51)) calc(var(--dxds-opacity-80, 0.8) * 100%), transparent);
   z-index: 1;
   box-sizing: border-box;
   border-left: 2px solid transparent;
@@ -54,9 +54,9 @@
 }
 
 .images .item-content:hover > .item-options > div {
-  border-bottom: 2px solid #f05b41;
-  border-left: 2px solid #f05b41;
-  border-right: 2px solid #f05b41;
+  border-bottom: 2px solid var(--dxds-color-border-orange, #f05b41);
+  border-left: 2px solid var(--dxds-color-border-orange, #f05b41);
+  border-right: 2px solid var(--dxds-color-border-orange, #f05b41);
 }
 
 .item-content .item-options .address,
@@ -77,12 +77,12 @@
   top: 0;
   bottom: 0;
   text-align: center;
-  border-left: 1px solid rgba(255, 255, 255, 0.4);
+  border-left: 1px solid color-mix(in srgb, var(--dxds-color-border-on-color-shared, rgb(255, 255, 255)) calc(var(--dxds-opacity-40, 0.4) * 100%), transparent);
   line-height: 13px;
 }
 
 .item-content .item-options .agent > div:hover {
-  color: #f05b41;
+  color: var(--dxds-color-border-orange, #f05b41);
 }
 
 .item-content .item-options .agent img {
@@ -123,13 +123,13 @@
 }
 
 .dx-button.favorites {
-  background-color: #f05b41;
-  color: #fff;
+  background-color: var(--dxds-color-border-orange, #f05b41);
+  color: var(--dxds-color-content-on-color, #fff);
   position: absolute;
   top: 5px;
   right: 0;
 }
 
 .dx-button.favorites .dx-icon {
-  color: #fff;
+  color: var(--dxds-color-content-on-color, #fff);
 }
diff --git a/apps/demos/Demos/DataGrid/Appearance/Angular/app/app.component.css b/apps/demos/Demos/DataGrid/Appearance/Angular/app/app.component.css
index 5dcb84c26597..330dd979c185 100644
--- a/apps/demos/Demos/DataGrid/Appearance/Angular/app/app.component.css
+++ b/apps/demos/Demos/DataGrid/Appearance/Angular/app/app.component.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/DataGrid/Appearance/React/styles.css b/apps/demos/Demos/DataGrid/Appearance/React/styles.css
index 5dcb84c26597..330dd979c185 100644
--- a/apps/demos/Demos/DataGrid/Appearance/React/styles.css
+++ b/apps/demos/Demos/DataGrid/Appearance/React/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/DataGrid/Appearance/ReactJs/styles.css b/apps/demos/Demos/DataGrid/Appearance/ReactJs/styles.css
index 5dcb84c26597..330dd979c185 100644
--- a/apps/demos/Demos/DataGrid/Appearance/ReactJs/styles.css
+++ b/apps/demos/Demos/DataGrid/Appearance/ReactJs/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/DataGrid/Appearance/Vue/App.vue b/apps/demos/Demos/DataGrid/Appearance/Vue/App.vue
index 00a0ea121a4f..57d2d30d7b3a 100644
--- a/apps/demos/Demos/DataGrid/Appearance/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/Appearance/Vue/App.vue
@@ -81,7 +81,7 @@ const rowAlternationEnabled = ref(true);
 <style>
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/DataGrid/Appearance/jQuery/styles.css b/apps/demos/Demos/DataGrid/Appearance/jQuery/styles.css
index 5dcb84c26597..330dd979c185 100644
--- a/apps/demos/Demos/DataGrid/Appearance/jQuery/styles.css
+++ b/apps/demos/Demos/DataGrid/Appearance/jQuery/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
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..ca4abcda7c46 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-green, 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-red, 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..58a8fdd13d59 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-green, 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-red, 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..58a8fdd13d59 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-green, 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-red, 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 727ab2416de5..6b5e1d742612 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-green, 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-red, 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..58a8fdd13d59 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-green, 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-red, var(--dx-color-danger));
 }
 
 #gridContainer .inc .diff::after,
diff --git a/apps/demos/Demos/DataGrid/ColumnChooser/Angular/app/app.component.css b/apps/demos/Demos/DataGrid/ColumnChooser/Angular/app/app.component.css
index 1994e07391b4..d3eaca837873 100644
--- a/apps/demos/Demos/DataGrid/ColumnChooser/Angular/app/app.component.css
+++ b/apps/demos/Demos/DataGrid/ColumnChooser/Angular/app/app.component.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/ColumnChooser/React/styles.css b/apps/demos/Demos/DataGrid/ColumnChooser/React/styles.css
index 6746b82d7873..ba08c47040af 100644
--- a/apps/demos/Demos/DataGrid/ColumnChooser/React/styles.css
+++ b/apps/demos/Demos/DataGrid/ColumnChooser/React/styles.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/ColumnChooser/ReactJs/styles.css b/apps/demos/Demos/DataGrid/ColumnChooser/ReactJs/styles.css
index 6746b82d7873..ba08c47040af 100644
--- a/apps/demos/Demos/DataGrid/ColumnChooser/ReactJs/styles.css
+++ b/apps/demos/Demos/DataGrid/ColumnChooser/ReactJs/styles.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/ColumnChooser/Vue/App.vue b/apps/demos/Demos/DataGrid/ColumnChooser/Vue/App.vue
index 64df6e0fbada..d567dba2f510 100644
--- a/apps/demos/Demos/DataGrid/ColumnChooser/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/ColumnChooser/Vue/App.vue
@@ -157,7 +157,7 @@ const editorOptions: DxTextBoxTypes.Properties = { placeholder: 'Search column'
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/ColumnChooser/jQuery/styles.css b/apps/demos/Demos/DataGrid/ColumnChooser/jQuery/styles.css
index 6746b82d7873..ba08c47040af 100644
--- a/apps/demos/Demos/DataGrid/ColumnChooser/jQuery/styles.css
+++ b/apps/demos/Demos/DataGrid/ColumnChooser/jQuery/styles.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/ColumnResizing/Angular/app/app.component.css b/apps/demos/Demos/DataGrid/ColumnResizing/Angular/app/app.component.css
index b24788cd817e..ef1fb48fa4ac 100644
--- a/apps/demos/Demos/DataGrid/ColumnResizing/Angular/app/app.component.css
+++ b/apps/demos/Demos/DataGrid/ColumnResizing/Angular/app/app.component.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/ColumnResizing/React/styles.css b/apps/demos/Demos/DataGrid/ColumnResizing/React/styles.css
index b48d7e857cfa..7d269e49c5ed 100644
--- a/apps/demos/Demos/DataGrid/ColumnResizing/React/styles.css
+++ b/apps/demos/Demos/DataGrid/ColumnResizing/React/styles.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/ColumnResizing/ReactJs/styles.css b/apps/demos/Demos/DataGrid/ColumnResizing/ReactJs/styles.css
index b48d7e857cfa..7d269e49c5ed 100644
--- a/apps/demos/Demos/DataGrid/ColumnResizing/ReactJs/styles.css
+++ b/apps/demos/Demos/DataGrid/ColumnResizing/ReactJs/styles.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/ColumnResizing/Vue/App.vue b/apps/demos/Demos/DataGrid/ColumnResizing/Vue/App.vue
index 011b3be5f0c6..172d3506b8e9 100644
--- a/apps/demos/Demos/DataGrid/ColumnResizing/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/ColumnResizing/Vue/App.vue
@@ -47,7 +47,7 @@ const currentMode = ref(resizingModes[0]);
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/ColumnResizing/jQuery/styles.css b/apps/demos/Demos/DataGrid/ColumnResizing/jQuery/styles.css
index b48d7e857cfa..7d269e49c5ed 100644
--- a/apps/demos/Demos/DataGrid/ColumnResizing/jQuery/styles.css
+++ b/apps/demos/Demos/DataGrid/ColumnResizing/jQuery/styles.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/CustomizeKeyboardNavigation/Angular/app/app.component.css b/apps/demos/Demos/DataGrid/CustomizeKeyboardNavigation/Angular/app/app.component.css
index ad01ab25968b..008bb34466ec 100644
--- a/apps/demos/Demos/DataGrid/CustomizeKeyboardNavigation/Angular/app/app.component.css
+++ b/apps/demos/Demos/DataGrid/CustomizeKeyboardNavigation/Angular/app/app.component.css
@@ -1,7 +1,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/DataGrid/CustomizeKeyboardNavigation/React/styles.css b/apps/demos/Demos/DataGrid/CustomizeKeyboardNavigation/React/styles.css
index ad01ab25968b..008bb34466ec 100644
--- a/apps/demos/Demos/DataGrid/CustomizeKeyboardNavigation/React/styles.css
+++ b/apps/demos/Demos/DataGrid/CustomizeKeyboardNavigation/React/styles.css
@@ -1,7 +1,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/DataGrid/CustomizeKeyboardNavigation/ReactJs/styles.css b/apps/demos/Demos/DataGrid/CustomizeKeyboardNavigation/ReactJs/styles.css
index ad01ab25968b..008bb34466ec 100644
--- a/apps/demos/Demos/DataGrid/CustomizeKeyboardNavigation/ReactJs/styles.css
+++ b/apps/demos/Demos/DataGrid/CustomizeKeyboardNavigation/ReactJs/styles.css
@@ -1,7 +1,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/DataGrid/CustomizeKeyboardNavigation/Vue/styles.css b/apps/demos/Demos/DataGrid/CustomizeKeyboardNavigation/Vue/styles.css
index ad01ab25968b..008bb34466ec 100644
--- a/apps/demos/Demos/DataGrid/CustomizeKeyboardNavigation/Vue/styles.css
+++ b/apps/demos/Demos/DataGrid/CustomizeKeyboardNavigation/Vue/styles.css
@@ -1,7 +1,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/DataGrid/CustomizeKeyboardNavigation/jQuery/styles.css b/apps/demos/Demos/DataGrid/CustomizeKeyboardNavigation/jQuery/styles.css
index ad01ab25968b..008bb34466ec 100644
--- a/apps/demos/Demos/DataGrid/CustomizeKeyboardNavigation/jQuery/styles.css
+++ b/apps/demos/Demos/DataGrid/CustomizeKeyboardNavigation/jQuery/styles.css
@@ -1,7 +1,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/DataGrid/DeferredSelection/Angular/app/app.component.css b/apps/demos/Demos/DataGrid/DeferredSelection/Angular/app/app.component.css
index 1fb3aedc48cd..1411a9e607b8 100644
--- a/apps/demos/Demos/DataGrid/DeferredSelection/Angular/app/app.component.css
+++ b/apps/demos/Demos/DataGrid/DeferredSelection/Angular/app/app.component.css
@@ -7,7 +7,7 @@
 }
 
 ::ng-deep .selection-summary {
-  border: 1px solid rgba(161, 161, 161, 0.2);
+  border: 1px solid var(--dxds-color-border-subtle, rgba(161, 161, 161, 0.2));
   padding: 25px;
 }
 
diff --git a/apps/demos/Demos/DataGrid/DeferredSelection/React/styles.css b/apps/demos/Demos/DataGrid/DeferredSelection/React/styles.css
index 0fb86316f4bf..f900cb20ae6b 100644
--- a/apps/demos/Demos/DataGrid/DeferredSelection/React/styles.css
+++ b/apps/demos/Demos/DataGrid/DeferredSelection/React/styles.css
@@ -7,7 +7,7 @@
 }
 
 .selection-summary {
-  border: 1px solid rgba(161, 161, 161, 0.2);
+  border: 1px solid var(--dxds-color-border-subtle, rgba(161, 161, 161, 0.2));
   padding: 25px;
 }
 
diff --git a/apps/demos/Demos/DataGrid/DeferredSelection/ReactJs/styles.css b/apps/demos/Demos/DataGrid/DeferredSelection/ReactJs/styles.css
index 0fb86316f4bf..f900cb20ae6b 100644
--- a/apps/demos/Demos/DataGrid/DeferredSelection/ReactJs/styles.css
+++ b/apps/demos/Demos/DataGrid/DeferredSelection/ReactJs/styles.css
@@ -7,7 +7,7 @@
 }
 
 .selection-summary {
-  border: 1px solid rgba(161, 161, 161, 0.2);
+  border: 1px solid var(--dxds-color-border-subtle, rgba(161, 161, 161, 0.2));
   padding: 25px;
 }
 
diff --git a/apps/demos/Demos/DataGrid/DeferredSelection/Vue/App.vue b/apps/demos/Demos/DataGrid/DeferredSelection/Vue/App.vue
index 1a283800da1e..a04d06b1bd32 100644
--- a/apps/demos/Demos/DataGrid/DeferredSelection/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/DeferredSelection/Vue/App.vue
@@ -144,7 +144,7 @@ const onInitialized = (e: DxDataGridTypes.InitializedEvent) => {
 }
 
 .selection-summary {
-  border: 1px solid rgba(161, 161, 161, 0.2);
+  border: 1px solid var(--dxds-color-border-subtle, rgba(161, 161, 161, 0.2));
   padding: 25px;
 }
 
diff --git a/apps/demos/Demos/DataGrid/DeferredSelection/jQuery/styles.css b/apps/demos/Demos/DataGrid/DeferredSelection/jQuery/styles.css
index 0fb86316f4bf..f900cb20ae6b 100644
--- a/apps/demos/Demos/DataGrid/DeferredSelection/jQuery/styles.css
+++ b/apps/demos/Demos/DataGrid/DeferredSelection/jQuery/styles.css
@@ -7,7 +7,7 @@
 }
 
 .selection-summary {
-  border: 1px solid rgba(161, 161, 161, 0.2);
+  border: 1px solid var(--dxds-color-border-subtle, rgba(161, 161, 161, 0.2));
   padding: 25px;
 }
 
diff --git a/apps/demos/Demos/DataGrid/EditStateManagement/Angular/app/app.component.css b/apps/demos/Demos/DataGrid/EditStateManagement/Angular/app/app.component.css
index 898db60897f7..2458a5fd1efe 100644
--- a/apps/demos/Demos/DataGrid/EditStateManagement/Angular/app/app.component.css
+++ b/apps/demos/Demos/DataGrid/EditStateManagement/Angular/app/app.component.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/EditStateManagement/React/styles.css b/apps/demos/Demos/DataGrid/EditStateManagement/React/styles.css
index b065ee146fb3..9147ca8f4415 100644
--- a/apps/demos/Demos/DataGrid/EditStateManagement/React/styles.css
+++ b/apps/demos/Demos/DataGrid/EditStateManagement/React/styles.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/EditStateManagement/ReactJs/styles.css b/apps/demos/Demos/DataGrid/EditStateManagement/ReactJs/styles.css
index b065ee146fb3..9147ca8f4415 100644
--- a/apps/demos/Demos/DataGrid/EditStateManagement/ReactJs/styles.css
+++ b/apps/demos/Demos/DataGrid/EditStateManagement/ReactJs/styles.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/EditStateManagement/Vue/App.vue b/apps/demos/Demos/DataGrid/EditStateManagement/Vue/App.vue
index c904c0e3ce7a..48a2e33b57de 100644
--- a/apps/demos/Demos/DataGrid/EditStateManagement/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/EditStateManagement/Vue/App.vue
@@ -99,7 +99,7 @@ loadOrders();
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/EditStateManagement/jQuery/styles.css b/apps/demos/Demos/DataGrid/EditStateManagement/jQuery/styles.css
index cdbe817b6eef..0957a3d3144f 100644
--- a/apps/demos/Demos/DataGrid/EditStateManagement/jQuery/styles.css
+++ b/apps/demos/Demos/DataGrid/EditStateManagement/jQuery/styles.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/Filtering/Angular/app/app.component.css b/apps/demos/Demos/DataGrid/Filtering/Angular/app/app.component.css
index 5fd8e0745857..5e49d520f72e 100644
--- a/apps/demos/Demos/DataGrid/Filtering/Angular/app/app.component.css
+++ b/apps/demos/Demos/DataGrid/Filtering/Angular/app/app.component.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/Filtering/React/styles.css b/apps/demos/Demos/DataGrid/Filtering/React/styles.css
index 69293d055183..d66545db6a13 100644
--- a/apps/demos/Demos/DataGrid/Filtering/React/styles.css
+++ b/apps/demos/Demos/DataGrid/Filtering/React/styles.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/Filtering/ReactJs/styles.css b/apps/demos/Demos/DataGrid/Filtering/ReactJs/styles.css
index 69293d055183..d66545db6a13 100644
--- a/apps/demos/Demos/DataGrid/Filtering/ReactJs/styles.css
+++ b/apps/demos/Demos/DataGrid/Filtering/ReactJs/styles.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/Filtering/Vue/App.vue b/apps/demos/Demos/DataGrid/Filtering/Vue/App.vue
index 67f485818c6d..b09dd31121cd 100644
--- a/apps/demos/Demos/DataGrid/Filtering/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/Filtering/Vue/App.vue
@@ -205,7 +205,7 @@ const orderDateHeaderFilter = (options: { dataSource: DataSourceOptions }) => {
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/Filtering/jQuery/styles.css b/apps/demos/Demos/DataGrid/Filtering/jQuery/styles.css
index 69293d055183..d66545db6a13 100644
--- a/apps/demos/Demos/DataGrid/Filtering/jQuery/styles.css
+++ b/apps/demos/Demos/DataGrid/Filtering/jQuery/styles.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/FocusedRow/Angular/app/app.component.css b/apps/demos/Demos/DataGrid/FocusedRow/Angular/app/app.component.css
index 4c8dc5913c0f..bbd98265054b 100644
--- a/apps/demos/Demos/DataGrid/FocusedRow/Angular/app/app.component.css
+++ b/apps/demos/Demos/DataGrid/FocusedRow/Angular/app/app.component.css
@@ -3,7 +3,7 @@
   min-height: 200px;
   display: flex;
   flex-wrap: nowrap;
-  border: 2px solid rgba(0, 0, 0, 0.1);
+  border: 2px solid var(--dxds-color-border, rgba(0, 0, 0, 0.1));
   padding: 16px;
   box-sizing: border-box;
   align-items: baseline;
@@ -44,7 +44,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/DataGrid/FocusedRow/React/styles.css b/apps/demos/Demos/DataGrid/FocusedRow/React/styles.css
index 4c8dc5913c0f..bbd98265054b 100644
--- a/apps/demos/Demos/DataGrid/FocusedRow/React/styles.css
+++ b/apps/demos/Demos/DataGrid/FocusedRow/React/styles.css
@@ -3,7 +3,7 @@
   min-height: 200px;
   display: flex;
   flex-wrap: nowrap;
-  border: 2px solid rgba(0, 0, 0, 0.1);
+  border: 2px solid var(--dxds-color-border, rgba(0, 0, 0, 0.1));
   padding: 16px;
   box-sizing: border-box;
   align-items: baseline;
@@ -44,7 +44,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/DataGrid/FocusedRow/ReactJs/styles.css b/apps/demos/Demos/DataGrid/FocusedRow/ReactJs/styles.css
index 4c8dc5913c0f..bbd98265054b 100644
--- a/apps/demos/Demos/DataGrid/FocusedRow/ReactJs/styles.css
+++ b/apps/demos/Demos/DataGrid/FocusedRow/ReactJs/styles.css
@@ -3,7 +3,7 @@
   min-height: 200px;
   display: flex;
   flex-wrap: nowrap;
-  border: 2px solid rgba(0, 0, 0, 0.1);
+  border: 2px solid var(--dxds-color-border, rgba(0, 0, 0, 0.1));
   padding: 16px;
   box-sizing: border-box;
   align-items: baseline;
@@ -44,7 +44,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/DataGrid/FocusedRow/Vue/styles.css b/apps/demos/Demos/DataGrid/FocusedRow/Vue/styles.css
index 4c8dc5913c0f..bbd98265054b 100644
--- a/apps/demos/Demos/DataGrid/FocusedRow/Vue/styles.css
+++ b/apps/demos/Demos/DataGrid/FocusedRow/Vue/styles.css
@@ -3,7 +3,7 @@
   min-height: 200px;
   display: flex;
   flex-wrap: nowrap;
-  border: 2px solid rgba(0, 0, 0, 0.1);
+  border: 2px solid var(--dxds-color-border, rgba(0, 0, 0, 0.1));
   padding: 16px;
   box-sizing: border-box;
   align-items: baseline;
@@ -44,7 +44,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/DataGrid/FocusedRow/jQuery/styles.css b/apps/demos/Demos/DataGrid/FocusedRow/jQuery/styles.css
index 4c8dc5913c0f..bbd98265054b 100644
--- a/apps/demos/Demos/DataGrid/FocusedRow/jQuery/styles.css
+++ b/apps/demos/Demos/DataGrid/FocusedRow/jQuery/styles.css
@@ -3,7 +3,7 @@
   min-height: 200px;
   display: flex;
   flex-wrap: nowrap;
-  border: 2px solid rgba(0, 0, 0, 0.1);
+  border: 2px solid var(--dxds-color-border, rgba(0, 0, 0, 0.1));
   padding: 16px;
   box-sizing: border-box;
   align-items: baseline;
@@ -44,7 +44,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/DataGrid/LocalReordering/Angular/app/app.component.css b/apps/demos/Demos/DataGrid/LocalReordering/Angular/app/app.component.css
index 5dcb84c26597..330dd979c185 100644
--- a/apps/demos/Demos/DataGrid/LocalReordering/Angular/app/app.component.css
+++ b/apps/demos/Demos/DataGrid/LocalReordering/Angular/app/app.component.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/DataGrid/LocalReordering/React/styles.css b/apps/demos/Demos/DataGrid/LocalReordering/React/styles.css
index 5dcb84c26597..330dd979c185 100644
--- a/apps/demos/Demos/DataGrid/LocalReordering/React/styles.css
+++ b/apps/demos/Demos/DataGrid/LocalReordering/React/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/DataGrid/LocalReordering/ReactJs/styles.css b/apps/demos/Demos/DataGrid/LocalReordering/ReactJs/styles.css
index 5dcb84c26597..330dd979c185 100644
--- a/apps/demos/Demos/DataGrid/LocalReordering/ReactJs/styles.css
+++ b/apps/demos/Demos/DataGrid/LocalReordering/ReactJs/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/DataGrid/LocalReordering/Vue/App.vue b/apps/demos/Demos/DataGrid/LocalReordering/Vue/App.vue
index 0c3f70b2f095..53acdb1a19e0 100644
--- a/apps/demos/Demos/DataGrid/LocalReordering/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/LocalReordering/Vue/App.vue
@@ -79,7 +79,7 @@ const onReorder = (e: DxDataGridTypes.RowDraggingReorderEvent<Task>) => {
 <style>
   .options {
     padding: 20px;
-    background-color: rgba(191, 191, 191, 0.15);
+    background-color: var(--dx-color-options-panel-bg);
     margin-top: 20px;
   }
 
diff --git a/apps/demos/Demos/DataGrid/LocalReordering/jQuery/styles.css b/apps/demos/Demos/DataGrid/LocalReordering/jQuery/styles.css
index 5dcb84c26597..330dd979c185 100644
--- a/apps/demos/Demos/DataGrid/LocalReordering/jQuery/styles.css
+++ b/apps/demos/Demos/DataGrid/LocalReordering/jQuery/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/DataGrid/MultipleRecordSelectionAPI/Angular/app/app.component.css b/apps/demos/Demos/DataGrid/MultipleRecordSelectionAPI/Angular/app/app.component.css
index 646b2afd3736..e5d2b04d7bbf 100644
--- a/apps/demos/Demos/DataGrid/MultipleRecordSelectionAPI/Angular/app/app.component.css
+++ b/apps/demos/Demos/DataGrid/MultipleRecordSelectionAPI/Angular/app/app.component.css
@@ -7,7 +7,7 @@
 ::ng-deep .selected-data {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 ::ng-deep .selected-data .caption {
diff --git a/apps/demos/Demos/DataGrid/MultipleRecordSelectionAPI/React/styles.css b/apps/demos/Demos/DataGrid/MultipleRecordSelectionAPI/React/styles.css
index 10adc96304ae..f3b900d9e0cc 100644
--- a/apps/demos/Demos/DataGrid/MultipleRecordSelectionAPI/React/styles.css
+++ b/apps/demos/Demos/DataGrid/MultipleRecordSelectionAPI/React/styles.css
@@ -7,7 +7,7 @@
 .selected-data {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .selected-data .caption {
diff --git a/apps/demos/Demos/DataGrid/MultipleRecordSelectionAPI/ReactJs/styles.css b/apps/demos/Demos/DataGrid/MultipleRecordSelectionAPI/ReactJs/styles.css
index 10adc96304ae..f3b900d9e0cc 100644
--- a/apps/demos/Demos/DataGrid/MultipleRecordSelectionAPI/ReactJs/styles.css
+++ b/apps/demos/Demos/DataGrid/MultipleRecordSelectionAPI/ReactJs/styles.css
@@ -7,7 +7,7 @@
 .selected-data {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .selected-data .caption {
diff --git a/apps/demos/Demos/DataGrid/MultipleRecordSelectionAPI/Vue/App.vue b/apps/demos/Demos/DataGrid/MultipleRecordSelectionAPI/Vue/App.vue
index 56c9d6c6b8b1..02b4c9668fdf 100644
--- a/apps/demos/Demos/DataGrid/MultipleRecordSelectionAPI/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/MultipleRecordSelectionAPI/Vue/App.vue
@@ -133,7 +133,7 @@ const onSelectionChanged = (e: DxDataGridTypes.SelectionChangedEvent<Employee>)
 .selected-data {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .selected-data .caption {
diff --git a/apps/demos/Demos/DataGrid/MultipleRecordSelectionAPI/jQuery/styles.css b/apps/demos/Demos/DataGrid/MultipleRecordSelectionAPI/jQuery/styles.css
index 10adc96304ae..f3b900d9e0cc 100644
--- a/apps/demos/Demos/DataGrid/MultipleRecordSelectionAPI/jQuery/styles.css
+++ b/apps/demos/Demos/DataGrid/MultipleRecordSelectionAPI/jQuery/styles.css
@@ -7,7 +7,7 @@
 .selected-data {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .selected-data .caption {
diff --git a/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/Angular/app/app.component.css b/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/Angular/app/app.component.css
index 635c4eb383a1..4dc72ce18313 100644
--- a/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/Angular/app/app.component.css
+++ b/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/Angular/app/app.component.css
@@ -1,7 +1,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/React/styles.css b/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/React/styles.css
index fdbd9f1fa7a2..1f59119da7b3 100644
--- a/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/React/styles.css
+++ b/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/React/styles.css
@@ -1,7 +1,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/ReactJs/styles.css b/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/ReactJs/styles.css
index fdbd9f1fa7a2..1f59119da7b3 100644
--- a/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/ReactJs/styles.css
+++ b/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/ReactJs/styles.css
@@ -1,7 +1,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/Vue/App.vue b/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/Vue/App.vue
index bacad8a5db85..3030734b1f63 100644
--- a/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/Vue/App.vue
@@ -84,7 +84,7 @@ const checkBoxesMode = ref<DxDataGridTypes.SelectionColumnDisplayMode>(isGeneric
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/jQuery/styles.css b/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/jQuery/styles.css
index fdbd9f1fa7a2..1f59119da7b3 100644
--- a/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/jQuery/styles.css
+++ b/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/jQuery/styles.css
@@ -1,7 +1,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/DataGrid/MultipleSorting/Angular/app/app.component.css b/apps/demos/Demos/DataGrid/MultipleSorting/Angular/app/app.component.css
index b502a734ce49..304a9478ef11 100644
--- a/apps/demos/Demos/DataGrid/MultipleSorting/Angular/app/app.component.css
+++ b/apps/demos/Demos/DataGrid/MultipleSorting/Angular/app/app.component.css
@@ -1,7 +1,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/MultipleSorting/React/styles.css b/apps/demos/Demos/DataGrid/MultipleSorting/React/styles.css
index b502a734ce49..304a9478ef11 100644
--- a/apps/demos/Demos/DataGrid/MultipleSorting/React/styles.css
+++ b/apps/demos/Demos/DataGrid/MultipleSorting/React/styles.css
@@ -1,7 +1,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/MultipleSorting/ReactJs/styles.css b/apps/demos/Demos/DataGrid/MultipleSorting/ReactJs/styles.css
index b502a734ce49..304a9478ef11 100644
--- a/apps/demos/Demos/DataGrid/MultipleSorting/ReactJs/styles.css
+++ b/apps/demos/Demos/DataGrid/MultipleSorting/ReactJs/styles.css
@@ -1,7 +1,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/MultipleSorting/Vue/App.vue b/apps/demos/Demos/DataGrid/MultipleSorting/Vue/App.vue
index aff75d99e524..9cd47f154682 100644
--- a/apps/demos/Demos/DataGrid/MultipleSorting/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/MultipleSorting/Vue/App.vue
@@ -66,7 +66,7 @@ const onValueChanged = () => {
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/MultipleSorting/jQuery/styles.css b/apps/demos/Demos/DataGrid/MultipleSorting/jQuery/styles.css
index b502a734ce49..304a9478ef11 100644
--- a/apps/demos/Demos/DataGrid/MultipleSorting/jQuery/styles.css
+++ b/apps/demos/Demos/DataGrid/MultipleSorting/jQuery/styles.css
@@ -1,7 +1,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/NewRecordPosition/Angular/app/app.component.css b/apps/demos/Demos/DataGrid/NewRecordPosition/Angular/app/app.component.css
index 4f5f624bc171..9286b8e070b0 100644
--- a/apps/demos/Demos/DataGrid/NewRecordPosition/Angular/app/app.component.css
+++ b/apps/demos/Demos/DataGrid/NewRecordPosition/Angular/app/app.component.css
@@ -5,7 +5,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/DataGrid/NewRecordPosition/React/styles.css b/apps/demos/Demos/DataGrid/NewRecordPosition/React/styles.css
index 4f5f624bc171..9286b8e070b0 100644
--- a/apps/demos/Demos/DataGrid/NewRecordPosition/React/styles.css
+++ b/apps/demos/Demos/DataGrid/NewRecordPosition/React/styles.css
@@ -5,7 +5,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/DataGrid/NewRecordPosition/ReactJs/styles.css b/apps/demos/Demos/DataGrid/NewRecordPosition/ReactJs/styles.css
index 4f5f624bc171..9286b8e070b0 100644
--- a/apps/demos/Demos/DataGrid/NewRecordPosition/ReactJs/styles.css
+++ b/apps/demos/Demos/DataGrid/NewRecordPosition/ReactJs/styles.css
@@ -5,7 +5,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/DataGrid/NewRecordPosition/Vue/App.vue b/apps/demos/Demos/DataGrid/NewRecordPosition/Vue/App.vue
index e3c29fb7f7e6..e3f1be68f70b 100644
--- a/apps/demos/Demos/DataGrid/NewRecordPosition/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/NewRecordPosition/Vue/App.vue
@@ -135,7 +135,7 @@ const onRowInserted = (e: DxDataGridTypes.RowInsertedEvent) => {
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/DataGrid/NewRecordPosition/jQuery/styles.css b/apps/demos/Demos/DataGrid/NewRecordPosition/jQuery/styles.css
index 4f5f624bc171..9286b8e070b0 100644
--- a/apps/demos/Demos/DataGrid/NewRecordPosition/jQuery/styles.css
+++ b/apps/demos/Demos/DataGrid/NewRecordPosition/jQuery/styles.css
@@ -5,7 +5,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/DataGrid/RealTimeUpdates/Angular/app/app.component.css b/apps/demos/Demos/DataGrid/RealTimeUpdates/Angular/app/app.component.css
index 9314b76aee5f..5a2f156dcd89 100644
--- a/apps/demos/Demos/DataGrid/RealTimeUpdates/Angular/app/app.component.css
+++ b/apps/demos/Demos/DataGrid/RealTimeUpdates/Angular/app/app.component.css
@@ -1,7 +1,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/RealTimeUpdates/React/styles.css b/apps/demos/Demos/DataGrid/RealTimeUpdates/React/styles.css
index 5f18a81631b1..6c72f0d3e364 100644
--- a/apps/demos/Demos/DataGrid/RealTimeUpdates/React/styles.css
+++ b/apps/demos/Demos/DataGrid/RealTimeUpdates/React/styles.css
@@ -1,7 +1,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/RealTimeUpdates/ReactJs/styles.css b/apps/demos/Demos/DataGrid/RealTimeUpdates/ReactJs/styles.css
index 5f18a81631b1..6c72f0d3e364 100644
--- a/apps/demos/Demos/DataGrid/RealTimeUpdates/ReactJs/styles.css
+++ b/apps/demos/Demos/DataGrid/RealTimeUpdates/ReactJs/styles.css
@@ -1,7 +1,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/RealTimeUpdates/Vue/App.vue b/apps/demos/Demos/DataGrid/RealTimeUpdates/Vue/App.vue
index 2f7c857437b7..b3dedfcb0f9c 100644
--- a/apps/demos/Demos/DataGrid/RealTimeUpdates/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/RealTimeUpdates/Vue/App.vue
@@ -188,7 +188,7 @@ const getAmount = (order: Order) => order.UnitPrice * order.Quantity;
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/RealTimeUpdates/jQuery/styles.css b/apps/demos/Demos/DataGrid/RealTimeUpdates/jQuery/styles.css
index 1a961e6b1b6f..1f0b9271b85f 100644
--- a/apps/demos/Demos/DataGrid/RealTimeUpdates/jQuery/styles.css
+++ b/apps/demos/Demos/DataGrid/RealTimeUpdates/jQuery/styles.css
@@ -1,7 +1,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/RecordGrouping/Angular/app/app.component.css b/apps/demos/Demos/DataGrid/RecordGrouping/Angular/app/app.component.css
index b502a734ce49..304a9478ef11 100644
--- a/apps/demos/Demos/DataGrid/RecordGrouping/Angular/app/app.component.css
+++ b/apps/demos/Demos/DataGrid/RecordGrouping/Angular/app/app.component.css
@@ -1,7 +1,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/RecordGrouping/React/styles.css b/apps/demos/Demos/DataGrid/RecordGrouping/React/styles.css
index b502a734ce49..304a9478ef11 100644
--- a/apps/demos/Demos/DataGrid/RecordGrouping/React/styles.css
+++ b/apps/demos/Demos/DataGrid/RecordGrouping/React/styles.css
@@ -1,7 +1,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/RecordGrouping/ReactJs/styles.css b/apps/demos/Demos/DataGrid/RecordGrouping/ReactJs/styles.css
index b502a734ce49..304a9478ef11 100644
--- a/apps/demos/Demos/DataGrid/RecordGrouping/ReactJs/styles.css
+++ b/apps/demos/Demos/DataGrid/RecordGrouping/ReactJs/styles.css
@@ -1,7 +1,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/RecordGrouping/Vue/App.vue b/apps/demos/Demos/DataGrid/RecordGrouping/Vue/App.vue
index a0ebd5b1fcc9..0dedf9cc62f2 100644
--- a/apps/demos/Demos/DataGrid/RecordGrouping/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/RecordGrouping/Vue/App.vue
@@ -56,7 +56,7 @@ const autoExpandAll = ref(true);
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/RecordGrouping/jQuery/styles.css b/apps/demos/Demos/DataGrid/RecordGrouping/jQuery/styles.css
index b502a734ce49..304a9478ef11 100644
--- a/apps/demos/Demos/DataGrid/RecordGrouping/jQuery/styles.css
+++ b/apps/demos/Demos/DataGrid/RecordGrouping/jQuery/styles.css
@@ -1,7 +1,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/RecordPaging/Angular/app/app.component.css b/apps/demos/Demos/DataGrid/RecordPaging/Angular/app/app.component.css
index 52781ef1cec7..582a7b97d777 100644
--- a/apps/demos/Demos/DataGrid/RecordPaging/Angular/app/app.component.css
+++ b/apps/demos/Demos/DataGrid/RecordPaging/Angular/app/app.component.css
@@ -5,7 +5,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/DataGrid/RecordPaging/React/styles.css b/apps/demos/Demos/DataGrid/RecordPaging/React/styles.css
index 52781ef1cec7..582a7b97d777 100644
--- a/apps/demos/Demos/DataGrid/RecordPaging/React/styles.css
+++ b/apps/demos/Demos/DataGrid/RecordPaging/React/styles.css
@@ -5,7 +5,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/DataGrid/RecordPaging/ReactJs/styles.css b/apps/demos/Demos/DataGrid/RecordPaging/ReactJs/styles.css
index 52781ef1cec7..582a7b97d777 100644
--- a/apps/demos/Demos/DataGrid/RecordPaging/ReactJs/styles.css
+++ b/apps/demos/Demos/DataGrid/RecordPaging/ReactJs/styles.css
@@ -5,7 +5,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/DataGrid/RecordPaging/Vue/styles.css b/apps/demos/Demos/DataGrid/RecordPaging/Vue/styles.css
index 52781ef1cec7..582a7b97d777 100644
--- a/apps/demos/Demos/DataGrid/RecordPaging/Vue/styles.css
+++ b/apps/demos/Demos/DataGrid/RecordPaging/Vue/styles.css
@@ -5,7 +5,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/DataGrid/RecordPaging/jQuery/styles.css b/apps/demos/Demos/DataGrid/RecordPaging/jQuery/styles.css
index 52781ef1cec7..582a7b97d777 100644
--- a/apps/demos/Demos/DataGrid/RecordPaging/jQuery/styles.css
+++ b/apps/demos/Demos/DataGrid/RecordPaging/jQuery/styles.css
@@ -5,7 +5,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/DataGrid/RemoteCRUDOperations/Angular/app/app.component.css b/apps/demos/Demos/DataGrid/RemoteCRUDOperations/Angular/app/app.component.css
index f7282228a08f..e4498a594f18 100644
--- a/apps/demos/Demos/DataGrid/RemoteCRUDOperations/Angular/app/app.component.css
+++ b/apps/demos/Demos/DataGrid/RemoteCRUDOperations/Angular/app/app.component.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
@@ -57,7 +57,7 @@
 
 ::ng-deep #requests ul li {
   padding: 7px 0;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--dxds-color-border, #ddd);
 }
 
 ::ng-deep #requests ul li:last-child {
diff --git a/apps/demos/Demos/DataGrid/RemoteCRUDOperations/React/styles.css b/apps/demos/Demos/DataGrid/RemoteCRUDOperations/React/styles.css
index 781c7df1ede6..57eb6d958b17 100644
--- a/apps/demos/Demos/DataGrid/RemoteCRUDOperations/React/styles.css
+++ b/apps/demos/Demos/DataGrid/RemoteCRUDOperations/React/styles.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
@@ -57,7 +57,7 @@
 
 #requests ul li {
   padding: 7px 0;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--dxds-color-border, #ddd);
 }
 
 #requests ul li:last-child {
diff --git a/apps/demos/Demos/DataGrid/RemoteCRUDOperations/ReactJs/styles.css b/apps/demos/Demos/DataGrid/RemoteCRUDOperations/ReactJs/styles.css
index 781c7df1ede6..57eb6d958b17 100644
--- a/apps/demos/Demos/DataGrid/RemoteCRUDOperations/ReactJs/styles.css
+++ b/apps/demos/Demos/DataGrid/RemoteCRUDOperations/ReactJs/styles.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
@@ -57,7 +57,7 @@
 
 #requests ul li {
   padding: 7px 0;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--dxds-color-border, #ddd);
 }
 
 #requests ul li:last-child {
diff --git a/apps/demos/Demos/DataGrid/RemoteCRUDOperations/Vue/App.vue b/apps/demos/Demos/DataGrid/RemoteCRUDOperations/Vue/App.vue
index e5a16c922886..9ba7546d4dc6 100644
--- a/apps/demos/Demos/DataGrid/RemoteCRUDOperations/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/RemoteCRUDOperations/Vue/App.vue
@@ -181,7 +181,7 @@ const clearRequests = () => {
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
@@ -233,7 +233,7 @@ const clearRequests = () => {
 
 #requests ul li {
   padding: 7px 0;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--dxds-color-border, #ddd);
 }
 
 #requests ul li:last-child {
diff --git a/apps/demos/Demos/DataGrid/RemoteCRUDOperations/jQuery/styles.css b/apps/demos/Demos/DataGrid/RemoteCRUDOperations/jQuery/styles.css
index 781c7df1ede6..57eb6d958b17 100644
--- a/apps/demos/Demos/DataGrid/RemoteCRUDOperations/jQuery/styles.css
+++ b/apps/demos/Demos/DataGrid/RemoteCRUDOperations/jQuery/styles.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
@@ -57,7 +57,7 @@
 
 #requests ul li {
   padding: 7px 0;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--dxds-color-border, #ddd);
 }
 
 #requests ul li:last-child {
diff --git a/apps/demos/Demos/DataGrid/RemoteReordering/Angular/app/app.component.css b/apps/demos/Demos/DataGrid/RemoteReordering/Angular/app/app.component.css
deleted file mode 100644
index d3882b0e2e81..000000000000
--- a/apps/demos/Demos/DataGrid/RemoteReordering/Angular/app/app.component.css
+++ /dev/null
@@ -1,14 +0,0 @@
-::ng-deep #employeeInfo .employeePhoto {
-  height: 100px;
-  float: left;
-  padding: 20px;
-}
-
-::ng-deep #employeeInfo .employeeNotes {
-  padding-top: 20px;
-  text-align: justify;
-}
-
-::ng-deep .dark #employeeInfo .employeeNotes {
-  color: rgb(181, 181, 181);
-}
diff --git a/apps/demos/Demos/DataGrid/RemoteReordering/Angular/app/app.component.ts b/apps/demos/Demos/DataGrid/RemoteReordering/Angular/app/app.component.ts
index f476d43ec7bc..c2b2255c4237 100644
--- a/apps/demos/Demos/DataGrid/RemoteReordering/Angular/app/app.component.ts
+++ b/apps/demos/Demos/DataGrid/RemoteReordering/Angular/app/app.component.ts
@@ -12,7 +12,6 @@ const url = 'https://js.devexpress.com/Demos/NetCore/api/DataGridRowReordering';
 @Component({
   selector: 'demo-app',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
   imports: [
     DxDataGridModule,
   ],
diff --git a/apps/demos/Demos/DataGrid/RemoteReordering/React/styles.css b/apps/demos/Demos/DataGrid/RemoteReordering/React/styles.css
deleted file mode 100644
index 5dcb84c26597..000000000000
--- a/apps/demos/Demos/DataGrid/RemoteReordering/React/styles.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.options {
-  padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
-  margin-top: 20px;
-}
-
-.caption {
-  font-size: 18px;
-  font-weight: 500;
-}
-
-.option {
-  width: 24%;
-  display: inline-block;
-  margin-top: 10px;
-}
diff --git a/apps/demos/Demos/DataGrid/RemoteReordering/ReactJs/styles.css b/apps/demos/Demos/DataGrid/RemoteReordering/ReactJs/styles.css
deleted file mode 100644
index 5dcb84c26597..000000000000
--- a/apps/demos/Demos/DataGrid/RemoteReordering/ReactJs/styles.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.options {
-  padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
-  margin-top: 20px;
-}
-
-.caption {
-  font-size: 18px;
-  font-weight: 500;
-}
-
-.option {
-  width: 24%;
-  display: inline-block;
-  margin-top: 10px;
-}
diff --git a/apps/demos/Demos/DataGrid/RemoteReordering/jQuery/index.html b/apps/demos/Demos/DataGrid/RemoteReordering/jQuery/index.html
index fd52dea20488..5aa7314c6053 100644
--- a/apps/demos/Demos/DataGrid/RemoteReordering/jQuery/index.html
+++ b/apps/demos/Demos/DataGrid/RemoteReordering/jQuery/index.html
@@ -9,7 +9,6 @@
     <link rel="stylesheet" type="text/css" href="../../../../node_modules/devextreme-dist/css/dx.light.css" />
     <script src="../../../../node_modules/devextreme-dist/js/dx.all.js"></script>
     <script src="../../../../node_modules/devextreme-aspnet-data/js/dx.aspnet.data.js"></script>
-    <link rel="stylesheet" type="text/css" href="styles.css" />
     <script src="index.js"></script>
   </head>
   <body class="dx-viewport">
diff --git a/apps/demos/Demos/DataGrid/RemoteReordering/jQuery/styles.css b/apps/demos/Demos/DataGrid/RemoteReordering/jQuery/styles.css
deleted file mode 100644
index 5371ee3dbb56..000000000000
--- a/apps/demos/Demos/DataGrid/RemoteReordering/jQuery/styles.css
+++ /dev/null
@@ -1,14 +0,0 @@
-#employeeInfo .employeePhoto {
-  height: 100px;
-  float: left;
-  padding: 20px;
-}
-
-#employeeInfo .employeeNotes {
-  padding-top: 20px;
-  text-align: justify;
-}
-
-.dark #employeeInfo .employeeNotes {
-  color: rgb(181, 181, 181);
-}
diff --git a/apps/demos/Demos/DataGrid/RightToLeftSupport/Angular/app/app.component.css b/apps/demos/Demos/DataGrid/RightToLeftSupport/Angular/app/app.component.css
index 276dff3fa5f5..9b6f645d281e 100644
--- a/apps/demos/Demos/DataGrid/RightToLeftSupport/Angular/app/app.component.css
+++ b/apps/demos/Demos/DataGrid/RightToLeftSupport/Angular/app/app.component.css
@@ -11,7 +11,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/RightToLeftSupport/React/styles.css b/apps/demos/Demos/DataGrid/RightToLeftSupport/React/styles.css
index c660e0d99bc6..5d18599718fd 100644
--- a/apps/demos/Demos/DataGrid/RightToLeftSupport/React/styles.css
+++ b/apps/demos/Demos/DataGrid/RightToLeftSupport/React/styles.css
@@ -11,7 +11,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/RightToLeftSupport/ReactJs/styles.css b/apps/demos/Demos/DataGrid/RightToLeftSupport/ReactJs/styles.css
index c660e0d99bc6..5d18599718fd 100644
--- a/apps/demos/Demos/DataGrid/RightToLeftSupport/ReactJs/styles.css
+++ b/apps/demos/Demos/DataGrid/RightToLeftSupport/ReactJs/styles.css
@@ -11,7 +11,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/RightToLeftSupport/Vue/App.vue b/apps/demos/Demos/DataGrid/RightToLeftSupport/Vue/App.vue
index bd1523d412fa..a2a05e864a97 100644
--- a/apps/demos/Demos/DataGrid/RightToLeftSupport/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/RightToLeftSupport/Vue/App.vue
@@ -94,7 +94,7 @@ const onSelectLanguage = (e: DxSelectBoxTypes.ValueChangedEvent) => {
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/RightToLeftSupport/jQuery/styles.css b/apps/demos/Demos/DataGrid/RightToLeftSupport/jQuery/styles.css
index c660e0d99bc6..5d18599718fd 100644
--- a/apps/demos/Demos/DataGrid/RightToLeftSupport/jQuery/styles.css
+++ b/apps/demos/Demos/DataGrid/RightToLeftSupport/jQuery/styles.css
@@ -11,7 +11,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/DataGrid/Row/Angular/app/app.component.css b/apps/demos/Demos/DataGrid/Row/Angular/app/app.component.css
index cdebff7ee675..ba20393526f0 100644
--- a/apps/demos/Demos/DataGrid/Row/Angular/app/app.component.css
+++ b/apps/demos/Demos/DataGrid/Row/Angular/app/app.component.css
@@ -17,29 +17,17 @@
 
 ::ng-deep #gridContainer tr.notes-row td {
   height: 70px;
-  color: #999;
-}
-
-::ng-deep .dark #gridContainer tr.notes-row td {
-  color: #777;
+  color: var(--dxds-color-content-subtler, #999);
 }
 
 ::ng-deep #gridContainer tbody.dx-state-hover {
-  background-color: #ebebeb;
-}
-
-::ng-deep .dark #gridContainer tbody.dx-state-hover {
-  background-color: #484848;
+  background-color: var(--dxds-color-bg-hovered, #ebebeb);
 }
 
 ::ng-deep #gridContainer tbody.dx-state-hover tr.main-row td {
-  color: #000;
-}
-
-::ng-deep .dark #gridContainer tbody.dx-state-hover tr.main-row td {
-  color: #ccc;
+  color: var(--dxds-color-content, #000);
 }
 
 ::ng-deep #gridContainer tbody.dx-state-hover tr.notes-row td {
-  color: #888;
+  color: var(--dxds-color-content-subtler, #888);
 }
diff --git a/apps/demos/Demos/DataGrid/Row/React/styles.css b/apps/demos/Demos/DataGrid/Row/React/styles.css
index c6ffdc033671..fec2d9e31dfc 100644
--- a/apps/demos/Demos/DataGrid/Row/React/styles.css
+++ b/apps/demos/Demos/DataGrid/Row/React/styles.css
@@ -17,29 +17,17 @@
 
 #gridContainer tr.notes-row td {
   height: 70px;
-  color: #999;
-}
-
-.dark #gridContainer tr.notes-row td {
-  color: #777;
+  color: var(--dxds-color-content-subtler, #999);
 }
 
 #gridContainer tbody.dx-state-hover {
-  background-color: #ebebeb;
-}
-
-.dark #gridContainer tbody.dx-state-hover {
-  background-color: #484848;
+  background-color: var(--dxds-color-bg-hovered, #ebebeb);
 }
 
 #gridContainer tbody.dx-state-hover tr.main-row td {
-  color: #000;
-}
-
-.dark #gridContainer tbody.dx-state-hover tr.main-row td {
-  color: #ccc;
+  color: var(--dxds-color-content, #000);
 }
 
 #gridContainer tbody.dx-state-hover tr.notes-row td {
-  color: #888;
+  color: var(--dxds-color-content-subtler, #888);
 }
diff --git a/apps/demos/Demos/DataGrid/Row/ReactJs/styles.css b/apps/demos/Demos/DataGrid/Row/ReactJs/styles.css
index c6ffdc033671..fec2d9e31dfc 100644
--- a/apps/demos/Demos/DataGrid/Row/ReactJs/styles.css
+++ b/apps/demos/Demos/DataGrid/Row/ReactJs/styles.css
@@ -17,29 +17,17 @@
 
 #gridContainer tr.notes-row td {
   height: 70px;
-  color: #999;
-}
-
-.dark #gridContainer tr.notes-row td {
-  color: #777;
+  color: var(--dxds-color-content-subtler, #999);
 }
 
 #gridContainer tbody.dx-state-hover {
-  background-color: #ebebeb;
-}
-
-.dark #gridContainer tbody.dx-state-hover {
-  background-color: #484848;
+  background-color: var(--dxds-color-bg-hovered, #ebebeb);
 }
 
 #gridContainer tbody.dx-state-hover tr.main-row td {
-  color: #000;
-}
-
-.dark #gridContainer tbody.dx-state-hover tr.main-row td {
-  color: #ccc;
+  color: var(--dxds-color-content, #000);
 }
 
 #gridContainer tbody.dx-state-hover tr.notes-row td {
-  color: #888;
+  color: var(--dxds-color-content-subtler, #888);
 }
diff --git a/apps/demos/Demos/DataGrid/Row/Vue/App.vue b/apps/demos/Demos/DataGrid/Row/Vue/App.vue
index 7f2bee938c08..5f73659dd7b8 100644
--- a/apps/demos/Demos/DataGrid/Row/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/Row/Vue/App.vue
@@ -98,30 +98,18 @@ const formatDate = new Intl.DateTimeFormat('en-US').format;
 
 #gridContainer tr.notes-row td {
   height: 70px;
-  color: #999;
-}
-
-.dark #gridContainer tr.notes-row td {
-  color: #777;
+  color: var(--dxds-color-content-subtler, #999);
 }
 
 #gridContainer tbody.dx-state-hover {
-  background-color: #ebebeb;
-}
-
-.dark #gridContainer tbody.dx-state-hover {
-  background-color: #484848;
+  background-color: var(--dxds-color-bg-hovered, #ebebeb);
 }
 
 #gridContainer tbody.dx-state-hover tr.main-row td {
-  color: #000;
-}
-
-.dark #gridContainer tbody.dx-state-hover tr.main-row td {
-  color: #ccc;
+  color: var(--dxds-color-content, #000);
 }
 
 #gridContainer tbody.dx-state-hover tr.notes-row td {
-  color: #888;
+  color: var(--dxds-color-content-subtler, #888);
 }
 </style>
diff --git a/apps/demos/Demos/DataGrid/Row/jQuery/styles.css b/apps/demos/Demos/DataGrid/Row/jQuery/styles.css
index c6ffdc033671..fec2d9e31dfc 100644
--- a/apps/demos/Demos/DataGrid/Row/jQuery/styles.css
+++ b/apps/demos/Demos/DataGrid/Row/jQuery/styles.css
@@ -17,29 +17,17 @@
 
 #gridContainer tr.notes-row td {
   height: 70px;
-  color: #999;
-}
-
-.dark #gridContainer tr.notes-row td {
-  color: #777;
+  color: var(--dxds-color-content-subtler, #999);
 }
 
 #gridContainer tbody.dx-state-hover {
-  background-color: #ebebeb;
-}
-
-.dark #gridContainer tbody.dx-state-hover {
-  background-color: #484848;
+  background-color: var(--dxds-color-bg-hovered, #ebebeb);
 }
 
 #gridContainer tbody.dx-state-hover tr.main-row td {
-  color: #000;
-}
-
-.dark #gridContainer tbody.dx-state-hover tr.main-row td {
-  color: #ccc;
+  color: var(--dxds-color-content, #000);
 }
 
 #gridContainer tbody.dx-state-hover tr.notes-row td {
-  color: #888;
+  color: var(--dxds-color-content-subtler, #888);
 }
diff --git a/apps/demos/Demos/DataGrid/Row3RdPartyEngineTemplate/jQuery/styles.css b/apps/demos/Demos/DataGrid/Row3RdPartyEngineTemplate/jQuery/styles.css
index c6ffdc033671..fec2d9e31dfc 100644
--- a/apps/demos/Demos/DataGrid/Row3RdPartyEngineTemplate/jQuery/styles.css
+++ b/apps/demos/Demos/DataGrid/Row3RdPartyEngineTemplate/jQuery/styles.css
@@ -17,29 +17,17 @@
 
 #gridContainer tr.notes-row td {
   height: 70px;
-  color: #999;
-}
-
-.dark #gridContainer tr.notes-row td {
-  color: #777;
+  color: var(--dxds-color-content-subtler, #999);
 }
 
 #gridContainer tbody.dx-state-hover {
-  background-color: #ebebeb;
-}
-
-.dark #gridContainer tbody.dx-state-hover {
-  background-color: #484848;
+  background-color: var(--dxds-color-bg-hovered, #ebebeb);
 }
 
 #gridContainer tbody.dx-state-hover tr.main-row td {
-  color: #000;
-}
-
-.dark #gridContainer tbody.dx-state-hover tr.main-row td {
-  color: #ccc;
+  color: var(--dxds-color-content, #000);
 }
 
 #gridContainer tbody.dx-state-hover tr.notes-row td {
-  color: #888;
+  color: var(--dxds-color-content-subtler, #888);
 }
diff --git a/apps/demos/Demos/DataGrid/RowEditing/Angular/app/app.component.css b/apps/demos/Demos/DataGrid/RowEditing/Angular/app/app.component.css
index b0c2b21cb216..a99a69420089 100644
--- a/apps/demos/Demos/DataGrid/RowEditing/Angular/app/app.component.css
+++ b/apps/demos/Demos/DataGrid/RowEditing/Angular/app/app.component.css
@@ -1,5 +1,5 @@
 ::ng-deep #events {
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   padding: 20px;
   margin-top: 20px;
 }
@@ -35,7 +35,7 @@
 
 ::ng-deep #events ul li {
   padding: 7px 0;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--dxds-color-border, #ddd);
 }
 
 ::ng-deep #events ul li:last-child {
diff --git a/apps/demos/Demos/DataGrid/RowEditing/React/styles.css b/apps/demos/Demos/DataGrid/RowEditing/React/styles.css
index 3f72ac631657..499569efcbcb 100644
--- a/apps/demos/Demos/DataGrid/RowEditing/React/styles.css
+++ b/apps/demos/Demos/DataGrid/RowEditing/React/styles.css
@@ -1,5 +1,5 @@
 #events {
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   padding: 20px;
   margin-top: 20px;
 }
@@ -35,7 +35,7 @@
 
 #events ul li {
   padding: 7px 0;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--dxds-color-border, #ddd);
 }
 
 #events ul li:last-child {
diff --git a/apps/demos/Demos/DataGrid/RowEditing/ReactJs/styles.css b/apps/demos/Demos/DataGrid/RowEditing/ReactJs/styles.css
index 3f72ac631657..499569efcbcb 100644
--- a/apps/demos/Demos/DataGrid/RowEditing/ReactJs/styles.css
+++ b/apps/demos/Demos/DataGrid/RowEditing/ReactJs/styles.css
@@ -1,5 +1,5 @@
 #events {
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   padding: 20px;
   margin-top: 20px;
 }
@@ -35,7 +35,7 @@
 
 #events ul li {
   padding: 7px 0;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--dxds-color-border, #ddd);
 }
 
 #events ul li:last-child {
diff --git a/apps/demos/Demos/DataGrid/RowEditing/Vue/App.vue b/apps/demos/Demos/DataGrid/RowEditing/Vue/App.vue
index 8ca02fd24e45..a5d4c7ed12bc 100644
--- a/apps/demos/Demos/DataGrid/RowEditing/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/RowEditing/Vue/App.vue
@@ -96,7 +96,7 @@ const clearEvents = () => {
 </script>
 <style>
 #events {
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   padding: 20px;
   margin-top: 20px;
 }
@@ -132,7 +132,7 @@ const clearEvents = () => {
 
 #events ul li {
   padding: 7px 0;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--dxds-color-border, #ddd);
 }
 
 #events ul li:last-child {
diff --git a/apps/demos/Demos/DataGrid/RowEditing/jQuery/styles.css b/apps/demos/Demos/DataGrid/RowEditing/jQuery/styles.css
index 3f72ac631657..499569efcbcb 100644
--- a/apps/demos/Demos/DataGrid/RowEditing/jQuery/styles.css
+++ b/apps/demos/Demos/DataGrid/RowEditing/jQuery/styles.css
@@ -1,5 +1,5 @@
 #events {
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   padding: 20px;
   margin-top: 20px;
 }
@@ -35,7 +35,7 @@
 
 #events ul li {
   padding: 7px 0;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--dxds-color-border, #ddd);
 }
 
 #events ul li:last-child {
diff --git a/apps/demos/Demos/DataGrid/RowSelection/Angular/app/app.component.css b/apps/demos/Demos/DataGrid/RowSelection/Angular/app/app.component.css
index d3882b0e2e81..5094f6dda170 100644
--- a/apps/demos/Demos/DataGrid/RowSelection/Angular/app/app.component.css
+++ b/apps/demos/Demos/DataGrid/RowSelection/Angular/app/app.component.css
@@ -8,7 +8,3 @@
   padding-top: 20px;
   text-align: justify;
 }
-
-::ng-deep .dark #employeeInfo .employeeNotes {
-  color: rgb(181, 181, 181);
-}
diff --git a/apps/demos/Demos/DataGrid/RowSelection/React/styles.css b/apps/demos/Demos/DataGrid/RowSelection/React/styles.css
index 2f8f798f472c..670583ea8fcd 100644
--- a/apps/demos/Demos/DataGrid/RowSelection/React/styles.css
+++ b/apps/demos/Demos/DataGrid/RowSelection/React/styles.css
@@ -8,7 +8,3 @@
   padding-top: 20px;
   text-align: justify;
 }
-
-.dark #employee-info .employee-notes {
-  color: rgb(181, 181, 181);
-}
diff --git a/apps/demos/Demos/DataGrid/RowSelection/ReactJs/styles.css b/apps/demos/Demos/DataGrid/RowSelection/ReactJs/styles.css
index 2f8f798f472c..670583ea8fcd 100644
--- a/apps/demos/Demos/DataGrid/RowSelection/ReactJs/styles.css
+++ b/apps/demos/Demos/DataGrid/RowSelection/ReactJs/styles.css
@@ -8,7 +8,3 @@
   padding-top: 20px;
   text-align: justify;
 }
-
-.dark #employee-info .employee-notes {
-  color: rgb(181, 181, 181);
-}
diff --git a/apps/demos/Demos/DataGrid/RowSelection/Vue/App.vue b/apps/demos/Demos/DataGrid/RowSelection/Vue/App.vue
index 428f8fb57920..c7e2a3bdd2fc 100644
--- a/apps/demos/Demos/DataGrid/RowSelection/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/RowSelection/Vue/App.vue
@@ -75,8 +75,4 @@ const onSelectionChanged = (
   padding-top: 20px;
   text-align: justify;
 }
-
-.dark #employee-info .employee-notes {
-  color: rgb(181, 181, 181);
-}
 </style>
diff --git a/apps/demos/Demos/DataGrid/RowSelection/jQuery/styles.css b/apps/demos/Demos/DataGrid/RowSelection/jQuery/styles.css
index 88181fa44e06..13a0761c4b69 100644
--- a/apps/demos/Demos/DataGrid/RowSelection/jQuery/styles.css
+++ b/apps/demos/Demos/DataGrid/RowSelection/jQuery/styles.css
@@ -12,7 +12,3 @@
   padding-top: 20px;
   text-align: justify;
 }
-
-.dark #employeeInfo .employeeNotes {
-  color: rgb(181, 181, 181);
-}
diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Angular/app/app.component.css b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Angular/app/app.component.css
index a63da81e6b33..c80dc1c6901c 100644
--- a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Angular/app/app.component.css
+++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Angular/app/app.component.css
@@ -14,7 +14,7 @@
 ::ng-deep #diagram .template .template-button {
   cursor: pointer;
   font-size: 8pt;
-  fill: navy;
+  fill: var(--dxds-color-content-blue, navy);
 }
 
 ::ng-deep #diagram .template .template-button:hover {
diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/React/styles.css b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/React/styles.css
index 19c663799ca1..1a494b695282 100644
--- a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/React/styles.css
+++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/React/styles.css
@@ -14,7 +14,7 @@
 #diagram .template .template-button {
   cursor: pointer;
   font-size: 8pt;
-  fill: navy;
+  fill: var(--dxds-color-content-blue, navy);
 }
 
 #diagram .template .template-button:hover {
diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/ReactJs/styles.css b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/ReactJs/styles.css
index 19c663799ca1..1a494b695282 100644
--- a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/ReactJs/styles.css
+++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/ReactJs/styles.css
@@ -14,7 +14,7 @@
 #diagram .template .template-button {
   cursor: pointer;
   font-size: 8pt;
-  fill: navy;
+  fill: var(--dxds-color-content-blue, navy);
 }
 
 #diagram .template .template-button:hover {
diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Vue/CustomShapeTemplate.vue b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Vue/CustomShapeTemplate.vue
index 6811e94a8dd7..246192bff848 100644
--- a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Vue/CustomShapeTemplate.vue
+++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Vue/CustomShapeTemplate.vue
@@ -50,7 +50,7 @@ function showEmployeeInfo() {
     #diagram .template .template-button {
       cursor: pointer;
       font-size: 8pt;
-      fill: navy;
+      fill: var(--dxds-color-content-blue, navy);
     }
 
     #diagram .template .template-button:hover {
diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/jQuery/styles.css b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/jQuery/styles.css
index 19c663799ca1..1a494b695282 100644
--- a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/jQuery/styles.css
+++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/jQuery/styles.css
@@ -14,7 +14,7 @@
 #diagram .template .template-button {
   cursor: pointer;
   font-size: 8pt;
-  fill: navy;
+  fill: var(--dxds-color-content-blue, navy);
 }
 
 #diagram .template .template-button:hover {
diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Angular/app/app.component.css b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Angular/app/app.component.css
index 142d4c910973..2915c14d9f98 100644
--- a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Angular/app/app.component.css
+++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Angular/app/app.component.css
@@ -14,7 +14,7 @@
 ::ng-deep #diagram .template .template-button {
   cursor: pointer;
   font-size: 8pt;
-  fill: navy;
+  fill: var(--dxds-color-content-blue, navy);
 }
 
 ::ng-deep #diagram .template .template-button:hover {
diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/styles.css b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/styles.css
index 9f3bca9114d4..261abae8794d 100644
--- a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/styles.css
+++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/styles.css
@@ -14,7 +14,7 @@
 #diagram .template .template-button {
   cursor: pointer;
   font-size: 8pt;
-  fill: navy;
+  fill: var(--dxds-color-content-blue, navy);
 }
 
 #diagram .template .template-button:hover {
diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/styles.css b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/styles.css
index 9f3bca9114d4..261abae8794d 100644
--- a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/styles.css
+++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/styles.css
@@ -14,7 +14,7 @@
 #diagram .template .template-button {
   cursor: pointer;
   font-size: 8pt;
-  fill: navy;
+  fill: var(--dxds-color-content-blue, navy);
 }
 
 #diagram .template .template-button:hover {
diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Vue/CustomShapeTemplate.vue b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Vue/CustomShapeTemplate.vue
index 556e8d670df0..e1d94c87422f 100644
--- a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Vue/CustomShapeTemplate.vue
+++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Vue/CustomShapeTemplate.vue
@@ -63,7 +63,7 @@ const deleteEmployeeFunc = () => props.deleteEmployee(props.employee);
     #diagram .template .template-button {
       cursor: pointer;
       font-size: 8pt;
-      fill: navy;
+      fill: var(--dxds-color-content-blue, navy);
     }
 
     #diagram .template .template-button:hover {
diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/jQuery/styles.css b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/jQuery/styles.css
index 9f3bca9114d4..261abae8794d 100644
--- a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/jQuery/styles.css
+++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/jQuery/styles.css
@@ -14,7 +14,7 @@
 #diagram .template .template-button {
   cursor: pointer;
   font-size: 8pt;
-  fill: navy;
+  fill: var(--dxds-color-content-blue, navy);
 }
 
 #diagram .template .template-button:hover {
diff --git a/apps/demos/Demos/Diagram/ItemSelection/Angular/app/app.component.css b/apps/demos/Demos/Diagram/ItemSelection/Angular/app/app.component.css
index 198e059e1729..58ce687bd94d 100644
--- a/apps/demos/Demos/Diagram/ItemSelection/Angular/app/app.component.css
+++ b/apps/demos/Demos/Diagram/ItemSelection/Angular/app/app.component.css
@@ -5,7 +5,7 @@
 ::ng-deep .selected-data {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 ::ng-deep .selected-data .caption {
diff --git a/apps/demos/Demos/Diagram/ItemSelection/React/styles.css b/apps/demos/Demos/Diagram/ItemSelection/React/styles.css
index a45420e21bc9..9482e86fd356 100644
--- a/apps/demos/Demos/Diagram/ItemSelection/React/styles.css
+++ b/apps/demos/Demos/Diagram/ItemSelection/React/styles.css
@@ -5,7 +5,7 @@
 .selected-data {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .selected-data .caption {
diff --git a/apps/demos/Demos/Diagram/ItemSelection/ReactJs/styles.css b/apps/demos/Demos/Diagram/ItemSelection/ReactJs/styles.css
index a45420e21bc9..9482e86fd356 100644
--- a/apps/demos/Demos/Diagram/ItemSelection/ReactJs/styles.css
+++ b/apps/demos/Demos/Diagram/ItemSelection/ReactJs/styles.css
@@ -5,7 +5,7 @@
 .selected-data {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .selected-data .caption {
diff --git a/apps/demos/Demos/Diagram/ItemSelection/Vue/App.vue b/apps/demos/Demos/Diagram/ItemSelection/Vue/App.vue
index 35d5b3f99a08..c623a60ed62c 100644
--- a/apps/demos/Demos/Diagram/ItemSelection/Vue/App.vue
+++ b/apps/demos/Demos/Diagram/ItemSelection/Vue/App.vue
@@ -71,7 +71,7 @@ function onSelectionChanged({ items }: DxDiagramTypes.SelectionChangedEvent) {
     .selected-data {
       margin-top: 20px;
       padding: 20px;
-      background-color: rgba(191, 191, 191, 0.15);
+      background-color: var(--dx-color-options-panel-bg);
     }
 
     .selected-data .caption {
diff --git a/apps/demos/Demos/Diagram/ItemSelection/jQuery/styles.css b/apps/demos/Demos/Diagram/ItemSelection/jQuery/styles.css
index a45420e21bc9..9482e86fd356 100644
--- a/apps/demos/Demos/Diagram/ItemSelection/jQuery/styles.css
+++ b/apps/demos/Demos/Diagram/ItemSelection/jQuery/styles.css
@@ -5,7 +5,7 @@
 .selected-data {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .selected-data .caption {
diff --git a/apps/demos/Demos/Drawer/LeftOrRightPosition/Angular/app/app.component.css b/apps/demos/Demos/Drawer/LeftOrRightPosition/Angular/app/app.component.css
index bb465cfc1896..3397ea3d2a30 100644
--- a/apps/demos/Demos/Drawer/LeftOrRightPosition/Angular/app/app.component.css
+++ b/apps/demos/Demos/Drawer/LeftOrRightPosition/Angular/app/app.component.css
@@ -17,7 +17,7 @@
 
 ::ng-deep #toolbar {
   background-color: var(--dx-component-color-bg);
-  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08);
+  box-shadow: var(--dxds-box-shadow-md, 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08));
   padding: 5px 10px;
   z-index: 10000;
 }
@@ -30,7 +30,7 @@
 
 ::ng-deep .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 ::ng-deep .options-container {
diff --git a/apps/demos/Demos/Drawer/LeftOrRightPosition/React/styles.css b/apps/demos/Demos/Drawer/LeftOrRightPosition/React/styles.css
index a4495a5e6e25..33e9a8e9f58c 100644
--- a/apps/demos/Demos/Drawer/LeftOrRightPosition/React/styles.css
+++ b/apps/demos/Demos/Drawer/LeftOrRightPosition/React/styles.css
@@ -13,7 +13,7 @@
 
 #toolbar {
   background-color: var(--dx-component-color-bg);
-  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08);
+  box-shadow: var(--dxds-box-shadow-md, 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08));
   padding: 5px 10px;
   z-index: 10000;
 }
@@ -26,7 +26,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .options-container {
diff --git a/apps/demos/Demos/Drawer/LeftOrRightPosition/ReactJs/styles.css b/apps/demos/Demos/Drawer/LeftOrRightPosition/ReactJs/styles.css
index a4495a5e6e25..33e9a8e9f58c 100644
--- a/apps/demos/Demos/Drawer/LeftOrRightPosition/ReactJs/styles.css
+++ b/apps/demos/Demos/Drawer/LeftOrRightPosition/ReactJs/styles.css
@@ -13,7 +13,7 @@
 
 #toolbar {
   background-color: var(--dx-component-color-bg);
-  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08);
+  box-shadow: var(--dxds-box-shadow-md, 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08));
   padding: 5px 10px;
   z-index: 10000;
 }
@@ -26,7 +26,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .options-container {
diff --git a/apps/demos/Demos/Drawer/LeftOrRightPosition/Vue/App.vue b/apps/demos/Demos/Drawer/LeftOrRightPosition/Vue/App.vue
index 8d77b96968e3..4ca508263ffd 100644
--- a/apps/demos/Demos/Drawer/LeftOrRightPosition/Vue/App.vue
+++ b/apps/demos/Demos/Drawer/LeftOrRightPosition/Vue/App.vue
@@ -96,7 +96,7 @@ const toolbarContent = [{
 
     #toolbar {
       background-color: var(--dx-component-color-bg);
-      box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08);
+      box-shadow: var(--dxds-box-shadow-md, 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08));
       padding: 5px 10px;
       z-index: 10000;
     }
@@ -109,7 +109,7 @@ const toolbarContent = [{
 
     .options {
       padding: 20px;
-      background-color: rgba(191, 191, 191, 0.15);
+      background-color: var(--dx-color-options-panel-bg);
     }
 
     .options-container {
diff --git a/apps/demos/Demos/Drawer/LeftOrRightPosition/jQuery/styles.css b/apps/demos/Demos/Drawer/LeftOrRightPosition/jQuery/styles.css
index a4495a5e6e25..33e9a8e9f58c 100644
--- a/apps/demos/Demos/Drawer/LeftOrRightPosition/jQuery/styles.css
+++ b/apps/demos/Demos/Drawer/LeftOrRightPosition/jQuery/styles.css
@@ -13,7 +13,7 @@
 
 #toolbar {
   background-color: var(--dx-component-color-bg);
-  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08);
+  box-shadow: var(--dxds-box-shadow-md, 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08));
   padding: 5px 10px;
   z-index: 10000;
 }
@@ -26,7 +26,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .options-container {
diff --git a/apps/demos/Demos/Drawer/TopOrBottomPosition/Angular/app/app.component.css b/apps/demos/Demos/Drawer/TopOrBottomPosition/Angular/app/app.component.css
index f993cf9ad852..06bb0acae2cc 100644
--- a/apps/demos/Demos/Drawer/TopOrBottomPosition/Angular/app/app.component.css
+++ b/apps/demos/Demos/Drawer/TopOrBottomPosition/Angular/app/app.component.css
@@ -13,7 +13,7 @@
 
 ::ng-deep #toolbar {
   background-color: var(--dx-component-color-bg);
-  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08);
+  box-shadow: var(--dxds-box-shadow-md, 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08));
   padding: 5px 10px;
   z-index: 10000;
 }
@@ -40,7 +40,7 @@
 
 ::ng-deep .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 ::ng-deep .options-container {
diff --git a/apps/demos/Demos/Drawer/TopOrBottomPosition/React/styles.css b/apps/demos/Demos/Drawer/TopOrBottomPosition/React/styles.css
index 521c66dfcd01..3bfc5cd583fd 100644
--- a/apps/demos/Demos/Drawer/TopOrBottomPosition/React/styles.css
+++ b/apps/demos/Demos/Drawer/TopOrBottomPosition/React/styles.css
@@ -13,7 +13,7 @@
 
 #toolbar {
   background-color: var(--dx-component-color-bg);
-  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08);
+  box-shadow: var(--dxds-box-shadow-md, 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08));
   padding: 5px 10px;
   z-index: 10000;
 }
@@ -40,7 +40,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .options-container {
diff --git a/apps/demos/Demos/Drawer/TopOrBottomPosition/ReactJs/styles.css b/apps/demos/Demos/Drawer/TopOrBottomPosition/ReactJs/styles.css
index 521c66dfcd01..3bfc5cd583fd 100644
--- a/apps/demos/Demos/Drawer/TopOrBottomPosition/ReactJs/styles.css
+++ b/apps/demos/Demos/Drawer/TopOrBottomPosition/ReactJs/styles.css
@@ -13,7 +13,7 @@
 
 #toolbar {
   background-color: var(--dx-component-color-bg);
-  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08);
+  box-shadow: var(--dxds-box-shadow-md, 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08));
   padding: 5px 10px;
   z-index: 10000;
 }
@@ -40,7 +40,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .options-container {
diff --git a/apps/demos/Demos/Drawer/TopOrBottomPosition/Vue/App.vue b/apps/demos/Demos/Drawer/TopOrBottomPosition/Vue/App.vue
index 42b475669cc0..e97e990a105d 100644
--- a/apps/demos/Demos/Drawer/TopOrBottomPosition/Vue/App.vue
+++ b/apps/demos/Demos/Drawer/TopOrBottomPosition/Vue/App.vue
@@ -96,7 +96,7 @@ const toolbarContent = [{
 
     #toolbar {
       background-color: var(--dx-component-color-bg);
-      box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08);
+      box-shadow: var(--dxds-box-shadow-md, 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08));
       padding: 5px 10px;
       z-index: 10000;
     }
@@ -123,7 +123,7 @@ const toolbarContent = [{
 
     .options {
       padding: 20px;
-      background-color: rgba(191, 191, 191, 0.15);
+      background-color: var(--dx-color-options-panel-bg);
     }
 
     .options-container {
diff --git a/apps/demos/Demos/Drawer/TopOrBottomPosition/jQuery/styles.css b/apps/demos/Demos/Drawer/TopOrBottomPosition/jQuery/styles.css
index 521c66dfcd01..3bfc5cd583fd 100644
--- a/apps/demos/Demos/Drawer/TopOrBottomPosition/jQuery/styles.css
+++ b/apps/demos/Demos/Drawer/TopOrBottomPosition/jQuery/styles.css
@@ -13,7 +13,7 @@
 
 #toolbar {
   background-color: var(--dx-component-color-bg);
-  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08);
+  box-shadow: var(--dxds-box-shadow-md, 0 2px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.08));
   padding: 5px 10px;
   z-index: 10000;
 }
@@ -40,7 +40,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .options-container {
diff --git a/apps/demos/Demos/FileUploader/ChunkUpload/Angular/app/app.component.css b/apps/demos/Demos/FileUploader/ChunkUpload/Angular/app/app.component.css
index 5d6b101f78e1..5918e2dfad00 100644
--- a/apps/demos/Demos/FileUploader/ChunkUpload/Angular/app/app.component.css
+++ b/apps/demos/Demos/FileUploader/ChunkUpload/Angular/app/app.component.css
@@ -4,7 +4,7 @@
   overflow-y: auto;
   padding: 18px;
   margin-top: 40px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 ::ng-deep .segment-size,
diff --git a/apps/demos/Demos/FileUploader/ChunkUpload/React/styles.css b/apps/demos/Demos/FileUploader/ChunkUpload/React/styles.css
index 79fa64b7ef1f..094ca36c1b7e 100644
--- a/apps/demos/Demos/FileUploader/ChunkUpload/React/styles.css
+++ b/apps/demos/Demos/FileUploader/ChunkUpload/React/styles.css
@@ -4,7 +4,7 @@
   overflow-y: auto;
   padding: 18px;
   margin-top: 40px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .segment-size,
diff --git a/apps/demos/Demos/FileUploader/ChunkUpload/ReactJs/styles.css b/apps/demos/Demos/FileUploader/ChunkUpload/ReactJs/styles.css
index 79fa64b7ef1f..094ca36c1b7e 100644
--- a/apps/demos/Demos/FileUploader/ChunkUpload/ReactJs/styles.css
+++ b/apps/demos/Demos/FileUploader/ChunkUpload/ReactJs/styles.css
@@ -4,7 +4,7 @@
   overflow-y: auto;
   padding: 18px;
   margin-top: 40px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .segment-size,
diff --git a/apps/demos/Demos/FileUploader/ChunkUpload/Vue/App.vue b/apps/demos/Demos/FileUploader/ChunkUpload/Vue/App.vue
index ebdfe39d1e46..27143598e143 100644
--- a/apps/demos/Demos/FileUploader/ChunkUpload/Vue/App.vue
+++ b/apps/demos/Demos/FileUploader/ChunkUpload/Vue/App.vue
@@ -60,7 +60,7 @@ function onUploadProgress(e: DxFileUploaderTypes.ProgressEvent) {
   overflow-y: auto;
   padding: 18px;
   margin-top: 40px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .segment-size,
diff --git a/apps/demos/Demos/FileUploader/ChunkUpload/jQuery/styles.css b/apps/demos/Demos/FileUploader/ChunkUpload/jQuery/styles.css
index 79fa64b7ef1f..094ca36c1b7e 100644
--- a/apps/demos/Demos/FileUploader/ChunkUpload/jQuery/styles.css
+++ b/apps/demos/Demos/FileUploader/ChunkUpload/jQuery/styles.css
@@ -4,7 +4,7 @@
   overflow-y: auto;
   padding: 18px;
   margin-top: 40px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .segment-size,
diff --git a/apps/demos/Demos/FileUploader/CustomDropzone/Angular/app/app.component.css b/apps/demos/Demos/FileUploader/CustomDropzone/Angular/app/app.component.css
index b7d1cee4d5b3..d169f1654485 100644
--- a/apps/demos/Demos/FileUploader/CustomDropzone/Angular/app/app.component.css
+++ b/apps/demos/Demos/FileUploader/CustomDropzone/Angular/app/app.component.css
@@ -1,7 +1,7 @@
 ::ng-deep #dropzone-external {
   width: 350px;
   height: 350px;
-  background-color: rgba(0,0,0,0.08);
+  background-color: var(--dxds-color-bg-low, rgba(0,0,0,0.08));
   border-width: 2px;
   border-style: dashed;
   padding: 10px;
diff --git a/apps/demos/Demos/FileUploader/CustomDropzone/React/styles.css b/apps/demos/Demos/FileUploader/CustomDropzone/React/styles.css
index 122de3b12f6c..b05633858a34 100644
--- a/apps/demos/Demos/FileUploader/CustomDropzone/React/styles.css
+++ b/apps/demos/Demos/FileUploader/CustomDropzone/React/styles.css
@@ -1,7 +1,7 @@
 #dropzone-external {
   width: 350px;
   height: 350px;
-  background-color: rgba(0,0,0,0.08);
+  background-color: var(--dxds-color-bg-low, rgba(0,0,0,0.08));
   border-width: 2px;
   border-style: dashed;
   padding: 10px;
diff --git a/apps/demos/Demos/FileUploader/CustomDropzone/ReactJs/styles.css b/apps/demos/Demos/FileUploader/CustomDropzone/ReactJs/styles.css
index 122de3b12f6c..b05633858a34 100644
--- a/apps/demos/Demos/FileUploader/CustomDropzone/ReactJs/styles.css
+++ b/apps/demos/Demos/FileUploader/CustomDropzone/ReactJs/styles.css
@@ -1,7 +1,7 @@
 #dropzone-external {
   width: 350px;
   height: 350px;
-  background-color: rgba(0,0,0,0.08);
+  background-color: var(--dxds-color-bg-low, rgba(0,0,0,0.08));
   border-width: 2px;
   border-style: dashed;
   padding: 10px;
diff --git a/apps/demos/Demos/FileUploader/CustomDropzone/Vue/App.vue b/apps/demos/Demos/FileUploader/CustomDropzone/Vue/App.vue
index 5d3af78c07ae..20a293d10f93 100644
--- a/apps/demos/Demos/FileUploader/CustomDropzone/Vue/App.vue
+++ b/apps/demos/Demos/FileUploader/CustomDropzone/Vue/App.vue
@@ -108,7 +108,7 @@ function onUploadStarted() {
 #dropzone-external {
   width: 350px;
   height: 350px;
-  background-color: rgba(0,0,0,0.08);
+  background-color: var(--dxds-color-bg-low, rgba(0,0,0,0.08));
   border-width: 2px;
   border-style: dashed;
   padding: 10px;
diff --git a/apps/demos/Demos/FileUploader/CustomDropzone/jQuery/styles.css b/apps/demos/Demos/FileUploader/CustomDropzone/jQuery/styles.css
index 122de3b12f6c..b05633858a34 100644
--- a/apps/demos/Demos/FileUploader/CustomDropzone/jQuery/styles.css
+++ b/apps/demos/Demos/FileUploader/CustomDropzone/jQuery/styles.css
@@ -1,7 +1,7 @@
 #dropzone-external {
   width: 350px;
   height: 350px;
-  background-color: rgba(0,0,0,0.08);
+  background-color: var(--dxds-color-bg-low, rgba(0,0,0,0.08));
   border-width: 2px;
   border-style: dashed;
   padding: 10px;
diff --git a/apps/demos/Demos/FileUploader/FileSelection/Angular/app/app.component.css b/apps/demos/Demos/FileUploader/FileSelection/Angular/app/app.component.css
index 278ea5a0cd17..bc2d496a80d7 100644
--- a/apps/demos/Demos/FileUploader/FileSelection/Angular/app/app.component.css
+++ b/apps/demos/Demos/FileUploader/FileSelection/Angular/app/app.component.css
@@ -10,7 +10,7 @@
 }
 
 ::ng-deep #fileuploader-container {
-  border: 1px solid #d3d3d3;
+  border: 1px solid var(--dxds-color-border, #d3d3d3);
   margin: 20px 20px 0;
 }
 
diff --git a/apps/demos/Demos/FileUploader/FileSelection/React/styles.css b/apps/demos/Demos/FileUploader/FileSelection/React/styles.css
index 1fcad162704a..9c5c66299b62 100644
--- a/apps/demos/Demos/FileUploader/FileSelection/React/styles.css
+++ b/apps/demos/Demos/FileUploader/FileSelection/React/styles.css
@@ -10,7 +10,7 @@
 }
 
 .fileuploader-container {
-  border: 1px solid #d3d3d3;
+  border: 1px solid var(--dxds-color-border, #d3d3d3);
   margin: 20px 20px 0;
 }
 
diff --git a/apps/demos/Demos/FileUploader/FileSelection/ReactJs/styles.css b/apps/demos/Demos/FileUploader/FileSelection/ReactJs/styles.css
index 1fcad162704a..9c5c66299b62 100644
--- a/apps/demos/Demos/FileUploader/FileSelection/ReactJs/styles.css
+++ b/apps/demos/Demos/FileUploader/FileSelection/ReactJs/styles.css
@@ -10,7 +10,7 @@
 }
 
 .fileuploader-container {
-  border: 1px solid #d3d3d3;
+  border: 1px solid var(--dxds-color-border, #d3d3d3);
   margin: 20px 20px 0;
 }
 
diff --git a/apps/demos/Demos/FileUploader/FileSelection/Vue/App.vue b/apps/demos/Demos/FileUploader/FileSelection/Vue/App.vue
index bda11f5f2ea5..ae752982ada8 100644
--- a/apps/demos/Demos/FileUploader/FileSelection/Vue/App.vue
+++ b/apps/demos/Demos/FileUploader/FileSelection/Vue/App.vue
@@ -72,7 +72,7 @@ function onButtonClick() {
 }
 
 .fileuploader-container {
-  border: 1px solid #d3d3d3;
+  border: 1px solid var(--dxds-color-border, #d3d3d3);
   margin: 20px 20px 0;
 }
 
diff --git a/apps/demos/Demos/FileUploader/FileSelection/jQuery/styles.css b/apps/demos/Demos/FileUploader/FileSelection/jQuery/styles.css
index 671d0d1e2e03..0c10bcd0e413 100644
--- a/apps/demos/Demos/FileUploader/FileSelection/jQuery/styles.css
+++ b/apps/demos/Demos/FileUploader/FileSelection/jQuery/styles.css
@@ -10,7 +10,7 @@
 }
 
 #fileuploader-container {
-  border: 1px solid #d3d3d3;
+  border: 1px solid var(--dxds-color-border, #d3d3d3);
   margin: 20px 20px 0;
 }
 
diff --git a/apps/demos/Demos/FileUploader/FileUploading/Angular/app/app.component.css b/apps/demos/Demos/FileUploader/FileUploading/Angular/app/app.component.css
index 24e6a3c02591..883161904eb5 100644
--- a/apps/demos/Demos/FileUploader/FileUploading/Angular/app/app.component.css
+++ b/apps/demos/Demos/FileUploader/FileUploading/Angular/app/app.component.css
@@ -23,7 +23,7 @@
 
 .options-panel {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   right: 0;
   top: 0;
diff --git a/apps/demos/Demos/FileUploader/FileUploading/React/styles.css b/apps/demos/Demos/FileUploader/FileUploading/React/styles.css
index 6584aaacc9ff..f2c6dae7552b 100644
--- a/apps/demos/Demos/FileUploader/FileUploading/React/styles.css
+++ b/apps/demos/Demos/FileUploader/FileUploading/React/styles.css
@@ -20,7 +20,7 @@
 
 .options-panel {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   right: 0;
   top: 0;
diff --git a/apps/demos/Demos/FileUploader/FileUploading/ReactJs/styles.css b/apps/demos/Demos/FileUploader/FileUploading/ReactJs/styles.css
index 6584aaacc9ff..f2c6dae7552b 100644
--- a/apps/demos/Demos/FileUploader/FileUploading/ReactJs/styles.css
+++ b/apps/demos/Demos/FileUploader/FileUploading/ReactJs/styles.css
@@ -20,7 +20,7 @@
 
 .options-panel {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   right: 0;
   top: 0;
diff --git a/apps/demos/Demos/FileUploader/FileUploading/Vue/App.vue b/apps/demos/Demos/FileUploader/FileUploading/Vue/App.vue
index 2182a6da1791..9f6b5df20c76 100644
--- a/apps/demos/Demos/FileUploader/FileUploading/Vue/App.vue
+++ b/apps/demos/Demos/FileUploader/FileUploading/Vue/App.vue
@@ -113,7 +113,7 @@ function onMultipleChanged(e: DxCheckBoxTypes.ValueChangedEvent) {
 
 .options-panel {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   right: 0;
   top: 0;
diff --git a/apps/demos/Demos/FileUploader/FileUploading/jQuery/styles.css b/apps/demos/Demos/FileUploader/FileUploading/jQuery/styles.css
index c9b5c9827d61..08b259b52b52 100644
--- a/apps/demos/Demos/FileUploader/FileUploading/jQuery/styles.css
+++ b/apps/demos/Demos/FileUploader/FileUploading/jQuery/styles.css
@@ -23,7 +23,7 @@
 
 .options-panel {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   right: 0;
   top: 0;
diff --git a/apps/demos/Demos/FilterBuilder/Customization/Angular/app/app.component.css b/apps/demos/Demos/FilterBuilder/Customization/Angular/app/app.component.css
index 2492378a54d2..4a6f68bc0311 100644
--- a/apps/demos/Demos/FilterBuilder/Customization/Angular/app/app.component.css
+++ b/apps/demos/Demos/FilterBuilder/Customization/Angular/app/app.component.css
@@ -7,7 +7,7 @@
 ::ng-deep .results > div {
   flex-basis: 49%;
   max-width: 50%;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
@@ -30,7 +30,7 @@
 
 ::ng-deep .dx-filterbuilder {
   background-color: transparent;
-  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: var(--dxds-box-shadow-lg, 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12));
   border-radius: 6px;
   padding: 15px;
   margin: 24px;
diff --git a/apps/demos/Demos/FilterBuilder/Customization/React/styles.css b/apps/demos/Demos/FilterBuilder/Customization/React/styles.css
index 6347cb029d7e..2224d6b2f9f0 100644
--- a/apps/demos/Demos/FilterBuilder/Customization/React/styles.css
+++ b/apps/demos/Demos/FilterBuilder/Customization/React/styles.css
@@ -7,7 +7,7 @@
 .results > div {
   flex-basis: 49%;
   max-width: 50%;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
@@ -30,7 +30,7 @@
 
 .dx-filterbuilder {
   background-color: transparent;
-  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: var(--dxds-box-shadow-lg, 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12));
   border-radius: 6px;
   padding: 15px;
   margin: 24px;
diff --git a/apps/demos/Demos/FilterBuilder/Customization/ReactJs/styles.css b/apps/demos/Demos/FilterBuilder/Customization/ReactJs/styles.css
index 6347cb029d7e..2224d6b2f9f0 100644
--- a/apps/demos/Demos/FilterBuilder/Customization/ReactJs/styles.css
+++ b/apps/demos/Demos/FilterBuilder/Customization/ReactJs/styles.css
@@ -7,7 +7,7 @@
 .results > div {
   flex-basis: 49%;
   max-width: 50%;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
@@ -30,7 +30,7 @@
 
 .dx-filterbuilder {
   background-color: transparent;
-  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: var(--dxds-box-shadow-lg, 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12));
   border-radius: 6px;
   padding: 15px;
   margin: 24px;
diff --git a/apps/demos/Demos/FilterBuilder/Customization/Vue/App.vue b/apps/demos/Demos/FilterBuilder/Customization/Vue/App.vue
index 7c64acf6227f..66e82c6dec94 100644
--- a/apps/demos/Demos/FilterBuilder/Customization/Vue/App.vue
+++ b/apps/demos/Demos/FilterBuilder/Customization/Vue/App.vue
@@ -60,7 +60,7 @@ function calculateFilterExpression(filterValue: any, field: DxFilterBuilderTypes
 .results > div {
   flex-basis: 49%;
   max-width: 50%;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
@@ -83,7 +83,7 @@ function calculateFilterExpression(filterValue: any, field: DxFilterBuilderTypes
 
 .dx-filterbuilder {
   background-color: transparent;
-  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: var(--dxds-box-shadow-lg, 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12));
   border-radius: 6px;
   padding: 15px;
   margin: 24px;
diff --git a/apps/demos/Demos/FilterBuilder/Customization/jQuery/styles.css b/apps/demos/Demos/FilterBuilder/Customization/jQuery/styles.css
index 6347cb029d7e..2224d6b2f9f0 100644
--- a/apps/demos/Demos/FilterBuilder/Customization/jQuery/styles.css
+++ b/apps/demos/Demos/FilterBuilder/Customization/jQuery/styles.css
@@ -7,7 +7,7 @@
 .results > div {
   flex-basis: 49%;
   max-width: 50%;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
@@ -30,7 +30,7 @@
 
 .dx-filterbuilder {
   background-color: transparent;
-  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: var(--dxds-box-shadow-lg, 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12));
   border-radius: 6px;
   padding: 15px;
   margin: 24px;
diff --git a/apps/demos/Demos/FilterBuilder/WithDataGrid/Angular/app/app.component.css b/apps/demos/Demos/FilterBuilder/WithDataGrid/Angular/app/app.component.css
index 30f04a1ad4dd..a93651ab3a24 100644
--- a/apps/demos/Demos/FilterBuilder/WithDataGrid/Angular/app/app.component.css
+++ b/apps/demos/Demos/FilterBuilder/WithDataGrid/Angular/app/app.component.css
@@ -1,6 +1,6 @@
 ::ng-deep .filter-container {
   background-color: transparent;
-  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: var(--dxds-box-shadow-lg, 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12));
   border-radius: 6px;
   padding: 5px;
   width: 500px;
diff --git a/apps/demos/Demos/FilterBuilder/WithDataGrid/React/styles.css b/apps/demos/Demos/FilterBuilder/WithDataGrid/React/styles.css
index df0174f4d4a9..97a64b2b1de7 100644
--- a/apps/demos/Demos/FilterBuilder/WithDataGrid/React/styles.css
+++ b/apps/demos/Demos/FilterBuilder/WithDataGrid/React/styles.css
@@ -1,6 +1,6 @@
 .filter-container {
   background-color: transparent;
-  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: var(--dxds-box-shadow-lg, 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12));
   border-radius: 6px;
   padding: 5px;
   width: 500px;
diff --git a/apps/demos/Demos/FilterBuilder/WithDataGrid/ReactJs/styles.css b/apps/demos/Demos/FilterBuilder/WithDataGrid/ReactJs/styles.css
index df0174f4d4a9..97a64b2b1de7 100644
--- a/apps/demos/Demos/FilterBuilder/WithDataGrid/ReactJs/styles.css
+++ b/apps/demos/Demos/FilterBuilder/WithDataGrid/ReactJs/styles.css
@@ -1,6 +1,6 @@
 .filter-container {
   background-color: transparent;
-  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: var(--dxds-box-shadow-lg, 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12));
   border-radius: 6px;
   padding: 5px;
   width: 500px;
diff --git a/apps/demos/Demos/FilterBuilder/WithDataGrid/Vue/App.vue b/apps/demos/Demos/FilterBuilder/WithDataGrid/Vue/App.vue
index 9c2fbcfc9f71..591f4a5884d3 100644
--- a/apps/demos/Demos/FilterBuilder/WithDataGrid/Vue/App.vue
+++ b/apps/demos/Demos/FilterBuilder/WithDataGrid/Vue/App.vue
@@ -38,7 +38,7 @@ function buttonClick() {
 <style>
 .filter-container {
   background-color: transparent;
-  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: var(--dxds-box-shadow-lg, 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12));
   border-radius: 6px;
   padding: 5px;
   width: 500px;
diff --git a/apps/demos/Demos/FilterBuilder/WithDataGrid/jQuery/styles.css b/apps/demos/Demos/FilterBuilder/WithDataGrid/jQuery/styles.css
index df0174f4d4a9..97a64b2b1de7 100644
--- a/apps/demos/Demos/FilterBuilder/WithDataGrid/jQuery/styles.css
+++ b/apps/demos/Demos/FilterBuilder/WithDataGrid/jQuery/styles.css
@@ -1,6 +1,6 @@
 .filter-container {
   background-color: transparent;
-  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: var(--dxds-box-shadow-lg, 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12));
   border-radius: 6px;
   padding: 5px;
   width: 500px;
diff --git a/apps/demos/Demos/FilterBuilder/WithList/Angular/app/app.component.css b/apps/demos/Demos/FilterBuilder/WithList/Angular/app/app.component.css
index ea52710c07fb..109243569947 100644
--- a/apps/demos/Demos/FilterBuilder/WithList/Angular/app/app.component.css
+++ b/apps/demos/Demos/FilterBuilder/WithList/Angular/app/app.component.css
@@ -1,6 +1,6 @@
 ::ng-deep .filter-container {
   background-color: transparent;
-  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: var(--dxds-box-shadow-lg, 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12));
   border-radius: 6px;
   width: 45%;
   float: left;
diff --git a/apps/demos/Demos/FilterBuilder/WithList/React/styles.css b/apps/demos/Demos/FilterBuilder/WithList/React/styles.css
index 1cc6e1058f2c..8e85be54b7a8 100644
--- a/apps/demos/Demos/FilterBuilder/WithList/React/styles.css
+++ b/apps/demos/Demos/FilterBuilder/WithList/React/styles.css
@@ -1,6 +1,6 @@
 .filter-container {
   background-color: transparent;
-  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: var(--dxds-box-shadow-lg, 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12));
   border-radius: 6px;
   width: 45%;
   float: left;
diff --git a/apps/demos/Demos/FilterBuilder/WithList/ReactJs/styles.css b/apps/demos/Demos/FilterBuilder/WithList/ReactJs/styles.css
index 1cc6e1058f2c..8e85be54b7a8 100644
--- a/apps/demos/Demos/FilterBuilder/WithList/ReactJs/styles.css
+++ b/apps/demos/Demos/FilterBuilder/WithList/ReactJs/styles.css
@@ -1,6 +1,6 @@
 .filter-container {
   background-color: transparent;
-  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: var(--dxds-box-shadow-lg, 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12));
   border-radius: 6px;
   width: 45%;
   float: left;
diff --git a/apps/demos/Demos/FilterBuilder/WithList/Vue/App.vue b/apps/demos/Demos/FilterBuilder/WithList/Vue/App.vue
index d4c63f77803a..d043d4dcbdc4 100644
--- a/apps/demos/Demos/FilterBuilder/WithList/Vue/App.vue
+++ b/apps/demos/Demos/FilterBuilder/WithList/Vue/App.vue
@@ -52,7 +52,7 @@ function refreshDataSource() {
 <style>
 .filter-container {
   background-color: transparent;
-  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: var(--dxds-box-shadow-lg, 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12));
   border-radius: 6px;
   width: 45%;
   float: left;
diff --git a/apps/demos/Demos/FilterBuilder/WithList/jQuery/styles.css b/apps/demos/Demos/FilterBuilder/WithList/jQuery/styles.css
index 1cc6e1058f2c..8e85be54b7a8 100644
--- a/apps/demos/Demos/FilterBuilder/WithList/jQuery/styles.css
+++ b/apps/demos/Demos/FilterBuilder/WithList/jQuery/styles.css
@@ -1,6 +1,6 @@
 .filter-container {
   background-color: transparent;
-  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: var(--dxds-box-shadow-lg, 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12));
   border-radius: 6px;
   width: 45%;
   float: left;
diff --git a/apps/demos/Demos/FloatingActionButton/Overview/Angular/app/app.component.css b/apps/demos/Demos/FloatingActionButton/Overview/Angular/app/app.component.css
index c3830146bde3..d56bf1c8e8b9 100644
--- a/apps/demos/Demos/FloatingActionButton/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/FloatingActionButton/Overview/Angular/app/app.component.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/FloatingActionButton/Overview/React/styles.css b/apps/demos/Demos/FloatingActionButton/Overview/React/styles.css
index c3830146bde3..d56bf1c8e8b9 100644
--- a/apps/demos/Demos/FloatingActionButton/Overview/React/styles.css
+++ b/apps/demos/Demos/FloatingActionButton/Overview/React/styles.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/FloatingActionButton/Overview/ReactJs/styles.css b/apps/demos/Demos/FloatingActionButton/Overview/ReactJs/styles.css
index c3830146bde3..d56bf1c8e8b9 100644
--- a/apps/demos/Demos/FloatingActionButton/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/FloatingActionButton/Overview/ReactJs/styles.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/FloatingActionButton/Overview/Vue/App.vue b/apps/demos/Demos/FloatingActionButton/Overview/Vue/App.vue
index 13179aa26f34..b23184b0f5a9 100644
--- a/apps/demos/Demos/FloatingActionButton/Overview/Vue/App.vue
+++ b/apps/demos/Demos/FloatingActionButton/Overview/Vue/App.vue
@@ -127,7 +127,7 @@ function editRow() {
   .options {
     padding: 20px;
     margin-top: 20px;
-    background-color: rgba(191, 191, 191, 0.15);
+    background-color: var(--dx-color-options-panel-bg);
   }
 
   .caption {
diff --git a/apps/demos/Demos/FloatingActionButton/Overview/jQuery/styles.css b/apps/demos/Demos/FloatingActionButton/Overview/jQuery/styles.css
index c3830146bde3..d56bf1c8e8b9 100644
--- a/apps/demos/Demos/FloatingActionButton/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/FloatingActionButton/Overview/jQuery/styles.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/Form/Adaptability/Angular/app/app.component.css b/apps/demos/Demos/Form/Adaptability/Angular/app/app.component.css
index e5cfdc17e248..43e98740b38a 100644
--- a/apps/demos/Demos/Form/Adaptability/Angular/app/app.component.css
+++ b/apps/demos/Demos/Form/Adaptability/Angular/app/app.component.css
@@ -4,7 +4,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   left: 0;
   position: absolute;
   bottom: 0;
diff --git a/apps/demos/Demos/Form/Adaptability/React/styles.css b/apps/demos/Demos/Form/Adaptability/React/styles.css
index 6ec03609335d..6a0930ece57a 100644
--- a/apps/demos/Demos/Form/Adaptability/React/styles.css
+++ b/apps/demos/Demos/Form/Adaptability/React/styles.css
@@ -4,7 +4,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   left: 0;
   position: absolute;
   bottom: 0;
diff --git a/apps/demos/Demos/Form/Adaptability/ReactJs/styles.css b/apps/demos/Demos/Form/Adaptability/ReactJs/styles.css
index 6ec03609335d..6a0930ece57a 100644
--- a/apps/demos/Demos/Form/Adaptability/ReactJs/styles.css
+++ b/apps/demos/Demos/Form/Adaptability/ReactJs/styles.css
@@ -4,7 +4,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   left: 0;
   position: absolute;
   bottom: 0;
diff --git a/apps/demos/Demos/Form/Adaptability/Vue/App.vue b/apps/demos/Demos/Form/Adaptability/Vue/App.vue
index f983b9e42dd2..5b0f6975e857 100644
--- a/apps/demos/Demos/Form/Adaptability/Vue/App.vue
+++ b/apps/demos/Demos/Form/Adaptability/Vue/App.vue
@@ -44,7 +44,7 @@ const screenByWidth = ((width: number) => (width < 720 ? 'sm' : 'md')) as unknow
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   left: 0;
   position: absolute;
   bottom: 0;
diff --git a/apps/demos/Demos/Form/Adaptability/jQuery/styles.css b/apps/demos/Demos/Form/Adaptability/jQuery/styles.css
index 6ec03609335d..6a0930ece57a 100644
--- a/apps/demos/Demos/Form/Adaptability/jQuery/styles.css
+++ b/apps/demos/Demos/Form/Adaptability/jQuery/styles.css
@@ -4,7 +4,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   left: 0;
   position: absolute;
   bottom: 0;
diff --git a/apps/demos/Demos/Form/ItemCustomization/Angular/app/app.component.css b/apps/demos/Demos/Form/ItemCustomization/Angular/app/app.component.css
index 73a56738519f..d1d71efb5b2c 100644
--- a/apps/demos/Demos/Form/ItemCustomization/Angular/app/app.component.css
+++ b/apps/demos/Demos/Form/ItemCustomization/Angular/app/app.component.css
@@ -1,5 +1,5 @@
 ::ng-deep #helpedInfo {
-  color: #42a5f5;
+  color: var(--dxds-color-content-primary, #42a5f5);
 }
 
 ::ng-deep #tooltip-content {
diff --git a/apps/demos/Demos/Form/ItemCustomization/React/styles.css b/apps/demos/Demos/Form/ItemCustomization/React/styles.css
index d77a1059925e..73ddbcaa2a54 100644
--- a/apps/demos/Demos/Form/ItemCustomization/React/styles.css
+++ b/apps/demos/Demos/Form/ItemCustomization/React/styles.css
@@ -1,5 +1,5 @@
 #helpedInfo {
-  color: #42a5f5;
+  color: var(--dxds-color-content-primary, #42a5f5);
 }
 
 #tooltip-content {
diff --git a/apps/demos/Demos/Form/ItemCustomization/ReactJs/styles.css b/apps/demos/Demos/Form/ItemCustomization/ReactJs/styles.css
index d77a1059925e..73ddbcaa2a54 100644
--- a/apps/demos/Demos/Form/ItemCustomization/ReactJs/styles.css
+++ b/apps/demos/Demos/Form/ItemCustomization/ReactJs/styles.css
@@ -1,5 +1,5 @@
 #helpedInfo {
-  color: #42a5f5;
+  color: var(--dxds-color-content-primary, #42a5f5);
 }
 
 #tooltip-content {
diff --git a/apps/demos/Demos/Form/ItemCustomization/Vue/LabelNotesTemplate.vue b/apps/demos/Demos/Form/ItemCustomization/Vue/LabelNotesTemplate.vue
index 4f980c6eaf2a..5f92263b928e 100644
--- a/apps/demos/Demos/Form/ItemCustomization/Vue/LabelNotesTemplate.vue
+++ b/apps/demos/Demos/Form/ItemCustomization/Vue/LabelNotesTemplate.vue
@@ -30,7 +30,7 @@ withDefaults(defineProps<{
 </script>
 <style scoped>
 #helpedInfo {
-  color: #42a5f5;
+  color: var(--dxds-color-content-primary, #42a5f5);
 }
 
 #tooltip-content {
diff --git a/apps/demos/Demos/Form/ItemCustomization/jQuery/styles.css b/apps/demos/Demos/Form/ItemCustomization/jQuery/styles.css
index d77a1059925e..73ddbcaa2a54 100644
--- a/apps/demos/Demos/Form/ItemCustomization/jQuery/styles.css
+++ b/apps/demos/Demos/Form/ItemCustomization/jQuery/styles.css
@@ -1,5 +1,5 @@
 #helpedInfo {
-  color: #42a5f5;
+  color: var(--dxds-color-content-primary, #42a5f5);
 }
 
 #tooltip-content {
diff --git a/apps/demos/Demos/Form/Overview/Angular/app/app.component.css b/apps/demos/Demos/Form/Overview/Angular/app/app.component.css
index bf65916f02c9..a922ba3cd5c1 100644
--- a/apps/demos/Demos/Form/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/Form/Overview/Angular/app/app.component.css
@@ -16,7 +16,7 @@
   right: 0;
   width: 260px;
   top: 0;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/Form/Overview/React/styles.css b/apps/demos/Demos/Form/Overview/React/styles.css
index 95248d70590b..b70404c600e2 100644
--- a/apps/demos/Demos/Form/Overview/React/styles.css
+++ b/apps/demos/Demos/Form/Overview/React/styles.css
@@ -16,7 +16,7 @@
   right: 0;
   width: 260px;
   top: 0;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/Form/Overview/ReactJs/styles.css b/apps/demos/Demos/Form/Overview/ReactJs/styles.css
index 95248d70590b..b70404c600e2 100644
--- a/apps/demos/Demos/Form/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/Form/Overview/ReactJs/styles.css
@@ -16,7 +16,7 @@
   right: 0;
   width: 260px;
   top: 0;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/Form/Overview/Vue/App.vue b/apps/demos/Demos/Form/Overview/Vue/App.vue
index 8ddf8de9eea1..a123d8ff771b 100644
--- a/apps/demos/Demos/Form/Overview/Vue/App.vue
+++ b/apps/demos/Demos/Form/Overview/Vue/App.vue
@@ -130,7 +130,7 @@ const companySelectorLabelMode = computed(() => {
   right: 0;
   width: 260px;
   top: 0;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/Form/Overview/jQuery/styles.css b/apps/demos/Demos/Form/Overview/jQuery/styles.css
index bd5a57345953..a0a7ebaae1d1 100644
--- a/apps/demos/Demos/Form/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/Form/Overview/jQuery/styles.css
@@ -20,7 +20,7 @@
   right: 0;
   width: 260px;
   top: 0;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
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..6096860bb618 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-subtle, 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..d75e3f25a322 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-subtle, 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..d75e3f25a322 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-subtle, 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 6d4e05b91dc1..e98d0875fb0a 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-subtle, var(--dx-texteditor-color-label));
 }
 
 .textarea-container {
diff --git a/apps/demos/Demos/Form/SmartPaste/Vue/LabelNotesTemplate.vue b/apps/demos/Demos/Form/SmartPaste/Vue/LabelNotesTemplate.vue
deleted file mode 100644
index 4f980c6eaf2a..000000000000
--- a/apps/demos/Demos/Form/SmartPaste/Vue/LabelNotesTemplate.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <div id="template-content">
-    <i
-      id="helpedInfo"
-      class="dx-icon dx-icon-info"
-    />
-    Additional
-    <br>
-    {{ data.text }}
-
-    <DxTooltip
-      target="#helpedInfo"
-      show-event="mouseenter"
-      hide-event="mouseleave"
-    >
-      <template #content>
-        <div id="tooltip-content">This field must not exceed 200 characters</div>
-      </template>
-    </DxTooltip>
-  </div>
-</template>
-<script setup lang="ts">
-import { DxTooltip } from 'devextreme-vue/tooltip';
-
-withDefaults(defineProps<{
-  data?: Record<string, any>
-}>(), {
-  data: () => ({} as Record<string, any>),
-});
-</script>
-<style scoped>
-#helpedInfo {
-  color: #42a5f5;
-}
-
-#tooltip-content {
-  font-size: 14px;
-  font-weight: bold;
-}
-
-#template-content {
-  display: inline-flex;
-}
-</style>
diff --git a/apps/demos/Demos/Form/SmartPaste/Vue/LabelTemplate.vue b/apps/demos/Demos/Form/SmartPaste/Vue/LabelTemplate.vue
deleted file mode 100644
index b65e175e7ccf..000000000000
--- a/apps/demos/Demos/Form/SmartPaste/Vue/LabelTemplate.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <div>
-    <i :class="`dx-icon dx-icon-${icon}`"/>{{ data.text }}
-  </div>
-</template>
-<script setup lang="ts">
-
-withDefaults(defineProps<{
-  data?: Record<string, any>
-  icon?: string
-}>(), {
-  data: () => ({} as Record<string, any>),
-  icon: 'info',
-});
-</script>
diff --git a/apps/demos/Demos/Form/SmartPaste/jQuery/styles.css b/apps/demos/Demos/Form/SmartPaste/jQuery/styles.css
index ba505451e09c..bac3a4d3d9f4 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-subtle, var(--dx-texteditor-color-label));
 }
 
 .textarea-container {
diff --git a/apps/demos/Demos/Gallery/Overview/Angular/app/app.component.css b/apps/demos/Demos/Gallery/Overview/Angular/app/app.component.css
index 290eb4614812..6eeabd1e169b 100644
--- a/apps/demos/Demos/Gallery/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/Gallery/Overview/Angular/app/app.component.css
@@ -14,7 +14,7 @@
   right: 0;
   width: 180px;
   top: 0;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/Gallery/Overview/React/styles.css b/apps/demos/Demos/Gallery/Overview/React/styles.css
index b3a7c00110c2..e5cae37b6afc 100644
--- a/apps/demos/Demos/Gallery/Overview/React/styles.css
+++ b/apps/demos/Demos/Gallery/Overview/React/styles.css
@@ -14,7 +14,7 @@
   right: 0;
   width: 180px;
   top: 0;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/Gallery/Overview/ReactJs/styles.css b/apps/demos/Demos/Gallery/Overview/ReactJs/styles.css
index b3a7c00110c2..e5cae37b6afc 100644
--- a/apps/demos/Demos/Gallery/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/Gallery/Overview/ReactJs/styles.css
@@ -14,7 +14,7 @@
   right: 0;
   width: 180px;
   top: 0;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/Gallery/Overview/Vue/styles.css b/apps/demos/Demos/Gallery/Overview/Vue/styles.css
index b3a7c00110c2..e5cae37b6afc 100644
--- a/apps/demos/Demos/Gallery/Overview/Vue/styles.css
+++ b/apps/demos/Demos/Gallery/Overview/Vue/styles.css
@@ -14,7 +14,7 @@
   right: 0;
   width: 180px;
   top: 0;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/Gallery/Overview/jQuery/styles.css b/apps/demos/Demos/Gallery/Overview/jQuery/styles.css
index b3a7c00110c2..e5cae37b6afc 100644
--- a/apps/demos/Demos/Gallery/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/Gallery/Overview/jQuery/styles.css
@@ -14,7 +14,7 @@
   right: 0;
   width: 180px;
   top: 0;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/Gantt/Appearance/Angular/app/app.component.css b/apps/demos/Demos/Gantt/Appearance/Angular/app/app.component.css
index ca581d399c69..26f8a1fecd1b 100644
--- a/apps/demos/Demos/Gantt/Appearance/Angular/app/app.component.css
+++ b/apps/demos/Demos/Gantt/Appearance/Angular/app/app.component.css
@@ -4,7 +4,7 @@
 
 .options {
   margin-bottom: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
@@ -39,22 +39,13 @@
 }
 
 .custom-task-edit-tooltip {
-  background-color: white;
-  color: black;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  background-color: var(--dxds-color-bg, #fff);
+  color: var(--dxds-color-content, #000);
+  box-shadow: var(--dxds-box-shadow-md, 0 4px 8px 0 rgba(0, 0, 0, 0.2));
   padding: 10px 12px 12px;
   border-radius: 3px;
 }
 
-.custom-task-edit-tooltip::before {
-  border-top-color: white;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-}
-
-.custom-task-edit-tooltip::after {
-  border-bottom-color: white;
-}
-
 .custom-tooltip-title {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   font-size: 13px;
diff --git a/apps/demos/Demos/Gantt/Appearance/React/styles.css b/apps/demos/Demos/Gantt/Appearance/React/styles.css
index ca581d399c69..26f8a1fecd1b 100644
--- a/apps/demos/Demos/Gantt/Appearance/React/styles.css
+++ b/apps/demos/Demos/Gantt/Appearance/React/styles.css
@@ -4,7 +4,7 @@
 
 .options {
   margin-bottom: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
@@ -39,22 +39,13 @@
 }
 
 .custom-task-edit-tooltip {
-  background-color: white;
-  color: black;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  background-color: var(--dxds-color-bg, #fff);
+  color: var(--dxds-color-content, #000);
+  box-shadow: var(--dxds-box-shadow-md, 0 4px 8px 0 rgba(0, 0, 0, 0.2));
   padding: 10px 12px 12px;
   border-radius: 3px;
 }
 
-.custom-task-edit-tooltip::before {
-  border-top-color: white;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-}
-
-.custom-task-edit-tooltip::after {
-  border-bottom-color: white;
-}
-
 .custom-tooltip-title {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   font-size: 13px;
diff --git a/apps/demos/Demos/Gantt/Appearance/ReactJs/styles.css b/apps/demos/Demos/Gantt/Appearance/ReactJs/styles.css
index ca581d399c69..26f8a1fecd1b 100644
--- a/apps/demos/Demos/Gantt/Appearance/ReactJs/styles.css
+++ b/apps/demos/Demos/Gantt/Appearance/ReactJs/styles.css
@@ -4,7 +4,7 @@
 
 .options {
   margin-bottom: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
@@ -39,22 +39,13 @@
 }
 
 .custom-task-edit-tooltip {
-  background-color: white;
-  color: black;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  background-color: var(--dxds-color-bg, #fff);
+  color: var(--dxds-color-content, #000);
+  box-shadow: var(--dxds-box-shadow-md, 0 4px 8px 0 rgba(0, 0, 0, 0.2));
   padding: 10px 12px 12px;
   border-radius: 3px;
 }
 
-.custom-task-edit-tooltip::before {
-  border-top-color: white;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-}
-
-.custom-task-edit-tooltip::after {
-  border-bottom-color: white;
-}
-
 .custom-tooltip-title {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   font-size: 13px;
diff --git a/apps/demos/Demos/Gantt/Appearance/Vue/App.vue b/apps/demos/Demos/Gantt/Appearance/Vue/App.vue
index a5c6c3354246..e01815a66b76 100644
--- a/apps/demos/Demos/Gantt/Appearance/Vue/App.vue
+++ b/apps/demos/Demos/Gantt/Appearance/Vue/App.vue
@@ -176,7 +176,7 @@ function getTimeLeft(task: Task) {
 
   .options {
     margin-bottom: 20px;
-    background-color: rgba(191, 191, 191, 0.15);
+    background-color: var(--dx-color-options-panel-bg);
   }
 
   .caption {
@@ -211,22 +211,13 @@ function getTimeLeft(task: Task) {
   }
 
   .custom-task-edit-tooltip {
-    background-color: white;
-    color: black;
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    background-color: var(--dxds-color-bg, #fff);
+    color: var(--dxds-color-content, #000);
+    box-shadow: var(--dxds-box-shadow-md, 0 4px 8px 0 rgba(0, 0, 0, 0.2));
     padding: 10px 12px 12px;
     border-radius: 3px;
   }
 
-  .custom-task-edit-tooltip::before {
-    border-top-color: white;
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-  }
-
-  .custom-task-edit-tooltip::after {
-    border-bottom-color: white;
-  }
-
   .custom-tooltip-title {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     font-size: 13px;
diff --git a/apps/demos/Demos/Gantt/Appearance/jQuery/styles.css b/apps/demos/Demos/Gantt/Appearance/jQuery/styles.css
index ca581d399c69..26f8a1fecd1b 100644
--- a/apps/demos/Demos/Gantt/Appearance/jQuery/styles.css
+++ b/apps/demos/Demos/Gantt/Appearance/jQuery/styles.css
@@ -4,7 +4,7 @@
 
 .options {
   margin-bottom: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
@@ -39,22 +39,13 @@
 }
 
 .custom-task-edit-tooltip {
-  background-color: white;
-  color: black;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  background-color: var(--dxds-color-bg, #fff);
+  color: var(--dxds-color-content, #000);
+  box-shadow: var(--dxds-box-shadow-md, 0 4px 8px 0 rgba(0, 0, 0, 0.2));
   padding: 10px 12px 12px;
   border-radius: 3px;
 }
 
-.custom-task-edit-tooltip::before {
-  border-top-color: white;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-}
-
-.custom-task-edit-tooltip::after {
-  border-bottom-color: white;
-}
-
 .custom-tooltip-title {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   font-size: 13px;
diff --git a/apps/demos/Demos/Gantt/ContextMenu/Angular/app/app.component.css b/apps/demos/Demos/Gantt/ContextMenu/Angular/app/app.component.css
index de68ed02766e..374fb65be0aa 100644
--- a/apps/demos/Demos/Gantt/ContextMenu/Angular/app/app.component.css
+++ b/apps/demos/Demos/Gantt/ContextMenu/Angular/app/app.component.css
@@ -5,7 +5,7 @@
 .options {
   margin-bottom: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/Gantt/ContextMenu/React/styles.css b/apps/demos/Demos/Gantt/ContextMenu/React/styles.css
index de68ed02766e..374fb65be0aa 100644
--- a/apps/demos/Demos/Gantt/ContextMenu/React/styles.css
+++ b/apps/demos/Demos/Gantt/ContextMenu/React/styles.css
@@ -5,7 +5,7 @@
 .options {
   margin-bottom: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/Gantt/ContextMenu/ReactJs/styles.css b/apps/demos/Demos/Gantt/ContextMenu/ReactJs/styles.css
index de68ed02766e..374fb65be0aa 100644
--- a/apps/demos/Demos/Gantt/ContextMenu/ReactJs/styles.css
+++ b/apps/demos/Demos/Gantt/ContextMenu/ReactJs/styles.css
@@ -5,7 +5,7 @@
 .options {
   margin-bottom: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/Gantt/ContextMenu/Vue/App.vue b/apps/demos/Demos/Gantt/ContextMenu/Vue/App.vue
index aa071881b13f..b34ed6482d1c 100644
--- a/apps/demos/Demos/Gantt/ContextMenu/Vue/App.vue
+++ b/apps/demos/Demos/Gantt/ContextMenu/Vue/App.vue
@@ -111,7 +111,7 @@ function onCustomCommandClick(e: DxGanttTypes.CustomCommandEvent) {
   .options {
     margin-bottom: 20px;
     padding: 20px;
-    background-color: rgba(191, 191, 191, 0.15);
+    background-color: var(--dx-color-options-panel-bg);
     position: relative;
   }
 
diff --git a/apps/demos/Demos/Gantt/ContextMenu/jQuery/styles.css b/apps/demos/Demos/Gantt/ContextMenu/jQuery/styles.css
index de68ed02766e..374fb65be0aa 100644
--- a/apps/demos/Demos/Gantt/ContextMenu/jQuery/styles.css
+++ b/apps/demos/Demos/Gantt/ContextMenu/jQuery/styles.css
@@ -5,7 +5,7 @@
 .options {
   margin-bottom: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/Gantt/ExportToPDF/Angular/app/app.component.css b/apps/demos/Demos/Gantt/ExportToPDF/Angular/app/app.component.css
index ecd7d84b207c..3bf95106de72 100644
--- a/apps/demos/Demos/Gantt/ExportToPDF/Angular/app/app.component.css
+++ b/apps/demos/Demos/Gantt/ExportToPDF/Angular/app/app.component.css
@@ -3,7 +3,7 @@
 }
 
 .options {
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
   display: flex;
 }
diff --git a/apps/demos/Demos/Gantt/ExportToPDF/React/styles.css b/apps/demos/Demos/Gantt/ExportToPDF/React/styles.css
index 9f50459d0151..7e528f2a8895 100644
--- a/apps/demos/Demos/Gantt/ExportToPDF/React/styles.css
+++ b/apps/demos/Demos/Gantt/ExportToPDF/React/styles.css
@@ -3,7 +3,7 @@
 }
 
 .options {
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
   display: flex;
 }
diff --git a/apps/demos/Demos/Gantt/ExportToPDF/ReactJs/styles.css b/apps/demos/Demos/Gantt/ExportToPDF/ReactJs/styles.css
index 9f50459d0151..7e528f2a8895 100644
--- a/apps/demos/Demos/Gantt/ExportToPDF/ReactJs/styles.css
+++ b/apps/demos/Demos/Gantt/ExportToPDF/ReactJs/styles.css
@@ -3,7 +3,7 @@
 }
 
 .options {
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
   display: flex;
 }
diff --git a/apps/demos/Demos/Gantt/ExportToPDF/Vue/App.vue b/apps/demos/Demos/Gantt/ExportToPDF/Vue/App.vue
index 08bc2b581d7f..3e601021f231 100644
--- a/apps/demos/Demos/Gantt/ExportToPDF/Vue/App.vue
+++ b/apps/demos/Demos/Gantt/ExportToPDF/Vue/App.vue
@@ -243,7 +243,7 @@ function endTaskIndexChanged(e: DxNumberBoxTypes.ValueChangedEvent) {
   }
 
   .options {
-    background-color: rgba(191, 191, 191, 0.15);
+    background-color: var(--dx-color-options-panel-bg);
     margin-top: 20px;
     display: flex;
   }
diff --git a/apps/demos/Demos/Gantt/ExportToPDF/jQuery/styles.css b/apps/demos/Demos/Gantt/ExportToPDF/jQuery/styles.css
index 9f50459d0151..7e528f2a8895 100644
--- a/apps/demos/Demos/Gantt/ExportToPDF/jQuery/styles.css
+++ b/apps/demos/Demos/Gantt/ExportToPDF/jQuery/styles.css
@@ -3,7 +3,7 @@
 }
 
 .options {
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
   display: flex;
 }
diff --git a/apps/demos/Demos/Gantt/Sorting/Angular/app/app.component.css b/apps/demos/Demos/Gantt/Sorting/Angular/app/app.component.css
index de68ed02766e..374fb65be0aa 100644
--- a/apps/demos/Demos/Gantt/Sorting/Angular/app/app.component.css
+++ b/apps/demos/Demos/Gantt/Sorting/Angular/app/app.component.css
@@ -5,7 +5,7 @@
 .options {
   margin-bottom: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/Gantt/Sorting/React/styles.css b/apps/demos/Demos/Gantt/Sorting/React/styles.css
index de68ed02766e..374fb65be0aa 100644
--- a/apps/demos/Demos/Gantt/Sorting/React/styles.css
+++ b/apps/demos/Demos/Gantt/Sorting/React/styles.css
@@ -5,7 +5,7 @@
 .options {
   margin-bottom: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/Gantt/Sorting/ReactJs/styles.css b/apps/demos/Demos/Gantt/Sorting/ReactJs/styles.css
index de68ed02766e..374fb65be0aa 100644
--- a/apps/demos/Demos/Gantt/Sorting/ReactJs/styles.css
+++ b/apps/demos/Demos/Gantt/Sorting/ReactJs/styles.css
@@ -5,7 +5,7 @@
 .options {
   margin-bottom: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/Gantt/Sorting/Vue/App.vue b/apps/demos/Demos/Gantt/Sorting/Vue/App.vue
index f2e520433c38..9420c92c7c5d 100644
--- a/apps/demos/Demos/Gantt/Sorting/Vue/App.vue
+++ b/apps/demos/Demos/Gantt/Sorting/Vue/App.vue
@@ -91,7 +91,7 @@ function sortingChanged() {
   .options {
     margin-bottom: 20px;
     padding: 20px;
-    background-color: rgba(191, 191, 191, 0.15);
+    background-color: var(--dx-color-options-panel-bg);
     position: relative;
   }
 
diff --git a/apps/demos/Demos/Gantt/Sorting/jQuery/styles.css b/apps/demos/Demos/Gantt/Sorting/jQuery/styles.css
index de68ed02766e..374fb65be0aa 100644
--- a/apps/demos/Demos/Gantt/Sorting/jQuery/styles.css
+++ b/apps/demos/Demos/Gantt/Sorting/jQuery/styles.css
@@ -5,7 +5,7 @@
 .options {
   margin-bottom: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/Gantt/StripLines/Angular/app/app.component.css b/apps/demos/Demos/Gantt/StripLines/Angular/app/app.component.css
index 74cf7ccafe78..10e5ddb34c77 100644
--- a/apps/demos/Demos/Gantt/StripLines/Angular/app/app.component.css
+++ b/apps/demos/Demos/Gantt/StripLines/Angular/app/app.component.css
@@ -1,3 +1,3 @@
 ::ng-deep .dx-gantt .dx-gantt-tm.current-time {
-  border-left: 1px solid red;
+  border-left: 1px solid var(--dxds-color-border-red, red);
 }
diff --git a/apps/demos/Demos/Gantt/StripLines/React/styles.css b/apps/demos/Demos/Gantt/StripLines/React/styles.css
index 4c3c4c1e53ef..7f9775f4e32e 100644
--- a/apps/demos/Demos/Gantt/StripLines/React/styles.css
+++ b/apps/demos/Demos/Gantt/StripLines/React/styles.css
@@ -1,3 +1,3 @@
 .dx-gantt .dx-gantt-tm.current-time {
-  border-left: 1px solid red;
+  border-left: 1px solid var(--dxds-color-border-red, red);
 }
diff --git a/apps/demos/Demos/Gantt/StripLines/ReactJs/styles.css b/apps/demos/Demos/Gantt/StripLines/ReactJs/styles.css
index 4c3c4c1e53ef..7f9775f4e32e 100644
--- a/apps/demos/Demos/Gantt/StripLines/ReactJs/styles.css
+++ b/apps/demos/Demos/Gantt/StripLines/ReactJs/styles.css
@@ -1,3 +1,3 @@
 .dx-gantt .dx-gantt-tm.current-time {
-  border-left: 1px solid red;
+  border-left: 1px solid var(--dxds-color-border-red, red);
 }
diff --git a/apps/demos/Demos/Gantt/StripLines/Vue/App.vue b/apps/demos/Demos/Gantt/StripLines/Vue/App.vue
index 31a74d311d75..7181331596b6 100644
--- a/apps/demos/Demos/Gantt/StripLines/Vue/App.vue
+++ b/apps/demos/Demos/Gantt/StripLines/Vue/App.vue
@@ -47,6 +47,6 @@ const currentTime = new Date();
 </script>
 <style>
   .dx-gantt .dx-gantt-tm.current-time {
-    border-left: 1px solid red;
+    border-left: 1px solid var(--dxds-color-border-red, red);
   }
 </style>
diff --git a/apps/demos/Demos/Gantt/StripLines/jQuery/styles.css b/apps/demos/Demos/Gantt/StripLines/jQuery/styles.css
index bf78a9ceb6a0..9e494ae314b7 100644
--- a/apps/demos/Demos/Gantt/StripLines/jQuery/styles.css
+++ b/apps/demos/Demos/Gantt/StripLines/jQuery/styles.css
@@ -3,5 +3,5 @@
 }
 
 #gantt .current-time {
-  border-left: 1px solid red;
+  border-left: 1px solid var(--dxds-color-border-red, red);
 }
diff --git a/apps/demos/Demos/Gantt/TaskTemplate/Angular/app/app.component.css b/apps/demos/Demos/Gantt/TaskTemplate/Angular/app/app.component.css
index c52e2242d0fd..426a70f52094 100644
--- a/apps/demos/Demos/Gantt/TaskTemplate/Angular/app/app.component.css
+++ b/apps/demos/Demos/Gantt/TaskTemplate/Angular/app/app.component.css
@@ -3,31 +3,31 @@
 }
 
 .custom-task-color-0 {
-  background-color: #512DA8;
+  background-color: var(--dxds-color-content-purple, #512DA8);
 }
 
 .custom-task-color-1 {
-  background-color: #2E7D32;
+  background-color: var(--dxds-color-content-green, #2E7D32);
 }
 
 .custom-task-color-2 {
-  background-color: #1564C0;
+  background-color: var(--dxds-color-content-blue, #1564C0);
 }
 
 .custom-task-color-3 {
-  background-color: #C2185B;
+  background-color: var(--dxds-color-content-pink, #C2185B);
 }
 
 .custom-task-color-4 {
-  background-color: #C62828;
+  background-color: var(--dxds-color-content-red, #C62828);
 }
 
 .custom-task-color-5 {
-  background-color: #DD2C00;
+  background-color: var(--dxds-color-content-orange, #DD2C00);
 }
 
 .custom-task-color-6 {
-  background-color: #7B1FA2;
+  background-color: var(--dxds-color-content-indigo, #7B1FA2);
 }
 
 .custom-task {
@@ -39,7 +39,7 @@
 
 .custom-task-wrapper {
   padding: 8px;
-  color: #fff;
+  color: var(--dxds-color-content-inverted, #fff);
 }
 
 .custom-task-wrapper > * {
@@ -54,7 +54,7 @@
   height: 32px;
   border-radius: 50%;
   margin: 8px;
-  background-color: #fff;
+  background-color: var(--dxds-color-content-on-color, #fff);
   overflow: hidden;
 }
 
@@ -77,7 +77,7 @@
   bottom: 0;
   width: 0%;
   height: 4px;
-  background: rgba(0, 0, 0, 0.3);
+  background: color-mix(in srgb, var(--dxds-color-bg-static-dark, #000) calc(var(--dxds-opacity-30, 0.3) * 100%), transparent);
 }
 
 .dx-gantt .dx-row {
diff --git a/apps/demos/Demos/Gantt/TaskTemplate/React/styles.css b/apps/demos/Demos/Gantt/TaskTemplate/React/styles.css
index c52e2242d0fd..426a70f52094 100644
--- a/apps/demos/Demos/Gantt/TaskTemplate/React/styles.css
+++ b/apps/demos/Demos/Gantt/TaskTemplate/React/styles.css
@@ -3,31 +3,31 @@
 }
 
 .custom-task-color-0 {
-  background-color: #512DA8;
+  background-color: var(--dxds-color-content-purple, #512DA8);
 }
 
 .custom-task-color-1 {
-  background-color: #2E7D32;
+  background-color: var(--dxds-color-content-green, #2E7D32);
 }
 
 .custom-task-color-2 {
-  background-color: #1564C0;
+  background-color: var(--dxds-color-content-blue, #1564C0);
 }
 
 .custom-task-color-3 {
-  background-color: #C2185B;
+  background-color: var(--dxds-color-content-pink, #C2185B);
 }
 
 .custom-task-color-4 {
-  background-color: #C62828;
+  background-color: var(--dxds-color-content-red, #C62828);
 }
 
 .custom-task-color-5 {
-  background-color: #DD2C00;
+  background-color: var(--dxds-color-content-orange, #DD2C00);
 }
 
 .custom-task-color-6 {
-  background-color: #7B1FA2;
+  background-color: var(--dxds-color-content-indigo, #7B1FA2);
 }
 
 .custom-task {
@@ -39,7 +39,7 @@
 
 .custom-task-wrapper {
   padding: 8px;
-  color: #fff;
+  color: var(--dxds-color-content-inverted, #fff);
 }
 
 .custom-task-wrapper > * {
@@ -54,7 +54,7 @@
   height: 32px;
   border-radius: 50%;
   margin: 8px;
-  background-color: #fff;
+  background-color: var(--dxds-color-content-on-color, #fff);
   overflow: hidden;
 }
 
@@ -77,7 +77,7 @@
   bottom: 0;
   width: 0%;
   height: 4px;
-  background: rgba(0, 0, 0, 0.3);
+  background: color-mix(in srgb, var(--dxds-color-bg-static-dark, #000) calc(var(--dxds-opacity-30, 0.3) * 100%), transparent);
 }
 
 .dx-gantt .dx-row {
diff --git a/apps/demos/Demos/Gantt/TaskTemplate/ReactJs/styles.css b/apps/demos/Demos/Gantt/TaskTemplate/ReactJs/styles.css
index c52e2242d0fd..426a70f52094 100644
--- a/apps/demos/Demos/Gantt/TaskTemplate/ReactJs/styles.css
+++ b/apps/demos/Demos/Gantt/TaskTemplate/ReactJs/styles.css
@@ -3,31 +3,31 @@
 }
 
 .custom-task-color-0 {
-  background-color: #512DA8;
+  background-color: var(--dxds-color-content-purple, #512DA8);
 }
 
 .custom-task-color-1 {
-  background-color: #2E7D32;
+  background-color: var(--dxds-color-content-green, #2E7D32);
 }
 
 .custom-task-color-2 {
-  background-color: #1564C0;
+  background-color: var(--dxds-color-content-blue, #1564C0);
 }
 
 .custom-task-color-3 {
-  background-color: #C2185B;
+  background-color: var(--dxds-color-content-pink, #C2185B);
 }
 
 .custom-task-color-4 {
-  background-color: #C62828;
+  background-color: var(--dxds-color-content-red, #C62828);
 }
 
 .custom-task-color-5 {
-  background-color: #DD2C00;
+  background-color: var(--dxds-color-content-orange, #DD2C00);
 }
 
 .custom-task-color-6 {
-  background-color: #7B1FA2;
+  background-color: var(--dxds-color-content-indigo, #7B1FA2);
 }
 
 .custom-task {
@@ -39,7 +39,7 @@
 
 .custom-task-wrapper {
   padding: 8px;
-  color: #fff;
+  color: var(--dxds-color-content-inverted, #fff);
 }
 
 .custom-task-wrapper > * {
@@ -54,7 +54,7 @@
   height: 32px;
   border-radius: 50%;
   margin: 8px;
-  background-color: #fff;
+  background-color: var(--dxds-color-content-on-color, #fff);
   overflow: hidden;
 }
 
@@ -77,7 +77,7 @@
   bottom: 0;
   width: 0%;
   height: 4px;
-  background: rgba(0, 0, 0, 0.3);
+  background: color-mix(in srgb, var(--dxds-color-bg-static-dark, #000) calc(var(--dxds-opacity-30, 0.3) * 100%), transparent);
 }
 
 .dx-gantt .dx-row {
diff --git a/apps/demos/Demos/Gantt/TaskTemplate/Vue/App.vue b/apps/demos/Demos/Gantt/TaskTemplate/Vue/App.vue
index 2644c14235a8..363b77dd45ff 100644
--- a/apps/demos/Demos/Gantt/TaskTemplate/Vue/App.vue
+++ b/apps/demos/Demos/Gantt/TaskTemplate/Vue/App.vue
@@ -83,31 +83,31 @@ function getImagePath(taskId: number) {
 }
 
 .custom-task-color-0 {
-  background-color: #512DA8;
+  background-color: var(--dxds-color-content-purple, #512DA8);
 }
 
 .custom-task-color-1 {
-  background-color: #2E7D32;
+  background-color: var(--dxds-color-content-green, #2E7D32);
 }
 
 .custom-task-color-2 {
-  background-color: #1564C0;
+  background-color: var(--dxds-color-content-blue, #1564C0);
 }
 
 .custom-task-color-3 {
-  background-color: #C2185B;
+  background-color: var(--dxds-color-content-pink, #C2185B);
 }
 
 .custom-task-color-4 {
-  background-color: #C62828;
+  background-color: var(--dxds-color-content-red, #C62828);
 }
 
 .custom-task-color-5 {
-  background-color: #DD2C00;
+  background-color: var(--dxds-color-content-orange, #DD2C00);
 }
 
 .custom-task-color-6 {
-  background-color: #7B1FA2;
+  background-color: var(--dxds-color-content-indigo, #7B1FA2);
 }
 
 .custom-task {
@@ -119,7 +119,7 @@ function getImagePath(taskId: number) {
 
 .custom-task-wrapper {
   padding: 8px;
-  color: #fff;
+  color: var(--dxds-color-content-inverted, #fff);
 }
 
 .custom-task-wrapper > * {
@@ -134,7 +134,7 @@ function getImagePath(taskId: number) {
   height: 32px;
   border-radius: 50%;
   margin: 8px;
-  background-color: #fff;
+  background-color: var(--dxds-color-content-on-color, #fff);
   overflow: hidden;
 }
 
@@ -157,7 +157,7 @@ function getImagePath(taskId: number) {
   bottom: 0;
   width: 0%;
   height: 4px;
-  background: rgba(0, 0, 0, 0.3);
+  background: color-mix(in srgb, var(--dxds-color-bg-static-dark, #000) calc(var(--dxds-opacity-30, 0.3) * 100%), transparent);
 }
 
 .dx-gantt .dx-row {
diff --git a/apps/demos/Demos/Gantt/TaskTemplate/jQuery/styles.css b/apps/demos/Demos/Gantt/TaskTemplate/jQuery/styles.css
index c52e2242d0fd..426a70f52094 100644
--- a/apps/demos/Demos/Gantt/TaskTemplate/jQuery/styles.css
+++ b/apps/demos/Demos/Gantt/TaskTemplate/jQuery/styles.css
@@ -3,31 +3,31 @@
 }
 
 .custom-task-color-0 {
-  background-color: #512DA8;
+  background-color: var(--dxds-color-content-purple, #512DA8);
 }
 
 .custom-task-color-1 {
-  background-color: #2E7D32;
+  background-color: var(--dxds-color-content-green, #2E7D32);
 }
 
 .custom-task-color-2 {
-  background-color: #1564C0;
+  background-color: var(--dxds-color-content-blue, #1564C0);
 }
 
 .custom-task-color-3 {
-  background-color: #C2185B;
+  background-color: var(--dxds-color-content-pink, #C2185B);
 }
 
 .custom-task-color-4 {
-  background-color: #C62828;
+  background-color: var(--dxds-color-content-red, #C62828);
 }
 
 .custom-task-color-5 {
-  background-color: #DD2C00;
+  background-color: var(--dxds-color-content-orange, #DD2C00);
 }
 
 .custom-task-color-6 {
-  background-color: #7B1FA2;
+  background-color: var(--dxds-color-content-indigo, #7B1FA2);
 }
 
 .custom-task {
@@ -39,7 +39,7 @@
 
 .custom-task-wrapper {
   padding: 8px;
-  color: #fff;
+  color: var(--dxds-color-content-inverted, #fff);
 }
 
 .custom-task-wrapper > * {
@@ -54,7 +54,7 @@
   height: 32px;
   border-radius: 50%;
   margin: 8px;
-  background-color: #fff;
+  background-color: var(--dxds-color-content-on-color, #fff);
   overflow: hidden;
 }
 
@@ -77,7 +77,7 @@
   bottom: 0;
   width: 0%;
   height: 4px;
-  background: rgba(0, 0, 0, 0.3);
+  background: color-mix(in srgb, var(--dxds-color-bg-static-dark, #000) calc(var(--dxds-opacity-30, 0.3) * 100%), transparent);
 }
 
 .dx-gantt .dx-row {
diff --git a/apps/demos/Demos/Gantt/Validation/Angular/app/app.component.css b/apps/demos/Demos/Gantt/Validation/Angular/app/app.component.css
index de68ed02766e..374fb65be0aa 100644
--- a/apps/demos/Demos/Gantt/Validation/Angular/app/app.component.css
+++ b/apps/demos/Demos/Gantt/Validation/Angular/app/app.component.css
@@ -5,7 +5,7 @@
 .options {
   margin-bottom: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/Gantt/Validation/React/styles.css b/apps/demos/Demos/Gantt/Validation/React/styles.css
index de68ed02766e..374fb65be0aa 100644
--- a/apps/demos/Demos/Gantt/Validation/React/styles.css
+++ b/apps/demos/Demos/Gantt/Validation/React/styles.css
@@ -5,7 +5,7 @@
 .options {
   margin-bottom: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/Gantt/Validation/ReactJs/styles.css b/apps/demos/Demos/Gantt/Validation/ReactJs/styles.css
index de68ed02766e..374fb65be0aa 100644
--- a/apps/demos/Demos/Gantt/Validation/ReactJs/styles.css
+++ b/apps/demos/Demos/Gantt/Validation/ReactJs/styles.css
@@ -5,7 +5,7 @@
 .options {
   margin-bottom: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/Gantt/Validation/Vue/App.vue b/apps/demos/Demos/Gantt/Validation/Vue/App.vue
index 895fed39f650..d7a04ef67029 100644
--- a/apps/demos/Demos/Gantt/Validation/Vue/App.vue
+++ b/apps/demos/Demos/Gantt/Validation/Vue/App.vue
@@ -80,7 +80,7 @@ const enablePredecessorGap = ref(true);
   .options {
     margin-bottom: 20px;
     padding: 20px;
-    background-color: rgba(191, 191, 191, 0.15);
+    background-color: var(--dx-color-options-panel-bg);
     position: relative;
   }
 
diff --git a/apps/demos/Demos/Gantt/Validation/jQuery/styles.css b/apps/demos/Demos/Gantt/Validation/jQuery/styles.css
index de68ed02766e..374fb65be0aa 100644
--- a/apps/demos/Demos/Gantt/Validation/jQuery/styles.css
+++ b/apps/demos/Demos/Gantt/Validation/jQuery/styles.css
@@ -5,7 +5,7 @@
 .options {
   margin-bottom: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/Gauges/GaugeTitleCustomized/Angular/app/app.component.css b/apps/demos/Demos/Gauges/GaugeTitleCustomized/Angular/app/app.component.css
index bdf942fafa41..968d9c503786 100644
--- a/apps/demos/Demos/Gauges/GaugeTitleCustomized/Angular/app/app.component.css
+++ b/apps/demos/Demos/Gauges/GaugeTitleCustomized/Angular/app/app.component.css
@@ -4,5 +4,5 @@
 }
 
 ::ng-deep .description {
-  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.16));
+  filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--dxds-color-bg-static-dark, #000) calc(var(--dxds-opacity-15, 0.15) * 100%), transparent));
 }
diff --git a/apps/demos/Demos/Gauges/GaugeTitleCustomized/React/styles.css b/apps/demos/Demos/Gauges/GaugeTitleCustomized/React/styles.css
index 19ecaa87e9b4..0f016d7088b3 100644
--- a/apps/demos/Demos/Gauges/GaugeTitleCustomized/React/styles.css
+++ b/apps/demos/Demos/Gauges/GaugeTitleCustomized/React/styles.css
@@ -4,5 +4,5 @@
 }
 
 .description {
-  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.16));
+  filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--dxds-color-bg-static-dark, #000) calc(var(--dxds-opacity-15, 0.15) * 100%), transparent));
 }
diff --git a/apps/demos/Demos/Gauges/GaugeTitleCustomized/ReactJs/styles.css b/apps/demos/Demos/Gauges/GaugeTitleCustomized/ReactJs/styles.css
index 19ecaa87e9b4..0f016d7088b3 100644
--- a/apps/demos/Demos/Gauges/GaugeTitleCustomized/ReactJs/styles.css
+++ b/apps/demos/Demos/Gauges/GaugeTitleCustomized/ReactJs/styles.css
@@ -4,5 +4,5 @@
 }
 
 .description {
-  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.16));
+  filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--dxds-color-bg-static-dark, #000) calc(var(--dxds-opacity-15, 0.15) * 100%), transparent));
 }
diff --git a/apps/demos/Demos/Gauges/GaugeTitleCustomized/Vue/App.vue b/apps/demos/Demos/Gauges/GaugeTitleCustomized/Vue/App.vue
index 3fcaa2dccd07..44276a35343c 100644
--- a/apps/demos/Demos/Gauges/GaugeTitleCustomized/Vue/App.vue
+++ b/apps/demos/Demos/Gauges/GaugeTitleCustomized/Vue/App.vue
@@ -100,6 +100,6 @@ import {
 }
 
 .description {
-  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.16));
+  filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--dxds-color-bg-static-dark, #000) calc(var(--dxds-opacity-15, 0.15) * 100%), transparent));
 }
 </style>
diff --git a/apps/demos/Demos/Gauges/GaugeTitleCustomized/jQuery/styles.css b/apps/demos/Demos/Gauges/GaugeTitleCustomized/jQuery/styles.css
index 19ecaa87e9b4..0f016d7088b3 100644
--- a/apps/demos/Demos/Gauges/GaugeTitleCustomized/jQuery/styles.css
+++ b/apps/demos/Demos/Gauges/GaugeTitleCustomized/jQuery/styles.css
@@ -4,5 +4,5 @@
 }
 
 .description {
-  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.16));
+  filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--dxds-color-bg-static-dark, #000) calc(var(--dxds-opacity-15, 0.15) * 100%), transparent));
 }
diff --git a/apps/demos/Demos/Gauges/Overview/Angular/app/app.component.css b/apps/demos/Demos/Gauges/Overview/Angular/app/app.component.css
index 743a4822825d..b7c46b23c77b 100644
--- a/apps/demos/Demos/Gauges/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/Gauges/Overview/Angular/app/app.component.css
@@ -43,11 +43,11 @@
 }
 
 ::ng-deep #slider .dx-slider-bar {
-  background-color: #fff;
+  background-color: var(--dxds-color-bg, #fff);
 }
 
 ::ng-deep #slider .dx-slider-handle {
-  background-color: #f05b41;
+  background-color: var(--dxds-color-bg-orange, #f05b41);
   width: 16px;
   height: 16px;
   margin-top: -8px;
@@ -61,10 +61,10 @@
 }
 
 ::ng-deep #slider .dx-slider-handle::after {
-  background-color: #f05b41;
+  background-color: var(--dxds-color-bg-orange, #f05b41);
 }
 
 ::ng-deep #slider .dx-slider-range.dx-slider-range-visible {
-  border-color: #f05b41;
-  background-color: #f05b41;
+  border-color: var(--dxds-color-bg-orange, #f05b41);
+  background-color: var(--dxds-color-bg-orange, #f05b41);
 }
diff --git a/apps/demos/Demos/Gauges/Overview/React/styles.css b/apps/demos/Demos/Gauges/Overview/React/styles.css
index fb2bf9e621d5..698ee510dba2 100644
--- a/apps/demos/Demos/Gauges/Overview/React/styles.css
+++ b/apps/demos/Demos/Gauges/Overview/React/styles.css
@@ -43,11 +43,11 @@
 }
 
 #slider .dx-slider-bar {
-  background-color: #fff;
+  background-color: var(--dxds-color-bg, #fff);
 }
 
 #slider .dx-slider-handle {
-  background-color: #f05b41;
+  background-color: var(--dxds-color-bg-orange, #f05b41);
   width: 16px;
   height: 16px;
   margin-top: -8px;
@@ -61,10 +61,10 @@
 }
 
 #slider .dx-slider-handle::after {
-  background-color: #f05b41;
+  background-color: var(--dxds-color-bg-orange, #f05b41);
 }
 
 #slider .dx-slider-range.dx-slider-range-visible {
-  border-color: #f05b41;
-  background-color: #f05b41;
+  border-color: var(--dxds-color-bg-orange, #f05b41);
+  background-color: var(--dxds-color-bg-orange, #f05b41);
 }
diff --git a/apps/demos/Demos/Gauges/Overview/ReactJs/styles.css b/apps/demos/Demos/Gauges/Overview/ReactJs/styles.css
index fb2bf9e621d5..698ee510dba2 100644
--- a/apps/demos/Demos/Gauges/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/Gauges/Overview/ReactJs/styles.css
@@ -43,11 +43,11 @@
 }
 
 #slider .dx-slider-bar {
-  background-color: #fff;
+  background-color: var(--dxds-color-bg, #fff);
 }
 
 #slider .dx-slider-handle {
-  background-color: #f05b41;
+  background-color: var(--dxds-color-bg-orange, #f05b41);
   width: 16px;
   height: 16px;
   margin-top: -8px;
@@ -61,10 +61,10 @@
 }
 
 #slider .dx-slider-handle::after {
-  background-color: #f05b41;
+  background-color: var(--dxds-color-bg-orange, #f05b41);
 }
 
 #slider .dx-slider-range.dx-slider-range-visible {
-  border-color: #f05b41;
-  background-color: #f05b41;
+  border-color: var(--dxds-color-bg-orange, #f05b41);
+  background-color: var(--dxds-color-bg-orange, #f05b41);
 }
diff --git a/apps/demos/Demos/Gauges/Overview/Vue/App.vue b/apps/demos/Demos/Gauges/Overview/Vue/App.vue
index 9c57ce36c9c8..c434381b0d33 100644
--- a/apps/demos/Demos/Gauges/Overview/Vue/App.vue
+++ b/apps/demos/Demos/Gauges/Overview/Vue/App.vue
@@ -174,11 +174,11 @@ const color = '#f05b41';
 }
 
 #slider .dx-slider-bar {
-  background-color: #fff;
+  background-color: var(--dxds-color-bg, #fff);
 }
 
 #slider .dx-slider-handle {
-  background-color: #f05b41;
+  background-color: var(--dxds-color-bg-orange, #f05b41);
   width: 16px;
   height: 16px;
   margin-top: -8px;
@@ -192,11 +192,11 @@ const color = '#f05b41';
 }
 
 #slider .dx-slider-handle::after {
-  background-color: #f05b41;
+  background-color: var(--dxds-color-bg-orange, #f05b41);
 }
 
 #slider .dx-slider-range.dx-slider-range-visible {
-  border-color: #f05b41;
-  background-color: #f05b41;
+  border-color: var(--dxds-color-bg-orange, #f05b41);
+  background-color: var(--dxds-color-bg-orange, #f05b41);
 }
 </style>
diff --git a/apps/demos/Demos/Gauges/Overview/jQuery/styles.css b/apps/demos/Demos/Gauges/Overview/jQuery/styles.css
index fb2bf9e621d5..698ee510dba2 100644
--- a/apps/demos/Demos/Gauges/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/Gauges/Overview/jQuery/styles.css
@@ -43,11 +43,11 @@
 }
 
 #slider .dx-slider-bar {
-  background-color: #fff;
+  background-color: var(--dxds-color-bg, #fff);
 }
 
 #slider .dx-slider-handle {
-  background-color: #f05b41;
+  background-color: var(--dxds-color-bg-orange, #f05b41);
   width: 16px;
   height: 16px;
   margin-top: -8px;
@@ -61,10 +61,10 @@
 }
 
 #slider .dx-slider-handle::after {
-  background-color: #f05b41;
+  background-color: var(--dxds-color-bg-orange, #f05b41);
 }
 
 #slider .dx-slider-range.dx-slider-range-visible {
-  border-color: #f05b41;
-  background-color: #f05b41;
+  border-color: var(--dxds-color-bg-orange, #f05b41);
+  background-color: var(--dxds-color-bg-orange, #f05b41);
 }
diff --git a/apps/demos/Demos/Gauges/ValueIndicatorsAPI/Angular/app/app.component.css b/apps/demos/Demos/Gauges/ValueIndicatorsAPI/Angular/app/app.component.css
index 0b903dd2516a..28d8cc0161bf 100644
--- a/apps/demos/Demos/Gauges/ValueIndicatorsAPI/Angular/app/app.component.css
+++ b/apps/demos/Demos/Gauges/ValueIndicatorsAPI/Angular/app/app.component.css
@@ -4,7 +4,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   right: 0;
   top: 0;
diff --git a/apps/demos/Demos/Gauges/ValueIndicatorsAPI/React/styles.css b/apps/demos/Demos/Gauges/ValueIndicatorsAPI/React/styles.css
index f58144828e66..14fe2e635f8a 100644
--- a/apps/demos/Demos/Gauges/ValueIndicatorsAPI/React/styles.css
+++ b/apps/demos/Demos/Gauges/ValueIndicatorsAPI/React/styles.css
@@ -4,7 +4,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   right: 0;
   top: 0;
diff --git a/apps/demos/Demos/Gauges/ValueIndicatorsAPI/ReactJs/styles.css b/apps/demos/Demos/Gauges/ValueIndicatorsAPI/ReactJs/styles.css
index f58144828e66..14fe2e635f8a 100644
--- a/apps/demos/Demos/Gauges/ValueIndicatorsAPI/ReactJs/styles.css
+++ b/apps/demos/Demos/Gauges/ValueIndicatorsAPI/ReactJs/styles.css
@@ -4,7 +4,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   right: 0;
   top: 0;
diff --git a/apps/demos/Demos/Gauges/ValueIndicatorsAPI/Vue/App.vue b/apps/demos/Demos/Gauges/ValueIndicatorsAPI/Vue/App.vue
index 03d46bba53c6..1be6a960338f 100644
--- a/apps/demos/Demos/Gauges/ValueIndicatorsAPI/Vue/App.vue
+++ b/apps/demos/Demos/Gauges/ValueIndicatorsAPI/Vue/App.vue
@@ -108,7 +108,7 @@ function updateValues() {
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   right: 0;
   top: 0;
diff --git a/apps/demos/Demos/Gauges/ValueIndicatorsAPI/jQuery/styles.css b/apps/demos/Demos/Gauges/ValueIndicatorsAPI/jQuery/styles.css
index f58144828e66..14fe2e635f8a 100644
--- a/apps/demos/Demos/Gauges/ValueIndicatorsAPI/jQuery/styles.css
+++ b/apps/demos/Demos/Gauges/ValueIndicatorsAPI/jQuery/styles.css
@@ -4,7 +4,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   right: 0;
   top: 0;
diff --git a/apps/demos/Demos/HtmlEditor/MarkdownSupport/Angular/app/app.component.css b/apps/demos/Demos/HtmlEditor/MarkdownSupport/Angular/app/app.component.css
index b19d51bf3f5e..0803b679c869 100644
--- a/apps/demos/Demos/HtmlEditor/MarkdownSupport/Angular/app/app.component.css
+++ b/apps/demos/Demos/HtmlEditor/MarkdownSupport/Angular/app/app.component.css
@@ -22,7 +22,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   box-sizing: border-box;
   width: 100%;
 }
diff --git a/apps/demos/Demos/HtmlEditor/MarkdownSupport/React/styles.css b/apps/demos/Demos/HtmlEditor/MarkdownSupport/React/styles.css
index 56bc1eb5b35a..4ab6166805b6 100644
--- a/apps/demos/Demos/HtmlEditor/MarkdownSupport/React/styles.css
+++ b/apps/demos/Demos/HtmlEditor/MarkdownSupport/React/styles.css
@@ -22,7 +22,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   box-sizing: border-box;
   width: 100%;
 }
diff --git a/apps/demos/Demos/HtmlEditor/MarkdownSupport/ReactJs/styles.css b/apps/demos/Demos/HtmlEditor/MarkdownSupport/ReactJs/styles.css
index 56bc1eb5b35a..4ab6166805b6 100644
--- a/apps/demos/Demos/HtmlEditor/MarkdownSupport/ReactJs/styles.css
+++ b/apps/demos/Demos/HtmlEditor/MarkdownSupport/ReactJs/styles.css
@@ -22,7 +22,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   box-sizing: border-box;
   width: 100%;
 }
diff --git a/apps/demos/Demos/HtmlEditor/MarkdownSupport/Vue/App.vue b/apps/demos/Demos/HtmlEditor/MarkdownSupport/Vue/App.vue
index 3390afe8eec7..9de1848a0b07 100644
--- a/apps/demos/Demos/HtmlEditor/MarkdownSupport/Vue/App.vue
+++ b/apps/demos/Demos/HtmlEditor/MarkdownSupport/Vue/App.vue
@@ -104,7 +104,7 @@ const converter = {
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   box-sizing: border-box;
   width: 100%;
 }
diff --git a/apps/demos/Demos/HtmlEditor/MarkdownSupport/jQuery/styles.css b/apps/demos/Demos/HtmlEditor/MarkdownSupport/jQuery/styles.css
index 56bc1eb5b35a..4ab6166805b6 100644
--- a/apps/demos/Demos/HtmlEditor/MarkdownSupport/jQuery/styles.css
+++ b/apps/demos/Demos/HtmlEditor/MarkdownSupport/jQuery/styles.css
@@ -22,7 +22,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   box-sizing: border-box;
   width: 100%;
 }
diff --git a/apps/demos/Demos/HtmlEditor/Mentions/Angular/app/app.component.css b/apps/demos/Demos/HtmlEditor/Mentions/Angular/app/app.component.css
index 8394711c458b..f36fca6d5cc4 100644
--- a/apps/demos/Demos/HtmlEditor/Mentions/Angular/app/app.component.css
+++ b/apps/demos/Demos/HtmlEditor/Mentions/Angular/app/app.component.css
@@ -1,5 +1,5 @@
 ::ng-deep #chat-window {
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   height: 350px;
   padding: 10px;
 }
@@ -21,7 +21,7 @@
   border-radius: 5px;
   margin: 5px;
   padding: 10px;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--dxds-box-shadow-md, 0 2px 6px rgba(0, 0, 0, 0.1));
 }
 
 ::ng-deep .name {
diff --git a/apps/demos/Demos/HtmlEditor/Mentions/React/styles.css b/apps/demos/Demos/HtmlEditor/Mentions/React/styles.css
index f87be5e72cf5..f08f0c784639 100644
--- a/apps/demos/Demos/HtmlEditor/Mentions/React/styles.css
+++ b/apps/demos/Demos/HtmlEditor/Mentions/React/styles.css
@@ -1,5 +1,5 @@
 #chat-window {
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   height: 350px;
   padding: 10px;
 }
@@ -21,7 +21,7 @@
   border-radius: 5px;
   margin: 5px;
   padding: 10px;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--dxds-box-shadow-md, 0 2px 6px rgba(0, 0, 0, 0.1));
 }
 
 .name {
diff --git a/apps/demos/Demos/HtmlEditor/Mentions/ReactJs/styles.css b/apps/demos/Demos/HtmlEditor/Mentions/ReactJs/styles.css
index f87be5e72cf5..f08f0c784639 100644
--- a/apps/demos/Demos/HtmlEditor/Mentions/ReactJs/styles.css
+++ b/apps/demos/Demos/HtmlEditor/Mentions/ReactJs/styles.css
@@ -1,5 +1,5 @@
 #chat-window {
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   height: 350px;
   padding: 10px;
 }
@@ -21,7 +21,7 @@
   border-radius: 5px;
   margin: 5px;
   padding: 10px;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--dxds-box-shadow-md, 0 2px 6px rgba(0, 0, 0, 0.1));
 }
 
 .name {
diff --git a/apps/demos/Demos/HtmlEditor/Mentions/Vue/App.vue b/apps/demos/Demos/HtmlEditor/Mentions/Vue/App.vue
index 0bd1e9b00649..a162e66b30c3 100644
--- a/apps/demos/Demos/HtmlEditor/Mentions/Vue/App.vue
+++ b/apps/demos/Demos/HtmlEditor/Mentions/Vue/App.vue
@@ -102,7 +102,7 @@ const mentions = ref([{
 </script>
 <style>
 #chat-window {
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   height: 350px;
   padding: 10px;
 }
@@ -124,7 +124,7 @@ const mentions = ref([{
   border-radius: 5px;
   margin: 5px;
   padding: 10px;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--dxds-box-shadow-md, 0 2px 6px rgba(0, 0, 0, 0.1));
 }
 
 .name {
diff --git a/apps/demos/Demos/HtmlEditor/Mentions/jQuery/styles.css b/apps/demos/Demos/HtmlEditor/Mentions/jQuery/styles.css
index 097ffac45c15..a4950d63c135 100644
--- a/apps/demos/Demos/HtmlEditor/Mentions/jQuery/styles.css
+++ b/apps/demos/Demos/HtmlEditor/Mentions/jQuery/styles.css
@@ -1,5 +1,5 @@
 #chat-window {
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   height: 350px;
   padding: 10px;
 }
@@ -21,7 +21,7 @@
   border-radius: 5px;
   margin: 5px;
   padding: 10px;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--dxds-box-shadow-md, 0 2px 6px rgba(0, 0, 0, 0.1));
 }
 
 .name {
diff --git a/apps/demos/Demos/HtmlEditor/Overview/Angular/app/app.component.css b/apps/demos/Demos/HtmlEditor/Overview/Angular/app/app.component.css
index b8bafa9920bd..5ddd768f47ae 100644
--- a/apps/demos/Demos/HtmlEditor/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/HtmlEditor/Overview/Angular/app/app.component.css
@@ -9,7 +9,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/HtmlEditor/Overview/React/styles.css b/apps/demos/Demos/HtmlEditor/Overview/React/styles.css
index eeeaa6af4e04..e93456db14f4 100644
--- a/apps/demos/Demos/HtmlEditor/Overview/React/styles.css
+++ b/apps/demos/Demos/HtmlEditor/Overview/React/styles.css
@@ -9,7 +9,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/HtmlEditor/Overview/ReactJs/styles.css b/apps/demos/Demos/HtmlEditor/Overview/ReactJs/styles.css
index eeeaa6af4e04..e93456db14f4 100644
--- a/apps/demos/Demos/HtmlEditor/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/HtmlEditor/Overview/ReactJs/styles.css
@@ -9,7 +9,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/HtmlEditor/Overview/Vue/App.vue b/apps/demos/Demos/HtmlEditor/Overview/Vue/App.vue
index 6b2d4fabf8d4..18e6b22bbb19 100644
--- a/apps/demos/Demos/HtmlEditor/Overview/Vue/App.vue
+++ b/apps/demos/Demos/HtmlEditor/Overview/Vue/App.vue
@@ -122,7 +122,7 @@ const headerOptions = { inputAttr: { 'aria-label': 'Font family' } };
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/HtmlEditor/Overview/jQuery/styles.css b/apps/demos/Demos/HtmlEditor/Overview/jQuery/styles.css
index eeeaa6af4e04..e93456db14f4 100644
--- a/apps/demos/Demos/HtmlEditor/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/HtmlEditor/Overview/jQuery/styles.css
@@ -9,7 +9,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/HtmlEditor/Tables/Angular/app/app.component.css b/apps/demos/Demos/HtmlEditor/Tables/Angular/app/app.component.css
index 3fa6a9d2123c..a47ad2b2bc71 100644
--- a/apps/demos/Demos/HtmlEditor/Tables/Angular/app/app.component.css
+++ b/apps/demos/Demos/HtmlEditor/Tables/Angular/app/app.component.css
@@ -4,7 +4,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/HtmlEditor/Tables/React/styles.css b/apps/demos/Demos/HtmlEditor/Tables/React/styles.css
index af4ee2051121..f29d32ed5740 100644
--- a/apps/demos/Demos/HtmlEditor/Tables/React/styles.css
+++ b/apps/demos/Demos/HtmlEditor/Tables/React/styles.css
@@ -4,7 +4,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/HtmlEditor/Tables/ReactJs/styles.css b/apps/demos/Demos/HtmlEditor/Tables/ReactJs/styles.css
index af4ee2051121..f29d32ed5740 100644
--- a/apps/demos/Demos/HtmlEditor/Tables/ReactJs/styles.css
+++ b/apps/demos/Demos/HtmlEditor/Tables/ReactJs/styles.css
@@ -4,7 +4,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/HtmlEditor/Tables/Vue/App.vue b/apps/demos/Demos/HtmlEditor/Tables/Vue/App.vue
index 7ade2f02997c..36224c24cd2b 100644
--- a/apps/demos/Demos/HtmlEditor/Tables/Vue/App.vue
+++ b/apps/demos/Demos/HtmlEditor/Tables/Vue/App.vue
@@ -69,7 +69,7 @@ const contextMenuEnabled = ref(true);
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/HtmlEditor/Tables/jQuery/styles.css b/apps/demos/Demos/HtmlEditor/Tables/jQuery/styles.css
index af4ee2051121..f29d32ed5740 100644
--- a/apps/demos/Demos/HtmlEditor/Tables/jQuery/styles.css
+++ b/apps/demos/Demos/HtmlEditor/Tables/jQuery/styles.css
@@ -4,7 +4,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/List/ItemDeletion/Angular/app/app.component.css b/apps/demos/Demos/List/ItemDeletion/Angular/app/app.component.css
index b275e678b052..b8ab4596a180 100644
--- a/apps/demos/Demos/List/ItemDeletion/Angular/app/app.component.css
+++ b/apps/demos/Demos/List/ItemDeletion/Angular/app/app.component.css
@@ -1,7 +1,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 ::ng-deep .options .caption {
diff --git a/apps/demos/Demos/List/ItemDeletion/React/styles.css b/apps/demos/Demos/List/ItemDeletion/React/styles.css
index cce4511de40d..7bf3cca9f402 100644
--- a/apps/demos/Demos/List/ItemDeletion/React/styles.css
+++ b/apps/demos/Demos/List/ItemDeletion/React/styles.css
@@ -1,7 +1,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .options .caption {
diff --git a/apps/demos/Demos/List/ItemDeletion/ReactJs/styles.css b/apps/demos/Demos/List/ItemDeletion/ReactJs/styles.css
index cce4511de40d..7bf3cca9f402 100644
--- a/apps/demos/Demos/List/ItemDeletion/ReactJs/styles.css
+++ b/apps/demos/Demos/List/ItemDeletion/ReactJs/styles.css
@@ -1,7 +1,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .options .caption {
diff --git a/apps/demos/Demos/List/ItemDeletion/Vue/App.vue b/apps/demos/Demos/List/ItemDeletion/Vue/App.vue
index 3730946c30c9..579952538d75 100644
--- a/apps/demos/Demos/List/ItemDeletion/Vue/App.vue
+++ b/apps/demos/Demos/List/ItemDeletion/Vue/App.vue
@@ -42,7 +42,7 @@ const itemDeleteMode = ref<DxListTypes.ItemDeleteMode>('toggle');
 .options {
   margin-top: 20px;
   padding: 20px;
-  background: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .options .caption {
diff --git a/apps/demos/Demos/List/ItemDeletion/jQuery/styles.css b/apps/demos/Demos/List/ItemDeletion/jQuery/styles.css
index cce4511de40d..7bf3cca9f402 100644
--- a/apps/demos/Demos/List/ItemDeletion/jQuery/styles.css
+++ b/apps/demos/Demos/List/ItemDeletion/jQuery/styles.css
@@ -1,7 +1,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .options .caption {
diff --git a/apps/demos/Demos/List/Search/Angular/app/app.component.css b/apps/demos/Demos/List/Search/Angular/app/app.component.css
index b49654cc49fd..d588f30cfe90 100644
--- a/apps/demos/Demos/List/Search/Angular/app/app.component.css
+++ b/apps/demos/Demos/List/Search/Angular/app/app.component.css
@@ -6,7 +6,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 ::ng-deep .options .caption {
diff --git a/apps/demos/Demos/List/Search/React/styles.css b/apps/demos/Demos/List/Search/React/styles.css
index 7fc4200deaa6..1aaf8865628d 100644
--- a/apps/demos/Demos/List/Search/React/styles.css
+++ b/apps/demos/Demos/List/Search/React/styles.css
@@ -6,7 +6,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .options .caption {
diff --git a/apps/demos/Demos/List/Search/ReactJs/styles.css b/apps/demos/Demos/List/Search/ReactJs/styles.css
index 7fc4200deaa6..1aaf8865628d 100644
--- a/apps/demos/Demos/List/Search/ReactJs/styles.css
+++ b/apps/demos/Demos/List/Search/ReactJs/styles.css
@@ -6,7 +6,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .options .caption {
diff --git a/apps/demos/Demos/List/Search/Vue/App.vue b/apps/demos/Demos/List/Search/Vue/App.vue
index 58b57536f8aa..a99b42fb45bd 100644
--- a/apps/demos/Demos/List/Search/Vue/App.vue
+++ b/apps/demos/Demos/List/Search/Vue/App.vue
@@ -46,7 +46,7 @@ const searchMode = ref<SearchMode>('contains');
 .options {
   margin-top: 20px;
   padding: 20px;
-  background: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .options .caption {
diff --git a/apps/demos/Demos/List/Search/jQuery/styles.css b/apps/demos/Demos/List/Search/jQuery/styles.css
index 7fc4200deaa6..1aaf8865628d 100644
--- a/apps/demos/Demos/List/Search/jQuery/styles.css
+++ b/apps/demos/Demos/List/Search/jQuery/styles.css
@@ -6,7 +6,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .options .caption {
diff --git a/apps/demos/Demos/List/Selection/Angular/app/app.component.css b/apps/demos/Demos/List/Selection/Angular/app/app.component.css
index fce2d3fe3051..39880aaba7a3 100644
--- a/apps/demos/Demos/List/Selection/Angular/app/app.component.css
+++ b/apps/demos/Demos/List/Selection/Angular/app/app.component.css
@@ -2,7 +2,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 ::ng-deep .selected-data .caption {
diff --git a/apps/demos/Demos/List/Selection/React/styles.css b/apps/demos/Demos/List/Selection/React/styles.css
index 445d7f1ce8cf..028f286f4ef0 100644
--- a/apps/demos/Demos/List/Selection/React/styles.css
+++ b/apps/demos/Demos/List/Selection/React/styles.css
@@ -2,7 +2,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .selected-data .caption {
diff --git a/apps/demos/Demos/List/Selection/ReactJs/styles.css b/apps/demos/Demos/List/Selection/ReactJs/styles.css
index 445d7f1ce8cf..028f286f4ef0 100644
--- a/apps/demos/Demos/List/Selection/ReactJs/styles.css
+++ b/apps/demos/Demos/List/Selection/ReactJs/styles.css
@@ -2,7 +2,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .selected-data .caption {
diff --git a/apps/demos/Demos/List/Selection/Vue/App.vue b/apps/demos/Demos/List/Selection/Vue/App.vue
index 3c9b969780f0..2c72922f10bf 100644
--- a/apps/demos/Demos/List/Selection/Vue/App.vue
+++ b/apps/demos/Demos/List/Selection/Vue/App.vue
@@ -70,7 +70,7 @@ const selectByClick = ref(false);
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .selected-data .caption {
diff --git a/apps/demos/Demos/List/Selection/jQuery/styles.css b/apps/demos/Demos/List/Selection/jQuery/styles.css
index 445d7f1ce8cf..028f286f4ef0 100644
--- a/apps/demos/Demos/List/Selection/jQuery/styles.css
+++ b/apps/demos/Demos/List/Selection/jQuery/styles.css
@@ -2,7 +2,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .selected-data .caption {
diff --git a/apps/demos/Demos/LoadPanel/Overview/Angular/app/app.component.css b/apps/demos/Demos/LoadPanel/Overview/Angular/app/app.component.css
index 60ed6d539ae0..c2bce89cdfd4 100644
--- a/apps/demos/Demos/LoadPanel/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/LoadPanel/Overview/Angular/app/app.component.css
@@ -10,8 +10,8 @@
   margin: 20px 0;
   -webkit-touch-callout: none;
   user-select: none;
-  border-top: 1px solid lightgray;
-  border-bottom: 1px solid lightgray;
+  border-top: 1px solid var(--dxds-color-border, lightgray);
+  border-bottom: 1px solid var(--dxds-color-border, lightgray);
 }
 
 #employee > p {
@@ -25,7 +25,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/LoadPanel/Overview/React/styles.css b/apps/demos/Demos/LoadPanel/Overview/React/styles.css
index 60ed6d539ae0..c2bce89cdfd4 100644
--- a/apps/demos/Demos/LoadPanel/Overview/React/styles.css
+++ b/apps/demos/Demos/LoadPanel/Overview/React/styles.css
@@ -10,8 +10,8 @@
   margin: 20px 0;
   -webkit-touch-callout: none;
   user-select: none;
-  border-top: 1px solid lightgray;
-  border-bottom: 1px solid lightgray;
+  border-top: 1px solid var(--dxds-color-border, lightgray);
+  border-bottom: 1px solid var(--dxds-color-border, lightgray);
 }
 
 #employee > p {
@@ -25,7 +25,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/LoadPanel/Overview/ReactJs/styles.css b/apps/demos/Demos/LoadPanel/Overview/ReactJs/styles.css
index 60ed6d539ae0..c2bce89cdfd4 100644
--- a/apps/demos/Demos/LoadPanel/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/LoadPanel/Overview/ReactJs/styles.css
@@ -10,8 +10,8 @@
   margin: 20px 0;
   -webkit-touch-callout: none;
   user-select: none;
-  border-top: 1px solid lightgray;
-  border-bottom: 1px solid lightgray;
+  border-top: 1px solid var(--dxds-color-border, lightgray);
+  border-bottom: 1px solid var(--dxds-color-border, lightgray);
 }
 
 #employee > p {
@@ -25,7 +25,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/LoadPanel/Overview/Vue/App.vue b/apps/demos/Demos/LoadPanel/Overview/Vue/App.vue
index cbdbea3efb3e..7388d84f2241 100644
--- a/apps/demos/Demos/LoadPanel/Overview/Vue/App.vue
+++ b/apps/demos/Demos/LoadPanel/Overview/Vue/App.vue
@@ -107,8 +107,8 @@ function onHidden() {
   margin: 20px 0;
   -webkit-touch-callout: none;
   user-select: none;
-  border-top: 1px solid lightgray;
-  border-bottom: 1px solid lightgray;
+  border-top: 1px solid var(--dxds-color-border, lightgray);
+  border-bottom: 1px solid var(--dxds-color-border, lightgray);
 }
 
 #employee > p {
@@ -122,7 +122,7 @@ function onHidden() {
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/LoadPanel/Overview/jQuery/styles.css b/apps/demos/Demos/LoadPanel/Overview/jQuery/styles.css
index 60ed6d539ae0..c2bce89cdfd4 100644
--- a/apps/demos/Demos/LoadPanel/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/LoadPanel/Overview/jQuery/styles.css
@@ -10,8 +10,8 @@
   margin: 20px 0;
   -webkit-touch-callout: none;
   user-select: none;
-  border-top: 1px solid lightgray;
-  border-bottom: 1px solid lightgray;
+  border-top: 1px solid var(--dxds-color-border, lightgray);
+  border-bottom: 1px solid var(--dxds-color-border, lightgray);
 }
 
 #employee > p {
@@ -25,7 +25,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Localization/UsingGlobalize/Angular/app/app.component.css b/apps/demos/Demos/Localization/UsingGlobalize/Angular/app/app.component.css
index 7186e44ad42d..10f8b537dad3 100644
--- a/apps/demos/Demos/Localization/UsingGlobalize/Angular/app/app.component.css
+++ b/apps/demos/Demos/Localization/UsingGlobalize/Angular/app/app.component.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Localization/UsingGlobalize/React/styles.css b/apps/demos/Demos/Localization/UsingGlobalize/React/styles.css
index d30c1bc016ba..587d2153552b 100644
--- a/apps/demos/Demos/Localization/UsingGlobalize/React/styles.css
+++ b/apps/demos/Demos/Localization/UsingGlobalize/React/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Localization/UsingGlobalize/ReactJs/styles.css b/apps/demos/Demos/Localization/UsingGlobalize/ReactJs/styles.css
index d30c1bc016ba..587d2153552b 100644
--- a/apps/demos/Demos/Localization/UsingGlobalize/ReactJs/styles.css
+++ b/apps/demos/Demos/Localization/UsingGlobalize/ReactJs/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Localization/UsingGlobalize/Vue/App.vue b/apps/demos/Demos/Localization/UsingGlobalize/Vue/App.vue
index 54401acad567..7ac3859cb6f3 100644
--- a/apps/demos/Demos/Localization/UsingGlobalize/Vue/App.vue
+++ b/apps/demos/Demos/Localization/UsingGlobalize/Vue/App.vue
@@ -118,7 +118,7 @@ function changeLocale({ value }: DxSelectBoxTypes.ValueChangedEvent) {
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Localization/UsingGlobalize/jQuery/styles.css b/apps/demos/Demos/Localization/UsingGlobalize/jQuery/styles.css
index d30c1bc016ba..587d2153552b 100644
--- a/apps/demos/Demos/Localization/UsingGlobalize/jQuery/styles.css
+++ b/apps/demos/Demos/Localization/UsingGlobalize/jQuery/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Localization/UsingIntl/Angular/app/app.component.css b/apps/demos/Demos/Localization/UsingIntl/Angular/app/app.component.css
index e19f9100fb1e..c6c473561df3 100644
--- a/apps/demos/Demos/Localization/UsingIntl/Angular/app/app.component.css
+++ b/apps/demos/Demos/Localization/UsingIntl/Angular/app/app.component.css
@@ -1,7 +1,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Localization/UsingIntl/React/styles.css b/apps/demos/Demos/Localization/UsingIntl/React/styles.css
index d30c1bc016ba..587d2153552b 100644
--- a/apps/demos/Demos/Localization/UsingIntl/React/styles.css
+++ b/apps/demos/Demos/Localization/UsingIntl/React/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Localization/UsingIntl/ReactJs/styles.css b/apps/demos/Demos/Localization/UsingIntl/ReactJs/styles.css
index d30c1bc016ba..587d2153552b 100644
--- a/apps/demos/Demos/Localization/UsingIntl/ReactJs/styles.css
+++ b/apps/demos/Demos/Localization/UsingIntl/ReactJs/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Localization/UsingIntl/Vue/App.vue b/apps/demos/Demos/Localization/UsingIntl/Vue/App.vue
index 73f8481ec2d4..bf65d7906f6a 100644
--- a/apps/demos/Demos/Localization/UsingIntl/Vue/App.vue
+++ b/apps/demos/Demos/Localization/UsingIntl/Vue/App.vue
@@ -111,7 +111,7 @@ function changeLocale({ value }: DxSelectBoxTypes.ValueChangedEvent) {
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Localization/UsingIntl/jQuery/styles.css b/apps/demos/Demos/Localization/UsingIntl/jQuery/styles.css
index d30c1bc016ba..587d2153552b 100644
--- a/apps/demos/Demos/Localization/UsingIntl/jQuery/styles.css
+++ b/apps/demos/Demos/Localization/UsingIntl/jQuery/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Lookup/EventHandling/Angular/app/app.component.css b/apps/demos/Demos/Lookup/EventHandling/Angular/app/app.component.css
index d8fc4e6f431b..f1f3b35a18d2 100644
--- a/apps/demos/Demos/Lookup/EventHandling/Angular/app/app.component.css
+++ b/apps/demos/Demos/Lookup/EventHandling/Angular/app/app.component.css
@@ -6,7 +6,7 @@
   height: 64px;
   width: 64px;
   float: left;
-  border: 1px solid #eee;
+  border: 1px solid var(--dxds-color-border, #eee);
   border-radius: 50%;
   overflow: hidden;
   margin-right: 20px;
@@ -31,7 +31,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   right: 0;
   top: 0;
diff --git a/apps/demos/Demos/Lookup/EventHandling/React/styles.css b/apps/demos/Demos/Lookup/EventHandling/React/styles.css
index a865139280aa..93d0578e9116 100644
--- a/apps/demos/Demos/Lookup/EventHandling/React/styles.css
+++ b/apps/demos/Demos/Lookup/EventHandling/React/styles.css
@@ -6,7 +6,7 @@
   height: 64px;
   width: 64px;
   float: left;
-  border: 1px solid #eee;
+  border: 1px solid var(--dxds-color-border, #eee);
   border-radius: 50%;
   overflow: hidden;
   margin-right: 20px;
@@ -31,7 +31,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   right: 0;
   top: 0;
diff --git a/apps/demos/Demos/Lookup/EventHandling/ReactJs/styles.css b/apps/demos/Demos/Lookup/EventHandling/ReactJs/styles.css
index a865139280aa..93d0578e9116 100644
--- a/apps/demos/Demos/Lookup/EventHandling/ReactJs/styles.css
+++ b/apps/demos/Demos/Lookup/EventHandling/ReactJs/styles.css
@@ -6,7 +6,7 @@
   height: 64px;
   width: 64px;
   float: left;
-  border: 1px solid #eee;
+  border: 1px solid var(--dxds-color-border, #eee);
   border-radius: 50%;
   overflow: hidden;
   margin-right: 20px;
@@ -31,7 +31,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   right: 0;
   top: 0;
diff --git a/apps/demos/Demos/Lookup/EventHandling/Vue/styles.css b/apps/demos/Demos/Lookup/EventHandling/Vue/styles.css
index a865139280aa..93d0578e9116 100644
--- a/apps/demos/Demos/Lookup/EventHandling/Vue/styles.css
+++ b/apps/demos/Demos/Lookup/EventHandling/Vue/styles.css
@@ -6,7 +6,7 @@
   height: 64px;
   width: 64px;
   float: left;
-  border: 1px solid #eee;
+  border: 1px solid var(--dxds-color-border, #eee);
   border-radius: 50%;
   overflow: hidden;
   margin-right: 20px;
@@ -31,7 +31,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   right: 0;
   top: 0;
diff --git a/apps/demos/Demos/Lookup/EventHandling/jQuery/styles.css b/apps/demos/Demos/Lookup/EventHandling/jQuery/styles.css
index d5eba0ec5a5b..435bc0a6c94c 100644
--- a/apps/demos/Demos/Lookup/EventHandling/jQuery/styles.css
+++ b/apps/demos/Demos/Lookup/EventHandling/jQuery/styles.css
@@ -7,7 +7,7 @@
   height: 64px;
   width: 64px;
   float: left;
-  border: 1px solid #eee;
+  border: 1px solid var(--dxds-color-border, #eee);
   border-radius: 50%;
   overflow: hidden;
   margin-right: 20px;
@@ -32,7 +32,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   right: 0;
   top: 0;
diff --git a/apps/demos/Demos/Map/Markers/Angular/app/app.component.css b/apps/demos/Demos/Map/Markers/Angular/app/app.component.css
index 00eed4a56197..c1282b9c75b3 100644
--- a/apps/demos/Demos/Map/Markers/Angular/app/app.component.css
+++ b/apps/demos/Demos/Map/Markers/Angular/app/app.component.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Map/Markers/React/styles.css b/apps/demos/Demos/Map/Markers/React/styles.css
index 00eed4a56197..c1282b9c75b3 100644
--- a/apps/demos/Demos/Map/Markers/React/styles.css
+++ b/apps/demos/Demos/Map/Markers/React/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Map/Markers/ReactJs/styles.css b/apps/demos/Demos/Map/Markers/ReactJs/styles.css
index 00eed4a56197..c1282b9c75b3 100644
--- a/apps/demos/Demos/Map/Markers/ReactJs/styles.css
+++ b/apps/demos/Demos/Map/Markers/ReactJs/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Map/Markers/Vue/App.vue b/apps/demos/Demos/Map/Markers/Vue/App.vue
index 9f61b7a59223..bd82f98fd01f 100644
--- a/apps/demos/Demos/Map/Markers/Vue/App.vue
+++ b/apps/demos/Demos/Map/Markers/Vue/App.vue
@@ -57,7 +57,7 @@ function showTooltips() {
 <style>
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Map/Markers/jQuery/styles.css b/apps/demos/Demos/Map/Markers/jQuery/styles.css
index 00eed4a56197..c1282b9c75b3 100644
--- a/apps/demos/Demos/Map/Markers/jQuery/styles.css
+++ b/apps/demos/Demos/Map/Markers/jQuery/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Map/ProvidersAndTypes/Angular/app/app.component.css b/apps/demos/Demos/Map/ProvidersAndTypes/Angular/app/app.component.css
index 107f1dea8930..0b181bdaf4f0 100644
--- a/apps/demos/Demos/Map/ProvidersAndTypes/Angular/app/app.component.css
+++ b/apps/demos/Demos/Map/ProvidersAndTypes/Angular/app/app.component.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Map/ProvidersAndTypes/React/styles.css b/apps/demos/Demos/Map/ProvidersAndTypes/React/styles.css
index 41f1233d151f..46c110c05514 100644
--- a/apps/demos/Demos/Map/ProvidersAndTypes/React/styles.css
+++ b/apps/demos/Demos/Map/ProvidersAndTypes/React/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Map/ProvidersAndTypes/ReactJs/styles.css b/apps/demos/Demos/Map/ProvidersAndTypes/ReactJs/styles.css
index 41f1233d151f..46c110c05514 100644
--- a/apps/demos/Demos/Map/ProvidersAndTypes/ReactJs/styles.css
+++ b/apps/demos/Demos/Map/ProvidersAndTypes/ReactJs/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Map/ProvidersAndTypes/Vue/App.vue b/apps/demos/Demos/Map/ProvidersAndTypes/Vue/App.vue
index 0abf2754a40d..e1903ae3c20a 100644
--- a/apps/demos/Demos/Map/ProvidersAndTypes/Vue/App.vue
+++ b/apps/demos/Demos/Map/ProvidersAndTypes/Vue/App.vue
@@ -51,7 +51,7 @@ const mapProviderValue = ref(mapProviders[0].key);
 <style>
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Map/ProvidersAndTypes/jQuery/styles.css b/apps/demos/Demos/Map/ProvidersAndTypes/jQuery/styles.css
index 41f1233d151f..46c110c05514 100644
--- a/apps/demos/Demos/Map/ProvidersAndTypes/jQuery/styles.css
+++ b/apps/demos/Demos/Map/ProvidersAndTypes/jQuery/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Map/Routes/Angular/app/app.component.css b/apps/demos/Demos/Map/Routes/Angular/app/app.component.css
index 7d1f9b391217..b5b3e66ddeaa 100644
--- a/apps/demos/Demos/Map/Routes/Angular/app/app.component.css
+++ b/apps/demos/Demos/Map/Routes/Angular/app/app.component.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Map/Routes/React/styles.css b/apps/demos/Demos/Map/Routes/React/styles.css
index 0e88c535aadf..ee0ea4c26f32 100644
--- a/apps/demos/Demos/Map/Routes/React/styles.css
+++ b/apps/demos/Demos/Map/Routes/React/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Map/Routes/ReactJs/styles.css b/apps/demos/Demos/Map/Routes/ReactJs/styles.css
index 0e88c535aadf..ee0ea4c26f32 100644
--- a/apps/demos/Demos/Map/Routes/ReactJs/styles.css
+++ b/apps/demos/Demos/Map/Routes/ReactJs/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Map/Routes/Vue/App.vue b/apps/demos/Demos/Map/Routes/Vue/App.vue
index 2548a5b333da..dc5f0eba72ac 100644
--- a/apps/demos/Demos/Map/Routes/Vue/App.vue
+++ b/apps/demos/Demos/Map/Routes/Vue/App.vue
@@ -62,7 +62,7 @@ function updateRoutesColor({ value: color }: DxSelectBoxTypes.ValueChangedEvent)
 <style>
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Map/Routes/jQuery/styles.css b/apps/demos/Demos/Map/Routes/jQuery/styles.css
index 0e88c535aadf..ee0ea4c26f32 100644
--- a/apps/demos/Demos/Map/Routes/jQuery/styles.css
+++ b/apps/demos/Demos/Map/Routes/jQuery/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Menu/Overview/Angular/app/app.component.css b/apps/demos/Demos/Menu/Overview/Angular/app/app.component.css
index 76c2e1e8aef9..34390abedbee 100644
--- a/apps/demos/Demos/Menu/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/Menu/Overview/Angular/app/app.component.css
@@ -32,10 +32,6 @@
   font-size: 24px;
 }
 
-::ng-deep .dark #product-details > div {
-  color: #f0f0f0;
-}
-
 .options {
   padding: 20px;
   position: absolute;
@@ -43,7 +39,7 @@
   right: 0;
   width: 260px;
   top: 0;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/Menu/Overview/React/styles.css b/apps/demos/Demos/Menu/Overview/React/styles.css
index 9743854ec0fe..d0d5ab2f98df 100644
--- a/apps/demos/Demos/Menu/Overview/React/styles.css
+++ b/apps/demos/Demos/Menu/Overview/React/styles.css
@@ -32,10 +32,6 @@
   font-size: 24px;
 }
 
-.dark #product-details > div {
-  color: #f0f0f0;
-}
-
 .options {
   padding: 20px;
   position: absolute;
@@ -43,7 +39,7 @@
   right: 0;
   width: 260px;
   top: 0;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/Menu/Overview/ReactJs/styles.css b/apps/demos/Demos/Menu/Overview/ReactJs/styles.css
index 9743854ec0fe..d0d5ab2f98df 100644
--- a/apps/demos/Demos/Menu/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/Menu/Overview/ReactJs/styles.css
@@ -32,10 +32,6 @@
   font-size: 24px;
 }
 
-.dark #product-details > div {
-  color: #f0f0f0;
-}
-
 .options {
   padding: 20px;
   position: absolute;
@@ -43,7 +39,7 @@
   right: 0;
   width: 260px;
   top: 0;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/Menu/Overview/Vue/App.vue b/apps/demos/Demos/Menu/Overview/Vue/App.vue
index 2ea4fa53091a..1e6221b89aff 100644
--- a/apps/demos/Demos/Menu/Overview/Vue/App.vue
+++ b/apps/demos/Demos/Menu/Overview/Vue/App.vue
@@ -121,10 +121,6 @@ function itemClick(e: DxMenuTypes.ItemClickEvent<ProductType>) {
   font-size: 24px;
 }
 
-.dark #product-details > div {
-  color: #f0f0f0;
-}
-
 .options {
   padding: 20px;
   position: absolute;
@@ -132,7 +128,7 @@ function itemClick(e: DxMenuTypes.ItemClickEvent<ProductType>) {
   right: 0;
   width: 260px;
   top: 0;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/Menu/Overview/jQuery/styles.css b/apps/demos/Demos/Menu/Overview/jQuery/styles.css
index 9743854ec0fe..d0d5ab2f98df 100644
--- a/apps/demos/Demos/Menu/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/Menu/Overview/jQuery/styles.css
@@ -32,10 +32,6 @@
   font-size: 24px;
 }
 
-.dark #product-details > div {
-  color: #f0f0f0;
-}
-
 .options {
   padding: 20px;
   position: absolute;
@@ -43,7 +39,7 @@
   right: 0;
   width: 260px;
   top: 0;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/Menu/Scrolling/Angular/app/app.component.css b/apps/demos/Demos/Menu/Scrolling/Angular/app/app.component.css
index 1962a36741fb..266464195167 100644
--- a/apps/demos/Demos/Menu/Scrolling/Angular/app/app.component.css
+++ b/apps/demos/Demos/Menu/Scrolling/Angular/app/app.component.css
@@ -18,7 +18,7 @@
   display: flex;
   flex-direction: column;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 ::ng-deep .caption {
diff --git a/apps/demos/Demos/Menu/Scrolling/React/styles.css b/apps/demos/Demos/Menu/Scrolling/React/styles.css
index 13439b0cc639..815a51ff0995 100644
--- a/apps/demos/Demos/Menu/Scrolling/React/styles.css
+++ b/apps/demos/Demos/Menu/Scrolling/React/styles.css
@@ -18,7 +18,7 @@
   display: flex;
   flex-direction: column;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/Menu/Scrolling/ReactJs/styles.css b/apps/demos/Demos/Menu/Scrolling/ReactJs/styles.css
index 13439b0cc639..815a51ff0995 100644
--- a/apps/demos/Demos/Menu/Scrolling/ReactJs/styles.css
+++ b/apps/demos/Demos/Menu/Scrolling/ReactJs/styles.css
@@ -18,7 +18,7 @@
   display: flex;
   flex-direction: column;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/Menu/Scrolling/Vue/App.vue b/apps/demos/Demos/Menu/Scrolling/Vue/App.vue
index 4d6eace52bc7..994f14c9eb0d 100644
--- a/apps/demos/Demos/Menu/Scrolling/Vue/App.vue
+++ b/apps/demos/Demos/Menu/Scrolling/Vue/App.vue
@@ -64,7 +64,7 @@ function onSubmenuShowing(e: DxMenuTypes.SubmenuShowingEvent<ProductType>) {
   display: flex;
   flex-direction: column;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/Menu/Scrolling/jQuery/styles.css b/apps/demos/Demos/Menu/Scrolling/jQuery/styles.css
index 13439b0cc639..815a51ff0995 100644
--- a/apps/demos/Demos/Menu/Scrolling/jQuery/styles.css
+++ b/apps/demos/Demos/Menu/Scrolling/jQuery/styles.css
@@ -18,7 +18,7 @@
   display: flex;
   flex-direction: column;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/MultiView/Overview/Angular/app/app.component.css b/apps/demos/Demos/MultiView/Overview/Angular/app/app.component.css
index 4445385b0ca9..51682d3aca1a 100644
--- a/apps/demos/Demos/MultiView/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/MultiView/Overview/Angular/app/app.component.css
@@ -6,8 +6,8 @@
   margin: 25px;
   -webkit-touch-callout: none;
   user-select: none;
-  border-top: 1px solid lightgray;
-  border-bottom: 1px solid lightgray;
+  border-top: 1px solid var(--dxds-color-border, lightgray);
+  border-bottom: 1px solid var(--dxds-color-border, lightgray);
   padding: 20px 0 30px;
 }
 
@@ -31,7 +31,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/MultiView/Overview/React/styles.css b/apps/demos/Demos/MultiView/Overview/React/styles.css
index d7204f9c1b91..352ddf0ecb39 100644
--- a/apps/demos/Demos/MultiView/Overview/React/styles.css
+++ b/apps/demos/Demos/MultiView/Overview/React/styles.css
@@ -5,8 +5,8 @@
 .multiview-item {
   margin: 25px;
   user-select: none;
-  border-top: 1px solid lightgray;
-  border-bottom: 1px solid lightgray;
+  border-top: 1px solid var(--dxds-color-border, lightgray);
+  border-bottom: 1px solid var(--dxds-color-border, lightgray);
   padding: 20px 0 30px;
 }
 
@@ -30,7 +30,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/MultiView/Overview/ReactJs/styles.css b/apps/demos/Demos/MultiView/Overview/ReactJs/styles.css
index d7204f9c1b91..352ddf0ecb39 100644
--- a/apps/demos/Demos/MultiView/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/MultiView/Overview/ReactJs/styles.css
@@ -5,8 +5,8 @@
 .multiview-item {
   margin: 25px;
   user-select: none;
-  border-top: 1px solid lightgray;
-  border-bottom: 1px solid lightgray;
+  border-top: 1px solid var(--dxds-color-border, lightgray);
+  border-bottom: 1px solid var(--dxds-color-border, lightgray);
   padding: 20px 0 30px;
 }
 
@@ -30,7 +30,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/MultiView/Overview/Vue/App.vue b/apps/demos/Demos/MultiView/Overview/Vue/App.vue
index 0ca4bb256a9c..f32ed43c8a42 100644
--- a/apps/demos/Demos/MultiView/Overview/Vue/App.vue
+++ b/apps/demos/Demos/MultiView/Overview/Vue/App.vue
@@ -82,8 +82,8 @@ const companies = multiViewItems;
 .multiview-item {
   margin: 25px;
   user-select: none;
-  border-top: 1px solid lightgray;
-  border-bottom: 1px solid lightgray;
+  border-top: 1px solid var(--dxds-color-border, lightgray);
+  border-bottom: 1px solid var(--dxds-color-border, lightgray);
   padding: 20px 0 30px;
 }
 
@@ -107,7 +107,7 @@ const companies = multiViewItems;
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/MultiView/Overview/jQuery/styles.css b/apps/demos/Demos/MultiView/Overview/jQuery/styles.css
index 876edfa071a8..e5146a3ff1b3 100644
--- a/apps/demos/Demos/MultiView/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/MultiView/Overview/jQuery/styles.css
@@ -6,8 +6,8 @@
   margin: 25px;
   -webkit-touch-callout: none;
   user-select: none;
-  border-top: 1px solid lightgray;
-  border-bottom: 1px solid lightgray;
+  border-top: 1px solid var(--dxds-color-border, lightgray);
+  border-bottom: 1px solid var(--dxds-color-border, lightgray);
   padding: 20px 0 30px;
 }
 
@@ -31,7 +31,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Pagination/Overview/Angular/app/app.component.css b/apps/demos/Demos/Pagination/Overview/Angular/app/app.component.css
index f65579fc60ad..6657fcd9e70f 100644
--- a/apps/demos/Demos/Pagination/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/Pagination/Overview/Angular/app/app.component.css
@@ -46,7 +46,7 @@ body {
   position: relative;
   overflow: hidden;
   border-bottom: var(--dx-border-width) solid var(--dx-color-border);
-  background-color: #fff;
+  background-color: var(--dxds-color-bg, #fff);
 }
 
 ::ng-deep .employees__img {
diff --git a/apps/demos/Demos/Pagination/Overview/React/styles.css b/apps/demos/Demos/Pagination/Overview/React/styles.css
index 346ba3ee6b1e..164a5e31dc8a 100644
--- a/apps/demos/Demos/Pagination/Overview/React/styles.css
+++ b/apps/demos/Demos/Pagination/Overview/React/styles.css
@@ -46,7 +46,7 @@ body {
   position: relative;
   overflow: hidden;
   border-bottom: var(--dx-border-width) solid var(--dx-color-border);
-  background-color: #fff;
+  background-color: var(--dxds-color-bg, #fff);
 }
 
 .employees__img {
diff --git a/apps/demos/Demos/Pagination/Overview/ReactJs/styles.css b/apps/demos/Demos/Pagination/Overview/ReactJs/styles.css
index 346ba3ee6b1e..164a5e31dc8a 100644
--- a/apps/demos/Demos/Pagination/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/Pagination/Overview/ReactJs/styles.css
@@ -46,7 +46,7 @@ body {
   position: relative;
   overflow: hidden;
   border-bottom: var(--dx-border-width) solid var(--dx-color-border);
-  background-color: #fff;
+  background-color: var(--dxds-color-bg, #fff);
 }
 
 .employees__img {
diff --git a/apps/demos/Demos/Pagination/Overview/Vue/App.vue b/apps/demos/Demos/Pagination/Overview/Vue/App.vue
index 2479506b66b8..da3d4cca0f2e 100644
--- a/apps/demos/Demos/Pagination/Overview/Vue/App.vue
+++ b/apps/demos/Demos/Pagination/Overview/Vue/App.vue
@@ -112,7 +112,7 @@ body {
   position: relative;
   overflow: hidden;
   border-bottom: var(--dx-border-width) solid var(--dx-color-border);
-  background-color: #fff;
+  background-color: var(--dxds-color-bg, #fff);
 }
 
 .employees__img {
diff --git a/apps/demos/Demos/Pagination/Overview/jQuery/styles.css b/apps/demos/Demos/Pagination/Overview/jQuery/styles.css
index 346ba3ee6b1e..164a5e31dc8a 100644
--- a/apps/demos/Demos/Pagination/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/Pagination/Overview/jQuery/styles.css
@@ -46,7 +46,7 @@ body {
   position: relative;
   overflow: hidden;
   border-bottom: var(--dx-border-width) solid var(--dx-color-border);
-  background-color: #fff;
+  background-color: var(--dxds-color-bg, #fff);
 }
 
 .employees__img {
diff --git a/apps/demos/Demos/PivotGrid/Customization/Angular/app/app.component.css b/apps/demos/Demos/PivotGrid/Customization/Angular/app/app.component.css
index 36725b8f0a96..4d4fa6656be4 100644
--- a/apps/demos/Demos/PivotGrid/Customization/Angular/app/app.component.css
+++ b/apps/demos/Demos/PivotGrid/Customization/Angular/app/app.component.css
@@ -1,7 +1,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/PivotGrid/Customization/React/styles.css b/apps/demos/Demos/PivotGrid/Customization/React/styles.css
index 36725b8f0a96..4d4fa6656be4 100644
--- a/apps/demos/Demos/PivotGrid/Customization/React/styles.css
+++ b/apps/demos/Demos/PivotGrid/Customization/React/styles.css
@@ -1,7 +1,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/PivotGrid/Customization/ReactJs/styles.css b/apps/demos/Demos/PivotGrid/Customization/ReactJs/styles.css
index 36725b8f0a96..4d4fa6656be4 100644
--- a/apps/demos/Demos/PivotGrid/Customization/ReactJs/styles.css
+++ b/apps/demos/Demos/PivotGrid/Customization/ReactJs/styles.css
@@ -1,7 +1,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/PivotGrid/Customization/Vue/App.vue b/apps/demos/Demos/PivotGrid/Customization/Vue/App.vue
index 2d56302c1c4a..2f28da0fb80b 100644
--- a/apps/demos/Demos/PivotGrid/Customization/Vue/App.vue
+++ b/apps/demos/Demos/PivotGrid/Customization/Vue/App.vue
@@ -105,7 +105,7 @@ function onRowHeaderLayoutChanged(data: DxCheckBoxTypes.ValueChangedEvent) {
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/PivotGrid/Customization/jQuery/styles.css b/apps/demos/Demos/PivotGrid/Customization/jQuery/styles.css
index 36725b8f0a96..4d4fa6656be4 100644
--- a/apps/demos/Demos/PivotGrid/Customization/jQuery/styles.css
+++ b/apps/demos/Demos/PivotGrid/Customization/jQuery/styles.css
@@ -1,7 +1,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Angular/app/app.component.css b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Angular/app/app.component.css
index 5cad027332c0..74d4327affd4 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Angular/app/app.component.css
+++ b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Angular/app/app.component.css
@@ -10,7 +10,7 @@
 ::ng-deep .export-options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/React/styles.css b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/React/styles.css
index a5e7eca56222..e08df0cd02d1 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/React/styles.css
+++ b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/React/styles.css
@@ -16,7 +16,7 @@
 .export-options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/ReactJs/styles.css b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/ReactJs/styles.css
index a5e7eca56222..e08df0cd02d1 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/ReactJs/styles.css
+++ b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/ReactJs/styles.css
@@ -16,7 +16,7 @@
 .export-options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Vue/App.vue b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Vue/App.vue
index caeaf2329689..b9c5b3052e34 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Vue/App.vue
+++ b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Vue/App.vue
@@ -184,7 +184,7 @@ function onExporting(e: DxPivotGridTypes.ExportingEvent) {
 .export-options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/jQuery/styles.css b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/jQuery/styles.css
index d790e0752f28..c4368a5d7ad0 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/jQuery/styles.css
+++ b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/jQuery/styles.css
@@ -10,7 +10,7 @@
 .export-options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/PivotGrid/FieldPanel/Angular/app/app.component.css b/apps/demos/Demos/PivotGrid/FieldPanel/Angular/app/app.component.css
index bdb91bc28654..2e673b3b8e74 100644
--- a/apps/demos/Demos/PivotGrid/FieldPanel/Angular/app/app.component.css
+++ b/apps/demos/Demos/PivotGrid/FieldPanel/Angular/app/app.component.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/PivotGrid/FieldPanel/React/styles.css b/apps/demos/Demos/PivotGrid/FieldPanel/React/styles.css
index 7aa4436eb230..4b3f71465258 100644
--- a/apps/demos/Demos/PivotGrid/FieldPanel/React/styles.css
+++ b/apps/demos/Demos/PivotGrid/FieldPanel/React/styles.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/PivotGrid/FieldPanel/ReactJs/styles.css b/apps/demos/Demos/PivotGrid/FieldPanel/ReactJs/styles.css
index 7aa4436eb230..4b3f71465258 100644
--- a/apps/demos/Demos/PivotGrid/FieldPanel/ReactJs/styles.css
+++ b/apps/demos/Demos/PivotGrid/FieldPanel/ReactJs/styles.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/PivotGrid/FieldPanel/Vue/App.vue b/apps/demos/Demos/PivotGrid/FieldPanel/Vue/App.vue
index 158f6be43ceb..634ae60bde8e 100644
--- a/apps/demos/Demos/PivotGrid/FieldPanel/Vue/App.vue
+++ b/apps/demos/Demos/PivotGrid/FieldPanel/Vue/App.vue
@@ -173,7 +173,7 @@ function onContextMenuPreparing(e: DxPivotGridTypes.ContextMenuPreparingEvent) {
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/PivotGrid/FieldPanel/jQuery/styles.css b/apps/demos/Demos/PivotGrid/FieldPanel/jQuery/styles.css
index 7aa4436eb230..4b3f71465258 100644
--- a/apps/demos/Demos/PivotGrid/FieldPanel/jQuery/styles.css
+++ b/apps/demos/Demos/PivotGrid/FieldPanel/jQuery/styles.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/PivotGrid/Filtering/Angular/app/app.component.css b/apps/demos/Demos/PivotGrid/Filtering/Angular/app/app.component.css
index a31b278f6315..fb4b9322d0fa 100644
--- a/apps/demos/Demos/PivotGrid/Filtering/Angular/app/app.component.css
+++ b/apps/demos/Demos/PivotGrid/Filtering/Angular/app/app.component.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/PivotGrid/Filtering/React/styles.css b/apps/demos/Demos/PivotGrid/Filtering/React/styles.css
index 780bd4d549ac..f86a093598f3 100644
--- a/apps/demos/Demos/PivotGrid/Filtering/React/styles.css
+++ b/apps/demos/Demos/PivotGrid/Filtering/React/styles.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/PivotGrid/Filtering/ReactJs/styles.css b/apps/demos/Demos/PivotGrid/Filtering/ReactJs/styles.css
index 780bd4d549ac..f86a093598f3 100644
--- a/apps/demos/Demos/PivotGrid/Filtering/ReactJs/styles.css
+++ b/apps/demos/Demos/PivotGrid/Filtering/ReactJs/styles.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/PivotGrid/Filtering/Vue/App.vue b/apps/demos/Demos/PivotGrid/Filtering/Vue/App.vue
index bd012d805e4b..b4662604b60e 100644
--- a/apps/demos/Demos/PivotGrid/Filtering/Vue/App.vue
+++ b/apps/demos/Demos/PivotGrid/Filtering/Vue/App.vue
@@ -85,7 +85,7 @@ const dataSource = new PivotGridDataSource({
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/PivotGrid/Filtering/jQuery/styles.css b/apps/demos/Demos/PivotGrid/Filtering/jQuery/styles.css
index 780bd4d549ac..f86a093598f3 100644
--- a/apps/demos/Demos/PivotGrid/Filtering/jQuery/styles.css
+++ b/apps/demos/Demos/PivotGrid/Filtering/jQuery/styles.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/Angular/app/app.component.css b/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/Angular/app/app.component.css
index 1b80c39ea6a2..795d9acad052 100644
--- a/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/Angular/app/app.component.css
+++ b/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/Angular/app/app.component.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/React/styles.css b/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/React/styles.css
index cd39970db24a..b1be2d6ac061 100644
--- a/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/React/styles.css
+++ b/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/React/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/ReactJs/styles.css b/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/ReactJs/styles.css
index cd39970db24a..b1be2d6ac061 100644
--- a/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/ReactJs/styles.css
+++ b/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/ReactJs/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/Vue/App.vue b/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/Vue/App.vue
index f0b1eeb7deda..d5c2b656ef98 100644
--- a/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/Vue/App.vue
+++ b/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/Vue/App.vue
@@ -69,7 +69,7 @@ const applyChangesMode = ref(applyChangesModes[0]);
 <style>
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/jQuery/styles.css b/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/jQuery/styles.css
index 86aa9600d565..32d20c5d9c1a 100644
--- a/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/jQuery/styles.css
+++ b/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/jQuery/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/Angular/app/app.component.css b/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/Angular/app/app.component.css
index bc056842b907..ec8d704a0a79 100644
--- a/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/Angular/app/app.component.css
+++ b/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/Angular/app/app.component.css
@@ -5,7 +5,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   top: 29px;
   bottom: 5px;
diff --git a/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/React/styles.css b/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/React/styles.css
index 0ff80c845e06..9415b9261e26 100644
--- a/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/React/styles.css
+++ b/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/React/styles.css
@@ -5,7 +5,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   top: 29px;
   bottom: 5px;
diff --git a/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/ReactJs/styles.css b/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/ReactJs/styles.css
index 0ff80c845e06..9415b9261e26 100644
--- a/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/ReactJs/styles.css
+++ b/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/ReactJs/styles.css
@@ -5,7 +5,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   top: 29px;
   bottom: 5px;
diff --git a/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/Vue/App.vue b/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/Vue/App.vue
index 46607d5db05d..f9510eea5b26 100644
--- a/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/Vue/App.vue
+++ b/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/Vue/App.vue
@@ -152,7 +152,7 @@ function cancelClick() {
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   top: 29px;
   bottom: 5px;
diff --git a/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/jQuery/styles.css b/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/jQuery/styles.css
index 2a9ed7ec55b7..0cdbb1b739e8 100644
--- a/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/jQuery/styles.css
+++ b/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/jQuery/styles.css
@@ -16,7 +16,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   top: 29px;
   bottom: 3px;
diff --git a/apps/demos/Demos/ProgressBar/Overview/Angular/app/app.component.css b/apps/demos/Demos/ProgressBar/Overview/Angular/app/app.component.css
index 678e69ed92f0..d1849c9d351d 100644
--- a/apps/demos/Demos/ProgressBar/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/ProgressBar/Overview/Angular/app/app.component.css
@@ -13,5 +13,5 @@
 }
 
 ::ng-deep .complete .dx-progressbar-range {
-  background-color: green;
+  background-color: var(--dxds-color-bg-success, green);
 }
diff --git a/apps/demos/Demos/ProgressBar/Overview/React/styles.css b/apps/demos/Demos/ProgressBar/Overview/React/styles.css
index fc17d76af3e6..169bcf33d405 100644
--- a/apps/demos/Demos/ProgressBar/Overview/React/styles.css
+++ b/apps/demos/Demos/ProgressBar/Overview/React/styles.css
@@ -13,5 +13,5 @@
 }
 
 .complete .dx-progressbar-range {
-  background-color: green;
+  background-color: var(--dxds-color-bg-success, green);
 }
diff --git a/apps/demos/Demos/ProgressBar/Overview/ReactJs/styles.css b/apps/demos/Demos/ProgressBar/Overview/ReactJs/styles.css
index fc17d76af3e6..169bcf33d405 100644
--- a/apps/demos/Demos/ProgressBar/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/ProgressBar/Overview/ReactJs/styles.css
@@ -13,5 +13,5 @@
 }
 
 .complete .dx-progressbar-range {
-  background-color: green;
+  background-color: var(--dxds-color-bg-success, green);
 }
diff --git a/apps/demos/Demos/ProgressBar/Overview/Vue/App.vue b/apps/demos/Demos/ProgressBar/Overview/Vue/App.vue
index 19d63cf2fa9c..9ab18964f90d 100644
--- a/apps/demos/Demos/ProgressBar/Overview/Vue/App.vue
+++ b/apps/demos/Demos/ProgressBar/Overview/Vue/App.vue
@@ -77,6 +77,6 @@ function timer() {
 }
 
 .complete .dx-progressbar-range {
-  background-color: green;
+  background-color: var(--dxds-color-bg-success, green);
 }
 </style>
diff --git a/apps/demos/Demos/ProgressBar/Overview/jQuery/styles.css b/apps/demos/Demos/ProgressBar/Overview/jQuery/styles.css
index 2365a7eb4108..497c204dfb19 100644
--- a/apps/demos/Demos/ProgressBar/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/ProgressBar/Overview/jQuery/styles.css
@@ -13,5 +13,5 @@
 }
 
 .complete .dx-progressbar-range {
-  background-color: green;
+  background-color: var(--dxds-color-bg-success, green);
 }
diff --git a/apps/demos/Demos/RadioGroup/Overview/Angular/app/app.component.css b/apps/demos/Demos/RadioGroup/Overview/Angular/app/app.component.css
index 30e7015e37ff..44ae775e227f 100644
--- a/apps/demos/Demos/RadioGroup/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/RadioGroup/Overview/Angular/app/app.component.css
@@ -1,17 +1,17 @@
 ::ng-deep .low .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot {
-  background: gray;
+  background: var(--dxds-color-content-subtler, gray);
 }
 
 ::ng-deep .normal .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot {
-  background: green;
+  background: var(--dxds-color-content-success, green);
 }
 
 ::ng-deep .urgent .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot {
-  background: orange;
+  background: var(--dxds-color-content-warning, orange);
 }
 
 ::ng-deep .high .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot {
-  background: red;
+  background: var(--dxds-color-content-danger, red);
 }
 
 ::ng-deep #radio-group-with-selection {
diff --git a/apps/demos/Demos/RadioGroup/Overview/React/styles.css b/apps/demos/Demos/RadioGroup/Overview/React/styles.css
index eb3c6236ff6d..0a2f35482306 100644
--- a/apps/demos/Demos/RadioGroup/Overview/React/styles.css
+++ b/apps/demos/Demos/RadioGroup/Overview/React/styles.css
@@ -1,17 +1,17 @@
 .low .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot {
-  background: gray;
+  background: var(--dxds-color-content-subtler, gray);
 }
 
 .normal .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot {
-  background: green;
+  background: var(--dxds-color-content-success, green);
 }
 
 .urgent .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot {
-  background: orange;
+  background: var(--dxds-color-content-warning, orange);
 }
 
 .high .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot {
-  background: red;
+  background: var(--dxds-color-content-danger, red);
 }
 
 #radio-group-with-selection {
diff --git a/apps/demos/Demos/RadioGroup/Overview/ReactJs/styles.css b/apps/demos/Demos/RadioGroup/Overview/ReactJs/styles.css
index eb3c6236ff6d..0a2f35482306 100644
--- a/apps/demos/Demos/RadioGroup/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/RadioGroup/Overview/ReactJs/styles.css
@@ -1,17 +1,17 @@
 .low .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot {
-  background: gray;
+  background: var(--dxds-color-content-subtler, gray);
 }
 
 .normal .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot {
-  background: green;
+  background: var(--dxds-color-content-success, green);
 }
 
 .urgent .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot {
-  background: orange;
+  background: var(--dxds-color-content-warning, orange);
 }
 
 .high .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot {
-  background: red;
+  background: var(--dxds-color-content-danger, red);
 }
 
 #radio-group-with-selection {
diff --git a/apps/demos/Demos/RadioGroup/Overview/Vue/styles.css b/apps/demos/Demos/RadioGroup/Overview/Vue/styles.css
index fcb2f4524e98..a42ae343bfa5 100644
--- a/apps/demos/Demos/RadioGroup/Overview/Vue/styles.css
+++ b/apps/demos/Demos/RadioGroup/Overview/Vue/styles.css
@@ -1,17 +1,17 @@
 .low .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot {
-  background: gray;
+  background: var(--dxds-color-content-subtler, gray);
 }
 
 .normal .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot {
-  background: green;
+  background: var(--dxds-color-content-success, green);
 }
 
 .urgent .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot {
-  background: orange;
+  background: var(--dxds-color-content-warning, orange);
 }
 
 .high .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot {
-  background: red;
+  background: var(--dxds-color-content-danger, red);
 }
 
 #radio-group-with-selection {
diff --git a/apps/demos/Demos/RadioGroup/Overview/jQuery/styles.css b/apps/demos/Demos/RadioGroup/Overview/jQuery/styles.css
index eb3c6236ff6d..0a2f35482306 100644
--- a/apps/demos/Demos/RadioGroup/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/RadioGroup/Overview/jQuery/styles.css
@@ -1,17 +1,17 @@
 .low .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot {
-  background: gray;
+  background: var(--dxds-color-content-subtler, gray);
 }
 
 .normal .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot {
-  background: green;
+  background: var(--dxds-color-content-success, green);
 }
 
 .urgent .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot {
-  background: orange;
+  background: var(--dxds-color-content-warning, orange);
 }
 
 .high .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot {
-  background: red;
+  background: var(--dxds-color-content-danger, red);
 }
 
 #radio-group-with-selection {
diff --git a/apps/demos/Demos/RangeSelector/Calculation/Angular/app/app.component.css b/apps/demos/Demos/RangeSelector/Calculation/Angular/app/app.component.css
index 5479255ecba2..9c4e3cbd691c 100644
--- a/apps/demos/Demos/RangeSelector/Calculation/Angular/app/app.component.css
+++ b/apps/demos/Demos/RangeSelector/Calculation/Angular/app/app.component.css
@@ -8,7 +8,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   bottom: 0;
   left: 0;
diff --git a/apps/demos/Demos/RangeSelector/Calculation/React/styles.css b/apps/demos/Demos/RangeSelector/Calculation/React/styles.css
index 771fb6a02f2a..fdde82a1d177 100644
--- a/apps/demos/Demos/RangeSelector/Calculation/React/styles.css
+++ b/apps/demos/Demos/RangeSelector/Calculation/React/styles.css
@@ -8,7 +8,7 @@ h2 {
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   bottom: 0;
   left: 0;
diff --git a/apps/demos/Demos/RangeSelector/Calculation/ReactJs/styles.css b/apps/demos/Demos/RangeSelector/Calculation/ReactJs/styles.css
index 771fb6a02f2a..fdde82a1d177 100644
--- a/apps/demos/Demos/RangeSelector/Calculation/ReactJs/styles.css
+++ b/apps/demos/Demos/RangeSelector/Calculation/ReactJs/styles.css
@@ -8,7 +8,7 @@ h2 {
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   bottom: 0;
   left: 0;
diff --git a/apps/demos/Demos/RangeSelector/Calculation/Vue/App.vue b/apps/demos/Demos/RangeSelector/Calculation/Vue/App.vue
index 70c083d53e43..1922c14eba14 100644
--- a/apps/demos/Demos/RangeSelector/Calculation/Vue/App.vue
+++ b/apps/demos/Demos/RangeSelector/Calculation/Vue/App.vue
@@ -82,7 +82,7 @@ h2 {
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   bottom: 0;
   left: 0;
diff --git a/apps/demos/Demos/RangeSelector/Calculation/jQuery/styles.css b/apps/demos/Demos/RangeSelector/Calculation/jQuery/styles.css
index 771fb6a02f2a..fdde82a1d177 100644
--- a/apps/demos/Demos/RangeSelector/Calculation/jQuery/styles.css
+++ b/apps/demos/Demos/RangeSelector/Calculation/jQuery/styles.css
@@ -8,7 +8,7 @@ h2 {
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   bottom: 0;
   left: 0;
diff --git a/apps/demos/Demos/Resizable/Overview/Angular/app/app.component.css b/apps/demos/Demos/Resizable/Overview/Angular/app/app.component.css
index fa101c9159ce..fee9b98b566d 100644
--- a/apps/demos/Demos/Resizable/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/Resizable/Overview/Angular/app/app.component.css
@@ -14,7 +14,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   right: 0;
   top: 0;
@@ -37,7 +37,7 @@
 }
 
 #grid {
-  border: 1px solid black;
+  border: 1px solid var(--dxds-color-border-static-dark, #000);
 }
 
 .no-left-handle .dx-resizable-handle-top,
@@ -77,19 +77,19 @@
 }
 
 .dx-resizable-handle-right {
-  border-right: 1px dotted #999;
+  border-right: 1px dotted var(--dxds-color-border, #999);
 }
 
 .dx-resizable-handle-top {
-  border-top: 1px dotted #999;
+  border-top: 1px dotted var(--dxds-color-border, #999);
 }
 
 .dx-resizable-handle-left {
-  border-left: 1px dotted #999;
+  border-left: 1px dotted var(--dxds-color-border, #999);
 }
 
 .dx-resizable-handle-bottom {
-  border-bottom: 1px dotted #999;
+  border-bottom: 1px dotted var(--dxds-color-border, #999);
 }
 
 .dx-resizable-handle::after {
@@ -99,8 +99,8 @@
   height: 9px;
   border: none;
   border-radius: 50%;
-  background-color: #fff;
-  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.24);
+  background-color: var(--dxds-color-bg-static-light, #fff);
+  box-shadow: var(--dxds-box-shadow-sm, 0 2px 6px 0 rgba(0, 0, 0, 0.24));
 }
 
 .dx-resizable-handle-right::after {
diff --git a/apps/demos/Demos/Resizable/Overview/React/styles.css b/apps/demos/Demos/Resizable/Overview/React/styles.css
index fa101c9159ce..fee9b98b566d 100644
--- a/apps/demos/Demos/Resizable/Overview/React/styles.css
+++ b/apps/demos/Demos/Resizable/Overview/React/styles.css
@@ -14,7 +14,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   right: 0;
   top: 0;
@@ -37,7 +37,7 @@
 }
 
 #grid {
-  border: 1px solid black;
+  border: 1px solid var(--dxds-color-border-static-dark, #000);
 }
 
 .no-left-handle .dx-resizable-handle-top,
@@ -77,19 +77,19 @@
 }
 
 .dx-resizable-handle-right {
-  border-right: 1px dotted #999;
+  border-right: 1px dotted var(--dxds-color-border, #999);
 }
 
 .dx-resizable-handle-top {
-  border-top: 1px dotted #999;
+  border-top: 1px dotted var(--dxds-color-border, #999);
 }
 
 .dx-resizable-handle-left {
-  border-left: 1px dotted #999;
+  border-left: 1px dotted var(--dxds-color-border, #999);
 }
 
 .dx-resizable-handle-bottom {
-  border-bottom: 1px dotted #999;
+  border-bottom: 1px dotted var(--dxds-color-border, #999);
 }
 
 .dx-resizable-handle::after {
@@ -99,8 +99,8 @@
   height: 9px;
   border: none;
   border-radius: 50%;
-  background-color: #fff;
-  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.24);
+  background-color: var(--dxds-color-bg-static-light, #fff);
+  box-shadow: var(--dxds-box-shadow-sm, 0 2px 6px 0 rgba(0, 0, 0, 0.24));
 }
 
 .dx-resizable-handle-right::after {
diff --git a/apps/demos/Demos/Resizable/Overview/ReactJs/styles.css b/apps/demos/Demos/Resizable/Overview/ReactJs/styles.css
index fa101c9159ce..fee9b98b566d 100644
--- a/apps/demos/Demos/Resizable/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/Resizable/Overview/ReactJs/styles.css
@@ -14,7 +14,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   right: 0;
   top: 0;
@@ -37,7 +37,7 @@
 }
 
 #grid {
-  border: 1px solid black;
+  border: 1px solid var(--dxds-color-border-static-dark, #000);
 }
 
 .no-left-handle .dx-resizable-handle-top,
@@ -77,19 +77,19 @@
 }
 
 .dx-resizable-handle-right {
-  border-right: 1px dotted #999;
+  border-right: 1px dotted var(--dxds-color-border, #999);
 }
 
 .dx-resizable-handle-top {
-  border-top: 1px dotted #999;
+  border-top: 1px dotted var(--dxds-color-border, #999);
 }
 
 .dx-resizable-handle-left {
-  border-left: 1px dotted #999;
+  border-left: 1px dotted var(--dxds-color-border, #999);
 }
 
 .dx-resizable-handle-bottom {
-  border-bottom: 1px dotted #999;
+  border-bottom: 1px dotted var(--dxds-color-border, #999);
 }
 
 .dx-resizable-handle::after {
@@ -99,8 +99,8 @@
   height: 9px;
   border: none;
   border-radius: 50%;
-  background-color: #fff;
-  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.24);
+  background-color: var(--dxds-color-bg-static-light, #fff);
+  box-shadow: var(--dxds-box-shadow-sm, 0 2px 6px 0 rgba(0, 0, 0, 0.24));
 }
 
 .dx-resizable-handle-right::after {
diff --git a/apps/demos/Demos/Resizable/Overview/Vue/App.vue b/apps/demos/Demos/Resizable/Overview/Vue/App.vue
index d27c009d8e96..a15cdfb77a91 100644
--- a/apps/demos/Demos/Resizable/Overview/Vue/App.vue
+++ b/apps/demos/Demos/Resizable/Overview/Vue/App.vue
@@ -108,7 +108,7 @@ const resizableClasses = computed(() => ({
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   right: 0;
   top: 0;
@@ -131,7 +131,7 @@ const resizableClasses = computed(() => ({
 }
 
 #grid {
-  border: 1px solid black;
+  border: 1px solid var(--dxds-color-border-static-dark, #000);
 }
 
 .no-left-handle .dx-resizable-handle-top,
@@ -171,19 +171,19 @@ const resizableClasses = computed(() => ({
 }
 
 .dx-resizable-handle-right {
-  border-right: 1px dotted #999;
+  border-right: 1px dotted var(--dxds-color-border, #999);
 }
 
 .dx-resizable-handle-top {
-  border-top: 1px dotted #999;
+  border-top: 1px dotted var(--dxds-color-border, #999);
 }
 
 .dx-resizable-handle-left {
-  border-left: 1px dotted #999;
+  border-left: 1px dotted var(--dxds-color-border, #999);
 }
 
 .dx-resizable-handle-bottom {
-  border-bottom: 1px dotted #999;
+  border-bottom: 1px dotted var(--dxds-color-border, #999);
 }
 
 .dx-resizable-handle::after {
@@ -193,8 +193,8 @@ const resizableClasses = computed(() => ({
   height: 9px;
   border: none;
   border-radius: 50%;
-  background-color: #fff;
-  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.24);
+  background-color: var(--dxds-color-bg-static-light, #fff);
+  box-shadow: var(--dxds-box-shadow-sm, 0 2px 6px 0 rgba(0, 0, 0, 0.24));
 }
 
 .dx-resizable-handle-right::after {
diff --git a/apps/demos/Demos/Resizable/Overview/jQuery/styles.css b/apps/demos/Demos/Resizable/Overview/jQuery/styles.css
index fa101c9159ce..fee9b98b566d 100644
--- a/apps/demos/Demos/Resizable/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/Resizable/Overview/jQuery/styles.css
@@ -14,7 +14,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   right: 0;
   top: 0;
@@ -37,7 +37,7 @@
 }
 
 #grid {
-  border: 1px solid black;
+  border: 1px solid var(--dxds-color-border-static-dark, #000);
 }
 
 .no-left-handle .dx-resizable-handle-top,
@@ -77,19 +77,19 @@
 }
 
 .dx-resizable-handle-right {
-  border-right: 1px dotted #999;
+  border-right: 1px dotted var(--dxds-color-border, #999);
 }
 
 .dx-resizable-handle-top {
-  border-top: 1px dotted #999;
+  border-top: 1px dotted var(--dxds-color-border, #999);
 }
 
 .dx-resizable-handle-left {
-  border-left: 1px dotted #999;
+  border-left: 1px dotted var(--dxds-color-border, #999);
 }
 
 .dx-resizable-handle-bottom {
-  border-bottom: 1px dotted #999;
+  border-bottom: 1px dotted var(--dxds-color-border, #999);
 }
 
 .dx-resizable-handle::after {
@@ -99,8 +99,8 @@
   height: 9px;
   border: none;
   border-radius: 50%;
-  background-color: #fff;
-  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.24);
+  background-color: var(--dxds-color-bg-static-light, #fff);
+  box-shadow: var(--dxds-box-shadow-sm, 0 2px 6px 0 rgba(0, 0, 0, 0.24));
 }
 
 .dx-resizable-handle-right::after {
diff --git a/apps/demos/Demos/ResponsiveBox/Overview/Angular/app/app.component.css b/apps/demos/Demos/ResponsiveBox/Overview/Angular/app/app.component.css
index f7de14c6c659..b1173001fe8f 100644
--- a/apps/demos/Demos/ResponsiveBox/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/ResponsiveBox/Overview/Angular/app/app.component.css
@@ -5,24 +5,24 @@
 }
 
 ::ng-deep #page .header {
-  background-color: #C6B1DE;
+  background-color: var(--dxds-color-bg-purple-subtle, #C6B1DE);
   text-align: center;
 }
 
 ::ng-deep #page .content {
-  background-color: #EDBBE7;
+  background-color: var(--dxds-color-bg-pink-subtle, #EDBBE7);
 }
 
 ::ng-deep #page .left-side-bar {
-  background-color: #F9E2AE;
+  background-color: var(--dxds-color-bg-yellow-subtle, #F9E2AE);
 }
 
 ::ng-deep #page .right-side-bar {
-  background-color: #9FD89F;
+  background-color: var(--dxds-color-bg-green-subtle, #9FD89F);
 }
 
 ::ng-deep #page .footer {
-  background-color: #B4D6FA;
+  background-color: var(--dxds-color-bg-blue-subtle, #B4D6FA);
 }
 
 ::ng-deep .item {
@@ -33,5 +33,5 @@
   font-size: 20px;
   padding-top: 10px;
   text-align: center;
-  color: #000;
+  color: var(--dxds-color-content, #000);
 }
diff --git a/apps/demos/Demos/ResponsiveBox/Overview/React/styles.css b/apps/demos/Demos/ResponsiveBox/Overview/React/styles.css
index 2aca99d2c103..10030b7b8bc3 100644
--- a/apps/demos/Demos/ResponsiveBox/Overview/React/styles.css
+++ b/apps/demos/Demos/ResponsiveBox/Overview/React/styles.css
@@ -6,24 +6,24 @@
 }
 
 .header {
-  background-color: #C6B1DE;
+  background-color: var(--dxds-color-bg-purple-subtle, #C6B1DE);
   text-align: center;
 }
 
 .content {
-  background-color: #EDBBE7;
+  background-color: var(--dxds-color-bg-pink-subtle, #EDBBE7);
 }
 
 .left-side-bar {
-  background-color: #F9E2AE;
+  background-color: var(--dxds-color-bg-yellow-subtle, #F9E2AE);
 }
 
 .right-side-bar {
-  background-color: #9FD89F;
+  background-color: var(--dxds-color-bg-green-subtle, #9FD89F);
 }
 
 .footer {
-  background-color: #B4D6FA;
+  background-color: var(--dxds-color-bg-blue-subtle, #B4D6FA);
 }
 
 .item {
@@ -34,5 +34,5 @@
   font-size: 20px;
   padding-top: 10px;
   text-align: center;
-  color: #000;
+  color: var(--dxds-color-content, #000);
 }
diff --git a/apps/demos/Demos/ResponsiveBox/Overview/ReactJs/styles.css b/apps/demos/Demos/ResponsiveBox/Overview/ReactJs/styles.css
index 2aca99d2c103..10030b7b8bc3 100644
--- a/apps/demos/Demos/ResponsiveBox/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/ResponsiveBox/Overview/ReactJs/styles.css
@@ -6,24 +6,24 @@
 }
 
 .header {
-  background-color: #C6B1DE;
+  background-color: var(--dxds-color-bg-purple-subtle, #C6B1DE);
   text-align: center;
 }
 
 .content {
-  background-color: #EDBBE7;
+  background-color: var(--dxds-color-bg-pink-subtle, #EDBBE7);
 }
 
 .left-side-bar {
-  background-color: #F9E2AE;
+  background-color: var(--dxds-color-bg-yellow-subtle, #F9E2AE);
 }
 
 .right-side-bar {
-  background-color: #9FD89F;
+  background-color: var(--dxds-color-bg-green-subtle, #9FD89F);
 }
 
 .footer {
-  background-color: #B4D6FA;
+  background-color: var(--dxds-color-bg-blue-subtle, #B4D6FA);
 }
 
 .item {
@@ -34,5 +34,5 @@
   font-size: 20px;
   padding-top: 10px;
   text-align: center;
-  color: #000;
+  color: var(--dxds-color-content, #000);
 }
diff --git a/apps/demos/Demos/ResponsiveBox/Overview/Vue/App.vue b/apps/demos/Demos/ResponsiveBox/Overview/Vue/App.vue
index d5938408e37d..94f7802b63fc 100644
--- a/apps/demos/Demos/ResponsiveBox/Overview/Vue/App.vue
+++ b/apps/demos/Demos/ResponsiveBox/Overview/Vue/App.vue
@@ -114,24 +114,24 @@ const screen = ((width: number) => ((width < 700) ? 'sm' : 'lg')) as unknown as
 }
 
 .header {
-  background-color: #C6B1DE;
+  background-color: var(--dxds-color-bg-purple-subtle, #C6B1DE);
   text-align: center;
 }
 
 .content {
-  background-color: #EDBBE7;
+  background-color: var(--dxds-color-bg-pink-subtle, #EDBBE7);
 }
 
 .left-side-bar {
-  background-color: #F9E2AE;
+  background-color: var(--dxds-color-bg-yellow-subtle, #F9E2AE);
 }
 
 .right-side-bar {
-  background-color: #9FD89F;
+  background-color: var(--dxds-color-bg-green-subtle, #9FD89F);
 }
 
 .footer {
-  background-color: #B4D6FA;
+  background-color: var(--dxds-color-bg-blue-subtle, #B4D6FA);
 }
 
 .item {
@@ -142,6 +142,6 @@ const screen = ((width: number) => ((width < 700) ? 'sm' : 'lg')) as unknown as
   font-size: 20px;
   padding-top: 10px;
   text-align: center;
-  color: #000;
+  color: var(--dxds-color-content, #000);
 }
 </style>
diff --git a/apps/demos/Demos/ResponsiveBox/Overview/jQuery/styles.css b/apps/demos/Demos/ResponsiveBox/Overview/jQuery/styles.css
index 4843cf529992..b57ad1db1587 100644
--- a/apps/demos/Demos/ResponsiveBox/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/ResponsiveBox/Overview/jQuery/styles.css
@@ -5,24 +5,24 @@
 }
 
 #page .header {
-  background-color: #C6B1DE;
+  background-color: var(--dxds-color-bg-purple-subtle, #C6B1DE);
   text-align: center;
 }
 
 #page .content {
-  background-color: #EDBBE7;
+  background-color: var(--dxds-color-bg-pink-subtle, #EDBBE7);
 }
 
 #page .left-side-bar {
-  background-color: #F9E2AE;
+  background-color: var(--dxds-color-bg-yellow-subtle, #F9E2AE);
 }
 
 #page .right-side-bar {
-  background-color: #9FD89F;
+  background-color: var(--dxds-color-bg-green-subtle, #9FD89F);
 }
 
 #page .footer {
-  background-color: #B4D6FA;
+  background-color: var(--dxds-color-bg-blue-subtle, #B4D6FA);
 }
 
 .item {
@@ -33,5 +33,5 @@
   font-size: 20px;
   padding-top: 10px;
   text-align: center;
-  color: #000;
+  color: var(--dxds-color-content, #000);
 }
diff --git a/apps/demos/Demos/Scheduler/AllDayPanelMode/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/AllDayPanelMode/Angular/app/app.component.css
index 636ad495a9d8..4855c52987b1 100644
--- a/apps/demos/Demos/Scheduler/AllDayPanelMode/Angular/app/app.component.css
+++ b/apps/demos/Demos/Scheduler/AllDayPanelMode/Angular/app/app.component.css
@@ -1,5 +1,5 @@
 .options {
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
   display: flex;
   align-items: flex-start;
diff --git a/apps/demos/Demos/Scheduler/AllDayPanelMode/React/styles.css b/apps/demos/Demos/Scheduler/AllDayPanelMode/React/styles.css
index 636ad495a9d8..4855c52987b1 100644
--- a/apps/demos/Demos/Scheduler/AllDayPanelMode/React/styles.css
+++ b/apps/demos/Demos/Scheduler/AllDayPanelMode/React/styles.css
@@ -1,5 +1,5 @@
 .options {
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
   display: flex;
   align-items: flex-start;
diff --git a/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/styles.css b/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/styles.css
index 636ad495a9d8..4855c52987b1 100644
--- a/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/styles.css
+++ b/apps/demos/Demos/Scheduler/AllDayPanelMode/ReactJs/styles.css
@@ -1,5 +1,5 @@
 .options {
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
   display: flex;
   align-items: flex-start;
diff --git a/apps/demos/Demos/Scheduler/AllDayPanelMode/Vue/styles.css b/apps/demos/Demos/Scheduler/AllDayPanelMode/Vue/styles.css
index 636ad495a9d8..4855c52987b1 100644
--- a/apps/demos/Demos/Scheduler/AllDayPanelMode/Vue/styles.css
+++ b/apps/demos/Demos/Scheduler/AllDayPanelMode/Vue/styles.css
@@ -1,5 +1,5 @@
 .options {
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
   display: flex;
   align-items: flex-start;
diff --git a/apps/demos/Demos/Scheduler/AllDayPanelMode/jQuery/styles.css b/apps/demos/Demos/Scheduler/AllDayPanelMode/jQuery/styles.css
index 636ad495a9d8..4855c52987b1 100644
--- a/apps/demos/Demos/Scheduler/AllDayPanelMode/jQuery/styles.css
+++ b/apps/demos/Demos/Scheduler/AllDayPanelMode/jQuery/styles.css
@@ -1,5 +1,5 @@
 .options {
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
   display: flex;
   align-items: flex-start;
diff --git a/apps/demos/Demos/Scheduler/ContextMenu/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/ContextMenu/Angular/app/app.component.css
index 5d5acf5611b7..d4ae923d2412 100644
--- a/apps/demos/Demos/Scheduler/ContextMenu/Angular/app/app.component.css
+++ b/apps/demos/Demos/Scheduler/ContextMenu/Angular/app/app.component.css
@@ -2,10 +2,13 @@
   text-align: center;
   float: left;
   margin-right: 12px;
-  color: white;
   width: 18px;
   height: 18px;
   font-size: 19.5px;
   border-radius: 18px;
   margin-top: 2px;
 }
+
+::ng-deep .dx-scheduler-appointment-title {
+  color: var(--dxds-color-content-static-dark, unset);
+}
diff --git a/apps/demos/Demos/Scheduler/ContextMenu/React/styles.css b/apps/demos/Demos/Scheduler/ContextMenu/React/styles.css
index 41fb881541dd..1c3d5315138b 100644
--- a/apps/demos/Demos/Scheduler/ContextMenu/React/styles.css
+++ b/apps/demos/Demos/Scheduler/ContextMenu/React/styles.css
@@ -2,10 +2,13 @@
   text-align: center;
   float: left;
   margin-right: 12px;
-  color: white;
   width: 18px;
   height: 18px;
   font-size: 19.5px;
   border-radius: 18px;
   margin-top: 2px;
 }
+
+.dx-scheduler-appointment-title {
+  color: var(--dxds-color-content-static-dark, unset);
+}
diff --git a/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/styles.css b/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/styles.css
index 41fb881541dd..1c3d5315138b 100644
--- a/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/styles.css
+++ b/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/styles.css
@@ -2,10 +2,13 @@
   text-align: center;
   float: left;
   margin-right: 12px;
-  color: white;
   width: 18px;
   height: 18px;
   font-size: 19.5px;
   border-radius: 18px;
   margin-top: 2px;
 }
+
+.dx-scheduler-appointment-title {
+  color: var(--dxds-color-content-static-dark, unset);
+}
diff --git a/apps/demos/Demos/Scheduler/ContextMenu/Vue/App.vue b/apps/demos/Demos/Scheduler/ContextMenu/Vue/App.vue
index 144de8b2a47e..f60b010af0f2 100644
--- a/apps/demos/Demos/Scheduler/ContextMenu/Vue/App.vue
+++ b/apps/demos/Demos/Scheduler/ContextMenu/Vue/App.vue
@@ -159,3 +159,9 @@ const getCellContextMenuItems = (
 };
 
 </script>
+
+<style>
+.dx-scheduler-appointment-title {
+  color: var(--dxds-color-content-static-dark, unset);
+}
+</style>
diff --git a/apps/demos/Demos/Scheduler/ContextMenu/Vue/ItemTemplate.vue b/apps/demos/Demos/Scheduler/ContextMenu/Vue/ItemTemplate.vue
index 73d53e97738f..5871f9da8d54 100644
--- a/apps/demos/Demos/Scheduler/ContextMenu/Vue/ItemTemplate.vue
+++ b/apps/demos/Demos/Scheduler/ContextMenu/Vue/ItemTemplate.vue
@@ -28,7 +28,6 @@ const styleObject = ref({ backgroundColor: props.itemData.color });
     text-align: center;
     float: left;
     margin-right: 12px;
-    color: white;
     width: 18px;
     height: 18px;
     font-size: 19.5px;
diff --git a/apps/demos/Demos/Scheduler/ContextMenu/jQuery/styles.css b/apps/demos/Demos/Scheduler/ContextMenu/jQuery/styles.css
index 41fb881541dd..1c3d5315138b 100644
--- a/apps/demos/Demos/Scheduler/ContextMenu/jQuery/styles.css
+++ b/apps/demos/Demos/Scheduler/ContextMenu/jQuery/styles.css
@@ -2,10 +2,13 @@
   text-align: center;
   float: left;
   margin-right: 12px;
-  color: white;
   width: 18px;
   height: 18px;
   font-size: 19.5px;
   border-radius: 18px;
   margin-top: 2px;
 }
+
+.dx-scheduler-appointment-title {
+  color: var(--dxds-color-content-static-dark, unset);
+}
diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Angular/app/app.component.css
index 75eb7273ef59..3a6943ab563b 100644
--- a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Angular/app/app.component.css
+++ b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Angular/app/app.component.css
@@ -3,9 +3,9 @@
 }
 
 ::ng-deep .dx-scheduler-appointment {
-  color: #000;
+  color: var(--dxds-color-content, #000);
   font-weight: 500;
-  background-color: #e4e4e4;
+  background-color: var(--dxds-color-bg-low, #e4e4e4);
 }
 
 ::ng-deep .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content {
@@ -13,7 +13,7 @@
 }
 
 .options {
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
   display: flex;
   align-items: flex-start;
diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/React/styles.css b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/React/styles.css
index f9853cc68495..93e6de17763d 100644
--- a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/React/styles.css
+++ b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/React/styles.css
@@ -3,9 +3,9 @@
 }
 
 .dx-scheduler-appointment {
-  color: #000;
+  color: var(--dxds-color-content, #000);
   font-weight: 500;
-  background-color: #e4e4e4;
+  background-color: var(--dxds-color-bg-low, #e4e4e4);
 }
 
 .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content {
@@ -13,7 +13,7 @@
 }
 
 .options {
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
   display: flex;
   align-items: flex-start;
diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/styles.css b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/styles.css
index f9853cc68495..93e6de17763d 100644
--- a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/styles.css
+++ b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/styles.css
@@ -3,9 +3,9 @@
 }
 
 .dx-scheduler-appointment {
-  color: #000;
+  color: var(--dxds-color-content, #000);
   font-weight: 500;
-  background-color: #e4e4e4;
+  background-color: var(--dxds-color-bg-low, #e4e4e4);
 }
 
 .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content {
@@ -13,7 +13,7 @@
 }
 
 .options {
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
   display: flex;
   align-items: flex-start;
diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Vue/App.vue b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Vue/App.vue
index 283e18a558d3..a08d6bbfdb75 100644
--- a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Vue/App.vue
+++ b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Vue/App.vue
@@ -97,9 +97,9 @@ function onAppointmentDblClick(e: DxSchedulerTypes.AppointmentDblClickEvent) {
 }
 
 .dx-scheduler-appointment {
-  color: #000;
+  color: var(--dxds-color-content, #000);
   font-weight: 500;
-  background-color: #e4e4e4;
+  background-color: var(--dxds-color-bg-low, #e4e4e4);
 }
 
 .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content {
@@ -107,7 +107,7 @@ function onAppointmentDblClick(e: DxSchedulerTypes.AppointmentDblClickEvent) {
 }
 
 .options {
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
   display: flex;
   align-items: flex-start;
diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/jQuery/styles.css b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/jQuery/styles.css
index f9853cc68495..93e6de17763d 100644
--- a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/jQuery/styles.css
+++ b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/jQuery/styles.css
@@ -3,9 +3,9 @@
 }
 
 .dx-scheduler-appointment {
-  color: #000;
+  color: var(--dxds-color-content, #000);
   font-weight: 500;
-  background-color: #e4e4e4;
+  background-color: var(--dxds-color-bg-low, #e4e4e4);
 }
 
 .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content {
@@ -13,7 +13,7 @@
 }
 
 .options {
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
   display: flex;
   align-items: flex-start;
diff --git a/apps/demos/Demos/Scheduler/DragAndDrop/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/DragAndDrop/Angular/app/app.component.css
index ae46df1fcb67..eb5f63781db2 100644
--- a/apps/demos/Demos/Scheduler/DragAndDrop/Angular/app/app.component.css
+++ b/apps/demos/Demos/Scheduler/DragAndDrop/Angular/app/app.component.css
@@ -25,5 +25,5 @@
 }
 
 .dx-draggable-dragging > * {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 6px 8px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--dxds-box-shadow-md, 0 1px 3px rgba(0, 0, 0, 0.1), 0 6px 8px rgba(0, 0, 0, 0.2));
 }
diff --git a/apps/demos/Demos/Scheduler/DragAndDrop/React/styles.css b/apps/demos/Demos/Scheduler/DragAndDrop/React/styles.css
index 3b710d6f4094..4e7cac29cd25 100644
--- a/apps/demos/Demos/Scheduler/DragAndDrop/React/styles.css
+++ b/apps/demos/Demos/Scheduler/DragAndDrop/React/styles.css
@@ -24,5 +24,5 @@
 }
 
 .dx-draggable-dragging > * {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 6px 8px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--dxds-box-shadow-md, 0 1px 3px rgba(0, 0, 0, 0.1), 0 6px 8px rgba(0, 0, 0, 0.2));
 }
diff --git a/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/styles.css b/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/styles.css
index 3b710d6f4094..4e7cac29cd25 100644
--- a/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/styles.css
+++ b/apps/demos/Demos/Scheduler/DragAndDrop/ReactJs/styles.css
@@ -24,5 +24,5 @@
 }
 
 .dx-draggable-dragging > * {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 6px 8px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--dxds-box-shadow-md, 0 1px 3px rgba(0, 0, 0, 0.1), 0 6px 8px rgba(0, 0, 0, 0.2));
 }
diff --git a/apps/demos/Demos/Scheduler/DragAndDrop/Vue/App.vue b/apps/demos/Demos/Scheduler/DragAndDrop/Vue/App.vue
index 36897e2e2d7d..8a791e85ec64 100644
--- a/apps/demos/Demos/Scheduler/DragAndDrop/Vue/App.vue
+++ b/apps/demos/Demos/Scheduler/DragAndDrop/Vue/App.vue
@@ -110,6 +110,6 @@ function onItemDragEnd(e: DxDraggableTypes.DragEndEvent) {
 }
 
 .dx-draggable-dragging > * {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 6px 8px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--dxds-box-shadow-md, 0 1px 3px rgba(0, 0, 0, 0.1), 0 6px 8px rgba(0, 0, 0, 0.2));
 }
 </style>
diff --git a/apps/demos/Demos/Scheduler/DragAndDrop/jQuery/styles.css b/apps/demos/Demos/Scheduler/DragAndDrop/jQuery/styles.css
index 3b710d6f4094..4e7cac29cd25 100644
--- a/apps/demos/Demos/Scheduler/DragAndDrop/jQuery/styles.css
+++ b/apps/demos/Demos/Scheduler/DragAndDrop/jQuery/styles.css
@@ -24,5 +24,5 @@
 }
 
 .dx-draggable-dragging > * {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 6px 8px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--dxds-box-shadow-md, 0 1px 3px rgba(0, 0, 0, 0.1), 0 6px 8px rgba(0, 0, 0, 0.2));
 }
diff --git a/apps/demos/Demos/Scheduler/Editing/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/Editing/Angular/app/app.component.css
index 5e279be151fd..5e20477afe78 100644
--- a/apps/demos/Demos/Scheduler/Editing/Angular/app/app.component.css
+++ b/apps/demos/Demos/Scheduler/Editing/Angular/app/app.component.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Scheduler/Editing/React/styles.css b/apps/demos/Demos/Scheduler/Editing/React/styles.css
index 5e279be151fd..5e20477afe78 100644
--- a/apps/demos/Demos/Scheduler/Editing/React/styles.css
+++ b/apps/demos/Demos/Scheduler/Editing/React/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Scheduler/Editing/ReactJs/styles.css b/apps/demos/Demos/Scheduler/Editing/ReactJs/styles.css
index 5e279be151fd..5e20477afe78 100644
--- a/apps/demos/Demos/Scheduler/Editing/ReactJs/styles.css
+++ b/apps/demos/Demos/Scheduler/Editing/ReactJs/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Scheduler/Editing/Vue/App.vue b/apps/demos/Demos/Scheduler/Editing/Vue/App.vue
index 69556a02e14d..9daf028124e5 100644
--- a/apps/demos/Demos/Scheduler/Editing/Vue/App.vue
+++ b/apps/demos/Demos/Scheduler/Editing/Vue/App.vue
@@ -93,7 +93,7 @@ function showDeletedToast(e: DxSchedulerTypes.AppointmentDeletedEvent) {
 <style>
   .options {
     padding: 20px;
-    background-color: rgba(191, 191, 191, 0.15);
+    background-color: var(--dx-color-options-panel-bg);
     margin-top: 20px;
   }
 
diff --git a/apps/demos/Demos/Scheduler/Editing/jQuery/styles.css b/apps/demos/Demos/Scheduler/Editing/jQuery/styles.css
index 5e279be151fd..5e20477afe78 100644
--- a/apps/demos/Demos/Scheduler/Editing/jQuery/styles.css
+++ b/apps/demos/Demos/Scheduler/Editing/jQuery/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Scheduler/GroupByDate/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/GroupByDate/Angular/app/app.component.css
index 32d7e59bc504..ee0de3a49bcb 100644
--- a/apps/demos/Demos/Scheduler/GroupByDate/Angular/app/app.component.css
+++ b/apps/demos/Demos/Scheduler/GroupByDate/Angular/app/app.component.css
@@ -5,7 +5,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Scheduler/GroupByDate/React/styles.css b/apps/demos/Demos/Scheduler/GroupByDate/React/styles.css
index 0f39434b0913..647a77e802dd 100644
--- a/apps/demos/Demos/Scheduler/GroupByDate/React/styles.css
+++ b/apps/demos/Demos/Scheduler/GroupByDate/React/styles.css
@@ -5,7 +5,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Scheduler/GroupByDate/ReactJs/styles.css b/apps/demos/Demos/Scheduler/GroupByDate/ReactJs/styles.css
index 0f39434b0913..647a77e802dd 100644
--- a/apps/demos/Demos/Scheduler/GroupByDate/ReactJs/styles.css
+++ b/apps/demos/Demos/Scheduler/GroupByDate/ReactJs/styles.css
@@ -5,7 +5,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Scheduler/GroupByDate/Vue/App.vue b/apps/demos/Demos/Scheduler/GroupByDate/Vue/App.vue
index 0a6d07812f1c..d51aebaa339c 100644
--- a/apps/demos/Demos/Scheduler/GroupByDate/Vue/App.vue
+++ b/apps/demos/Demos/Scheduler/GroupByDate/Vue/App.vue
@@ -59,7 +59,7 @@ const dataSource = data;
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Scheduler/GroupByDate/jQuery/styles.css b/apps/demos/Demos/Scheduler/GroupByDate/jQuery/styles.css
index 50278bb6f06e..ff0a3e04efb3 100644
--- a/apps/demos/Demos/Scheduler/GroupByDate/jQuery/styles.css
+++ b/apps/demos/Demos/Scheduler/GroupByDate/jQuery/styles.css
@@ -5,7 +5,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Scheduler/HiddenDays/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/HiddenDays/Angular/app/app.component.css
index 95736308e283..9415b351b10f 100644
--- a/apps/demos/Demos/Scheduler/HiddenDays/Angular/app/app.component.css
+++ b/apps/demos/Demos/Scheduler/HiddenDays/Angular/app/app.component.css
@@ -15,7 +15,7 @@
   width: 220px;
   box-sizing: border-box;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   gap: 12px;
 }
 
@@ -33,10 +33,10 @@
   display: none;
   margin-top: 8px;
   padding: 10px 12px;
-  background: #fdf3f4;
-  border-left: 3px solid #c50f1f;
+  background: var(--dxds-color-bg-danger-subtler, #fdf3f4);
+  border-left: 3px solid var(--dxds-color-bg-danger, #c50f1f);
   border-radius: 4px;
-  color: #c50f1f;
+  color: var(--dxds-color-content-danger, #c50f1f);
   font-size: 13px;
   line-height: 1.4;
 }
@@ -46,7 +46,11 @@
 }
 
 ::ng-deep .hidden-days-demo.is-invalid .option .dx-checkbox-icon {
-  border-color: #c50f1f;
+  border-color: var(--dxds-color-border-danger-shared, #c50f1f);
+}
+
+::ng-deep .hidden-days-demo.is-invalid .option .dx-checkbox-icon:hover {
+  border-color: var(--dxds-color-border-danger-shared-hovered, #c50f1f);
 }
 
 ::ng-deep .hidden-days-demo.is-invalid .dx-scheduler-work-space {
diff --git a/apps/demos/Demos/Scheduler/HiddenDays/React/styles.css b/apps/demos/Demos/Scheduler/HiddenDays/React/styles.css
index 82a48bdf0b98..5b2703977b4d 100644
--- a/apps/demos/Demos/Scheduler/HiddenDays/React/styles.css
+++ b/apps/demos/Demos/Scheduler/HiddenDays/React/styles.css
@@ -15,7 +15,7 @@
   width: 220px;
   box-sizing: border-box;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   gap: 12px;
 }
 
@@ -33,10 +33,10 @@
   display: none;
   margin-top: 8px;
   padding: 10px 12px;
-  background: #fdf3f4;
-  border-left: 3px solid #c50f1f;
+  background: var(--dxds-color-bg-danger-subtler, #fdf3f4);
+  border-left: 3px solid var(--dxds-color-bg-danger, #c50f1f);
   border-radius: 4px;
-  color: #c50f1f;
+  color: var(--dxds-color-content-danger, #c50f1f);
   font-size: 13px;
   line-height: 1.4;
 }
@@ -46,7 +46,11 @@
 }
 
 .hidden-days-demo.is-invalid .option .dx-checkbox-icon {
-  border-color: #c50f1f;
+  border-color: var(--dxds-color-border-danger-shared, #c50f1f);
+}
+
+.hidden-days-demo.is-invalid .option .dx-checkbox-icon:hover {
+  border-color: var(--dxds-color-border-danger-shared-hovered, #c50f1f);
 }
 
 .hidden-days-demo.is-invalid .dx-scheduler-work-space {
diff --git a/apps/demos/Demos/Scheduler/HiddenDays/ReactJs/styles.css b/apps/demos/Demos/Scheduler/HiddenDays/ReactJs/styles.css
index 82a48bdf0b98..5b2703977b4d 100644
--- a/apps/demos/Demos/Scheduler/HiddenDays/ReactJs/styles.css
+++ b/apps/demos/Demos/Scheduler/HiddenDays/ReactJs/styles.css
@@ -15,7 +15,7 @@
   width: 220px;
   box-sizing: border-box;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   gap: 12px;
 }
 
@@ -33,10 +33,10 @@
   display: none;
   margin-top: 8px;
   padding: 10px 12px;
-  background: #fdf3f4;
-  border-left: 3px solid #c50f1f;
+  background: var(--dxds-color-bg-danger-subtler, #fdf3f4);
+  border-left: 3px solid var(--dxds-color-bg-danger, #c50f1f);
   border-radius: 4px;
-  color: #c50f1f;
+  color: var(--dxds-color-content-danger, #c50f1f);
   font-size: 13px;
   line-height: 1.4;
 }
@@ -46,7 +46,11 @@
 }
 
 .hidden-days-demo.is-invalid .option .dx-checkbox-icon {
-  border-color: #c50f1f;
+  border-color: var(--dxds-color-border-danger-shared, #c50f1f);
+}
+
+.hidden-days-demo.is-invalid .option .dx-checkbox-icon:hover {
+  border-color: var(--dxds-color-border-danger-shared-hovered, #c50f1f);
 }
 
 .hidden-days-demo.is-invalid .dx-scheduler-work-space {
diff --git a/apps/demos/Demos/Scheduler/HiddenDays/Vue/styles.css b/apps/demos/Demos/Scheduler/HiddenDays/Vue/styles.css
index 82a48bdf0b98..5b2703977b4d 100644
--- a/apps/demos/Demos/Scheduler/HiddenDays/Vue/styles.css
+++ b/apps/demos/Demos/Scheduler/HiddenDays/Vue/styles.css
@@ -15,7 +15,7 @@
   width: 220px;
   box-sizing: border-box;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   gap: 12px;
 }
 
@@ -33,10 +33,10 @@
   display: none;
   margin-top: 8px;
   padding: 10px 12px;
-  background: #fdf3f4;
-  border-left: 3px solid #c50f1f;
+  background: var(--dxds-color-bg-danger-subtler, #fdf3f4);
+  border-left: 3px solid var(--dxds-color-bg-danger, #c50f1f);
   border-radius: 4px;
-  color: #c50f1f;
+  color: var(--dxds-color-content-danger, #c50f1f);
   font-size: 13px;
   line-height: 1.4;
 }
@@ -46,7 +46,11 @@
 }
 
 .hidden-days-demo.is-invalid .option .dx-checkbox-icon {
-  border-color: #c50f1f;
+  border-color: var(--dxds-color-border-danger-shared, #c50f1f);
+}
+
+.hidden-days-demo.is-invalid .option .dx-checkbox-icon:hover {
+  border-color: var(--dxds-color-border-danger-shared-hovered, #c50f1f);
 }
 
 .hidden-days-demo.is-invalid .dx-scheduler-work-space {
diff --git a/apps/demos/Demos/Scheduler/HiddenDays/jQuery/styles.css b/apps/demos/Demos/Scheduler/HiddenDays/jQuery/styles.css
index 82a48bdf0b98..5b2703977b4d 100644
--- a/apps/demos/Demos/Scheduler/HiddenDays/jQuery/styles.css
+++ b/apps/demos/Demos/Scheduler/HiddenDays/jQuery/styles.css
@@ -15,7 +15,7 @@
   width: 220px;
   box-sizing: border-box;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   gap: 12px;
 }
 
@@ -33,10 +33,10 @@
   display: none;
   margin-top: 8px;
   padding: 10px 12px;
-  background: #fdf3f4;
-  border-left: 3px solid #c50f1f;
+  background: var(--dxds-color-bg-danger-subtler, #fdf3f4);
+  border-left: 3px solid var(--dxds-color-bg-danger, #c50f1f);
   border-radius: 4px;
-  color: #c50f1f;
+  color: var(--dxds-color-content-danger, #c50f1f);
   font-size: 13px;
   line-height: 1.4;
 }
@@ -46,7 +46,11 @@
 }
 
 .hidden-days-demo.is-invalid .option .dx-checkbox-icon {
-  border-color: #c50f1f;
+  border-color: var(--dxds-color-border-danger-shared, #c50f1f);
+}
+
+.hidden-days-demo.is-invalid .option .dx-checkbox-icon:hover {
+  border-color: var(--dxds-color-border-danger-shared-hovered, #c50f1f);
 }
 
 .hidden-days-demo.is-invalid .dx-scheduler-work-space {
diff --git a/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.css
index 3c13932a2a05..92c2f7f42954 100644
--- a/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.css
@@ -16,11 +16,11 @@
 ::ng-deep .dx-color-scheme-orange-light,
 ::ng-deep .dx-color-scheme-purple-light,
 ::ng-deep .dx-color-scheme-teal-light {
-  --text-color-1: rgba(0, 0, 0, .6);
-  --text-color-2: rgba(255, 255, 255, 1);
-  --disabled-color: rgba(0, 0, 0, 0.38);
-  --background-color-1: rgba(50, 134, 56, 1);
-  --background-color-2: rgba(194, 81, 0, 1);
+  --text-color-1: var(--dxds-color-content-subtle, rgba(0, 0, 0, .6));
+  --text-color-2: var(--dxds-color-content-inverted, rgba(255, 255, 255, 1));
+  --disabled-color: var(--dxds-color-content-subtler, rgba(0, 0, 0, 0.38));
+  --person-color-1: var(--dxds-color-content-green, rgba(50, 134, 56, 1));
+  --person-color-2: var(--dxds-color-content-orange, rgba(194, 81, 0, 1));
 }
 
 ::ng-deep .dx-color-scheme-dark,
@@ -32,12 +32,11 @@
 ::ng-deep .dx-color-scheme-orange-dark,
 ::ng-deep .dx-color-scheme-purple-dark,
 ::ng-deep .dx-color-scheme-teal-dark {
-  --text-color-1: rgba(255, 255, 255, 1);
-  --text-color-2: rgba(54, 54, 64, 1);
-  --disabled-color: rgba(255, 255, 255, 0.38);
-  --background-color-1: rgba(159, 213, 161, 1);
-  --background-color-2: rgba(255, 181, 127, 1);
-
+  --text-color-1: var(--dxds-color-content-subtle, rgba(255, 255, 255, 1));
+  --text-color-2: var(--dxds-color-content-inverted, rgba(54, 54, 64, 1));
+  --disabled-color: var(--dxds-color-content-disabled, rgba(255, 255, 255, 0.38));
+  --person-color-1: var(--dxds-color-content-green, rgba(159, 213, 161, 1));
+  --person-color-2: var(--dxds-color-content-orange, rgba(255, 181, 127, 1));
 }
 
 ::ng-deep .dx-scheduler-header .dx-toolbar .dx-button,
@@ -71,15 +70,15 @@
   padding-right: 6px;
 }
 
-::ng-deep  .avatar {
+::ng-deep .avatar {
   width: 124px;
   float: left;
   overflow: hidden;
   position: relative;
   height: 124px;
-  border: 1px solid rgba(0, 0, 0, 0.24);
+  border: 1px solid var(--dxds-color-border-static-light, rgba(0, 0, 0, 0.24));
   border-radius: 50%;
-  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--dxds-color-bg-static-light, #fff);
 }
 
 ::ng-deep .avatar img {
@@ -124,11 +123,10 @@
   line-height: 20px;
   font-weight: normal;
   padding: 25px 20px 25px 40px;
-  color: #707070;
 }
 
 ::ng-deep .dx-color-scheme-contrast .info {
-  color: #fff;
+  color: var(--dxds-color-content-on-color, #fff);
 }
 
 ::ng-deep .day-cell {
@@ -139,23 +137,23 @@
 }
 
 ::ng-deep .dx-scheduler-appointment {
-  color: rgba(255, 255, 255, 1);
+  color: var(--dxds-color-content-on-color, #fff);
 }
 
 ::ng-deep .employee-1 {
-  background-color: rgba(55, 126, 58, 0.08);
+  background-color: color-mix(in srgb, var(--person-color-1, #377e3a) calc(var(--dxds-opacity-10, 0.1) * 100%), transparent);
 }
 
 ::ng-deep .employee-2 {
-  background-color: rgba(194, 81, 0, 0.08);
+  background-color: color-mix(in srgb, var(--person-color-2, #c25100) calc(var(--dxds-opacity-10, 0.1) * 100%), transparent);
 }
 
 ::ng-deep .employee-weekend-1 {
-  background-color: rgba(55, 126, 58, 0.12);
+  background-color: color-mix(in srgb, var(--person-color-1, #377e3a) calc(var(--dxds-opacity-15, 0.15) * 100%), transparent);
 }
 
 ::ng-deep .employee-weekend-2 {
-  background-color: rgba(194, 81, 0, 0.12);
+  background-color: color-mix(in srgb, var(--person-color-2, #c25100) calc(var(--dxds-opacity-15, 0.15) * 100%), transparent);
 }
 
 ::ng-deep .training-background-0 {
diff --git a/apps/demos/Demos/Scheduler/Overview/Angular/app/app.service.ts b/apps/demos/Demos/Scheduler/Overview/Angular/app/app.service.ts
index 6a0b62221343..3bbcd2c40b26 100644
--- a/apps/demos/Demos/Scheduler/Overview/Angular/app/app.service.ts
+++ b/apps/demos/Demos/Scheduler/Overview/Angular/app/app.service.ts
@@ -27,14 +27,14 @@ export class Data {
 const employees: Employee[] = [{
   text: 'John Heart',
   id: 1,
-  color: 'var(--background-color-1)',
+  color: 'var(--person-color-1)',
   avatar: '../../../../images/employees/19.png',
   age: 27,
   discipline: 'ABS, Fitball, StepFit',
 }, {
   text: 'Greta Sims',
   id: 2,
-  color: 'var(--background-color-2)',
+  color: 'var(--person-color-2)',
   avatar: '../../../../images/employees/31.png',
   age: 25,
   discipline: 'ABS, Fitball, StepFit',
diff --git a/apps/demos/Demos/Scheduler/Overview/React/data.ts b/apps/demos/Demos/Scheduler/Overview/React/data.ts
index 569113fd0a45..a35dd96e9085 100644
--- a/apps/demos/Demos/Scheduler/Overview/React/data.ts
+++ b/apps/demos/Demos/Scheduler/Overview/React/data.ts
@@ -82,14 +82,14 @@ export const data: Appointment[] = [
 export const employees: Resource[] = [{
   text: 'John Heart',
   id: 1,
-  color: 'var(--background-color-1)',
+  color: 'var(--person-color-1)',
   avatar: '../../../../images/employees/19.png',
   age: 27,
   discipline: 'ABS, Fitball, StepFit',
 }, {
   text: 'Greta Sims',
   id: 2,
-  color: 'var(--background-color-2)',
+  color: 'var(--person-color-2)',
   avatar: '../../../../images/employees/31.png',
   age: 25,
   discipline: 'ABS, Fitball, StepFit',
diff --git a/apps/demos/Demos/Scheduler/Overview/React/styles.css b/apps/demos/Demos/Scheduler/Overview/React/styles.css
index 97f1dab526a7..d298978487e6 100644
--- a/apps/demos/Demos/Scheduler/Overview/React/styles.css
+++ b/apps/demos/Demos/Scheduler/Overview/React/styles.css
@@ -16,11 +16,11 @@
 .dx-color-scheme-orange-light,
 .dx-color-scheme-purple-light,
 .dx-color-scheme-teal-light {
-  --text-color-1: rgba(0, 0, 0, .6);
-  --text-color-2: rgba(255, 255, 255, 1);
-  --disabled-color: rgba(0, 0, 0, 0.38);
-  --background-color-1: rgba(50, 134, 56, 1);
-  --background-color-2: rgba(194, 81, 0, 1);
+  --text-color-1: var(--dxds-color-content-subtle, rgba(0, 0, 0, .6));
+  --text-color-2: var(--dxds-color-content-inverted, rgba(255, 255, 255, 1));
+  --disabled-color: var(--dxds-color-content-subtler, rgba(0, 0, 0, 0.38));
+  --person-color-1: var(--dxds-color-content-green, rgba(50, 134, 56, 1));
+  --person-color-2: var(--dxds-color-content-orange, rgba(194, 81, 0, 1));
 }
 
 .dx-color-scheme-dark,
@@ -32,12 +32,11 @@
 .dx-color-scheme-orange-dark,
 .dx-color-scheme-purple-dark,
 .dx-color-scheme-teal-dark {
-  --text-color-1: rgba(255, 255, 255, 1);
-  --text-color-2: rgba(54, 54, 64, 1);
-  --disabled-color: rgba(255, 255, 255, 0.38);
-  --background-color-1: rgba(159, 213, 161, 1);
-  --background-color-2: rgba(255, 181, 127, 1);
-
+  --text-color-1: var(--dxds-color-content-subtle, rgba(255, 255, 255, 1));
+  --text-color-2: var(--dxds-color-content-inverted, rgba(54, 54, 64, 1));
+  --disabled-color: var(--dxds-color-content-disabled, rgba(255, 255, 255, 0.38));
+  --person-color-1: var(--dxds-color-content-green, rgba(159, 213, 161, 1));
+  --person-color-2: var(--dxds-color-content-orange, rgba(255, 181, 127, 1));
 }
 
 .dx-scheduler-header .dx-toolbar .dx-button,
@@ -77,9 +76,9 @@
   overflow: hidden;
   position: relative;
   height: 124px;
-  border: 1px solid rgba(0, 0, 0, 0.24);
+  border: 1px solid var(--dxds-color-border-static-light, rgba(0, 0, 0, 0.24));
   border-radius: 50%;
-  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--dxds-color-bg-static-light, #fff);
 }
 
 .avatar img {
@@ -124,11 +123,10 @@
   line-height: 20px;
   font-weight: normal;
   padding: 25px 20px 25px 40px;
-  color: #707070;
 }
 
 .dx-color-scheme-contrast .info {
-  color: #fff;
+  color: var(--dxds-color-content-on-color, #fff);
 }
 
 .day-cell {
@@ -138,24 +136,20 @@
   background-repeat: no-repeat;
 }
 
-.dx-scheduler-appointment {
-  color: rgba(255, 255, 255, 1);
-}
-
 .employee-1 {
-  background-color: rgba(55, 126, 58, 0.08);
+  background-color: color-mix(in srgb, var(--person-color-1, #377e3a) calc(var(--dxds-opacity-10, 0.1) * 100%), transparent);
 }
 
 .employee-2 {
-  background-color: rgba(194, 81, 0, 0.08);
+  background-color: color-mix(in srgb, var(--person-color-2, #c25100) calc(var(--dxds-opacity-10, 0.1) * 100%), transparent);
 }
 
 .employee-weekend-1 {
-  background-color: rgba(55, 126, 58, 0.12);
+  background-color: color-mix(in srgb, var(--person-color-1, #377e3a) calc(var(--dxds-opacity-15, 0.15) * 100%), transparent);
 }
 
 .employee-weekend-2 {
-  background-color: rgba(194, 81, 0, 0.12);
+  background-color: color-mix(in srgb, var(--person-color-2, #c25100) calc(var(--dxds-opacity-15, 0.15) * 100%), transparent);
 }
 
 .training-background-0 {
diff --git a/apps/demos/Demos/Scheduler/Overview/ReactJs/data.js b/apps/demos/Demos/Scheduler/Overview/ReactJs/data.js
index 2ae3c1170144..d5d49d6ebdee 100644
--- a/apps/demos/Demos/Scheduler/Overview/ReactJs/data.js
+++ b/apps/demos/Demos/Scheduler/Overview/ReactJs/data.js
@@ -82,7 +82,7 @@ export const employees = [
   {
     text: 'John Heart',
     id: 1,
-    color: 'var(--background-color-1)',
+    color: 'var(--person-color-1)',
     avatar: '../../../../images/employees/19.png',
     age: 27,
     discipline: 'ABS, Fitball, StepFit',
@@ -90,7 +90,7 @@ export const employees = [
   {
     text: 'Greta Sims',
     id: 2,
-    color: 'var(--background-color-2)',
+    color: 'var(--person-color-2)',
     avatar: '../../../../images/employees/31.png',
     age: 25,
     discipline: 'ABS, Fitball, StepFit',
diff --git a/apps/demos/Demos/Scheduler/Overview/ReactJs/styles.css b/apps/demos/Demos/Scheduler/Overview/ReactJs/styles.css
index 97f1dab526a7..d298978487e6 100644
--- a/apps/demos/Demos/Scheduler/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/Scheduler/Overview/ReactJs/styles.css
@@ -16,11 +16,11 @@
 .dx-color-scheme-orange-light,
 .dx-color-scheme-purple-light,
 .dx-color-scheme-teal-light {
-  --text-color-1: rgba(0, 0, 0, .6);
-  --text-color-2: rgba(255, 255, 255, 1);
-  --disabled-color: rgba(0, 0, 0, 0.38);
-  --background-color-1: rgba(50, 134, 56, 1);
-  --background-color-2: rgba(194, 81, 0, 1);
+  --text-color-1: var(--dxds-color-content-subtle, rgba(0, 0, 0, .6));
+  --text-color-2: var(--dxds-color-content-inverted, rgba(255, 255, 255, 1));
+  --disabled-color: var(--dxds-color-content-subtler, rgba(0, 0, 0, 0.38));
+  --person-color-1: var(--dxds-color-content-green, rgba(50, 134, 56, 1));
+  --person-color-2: var(--dxds-color-content-orange, rgba(194, 81, 0, 1));
 }
 
 .dx-color-scheme-dark,
@@ -32,12 +32,11 @@
 .dx-color-scheme-orange-dark,
 .dx-color-scheme-purple-dark,
 .dx-color-scheme-teal-dark {
-  --text-color-1: rgba(255, 255, 255, 1);
-  --text-color-2: rgba(54, 54, 64, 1);
-  --disabled-color: rgba(255, 255, 255, 0.38);
-  --background-color-1: rgba(159, 213, 161, 1);
-  --background-color-2: rgba(255, 181, 127, 1);
-
+  --text-color-1: var(--dxds-color-content-subtle, rgba(255, 255, 255, 1));
+  --text-color-2: var(--dxds-color-content-inverted, rgba(54, 54, 64, 1));
+  --disabled-color: var(--dxds-color-content-disabled, rgba(255, 255, 255, 0.38));
+  --person-color-1: var(--dxds-color-content-green, rgba(159, 213, 161, 1));
+  --person-color-2: var(--dxds-color-content-orange, rgba(255, 181, 127, 1));
 }
 
 .dx-scheduler-header .dx-toolbar .dx-button,
@@ -77,9 +76,9 @@
   overflow: hidden;
   position: relative;
   height: 124px;
-  border: 1px solid rgba(0, 0, 0, 0.24);
+  border: 1px solid var(--dxds-color-border-static-light, rgba(0, 0, 0, 0.24));
   border-radius: 50%;
-  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--dxds-color-bg-static-light, #fff);
 }
 
 .avatar img {
@@ -124,11 +123,10 @@
   line-height: 20px;
   font-weight: normal;
   padding: 25px 20px 25px 40px;
-  color: #707070;
 }
 
 .dx-color-scheme-contrast .info {
-  color: #fff;
+  color: var(--dxds-color-content-on-color, #fff);
 }
 
 .day-cell {
@@ -138,24 +136,20 @@
   background-repeat: no-repeat;
 }
 
-.dx-scheduler-appointment {
-  color: rgba(255, 255, 255, 1);
-}
-
 .employee-1 {
-  background-color: rgba(55, 126, 58, 0.08);
+  background-color: color-mix(in srgb, var(--person-color-1, #377e3a) calc(var(--dxds-opacity-10, 0.1) * 100%), transparent);
 }
 
 .employee-2 {
-  background-color: rgba(194, 81, 0, 0.08);
+  background-color: color-mix(in srgb, var(--person-color-2, #c25100) calc(var(--dxds-opacity-10, 0.1) * 100%), transparent);
 }
 
 .employee-weekend-1 {
-  background-color: rgba(55, 126, 58, 0.12);
+  background-color: color-mix(in srgb, var(--person-color-1, #377e3a) calc(var(--dxds-opacity-15, 0.15) * 100%), transparent);
 }
 
 .employee-weekend-2 {
-  background-color: rgba(194, 81, 0, 0.12);
+  background-color: color-mix(in srgb, var(--person-color-2, #c25100) calc(var(--dxds-opacity-15, 0.15) * 100%), transparent);
 }
 
 .training-background-0 {
diff --git a/apps/demos/Demos/Scheduler/Overview/Vue/App.vue b/apps/demos/Demos/Scheduler/Overview/Vue/App.vue
index 33e565df6b49..03d4cfeaa884 100644
--- a/apps/demos/Demos/Scheduler/Overview/Vue/App.vue
+++ b/apps/demos/Demos/Scheduler/Overview/Vue/App.vue
@@ -65,11 +65,11 @@ const dataSource = data;
 .dx-color-scheme-orange-light,
 .dx-color-scheme-purple-light,
 .dx-color-scheme-teal-light {
-  --text-color-1: rgba(0, 0, 0, .6);
-  --text-color-2: rgba(255, 255, 255, 1);
-  --disabled-color: rgba(0, 0, 0, 0.38);
-  --background-color-1: rgba(50, 134, 56, 1);
-  --background-color-2: rgba(194, 81, 0, 1);
+  --text-color-1: var(--dxds-color-content-subtle, rgba(0, 0, 0, .6));
+  --text-color-2: var(--dxds-color-content-inverted, rgba(255, 255, 255, 1));
+  --disabled-color: var(--dxds-color-content-subtler, rgba(0, 0, 0, 0.38));
+  --person-color-1: var(--dxds-color-content-green, rgba(50, 134, 56, 1));
+  --person-color-2: var(--dxds-color-content-orange, rgba(194, 81, 0, 1));
 }
 
 .dx-color-scheme-dark,
@@ -81,12 +81,11 @@ const dataSource = data;
 .dx-color-scheme-orange-dark,
 .dx-color-scheme-purple-dark,
 .dx-color-scheme-teal-dark {
-  --text-color-1: rgba(255, 255, 255, 1);
-  --text-color-2: rgba(54, 54, 64, 1);
-  --disabled-color: rgba(255, 255, 255, 0.38);
-  --background-color-1: rgba(159, 213, 161, 1);
-  --background-color-2: rgba(255, 181, 127, 1);
-
+  --text-color-1: var(--dxds-color-content-subtle, rgba(255, 255, 255, 1));
+  --text-color-2: var(--dxds-color-content-inverted, rgba(54, 54, 64, 1));
+  --disabled-color: var(--dxds-color-content-disabled, rgba(255, 255, 255, 0.38));
+  --person-color-1: var(--dxds-color-content-green, rgba(159, 213, 161, 1));
+  --person-color-2: var(--dxds-color-content-orange, rgba(255, 181, 127, 1));
 }
 
 .dx-scheduler-header .dx-toolbar .dx-button,
@@ -121,7 +120,7 @@ const dataSource = data;
 }
 
 .dx-scheduler-appointment {
-  color: rgba(255, 255, 255, 1);
+  color: var(--dxds-color-content-on-color, #fff);
 }
 
 </style>
diff --git a/apps/demos/Demos/Scheduler/Overview/Vue/DataCell.vue b/apps/demos/Demos/Scheduler/Overview/Vue/DataCell.vue
index b4fbc0066c8a..e82ade75cca0 100644
--- a/apps/demos/Demos/Scheduler/Overview/Vue/DataCell.vue
+++ b/apps/demos/Demos/Scheduler/Overview/Vue/DataCell.vue
@@ -50,23 +50,23 @@ function getCurrentTraining(date: number, employeeID: number) {
 }
 
 .dx-scheduler-appointment {
-  color: rgba(255, 255, 255, 1);
+  color: var(--dxds-color-content-on-color, #fff);
 }
 
 .employee-1 {
-  background-color: rgba(55, 126, 58, 0.08);
+  background-color: color-mix(in srgb, var(--person-color-1, #377e3a) calc(var(--dxds-opacity-10, 0.1) * 100%), transparent);
 }
 
 .employee-2 {
-  background-color: rgba(194, 81, 0, 0.08);
+  background-color: color-mix(in srgb, var(--person-color-2, #c25100) calc(var(--dxds-opacity-10, 0.1) * 100%), transparent);
 }
 
 .employee-weekend-1 {
-  background-color: rgba(55, 126, 58, 0.12);
+  background-color: color-mix(in srgb, var(--person-color-1, #377e3a) calc(var(--dxds-opacity-15, 0.15) * 100%), transparent);
 }
 
 .employee-weekend-2 {
-  background-color: rgba(194, 81, 0, 0.12);
+  background-color: color-mix(in srgb, var(--person-color-2, #c25100) calc(var(--dxds-opacity-15, 0.15) * 100%), transparent);
 }
 
 .training-background-0 {
diff --git a/apps/demos/Demos/Scheduler/Overview/Vue/ResourceCell.vue b/apps/demos/Demos/Scheduler/Overview/Vue/ResourceCell.vue
index d9e48370aa50..ffcabbc56bf8 100644
--- a/apps/demos/Demos/Scheduler/Overview/Vue/ResourceCell.vue
+++ b/apps/demos/Demos/Scheduler/Overview/Vue/ResourceCell.vue
@@ -39,9 +39,9 @@ withDefaults(defineProps<{
   overflow: hidden;
   position: relative;
   height: 124px;
-  border: 1px solid rgba(0, 0, 0, 0.24);
+  border: 1px solid var(--dxds-color-border-static-light, rgba(0, 0, 0, 0.24));
   border-radius: 50%;
-  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--dxds-color-bg-static-light, #fff);
 }
 
 .avatar img {
@@ -86,10 +86,9 @@ withDefaults(defineProps<{
   line-height: 20px;
   font-weight: normal;
   padding: 25px 20px 25px 40px;
-  color: #707070;
 }
 
 .dx-color-scheme-contrast .info {
-  color: #fff;
+  color: var(--dxds-color-content-on-color, #fff);
 }
 </style>
diff --git a/apps/demos/Demos/Scheduler/Overview/Vue/data.ts b/apps/demos/Demos/Scheduler/Overview/Vue/data.ts
index a4c5b52fa50b..a638e51408cf 100644
--- a/apps/demos/Demos/Scheduler/Overview/Vue/data.ts
+++ b/apps/demos/Demos/Scheduler/Overview/Vue/data.ts
@@ -1,14 +1,14 @@
 export const employees = [{
   text: 'John Heart',
   id: 1,
-  color: 'var(--background-color-1)',
+  color: 'var(--person-color-1)',
   avatar: '../../../../images/employees/19.png',
   age: 27,
   discipline: 'ABS, Fitball, StepFit',
 }, {
   text: 'Greta Sims',
   id: 2,
-  color: 'var(--background-color-2)',
+  color: 'var(--person-color-2)',
   avatar: '../../../../images/employees/31.png',
   age: 25,
   discipline: 'ABS, Fitball, StepFit',
diff --git a/apps/demos/Demos/Scheduler/Overview/jQuery/data.js b/apps/demos/Demos/Scheduler/Overview/jQuery/data.js
index d753b921c9d5..38383e561616 100644
--- a/apps/demos/Demos/Scheduler/Overview/jQuery/data.js
+++ b/apps/demos/Demos/Scheduler/Overview/jQuery/data.js
@@ -1,14 +1,14 @@
 const employees = [{
   text: 'John Heart',
   id: 1,
-  color: 'var(--background-color-1)',
+  color: 'var(--person-color-1)',
   avatar: '../../../../images/employees/19.png',
   age: 27,
   discipline: 'ABS, Fitball, StepFit',
 }, {
   text: 'Greta Sims',
   id: 2,
-  color: 'var(--background-color-2)',
+  color: 'var(--person-color-2)',
   avatar: '../../../../images/employees/31.png',
   age: 25,
   discipline: 'ABS, Fitball, StepFit',
diff --git a/apps/demos/Demos/Scheduler/Overview/jQuery/styles.css b/apps/demos/Demos/Scheduler/Overview/jQuery/styles.css
index 97f1dab526a7..d298978487e6 100644
--- a/apps/demos/Demos/Scheduler/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/Scheduler/Overview/jQuery/styles.css
@@ -16,11 +16,11 @@
 .dx-color-scheme-orange-light,
 .dx-color-scheme-purple-light,
 .dx-color-scheme-teal-light {
-  --text-color-1: rgba(0, 0, 0, .6);
-  --text-color-2: rgba(255, 255, 255, 1);
-  --disabled-color: rgba(0, 0, 0, 0.38);
-  --background-color-1: rgba(50, 134, 56, 1);
-  --background-color-2: rgba(194, 81, 0, 1);
+  --text-color-1: var(--dxds-color-content-subtle, rgba(0, 0, 0, .6));
+  --text-color-2: var(--dxds-color-content-inverted, rgba(255, 255, 255, 1));
+  --disabled-color: var(--dxds-color-content-subtler, rgba(0, 0, 0, 0.38));
+  --person-color-1: var(--dxds-color-content-green, rgba(50, 134, 56, 1));
+  --person-color-2: var(--dxds-color-content-orange, rgba(194, 81, 0, 1));
 }
 
 .dx-color-scheme-dark,
@@ -32,12 +32,11 @@
 .dx-color-scheme-orange-dark,
 .dx-color-scheme-purple-dark,
 .dx-color-scheme-teal-dark {
-  --text-color-1: rgba(255, 255, 255, 1);
-  --text-color-2: rgba(54, 54, 64, 1);
-  --disabled-color: rgba(255, 255, 255, 0.38);
-  --background-color-1: rgba(159, 213, 161, 1);
-  --background-color-2: rgba(255, 181, 127, 1);
-
+  --text-color-1: var(--dxds-color-content-subtle, rgba(255, 255, 255, 1));
+  --text-color-2: var(--dxds-color-content-inverted, rgba(54, 54, 64, 1));
+  --disabled-color: var(--dxds-color-content-disabled, rgba(255, 255, 255, 0.38));
+  --person-color-1: var(--dxds-color-content-green, rgba(159, 213, 161, 1));
+  --person-color-2: var(--dxds-color-content-orange, rgba(255, 181, 127, 1));
 }
 
 .dx-scheduler-header .dx-toolbar .dx-button,
@@ -77,9 +76,9 @@
   overflow: hidden;
   position: relative;
   height: 124px;
-  border: 1px solid rgba(0, 0, 0, 0.24);
+  border: 1px solid var(--dxds-color-border-static-light, rgba(0, 0, 0, 0.24));
   border-radius: 50%;
-  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--dxds-color-bg-static-light, #fff);
 }
 
 .avatar img {
@@ -124,11 +123,10 @@
   line-height: 20px;
   font-weight: normal;
   padding: 25px 20px 25px 40px;
-  color: #707070;
 }
 
 .dx-color-scheme-contrast .info {
-  color: #fff;
+  color: var(--dxds-color-content-on-color, #fff);
 }
 
 .day-cell {
@@ -138,24 +136,20 @@
   background-repeat: no-repeat;
 }
 
-.dx-scheduler-appointment {
-  color: rgba(255, 255, 255, 1);
-}
-
 .employee-1 {
-  background-color: rgba(55, 126, 58, 0.08);
+  background-color: color-mix(in srgb, var(--person-color-1, #377e3a) calc(var(--dxds-opacity-10, 0.1) * 100%), transparent);
 }
 
 .employee-2 {
-  background-color: rgba(194, 81, 0, 0.08);
+  background-color: color-mix(in srgb, var(--person-color-2, #c25100) calc(var(--dxds-opacity-10, 0.1) * 100%), transparent);
 }
 
 .employee-weekend-1 {
-  background-color: rgba(55, 126, 58, 0.12);
+  background-color: color-mix(in srgb, var(--person-color-1, #377e3a) calc(var(--dxds-opacity-15, 0.15) * 100%), transparent);
 }
 
 .employee-weekend-2 {
-  background-color: rgba(194, 81, 0, 0.12);
+  background-color: color-mix(in srgb, var(--person-color-2, #c25100) calc(var(--dxds-opacity-15, 0.15) * 100%), transparent);
 }
 
 .training-background-0 {
diff --git a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Angular/app/app.component.css
index e94ccc57283b..c584541616aa 100644
--- a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Angular/app/app.component.css
+++ b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Angular/app/app.component.css
@@ -1,10 +1,10 @@
 ::ng-deep .dx-scheduler-appointment {
-  color: #242424;
+  color: var(--dxds-color-content-static-light, #242424);
 }
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
@@ -20,8 +20,8 @@
 }
 
 ::ng-deep .conflict-informer {
-  background-color: #FCEAE8;
-  color: #C50F1F;
+  background-color: var(--dxds-color-bg-danger-subtler, #FCEAE8);
+  color: var(--dxds-color-content-danger, #C50F1F);
   font-size: 12px;
   padding: 0 12px;
   height: 36px;
diff --git a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/React/styles.css b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/React/styles.css
index 52890693b7f4..a3ecf825ae33 100644
--- a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/React/styles.css
+++ b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/React/styles.css
@@ -1,10 +1,10 @@
 .dx-scheduler-appointment {
-  color: #242424;
+  color: var(--dxds-color-content-static-light, #242424);
 }
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
@@ -20,8 +20,8 @@
 }
 
 .conflict-informer {
-  background-color: #FCEAE8;
-  color: #C50F1F;
+  background-color: var(--dxds-color-bg-danger-subtler, #FCEAE8);
+  color: var(--dxds-color-content-danger, #C50F1F);
   font-size: 12px;
   padding: 0 12px;
   height: 36px;
diff --git a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/ReactJs/styles.css b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/ReactJs/styles.css
index 52890693b7f4..a3ecf825ae33 100644
--- a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/ReactJs/styles.css
+++ b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/ReactJs/styles.css
@@ -1,10 +1,10 @@
 .dx-scheduler-appointment {
-  color: #242424;
+  color: var(--dxds-color-content-static-light, #242424);
 }
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
@@ -20,8 +20,8 @@
 }
 
 .conflict-informer {
-  background-color: #FCEAE8;
-  color: #C50F1F;
+  background-color: var(--dxds-color-bg-danger-subtler, #FCEAE8);
+  color: var(--dxds-color-content-danger, #C50F1F);
   font-size: 12px;
   padding: 0 12px;
   height: 36px;
diff --git a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Vue/App.vue b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Vue/App.vue
index 260dc02e5e76..bb5b350e13fd 100644
--- a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Vue/App.vue
+++ b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Vue/App.vue
@@ -271,12 +271,12 @@ const onOverlappingRuleChanged = (e: DxSelectBoxTypes.ValueChangedEvent) => {
 
 <style>
 .dx-scheduler-appointment {
-  color: #242424;
+  color: var(--dxds-color-content-static-light, #242424);
 }
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
@@ -292,8 +292,8 @@ const onOverlappingRuleChanged = (e: DxSelectBoxTypes.ValueChangedEvent) => {
 }
 
 .conflict-informer {
-  background-color: #FCEAE8;
-  color: #C50F1F;
+  background-color: var(--dxds-color-bg-danger-subtler, #FCEAE8);
+  color: var(--dxds-color-content-danger, #C50F1F);
   font-size: 12px;
   padding: 0 12px;
   height: 36px;
diff --git a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/jQuery/styles.css b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/jQuery/styles.css
index 52890693b7f4..a3ecf825ae33 100644
--- a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/jQuery/styles.css
+++ b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/jQuery/styles.css
@@ -1,10 +1,10 @@
 .dx-scheduler-appointment {
-  color: #242424;
+  color: var(--dxds-color-content-static-light, #242424);
 }
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
@@ -20,8 +20,8 @@
 }
 
 .conflict-informer {
-  background-color: #FCEAE8;
-  color: #C50F1F;
+  background-color: var(--dxds-color-bg-danger-subtler, #FCEAE8);
+  color: var(--dxds-color-content-danger, #C50F1F);
   font-size: 12px;
   padding: 0 12px;
   height: 36px;
diff --git a/apps/demos/Demos/Scheduler/Resources/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/Resources/Angular/app/app.component.css
index 1fe9c38fdd0f..0901725a14e0 100644
--- a/apps/demos/Demos/Scheduler/Resources/Angular/app/app.component.css
+++ b/apps/demos/Demos/Scheduler/Resources/Angular/app/app.component.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Scheduler/Resources/React/styles.css b/apps/demos/Demos/Scheduler/Resources/React/styles.css
index 1fe9c38fdd0f..0901725a14e0 100644
--- a/apps/demos/Demos/Scheduler/Resources/React/styles.css
+++ b/apps/demos/Demos/Scheduler/Resources/React/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Scheduler/Resources/ReactJs/styles.css b/apps/demos/Demos/Scheduler/Resources/ReactJs/styles.css
index 1fe9c38fdd0f..0901725a14e0 100644
--- a/apps/demos/Demos/Scheduler/Resources/ReactJs/styles.css
+++ b/apps/demos/Demos/Scheduler/Resources/ReactJs/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Scheduler/Resources/Vue/App.vue b/apps/demos/Demos/Scheduler/Resources/Vue/App.vue
index e3ddc16ec5db..b21d575838ed 100644
--- a/apps/demos/Demos/Scheduler/Resources/Vue/App.vue
+++ b/apps/demos/Demos/Scheduler/Resources/Vue/App.vue
@@ -98,7 +98,7 @@ function onRadioGroupValueChanged(e: DxRadioGroupTypes.ValueChangedEvent) {
 <style>
   .options {
     padding: 20px;
-    background-color: rgba(191, 191, 191, 0.15);
+    background-color: var(--dx-color-options-panel-bg);
     margin-top: 20px;
   }
 
diff --git a/apps/demos/Demos/Scheduler/Resources/jQuery/styles.css b/apps/demos/Demos/Scheduler/Resources/jQuery/styles.css
index 1fe9c38fdd0f..0901725a14e0 100644
--- a/apps/demos/Demos/Scheduler/Resources/jQuery/styles.css
+++ b/apps/demos/Demos/Scheduler/Resources/jQuery/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Scheduler/Templates/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/Templates/Angular/app/app.component.css
index 6c8ae9343a50..744fdd7cd4c6 100644
--- a/apps/demos/Demos/Scheduler/Templates/Angular/app/app.component.css
+++ b/apps/demos/Demos/Scheduler/Templates/Angular/app/app.component.css
@@ -35,7 +35,7 @@
 
 ::ng-deep .movie-preview > .movie-details {
   font-size: 12px;
-  color: #242424;
+  color: var(--dxds-color-content, #242424);
 }
 
 ::ng-deep .movie-preview > .movie-details > .title {
diff --git a/apps/demos/Demos/Scheduler/Templates/React/styles.css b/apps/demos/Demos/Scheduler/Templates/React/styles.css
index 754b4e4f8522..cd0f4ff2e317 100644
--- a/apps/demos/Demos/Scheduler/Templates/React/styles.css
+++ b/apps/demos/Demos/Scheduler/Templates/React/styles.css
@@ -35,7 +35,7 @@
 
 .movie-preview>.movie-details {
   font-size: 12px;
-  color: #242424;
+  color: var(--dxds-color-content, #242424);
 }
 
 .movie-preview>.movie-details>.title {
diff --git a/apps/demos/Demos/Scheduler/Templates/ReactJs/styles.css b/apps/demos/Demos/Scheduler/Templates/ReactJs/styles.css
index 754b4e4f8522..cd0f4ff2e317 100644
--- a/apps/demos/Demos/Scheduler/Templates/ReactJs/styles.css
+++ b/apps/demos/Demos/Scheduler/Templates/ReactJs/styles.css
@@ -35,7 +35,7 @@
 
 .movie-preview>.movie-details {
   font-size: 12px;
-  color: #242424;
+  color: var(--dxds-color-content, #242424);
 }
 
 .movie-preview>.movie-details>.title {
diff --git a/apps/demos/Demos/Scheduler/Templates/Vue/styles.css b/apps/demos/Demos/Scheduler/Templates/Vue/styles.css
index 754b4e4f8522..cd0f4ff2e317 100644
--- a/apps/demos/Demos/Scheduler/Templates/Vue/styles.css
+++ b/apps/demos/Demos/Scheduler/Templates/Vue/styles.css
@@ -35,7 +35,7 @@
 
 .movie-preview>.movie-details {
   font-size: 12px;
-  color: #242424;
+  color: var(--dxds-color-content, #242424);
 }
 
 .movie-preview>.movie-details>.title {
diff --git a/apps/demos/Demos/Scheduler/Templates/jQuery/styles.css b/apps/demos/Demos/Scheduler/Templates/jQuery/styles.css
index bf977aebaa30..9be9df856758 100644
--- a/apps/demos/Demos/Scheduler/Templates/jQuery/styles.css
+++ b/apps/demos/Demos/Scheduler/Templates/jQuery/styles.css
@@ -35,7 +35,7 @@
 
 .movie-preview > .movie-details {
   font-size: 12px;
-  color: #242424;
+  color: var(--dxds-color-content, #242424);
 }
 
 .movie-preview > .movie-details > .title {
diff --git a/apps/demos/Demos/Scheduler/Timelines/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/Timelines/Angular/app/app.component.css
index 3da991324e1e..0366d15bfe81 100644
--- a/apps/demos/Demos/Scheduler/Timelines/Angular/app/app.component.css
+++ b/apps/demos/Demos/Scheduler/Timelines/Angular/app/app.component.css
@@ -5,12 +5,12 @@
 }
 
 ::ng-deep .dx-scheduler-appointment-content {
-  color: white;
+  color: var(--dxds-color-content-on-color, white);
 }
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
@@ -24,4 +24,4 @@
   display: flex;
   align-items: center;
   gap: 10px;
-}
\ No newline at end of file
+}
diff --git a/apps/demos/Demos/Scheduler/Timelines/React/styles.css b/apps/demos/Demos/Scheduler/Timelines/React/styles.css
index 01365f1c9068..2c26ddada41d 100644
--- a/apps/demos/Demos/Scheduler/Timelines/React/styles.css
+++ b/apps/demos/Demos/Scheduler/Timelines/React/styles.css
@@ -5,12 +5,12 @@
 }
 
 .dx-scheduler-appointment-content {
-  color: white;
+  color: var(--dxds-color-content-on-color, white);
 }
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Scheduler/Timelines/ReactJs/styles.css b/apps/demos/Demos/Scheduler/Timelines/ReactJs/styles.css
index 01365f1c9068..2c26ddada41d 100644
--- a/apps/demos/Demos/Scheduler/Timelines/ReactJs/styles.css
+++ b/apps/demos/Demos/Scheduler/Timelines/ReactJs/styles.css
@@ -5,12 +5,12 @@
 }
 
 .dx-scheduler-appointment-content {
-  color: white;
+  color: var(--dxds-color-content-on-color, white);
 }
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Scheduler/Timelines/Vue/App.vue b/apps/demos/Demos/Scheduler/Timelines/Vue/App.vue
index 440f2fbc09b7..da602e216f56 100644
--- a/apps/demos/Demos/Scheduler/Timelines/Vue/App.vue
+++ b/apps/demos/Demos/Scheduler/Timelines/Vue/App.vue
@@ -73,12 +73,12 @@ function onSnapToCellsModeChanged(e: DxSelectBoxTypes.ValueChangedEvent) {
 }
 
 .dx-scheduler-appointment-content {
-  color: white;
+  color: var(--dxds-color-content-on-color, white);
 }
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Scheduler/Timelines/jQuery/styles.css b/apps/demos/Demos/Scheduler/Timelines/jQuery/styles.css
index 01365f1c9068..2c26ddada41d 100644
--- a/apps/demos/Demos/Scheduler/Timelines/jQuery/styles.css
+++ b/apps/demos/Demos/Scheduler/Timelines/jQuery/styles.css
@@ -5,12 +5,12 @@
 }
 
 .dx-scheduler-appointment-content {
-  color: white;
+  color: var(--dxds-color-content-on-color, white);
 }
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Scheduler/Toolbar/Vue/App.vue b/apps/demos/Demos/Scheduler/Toolbar/Vue/App.vue
index 1a798fcf1b94..ff98539117f4 100644
--- a/apps/demos/Demos/Scheduler/Toolbar/Vue/App.vue
+++ b/apps/demos/Demos/Scheduler/Toolbar/Vue/App.vue
@@ -38,17 +38,19 @@
       />
     </DxToolbar>
     <template #assigneesTemplate>
-      <DxSelectBox
-        placeholder="Select Employee"
-        :items="assignees"
-        :show-clear-button="true"
-        display-expr="text"
-        value-expr="id"
-        :input-attr="{ 'aria-label': 'Select Employee' }"
-        :width="200"
-        :value="assigneesFilterValue"
-        @value-changed="onAssigneesFilterChange"
-      />
+      <div>
+        <DxSelectBox
+          placeholder="Select Employee"
+          :items="assignees"
+          :show-clear-button="true"
+          display-expr="text"
+          value-expr="id"
+          :input-attr="{ 'aria-label': 'Select Employee' }"
+          :width="200"
+          :value="assigneesFilterValue"
+          @value-changed="onAssigneesFilterChange"
+        />
+      </div>
     </template>
   </DxScheduler>
 </template>
diff --git a/apps/demos/Demos/Scheduler/WorkShifts/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/WorkShifts/Angular/app/app.component.css
index 9895913b047b..c1ce088db317 100644
--- a/apps/demos/Demos/Scheduler/WorkShifts/Angular/app/app.component.css
+++ b/apps/demos/Demos/Scheduler/WorkShifts/Angular/app/app.component.css
@@ -1,5 +1,5 @@
 .options {
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
   display: flex;
   align-items: flex-start;
diff --git a/apps/demos/Demos/Scheduler/WorkShifts/React/styles.css b/apps/demos/Demos/Scheduler/WorkShifts/React/styles.css
index 9895913b047b..c1ce088db317 100644
--- a/apps/demos/Demos/Scheduler/WorkShifts/React/styles.css
+++ b/apps/demos/Demos/Scheduler/WorkShifts/React/styles.css
@@ -1,5 +1,5 @@
 .options {
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
   display: flex;
   align-items: flex-start;
diff --git a/apps/demos/Demos/Scheduler/WorkShifts/ReactJs/styles.css b/apps/demos/Demos/Scheduler/WorkShifts/ReactJs/styles.css
index 9895913b047b..c1ce088db317 100644
--- a/apps/demos/Demos/Scheduler/WorkShifts/ReactJs/styles.css
+++ b/apps/demos/Demos/Scheduler/WorkShifts/ReactJs/styles.css
@@ -1,5 +1,5 @@
 .options {
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
   display: flex;
   align-items: flex-start;
diff --git a/apps/demos/Demos/Scheduler/WorkShifts/Vue/App.vue b/apps/demos/Demos/Scheduler/WorkShifts/Vue/App.vue
index b1ad99e90b36..56524d8558f9 100644
--- a/apps/demos/Demos/Scheduler/WorkShifts/Vue/App.vue
+++ b/apps/demos/Demos/Scheduler/WorkShifts/Vue/App.vue
@@ -44,7 +44,7 @@ function onShiftChanged(e: DxRadioGroupTypes.ValueChangedEvent) {
 
 <style>
 .options {
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
   display: flex;
   align-items: flex-start;
diff --git a/apps/demos/Demos/Scheduler/WorkShifts/jQuery/styles.css b/apps/demos/Demos/Scheduler/WorkShifts/jQuery/styles.css
index 9895913b047b..c1ce088db317 100644
--- a/apps/demos/Demos/Scheduler/WorkShifts/jQuery/styles.css
+++ b/apps/demos/Demos/Scheduler/WorkShifts/jQuery/styles.css
@@ -1,5 +1,5 @@
 .options {
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
   display: flex;
   align-items: flex-start;
diff --git a/apps/demos/Demos/ScrollView/Overview/Angular/app/app.component.css b/apps/demos/Demos/ScrollView/Overview/Angular/app/app.component.css
index a2d25848639f..ea2780c45ee0 100644
--- a/apps/demos/Demos/ScrollView/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/ScrollView/Overview/Angular/app/app.component.css
@@ -16,7 +16,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   bottom: 0;
   left: 0;
diff --git a/apps/demos/Demos/ScrollView/Overview/React/styles.css b/apps/demos/Demos/ScrollView/Overview/React/styles.css
index c6eeb84b20b9..4c7f95f57ea4 100644
--- a/apps/demos/Demos/ScrollView/Overview/React/styles.css
+++ b/apps/demos/Demos/ScrollView/Overview/React/styles.css
@@ -16,7 +16,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   bottom: 0;
   left: 0;
diff --git a/apps/demos/Demos/ScrollView/Overview/ReactJs/styles.css b/apps/demos/Demos/ScrollView/Overview/ReactJs/styles.css
index c6eeb84b20b9..4c7f95f57ea4 100644
--- a/apps/demos/Demos/ScrollView/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/ScrollView/Overview/ReactJs/styles.css
@@ -16,7 +16,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   bottom: 0;
   left: 0;
diff --git a/apps/demos/Demos/ScrollView/Overview/Vue/App.vue b/apps/demos/Demos/ScrollView/Overview/Vue/App.vue
index c535705152fd..5b37c20e3da1 100644
--- a/apps/demos/Demos/ScrollView/Overview/Vue/App.vue
+++ b/apps/demos/Demos/ScrollView/Overview/Vue/App.vue
@@ -134,7 +134,7 @@ function onValueChanged(args: DxCheckBoxTypes.ValueChangedEvent) {
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   bottom: 0;
   left: 0;
diff --git a/apps/demos/Demos/ScrollView/Overview/jQuery/styles.css b/apps/demos/Demos/ScrollView/Overview/jQuery/styles.css
index 11534894fff3..be430e51802d 100644
--- a/apps/demos/Demos/ScrollView/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/ScrollView/Overview/jQuery/styles.css
@@ -16,7 +16,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   bottom: 0;
   left: 0;
diff --git a/apps/demos/Demos/SelectBox/Grouping/Angular/app/app.component.css b/apps/demos/Demos/SelectBox/Grouping/Angular/app/app.component.css
index 7038173143d2..1278dcc162bc 100644
--- a/apps/demos/Demos/SelectBox/Grouping/Angular/app/app.component.css
+++ b/apps/demos/Demos/SelectBox/Grouping/Angular/app/app.component.css
@@ -1,5 +1,5 @@
 ::ng-deep .custom-icon .icon {
-  color: #f05b41;
+  color: var(--dxds-color-content-orange, #f05b41);
 }
 
 ::ng-deep .custom-icon {
diff --git a/apps/demos/Demos/SelectBox/Grouping/React/styles.css b/apps/demos/Demos/SelectBox/Grouping/React/styles.css
index 63ce2320c355..99bcc8f0ad4a 100644
--- a/apps/demos/Demos/SelectBox/Grouping/React/styles.css
+++ b/apps/demos/Demos/SelectBox/Grouping/React/styles.css
@@ -1,5 +1,5 @@
 .custom-icon .icon {
-  color: #f05b41;
+  color: var(--dxds-color-content-orange, #f05b41);
 }
 
 .custom-icon {
diff --git a/apps/demos/Demos/SelectBox/Grouping/ReactJs/styles.css b/apps/demos/Demos/SelectBox/Grouping/ReactJs/styles.css
index 63ce2320c355..99bcc8f0ad4a 100644
--- a/apps/demos/Demos/SelectBox/Grouping/ReactJs/styles.css
+++ b/apps/demos/Demos/SelectBox/Grouping/ReactJs/styles.css
@@ -1,5 +1,5 @@
 .custom-icon .icon {
-  color: #f05b41;
+  color: var(--dxds-color-content-orange, #f05b41);
 }
 
 .custom-icon {
diff --git a/apps/demos/Demos/SelectBox/Grouping/Vue/Group.vue b/apps/demos/Demos/SelectBox/Grouping/Vue/Group.vue
index dfb2ee0cce13..7ef210a4ead7 100644
--- a/apps/demos/Demos/SelectBox/Grouping/Vue/Group.vue
+++ b/apps/demos/Demos/SelectBox/Grouping/Vue/Group.vue
@@ -13,7 +13,7 @@ withDefaults(defineProps<{
 </script>
 <style scoped>
   .custom-icon .icon {
-    color: #f05b41;
+    color: var(--dxds-color-content-orange, #f05b41);
   }
 
   .custom-icon {
diff --git a/apps/demos/Demos/SelectBox/Grouping/jQuery/styles.css b/apps/demos/Demos/SelectBox/Grouping/jQuery/styles.css
index 63ce2320c355..99bcc8f0ad4a 100644
--- a/apps/demos/Demos/SelectBox/Grouping/jQuery/styles.css
+++ b/apps/demos/Demos/SelectBox/Grouping/jQuery/styles.css
@@ -1,5 +1,5 @@
 .custom-icon .icon {
-  color: #f05b41;
+  color: var(--dxds-color-content-orange, #f05b41);
 }
 
 .custom-icon {
diff --git a/apps/demos/Demos/SelectBox/SearchAndEditing/Angular/app/app.component.css b/apps/demos/Demos/SelectBox/SearchAndEditing/Angular/app/app.component.css
index c5771c3685cb..f131b81d29e4 100644
--- a/apps/demos/Demos/SelectBox/SearchAndEditing/Angular/app/app.component.css
+++ b/apps/demos/Demos/SelectBox/SearchAndEditing/Angular/app/app.component.css
@@ -12,7 +12,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   right: 0;
   top: 0;
diff --git a/apps/demos/Demos/SelectBox/SearchAndEditing/React/styles.css b/apps/demos/Demos/SelectBox/SearchAndEditing/React/styles.css
index 2708013a9c30..505eeb26ac27 100644
--- a/apps/demos/Demos/SelectBox/SearchAndEditing/React/styles.css
+++ b/apps/demos/Demos/SelectBox/SearchAndEditing/React/styles.css
@@ -12,7 +12,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   right: 0;
   top: 0;
diff --git a/apps/demos/Demos/SelectBox/SearchAndEditing/ReactJs/styles.css b/apps/demos/Demos/SelectBox/SearchAndEditing/ReactJs/styles.css
index 2708013a9c30..505eeb26ac27 100644
--- a/apps/demos/Demos/SelectBox/SearchAndEditing/ReactJs/styles.css
+++ b/apps/demos/Demos/SelectBox/SearchAndEditing/ReactJs/styles.css
@@ -12,7 +12,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   right: 0;
   top: 0;
diff --git a/apps/demos/Demos/SelectBox/SearchAndEditing/Vue/App.vue b/apps/demos/Demos/SelectBox/SearchAndEditing/Vue/App.vue
index e5f2d8459b7d..0723063a72ff 100644
--- a/apps/demos/Demos/SelectBox/SearchAndEditing/Vue/App.vue
+++ b/apps/demos/Demos/SelectBox/SearchAndEditing/Vue/App.vue
@@ -175,7 +175,7 @@ function customItemCreating(data: DxSelectBoxTypes.CustomItemCreatingEvent) {
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   right: 0;
   top: 0;
diff --git a/apps/demos/Demos/SelectBox/SearchAndEditing/jQuery/styles.css b/apps/demos/Demos/SelectBox/SearchAndEditing/jQuery/styles.css
index 2708013a9c30..505eeb26ac27 100644
--- a/apps/demos/Demos/SelectBox/SearchAndEditing/jQuery/styles.css
+++ b/apps/demos/Demos/SelectBox/SearchAndEditing/jQuery/styles.css
@@ -12,7 +12,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   right: 0;
   top: 0;
diff --git a/apps/demos/Demos/Sortable/Customization/Angular/app/app.component.css b/apps/demos/Demos/Sortable/Customization/Angular/app/app.component.css
index 6d73b93829fd..baa250b33f01 100644
--- a/apps/demos/Demos/Sortable/Customization/Angular/app/app.component.css
+++ b/apps/demos/Demos/Sortable/Customization/Angular/app/app.component.css
@@ -58,7 +58,7 @@
   right: 0;
   width: 260px;
   top: 0;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/Sortable/Customization/React/styles.css b/apps/demos/Demos/Sortable/Customization/React/styles.css
index 6d73b93829fd..baa250b33f01 100644
--- a/apps/demos/Demos/Sortable/Customization/React/styles.css
+++ b/apps/demos/Demos/Sortable/Customization/React/styles.css
@@ -58,7 +58,7 @@
   right: 0;
   width: 260px;
   top: 0;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/Sortable/Customization/ReactJs/styles.css b/apps/demos/Demos/Sortable/Customization/ReactJs/styles.css
index 6d73b93829fd..baa250b33f01 100644
--- a/apps/demos/Demos/Sortable/Customization/ReactJs/styles.css
+++ b/apps/demos/Demos/Sortable/Customization/ReactJs/styles.css
@@ -58,7 +58,7 @@
   right: 0;
   width: 260px;
   top: 0;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/Sortable/Customization/Vue/App.vue b/apps/demos/Demos/Sortable/Customization/Vue/App.vue
index bac8e145a961..1faa5d525c63 100644
--- a/apps/demos/Demos/Sortable/Customization/Vue/App.vue
+++ b/apps/demos/Demos/Sortable/Customization/Vue/App.vue
@@ -203,7 +203,7 @@ function onDragTemplateChanged(e: DxCheckBoxTypes.ValueChangedEvent) {
   right: 0;
   width: 260px;
   top: 0;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/Sortable/Customization/jQuery/styles.css b/apps/demos/Demos/Sortable/Customization/jQuery/styles.css
index 6d73b93829fd..baa250b33f01 100644
--- a/apps/demos/Demos/Sortable/Customization/jQuery/styles.css
+++ b/apps/demos/Demos/Sortable/Customization/jQuery/styles.css
@@ -58,7 +58,7 @@
   right: 0;
   width: 260px;
   top: 0;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/Sortable/Kanban/Angular/app/app.component.css b/apps/demos/Demos/Sortable/Kanban/Angular/app/app.component.css
index 6a50599389a3..94ee581fa305 100644
--- a/apps/demos/Demos/Sortable/Kanban/Angular/app/app.component.css
+++ b/apps/demos/Demos/Sortable/Kanban/Angular/app/app.component.css
@@ -5,7 +5,7 @@
 .list {
   border-radius: 8px;
   margin: 5px;
-  background-color: rgba(192, 192, 192, 0.4);
+  background-color: var(--dxds-color-bg-low, rgba(192, 192, 192, 0.4));
   display: inline-block;
   vertical-align: top;
   white-space: normal;
@@ -14,8 +14,7 @@
 .list-title {
   color: var(--dx-color-text);
   font-size: 16px;
-  padding: 10px;
-  padding-left: 30px;
+  padding: 10px 10px 10px 30px;
   margin-bottom: -10px;
   font-weight: bold;
   cursor: pointer;
@@ -56,23 +55,23 @@
   left: 5px;
   width: 5px;
   border-radius: 2px;
-  background: #86c285;
+  background: var(--dxds-color-bg-green, #86c285);
 }
 
 .priority-1 {
-  background: #adadad;
+  background: var(--dxds-color-bg-gray, #adadad);
 }
 
 .priority-2 {
-  background: #86c285;
+  background: var(--dxds-color-bg-green, #86c285);
 }
 
 .priority-3 {
-  background: #edc578;
+  background: var(--dxds-color-bg-yellow, #edc578);
 }
 
 .priority-4 {
-  background: #ef7d59;
+  background: var(--dxds-color-bg-red, #ef7d59);
 }
 
 ::ng-deep .dx-sortable {
diff --git a/apps/demos/Demos/Sortable/Kanban/React/styles.css b/apps/demos/Demos/Sortable/Kanban/React/styles.css
index 1b69778ed9e7..a19f29a6da7b 100644
--- a/apps/demos/Demos/Sortable/Kanban/React/styles.css
+++ b/apps/demos/Demos/Sortable/Kanban/React/styles.css
@@ -5,7 +5,7 @@
 .list {
   border-radius: 8px;
   margin: 5px;
-  background-color: rgba(192, 192, 192, 0.4);
+  background-color: var(--dxds-color-bg-low, rgba(192, 192, 192, 0.4));
   display: inline-block;
   vertical-align: top;
   white-space: normal;
@@ -14,8 +14,7 @@
 .list-title {
   color: var(--dx-color-text);
   font-size: 16px;
-  padding: 10px;
-  padding-left: 30px;
+  padding: 10px 10px 10px 30px;
   margin-bottom: -10px;
   font-weight: bold;
   cursor: pointer;
@@ -56,21 +55,21 @@
   left: 5px;
   width: 5px;
   border-radius: 2px;
-  background: #86c285;
+  background: var(--dxds-color-bg-green, #86c285);
 }
 
 .priority-1 {
-  background: #adadad;
+  background: var(--dxds-color-bg-gray, #adadad);
 }
 
 .priority-2 {
-  background: #86c285;
+  background: var(--dxds-color-bg-green, #86c285);
 }
 
 .priority-3 {
-  background: #edc578;
+  background: var(--dxds-color-bg-yellow, #edc578);
 }
 
 .priority-4 {
-  background: #ef7d59;
+  background: var(--dxds-color-bg-red, #ef7d59);
 }
diff --git a/apps/demos/Demos/Sortable/Kanban/ReactJs/styles.css b/apps/demos/Demos/Sortable/Kanban/ReactJs/styles.css
index 1b69778ed9e7..a19f29a6da7b 100644
--- a/apps/demos/Demos/Sortable/Kanban/ReactJs/styles.css
+++ b/apps/demos/Demos/Sortable/Kanban/ReactJs/styles.css
@@ -5,7 +5,7 @@
 .list {
   border-radius: 8px;
   margin: 5px;
-  background-color: rgba(192, 192, 192, 0.4);
+  background-color: var(--dxds-color-bg-low, rgba(192, 192, 192, 0.4));
   display: inline-block;
   vertical-align: top;
   white-space: normal;
@@ -14,8 +14,7 @@
 .list-title {
   color: var(--dx-color-text);
   font-size: 16px;
-  padding: 10px;
-  padding-left: 30px;
+  padding: 10px 10px 10px 30px;
   margin-bottom: -10px;
   font-weight: bold;
   cursor: pointer;
@@ -56,21 +55,21 @@
   left: 5px;
   width: 5px;
   border-radius: 2px;
-  background: #86c285;
+  background: var(--dxds-color-bg-green, #86c285);
 }
 
 .priority-1 {
-  background: #adadad;
+  background: var(--dxds-color-bg-gray, #adadad);
 }
 
 .priority-2 {
-  background: #86c285;
+  background: var(--dxds-color-bg-green, #86c285);
 }
 
 .priority-3 {
-  background: #edc578;
+  background: var(--dxds-color-bg-yellow, #edc578);
 }
 
 .priority-4 {
-  background: #ef7d59;
+  background: var(--dxds-color-bg-red, #ef7d59);
 }
diff --git a/apps/demos/Demos/Sortable/Kanban/Vue/App.vue b/apps/demos/Demos/Sortable/Kanban/Vue/App.vue
index ec6d5be55d9e..d482eeaa0b80 100644
--- a/apps/demos/Demos/Sortable/Kanban/Vue/App.vue
+++ b/apps/demos/Demos/Sortable/Kanban/Vue/App.vue
@@ -86,7 +86,7 @@ function getPriorityClass(task: Task) {
 .list {
   border-radius: 8px;
   margin: 5px;
-  background-color: rgba(192, 192, 192, 0.4);
+  background-color: var(--dxds-color-bg-low, rgba(192, 192, 192, 0.4));
   display: inline-block;
   vertical-align: top;
   white-space: normal;
@@ -95,8 +95,7 @@ function getPriorityClass(task: Task) {
 .list-title {
   color: var(--dx-color-text);
   font-size: 16px;
-  padding: 10px;
-  padding-left: 30px;
+  padding: 10px 10px 10px 30px;
   margin-bottom: -10px;
   font-weight: bold;
   cursor: pointer;
@@ -137,23 +136,23 @@ function getPriorityClass(task: Task) {
   left: 5px;
   width: 5px;
   border-radius: 2px;
-  background: #86c285;
+  background: var(--dxds-color-bg-green, #86c285);
 }
 
 .priority-1 {
-  background: #adadad;
+  background: var(--dxds-color-bg-gray, #adadad);
 }
 
 .priority-2 {
-  background: #86c285;
+  background: var(--dxds-color-bg-green, #86c285);
 }
 
 .priority-3 {
-  background: #edc578;
+  background: var(--dxds-color-bg-yellow, #edc578);
 }
 
 .priority-4 {
-  background: #ef7d59;
+  background: var(--dxds-color-bg-red, #ef7d59);
 }
 
 .dx-sortable {
diff --git a/apps/demos/Demos/Sortable/Kanban/jQuery/styles.css b/apps/demos/Demos/Sortable/Kanban/jQuery/styles.css
index 1b69778ed9e7..a19f29a6da7b 100644
--- a/apps/demos/Demos/Sortable/Kanban/jQuery/styles.css
+++ b/apps/demos/Demos/Sortable/Kanban/jQuery/styles.css
@@ -5,7 +5,7 @@
 .list {
   border-radius: 8px;
   margin: 5px;
-  background-color: rgba(192, 192, 192, 0.4);
+  background-color: var(--dxds-color-bg-low, rgba(192, 192, 192, 0.4));
   display: inline-block;
   vertical-align: top;
   white-space: normal;
@@ -14,8 +14,7 @@
 .list-title {
   color: var(--dx-color-text);
   font-size: 16px;
-  padding: 10px;
-  padding-left: 30px;
+  padding: 10px 10px 10px 30px;
   margin-bottom: -10px;
   font-weight: bold;
   cursor: pointer;
@@ -56,21 +55,21 @@
   left: 5px;
   width: 5px;
   border-radius: 2px;
-  background: #86c285;
+  background: var(--dxds-color-bg-green, #86c285);
 }
 
 .priority-1 {
-  background: #adadad;
+  background: var(--dxds-color-bg-gray, #adadad);
 }
 
 .priority-2 {
-  background: #86c285;
+  background: var(--dxds-color-bg-green, #86c285);
 }
 
 .priority-3 {
-  background: #edc578;
+  background: var(--dxds-color-bg-yellow, #edc578);
 }
 
 .priority-4 {
-  background: #ef7d59;
+  background: var(--dxds-color-bg-red, #ef7d59);
 }
diff --git a/apps/demos/Demos/SpeechToText/Overview/Angular/app/app.component.css b/apps/demos/Demos/SpeechToText/Overview/Angular/app/app.component.css
index 5e491f30aa74..0953a5c484ca 100644
--- a/apps/demos/Demos/SpeechToText/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/SpeechToText/Overview/Angular/app/app.component.css
@@ -24,7 +24,7 @@
   width: 300px;
   box-sizing: border-box;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   gap: 16px;
 }
 
diff --git a/apps/demos/Demos/SpeechToText/Overview/React/styles.css b/apps/demos/Demos/SpeechToText/Overview/React/styles.css
index 540b67751364..af6c519165b2 100644
--- a/apps/demos/Demos/SpeechToText/Overview/React/styles.css
+++ b/apps/demos/Demos/SpeechToText/Overview/React/styles.css
@@ -24,7 +24,7 @@
   width: 300px;
   box-sizing: border-box;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   gap: 16px;
 }
 
diff --git a/apps/demos/Demos/SpeechToText/Overview/ReactJs/styles.css b/apps/demos/Demos/SpeechToText/Overview/ReactJs/styles.css
index 540b67751364..af6c519165b2 100644
--- a/apps/demos/Demos/SpeechToText/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/SpeechToText/Overview/ReactJs/styles.css
@@ -24,7 +24,7 @@
   width: 300px;
   box-sizing: border-box;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   gap: 16px;
 }
 
diff --git a/apps/demos/Demos/SpeechToText/Overview/Vue/App.vue b/apps/demos/Demos/SpeechToText/Overview/Vue/App.vue
index 05f49ff956bd..84d1aaf8d890 100644
--- a/apps/demos/Demos/SpeechToText/Overview/Vue/App.vue
+++ b/apps/demos/Demos/SpeechToText/Overview/Vue/App.vue
@@ -229,7 +229,7 @@ function onDisplayModeChanged({ value }: { value?: string }) {
     width: 300px;
     box-sizing: border-box;
     padding: 20px;
-    background-color: rgba(191, 191, 191, 0.15);
+    background-color: var(--dx-color-options-panel-bg);
     gap: 16px;
   }
 
diff --git a/apps/demos/Demos/SpeechToText/Overview/jQuery/styles.css b/apps/demos/Demos/SpeechToText/Overview/jQuery/styles.css
index 93ab88bfe6be..0c54f0c47cae 100644
--- a/apps/demos/Demos/SpeechToText/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/SpeechToText/Overview/jQuery/styles.css
@@ -24,7 +24,7 @@
   width: 300px;
   box-sizing: border-box;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   gap: 16px;
 }
 
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..74d51960bd8b 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-subtle, 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..27da2f852d11 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-subtle, 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..27da2f852d11 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-subtle, 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..2a5cdd8bd9cb 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-subtle, 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..14c0a7919ac1 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-subtle, var(--dx-texteditor-color-label));
   font-size: 10px;
 }
 
diff --git a/apps/demos/Demos/Stepper/Overview/Angular/app/app.component.css b/apps/demos/Demos/Stepper/Overview/Angular/app/app.component.css
index 6fe82b225c47..639c37fd2e55 100644
--- a/apps/demos/Demos/Stepper/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/Stepper/Overview/Angular/app/app.component.css
@@ -73,7 +73,7 @@
   width: 300px;
   box-sizing: border-box;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   gap: 16px;
   height: 100%;
 }
diff --git a/apps/demos/Demos/Stepper/Overview/React/styles.css b/apps/demos/Demos/Stepper/Overview/React/styles.css
index b42ea9f1336c..4f7a24490e51 100644
--- a/apps/demos/Demos/Stepper/Overview/React/styles.css
+++ b/apps/demos/Demos/Stepper/Overview/React/styles.css
@@ -73,7 +73,7 @@
   width: 300px;
   box-sizing: border-box;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   gap: 16px;
   height: 100%;
 }
diff --git a/apps/demos/Demos/Stepper/Overview/ReactJs/styles.css b/apps/demos/Demos/Stepper/Overview/ReactJs/styles.css
index b42ea9f1336c..4f7a24490e51 100644
--- a/apps/demos/Demos/Stepper/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/Stepper/Overview/ReactJs/styles.css
@@ -73,7 +73,7 @@
   width: 300px;
   box-sizing: border-box;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   gap: 16px;
   height: 100%;
 }
diff --git a/apps/demos/Demos/Stepper/Overview/Vue/App.vue b/apps/demos/Demos/Stepper/Overview/Vue/App.vue
index cdb7f37fae9c..4644603c66a8 100644
--- a/apps/demos/Demos/Stepper/Overview/Vue/App.vue
+++ b/apps/demos/Demos/Stepper/Overview/Vue/App.vue
@@ -202,7 +202,7 @@ function getItemProps(step: Step, fields: Fields) {
   width: 300px;
   box-sizing: border-box;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   gap: 16px;
   height: 100%;
 }
diff --git a/apps/demos/Demos/Stepper/Overview/jQuery/styles.css b/apps/demos/Demos/Stepper/Overview/jQuery/styles.css
index a857d273c4b5..80639959cf55 100644
--- a/apps/demos/Demos/Stepper/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/Stepper/Overview/jQuery/styles.css
@@ -66,7 +66,7 @@
   width: 300px;
   box-sizing: border-box;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   gap: 16px;
 }
 
diff --git a/apps/demos/Demos/TabPanel/Overview/Angular/app/app.component.css b/apps/demos/Demos/TabPanel/Overview/Angular/app/app.component.css
index 320a5f6dc23e..ce7a94c7440f 100644
--- a/apps/demos/Demos/TabPanel/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/TabPanel/Overview/Angular/app/app.component.css
@@ -16,7 +16,7 @@
 }
 
 ::ng-deep .dx-theme-material .widget-container {
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 ::ng-deep .dx-tabpanel-tabs-position-left .dx-tabpanel-container,
@@ -40,7 +40,7 @@
   box-sizing: border-box;
   width: 272px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
@@ -68,7 +68,7 @@
   height: 50px;
   padding: 8px 12px 8px 8px;
   border-radius: 4px;
-  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: var(--dxds-box-shadow-xs, 0 1px 4px 0 rgba(0, 0, 0, 0.15));
 }
 
 ::ng-deep .task-item::before {
@@ -82,15 +82,15 @@
 }
 
 ::ng-deep .task-item-priority-high::before {
-  background-color: #e1bee7;
+  background-color: var(--dxds-color-bg-red, #e1bee7);
 }
 
 ::ng-deep .task-item-priority-medium::before {
-  background-color: #ffe0b2;
+  background-color: var(--dxds-color-bg-yellow, #ffe0b2);
 }
 
 ::ng-deep .task-item-priority-low::before {
-  background-color: #c8e6c9;
+  background-color: var(--dxds-color-bg-green, #c8e6c9);
 }
 
 ::ng-deep .task-item-text,
@@ -118,9 +118,9 @@
 }
 
 ::ng-deep .dx-color-scheme-contrast .task-item {
-  border: 1px solid #fff;
+  border: 1px solid var(--dxds-color-border-on-color-shared, #fff);
 }
 
 ::ng-deep .dx-theme-fluent.dx-color-scheme-blue-dark .task-item {
-  background-color: #1f1f1f;
+  background-color: var(--dxds-color-bg-red, #1f1f1f);
 }
diff --git a/apps/demos/Demos/TabPanel/Overview/React/styles.css b/apps/demos/Demos/TabPanel/Overview/React/styles.css
index 71ad3ea17b02..3ee47ad418b0 100644
--- a/apps/demos/Demos/TabPanel/Overview/React/styles.css
+++ b/apps/demos/Demos/TabPanel/Overview/React/styles.css
@@ -16,7 +16,7 @@
 }
 
 .dx-theme-material .widget-container {
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .dx-tabpanel-tabs-position-left .dx-tabpanel-container,
@@ -40,7 +40,7 @@
   box-sizing: border-box;
   width: 272px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
@@ -68,7 +68,7 @@
   height: 50px;
   padding: 8px 12px 8px 8px;
   border-radius: 4px;
-  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: var(--dxds-box-shadow-xs, 0 1px 4px 0 rgba(0, 0, 0, 0.15));
 }
 
 .task-item::before {
@@ -82,15 +82,15 @@
 }
 
 .task-item-priority-high::before {
-  background-color: #e1bee7;
+  background-color: var(--dxds-color-bg-red, #e1bee7);
 }
 
 .task-item-priority-medium::before {
-  background-color: #ffe0b2;
+  background-color: var(--dxds-color-bg-yellow, #ffe0b2);
 }
 
 .task-item-priority-low::before {
-  background-color: #c8e6c9;
+  background-color: var(--dxds-color-bg-green, #c8e6c9);
 }
 
 .task-item-text,
@@ -118,9 +118,9 @@
 }
 
 .dx-color-scheme-contrast .task-item {
-  border: 1px solid #fff;
+  border: 1px solid var(--dxds-color-border-on-color-shared, #fff);
 }
 
 .dx-theme-fluent.dx-color-scheme-blue-dark .task-item {
-  background-color: #1f1f1f;
+  background-color: var(--dxds-color-bg-red, #1f1f1f);
 }
diff --git a/apps/demos/Demos/TabPanel/Overview/ReactJs/styles.css b/apps/demos/Demos/TabPanel/Overview/ReactJs/styles.css
index 71ad3ea17b02..3ee47ad418b0 100644
--- a/apps/demos/Demos/TabPanel/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/TabPanel/Overview/ReactJs/styles.css
@@ -16,7 +16,7 @@
 }
 
 .dx-theme-material .widget-container {
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .dx-tabpanel-tabs-position-left .dx-tabpanel-container,
@@ -40,7 +40,7 @@
   box-sizing: border-box;
   width: 272px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
@@ -68,7 +68,7 @@
   height: 50px;
   padding: 8px 12px 8px 8px;
   border-radius: 4px;
-  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: var(--dxds-box-shadow-xs, 0 1px 4px 0 rgba(0, 0, 0, 0.15));
 }
 
 .task-item::before {
@@ -82,15 +82,15 @@
 }
 
 .task-item-priority-high::before {
-  background-color: #e1bee7;
+  background-color: var(--dxds-color-bg-red, #e1bee7);
 }
 
 .task-item-priority-medium::before {
-  background-color: #ffe0b2;
+  background-color: var(--dxds-color-bg-yellow, #ffe0b2);
 }
 
 .task-item-priority-low::before {
-  background-color: #c8e6c9;
+  background-color: var(--dxds-color-bg-green, #c8e6c9);
 }
 
 .task-item-text,
@@ -118,9 +118,9 @@
 }
 
 .dx-color-scheme-contrast .task-item {
-  border: 1px solid #fff;
+  border: 1px solid var(--dxds-color-border-on-color-shared, #fff);
 }
 
 .dx-theme-fluent.dx-color-scheme-blue-dark .task-item {
-  background-color: #1f1f1f;
+  background-color: var(--dxds-color-bg-red, #1f1f1f);
 }
diff --git a/apps/demos/Demos/TabPanel/Overview/Vue/App.vue b/apps/demos/Demos/TabPanel/Overview/Vue/App.vue
index 9db2d9989d0f..7131df5ee1a4 100644
--- a/apps/demos/Demos/TabPanel/Overview/Vue/App.vue
+++ b/apps/demos/Demos/TabPanel/Overview/Vue/App.vue
@@ -95,7 +95,7 @@ const iconPosition = ref(iconPositions[0]);
 }
 
 .dx-theme-material .widget-container {
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .dx-tabpanel-tabs-position-left .dx-tabpanel-container,
@@ -119,7 +119,7 @@ const iconPosition = ref(iconPositions[0]);
   box-sizing: border-box;
   width: 272px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/TabPanel/Overview/Vue/TaskItem.vue b/apps/demos/Demos/TabPanel/Overview/Vue/TaskItem.vue
index 76699ee28f0d..b78c882a437b 100644
--- a/apps/demos/Demos/TabPanel/Overview/Vue/TaskItem.vue
+++ b/apps/demos/Demos/TabPanel/Overview/Vue/TaskItem.vue
@@ -30,7 +30,7 @@ withDefaults(defineProps<{
   height: 50px;
   padding: 8px 12px 8px 8px;
   border-radius: 4px;
-  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: var(--dxds-box-shadow-xs, 0 1px 4px 0 rgba(0, 0, 0, 0.15));
 }
 
 .task-item::before {
@@ -44,15 +44,15 @@ withDefaults(defineProps<{
 }
 
 .task-item-priority-high::before {
-  background-color: #e1bee7;
+  background-color: var(--dxds-color-bg-red, #e1bee7);
 }
 
 .task-item-priority-medium::before {
-  background-color: #ffe0b2;
+  background-color: var(--dxds-color-bg-yellow, #ffe0b2);
 }
 
 .task-item-priority-low::before {
-  background-color: #c8e6c9;
+  background-color: var(--dxds-color-bg-green, #c8e6c9);
 }
 
 .task-item-text,
@@ -80,10 +80,10 @@ withDefaults(defineProps<{
 }
 
 .dx-color-scheme-contrast .task-item {
-  border: 1px solid #fff;
+  border: 1px solid var(--dxds-color-border-on-color-shared, #fff);
 }
 
 .dx-theme-fluent.dx-color-scheme-blue-dark .task-item {
-  background-color: #1f1f1f;
+  background-color: var(--dxds-color-bg-red, #1f1f1f);
 }
 </style>
diff --git a/apps/demos/Demos/TabPanel/Overview/jQuery/styles.css b/apps/demos/Demos/TabPanel/Overview/jQuery/styles.css
index 71ad3ea17b02..3ee47ad418b0 100644
--- a/apps/demos/Demos/TabPanel/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/TabPanel/Overview/jQuery/styles.css
@@ -16,7 +16,7 @@
 }
 
 .dx-theme-material .widget-container {
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .dx-tabpanel-tabs-position-left .dx-tabpanel-container,
@@ -40,7 +40,7 @@
   box-sizing: border-box;
   width: 272px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
@@ -68,7 +68,7 @@
   height: 50px;
   padding: 8px 12px 8px 8px;
   border-radius: 4px;
-  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: var(--dxds-box-shadow-xs, 0 1px 4px 0 rgba(0, 0, 0, 0.15));
 }
 
 .task-item::before {
@@ -82,15 +82,15 @@
 }
 
 .task-item-priority-high::before {
-  background-color: #e1bee7;
+  background-color: var(--dxds-color-bg-red, #e1bee7);
 }
 
 .task-item-priority-medium::before {
-  background-color: #ffe0b2;
+  background-color: var(--dxds-color-bg-yellow, #ffe0b2);
 }
 
 .task-item-priority-low::before {
-  background-color: #c8e6c9;
+  background-color: var(--dxds-color-bg-green, #c8e6c9);
 }
 
 .task-item-text,
@@ -118,9 +118,9 @@
 }
 
 .dx-color-scheme-contrast .task-item {
-  border: 1px solid #fff;
+  border: 1px solid var(--dxds-color-border-on-color-shared, #fff);
 }
 
 .dx-theme-fluent.dx-color-scheme-blue-dark .task-item {
-  background-color: #1f1f1f;
+  background-color: var(--dxds-color-bg-red, #1f1f1f);
 }
diff --git a/apps/demos/Demos/TabPanel/Templates/Angular/app/app.component.css b/apps/demos/Demos/TabPanel/Templates/Angular/app/app.component.css
index 33e8e593f7ec..6ee03da7bfe5 100644
--- a/apps/demos/Demos/TabPanel/Templates/Angular/app/app.component.css
+++ b/apps/demos/Demos/TabPanel/Templates/Angular/app/app.component.css
@@ -27,7 +27,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/TabPanel/Templates/React/styles.css b/apps/demos/Demos/TabPanel/Templates/React/styles.css
index ca49d985334a..f156f32c23ff 100644
--- a/apps/demos/Demos/TabPanel/Templates/React/styles.css
+++ b/apps/demos/Demos/TabPanel/Templates/React/styles.css
@@ -26,7 +26,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/TabPanel/Templates/ReactJs/styles.css b/apps/demos/Demos/TabPanel/Templates/ReactJs/styles.css
index ca49d985334a..f156f32c23ff 100644
--- a/apps/demos/Demos/TabPanel/Templates/ReactJs/styles.css
+++ b/apps/demos/Demos/TabPanel/Templates/ReactJs/styles.css
@@ -26,7 +26,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/TabPanel/Templates/Vue/App.vue b/apps/demos/Demos/TabPanel/Templates/Vue/App.vue
index 6e111a725b49..2e9d45e10c76 100644
--- a/apps/demos/Demos/TabPanel/Templates/Vue/App.vue
+++ b/apps/demos/Demos/TabPanel/Templates/Vue/App.vue
@@ -112,7 +112,7 @@ const swipeEnabled = ref(true);
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/TabPanel/Templates/jQuery/styles.css b/apps/demos/Demos/TabPanel/Templates/jQuery/styles.css
index 0335226ae77d..33c73534d716 100644
--- a/apps/demos/Demos/TabPanel/Templates/jQuery/styles.css
+++ b/apps/demos/Demos/TabPanel/Templates/jQuery/styles.css
@@ -27,7 +27,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/Tabs/Overview/Angular/app/app.component.css b/apps/demos/Demos/Tabs/Overview/Angular/app/app.component.css
index 6ca9df460d49..22af4c2c088a 100644
--- a/apps/demos/Demos/Tabs/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/Tabs/Overview/Angular/app/app.component.css
@@ -41,7 +41,7 @@
   flex-direction: column;
   flex-shrink: 0;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
@@ -66,10 +66,10 @@
 }
 
 ::ng-deep .dx-viewport:not(.dx-theme-generic) .dx-tabs-horizontal {
-  border-block-end: 1px solid rgb(225, 225, 225, 0.4);
+  border-block-end: 1px solid var(--dxds-color-border-subtle, rgb(225, 225, 225, 0.4));
 }
 
 ::ng-deep .dx-viewport:not(.dx-theme-generic) .dx-tabs-vertical {
   height: 232px;
-  border-inline-end: 1px solid rgb(225, 225, 225, 0.4);
+  border-inline-end: 1px solid var(--dxds-color-border-subtle, rgb(225, 225, 225, 0.4));
 }
diff --git a/apps/demos/Demos/Tabs/Overview/React/styles.css b/apps/demos/Demos/Tabs/Overview/React/styles.css
index b5813c6b2244..f280bb196d5e 100644
--- a/apps/demos/Demos/Tabs/Overview/React/styles.css
+++ b/apps/demos/Demos/Tabs/Overview/React/styles.css
@@ -41,7 +41,7 @@
   flex-direction: column;
   flex-shrink: 0;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
@@ -66,10 +66,10 @@
 }
 
 .dx-viewport:not(.dx-theme-generic) .dx-tabs-horizontal {
-  border-block-end: 1px solid rgb(225, 225, 225, 0.4);
+  border-block-end: 1px solid var(--dxds-color-border-subtle, rgb(225, 225, 225, 0.4));
 }
 
 .dx-viewport:not(.dx-theme-generic) .dx-tabs-vertical {
   height: 232px;
-  border-inline-end: 1px solid rgb(225, 225, 225, 0.4);
+  border-inline-end: 1px solid var(--dxds-color-border-subtle, rgb(225, 225, 225, 0.4));
 }
diff --git a/apps/demos/Demos/Tabs/Overview/ReactJs/styles.css b/apps/demos/Demos/Tabs/Overview/ReactJs/styles.css
index b5813c6b2244..f280bb196d5e 100644
--- a/apps/demos/Demos/Tabs/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/Tabs/Overview/ReactJs/styles.css
@@ -41,7 +41,7 @@
   flex-direction: column;
   flex-shrink: 0;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
@@ -66,10 +66,10 @@
 }
 
 .dx-viewport:not(.dx-theme-generic) .dx-tabs-horizontal {
-  border-block-end: 1px solid rgb(225, 225, 225, 0.4);
+  border-block-end: 1px solid var(--dxds-color-border-subtle, rgb(225, 225, 225, 0.4));
 }
 
 .dx-viewport:not(.dx-theme-generic) .dx-tabs-vertical {
   height: 232px;
-  border-inline-end: 1px solid rgb(225, 225, 225, 0.4);
+  border-inline-end: 1px solid var(--dxds-color-border-subtle, rgb(225, 225, 225, 0.4));
 }
diff --git a/apps/demos/Demos/Tabs/Overview/Vue/App.vue b/apps/demos/Demos/Tabs/Overview/Vue/App.vue
index d100e9552bfb..b23d25b72bb1 100644
--- a/apps/demos/Demos/Tabs/Overview/Vue/App.vue
+++ b/apps/demos/Demos/Tabs/Overview/Vue/App.vue
@@ -166,7 +166,7 @@ watch(scrollByContent, enforceWidthConstraint);
   flex-direction: column;
   flex-shrink: 0;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
@@ -191,11 +191,11 @@ watch(scrollByContent, enforceWidthConstraint);
 }
 
 .dx-viewport:not(.dx-theme-generic) .dx-tabs-horizontal {
-  border-block-end: 1px solid rgb(225, 225, 225, 0.4);
+  border-block-end: 1px solid var(--dxds-color-border-subtle, rgb(225, 225, 225, 0.4));
 }
 
 .dx-viewport:not(.dx-theme-generic) .dx-tabs-vertical {
   height: 232px;
-  border-inline-end: 1px solid rgb(225, 225, 225, 0.4);
+  border-inline-end: 1px solid var(--dxds-color-border-subtle, rgb(225, 225, 225, 0.4));
 }
 </style>
diff --git a/apps/demos/Demos/Tabs/Overview/jQuery/styles.css b/apps/demos/Demos/Tabs/Overview/jQuery/styles.css
index b5813c6b2244..f280bb196d5e 100644
--- a/apps/demos/Demos/Tabs/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/Tabs/Overview/jQuery/styles.css
@@ -41,7 +41,7 @@
   flex-direction: column;
   flex-shrink: 0;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
@@ -66,10 +66,10 @@
 }
 
 .dx-viewport:not(.dx-theme-generic) .dx-tabs-horizontal {
-  border-block-end: 1px solid rgb(225, 225, 225, 0.4);
+  border-block-end: 1px solid var(--dxds-color-border-subtle, rgb(225, 225, 225, 0.4));
 }
 
 .dx-viewport:not(.dx-theme-generic) .dx-tabs-vertical {
   height: 232px;
-  border-inline-end: 1px solid rgb(225, 225, 225, 0.4);
+  border-inline-end: 1px solid var(--dxds-color-border-subtle, rgb(225, 225, 225, 0.4));
 }
diff --git a/apps/demos/Demos/TagBox/Grouping/Angular/app/app.component.css b/apps/demos/Demos/TagBox/Grouping/Angular/app/app.component.css
index 01e5b0b3bd12..0c1b59e86db1 100644
--- a/apps/demos/Demos/TagBox/Grouping/Angular/app/app.component.css
+++ b/apps/demos/Demos/TagBox/Grouping/Angular/app/app.component.css
@@ -1,5 +1,5 @@
 ::ng-deep .custom-icon .icon {
-  color: #f05b41;
+  color: var(--dxds-color-content-orange, #f05b41);
 }
 
 ::ng-deep .custom-icon {
diff --git a/apps/demos/Demos/TagBox/Grouping/React/styles.css b/apps/demos/Demos/TagBox/Grouping/React/styles.css
index f997c92f251f..73bc7e3ba933 100644
--- a/apps/demos/Demos/TagBox/Grouping/React/styles.css
+++ b/apps/demos/Demos/TagBox/Grouping/React/styles.css
@@ -1,5 +1,5 @@
 .custom-icon .icon {
-  color: #f05b41;
+  color: var(--dxds-color-content-orange, #f05b41);
 }
 
 .custom-icon {
diff --git a/apps/demos/Demos/TagBox/Grouping/ReactJs/styles.css b/apps/demos/Demos/TagBox/Grouping/ReactJs/styles.css
index f997c92f251f..73bc7e3ba933 100644
--- a/apps/demos/Demos/TagBox/Grouping/ReactJs/styles.css
+++ b/apps/demos/Demos/TagBox/Grouping/ReactJs/styles.css
@@ -1,5 +1,5 @@
 .custom-icon .icon {
-  color: #f05b41;
+  color: var(--dxds-color-content-orange, #f05b41);
 }
 
 .custom-icon {
diff --git a/apps/demos/Demos/TagBox/Grouping/Vue/Group.vue b/apps/demos/Demos/TagBox/Grouping/Vue/Group.vue
index dfb2ee0cce13..7ef210a4ead7 100644
--- a/apps/demos/Demos/TagBox/Grouping/Vue/Group.vue
+++ b/apps/demos/Demos/TagBox/Grouping/Vue/Group.vue
@@ -13,7 +13,7 @@ withDefaults(defineProps<{
 </script>
 <style scoped>
   .custom-icon .icon {
-    color: #f05b41;
+    color: var(--dxds-color-content-orange, #f05b41);
   }
 
   .custom-icon {
diff --git a/apps/demos/Demos/TagBox/Grouping/jQuery/styles.css b/apps/demos/Demos/TagBox/Grouping/jQuery/styles.css
index f997c92f251f..73bc7e3ba933 100644
--- a/apps/demos/Demos/TagBox/Grouping/jQuery/styles.css
+++ b/apps/demos/Demos/TagBox/Grouping/jQuery/styles.css
@@ -1,5 +1,5 @@
 .custom-icon .icon {
-  color: #f05b41;
+  color: var(--dxds-color-content-orange, #f05b41);
 }
 
 .custom-icon {
diff --git a/apps/demos/Demos/TileView/Directions/Angular/app/app.component.css b/apps/demos/Demos/TileView/Directions/Angular/app/app.component.css
index a942c701623c..30c15743efd7 100644
--- a/apps/demos/Demos/TileView/Directions/Angular/app/app.component.css
+++ b/apps/demos/Demos/TileView/Directions/Angular/app/app.component.css
@@ -16,7 +16,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/TileView/Directions/React/styles.css b/apps/demos/Demos/TileView/Directions/React/styles.css
index 3d7c67e0d504..fb69b50dd363 100644
--- a/apps/demos/Demos/TileView/Directions/React/styles.css
+++ b/apps/demos/Demos/TileView/Directions/React/styles.css
@@ -16,7 +16,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/TileView/Directions/ReactJs/styles.css b/apps/demos/Demos/TileView/Directions/ReactJs/styles.css
index 3d7c67e0d504..fb69b50dd363 100644
--- a/apps/demos/Demos/TileView/Directions/ReactJs/styles.css
+++ b/apps/demos/Demos/TileView/Directions/ReactJs/styles.css
@@ -16,7 +16,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/TileView/Directions/Vue/App.vue b/apps/demos/Demos/TileView/Directions/Vue/App.vue
index 87bbf042242c..c402a142d674 100644
--- a/apps/demos/Demos/TileView/Directions/Vue/App.vue
+++ b/apps/demos/Demos/TileView/Directions/Vue/App.vue
@@ -53,7 +53,7 @@ const itemMargin = 10;
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/TileView/Directions/jQuery/styles.css b/apps/demos/Demos/TileView/Directions/jQuery/styles.css
index 60b8610b9acc..cb3c9cf2b4ce 100644
--- a/apps/demos/Demos/TileView/Directions/jQuery/styles.css
+++ b/apps/demos/Demos/TileView/Directions/jQuery/styles.css
@@ -16,7 +16,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/TileView/Item3RdPartyEngineTemplate/jQuery/styles.css b/apps/demos/Demos/TileView/Item3RdPartyEngineTemplate/jQuery/styles.css
index 1e37a088863f..41691c864bea 100644
--- a/apps/demos/Demos/TileView/Item3RdPartyEngineTemplate/jQuery/styles.css
+++ b/apps/demos/Demos/TileView/Item3RdPartyEngineTemplate/jQuery/styles.css
@@ -11,18 +11,18 @@
 }
 
 .dx-tile {
-  border: 1px solid #999;
+  border: 1px solid var(--dxds-color-border, #999);
 }
 
 .dx-tile.dx-state-hover {
-  border-color: #eee;
+  border-color: var(--dxds-color-bg-gray, #eee);
 }
 
 .dx-tile-content > .price {
   font-size: 12px;
   position: absolute;
-  background-color: black;
-  color: white;
+  background-color: var(--dxds-color-bg-gray, black);
+  color: var(--dxds-color-content-on-color, white);
   opacity: 0.6;
   padding: 2px;
   left: 9px;
diff --git a/apps/demos/Demos/TileView/ItemTemplate/Angular/app/app.component.css b/apps/demos/Demos/TileView/ItemTemplate/Angular/app/app.component.css
index 65a4ccc034ad..b9446c313f4c 100644
--- a/apps/demos/Demos/TileView/ItemTemplate/Angular/app/app.component.css
+++ b/apps/demos/Demos/TileView/ItemTemplate/Angular/app/app.component.css
@@ -14,18 +14,18 @@
 }
 
 ::ng-deep .dx-tile {
-  border: 1px solid #999;
+  border: 1px solid var(--dxds-color-border, #999);
 }
 
 ::ng-deep .dx-tile.dx-state-hover {
-  border-color: #eee;
+  border-color: var(--dxds-color-bg-gray, #eee);
 }
 
 ::ng-deep .dx-tile-content .price {
   font-size: 12px;
   position: absolute;
-  background-color: black;
-  color: white;
+  background-color: var(--dxds-color-bg-gray, black);
+  color: var(--dxds-color-content-on-color, white);
   opacity: 0.6;
   padding: 2px;
   left: 9px;
diff --git a/apps/demos/Demos/TileView/ItemTemplate/React/styles.css b/apps/demos/Demos/TileView/ItemTemplate/React/styles.css
index a648e54c5bca..a6cf679b3f60 100644
--- a/apps/demos/Demos/TileView/ItemTemplate/React/styles.css
+++ b/apps/demos/Demos/TileView/ItemTemplate/React/styles.css
@@ -14,18 +14,18 @@
 }
 
 .dx-tile {
-  border: 1px solid #999;
+  border: 1px solid var(--dxds-color-border, #999);
 }
 
 .dx-tile.dx-state-hover {
-  border-color: #eee;
+  border-color: var(--dxds-color-bg-gray, #eee);
 }
 
 .dx-tile-content .price {
   font-size: 12px;
   position: absolute;
-  background-color: black;
-  color: white;
+  background-color: var(--dxds-color-bg-gray, black);
+  color: var(--dxds-color-content-on-color, white);
   opacity: 0.6;
   padding: 2px;
   left: 9px;
diff --git a/apps/demos/Demos/TileView/ItemTemplate/ReactJs/styles.css b/apps/demos/Demos/TileView/ItemTemplate/ReactJs/styles.css
index a648e54c5bca..a6cf679b3f60 100644
--- a/apps/demos/Demos/TileView/ItemTemplate/ReactJs/styles.css
+++ b/apps/demos/Demos/TileView/ItemTemplate/ReactJs/styles.css
@@ -14,18 +14,18 @@
 }
 
 .dx-tile {
-  border: 1px solid #999;
+  border: 1px solid var(--dxds-color-border, #999);
 }
 
 .dx-tile.dx-state-hover {
-  border-color: #eee;
+  border-color: var(--dxds-color-bg-gray, #eee);
 }
 
 .dx-tile-content .price {
   font-size: 12px;
   position: absolute;
-  background-color: black;
-  color: white;
+  background-color: var(--dxds-color-bg-gray, black);
+  color: var(--dxds-color-content-on-color, white);
   opacity: 0.6;
   padding: 2px;
   left: 9px;
diff --git a/apps/demos/Demos/TileView/ItemTemplate/Vue/styles.css b/apps/demos/Demos/TileView/ItemTemplate/Vue/styles.css
index a648e54c5bca..a6cf679b3f60 100644
--- a/apps/demos/Demos/TileView/ItemTemplate/Vue/styles.css
+++ b/apps/demos/Demos/TileView/ItemTemplate/Vue/styles.css
@@ -14,18 +14,18 @@
 }
 
 .dx-tile {
-  border: 1px solid #999;
+  border: 1px solid var(--dxds-color-border, #999);
 }
 
 .dx-tile.dx-state-hover {
-  border-color: #eee;
+  border-color: var(--dxds-color-bg-gray, #eee);
 }
 
 .dx-tile-content .price {
   font-size: 12px;
   position: absolute;
-  background-color: black;
-  color: white;
+  background-color: var(--dxds-color-bg-gray, black);
+  color: var(--dxds-color-content-on-color, white);
   opacity: 0.6;
   padding: 2px;
   left: 9px;
diff --git a/apps/demos/Demos/TileView/ItemTemplate/jQuery/styles.css b/apps/demos/Demos/TileView/ItemTemplate/jQuery/styles.css
index a648e54c5bca..a6cf679b3f60 100644
--- a/apps/demos/Demos/TileView/ItemTemplate/jQuery/styles.css
+++ b/apps/demos/Demos/TileView/ItemTemplate/jQuery/styles.css
@@ -14,18 +14,18 @@
 }
 
 .dx-tile {
-  border: 1px solid #999;
+  border: 1px solid var(--dxds-color-border, #999);
 }
 
 .dx-tile.dx-state-hover {
-  border-color: #eee;
+  border-color: var(--dxds-color-bg-gray, #eee);
 }
 
 .dx-tile-content .price {
   font-size: 12px;
   position: absolute;
-  background-color: black;
-  color: white;
+  background-color: var(--dxds-color-bg-gray, black);
+  color: var(--dxds-color-content-on-color, white);
   opacity: 0.6;
   padding: 2px;
   left: 9px;
diff --git a/apps/demos/Demos/Toast/Stack/Angular/app/app.component.css b/apps/demos/Demos/Toast/Stack/Angular/app/app.component.css
index 346359837395..f968b593c8bf 100644
--- a/apps/demos/Demos/Toast/Stack/Angular/app/app.component.css
+++ b/apps/demos/Demos/Toast/Stack/Angular/app/app.component.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   right: 0;
   top: 0;
diff --git a/apps/demos/Demos/Toast/Stack/React/styles.css b/apps/demos/Demos/Toast/Stack/React/styles.css
index 346359837395..f968b593c8bf 100644
--- a/apps/demos/Demos/Toast/Stack/React/styles.css
+++ b/apps/demos/Demos/Toast/Stack/React/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   right: 0;
   top: 0;
diff --git a/apps/demos/Demos/Toast/Stack/ReactJs/styles.css b/apps/demos/Demos/Toast/Stack/ReactJs/styles.css
index 346359837395..f968b593c8bf 100644
--- a/apps/demos/Demos/Toast/Stack/ReactJs/styles.css
+++ b/apps/demos/Demos/Toast/Stack/ReactJs/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   right: 0;
   top: 0;
diff --git a/apps/demos/Demos/Toast/Stack/Vue/App.vue b/apps/demos/Demos/Toast/Stack/Vue/App.vue
index f6d0c1e5943b..06520bdda608 100644
--- a/apps/demos/Demos/Toast/Stack/Vue/App.vue
+++ b/apps/demos/Demos/Toast/Stack/Vue/App.vue
@@ -136,7 +136,7 @@ function radioGroupValueChanged({ value }: DxRadioGroupTypes.ValueChangedEvent)
 <style>
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   right: 0;
   top: 0;
diff --git a/apps/demos/Demos/Toast/Stack/jQuery/styles.css b/apps/demos/Demos/Toast/Stack/jQuery/styles.css
index 346359837395..f968b593c8bf 100644
--- a/apps/demos/Demos/Toast/Stack/jQuery/styles.css
+++ b/apps/demos/Demos/Toast/Stack/jQuery/styles.css
@@ -1,6 +1,6 @@
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   right: 0;
   top: 0;
diff --git a/apps/demos/Demos/Toolbar/Adaptability/Angular/app/app.component.css b/apps/demos/Demos/Toolbar/Adaptability/Angular/app/app.component.css
index 020f47e2dd24..379c30884dd3 100644
--- a/apps/demos/Demos/Toolbar/Adaptability/Angular/app/app.component.css
+++ b/apps/demos/Demos/Toolbar/Adaptability/Angular/app/app.component.css
@@ -9,8 +9,8 @@
   height: 36px;
   border: none;
   border-radius: 50px;
-  background-color: #fff;
-  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.24);
+  background-color: var(--dxds-color-bg, #fff);
+  box-shadow: var(--dxds-box-shadow-sm, 0 2px 6px 0 rgba(0, 0, 0, 0.24));
 }
 
 ::ng-deep .dx-resizable-handle-right::after {
@@ -30,7 +30,7 @@
 ::ng-deep .resizable-container {
   padding: 10px;
   height: 300px;
-  border: 1px dotted #999;
+  border: 1px dotted var(--dxds-color-border, #999);
   border-radius: 4px;
   box-sizing: border-box;
 }
@@ -38,7 +38,7 @@
 .options-container {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
@@ -51,10 +51,10 @@
 ::ng-deep .toolbar-separator {
   height: 36px;
   margin: 0 5px;
-  border-left: 1px solid #ddd;
+  border-left: 1px solid var(--dxds-color-border-subtle, #ddd);
 }
 
 ::ng-deep .toolbar-menu-separator {
   height: 1px;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--dxds-color-border-subtle, #ddd);
 }
diff --git a/apps/demos/Demos/Toolbar/Adaptability/React/styles.css b/apps/demos/Demos/Toolbar/Adaptability/React/styles.css
index 3675f14a1f5a..5ea038fbd042 100644
--- a/apps/demos/Demos/Toolbar/Adaptability/React/styles.css
+++ b/apps/demos/Demos/Toolbar/Adaptability/React/styles.css
@@ -5,8 +5,8 @@
   height: 36px;
   border: none;
   border-radius: 50px;
-  background-color: #fff;
-  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.24);
+  background-color: var(--dxds-color-bg, #fff);
+  box-shadow: var(--dxds-box-shadow-sm, 0 2px 6px 0 rgba(0, 0, 0, 0.24));
 }
 
 .dx-resizable-handle-right::after {
@@ -26,7 +26,7 @@
 .resizable-container {
   padding: 10px;
   height: 300px;
-  border: 1px dotted #999;
+  border: 1px dotted var(--dxds-color-border, #999);
   border-radius: 4px;
   box-sizing: border-box;
 }
@@ -34,7 +34,7 @@
 .options-container {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
@@ -47,10 +47,10 @@
 .toolbar-separator {
   height: 36px;
   margin: 0 5px;
-  border-left: 1px solid #ddd;
+  border-left: 1px solid var(--dxds-color-border-subtle, #ddd);
 }
 
 .toolbar-menu-separator {
   height: 1px;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--dxds-color-border-subtle, #ddd);
 }
diff --git a/apps/demos/Demos/Toolbar/Adaptability/ReactJs/styles.css b/apps/demos/Demos/Toolbar/Adaptability/ReactJs/styles.css
index 3675f14a1f5a..5ea038fbd042 100644
--- a/apps/demos/Demos/Toolbar/Adaptability/ReactJs/styles.css
+++ b/apps/demos/Demos/Toolbar/Adaptability/ReactJs/styles.css
@@ -5,8 +5,8 @@
   height: 36px;
   border: none;
   border-radius: 50px;
-  background-color: #fff;
-  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.24);
+  background-color: var(--dxds-color-bg, #fff);
+  box-shadow: var(--dxds-box-shadow-sm, 0 2px 6px 0 rgba(0, 0, 0, 0.24));
 }
 
 .dx-resizable-handle-right::after {
@@ -26,7 +26,7 @@
 .resizable-container {
   padding: 10px;
   height: 300px;
-  border: 1px dotted #999;
+  border: 1px dotted var(--dxds-color-border, #999);
   border-radius: 4px;
   box-sizing: border-box;
 }
@@ -34,7 +34,7 @@
 .options-container {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
@@ -47,10 +47,10 @@
 .toolbar-separator {
   height: 36px;
   margin: 0 5px;
-  border-left: 1px solid #ddd;
+  border-left: 1px solid var(--dxds-color-border-subtle, #ddd);
 }
 
 .toolbar-menu-separator {
   height: 1px;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--dxds-color-border-subtle, #ddd);
 }
diff --git a/apps/demos/Demos/Toolbar/Adaptability/Vue/App.vue b/apps/demos/Demos/Toolbar/Adaptability/Vue/App.vue
index d1060dcd1bea..0009420e58d4 100644
--- a/apps/demos/Demos/Toolbar/Adaptability/Vue/App.vue
+++ b/apps/demos/Demos/Toolbar/Adaptability/Vue/App.vue
@@ -415,8 +415,8 @@ function onFontFamilyClick() {
   height: 36px;
   border: none;
   border-radius: 50px;
-  background-color: #fff;
-  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.24);
+  background-color: var(--dxds-color-bg, #fff);
+  box-shadow: var(--dxds-box-shadow-sm, 0 2px 6px 0 rgba(0, 0, 0, 0.24));
 }
 
 .dx-resizable-handle-right::after {
@@ -436,7 +436,7 @@ function onFontFamilyClick() {
 .resizable-container {
   padding: 10px;
   height: 300px;
-  border: 1px dotted #999;
+  border: 1px dotted var(--dxds-color-border, #999);
   border-radius: 4px;
   box-sizing: border-box;
 }
@@ -444,7 +444,7 @@ function onFontFamilyClick() {
 .options-container {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
@@ -457,12 +457,12 @@ function onFontFamilyClick() {
 .toolbar-separator {
   height: 36px;
   margin: 0 5px;
-  border-left: 1px solid #ddd;
+  border-left: 1px solid var(--dxds-color-border-subtle, #ddd);
 }
 
 .toolbar-menu-separator {
   height: 1px;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--dxds-color-border-subtle, #ddd);
 }
 
 .dx-button-content {
diff --git a/apps/demos/Demos/Toolbar/Adaptability/jQuery/styles.css b/apps/demos/Demos/Toolbar/Adaptability/jQuery/styles.css
index 3675f14a1f5a..5ea038fbd042 100644
--- a/apps/demos/Demos/Toolbar/Adaptability/jQuery/styles.css
+++ b/apps/demos/Demos/Toolbar/Adaptability/jQuery/styles.css
@@ -5,8 +5,8 @@
   height: 36px;
   border: none;
   border-radius: 50px;
-  background-color: #fff;
-  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.24);
+  background-color: var(--dxds-color-bg, #fff);
+  box-shadow: var(--dxds-box-shadow-sm, 0 2px 6px 0 rgba(0, 0, 0, 0.24));
 }
 
 .dx-resizable-handle-right::after {
@@ -26,7 +26,7 @@
 .resizable-container {
   padding: 10px;
   height: 300px;
-  border: 1px dotted #999;
+  border: 1px dotted var(--dxds-color-border, #999);
   border-radius: 4px;
   box-sizing: border-box;
 }
@@ -34,7 +34,7 @@
 .options-container {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
@@ -47,10 +47,10 @@
 .toolbar-separator {
   height: 36px;
   margin: 0 5px;
-  border-left: 1px solid #ddd;
+  border-left: 1px solid var(--dxds-color-border-subtle, #ddd);
 }
 
 .toolbar-menu-separator {
   height: 1px;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--dxds-color-border-subtle, #ddd);
 }
diff --git a/apps/demos/Demos/TreeList/ColumnChooser/Angular/app/app.component.css b/apps/demos/Demos/TreeList/ColumnChooser/Angular/app/app.component.css
index 1994e07391b4..d3eaca837873 100644
--- a/apps/demos/Demos/TreeList/ColumnChooser/Angular/app/app.component.css
+++ b/apps/demos/Demos/TreeList/ColumnChooser/Angular/app/app.component.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/TreeList/ColumnChooser/React/styles.css b/apps/demos/Demos/TreeList/ColumnChooser/React/styles.css
index 6746b82d7873..ba08c47040af 100644
--- a/apps/demos/Demos/TreeList/ColumnChooser/React/styles.css
+++ b/apps/demos/Demos/TreeList/ColumnChooser/React/styles.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/TreeList/ColumnChooser/ReactJs/styles.css b/apps/demos/Demos/TreeList/ColumnChooser/ReactJs/styles.css
index 6746b82d7873..ba08c47040af 100644
--- a/apps/demos/Demos/TreeList/ColumnChooser/ReactJs/styles.css
+++ b/apps/demos/Demos/TreeList/ColumnChooser/ReactJs/styles.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/TreeList/ColumnChooser/Vue/App.vue b/apps/demos/Demos/TreeList/ColumnChooser/Vue/App.vue
index ed7b93e82ada..82c91f941b7d 100644
--- a/apps/demos/Demos/TreeList/ColumnChooser/Vue/App.vue
+++ b/apps/demos/Demos/TreeList/ColumnChooser/Vue/App.vue
@@ -146,7 +146,7 @@ const editorOptions = { placeholder: 'Search column' };
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/TreeList/ColumnChooser/jQuery/styles.css b/apps/demos/Demos/TreeList/ColumnChooser/jQuery/styles.css
index 6746b82d7873..ba08c47040af 100644
--- a/apps/demos/Demos/TreeList/ColumnChooser/jQuery/styles.css
+++ b/apps/demos/Demos/TreeList/ColumnChooser/jQuery/styles.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/TreeList/CustomizeKeyboardNavigation/Angular/app/app.component.css b/apps/demos/Demos/TreeList/CustomizeKeyboardNavigation/Angular/app/app.component.css
index 1c57855c6764..9ccf162be1b9 100644
--- a/apps/demos/Demos/TreeList/CustomizeKeyboardNavigation/Angular/app/app.component.css
+++ b/apps/demos/Demos/TreeList/CustomizeKeyboardNavigation/Angular/app/app.component.css
@@ -5,7 +5,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/TreeList/CustomizeKeyboardNavigation/React/styles.css b/apps/demos/Demos/TreeList/CustomizeKeyboardNavigation/React/styles.css
index 1c57855c6764..9ccf162be1b9 100644
--- a/apps/demos/Demos/TreeList/CustomizeKeyboardNavigation/React/styles.css
+++ b/apps/demos/Demos/TreeList/CustomizeKeyboardNavigation/React/styles.css
@@ -5,7 +5,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/TreeList/CustomizeKeyboardNavigation/ReactJs/styles.css b/apps/demos/Demos/TreeList/CustomizeKeyboardNavigation/ReactJs/styles.css
index 1c57855c6764..9ccf162be1b9 100644
--- a/apps/demos/Demos/TreeList/CustomizeKeyboardNavigation/ReactJs/styles.css
+++ b/apps/demos/Demos/TreeList/CustomizeKeyboardNavigation/ReactJs/styles.css
@@ -5,7 +5,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/TreeList/CustomizeKeyboardNavigation/Vue/styles.css b/apps/demos/Demos/TreeList/CustomizeKeyboardNavigation/Vue/styles.css
index 1c57855c6764..9ccf162be1b9 100644
--- a/apps/demos/Demos/TreeList/CustomizeKeyboardNavigation/Vue/styles.css
+++ b/apps/demos/Demos/TreeList/CustomizeKeyboardNavigation/Vue/styles.css
@@ -5,7 +5,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/TreeList/CustomizeKeyboardNavigation/jQuery/styles.css b/apps/demos/Demos/TreeList/CustomizeKeyboardNavigation/jQuery/styles.css
index 7b18f24ca479..3f291d146a62 100644
--- a/apps/demos/Demos/TreeList/CustomizeKeyboardNavigation/jQuery/styles.css
+++ b/apps/demos/Demos/TreeList/CustomizeKeyboardNavigation/jQuery/styles.css
@@ -9,7 +9,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/TreeList/FocusedRow/Angular/app/app.component.css b/apps/demos/Demos/TreeList/FocusedRow/Angular/app/app.component.css
index 297fdde52ddd..c35e20a091ca 100644
--- a/apps/demos/Demos/TreeList/FocusedRow/Angular/app/app.component.css
+++ b/apps/demos/Demos/TreeList/FocusedRow/Angular/app/app.component.css
@@ -7,7 +7,7 @@
   min-height: 100px;
   display: flex;
   flex-wrap: nowrap;
-  border: 2px solid rgba(0, 0, 0, 0.1);
+  border: 2px solid var(--dxds-color-border, rgba(0, 0, 0, 0.1));
   padding: 16px;
   box-sizing: border-box;
   align-items: center;
@@ -41,7 +41,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/TreeList/FocusedRow/React/styles.css b/apps/demos/Demos/TreeList/FocusedRow/React/styles.css
index 297fdde52ddd..c35e20a091ca 100644
--- a/apps/demos/Demos/TreeList/FocusedRow/React/styles.css
+++ b/apps/demos/Demos/TreeList/FocusedRow/React/styles.css
@@ -7,7 +7,7 @@
   min-height: 100px;
   display: flex;
   flex-wrap: nowrap;
-  border: 2px solid rgba(0, 0, 0, 0.1);
+  border: 2px solid var(--dxds-color-border, rgba(0, 0, 0, 0.1));
   padding: 16px;
   box-sizing: border-box;
   align-items: center;
@@ -41,7 +41,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/TreeList/FocusedRow/ReactJs/styles.css b/apps/demos/Demos/TreeList/FocusedRow/ReactJs/styles.css
index 297fdde52ddd..c35e20a091ca 100644
--- a/apps/demos/Demos/TreeList/FocusedRow/ReactJs/styles.css
+++ b/apps/demos/Demos/TreeList/FocusedRow/ReactJs/styles.css
@@ -7,7 +7,7 @@
   min-height: 100px;
   display: flex;
   flex-wrap: nowrap;
-  border: 2px solid rgba(0, 0, 0, 0.1);
+  border: 2px solid var(--dxds-color-border, rgba(0, 0, 0, 0.1));
   padding: 16px;
   box-sizing: border-box;
   align-items: center;
@@ -41,7 +41,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/TreeList/FocusedRow/Vue/styles.css b/apps/demos/Demos/TreeList/FocusedRow/Vue/styles.css
index 297fdde52ddd..c35e20a091ca 100644
--- a/apps/demos/Demos/TreeList/FocusedRow/Vue/styles.css
+++ b/apps/demos/Demos/TreeList/FocusedRow/Vue/styles.css
@@ -7,7 +7,7 @@
   min-height: 100px;
   display: flex;
   flex-wrap: nowrap;
-  border: 2px solid rgba(0, 0, 0, 0.1);
+  border: 2px solid var(--dxds-color-border, rgba(0, 0, 0, 0.1));
   padding: 16px;
   box-sizing: border-box;
   align-items: center;
@@ -41,7 +41,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/TreeList/FocusedRow/jQuery/styles.css b/apps/demos/Demos/TreeList/FocusedRow/jQuery/styles.css
index 297fdde52ddd..c35e20a091ca 100644
--- a/apps/demos/Demos/TreeList/FocusedRow/jQuery/styles.css
+++ b/apps/demos/Demos/TreeList/FocusedRow/jQuery/styles.css
@@ -7,7 +7,7 @@
   min-height: 100px;
   display: flex;
   flex-wrap: nowrap;
-  border: 2px solid rgba(0, 0, 0, 0.1);
+  border: 2px solid var(--dxds-color-border, rgba(0, 0, 0, 0.1));
   padding: 16px;
   box-sizing: border-box;
   align-items: center;
@@ -41,7 +41,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/TreeList/LocalReordering/Angular/app/app.component.css b/apps/demos/Demos/TreeList/LocalReordering/Angular/app/app.component.css
index 3a44c752c00e..84e2491dc6e9 100644
--- a/apps/demos/Demos/TreeList/LocalReordering/Angular/app/app.component.css
+++ b/apps/demos/Demos/TreeList/LocalReordering/Angular/app/app.component.css
@@ -9,7 +9,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/TreeList/LocalReordering/React/styles.css b/apps/demos/Demos/TreeList/LocalReordering/React/styles.css
index 3a44c752c00e..84e2491dc6e9 100644
--- a/apps/demos/Demos/TreeList/LocalReordering/React/styles.css
+++ b/apps/demos/Demos/TreeList/LocalReordering/React/styles.css
@@ -9,7 +9,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/TreeList/LocalReordering/ReactJs/styles.css b/apps/demos/Demos/TreeList/LocalReordering/ReactJs/styles.css
index 3a44c752c00e..84e2491dc6e9 100644
--- a/apps/demos/Demos/TreeList/LocalReordering/ReactJs/styles.css
+++ b/apps/demos/Demos/TreeList/LocalReordering/ReactJs/styles.css
@@ -9,7 +9,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/TreeList/LocalReordering/Vue/App.vue b/apps/demos/Demos/TreeList/LocalReordering/Vue/App.vue
index 311ccbc91593..f1d9c963c43c 100644
--- a/apps/demos/Demos/TreeList/LocalReordering/Vue/App.vue
+++ b/apps/demos/Demos/TreeList/LocalReordering/Vue/App.vue
@@ -127,7 +127,7 @@ function onReorder(e: DxTreeListTypes.RowDraggingReorderEvent) {
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/TreeList/LocalReordering/jQuery/styles.css b/apps/demos/Demos/TreeList/LocalReordering/jQuery/styles.css
index 3a44c752c00e..84e2491dc6e9 100644
--- a/apps/demos/Demos/TreeList/LocalReordering/jQuery/styles.css
+++ b/apps/demos/Demos/TreeList/LocalReordering/jQuery/styles.css
@@ -9,7 +9,7 @@
 .options {
   margin-top: 20px;
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: relative;
 }
 
diff --git a/apps/demos/Demos/TreeList/MultipleRowSelection/Angular/app/app.component.css b/apps/demos/Demos/TreeList/MultipleRowSelection/Angular/app/app.component.css
index 2b5870714a01..3a4e1d20f6bc 100644
--- a/apps/demos/Demos/TreeList/MultipleRowSelection/Angular/app/app.component.css
+++ b/apps/demos/Demos/TreeList/MultipleRowSelection/Angular/app/app.component.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/TreeList/MultipleRowSelection/React/styles.css b/apps/demos/Demos/TreeList/MultipleRowSelection/React/styles.css
index a58f0ca9b172..29c9c678c1a4 100644
--- a/apps/demos/Demos/TreeList/MultipleRowSelection/React/styles.css
+++ b/apps/demos/Demos/TreeList/MultipleRowSelection/React/styles.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/TreeList/MultipleRowSelection/ReactJs/styles.css b/apps/demos/Demos/TreeList/MultipleRowSelection/ReactJs/styles.css
index a58f0ca9b172..29c9c678c1a4 100644
--- a/apps/demos/Demos/TreeList/MultipleRowSelection/ReactJs/styles.css
+++ b/apps/demos/Demos/TreeList/MultipleRowSelection/ReactJs/styles.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/TreeList/MultipleRowSelection/Vue/App.vue b/apps/demos/Demos/TreeList/MultipleRowSelection/Vue/App.vue
index da4d1f695e4a..6dd1bf2417f0 100644
--- a/apps/demos/Demos/TreeList/MultipleRowSelection/Vue/App.vue
+++ b/apps/demos/Demos/TreeList/MultipleRowSelection/Vue/App.vue
@@ -98,7 +98,7 @@ function getEmployeeNames(employeeList: Employee[]) {
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/TreeList/MultipleRowSelection/jQuery/styles.css b/apps/demos/Demos/TreeList/MultipleRowSelection/jQuery/styles.css
index a58f0ca9b172..29c9c678c1a4 100644
--- a/apps/demos/Demos/TreeList/MultipleRowSelection/jQuery/styles.css
+++ b/apps/demos/Demos/TreeList/MultipleRowSelection/jQuery/styles.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .caption {
diff --git a/apps/demos/Demos/TreeList/Overview/Angular/app/app.component.css b/apps/demos/Demos/TreeList/Overview/Angular/app/app.component.css
index 10d2abe7ba88..09e4bde54dd9 100644
--- a/apps/demos/Demos/TreeList/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/TreeList/Overview/Angular/app/app.component.css
@@ -18,6 +18,6 @@
   object-fit: contain;
   margin-right: 10px;
   border-radius: 25px;
-  border: 1px solid lightgray;
-  background-color: #fff;
+  border: 1px solid var(--dxds-color-border, #d3d3d3);
+  background-color: var(--dxds-color-bg-static-light, #fff);
 }
diff --git a/apps/demos/Demos/TreeList/Overview/React/styles.css b/apps/demos/Demos/TreeList/Overview/React/styles.css
index ae902455272f..f83fc94affce 100644
--- a/apps/demos/Demos/TreeList/Overview/React/styles.css
+++ b/apps/demos/Demos/TreeList/Overview/React/styles.css
@@ -18,6 +18,6 @@
   object-fit: contain;
   margin-right: 10px;
   border-radius: 25px;
-  border: 1px solid lightgray;
-  background-color: #fff;
+  border: 1px solid var(--dxds-color-border, #d3d3d3);
+  background-color: var(--dxds-color-bg-static-light, #fff);
 }
diff --git a/apps/demos/Demos/TreeList/Overview/ReactJs/styles.css b/apps/demos/Demos/TreeList/Overview/ReactJs/styles.css
index ae902455272f..f83fc94affce 100644
--- a/apps/demos/Demos/TreeList/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/TreeList/Overview/ReactJs/styles.css
@@ -18,6 +18,6 @@
   object-fit: contain;
   margin-right: 10px;
   border-radius: 25px;
-  border: 1px solid lightgray;
-  background-color: #fff;
+  border: 1px solid var(--dxds-color-border, #d3d3d3);
+  background-color: var(--dxds-color-bg-static-light, #fff);
 }
diff --git a/apps/demos/Demos/TreeList/Overview/Vue/EmployeeCell.vue b/apps/demos/Demos/TreeList/Overview/Vue/EmployeeCell.vue
index 1e14145028ca..55ca06fcd67c 100644
--- a/apps/demos/Demos/TreeList/Overview/Vue/EmployeeCell.vue
+++ b/apps/demos/Demos/TreeList/Overview/Vue/EmployeeCell.vue
@@ -32,7 +32,7 @@ withDefaults(defineProps<{
   object-fit: contain;
   margin-right: 14px;
   border-radius: 25px;
-  border: 1px solid lightgray;
-  background-color: #fff;
+  border: 1px solid var(--dxds-color-border, #d3d3d3);
+  background-color: var(--dxds-color-bg-static-light, #fff);
 }
 </style>
diff --git a/apps/demos/Demos/TreeList/Overview/jQuery/styles.css b/apps/demos/Demos/TreeList/Overview/jQuery/styles.css
index ae902455272f..f83fc94affce 100644
--- a/apps/demos/Demos/TreeList/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/TreeList/Overview/jQuery/styles.css
@@ -18,6 +18,6 @@
   object-fit: contain;
   margin-right: 10px;
   border-radius: 25px;
-  border: 1px solid lightgray;
-  background-color: #fff;
+  border: 1px solid var(--dxds-color-border, #d3d3d3);
+  background-color: var(--dxds-color-bg-static-light, #fff);
 }
diff --git a/apps/demos/Demos/TreeList/Resizing/Angular/app/app.component.css b/apps/demos/Demos/TreeList/Resizing/Angular/app/app.component.css
index 91cbcba74eb8..41e65e8952ef 100644
--- a/apps/demos/Demos/TreeList/Resizing/Angular/app/app.component.css
+++ b/apps/demos/Demos/TreeList/Resizing/Angular/app/app.component.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   bottom: 0;
   width: 100%;
diff --git a/apps/demos/Demos/TreeList/Resizing/React/styles.css b/apps/demos/Demos/TreeList/Resizing/React/styles.css
index 4edea6cc5e09..5929d67c5b73 100644
--- a/apps/demos/Demos/TreeList/Resizing/React/styles.css
+++ b/apps/demos/Demos/TreeList/Resizing/React/styles.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   bottom: 0;
   width: 100%;
diff --git a/apps/demos/Demos/TreeList/Resizing/ReactJs/styles.css b/apps/demos/Demos/TreeList/Resizing/ReactJs/styles.css
index 4edea6cc5e09..5929d67c5b73 100644
--- a/apps/demos/Demos/TreeList/Resizing/ReactJs/styles.css
+++ b/apps/demos/Demos/TreeList/Resizing/ReactJs/styles.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   bottom: 0;
   width: 100%;
diff --git a/apps/demos/Demos/TreeList/Resizing/Vue/App.vue b/apps/demos/Demos/TreeList/Resizing/Vue/App.vue
index 241bf6b99b7f..95cd31532cce 100644
--- a/apps/demos/Demos/TreeList/Resizing/Vue/App.vue
+++ b/apps/demos/Demos/TreeList/Resizing/Vue/App.vue
@@ -63,7 +63,7 @@ const expandedRowKeys = [1, 3, 6];
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   bottom: 0;
   width: 100%;
diff --git a/apps/demos/Demos/TreeList/Resizing/jQuery/styles.css b/apps/demos/Demos/TreeList/Resizing/jQuery/styles.css
index 4edea6cc5e09..5929d67c5b73 100644
--- a/apps/demos/Demos/TreeList/Resizing/jQuery/styles.css
+++ b/apps/demos/Demos/TreeList/Resizing/jQuery/styles.css
@@ -5,7 +5,7 @@
 .options {
   padding: 20px;
   margin-top: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   position: absolute;
   bottom: 0;
   width: 100%;
diff --git a/apps/demos/Demos/TreeView/ContextMenuIntegration/Angular/app/app.component.css b/apps/demos/Demos/TreeView/ContextMenuIntegration/Angular/app/app.component.css
index d680f0903069..83d6ada865d3 100644
--- a/apps/demos/Demos/TreeView/ContextMenuIntegration/Angular/app/app.component.css
+++ b/apps/demos/Demos/TreeView/ContextMenuIntegration/Angular/app/app.component.css
@@ -12,7 +12,7 @@
   padding: 20px;
   margin-left: 20px;
   font-weight: 600;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 ::ng-deep .log-container > div:first-child {
diff --git a/apps/demos/Demos/TreeView/ContextMenuIntegration/React/styles.css b/apps/demos/Demos/TreeView/ContextMenuIntegration/React/styles.css
index 43f6830a0055..3181590b7f35 100644
--- a/apps/demos/Demos/TreeView/ContextMenuIntegration/React/styles.css
+++ b/apps/demos/Demos/TreeView/ContextMenuIntegration/React/styles.css
@@ -12,7 +12,7 @@
   padding: 20px;
   margin-left: 20px;
   font-weight: 600;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .log-container > div:first-child {
diff --git a/apps/demos/Demos/TreeView/ContextMenuIntegration/ReactJs/styles.css b/apps/demos/Demos/TreeView/ContextMenuIntegration/ReactJs/styles.css
index 43f6830a0055..3181590b7f35 100644
--- a/apps/demos/Demos/TreeView/ContextMenuIntegration/ReactJs/styles.css
+++ b/apps/demos/Demos/TreeView/ContextMenuIntegration/ReactJs/styles.css
@@ -12,7 +12,7 @@
   padding: 20px;
   margin-left: 20px;
   font-weight: 600;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .log-container > div:first-child {
diff --git a/apps/demos/Demos/TreeView/ContextMenuIntegration/Vue/App.vue b/apps/demos/Demos/TreeView/ContextMenuIntegration/Vue/App.vue
index 26263c9d4587..8ad788188f6c 100644
--- a/apps/demos/Demos/TreeView/ContextMenuIntegration/Vue/App.vue
+++ b/apps/demos/Demos/TreeView/ContextMenuIntegration/Vue/App.vue
@@ -104,7 +104,7 @@ function contextMenuItemClick(e: DxContextMenuTypes.ItemClickEvent) {
 .log-container {
   padding: 20px;
   margin-left: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   font-weight: 600;
   position: relative;
 }
diff --git a/apps/demos/Demos/TreeView/ContextMenuIntegration/jQuery/styles.css b/apps/demos/Demos/TreeView/ContextMenuIntegration/jQuery/styles.css
index f554d4eb59ab..9515357847e8 100644
--- a/apps/demos/Demos/TreeView/ContextMenuIntegration/jQuery/styles.css
+++ b/apps/demos/Demos/TreeView/ContextMenuIntegration/jQuery/styles.css
@@ -12,7 +12,7 @@
   padding: 20px;
   margin-left: 20px;
   font-weight: 600;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .log-container > div:first-child {
diff --git a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/Angular/app/app.component.css b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/Angular/app/app.component.css
index 97b7fecad98c..74ed7daf0f14 100644
--- a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/Angular/app/app.component.css
+++ b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/Angular/app/app.component.css
@@ -22,7 +22,7 @@
   padding: 20px 30px;
   font-size: 115%;
   font-weight: bold;
-  border-right: 1px solid rgba(165, 165, 165, 0.4);
+  border-right: 1px solid var(--dxds-color-border-subtle, rgba(165, 165, 165, 0.4));
   height: 100%;
 }
 
diff --git a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/React/styles.css b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/React/styles.css
index aa11fd467b95..236b07abc590 100644
--- a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/React/styles.css
+++ b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/React/styles.css
@@ -22,7 +22,7 @@
   padding: 20px 30px;
   font-size: 115%;
   font-weight: bold;
-  border-right: 1px solid rgba(165, 165, 165, 0.4);
+  border-right: 1px solid var(--dxds-color-border-subtle, rgba(165, 165, 165, 0.4));
   height: 100%;
 }
 
diff --git a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/ReactJs/styles.css b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/ReactJs/styles.css
index aa11fd467b95..236b07abc590 100644
--- a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/ReactJs/styles.css
+++ b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/ReactJs/styles.css
@@ -22,7 +22,7 @@
   padding: 20px 30px;
   font-size: 115%;
   font-weight: bold;
-  border-right: 1px solid rgba(165, 165, 165, 0.4);
+  border-right: 1px solid var(--dxds-color-border-subtle, rgba(165, 165, 165, 0.4));
   height: 100%;
 }
 
diff --git a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/Vue/App.vue b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/Vue/App.vue
index 630a5522d457..e80adb13a6b1 100644
--- a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/Vue/App.vue
+++ b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/Vue/App.vue
@@ -240,7 +240,7 @@ function getTopVisibleNode(component: DxSortableInstance) {
   padding: 20px 30px;
   font-size: 115%;
   font-weight: bold;
-  border-right: 1px solid rgba(165, 165, 165, 0.4);
+  border-right: 1px solid var(--dxds-color-border-subtle, rgba(165, 165, 165, 0.4));
   height: 100%;
 }
 
diff --git a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/jQuery/styles.css b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/jQuery/styles.css
index aa11fd467b95..236b07abc590 100644
--- a/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/jQuery/styles.css
+++ b/apps/demos/Demos/TreeView/DragAndDropHierarchicalDataStructure/jQuery/styles.css
@@ -22,7 +22,7 @@
   padding: 20px 30px;
   font-size: 115%;
   font-weight: bold;
-  border-right: 1px solid rgba(165, 165, 165, 0.4);
+  border-right: 1px solid var(--dxds-color-border-subtle, rgba(165, 165, 165, 0.4));
   height: 100%;
 }
 
diff --git a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/Angular/app/app.component.css b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/Angular/app/app.component.css
index 97b7fecad98c..74ed7daf0f14 100644
--- a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/Angular/app/app.component.css
+++ b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/Angular/app/app.component.css
@@ -22,7 +22,7 @@
   padding: 20px 30px;
   font-size: 115%;
   font-weight: bold;
-  border-right: 1px solid rgba(165, 165, 165, 0.4);
+  border-right: 1px solid var(--dxds-color-border-subtle, rgba(165, 165, 165, 0.4));
   height: 100%;
 }
 
diff --git a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/React/styles.css b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/React/styles.css
index aa11fd467b95..236b07abc590 100644
--- a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/React/styles.css
+++ b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/React/styles.css
@@ -22,7 +22,7 @@
   padding: 20px 30px;
   font-size: 115%;
   font-weight: bold;
-  border-right: 1px solid rgba(165, 165, 165, 0.4);
+  border-right: 1px solid var(--dxds-color-border-subtle, rgba(165, 165, 165, 0.4));
   height: 100%;
 }
 
diff --git a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/ReactJs/styles.css b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/ReactJs/styles.css
index aa11fd467b95..236b07abc590 100644
--- a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/ReactJs/styles.css
+++ b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/ReactJs/styles.css
@@ -22,7 +22,7 @@
   padding: 20px 30px;
   font-size: 115%;
   font-weight: bold;
-  border-right: 1px solid rgba(165, 165, 165, 0.4);
+  border-right: 1px solid var(--dxds-color-border-subtle, rgba(165, 165, 165, 0.4));
   height: 100%;
 }
 
diff --git a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/Vue/App.vue b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/Vue/App.vue
index 907285407497..aab6ae72a454 100644
--- a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/Vue/App.vue
+++ b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/Vue/App.vue
@@ -247,7 +247,7 @@ function getTopVisibleNode(component: DxSortableInstance) {
   padding: 20px 30px;
   font-size: 115%;
   font-weight: bold;
-  border-right: 1px solid rgba(165, 165, 165, 0.4);
+  border-right: 1px solid var(--dxds-color-border-subtle, rgba(165, 165, 165, 0.4));
   height: 100%;
 }
 
diff --git a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/jQuery/styles.css b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/jQuery/styles.css
index aa11fd467b95..236b07abc590 100644
--- a/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/jQuery/styles.css
+++ b/apps/demos/Demos/TreeView/DragAndDropPlainDataStructure/jQuery/styles.css
@@ -22,7 +22,7 @@
   padding: 20px 30px;
   font-size: 115%;
   font-weight: bold;
-  border-right: 1px solid rgba(165, 165, 165, 0.4);
+  border-right: 1px solid var(--dxds-color-border-subtle, rgba(165, 165, 165, 0.4));
   height: 100%;
 }
 
diff --git a/apps/demos/Demos/TreeView/FlatDataStructure/Angular/app/app.component.css b/apps/demos/Demos/TreeView/FlatDataStructure/Angular/app/app.component.css
index dc87c3307911..871172628a77 100644
--- a/apps/demos/Demos/TreeView/FlatDataStructure/Angular/app/app.component.css
+++ b/apps/demos/Demos/TreeView/FlatDataStructure/Angular/app/app.component.css
@@ -26,10 +26,6 @@
   font-size: 24px;
 }
 
-::ng-deep .dark #product-details > div {
-  color: #f0f0f0;
-}
-
 ::ng-deep .hidden {
   visibility: hidden;
 }
diff --git a/apps/demos/Demos/TreeView/FlatDataStructure/React/styles.css b/apps/demos/Demos/TreeView/FlatDataStructure/React/styles.css
index ff9fb16cb1e3..6dea8b412006 100644
--- a/apps/demos/Demos/TreeView/FlatDataStructure/React/styles.css
+++ b/apps/demos/Demos/TreeView/FlatDataStructure/React/styles.css
@@ -26,10 +26,6 @@
   font-size: 24px;
 }
 
-.dark #product-details > div {
-  color: #f0f0f0;
-}
-
 .hidden {
   visibility: hidden;
 }
diff --git a/apps/demos/Demos/TreeView/FlatDataStructure/ReactJs/styles.css b/apps/demos/Demos/TreeView/FlatDataStructure/ReactJs/styles.css
index ff9fb16cb1e3..6dea8b412006 100644
--- a/apps/demos/Demos/TreeView/FlatDataStructure/ReactJs/styles.css
+++ b/apps/demos/Demos/TreeView/FlatDataStructure/ReactJs/styles.css
@@ -26,10 +26,6 @@
   font-size: 24px;
 }
 
-.dark #product-details > div {
-  color: #f0f0f0;
-}
-
 .hidden {
   visibility: hidden;
 }
diff --git a/apps/demos/Demos/TreeView/FlatDataStructure/Vue/App.vue b/apps/demos/Demos/TreeView/FlatDataStructure/Vue/App.vue
index 21393eb8660f..6135f2a2a3b9 100644
--- a/apps/demos/Demos/TreeView/FlatDataStructure/Vue/App.vue
+++ b/apps/demos/Demos/TreeView/FlatDataStructure/Vue/App.vue
@@ -67,10 +67,6 @@ function selectItem({ itemData }: DxTreeViewTypes.ItemClickEvent<Product>) {
   font-size: 24px;
 }
 
-.dark #product-details > div {
-  color: #f0f0f0;
-}
-
 .hidden {
   visibility: hidden;
 }
diff --git a/apps/demos/Demos/TreeView/FlatDataStructure/jQuery/styles.css b/apps/demos/Demos/TreeView/FlatDataStructure/jQuery/styles.css
index ff9fb16cb1e3..6dea8b412006 100644
--- a/apps/demos/Demos/TreeView/FlatDataStructure/jQuery/styles.css
+++ b/apps/demos/Demos/TreeView/FlatDataStructure/jQuery/styles.css
@@ -26,10 +26,6 @@
   font-size: 24px;
 }
 
-.dark #product-details > div {
-  color: #f0f0f0;
-}
-
 .hidden {
   visibility: hidden;
 }
diff --git a/apps/demos/Demos/TreeView/HierarchicalDataStructure/Angular/app/app.component.css b/apps/demos/Demos/TreeView/HierarchicalDataStructure/Angular/app/app.component.css
index dc87c3307911..871172628a77 100644
--- a/apps/demos/Demos/TreeView/HierarchicalDataStructure/Angular/app/app.component.css
+++ b/apps/demos/Demos/TreeView/HierarchicalDataStructure/Angular/app/app.component.css
@@ -26,10 +26,6 @@
   font-size: 24px;
 }
 
-::ng-deep .dark #product-details > div {
-  color: #f0f0f0;
-}
-
 ::ng-deep .hidden {
   visibility: hidden;
 }
diff --git a/apps/demos/Demos/TreeView/HierarchicalDataStructure/React/styles.css b/apps/demos/Demos/TreeView/HierarchicalDataStructure/React/styles.css
index ff9fb16cb1e3..6dea8b412006 100644
--- a/apps/demos/Demos/TreeView/HierarchicalDataStructure/React/styles.css
+++ b/apps/demos/Demos/TreeView/HierarchicalDataStructure/React/styles.css
@@ -26,10 +26,6 @@
   font-size: 24px;
 }
 
-.dark #product-details > div {
-  color: #f0f0f0;
-}
-
 .hidden {
   visibility: hidden;
 }
diff --git a/apps/demos/Demos/TreeView/HierarchicalDataStructure/ReactJs/styles.css b/apps/demos/Demos/TreeView/HierarchicalDataStructure/ReactJs/styles.css
index ff9fb16cb1e3..6dea8b412006 100644
--- a/apps/demos/Demos/TreeView/HierarchicalDataStructure/ReactJs/styles.css
+++ b/apps/demos/Demos/TreeView/HierarchicalDataStructure/ReactJs/styles.css
@@ -26,10 +26,6 @@
   font-size: 24px;
 }
 
-.dark #product-details > div {
-  color: #f0f0f0;
-}
-
 .hidden {
   visibility: hidden;
 }
diff --git a/apps/demos/Demos/TreeView/HierarchicalDataStructure/Vue/App.vue b/apps/demos/Demos/TreeView/HierarchicalDataStructure/Vue/App.vue
index c761d9551156..d768f2e85c99 100644
--- a/apps/demos/Demos/TreeView/HierarchicalDataStructure/Vue/App.vue
+++ b/apps/demos/Demos/TreeView/HierarchicalDataStructure/Vue/App.vue
@@ -61,10 +61,6 @@ function selectItem({ itemData }: DxTreeViewTypes.ItemClickEvent) {
   font-size: 24px;
 }
 
-.dark #product-details > div {
-  color: #f0f0f0;
-}
-
 .hidden {
   visibility: hidden;
 }
diff --git a/apps/demos/Demos/TreeView/HierarchicalDataStructure/jQuery/styles.css b/apps/demos/Demos/TreeView/HierarchicalDataStructure/jQuery/styles.css
index ff9fb16cb1e3..6dea8b412006 100644
--- a/apps/demos/Demos/TreeView/HierarchicalDataStructure/jQuery/styles.css
+++ b/apps/demos/Demos/TreeView/HierarchicalDataStructure/jQuery/styles.css
@@ -26,10 +26,6 @@
   font-size: 24px;
 }
 
-.dark #product-details > div {
-  color: #f0f0f0;
-}
-
 .hidden {
   visibility: hidden;
 }
diff --git a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Angular/app/app.component.css b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Angular/app/app.component.css
index 3fa0b19e6f3e..a97feb8597fe 100644
--- a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Angular/app/app.component.css
+++ b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Angular/app/app.component.css
@@ -11,7 +11,7 @@
 ::ng-deep .selected-container {
   padding: 20px;
   margin-left: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   font-size: 115%;
   font-weight: bold;
 }
@@ -26,7 +26,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/React/styles.css b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/React/styles.css
index c3359c11e892..02d0e2b52889 100644
--- a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/React/styles.css
+++ b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/React/styles.css
@@ -19,14 +19,14 @@
 .selected-container {
   padding: 20px;
   margin-left: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   font-size: 115%;
   font-weight: bold;
 }
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
   box-sizing: border-box;
 }
diff --git a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/ReactJs/styles.css b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/ReactJs/styles.css
index c3359c11e892..02d0e2b52889 100644
--- a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/ReactJs/styles.css
+++ b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/ReactJs/styles.css
@@ -19,14 +19,14 @@
 .selected-container {
   padding: 20px;
   margin-left: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   font-size: 115%;
   font-weight: bold;
 }
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
   box-sizing: border-box;
 }
diff --git a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Vue/App.vue b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Vue/App.vue
index 4359f69ed4cf..2382957a26c3 100644
--- a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Vue/App.vue
+++ b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Vue/App.vue
@@ -161,7 +161,7 @@ function selectionModeValueChanged(e: DxSelectBoxTypes.ValueChangedEvent) {
 .selected-container {
   padding: 20px;
   margin-left: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   font-size: 115%;
   font-weight: bold;
 }
@@ -176,7 +176,7 @@ function selectionModeValueChanged(e: DxSelectBoxTypes.ValueChangedEvent) {
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
   box-sizing: border-box;
 }
diff --git a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/jQuery/styles.css b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/jQuery/styles.css
index d8dd0b37daa4..50e5fc2edf24 100644
--- a/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/jQuery/styles.css
+++ b/apps/demos/Demos/TreeView/ItemSelectionAndCustomization/jQuery/styles.css
@@ -11,7 +11,7 @@
 .selected-container {
   padding: 20px;
   margin-left: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   font-size: 115%;
   font-weight: bold;
 }
@@ -26,7 +26,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
   box-sizing: border-box;
 }
diff --git a/apps/demos/Demos/VectorMap/CustomAnnotations/Angular/app/app.component.css b/apps/demos/Demos/VectorMap/CustomAnnotations/Angular/app/app.component.css
index b8381146afda..09457ff36b04 100644
--- a/apps/demos/Demos/VectorMap/CustomAnnotations/Angular/app/app.component.css
+++ b/apps/demos/Demos/VectorMap/CustomAnnotations/Angular/app/app.component.css
@@ -9,7 +9,7 @@
 ::ng-deep .border {
   width: 60px;
   height: 40px;
-  stroke: rgba(191, 191, 191, 0.25);
+  stroke: var(--dxds-color-border-subtle, rgba(191, 191, 191, 0.25));
   stroke-width: 1px;
   fill: transparent;
 }
diff --git a/apps/demos/Demos/VectorMap/CustomAnnotations/React/styles.css b/apps/demos/Demos/VectorMap/CustomAnnotations/React/styles.css
index 7fa1244f9d7d..3eb07ebfefd0 100644
--- a/apps/demos/Demos/VectorMap/CustomAnnotations/React/styles.css
+++ b/apps/demos/Demos/VectorMap/CustomAnnotations/React/styles.css
@@ -9,7 +9,7 @@
 .border {
   width: 60px;
   height: 40px;
-  stroke: rgba(191, 191, 191, 0.25);
+  stroke: var(--dxds-color-border-subtle, rgba(191, 191, 191, 0.25));
   stroke-width: 1px;
   fill: transparent;
 }
diff --git a/apps/demos/Demos/VectorMap/CustomAnnotations/ReactJs/styles.css b/apps/demos/Demos/VectorMap/CustomAnnotations/ReactJs/styles.css
index 7fa1244f9d7d..3eb07ebfefd0 100644
--- a/apps/demos/Demos/VectorMap/CustomAnnotations/ReactJs/styles.css
+++ b/apps/demos/Demos/VectorMap/CustomAnnotations/ReactJs/styles.css
@@ -9,7 +9,7 @@
 .border {
   width: 60px;
   height: 40px;
-  stroke: rgba(191, 191, 191, 0.25);
+  stroke: var(--dxds-color-border-subtle, rgba(191, 191, 191, 0.25));
   stroke-width: 1px;
   fill: transparent;
 }
diff --git a/apps/demos/Demos/VectorMap/CustomAnnotations/Vue/AnnotationTemplate.vue b/apps/demos/Demos/VectorMap/CustomAnnotations/Vue/AnnotationTemplate.vue
index 20361ed857ab..01b158a0eeb4 100644
--- a/apps/demos/Demos/VectorMap/CustomAnnotations/Vue/AnnotationTemplate.vue
+++ b/apps/demos/Demos/VectorMap/CustomAnnotations/Vue/AnnotationTemplate.vue
@@ -67,7 +67,7 @@ const formatNumber = new Intl.NumberFormat('en-US', {
 .border {
   width: 60px;
   height: 40px;
-  stroke: rgba(191, 191, 191, 0.25);
+  stroke: var(--dxds-color-border-subtle, rgba(191, 191, 191, 0.25));
   stroke-width: 1px;
   fill: transparent;
 }
diff --git a/apps/demos/Demos/VectorMap/CustomAnnotations/jQuery/styles.css b/apps/demos/Demos/VectorMap/CustomAnnotations/jQuery/styles.css
index 7fa1244f9d7d..3eb07ebfefd0 100644
--- a/apps/demos/Demos/VectorMap/CustomAnnotations/jQuery/styles.css
+++ b/apps/demos/Demos/VectorMap/CustomAnnotations/jQuery/styles.css
@@ -9,7 +9,7 @@
 .border {
   width: 60px;
   height: 40px;
-  stroke: rgba(191, 191, 191, 0.25);
+  stroke: var(--dxds-color-border-subtle, rgba(191, 191, 191, 0.25));
   stroke-width: 1px;
   fill: transparent;
 }
diff --git a/apps/demos/Demos/VectorMap/DynamicViewport/Angular/app/app.component.css b/apps/demos/Demos/VectorMap/DynamicViewport/Angular/app/app.component.css
index ab19881dc5e3..603d765d30ae 100644
--- a/apps/demos/Demos/VectorMap/DynamicViewport/Angular/app/app.component.css
+++ b/apps/demos/Demos/VectorMap/DynamicViewport/Angular/app/app.component.css
@@ -4,7 +4,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/VectorMap/DynamicViewport/React/styles.css b/apps/demos/Demos/VectorMap/DynamicViewport/React/styles.css
index 8faa7332ebdc..404c6e402a57 100644
--- a/apps/demos/Demos/VectorMap/DynamicViewport/React/styles.css
+++ b/apps/demos/Demos/VectorMap/DynamicViewport/React/styles.css
@@ -4,7 +4,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/VectorMap/DynamicViewport/ReactJs/styles.css b/apps/demos/Demos/VectorMap/DynamicViewport/ReactJs/styles.css
index 8faa7332ebdc..404c6e402a57 100644
--- a/apps/demos/Demos/VectorMap/DynamicViewport/ReactJs/styles.css
+++ b/apps/demos/Demos/VectorMap/DynamicViewport/ReactJs/styles.css
@@ -4,7 +4,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/VectorMap/DynamicViewport/Vue/App.vue b/apps/demos/Demos/VectorMap/DynamicViewport/Vue/App.vue
index 2f635b70960b..0a7b724291b5 100644
--- a/apps/demos/Demos/VectorMap/DynamicViewport/Vue/App.vue
+++ b/apps/demos/Demos/VectorMap/DynamicViewport/Vue/App.vue
@@ -105,7 +105,7 @@ function zoomFactorChanged({ zoomFactor }: DxVectorMapTypes.ZoomFactorChangedEve
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/Demos/VectorMap/DynamicViewport/jQuery/styles.css b/apps/demos/Demos/VectorMap/DynamicViewport/jQuery/styles.css
index 8faa7332ebdc..404c6e402a57 100644
--- a/apps/demos/Demos/VectorMap/DynamicViewport/jQuery/styles.css
+++ b/apps/demos/Demos/VectorMap/DynamicViewport/jQuery/styles.css
@@ -4,7 +4,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   margin-top: 20px;
 }
 
diff --git a/apps/demos/testing/common.test.ts b/apps/demos/testing/common.test.ts
index 192deec511ad..4b0b48ddef89 100644
--- a/apps/demos/testing/common.test.ts
+++ b/apps/demos/testing/common.test.ts
@@ -65,6 +65,7 @@ const getIgnoredRules = (testName) => {
   if ((isMaterial() || isFluent())
     && [
       'TreeList-StatePersistence',
+      'DataGrid-SignalRService',
       // False positive: contrast rules do not apply to custom orange color
       'CardView-FieldTemplate',
       // False positive: contrast rules do not apply to read-only editors on the custom option panel background
@@ -111,6 +112,10 @@ const getIgnoredRules = (testName) => {
     'Gantt-Validation': ['aria-required-parent', 'aria-valid-attr-value'],
 
     'Localization-UsingGlobalize': ['label'],
+
+    // Icon-only tabs render no text, so they have no accessible name.
+    // Naming them needs Tabs widget support (like Button labels icon-only buttons).
+    'Tabs-Overview': ['aria-tab-name'],
   };
 
   return [
@@ -229,6 +234,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
@@ -253,9 +264,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..1eb2395a5e00
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..8e656b37487f
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..1c5327a5de56
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..22fc07212bc9
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..f81a26fecf51
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..07b79982676b
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..1e34ca9af4ec
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..d3e8b7c12cb2
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..aa5dbbdbd3e6
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..18d3e6fcd8ce
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..ae88c6ad12c2
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..280e5d655f19
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..e2d8b024c471
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-ClientSideDataProcessing (fluent-next.blue.light)_mask.png b/apps/demos/testing/etalons/Charts-ClientSideDataProcessing (fluent-next.blue.light)_mask.png
new file mode 100644
index 000000000000..abeacd1a67b7
Binary files /dev/null and b/apps/demos/testing/etalons/Charts-ClientSideDataProcessing (fluent-next.blue.light)_mask.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..b253f820fad9
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..145781ace43e
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..3958f572d944
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..f25ca2d720ad
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..9c0f35e221e1
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..5f0bde113835
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..11219f44b641
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..a14e98fb63cd
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..a9371f3f958a
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..5c97ba6dd5b6
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..e00755211f68
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..5c97ba6dd5b6
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..c5d283368d01
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..4edf43cf1687
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..d0bbc3d1b3ed
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..03f58285dcd4
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..efd702a02407
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..7832bd856348
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..71253c68127b
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..3db41f4e9adc
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..5531ffa4022f
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..3fa729a1b86f
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..e8f1dd2b6bba
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..a5aca10feb87
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..1bc4c20ce48c
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..282b9b570292
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..03296e8cefe6
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..0a36b77914c8
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..40951148188e
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..0c30f619beb2
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..4d0cc33d8fbf
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..92c25d01ac8d
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..5c2effa686e8
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..ff6b7ec9bdbd
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..132a29c80259
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..bfc858b53891
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..48bfb9cf786d
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..a31b7887f4c8
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..b1df4c35ee89
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..ab6dfe06ada8
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..58baf15923cb
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..6d2065db0217
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..dc3a25db1732
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..da86d79415f5
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..7fd2d03f9f2c
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..83adcf7aa551
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..361ddceb78d7
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..a580b0d547fa
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..cc02636ddadb
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..7967e1e1cee3
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..6ff5f48a268f
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..7a30ecd2d35b
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..7a30ecd2d35b
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..3b470ff439c7
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..84ea3ff9b665
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..739d77251dab
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..877986ddfe3a
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..b31c02b436f8
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..555997801a02
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..77e1bc562bf3
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..cc293f88fca2
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..b58a16512cee
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..c11ab3839b7f
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..2431bfb3d5fc
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..ae57be0bc1ed
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..8fe82823ef0f
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..d946a99d55bb
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..7475d95d5554
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..e2bc24c88ee9
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..086135ca721f
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..5cd07394713e
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..4e5a3a02baad
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..ce2af87328f2
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..d0b00e16bf93
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..281be2009cf9
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..d42e55ede7e3
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..c2b79b4a2311
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..890965a29d14
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..3f3bf31d1384
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..4a47dc3666a9
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..8ac8893f84be
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..89f611b43695
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..701fde4553a4
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..51eac2648ae0
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..7b28365158bc
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..fab067790349
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-ItemSelection (fluent-next.blue.light)_mask.png b/apps/demos/testing/etalons/Diagram-ItemSelection (fluent-next.blue.light)_mask.png
new file mode 100644
index 000000000000..1564486ac48c
Binary files /dev/null and b/apps/demos/testing/etalons/Diagram-ItemSelection (fluent-next.blue.light)_mask.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..8b3b0281831f
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..9539dfae4b5c
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..9539dfae4b5c
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..3bb972e298f1
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..1e2130a60b83
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..14aacf87b624
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..5cf8e10c03d2
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..ccdc5972ca05
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..420e5c0f0a71
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..90047d423e88
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..e58f76947923
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..b377f4f02bbc
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..9467695a492d
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..5b6467f4a684
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..bea4763653a5
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..03c1ef147ecd
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..220003312c76
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..1e64433fc2b3
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..2347281b02cc
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..38fbe1649d90
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..681b37220813
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..41201b8918fd
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..4698030a7f7e
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..31a0a4b0aedf
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..a273147e0f07
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..f9d8fdcd53df
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..cd0bf7e89ddb
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..303a7c874e3f
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..f1167004bec7
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..bf75f50d3c95
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..d1de4a507fa9
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..ff11ad320ea4
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..24ff199bd965
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..e55901b86c1d
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..ff513f679e5f
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..14038dbbba46
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..395648411379
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..328a64c8d3c7
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..cfe49aa99ef7
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..f821ce112f14
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..fbf4db76287f
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..754888df92a6
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..a1dbc36e9728
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..6358a15ec5dd
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..07300623fd4f
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..9539f8ba25a1
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..9539f8ba25a1
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..0253883da402
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..7c1d6b4dc299
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..cd7006f910f3
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..19e73fed8b53
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..57f19530c7f5
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..be71578328b0
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..b65772c364b7
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..08a0e2f2f2c6
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..76c14baab2e2
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..4438ae0c20be
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..3ee90ab59b61
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..278ee8411c0c
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..d7cebfdfc9b3
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..5f010bb9a80f
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..d83aa4f6fb42
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..d060b7d943ed
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..4dd8faa0d3aa
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-StatePersistence (fluent-next.blue.light)_mask.png b/apps/demos/testing/etalons/PivotGrid-StatePersistence (fluent-next.blue.light)_mask.png
new file mode 100644
index 000000000000..43450a9290f1
Binary files /dev/null and b/apps/demos/testing/etalons/PivotGrid-StatePersistence (fluent-next.blue.light)_mask.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..9d82f14774bb
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..a414c8bffdc1
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/PivotGrid-WebAPIService (fluent-next.blue.light).png b/apps/demos/testing/etalons/PivotGrid-WebAPIService (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7b604fb7290c
Binary files /dev/null and b/apps/demos/testing/etalons/PivotGrid-WebAPIService (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..fca8963e95ad
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..da7de3026bad
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..90295bd6668d
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..eeb5b074d9dd
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..333521c16186
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..2ef345d28d82
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..ae4af1eeb917
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..ff9803faf823
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..8706e596ea76
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..3817f4c05088
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..5dad346d004b
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..c8d3fe329ba8
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..a3fc00d70e99
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..dccfc62db9ee
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..d9bf48c9a73c
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..336f1a9ff8d1
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..ed7d7f5fc22b
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..8040dfab746a
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..0fd0c2d49200
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..244e6e725a45
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..1907fc38c262
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..233d64fd865d
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..92e20d1cc401
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..a92238f3058c
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..30639d0c24bf
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..90dc7430b2cc
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..d3a66442a3cb
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..fb720f9386ff
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..e5337da0c784
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-MultilevelGrouping (fluent-next.blue.light).png b/apps/demos/testing/etalons/Scheduler-MultilevelGrouping (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d0c87382c890
Binary files /dev/null and b/apps/demos/testing/etalons/Scheduler-MultilevelGrouping (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..410e06e04d89
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..3f52a358589d
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..bceeef9b5260
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..4be99f9cec57
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..3678708a0a6a
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..7ad6a1ba563b
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..b42403e888c3
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..0eeed98453ab
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..3489efd32590
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..0fa1134b875a
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..78ca3b0bfaeb
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..34de8eb8fca0
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..ac9b21a18d4b
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..ce07f305cc32
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..0d5c3eae7ddf
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..caeb0aae3712
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..0e45c06594f4
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..bfd3783efcd2
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..c9a21981d758
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..4a4c0fe08369
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..492b0ab88134
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/TabPanel-Templates (fluent-next.blue.light)_mask.png b/apps/demos/testing/etalons/TabPanel-Templates (fluent-next.blue.light)_mask.png
new file mode 100644
index 000000000000..ed5ce253bf25
Binary files /dev/null and b/apps/demos/testing/etalons/TabPanel-Templates (fluent-next.blue.light)_mask.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..b726e665cd37
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..3427a461aec0
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..c9ec7d65fd88
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..348d546e511d
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..287ab2c4b2f6
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..f43fcd0028c8
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..5a5821e79a3b
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..bd5f2345f451
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..9f9a42cb5b76
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..b792fbd92b13
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..bb43b2b1615e
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..3c522747f7e7
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..4a905b258793
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..a926c7964740
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..bdb896f8b03d
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..920899c7e45e
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..d99b653d6319
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..00af1575e433
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..4227f35443f0
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..a3c2a50ba168
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..f1ccfffbf9f9
Binary files /dev/null and b/apps/demos/testing/etalons/VectorMap-ZoomingAndCentering (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/visualtestrc-schema.json b/apps/demos/testing/visualtestrc-schema.json
index 14a7f573e7cf..aa89610394cd 100644
--- a/apps/demos/testing/visualtestrc-schema.json
+++ b/apps/demos/testing/visualtestrc-schema.json
@@ -32,16 +32,16 @@
   },
   "additionalProperties": false,
   "$defs": {
-      "frameworkOptions":{
-          "type": "object",
-          "properties": {
-              "ignore": {
-                  "type": "boolean"
-              },
-              "comparison-options": {
-                  "$ref": "../node_modules/devextreme-screenshot-comparer/src/options-schema.json"
-              }
-          }
+    "frameworkOptions": {
+      "type": "object",
+      "properties": {
+        "ignore": {
+          "type": "boolean"
+        },
+        "comparison-options": {
+          "$ref": "../node_modules/devextreme-screenshot-comparer/src/options-schema.json"
+        }
       }
+    }
   }
 }
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..a5976662a56e
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..7bed55b55daf
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..a5976662a56e
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..9d9e08376d76
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..83099e0470c1
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..abab992105ca
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..1f729159934b
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..364ca9974c6b
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..2480fe1fabf8
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..dc0e929ef6bc
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..dd4b057b7843
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..c9d77b7a605a
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..9c354cdddd54
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..ed7c8512e174
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..8eefad3807c3
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..a60ec697d817
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..64b1689be5f8
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..034434d8e327
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..46ed726d5786
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..6f4b793ad553
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..3121d744db7d
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..a414e5e2cb28
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..34bb7f7505e4
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..ae7cc35489b3
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..5e0754b1e5ff
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..3023eb8d28f3
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..ba757b3bc849
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..b7945b7f6172
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..013f17514b4d
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..8a428c7e141d
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..a033b9c96734
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..bdfbd6e6aced
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..2b02f8d7e484
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..025d61a28b09
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..acbc8dc0c406
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..95d3edc754ad
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..d7233977c8b9
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..a01b33d7aae1
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..57dc8fecf3bd
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..de362725ec40
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..294073b0e2d9
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..de362725ec40
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..6ce1bc139f9e
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..a4bf201371ed
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..ea08c073689f
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..c55956df05c9
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..ca08db4761ae
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..5cbce295f85c
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..a448615cd55f
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..e177387783e1
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..98733952855f
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..fa613e1f9f5a
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..c686d2a0e410
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..98733952855f
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..98733952855f
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..443fa20e4438
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..9718ed9b7011
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..5edf8293d482
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..c7ee6b972ce1
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..0937d24e290f
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..2a3a6d46dfdd
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..28c4a698aa80
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..f24a171704ad
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..b18033a5e65f
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..4e474162f0df
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..92a5d78aabca
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..144fbb05e8c0
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..cc0d1fb48ea6
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..4a05e8c327eb
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..73b85476d002
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..4a05e8c327eb
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..1acfdbda3ba8
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..50d91a1c20b1
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..39c6422893e7
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..8c0ce6e6c04f
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..70fd8d51a606
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..517aac63bcb6
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..2ffd6c270152
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..84f897b78783
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..68c74c1f4422
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_gridbox (fluent-next.blue.light)_mask.png b/apps/demos/testing/widgets/dropdownbox/etalons/dropdownbox_multiple_selection_gridbox (fluent-next.blue.light)_mask.png
new file mode 100644
index 000000000000..1321de41fd45
Binary files /dev/null and b/apps/demos/testing/widgets/dropdownbox/etalons/dropdownbox_multiple_selection_gridbox (fluent-next.blue.light)_mask.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..f1ce7dd2e133
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..aa3123b0018c
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..f041758dd7cf
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..5e8547b77b8f
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..0c0bdaf7106a
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..7769ad57a2f6
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..2713fe8f608b
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..b219e9acc8c8
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..c29a3cfec5c8
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..08c1fa1ac03e
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..0980d3b144d0
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..ea00a35bdb3a
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..cd91df2baf76
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..805fae325797
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..c7f0ba07beb4
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..dceb1c0d28f7
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..50705f82211c
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..746bcd51d0bb
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..9a992ff4a148
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..203ce3119811
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..203ce3119811
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..67b787e8d124
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..605401a24734
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..0e5dcfbac47e
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..46e3be8d7916
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..9188bad0fd98
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..a7b4cf23fdd9
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..2c8b6d0766bc
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..f972870c65f2
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/selectbox/etalons/selectbox_groupeditems_third_opened (fluent-next.blue.light)_mask.png b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_third_opened (fluent-next.blue.light)_mask.png
new file mode 100644
index 000000000000..3e497b311df3
Binary files /dev/null and b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_third_opened (fluent-next.blue.light)_mask.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..e5ffd515011f
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..e582c8903402
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..a8e47fe3709f
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..383a8649d647
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..956254ac0768
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..a777c970aefc
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..d7ce0c0a144d
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..b2ec8a80ff1f
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..38f5e934e6e7
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..3bf7e45bf6b1
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..1bfbe00d3f33
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..b65a0da98d2e
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..4e7445074e49
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..166888a490f8
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..358b843785ae
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..9a6349d2c501
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..e94d6bd69a98
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..529993498a68
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..6e38b0e153ed
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..931670b077d3
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..3ae824208e05
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..635cef994178
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..493d60d053bd
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..89a3c744ed7d
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..f13d89209f81
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..39e1f58b63d9
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..dc2dd683c04c
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..5f70070149df
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..1c1f5b07e260
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..28390e1429d2
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..596a4388d309
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..c7153fb4fd26
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/tagbox/etalons/tagbox_groupeditems_third_opened (fluent-next.blue.light)_mask.png b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_third_opened (fluent-next.blue.light)_mask.png
new file mode 100644
index 000000000000..815194aac0df
Binary files /dev/null and b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_third_opened (fluent-next.blue.light)_mask.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..be9ee24e2810
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..a85a1912d13e
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..7c08cfa2f9c7
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..9596780ca353
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..2d66366b0262
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..dd80b3841d6d
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..39139b7aa6d7
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/server/csp-canary-guard.js b/apps/demos/utils/server/csp-canary-guard.js
new file mode 100644
index 000000000000..f1e55af1b72e
--- /dev/null
+++ b/apps/demos/utils/server/csp-canary-guard.js
@@ -0,0 +1,39 @@
+/*
+ * Whether what came back is the canary at all, before anything is concluded from it.
+ *
+ * The demo server sets the CSP header from its first middleware, so every response carries a
+ * complete policy — a 404 included. That makes a canary page that moved or went missing pass the
+ * policy assertions exactly like the real one, and the failure then surfaces a render deadline
+ * later as "Nothing rendered", which sends the reader to look at the renderer rather than at the
+ * path. The status code is the one thing that tells those two apart, so it is checked first.
+ *
+ * Only a 404 is told what it means. A server that is reachable and answers something else is not
+ * a moved file, and guessing at the cause is the mistake this guard exists to stop making — the
+ * status is reported and left to speak for itself. A server that is not there at all never gets
+ * here: the request rejects with ECONNREFUSED before any status exists.
+ */
+
+const canaryProblem = (statusCode, headers) => {
+  if (statusCode === 404) {
+    return 'the server answered 404 for the canary page — it is not where the check looks for it';
+  }
+
+  if (statusCode !== 200) {
+    return `the server answered ${statusCode} for the canary page`;
+  }
+
+  const policy = headers['content-security-policy-report-only']
+    || headers['content-security-policy'];
+
+  if (!policy) {
+    return 'the server served the canary page without a policy header';
+  }
+
+  if (!policy.includes('style-src')) {
+    return `the policy carries no style-src directive: ${policy}`;
+  }
+
+  return null;
+};
+
+module.exports = { canaryProblem };
diff --git a/apps/demos/utils/server/csp-canary.html b/apps/demos/utils/server/csp-canary.html
new file mode 100644
index 000000000000..01033d8d8491
--- /dev/null
+++ b/apps/demos/utils/server/csp-canary.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>CSP canary</title>
+
+    <!--
+      Three deliberate violations of the policy every demo page is served with. The check loads this
+      page through the same pipeline as a demo and requires all three to come back: a run that finds
+      nothing on the demos must mean the detector looked, not that it stopped working. Nothing here
+      needs a script — the policy forbids inline ones, and the probes are declarative anyway.
+    -->
+
+    <!-- 1. An inline style element: style-src-elem, without a nonce. -->
+    <style>
+      .csp-canary-inline-style {
+        color: rgb(1, 2, 3);
+      }
+    </style>
+
+    <!-- 2. A stylesheet from an origin the policy does not list. The host does not resolve, which is
+         the point: the violation is reported before anything is fetched. -->
+    <link rel="stylesheet" href="https://csp-canary.invalid/probe.css" />
+  </head>
+  <body>
+    <!-- 3. A style attribute: style-src-attr. The class is what the check waits for, the same
+         selector a rendered demo is recognised by. -->
+    <div class="dx-widget" style="color: rgb(4, 5, 6)">CSP canary</div>
+  </body>
+</html>
diff --git a/apps/demos/utils/server/csp-check.js b/apps/demos/utils/server/csp-check.js
index 0e19d27275fa..27af0c5a697a 100644
--- a/apps/demos/utils/server/csp-check.js
+++ b/apps/demos/utils/server/csp-check.js
@@ -6,6 +6,7 @@ const {
 } = require('fs');
 const http = require('http');
 const { readShardConfig, applyShard: applyShardGeneric } = require('./shard');
+const { canaryProblem } = require('./csp-canary-guard');
 
 const DEMO_ROOT = join(__dirname, '..', '..');
 const REPORT_DIR = join(DEMO_ROOT, 'csp-reports');
@@ -307,11 +308,17 @@ async function collectViolations(tab, url, renderDeadlineMs) {
   await waitForDomIdle(tab);
 
   const res = await tab.send('Runtime.evaluate', {
-    expression: 'JSON.stringify(window.__cspViolations || [])',
+    expression: 'JSON.stringify(window.__cspViolations ?? null)',
     returnByValue: true,
   });
   const raw = res && res.result && res.result.value;
-  const all = raw ? JSON.parse(raw) : [];
+  const all = raw ? JSON.parse(raw) : null;
+
+  // `window.__cspViolations` absent means the listener never ran, which used to read as "no
+  // violations" — the one failure this check could not see.
+  if (!Array.isArray(all)) {
+    throw new Error(`CSP listener did not run for ${url}`);
+  }
 
   const seen = new Set();
   return all.filter((v) => {
@@ -340,6 +347,64 @@ async function visitPage(url, renderDeadlineMs = RENDER_DEADLINE_MS) {
   }
 }
 
+const CANARY_URL = `${SERVER_URL}/apps/demos/utils/server/csp-canary.html`;
+
+// Each probe in csp-canary.html, by the shape its violation comes back in.
+const CANARY_PROBES = [
+  {
+    what: 'inline <style> element',
+    match: (v) => v.effectiveDirective === 'style-src-elem' && v.blockedURI === 'inline',
+  },
+  {
+    what: 'stylesheet from a disallowed origin',
+    match: (v) => v.effectiveDirective === 'style-src-elem'
+      && v.blockedURI.startsWith('https://csp-canary.invalid/'),
+  },
+  {
+    what: 'style attribute',
+    match: (v) => v.effectiveDirective === 'style-src-attr' && v.blockedURI === 'inline',
+  },
+];
+
+/* A GET whose body is thrown away: what is wanted is the status and the headers, and a server
+ * that answers HEAD differently from GET would answer the wrong question. */
+function httpMeta(url) {
+  return new Promise((resolve, reject) => {
+    const req = http.request(url, { method: 'GET' }, (res) => {
+      res.resume();
+      res.on('end', () => resolve({ statusCode: res.statusCode, headers: res.headers }));
+    });
+    req.on('error', reject);
+    req.end();
+  });
+}
+
+/*
+ * A run that reports no violations is only worth something if the detector was alive. The canary
+ * page breaks the policy three ways on purpose; all three have to come back, or the demos were
+ * never really checked.
+ */
+async function verifyCanary() {
+  const { statusCode, headers } = await httpMeta(CANARY_URL);
+  const problem = canaryProblem(statusCode, headers);
+
+  if (problem) {
+    throw new Error(problem);
+  }
+
+  const violations = await visitPage(CANARY_URL);
+  const missed = CANARY_PROBES
+    .filter(({ match }) => !violations.some(match))
+    .map(({ what }) => what);
+
+  if (missed.length) {
+    throw new Error(`${missed.length} of ${CANARY_PROBES.length} probe(s) went unreported `
+      + `(${missed.join(', ')}); ${violations.length} violation(s) seen`);
+  }
+
+  console.log(`CSP canary: all ${CANARY_PROBES.length} probes reported\n`);
+}
+
 function httpRequest(url, method) {
   return new Promise((resolve, reject) => {
     const req = http.request(url, { method: method || 'GET' }, (res) => {
@@ -418,6 +483,14 @@ async function main() {
   await startBrowser();
 
   try {
+    try {
+      await verifyCanary();
+    } catch (err) {
+      console.log(`\n❌ CSP canary failed — this run could not detect a violation: ${err.message}`);
+      process.exitCode = 1;
+      return;
+    }
+
     await runPool(demos, CONCURRENCY, async (demo, i) => {
       const idx = i + 1;
       try {
diff --git a/apps/demos/utils/tests/server/csp-canary-guard.test.js b/apps/demos/utils/tests/server/csp-canary-guard.test.js
new file mode 100644
index 000000000000..169b3c90a1bb
--- /dev/null
+++ b/apps/demos/utils/tests/server/csp-canary-guard.test.js
@@ -0,0 +1,47 @@
+const { canaryProblem } = require('../../server/csp-canary-guard');
+
+const POLICY = "style-src 'self' https://maxcdn.bootstrapcdn.com; report-uri /csp-report";
+
+describe('canaryProblem', () => {
+  it('passes the canary the server really served', () => {
+    expect(canaryProblem(200, { 'content-security-policy-report-only': POLICY })).toBeNull();
+  });
+
+  it('passes an enforcing policy as well as a report-only one', () => {
+    expect(canaryProblem(200, { 'content-security-policy': POLICY })).toBeNull();
+  });
+
+  /*
+   * The case the check was blind to: the demo server sets the policy header on every response, so
+   * a 404 carries a complete, correct-looking policy and everything below the status check agrees
+   * the canary is fine.
+   */
+  it('names the status when the canary page is not there', () => {
+    const problem = canaryProblem(404, { 'content-security-policy-report-only': POLICY });
+
+    expect(problem).toContain('404');
+    expect(problem).toContain('not where the check looks for it');
+  });
+
+  /*
+   * Anything else the server answers is not a moved file, and saying so would be the same wrong
+   * diagnosis one level down.
+   */
+  it('reports another status without guessing at the cause', () => {
+    const problem = canaryProblem(500, { 'content-security-policy-report-only': POLICY });
+
+    expect(problem).toBe('the server answered 500 for the canary page');
+    expect(problem).not.toContain('looks for it');
+  });
+
+  it('reports a response that carries no policy at all', () => {
+    expect(canaryProblem(200, {})).toBe('the server served the canary page without a policy header');
+  });
+
+  it('reports a policy that says nothing about style-src', () => {
+    const policy = "script-src 'self'; report-uri /csp-report";
+
+    expect(canaryProblem(200, { 'content-security-policy-report-only': policy }))
+      .toBe(`the policy carries no style-src directive: ${policy}`);
+  });
+});
diff --git a/apps/demos/utils/visual-tests/helpers/theme-utils.js b/apps/demos/utils/visual-tests/helpers/theme-utils.js
index c193451574a6..65551f3f2ade 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) => {
@@ -26,10 +27,22 @@ export async function testScreenshot(
 ) {
   const testTheme = process.env.THEME;
 
+  /*
+   * Defaults for every screenshot. `looksSameComparisonOptions` used to live here with
+   * tolerance/antialiasingTolerance 20, which made the comparison looser than the comparator's own
+   * defaults for EVERY demo in EVERY theme — and it hid real drift: a hairline that changed by 9
+   * units, a whole tree shifted by a pixel, an appointment line dropped by a product change, all
+   * passed silently for months (wave H, 28.08.2026).
+   *
+   * A demo that genuinely renders unstable pixels asks for the looser comparison itself, in its own
+   * visualtestrc.json ("comparison-options") or at the call site — so the exception is visible,
+   * greppable and attached to a reason, instead of covering everything.
+   */
   const themeOptions = {
     textDiffTreshold: 0.2,
   };
 
+  // per-demo options win: the defaults above must not silently override what a test asked for
   const finalOptions = {
     ...themeOptions,
     ...comparisonOptions,
diff --git a/e2e/testcafe-devextreme/helpers/accessibility/test.ts b/e2e/testcafe-devextreme/helpers/accessibility/test.ts
index b0ee0f853879..cb24031b5c80 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..45c82edfc214 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,23 @@ 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';
+
+  if (isColorContrastOnly && !isColorContrastChecked(options)) {
+    throw new Error(
+      'a11yCheck was called on fluent-next with a configuration that excludes color-contrast, '
+      + 'the only rule this theme runs, so nothing would be checked. Leave color-contrast '
+      + 'enabled, or do not declare the test for this theme.',
+    );
+  }
+
+  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/helpers/themeUtils.ts b/e2e/testcafe-devextreme/helpers/themeUtils.ts
index 9e8e738e159b..f6d01ef92b7e 100644
--- a/e2e/testcafe-devextreme/helpers/themeUtils.ts
+++ b/e2e/testcafe-devextreme/helpers/themeUtils.ts
@@ -20,6 +20,8 @@ export const isMaterial = (): boolean => (process.env.theme ?? defaultThemeName)
 
 export const isFluent = (): boolean => (process.env.theme ?? defaultThemeName).startsWith('fluent');
 
+export const isFluentNext = (): boolean => (process.env.theme ?? defaultThemeName).startsWith('fluent-next');
+
 export const isMaterialBased = (): boolean => isMaterial() || isFluent();
 
 export const getFullThemeName = (): string => process.env.theme ?? defaultThemeName;
diff --git a/e2e/testcafe-devextreme/runner.ts b/e2e/testcafe-devextreme/runner.ts
index ab47c5657686..aa5b7f742e65 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,
@@ -100,8 +101,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 })();
@@ -115,6 +123,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();
 }
@@ -288,7 +305,7 @@ async function main() {
         testMeta?: any,
       ) => {
         if (testMeta?.runInTheme) {
-          return testMeta.runInTheme === process.env.theme;
+          return matchTheme(testMeta.runInTheme, process.env.theme);
         }
         return true;
       });
@@ -300,7 +317,7 @@ async function main() {
           _fixturePath: string,
           testMeta?: any,
         ) => {
-          if (testMeta?.runInTheme === process.env.theme) {
+          if (matchTheme(testMeta?.runInTheme, process.env.theme)) {
             return true;
           }
 
@@ -308,7 +325,7 @@ async function main() {
             return false;
           }
 
-          return testMeta.themes.includes(args.theme);
+          return testMeta.themes.some((themeName: string) => matchTheme(themeName, args.theme));
         });
       }
 
@@ -365,6 +382,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/cardView/columnSortable.ts b/e2e/testcafe-devextreme/tests/accessibility/cardView/columnSortable.ts
index 64ed0b8a5667..7b7b70ed1c4b 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/cardView/columnSortable.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/cardView/columnSortable.ts
@@ -3,6 +3,7 @@ import { createWidget } from '../../../helpers/createWidget';
 import url from '../../../helpers/getPageUrl';
 import { getColumnItem, triggerDragEnd, triggerDragStart } from '../../cardView/columnSortable/utils';
 import { a11yCheck } from '../../../helpers/accessibility/utils';
+import { getThemeName } from '../../../helpers/themeUtils';
 
 fixture.disablePageReloads`CardView - ColumnSortable`
   .page(url(__dirname, '../../container.html'));
@@ -16,10 +17,9 @@ test('headerPanel dragging column when it has sorting and headerFilter', async (
   await triggerDragStart(columnElement);
 
   const a11yCheckConfig = {
-    // Real failure, not a false positive: the drag source keeps dxSortable's 0.5 dim and the
-    // disabled colours - 1.61 generic, 1.65 fluent, 2.61 material. Undimming it is a design
-    // decision, so only this rule is off and the rest still run.
-    rules: { 'color-contrast': { enabled: false } },
+    rules: {
+      ...(getThemeName() === 'fluent-next' ? {} : { 'color-contrast': { enabled: false } }),
+    },
   };
   await a11yCheck(t, a11yCheckConfig, CARD_VIEW_SELECTOR);
 }).before(async () => createWidget('dxCardView', {
diff --git a/e2e/testcafe-devextreme/tests/accessibility/cardView/sortable.ts b/e2e/testcafe-devextreme/tests/accessibility/cardView/sortable.ts
index 1ebaea5957f2..8ce5660a6168 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/cardView/sortable.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/cardView/sortable.ts
@@ -4,6 +4,7 @@ import { MouseAction, MouseUpEvents } from '../../../helpers/mouseUpEvents';
 import { createWidget } from '../../../helpers/createWidget';
 import { insertStylesheetRulesToPage } from '../../../helpers/domUtils';
 import { a11yCheck } from '../../../helpers/accessibility/utils';
+import { getThemeName } from '../../../helpers/themeUtils';
 
 fixture.disablePageReloads`CardView - Sortable`
   .page(url(__dirname, '../../container.html'));
@@ -16,10 +17,7 @@ const DRAG_MOVE_Y_COEFFICIENT = 1;
 
 const a11yCheckConfig = {
   rules: {
-    // Real failure, not a false positive: the drag source keeps dxSortable's 0.5 dim and the
-    // disabled colours - 1.61 generic, 1.65 fluent, 2.61 material. Undimming it is a design
-    // decision, so only this rule is off and the rest still run.
-    'color-contrast': { enabled: false },
+    ...(getThemeName() === 'fluent-next' ? {} : { 'color-contrast': { enabled: false } }),
     // NOTE: Draggable template is outside the role="main" landmark
     region: { enabled: false },
   },
diff --git a/e2e/testcafe-devextreme/tests/accessibility/dataGrid/common.ts b/e2e/testcafe-devextreme/tests/accessibility/dataGrid/common.ts
index 42e2492cbcde..26a4a193664d 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/dataGrid/common.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/dataGrid/common.ts
@@ -4,6 +4,7 @@ import { a11yCheck } from '../../../helpers/accessibility/utils';
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
 import { getData } from '../../dataGrid/helpers/generateDataSourceData';
+import { getFullThemeName } from '../../../helpers/themeUtils';
 
 fixture.disablePageReloads`DataGrid - Common`
   .page(url(__dirname, '../../container.html'));
@@ -12,6 +13,8 @@ const DATA_GRID_SELECTOR = '#container';
 
 const a11yCheckConfig = {};
 
+const isFluentNextDark = getFullThemeName() === 'fluent-next.blue.dark';
+
 test('Grid without config', async (t) => {
   const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
 
@@ -636,7 +639,7 @@ test('Empty column chooser', async (t) => {
   }, DATA_GRID_SELECTOR));
 });
 
-test('Row editing mode - confirm delete message', async (t) => {
+(isFluentNextDark ? test.skip : test)('Row editing mode - confirm delete message', async (t) => {
   const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
   const isDialogOpened = dataGrid.getDialog().exists;
 
@@ -840,7 +843,7 @@ test('Validation in cell editing mode', async (t) => {
     .expect(dataGrid.getInvalidMessageTooltip().exists)
     .ok();
 
-  await a11yCheck(t);
+  await a11yCheck(t, a11yCheckConfig, { exclude: ['#dxInvalidMessage'] });
 }).before(async () => createWidget('dxDataGrid', {
   dataSource: getData(10, 5),
   keyExpr: 'field_0',
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..2a356f8802f6
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..56b8337cd231
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..36d32d791aa2
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..02024722ef92
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..763dc5756b80
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..a98923308149
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..41117678a187
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..26e541f941bc
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..5bf2a0962bf4
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..f535ab11b0fd
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..f50c4c155959
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..0f82486f738b
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..0f82486f738b
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..5809cf091474
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..0fe26338ff31
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..ee786b30bb4c
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..9506aec123ca
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..675cd6f97dcc
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..082b545945d6
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..83d06cf784d2
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..5ebc3ce2d475
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..5688ca939971
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..b70e1276c662
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..c497691eff5b
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..06941832bd80
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..fd722e3923e8
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..0aafd4ffc419
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..ed5be5369704
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..95d5caf97563
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..22550b973ce1
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..d38491d6cd5d
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..22550b973ce1
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..95d5caf97563
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..ed5be5369704
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..95d5caf97563
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/accentColor.ts b/e2e/testcafe-devextreme/tests/common/accentColor.ts
new file mode 100644
index 000000000000..317fcc477510
--- /dev/null
+++ b/e2e/testcafe-devextreme/tests/common/accentColor.ts
@@ -0,0 +1,217 @@
+/* eslint-disable spellcheck/spell-checker */
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import { ClientFunction } from 'testcafe';
+import { createWidget } from '../../helpers/createWidget';
+import { appendElementTo } from '../../helpers/domUtils';
+import url from '../../helpers/getPageUrl';
+import { getData } from '../dataGrid/helpers/generateDataSourceData';
+import { isFluentNext, testScreenshot } from '../../helpers/themeUtils';
+
+const STEPS = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180];
+const ARBITRARY_ACCENT = '#a703ff';
+
+const DESIGNED_PALETTE_TOLERANCE = 4;
+const HUE_TOLERANCE = 0.01;
+
+interface Oklch {
+  l: number;
+  c: number;
+  h: number;
+}
+
+interface MeasuredStep {
+  step: number;
+  resolved: string;
+  oklch: Oklch | null;
+}
+
+const measurePalette = ClientFunction((accent: string | null, steps: number[]) => {
+  const root = document.documentElement;
+
+  if (accent) {
+    root.style.setProperty('--dx-accent-color', accent);
+  } else {
+    root.style.removeProperty('--dx-accent-color');
+  }
+
+  const probe = document.createElement('div');
+  document.body.appendChild(probe);
+
+  const asOklch = (color: string): Oklch | null => {
+    probe.style.backgroundColor = `oklch(from ${color} l c h)`;
+    const resolved = getComputedStyle(probe).backgroundColor;
+    const parts = /^oklch\(([-\d.]+) ([-\d.]+) ([-\d.]+)/.exec(resolved);
+
+    return parts ? { l: +parts[1], c: +parts[2], h: +parts[3] } : null;
+  };
+
+  const read = (step: number): MeasuredStep => {
+    probe.style.backgroundColor = `var(--dxds-primary-${step})`;
+    const resolved = getComputedStyle(probe).backgroundColor;
+
+    return { step, resolved, oklch: asOklch(resolved) };
+  };
+
+  const setting = (name: string): number => +getComputedStyle(root).getPropertyValue(name).trim();
+  const measured = steps.map(read);
+  const source = accent ? asOklch(accent) : null;
+
+  probe.remove();
+
+  return {
+    measured,
+    source,
+    settings: {
+      lightnessMax: setting('--dx-accent-lightness-max'),
+      lightnessMin: setting('--dx-accent-lightness-min'),
+      chromaMin: setting('--dx-accent-chroma-min'),
+    },
+  };
+});
+
+const PALETTE_STRIP = 'accent-palette';
+const ACCENT_GRID = 'accent-grid';
+const GRID_DATA = getData(5, 2);
+const SHIPPED_ACCENTS = [
+  { palette: 'blue', color: '#0f6cbd' },
+  { palette: 'rust', color: '#da3b01' },
+  { palette: 'mint', color: '#018574' },
+];
+
+const drawPaletteStrip = ClientFunction((accent: string, steps: number[]) => {
+  document.documentElement.style.setProperty('--dx-accent-color', accent);
+  const strip = document.getElementById(PALETTE_STRIP)!;
+  strip.textContent = '';
+
+  const swatches = steps.map((step) => {
+    const column = document.createElement('div');
+    column.style.cssText = 'width: 60px; font: 10px/14px monospace; color: #000; text-align: center';
+
+    const swatch = document.createElement('div');
+    swatch.style.cssText = 'height: 60px; border: 1px solid #000';
+    swatch.style.backgroundColor = `var(--dxds-primary-${step})`;
+
+    const caption = document.createElement('div');
+    caption.textContent = `${step}`;
+
+    column.appendChild(swatch);
+    column.appendChild(caption);
+    strip.appendChild(column);
+
+    return { step, swatch, caption };
+  });
+
+  const asHex = (color: string): string => {
+    const probe = document.createElement('div');
+    probe.style.backgroundColor = `rgb(from ${color} r g b)`;
+    strip.appendChild(probe);
+    const resolved = getComputedStyle(probe).backgroundColor;
+    probe.remove();
+    const channels = (resolved.match(/[-\d.]+/g) ?? []).slice(0, 3);
+    const scale = resolved.startsWith('color(') ? 255 : 1;
+
+    return channels.length === 3
+      ? `#${channels
+        .map((raw) => Math.round(Math.min(255, Math.max(0, +raw * scale))).toString(16).padStart(2, '0'))
+        .join('')}`
+      : resolved;
+  };
+
+  swatches.forEach(({ step, swatch, caption }) => {
+    caption.textContent = `${step}\n${asHex(getComputedStyle(swatch).backgroundColor)}`;
+    caption.style.whiteSpace = 'pre';
+  });
+}, { dependencies: { PALETTE_STRIP } });
+const oklchDistance = (first: Oklch, second: Oklch): number => {
+  const radians = Math.PI / 180;
+  const firstA = first.c * Math.cos(first.h * radians);
+  const firstB = first.c * Math.sin(first.h * radians);
+  const secondA = second.c * Math.cos(second.h * radians);
+  const secondB = second.c * Math.sin(second.h * radians);
+  const squared = (first.l - second.l) ** 2 + (firstA - secondA) ** 2 + (firstB - secondB) ** 2;
+
+  return Math.sqrt(squared) * 100;
+};
+
+const rounded = (value: number): number => Math.round(value * 1000) / 1000;
+const stepOf = (measured: MeasuredStep[], step: number): Oklch => measured
+  .find((entry) => entry.step === step)!.oklch!;
+
+fixture`Custom accent color`
+  .page(url(__dirname, '../container.html'))
+  .afterEach(async () => {
+    await measurePalette(null, []);
+  });
+
+(isFluentNext() ? test : test.skip)('the designed seed gives the palette back', async (t) => {
+  const designed = await measurePalette(null, STEPS);
+  const designedSteps = designed.measured;
+  const seed = stepOf(designedSteps, 100);
+  const derived = await measurePalette(`oklch(${seed.l} ${seed.c} ${seed.h})`, STEPS);
+
+  await t
+    .expect(designedSteps.every((entry) => entry.resolved.startsWith('rgb')))
+    .ok('an unset accent must leave the designed values in place');
+
+  await t
+    .expect(derived.measured
+      .map((entry) => ({
+        step: entry.step,
+        distance: rounded(oklchDistance(stepOf(designedSteps, entry.step), entry.oklch!)),
+      }))
+      .filter(({ distance }) => distance > DESIGNED_PALETTE_TOLERANCE))
+    .eql([]);
+});
+
+(isFluentNext() ? test : test.skip)('an arbitrary accent keeps hue, order and clamps', async (t) => {
+  const { measured, source, settings } = await measurePalette(ARBITRARY_ACCENT, STEPS);
+  const steps = measured;
+  const lightest = stepOf(steps, 10);
+  const darkest = stepOf(steps, 180);
+  const accentItself = stepOf(steps, 100);
+
+  await t.expect({
+    lightest: { l: rounded(lightest.l), c: rounded(lightest.c) },
+    darkest: { l: rounded(darkest.l), c: rounded(darkest.c) },
+    accentItself: { l: rounded(accentItself.l), c: rounded(accentItself.c) },
+    lighteningSteps: steps
+      .filter((entry, index) => index > 0 && entry.oklch!.l >= steps[index - 1].oklch!.l)
+      .map((entry) => entry.step),
+    stepsOffHue: steps
+      .filter((entry) => Math.abs(entry.oklch!.h - source!.h) > HUE_TOLERANCE)
+      .map((entry) => entry.step),
+  }).eql({
+    lightest: { l: settings.lightnessMax, c: settings.chromaMin },
+    darkest: { l: settings.lightnessMin, c: settings.chromaMin },
+    accentItself: { l: rounded(source!.l), c: rounded(source!.c) },
+    lighteningSteps: [],
+    stepsOffHue: [],
+  });
+});
+
+(isFluentNext() ? test : test.skip)('the derived palette is drawn as designed', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  for (const { palette, color } of SHIPPED_ACCENTS) {
+    await drawPaletteStrip(color, STEPS);
+    await testScreenshot(t, takeScreenshot, `Accent palette ${palette}.png`, {
+      element: '#container',
+    });
+  }
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await appendElementTo('#container', 'div', PALETTE_STRIP, { display: 'flex' });
+  await appendElementTo('#container', 'div', ACCENT_GRID, { marginTop: '8px', width: '1080px' });
+  await createWidget('dxDataGrid', {
+    dataSource: GRID_DATA,
+    keyExpr: 'field_0',
+    selection: { mode: 'multiple' },
+    selectedRowKeys: [GRID_DATA[0].field_0, GRID_DATA[1].field_0],
+    focusedRowEnabled: true,
+    focusedRowKey: GRID_DATA[2].field_0,
+    showBorders: true,
+  }, `#${ACCENT_GRID}`);
+});
diff --git a/e2e/testcafe-devextreme/tests/common/etalons/Accent palette blue (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/etalons/Accent palette blue (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d5221ab41657
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/etalons/Accent palette blue (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/etalons/Accent palette mint (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/etalons/Accent palette mint (fluent-next.blue.light).png
new file mode 100644
index 000000000000..32c317810f1a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/etalons/Accent palette mint (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/etalons/Accent palette rust (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/etalons/Accent palette rust (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0175fb28eee5
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/etalons/Accent palette rust (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..cf753d3f3fef
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..f5eb1b6a4b15
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..627b38fbb5ab
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..2a35682845f9
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..b52b02d7b856
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..f9a28ba61f19
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..127099e9c7ce
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..be5321f94fc5
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..54a0aa0c6949
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..be5321f94fc5
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..54a0aa0c6949
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..3abce767b546
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..747c6a31e99e
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..3abce767b546
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..747c6a31e99e
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..be5321f94fc5
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..54a0aa0c6949
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..be5321f94fc5
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..54a0aa0c6949
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..ef859d11a1c1
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..8efe5a3b6c0a
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..ef859d11a1c1
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..8efe5a3b6c0a
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..f1976207e68b
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..b565d671d45d
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..fa2ce962522c
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..87d7bf8a5b81
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..f2e286894d58
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..f1976207e68b
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..2c1c515cf625
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..53e374dd5b5a
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..cb420c600f52
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..1ac0d4edf699
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..49565ede4ccb
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..4f4cd175823e
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..4f7a7fe68d89
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..c53932055c2d
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..9838cd1a84f8
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..3adc3f641f21
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..e38497860127
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..3d7f2c0fecd7
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..ec4ffd3ee0dd
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..e729c3afcc1c
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..69f73979a74b
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..3d2c309fdfe3
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..695049ce146e
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..061d87d3dbde
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..075dd4ff165a
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..fe2031727a4c
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..e2b46bb26f61
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..4a8461ad2849
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..df0c0288cb19
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..401e883fdaff
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..695049ce146e
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..061d87d3dbde
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..075dd4ff165a
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..fe2031727a4c
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..d1de9e25ce49
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..1f4d68f5fa51
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..d1de9e25ce49
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..afae0d797ff5
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..2c97c96944c6
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..58e1e900feb9
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..75d75a5654a5
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..c6adc72afcff
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..94057d7bf889
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..43b0f32ae0ed
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..ec40d3f6aece
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..0857e02d64e5
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..f2314610dcfe
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..959701f825de
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..d57fcbe9927d
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..593367245254
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..0f959aff4c47
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..9be11baaea6a
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..e5c3e010f597
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..cfb1f14a89fe
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..e5c3e010f597
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..27f5eff8e859
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..8fc2e7763853
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..da09c866eb59
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..d3553ff6f869
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..b1ed8e8671ef
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..589a7ae3fd7d
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/themeModes.ts b/e2e/testcafe-devextreme/tests/common/themeModes.ts
new file mode 100644
index 000000000000..da4996fa0f41
--- /dev/null
+++ b/e2e/testcafe-devextreme/tests/common/themeModes.ts
@@ -0,0 +1,186 @@
+import { ClientFunction, Selector } from 'testcafe';
+import url from '../../helpers/getPageUrl';
+import { createWidget } from '../../helpers/createWidget';
+import { getComputedPropertyValue } from '../../helpers/domUtils';
+import { clearTestPage } from '../../helpers/testPageUtils';
+import { getFullThemeName, getThemeName } from '../../helpers/themeUtils';
+
+/*
+ * The only place the mode classes are exercised in a real browser: jsdom does not inherit a custom
+ * property, and inheritance is the whole mechanism. Every assertion is relative - "this scope
+ * differs from that one", never a hex literal - so a token bump does not touch the test.
+ */
+if (getThemeName() === 'fluent-next') {
+  fixture`Theme modes`
+    .page(url(__dirname, '../container.html'))
+    .afterEach(async (t) => { await clearTestPage(t); });
+
+  const buildMode = getFullThemeName().includes('.dark') ? 'dark' : 'light';
+  const oppositeMode = buildMode === 'dark' ? 'light' : 'dark';
+
+  // Roles the mode decides, one per family, plus the two system-tier names that used to freeze.
+  const MODE_DEPENDENT = ['--dxds-color-bg', '--dxds-color-content'];
+  const SYSTEM_TIER = ['--dx-global-content', '--dx-surface-overlay', '--dx-focus-rect-outline'];
+
+  const render = ClientFunction((markup: string) => {
+    const container = document.querySelector('#container');
+
+    if (container) container.innerHTML = markup;
+  });
+
+  const valueAt = async (selector: string, property: string): Promise<string> => (
+    await getComputedPropertyValue(selector, property)
+  ).trim();
+
+  const reportedMode = ClientFunction((selector: string) => (window as any).DevExpress.ui.themes
+    .mode(document.querySelector(selector)));
+
+  const setScopeMode = ClientFunction((selector: string, mode: string, tell: boolean) => {
+    const scope = document.querySelector(selector) as HTMLElement;
+
+    scope.classList.remove('dx-theme-mode-light', 'dx-theme-mode-dark');
+    scope.classList.add(`dx-theme-mode-${mode}`);
+
+    if (tell) {
+      (window as any).DevExpress.ui.themes.refreshMode();
+    }
+  });
+
+  test('a named mode class re-resolves the roles under it', async (t) => {
+    await render(`
+      <div id="plain"></div>
+      <div class="dx-theme-mode-light"><div id="light"></div></div>
+      <div class="dx-theme-mode-dark"><div id="dark"></div></div>
+    `);
+
+    await t.expect(await valueAt('#plain', '--dx-theme-mode')).eql(buildMode);
+    await t.expect(await valueAt('#light', '--dx-theme-mode')).eql('light');
+    await t.expect(await valueAt('#dark', '--dx-theme-mode')).eql('dark');
+
+    for (const role of MODE_DEPENDENT) {
+      const [light, dark, plain] = [
+        await valueAt('#light', role),
+        await valueAt('#dark', role),
+        await valueAt('#plain', role),
+      ];
+
+      await t.expect(light)
+        .notEql(dark, `${role} must differ between the two named modes`);
+      await t.expect(plain)
+        .eql(buildMode === 'dark' ? dark : light, `${role} without a class is the bundle's mode`);
+    }
+  });
+
+  test('inverted flips against the nearest named scope', async (t) => {
+    await render(`
+      <div class="dx-theme-mode-inverted"><div id="bare"></div></div>
+      <div class="dx-theme-mode-dark"><div class="dx-theme-mode-inverted"><div id="in-dark"></div></div></div>
+      <div class="dx-theme-mode-light"><div class="dx-theme-mode-inverted"><div id="in-light"></div></div></div>
+      <div class="dx-theme-mode-inverted">
+        <div class="dx-theme-mode-inverted"><div id="nested"></div></div>
+      </div>
+      <div class="dx-theme-mode-dark">
+        <div class="dx-theme-mode-inverted">
+          <div class="dx-theme-mode-inverted"><div id="nested-in-dark"></div></div>
+        </div>
+      </div>
+    `);
+
+    await t.expect(await valueAt('#bare', '--dx-theme-mode'))
+      .eql(oppositeMode, 'with no named scope above it, inverted opposes the bundle');
+    await t.expect(await valueAt('#in-dark', '--dx-theme-mode')).eql('light');
+    await t.expect(await valueAt('#in-light', '--dx-theme-mode')).eql('dark');
+    // The depth-3 case pins that the NEAREST scope is what is read, not the bundle: inside a dark
+    // block the pair resolves dark -> light -> dark, not light -> dark.
+    await t.expect(await valueAt('#nested', '--dx-theme-mode'))
+      .eql(buildMode, 'inverted inside inverted flips back');
+    await t.expect(await valueAt('#nested-in-dark', '--dx-theme-mode'))
+      .eql('dark', 'the pair resolves against the dark scope around it');
+  });
+
+  test('the system tier follows the mode instead of freezing at the bundle', async (t) => {
+    await render(`<div class="dx-theme-mode-${oppositeMode}"><div id="probe"></div></div>`);
+
+    for (const name of SYSTEM_TIER) {
+      // These are declared on the document root; a custom property resolves where it is declared,
+      // so without the mode classes on that same rule the value would stay the bundle's.
+      await t.expect(await valueAt('#probe', name))
+        .notEql(await valueAt('html', name), `${name} must re-resolve inside a mode scope`);
+    }
+  });
+
+  test('themes.mode answers for the element, not for the loaded file', async (t) => {
+    await render(`
+      <div id="plain"></div>
+      <div class="dx-theme-mode-${oppositeMode}"><div id="scoped"></div></div>
+      <div class="dx-theme-mode-${oppositeMode}"><div class="dx-theme-mode-inverted"><div id="back"></div></div></div>
+    `);
+
+    // The element inherits the property from a scope above it, so only the cascade knows - which
+    // is why this case lives here and not next to themes.ts.
+    await t.expect(await reportedMode('#plain')).eql(buildMode, 'no scope above it - the loaded theme answers');
+    await t.expect(await reportedMode('#scoped')).eql(oppositeMode, 'the mode is inherited from the scope, not declared here');
+    await t.expect(await reportedMode('#back')).eql(buildMode, 'and inverted inside it flips back');
+
+    // The public answer and the property the theme publishes must not drift apart.
+    for (const id of ['#plain', '#scoped', '#back']) {
+      await t.expect(await reportedMode(id)).eql(await valueAt(id, '--dx-theme-mode'));
+    }
+  });
+
+  test('an overlay is painted in the mode of the element that owns it', async (t) => {
+    await render(`<div class="dx-theme-mode-${oppositeMode}"><div id="owner"></div></div>`);
+
+    await createWidget('dxPopup', {
+      visible: true, width: 100, height: 100, animation: null,
+    }, '#owner');
+
+    const wrapper = Selector('.dx-popup-wrapper');
+
+    await t.expect(wrapper.exists).ok();
+    await t.expect(await valueAt('.dx-popup-wrapper', '--dx-theme-mode')).eql(oppositeMode);
+    await t.expect(await valueAt('.dx-popup-wrapper', '--dxds-color-bg'))
+      .eql(await valueAt('#owner', '--dxds-color-bg'), 'the overlay resolves the same roles as its owner');
+  });
+
+  test('an open overlay follows its scope once the application says the mode changed', async (t) => {
+    /*
+     * The scope has to be LOCAL: a page-level switch reaches the container through the cascade on
+     * its own, so that version of this case passes with the subscription removed.
+     */
+    await render(`<div id="scope" class="dx-theme-mode-${oppositeMode}"><div id="owner"></div></div>`);
+
+    await createWidget('dxPopup', {
+      visible: true, width: 100, height: 100, animation: null,
+    }, '#owner');
+
+    const painted = async (): Promise<string> => valueAt('.dx-popup-wrapper', '--dxds-color-bg');
+    const asOpened = await painted();
+
+    await t.expect(asOpened).eql(await valueAt('#owner', '--dxds-color-bg'), 'opens in the mode of its scope');
+
+    await setScopeMode('#scope', buildMode, true);
+
+    await t.expect(await valueAt('#owner', '--dx-theme-mode')).eql(buildMode, 'the scope did switch');
+    await t.expect(await painted()).notEql(asOpened, 'the open overlay repainted');
+    await t.expect(await painted())
+      .eql(await valueAt('#owner', '--dxds-color-bg'), 'and matches its owner again');
+  });
+
+  test('an open overlay keeps its mode until the application says so', async (t) => {
+    await render(`<div id="scope" class="dx-theme-mode-${oppositeMode}"><div id="owner"></div></div>`);
+
+    await createWidget('dxPopup', {
+      visible: true, width: 100, height: 100, animation: null,
+    }, '#owner');
+
+    const asOpened = await valueAt('.dx-popup-wrapper', '--dxds-color-bg');
+
+    // A class moved by the application is invisible to us; this pins that we do not pretend
+    // otherwise - the overlay waits to be told.
+    await setScopeMode('#scope', buildMode, false);
+
+    await t.expect(await valueAt('.dx-popup-wrapper', '--dxds-color-bg'))
+      .eql(asOpened, 'still painted in the mode it was opened in');
+  });
+}
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..370f225d0aa1
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..f3efe408ece0
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..3d7be855a6f6
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..700e30b585a3
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..1d249b10b9e9
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..21340234901c
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..683a8a8d0e7e
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..10d30bb0f0a5
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..3a9fbf23df2b
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..e352d29e565d
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..8de1f58fd05e
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..f6068dcdc664
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..59a2806bd686
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..8ba3cc42c195
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..99ed92b00389
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..ba219442a12f
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..9935a2bc8636
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..ddfcc3e1750c
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..8f839823f2af
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..f7812ff7c051
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..3fc76e5b26e1
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..f1b847494ced
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..e2aaff65842c
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..59fe8ef83dd9
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..ac268a106886
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..1957a56ab17e
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..493b41a0b4b5
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..19c9209b7031
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..c25e2a444f8b
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..45798ab1c5ea
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..714d7218261d
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..b4d05fea0269
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..7b015e25e87a
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/aiAssistant/visual.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/aiAssistant/visual.ts
index 8a2f4d9dbe45..08b528fc171a 100644
--- a/e2e/testcafe-devextreme/tests/dataGrid/common/aiAssistant/visual.ts
+++ b/e2e/testcafe-devextreme/tests/dataGrid/common/aiAssistant/visual.ts
@@ -3,6 +3,7 @@ import DataGrid from 'devextreme-testcafe-models/dataGrid';
 import url from '../../../../helpers/getPageUrl';
 import { createWidget } from '../../../../helpers/createWidget';
 import { testScreenshot } from '../../../../helpers/themeUtils';
+import { insertStylesheetRulesToPage, removeStylesheetRulesFromPage } from '../../../../helpers/domUtils';
 
 fixture`Ai Assistant.Visual`
   .page(url(__dirname, '../../../container-ai-integration.html'));
@@ -64,8 +65,12 @@ test('AI Assistant popup - pending state', async (t) => {
 
   await t.expect(aiChat.getPendingMessages().exists).ok();
 
+  await insertStylesheetRulesToPage('.dx-progressbar-animating-container { animation: none !important; background-position-x: 0 !important; }');
+
   await testScreenshot(t, takeScreenshot, 'datagrid-ai-assistant-pending-state.png', { element: aiChat.content });
 
+  await removeStylesheetRulesFromPage();
+
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
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..ffffc5bfbf67
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..b594ffe964e0
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..36d2160e9568
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..0d24ffbb04e4
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..9722b3ab3562
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..569bc741476f
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..b1f61333b379
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..5bc515a9dc86
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..e19f74b8b44b
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..88c499d3cfe6
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..9b5f741102ab
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..6e21e858b74e
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..805c438c3c0e
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..805c438c3c0e
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..8cf1e713e9fd
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..e4e8e69f98f3
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..3f3c98673bd7
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..a7cee71ae94c
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..805c438c3c0e
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..7f31025ecbdb
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..c40104de7aae
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..31bb10fff644
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..6d9c2f222d3a
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..ac5183a9590b
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..80d984c2799b
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..2a7aa45ea3a6
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..5cb526ab905c
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..4c10fddeea9e
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..21a9f424cd90
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..38f05686c902
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..f6c8effde005
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..c2b4465d246e
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..afa773fd85f4
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..b36e16159957
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..96407d344a7d
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..fd72c9cf9ee3
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..a4fe9996b3fc
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..d31015abc00a
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..c85f75cefc4e
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..e7f1de6bd4da
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..027937e60fe5
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..f9e0e5528af2
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..a256038acc71
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..d58d87da7697
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..e2b5c77173f2
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..1d2552f5c68f
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..2fcd1fbecf74
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..5dd8a203d823
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..0c97c426ea6c
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..23f5df9857fe
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..b9a9b27a876b
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..b9a9b27a876b
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..42df11acd971
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..42df11acd971
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..4f6859cf3920
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..4f6859cf3920
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..63970ca2b359
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..63970ca2b359
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..741fd319bf14
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..aa8a16d81909
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..ad648e19bd9d
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..7760f7b801d1
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..e8a6977d2989
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..d4f0eb1e6344
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..a0126cab3964
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..b1b3192f5990
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..e3587471ee08
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..21b9ace0bfb4
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..2d556ef721bb
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..dc1e1479f84b
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..3f4325a911f7
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..879239b5d688
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..7ff9d415983f
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..2ea38b231404
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..b34404a23638
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..d1e2700dc891
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..764312011167
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..664661c770c0
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..a47ecd38aa41
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..e1c86514c76d
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..9eabce5df328
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..53c7fda97395
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..a996addffeb1
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..5f8a54295601
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..72a90b8e78e0
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..9957c7f46028
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..5f8a54295601
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..72a90b8e78e0
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..9957c7f46028
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..ffbaacb355d7
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..0d82b856c21b
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..99ede3db9951
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..503bd95487c6
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..e1d44f69ff9e
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..ac487ba3f9e4
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..595471c4c0fd
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..f1be5fc16471
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..ac54d07cbf9a
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..34e14b2a6088
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..e8ba0a0faf2d
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..c8bd140d1843
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..4b835514870f
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..1f1c446579f6
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..7e6a5da2718b
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..893902d04075
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..2905e5a1ecfd
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..c6c591f55524
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..a1361074d1b8
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..97305e096790
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..390902e7b4bb
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..4b029a4aecba
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..2ab09af383c6
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..c9343bac9af7
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..61d11dba0fa6
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..748a4510f126
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..88873b5a7b1c
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..dae9a14a46a8
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..3c11a13bdf4a
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..3c11a13bdf4a
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..3c11a13bdf4a
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..89a818ae8938
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..fbb112ebdff3
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..d57536457da7
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..81f6b66baf1e
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..a5239bf263a2
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..4341b4de81b5
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..c4bb3cd63e31
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..ee598b33d450
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..d3d2f345f0fa
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..e8a562c91d25
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..2702d4973b43
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..12c60b6ab62e
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..ab44a6360e0b
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..fe008e49345f
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..5b217c3dc803
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..4a0a5d0eccb1
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..985a85d15e01
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..14536b85cc3a
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..7c4f8689688d
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..844a891b4c69
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..7c4f8689688d
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..89308174b61e
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..8ca3b88a0653
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..2b35aaf3ac65
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..14f8f246b8d3
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..f4cd2ad6e3f5
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..0b7f14a4bb6c
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..5272f02a3e4f
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..035cbb978cd1
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..7c7d1ac2aa88
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..359d39e3cc7a
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..87310b242e00
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..4ef1384c5d31
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..5afc98d5ff64
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..0d1e005b8e2a
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..adb00e6ef9ab
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..b63493995368
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..db5b66040ed9
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..39a6d14aba43
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..93c6b27d3469
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..b5147ea6c503
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..a0daf40b2b86
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..ded3d0c9ef63
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..a169c0b46a70
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..55edfba3e67d
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..99cfbc708cbb
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..5c08ced83cc5
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..3fb8a01e24ea
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..4cf3f0b21347
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..2d41e72650dc
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..707c6d585dfe
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..787b78c9806e
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..7a8f3e49ec0a
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..4e5bf3978267
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..740418bdce4e
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..176f16014fb7
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..d26d6ba35a6d
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..66153a0ba928
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..021daad6e6a3
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..2c82e6a1b08b
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..db0d872b2ffc
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..24822fda7e40
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..7e859f2bb3fd
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..f28e378f3a98
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..6dc03b9955a5
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..e89ef7373f4e
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..964a12cf7f4f
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..9bfc5e3485d2
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..559be60bb989
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..8ede73b8450b
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..27a90aa13d7e
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..98cbfb664270
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..fca7f362de4f
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..e5cb7be8d5b6
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..31c0c13a73db
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..3e4d55c6579e
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..7bcecf5b74f2
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..14882af7e86f
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..9695461fcb69
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..bf98909d5a7d
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..fc9e54a8cb8c
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..2fbe5f8edbd9
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..de9c5f6db29e
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..979750fea6a9
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..9d033bf4234c
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..39bfcfd1c346
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..06227d3cda9a
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..8ff23322b2db
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..e5b91f3a6d23
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..d309bf20a747
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..19a07bc4899c
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..1904b357dccf
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..e3a55936b762
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..68347fdb784c
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..b06ac7379cfc
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..032fca9fccd7
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..8f669f55d3a1
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..6805a64882ac
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..4dc8a475145c
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..6ca6857da439
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..08ef97069a9e
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..3e0bfcdf54ee
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..658437ecdfa2
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..5272bf107d1f
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..38dd32029d06
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..96a07f2be0bb
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..2bc7f103cc27
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..639c0fbeb3f7
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..1e247abd881b
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..672b1c857692
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..1a491826f641
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..d176221705ea
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..d932dbc70717
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..304ea7fc7bbb
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..7bc55a572668
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..9b7cb668b34f
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..ef48461991f1
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..6a55d46b32a5
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..0433d0d93e20
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..9cda63162fab
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..3cf6b94cfb25
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..5181bb5ba330
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..d93f3a774074
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..3a4e3c720e36
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..579d9a1268fd
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..9aa033bdec7f
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..58f737f20fe4
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..b5117de9f16e
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..75eba245ee16
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..00aae7271b34
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..31f8e1b2e1d9
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..516125a24edf
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..2c911df89f3e
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..8756d3f5e4ee
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..f6da6b521bd9
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..b879fff53fa7
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..b7b44382b424
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..343c56cdf92c
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..79a70c6dcc63
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..9b057de7e005
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..caa3f2a1ed1c
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..ff7a8c66f549
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..30ebe493d02f
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..5bdeb297f8cb
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..25fc1ea1f80a
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..382fcd87f948
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..647f68ed384b
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..52d93aef59fb
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..593430dcb66e
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..23a30948853b
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..14f1c3cf487e
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..d814f201b53b
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..f91b1bd19478
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..ac3eca6a4895
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..662866d7cac8
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..c9218cf5b2c0
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..c66e51200eb2
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..20fc931badb1
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..331d1d151d50
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..bbcccbf83ac2
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..5ef3fb47b1af
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..f1b4a887f1a0
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..3a78ec59041a
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..5ee8c90a57f0
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..e30ee4418019
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..ee79a775ef4f
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..b7f1dff7f5a0
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..08ad1d598012
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..902333bc7d91
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..5cf18d2a77c0
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..4b4a09e2ae52
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..38e2a7a309e4
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..1a2ff73db2b5
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..01796ead615e
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..9fa745050fa4
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..45f64b292bba
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..d2b1c4d349ba
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..06f5205a8ad7
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..a8f9b8f32610
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..f8525cc6f164
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..fd35af87e4eb
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..8c815a8d347b
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..b350771ab073
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..b5856b028ae8
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..d4c5b5fd4014
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..46136fcbc769
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..7504a3a21ea5
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..a7634a07dad3
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..dcdb9d816fe0
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..fcd389e7a1be
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..eaa839149fb7
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..504c4b234e70
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..dbe05a0ab25d
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..f39284a346c9
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..ab4b9dd09e72
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..4f9cd1984ffa
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..83bd8488b55f
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..504c4b234e70
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..504c4b234e70
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..dbe05a0ab25d
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..dbe05a0ab25d
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..1bef5c4fdbe6
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..f55736ca45d3
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..27cc56303781
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..e29dd2dbdc7f
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..7045bc5db073
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..f61989d4c67a
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..a929989befc5
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..ff7f833a6ebc
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..0651072f4cb1
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..bec004f6ec22
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..8f4b06e3013c
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..4d2fc5d3a47c
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..7715b66d085d
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..60d144087db0
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..53cc09753d03
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..c7126c9aa8f0
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..1f529156fc41
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..89f7a0b77703
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..7a2f66bdbf2d
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..d281f1170f29
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..7325732887e4
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..48748040a062
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..ffe25557377b
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..f8f3361aebf8
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..378cb6481091
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..93a06185e641
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..50b5a34faae9
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..eb61ff7ddf91
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..60678349db51
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..934ef4069f8d
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..ac1c35fb639a
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..e8d2a97936d2
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..ad3662b65ee2
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..79d76c3d5b41
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..ad3662b65ee2
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..ad3662b65ee2
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..30093041ddc5
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..c959b5db1bfe
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..4f9bb18d2559
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..c500be1cae66
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..e7256fe2801b
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..b9a7ee8d217c
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..f95721315906
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..e6ffd9f8bf8b
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..b74f7a152581
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..fb6f701c6a8f
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..8b8f1429de82
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..e1f251c4cf91
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..da155ab9cf2a
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..626db07be19c
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..35deb015582e
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..86397d49ab4f
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..0c2ec2878a64
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..c2b071475ee2
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..f5ea8f4f6218
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..dac71823b8e5
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..e76a40518a5f
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..cc38f6bc1b54
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..705b87b9b48b
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..6be178a96662
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..5148de5fe9cd
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..36b86d507d0d
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..2d83bfb75f44
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..d85150bc6ffe
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..c2a3c7cd8e7a
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..b0fe3fd0464e
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..8a530a837991
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..fa17ee7f2454
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..b9db3cce3eec
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..5585a6123ee4
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..11da06e2b5a7
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..f69c49654b10
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..db55b4772504
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..0c7bc2f71572
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..1b4fe850b725
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..94287597411d
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..cd4363c310a6
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..a8edf5e0f0ad
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..c9d1442e3389
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..c9d1442e3389
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..f642c6bfd3d7
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..0120453f7393
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..6f7dd1e7e536
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..6f7dd1e7e536
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..f4a58a44018c
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..2bd3e51f267c
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..53eb198ae0aa
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..53eb198ae0aa
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..f5468213fa70
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..4ac39bc78248
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..728abd3530b9
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..4f2e331f00f7
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..d2bae5977480
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..d9612a74216d
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..2206aa2a4f09
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..d9612a74216d
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..bcfb05902298
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..7da83f448d58
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..4e6423ec66b0
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..1d1da184186d
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..c574409d79ef
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..9d986794845e
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..de0cabff4fac
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..71ab6c0fdff4
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..72addc3aad45
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..66de688ced24
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..3f3138cc03c1
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..d893f57d4477
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..ddd6e6ed87a6
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..82fe3c52444e
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..105588ff9bc1
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..b16ef502cb57
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..04623dfea7d0
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..826a56dd30d8
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..41d774cb81e3
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..9477b3e0b932
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..91df685b104b
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..368edd156f8f
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..1a1b6b50ebbf
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..ec3f5065c7ba
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..303d67692919
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/api/deleteRecurrence.ts b/e2e/testcafe-devextreme/tests/scheduler/common/api/deleteRecurrence.ts
index 5f2de565c7db..2f15fe78db54 100644
--- a/e2e/testcafe-devextreme/tests/scheduler/common/api/deleteRecurrence.ts
+++ b/e2e/testcafe-devextreme/tests/scheduler/common/api/deleteRecurrence.ts
@@ -1,6 +1,7 @@
 import Scheduler from 'devextreme-testcafe-models/scheduler';
 import url from '../../../../helpers/getPageUrl';
 import { createWidget } from '../../../../helpers/createWidget';
+import { getThemeName } from '../../../../helpers/themeUtils';
 
 fixture.disablePageReloads`Scheduler API - deleteRecurrence`
   .page(url(__dirname, '../../../container.html'));
@@ -63,19 +64,23 @@ test('should exclude from recurrence if mode is "occurrence"', async (t) => {
     .expect(scheduler.getAppointmentCount())
     .eql(2);
 
+  // fluent-next narrowed the left column by 1px (65 -> 64) and raised the header by 2px
+  // (46 -> 48); the other themes were not touched
+  const isFluentNext = getThemeName() === 'fluent-next';
+
   const rect0 = await appointment0.element.boundingClientRect;
   await t
     .expect(rect0.left)
-    .within(318, 319)
+    .within(isFluentNext ? 317 : 318, isFluentNext ? 318 : 319)
     .expect(rect0.top)
-    .within(140, 141);
+    .within(isFluentNext ? 142 : 140, isFluentNext ? 143 : 141);
 
   const rect1 = await appointment1.element.boundingClientRect;
   await t
     .expect(rect1.left)
     .within(562, 563)
     .expect(rect1.top)
-    .within(140, 141);
+    .within(isFluentNext ? 142 : 140, isFluentNext ? 143 : 141);
 }).before(async () => createWidget(
   'dxScheduler',
   {
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..7e11ac807319
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..2a5098a6eac1
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..f6bb9cf4ab85
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..9c14677fd403
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..60ced385ab60
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..cd0203f6f2ea
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..504849a85ab5
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..81ea4e62a8c5
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..ae341a81d159
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..2ee396e1b10c
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..94118bad2678
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..6c8d3e27c600
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..5003b76704a8
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..1514b8a9ad58
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..419ceb3c6c1e
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..5981b7e59b20
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..5186aad333a7
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..11f64472faff
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..8655b3b3b2bb
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..ad4ece5564c4
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..7f87dbfb95c9
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..82bc3109175a
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..fb0a2b51ae46
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..f7cf14e06ccd
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..3e95fdb313bf
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/appointmentOverlapping/basic.ts b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentOverlapping/basic.ts
index 16cf33d07b93..d6cf5c3a425e 100644
--- a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentOverlapping/basic.ts
+++ b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentOverlapping/basic.ts
@@ -2,6 +2,7 @@ import Scheduler from 'devextreme-testcafe-models/scheduler';
 import url from '../../../../helpers/getPageUrl';
 import { createWidget } from '../../../../helpers/createWidget';
 import { Themes } from '../../../../helpers/themes';
+import { getThemeName } from '../../../../helpers/themeUtils';
 
 fixture.disablePageReloads`Appointment overlapping in Scheduler`
   .page(url(__dirname, '../../../container.html'));
@@ -93,7 +94,9 @@ test('Simple appointment should not overlap allDay appointment when specific wid
 
   await t
     .expect(scheduler.collectors.count).eql(1)
-    .expect(await element.getBoundingClientRectProperty('top')).eql(138.828125);
+    // fluent-next raised the header by 2px (46 -> 48); the other themes were not touched
+    .expect(await element.getBoundingClientRectProperty('top'))
+    .eql(getThemeName() === 'fluent-next' ? 140.828125 : 138.828125);
 }).before(async () => createWidget('dxScheduler', {
   ...SCHEDULER_DEFAULT_OPTIONS,
   dataSource: ALL_DAY_DATA,
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..a351c533ceda
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..4431dea6f1b0
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..8adca189001a
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..6bfb841709dd
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..f907b55a9cfd
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..f0fde6901ed0
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..f0fde6901ed0
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..f0fde6901ed0
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..f0fde6901ed0
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..8edfdee1d870
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..b6497560abb5
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..e64c3d4e9317
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..fe47bd21e913
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..5abf249d4d51
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..5abf249d4d51
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..5abf249d4d51
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..5abf249d4d51
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..209b892e49bf
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..d753ba7fe3cf
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..170c5003582d
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..05c424e23e05
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..0452d266a4ab
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..d9f09fad9564
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..53d9b20b235e
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..53d9b20b235e
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..e21a4bcc40a0
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..d3ce3a58434b
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..e608a38696a0
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..c584d7c07c48
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..00c1d1234584
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..10a56c66fe9d
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..b0cdb9762053
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..d4bd0111a9ad
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..0760c773919c
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..b0cdb9762053
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..3808df58d237
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..d23fe87e474d
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..330c8aec99d9
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..938761d8cb85
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..a29b1aa9bb93
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..8957d02cebdb
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..0dde3f80466b
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..0be0fd327693
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..0be0fd327693
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..65e22ea135b3
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..5bca20223604
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..3359954d4bcf
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..51d6e66826bc
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..812c0978e7ee
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..60d86c1c2e58
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..86353e52a075
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..1adcb1965f09
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..26c9b6dac560
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..1646e172d4ca
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..5df5a10c0c72
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..eab9a82660be
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/basic.ts b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/basic.ts
index 2eb3f38bc28a..be3fc57a5eb1 100644
--- a/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/basic.ts
+++ b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/basic.ts
@@ -3,7 +3,7 @@ import Scheduler from 'devextreme-testcafe-models/scheduler';
 import { dataSource } from './init/widget.data';
 import createScheduler from './init/widget.setup';
 import url from '../../../../helpers/getPageUrl';
-import { testScreenshot } from '../../../../helpers/themeUtils';
+import { testScreenshot, getThemeName } from '../../../../helpers/themeUtils';
 
 fixture.disablePageReloads`Drag-and-drop appointments in the Scheduler basic views`
   .page(url(__dirname, '../../../container.html'));
@@ -29,7 +29,10 @@ test('Drag-n-drop in the "month" view', async (t) => {
 
   await t
     .dragToElement(draggableAppointment.element, scheduler.getDateTableCell(0, 4))
-    .expect(draggableAppointment.size.height).eql('23.8281px')
+    // fluent-next raised the header by 2px, so the month rows share 2px less and the
+    // appointment's share of a row shrinks: measured 23.75px against 23.8281px elsewhere
+    .expect(draggableAppointment.size.height)
+    .eql(getThemeName() === 'fluent-next' ? '23.75px' : '23.8281px')
     .expect(draggableAppointment.date.time)
     .eql('9:00 AM - 9:30 AM');
 }).before(async () => createScheduler({
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..d35547898dae
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..3f0a7e32fca7
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..fe1019076361
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..afa4fe1c140f
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..2f92e798286a
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..d33158234384
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..aa1d8b582ff0
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..d77d3f7fe3bc
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..1c040604ef03
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..5ca98965560e
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..0a98b10d1132
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..9ac5529f8fb1
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..9cde196a5856
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..67b796423595
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..9cde196a5856
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..f18126e76ba6
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..f45f9155c760
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..c2ada021d7db
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..22ea2f5192cb
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..e49c4270199b
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..3bfa4dc9724b
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..d78cc9f07588
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..3bfa4dc9724b
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..38b28b998949
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..39f876db5c5c
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..31ce6d01930e
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..ea4b3f903086
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..183ce1cf6f5d
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..4f417228493d
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..21273cb86e6b
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..c2e56542f65b
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..565eb5a696e9
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..6fb12a1f6ec0
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..6c13f0617e09
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..223e85d26fa4
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..59d75bbaa54f
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..2b0607db5d0b
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..21273cb86e6b
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..21273cb86e6b
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..00f6ab30202a
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..6f0128b11d84
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..0c10699561b9
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..e35aacaf3d02
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..4473848b6644
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..7fa932162902
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..43321d1958ae
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..8a6c6eef735b
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..47592dc91843
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..732a36703b78
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..b8a09fd67464
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..90182ab29ac2
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..0f8fce88fe9d
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..42658bc9d1f9
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..b45964c5fdd3
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..ec2a7f62cb2e
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..aae888880858
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..ea0bf2a38ff5
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..d4dee476f8a9
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..00466f714520
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..e4546891fe91
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..77f14683ba01
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..e4546891fe91
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..77f14683ba01
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..126f51dbc764
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..58758907f653
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..126f51dbc764
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..58758907f653
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..5c8727a98ef1
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..624e6ca29f3a
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..5c8727a98ef1
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..624e6ca29f3a
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..bfab37ab55e8
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..1ae781c3d968
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..bfab37ab55e8
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..1ae781c3d968
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/hierarchical-grouping(view=agenda-orientation=vertical) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=agenda-orientation=vertical) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8df0be48d7f1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=agenda-orientation=vertical) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=day-orientation=horizontal) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=day-orientation=horizontal) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9fb14b2a8d52
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=day-orientation=horizontal) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=day-orientation=horizontal-rtl) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=day-orientation=horizontal-rtl) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2b0bdd0bc3bd
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=day-orientation=horizontal-rtl) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=day-orientation=vertical) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=day-orientation=vertical) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..86891baa703b
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=day-orientation=vertical) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=day-orientation=vertical-rtl) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=day-orientation=vertical-rtl) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d1d1ec6553d4
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=day-orientation=vertical-rtl) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=month-orientation=horizontal) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=month-orientation=horizontal) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5da1aeb185f1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=month-orientation=horizontal) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=month-orientation=vertical) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=month-orientation=vertical) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b430aa727ea0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=month-orientation=vertical) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=timelineDay-orientation=horizontal) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=timelineDay-orientation=horizontal) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c179d5ae2764
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=timelineDay-orientation=horizontal) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=timelineDay-orientation=vertical) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=timelineDay-orientation=vertical) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b411596c902c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=timelineDay-orientation=vertical) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=timelineMonth-orientation=vertical) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=timelineMonth-orientation=vertical) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1f0c6be5b942
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=timelineMonth-orientation=vertical) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=timelineWeek-orientation=vertical) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=timelineWeek-orientation=vertical) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8e9585767711
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=timelineWeek-orientation=vertical) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=timelineWeek-orientation=vertical-rtl) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=timelineWeek-orientation=vertical-rtl) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e7f79a6ab864
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=timelineWeek-orientation=vertical-rtl) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=week-orientation=horizontal) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=week-orientation=horizontal) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..54e4cc4b893d
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=week-orientation=horizontal) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=week-orientation=vertical) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=week-orientation=vertical) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5e89f307b355
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=week-orientation=vertical) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=workWeek-orientation=horizontal) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=workWeek-orientation=horizontal) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2614871939cb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=workWeek-orientation=horizontal) (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=workWeek-orientation=vertical) (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=workWeek-orientation=vertical) (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0069aad04239
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/grouping/etalons/hierarchical-grouping(view=workWeek-orientation=vertical) (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..27c59c7b6205
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..576d999207bb
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..ca8747495a5d
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..e9104bca8cfc
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..655bb22ec3d2
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..964861868474
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..a2054c02ffe8
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..052cd55045ab
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..b37e5ab3f394
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..bc8f70388b42
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..51ac9867a775
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..a958031bcf9e
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..67a8de6eb68b
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..28e513f46ace
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..39e5f76fe794
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..cda60c48975b
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..05258a36081c
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..a9dbb3d53b1f
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..f2f6ddaa340a
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..20356e31395f
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..b718673f93a2
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..e06f9a8f0d62
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..a0fc250c977e
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..0a462deb8419
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..a0fc250c977e
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..3c56f0a0db61
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..373a6d96a873
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..377cb05ffa6a
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..dc76ea850f94
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..dc76ea850f94
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..4aef28e82805
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..f090118c140a
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..79cc5cc7b0d5
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..331e3465f7b5
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..f23b6afafe20
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..209f93661be7
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..4aef28e82805
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..2d994deb4e07
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..4178f506c565
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..8b4fbd1385e4
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..241e5524fa9f
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..3735059a749d
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..79502bfe11a5
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..8484f2a97fe4
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..74cf6d18917b
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..7a845b0e969f
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..fa75a542edc3
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..f3ca6e8cd7a0
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..fa26b1b05308
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..a3bd0f37ff13
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..c226732e6511
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..852b37b84583
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..46caaba44c7b
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..20772cbacd78
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..095ce491d03a
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..6a589eb18e87
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..60f18445291a
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..7c55b66fe212
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..b5b81f0ee498
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..cf8a5bddc673
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..095ce491d03a
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..6a589eb18e87
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..60f18445291a
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..7c55b66fe212
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..b5b81f0ee498
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..cf8a5bddc673
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..e1560bb6aadb
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..bc388b859910
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..ffff390d65cf
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..06061f5ec8d2
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..640e07130896
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..766ea887a212
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..e1560bb6aadb
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..bc388b859910
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..ffff390d65cf
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..06061f5ec8d2
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..640e07130896
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..766ea887a212
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..114d34b37a26
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..f86e7318d8e8
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..1430816f3223
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..965f22b279b1
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..9be73340186b
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..5e4a47e15a3b
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..114d34b37a26
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..f86e7318d8e8
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..1430816f3223
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..965f22b279b1
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..9be73340186b
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..5e4a47e15a3b
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..7ff501288296
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..e99d8aa62532
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..c122ec23746f
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..7e4f3f88e1c1
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..35bdbfb06240
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..0e5e6d399af8
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..12362cdd97c4
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..9644449ca08c
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..604aa408cf51
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..c5790c0e5946
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..f30cad5daab8
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..15eeb7b84b84
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..5a36abe2c805
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..404e5bd6c919
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..611721074aab
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..5b8fbab6d080
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..75a08b0971c4
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..220039be605d
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..2aa5ba87cbdc
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..7989223bf615
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..6249e7b35f0e
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..90e14fd6479c
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..b76f8b439e82
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..4e6339244284
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..f61f14d4c911
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..25f73f0c4f85
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..c8b90d928639
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..4e6339244284
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..25723378d5d7
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..6cc366ba7dd6
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..135f9e6f9aea
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..9bb32cad451a
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..63d034214075
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..8f73a29185e8
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..9bb32cad451a
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..76a2cc3906fe
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..445a9f16cf6f
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..f37a62479bfe
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..445a9f16cf6f
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..013c32a4ae83
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..ef2675f2474c
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..0a014df0c624
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..ef2675f2474c
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..f49ac8369926
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..7cfa7cd1a045
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..4c9b047218cf
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..041f3b8ab7d0
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..cbc6c54f468b
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..1491f407a5ad
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..57c72e4ffb7f
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..57c72e4ffb7f
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..a862598f0669
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..60e3e17112f0
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..cdbe09b43912
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..71652e84dde8
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..4890caa89032
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..88e3a0f8dc28
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..039bf29cfde5
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..e19686243679
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..d5205f640e2f
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..d34746ffb32b
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..d34746ffb32b
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..275afe7088d4
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..41a29947fe55
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..275afe7088d4
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..41a29947fe55
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..390f287b9028
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..8b3731455362
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..21aeee100af1
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..ebae4479e7f6
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..0fe841423234
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..4b451d3e0a7c
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..b718101c1b45
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..47b6540e803a
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..e72d1fc1723f
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..f16f57501799
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..8c584f2d4900
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..48b8d0ef9b56
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..7479e0584f2e
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..96717375af2e
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..a99ff212ee07
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..e5fd5036bc7d
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..5688c15c3c57
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..00f3854a28cf
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..0ed13b27152b
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..6114fc020ed6
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..3d2f9221c44a
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..edad0864a5a6
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..2bcc7c7c7251
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..79a1674122ed
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..ab1c4019229e
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..2684b8f812fd
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..8aa8bc03052f
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..5d15d5669f09
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..5d15d5669f09
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..5b2b582c384f
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..5b2b582c384f
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..ce86ac4a9f3f
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..3f8f02915a80
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..9ce8af54b68e
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..b4f8b6d0b7c0
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..9541fdc9bfe0
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..9541fdc9bfe0
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..85e5f4c38a29
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..85e5f4c38a29
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..e30b17042332
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..2922c469b411
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..2c6ce1b101b8
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..2c6ce1b101b8
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..10fc91570914
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..10fc91570914
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..9b87c0e91cfc
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..5c0f2b295a5b
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..c5645b1c3ea6
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..630937424145
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..5af2a2b5b003
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..73d23d25ec81
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..cb9b1aab444e
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..31580be1bd3c
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..bc8e932cbeea
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..16ba38e8b5c4
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..9f88d56297c6
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..504e71560892
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..7f0aeda1f6d3
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..c80d6e1430df
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..bd5d551a113c
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..1dd41d121991
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..b2ff1b27576b
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..cbac446d1f52
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..bdba4a78a84d
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..bdba4a78a84d
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..c1095f839ce7
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..24c783d61303
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..8e857f23e2f4
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..0f6b5d97a062
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..008876861812
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..873af50a2b44
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..f21638a350c3
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..8da840698e46
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..4d252b1fdf68
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..0e139d9568db
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..a873eb310bcf
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..83feef02fc86
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..fafb70c7c3ad
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..6d379476c7af
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..0c6ca45a3b43
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..7afbd0976bf3
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..6a48ec979faf
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..57b374f272f6
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..301d32b099ac
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..46c724fc8ffe
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..25b31d982c2a
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..f71d1d4d8694
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..3b5e87aad86b
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..cfd995cd0db7
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..c25f92f69d83
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..0aca168a948f
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..64811ef66bb9
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..cd102b1eb330
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..5832184ae8c3
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..dba99813ce24
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..e1541bfac55e
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..72445b55289e
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..1dc9c24c191d
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..ee68eb16d838
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..b1501f10ca22
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..90af916dbbc2
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..17e87e74523c
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..63cabebdd5be
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..3f1f0d8cfa82
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..d30a725ec82f
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..d489b99d80a6
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..ce2c41d71cf0
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..135de8fce716
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..7cc737fefce1
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..882d2b33d892
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..3089d0499c9a
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..da0f17132603
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..f9d37a1b6004
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..121170dfd1ce
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..f4691cdf20be
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..99051788e550
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..75e91532c21f
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..2ecafc0423e0
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..f601272ee0a3
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..c813353cf9b8
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..72feeb16a109
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..97f97e912028
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..e8a204bca4d8
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..bf3c185b6c83
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..2b44915a4477
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..fe142122335f
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..fac992a00f1e
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..15a0e4b8c11a
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..d473cdcda2cf
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..38bfb172d156
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..96915da0ca36
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..7f7af2ff0897
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..efc922dacb7c
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..6d15672cf476
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..79c838b7cf6a
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..1df44d516ac0
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..1b595d373f4e
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..d866cec9fbad
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..ed207590b71f
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..eec0530e643a
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..9d5f71f599c4
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..1f89bdf64c0e
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..b5a166fe6c8a
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..e30a1bb1f208
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..a405cb11706d
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..a7dcc086fa1b
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..2fd31ab6f6f5
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..17f307c85326
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..e86aa0478cdf
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..135ca769ea19
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..37096895b116
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..eaa2ca643188
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..f4c41e6c5cb9
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..811663d4cf2a
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..dd3b921caed1
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..a03b43e13be6
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..3f61b659b9e1
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..b4cdb15a2f20
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..3d2be7622763
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..f452be75292a
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..9fe29e424373
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..2c0e707b0876
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..519641c4c23d
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..327182c74851
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..d73189d11524
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..d3835cfc642e
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..a52a23020842
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..0aa85bdb2641
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..6877ba20d921
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..bf67a69f0c43
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..a91ddd229bd8
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..b35dfcc8dcd8
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..b67723d801d2
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..603dd3383fca
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..ca6bd30cb391
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..8f2bbfd9b270
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..2c113b0323bf
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..98503bc04952
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..9082b958242f
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..c4b3fb90be61
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..54edf7354f09
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..d011e1fa8120
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..8b82cf88ec13
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..6f4aee12710c
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..d011e1fa8120
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..8b82cf88ec13
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..b09c7a82b430
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..b744a66d57d6
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..066ca1da59aa
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..066ca1da59aa
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..b744a66d57d6
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..066ca1da59aa
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..066ca1da59aa
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..11009b0dbf2d
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..4d3c0d816880
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..50879a80fda5
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..11009b0dbf2d
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..4d3c0d816880
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..50879a80fda5
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..166ebcacb2b9
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..9fd08a5598b7
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..8ac4492e6bba
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..166ebcacb2b9
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..9fd08a5598b7
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..8ac4492e6bba
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..dd1c81ac59c8
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..46c69f68f073
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..e7e9b72f4e67
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..dd1c81ac59c8
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..bcd1f87bb3a6
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..e4aa0c8333da
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..3e3ebcb276c3
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..244fb8259b9c
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..0473d58821e4
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..567c33b974c6
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..54939dafc5d5
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..25f983119111
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..d44e105f67ae
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..f3c7761a2b01
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..425d8634fbce
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..6f1f4482b964
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..e8bdbfb21a5c
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..6ccc8616c4e2
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..32204fbf1339
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..568a9047dca2
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..c3e51ece41d0
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..e093acae19dd
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..b0001b19b84c
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..46138c68047d
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..83a24efe5f6a
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..be0e9700ab17
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..417685037d8d
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..4f0127c558eb
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..8f65bb06cf34
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..365f13bece74
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..4859ad6fdc45
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..915cc4c29acc
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..6d16d949628b
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..275573bd3d90
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..91b8f3fd9cd2
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..7ba7530c5b8c
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..033e0674e09d
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..c361151ffa89
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..57de55ee781e
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..b8f9eff9c670
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..ee3ceaa17716
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..1038692bccde
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..43d5c5b57092
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..3edd41eb7a98
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..32ef7d34c727
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..358e44b635d2
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/rerenderOnResize.ts b/e2e/testcafe-devextreme/tests/scheduler/common/rerenderOnResize.ts
index 3dc3756cfc03..0920692d2096 100644
--- a/e2e/testcafe-devextreme/tests/scheduler/common/rerenderOnResize.ts
+++ b/e2e/testcafe-devextreme/tests/scheduler/common/rerenderOnResize.ts
@@ -2,6 +2,7 @@ import Scheduler from 'devextreme-testcafe-models/scheduler';
 import { getStyleAttribute, setStyleAttribute } from '../../../helpers/domUtils';
 import { createWidget } from '../../../helpers/createWidget';
 import url from '../../../helpers/getPageUrl';
+import { getThemeName } from '../../../helpers/themeUtils';
 
 fixture.disablePageReloads`Re-render on resize`
   .page(url(__dirname, '../../container.html'));
@@ -60,5 +61,9 @@ test.meta({ browserSize: [300, 300] })('Appointment should not re-rendered on wi
 
   await setStyleAttribute(element, 'background-color: red;');
 
-  await t.expect(await getStyleAttribute(element)).eql('transform: translate(0px, 30px); width: 200px; height: 61.7539px; background-color: red;');
+  // fluent-next raised the header by 2px, so with a fixed widget height the work space lost
+  // the same 2px and the appointment's share of it shrank by half a pixel
+  const height = getThemeName() === 'fluent-next' ? '61.2539px' : '61.7539px';
+
+  await t.expect(await getStyleAttribute(element)).eql(`transform: translate(0px, 30px); width: 200px; height: ${height}; background-color: red;`);
 }).before(async () => createScheduler('#container', { width: 600, height: 400 }));
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..5130b6c7ab7d
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..f69d7d380751
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..920ef4f0a784
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..7c8f2e8bbf61
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..a9e0e57709d5
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..8aee42eb71dc
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..85347fedfd98
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..72baa55753cf
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..578ae4f5ae15
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..3b4d0329a7c6
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..4d43894ed1d5
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..564d644bf185
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..def6edebb823
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..12aa8365d355
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..fb1e004b8046
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..12aa8365d355
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..b1845cd1dd4d
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..12aa8365d355
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..e80690fd406d
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..f6a7d75e7a3f
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..5d6d9729aba4
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..b01ec5b335ed
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..df7f6b1ec290
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..5d6d9729aba4
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..91361df0bf14
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..ad823ce6b8be
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..f372eadef26f
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..e450013f8939
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..28319d93111c
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..895e7c5e92e8
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..b01ec5b335ed
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..a26349fa0f67
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..55c53b50e299
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..ce92b2849bf7
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..12aa8365d355
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..8d51b364b25d
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..f3d978f638df
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..6a55f7c15185
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..5d6d9729aba4
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..014774307916
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..a8a52402d5a4
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..fcbb9dbd3164
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..cb2ec2f9190b
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..8cbce8c0c9c2
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..5059872c1fa6
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..a183a5cc60cc
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..12aa8365d355
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..ec6341e29b3d
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..12aa8365d355
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..b8dc43190c79
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..12aa8365d355
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..e80690fd406d
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..f6a7d75e7a3f
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..5d6d9729aba4
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..e80690fd406d
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..f6a7d75e7a3f
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..5d6d9729aba4
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..901ade6dbdea
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..f9d0101b353e
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..5d6d9729aba4
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..901ade6dbdea
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..f9d0101b353e
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..5d6d9729aba4
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..ae5311e9aebb
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..649ec0c81290
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..901ade6dbdea
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..f9d0101b353e
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..5d6d9729aba4
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..0e765084e050
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..6ddeddcd9899
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..2f16f35cea87
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..ab1931a06165
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..1261f47f1b9d
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..0ac48aa68ed1
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..3021e9cbbf18
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..d61469250c53
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..d6cc36d76189
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..963e1facb016
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..4d0de46bdbd9
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..c9d12384e44e
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..740296107912
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..4592f11f454f
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..3a27baad0ef6
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..acf7d026bc92
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..11c2fa862b24
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..4c8841ec16ad
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..31cb2c4698cc
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..312eaa3e2944
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..d10c4480308f
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..e2348054f818
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..094905edbffc
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..32aac05dabce
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..9dd2bdab62e5
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..e2147bd5d5b1
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..196f03546ef4
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..32aac05dabce
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..e4a8f8526ced
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..7e5617aa57ed
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..3fea83df76d8
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..8254c997ad40
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..20f5bf9e8c84
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..9ede847dd0d0
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..01f1089d487b
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..e7242ac00bb0
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..561a96e2b238
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..3656bab9174e
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..ce0086879db1
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..887ada878a56
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..39832693add6
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..0a1dd2e5d066
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..76371b7704dc
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..f74fefa31695
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..2a9da79421fa
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..51093ab65455
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..8d97449d2d1f
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..9065db3d60bd
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..d4aec68fa29a
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..7a90b4cf1116
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..cbd3b2425e1e
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..ac17478ec61e
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..2f7dc2a96c85
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..ea3c4ac7aea3
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..fc6917e21623
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..7d2fe14318d1
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..6631d1745e35
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..d16998efa0bb
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..808122858804
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..ac5f0c6289c2
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..70e57deb5f00
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..9f751d80be3b
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..5a0e3ac365c2
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..ea13a8b5a8c8
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..446856e834c1
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..cc3f556bc5fa
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..f5c9aa3b61a5
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..6bdc6ca1e754
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..603b93c24899
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..a06cef9c7fa7
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..6e412ade3abc
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..fe6fb44ea3d1
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..f5c9aa3b61a5
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..6bdc6ca1e754
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..603b93c24899
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..a515c3034b01
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..1bc13570f47d
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..66d166dde67b
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..58802871f4ff
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..9da1176347bf
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..5502ae379ed0
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..713240fb99f9
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..0c97e49ab6ae
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..242dab59ce34
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..68b2d5ab9c36
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..40e2bf28fb68
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..f113c090c187
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..e9ec035e0c76
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..ffb8b1d0a9ae
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..751df1dba6b9
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..6c173920a3f9
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..4ad5a407af46
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..56e7b789f5c7
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..37e2e73ca109
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..39a36ecf5711
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..c9cba6f78498
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..168b6568b89a
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..952b0e63fddf
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..3fdabad9ff76
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..0e894ad75364
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..b2631582581d
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..a2a5318e6e1d
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..3bf47f9ce79d
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..457666d5ef49
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..ef01b00c1bfa
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..8da265770188
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..284ec38a95e0
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..baf307f37714
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..89e55769c187
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..807ab0b05d63
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..9ae44a4d261e
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..b89c10bf3d94
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..cf339b032821
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..da3b2632e07b
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..2b4b18b1b58b
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..2b4b18b1b58b
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..2b4b18b1b58b
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..4e90e9c8d9bc
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..c8775c07af21
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..8b19250781fc
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..1bdce00f361a
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..283fb074a2e8
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..79640bf35e7d
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..d55ad7cba1df
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..e21ee877e090
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..8bd2cdcc3dc1
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..64ee0a77af12
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..c245b4d9bc20
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..3d779d533ca8
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..8a33f6bca2e9
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..6979b34d9e8c
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..3e027010b1ec
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..e2d7d2de6d3e
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..40693f513101
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..99a5c7522b1c
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..64ee0a77af12
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..c245b4d9bc20
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..3d779d533ca8
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..8a33f6bca2e9
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..6979b34d9e8c
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..3e027010b1ec
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..de5fceebb1ff
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..c21f447ce3eb
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..8476431371ab
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..4af072cf7738
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..bfb5096487fd
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..b5024871b550
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..52cc9913f94b
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..52cc9913f94b
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..52cc9913f94b
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..99cf6d134b91
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..8a267588cbcf
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..1cd58cbd653e
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..6cc5ed9e56b2
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..6cc5ed9e56b2
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..6cc5ed9e56b2
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..802a900da9c3
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..73727fb09b14
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..f101a976fa19
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..ea163a228282
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..c550bed79ef7
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..8ee49a978e5f
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..b60691f4c8f7
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..27dd88632071
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..b60691f4c8f7
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..27dd88632071
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..7363285377d8
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..f632e631f313
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..7363285377d8
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..f632e631f313
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..18e4affab413
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..b171976bb4d9
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..18e4affab413
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..b171976bb4d9
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..c8e721184bd7
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..482bc92dcfe4
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..c8e721184bd7
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..482bc92dcfe4
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..c8e721184bd7
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..482bc92dcfe4
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..c8e721184bd7
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..482bc92dcfe4
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..c8e721184bd7
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..482bc92dcfe4
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..c8e721184bd7
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..482bc92dcfe4
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..0d8cdae0fc70
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..3a81123a867a
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..b24a831dcee2
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..6b0ce08dad55
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..76f02a7793b7
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..cbe23aa4bef0
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..2372e11bf4e8
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..d4e9fd03289f
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..b7e991f3ca7a
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..649a7c324757
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..97e3e033d743
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..e4eaa0490efa
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..19ee2413ce9e
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..908772924e59
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..19ee2413ce9e
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..908772924e59
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..19ee2413ce9e
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..908772924e59
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..19ee2413ce9e
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..908772924e59
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..19ee2413ce9e
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..908772924e59
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..19ee2413ce9e
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..908772924e59
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..880605e6bf5f
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..880605e6bf5f
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..222244861261
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..222244861261
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..4b2599bfd7a9
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..4b2599bfd7a9
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..3169c6d76e9b
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..5c48d10d0775
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..142110df37ac
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..1899d0fe95e9
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..41bf3dad8cce
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..2401e08bc1eb
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..66670a0c4933
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..e6a6209d239b
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..3169c6d76e9b
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..5c48d10d0775
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..142110df37ac
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..1899d0fe95e9
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..41bf3dad8cce
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..2401e08bc1eb
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..66670a0c4933
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..e6a6209d239b
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..6e0ccd0663d9
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..c441c9a433f2
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..d346df51d614
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..16cb3c739a56
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..f54988ac6b34
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..c8042014aa52
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..0ad7818623b9
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..6086556f3e6c
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..6e0ccd0663d9
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..c441c9a433f2
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..d346df51d614
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..16cb3c739a56
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..f54988ac6b34
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..c8042014aa52
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..0ad7818623b9
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..6086556f3e6c
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..fdbcf4bb126c
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..66573025dc20
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..bbc74f2a128f
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..5133bb6c05d9
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..2caf12659583
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..6b27500ff0c5
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..236b34a2c2f2
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..b2c74b66af11
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..fdbcf4bb126c
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..66573025dc20
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..bbc74f2a128f
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..5133bb6c05d9
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..2caf12659583
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..6b27500ff0c5
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..236b34a2c2f2
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..b2c74b66af11
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..bf83424899b9
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..f685a93e6bd7
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..b5afbc94e3b5
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..7a96487cc315
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..89330dc46050
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..97340f417cdd
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..e24800be25ec
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..a8b71e46efe2
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..bf83424899b9
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..7a96487cc315
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..89330dc46050
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..97340f417cdd
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..a122dcfb6c41
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..a122dcfb6c41
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..6542fa9bf8ee
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..64ba60925392
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..9ddcd8a5604f
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..ba986f335171
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..02fd0f6d00c5
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..c2d0699768b3
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..fab39e86fe8c
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..12726af8df18
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..4277aaa3b966
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..ba986f335171
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..02fd0f6d00c5
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..c2d0699768b3
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..056fe34c3e40
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..22f5f87aafd3
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..faefda932a49
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..4d79e25e83da
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..f51d666460ac
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..67ff613fc397
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..8a2325243466
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..9c91d88cb5ea
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..9f0a349cd9c3
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..6a22d9537898
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..d60203eb94f0
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..2232d47038ef
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..02423ed456d1
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..efb0835fe707
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..76d8c0052317
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..8596225dd64a
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..a2f3bfa7e280
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..ba92de9af8e0
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..a2f3bfa7e280
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..ba92de9af8e0
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..76d8c0052317
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..8596225dd64a
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..9ed2521f6a9e
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..61e8e3d47219
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..141e09e95d1f
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..7bbd29ae34d1
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..141e09e95d1f
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..7bbd29ae34d1
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..9ed2521f6a9e
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..61e8e3d47219
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..3b34f7ed6690
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..31d379b2baf0
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..3b45a57de881
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..079d4aceb28e
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..126f46ed6bb1
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..2b3a7a9e606f
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..e498628ef6f9
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..4afab4d49cd3
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..25747d4182af
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..2301c64a5e3d
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..3150a6165ec6
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..3150a6165ec6
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..abbbc10f8b8d
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..9519f774ad69
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..18b3e0013ef7
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..32cea36bb335
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..2a54d6526a43
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..2a54d6526a43
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..b452216e80dd
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..05d218f78584
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..4e0e41a9a745
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..6960d16f8d37
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..0e52579848be
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..2fa64e0267ff
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..68412f1b3efe
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..a31fbc52a797
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..510e2f3fff32
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..4c4530388692
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..602186ec47e7
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..516d568749c4
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..702546a86d93
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..702546a86d93
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..208a10360fc8
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..208a10360fc8
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..34edf9e6eaff
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..1732ab882f20
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..c2aa4190e3da
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..c2aa4190e3da
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..557f82ab05a6
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..557f82ab05a6
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..39132c846bd5
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..008473bd5a24
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..715f3e1b0a2f
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..2e240880514d
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..e1cb9e1b9d6c
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..34e6f230c9bd
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..dae04c478773
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..afad135128da
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..dad1ca3b84bd
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..45e36616e636
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..52f77e9b90e7
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..9ea51aa6babd
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..926665b12291
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..f8a4f1889a17
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..86265f378b44
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..b7d0b57c078c
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..f33818196207
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..981051924f3f
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..cb8cc13fd93f
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..b4a27b91d98a
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..93087a3bd346
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..0a7614e24026
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..863c1ecdd80d
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..1b1b3ab0aee0
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..33a9eb59fad2
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..ec1ee270396b
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..85c681d6c2e5
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..0c569b6733cf
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..bf3f5367a5ca
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..b103845cef3c
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..4dde365241ac
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..2a073169262f
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..6f9532020e88
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..6c2c19f8d670
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..1f389b05b850
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..745371630627
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..6ff5e36990ae
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..59ae46cb0a19
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..b3b9972a01fb
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..3fd9a4c8fa95
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..3a54d0fbd233
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..ccd6d6e3fcec
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..6e1ff0bf5b3e
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..7f4733bf8b81
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..b579855a75e0
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..141d88f8d1bd
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..49cb573b6c33
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..070ce92a96c4
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..d4f6058327bc
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..fa07063d61f5
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..357882eafb35
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..3d8406b93578
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..a67ef2eced60
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..c92105e6ea5a
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..8c3a6e29fc24
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..9b040d991ae2
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..f3c114b067bf
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..ffdc8ff6f035
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..c70356b0165a
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..1414bc2fbb6b
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..9026eb70579d
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..9db13ee69395
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..2a2c26c1d9b4
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..9e986642854c
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..1276ac19d473
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..aca34b06fc78
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..51d817197ff7
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..4e0ed5eead73
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..b007836230bb
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..464b4ef6017e
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..99f99934a5ec
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..d714a2d76a7d
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..c501a10b0717
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..02dc5d26fb9f
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..9112fe3b3de6
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..43899684fee4
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..8f22398b1360
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..aec846f7b670
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..3624dd8040c3
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..157f7f13af4f
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..35306800d043
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..20c65ca08d60
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..0c696d7fd1ae
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..04d14cc9ae0a
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..d373607a423d
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..504d4e15034a
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..d35114ba91df
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..f5a8588bdf64
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..2026814b0f4e
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..ac5e8a2ef168
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..ac5e8a2ef168
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..822874864908
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..d0ee0b46b63a
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..548ebb876fb1
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..194842fc3db5
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..a2bd2b06db99
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..f3808a961934
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..21e9d239a6dc
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..eca071dc810c
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..ec6d151ccfee
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..2c8a90d92ba7
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..6d28422ca1f9
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..22604ee4fcfb
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..2d561aa748db
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..521fc1ae6dba
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..3cf45765d186
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..b32a306dda80
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..ab514961f284
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..d008ae448056
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..3e739c57bbad
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..3e739c57bbad
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..27280309742b
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..d008ae448056
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..2397a41399af
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..1bb669ce16fb
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..cd33ccf99182
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..8e1cf2145a5e
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..a3a97fe4b9af
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..366ac64b94bc
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..b51b08d28ed2
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..d39b196ac904
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..1708c9121d76
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..f78402760736
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..dfccdcb2e84e
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..25e8f1774c29
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..672b594733bd
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..8366ed7be802
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..0bb6deab3df7
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..581f72e6c08f
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..a1d3504268db
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..05d4e19a31fd
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..d90f1e2a3818
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..8e5e28601240
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..070cced37e4c
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..ca479856d21a
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..ec0e1035f904
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..d617259c6caf
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..ae95b8470c5f
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..f9a81097a330
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..5ae2e2193b08
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..5436adbdd781
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..1d3293a43198
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..f43533f21ac3
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..a46b76b34d10
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..e144dcc8813a
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..b9f796bb511d
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..0dd9819733fd
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..7ce33e3509a4
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..766b4153c61d
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..7528965a6e79
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..a41ac3d153a2
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..b41515a65ebd
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..5fe111dbd14a
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..b750e1429a19
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..26d542b3cc3b
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..40a1e4e380d6
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..428b936592d8
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..d112435e43ed
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..62ec965f187e
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..407323e190ae
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..a8ee9a2ac440
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..ce53e1465722
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..ed330ec8495a
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..ce53e1465722
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..9d0ef7c302b1
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..ce53e1465722
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..40f7d1137de6
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..ce53e1465722
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..318673bfe784
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..4cab021e670c
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..bf613523df1f
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..c7a5808b0874
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..0d9e3e5ec421
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..2d883daa5f0d
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..42737239faf3
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..c3969ef9c515
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..755e3b5dacd0
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..ba1640fc6f78
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..c1b399a66174
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..d0eff34a6ef3
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..b4baf73670f6
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..ff917d737634
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..cbd32e9352f4
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..4d5fc13cb5ee
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..25b12d0bb649
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..962e2b085446
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..5779af7f37db
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..7578b93e0241
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..e1797d1bd068
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..28d5a6659bd9
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..e0f7e3a8e82a
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..cc158b0aaa98
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..231ffe510c38
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..84ab037c3f3d
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..5c358642d08a
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..fd085656f761
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..e3396236e4e9
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..0a141722e4c7
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..6b452050460c
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..9812e8bd83f4
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..7fb56cc02e90
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..a76ab642b022
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..84b72ed628d9
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..12e1381c1b1b
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..343c4dc67286
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..75c6670cdb31
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..e07be1ebd8c5
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..83aef398c56a
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..3a54d8d392e1
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..a9b15f69c5ea
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..3e0c23edb4e7
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..d4db63025e75
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..b1be9fb0c8cc
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..8ce421fac9d4
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..4e330920dfd0
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..e76808c0db20
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..de8f062a1c1d
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..13a53fc4ac79
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..03a5a6c769b2
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..12a852cb38d2
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..14fefaa86296
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..e682da53495a
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..e19553de43ce
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..028fe2fe1c17
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..ba559f99cea5
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..ba5541ad4f9e
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..5905651496e0
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..cce80778a475
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..045a9a808a59
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..b860ad9bbfca
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..62c3d7843b85
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..6cb433e953c5
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..f537794191e7
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..e9ae497a323d
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..9076e11879da
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..dcf127be48cf
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..06197216c771
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..58e481e30d15
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..7eb44f5544ef
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..858581c4a9bd
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..db3072d3231b
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..697bb0bae4c4
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..946d525bbab5
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..df94b8777579
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..fa3a3a68314e
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..f23af1b1ecf5
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..c5f012b7e56a
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..c4a92186678b
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..7023a3d2d4a6
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..fceb29fdcb44
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..eb505a3bcecf
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..4767ba316fb7
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..ebe90e3220f8
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..6c56b3e759cf
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..c6417a7755fe
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..0d9ab1e6d45a
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..e6367da58353
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..cbef8841858d
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..d1443119188d
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..6822d54a90d1
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..69be504506f6
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..cf4130b90404
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..ac94fcce883a
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..483faa2841bc
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..7cea3811b5eb
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..2dc10ae98b46
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..546eae35c0ad
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..3a1069b76a84
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..e76faffbfcdb
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..78f5c80fbcce
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..529ba027ca74
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..2b89ae92cda0
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..e2b46efed7f4
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..6b63b3d8e7e6
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..71dc0dd1d2b5
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..d84fc8083ee7
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..5f43d2c88daf
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..28136f2a01da
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..e18033bd7b7c
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 52bbdc7712f3..7111d8a0ed8c 100644
--- a/packages/devextreme-scss/.stylelintrc.json
+++ b/packages/devextreme-scss/.stylelintrc.json
@@ -20,7 +20,11 @@
         "@stylistic/declaration-colon-space-after": "always-single-line",
         "@stylistic/declaration-colon-space-before": "never",
         "declaration-no-important": true,
-        "dx/module-variable-default": true,
+        "declaration-property-value-disallowed-list": [
+            { "/.*/": ["/var\\(\\s*--dxds-/"] },
+            { "message": "Read a design token through the ds bridge (ds.$name), not var(--dxds-…): the bridge fails the build on an unknown name, a raw custom property compiles and degrades silently." }
+        ],
+        "dx/module-variable-default": [true, { "exemptMarkersFrom": "tools/review/size-markers.json" }],
         "dx/no-identical-branch-declarations": true,
         "font-family-name-quotes": "always-unless-keyword",
         "@stylistic/function-comma-space-after": "always-single-line",
@@ -79,5 +83,39 @@
         "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]+)*$"
+            }
+        },
+        {
+            "comment": "A file that emits rules consumes the widget's own variables, so the token a value comes from is stated once, next to the other variables of that widget. Declaration files are exempted by the override below. `var(--dx-…)` is NOT banned as a form since wave F: the component tier is emitted (_public.scss projections, _public-links.scss links) and consumed (pilot rules) through it, and name validity is enforced by fluent-next-naming.test.ts against the declared tier — stylelint could only see the spelling, not whether the name exists. `@use … with ()` arguments are at-rule parameters and stay invisible to stylelint; the naming test covers that form too.",
+            "files": ["scss/widgets/fluent-next/**/*.scss"],
+            "rules": {
+                "declaration-property-value-disallowed-list": [
+                    { "/.*/": ["/var\\(\\s*--dxds-/", "/\\bds\\.\\$/"] },
+                    { "message": "Use the widget's own variable here: resolve the design token in _colors.scss or _sizes.scss. A custom property compiles even when its name is wrong." }
+                ]
+            }
+        },
+        {
+            "comment": "Turning a token into a widget variable is what these files are for, so only the raw custom-property form stays banned here.",
+            "files": [
+                "scss/widgets/fluent-next/**/_colors.scss",
+                "scss/widgets/fluent-next/**/_sizes.scss",
+                "scss/widgets/fluent-next/**/_variables.scss"
+            ],
+            "rules": {
+                "declaration-property-value-disallowed-list": [
+                    { "/.*/": ["/var\\(\\s*--dxds-/", "/var\\(\\s*--dx-/"] },
+                    { "message": "Read a design token through the ds bridge (ds.$name), not as a custom property: the bridge fails the build on an unknown name, a custom property compiles and degrades silently." }
+                ]
+            }
+        }
+    ]
 }
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/internal-scss-paths.json b/packages/devextreme-scss/build/internal-scss-paths.json
new file mode 100644
index 000000000000..79b32f49e75f
--- /dev/null
+++ b/packages/devextreme-scss/build/internal-scss-paths.json
@@ -0,0 +1,5 @@
+[
+  "widgets/fluent-next/",
+  "_design-system/",
+  "bundles/dx.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..9d9ebd24e0e2
--- /dev/null
+++ b/packages/devextreme-scss/build/tokens/build-tokens.mjs
@@ -0,0 +1,616 @@
+import path from 'node:path';
+import url from 'node:url';
+import { createRequire } from 'node:module';
+import {
+  readdir, readFile, rm, writeFile,
+} from 'node:fs/promises';
+import StyleDictionary from 'style-dictionary';
+import { fileHeader, formattedVariables } from 'style-dictionary/utils';
+import { registerTransforms } from './transforms.mjs';
+import {
+  THEME_NAME, THEME_FOLDER, getBridgeFiles, getModeFiles,
+} from './sources.mjs';
+import {
+  buildAvailableNames,
+  collectCustomPropertyReferences,
+  collectTokenReferences,
+} from './consumed-tokens.ts';
+
+// 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;
+  },
+});
+
+/*
+ * WORKAROUND for a bug in @devexpress/design-tokens-internal, present since 262.13.0: that release
+ * dropped `color.shadow-none` from semantic/colors/*, but semantic/box-shadow/{fluent,material}.json
+ * still reference it from every layer of `box-shadow.none`, so Style Dictionary fails the whole build
+ * on three unresolvable references. The value the token carried up to 262.12.0 is substituted here,
+ * which keeps the output identical to that release: `box-shadow.none` is all-zero geometry in a fully
+ * transparent colour.
+ *
+ * Remove this once the package defines the token again or stops referencing it. The other two
+ * preprocessors above patch the same class of export defect.
+ */
+const REMOVED_REFERENCES = new Map([
+  ['color.shadow-none', 'rgba(0,0,0,0)'],
+]);
+
+StyleDictionary.registerPreprocessor({
+  name: 'dx/substitute-removed-references',
+  preprocessor: (tokens) => {
+    const visit = (node) => {
+      if (typeof node !== 'object' || node === null) {
+        return;
+      }
+
+      Object.entries(node).forEach(([key, value]) => {
+        if (typeof value === 'string') {
+          REMOVED_REFERENCES.forEach((replacement, refPath) => {
+            if (value.includes(`{${refPath}}`) && !hasTokenAtPath(tokens, refPath)) {
+              console.warn(`[design-tokens] Substituting removed reference {${refPath}} -> ${replacement}`);
+              node[key] = value.replaceAll(`{${refPath}}`, replacement);
+            }
+          });
+
+          return;
+        }
+
+        visit(value);
+      });
+    };
+
+    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')}/`;
+
+
+// Kept in step with the @includes in widgets/fluent-next/_design-system.scss.
+const MODE_ROLES_MIXIN = 'roles';
+const MODE_ALIASES_MIXIN = 'aliases';
+const MODE_ALIASES_FILE = 'mode-aliases';
+const MODE_SHARED_FILE = 'mode-shared';
+
+const themePath = path.resolve(dirname, `../../scss/widgets/${THEME_FOLDER}`);
+
+const FLUENT_PALETTES = [
+  'blue',
+  'cool-blue',
+  'desert',
+  'mint',
+  'moss',
+  'orchid',
+  'purple',
+  'rose',
+  'rust',
+  'steel',
+  'storm',
+];
+
+const FLUENT_MODES = [
+  'dark',
+  'light',
+];
+
+
+/*
+ * A bundle needs the mode-dependent declarations under three selectors, and a `:root` block cannot
+ * be re-scoped on load — `meta.load-css` emits it verbatim and `@use` paths take no interpolation —
+ * so these layers ship as mixins the theme places where it wants.
+ *
+ * Otherwise identical to Style Dictionary's own `css/variables` (lib/common/formats.js) minus the
+ * selector nesting; keep the two in step.
+ */
+// `prefix` belongs to the declaration lines, not to the header comment — upstream drops it before
+// building the header (getFormattingCloneWithoutPrefix), and so must we.
+const headerFormatting = ({ prefix, ...formatting } = {}) => formatting;
+
+StyleDictionary.registerFormat({
+  name: 'dx/mode-scoped-mixin',
+  format: async ({ dictionary, file, options }) => {
+    const {
+      outputReferences, outputReferenceFallbacks, usesDtcg, formatting, sort, mixin,
+    } = options;
+    const header = await fileHeader({ file, formatting: headerFormatting(formatting), options });
+    const variables = formattedVariables({
+      format: 'css',
+      dictionary,
+      outputReferences,
+      outputReferenceFallbacks,
+      formatting: { ...formatting, indentation: '  ' },
+      usesDtcg,
+      sort,
+    });
+
+    return `${header}@mixin ${mixin}() {\n${variables}\n}\n`;
+  },
+});
+
+StyleDictionary.registerFormat({
+  name: 'scssToCss',
+  format: ({ dictionary }) => dictionary.allTokens
+    .map((token) => `$${token.name.replace('dxds-', '')}: var(--${token.name});`)
+    .join('\n'),
+});
+
+const ACCENT_PROPERTY = '--dx-accent-color';
+const PRIMARY_STEP_DECLARATION = /^(\s*)--dxds-primary-(\d+):\s*([^;]+);$/gm;
+const PRIMARY_STEP_TOKEN = /^dxds-primary-\d+$/;
+
+StyleDictionary.registerFormat({
+  name: 'dx/accent-palette',
+  format: async (args) => {
+    const palette = await StyleDictionary.hooks.formats['css/variables'](args);
+    const stepsInDictionary = args.dictionary.allTokens
+      .filter(({ name }) => PRIMARY_STEP_TOKEN.test(name)).length;
+    let wrapped = 0;
+    const withAccentFallback = palette.replace(
+      PRIMARY_STEP_DECLARATION,
+      (line, indent, step, value) => {
+        wrapped += 1;
+
+        return `${indent}--dxds-primary-${step}: var(${ACCENT_PROPERTY}-${step}, ${value});`;
+      },
+    );
+
+    if (!stepsInDictionary || wrapped !== stepsInDictionary) {
+      throw new Error(`An accent palette with ${stepsInDictionary} --dxds-primary-* steps, `
+        + `${wrapped} of them wrapped into ${ACCENT_PROPERTY}-*`);
+    }
+
+    return withAccentFallback;
+  },
+});
+
+const FILE_OPTIONS = {
+  outputReferences: true,
+  themeable: true,
+  // 262.22.0 gave almost every semantic colour a $description, which Style Dictionary prints as a
+  // trailing `/** … */` on the declaration. Those comments are the package's own Figma bookkeeping,
+  // not something the bundle should carry, and the mode/shared split parses this generated text.
+  formatting: { commentStyle: 'none' },
+};
+
+// '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',
+    'dx/substitute-removed-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: 'dx/accent-palette',
+    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(`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/colors/${mode}.scss`,
+    format: 'dx/mode-scoped-mixin',
+    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, mixin: MODE_ROLES_MIXIN },
+  },
+  /*
+   * The layers that read a colour role without being one: box-shadow composites and the global
+   * focus aliases. Their text is mode-independent, but a custom property resolves where it is
+   * declared, so on `:root` they would freeze at the bundle's mode. Both mode configs emit this
+   * file; the sources are the same, so the two writes are byte-identical.
+   */
+  {
+    destination: `${THEME_NAME}/${MODE_ALIASES_FILE}.scss`,
+    format: 'dx/mode-scoped-mixin',
+    filter: (token) => {
+      const filePath = normalizeFilePath(token);
+
+      return filePath.includes(`semantic/box-shadow/${THEME_NAME}.json`)
+        || filePath.includes(`global/${THEME_NAME}.json`)
+        || filePath.includes(`figma-utils/box-shadow/semantic/${THEME_NAME}.json`);
+    },
+    options: { ...FILE_OPTIONS, mixin: MODE_ALIASES_MIXIN },
+  },
+]);
+
+// Component *size* tokens are excluded for the same reason as the component theme: fluent-next
+// maps sizes onto the base scales (spacing/font-size/border-radius/…), so no widget would read the
+// `*-layout-*` names (see widgets/fluent-next/_design-system.scss).
+const createDsConfig = () => createConfig('ds', getBridgeFiles(), [
+  {
+    destination: 'variables/_ds.scss',
+    format: 'scssToCss',
+  },
+]);
+
+const configs = [
+  ...FLUENT_PALETTES.map(createPaletteConfig),
+  ...FLUENT_MODES.map(createModeConfig),
+  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 collectThemeStyleSheets() {
+  const entries = await readdir(themePath, { withFileTypes: true, recursive: true });
+
+  return entries
+    .filter((entry) => entry.isFile() && entry.name.endsWith('.scss'))
+    .map((entry) => path.join(entry.parentPath, entry.name));
+}
+
+/*
+ * Emitting by source file is a coarse answer: many declarations in those files do not depend on
+ * the mode, and repeating them in four scopes per bundle is pure weight. Which is which is derived
+ * from the generated text - a name whose two mode values differ, plus anything reading such a name
+ * through a chain - so a token that starts or stops depending on the mode moves on its own at the
+ * next bump. The remainder goes to a plain `:root` block; the theme-mode-scope gate is the judge.
+ * The counts are printed at the end of the build.
+ */
+const DECLARATION = /^(\s*)(--[\w-]+)\s*:\s*([^;]+);\s*$/;
+
+const parseDeclarations = (content) => content.split('\n').reduce((declarations, line) => {
+  const match = DECLARATION.exec(line);
+
+  return match ? declarations.set(match[2], match[3].trim()) : declarations;
+}, new Map());
+
+const readsOf = (value) => [...value.matchAll(/var\(\s*(--[\w-]+)/g)].map(([, name]) => name);
+
+const modeDependentNames = (light, dark, aliases) => {
+  // Both key sets, not just the light one: a name only one mode declares differs by definition,
+  // and seeding from one side would drop it from the other scope without moving it to :root.
+  const tainted = new Set([...light.keys(), ...dark.keys()]
+    .filter((name) => light.get(name) !== dark.get(name)));
+
+  for (let grew = true; grew;) {
+    grew = false;
+
+    for (const source of [light, aliases]) {
+      for (const [name, value] of source) {
+        if (!tainted.has(name) && readsOf(value).some((read) => tainted.has(read))) {
+          tainted.add(name);
+          grew = true;
+        }
+      }
+    }
+  }
+
+  return tainted;
+};
+
+const withBody = (content, keep) => content.replace(
+  /(\{\n)([\s\S]*)(\n\})/,
+  (whole, open, body, close) => {
+    const lines = body.split('\n').filter((line) => {
+      const match = DECLARATION.exec(line);
+
+      return !match || keep(match[2]);
+    });
+
+    return `${open}${lines.join('\n')}${close}`;
+  },
+);
+
+async function splitModeScopedLayers() {
+  const modeFile = (mode) => path.join(buildPath, THEME_NAME, 'semantic', 'colors', `${mode}.scss`);
+  const aliasesFile = path.join(buildPath, THEME_NAME, `${MODE_ALIASES_FILE}.scss`);
+  const sharedFile = path.join(buildPath, THEME_NAME, `${MODE_SHARED_FILE}.scss`);
+
+  const sources = Object.fromEntries(await Promise.all(
+    [['light', modeFile('light')], ['dark', modeFile('dark')], ['aliases', aliasesFile]]
+      .map(async ([key, file]) => [key, { file, content: await readFile(file, 'utf-8') }]),
+  ));
+  const parsed = Object.fromEntries(
+    Object.entries(sources).map(([key, { content }]) => [key, parseDeclarations(content)]),
+  );
+  const dependent = modeDependentNames(parsed.light, parsed.dark, parsed.aliases);
+
+  await Promise.all(Object.values(sources).map(({ file, content }) => writeFile(
+    file,
+    withBody(content, (name) => dependent.has(name)),
+    'utf-8',
+  )));
+
+  // Either mode file carries the shared roles: for those, light and dark agree by definition.
+  const shared = [...parsed.light, ...parsed.aliases].filter(([name]) => !dependent.has(name));
+  const header = sources.light.content.slice(0, sources.light.content.indexOf('@mixin'));
+  const body = shared.map(([name, value]) => `  ${name}: ${value};`).join('\n');
+
+  await writeFile(sharedFile, `${header}:root {\n${body}\n}\n`, 'utf-8');
+
+  return { dependent: dependent.size, shared: shared.length };
+}
+
+// Every token a widget reads must still exist in the package. Without this a deleted token surfaces
+// much later as a Sass "Undefined variable", one name per rebuild, with no hint that a bump caused
+// it. Read from the flat index, not the bridge: it carries the version for the message.
+async function validateConsumedTokens() {
+  const { version, tokens } = JSON.parse(
+    await readFile(path.join(tokensDir, 'tokens.flat.json'), 'utf-8'),
+  );
+  const availableNames = buildAvailableNames(
+    Object.keys(tokens),
+    new Set(getBridgeFiles()),
+  );
+
+  const referenced = new Map();
+
+  for (const file of await collectThemeStyleSheets()) {
+    const content = await readFile(file, 'utf-8');
+    const source = path.relative(themePath, file);
+    const found = [
+      ...collectTokenReferences(content, source).map((name) => [name, `ds.$${name}`]),
+      ...collectCustomPropertyReferences(content, source).map((name) => [name, `var(--dxds-${name})`]),
+    ];
+
+    for (const [name, reference] of found) {
+      if (!referenced.has(name)) {
+        referenced.set(name, { file, reference });
+      }
+    }
+  }
+
+  const missing = [...referenced].filter(([name]) => !availableNames.has(name));
+
+  if (missing.length > 0) {
+    const details = missing
+      .map(([, { file, reference }]) => `  ${reference} (first used in ${path.relative(themePath, file)})`)
+      .join('\n');
+
+    throw new Error(
+      `Tokens used by ${THEME_FOLDER} but absent from @devexpress/design-tokens-internal ${version}:\n${details}`,
+    );
+  }
+
+  return referenced.size;
+}
+
+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 split = await splitModeScopedLayers();
+  const fileCount = await validateReferences();
+  const consumedCount = await validateConsumedTokens();
+
+  console.log(`Design tokens generated: ${fileCount} files in ${buildPath}`);
+  console.log(`Mode-scoped declarations: ${split.dependent} depend on the mode, ${split.shared} moved to :root`);
+  console.log(`Design tokens consumed by ${THEME_FOLDER}: ${consumedCount} verified against the package`);
+}
+
+await build();
diff --git a/packages/devextreme-scss/build/tokens/consumed-tokens.ts b/packages/devextreme-scss/build/tokens/consumed-tokens.ts
new file mode 100644
index 000000000000..c5b1fbdbb186
--- /dev/null
+++ b/packages/devextreme-scss/build/tokens/consumed-tokens.ts
@@ -0,0 +1,52 @@
+// Pure half of the consumed-token check in build-tokens.mjs, so the tests can run it without a build.
+
+// A commented-out declaration still names a token, and a dead reference must not fail the build.
+// Throws on an unpaired delimiter: it would shift the alternation and hide the rest of the file.
+export const stripScssComments = (content: string, source: string): string => {
+  const delimiters = content.replace(/\/\/[^\n\r]*/g, '').match(/\/\*|\*\//g) ?? [];
+  const paired = delimiters.length % 2 === 0
+    && delimiters.every((delimiter, index) => delimiter === (index % 2 === 0 ? '/*' : '*/'));
+
+  if (!paired) {
+    throw new Error(`Unpaired block comment delimiter in ${source}: code cannot be told from comment`);
+  }
+
+  return content
+    .replace(/\/\/[^\n\r]*/g, '')
+    .split(/\/\*|\*\//)
+    .filter((_, index) => index % 2 === 0)
+    .join('');
+};
+
+// Wider than kebab-case on purpose: `[a-z0-9-]` would truncate `ds.$spacing-40_typo` to a valid name.
+export const collectTokenReferences = (content: string, source: string): string[] => [
+  ...stripScssComments(content, source).matchAll(/\bds\.\$([\w-]+)/g),
+].map(([, name]) => name);
+
+// Bypassing the bridge compiles silently, so the raw form is collected too. Unused today.
+export const collectCustomPropertyReferences = (content: string, source: string): string[] => [
+  ...stripScssComments(content, source).matchAll(/var\(\s*--dxds-([\w-]+)/g),
+].map(([, name]) => name);
+
+// Demo code is CSS, HTML and framework markup, not Sass: `//` opens no comment there (it lives
+// inside every URL), and an unpaired `/*` is normal in a string or a regex. So this collector
+// strips only the delimited forms and never throws — a scan of somebody else's files must not be
+// able to fail the build on their punctuation.
+export const collectMarkupCustomPropertyReferences = (content: string): string[] => [
+  ...content
+    .replace(/\/\*[\s\S]*?\*\//g, ' ')
+    .replace(/<!--[\s\S]*?-->/g, ' ')
+    .matchAll(/var\(\s*--dxds-([\w-]+)/g),
+].map(([, name]) => name);
+
+// The index spans every design system and names repeat across them, so it is narrowed to the
+// source files the bridge is generated from.
+export const buildAvailableNames = (
+  flatTokenKeys: Iterable<string>,
+  consumedSourceFiles: ReadonlySet<string>,
+): Set<string> => new Set(
+  [...flatTokenKeys]
+    .map((key) => key.split(':'))
+    .filter(([sourceFile]) => consumedSourceFiles.has(sourceFile))
+    .map(([, tokenPath]) => tokenPath.replace(/\//g, '-')),
+);
diff --git a/packages/devextreme-scss/build/tokens/sources.mjs b/packages/devextreme-scss/build/tokens/sources.mjs
new file mode 100644
index 000000000000..1e98b2015f7f
--- /dev/null
+++ b/packages/devextreme-scss/build/tokens/sources.mjs
@@ -0,0 +1,45 @@
+/*
+ * Which files of @devexpress/design-tokens-internal the theme is built from. Shared by the token
+ * build and by tools/tokens/update.mjs, which reports what a package bump does to exactly these —
+ * two copies of this list would drift and the report would quietly describe the wrong package.
+ */
+
+export const THEME_NAME = 'fluent';
+export const THEME_FOLDER = 'fluent-next';
+
+export 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}`,
+];
+
+export const getModeFiles = (mode) => [
+  ...getThemeCommonFiles(),
+  `base/colors/icons/${THEME_NAME}/${mode}`,
+  `base/colors/palettes/${THEME_NAME}/blue`,
+  `semantic/colors/${THEME_NAME}/${mode}`,
+];
+
+/*
+ * Source files behind the SCSS bridge. The component tier is absent on purpose: its tokens only
+ * alias the semantic roles the theme already reads, so emitting them added unreferenced custom
+ * properties. Absent from the bridge, `ds.$button-color-bg-rest` is now a Sass error.
+ */
+export const getBridgeFiles = () => getModeFiles('light');
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/grid/text-stub.png b/packages/devextreme-scss/images/widgets/fluent-next/grid/text-stub.png
new file mode 100644
index 000000000000..5c93776f712b
Binary files /dev/null and b/packages/devextreme-scss/images/widgets/fluent-next/grid/text-stub.png differ
diff --git a/packages/devextreme-scss/package.json b/packages/devextreme-scss/package.json
index 691142e43582..8664817b50ad 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.23.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.4",
     "stylelint": "catalog:",
     "stylelint-config-standard-scss": "14.0.0",
     "stylelint-scss": "6.10.0",
@@ -17,8 +20,18 @@
   },
   "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/rename.mjs --residue && node tools/naming/derive-registries.mjs --check && node tools/naming/publish.mjs --check && node tools/review/reachability.mjs",
+    "naming:propose": "node tools/naming/propose.mjs",
+    "naming:publish": "node tools/naming/publish.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",
+    "tokens:update": "node tools/tokens/update.mjs",
+    "typecheck": "tsc -p tsconfig.json",
     "watch": "pnpm --workspace-root nx run devextreme-scss --target=watch"
   },
   "version": "26.2.0"
diff --git a/packages/devextreme-scss/project.json b/packages/devextreme-scss/project.json
index 9b1be44607cd..e4513518c251 100644
--- a/packages/devextreme-scss/project.json
+++ b/packages/devextreme-scss/project.json
@@ -16,16 +16,39 @@
         "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/**/*",
+        "{projectRoot}/scss/widgets/fluent-next/**/*",
+        "{workspaceRoot}/pnpm-lock.yaml"
+      ],
+      "outputs": [
+        "{projectRoot}/scss/_design-system"
+      ],
+      "cache": true
+    },
     "copy:assets": {
       "executor": "devextreme-nx-infra-plugin:copy-files",
       "options": {
@@ -47,21 +70,27 @@
     },
     "build:themes": {
       "executor": "devextreme-nx-infra-plugin:scss-build",
+      "parallelism": false,
       "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"
       ],
       "outputs": [
         "{projectRoot}/scss/bundles",
-        "{workspaceRoot}/packages/devextreme/artifacts/css/dx.*.css"
+        "{workspaceRoot}/packages/devextreme/artifacts/css/dx.*.css",
+        "{workspaceRoot}/packages/devextreme/artifacts/css/accents"
       ],
       "cache": true
     },
@@ -70,19 +99,24 @@
       "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"
       ],
       "outputs": [
         "{projectRoot}/scss/bundles",
-        "{workspaceRoot}/packages/devextreme/artifacts/css/dx.*.css"
+        "{workspaceRoot}/packages/devextreme/artifacts/css/dx.*.css",
+        "{workspaceRoot}/packages/devextreme/artifacts/css/accents"
       ],
       "cache": true
     },
@@ -101,12 +135,14 @@
         "{projectRoot}/icons/**/*",
         "{projectRoot}/images/**/*",
         "{projectRoot}/scss/**/*",
+        "!{projectRoot}/scss/_design-system/**/*",
         "{workspaceRoot}/packages/devextreme/package.json",
         "{workspaceRoot}/pnpm-lock.yaml"
       ],
       "outputs": [
         "{projectRoot}/scss/bundles",
         "{workspaceRoot}/packages/devextreme/artifacts/css/dx.*.css",
+        "{workspaceRoot}/packages/devextreme/artifacts/css/accents",
         "{workspaceRoot}/packages/devextreme/artifacts/css/fonts",
         "{workspaceRoot}/packages/devextreme/artifacts/css/icons"
       ],
@@ -127,6 +163,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"
@@ -134,6 +171,7 @@
       "outputs": [
         "{projectRoot}/scss/bundles",
         "{workspaceRoot}/packages/devextreme/artifacts/css/dx.*.css",
+        "{workspaceRoot}/packages/devextreme/artifacts/css/accents",
         "{workspaceRoot}/packages/devextreme/artifacts/css/fonts",
         "{workspaceRoot}/packages/devextreme/artifacts/css/icons"
       ],
@@ -145,12 +183,16 @@
         "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 +204,47 @@
       "inputs": [
         "{projectRoot}/**/*"
       ]
+    },
+    "naming:check": {
+      "executor": "nx:run-script",
+      "options": {
+        "script": "naming:check"
+      },
+      "dependsOn": [
+        "build:themes"
+      ],
+      "inputs": [
+        "{projectRoot}/**/*"
+      ],
+      "cache": true
+    },
+    "test": {
+      "executor": "nx:run-script",
+      "options": {
+        "script": "test"
+      },
+      "dependsOn": [
+        "build:tokens",
+        "build:themes",
+        "typecheck"
+      ],
+      "inputs": [
+        "{projectRoot}/**/*"
+      ]
+    },
+    "typecheck": {
+      "executor": "nx:run-script",
+      "options": {
+        "script": "typecheck"
+      },
+      "inputs": [
+        "{projectRoot}/build/tokens/**/*.ts",
+        "{projectRoot}/tools/naming/**/*.ts",
+        "{projectRoot}/tools/tokens/**/*.ts",
+        "{projectRoot}/tests/**/*.ts",
+        "{projectRoot}/tsconfig.json"
+      ],
+      "cache": true
     }
   },
   "tags": []
diff --git a/packages/devextreme-scss/scss/widgets/base/_box.scss b/packages/devextreme-scss/scss/widgets/base/_box.scss
index 0ce838e1c947..8dc148360f28 100644
--- a/packages/devextreme-scss/scss/widgets/base/_box.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_box.scss
@@ -1,5 +1,7 @@
+$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 242dd3de7ce5..933d4e096950 100644
--- a/packages/devextreme-scss/scss/widgets/base/_contextMenu.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_contextMenu.scss
@@ -1,3 +1,8 @@
+// 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;
@@ -5,7 +10,11 @@
   }
 
   .dx-menu-items-container {
-    padding: 1px;
+
+    // fluent-next passes false (not null: !default would treat that as unset): its own rule paints this
+    @if $contextmenu-menu-items-container-padding {
+      padding: $contextmenu-menu-items-container-padding;
+    }
   }
 
   .dx-menu-item .dx-submenu {
@@ -14,7 +23,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 86768b8f826c..b3590ad5e961 100644
--- a/packages/devextreme-scss/scss/widgets/base/_dateBox.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_dateBox.scss
@@ -1,9 +1,16 @@
 @use "./mixins" as *;
 
+// 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;
     }
   }
 }
@@ -42,8 +49,8 @@
   }
 
   .dx-popup-content {
-    padding-top: 20px;
-    padding-bottom: 20px;
+    padding-top: $datebox-popup-content-padding-top;
+    padding-bottom: $datebox-popup-content-padding-bottom;
   }
 }
 
@@ -55,10 +62,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 4571fd682770..da9e536bc336 100644
--- a/packages/devextreme-scss/scss/widgets/base/_dropDownList.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_dropDownList.scss
@@ -1,6 +1,9 @@
+// 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 ba82a69ce1ae..880c5d64bbbe 100644
--- a/packages/devextreme-scss/scss/widgets/base/_fieldset.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_fieldset.scss
@@ -1,7 +1,13 @@
 @use "./mixins" as *;
 
+// 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;
@@ -19,14 +25,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();
 }
@@ -41,7 +47,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 4da499e464b1..1d98db9224bf 100644
--- a/packages/devextreme-scss/scss/widgets/base/_fileUploader.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_fileUploader.scss
@@ -1,5 +1,28 @@
 @use "./mixins" as *;
 
+// 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: 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-file-container-button-margin-left: 10px !default;
+$fileuploader-cancel-button-position-end-margin-right: 4px !default;
+$fileuploader-file-size-padding-right: 4px !default;
+$fileuploader-file-status-message-line-margin-bottom: 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;
@@ -28,12 +51,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;
   }
 
@@ -42,7 +65,7 @@
   }
 
   .dx-button + .dx-button {
-    margin-left: 12px;
+    margin-left: $fileuploader-button-margin-left;
   }
 }
 
@@ -74,7 +97,7 @@
   vertical-align: middle;
 
   & > .dx-fileuploader-upload-button {
-    margin-top: 10px;
+    margin-top: $fileuploader-upload-button-margin-top;
   }
 }
 
@@ -92,7 +115,7 @@
   width: 100%;
 
   .dx-fileuploader-show-file-list & {
-    padding-top: 22px;
+    padding-top: $fileuploader-show-file-list-padding-top;
   }
 }
 
@@ -100,16 +123,20 @@
   display: flex;
   align-items: center;
   width: 100%;
-  padding: 4px 0 4px;
+
+  // fluent-next passes false (not null: !default would treat that as unset): its own rule paints this
+  @if $fileuploader-file-container-padding {
+    padding: $fileuploader-file-container-padding;
+  }
 
   .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 {
@@ -175,15 +202,15 @@
 
 .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;
-  margin-top: -6px;
+  height: $fileuploader-progressbar-height;
+  margin-top: -6px; // dx-fixed-size: pulls the status text onto the progress line
 }
 
 .dx-fileuploader-file-name {
@@ -194,17 +221,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 {
@@ -215,12 +242,12 @@
     }
 
     .dx-fileuploader-file-container .dx-fileuploader-button {
-      margin-left: 10px;
+      margin-left: $fileuploader-file-container-button-margin-left;
       margin-right: 0;
 
       &.dx-fileuploader-cancel-button-position-end {
         margin-left: 0;
-        margin-right: 4px;
+        margin-right: $fileuploader-cancel-button-position-end-margin-right;
       }
     }
 
@@ -231,7 +258,7 @@
     }
 
     .dx-fileuploader-file-size {
-      padding-right: 4px;
+      padding-right: $fileuploader-file-size-padding-right;
     }
   }
 }
@@ -242,7 +269,7 @@
 
     span {
       display: block;
-      margin-bottom: 2px;
+      margin-bottom: $fileuploader-file-status-message-line-margin-bottom;
 
       &:last-child {
         margin-bottom: 0;
@@ -255,6 +282,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 36adb6415d90..4456eb112064 100644
--- a/packages/devextreme-scss/scss/widgets/base/_form.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_form.scss
@@ -1,6 +1,17 @@
+// 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 {
@@ -80,8 +91,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;
       }
     }
 
@@ -94,7 +105,7 @@
 
   .dx-tabpanel {
     .dx-multiview-item-content {
-      padding: 20px;
+      padding: $form-multiview-item-content-padding;
     }
   }
 }
@@ -124,9 +135,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;
   }
 }
 
@@ -142,11 +153,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 d904a41490b3..d047236bc859 100644
--- a/packages/devextreme-scss/scss/widgets/base/_gallery.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_gallery.scss
@@ -1,9 +1,15 @@
 @use "./mixins" as *;
 
+// 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;
 
@@ -94,16 +100,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 79636b10de17..59c1f4192807 100644
--- a/packages/devextreme-scss/scss/widgets/base/_htmlEditor.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_htmlEditor.scss
@@ -1,18 +1,43 @@
 @use "sass:list";
 @use "sass:math";
+@use "sass:meta";
 @use "sass:selector";
 
+$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 !default;
 $list-style-width: 1.2em !default;
 $list-style-margin: 0.3em !default;
 $list-style-outer-width: $list-style-margin + $list-style-width !default;
 $max-indent: 9 !default;
-$resize-handle-size: 11px !default;
-$touch-resize-handle-size: 15px !default;
-$half-resize-handle-size: math.div($resize-handle-size, 2) !default;
+
+/*
+ * dx-fixed-size: the drag handle's size; its half is negated at twenty positions, so feeding a
+ * var() here would trade one knob nobody retunes for twenty calc() in the bundle.
+ */
+$resize-handle-size: 11px;
+$touch-resize-handle-size: 15px; // dx-fixed-size: the touch variant of the same handle
+$half-resize-handle-size: math.div($resize-handle-size, 2);
 $half-touch-resize-handle-size: math.div($touch-resize-handle-size, 2) !default;
 
-$transparent-border: 1px solid transparent !default;
+$htmleditor-border-width: 1px !default;
+$transparent-border: $htmleditor-border-width solid transparent !default;
+
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$variable-padding: 3px 6px !default;
+$variable-border-radius: 8px !default;
+$blockquote-padding-inline-start: 12px !default;
+$blockquote-border-inline-start-width: 4px !default;
+$table-cell-padding: 2px 5px !default;
+$placeholder-inset-inline: 15px !default;
+$htmleditor-content-padding: 12px 15px !default;
+$mention-padding-block: 1px !default;
+$mention-border-radius: 2px !default;
+$mention-margin-inline: 2px !default;
+$table-resizer-thickness: 5px !default;
+$table-resizer-highlight-thickness: 3px !default;
 
 @function add-counter-reset($counter, $start: 1) {
   @if $counter > $start {
@@ -126,15 +151,15 @@ $transparent-border: 1px solid transparent !default;
   display: flex;
   flex: 1;
   flex-basis: auto;
-  min-height: 1px;
+  min-height: 1px; // dx-structural: lets the flex item shrink below its content, not a designed height
   margin: 0;
   position: relative;
   overflow: hidden;
 }
 
 .ql-clipboard { // stylelint-disable-line selector-class-pattern
-  left: -100000px;
-  height: 1px;
+  left: -100000px; // dx-structural: parks Quill's clipboard element off-screen
+  height: 1px; // dx-structural: collapses the off-screen clipboard element, not a designed height
   overflow-y: hidden;
   position: absolute;
   top: 50%;
@@ -151,14 +176,14 @@ $transparent-border: 1px solid transparent !default;
   width: 100%;
   outline: none;
   overflow-y: auto;
-  padding: 12px 15px;
+  padding: $htmleditor-content-padding;
   white-space: pre-wrap;
   word-wrap: break-word;
 
   .dx-variable {
     & > span {
-      padding: 3px 6px;
-      border-radius: 8px;
+      padding: $variable-padding;
+      border-radius: $variable-border-radius;
     }
   }
 
@@ -198,8 +223,8 @@ $transparent-border: 1px solid transparent !default;
 
   td,
   th {
-    border: 1px solid #000;
-    padding: 2px 5px;
+    border: 1px solid #000; // dx-line-width: a table hairline; the colour beside it is hard-coded too
+    padding: $table-cell-padding;
   }
 
   ol {
@@ -281,7 +306,7 @@ $transparent-border: 1px solid transparent !default;
 
   code,
   .ql-code-block-container {
-    background-color: rgba(191, 191, 191, 0.15);
+    background-color: $htmleditor-code-block-bg;
   }
 
   .ql-video {
@@ -312,13 +337,13 @@ $transparent-border: 1px solid transparent !default;
 
   &.ql-blank {
     &::before {
-      color: rgba(0, 0, 0, 0.6);
+      color: $htmleditor-placeholder-color;
       content: attr(data-placeholder);
       font-style: italic;
-      left: 15px;
+      left: $placeholder-inset-inline;
       pointer-events: none;
       position: absolute;
-      right: 15px;
+      right: $placeholder-inset-inline;
     }
 
     &::after {
@@ -328,21 +353,21 @@ $transparent-border: 1px solid transparent !default;
     }
 
     &[data-placeholder] > p {
-      height: 0.1px;
+      height: 0.1px; // dx-structural: a non-zero height the placeholder needs, not a designed size
     }
   }
 
   // stylelint-enable selector-class-pattern
 
   blockquote {
-    padding-inline-start: 12px;
-    border-inline-start: 4px solid;
+    padding-inline-start: $blockquote-padding-inline-start;
+    border-inline-start: $blockquote-border-inline-start-width solid;
   }
 }
 
 .dx-suggestion-list-wrapper {
   .dx-list {
-    min-height: 35px;
+    min-height: 35px; // dx-fixed-size: the mention suggestion list keeps a row of space while filtering
 
     .dx-scrollable-content {
       margin: 0;
@@ -351,7 +376,7 @@ $transparent-border: 1px solid transparent !default;
 }
 
 .dx-suggestion-list {
-  min-width: 50px;
+  min-width: 50px; // dx-fixed-size: the narrowest the mention suggestion list may get
 
   .dx-list-item {
     display: block;
@@ -364,7 +389,7 @@ $transparent-border: 1px solid transparent !default;
 }
 
 .dx-formdialog-form {
-  min-width: 360px;
+  min-width: 360px; // dx-fixed-size: the link/image dialog form width
 }
 
 .dx-aidialog {
@@ -389,14 +414,14 @@ $transparent-border: 1px solid transparent !default;
 .dx-aidialog-title {
   display: flex;
   align-items: center;
-  gap: 6px;
-  font-weight: 600;
+  gap: 6px; // dx-fixed-size: gap between the AI dialog title icon and its text
+  font-weight: $htmleditor-aidialog-title-font-weight;
 }
 
 .dx-overlay-content {
   &.dx-popup-fullscreen {
     .dx-formdialog-form {
-      min-width: 240px;
+      min-width: 240px; // dx-fixed-size: the same dialog form once the popup goes fullscreen
     }
   }
 }
@@ -409,7 +434,7 @@ $transparent-border: 1px solid transparent !default;
 .dx-background-format {
   .dx-icon-color,
   .dx-icon-background {
-    border-bottom: 3px solid transparent;
+    border-bottom: 3px solid transparent; // dx-line-width: the strip under the colour-format icon that shows the picked colour
   }
 }
 
@@ -429,7 +454,7 @@ $transparent-border: 1px solid transparent !default;
 .dx-resize-frame {
   position: absolute;
   box-sizing: content-box;
-  border: 1px dashed lightslategrey;
+  border: 1px dashed lightslategrey; // dx-line-width: hairline of the image resize frame
   pointer-events: none;
 
   .dx-resizable-handle {
@@ -440,7 +465,7 @@ $transparent-border: 1px solid transparent !default;
   .dx-resizable-handle-corner-top-left,
   .dx-resizable-handle-corner-bottom-right,
   .dx-resizable-handle-corner-bottom-left {
-    border: 1px solid white;
+    border: 1px solid white; // dx-line-width: hairline around a resize handle
     width: $resize-handle-size;
     height: $resize-handle-size;
     border-radius: 0;
@@ -496,7 +521,7 @@ $transparent-border: 1px solid transparent !default;
       position: absolute;
       width: $resize-handle-size;
       height: $resize-handle-size;
-      border: 1px solid white;
+      border: 1px solid white; // dx-line-width: hairline around a resize handle
 
       @at-root #{selector.append(".dx-touch-device", &)} {
         width: $touch-resize-handle-size;
@@ -561,8 +586,8 @@ $transparent-border: 1px solid transparent !default;
 }
 
 .dx-mention {
-  padding: 1px 0;
-  border-radius: 2px;
+  padding: $mention-padding-block 0;
+  border-radius: $mention-border-radius;
 
   .dx-template-wrapper {
     white-space: nowrap;
@@ -570,7 +595,7 @@ $transparent-border: 1px solid transparent !default;
   }
 
   & > span {
-    margin: 0 2px;
+    margin: 0 $mention-margin-inline;
   }
 }
 
@@ -585,27 +610,27 @@ $transparent-border: 1px solid transparent !default;
   }
 
   .dx-htmleditor-column-resizer {
-    width: 5px;
+    width: $table-resizer-thickness;
     top: 0;
     height: 100%;
     cursor: col-resize;
   }
 
   .dx-htmleditor-highlighted-column {
-    width: 3px;
+    width: $table-resizer-highlight-thickness;
     top: 0;
     height: 100%;
   }
 
   .dx-htmleditor-row-resizer {
-    height: 5px;
+    height: $table-resizer-thickness;
     left: 0;
     width: 100%;
     cursor: row-resize;
   }
 
   .dx-htmleditor-highlighted-row {
-    height: 3px;
+    height: $table-resizer-highlight-thickness;
     left: 0;
     width: 100%;
   }
diff --git a/packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss b/packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss
index 2bc650a5f1c8..724d4e67302e 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,27 @@
 }
 
 @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. With the defaults ($container-size is $icon-size, no borders) it is identically zero, so print 0 instead of shipping calc((X - X - 0) / 2) to the browser; a zero $borders-size alone drops its term the same way.
+    @if $container-size == $icon-size and $borders-size == 0 {
+      $icon-padding: 0;
+    } @else if $borders-size == 0 {
+      $icon-padding: calc((#{$container-size} - #{$icon-size}) / 2);
+    } @else {
+      $icon-padding: calc((#{$container-size} - #{$icon-size} - #{$borders-size}) / 2);
+    }
+
+    $icon-line-height: $icon-size;
+  }
 
   // Geometry
   width: $container-size;
@@ -231,10 +250,26 @@
   // Icon as font
   font-size: $icon-size;
   text-align: center;
-  line-height: $container-size - $icon-paddings-dirty;
+  line-height: $icon-line-height;
 }
 
+/*
+ * NOT converted to translate on purpose. Consumers cancel the horizontal half per widget — the
+ * generic gallery pins its arrows to the edges with `left: 0` / `right: 0` and an explicit
+ * `margin-left: 0` — and a margin can be overridden that way while a transform cannot. Centring
+ * here has to stay something a downstream rule can switch off.
+ */
 @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 +279,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 {
@@ -275,7 +310,7 @@
 }
 
 @mixin dx-font-icon($glyph) {
-  font: 14px/1 DXIcons; // stylelint-disable-line font-family-no-missing-generic-family-keyword, font-family-name-quotes
+  font: 14px/1 DXIcons; // stylelint-disable-line font-family-no-missing-generic-family-keyword, font-family-name-quotes -- dx-icon-glyph-size: the icon font's own size, no icon scale in the package
 
   &::before {
     content: $glyph;
@@ -643,7 +678,7 @@ $icons: (
   }
 
   %icon-font {
-    font: 14px/1 DXIcons; // stylelint-disable-line font-family-no-missing-generic-family-keyword, font-family-name-quotes
+    font: 14px/1 DXIcons; // stylelint-disable-line font-family-no-missing-generic-family-keyword, font-family-name-quotes -- dx-icon-glyph-size: the icon font's own size, no icon scale in the package
   }
 
   @each $key, $glyph in $icons {
diff --git a/packages/devextreme-scss/scss/widgets/base/_loadIndicator.scss b/packages/devextreme-scss/scss/widgets/base/_loadIndicator.scss
index eafdf848b572..ea29a9631308 100644
--- a/packages/devextreme-scss/scss/widgets/base/_loadIndicator.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_loadIndicator.scss
@@ -1,5 +1,7 @@
 @use "sass:math";
+@use "sass:meta";
 
+// Design sizing values (parametrizable; fluent-next injects tokens)
 $loadindicator-width: 32px !default;
 $loadindicator-height: 32px !default;
 
@@ -49,13 +51,13 @@ $loadindicator-height: 32px !default;
     top: 50%;
     left: 50%;
     position: absolute;
-    margin-top: math.div(-1 * $loadindicator-height, 2);
-    margin-left: math.div(-1 * $loadindicator-width, 2);
 
-    &.dx-loadindicator {
-      margin-top: math.div(-1 * $loadindicator-height, 2);
-      margin-left: math.div(-1 * $loadindicator-width, 2);
-    }
+    /*
+     * Centred with translate rather than negative half-size margins: nothing has to halve the
+     * size, so it can be a token, and a consumer's own margin can no longer knock the indicator
+     * off centre — which is what the duplicated .dx-loadindicator specificity bump guarded.
+     */
+    transform: translate(-50%, -50%);
   }
 }
 
diff --git a/packages/devextreme-scss/scss/widgets/base/_loadPanel.scss b/packages/devextreme-scss/scss/widgets/base/_loadPanel.scss
index c6f4d31f3729..0c42ff4e9694 100644
--- a/packages/devextreme-scss/scss/widgets/base/_loadPanel.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_loadPanel.scss
@@ -1,15 +1,20 @@
 @use "./mixins" as *;
 
+// 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 0f61d97cd58d..c5d9a4230fc2 100644
--- a/packages/devextreme-scss/scss/widgets/base/_map.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_map.scss
@@ -1,3 +1,6 @@
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$map-marker-tooltip-margin: 10px !default;
+
 .dx-map-container,
 .dx-map-shield {
   position: relative;
@@ -19,5 +22,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 a11dfd9b4d86..cbb03a43885a 100644
--- a/packages/devextreme-scss/scss/widgets/base/_menu.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_menu.scss
@@ -1,5 +1,11 @@
 @use "./mixins" as *;
 
+// 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;
 }
@@ -14,7 +20,7 @@
 
   .dx-menu-separator {
     display: inline-block;
-    margin-inline-end: 15px;
+    margin-inline-end: $menu-separator-margin-inline-end;
   }
 }
 
@@ -26,7 +32,7 @@
   }
 
   .dx-menu-separator {
-    margin-bottom: 15px;
+    margin-bottom: $menu-separator-margin-bottom;
   }
 }
 
@@ -60,10 +66,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 90ce0ecb4ba6..f0d953a3b3c4 100644
--- a/packages/devextreme-scss/scss/widgets/base/_menuBase.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_menuBase.scss
@@ -1,5 +1,6 @@
 @use "./mixins" as *;
 
+$menubase-expand-arrow-container-width: 2em !default; // dx-relative
 .dx-menu-base {
   @include user-select(none);
 
@@ -64,7 +65,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 5a37174c9974..0443ae87f929 100644
--- a/packages/devextreme-scss/scss/widgets/base/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_mixins.scss
@@ -1,5 +1,3 @@
-@use "sass:math";
-
 // stylelint-disable selector-class-pattern
 
 @mixin dx-clearfix-mixin() {
@@ -123,11 +121,15 @@
   }
 }
 
+/*
+ * Centred the same way dx-pending-indicator-centered below does it: translateY needs no
+ * arithmetic on the size, so the size can be a token without a build-time/runtime fork.
+ */
 @mixin dx-pending-indicator($indicator-size) {
   pointer-events: none;
   position: absolute;
   top: 50%;
-  margin-top: math.div(-$indicator-size, 2);
+  transform: translateY(-50%);
   width: $indicator-size;
   height: $indicator-size;
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/_multiView.scss b/packages/devextreme-scss/scss/widgets/base/_multiView.scss
index 286801aa0075..9633d2c97644 100644
--- a/packages/devextreme-scss/scss/widgets/base/_multiView.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_multiView.scss
@@ -36,8 +36,8 @@
 }
 
 .dx-multiview-item-hidden {
-  top: -9999px;
-  left: -9999px;
+  top: -9999px; // dx-structural: parks the hidden slide off-screen
+  left: -9999px; // dx-structural: parks the hidden slide off-screen
   visibility: hidden;
 
   .dx-accordion-item-opened .dx-accordion-item-body {
diff --git a/packages/devextreme-scss/scss/widgets/base/_numberBox.scss b/packages/devextreme-scss/scss/widgets/base/_numberBox.scss
index e2db3328c299..0b8da34ed531 100644
--- a/packages/devextreme-scss/scss/widgets/base/_numberBox.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_numberBox.scss
@@ -1,5 +1,7 @@
 @use "./mixins" as *;
 
+$numberbox-spin-idle-opacity: 0.2 !default;
+
 $spin-container-width: 22px !default;
 $touch-friendly-spin-container-width: 64px !default;
 
@@ -53,6 +55,8 @@ $touch-friendly-spin-container-width: 64px !default;
 
 .dx-state-disabled {
   .dx-numberbox-spin-container {
-    opacity: 0.2;
+    @if $numberbox-spin-idle-opacity {
+      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 b73aed4bc164..a0dda08d261b 100644
--- a/packages/devextreme-scss/scss/widgets/base/_pagination.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_pagination.scss
@@ -1,14 +1,44 @@
 @use "./mixins" as *;
 
-$pagination-paddings: 8px !default;
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$pagination-page-padding-fallback: 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-fallback: 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-page-size-margin-left: 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;
+
+// Not a knob itself: the shared source of the two fallbacks below, which are.
+$pagination-paddings: 8px; // dx-fixed-size: the shared source of the two fallbacks below
 $pagination-info-paddings: 9px !default;
 
+// The pager's own padding and the nav button's, as fallbacks fluent-next switches off with false.
+$pagination-padding-block-fallback: $pagination-paddings !default;
+$pagination-navigate-button-padding-block-fallback: $pagination-paddings - 1px !default;
+
 .dx-pager,
 .dx-pagination {
   overflow: hidden;
   width: 100%;
-  padding-top: $pagination-paddings;
-  padding-bottom: $pagination-paddings;
+
+  @if $pagination-padding-block-fallback {
+    padding-top: $pagination-padding-block-fallback;
+    padding-bottom: $pagination-padding-block-fallback;
+  }
+
   line-height: normal;
 
   @include user-select(none);
@@ -24,34 +54,51 @@ $pagination-info-paddings: 9px !default;
     .dx-page {
       display: inline-block;
       cursor: pointer;
-      padding: 7px 8px 8px;
-      margin-left: 5px;
-      margin-right: 1px;
+
+      @if $pagination-page-padding-fallback {
+        padding: $pagination-page-padding-fallback;
+      }
+
+      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;
+
+      @if $pagination-info-opacity {
+        opacity: $pagination-info-opacity;
+      }
     }
 
     .dx-navigate-button {
-      width: 10px;
-      height: 20px;
+      @if $pagination-navigate-button-width-fallback {
+        width: $pagination-navigate-button-width-fallback;
+      }
+
+      height: $pagination-navigate-button-height;
       cursor: pointer;
       display: inline-block;
       vertical-align: top;
-      padding: $pagination-paddings - 1px 13px;
+
+      @if $pagination-navigate-button-padding-block-fallback {
+        padding: $pagination-navigate-button-padding-block-fallback $pagination-page-horizontal-padding;
+      }
+
       box-sizing: content-box;
 
       &.dx-button-disable {
-        opacity: 0.3;
+        @if $pagination-nav-disabled-opacity {
+          opacity: $pagination-nav-disabled-opacity;
+        }
+
         cursor: inherit;
       }
     }
@@ -68,17 +115,17 @@ $pagination-info-paddings: 9px !default;
     .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-page-size-margin-left;
+      margin-right: $pagination-page-margin-right;
     }
   }
 
@@ -94,7 +141,7 @@ $pagination-info-paddings: 9px !default;
     display: inline-block;
 
     .dx-page-index {
-      width: 40px;
+      width: $pagination-page-index-width;
     }
 
     .dx-pages-count {
@@ -103,7 +150,7 @@ $pagination-info-paddings: 9px !default;
 
     .dx-info-text,
     .dx-pages-count {
-      padding-left: 6px;
+      padding-left: $pagination-pages-count-padding-left;
     }
 
     .dx-page-index,
@@ -126,7 +173,7 @@ $pagination-info-paddings: 9px !default;
       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 4e3e8b3378b6..0ef8ecef341e 100644
--- a/packages/devextreme-scss/scss/widgets/base/_popup.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_popup.scss
@@ -1,9 +1,21 @@
 @use "sass:selector";
 @use "./mixins" as *;
 
+$popup-dialog-shader-color: #444 !default;
+
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$popup-title-padding: 10px !default;
+$popup-title-min-height-fallback: 19px !default;
+$popup-dialog-message-padding: 10px 10px 5px 10px !default;
+
 .dx-popup-title {
-  padding: 10px;
-  min-height: 19px;
+  padding: $popup-title-padding;
+
+  // fluent-next passes false (not null: !default would treat that as unset): its own rule paints this
+  @if $popup-title-min-height-fallback {
+    min-height: $popup-title-min-height-fallback;
+  }
+
   -webkit-user-drag: none;
 
   @include user-select(none);
@@ -72,7 +84,7 @@
 }
 
 .dx-popup-content {
-  padding: 10px;
+  padding: $popup-title-padding;
   -webkit-user-drag: none;
 
   &.dx-dialog-content {
@@ -98,12 +110,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 91604f6e9cc0..a592d683ee3d 100644
--- a/packages/devextreme-scss/scss/widgets/base/_progressBar.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_progressBar.scss
@@ -1,5 +1,11 @@
 @use "./mixins" as *;
 
+$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 {
@@ -34,11 +40,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 {
@@ -78,7 +84,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/_recurrenceEditor.scss b/packages/devextreme-scss/scss/widgets/base/_recurrenceEditor.scss
index 136bc1ebf27c..7868303a93c2 100644
--- a/packages/devextreme-scss/scss/widgets/base/_recurrenceEditor.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_recurrenceEditor.scss
@@ -1,3 +1,4 @@
+// Design sizing values (parametrizable; fluent-next injects tokens)
 $recurrence-interval-number-box-margin-top: 25px !default;
 $recurrence-radio-group-item-padding: 10px !default;
 $recurrence-button-group-item-padding: 8px !default;
diff --git a/packages/devextreme-scss/scss/widgets/base/_resizable.scss b/packages/devextreme-scss/scss/widgets/base/_resizable.scss
index a7635864fec7..03f52ad0136e 100644
--- a/packages/devextreme-scss/scss/widgets/base/_resizable.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_resizable.scss
@@ -1,6 +1,6 @@
 $handle-offset: 0 !default;
-$one-side-handle-size: 3px + $handle-offset !default;
-$two-side-handle-size: 6px + $handle-offset !default;
+$one-side-handle-size: 3px + $handle-offset; // dx-fixed-size: handle thickness ($handle-offset is 0)
+$two-side-handle-size: 6px + $handle-offset; // dx-fixed-size: handle thickness ($handle-offset is 0)
 
 .dx-resizable {
   display: block;
diff --git a/packages/devextreme-scss/scss/widgets/base/_scrollView.scss b/packages/devextreme-scss/scss/widgets/base/_scrollView.scss
index 920800bdf699..7995ecfe4968 100644
--- a/packages/devextreme-scss/scss/widgets/base/_scrollView.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_scrollView.scss
@@ -1,8 +1,33 @@
+@use "sass:meta";
 @use "./mixins" as *;
 
+// 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-rtl: 0 0 0 10px !default;
+
+$scrollview-pulldown-icon-font-size: 24px !default;
 $pulldown-height: 50px !default;
 $pulldown-padding: 15px !default;
 
+/*
+ * The pull-down area is parked directly above the viewport, so the offset is its own height plus
+ * both paddings, negated. A theme that feeds var() into either leaves Sass nothing to add up, so the
+ * offset is a knob of its own: the theme derives it once instead of the browser recomputing it here.
+ */
+$pulldown-top-offset: if(
+  meta.type-of($pulldown-height) == number and meta.type-of($pulldown-padding) == number,
+  -($pulldown-height + $pulldown-padding * 2),
+  calc(-1 * (#{$pulldown-height} + #{$pulldown-padding} * 2))
+) !default;
+
 .dx-scrollable-native {
   &.dx-scrollable-native-generic {
     .dx-scrollview-top-pocket {
@@ -13,8 +38,8 @@ $pulldown-padding: 15px !default;
 
   &.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;
@@ -26,7 +51,7 @@ $pulldown-padding: 15px !default;
       height: 100%;
       width: 100%;
       left: -50%;
-      margin-left: -20px;
+      margin-left: -20px; // dx-fixed-size: centres the android pull-down on the pocket
       padding: 0;
       border-radius: 50%;
 
@@ -37,7 +62,7 @@ $pulldown-padding: 15px !default;
       .dx-scrollview-pull-down-indicator {
         position: relative;
         top: 0;
-        padding: 4px;
+        padding: $scrollview-pull-down-indicator-padding;
         margin: 0;
         height: 100%;
         width: 100%;
@@ -53,8 +78,8 @@ $pulldown-padding: 15px !default;
     .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;
     }
@@ -106,7 +131,7 @@ $pulldown-padding: 15px !default;
   width: 100%;
   height: $pulldown-height;
   padding: $pulldown-padding 0;
-  top: -($pulldown-height + $pulldown-padding * 2);
+  top: $pulldown-top-offset;
   overflow: hidden;
   transform: translate(0, 0);
   -webkit-user-drag: none;
@@ -125,17 +150,17 @@ $pulldown-padding: 15px !default;
   left: 0;
   top: 50%;
   display: inline-block;
-  margin: -15px 20px 0 15px;
-  width: 20px;
+  margin: -15px 20px 0 15px; // dx-fixed-size: centres the indicator on its own half-height
+  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;
 
@@ -185,7 +210,7 @@ $pulldown-padding: 15px !default;
 
 .dx-scrollview-scrollbottom {
   width: 100%;
-  padding: 10px 0;
+  padding: $scrollview-scrollbottom-padding;
   overflow: hidden;
   text-align: center;
   transform: translate(0, 0);
@@ -200,13 +225,13 @@ $pulldown-padding: 15px !default;
 
 .dx-scrollview-scrollbottom-indicator {
   display: inline-block;
-  margin: 0 10px 0 0;
+  margin: $scrollview-scrollbottom-indicator-margin;
   -webkit-user-drag: none;
 }
 
 .dx-scrollview-scrollbottom-text {
   display: inline-block;
-  margin-top: -20px;
+  margin-top: -20px; // dx-fixed-size: pulls the text onto the indicator's line
   vertical-align: middle;
   -webkit-user-drag: none;
 }
@@ -242,5 +267,5 @@ $pulldown-padding: 15px !default;
 }
 
 .dx-rtl .dx-scrollview-scrollbottom-indicator {
-  margin: 0 0 0 10px;
+  margin: $scrollview-scrollbottom-indicator-margin-rtl;
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/_slider.scss b/packages/devextreme-scss/scss/widgets/base/_slider.scss
index 2f6fe5294ea2..1c5a76524df9 100644
--- a/packages/devextreme-scss/scss/widgets/base/_slider.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_slider.scss
@@ -2,11 +2,16 @@
 @use "./popover/mixins" as *;
 
 $slider-tooltip-content-height: 28px !default;
-$slider-tooltip-arrow-height: 7px !default;
+$slider-tooltip-arrow-height: 7px; // dx-fixed-size: feeds dx-popover-arrow-size, which divides by sqrt(2)
 
+// 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;
@@ -14,11 +19,11 @@ $slider-tooltip-arrow-height: 7px !default;
 }
 
 .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 85a3551bb66b..be0aeef5c6a1 100644
--- a/packages/devextreme-scss/scss/widgets/base/_sortable.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_sortable.scss
@@ -1,8 +1,28 @@
 @use "sass:color";
+@use "sass:meta";
 @use "./mixins" as *;
 
+$sortable-clone-shadow-color-first: rgba(0, 0, 0, 0.1) !default;
+$sortable-clone-shadow-color-second: rgba(0, 0, 0, 0.2) !default;
+
+/*
+ * dx-shadow-geometry: the whole shadow, so a theme can hand over a design-system role instead of
+ * two colours for a geometry frozen here. The default keeps the two-layer lift the older themes
+ * were built on.
+ */
+$sortable-clone-shadow:
+  0 1px 3px $sortable-clone-shadow-color-first,
+  0 6px 8px $sortable-clone-shadow-color-second !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;
 }
@@ -12,7 +32,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 {
@@ -25,7 +45,7 @@ $base-accent: null !default;
 }
 
 .dx-sortable-source {
-  opacity: 0.5;
+  opacity: $sortable-source-opacity;
 }
 
 .dx-sortable-source-hidden {
@@ -36,17 +56,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: $sortable-clone-shadow;
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/_speedDialAction.scss b/packages/devextreme-scss/scss/widgets/base/_speedDialAction.scss
index 54d89276659b..ebf97c71b311 100644
--- a/packages/devextreme-scss/scss/widgets/base/_speedDialAction.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_speedDialAction.scss
@@ -1,6 +1,10 @@
 @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 +25,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 +49,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 +61,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 +70,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 +88,7 @@
         }
 
         .dx-inkripple {
-          border-radius: math.div($main-action-button-size, 2);
+          border-radius: $fa-main-radius;
         }
       }
 
@@ -85,7 +99,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 +113,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 +172,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 +189,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 d4ef6e4c4b44..f56ea447dedf 100644
--- a/packages/devextreme-scss/scss/widgets/base/_splitterBar.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_splitterBar.scss
@@ -1,5 +1,9 @@
 @use "./mixins" as *;
 
+// 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;
@@ -10,12 +14,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/_tagBox.scss b/packages/devextreme-scss/scss/widgets/base/_tagBox.scss
index ab4d70eb717d..37426af9b186 100644
--- a/packages/devextreme-scss/scss/widgets/base/_tagBox.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_tagBox.scss
@@ -12,7 +12,7 @@
         @include hide-input-cursor(); // T278002
 
         min-width: 0;
-        width: 0.1px; // T393423, T437866
+        width: 0.1px; // T393423, T437866 -- dx-structural: a non-zero width the browsers need, not a designed size
         padding-left: 0;
         padding-right: 0;
         margin-left: 0;
@@ -40,7 +40,7 @@
 }
 
 .dx-tag {
-  max-width: calc(100% - 1px);
+  max-width: calc(100% - 1px); // dx-px-nudge: a pixel off the full width so the tag never overflows
   display: inline-flex;
   align-self: flex-start;
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/_tileView.scss b/packages/devextreme-scss/scss/widgets/base/_tileView.scss
index d4270b27b0d1..0be5d8acc629 100644
--- a/packages/devextreme-scss/scss/widgets/base/_tileView.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_tileView.scss
@@ -1,3 +1,6 @@
+// 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
@@ -22,5 +25,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 0c07b73f672d..2c1196231999 100644
--- a/packages/devextreme-scss/scss/widgets/base/_toast.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_toast.scss
@@ -1,17 +1,25 @@
+// 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 {
@@ -36,7 +44,7 @@
 
 .dx-rtl {
   .dx-toast-icon {
-    margin-left: 10px;
+    margin-left: $toast-icon-margin-left;
     margin-right: 0;
   }
 }
@@ -44,7 +52,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 c808a6f38222..230e3f99307d 100644
--- a/packages/devextreme-scss/scss/widgets/base/_tooltip.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_tooltip.scss
@@ -1,7 +1,13 @@
+// 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;
 
@@ -14,8 +20,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/_ui.scss b/packages/devextreme-scss/scss/widgets/base/_ui.scss
index 01861bbd9f96..79113adfd114 100644
--- a/packages/devextreme-scss/scss/widgets/base/_ui.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_ui.scss
@@ -10,8 +10,8 @@
 
 .dx-hidden-input {
   position: fixed;
-  top: -10px;
-  left: -10px;
+  top: -10px; // dx-structural: parks the hidden input off-screen
+  left: -10px; // dx-structural: parks the hidden input off-screen
   width: 0;
   height: 0;
 }
@@ -38,8 +38,8 @@
 
 .dx-screen-reader-only {
   position: absolute;
-  height: 1px;
-  width: 1px;
+  height: 1px; // dx-structural: the screen-reader-only clipping box, not a designed size
+  width: 1px; // dx-structural: the screen-reader-only clipping box, not a designed size
   overflow: hidden;
   white-space: nowrap;
   clip: rect(0 0 0 0);
@@ -223,7 +223,7 @@
 .dx-android-pop-animation {
   &.dx-enter.dx-forward,
   &.dx-leave.dx-leave-active.dx-backward {
-    transform: translate3d(0, 150px, 0);
+    transform: translate3d(0, 150px, 0); // dx-fixed-size: how far the android pop animation travels
     opacity: 0;
   }
 
@@ -345,7 +345,7 @@
 .dx-3d-drop-animation {
   &.dx-enter,
   &.dx-leave.dx-leave-active {
-    transform: rotate3d(1, 0, 0, 10deg) translate3d(0, -10px, 0) scale3d(1.1, 1.1, 1.1);
+    transform: rotate3d(1, 0, 0, 10deg) translate3d(0, -10px, 0) scale3d(1.1, 1.1, 1.1); // dx-fixed-size: how far the 3d drop animation travels
     opacity: 0;
   }
 
@@ -359,7 +359,7 @@
 .dx-fade-drop-animation {
   &.dx-enter,
   &.dx-leave.dx-leave-active {
-    transform: translate3d(0, -10px, 0) scale3d(1.1, 1.1, 1.1);
+    transform: translate3d(0, -10px, 0) scale3d(1.1, 1.1, 1.1); // dx-fixed-size: how far the fade drop animation travels
     opacity: 0;
   }
 
@@ -373,7 +373,7 @@
 .dx-fade-rise-animation {
   &.dx-enter,
   &.dx-leave.dx-leave-active {
-    transform: translate3d(0, 10px, 0) scale3d(1.1, 1.1, 1.1);
+    transform: translate3d(0, 10px, 0) scale3d(1.1, 1.1, 1.1); // dx-fixed-size: how far the fade rise animation travels
     opacity: 0;
   }
 
diff --git a/packages/devextreme-scss/scss/widgets/base/_validation.scss b/packages/devextreme-scss/scss/widgets/base/_validation.scss
index 14a4c5cdb0a9..abaaa03d78e8 100644
--- a/packages/devextreme-scss/scss/widgets/base/_validation.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_validation.scss
@@ -1,3 +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
+$validation-summary-item-border-bottom-width: 1px !default;
+
 @mixin dx-base-validation($summary-color, $message-color, $message-bg-color, $border-radius) {
   .dx-validationsummary-item {
     color: $summary-color;
@@ -38,7 +45,7 @@
   }
 
   .dx-form-validation-summary {
-    margin-top: 20px;
+    margin-top: $validation-summary-margin-top;
   }
 }
 
@@ -60,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;
   }
@@ -76,7 +83,7 @@
 }
 
 .dx-validationsummary-item-content {
-  border-bottom: 1px dashed;
+  border-bottom: $validation-summary-item-border-bottom-width dashed;
   display: inline-block;
   line-height: normal;
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/buttonGroup/_index.scss b/packages/devextreme-scss/scss/widgets/base/buttonGroup/_index.scss
index a37fb6e1add9..cafcb1c7243e 100644
--- a/packages/devextreme-scss/scss/widgets/base/buttonGroup/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/buttonGroup/_index.scss
@@ -1,5 +1,8 @@
 @use "../mixins" as *;
 
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$buttongroup-mode-text-column-gap: 1px !default;
+
 .dx-buttongroup {
   display: inline-block;
 }
@@ -11,7 +14,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 7174d09e7497..22da41bc377b 100644
--- a/packages/devextreme-scss/scss/widgets/base/calendar/_calendar.scss
+++ b/packages/devextreme-scss/scss/widgets/base/calendar/_calendar.scss
@@ -1,5 +1,13 @@
 @use "../mixins" as *;
 
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$calendar-border-width: 1px !default;
+$calendar-multiview-table-padding: 0 10px !default;
+
+$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);
 
@@ -8,7 +16,7 @@
   direction: ltr;
   flex-direction: column;
   justify-content: space-between;
-  border: 1px solid transparent;
+  border: $calendar-border-width solid transparent;
 
   &.dx-rtl {
     direction: rtl;
@@ -68,8 +76,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();
   }
@@ -88,7 +96,7 @@
     align-items: center;
     justify-content: center;
     text-align: center;
-    width: 2em;
+    width: $calendar-week-number-cell-width;
     inset: 0;
   }
 }
@@ -131,7 +139,7 @@
     }
 
     table {
-      padding: 0 10px;
+      padding: $calendar-multiview-table-padding;
     }
   }
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/calendar/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/calendar/_mixins.scss
index 76cd504fcd1c..a66e4c58f459 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 {
@@ -128,6 +129,10 @@
   $calendar-cell-other-hover-color,
   $calendar-cell-hover-border-color,
   $calendar-cell-range-border-radius,
+  // Today is outlined and the contoured (keyboard-focused) date carries a ring; both are drawn at
+  // the same thickness, but they are separate decisions, so they are separate knobs.
+  $cell-today-border-width: 2px,
+  $cell-contoured-ring-width: 2px,
 ) {
   .dx-calendar-cell {
     color: $cell-text-color;
@@ -152,7 +157,7 @@
 
     &.dx-calendar-today {
       span {
-        border: 2px solid;
+        border: $cell-today-border-width solid;
         border-color: $base-accent;
       }
     }
@@ -179,7 +184,7 @@
 
     &.dx-calendar-contoured-date {
       span {
-        box-shadow: 0 0 0 2px $cell-contoured-border-color;
+        box-shadow: 0 0 0 $cell-contoured-ring-width $cell-contoured-border-color;
       }
     }
 
@@ -239,7 +244,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/content_view/content/card/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/_index.scss
index f3e094c5aff3..1fdee364b285 100644
--- a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/_index.scss
@@ -19,9 +19,9 @@
   }
 
   &:focus-visible {
-    outline: 2px solid;
+    outline: 2px solid; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with
     outline-color: $cardview-card--focused-outline-color;
-    outline-offset: -2px;
+    outline-offset: -2px; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with
   }
 }
 
diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/header/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/header/_index.scss
index ae28a7e5f713..70216956dd1e 100644
--- a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/header/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/header/_index.scss
@@ -7,7 +7,7 @@
   height: $cardview-card__header-height;
 
   .dx-toolbar {
-    padding: 0 12px;
+    padding: 0 12px; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with
     border-radius: $cardview-card-border-radius $cardview-card-border-radius 0 0;
     background-color: transparent;
 
@@ -39,8 +39,8 @@
 
   .dx-toolbar-item-content::before {
     content: "";
-    width: 20px;
-    height: 20px;
+    width: 20px; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with
+    height: 20px; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with
     display: inline-block;
     pointer-events: none;
   }
diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/no_data/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/no_data/_index.scss
index 945055c5aaab..8fdc113f1420 100644
--- a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/no_data/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/no_data/_index.scss
@@ -7,7 +7,7 @@
   align-items: center;
   justify-content: center;
   background-color: $cardview-nodata-view__icon-bg-color;
-  border-radius: 999px;
+  border-radius: 999px; // dx-fixed-size: a pill radius; the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with
   margin: $cardview-nodata-view__icon-container-margin;
 
   .dx-icon {
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 f03e72471f49..83db04979e65 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,3 +1,4 @@
+@use "sass:meta";
 @use "./item";
 @use "./variables" as *;
 
@@ -6,7 +7,7 @@
   2px maximal right header item padding + 4px maximal dxSortable placeholder (drop indicator) width
   We can increase this number up to the CardView root padding without issues
 */
-$sortable-side-offset: 6px !default;
+$sortable-side-offset: 6px; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with
 
 .dx-cardview-header-item-sorting {
   display: flex;
@@ -46,7 +47,7 @@ $sortable-side-offset: 6px !default;
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 4px;
+    gap: 4px; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with
 
     .dx-icon {
       color: $cardview-header-panel__dropzone__icon-color;
@@ -75,7 +76,7 @@ $sortable-side-offset: 6px !default;
     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/cardView/header_panel/item/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_index.scss
index 6e341df7730b..190ac09490a8 100644
--- a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_index.scss
@@ -6,7 +6,7 @@
   align-items: center;
   padding: $cardview-header-panel__item-padding-vertical $cardview-header-panel__item-padding-horizontal;
   user-select: none;
-  gap: 4px;
+  gap: 4px; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with
   border: solid $cardview-header-panel__item-border-width;
   border-radius: $cardview-header-panel__item-border-radius;
   line-height: $cardview-header-panel__item-line-height;
@@ -52,9 +52,9 @@
   }
 
   &:focus-visible {
-    outline: 2px solid;
+    outline: 2px solid; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with
     outline-color: $cardview-header-panel__item--focused-outline-color;
-    outline-offset: -2px;
+    outline-offset: -2px; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with
   }
 
   &.dx-sortable-source {
@@ -83,9 +83,16 @@
     border-color: $cardview-header-panel__item--dragged-border-color;
     color: $cardview-header-panel__item--dragged-text-color;
     font-weight: $cardview-header-panel__item--dragged-text-weight;
-    box-shadow:
-      0 1px 3px $cardview-header-panel__item--dragged-box-shadow-color,
-      0 6px 8px $cardview-header-panel__item--dragged-box-shadow-color;
+
+    // dx-shadow-geometry: the two-layer lift older themes were built on, for a theme passing none
+    box-shadow: if(
+      $cardview-header-panel__item--dragged-box-shadow,
+      $cardview-header-panel__item--dragged-box-shadow,
+      (
+        0 1px 3px $cardview-header-panel__item--dragged-box-shadow-color,
+        0 6px 8px $cardview-header-panel__item--dragged-box-shadow-color
+      )
+    );
 
     .dx-icon {
       color: $cardview-header-panel__item--dragged__allowance-icon-color;
diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_variables.scss b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_variables.scss
index ededf0c36a7a..717f9cf41795 100644
--- a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_variables.scss
+++ b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_variables.scss
@@ -41,3 +41,11 @@ $cardview-header-panel__item--dragged-text-weight: null !default;
 $cardview-header-panel__item--dragged__allowance-icon-color: null !default;
 $cardview-header-panel__item--dragged__prohibition-icon-color: null !default;
 $cardview-header-panel__item--dragged-box-shadow-color: null !default;
+
+/*
+ * The whole shadow, for a theme that hands over a design-system role instead of a colour for the
+ * geometry frozen below. Left null so the fallback composes at use time: this file is evaluated
+ * before a theme assigns anything, so a composed default here would freeze the colour as null and
+ * make the theme's own !default a no-op.
+ */
+$cardview-header-panel__item--dragged-box-shadow: null !default;
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/_index.scss
index a937dbfbf9bb..55b2bcb3f3f6 100644
--- a/packages/devextreme-scss/scss/widgets/base/chat/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/chat/_index.scss
@@ -1,11 +1,35 @@
+$chat-disabled-opacity: 0.5 !default;
+$chat-file-name-font-weight: 600 !default;
+$chat-editing-preview-caption-font-weight: 500 !default;
+
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$chat-messagebox-border-block-start-width: 1px !default;
+$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;
+
 @use "../mixins" as *;
-@use "layout/chat" as *;
+@use "layout/chat" as * with (
+  $disabled-opacity: $chat-disabled-opacity,
+);
 @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-messagebubble" as *;
+@use "layout/chat-messagebox" as * with (
+  $messagebox-border-block-start-width: $chat-messagebox-border-block-start-width,
+);
+@use "layout/chat-messagebox-editing-preview" as * with (
+  $editing-preview-caption-font-weight: $chat-editing-preview-caption-font-weight,
+);
+@use "layout/chat-messagebubble" as * with (
+  $messagebubble-padding-image: $chat-messagebubble-padding-image,
+  $messagebubble-border-radius-image: $chat-messagebubble-border-radius-image,
+  $messagebubble-max-width-image: $chat-messagebubble-max-width-image,
+  $messagebubble-max-height-image: $chat-messagebubble-max-height-image,
+);
 @use "layout/chat-confirmationpopup" as *;
 @use "layout/chat-messagegroup" as *;
 @use "layout/chat-messagelist" 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 b836460cb3be..224304b6de11 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 261b766cfb84..82cc6d97dc36 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-messagebox/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_index.scss
index 020268c74563..405555977963 100644
--- a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_index.scss
@@ -1,7 +1,10 @@
+// Sized from base/chat, which owns the default and forwards a theme's value down (as chat-fileview does).
+$messagebox-border-block-start-width: null !default;
+
 .dx-chat-messagebox {
   display: flex;
   flex-direction: column;
-  border-top-width: 1px;
+  border-top-width: $messagebox-border-block-start-width;
   border-top-style: solid;
 }
 
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..32e1b22f1c97 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
@@ -1,7 +1,9 @@
-$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;
+// Sized from base/chat, which owns the defaults and forwards a theme's values down (as chat-fileview does).
+$messagebubble-padding-image: null !default;
+$messagebubble-border-radius-image: null !default;
+$messagebubble-max-width-image: null !default;
+$messagebubble-max-height-image: null !default;
+$chat-messagebubble-content-max-width: 82.5% !default; // dx-relative-%
 
 .dx-chat-messagegroup-content {
   display: flex;
@@ -24,7 +26,7 @@ $chat-messagebubble-max-height-image: 400px !default;
   }
 
   &.dx-has-image {
-    padding: $chat-messagebubble-padding-image;
+    padding: $messagebubble-padding-image;
   }
 
   .dx-chat-messagebubble-content:empty {
@@ -47,7 +49,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 {
@@ -57,9 +59,9 @@ $chat-messagebubble-max-height-image: 400px !default;
 }
 
 .dx-chat-messagebubble-image {
-  border-radius: $chat-messagebubble-border-radius-image;
-  max-width: $chat-messagebubble-max-width-image;
-  max-height: $chat-messagebubble-max-height-image;
+  border-radius: $messagebubble-border-radius-image;
+  max-width: $messagebubble-max-width-image;
+  max-height: $messagebubble-max-height-image;
   width: 100%;
   display: block;
 }
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/chat/layout/chat/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat/_index.scss
index f5856d5dbfee..a88c7cd5d0f0 100644
--- a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat/_index.scss
@@ -1,3 +1,5 @@
+$disabled-opacity: 0.5 !default;
+
 .dx-chat {
   display: flex;
   flex-direction: column;
@@ -8,7 +10,9 @@
   overflow-y: auto;
 
   &.dx-state-disabled {
-    opacity: 0.5;
+    @if $disabled-opacity {
+      opacity: $disabled-opacity;
+    }
   }
 }
 
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat/_mixins.scss
index bc3fc147187e..0120d523ae63 100644
--- a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat/_mixins.scss
@@ -1,11 +1,12 @@
 @mixin chat(
   $background-color,
   $border-color,
-  $border-radius
+  $border-radius,
+  $border-width: 1px,
 ) {
   .dx-chat {
     background-color: $background-color;
-    border: 1px solid;
+    border: $border-width solid;
     border-color: $border-color;
     border-radius: $border-radius;
   }
diff --git a/packages/devextreme-scss/scss/widgets/base/checkBox/_index.scss b/packages/devextreme-scss/scss/widgets/base/checkBox/_index.scss
index 6db158b49da9..571a29024142 100644
--- a/packages/devextreme-scss/scss/widgets/base/checkBox/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/checkBox/_index.scss
@@ -1,6 +1,9 @@
 @use "../mixins" as *;
 @use "./mixins" as *;
 
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$checkbox-text-padding-inline-start: 5px !default;
+
 .dx-checkbox {
   display: inline-block;
   cursor: pointer;
@@ -38,7 +41,11 @@
   white-space: pre-wrap;
   word-wrap: break-word;
   line-height: normal;
-  padding-inline-start: 5px;
+
+  // fluent-next passes false (not null: !default would treat that as unset): its own rule paints this
+  @if $checkbox-text-padding-inline-start {
+    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 4174f1803d22..d0a2b42e0a3c 100644
--- a/packages/devextreme-scss/scss/widgets/base/colorBox/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/colorBox/_index.scss
@@ -4,6 +4,14 @@
 
 $colorbox-input-left-padding: 40px !default;
 
+// 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: 20px !default;
+$colorbox-toolbar-item-padding-right: 10px !default;
+
 .dx-colorbox-input-container {
   &.dx-colorbox-color-is-not-defined {
     .dx-colorbox-color-result-preview {
@@ -12,22 +20,26 @@ $colorbox-input-left-padding: 40px !default;
   }
 
   .dx-placeholder {
-    max-width: calc(100% - 25px);
+    max-width: calc(100% - 25px); // dx-fixed-size: room the colour preview and its gap take from the placeholder
   }
 }
 
 .dx-colorbox {
   .dx-texteditor-input-container {
+    /*
+     * The preview is centred on the input with translateY, the same way dx-pending-indicator does
+     * it: no arithmetic on the height, so the size can be a token without a build-time/runtime fork.
+     */
     &::before {
       content: "";
       display: block;
       position: absolute;
       top: 50%;
       z-index: 1;
-      width: 15px;
-      height: 15px;
-      margin-top: -7.5px;
-      inset-inline-start: 14px;
+      width: $colorbox-texteditor-input-container-width;
+      height: $colorbox-texteditor-input-container-height;
+      transform: translateY(-50%);
+      inset-inline-start: $colorbox-texteditor-input-container-inset-inline-start;
     }
   }
 
@@ -47,7 +59,7 @@ $colorbox-input-left-padding: 40px !default;
 }
 
 .dx-colorbox-overlay {
-  padding: 20px;
+  padding: $colorbox-overlay-padding;
 
   .dx-popup-content {
     overflow: hidden;
@@ -56,7 +68,7 @@ $colorbox-input-left-padding: 40px !default;
 
   .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/colorView/_index.scss b/packages/devextreme-scss/scss/widgets/base/colorView/_index.scss
index 9eb36c7c7061..08b624b7c753 100644
--- a/packages/devextreme-scss/scss/widgets/base/colorView/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/colorView/_index.scss
@@ -3,15 +3,39 @@
 $color-view-container-width: 450px !default;
 $color-view-palette-width: 288px !default;
 $color-view-palette-height: 299px !default;
-$color-view-alpha-width: 292px !default;
+$color-view-alpha-cell-width: 292px !default;
 $color-view-hue-scale-width: 18px !default;
 $color-view-hue-scale-height: $color-view-palette-height !default;
-
-$colorview-palette-handle-size: 28px !default;
-$colorview-transparent-background-color: #ccc !default;
-
-$colorview-handle-first-side-size: 36px !default;
-$colorview-handle-second-side-size: 17px !default;
+$color-view-hue-scale-wrapper-height: $color-view-hue-scale-height + 2 !default;
+
+/*
+ * The handle is a drawing, not a box: its size is interlocked with the ring radii of the
+ * radial-gradient and the inset shadows in _mixins.scss. Changing one without redrawing the
+ * others breaks the handle, so these stay fixed rather than becoming knobs.
+ */
+$colorview-palette-handle-size: 28px; // dx-fixed-size: diameter of the round palette handle, drawn as rings at 6/7/12/13px
+$colorview-transparent-background-color: #ccc;
+
+$colorview-handle-first-side-size: 36px; // dx-fixed-size: long side of the scale handles, drawn by the inset shadows
+$colorview-handle-second-side-size: 17px; // dx-fixed-size: short side of the scale handles, drawn by the inset shadows
+
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$color-view-label-hex-margin: 10px 0 0 0 !default;
+$color-view-alpha-label-margin-inline-start: 43px !default;
+$color-view-alpha-label-margin-inline-start-rtl: 41px !default;
+$color-view-alpha-label-width: 115px !default;
+$color-view-textbox-width: 69px !default;
+$color-view-textbox-margin: 1px 1px 10px 0 !default;
+$color-view-alpha-row-margin-block-start: 10px !default;
+$color-view-hue-scale-cell-margin-inline-start: 19px !default;
+$color-view-controls-width: 90px !default;
+$color-view-controls-margin-inline-start: 27px !default;
+$color-view-controls-margin-inline-start-rtl: 25px !default;
+$color-view-color-preview-width: 86px !default;
+$color-view-color-preview-height: 40px !default;
+$color-view-alpha-scale-height: 20px !default;
+$color-view-alpha-cell-margin-block: 6px !default;
+$color-view-apply-button-margin-inline-end: 10px !default;
 
 .dx-colorview-container {
   width: $color-view-container-width;
@@ -24,18 +48,18 @@ $colorview-handle-second-side-size: 17px !default;
     white-space: normal;
 
     &.dx-colorview-label-hex {
-      margin: 10px 0 0 0;
+      margin: $color-view-label-hex-margin;
     }
 
     &.dx-colorview-alpha-channel-label {
-      margin-left: 43px;
-      width: 115px;
+      margin-left: $color-view-alpha-label-margin-inline-start;
+      width: $color-view-alpha-label-width;
     }
 
     .dx-texteditor {
-      width: 69px;
+      width: $color-view-textbox-width;
       float: right;
-      margin: 1px 1px 10px 0;
+      margin: $color-view-textbox-margin;
     }
   }
 
@@ -44,7 +68,7 @@ $colorview-handle-second-side-size: 17px !default;
     margin-bottom: 0;
 
     &.dx-colorview-apply-button {
-      margin-right: 10px;
+      margin-right: $color-view-apply-button-margin-inline-end;
       margin-left: 0;
     }
 
@@ -57,14 +81,14 @@ $colorview-handle-second-side-size: 17px !default;
 
 .dx-colorview-container-row {
   overflow: hidden;
-  padding: 1px 0;
+  padding: 1px 0; // dx-line-width: room for the 1px hairline ring the cells inside carry, which overflow: hidden would clip
 
   &:first-child {
     margin-top: 0;
   }
 
   &.dx-colorview-alpha-channel-row {
-    margin-top: 10px;
+    margin-top: $color-view-alpha-row-margin-block-start;
   }
 }
 
@@ -93,13 +117,13 @@ $colorview-handle-second-side-size: 17px !default;
   width: $colorview-handle-first-side-size;
   height: $colorview-handle-second-side-size;
   top: 0;
-  left: -7px;
+  left: -7px; // dx-px-nudge: centres the handle across the hue scale, counting its own border
 }
 
 .dx-colorview-alpha-channel-handle {
   width: $colorview-handle-second-side-size;
   height: $colorview-handle-first-side-size;
-  top: -6px;
+  top: -6px; // dx-px-nudge: centres the handle across the alpha scale, counting its own border
   left: 0;
 }
 
@@ -117,12 +141,12 @@ $colorview-handle-second-side-size: 17px !default;
 .dx-colorview-alpha-channel-wrapper,
 .dx-colorbox-input-container::after {
   background-image: linear-gradient(45deg, $colorview-transparent-background-color 25%, transparent 25%, transparent 74%, $colorview-transparent-background-color 75%, $colorview-transparent-background-color), linear-gradient(45deg, $colorview-transparent-background-color 25%, transparent 25%, transparent 74%, $colorview-transparent-background-color 75%, $colorview-transparent-background-color);
-  background-size: 16px 16px;
-  background-position: 0 0, 8px 8px;
+  background-size: 16px 16px; // dx-fixed-size: tile of the transparency checkerboard, drawn by two offset gradients
+  background-position: 0 0, 8px 8px; // dx-fixed-size: half the tile, which is what makes the two gradients read as a checkerboard
 }
 
 .dx-colorview-alpha-channel-wrapper {
-  background-position: 0 6px, 8px 14px;
+  background-position: 0 6px, 8px 14px; // dx-fixed-size: the same checkerboard, shifted to sit inside the alpha scale
 }
 
 .dx-colorbox-input-container {
@@ -159,37 +183,37 @@ $colorview-handle-second-side-size: 17px !default;
 
 .dx-colorview-alpha-channel-scale {
   width: $color-view-palette-width;
-  height: 20px;
+  height: $color-view-alpha-scale-height;
   position: relative;
 }
 
 .dx-colorview-hue-scale-cell {
-  margin-left: 19px;
+  margin-left: $color-view-hue-scale-cell-margin-inline-start;
   position: relative;
 }
 
 .dx-colorview-hue-scale-wrapper {
-  height: $color-view-hue-scale-height + 2;
+  height: $color-view-hue-scale-wrapper-height;
 }
 
 .dx-colorview-controls-container {
   position: relative;
-  width: 90px;
-  margin-left: 27px;
+  width: $color-view-controls-width;
+  margin-left: $color-view-controls-margin-inline-start;
 }
 
 .dx-colorview-color-preview {
-  width: 86px;
-  height: 40px;
+  width: $color-view-color-preview-width;
+  height: $color-view-color-preview-height;
 }
 
 .dx-colorview-alpha-channel-cell {
-  margin: 6px 0;
+  margin: $color-view-alpha-cell-margin-block 0;
   position: relative;
-  width: $color-view-alpha-width;
+  width: $color-view-alpha-cell-width;
 
   .dx-button {
-    width: 90px;
+    width: $color-view-controls-width;
   }
 }
 
@@ -201,14 +225,14 @@ $colorview-handle-second-side-size: 17px !default;
   }
 
   .dx-colorview-hue-scale-cell {
-    margin-right: 19px;
+    margin-right: $color-view-hue-scale-cell-margin-inline-start;
     margin-left: 0;
   }
 
   .dx-colorview-container {
     label {
       &.dx-colorview-alpha-channel-label {
-        margin-right: 41px;
+        margin-right: $color-view-alpha-label-margin-inline-start-rtl;
         margin-left: 0;
       }
 
@@ -219,7 +243,7 @@ $colorview-handle-second-side-size: 17px !default;
   }
 
   .dx-colorview-controls-container {
-    margin-right: 25px;
+    margin-right: $color-view-controls-margin-inline-start-rtl;
     margin-left: 0;
   }
 
diff --git a/packages/devextreme-scss/scss/widgets/base/colorView/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/colorView/_mixins.scss
index 3c01a4e7d145..632c56c5c286 100644
--- a/packages/devextreme-scss/scss/widgets/base/colorView/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/base/colorView/_mixins.scss
@@ -1,18 +1,18 @@
 @mixin dx-base-colorview-styles($handle-color, $handle-border-color) {
   .dx-colorview-palette-handle {
-    background: radial-gradient(transparent 5px, $handle-border-color 6px, $handle-color 7px, $handle-color 12px, $handle-border-color 13px);
-    box-shadow: 0 1px 1px 0 $handle-border-color;
+    background: radial-gradient(transparent 5px, $handle-border-color 6px, $handle-color 7px, $handle-color 12px, $handle-border-color 13px); // dx-fixed-size: the handle is drawn, not laid out — a transparent core to 5px, a 1px ring at 6px, fill to 12px and a 1px ring at 13px, inside the 28px diameter
+    box-shadow: 0 1px 1px 0 $handle-border-color; // dx-shadow-geometry: lifts the round handle off the palette
   }
 
   .dx-colorview-hue-scale-handle {
-    border: 1px solid;
+    border: 1px solid; // dx-line-width: hairline outline of the handle
     border-color: $handle-border-color;
-    box-shadow: inset -5px 0 0 3px $handle-color, inset 5px 0 0 3px $handle-color, inset -6px 0 1px 4px $handle-border-color, inset 6px 0 1px 4px $handle-border-color;
+    box-shadow: inset -5px 0 0 3px $handle-color, inset 5px 0 0 3px $handle-color, inset -6px 0 1px 4px $handle-border-color, inset 6px 0 1px 4px $handle-border-color; // dx-shadow-geometry: the grip is drawn entirely with inset shadows — 5px bars inset from both sides, each edged by a 1px ring at 6px
   }
 
   .dx-colorview-alpha-channel-handle {
-    border: 1px solid;
+    border: 1px solid; // dx-line-width: hairline outline of the handle
     border-color: $handle-border-color;
-    box-shadow: inset 0 -5px 0 3px $handle-color, inset 0 5px 0 3px $handle-color, inset 0 -6px 1px 4px $handle-border-color, inset 0 6px 1px 4px $handle-border-color;
+    box-shadow: inset 0 -5px 0 3px $handle-color, inset 0 5px 0 3px $handle-color, inset 0 -6px 1px 4px $handle-border-color, inset 0 6px 1px 4px $handle-border-color; // dx-shadow-geometry: the same grip turned 90deg for the horizontal scale
   }
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/dataGrid/_common.scss b/packages/devextreme-scss/scss/widgets/base/dataGrid/_common.scss
index 2b7f7ec3e2b8..7588dbd0168a 100644
--- a/packages/devextreme-scss/scss/widgets/base/dataGrid/_common.scss
+++ b/packages/devextreme-scss/scss/widgets/base/dataGrid/_common.scss
@@ -1,6 +1,17 @@
 @use "../mixins" as *;
 @use "../gridBase" as *;
-@include grid-base(datagrid);
+
+$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;
+
+$datagrid-draggable-column-opacity: 0.5 !default;
+$datagrid-column-chooser-item-opacity: 0.5 !default;
+
+@include grid-base(datagrid, $datagrid-draggable-column-opacity, $datagrid-column-chooser-item-opacity);
 
 .dx-datagrid {
   position: relative;
@@ -10,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;
   }
 }
 
@@ -35,7 +46,7 @@
 
   .dx-block-separator {
     position: relative;
-    border-radius: 3px;
+    border-radius: $datagrid-common-form-buttons-border-radius;
   }
 }
 
@@ -75,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 021aaec45db5..f405e2c4a3f1 100644
--- a/packages/devextreme-scss/scss/widgets/base/dataGrid/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/dataGrid/_index.scss
@@ -10,11 +10,36 @@ $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-text-stub-mask-image: null !default;
+$datagrid-text-stub-bg: 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;
+
+$datagrid-draggable-column-opacity: 0.5 !default;
+$datagrid-column-chooser-item-opacity: 0.5 !default;
+
+@use "./common" with (
+  $datagrid-draggable-column-opacity: $datagrid-draggable-column-opacity,
+  $datagrid-column-chooser-item-opacity: $datagrid-column-chooser-item-opacity,
+  $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 +47,20 @@ $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 +148,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;
+        outline-offset: -2px; // dx-fixed-size: the gridBase tier already paints this across the family; a widget-scoped name would collide under the other grid roots
       }
 
       .dx-header-filter:focus {
-        outline-offset: 2px;
+        outline-offset: $datagrid-header-filter-outline-offset;
       }
     }
   }
@@ -129,9 +166,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;
       }
     }
   }
@@ -149,7 +186,7 @@ $datagrid-text-stub-background-image-path: null !default;
 
   &.dx-filter-menu {
     .dx-menu-item-content .dx-icon {
-      @include dx-icon-sizing(14px);
+      @include dx-icon-sizing(14px); // dx-fixed-size: the gridBase tier already paints this across the family; a widget-scoped name would collide under the other grid roots
     }
   }
 
@@ -163,9 +200,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 {
@@ -184,8 +221,20 @@ $datagrid-text-stub-background-image-path: null !default;
         display: block;
         height: 100%;
         content: "";
-        background-image: $datagrid-text-stub-background-image-path;
-        background-repeat: no-repeat repeat;
+
+        /*
+         * A background image cannot read a colour role, so the placeholder's tint is frozen in
+         * the raster. `$…-mask-image` swaps the same artwork in as a mask, which carries only
+         * its alpha, so the colour and its opacity come from the theme instead.
+         */
+        @if $datagrid-text-stub-mask-image {
+          mask-image: $datagrid-text-stub-mask-image;
+          mask-repeat: no-repeat repeat;
+          background-color: $datagrid-text-stub-bg;
+        } @else {
+          background-image: $datagrid-text-stub-background-image-path;
+          background-repeat: no-repeat repeat;
+        }
       }
 
       &[style*="text-align: right"]::before {
@@ -248,9 +297,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 +308,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;
   }
 }
 
@@ -268,14 +317,14 @@ $datagrid-text-stub-background-image-path: null !default;
   cursor: pointer;
 
   @include dx-icon(more);
-  @include dx-icon-sizing(21px);
+  @include dx-icon-sizing(21px); // dx-fixed-size: the gridBase tier already paints this across the family; a widget-scoped name would collide under the other grid roots
 }
 
 .dx-datagrid-edit-popup .dx-error-message {
   @include dx-datagrid-error-message();
 
   color: $datagrid-row-error-color;
-  margin-bottom: 20px;
+  margin-bottom: $datagrid-error-message-margin-bottom;
 }
 
 .dx-rtl {
@@ -298,7 +347,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 +358,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,9 +379,9 @@ $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;
+    outline-offset: -1px; // dx-px-nudge: a one-pixel inset for the sticky-column overlay
     z-index: 4; // should overlap sticky column cells
     pointer-events: none;
     background-color: transparent;
@@ -340,6 +389,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..ff5edc87dff5 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,9 +278,9 @@ $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;
+  outline-offset: -2px; // dx-fixed-size: the gridBase tier already paints this across the family; a widget-scoped name would collide under the other grid roots
 }
 
 // #endregion
diff --git a/packages/devextreme-scss/scss/widgets/base/diagram/_index.scss b/packages/devextreme-scss/scss/widgets/base/diagram/_index.scss
index 3b10c750588e..cb65c96f97d2 100644
--- a/packages/devextreme-scss/scss/widgets/base/diagram/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/diagram/_index.scss
@@ -1,16 +1,35 @@
+@use "sass:math";
+@use "sass:meta";
 @use "../mixins" as *;
 
-$transparent-border: 1px solid transparent !default;
-
+// 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;
+
+$diagram-border-width: 1px !default;
+$transparent-border: $diagram-border-width solid transparent !default;
+
+$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 {
@@ -58,7 +77,7 @@ $transparent-border: 1px solid transparent !default;
 
   .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),
@@ -85,13 +104,13 @@ $transparent-border: 1px solid transparent !default;
     .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 {
@@ -156,7 +175,7 @@ $transparent-border: 1px solid transparent !default;
   }
 
   &.dx-diagram-mobile-popup {
-    width: calc(100% - 2px) !important; // stylelint-disable-line declaration-no-important
+    width: calc(100% - 2px) !important; // stylelint-disable-line declaration-no-important -- dx-px-nudge: 2px shaved off a full-width popup
 
     .dx-popup-title {
       border: 0;
@@ -266,7 +285,7 @@ $transparent-border: 1px solid transparent !default;
       bottom: 0 !important; // stylelint-disable-line declaration-no-important
 
       .dx-popup-content {
-        padding: 8px;
+        padding: $diagram-popup-content-padding;
       }
 
       .dx-colorview-container {
@@ -280,16 +299,16 @@ $transparent-border: 1px solid transparent !default;
 
             .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;
           }
         }
       }
@@ -305,10 +324,13 @@ $transparent-border: 1px solid transparent !default;
 
 .dx-diagram-loading-indicator {
   position: absolute;
-  top: calc(50% - 32px);
-  left: calc(50% - 32px);
-  width: 64px;
-  height: 64px;
+  top: 50%;
+  left: 50%;
+
+  // centred with translate, so neither side has to be halved at build time
+  transform: translate(-50%, -50%);
+  width: $diagram-loading-indicator-width;
+  height: $diagram-loading-indicator-height;
 }
 
 .dx-diagram-touchbar-overlay,
@@ -351,10 +373,10 @@ $transparent-border: 1px solid transparent !default;
 }
 
 .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 aa23ac0744f2..77eaba05156a 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/dropDownButton/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/dropDownButton/_mixins.scss
index c5386d732acb..846174c0330a 100644
--- a/packages/devextreme-scss/scss/widgets/base/dropDownButton/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/base/dropDownButton/_mixins.scss
@@ -1,6 +1,7 @@
 @mixin dx-dropdownbutton(
   $dropdownbutton-icon-spindown-size,
   $dropdownbutton-action-horizontal-padding,
+  $dropdownbutton-icon-right-margin-inline-start: 4px,
 ) {
   .dx-dropdownbutton-toggle {
     .dx-icon-spindown {
@@ -19,7 +20,7 @@
     &.dx-button-has-icon,
     &.dx-button-has-text {
       .dx-icon.dx-icon-right {
-        margin-inline-start: 4px;
+        margin-inline-start: $dropdownbutton-icon-right-margin-inline-start;
         margin-inline-end: 0;
       }
     }
diff --git a/packages/devextreme-scss/scss/widgets/base/dropDownEditor/_index.scss b/packages/devextreme-scss/scss/widgets/base/dropDownEditor/_index.scss
index 610b50e2998a..77efbc3d1465 100644
--- a/packages/devextreme-scss/scss/widgets/base/dropDownEditor/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/dropDownEditor/_index.scss
@@ -3,6 +3,8 @@
 @use "./mixins" as *;
 @use "../textEditor/mixins" as *;
 
+$dropdowneditor-icon-idle-opacity: 0.35 !default;
+
 .dx-dropdowneditor {
   position: relative;
 
@@ -59,7 +61,9 @@
 
 .dx-dropdowneditor-active {
   .dx-dropdowneditor-icon {
-    opacity: 0.35;
+    @if $dropdowneditor-icon-idle-opacity {
+      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..51c3e6c5acdd 100644
--- a/packages/devextreme-scss/scss/widgets/base/dropDownEditor/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/base/dropDownEditor/_mixins.scss
@@ -1,5 +1,32 @@
+@use "sass:meta";
 @use "../icon_fonts" as *;
 
+@function badge-input-padding($invalid-badge-size, $input-horizontal-padding) {
+  @if meta.type-of($invalid-badge-size) == number and meta.type-of($input-horizontal-padding) == number {
+    @return $invalid-badge-size + $input-horizontal-padding;
+  }
+
+  @if $input-horizontal-padding == 0 {
+    @return $invalid-badge-size;
+  }
+
+  @return calc(#{$invalid-badge-size} + #{$input-horizontal-padding});
+}
+
+/*
+ * The underlined editor has no inline padding, so interpolating it would leave a dead `0 +`
+ * in the calc. The icons term is returned unwrapped - it goes inside the outer calc() as is.
+ */
+@function lookup-field-padding($input-horizontal-padding, $icon-size, $icon-count, $spin-padding) {
+  $icons: if($icon-count == 1, "#{$icon-size}", "#{$icon-size} * #{$icon-count}");
+
+  @if meta.type-of($input-horizontal-padding) == number and $input-horizontal-padding == 0 {
+    @return calc(#{$icons} + #{$spin-padding});
+  }
+
+  @return calc(#{$input-horizontal-padding} + #{$icons} + #{$spin-padding});
+}
+
 @mixin invalid-dropdowneditor-input-padding(
   $invalid-badge-size,
   $texteditor-underlined-input-horizontal-padding,
@@ -8,7 +35,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: badge-input-padding($invalid-badge-size, $texteditor-underlined-input-horizontal-padding);
       }
 
       .dx-start-datebox {
@@ -27,7 +54,7 @@
     &.dx-editor-filled,
     &.dx-editor-outlined {
       .dx-texteditor-input {
-        padding-inline-end: $invalid-badge-size + $texteditor-filled-input-horizontal-padding;
+        padding-inline-end: badge-input-padding($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 5ad777432062..b5629b4f9d1f 100644
--- a/packages/devextreme-scss/scss/widgets/base/dropDownMenu/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/dropDownMenu/_index.scss
@@ -1,8 +1,13 @@
+// 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 {
@@ -12,7 +17,7 @@
   }
 
   .dx-popup-content {
-    padding: 1px;
+    padding: $dropdownmenu-popup-content-padding;
   }
 
   .dx-list-item {
diff --git a/packages/devextreme-scss/scss/widgets/base/dropDownMenu/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/dropDownMenu/_mixins.scss
index 129adac34b1d..f6ff37723dd8 100644
--- a/packages/devextreme-scss/scss/widgets/base/dropDownMenu/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/base/dropDownMenu/_mixins.scss
@@ -2,6 +2,9 @@
   $accent-color,
   $border-radius,
   $section-horizontal-margin,
+  // The focus ring's geometry, on the same role as its colour and radius.
+  $outline-width: 2px,
+  $outline-offset: 1px,
 ) {
   .dx-dropdownmenu-popup-wrapper.dx-dropdownmenu-list-focus-mode {
     .dx-dropdownmenu-list {
@@ -9,8 +12,8 @@
       .dx-list-item[tabindex="0"]:focus-visible {
         position: relative;
         z-index: 1;
-        outline: 2px solid $accent-color;
-        outline-offset: 1px;
+        outline: $outline-width solid $accent-color;
+        outline-offset: $outline-offset;
         border-radius: $border-radius;
       }
     }
diff --git a/packages/devextreme-scss/scss/widgets/base/fileManager/_index.scss b/packages/devextreme-scss/scss/widgets/base/fileManager/_index.scss
index 008b0c995a78..6ebe15605fb6 100644
--- a/packages/devextreme-scss/scss/widgets/base/fileManager/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/fileManager/_index.scss
@@ -1,8 +1,73 @@
 @use "../mixins" as *;
 
+// 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-panel-box-padding: 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-breadcrumbs-path-separator-padding-left: 1px !default;
+$filemanager-breadcrumbs-path-separator-padding-right: 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-dialog-min-width: 300px !default;
+$filemanager-overlay-content-min-height: 300px !default;
+$filemanager-overlay-content-max-height: 400px !default;
+$filemanager-dialog-name-editor-max-width: 340px !default;
+$filemanager-dialog-name-editor-min-height: 180px !default;
+$filemanager-dialog-name-editor-max-height: 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-%
+
+// Half the difference between the splitter border and bar, centring the wrapper on the bar.
+$filemanager-splitter-wrapper-right: 3px !default;
+
 .dx-filemanager {
-  height: 500px;
-  border: 1px solid;
+  height: $filemanager-root-height;
+  border: $filemanager-root-border;
 
   .dx-filemanager-wrapper {
     height: 100%;
@@ -17,25 +82,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;
+      @media (min-width: 431px) { // dx-literal-required: a media condition, var() is invalid here
+        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;
     }
 
@@ -45,61 +110,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-panel-box-padding;
     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 {
@@ -108,54 +173,54 @@
     }
 
     .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;
     }
   }
 
   .dx-splitter-wrapper.dx-splitter-initial,
   .dx-splitter-wrapper.dx-splitter-inactive {
-    right: 3px;  // (dx-splitter-border width - dx-splitter-bar width) / 2
+    right: $filemanager-splitter-wrapper-right;
   }
 
   .dx-filemanager-container {
     display: flex;
     height: 100%;
-    border-top: 1px solid;
+    border-top: $filemanager-container-border-top;
     box-sizing: border-box;
     overflow: hidden;
 
@@ -164,7 +229,7 @@
     }
 
     .dx-filemanager-dirs-panel {
-      padding: 5px 10px;
+      padding: $filemanager-dirs-panel-padding;
       height: 100%;
       width: 100%;
       display: block;
@@ -172,7 +237,7 @@
 
     .dx-drawer-opened {
       .dx-splitter-bar.dx-state-disabled {
-        width: 1px;
+        width: $filemanager-toolbar-separator-item-width;
       }
     }
 
@@ -182,11 +247,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 {
@@ -200,8 +265,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;
@@ -209,20 +274,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-breadcrumbs-path-separator-padding-left;
+      padding-right: $filemanager-breadcrumbs-path-separator-padding-right;
     }
 
     .dx-filemanager-breadcrumbs-separator-item,
@@ -235,14 +300,14 @@
 
   .dx-filemanager-notification-container {
     position: absolute;
-    top: -5000px;
-    left: -5000px;
+    top: -5000px; // dx-structural: parks the container off-screen until it is positioned
+    left: -5000px; // dx-structural: parks the container off-screen until it is positioned
   }
 
   .dx-filemanager-editing-container {
     position: absolute;
-    top: -5000px;
-    left: -5000px;
+    top: -5000px; // dx-structural: parks the container off-screen until it is positioned
+    left: -5000px; // dx-structural: parks the container off-screen until it is positioned
   }
 
   .dx-row {
@@ -288,7 +353,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;
@@ -299,15 +364,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;
@@ -317,7 +382,7 @@
             border: 0;
             padding: 0;
             margin: 0;
-            height: 10px;
+            height: $filemanager-thumbnails-item-spacer-height;
             visibility: hidden;
           }
 
@@ -391,7 +456,7 @@
     box-shadow: none;
 
     .dx-button-content {
-      padding: 10px 11px;
+      padding: $filemanager-button-content-padding;
     }
 
     i {
@@ -441,21 +506,21 @@
 }
 
 .dx-filemanager-dialog-popup > .dx-overlay-content {
-  min-width: 300px;
-  max-width: 400px;
-  min-height: 300px;
-  max-height: 400px;
+  min-width: $filemanager-dialog-min-width;
+  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-dialog-name-editor-max-width;
+  min-height: $filemanager-dialog-name-editor-min-height;
+  max-height: $filemanager-dialog-name-editor-max-height;
 }
 
 .dx-filemanager-dialog-delete-item-popup > .dx-overlay-content {
-  max-width: 340px;
-  min-height: 180px;
+  max-width: $filemanager-dialog-name-editor-max-width;
+  min-height: $filemanager-dialog-name-editor-min-height;
 
   .dx-popup-content .dx-filemanager-dialog-delete-item {
     overflow-wrap: break-word;
@@ -464,16 +529,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/fileManager/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/fileManager/_mixins.scss
index 17a2d5b0c7ec..3afa5e2eadff 100644
--- a/packages/devextreme-scss/scss/widgets/base/fileManager/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/base/fileManager/_mixins.scss
@@ -13,12 +13,38 @@
   height: $height;
 }
 
-@mixin filemanager-icons-mixin($text-color, $success-bg-color, $success-text-color, $danger-bg-color, $danger-text-color, $icon-size) {
+/*
+ * Only `refresh` (which `progress` reuses) and `cancel` are drawn in one colour, so only those two
+ * can become a mask painted by `currentColor`. `done` and `danger` put an inverted glyph on a
+ * success/danger disc beside the neutral arrows - three colours at once, which a mask cannot carry,
+ * so they keep the baked image.
+ */
+@mixin filemanager-icon-masked($data-uri, $width, $height) {
+  $uri: replace("#{$data-uri}", "currentTextColor", "%23000");
+
+  mask-image: string.unquote($uri);
+  mask-position: 50% 50%;
+  mask-repeat: no-repeat;
+  mask-size: contain;
+  background-color: currentColor;
+  width: $width;
+  height: $height;
+}
+
+@mixin filemanager-icon-single($data-uri, $text-color, $success-bg-color, $success-text-color, $danger-bg-color, $danger-text-color, $width, $height, $masked) {
+  @if $masked {
+    @include filemanager-icon-masked($data-uri, $width, $height);
+  } @else {
+    @include filemanager-icon-colored($data-uri, $text-color, $success-bg-color, $success-text-color, $danger-bg-color, $danger-text-color, $width, $height);
+  }
+}
+
+@mixin filemanager-icons-mixin($text-color, $success-bg-color, $success-text-color, $danger-bg-color, $danger-text-color, $icon-size, $masked: false) {
   .dx-filemanager-i,
   .dx-filemanager-i.dx-icon {
     &.dx-filemanager-i-refresh,
     &.dx-filemanager-i-progress {
-      @include filemanager-icon-colored(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/fileManager/refresh.svg"), $text-color, $success-bg-color, $success-text-color, $danger-bg-color, $danger-text-color, $icon-size, $icon-size);
+      @include filemanager-icon-single(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/fileManager/refresh.svg"), $text-color, $success-bg-color, $success-text-color, $danger-bg-color, $danger-text-color, $icon-size, $icon-size, $masked);
     }
 
     &.dx-filemanager-i-done {
@@ -30,7 +56,7 @@
     }
 
     &.dx-filemanager-i-cancel {
-      @include filemanager-icon-colored(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/fileManager/cancel.svg"), $text-color, $success-bg-color, $success-text-color, $danger-bg-color, $danger-text-color, $icon-size, $icon-size);
+      @include filemanager-icon-single(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/fileManager/cancel.svg"), $text-color, $success-bg-color, $success-text-color, $danger-bg-color, $danger-text-color, $icon-size, $icon-size, $masked);
     }
   }
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/filterBuilder/_common.scss b/packages/devextreme-scss/scss/widgets/base/filterBuilder/_common.scss
index 6789b8bbd194..824ae260d4c9 100644
--- a/packages/devextreme-scss/scss/widgets/base/filterBuilder/_common.scss
+++ b/packages/devextreme-scss/scss/widgets/base/filterBuilder/_common.scss
@@ -1,15 +1,30 @@
+$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;
+
 .dx-filterbuilder {
   &.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;
       }
     }
   }
@@ -17,7 +32,7 @@
   .dx-filterbuilder-text,
   .dx-filterbuilder-action-icon {
     margin-left: 0;
-    margin-right: 5px;
+    margin-right: $filterbuilder-action-icon-margin-right;
   }
 
   .dx-filterbuilder-text,
@@ -44,22 +59,25 @@
 
         .dx-filterbuilder-text-separator,
         .dx-filterbuilder-range-separator {
-          margin: 0 7px;
-          opacity: 0.3;
+          margin: $filterbuilder-range-separator-margin;
+
+          @if $filterbuilder-range-separator-opacity {
+            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 {
           vertical-align: middle;
-          margin-top: -7px;
-          margin-bottom: -4px;
+          margin-top: -7px; // dx-fixed-size: pulls the row onto the group line
+          margin-bottom: -4px; // dx-fixed-size: pulls the row onto the group line
           display: inline-block;
         }
       }
@@ -70,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;
     }
   }
 
@@ -91,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;
     }
   }
 }
@@ -109,7 +127,7 @@
       padding-left: 0;
 
       .dx-treeview-node-container-opened {
-        margin-left: 15px;
+        margin-left: $filterbuilder-treeview-node-margin-left;
       }
     }
 
@@ -118,7 +136,7 @@
         padding-right: 0;
 
         .dx-treeview-node-container-opened {
-          margin-right: 15px;
+          margin-right: $filterbuilder-treeview-node-margin-right;
         }
       }
     }
@@ -133,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 223ea622e6a9..389a09123dbf 100644
--- a/packages/devextreme-scss/scss/widgets/base/gantt/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/gantt/_index.scss
@@ -1,3 +1,8 @@
+// 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;
@@ -19,7 +24,7 @@
   .dx-gantt-toolbar-separator {
     display: table;
     height: 100%;
-    border-left: 1px solid transparent;
+    border-left: $gantt-toolbar-separator-border-left;
   }
 
   .dx-gantt-si {
@@ -42,17 +47,17 @@
   }
 
   .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;
+      margin-top: -1px; // dx-px-nudge: a one-pixel correction on top of the row height
     }
 
     .dx-scrollable-scrollbar {
diff --git a/packages/devextreme-scss/scss/widgets/base/gantt/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/gantt/_mixins.scss
index 08e37674d6b9..12e879ceb46f 100644
--- a/packages/devextreme-scss/scss/widgets/base/gantt/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/base/gantt/_mixins.scss
@@ -7,70 +7,100 @@
   background-image: string.unquote($uri);
 }
 
-@mixin gantt-icons-mixin($color) {
+/*
+ * A background image cannot read the element's `color`, so `gantt-icon-colored` bakes the rest
+ * colour into the svg and every extra state needs the whole set emitted again. The same artwork
+ * used as a mask carries only its alpha, so one copy is painted by `currentColor` and follows
+ * whatever the cascade already puts on `.dx-icon` - including the disabled colour.
+ */
+@mixin gantt-icon-masked($data-uri) {
+  $uri: replace("#{$data-uri}", "currentColor", "%23000");
+
+  mask-image: string.unquote($uri);
+}
+
+@mixin gantt-icon($data-uri, $color, $masked) {
+  @if $masked {
+    @include gantt-icon-masked($data-uri);
+  } @else {
+    @include gantt-icon-colored($data-uri, $color);
+  }
+}
+
+@mixin gantt-icons-mixin($color: null, $masked: false) {
   .dx-gantt-i {
+    @if $masked {
+      /* `background-size` for a `.dx-icon` is set by whatever hosts it - `contain` in a button,
+      an explicit icon size in the toolbar's overflow menu. Both resolve to the 20px content box
+      these square 18px glyphs already fill, so one `contain` mirrors the image the mask replaces. */
+      mask-position: 50% 50%;
+      mask-repeat: no-repeat;
+      mask-size: contain;
+      background-color: currentColor;
+    }
+
     &.dx-gantt-i-add {
-      @include gantt-icon-colored(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/gantt/add.svg"), $color);
+      @include gantt-icon(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/gantt/add.svg"), $color, $masked);
     }
 
     &.dx-gantt-i-add-sub-task {
-      @include gantt-icon-colored(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/gantt/add-sub-task.svg"), $color);
+      @include gantt-icon(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/gantt/add-sub-task.svg"), $color, $masked);
     }
 
     &.dx-gantt-i-add-task {
-      @include gantt-icon-colored(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/gantt/add-task.svg"), $color);
+      @include gantt-icon(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/gantt/add-task.svg"), $color, $masked);
     }
 
     &.dx-gantt-i-collapse {
-      @include gantt-icon-colored(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/gantt/collapse.svg"), $color);
+      @include gantt-icon(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/gantt/collapse.svg"), $color, $masked);
     }
 
     &.dx-gantt-i-delete {
-      @include gantt-icon-colored(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/gantt/delete.svg"), $color);
+      @include gantt-icon(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/gantt/delete.svg"), $color, $masked);
     }
 
     &.dx-gantt-i-delete-dependency {
-      @include gantt-icon-colored(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/gantt/delete-dependency.svg"), $color);
+      @include gantt-icon(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/gantt/delete-dependency.svg"), $color, $masked);
     }
 
     &.dx-gantt-i-expand {
-      @include gantt-icon-colored(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/gantt/expand.svg"), $color);
+      @include gantt-icon(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/gantt/expand.svg"), $color, $masked);
     }
 
     &.dx-gantt-i-full-screen {
-      @include gantt-icon-colored(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/gantt/full-screen.svg"), $color);
+      @include gantt-icon(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/gantt/full-screen.svg"), $color, $masked);
     }
 
     &.dx-gantt-i-redo {
-      @include gantt-icon-colored(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/gantt/redo.svg"), $color);
+      @include gantt-icon(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/gantt/redo.svg"), $color, $masked);
     }
 
     &.dx-gantt-i-task-details {
-      @include gantt-icon-colored(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/gantt/task-details.svg"), $color);
+      @include gantt-icon(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/gantt/task-details.svg"), $color, $masked);
     }
 
     &.dx-gantt-i-undo {
-      @include gantt-icon-colored(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/gantt/undo.svg"), $color);
+      @include gantt-icon(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/gantt/undo.svg"), $color, $masked);
     }
 
     &.dx-gantt-i-zoom-in {
-      @include gantt-icon-colored(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/gantt/zoom-in.svg"), $color);
+      @include gantt-icon(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/gantt/zoom-in.svg"), $color, $masked);
     }
 
     &.dx-gantt-i-zoom-out {
-      @include gantt-icon-colored(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/gantt/zoom-out.svg"), $color);
+      @include gantt-icon(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/gantt/zoom-out.svg"), $color, $masked);
     }
 
     &.dx-gantt-i-resource-manager {
-      @include gantt-icon-colored(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/gantt/resource-manager.svg"), $color);
+      @include gantt-icon(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/gantt/resource-manager.svg"), $color, $masked);
     }
 
     &.dx-gantt-i-toggle-resources {
-      @include gantt-icon-colored(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/gantt/toggle-resources.svg"), $color);
+      @include gantt-icon(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/gantt/toggle-resources.svg"), $color, $masked);
     }
 
     &.dx-gantt-i-toggle-dependencies {
-      @include gantt-icon-colored(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/gantt/toggle-dependencies.svg"), $color);
+      @include gantt-icon(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/gantt/toggle-dependencies.svg"), $color, $masked);
     }
   }
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/gridBase/_index.scss b/packages/devextreme-scss/scss/widgets/base/gridBase/_index.scss
index 2c56c22f1444..30a2b5f6d2af 100644
--- a/packages/devextreme-scss/scss/widgets/base/gridBase/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/gridBase/_index.scss
@@ -17,7 +17,16 @@
   flex: 0 0 auto;
 }
 
-@mixin grid-base($widget-name) {
+// NOTE: a11y aria-live container must be visible to allow screen readers read it
+.dx-gridbase-a11y-status-container {
+  position: fixed;
+  left: 0;
+  top: 0;
+  clip: rect(1px, 1px, 1px, 1px); // dx-structural: clips the a11y live region to nothing while keeping it rendered — the NOTE above; not a size
+  clip-path: polygon(0 0);
+}
+
+@mixin grid-base($widget-name, $draggable-column-opacity: 0.5, $column-chooser-item-opacity: 0.5) {
   @include grid-base-cell($widget-name);
 
   .dx-#{$widget-name}-checkbox-size {
@@ -25,7 +34,7 @@
   }
 
   .dx-#{$widget-name}-important-margin {
-    margin-right: 5px !important; // stylelint-disable-line declaration-no-important
+    margin-right: 5px !important; // stylelint-disable-line declaration-no-important -- dx-fixed-size: legacy compat helper class, kept for the Foundation layout below
   }
 
   // for Foundation Responsive Framework
@@ -43,7 +52,7 @@
     }
 
     > .dx-pager {
-      margin-top: -1px;
+      margin-top: -1px; // dx-px-nudge: pulls the pager up by one border so its top edge overlaps the grid bottom edge
     }
 
     > .dx-#{$widget-name}-rowsview.dx-last-row-border {
@@ -74,12 +83,12 @@
         padding-top: 0;
 
         &:first-child {
-          padding-top: 1px;
+          padding-top: 1px; // dx-px-nudge: lifts the first submenu row off the menu border
         }
       }
 
       .dx-menu-item {
-        padding: 7px 30px 7px 5px;
+        padding: $grid-context-menu-item-padding-block $grid-context-menu-item-padding-inline-end $grid-context-menu-item-padding-block $grid-context-menu-item-padding-inline-start;
 
         .dx-menu-image {
           background-position-x: left;
@@ -103,8 +112,8 @@
 
       .dx-sort-index-icon {
         padding-right: $grid-sort-index-offset;
-        margin-left: -$grid-sort-index-offset;
-        width: $grid-sort-index-width + $grid-sort-index-offset;
+        margin-left: grid-negate($grid-sort-index-offset);
+        width: grid-sum($grid-sort-index-width, $grid-sort-index-offset);
       }
 
       .dx-sort,
@@ -121,7 +130,7 @@
           bottom: 0;
           left: 0;
           right: 0;
-          margin: -$grid-cell-padding;
+          margin: grid-negate($grid-cell-padding);
         }
       }
     }
@@ -147,19 +156,22 @@
     .dx-overlay-content {
       .dx-popup-title {
         border-bottom: none;
-        font-size: 16px;
+        font-size: $grid-column-chooser-title-font-size;
 
         .dx-toolbar-label {
-          font-size: 16px;
+          font-size: $grid-column-chooser-title-font-size;
         }
       }
 
       .dx-popup-content {
-        padding: 0 20px 20px 20px;
+        padding: $grid-column-chooser-content-padding;
 
         .dx-column-chooser-item {
-          opacity: 0.5;
-          margin-bottom: 10px;
+          @if $column-chooser-item-opacity {
+            opacity: $column-chooser-item-opacity;
+          }
+
+          margin-bottom: $grid-column-chooser-item-margin-block-end;
 
           &.dx-#{$widget-name}-drag-action {
             opacity: 1;
@@ -168,7 +180,9 @@
           }
 
           &.dx-#{$widget-name}-draggable-column {
-            opacity: 0.5;
+            @if $draggable-column-opacity {
+              opacity: $draggable-column-opacity;
+            }
           }
         }
       }
@@ -184,7 +198,7 @@
       .dx-#{$widget-name}-column-chooser-plain, .dx-#{$widget-name}-column-chooser-list {
         .dx-treeview-node {
           .dx-treeview-item {
-            padding-inline-start: 4px;
+            padding-inline-start: $grid-column-chooser-tree-view-item-padding-inline-start;
           }
         }
       }
@@ -212,7 +226,7 @@
   .dx-#{$widget-name}-columns-separator {
     position: absolute;
     z-index: 4;
-    width: 3px;
+    width: $grid-column-separator-width;
   }
 
   .dx-#{$widget-name}-columns-separator-transparent {
@@ -246,7 +260,9 @@
   }
 
   .dx-#{$widget-name}-draggable-column {
-    opacity: 0.5;
+    @if $draggable-column-opacity {
+      opacity: $draggable-column-opacity;
+    }
   }
 
   .dx-data-row.dx-state-hover {
@@ -295,7 +311,7 @@
     border-collapse: collapse;
     border-spacing: 0;
     margin: 0;
-    max-width: 10px;
+    max-width: 10px; // dx-structural: deliberately tiny so the table sizes to its columns rather than the container — the fixed variant below resets it to none
 
     &.dx-#{$widget-name}-table-fixed {
       max-width: none;
@@ -306,7 +322,7 @@
         }
 
         &.dx-sort-index {
-          width: $grid-column-header-indicator-width + $grid-sort-index-width;
+          width: grid-sum($grid-column-header-indicator-width, $grid-sort-index-width);
         }
       }
     }
@@ -412,9 +428,9 @@
     &::after {
       content: "";
       position: absolute;
-      border: 2px solid transparent;
+      border: 2px solid transparent; // dx-line-width: thickness of the invalid-cell ring, drawn on a pseudo-element
       top: 0;
-      left: 1px;
+      left: 1px; // dx-px-nudge: insets that ring by the cell border on the left
       bottom: 0;
       right: 0;
       pointer-events: none;
@@ -462,7 +478,7 @@
   .dx-#{$widget-name}-headers {
     position: relative;
     outline: 0;
-    min-height: 1px;
+    min-height: 1px; // dx-structural: one-pixel floor so the headers block keeps layout presence when it has no rows; not a designed height
 
     @include user-select(none);
   }
@@ -491,7 +507,7 @@
 
     .dx-sort-indicator,
     .dx-header-filter-indicator {
-      max-width: calc(100% - #{math.round($grid-column-header-indicator-width + $grid-text-content-margin)});
+      max-width: grid-header-text-max-width(1, 1);
 
       &.dx-text-content-alignment-left {
         margin-right: $grid-text-content-margin;
@@ -502,31 +518,31 @@
       }
 
       &.dx-text-content-alignment-left.dx-text-content-alignment-right {
-        max-width: calc(100% - #{math.round($grid-column-header-indicator-width * 2 + $grid-text-content-margin * 2)});
+        max-width: grid-header-text-max-width(2, 2);
       }
     }
 
     .dx-sort-indicator.dx-header-filter-indicator {
-      max-width: calc(100% - #{math.round($grid-column-header-indicator-width * 2 + $grid-text-content-margin)});
+      max-width: grid-header-text-max-width(2, 1);
     }
 
     .dx-sort-indicator.dx-header-filter-indicator.dx-text-content-alignment-left.dx-text-content-alignment-right {
-      max-width: calc(100% - #{math.round($grid-column-header-indicator-width * 4 + $grid-text-content-margin * 2)});
+      max-width: grid-header-text-max-width(4, 2);
     }
 
     .dx-sort-indicator.dx-sort-index-indicator {
-      max-width: calc(100% - #{math.round($grid-column-header-indicator-width + $grid-text-content-margin + $grid-sort-index-width)});
+      max-width: grid-header-text-max-width(1, 1, 1);
 
       &.dx-header-filter-indicator {
-        max-width: calc(100% - #{math.round($grid-column-header-indicator-width * 2 + $grid-text-content-margin + $grid-sort-index-width)});
+        max-width: grid-header-text-max-width(2, 1, 1);
       }
 
       &.dx-text-content-alignment-left.dx-text-content-alignment-right {
-        max-width: calc(100% - #{math.round($grid-column-header-indicator-width * 2 + $grid-text-content-margin * 2 + $grid-sort-index-width)});
+        max-width: grid-header-text-max-width(2, 2, 1);
       }
 
       &.dx-header-filter-indicator.dx-text-content-alignment-left.dx-text-content-alignment-right {
-        max-width: calc(100% - #{math.round($grid-column-header-indicator-width * 4 + $grid-text-content-margin * 2 + $grid-sort-index-width)});
+        max-width: grid-header-text-max-width(4, 2, 1);
       }
     }
   }
@@ -538,17 +554,17 @@
       &.dx-state-focused::after {
         content: " ";
         position: absolute;
-        top: -1px;
-        bottom: -1px;
-        left: -1px;
-        right: -1px;
+        top: -1px; // dx-px-nudge: pulls the focus ring out over the cell border
+        bottom: -1px; // dx-px-nudge: pulls the focus ring out over the cell border
+        left: -1px; // dx-px-nudge: pulls the focus ring out over the cell border
+        right: -1px; // dx-px-nudge: pulls the focus ring out over the cell border
         z-index: 1;
         pointer-events: none;
       }
     }
 
     .dx-#{$widget-name}-filter-range-end {
-      border-top: 1px solid transparent;
+      border-top: 1px solid transparent; // dx-line-width: hairline placeholder keeping the range-end input aligned with the range-start one
     }
 
     .dx-editor-container {
@@ -633,20 +649,20 @@
     }
 
     .dx-menu-horizontal .dx-overlay-content ul .dx-menu-item {
-      padding: 5px;
-      padding-right: 30px;
+      padding: $grid-context-menu-overlay-item-padding;
+      padding-right: $grid-context-menu-overlay-item-padding-inline-end;
     }
 
     .dx-menu ul.dx-menu-horizontal > li > .dx-menu-item {
-      padding: 8px 5px 7px 5px;
+      padding: $grid-menu-bar-item-padding;
     }
 
     .dx-menu ul.dx-menu-horizontal > li > .dx-menu-item.dx-state-disabled:hover {
-      padding: 9px 6px 8px 6px;
+      padding: 9px 6px 8px 6px; // dx-px-nudge: +1px on each side of the resting padding above, compensating the border the disabled item loses on hover
     }
 
     .dx-menu-caption {
-      padding-left: 6px;
+      padding-left: $grid-menu-caption-padding-inline-start;
     }
 
     .dx-menu ul .dx-menu-item .dx-menu-chouser-down {
@@ -668,7 +684,7 @@
 
     .dx-toolbar-menu-container {
       .dx-button {
-        margin-left: 10px;
+        margin-left: $grid-toolbar-button-margin-inline-start;
       }
     }
   }
@@ -683,7 +699,7 @@
 
   .dx-#{$widget-name}-search-panel {
     margin: 0;
-    margin-left: 15px;
+    margin-left: $grid-search-panel-margin-inline-start;
   }
 
   .dx-gridbase-container > .dx-#{$widget-name}-rowsview {
@@ -707,7 +723,7 @@
     overflow: hidden;
 
     &.dx-empty {
-      height: 100px;
+      height: $grid-rowsview-empty-height;
 
       .dx-scrollable-content {
         height: 100%;
@@ -808,7 +824,7 @@
 
   .dx-#{$widget-name}-bottom-load-panel {
     text-align: center;
-    padding: 10px;
+    padding: $grid-bottom-load-panel-padding;
   }
 
   .dx-#{$widget-name}-hidden-column > * {
@@ -882,7 +898,7 @@
   .dx-#{$widget-name}.dx-rtl {
     .dx-menu-subitem {
       .dx-menu-item {
-        padding: 7px 5px 7px 30px;
+        padding: $grid-context-menu-item-padding-block $grid-context-menu-item-padding-inline-start $grid-context-menu-item-padding-block $grid-context-menu-item-padding-inline-end;
 
         .dx-menu-image {
           background-position-x: right;
@@ -937,7 +953,7 @@
         right: 0;
         left: auto;
         margin-left: 0;
-        margin-right: -2px;
+        margin-right: -2px; // dx-px-nudge: RTL mirror — pulls the menu out by its own border
       }
 
       & > td:first-child .dx-menu {
@@ -945,12 +961,12 @@
       }
 
       .dx-menu-horizontal .dx-overlay-content ul .dx-menu-item {
-        padding: 5px;
-        padding-left: 30px;
+        padding: $grid-context-menu-overlay-item-padding;
+        padding-left: $grid-context-menu-overlay-item-padding-inline-end;
       }
 
       .dx-menu-caption {
-        padding-right: 6px;
+        padding-right: $grid-menu-caption-padding-inline-start;
       }
     }
 
@@ -964,14 +980,14 @@
       .dx-toolbar-menu-container {
         .dx-button {
           margin-left: 0;
-          margin-right: 10px;
+          margin-right: $grid-toolbar-button-margin-inline-start;
         }
       }
     }
 
     .dx-#{$widget-name}-search-panel {
       margin: 0;
-      margin-right: 15px;
+      margin-right: $grid-search-panel-margin-inline-start;
     }
   }
 
@@ -984,7 +1000,7 @@
   }
 
   .dx-#{$widget-name}-filter-panel {
-    padding: 10px;
+    padding: $grid-filter-panel-padding;
 
     .dx-#{$widget-name}-filter-panel-text {
       @include dx-overflow();
@@ -997,12 +1013,12 @@
     }
 
     .dx-#{$widget-name}-filter-panel-checkbox {
-      padding-right: 10px;
+      padding-right: $grid-filter-panel-checkbox-padding-inline-end;
     }
 
     .dx-icon-filter {
       margin: auto;
-      margin-right: 7px;
+      margin-right: $grid-filter-panel-icon-margin-inline-end;
       cursor: pointer;
     }
   }
diff --git a/packages/devextreme-scss/scss/widgets/base/gridBase/_variables.scss b/packages/devextreme-scss/scss/widgets/base/gridBase/_variables.scss
index e6a121dc6e89..efc0bc94ad13 100644
--- a/packages/devextreme-scss/scss/widgets/base/gridBase/_variables.scss
+++ b/packages/devextreme-scss/scss/widgets/base/gridBase/_variables.scss
@@ -1,6 +1,11 @@
+@use "sass:math";
+@use "sass:meta";
+
 $grid-cell-padding: 7px !default;
 $grid-texteditor-input-padding: 32px !default;
-$grid-total-footer-paddings: 7px !default;
+
+// the footer used to be written as `$x * 2`; the knob holds the padding itself now
+$grid-total-footer-padding-block: 14px !default;
 $grid-command-select-column-width: 70px !default;
 $grid-command-edit-column-width: 100px !default;
 $grid-command-edit-column-with-icons-width: 80px !default;
@@ -11,3 +16,73 @@ $grid-text-content-margin: 3px !default;
 $grid-sort-index-width: 12px !default;
 $grid-sort-index-offset: 3px !default;
 $grid-ai-assistant-confirm-dialog-button-width: 50px !default;
+
+// Sizes the shared layer used to pin inside rules; the theme owns them now
+$grid-context-menu-item-padding-block: 7px !default;
+$grid-context-menu-item-padding-inline-start: 5px !default;
+$grid-context-menu-item-padding-inline-end: 30px !default;
+$grid-context-menu-overlay-item-padding: 5px !default;
+$grid-context-menu-overlay-item-padding-inline-end: 30px !default;
+$grid-menu-bar-item-padding: 8px 5px 7px 5px !default;
+$grid-menu-caption-padding-inline-start: 6px !default;
+$grid-column-chooser-title-font-size: 16px !default;
+$grid-column-chooser-content-padding: 0 20px 20px 20px !default;
+$grid-column-chooser-item-margin-block-end: 10px !default;
+$grid-column-chooser-tree-view-item-padding-inline-start: 4px !default;
+$grid-column-separator-width: 3px !default;
+$grid-toolbar-button-margin-inline-start: 10px !default;
+$grid-search-panel-margin-inline-start: 15px !default;
+$grid-rowsview-empty-height: 100px !default;
+$grid-bottom-load-panel-padding: 10px !default;
+$grid-filter-panel-padding: 10px !default;
+$grid-filter-panel-checkbox-padding-inline-end: 10px !default;
+$grid-filter-panel-icon-margin-inline-end: 7px !default;
+
+/*
+ * The four sizes above are read in arithmetic, and arithmetic is where a token cannot follow: a
+ * legacy theme passes numbers, which Sass folds at build time, while fluent-next passes var(),
+ * which Sass can neither add nor negate nor round. So every such spot goes through one of the
+ * three helpers below: with numbers they return exactly what the layer emitted before, with
+ * var() they emit the same sum as a single runtime calc(). Nothing else in the layer changes.
+ */
+
+@function grid-negate($value) {
+  @if meta.type-of($value) == number {
+    @return -$value;
+  }
+
+  @return calc(-1 * #{$value});
+}
+
+@function grid-sum($first, $second) {
+  @if meta.type-of($first) == number and meta.type-of($second) == number {
+    @return $first + $second;
+  }
+
+  @return calc(#{$first} + #{$second});
+}
+
+/*
+ * Header text must not run under the indicator icons, so its max-width subtracts them. math.round()
+ * guarded against a fractional theme value; with the current numbers (14/3/12) every one of the
+ * eight sums is already whole, so dropping it in the var() branch subtracts the same amount.
+ */
+@function grid-header-text-max-width($indicators, $margins, $sort-indexes: 0) {
+  @if meta.type-of($grid-column-header-indicator-width) == number
+    and meta.type-of($grid-text-content-margin) == number
+    and meta.type-of($grid-sort-index-width) == number {
+    $sum: $grid-column-header-indicator-width * $indicators +
+      $grid-text-content-margin * $margins +
+      $grid-sort-index-width * $sort-indexes;
+
+    @return calc(100% - #{math.round($sum)});
+  }
+
+  $sum: "#{$indicators} * #{$grid-column-header-indicator-width} + #{$margins} * #{$grid-text-content-margin}";
+
+  @if $sort-indexes > 0 {
+    $sum: "#{$sum} + #{$sort-indexes} * #{$grid-sort-index-width}";
+  }
+
+  @return calc(100% - (#{$sum}));
+}
diff --git a/packages/devextreme-scss/scss/widgets/base/gridBase/layout/aiChat/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/gridBase/layout/aiChat/_mixins.scss
index 6e992a50baa9..956994ccc337 100644
--- a/packages/devextreme-scss/scss/widgets/base/gridBase/layout/aiChat/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/base/gridBase/layout/aiChat/_mixins.scss
@@ -44,7 +44,7 @@
   $border-color,
 ) {
   .dx-ai-chat__content .dx-chat-messagegroup-alignment-start .dx-chat-messagebubble {
-    border-width: 1px;
+    border-width: 1px; // dx-line-width: hairline border of the incoming message bubble
     border-style: solid;
     border-color: $border-color;
   }
diff --git a/packages/devextreme-scss/scss/widgets/base/gridBase/layout/cell.scss b/packages/devextreme-scss/scss/widgets/base/gridBase/layout/cell.scss
index 493328baff48..b08254901bff 100644
--- a/packages/devextreme-scss/scss/widgets/base/gridBase/layout/cell.scss
+++ b/packages/devextreme-scss/scss/widgets/base/gridBase/layout/cell.scss
@@ -247,8 +247,8 @@
 
   // (0,3,1)
   .dx-#{$widget-name}-total-footer > .dx-#{$widget-name}-content .dx-row > td {
-    padding-top: $grid-total-footer-paddings * 2;
-    padding-bottom: $grid-total-footer-paddings * 2;
+    padding-top: $grid-total-footer-padding-block;
+    padding-bottom: $grid-total-footer-padding-block;
   }
 
   // (0,4,0)
diff --git a/packages/devextreme-scss/scss/widgets/base/list/_index.scss b/packages/devextreme-scss/scss/widgets/base/list/_index.scss
index ce602f27237d..ddcf7c6908b3 100644
--- a/packages/devextreme-scss/scss/widgets/base/list/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/list/_index.scss
@@ -1,11 +1,21 @@
 @use "../mixins" as *;
 @use "../button/mixins" as *;
 
+$list-response-wait-opacity: 0.5 !default;
+
 $list-searchbox-margin-bottom: 5px !default;
 
+// 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;
@@ -62,12 +72,12 @@ $list-searchbox-margin-bottom: 5px !default;
   @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;
 }
@@ -91,7 +101,7 @@ $list-searchbox-margin-bottom: 5px !default;
 }
 
 .dx-list-item-response-wait {
-  opacity: 0.5;
+  opacity: $list-response-wait-opacity;
   transition: opacity 0.2s linear;
 }
 
@@ -227,12 +237,12 @@ $list-searchbox-margin-bottom: 5px !default;
 
 .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;
@@ -240,11 +250,11 @@ $list-searchbox-margin-bottom: 5px !default;
 }
 
 .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/list/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/list/_mixins.scss
index d27e57091ad4..d5d4d7e3f9c0 100644
--- a/packages/devextreme-scss/scss/widgets/base/list/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/base/list/_mixins.scss
@@ -7,8 +7,27 @@
   background-image: string.unquote($uri);
 }
 
-@mixin toggle-delete-icon($color) {
+/*
+ * A background image cannot read the element's `color`, so `list-icon-colored` bakes the colour
+ * into the svg and every state that recolours the icon needs it emitted again. The same artwork
+ * used as a mask carries only its alpha, so one copy is painted by `currentColor` and follows
+ * whatever the cascade already puts on `.dx-icon`.
+ */
+@mixin list-icon-masked($data-uri) {
+  $uri: replace("#{$data-uri}", "currentColor", "%23000");
+
+  mask-image: string.unquote($uri);
+  mask-position: 50% 50%;
+  mask-repeat: no-repeat;
+  background-color: currentColor;
+}
+
+@mixin toggle-delete-icon($color: null, $masked: false) {
   .dx-icon-toggle-delete {
-    @include list-icon-colored(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/list/toggle-delete.svg"), $color);
+    @if $masked {
+      @include list-icon-masked(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/list/toggle-delete.svg"));
+    } @else {
+      @include list-icon-colored(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/list/toggle-delete.svg"), $color);
+    }
   }
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/lookup/_index.scss b/packages/devextreme-scss/scss/widgets/base/lookup/_index.scss
index de0b1034ee0c..076a47c649e0 100644
--- a/packages/devextreme-scss/scss/widgets/base/lookup/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/lookup/_index.scss
@@ -1,12 +1,13 @@
 @use "./mixins" as *;
 @use "../mixins" as *;
 
+$lookup-popup-search-list-height: 90% !default; // dx-relative-%
 .dx-lookup {
   margin: 0;
 
   .dx-popup-content {
     .dx-scrollable {
-      height: calc(100% - 45px);
+      height: calc(100% - 45px); // dx-fixed-size: the height the popup toolbar takes from the list
     }
   }
 
@@ -77,7 +78,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 ccd0ece68a21..925384674a81 100644
--- a/packages/devextreme-scss/scss/widgets/base/pivotGrid/_common.scss
+++ b/packages/devextreme-scss/scss/widgets/base/pivotGrid/_common.scss
@@ -1,3 +1,6 @@
+$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 {
@@ -232,8 +235,8 @@
 
 .dx-pivotgrid-scrollbar-measure-element {
   position: absolute;
-  top: -9999px;
-  width: 100px;
-  height: 100px;
+  top: -9999px; // dx-structural: parks the scrollbar probe off-screen
+  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 f207e0faa181..79ac3c79eff2 100644
--- a/packages/devextreme-scss/scss/widgets/base/pivotGrid/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/pivotGrid/_index.scss
@@ -1,3 +1,29 @@
+$pivotgrid-drag-source-opacity: 0.5 !default;
+$pivotgrid-fields-container-drag-opacity: 0.8 !default;
+
+// 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: 3px !default;
+$pivotgrid-position-indicator-last-margin-left-rtl: 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,39 +47,48 @@ $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 !default;
-$pivotgrid-drag-header-first-shadow: 0 0 1px $pivotgrid-drag-header-first-shadow-color !default;
-$pivotgrid-drag-header-second-shadow: 0 1px 3px $pivotgrid-drag-header-second-shadow-color !default;
 $pivotgrid-border-width: 1px !default;
-$pivotgrid-border: $pivotgrid-border-width solid !default;
+$pivotgrid-focus-outline-width: 2px !default;
+$pivotgrid-focus-outline-offset: -2px !default;
+$pivotgrid-drag-header-border: $pivotgrid-border-width solid !default;
+$pivotgrid-drag-header-first-shadow: 0 0 1px $pivotgrid-drag-header-first-shadow-color; // dx-shadow-geometry
+$pivotgrid-drag-header-second-shadow: 0 1px 3px $pivotgrid-drag-header-second-shadow-color; // dx-shadow-geometry
+$pivotgrid-border: $pivotgrid-border-width solid;
 $pivotgrid-icon-size: 14px !default;
 $pivotgrid-common-field-padding: 2px !default;
-$pivotgrid-filter-area-border-spacing: $pivotgrid-common-left-right-padding - $pivotgrid-common-field-padding $pivotgrid-header-top-bottom-padding - $pivotgrid-common-field-padding !default;
-$pivotgrid-expand-icon-offset: -5px !default;
-$pivotgrid-expand-icon-text-offset: 0 !default;
+$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})) !default;
+$pivotgrid-expand-icon-offset: -5px; // dx-fixed-size: negated at its use site
+$pivotgrid-expand-icon-text-offset: 0;
 
 .dx-pivotgrid-fields-container {
   .dx-position-indicator {
     background-color: gray;
 
     &.dx-position-indicator-vertical {
-      margin-top: -4px;
-      margin-left: -1px;
-      height: 2px;
+      margin-top: -4px; // dx-fixed-size: pulls the element onto the grid line
+      margin-left: -1px; // dx-fixed-size: pulls the element onto the grid line
+      height: $pivotgrid-position-indicator-vertical-height;
 
       &.dx-position-indicator-last {
-        margin-top: -3px;
+        margin-top: -3px; // dx-fixed-size: pulls the element onto the grid line
       }
     }
 
     &.dx-position-indicator-horizontal {
-      margin-left: -3px;
-      width: 2px;
+      margin-left: -3px; // dx-fixed-size: pulls the element onto the grid line
+      width: $pivotgrid-position-indicator-horizontal-width;
 
       &.dx-position-indicator-last {
-        margin-left: 3px;
+        margin-left: $pivotgrid-position-indicator-last-margin-left;
       }
     }
   }
@@ -94,13 +129,15 @@ $pivotgrid-expand-icon-text-offset: 0 !default;
   }
 
   .dx-area-field:focus-visible {
-    outline: 2px solid;
+    outline: $pivotgrid-focus-outline-width solid;
     outline-color: $pivotgrid-accent-color;
-    outline-offset: -2px;
+    outline-offset: $pivotgrid-focus-outline-offset;
   }
 
   &.dx-drag {
-    opacity: 0.8;
+    @if $pivotgrid-fields-container-drag-opacity {
+      opacity: $pivotgrid-fields-container-drag-opacity;
+    }
 
     .dx-area-field.dx-area-box {
       box-shadow: $pivotgrid-drag-header-first-shadow, $pivotgrid-drag-header-second-shadow;
@@ -111,14 +148,16 @@ $pivotgrid-expand-icon-text-offset: 0 !default;
 
   .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;
   }
 
   .dx-drag-source {
-    opacity: 0.5;
+    @if $pivotgrid-drag-source-opacity {
+      opacity: $pivotgrid-drag-source-opacity;
+    }
   }
 
   .dx-column-indicators {
@@ -134,16 +173,16 @@ $pivotgrid-expand-icon-text-offset: 0 !default;
 
 .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;
+    outline-offset: $pivotgrid-focus-outline-offset;
   }
 
   .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;
+    outline-offset: $pivotgrid-focus-outline-offset;
   }
 
   .dx-expand-icon-container:focus-visible {
@@ -151,15 +190,15 @@ $pivotgrid-expand-icon-text-offset: 0 !default;
   }
 
   .dx-pivotgrid-toolbar .dx-button:focus-visible {
-    outline: 2px solid;
+    outline: $pivotgrid-focus-outline-width solid;
     outline-color: $pivotgrid-accent-color;
-    outline-offset: -2px;
+    outline-offset: $pivotgrid-focus-outline-offset;
   }
 
   .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 +209,7 @@ $pivotgrid-expand-icon-text-offset: 0 !default;
       }
 
       .dx-pivotgrid-field-chooser-button {
-        margin-right: 4px;
+        margin-right: $pivotgrid-field-chooser-button-margin-right;
       }
     }
   }
@@ -249,7 +288,7 @@ $pivotgrid-expand-icon-text-offset: 0 !default;
 
     .dx-pivotgrid-toolbar {
       .dx-button {
-        margin: 1px;
+        margin: $pivotgrid-button-margin;
       }
     }
   }
@@ -274,7 +313,7 @@ $pivotgrid-expand-icon-text-offset: 0 !default;
     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,10 +334,10 @@ $pivotgrid-expand-icon-text-offset: 0 !default;
 
   .dx-group-connector {
     position: absolute;
-    width: 2px;
+    width: $pivotgrid-position-indicator-horizontal-width;
     top: 50%;
-    height: 2px;
-    margin-top: -1px;
+    height: $pivotgrid-position-indicator-vertical-height;
+    margin-top: -1px; // dx-fixed-size: pulls the element onto the grid line
     background-color: $pivotgrid-border-color;
 
     &.dx-group-connector-prev {
@@ -373,7 +412,7 @@ $pivotgrid-expand-icon-text-offset: 0 !default;
     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 +532,7 @@ $pivotgrid-expand-icon-text-offset: 0 !default;
 
   .dx-icon-sorted {
     display: inline-block;
-    margin-left: 5px;
+    margin-left: $pivotgrid-icon-sorted-margin-left;
     width: $pivotgrid-icon-size;
   }
 
@@ -502,7 +541,7 @@ $pivotgrid-expand-icon-text-offset: 0 !default;
 
     .dx-pivotgrid-fields-area-head {
       td {
-        padding: 0 2px;
+        padding: $pivotgrid-fields-area-head-padding;
       }
     }
   }
@@ -524,7 +563,7 @@ $pivotgrid-expand-icon-text-offset: 0 !default;
   }
 
   .dx-treeview-search {
-    margin: 5px;
+    margin: $pivotgrid-treeview-search-margin;
   }
 
   .dx-area-icon {
@@ -533,7 +572,7 @@ $pivotgrid-expand-icon-text-offset: 0 !default;
   }
 
   .dx-area {
-    padding: 5px;
+    padding: $pivotgrid-area-padding;
     display: flex;
     flex-grow: 1;
     flex-direction: column;
@@ -541,7 +580,7 @@ $pivotgrid-expand-icon-text-offset: 0 !default;
     @include flexible-scrollable();
 
     .dx-area-fields {
-      margin-top: 3px;
+      margin-top: $pivotgrid-area-fields-margin-top;
       border: $pivotgrid-border;
       border-color: $pivotgrid-border-color;
       display: flex;
@@ -555,7 +594,7 @@ $pivotgrid-expand-icon-text-offset: 0 !default;
   }
 
   .dx-area-fields[group] {
-    padding: 5px;
+    padding: $pivotgrid-area-padding;
     background-color: $pivotgrid-totalcolor;
     display: flex;
   }
@@ -569,10 +608,10 @@ $pivotgrid-expand-icon-text-offset: 0 !default;
   .dx-pivotgrid-fields-container {
     .dx-position-indicator {
       &.dx-position-indicator-horizontal {
-        margin-left: -3px;
+        margin-left: -3px; // dx-fixed-size: pulls the element onto the grid line
 
         &.dx-position-indicator-last {
-          margin-left: 1px;
+          margin-left: $pivotgrid-position-indicator-last-margin-left-rtl;
         }
       }
     }
@@ -588,12 +627,12 @@ $pivotgrid-expand-icon-text-offset: 0 !default;
     .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;
         }
       }
     }
@@ -601,7 +640,7 @@ $pivotgrid-expand-icon-text-offset: 0 !default;
     .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;
         }
       }
@@ -609,7 +648,7 @@ $pivotgrid-expand-icon-text-offset: 0 !default;
 
     .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 {
@@ -709,7 +748,7 @@ $pivotgrid-expand-icon-text-offset: 0 !default;
 
     .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/popover/_index.scss b/packages/devextreme-scss/scss/widgets/base/popover/_index.scss
index d9a22934371f..04e6119f6a7d 100644
--- a/packages/devextreme-scss/scss/widgets/base/popover/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/popover/_index.scss
@@ -1,5 +1,5 @@
 @use "./mixins" as *;
-@include dx-popover-arrow-size(20px);
+@include dx-popover-arrow-size(20px); // dx-fixed-size: the arrow width; the mixin divides it by sqrt(2), so a var() cannot pass
 
 .dx-popover-arrow {
   position: absolute;
diff --git a/packages/devextreme-scss/scss/widgets/base/radioButton/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/radioButton/_mixins.scss
index 0b5446215e20..bd61ebb072a0 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;
@@ -80,7 +81,12 @@
   $useRipple: false,
   $focused-ripple-bg: transparent,
   $invalid-focused-ripple-bg: transparent,
+  $checked-border-color: null,
+  $invalid-border-color: null,
 ) {
+  $checked-border: if($checked-border-color, $checked-border-color, $checked-color);
+  $invalid-border: if($invalid-border-color, $invalid-border-color, $invalid-color);
+
   .dx-radiobutton-icon {
     border-color: $border-color;
     background-color: $foreground-color;
@@ -92,7 +98,7 @@
 
   .dx-radiobutton-icon-checked {
     @if $useRipple {
-      border-color: $checked-color;
+      border-color: $checked-border;
     }
 
     .dx-radiobutton-icon-dot {
@@ -151,7 +157,7 @@
 
   .dx-invalid {
     .dx-radiobutton-icon {
-      border-color: $invalid-color;
+      border-color: $invalid-border;
     }
 
     @if $useRipple {
diff --git a/packages/devextreme-scss/scss/widgets/base/radioGroup/_index.scss b/packages/devextreme-scss/scss/widgets/base/radioGroup/_index.scss
index 1d68e8a53168..44930257df80 100644
--- a/packages/devextreme-scss/scss/widgets/base/radioGroup/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/radioGroup/_index.scss
@@ -1,13 +1,17 @@
 @use "./mixins" as *;
 
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$radiogroup-radio-value-container-padding-inline-end: 10px !default;
+$radiogroup-collection-column-gap: 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;
   }
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/_common.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/_common.scss
index 996034b1de34..80ff146f7c18 100644
--- a/packages/devextreme-scss/scss/widgets/base/scheduler/_common.scss
+++ b/packages/devextreme-scss/scss/widgets/base/scheduler/_common.scss
@@ -1,9 +1,12 @@
 @use "sass:math";
 @use "../../base/mixins" as *;
 
-$scheduler-appointment-collector-margin: 3px !default;
+$scheduler-appointment-collector-margin: 3px; // dx-fixed-size: the collector margin, multiplied elsewhere so a var() cannot pass
 $scheduler-appointment-collector-height: 22px !default;
 
+$scheduler-common-collector-margin: null !default;
+$scheduler-common-collector-size: null !default;
+
 .dx-scheduler {
   .dx-empty-message {
     line-height: normal;
@@ -47,7 +50,7 @@ $scheduler-appointment-collector-height: 22px !default;
 }
 
 .dx-scheduler-adaptive .dx-scheduler-appointment-collector {
-  margin: 0 3px;
+  margin: $scheduler-common-collector-margin;
 }
 
 .dx-scheduler-work-space-mouse-selection {
@@ -69,7 +72,7 @@ $scheduler-appointment-collector-height: 22px !default;
 }
 
 .dx-scheduler-adaptive {
-  @media (max-width: 450px) {
+  @media (max-width: 450px) { // dx-literal-required: a media condition, var() is invalid here
     .dx-scheduler-view-switcher-label {
       display: none;
     }
@@ -82,9 +85,9 @@ $scheduler-appointment-collector-height: 22px !default;
 
   .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 c42229cab532..12192e5ab38a 100644
--- a/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss
@@ -1,3 +1,4 @@
+$scheduler-appointment-collector-height: 22px !default;
 $scheduler-appointment-base-color: null !default;
 $scheduler-appointment-start-color: null !default;
 $scheduler-appointment-active-color: null !default;
@@ -44,41 +45,77 @@ $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-appointment-collector-height: $scheduler-appointment-collector-height,
+);
+$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-tooltip-date-opacity: 0.8 !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-tooltip-date-opacity: $scheduler-tooltip-date-opacity
 );
 
 $scheduler-appointment-min-size: 4px !default;
 $scheduler-appointment-content-padding: 5px 7px !default;
 $scheduler-appointment-reduced-content-padding: 40px !default;
 
-$scheduler-hovered-appointment-top-shadow-size: 5px !default;
-$scheduler-focused-cell-shadow: inset 0 0 0 1px $scheduler-appointment-base-color !default;
+$scheduler-hovered-appointment-top-shadow-size: 5px; // dx-fixed-size: negated and composed into shadows, so a var() cannot pass
+$scheduler-focused-cell-shadow: inset 0 0 0 1px $scheduler-appointment-base-color; // dx-shadow-geometry
 
-$scheduler-vertical-appointment-resizable-hovering-shadow: inset 0 $scheduler-hovered-appointment-top-shadow-size 0 0 $scheduler-appointment-start-color, inset 0 -2px 0 0 $scheduler-appointment-start-color !default;
-$scheduler-vertical-appointment-hovering-shadow: inset 0 $scheduler-hovered-appointment-top-shadow-size 0 0 $scheduler-appointment-start-color !default;
-$scheduler-vertical-appointment-shadow: inset 0 2px 0 0 $scheduler-appointment-start-color !default;
-$scheduler-vertical-appointment-resizing-shadow: inset 0 -2px 0 0 $scheduler-appointment-start-color, $scheduler-vertical-appointment-shadow !default;
+$scheduler-vertical-appointment-resizable-hovering-shadow: inset 0 $scheduler-hovered-appointment-top-shadow-size 0 0 $scheduler-appointment-start-color, inset 0 -2px 0 0 $scheduler-appointment-start-color; // dx-shadow-geometry
+$scheduler-vertical-appointment-hovering-shadow: inset 0 $scheduler-hovered-appointment-top-shadow-size 0 0 $scheduler-appointment-start-color;
+$scheduler-vertical-appointment-shadow: inset 0 2px 0 0 $scheduler-appointment-start-color; // dx-shadow-geometry
+$scheduler-vertical-appointment-resizing-shadow: inset 0 -2px 0 0 $scheduler-appointment-start-color, $scheduler-vertical-appointment-shadow; // dx-shadow-geometry
 
 $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 !default;
-$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 !default;
-$scheduler-horizontal-appointment-hovering-shadow: inset $scheduler-hovered-appointment-top-shadow-size 0 0 0 $scheduler-appointment-start-color !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; // dx-shadow-geometry
+$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; // dx-shadow-geometry
+$scheduler-horizontal-appointment-hovering-shadow: inset $scheduler-hovered-appointment-top-shadow-size 0 0 0 $scheduler-appointment-start-color;
 $scheduler-horizontal-appointment-hovering-shadow-rtl: inset (-$scheduler-hovered-appointment-top-shadow-size) 0 0 0 $scheduler-appointment-start-color !default;
-$scheduler-horizontal-appointment-shadow: inset 2px 0 0 0 $scheduler-appointment-start-color !default;
-$scheduler-horizontal-appointment-shadow-rtl: inset -2px 0 0 0 $scheduler-appointment-start-color !default;
-$scheduler-horizontal-appointment-resizing-shadow: inset -2px 0 0 0 $scheduler-appointment-start-color, $scheduler-horizontal-appointment-shadow !default;
+$scheduler-horizontal-appointment-shadow: inset 2px 0 0 0 $scheduler-appointment-start-color; // dx-shadow-geometry
+$scheduler-horizontal-appointment-shadow-rtl: inset -2px 0 0 0 $scheduler-appointment-start-color; // dx-shadow-geometry
+$scheduler-horizontal-appointment-resizing-shadow: inset -2px 0 0 0 $scheduler-appointment-start-color, $scheduler-horizontal-appointment-shadow; // dx-shadow-geometry
 
 $scheduler-grouped-appointment-month-text-size: 12px !default;
 
-$scheduler-base-border: 1px solid !default;
-$scheduler-transparent-top-border: 1px solid transparent !default;
-$scheduler-accent-border: 1px solid !default;
+$scheduler-border-width: 1px !default;
+$scheduler-workspace-info-font-size: 20px !default;
+$scheduler-small-font-size: 14px !default;
+$scheduler-group-header-table-cell-height: 30px !default;
+$scheduler-month-date-text-size: 16px !default;
+$scheduler-month-date-text-padding: 6px !default;
+$scheduler-base-border: $scheduler-border-width solid !default;
+$scheduler-transparent-top-border: $scheduler-border-width solid transparent !default;
+$scheduler-accent-border: $scheduler-border-width solid !default;
 
 $scheduler-reduced-icon-offset: 5px !default;
 $scheduler-recurrence-icon-offset: 20px !default;
@@ -92,14 +129,54 @@ $scheduler-small-size-element-offset: $scheduler-left-column-width * $scheduler-
 
 $scheduler-time-indicator-font-size: 30px !default;
 $scheduler-time-indicator-size: 1px !default;
-$scheduler-time-indicator-top: 14px !default;
-$scheduler-time-indicator-left: 12px !default;
+$scheduler-time-indicator-top: 14px; // dx-fixed-size: negated at its use site
+$scheduler-time-indicator-left: 12px; // dx-fixed-size: negated at its use site
 
 $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 !default;
-$scheduler-time-indicator-text-shadow: $scheduler-time-indicator-shadow-color 1px 0 0 !default;
+$scheduler-time-indicator-shadow: 0 1px 0 0 $scheduler-time-indicator-shadow-color; // dx-shadow-geometry
+$scheduler-time-indicator-text-shadow: $scheduler-time-indicator-shadow-color 1px 0 0; // dx-shadow-geometry
+
+$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 +199,43 @@ $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-workspace-info-font-size: $scheduler-workspace-info-font-size,
+  $scheduler-small-font-size: $scheduler-small-font-size,
+  $scheduler-group-header-table-cell-height: $scheduler-group-header-table-cell-height,
+  $scheduler-month-date-text-size: $scheduler-month-date-text-size,
+  $scheduler-month-date-text-padding: $scheduler-month-date-text-padding,
+  $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 +262,32 @@ $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-horizontal-padding: 0 7px !default;
+$scheduler-appointment-recurrence-icon-top: 9px !default;
+$scheduler-header-panel-current-time-cell-height: 2px !default;
+$scheduler-appointment-content-recurrence-padding: 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 +339,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-horizontal-padding;
     }
 
     .dx-scheduler-appointment-reduced {
@@ -218,7 +351,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;
       }
     }
 
@@ -331,8 +464,8 @@ $scheduler-time-indicator-text-shadow: $scheduler-time-indicator-shadow-color 1p
         right: 0;
 
         /* NOTE: Cell has 1px table cell (<th>) border, so -1px bottom is ok here. */
-        bottom: -1px;
-        height: 2px;
+        bottom: -1px; // dx-px-nudge: sits on the 1px <th> border, see the note above
+        height: $scheduler-header-panel-current-time-cell-height;
         background-color: $scheduler-time-indicator-color;
       }
     }
@@ -346,14 +479,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-horizontal-padding;
     }
 
     .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content {
-      padding: 0 25px 0 7px;
+      padding: $scheduler-appointment-content-recurrence-padding;
 
       .dx-rtl & {
-        padding: 0 7px 0 25px;
+        padding: $scheduler-rtl-padding;
       }
     }
 
@@ -455,7 +588,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 +751,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 +798,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..3df40dd82882 100644
--- a/packages/devextreme-scss/scss/widgets/base/scheduler/_tooltip.scss
+++ b/packages/devextreme-scss/scss/widgets/base/scheduler/_tooltip.scss
@@ -1,20 +1,32 @@
+$scheduler-tooltip-date-opacity: 0.8 !default;
+
 @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 +36,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 +56,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 +65,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 +74,13 @@ $scheduler-tooltip-list-focused-bg: null !default;
 
       .dx-tooltip-appointment-item-content-date {
         text-align: left;
-        font-size: 12px;
-        opacity: 0.8;
-        margin-top: 10px;
+        font-size: $scheduler-tooltip-date-font-size;
+
+        @if $scheduler-tooltip-date-opacity {
+          opacity: $scheduler-tooltip-date-opacity;
+        }
+
+        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..1e94e8ee4645 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,22 @@ $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;
+
+    @if $details-opacity {
+      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 +97,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 +114,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..37cc4dd2b742 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,16 @@ $reduced-icon-offset: null !default;
 }
 
 .dx-scheduler-appointment-content-date {
-  opacity: 0.7;
+  @if $appointment-date-opacity {
+    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,11 +143,11 @@ $reduced-icon-offset: null !default;
 
   &.dx-resizable-resizing {
     z-index: 1000;
-    opacity: 0.7;
+    opacity: $appointment-resizing-opacity;
   }
 
   .dx-resizable-handle-left {
-    left: -1px;
+    left: -1px; // dx-px-nudge: pulls the resize handle onto the appointment's 1px border
   }
 
   .dx-scheduler-appointment-recurrence-icon {
@@ -146,7 +159,7 @@ $reduced-icon-offset: null !default;
 
     .dx-rtl & {
       right: auto;
-      left: 3px;
+      left: $appointment-reduced-icon-rtl-left;
     }
   }
 
@@ -159,12 +172,14 @@ $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;
+    @if $appointment-drag-source-opacity {
+      opacity: $appointment-drag-source-opacity;
+    }
   }
 }
 
diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/layout/_header.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/layout/_header.scss
index 76a342a3bfbb..4890b148e7e8 100644
--- a/packages/devextreme-scss/scss/widgets/base/scheduler/layout/_header.scss
+++ b/packages/devextreme-scss/scss/widgets/base/scheduler/layout/_header.scss
@@ -6,7 +6,7 @@ $arrow-down: "\f016" !default;
 ) {
   border: $border;
   border-color: $border-color;
-  margin-bottom: -1px;
+  margin-bottom: -1px; // dx-px-nudge: collapses the header border with the row below
   position: relative;
   z-index: 1;
   width: 100%;
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 dec89907e065..4d87a883b693 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,21 +28,33 @@ $scheduler-workspace-month-text-color: null !default;
 $scheduler-first-month-cell-background-color: null !default;
 
 $scheduler-panel-text-color: null !default;
-
-$scheduler-timepanel-cell-offset: 20px !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; // dx-fixed-size: multiplied elsewhere, so a var() cannot pass
 $scheduler-workspace-info-font-size: 20px !default;
 $scheduler-small-font-size: 14px !default;
 
-$scheduler-current-time-cell-border-size: 2px !default;
+$scheduler-current-time-cell-border-size: 2px; // dx-fixed-size: multiplied elsewhere, so a var() cannot pass
 
-$scheduler-workspace-date-table-cell-height: 50px !default;
-$scheduler-all-day-table-cell-height: $scheduler-workspace-date-table-cell-height * 1.5 !default;
+$scheduler-workspace-date-table-cell-height: 50px; // dx-fixed-size: four derived heights multiply it, so a var() cannot pass
+$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 !default;
 $scheduler-vertical-grouped-all-day-table-cell-height: $scheduler-workspace-date-table-cell-height !default;
-$scheduler-header-panel-table-cell-height: $scheduler-workspace-date-table-cell-height - 10px !default;
+$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)); // dx-px-nudge: -10px under the workspace cell height
 $scheduler-group-header-table-cell-height: 30px !default;
 
-$scheduler-group-header-table-cell-width: 80px !default;
+$scheduler-group-header-table-cell-width: 80px; // dx-fixed-size: multiplied elsewhere, so a var() cannot pass
 
 $scheduler-month-date-text-size: 16px !default;
 
@@ -61,21 +74,42 @@ $scheduler-month-date-text-padding: 6px !default;
   $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 !default;
 
   &::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)); // dx-px-nudge: -1px under the derived top offset, so the indicator overlaps the border
     right: 0;
     width: 100%;
     height: $scheduler-current-time-cell-border-size;
@@ -190,12 +224,12 @@ $scheduler-month-date-text-padding: 6px !default;
 
   &: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 !default;
   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;
 }
 
@@ -314,7 +348,7 @@ $scheduler-month-date-text-padding: 6px !default;
       @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;
@@ -368,7 +402,7 @@ $scheduler-month-date-text-padding: 6px !default;
       @include flex-container(row, nowrap);
 
       flex: 0 0 auto;
-      padding: 0 5px;
+      padding: 0 5px; // dx-fixed-size: horizontal padding of the time panel cell
       height: 100%;
       width: $scheduler-left-column-width;
       justify-content: flex-start;
@@ -567,7 +601,7 @@ $scheduler-month-date-text-padding: 6px !default;
   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();
@@ -578,7 +612,7 @@ $scheduler-month-date-text-padding: 6px !default;
   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;
   }
 }
@@ -592,7 +626,7 @@ $scheduler-month-date-text-padding: 6px !default;
   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);
@@ -657,10 +691,10 @@ $scheduler-month-date-text-padding: 6px !default;
   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;
+    margin-top: -13px; // dx-px-nudge: lifts the hour label to straddle the cell border
   }
 
   .dx-scheduler-small & {
@@ -670,9 +704,9 @@ $scheduler-month-date-text-padding: 6px !default;
 
   &::after {
     position: absolute;
-    bottom: -1px;
-    width: 10%;
-    height: 1px;
+    bottom: -1px; // dx-px-nudge: sits the time indicator on the cell border
+    width: $scheduler-views-time-indicator-width;
+    height: $scheduler-views-time-indicator-height;
     right: 0;
     background-color: $scheduler-base-border-color;
   }
@@ -756,7 +790,7 @@ $scheduler-month-date-text-padding: 6px !default;
 
     .dx-scheduler-group-header-content {
       display: flex;
-      height: 40px;
+      height: $scheduler-views-group-header-content-height;
 
       > div {
         margin: auto;
@@ -794,7 +828,7 @@ $scheduler-month-date-text-padding: 6px !default;
 .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;
@@ -807,7 +841,7 @@ $scheduler-month-date-text-padding: 6px !default;
   &.dx-scheduler-work-space-work-week {
     .dx-scheduler-all-day-title {
       top: 0;
-      height: 50px !important; // stylelint-disable-line declaration-no-important
+      height: $scheduler-workspace-date-table-cell-height !important; // stylelint-disable-line declaration-no-important
       border-bottom: none;
     }
   }
@@ -818,7 +852,7 @@ $scheduler-month-date-text-padding: 6px !default;
   }
 
   .dx-scheduler-all-day-table-row {
-    height: 50px;
+    height: $scheduler-workspace-date-table-cell-height;
   }
 
   .dx-scheduler-time-panel-cell {
@@ -833,13 +867,13 @@ $scheduler-month-date-text-padding: 6px !default;
 
     &.dx-scheduler-last-group-cell {
       border-bottom: none;
-      box-shadow: inset 0 -1px 0 $scheduler-base-border-color;
+      box-shadow: inset 0 -1px 0 $scheduler-base-border-color; // dx-line-width: hairline standing in for the removed border-bottom
     }
   }
 
   .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;
     }
   }
@@ -855,7 +889,7 @@ $scheduler-month-date-text-padding: 6px !default;
 
 .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;
   }
@@ -931,7 +965,7 @@ $scheduler-month-date-text-padding: 6px !default;
       }
 
       .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 61291d143064..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
@@ -7,9 +7,11 @@ $scheduler-other-month-cell-opacity: null !default;
 $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/day/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/views/day/_index.scss
index 4d1205c67e90..7322fcc918ac 100644
--- a/packages/devextreme-scss/scss/widgets/base/scheduler/views/day/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/scheduler/views/day/_index.scss
@@ -42,7 +42,7 @@ $scheduler-base-border-color: null !default;
 
   &:not(.dx-scheduler-work-space-grouped) {
     .dx-scheduler-header-panel {
-      margin-top: 1px;
+      margin-top: 1px; // dx-px-nudge: keeps the ungrouped header panel off the border above
     }
   }
 
diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/views/month/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/views/month/_index.scss
index f19bd0a0e64a..d08189bb53ff 100644
--- a/packages/devextreme-scss/scss/widgets/base/scheduler/views/month/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/scheduler/views/month/_index.scss
@@ -70,7 +70,7 @@ $scheduler-first-month-cell-background-color: null !default;
     }
 
     .dx-scheduler-group-header {
-      box-shadow: 0 -2px 0 $scheduler-base-border-color;
+      box-shadow: 0 -2px 0 $scheduler-base-border-color; // dx-line-width: 2px line standing in for the removed border-bottom
       border-bottom: none;
     }
 
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 7c7451141b9a..09ce1ade4ba9 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 8805dcef56c5..dffb3a8ba2a6 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
@@ -8,6 +8,11 @@ $scheduler-accent-border-color: null !default;
 
 $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,
 .dx-scheduler-timeline-day,
@@ -18,21 +23,21 @@ $scheduler-timeline-min-height: 100px !default;
 
   &.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 !default;
 .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 !default;
 
   &.dx-scheduler-work-space-group-by-date {
     .dx-scheduler-group-header {
-      width: 200px;
+      width: $scheduler-timeline-cell-width;
     }
   }
 
@@ -180,7 +185,7 @@ $scheduler-timeline-min-height: 100px !default;
     }
 
     .dx-scheduler-header-panel-empty-cell {
-      border-bottom: 1px solid;
+      border-bottom: 1px solid; // dx-line-width: hairline under the empty header cell
       border-bottom-color: $scheduler-accent-border-color;
     }
   }
diff --git a/packages/devextreme-scss/scss/widgets/base/scrollable/_index.scss b/packages/devextreme-scss/scss/widgets/base/scrollable/_index.scss
index 0db7fd377b88..579bfc1b5a12 100644
--- a/packages/devextreme-scss/scss/widgets/base/scrollable/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/scrollable/_index.scss
@@ -1,6 +1,11 @@
 @use "sass:selector";
 @use "./mixins" as *;
 
+// 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;
 }
@@ -150,7 +155,7 @@
   height: 100%;
 
   .dx-scrollable-scroll {
-    width: 5px;
+    width: $scrollable-scroll-width;
   }
 }
 
@@ -160,7 +165,7 @@
   width: 100%;
 
   .dx-scrollable-scroll {
-    height: 5px;
+    height: $scrollable-scroll-height;
   }
 }
 
@@ -172,7 +177,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 293fc356eec7..b7a01ed33050 100644
--- a/packages/devextreme-scss/scss/widgets/base/splitter/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/splitter/_index.scss
@@ -1,3 +1,6 @@
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$splitter-resize-handle-gap: 8px !default;
+
 .dx-splitter {
   display: flex;
   height: 100%;
@@ -29,7 +32,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/stepper/layout/step/_index.scss b/packages/devextreme-scss/scss/widgets/base/stepper/layout/step/_index.scss
index 954bc2b67f4b..39b3e48ddf4e 100644
--- a/packages/devextreme-scss/scss/widgets/base/stepper/layout/step/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/stepper/layout/step/_index.scss
@@ -17,7 +17,7 @@
   transition-timing-function: ease-in-out;
   border-style: solid;
   border-radius: 999em;
-  border-width: 1px;
+  border-width: 1px; // dx-line-width: hairline, the same in every theme
 }
 
 .dx-step-content {
diff --git a/packages/devextreme-scss/scss/widgets/base/stepper/layout/step/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/stepper/layout/step/_mixins.scss
index f5c4a4aa01a3..8e1ca96e4bc3 100644
--- a/packages/devextreme-scss/scss/widgets/base/stepper/layout/step/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/base/stepper/layout/step/_mixins.scss
@@ -68,11 +68,20 @@
   $disabled-text-color,
   $disabled-bg,
   $disabled-shadow,
+  /*
+   * The indicator is a dot on top of the connector line. Three box-shadow rings shape it, from the
+   * inside out: the selection ring starts at $indicator-ring-inset and ends at $indicator-ring-size,
+   * and $indicator-halo-size is the gap the indicator punches in the connector behind it. The
+   * defaults are the values every theme drew before the sizes were opened.
+   */
+  $indicator-ring-inset: 2px,
+  $indicator-ring-size: 4px,
+  $indicator-halo-size: 8px,
 ) {
   .dx-step-indicator {
     background-color: $base-bg;
     border-color: $base-border-color;
-    box-shadow: 0 0 0 8px $shadow-color;
+    box-shadow: 0 0 0 $indicator-halo-size $shadow-color;
     color: $base-text-color;
   }
 
@@ -108,7 +117,7 @@
         color: $selected-text-color;
         border-color: $selected-bg;
         background-color: $selected-bg;
-        box-shadow: 0 0 0 8px $shadow-color;
+        box-shadow: 0 0 0 $indicator-halo-size $shadow-color;
       }
 
       .dx-step-caption {
@@ -119,7 +128,7 @@
         .dx-step-indicator {
           border-color: $selected-invalid-bg;
           background-color: $selected-invalid-bg;
-          box-shadow: 0 0 0 8px $shadow-color;
+          box-shadow: 0 0 0 $indicator-halo-size $shadow-color;
         }
 
         .dx-step-caption {
@@ -138,7 +147,7 @@
         color: $selected-text-color;
         border-color: $selected-bg;
         background-color: $selected-bg;
-        box-shadow: 0 0 0 2px $shadow-color, 0 0 0 4px $selected-bg, 0 0 0 8px $shadow-color;
+        box-shadow: 0 0 0 $indicator-ring-inset $shadow-color, 0 0 0 $indicator-ring-size $selected-bg, 0 0 0 $indicator-halo-size $shadow-color;
       }
 
       .dx-step-caption {
@@ -149,7 +158,7 @@
         .dx-step-indicator {
           border-color: $selected-invalid-bg;
           background-color: $selected-invalid-bg;
-          box-shadow: 0 0 0 2px $shadow-color, 0 0 0 4px $selected-invalid-bg, 0 0 0 8px $shadow-color;
+          box-shadow: 0 0 0 $indicator-ring-inset $shadow-color, 0 0 0 $indicator-ring-size $selected-invalid-bg, 0 0 0 $indicator-halo-size $shadow-color;
         }
 
         .dx-step-caption {
@@ -192,7 +201,7 @@
 
     &.dx-state-focused {
       .dx-step-indicator {
-        box-shadow: 0 0 0 2px $shadow-color, 0 0 0 4px $selected-bg, 0 0 0 8px $shadow-color;
+        box-shadow: 0 0 0 $indicator-ring-inset $shadow-color, 0 0 0 $indicator-ring-size $selected-bg, 0 0 0 $indicator-halo-size $shadow-color;
       }
 
       &.dx-step-completed {
@@ -206,19 +215,19 @@
         .dx-step-indicator {
           border-color: $selected-hover-bg;
           background-color: $selected-hover-bg;
-          box-shadow: 0 0 0 2px $shadow-color, 0 0 0 4px $selected-hover-bg, 0 0 0 8px $shadow-color;
+          box-shadow: 0 0 0 $indicator-ring-inset $shadow-color, 0 0 0 $indicator-ring-size $selected-hover-bg, 0 0 0 $indicator-halo-size $shadow-color;
         }
       }
 
       &.dx-state-hover {
         .dx-step-indicator {
-          box-shadow: 0 0 0 2px $shadow-color, 0 0 0 4px $selected-hover-bg, 0 0 0 8px $shadow-color;
+          box-shadow: 0 0 0 $indicator-ring-inset $shadow-color, 0 0 0 $indicator-ring-size $selected-hover-bg, 0 0 0 $indicator-halo-size $shadow-color;
         }
       }
 
       &.dx-step-invalid {
         .dx-step-indicator {
-          box-shadow: 0 0 0 2px $shadow-color, 0 0 0 4px $selected-invalid-bg, 0 0 0 8px $shadow-color;
+          box-shadow: 0 0 0 $indicator-ring-inset $shadow-color, 0 0 0 $indicator-ring-size $selected-invalid-bg, 0 0 0 $indicator-halo-size $shadow-color;
         }
 
         &.dx-step-completed {
@@ -232,25 +241,25 @@
           .dx-step-indicator {
             border-color: $selected-invalid-hover-bg;
             background-color: $selected-invalid-hover-bg;
-            box-shadow: 0 0 0 2px $shadow-color, 0 0 0 4px $selected-invalid-hover-bg, 0 0 0 8px $shadow-color;
+            box-shadow: 0 0 0 $indicator-ring-inset $shadow-color, 0 0 0 $indicator-ring-size $selected-invalid-hover-bg, 0 0 0 $indicator-halo-size $shadow-color;
           }
         }
 
         &.dx-state-hover {
           .dx-step-indicator {
-            box-shadow: 0 0 0 2px $shadow-color, 0 0 0 4px $selected-invalid-hover-bg, 0 0 0 8px $shadow-color;
+            box-shadow: 0 0 0 $indicator-ring-inset $shadow-color, 0 0 0 $indicator-ring-size $selected-invalid-hover-bg, 0 0 0 $indicator-halo-size $shadow-color;
           }
         }
       }
 
       &.dx-state-disabled {
         .dx-step-indicator {
-          box-shadow: 0 0 0 2px $disabled-shadow, 0 0 0 4px $selected-bg, 0 0 0 8px $disabled-shadow;
+          box-shadow: 0 0 0 $indicator-ring-inset $disabled-shadow, 0 0 0 $indicator-ring-size $selected-bg, 0 0 0 $indicator-halo-size $disabled-shadow;
         }
 
         &.dx-step-invalid {
           .dx-step-indicator {
-            box-shadow: 0 0 0 2px $disabled-shadow, 0 0 0 4px $selected-invalid-bg, 0 0 0 8px $disabled-shadow;
+            box-shadow: 0 0 0 $indicator-ring-inset $disabled-shadow, 0 0 0 $indicator-ring-size $selected-invalid-bg, 0 0 0 $indicator-halo-size $disabled-shadow;
           }
         }
       }
@@ -309,17 +318,17 @@
     &.dx-state-focused {
       .dx-step-selected {
         .dx-step-indicator {
-          box-shadow: 0 0 0 8px $shadow-color;
+          box-shadow: 0 0 0 $indicator-halo-size $shadow-color;
         }
 
         &.dx-state-focused {
           .dx-step-indicator {
-            box-shadow: 0 0 0 2px $shadow-color, 0 0 0 4px $selected-hover-bg, 0 0 0 8px $shadow-color;
+            box-shadow: 0 0 0 $indicator-ring-inset $shadow-color, 0 0 0 $indicator-ring-size $selected-hover-bg, 0 0 0 $indicator-halo-size $shadow-color;
           }
 
           &.dx-step-invalid {
             .dx-step-indicator {
-              box-shadow: 0 0 0 2px $shadow-color, 0 0 0 4px $selected-invalid-hover-bg, 0 0 0 8px $shadow-color;
+              box-shadow: 0 0 0 $indicator-ring-inset $shadow-color, 0 0 0 $indicator-ring-size $selected-invalid-hover-bg, 0 0 0 $indicator-halo-size $shadow-color;
             }
           }
         }
diff --git a/packages/devextreme-scss/scss/widgets/base/switch/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/switch/_mixins.scss
index 8cf153a47a4c..b1462249c2ac 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(
@@ -11,6 +12,11 @@
   $switch-handle-margin,
   $switch-handle-border-radius,
   $switch-transition,
+  // A pill: any radius past half the track height draws the same shape, so the default is a number
+  // large enough to be one at every size the themes use.
+  $switch-container-border-radius: 500px,
+  $switch-label-padding: 4px 0,
+  $switch-off-padding-bottom: 10px,
 ) {
   .dx-switch {
     width: $switch-width;
@@ -20,10 +26,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;
@@ -41,7 +47,7 @@
       content: "";
       width: 100%;
       height: $switch-container-height;
-      border-radius: 500px;
+      border-radius: $switch-container-border-radius;
       margin: $switch-container-vertical-margin 0;
       transition: $switch-transition;
     }
@@ -56,7 +62,7 @@
   .dx-switch-off {
     flex-shrink: 0;
     float: left;
-    padding: 4px 0;
+    padding: $switch-label-padding;
     width: 50%;
     height: $switch-height;
     color: transparent;
@@ -70,7 +76,7 @@
 
   .dx-switch-off {
     display: none;
-    padding-bottom: 10px;
+    padding-bottom: $switch-off-padding-bottom;
     background-color: transparent;
   }
 
@@ -191,7 +197,26 @@
   $switch-invalid-color-hover,
   $switch-invalid-color-focused,
   $base-disabled-border-color,
-) {
+  $disabled-opacity-reset: 1,
+  $trigger-off-bg: null,
+  $trigger-off-bg-hover: null,
+  $trigger-off-bg-active: null,
+  $switch-on-bg-hover: null,
+  $switch-on-bg-active: null,
+  $switch-on-disabled-border: null,
+  $switch-invalid-bg: null,
+  $switch-invalid-bg-hover: null,
+  $switch-invalid-bg-active: null,) {
+  $trigger-off: if($trigger-off-bg, $trigger-off-bg, $switch-off-border-color);
+  $trigger-off-hovered: if($trigger-off-bg-hover, $trigger-off-bg-hover, $switch-off-border-color-hover);
+  $trigger-off-pressed: if($trigger-off-bg-active, $trigger-off-bg-active, $switch-off-border-color-active);
+  $on-bg-hovered: if($switch-on-bg-hover, $switch-on-bg-hover, $switch-accent-hover);
+  $on-bg-pressed: if($switch-on-bg-active, $switch-on-bg-active, $switch-accent-active);
+  $on-border-disabled: if($switch-on-disabled-border, $switch-on-disabled-border, $switch-on-disabled-bg);
+  $invalid-bg: if($switch-invalid-bg, $switch-invalid-bg, $switch-invalid-color);
+  $invalid-bg-hovered: if($switch-invalid-bg-hover, $switch-invalid-bg-hover, $switch-invalid-color-hover);
+  $invalid-bg-pressed: if($switch-invalid-bg-active, $switch-invalid-bg-active, $switch-invalid-color-focused);
+
   .dx-switch-container {
     &::before {
       background-color: $switch-bg;
@@ -210,7 +235,7 @@
 
   .dx-switch {
     .dx-switch-handle::before {
-      background-color: $switch-off-border-color;
+      background-color: $trigger-off;
     }
 
     &.dx-state-hover {
@@ -258,7 +283,7 @@
 
     &.dx-state-disabled,
     &.dx-state-readonly {
-      opacity: 1;
+      opacity: $disabled-opacity-reset;
 
       .dx-switch-container::before {
         border-color: $base-disabled-border-color;
@@ -274,14 +299,14 @@
   .dx-switch:not(.dx-switch-on-value):not(.dx-state-readonly) {
     &.dx-state-hover {
       .dx-switch-handle::before {
-        background-color: $switch-off-border-color-hover;
+        background-color: $trigger-off-hovered;
       }
     }
 
     &.dx-state-active,
     &.dx-state-focused {
       .dx-switch-handle::before {
-        background-color: $switch-off-border-color-active;
+        background-color: $trigger-off-pressed;
       }
     }
   }
@@ -299,12 +324,12 @@
     &.dx-state-hover {
       .dx-switch-container::before {
         border-color: $switch-accent-hover;
-        background-color: $switch-accent-hover;
+        background-color: $on-bg-hovered;
       }
 
       &.dx-invalid:not(.dx-state-readonly) {
         .dx-switch-container::before {
-          background-color: $switch-invalid-color-hover;
+          background-color: $invalid-bg-hovered;
         }
       }
     }
@@ -313,26 +338,26 @@
     &.dx-state-focused {
       .dx-switch-container::before {
         border-color: $switch-accent-active;
-        background-color: $switch-accent-active;
+        background-color: $on-bg-pressed;
       }
 
       &.dx-invalid:not(.dx-state-readonly) {
         .dx-switch-container::before {
-          background-color: $switch-invalid-color-focused;
+          background-color: $invalid-bg-pressed;
         }
       }
     }
 
     &.dx-invalid {
       .dx-switch-container::before {
-        background-color: $switch-invalid-color;
+        background-color: $invalid-bg;
       }
     }
 
     &.dx-state-disabled,
     &.dx-state-readonly {
       .dx-switch-container::before {
-        border-color: $switch-on-disabled-bg;
+        border-color: $on-border-disabled;
         background-color: $switch-on-disabled-bg;
       }
     }
@@ -353,11 +378,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 f17060dd4e77..40f0dbab562d 100644
--- a/packages/devextreme-scss/scss/widgets/base/textEditor/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/textEditor/_index.scss
@@ -2,6 +2,9 @@
 @use "./mixins" as *;
 @use "sass:string" as string;
 
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$texteditor-clear-button-area-width: 34px !default;
+
 .dx-texteditor {
   display: block;
 
@@ -93,7 +96,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 724b0602c7d2..06fd678b76ea 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";
 
 @mixin dx-editor-content-wrapper() {
   display: flex;
@@ -17,7 +18,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;
@@ -49,7 +50,7 @@
   $texteditor-input-top-padding
 ) {
   .dx-label {
-    padding: 0 2px;
+    padding: 0 2px; // dx-fixed-size: fluent-next does not call this mixin, so the value only reaches the legacy themes
     border-top-width: $borderWidth;
 
     span {
@@ -156,31 +157,55 @@
   $label-margin-top-diff,
   $texteditor-label-outside-font-size,
   $texteditor-label-outside-height,
+  // The label widens itself by its padding and pulls the same amount back, so the box grows around
+  // the text without moving it: the margin is derived, not a second decision.
+  $label-padding-inline: 2px,
+  $label-border-radius: 1px,
+  $label-backdrop-height: 3px,
 ) {
+  $label-margin-inline: if(
+    meta.type-of($label-padding-inline) == number,
+    -$label-padding-inline,
+    calc(-1 * #{$label-padding-inline})
+  );
+
   .dx-editor-outlined {
     .dx-texteditor-label {
       inset: 0;
     }
 
     .dx-label {
-      padding: 0 2px;
+      padding: 0 $label-padding-inline;
       border-top-width: 0;
       border-bottom-width: $label-border-width;
       border-inline-width: 0;
       border-style: solid;
       border-top-color: $texteditor-border-color;
       border-bottom-color: $texteditor-border-bottom-color;
-      margin-left: -2px;
-      margin-right: -2px;
-      border-radius: 1px;
-      clip-path: inset(-$texteditor-label-font-size 1px -1px 1px);
+      margin-left: $label-margin-inline;
+      margin-right: $label-margin-inline;
+      border-radius: $label-border-radius;
+
+      /*
+       * The clip reaches a whole font-size above the label to uncover the notch. A theme that feeds
+       * a var() here leaves nothing for Sass to negate, and `-var(…)` is not valid CSS: the browser
+       * drops the whole declaration and the notch stops being clipped. Same guard as the transform
+       * below, which had it from the start.
+       *
+       * dx-line-width: the notch is carved at the label border, a hairline that must not thicken.
+       */
+      clip-path: inset(#{if(
+        meta.type-of($texteditor-label-font-size) == number,
+        -$texteditor-label-font-size,
+        calc(-1 * #{$texteditor-label-font-size})
+      )} 1px -1px 1px);
 
       span {
         position: relative;
         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;
       }
@@ -197,7 +222,7 @@
       border-start-start-radius: $texteditor-input-border-radius;
       border-end-start-radius: $texteditor-input-border-radius;
       min-width: $label-before-min-width;
-      clip-path: inset(-1px 1px -1px -1px);
+      clip-path: inset(-1px 1px -1px -1px); // dx-line-width: the notch is carved at the label border, a hairline that must not thicken with the scale
     }
 
     .dx-label-after {
@@ -212,16 +237,16 @@
       border-inline-end-color: $texteditor-border-color;
       border-start-end-radius: $texteditor-input-border-radius;
       border-end-end-radius: $texteditor-input-border-radius;
-      clip-path: inset(-1px -1px -1px 1px);
+      clip-path: inset(-1px -1px -1px 1px); // dx-line-width: the notch is carved at the label border, a hairline that must not thicken with the scale
     }
 
     &.dx-rtl {
       .dx-label-before {
-        clip-path: inset(-1px -1px -1px 1px);
+        clip-path: inset(-1px -1px -1px 1px); // dx-line-width: the notch is carved at the label border, a hairline that must not thicken with the scale
       }
 
       .dx-label-after {
-        clip-path: inset(-1px 1px -1px -1px);
+        clip-path: inset(-1px 1px -1px -1px); // dx-line-width: the notch is carved at the label border, a hairline that must not thicken with the scale
       }
     }
 
@@ -235,9 +260,9 @@
             content: "";
             width: 100%;
             position: absolute;
-            height: 3px;
-            top: -$label-backdrop-offset-y;
-            margin-inline-start: -2px;
+            height: $label-backdrop-height;
+            top: if(meta.type-of($label-backdrop-offset-y) == number, -$label-backdrop-offset-y, calc(-1 * #{$label-backdrop-offset-y}));
+            margin-inline-start: $label-margin-inline;
             background-color: $label-backdrop-bg;
           }
         }
@@ -299,8 +324,8 @@
         clip-path: none;
         border-top-width: $label-border-width;
         border-radius: 0;
-        border-start-end-radius: 1px;
-        border-end-end-radius: 1px;
+        border-start-end-radius: $label-border-radius;
+        border-end-end-radius: $label-border-radius;
         margin-inline-start: 0;
         padding: 0;
 
@@ -311,9 +336,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);
         }
       }
     }
@@ -330,7 +355,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(
@@ -433,7 +458,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 {
@@ -461,7 +486,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 {
@@ -548,7 +573,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;
       }
 
@@ -578,7 +603,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 {
@@ -625,8 +650,8 @@
 ) {
   .dx-texteditor-buttons-container {
     > .dx-button {
-      margin-top: 1px;
-      margin-bottom: 1px;
+      margin-top: 1px; // dx-fixed-size: fluent-next does not call this mixin, so the value only reaches the legacy themes
+      margin-bottom: 1px; // dx-fixed-size: fluent-next does not call this mixin, so the value only reaches the legacy themes
       margin-inline-start: $generic-texteditor-custom-button-margin;
       margin-inline-end: $generic-texteditor-custom-button-margin;
 
@@ -688,6 +713,11 @@
   $material-filled-texteditor-spin-button-horizontal-padding,
   $last-button-horizontal-padding,
   $material-button-vertical-padding,
+  $button-margin-block-start: 1px,
+  $button-margin-block-end: 3px,
+  $button-icon-margin-block-start: 1px,
+  $button-icon-margin-block-start-with-text: 3px,
+  $button-icononly-padding: 2px,
 ) {
   .dx-texteditor {
     .dx-texteditor-buttons-container {
@@ -745,25 +775,25 @@
         .dx-texteditor-buttons-container {
           > .dx-button.dx-button-mode-text {
             height: $material-underlined-editor-button-height;
-            margin-top: 1px;
-            margin-bottom: 3px;
+            margin-top: $button-margin-block-start;
+            margin-bottom: $button-margin-block-end;
             margin-inline-end: $material-editor-custom-button-margin;
             margin-inline-start: $material-editor-custom-button-margin;
 
             .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-px-nudge: -1px under the button's own padding
 
               .dx-icon {
                 align-self: center;
-                margin-top: 1px;
+                margin-top: $button-icon-margin-block-start;
               }
             }
 
             &.dx-button-has-text {
               .dx-button-content .dx-icon {
-                margin-top: 3px;
+                margin-top: $button-icon-margin-block-start-with-text;
               }
             }
 
@@ -771,7 +801,7 @@
               min-width: $material-underlined-editor-button-height;
 
               .dx-button-content {
-                padding: 2px;
+                padding: $button-icononly-padding;
               }
             }
           }
@@ -799,25 +829,25 @@
       .dx-texteditor-buttons-container {
         > .dx-button.dx-button-mode-text {
           height: $material-underlined-editor-button-height;
-          margin-top: 1px;
-          margin-bottom: 3px;
+          margin-top: $button-margin-block-start;
+          margin-bottom: $button-margin-block-end;
           margin-inline-end: $material-editor-custom-button-margin;
           margin-inline-start: $material-editor-custom-button-margin;
 
           .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-px-nudge: -1px under the button's own padding
 
             .dx-icon {
               align-self: center;
-              margin-top: 1px;
+              margin-top: $button-icon-margin-block-start;
             }
           }
 
           &.dx-button-has-text {
             .dx-button-content .dx-icon {
-              margin-top: 3px;
+              margin-top: $button-icon-margin-block-start-with-text;
             }
           }
 
@@ -825,7 +855,7 @@
             min-width: $material-underlined-editor-button-height;
 
             .dx-button-content {
-              padding: 2px;
+              padding: $button-icononly-padding;
             }
           }
         }
diff --git a/packages/devextreme-scss/scss/widgets/base/timeView/_index.scss b/packages/devextreme-scss/scss/widgets/base/timeView/_index.scss
index fc25e00f13f7..a45e473dcc35 100644
--- a/packages/devextreme-scss/scss/widgets/base/timeView/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/timeView/_index.scss
@@ -1,5 +1,9 @@
 @use "./mixins";
 
+// Design sizing values (parametrizable; fluent-next injects tokens)
+$timeview-numberbox-width: 70px !default;
+$timeview-numberbox-spin-touch-friendly-width: 110px !default;
+
 .dx-timeview {
   &.dx-state-disabled,
   .dx-state-disabled {
@@ -15,9 +19,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;
   }
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/timeView/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/timeView/_mixins.scss
index 3f220dee2ca5..5312c83fe28d 100644
--- a/packages/devextreme-scss/scss/widgets/base/timeView/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/base/timeView/_mixins.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+@use "sass:meta";
 @use "sass:string";
 @use "../string" as *;
 
@@ -9,12 +11,23 @@
   background-image: string.unquote($uri);
 }
 
-@mixin clock-action-icons-mixin($accent-color, $background-color, $digit-color) {
+@mixin clock-action-icons-mixin(
+  $accent-color,
+  $background-color,
+  $digit-color,
+  // The clock face is the SVG behind it, so its size scales the whole dial; the arrows are centred
+  // on the dial with half their own width, which is why the offset is a knob of its own.
+  $clock-size: 182px,
+  $arrow-width: 10px,
+  $arrow-offset: if(
+    meta.type-of($arrow-width) == number,
+    math.div(-$arrow-width, 2),
+    calc(#{$arrow-width} / -2)
+  ),
+) {
   .dx-timeview-clock {
     @include clock-colored-image(data-uri("image/svg+xml;charset=UTF-8", "images/widgets/common/timeView/clock-bg.svg"), $accent-color, $background-color, $digit-color);
 
-    $clock-size: 182px;
-
     min-width: $clock-size;
     min-height: $clock-size;
     max-height: $clock-size;
@@ -27,8 +40,8 @@
   .dx-timeview-minutearrow {
     position: absolute;
     left: 50%;
-    width: 10px;
-    margin-left: -5px;
+    width: $arrow-width;
+    margin-left: $arrow-offset;
     height: 50%;
     background-position: bottom;
     background-repeat: no-repeat;
diff --git a/packages/devextreme-scss/scss/widgets/base/toolbar/_index.scss b/packages/devextreme-scss/scss/widgets/base/toolbar/_index.scss
index b808f435693c..e216ebb33083 100644
--- a/packages/devextreme-scss/scss/widgets/base/toolbar/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/toolbar/_index.scss
@@ -1,5 +1,10 @@
 @use "../mixins" as *;
 
+// 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%;
 
@@ -49,7 +54,7 @@
 }
 
 .dx-toolbar-item {
-  padding: 0 5px;
+  padding: $toolbar-item-padding;
 
   @include dx-toolbar-item();
 }
@@ -60,7 +65,7 @@
 
 .dx-toolbar-group {
   float: left;
-  margin: 0 10px;
+  margin: $toolbar-group-margin;
 }
 
 .dx-toolbar-before,
@@ -93,8 +98,8 @@
   @include dx-overflow();
 
   // NOTE: Prevent croping of italic text in label (T126187)
-  margin: 0 -5px;
-  padding: 0 5px;
+  margin: 0 -5px; // dx-fixed-size: pulls the items flush with the toolbar edge
+  padding: $toolbar-item-padding;
 }
 
 .dx-toolbar-center {
@@ -210,7 +215,7 @@
 .dx-toolbar-item-content {
   > .dx-texteditor,
   &.dx-texteditor {
-    width: 150px;
+    width: $toolbar-texteditor-width;
   }
 }
 
diff --git a/packages/devextreme-scss/scss/widgets/base/toolbar/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/toolbar/_mixins.scss
index e76f9e4da44e..4627f47ac1ec 100644
--- a/packages/devextreme-scss/scss/widgets/base/toolbar/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/base/toolbar/_mixins.scss
@@ -1,17 +1,20 @@
 @mixin dx-toolbar-focus-outline(
   $accent-color,
   $border-radius,
+  // The focus ring's geometry, on the same role as its colour and radius.
+  $outline-width: 2px,
+  $outline-offset: 1px,
 ) {
   .dx-toolbar.dx-toolbar-focus-mode {
     [tabindex="0"]:focus-visible:not(.dx-toolbar-item) {
-      outline: 2px solid $accent-color;
-      outline-offset: 1px;
+      outline: $outline-width solid $accent-color;
+      outline-offset: $outline-offset;
       border-radius: $border-radius;
     }
 
     .dx-toolbar-item[tabindex="0"]:focus-visible .dx-menu {
-      outline: 2px solid $accent-color;
-      outline-offset: 1px;
+      outline: $outline-width solid $accent-color;
+      outline-offset: $outline-offset;
       border-radius: $border-radius;
     }
   }
diff --git a/packages/devextreme-scss/scss/widgets/base/treeList/_common.scss b/packages/devextreme-scss/scss/widgets/base/treeList/_common.scss
index 7f706cc6e127..02945ff8b07e 100644
--- a/packages/devextreme-scss/scss/widgets/base/treeList/_common.scss
+++ b/packages/devextreme-scss/scss/widgets/base/treeList/_common.scss
@@ -1,6 +1,9 @@
 @use "../mixins" as *;
 @use "../gridBase" as *;
-@include grid-base(treelist);
+$draggable-column-opacity: 0.5 !default;
+$column-chooser-item-opacity: 0.5 !default;
+
+@include grid-base(treelist, $draggable-column-opacity, $column-chooser-item-opacity);
 
 .dx-treelist-container {
   position: relative;
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 30e7affaa09d..e7ce122fa82a 100644
--- a/packages/devextreme-scss/scss/widgets/base/treeList/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/treeList/_index.scss
@@ -6,22 +6,40 @@ $datagrid-base-background-color: null !default;
 $datagrid-border-color: null !default;
 $datagrid-focused-border-color: null !default;
 $datagrid-text-stub-background-image-path: null !default;
+$datagrid-text-stub-mask-image: null !default;
+$datagrid-text-stub-bg: null !default;
 $datagrid-row-error-color: null !default;
 $header-filter-color: null !default;
 $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-draggable-column-opacity: 0.5 !default;
+$treelist-column-chooser-item-opacity: 0.5 !default;
+
+@use "./common" as * with (
+  $draggable-column-opacity: $treelist-draggable-column-opacity,
+  $column-chooser-item-opacity: $treelist-column-chooser-item-opacity,
+);
+$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 !default;
@@ -34,6 +52,14 @@ $treelist-focused-border-color: $datagrid-focused-border-color !default;
 $treelist-text-stub-background-image-path: $datagrid-text-stub-background-image-path !default;
 $treelist-row-error-color: $datagrid-row-error-color !default;
 
+// 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 +153,9 @@ $treelist-row-error-color: $datagrid-row-error-color !default;
 
     &.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;
       }
     }
   }
@@ -147,7 +173,7 @@ $treelist-row-error-color: $datagrid-row-error-color !default;
 
   &.dx-filter-menu {
     .dx-menu-item-content .dx-icon {
-      @include dx-icon-sizing(14px);
+      @include dx-icon-sizing(14px); // dx-fixed-size: the gridBase tier already paints this across the family; a widget-scoped name would collide under the other grid roots
     }
   }
 
@@ -161,9 +187,9 @@ $treelist-row-error-color: $datagrid-row-error-color !default;
 
   .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 {
@@ -182,8 +208,20 @@ $treelist-row-error-color: $datagrid-row-error-color !default;
         display: block;
         height: 100%;
         content: "";
-        background-image: $treelist-text-stub-background-image-path;
-        background-repeat: no-repeat repeat;
+
+        /*
+         * A background image cannot read a colour role, so the placeholder's tint is frozen in
+         * the raster. `$…-mask-image` swaps the same artwork in as a mask, which carries only
+         * its alpha, so the colour and its opacity come from the theme instead.
+         */
+        @if $datagrid-text-stub-mask-image {
+          mask-image: $datagrid-text-stub-mask-image;
+          mask-repeat: no-repeat repeat;
+          background-color: $datagrid-text-stub-bg;
+        } @else {
+          background-image: $treelist-text-stub-background-image-path;
+          background-repeat: no-repeat repeat;
+        }
       }
 
       &[style*="text-align: right"]::before {
@@ -218,7 +256,7 @@ $treelist-row-error-color: $datagrid-row-error-color !default;
     .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,14 +266,14 @@ $treelist-row-error-color: $datagrid-row-error-color !default;
   float: right;
 
   .dx-button {
-    margin-left: 10px;
-    margin-top: 10px;
+    margin-left: $treelist-button-margin-left;
+    margin-top: $treelist-button-margin-top;
   }
 }
 
 .dx-treelist-export-menu {
   .dx-menu-item .dx-icon-exportxlsx {
-    @include dx-icon-sizing(16px);
+    @include dx-icon-sizing(16px); // dx-fixed-size: the gridBase tier already paints this across the family; a widget-scoped name would collide under the other grid roots
   }
 }
 
@@ -243,14 +281,14 @@ $treelist-row-error-color: $datagrid-row-error-color !default;
   cursor: pointer;
 
   @include dx-icon(more);
-  @include dx-icon-sizing(21px);
+  @include dx-icon-sizing(21px); // dx-fixed-size: the gridBase tier already paints this across the family; a widget-scoped name would collide under the other grid roots
 }
 
 .dx-treelist-edit-popup .dx-error-message {
   @include dx-treelist-error-message();
 
   color: $treelist-row-error-color;
-  margin-bottom: 20px;
+  margin-bottom: $treelist-error-message-margin-bottom;
 }
 
 .dx-rtl {
@@ -273,7 +311,7 @@ $treelist-row-error-color: $datagrid-row-error-color !default;
 
     .dx-button {
       margin-left: 0;
-      margin-right: 10px;
+      margin-right: $treelist-button-margin-right;
     }
   }
 }
@@ -284,15 +322,15 @@ $treelist-row-error-color: $datagrid-row-error-color !default;
 
 @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..99d9aac760fb 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,9 +224,9 @@ $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;
+  outline-offset: -2px; // dx-fixed-size: the gridBase tier already paints this across the family; a widget-scoped name would collide under the other grid roots
 }
 
 // #endregion
diff --git a/packages/devextreme-scss/scss/widgets/base/treeView/_common.scss b/packages/devextreme-scss/scss/widgets/base/treeView/_common.scss
index 86223bf07535..38eb07191027 100644
--- a/packages/devextreme-scss/scss/widgets/base/treeView/_common.scss
+++ b/packages/devextreme-scss/scss/widgets/base/treeView/_common.scss
@@ -1,7 +1,10 @@
+$treeview-disabled-opacity: null !default;
+
 @use "../mixins" as *;
 @use "../../base/icon_fonts" as *;
 
-$treeview-searchbox-margin-bottom: 5px !default;
+// Sized from base/treeView, which owns the defaults and forwards a theme's values down.
+$treeview-searchbox-margin-bottom: null !default;
 
 .dx-treeview-loadindicator-wrapper {
   text-align: center;
@@ -80,7 +83,7 @@ $treeview-searchbox-margin-bottom: 5px !default;
     order: 2;
 
     .dx-icon {
-      margin-inline-end: 8px;
+      margin-inline-end: 8px; // dx-fixed-size: demos hand-write this class outside the widget, where a tier var would not reach
     }
 
     .dx-button-has-icon {
@@ -98,7 +101,9 @@ $treeview-searchbox-margin-bottom: 5px !default;
   }
 
   &.dx-state-disabled {
-    opacity: 0.5;
+    @if $treeview-disabled-opacity {
+      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 2046ac20f08a..3468a5b4e4f3 100644
--- a/packages/devextreme-scss/scss/widgets/base/treeView/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/treeView/_index.scss
@@ -1,7 +1,18 @@
+$treeview-disabled-opacity: 0.5 !default;
+$treeview-searchbox-margin-bottom: 5px !default;
+
 @use "sass:math";
-@use "./common";
+@use "sass:meta";
+@use "./common" with (
+  $treeview-disabled-opacity: $treeview-disabled-opacity,
+  $treeview-searchbox-margin-bottom: $treeview-searchbox-margin-bottom,
+);
 @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 +75,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 +94,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 +118,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/DIVERGENCES.md b/packages/devextreme-scss/scss/widgets/fluent-next/DIVERGENCES.md
new file mode 100644
index 000000000000..0fa393d6240d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/DIVERGENCES.md
@@ -0,0 +1,105 @@
+# Divergences
+
+Places where fluent-next cannot express a value through the design-token tier and has to freeze
+something instead. Each one is marked in the source so it can be found, and each entry here says
+what would have to change for the marker to go away.
+
+Comments in `_colors.scss` files point here with `See DIVERGENCES.md`.
+
+## The `dx-data-uri-static` marker
+
+An icon that is inlined as an SVG `data-uri` gets its colour by a build-time string replace of
+`currentColor`. A CSS `var()` does not resolve inside a data-uri - it renders black - so the
+colour has to be written as a literal, and the literal is a hand-copy of a `ds.$` token that
+nothing keeps in sync.
+
+The marker records which token the literal stands for:
+
+```scss
+$file-manager-icon: #161616 !default; // dx-data-uri-static: ds.$color-content
+```
+
+`tests/fluent-next-naming.test.ts` reads it: a variable that feeds a data-uri is exempt from the
+rule that every colour variable is published into the component tier, because publishing a knob
+that turns nothing would be worse than not publishing it.
+
+**A single-colour icon does not need this.** The same artwork used as a `mask-image` carries only
+its alpha, so `background-color: currentColor` paints it from the cascade and the colour stays a
+token. That is how gantt, list and two of the file manager icons were retired - see
+`base/gantt/_mixins.scss` and `base/list/_mixins.scss` for the `$masked` flag, which keeps the
+legacy themes on the baked path so their emitted css does not move.
+
+## Current inventory - 16 markers, 3 components
+
+### fileManager - 6, structural
+
+`done.svg` and `danger.svg` each put an inverted glyph on a success or danger disc beside the
+neutral arrows. Three fills in one image; a single-colour mask cannot express that, so the six
+literals stay. Tellingly the disabled state never needed a second copy of these two - they report
+an outcome and do not grey out.
+
+### timeView - 6, structural
+
+Two of the three images are genuinely two-tone:
+
+- `min-arrow.svg` - the tip is a donut, `fill="$background-color"` inside `stroke="$accent-color"`.
+  Under an alpha mask both are opaque, the canvas-coloured hole fills in and the tip becomes a
+  solid dot.
+- `clock-bg.svg` - the dial and the numerals are deliberately opposed, so one colour would erase
+  the digits.
+
+`hour-arrow.svg` alone is single-colour, but converting it frees no literal: `$accent-color` is
+still required by `min-arrow`.
+
+### diagram - 4, deliberate
+
+34 of the 36 diagram icons are single-colour and a working mask migration exists, but it was
+measured and declined: diagram has no per-state duplication yet, so it saves nothing today, and
+the wide connectors are one-pixel hairlines whose anti-aliasing shifts enough under a mask to fail
+the screenshot comparer at its real defaults. Two icons could never follow anyway -
+`connector-begin-none.svg` and `connector-end-none.svg` declare `.st0{fill:#FF0000}` in a `<style>`
+block, which beats the `fill="currentColor"` attribute on the same path, so their diagonal slash
+is genuinely red.
+
+Revisit when diagram grows a second state: from that point a mask saves the whole set per state.
+
+## Rasters
+
+A colour frozen inside a `.png` is the same divergence in a harder form - no token reaches it at
+all, and the file cannot follow a theme.
+
+- **`grid/text-stub.png`** - the virtual-row placeholder. Retired: the artwork carried no
+  anti-aliasing, so it was lifted to a plain mask and is now painted from the `skeleton` role,
+  `color.bg-inverted` at 10% opacity. That role lives under `components/` in the token package,
+  which `build-tokens.mjs` does not consume, so it is composed in `gridBase/_colors.scss` from the
+  two semantic tokens that do reach `ds.$`. Worth knowing why it mattered: one file served both
+  modes and it was black, so on a dark grid the placeholder sat 1.26 dE2000 from the row
+  background - under the 2.3 just-noticeable threshold.
+- **`pulldown.png`** - deleted. Its only rule targeted `.dx-scrollview-pulldown`, a class no
+  scroll-view strategy puts in the DOM: the simulated and iOS ones build
+  `dx-scrollview-pull-down-image`, which fluent-next hides, and the Android one builds a
+  `dx-icon-pulldown` font glyph. Nothing painted it.
+
+Nothing in the design system names a pull-to-refresh arrow, for the record: `scroll-view` exists
+only in the wpf token set and covers the frame, not the glyph.
+
+## Non-icon divergences
+
+### gantt task bars
+
+`$gantt-task-bg` is `ds.$color-bg-primary-shared` - primary-90 in light, primary-70 in dark. It is
+the only surface role with that pair, so the design-review decision (a lighter blue on dark) holds
+without freezing a literal. Referenced from `gantt/_colors.scss`.
+
+### gantt time-interval band
+
+`$gantt-ti-bg` is `ds.$color-bg-primary-alpha-hovered` - the hovered rung of the translucent accent
+ramp, alpha 0.20 - on an element that is always at rest. Kept deliberately, measured 17.09: the
+resting rung of the same ramp is alpha 0.11, legacy fluent drew this band at 0.15, and against the
+canvas the band would go from 1.33 to 1.16 - fainter than what it replaced, and no rung of the ramp
+carries the legacy density.
+
+The same ramp is read off-rung in two more places, in opposite directions: `$html-editor-variable-bg`
+is another resting element on the hovered rung, and `$scheduler-workspace-cell-bg-focused` is a
+focused element on the resting rung. Whether the ramp needs a fourth step or the three places need
+to agree is a question for the ramp, not for this band.
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/_accent-color.scss b/packages/devextreme-scss/scss/widgets/fluent-next/_accent-color.scss
new file mode 100644
index 000000000000..9c12317a80a8
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/_accent-color.scss
@@ -0,0 +1,26 @@
+@supports (color: oklch(from red l c h)) {
+  :root {
+    --dx-accent-color-source: var(--dx-accent-color);
+    --dx-accent-lightness-max: 0.975;
+    --dx-accent-lightness-min: 0.15;
+    --dx-accent-chroma-min: 0.02;
+    --dx-accent-color-10: oklch(from var(--dx-accent-color-source) max(l, var(--dx-accent-lightness-max)) min(c, var(--dx-accent-chroma-min)) h);
+    --dx-accent-color-20: oklch(from var(--dx-accent-color-source) calc(l + 8 * (var(--dx-accent-lightness-max) - min(l, var(--dx-accent-lightness-max))) / 9) calc(c - 8 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 9) h);
+    --dx-accent-color-30: oklch(from var(--dx-accent-color-source) calc(l + 7 * (var(--dx-accent-lightness-max) - min(l, var(--dx-accent-lightness-max))) / 9) calc(c - 7 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 9) h);
+    --dx-accent-color-40: oklch(from var(--dx-accent-color-source) calc(l + 6 * (var(--dx-accent-lightness-max) - min(l, var(--dx-accent-lightness-max))) / 9) calc(c - 6 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 9) h);
+    --dx-accent-color-50: oklch(from var(--dx-accent-color-source) calc(l + 5 * (var(--dx-accent-lightness-max) - min(l, var(--dx-accent-lightness-max))) / 9) calc(c - 5 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 9) h);
+    --dx-accent-color-60: oklch(from var(--dx-accent-color-source) calc(l + 4 * (var(--dx-accent-lightness-max) - min(l, var(--dx-accent-lightness-max))) / 9) calc(c - 4 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 9) h);
+    --dx-accent-color-70: oklch(from var(--dx-accent-color-source) calc(l + 3 * (var(--dx-accent-lightness-max) - min(l, var(--dx-accent-lightness-max))) / 9) calc(c - 3 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 9) h);
+    --dx-accent-color-80: oklch(from var(--dx-accent-color-source) calc(l + 2 * (var(--dx-accent-lightness-max) - min(l, var(--dx-accent-lightness-max))) / 9) calc(c - 2 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 9) h);
+    --dx-accent-color-90: oklch(from var(--dx-accent-color-source) calc(l + 1 * (var(--dx-accent-lightness-max) - min(l, var(--dx-accent-lightness-max))) / 9) calc(c - 1 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 9) h);
+    --dx-accent-color-100: oklch(from var(--dx-accent-color-source) l c h);
+    --dx-accent-color-110: oklch(from var(--dx-accent-color-source) calc(l - 1 * (max(l, var(--dx-accent-lightness-min)) - var(--dx-accent-lightness-min)) / 8) calc(c - 1 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 8) h);
+    --dx-accent-color-120: oklch(from var(--dx-accent-color-source) calc(l - 2 * (max(l, var(--dx-accent-lightness-min)) - var(--dx-accent-lightness-min)) / 8) calc(c - 2 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 8) h);
+    --dx-accent-color-130: oklch(from var(--dx-accent-color-source) calc(l - 3 * (max(l, var(--dx-accent-lightness-min)) - var(--dx-accent-lightness-min)) / 8) calc(c - 3 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 8) h);
+    --dx-accent-color-140: oklch(from var(--dx-accent-color-source) calc(l - 4 * (max(l, var(--dx-accent-lightness-min)) - var(--dx-accent-lightness-min)) / 8) calc(c - 4 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 8) h);
+    --dx-accent-color-150: oklch(from var(--dx-accent-color-source) calc(l - 5 * (max(l, var(--dx-accent-lightness-min)) - var(--dx-accent-lightness-min)) / 8) calc(c - 5 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 8) h);
+    --dx-accent-color-160: oklch(from var(--dx-accent-color-source) calc(l - 6 * (max(l, var(--dx-accent-lightness-min)) - var(--dx-accent-lightness-min)) / 8) calc(c - 6 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 8) h);
+    --dx-accent-color-170: oklch(from var(--dx-accent-color-source) calc(l - 7 * (max(l, var(--dx-accent-lightness-min)) - var(--dx-accent-lightness-min)) / 8) calc(c - 7 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 8) h);
+    --dx-accent-color-180: oklch(from var(--dx-accent-color-source) min(l, var(--dx-accent-lightness-min)) min(c, var(--dx-accent-chroma-min)) h);
+  }
+}
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..69e97ca69776
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/_colors.scss
@@ -0,0 +1,45 @@
+@forward "./variables";
+@use "./variables" as *;
+@use "../../_design-system/variables/ds" as ds;
+
+$color: null !default;
+$mode: null !default;
+
+$theme-marker-color: $color !default;
+$theme-marker-mode: null !default;
+
+@if $mode == "light" {
+  $theme-marker-mode: "light" !default;
+}
+
+@if $mode == "dark" {
+  $theme-marker-mode: "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-theme-mode-light,
+.dx-theme-mode-dark,
+.dx-theme-mode-inverted {
+  --dx-component-color-bg: #{ds.$color-bg};
+  --dx-color-main-bg: #{ds.$color-bg-canvas};
+  --dx-color-primary: #{ds.$color-content-primary};
+
+  // 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};
+  --dx-color-success: #{ds.$color-content-success};
+  --dx-color-warning: #{ds.$color-content-warning};
+  --dx-color-border: #{ds.$color-border};
+  --dx-color-text: #{ds.$color-content};
+  --dx-color-icon: #{ds.$color-content-subtle};
+  --dx-color-spin-icon: #{ds.$color-content-subtle};
+  --dx-color-link: #{ds.$color-content-primary};
+  --dx-color-shadow: #{ds.$color-shadow-key};
+  --dx-color-separator: #{ds.$color-border-subtle};
+  --dx-color-options-panel-bg: color-mix(in srgb, #{ds.$color-bg-inverted} calc(#{ds.$opacity-5} * 100%), transparent);
+}
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..ea0ddb0dfaff
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/_design-system.scss
@@ -0,0 +1,93 @@
+@use "sass:meta";
+@use "colors";
+@use "../../_design-system/fluent/semantic/colors/light" as light-roles;
+@use "../../_design-system/fluent/semantic/colors/dark" as dark-roles;
+@use "../../_design-system/fluent/mode-aliases" as mode-aliases;
+
+$accent: colors.$color !default;
+
+/*
+ * Tier order mirrors the design-tokens package: base scales and palettes, then semantic roles.
+ *
+ * The component tier is not emitted at all. Its tokens are aliases onto the semantic roles, the
+ * theme reads those roles directly, and emitting the tier only added unreferenced custom properties
+ * to every stylesheet. Component size tokens are absent for the same reason plus one more:
+ * fluent-next maps sizes onto the base scales (spacing, font-size, border-radius, border-width),
+ * so no widget would read the layout names either.
+ *
+ * Loaded here is what does not depend on the colour mode; the rest goes through `mode-values`.
+ * Which is which is derived by build/tokens/build-tokens.mjs, so this file carries no list.
+ */
+@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("accent-color");
+@include meta.load-css("../../_design-system/fluent/semantic/typography");
+@include meta.load-css("../../_design-system/fluent/mode-shared");
+
+/*
+ * `--dx-theme-mode` is here for the JS: `dx-theme-mode-inverted` means "the opposite of my
+ * surroundings", so no reading of ancestor classes tells you which mode an element ended up in.
+ * Overlays are reparented to the viewport and have to be given the mode their owner resolved to,
+ * so `core/utils/theme_mode.ts` asks the browser for this property instead.
+ */
+@mixin mode-values($mode) {
+  --dx-theme-mode: #{$mode};
+
+  @if $mode == "light" {
+    @include light-roles.roles();
+  } @else {
+    @include dark-roles.roles();
+  }
+
+  @include mode-aliases.aliases();
+}
+
+/*
+ * Selector weight is one class throughout, `:root` included, so an override still wins by coming
+ * after the theme - the rule that held before the classes existed.
+ */
+@mixin named-scopes($own, $other) {
+  :root,
+  .dx-theme-mode-#{$own} {
+    @include mode-values($own);
+  }
+
+  .dx-theme-mode-#{$other} {
+    @include mode-values($other);
+  }
+}
+
+/*
+ * A style query, not a descendant selector: it is evaluated against the NEAREST ancestor, which is
+ * what "inverted" means. A selector can only ask for ANY ancestor, so `dark > light > inverted`
+ * resolved against the dark rather than the light next to it, and nesting did not compose.
+ *
+ * Where style queries are unsupported these blocks are dropped and an inverted island renders as
+ * its surroundings instead of the opposite of them - still a correctly painted scope that
+ * `--dx-theme-mode` describes, so the JS keeps agreeing with the screen.
+ */
+@mixin inverted-scope() {
+  @container style(--dx-theme-mode: light) {
+    .dx-theme-mode-inverted {
+      @include mode-values("dark");
+    }
+  }
+
+  @container style(--dx-theme-mode: dark) {
+    .dx-theme-mode-inverted {
+      @include mode-values("light");
+    }
+  }
+}
+
+@if colors.$mode != "light" and colors.$mode != "dark" {
+  @error "fluent-next: unknown colour mode #{meta.inspect(colors.$mode)}; expected \"light\" or \"dark\".";
+}
+
+/*
+ * Inverted first: a named class on the SAME element has to win, and at equal weight source order
+ * is what decides.
+ */
+@include inverted-scope();
+@include named-scopes(colors.$mode, if(colors.$mode == "light", "dark", "light"));
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..07050a091c66
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/_index.scss
@@ -0,0 +1,66 @@
+// 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";
+@use "./public-tier";
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/_mixins.scss b/packages/devextreme-scss/scss/widgets/fluent-next/_mixins.scss
new file mode 100644
index 000000000000..8dfb7a821395
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/_mixins.scss
@@ -0,0 +1,6 @@
+@mixin when-disabled($selector) {
+  #{$selector}.dx-state-disabled,
+  .dx-state-disabled #{$selector} {
+    @content;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/_public-tier.scss b/packages/devextreme-scss/scss/widgets/fluent-next/_public-tier.scss
new file mode 100644
index 000000000000..daeca41ada26
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/_public-tier.scss
@@ -0,0 +1,446 @@
+// GENERATED by tools/naming/publish.mjs
+@use "accordion/public" as accordionPublic;
+@use "actionSheet/public" as actionSheetPublic;
+@use "badge/public" as badgePublic;
+@use "box/public" as boxPublic;
+@use "button/public" as buttonPublic;
+@use "buttonGroup/public" as buttonGroupPublic;
+@use "calendar/public" as calendarPublic;
+@use "card/public" as cardPublic;
+@use "cardView/public" as cardViewPublic;
+@use "chat/public" as chatPublic;
+@use "checkBox/public" as checkBoxPublic;
+@use "colorBox/public" as colorBoxPublic;
+@use "colorView/public" as colorViewPublic;
+@use "common/public" as commonPublic;
+@use "contextMenu/public" as contextMenuPublic;
+@use "dataGrid/public" as dataGridPublic;
+@use "dateBox/public" as dateBoxPublic;
+@use "dateRangeBox/public" as dateRangeBoxPublic;
+@use "dateView/public" as dateViewPublic;
+@use "diagram/public" as diagramPublic;
+@use "drawer/public" as drawerPublic;
+@use "dropDownButton/public" as dropDownButtonPublic;
+@use "dropDownEditor/public" as dropDownEditorPublic;
+@use "dropDownList/public" as dropDownListPublic;
+@use "dropDownMenu/public" as dropDownMenuPublic;
+@use "fieldset/public" as fieldsetPublic;
+@use "fileManager/public" as fileManagerPublic;
+@use "fileUploader/public" as fileUploaderPublic;
+@use "filterBuilder/public" as filterBuilderPublic;
+@use "form/public" as formPublic;
+@use "gallery/public" as galleryPublic;
+@use "gantt/public" as ganttPublic;
+@use "gridBase/public" as gridBasePublic;
+@use "htmlEditor/public" as htmlEditorPublic;
+@use "informer/public" as informerPublic;
+@use "list/public" as listPublic;
+@use "loadIndicator/public" as loadIndicatorPublic;
+@use "loadPanel/public" as loadPanelPublic;
+@use "lookup/public" as lookupPublic;
+@use "map/public" as mapPublic;
+@use "menu/public" as menuPublic;
+@use "numberBox/public" as numberBoxPublic;
+@use "pagination/public" as paginationPublic;
+@use "pivotGrid/public" as pivotGridPublic;
+@use "popover/public" as popoverPublic;
+@use "popup/public" as popupPublic;
+@use "progressBar/public" as progressBarPublic;
+@use "radioButton/public" as radioButtonPublic;
+@use "radioGroup/public" as radioGroupPublic;
+@use "recurrenceEditor/public" as recurrenceEditorPublic;
+@use "scheduler/public" as schedulerPublic;
+@use "scrollView/public" as scrollViewPublic;
+@use "scrollable/public" as scrollablePublic;
+@use "selectBox/public" as selectBoxPublic;
+@use "slider/public" as sliderPublic;
+@use "sortable/public" as sortablePublic;
+@use "speedDialAction/public" as speedDialActionPublic;
+@use "splitter/public" as splitterPublic;
+@use "splitterBar/public" as splitterBarPublic;
+@use "stepper/public" as stepperPublic;
+@use "switch/public" as switchPublic;
+@use "tabPanel/public" as tabPanelPublic;
+@use "tabs/public" as tabsPublic;
+@use "tagBox/public" as tagBoxPublic;
+@use "textArea/public" as textAreaPublic;
+@use "textBox/public" as textBoxPublic;
+@use "textEditor/public" as textEditorPublic;
+@use "tileView/public" as tileViewPublic;
+@use "timeView/public" as timeViewPublic;
+@use "toast/public" as toastPublic;
+@use "toolbar/public" as toolbarPublic;
+@use "tooltip/public" as tooltipPublic;
+@use "treeList/public" as treeListPublic;
+@use "treeView/public" as treeViewPublic;
+@use "typography/public" as typographyPublic;
+@use "validation/public" as validationPublic;
+@use "widget/public" as widgetPublic;
+
+:root,
+.dx-theme-mode-light,
+.dx-theme-mode-dark,
+.dx-theme-mode-inverted {
+  @include commonPublic.publish();
+  @include typographyPublic.publish();
+}
+
+.dx-accordion {
+  @include accordionPublic.publish();
+}
+
+.dx-actionsheet-popup-wrapper,
+.dx-actionsheet-popover-wrapper {
+  @include actionSheetPublic.publish();
+}
+
+.dx-badge {
+  @include badgePublic.publish();
+}
+
+.dx-box-item-content {
+  @include boxPublic.publish();
+}
+
+.dx-button,
+.dx-dropdowneditor-button {
+  @include buttonPublic.publish();
+}
+
+.dx-buttongroup {
+  @include buttonGroupPublic.publish();
+}
+
+.dx-calendar {
+  @include calendarPublic.publish();
+}
+
+.dx-card {
+  @include cardPublic.publish();
+}
+
+.dx-cardview,
+.dx-cardview-header-item,
+.dx-cardview-header-item-sort-indicator,
+.dx-cardview-column-chooser-list,
+.dx-cardview-column-chooser-plain {
+  @include cardViewPublic.publish();
+}
+
+.dx-chat,
+.dx-messagelist-context-menu-content,
+.dx-chat-confirmation-popup-wrapper {
+  @include chatPublic.publish();
+}
+
+.dx-checkbox {
+  @include checkBoxPublic.publish();
+}
+
+.dx-colorbox,
+.dx-colorbox-overlay {
+  @include colorBoxPublic.publish();
+}
+
+.dx-colorview-container {
+  @include colorViewPublic.publish();
+}
+
+.dx-context-menu {
+  @include contextMenuPublic.publish();
+}
+
+.dx-datagrid {
+  @include dataGridPublic.publish();
+}
+
+.dx-datebox,
+.dx-datebox-wrapper {
+  @include dateBoxPublic.publish();
+}
+
+.dx-daterangebox {
+  @include dateRangeBoxPublic.publish();
+}
+
+.dx-dateview-rollers {
+  @include dateViewPublic.publish();
+}
+
+.dx-diagram,
+.dx-diagram-properties-popup,
+.dx-diagram-toolbox-popup,
+.dx-diagram-contextmenu,
+.dx-diagram-context-toolbox,
+.dx-diagram-floating-toolbar-container {
+  @include diagramPublic.publish();
+}
+
+.dx-drawer {
+  @include drawerPublic.publish();
+}
+
+.dx-dropdownbutton,
+.dx-dropdownbutton-popup-wrapper {
+  @include dropDownButtonPublic.publish();
+}
+
+.dx-dropdowneditor,
+.dx-dropdowneditor-overlay {
+  @include dropDownEditorPublic.publish();
+}
+
+.dx-dropdownlist-popup-wrapper {
+  @include dropDownListPublic.publish();
+}
+
+.dx-dropdownmenu-popup-wrapper {
+  @include dropDownMenuPublic.publish();
+}
+
+.dx-fieldset,
+.dx-field {
+  @include fieldsetPublic.publish();
+}
+
+.dx-filemanager,
+.dx-filemanager-dialog-popup {
+  @include fileManagerPublic.publish();
+}
+
+.dx-fileuploader {
+  @include fileUploaderPublic.publish();
+}
+
+.dx-filterbuilder,
+.dx-filterbuilder-overlay,
+.dx-filterbuilder-operations {
+  @include filterBuilderPublic.publish();
+}
+
+.dx-form {
+  @include formPublic.publish();
+}
+
+.dx-gallery {
+  @include galleryPublic.publish();
+}
+
+.dx-gantt {
+  @include ganttPublic.publish();
+}
+
+.dx-datagrid,
+.dx-treelist,
+.dx-pivotgrid,
+.dx-cardview,
+.dx-datagrid-column-chooser,
+.dx-treelist-column-chooser,
+.dx-header-filter-menu,
+.dx-datagrid-drag-header,
+.dx-treelist-drag-header,
+.dx-ai-chat,
+.dx-datagrid-ai-assistant-confirm-dialog,
+.dx-treelist-ai-assistant-confirm-dialog {
+  @include gridBasePublic.publish();
+}
+
+.dx-htmleditor,
+.dx-aidialog,
+.dx-htmleditor-add-image-popup {
+  @include htmlEditorPublic.publish();
+}
+
+.dx-informer {
+  @include informerPublic.publish();
+}
+
+.dx-list,
+.dx-list-context-menucontent {
+  @include listPublic.publish();
+}
+
+.dx-loadindicator {
+  @include loadIndicatorPublic.publish();
+}
+
+.dx-loadpanel-content {
+  @include loadPanelPublic.publish();
+}
+
+.dx-lookup,
+.dx-lookup-popup-wrapper {
+  @include lookupPublic.publish();
+}
+
+.dx-map-container {
+  @include mapPublic.publish();
+}
+
+.dx-menu-base,
+.dx-menu-adaptive-mode {
+  @include menuPublic.publish();
+}
+
+.dx-numberbox {
+  @include numberBoxPublic.publish();
+}
+
+.dx-pagination,
+.dx-pager {
+  @include paginationPublic.publish();
+}
+
+.dx-pivotgrid,
+.dx-pivotgridfieldchooser,
+.dx-pivotgrid-fields-container {
+  @include pivotGridPublic.publish();
+}
+
+.dx-popover-wrapper {
+  @include popoverPublic.publish();
+}
+
+.dx-popup-wrapper {
+  @include popupPublic.publish();
+}
+
+.dx-progressbar {
+  @include progressBarPublic.publish();
+}
+
+.dx-radiobutton {
+  @include radioButtonPublic.publish();
+}
+
+.dx-radiogroup {
+  @include radioGroupPublic.publish();
+}
+
+.dx-recurrence-repeat-on,
+.dx-recurrence-button-group,
+.dx-recurrence-numberbox-interval-wrapper,
+.dx-recurrence-radiogroup-repeat-type,
+.dx-recurrence-datebox-until-date,
+.dx-recurrence-numberbox-repeat-count {
+  @include recurrenceEditorPublic.publish();
+}
+
+.dx-scheduler,
+.dx-scheduler-appointment-popup,
+.dx-scheduler-appointment-tooltip-wrapper,
+.dx-scheduler-overlay-panel {
+  @include schedulerPublic.publish();
+}
+
+.dx-scrollview {
+  @include scrollViewPublic.publish();
+}
+
+.dx-scrollable {
+  @include scrollablePublic.publish();
+}
+
+.dx-selectbox,
+.dx-selectbox-popup-wrapper {
+  @include selectBoxPublic.publish();
+}
+
+.dx-slider {
+  @include sliderPublic.publish();
+}
+
+.dx-sortable,
+.dx-sortable-dragging,
+.dx-sortable-placeholder {
+  @include sortablePublic.publish();
+}
+
+.dx-fa-button {
+  @include speedDialActionPublic.publish();
+}
+
+.dx-splitter {
+  @include splitterPublic.publish();
+}
+
+.dx-splitter-bar,
+.dx-splitter-border {
+  @include splitterBarPublic.publish();
+}
+
+.dx-stepper {
+  @include stepperPublic.publish();
+}
+
+.dx-switch {
+  @include switchPublic.publish();
+}
+
+.dx-tabpanel {
+  @include tabPanelPublic.publish();
+}
+
+.dx-tabs {
+  @include tabsPublic.publish();
+}
+
+.dx-tagbox,
+.dx-tagbox-popup-wrapper {
+  @include tagBoxPublic.publish();
+}
+
+.dx-textarea {
+  @include textAreaPublic.publish();
+}
+
+.dx-textbox {
+  @include textBoxPublic.publish();
+}
+
+.dx-texteditor,
+.dx-htmleditor {
+  @include textEditorPublic.publish();
+}
+
+.dx-tileview {
+  @include tileViewPublic.publish();
+}
+
+.dx-timeview {
+  @include timeViewPublic.publish();
+}
+
+.dx-toast-wrapper,
+.dx-toast-stack {
+  @include toastPublic.publish();
+}
+
+.dx-toolbar,
+.dx-dropdownmenu-popup-wrapper,
+.dx-toolbar-menu-container,
+.dx-toolbar-background {
+  @include toolbarPublic.publish();
+}
+
+.dx-tooltip-wrapper {
+  @include tooltipPublic.publish();
+}
+
+.dx-treelist {
+  @include treeListPublic.publish();
+}
+
+.dx-treeview,
+.dx-sortable-dragging {
+  @include treeViewPublic.publish();
+}
+
+.dx-invalid-message,
+.dx-validationsummary {
+  @include validationPublic.publish();
+}
+
+.dx-surface {
+  @include widgetPublic.publish();
+}
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..bcf321546f2c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/_sizes.scss
@@ -0,0 +1,42 @@
+$size: null !default;
+
+@use "../../_design-system/variables/ds" as ds;
+
+$theme-marker-size-postfix: null !default;
+$global-font-size: null !default;
+$global-inline-widget-height: null !default;
+$global-icon-size: null !default;
+$global-border-radius: ds.$border-radius-40 !default;
+
+@if $size == "default" {
+  $theme-marker-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;
+}
+
+@if $size == "compact" {
+  $theme-marker-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;
+}
+
+// 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..e507a619c591
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/accordion/_colors.scss
@@ -0,0 +1,10 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$accordion-content: ds.$color-content !default;
+
+$accordion-title-content: inherit !default;
+
+$accordion-bg: transparent !default;
+$accordion-title-bg-hovered: ds.$color-bg-alpha-hovered !default;
+$accordion-title-bg-active: ds.$color-bg-alpha-active !default;
+$accordion-content-disabled: ds.$color-content-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..ecf2e829d7cf
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/accordion/_index.scss
@@ -0,0 +1,83 @@
+@use "sass:math";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../../base/accordion";
+
+.dx-accordion {
+  background-color: var(--dx-accordion-bg);
+  color: var(--dx-accordion-content);
+}
+
+.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: var(--dx-accordion-title-bg-hovered);
+    }
+  }
+
+  &.dx-state-active,
+  &.dx-state-focused {
+    > .dx-accordion-item-title {
+      color: var(--dx-accordion-title-content-active);
+      background-color: var(--dx-accordion-title-bg-active);
+    }
+  }
+}
+
+.dx-accordion-item-opened {
+  margin-block: var(--dx-accordion-item-opened-margin);
+
+  & > .dx-accordion-item-title {
+    &::before {
+      content: "\f014";
+    }
+  }
+}
+
+.dx-accordion-item-title {
+  border-radius: var(--dx-accordion-item-border-radius);
+  min-height: var(--dx-accordion-title-height);
+  padding: var(--dx-accordion-title-padding-block) var(--dx-accordion-title-padding-inline);
+
+  &::before {
+    content: "\f016";
+    font-weight: normal;
+    font-size: var(--dx-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: var(--dx-accordion-title-icon-margin);
+  }
+
+  .dx-icon {
+    @include dx-icon-sizing(var(--dx-accordion-title-icon-size));
+  }
+}
+
+.dx-accordion-item-title-caption {
+  color: $accordion-title-content;
+  font-size: var(--dx-accordion-title-font-size);
+  font-weight: var(--dx-accordion-title-font-weight);
+
+  .dx-icon {
+    @include dx-icon-margin(var(--dx-accordion-title-icon-margin));
+  }
+}
+
+.dx-state-disabled {
+  &.dx-accordion,
+  &.dx-accordion-item {
+    color: var(--dx-accordion-content-disabled);
+
+    .dx-accordion-item-title-caption {
+      color: var(--dx-accordion-content-disabled);
+    }
+  }
+}
+
+.dx-accordion-item-body {
+  padding: var(--dx-accordion-body-padding);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/accordion/_public-links.scss b/packages/devextreme-scss/scss/widgets/fluent-next/accordion/_public-links.scss
new file mode 100644
index 000000000000..dbece9e5144b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/accordion/_public-links.scss
@@ -0,0 +1,3 @@
+@mixin publish {
+  --dx-accordion-title-content-active: var(--dx-accordion-content);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/accordion/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/accordion/_public.scss
new file mode 100644
index 000000000000..35a311c6dfb8
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/accordion/_public.scss
@@ -0,0 +1,24 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+@use "public-links" as links;
+
+@mixin publish {
+  --dx-accordion-bg: #{$accordion-bg};
+  --dx-accordion-body-padding: #{$accordion-body-padding};
+  --dx-accordion-content: #{$accordion-content};
+  --dx-accordion-content-disabled: #{$accordion-content-disabled};
+  --dx-accordion-item-border-radius: #{$accordion-item-border-radius};
+  --dx-accordion-item-opened-margin: #{$accordion-item-opened-margin};
+  --dx-accordion-title-bg-active: #{$accordion-title-bg-active};
+  --dx-accordion-title-bg-hovered: #{$accordion-title-bg-hovered};
+  --dx-accordion-title-font-size: #{$accordion-title-font-size};
+  --dx-accordion-title-font-weight: #{$accordion-title-font-weight};
+  --dx-accordion-title-height: #{$accordion-title-height};
+  --dx-accordion-title-icon-margin: #{$accordion-title-icon-margin};
+  --dx-accordion-title-icon-size: #{$accordion-title-icon-size};
+  --dx-accordion-title-padding-block: #{$accordion-title-padding-block};
+  --dx-accordion-title-padding-inline: #{$accordion-title-padding-inline};
+
+  @include links.publish();
+}
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..2cbf7af47bd1
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/accordion/_sizes.scss
@@ -0,0 +1,35 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// 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: 0 !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;
+}
+
+@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;
+}
+
+// Values hoisted from style-file literals (tokenized)
+$accordion-title-font-weight: ds.$font-weight-base-strong !default;
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..ac219c3edb22
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/actionSheet/_colors.scss
@@ -0,0 +1,3 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$action-sheet-content-disabled: ds.$color-content-disabled !default;
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..5add9a9f3d0f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/actionSheet/_index.scss
@@ -0,0 +1,26 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/actionSheet";
+
+.dx-actionsheet-container {
+  .dx-actionsheet-item:not(:last-child) {
+    margin: var(--dx-action-sheet-item-margin);
+  }
+
+  .dx-button {
+    margin: 0;
+  }
+}
+
+.dx-button.dx-actionsheet-cancel {
+  margin: 0;
+  margin-top: var(--dx-action-sheet-item-margin-block-start);
+}
+
+.dx-actionsheet-container.dx-state-disabled {
+  .dx-button-text,
+  .dx-actionsheet-item-content,
+  .dx-actionsheet-title {
+    color: var(--dx-action-sheet-content-disabled);
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/actionSheet/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/actionSheet/_public.scss
new file mode 100644
index 000000000000..23907de1bbc9
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/actionSheet/_public.scss
@@ -0,0 +1,9 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-action-sheet-content-disabled: #{$action-sheet-content-disabled};
+  --dx-action-sheet-item-margin: #{$action-sheet-item-margin};
+  --dx-action-sheet-item-margin-block-start: #{$action-sheet-item-margin-block-start};
+}
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..bf3f8a129a3d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/actionSheet/_sizes.scss
@@ -0,0 +1,4 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$action-sheet-item-margin-block-start: ds.$spacing-120 !default;
+$action-sheet-item-margin: 0 0 $action-sheet-item-margin-block-start 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..e69de29bb2d1
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..d23d6aed883e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/autocomplete/_index.scss
@@ -0,0 +1,24 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../dropDownList";
+
+@mixin autocomplete-editor-container-offset() {
+  inset-inline-end: var(--dx-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..e69de29bb2d1
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..082b71468500
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/badge/_colors.scss
@@ -0,0 +1,8 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$badge-content: ds.$color-content-static-dark !default;
+
+$badge-bg: ds.$color-bg-primary !default;
+
+$badge-content-disabled: ds.$color-content-disabled !default;
+$badge-bg-disabled: ds.$color-bg-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..b433407e2ffb
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/badge/_index.scss
@@ -0,0 +1,17 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/badge";
+
+.dx-badge {
+  background-color: var(--dx-badge-bg);
+  color: var(--dx-badge-content);
+  font-size: var(--dx-badge-font-size);
+  padding: var(--dx-badge-padding);
+  border-radius: var(--dx-badge-border-radius);
+  line-height: var(--dx-badge-line-height);
+
+  .dx-state-disabled & {
+    color: var(--dx-badge-content-disabled);
+    background-color: var(--dx-badge-bg-disabled);
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/badge/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/badge/_public.scss
new file mode 100644
index 000000000000..fa2e058d7569
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/badge/_public.scss
@@ -0,0 +1,14 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-badge-bg: #{$badge-bg};
+  --dx-badge-bg-disabled: #{$badge-bg-disabled};
+  --dx-badge-border-radius: #{$badge-border-radius};
+  --dx-badge-content: #{$badge-content};
+  --dx-badge-content-disabled: #{$badge-content-disabled};
+  --dx-badge-font-size: #{$badge-font-size};
+  --dx-badge-line-height: #{$badge-line-height};
+  --dx-badge-padding: #{$badge-padding};
+}
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..1e1335f63296
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/badge/_sizes.scss
@@ -0,0 +1,19 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$badge-padding: 0 ds.$spacing-60 !default;
+$badge-font-size: null !default;
+$badge-line-height: null !default;
+
+@if $size == "default" {
+  $badge-font-size: ds.$font-size-caption-md !default;
+  $badge-line-height: ds.$line-height-caption-lg !default;
+}
+
+@else if $size == "compact" {
+  $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..e69de29bb2d1
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..02508756e872
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/box/_index.scss
@@ -0,0 +1,10 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/box" with (
+  $box-item-content-font-size: var(--dx-box-item-content-font-size),
+);
+
+.dx-box-item-content {
+  font-size: $global-font-size;
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/box/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/box/_public.scss
new file mode 100644
index 000000000000..0f47d34eba06
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/box/_public.scss
@@ -0,0 +1,6 @@
+// GENERATED by tools/naming/publish.mjs
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-box-item-content-font-size: #{$box-item-content-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..34a93651f4f8
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/box/_sizes.scss
@@ -0,0 +1,4 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// 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..f0fc18caa792
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/button/_colors.scss
@@ -0,0 +1,124 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$button-contained-bg-disabled: ds.$color-bg-disabled !default;
+
+/*
+ * The outlined mode used to paint its disabled BORDER with this same value. The package separates
+ * them - color.outline.*.border.disabled names border-disabled, while color.contained.*.bg
+ * .disabled names bg-disabled - so the border has its own role now.
+ */
+$button-outlined-border-disabled: ds.$color-border-disabled !default;
+
+$button-normal-contained-content: ds.$color-content !default;
+
+$button-normal-contained-bg: ds.$color-bg-alpha !default;
+
+$button-normal-outlined-bg: transparent !default;
+
+$button-normal-text-bg: transparent !default;
+
+$button-normal-contained-content-selected: ds.$color-content !default;
+
+$button-normal-contained-bg-hovered: ds.$color-bg-alpha-hovered !default;
+
+$button-normal-contained-bg-focused: ds.$color-bg-alpha-hovered !default;
+
+$button-normal-contained-bg-active: ds.$color-bg-alpha-active !default;
+
+$button-normal-contained-bg-selected: ds.$color-bg-alpha-selected !default;
+
+$button-default-contained-content: ds.$color-content-static-dark !default;
+
+$button-default-contained-bg: ds.$color-bg-primary !default;
+
+$button-default-contained-content-selected: ds.$color-content-static-dark !default;
+
+$button-default-contained-bg-hovered: ds.$color-bg-primary-hovered !default;
+
+$button-default-contained-bg-focused: ds.$color-bg-primary-hovered !default;
+
+$button-default-contained-bg-active: ds.$color-bg-primary-active !default;
+
+$button-default-contained-bg-selected: ds.$color-bg-primary-selected !default;
+
+$button-default-outlined-content: ds.$color-content-primary !default;
+$button-default-outlined-border: ds.$color-border-primary !default;
+
+$button-default-outlined-bg: transparent !default;
+$button-default-outlined-bg-hovered: ds.$color-bg-primary-subtler-hovered !default;
+$button-default-outlined-bg-focused: ds.$color-bg-primary-subtler-hovered !default;
+$button-default-outlined-bg-active: ds.$color-bg-primary-subtler-active !default;
+$button-default-outlined-bg-selected: ds.$color-bg-primary-subtler-selected !default;
+
+$button-default-text-content: ds.$color-content-primary !default;
+
+$button-danger-contained-content: ds.$color-content-static-dark !default;
+
+$button-danger-contained-bg: ds.$color-bg-danger !default;
+
+$button-danger-contained-content-selected: ds.$color-content-static-dark !default;
+
+$button-danger-contained-bg-hovered: ds.$color-bg-danger-hovered !default;
+
+$button-danger-contained-bg-focused: ds.$color-bg-danger-hovered !default;
+
+$button-danger-contained-bg-active: ds.$color-bg-danger-active !default;
+
+$button-danger-contained-bg-selected: ds.$color-bg-danger-selected !default;
+
+$button-danger-outlined-content: ds.$color-content-danger !default;
+$button-danger-outlined-border: ds.$color-border-danger !default;
+$button-danger-outlined-content-hovered: ds.$color-content-danger-hovered !default;
+$button-danger-outlined-content-active: ds.$color-content-on-subtle-danger !default;
+$button-danger-outlined-content-selected: ds.$color-content-on-subtle-danger !default;
+$button-danger-outlined-bg: transparent !default;
+$button-danger-outlined-bg-hovered: ds.$color-bg-danger-subtler-hovered !default;
+$button-danger-outlined-bg-focused: ds.$color-bg-danger-subtler-hovered !default;
+$button-danger-outlined-bg-active: ds.$color-bg-danger-subtler-active !default;
+$button-danger-outlined-bg-selected: ds.$color-bg-danger-subtler-selected !default;
+
+$button-success-contained-content: ds.$color-content-static-dark !default;
+
+$button-success-contained-bg: ds.$color-bg-success !default;
+
+$button-success-contained-content-selected: ds.$color-content-static-dark !default;
+
+$button-success-contained-bg-hovered: ds.$color-bg-success-hovered !default;
+
+$button-success-contained-bg-focused: ds.$color-bg-success-hovered !default;
+
+$button-success-contained-bg-active: ds.$color-bg-success-active !default;
+
+$button-success-contained-bg-selected: ds.$color-bg-success-selected !default;
+
+$button-success-outlined-content: ds.$color-content-success !default;
+$button-success-outlined-border: ds.$color-border-success !default;
+$button-success-outlined-content-hovered: ds.$color-content-success-hovered !default;
+$button-success-outlined-content-active: ds.$color-content-on-subtle-success !default;
+$button-success-outlined-content-selected: ds.$color-content-on-subtle-success !default;
+$button-success-outlined-bg: transparent !default;
+$button-success-outlined-bg-hovered: ds.$color-bg-success-subtler-hovered !default;
+$button-success-outlined-bg-focused: ds.$color-bg-success-subtler-hovered !default;
+$button-success-outlined-bg-active: ds.$color-bg-success-subtler-active !default;
+$button-success-outlined-bg-selected: ds.$color-bg-success-subtler-selected !default;
+
+$button-content-disabled: ds.$color-content-disabled !default;
+
+$button-default-outlined-content-hovered: ds.$color-content-primary-hovered !default;
+
+$button-default-outlined-content-active: ds.$color-content-on-subtle-primary !default;
+
+$button-default-outlined-content-selected: ds.$color-content-on-subtle-primary !default;
+
+$button-default-text-content-hovered: ds.$color-content-primary-hovered !default;
+
+$button-default-text-content-selected: ds.$color-content-primary-hovered !default;
+
+$button-default-text-bg: transparent !default;
+
+$button-danger-text-bg: transparent !default;
+
+$button-success-text-bg: transparent !default;
+
+// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
+$button-normal-outlined-border: ds.$color-border !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..d5a6bb42b614
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/button/_index.scss
@@ -0,0 +1,214 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "mixins" as *;
+@use "../../base/button";
+
+.dx-button-content {
+  line-height: var(--dx-button-content-line-height);
+}
+
+.dx-button-text {
+  line-height: var(--dx-button-text-line-height);
+  text-transform: var(--dx-button-text-transform);
+  font-weight: var(--dx-button-text-font-weight);
+  letter-spacing: var(--dx-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: var(--dx-button-box-shadow);
+  }
+}
+
+.dx-button { // stylelint-disable-line no-duplicate-selectors
+  height: var(--dx-button-height);
+  position: relative;
+
+  .dx-button-content {
+    position: relative;
+  }
+
+  @include dx-button-styling(
+    var(--dx-button-normal-contained-bg),
+    var(--dx-button-normal-contained-content),
+    var(--dx-button-normal-contained-bg-hovered),
+    var(--dx-button-normal-contained-bg-focused),
+    var(--dx-button-normal-contained-bg-active),
+    var(--dx-button-normal-contained-icon),
+    var(--dx-button-normal-contained-bg-selected),
+    var(--dx-button-normal-contained-content-selected),
+  );
+
+  &.dx-button-default {
+    @include dx-button-styling(
+      var(--dx-button-default-contained-bg),
+      var(--dx-button-default-contained-content),
+      var(--dx-button-default-contained-bg-hovered),
+      var(--dx-button-default-contained-bg-focused),
+      var(--dx-button-default-contained-bg-active),
+      var(--dx-button-default-contained-icon),
+      var(--dx-button-default-contained-bg-selected),
+      var(--dx-button-default-contained-content-selected),
+    );
+  }
+
+  &.dx-button-danger {
+    @include dx-button-styling(
+      var(--dx-button-danger-contained-bg),
+      var(--dx-button-danger-contained-content),
+      var(--dx-button-danger-contained-bg-hovered),
+      var(--dx-button-danger-contained-bg-focused),
+      var(--dx-button-danger-contained-bg-active),
+      var(--dx-button-danger-contained-icon),
+      var(--dx-button-danger-contained-bg-selected),
+      var(--dx-button-danger-contained-content-selected),
+    );
+  }
+
+  &.dx-button-success {
+    @include dx-button-styling(
+      var(--dx-button-success-contained-bg),
+      var(--dx-button-success-contained-content),
+      var(--dx-button-success-contained-bg-hovered),
+      var(--dx-button-success-contained-bg-focused),
+      var(--dx-button-success-contained-bg-active),
+      var(--dx-button-success-contained-icon),
+      var(--dx-button-success-contained-bg-selected),
+      var(--dx-button-success-contained-content-selected),
+    );
+  }
+}
+
+.dx-button-mode-text {
+  @include dx-button-flat-color-styling(
+    var(--dx-button-normal-contained-content),
+    var(--dx-button-normal-contained-content),
+    var(--dx-button-normal-contained-content),
+    var(--dx-button-normal-text-bg),
+    var(--dx-button-normal-text-bg-hovered),
+    var(--dx-button-normal-text-bg-focused),
+    var(--dx-button-normal-text-bg-active),
+    var(--dx-button-normal-text-bg-selected),
+    var(--dx-button-normal-contained-content-selected),
+  );
+
+  &.dx-button-default {
+    @include dx-button-flat-color-styling(
+      var(--dx-button-default-text-content),
+      var(--dx-button-default-text-content-hovered),
+      var(--dx-button-default-text-content-active),
+      var(--dx-button-default-text-bg),
+      var(--dx-button-default-text-bg-hovered),
+      var(--dx-button-default-text-bg-focused),
+      var(--dx-button-default-text-bg-active),
+      var(--dx-button-default-text-bg-selected),
+      var(--dx-button-default-text-content-selected),
+    );
+  }
+
+  &.dx-button-danger {
+    @include dx-button-flat-color-styling(
+      var(--dx-button-danger-text-content),
+      var(--dx-button-danger-text-content-hovered),
+      var(--dx-button-danger-text-content-active),
+      var(--dx-button-danger-text-bg),
+      var(--dx-button-danger-text-bg-hovered),
+      var(--dx-button-danger-text-bg-focused),
+      var(--dx-button-danger-text-bg-active),
+      var(--dx-button-danger-text-bg-selected),
+      var(--dx-button-danger-text-content-selected),
+    );
+  }
+
+  &.dx-button-success {
+    @include dx-button-flat-color-styling(
+      var(--dx-button-success-text-content),
+      var(--dx-button-success-text-content-hovered),
+      var(--dx-button-success-text-content-active),
+      var(--dx-button-success-text-bg),
+      var(--dx-button-success-text-bg-hovered),
+      var(--dx-button-success-text-bg-focused),
+      var(--dx-button-success-text-bg-active),
+      var(--dx-button-success-text-bg-selected),
+      var(--dx-button-success-text-content-selected),
+    );
+  }
+}
+
+.dx-button-mode-outlined {
+  @include dx-button-outlined-color-styling(
+    var(--dx-button-normal-contained-content),
+    var(--dx-button-normal-contained-content),
+    var(--dx-button-normal-contained-content),
+    var(--dx-button-normal-outlined-border),
+    var(--dx-button-normal-outlined-bg),
+    var(--dx-button-normal-outlined-bg-hovered),
+    var(--dx-button-normal-outlined-bg-focused),
+    var(--dx-button-normal-outlined-bg-active),
+    var(--dx-button-normal-outlined-bg-selected),
+    var(--dx-button-normal-contained-content-selected),
+  );
+
+  &.dx-button-default {
+    @include dx-button-outlined-color-styling(
+      var(--dx-button-default-outlined-content),
+      var(--dx-button-default-outlined-content-hovered),
+      var(--dx-button-default-outlined-content-active),
+      var(--dx-button-default-outlined-border),
+      var(--dx-button-default-outlined-bg),
+      var(--dx-button-default-outlined-bg-hovered),
+      var(--dx-button-default-outlined-bg-focused),
+      var(--dx-button-default-outlined-bg-active),
+      var(--dx-button-default-outlined-bg-selected),
+      var(--dx-button-default-outlined-content-selected),
+    );
+  }
+
+  &.dx-button-danger {
+    @include dx-button-outlined-color-styling(
+      var(--dx-button-danger-outlined-content),
+      var(--dx-button-danger-outlined-content-hovered),
+      var(--dx-button-danger-outlined-content-active),
+      var(--dx-button-danger-outlined-border),
+      var(--dx-button-danger-outlined-bg),
+      var(--dx-button-danger-outlined-bg-hovered),
+      var(--dx-button-danger-outlined-bg-focused),
+      var(--dx-button-danger-outlined-bg-active),
+      var(--dx-button-danger-outlined-bg-selected),
+      var(--dx-button-danger-outlined-content-selected),
+    );
+  }
+
+  &.dx-button-success {
+    @include dx-button-outlined-color-styling(
+      var(--dx-button-success-outlined-content),
+      var(--dx-button-success-outlined-content-hovered),
+      var(--dx-button-success-outlined-content-active),
+      var(--dx-button-success-outlined-border),
+      var(--dx-button-success-outlined-bg),
+      var(--dx-button-success-outlined-bg-hovered),
+      var(--dx-button-success-outlined-bg-focused),
+      var(--dx-button-success-outlined-bg-active),
+      var(--dx-button-success-outlined-bg-selected),
+      var(--dx-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..7264ebd60588
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/button/_mixins.scss
@@ -0,0 +1,196 @@
+@use "sass:math";
+@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, $content-padding: var(--dx-button-content-padding)) {
+  min-width: var(--dx-button-height);
+
+  @include dx-button-sizing(
+    $content-padding,
+    $content-padding,
+    $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-padding-inline,
+    $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: var(--dx-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,
+  .dx-state-disabled & {
+    box-shadow: none;
+
+    .dx-icon {
+      color: var(--dx-button-content-disabled);
+    }
+
+    .dx-button-text {
+      color: var(--dx-button-content-disabled);
+    }
+
+    &.dx-button-mode-contained {
+      background-color: var(--dx-button-contained-bg-disabled);
+    }
+
+    &.dx-button-mode-outlined {
+      border-color: var(--dx-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: var(--dx-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/_public-links.scss b/packages/devextreme-scss/scss/widgets/fluent-next/button/_public-links.scss
new file mode 100644
index 000000000000..f12397f89a03
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/button/_public-links.scss
@@ -0,0 +1,36 @@
+@mixin publish {
+  --dx-button-danger-contained-icon: var(--dx-button-danger-contained-content);
+  --dx-button-danger-text-bg-active: var(--dx-button-danger-outlined-bg-active);
+  --dx-button-danger-text-bg-focused: var(--dx-button-danger-outlined-bg-focused);
+  --dx-button-danger-text-bg-hovered: var(--dx-button-danger-outlined-bg-hovered);
+  --dx-button-danger-text-bg-selected: var(--dx-button-danger-outlined-bg-selected);
+  --dx-button-danger-text-content-active: var(--dx-button-danger-outlined-content-active);
+  --dx-button-danger-text-content-hovered: var(--dx-button-danger-outlined-content-hovered);
+  --dx-button-danger-text-content: var(--dx-button-danger-outlined-content);
+  --dx-button-danger-text-content-selected: var(--dx-button-danger-outlined-content-selected);
+  --dx-button-default-contained-icon: var(--dx-button-default-contained-content);
+  --dx-button-default-text-bg-active: var(--dx-button-default-outlined-bg-active);
+  --dx-button-default-text-bg-focused: var(--dx-button-default-outlined-bg-focused);
+  --dx-button-default-text-bg-hovered: var(--dx-button-default-outlined-bg-hovered);
+  --dx-button-default-text-bg-selected: var(--dx-button-default-outlined-bg-selected);
+  --dx-button-default-text-content-active: var(--dx-button-default-outlined-content-active);
+  --dx-button-icon-text-padding-inline-start: var(--dx-button-padding-inline);
+  --dx-button-normal-contained-icon: var(--dx-button-normal-contained-content);
+  --dx-button-normal-outlined-bg-active: var(--dx-button-normal-contained-bg-active);
+  --dx-button-normal-outlined-bg-focused: var(--dx-button-normal-contained-bg-focused);
+  --dx-button-normal-outlined-bg-hovered: var(--dx-button-normal-contained-bg-hovered);
+  --dx-button-normal-outlined-bg-selected: var(--dx-button-normal-contained-bg-selected);
+  --dx-button-normal-text-bg-active: var(--dx-button-normal-contained-bg-active);
+  --dx-button-normal-text-bg-focused: var(--dx-button-normal-contained-bg-focused);
+  --dx-button-normal-text-bg-hovered: var(--dx-button-normal-contained-bg-hovered);
+  --dx-button-normal-text-bg-selected: var(--dx-button-normal-contained-bg-selected);
+  --dx-button-success-contained-icon: var(--dx-button-success-contained-content);
+  --dx-button-success-text-bg-active: var(--dx-button-success-outlined-bg-active);
+  --dx-button-success-text-bg-focused: var(--dx-button-success-outlined-bg-focused);
+  --dx-button-success-text-bg-hovered: var(--dx-button-success-outlined-bg-hovered);
+  --dx-button-success-text-bg-selected: var(--dx-button-success-outlined-bg-selected);
+  --dx-button-success-text-content-active: var(--dx-button-success-outlined-content-active);
+  --dx-button-success-text-content-hovered: var(--dx-button-success-outlined-content-hovered);
+  --dx-button-success-text-content: var(--dx-button-success-outlined-content);
+  --dx-button-success-text-content-selected: var(--dx-button-success-outlined-content-selected);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/button/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/button/_public.scss
new file mode 100644
index 000000000000..f52905e8554a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/button/_public.scss
@@ -0,0 +1,93 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+@use "public-links" as links;
+
+@mixin publish {
+  --dx-button-border-radius: #{$button-border-radius};
+  --dx-button-border-width: #{$button-border-width};
+  --dx-button-box-shadow: #{$button-box-shadow};
+  --dx-button-contained-bg-disabled: #{$button-contained-bg-disabled};
+  --dx-button-content-disabled: #{$button-content-disabled};
+  --dx-button-content-line-height: #{$button-content-line-height};
+  --dx-button-content-padding: #{$button-content-padding};
+  --dx-button-danger-contained-bg: #{$button-danger-contained-bg};
+  --dx-button-danger-contained-bg-active: #{$button-danger-contained-bg-active};
+  --dx-button-danger-contained-bg-focused: #{$button-danger-contained-bg-focused};
+  --dx-button-danger-contained-bg-hovered: #{$button-danger-contained-bg-hovered};
+  --dx-button-danger-contained-bg-selected: #{$button-danger-contained-bg-selected};
+  --dx-button-danger-contained-content: #{$button-danger-contained-content};
+  --dx-button-danger-contained-content-selected: #{$button-danger-contained-content-selected};
+  --dx-button-danger-outlined-bg: #{$button-danger-outlined-bg};
+  --dx-button-danger-outlined-bg-active: #{$button-danger-outlined-bg-active};
+  --dx-button-danger-outlined-bg-focused: #{$button-danger-outlined-bg-focused};
+  --dx-button-danger-outlined-bg-hovered: #{$button-danger-outlined-bg-hovered};
+  --dx-button-danger-outlined-bg-selected: #{$button-danger-outlined-bg-selected};
+  --dx-button-danger-outlined-border: #{$button-danger-outlined-border};
+  --dx-button-danger-outlined-content: #{$button-danger-outlined-content};
+  --dx-button-danger-outlined-content-active: #{$button-danger-outlined-content-active};
+  --dx-button-danger-outlined-content-hovered: #{$button-danger-outlined-content-hovered};
+  --dx-button-danger-outlined-content-selected: #{$button-danger-outlined-content-selected};
+  --dx-button-danger-text-bg: #{$button-danger-text-bg};
+  --dx-button-default-contained-bg: #{$button-default-contained-bg};
+  --dx-button-default-contained-bg-active: #{$button-default-contained-bg-active};
+  --dx-button-default-contained-bg-focused: #{$button-default-contained-bg-focused};
+  --dx-button-default-contained-bg-hovered: #{$button-default-contained-bg-hovered};
+  --dx-button-default-contained-bg-selected: #{$button-default-contained-bg-selected};
+  --dx-button-default-contained-content: #{$button-default-contained-content};
+  --dx-button-default-contained-content-selected: #{$button-default-contained-content-selected};
+  --dx-button-default-outlined-bg: #{$button-default-outlined-bg};
+  --dx-button-default-outlined-bg-active: #{$button-default-outlined-bg-active};
+  --dx-button-default-outlined-bg-focused: #{$button-default-outlined-bg-focused};
+  --dx-button-default-outlined-bg-hovered: #{$button-default-outlined-bg-hovered};
+  --dx-button-default-outlined-bg-selected: #{$button-default-outlined-bg-selected};
+  --dx-button-default-outlined-border: #{$button-default-outlined-border};
+  --dx-button-default-outlined-content: #{$button-default-outlined-content};
+  --dx-button-default-outlined-content-active: #{$button-default-outlined-content-active};
+  --dx-button-default-outlined-content-hovered: #{$button-default-outlined-content-hovered};
+  --dx-button-default-outlined-content-selected: #{$button-default-outlined-content-selected};
+  --dx-button-default-text-bg: #{$button-default-text-bg};
+  --dx-button-default-text-content: #{$button-default-text-content};
+  --dx-button-default-text-content-hovered: #{$button-default-text-content-hovered};
+  --dx-button-default-text-content-selected: #{$button-default-text-content-selected};
+  --dx-button-height: #{$button-height};
+  --dx-button-icon-margin: #{$button-icon-margin};
+  --dx-button-icon-size: #{$button-icon-size};
+  --dx-button-normal-contained-bg: #{$button-normal-contained-bg};
+  --dx-button-normal-contained-bg-active: #{$button-normal-contained-bg-active};
+  --dx-button-normal-contained-bg-focused: #{$button-normal-contained-bg-focused};
+  --dx-button-normal-contained-bg-hovered: #{$button-normal-contained-bg-hovered};
+  --dx-button-normal-contained-bg-selected: #{$button-normal-contained-bg-selected};
+  --dx-button-normal-contained-content: #{$button-normal-contained-content};
+  --dx-button-normal-contained-content-selected: #{$button-normal-contained-content-selected};
+  --dx-button-normal-outlined-bg: #{$button-normal-outlined-bg};
+  --dx-button-normal-outlined-border: #{$button-normal-outlined-border};
+  --dx-button-normal-text-bg: #{$button-normal-text-bg};
+  --dx-button-outlined-border-disabled: #{$button-outlined-border-disabled};
+  --dx-button-padding-block: #{$button-padding-block};
+  --dx-button-padding-inline: #{$button-padding-inline};
+  --dx-button-success-contained-bg: #{$button-success-contained-bg};
+  --dx-button-success-contained-bg-active: #{$button-success-contained-bg-active};
+  --dx-button-success-contained-bg-focused: #{$button-success-contained-bg-focused};
+  --dx-button-success-contained-bg-hovered: #{$button-success-contained-bg-hovered};
+  --dx-button-success-contained-bg-selected: #{$button-success-contained-bg-selected};
+  --dx-button-success-contained-content: #{$button-success-contained-content};
+  --dx-button-success-contained-content-selected: #{$button-success-contained-content-selected};
+  --dx-button-success-outlined-bg: #{$button-success-outlined-bg};
+  --dx-button-success-outlined-bg-active: #{$button-success-outlined-bg-active};
+  --dx-button-success-outlined-bg-focused: #{$button-success-outlined-bg-focused};
+  --dx-button-success-outlined-bg-hovered: #{$button-success-outlined-bg-hovered};
+  --dx-button-success-outlined-bg-selected: #{$button-success-outlined-bg-selected};
+  --dx-button-success-outlined-border: #{$button-success-outlined-border};
+  --dx-button-success-outlined-content: #{$button-success-outlined-content};
+  --dx-button-success-outlined-content-active: #{$button-success-outlined-content-active};
+  --dx-button-success-outlined-content-hovered: #{$button-success-outlined-content-hovered};
+  --dx-button-success-outlined-content-selected: #{$button-success-outlined-content-selected};
+  --dx-button-success-text-bg: #{$button-success-text-bg};
+  --dx-button-text-font-weight: #{$button-text-font-weight};
+  --dx-button-text-letter-spacing: #{$button-text-letter-spacing};
+  --dx-button-text-line-height: #{$button-text-line-height};
+  --dx-button-text-transform: #{$button-text-transform};
+
+  @include links.publish();
+}
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..04e5916bf184
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/button/_sizes.scss
@@ -0,0 +1,46 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// 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-content-line-height: 0 !default;
+$button-text-line-height: normal !default;
+$button-text-transform: none !default;
+$button-text-font-weight: ds.$font-weight-base-strong !default;
+$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: ds.$box-shadow-xs !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;
+}
+
+@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;
+}
+
+// Derived: the content padding of an icon-only button at the default icon size
+$button-content-padding: calc((#{$button-height} - #{$button-icon-size} - #{$global-border-width} * 2) / 2) !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..ffb4f5435561
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/buttonGroup/_colors.scss
@@ -0,0 +1,3 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$button-group-separator: ds.$color-border-subtle !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..fc99a711d916
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/buttonGroup/_index.scss
@@ -0,0 +1,33 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../button/sizes" as buttonSizes;
+@use "../../base/buttonGroup" with (
+  $buttongroup-mode-text-column-gap: var(--dx-button-group-text-column-gap),
+);
+@use "../../base/buttonGroup/mixins" as *;
+@use "../button/colors" as buttonColors;
+@include dx-buttongroup-sizing(
+  buttonSizes.$button-border-radius,
+  1px, // dx-line-width: 1px, the button border passed to dx-buttongroup-sizing
+);
+
+.dx-buttongroup-mode-contained {
+  border-radius: buttonSizes.$button-border-radius;
+  box-shadow: buttonSizes.$button-box-shadow;
+
+  .dx-button-mode-contained {
+    box-shadow: none;
+    border-width: 0;
+    border-style: solid;
+    border-inline-end-width: var(--dx-button-group-item-contained-border-inline-end-width);
+    border-inline-end-color: var(--dx-button-group-separator);
+
+    &.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/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/buttonGroup/_public.scss
new file mode 100644
index 000000000000..4768ddc4cbc5
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/buttonGroup/_public.scss
@@ -0,0 +1,9 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-button-group-item-contained-border-inline-end-width: #{$button-group-item-contained-border-inline-end-width};
+  --dx-button-group-separator: #{$button-group-separator};
+  --dx-button-group-text-column-gap: #{$button-group-text-column-gap};
+}
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..16c13eb122ef
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/buttonGroup/_sizes.scss
@@ -0,0 +1,7 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// 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..6c28fde79ba2
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_colors.scss
@@ -0,0 +1,22 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$calendar-content: ds.$color-content !default;
+
+$calendar-navigator-content: ds.$color-content !default;
+
+$calendar-cell-other-content: ds.$color-content-subtle !default;
+
+$calendar-cell-content-disabled: ds.$color-content-disabled !default;
+$calendar-bg: transparent !default;
+$calendar-bg-hovered: ds.$color-bg-primary-subtler-hovered !default;
+
+$calendar-cell-bg-selected-disabled: ds.$color-bg-disabled !default;
+$calendar-cell-bg-selected: ds.$color-bg-primary !default;
+
+$calendar-cell-today-border: ds.$color-border-primary-shared !default;
+$calendar-cell-content-selected: ds.$color-content-static-dark !default;
+$calendar-cell-bg-active: ds.$color-bg-primary-subtler-active !default;
+$calendar-invalid-border: ds.$color-border-danger !default;
+$calendar-invalid-border-focused: ds.$color-border-danger !default;
+$calendar-week-number-cell-content: ds.$color-content-subtle !default;
+$calendar-week-number-cell-bg: ds.$color-bg-canvas !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..c48ee8999410
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_index.scss
@@ -0,0 +1,91 @@
+@use "sass:math";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../button/mixins" as *;
+@use "../../base/calendar/calendar" with (
+  $calendar-week-day-header-font-size: var(--dx-calendar-week-day-header-font-size),
+  $calendar-week-day-header-font-weight: var(--dx-calendar-week-day-header-font-weight),
+  $calendar-border-width: var(--dx-calendar-border-width),
+  $calendar-multiview-table-padding: 0 var(--dx-calendar-view-multiview-padding-inline),
+);
+@use "../../base/calendar/mixins" as *;
+@include dx-calendar-mixin(
+  var(--dx-calendar-bg),
+  $calendar-legacy-width,
+  var(--dx-calendar-legacy-height),
+  var(--dx-calendar-element-gap),
+  var(--dx-calendar-footer-button-height),
+  var(--dx-calendar-invalid-border),
+  var(--dx-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(
+  var(--dx-calendar-navigator-content),
+);
+@include dx-calendar-body-mixin(
+  var(--dx-calendar-week-number-cell-content),
+  var(--dx-calendar-week-number-cell-bg),
+  var(--dx-calendar-week-number-border-radius),
+  var(--dx-calendar-cell-font-size),
+  var(--dx-calendar-header-content),
+);
+@include dx-calendar-cell-mixin(
+  var(--dx-calendar-cell-contoured-border-radius),
+  var(--dx-calendar-content),
+  $global-border-radius,
+  var(--dx-calendar-cell-today-border),
+  var(--dx-calendar-bg-hovered),
+  var(--dx-calendar-cell-content-hovered),
+  var(--dx-calendar-cell-bg-active),
+  var(--dx-calendar-cell-bg-selected),
+  var(--dx-calendar-cell-content-selected),
+  var(--dx-calendar-cell-contoured-border),
+  var(--dx-calendar-cell-other-content),
+  var(--dx-calendar-cell-other-content-hovered),
+  var(--dx-calendar-cell-border-hovered),
+  999em,
+  $cell-today-border-width: var(--dx-calendar-cell-today-border-width),
+  $cell-contoured-ring-width: var(--dx-calendar-cell-contoured-outline-width),
+);
+@include dx-calendar-cell-in-range-mixin(
+  "::before",
+  var(--dx-calendar-bg-hovered),
+  var(--dx-calendar-cell-border-hovered),
+  999em,
+  0,
+);
+@include dx-calendar-cell-in-range-mixin(
+  "::after",
+  inherit,
+  var(--dx-calendar-cell-border-hovered),
+  999em,
+  1px, // dx-line-width: 1px, the range cell border passed to dx-calendar-cell-in-range-mixin
+  ".dx-calendar-cell-range-hover",
+  ".dx-calendar-cell-range-hover-start",
+  ".dx-calendar-cell-range-hover-end",
+);
+
+.dx-calendar.dx-state-disabled,
+.dx-state-disabled .dx-calendar {
+  .dx-calendar-cell,
+  .dx-calendar-week-number-cell,
+  .dx-calendar-body thead th {
+    color: var(--dx-calendar-cell-content-disabled);
+  }
+
+  .dx-calendar-cell.dx-calendar-selected-date span {
+    background-color: var(--dx-calendar-cell-bg-selected-disabled);
+    color: var(--dx-calendar-cell-content-disabled);
+  }
+
+  .dx-calendar-navigator .dx-button .dx-icon,
+  .dx-calendar-caption-button .dx-button-text {
+    color: var(--dx-calendar-cell-content-disabled);
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_public-links.scss b/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_public-links.scss
new file mode 100644
index 000000000000..70fbe8680c2e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_public-links.scss
@@ -0,0 +1,7 @@
+@mixin publish {
+  --dx-calendar-cell-border-hovered: var(--dx-calendar-bg-hovered);
+  --dx-calendar-cell-content-hovered: var(--dx-calendar-content);
+  --dx-calendar-cell-contoured-border: var(--dx-calendar-cell-bg-active);
+  --dx-calendar-cell-other-content-hovered: var(--dx-calendar-cell-other-content);
+  --dx-calendar-header-content: var(--dx-calendar-content);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_public.scss
new file mode 100644
index 000000000000..e3e3bae09331
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_public.scss
@@ -0,0 +1,37 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+@use "public-links" as links;
+
+@mixin publish {
+  --dx-calendar-bg: #{$calendar-bg};
+  --dx-calendar-bg-hovered: #{$calendar-bg-hovered};
+  --dx-calendar-border-width: #{$calendar-border-width};
+  --dx-calendar-cell-bg-active: #{$calendar-cell-bg-active};
+  --dx-calendar-cell-bg-selected: #{$calendar-cell-bg-selected};
+  --dx-calendar-cell-bg-selected-disabled: #{$calendar-cell-bg-selected-disabled};
+  --dx-calendar-cell-content-disabled: #{$calendar-cell-content-disabled};
+  --dx-calendar-cell-content-selected: #{$calendar-cell-content-selected};
+  --dx-calendar-cell-contoured-border-radius: #{$calendar-cell-contoured-border-radius};
+  --dx-calendar-cell-contoured-outline-width: #{$calendar-cell-contoured-outline-width};
+  --dx-calendar-cell-font-size: #{$calendar-cell-font-size};
+  --dx-calendar-cell-other-content: #{$calendar-cell-other-content};
+  --dx-calendar-cell-today-border: #{$calendar-cell-today-border};
+  --dx-calendar-cell-today-border-width: #{$calendar-cell-today-border-width};
+  --dx-calendar-content: #{$calendar-content};
+  --dx-calendar-element-gap: #{$calendar-element-gap};
+  --dx-calendar-footer-button-height: #{$calendar-footer-button-height};
+  --dx-calendar-invalid-border: #{$calendar-invalid-border};
+  --dx-calendar-invalid-border-focused: #{$calendar-invalid-border-focused};
+  --dx-calendar-legacy-height: #{$calendar-legacy-height};
+  --dx-calendar-legacy-width: #{$calendar-legacy-width};
+  --dx-calendar-navigator-content: #{$calendar-navigator-content};
+  --dx-calendar-view-multiview-padding-inline: #{$calendar-view-multiview-padding-inline};
+  --dx-calendar-week-day-header-font-size: #{$calendar-week-day-header-font-size};
+  --dx-calendar-week-day-header-font-weight: #{$calendar-week-day-header-font-weight};
+  --dx-calendar-week-number-border-radius: #{$calendar-week-number-border-radius};
+  --dx-calendar-week-number-cell-bg: #{$calendar-week-number-cell-bg};
+  --dx-calendar-week-number-cell-content: #{$calendar-week-number-cell-content};
+
+  @include links.publish();
+}
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..8c5b2a2c688b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_sizes.scss
@@ -0,0 +1,41 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// 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-gap: 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-caption-strong !default;
+
+// Base-layer sizing injected with design tokens (wave B10)
+$calendar-border-width: ds.$border-width-10 !default;
+$calendar-view-multiview-padding-inline: ds.$spacing-100 !default;
+$calendar-cell-today-border-width: ds.$border-width-20 !default;
+$calendar-cell-contoured-outline-width: ds.$border-width-20 !default;
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..ae65a50b0c09
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/card/_colors.scss
@@ -0,0 +1,6 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$card-bg: ds.$color-bg !default;
+$card-shadow: ds.$box-shadow-sm !default;
+
+$card-bg-disabled: ds.$color-bg-disabled !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..4143777895fb
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/card/_index.scss
@@ -0,0 +1,15 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/card";
+
+.dx-card {
+  box-shadow: var(--dx-card-shadow);
+  border-radius: $global-border-radius;
+  background-color: var(--dx-card-bg);
+  margin: var(--dx-card-margin);
+}
+
+.dx-state-disabled .dx-card {
+  background-color: var(--dx-card-bg-disabled);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/card/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/card/_public.scss
new file mode 100644
index 000000000000..dba1a02f089d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/card/_public.scss
@@ -0,0 +1,10 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-card-bg: #{$card-bg};
+  --dx-card-bg-disabled: #{$card-bg-disabled};
+  --dx-card-margin: #{$card-margin};
+  --dx-card-shadow: #{$card-shadow};
+}
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..cae6fc9b8eab
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/card/_sizes.scss
@@ -0,0 +1,4 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// 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..c9bb328284f6
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/cardView/_colors.scss
@@ -0,0 +1,258 @@
+@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 *;
+
+// Mode/accent is resolved by the design tokens, so the former light/dark branches collapse to one.
+
+// #region COMMON SETTINGS
+
+$card-view-bg: ds.$color-bg-canvas !default;
+
+$card-view-link-content: ds.$color-content-primary !default;
+
+$card-view-text-content: ds.$color-content !default;
+
+// #endregion
+
+// #region CARD
+
+$card-view-card-bg: ds.$color-bg !default;
+
+$card-view-card-border: ds.$color-border !default;
+
+$card-view-card-divider-border: var(--dx-card-view-card-border) !default;
+
+$card-view-card-content: var(--dx-card-view-text-content) !default;
+
+$card-view-card-cover-bg: ds.$color-bg-static-light !default;
+
+$card-view-card-cover-noimage-bg: ds.$color-bg-low !default;
+
+$card-view-card-cover-noimage-icon: ds.$color-content-subtle !default;
+
+$card-view-card-outline-focused: ds.$color-border-primary-shared !default;
+
+// #endregion
+
+// #region CARD (SELECTED)
+
+$card-view-card-bg-selected: ds.$color-bg-primary-subtler-selected !default;
+
+$card-view-card-border-selected: ds.$color-border-primary !default;
+
+$card-view-card-divider-border-selected: var(--dx-card-view-card-border-selected) !default;
+
+$card-view-card-content-selected: var(--dx-card-view-card-content) !default;
+
+$card-view-card-cover-bg-selected: var(--dx-card-view-card-cover-bg) !default;
+
+$card-view-card-cover-noimage-bg-selected: var(--dx-card-view-card-cover-noimage-bg) !default;
+
+$card-view-card-cover-noimage-icon-selected: var(--dx-card-view-card-cover-noimage-icon) !default;
+
+// #endregion
+
+// #region HEADER PANEL ITEM
+
+$card-view-header-panel-item-bg: ds.$color-bg-low !default;
+
+$card-view-header-panel-item-border: ds.$color-border !default;
+
+$card-view-header-panel-item-content: var(--dx-card-view-text-content) !default;
+
+$card-view-header-panel-item-icon: var(--dx-card-view-text-content) !default;
+
+$card-view-header-panel-item-header-filter-icon-selected: ds.$color-content-primary !default;
+
+$card-view-header-panel-item-sort-index-content: var(--dx-card-view-text-content) !default;
+
+$card-view-header-panel-item-outline-focused: ds.$color-border-primary-shared !default;
+
+// #endregion
+
+// #region HEADER PANEL ITEM (HOVERED)
+
+$card-view-header-panel-item-bg-hovered: ds.$color-bg-low-hovered !default;
+
+$card-view-header-panel-item-border-hovered: ds.$color-border-hovered !default;
+
+$card-view-header-panel-item-content-hovered: var(--dx-card-view-header-panel-item-content) !default;
+
+$card-view-header-panel-item-icon-hovered: var(--dx-card-view-header-panel-item-icon) !default;
+
+$card-view-header-panel-item-header-filter-icon-selected-hovered: var(--dx-card-view-header-panel-item-header-filter-icon-selected) !default;
+
+$card-view-header-panel-item-sort-index-content-hovered: var(--dx-card-view-header-panel-item-sort-index-content) !default;
+
+// #endregion
+
+// #region HEADER PANEL ITEM (DISABLED)
+
+$card-view-header-panel-item-dragging-bg: var(--dx-card-view-header-panel-item-bg) !default;
+
+$card-view-header-panel-item-dragging-border: var(--dx-card-view-header-panel-item-border) !default;
+
+$card-view-header-panel-item-dragging-content: var(--dx-card-view-header-panel-item-content) !default;
+
+$card-view-header-panel-item-dragging-icon: var(--dx-card-view-header-panel-item-icon) !default;
+
+$card-view-header-panel-item-dragging-header-filter-icon-selected: var(--dx-card-view-header-panel-item-header-filter-icon-selected) !default;
+
+$card-view-header-panel-item-dragging-sort-index-content: var(--dx-card-view-header-panel-item-sort-index-content) !default;
+
+// #endregion
+
+// #region HEADER PANEL ITEM (ON DRAG)
+
+$card-view-header-panel-item-dragged-bg: var(--dx-card-view-header-panel-item-bg) !default;
+
+$card-view-header-panel-item-dragged-border: var(--dx-card-view-header-panel-item-border) !default;
+
+$card-view-header-panel-item-dragged-content: var(--dx-card-view-header-panel-item-content) !default;
+
+$card-view-header-panel-item-dragged-allowance-icon: var(--dx-card-view-text-content) !default;
+
+$card-view-header-panel-item-dragged-prohibition-icon: ds.$color-content-danger !default;
+
+$card-view-header-panel-item-dragged-shadow: ds.$box-shadow-md !default;
+
+// #endregion
+
+// #region HEADER PANEL DROP ZONE
+
+$card-view-header-panel-dropzone-bg: ds.$color-bg-primary-subtle !default;
+
+$card-view-header-panel-dropzone-border: ds.$color-border-primary !default;
+
+$card-view-header-panel-dropzone-content: ds.$color-content-primary !default;
+
+$card-view-header-panel-dropzone-icon: ds.$color-content-primary !default;
+
+// #endregion
+
+// #region FILTER PANEL
+
+$card-view-filter-panel-bg: var(--dx-card-view-bg) !default;
+
+$card-view-filter-panel-border: ds.$color-border !default;
+
+$card-view-filter-panel-content: ds.$color-content-primary !default;
+
+$card-view-filter-panel-icon: ds.$color-content-primary !default;
+
+// #endregion
+
+// #region EMPTY VIEW
+
+$card-view-nodata-view-bg: var(--dx-card-view-bg) !default;
+
+$card-view-nodata-view-content: ds.$color-content-subtle !default;
+
+$card-view-nodata-view-icon: var(--dx-card-view-nodata-view-content) !default;
+
+$card-view-nodata-view-icon-bg: ds.$color-bg-low !default;
+
+// #endregion
+
+// #region HIGHLIGHTS IN SEARCH
+
+$card-view-card-content-field-value-highlighted-bg: ds.$color-bg-highlight !default;
+
+$card-view-card-content-field-value-highlighted-content: ds.$color-content-on-highlight !default;
+
+$card-view-card-content-field-value-highlighted-shadow: ds.$box-shadow-xs !default;
+
+// #endregion
+
+// #region COLUMN CHOOSER
+
+$card-view-column-chooser-empty-message-content: ds.$color-content-subtle !default;
+
+// #endregion
+
+$cardview-bg-color: var(--dx-card-view-bg) !default;
+$cardview-link-color: var(--dx-card-view-link-content) !default;
+$cardview-text-color: var(--dx-card-view-text-content) !default;
+
+$cardview-card-bg-color: var(--dx-card-view-card-bg) !default;
+$cardview-card-border-color: var(--dx-card-view-card-border) !default;
+$cardview-card-divider-color: var(--dx-card-view-card-divider-border) !default;
+$cardview-card-text-color: var(--dx-card-view-card-content) !default;
+$cardview-card__cover-bg-color: var(--dx-card-view-card-cover-bg) !default;
+$cardview-card__cover--noimage-bg-color: var(--dx-card-view-card-cover-noimage-bg) !default;
+$cardview-card__cover--noimage__icon-color: var(--dx-card-view-card-cover-noimage-icon) !default;
+
+$cardview-card--selected-bg-color: var(--dx-card-view-card-bg-selected) !default;
+$cardview-card--selected-border-color: var(--dx-card-view-card-border-selected) !default;
+$cardview-card--selected-divider-color: var(--dx-card-view-card-divider-border-selected) !default;
+$cardview-card--selected-text-color: var(--dx-card-view-card-content-selected) !default;
+$cardview-card--selected__cover-bg-color: var(--dx-card-view-card-cover-bg-selected) !default;
+$cardview-card--selected__cover--noimage-bg-color: var(--dx-card-view-card-cover-noimage-bg-selected) !default;
+$cardview-card--selected__cover--noimage__icon-color: var(--dx-card-view-card-cover-noimage-icon-selected) !default;
+
+$cardview-card--focused-outline-color: var(--dx-card-view-card-outline-focused) !default;
+
+$cardview-header-panel__item-bg-color: var(--dx-card-view-header-panel-item-bg) !default;
+$cardview-header-panel__item-border-color: var(--dx-card-view-header-panel-item-border) !default;
+$cardview-header-panel__item-text-color: var(--dx-card-view-header-panel-item-content) !default;
+$cardview-header-panel__item__icon-color: var(--dx-card-view-header-panel-item-icon) !default;
+$cardview-header-panel__item__header-filter-icon--selected-color: var(--dx-card-view-header-panel-item-header-filter-icon-selected) !default;
+$cardview-header-panel__item__sort-index-text-color: var(--dx-card-view-header-panel-item-sort-index-content) !default;
+
+$cardview-header-panel__item--focused-outline-color: var(--dx-card-view-header-panel-item-outline-focused) !default;
+
+$cardview-header-panel__item--hovered-bg-color: var(--dx-card-view-header-panel-item-bg-hovered) !default;
+$cardview-header-panel__item--hovered-border-color: var(--dx-card-view-header-panel-item-border-hovered) !default;
+$cardview-header-panel__item--hovered-text-color: var(--dx-card-view-header-panel-item-content-hovered) !default;
+$cardview-header-panel__item--hovered__icon-color: var(--dx-card-view-header-panel-item-icon-hovered) !default;
+$cardview-header-panel__item--hovered__header-filter-icon--selected-color: var(--dx-card-view-header-panel-item-header-filter-icon-selected-hovered) !default;
+$cardview-header-panel__item--hovered__sort-index-text-color: var(--dx-card-view-header-panel-item-sort-index-content-hovered) !default;
+
+$cardview-header-panel__item--disabled-bg-color: var(--dx-card-view-header-panel-item-dragging-bg) !default;
+$cardview-header-panel__item--disabled-border-color: var(--dx-card-view-header-panel-item-dragging-border) !default;
+$cardview-header-panel__item--disabled-text-color: var(--dx-card-view-header-panel-item-dragging-content) !default;
+$cardview-header-panel__item--disabled__icon-color: var(--dx-card-view-header-panel-item-dragging-icon) !default;
+$cardview-header-panel__item--disabled__header-filter-icon--selected-color: var(--dx-card-view-header-panel-item-dragging-header-filter-icon-selected) !default;
+$cardview-header-panel__item--disabled__sort-index-text-color: var(--dx-card-view-header-panel-item-dragging-sort-index-content) !default;
+
+$cardview-header-panel__item--dragged-bg-color: var(--dx-card-view-header-panel-item-dragged-bg) !default;
+$cardview-header-panel__item--dragged-border-color: var(--dx-card-view-header-panel-item-dragged-border) !default;
+$cardview-header-panel__item--dragged-text-color: var(--dx-card-view-header-panel-item-dragged-content) !default;
+$cardview-header-panel__item--dragged__allowance-icon-color: var(--dx-card-view-header-panel-item-dragged-allowance-icon) !default;
+$cardview-header-panel__item--dragged__prohibition-icon-color: var(--dx-card-view-header-panel-item-dragged-prohibition-icon) !default;
+$cardview-header-panel__item--dragged-box-shadow: var(--dx-card-view-header-panel-item-dragged-shadow) !default;
+
+$cardview-header-panel__dropzone-bg-color: var(--dx-card-view-header-panel-dropzone-bg) !default;
+$cardview-header-panel__dropzone-border-color: var(--dx-card-view-header-panel-dropzone-border) !default;
+$cardview-header-panel__dropzone-text-color: var(--dx-card-view-header-panel-dropzone-content) !default;
+$cardview-header-panel__dropzone__icon-color: var(--dx-card-view-header-panel-dropzone-icon) !default;
+
+$cardview-filter-panel-bg-color: var(--dx-card-view-filter-panel-bg) !default;
+$cardview-filter-panel-border-color: var(--dx-card-view-filter-panel-border) !default;
+$cardview-filter-panel-text-color: var(--dx-card-view-filter-panel-content) !default;
+$cardview-filter-panel__icon-color: var(--dx-card-view-filter-panel-icon) !default;
+
+$cardview-nodata-view-bg-color: var(--dx-card-view-nodata-view-bg) !default;
+$cardview-nodata-view-text-color: var(--dx-card-view-nodata-view-content) !default;
+$cardview-nodata-view__icon-color: var(--dx-card-view-nodata-view-icon) !default;
+$cardview-nodata-view__icon-bg-color: var(--dx-card-view-nodata-view-icon-bg) !default;
+
+$cardview-card__content__field-value--highlighted-bg-color: var(--dx-card-view-card-content-field-value-highlighted-bg) !default;
+$cardview-card__content__field-value--highlighted-text-color: var(--dx-card-view-card-content-field-value-highlighted-content) !default;
+$cardview-card__content__field-value--highlighted-box-shadow: var(--dx-card-view-card-content-field-value-highlighted-shadow) !default;
+
+$cardview-columnchooser--empty__message-color: var(--dx-card-view-column-chooser-empty-message-content) !default;
+
+$card-view-header-item-sort-indicator-border: ds.$color-border-primary !default;
+$cardview-header-item__sort-indicator__border-color: var(--dx-card-view-header-item-sort-indicator-border) !default;
+
+$card-view-content-disabled: ds.$color-content-disabled !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..04d18540e0f4
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/cardView/_index.scss
@@ -0,0 +1,24 @@
+@use "../mixins" as *;
+@use 'colors';
+@use 'sizes';
+@use '../../base/cardView/index' as *;
+
+@include when-disabled(".dx-cardview") {
+  color: var(--dx-card-view-content-disabled);
+
+  .dx-cardview-header-item .dx-cardview-header-item-sorting-order,
+  .dx-cardview-field-caption,
+  .dx-cardview-field-value,
+  .dx-cardview-card-content,
+  .dx-cardview-header-item {
+    color: var(--dx-card-view-content-disabled);
+  }
+}
+
+.dx-cardview.dx-state-disabled,
+.dx-state-disabled .dx-cardview {
+  .dx-cardview-dropzone .dx-icon,
+  .dx-cardview-dropzone span {
+    color: var(--dx-card-view-content-disabled);
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/cardView/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/cardView/_public.scss
new file mode 100644
index 000000000000..e64322c7d20f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/cardView/_public.scss
@@ -0,0 +1,119 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-card-view-bg: #{$card-view-bg};
+  --dx-card-view-border-radius: #{$card-view-border-radius};
+  --dx-card-view-card-bg: #{$card-view-card-bg};
+  --dx-card-view-card-bg-selected: #{$card-view-card-bg-selected};
+  --dx-card-view-card-border: #{$card-view-card-border};
+  --dx-card-view-card-border-radius: #{$card-view-card-border-radius};
+  --dx-card-view-card-border-selected: #{$card-view-card-border-selected};
+  --dx-card-view-card-border-width: #{$card-view-card-border-width};
+  --dx-card-view-card-content: #{$card-view-card-content};
+  --dx-card-view-card-content-cell-padding-block: #{$card-view-card-content-cell-padding-block};
+  --dx-card-view-card-content-cell-padding-inline: #{$card-view-card-content-cell-padding-inline};
+  --dx-card-view-card-content-field-value-highlighted-bg: #{$card-view-card-content-field-value-highlighted-bg};
+  --dx-card-view-card-content-field-value-highlighted-border-radius: #{$card-view-card-content-field-value-highlighted-border-radius};
+  --dx-card-view-card-content-field-value-highlighted-content: #{$card-view-card-content-field-value-highlighted-content};
+  --dx-card-view-card-content-field-value-highlighted-font-weight: #{$card-view-card-content-field-value-highlighted-font-weight};
+  --dx-card-view-card-content-field-value-highlighted-padding: #{$card-view-card-content-field-value-highlighted-padding};
+  --dx-card-view-card-content-field-value-highlighted-shadow: #{$card-view-card-content-field-value-highlighted-shadow};
+  --dx-card-view-card-content-padding: #{$card-view-card-content-padding};
+  --dx-card-view-card-content-row-gap: #{$card-view-card-content-row-gap};
+  --dx-card-view-card-content-selected: #{$card-view-card-content-selected};
+  --dx-card-view-card-cover-bg: #{$card-view-card-cover-bg};
+  --dx-card-view-card-cover-bg-selected: #{$card-view-card-cover-bg-selected};
+  --dx-card-view-card-cover-max-height: #{$card-view-card-cover-max-height};
+  --dx-card-view-card-cover-noimage-bg: #{$card-view-card-cover-noimage-bg};
+  --dx-card-view-card-cover-noimage-bg-selected: #{$card-view-card-cover-noimage-bg-selected};
+  --dx-card-view-card-cover-noimage-icon: #{$card-view-card-cover-noimage-icon};
+  --dx-card-view-card-cover-noimage-icon-selected: #{$card-view-card-cover-noimage-icon-selected};
+  --dx-card-view-card-cover-noimage-icon-size: #{$card-view-card-cover-noimage-icon-size};
+  --dx-card-view-card-divider-border: #{$card-view-card-divider-border};
+  --dx-card-view-card-divider-border-selected: #{$card-view-card-divider-border-selected};
+  --dx-card-view-card-field-caption-font-weight: #{$card-view-card-field-caption-font-weight};
+  --dx-card-view-card-field-caption-font-weight-selected: #{$card-view-card-field-caption-font-weight-selected};
+  --dx-card-view-card-header-font-size: #{$card-view-card-header-font-size};
+  --dx-card-view-card-header-height: #{$card-view-card-header-height};
+  --dx-card-view-card-header-selection-checkbox-padding-inline-end: #{$card-view-card-header-selection-checkbox-padding-inline-end};
+  --dx-card-view-card-min-width: #{$card-view-card-min-width};
+  --dx-card-view-card-outline-focused: #{$card-view-card-outline-focused};
+  --dx-card-view-cards-column-gap: #{$card-view-cards-column-gap};
+  --dx-card-view-cards-row-gap: #{$card-view-cards-row-gap};
+  --dx-card-view-column-chooser-empty-message-content: #{$card-view-column-chooser-empty-message-content};
+  --dx-card-view-column-chooser-empty-message-horizontal-padding: #{$card-view-column-chooser-empty-message-horizontal-padding};
+  --dx-card-view-column-chooser-select-all-item-horizontal-padding: #{$card-view-column-chooser-select-all-item-horizontal-padding};
+  --dx-card-view-content-disabled: #{$card-view-content-disabled};
+  --dx-card-view-filter-panel-bg: #{$card-view-filter-panel-bg};
+  --dx-card-view-filter-panel-border: #{$card-view-filter-panel-border};
+  --dx-card-view-filter-panel-border-radius: #{$card-view-filter-panel-border-radius};
+  --dx-card-view-filter-panel-content: #{$card-view-filter-panel-content};
+  --dx-card-view-filter-panel-icon: #{$card-view-filter-panel-icon};
+  --dx-card-view-font-weight: #{$card-view-font-weight};
+  --dx-card-view-gap: #{$card-view-gap};
+  --dx-card-view-header-gap: #{$card-view-header-gap};
+  --dx-card-view-header-item-padding-inline-end: #{$card-view-header-item-padding-inline-end};
+  --dx-card-view-header-item-padding-inline-start: #{$card-view-header-item-padding-inline-start};
+  --dx-card-view-header-item-sort-indicator-border: #{$card-view-header-item-sort-indicator-border};
+  --dx-card-view-header-item-sort-indicator-border-radius: #{$card-view-header-item-sort-indicator-border-radius};
+  --dx-card-view-header-item-sort-indicator-border-width: #{$card-view-header-item-sort-indicator-border-width};
+  --dx-card-view-header-panel-dropzone-bg: #{$card-view-header-panel-dropzone-bg};
+  --dx-card-view-header-panel-dropzone-border: #{$card-view-header-panel-dropzone-border};
+  --dx-card-view-header-panel-dropzone-border-radius: #{$card-view-header-panel-dropzone-border-radius};
+  --dx-card-view-header-panel-dropzone-border-width: #{$card-view-header-panel-dropzone-border-width};
+  --dx-card-view-header-panel-dropzone-content: #{$card-view-header-panel-dropzone-content};
+  --dx-card-view-header-panel-dropzone-height: #{$card-view-header-panel-dropzone-height};
+  --dx-card-view-header-panel-dropzone-icon: #{$card-view-header-panel-dropzone-icon};
+  --dx-card-view-header-panel-dropzone-inset-block-start: #{$card-view-header-panel-dropzone-inset-block-start};
+  --dx-card-view-header-panel-empty-line-height: #{$card-view-header-panel-empty-line-height};
+  --dx-card-view-header-panel-item-bg: #{$card-view-header-panel-item-bg};
+  --dx-card-view-header-panel-item-bg-hovered: #{$card-view-header-panel-item-bg-hovered};
+  --dx-card-view-header-panel-item-border: #{$card-view-header-panel-item-border};
+  --dx-card-view-header-panel-item-border-hovered: #{$card-view-header-panel-item-border-hovered};
+  --dx-card-view-header-panel-item-border-radius: #{$card-view-header-panel-item-border-radius};
+  --dx-card-view-header-panel-item-border-width: #{$card-view-header-panel-item-border-width};
+  --dx-card-view-header-panel-item-content: #{$card-view-header-panel-item-content};
+  --dx-card-view-header-panel-item-content-hovered: #{$card-view-header-panel-item-content-hovered};
+  --dx-card-view-header-panel-item-dragged-allowance-icon: #{$card-view-header-panel-item-dragged-allowance-icon};
+  --dx-card-view-header-panel-item-dragged-bg: #{$card-view-header-panel-item-dragged-bg};
+  --dx-card-view-header-panel-item-dragged-border: #{$card-view-header-panel-item-dragged-border};
+  --dx-card-view-header-panel-item-dragged-content: #{$card-view-header-panel-item-dragged-content};
+  --dx-card-view-header-panel-item-dragged-font-weight: #{$card-view-header-panel-item-dragged-font-weight};
+  --dx-card-view-header-panel-item-dragged-prohibition-icon: #{$card-view-header-panel-item-dragged-prohibition-icon};
+  --dx-card-view-header-panel-item-dragged-shadow: #{$card-view-header-panel-item-dragged-shadow};
+  --dx-card-view-header-panel-item-dragging-bg: #{$card-view-header-panel-item-dragging-bg};
+  --dx-card-view-header-panel-item-dragging-border: #{$card-view-header-panel-item-dragging-border};
+  --dx-card-view-header-panel-item-dragging-content: #{$card-view-header-panel-item-dragging-content};
+  --dx-card-view-header-panel-item-dragging-font-weight: #{$card-view-header-panel-item-dragging-font-weight};
+  --dx-card-view-header-panel-item-dragging-header-filter-icon-selected: #{$card-view-header-panel-item-dragging-header-filter-icon-selected};
+  --dx-card-view-header-panel-item-dragging-icon: #{$card-view-header-panel-item-dragging-icon};
+  --dx-card-view-header-panel-item-dragging-sort-index-content: #{$card-view-header-panel-item-dragging-sort-index-content};
+  --dx-card-view-header-panel-item-dragging-sort-index-font-weight: #{$card-view-header-panel-item-dragging-sort-index-font-weight};
+  --dx-card-view-header-panel-item-font-weight: #{$card-view-header-panel-item-font-weight};
+  --dx-card-view-header-panel-item-font-weight-hovered: #{$card-view-header-panel-item-font-weight-hovered};
+  --dx-card-view-header-panel-item-header-filter-icon-selected: #{$card-view-header-panel-item-header-filter-icon-selected};
+  --dx-card-view-header-panel-item-header-filter-icon-selected-hovered: #{$card-view-header-panel-item-header-filter-icon-selected-hovered};
+  --dx-card-view-header-panel-item-icon: #{$card-view-header-panel-item-icon};
+  --dx-card-view-header-panel-item-icon-hovered: #{$card-view-header-panel-item-icon-hovered};
+  --dx-card-view-header-panel-item-icon-size: #{$card-view-header-panel-item-icon-size};
+  --dx-card-view-header-panel-item-outline-focused: #{$card-view-header-panel-item-outline-focused};
+  --dx-card-view-header-panel-item-padding-block: #{$card-view-header-panel-item-padding-block};
+  --dx-card-view-header-panel-item-padding-inline: #{$card-view-header-panel-item-padding-inline};
+  --dx-card-view-header-panel-item-sort-index-content: #{$card-view-header-panel-item-sort-index-content};
+  --dx-card-view-header-panel-item-sort-index-content-hovered: #{$card-view-header-panel-item-sort-index-content-hovered};
+  --dx-card-view-header-panel-item-sort-index-font-weight: #{$card-view-header-panel-item-sort-index-font-weight};
+  --dx-card-view-header-panel-item-sort-index-font-weight-hovered: #{$card-view-header-panel-item-sort-index-font-weight-hovered};
+  --dx-card-view-header-panel-margin-block: #{$card-view-header-panel-margin-block};
+  --dx-card-view-link-content: #{$card-view-link-content};
+  --dx-card-view-nodata-view-bg: #{$card-view-nodata-view-bg};
+  --dx-card-view-nodata-view-content: #{$card-view-nodata-view-content};
+  --dx-card-view-nodata-view-icon: #{$card-view-nodata-view-icon};
+  --dx-card-view-nodata-view-icon-bg: #{$card-view-nodata-view-icon-bg};
+  --dx-card-view-nodata-view-icon-container-margin: #{$card-view-nodata-view-icon-container-margin};
+  --dx-card-view-nodata-view-icon-container-size: #{$card-view-nodata-view-icon-container-size};
+  --dx-card-view-nodata-view-icon-size: #{$card-view-nodata-view-icon-size};
+  --dx-card-view-padding: #{$card-view-padding};
+  --dx-card-view-text-content: #{$card-view-text-content};
+}
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..be87916a4d7d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/cardView/_sizes.scss
@@ -0,0 +1,341 @@
+@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;
+
+// #region COMMON SETTINGS
+
+$card-view-border-radius: ds.$border-radius-160 !default;
+
+$card-view-font-weight: ds.$font-weight-base-default !default;
+
+$card-view-cards-row-gap: null !default;
+
+$card-view-cards-column-gap: null !default;
+
+$card-view-gap: null !default;
+
+$card-view-padding: null !default;
+
+// #endregion
+
+// #region CARD
+
+$card-view-card-min-width: 250px !default; // dx-offscale: 250px
+
+$card-view-card-border-width: ds.$border-width-10 !default;
+
+$card-view-card-border-radius: null !default;
+
+$card-view-card-header-height: null !default;
+
+$card-view-card-header-font-size: null !default;
+
+$card-view-card-header-selection-checkbox-padding-inline-end: null !default;
+
+$card-view-card-field-caption-font-weight: ds.$font-weight-base-strong !default;
+
+$card-view-card-cover-max-height: null !default;
+
+$card-view-card-cover-noimage-icon-size: null !default;
+
+$card-view-card-content-padding: null !default;
+
+$card-view-card-content-row-gap: null !default;
+
+$card-view-card-content-cell-padding-block: null !default;
+
+$card-view-card-content-cell-padding-inline: null !default;
+
+// #endregion
+
+// #region CARD (SELECTED)
+
+$card-view-card-field-caption-font-weight-selected: var(--dx-card-view-card-field-caption-font-weight) !default;
+
+// #endregion
+
+// #region HEADER
+
+$card-view-header-gap: null !default;
+
+// #endregion
+
+// #region HEADER PANEL
+
+$card-view-header-panel-margin-block: null !default;
+
+$card-view-header-panel-empty-line-height: null !default;
+
+// #endregion
+
+// #region HEADER PANEL ITEM
+
+$card-view-header-panel-item-border-width: ds.$border-width-10 !default;
+
+$card-view-header-panel-item-border-radius: ds.$border-radius-60 !default;
+
+$card-view-header-panel-item-padding-block: null !default;
+
+$card-view-header-panel-item-padding-inline: null !default;
+
+$card-view-header-panel-item-font-weight: var(--dx-card-view-font-weight) !default;
+
+$card-view-header-panel-item-sort-index-font-weight: ds.$font-weight-base-default !default;
+
+$card-view-header-panel-item-icon-size: $global-icon-size !default;
+
+$card-view-header-item-padding-inline-start: null !default;
+$card-view-header-item-padding-inline-end: null !default;
+
+// #endregion
+
+// #region HEADER PANEL ITEM (HOVERED)
+
+$card-view-header-panel-item-font-weight-hovered: var(--dx-card-view-header-panel-item-font-weight) !default;
+
+$card-view-header-panel-item-sort-index-font-weight-hovered: var(--dx-card-view-header-panel-item-sort-index-font-weight) !default;
+
+// #endregion
+
+// #region HEADER PANEL ITEM (DISABLED)
+
+$card-view-header-panel-item-dragging-font-weight: var(--dx-card-view-header-panel-item-font-weight) !default;
+
+$card-view-header-panel-item-dragging-sort-index-font-weight: var(--dx-card-view-header-panel-item-sort-index-font-weight) !default;
+
+// #endregion
+
+// #region HEADER PANEL ITEM (ON DRAG)
+
+$card-view-header-panel-item-dragged-font-weight: var(--dx-card-view-header-panel-item-font-weight) !default;
+
+$card-view-header-item-sort-indicator-border-width: null;
+$card-view-header-item-sort-indicator-border-radius: null;
+
+// #endregion
+
+// #region HEADER PANEL DROP ZONE
+
+$card-view-header-panel-dropzone-height: null !default;
+
+$card-view-header-panel-dropzone-inset-block-start: null !default;
+
+$card-view-header-panel-dropzone-border-width: 1.5px !default; // dx-offscale: 1.5px
+
+$card-view-header-panel-dropzone-border-radius: null !default;
+
+// #endregion
+
+// #region FILTER PANEL
+
+$card-view-filter-panel-border-radius: 0 !default;
+
+// #endregion
+
+// #region NO DATA VIEW
+
+$card-view-nodata-view-icon-container-size: null !default;
+
+$card-view-nodata-view-icon-container-margin: null !default;
+
+$card-view-nodata-view-icon-size: null !default;
+
+// #endregion
+
+// #region HIGHLIGHTS IN SEARCH
+
+$card-view-card-content-field-value-highlighted-border-radius: ds.$border-radius-50 !default;
+
+$card-view-card-content-field-value-highlighted-padding: .125em 0.2em !default; // dx-relative: proportional to card font-size, no em scale in package
+
+$card-view-card-content-field-value-highlighted-font-weight: ds.$font-weight-base-strong !default;
+
+// #endregion
+
+// #region COLUMN CHOOSER
+
+$card-view-column-chooser-empty-message-horizontal-padding: null !default;
+
+$card-view-column-chooser-select-all-item-horizontal-padding: null !default;
+
+// #endregion
+
+@if $size == "default" {
+
+  // Common
+  $card-view-cards-row-gap: ds.$spacing-160 !default;
+  $card-view-cards-column-gap: ds.$spacing-160 !default;
+  $card-view-gap: ds.$spacing-240 !default;
+  $card-view-padding: ds.$spacing-240 !default;
+
+  // Card
+  $card-view-card-border-radius: ds.$border-radius-80 !default;
+  $card-view-card-header-height: ds.$spacing-480 !default;
+  $card-view-card-header-font-size: ds.$font-size-160 !default;
+  $card-view-card-header-selection-checkbox-padding-inline-end: ds.$spacing-120 !default;
+  $card-view-card-cover-max-height: 180px !default; // dx-offscale: 180px
+  $card-view-card-cover-noimage-icon-size: ds.$spacing-480 !default;
+  $card-view-card-content-padding: ds.$spacing-120 !default;
+  $card-view-card-content-row-gap: ds.$spacing-80 !default;
+  $card-view-card-content-cell-padding-block: ds.$spacing-60 !default;
+  $card-view-card-content-cell-padding-inline: ds.$spacing-120 !default;
+
+  // Header
+  $card-view-header-gap: 0 !default;
+
+  // Header panel
+  $card-view-header-panel-margin-block: ds.$spacing-80 !default;
+  $card-view-header-panel-empty-line-height: ds.$line-height-title-lg !default;
+
+  // Header panel item - default
+  $card-view-header-panel-item-padding-inline: ds.$spacing-80 !default;
+  $card-view-header-panel-item-padding-block: ds.$spacing-50 !default;
+  $card-view-header-item-padding-inline-start: ds.$spacing-60 !default;
+  $card-view-header-item-padding-inline-end: ds.$spacing-20 !default;
+
+  // Header panel item - dragged
+  $card-view-header-item-sort-indicator-border-width: ds.$border-width-20 !default;
+  $card-view-header-item-sort-indicator-border-radius: ds.$border-radius-80 !default;
+
+  // Header panel Drop-zone
+  $card-view-header-panel-dropzone-height: ds.$spacing-440 !default;
+  $card-view-header-panel-dropzone-inset-block-start: ds.$spacing-minus-60  !default;
+  $card-view-header-panel-dropzone-border-radius: ds.$border-radius-80 !default;
+
+  // Empty view
+  $card-view-nodata-view-icon-container-size: ds.$spacing-640 !default;
+  $card-view-nodata-view-icon-container-margin: ds.$spacing-120 !default;
+  $card-view-nodata-view-icon-size: ds.$spacing-400 !default;
+
+  // Column chooser
+  $card-view-column-chooser-empty-message-horizontal-padding: ds.$spacing-240 !default;
+  $card-view-column-chooser-select-all-item-horizontal-padding: ds.$spacing-140 !default;
+}
+@else if $size == "compact" {
+
+  // Common
+  $card-view-cards-row-gap: ds.$spacing-120 !default;
+  $card-view-cards-column-gap: ds.$spacing-120 !default;
+  $card-view-gap: ds.$spacing-160 !default;
+  $card-view-padding: ds.$spacing-160 !default;
+
+  // Card
+  $card-view-card-border-radius: ds.$border-radius-60 !default;
+  $card-view-card-header-height: ds.$spacing-360 !default;
+  $card-view-card-header-font-size: ds.$font-size-140 !default;
+  $card-view-card-header-selection-checkbox-padding-inline-end: ds.$spacing-80 !default;
+  $card-view-card-cover-max-height: 140px !default; // dx-offscale: 140px
+  $card-view-card-cover-noimage-icon-size: ds.$spacing-320 !default;
+  $card-view-card-content-padding: ds.$spacing-80 !default;
+  $card-view-card-content-row-gap: ds.$spacing-40 !default;
+  $card-view-card-content-cell-padding-block: ds.$spacing-40 !default;
+  $card-view-card-content-cell-padding-inline: ds.$spacing-80 !default;
+
+  // Header
+  $card-view-header-gap: ds.$spacing-40 !default;
+
+  // Header panel
+  $card-view-header-panel-margin-block: ds.$spacing-40 !default;
+  $card-view-header-panel-empty-line-height: ds.$line-height-title-sm !default;
+
+  // Header panel item - default
+  $card-view-header-panel-item-padding-inline: ds.$spacing-60 !default;
+  $card-view-header-panel-item-padding-block: ds.$spacing-30 !default;
+  $card-view-header-item-padding-inline-start: ds.$spacing-30 !default;
+  $card-view-header-item-padding-inline-end: ds.$spacing-10 !default;
+
+  // Header panel item - dragged
+  $card-view-header-item-sort-indicator-border-width: ds.$border-width-10 !default;
+  $card-view-header-item-sort-indicator-border-radius: ds.$border-radius-40 !default;
+
+  // Header panel Drop-zone
+  $card-view-header-panel-dropzone-height: ds.$spacing-320 !default;
+  $card-view-header-panel-dropzone-inset-block-start: ds.$spacing-minus-40  !default;
+  $card-view-header-panel-dropzone-border-radius: ds.$border-radius-60 !default;
+
+  // Empty view
+  $card-view-nodata-view-icon-container-size: ds.$spacing-480 !default;
+  $card-view-nodata-view-icon-container-margin: ds.$spacing-80 !default;
+  $card-view-nodata-view-icon-size: ds.$spacing-320 !default;
+
+  // Column chooser
+  $card-view-column-chooser-empty-message-horizontal-padding: ds.$spacing-160 !default;
+  $card-view-column-chooser-select-all-item-horizontal-padding: ds.$spacing-120 !default;
+}
+
+$cardview-border-radius: var(--dx-card-view-border-radius) !default;
+$cardview-text-weight: var(--dx-card-view-font-weight) !default;
+$cardview-cards-row-gap: var(--dx-card-view-cards-row-gap) !default;
+$cardview-cards-column-gap: var(--dx-card-view-cards-column-gap) !default;
+$cardview-gap: var(--dx-card-view-gap) !default;
+$cardview-padding: var(--dx-card-view-padding) !default;
+
+$cardview-card-min-width: var(--dx-card-view-card-min-width) !default;
+$cardview-card-border-width: var(--dx-card-view-card-border-width) !default;
+$cardview-card-border-radius: var(--dx-card-view-card-border-radius) !default;
+$cardview-card__header-height: var(--dx-card-view-card-header-height) !default;
+$cardview-card__header-text-size: var(--dx-card-view-card-header-font-size) !default;
+$cardview-card__header__selection-checkbox-padding-right: var(--dx-card-view-card-header-selection-checkbox-padding-inline-end) !default;
+$cardview-card__field-caption-weight: var(--dx-card-view-card-field-caption-font-weight) !default;
+$cardview-card__cover-max-height: var(--dx-card-view-card-cover-max-height) !default;
+$cardview-card__cover--noimage__icon-size: var(--dx-card-view-card-cover-noimage-icon-size) !default;
+$cardview-card__content-padding: var(--dx-card-view-card-content-padding) !default;
+$cardview-card__content-row-gap: var(--dx-card-view-card-content-row-gap) !default;
+$cardview-card__content__cell-padding-vertical: var(--dx-card-view-card-content-cell-padding-block) !default;
+$cardview-card__content__cell-padding-horizontal: var(--dx-card-view-card-content-cell-padding-inline) !default;
+
+$cardview-card--selected__field-caption-weight: var(--dx-card-view-card-field-caption-font-weight-selected) !default;
+
+$cardview-header-gap: var(--dx-card-view-header-gap) !default;
+
+$cardview-header-panel-vertical-margin: var(--dx-card-view-header-panel-margin-block) !default;
+$cardview-header-panel--empty-line-height: var(--dx-card-view-header-panel-empty-line-height) !default;
+
+$cardview-header-panel__item-border-width: var(--dx-card-view-header-panel-item-border-width) !default;
+$cardview-header-panel__item-border-radius: var(--dx-card-view-header-panel-item-border-radius) !default;
+$cardview-header-panel__item-padding-horizontal: var(--dx-card-view-header-panel-item-padding-inline) !default;
+$cardview-header-panel__item-padding-vertical: var(--dx-card-view-header-panel-item-padding-block) !default;
+$cardview-header-panel__item-text-weight: var(--dx-card-view-header-panel-item-font-weight) !default;
+$cardview-header-panel__item__sort-index-text-weight: var(--dx-card-view-header-panel-item-sort-index-font-weight) !default;
+$cardview-header-panel__item__icon-size: var(--dx-card-view-header-panel-item-icon-size) !default;
+
+$cardview-header-panel__item--hovered-text-weight: var(--dx-card-view-header-panel-item-font-weight-hovered) !default;
+$cardview-header-panel__item--hovered__sort-index-text-weight: var(--dx-card-view-header-panel-item-sort-index-font-weight-hovered) !default;
+
+$cardview-header-panel__item--disabled-text-weight: var(--dx-card-view-header-panel-item-dragging-font-weight) !default;
+$cardview-header-panel__item--disabled__sort-index-text-weight: var(--dx-card-view-header-panel-item-dragging-sort-index-font-weight) !default;
+
+$cardview-header-panel__item--dragged-text-weight: var(--dx-card-view-header-panel-item-dragged-font-weight) !default;
+
+$cardview-header-panel__dropzone-height: var(--dx-card-view-header-panel-dropzone-height) !default;
+$cardview-header-panel__dropzone-top: var(--dx-card-view-header-panel-dropzone-inset-block-start) !default;
+$cardview-header-panel__dropzone-border-width: var(--dx-card-view-header-panel-dropzone-border-width) !default;
+$cardview-header-panel__dropzone-border-radius: var(--dx-card-view-header-panel-dropzone-border-radius) !default;
+
+$cardview-filter-panel-border-radius: var(--dx-card-view-filter-panel-border-radius) !default;
+
+$cardview-nodata-view__icon-container-size: var(--dx-card-view-nodata-view-icon-container-size) !default;
+$cardview-nodata-view__icon-container-margin: var(--dx-card-view-nodata-view-icon-container-margin) !default;
+$cardview-nodata-view__icon-size: var(--dx-card-view-nodata-view-icon-size) !default;
+
+$cardview-card__content__field-value--highlighted-border-radius: var(--dx-card-view-card-content-field-value-highlighted-border-radius) !default;
+$cardview-card__content__field-value--highlighted-border-padding: var(--dx-card-view-card-content-field-value-highlighted-padding) !default;
+$cardview-card__content__field-value--highlighted-text-weight: var(--dx-card-view-card-content-field-value-highlighted-font-weight) !default;
+
+$cardview-column-chooser--empty__message-horizontal-padding: var(--dx-card-view-column-chooser-empty-message-horizontal-padding) !default;
+$cardview-column-chooser__select-all-item-horizontal-padding: var(--dx-card-view-column-chooser-select-all-item-horizontal-padding) !default;
+
+$cardview-header-item__left-padding: var(--dx-card-view-header-item-padding-inline-start) !default;
+$cardview-header-item__right-padding: var(--dx-card-view-header-item-padding-inline-end) !default;
+$cardview-header-item__sort-indicator__border-size: var(--dx-card-view-header-item-sort-indicator-border-width) !default;
+$cardview-header-item__sort-indicator__border-radius: var(--dx-card-view-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..0da5aaa57b34
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/chat/_colors.scss
@@ -0,0 +1,61 @@
+@use "../textEditor/colors" as textEditorColors;
+@use "../button/colors" as buttonColors;
+@use "../../../_design-system/variables/ds" as ds;
+
+$chat-bg: ds.$color-bg !default;
+
+$chat-border: ds.$color-border !default;
+$chat-message-box-file-bg: buttonColors.$button-normal-contained-bg-hovered !default;
+$chat-message-box-file-cancel-button-bg-hovered: ds.$color-bg-alpha-selected !default;
+$chat-message-editing-preview-accent-content: ds.$color-content-primary !default;
+$chat-message-editing-preview-cancel-button-content: textEditorColors.$text-editor-placeholder !default;
+
+$chat-avatar-content: ds.$color-content !default;
+
+$chat-avatar-bg: ds.$color-bg-active !default;
+
+$chat-bubble-primary-content: ds.$color-content !default;
+
+$chat-bubble-primary-bg: ds.$color-bg-primary-subtler !default;
+
+$chat-bubble-secondary-content: ds.$color-content !default;
+
+$chat-bubble-secondary-bg: ds.$color-bg-high !default;
+
+$chat-information-author-name-content: ds.$color-content-subtle !default;
+
+$chat-information-timestamp-content: ds.$color-content-subtle !default;
+
+$chat-message-list-day-header-content: ds.$color-content-subtle !default;
+
+$chat-alert-list-content: ds.$color-content-danger !default;
+
+$chat-message-list-empty-icon: ds.$color-content-subtle !default;
+
+$chat-message-list-empty-icon-bg: ds.$color-bg-canvas !default;
+
+$chat-message-list-empty-message-content: ds.$color-content !default;
+
+$chat-message-list-empty-prompt-content: ds.$color-content-subtle !default;
+
+$chat-typing-indicator-content: ds.$color-content-subtle !default;
+
+$chat-typing-indicator-circle-center-bg: ds.$color-content-subtle !default;
+
+$chat-typing-indicator-circle-bg: ds.$color-content-disabled !default;
+
+$chat-message-box-border-disabled: ds.$color-border-disabled !default;
+
+$chat-file-container-bg: ds.$color-bg !default;
+$chat-file-container-box-shadow: ds.$box-shadow-sm !default;
+$chat-file-secondary-content: ds.$color-content-subtle !default;
+
+$chat-file-content-disabled: ds.$color-content-disabled !default;
+$chat-content-disabled: ds.$color-content-disabled !default;
+$chat-information-content-disabled: ds.$color-content-disabled !default;
+
+$chat-suggestions-box-shadow: ds.$box-shadow-md !default;
+
+$chat-message-list-context-menu-delete-button-content: ds.$color-content-danger !default;
+$chat-message-list-context-menu-delete-button-content-focused: ds.$color-content-danger !default;
+$chat-message-list-context-menu-delete-button-bg-focused: ds.$color-bg-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..cb71df3762ee
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/chat/_index.scss
@@ -0,0 +1,186 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/chat" with (
+  $chat-disabled-opacity: false,
+  $chat-file-name-font-weight: var(--dx-chat-file-name-font-weight),
+  $chat-editing-preview-caption-font-weight: var(--dx-chat-editing-preview-caption-font-weight),
+  $chat-messagebox-border-block-start-width: var(--dx-chat-message-box-border-block-start-width),
+  $chat-messagebubble-padding-image: var(--dx-chat-bubble-image-padding),
+  $chat-messagebubble-border-radius-image: var(--dx-chat-bubble-image-border-radius),
+  $chat-messagebubble-max-width-image: var(--dx-chat-bubble-image-max-width),
+  $chat-messagebubble-max-height-image: var(--dx-chat-bubble-image-max-height),
+);
+@use "../../base/chat/mixins" as *;
+@use "../common/mixins" as *;
+@include chat(
+  var(--dx-chat-bg),
+  var(--dx-chat-border),
+  var(--dx-chat-border-radius),
+  $border-width: var(--dx-chat-border-width),
+);
+@include chat-avatar(
+  var(--dx-chat-avatar-size),
+  var(--dx-chat-avatar-content),
+  var(--dx-chat-avatar-bg),
+);
+@include chat-file(
+  var(--dx-chat-file-container-width),
+  var(--dx-chat-file-container-padding),
+  var(--dx-chat-file-container-bg),
+  var(--dx-chat-file-container-border-radius),
+  var(--dx-chat-file-container-box-shadow),
+  var(--dx-chat-file-button-size),
+  var(--dx-chat-file-secondary-font-size),
+  var(--dx-chat-file-secondary-content),
+  var(--dx-chat-file-base-section-gap),
+  var(--dx-chat-file-size-max-width),
+  var(--dx-chat-file-icon-font-size),
+);
+@include chat-fileview(
+  var(--dx-chat-file-view-items-gap),
+  var(--dx-chat-file-container-width),
+);
+@include chat-alertlist(
+  var(--dx-chat-alert-list-content),
+  var(--dx-chat-alerts-padding-block),
+  var(--dx-chat-alerts-padding-inline),
+  var(--dx-chat-alert-padding-block),
+  var(--dx-chat-alerts-row-gap),
+);
+@include chat-messagebox(
+  var(--dx-chat-message-box-padding),
+  var(--dx-chat-message-box-border),
+  var(--dx-chat-message-box-gap),
+  var(--dx-chat-message-box-textarea-border-radius),
+  var(--dx-chat-message-box-textarea-padding),
+  var(--dx-chat-message-box-toolbar-min-height),
+  var(--dx-chat-file-container-width),
+  var(--dx-chat-message-box-files-container-padding),
+  var(--dx-chat-message-box-files-container-padding-block-start),
+  var(--dx-chat-message-box-file-bg),
+  var(--dx-chat-message-box-file-cancel-button-bg-hovered),
+  var(--dx-chat-file-container-box-shadow),
+);
+@include chat-messagebubble(
+  var(--dx-chat-bubble-padding),
+  var(--dx-chat-bubble-border-radius),
+  var(--dx-chat-bubble-secondary-content),
+  var(--dx-chat-bubble-secondary-bg),
+  var(--dx-chat-bubble-primary-content),
+  var(--dx-chat-bubble-primary-bg),
+  var(--dx-chat-bubble-container-gap),
+  var(--dx-chat-bubble-delete-gap),
+  var(--dx-chat-bubble-delete-icon-size),
+  var(--dx-chat-bubble-gap),
+);
+@include chat-messagegroup(
+  var(--dx-chat-message-group-gap),
+  var(--dx-chat-message-group-start-grid-template-columns),
+  var(--dx-chat-message-group-alignment-start-gap),
+  var(--dx-chat-message-group-padding),
+  var(--dx-chat-information-font-size),
+  var(--dx-chat-information-author-name-content),
+  var(--dx-chat-information-timestamp-content),
+  var(--dx-chat-information-gap),
+  var(--dx-chat-information-icon-size),
+  var(--dx-chat-information-edited-gap),
+);
+@include chat-messagelist-empty(
+  var(--dx-chat-message-list-padding),
+  var(--dx-chat-message-list-empty-icon-box-size),
+  var(--dx-chat-message-list-empty-icon-size),
+  var(--dx-chat-message-list-empty-icon-margin-block-end),
+  var(--dx-chat-message-list-empty-row-gap),
+  var(--dx-chat-message-list-empty-icon),
+  var(--dx-chat-message-list-empty-icon-bg),
+  var(--dx-chat-message-list-empty-message-font-size),
+  var(--dx-chat-message-list-empty-message-content),
+  var(--dx-chat-message-list-empty-prompt-font-size),
+  var(--dx-chat-message-list-empty-prompt-content),
+);
+@include chat-messagelist(
+  var(--dx-chat-message-list-padding),
+  var(--dx-chat-message-list-day-header-content),
+  var(--dx-chat-message-list-day-header-padding-block-end),
+  var(--dx-chat-message-list-day-header-first-padding-block-start),
+  var(--dx-chat-message-list-day-header-font-size),
+);
+@include chat-messagelist-contextmenu(
+  var(--dx-chat-message-list-context-menu-delete-button-content),
+  var(--dx-chat-message-list-context-menu-delete-button-content-focused),
+  var(--dx-chat-message-list-context-menu-delete-button-bg-focused),
+);
+@include chat-typingindicator(
+  var(--dx-chat-typing-indicator-grid-template-columns),
+  var(--dx-chat-typing-indicator-padding),
+  var(--dx-chat-typing-indicator-row-gap),
+  var(--dx-chat-typing-indicator-font-size),
+  var(--dx-chat-typing-indicator-content),
+  var(--dx-chat-typing-indicator-bubble-padding-block),
+  var(--dx-chat-typing-indicator-bubble-padding-inline),
+  var(--dx-chat-typing-indicator-bubble-border-radius),
+  var(--dx-chat-typing-indicator-bubble-bg),
+  var(--dx-chat-typing-indicator-bubble-column-gap),
+  var(--dx-chat-typing-indicator-circle-size),
+  var(--dx-chat-typing-indicator-circle-center-size),
+  var(--dx-chat-typing-indicator-circle-border-radius),
+  var(--dx-chat-typing-indicator-circle-bg),
+  var(--dx-chat-typing-indicator-circle-center-bg),
+);
+@include message-editing-preview(
+  var(--dx-chat-message-editing-preview-content-padding-inline),
+  var(--dx-chat-message-editing-preview-content-row-gap),
+  var(--dx-chat-message-editing-preview-accent-content),
+  var(--dx-chat-message-editing-preview-caption-font-size),
+  var(--dx-chat-message-box-padding),
+  var(--dx-chat-message-editing-preview-accent-width),
+  var(--dx-chat-message-editing-preview-cancel-button-content),
+);
+@include chat-confirmation-popup(
+  var(--dx-chat-border-radius),
+  var(--dx-chat-confirmation-popup-content-padding),
+  0 var(--dx-chat-confirmation-popup-toolbar-padding-block),
+  var(--dx-chat-confirmation-popup-toolbar-padding-inline),
+  var(--dx-chat-confirmation-popup-toolbar-gap),
+);
+@include chat-suggestions(
+  var(--dx-chat-suggestions-padding),
+  var(--dx-chat-suggestions-button-border-radius),
+  var(--dx-chat-suggestions-border-width),
+  var(--dx-chat-suggestions-button-max-width),
+  var(--dx-chat-suggestions-gap),
+  var(--dx-chat-suggestions-box-shadow),
+);
+
+.dx-chat-file {
+  @include dx-base-typography();
+}
+
+.dx-chat.dx-state-disabled {
+  .dx-chat-messagebox {
+    border-top-color: var(--dx-chat-message-box-border-disabled);
+  }
+}
+
+.dx-chat.dx-state-disabled,
+.dx-state-disabled .dx-chat {
+  .dx-chat-file,
+  .dx-chat-file .dx-icon,
+  .dx-chat-file-size {
+    color: var(--dx-chat-file-content-disabled);
+  }
+
+  .dx-chat-messagebubble {
+    color: var(--dx-chat-content-disabled);
+  }
+
+  .dx-chat-messagelist-day-header,
+  .dx-chat-messagegroup-author-name,
+  .dx-chat-messagegroup-time,
+  .dx-chat-message-edited,
+  .dx-chat-messagelist-empty-message,
+  .dx-chat-messagelist-empty-prompt,
+  .dx-chat-messagelist-empty-image {
+    color: var(--dx-chat-information-content-disabled);
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/chat/_public-links.scss b/packages/devextreme-scss/scss/widgets/fluent-next/chat/_public-links.scss
new file mode 100644
index 000000000000..3765b19807c9
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/chat/_public-links.scss
@@ -0,0 +1,10 @@
+@mixin publish {
+  --dx-chat-message-box-border: var(--dx-chat-border);
+  --dx-chat-message-editing-preview-caption-font-size: var(--dx-typography-xs-font-size);
+  --dx-chat-typing-indicator-bubble-bg: var(--dx-chat-bubble-secondary-bg);
+  --dx-chat-typing-indicator-bubble-border-radius: var(--dx-chat-bubble-border-radius);
+  --dx-chat-typing-indicator-font-size: var(--dx-chat-information-font-size);
+  --dx-chat-typing-indicator-grid-template-columns: var(--dx-chat-message-group-start-grid-template-columns);
+  --dx-chat-typing-indicator-padding: var(--dx-chat-message-group-padding);
+  --dx-chat-typing-indicator-row-gap: var(--dx-chat-message-group-gap);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/chat/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/chat/_public.scss
new file mode 100644
index 000000000000..3248109ea874
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/chat/_public.scss
@@ -0,0 +1,115 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+@use "public-links" as links;
+
+@mixin publish {
+  --dx-chat-alert-list-content: #{$chat-alert-list-content};
+  --dx-chat-alert-padding-block: #{$chat-alert-padding-block};
+  --dx-chat-alerts-padding-block: #{$chat-alerts-padding-block};
+  --dx-chat-alerts-padding-inline: #{$chat-alerts-padding-inline};
+  --dx-chat-alerts-row-gap: #{$chat-alerts-row-gap};
+  --dx-chat-avatar-bg: #{$chat-avatar-bg};
+  --dx-chat-avatar-content: #{$chat-avatar-content};
+  --dx-chat-avatar-size: #{$chat-avatar-size};
+  --dx-chat-bg: #{$chat-bg};
+  --dx-chat-border: #{$chat-border};
+  --dx-chat-border-radius: #{$chat-border-radius};
+  --dx-chat-border-width: #{$chat-border-width};
+  --dx-chat-bubble-border-radius: #{$chat-bubble-border-radius};
+  --dx-chat-bubble-container-gap: #{$chat-bubble-container-gap};
+  --dx-chat-bubble-delete-gap: #{$chat-bubble-delete-gap};
+  --dx-chat-bubble-delete-icon-size: #{$chat-bubble-delete-icon-size};
+  --dx-chat-bubble-gap: #{$chat-bubble-gap};
+  --dx-chat-bubble-image-border-radius: #{$chat-bubble-image-border-radius};
+  --dx-chat-bubble-image-max-height: #{$chat-bubble-image-max-height};
+  --dx-chat-bubble-image-max-width: #{$chat-bubble-image-max-width};
+  --dx-chat-bubble-image-padding: #{$chat-bubble-image-padding};
+  --dx-chat-bubble-padding: #{$chat-bubble-padding};
+  --dx-chat-bubble-primary-bg: #{$chat-bubble-primary-bg};
+  --dx-chat-bubble-primary-content: #{$chat-bubble-primary-content};
+  --dx-chat-bubble-secondary-bg: #{$chat-bubble-secondary-bg};
+  --dx-chat-bubble-secondary-content: #{$chat-bubble-secondary-content};
+  --dx-chat-confirmation-popup-content-padding: #{$chat-confirmation-popup-content-padding};
+  --dx-chat-confirmation-popup-toolbar-gap: #{$chat-confirmation-popup-toolbar-gap};
+  --dx-chat-confirmation-popup-toolbar-padding-block: #{$chat-confirmation-popup-toolbar-padding-block};
+  --dx-chat-confirmation-popup-toolbar-padding-inline: #{$chat-confirmation-popup-toolbar-padding-inline};
+  --dx-chat-content-disabled: #{$chat-content-disabled};
+  --dx-chat-editing-preview-caption-font-weight: #{$chat-editing-preview-caption-font-weight};
+  --dx-chat-file-base-section-gap: #{$chat-file-base-section-gap};
+  --dx-chat-file-button-size: #{$chat-file-button-size};
+  --dx-chat-file-container-bg: #{$chat-file-container-bg};
+  --dx-chat-file-container-border-radius: #{$chat-file-container-border-radius};
+  --dx-chat-file-container-box-shadow: #{$chat-file-container-box-shadow};
+  --dx-chat-file-container-padding: #{$chat-file-container-padding};
+  --dx-chat-file-container-width: #{$chat-file-container-width};
+  --dx-chat-file-content-disabled: #{$chat-file-content-disabled};
+  --dx-chat-file-icon-font-size: #{$chat-file-icon-font-size};
+  --dx-chat-file-name-font-weight: #{$chat-file-name-font-weight};
+  --dx-chat-file-secondary-content: #{$chat-file-secondary-content};
+  --dx-chat-file-secondary-font-size: #{$chat-file-secondary-font-size};
+  --dx-chat-file-size-max-width: #{$chat-file-size-max-width};
+  --dx-chat-file-view-items-gap: #{$chat-file-view-items-gap};
+  --dx-chat-information-author-name-content: #{$chat-information-author-name-content};
+  --dx-chat-information-content-disabled: #{$chat-information-content-disabled};
+  --dx-chat-information-edited-gap: #{$chat-information-edited-gap};
+  --dx-chat-information-font-size: #{$chat-information-font-size};
+  --dx-chat-information-gap: #{$chat-information-gap};
+  --dx-chat-information-icon-size: #{$chat-information-icon-size};
+  --dx-chat-information-timestamp-content: #{$chat-information-timestamp-content};
+  --dx-chat-message-box-border-block-start-width: #{$chat-message-box-border-block-start-width};
+  --dx-chat-message-box-border-disabled: #{$chat-message-box-border-disabled};
+  --dx-chat-message-box-file-bg: #{$chat-message-box-file-bg};
+  --dx-chat-message-box-file-cancel-button-bg-hovered: #{$chat-message-box-file-cancel-button-bg-hovered};
+  --dx-chat-message-box-files-container-padding: #{$chat-message-box-files-container-padding};
+  --dx-chat-message-box-files-container-padding-block-start: #{$chat-message-box-files-container-padding-block-start};
+  --dx-chat-message-box-gap: #{$chat-message-box-gap};
+  --dx-chat-message-box-padding: #{$chat-message-box-padding};
+  --dx-chat-message-box-textarea-border-radius: #{$chat-message-box-textarea-border-radius};
+  --dx-chat-message-box-textarea-padding: #{$chat-message-box-textarea-padding};
+  --dx-chat-message-box-toolbar-min-height: #{$chat-message-box-toolbar-min-height};
+  --dx-chat-message-editing-preview-accent-content: #{$chat-message-editing-preview-accent-content};
+  --dx-chat-message-editing-preview-accent-width: #{$chat-message-editing-preview-accent-width};
+  --dx-chat-message-editing-preview-cancel-button-content: #{$chat-message-editing-preview-cancel-button-content};
+  --dx-chat-message-editing-preview-content-padding-inline: #{$chat-message-editing-preview-content-padding-inline};
+  --dx-chat-message-editing-preview-content-row-gap: #{$chat-message-editing-preview-content-row-gap};
+  --dx-chat-message-group-alignment-start-gap: #{$chat-message-group-alignment-start-gap};
+  --dx-chat-message-group-gap: #{$chat-message-group-gap};
+  --dx-chat-message-group-padding: #{$chat-message-group-padding};
+  --dx-chat-message-group-start-grid-template-columns: #{$chat-message-group-start-grid-template-columns};
+  --dx-chat-message-list-context-menu-delete-button-bg-focused: #{$chat-message-list-context-menu-delete-button-bg-focused};
+  --dx-chat-message-list-context-menu-delete-button-content: #{$chat-message-list-context-menu-delete-button-content};
+  --dx-chat-message-list-context-menu-delete-button-content-focused: #{$chat-message-list-context-menu-delete-button-content-focused};
+  --dx-chat-message-list-day-header-content: #{$chat-message-list-day-header-content};
+  --dx-chat-message-list-day-header-first-padding-block-start: #{$chat-message-list-day-header-first-padding-block-start};
+  --dx-chat-message-list-day-header-font-size: #{$chat-message-list-day-header-font-size};
+  --dx-chat-message-list-day-header-padding-block-end: #{$chat-message-list-day-header-padding-block-end};
+  --dx-chat-message-list-empty-icon: #{$chat-message-list-empty-icon};
+  --dx-chat-message-list-empty-icon-bg: #{$chat-message-list-empty-icon-bg};
+  --dx-chat-message-list-empty-icon-box-size: #{$chat-message-list-empty-icon-box-size};
+  --dx-chat-message-list-empty-icon-margin-block-end: #{$chat-message-list-empty-icon-margin-block-end};
+  --dx-chat-message-list-empty-icon-size: #{$chat-message-list-empty-icon-size};
+  --dx-chat-message-list-empty-message-content: #{$chat-message-list-empty-message-content};
+  --dx-chat-message-list-empty-message-font-size: #{$chat-message-list-empty-message-font-size};
+  --dx-chat-message-list-empty-prompt-content: #{$chat-message-list-empty-prompt-content};
+  --dx-chat-message-list-empty-prompt-font-size: #{$chat-message-list-empty-prompt-font-size};
+  --dx-chat-message-list-empty-row-gap: #{$chat-message-list-empty-row-gap};
+  --dx-chat-message-list-padding: #{$chat-message-list-padding};
+  --dx-chat-suggestions-border-width: #{$chat-suggestions-border-width};
+  --dx-chat-suggestions-box-shadow: #{$chat-suggestions-box-shadow};
+  --dx-chat-suggestions-button-border-radius: #{$chat-suggestions-button-border-radius};
+  --dx-chat-suggestions-button-max-width: #{$chat-suggestions-button-max-width};
+  --dx-chat-suggestions-gap: #{$chat-suggestions-gap};
+  --dx-chat-suggestions-padding: #{$chat-suggestions-padding};
+  --dx-chat-typing-indicator-bubble-column-gap: #{$chat-typing-indicator-bubble-column-gap};
+  --dx-chat-typing-indicator-bubble-padding-block: #{$chat-typing-indicator-bubble-padding-block};
+  --dx-chat-typing-indicator-bubble-padding-inline: #{$chat-typing-indicator-bubble-padding-inline};
+  --dx-chat-typing-indicator-circle-bg: #{$chat-typing-indicator-circle-bg};
+  --dx-chat-typing-indicator-circle-border-radius: #{$chat-typing-indicator-circle-border-radius};
+  --dx-chat-typing-indicator-circle-center-bg: #{$chat-typing-indicator-circle-center-bg};
+  --dx-chat-typing-indicator-circle-center-size: #{$chat-typing-indicator-circle-center-size};
+  --dx-chat-typing-indicator-circle-size: #{$chat-typing-indicator-circle-size};
+  --dx-chat-typing-indicator-content: #{$chat-typing-indicator-content};
+
+  @include links.publish();
+}
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..cec273c839a5
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/chat/_sizes.scss
@@ -0,0 +1,163 @@
+@use "sass:math";
+@use "../sizes" as *;
+@use "../popup/sizes" as popupSizes;
+@use "../../../_design-system/variables/ds" as ds;
+@use "../button/sizes" as buttonSizes;
+
+$chat-border-radius: ds.$border-radius-120 !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: ds.$border-radius-80 !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: ds.$spacing-20 !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-content-row-gap: null !default;
+$chat-message-editing-preview-content-padding-inline: null !default;
+$chat-message-editing-preview-accent-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-bubble-padding-block: null !default;
+$chat-typing-indicator-bubble-padding-inline: 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: ds.$border-radius-120 !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-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-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-confirmation-popup-toolbar-gap: ds.$spacing-80 !default;
+
+  $chat-file-icon-font-size: ds.$spacing-200 !default;
+}
+
+@else if $size == "compact" {
+  $chat-bubble-border-radius: ds.$border-radius-80 !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-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-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-confirmation-popup-toolbar-gap: ds.$spacing-40 !default;
+
+  $chat-file-icon-font-size: ds.$spacing-160 !default;
+}
+
+// Base-layer sizing injected with design tokens (wave B3)
+$chat-bubble-image-padding: ds.$spacing-40 !default;
+$chat-bubble-image-border-radius: ds.$border-radius-80 !default;
+$chat-bubble-image-max-width: 400px !default; // dx-offscale: 400px, the spacing scale stops at 160px
+$chat-bubble-image-max-height: 400px !default; // dx-offscale: 400px, the spacing scale stops at 160px
+
+// 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-caption-strong !default;
+
+// Base-layer sizing injected with design tokens (wave B12)
+$chat-border-width: ds.$border-width-10 !default;
+$chat-message-box-border-block-start-width: ds.$border-width-10 !default;
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..7a83353a13cf
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/checkBox/_colors.scss
@@ -0,0 +1,39 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$check-box-border: ds.$color-border-contrast !default;
+$check-box-border-hovered: ds.$color-border-contrast-hovered !default;
+$check-box-border-active: ds.$color-border-contrast-active !default;
+
+$check-box-icon-bg: ds.$color-content-inverted !default;
+$check-box-mark-content: ds.$color-content-inverted !default;
+
+$check-box-icon-checked-bg: ds.$color-bg-primary-shared !default;
+$check-box-icon-checked-bg-hovered: ds.$color-bg-primary-shared-hovered !default;
+
+$check-box-icon-checked-bg-focused: ds.$color-bg-primary-shared-hovered !default;
+$check-box-icon-checked-bg-active: ds.$color-bg-primary-shared-active !default;
+
+$check-box-icon-checked-border: ds.$color-border-primary-shared !default;
+$check-box-icon-checked-border-hovered: ds.$color-border-primary-shared-hovered !default;
+$check-box-icon-checked-border-focused: ds.$color-border-primary-shared-hovered !default;
+$check-box-icon-checked-border-active: ds.$color-border-primary-shared-active !default;
+
+$check-box-invalid-border: ds.$color-border-danger-shared !default;
+$check-box-invalid-border-hovered: ds.$color-border-danger-shared-hovered !default;
+$check-box-invalid-border-focused: ds.$color-border-danger-shared-hovered !default;
+$check-box-invalid-border-active: ds.$color-border-danger-shared-active !default;
+
+$check-box-invalid-bg: ds.$color-bg-danger-shared !default;
+$check-box-invalid-bg-hovered: ds.$color-bg-danger-shared-hovered !default;
+$check-box-invalid-bg-focused: ds.$color-bg-danger-shared-hovered !default;
+$check-box-invalid-bg-active: ds.$color-bg-danger-shared-active !default;
+
+$check-box-invalid-mark-bg: ds.$color-content-danger-shared !default;
+$check-box-invalid-mark-bg-hovered: ds.$color-content-danger-shared-hovered !default;
+$check-box-invalid-mark-bg-focused: ds.$color-content-danger-shared-hovered !default;
+$check-box-invalid-mark-bg-active: ds.$color-content-danger-shared-active !default;
+
+$check-box-border-disabled: ds.$color-border-disabled !default;
+
+$check-box-border-read-only: ds.$color-border-disabled !default;
+$check-box-icon-bg-disabled: ds.$color-content-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..e27fad82d7bb
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/checkBox/_index.scss
@@ -0,0 +1,259 @@
+@use "sass:math";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../../base/checkBox" with (
+  $checkbox-text-padding-inline-start: false,
+);
+@use "../../base/checkBox/mixins" as *;
+
+.dx-checkbox-icon {
+  width: var(--dx-check-box-arrow-icon-size);
+  height: var(--dx-check-box-arrow-icon-size);
+  border-width: var(--dx-check-box-border-width);
+  border-style: solid;
+  border-color: var(--dx-check-box-border);
+  border-radius: var(--dx-check-box-icon-border-radius);
+  background-color: var(--dx-check-box-icon-bg);
+  font-size: var(--dx-check-box-icon-font-size);
+
+  &::before {
+    z-index: 1;
+  }
+}
+
+.dx-checkbox-text {
+  padding-inline-start: var(--dx-check-box-text-padding-inline-start);
+  padding-inline-end: var(--dx-check-box-text-padding-inline-end);
+}
+
+.dx-checkbox {
+  .dx-checkbox-container {
+    overflow: visible;
+  }
+
+  &.dx-invalid {
+    .dx-checkbox-icon {
+      border-color: var(--dx-check-box-invalid-border);
+    }
+  }
+
+  &.dx-state-readonly {
+    .dx-checkbox-icon {
+      border-color: var(--dx-check-box-border-read-only);
+    }
+  }
+
+  &.dx-state-hover {
+    .dx-checkbox-icon {
+      border-color: var(--dx-check-box-border-hovered);
+    }
+
+    &.dx-invalid {
+      .dx-checkbox-icon {
+        border-color: var(--dx-check-box-invalid-border-hovered);
+      }
+    }
+  }
+
+  &.dx-state-active {
+    .dx-checkbox-icon {
+      border-color: var(--dx-check-box-border-active);
+    }
+
+    &.dx-invalid {
+      .dx-checkbox-icon {
+        border-color: var(--dx-check-box-invalid-border-active);
+      }
+    }
+  }
+
+  &.dx-state-focused {
+    .dx-checkbox-icon {
+      border-color: var(--dx-check-box-icon-checked-border-focused);
+    }
+  }
+
+  &.dx-state-active,
+  &.dx-state-focused {
+    &.dx-invalid {
+      .dx-checkbox-icon {
+        border-color: var(--dx-check-box-invalid-border-focused);
+      }
+    }
+  }
+
+  &.dx-state-disabled,
+  .dx-state-disabled & {
+    .dx-checkbox-icon {
+      border-color: var(--dx-check-box-border-disabled);
+    }
+  }
+}
+
+.dx-checkbox-checked {
+  .dx-checkbox-icon {
+    color: var(--dx-check-box-mark-content);
+    border-color: var(--dx-check-box-icon-checked-border);
+    background-color: var(--dx-check-box-icon-checked-bg);
+
+    @include dx-icon(check);
+
+    font-size: var(--dx-check-box-icon-font-size);
+
+    @include dx-checkbox-icon-centered($check-box-arrow-icon-size, $check-box-arrow-icon-size, var(--dx-check-box-arrow-font-size));
+  }
+
+  &.dx-state-hover {
+    .dx-checkbox-icon {
+      border-color: var(--dx-check-box-icon-checked-border-hovered);
+      background-color: var(--dx-check-box-icon-checked-bg-hovered);
+    }
+
+    &.dx-invalid {
+      .dx-checkbox-icon {
+        border-color: var(--dx-check-box-invalid-border-hovered);
+        background-color: var(--dx-check-box-invalid-bg-hovered);
+      }
+    }
+  }
+
+  &.dx-state-active,
+  &.dx-state-focused {
+    .dx-checkbox-icon {
+      border-color: var(--dx-check-box-icon-checked-border-focused);
+      background-color: var(--dx-check-box-icon-checked-bg-focused);
+    }
+
+    &.dx-invalid {
+      .dx-checkbox-icon {
+        border-color: var(--dx-check-box-invalid-border-focused);
+        background-color: var(--dx-check-box-invalid-bg-focused);
+      }
+    }
+  }
+
+  &.dx-state-active {
+    .dx-checkbox-icon {
+      border-color: var(--dx-check-box-icon-checked-border-active);
+      background-color: var(--dx-check-box-icon-checked-bg-active);
+    }
+
+    &.dx-invalid {
+      .dx-checkbox-icon {
+        border-color: var(--dx-check-box-invalid-border-active);
+        background-color: var(--dx-check-box-invalid-bg-active);
+      }
+    }
+  }
+
+  &.dx-invalid {
+    .dx-checkbox-icon {
+      background-color: var(--dx-check-box-invalid-bg);
+    }
+  }
+
+  &.dx-state-readonly,
+  &.dx-state-disabled,
+  .dx-state-disabled &,
+  &.dx-state-readonly.dx-invalid {
+    .dx-checkbox-icon {
+      color: var(--dx-check-box-icon-bg-disabled);
+      background-color: var(--dx-check-box-icon-bg);
+    }
+  }
+}
+
+@include dx-checkbox-icon-indeterminate(
+  var(--dx-check-box-mark-content),
+  var(--dx-check-box-icon-checked-bg),
+  $check-box-indeterminate-icon-height,
+  $check-box-indeterminate-icon-width,
+  var(--dx-check-box-indeterminate-icon-border-radius),
+);
+
+.dx-checkbox-indeterminate {
+  .dx-checkbox-icon {
+    border-color: var(--dx-check-box-icon-checked-border);
+  }
+
+  &.dx-invalid {
+    .dx-checkbox-icon {
+      &::before {
+        background-color: var(--dx-check-box-invalid-mark-bg);
+      }
+    }
+  }
+
+  &.dx-state-hover {
+    .dx-checkbox-icon {
+      border-color: var(--dx-check-box-icon-checked-border-hovered);
+
+      &::before {
+        background-color: var(--dx-check-box-icon-checked-bg-hovered);
+      }
+    }
+
+    &.dx-invalid {
+      .dx-checkbox-icon {
+        border-color: var(--dx-check-box-invalid-border-hovered);
+
+        &::before {
+          background-color: var(--dx-check-box-invalid-mark-bg-hovered);
+        }
+      }
+    }
+  }
+
+  &.dx-state-active,
+  &.dx-state-focused {
+    .dx-checkbox-icon {
+      border-color: var(--dx-check-box-icon-checked-border-focused);
+
+      &::before {
+        background-color: var(--dx-check-box-icon-checked-bg-focused);
+      }
+    }
+
+    &.dx-invalid {
+      .dx-checkbox-icon {
+        border-color: var(--dx-check-box-invalid-border-focused);
+
+        &::before {
+          background-color: var(--dx-check-box-invalid-mark-bg-focused);
+        }
+      }
+    }
+  }
+
+  &.dx-state-active {
+    .dx-checkbox-icon {
+      border-color: var(--dx-check-box-icon-checked-border-active);
+
+      &::before {
+        background-color: var(--dx-check-box-icon-checked-bg-active);
+      }
+    }
+
+    &.dx-invalid {
+      .dx-checkbox-icon {
+        border-color: var(--dx-check-box-invalid-border-active);
+
+        &::before {
+          background-color: var(--dx-check-box-invalid-mark-bg-active);
+        }
+      }
+    }
+  }
+
+  &.dx-state-readonly,
+  &.dx-state-disabled,
+  .dx-state-disabled &,
+  &.dx-state-readonly.dx-invalid {
+    .dx-checkbox-icon {
+      &::before {
+        background-color: var(--dx-check-box-icon-bg-disabled);
+      }
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/checkBox/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/checkBox/_public.scss
new file mode 100644
index 000000000000..6c2eac84c7e7
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/checkBox/_public.scss
@@ -0,0 +1,44 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-check-box-arrow-font-size: #{$check-box-arrow-font-size};
+  --dx-check-box-arrow-icon-size: #{$check-box-arrow-icon-size};
+  --dx-check-box-border: #{$check-box-border};
+  --dx-check-box-border-active: #{$check-box-border-active};
+  --dx-check-box-border-disabled: #{$check-box-border-disabled};
+  --dx-check-box-border-hovered: #{$check-box-border-hovered};
+  --dx-check-box-border-read-only: #{$check-box-border-read-only};
+  --dx-check-box-border-width: #{$check-box-border-width};
+  --dx-check-box-icon-bg: #{$check-box-icon-bg};
+  --dx-check-box-icon-bg-disabled: #{$check-box-icon-bg-disabled};
+  --dx-check-box-icon-border-radius: #{$check-box-icon-border-radius};
+  --dx-check-box-icon-checked-bg: #{$check-box-icon-checked-bg};
+  --dx-check-box-icon-checked-bg-active: #{$check-box-icon-checked-bg-active};
+  --dx-check-box-icon-checked-bg-focused: #{$check-box-icon-checked-bg-focused};
+  --dx-check-box-icon-checked-bg-hovered: #{$check-box-icon-checked-bg-hovered};
+  --dx-check-box-icon-checked-border: #{$check-box-icon-checked-border};
+  --dx-check-box-icon-checked-border-active: #{$check-box-icon-checked-border-active};
+  --dx-check-box-icon-checked-border-focused: #{$check-box-icon-checked-border-focused};
+  --dx-check-box-icon-checked-border-hovered: #{$check-box-icon-checked-border-hovered};
+  --dx-check-box-icon-font-size: #{$check-box-icon-font-size};
+  --dx-check-box-indeterminate-icon-border-radius: #{$check-box-indeterminate-icon-border-radius};
+  --dx-check-box-indeterminate-icon-height: #{$check-box-indeterminate-icon-height};
+  --dx-check-box-indeterminate-icon-width: #{$check-box-indeterminate-icon-width};
+  --dx-check-box-invalid-bg: #{$check-box-invalid-bg};
+  --dx-check-box-invalid-bg-active: #{$check-box-invalid-bg-active};
+  --dx-check-box-invalid-bg-focused: #{$check-box-invalid-bg-focused};
+  --dx-check-box-invalid-bg-hovered: #{$check-box-invalid-bg-hovered};
+  --dx-check-box-invalid-border: #{$check-box-invalid-border};
+  --dx-check-box-invalid-border-active: #{$check-box-invalid-border-active};
+  --dx-check-box-invalid-border-focused: #{$check-box-invalid-border-focused};
+  --dx-check-box-invalid-border-hovered: #{$check-box-invalid-border-hovered};
+  --dx-check-box-invalid-mark-bg: #{$check-box-invalid-mark-bg};
+  --dx-check-box-invalid-mark-bg-active: #{$check-box-invalid-mark-bg-active};
+  --dx-check-box-invalid-mark-bg-focused: #{$check-box-invalid-mark-bg-focused};
+  --dx-check-box-invalid-mark-bg-hovered: #{$check-box-invalid-mark-bg-hovered};
+  --dx-check-box-mark-content: #{$check-box-mark-content};
+  --dx-check-box-text-padding-inline-end: #{$check-box-text-padding-inline-end};
+  --dx-check-box-text-padding-inline-start: #{$check-box-text-padding-inline-start};
+}
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..0d6450647456
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/checkBox/_sizes.scss
@@ -0,0 +1,27 @@
+@use "../sizes" as *;
+@use "colors" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$check-box-icon-font-size: ds.$spacing-160 !default;
+
+$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;
+
+$check-box-text-padding-inline-start: null !default;
+$check-box-text-padding-inline-end: null !default;
+
+@if $size == "default" {
+  $check-box-text-padding-inline-start: ds.$spacing-120 !default;
+  $check-box-text-padding-inline-end: ds.$spacing-80 !default;
+}
+
+@else if $size == "compact" {
+  $check-box-text-padding-inline-start: ds.$spacing-80 !default;
+  $check-box-text-padding-inline-end: ds.$spacing-60 !default;
+}
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..adb24a6d518a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_colors.scss
@@ -0,0 +1,5 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$color-box-preview-icon: ds.$color-content-subtle !default;
+
+$color-box-content-disabled: ds.$color-content-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..7b046e68be64
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_index.scss
@@ -0,0 +1,72 @@
+@use "sass:math";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/colorBox" with (
+  $colorbox-input-left-padding: var(--dx-color-box-input-min-width),
+  $colorbox-texteditor-input-container-width: var(--dx-color-box-input-container-width),
+  $colorbox-texteditor-input-container-height: var(--dx-color-box-input-container-height),
+  $colorbox-texteditor-input-container-inset-inline-start: var(--dx-color-box-input-container-inset-inline-start),
+  $colorbox-overlay-padding: var(--dx-color-box-overlay-padding),
+  $colorbox-toolbar-item-padding-right: var(--dx-color-box-toolbar-item-padding-inline-end),
+);
+@use "../../base/colorBox/mixins" as *;
+@use "../colorView";
+@use "../dropDownEditor";
+@use "../colorView/colors" as colorViewColors;
+
+.dx-colorbox {
+  .dx-colorbox-input-container {
+    .dx-placeholder::before,
+    .dx-colorbox-input {
+      padding-inline-start: var(--dx-color-box-preview-min-width);
+    }
+
+    &::after {
+      left: calc(var(--dx-color-box-preview-inset-inline-start) + 1px); // dx-px-nudge: +1px over the preview inset
+    }
+  }
+
+  &.dx-texteditor {
+    .dx-texteditor-label {
+      .dx-label-before {
+        min-width: var(--dx-color-box-preview-min-width);
+      }
+    }
+  }
+}
+
+.dx-colorbox-color-result-preview {
+  position: absolute;
+  top: 50%;
+  z-index: 2;
+  width: var(--dx-color-box-preview-icon-size);
+  height: var(--dx-color-box-preview-icon-size);
+  margin-top: calc(var(--dx-color-box-preview-icon-size) / -2);
+  inset-inline-start: var(--dx-color-box-preview-inset-inline-start);
+  border: var(--dx-color-box-preview-border);
+  border-color: colorViewColors.$color-view-border;
+
+  .dx-icon-colordismiss {
+    color: var(--dx-color-box-preview-icon);
+  }
+
+  .dx-state-disabled & {
+    border-color: colorViewColors.$color-view-border-disabled;
+
+    .dx-icon-colordismiss {
+      color: var(--dx-color-box-content-disabled);
+    }
+  }
+}
+
+.dx-colorbox-overlay {
+  &.dx-overlay-content {
+    background-color: var(--dx-color-box-overlay-bg);
+  }
+
+  .dx-popup-content {
+    padding: var(--dx-color-box-overlay-content-padding);
+  }
+
+  padding: 0;
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_public-links.scss b/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_public-links.scss
new file mode 100644
index 000000000000..46007e3d0e0f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_public-links.scss
@@ -0,0 +1,3 @@
+@mixin publish {
+  --dx-color-box-overlay-bg: var(--dx-surface-overlay);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_public.scss
new file mode 100644
index 000000000000..d16a1316a022
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_public.scss
@@ -0,0 +1,22 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+@use "public-links" as links;
+
+@mixin publish {
+  --dx-color-box-content-disabled: #{$color-box-content-disabled};
+  --dx-color-box-input-container-height: #{$color-box-input-container-height};
+  --dx-color-box-input-container-inset-inline-start: #{$color-box-input-container-inset-inline-start};
+  --dx-color-box-input-container-width: #{$color-box-input-container-width};
+  --dx-color-box-input-min-width: #{$color-box-input-min-width};
+  --dx-color-box-overlay-content-padding: #{$color-box-overlay-content-padding};
+  --dx-color-box-overlay-padding: #{$color-box-overlay-padding};
+  --dx-color-box-preview-border: #{$color-box-preview-border};
+  --dx-color-box-preview-icon: #{$color-box-preview-icon};
+  --dx-color-box-preview-icon-size: #{$color-box-preview-icon-size};
+  --dx-color-box-preview-inset-inline-start: #{$color-box-preview-inset-inline-start};
+  --dx-color-box-preview-min-width: #{$color-box-preview-min-width};
+  --dx-color-box-toolbar-item-padding-inline-end: #{$color-box-toolbar-item-padding-inline-end};
+
+  @include links.publish();
+}
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..347c6fcafce5
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_sizes.scss
@@ -0,0 +1,31 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$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;
+
+// Base-layer sizing injected with design tokens (wave B13)
+$color-box-input-min-width: ds.$spacing-400 !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..c449809591c6
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_colors.scss
@@ -0,0 +1,10 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$color-view-border: ds.$color-border !default;
+$color-view-label-content: ds.$color-content-subtle !default;
+$color-view-handle-bg: ds.$color-bg !default;
+$color-view-handle-border: ds.$color-border !default;
+
+$color-view-border-disabled: ds.$color-border-disabled !default;
+$color-view-label-content-disabled: ds.$color-content-disabled !default;
+$color-view-handle-border-disabled: ds.$color-border-disabled !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..b7f30cc333bb
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_index.scss
@@ -0,0 +1,89 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/colorView/mixins" as *;
+@use "../../base/colorView" with (
+  $color-view-container-width: var(--dx-color-view-container-width),
+  $color-view-palette-width: var(--dx-color-view-palette-width),
+  $color-view-palette-height: var(--dx-color-view-palette-height),
+  $color-view-alpha-cell-width: var(--dx-color-view-alpha-cell-width),
+  $color-view-hue-scale-width: var(--dx-color-view-hue-scale-width),
+  $color-view-hue-scale-height: var(--dx-color-view-hue-scale-height),
+  $color-view-hue-scale-wrapper-height: var(--dx-color-view-hue-scale-wrapper-height),
+  $color-view-label-hex-margin: var(--dx-color-view-container-hex-margin),
+  $color-view-alpha-label-margin-inline-start: var(--dx-color-view-container-alpha-label-margin),
+  $color-view-alpha-label-margin-inline-start-rtl: var(--dx-color-view-container-alpha-label-margin),
+  $color-view-alpha-label-width: var(--dx-color-view-container-alpha-label-width),
+  $color-view-textbox-width: var(--dx-color-view-container-textbox-width),
+  $color-view-textbox-margin: var(--dx-color-view-container-textbox-margin),
+  $color-view-alpha-row-margin-block-start: var(--dx-color-view-alpha-row-margin-block-start),
+  $color-view-hue-scale-cell-margin-inline-start: var(--dx-color-view-hue-scale-margin),
+  $color-view-controls-width: var(--dx-color-view-controls-container-width),
+  $color-view-controls-margin-inline-start: var(--dx-color-view-controls-container-margin),
+  $color-view-controls-margin-inline-start-rtl: var(--dx-color-view-controls-container-margin),
+  $color-view-color-preview-width: 100%,
+  $color-view-color-preview-height: var(--dx-color-view-color-preview-height),
+  $color-view-alpha-scale-height: var(--dx-color-view-alpha-scale-height),
+  $color-view-alpha-cell-margin-block: var(--dx-color-view-alpha-cell-margin-block),
+  $color-view-apply-button-margin-inline-end: var(--dx-color-view-apply-button-margin-inline-end),
+);
+@include dx-base-colorview-styles(var(--dx-color-view-handle-bg), var(--dx-color-view-handle-border));
+
+.dx-colorview-container {
+  label {
+    line-height: var(--dx-color-view-container-line-height);
+    display: flex;
+    align-items: center;
+    margin-bottom: var(--dx-color-view-container-margin-block-end);
+
+    /*
+     * Kept as a whole declaration on purpose: it also resets the margin-bottom above, which the
+     * base rule — it sets margin-inline-start alone — would leave in place.
+     */
+    &.dx-colorview-alpha-channel-label {
+      margin: 0 0 0 var(--dx-color-view-container-alpha-label-margin);
+    }
+  }
+}
+
+.dx-colorview-container-row.dx-colorview-alpha-channel-row {
+  display: flex;
+  align-items: center;
+}
+
+.dx-colorview-container label { // stylelint-disable-line no-duplicate-selectors
+  color: var(--dx-color-view-label-content);
+}
+
+.dx-colorview-palette-cell,
+.dx-colorview-alpha-channel-border,
+.dx-colorview-hue-scale-wrapper,
+.dx-colorview-color-preview-container {
+  padding: var(--dx-color-view-color-preview-container-padding);
+  margin: var(--dx-color-view-color-preview-container-margin);
+  margin-top: 0;
+  background-color: var(--dx-color-view-bg-box-palette-cell-bg);
+  box-shadow: 0 0 0 1px var(--dx-color-view-border); // dx-line-width: 1px hairline ring drawn as a shadow
+}
+
+.dx-colorview-color-preview-container {
+  margin-bottom: var(--dx-color-view-preview-container-margin);
+}
+
+.dx-colorview-container.dx-state-disabled,
+.dx-state-disabled .dx-colorview-container {
+  label {
+    color: var(--dx-color-view-label-content-disabled);
+  }
+
+  .dx-colorview-palette-cell,
+  .dx-colorview-alpha-channel-border,
+  .dx-colorview-hue-scale-wrapper,
+  .dx-colorview-color-preview-container {
+    box-shadow: 0 0 0 1px var(--dx-color-view-border-disabled); // dx-line-width: 1px hairline ring drawn as a shadow
+  }
+
+  .dx-colorview-palette-handle,
+  .dx-colorview-hue-scale-handle {
+    border-color: var(--dx-color-view-handle-border-disabled);
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_public-links.scss b/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_public-links.scss
new file mode 100644
index 000000000000..0191b75ee4c5
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_public-links.scss
@@ -0,0 +1,4 @@
+@mixin publish {
+  --dx-color-view-bg-box-palette-cell-bg: var(--dx-surface-overlay);
+  --dx-color-view-hue-scale-height: var(--dx-color-view-palette-height);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_public.scss
new file mode 100644
index 000000000000..76e5472af450
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_public.scss
@@ -0,0 +1,40 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+@use "public-links" as links;
+
+@mixin publish {
+  --dx-color-view-alpha-cell-margin-block: #{$color-view-alpha-cell-margin-block};
+  --dx-color-view-alpha-cell-width: #{$color-view-alpha-cell-width};
+  --dx-color-view-alpha-row-margin-block-start: #{$color-view-alpha-row-margin-block-start};
+  --dx-color-view-alpha-scale-height: #{$color-view-alpha-scale-height};
+  --dx-color-view-apply-button-margin-inline-end: #{$color-view-apply-button-margin-inline-end};
+  --dx-color-view-border: #{$color-view-border};
+  --dx-color-view-border-disabled: #{$color-view-border-disabled};
+  --dx-color-view-color-preview-container-margin: #{$color-view-color-preview-container-margin};
+  --dx-color-view-color-preview-container-padding: #{$color-view-color-preview-container-padding};
+  --dx-color-view-color-preview-height: #{$color-view-color-preview-height};
+  --dx-color-view-container-alpha-label-margin: #{$color-view-container-alpha-label-margin};
+  --dx-color-view-container-alpha-label-width: #{$color-view-container-alpha-label-width};
+  --dx-color-view-container-hex-margin: #{$color-view-container-hex-margin};
+  --dx-color-view-container-line-height: #{$color-view-container-line-height};
+  --dx-color-view-container-margin-block-end: #{$color-view-container-margin-block-end};
+  --dx-color-view-container-textbox-margin: #{$color-view-container-textbox-margin};
+  --dx-color-view-container-textbox-width: #{$color-view-container-textbox-width};
+  --dx-color-view-container-width: #{$color-view-container-width};
+  --dx-color-view-controls-container-margin: #{$color-view-controls-container-margin};
+  --dx-color-view-controls-container-width: #{$color-view-controls-container-width};
+  --dx-color-view-handle-bg: #{$color-view-handle-bg};
+  --dx-color-view-handle-border: #{$color-view-handle-border};
+  --dx-color-view-handle-border-disabled: #{$color-view-handle-border-disabled};
+  --dx-color-view-hue-scale-margin: #{$color-view-hue-scale-margin};
+  --dx-color-view-hue-scale-width: #{$color-view-hue-scale-width};
+  --dx-color-view-hue-scale-wrapper-height: #{$color-view-hue-scale-wrapper-height};
+  --dx-color-view-label-content: #{$color-view-label-content};
+  --dx-color-view-label-content-disabled: #{$color-view-label-content-disabled};
+  --dx-color-view-palette-height: #{$color-view-palette-height};
+  --dx-color-view-palette-width: #{$color-view-palette-width};
+  --dx-color-view-preview-container-margin: #{$color-view-preview-container-margin};
+
+  @include links.publish();
+}
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..9957a592e88e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_sizes.scss
@@ -0,0 +1,62 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+/*
+ * The colorview layout is hand-fitted and holds itself together, not the scale. The container
+ * row is a three-cell table whose outer widths must add up to the container width, or the right
+ * edge sticks out and the border gets clipped:
+ *
+ *   palette 288 + borders 2 + margins 2    = 292
+ *   hue scale 20 + borders 2 + margin 19   =  41
+ *   controls 90 + margin 27                = 117
+ *                                           --- 450
+ *
+ * Two of the numbers below are therefore remainders, not sizes:
+ *
+ *   $color-view-container-alpha-label-margin  43 = 450 - 292 - 115
+ *   $color-view-controls-container-margin     27 = 450 - 292 - 41 - 90
+ *
+ * Do not snap them to the nearest step: up pushes the block past the container by exactly that
+ * much, down leaves a gap on the right. packages/devextreme/playground/sizes-colorview.html
+ * carries an overflow check for exactly this.
+ *
+ * The spacing scale stops at 160px, so 450, 288, 299 and 115 are out of its reach anyway. The
+ * dx-offscale markers below are there because the px-literal gate demands one, not because these
+ * places want a step - colorView is off the tokenization queue.
+ */
+$color-view-container-width: 450px !default; // dx-offscale: 450px, the fixed layout width
+$color-view-palette-width: 288px !default; // dx-offscale: 288px
+$color-view-palette-height: 299px !default; // dx-offscale: 299px
+$color-view-alpha-row-margin-block-start: 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, a remainder - see the note above
+$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, a remainder - see the note above
+
+// 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-cell-width: $color-view-palette-width + 4 !default;
+
+// the wrapper carries the 1px hairline ring on both sides, so it is two pixels taller than the scale
+$color-view-hue-scale-wrapper-height: $color-view-palette-height + 2 !default;
+
+// Hoisted out of the shared layer's rules; values match what it used to pin
+$color-view-alpha-scale-height: ds.$spacing-200 !default;
+$color-view-alpha-cell-margin-block: ds.$spacing-60 !default;
+$color-view-apply-button-margin-inline-end: ds.$spacing-100 !default;
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..aaaf34c5a3cf
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/common/_colors.scss
@@ -0,0 +1,40 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+/*
+ * 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: ds.$color-bg !default;
+$backdrop-bg: ds.$color-bg-backdrop !default;
+
+// Focus ring for the widgets that draw one themselves. One role for every focus ring in the
+
+// theme, including cardView: mode-dependent, so the ring keeps 3:1 contrast in both modes.
+$focus-rect-outline: ds.$color-border-primary-shared !default;
+
+$palette-accent: ds.$color-bg-primary !default;
+$palette-bg: ds.$color-bg !default;
+$palette-border: ds.$color-border !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-bg: ds.$color-bg-danger !default;
+$invalid-badge-content: ds.$color-content-static-dark !default;
+$valid-badge-content: ds.$color-content-success !default;
+$palette-text: ds.$color-content !default;
+$global-bg: ds.$color-bg !default;
+$global-content: ds.$color-content !default;
+
+/*
+ * A mention is markup the editor writes into the value, and consumers render that value back
+ * anywhere — the Mentions demo shows a chat log built from plain spans, with no editor around.
+ * The base layer says the same by styling `.dx-mention` from a bare selector, unlike `.dx-variable`
+ * which it nests under `.dx-htmleditor-content`. So the value is not part of one widget's anatomy
+ * and belongs in the system tier, next to invalid-badge.
+ */
+$mention-bg: ds.$color-bg-selected !default;
+
+$global-content-disabled: ds.$color-content-disabled !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..b242f4365184
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/common/_index.scss
@@ -0,0 +1,63 @@
+@use "../colors" as *;
+@use "../sizes" as *;
+
+.dx-theme-marker {
+  font-family: "dx.fluent-next.#{$theme-marker-color}.#{$theme-marker-mode}#{$theme-marker-size-postfix}";
+}
+
+// stylelint-disable declaration-no-important
+.dx-theme-accent-as-text-color {
+  color: var(--dx-palette-accent) !important;
+}
+
+.dx-theme-text-color {
+  color: var(--dx-palette-text) !important;
+}
+
+.dx-theme-background-color-as-text-color {
+  color: var(--dx-palette-bg) !important;
+}
+
+.dx-theme-border-color-as-text-color {
+  color: var(--dx-palette-border) !important;
+}
+
+.dx-theme-accent-as-background-color {
+  background-color: var(--dx-palette-accent) !important;
+  fill: var(--dx-palette-accent) !important;
+}
+
+.dx-theme-text-color-as-background-color {
+  background-color: var(--dx-palette-text) !important;
+  fill: var(--dx-palette-text) !important;
+}
+
+.dx-theme-background-color {
+  background-color: var(--dx-palette-bg) !important;
+  fill: var(--dx-palette-bg) !important;
+}
+
+.dx-theme-typography-background-color {
+  background-color: var(--dx-global-bg) !important;
+}
+
+.dx-theme-border-color-as-background-color {
+  background-color: var(--dx-palette-border) !important;
+  fill: var(--dx-palette-border) !important;
+}
+
+.dx-theme-accent-as-border-color {
+  border-color: var(--dx-palette-accent) !important;
+}
+
+.dx-theme-text-color-as-border-color {
+  border-color: var(--dx-palette-text) !important;
+}
+
+.dx-theme-background-color-as-border-color {
+  border-color: var(--dx-palette-bg) !important;
+}
+
+.dx-theme-border-color {
+  border-color: var(--dx-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..6cc0e8e4c13c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/common/_mixins.scss
@@ -0,0 +1,103 @@
+@use "sass:math";
+@use "../sizes" as *;
+@use "../../base/mixins" as *;
+@use "../validation/sizes" as validationSizes;
+@use "../../base/validation" as baseValidation with (
+  $validation-summary-margin-top: validationSizes.$validation-summary-margin-block-start,
+  $validation-message-content-padding: validationSizes.$validation-message-content-padding,
+  $validation-summary-item-border-bottom-width: var(--dx-validation-summary-item-border-block-end-width),
+);
+@use "../list/sizes" as listSizes;
+
+@mixin dx-base-typography() {
+  @include dx-base-typography-mixin(
+      var(--dx-global-content),
+      $global-font-size,
+      var(--dx-global-font-family),
+      var(--dx-global-line-height)
+    );
+}
+
+@mixin badge-settings() {
+  pointer-events: none;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: 50%;
+  margin-top: calc(var(--dx-invalid-badge-size) / -2);
+  width: var(--dx-invalid-badge-size);
+  height: var(--dx-invalid-badge-size);
+  line-height: calc(var(--dx-invalid-badge-size) + 1px); // dx-px-nudge: +1px over the badge size
+  font-size: $global-font-size;
+}
+
+@mixin dx-invalid-fluent-badge() {
+  @include badge-settings();
+
+  font-size: $global-font-size;
+  font-weight: var(--dx-invalid-badge-font-weight);
+  background-color: var(--dx-invalid-badge-bg);
+  color: var(--dx-invalid-badge-content);
+  content: "!";
+  border-radius: 50%;
+}
+
+@mixin dx-valid-fluent-badge() {
+  @include badge-settings();
+
+  font-size: var(--dx-valid-badge-font-size);
+  font-weight: bold;
+  font-family: "DXIcons", sans-serif;
+  color: var(--dx-valid-badge-content);
+  content: "\f005";
+
+  @include baseValidation.validation-badge-animation();
+}
+
+@mixin dx-pending-indicator-fluent() {
+  @include dx-pending-indicator(var(--dx-invalid-badge-size));
+}
+
+@mixin dx-dropdownlist-list-appearance() {
+  height: 100%;
+
+  &.dx-popup-wrapper .dx-overlay-content {
+    box-shadow: var(--dx-global-dropdown-box-shadow);
+    border-top-width: 0;
+    border-bottom-width: var(--dx-global-dropdown-border-block-end-width);
+
+    &.dx-dropdowneditor-overlay-flipped {
+      border-top-width: var(--dx-global-dropdown-flipped-border-block-start-width);
+      border-bottom-width: 0;
+    }
+  }
+
+  .dx-popup-content {
+    height: 100%;
+    padding: var(--dx-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-px-nudge: +2px / -2px around the list item padding
+  }
+
+  .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/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/common/_public.scss
new file mode 100644
index 000000000000..caac4cec0ab5
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/common/_public.scss
@@ -0,0 +1,39 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-backdrop-bg: #{$backdrop-bg};
+  --dx-focus-rect-border-radius: #{$focus-rect-border-radius};
+  --dx-focus-rect-outline: #{$focus-rect-outline};
+  --dx-focus-rect-outline-offset: #{$focus-rect-outline-offset};
+  --dx-focus-rect-outline-offset-inset: #{$focus-rect-outline-offset-inset};
+  --dx-focus-rect-outline-width: #{$focus-rect-outline-width};
+  --dx-global-bg: #{$global-bg};
+  --dx-global-content: #{$global-content};
+  --dx-global-content-disabled: #{$global-content-disabled};
+  --dx-global-dropdown-border-block-end-width: #{$global-dropdown-border-block-end-width};
+  --dx-global-dropdown-box-shadow: #{$global-dropdown-box-shadow};
+  --dx-global-dropdown-content-padding: #{$global-dropdown-content-padding};
+  --dx-global-dropdown-flipped-border-block-start-width: #{$global-dropdown-flipped-border-block-start-width};
+  --dx-global-font-family: #{$global-font-family};
+  --dx-global-inline-widget-inner-height: #{$global-inline-widget-inner-height};
+  --dx-global-line-height: #{$global-line-height};
+  --dx-invalid-badge-bg: #{$invalid-badge-bg};
+  --dx-invalid-badge-content: #{$invalid-badge-content};
+  --dx-invalid-badge-font-weight: #{$invalid-badge-font-weight};
+  --dx-invalid-badge-offset: #{$invalid-badge-offset};
+  --dx-invalid-badge-padding-inline: #{$invalid-badge-padding-inline};
+  --dx-invalid-badge-size: #{$invalid-badge-size};
+  --dx-mention-bg: #{$mention-bg};
+  --dx-mention-border-radius: #{$mention-border-radius};
+  --dx-mention-margin-inline: #{$mention-margin-inline};
+  --dx-mention-padding-block: #{$mention-padding-block};
+  --dx-palette-accent: #{$palette-accent};
+  --dx-palette-bg: #{$palette-bg};
+  --dx-palette-border: #{$palette-border};
+  --dx-palette-text: #{$palette-text};
+  --dx-surface-overlay: #{$surface-overlay};
+  --dx-valid-badge-content: #{$valid-badge-content};
+  --dx-valid-badge-font-size: #{$valid-badge-font-size};
+}
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..750a1005f479
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/common/_sizes.scss
@@ -0,0 +1,49 @@
+@use "sass:math";
+@use "../sizes" as *;
+@use "./colors" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// Not a colour: an opacity that used to sit in _colors.scss (NAMING.md, O7)
+
+$global-line-height: null !default;
+
+$global-inline-widget-inner-height: calc(#{$global-inline-widget-height} - #{$global-border-width} * 2) !default;
+
+$focus-rect-border-radius: $global-border-radius !default;
+$focus-rect-outline-width: ds.$border-width-20 !default;
+$focus-rect-outline-offset: ds.$spacing-10 !default;
+
+/*
+ * The inset variant: the grids draw the ring inside the cell instead of around it. Derived once
+ * here and published, so ten places read a var() instead of each shipping its own calc().
+ */
+$focus-rect-outline-offset-inset: calc(-1 * #{$focus-rect-outline-width}) !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; // dx-px-nudge: +6px over the global font size
+
+$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: ds.$box-shadow-lg !default;
+}
+
+@else if $size == "compact" {
+  $global-line-height: 1.3333 !default; // dx-relative
+  $global-dropdown-box-shadow: ds.$box-shadow-md !default;
+}
+
+// Values hoisted from style-file literals (tokenized)
+$invalid-badge-font-weight: ds.$font-weight-base-strong !default;
+$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;
+
+// see the note on $mention-bg in _colors.scss
+$mention-padding-block: ds.$spacing-10 !default;
+$mention-border-radius: ds.$border-radius-20 !default;
+$mention-margin-inline: ds.$spacing-20 !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..ee3f83527cbc
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/contextMenu/_colors.scss
@@ -0,0 +1,5 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$context-menu-content-disabled: ds.$color-content-disabled !default;
+$context-menu-icon: ds.$color-content-subtle !default;
+$context-menu-shadow: ds.$box-shadow-lg !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..22bb1b8bfb72
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/contextMenu/_index.scss
@@ -0,0 +1,96 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../menu/sizes" as menuSizes;
+@use "../button/sizes" as buttonSizes;
+@use "../../base/contextMenu" with (
+  $contextmenu-menu-items-container-padding: false,
+  $contextmenu-menu-separator-height: var(--dx-context-menu-separator-height),
+  $contextmenu-menu-separator-margin: var(--dx-context-menu-separator-margin),
+);
+@use "../overlay";
+@use "../menuBase" as *;
+@use "../menu/colors" as menuColors;
+
+.dx-context-menu {
+  color: menuColors.$menu-content;
+
+  .dx-menu-items-container {
+    display: flex;
+    flex-direction: column;
+    padding: var(--dx-context-menu-items-container-padding);
+    gap: var(--dx-context-menu-items-container-gap);
+  }
+
+  .dx-menu-item {
+    border-radius: var(--dx-context-menu-item-border-radius);
+
+    .dx-menu-item-content {
+      display: flex;
+      align-items: center;
+      padding: menuSizes.$menu-padding-block var(--dx-context-menu-padding-inline);
+      gap: var(--dx-context-menu-item-content-gap);
+
+      .dx-menu-item-text {
+        padding-inline: var(--dx-context-menu-item-text-padding-inline);
+      }
+
+      .dx-menu-item-popout-container {
+        inset-inline-end: var(--dx-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: var(--dx-context-menu-icon);
+    }
+
+    &.dx-state-disabled {
+      .dx-menu-item-popout {
+        color: var(--dx-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: var(--dx-menu-popup-bg);
+    border-radius: var(--dx-context-menu-border-radius);
+    box-shadow: var(--dx-context-menu-shadow);
+  }
+
+  .dx-menu-separator {
+    background-color: var(--dx-menu-separator-bg);
+
+    .dx-state-disabled & {
+      background-color: var(--dx-menu-separator-bg-disabled);
+    }
+  }
+}
+
+.dx-context-menu.dx-state-disabled,
+.dx-state-disabled .dx-context-menu {
+  .dx-menu-item-text,
+  .dx-menu-item-content,
+  .dx-menu-item-popout {
+    color: var(--dx-context-menu-content-disabled);
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/contextMenu/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/contextMenu/_public.scss
new file mode 100644
index 000000000000..2e213127ebff
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/contextMenu/_public.scss
@@ -0,0 +1,18 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-context-menu-border-radius: #{$context-menu-border-radius};
+  --dx-context-menu-content-disabled: #{$context-menu-content-disabled};
+  --dx-context-menu-icon: #{$context-menu-icon};
+  --dx-context-menu-item-border-radius: #{$context-menu-item-border-radius};
+  --dx-context-menu-item-content-gap: #{$context-menu-item-content-gap};
+  --dx-context-menu-item-text-padding-inline: #{$context-menu-item-text-padding-inline};
+  --dx-context-menu-items-container-gap: #{$context-menu-items-container-gap};
+  --dx-context-menu-items-container-padding: #{$context-menu-items-container-padding};
+  --dx-context-menu-padding-inline: #{$context-menu-padding-inline};
+  --dx-context-menu-separator-height: #{$context-menu-separator-height};
+  --dx-context-menu-separator-margin: #{$context-menu-separator-margin};
+  --dx-context-menu-shadow: #{$context-menu-shadow};
+}
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..563743d3644a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/contextMenu/_sizes.scss
@@ -0,0 +1,24 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$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-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..0456f103f4b1
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dataGrid/_colors.scss
@@ -0,0 +1,7 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$data-grid-group-panel-item-bg: ds.$color-bg-low !default;
+
+// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
+$data-grid-block-separator-bg: ds.$color-bg-primary !default;
+$data-grid-group-panel-item-border: ds.$color-border-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..3e837e87b2e9
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dataGrid/_index.scss
@@ -0,0 +1,136 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../gridBase" as *;
+@use "../gridBase/sizes" as gridBaseSizes;
+@use "../../base/dataGrid" as baseGrid with (
+  $datagrid-draggable-column-opacity: var(--dx-grid-draggable-column-opacity),
+  $datagrid-common-group-min-width: var(--dx-data-grid-group-panel-item-min-width),
+  $datagrid-common-addrow-margin-right: var(--dx-data-grid-group-panel-item-margin-inline-end),
+  $datagrid-common-addrow-margin-left: var(--dx-data-grid-group-panel-item-sort-margin-inline-start),
+  $datagrid-common-form-buttons-border-radius: var(--dx-data-grid-block-separator-border-radius),
+  $datagrid-common-form-buttons-margin-left: var(--dx-data-grid-group-panel-item-rtl-margin-inline-end),
+  $datagrid-common-form-buttons-margin-right: var(--dx-data-grid-group-panel-item-sort-rtl-margin-inline-start),
+  $datagrid-header-filter-outline: var(--dx-grid-outline-focused),
+  $datagrid-header-filter-outline-offset: var(--dx-data-grid-outline-offset-focused),
+  $datagrid-filter-panel-clear-filter-outline-offset: var(--dx-data-grid-filter-panel-outline-offset-focused),
+  $datagrid-button-margin-left: var(--dx-data-grid-form-buttons-margin-inline-start),
+  $datagrid-button-margin-top: var(--dx-data-grid-form-buttons-margin-block-start),
+  $datagrid-error-message-margin-bottom: var(--dx-data-grid-error-message-margin-block-end),
+  $datagrid-button-margin-right: var(--dx-data-grid-form-buttons-rtl-margin-inline-start),
+  $datagrid-border: gridBaseSizes.$grid-border-width solid,
+  $datagrid-border-color: var(--dx-grid-border),
+  $datagrid-drag-header-border-color: var(--dx-grid-drag-header-border),
+  $datagrid-row-error-bg: var(--dx-grid-row-error-bg),
+  $datagrid-row-error-color: var(--dx-grid-row-error-content),
+  $datagrid-base-color: var(--dx-grid-content),
+  $datagrid-base-background-color: var(--dx-grid-bg),
+  $datagrid-focused-border-color: var(--dx-grid-border-focused),
+  $header-filter-color: var(--dx-grid-content),
+  $header-filter-color-empty: var(--dx-grid-content),
+  $base-focus-color: var(--dx-grid-content-focused),
+  $datagrid-text-stub-mask-image: data-uri("images/widgets/fluent-next/grid/text-stub.png"),
+  $datagrid-text-stub-bg: var(--dx-grid-text-stub-bg),
+  $datagrid-group-row-border: var(--dx-data-grid-group-row-border),
+  $datagrid-sticky-column-border: var(--dx-data-grid-sticky-column-border),
+  $datagrid-cell-focus-outline: var(--dx-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: var(--dx-grid-content);
+    font-weight: gridBaseSizes.$grid-column-chooser-font-weight;
+    padding: var(--dx-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: var(--dx-grid-content);
+    font-weight: var(--dx-data-grid-group-panel-item-font-weight);
+    font-size: gridBaseSizes.$grid-cell-font-size;
+    line-height: gridBaseSizes.$grid-header-line-height;
+    background: var(--dx-data-grid-group-panel-item-bg);
+    border-radius: var(--dx-data-grid-group-panel-item-border-radius);
+    padding: var(--dx-data-grid-group-panel-item-padding);
+    border-width: var(--dx-data-grid-group-panel-item-border-width);
+    border-style: solid;
+    border-color: var(--dx-data-grid-group-panel-item-border);
+  }
+
+  .dx-block-separator {
+    margin-right: gridBaseSizes.$grid-group-panel-item-margin-inline;
+    color: var(--dx-grid-content);
+    font-weight: gridBaseSizes.$grid-column-chooser-font-weight;
+    background-color: var(--dx-data-grid-block-separator-bg);
+  }
+
+  .dx-sort {
+    color: var(--dx-grid-content);
+  }
+}
+
+.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: var(--dx-grid-content);
+      background-color: var(--dx-grid-group-row-bg);
+    }
+
+    font-size: gridBaseSizes.$grid-cell-font-size;
+    font-weight: var(--dx-data-grid-group-row-font-weight);
+  }
+}
+
+.dx-datagrid-group-opened {
+  @include dx-icon(chevrondown);
+  @include dx-icon-sizing($global-icon-size);
+
+  color: var(--dx-grid-chevron-icon);
+}
+
+.dx-datagrid-group-closed {
+  @include dx-icon(chevronright);
+  @include dx-icon-sizing($global-icon-size);
+
+  color: var(--dx-grid-chevron-icon);
+}
+
+.dx-row.dx-datagrid-group-footer {
+  &.dx-column-lines {
+    border-bottom: gridBaseSizes.$grid-border-width solid;
+    border-bottom-color: var(--dx-grid-border);
+  }
+}
+
+.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/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dataGrid/_public.scss
new file mode 100644
index 000000000000..f001cd8ad770
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dataGrid/_public.scss
@@ -0,0 +1,31 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-data-grid-block-separator-bg: #{$data-grid-block-separator-bg};
+  --dx-data-grid-block-separator-border-radius: #{$data-grid-block-separator-border-radius};
+  --dx-data-grid-cell-outline-focused: #{$data-grid-cell-outline-focused};
+  --dx-data-grid-cell-padding: #{$data-grid-cell-padding};
+  --dx-data-grid-error-message-margin-block-end: #{$data-grid-error-message-margin-block-end};
+  --dx-data-grid-filter-panel-outline-offset-focused: #{$data-grid-filter-panel-outline-offset-focused};
+  --dx-data-grid-form-buttons-margin-block-start: #{$data-grid-form-buttons-margin-block-start};
+  --dx-data-grid-form-buttons-margin-inline-start: #{$data-grid-form-buttons-margin-inline-start};
+  --dx-data-grid-form-buttons-rtl-margin-inline-start: #{$data-grid-form-buttons-rtl-margin-inline-start};
+  --dx-data-grid-group-panel-item-bg: #{$data-grid-group-panel-item-bg};
+  --dx-data-grid-group-panel-item-border: #{$data-grid-group-panel-item-border};
+  --dx-data-grid-group-panel-item-border-radius: #{$data-grid-group-panel-item-border-radius};
+  --dx-data-grid-group-panel-item-border-width: #{$data-grid-group-panel-item-border-width};
+  --dx-data-grid-group-panel-item-font-weight: #{$data-grid-group-panel-item-font-weight};
+  --dx-data-grid-group-panel-item-margin-inline-end: #{$data-grid-group-panel-item-margin-inline-end};
+  --dx-data-grid-group-panel-item-min-width: #{$data-grid-group-panel-item-min-width};
+  --dx-data-grid-group-panel-item-padding: #{$data-grid-group-panel-item-padding};
+  --dx-data-grid-group-panel-item-padding-block: #{$data-grid-group-panel-item-padding-block};
+  --dx-data-grid-group-panel-item-rtl-margin-inline-end: #{$data-grid-group-panel-item-rtl-margin-inline-end};
+  --dx-data-grid-group-panel-item-sort-margin-inline-start: #{$data-grid-group-panel-item-sort-margin-inline-start};
+  --dx-data-grid-group-panel-item-sort-rtl-margin-inline-start: #{$data-grid-group-panel-item-sort-rtl-margin-inline-start};
+  --dx-data-grid-group-row-border: #{$data-grid-group-row-border};
+  --dx-data-grid-group-row-font-weight: #{$data-grid-group-row-font-weight};
+  --dx-data-grid-outline-offset-focused: #{$data-grid-outline-offset-focused};
+  --dx-data-grid-sticky-column-border: #{$data-grid-sticky-column-border};
+}
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..ce00938043eb
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dataGrid/_sizes.scss
@@ -0,0 +1,46 @@
+@use "../sizes" as *;
+@use "../../base/dataGrid/variables" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$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-base-strong !default;
+$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-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..e3fec2d386ac
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dataGrid/layout/cell.scss
@@ -0,0 +1,101 @@
+/* stylelint-disable no-duplicate-selectors */
+@use "../colors" as *;
+@use "../sizes" as *;
+@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-width solid;
+  border-top-color: var(--dx-grid-border);
+  border-left-width: 0;
+  border-right-width: 0;
+}
+
+// (0,3,1)
+.dx-datagrid-rowsview .dx-row.dx-group-row td {
+  border-top-color: var(--dx-grid-border);
+  border-bottom-color: var(--dx-grid-border);
+}
+
+// (0,3,1)
+.dx-datagrid-sticky-columns .dx-row.dx-datagrid-group-footer > td {
+  border-bottom: gridBaseSizes.$grid-border-width solid;
+  border-bottom-color: var(--dx-grid-border);
+}
+
+// (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: var(--dx-grid-bg);
+}
+
+// (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..e69de29bb2d1
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..1d73f1a98e7e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dateBox/_index.scss
@@ -0,0 +1,144 @@
+@use "sass:math";
+@use "colors" 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: var(--dx-date-box-input-height),
+  $datebox-popup-content-padding-top: var(--dx-date-box-popup-content-padding-block-start),
+  $datebox-popup-content-padding-bottom: var(--dx-date-box-popup-content-padding-block-end),
+  $datebox-button-min-width: var(--dx-date-box-button-min-width),
+  $datebox-apply-button-margin-right: var(--dx-date-box-apply-button-margin-inline-end),
+);
+@use "mixins" as *;
+@use "../timeView";
+@use "../dateView";
+
+.dx-datebox-wrapper {
+  .dx-popup-title {
+    min-height: var(--dx-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: var(--dx-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: var(--dx-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: var(--dx-date-box-overlay-item-margin);
+  }
+
+  .dx-datebox-container-cell {
+    margin-right: var(--dx-date-box-overlay-item-margin);
+    margin-bottom: var(--dx-date-box-overlay-item-margin);
+  }
+}
+
+.dx-datebox-wrapper-calendar.dx-datebox-wrapper-datetime {
+  .dx-timeview {
+    padding: var(--dx-date-box-overlay-item-margin);
+  }
+
+  .dx-datebox-container-cell {
+    margin-top: var(--dx-date-box-container-cell-margin-block-start);
+    margin-right: var(--dx-date-box-overlay-item-margin);
+  }
+}
+
+@media (max-width: 320px) { // dx-literal-required: 320px in a @media condition, var() is invalid there
+  .dx-datebox-wrapper-calendar .dx-calendar {
+    margin: var(--dx-date-box-overlay-item-adaptive-margin);
+  }
+}
+
+.dx-rtl {
+  .dx-datebox-wrapper {
+    .dx-popup-bottom {
+      .dx-toolbar-button + .dx-toolbar-button {
+        .dx-button {
+          margin-right: var(--dx-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(
+        var(--dx-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-margin-inline-end;
+    }
+  }
+}
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/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dateBox/_public.scss
new file mode 100644
index 000000000000..c98d80d0e025
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dateBox/_public.scss
@@ -0,0 +1,17 @@
+// GENERATED by tools/naming/publish.mjs
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-date-box-apply-button-margin-inline-end: #{$date-box-apply-button-margin-inline-end};
+  --dx-date-box-button-margin-inline-end: #{$date-box-button-margin-inline-end};
+  --dx-date-box-button-min-width: #{$date-box-button-min-width};
+  --dx-date-box-container-cell-margin-block-start: #{$date-box-container-cell-margin-block-start};
+  --dx-date-box-content-padding: #{$date-box-content-padding};
+  --dx-date-box-input-height: #{$date-box-input-height};
+  --dx-date-box-overlay-item-adaptive-margin: #{$date-box-overlay-item-adaptive-margin};
+  --dx-date-box-overlay-item-margin: #{$date-box-overlay-item-margin};
+  --dx-date-box-popup-content-margin: #{$date-box-popup-content-margin};
+  --dx-date-box-popup-content-padding-block-end: #{$date-box-popup-content-padding-block-end};
+  --dx-date-box-popup-content-padding-block-start: #{$date-box-popup-content-padding-block-start};
+  --dx-date-box-popup-title-min-height: #{$date-box-popup-title-min-height};
+}
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..cf6eb4bfd564
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dateBox/_sizes.scss
@@ -0,0 +1,18 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$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: ds.$spacing-880 !default;
+$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..ad249a7b9388
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dateRangeBox/_colors.scss
@@ -0,0 +1,3 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$date-range-box-separator-content: ds.$color-content-subtle !default;
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..1d2544ebab26
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dateRangeBox/_index.scss
@@ -0,0 +1,109 @@
+@use "sass:math";
+@use "../textEditor/sizes" as textEditorSizes;
+@use "../dateBox/mixins" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "colors" as *;
+@use "../../base/dateRangeBox";
+@use "../../base/icon_fonts" as *;
+@use "../textEditor" as *;
+
+.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 * var(--dx-date-range-box-active-bar-margin-inline));
+        margin: 0 var(--dx-date-range-box-active-bar-margin-inline);
+      }
+    }
+  }
+
+  &.dx-editor-underlined,
+  &.dx-editor-filled {
+    &::before {
+      border-bottom-width: var(--dx-date-range-box-input-filled-border-block-end-width);
+      transition: none;
+    }
+
+    &.dx-state-hover {
+      &::after {
+        border-bottom-width: var(--dx-date-range-box-border-block-end-width-hovered);
+        transition: none;
+      }
+    }
+
+    &.dx-state-focused {
+      &.dx-invalid {
+        &::before {
+          border-bottom-width: var(--dx-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: var(--dx-date-range-box-custom-button-margin);
+        margin-inline-end: var(--dx-date-range-box-custom-button-margin);
+
+        &:first-child {
+          margin-inline-start: 0;
+        }
+
+        &:last-child {
+          margin-inline-end: var(--dx-date-range-box-custom-button-margin);
+        }
+      }
+
+      > .dx-dropdowneditor-button:last-child {
+        margin-inline-end: textEditorSizes.$text-editor-spin-button-margin-inline-end;
+      }
+
+      > .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: var(--dx-text-editor-invalid-badge-size);
+          }
+        }
+      }
+    }
+  }
+}
+
+.dx-daterangebox-separator {
+  padding-left: textEditorSizes.$text-editor-input-filled-padding-inline;
+  color: var(--dx-date-range-box-separator-content);
+
+  .dx-icon {
+    @include dx-icon-sizing($global-icon-size);
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dateRangeBox/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dateRangeBox/_public.scss
new file mode 100644
index 000000000000..9693ec0ba76b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dateRangeBox/_public.scss
@@ -0,0 +1,12 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-date-range-box-active-bar-margin-inline: #{$date-range-box-active-bar-margin-inline};
+  --dx-date-range-box-border-block-end-width-hovered: #{$date-range-box-border-block-end-width-hovered};
+  --dx-date-range-box-custom-button-margin: #{$date-range-box-custom-button-margin};
+  --dx-date-range-box-input-filled-border-block-end-width: #{$date-range-box-input-filled-border-block-end-width};
+  --dx-date-range-box-invalid-border-block-end-width: #{$date-range-box-invalid-border-block-end-width};
+  --dx-date-range-box-separator-content: #{$date-range-box-separator-content};
+}
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..8729ef852ec0
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dateRangeBox/_sizes.scss
@@ -0,0 +1,18 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$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..896e66264ea0
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dateView/_colors.scss
@@ -0,0 +1,9 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// Fade gradients over the surface — relative-color bridge (no gradient role in foundation).
+$date-view-roller-top-bg: 0deg, rgb(from #{ds.$color-bg} r g b / 0) 0%, rgb(from #{ds.$color-bg} r g b / 0.8) 60% !default;
+$date-view-roller-bottom-bg: 180deg, rgb(from #{ds.$color-bg} r g b / 0) 0%, rgb(from #{ds.$color-bg} r g b / 0.8) 60% !default;
+$date-view-content: ds.$color-content !default;
+$date-view-content-disabled: ds.$color-content-disabled !default;
+
+$date-view-item-content-selected: ds.$color-bg-primary !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..277e50eca1e4
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dateView/_index.scss
@@ -0,0 +1,143 @@
+@use "sass:math";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/mixins" as *;
+@use "../../base/dateView";
+@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: var(--dx-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: var(--dx-date-view-roller-padding);
+    display: block;
+  }
+
+  .dx-scrollable-container {
+    height: var(--dx-date-view-roller-height);
+  }
+
+  &.dx-dateviewroller-year {
+    min-width: var(--dx-date-view-roller-year-min-width);
+  }
+
+  &.dx-state-active {
+    .dx-button {
+      display: none;
+    }
+  }
+}
+
+.dx-dateviewroller-month {
+  min-width: var(--dx-date-view-roller-month-min-width);
+}
+
+.dx-dateviewroller-hours {
+  &::after {
+    content: ":";
+    font-size: var(--dx-date-view-hours-colon-font-size);
+    position: absolute;
+    inset-inline-end: -9%;
+    font-weight: bold;
+    top: 37%;
+    color: var(--dx-date-view-content);
+  }
+
+  .dx-dateview-item-selected-frame {
+    padding-left: 20%;
+  }
+}
+
+.dx-dateviewroller-minutes {
+  .dx-dateview-item-selected-frame {
+    width: 80%;
+  }
+}
+
+.dx-dateview-item {
+  height: var(--dx-date-view-roller-item-height);
+  line-height: var(--dx-date-view-roller-item-height);
+  text-align: center;
+  font-size: var(--dx-date-view-item-font-size);
+  color: var(--dx-date-view-content);
+}
+
+.dx-dateview-item-selected {
+  font-size: var(--dx-date-view-item-font-size-selected);
+  color: var(--dx-date-view-item-content-selected);
+}
+
+.dx-dateview-item-selected-frame {
+  position: absolute;
+  top: var(--dx-date-view-roller-padding);
+  width: 100%;
+
+  &::before,
+  &::after {
+    backface-visibility: hidden;
+    content: "";
+    display: block;
+    width: 100%;
+    position: absolute;
+    height: var(--dx-date-view-roller-padding);
+  }
+
+  &::before {
+    top: calc(-1 * var(--dx-date-view-roller-padding));
+
+    @include gradient-linear(var(--dx-date-view-roller-top-bg));
+  }
+
+  &::after {
+    top: var(--dx-date-view-roller-item-height);
+
+    @include gradient-linear(var(--dx-date-view-roller-bottom-bg));
+  }
+}
+
+.dx-device-tablet,
+.dx-device-phone {
+  .dx-dateview-rollers {
+    @include flex-container(row, nowrap);
+  }
+
+  .dx-dateviewroller-month {
+    min-width: var(--dx-date-view-roller-month-phone-min-width);
+  }
+
+  .dx-dateview-item {
+    font-size: var(--dx-date-view-item-phone-font-size);
+  }
+
+  .dx-dateview-item-selected {
+    font-size: var(--dx-date-view-item-phone-font-size-selected);
+  }
+}
+
+.dx-dateview.dx-state-disabled,
+.dx-state-disabled .dx-dateview {
+  .dx-dateview-item,
+  .dx-dateview-item-selected {
+    color: var(--dx-date-view-content-disabled);
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dateView/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dateView/_public.scss
new file mode 100644
index 000000000000..2473dcfec06c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dateView/_public.scss
@@ -0,0 +1,23 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-date-view-content: #{$date-view-content};
+  --dx-date-view-content-disabled: #{$date-view-content-disabled};
+  --dx-date-view-hours-colon-font-size: #{$date-view-hours-colon-font-size};
+  --dx-date-view-item-content-selected: #{$date-view-item-content-selected};
+  --dx-date-view-item-font-size: #{$date-view-item-font-size};
+  --dx-date-view-item-font-size-selected: #{$date-view-item-font-size-selected};
+  --dx-date-view-item-phone-font-size: #{$date-view-item-phone-font-size};
+  --dx-date-view-item-phone-font-size-selected: #{$date-view-item-phone-font-size-selected};
+  --dx-date-view-roller-bottom-bg: #{$date-view-roller-bottom-bg};
+  --dx-date-view-roller-height: #{$date-view-roller-height};
+  --dx-date-view-roller-item-height: #{$date-view-roller-item-height};
+  --dx-date-view-roller-min-width: #{$date-view-roller-min-width};
+  --dx-date-view-roller-month-min-width: #{$date-view-roller-month-min-width};
+  --dx-date-view-roller-month-phone-min-width: #{$date-view-roller-month-phone-min-width};
+  --dx-date-view-roller-padding: #{$date-view-roller-padding};
+  --dx-date-view-roller-top-bg: #{$date-view-roller-top-bg};
+  --dx-date-view-roller-year-min-width: #{$date-view-roller-year-min-width};
+}
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..cf42cadd670b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dateView/_sizes.scss
@@ -0,0 +1,21 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$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) !default;
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..2d3bd104d06e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/diagram/_colors.scss
@@ -0,0 +1,64 @@
+@use "../colors" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+/*
+ * 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-bg-primary` 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: ds.$color-bg-primary !default;
+$diagram-connection-border: ds.$color-bg-success !default;
+$diagram-geometry-mark-border: ds.$color-bg-danger !default;
+
+$diagram-border: ds.$color-border !default;
+$diagram-toolbar-border: ds.$color-border !default;
+$diagram-normal-format-bg-active: ds.$color-bg-alpha-active !default;
+$diagram-default-format-bg-active: ds.$color-bg-primary-active !default;
+$diagram-danger-format-bg-active: ds.$color-bg-danger-active !default;
+$diagram-success-format-bg-active: ds.$color-bg-success-active !default;
+$diagram-image-icon-base-content: ds.$color-content-subtle !default;
+
+$diagram-image-icon-muted-content: rgb(from #{ds.$color-content-subtle} r g b / 0.5) !default;
+$diagram-image-icon-accent-border: ds.$color-content-primary !default;
+$diagram-toolbox-shape-text-content: ds.$color-content-subtle !default;
+
+// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
+$diagram-bg: ds.$color-bg !default;
+$diagram-danger-icon: ds.$color-content-danger !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: null !default;
+
+/*
+ * The properties-panel toggle sits on a contained `default` button, whose fill is the same accent
+ * in both modes - so the button paints its own content with `content-static-dark`, which does not
+ * flip. The icon has to follow that, not `content-inverted`: inverted would turn the glyph
+ * near-black on dark while every other mark on the same button stayed white.
+ */
+$diagram-properties-panel-icon: #fff !default; // dx-data-uri-static: ds.$color-content-static-dark (mode-invariant)
+
+@if $mode == "light" {
+  $diagram-content: #161616 !default; // dx-data-uri-static: ds.$color-content
+}
+
+@if $mode == "dark" {
+  $diagram-content: #fff !default; // dx-data-uri-static: ds.$color-content
+}
+
+// Canvas = deeper neutral surface
+$diagram-canvas-bg: ds.$color-bg-canvas !default;
+$diagram-shadow: ds.$box-shadow-md !default;
+
+// Values hoisted from style-file literals (tokenized)
+$diagram-selection-mark-content: ds.$color-border-contrast !default;
+$diagram-selection-bg: rgb(from #{ds.$color-border-contrast} r g b / 0.02) !default;
+
+// Base-layer values injected with design tokens (wave B1)
+$diagram-popup-title-toolbar-bg: ds.$color-bg-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..e42c04b0113e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/diagram/_index.scss
@@ -0,0 +1,494 @@
+@use "sass:math";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/diagram" with (
+  $diagram-root-height: var(--dx-diagram-height),
+  $diagram-root-min-height: var(--dx-diagram-min-height),
+  $diagram-toolbar-wrapper-padding: var(--dx-diagram-toolbar-wrapper-padding),
+  $diagram-button-min-height: var(--dx-diagram-toolbox-input-button-min-height),
+  $diagram-popup-content-padding: var(--dx-diagram-popup-content-padding),
+  $diagram-colorview-palette-min-width: var(--dx-diagram-color-view-palette-min-width),
+  $diagram-colorview-hue-scale-cell-margin-left: var(--dx-diagram-color-view-hue-scale-cell-margin-inline-start),
+  $diagram-border-width: var(--dx-diagram-border-width),
+  $diagram-loading-indicator-width: var(--dx-diagram-loading-indicator-width),
+  $diagram-loading-indicator-height: var(--dx-diagram-loading-indicator-height),
+  $diagram-context-toolbox-target-width: var(--dx-diagram-context-toolbox-target-width),
+  $diagram-context-toolbox-target-height: var(--dx-diagram-context-toolbox-target-height),
+  $diagram-popup-title-toolbar-bg: var(--dx-diagram-popup-title-toolbar-bg),
+);
+@use "../../base/diagram/mixins" as *;
+
+.dx-diagram {
+  border-color: var(--dx-diagram-border);
+
+  // stylelint-disable selector-class-pattern
+  .dxdi-control .dxdi-canvas {
+    background-color: var(--dx-diagram-canvas-bg);
+
+    .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: var(--dx-diagram-connector-border);
+    }
+
+    .connector-side-mark,
+    .extension-line text {
+      fill: var(--dx-diagram-connector-border);
+    }
+
+    .container-target,
+    .connection-target,
+    .connection-mark:not(.selector),
+    .connection-point:not(.selector) {
+      stroke: var(--dx-diagram-connection-border);
+    }
+
+    .connection-mark:not(.selector),
+    .connection-point:not(.selector) {
+      &.active {
+        fill: var(--dx-diagram-connection-border);
+      }
+    }
+
+    .geometry-mark {
+      stroke: var(--dx-diagram-geometry-mark-border);
+    }
+
+    .dxdi-main .dxdi-image {
+      .dxdi-spinner {
+        path {
+          stroke: var(--dx-diagram-image-icon-accent-border);
+          stroke-opacity: 1;
+        }
+
+        ellipse {
+          stroke: var(--dx-diagram-image-icon-muted-content);
+        }
+      }
+
+      .dxdi-user .dxdi-background {
+        fill: var(--dx-diagram-image-icon-muted-content);
+      }
+
+      .dxdi-warning {
+        ellipse {
+          fill: var(--dx-diagram-danger-icon);
+        }
+      }
+    }
+  }
+
+  .dxdi-control:not(.focused) .dxdi-canvas {
+    .selection-mark,
+    .geometry-mark {
+      stroke: var(--dx-diagram-selection-mark-content);
+    }
+
+    .item-selection-rect,
+    .items-selection-rect {
+      fill: transparent;
+      stroke: var(--dx-diagram-selection-mark-content);
+    }
+
+    .items-selection-rect {
+      fill: var(--dx-diagram-selection-bg);
+    }
+
+    .item-multi-selection-rect {
+      fill: var(--dx-diagram-selection-bg);
+      stroke: var(--dx-diagram-selection-mark-content);
+    }
+
+    .connector-selection,
+    .connector-multi-selection {
+      stroke: var(--dx-diagram-selection-mark-content);
+    }
+
+    .connector-point-mark,
+    .connector-side-mark {
+      stroke: var(--dx-diagram-selection-mark-content);
+    }
+
+    .connector-side-mark {
+      fill: var(--dx-diagram-selection-mark-content);
+    }
+  }
+
+  .dxdi-text-input-container.connector-text .dxdi-text-input {
+    border-color: var(--dx-diagram-connector-border);
+  }
+
+  // stylelint-enable selector-class-pattern
+
+  .dx-diagram-toolbar-wrapper {
+    border-bottom: var(--dx-diagram-toolbar-wrapper-border-block-end);
+    border-bottom-color: var(--dx-diagram-toolbar-border);
+  }
+
+  &.dx-diagram-fullscreen {
+    background-color: var(--dx-diagram-bg);
+  }
+}
+
+.dx-diagram-toolbox-panel,
+.dx-diagram-properties-panel {
+  background: var(--dx-surface-overlay);
+}
+
+.dx-diagram-floating-toolbar-container {
+  background: var(--dx-surface-overlay);
+  box-shadow: var(--dx-diagram-shadow);
+  border-radius: var(--dx-diagram-floating-toolbar-container-border-radius);
+  padding: var(--dx-diagram-floating-toolbar-container-padding);
+
+  .dx-toolbar .dx-toolbar-items-container {
+    height: var(--dx-diagram-floating-toolbar-items-height);
+
+    .dx-texteditor {
+      .dx-texteditor-input,
+      .dx-placeholder::before {
+        color: inherit;
+        padding: var(--dx-diagram-floating-toolbar-editor-padding);
+      }
+
+      .dx-button {
+        width: auto;
+        height: auto;
+        min-width: var(--dx-diagram-button-min-width);
+        min-height: var(--dx-diagram-button-min-height);
+        margin: var(--dx-diagram-button-margin);
+
+        .dx-button-content {
+          padding: var(--dx-diagram-floating-toolbar-editor-button-padding);
+        }
+      }
+    }
+  }
+
+  &.dx-diagram-properties-panel-toolbar-container {
+    &,
+    .dx-toolbar,
+    .dx-toolbar-items-container,
+    .dx-toolbar-item,
+    .dx-button {
+      width: var(--dx-diagram-floating-toolbar-button-size);
+      height: var(--dx-diagram-floating-toolbar-button-size);
+
+      .dx-button-content {
+        padding-top: 0;
+        padding-bottom: 0;
+        line-height: var(--dx-diagram-floating-toolbar-button-size);
+      }
+    }
+  }
+
+  .dx-toolbar-item {
+    padding: var(--dx-diagram-item-padding);
+  }
+}
+
+.dx-diagram-toolbox-popup {
+  & > .dx-overlay-content {
+    box-shadow: var(--dx-diagram-shadow);
+  }
+
+  .dx-popup-title {
+    margin-bottom: 0;
+
+    &.dx-toolbar {
+      font-size: var(--dx-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: var(--dx-diagram-toolbox-width);
+    }
+  }
+
+  .dx-diagram-toolbox-input-container {
+    border-bottom: var(--dx-diagram-toolbox-input-container-border-block-end);
+  }
+
+  .dx-diagram-toolbox-input {
+    margin: var(--dx-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: var(--dx-diagram-toolbox-input-image-padding);
+      }
+
+      .dx-icon {
+        font-size: var(--dx-diagram-toolbox-input-image-size);
+      }
+    }
+  }
+
+  .dx-popup-title .dx-closebutton {
+    width: $diagram-toolbox-title-size;
+    height: $diagram-toolbox-title-size;
+    margin: var(--dx-diagram-closebutton-margin);
+  }
+
+  .dx-popup-title .dx-closebutton .dx-icon {
+    width: var(--dx-diagram-icon-width);
+    height: var(--dx-diagram-icon-height);
+    padding: var(--dx-diagram-icon-padding);
+    font-size: var(--dx-diagram-popup-close-icon-font-size);
+    line-height: var(--dx-diagram-popup-close-icon-line-height);
+    background-position: 2px 2px; // dx-fixed-size: 2px sprite offset, tied to the data-uri artwork
+    background-size: 12px 12px; // dx-fixed-size: 12px sprite size, tied to the data-uri artwork
+  }
+
+  &.dx-diagram-mobile-popup {
+    .dx-popup-content {
+      padding-top: var(--dx-diagram-toolbox-mobile-padding);
+
+      .dx-diagram-toolbox-input-container {
+        border-top: var(--dx-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: var(--dx-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: var(--dx-diagram-accordion-item-title-min-height);
+    }
+
+    .dx-item-content.dx-accordion-item-body {
+      padding: var(--dx-diagram-toolbox-accordion-v-padding) var(--dx-diagram-toolbox-h-padding);
+    }
+  }
+
+  .dxdi-toolbox .dxdi-canvas .dxdi-shape-text { // stylelint-disable-line selector-class-pattern
+    color: var(--dx-diagram-toolbox-shape-text-content);
+  }
+}
+
+.dx-diagram-properties-popup {
+  .dx-multiview-item,
+  &.dx-diagram-properties-popup-notabs .dx-popup-content {
+    padding: var(--dx-diagram-properties-panel-padding);
+  }
+
+  .dx-diagram-properties-panel-group-title {
+    text-transform: uppercase;
+    padding: var(--dx-diagram-properties-panel-spacing);
+  }
+
+  .dx-diagram-properties-panel-group-toolbar {
+    padding: 0 var(--dx-diagram-properties-panel-spacing) var(--dx-diagram-properties-panel-spacing);
+
+    .dx-toolbar-item {
+      margin-bottom: calc(var(--dx-diagram-properties-panel-spacing) / 2);
+
+      .dx-button {
+        height: auto;
+      }
+
+      &.dx-diagram-lg-icon-item .dx-diagram-i {
+        background-size: var(--dx-diagram-properties-layout-icon-size) var(--dx-diagram-properties-layout-icon-size);
+        width: var(--dx-diagram-properties-layout-icon-size);
+        height: var(--dx-diagram-properties-layout-icon-size);
+      }
+    }
+  }
+
+  .dx-diagram-properties-panel-group-toolbar:first-child {
+    padding-top: var(--dx-diagram-properties-panel-spacing);
+  }
+
+  &.dx-diagram-mobile-popup {
+    .dx-popup-title {
+      padding: var(--dx-diagram-title-padding);
+    }
+
+    .dx-tabpanel {
+      .dx-tab-selected::before {
+        top: 0;
+        bottom: initial;
+      }
+    }
+  }
+}
+
+.dx-diagram-toolbar {
+  .dx-diagram-image-dropdown-item,
+  .dx-diagram-color-edit-item {
+    .dx-dropdowneditor-field-before-template-wrapper {
+      .dx-diagram-i,
+      .dx-icon {
+        margin-left: var(--dx-diagram-icon-margin-inline-start);
+        margin-right: var(--dx-diagram-icon-margin-inline-end);
+      }
+    }
+  }
+
+  .dx-format-active:not(.dx-color-format):not(.dx-background-format) {
+    background-color: var(--dx-diagram-normal-format-bg-active);
+
+    &.dx-button-success {
+      background-color: var(--dx-diagram-success-format-bg-active);
+    }
+
+    &.dx-button-default {
+      background-color: var(--dx-diagram-default-format-bg-active);
+    }
+
+    &.dx-button-danger {
+      background-color: var(--dx-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: var(--dx-diagram-toolbar-border);
+  }
+
+  .dx-diagram-toolbar-menu-separator {
+    border-top-color: var(--dx-diagram-toolbar-border);
+  }
+
+  .dx-diagram-toolbar-text {
+    padding: var(--dx-diagram-toolbar-text-padding-block-start) 0 var(--dx-diagram-toolbar-text-padding-block-end) var(--dx-diagram-toolbar-text-padding-inline-start);
+  }
+
+  .dx-diagram-lg-edit-item .dx-texteditor {
+    width: var(--dx-diagram-large-editor-width);
+  }
+
+  .dx-diagram-md-edit-item .dx-texteditor {
+    width: var(--dx-diagram-medium-editor-width);
+  }
+
+  .dx-diagram-sm-edit-item .dx-texteditor {
+    width: var(--dx-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-icon {
+        font-size: $diagram-toolbar-icon-size;
+        color: var(--dx-global-content);
+      }
+    }
+  }
+}
+
+/*
+ * The toolbar's overflow menu is a portal: its popup is mounted in the overlay container, under no
+ * diagram root, so the diagram tier does not reach it and a var() read would leave the margin at 0.
+ */
+.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-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: var(--dx-diagram-item-text-padding-inline-start);
+  }
+}
+
+.dx-diagram-touchbar {
+  .dx-menu-item .dx-menu-item-content {
+    padding: var(--dx-diagram-touchbar-item-padding);
+  }
+
+  .dx-menu-separator {
+    width: var(--dx-diagram-separator-width);
+    height: calc(#{$diagram-toolbar-icon-size} + var(--dx-diagram-touchbar-item-padding) + var(--dx-diagram-touchbar-item-padding) + 2px); // dx-px-nudge: +2px over the icon and the two paddings
+    margin: 0;
+  }
+}
+
+@include diagram-action-icons-mixin($diagram-content, $diagram-content, $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, $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, $diagram-toolbar-icon-size, $diagram-toolbar-icon-size);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/diagram/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/diagram/_public.scss
new file mode 100644
index 000000000000..08e8207db290
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/diagram/_public.scss
@@ -0,0 +1,82 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-diagram-accordion-item-border-block-end: #{$diagram-accordion-item-border-block-end};
+  --dx-diagram-accordion-item-title-min-height: #{$diagram-accordion-item-title-min-height};
+  --dx-diagram-bg: #{$diagram-bg};
+  --dx-diagram-border: #{$diagram-border};
+  --dx-diagram-border-width: #{$diagram-border-width};
+  --dx-diagram-button-margin: #{$diagram-button-margin};
+  --dx-diagram-button-min-height: #{$diagram-button-min-height};
+  --dx-diagram-button-min-width: #{$diagram-button-min-width};
+  --dx-diagram-canvas-bg: #{$diagram-canvas-bg};
+  --dx-diagram-closebutton-margin: #{$diagram-closebutton-margin};
+  --dx-diagram-color-view-hue-scale-cell-margin-inline-start: #{$diagram-color-view-hue-scale-cell-margin-inline-start};
+  --dx-diagram-color-view-palette-min-width: #{$diagram-color-view-palette-min-width};
+  --dx-diagram-connection-border: #{$diagram-connection-border};
+  --dx-diagram-connector-border: #{$diagram-connector-border};
+  --dx-diagram-context-toolbox-target-height: #{$diagram-context-toolbox-target-height};
+  --dx-diagram-context-toolbox-target-width: #{$diagram-context-toolbox-target-width};
+  --dx-diagram-danger-format-bg-active: #{$diagram-danger-format-bg-active};
+  --dx-diagram-danger-icon: #{$diagram-danger-icon};
+  --dx-diagram-default-format-bg-active: #{$diagram-default-format-bg-active};
+  --dx-diagram-floating-toolbar-button-size: #{$diagram-floating-toolbar-button-size};
+  --dx-diagram-floating-toolbar-container-border-radius: #{$diagram-floating-toolbar-container-border-radius};
+  --dx-diagram-floating-toolbar-container-padding: #{$diagram-floating-toolbar-container-padding};
+  --dx-diagram-floating-toolbar-editor-button-padding: #{$diagram-floating-toolbar-editor-button-padding};
+  --dx-diagram-floating-toolbar-editor-padding: #{$diagram-floating-toolbar-editor-padding};
+  --dx-diagram-floating-toolbar-items-height: #{$diagram-floating-toolbar-items-height};
+  --dx-diagram-geometry-mark-border: #{$diagram-geometry-mark-border};
+  --dx-diagram-height: #{$diagram-height};
+  --dx-diagram-icon-height: #{$diagram-icon-height};
+  --dx-diagram-icon-margin-inline-end: #{$diagram-icon-margin-inline-end};
+  --dx-diagram-icon-margin-inline-start: #{$diagram-icon-margin-inline-start};
+  --dx-diagram-icon-padding: #{$diagram-icon-padding};
+  --dx-diagram-icon-width: #{$diagram-icon-width};
+  --dx-diagram-image-icon-accent-border: #{$diagram-image-icon-accent-border};
+  --dx-diagram-image-icon-base-content: #{$diagram-image-icon-base-content};
+  --dx-diagram-image-icon-muted-content: #{$diagram-image-icon-muted-content};
+  --dx-diagram-item-padding: #{$diagram-item-padding};
+  --dx-diagram-item-text-padding-inline-start: #{$diagram-item-text-padding-inline-start};
+  --dx-diagram-large-editor-width: #{$diagram-large-editor-width};
+  --dx-diagram-loading-indicator-height: #{$diagram-loading-indicator-height};
+  --dx-diagram-loading-indicator-width: #{$diagram-loading-indicator-width};
+  --dx-diagram-medium-editor-width: #{$diagram-medium-editor-width};
+  --dx-diagram-min-height: #{$diagram-min-height};
+  --dx-diagram-normal-format-bg-active: #{$diagram-normal-format-bg-active};
+  --dx-diagram-popup-close-icon-font-size: #{$diagram-popup-close-icon-font-size};
+  --dx-diagram-popup-close-icon-line-height: #{$diagram-popup-close-icon-line-height};
+  --dx-diagram-popup-content-padding: #{$diagram-popup-content-padding};
+  --dx-diagram-popup-title-toolbar-bg: #{$diagram-popup-title-toolbar-bg};
+  --dx-diagram-popup-title-toolbar-font-size: #{$diagram-popup-title-toolbar-font-size};
+  --dx-diagram-properties-layout-icon-size: #{$diagram-properties-layout-icon-size};
+  --dx-diagram-properties-panel-padding: #{$diagram-properties-panel-padding};
+  --dx-diagram-properties-panel-spacing: #{$diagram-properties-panel-spacing};
+  --dx-diagram-selection-bg: #{$diagram-selection-bg};
+  --dx-diagram-selection-mark-content: #{$diagram-selection-mark-content};
+  --dx-diagram-separator-width: #{$diagram-separator-width};
+  --dx-diagram-shadow: #{$diagram-shadow};
+  --dx-diagram-small-editor-width: #{$diagram-small-editor-width};
+  --dx-diagram-success-format-bg-active: #{$diagram-success-format-bg-active};
+  --dx-diagram-title-padding: #{$diagram-title-padding};
+  --dx-diagram-toolbar-border: #{$diagram-toolbar-border};
+  --dx-diagram-toolbar-text-padding-block-end: #{$diagram-toolbar-text-padding-block-end};
+  --dx-diagram-toolbar-text-padding-block-start: #{$diagram-toolbar-text-padding-block-start};
+  --dx-diagram-toolbar-text-padding-inline-start: #{$diagram-toolbar-text-padding-inline-start};
+  --dx-diagram-toolbar-wrapper-border-block-end: #{$diagram-toolbar-wrapper-border-block-end};
+  --dx-diagram-toolbar-wrapper-padding: #{$diagram-toolbar-wrapper-padding};
+  --dx-diagram-toolbox-accordion-v-padding: #{$diagram-toolbox-accordion-v-padding};
+  --dx-diagram-toolbox-h-padding: #{$diagram-toolbox-h-padding};
+  --dx-diagram-toolbox-input-button-min-height: #{$diagram-toolbox-input-button-min-height};
+  --dx-diagram-toolbox-input-container-border-block-end: #{$diagram-toolbox-input-container-border-block-end};
+  --dx-diagram-toolbox-input-container-border-block-start: #{$diagram-toolbox-input-container-border-block-start};
+  --dx-diagram-toolbox-input-image-padding: #{$diagram-toolbox-input-image-padding};
+  --dx-diagram-toolbox-input-image-size: #{$diagram-toolbox-input-image-size};
+  --dx-diagram-toolbox-input-margin: #{$diagram-toolbox-input-margin};
+  --dx-diagram-toolbox-mobile-padding: #{$diagram-toolbox-mobile-padding};
+  --dx-diagram-toolbox-shape-text-content: #{$diagram-toolbox-shape-text-content};
+  --dx-diagram-toolbox-width: #{$diagram-toolbox-width};
+  --dx-diagram-touchbar-item-padding: #{$diagram-touchbar-item-padding};
+}
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..d486f79056bb
--- /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;
+
+/*
+ * 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-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: ds.$spacing-1600 !default;
+  $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: ds.$spacing-720 !default;
+
+  $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: ds.$spacing-1600 !default;
+  $diagram-large-editor-width: 280px !default; // dx-offscale: 280px
+}
+
+@else if $size == "compact" {
+  $diagram-toolbox-width: ds.$spacing-1200 !default;
+  $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: ds.$spacing-600 !default;
+
+  $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.$spacing-120 !default;
+$diagram-popup-close-icon-line-height: ds.$spacing-120 !default;
+$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;
+$diagram-toolbox-input-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 !default;
+
+// Base-layer sizing injected with design tokens (wave B11)
+$diagram-border-width: ds.$border-width-10 !default;
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..32838e8bd182
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/drawer/_colors.scss
@@ -0,0 +1,3 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$drawer-backdrop: ds.$color-bg-backdrop !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..369832f0bfb8
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/drawer/_index.scss
@@ -0,0 +1,7 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/drawer";
+
+.dx-drawer-shader {
+  background-color: var(--dx-drawer-backdrop);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/drawer/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/drawer/_public.scss
new file mode 100644
index 000000000000..3beed96607f1
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/drawer/_public.scss
@@ -0,0 +1,6 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+
+@mixin publish {
+  --dx-drawer-backdrop: #{$drawer-backdrop};
+}
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..e69de29bb2d1
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..e69de29bb2d1
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..221c12641eb6
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownBox/_index.scss
@@ -0,0 +1,3 @@
+@use "colors" as *;
+@use "sizes" as *;
+@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..e69de29bb2d1
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..e69de29bb2d1
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..cae4dc13cb28
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownButton/_index.scss
@@ -0,0 +1,35 @@
+@use "colors" 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 *;
+@include dx-dropdownbutton(
+  var(--dx-drop-down-button-toggle-spindown-icon-size),
+  var(--dx-drop-down-button-action-padding-inline),
+  $dropdownbutton-icon-right-margin-inline-start: var(--dx-drop-down-button-icon-right-margin-inline-start),
+);
+
+.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-dropdownbutton-action {
+  &.dx-button-has-icon,
+  &.dx-button-has-text {
+    .dx-icon-spindown.dx-icon-right {
+      width: var(--dx-drop-down-button-action-spindown-icon-size);
+      height: var(--dx-drop-down-button-action-spindown-icon-size);
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownButton/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownButton/_public.scss
new file mode 100644
index 000000000000..da9d377952d6
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownButton/_public.scss
@@ -0,0 +1,9 @@
+// GENERATED by tools/naming/publish.mjs
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-drop-down-button-action-padding-inline: #{$drop-down-button-action-padding-inline};
+  --dx-drop-down-button-action-spindown-icon-size: #{$drop-down-button-action-spindown-icon-size};
+  --dx-drop-down-button-icon-right-margin-inline-start: #{$drop-down-button-icon-right-margin-inline-start};
+  --dx-drop-down-button-toggle-spindown-icon-size: #{$drop-down-button-toggle-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..0ec9bc3802ec
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownButton/_sizes.scss
@@ -0,0 +1,21 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$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 !default;
+  $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 !default;
+  $drop-down-button-action-spindown-icon-size: ds.$spacing-120 !default;
+}
+
+// Base-layer sizing injected with design tokens (wave B12)
+$drop-down-button-icon-right-margin-inline-start: ds.$spacing-40 !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..65c437dd9f25
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownEditor/_colors.scss
@@ -0,0 +1,7 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$drop-down-editor-icon: ds.$color-content-subtle !default;
+
+$drop-down-editor-icon-active: ds.$color-content !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..07b008f4aa9c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownEditor/_index.scss
@@ -0,0 +1,112 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../textEditor/sizes" as textEditorSizes;
+@use "../../base/icon_fonts" as *;
+@use "../../base/dropDownEditor" with (
+  $dropdowneditor-icon-idle-opacity: false,
+);
+@use "../../base/dropDownEditor/mixins" as *;
+
+@mixin dx-dropdowneditor-button-icon() {
+  width: var(--dx-drop-down-editor-button-size);
+  height: 100%;
+
+  @include dx-icon-font-centered-sizing(var(--dx-drop-down-editor-button-size));
+}
+
+.dx-dropdowneditor-button {
+  width: var(--dx-drop-down-editor-button-size);
+  min-width: var(--dx-drop-down-editor-button-size);
+
+}
+
+.dx-dropdowneditor-icon {
+  color: var(--dx-drop-down-editor-icon);
+
+  @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(
+    var(--dx-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: var(--dx-drop-down-editor-icon-active);
+
+    @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: var(--dx-drop-down-editor-invalid-badge-inset-inline-end);
+    }
+  }
+
+  &.dx-show-clear-button:not(.dx-texteditor-empty) {
+    .dx-texteditor-buttons-container {
+      &::after {
+        inset-inline-end: var(--dx-drop-down-editor-invalid-badge-with-clear-inset-inline-end);
+      }
+    }
+  }
+}
+
+.dx-dropdowneditor-overlay {
+  &.dx-popup-wrapper {
+    .dx-overlay-content {
+      box-shadow: var(--dx-global-dropdown-box-shadow);
+      overflow: hidden;
+    }
+  }
+
+  .dx-list-group-header,
+  .dx-list-item-content,
+  .dx-list-select-all-label {
+    font-size: var(--dx-drop-down-editor-list-font-size);
+    line-height: var(--dx-drop-down-editor-list-line-height);
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownEditor/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownEditor/_public.scss
new file mode 100644
index 000000000000..56af0ec9f9fb
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownEditor/_public.scss
@@ -0,0 +1,14 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-drop-down-editor-button-size: #{$drop-down-editor-button-size};
+  --dx-drop-down-editor-icon: #{$drop-down-editor-icon};
+  --dx-drop-down-editor-icon-active: #{$drop-down-editor-icon-active};
+  --dx-drop-down-editor-invalid-badge-inset-inline-end: #{$drop-down-editor-invalid-badge-inset-inline-end};
+  --dx-drop-down-editor-invalid-badge-size: #{$drop-down-editor-invalid-badge-size};
+  --dx-drop-down-editor-invalid-badge-with-clear-inset-inline-end: #{$drop-down-editor-invalid-badge-with-clear-inset-inline-end};
+  --dx-drop-down-editor-list-font-size: #{$drop-down-editor-list-font-size};
+  --dx-drop-down-editor-list-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..d5d325118290
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownEditor/_sizes.scss
@@ -0,0 +1,27 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+@use "../common/sizes" as *;
+
+// Not a colour: an opacity / a composite box-shadow belongs here (NAMING.md O7)
+
+$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; // dx-foreign-scale: 13px, the font-size scale has no such step
+  $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 !default;
+$drop-down-editor-invalid-badge-inset-inline-end: calc(#{$drop-down-editor-button-size} + #{$invalid-badge-offset}) !default;
+$drop-down-editor-invalid-badge-with-clear-inset-inline-end: calc(#{$drop-down-editor-button-size} * 2 + #{$invalid-badge-offset}) !default;
+$drop-down-editor-invalid-badge-size: calc(#{$invalid-badge-size} + #{$invalid-badge-padding-inline}) !default;
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..e69de29bb2d1
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..411941e7cea0
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownList/_index.scss
@@ -0,0 +1,11 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../common/mixins" as *;
+@use "../../base/dropDownList" with (
+  $dropdownlist-list-min-height: var(--dx-drop-down-list-min-height),
+);
+@use "../dropDownEditor";
+
+.dx-dropdownlist-popup-wrapper {
+  @include dx-dropdownlist-list-appearance();
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownList/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownList/_public.scss
new file mode 100644
index 000000000000..60a7bc1e371f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownList/_public.scss
@@ -0,0 +1,6 @@
+// GENERATED by tools/naming/publish.mjs
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-drop-down-list-min-height: #{$drop-down-list-min-height};
+}
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..30244b8bd6c6
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownList/_sizes.scss
@@ -0,0 +1,4 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// Base-layer sizing injected with design tokens (wave B2)
+$drop-down-list-min-height: ds.$spacing-360 !default;
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..e69de29bb2d1
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..0e3adf2c7e8e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownMenu/_index.scss
@@ -0,0 +1,28 @@
+@use "sizes" as *;
+@use "../../base/dropDownMenu/mixins" as *;
+@use "../../base/dropDownMenu" with (
+  $dropdownmenu-list-min-width: var(--dx-drop-down-menu-list-min-width),
+  $dropdownmenu-list-border-radius: var(--dx-drop-down-menu-list-border-radius),
+  $dropdownmenu-popup-content-padding: var(--dx-drop-down-menu-popup-content-padding),
+);
+
+.dx-dropdownmenu-popup-wrapper {
+  .dx-toolbar-menu-section {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--dx-drop-down-menu-section-row-gap);
+    margin-inline: var(--dx-drop-down-menu-section-margin-inline);
+  }
+
+  .dx-overlay-content {
+    box-shadow: var(--dx-global-dropdown-box-shadow);
+  }
+}
+
+@include dx-dropdownmenu-focus-outline(
+  var(--dx-focus-rect-outline),
+  var(--dx-focus-rect-border-radius),
+  var(--dx-drop-down-menu-section-margin-inline),
+  $outline-width: var(--dx-focus-rect-outline-width),
+  $outline-offset: var(--dx-focus-rect-outline-offset),
+);
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownMenu/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownMenu/_public.scss
new file mode 100644
index 000000000000..7923926f3071
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownMenu/_public.scss
@@ -0,0 +1,10 @@
+// GENERATED by tools/naming/publish.mjs
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-drop-down-menu-list-border-radius: #{$drop-down-menu-list-border-radius};
+  --dx-drop-down-menu-list-min-width: #{$drop-down-menu-list-min-width};
+  --dx-drop-down-menu-popup-content-padding: #{$drop-down-menu-popup-content-padding};
+  --dx-drop-down-menu-section-margin-inline: #{$drop-down-menu-section-margin-inline};
+  --dx-drop-down-menu-section-row-gap: #{$drop-down-menu-section-row-gap};
+}
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..7db4773bb574
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownMenu/_sizes.scss
@@ -0,0 +1,9 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$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..b26e80e24bec
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/fieldset/_colors.scss
@@ -0,0 +1,6 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$fieldset-field-label-content: ds.$color-content !default;
+$fieldset-field-value-invalid-content: ds.$color-content-danger !default;
+
+$fieldset-field-label-content-disabled: ds.$color-content-disabled !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..fc2b3db6c423
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/fieldset/_index.scss
@@ -0,0 +1,149 @@
+@use "sass:math";
+@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: var(--dx-fieldset-margin-block-end),
+);
+
+@mixin dx-fieldset-styling() {
+  .dx-field {
+    @include dx-base-typography();
+  }
+
+  .dx-field-label {
+    color: var(--dx-fieldset-field-label-content);
+    font-size: formSizes.$form-label-font-size;
+    cursor: default;
+
+    i {
+      font-style: normal;
+    }
+  }
+
+  .dx-field-value {
+    &.dx-attention {
+      color: var(--dx-fieldset-field-value-invalid-content);
+      padding-left: var(--dx-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((var(--dx-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: var(--dx-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, var(--dx-fieldset-radio-group-min-height));
+
+    &.dx-attention {
+      padding: var(--dx-fieldset-field-value-top-padding) var(--dx-fieldset-field-value-padding-inline) var(--dx-fieldset-field-value-bottom-padding);
+      position: relative;
+      padding-left: var(--dx-fieldset-attention-icon-offset);
+
+      &::before {
+        left: 0;
+      }
+    }
+  }
+
+  .dx-field-value-static {
+    padding: var(--dx-fieldset-field-value-top-padding) var(--dx-fieldset-field-value-padding-inline) var(--dx-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(
+  var(--dx-fieldset-margin-block),
+  var(--dx-fieldset-margin-inline),
+  var(--dx-fieldset-header-margin-block),
+  var(--dx-fieldset-field-margin-block)
+);
+
+.dx-state-disabled .dx-field,
+.dx-state-disabled .dx-field-label,
+.dx-state-disabled .dx-field-value-static {
+  color: var(--dx-fieldset-field-label-content-disabled);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/fieldset/_public-links.scss b/packages/devextreme-scss/scss/widgets/fluent-next/fieldset/_public-links.scss
new file mode 100644
index 000000000000..25e864d42671
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/fieldset/_public-links.scss
@@ -0,0 +1,3 @@
+@mixin publish {
+  --dx-fieldset-field-value-padding-inline: var(--dx-fieldset-value-padding-inline);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/fieldset/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/fieldset/_public.scss
new file mode 100644
index 000000000000..c8861c5cbe4d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/fieldset/_public.scss
@@ -0,0 +1,24 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+@use "public-links" as links;
+
+@mixin publish {
+  --dx-fieldset-attention-icon-offset: #{$fieldset-attention-icon-offset};
+  --dx-fieldset-field-label-content: #{$fieldset-field-label-content};
+  --dx-fieldset-field-label-content-disabled: #{$fieldset-field-label-content-disabled};
+  --dx-fieldset-field-label-value-spacing: #{$fieldset-field-label-value-spacing};
+  --dx-fieldset-field-margin-block: #{$fieldset-field-margin-block};
+  --dx-fieldset-field-min-height: #{$fieldset-field-min-height};
+  --dx-fieldset-field-value-bottom-padding: #{$fieldset-field-value-bottom-padding};
+  --dx-fieldset-field-value-invalid-content: #{$fieldset-field-value-invalid-content};
+  --dx-fieldset-field-value-top-padding: #{$fieldset-field-value-top-padding};
+  --dx-fieldset-header-margin-block: #{$fieldset-header-margin-block};
+  --dx-fieldset-margin-block: #{$fieldset-margin-block};
+  --dx-fieldset-margin-block-end: #{$fieldset-margin-block-end};
+  --dx-fieldset-margin-inline: #{$fieldset-margin-inline};
+  --dx-fieldset-radio-group-min-height: #{$fieldset-radio-group-min-height};
+  --dx-fieldset-value-padding-inline: #{$fieldset-value-padding-inline};
+
+  @include links.publish();
+}
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..686d424e5a16
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/fieldset/_sizes.scss
@@ -0,0 +1,45 @@
+@use "../sizes" as *;
+@use "../common/sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// 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-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..8bf06efbd806
--- /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;
+
+$file-manager-border: ds.$color-border !default;
+$file-manager-file-toolbar-bg: ds.$color-bg-canvas !default;
+$file-manager-editor-bg-active: rgb(from #{ds.$color-content} r g b / 0.1) !default;
+$file-manager-dirs-tree-item-content-focused: ds.$color-content !default;
+$file-manager-breadcrumbs-item-bg-focused: ds.$color-bg-active !default;
+$file-manager-breadcrumbs-item-content-focused: ds.$color-content !default;
+$file-manager-custom-thumbnail-content: ds.$color-content-disabled !default;
+
+$file-manager-content-disabled: ds.$color-content-disabled !default;
+$file-manager-file-item-select-content: ds.$color-content-inverted !default;
+$file-manager-file-item-select-bg: rgb(from #{ds.$color-bg-primary} r g b / 0.8) !default;
+$file-manager-file-item-select-content-focused: ds.$color-content-inverted !default;
+$file-manager-file-item-select-bg-focused: rgb(from #{ds.$color-bg-primary} r g b / 0.7) !default;
+$file-manager-file-item-bg-hovered: ds.$color-bg-hovered !default;
+$file-manager-file-item-border-focused: ds.$color-border-primary !default;
+$file-manager-item-content-focused: ds.$color-content-inverted !default;
+$file-manager-dirs-tree-item-bg-focused: ds.$color-bg-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: #107c10 !default; // dx-data-uri-static: ds.$color-bg-success (mode-invariant)
+$file-manager-icon-danger-content: #c50f1f !default; // dx-data-uri-static: ds.$color-bg-danger (mode-invariant)
+$file-manager-icon: null !default;
+$file-manager-icon-inverted-content: null !default;
+
+@if $mode == "light" {
+  $file-manager-icon: #161616 !default; // dx-data-uri-static: ds.$color-content
+  $file-manager-icon-inverted-content: #fff !default; // dx-data-uri-static: ds.$color-content-inverted
+}
+
+@if $mode == "dark" {
+  $file-manager-icon: #fff !default; // dx-data-uri-static: ds.$color-content
+  $file-manager-icon-inverted-content: #161616 !default; // dx-data-uri-static: ds.$color-content-inverted
+}
+
+// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
+$file-manager-drop-zone-placeholder-border: ds.$color-border-primary !default;
+$file-manager-bg: ds.$color-bg !default;
+$file-manager-danger-bg: ds.$color-bg-danger !default;
+$file-manager-inverted-content: ds.$color-content-static-dark !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..1117eae29286
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/fileManager/_index.scss
@@ -0,0 +1,344 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/fileManager" with (
+  $filemanager-root-height: var(--dx-file-manager-height),
+  $filemanager-splitter-wrapper-right: var(--dx-file-manager-splitter-wrapper-inset-inline-end),
+  $filemanager-root-border: var(--dx-file-manager-border-width) solid,
+  $filemanager-overlay-content-min-width: var(--dx-file-manager-overlay-content-min-width),
+  $filemanager-overlay-content-max-width: var(--dx-file-manager-overlay-content-max-width),
+  $filemanager-popup-content-padding: var(--dx-file-manager-popup-content-padding),
+  $filemanager-progress-box-padding: var(--dx-file-manager-progress-box-padding),
+  $filemanager-notification-common-padding-bottom: var(--dx-file-manager-notification-padding-block-end),
+  $filemanager-notification-common-border-bottom-width: var(--dx-file-manager-notification-border-block-end-width),
+  $filemanager-progress-panel-border-left-width: var(--dx-file-manager-progress-panel-border-inline-start-width),
+  $filemanager-progress-panel-width: var(--dx-file-manager-progress-panel-width),
+  $filemanager-progress-panel-container-padding: var(--dx-file-manager-progress-panel-container-padding),
+  $filemanager-progress-panel-title-padding: var(--dx-file-manager-progress-panel-title-padding),
+  $filemanager-progress-panel-separator-height: var(--dx-file-manager-progress-panel-separator-height),
+  $filemanager-i-cancel-width: var(--dx-file-manager-i-cancel-width),
+  $filemanager-i-cancel-height: var(--dx-file-manager-i-cancel-height),
+  $filemanager-progress-box-margin-bottom: var(--dx-file-manager-progress-box-margin-block-end),
+  $filemanager-progress-box-border-radius: var(--dx-file-manager-progress-box-border-radius),
+  $filemanager-progress-panel-box-padding: var(--dx-file-manager-progress-panel-box-padding),
+  $filemanager-progress-box-without-close-button-padding-right: var(--dx-file-manager-progress-box-without-close-button-padding-inline-end),
+  $filemanager-progress-box-image-margin-right: var(--dx-file-manager-progress-box-image-margin-inline-end),
+  $filemanager-progress-box-common-padding: var(--dx-file-manager-progress-box-content-padding),
+  $filemanager-progress-box-close-button-margin-top: var(--dx-file-manager-progress-box-close-button-margin-block-start),
+  $filemanager-progress-box-close-button-margin-left: var(--dx-file-manager-progress-box-close-button-margin-inline-start),
+  $filemanager-progress-box-error-padding: var(--dx-file-manager-progress-box-error-padding),
+  $filemanager-progress-box-error-max-height: var(--dx-file-manager-progress-box-error-max-height),
+  $filemanager-toolbar-separator-item-width: var(--dx-file-manager-toolbar-separator-item-width),
+  $filemanager-toolbar-separator-item-margin-right: var(--dx-file-manager-toolbar-separator-item-margin-inline-end),
+  $filemanager-container-border-top: var(--dx-file-manager-container-border-block-start),
+  $filemanager-dirs-panel-padding: var(--dx-file-manager-dirs-panel-padding),
+  $filemanager-drawer-panel-content-initial-min-width: var(--dx-file-manager-drawer-panel-content-initial-min-width),
+  $filemanager-drawer-panel-content-initial-max-width: var(--dx-file-manager-drawer-panel-content-initial-max-width),
+  $filemanager-breadcrumbs-padding: var(--dx-file-manager-breadcrumbs-padding),
+  $filemanager-breadcrumbs-border-bottom: var(--dx-file-manager-breadcrumbs-border-block-end),
+  $filemanager-menu-item-content-padding-left: var(--dx-file-manager-menu-item-content-padding-inline-start),
+  $filemanager-menu-item-content-padding-right: var(--dx-file-manager-menu-item-content-padding-inline-end),
+  $filemanager-menu-item-content-margin: var(--dx-file-manager-menu-item-content-margin),
+  $filemanager-breadcrumbs-path-separator-padding-left: var(--dx-file-manager-breadcrumbs-path-separator-padding-inline-start),
+  $filemanager-breadcrumbs-path-separator-padding-right: var(--dx-file-manager-breadcrumbs-path-separator-padding-inline-end),
+  $filemanager-thumbnails-view-port-padding: var(--dx-file-manager-thumbnails-view-port-padding),
+  $filemanager-thumbnails-item-width: var(--dx-file-manager-thumbnails-item-width),
+  $filemanager-thumbnails-item-height: var(--dx-file-manager-thumbnails-item-height),
+  $filemanager-thumbnails-item-border: var(--dx-file-manager-thumbnails-item-border),
+  $filemanager-thumbnails-item-margin: var(--dx-file-manager-thumbnails-item-margin),
+  $filemanager-thumbnails-item-content-padding: var(--dx-file-manager-thumbnails-item-content-padding),
+  $filemanager-thumbnails-item-spacer-height: var(--dx-file-manager-thumbnails-item-spacer-height),
+  $filemanager-button-content-padding: var(--dx-file-manager-view-mode-button-content-padding),
+  $filemanager-dialog-min-width: var(--dx-file-manager-dialog-min-width),
+  $filemanager-overlay-content-min-height: var(--dx-file-manager-overlay-content-min-height),
+  $filemanager-overlay-content-max-height: var(--dx-file-manager-overlay-content-max-height),
+  $filemanager-dialog-name-editor-max-width: var(--dx-file-manager-dialog-name-editor-max-width),
+  $filemanager-dialog-name-editor-min-height: var(--dx-file-manager-dialog-name-editor-min-height),
+  $filemanager-dialog-name-editor-max-height: var(--dx-file-manager-dialog-name-editor-max-height),
+  $filemanager-progressbox-cancel-button-margin-top: var(--dx-file-manager-progress-box-cancel-button-margin-block-start),
+  $filemanager-progress-title-font-size: var(--dx-file-manager-progress-title-font-size),
+  $filemanager-progress-title-font-weight: var(--dx-file-manager-progress-title-font-weight),
+  $filemanager-progress-bold-font-weight: var(--dx-file-manager-progress-bold-font-weight),
+);
+@use "../../base/fileManager/mixins" as *;
+@use "../splitterBar";
+
+.dx-filemanager {
+  border-color: var(--dx-file-manager-border);
+
+  .dx-filemanager-notification-common {
+    border-color: var(--dx-file-manager-border);
+    color: var(--dx-file-manager-danger-bg);
+  }
+
+  .dx-drawer-shrink .dx-filemanager-progress-panel {
+    border-left-color: var(--dx-file-manager-border);
+  }
+
+  .dx-filemanager-progress-panel {
+    background-color: var(--dx-file-manager-bg);
+
+    .dx-filemanager-progress-panel-title {
+      padding-top: var(--dx-file-manager-progress-panel-title-padding-block);
+      padding-bottom: var(--dx-file-manager-progress-panel-title-padding-block);
+    }
+  }
+
+  .dx-filemanager-progress-box-image {
+    width: var(--dx-file-manager-progress-box-image-size);
+    height: var(--dx-file-manager-progress-box-image-size);
+    font-size: var(--dx-file-manager-progress-box-image-size);
+  }
+
+  .dx-filemanager-progress-box-error {
+    color: var(--dx-file-manager-inverted-content);
+    background: var(--dx-file-manager-danger-bg);
+  }
+
+  .dx-filemanager-progress-box .dx-filemanager-progress-box-close-button {
+    margin-top: var(--dx-file-manager-progress-box-button-close-margin-block-start);
+  }
+
+  .dx-filemanager-toolbar {
+    padding: var(--dx-file-manager-toolbar-padding);
+    background: var(--dx-file-manager-bg);
+    min-height: var(--dx-file-manager-toolbar-height);
+
+    &.dx-filemanager-file-toolbar,
+    &.dx-filemanager-file-toolbar .dx-toolbar {
+      background: var(--dx-file-manager-file-toolbar-bg);
+    }
+
+    .dx-filemanager-toolbar-separator-item {
+      height: var(--dx-file-manager-toolbar-separator-height);
+      background: var(--dx-file-manager-border);
+    }
+
+    .dx-filemanager-toolbar-viewmode-item .dx-texteditor {
+      width: var(--dx-file-manager-toolbar-viewmode-width);
+    }
+
+    .dx-texteditor.dx-editor-filled {
+      background: transparent;
+
+      &.dx-state-hover,
+      &.dx-state-active,
+      &.dx-state-focused {
+        background: var(--dx-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: var(--dx-file-manager-toolbar-viewmode-padding);
+      padding-right: var(--dx-file-manager-toolbar-viewmode-padding);
+    }
+  }
+
+  .dx-filemanager-fileuploader-dropzone-placeholder {
+    border: var(--dx-file-manager-file-uploader-drop-zone-placeholder-border);
+    border-color: var(--dx-file-manager-drop-zone-placeholder-border);
+  }
+
+  .dx-filemanager-container {
+    border-top-color: var(--dx-file-manager-border);
+  }
+
+  .dx-filemanager-dirs-panel {
+    border-right-color: var(--dx-file-manager-border);
+  }
+
+  .dx-filemanager-breadcrumbs {
+    border-bottom-color: var(--dx-file-manager-border);
+
+    .dx-menu-item {
+      &.dx-state-focused {
+        background: var(--dx-file-manager-breadcrumbs-item-bg-focused);
+        color: var(--dx-file-manager-breadcrumbs-item-content-focused);
+      }
+    }
+
+    .dx-menu-item-content {
+      padding-top: var(--dx-file-manager-breadcrumbs-item-padding-block-start);
+      padding-bottom: var(--dx-file-manager-breadcrumbs-item-padding-block-end);
+    }
+
+    .dx-filemanager-breadcrumbs-separator-item .dx-menu-item-content {
+      background: var(--dx-file-manager-border);
+    }
+
+    .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: var(--dx-file-manager-file-item-select-content);
+      background: var(--dx-file-manager-file-item-select-bg);
+    }
+
+    &.dx-state-hover:not(.dx-state-focused):not(.dx-item-selected) {
+      background: var(--dx-file-manager-file-item-bg-hovered);
+    }
+
+    &.dx-state-focused {
+      border: var(--dx-file-manager-border-focused);
+      border-color: var(--dx-file-manager-file-item-border-focused);
+    }
+
+    &.dx-item-selected.dx-state-focused {
+      color: var(--dx-file-manager-file-item-select-content-focused);
+      background: var(--dx-file-manager-file-item-select-bg-focused);
+    }
+
+    .dx-filemanager-thumbnails-item-thumbnail {
+      width: var(--dx-file-manager-thumbnails-item-thumbnail-size);
+      height: var(--dx-file-manager-thumbnails-item-thumbnail-size);
+      font-size: var(--dx-file-manager-thumbnails-item-thumbnail-size);
+    }
+
+    .dx-filemanager-item-custom-thumbnail {
+      color: var(--dx-file-manager-custom-thumbnail-content);
+    }
+  }
+
+  .dx-filemanager-files-view {
+    background: var(--dx-file-manager-bg);
+
+    &.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: var(--dx-file-manager-details-view-checkbox-column-width);
+          min-width: var(--dx-file-manager-details-view-checkbox-column-width);
+          max-width: var(--dx-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: var(--dx-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: var(--dx-file-manager-tree-view-item-top-bottom-padding);
+    padding-bottom: var(--dx-file-manager-tree-view-item-top-bottom-padding);
+  }
+
+  .dx-state-focused > .dx-treeview-item {
+    background: transparent;
+
+    &.dx-state-hover {
+      background: var(--dx-file-manager-dirs-tree-item-bg-focused);
+    }
+
+    & * {
+      color: var(--dx-file-manager-dirs-tree-item-content-focused);
+    }
+  }
+
+  .dx-treeview-item-without-checkbox > .dx-treeview-item.dx-filemanager-focused-item {
+    background: var(--dx-file-manager-dirs-tree-item-bg-focused);
+
+    & * {
+      color: var(--dx-file-manager-dirs-tree-item-content-focused);
+    }
+  }
+}
+
+.dx-filemanager-view-switcher-popup {
+  width: calc(2 * var(--dx-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(var(--dx-file-manager-toolbar-viewmode-padding) - 1px); // dx-px-nudge: -1px off the viewmode padding
+    padding-right: var(--dx-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: var(--dx-file-manager-file-actions-button-size);
+    height: var(--dx-file-manager-file-actions-button-size);
+
+    .dx-button-content {
+      padding: var(--dx-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: var(--dx-file-manager-context-menu-text-item-left-margin);
+}
+
+@include filemanager-icons-mixin($file-manager-icon, $file-manager-icon-success-content, $file-manager-icon-inverted-content, $file-manager-icon-danger-content, $file-manager-icon-inverted-content, $file-manager-large-icon-size, $masked: true);
+
+.dx-filemanager.dx-state-disabled .dx-treeview .dx-treeview-item .dx-filemanager-dirs-tree-item-text,
+.dx-state-disabled .dx-filemanager .dx-treeview .dx-treeview-item .dx-filemanager-dirs-tree-item-text {
+  color: var(--dx-file-manager-content-disabled);
+}
+
+.dx-filemanager.dx-state-disabled,
+.dx-state-disabled .dx-filemanager,
+.dx-state-disabled {
+  .dx-filemanager-dirs-tree-item-text,
+  .dx-filemanager-progress-panel-title-text,
+  .dx-filemanager-progress-panel-infos-container {
+    color: var(--dx-file-manager-content-disabled);
+  }
+}
+
+.dx-filemanager.dx-state-disabled,
+.dx-state-disabled .dx-filemanager {
+  .dx-icon,
+  .dx-treeview-toggle-item-visibility {
+    color: var(--dx-file-manager-content-disabled);
+  }
+
+  .dx-filemanager-dirs-tree.dx-treeview .dx-treeview-item-without-checkbox > .dx-treeview-item.dx-filemanager-focused-item,
+  .dx-filemanager-dirs-tree.dx-treeview .dx-treeview-item-without-checkbox > .dx-treeview-item.dx-filemanager-focused-item .dx-icon,
+  .dx-filemanager-dirs-tree.dx-treeview .dx-treeview-item-without-checkbox > .dx-treeview-item.dx-filemanager-focused-item .dx-treeview-toggle-item-visibility {
+    color: var(--dx-file-manager-content-disabled);
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/fileManager/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/fileManager/_public.scss
new file mode 100644
index 000000000000..90113dd4e1a8
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/fileManager/_public.scss
@@ -0,0 +1,102 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-file-manager-bg: #{$file-manager-bg};
+  --dx-file-manager-border: #{$file-manager-border};
+  --dx-file-manager-border-focused: #{$file-manager-border-focused};
+  --dx-file-manager-border-width: #{$file-manager-border-width};
+  --dx-file-manager-breadcrumbs-border-block-end: #{$file-manager-breadcrumbs-border-block-end};
+  --dx-file-manager-breadcrumbs-item-bg-focused: #{$file-manager-breadcrumbs-item-bg-focused};
+  --dx-file-manager-breadcrumbs-item-content-focused: #{$file-manager-breadcrumbs-item-content-focused};
+  --dx-file-manager-breadcrumbs-item-padding-block-end: #{$file-manager-breadcrumbs-item-padding-block-end};
+  --dx-file-manager-breadcrumbs-item-padding-block-start: #{$file-manager-breadcrumbs-item-padding-block-start};
+  --dx-file-manager-breadcrumbs-padding: #{$file-manager-breadcrumbs-padding};
+  --dx-file-manager-breadcrumbs-path-separator-padding-inline-end: #{$file-manager-breadcrumbs-path-separator-padding-inline-end};
+  --dx-file-manager-breadcrumbs-path-separator-padding-inline-start: #{$file-manager-breadcrumbs-path-separator-padding-inline-start};
+  --dx-file-manager-button-content-padding: #{$file-manager-button-content-padding};
+  --dx-file-manager-container-border-block-start: #{$file-manager-container-border-block-start};
+  --dx-file-manager-content-disabled: #{$file-manager-content-disabled};
+  --dx-file-manager-context-menu-text-item-left-margin: #{$file-manager-context-menu-text-item-left-margin};
+  --dx-file-manager-custom-thumbnail-content: #{$file-manager-custom-thumbnail-content};
+  --dx-file-manager-danger-bg: #{$file-manager-danger-bg};
+  --dx-file-manager-details-view-checkbox-column-width: #{$file-manager-details-view-checkbox-column-width};
+  --dx-file-manager-dialog-min-width: #{$file-manager-dialog-min-width};
+  --dx-file-manager-dialog-name-editor-max-height: #{$file-manager-dialog-name-editor-max-height};
+  --dx-file-manager-dialog-name-editor-max-width: #{$file-manager-dialog-name-editor-max-width};
+  --dx-file-manager-dialog-name-editor-min-height: #{$file-manager-dialog-name-editor-min-height};
+  --dx-file-manager-dirs-panel-padding: #{$file-manager-dirs-panel-padding};
+  --dx-file-manager-dirs-tree-item-bg-focused: #{$file-manager-dirs-tree-item-bg-focused};
+  --dx-file-manager-dirs-tree-item-content-focused: #{$file-manager-dirs-tree-item-content-focused};
+  --dx-file-manager-drawer-panel-content-initial-max-width: #{$file-manager-drawer-panel-content-initial-max-width};
+  --dx-file-manager-drawer-panel-content-initial-min-width: #{$file-manager-drawer-panel-content-initial-min-width};
+  --dx-file-manager-drop-zone-placeholder-border: #{$file-manager-drop-zone-placeholder-border};
+  --dx-file-manager-editor-bg-active: #{$file-manager-editor-bg-active};
+  --dx-file-manager-file-actions-button-size: #{$file-manager-file-actions-button-size};
+  --dx-file-manager-file-actions-button-top-bottom-padding: #{$file-manager-file-actions-button-top-bottom-padding};
+  --dx-file-manager-file-item-bg-hovered: #{$file-manager-file-item-bg-hovered};
+  --dx-file-manager-file-item-border-focused: #{$file-manager-file-item-border-focused};
+  --dx-file-manager-file-item-select-bg: #{$file-manager-file-item-select-bg};
+  --dx-file-manager-file-item-select-bg-focused: #{$file-manager-file-item-select-bg-focused};
+  --dx-file-manager-file-item-select-content: #{$file-manager-file-item-select-content};
+  --dx-file-manager-file-item-select-content-focused: #{$file-manager-file-item-select-content-focused};
+  --dx-file-manager-file-toolbar-bg: #{$file-manager-file-toolbar-bg};
+  --dx-file-manager-file-uploader-drop-zone-placeholder-border: #{$file-manager-file-uploader-drop-zone-placeholder-border};
+  --dx-file-manager-height: #{$file-manager-height};
+  --dx-file-manager-i-cancel-height: #{$file-manager-i-cancel-height};
+  --dx-file-manager-i-cancel-width: #{$file-manager-i-cancel-width};
+  --dx-file-manager-inverted-content: #{$file-manager-inverted-content};
+  --dx-file-manager-item-content-focused: #{$file-manager-item-content-focused};
+  --dx-file-manager-menu-item-content-margin: #{$file-manager-menu-item-content-margin};
+  --dx-file-manager-menu-item-content-padding-inline-end: #{$file-manager-menu-item-content-padding-inline-end};
+  --dx-file-manager-menu-item-content-padding-inline-start: #{$file-manager-menu-item-content-padding-inline-start};
+  --dx-file-manager-notification-border-block-end-width: #{$file-manager-notification-border-block-end-width};
+  --dx-file-manager-notification-padding-block-end: #{$file-manager-notification-padding-block-end};
+  --dx-file-manager-overlay-content-max-height: #{$file-manager-overlay-content-max-height};
+  --dx-file-manager-overlay-content-max-width: #{$file-manager-overlay-content-max-width};
+  --dx-file-manager-overlay-content-min-height: #{$file-manager-overlay-content-min-height};
+  --dx-file-manager-overlay-content-min-width: #{$file-manager-overlay-content-min-width};
+  --dx-file-manager-popup-content-padding: #{$file-manager-popup-content-padding};
+  --dx-file-manager-progress-bold-font-weight: #{$file-manager-progress-bold-font-weight};
+  --dx-file-manager-progress-box-border-radius: #{$file-manager-progress-box-border-radius};
+  --dx-file-manager-progress-box-button-close-margin-block-start: #{$file-manager-progress-box-button-close-margin-block-start};
+  --dx-file-manager-progress-box-cancel-button-margin-block-start: #{$file-manager-progress-box-cancel-button-margin-block-start};
+  --dx-file-manager-progress-box-close-button-margin-block-start: #{$file-manager-progress-box-close-button-margin-block-start};
+  --dx-file-manager-progress-box-close-button-margin-inline-start: #{$file-manager-progress-box-close-button-margin-inline-start};
+  --dx-file-manager-progress-box-content-padding: #{$file-manager-progress-box-content-padding};
+  --dx-file-manager-progress-box-error-max-height: #{$file-manager-progress-box-error-max-height};
+  --dx-file-manager-progress-box-error-padding: #{$file-manager-progress-box-error-padding};
+  --dx-file-manager-progress-box-image-margin-inline-end: #{$file-manager-progress-box-image-margin-inline-end};
+  --dx-file-manager-progress-box-image-size: #{$file-manager-progress-box-image-size};
+  --dx-file-manager-progress-box-margin-block-end: #{$file-manager-progress-box-margin-block-end};
+  --dx-file-manager-progress-box-padding: #{$file-manager-progress-box-padding};
+  --dx-file-manager-progress-box-without-close-button-padding-inline-end: #{$file-manager-progress-box-without-close-button-padding-inline-end};
+  --dx-file-manager-progress-panel-border-inline-start-width: #{$file-manager-progress-panel-border-inline-start-width};
+  --dx-file-manager-progress-panel-box-padding: #{$file-manager-progress-panel-box-padding};
+  --dx-file-manager-progress-panel-container-padding: #{$file-manager-progress-panel-container-padding};
+  --dx-file-manager-progress-panel-separator-height: #{$file-manager-progress-panel-separator-height};
+  --dx-file-manager-progress-panel-title-padding: #{$file-manager-progress-panel-title-padding};
+  --dx-file-manager-progress-panel-title-padding-block: #{$file-manager-progress-panel-title-padding-block};
+  --dx-file-manager-progress-panel-width: #{$file-manager-progress-panel-width};
+  --dx-file-manager-progress-title-font-size: #{$file-manager-progress-title-font-size};
+  --dx-file-manager-progress-title-font-weight: #{$file-manager-progress-title-font-weight};
+  --dx-file-manager-splitter-wrapper-inset-inline-end: #{$file-manager-splitter-wrapper-inset-inline-end};
+  --dx-file-manager-thumbnails-item-border: #{$file-manager-thumbnails-item-border};
+  --dx-file-manager-thumbnails-item-content-padding: #{$file-manager-thumbnails-item-content-padding};
+  --dx-file-manager-thumbnails-item-height: #{$file-manager-thumbnails-item-height};
+  --dx-file-manager-thumbnails-item-margin: #{$file-manager-thumbnails-item-margin};
+  --dx-file-manager-thumbnails-item-spacer-height: #{$file-manager-thumbnails-item-spacer-height};
+  --dx-file-manager-thumbnails-item-thumbnail-size: #{$file-manager-thumbnails-item-thumbnail-size};
+  --dx-file-manager-thumbnails-item-width: #{$file-manager-thumbnails-item-width};
+  --dx-file-manager-thumbnails-view-port-padding: #{$file-manager-thumbnails-view-port-padding};
+  --dx-file-manager-toolbar-height: #{$file-manager-toolbar-height};
+  --dx-file-manager-toolbar-padding: #{$file-manager-toolbar-padding};
+  --dx-file-manager-toolbar-separator-height: #{$file-manager-toolbar-separator-height};
+  --dx-file-manager-toolbar-separator-item-margin-inline-end: #{$file-manager-toolbar-separator-item-margin-inline-end};
+  --dx-file-manager-toolbar-separator-item-width: #{$file-manager-toolbar-separator-item-width};
+  --dx-file-manager-toolbar-viewmode-padding: #{$file-manager-toolbar-viewmode-padding};
+  --dx-file-manager-toolbar-viewmode-width: #{$file-manager-toolbar-viewmode-width};
+  --dx-file-manager-tree-view-item-top-bottom-padding: #{$file-manager-tree-view-item-top-bottom-padding};
+  --dx-file-manager-view-mode-button-content-padding: #{$file-manager-view-mode-button-content-padding};
+}
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..d57a6e90ba00
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/fileManager/_sizes.scss
@@ -0,0 +1,129 @@
+@use "../sizes" as *;
+@use "../toolbar/sizes" as toolbarSizes;
+@use "../../../_design-system/variables/ds" as ds;
+@use "../splitterBar/sizes" as splitterBarSizes;
+
+$file-manager-toolbar-separator-height: null !default;
+$file-manager-toolbar-viewmode-width: ds.$spacing-1600 !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-box-image-size: null !default;
+$file-manager-thumbnails-item-thumbnail-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 !default;
+
+@if $size == "default" {
+  $file-manager-toolbar-separator-height: ds.$spacing-360 !default;
+  $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: ds.$spacing-480 !default;
+  $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-box-image-size: ds.$spacing-400 !default;
+  $file-manager-thumbnails-item-thumbnail-size: ds.$spacing-400 !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-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: ds.$spacing-440 !default;
+  $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-box-image-size: ds.$spacing-320 !default;
+  $file-manager-thumbnails-item-thumbnail-size: ds.$spacing-320 !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-width: ds.$border-width-10 !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;
+$file-manager-progress-panel-box-padding: 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;
+$file-manager-progress-box-content-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;
+$file-manager-breadcrumbs-path-separator-padding-inline-start: ds.$spacing-10 !default;
+$file-manager-breadcrumbs-path-separator-padding-inline-end: 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;
+$file-manager-dialog-min-width: 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
+$file-manager-dialog-name-editor-max-width: 340px !default; // dx-offscale: 340px
+$file-manager-dialog-name-editor-min-height: 180px !default; // dx-offscale: 180px
+$file-manager-dialog-name-editor-max-height: 180px !default; // dx-offscale: 180px
+$file-manager-progress-box-cancel-button-margin-block-start: ds.$spacing-50 !default;
+
+/*
+ * Base centres the splitter wrapper on the bar with half the difference between the border and
+ * the bar. Both are tokens here, so the relationship is derived instead of frozen at 3px: move
+ * either token and this follows.
+ */
+$file-manager-splitter-wrapper-inset-inline-end: calc((#{splitterBarSizes.$splitter-bar-border-width} - #{splitterBarSizes.$splitter-bar-width}) / 2) !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..5847ef1908ed
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/fileUploader/_colors.scss
@@ -0,0 +1,16 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$file-uploader-file-name-content: ds.$color-content !default;
+$file-uploader-file-icon: ds.$color-content-subtle !default;
+$file-uploader-progress-bar-status-content: ds.$color-content !default;
+$file-uploader-files-container-bg: ds.$color-bg !default;
+
+$file-uploader-file-name-status-content: ds.$color-content-subtle !default;
+
+$file-uploader-border: ds.$color-border !default;
+
+$file-uploader-file-status-message-invalid-content: ds.$color-content-danger !default;
+$file-uploader-label-content: ds.$color-content-subtle !default;
+$file-uploader-file-container-shadow: ds.$box-shadow-sm !default;
+
+$file-uploader-content-disabled: ds.$color-content-disabled !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..4ea4da0cb50a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/fileUploader/_index.scss
@@ -0,0 +1,223 @@
+@use "../mixins" as *;
+@use "sass:math";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/mixins" as *;
+@use "../../base/fileUploader" with (
+  $fileuploader-file-container-padding: false,
+  $fileuploader-button-margin-left: var(--dx-file-uploader-button-margin-inline-start),
+  $fileuploader-upload-button-margin-top: var(--dx-file-uploader-upload-button-margin-block-start),
+  $fileuploader-show-file-list-padding-top: var(--dx-file-uploader-show-file-list-padding-block-start),
+  $fileuploader-button-width: var(--dx-file-uploader-button-width),
+  $fileuploader-button-height: var(--dx-file-uploader-button-height),
+  $fileuploader-button-margin-right: var(--dx-file-uploader-button-margin-inline-end),
+  $fileuploader-cancel-button-position-end-margin-left: var(--dx-file-uploader-cancel-button-position-end-margin-inline-start),
+  $fileuploader-file-status-message-height: var(--dx-file-uploader-file-status-message-height),
+  $fileuploader-progressbar-height: var(--dx-file-uploader-progress-bar-height),
+  $fileuploader-file-size-padding-left: var(--dx-file-uploader-file-size-padding-inline-start),
+  $fileuploader-file-icon-padding-right: var(--dx-file-uploader-file-icon-padding-inline-end),
+  $fileuploader-file-container-button-margin-left: var(--dx-file-uploader-file-container-button-rtl-margin-inline-end),
+  $fileuploader-cancel-button-position-end-margin-right: var(--dx-file-uploader-cancel-button-position-end-margin-inline-end),
+  $fileuploader-file-size-padding-right: var(--dx-file-uploader-file-size-padding-inline-end),
+  $fileuploader-file-status-message-line-margin-bottom: var(--dx-file-uploader-file-status-message-line-margin-block-end),
+  $fileuploader-cancel-button-margin-top: var(--dx-file-uploader-cancel-button-margin-block-start),
+  $fileuploader-status-message-font-size: var(--dx-file-uploader-status-message-font-size),
+  $fileuploader-file-size-font-size: var(--dx-file-uploader-file-size-font-size),
+);
+
+.dx-fileuploader-wrapper {
+  padding: var(--dx-file-uploader-padding-block);
+}
+
+.dx-fileuploader-content > .dx-fileuploader-upload-button {
+  margin-left: var(--dx-file-uploader-upload-button-margin-inline-start);
+  margin-right: var(--dx-file-uploader-upload-button-margin-inline-end);
+}
+
+.dx-fileuploader-input-wrapper {
+  padding: var(--dx-file-uploader-padding-block) 0 var(--dx-file-uploader-padding-block);
+  border: var(--dx-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(var(--dx-file-uploader-padding-block) * 2 + var(--dx-file-uploader-file-wrapper-border-width));
+    padding-right: var(--dx-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(var(--dx-file-uploader-padding-block) * 2 + var(--dx-file-uploader-file-wrapper-border-width) + 1px); // dx-px-nudge: +1px over the dragover padding
+    padding-left: var(--dx-file-uploader-file-wrapper-border-width);
+    box-sizing: content-box;
+  }
+
+  .dx-fileuploader-input-label { // stylelint-disable-line no-duplicate-selectors
+    padding: calc(var(--dx-file-uploader-padding-block) * 2) calc(var(--dx-file-uploader-padding-block) + 2px); // dx-px-nudge: +2px over the padding
+    border: var(--dx-file-uploader-file-wrapper-border-width) dashed;
+    border-color: var(--dx-file-uploader-border);
+  }
+}
+
+.dx-fileuploader-file-status-message,
+.dx-fileuploader-file-size {
+  color: var(--dx-file-uploader-file-name-status-content);
+}
+
+.dx-fileuploader-input {
+  padding: var(--dx-file-uploader-padding-block) 0;
+}
+
+.dx-fileuploader-input-label {
+  padding: calc(var(--dx-file-uploader-padding-block) + (#{$global-font-size} / 2 - var(--dx-file-uploader-padding-block)) / 2 + 1px) calc(var(--dx-file-uploader-padding-block) + 2px); // dx-px-nudge: +1px and +2px over the padding
+  color: var(--dx-file-uploader-file-name-content);
+
+  @include dx-overflow();
+}
+
+.dx-fileuploader-files-container {
+  .dx-fileuploader-show-file-list & {
+    padding: var(--dx-file-uploader-files-container-padding);
+  }
+
+  .dx-fileuploader-empty & {
+    padding: 0;
+  }
+
+  .dx-invalid & {
+    padding-top: var(--dx-file-uploader-invalid-padding-block-start);
+  }
+
+  .dx-fileuploader-button .dx-button-content {
+    padding: 0;
+  }
+
+  .dx-fileuploader-file-container {
+    padding: var(--dx-file-uploader-file-container-padding);
+    margin-bottom: var(--dx-file-uploader-file-container-margin-block-end);
+    border-radius: var(--dx-file-uploader-files-container-border-radius);
+    background-color: var(--dx-file-uploader-files-container-bg);
+    box-shadow: var(--dx-file-uploader-file-container-shadow);
+
+    .dx-fileuploader-button-container + .dx-fileuploader-button-container {
+      .dx-button {
+        margin-right: var(--dx-file-uploader-file-container-text-margin);
+
+        .dx-rtl & {
+          margin-left: var(--dx-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: var(--dx-file-uploader-file-container-button-size);
+      width: var(--dx-file-uploader-file-container-button-size);
+      margin-right: var(--dx-file-uploader-file-container-button-margin);
+
+      &.dx-fileuploader-cancel-button-position-end {
+        margin-right: 0;
+        margin-left: var(--dx-file-uploader-file-cancel-button-margin-inline-start);
+      }
+
+      .dx-rtl & {
+        margin-left: var(--dx-file-uploader-file-container-button-margin);
+        margin-right: 0;
+
+        &.dx-fileuploader-cancel-button-position-end {
+          margin-left: 0;
+          margin-right: var(--dx-file-uploader-file-cancel-button-margin-inline-start);
+        }
+      }
+    }
+  }
+}
+
+.dx-fileuploader .dx-progressbar-status {
+  color: var(--dx-file-uploader-progress-bar-status-content);
+}
+
+.dx-fileuploader-file {
+  display: block;
+  padding-top: var(--dx-file-uploader-file-padding-block-start);
+  line-height: var(--dx-file-uploader-file-line-height);
+}
+
+.dx-fileuploader-file-icon {
+  color: var(--dx-file-uploader-file-icon);
+  font-size: var(--dx-file-uploader-file-icon-font-size);
+}
+
+.dx-fileuploader-file-name {
+  padding-bottom: calc(var(--dx-file-uploader-padding-block) / 2);
+  color: var(--dx-file-uploader-file-name-content);
+  font-weight: var(--dx-file-uploader-file-name-font-weight);
+}
+
+.dx-fileuploader-file-size {
+  float: right;
+  padding: var(--dx-file-uploader-file-size-padding);
+  color: var(--dx-file-uploader-label-content);
+}
+
+.dx-fileuploader-invalid {
+  .dx-fileuploader-file-status-message {
+    color: var(--dx-file-uploader-file-status-message-invalid-content);
+
+    span {
+      &:first-child {
+        margin-top: var(--dx-file-uploader-file-status-message-margin-block-start);
+      }
+
+      &:last-child {
+        margin-bottom: var(--dx-file-uploader-file-status-message-margin-block-end);
+      }
+    }
+  }
+
+  .dx-fileuploader-button-container {
+    vertical-align: middle;
+  }
+
+  .dx-fileuploader-cancel-button {
+    margin-top: 0;
+  }
+}
+
+@include when-disabled(".dx-fileuploader") {
+  .dx-button-text,
+  .dx-fileuploader-input-label,
+  .dx-fileuploader-file-name,
+  .dx-fileuploader-file-size {
+    color: var(--dx-file-uploader-content-disabled);
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/fileUploader/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/fileUploader/_public.scss
new file mode 100644
index 000000000000..b19d51bf55ea
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/fileUploader/_public.scss
@@ -0,0 +1,54 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-file-uploader-border: #{$file-uploader-border};
+  --dx-file-uploader-button-height: #{$file-uploader-button-height};
+  --dx-file-uploader-button-margin-inline-end: #{$file-uploader-button-margin-inline-end};
+  --dx-file-uploader-button-margin-inline-start: #{$file-uploader-button-margin-inline-start};
+  --dx-file-uploader-button-width: #{$file-uploader-button-width};
+  --dx-file-uploader-cancel-button-margin-block-start: #{$file-uploader-cancel-button-margin-block-start};
+  --dx-file-uploader-cancel-button-position-end-margin-inline-end: #{$file-uploader-cancel-button-position-end-margin-inline-end};
+  --dx-file-uploader-cancel-button-position-end-margin-inline-start: #{$file-uploader-cancel-button-position-end-margin-inline-start};
+  --dx-file-uploader-content-disabled: #{$file-uploader-content-disabled};
+  --dx-file-uploader-file-cancel-button-margin-inline-start: #{$file-uploader-file-cancel-button-margin-inline-start};
+  --dx-file-uploader-file-container-button-margin: #{$file-uploader-file-container-button-margin};
+  --dx-file-uploader-file-container-button-rtl-margin-inline-end: #{$file-uploader-file-container-button-rtl-margin-inline-end};
+  --dx-file-uploader-file-container-button-size: #{$file-uploader-file-container-button-size};
+  --dx-file-uploader-file-container-margin-block-end: #{$file-uploader-file-container-margin-block-end};
+  --dx-file-uploader-file-container-padding: #{$file-uploader-file-container-padding};
+  --dx-file-uploader-file-container-shadow: #{$file-uploader-file-container-shadow};
+  --dx-file-uploader-file-container-text-margin: #{$file-uploader-file-container-text-margin};
+  --dx-file-uploader-file-icon: #{$file-uploader-file-icon};
+  --dx-file-uploader-file-icon-font-size: #{$file-uploader-file-icon-font-size};
+  --dx-file-uploader-file-icon-padding-inline-end: #{$file-uploader-file-icon-padding-inline-end};
+  --dx-file-uploader-file-line-height: #{$file-uploader-file-line-height};
+  --dx-file-uploader-file-name-content: #{$file-uploader-file-name-content};
+  --dx-file-uploader-file-name-font-weight: #{$file-uploader-file-name-font-weight};
+  --dx-file-uploader-file-name-status-content: #{$file-uploader-file-name-status-content};
+  --dx-file-uploader-file-padding-block-start: #{$file-uploader-file-padding-block-start};
+  --dx-file-uploader-file-size-font-size: #{$file-uploader-file-size-font-size};
+  --dx-file-uploader-file-size-padding: #{$file-uploader-file-size-padding};
+  --dx-file-uploader-file-size-padding-inline-end: #{$file-uploader-file-size-padding-inline-end};
+  --dx-file-uploader-file-size-padding-inline-start: #{$file-uploader-file-size-padding-inline-start};
+  --dx-file-uploader-file-status-message-height: #{$file-uploader-file-status-message-height};
+  --dx-file-uploader-file-status-message-invalid-content: #{$file-uploader-file-status-message-invalid-content};
+  --dx-file-uploader-file-status-message-line-margin-block-end: #{$file-uploader-file-status-message-line-margin-block-end};
+  --dx-file-uploader-file-status-message-margin-block-end: #{$file-uploader-file-status-message-margin-block-end};
+  --dx-file-uploader-file-status-message-margin-block-start: #{$file-uploader-file-status-message-margin-block-start};
+  --dx-file-uploader-file-wrapper-border-width: #{$file-uploader-file-wrapper-border-width};
+  --dx-file-uploader-files-container-bg: #{$file-uploader-files-container-bg};
+  --dx-file-uploader-files-container-border-radius: #{$file-uploader-files-container-border-radius};
+  --dx-file-uploader-files-container-padding: #{$file-uploader-files-container-padding};
+  --dx-file-uploader-invalid-padding-block-start: #{$file-uploader-invalid-padding-block-start};
+  --dx-file-uploader-label-content: #{$file-uploader-label-content};
+  --dx-file-uploader-padding-block: #{$file-uploader-padding-block};
+  --dx-file-uploader-progress-bar-height: #{$file-uploader-progress-bar-height};
+  --dx-file-uploader-progress-bar-status-content: #{$file-uploader-progress-bar-status-content};
+  --dx-file-uploader-show-file-list-padding-block-start: #{$file-uploader-show-file-list-padding-block-start};
+  --dx-file-uploader-status-message-font-size: #{$file-uploader-status-message-font-size};
+  --dx-file-uploader-upload-button-margin-block-start: #{$file-uploader-upload-button-margin-block-start};
+  --dx-file-uploader-upload-button-margin-inline-end: #{$file-uploader-upload-button-margin-inline-end};
+  --dx-file-uploader-upload-button-margin-inline-start: #{$file-uploader-upload-button-margin-inline-start};
+}
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..5e45a1fa4c19
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/fileUploader/_sizes.scss
@@ -0,0 +1,66 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$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: ds.$spacing-120 ds.$spacing-40 0 !default;
+$file-uploader-file-size-padding: null !default;
+$file-uploader-file-icon-font-size: null !default;
+$file-uploader-files-container-border-radius: ds.$border-radius-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-file-size-padding: 0 0 0 ds.$spacing-40 !default;
+  $file-uploader-file-icon-font-size: ds.$spacing-200 !default;
+}
+
+@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-file-size-padding: 0 0 ds.$spacing-40 !default;
+  $file-uploader-file-icon-font-size: ds.$spacing-160 !default;
+}
+
+// Values hoisted from style-file literals (tokenized)
+$file-uploader-file-name-font-weight: ds.$font-weight-base-strong !default;
+$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: ds.$spacing-520 !default;
+$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;
+$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;
+$file-uploader-file-container-button-rtl-margin-inline-end: 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;
+$file-uploader-file-status-message-line-margin-block-end: 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..a1a604dab2a4
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/filterBuilder/_colors.scss
@@ -0,0 +1,42 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$filter-builder-bg: ds.$color-bg !default;
+
+$filter-builder-content: ds.$color-content !default;
+
+$filter-builder-text-content-focused: ds.$color-content !default;
+
+$filter-builder-plus-icon-content-disabled: ds.$color-content-disabled !default;
+$filter-builder-plus-icon: ds.$color-content-success !default;
+$filter-builder-plus-icon-content-hovered: ds.$color-content-success-hovered !default;
+$filter-builder-plus-icon-content-focused: ds.$color-content-success-active !default;
+
+$filter-builder-remove-icon-content-disabled: ds.$color-content-disabled !default;
+$filter-builder-remove-icon: ds.$color-content-danger !default;
+$filter-builder-remove-icon-content-hovered: ds.$color-content-danger-hovered !default;
+$filter-builder-remove-icon-content-focused: ds.$color-content-danger-active !default;
+
+$filter-builder-group-operation-bg-disabled: ds.$color-bg-disabled !default;
+$filter-builder-item-field-bg-disabled: ds.$color-bg-disabled !default;
+$filter-builder-group-operation-bg: ds.$color-bg-primary-subtle !default;
+$filter-builder-group-operation-bg-hovered: ds.$color-bg-primary-subtle-hovered !default;
+$filter-builder-group-operation-bg-focused: ds.$color-bg-primary-subtle-active !default;
+
+$filter-builder-item-field-bg: ds.$color-bg-warning-subtle !default;
+$filter-builder-item-field-bg-hovered: ds.$color-bg-warning-subtle-hovered !default;
+$filter-builder-item-field-bg-focused: ds.$color-bg-warning-subtle-active !default;
+
+$filter-builder-item-operator-bg: ds.$color-bg-info-subtle !default;
+$filter-builder-item-operator-bg-hovered: ds.$color-bg-info-subtle-hovered !default;
+$filter-builder-item-operator-bg-focused: ds.$color-bg-info-subtle-active !default;
+
+$filter-builder-item-value-bg: ds.$color-bg-success-subtle !default;
+$filter-builder-item-value-bg-hovered: ds.$color-bg-success-subtle-hovered !default;
+$filter-builder-item-value-bg-focused: ds.$color-bg-success-subtle-active !default;
+$filter-builder-menu-icon: ds.$color-content !default;
+
+// Base-layer values injected with design tokens (wave B1)
+
+$filter-builder-content-disabled: ds.$color-content-disabled !default;
+
+$filter-builder-range-separator-content: ds.$color-content-subtle !default;
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..c53c4a270fbb
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/filterBuilder/_index.scss
@@ -0,0 +1,170 @@
+@use "../mixins" as *;
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/filterBuilder" with (
+  $filterbuilder-action-icon-margin-left: var(--dx-filter-builder-action-icon-margin-inline-start),
+  $filterbuilder-action-icon-margin-right: var(--dx-filter-builder-action-icon-margin-inline-end),
+  $filterbuilder-group-content-padding-right: var(--dx-filter-builder-group-content-padding-inline-end),
+  $filterbuilder-range-separator-margin: var(--dx-filter-builder-range-separator-margin),
+  $filterbuilder-range-separator-opacity: false,
+  $filterbuilder-item-value-text-min-width: var(--dx-filter-builder-item-value-text-min-width),
+  $filterbuilder-item-value-text-padding: var(--dx-filter-builder-item-value-text-padding),
+  $filterbuilder-action-icon-padding: var(--dx-filter-builder-action-icon-padding),
+  $filterbuilder-group-content-padding-left: var(--dx-filter-builder-group-content-padding-inline-start),
+  $filterbuilder-treeview-item-padding-left: var(--dx-filter-builder-tree-view-item-padding-inline-start),
+  $filterbuilder-treeview-item-padding-right: var(--dx-filter-builder-tree-view-item-padding-inline-end),
+  $filterbuilder-treeview-node-margin-left: var(--dx-filter-builder-tree-view-node-margin-inline-start),
+  $filterbuilder-treeview-node-margin-right: var(--dx-filter-builder-tree-view-node-margin-inline-end),
+  $filterbuilder-scrollable-max-height: var(--dx-filter-builder-scrollable-max-height),
+  $filterbuilder-bg: var(--dx-filter-builder-bg),
+  $filterbuilder-text-color: var(--dx-filter-builder-content),
+  $filterbuilder-text-focus-color: var(--dx-filter-builder-text-content-focused),
+  $filterbuilder-group-operation-color: var(--dx-filter-builder-group-operation-bg),
+  $filterbuilder-group-operation-hover-color: var(--dx-filter-builder-group-operation-bg-hovered),
+  $filterbuilder-group-operation-focus-color: var(--dx-filter-builder-group-operation-bg-focused),
+  $filterbuilder-item-operator-color: var(--dx-filter-builder-item-operator-bg),
+  $filterbuilder-item-operator-hover-color: var(--dx-filter-builder-item-operator-bg-hovered),
+  $filterbuilder-item-operator-focus-color: var(--dx-filter-builder-item-operator-bg-focused),
+  $filterbuilder-item-field-color: var(--dx-filter-builder-item-field-bg),
+  $filterbuilder-item-field-hover-color: var(--dx-filter-builder-item-field-bg-hovered),
+  $filterbuilder-item-field-focus-color: var(--dx-filter-builder-item-field-bg-focused),
+  $filterbuilder-item-value-color: var(--dx-filter-builder-item-value-bg),
+  $filterbuilder-item-value-hover-color: var(--dx-filter-builder-item-value-bg-hovered),
+  $filterbuilder-item-value-focus-color: var(--dx-filter-builder-item-value-bg-focused),
+  $filterbuilder-plus-icon-color: var(--dx-filter-builder-plus-icon),
+  $filterbuilder-plus-icon-hover-color: var(--dx-filter-builder-plus-icon-content-hovered),
+  $filterbuilder-plus-icon-focus-color: var(--dx-filter-builder-plus-icon-content-focused),
+  $filterbuilder-remove-icon-color: var(--dx-filter-builder-remove-icon),
+  $filterbuilder-remove-icon-hover-color: var(--dx-filter-builder-remove-icon-content-hovered),
+  $filterbuilder-remove-icon-focus-color: var(--dx-filter-builder-remove-icon-content-focused),
+  $filterbuilder-menu-icon-color: var(--dx-filter-builder-menu-icon),
+);
+
+.dx-filterbuilder {
+  .dx-filterbuilder-action-icon {
+    font-size: var(--dx-filter-builder-action-icon-font-size);
+  }
+
+  .dx-filterbuilder-group {
+    .dx-filterbuilder-group-item {
+      .dx-filterbuilder-action.dx-filterbuilder-action-icon {
+        padding: var(--dx-filter-builder-icon-padding);
+        vertical-align: middle;
+      }
+    }
+  }
+
+  .dx-filterbuilder-item-value {
+    .dx-editor-filled,
+    .dx-editor-outlined {
+      .dx-texteditor-input {
+        padding: var(--dx-filter-builder-filled-editor-padding);
+      }
+    }
+  }
+
+  .dx-filterbuilder-text,
+  .dx-filterbuilder-item-value-text {
+    border-radius: var(--dx-filter-builder-text-border-radius);
+  }
+}
+
+.dx-filterbuilder-range-separator {
+  color: var(--dx-filter-builder-range-separator-content);
+}
+
+.dx-filterbuilder-overlay {
+  &.dx-popup-wrapper > .dx-overlay-content {
+    box-shadow: var(--dx-global-dropdown-box-shadow);
+  }
+
+  &.dx-filterbuilder-operations {
+    .dx-rtl {
+      .dx-treeview-item {
+        padding-right: var(--dx-filter-builder-tree-view-item-left-padding);
+      }
+    }
+  }
+
+  .dx-treeview-node {
+    .dx-treeview-node-container-opened {
+      margin-left: var(--dx-filter-builder-tree-view-item-left-padding);
+    }
+  }
+
+  .dx-treeview-item {
+    padding: var(--dx-filter-builder-tree-view-item-padding);
+    min-height: var(--dx-filter-builder-tree-view-item-min-height);
+
+    .dx-icon {
+      margin-right: var(--dx-filter-builder-icon-margin-inline-end);
+    }
+  }
+
+  .dx-treeview-toggle-item-visibility {
+    left: var(--dx-filter-builder-tree-view-toggle-inset-inline-start);
+  }
+
+  .dx-rtl {
+    .dx-treeview-node {
+      > .dx-treeview-item {
+        padding-right: calc(var(--dx-filter-builder-tree-view-item-left-padding) * 2);
+      }
+
+      &.dx-treeview-node-is-leaf > .dx-treeview-item {
+        padding-right: var(--dx-filter-builder-tree-view-item-left-padding);
+      }
+
+      .dx-treeview-node-container-opened {
+        margin-right: var(--dx-filter-builder-tree-view-item-left-padding);
+        margin-left: 0;
+      }
+    }
+
+    .dx-treeview-item {
+      .dx-icon {
+        margin-left: var(--dx-filter-builder-icon-margin-inline-start);
+      }
+    }
+
+    .dx-treeview-toggle-item-visibility {
+      right: var(--dx-filter-builder-tree-view-toggle-item-visibility-inset-inline-end);
+    }
+  }
+}
+
+@include when-disabled(".dx-filterbuilder") {
+  color: var(--dx-filter-builder-content-disabled);
+
+  .dx-filterbuilder-item-field,
+  .dx-filterbuilder-item-operation,
+  .dx-filterbuilder-item-value,
+  .dx-filterbuilder-item-value-text,
+  .dx-filterbuilder-group-operation {
+    color: var(--dx-filter-builder-content-disabled);
+  }
+}
+
+.dx-state-disabled .dx-filterbuilder .dx-filterbuilder-group .dx-filterbuilder-text.dx-filterbuilder-group-operation,
+.dx-filterbuilder.dx-state-disabled .dx-filterbuilder-group .dx-filterbuilder-text.dx-filterbuilder-group-operation {
+  background-color: var(--dx-filter-builder-group-operation-bg-disabled);
+}
+
+.dx-state-disabled .dx-filterbuilder .dx-filterbuilder-group .dx-filterbuilder-text.dx-filterbuilder-item-field,
+.dx-state-disabled .dx-filterbuilder .dx-filterbuilder-group .dx-filterbuilder-text.dx-filterbuilder-item-operation,
+.dx-state-disabled .dx-filterbuilder .dx-filterbuilder-group .dx-filterbuilder-text .dx-filterbuilder-item-value-text,
+.dx-filterbuilder.dx-state-disabled .dx-filterbuilder-group .dx-filterbuilder-text.dx-filterbuilder-item-field,
+.dx-filterbuilder.dx-state-disabled .dx-filterbuilder-group .dx-filterbuilder-text.dx-filterbuilder-item-operation,
+.dx-filterbuilder.dx-state-disabled .dx-filterbuilder-group .dx-filterbuilder-text .dx-filterbuilder-item-value-text {
+  background-color: var(--dx-filter-builder-item-field-bg-disabled);
+}
+
+.dx-state-disabled .dx-filterbuilder .dx-icon-plus,
+.dx-filterbuilder.dx-state-disabled .dx-icon-plus {
+  color: var(--dx-filter-builder-plus-icon-content-disabled);
+}
+
+.dx-state-disabled .dx-filterbuilder .dx-icon-remove,
+.dx-filterbuilder.dx-state-disabled .dx-icon-remove {
+  color: var(--dx-filter-builder-remove-icon-content-disabled);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/filterBuilder/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/filterBuilder/_public.scss
new file mode 100644
index 000000000000..9033452b90a9
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/filterBuilder/_public.scss
@@ -0,0 +1,58 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-filter-builder-action-icon-font-size: #{$filter-builder-action-icon-font-size};
+  --dx-filter-builder-action-icon-margin-inline-end: #{$filter-builder-action-icon-margin-inline-end};
+  --dx-filter-builder-action-icon-margin-inline-start: #{$filter-builder-action-icon-margin-inline-start};
+  --dx-filter-builder-action-icon-padding: #{$filter-builder-action-icon-padding};
+  --dx-filter-builder-bg: #{$filter-builder-bg};
+  --dx-filter-builder-content: #{$filter-builder-content};
+  --dx-filter-builder-content-disabled: #{$filter-builder-content-disabled};
+  --dx-filter-builder-filled-editor-padding: #{$filter-builder-filled-editor-padding};
+  --dx-filter-builder-group-content-padding-inline-end: #{$filter-builder-group-content-padding-inline-end};
+  --dx-filter-builder-group-content-padding-inline-start: #{$filter-builder-group-content-padding-inline-start};
+  --dx-filter-builder-group-operation-bg: #{$filter-builder-group-operation-bg};
+  --dx-filter-builder-group-operation-bg-disabled: #{$filter-builder-group-operation-bg-disabled};
+  --dx-filter-builder-group-operation-bg-focused: #{$filter-builder-group-operation-bg-focused};
+  --dx-filter-builder-group-operation-bg-hovered: #{$filter-builder-group-operation-bg-hovered};
+  --dx-filter-builder-icon-margin-inline-end: #{$filter-builder-icon-margin-inline-end};
+  --dx-filter-builder-icon-margin-inline-start: #{$filter-builder-icon-margin-inline-start};
+  --dx-filter-builder-icon-padding: #{$filter-builder-icon-padding};
+  --dx-filter-builder-item-field-bg: #{$filter-builder-item-field-bg};
+  --dx-filter-builder-item-field-bg-disabled: #{$filter-builder-item-field-bg-disabled};
+  --dx-filter-builder-item-field-bg-focused: #{$filter-builder-item-field-bg-focused};
+  --dx-filter-builder-item-field-bg-hovered: #{$filter-builder-item-field-bg-hovered};
+  --dx-filter-builder-item-operator-bg: #{$filter-builder-item-operator-bg};
+  --dx-filter-builder-item-operator-bg-focused: #{$filter-builder-item-operator-bg-focused};
+  --dx-filter-builder-item-operator-bg-hovered: #{$filter-builder-item-operator-bg-hovered};
+  --dx-filter-builder-item-value-bg: #{$filter-builder-item-value-bg};
+  --dx-filter-builder-item-value-bg-focused: #{$filter-builder-item-value-bg-focused};
+  --dx-filter-builder-item-value-bg-hovered: #{$filter-builder-item-value-bg-hovered};
+  --dx-filter-builder-item-value-text-min-width: #{$filter-builder-item-value-text-min-width};
+  --dx-filter-builder-item-value-text-padding: #{$filter-builder-item-value-text-padding};
+  --dx-filter-builder-menu-icon: #{$filter-builder-menu-icon};
+  --dx-filter-builder-plus-icon: #{$filter-builder-plus-icon};
+  --dx-filter-builder-plus-icon-content-disabled: #{$filter-builder-plus-icon-content-disabled};
+  --dx-filter-builder-plus-icon-content-focused: #{$filter-builder-plus-icon-content-focused};
+  --dx-filter-builder-plus-icon-content-hovered: #{$filter-builder-plus-icon-content-hovered};
+  --dx-filter-builder-range-separator-content: #{$filter-builder-range-separator-content};
+  --dx-filter-builder-range-separator-margin: #{$filter-builder-range-separator-margin};
+  --dx-filter-builder-remove-icon: #{$filter-builder-remove-icon};
+  --dx-filter-builder-remove-icon-content-disabled: #{$filter-builder-remove-icon-content-disabled};
+  --dx-filter-builder-remove-icon-content-focused: #{$filter-builder-remove-icon-content-focused};
+  --dx-filter-builder-remove-icon-content-hovered: #{$filter-builder-remove-icon-content-hovered};
+  --dx-filter-builder-scrollable-max-height: #{$filter-builder-scrollable-max-height};
+  --dx-filter-builder-text-border-radius: #{$filter-builder-text-border-radius};
+  --dx-filter-builder-text-content-focused: #{$filter-builder-text-content-focused};
+  --dx-filter-builder-tree-view-item-left-padding: #{$filter-builder-tree-view-item-left-padding};
+  --dx-filter-builder-tree-view-item-min-height: #{$filter-builder-tree-view-item-min-height};
+  --dx-filter-builder-tree-view-item-padding: #{$filter-builder-tree-view-item-padding};
+  --dx-filter-builder-tree-view-item-padding-inline-end: #{$filter-builder-tree-view-item-padding-inline-end};
+  --dx-filter-builder-tree-view-item-padding-inline-start: #{$filter-builder-tree-view-item-padding-inline-start};
+  --dx-filter-builder-tree-view-node-margin-inline-end: #{$filter-builder-tree-view-node-margin-inline-end};
+  --dx-filter-builder-tree-view-node-margin-inline-start: #{$filter-builder-tree-view-node-margin-inline-start};
+  --dx-filter-builder-tree-view-toggle-inset-inline-start: #{$filter-builder-tree-view-toggle-inset-inline-start};
+  --dx-filter-builder-tree-view-toggle-item-visibility-inset-inline-end: #{$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..b2cb8359a65d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/filterBuilder/_sizes.scss
@@ -0,0 +1,52 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// Not colours: opacities that used to sit in _colors.scss (NAMING.md, O7)
+
+$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..1062ae696303
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/form/_colors.scss
@@ -0,0 +1,8 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$form-field-item-content: ds.$color-content !default;
+
+$form-field-item-content-disabled: ds.$color-content-disabled !default;
+$form-item-help-content: ds.$color-content-subtle !default;
+
+$form-group-border: ds.$color-border !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..dffce9a64ecc
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/form/_index.scss
@@ -0,0 +1,146 @@
+@use "sass:math";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/form" with (
+  $form-first-row-padding-top: var(--dx-form-first-row-padding-block-start),
+  $form-switch-margin-top: var(--dx-form-switch-margin-block-start),
+  $form-switch-margin-bottom: var(--dx-form-switch-margin-block-end),
+  $form-multiview-item-content-padding: var(--dx-form-multiview-item-content-padding),
+  $form-group-content-padding-top: var(--dx-form-group-content-padding-block-start),
+  $form-group-content-padding-bottom: var(--dx-form-group-content-padding-block-end),
+  $form-group-content-margin-top: var(--dx-form-group-content-margin-block-start),
+  $form-field-item-label-location-left-padding-inline-end: var(--dx-form-field-item-label-location-left-padding-inline-end),
+  $form-field-item-label-location-right-padding-inline-start: var(--dx-form-field-item-label-location-right-padding-inline-start),
+);
+@use "../../base/icon_fonts" as *;
+@use "../scrollable";
+
+.dx-form-group-caption {
+  font-size: var(--dx-form-group-caption-font-size);
+}
+
+.dx-form-group-with-caption { // stylelint-disable-line no-duplicate-selectors
+  & > .dx-form-group-content {
+    border-top: var(--dx-form-group-content-border-block-start);
+    border-top-color: var(--dx-form-group-border);
+    padding-bottom: var(--dx-form-group-content-bottom-padding);
+    padding-top: var(--dx-form-group-caption-top-padding);
+    margin-top: var(--dx-form-group-caption-bottom-margin);
+  }
+}
+
+.dx-layout-manager {
+  .dx-field-item {
+    &:not(.dx-last-col) {
+      padding-inline-end: var(--dx-form-layout-manager-padding-inline);
+    }
+
+    &:not(.dx-first-col) {
+      padding-inline-start: var(--dx-form-layout-manager-padding-inline);
+    }
+
+    &:not(.dx-first-row) {
+      padding-top: var(--dx-form-layout-manager-padding-block);
+    }
+
+    padding-bottom: var(--dx-form-layout-manager-padding-block);
+    font-size: var(--dx-form-label-font-size);
+
+    .dx-field-item {
+      &.dx-last-row {
+        padding-bottom: 0;
+      }
+    }
+  }
+
+  .dx-tabpanel .dx-multiview-item-content {
+    padding: var(--dx-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: var(--dx-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: var(--dx-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: var(--dx-form-top-label-padding);
+  margin-bottom: var(--dx-form-top-label-bottom-margin);
+
+  .dx-form-styling-mode-underlined & {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+.dx-field-item-label-text {
+  color: var(--dx-form-field-item-content);
+}
+
+.dx-field-item-help-text {
+  color: var(--dx-form-item-help-content);
+  padding-top: var(--dx-form-field-item-help-text-padding-block-start);
+  font-size: var(--dx-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: var(--dx-form-field-mark-content);
+}
+
+.dx-field-item-required .dx-label > span::after,
+.dx-field-item-required-mark {
+  color: var(--dx-form-field-required-content);
+}
+
+.dx-field-item-custom-label-content {
+  .dx-icon {
+    @include dx-icon-sizing(var(--dx-form-label-icon-size));
+    @include dx-icon-margin(calc(#{$global-icon-size} / 3));
+  }
+}
+
+.dx-form-group-custom-caption {
+  font-size: var(--dx-form-group-caption-font-size);
+
+  .dx-icon {
+    @include dx-icon-sizing($global-icon-size);
+    @include dx-icon-margin(var(--dx-form-group-custom-caption-icon-margin));
+  }
+}
+
+.dx-form.dx-state-disabled,
+.dx-state-disabled .dx-form,
+.dx-form .dx-box-item.dx-state-disabled {
+  .dx-field-item-label-text,
+  .dx-field-item-label .dx-field-item-optional-mark,
+  .dx-field-item-label .dx-field-item-required-mark {
+    color: var(--dx-form-field-item-content-disabled);
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/form/_public-links.scss b/packages/devextreme-scss/scss/widgets/fluent-next/form/_public-links.scss
new file mode 100644
index 000000000000..8310d8cffe20
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/form/_public-links.scss
@@ -0,0 +1,4 @@
+@mixin publish {
+  --dx-form-field-mark-content: var(--dx-form-field-item-content);
+  --dx-form-field-required-content: var(--dx-form-field-item-content);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/form/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/form/_public.scss
new file mode 100644
index 000000000000..0e14eee0cd34
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/form/_public.scss
@@ -0,0 +1,38 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+@use "public-links" as links;
+
+@mixin publish {
+  --dx-form-default-top-padding: #{$form-default-top-padding};
+  --dx-form-field-item-content: #{$form-field-item-content};
+  --dx-form-field-item-content-disabled: #{$form-field-item-content-disabled};
+  --dx-form-field-item-help-text-padding-block-start: #{$form-field-item-help-text-padding-block-start};
+  --dx-form-field-item-label-location-left-padding-inline-end: #{$form-field-item-label-location-left-padding-inline-end};
+  --dx-form-field-item-label-location-right-padding-inline-start: #{$form-field-item-label-location-right-padding-inline-start};
+  --dx-form-first-row-padding-block-start: #{$form-first-row-padding-block-start};
+  --dx-form-group-border: #{$form-group-border};
+  --dx-form-group-caption-bottom-margin: #{$form-group-caption-bottom-margin};
+  --dx-form-group-caption-font-size: #{$form-group-caption-font-size};
+  --dx-form-group-caption-top-padding: #{$form-group-caption-top-padding};
+  --dx-form-group-content-border-block-start: #{$form-group-content-border-block-start};
+  --dx-form-group-content-bottom-padding: #{$form-group-content-bottom-padding};
+  --dx-form-group-content-margin-block-start: #{$form-group-content-margin-block-start};
+  --dx-form-group-content-padding-block-end: #{$form-group-content-padding-block-end};
+  --dx-form-group-content-padding-block-start: #{$form-group-content-padding-block-start};
+  --dx-form-group-custom-caption-icon-margin: #{$form-group-custom-caption-icon-margin};
+  --dx-form-help-text-font-size: #{$form-help-text-font-size};
+  --dx-form-item-help-content: #{$form-item-help-content};
+  --dx-form-label-font-size: #{$form-label-font-size};
+  --dx-form-label-icon-size: #{$form-label-icon-size};
+  --dx-form-layout-manager-padding-block: #{$form-layout-manager-padding-block};
+  --dx-form-layout-manager-padding-inline: #{$form-layout-manager-padding-inline};
+  --dx-form-layout-manager-tabpanel-content-padding: #{$form-layout-manager-tabpanel-content-padding};
+  --dx-form-multiview-item-content-padding: #{$form-multiview-item-content-padding};
+  --dx-form-switch-margin-block-end: #{$form-switch-margin-block-end};
+  --dx-form-switch-margin-block-start: #{$form-switch-margin-block-start};
+  --dx-form-top-label-bottom-margin: #{$form-top-label-bottom-margin};
+  --dx-form-top-label-padding: #{$form-top-label-padding};
+
+  @include links.publish();
+}
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..5facd5876e1a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/form/_sizes.scss
@@ -0,0 +1,57 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$form-group-caption-bottom-margin: ds.$spacing-40 !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-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-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..02e714881a65
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gallery/_colors.scss
@@ -0,0 +1,27 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$gallery-indicator-bg: ds.$color-bg !default;
+
+$gallery-indicator-item-bg-selected: ds.$color-bg-primary !default;
+
+$gallery-indicator-bg-focused: ds.$color-bg-primary !default;
+$gallery-indicator-item-border: ds.$color-border-subtle !default;
+
+// Semi-transparent surface over the indicator — relative-color bridge.
+$gallery-indicator-border-selected: rgb(from #{ds.$color-bg} r g b / 0.8) !default;
+$gallery-nav-button-bg: ds.$color-bg-static-dark !default;
+$gallery-nav-arrow-content: ds.$color-content-static-dark !default;
+$gallery-nav-arrow-content-disabled: ds.$color-content-static-dark-disabled !default;
+
+$gallery-nav-button-bg-hovered: ds.$color-bg-static-dark-hovered !default;
+
+$gallery-nav-button-bg-active: ds.$color-bg-static-dark-active !default;
+
+$gallery-border-focused: ds.$color-border-primary-shared !default;
+
+$gallery-content-disabled: ds.$color-content-disabled !default;
+
+$gallery-nav-button-bg-disabled: ds.$color-bg-static-dark-disabled !default;
+
+$gallery-indicator-item-bg-selected-disabled: ds.$color-content-disabled !default;
+$gallery-indicator-item-bg-disabled: ds.$color-content-disabled !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..bb99a3c2b472
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gallery/_index.scss
@@ -0,0 +1,146 @@
+@use "sass:math";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../../base/gallery" with (
+  $gallery-root-border-width: var(--dx-gallery-border-width),
+  $gallery-indicator-bottom: var(--dx-gallery-indicator-inset-block-end),
+  $gallery-indicator-height: var(--dx-gallery-indicator-height),
+  $gallery-indicator-item-margin: var(--dx-gallery-indicator-item-margin),
+);
+
+.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: var(--dx-gallery-nav-button-bg-hovered);
+    }
+
+    &.dx-state-active::after {
+      background-color: var(--dx-gallery-nav-button-bg-active);
+    }
+
+    @include dx-icon-font-centered-sizing(32px); // dx-icon-glyph-size: 32px, the nav button glyph
+
+    &::after {
+      content: "";
+      position: absolute;
+      width: var(--dx-gallery-nav-button-width);
+      height: var(--dx-gallery-nav-button-height);
+      background: var(--dx-gallery-nav-button-bg);
+      border-radius: 50%;
+      top: 50%;
+      margin-top: var(--dx-gallery-nav-button-margin-block-start);
+    }
+
+    &::before {
+      position: absolute;
+      z-index: 10;
+      clear: both;
+      font-size: var(--dx-gallery-nav-icon-font-size);
+      color: var(--dx-gallery-nav-arrow-content);
+    }
+  }
+
+  .dx-gallery-nav-button-prev {
+    @include dx-icon(chevronleft);
+
+    &::after {
+      left: var(--dx-gallery-nav-button-inset-inline);
+    }
+
+    &::before {
+      left: calc(var(--dx-gallery-nav-button-inset-inline) - 1px); // dx-px-nudge: -1px off the nav button inset
+      right: auto;
+      margin-left: 0;
+    }
+  }
+
+  .dx-gallery-nav-button-next {
+    @include dx-icon(chevronright);
+
+    &::after {
+      right: var(--dx-gallery-nav-button-inset-inline);
+    }
+
+    &::before {
+      right: calc(var(--dx-gallery-nav-button-inset-inline) - 1px); // dx-px-nudge: -1px off the nav button inset
+      left: auto;
+    }
+  }
+}
+
+.dx-gallery-indicator {
+  pointer-events: none;
+  text-align: center;
+}
+
+.dx-gallery-indicator-item {
+  border-radius: 50%;
+  box-sizing: border-box;
+  border: var(--dx-gallery-indicator-item-border-width) solid;
+  border-color: var(--dx-gallery-indicator-item-border);
+  pointer-events: auto;
+  width: var(--dx-gallery-indicator-size);
+  height: var(--dx-gallery-indicator-size);
+  background: var(--dx-gallery-indicator-bg);
+}
+
+.dx-gallery-indicator-item-active,
+.dx-gallery-indicator-item-selected {
+  width: var(--dx-gallery-indicator-size-selected);
+  height: var(--dx-gallery-indicator-size-selected);
+  background: var(--dx-gallery-indicator-item-bg-selected);
+  border: var(--dx-gallery-indicator-item-border-selected);
+  border-color: var(--dx-gallery-indicator-border-selected);
+  margin: var(--dx-gallery-indicator-item-margin-selected);
+}
+
+.dx-state-focused.dx-gallery {
+  border-color: var(--dx-gallery-border-focused);
+
+  .dx-gallery-indicator-item-selected {
+    background: var(--dx-gallery-indicator-bg-focused);
+  }
+}
+
+.dx-gallery.dx-state-disabled,
+.dx-state-disabled .dx-gallery {
+  color: var(--dx-gallery-content-disabled);
+
+  .dx-gallery-nav-button-next,
+  .dx-gallery-nav-button-prev {
+    color: var(--dx-gallery-content-disabled);
+  }
+}
+
+.dx-gallery.dx-state-disabled .dx-gallery-nav-button-prev::after,
+.dx-gallery.dx-state-disabled .dx-gallery-nav-button-next::after,
+.dx-state-disabled .dx-gallery .dx-gallery-nav-button-prev::after,
+.dx-state-disabled .dx-gallery .dx-gallery-nav-button-next::after {
+  background-color: var(--dx-gallery-nav-button-bg-disabled);
+}
+
+.dx-gallery.dx-state-disabled .dx-gallery-nav-button-prev::before,
+.dx-gallery.dx-state-disabled .dx-gallery-nav-button-next::before,
+.dx-state-disabled .dx-gallery .dx-gallery-nav-button-prev::before,
+.dx-state-disabled .dx-gallery .dx-gallery-nav-button-next::before {
+  color: var(--dx-gallery-nav-arrow-content-disabled);
+}
+
+.dx-gallery.dx-state-disabled .dx-gallery-indicator-item,
+.dx-state-disabled .dx-gallery .dx-gallery-indicator-item {
+  background-color: var(--dx-gallery-indicator-item-bg-disabled);
+}
+
+.dx-gallery.dx-state-disabled .dx-gallery-indicator-item-selected,
+.dx-state-disabled .dx-gallery .dx-gallery-indicator-item-selected {
+  background-color: var(--dx-gallery-indicator-item-bg-selected-disabled);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/gallery/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/gallery/_public.scss
new file mode 100644
index 000000000000..dc1d49fb6bd1
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gallery/_public.scss
@@ -0,0 +1,35 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-gallery-border-focused: #{$gallery-border-focused};
+  --dx-gallery-border-width: #{$gallery-border-width};
+  --dx-gallery-content-disabled: #{$gallery-content-disabled};
+  --dx-gallery-indicator-bg: #{$gallery-indicator-bg};
+  --dx-gallery-indicator-bg-focused: #{$gallery-indicator-bg-focused};
+  --dx-gallery-indicator-border-selected: #{$gallery-indicator-border-selected};
+  --dx-gallery-indicator-height: #{$gallery-indicator-height};
+  --dx-gallery-indicator-inset-block-end: #{$gallery-indicator-inset-block-end};
+  --dx-gallery-indicator-item-bg-disabled: #{$gallery-indicator-item-bg-disabled};
+  --dx-gallery-indicator-item-bg-selected: #{$gallery-indicator-item-bg-selected};
+  --dx-gallery-indicator-item-bg-selected-disabled: #{$gallery-indicator-item-bg-selected-disabled};
+  --dx-gallery-indicator-item-border: #{$gallery-indicator-item-border};
+  --dx-gallery-indicator-item-border-selected: #{$gallery-indicator-item-border-selected};
+  --dx-gallery-indicator-item-border-width: #{$gallery-indicator-item-border-width};
+  --dx-gallery-indicator-item-margin: #{$gallery-indicator-item-margin};
+  --dx-gallery-indicator-item-margin-selected: #{$gallery-indicator-item-margin-selected};
+  --dx-gallery-indicator-size: #{$gallery-indicator-size};
+  --dx-gallery-indicator-size-selected: #{$gallery-indicator-size-selected};
+  --dx-gallery-nav-arrow-content: #{$gallery-nav-arrow-content};
+  --dx-gallery-nav-arrow-content-disabled: #{$gallery-nav-arrow-content-disabled};
+  --dx-gallery-nav-button-bg: #{$gallery-nav-button-bg};
+  --dx-gallery-nav-button-bg-active: #{$gallery-nav-button-bg-active};
+  --dx-gallery-nav-button-bg-disabled: #{$gallery-nav-button-bg-disabled};
+  --dx-gallery-nav-button-bg-hovered: #{$gallery-nav-button-bg-hovered};
+  --dx-gallery-nav-button-height: #{$gallery-nav-button-height};
+  --dx-gallery-nav-button-inset-inline: #{$gallery-nav-button-inset-inline};
+  --dx-gallery-nav-button-margin-block-start: #{$gallery-nav-button-margin-block-start};
+  --dx-gallery-nav-button-width: #{$gallery-nav-button-width};
+  --dx-gallery-nav-icon-font-size: #{$gallery-nav-icon-font-size};
+}
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..6d86ad38e819
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gallery/_sizes.scss
@@ -0,0 +1,28 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$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.$spacing-320 !default;
+$gallery-nav-button-width: ds.$spacing-320 !default;
+$gallery-nav-button-height: ds.$spacing-320 !default;
+$gallery-nav-button-margin-block-start: calc(#{$gallery-nav-button-height} / -2) !default;
+$gallery-indicator-item-border-width: ds.$border-width-10 !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;
+
+/*
+ * The item is centred in the indicator row, so the block margin is half the difference between the
+ * row height and the item - which is what the 5px literal in _index.scss used to spell out by hand
+ * (half of the 10px row). Written here rather than in the rule: the base layer already applies this
+ * variable to .dx-gallery-indicator-item, and the theme was overriding its own declaration in the
+ * same rule, which left --dx-gallery-indicator-item-margin dead.
+ */
+$gallery-indicator-item-margin: calc((#{$gallery-indicator-height} - #{$gallery-indicator-size}) / 2) ds.$spacing-60 !default;
+$gallery-indicator-item-margin-selected: calc((#{$gallery-indicator-height} - #{$gallery-indicator-size-selected}) / 2) ds.$spacing-60 !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..04ffe8e7fff0
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gantt/_colors.scss
@@ -0,0 +1,34 @@
+@use "../colors" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$gantt-collapsable-row-bg: ds.$color-bg-low !default;
+
+$gantt-content-disabled: ds.$color-content-disabled !default;
+
+/*
+ * 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: ds.$color-bg-primary-shared !default;
+$gantt-parent-task-bg: ds.$color-bg-success !default;
+$gantt-task-res-content: ds.$color-content-inverted !default;
+$gantt-task-res-bg: ds.$color-bg-inverted !default;
+$gantt-task-progress-bg: rgb(from #{ds.$color-bg-inverted} r g b / 0.2) !default;
+
+// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
+$gantt-bg: ds.$color-bg !default;
+$gantt-border: ds.$color-border !default;
+$gantt-content: ds.$color-content !default;
+
+// Color computations hoisted from style files (phase 0.5 layer normalization)
+$gantt-accent-border: ds.$color-border-primary !default;
+$gantt-ti-bg: ds.$color-bg-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-bg: ds.$color-bg-static-light !default;
+
+$gantt-selection-bg: ds.$color-bg-primary-subtler !default;
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..e8e4a787f515
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gantt/_index.scss
@@ -0,0 +1,295 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/gantt" with (
+  $gantt-toolbar-separator-border-left: var(--dx-gantt-toolbar-separator-border-inline-start),
+  $gantt-splitter-bar-width: var(--dx-gantt-splitter-bar-width),
+  $gantt-view-min-width: var(--dx-gantt-view-min-width),
+);
+@use "../../base/gantt/mixins" as *;
+@use "../form/sizes" as formSizes;
+@use "../splitterBar";
+@use "../gridBase/colors" as gridBaseColors;
+
+.dx-gantt {
+  border: var(--dx-gantt-border-width) solid;
+  border-color: var(--dx-gantt-border);
+
+  .dx-gantt-toolbar-wrapper {
+    padding: var(--dx-gantt-toolbar-wrapper-padding);
+    border-bottom: var(--dx-gantt-toolbar-wrapper-border-block-end);
+    border-bottom-color: var(--dx-gantt-border);
+
+    .dx-gantt-toolbar-separator {
+      border-left-color: var(--dx-gantt-border);
+    }
+
+    .dx-toolbar .dx-toolbar-items-container {
+      min-height: var(--dx-gantt-toolbar-items-container-min-height);
+    }
+  }
+
+  .dx-gantt-view {
+    background-color: var(--dx-gantt-bg);
+  }
+
+  .dx-header-row,
+  .dx-treelist-filter-row {
+    height: var(--dx-gantt-header-item-height);
+  }
+
+  .dx-gantt-header {
+    color: gridBaseColors.$grid-content;
+    font-size: formSizes.$form-label-font-size;
+
+    .dx-gantt-tsac,
+    .dx-gantt-tsa,
+    .dx-gantt-hb,
+    .dx-gantt-vb {
+      border-color: var(--dx-gantt-border);
+      background-color: var(--dx-gantt-bg);
+    }
+  }
+
+  .dx-gantt-si {
+    padding-left: var(--dx-gantt-si-padding-inline-start);
+    padding-right: var(--dx-gantt-si-padding-inline-end);
+  }
+
+  .dx-gantt-tsac,
+  .dx-gantt-tsa {
+    border-bottom: var(--dx-gantt-toolbar-wrapper-border-block-end);
+    border-bottom-color: var(--dx-gantt-border);
+  }
+
+  .dx-gantt-hb {
+    border-top: var(--dx-gantt-hb-border-block-start);
+    border-top-color: var(--dx-gantt-border);
+  }
+
+  .dx-gantt-vb {
+    border-left: var(--dx-gantt-vb-border-inline-start);
+    border-left-color: var(--dx-gantt-border);
+  }
+
+  .dx-gantt-taskWrapper {
+    padding-top: var(--dx-gantt-task-wrapper-padding-block-start);
+
+    .dx-gantt-task,
+    .dx-gantt-titleOut {
+      height: var(--dx-gantt-task-height);
+      line-height: var(--dx-gantt-task-height);
+    }
+
+    .dx-gantt-task {
+      background-color: var(--dx-gantt-task-bg);
+      border-radius: $global-border-radius;
+
+      .dx-gantt-tPrg {
+        border-radius: $global-border-radius;
+        background-color: var(--dx-gantt-task-progress-bg);
+      }
+
+      &.dx-gantt-smallTask {
+        border-radius: $global-border-radius;
+
+        .dx-gantt-titleIn {
+          padding: var(--dx-gantt-title-padding);
+        }
+      }
+
+      &.dx-gantt-parent {
+        height: calc(var(--dx-gantt-task-height) - 2px); // dx-px-nudge: -2px off the task height
+        line-height: calc(var(--dx-gantt-task-height) - 2px); // dx-px-nudge: -2px off the task height
+        background-color: var(--dx-gantt-parent-task-bg);
+        border-left-color: var(--dx-gantt-parent-task-bg);
+        border-right-color: var(--dx-gantt-parent-task-bg);
+        border-top-color: var(--dx-gantt-parent-task-bg);
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: 0;
+
+        &:not(.dx-gantt-noPrg) .dx-gantt-tPrg {
+          background-color: var(--dx-gantt-task-progress-bg);
+        }
+
+        &: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: var(--dx-gantt-task-progress-inset-block-end);
+          border-width: var(--dx-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: var(--dx-gantt-task-progress-bg);
+          border-top-color: var(--dx-gantt-task-progress-bg);
+        }
+
+        &::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: var(--dx-gantt-task-progress-bg);
+          border-top-color: var(--dx-gantt-task-progress-bg);
+        }
+
+        &.dx-gantt-cmpl .dx-gantt-tPrg::after {
+          border-right-color: var(--dx-gantt-parent-task-bg);
+          border-top-color: var(--dx-gantt-parent-task-bg);
+        }
+
+        .dx-gantt-task-edit-frame {
+          height: calc(var(--dx-gantt-task-height) - 2px); // dx-px-nudge: -2px off the task height
+        }
+      }
+    }
+
+    .dx-gantt-titleIn {
+      color: var(--dx-gantt-task-res-content);
+      padding: 0 var(--dx-gantt-task-title-padding-inline-start);
+    }
+  }
+
+  .dx-gantt-taskRes {
+    height: var(--dx-gantt-task-height);
+    line-height: var(--dx-gantt-task-height);
+    color: var(--dx-gantt-task-res-content);
+    background-color: var(--dx-gantt-task-res-bg);
+    border-radius: $global-border-radius;
+    margin-left: var(--dx-gantt-task-margin-inline-start);
+    padding-left: var(--dx-gantt-task-padding-inline-start);
+    padding-right: var(--dx-gantt-task-padding-inline-end);
+  }
+
+  .dx-gantt-titleOut {
+    padding-right: var(--dx-gantt-title-padding-inline-end);
+  }
+
+  .dx-gantt-milestone {
+    background-color: var(--dx-gantt-content);
+    width: var(--dx-gantt-milestone-size);
+    height: var(--dx-gantt-milestone-size);
+  }
+
+  .dx-gantt-task-edit-wrapper {
+    padding-top: var(--dx-gantt-task-wrapper-padding-block-start);
+    padding-left: var(--dx-gantt-task-edit-wrapper-padding-inline-start);
+
+    .dx-gantt-task-edit-frame {
+      height: 100%;
+      border: var(--dx-gantt-task-edit-frame-border);
+      border-color: var(--dx-gantt-accent-border);
+      border-radius: $global-border-radius;
+
+      .dx-gantt-task-edit-progress {
+        border-color: transparent transparent var(--dx-gantt-accent-border) transparent;
+
+        &::before {
+          width: var(--dx-gantt-task-edit-progress-width);
+          height: var(--dx-gantt-task-edit-progress-height);
+          bottom: var(--dx-gantt-edit-progress-inset-block-end);
+          border: var(--dx-gantt-task-edit-progress-border);
+          border-color: var(--dx-gantt-accent-border);
+        }
+      }
+
+      .dx-gantt-task-edit-progress-status {
+        border-radius: $global-border-radius;
+      }
+    }
+  }
+
+  .dx-gantt-task-edit-wrapper-successor {
+    padding-top: var(--dx-gantt-task-wrapper-padding-block-start);
+
+    .dx-gantt-task-edit-frame-successor {
+      height: var(--dx-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: var(--dx-gantt-successor-bg);
+    border: var(--dx-gantt-task-edit-successor-dependency-l-border);
+    border-color: var(--dx-gantt-accent-border);
+    width: var(--dx-gantt-dependency-successor-size);
+    height: var(--dx-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 * var(--dx-gantt-dependency-successor-size) - 1px); // dx-px-nudge: -1px off the dependency size
+  }
+
+  .dx-gantt-task-edit-dependency-l,
+  .dx-gantt-task-edit-successor-dependency-l {
+    right: calc(-1 * var(--dx-gantt-dependency-successor-size) - 1px); // dx-px-nudge: -1px off the dependency size
+  }
+
+  .dx-gantt-task-edit-dependency-line {
+    background-color: var(--dx-gantt-content);
+  }
+
+  .dx-gantt-sel {
+    background-color: var(--dx-gantt-selection-bg);
+  }
+
+  .dx-gantt-conn-v {
+    border-left-color: var(--dx-gantt-content);
+  }
+
+  .dx-gantt-conn-h {
+    border-top-color: var(--dx-gantt-content);
+  }
+
+  .dx-gantt-arrow {
+    border: var(--dx-gantt-arrow-border);
+    border-color: var(--dx-gantt-content);
+  }
+
+  .dx-gantt-tm {
+    border-left: var(--dx-gantt-tm-border-inline-start);
+    border-left-color: var(--dx-gantt-task-bg);
+  }
+
+  .dx-gantt-ti {
+    border-left: var(--dx-gantt-tm-border-inline-start);
+    border-left-color: var(--dx-gantt-task-bg);
+    border-right: var(--dx-gantt-ti-border-inline-end);
+    border-right-color: var(--dx-gantt-task-bg);
+    background-color: var(--dx-gantt-ti-bg);
+  }
+
+  .dx-gantt-altRow,
+  .dx-gantt-collapsable-row {
+    background-color: var(--dx-gantt-collapsable-row-bg);
+  }
+}
+
+@include gantt-icons-mixin($masked: true);
+
+.dx-gantt.dx-state-disabled,
+.dx-state-disabled .dx-gantt {
+  .dx-gantt-header {
+    color: var(--dx-gantt-content-disabled);
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/gantt/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/gantt/_public.scss
new file mode 100644
index 000000000000..1e5c8bbced30
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gantt/_public.scss
@@ -0,0 +1,54 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-gantt-accent-border: #{$gantt-accent-border};
+  --dx-gantt-arrow-border: #{$gantt-arrow-border};
+  --dx-gantt-bg: #{$gantt-bg};
+  --dx-gantt-border: #{$gantt-border};
+  --dx-gantt-border-width: #{$gantt-border-width};
+  --dx-gantt-collapsable-row-bg: #{$gantt-collapsable-row-bg};
+  --dx-gantt-content: #{$gantt-content};
+  --dx-gantt-content-disabled: #{$gantt-content-disabled};
+  --dx-gantt-dependency-successor-size: #{$gantt-dependency-successor-size};
+  --dx-gantt-edit-progress-inset-block-end: #{$gantt-edit-progress-inset-block-end};
+  --dx-gantt-hb-border-block-start: #{$gantt-hb-border-block-start};
+  --dx-gantt-header-item-height: #{$gantt-header-item-height};
+  --dx-gantt-milestone-size: #{$gantt-milestone-size};
+  --dx-gantt-parent-task-bg: #{$gantt-parent-task-bg};
+  --dx-gantt-selection-bg: #{$gantt-selection-bg};
+  --dx-gantt-si-padding-inline-end: #{$gantt-si-padding-inline-end};
+  --dx-gantt-si-padding-inline-start: #{$gantt-si-padding-inline-start};
+  --dx-gantt-splitter-bar-width: #{$gantt-splitter-bar-width};
+  --dx-gantt-successor-bg: #{$gantt-successor-bg};
+  --dx-gantt-task-bg: #{$gantt-task-bg};
+  --dx-gantt-task-edit-frame-border: #{$gantt-task-edit-frame-border};
+  --dx-gantt-task-edit-progress-border: #{$gantt-task-edit-progress-border};
+  --dx-gantt-task-edit-progress-height: #{$gantt-task-edit-progress-height};
+  --dx-gantt-task-edit-progress-width: #{$gantt-task-edit-progress-width};
+  --dx-gantt-task-edit-successor-dependency-l-border: #{$gantt-task-edit-successor-dependency-l-border};
+  --dx-gantt-task-edit-wrapper-padding-inline-start: #{$gantt-task-edit-wrapper-padding-inline-start};
+  --dx-gantt-task-height: #{$gantt-task-height};
+  --dx-gantt-task-margin-inline-start: #{$gantt-task-margin-inline-start};
+  --dx-gantt-task-padding-inline-end: #{$gantt-task-padding-inline-end};
+  --dx-gantt-task-padding-inline-start: #{$gantt-task-padding-inline-start};
+  --dx-gantt-task-progress-bg: #{$gantt-task-progress-bg};
+  --dx-gantt-task-progress-inset-block-end: #{$gantt-task-progress-inset-block-end};
+  --dx-gantt-task-progress-notch-border-width: #{$gantt-task-progress-notch-border-width};
+  --dx-gantt-task-res-bg: #{$gantt-task-res-bg};
+  --dx-gantt-task-res-content: #{$gantt-task-res-content};
+  --dx-gantt-task-title-padding-inline-start: #{$gantt-task-title-padding-inline-start};
+  --dx-gantt-task-wrapper-padding-block-start: #{$gantt-task-wrapper-padding-block-start};
+  --dx-gantt-ti-bg: #{$gantt-ti-bg};
+  --dx-gantt-ti-border-inline-end: #{$gantt-ti-border-inline-end};
+  --dx-gantt-title-padding: #{$gantt-title-padding};
+  --dx-gantt-title-padding-inline-end: #{$gantt-title-padding-inline-end};
+  --dx-gantt-tm-border-inline-start: #{$gantt-tm-border-inline-start};
+  --dx-gantt-toolbar-items-container-min-height: #{$gantt-toolbar-items-container-min-height};
+  --dx-gantt-toolbar-separator-border-inline-start: #{$gantt-toolbar-separator-border-inline-start};
+  --dx-gantt-toolbar-wrapper-border-block-end: #{$gantt-toolbar-wrapper-border-block-end};
+  --dx-gantt-toolbar-wrapper-padding: #{$gantt-toolbar-wrapper-padding};
+  --dx-gantt-vb-border-inline-start: #{$gantt-vb-border-inline-start};
+  --dx-gantt-view-min-width: #{$gantt-view-min-width};
+}
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..ce28c8d52459
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gantt/_sizes.scss
@@ -0,0 +1,58 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$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: ds.$spacing-560 !default;
+  $gantt-task-title-padding-inline-start: ds.$spacing-110 !default;
+  $gantt-task-height: ds.$spacing-280 !default;
+  $gantt-dependency-successor-size: ds.$spacing-120 !default;
+  $gantt-milestone-size: ds.$spacing-170 !default;
+}
+
+@else if $size == "compact" {
+  $gantt-header-item-height: ds.$spacing-520 !default;
+  $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: ds.$spacing-minus-80 !default;
+$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-width: ds.$border-width-10 !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: ds.$spacing-440 !default;
+
+// 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..3788edaa2b0c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_colors.scss
@@ -0,0 +1,84 @@
+@use "../colors" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$grid-content: ds.$color-content !default;
+$grid-content-disabled: ds.$color-content-disabled !default;
+
+$grid-bg: ds.$color-bg !default;
+$grid-border: ds.$color-border !default;
+
+$grid-drag-header-border: rgb(from #{ds.$color-border-primary} r g b / 0.5) !default;
+
+$grid-selection-bg: ds.$color-bg-primary-subtler !default;
+
+$grid-row-content-focused: ds.$color-content !default;
+
+$grid-row-bg-focused: ds.$color-bg-primary-subtle !default;
+
+$grid-row-bg-hovered: ds.$color-bg-alpha-hovered !default;
+$grid-row-content-hovered: ds.$color-content !default;
+
+$grid-cell-modified-bg: ds.$color-bg-success-subtler !default;
+
+$grid-row-invalid-bg: ds.$color-bg-danger-subtler !default;
+$grid-no-data-content: ds.$color-content-subtle !default;
+
+$grid-group-row-bg: ds.$color-bg !default;
+$grid-master-detail-cell-bg: ds.$color-bg-canvas !default;
+
+$grid-search-content: ds.$color-content-on-highlight !default;
+$grid-chevron-icon: ds.$color-content-subtle !default;
+
+$grid-search-bg: ds.$color-bg-highlight !default;
+
+$grid-row-error-content: ds.$color-content-static-dark !default;
+
+$grid-row-error-bg: ds.$color-bg-danger !default;
+$grid-link-content: ds.$color-content-primary !default;
+
+$grid-link-content-disabled: ds.$color-content-disabled !default;
+
+$grid-ai-chat-message-regenerate-button-content-disabled: ds.$color-content-disabled !default;
+
+$grid-border-focused: ds.$color-border-primary !default;
+
+$grid-editor-bg: transparent !default;
+$grid-drop-highlight-bg: ds.$color-bg-primary !default;
+$grid-drop-highlight-content: ds.$color-content-static-dark !default;
+$grid-column-chooser-bg: ds.$color-bg !default;
+
+$grid-row-alternation-bg: ds.$color-bg-low !default;
+
+$grid-summary-content: ds.$color-content-subtle !default;
+$grid-column-chooser-message-content: ds.$color-content-subtle !default;
+$grid-column-separator-bg: ds.$color-bg-primary !default;
+$grid-filter-row-bg: ds.$color-bg-canvas !default;
+$grid-header-filter-icon-active: ds.$color-content-primary !default;
+
+/*
+ * The virtual-row placeholder: the raster is a plain shape now, and the colour it is painted
+ * with is the design system's `skeleton` role - `color.bg-inverted` at 10% opacity. That role
+ * lives in the token package under components/, which build-tokens does not consume, so it is
+ * composed here from the two semantic tokens that do reach `ds.$`.
+ */
+$grid-text-stub-bg: rgb(from #{ds.$color-bg-inverted} r g b / 0.1) !default; // ds.$opacity-10
+$grid-filter-panel-content: ds.$color-content-primary !default;
+$grid-draggable-column-content: ds.$color-content !default;
+
+:root,
+.dx-theme-mode-light,
+.dx-theme-mode-dark,
+.dx-theme-mode-inverted {
+  --dx-datagrid-row-alternation-bg: #{$grid-row-alternation-bg};
+}
+
+// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
+$grid-ai-chat-empty-icon-bg: ds.$color-bg-primary-subtler !default;
+$grid-ai-chat-empty-icon-content: ds.$color-content-primary !default;
+$grid-ai-chat-message-pending-content: ds.$color-content-primary !default;
+$grid-ai-chat-message-border: ds.$color-border !default;
+$grid-ai-chat-message-error-content: ds.$color-content-danger !default;
+$grid-icon: ds.$color-content-subtle !default;
+$grid-ai-chat-message-success-content: ds.$color-content-success !default;
+
+$grid-content-focused: ds.$color-content-inverted !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..91ab7e81b4b0
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_index.scss
@@ -0,0 +1,1136 @@
+@use "sass:math";
+@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/sizes" as popupSizes;
+@use "../button/mixins" as *;
+@use "../button/sizes" as buttonSizes;
+@use "../../base/button/mixins" as *;
+@use "../typography/sizes" as typographySizes;
+@use "../dropDownEditor/sizes" as dropDownEditorSizes;
+@use "../scrollable";
+@use "../overlay";
+@use "../pagination";
+
+/*
+ * base/gridBase/variables holds no rules, so configuring it here changes no CSS position — and
+ * this is the first load of that module in the graph: the theme's gridBase is used before
+ * base/dataGrid and base/treeList, which are what pull base/gridBase in.
+ *
+ * Every size the shared layer used to pin is passed from here. Where the theme already won the
+ * cascade the wiring is visually neutral by construction; where it did not, the token carries the
+ * value the layer used to hold, so nothing moves either way. Both were measured in the browser
+ * against the previous build, not assumed — see .claude/measure/.
+ */
+@use "../../base/gridBase/variables" as baseGridVariables with (
+  $grid-texteditor-input-padding: var(--dx-grid-editor-input-padding),
+  $grid-command-select-column-width: var(--dx-grid-command-select-column-width),
+  $grid-command-edit-column-width: var(--dx-grid-command-edit-column-width),
+  $grid-command-edit-column-with-icons-width: var(--dx-grid-command-edit-column-with-icons-width),
+  $grid-command-expand-column-width: var(--dx-grid-command-expand-column-width),
+  $grid-command-adaptive-column-width: var(--dx-grid-command-adaptive-column-width),
+  $grid-ai-assistant-confirm-dialog-button-width: var(--dx-grid-ai-confirm-dialog-button-width),
+  $grid-context-menu-item-padding-block: var(--dx-grid-context-menu-item-padding-block),
+  $grid-context-menu-item-padding-inline-start: var(--dx-grid-context-menu-item-padding-inline-start),
+  $grid-context-menu-item-padding-inline-end: var(--dx-grid-context-menu-item-padding-inline-end),
+  $grid-context-menu-overlay-item-padding: var(--dx-grid-context-menu-overlay-item-padding),
+  $grid-context-menu-overlay-item-padding-inline-end: var(--dx-grid-context-menu-overlay-item-padding-inline-end),
+  $grid-menu-bar-item-padding: var(--dx-grid-menu-bar-item-padding),
+  $grid-menu-caption-padding-inline-start: var(--dx-grid-menu-caption-padding-inline-start),
+  $grid-column-chooser-title-font-size: var(--dx-grid-column-chooser-title-font-size),
+  $grid-column-chooser-content-padding: var(--dx-grid-column-chooser-content-padding),
+  $grid-column-chooser-item-margin-block-end: var(--dx-grid-column-chooser-item-margin-block-end),
+  $grid-column-chooser-tree-view-item-padding-inline-start: var(--dx-grid-column-chooser-tree-view-item-padding-inline-start),
+  $grid-column-separator-width: var(--dx-grid-column-separator-width),
+  $grid-toolbar-button-margin-inline-start: var(--dx-grid-toolbar-button-margin-inline-start),
+  $grid-search-panel-margin-inline-start: var(--dx-grid-search-panel-margin-inline-start),
+  $grid-rowsview-empty-height: var(--dx-grid-rowsview-empty-height),
+  $grid-bottom-load-panel-padding: var(--dx-grid-bottom-load-panel-padding),
+  $grid-filter-panel-padding: var(--dx-grid-filter-panel-padding),
+  $grid-filter-panel-checkbox-padding-inline-end: var(--dx-grid-filter-panel-checkbox-padding-inline-end),
+  $grid-filter-panel-icon-margin-inline-end: var(--dx-grid-filter-panel-icon-margin-inline-end),
+  $grid-cell-padding: var(--dx-grid-cell-content-padding),
+  $grid-total-footer-padding-block: var(--dx-grid-summary-padding-block),
+  $grid-column-header-indicator-width: var(--dx-grid-column-indicator-width),
+  $grid-text-content-margin: var(--dx-grid-header-text-margin-inline),
+  $grid-sort-index-width: var(--dx-grid-sort-index-width),
+  $grid-sort-index-offset: var(--dx-grid-sort-index-offset),
+);
+@use "../../base/gridBase/layout/aiChat/variables" as baseAiChatVariables with (
+  $ai-chat-toolbar-item-spacing: var(--dx-grid-ai-chat-toolbar-item-padding-inline-end),
+  $ai-chat-message-gap: var(--dx-grid-ai-chat-message-gap),
+  $ai-chat-message-content-gap: var(--dx-grid-ai-chat-message-content-gap),
+  $ai-chat-message-width: var(--dx-grid-ai-chat-message-min-width),
+  $ai-chat-message-regenerate-button-border-radius: var(--dx-grid-ai-chat-message-regenerate-button-border-radius),
+);
+@use "variables" as *;
+@forward "variables";
+@use "layout/cell" as *;
+@use "layout/aiChat" as *;
+@use "../button/colors" as buttonColors;
+
+@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: var(--dx-grid-border-radius);
+      border-top-right-radius: var(--dx-grid-border-radius);
+    }
+
+    .dx-bordered-bottom-view {
+      border-bottom-left-radius: var(--dx-grid-border-radius);
+      border-bottom-right-radius: var(--dx-grid-border-radius);
+    }
+
+    .dx-menu {
+      background-color: transparent;
+      margin-top: calc((var(--dx-grid-header-height) - #{buttonSizes.$button-height}) / 2);
+
+      // stylelint-disable-next-line declaration-no-important
+      margin-left: var(--dx-grid-margin-inline-start) !important;
+      height: buttonSizes.$button-height;
+
+      .dx-menu-item {
+        .dx-menu-item-content {
+          padding: var(--dx-grid-menu-item-padding);
+
+          .dx-icon {
+            @include dx-icon-sizing(var(--dx-grid-menu-item-icon-size));
+
+            margin: var(--dx-grid-icon-margin);
+          }
+        }
+      }
+    }
+
+    &.dx-filter-menu {
+      .dx-menu-item-content {
+        .dx-icon {
+          @include dx-icon-sizing(var(--dx-grid-menu-item-icon-size));
+
+          &.dx-icon-filter-operation-default {
+            margin-top: var(--dx-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: var(--dx-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(var(--dx-grid-context-menu-icon-size));
+        }
+
+        .dx-icon-context-menu-sort-desc {
+          @include dx-icon(sortdowntext);
+          @include dx-icon-sizing(var(--dx-grid-context-menu-icon-size));
+        }
+
+        .dx-icon-context-menu-sort-none {
+          @include dx-icon-sizing(var(--dx-grid-context-menu-icon-size));
+        }
+
+        .dx-icon-fix-column {
+          @include dx-icon(fixcolumn);
+          @include dx-icon-sizing(var(--dx-grid-context-menu-icon-size));
+        }
+
+        .dx-icon-fix-column-left {
+          @include dx-icon(fixcolumnleft);
+          @include dx-icon-sizing(var(--dx-grid-context-menu-icon-size));
+        }
+
+        .dx-icon-fix-column-right {
+          @include dx-icon(fixcolumnright);
+          @include dx-icon-sizing(var(--dx-grid-context-menu-icon-size));
+        }
+
+        .dx-icon-stick-column {
+          @include dx-icon(stickcolumn);
+          @include dx-icon-sizing(var(--dx-grid-context-menu-icon-size));
+        }
+
+        .dx-icon-unfix-column {
+          @include dx-icon(unfixcolumn);
+          @include dx-icon-sizing(var(--dx-grid-context-menu-icon-size));
+        }
+      }
+    }
+
+    .dx-sort-up,
+    .dx-sort-down,
+    .dx-header-filter {
+      @include dx-icon-sizing(var(--dx-grid-header-icon-size), var(--dx-grid-header-icon-container-size));
+    }
+
+    .dx-header-filter:not(.dx-header-filter-empty) {
+      color: var(--dx-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: var(--dx-grid-header-line-height);
+
+      .dx-sort-index-icon {
+        padding-right: var(--dx-grid-sort-index-icon-padding-inline-end);
+        margin-left: var(--dx-grid-sort-index-icon-margin-inline-start);
+        font-size: calc(var(--dx-grid-header-cell-font-size) - 1px); // dx-px-nudge: -1px off the header cell font size
+        position: relative;
+        bottom: var(--dx-grid-sort-index-icon-inset-block-end);
+      }
+
+      > div {
+        @include dx-icon-sizing(var(--dx-grid-header-icon-size), var(--dx-grid-header-icon-container-size));
+      }
+
+      > span {
+        margin-left: var(--dx-grid-header-cell-sort-index-margin-inline-start);
+      }
+    }
+
+    .dx-placeholder::before {
+      font-size: var(--dx-grid-cell-font-size);
+    }
+  }
+
+  .dx-#{$widget-name}.dx-state-disabled,
+  .dx-state-disabled .dx-#{$widget-name} {
+    color: var(--dx-grid-content-disabled);
+
+    .dx-#{$widget-name}-headers,
+    .dx-#{$widget-name}-rowsview,
+    .dx-#{$widget-name}-total-footer,
+    .dx-#{$widget-name}-summary-item,
+    .dx-#{$widget-name}-nodata,
+    .dx-#{$widget-name}-text-content {
+      color: var(--dx-grid-content-disabled);
+    }
+
+    .dx-link {
+      color: var(--dx-grid-content-disabled);
+    }
+  }
+
+  .dx-#{$widget-name} {
+    line-height: inherit;
+
+    .dx-row-alt {
+      &.dx-row:not(.dx-row-removed) {
+        border-bottom-color: transparent;
+      }
+
+      // T838734
+      border-top: var(--dx-grid-row-removed-border-block-start);
+      border-top-color: var(--dx-grid-row-alternation-bg);
+      border-bottom: var(--dx-grid-row-removed-border-block-end);
+      border-bottom-color: var(--dx-grid-row-alternation-bg);
+    }
+
+    .dx-link {
+      color: var(--dx-grid-link-content);
+    }
+
+    .dx-error-row {
+      .dx-closebutton {
+        float: right;
+        margin: calc(var(--dx-grid-cell-padding-block) + 2px); // dx-px-nudge: +2px over the cell padding
+
+        @include dx-icon(close);
+        @include dx-icon-sizing(14px); // dx-icon-glyph-size: 14px, the error row close glyph
+      }
+
+      .dx-error-message {
+        padding: var(--dx-grid-cell-padding-block);
+        padding-right: var(--dx-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 var(--dx-grid-command-edit-text-margin);
+            min-width: var(--dx-grid-link-icon-min-width);
+          }
+
+          &.dx-command-edit-with-icons {
+            .dx-link {
+              @include dx-icon-sizing(var(--dx-grid-command-edit-icon-size));
+
+              margin: 0 var(--dx-grid-command-edit-icon-margin);
+              vertical-align: middle;
+            }
+
+            .dx-link:not(.dx-link-icon) {
+              width: auto;
+            }
+          }
+
+          .dx-state-disabled {
+            &.dx-link,
+            &.dx-link-icon {
+              color: var(--dx-grid-link-content-disabled);
+            }
+          }
+        }
+      }
+    }
+
+    .dx-#{$widget-name}-rowsview .dx-virtual-row > td[style*="text-align: right"]:before {
+      background-position-y: 49px; // dx-fixed-size: 49px sprite offset
+    }
+
+    .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: var(--dx-grid-drop-highlight-content);
+        }
+
+        .dx-checkbox {
+          .dx-checkbox-icon {
+            background-color: var(--dx-grid-drop-highlight-content);
+            color: var(--dx-grid-drop-highlight-bg);
+          }
+        }
+      }
+    }
+  }
+
+  .dx-#{$widget-name}-edit-popup {
+    .dx-popup-content {
+      padding: 0;
+    }
+
+    .dx-error-message {
+      padding: var(--dx-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: var(--dx-grid-header-line-height);
+    }
+
+    .dx-lookup {
+      height: auto;
+
+      .dx-lookup-field {
+        padding-left: var(--dx-grid-cell-padding-inline);
+        padding-top: var(--dx-grid-cell-padding-block);
+        padding-bottom: var(--dx-grid-cell-padding-block);
+        font-size: var(--dx-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: var(--dx-drop-down-editor-invalid-badge-size);
+          }
+
+          &.dx-rtl .dx-texteditor-input {
+            padding-right: 0;
+            padding-left: var(--dx-drop-down-editor-invalid-badge-size);
+          }
+        }
+      }
+
+      &.dx-invalid,
+      &.dx-valid,
+      &.dx-validation-pending {
+        .dx-texteditor-input {
+          padding-right: var(--dx-drop-down-editor-invalid-badge-size);
+        }
+
+        &.dx-rtl .dx-texteditor-input {
+          padding-right: 0;
+          padding-left: var(--dx-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: var(--dx-grid-editor-bg);
+        box-shadow: none;
+      }
+
+      &:not(.dx-tagbox) .dx-texteditor-input {
+        background: var(--dx-grid-editor-bg);
+        font-size: var(--dx-grid-cell-font-size);
+        height: var(--dx-grid-cell-height);
+        line-height: var(--dx-grid-cell-height);
+        margin-top: 0;
+      }
+
+      &:not(.dx-tagbox):not(.dx-colorbox) .dx-texteditor-input {
+        padding: 0 var(--dx-grid-cell-padding-inline);
+      }
+
+      .dx-placeholder::before {
+        padding-right: var(--dx-grid-cell-padding-inline);
+        padding-left: var(--dx-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: var(--dx-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: var(--dx-grid-editor-bg);
+    }
+
+    &.dx-focused .dx-dropdowneditor-icon {
+      border-radius: 0;
+    }
+
+    &.dx-editor-inline-block:not(.dx-command-select) {
+      &::before {
+        padding-top: var(--dx-grid-cell-padding-block);
+        padding-bottom: var(--dx-grid-cell-padding-block);
+      }
+    }
+  }
+
+  .dx-#{$widget-name}-column-chooser-list {
+    .dx-empty-message {
+      color: var(--dx-grid-column-chooser-message-content);
+      padding: 0 var(--dx-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: var(--dx-grid-column-chooser-padding);
+
+        .dx-treeview-search {
+          margin-bottom: var(--dx-grid-tree-view-search-margin-block-end);
+        }
+
+        .dx-treeview-node {
+          padding-left: var(--dx-grid-tree-view-node-padding-inline-start);
+        }
+      }
+    }
+
+    &.dx-#{$widget-name}-column-chooser-mode-select {
+      .dx-popup-content {
+        padding: var(--dx-grid-column-chooser-padding);
+      }
+
+      .dx-#{$widget-name}-column-chooser-plain, .dx-#{$widget-name}-column-chooser-list {
+        .dx-treeview-select-all-item {
+          padding-inline-start: var(--dx-grid-tree-view-select-all-item-padding-inline-start);
+        }
+      }
+    }
+
+    .dx-overlay-content {
+      background-color: var(--dx-grid-column-chooser-bg);
+
+      .dx-popup-title {
+        background-color: transparent;
+        border-bottom: var(--dx-grid-popup-title-border-block-end);
+        border-bottom-color: var(--dx-popup-title-border);
+
+        .dx-toolbar-label {
+          font-size: typographySizes.$typography-m-font-size;
+        }
+      }
+
+      .dx-popup-content {
+        .dx-column-chooser-item {
+          margin: var(--dx-grid-column-chooser-list-item-margin);
+          background-color: var(--dx-grid-column-chooser-item-bg);
+          color: var(--dx-grid-column-chooser-item-content);
+          font-weight: var(--dx-grid-column-chooser-font-weight);
+          font-size: var(--dx-grid-header-cell-font-size);
+          padding: var(--dx-grid-cell-padding-block);
+          line-height: var(--dx-grid-header-line-height);
+          box-shadow: var(--dx-grid-drag-header-box-shadow);
+        }
+      }
+    }
+  }
+
+  .dx-#{$widget-name}-drag-header {
+    border-color: var(--dx-grid-drag-header-border);
+    box-shadow: var(--dx-grid-drag-header-box-shadow);
+    color: var(--dx-grid-column-chooser-item-content);
+    font-weight: var(--dx-grid-column-chooser-font-weight);
+    padding: var(--dx-grid-header-cell-padding-block);
+    background-color: var(--dx-grid-drag-header-bg);
+    line-height: var(--dx-grid-header-line-height);
+    font-size: var(--dx-grid-header-cell-font-size);
+  }
+
+  .dx-#{$widget-name}-columns-separator {
+    background-color: var(--dx-grid-column-separator-bg);
+  }
+
+  .dx-#{$widget-name}-columns-separator-transparent {
+    background-color: transparent;
+  }
+
+  .dx-#{$widget-name}-focus-overlay {
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      height: var(--dx-grid-column-chooser-item-height);
+      background-color: var(--dx-grid-border-focused);
+      left: 0;
+      right: var(--dx-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: var(--dx-grid-row-bg-hovered);
+          color: var(--dx-grid-row-content-hovered);
+        }
+      }
+    }
+  }
+
+  .dx-#{$widget-name}-headers {
+    color: var(--dx-grid-column-chooser-item-content);
+    touch-action: pinch-zoom;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      pointer-events: none;
+      border-bottom: var(--dx-grid-border-width) solid;
+      border-bottom-color: var(--dx-grid-border);
+    }
+
+    .dx-#{$widget-name}-table {
+      .dx-#{$widget-name}-borders & {
+        border-bottom-width: var(--dx-grid-editor-input-border-block-end-width);
+      }
+
+      .dx-row {
+        > td {
+          .dx-sort {
+            color: var(--dx-grid-header-filter-empty-icon);
+          }
+
+          &:not([class*="dx-command"], .dx-editor-cell, .dx-#{$widget-name}-group-space):hover {
+            .dx-#{$widget-name}-text-content {
+              color: var(--dx-grid-content);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .dx-#{$widget-name}-headers.dx-#{$widget-name}-scroller-spacing {
+    > .dx-#{$widget-name}-scroll-container:not(.dx-#{$widget-name}-content-fixed) {
+      box-shadow: 1px 0 0 var(--dx-grid-border); // dx-line-width: 1px hairline drawn as a shadow
+    }
+  }
+
+  .dx-#{$widget-name}-filter-row {
+    background-color: var(--dx-grid-filter-row-bg);
+
+    .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: var(--dx-menu-content);
+      }
+    }
+
+    .dx-filter-modified {
+      background-color: var(--dx-grid-cell-modified-bg);
+    }
+
+    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: var(--dx-grid-filter-row-bg);
+      box-shadow: var(--dx-grid-drag-header-box-shadow);
+
+      .dx-texteditor {
+        &.dx-state-focused::after,
+        &.dx-state-hover::after {
+          top: auto;
+          bottom: 0;
+        }
+
+        .dx-texteditor-input {
+          font-size: var(--dx-grid-cell-font-size);
+          height: calc(var(--dx-grid-cell-height) + 1px); // dx-px-nudge: +1px over the cell height
+          padding-right: var(--dx-grid-filter-row-editor-padding-inline);
+          padding-left: var(--dx-grid-filter-row-editor-padding-inline);
+        }
+
+        .dx-placeholder::before {
+          padding-left: var(--dx-grid-filter-row-editor-padding-inline);
+        }
+      }
+
+      .dx-invalid-message.dx-overlay-wrapper {
+        display: none;
+      }
+    }
+  }
+
+  .dx-#{$widget-name}-header-panel {
+    border-bottom: var(--dx-grid-border-width) solid;
+    border-bottom-color: var(--dx-grid-border);
+    padding: var(--dx-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: var(--dx-grid-icon);
+  }
+
+  .dx-row.dx-row-focused {
+    .dx-#{$widget-name}-adaptive-more {
+      color: inherit;
+    }
+  }
+
+  .dx-#{$widget-name}-rowsview {
+    border-top: var(--dx-grid-row-border-block-start-focused);
+    border-top-color: var(--dx-grid-border);
+
+    .dx-#{$widget-name}-headers + &,
+    &.dx-#{$widget-name}-after-headers {
+      border-top: none;
+    }
+
+    .dx-row {
+      border-top: var(--dx-grid-row-border);
+      border-bottom: var(--dx-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: var(--dx-grid-row-invalid-bg);
+          }
+        }
+      }
+    }
+
+    .dx-overlay-wrapper.dx-invalid-message {
+      .dx-overlay-content {
+        padding: var(--dx-grid-overlay-content-padding);
+        background-color: var(--dx-validation-message-bg);
+        color: var(--dx-validation-message-content);
+      }
+    }
+
+    .dx-adaptive-detail-row {
+      .dx-field-item-label {
+        padding-top: 0;
+      }
+
+      .dx-field-item-content {
+        line-height: var(--dx-grid-adaptive-column-height);
+        min-height: var(--dx-grid-adaptive-column-height);
+        font-size: var(--dx-grid-cell-font-size);
+
+        &.dx-focused {
+          padding: 0;
+        }
+      }
+
+      .dx-texteditor-input {
+        font-size: var(--dx-grid-cell-font-size);
+        height: var(--dx-grid-adaptive-column-height);
+        line-height: var(--dx-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: var(--dx-grid-cell-modified-bg);
+    }
+
+    .dx-row-focused {
+      &.dx-data-row {
+        & .dx-command-edit .dx-link {
+          color: var(--dx-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: var(--dx-grid-row-content-focused);
+          }
+        }
+      }
+
+      &.dx-group-row {
+        background-color: var(--dx-grid-row-bg-focused);
+        color: var(--dx-grid-row-content-focused);
+
+        & .dx-#{$widget-name}-group-opened,
+        & .dx-#{$widget-name}-group-closed {
+          color: var(--dx-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: var(--dx-invalid-badge-size);
+          background-color: transparent;
+
+          @at-root #{selector.append(".dx-rtl", &)},
+          .dx-rtl & {
+            left: var(--dx-invalid-badge-size);
+          }
+        }
+      }
+    }
+
+    &.dx-#{$widget-name}-sticky-columns {
+      .dx-row.dx-edit-row > td:not(.dx-master-detail-cell) .dx-texteditor-input {
+        height: calc(var(--dx-grid-cell-height) - 2px); // dx-px-nudge: -2px off the cell height
+        line-height: calc(var(--dx-grid-cell-height) - 2px); // dx-px-nudge: -2px off the cell height
+      }
+
+      .dx-master-detail-row > .dx-master-detail-cell {
+        > .dx-#{$widget-name}-master-detail-container {
+          padding: var(--dx-grid-master-detail-padding);
+        }
+      }
+    }
+  }
+
+  .dx-#{$widget-name}-search-text {
+    color: var(--dx-grid-search-content);
+    background-color: var(--dx-grid-search-bg);
+  }
+
+  .dx-#{$widget-name}-nodata {
+    color: var(--dx-grid-no-data-content);
+    font-size: var(--dx-grid-no-data-font-size);
+  }
+
+  .dx-#{$widget-name}-bottom-load-panel {
+    border-top: var(--dx-grid-border-width) solid;
+    border-top-color: var(--dx-grid-border);
+    background-color: var(--dx-grid-bg);
+  }
+
+  .dx-#{$widget-name}-summary-item {
+    color: var(--dx-grid-summary-content);
+  }
+
+  .dx-#{$widget-name}-total-footer {
+    border-bottom: var(--dx-grid-border-width) solid;
+    border-bottom-color: var(--dx-grid-border);
+    border-top: var(--dx-grid-border-width) solid;
+    border-top-color: var(--dx-grid-border);
+
+    > .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(
+        var(--dx-grid-revert-button-padding),
+        var(--dx-grid-revert-button-padding),
+        var(--dx-grid-revert-button-padding),
+        var(--dx-grid-revert-button-icon-size),
+        0
+      );
+
+      border-radius: buttonSizes.$button-border-radius;
+
+      @include dx-button-styling-variant(
+        buttonColors.$button-danger-contained-bg,
+        buttonColors.$button-danger-contained-content,
+        buttonColors.$button-danger-contained-content,
+        buttonColors.$button-danger-contained-content,
+        buttonColors.$button-danger-contained-bg,
+        buttonColors.$button-danger-contained-bg,
+        buttonColors.$button-danger-contained-bg,
+        buttonColors.$button-danger-contained-content
+      );
+
+      margin: var(--dx-grid-revert-button-margin);
+      height: var(--dx-grid-cell-height);
+      box-shadow: none;
+      min-width: inherit;
+
+      &.dx-button-has-icon:not(.dx-button-has-text) {
+        border-radius: var(--dx-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: var(--dx-grid-icon-margin);
+          }
+        }
+      }
+    }
+
+    .dx-#{$widget-name}-headers.dx-#{$widget-name}-scroller-spacing {
+      > .dx-#{$widget-name}-scroll-container:not(.dx-#{$widget-name}-content-fixed) {
+        box-shadow: -1px 0 0 var(--dx-grid-border); // dx-line-width: 1px hairline drawn as a shadow
+      }
+    }
+
+    .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: var(--dx-grid-content-padding);
+    }
+  }
+
+  .dx-#{$widget-name}-filter-panel {
+    background-color: var(--dx-grid-bg);
+    padding: var(--dx-grid-filter-panel-padding);
+
+    .dx-#{$widget-name}-filter-panel-text,
+    .dx-#{$widget-name}-filter-panel-clear-filter {
+      color: var(--dx-grid-filter-panel-content);
+      font-size: var(--dx-grid-cell-font-size);
+      line-height: var(--dx-grid-checkbox-size);
+    }
+
+    .dx-icon-filter {
+      color: var(--dx-grid-filter-panel-content);
+
+      @include dx-icon-sizing(var(--dx-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: var(--dx-grid-border-radius);
+
+    .dx-#{$widget-name}-borders {
+      border-radius: var(--dx-grid-border-radius);
+    }
+  }
+
+  .dx-#{$widget-name}-draggable-column {
+    color: var(--dx-grid-draggable-column-content);
+  }
+
+  .dx-command-ai-header-content {
+    max-width: calc(100% - (buttonSizes.$button-height - var(--dx-grid-cell-padding-inline) + var(--dx-grid-command-ai-button-max-width)));
+
+    .dx-#{$widget-name}-text-content {
+      padding-left: var(--dx-grid-command-ai-content-padding-inline-start);
+    }
+
+    .dx-icon-chatsparkleoutline {
+      @include dx-icon-sizing(var(--dx-grid-command-ai-icon-size));
+    }
+  }
+
+  .dx-command-ai-header-button {
+    left: auto;
+    right: var(--dx-grid-command-ai-button-max-width);
+  }
+
+  td[style*="text-align: right"] .dx-command-ai-header-button {
+    left: var(--dx-grid-command-ai-button-max-width);
+    right: auto;
+  }
+
+  .dx-ai-prompt-editor__progressbar .dx-progressbar-animating-container {
+    height: var(--dx-grid-ai-prompt-editor-progress-bar-height);
+    border-radius: 0;
+  }
+}
+
+.dx-state-disabled .dx-datagrid-adaptive-more,
+.dx-state-disabled .dx-treelist-adaptive-more {
+  color: var(--dx-grid-content-disabled);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_public-links.scss b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_public-links.scss
new file mode 100644
index 000000000000..39bc3c5e8967
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_public-links.scss
@@ -0,0 +1,15 @@
+@mixin publish {
+  --dx-grid-cell-removed-border: var(--dx-grid-border);
+  --dx-grid-cell-removed-content: var(--dx-grid-column-chooser-item-content);
+  --dx-grid-column-chooser-item-bg: var(--dx-grid-column-chooser-bg);
+  --dx-grid-column-chooser-item-content: var(--dx-grid-content);
+  --dx-grid-drag-header-bg: var(--dx-grid-bg);
+  --dx-grid-group-row-content: var(--dx-grid-column-chooser-item-content);
+  --dx-grid-header-cell-font-size: var(--dx-grid-cell-font-size);
+  --dx-grid-header-filter-empty-icon: var(--dx-grid-header-filter-icon);
+  --dx-grid-header-filter-icon: var(--dx-grid-column-chooser-item-content);
+  --dx-grid-row-border-selected: var(--dx-grid-border);
+  --dx-grid-row-content-selected: var(--dx-grid-content);
+  --dx-grid-row-removed-bg: var(--dx-grid-row-bg-hovered);
+  --dx-grid-summary-bg: var(--dx-grid-bg);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_public.scss
new file mode 100644
index 000000000000..d20e9998a664
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_public.scss
@@ -0,0 +1,168 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "layout/aiChat/sizes" as *;
+@use "sizes" as *;
+@use "variables" as *;
+@use "public-links" as links;
+
+@mixin publish {
+  --dx-grid-adaptive-column-height: #{$grid-adaptive-column-height};
+  --dx-grid-after-inset-inline-end: #{$grid-after-inset-inline-end};
+  --dx-grid-ai-chat-empty-icon-bg: #{$grid-ai-chat-empty-icon-bg};
+  --dx-grid-ai-chat-empty-icon-content: #{$grid-ai-chat-empty-icon-content};
+  --dx-grid-ai-chat-message-border: #{$grid-ai-chat-message-border};
+  --dx-grid-ai-chat-message-content-gap: #{$grid-ai-chat-message-content-gap};
+  --dx-grid-ai-chat-message-error-content: #{$grid-ai-chat-message-error-content};
+  --dx-grid-ai-chat-message-gap: #{$grid-ai-chat-message-gap};
+  --dx-grid-ai-chat-message-icon-size: #{$grid-ai-chat-message-icon-size};
+  --dx-grid-ai-chat-message-min-width: #{$grid-ai-chat-message-min-width};
+  --dx-grid-ai-chat-message-pending-content: #{$grid-ai-chat-message-pending-content};
+  --dx-grid-ai-chat-message-regenerate-button-border-radius: #{$grid-ai-chat-message-regenerate-button-border-radius};
+  --dx-grid-ai-chat-message-regenerate-button-content-disabled: #{$grid-ai-chat-message-regenerate-button-content-disabled};
+  --dx-grid-ai-chat-message-success-content: #{$grid-ai-chat-message-success-content};
+  --dx-grid-ai-chat-toolbar-item-padding-inline-end: #{$grid-ai-chat-toolbar-item-padding-inline-end};
+  --dx-grid-ai-confirm-dialog-button-width: #{$grid-ai-confirm-dialog-button-width};
+  --dx-grid-ai-prompt-editor-progress-bar-height: #{$grid-ai-prompt-editor-progress-bar-height};
+  --dx-grid-bg: #{$grid-bg};
+  --dx-grid-border: #{$grid-border};
+  --dx-grid-border-focused: #{$grid-border-focused};
+  --dx-grid-border-radius: #{$grid-border-radius};
+  --dx-grid-border-width: #{$grid-border-width};
+  --dx-grid-bottom-load-panel-padding: #{$grid-bottom-load-panel-padding};
+  --dx-grid-cell-border-inline-end: #{$grid-cell-border-inline-end};
+  --dx-grid-cell-content-padding: #{$grid-cell-content-padding};
+  --dx-grid-cell-font-size: #{$grid-cell-font-size};
+  --dx-grid-cell-height: #{$grid-cell-height};
+  --dx-grid-cell-line-height: #{$grid-cell-line-height};
+  --dx-grid-cell-modified-bg: #{$grid-cell-modified-bg};
+  --dx-grid-cell-padding: #{$grid-cell-padding};
+  --dx-grid-cell-padding-block: #{$grid-cell-padding-block};
+  --dx-grid-cell-padding-inline: #{$grid-cell-padding-inline};
+  --dx-grid-checkbox-size: #{$grid-checkbox-size};
+  --dx-grid-chevron-icon: #{$grid-chevron-icon};
+  --dx-grid-column-chooser-bg: #{$grid-column-chooser-bg};
+  --dx-grid-column-chooser-content-padding: #{$grid-column-chooser-content-padding};
+  --dx-grid-column-chooser-font-weight: #{$grid-column-chooser-font-weight};
+  --dx-grid-column-chooser-item-height: #{$grid-column-chooser-item-height};
+  --dx-grid-column-chooser-item-margin: #{$grid-column-chooser-item-margin};
+  --dx-grid-column-chooser-item-margin-block-end: #{$grid-column-chooser-item-margin-block-end};
+  --dx-grid-column-chooser-list-item-margin: #{$grid-column-chooser-list-item-margin};
+  --dx-grid-column-chooser-message-content: #{$grid-column-chooser-message-content};
+  --dx-grid-column-chooser-padding: #{$grid-column-chooser-padding};
+  --dx-grid-column-chooser-padding-inline: #{$grid-column-chooser-padding-inline};
+  --dx-grid-column-chooser-title-font-size: #{$grid-column-chooser-title-font-size};
+  --dx-grid-column-chooser-tree-view-item-padding-inline-start: #{$grid-column-chooser-tree-view-item-padding-inline-start};
+  --dx-grid-column-indicator-width: #{$grid-column-indicator-width};
+  --dx-grid-column-separator-bg: #{$grid-column-separator-bg};
+  --dx-grid-column-separator-width: #{$grid-column-separator-width};
+  --dx-grid-command-adaptive-column-width: #{$grid-command-adaptive-column-width};
+  --dx-grid-command-ai-button-max-width: #{$grid-command-ai-button-max-width};
+  --dx-grid-command-ai-content-padding-inline-start: #{$grid-command-ai-content-padding-inline-start};
+  --dx-grid-command-ai-icon-size: #{$grid-command-ai-icon-size};
+  --dx-grid-command-edit-column-width: #{$grid-command-edit-column-width};
+  --dx-grid-command-edit-column-with-icons-width: #{$grid-command-edit-column-with-icons-width};
+  --dx-grid-command-edit-icon-margin: #{$grid-command-edit-icon-margin};
+  --dx-grid-command-edit-icon-size: #{$grid-command-edit-icon-size};
+  --dx-grid-command-edit-text-margin: #{$grid-command-edit-text-margin};
+  --dx-grid-command-expand-column-width: #{$grid-command-expand-column-width};
+  --dx-grid-command-select-column-width: #{$grid-command-select-column-width};
+  --dx-grid-content: #{$grid-content};
+  --dx-grid-content-disabled: #{$grid-content-disabled};
+  --dx-grid-content-focused: #{$grid-content-focused};
+  --dx-grid-content-padding: #{$grid-content-padding};
+  --dx-grid-context-menu-icon-size: #{$grid-context-menu-icon-size};
+  --dx-grid-context-menu-item-padding-block: #{$grid-context-menu-item-padding-block};
+  --dx-grid-context-menu-item-padding-inline-end: #{$grid-context-menu-item-padding-inline-end};
+  --dx-grid-context-menu-item-padding-inline-start: #{$grid-context-menu-item-padding-inline-start};
+  --dx-grid-context-menu-overlay-item-padding: #{$grid-context-menu-overlay-item-padding};
+  --dx-grid-context-menu-overlay-item-padding-inline-end: #{$grid-context-menu-overlay-item-padding-inline-end};
+  --dx-grid-drag-header-border: #{$grid-drag-header-border};
+  --dx-grid-drag-header-box-shadow: #{$grid-drag-header-box-shadow};
+  --dx-grid-draggable-column-content: #{$grid-draggable-column-content};
+  --dx-grid-draggable-column-opacity: #{$grid-draggable-column-opacity};
+  --dx-grid-drop-highlight-bg: #{$grid-drop-highlight-bg};
+  --dx-grid-drop-highlight-content: #{$grid-drop-highlight-content};
+  --dx-grid-editor-bg: #{$grid-editor-bg};
+  --dx-grid-editor-input-border-block-end-width: #{$grid-editor-input-border-block-end-width};
+  --dx-grid-editor-input-padding: #{$grid-editor-input-padding};
+  --dx-grid-error-message-padding-inline-end: #{$grid-error-message-padding-inline-end};
+  --dx-grid-filter-operation-icon-margin-block-start: #{$grid-filter-operation-icon-margin-block-start};
+  --dx-grid-filter-panel-checkbox-padding-inline-end: #{$grid-filter-panel-checkbox-padding-inline-end};
+  --dx-grid-filter-panel-content: #{$grid-filter-panel-content};
+  --dx-grid-filter-panel-icon-margin-inline-end: #{$grid-filter-panel-icon-margin-inline-end};
+  --dx-grid-filter-panel-icon-size: #{$grid-filter-panel-icon-size};
+  --dx-grid-filter-panel-padding: #{$grid-filter-panel-padding};
+  --dx-grid-filter-row-bg: #{$grid-filter-row-bg};
+  --dx-grid-filter-row-editor-padding-inline: #{$grid-filter-row-editor-padding-inline};
+  --dx-grid-group-panel-item-margin-inline: #{$grid-group-panel-item-margin-inline};
+  --dx-grid-group-panel-message-line-height: #{$grid-group-panel-message-line-height};
+  --dx-grid-group-row-bg: #{$grid-group-row-bg};
+  --dx-grid-header-cell-padding-block: #{$grid-header-cell-padding-block};
+  --dx-grid-header-cell-sort-index-margin-inline-start: #{$grid-header-cell-sort-index-margin-inline-start};
+  --dx-grid-header-filter-icon-active: #{$grid-header-filter-icon-active};
+  --dx-grid-header-height: #{$grid-header-height};
+  --dx-grid-header-icon-container-size: #{$grid-header-icon-container-size};
+  --dx-grid-header-icon-size: #{$grid-header-icon-size};
+  --dx-grid-header-line-height: #{$grid-header-line-height};
+  --dx-grid-header-panel-padding: #{$grid-header-panel-padding};
+  --dx-grid-header-row-padding-block-end: #{$grid-header-row-padding-block-end};
+  --dx-grid-header-row-padding-block-start: #{$grid-header-row-padding-block-start};
+  --dx-grid-header-text-margin-inline: #{$grid-header-text-margin-inline};
+  --dx-grid-hidden-border: #{$grid-hidden-border};
+  --dx-grid-icon: #{$grid-icon};
+  --dx-grid-icon-button-border-radius: #{$grid-icon-button-border-radius};
+  --dx-grid-icon-margin: #{$grid-icon-margin};
+  --dx-grid-link-content: #{$grid-link-content};
+  --dx-grid-link-content-disabled: #{$grid-link-content-disabled};
+  --dx-grid-link-icon-min-width: #{$grid-link-icon-min-width};
+  --dx-grid-margin-inline-start: #{$grid-margin-inline-start};
+  --dx-grid-master-detail-cell-bg: #{$grid-master-detail-cell-bg};
+  --dx-grid-master-detail-padding: #{$grid-master-detail-padding};
+  --dx-grid-menu-bar-item-padding: #{$grid-menu-bar-item-padding};
+  --dx-grid-menu-caption-padding-inline-start: #{$grid-menu-caption-padding-inline-start};
+  --dx-grid-menu-item-icon-size: #{$grid-menu-item-icon-size};
+  --dx-grid-menu-item-padding: #{$grid-menu-item-padding};
+  --dx-grid-no-data-content: #{$grid-no-data-content};
+  --dx-grid-no-data-font-size: #{$grid-no-data-font-size};
+  --dx-grid-outline-focused: #{$grid-outline-focused};
+  --dx-grid-overlay-content-padding: #{$grid-overlay-content-padding};
+  --dx-grid-popup-title-border-block-end: #{$grid-popup-title-border-block-end};
+  --dx-grid-revert-button-icon-size: #{$grid-revert-button-icon-size};
+  --dx-grid-revert-button-margin: #{$grid-revert-button-margin};
+  --dx-grid-revert-button-padding: #{$grid-revert-button-padding};
+  --dx-grid-row-alternation-bg: #{$grid-row-alternation-bg};
+  --dx-grid-row-bg-focused: #{$grid-row-bg-focused};
+  --dx-grid-row-bg-hovered: #{$grid-row-bg-hovered};
+  --dx-grid-row-border: #{$grid-row-border};
+  --dx-grid-row-border-block-start-focused: #{$grid-row-border-block-start-focused};
+  --dx-grid-row-content-focused: #{$grid-row-content-focused};
+  --dx-grid-row-content-hovered: #{$grid-row-content-hovered};
+  --dx-grid-row-error-bg: #{$grid-row-error-bg};
+  --dx-grid-row-error-content: #{$grid-row-error-content};
+  --dx-grid-row-invalid-bg: #{$grid-row-invalid-bg};
+  --dx-grid-row-lines-border-block-end: #{$grid-row-lines-border-block-end};
+  --dx-grid-row-lines-border-block-start: #{$grid-row-lines-border-block-start};
+  --dx-grid-row-lines-border-inline-start: #{$grid-row-lines-border-inline-start};
+  --dx-grid-row-removed-border-block-end: #{$grid-row-removed-border-block-end};
+  --dx-grid-row-removed-border-block-start: #{$grid-row-removed-border-block-start};
+  --dx-grid-rowsview-empty-height: #{$grid-rowsview-empty-height};
+  --dx-grid-search-bg: #{$grid-search-bg};
+  --dx-grid-search-content: #{$grid-search-content};
+  --dx-grid-search-panel-margin-inline-start: #{$grid-search-panel-margin-inline-start};
+  --dx-grid-selection-bg: #{$grid-selection-bg};
+  --dx-grid-sort-index-icon-inset-block-end: #{$grid-sort-index-icon-inset-block-end};
+  --dx-grid-sort-index-icon-margin-inline-start: #{$grid-sort-index-icon-margin-inline-start};
+  --dx-grid-sort-index-icon-padding-inline-end: #{$grid-sort-index-icon-padding-inline-end};
+  --dx-grid-sort-index-offset: #{$grid-sort-index-offset};
+  --dx-grid-sort-index-width: #{$grid-sort-index-width};
+  --dx-grid-summary-content: #{$grid-summary-content};
+  --dx-grid-summary-padding-block: #{$grid-summary-padding-block};
+  --dx-grid-text-stub-bg: #{$grid-text-stub-bg};
+  --dx-grid-toolbar-button-margin-inline-start: #{$grid-toolbar-button-margin-inline-start};
+  --dx-grid-tree-view-node-padding-inline-start: #{$grid-tree-view-node-padding-inline-start};
+  --dx-grid-tree-view-search-margin-block-end: #{$grid-tree-view-search-margin-block-end};
+  --dx-grid-tree-view-select-all-item-padding-inline-start: #{$grid-tree-view-select-all-item-padding-inline-start};
+  --dx-grid-validation-pending-padding: #{$grid-validation-pending-padding};
+
+  @include links.publish();
+}
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..7668905c796a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_sizes.scss
@@ -0,0 +1,188 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+@use "../button/sizes" as buttonSizes;
+
+// Not colours: a font weight and two opacities (NAMING.md O7)
+$grid-column-chooser-font-weight: ds.$font-weight-base-strong !default;
+$grid-group-panel-message-line-height: buttonSizes.$button-text-line-height !default;
+
+$grid-border-width: 1px !default; // dx-line-width: 1px
+$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: ds.$spacing-60 !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: ds.$spacing-100 !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-outline-focused: ds.$spacing-20 solid !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-command-edit-column-width: ds.$spacing-1200 !default;
+  $grid-command-edit-column-with-icons-width: ds.$spacing-940 !default;
+  $grid-adaptive-column-height: ds.$spacing-400 !default;
+  $grid-no-data-font-size: ds.$spacing-170 !default; // dx-foreign-scale: 17px, the font-size scale has no such step
+
+  $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} + #{ds.$spacing-80}) !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-command-edit-column-width: ds.$spacing-1000 !default;
+  $grid-command-edit-column-with-icons-width: ds.$spacing-800 !default;
+  $grid-adaptive-column-height: ds.$spacing-260 !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} + #{ds.$spacing-60}) !default;
+  $grid-command-ai-button-max-width: ds.$spacing-60 !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 !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: ds.$spacing-360 !default;
+$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-revert-button-padding: ds.$spacing-20 !default;
+$grid-revert-button-icon-size: ds.$spacing-180 !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;
+
+// Command column widths the shared layer used to pin; the theme owns them now
+$grid-command-expand-column-width: ds.$spacing-300 !default;
+
+/*
+ * The same expression the theme's own .dx-command-adaptive rule computes, so the shared layer
+ * stops asserting 36px while the theme renders something else.
+ */
+$grid-command-adaptive-column-width: calc(2 * #{$grid-cell-padding-inline} + #{$global-icon-size}) !default;
+$grid-ai-confirm-dialog-button-width: ds.$spacing-520 !default;
+
+// Sizes hoisted out of the shared layer's rules; values match what it used to pin
+$grid-context-menu-item-padding-block: ds.$spacing-70 !default;
+$grid-context-menu-item-padding-inline-start: ds.$spacing-50 !default;
+$grid-context-menu-item-padding-inline-end: ds.$spacing-300 !default;
+$grid-context-menu-overlay-item-padding: ds.$spacing-50 !default;
+$grid-context-menu-overlay-item-padding-inline-end: ds.$spacing-300 !default;
+$grid-menu-bar-item-padding: ds.$spacing-80 ds.$spacing-50 ds.$spacing-70 ds.$spacing-50 !default;
+$grid-menu-caption-padding-inline-start: ds.$spacing-60 !default;
+$grid-column-chooser-title-font-size: ds.$font-size-160 !default;
+$grid-column-chooser-content-padding: 0 ds.$spacing-200 ds.$spacing-200 ds.$spacing-200 !default;
+$grid-column-chooser-item-margin-block-end: ds.$spacing-100 !default;
+$grid-column-chooser-tree-view-item-padding-inline-start: ds.$spacing-40 !default;
+$grid-column-separator-width: ds.$spacing-30 !default;
+$grid-toolbar-button-margin-inline-start: ds.$spacing-100 !default;
+$grid-search-panel-margin-inline-start: ds.$spacing-150 !default;
+$grid-rowsview-empty-height: ds.$spacing-1000 !default;
+$grid-bottom-load-panel-padding: ds.$spacing-100 !default;
+$grid-filter-panel-checkbox-padding-inline-end: ds.$spacing-100 !default;
+$grid-filter-panel-icon-margin-inline-end: ds.$spacing-70 !default;
+
+// The last of the shared layer's sizes: read in arithmetic, so base goes through its dual-mode helpers
+$grid-cell-content-padding: ds.$spacing-70 !default;
+$grid-summary-padding-block: ds.$spacing-140 !default;
+$grid-column-indicator-width: ds.$spacing-140 !default;
+$grid-header-text-margin-inline: ds.$spacing-30 !default;
+$grid-sort-index-width: ds.$spacing-120 !default;
+$grid-sort-index-offset: ds.$spacing-30 !default;
+
+$grid-draggable-column-opacity: ds.$opacity-65 !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..9e6a0474a179
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_variables.scss
@@ -0,0 +1,13 @@
+@use "sass:math";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$grid-cell-padding-block: calc((#{$grid-cell-height} - #{$grid-cell-line-height}) / 2) !default;
+$grid-cell-padding: $grid-cell-padding-block $grid-cell-padding-inline !default;
+$grid-header-cell-padding-block: calc((#{$grid-header-height} - #{$grid-header-line-height}) / 2) !default;
+$grid-command-select-column-width: calc(#{$grid-checkbox-size} + 2 * #{$grid-cell-padding-inline}) !default;
+$grid-context-menu-icon-size: calc(#{$grid-menu-item-icon-size} - #{ds.$spacing-40}) !default;
+$grid-master-detail-padding: ds.$spacing-160 !default;
+
+$grid-drag-header-box-shadow: ds.$box-shadow-xs !default;
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..b9574614e0fc
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/layout/aiChat/_index.scss
@@ -0,0 +1,22 @@
+@use "../../colors" as *;
+@use "../../../../base/gridBase/layout/aiChat/mixins" as *;
+@use "../../../colors" as *;
+@use "./sizes" as *;
+@use "../../../button/colors" as buttonColors;
+@include ai-chat-messagelist-empty(
+  var(--dx-grid-ai-chat-empty-icon-content),
+  var(--dx-grid-ai-chat-empty-icon-bg),
+);
+@include ai-chat-message-pending(var(--dx-grid-ai-chat-message-pending-content));
+@include ai-chat-message-success(var(--dx-grid-ai-chat-message-success-content));
+@include ai-chat-message-error(var(--dx-grid-ai-chat-message-error-content));
+@include ai-chat-messagebubble-border(var(--dx-grid-ai-chat-message-border));
+@include ai-chat-message-regenerate-button(buttonColors.$button-normal-contained-bg-active);
+@include ai-chat-message-icon(var(--dx-grid-ai-chat-message-icon-size));
+
+.dx-ai-chat--disabled .dx-ai-chat__message-regenerate-button {
+  color: var(--dx-grid-ai-chat-message-regenerate-button-content-disabled);
+  cursor: default;
+  user-select: none;
+  -webkit-touch-callout: none;
+}
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..9f5c61b26e41
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/layout/aiChat/_sizes.scss
@@ -0,0 +1,11 @@
+@use "../../../sizes" as *;
+@use "../../../../../_design-system/variables/ds" as ds;
+
+$grid-ai-chat-message-icon-size: $global-icon-size !default;
+
+// Values hoisted from the shared layer's fixed sizes (tokenized)
+$grid-ai-chat-toolbar-item-padding-inline-end: ds.$spacing-40 !default;
+$grid-ai-chat-message-gap: ds.$spacing-80 !default;
+$grid-ai-chat-message-content-gap: ds.$spacing-40 !default;
+$grid-ai-chat-message-min-width: 280px !default; // dx-offscale: 280px, the width the message column is designed around
+$grid-ai-chat-message-regenerate-button-border-radius: ds.$border-radius-40 !default;
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..ffcecca85fb3
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/layout/cell.scss
@@ -0,0 +1,551 @@
+/* stylelint-disable no-duplicate-selectors */
+@use "sass:math";
+@use "../colors" as *;
+@use "../sizes" as *;
+@use "../../sizes" as *;
+@use "../../textEditor" as *;
+@use "../variables" as *;
+
+@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 * var(--dx-grid-cell-padding-inline) + #{$global-icon-size});
+    min-width: calc(2 * var(--dx-grid-cell-padding-inline) + #{$global-icon-size});
+  }
+
+  // (0,2,0)
+  .dx-#{$widget-name} .dx-command-drag {
+    width: calc(2 * var(--dx-grid-cell-padding-inline) + #{$global-icon-size});
+    min-width: calc(2 * var(--dx-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: var(--dx-grid-command-select-column-width);
+    min-width: var(--dx-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: var(--dx-grid-command-edit-column-width);
+    min-width: var(--dx-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: var(--dx-grid-command-edit-column-with-icons-width);
+    min-width: var(--dx-grid-command-edit-column-with-icons-width);
+  }
+
+  // #endregion
+
+  // #region border
+
+  // (0,2,1)
+  .dx-#{$widget-name} .dx-row-lines > td {
+    border-bottom: var(--dx-grid-border-width) solid;
+    border-bottom-color: var(--dx-grid-border);
+  }
+
+  // (0,2,1)
+  .dx-#{$widget-name} .dx-column-lines > td {
+    border-left: var(--dx-grid-border-width) solid;
+    border-left-color: var(--dx-grid-border);
+    border-right: var(--dx-grid-border-width) solid;
+    border-right-color: var(--dx-grid-border);
+  }
+
+  // (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: var(--dx-grid-border-width) solid;
+    border-top-color: var(--dx-grid-border);
+    border-bottom: var(--dx-grid-border-width) solid;
+    border-bottom-color: var(--dx-grid-border);
+  }
+
+  // (0,3,1)
+  .dx-#{$widget-name}-headers .dx-#{$widget-name}-table .dx-row > td {
+    border-bottom: var(--dx-grid-border-width) solid;
+    border-bottom-color: var(--dx-grid-border);
+  }
+
+  // (0,3,1)
+  .dx-#{$widget-name}-rowsview .dx-row.dx-edit-row > td {
+    border-top: var(--dx-grid-border-width) solid;
+    border-top-color: var(--dx-grid-border);
+    border-bottom: var(--dx-grid-border-width) solid;
+    border-bottom-color: var(--dx-grid-border);
+  }
+
+  // (0,3,1)
+  .dx-#{$widget-name}-rowsview .dx-row-removed.dx-row-lines > td {
+    border-top: var(--dx-grid-row-lines-border-block-start);
+    border-top-color: var(--dx-grid-cell-removed-border);
+    border-bottom: var(--dx-grid-row-lines-border-block-end);
+    border-bottom-color: var(--dx-grid-cell-removed-border);
+  }
+
+  // (0,3,1)
+  .dx-#{$widget-name}-rowsview .dx-row-removed:not(.dx-row-lines) > td {
+    border-top: var(--dx-grid-row-lines-border-block-start);
+    border-top-color: var(--dx-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: var(--dx-grid-row-lines-border-block-end);
+    border-bottom-color: var(--dx-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: var(--dx-grid-border-width) solid;
+    border-bottom-color: var(--dx-grid-border);
+  }
+
+  // (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: var(--dx-grid-selection-bg);
+  }
+
+  // (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: var(--dx-grid-row-border-selected);
+    border-right-color: var(--dx-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: var(--dx-grid-row-lines-border-block-end);
+    border-bottom-color: var(--dx-grid-selection-bg);
+    border-top: var(--dx-grid-row-lines-border-block-start);
+    border-top-color: var(--dx-grid-selection-bg);
+  }
+
+  // (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: var(--dx-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: var(--dx-grid-row-lines-border-inline-start);
+    border-left-color: var(--dx-grid-border);
+  }
+
+  // (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: var(--dx-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: var(--dx-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: var(--dx-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: var(--dx-grid-cell-border-inline-end);
+    border-right-color: var(--dx-grid-border);
+  }
+
+  // (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: var(--dx-grid-selection-bg);
+  }
+
+  // #endregion
+
+  // #region border-radius
+
+  // (0,4,1)
+  .dx-#{$widget-name} .dx-#{$widget-name}-table .dx-header-row > td:first-child {
+    border-top-left-radius: var(--dx-grid-border-radius);
+  }
+
+  // (0,4,1)
+  .dx-#{$widget-name} .dx-#{$widget-name}-table .dx-header-row > td:last-child {
+    border-top-right-radius: var(--dx-grid-border-radius);
+  }
+
+  // #endregion
+
+  // #region padding
+
+  // (0,1,0)
+  .dx-cell-modified,
+  .dx-#{$widget-name}-invalid {
+    padding: var(--dx-grid-cell-padding-block) 0 var(--dx-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: var(--dx-grid-cell-padding-block) var(--dx-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: var(--dx-grid-master-detail-padding);
+  }
+
+  // (0,3,1)
+  .dx-#{$widget-name} .dx-#{$widget-name}-table .dx-header-row > td {
+    padding-top: var(--dx-grid-header-cell-padding-block);
+    padding-bottom: var(--dx-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: var(--dx-grid-cell-padding);
+    padding-right: calc(var(--dx-invalid-badge-size) + 2 * var(--dx-invalid-badge-padding-inline));
+  }
+
+  // (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: calc(var(--dx-invalid-badge-size) + 2 * var(--dx-invalid-badge-padding-inline));
+    padding-right: var(--dx-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, .dx-command-drag) {
+    padding-top: calc(var(--dx-grid-cell-padding-block) + 1px); // dx-px-nudge: +1px over the cell padding
+  }
+
+  // (0,5,1)
+  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row.dx-edit-row > td.dx-command-edit {
+    padding-top: calc(var(--dx-grid-cell-padding-block) - 1px); // dx-px-nudge: -1px off the cell padding
+  }
+
+  // (0,6,1)
+  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-data-row.dx-row-focused:not(.dx-row-lines, .dx-edit-row, .dx-row-removed) > td:not(.dx-editor-cell, .dx-master-detail-cell, .dx-command-drag) {
+    padding-top: calc(var(--dx-grid-cell-padding-block) + 1px); // dx-px-nudge: +1px over the cell padding
+  }
+
+  // (0,6,1)
+  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-data-row.dx-row-focused:not(.dx-row-lines, .dx-edit-row, .dx-row-removed) > td.dx-command-drag {
+    padding-top: 1px; // dx-px-nudge: 1px, the same correction where the cell has no base padding
+  }
+
+  // (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: var(--dx-grid-header-row-padding-block-start);
+    padding-bottom: var(--dx-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: var(--dx-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((var(--dx-grid-header-height) - var(--dx-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-command-drag),
+  .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, .dx-command-drag) {
+    padding-bottom: calc(var(--dx-grid-cell-padding-block) - 1px); // dx-px-nudge: -1px off the cell padding
+  }
+
+  // (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: var(--dx-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: var(--dx-grid-row-alternation-bg);
+  }
+
+  // (0,2,1)
+  .dx-#{$widget-name} .dx-#{$widget-name}-drop-highlight > td {
+    background-color: var(--dx-grid-drop-highlight-bg);
+  }
+
+  // (0,2,1)
+  .dx-#{$widget-name}-rowsview .dx-row-removed > td {
+    background-color: var(--dx-grid-row-removed-bg);
+  }
+
+  // (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: var(--dx-grid-master-detail-cell-bg);
+  }
+
+  // (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: var(--dx-grid-cell-modified-bg);
+  }
+
+  // (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: var(--dx-grid-filter-row-bg);
+  }
+
+  // (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: var(--dx-grid-selection-bg);
+  }
+
+  // (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: var(--dx-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: var(--dx-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: var(--dx-grid-bg);
+  }
+
+  // (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: var(--dx-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: var(--dx-grid-drop-highlight-content);
+  }
+
+  // (0,2,1)
+  .dx-#{$widget-name}-rowsview .dx-row-removed > td {
+    color: var(--dx-grid-cell-removed-content);
+  }
+
+  // (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: var(--dx-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: var(--dx-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: var(--dx-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: var(--dx-grid-content);
+  }
+
+  // #endregion
+
+  // #region typography
+
+  // (0,2,1)
+  .dx-#{$widget-name} .dx-row > td {
+    font-size: var(--dx-grid-cell-font-size);
+    line-height: var(--dx-grid-cell-line-height);
+  }
+
+  // (0,3,1)
+  .dx-#{$widget-name}-headers .dx-#{$widget-name}-table .dx-row > td {
+    line-height: var(--dx-grid-header-line-height);
+    font-weight: var(--dx-grid-column-chooser-font-weight);
+    font-size: var(--dx-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..9be764469620
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_colors.scss
@@ -0,0 +1,19 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$html-editor-toolbar-border: ds.$color-border-subtle !default;
+$html-editor-variable-bg: ds.$color-bg-primary-alpha-hovered !default;
+$html-editor-resize-frame-border: ds.$color-border-primary !default;
+$html-editor-resize-trigger: ds.$color-bg-primary !default;
+$html-editor-table-border: ds.$color-border !default;
+$html-editor-file-uploader-input-wrapper-border: ds.$color-border !default;
+$html-editor-file-uploader-input-wrapper-bg: ds.$color-bg-canvas !default;
+
+// Color computations hoisted from style files (phase 0.5 layer normalization)
+$html-editor-cover-bg: rgb(from #{ds.$color-bg} r g b / 0.4) !default;
+$html-editor-faded-content: rgb(from #{ds.$color-content} r g b / 0.8) !default;
+$html-editor-uploader-cover-bg: rgb(from #{ds.$color-border} r g b / 0.8) !default;
+$html-editor-highlighted-row-bg: ds.$color-bg-primary-alpha-active !default;
+
+// Base-layer values injected with design tokens (wave B1)
+$html-editor-code-block-bg: ds.$color-bg-active !default;
+$html-editor-placeholder-content: ds.$color-content-subtler !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..98a0ddfa56aa
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_index.scss
@@ -0,0 +1,337 @@
+@use "../textEditor/colors" as textEditorColors;
+@use "sass:math";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../button/sizes" as buttonSizes;
+@use "../textEditor/index" as *;
+@use "../toolbar/sizes" as toolbarSizes;
+@use "../common/mixins" as *;
+@use "../fileUploader/sizes" as fileUploaderSizes;
+@use "../popup/sizes" as popupSizes;
+@use "../../base/mixins" as *;
+@use "../../base/htmlEditor" with (
+  $htmleditor-border-width: var(--dx-html-editor-border-width),
+  $variable-padding: var(--dx-html-editor-variable-padding),
+  $variable-border-radius: var(--dx-html-editor-variable-border-radius),
+  $blockquote-padding-inline-start: var(--dx-html-editor-blockquote-padding-inline-start),
+  $blockquote-border-inline-start-width: var(--dx-html-editor-blockquote-border-inline-start-width),
+  $table-cell-padding: var(--dx-html-editor-table-cell-padding),
+  $placeholder-inset-inline: var(--dx-html-editor-placeholder-inset-inline),
+  $htmleditor-content-padding: var(--dx-html-editor-padding-block) var(--dx-html-editor-padding-inline),
+  $mention-padding-block: var(--dx-mention-padding-block),
+  $mention-border-radius: var(--dx-mention-border-radius),
+  $mention-margin-inline: var(--dx-mention-margin-inline),
+  $table-resizer-thickness: var(--dx-html-editor-table-resizer-thickness),
+  $table-resizer-highlight-thickness: var(--dx-html-editor-table-resizer-highlight-thickness),
+  $htmleditor-code-block-bg: var(--dx-html-editor-code-block-bg),
+  $htmleditor-placeholder-color: var(--dx-html-editor-placeholder-content),
+  $htmleditor-aidialog-title-font-weight: var(--dx-html-editor-ai-dialog-title-font-weight),
+);
+
+.dx-htmleditor {
+  border-color: transparent;
+  position: relative;
+
+  .dx-htmleditor-toolbar-wrapper {
+    padding: 0 var(--dx-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: var(--dx-html-editor-toolbar-wrapper-inset-block-start);
+      bottom: var(--dx-html-editor-toolbar-wrapper-inset-block-end);
+      left: var(--dx-html-editor-toolbar-wrapper-inset-inline-start);
+      right: var(--dx-html-editor-toolbar-wrapper-inset-inline-end);
+      z-index: 2;
+      background-color: var(--dx-html-editor-cover-bg);
+      content: "";
+      pointer-events: none;
+    }
+  }
+
+  &.dx-state-focused,
+  &.dx-state-active {
+    &::before {
+      border-bottom: var(--dx-html-editor-border-block-end-active);
+      border-bottom-color: var(--dx-text-editor-indicator);
+      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: var(--dx-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-invalid.dx-htmleditor {
+  &.dx-state-hover {
+    &::after {
+      border-bottom-color: var(--dx-text-editor-invalid-border);
+    }
+  }
+
+  &.dx-state-focused,
+  &.dx-state-active {
+    &::before {
+      border-bottom: var(--dx-html-editor-border-block-end-active);
+      border-bottom-color: var(--dx-text-editor-invalid-border-focused);
+    }
+  }
+}
+
+.dx-htmleditor-content {
+  line-height: var(--dx-global-line-height);
+
+  &.ql-blank::before { // stylelint-disable-line selector-class-pattern
+    color: textEditorColors.$text-editor-placeholder;
+  }
+
+  code,
+  .ql-code-block-container { // stylelint-disable-line selector-class-pattern
+    color: var(--dx-html-editor-faded-content);
+  }
+
+  blockquote {
+    color: var(--dx-html-editor-faded-content);
+    border-inline-start-color: var(--dx-html-editor-toolbar-border);
+  }
+
+  .dx-variable {
+    & > span {
+      background: var(--dx-html-editor-variable-bg);
+    }
+  }
+
+  td,
+  th {
+    border-color: var(--dx-html-editor-table-border);
+  }
+}
+
+@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-px-nudge: -3px off the button padding
+    }
+  }
+
+  &.dx-size-format {
+    width: var(--dx-html-editor-toolbar-size-editor-width);
+  }
+}
+
+.dx-htmleditor-toolbar-separator {
+  height: calc(#{toolbarSizes.$toolbar-height} / 2);
+  border-inline-start-color: var(--dx-html-editor-toolbar-border);
+}
+
+.dx-htmleditor-toolbar-menu-separator {
+  border-top-color: var(--dx-html-editor-toolbar-border);
+  margin-top: var(--dx-html-editor-toolbar-menu-separator-margin);
+  margin-bottom: var(--dx-html-editor-toolbar-menu-separator-margin);
+}
+
+.dx-resize-frame {
+  border-color: var(--dx-html-editor-resize-frame-border);
+
+  .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: var(--dx-html-editor-resize-trigger);
+  }
+
+  .dx-resizable-handle-top,
+  .dx-resizable-handle-left,
+  .dx-resizable-handle-right,
+  .dx-resizable-handle-bottom {
+    &::after {
+      background-color: var(--dx-html-editor-resize-trigger);
+    }
+  }
+}
+
+.dx-htmleditor-add-image-popup > .dx-overlay-content > .dx-popup-content {
+  .dx-collection .dx-field-item:not(.dx-last-col) {
+    padding-inline-end: var(--dx-html-editor-add-image-dialog-padding-inline-end);
+  }
+
+  .dx-fix-ratio-container {
+    .dx-textbox {
+      width: calc(100% - #{buttonSizes.$button-height} - var(--dx-html-editor-add-image-dialog-padding-inline-end));
+    }
+
+    .dx-buttongroup {
+      margin-inline-start: var(--dx-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 var(--dx-html-editor-add-image-dialog-tabs-padding);
+  }
+
+  .dx-fileuploader-input-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--dx-html-editor-input-wrapper-gap);
+    padding: var(--dx-html-editor-add-image-dialog-file-uploader-padding);
+    border-width: var(--dx-html-editor-file-uploader-input-wrapper-border-width);
+    border-style: dashed;
+    border-color: var(--dx-html-editor-file-uploader-input-wrapper-border);
+    border-radius: var(--dx-html-editor-file-uploader-input-wrapper-border-radius);
+    background-color: var(--dx-html-editor-file-uploader-input-wrapper-bg);
+
+    &::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-px-nudge: +1px over the file uploader padding
+    }
+
+    .dx-fileuploader-content {
+      background-color: var(--dx-html-editor-uploader-cover-bg);
+    }
+  }
+}
+
+.dx-formdialog-field-target .dx-field-item-content {
+  text-align: start;
+}
+
+// a mention renders wherever the editor's value is rendered, so it reads the system tier
+.dx-mention {
+  background-color: var(--dx-mention-bg);
+}
+
+.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: var(--dx-html-editor-highlighted-row-bg);
+  }
+}
+
+.dx-formdialog.dx-dropdowneditor-overlay.dx-popup-wrapper .dx-overlay-content {
+  box-shadow: popupSizes.$popup-content-box-shadow;
+}
+
+.dx-aidialog-controls {
+  gap: var(--dx-html-editor-ai-dialog-selects-gap);
+
+  .dx-selectbox {
+    max-width: calc(50% - var(--dx-html-editor-ai-dialog-selects-gap) * 0.5);
+  }
+}
+
+.dx-aidialog-content {
+  padding: var(--dx-html-editor-ai-dialog-content-padding);
+  gap: var(--dx-html-editor-ai-dialog-content-gap);
+}
+
+.dx-aidialog {
+  .dx-pending-indicator {
+    @include dx-pending-indicator-centered();
+  }
+
+  &.dx-popup-wrapper > .dx-overlay-content {
+    border-radius: var(--dx-html-editor-ai-dialog-border-radius);
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_public-links.scss b/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_public-links.scss
new file mode 100644
index 000000000000..55e6b6ffee39
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_public-links.scss
@@ -0,0 +1,3 @@
+@mixin publish {
+  --dx-html-editor-toolbar-padding: var(--dx-html-editor-padding-inline);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_public.scss
new file mode 100644
index 000000000000..d8e21d1cfe43
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_public.scss
@@ -0,0 +1,52 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+@use "public-links" as links;
+
+@mixin publish {
+  --dx-html-editor-add-image-dialog-file-uploader-padding: #{$html-editor-add-image-dialog-file-uploader-padding};
+  --dx-html-editor-add-image-dialog-padding-inline-end: #{$html-editor-add-image-dialog-padding-inline-end};
+  --dx-html-editor-add-image-dialog-tabs-padding: #{$html-editor-add-image-dialog-tabs-padding};
+  --dx-html-editor-ai-dialog-border-radius: #{$html-editor-ai-dialog-border-radius};
+  --dx-html-editor-ai-dialog-content-gap: #{$html-editor-ai-dialog-content-gap};
+  --dx-html-editor-ai-dialog-content-padding: #{$html-editor-ai-dialog-content-padding};
+  --dx-html-editor-ai-dialog-selects-gap: #{$html-editor-ai-dialog-selects-gap};
+  --dx-html-editor-ai-dialog-title-font-weight: #{$html-editor-ai-dialog-title-font-weight};
+  --dx-html-editor-blockquote-border-inline-start-width: #{$html-editor-blockquote-border-inline-start-width};
+  --dx-html-editor-blockquote-padding-inline-start: #{$html-editor-blockquote-padding-inline-start};
+  --dx-html-editor-border-block-end-active: #{$html-editor-border-block-end-active};
+  --dx-html-editor-border-width: #{$html-editor-border-width};
+  --dx-html-editor-code-block-bg: #{$html-editor-code-block-bg};
+  --dx-html-editor-content-margin: #{$html-editor-content-margin};
+  --dx-html-editor-cover-bg: #{$html-editor-cover-bg};
+  --dx-html-editor-faded-content: #{$html-editor-faded-content};
+  --dx-html-editor-file-uploader-input-wrapper-bg: #{$html-editor-file-uploader-input-wrapper-bg};
+  --dx-html-editor-file-uploader-input-wrapper-border: #{$html-editor-file-uploader-input-wrapper-border};
+  --dx-html-editor-file-uploader-input-wrapper-border-radius: #{$html-editor-file-uploader-input-wrapper-border-radius};
+  --dx-html-editor-file-uploader-input-wrapper-border-width: #{$html-editor-file-uploader-input-wrapper-border-width};
+  --dx-html-editor-highlighted-row-bg: #{$html-editor-highlighted-row-bg};
+  --dx-html-editor-input-wrapper-gap: #{$html-editor-input-wrapper-gap};
+  --dx-html-editor-padding-block: #{$html-editor-padding-block};
+  --dx-html-editor-padding-inline: #{$html-editor-padding-inline};
+  --dx-html-editor-placeholder-content: #{$html-editor-placeholder-content};
+  --dx-html-editor-placeholder-inset-inline: #{$html-editor-placeholder-inset-inline};
+  --dx-html-editor-resize-frame-border: #{$html-editor-resize-frame-border};
+  --dx-html-editor-resize-trigger: #{$html-editor-resize-trigger};
+  --dx-html-editor-table-border: #{$html-editor-table-border};
+  --dx-html-editor-table-cell-padding: #{$html-editor-table-cell-padding};
+  --dx-html-editor-table-resizer-highlight-thickness: #{$html-editor-table-resizer-highlight-thickness};
+  --dx-html-editor-table-resizer-thickness: #{$html-editor-table-resizer-thickness};
+  --dx-html-editor-toolbar-border: #{$html-editor-toolbar-border};
+  --dx-html-editor-toolbar-menu-separator-margin: #{$html-editor-toolbar-menu-separator-margin};
+  --dx-html-editor-toolbar-size-editor-width: #{$html-editor-toolbar-size-editor-width};
+  --dx-html-editor-toolbar-wrapper-inset-block-end: #{$html-editor-toolbar-wrapper-inset-block-end};
+  --dx-html-editor-toolbar-wrapper-inset-block-start: #{$html-editor-toolbar-wrapper-inset-block-start};
+  --dx-html-editor-toolbar-wrapper-inset-inline-end: #{$html-editor-toolbar-wrapper-inset-inline-end};
+  --dx-html-editor-toolbar-wrapper-inset-inline-start: #{$html-editor-toolbar-wrapper-inset-inline-start};
+  --dx-html-editor-uploader-cover-bg: #{$html-editor-uploader-cover-bg};
+  --dx-html-editor-variable-bg: #{$html-editor-variable-bg};
+  --dx-html-editor-variable-border-radius: #{$html-editor-variable-border-radius};
+  --dx-html-editor-variable-padding: #{$html-editor-variable-padding};
+
+  @include links.publish();
+}
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..d8ee8d052b28
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_sizes.scss
@@ -0,0 +1,65 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// 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: ds.$border-radius-80 !default;
+}
+
+@else if $size == "compact" {
+  $html-editor-toolbar-size-editor-width: ds.$spacing-880 !default;
+  $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;
+}
+
+// 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;
+
+// Base-layer sizing injected with design tokens (wave B14)
+$html-editor-border-width: ds.$border-width-10 !default;
+$html-editor-variable-padding: ds.$spacing-30 ds.$spacing-60 !default;
+$html-editor-variable-border-radius: ds.$border-radius-80 !default;
+$html-editor-blockquote-padding-inline-start: ds.$spacing-120 !default;
+$html-editor-blockquote-border-inline-start-width: ds.$border-width-40 !default;
+$html-editor-table-cell-padding: ds.$spacing-20 ds.$spacing-50 !default;
+$html-editor-placeholder-inset-inline: ds.$spacing-150 !default;
+$html-editor-table-resizer-thickness: ds.$spacing-50 !default;
+$html-editor-table-resizer-highlight-thickness: ds.$spacing-30 !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..882519709268
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/icons/_index.scss
@@ -0,0 +1,34 @@
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@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-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..e69de29bb2d1
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..02888c9cd305
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/informer/_colors.scss
@@ -0,0 +1,6 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$informer-error-content: ds.$color-content-danger !default;
+$informer-error-bg: ds.$color-bg-danger-subtler !default;
+$informer-info-content: ds.$color-content !default;
+$informer-info-bg: ds.$color-bg-canvas !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..b660cce37dd4
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/informer/_index.scss
@@ -0,0 +1,15 @@
+@use "../../base/informer";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/informer/mixins" as *;
+@include informer(
+  var(--dx-informer-error-content),
+  var(--dx-informer-error-bg),
+  var(--dx-informer-info-content),
+  var(--dx-informer-info-bg),
+  var(--dx-informer-border-radius),
+  var(--dx-informer-icon-size),
+  var(--dx-informer-padding-inline),
+  var(--dx-informer-padding-block),
+  var(--dx-informer-column-gap),
+);
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/informer/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/informer/_public.scss
new file mode 100644
index 000000000000..84f8806b822e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/informer/_public.scss
@@ -0,0 +1,15 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-informer-border-radius: #{$informer-border-radius};
+  --dx-informer-column-gap: #{$informer-column-gap};
+  --dx-informer-error-bg: #{$informer-error-bg};
+  --dx-informer-error-content: #{$informer-error-content};
+  --dx-informer-icon-size: #{$informer-icon-size};
+  --dx-informer-info-bg: #{$informer-info-bg};
+  --dx-informer-info-content: #{$informer-info-content};
+  --dx-informer-padding-block: #{$informer-padding-block};
+  --dx-informer-padding-inline: #{$informer-padding-inline};
+}
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..2065a6b9a101
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/informer/_sizes.scss
@@ -0,0 +1,23 @@
+@use "../common/sizes" as *;
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$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..6ed9551bd0c1
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/list/_colors.scss
@@ -0,0 +1,41 @@
+@use "../colors" as *;
+@use "../button/colors" as buttonColors;
+@use "../../../_design-system/variables/ds" as ds;
+
+$list-normal-content: ds.$color-content !default;
+
+$list-border: ds.$color-border !default;
+
+$list-group-header-bg: transparent !default;
+
+$list-item-bg-hovered: ds.$color-bg-hovered !default;
+
+$list-item-bg-selected: ds.$color-bg-selected !default;
+
+$list-item-bg-selected-disabled: ds.$color-bg-alpha-disabled !default;
+$list-item-bg-selected-hovered: ds.$color-bg-selected-hovered !default;
+$list-item-bg-selected-focused: ds.$color-bg-active !default;
+$list-item-content-hovered: ds.$color-content !default;
+$list-header-indicator-content: ds.$color-content-subtle !default;
+
+$list-item-bg-active: ds.$color-bg-active !default;
+$list-hold-menu-bg: ds.$color-bg !default;
+$list-hold-menu-shadow: ds.$box-shadow-sm !default;
+$list-menu-button-default-content: buttonColors.$button-default-contained-content !default;
+$list-menu-button-default-bg: buttonColors.$button-default-contained-bg !default;
+$list-menu-button-delete-bg: ds.$color-bg-danger !default;
+$list-item-ghost-bg: ds.$color-bg !default;
+$list-item-ghost-content: ds.$color-content-subtle !default;
+$list-item-ghost-border: ds.$color-border-primary !default;
+$list-icon: ds.$color-content-subtle !default;
+
+$list-base-select-all-separator-bg: ds.$color-border-subtle !default;
+
+$list-group-content: ds.$color-content !default;
+
+$list-content-disabled: ds.$color-content-disabled !default;
+$list-inverted-content: ds.$color-content-static-dark !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..fbe2e53486ca
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/list/_index.scss
@@ -0,0 +1,531 @@
+@use "sass:math";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../button/mixins" as *;
+@use "../textEditor/sizes" as textEditorSizes;
+@use "../button/sizes" as buttonSizes;
+@use "../../base/list" as baseList with (
+  $list-item-badge-container-width: var(--dx-list-item-badge-container-width),
+  $list-slide-menu-button-padding: var(--dx-list-slide-menu-button-padding),
+  $list-static-delete-button-padding: var(--dx-list-delete-button-static-padding),
+  $list-next-button-padding: var(--dx-list-next-button-padding),
+  $list-response-wait-opacity: var(--dx-list-response-wait-opacity),
+  $list-searchbox-margin-bottom: var(--dx-list-search-box-margin-block-end),
+);
+@use "../../base/list/mixins" as *;
+@use "../badge";
+
+.dx-state-disabled {
+  .dx-list-select-all-label {
+    color: var(--dx-list-content-disabled);
+  }
+
+  .dx-list-item-chevron {
+    color: var(--dx-list-content-disabled);
+  }
+
+  .dx-list-reorder-handle {
+    &::before {
+      color: var(--dx-list-content-disabled);
+    }
+  }
+}
+
+.dx-list-item-chevron-container {
+  padding-inline: var(--dx-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: var(--dx-list-icon);
+}
+
+.dx-list-item-badge-container {
+  padding-inline-end: var(--dx-list-item-padding-inline);
+}
+
+.dx-list-item-icon-container {
+  width: calc(#{$global-icon-size} + var(--dx-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: var(--dx-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: var(--dx-list-item-bg-selected);
+    color: var(--dx-list-item-content-selected);
+
+    &.dx-state-hover:not(.dx-state-focused) {
+      background-color: var(--dx-list-item-bg-selected-hovered);
+      color: var(--dx-list-item-content-selected);
+    }
+  }
+
+  &.dx-state-focused {
+    background-color: var(--dx-list-item-bg-hovered);
+    color: var(--dx-list-item-content-hovered);
+  }
+
+  &.dx-state-focused.dx-list-item-selected {
+    background-color: var(--dx-list-item-bg-selected-focused);
+    color: var(--dx-list-item-content-selected);
+  }
+
+  &.dx-state-active {
+    background-color: var(--dx-list-item-bg-active);
+
+    .dx-list-slide-item-content {
+      background-color: var(--dx-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} + var(--dx-list-search-box-margin-block-end)));
+    }
+
+    .dx-empty-message {
+      min-height: var(--dx-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: var(--dx-list-padding-block);
+        }
+
+        &.dx-state-hover {
+          .dx-radiobutton-icon {
+            border-color: var(--dx-radio-button-checked-border-hovered);
+          }
+
+          .dx-checkbox-icon {
+            border-color: var(--dx-check-box-icon-checked-border-hovered);
+          }
+
+          .dx-radiobutton-checked {
+            .dx-radiobutton-icon-dot {
+              background-color: var(--dx-radio-button-checked-bg-hovered);
+            }
+          }
+
+          .dx-checkbox-checked {
+            .dx-checkbox-icon {
+              background-color: var(--dx-check-box-icon-checked-bg-hovered);
+            }
+          }
+
+          .dx-checkbox-indeterminate {
+            .dx-checkbox-icon {
+              &::before {
+                background-color: var(--dx-check-box-icon-checked-bg-hovered);
+              }
+            }
+          }
+        }
+
+        &.dx-state-focused {
+          .dx-radiobutton-icon {
+            border-color: var(--dx-radio-button-checked-border-focused);
+          }
+
+          .dx-checkbox-icon {
+            border-color: var(--dx-check-box-icon-checked-border-focused);
+          }
+
+          .dx-radiobutton-checked {
+            .dx-radiobutton-icon-dot {
+              background-color: var(--dx-radio-button-checked-bg-focused);
+            }
+          }
+
+          .dx-checkbox-checked {
+            .dx-checkbox-icon {
+              background-color: var(--dx-check-box-icon-checked-bg-focused);
+            }
+          }
+
+          .dx-checkbox-indeterminate {
+            .dx-checkbox-icon {
+              &::before {
+                background-color: var(--dx-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: var(--dx-list-item-bg-hovered);
+          color: var(--dx-list-item-content-hovered);
+        }
+      }
+    }
+  }
+
+  .dx-list-group {
+    &:not(.dx-list-group-collapsed) {
+      &:not(:last-child) {
+        padding-bottom: var(--dx-list-padding-block);
+        border-bottom: var(--dx-list-item-border);
+        border-bottom-color: var(--dx-list-border);
+      }
+    }
+
+    &: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: var(--dx-list-group-content);
+      }
+    }
+
+    &:last-of-type {
+      .dx-list-item {
+        &:last-of-type {
+          margin-bottom: var(--dx-list-margin-block-end);
+        }
+      }
+    }
+
+    .dx-list-item {
+      &:first-of-type {
+        margin-top: 0;
+      }
+
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .dx-list-group-header {
+    font-weight: var(--dx-list-group-header-font-weight);
+    padding: var(--dx-list-group-header-padding-block) $item-horizontal-padding;
+    background: var(--dx-list-group-header-bg);
+    color: var(--dx-list-expanded-group-content);
+    border-top: var(--dx-list-item-border);
+    border-top-color: transparent;
+    display: flex;
+    align-items: center;
+    column-gap: var(--dx-list-item-padding-inline);
+
+    .dx-list-group-header-indicator {
+      color: var(--dx-list-header-indicator-content);
+
+      .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: var(--dx-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($masked: true);
+
+    &.dx-state-hover,
+    &.dx-state-active {
+      background-color: var(--dx-list-item-bg-hovered);
+      color: var(--dx-list-item-content-hovered);
+
+      .dx-list-switchable-delete-button-inner-wrapper {
+        background-color: var(--dx-list-item-bg-hovered);
+      }
+    }
+
+    &:first-of-type {
+      border-top: none;
+      margin-top: var(--dx-list-padding-block);
+    }
+
+    &:last-of-type {
+      border-bottom: none;
+      margin-bottom: var(--dx-list-padding-block);
+    }
+
+    .dx-icon {
+      color: var(--dx-list-icon);
+    }
+
+    .dx-icon-toggle-delete {
+      background-size: 100%;
+      mask-size: 100%;
+    }
+
+    &.dx-list-item-ghost-reordering {
+      &.dx-state-focused {
+        &.dx-state-hover {
+          color: var(--dx-list-item-ghost-content);
+          background: var(--dx-list-item-ghost-bg);
+          border: var(--dx-list-item-ghost-border-width) solid;
+          border-color: var(--dx-list-item-ghost-border);
+        }
+      }
+    }
+  }
+
+  .dx-list-item,
+  .dx-list .dx-empty-message {
+    color: var(--dx-list-normal-content);
+
+    .dx-list-item-separator-hidden & {
+      border-top: none;
+      border-bottom: none;
+    }
+  }
+
+  .dx-list-item-content {
+    padding: var(--dx-list-item-padding-block) $item-horizontal-padding var(--dx-list-item-padding-block);
+  }
+
+  .dx-list .dx-empty-message { // stylelint-disable-line no-duplicate-selectors
+    padding: var(--dx-list-item-padding-block) var(--dx-list-item-padding-inline);
+  }
+
+  .dx-list-next-button .dx-button {
+    @include dx-button-withtext-sizing();
+
+    .dx-button-content {
+      padding-left: var(--dx-list-next-button-padding-inline);
+      padding-right: var(--dx-list-next-button-padding-inline);
+    }
+  }
+
+  .dx-list-border-visible {
+    border: var(--dx-list-border-width) solid;
+    border-color: var(--dx-list-border);
+  }
+
+  .dx-list-item-before-bag {
+    &.dx-list-select-checkbox-container,
+    &.dx-list-select-radiobutton-container {
+      display: flex;
+      flex-shrink: 0;
+      width: var(--dx-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: var(--dx-list-item-padding-block) 0;
+    position: relative;
+    display: flex;
+
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: var(--dx-list-select-all-height);
+      background-color: var(--dx-list-base-select-all-separator-bg);
+    }
+  }
+
+  .dx-list-select-all-checkbox {
+    margin: 0 calc(#{$item-horizontal-padding} - 4px); // dx-px-nudge: -4px off the item horizontal padding
+  }
+
+  .dx-list-select-all-label {
+    padding: 0 var(--dx-list-item-padding-inline);
+  }
+
+  .dx-list-item-after-bag {
+    padding-inline: var(--dx-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: var(--dx-list-icon);
+
+      @include dx-icon-sizing($global-icon-size);
+    }
+  }
+
+  .dx-list-slide-menu-button {
+    bottom: var(--dx-list-slide-menu-button-inset-block-end);
+  }
+
+  .dx-list-slide-menu-button-delete {
+    @include dx-icon(trash);
+
+    color: var(--dx-list-inverted-content);
+    background-color: var(--dx-list-menu-button-delete-bg);
+    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: var(--dx-list-slide-menu-button-menu-border);
+    color: var(--dx-list-menu-button-default-content);
+    background-color: var(--dx-list-menu-button-default-bg);
+  }
+
+  .dx-list-static-delete-button {
+    padding: 0;
+
+    &.dx-button {
+      box-shadow: none;
+      background-color: transparent;
+
+      .dx-list-static-delete-button-container &.dx-state-disabled,
+      .dx-state-disabled .dx-list-static-delete-button-container & {
+        background-color: transparent;
+      }
+
+      .dx-button-content {
+        z-index: 1;
+      }
+    }
+  }
+
+  .dx-list-context-menucontent {
+    background-color: var(--dx-list-hold-menu-bg);
+    border: var(--dx-list-context-menu-content-border);
+    border-color: var(--dx-list-hold-menu-border);
+    border-radius: $global-border-radius;
+    box-shadow: var(--dx-list-hold-menu-shadow);
+
+    .dx-list-items {
+      margin-left: var(--dx-list-padding-block);
+      margin-right: var(--dx-list-padding-block);
+    }
+  }
+
+  .dx-state-disabled {
+    &.dx-list-item,
+    .dx-list-item {
+      background-color: transparent;
+      color: var(--dx-list-content-disabled);
+
+      .dx-icon {
+        color: var(--dx-list-content-disabled);
+      }
+    }
+  }
+}
+
+@include dx-list-sizing(var(--dx-list-item-padding-inline));
+
+.dx-state-disabled.dx-list .dx-list-item.dx-list-item-selected,
+.dx-list .dx-list-item.dx-list-item-selected.dx-state-disabled {
+  background-color: var(--dx-list-item-bg-selected-disabled);
+  color: var(--dx-list-content-disabled);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/list/_public-links.scss b/packages/devextreme-scss/scss/widgets/fluent-next/list/_public-links.scss
new file mode 100644
index 000000000000..f75da61a09df
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/list/_public-links.scss
@@ -0,0 +1,5 @@
+@mixin publish {
+  --dx-list-expanded-group-content: var(--dx-list-group-content);
+  --dx-list-hold-menu-border: var(--dx-list-border);
+  --dx-list-item-content-selected: var(--dx-list-normal-content);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/list/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/list/_public.scss
new file mode 100644
index 000000000000..382f8c07f772
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/list/_public.scss
@@ -0,0 +1,59 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+@use "public-links" as links;
+
+@mixin publish {
+  --dx-list-base-select-all-separator-bg: #{$list-base-select-all-separator-bg};
+  --dx-list-border: #{$list-border};
+  --dx-list-border-width: #{$list-border-width};
+  --dx-list-content-disabled: #{$list-content-disabled};
+  --dx-list-context-menu-content-border: #{$list-context-menu-content-border};
+  --dx-list-delete-button-static-padding: #{$list-delete-button-static-padding};
+  --dx-list-empty-message-min-height: #{$list-empty-message-min-height};
+  --dx-list-group-content: #{$list-group-content};
+  --dx-list-group-header-bg: #{$list-group-header-bg};
+  --dx-list-group-header-font-weight: #{$list-group-header-font-weight};
+  --dx-list-group-header-padding-block: #{$list-group-header-padding-block};
+  --dx-list-header-indicator-content: #{$list-header-indicator-content};
+  --dx-list-hold-menu-bg: #{$list-hold-menu-bg};
+  --dx-list-hold-menu-shadow: #{$list-hold-menu-shadow};
+  --dx-list-icon: #{$list-icon};
+  --dx-list-inverted-content: #{$list-inverted-content};
+  --dx-list-item-badge-container-width: #{$list-item-badge-container-width};
+  --dx-list-item-bg-active: #{$list-item-bg-active};
+  --dx-list-item-bg-hovered: #{$list-item-bg-hovered};
+  --dx-list-item-bg-selected: #{$list-item-bg-selected};
+  --dx-list-item-bg-selected-disabled: #{$list-item-bg-selected-disabled};
+  --dx-list-item-bg-selected-focused: #{$list-item-bg-selected-focused};
+  --dx-list-item-bg-selected-hovered: #{$list-item-bg-selected-hovered};
+  --dx-list-item-border: #{$list-item-border};
+  --dx-list-item-border-width: #{$list-item-border-width};
+  --dx-list-item-content-hovered: #{$list-item-content-hovered};
+  --dx-list-item-gap: #{$list-item-gap};
+  --dx-list-item-ghost-bg: #{$list-item-ghost-bg};
+  --dx-list-item-ghost-border: #{$list-item-ghost-border};
+  --dx-list-item-ghost-border-width: #{$list-item-ghost-border-width};
+  --dx-list-item-ghost-content: #{$list-item-ghost-content};
+  --dx-list-item-height: #{$list-item-height};
+  --dx-list-item-margin-inline: #{$list-item-margin-inline};
+  --dx-list-item-padding-block: #{$list-item-padding-block};
+  --dx-list-item-padding-inline: #{$list-item-padding-inline};
+  --dx-list-items-row-gap: #{$list-items-row-gap};
+  --dx-list-margin-block-end: #{$list-margin-block-end};
+  --dx-list-menu-button-default-bg: #{$list-menu-button-default-bg};
+  --dx-list-menu-button-default-content: #{$list-menu-button-default-content};
+  --dx-list-menu-button-delete-bg: #{$list-menu-button-delete-bg};
+  --dx-list-next-button-padding: #{$list-next-button-padding};
+  --dx-list-next-button-padding-inline: #{$list-next-button-padding-inline};
+  --dx-list-normal-content: #{$list-normal-content};
+  --dx-list-padding-block: #{$list-padding-block};
+  --dx-list-response-wait-opacity: #{$list-response-wait-opacity};
+  --dx-list-search-box-margin-block-end: #{$list-search-box-margin-block-end};
+  --dx-list-select-all-height: #{$list-select-all-height};
+  --dx-list-slide-menu-button-inset-block-end: #{$list-slide-menu-button-inset-block-end};
+  --dx-list-slide-menu-button-menu-border: #{$list-slide-menu-button-menu-border};
+  --dx-list-slide-menu-button-padding: #{$list-slide-menu-button-padding};
+
+  @include links.publish();
+}
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..0eafb089621b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/list/_sizes.scss
@@ -0,0 +1,61 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// Not colours: opacities that used to sit in _colors.scss (NAMING.md, O7)
+$list-response-wait-opacity: ds.$opacity-50 !default;
+
+$list-padding-block: ds.$spacing-40 !default;
+$list-item-margin-inline: ds.$spacing-40 !default;
+$list-margin-block-end: 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-base-strong !default;
+$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-width: ds.$border-width-10 !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-item-border: $list-item-border-width solid !default;
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..b1589fd91e1d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/loadIndicator/_colors.scss
@@ -0,0 +1,14 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$load-indicator-segment-border: ds.$color-content-primary !default;
+$load-indicator-segment-border-disabled: ds.$color-content-disabled !default;
+
+$load-indicator-segment-inner-border-disabled: ds.$color-border-disabled !default;
+
+// Light track: DS spinner loader==track kills the ring contrast (see DIVERGENCES.md)
+$load-indicator-segment-inner-border: ds.$color-bg-primary-subtle !default;
+
+// Decorative accent shimmer; foundation has no sparkle role — primary surface steps (see DIVERGENCES.md)
+$load-indicator-sparkle-stop-1-bg: ds.$color-bg-primary !default;
+$load-indicator-sparkle-stop-2-bg: ds.$color-bg-primary-hovered !default;
+$load-indicator-sparkle-stop-3-bg: ds.$color-bg-primary-shared !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..e1729c16944a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/loadIndicator/_index.scss
@@ -0,0 +1,141 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/loadIndicator" as baseLoadIndicator with (
+  $loadindicator-width: var(--dx-load-indicator-size),
+  $loadindicator-height: var(--dx-load-indicator-size),
+);
+
+.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: var(--dx-load-indicator-segment-border);
+  border-width: var(--dx-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: var(--dx-load-indicator-segment-inner-border);
+      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(
+  var(--dx-load-indicator-sparkle-stop-1-bg),
+  var(--dx-load-indicator-sparkle-stop-2-bg),
+  var(--dx-load-indicator-sparkle-stop-3-bg)
+);
+
+@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); }
+}
+
+.dx-state-disabled .dx-loadindicator-segment-inner {
+  border-color: var(--dx-load-indicator-segment-border-disabled);
+  border-bottom-color: transparent;
+}
+
+.dx-state-disabled .dx-loadindicator-content-circle .dx-loadindicator-segment2 .dx-loadindicator-segment-inner {
+  border-color: var(--dx-load-indicator-segment-inner-border-disabled);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/loadIndicator/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/loadIndicator/_public.scss
new file mode 100644
index 000000000000..c15cba1f6315
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/loadIndicator/_public.scss
@@ -0,0 +1,15 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-load-indicator-segment-border: #{$load-indicator-segment-border};
+  --dx-load-indicator-segment-border-disabled: #{$load-indicator-segment-border-disabled};
+  --dx-load-indicator-segment-border-width: #{$load-indicator-segment-border-width};
+  --dx-load-indicator-segment-inner-border: #{$load-indicator-segment-inner-border};
+  --dx-load-indicator-segment-inner-border-disabled: #{$load-indicator-segment-inner-border-disabled};
+  --dx-load-indicator-size: #{$load-indicator-size};
+  --dx-load-indicator-sparkle-stop-1-bg: #{$load-indicator-sparkle-stop-1-bg};
+  --dx-load-indicator-sparkle-stop-2-bg: #{$load-indicator-sparkle-stop-2-bg};
+  --dx-load-indicator-sparkle-stop-3-bg: #{$load-indicator-sparkle-stop-3-bg};
+}
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..741c669c21dd
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/loadIndicator/_sizes.scss
@@ -0,0 +1,7 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// Values hoisted from style-file literals (tokenized)
+$load-indicator-segment-border-width: 0.12em !default; // dx-relative: scales with the parent font-size
+
+// Base-layer sizing injected with design tokens (wave B5)
+$load-indicator-size: ds.$spacing-320 !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..d62f0484d2ce
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/loadPanel/_index.scss
@@ -0,0 +1,15 @@
+@use "sizes" as *;
+@use "../../base/loadPanel" with (
+  $loadpanel-content-padding: var(--dx-load-panel-content-padding),
+  $loadpanel-content-border: var(--dx-load-panel-content-border),
+  $loadpanel-content-border-radius: var(--dx-load-panel-content-border-radius),
+);
+@use "../overlay";
+
+.dx-loadpanel-content {
+  border: none;
+  background: var(--dx-load-panel-content-bg);
+  padding: var(--dx-load-panel-padding);
+  border-radius: var(--dx-load-panel-border-radius);
+  box-shadow: var(--dx-load-panel-box-shadow);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/loadPanel/_public-links.scss b/packages/devextreme-scss/scss/widgets/fluent-next/loadPanel/_public-links.scss
new file mode 100644
index 000000000000..5e8adc369166
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/loadPanel/_public-links.scss
@@ -0,0 +1,3 @@
+@mixin publish {
+  --dx-load-panel-content-bg: var(--dx-surface-overlay);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/loadPanel/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/loadPanel/_public.scss
new file mode 100644
index 000000000000..819bb9a0c18f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/loadPanel/_public.scss
@@ -0,0 +1,14 @@
+// GENERATED by tools/naming/publish.mjs
+@use "sizes" as *;
+@use "public-links" as links;
+
+@mixin publish {
+  --dx-load-panel-border-radius: #{$load-panel-border-radius};
+  --dx-load-panel-box-shadow: #{$load-panel-box-shadow};
+  --dx-load-panel-content-border: #{$load-panel-content-border};
+  --dx-load-panel-content-border-radius: #{$load-panel-content-border-radius};
+  --dx-load-panel-content-padding: #{$load-panel-content-padding};
+  --dx-load-panel-padding: #{$load-panel-padding};
+
+  @include links.publish();
+}
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..21586b11a1b0
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/loadPanel/_sizes.scss
@@ -0,0 +1,10 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$load-panel-padding: ds.$spacing-120 ds.$spacing-240 !default;
+$load-panel-border-radius: ds.$border-radius-80 !default;
+$load-panel-box-shadow: ds.$box-shadow-lg !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 !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..227f326ba95a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/lookup/_colors.scss
@@ -0,0 +1,4 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$lookup-icon: ds.$color-content-subtle !default;
+$lookup-icon-active: ds.$color-content !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..5dc76d42f412
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/lookup/_index.scss
@@ -0,0 +1,171 @@
+@use "sass:math";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../textEditor/sizes" as textEditorSizes;
+@use "../dropDownEditor" as *;
+@use "../../base/dropDownEditor/mixins" as *;
+@use "../common/mixins" as *;
+@use "../../base/lookup";
+@use "../../base/lookup/mixins" as *;
+@use "../dropDownList";
+@use "../textEditor/colors" as textEditorColors;
+
+.dx-lookup {
+  .dx-lookup-arrow {
+    inset-inline-end: textEditorSizes.$text-editor-spin-button-margin-inline-end;
+  }
+
+  &.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: lookup-field-padding(textEditorSizes.$text-editor-input-underlined-padding-inline, $global-icon-size, 1, textEditorSizes.$text-editor-spin-button-margin-inline-end);
+    }
+
+    &.dx-invalid {
+      .dx-lookup-field {
+        padding-inline-end: lookup-field-padding(textEditorSizes.$text-editor-input-underlined-padding-inline, $global-icon-size, 2, textEditorSizes.$text-editor-spin-button-margin-inline-end);
+      }
+    }
+  }
+
+  &.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: var(--dx-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,
+  var(--dx-lookup-icon),
+  var(--dx-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: var(--dx-lookup-popup-content-inset-block-start);
+  }
+
+  &.dx-popup-wrapper {
+    .dx-overlay-content {
+      overflow: visible;
+    }
+  }
+
+  .dx-popover-arrow {
+    display: block;
+
+    &::after {
+      box-shadow: var(--dx-lookup-box-shadow);
+      background: var(--dx-surface-overlay);
+      border-top-right-radius: var(--dx-lookup-arrow-border-radius);
+    }
+  }
+
+  &.dx-position-top {
+    .dx-popover-arrow {
+      &::after {
+        border-bottom-left-radius: var(--dx-lookup-arrow-border-radius);
+      }
+    }
+  }
+}
+
+.dx-lookup-empty {
+  .dx-lookup-field {
+    color: textEditorColors.$text-editor-placeholder;
+  }
+}
+
+.dx-lookup-popup-search .dx-list {
+  height: calc(100% - (#{textEditorSizes.$text-editor-input-min-height} + var(--dx-lookup-search-padding-block) + var(--dx-lookup-search-padding-block-start)));
+}
+
+.dx-lookup-search-wrapper {
+  padding: var(--dx-lookup-search-padding-block) var(--dx-lookup-search-padding-inline);
+  padding-top: var(--dx-lookup-search-padding-block-start);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/lookup/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/lookup/_public.scss
new file mode 100644
index 000000000000..b1a64bebef99
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/lookup/_public.scss
@@ -0,0 +1,15 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-lookup-arrow-border-radius: #{$lookup-arrow-border-radius};
+  --dx-lookup-box-shadow: #{$lookup-box-shadow};
+  --dx-lookup-field-min-height: #{$lookup-field-min-height};
+  --dx-lookup-icon: #{$lookup-icon};
+  --dx-lookup-icon-active: #{$lookup-icon-active};
+  --dx-lookup-popup-content-inset-block-start: #{$lookup-popup-content-inset-block-start};
+  --dx-lookup-search-padding-block: #{$lookup-search-padding-block};
+  --dx-lookup-search-padding-block-start: #{$lookup-search-padding-block-start};
+  --dx-lookup-search-padding-inline: #{$lookup-search-padding-inline};
+}
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..471f301f6012
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/lookup/_sizes.scss
@@ -0,0 +1,25 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// 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: ds.$spacing-480 !default;
+
+@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..fd466edbcf7c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/map/_index.scss
@@ -0,0 +1,4 @@
+@use "sizes" as mapSizes;
+@use "../../base/map" with (
+  $map-marker-tooltip-margin: mapSizes.$map-marker-tooltip-margin,
+);
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/map/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/map/_public.scss
new file mode 100644
index 000000000000..1fd135096ad5
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/map/_public.scss
@@ -0,0 +1,6 @@
+// GENERATED by tools/naming/publish.mjs
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-map-marker-tooltip-margin: #{$map-marker-tooltip-margin};
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/map/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/map/_sizes.scss
new file mode 100644
index 000000000000..fcb1bfaccb25
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/map/_sizes.scss
@@ -0,0 +1,3 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$map-marker-tooltip-margin: ds.$spacing-100 !default;
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..17a2508a7cfc
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/menu/_colors.scss
@@ -0,0 +1,23 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$menu-popup-bg: ds.$color-bg !default;
+$menu-item-bg-hovered: ds.$color-bg-hovered !default;
+$menu-item-bg-active: ds.$color-bg-active !default;
+
+$menu-content: ds.$color-content !default;
+
+$menu-item-bg-selected: ds.$color-bg-selected !default;
+$menu-popup-border: ds.$color-border !default;
+$menu-separator-bg: ds.$color-border-subtle !default;
+
+$menu-separator-bg-disabled: ds.$color-border-disabled !default;
+$menu-item-content-selected: ds.$color-content !default;
+$menu-item-link-content: ds.$color-content-primary !default;
+$menu-item-bg-selected-focused: ds.$color-bg-selected-hovered !default;
+
+$menu-shadow-focused: ds.$box-shadow-lg !default;
+
+// Moved here from menuBase/: menu/ is the declaration home of the menu component (O2)
+$menu-item-content-disabled: ds.$color-content-disabled !default;
+
+$menu-item-bg-selected-disabled: ds.$color-bg-disabled !default;
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..bfebda72ee48
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/menu/_index.scss
@@ -0,0 +1,121 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../menuBase" as *;
+@use "../button/sizes" as buttonSizes;
+@use "../../base/menu" with (
+  $menu-separator-margin-inline-end: var(--dx-menu-separator-margin-inline-end),
+  $menu-separator-margin-bottom: var(--dx-menu-separator-margin-block-end),
+  $menu-treeview-node-padding: var(--dx-menu-tree-view-node-padding),
+  $menu-item-content-padding-inline-start: var(--dx-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: var(--dx-menu-content);
+
+  &.dx-state-disabled,
+  .dx-state-disabled & {
+    .dx-menu-item {
+      color: var(--dx-menu-item-content-disabled);
+    }
+
+    .dx-menu-item.dx-menu-item-selected,
+    .dx-menu-item.dx-state-selected {
+      background-color: var(--dx-menu-item-bg-selected-disabled);
+    }
+  }
+
+  .dx-menu-horizontal {
+    .dx-menu-item-popout {
+      margin-inline-start: var(--dx-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: var(--dx-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: var(--dx-menu-padding-block) var(--dx-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: var(--dx-menu-item-icon-gap);
+        }
+      }
+    }
+  }
+}
+
+.dx-menu-adaptive-mode {
+  background-color: var(--dx-menu-popup-bg);
+
+  .dx-treeview {
+    border: var(--dx-menu-tree-view-border);
+    border-color: var(--dx-menu-popup-border);
+    border-radius: $global-border-radius;
+
+    &,
+    &.dx-state-focused {
+      box-shadow: var(--dx-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: var(--dx-menu-popup-bg);
+      }
+    }
+  }
+
+  .dx-treeview-node-container:first-child > .dx-treeview-node {
+    border-bottom: var(--dx-menu-tree-view-node-border-block-end);
+    border-bottom-color: var(--dx-menu-popup-border);
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/menu/_public-links.scss b/packages/devextreme-scss/scss/widgets/fluent-next/menu/_public-links.scss
new file mode 100644
index 000000000000..4761c7fe228a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/menu/_public-links.scss
@@ -0,0 +1,3 @@
+@mixin publish {
+  --dx-menu-item-expanded-content: var(--dx-menu-content);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/menu/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/menu/_public.scss
new file mode 100644
index 000000000000..7afa82a2d27f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/menu/_public.scss
@@ -0,0 +1,34 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+@use "public-links" as links;
+
+@mixin publish {
+  --dx-menu-content: #{$menu-content};
+  --dx-menu-item-bg-active: #{$menu-item-bg-active};
+  --dx-menu-item-bg-hovered: #{$menu-item-bg-hovered};
+  --dx-menu-item-bg-selected: #{$menu-item-bg-selected};
+  --dx-menu-item-bg-selected-disabled: #{$menu-item-bg-selected-disabled};
+  --dx-menu-item-bg-selected-focused: #{$menu-item-bg-selected-focused};
+  --dx-menu-item-content-disabled: #{$menu-item-content-disabled};
+  --dx-menu-item-content-padding-inline-start: #{$menu-item-content-padding-inline-start};
+  --dx-menu-item-content-selected: #{$menu-item-content-selected};
+  --dx-menu-item-icon-gap: #{$menu-item-icon-gap};
+  --dx-menu-item-line-height: #{$menu-item-line-height};
+  --dx-menu-item-link-content: #{$menu-item-link-content};
+  --dx-menu-item-with-icon-padding-inline: #{$menu-item-with-icon-padding-inline};
+  --dx-menu-padding-block: #{$menu-padding-block};
+  --dx-menu-padding-inline: #{$menu-padding-inline};
+  --dx-menu-popup-bg: #{$menu-popup-bg};
+  --dx-menu-popup-border: #{$menu-popup-border};
+  --dx-menu-separator-bg: #{$menu-separator-bg};
+  --dx-menu-separator-bg-disabled: #{$menu-separator-bg-disabled};
+  --dx-menu-separator-margin-block-end: #{$menu-separator-margin-block-end};
+  --dx-menu-separator-margin-inline-end: #{$menu-separator-margin-inline-end};
+  --dx-menu-shadow-focused: #{$menu-shadow-focused};
+  --dx-menu-tree-view-border: #{$menu-tree-view-border};
+  --dx-menu-tree-view-node-border-block-end: #{$menu-tree-view-node-border-block-end};
+  --dx-menu-tree-view-node-padding: #{$menu-tree-view-node-padding};
+
+  @include links.publish();
+}
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..0df24c20ceea
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/menu/_sizes.scss
@@ -0,0 +1,40 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// 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 !default;
+
+@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..e69de29bb2d1
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..570e07bbc5e0
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/menuBase/_index.scss
@@ -0,0 +1,74 @@
+@use "colors" as *;
+@use "../menu/sizes" as menuSizes;
+@use "../../base/icon_fonts" as *;
+@use "../../base/mixins" as *;
+@use "../../base/menuBase";
+@use "../button/sizes" as buttonSizes;
+@use "../menu/colors" as menuColors;
+
+.dx-menu-item {
+  color: menuColors.$menu-content;
+
+  a {
+    color: var(--dx-menu-item-link-content);
+  }
+
+  &.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: var(--dx-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: var(--dx-menu-item-bg-selected);
+  color: var(--dx-menu-item-content-selected);
+
+  &.dx-state-focused {
+    background-color: var(--dx-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-content;
+  background-color: var(--dx-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..e69de29bb2d1
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..82f4e2391545
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/multiView/_index.scss
@@ -0,0 +1,3 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/multiView";
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..e69de29bb2d1
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..2ea3be20fdce
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/numberBox/_colors.scss
@@ -0,0 +1,9 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$number-box-spin-icon: ds.$color-content-subtle !default;
+$number-box-spin-bg-hovered: ds.$color-bg-hovered !default;
+$number-box-spin-bg-active: ds.$color-bg-active !default;
+
+$number-box-content-disabled: ds.$color-content-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..57e8b742728c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/numberBox/_index.scss
@@ -0,0 +1,83 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../../base/numberBox" with (
+  $spin-container-width: var(--dx-number-box-spin-container-width),
+  $touch-friendly-spin-container-width: var(--dx-number-box-spin-container-touch-friendly-width),
+  $numberbox-spin-idle-opacity: false,
+);
+@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: var(--dx-number-box-spin-container-width);
+}
+
+.dx-numberbox-spin-up-icon {
+  @include dx-icon(spinup);
+
+  color: var(--dx-number-box-spin-icon);
+}
+
+.dx-numberbox-spin-down-icon {
+  @include dx-icon(spindown);
+
+  color: var(--dx-number-box-spin-icon);
+}
+
+.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: var(--dx-number-box-spin-bg-hovered);
+  }
+
+  &.dx-state-active {
+    background-color: var(--dx-number-box-spin-bg-active);
+  }
+
+  &.dx-state-disabled,
+  .dx-state-disabled & {
+    .dx-numberbox-spin-up-icon,
+    .dx-numberbox-spin-down-icon {
+      color: var(--dx-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: var(--dx-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/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/numberBox/_public.scss
new file mode 100644
index 000000000000..7b7a3e915bb1
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/numberBox/_public.scss
@@ -0,0 +1,12 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-number-box-content-disabled: #{$number-box-content-disabled};
+  --dx-number-box-spin-bg-active: #{$number-box-spin-bg-active};
+  --dx-number-box-spin-bg-hovered: #{$number-box-spin-bg-hovered};
+  --dx-number-box-spin-container-touch-friendly-width: #{$number-box-spin-container-touch-friendly-width};
+  --dx-number-box-spin-container-width: #{$number-box-spin-container-width};
+  --dx-number-box-spin-icon: #{$number-box-spin-icon};
+}
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..0b37fb4d9813
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/numberBox/_sizes.scss
@@ -0,0 +1,5 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$number-box-spin-container-width: ds.$spacing-240 !default;
+$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..67a9b3fed632
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/overlay/_index.scss
@@ -0,0 +1,11 @@
+@use "sizes" as *;
+@use "../common/mixins" as *;
+@use "../../base/overlay";
+
+.dx-overlay-shader {
+  background-color: var(--dx-backdrop-bg);
+}
+
+.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..e69de29bb2d1
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..446907affafa
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_colors.scss
@@ -0,0 +1,14 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$pagination-page-content-selected: ds.$color-content-static-dark !default;
+$pagination-page-bg-hovered: ds.$color-bg-hovered !default;
+
+$pagination-page-bg-selected: ds.$color-bg-primary !default;
+
+// Base-layer values injected with design tokens (wave B1)
+
+$pagination-content-disabled: ds.$color-content-disabled !default;
+
+$pagination-page-bg-selected-disabled: ds.$color-bg-disabled !default;
+
+$pagination-info-content: ds.$color-content-subtle !default;
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..3777a6487a80
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_index.scss
@@ -0,0 +1,144 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../../base/pagination" with (
+  $pagination-page-padding-fallback: false,
+  $pagination-navigate-button-width-fallback: false,
+  $pagination-padding-block-fallback: false,
+  $pagination-navigate-button-padding-block-fallback: false,
+  $pagination-info-paddings: var(--dx-pagination-info-margin-inline),
+  $pagination-page-margin-left: var(--dx-pagination-page-margin-inline-start),
+  $pagination-page-margin-right: var(--dx-pagination-page-margin-inline-end),
+  $pagination-separator-padding-left: var(--dx-pagination-separator-padding-inline-start),
+  $pagination-separator-padding-right: var(--dx-pagination-separator-padding-inline-end),
+  $pagination-navigate-button-height: var(--dx-pagination-navigate-button-height),
+  $pagination-first-child-margin-left: var(--dx-pagination-first-child-margin-inline-start),
+  $pagination-first-child-padding-left: var(--dx-pagination-first-child-padding-inline-start),
+  $pagination-first-child-padding-right: var(--dx-pagination-first-child-padding-inline-end),
+  $pagination-first-child-padding-top: var(--dx-pagination-first-child-padding-block-start),
+  $pagination-first-child-padding-bottom: var(--dx-pagination-first-child-padding-block-end),
+  $pagination-page-size-margin-left: var(--dx-pagination-page-size-margin-inline-start),
+  $pagination-page-index-width: var(--dx-pagination-page-index-width),
+  $pagination-pages-count-padding-left: var(--dx-pagination-pages-count-padding-inline-start),
+  $pagination-info-opacity: false,
+  $pagination-nav-disabled-opacity: false,
+  $pagination-page-horizontal-padding: var(--dx-pagination-page-padding-inline),
+);
+@use "../gridBase/sizes" as gridBaseSizes;
+
+.dx-pager,
+.dx-pagination {
+  padding: var(--dx-pagination-padding) gridBaseSizes.$grid-cell-padding-inline;
+
+  &.dx-light-mode {
+    .dx-page-sizes {
+      min-width: var(--dx-pagination-page-sizes-compact-min-width);
+    }
+
+    .dx-page-index {
+      min-width: var(--dx-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: var(--dx-pagination-page-padding);
+      line-height: var(--dx-pagination-page-line-height);
+    }
+
+    .dx-separator {
+      padding-left: var(--dx-pagination-separator-padding);
+      padding-right: var(--dx-pagination-separator-padding);
+    }
+
+    .dx-navigate-button {
+      width: var(--dx-pagination-navigate-button-width);
+      height: var(--dx-pagination-nav-button-height);
+      padding: var(--dx-pagination-nav-button-padding);
+
+      &.dx-button-disable {
+        color: var(--dx-pagination-content-disabled);
+      }
+    }
+
+    .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(var(--dx-pagination-nav-button-icon-size));
+    }
+  }
+
+  .dx-page,
+  .dx-page-size {
+    font-size: var(--dx-pagination-page-font-size);
+
+    &:hover {
+      background-color: var(--dx-pagination-page-bg-hovered);
+    }
+
+    border-radius: var(--dx-pagination-page-border-radius);
+  }
+
+  .dx-page-sizes .dx-page-size {
+    &:first-child,
+    &.dx-first-child {
+      margin-left: 0;
+    }
+
+    padding: var(--dx-pagination-page-padding);
+    line-height: var(--dx-pagination-page-line-height);
+  }
+
+  .dx-pages,
+  .dx-page-sizes {
+    .dx-selection {
+      font-weight: var(--dx-pagination-font-weight-selected);
+      background-color: var(--dx-pagination-page-bg-selected);
+      color: var(--dx-pagination-page-content-selected);
+    }
+  }
+}
+
+.dx-pager.dx-state-disabled .dx-pages .dx-selection,
+.dx-pager.dx-state-disabled .dx-page-sizes .dx-selection,
+.dx-pagination.dx-state-disabled .dx-pages .dx-selection,
+.dx-pagination.dx-state-disabled .dx-page-sizes .dx-selection,
+.dx-state-disabled .dx-pagination .dx-pages .dx-selection,
+.dx-state-disabled .dx-pagination .dx-page-sizes .dx-selection {
+  background-color: var(--dx-pagination-page-bg-selected-disabled);
+  color: var(--dx-pagination-content-disabled);
+}
+
+.dx-pager .dx-pages .dx-info,
+.dx-pagination .dx-pages .dx-info {
+  color: var(--dx-pagination-info-content);
+}
+
+.dx-pagination.dx-state-disabled,
+.dx-state-disabled .dx-pagination {
+  color: var(--dx-pagination-content-disabled);
+
+  .dx-page,
+  .dx-info,
+  .dx-page-size {
+    color: var(--dx-pagination-content-disabled);
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_public-links.scss b/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_public-links.scss
new file mode 100644
index 000000000000..a6f29e2a2814
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_public-links.scss
@@ -0,0 +1,3 @@
+@mixin publish {
+  --dx-pagination-nav-button-padding: var(--dx-pagination-page-padding);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_public.scss
new file mode 100644
index 000000000000..b38b995f5ca3
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_public.scss
@@ -0,0 +1,42 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+@use "public-links" as links;
+
+@mixin publish {
+  --dx-pagination-content-disabled: #{$pagination-content-disabled};
+  --dx-pagination-first-child-margin-inline-start: #{$pagination-first-child-margin-inline-start};
+  --dx-pagination-first-child-padding-block-end: #{$pagination-first-child-padding-block-end};
+  --dx-pagination-first-child-padding-block-start: #{$pagination-first-child-padding-block-start};
+  --dx-pagination-first-child-padding-inline-end: #{$pagination-first-child-padding-inline-end};
+  --dx-pagination-first-child-padding-inline-start: #{$pagination-first-child-padding-inline-start};
+  --dx-pagination-font-weight-selected: #{$pagination-font-weight-selected};
+  --dx-pagination-info-content: #{$pagination-info-content};
+  --dx-pagination-info-margin-inline: #{$pagination-info-margin-inline};
+  --dx-pagination-nav-button-height: #{$pagination-nav-button-height};
+  --dx-pagination-nav-button-icon-size: #{$pagination-nav-button-icon-size};
+  --dx-pagination-navigate-button-height: #{$pagination-navigate-button-height};
+  --dx-pagination-navigate-button-width: #{$pagination-navigate-button-width};
+  --dx-pagination-padding: #{$pagination-padding};
+  --dx-pagination-page-bg-hovered: #{$pagination-page-bg-hovered};
+  --dx-pagination-page-bg-selected: #{$pagination-page-bg-selected};
+  --dx-pagination-page-bg-selected-disabled: #{$pagination-page-bg-selected-disabled};
+  --dx-pagination-page-border-radius: #{$pagination-page-border-radius};
+  --dx-pagination-page-content-selected: #{$pagination-page-content-selected};
+  --dx-pagination-page-font-size: #{$pagination-page-font-size};
+  --dx-pagination-page-index-compact-min-width: #{$pagination-page-index-compact-min-width};
+  --dx-pagination-page-index-width: #{$pagination-page-index-width};
+  --dx-pagination-page-line-height: #{$pagination-page-line-height};
+  --dx-pagination-page-margin-inline-end: #{$pagination-page-margin-inline-end};
+  --dx-pagination-page-margin-inline-start: #{$pagination-page-margin-inline-start};
+  --dx-pagination-page-padding: #{$pagination-page-padding};
+  --dx-pagination-page-padding-inline: #{$pagination-page-padding-inline};
+  --dx-pagination-page-size-margin-inline-start: #{$pagination-page-size-margin-inline-start};
+  --dx-pagination-page-sizes-compact-min-width: #{$pagination-page-sizes-compact-min-width};
+  --dx-pagination-pages-count-padding-inline-start: #{$pagination-pages-count-padding-inline-start};
+  --dx-pagination-separator-padding: #{$pagination-separator-padding};
+  --dx-pagination-separator-padding-inline-end: #{$pagination-separator-padding-inline-end};
+  --dx-pagination-separator-padding-inline-start: #{$pagination-separator-padding-inline-start};
+
+  @include links.publish();
+}
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..09146d4c103d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_sizes.scss
@@ -0,0 +1,52 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// Not colours: two opacities that used to sit in _colors.scss (NAMING.md, O7)
+
+$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-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: ds.$spacing-640 !default;
+  $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: ds.$spacing-440 !default;
+  $pagination-page-index-compact-min-width: ds.$spacing-280 !default;
+}
+
+// Values hoisted from style-file literals (tokenized)
+$pagination-font-weight-selected: ds.$font-weight-base-strong !default;
+$pagination-page-border-radius: ds.$border-radius-full !default;
+$pagination-navigate-button-width: ds.$spacing-90 !default;
+
+// Base-layer sizing injected with design tokens (wave B2)
+$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;
+$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;
+$pagination-page-size-margin-inline-start: 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;
+
+// Base-layer sizing injected with design tokens (wave B9)
+$pagination-info-margin-inline: ds.$spacing-90 !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..d5f289ef9976
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_colors.scss
@@ -0,0 +1,33 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$pivot-grid-area-bg: ds.$color-bg !default;
+$pivot-grid-border: ds.$color-border !default;
+
+$pivot-grid-area-content: ds.$color-content !default;
+$pivot-grid-field-area-box-bg: ds.$color-bg-low !default;
+$pivot-grid-data-area-content: ds.$color-content !default;
+
+$pivot-grid-total-bg: ds.$color-bg !default;
+
+$pivot-grid-grand-total-bg: ds.$color-bg-low !default;
+
+$pivot-grid-field-area-content: ds.$color-content-subtle !default;
+$pivot-grid-accent-outline: ds.$color-border-primary !default;
+$pivot-grid-drag-header-border: rgb(from #{ds.$color-border-primary} r g b / 0.5) !default;
+$pivot-grid-drag-header-first-shadow: ds.$color-shadow-ambient !default;
+$pivot-grid-drag-header-shadow-key: ds.$color-shadow-key !default;
+$pivot-grid-position-indicator-bg: ds.$color-border-contrast !default;
+
+// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
+$pivot-grid-header-filter-content: ds.$color-content-primary !default;
+
+$pivot-grid-field-area-box-border: ds.$color-border-disabled !default;
+$pivot-grid-content: ds.$color-content !default;
+
+// Color computations hoisted from style files (phase 0.5 layer normalization)
+$pivot-grid-drag-header-shadow: ds.$box-shadow-sm !default;
+$pivot-grid-area-field-bg: rgb(from #{$pivot-grid-field-area-box-bg} r g b / 0.9) !default;
+
+$pivot-grid-content-disabled: ds.$color-content-disabled !default;
+
+$pivot-grid-drag-header-content: ds.$color-content-subtle !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..78c7e8e4d66c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_index.scss
@@ -0,0 +1,295 @@
+@use "../mixins" as *;
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../treeView/sizes" as treeViewSizes;
+@use "../button/sizes" as buttonSizes;
+@use "../../base/pivotGrid" as basePivotGrid with (
+  $pivotgrid-border-width: var(--dx-pivot-grid-border-width),
+  $pivotgrid-focus-outline-width: var(--dx-focus-rect-outline-width),
+  $pivotgrid-focus-outline-offset: var(--dx-focus-rect-outline-offset-inset),
+  $pivotgrid-icon-size: var(--dx-pivot-grid-icon-size),
+  $pivotgrid-common-field-padding: var(--dx-pivot-grid-field-padding),
+  $pivotgrid-drag-source-opacity: var(--dx-pivot-grid-drag-source-opacity),
+  $pivotgrid-fields-container-drag-opacity: false,
+  $pivotgrid-common-field-chooser-drag-width: var(--dx-pivot-grid-field-chooser-drag-width),
+  $pivotgrid-common-field-chooser-drag-height: var(--dx-pivot-grid-field-chooser-drag-height),
+  $pivotgrid-position-indicator-vertical-height: var(--dx-pivot-grid-position-indicator-vertical-height),
+  $pivotgrid-position-indicator-horizontal-width: var(--dx-pivot-grid-position-indicator-horizontal-width),
+  $pivotgrid-position-indicator-last-margin-left: var(--dx-pivot-grid-position-indicator-last-margin-inline-start),
+  $pivotgrid-area-box-margin-bottom: var(--dx-pivot-grid-area-box-margin-block-end),
+  $pivotgrid-expand-icon-container-outline: var(--dx-pivot-grid-expand-icon-container-outline),
+  $pivotgrid-toolbar-margin-right: var(--dx-pivot-grid-toolbar-margin-inline-end),
+  $pivotgrid-field-chooser-button-margin-right: var(--dx-pivot-grid-field-chooser-button-margin-inline-end),
+  $pivotgrid-button-margin: var(--dx-pivot-grid-button-margin),
+  $pivotgrid-last-cell-min-width: var(--dx-pivot-grid-last-cell-min-width),
+  $pivotgrid-icon-sorted-margin-left: var(--dx-pivot-grid-icon-sorted-margin-inline-start),
+  $pivotgrid-fields-area-head-padding: var(--dx-pivot-grid-fields-area-head-padding),
+  $pivotgrid-treeview-search-margin: var(--dx-pivot-grid-tree-view-search-margin),
+  $pivotgrid-area-padding: var(--dx-pivot-grid-area-padding),
+  $pivotgrid-area-fields-margin-top: var(--dx-pivot-grid-area-fields-margin-block-start),
+  $pivotgrid-position-indicator-last-margin-left-rtl: var(--dx-pivot-grid-position-indicator-last-rtl-margin-inline-start),
+  $pivotgrid-toolbar-margin-left: var(--dx-pivot-grid-toolbar-margin-inline-start),
+  $pivotgrid-field-chooser-button-margin-left: var(--dx-pivot-grid-field-chooser-button-margin-inline-start),
+  $pivotgrid-fields-area-head-padding-left: var(--dx-pivot-grid-fields-area-head-padding-inline-start),
+  $pivotgrid-icon-sorted-margin-right: var(--dx-pivot-grid-icon-sorted-margin-inline-end),
+  $pivotgrid-drag-header-border-color: var(--dx-pivot-grid-drag-header-border),
+  $pivotgrid-drag-header-first-shadow-color: var(--dx-pivot-grid-drag-header-first-shadow),
+  $pivotgrid-drag-header-second-shadow-color: var(--dx-pivot-grid-drag-header-shadow-key),
+  $pivotgrid-border-color: var(--dx-pivot-grid-border),
+  $pivotgrid-common-left-right-padding: var(--dx-pivot-grid-left-right-padding),
+  $pivotgrid-area-color: var(--dx-pivot-grid-area-content),
+  $header-filter-color: var(--dx-grid-content),
+  $header-filter-color-empty: var(--dx-grid-content),
+  $pivotgrid-area-background: var(--dx-pivot-grid-area-bg),
+  $pivotgrid-common-top-bottom-padding: var(--dx-pivot-grid-area-field-padding-block),
+  $pivotgrid-header-top-bottom-padding: var(--dx-pivot-grid-header-top-bottom-padding),
+  $pivotgrid-field-indicators-offset: var(--dx-pivot-grid-field-indicators-offset),
+  $pivotgrid-indicators-line-height: var(--dx-pivot-grid-indicators-line-height),
+  $pivotgrid-totalcolor: var(--dx-pivot-grid-total-bg),
+  $pivotgrid-field-area-text-color: var(--dx-pivot-grid-field-area-content),
+  $pivotgrid-data-area-color: var(--dx-pivot-grid-data-area-content),
+  $pivotgrid-grandtotalcolor: var(--dx-pivot-grid-grand-total-bg),
+  $pivotgrid-accent-color: var(--dx-pivot-grid-accent-outline),
+  $pivotgrid-empty-area-text-padding: var(--dx-pivot-grid-empty-area-text-padding),
+  $pivotgrid-button-top-padding: var(--dx-pivot-grid-button-margin-block-start),
+  $pivotgrid-header-cell-side-padding: var(--dx-pivot-grid-header-cell-padding-inline),
+  $pivotgrid-fields-area-head-cell-side-padding: var(--dx-pivot-grid-fields-area-head-cell-padding-inline),
+);
+
+.dx-pivotgrid-fields-container {
+  &.dx-drag {
+    .dx-area-field.dx-area-box {
+      background-color: var(--dx-pivot-grid-area-field-bg);
+      border: var(--dx-pivot-grid-area-box-border);
+      border-color: var(--dx-pivot-grid-field-area-box-border);
+      box-shadow: var(--dx-pivot-grid-drag-header-shadow);
+    }
+  }
+
+  .dx-area-field.dx-area-box {
+    color: var(--dx-pivot-grid-field-area-box-content);
+    background-color: var(--dx-pivot-grid-field-area-box-bg);
+    border-radius: var(--dx-pivot-grid-area-field-border-radius);
+    border: var(--dx-pivot-grid-area-box-border);
+    border-color: var(--dx-pivot-grid-field-area-box-border);
+    font-size: var(--dx-pivot-grid-headers-font-size);
+    font-weight: var(--dx-pivot-grid-field-area-box-font-weight);
+    line-height: var(--dx-pivot-grid-area-field-line-height);
+
+    .dx-header-filter {
+      color: var(--dx-pivot-grid-header-filter-content);
+
+      &.dx-header-filter-empty {
+        color: var(--dx-pivot-grid-area-content);
+      }
+    }
+  }
+
+  .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: var(--dx-pivot-grid-area-bg);
+
+  .dx-pivotgrid-area {
+    &.dx-pivotgrid-area-data {
+      font-size: var(--dx-pivot-grid-area-font-size);
+    }
+
+    &.dx-pivotgrid-vertical-headers,
+    &.dx-pivotgrid-horizontal-headers {
+      font-size: var(--dx-pivot-grid-headers-font-size);
+
+      td {
+        font-weight: var(--dx-pivot-grid-header-font-weight);
+      }
+
+      .dx-grandtotal,
+      .dx-total {
+        color: var(--dx-pivot-grid-content);
+      }
+    }
+
+    td {
+      padding: var(--dx-pivot-grid-cell-padding);
+
+      &.dx-pivotgrid-collapsed,
+      &.dx-pivotgrid-expanded {
+        padding: var(--dx-pivot-grid-expanded-cell-padding);
+
+        > span {
+          padding: var(--dx-pivot-grid-expanded-padding);
+        }
+      }
+    }
+  }
+
+  .dx-area-description-cell {
+    .dx-pivotgrid-toolbar {
+      padding-left: var(--dx-pivot-grid-toolbar-padding-inline-start);
+    }
+  }
+
+  .dx-row-total,
+  .dx-grandtotal {
+    &.dx-last-cell {
+      padding-left: var(--dx-pivot-grid-total-text-left-padding);
+    }
+  }
+
+  .dx-expand-icon-container {
+    margin: 0;
+
+    @include dx-icon(chevronright);
+
+    font-size: var(--dx-pivot-grid-headers-font-size);
+
+    &::before {
+      visibility: hidden;
+    }
+  }
+
+  .dx-pivotgrid-collapsed .dx-expand {
+    @include dx-icon(chevronright);
+    @include dx-icon-font-centered-sizing(var(--dx-pivot-grid-chevron-icon-size));
+
+    color: var(--dx-pivot-grid-chevron-icon);
+  }
+
+  .dx-pivotgrid-expanded .dx-expand {
+    @include dx-icon(chevrondown);
+    @include dx-icon-font-centered-sizing(var(--dx-pivot-grid-chevron-icon-size));
+
+    color: var(--dx-pivot-grid-chevron-icon);
+  }
+
+  .dx-area-tree-view {
+    td.dx-white-space-column {
+      width: var(--dx-pivot-grid-empty-column-width);
+      min-width: var(--dx-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: var(--dx-pivot-grid-headers-font-size);
+      font-weight: var(--dx-pivot-grid-header-font-weight);
+      color: var(--dx-pivot-grid-area-content);
+      vertical-align: middle;
+    }
+
+    .dx-area-fields {
+      margin-top: var(--dx-pivot-grid-field-chooser-area-fields-margin-block-start);
+    }
+  }
+
+  .dx-treeview-border-visible .dx-scrollable-content > .dx-treeview-node-container {
+    padding-right: var(--dx-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: var(--dx-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: var(--dx-pivot-grid-field-chooser-field-min-height);
+    padding: var(--dx-pivot-grid-tree-view-item-padding);
+
+    .dx-icon {
+      margin: var(--dx-pivot-grid-icon-margin);
+
+      @include dx-icon-sizing(buttonSizes.$button-icon-size);
+    }
+  }
+
+  .dx-treeview-toggle-item-visibility {
+    height: var(--dx-pivot-grid-field-chooser-field-min-height);
+  }
+}
+
+.dx-pivotgrid-fields-container { // stylelint-disable-line no-duplicate-selectors
+  .dx-position-indicator {
+    background-color: var(--dx-pivot-grid-position-indicator-bg);
+  }
+}
+
+@include when-disabled(".dx-pivotgrid") {
+  color: var(--dx-pivot-grid-content-disabled);
+
+  .dx-pivotgrid-area,
+  .dx-pivotgrid-horizontal-headers,
+  .dx-pivotgrid-vertical-headers,
+  .dx-pivotgrid-fields-area,
+  .dx-area-field,
+
+  .dx-area-description-cell {
+    color: var(--dx-pivot-grid-content-disabled);
+  }
+
+  .dx-pivotgrid-vertical-headers td,
+  .dx-pivotgrid-vertical-headers td span,
+  .dx-pivotgrid-horizontal-headers td,
+  .dx-pivotgrid-horizontal-headers td span {
+    color: var(--dx-pivot-grid-content-disabled);
+  }
+}
+
+.dx-state-disabled .dx-pivotgrid .dx-pivotgrid-area .dx-row-total,
+.dx-state-disabled .dx-pivotgrid .dx-pivotgrid-area .dx-grandtotal,
+.dx-state-disabled .dx-pivotgrid .dx-pivotgrid-area .dx-total,
+.dx-pivotgrid.dx-state-disabled .dx-pivotgrid-area .dx-row-total,
+.dx-pivotgrid.dx-state-disabled .dx-pivotgrid-area .dx-grandtotal,
+.dx-pivotgrid.dx-state-disabled .dx-pivotgrid-area .dx-total {
+  color: var(--dx-pivot-grid-content-disabled);
+}
+
+.dx-pivotgrid-fields-container .dx-drag-source,
+.dx-pivotgrid-fields-container .dx-drag-source .dx-area-field-content {
+  color: var(--dx-pivot-grid-drag-header-content);
+}
+
+.dx-state-disabled .dx-pivotgrid-fields-container .dx-drag-source,
+.dx-state-disabled .dx-pivotgrid-fields-container .dx-drag-source .dx-area-field-content {
+  color: var(--dx-pivot-grid-content-disabled);
+}
+
+.dx-pivotgridfieldchooser.dx-state-disabled,
+.dx-state-disabled .dx-pivotgridfieldchooser {
+  .dx-area .dx-area-caption {
+    color: var(--dx-pivot-grid-content-disabled);
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_public-links.scss b/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_public-links.scss
new file mode 100644
index 000000000000..eab4bcc21da7
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_public-links.scss
@@ -0,0 +1,4 @@
+@mixin publish {
+  --dx-pivot-grid-chevron-icon: var(--dx-pivot-grid-area-content);
+  --dx-pivot-grid-field-area-box-content: var(--dx-pivot-grid-area-content);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_public.scss
new file mode 100644
index 000000000000..e667bb4471d1
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_public.scss
@@ -0,0 +1,83 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+@use "public-links" as links;
+
+@mixin publish {
+  --dx-pivot-grid-accent-outline: #{$pivot-grid-accent-outline};
+  --dx-pivot-grid-area-bg: #{$pivot-grid-area-bg};
+  --dx-pivot-grid-area-box-border: #{$pivot-grid-area-box-border};
+  --dx-pivot-grid-area-box-margin-block-end: #{$pivot-grid-area-box-margin-block-end};
+  --dx-pivot-grid-area-content: #{$pivot-grid-area-content};
+  --dx-pivot-grid-area-field-bg: #{$pivot-grid-area-field-bg};
+  --dx-pivot-grid-area-field-border-radius: #{$pivot-grid-area-field-border-radius};
+  --dx-pivot-grid-area-field-line-height: #{$pivot-grid-area-field-line-height};
+  --dx-pivot-grid-area-field-padding-block: #{$pivot-grid-area-field-padding-block};
+  --dx-pivot-grid-area-fields-margin-block-start: #{$pivot-grid-area-fields-margin-block-start};
+  --dx-pivot-grid-area-font-size: #{$pivot-grid-area-font-size};
+  --dx-pivot-grid-area-padding: #{$pivot-grid-area-padding};
+  --dx-pivot-grid-border: #{$pivot-grid-border};
+  --dx-pivot-grid-border-width: #{$pivot-grid-border-width};
+  --dx-pivot-grid-button-margin: #{$pivot-grid-button-margin};
+  --dx-pivot-grid-button-margin-block-start: #{$pivot-grid-button-margin-block-start};
+  --dx-pivot-grid-cell-padding: #{$pivot-grid-cell-padding};
+  --dx-pivot-grid-checkbox-inset-inline-start: #{$pivot-grid-checkbox-inset-inline-start};
+  --dx-pivot-grid-chevron-icon-size: #{$pivot-grid-chevron-icon-size};
+  --dx-pivot-grid-content: #{$pivot-grid-content};
+  --dx-pivot-grid-content-disabled: #{$pivot-grid-content-disabled};
+  --dx-pivot-grid-data-area-content: #{$pivot-grid-data-area-content};
+  --dx-pivot-grid-drag-header-border: #{$pivot-grid-drag-header-border};
+  --dx-pivot-grid-drag-header-content: #{$pivot-grid-drag-header-content};
+  --dx-pivot-grid-drag-header-first-shadow: #{$pivot-grid-drag-header-first-shadow};
+  --dx-pivot-grid-drag-header-shadow: #{$pivot-grid-drag-header-shadow};
+  --dx-pivot-grid-drag-header-shadow-key: #{$pivot-grid-drag-header-shadow-key};
+  --dx-pivot-grid-drag-source-opacity: #{$pivot-grid-drag-source-opacity};
+  --dx-pivot-grid-empty-area-text-padding: #{$pivot-grid-empty-area-text-padding};
+  --dx-pivot-grid-empty-column-width: #{$pivot-grid-empty-column-width};
+  --dx-pivot-grid-expand-icon-container-outline: #{$pivot-grid-expand-icon-container-outline};
+  --dx-pivot-grid-expanded-cell-padding: #{$pivot-grid-expanded-cell-padding};
+  --dx-pivot-grid-expanded-padding: #{$pivot-grid-expanded-padding};
+  --dx-pivot-grid-field-area-box-bg: #{$pivot-grid-field-area-box-bg};
+  --dx-pivot-grid-field-area-box-border: #{$pivot-grid-field-area-box-border};
+  --dx-pivot-grid-field-area-box-font-weight: #{$pivot-grid-field-area-box-font-weight};
+  --dx-pivot-grid-field-area-content: #{$pivot-grid-field-area-content};
+  --dx-pivot-grid-field-chooser-area-fields-margin-block-start: #{$pivot-grid-field-chooser-area-fields-margin-block-start};
+  --dx-pivot-grid-field-chooser-button-margin-inline-end: #{$pivot-grid-field-chooser-button-margin-inline-end};
+  --dx-pivot-grid-field-chooser-button-margin-inline-start: #{$pivot-grid-field-chooser-button-margin-inline-start};
+  --dx-pivot-grid-field-chooser-drag-height: #{$pivot-grid-field-chooser-drag-height};
+  --dx-pivot-grid-field-chooser-drag-width: #{$pivot-grid-field-chooser-drag-width};
+  --dx-pivot-grid-field-chooser-field-min-height: #{$pivot-grid-field-chooser-field-min-height};
+  --dx-pivot-grid-field-indicators-offset: #{$pivot-grid-field-indicators-offset};
+  --dx-pivot-grid-field-padding: #{$pivot-grid-field-padding};
+  --dx-pivot-grid-fields-area-head-cell-padding-inline: #{$pivot-grid-fields-area-head-cell-padding-inline};
+  --dx-pivot-grid-fields-area-head-padding: #{$pivot-grid-fields-area-head-padding};
+  --dx-pivot-grid-fields-area-head-padding-inline-start: #{$pivot-grid-fields-area-head-padding-inline-start};
+  --dx-pivot-grid-grand-total-bg: #{$pivot-grid-grand-total-bg};
+  --dx-pivot-grid-header-cell-padding-inline: #{$pivot-grid-header-cell-padding-inline};
+  --dx-pivot-grid-header-filter-content: #{$pivot-grid-header-filter-content};
+  --dx-pivot-grid-header-font-weight: #{$pivot-grid-header-font-weight};
+  --dx-pivot-grid-header-top-bottom-padding: #{$pivot-grid-header-top-bottom-padding};
+  --dx-pivot-grid-headers-font-size: #{$pivot-grid-headers-font-size};
+  --dx-pivot-grid-icon-margin: #{$pivot-grid-icon-margin};
+  --dx-pivot-grid-icon-size: #{$pivot-grid-icon-size};
+  --dx-pivot-grid-icon-sorted-margin-inline-end: #{$pivot-grid-icon-sorted-margin-inline-end};
+  --dx-pivot-grid-icon-sorted-margin-inline-start: #{$pivot-grid-icon-sorted-margin-inline-start};
+  --dx-pivot-grid-indicators-line-height: #{$pivot-grid-indicators-line-height};
+  --dx-pivot-grid-last-cell-min-width: #{$pivot-grid-last-cell-min-width};
+  --dx-pivot-grid-left-right-padding: #{$pivot-grid-left-right-padding};
+  --dx-pivot-grid-position-indicator-bg: #{$pivot-grid-position-indicator-bg};
+  --dx-pivot-grid-position-indicator-horizontal-width: #{$pivot-grid-position-indicator-horizontal-width};
+  --dx-pivot-grid-position-indicator-last-margin-inline-start: #{$pivot-grid-position-indicator-last-margin-inline-start};
+  --dx-pivot-grid-position-indicator-last-rtl-margin-inline-start: #{$pivot-grid-position-indicator-last-rtl-margin-inline-start};
+  --dx-pivot-grid-position-indicator-vertical-height: #{$pivot-grid-position-indicator-vertical-height};
+  --dx-pivot-grid-toolbar-margin-inline-end: #{$pivot-grid-toolbar-margin-inline-end};
+  --dx-pivot-grid-toolbar-margin-inline-start: #{$pivot-grid-toolbar-margin-inline-start};
+  --dx-pivot-grid-toolbar-padding-inline-start: #{$pivot-grid-toolbar-padding-inline-start};
+  --dx-pivot-grid-total-bg: #{$pivot-grid-total-bg};
+  --dx-pivot-grid-total-text-left-padding: #{$pivot-grid-total-text-left-padding};
+  --dx-pivot-grid-tree-view-item-padding: #{$pivot-grid-tree-view-item-padding};
+  --dx-pivot-grid-tree-view-node-container-padding-inline-end: #{$pivot-grid-tree-view-node-container-padding-inline-end};
+  --dx-pivot-grid-tree-view-search-margin: #{$pivot-grid-tree-view-search-margin};
+
+  @include links.publish();
+}
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..7b492c14bb76
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_sizes.scss
@@ -0,0 +1,94 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// 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-margin-block-start: 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-margin-block-start: 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-margin-block-start: 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-title-default !default;
+$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-field-chooser-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: ds.$spacing-520 !default;
+$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: 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;
+
+// Base-layer sizing injected with design tokens (wave B16)
+$pivot-grid-border-width: ds.$border-width-10 !default;
+$pivot-grid-icon-size: ds.$spacing-140 !default;
+$pivot-grid-field-padding: ds.$spacing-20 !default;
+
+$pivot-grid-drag-source-opacity: ds.$opacity-65 !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..e69de29bb2d1
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..93a3e0fb1d4a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/popover/_index.scss
@@ -0,0 +1,11 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/popover";
+
+.dx-popover-wrapper {
+  .dx-popup-title {
+    margin: 0;
+    border-top-left-radius: var(--dx-popover-popup-title-border-start-start-radius);
+    border-top-right-radius: var(--dx-popover-popup-title-border-start-end-radius);
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/popover/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/popover/_public.scss
new file mode 100644
index 000000000000..a223694f443c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/popover/_public.scss
@@ -0,0 +1,7 @@
+// GENERATED by tools/naming/publish.mjs
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-popover-popup-title-border-start-end-radius: #{$popover-popup-title-border-start-end-radius};
+  --dx-popover-popup-title-border-start-start-radius: #{$popover-popup-title-border-start-start-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..0e999d98fa54
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/popover/_sizes.scss
@@ -0,0 +1,5 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// 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..41291475f78b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/popup/_colors.scss
@@ -0,0 +1,9 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$popup-title-bg: transparent !default;
+$popup-title-content: ds.$color-content !default;
+$popup-title-border: ds.$color-border !default;
+$popup-bottom-content: ds.$color-content !default;
+
+// Base-layer values injected with design tokens (wave B1)
+$popup-dialog-backdrop: ds.$color-bg-backdrop !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..d03ada398496
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/popup/_index.scss
@@ -0,0 +1,80 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../toolbar/mixins" as *;
+@use "../../base/popup" with (
+  $popup-title-min-height-fallback: false,
+  $popup-title-padding: var(--dx-popup-title-padding),
+  $popup-dialog-message-padding: var(--dx-popup-dialog-message-padding),
+  $popup-dialog-shader-color: var(--dx-popup-dialog-backdrop),
+);
+@use "../overlay";
+
+.dx-popup-wrapper {
+  & > .dx-overlay-content {
+    background: var(--dx-surface-overlay);
+    box-shadow: var(--dx-popup-content-box-shadow);
+    border-radius: var(--dx-popup-border-radius);
+  }
+
+  & > .dx-popup-fullscreen {
+    border-radius: 0;
+  }
+
+  .dx-state-focused {
+    &.dx-overlay-content {
+      box-shadow: var(--dx-popup-content-box-shadow-focused);
+    }
+  }
+}
+
+.dx-popup-title {
+  position: relative;
+  min-height: var(--dx-popup-title-min-height);
+  border-bottom: var(--dx-popup-title-border-block-end);
+  border-bottom-color: var(--dx-popup-title-border);
+  background: var(--dx-popup-title-bg);
+  color: var(--dx-popup-title-content);
+
+  &.dx-toolbar {
+    @include dx-toolbar-sizing(
+      var(--dx-popup-toolbar-height),
+      0 var(--dx-popup-toolbar-padding-inline),
+      var(--dx-popup-toolbar-label-font-size),
+      var(--dx-popup-toolbar-item-spacing)
+    );
+
+    box-shadow: none;
+  }
+}
+
+.dx-popup-content {
+  padding: var(--dx-popup-content-padding-block) var(--dx-popup-content-padding);
+
+  & > .dx-button {
+    margin: var(--dx-popup-button-margin);
+  }
+}
+
+.dx-popup-bottom {
+  background: var(--dx-popup-bottom-bg);
+  color: var(--dx-popup-bottom-content);
+
+  &.dx-toolbar {
+    @include dx-toolbar-sizing(
+      var(--dx-popup-bottom-toolbar-height),
+      0 var(--dx-popup-content-with-title-top-padding) var(--dx-popup-content-with-title-bottom-padding),
+      var(--dx-popup-toolbar-label-font-size),
+      var(--dx-popup-toolbar-item-spacing)
+    );
+  }
+}
+
+.dx-popup-content.dx-dialog-content {
+  min-width: calc(220px - 2 * var(--dx-popup-content-padding)); // dx-fixed-size: 220px dialog min-width
+  padding: var(--dx-popup-content-padding-block) var(--dx-popup-content-padding);
+}
+
+.dx-dialog-message {
+  padding: 0;
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/popup/_public-links.scss b/packages/devextreme-scss/scss/widgets/fluent-next/popup/_public-links.scss
new file mode 100644
index 000000000000..f5837716f7e5
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/popup/_public-links.scss
@@ -0,0 +1,4 @@
+@mixin publish {
+  --dx-popup-bottom-bg: var(--dx-popup-title-bg);
+  --dx-popup-toolbar-label-font-size: var(--dx-typography-m-font-size);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/popup/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/popup/_public.scss
new file mode 100644
index 000000000000..b7cd19f794cb
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/popup/_public.scss
@@ -0,0 +1,30 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+@use "public-links" as links;
+
+@mixin publish {
+  --dx-popup-border-radius: #{$popup-border-radius};
+  --dx-popup-bottom-content: #{$popup-bottom-content};
+  --dx-popup-bottom-toolbar-height: #{$popup-bottom-toolbar-height};
+  --dx-popup-button-margin: #{$popup-button-margin};
+  --dx-popup-content-box-shadow: #{$popup-content-box-shadow};
+  --dx-popup-content-box-shadow-focused: #{$popup-content-box-shadow-focused};
+  --dx-popup-content-padding: #{$popup-content-padding};
+  --dx-popup-content-padding-block: #{$popup-content-padding-block};
+  --dx-popup-content-with-title-bottom-padding: #{$popup-content-with-title-bottom-padding};
+  --dx-popup-content-with-title-top-padding: #{$popup-content-with-title-top-padding};
+  --dx-popup-dialog-backdrop: #{$popup-dialog-backdrop};
+  --dx-popup-dialog-message-padding: #{$popup-dialog-message-padding};
+  --dx-popup-title-bg: #{$popup-title-bg};
+  --dx-popup-title-border: #{$popup-title-border};
+  --dx-popup-title-border-block-end: #{$popup-title-border-block-end};
+  --dx-popup-title-content: #{$popup-title-content};
+  --dx-popup-title-min-height: #{$popup-title-min-height};
+  --dx-popup-title-padding: #{$popup-title-padding};
+  --dx-popup-toolbar-height: #{$popup-toolbar-height};
+  --dx-popup-toolbar-item-spacing: #{$popup-toolbar-item-spacing};
+  --dx-popup-toolbar-padding-inline: #{$popup-toolbar-padding-inline};
+
+  @include links.publish();
+}
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..d82b3a8174e1
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/popup/_sizes.scss
@@ -0,0 +1,59 @@
+@use "../sizes" as *;
+@use "colors" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// Not a colour: a radius that used to sit in _colors.scss (NAMING.md, O7)
+$popup-border-radius: ds.$border-radius-80 !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: ds.$box-shadow-2xl !default;
+$popup-content-box-shadow-focused: ds.$box-shadow-2xl !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;
+}
+
+@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;
+}
+
+: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;
+$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).
+ */
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..cdd3d6f88216
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/progressBar/_colors.scss
@@ -0,0 +1,17 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$progress-bar-bg: ds.$color-border !default;
+
+$progress-bar-range-bg: ds.$color-content-primary !default;
+$progress-bar-container-bg-disabled: ds.$color-border-disabled !default;
+$progress-bar-range-bg-disabled: ds.$color-content-disabled !default;
+$progress-bar-range-indeterminate-bg: ds.$color-content-primary !default;
+$progress-bar-range-invalid-bg: ds.$color-bg-danger !default;
+
+$progress-bar-indeterminate-bg: -90deg, transparent 5%, $progress-bar-range-indeterminate-bg, transparent 95% !default;
+$progress-bar-indeterminate-bg-disabled: -90deg, transparent 5%, $progress-bar-range-bg-disabled, transparent 95% !default;
+$progress-bar-indeterminate-invalid-bg: -90deg, transparent 5%, $progress-bar-range-invalid-bg, transparent 95% !default;
+
+$progress-bar-label-content: ds.$color-content !default;
+
+$progress-bar-content-disabled: ds.$color-content-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..972a996d3a2d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/progressBar/_index.scss
@@ -0,0 +1,120 @@
+@use "sass:math";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/mixins" as *;
+@use "../../base/progressBar" with (
+  $progressbar-status-padding-right: var(--dx-progress-bar-status-padding-inline-end),
+  $progressbar-status-padding-left: var(--dx-progress-bar-status-padding-inline-start),
+  $progressbar-status-font-size: var(--dx-progress-bar-status-font-size),
+);
+
+.dx-progressbar-container {
+  height: var(--dx-progress-bar-height);
+  background-color: var(--dx-progress-bar-bg);
+  border-radius: var(--dx-progress-bar-border-radius);
+}
+
+.dx-progressbar-range {
+  position: relative;
+  background-color: var(--dx-progress-bar-range-bg);
+  border-radius: var(--dx-progress-bar-border-radius);
+  box-sizing: content-box;
+}
+
+.dx-progressbar-animating-container {
+  height: var(--dx-progress-bar-height);
+  background-color: var(--dx-progress-bar-bg);
+  background-size: var(--dx-progress-bar-indeterminate-width) 5px; // dx-fixed-size: 5px stripe pitch of the indeterminate gradient
+  animation: dx-loader 2s linear infinite;
+  border-radius: var(--dx-progress-bar-border-radius);
+
+  @include gradient-linear(var(--dx-progress-bar-indeterminate-bg));
+
+  background-repeat: repeat;
+}
+
+.dx-invalid {
+  .dx-progressbar-range {
+    background-color: var(--dx-progress-bar-range-invalid-bg);
+  }
+
+  .dx-progressbar-animating-container {
+    @include gradient-linear(var(--dx-progress-bar-indeterminate-invalid-bg));
+
+    background-repeat: repeat;
+  }
+}
+
+.dx-state-disabled {
+  .dx-progressbar-container {
+    background-color: var(--dx-progress-bar-container-bg-disabled);
+  }
+
+  .dx-progressbar-range {
+    background-color: var(--dx-progress-bar-range-bg-disabled);
+  }
+
+  .dx-progressbar-status {
+    color: var(--dx-progress-bar-content-disabled);
+  }
+
+  .dx-progressbar-animating-container {
+    animation: none;
+
+    @include gradient-linear(var(--dx-progress-bar-indeterminate-bg-disabled));
+
+    background-position-x: math.div($progress-bar-indeterminate-width, 2);
+  }
+}
+
+.dx-progressbar-status {
+  padding-top: var(--dx-progress-bar-status-padding-block-start);
+  color: var(--dx-progress-bar-label-content);
+
+  .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(var(--dx-progress-bar-indeterminate-bg));
+
+      background-repeat: repeat;
+    }
+
+    &.dx-state-disabled {
+      .dx-progressbar-animating-container {
+        animation: none;
+
+        @include gradient-linear(var(--dx-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/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/progressBar/_public.scss
new file mode 100644
index 000000000000..e0a0ad2b7156
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/progressBar/_public.scss
@@ -0,0 +1,24 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-progress-bar-bg: #{$progress-bar-bg};
+  --dx-progress-bar-border-radius: #{$progress-bar-border-radius};
+  --dx-progress-bar-container-bg-disabled: #{$progress-bar-container-bg-disabled};
+  --dx-progress-bar-content-disabled: #{$progress-bar-content-disabled};
+  --dx-progress-bar-height: #{$progress-bar-height};
+  --dx-progress-bar-indeterminate-bg: #{$progress-bar-indeterminate-bg};
+  --dx-progress-bar-indeterminate-bg-disabled: #{$progress-bar-indeterminate-bg-disabled};
+  --dx-progress-bar-indeterminate-invalid-bg: #{$progress-bar-indeterminate-invalid-bg};
+  --dx-progress-bar-indeterminate-width: #{$progress-bar-indeterminate-width};
+  --dx-progress-bar-label-content: #{$progress-bar-label-content};
+  --dx-progress-bar-range-bg: #{$progress-bar-range-bg};
+  --dx-progress-bar-range-bg-disabled: #{$progress-bar-range-bg-disabled};
+  --dx-progress-bar-range-indeterminate-bg: #{$progress-bar-range-indeterminate-bg};
+  --dx-progress-bar-range-invalid-bg: #{$progress-bar-range-invalid-bg};
+  --dx-progress-bar-status-font-size: #{$progress-bar-status-font-size};
+  --dx-progress-bar-status-padding-block-start: #{$progress-bar-status-padding-block-start};
+  --dx-progress-bar-status-padding-inline-end: #{$progress-bar-status-padding-inline-end};
+  --dx-progress-bar-status-padding-inline-start: #{$progress-bar-status-padding-inline-start};
+}
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..108ac89755ca
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/progressBar/_sizes.scss
@@ -0,0 +1,24 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$progress-bar-height: null !default;
+$progress-bar-border-radius: $global-border-radius !default;
+$progress-bar-status-padding-block-start: null !default;
+$progress-bar-indeterminate-width: 90% !default;
+
+@if $size == "default" {
+  $progress-bar-height: ds.$spacing-40 !default;
+  $progress-bar-status-padding-block-start: ds.$spacing-120 !default;
+}
+
+@else if $size == "compact" {
+  $progress-bar-height: ds.$spacing-20 !default;
+  $progress-bar-status-padding-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..925051b60daa
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/radioButton/_colors.scss
@@ -0,0 +1,37 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+/*
+ * 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: ds.$color-bg !default;
+$radio-button-icon-border: ds.$color-border-contrast !default;
+$radio-button-icon-border-hovered: ds.$color-border-contrast-hovered !default;
+$radio-button-icon-border-active: ds.$color-border-contrast-active !default;
+
+$radio-button-checked-bg: ds.$color-content-primary-shared !default;
+$radio-button-checked-bg-hovered: ds.$color-content-primary-shared-hovered !default;
+$radio-button-checked-bg-focused: ds.$color-content-primary-shared-hovered !default;
+$radio-button-checked-bg-active: ds.$color-content-primary-shared-active !default;
+
+$radio-button-checked-border: ds.$color-border-primary-shared !default;
+$radio-button-checked-border-hovered: ds.$color-border-primary-shared-hovered !default;
+$radio-button-checked-border-focused: ds.$color-border-primary-shared-hovered !default;
+$radio-button-checked-border-active: ds.$color-border-primary-shared-active !default;
+
+$radio-button-invalid-bg: ds.$color-content-danger-shared !default;
+$radio-button-invalid-bg-hovered: ds.$color-content-danger-shared-hovered !default;
+$radio-button-invalid-bg-focused: ds.$color-content-danger-shared-hovered !default;
+$radio-button-invalid-bg-active: ds.$color-content-danger-shared-active !default;
+
+$radio-button-invalid-border: ds.$color-border-danger-shared !default;
+$radio-button-invalid-border-hovered: ds.$color-border-danger-shared-hovered !default;
+$radio-button-invalid-border-focused: ds.$color-border-danger-shared-hovered !default;
+$radio-button-invalid-border-active: ds.$color-border-danger-shared-active !default;
+
+$radio-button-content-disabled: ds.$color-content-disabled !default;
+
+$radio-button-border-disabled: ds.$color-border-disabled !default;
+
+$radio-button-bg-read-only: ds.$color-content-disabled !default;
+$radio-button-border-read-only: ds.$color-border-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..fb448bc605f6
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/radioButton/_index.scss
@@ -0,0 +1,166 @@
+@use "sass:math";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/radioButton/mixins" as *;
+@use "../../base/radioButton";
+@include dx-radiobutton-icon-mixin(
+  $radio-button-size,
+  $radio-button-border-width,
+  $radio-button-dot-size,
+  true,
+);
+@include dx-radiobutton-states-mixin(
+  var(--dx-radio-button-icon-bg),
+  var(--dx-radio-button-icon-border),
+  var(--dx-radio-button-border-read-only),
+  null,
+  null,
+  null,
+  var(--dx-radio-button-checked-bg),
+  var(--dx-radio-button-invalid-bg),
+  null,
+  null,
+  null,
+  true,
+  $checked-border-color: var(--dx-radio-button-checked-border),
+  $invalid-border-color: var(--dx-radio-button-invalid-border),
+);
+
+.dx-radiobutton-icon {
+  &::after {
+    content: none;
+  }
+}
+
+.dx-radio-value-container {
+  padding-inline-end: var(--dx-radio-button-value-container-padding-inline-end);
+}
+
+.dx-state-readonly {
+  .dx-radiobutton-icon-dot {
+    background-color: var(--dx-radio-button-bg-read-only);
+  }
+
+  .dx-radiobutton-checked {
+    &.dx-state-hover,
+    &.dx-state-focused,
+    &.dx-state-active {
+      .dx-radiobutton-icon-dot {
+        background-color: var(--dx-radio-button-bg-read-only);
+      }
+    }
+  }
+}
+
+.dx-radiobutton {
+  &.dx-state-hover {
+    .dx-radiobutton-icon {
+      border-color: var(--dx-radio-button-icon-border-hovered);
+    }
+  }
+
+  &.dx-state-active {
+    .dx-radiobutton-icon {
+      border-color: var(--dx-radio-button-icon-border-active);
+    }
+  }
+
+  &.dx-state-focused {
+    .dx-radiobutton-icon {
+      border-color: var(--dx-radio-button-checked-border-focused);
+    }
+  }
+}
+
+.dx-radiobutton-checked {
+  &.dx-state-hover {
+    .dx-radiobutton-icon {
+      border-color: var(--dx-radio-button-checked-border-hovered);
+    }
+
+    .dx-radiobutton-icon-dot {
+      background-color: var(--dx-radio-button-checked-bg-hovered);
+    }
+  }
+
+  &.dx-state-focused {
+    .dx-radiobutton-icon {
+      border-color: var(--dx-radio-button-checked-border-focused);
+    }
+
+    .dx-radiobutton-icon-dot {
+      background-color: var(--dx-radio-button-checked-bg-focused);
+    }
+  }
+
+  &.dx-state-active {
+    .dx-radiobutton-icon {
+      border-color: var(--dx-radio-button-checked-border-active);
+    }
+
+    .dx-radiobutton-icon-dot {
+      background-color: var(--dx-radio-button-checked-bg-active);
+    }
+  }
+}
+
+.dx-invalid {
+  .dx-state-hover {
+    &.dx-radiobutton {
+      .dx-radiobutton-icon {
+        border-color: var(--dx-radio-button-invalid-border-hovered);
+      }
+
+      .dx-radiobutton-icon-dot {
+        background-color: var(--dx-radio-button-invalid-bg-hovered);
+      }
+    }
+  }
+
+  .dx-state-focused {
+    &.dx-radiobutton {
+      .dx-radiobutton-icon {
+        border-color: var(--dx-radio-button-invalid-border-focused);
+      }
+
+      .dx-radiobutton-icon-dot {
+        background-color: var(--dx-radio-button-invalid-bg-focused);
+      }
+    }
+  }
+
+  .dx-state-active {
+    &.dx-radiobutton {
+      .dx-radiobutton-icon {
+        border-color: var(--dx-radio-button-invalid-border-active);
+      }
+
+      .dx-radiobutton-icon-dot {
+        background-color: var(--dx-radio-button-invalid-bg-active);
+      }
+    }
+  }
+
+  &.dx-state-readonly {
+    .dx-radiobutton {
+      .dx-radiobutton-icon-dot {
+        background-color: var(--dx-radio-button-bg-read-only);
+      }
+    }
+  }
+}
+
+.dx-state-disabled {
+  &.dx-radiobutton,
+  .dx-radiobutton {
+    color: var(--dx-radio-button-content-disabled);
+
+    .dx-radiobutton-icon {
+      border-color: var(--dx-radio-button-border-disabled);
+    }
+
+    .dx-radiobutton-icon-dot {
+      background-color: var(--dx-radio-button-content-disabled);
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/radioButton/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/radioButton/_public.scss
new file mode 100644
index 000000000000..532329cec675
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/radioButton/_public.scss
@@ -0,0 +1,31 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-radio-button-bg-read-only: #{$radio-button-bg-read-only};
+  --dx-radio-button-border-disabled: #{$radio-button-border-disabled};
+  --dx-radio-button-border-read-only: #{$radio-button-border-read-only};
+  --dx-radio-button-checked-bg: #{$radio-button-checked-bg};
+  --dx-radio-button-checked-bg-active: #{$radio-button-checked-bg-active};
+  --dx-radio-button-checked-bg-focused: #{$radio-button-checked-bg-focused};
+  --dx-radio-button-checked-bg-hovered: #{$radio-button-checked-bg-hovered};
+  --dx-radio-button-checked-border: #{$radio-button-checked-border};
+  --dx-radio-button-checked-border-active: #{$radio-button-checked-border-active};
+  --dx-radio-button-checked-border-focused: #{$radio-button-checked-border-focused};
+  --dx-radio-button-checked-border-hovered: #{$radio-button-checked-border-hovered};
+  --dx-radio-button-content-disabled: #{$radio-button-content-disabled};
+  --dx-radio-button-icon-bg: #{$radio-button-icon-bg};
+  --dx-radio-button-icon-border: #{$radio-button-icon-border};
+  --dx-radio-button-icon-border-active: #{$radio-button-icon-border-active};
+  --dx-radio-button-icon-border-hovered: #{$radio-button-icon-border-hovered};
+  --dx-radio-button-invalid-bg: #{$radio-button-invalid-bg};
+  --dx-radio-button-invalid-bg-active: #{$radio-button-invalid-bg-active};
+  --dx-radio-button-invalid-bg-focused: #{$radio-button-invalid-bg-focused};
+  --dx-radio-button-invalid-bg-hovered: #{$radio-button-invalid-bg-hovered};
+  --dx-radio-button-invalid-border: #{$radio-button-invalid-border};
+  --dx-radio-button-invalid-border-active: #{$radio-button-invalid-border-active};
+  --dx-radio-button-invalid-border-focused: #{$radio-button-invalid-border-focused};
+  --dx-radio-button-invalid-border-hovered: #{$radio-button-invalid-border-hovered};
+  --dx-radio-button-value-container-padding-inline-end: #{$radio-button-value-container-padding-inline-end};
+}
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..b781ceaab9e0
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/radioButton/_sizes.scss
@@ -0,0 +1,16 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$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..8fa0386a5bc1
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/radioGroup/_colors.scss
@@ -0,0 +1,7 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+/*
+ * 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..115f03bfcbb7
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/radioGroup/_index.scss
@@ -0,0 +1,24 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/radioGroup/mixins" as *;
+@use "../../base/radioGroup" with (
+  /*
+   * base paints `.dx-radio-value-container` without a widget scope, and this theme paints the same
+   * element again from radioButton. A `.dx-radiogroup`-scoped name would resolve to nothing on a
+   * standalone radio button, so both copies read the radioButton name — the element exists only
+   * inside `.dx-radiobutton` (reachability gate, wave F15 class).
+   */
+  $radiogroup-radio-value-container-padding-inline-end: var(--dx-radio-button-value-container-padding-inline-end),
+  $radiogroup-collection-column-gap: var(--dx-radio-group-collection-horizontal-column-gap),
+);
+@use "../radioButton";
+@include dx-radiogroup-mixin(
+  var(--dx-radio-group-radio-button-margin-block),
+  0,
+);
+
+.dx-radiogroup-horizontal {
+  .dx-collection {
+    column-gap: var(--dx-radio-group-collection-column-gap);
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/radioGroup/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/radioGroup/_public.scss
new file mode 100644
index 000000000000..8561a100693b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/radioGroup/_public.scss
@@ -0,0 +1,8 @@
+// GENERATED by tools/naming/publish.mjs
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-radio-group-collection-column-gap: #{$radio-group-collection-column-gap};
+  --dx-radio-group-collection-horizontal-column-gap: #{$radio-group-collection-horizontal-column-gap};
+  --dx-radio-group-radio-button-margin-block: #{$radio-group-radio-button-margin-block};
+}
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..3be42249b6a2
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/radioGroup/_sizes.scss
@@ -0,0 +1,18 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$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-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..e69de29bb2d1
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..605e97e36c19
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/rangeSlider/_index.scss
@@ -0,0 +1,9 @@
+@use "sass:math";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/rangeSlider";
+@use "../slider/sizes" as sliderSizes;
+
+.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..e69de29bb2d1
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..e69de29bb2d1
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..71ea134a6df0
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/recurrenceEditor/_index.scss
@@ -0,0 +1,34 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/recurrenceEditor" with (
+  $recurrence-interval-number-box-margin-top: var(--dx-recurrence-editor-interval-number-box-margin-block-start),
+  $recurrence-radio-group-item-padding: var(--dx-recurrence-editor-radio-group-item-padding-block-end),
+  $recurrence-button-group-item-padding: var(--dx-recurrence-editor-button-group-padding),
+);
+
+.dx-recurrence-numberbox-interval {
+  margin-right: var(--dx-recurrence-editor-number-box-margin);
+}
+
+.dx-recurrence-numberbox-interval-label {
+  font-size: $global-font-size;
+}
+
+.dx-recurrence-button-group {
+  .dx-buttongroup-wrapper > div {
+    min-width: 0;
+  }
+}
+
+.dx-recurrence-radiogroup-repeat-type {
+  margin: var(--dx-recurrence-editor-radio-group-margin) 0;
+}
+
+.dx-recurrence-datebox-until-date {
+  margin-top: var(--dx-recurrence-editor-until-date-box-margin-block-start);
+}
+
+.dx-recurrence-numberbox-repeat-count {
+  margin-top: var(--dx-recurrence-editor-count-number-box-margin-block-start);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/recurrenceEditor/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/recurrenceEditor/_public.scss
new file mode 100644
index 000000000000..21f7d155f2ed
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/recurrenceEditor/_public.scss
@@ -0,0 +1,12 @@
+// GENERATED by tools/naming/publish.mjs
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-recurrence-editor-button-group-padding: #{$recurrence-editor-button-group-padding};
+  --dx-recurrence-editor-count-number-box-margin-block-start: #{$recurrence-editor-count-number-box-margin-block-start};
+  --dx-recurrence-editor-interval-number-box-margin-block-start: #{$recurrence-editor-interval-number-box-margin-block-start};
+  --dx-recurrence-editor-number-box-margin: #{$recurrence-editor-number-box-margin};
+  --dx-recurrence-editor-radio-group-item-padding-block-end: #{$recurrence-editor-radio-group-item-padding-block-end};
+  --dx-recurrence-editor-radio-group-margin: #{$recurrence-editor-radio-group-margin};
+  --dx-recurrence-editor-until-date-box-margin-block-start: #{$recurrence-editor-until-date-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..637e55ad3550
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/recurrenceEditor/_sizes.scss
@@ -0,0 +1,26 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$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: ds.$spacing-1000 !default;
+  $recurrence-editor-interval-number-box-margin-block-start: ds.$spacing-300 !default;
+}
+
+@else if $size == "compact" {
+  $recurrence-editor-until-date-box-margin-block-start: ds.$spacing-480 !default;
+  $recurrence-editor-count-number-box-margin-block-start: ds.$spacing-800 !default;
+  $recurrence-editor-interval-number-box-margin-block-start: ds.$spacing-220 !default;
+}
+
+// Base-layer sizing injected with design tokens (wave B4)
+$recurrence-editor-radio-group-item-padding-block-end: ds.$spacing-100 !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..e69de29bb2d1
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..018ce315e8c7
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/responsiveBox/_index.scss
@@ -0,0 +1,2 @@
+@use "colors" as *;
+@use "sizes" as *;
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..e69de29bb2d1
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..1f3da10b532f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_colors.scss
@@ -0,0 +1,66 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$scheduler-base-border: ds.$color-border !default;
+$scheduler-cell-bg-active: ds.$color-bg-active !default;
+$scheduler-cell-bg-hovered: ds.$color-bg-hovered !default;
+$scheduler-group-separator-border: ds.$color-border-contrast !default;
+
+$scheduler-accent-border: ds.$color-border !default;
+
+$scheduler-appointment-content: ds.$color-content !default;
+
+$scheduler-appointment-base-bg: ds.$color-bg-primary-subtle !default;
+
+$scheduler-appointment-start-shadow: ds.$color-shadow-key-darker !default;
+$scheduler-appointment-bg-active: ds.$color-bg-primary-subtler-active !default;
+
+$scheduler-workspace-cell-bg-focused: ds.$color-bg-primary-alpha !default;
+
+$scheduler-first-month-border: ds.$color-border !default;
+$scheduler-droppable-cell-bg: ds.$color-bg-low !default;
+$scheduler-panel-content: ds.$color-content-subtle !default;
+$scheduler-workspace-bg: ds.$color-bg !default;
+$scheduler-workspace-accent-content: ds.$color-content-primary !default;
+
+$scheduler-current-time-cell-content: ds.$color-content-primary !default;
+$scheduler-time-indicator-content: ds.$color-bg-danger !default;
+$scheduler-dd-appointment-content-hovered: ds.$color-content-inverted !default;
+$scheduler-form-icon: ds.$color-content-subtle !default;
+$scheduler-workspace-month-content: ds.$color-content !default;
+$scheduler-workspace-other-month-content: ds.$color-content-subtle !default;
+$scheduler-dropdown-appointment-date-content: ds.$color-content-subtle !default;
+$scheduler-header-bg: ds.$color-bg !default;
+$scheduler-all-day-panel-bg: ds.$color-bg !default;
+$scheduler-appointment-bg-focused: false !default;
+$scheduler-appointment-shadow-focused: false !default;
+$scheduler-time-indicator-bg: rgb(from #{ds.$color-content} r g b / 0.03) !default;
+
+$scheduler-tooltip-appointment-content: ds.$color-content !default;
+$scheduler-appointment-overlay-bg: ds.$color-bg !default;
+
+// Agenda
+$scheduler-agenda-appointment-recurrence-icon: ds.$color-content-inverted !default;
+$scheduler-agenda-appointment-bg-hovered: ds.$color-bg-hovered !default;
+$scheduler-agenda-appointment-bg-active: ds.$color-bg-alpha-active !default;
+$scheduler-agenda-appointment-content: ds.$color-content !default;
+
+$scheduler-header-panel-cell-date-content: ds.$color-content-subtle !default;
+
+$scheduler-first-month-cell-bg: rgb(from #{$scheduler-appointment-base-bg} r g b / 0.15) !default;
+
+// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
+$scheduler-appointment-strip-bg: ds.$color-bg-primary !default;
+$scheduler-bg: ds.$color-bg !default;
+$scheduler-border: ds.$color-border !default;
+$scheduler-inverted-content: ds.$color-content-inverted !default;
+
+// Base-layer values injected with design tokens (wave B1)
+$scheduler-appointment-dragging-shadow: ds.$box-shadow-xl !default;
+$scheduler-tooltip-shadow: ds.$box-shadow-md !default;
+
+$scheduler-content-disabled: ds.$color-content-disabled !default;
+$scheduler-time-panel-content-disabled: ds.$color-content-disabled !default;
+
+$scheduler-tooltip-date-content: ds.$color-content-subtle !default;
+$scheduler-appointment-date-content: ds.$color-content-subtle !default;
+$scheduler-agenda-details-content: ds.$color-content-subtle !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..4b7a97a998a8
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_index.scss
@@ -0,0 +1,1172 @@
+@use "../list/colors" as listColors;
+@use "../mixins" as *;
+@use "sass:math";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@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-collector-height: var(--dx-scheduler-appointment-collector-height),
+  $scheduler-appointment-min-size: var(--dx-scheduler-appointment-min-size),
+  $scheduler-appointment-content-padding: var(--dx-scheduler-appointment-content-padding),
+  $scheduler-appointment-reduced-content-padding: var(--dx-scheduler-appointment-reduced-content-padding),
+  $scheduler-grouped-appointment-month-text-size: var(--dx-scheduler-appointment-month-text-font-size),
+  $scheduler-border-width: var(--dx-scheduler-border-width),
+  $scheduler-workspace-info-font-size: var(--dx-scheduler-workspace-info-font-size),
+  $scheduler-small-font-size: var(--dx-scheduler-small-font-size),
+  $scheduler-group-header-table-cell-height: var(--dx-scheduler-group-header-cell-height),
+  $scheduler-month-date-text-size: var(--dx-scheduler-month-date-text-font-size),
+  $scheduler-month-date-text-padding: var(--dx-scheduler-month-date-text-padding),
+  $scheduler-reduced-icon-offset: var(--dx-scheduler-reduced-icon-inset-inline),
+  $scheduler-recurrence-icon-offset: var(--dx-scheduler-recurrence-icon-inset-inline),
+  $scheduler-agenda-appointment-margin: var(--dx-scheduler-agenda-appointment-margin),
+  $scheduler-agenda-last-in-date-appointment-margin: var(--dx-scheduler-agenda-appointment-last-margin),
+  $scheduler-time-indicator-font-size: var(--dx-scheduler-time-indicator-font-size),
+  $scheduler-time-indicator-size: var(--dx-scheduler-time-indicator-size),
+  $scheduler-appointment-reduced-icon-top: var(--dx-scheduler-appointment-reduced-icon-inset-block-start),
+  $scheduler-appointment-active-marker-border-radius: var(--dx-scheduler-appointment-marker-border-radius-active),
+  $scheduler-appointment-content-details-margin-top: var(--dx-scheduler-appointment-content-details-margin-block-start),
+  $scheduler-appointment-reduced-icon-rtl-left: var(--dx-scheduler-appointment-reduced-icon-rtl-inset-inline-start),
+  $agenda-appointment-item-padding: var(--dx-scheduler-agenda-appointment-item-padding),
+  $agenda-appointment-item-border-radius: var(--dx-scheduler-agenda-appointment-item-border-radius),
+  $agenda-appointment-right-layout-margin-left: var(--dx-scheduler-agenda-appointment-right-layout-margin-inline-start),
+  $agenda-appointment-allday-padding-right: var(--dx-scheduler-agenda-appointment-allday-padding-inline-end),
+  $agenda-appointment-resource-item-margin-left: var(--dx-scheduler-agenda-appointment-resource-item-margin-inline-start),
+  $agenda-appointment-resource-value-margin-left: var(--dx-scheduler-agenda-appointment-resource-value-margin-inline-start),
+  $agenda-appointment-rtl-margin-right: var(--dx-scheduler-agenda-appointment-rtl-margin-inline-end),
+  $scheduler-timeline-min-height: var(--dx-scheduler-timeline-min-height),
+  $scheduler-timeline-group-two-empty-cell-width: var(--dx-scheduler-timeline-group-two-empty-cell-width),
+  $scheduler-timeline-group-header-width: var(--dx-scheduler-timeline-group-header-width),
+  $scheduler-timeline-group-three-empty-cell-width: var(--dx-scheduler-timeline-group-three-empty-cell-width),
+  $scheduler-timeline-cell-width: var(--dx-scheduler-timeline-cell-width),
+  $scheduler-agenda-left-column-width: var(--dx-scheduler-agenda-left-column-width),
+  $scheduler-group-header-agenda-font-size: var(--dx-scheduler-group-header-agenda-font-size),
+  $scheduler-agenda-date-table-padding-top: var(--dx-scheduler-agenda-date-table-padding-block-start),
+  $scheduler-renovation-virtual-row-height: var(--dx-scheduler-virtual-row-height),
+  $scheduler-tooltip-width: var(--dx-scheduler-tooltip-width),
+  $scheduler-tooltip-content-padding: var(--dx-scheduler-tooltip-content-padding),
+  $scheduler-tooltip-title-margin-top: var(--dx-scheduler-tooltip-title-margin-block-start),
+  $scheduler-tooltip-title-margin-left: var(--dx-scheduler-tooltip-title-margin-inline-start),
+  $scheduler-tooltip-date-margin: var(--dx-scheduler-tooltip-date-margin),
+  $scheduler-tooltip-remove-margin-top: var(--dx-scheduler-tooltip-remove-margin-block-start),
+  $scheduler-common-collector-margin: var(--dx-scheduler-common-collector-margin),
+  $scheduler-common-collector-size: var(--dx-scheduler-common-collector-size),
+  $scheduler-appointment-content-horizontal-padding: var(--dx-scheduler-all-day-appointment-content-padding),
+  $scheduler-appointment-recurrence-icon-top: var(--dx-scheduler-appointment-recurrence-icon-inset-block-start),
+  $scheduler-header-panel-current-time-cell-height: var(--dx-scheduler-header-panel-current-time-cell-height),
+  $scheduler-appointment-content-recurrence-padding: var(--dx-scheduler-recurrence-appointment-content-padding),
+  $scheduler-rtl-padding: var(--dx-scheduler-rtl-padding),
+  $scheduler-appointment-collector-width: var(--dx-scheduler-appointment-collector-width),
+  $scheduler-appointment-content-padding-right: var(--dx-scheduler-appointment-content-padding-inline-end),
+  $scheduler-views-header-border: var(--dx-scheduler-views-header-border),
+  $scheduler-views-empty-cell-border-bottom: var(--dx-scheduler-views-empty-cell-border-block-end),
+  $scheduler-views-empty-cell-border-right: var(--dx-scheduler-views-empty-cell-border-inline-end),
+  $scheduler-views-empty-cell-border-left: var(--dx-scheduler-views-empty-cell-border-inline-start),
+  $scheduler-views-first-child-border-left: var(--dx-scheduler-views-first-child-border-inline-start),
+  $scheduler-views-time-panel-border-bottom: var(--dx-scheduler-views-time-panel-border-block-end),
+  $scheduler-views-group-header-padding: var(--dx-scheduler-views-group-header-padding),
+  $scheduler-views-group-header-padding-alt: var(--dx-scheduler-views-sidebar-group-header-padding),
+  $scheduler-views-time-indicator-height: var(--dx-scheduler-views-time-indicator-height),
+  $scheduler-views-group-header-content-height: var(--dx-scheduler-views-group-header-content-height),
+  $scheduler-views-vertical-group-min-height: var(--dx-scheduler-views-vertical-group-min-height),
+  $scheduler-tooltip-shadow: var(--dx-scheduler-tooltip-shadow),
+  $scheduler-appointment-icon-font-size: var(--dx-scheduler-appointment-icon-font-size),
+  $scheduler-appointment-resizing-opacity: var(--dx-scheduler-appointment-resizing-opacity),
+  $scheduler-tooltip-date-opacity: false,
+  $scheduler-appointment-date-opacity: false,
+  $agenda-appointment-details-opacity: false,
+  $scheduler-appointment-disabled-opacity: var(--dx-scheduler-appointment-opacity-disabled),
+  $agenda-appointment-title-font-weight: var(--dx-scheduler-agenda-title-font-weight),
+  $agenda-appointment-details-font-size: var(--dx-scheduler-agenda-details-font-size),
+  $scheduler-appointment-dragging-shadow: var(--dx-scheduler-appointment-dragging-shadow),
+  $scheduler-tooltip-appointment-text-color: var(--dx-scheduler-tooltip-appointment-content),
+  $scheduler-appointment-overlay-bg: var(--dx-scheduler-appointment-overlay-bg),
+  $scheduler-tooltip-list-focused-bg: listColors.$list-item-bg-hovered,
+  $scheduler-appointment-base-color: var(--dx-scheduler-appointment-base-bg),
+  $scheduler-appointment-start-color: var(--dx-scheduler-appointment-start-shadow),
+  $scheduler-appointment-active-color: var(--dx-scheduler-appointment-bg-active),
+  $scheduler-base-border-color: var(--dx-scheduler-base-border),
+  $scheduler-accent-border-color: var(--dx-scheduler-accent-border),
+  $scheduler-current-time-cell-color: var(--dx-scheduler-current-time-cell-content),
+  $scheduler-time-indicator-color: var(--dx-scheduler-time-indicator-content),
+  $scheduler-time-indicator-background-color: var(--dx-scheduler-time-indicator-bg),
+  $scheduler-workspace-background-color: var(--dx-scheduler-workspace-bg),
+  $scheduler-workspace-month-text-color: var(--dx-scheduler-workspace-month-content),
+  $scheduler-workspace-accent-color: var(--dx-scheduler-workspace-accent-content),
+  $scheduler-first-month-cell-background-color: var(--dx-scheduler-first-month-cell-bg),
+  $scheduler-panel-text-color: var(--dx-scheduler-panel-content),
+  // NOT var(): base multiplies it (`$scheduler-left-column-width * $scheduler-small-size-factor`)
+  // outside any meta.type-of guard
+  $scheduler-left-column-width: $scheduler-left-column-width,
+  $scheduler-timeline-cell-height: var(--dx-scheduler-timeline-cell-height),
+  $scheduler-workspace-active-cell-color: var(--dx-scheduler-workspace-cell-bg-active),
+  $scheduler-workspace-hovered-cell-color: var(--dx-scheduler-workspace-cell-content-hovered),
+  $scheduler-workspace-focused-cell-color: var(--dx-scheduler-workspace-cell-bg-focused),
+  $scheduler-droppable-cell-background-color: var(--dx-scheduler-droppable-cell-bg),
+  $scheduler-appointment-text-color: var(--dx-scheduler-appointment-content),
+  /*
+   * NOT var(): base reads these two as BUILD-TIME FLAGS (`@if $fill-focused-appointment`), so they
+   * decide which rules exist rather than what they print. A var() string is always truthy, which
+   * would freeze the choice and hide it from the reader.
+   */
+  $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: var(--dx-scheduler-dd-appointment-content-hovered),
+
+  $agenda-appointment-recurrence-icon-color: var(--dx-scheduler-agenda-appointment-recurrence-icon),
+  $agenda-appointment-hover-bg: var(--dx-scheduler-agenda-appointment-bg-hovered),
+  $agenda-appointment-active-bg: var(--dx-scheduler-agenda-appointment-bg-active),
+  $agenda-appointment-text-color: var(--dx-scheduler-agenda-appointment-content),
+  $agenda-appointment-title-font-size: var(--dx-scheduler-agenda-appointment-title-font-size),
+
+  $scheduler-appointment-popup-icon-margin-top: var(--dx-scheduler-appointment-popup-icon-margin-block-start),
+  $scheduler-appointment-popup-repeat-end-item-height: var(--dx-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: var(--dx-scheduler-appointment-content-details-font-size),
+  $scheduler-tooltip-subject-font-size: var(--dx-scheduler-tooltip-subject-font-size),
+  $scheduler-tooltip-date-font-size: var(--dx-scheduler-tooltip-date-font-size)
+);
+@use "../button/mixins" as *;
+@use "../tooltip/sizes" as tooltipSizes;
+@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: var(--dx-scheduler-border-radius);
+}
+
+.dx-scheduler-time-panel-cell {
+  height: var(--dx-scheduler-workspace-date-table-cell-height);
+
+  &::after {
+    content: none;
+  }
+
+  > div {
+    margin-top: var(--dx-scheduler-time-panel-cell-margin-block-start);
+    font-size: var(--dx-scheduler-time-panel-font-size);
+
+    .dx-scheduler-small & {
+      font-size: calc(var(--dx-scheduler-time-panel-font-size) - 1px); // dx-px-nudge: -1px off the time panel font size
+    }
+  }
+
+  padding-right: var(--dx-scheduler-agenda-time-panel-cell-padding);
+
+  .dx-scheduler-small & {
+    padding-right: var(--dx-scheduler-small-padding-inline-end);
+  }
+
+  .dx-rtl & {
+    padding-left: var(--dx-scheduler-agenda-time-panel-cell-padding);
+    padding-right: 0;
+  }
+
+  .dx-rtl.dx-scheduler-small & {
+    padding-left: var(--dx-scheduler-small-padding-inline-start);
+  }
+
+  &.dx-scheduler-time-panel-current-time-cell::before {
+    content: none;
+  }
+}
+
+.dx-scheduler-date-table-cell {
+  height: var(--dx-scheduler-workspace-date-table-cell-height);
+}
+
+.dx-scheduler-all-day-title {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  height: var(--dx-scheduler-all-day-table-cell-height);
+  font-size: var(--dx-scheduler-all-day-title-font-size);
+  border-bottom: baseScheduler.$scheduler-base-border;
+  border-bottom-color: var(--dx-scheduler-base-border);
+  text-align: right;
+  padding-right: var(--dx-scheduler-agenda-time-panel-cell-padding);
+
+  .dx-rtl & {
+    justify-content: start;
+  }
+
+  .dx-scheduler-small & {
+    font-size: calc(var(--dx-scheduler-all-day-title-font-size) * 0.8);
+    padding-right: var(--dx-scheduler-small-padding-inline-end);
+  }
+
+  .dx-scheduler-work-space-all-day-collapsed & {
+    height: var(--dx-scheduler-collapsed-all-day-table-cell-height);
+  }
+}
+
+.dx-scheduler-all-day-table {
+  height: var(--dx-scheduler-all-day-table-cell-height);
+
+  .dx-scheduler-work-space-all-day-collapsed & {
+    height: var(--dx-scheduler-collapsed-all-day-table-cell-height);
+  }
+}
+
+.dx-scheduler-appointment-content { // stylelint-disable-line no-duplicate-selectors
+  padding: var(--dx-scheduler-appointment-content-padding);
+}
+
+.dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content {
+  padding: var(--dx-scheduler-recurring-appointment-content-padding);
+}
+
+.dx-rtl .dx-scheduler-appointment-content {
+  padding: var(--dx-scheduler-appointment-content-rtl-padding);
+}
+
+.dx-rtl .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content {
+  padding: var(--dx-scheduler-recurring-appointment-content-rtl-padding);
+}
+
+.dx-scheduler-appointment-title {
+  font-size: var(--dx-scheduler-appointment-title-font-size);
+}
+
+.dx-scheduler-appointment-content-details {
+  font-size: var(--dx-scheduler-appointment-details-font-size);
+}
+
+.dx-rtl .dx-scheduler-work-space-day {
+  .dx-scheduler-all-day-appointment {
+    .dx-scheduler-appointment-content {
+      padding: var(--dx-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: var(--dx-scheduler-appointment-content-padding);
+    }
+  }
+
+  .dx-scheduler-date-time-indicator {
+    height: var(--dx-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: var(--dx-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: var(--dx-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: var(--dx-scheduler-appointment-20min-recurrence-padding-inline-end);
+        }
+      }
+    }
+
+    .dx-scheduler-appointment-content {
+      @container (max-height: #{$scheduler-appointment-25min-height}) {
+        display: flex;
+        align-items: center;
+        padding: var(--dx-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: var(--dx-scheduler-appointment-10min-title-font-size);
+          line-height: var(--dx-scheduler-appointment-10min-title-line-height);
+        }
+
+        .dx-scheduler-appointment-recurrence-icon {
+          right: var(--dx-scheduler-appointment-10min-icon-inset-inline-end);
+          font-size: var(--dx-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: var(--dx-scheduler-appointment-15min-title-font-size);
+          line-height: var(--dx-scheduler-appointment-15min-title-line-height);
+        }
+
+        .dx-scheduler-appointment-recurrence-icon {
+          right: var(--dx-scheduler-appointment-15min-icon-inset-inline-end);
+          font-size: var(--dx-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: var(--dx-scheduler-appointment-20min-icon-inset-inline-end);
+        }
+      }
+    }
+  }
+}
+
+.dx-scheduler-header-panel {
+  margin-top: 0;
+}
+
+.dx-scheduler-header-panel-cell {
+  font-size: var(--dx-scheduler-time-panel-font-size);
+  padding-bottom: var(--dx-scheduler-header-panel-cell-padding-block-end);
+  padding-left: var(--dx-scheduler-header-panel-time-cell-padding);
+  padding-right: var(--dx-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: var(--dx-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: var(--dx-scheduler-workspace-month-timeline-time-height);
+      font-size: var(--dx-scheduler-time-panel-font-size);
+      padding-left: var(--dx-scheduler-header-panel-margin);
+      padding-right: var(--dx-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: var(--dx-scheduler-base-border);
+    flex-flow: column;
+    justify-content: flex-end;
+  }
+
+  &.dx-scheduler-header-panel-current-time-cell {
+    color: var(--dx-scheduler-panel-content);
+
+    &::before {
+      content: none;
+    }
+
+    .dx-scheduler-header-panel-cell-date:first-child {
+      margin-bottom: var(--dx-scheduler-header-panel-cell-date-margin-block-end);
+    }
+
+    .dx-scheduler-header-panel-cell-date:last-child {
+      color: var(--dx-scheduler-inverted-content);
+      background-color: var(--dx-scheduler-current-time-cell-date-bg);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      width: var(--dx-scheduler-header-day-element-height);
+      height: var(--dx-scheduler-header-day-element-height);
+      margin-top: 0;
+    }
+  }
+
+  .dx-scheduler-header-panel-cell-date {
+    display: block;
+    font-size: var(--dx-scheduler-header-panel-cell-date-font-size);
+
+    .dx-scheduler-small & {
+      margin: 0 calc(var(--dx-scheduler-header-panel-margin) * #{baseScheduler.$scheduler-small-size-factor});
+    }
+
+    &:last-child {
+      font-size: var(--dx-scheduler-header-panel-day-font-size);
+      margin-top: var(--dx-scheduler-small-margin-block-start);
+      margin-bottom: var(--dx-scheduler-small-margin-block-end);
+      margin-left: var(--dx-scheduler-small-margin-inline-start);
+      color: var(--dx-scheduler-header-panel-cell-date-content);
+    }
+  }
+}
+
+.dx-scheduler-timeline {
+  .dx-scheduler-date-table-cell {
+    height: var(--dx-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: var(--dx-scheduler-base-border);
+    }
+  }
+}
+
+.dx-rtl .dx-scheduler-work-space.dx-scheduler-work-space-month {
+  .dx-scheduler-appointment-content {
+    padding: var(--dx-scheduler-month-appointment-content-rtl-padding);
+  }
+
+  .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content {
+    padding: var(--dx-scheduler-month-recurrence-appointment-content-rtl-padding);
+  }
+}
+
+.dx-scheduler-work-space.dx-scheduler-work-space-month {
+  .dx-scheduler-date-table-other-month {
+    color: var(--dx-scheduler-workspace-other-month-content);
+  }
+
+  .dx-scheduler-header-panel-cell-date:last-child {
+    color: var(--dx-scheduler-header-panel-cell-date-content);
+    border-radius: initial;
+    background-color: initial;
+  }
+
+  .dx-scheduler-appointment-content {
+    padding: var(--dx-scheduler-month-appointment-content-padding);
+    font-size: var(--dx-scheduler-appointment-month-font-size);
+  }
+
+  .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content {
+    padding: var(--dx-scheduler-month-recurrence-appointment-content-padding);
+  }
+
+  .dx-scheduler-date-table-first-of-month {
+    border-left: var(--dx-scheduler-first-of-month-border);
+    border-left-color: var(--dx-scheduler-first-month-border);
+    border-top: var(--dx-scheduler-first-of-month-border);
+    border-top-color: var(--dx-scheduler-first-month-border);
+  }
+
+  .dx-scheduler-header-panel {
+    border-bottom: none;
+  }
+
+  .dx-scheduler-date-table-scrollable .dx-scrollable-content {
+    min-height: var(--dx-scheduler-scrollable-content-min-height);
+  }
+
+  .dx-scheduler-date-table-cell {
+    font-size: var(--dx-scheduler-month-date-font-size);
+    text-align: left;
+    height: var(--dx-scheduler-date-table-cell-height);
+
+    > div {
+      padding: var(--dx-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: var(--dx-scheduler-current-time-cell-content);
+    }
+  }
+
+  .dx-scheduler-header-panel-cell { // stylelint-disable-line no-duplicate-selectors
+    padding-left: var(--dx-scheduler-workspace-month-cell-left-offset);
+
+    .dx-scheduler-header-panel-cell-date {
+      margin-left: 0;
+      line-height: var(--dx-scheduler-workspace-month-header-height);
+    }
+  }
+
+  .dx-scheduler-date-table-current-date {
+    color: var(--dx-scheduler-current-time-cell-content);
+  }
+}
+
+.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: var(--dx-scheduler-dropdown-button-margin-block);
+      }
+    }
+  }
+
+  .dx-scheduler-work-space.dx-scheduler-work-space-month:not(.dx-rtl) .dx-scheduler-appointment-collector {
+    margin-left: var(--dx-scheduler-appointment-collector-margin-inline-start);
+  }
+
+  .dx-scheduler-work-space.dx-scheduler-work-space-month.dx-rtl .dx-scheduler-appointment-collector {
+    margin-right: var(--dx-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: var(--dx-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: var(--dx-scheduler-dropdown-button-adaptive-margin-block);
+      }
+    }
+  }
+}
+
+.dx-scheduler-appointment-collector {
+  height: var(--dx-scheduler-dropdown-button-height);
+  margin: var(--dx-scheduler-dropdown-button-margin);
+  position: absolute;
+
+  &.dx-button {
+    border-radius: var(--dx-scheduler-dropdown-button-height);
+    height: var(--dx-scheduler-dropdown-button-height);
+    min-width: auto;
+    width: auto;
+
+    &::before {
+      display: none;
+    }
+
+    .dx-button-content {
+      padding: var(--dx-scheduler-dropdown-button-padding) 0;
+      font-size: var(--dx-scheduler-navigator-button-font-size);
+    }
+  }
+}
+
+.dx-scheduler-header {
+  @include baseSchedulerHeader.header-sizes(
+    var(--dx-scheduler-header-height),
+    var(--dx-scheduler-header-offset),
+    var(--dx-scheduler-toolbar-item-offset),
+  );
+
+  .dx-scheduler-navigator-next,
+  .dx-scheduler-navigator-previous {
+    @include dx-button-onlyicon-sizing(var(--dx-scheduler-navigator-icon-font-size));
+  }
+
+  background-color: var(--dx-scheduler-header-bg);
+  border-top-right-radius: var(--dx-scheduler-border-radius);
+  border-top-left-radius: var(--dx-scheduler-border-radius);
+}
+
+.dx-scheduler-group-row {
+  .dx-scheduler-group-header {
+    font-weight: var(--dx-scheduler-group-header-font-weight);
+  }
+}
+
+.dx-scheduler-group-table,
+.dx-scheduler-header-panel {
+  .dx-scheduler-group-row {
+    .dx-scheduler-group-header {
+      font-size: var(--dx-scheduler-group-header-font-size);
+      text-align: left;
+      border-bottom: var(--dx-scheduler-group-header-border-block-end);
+      border-bottom-color: var(--dx-scheduler-base-border);
+
+      .dx-scheduler-group-header-content {
+        padding-left: var(--dx-scheduler-header-panel-margin);
+
+        .dx-scheduler-work-space-month &,
+        .dx-scheduler-agenda & {
+          padding-left: var(--dx-scheduler-workspace-month-cell-left-offset);
+
+          .dx-rtl & {
+            padding-right: var(--dx-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: var(--dx-scheduler-group-header-content-inset-block-start);
+          transform: none;
+        }
+      }
+
+      .dx-rtl & {
+        text-align: right;
+      }
+    }
+  }
+}
+
+.dx-scheduler-all-day-panel {
+  background-color: var(--dx-scheduler-all-day-panel-bg);
+
+  .dx-scheduler-all-day-table-cell {
+    border-bottom: baseScheduler.$scheduler-base-border;
+    border-bottom-color: var(--dx-scheduler-base-border);
+  }
+}
+
+.dx-scheduler-work-space { // stylelint-disable-line no-duplicate-selectors
+  border-bottom-right-radius: var(--dx-scheduler-border-radius);
+  border-bottom-left-radius: var(--dx-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: var(--dx-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: var(--dx-scheduler-base-border);
+    }
+
+    &.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-header-panel .dx-scheduler-group-row:has(+ .dx-scheduler-group-row) .dx-scheduler-group-header {
+        border-bottom: var(--dx-scheduler-group-header-border-block-end);
+        border-bottom-color: var(--dx-scheduler-base-border);
+      }
+    }
+
+    &.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: var(--dx-scheduler-cell-bg-active);
+  }
+
+  &.dx-state-hover {
+    background-color: var(--dx-scheduler-cell-bg-hovered);
+    color: var(--dx-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: var(--dx-scheduler-appointment-popup-toolbar-height);
+    }
+  }
+
+  .dx-form {
+    .dx-scheduler-form-icon {
+      color: var(--dx-scheduler-form-icon);
+
+      &.dx-field-item.dx-flex-layout {
+        height: var(--dx-scheduler-appointment-popup-icon-container-height);
+        padding-inline-end: var(--dx-scheduler-appointment-popup-icon-padding-inline-end);
+      }
+    }
+
+    .dx-scheduler-form-subject-group .dx-scheduler-form-icon {
+      color: var(--dx-scheduler-appointment-base-bg);
+    }
+
+    .dx-scheduler-form-icon-sized-gap {
+      width: $global-icon-size;
+    }
+
+    .dx-scheduler-days-of-week-buttons {
+      height: toolbarSizes.$toolbar-height;
+      gap: var(--dx-scheduler-appointment-popup-days-of-week-buttons-gap);
+    }
+
+    .dx-field-item:not(.dx-first-col) {
+      padding-inline-start: var(--dx-scheduler-appointment-popup-item-padding-inline);
+    }
+
+    .dx-field-item:not(.dx-last-col) {
+      padding-inline-end: var(--dx-scheduler-appointment-popup-item-padding-inline);
+    }
+
+    .dx-scheduler-form-all-day-switch.dx-field-item.dx-label-h-align {
+      height: var(--dx-scheduler-appointment-popup-all-day-item-height);
+
+      .dx-field-item-content {
+        .dx-switch.dx-widget {
+          margin-bottom: var(--dx-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-px-nudge: -2px outline inset
+      }
+    }
+  }
+}
+
+.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: var(--dx-scheduler-last-group-cell-border-inline-end);
+  border-right-color: var(--dx-scheduler-group-separator-border);
+
+  &:last-child:not(:where(.dx-scheduler-group-header-inner-column)) {
+    border-right: none;
+  }
+
+  .dx-rtl & {
+    border-left: var(--dx-scheduler-rtl-border-inline-start);
+    border-left-color: var(--dx-scheduler-group-separator-border);
+    border-right: baseScheduler.$scheduler-base-border;
+    border-right-color: var(--dx-scheduler-base-border);
+
+    &:last-child:not(:where(.dx-scheduler-group-header-inner-column)) {
+      border-left: none;
+    }
+  }
+}
+
+.dx-scheduler-appointment {
+  &,
+  .dx-rtl &,
+  .dx-scheduler-work-space-month &,
+  .dx-scheduler-timeline &,
+  .dx-rtl .dx-scheduler-timeline & {
+    border-left: var(--dx-scheduler-appointment-transparent-left-border);
+    border-right: var(--dx-scheduler-appointment-transparent-right-border);
+    box-shadow: none;
+    border-radius: var(--dx-scheduler-appointment-border-radius);
+
+    &.dx-state-focused {
+      color: var(--dx-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: var(--dx-scheduler-dropdown-appointment-date-content);
+}
+
+.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: var(--dx-scheduler-base-border);
+    }
+  }
+}
+
+.dx-scheduler-work-space-both-scrollbar {
+  .dx-scheduler-all-day-title {
+    background-color: var(--dx-scheduler-all-day-panel-bg);
+  }
+
+  .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: var(--dx-scheduler-appointment-strip-width);
+    height: 100%;
+    background-color: var(--dx-scheduler-appointment-strip-bg);
+  }
+
+  @container (max-width: 8px) { // dx-literal-required: 8px in a @container condition, var() is invalid there
+    .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: var(--dx-scheduler-appointment-strip-border-start-end-radius);
+    border-bottom-right-radius: var(--dx-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: var(--dx-scheduler-appointment-strip-border-start-start-radius);
+    border-bottom-left-radius: var(--dx-scheduler-appointment-strip-border-end-start-radius);
+  }
+}
+
+.dx-scheduler-agenda {
+  .dx-scheduler-group-header {
+    font-size: var(--dx-scheduler-group-header-font-size);
+    width: var(--dx-scheduler-group-header-table-cell-width);
+
+    .dx-scheduler-group-header-content {
+      padding-top: var(--dx-scheduler-group-header-content-padding-block-start);
+      width: var(--dx-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 var(--dx-scheduler-border); // dx-line-width: 1px hairline drawn as an inset shadow
+  }
+
+  .dx-scheduler-time-panel-cell {
+    text-align: left;
+    padding-left: var(--dx-scheduler-agenda-time-panel-cell-padding);
+    padding-right: 0;
+
+    .dx-rtl & {
+      text-align: right;
+      padding-right: var(--dx-scheduler-agenda-time-panel-cell-padding);
+      padding-left: 0;
+    }
+
+    > span {
+      font-size: var(--dx-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 var(--dx-scheduler-group-separator-border); // dx-line-width: 1px hairline drawn as an inset shadow
+      }
+    }
+  }
+}
+
+.dx-popup-content .dx-scheduler-dropdown-appointment-buttons-block {
+  .dx-button {
+    min-width: auto;
+    padding: 0;
+
+    @include dx-button-flat-color-styling(
+      var(--dx-button-default-text-content),
+      var(--dx-button-default-text-content-hovered),
+      var(--dx-button-default-outlined-content-active),
+      var(--dx-button-default-text-bg),
+      var(--dx-button-default-outlined-bg-hovered),
+      var(--dx-button-default-outlined-bg-focused),
+      var(--dx-button-default-outlined-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: var(--dx-scheduler-base-border);
+        border-right: none;
+      }
+    }
+  }
+}
+
+.dx-scheduler-appointment-tooltip-wrapper,
+.dx-scheduler-overlay-panel {
+  .dx-overlay-content {
+    background-color: var(--dx-scheduler-bg);
+
+    .dx-popup-content {
+      padding: 0;
+    }
+
+    .dx-list {
+      .dx-list-item {
+        margin-bottom: 0;
+        margin-top: 0;
+        border-bottom: var(--dx-scheduler-list-item-border-block-end);
+        border-bottom-color: var(--dx-scheduler-border);
+
+        &: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: var(--dx-scheduler-appointment-tooltip-content-margin-inline-start);
+
+          .dx-tooltip-appointment-item-marker-body {
+            margin-top: var(--dx-scheduler-tooltip-appointment-item-marker-body-margin-block-start);
+            width: var(--dx-scheduler-tooltip-marker-size);
+            height: var(--dx-scheduler-tooltip-marker-size);
+          }
+
+          .dx-tooltip-appointment-item-content {
+            .dx-tooltip-appointment-item-content-subject {
+              margin-top: var(--dx-scheduler-appointment-tooltip-title-margin-block-start);
+              font-size: var(--dx-scheduler-appointment-tooltip-title-font-size);
+              font-weight: var(--dx-scheduler-tooltip-subject-font-weight);
+            }
+
+            .dx-tooltip-appointment-item-content-date {
+              font-size: var(--dx-scheduler-appointment-tooltip-date-font-size);
+              margin-top: var(--dx-scheduler-tooltip-appointment-item-content-date-margin-block-start);
+            }
+          }
+
+          .dx-tooltip-appointment-item-delete-button-container {
+            padding-top: var(--dx-scheduler-appointment-tooltip-remove-padding-block-start);
+          }
+        }
+      }
+    }
+  }
+}
+
+.dx-scheduler-timeline .dx-scheduler-group-flex-container .dx-scheduler-group-header {
+  width: var(--dx-scheduler-group-header-table-cell-width);
+}
+
+.dx-scheduler-timeline .dx-scheduler-group-flex-container-hierarchical .dx-scheduler-group-row > .dx-scheduler-group-header.dx-scheduler-group-header-leaf:only-child {
+  min-width: var(--dx-scheduler-group-header-table-cell-width);
+}
+
+.dx-scheduler-header-panel-empty-cell {
+  margin-top: 0;
+}
+
+.dx-scheduler-work-space.dx-scheduler-work-space-month .dx-scheduler-date-table-other-month.dx-state-hover {
+  color: var(--dx-scheduler-workspace-cell-content-hovered);
+}
+
+@include when-disabled(".dx-scheduler") {
+  color: var(--dx-scheduler-content-disabled);
+
+  .dx-scheduler-header,
+  .dx-scheduler-navigator-caption,
+  .dx-scheduler-header-panel,
+  .dx-scheduler-time-panel,
+  .dx-scheduler-all-day-title,
+  .dx-scheduler-work-space,
+  .dx-scheduler-appointment-content-date,
+  .dx-scheduler-appointment-content-details {
+    color: var(--dx-scheduler-content-disabled);
+  }
+
+  .dx-button-text,
+  .dx-toolbar-item-content {
+    color: var(--dx-scheduler-content-disabled);
+  }
+}
+
+.dx-scheduler.dx-state-disabled .dx-scheduler-appointment,
+.dx-state-disabled .dx-scheduler .dx-scheduler-appointment {
+  opacity: var(--dx-scheduler-appointment-opacity-disabled);
+}
+
+.dx-scheduler-appointment-content-date {
+  color: var(--dx-scheduler-appointment-date-content);
+}
+
+.dx-scheduler-agenda .dx-scheduler-appointment-content-details {
+  color: var(--dx-scheduler-agenda-details-content);
+}
+
+.dx-tooltip-appointment-item-content-date {
+  color: var(--dx-scheduler-tooltip-date-content);
+}
+
+.dx-state-disabled .dx-tooltip-appointment-item-content-date {
+  color: var(--dx-scheduler-content-disabled);
+}
+
+.dx-scheduler.dx-state-disabled .dx-scheduler-time-panel-cell,
+.dx-scheduler.dx-state-disabled .dx-scheduler-time-panel-cell > div,
+.dx-state-disabled .dx-scheduler .dx-scheduler-time-panel-cell > div {
+  color: var(--dx-scheduler-time-panel-content-disabled);
+}
+
+.dx-scheduler.dx-state-disabled,
+.dx-state-disabled .dx-scheduler {
+  .dx-scheduler-date-table-cell,
+  .dx-scheduler-date-table-cell-text,
+  .dx-scheduler-date-table-first-of-month,
+  .dx-scheduler-date-table-current-date,
+  .dx-scheduler-date-table-other-month,
+  .dx-scheduler-header-panel-cell-date,
+  .dx-scheduler-header-panel-cell-date:last-child,
+  .dx-scheduler-work-space-month .dx-scheduler-header-panel-cell-date:last-child {
+    color: var(--dx-scheduler-content-disabled);
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_public-links.scss b/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_public-links.scss
new file mode 100644
index 000000000000..6ffeed781b8a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_public-links.scss
@@ -0,0 +1,6 @@
+@mixin publish {
+  --dx-scheduler-appointment-content-focused: var(--dx-scheduler-appointment-content);
+  --dx-scheduler-current-time-cell-date-bg: var(--dx-scheduler-current-time-cell-content);
+  --dx-scheduler-workspace-cell-bg-active: var(--dx-scheduler-accent-border);
+  --dx-scheduler-workspace-cell-content-hovered: var(--dx-scheduler-workspace-month-content);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_public.scss
new file mode 100644
index 000000000000..500d77980cc1
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_public.scss
@@ -0,0 +1,232 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+@use "public-links" as links;
+
+@mixin publish {
+  --dx-scheduler-accent-border: #{$scheduler-accent-border};
+  --dx-scheduler-agenda-appointment-allday-padding-inline-end: #{$scheduler-agenda-appointment-allday-padding-inline-end};
+  --dx-scheduler-agenda-appointment-bg-active: #{$scheduler-agenda-appointment-bg-active};
+  --dx-scheduler-agenda-appointment-bg-hovered: #{$scheduler-agenda-appointment-bg-hovered};
+  --dx-scheduler-agenda-appointment-content: #{$scheduler-agenda-appointment-content};
+  --dx-scheduler-agenda-appointment-item-border-radius: #{$scheduler-agenda-appointment-item-border-radius};
+  --dx-scheduler-agenda-appointment-item-padding: #{$scheduler-agenda-appointment-item-padding};
+  --dx-scheduler-agenda-appointment-last-margin: #{$scheduler-agenda-appointment-last-margin};
+  --dx-scheduler-agenda-appointment-margin: #{$scheduler-agenda-appointment-margin};
+  --dx-scheduler-agenda-appointment-recurrence-icon: #{$scheduler-agenda-appointment-recurrence-icon};
+  --dx-scheduler-agenda-appointment-resource-item-margin-inline-start: #{$scheduler-agenda-appointment-resource-item-margin-inline-start};
+  --dx-scheduler-agenda-appointment-resource-value-margin-inline-start: #{$scheduler-agenda-appointment-resource-value-margin-inline-start};
+  --dx-scheduler-agenda-appointment-right-layout-margin-inline-start: #{$scheduler-agenda-appointment-right-layout-margin-inline-start};
+  --dx-scheduler-agenda-appointment-rtl-margin-inline-end: #{$scheduler-agenda-appointment-rtl-margin-inline-end};
+  --dx-scheduler-agenda-appointment-title-font-size: #{$scheduler-agenda-appointment-title-font-size};
+  --dx-scheduler-agenda-date-table-padding-block-start: #{$scheduler-agenda-date-table-padding-block-start};
+  --dx-scheduler-agenda-details-content: #{$scheduler-agenda-details-content};
+  --dx-scheduler-agenda-details-font-size: #{$scheduler-agenda-details-font-size};
+  --dx-scheduler-agenda-left-column-width: #{$scheduler-agenda-left-column-width};
+  --dx-scheduler-agenda-time-panel-cell-padding: #{$scheduler-agenda-time-panel-cell-padding};
+  --dx-scheduler-agenda-title-font-weight: #{$scheduler-agenda-title-font-weight};
+  --dx-scheduler-all-day-appointment-content-padding: #{$scheduler-all-day-appointment-content-padding};
+  --dx-scheduler-all-day-panel-bg: #{$scheduler-all-day-panel-bg};
+  --dx-scheduler-all-day-table-cell-height: #{$scheduler-all-day-table-cell-height};
+  --dx-scheduler-all-day-title-font-size: #{$scheduler-all-day-title-font-size};
+  --dx-scheduler-appointment-10min-icon-font-size: #{$scheduler-appointment-10min-icon-font-size};
+  --dx-scheduler-appointment-10min-icon-inset-inline-end: #{$scheduler-appointment-10min-icon-inset-inline-end};
+  --dx-scheduler-appointment-10min-recurrence-padding-inline-end: #{$scheduler-appointment-10min-recurrence-padding-inline-end};
+  --dx-scheduler-appointment-10min-title-font-size: #{$scheduler-appointment-10min-title-font-size};
+  --dx-scheduler-appointment-10min-title-line-height: #{$scheduler-appointment-10min-title-line-height};
+  --dx-scheduler-appointment-15min-height: #{$scheduler-appointment-15min-height};
+  --dx-scheduler-appointment-15min-icon-font-size: #{$scheduler-appointment-15min-icon-font-size};
+  --dx-scheduler-appointment-15min-icon-inset-inline-end: #{$scheduler-appointment-15min-icon-inset-inline-end};
+  --dx-scheduler-appointment-15min-recurrence-padding-inline-end: #{$scheduler-appointment-15min-recurrence-padding-inline-end};
+  --dx-scheduler-appointment-15min-title-font-size: #{$scheduler-appointment-15min-title-font-size};
+  --dx-scheduler-appointment-15min-title-line-height: #{$scheduler-appointment-15min-title-line-height};
+  --dx-scheduler-appointment-20min-height: #{$scheduler-appointment-20min-height};
+  --dx-scheduler-appointment-20min-icon-inset-inline-end: #{$scheduler-appointment-20min-icon-inset-inline-end};
+  --dx-scheduler-appointment-20min-recurrence-padding-inline-end: #{$scheduler-appointment-20min-recurrence-padding-inline-end};
+  --dx-scheduler-appointment-25min-height: #{$scheduler-appointment-25min-height};
+  --dx-scheduler-appointment-base-bg: #{$scheduler-appointment-base-bg};
+  --dx-scheduler-appointment-bg-active: #{$scheduler-appointment-bg-active};
+  --dx-scheduler-appointment-border-radius: #{$scheduler-appointment-border-radius};
+  --dx-scheduler-appointment-collector-height: #{$scheduler-appointment-collector-height};
+  --dx-scheduler-appointment-collector-margin-inline-end: #{$scheduler-appointment-collector-margin-inline-end};
+  --dx-scheduler-appointment-collector-margin-inline-start: #{$scheduler-appointment-collector-margin-inline-start};
+  --dx-scheduler-appointment-collector-width: #{$scheduler-appointment-collector-width};
+  --dx-scheduler-appointment-content: #{$scheduler-appointment-content};
+  --dx-scheduler-appointment-content-details-font-size: #{$scheduler-appointment-content-details-font-size};
+  --dx-scheduler-appointment-content-details-margin-block-start: #{$scheduler-appointment-content-details-margin-block-start};
+  --dx-scheduler-appointment-content-padding: #{$scheduler-appointment-content-padding};
+  --dx-scheduler-appointment-content-padding-inline-end: #{$scheduler-appointment-content-padding-inline-end};
+  --dx-scheduler-appointment-content-rtl-padding: #{$scheduler-appointment-content-rtl-padding};
+  --dx-scheduler-appointment-date-content: #{$scheduler-appointment-date-content};
+  --dx-scheduler-appointment-details-font-size: #{$scheduler-appointment-details-font-size};
+  --dx-scheduler-appointment-dragging-shadow: #{$scheduler-appointment-dragging-shadow};
+  --dx-scheduler-appointment-icon-font-size: #{$scheduler-appointment-icon-font-size};
+  --dx-scheduler-appointment-marker-border-radius-active: #{$scheduler-appointment-marker-border-radius-active};
+  --dx-scheduler-appointment-min-size: #{$scheduler-appointment-min-size};
+  --dx-scheduler-appointment-month-font-size: #{$scheduler-appointment-month-font-size};
+  --dx-scheduler-appointment-month-text-font-size: #{$scheduler-appointment-month-text-font-size};
+  --dx-scheduler-appointment-opacity-disabled: #{$scheduler-appointment-opacity-disabled};
+  --dx-scheduler-appointment-overlay-bg: #{$scheduler-appointment-overlay-bg};
+  --dx-scheduler-appointment-popup-all-day-item-height: #{$scheduler-appointment-popup-all-day-item-height};
+  --dx-scheduler-appointment-popup-days-of-week-buttons-gap: #{$scheduler-appointment-popup-days-of-week-buttons-gap};
+  --dx-scheduler-appointment-popup-icon-container-height: #{$scheduler-appointment-popup-icon-container-height};
+  --dx-scheduler-appointment-popup-icon-margin-block-start: #{$scheduler-appointment-popup-icon-margin-block-start};
+  --dx-scheduler-appointment-popup-icon-padding-inline-end: #{$scheduler-appointment-popup-icon-padding-inline-end};
+  --dx-scheduler-appointment-popup-item-padding-inline: #{$scheduler-appointment-popup-item-padding-inline};
+  --dx-scheduler-appointment-popup-repeat-end-item-height: #{$scheduler-appointment-popup-repeat-end-item-height};
+  --dx-scheduler-appointment-popup-toolbar-height: #{$scheduler-appointment-popup-toolbar-height};
+  --dx-scheduler-appointment-recurrence-icon-inset-block-start: #{$scheduler-appointment-recurrence-icon-inset-block-start};
+  --dx-scheduler-appointment-reduced-content-padding: #{$scheduler-appointment-reduced-content-padding};
+  --dx-scheduler-appointment-reduced-icon-inset-block-start: #{$scheduler-appointment-reduced-icon-inset-block-start};
+  --dx-scheduler-appointment-reduced-icon-rtl-inset-inline-start: #{$scheduler-appointment-reduced-icon-rtl-inset-inline-start};
+  --dx-scheduler-appointment-resizing-opacity: #{$scheduler-appointment-resizing-opacity};
+  --dx-scheduler-appointment-short-content-padding: #{$scheduler-appointment-short-content-padding};
+  --dx-scheduler-appointment-start-shadow: #{$scheduler-appointment-start-shadow};
+  --dx-scheduler-appointment-strip-bg: #{$scheduler-appointment-strip-bg};
+  --dx-scheduler-appointment-strip-border-end-end-radius: #{$scheduler-appointment-strip-border-end-end-radius};
+  --dx-scheduler-appointment-strip-border-end-start-radius: #{$scheduler-appointment-strip-border-end-start-radius};
+  --dx-scheduler-appointment-strip-border-start-end-radius: #{$scheduler-appointment-strip-border-start-end-radius};
+  --dx-scheduler-appointment-strip-border-start-start-radius: #{$scheduler-appointment-strip-border-start-start-radius};
+  --dx-scheduler-appointment-strip-width: #{$scheduler-appointment-strip-width};
+  --dx-scheduler-appointment-title-font-size: #{$scheduler-appointment-title-font-size};
+  --dx-scheduler-appointment-tooltip-content-margin-inline-start: #{$scheduler-appointment-tooltip-content-margin-inline-start};
+  --dx-scheduler-appointment-tooltip-date-font-size: #{$scheduler-appointment-tooltip-date-font-size};
+  --dx-scheduler-appointment-tooltip-remove-padding-block-start: #{$scheduler-appointment-tooltip-remove-padding-block-start};
+  --dx-scheduler-appointment-tooltip-title-font-size: #{$scheduler-appointment-tooltip-title-font-size};
+  --dx-scheduler-appointment-tooltip-title-margin-block-start: #{$scheduler-appointment-tooltip-title-margin-block-start};
+  --dx-scheduler-appointment-transparent-left-border: #{$scheduler-appointment-transparent-left-border};
+  --dx-scheduler-appointment-transparent-right-border: #{$scheduler-appointment-transparent-right-border};
+  --dx-scheduler-base-border: #{$scheduler-base-border};
+  --dx-scheduler-bg: #{$scheduler-bg};
+  --dx-scheduler-border: #{$scheduler-border};
+  --dx-scheduler-border-radius: #{$scheduler-border-radius};
+  --dx-scheduler-border-width: #{$scheduler-border-width};
+  --dx-scheduler-cell-bg-active: #{$scheduler-cell-bg-active};
+  --dx-scheduler-cell-bg-hovered: #{$scheduler-cell-bg-hovered};
+  --dx-scheduler-collapsed-all-day-table-cell-height: #{$scheduler-collapsed-all-day-table-cell-height};
+  --dx-scheduler-common-collector-margin: #{$scheduler-common-collector-margin};
+  --dx-scheduler-common-collector-size: #{$scheduler-common-collector-size};
+  --dx-scheduler-content-disabled: #{$scheduler-content-disabled};
+  --dx-scheduler-current-time-cell-content: #{$scheduler-current-time-cell-content};
+  --dx-scheduler-date-table-cell-height: #{$scheduler-date-table-cell-height};
+  --dx-scheduler-date-time-indicator-height: #{$scheduler-date-time-indicator-height};
+  --dx-scheduler-dd-appointment-content-hovered: #{$scheduler-dd-appointment-content-hovered};
+  --dx-scheduler-dropdown-appointment-date-content: #{$scheduler-dropdown-appointment-date-content};
+  --dx-scheduler-dropdown-button-adaptive-margin: #{$scheduler-dropdown-button-adaptive-margin};
+  --dx-scheduler-dropdown-button-adaptive-margin-block: #{$scheduler-dropdown-button-adaptive-margin-block};
+  --dx-scheduler-dropdown-button-height: #{$scheduler-dropdown-button-height};
+  --dx-scheduler-dropdown-button-margin: #{$scheduler-dropdown-button-margin};
+  --dx-scheduler-dropdown-button-margin-block: #{$scheduler-dropdown-button-margin-block};
+  --dx-scheduler-dropdown-button-padding: #{$scheduler-dropdown-button-padding};
+  --dx-scheduler-droppable-cell-bg: #{$scheduler-droppable-cell-bg};
+  --dx-scheduler-first-month-border: #{$scheduler-first-month-border};
+  --dx-scheduler-first-month-cell-bg: #{$scheduler-first-month-cell-bg};
+  --dx-scheduler-first-of-month-border: #{$scheduler-first-of-month-border};
+  --dx-scheduler-form-icon: #{$scheduler-form-icon};
+  --dx-scheduler-group-header-agenda-font-size: #{$scheduler-group-header-agenda-font-size};
+  --dx-scheduler-group-header-border-block-end: #{$scheduler-group-header-border-block-end};
+  --dx-scheduler-group-header-cell-height: #{$scheduler-group-header-cell-height};
+  --dx-scheduler-group-header-content-inset-block-start: #{$scheduler-group-header-content-inset-block-start};
+  --dx-scheduler-group-header-content-padding-block-start: #{$scheduler-group-header-content-padding-block-start};
+  --dx-scheduler-group-header-font-size: #{$scheduler-group-header-font-size};
+  --dx-scheduler-group-header-font-weight: #{$scheduler-group-header-font-weight};
+  --dx-scheduler-group-header-table-cell-width: #{$scheduler-group-header-table-cell-width};
+  --dx-scheduler-group-separator-border: #{$scheduler-group-separator-border};
+  --dx-scheduler-header-bg: #{$scheduler-header-bg};
+  --dx-scheduler-header-day-element-height: #{$scheduler-header-day-element-height};
+  --dx-scheduler-header-height: #{$scheduler-header-height};
+  --dx-scheduler-header-offset: #{$scheduler-header-offset};
+  --dx-scheduler-header-panel-cell-date-content: #{$scheduler-header-panel-cell-date-content};
+  --dx-scheduler-header-panel-cell-date-font-size: #{$scheduler-header-panel-cell-date-font-size};
+  --dx-scheduler-header-panel-cell-date-margin-block-end: #{$scheduler-header-panel-cell-date-margin-block-end};
+  --dx-scheduler-header-panel-cell-padding-block-end: #{$scheduler-header-panel-cell-padding-block-end};
+  --dx-scheduler-header-panel-current-time-cell-height: #{$scheduler-header-panel-current-time-cell-height};
+  --dx-scheduler-header-panel-day-font-size: #{$scheduler-header-panel-day-font-size};
+  --dx-scheduler-header-panel-empty-cell-border-block-end-width: #{$scheduler-header-panel-empty-cell-border-block-end-width};
+  --dx-scheduler-header-panel-margin: #{$scheduler-header-panel-margin};
+  --dx-scheduler-header-panel-time-cell-height: #{$scheduler-header-panel-time-cell-height};
+  --dx-scheduler-header-panel-time-cell-padding: #{$scheduler-header-panel-time-cell-padding};
+  --dx-scheduler-inverted-content: #{$scheduler-inverted-content};
+  --dx-scheduler-last-group-cell-border-inline-end: #{$scheduler-last-group-cell-border-inline-end};
+  --dx-scheduler-left-column-width: #{$scheduler-left-column-width};
+  --dx-scheduler-list-item-border-block-end: #{$scheduler-list-item-border-block-end};
+  --dx-scheduler-month-appointment-content-padding: #{$scheduler-month-appointment-content-padding};
+  --dx-scheduler-month-appointment-content-rtl-padding: #{$scheduler-month-appointment-content-rtl-padding};
+  --dx-scheduler-month-date-font-size: #{$scheduler-month-date-font-size};
+  --dx-scheduler-month-date-text-font-size: #{$scheduler-month-date-text-font-size};
+  --dx-scheduler-month-date-text-padding: #{$scheduler-month-date-text-padding};
+  --dx-scheduler-month-recurrence-appointment-content-padding: #{$scheduler-month-recurrence-appointment-content-padding};
+  --dx-scheduler-month-recurrence-appointment-content-rtl-padding: #{$scheduler-month-recurrence-appointment-content-rtl-padding};
+  --dx-scheduler-navigator-button-font-size: #{$scheduler-navigator-button-font-size};
+  --dx-scheduler-navigator-icon-font-size: #{$scheduler-navigator-icon-font-size};
+  --dx-scheduler-panel-content: #{$scheduler-panel-content};
+  --dx-scheduler-recurrence-appointment-content-padding: #{$scheduler-recurrence-appointment-content-padding};
+  --dx-scheduler-recurrence-icon-inset-inline: #{$scheduler-recurrence-icon-inset-inline};
+  --dx-scheduler-recurring-appointment-content-padding: #{$scheduler-recurring-appointment-content-padding};
+  --dx-scheduler-recurring-appointment-content-rtl-padding: #{$scheduler-recurring-appointment-content-rtl-padding};
+  --dx-scheduler-reduced-icon-inset-inline: #{$scheduler-reduced-icon-inset-inline};
+  --dx-scheduler-rtl-border-inline-start: #{$scheduler-rtl-border-inline-start};
+  --dx-scheduler-rtl-padding: #{$scheduler-rtl-padding};
+  --dx-scheduler-scrollable-content-min-height: #{$scheduler-scrollable-content-min-height};
+  --dx-scheduler-small-font-size: #{$scheduler-small-font-size};
+  --dx-scheduler-small-margin-block-end: #{$scheduler-small-margin-block-end};
+  --dx-scheduler-small-margin-block-start: #{$scheduler-small-margin-block-start};
+  --dx-scheduler-small-margin-inline-start: #{$scheduler-small-margin-inline-start};
+  --dx-scheduler-small-padding-inline-end: #{$scheduler-small-padding-inline-end};
+  --dx-scheduler-small-padding-inline-start: #{$scheduler-small-padding-inline-start};
+  --dx-scheduler-time-indicator-bg: #{$scheduler-time-indicator-bg};
+  --dx-scheduler-time-indicator-content: #{$scheduler-time-indicator-content};
+  --dx-scheduler-time-indicator-font-size: #{$scheduler-time-indicator-font-size};
+  --dx-scheduler-time-indicator-size: #{$scheduler-time-indicator-size};
+  --dx-scheduler-time-panel-cell-margin-block-start: #{$scheduler-time-panel-cell-margin-block-start};
+  --dx-scheduler-time-panel-content-disabled: #{$scheduler-time-panel-content-disabled};
+  --dx-scheduler-time-panel-font-size: #{$scheduler-time-panel-font-size};
+  --dx-scheduler-timeline-cell-height: #{$scheduler-timeline-cell-height};
+  --dx-scheduler-timeline-cell-width: #{$scheduler-timeline-cell-width};
+  --dx-scheduler-timeline-date-table-cell-height: #{$scheduler-timeline-date-table-cell-height};
+  --dx-scheduler-timeline-group-header-width: #{$scheduler-timeline-group-header-width};
+  --dx-scheduler-timeline-group-three-empty-cell-width: #{$scheduler-timeline-group-three-empty-cell-width};
+  --dx-scheduler-timeline-group-two-empty-cell-width: #{$scheduler-timeline-group-two-empty-cell-width};
+  --dx-scheduler-timeline-min-height: #{$scheduler-timeline-min-height};
+  --dx-scheduler-toolbar-item-offset: #{$scheduler-toolbar-item-offset};
+  --dx-scheduler-tooltip-appointment-content: #{$scheduler-tooltip-appointment-content};
+  --dx-scheduler-tooltip-appointment-item-content-date-margin-block-start: #{$scheduler-tooltip-appointment-item-content-date-margin-block-start};
+  --dx-scheduler-tooltip-appointment-item-marker-body-margin-block-start: #{$scheduler-tooltip-appointment-item-marker-body-margin-block-start};
+  --dx-scheduler-tooltip-content-padding: #{$scheduler-tooltip-content-padding};
+  --dx-scheduler-tooltip-date-content: #{$scheduler-tooltip-date-content};
+  --dx-scheduler-tooltip-date-font-size: #{$scheduler-tooltip-date-font-size};
+  --dx-scheduler-tooltip-date-margin: #{$scheduler-tooltip-date-margin};
+  --dx-scheduler-tooltip-marker-size: #{$scheduler-tooltip-marker-size};
+  --dx-scheduler-tooltip-remove-margin-block-start: #{$scheduler-tooltip-remove-margin-block-start};
+  --dx-scheduler-tooltip-shadow: #{$scheduler-tooltip-shadow};
+  --dx-scheduler-tooltip-subject-font-size: #{$scheduler-tooltip-subject-font-size};
+  --dx-scheduler-tooltip-subject-font-weight: #{$scheduler-tooltip-subject-font-weight};
+  --dx-scheduler-tooltip-title-margin-block-start: #{$scheduler-tooltip-title-margin-block-start};
+  --dx-scheduler-tooltip-title-margin-inline-start: #{$scheduler-tooltip-title-margin-inline-start};
+  --dx-scheduler-tooltip-width: #{$scheduler-tooltip-width};
+  --dx-scheduler-views-empty-cell-border-block-end: #{$scheduler-views-empty-cell-border-block-end};
+  --dx-scheduler-views-empty-cell-border-inline-end: #{$scheduler-views-empty-cell-border-inline-end};
+  --dx-scheduler-views-empty-cell-border-inline-start: #{$scheduler-views-empty-cell-border-inline-start};
+  --dx-scheduler-views-first-child-border-inline-start: #{$scheduler-views-first-child-border-inline-start};
+  --dx-scheduler-views-group-header-content-height: #{$scheduler-views-group-header-content-height};
+  --dx-scheduler-views-group-header-padding: #{$scheduler-views-group-header-padding};
+  --dx-scheduler-views-header-border: #{$scheduler-views-header-border};
+  --dx-scheduler-views-sidebar-group-header-padding: #{$scheduler-views-sidebar-group-header-padding};
+  --dx-scheduler-views-time-indicator-height: #{$scheduler-views-time-indicator-height};
+  --dx-scheduler-views-time-panel-border-block-end: #{$scheduler-views-time-panel-border-block-end};
+  --dx-scheduler-views-vertical-group-min-height: #{$scheduler-views-vertical-group-min-height};
+  --dx-scheduler-virtual-row-height: #{$scheduler-virtual-row-height};
+  --dx-scheduler-widget-margin-block-end: #{$scheduler-widget-margin-block-end};
+  --dx-scheduler-workspace-accent-content: #{$scheduler-workspace-accent-content};
+  --dx-scheduler-workspace-bg: #{$scheduler-workspace-bg};
+  --dx-scheduler-workspace-cell-bg-focused: #{$scheduler-workspace-cell-bg-focused};
+  --dx-scheduler-workspace-date-table-cell-height: #{$scheduler-workspace-date-table-cell-height};
+  --dx-scheduler-workspace-info-font-size: #{$scheduler-workspace-info-font-size};
+  --dx-scheduler-workspace-month-cell-left-offset: #{$scheduler-workspace-month-cell-left-offset};
+  --dx-scheduler-workspace-month-content: #{$scheduler-workspace-month-content};
+  --dx-scheduler-workspace-month-header-height: #{$scheduler-workspace-month-header-height};
+  --dx-scheduler-workspace-month-timeline-time-height: #{$scheduler-workspace-month-timeline-time-height};
+  --dx-scheduler-workspace-other-month-content: #{$scheduler-workspace-other-month-content};
+
+  @include links.publish();
+}
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..dbee787dc673
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_sizes.scss
@@ -0,0 +1,313 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// Not colours: opacities that used to sit in _colors.scss (NAMING.md, O7)
+$scheduler-appointment-resizing-opacity: ds.$opacity-70 !default;
+$scheduler-appointment-opacity-disabled: ds.$opacity-60 !default;
+
+$scheduler-workspace-date-table-cell-height: null !default;
+$scheduler-toolbar-item-offset: ds.$spacing-40 !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: 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: 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: 0 ds.$spacing-80 0 ds.$spacing-120 !default;
+$scheduler-appointment-15min-height: 17px !default; // dx-literal-required: used in @container conditions, var() is invalid there
+$scheduler-appointment-20min-height: 24px !default; // dx-literal-required: used in @container conditions, var() is invalid there
+$scheduler-appointment-25min-height: 32px !default; // dx-literal-required: used in @container conditions, var() is invalid there
+$scheduler-appointment-10min-recurrence-padding-inline-end: ds.$spacing-140 !default;
+$scheduler-appointment-10min-title-font-size: ds.$spacing-80 !default; // dx-foreign-scale: 8px, below the whole font-size scale (it starts at 10px)
+$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.$spacing-120 !default;
+$scheduler-appointment-10min-icon-inset-inline-end: ds.$spacing-20 !default;
+$scheduler-appointment-15min-recurrence-padding-inline-end: null !default;
+$scheduler-appointment-15min-title-font-size: ds.$font-size-base-sm !default;
+$scheduler-appointment-15min-title-line-height: null !default;
+$scheduler-appointment-15min-icon-font-size: ds.$spacing-120 !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: 64px !default; // dx-literal-required: base/scheduler/_index.scss:128 multiplies it by a factor, and var() cannot take part in Sass arithmetic
+$scheduler-timeline-date-table-cell-height: ds.$spacing-480 !default;
+
+$scheduler-border-radius: 0 !default;
+
+$scheduler-navigator-icon-font-size: $global-icon-size !default;
+$scheduler-appointment-month-font-size: ds.$font-size-120 !default;
+$scheduler-workspace-info-font-size: ds.$font-size-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.$border-width-10 solid transparent !default;
+$scheduler-appointment-transparent-right-border: ds.$border-width-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: ds.$spacing-480 !default;
+
+$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 !default;
+  $scheduler-workspace-date-table-cell-height: ds.$spacing-380 !default;
+
+  $scheduler-header-panel-day-font-size: ds.$font-size-title-sm !default;
+  $scheduler-header-height: ds.$spacing-480 !default;
+  $scheduler-header-offset: 0 ds.$spacing-120 !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-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 !default;
+
+  $scheduler-appointment-15min-recurrence-padding-inline-end: ds.$spacing-140 !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-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 !default;
+  $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-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-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 !default; // dx-foreign-scale: 13px, the font-size scale has no such step
+
+  $scheduler-appointment-15min-recurrence-padding-inline-end: ds.$spacing-160 !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-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-title-default !default;
+$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: ds.$spacing-minus-60 !default;
+$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-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.$spacing-180 !default;
+
+// 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: ds.$spacing-720 !default;
+$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: ds.$spacing-480 !default;
+
+/*
+ * 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) !default;
+
+// Base-layer sizing injected with design tokens (wave B15)
+$scheduler-appointment-collector-height: ds.$spacing-220 !default;
+$scheduler-appointment-min-size: ds.$spacing-40 !default;
+$scheduler-appointment-reduced-content-padding: ds.$spacing-400 !default;
+$scheduler-appointment-month-text-font-size: ds.$font-size-120 !default;
+$scheduler-border-width: ds.$border-width-10 !default;
+$scheduler-reduced-icon-inset-inline: ds.$spacing-50 !default;
+$scheduler-recurrence-icon-inset-inline: ds.$spacing-200 !default;
+$scheduler-agenda-appointment-margin: ds.$spacing-50 !default;
+$scheduler-agenda-appointment-last-margin: ds.$spacing-200 !default;
+$scheduler-time-indicator-font-size: ds.$font-size-300 !default; // dx-no-semantic-role: 30px has no font-size role
+$scheduler-time-indicator-size: ds.$spacing-10 !default;
+$scheduler-small-font-size: ds.$font-size-140 !default;
+$scheduler-group-header-cell-height: ds.$spacing-300 !default;
+$scheduler-month-date-text-font-size: ds.$font-size-160 !default;
+$scheduler-month-date-text-padding: ds.$spacing-60 !default;
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..7c6d70ab88bb
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/scrollView/_colors.scss
@@ -0,0 +1,3 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$scroll-view-shadow: ds.$box-shadow-sm !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..943570b9bdc9
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/scrollView/_index.scss
@@ -0,0 +1,95 @@
+@use "sass:math";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../scrollable";
+@use "../../base/scrollView" with (
+  $scrollview-top-pocket-width: var(--dx-scroll-view-top-pocket-width),
+  $scrollview-top-pocket-height: var(--dx-scroll-view-top-pocket-height),
+  $scrollview-pull-down-indicator-padding: var(--dx-scroll-view-pull-down-indicator-padding),
+  $scrollview-icon-pulldown-padding: var(--dx-scroll-view-icon-pull-down-padding),
+  $scrollview-pull-down-indicator-width: var(--dx-scroll-view-pull-down-indicator-width),
+  $scrollview-pull-down-image-margin: var(--dx-scroll-view-pull-down-image-margin),
+  $scrollview-pull-down-image-height: var(--dx-scroll-view-pull-down-image-height),
+  $scrollview-scrollbottom-padding: var(--dx-scroll-view-scroll-bottom-padding),
+  $scrollview-scrollbottom-indicator-margin: var(--dx-scroll-view-scroll-bottom-indicator-margin),
+  $scrollview-scrollbottom-indicator-margin-rtl: var(--dx-scroll-view-scroll-bottom-indicator-rtl-margin),
+  $scrollview-pulldown-icon-font-size: var(--dx-scroll-view-pull-down-icon-font-size),
+  $pulldown-height: var(--dx-scroll-view-pull-down-height),
+  $pulldown-padding: var(--dx-scroll-view-pull-down-padding),
+  $pulldown-top-offset: var(--dx-scroll-view-pull-down-top-offset),
+);
+
+.dx-scrollview-scrollbottom-text,
+.dx-scrollview-pull-down-text {
+  margin-left: var(--dx-scroll-view-pull-down-text-margin-inline-start);
+  top: calc((var(--dx-scroll-view-pull-down-height) - #{$global-font-size}) / 2);
+  display: inline-block;
+
+  .dx-rtl & {
+    margin-left: 0;
+    margin-right: var(--dx-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: var(--dx-scrollable-bg);
+  box-shadow: var(--dx-scroll-view-shadow);
+}
+
+.dx-scrollview-scrollbottom-loading {
+  .dx-scrollview-scrollbottom-image {
+    width: var(--dx-scroll-view-scroll-bottom-image-width);
+    height: var(--dx-scroll-view-scroll-bottom-image-height);
+  }
+}
+
+.dx-scrollview-scrollbottom-indicator,
+.dx-scrollview-pull-down-indicator {
+  margin-right: 0;
+  height: var(--dx-scroll-view-load-indicator-size);
+  width: var(--dx-scroll-view-load-indicator-size);
+  border-radius: calc(var(--dx-scroll-view-load-indicator-size) / 2);
+  display: inline-flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  box-shadow: var(--dx-scroll-view-shadow);
+
+  > .dx-loadindicator {
+    height: var(--dx-scroll-view-scroll-bottom-image-height);
+    width: var(--dx-scroll-view-scroll-bottom-image-width);
+
+    > .dx-loadindicator-wrapper {
+      font-size: var(--dx-scroll-view-load-indicator-font-size);
+    }
+  }
+}
+
+.dx-scrollview-pull-down-indicator {
+  position: relative;
+  margin-left: 0;
+  margin-top: calc(var(--dx-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/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/scrollView/_public.scss
new file mode 100644
index 000000000000..a056a3146857
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/scrollView/_public.scss
@@ -0,0 +1,27 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-scroll-view-icon-pull-down-padding: #{$scroll-view-icon-pull-down-padding};
+  --dx-scroll-view-load-indicator-font-size: #{$scroll-view-load-indicator-font-size};
+  --dx-scroll-view-load-indicator-size: #{$scroll-view-load-indicator-size};
+  --dx-scroll-view-pull-down-height: #{$scroll-view-pull-down-height};
+  --dx-scroll-view-pull-down-icon-font-size: #{$scroll-view-pull-down-icon-font-size};
+  --dx-scroll-view-pull-down-image-height: #{$scroll-view-pull-down-image-height};
+  --dx-scroll-view-pull-down-image-margin: #{$scroll-view-pull-down-image-margin};
+  --dx-scroll-view-pull-down-indicator-padding: #{$scroll-view-pull-down-indicator-padding};
+  --dx-scroll-view-pull-down-indicator-width: #{$scroll-view-pull-down-indicator-width};
+  --dx-scroll-view-pull-down-padding: #{$scroll-view-pull-down-padding};
+  --dx-scroll-view-pull-down-text-margin-inline-start: #{$scroll-view-pull-down-text-margin-inline-start};
+  --dx-scroll-view-pull-down-top-offset: #{$scroll-view-pull-down-top-offset};
+  --dx-scroll-view-rtl-margin-inline-end: #{$scroll-view-rtl-margin-inline-end};
+  --dx-scroll-view-scroll-bottom-image-height: #{$scroll-view-scroll-bottom-image-height};
+  --dx-scroll-view-scroll-bottom-image-width: #{$scroll-view-scroll-bottom-image-width};
+  --dx-scroll-view-scroll-bottom-indicator-margin: #{$scroll-view-scroll-bottom-indicator-margin};
+  --dx-scroll-view-scroll-bottom-indicator-rtl-margin: #{$scroll-view-scroll-bottom-indicator-rtl-margin};
+  --dx-scroll-view-scroll-bottom-padding: #{$scroll-view-scroll-bottom-padding};
+  --dx-scroll-view-shadow: #{$scroll-view-shadow};
+  --dx-scroll-view-top-pocket-height: #{$scroll-view-top-pocket-height};
+  --dx-scroll-view-top-pocket-width: #{$scroll-view-top-pocket-width};
+}
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..e3d5e0e0715f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/scrollView/_sizes.scss
@@ -0,0 +1,34 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// Values hoisted from style-file literals (tokenized)
+$scroll-view-load-indicator-font-size: ds.$spacing-240 !default;
+$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: ds.$spacing-440 !default;
+
+// Base-layer values injected with design tokens (wave B1)
+$scroll-view-pull-down-icon-font-size: ds.$spacing-240 !default;
+
+// 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: ds.$spacing-520 !default;
+$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;
+
+// Base-layer sizing injected with design tokens (wave B6)
+$scroll-view-pull-down-height: ds.$spacing-520 !default;
+$scroll-view-pull-down-padding: ds.$spacing-150 !default;
+
+/*
+ * Derived once and published: base parks the pull-down area above the viewport by its own height
+ * plus both paddings. Deriving keeps the three in step instead of freezing -80px.
+ */
+$scroll-view-pull-down-top-offset: calc(-1 * (#{$scroll-view-pull-down-height} + #{$scroll-view-pull-down-padding} * 2)) !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..1d97fa47cdaa
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/scrollable/_colors.scss
@@ -0,0 +1,8 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$scrollable-bg: ds.$color-bg !default;
+
+$scrollable-scroll-bg: ds.$color-content-subtle !default;
+
+$scrollable-scroll-bg-disabled: ds.$color-content-disabled !default;
+$scrollable-scrollbar-bg: ds.$color-none !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..a3b34f07abb6
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/scrollable/_index.scss
@@ -0,0 +1,32 @@
+@use "sass:math";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/scrollable" with (
+  $scrollable-scroll-width: var(--dx-scrollable-scroll-width),
+  $scrollable-scroll-height: var(--dx-scrollable-scroll-height),
+  $scrollable-scroll-padding: var(--dx-scrollable-scroll-padding),
+);
+@use "../../base/scrollable/mixins" as *;
+@include dx-scrollable-scroll-content(
+  var(--dx-scrollable-scroll-bg),
+);
+@include dx-scrollable-scrollbar-hoverable(
+  var(--dx-scrollable-scrollbar-bg),
+  transparent,
+  var(--dx-scrollable-scroll-bg),
+);
+@include dx-scrollable-scrollbar-vertical(
+  var(--dx-scrollable-scrollbar-thin-size),
+  var(--dx-scrollable-scrollbar-size),
+  0,
+);
+@include dx-scrollable-scrollbar-horizontal(
+  var(--dx-scrollable-scrollbar-thin-size),
+  var(--dx-scrollable-scrollbar-size),
+  0,
+);
+@include dx-scrollable-scrollbars-alwaysvisible(var(--dx-scrollable-scrollbar-thin-size));
+
+.dx-state-disabled .dx-scrollable-scroll-content {
+  background-color: var(--dx-scrollable-scroll-bg-disabled);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/scrollable/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/scrollable/_public.scss
new file mode 100644
index 000000000000..66bf074ed01f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/scrollable/_public.scss
@@ -0,0 +1,15 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-scrollable-bg: #{$scrollable-bg};
+  --dx-scrollable-scroll-bg: #{$scrollable-scroll-bg};
+  --dx-scrollable-scroll-bg-disabled: #{$scrollable-scroll-bg-disabled};
+  --dx-scrollable-scroll-height: #{$scrollable-scroll-height};
+  --dx-scrollable-scroll-padding: #{$scrollable-scroll-padding};
+  --dx-scrollable-scroll-width: #{$scrollable-scroll-width};
+  --dx-scrollable-scrollbar-bg: #{$scrollable-scrollbar-bg};
+  --dx-scrollable-scrollbar-size: #{$scrollable-scrollbar-size};
+  --dx-scrollable-scrollbar-thin-size: #{$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..ca6995c3744d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/scrollable/_sizes.scss
@@ -0,0 +1,9 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$scrollable-scrollbar-thin-size: ds.$spacing-60 !default;
+$scrollable-scrollbar-size: ds.$spacing-130 !default;
+
+// 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..153eb6231ac7
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/selectBox/_colors.scss
@@ -0,0 +1,3 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$select-box-list-bg: ds.$color-bg !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..b089d5cf7105
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/selectBox/_index.scss
@@ -0,0 +1,18 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/selectBox";
+@use "../dropDownList";
+
+.dx-selectbox-popup-wrapper {
+  .dx-overlay-content {
+    box-shadow: var(--dx-global-dropdown-box-shadow);
+  }
+
+  .dx-popup-content {
+    padding: 0;
+  }
+
+  .dx-list {
+    background-color: var(--dx-select-box-list-bg);
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/selectBox/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/selectBox/_public.scss
new file mode 100644
index 000000000000..6dea10ca8cfa
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/selectBox/_public.scss
@@ -0,0 +1,6 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+
+@mixin publish {
+  --dx-select-box-list-bg: #{$select-box-list-bg};
+}
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..e69de29bb2d1
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..b88d15a55216
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/slider/_colors.scss
@@ -0,0 +1,26 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$slider-bar-bg: ds.$color-border-contrast !default;
+
+$slider-accent-bg: ds.$color-bg-primary !default;
+$slider-accent-bg-hovered: ds.$color-bg-primary-hovered !default;
+
+$slider-accent-border-focused: ds.$color-border-primary-shared-active !default;
+$slider-accent-bg-focused: ds.$color-content-primary-shared-active !default;
+
+$slider-invalid-bg: ds.$color-border-danger !default;
+$slider-invalid-bg-hovered: ds.$color-border-danger !default;
+
+$slider-invalid-border-focused: ds.$color-border-danger !default;
+$slider-invalid-bg-focused: ds.$color-content-danger !default;
+
+$slider-border-disabled: ds.$color-border-disabled !default;
+$slider-bg-disabled: ds.$color-content-disabled !default;
+$slider-bar-bg-disabled: ds.$color-bg-disabled !default;
+
+$slider-tooltip-content: ds.$color-content !default;
+
+// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
+$slider-border: ds.$color-border !default;
+$slider-element-bg: ds.$color-bg !default;
+$slider-handle-invalid-bg: ds.$color-border-danger !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..85729d4d873a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/slider/_index.scss
@@ -0,0 +1,162 @@
+@use "sass:math";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/slider" with (
+  $slider-tooltip-content-height: var(--dx-slider-tooltip-height),
+  $slider-label-position-bottom-padding-bottom: var(--dx-slider-label-bottom-padding-block-end),
+  $slider-label-position-top-padding-top: var(--dx-slider-label-top-padding-block-start),
+);
+@use "../../base/popover/mixins" as *;
+
+.dx-slider-wrapper {
+  height: var(--dx-slider-wrapper-height);
+
+  @include dx-popover-arrow-size(14px, 2px); // dx-literal-required: the mixin divides the width by sqrt(2), and var() cannot take part in Sass arithmetic
+}
+
+.dx-slider-bar {
+  margin-top: calc((var(--dx-slider-wrapper-height) - var(--dx-slider-track-height)) / 2);
+  margin-right: calc(var(--dx-slider-handle-size) / 2);
+  margin-left: calc(var(--dx-slider-handle-size) / 2);
+  background: var(--dx-slider-bar-bg);
+  height: var(--dx-slider-track-height);
+  border-radius: var(--dx-slider-track-border-radius);
+}
+
+.dx-slider-range {
+  height: var(--dx-slider-track-height);
+  border-radius: var(--dx-slider-track-border-radius);
+
+  &.dx-slider-range-visible {
+    background: var(--dx-slider-accent-bg);
+  }
+}
+
+.dx-slider-handle {
+  margin-top: calc(var(--dx-slider-track-height) / 2 - var(--dx-slider-handle-size) / 2);
+  margin-inline-end: calc(var(--dx-slider-handle-size) / -2);
+  width: var(--dx-slider-handle-size);
+  height: var(--dx-slider-handle-size);
+  border-radius: var(--dx-slider-border-radius);
+  border-width: var(--dx-slider-handle-border-width);
+  border-style: solid;
+  border-color: var(--dx-slider-border);
+  background-color: var(--dx-slider-element-bg);
+
+  &::after {
+    position: absolute;
+    display: block;
+    inset: 0;
+    background: var(--dx-slider-accent-bg);
+    content: "";
+    border-radius: var(--dx-slider-border-radius);
+    border-width: var(--dx-slider-handle-inner-border-width);
+    border-style: solid;
+    border-color: var(--dx-slider-element-bg);
+  }
+
+  &.dx-state-hover {
+    &::after {
+      background: var(--dx-slider-accent-bg-hovered);
+    }
+  }
+
+  &.dx-state-focused {
+    border-color: var(--dx-slider-accent-border-focused);
+
+    &::after {
+      background: var(--dx-slider-accent-bg-focused);
+    }
+  }
+
+  .dx-tooltip-wrapper {
+    .dx-overlay-content {
+      .dx-popup-content {
+        line-height: normal;
+        color: var(--dx-slider-tooltip-content);
+
+        .dx-slider-tooltip-position-top & {
+          padding-top: var(--dx-slider-tooltip-top-padding-block-start);
+        }
+      }
+
+      &.dx-state-disabled {
+        .dx-popup-content {
+          padding-top: calc(var(--dx-slider-tooltip-width) / 2);
+
+          .dx-slider-tooltip-position-top & {
+            padding-top: var(--dx-slider-tooltip-top-padding-block-start);
+            padding-bottom: calc(var(--dx-slider-tooltip-width) / 2);
+          }
+        }
+      }
+    }
+  }
+}
+
+.dx-slider-tooltip-position-top {
+  padding-top: calc(var(--dx-slider-tooltip-width) + 6px); // dx-px-nudge: +6px over the tooltip width
+}
+
+.dx-slider-tooltip-position-bottom {
+  padding-bottom: calc(var(--dx-slider-tooltip-width) + 6px); // dx-px-nudge: +6px over the tooltip width
+}
+
+.dx-slider-label-position-bottom {
+  .dx-slider-label {
+    bottom: var(--dx-slider-label-bottom-inset-block-end);
+  }
+}
+
+.dx-slider-label-position-top {
+  .dx-slider-label {
+    top: var(--dx-slider-label-top-inset-block-start);
+  }
+}
+
+.dx-invalid {
+  .dx-slider-handle {
+    &::after {
+      background-color: var(--dx-slider-handle-invalid-bg);
+    }
+
+    &.dx-state-hover {
+      &::after {
+        background-color: var(--dx-slider-invalid-bg-hovered);
+      }
+    }
+
+    &.dx-state-focused {
+      border-color: var(--dx-slider-invalid-border-focused);
+
+      &::after {
+        background-color: var(--dx-slider-invalid-bg-focused);
+      }
+    }
+  }
+
+  .dx-slider-range-visible {
+    background-color: var(--dx-slider-invalid-bg);
+    border-color: var(--dx-slider-invalid-bg);
+  }
+}
+
+.dx-state-disabled {
+  &.dx-slider,
+
+  &.dx-slider-handle {
+    border-color: var(--dx-slider-border-disabled);
+
+    &::after {
+      background: var(--dx-slider-bg-disabled);
+    }
+  }
+
+  .dx-slider-bar {
+    background: var(--dx-slider-bar-bg-disabled);
+  }
+
+  .dx-slider-range.dx-slider-range-visible {
+    background: var(--dx-slider-bg-disabled);
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/slider/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/slider/_public.scss
new file mode 100644
index 000000000000..d2b2f4bc209b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/slider/_public.scss
@@ -0,0 +1,37 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-slider-accent-bg: #{$slider-accent-bg};
+  --dx-slider-accent-bg-focused: #{$slider-accent-bg-focused};
+  --dx-slider-accent-bg-hovered: #{$slider-accent-bg-hovered};
+  --dx-slider-accent-border-focused: #{$slider-accent-border-focused};
+  --dx-slider-bar-bg: #{$slider-bar-bg};
+  --dx-slider-bar-bg-disabled: #{$slider-bar-bg-disabled};
+  --dx-slider-bg-disabled: #{$slider-bg-disabled};
+  --dx-slider-border: #{$slider-border};
+  --dx-slider-border-disabled: #{$slider-border-disabled};
+  --dx-slider-border-radius: #{$slider-border-radius};
+  --dx-slider-element-bg: #{$slider-element-bg};
+  --dx-slider-handle-border-width: #{$slider-handle-border-width};
+  --dx-slider-handle-inner-border-width: #{$slider-handle-inner-border-width};
+  --dx-slider-handle-invalid-bg: #{$slider-handle-invalid-bg};
+  --dx-slider-handle-size: #{$slider-handle-size};
+  --dx-slider-height: #{$slider-height};
+  --dx-slider-invalid-bg: #{$slider-invalid-bg};
+  --dx-slider-invalid-bg-focused: #{$slider-invalid-bg-focused};
+  --dx-slider-invalid-bg-hovered: #{$slider-invalid-bg-hovered};
+  --dx-slider-invalid-border-focused: #{$slider-invalid-border-focused};
+  --dx-slider-label-bottom-inset-block-end: #{$slider-label-bottom-inset-block-end};
+  --dx-slider-label-bottom-padding-block-end: #{$slider-label-bottom-padding-block-end};
+  --dx-slider-label-top-inset-block-start: #{$slider-label-top-inset-block-start};
+  --dx-slider-label-top-padding-block-start: #{$slider-label-top-padding-block-start};
+  --dx-slider-tooltip-content: #{$slider-tooltip-content};
+  --dx-slider-tooltip-height: #{$slider-tooltip-height};
+  --dx-slider-tooltip-top-padding-block-start: #{$slider-tooltip-top-padding-block-start};
+  --dx-slider-tooltip-width: #{$slider-tooltip-width};
+  --dx-slider-track-border-radius: #{$slider-track-border-radius};
+  --dx-slider-track-height: #{$slider-track-height};
+  --dx-slider-wrapper-height: #{$slider-wrapper-height};
+}
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..af6d6d7b145b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/slider/_sizes.scss
@@ -0,0 +1,39 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$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;
+
+// Base-layer sizing injected with design tokens (wave B12)
+$slider-tooltip-height: ds.$spacing-280 !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..4029fe90ef68
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/sortable/_colors.scss
@@ -0,0 +1,7 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// Base-layer values injected with design tokens (wave B1)
+$sortable-clone-shadow: ds.$box-shadow-md !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: ds.$color-border-primary !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..2c282ce84d75
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/sortable/_index.scss
@@ -0,0 +1,10 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/sortable" as baseSortable with (
+  $sortable-placeholder-border: var(--dx-sortable-placeholder-border-width) solid,
+  $sortable-placeholder-inside-border-width: var(--dx-sortable-placeholder-inside-border-width),
+  $sortable-clone-shadow: var(--dx-sortable-clone-shadow),
+  $sortable-clone-opacity: var(--dx-sortable-clone-opacity),
+  $sortable-source-opacity: var(--dx-sortable-source-opacity),
+  $base-accent: var(--dx-sortable-placeholder-border),
+);
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/sortable/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/sortable/_public.scss
new file mode 100644
index 000000000000..758365812835
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/sortable/_public.scss
@@ -0,0 +1,12 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-sortable-clone-opacity: #{$sortable-clone-opacity};
+  --dx-sortable-clone-shadow: #{$sortable-clone-shadow};
+  --dx-sortable-placeholder-border: #{$sortable-placeholder-border};
+  --dx-sortable-placeholder-border-width: #{$sortable-placeholder-border-width};
+  --dx-sortable-placeholder-inside-border-width: #{$sortable-placeholder-inside-border-width};
+  --dx-sortable-source-opacity: #{$sortable-source-opacity};
+}
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..5e54c6d1716d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/sortable/_sizes.scss
@@ -0,0 +1,10 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// 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-65 !default;
+
+// Base-layer sizing injected with design tokens (wave B2)
+$sortable-placeholder-border-width: ds.$border-width-10 !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..e69de29bb2d1
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..281b3c1ed233
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/speechToText/_index.scss
@@ -0,0 +1,3 @@
+@use "../../base/speechToText";
+@use "colors" as *;
+@use "sizes" as *;
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..64c919a0e8b4
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/speechToText/_sizes.scss
@@ -0,0 +1 @@
+@use "../common/sizes" as *;
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..b174e289d1ef
--- /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 *;
+
+$speed-dial-action-content: ds.$color-content !default;
+$speed-dial-action-shadow: ds.$box-shadow-md !default;
+$speed-dial-action-label-shadow: ds.$box-shadow-sm !default;
+
+$speed-dial-action-bg: buttonColors.$button-normal-contained-bg !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-bg-disabled: ds.$color-bg-disabled !default;
+$speed-dial-action-content-disabled: ds.$color-content-disabled !default;
+$speed-dial-action-main-content: ds.$color-content-static-dark !default;
+$speed-dial-action-main-bg: ds.$color-bg-primary !default;
+$speed-dial-action-main-bg-hovered: ds.$color-bg-primary-hovered !default;
+$speed-dial-action-main-bg-active: ds.$color-bg-primary-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..683ee9136bfd
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/speedDialAction/_index.scss
@@ -0,0 +1,58 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/speedDialAction" as baseSpeedDialAction with (
+  $speeddialaction-fa-button-label-border-radius: var(--dx-speed-dial-action-fa-button-label-border-radius),
+);
+@use "../overlay";
+@include baseSpeedDialAction.dx-fa-button-mixin(
+  var(--dx-speed-dial-action-main-fa-button-size),
+  var(--dx-speed-dial-action-fa-button-size),
+  $global-icon-size,
+  $global-font-size,
+  var(--dx-speed-dial-action-fa-button-label-padding),
+  var(--dx-speed-dial-action-fa-button-label-offset),
+  var(--dx-speed-dial-action-content),
+  var(--dx-speed-dial-action-bg),
+  var(--dx-speed-dial-action-shadow),
+  var(--dx-speed-dial-action-backdrop),
+  var(--dx-speed-dial-action-bg-hovered),
+  var(--dx-speed-dial-action-bg-active),
+  var(--dx-speed-dial-action-label-shadow),
+  var(--dx-speed-dial-action-main-bg),
+  var(--dx-speed-dial-action-main-content),
+  var(--dx-speed-dial-action-main-bg-hovered),
+  var(--dx-speed-dial-action-main-bg-active)
+);
+
+.dx-fa-button {
+  &.dx-fa-button-main {
+    .dx-overlay-content {
+      .dx-fa-button-label {
+        padding: var(--dx-speed-dial-action-main-fa-button-label-padding);
+        font-size: $global-font-size;
+        font-weight: var(--dx-speed-dial-action-fa-button-label-font-weight);
+      }
+    }
+
+    &.dx-fa-button-with-label {
+      .dx-overlay-content {
+        .dx-fa-button-icon {
+          padding-inline-start: var(--dx-speed-dial-action-main-fa-button-padding-inline);
+        }
+      }
+    }
+  }
+}
+
+.dx-fa-button.dx-state-disabled {
+  .dx-overlay-content,
+  .dx-fa-button-icon {
+    background-color: var(--dx-speed-dial-action-bg-disabled);
+  }
+
+  .dx-overlay-content .dx-fa-button-label-wrapper .dx-fa-button-label,
+  .dx-icon {
+    color: var(--dx-speed-dial-action-content-disabled);
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/speedDialAction/_public-links.scss b/packages/devextreme-scss/scss/widgets/fluent-next/speedDialAction/_public-links.scss
new file mode 100644
index 000000000000..6e313cd32c93
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/speedDialAction/_public-links.scss
@@ -0,0 +1,3 @@
+@mixin publish {
+  --dx-speed-dial-action-backdrop: var(--dx-backdrop-bg);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/speedDialAction/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/speedDialAction/_public.scss
new file mode 100644
index 000000000000..e9b7773d66dc
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/speedDialAction/_public.scss
@@ -0,0 +1,29 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+@use "public-links" as links;
+
+@mixin publish {
+  --dx-speed-dial-action-bg: #{$speed-dial-action-bg};
+  --dx-speed-dial-action-bg-active: #{$speed-dial-action-bg-active};
+  --dx-speed-dial-action-bg-disabled: #{$speed-dial-action-bg-disabled};
+  --dx-speed-dial-action-bg-hovered: #{$speed-dial-action-bg-hovered};
+  --dx-speed-dial-action-content: #{$speed-dial-action-content};
+  --dx-speed-dial-action-content-disabled: #{$speed-dial-action-content-disabled};
+  --dx-speed-dial-action-fa-button-label-border-radius: #{$speed-dial-action-fa-button-label-border-radius};
+  --dx-speed-dial-action-fa-button-label-font-weight: #{$speed-dial-action-fa-button-label-font-weight};
+  --dx-speed-dial-action-fa-button-label-offset: #{$speed-dial-action-fa-button-label-offset};
+  --dx-speed-dial-action-fa-button-label-padding: #{$speed-dial-action-fa-button-label-padding};
+  --dx-speed-dial-action-fa-button-size: #{$speed-dial-action-fa-button-size};
+  --dx-speed-dial-action-label-shadow: #{$speed-dial-action-label-shadow};
+  --dx-speed-dial-action-main-bg: #{$speed-dial-action-main-bg};
+  --dx-speed-dial-action-main-bg-active: #{$speed-dial-action-main-bg-active};
+  --dx-speed-dial-action-main-bg-hovered: #{$speed-dial-action-main-bg-hovered};
+  --dx-speed-dial-action-main-content: #{$speed-dial-action-main-content};
+  --dx-speed-dial-action-main-fa-button-label-padding: #{$speed-dial-action-main-fa-button-label-padding};
+  --dx-speed-dial-action-main-fa-button-padding-inline: #{$speed-dial-action-main-fa-button-padding-inline};
+  --dx-speed-dial-action-main-fa-button-size: #{$speed-dial-action-main-fa-button-size};
+  --dx-speed-dial-action-shadow: #{$speed-dial-action-shadow};
+
+  @include links.publish();
+}
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..3f650ecbda75
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/speedDialAction/_sizes.scss
@@ -0,0 +1,29 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$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 !default;
+  $speed-dial-action-main-fa-button-label-padding: 0 $speed-dial-action-main-fa-button-padding-inline 0 ds.$spacing-80 !default;
+}
+
+@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 !default;
+  $speed-dial-action-main-fa-button-label-padding: 0 $speed-dial-action-main-fa-button-padding-inline 0 ds.$spacing-40 !default;
+}
+
+// Values hoisted from style-file literals (tokenized)
+$speed-dial-action-fa-button-label-font-weight: ds.$font-weight-base-strong !default;
+$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..4e7b493cf6ed
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/splitter/_colors.scss
@@ -0,0 +1,14 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$splitter-resize-handle-content: ds.$color-content !default;
+
+$splitter-resize-handle-content-focused: ds.$color-content-static-dark !default;
+
+$splitter-resize-handle-bg: ds.$color-border !default;
+
+$splitter-resize-handle-bg-hovered: ds.$color-border !default;
+
+$splitter-resize-handle-bg-focused: ds.$color-bg-primary !default;
+
+$splitter-resize-handle-content-disabled: ds.$color-content-disabled !default;
+$splitter-resize-handle-bg-disabled: ds.$color-bg-disabled !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..ea02801bbfa8
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/splitter/_index.scss
@@ -0,0 +1,38 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../../base/splitter" with (
+  $splitter-resize-handle-gap: var(--dx-splitter-resize-handle-gap),
+);
+@use "../../base/splitter/mixins" as *;
+
+.dx-splitter {
+  @include resize-handle-states(
+    var(--dx-splitter-resize-handle-content),
+    var(--dx-splitter-resize-handle-bg),
+    /* The grip does not change on hover. The name this argument used to carry was read and
+       never declared, so the declaration was invalid and the browser kept the rest colour;
+       reading the rest name renders the same and stops the dangling read. The package does
+       assign one (resize-handler.color.content.hovered = content-primary-hovered), but on our
+       hovered bar it measures 1.17 in dark, so adopting it is a design decision, not a fix. */
+    var(--dx-splitter-resize-handle-content),
+    var(--dx-splitter-resize-handle-bg-hovered),
+    var(--dx-splitter-resize-handle-content-focused),
+    var(--dx-splitter-resize-handle-bg-focused),
+  );
+}
+
+.dx-resize-handle {
+  .dx-icon {
+    @include dx-icon-sizing(var(--dx-splitter-resize-handle-icon-size));
+  }
+}
+
+.dx-splitter.dx-state-disabled .dx-resize-handle,
+.dx-state-disabled .dx-splitter .dx-resize-handle {
+  background-color: var(--dx-splitter-resize-handle-bg-disabled);
+
+  .dx-resize-handle-icon {
+    color: var(--dx-splitter-resize-handle-content-disabled);
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/splitter/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/splitter/_public.scss
new file mode 100644
index 000000000000..7ed4c1df6ca8
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/splitter/_public.scss
@@ -0,0 +1,15 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-splitter-resize-handle-bg: #{$splitter-resize-handle-bg};
+  --dx-splitter-resize-handle-bg-disabled: #{$splitter-resize-handle-bg-disabled};
+  --dx-splitter-resize-handle-bg-focused: #{$splitter-resize-handle-bg-focused};
+  --dx-splitter-resize-handle-bg-hovered: #{$splitter-resize-handle-bg-hovered};
+  --dx-splitter-resize-handle-content: #{$splitter-resize-handle-content};
+  --dx-splitter-resize-handle-content-disabled: #{$splitter-resize-handle-content-disabled};
+  --dx-splitter-resize-handle-content-focused: #{$splitter-resize-handle-content-focused};
+  --dx-splitter-resize-handle-gap: #{$splitter-resize-handle-gap};
+  --dx-splitter-resize-handle-icon-size: #{$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..14ce9a4c1cb4
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/splitter/_sizes.scss
@@ -0,0 +1,6 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$splitter-resize-handle-icon-size: ds.$spacing-200 !default;
+
+// 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..99beb7dc6210
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/splitterBar/_colors.scss
@@ -0,0 +1,6 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$splitter-bar-border: ds.$color-border !default;
+$splitter-bar-bg-active: ds.$color-bg-primary-alpha-active !default;
+
+$splitter-bar-border-disabled: ds.$color-border-disabled !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..75de79478c7d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/splitterBar/_index.scss
@@ -0,0 +1,23 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/splitterBar" with (
+  $splitterbar-splitter-border-width: var(--dx-splitter-bar-border-width),
+  $splitterbar-splitter-bar-width: var(--dx-splitter-bar-width),
+);
+
+.dx-splitter-bar {
+  background-color: var(--dx-splitter-bar-bg-active);
+
+  &.dx-splitter-inactive {
+    background-color: var(--dx-splitter-bar-border);
+  }
+}
+
+.dx-splitter-border {
+  background-color: transparent;
+}
+
+.dx-state-disabled .dx-splitter-bar,
+.dx-state-disabled .dx-splitter-bar.dx-splitter-inactive {
+  background-color: var(--dx-splitter-bar-border-disabled);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/splitterBar/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/splitterBar/_public.scss
new file mode 100644
index 000000000000..37aea35c9632
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/splitterBar/_public.scss
@@ -0,0 +1,11 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-splitter-bar-bg-active: #{$splitter-bar-bg-active};
+  --dx-splitter-bar-border: #{$splitter-bar-border};
+  --dx-splitter-bar-border-disabled: #{$splitter-bar-border-disabled};
+  --dx-splitter-bar-border-width: #{$splitter-bar-border-width};
+  --dx-splitter-bar-width: #{$splitter-bar-width};
+}
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..3b8535562fa4
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/splitterBar/_sizes.scss
@@ -0,0 +1,5 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// Base-layer sizing injected with design tokens (wave B2)
+$splitter-bar-border-width: ds.$spacing-70 !default; // dx-foreign-scale: 7px, the border-width scale stops at 4px
+$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..848839bb1157
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_colors.scss
@@ -0,0 +1,58 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$stepper-step-accent-bg: ds.$color-bg-primary !default;
+
+$stepper-step-accent-bg-hovered: ds.$color-bg-primary-hovered !default;
+
+/*
+ * Reads the role directly rather than the accent variable: a tier link may not cross states
+ * (selected-hovered -> hovered), and an alias would have to be published as one.
+ */
+$stepper-step-bg-selected-hovered: ds.$color-bg-primary-hovered !default;
+
+// $stepper-step-danger-bg: ds.$color-bg-danger !default; // unused variable
+
+// $stepper-step-danger-hover-bg: ds.$color-bg-danger-hovered !default; // unused variable
+
+$stepper-step-base-bg: ds.$color-bg !default;
+
+$stepper-step-base-bg-hovered: ds.$color-bg-hovered !default;
+
+$stepper-step-base-border: ds.$color-border !default;
+
+$stepper-step-base-border-hovered: ds.$color-border-hovered !default;
+
+$stepper-step-base-content: ds.$color-content !default;
+
+$stepper-step-base-label-content: ds.$color-content !default;
+
+$stepper-step-content-selected: ds.$color-content-static-dark !default;
+
+$stepper-step-bg-selected-disabled: ds.$color-content-disabled !default;
+$stepper-step-content-selected-disabled: ds.$color-content-inverted !default;
+
+$stepper-step-label-content-selected: ds.$color-content-primary !default;
+
+$stepper-step-invalid-content: ds.$color-content-danger !default;
+
+$stepper-step-invalid-content-hovered: ds.$color-content-danger-hovered !default;
+
+$stepper-step-invalid-label-content: ds.$color-content-danger !default;
+
+$stepper-step-invalid-bg-selected: ds.$color-content-danger !default;
+
+$stepper-step-invalid-bg-selected-hovered: ds.$color-bg-danger-hovered !default;
+
+$stepper-step-bg-disabled: ds.$color-bg-disabled !default;
+
+$stepper-step-border-disabled: ds.$color-border-disabled !default;
+
+$stepper-step-content-disabled: ds.$color-content-disabled !default;
+
+$stepper-connector-bg: ds.$color-border-subtle !default;
+
+$stepper-connector-value-bg: ds.$color-bg-primary !default;
+
+$stepper-connector-value-bg-disabled: ds.$color-content-disabled !default;
+
+$stepper-step-shadow: ds.$color-bg !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..c83e13a344fe
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_index.scss
@@ -0,0 +1,82 @@
+@use "../../base/stepper";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/stepper/mixins" as *;
+@include stepper(
+  var(--dx-stepper-padding),
+);
+@include connector(
+  var(--dx-stepper-connector-bg),
+  var(--dx-stepper-connector-value-bg),
+  var(--dx-stepper-connector-size),
+  var(--dx-stepper-connector-padding),
+  var(--dx-stepper-connector-thickness),
+);
+@include step(
+  var(--dx-stepper-step-min-size),
+  var(--dx-stepper-step-indicator-size),
+  var(--dx-stepper-step-indicator-size),
+  var(--dx-stepper-step-content-row-gap),
+  var(--dx-stepper-step-content-column-gap),
+  var(--dx-stepper-step-optional-mark-font-size),
+  var(--dx-stepper-step-icon-size),
+  var(--dx-stepper-step-transition-duration),
+);
+@include step-states(
+  var(--dx-stepper-step-shadow),
+  var(--dx-stepper-step-base-bg),
+  var(--dx-stepper-step-base-bg-hovered),
+  var(--dx-stepper-step-base-border),
+  var(--dx-stepper-step-base-border-hovered),
+  var(--dx-stepper-step-base-content),
+  var(--dx-stepper-step-base-label-content),
+  var(--dx-stepper-step-bg-selected),
+  var(--dx-stepper-step-bg-selected-hovered),
+  var(--dx-stepper-step-content-selected),
+  var(--dx-stepper-step-label-content-selected),
+  var(--dx-stepper-step-font-weight-selected),
+  var(--dx-stepper-step-invalid-bg),
+  var(--dx-stepper-step-invalid-bg-hovered),
+  var(--dx-stepper-step-invalid-border),
+  var(--dx-stepper-step-invalid-border-hovered),
+  var(--dx-stepper-step-invalid-content),
+  var(--dx-stepper-step-invalid-content-hovered),
+  var(--dx-stepper-step-invalid-label-content),
+  var(--dx-stepper-step-invalid-bg-selected),
+  var(--dx-stepper-step-invalid-bg-selected-hovered),
+  var(--dx-stepper-step-content-disabled),
+  var(--dx-stepper-step-bg-disabled),
+  var(--dx-stepper-step-shadow-disabled),
+  $indicator-ring-inset: var(--dx-stepper-step-indicator-ring-inset),
+  $indicator-ring-size: var(--dx-stepper-step-indicator-ring-size),
+  $indicator-halo-size: var(--dx-stepper-step-indicator-halo-size),
+);
+
+.dx-stepper.dx-state-disabled,
+.dx-state-disabled .dx-stepper {
+  .dx-step-indicator {
+    color: var(--dx-stepper-step-content-disabled);
+    border-color: var(--dx-stepper-step-border-disabled);
+    background-color: var(--dx-stepper-step-bg-disabled);
+  }
+
+  .dx-step-caption {
+    color: var(--dx-stepper-step-content-disabled);
+  }
+
+  .dx-step-selected .dx-step-indicator,
+  .dx-step-completed .dx-step-indicator {
+    color: var(--dx-stepper-step-content-selected-disabled);
+    border-color: var(--dx-stepper-step-bg-selected-disabled);
+    background-color: var(--dx-stepper-step-bg-selected-disabled);
+  }
+
+  .dx-stepper-connector-value {
+    background-color: var(--dx-stepper-connector-value-bg-disabled);
+  }
+}
+
+.dx-stepper.dx-state-disabled .dx-step.dx-step-selected .dx-step-indicator,
+.dx-state-disabled .dx-stepper .dx-step.dx-step-selected .dx-step-indicator {
+  box-shadow: 0 0 0 2px var(--dx-stepper-step-shadow), 0 0 0 4px var(--dx-stepper-step-bg-selected-disabled), 0 0 0 8px var(--dx-stepper-step-shadow); // dx-shadow-geometry: rings drawn with spread; every step of the scale has spread 0, so no role fits
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_public-links.scss b/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_public-links.scss
new file mode 100644
index 000000000000..9a47ec1f5f97
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_public-links.scss
@@ -0,0 +1,11 @@
+@mixin publish {
+  --dx-stepper-connector-padding: var(--dx-stepper-padding);
+  --dx-stepper-connector-size: var(--dx-stepper-step-indicator-size);
+  --dx-stepper-step-bg-selected: var(--dx-stepper-step-accent-bg);
+  --dx-stepper-step-invalid-bg: var(--dx-stepper-step-base-bg);
+  --dx-stepper-step-invalid-bg-hovered: var(--dx-stepper-step-base-bg-hovered);
+  --dx-stepper-step-invalid-border: var(--dx-stepper-step-base-border);
+  --dx-stepper-step-invalid-border-hovered: var(--dx-stepper-step-base-border-hovered);
+  --dx-stepper-step-optional-mark-font-size: var(--dx-typography-xs-font-size);
+  --dx-stepper-step-shadow-disabled: var(--dx-stepper-step-base-bg);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_public.scss
new file mode 100644
index 000000000000..62acb1a0654f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_public.scss
@@ -0,0 +1,46 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+@use "public-links" as links;
+
+@mixin publish {
+  --dx-stepper-connector-bg: #{$stepper-connector-bg};
+  --dx-stepper-connector-thickness: #{$stepper-connector-thickness};
+  --dx-stepper-connector-value-bg: #{$stepper-connector-value-bg};
+  --dx-stepper-connector-value-bg-disabled: #{$stepper-connector-value-bg-disabled};
+  --dx-stepper-padding: #{$stepper-padding};
+  --dx-stepper-step-accent-bg: #{$stepper-step-accent-bg};
+  --dx-stepper-step-accent-bg-hovered: #{$stepper-step-accent-bg-hovered};
+  --dx-stepper-step-base-bg: #{$stepper-step-base-bg};
+  --dx-stepper-step-base-bg-hovered: #{$stepper-step-base-bg-hovered};
+  --dx-stepper-step-base-border: #{$stepper-step-base-border};
+  --dx-stepper-step-base-border-hovered: #{$stepper-step-base-border-hovered};
+  --dx-stepper-step-base-content: #{$stepper-step-base-content};
+  --dx-stepper-step-base-label-content: #{$stepper-step-base-label-content};
+  --dx-stepper-step-bg-disabled: #{$stepper-step-bg-disabled};
+  --dx-stepper-step-bg-selected-disabled: #{$stepper-step-bg-selected-disabled};
+  --dx-stepper-step-bg-selected-hovered: #{$stepper-step-bg-selected-hovered};
+  --dx-stepper-step-border-disabled: #{$stepper-step-border-disabled};
+  --dx-stepper-step-content-column-gap: #{$stepper-step-content-column-gap};
+  --dx-stepper-step-content-disabled: #{$stepper-step-content-disabled};
+  --dx-stepper-step-content-row-gap: #{$stepper-step-content-row-gap};
+  --dx-stepper-step-content-selected: #{$stepper-step-content-selected};
+  --dx-stepper-step-content-selected-disabled: #{$stepper-step-content-selected-disabled};
+  --dx-stepper-step-font-weight-selected: #{$stepper-step-font-weight-selected};
+  --dx-stepper-step-icon-size: #{$stepper-step-icon-size};
+  --dx-stepper-step-indicator-halo-size: #{$stepper-step-indicator-halo-size};
+  --dx-stepper-step-indicator-ring-inset: #{$stepper-step-indicator-ring-inset};
+  --dx-stepper-step-indicator-ring-size: #{$stepper-step-indicator-ring-size};
+  --dx-stepper-step-indicator-size: #{$stepper-step-indicator-size};
+  --dx-stepper-step-invalid-bg-selected: #{$stepper-step-invalid-bg-selected};
+  --dx-stepper-step-invalid-bg-selected-hovered: #{$stepper-step-invalid-bg-selected-hovered};
+  --dx-stepper-step-invalid-content: #{$stepper-step-invalid-content};
+  --dx-stepper-step-invalid-content-hovered: #{$stepper-step-invalid-content-hovered};
+  --dx-stepper-step-invalid-label-content: #{$stepper-step-invalid-label-content};
+  --dx-stepper-step-label-content-selected: #{$stepper-step-label-content-selected};
+  --dx-stepper-step-min-size: #{$stepper-step-min-size};
+  --dx-stepper-step-shadow: #{$stepper-step-shadow};
+  --dx-stepper-step-transition-duration: #{$stepper-step-transition-duration};
+
+  @include links.publish();
+}
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..24385e77205d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_sizes.scss
@@ -0,0 +1,37 @@
+@use "colors" as *;
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+@use "../button/sizes" as buttonSizes;
+
+$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-icon-size: buttonSizes.$button-icon-size !default;
+
+$stepper-step-font-weight-selected: ds.$font-weight-base-strong !default;
+$stepper-step-transition-duration: 0.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;
+
+// Base-layer sizing injected with design tokens (wave B3)
+$stepper-step-indicator-ring-inset: ds.$spacing-20 !default;
+$stepper-step-indicator-ring-size: ds.$spacing-40 !default;
+$stepper-step-indicator-halo-size: ds.$spacing-80 !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..411507045184
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/switch/_colors.scss
@@ -0,0 +1,35 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$switch-on-border: ds.$color-border-primary-shared !default;
+$switch-on-border-hovered: ds.$color-border-primary-shared-hovered !default;
+$switch-on-border-focused: ds.$color-border-primary-shared-active !default;
+$switch-on-border-disabled: ds.$color-none !default;
+
+$switch-bg: ds.$color-none !default;
+
+$switch-on-bg: ds.$color-bg-primary-shared !default;
+$switch-on-bg-hovered: ds.$color-bg-primary-shared-hovered !default;
+$switch-on-bg-focused: ds.$color-bg-primary-shared-active !default;
+$switch-on-bg-disabled: ds.$color-bg-disabled !default;
+
+$switch-handle-off-bg: ds.$color-content-subtle !default;
+$switch-handle-off-bg-hovered: ds.$color-content !default;
+$switch-handle-off-bg-active: ds.$color-content !default;
+$switch-handle-on-bg: ds.$color-content-inverted !default;
+$switch-handle-bg-disabled: ds.$color-content-disabled !default;
+
+$switch-border-disabled: ds.$color-border-disabled !default;
+$switch-off-border: ds.$color-border-contrast !default;
+$switch-off-border-hovered: ds.$color-border-contrast-hovered !default;
+$switch-off-border-active: ds.$color-border-contrast-active !default;
+
+$switch-invalid-border: ds.$color-border-danger-shared !default;
+$switch-invalid-border-hovered: ds.$color-border-danger-shared-hovered !default;
+$switch-invalid-border-focused: ds.$color-border-danger-shared-active !default;
+
+$switch-invalid-bg: ds.$color-bg-danger-shared !default;
+$switch-invalid-bg-hovered: ds.$color-bg-danger-shared-hovered !default;
+$switch-invalid-bg-focused: ds.$color-bg-danger-shared-active !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: rgb(from #{ds.$color-content-inverted} 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..7f188a3ac57b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/switch/_index.scss
@@ -0,0 +1,73 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/mixins" as *;
+@use "../../base/switch";
+@use "../../base/switch/mixins" as *;
+@include dx-switch(
+  var(--dx-switch-width),
+  var(--dx-switch-height),
+  var(--dx-switch-padding),
+  var(--dx-switch-handle-height),
+  var(--dx-switch-container-height),
+  var(--dx-switch-container-padding-inline),
+  var(--dx-switch-container-margin-block),
+  var(--dx-switch-handle-margin),
+  var(--dx-switch-handle-border-radius),
+  var(--dx-switch-transition),
+  $switch-container-border-radius: var(--dx-switch-container-border-radius),
+  $switch-label-padding: var(--dx-switch-label-padding),
+  $switch-off-padding-bottom: var(--dx-switch-off-padding-block-end),
+);
+@include dx-switch-states-fluent(
+  var(--dx-switch-on-bg-disabled),
+  var(--dx-switch-handle-bg-disabled),
+  var(--dx-switch-box-shadow),
+  var(--dx-switch-bg),
+  var(--dx-switch-on-bg),
+  var(--dx-switch-on-border-hovered),
+  var(--dx-switch-on-border-focused),
+  var(--dx-switch-handle-on-box-shadow),
+  var(--dx-switch-handle-off-bg),
+  var(--dx-switch-handle-on-bg),
+  1px solid, // dx-line-width: 1px, the off-state border
+  var(--dx-switch-off-border),
+  var(--dx-switch-off-border-hovered),
+  var(--dx-switch-off-border-active),
+  var(--dx-switch-on-border),
+  var(--dx-switch-invalid-border),
+  var(--dx-switch-invalid-border-hovered),
+  var(--dx-switch-invalid-border-focused),
+  var(--dx-switch-border-disabled),
+
+  $disabled-opacity-reset: null,
+  $trigger-off-bg: var(--dx-switch-handle-off-bg),
+  $trigger-off-bg-hover: var(--dx-switch-handle-off-bg-hovered),
+  $trigger-off-bg-active: var(--dx-switch-handle-off-bg-active),
+  $switch-on-bg-hover: var(--dx-switch-on-bg-hovered),
+  $switch-on-bg-active: var(--dx-switch-on-bg-focused),
+  $switch-on-disabled-border: var(--dx-switch-on-border-disabled),
+  $switch-invalid-bg: var(--dx-switch-invalid-bg),
+  $switch-invalid-bg-hover: var(--dx-switch-invalid-bg-hovered),
+  $switch-invalid-bg-active: var(--dx-switch-invalid-bg-focused),
+);
+@include dx-switch-rtl(
+  calc(var(--dx-switch-handle-height) - var(--dx-switch-handle-margin)),
+  var(--dx-switch-handle-on-box-shadow-blur),
+  var(--dx-switch-container-rtl-offset),
+);
+
+.dx-state-disabled .dx-switch {
+  .dx-switch-handle::before {
+    background-color: var(--dx-switch-handle-bg-disabled);
+  }
+
+  .dx-switch-container::before {
+    border-color: var(--dx-switch-border-disabled);
+    background-color: transparent;
+  }
+
+  &.dx-switch-on-value .dx-switch-container::before {
+    border-color: var(--dx-switch-on-border-disabled);
+    background-color: var(--dx-switch-on-bg-disabled);
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/switch/_public-links.scss b/packages/devextreme-scss/scss/widgets/fluent-next/switch/_public-links.scss
new file mode 100644
index 000000000000..030e2e72f68d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/switch/_public-links.scss
@@ -0,0 +1,4 @@
+@mixin publish {
+  --dx-switch-container-height: var(--dx-switch-height);
+  --dx-switch-container-padding-inline: var(--dx-switch-handle-margin);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/switch/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/switch/_public.scss
new file mode 100644
index 000000000000..940906ffa955
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/switch/_public.scss
@@ -0,0 +1,49 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+@use "public-links" as links;
+
+@mixin publish {
+  --dx-switch-bg: #{$switch-bg};
+  --dx-switch-border-disabled: #{$switch-border-disabled};
+  --dx-switch-box-shadow: #{$switch-box-shadow};
+  --dx-switch-container-border-radius: #{$switch-container-border-radius};
+  --dx-switch-container-margin-block: #{$switch-container-margin-block};
+  --dx-switch-container-rtl-offset: #{$switch-container-rtl-offset};
+  --dx-switch-handle-bg-disabled: #{$switch-handle-bg-disabled};
+  --dx-switch-handle-border-radius: #{$switch-handle-border-radius};
+  --dx-switch-handle-height: #{$switch-handle-height};
+  --dx-switch-handle-margin: #{$switch-handle-margin};
+  --dx-switch-handle-off-bg: #{$switch-handle-off-bg};
+  --dx-switch-handle-off-bg-active: #{$switch-handle-off-bg-active};
+  --dx-switch-handle-off-bg-hovered: #{$switch-handle-off-bg-hovered};
+  --dx-switch-handle-on-bg: #{$switch-handle-on-bg};
+  --dx-switch-handle-on-box-shadow: #{$switch-handle-on-box-shadow};
+  --dx-switch-handle-on-box-shadow-blur: #{$switch-handle-on-box-shadow-blur};
+  --dx-switch-handle-on-shadow: #{$switch-handle-on-shadow};
+  --dx-switch-height: #{$switch-height};
+  --dx-switch-invalid-bg: #{$switch-invalid-bg};
+  --dx-switch-invalid-bg-focused: #{$switch-invalid-bg-focused};
+  --dx-switch-invalid-bg-hovered: #{$switch-invalid-bg-hovered};
+  --dx-switch-invalid-border: #{$switch-invalid-border};
+  --dx-switch-invalid-border-focused: #{$switch-invalid-border-focused};
+  --dx-switch-invalid-border-hovered: #{$switch-invalid-border-hovered};
+  --dx-switch-label-padding: #{$switch-label-padding};
+  --dx-switch-off-border: #{$switch-off-border};
+  --dx-switch-off-border-active: #{$switch-off-border-active};
+  --dx-switch-off-border-hovered: #{$switch-off-border-hovered};
+  --dx-switch-off-padding-block-end: #{$switch-off-padding-block-end};
+  --dx-switch-on-bg: #{$switch-on-bg};
+  --dx-switch-on-bg-disabled: #{$switch-on-bg-disabled};
+  --dx-switch-on-bg-focused: #{$switch-on-bg-focused};
+  --dx-switch-on-bg-hovered: #{$switch-on-bg-hovered};
+  --dx-switch-on-border: #{$switch-on-border};
+  --dx-switch-on-border-disabled: #{$switch-on-border-disabled};
+  --dx-switch-on-border-focused: #{$switch-on-border-focused};
+  --dx-switch-on-border-hovered: #{$switch-on-border-hovered};
+  --dx-switch-padding: #{$switch-padding};
+  --dx-switch-transition: #{$switch-transition};
+  --dx-switch-width: #{$switch-width};
+
+  @include links.publish();
+}
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..5f74beaf783b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/switch/_sizes.scss
@@ -0,0 +1,45 @@
+@use "../sizes" as *;
+@use "colors" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// 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) !default;
+$switch-box-shadow: none !default;
+
+// 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: 0 !default;
+$switch-height: null !default;
+$switch-handle-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 !default;
+$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-height: ds.$spacing-200 !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-height: ds.$spacing-160 !default;
+}
+
+// Base-layer sizing injected with design tokens (wave B7)
+$switch-container-border-radius: ds.$border-radius-full !default;
+$switch-label-padding: ds.$spacing-40 0 !default;
+$switch-off-padding-block-end: ds.$spacing-100 !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..8e9ae15bbe6e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabPanel/_colors.scss
@@ -0,0 +1,3 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$tab-panel-border: ds.$color-border !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..3717592770d1
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabPanel/_index.scss
@@ -0,0 +1,72 @@
+@use "sass:selector";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/tabPanel";
+
+.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: var(--dx-tab-panel-tabs-top-border);
+      border-bottom-color: var(--dx-tab-panel-border);
+
+      @at-root #{selector.append(".dx-empty-collection", &)} {
+        border-bottom: none;
+      }
+    }
+  }
+}
+
+.dx-tabpanel-tabs-position-bottom {
+  > .dx-tabpanel-tabs {
+    .dx-tabs {
+      border-top: var(--dx-tab-panel-tabs-bottom-border);
+      border-top-color: var(--dx-tab-panel-border);
+
+      @at-root #{selector.append(".dx-empty-collection", &)} {
+        border-top: none;
+      }
+    }
+  }
+}
+
+.dx-tabpanel-tabs-position-left {
+  > .dx-tabpanel-tabs {
+    .dx-tabs {
+      border-right: var(--dx-tab-panel-tabs-left-border);
+      border-right-color: var(--dx-tab-panel-border);
+
+      @at-root #{selector.append(".dx-empty-collection", &)} {
+        border-right: none;
+      }
+    }
+  }
+}
+
+.dx-tabpanel-tabs-position-right {
+  > .dx-tabpanel-tabs {
+    .dx-tabs {
+      border-left: var(--dx-tab-panel-tabs-right-border);
+      border-left-color: var(--dx-tab-panel-border);
+
+      @at-root #{selector.append(".dx-empty-collection", &)} {
+        border-left: none;
+      }
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tabPanel/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tabPanel/_public.scss
new file mode 100644
index 000000000000..5de03efd59eb
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabPanel/_public.scss
@@ -0,0 +1,11 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-tab-panel-border: #{$tab-panel-border};
+  --dx-tab-panel-tabs-bottom-border: #{$tab-panel-tabs-bottom-border};
+  --dx-tab-panel-tabs-left-border: #{$tab-panel-tabs-left-border};
+  --dx-tab-panel-tabs-right-border: #{$tab-panel-tabs-right-border};
+  --dx-tab-panel-tabs-top-border: #{$tab-panel-tabs-top-border};
+}
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..021b2920ad50
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabPanel/_sizes.scss
@@ -0,0 +1,7 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// 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..335823819b91
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/_index.scss
@@ -0,0 +1,21 @@
+@use "../mixins" 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 *;
+@use "../scrollable";
+@use "../badge";
+
+@include when-disabled(".dx-tabs") {
+  .dx-tab {
+    color: var(--dx-tabs-tab-content-disabled);
+
+    .dx-icon {
+      color: var(--dx-tabs-tab-icon-content-disabled);
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tabs/_public-links.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/_public-links.scss
new file mode 100644
index 000000000000..eced7142d83b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/_public-links.scss
@@ -0,0 +1,3 @@
+@mixin publish {
+  --dx-tabs-tab-icon: var(--dx-tabs-tab-content);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tabs/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/_public.scss
new file mode 100644
index 000000000000..c566178c08ba
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/_public.scss
@@ -0,0 +1,51 @@
+// GENERATED by tools/naming/publish.mjs
+@use "variables/colors" as *;
+@use "variables/sizes" as *;
+@use "public-links" as links;
+
+@mixin publish {
+  --dx-tabs-badge-min-size: #{$tabs-badge-min-size};
+  --dx-tabs-icon-size: #{$tabs-icon-size};
+  --dx-tabs-indicator-primary-length: #{$tabs-indicator-primary-length};
+  --dx-tabs-indicator-primary-thickness: #{$tabs-indicator-primary-thickness};
+  --dx-tabs-indicator-secondary-border-radius: #{$tabs-indicator-secondary-border-radius};
+  --dx-tabs-indicator-secondary-length: #{$tabs-indicator-secondary-length};
+  --dx-tabs-indicator-secondary-thickness: #{$tabs-indicator-secondary-thickness};
+  --dx-tabs-item-gap: #{$tabs-item-gap};
+  --dx-tabs-item-padding: #{$tabs-item-padding};
+  --dx-tabs-item-padding-block: #{$tabs-item-padding-block};
+  --dx-tabs-item-padding-inline: #{$tabs-item-padding-inline};
+  --dx-tabs-item-secondary-border-radius: #{$tabs-item-secondary-border-radius};
+  --dx-tabs-nav-button-bg: #{$tabs-nav-button-bg};
+  --dx-tabs-nav-button-content-disabled: #{$tabs-nav-button-content-disabled};
+  --dx-tabs-tab-accent-font-weight: #{$tabs-tab-accent-font-weight};
+  --dx-tabs-tab-basic-font-weight: #{$tabs-tab-basic-font-weight};
+  --dx-tabs-tab-basic-selector-selected: #{$tabs-tab-basic-selector-selected};
+  --dx-tabs-tab-bg: #{$tabs-tab-bg};
+  --dx-tabs-tab-bg-active: #{$tabs-tab-bg-active};
+  --dx-tabs-tab-bg-focused: #{$tabs-tab-bg-focused};
+  --dx-tabs-tab-bg-hovered: #{$tabs-tab-bg-hovered};
+  --dx-tabs-tab-content: #{$tabs-tab-content};
+  --dx-tabs-tab-content-disabled: #{$tabs-tab-content-disabled};
+  --dx-tabs-tab-content-selected: #{$tabs-tab-content-selected};
+  --dx-tabs-tab-height: #{$tabs-tab-height};
+  --dx-tabs-tab-icon-content-disabled: #{$tabs-tab-icon-content-disabled};
+  --dx-tabs-tab-icon-content-selected: #{$tabs-tab-icon-content-selected};
+  --dx-tabs-tab-nav-button-content-padding: #{$tabs-tab-nav-button-content-padding};
+  --dx-tabs-tab-nav-button-icon-font-size: #{$tabs-tab-nav-button-icon-font-size};
+  --dx-tabs-tab-nav-button-icon-height: #{$tabs-tab-nav-button-icon-height};
+  --dx-tabs-tab-nav-button-icon-width: #{$tabs-tab-nav-button-icon-width};
+  --dx-tabs-tab-primary-bg-active: #{$tabs-tab-primary-bg-active};
+  --dx-tabs-tab-primary-bg-focused: #{$tabs-tab-primary-bg-focused};
+  --dx-tabs-tab-primary-bg-hovered: #{$tabs-tab-primary-bg-hovered};
+  --dx-tabs-tab-selector-active: #{$tabs-tab-selector-active};
+  --dx-tabs-tab-selector-disabled: #{$tabs-tab-selector-disabled};
+  --dx-tabs-tab-selector-hovered: #{$tabs-tab-selector-hovered};
+  --dx-tabs-tab-selector-selected-active: #{$tabs-tab-selector-selected-active};
+  --dx-tabs-tab-selector-selected-focused: #{$tabs-tab-selector-selected-focused};
+  --dx-tabs-tab-selector-selected-hovered: #{$tabs-tab-selector-selected-hovered};
+  --dx-tabs-tab-vertical-nav-button-content-padding: #{$tabs-tab-vertical-nav-button-content-padding};
+  --dx-tabs-text-column-gap: #{$tabs-text-column-gap};
+
+  @include links.publish();
+}
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..36182e7add0c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/navigation-button/_base.scss
@@ -0,0 +1,51 @@
+@use "../../../../base/icon_fonts" as *;
+@use "../../../../base/tabs";
+@use "../../variables/colors" as *;
+@use "../../variables/sizes" as *;
+@use "../../mixins" as *;
+@use "../../../scrollable";
+@use "../../../badge";
+
+.dx-tabs .dx-tabs-nav-button {
+  box-shadow: none;
+}
+
+.dx-tabs-styling-mode-secondary .dx-tabs-nav-button {
+  border-radius: var(--dx-tabs-item-secondary-border-radius);
+}
+
+.dx-tabs-nav-button {
+  border: none;
+  height: var(--dx-tabs-tab-height);
+  background-color: var(--dx-tabs-nav-button-bg);
+
+  &.dx-button.dx-state-disabled.dx-button-mode-contained {
+    visibility: hidden;
+  }
+
+  &.dx-button-has-icon .dx-icon {
+    width: var(--dx-tabs-tab-nav-button-icon-width);
+    height: var(--dx-tabs-tab-nav-button-icon-height);
+    font-size: var(--dx-tabs-tab-nav-button-icon-font-size);
+  }
+
+  &.dx-state-active {
+    border: none;
+  }
+
+  &.dx-state-disabled {
+    background-color: var(--dx-tabs-tab-bg);
+    color: var(--dx-tabs-nav-button-content-disabled);
+  }
+
+  .dx-button-content {
+    flex: unset;
+    padding: var(--dx-tabs-tab-nav-button-content-padding);
+  }
+}
+
+.dx-tabs-vertical {
+  .dx-tabs-nav-button {
+    padding: var(--dx-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..0b13627dfb59
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/tab/_base.scss
@@ -0,0 +1,105 @@
+@use "sass:string" as string;
+@use "../../../../base/icon_fonts" as *;
+@use "../../../../base/tabs";
+@use "../../variables/colors" as *;
+@use "../../variables/sizes" as *;
+@use "../../mixins" as *;
+@use "../../../scrollable";
+@use "../../../badge";
+@use "styling-mode/primary" as *;
+@use "styling-mode/secondary" as *;
+
+.dx-tab {
+  gap: var(--dx-tabs-item-gap);
+  padding: var(--dx-tabs-item-padding);
+  background-color: var(--dx-tabs-tab-bg);
+  color: var(--dx-tabs-tab-content);
+
+  &.dx-state-hover {
+    background-color: var(--dx-tabs-tab-bg-hovered);
+  }
+
+  &.dx-tab-selected {
+    color: var(--dx-tabs-tab-content-selected);
+
+    .dx-icon {
+      color: var(--dx-tabs-tab-icon-content-selected);
+    }
+
+    .dx-tab-text .dx-tab-text-span {
+      font-weight: var(--dx-tabs-tab-accent-font-weight);
+    }
+  }
+
+  &.dx-state-disabled {
+    color: var(--dx-tabs-tab-content-disabled);
+
+    .dx-icon {
+      color: var(--dx-tabs-tab-icon-content-disabled);
+    }
+  }
+
+  &.dx-state-active {
+    background-color: var(--dx-tabs-tab-bg-active);
+  }
+
+  .dx-tab-text {
+    column-gap: var(--dx-tabs-text-column-gap);
+    row-gap: var(--dx-tabs-item-gap);
+    line-height: var(--dx-global-line-height);
+
+    .dx-tab-text-span {
+      display: block;
+      font-weight: var(--dx-tabs-tab-basic-font-weight);
+    }
+
+    .dx-tab-text-span-pseudo {
+      display: block;
+      height: 0;
+      pointer-events: none;
+      font-weight: var(--dx-tabs-tab-accent-font-weight);
+      visibility: hidden;
+    }
+  }
+
+  .dx-icon {
+    color: var(--dx-tabs-tab-icon);
+    visibility: visible;
+
+    @include dx-icon-sizing(var(--dx-tabs-icon-size));
+
+    width: 1em;
+    height: 1em;
+    line-height: 1;
+  }
+
+  .dx-tabs-item-badge {
+    align-self: center;
+    min-width: var(--dx-tabs-badge-min-size);
+    min-height: var(--dx-tabs-badge-min-size);
+  }
+}
+
+.dx-tabs.dx-state-focused {
+  .dx-tab.dx-state-focused {
+    background-color: var(--dx-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..dc4701225993
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/tab/styling-mode/_primary.scss
@@ -0,0 +1,121 @@
+@use "../../../../../base/icon_fonts" as *;
+@use "../../../../../base/tabs";
+@use "../../../variables/colors" as *;
+@use "../../../variables/sizes" as *;
+@use "../../../mixins" as *;
+@use "../../../../scrollable";
+@use "../../../../badge";
+
+.dx-tabs-styling-mode-primary {
+  .dx-tab {
+    &.dx-state-hover {
+      background-color: var(--dx-tabs-tab-primary-bg-hovered);
+    }
+
+    &.dx-state-focused {
+      background-color: var(--dx-tabs-tab-primary-bg-focused);
+    }
+
+    &.dx-state-active {
+      background-color: var(--dx-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(var(--dx-tabs-tab-selector-hovered));
+      }
+
+      &.dx-state-active {
+        @include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-active));
+      }
+    }
+
+    .dx-tab-selected {
+      @include dx-tabs-indicator-background(var(--dx-tabs-tab-basic-selector-selected));
+
+      &.dx-state-focused {
+        @include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-selected-focused));
+      }
+
+      &.dx-state-hover {
+        @include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-selected-hovered));
+      }
+
+      &.dx-state-active {
+        @include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-selected-active));
+      }
+
+      &.dx-state-disabled {
+        @include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-disabled));
+      }
+    }
+
+    &.dx-state-disabled .dx-tab-selected {
+      @include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-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(var(--dx-tabs-tab-selector-hovered));
+      }
+
+      &.dx-state-active {
+        @include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-active));
+      }
+    }
+
+    .dx-tab-selected {
+      @include dx-tabs-indicator-background(var(--dx-tabs-tab-basic-selector-selected));
+
+      &.dx-state-focused {
+        @include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-selected-focused));
+      }
+
+      &.dx-state-hover {
+        @include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-selected-hovered));
+      }
+
+      &.dx-state-active {
+        @include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-selected-active));
+      }
+
+      &.dx-state-disabled {
+        @include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-disabled));
+      }
+    }
+
+    &.dx-state-disabled .dx-tab-selected {
+      @include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-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..972deecbdd44
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/tab/styling-mode/_secondary.scss
@@ -0,0 +1,117 @@
+@use "../../../../../base/icon_fonts" as *;
+@use "../../../../../base/tabs";
+@use "../../../variables/colors" as *;
+@use "../../../variables/sizes" as *;
+@use "../../../mixins" as *;
+@use "../../../../scrollable";
+@use "../../../../badge";
+
+.dx-tabs-styling-mode-secondary {
+  .dx-tab {
+    border-radius: var(--dx-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(var(--dx-tabs-tab-selector-hovered));
+      }
+
+      &.dx-state-active .dx-tab-content {
+        @include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-active));
+      }
+
+      &.dx-tab-selected {
+        .dx-tab-content {
+          @include dx-tabs-indicator-background(var(--dx-tabs-tab-basic-selector-selected));
+        }
+
+        &.dx-state-focused .dx-tab-content {
+          @include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-selected-focused));
+        }
+
+        &.dx-state-hover .dx-tab-content {
+          @include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-selected-hovered));
+        }
+
+        &.dx-state-active .dx-tab-content {
+          @include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-selected-active));
+        }
+
+        &.dx-state-disabled .dx-tab-content {
+          @include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-disabled));
+        }
+      }
+    }
+
+    &.dx-state-disabled .dx-tab.dx-tab-selected .dx-tab-content {
+      @include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-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(var(--dx-tabs-tab-selector-hovered));
+      }
+
+      &.dx-state-active {
+        @include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-active));
+      }
+    }
+
+    .dx-tab-selected {
+      @include dx-tabs-indicator-background(var(--dx-tabs-tab-basic-selector-selected));
+
+      &.dx-state-focused {
+        @include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-selected-focused));
+      }
+
+      &.dx-state-hover {
+        @include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-selected-hovered));
+      }
+
+      &.dx-state-active {
+        @include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-selected-active));
+      }
+
+      &.dx-state-disabled {
+        @include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-disabled));
+      }
+    }
+
+    &.dx-state-disabled .dx-tab-selected .dx-tab-content {
+      @include dx-tabs-indicator-background(var(--dx-tabs-tab-selector-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..83064a799f81
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/tabs/_index.scss
@@ -0,0 +1,16 @@
+@use "../../../../base/icon_fonts" as *;
+@use "../../../../base/tabs";
+@use "../../variables/colors" as *;
+@use "../../variables/sizes" as *;
+@use "../../mixins" as *;
+@use "../../../scrollable";
+@use "../../../badge";
+
+.dx-tabs {
+  padding: 0;
+  background-color: var(--dx-tabs-tab-bg);
+
+  .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..bd14670bf4ef
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/mixins/_index.scss
@@ -0,0 +1,83 @@
+@use "../variables/sizes" as *;
+
+@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: var(--dx-tabs-indicator-primary-length);
+      height: var(--dx-tabs-indicator-primary-thickness);
+    } @else if $position == right {
+      top: 0;
+      right: 0;
+      bottom: 0;
+      height: var(--dx-tabs-indicator-primary-length);
+      width: var(--dx-tabs-indicator-primary-thickness);
+    } @else if $position == bottom {
+      right: 0;
+      bottom: 0;
+      left: 0;
+      width: var(--dx-tabs-indicator-primary-length);
+      height: var(--dx-tabs-indicator-primary-thickness);
+    } @else if $position == left {
+      top: 0;
+      bottom: 0;
+      left: 0;
+      height: var(--dx-tabs-indicator-primary-length);
+      width: var(--dx-tabs-indicator-primary-thickness);
+    }
+  }
+}
+
+@mixin dx-tabs-indicator-secondary {
+  @include dx-tabs-indicator();
+
+  &::after {
+    border-radius: var(--dx-tabs-indicator-secondary-border-radius);
+  }
+}
+
+@mixin dx-tabs-horizontal-indicator-secondary($position) {
+  &::after {
+    right: 0;
+    left: 0;
+    width: var(--dx-tabs-indicator-secondary-length);
+    height: var(--dx-tabs-indicator-secondary-thickness);
+
+    @if $position == top {
+      top: calc(-1 * var(--dx-tabs-item-padding-block));
+    } @else if $position == bottom {
+      bottom: calc(-1 * var(--dx-tabs-item-padding-block));
+    }
+  }
+}
+
+@mixin dx-tabs-vertical-indicator-secondary($position) {
+  &::after {
+    top: var(--dx-tabs-item-padding-block);
+    width: var(--dx-tabs-indicator-secondary-thickness);
+    height: calc(var(--dx-tabs-indicator-secondary-length) - 2 * var(--dx-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..889d20a9128e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/variables/_colors.scss
@@ -0,0 +1,33 @@
+@use "../../../../_design-system/variables/ds" as ds;
+
+$tabs-tab-content: ds.$color-content !default;
+
+$tabs-tab-content-selected: ds.$color-content !default;
+
+$tabs-tab-content-disabled: ds.$color-content-disabled !default;
+
+$tabs-tab-basic-selector-selected: ds.$color-border-primary-shared !default;
+$tabs-tab-selector-selected-active: ds.$color-border-primary-shared-active !default;
+$tabs-tab-selector-selected-hovered: ds.$color-border-primary-shared-hovered !default;
+$tabs-tab-selector-selected-focused: ds.$color-border-primary-shared !default;
+$tabs-tab-selector-active: ds.$color-border-active !default;
+$tabs-tab-selector-hovered: ds.$color-border-hovered !default;
+
+$tabs-tab-selector-disabled: ds.$color-content-disabled !default;
+
+$tabs-tab-bg: transparent !default;
+
+$tabs-tab-icon-content-selected: ds.$color-content !default;
+
+$tabs-tab-icon-content-disabled: ds.$color-content-disabled !default;
+
+$tabs-tab-bg-hovered: transparent !default;
+
+$tabs-tab-bg-focused: ds.$color-bg-hovered !default;
+$tabs-tab-primary-bg-hovered: ds.$color-bg-hovered !default;
+$tabs-tab-primary-bg-focused: ds.$color-bg-hovered !default;
+$tabs-tab-primary-bg-active: ds.$color-bg-active !default;
+
+$tabs-tab-bg-active: ds.$color-bg !default;
+$tabs-nav-button-bg: transparent !default;
+$tabs-nav-button-content-disabled: ds.$color-content-disabled !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..3a7df702abda
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/variables/_sizes.scss
@@ -0,0 +1,52 @@
+@use "../../sizes" as *;
+@use "../../../../_design-system/variables/ds" as ds;
+
+// 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-block: null !default;
+$tabs-item-padding-inline: null !default;
+$tabs-tab-height: auto !default;
+
+$tabs-tab-basic-font-weight: ds.$font-weight-base-default !default;
+$tabs-tab-accent-font-weight: ds.$font-weight-base-strong !default;
+$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: 0 ds.$spacing-40 !default;
+
+$tabs-tab-vertical-nav-button-content-padding: ds.$spacing-40 0 !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-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.$spacing-200 !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-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.$spacing-160 !default;
+  $tabs-badge-min-size: ds.$spacing-160 !default;
+}
+
+$tabs-item-padding: $tabs-item-padding-block $tabs-item-padding-inline !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..ce7918c6cc9d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tagBox/_colors.scss
@@ -0,0 +1,16 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$tag-box-tag-content: ds.$color-content !default;
+
+$tag-box-tag-bg: ds.$color-bg-low !default;
+$tag-box-tag-bg-hovered: ds.$color-bg-hovered !default;
+
+$tag-box-tag-content-active: ds.$color-content !default;
+
+$tag-box-tag-remove-button-content: ds.$color-content-subtle !default;
+$tag-box-tag-border-focused: ds.$color-border-primary !default;
+$tag-box-select-all-line: ds.$color-border !default;
+$tag-box-tag-content-disabled: ds.$color-content-disabled !default;
+$tag-box-tag-bg-disabled: ds.$color-bg-disabled !default;
+
+$tag-box-tag-border: ds.$color-border-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..96d20f4996b1
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tagBox/_index.scss
@@ -0,0 +1,181 @@
+@use "sass:math";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../textEditor" as *;
+@use "../../base/tagBox";
+
+.dx-tagbox {
+  .dx-tag-container {
+    height: 100%;
+    padding-top: var(--dx-tag-box-tag-container-padding-block);
+    padding-bottom: var(--dx-tag-box-tag-container-padding-block);
+    gap: var(--dx-tag-box-tag-container-gap);
+
+    .dx-texteditor-input {
+      padding: 0;
+      min-height: 0;
+    }
+  }
+
+  &.dx-editor-underlined {
+    .dx-tag-container {
+      padding-top: calc(var(--dx-tag-box-tag-container-padding-block) + 1px); // dx-px-nudge: +1px over the tag container padding
+      padding-bottom: calc(var(--dx-tag-box-tag-container-padding-block) + 1px); // dx-px-nudge: +1px over the tag container padding
+    }
+  }
+
+  &.dx-editor-outlined,
+  &.dx-editor-filled,
+  &.dx-editor-underlined {
+    .dx-texteditor-input {
+      height: var(--dx-tag-box-tag-size);
+    }
+  }
+
+  &.dx-editor-outlined,
+  &.dx-editor-filled {
+    .dx-tag-container {
+      padding-inline-start: var(--dx-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: var(--dx-tag-box-filled-with-label-padding-block-start);
+        padding-bottom: var(--dx-tag-box-filled-with-label-padding-block-end);
+      }
+    }
+
+    &.dx-editor-underlined {
+      .dx-tag-container,
+      .dx-placeholder::before {
+        padding-top: calc(var(--dx-tag-box-filled-with-label-padding-block-start) + 1px); // dx-px-nudge: +1px over the filled label padding
+        padding-bottom: calc(var(--dx-tag-box-filled-with-label-padding-block-end) + 1px); // dx-px-nudge: +1px over the filled label padding
+      }
+    }
+  }
+
+  &.dx-state-disabled,
+  .dx-state-disabled & {
+    .dx-tag-content {
+      color: var(--dx-tag-box-tag-content-disabled);
+      background-color: var(--dx-tag-box-tag-bg-disabled);
+    }
+
+    .dx-tag-remove-button {
+      &::before {
+        color: var(--dx-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: var(--dx-tag-box-tag-content-font-size);
+  line-height: var(--dx-tag-box-tag-content-line-height);
+  margin: 0;
+  padding-top: var(--dx-tag-box-tag-content-padding-block);
+  padding-bottom: var(--dx-tag-box-tag-content-padding-block);
+  padding-inline-start: var(--dx-tag-box-tag-content-padding-inline-start);
+  padding-inline-end: var(--dx-tag-box-tag-content-padding-inline-end);
+  min-width: var(--dx-tag-box-tag-content-min-width);
+  background-color: var(--dx-tag-box-tag-bg);
+  color: var(--dx-tag-box-tag-content);
+  border-radius: var(--dx-tag-box-tag-border-radius);
+  border-width: var(--dx-tag-box-tag-border-width);
+  border-style: solid;
+  border-color: var(--dx-tag-box-tag-border);
+}
+
+.dx-tag-remove-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--dx-tag-box-tag-size);
+  height: 100%;
+
+  @include dx-icon(clear);
+
+  font-size: calc(var(--dx-tag-box-tag-content-font-size) + 2px); // dx-px-nudge: +2px over the tag content font size
+
+  &::before {
+    content: "\f15f";
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--dx-tag-box-tag-remove-button-content);
+  }
+}
+
+.dx-tag {
+  &:hover {
+    .dx-tag-content {
+      background-color: var(--dx-tag-box-tag-bg-hovered);
+      color: var(--dx-tag-box-tag-content-active);
+    }
+  }
+
+  &.dx-state-focused {
+    .dx-tag-content {
+      color: var(--dx-tag-box-tag-content-active);
+      border-color: var(--dx-tag-box-tag-border-focused);
+    }
+  }
+}
+
+@mixin tagbox-editor-container-offset() {
+  inset-inline-end: var(--dx-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: var(--dx-tag-box-list-select-all-border-block-end);
+    border-bottom-color: var(--dx-tag-box-select-all-line);
+    padding-bottom: var(--dx-tag-box-select-all-padding-block-end);
+    margin-bottom: var(--dx-tag-box-select-all-margin-block-end);
+
+    &::after {
+      background-color: transparent;
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tagBox/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tagBox/_public.scss
new file mode 100644
index 000000000000..76dff7484c60
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tagBox/_public.scss
@@ -0,0 +1,33 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-tag-box-filled-with-label-padding-block-end: #{$tag-box-filled-with-label-padding-block-end};
+  --dx-tag-box-filled-with-label-padding-block-start: #{$tag-box-filled-with-label-padding-block-start};
+  --dx-tag-box-list-select-all-border-block-end: #{$tag-box-list-select-all-border-block-end};
+  --dx-tag-box-select-all-line: #{$tag-box-select-all-line};
+  --dx-tag-box-select-all-margin-block-end: #{$tag-box-select-all-margin-block-end};
+  --dx-tag-box-select-all-padding-block-end: #{$tag-box-select-all-padding-block-end};
+  --dx-tag-box-tag-bg: #{$tag-box-tag-bg};
+  --dx-tag-box-tag-bg-disabled: #{$tag-box-tag-bg-disabled};
+  --dx-tag-box-tag-bg-hovered: #{$tag-box-tag-bg-hovered};
+  --dx-tag-box-tag-border: #{$tag-box-tag-border};
+  --dx-tag-box-tag-border-focused: #{$tag-box-tag-border-focused};
+  --dx-tag-box-tag-border-radius: #{$tag-box-tag-border-radius};
+  --dx-tag-box-tag-border-width: #{$tag-box-tag-border-width};
+  --dx-tag-box-tag-container-gap: #{$tag-box-tag-container-gap};
+  --dx-tag-box-tag-container-padding-block: #{$tag-box-tag-container-padding-block};
+  --dx-tag-box-tag-container-padding-inline-start: #{$tag-box-tag-container-padding-inline-start};
+  --dx-tag-box-tag-content: #{$tag-box-tag-content};
+  --dx-tag-box-tag-content-active: #{$tag-box-tag-content-active};
+  --dx-tag-box-tag-content-disabled: #{$tag-box-tag-content-disabled};
+  --dx-tag-box-tag-content-font-size: #{$tag-box-tag-content-font-size};
+  --dx-tag-box-tag-content-line-height: #{$tag-box-tag-content-line-height};
+  --dx-tag-box-tag-content-min-width: #{$tag-box-tag-content-min-width};
+  --dx-tag-box-tag-content-padding-block: #{$tag-box-tag-content-padding-block};
+  --dx-tag-box-tag-content-padding-inline-end: #{$tag-box-tag-content-padding-inline-end};
+  --dx-tag-box-tag-content-padding-inline-start: #{$tag-box-tag-content-padding-inline-start};
+  --dx-tag-box-tag-remove-button-content: #{$tag-box-tag-remove-button-content};
+  --dx-tag-box-tag-size: #{$tag-box-tag-size};
+}
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..77e581f178ab
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tagBox/_sizes.scss
@@ -0,0 +1,48 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$tag-box-tag-content-padding-inline-start: null !default;
+$tag-box-tag-content-padding-inline-end: ds.$spacing-200 !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-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-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..e69de29bb2d1
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..9dec3263ecc6
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/textArea/_index.scss
@@ -0,0 +1,29 @@
+@use "sass:math";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/textArea";
+@use "../../base/textArea/mixins" as *;
+@use "../textEditor/sizes" as textEditorSizes;
+@include dx-textarea(
+  var(--dx-text-area-input-container-margin),
+  var(--dx-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); // dx-px-nudge: +1px over the underlined input padding
+      padding-bottom: calc(#{textEditorSizes.$text-editor-input-underlined-padding-block-end} + 1px); // dx-px-nudge: +1px over the underlined input padding
+    }
+
+    &.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/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/textArea/_public.scss
new file mode 100644
index 000000000000..39f1c0069237
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/textArea/_public.scss
@@ -0,0 +1,7 @@
+// GENERATED by tools/naming/publish.mjs
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-text-area-content-line-height: #{$text-area-content-line-height};
+  --dx-text-area-input-container-margin: #{$text-area-input-container-margin};
+}
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..908241f72346
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/textArea/_sizes.scss
@@ -0,0 +1,13 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$text-area-content-line-height: null !default;
+$text-area-input-container-margin: ds.$spacing-20 !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..09602156c350
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/textBox/_colors.scss
@@ -0,0 +1,4 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
+$text-box-content-disabled: ds.$color-content-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..b2c6a2deae88
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/textBox/_index.scss
@@ -0,0 +1,66 @@
+@use "sass:math";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../textEditor/sizes" as textEditorSizes;
+@use "../../base/textBox";
+@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: var(--dx-text-editor-placeholder);
+  }
+
+  &.dx-editor-underlined {
+    .dx-icon-search {
+      @include dx-texteditor-search-icon(var(--dx-text-box-search-icon-size));
+    }
+
+    .dx-texteditor-input,
+    .dx-placeholder::before {
+      padding-inline-start: var(--dx-text-box-search-icon-size);
+    }
+  }
+
+  &.dx-editor-filled,
+  &.dx-editor-outlined {
+    .dx-icon-search {
+      @include dx-texteditor-search-icon(var(--dx-text-box-search-icon-size));
+    }
+
+    .dx-texteditor-input,
+    .dx-placeholder::before {
+      padding-inline-start: var(--dx-text-box-search-icon-size);
+    }
+  }
+
+  &.dx-state-disabled,
+  .dx-state-disabled & {
+    .dx-icon-search {
+      color: var(--dx-text-box-content-disabled);
+    }
+  }
+}
+
+.dx-searchbar {
+  padding-bottom: var(--dx-text-box-search-bar-padding-block-end);
+
+  .dx-texteditor {
+    margin: 0;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/textBox/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/textBox/_public.scss
new file mode 100644
index 000000000000..3fd00f44c2de
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/textBox/_public.scss
@@ -0,0 +1,9 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-text-box-content-disabled: #{$text-box-content-disabled};
+  --dx-text-box-search-bar-padding-block-end: #{$text-box-search-bar-padding-block-end};
+  --dx-text-box-search-icon-size: #{$text-box-search-icon-size};
+}
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..b92a6fe1b346
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/textBox/_sizes.scss
@@ -0,0 +1,15 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$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..87e579ffa022
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_colors.scss
@@ -0,0 +1,44 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$text-editor-content: ds.$color-content !default;
+
+$text-editor-placeholder: ds.$color-content-subtle !default;
+
+$text-editor-placeholder-disabled: ds.$color-content-disabled !default;
+
+$text-editor-outlined-bg: ds.$color-bg !default;
+
+$text-editor-filled-bg: ds.$color-bg-low !default;
+
+$text-editor-underlined-bg: transparent !default;
+
+$text-editor-border: ds.$color-border !default;
+$text-editor-border-hovered: ds.$color-border-hovered !default;
+$text-editor-border-focused: ds.$color-border-active !default;
+
+$text-editor-line: ds.$color-content-subtle !default;
+$text-editor-line-hovered: ds.$color-content !default;
+$text-editor-line-focused: ds.$color-content !default;
+
+$text-editor-indicator: ds.$color-content-primary !default;
+
+$text-editor-clear-button-icon: ds.$color-content-subtle !default;
+$text-editor-invalid-border-focused: ds.$color-border-danger !default;
+$text-editor-invalid-border: ds.$color-border-danger-shared !default;
+$text-editor-border-disabled: ds.$color-border-disabled !default;
+
+$text-editor-border-read-only: ds.$color-border-disabled !default;
+$text-editor-content-disabled: ds.$color-content-disabled !default;
+
+$text-editor-label-content-focused: ds.$color-content-primary !default;
+
+:root,
+.dx-theme-mode-light,
+.dx-theme-mode-dark,
+.dx-theme-mode-inverted {
+  --dx-texteditor-color-text: #{$text-editor-content};
+  --dx-texteditor-color-label: #{$text-editor-placeholder};
+}
+
+// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
+$text-editor-invalid-content: ds.$color-content-danger !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..5938ea1f6633
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_index.scss
@@ -0,0 +1,610 @@
+@use "sass:math";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../button/sizes" as buttonSizes;
+@use "../common/mixins" as *;
+@use "../../base/textEditor" with (
+  $texteditor-clear-button-area-width: var(--dx-text-editor-clear-button-width),
+);
+@use "../../base/textEditor/mixins" as *;
+
+@mixin texteditor-outlined-styling() {
+  background-color: var(--dx-text-editor-outlined-bg);
+  border-radius: var(--dx-text-editor-input-border-radius);
+  border-width: var(--dx-text-editor-border-width);
+  border-style: solid;
+  border-color: var(--dx-text-editor-border);
+  border-bottom-color: var(--dx-text-editor-line);
+
+  &::before {
+    box-sizing: border-box;
+    content: "";
+    position: absolute;
+    left: var(--dx-text-editor-line-inset-inline-start);
+    bottom: var(--dx-text-editor-line-inset-block-end);
+    right: var(--dx-text-editor-line-inset-inline-end);
+    height: var(--dx-text-editor-input-border-radius);
+    width: calc(100% + 2 * var(--dx-text-editor-border-width));
+    border-bottom-left-radius: var(--dx-text-editor-input-border-radius);
+    border-bottom-right-radius: var(--dx-text-editor-input-border-radius);
+    border-bottom-color: var(--dx-text-editor-indicator);
+    clip-path: inset(calc(100% - 2px) 0 0); // dx-line-width: 2px focus line revealed by the clip
+    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 * var(--dx-text-editor-border-width));
+      inset: var(--dx-text-editor-label-inset);
+    }
+
+    .dx-datebox {
+      border: none;
+    }
+  }
+
+  &.dx-state-disabled,
+  .dx-state-disabled & {
+    background-color: transparent;
+    border-color: var(--dx-text-editor-border-disabled);
+  }
+
+  &.dx-state-readonly {
+    background-color: transparent;
+    border-color: var(--dx-text-editor-border-read-only);
+  }
+
+  &.dx-invalid {
+    border-color: var(--dx-text-editor-invalid-border);
+
+    &.dx-state-hover,
+    &.dx-state-focused {
+      border-color: var(--dx-text-editor-invalid-border-focused);
+    }
+
+    &::before {
+      border-color: var(--dx-text-editor-invalid-border);
+    }
+  }
+
+  &.dx-state-hover {
+    background-color: var(--dx-text-editor-outlined-bg-hovered);
+    border-left-color: var(--dx-text-editor-border-hovered);
+    border-right-color: var(--dx-text-editor-border-hovered);
+    border-top-color: var(--dx-text-editor-border-hovered);
+    border-bottom-color: var(--dx-text-editor-line-hovered);
+  }
+
+  &.dx-state-focused,
+  &.dx-state-active {
+    background-color: var(--dx-text-editor-outlined-bg-focused);
+    border-left-color: var(--dx-text-editor-border-focused);
+    border-right-color: var(--dx-text-editor-border-focused);
+    border-top-color: var(--dx-text-editor-border-focused);
+    border-bottom-color: var(--dx-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: var(--dx-text-editor-filled-bg);
+  border-radius: var(--dx-text-editor-input-border-radius);
+  border-width: var(--dx-text-editor-border-width);
+  border-style: solid;
+  border-color: transparent;
+
+  .dx-placeholder::before,
+  .dx-texteditor-input {
+    padding-top: var(--dx-text-editor-input-filled-padding-block-start);
+    padding-bottom: var(--dx-text-editor-input-filled-padding-block-end);
+  }
+
+  &::before {
+    left: var(--dx-text-editor-line-inset-inline-start);
+    bottom: var(--dx-text-editor-line-inset-block-end);
+    right: var(--dx-text-editor-line-inset-inline-end);
+    height: var(--dx-text-editor-input-border-radius);
+    width: calc(100% + 2 * var(--dx-text-editor-border-width));
+    border-bottom-left-radius: var(--dx-text-editor-input-border-radius);
+    border-bottom-right-radius: var(--dx-text-editor-input-border-radius);
+    border-bottom-color: var(--dx-text-editor-indicator);
+    clip-path: inset(calc(100% - 2px) 0 0); // dx-line-width: 2px focus line revealed by the clip
+  }
+
+  &.dx-state-hover {
+    background-color: var(--dx-text-editor-filled-bg-hovered);
+  }
+
+  &.dx-state-focused,
+  &.dx-state-active {
+    background-color: var(--dx-text-editor-filled-bg-focused);
+  }
+
+  &.dx-state-disabled,
+  .dx-state-disabled & {
+    background-color: transparent;
+    border-color: var(--dx-text-editor-border-disabled);
+  }
+
+  &.dx-state-readonly {
+    background-color: transparent;
+    border-color: var(--dx-text-editor-border-read-only);
+  }
+
+  &.dx-invalid {
+    border-color: var(--dx-text-editor-invalid-border);
+
+    &.dx-state-hover,
+    &.dx-state-focused {
+      border-color: var(--dx-text-editor-invalid-border-focused);
+    }
+  }
+}
+
+@mixin texteditor-underlined-styling() {
+  background-color: var(--dx-text-editor-underlined-bg);
+  border-radius: 0;
+
+  &::after {
+    border-bottom-width: var(--dx-text-editor-line-border-block-end-width-focused);
+    border-bottom-style: solid;
+    border-bottom-color: var(--dx-text-editor-line);
+  }
+
+  &.dx-state-hover {
+    background-color: var(--dx-text-editor-underlined-bg-hovered);
+
+    &::after {
+      border-bottom-color: var(--dx-text-editor-line-hovered);
+    }
+  }
+
+  &.dx-state-focused,
+  &.dx-state-active {
+    background-color: var(--dx-text-editor-underlined-bg-focused);
+  }
+
+  .dx-texteditor-input,
+  .dx-lookup-field {
+    min-height: var(--dx-text-editor-input-min-height);
+  }
+
+  .dx-texteditor-input,
+  .dx-placeholder::before {
+    padding-top: var(--dx-text-editor-input-underlined-padding-block-start);
+    padding-bottom: var(--dx-text-editor-input-underlined-padding-block-end);
+    padding-left: var(--dx-text-editor-input-underlined-padding-inline);
+    padding-right: var(--dx-text-editor-input-underlined-padding-inline);
+  }
+
+  &.dx-state-disabled,
+  .dx-state-disabled &,
+  &.dx-state-readonly {
+    &::after {
+      border-bottom-color: var(--dx-text-editor-border-disabled);
+    }
+  }
+
+  &.dx-invalid {
+    &::after {
+      border-bottom-color: var(--dx-text-editor-invalid-border);
+    }
+
+    &.dx-state-hover {
+      &::after {
+        border-bottom-color: var(--dx-text-editor-invalid-border-focused);
+      }
+    }
+  }
+}
+
+@mixin texteditor-input-padding-filled() {
+  .dx-texteditor-input {
+    padding-inline-end: calc(var(--dx-text-editor-invalid-badge-size) + var(--dx-text-editor-input-filled-padding-inline));
+  }
+}
+
+@mixin texteditor-validation-icon-offset() {
+  inset-inline-end: var(--dx-invalid-badge-offset);
+}
+
+@mixin texteditor-validation-icon-offset-filled() {
+  inset-inline-end: var(--dx-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(var(--dx-text-editor-invalid-badge-size) + var(--dx-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(var(--dx-text-editor-invalid-badge-size) + var(--dx-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: var(--dx-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: var(--dx-text-editor-label-content-focused);
+      font-size: var(--dx-text-editor-label-font-size);
+    }
+
+    &.dx-invalid {
+      .dx-texteditor-label {
+        color: var(--dx-text-editor-invalid-content);
+      }
+    }
+  }
+
+  &.dx-texteditor-label-outside {
+    .dx-texteditor-label {
+      color: var(--dx-text-editor-content);
+    }
+
+    &.dx-invalid {
+      .dx-texteditor-label {
+        color: var(--dx-text-editor-invalid-content);
+      }
+    }
+  }
+
+  &.dx-state-focused,
+  &.dx-state-active {
+    &::before {
+      border-bottom-width: var(--dx-text-editor-line-border-block-end-width-active);
+      border-bottom-style: solid;
+      border-bottom-color: var(--dx-text-editor-indicator);
+      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,
+  .dx-state-disabled & {
+    background-color: transparent;
+
+    .dx-texteditor-label,
+    .dx-placeholder::before,
+    .dx-texteditor-input,
+    .dx-lookup-field {
+      color: var(--dx-text-editor-content-disabled);
+    }
+
+    .dx-lookup-arrow,
+    .dx-dropdowneditor-icon {
+      color: var(--dx-text-editor-content-disabled);
+    }
+  }
+
+  &.dx-state-readonly {
+    .dx-lookup-arrow {
+      display: none;
+    }
+  }
+
+  .dx-texteditor-input {
+    min-height: calc(var(--dx-text-editor-input-min-height) - 2px); // dx-px-nudge: -2px off the input min-height
+  }
+
+  @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: var(--dx-text-editor-icon-container-size);
+    min-width: var(--dx-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: var(--dx-text-editor-clear-button-icon);
+  }
+
+  &.dx-state-disabled,
+  .dx-state-disabled & {
+    .dx-icon-clear {
+      color: var(--dx-text-editor-content-disabled);
+    }
+  }
+
+  &:not(.dx-texteditor-empty) {
+    @include validation-icon-position();
+    @include pending-indicator-position();
+  }
+}
+
+/* B231111 */
+.dx-placeholder {
+  color: var(--dx-text-editor-placeholder);
+  font-size: var(--dx-text-editor-font-size);
+  line-height: normal;
+}
+
+.dx-state-disabled .dx-placeholder,
+.dx-state-disabled .dx-placeholder::before {
+  color: var(--dx-text-editor-placeholder-disabled);
+}
+
+.dx-texteditor-input {
+  margin: 0;
+  background-color: transparent;
+  color: var(--dx-text-editor-content);
+  font-size: var(--dx-text-editor-font-size);
+  line-height: var(--dx-text-editor-line-height);
+}
+
+.dx-invalid.dx-texteditor {
+  &.dx-state-hover {
+    &::after {
+      border-bottom-color: var(--dx-text-editor-invalid-border);
+    }
+  }
+
+  &.dx-state-focused,
+  &.dx-state-active {
+    &::before {
+      border-bottom: var(--dx-text-editor-line-border-block-end-active);
+      border-bottom-color: var(--dx-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: var(--dx-text-editor-label-font-size);
+  color: var(--dx-text-editor-label-content);
+  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: var(--dx-text-editor-label-margin-block-end);
+    }
+  }
+
+  .dx-invalid & {
+    color: var(--dx-text-editor-invalid-content);
+  }
+}
+
+@include dx-editor-outlined(
+  var(--dx-text-editor-input-border-radius),
+  $text-editor-label-font-size,
+  $global-border-width,
+  $global-border-width,
+  solid,
+  var(--dx-text-editor-label-height),
+  var(--dx-text-editor-label-height),
+  calc((1px + var(--dx-text-editor-font-size)) / 2), // dx-px-nudge: +1px inside the label offset
+  var(--dx-text-editor-label-outside-offset),
+  0.5px, // dx-px-nudge: 0.5px label backdrop offset
+  var(--dx-text-editor-input-filled-padding-inline),
+  var(--dx-text-editor-input-filled-padding-inline),
+  var(--dx-text-editor-outlined-bg),
+  1px solid transparent, // dx-line-width: 1px, the outlined editor border
+  var(--dx-text-editor-border),
+  var(--dx-text-editor-line),
+  var(--dx-text-editor-border-disabled),
+  var(--dx-text-editor-border-read-only),
+  var(--dx-text-editor-border-hovered),
+  var(--dx-text-editor-line-hovered),
+  var(--dx-text-editor-border-focused),
+  var(--dx-text-editor-line-focused),
+  var(--dx-text-editor-invalid-border),
+  var(--dx-text-editor-invalid-border-focused),
+  $text-editor-label-transition,
+  var(--dx-text-editor-font-size),
+  var(--dx-text-editor-input-filled-padding-block-start),
+  1px, // dx-px-nudge: 1px label margin-top difference
+  var(--dx-text-editor-font-size),
+  var(--dx-text-editor-label-outside-height),
+  $label-padding-inline: var(--dx-text-editor-label-padding-inline),
+  $label-border-radius: var(--dx-text-editor-label-border-radius),
+  $label-backdrop-height: var(--dx-text-editor-label-backdrop-height),
+);
+@include dx-editor-filled(
+  $text-editor-label-transition,
+  var(--dx-text-editor-label-font-size),
+  var(--dx-text-editor-label-font-size),
+  var(--dx-text-editor-label-font-size),
+  var(--dx-text-editor-label-offset),
+  var(--dx-text-editor-label-outside-offset),
+  var(--dx-text-editor-font-size),
+  var(--dx-text-editor-font-size),
+  var(--dx-text-editor-font-size),
+  var(--dx-text-editor-input-filled-padding-inline),
+  var(--dx-text-editor-input-filled-with-label-padding-block-start),
+  var(--dx-text-editor-input-filled-with-label-padding-block-end),
+  var(--dx-text-editor-font-size),
+  var(--dx-text-editor-label-outside-height),
+);
+@include dx-editor-underlined(
+  $text-editor-label-transition,
+  var(--dx-text-editor-label-font-size),
+  var(--dx-text-editor-label-font-size),
+  var(--dx-text-editor-label-font-size),
+  var(--dx-text-editor-label-offset),
+  var(--dx-text-editor-label-outside-offset),
+  var(--dx-text-editor-font-size),
+  var(--dx-text-editor-font-size),
+  var(--dx-text-editor-font-size),
+  var(--dx-text-editor-input-underlined-with-label-padding-block-start),
+  var(--dx-text-editor-input-underlined-with-label-padding-block-end),
+  var(--dx-text-editor-font-size),
+  var(--dx-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(
+  var(--dx-text-editor-button-underlined-height),
+  var(--dx-text-editor-custom-button-margin),
+  var(--dx-text-editor-custom-button-margin),
+  0,
+  var(--dx-text-editor-spin-button-margin-inline-end),
+  buttonSizes.$button-padding-block,
+  $button-margin-block-start: var(--dx-text-editor-button-margin-block-start),
+  $button-margin-block-end: var(--dx-text-editor-button-margin-block-end),
+  $button-icon-margin-block-start: var(--dx-text-editor-button-icon-margin-block-start),
+  $button-icon-margin-block-start-with-text: var(--dx-text-editor-button-icon-with-text-margin-block-start),
+  $button-icononly-padding: var(--dx-text-editor-button-icon-only-padding),
+);
+
+.dx-texteditor.dx-invalid.dx-state-disabled,
+.dx-state-disabled .dx-texteditor.dx-invalid {
+  .dx-label,
+  .dx-label span,
+  .dx-texteditor-label {
+    color: var(--dx-text-editor-content-disabled);
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_public-links.scss b/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_public-links.scss
new file mode 100644
index 000000000000..a11653f6d0ea
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_public-links.scss
@@ -0,0 +1,9 @@
+@mixin publish {
+  --dx-text-editor-filled-bg-focused: var(--dx-text-editor-filled-bg);
+  --dx-text-editor-filled-bg-hovered: var(--dx-text-editor-filled-bg);
+  --dx-text-editor-label-content: var(--dx-text-editor-placeholder);
+  --dx-text-editor-outlined-bg-focused: var(--dx-text-editor-outlined-bg);
+  --dx-text-editor-outlined-bg-hovered: var(--dx-text-editor-outlined-bg);
+  --dx-text-editor-underlined-bg-focused: var(--dx-text-editor-underlined-bg);
+  --dx-text-editor-underlined-bg-hovered: var(--dx-text-editor-underlined-bg);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_public.scss
new file mode 100644
index 000000000000..091fcd1d5732
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_public.scss
@@ -0,0 +1,73 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+@use "public-links" as links;
+
+@mixin publish {
+  --dx-text-editor-border: #{$text-editor-border};
+  --dx-text-editor-border-disabled: #{$text-editor-border-disabled};
+  --dx-text-editor-border-focused: #{$text-editor-border-focused};
+  --dx-text-editor-border-hovered: #{$text-editor-border-hovered};
+  --dx-text-editor-border-read-only: #{$text-editor-border-read-only};
+  --dx-text-editor-border-width: #{$text-editor-border-width};
+  --dx-text-editor-button-filled-inset-inline-end: #{$text-editor-button-filled-inset-inline-end};
+  --dx-text-editor-button-icon-margin-block-start: #{$text-editor-button-icon-margin-block-start};
+  --dx-text-editor-button-icon-only-padding: #{$text-editor-button-icon-only-padding};
+  --dx-text-editor-button-icon-with-text-margin-block-start: #{$text-editor-button-icon-with-text-margin-block-start};
+  --dx-text-editor-button-margin-block-end: #{$text-editor-button-margin-block-end};
+  --dx-text-editor-button-margin-block-start: #{$text-editor-button-margin-block-start};
+  --dx-text-editor-button-underlined-height: #{$text-editor-button-underlined-height};
+  --dx-text-editor-clear-button-icon: #{$text-editor-clear-button-icon};
+  --dx-text-editor-clear-button-width: #{$text-editor-clear-button-width};
+  --dx-text-editor-content: #{$text-editor-content};
+  --dx-text-editor-content-disabled: #{$text-editor-content-disabled};
+  --dx-text-editor-custom-button-margin: #{$text-editor-custom-button-margin};
+  --dx-text-editor-filled-bg: #{$text-editor-filled-bg};
+  --dx-text-editor-font-size: #{$text-editor-font-size};
+  --dx-text-editor-icon-container-size: #{$text-editor-icon-container-size};
+  --dx-text-editor-indicator: #{$text-editor-indicator};
+  --dx-text-editor-input-border-radius: #{$text-editor-input-border-radius};
+  --dx-text-editor-input-filled-padding-block-end: #{$text-editor-input-filled-padding-block-end};
+  --dx-text-editor-input-filled-padding-block-start: #{$text-editor-input-filled-padding-block-start};
+  --dx-text-editor-input-filled-padding-inline: #{$text-editor-input-filled-padding-inline};
+  --dx-text-editor-input-filled-with-label-padding-block-end: #{$text-editor-input-filled-with-label-padding-block-end};
+  --dx-text-editor-input-filled-with-label-padding-block-start: #{$text-editor-input-filled-with-label-padding-block-start};
+  --dx-text-editor-input-min-height: #{$text-editor-input-min-height};
+  --dx-text-editor-input-underlined-padding-block-end: #{$text-editor-input-underlined-padding-block-end};
+  --dx-text-editor-input-underlined-padding-block-start: #{$text-editor-input-underlined-padding-block-start};
+  --dx-text-editor-input-underlined-padding-inline: #{$text-editor-input-underlined-padding-inline};
+  --dx-text-editor-input-underlined-with-label-padding-block-end: #{$text-editor-input-underlined-with-label-padding-block-end};
+  --dx-text-editor-input-underlined-with-label-padding-block-start: #{$text-editor-input-underlined-with-label-padding-block-start};
+  --dx-text-editor-invalid-badge-size: #{$text-editor-invalid-badge-size};
+  --dx-text-editor-invalid-border: #{$text-editor-invalid-border};
+  --dx-text-editor-invalid-border-focused: #{$text-editor-invalid-border-focused};
+  --dx-text-editor-invalid-content: #{$text-editor-invalid-content};
+  --dx-text-editor-label-backdrop-height: #{$text-editor-label-backdrop-height};
+  --dx-text-editor-label-border-radius: #{$text-editor-label-border-radius};
+  --dx-text-editor-label-content-focused: #{$text-editor-label-content-focused};
+  --dx-text-editor-label-font-size: #{$text-editor-label-font-size};
+  --dx-text-editor-label-height: #{$text-editor-label-height};
+  --dx-text-editor-label-inset: #{$text-editor-label-inset};
+  --dx-text-editor-label-margin-block-end: #{$text-editor-label-margin-block-end};
+  --dx-text-editor-label-offset: #{$text-editor-label-offset};
+  --dx-text-editor-label-outside-height: #{$text-editor-label-outside-height};
+  --dx-text-editor-label-outside-offset: #{$text-editor-label-outside-offset};
+  --dx-text-editor-label-padding-inline: #{$text-editor-label-padding-inline};
+  --dx-text-editor-line: #{$text-editor-line};
+  --dx-text-editor-line-border-block-end-active: #{$text-editor-line-border-block-end-active};
+  --dx-text-editor-line-border-block-end-width-active: #{$text-editor-line-border-block-end-width-active};
+  --dx-text-editor-line-border-block-end-width-focused: #{$text-editor-line-border-block-end-width-focused};
+  --dx-text-editor-line-focused: #{$text-editor-line-focused};
+  --dx-text-editor-line-height: #{$text-editor-line-height};
+  --dx-text-editor-line-hovered: #{$text-editor-line-hovered};
+  --dx-text-editor-line-inset-block-end: #{$text-editor-line-inset-block-end};
+  --dx-text-editor-line-inset-inline-end: #{$text-editor-line-inset-inline-end};
+  --dx-text-editor-line-inset-inline-start: #{$text-editor-line-inset-inline-start};
+  --dx-text-editor-outlined-bg: #{$text-editor-outlined-bg};
+  --dx-text-editor-placeholder: #{$text-editor-placeholder};
+  --dx-text-editor-placeholder-disabled: #{$text-editor-placeholder-disabled};
+  --dx-text-editor-spin-button-margin-inline-end: #{$text-editor-spin-button-margin-inline-end};
+  --dx-text-editor-underlined-bg: #{$text-editor-underlined-bg};
+
+  @include links.publish();
+}
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..c5e54784ebdf
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_sizes.scss
@@ -0,0 +1,114 @@
+@use "sass:math";
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+@use "../common/sizes" as *;
+
+// 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}) !default;
+
+// 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 !default;
+
+// 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: ds.$spacing-minus-10 !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: ds.$spacing-220 !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-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;
+}
+
+@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-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-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-margin-inline-end: 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;
+
+// Base-layer sizing injected with design tokens (wave B13)
+$text-editor-label-padding-inline: ds.$spacing-20 !default;
+$text-editor-label-border-radius: ds.$border-radius-10 !default;
+$text-editor-label-backdrop-height: ds.$spacing-30 !default;
+$text-editor-button-margin-block-start: ds.$spacing-10 !default;
+$text-editor-button-margin-block-end: ds.$spacing-30 !default;
+$text-editor-button-icon-margin-block-start: ds.$spacing-10 !default;
+$text-editor-button-icon-with-text-margin-block-start: ds.$spacing-30 !default;
+$text-editor-button-icon-only-padding: ds.$spacing-20 !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..3dfe5ea28ec9
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tileView/_colors.scss
@@ -0,0 +1,10 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$tile-view-content: ds.$color-content !default;
+$tile-view-bg: ds.$color-bg !default;
+$tile-view-border: ds.$color-border-subtle !default;
+
+$tile-view-border-hovered: ds.$color-border-primary-shared !default;
+$tile-view-bg-active: ds.$color-bg-alpha-active !default;
+
+$tile-view-content-disabled: ds.$color-content-disabled !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..42897183bb1e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tileView/_index.scss
@@ -0,0 +1,35 @@
+@use "../mixins" as *;
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/tileView" with (
+  $tileview-wrapper-height: var(--dx-tile-view-wrapper-height),
+);
+
+.dx-tile {
+  color: var(--dx-tile-view-content);
+  background-color: var(--dx-tile-view-bg);
+  border: var(--dx-tile-view-tile-border);
+  border-color: var(--dx-tile-view-border);
+  text-align: left;
+
+  &.dx-state-disabled {
+    color: var(--dx-tile-view-content-disabled);
+  }
+
+  &.dx-state-focused,
+  &.dx-state-hover {
+    border-color: var(--dx-tile-view-border-hovered);
+  }
+
+  &.dx-state-active {
+    background-color: var(--dx-tile-view-bg-active);
+    color: var(--dx-tile-view-content-active);
+    border-color: transparent;
+  }
+}
+
+@include when-disabled(".dx-tileview") {
+  .dx-tile-content {
+    color: var(--dx-tile-view-content-disabled);
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tileView/_public-links.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tileView/_public-links.scss
new file mode 100644
index 000000000000..314f8e2a33f9
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tileView/_public-links.scss
@@ -0,0 +1,3 @@
+@mixin publish {
+  --dx-tile-view-content-active: var(--dx-tile-view-content);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tileView/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tileView/_public.scss
new file mode 100644
index 000000000000..d473e1631fe4
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tileView/_public.scss
@@ -0,0 +1,17 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+@use "public-links" as links;
+
+@mixin publish {
+  --dx-tile-view-bg: #{$tile-view-bg};
+  --dx-tile-view-bg-active: #{$tile-view-bg-active};
+  --dx-tile-view-border: #{$tile-view-border};
+  --dx-tile-view-border-hovered: #{$tile-view-border-hovered};
+  --dx-tile-view-content: #{$tile-view-content};
+  --dx-tile-view-content-disabled: #{$tile-view-content-disabled};
+  --dx-tile-view-tile-border: #{$tile-view-tile-border};
+  --dx-tile-view-wrapper-height: #{$tile-view-wrapper-height};
+
+  @include links.publish();
+}
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..f4feb0e9a17c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tileView/_sizes.scss
@@ -0,0 +1,7 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// 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..c4fc4903feff
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/timeView/_colors.scss
@@ -0,0 +1,23 @@
+@use "../colors" as *;
+
+/*
+ * 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: null !default;
+$time-view-clock-accent-bg: null !default;
+$time-view-clock-bg: null !default;
+
+@if $mode == "light" {
+  $time-view-clock-digits-content: #161616 !default; // dx-data-uri-static: ds.$color-content
+  $time-view-clock-accent-bg: #242424 !default; // dx-data-uri-static: ds.$color-bg-inverted
+  $time-view-clock-bg: #fafafa !default; // dx-data-uri-static: ds.$color-bg-canvas
+}
+
+@if $mode == "dark" {
+  $time-view-clock-digits-content: #fff !default; // dx-data-uri-static: ds.$color-content
+  $time-view-clock-accent-bg: #fff !default; // dx-data-uri-static: ds.$color-bg-inverted
+  $time-view-clock-bg: #1d1d1d !default; // dx-data-uri-static: ds.$color-bg-canvas
+}
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..42c8aca68556
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/timeView/_index.scss
@@ -0,0 +1,59 @@
+@use "sass:math";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/timeView/mixins" as *;
+@use "../../base/timeView" with (
+  $timeview-numberbox-width: var(--dx-time-view-field-number-box-width),
+  $timeview-numberbox-spin-touch-friendly-width: var(--dx-time-view-field-number-box-spin-touch-friendly-width),
+);
+@include clock-action-icons-mixin(
+  $time-view-clock-accent-bg,
+  $time-view-clock-bg,
+  $time-view-clock-digits-content,
+  $clock-size: var(--dx-time-view-clock-size),
+  $arrow-width: var(--dx-time-view-clock-arrow-width),
+  $arrow-offset: var(--dx-time-view-clock-arrow-offset),
+);
+
+.dx-timeview {
+  height: auto;
+  width: auto;
+
+  .dx-texteditor {
+    .dx-texteditor-input {
+      padding-inline-end: 0;
+      padding-inline-start: var(--dx-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: var(--dx-time-view-clock-margin-block-end);
+}
+
+.dx-timeview-format12 {
+  width: var(--dx-time-view-format12-width);
+  margin-inline-start: var(--dx-time-view-time-separator-margin);
+}
+
+.dx-timeview-time-separator {
+  margin: 0 var(--dx-time-view-time-separator-margin);
+}
+
+.dx-timeview-field {
+  min-height: var(--dx-time-view-field-min-height);
+}
+
+.dx-timeview-field .dx-numberbox {
+  width: var(--dx-time-view-format12-width);
+
+  &.dx-numberbox-spin-touch-friendly {
+    width: var(--dx-time-view-number-box-spin-touch-friendly-width);
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/timeView/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/timeView/_public.scss
new file mode 100644
index 000000000000..5e75075c488e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/timeView/_public.scss
@@ -0,0 +1,16 @@
+// GENERATED by tools/naming/publish.mjs
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-time-view-clock-arrow-offset: #{$time-view-clock-arrow-offset};
+  --dx-time-view-clock-arrow-width: #{$time-view-clock-arrow-width};
+  --dx-time-view-clock-margin-block-end: #{$time-view-clock-margin-block-end};
+  --dx-time-view-clock-size: #{$time-view-clock-size};
+  --dx-time-view-field-min-height: #{$time-view-field-min-height};
+  --dx-time-view-field-number-box-spin-touch-friendly-width: #{$time-view-field-number-box-spin-touch-friendly-width};
+  --dx-time-view-field-number-box-width: #{$time-view-field-number-box-width};
+  --dx-time-view-format12-width: #{$time-view-format12-width};
+  --dx-time-view-input-padding-inline-start: #{$time-view-input-padding-inline-start};
+  --dx-time-view-number-box-spin-touch-friendly-width: #{$time-view-number-box-spin-touch-friendly-width};
+  --dx-time-view-time-separator-margin: #{$time-view-time-separator-margin};
+}
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..4eb06bc212ef
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/timeView/_sizes.scss
@@ -0,0 +1,21 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$time-view-field-min-height: ds.$spacing-360 !default;
+$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: ds.$spacing-1200 !default;
+
+// Base-layer sizing injected with design tokens (wave B2)
+$time-view-field-number-box-width: ds.$spacing-720 !default;
+$time-view-field-number-box-spin-touch-friendly-width: ds.$spacing-1200 !default;
+
+// Base-layer sizing injected with design tokens (wave B8)
+$time-view-clock-size: 182px !default; // dx-offscale: 182px, the size of the dial SVG behind it
+$time-view-clock-arrow-width: ds.$spacing-100 !default;
+
+// Derived once and published: the arrows are centred on the dial with half their own width.
+$time-view-clock-arrow-offset: calc(#{$time-view-clock-arrow-width} / -2) !default;
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..bcbde6f9e255
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/toast/_colors.scss
@@ -0,0 +1,17 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$toast-bg: ds.$color-bg !default;
+
+$toast-info-content: ds.$color-content !default;
+
+$toast-warning-bg: ds.$color-bg-warning !default;
+
+$toast-warning-content: ds.$color-content-static-light !default;
+
+$toast-error-bg: ds.$color-bg-danger !default;
+
+$toast-error-content: ds.$color-content-static-dark !default;
+
+$toast-success-bg: ds.$color-bg-success !default;
+
+$toast-success-content: ds.$color-content-static-dark !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..ae76cbad695c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/toast/_index.scss
@@ -0,0 +1,55 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/toast" with (
+  $toast-content-padding: var(--dx-toast-content-padding),
+  $toast-icon-width: var(--dx-toast-icon-width),
+  $toast-icon-height: var(--dx-toast-icon-height),
+  $toast-icon-margin-right: var(--dx-toast-icon-margin-inline-end),
+  $toast-icon-margin-left: var(--dx-toast-icon-rtl-margin-inline-end),
+  $toast-stack-gap: var(--dx-toast-stack-gap),
+);
+@use "../overlay";
+
+.dx-toast-stack {
+  gap: var(--dx-toast-item-gap);
+}
+
+.dx-toast-content {
+  font-size: $global-font-size;
+  font-weight: var(--dx-toast-content-font-weight);
+  padding: var(--dx-toast-content-padding-block) var(--dx-toast-content-padding-inline);
+  border-radius: var(--dx-toast-border-radius);
+  box-shadow: var(--dx-toast-box-shadow);
+  min-height: var(--dx-toast-height);
+  display: flex;
+  align-items: center;
+}
+
+.dx-toast-icon {
+  display: none;
+}
+
+.dx-toast-message {
+  padding: 0;
+}
+
+.dx-toast-info {
+  background-color: var(--dx-toast-info-bg);
+  color: var(--dx-toast-info-content);
+}
+
+.dx-toast-warning {
+  background-color: var(--dx-toast-warning-bg);
+  color: var(--dx-toast-warning-content);
+}
+
+.dx-toast-error {
+  background-color: var(--dx-toast-error-bg);
+  color: var(--dx-toast-error-content);
+}
+
+.dx-toast-success {
+  background-color: var(--dx-toast-success-bg);
+  color: var(--dx-toast-success-content);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/toast/_public-links.scss b/packages/devextreme-scss/scss/widgets/fluent-next/toast/_public-links.scss
new file mode 100644
index 000000000000..fde4ee9d604f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/toast/_public-links.scss
@@ -0,0 +1,3 @@
+@mixin publish {
+  --dx-toast-info-bg: var(--dx-toast-bg);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/toast/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/toast/_public.scss
new file mode 100644
index 000000000000..5456f1b5ff09
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/toast/_public.scss
@@ -0,0 +1,30 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+@use "public-links" as links;
+
+@mixin publish {
+  --dx-toast-bg: #{$toast-bg};
+  --dx-toast-border-radius: #{$toast-border-radius};
+  --dx-toast-box-shadow: #{$toast-box-shadow};
+  --dx-toast-content-font-weight: #{$toast-content-font-weight};
+  --dx-toast-content-padding: #{$toast-content-padding};
+  --dx-toast-content-padding-block: #{$toast-content-padding-block};
+  --dx-toast-content-padding-inline: #{$toast-content-padding-inline};
+  --dx-toast-error-bg: #{$toast-error-bg};
+  --dx-toast-error-content: #{$toast-error-content};
+  --dx-toast-height: #{$toast-height};
+  --dx-toast-icon-height: #{$toast-icon-height};
+  --dx-toast-icon-margin-inline-end: #{$toast-icon-margin-inline-end};
+  --dx-toast-icon-rtl-margin-inline-end: #{$toast-icon-rtl-margin-inline-end};
+  --dx-toast-icon-width: #{$toast-icon-width};
+  --dx-toast-info-content: #{$toast-info-content};
+  --dx-toast-item-gap: #{$toast-item-gap};
+  --dx-toast-stack-gap: #{$toast-stack-gap};
+  --dx-toast-success-bg: #{$toast-success-bg};
+  --dx-toast-success-content: #{$toast-success-content};
+  --dx-toast-warning-bg: #{$toast-warning-bg};
+  --dx-toast-warning-content: #{$toast-warning-content};
+
+  @include links.publish();
+}
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..dfd5d085ef57
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/toast/_sizes.scss
@@ -0,0 +1,37 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$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: ds.$spacing-360 !default;
+$toast-icon-height: ds.$spacing-360 !default;
+$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..c984efc2d4b7
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/toolbar/_colors.scss
@@ -0,0 +1,7 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$toolbar-bg: transparent !default;
+$toolbar-content: ds.$color-content !default;
+$toolbar-separator-border: ds.$color-border-subtle !default;
+
+$toolbar-content-disabled: ds.$color-content-disabled !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..59b6de0640c9
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/toolbar/_index.scss
@@ -0,0 +1,205 @@
+@use "sass:math";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../list/sizes" as listSizes;
+@use "../button/mixins" as *;
+@use "mixins" as *;
+@use "../button/sizes" as buttonSizes;
+@use "../../base/toolbar/mixins" as *;
+@use "../../base/toolbar" with (
+  $toolbar-item-padding: var(--dx-toolbar-item-padding),
+  $toolbar-group-margin: var(--dx-toolbar-group-margin),
+  $toolbar-texteditor-width: var(--dx-toolbar-text-editor-width),
+);
+@use "../dropDownMenu";
+
+.dx-toolbar {
+  background-color: var(--dx-toolbar-bg);
+  color: var(--dx-toolbar-content);
+
+  @include dx-toolbar-sizing(
+    var(--dx-toolbar-height),
+    var(--dx-toolbar-padding),
+    var(--dx-toolbar-label-font-size),
+    var(--dx-toolbar-item-spacing)
+  );
+
+  &.dx-toolbar-multiline {
+    .dx-toolbar-item {
+      height: var(--dx-toolbar-height);
+    }
+  }
+
+  &.dx-state-disabled {
+    color: var(--dx-toolbar-content-disabled);
+
+    .dx-button-text,
+    .dx-button .dx-icon {
+      color: var(--dx-toolbar-content-disabled);
+    }
+  }
+}
+
+.dx-toolbar-after {
+  .dx-toolbar-item {
+    @include dx-toolbar-item-padding(var(--dx-toolbar-item-spacing));
+  }
+}
+
+.dx-toolbar-background {
+  background-color: var(--dx-toolbar-bg);
+}
+
+.dx-toolbar-menu-section {
+  border-bottom: var(--dx-toolbar-menu-section-border-block-end);
+  border-bottom-color: var(--dx-toolbar-separator-border);
+
+  .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-px-nudge: -1px off the list item padding
+  }
+
+  .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: var(--dx-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(
+        var(--dx-button-normal-contained-content),
+        var(--dx-button-normal-contained-content),
+        var(--dx-button-normal-contained-content),
+        var(--dx-button-normal-text-bg),
+        var(--dx-button-normal-text-bg-hovered),
+        var(--dx-button-normal-text-bg-focused),
+        var(--dx-button-normal-text-bg-active),
+        var(--dx-button-normal-text-bg-selected),
+        var(--dx-button-normal-contained-content-selected)
+      );
+    }
+
+    .dx-button-default {
+      @include dx-button-flat-color-styling(
+        var(--dx-button-default-text-content),
+        var(--dx-button-default-text-content-hovered),
+        var(--dx-button-default-text-content-active),
+        var(--dx-button-default-text-bg),
+        var(--dx-button-default-text-bg-hovered),
+        var(--dx-button-default-text-bg-focused),
+        var(--dx-button-default-text-bg-active),
+        var(--dx-button-default-text-bg-selected),
+        var(--dx-button-default-text-content-selected)
+      );
+    }
+
+    .dx-button-danger {
+      @include dx-button-flat-color-styling(
+        var(--dx-button-danger-text-content),
+        var(--dx-button-danger-text-content-hovered),
+        var(--dx-button-danger-text-content-active),
+        var(--dx-button-danger-text-bg),
+        var(--dx-button-danger-text-bg-hovered),
+        var(--dx-button-danger-text-bg-focused),
+        var(--dx-button-danger-text-bg-active),
+        var(--dx-button-danger-text-bg-selected),
+        var(--dx-button-danger-text-content-selected)
+      );
+    }
+
+    .dx-button-success {
+      @include dx-button-flat-color-styling(
+        var(--dx-button-success-text-content),
+        var(--dx-button-success-text-content-hovered),
+        var(--dx-button-success-text-content-active),
+        var(--dx-button-success-text-bg),
+        var(--dx-button-success-text-bg-hovered),
+        var(--dx-button-success-text-bg-focused),
+        var(--dx-button-success-text-bg-active),
+        var(--dx-button-success-text-bg-selected),
+        var(--dx-button-success-text-content-selected)
+      );
+    }
+
+    .dx-button {
+      &.dx-button-has-icon:not(.dx-button-has-text) {
+        border-radius: 0;
+      }
+    }
+  }
+
+  .dx-toolbar-hidden-button-group {
+    margin-top: var(--dx-toolbar-padding);
+    margin-bottom: var(--dx-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;
+  }
+}
+
+@include dx-toolbar-focus-outline(
+  var(--dx-focus-rect-outline),
+  var(--dx-focus-rect-border-radius),
+  $outline-width: var(--dx-focus-rect-outline-width),
+  $outline-offset: var(--dx-focus-rect-outline-offset),
+);
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..d78476750803
--- /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: var(--dx-toolbar-section-padding);
+  }
+
+  .dx-toolbar-after {
+    padding-inline-start: var(--dx-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(var(--dx-toolbar-item-spacing) * 4);
+    }
+
+    &:last-child {
+      padding: 0;
+    }
+  }
+
+  .dx-toolbar-label {
+    font-size: $label-font-size;
+    font-weight: var(--dx-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/_public-links.scss b/packages/devextreme-scss/scss/widgets/fluent-next/toolbar/_public-links.scss
new file mode 100644
index 000000000000..d6aba9a0d833
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/toolbar/_public-links.scss
@@ -0,0 +1,3 @@
+@mixin publish {
+  --dx-toolbar-label-font-size: var(--dx-typography-m-font-size);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/toolbar/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/toolbar/_public.scss
new file mode 100644
index 000000000000..db8c25ff3869
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/toolbar/_public.scss
@@ -0,0 +1,23 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+@use "public-links" as links;
+
+@mixin publish {
+  --dx-toolbar-bg: #{$toolbar-bg};
+  --dx-toolbar-button-text-font-weight: #{$toolbar-button-text-font-weight};
+  --dx-toolbar-content: #{$toolbar-content};
+  --dx-toolbar-content-disabled: #{$toolbar-content-disabled};
+  --dx-toolbar-group-margin: #{$toolbar-group-margin};
+  --dx-toolbar-height: #{$toolbar-height};
+  --dx-toolbar-item-padding: #{$toolbar-item-padding};
+  --dx-toolbar-item-spacing: #{$toolbar-item-spacing};
+  --dx-toolbar-label-font-weight: #{$toolbar-label-font-weight};
+  --dx-toolbar-menu-section-border-block-end: #{$toolbar-menu-section-border-block-end};
+  --dx-toolbar-padding: #{$toolbar-padding};
+  --dx-toolbar-section-padding: #{$toolbar-section-padding};
+  --dx-toolbar-separator-border: #{$toolbar-separator-border};
+  --dx-toolbar-text-editor-width: #{$toolbar-text-editor-width};
+
+  @include links.publish();
+}
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..062aa2195541
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/toolbar/_sizes.scss
@@ -0,0 +1,32 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$toolbar-height: null !default;
+
+$toolbar-padding: 0 !default;
+$toolbar-item-spacing: ds.$spacing-40 !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-base-strong !default;
+$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: ds.$spacing-1600 !default;
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..acd699c48ebe
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tooltip/_colors.scss
@@ -0,0 +1,5 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$tooltip-content: ds.$color-content !default;
+
+$tooltip-bg: ds.$color-bg !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..04b1364f3fea
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tooltip/_index.scss
@@ -0,0 +1,38 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/tooltip" with (
+  $tooltip-overlay-content-min-width: var(--dx-tooltip-overlay-content-min-width),
+  $tooltip-overlay-content-min-height: var(--dx-tooltip-overlay-content-min-height),
+  $tooltip-popup-content-padding: var(--dx-tooltip-popup-content-padding),
+);
+
+.dx-tooltip-wrapper {
+  .dx-overlay-content {
+    background-color: var(--dx-tooltip-bg);
+    color: var(--dx-tooltip-content);
+    border: var(--dx-tooltip-overlay-content-border);
+    border-radius: var(--dx-tooltip-border-radius);
+    min-height: auto;
+
+    .dx-popup-content {
+      padding: var(--dx-tooltip-padding);
+      font-size: var(--dx-tooltip-font-size);
+    }
+  }
+
+  &.dx-popover-wrapper .dx-popover-arrow {
+    &::after {
+      box-shadow: var(--dx-tooltip-box-shadow);
+      background: var(--dx-tooltip-bg);
+      border-top-right-radius: var(--dx-tooltip-arrow-border-radius);
+    }
+  }
+
+  &.dx-popover-wrapper.dx-position-top {
+    .dx-popover-arrow {
+      &::after {
+        border-bottom-left-radius: var(--dx-tooltip-arrow-border-radius);
+      }
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/tooltip/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/tooltip/_public.scss
new file mode 100644
index 000000000000..6812aa59e814
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tooltip/_public.scss
@@ -0,0 +1,17 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-tooltip-arrow-border-radius: #{$tooltip-arrow-border-radius};
+  --dx-tooltip-bg: #{$tooltip-bg};
+  --dx-tooltip-border-radius: #{$tooltip-border-radius};
+  --dx-tooltip-box-shadow: #{$tooltip-box-shadow};
+  --dx-tooltip-content: #{$tooltip-content};
+  --dx-tooltip-font-size: #{$tooltip-font-size};
+  --dx-tooltip-overlay-content-border: #{$tooltip-overlay-content-border};
+  --dx-tooltip-overlay-content-min-height: #{$tooltip-overlay-content-min-height};
+  --dx-tooltip-overlay-content-min-width: #{$tooltip-overlay-content-min-width};
+  --dx-tooltip-padding: #{$tooltip-padding};
+  --dx-tooltip-popup-content-padding: #{$tooltip-popup-content-padding};
+}
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..397267f71ae0
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tooltip/_sizes.scss
@@ -0,0 +1,26 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// 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: ds.$font-size-caption-md !default;
+$tooltip-arrow-border-radius: ds.$border-radius-20 !default;
+$tooltip-box-shadow: ds.$box-shadow-md !default;
+
+@if $size == "default" {
+  $tooltip-padding: ds.$spacing-70 ds.$spacing-110 !default;
+}
+
+@else if $size == "compact" {
+  $tooltip-padding: ds.$spacing-30 ds.$spacing-50 !default;
+}
+
+// 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..dd34d57e120e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/treeList/_colors.scss
@@ -0,0 +1,5 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$tree-list-chevron-icon: ds.$color-content-subtle !default;
+
+$tree-list-chevron-icon-disabled: ds.$color-content-disabled !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..565c3b49cbb5
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/treeList/_index.scss
@@ -0,0 +1,71 @@
+@use "sass:math";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/mixins" as *;
+@use "../../base/icon_fonts" as *;
+@use "../gridBase" as *;
+@use "../gridBase/sizes" as gridBaseSizes;
+@use "../../base/treeList" as baseTreeList with (
+  $treelist-draggable-column-opacity: var(--dx-grid-draggable-column-opacity),
+  $treelist-expandable-node-line-height: var(--dx-tree-list-empty-space-height),
+  $treelist-sticky-column-border: var(--dx-tree-list-sticky-column-border),
+  $treelist-cell-focus-outline: var(--dx-tree-list-cell-outline-focused),
+  $treelist-header-filter-outline: var(--dx-grid-outline-focused),
+  $treelist-header-filter-outline-offset: var(--dx-tree-list-outline-offset-focused),
+  $treelist-button-margin-left: var(--dx-tree-list-form-buttons-margin-inline-start),
+  $treelist-button-margin-top: var(--dx-tree-list-form-buttons-margin-block-start),
+  $treelist-error-message-margin-bottom: var(--dx-tree-list-error-message-margin-block-end),
+  $treelist-button-margin-right: var(--dx-tree-list-form-buttons-rtl-margin-inline-start),
+  $datagrid-border: gridBaseSizes.$grid-border-width solid,
+  $datagrid-drag-header-border-color: var(--dx-grid-drag-header-border),
+  $datagrid-row-error-bg: var(--dx-grid-row-error-bg),
+  $datagrid-base-color: var(--dx-grid-content),
+  $datagrid-base-background-color: var(--dx-grid-bg),
+  $datagrid-border-color: var(--dx-grid-border),
+  $datagrid-focused-border-color: var(--dx-grid-border-focused),
+  $datagrid-text-stub-mask-image: data-uri("images/widgets/fluent-next/grid/text-stub.png"),
+  $datagrid-text-stub-bg: var(--dx-grid-text-stub-bg),
+  $datagrid-row-error-color: var(--dx-grid-row-error-content),
+  $header-filter-color: var(--dx-grid-content),
+  $header-filter-color-empty: var(--dx-grid-content),
+  $base-focus-color: var(--dx-grid-content-focused),
+);
+@use "layout/cell";
+@include grid-base(treelist);
+
+.dx-treelist-rowsview {
+  tr:not(.dx-row-focused) .dx-treelist-empty-space {
+    color: var(--dx-tree-list-chevron-icon);
+  }
+
+  .dx-sort-up,
+  .dx-sort-down,
+  .dx-header-filter {
+    vertical-align: middle;
+  }
+
+  tr:not(.dx-row-focused).dx-selection {
+    .dx-treelist-empty-space {
+      color: var(--dx-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;
+      }
+    }
+  }
+}
+
+.dx-treelist.dx-state-disabled .dx-treelist-rowsview tr .dx-treelist-empty-space,
+.dx-state-disabled .dx-treelist .dx-treelist-rowsview tr .dx-treelist-empty-space {
+  color: var(--dx-tree-list-chevron-icon-disabled);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/treeList/_public-links.scss b/packages/devextreme-scss/scss/widgets/fluent-next/treeList/_public-links.scss
new file mode 100644
index 000000000000..5dd3f3ef9d9b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/treeList/_public-links.scss
@@ -0,0 +1,3 @@
+@mixin publish {
+  --dx-tree-list-chevron-icon-selected: var(--dx-tree-list-chevron-icon);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/treeList/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/treeList/_public.scss
new file mode 100644
index 000000000000..6ab8ab5ea99d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/treeList/_public.scss
@@ -0,0 +1,20 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+@use "public-links" as links;
+
+@mixin publish {
+  --dx-tree-list-cell-outline-focused: #{$tree-list-cell-outline-focused};
+  --dx-tree-list-chevron-icon: #{$tree-list-chevron-icon};
+  --dx-tree-list-chevron-icon-disabled: #{$tree-list-chevron-icon-disabled};
+  --dx-tree-list-empty-space-height: #{$tree-list-empty-space-height};
+  --dx-tree-list-error-message-margin-block-end: #{$tree-list-error-message-margin-block-end};
+  --dx-tree-list-expand-icon-size: #{$tree-list-expand-icon-size};
+  --dx-tree-list-form-buttons-margin-block-start: #{$tree-list-form-buttons-margin-block-start};
+  --dx-tree-list-form-buttons-margin-inline-start: #{$tree-list-form-buttons-margin-inline-start};
+  --dx-tree-list-form-buttons-rtl-margin-inline-start: #{$tree-list-form-buttons-rtl-margin-inline-start};
+  --dx-tree-list-outline-offset-focused: #{$tree-list-outline-offset-focused};
+  --dx-tree-list-sticky-column-border: #{$tree-list-sticky-column-border};
+
+  @include links.publish();
+}
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..9f0c55e19404
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/treeList/_sizes.scss
@@ -0,0 +1,34 @@
+@use "sass:math";
+@use "../sizes" as *;
+@use "../../base/treeList/variables" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$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-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..3e806f5b50c4
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/treeView/_colors.scss
@@ -0,0 +1,20 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
+$tree-view-content: ds.$color-content !default;
+
+$tree-view-bg-focused: ds.$color-bg-hovered !default;
+$tree-view-content-focused: ds.$color-content !default;
+
+$tree-view-bg-hovered: ds.$color-bg-alpha-hovered !default;
+$tree-view-item-content-hovered: ds.$color-content !default;
+$tree-view-border: ds.$color-border !default;
+$tree-view-item-bg-selected: ds.$color-bg-selected !default;
+
+$tree-view-item-bg-selected-disabled: ds.$color-bg-alpha-disabled !default;
+$tree-view-spin-icon: ds.$color-content-subtle !default;
+$tree-view-spin-icon-disabled: ds.$color-content-disabled !default;
+
+$tree-view-item-content-disabled: ds.$color-content-disabled !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..b0a1f413b29a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/treeView/_index.scss
@@ -0,0 +1,81 @@
+@use "../mixins" as *;
+@use "sass:math";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/treeView" as baseTreeView with (
+  $treeview-select-all-item-border-bottom: var(--dx-tree-view-select-all-item-border-block-end),
+  $treeview-border-visible-border: var(--dx-tree-view-border-visible-border),
+  $treeview-disabled-opacity: false,
+  $treeview-searchbox-margin-bottom: var(--dx-tree-view-search-box-margin-block-end),
+);
+@use "../../base/icon_fonts" as *;
+
+.dx-treeview-custom-expand-icon,
+.dx-treeview-custom-collapse-icon {
+  @include dx-icon-sizing($global-icon-size);
+}
+
+.dx-treeview-item-with-checkbox.dx-state-focused > .dx-treeview-item {
+  background-color: var(--dx-tree-view-bg-focused);
+  color: var(--dx-tree-view-content-focused);
+  border-radius: var(--dx-tree-view-item-border-radius);
+}
+
+.dx-treeview-item-content.dx-state-disabled {
+  color: var(--dx-tree-view-item-content-disabled);
+}
+
+@include baseTreeView.default-expander-icon(
+  "chevrondown",
+  "chevronright",
+  $global-icon-size,
+  var(--dx-tree-view-toggle-item-width),
+  var(--dx-tree-view-spin-icon),
+);
+@include baseTreeView.treeview-item(
+  var(--dx-tree-view-item-element-gap),
+  var(--dx-tree-view-item-padding),
+  $global-icon-size,
+  var(--dx-tree-view-bg-hovered),
+  var(--dx-tree-view-item-content-hovered),
+  var(--dx-tree-view-item-content-selected),
+  calc(var(--dx-tree-view-toggle-item-width) + var(--dx-tree-view-item-element-gap)),
+  var(--dx-tree-view-item-margin),
+  var(--dx-tree-view-item-border-radius),
+);
+@include baseTreeView.treeview-checkbox(
+  var(--dx-tree-view-checkbox-container-size),
+  var(--dx-tree-view-content),
+  $checkbox-border-color-focused: null,
+  $treeview-item-selected-color: var(--dx-tree-view-item-content-selected),
+  $treeview-item-selected-bg: var(--dx-tree-view-item-bg-selected),
+  $treeview-focused-bg: var(--dx-tree-view-bg-focused),
+  $treeview-focus-color: var(--dx-tree-view-content-focused),
+  $border-radius: var(--dx-tree-view-item-border-radius)
+);
+@include baseTreeView.treeview-aux-items(
+  var(--dx-tree-view-search-box-margin-block-end),
+  var(--dx-tree-view-search-editor-height),
+  var(--dx-tree-view-border),
+  var(--dx-tree-view-select-all-item-padding),
+  var(--dx-tree-view-item-element-gap),
+  var(--dx-tree-view-select-all-item-border-visible-padding),
+  $tree-view-container-padding,
+  var(--dx-tree-view-load-indicator-size),
+);
+
+@include when-disabled(".dx-treeview") {
+  .dx-treeview-item {
+    color: var(--dx-tree-view-item-content-disabled);
+  }
+
+  .dx-treeview-toggle-item-visibility {
+    color: var(--dx-tree-view-spin-icon-disabled);
+  }
+
+  .dx-treeview-node.dx-state-selected > .dx-treeview-item,
+  .dx-treeview-item.dx-state-selected {
+    background-color: var(--dx-tree-view-item-bg-selected-disabled);
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/treeView/_public-links.scss b/packages/devextreme-scss/scss/widgets/fluent-next/treeView/_public-links.scss
new file mode 100644
index 000000000000..efd7e8d135d3
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/treeView/_public-links.scss
@@ -0,0 +1,3 @@
+@mixin publish {
+  --dx-tree-view-item-content-selected: var(--dx-tree-view-content);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/treeView/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/treeView/_public.scss
new file mode 100644
index 000000000000..166672fffca2
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/treeView/_public.scss
@@ -0,0 +1,37 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+@use "public-links" as links;
+
+@mixin publish {
+  --dx-tree-view-bg-focused: #{$tree-view-bg-focused};
+  --dx-tree-view-bg-hovered: #{$tree-view-bg-hovered};
+  --dx-tree-view-border: #{$tree-view-border};
+  --dx-tree-view-border-padding: #{$tree-view-border-padding};
+  --dx-tree-view-border-visible-border: #{$tree-view-border-visible-border};
+  --dx-tree-view-checkbox-container-size: #{$tree-view-checkbox-container-size};
+  --dx-tree-view-checkbox-offset: #{$tree-view-checkbox-offset};
+  --dx-tree-view-container-with-border-offset: #{$tree-view-container-with-border-offset};
+  --dx-tree-view-content: #{$tree-view-content};
+  --dx-tree-view-content-focused: #{$tree-view-content-focused};
+  --dx-tree-view-item-bg-selected: #{$tree-view-item-bg-selected};
+  --dx-tree-view-item-bg-selected-disabled: #{$tree-view-item-bg-selected-disabled};
+  --dx-tree-view-item-border-radius: #{$tree-view-item-border-radius};
+  --dx-tree-view-item-content-disabled: #{$tree-view-item-content-disabled};
+  --dx-tree-view-item-content-hovered: #{$tree-view-item-content-hovered};
+  --dx-tree-view-item-element-gap: #{$tree-view-item-element-gap};
+  --dx-tree-view-item-margin: #{$tree-view-item-margin};
+  --dx-tree-view-item-padding: #{$tree-view-item-padding};
+  --dx-tree-view-item-padding-inline: #{$tree-view-item-padding-inline};
+  --dx-tree-view-load-indicator-size: #{$tree-view-load-indicator-size};
+  --dx-tree-view-search-box-margin-block-end: #{$tree-view-search-box-margin-block-end};
+  --dx-tree-view-search-editor-height: #{$tree-view-search-editor-height};
+  --dx-tree-view-select-all-item-border-block-end: #{$tree-view-select-all-item-border-block-end};
+  --dx-tree-view-select-all-item-border-visible-padding: #{$tree-view-select-all-item-border-visible-padding};
+  --dx-tree-view-select-all-item-padding: #{$tree-view-select-all-item-padding};
+  --dx-tree-view-spin-icon: #{$tree-view-spin-icon};
+  --dx-tree-view-spin-icon-disabled: #{$tree-view-spin-icon-disabled};
+  --dx-tree-view-toggle-item-width: #{$tree-view-toggle-item-width};
+
+  @include links.publish();
+}
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..98f62cbd9fbe
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/treeView/_sizes.scss
@@ -0,0 +1,52 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// Not colours: opacities that used to sit in _colors.scss (NAMING.md, O7)
+
+$tree-view-toggle-item-width: null !default;
+$tree-view-checkbox-container-size: null !default;
+$tree-view-container-with-border-offset: ds.$spacing-80 !default;
+$tree-view-item-element-gap: ds.$spacing-80 !default;
+$tree-view-item-margin: ds.$spacing-10 0 !default;
+$tree-view-item-border-radius: ds.$border-radius-40 !default;
+$tree-view-border-padding: ds.$spacing-10 !default;
+$tree-view-container-padding:
+  $tree-view-border-padding
+  $tree-view-border-padding
+  $tree-view-border-padding
+  $tree-view-container-with-border-offset !default;
+
+$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 $tree-view-checkbox-offset !default;
+  $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 !default;
+}
+
+@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 !default;
+}
+
+// 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..4dad36120e2e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/typography/_colors.scss
@@ -0,0 +1,4 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$typography-bg: ds.$color-bg-canvas !default;
+$typography-link-content: ds.$color-content-primary !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..0974df86ffa0
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/typography/_index.scss
@@ -0,0 +1,65 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../common/mixins" as *;
+@use "mixins" as *;
+
+.dx-theme-fluent-next-typography {
+  background-color: var(--dx-typography-bg);
+
+  @include dx-base-typography();
+
+  h1 {
+    font-weight: var(--dx-typography-heading-1-font-weight);
+    font-size: var(--dx-typography-heading-1-font-size);
+  }
+
+  h2 {
+    font-weight: var(--dx-typography-heading-2-font-weight);
+    font-size: var(--dx-typography-heading-2-font-size);
+  }
+
+  h3 {
+    font-weight: var(--dx-typography-heading-3-font-weight);
+    font-size: var(--dx-typography-heading-3-font-size);
+  }
+
+  h4 {
+    font-weight: var(--dx-typography-heading-4-font-weight);
+    font-size: var(--dx-typography-heading-4-font-size);
+  }
+
+  h5 {
+    font-weight: var(--dx-typography-heading-5-font-weight);
+    font-size: var(--dx-typography-heading-5-font-size);
+  }
+
+  h6 {
+    font-weight: var(--dx-typography-heading-6-font-weight);
+    font-size: var(--dx-typography-heading-6-font-size);
+  }
+
+  .dx-font-xl {
+    font-size: var(--dx-typography-xl-font-size);
+  }
+
+  .dx-font-l {
+    font-size: var(--dx-typography-l-font-size);
+  }
+
+  .dx-font-m {
+    font-size: var(--dx-typography-m-font-size);
+  }
+
+  .dx-font-s {
+    @include dx-s-font-mixin();
+  }
+
+  small,
+  .dx-font-xs {
+    font-size: var(--dx-typography-xs-font-size);
+  }
+
+  a {
+    color: var(--dx-typography-link-content);
+  }
+}
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..80520fbe4af3
--- /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: var(--dx-typography-s-font-size);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/typography/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/typography/_public.scss
new file mode 100644
index 000000000000..d97530f60711
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/typography/_public.scss
@@ -0,0 +1,25 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-typography-bg: #{$typography-bg};
+  --dx-typography-heading-1-font-size: #{$typography-heading-1-font-size};
+  --dx-typography-heading-1-font-weight: #{$typography-heading-1-font-weight};
+  --dx-typography-heading-2-font-size: #{$typography-heading-2-font-size};
+  --dx-typography-heading-2-font-weight: #{$typography-heading-2-font-weight};
+  --dx-typography-heading-3-font-size: #{$typography-heading-3-font-size};
+  --dx-typography-heading-3-font-weight: #{$typography-heading-3-font-weight};
+  --dx-typography-heading-4-font-size: #{$typography-heading-4-font-size};
+  --dx-typography-heading-4-font-weight: #{$typography-heading-4-font-weight};
+  --dx-typography-heading-5-font-size: #{$typography-heading-5-font-size};
+  --dx-typography-heading-5-font-weight: #{$typography-heading-5-font-weight};
+  --dx-typography-heading-6-font-size: #{$typography-heading-6-font-size};
+  --dx-typography-heading-6-font-weight: #{$typography-heading-6-font-weight};
+  --dx-typography-l-font-size: #{$typography-l-font-size};
+  --dx-typography-link-content: #{$typography-link-content};
+  --dx-typography-m-font-size: #{$typography-m-font-size};
+  --dx-typography-s-font-size: #{$typography-s-font-size};
+  --dx-typography-xl-font-size: #{$typography-xl-font-size};
+  --dx-typography-xs-font-size: #{$typography-xs-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..de57748fb15e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/typography/_sizes.scss
@@ -0,0 +1,82 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$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: ds.$font-size-120 !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, so "this value has no role" is the intent here and
+ * not a finding. The one real oddity is xl: the base font-size scale has no 34px at all, so that
+ * utility alone reads a spacing step (see the marker on it).
+ *
+ * The headings are a role ladder end to end, decided with design on 10.09.2026. The ramp
+ * fluent-next inherited from fluent (40/36/32/26/22/22, compact 32/28/24/20/16/16) had four
+ * values with no role at all, so it was replaced rather than adjusted: the package ladder is
+ * 40 / 32 / 28 / 24 / 20 / 16 / 14, and each branch takes six consecutive rungs, compact one
+ * rung below default. That also fixes the relation between the branches - it used to be
+ * -8/-8/-8/-6/-6/-6, which is not a step in any scale.
+ *
+ * h5 lost its strong weight in the same decision: with the ramp regular, h5 already differs
+ * from h6 by size, so the extra emphasis had nothing left to say. That is what forces
+ * compact h6 down to title-xs - at title-sm it would have become h5's twin in both size and
+ * weight, and two heading levels would render identically.
+ */
+@if $size == "default" {
+  $typography-xl-font-size: ds.$spacing-340 !default; // dx-foreign-scale: 34px, the font-size scale jumps 32 -> 36, so this one utility had to borrow from spacing
+  $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-heading-1-font-size: ds.$font-size-headline-xl !default;
+  $typography-heading-2-font-size: ds.$font-size-headline-lg !default;
+  $typography-heading-3-font-size: ds.$font-size-headline-md !default;
+  $typography-heading-4-font-size: ds.$font-size-headline-sm !default;
+  $typography-heading-5-font-size: ds.$font-size-title-md !default;
+  $typography-heading-6-font-size: ds.$font-size-title-sm !default;
+}
+
+@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-heading-1-font-size: ds.$font-size-headline-lg !default;
+  $typography-heading-2-font-size: ds.$font-size-headline-md !default;
+  $typography-heading-3-font-size: ds.$font-size-headline-sm !default;
+  $typography-heading-4-font-size: ds.$font-size-title-md !default;
+  $typography-heading-5-font-size: ds.$font-size-title-sm !default;
+  $typography-heading-6-font-size: ds.$font-size-title-xs !default;
+}
+
+: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-default !default;
+$typography-heading-6-font-weight: ds.$font-weight-headline-default !default;
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..78496b4a49ad
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/validation/_colors.scss
@@ -0,0 +1,10 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$validation-message-content: ds.$color-content-danger !default;
+
+$validation-message-content-disabled: ds.$color-content-disabled !default;
+$validation-message-bg-disabled: ds.$color-bg-disabled !default;
+$validation-message-bg: ds.$color-bg-danger-subtler !default;
+$validation-summary-content: ds.$color-content-danger !default;
+
+$validation-summary-content-disabled: ds.$color-content-disabled !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..092ba67a56e3
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/validation/_index.scss
@@ -0,0 +1,34 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/validation" as baseValidation;
+@use "../textEditor/sizes" as textEditorSizes;
+@use "../overlay";
+@include baseValidation.dx-base-validation(
+  var(--dx-validation-summary-content),
+  var(--dx-validation-message-content),
+  var(--dx-validation-message-bg),
+  var(--dx-validation-overlay-border-radius)
+);
+@include baseValidation.dx-modern-styles-validation(
+  var(--dx-validation-message-font-size),
+  var(--dx-validation-message-line-height),
+  textEditorSizes.$text-editor-input-filled-padding-inline,
+  var(--dx-validation-summary-item-margin),
+  var(--dx-validation-message-padding-block),
+  var(--dx-validation-message-padding-inline),
+);
+
+.dx-state-disabled .dx-invalid-message .dx-overlay-content,
+.dx-state-disabled.dx-invalid-message .dx-overlay-content {
+  background-color: var(--dx-validation-message-bg-disabled);
+  color: var(--dx-validation-message-content-disabled);
+}
+
+.dx-state-disabled .dx-invalid-message .dx-overlay-content *,
+.dx-state-disabled.dx-invalid-message .dx-overlay-content * {
+  color: var(--dx-validation-message-content-disabled);
+}
+
+.dx-state-disabled .dx-validationsummary-item {
+  color: var(--dx-validation-summary-content-disabled);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/validation/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/validation/_public.scss
new file mode 100644
index 000000000000..a54b55733b14
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/validation/_public.scss
@@ -0,0 +1,21 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-validation-message-bg: #{$validation-message-bg};
+  --dx-validation-message-bg-disabled: #{$validation-message-bg-disabled};
+  --dx-validation-message-content: #{$validation-message-content};
+  --dx-validation-message-content-disabled: #{$validation-message-content-disabled};
+  --dx-validation-message-content-padding: #{$validation-message-content-padding};
+  --dx-validation-message-font-size: #{$validation-message-font-size};
+  --dx-validation-message-line-height: #{$validation-message-line-height};
+  --dx-validation-message-padding-block: #{$validation-message-padding-block};
+  --dx-validation-message-padding-inline: #{$validation-message-padding-inline};
+  --dx-validation-overlay-border-radius: #{$validation-overlay-border-radius};
+  --dx-validation-summary-content: #{$validation-summary-content};
+  --dx-validation-summary-content-disabled: #{$validation-summary-content-disabled};
+  --dx-validation-summary-item-border-block-end-width: #{$validation-summary-item-border-block-end-width};
+  --dx-validation-summary-item-margin: #{$validation-summary-item-margin};
+  --dx-validation-summary-margin-block-start: #{$validation-summary-margin-block-start};
+}
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..da73f702e708
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/validation/_sizes.scss
@@ -0,0 +1,29 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$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-summary-margin-block-start: ds.$spacing-200 !default;
+$validation-message-content-padding: ds.$spacing-100 !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
+}
+
+// Base-layer sizing injected with design tokens (wave B12)
+$validation-summary-item-border-block-end-width: ds.$border-width-10 !default;
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..f9a03bb467c6
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/widget/_colors.scss
@@ -0,0 +1,3 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$widget-bg: ds.$color-bg !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..202d5dabc9c0
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/widget/_index.scss
@@ -0,0 +1,25 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../common/mixins" as *;
+@use "../../base/widget";
+@use "../../base/mixins" as *;
+
+.dx-widget {
+  @include dx-base-typography();
+}
+
+.dx-state-disabled {
+  color: var(--dx-global-content-disabled);
+
+  &.dx-widget,
+  .dx-widget {
+    @include user-select(none);
+
+    color: var(--dx-global-content-disabled);
+    cursor: default;
+  }
+}
+
+.dx-surface {
+  background-color: var(--dx-widget-bg);
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/widget/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/widget/_public.scss
new file mode 100644
index 000000000000..8f64ae165a5f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/widget/_public.scss
@@ -0,0 +1,6 @@
+// GENERATED by tools/naming/publish.mjs
+@use "colors" as *;
+
+@mixin publish {
+  --dx-widget-bg: #{$widget-bg};
+}
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..e69de29bb2d1
diff --git a/packages/devextreme-scss/scss/widgets/fluent/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/_colors.scss
index 6729d30b88e8..56aea4b88fec 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/_colors.scss
@@ -290,6 +290,8 @@ $base-invalid-color-hover: $base-danger-hover !default;
 $base-invalid-color-active: $base-danger-active !default;
 $base-invalid-color-selected: $base-danger-selected !default;
 
+$base-color-options-panel-bg: rgba(191, 191, 191, 0.15) !default;
+
 :root {
   --dx-component-color-bg: #{$base-bg};
   --dx-color-main-bg: #{$base-typography-bg};
@@ -304,4 +306,5 @@ $base-invalid-color-selected: $base-danger-selected !default;
   --dx-color-link: #{$base-link-color};
   --dx-color-shadow: #{$base-shadow-color};
   --dx-color-separator: #{$base-separator-color};
+  --dx-color-options-panel-bg: #{$base-color-options-panel-bg};
 }
diff --git a/packages/devextreme-scss/scss/widgets/fluent/common/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/common/_sizes.scss
index 7ee42e75f2de..f6964e2911e2 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/common/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/common/_sizes.scss
@@ -25,7 +25,3 @@ $fluent-base-dropdown-widgets-shadow: null !default;
   $fluent-line-height: 1.3333 !default;
   $fluent-base-dropdown-widgets-shadow: 0 0 2px 0 $base-dropdown-shadow-color1, 0 4px 8px 0 $base-dropdown-shadow-color2 !default;
 }
-
-:root {
-  --dx-line-height: #{$fluent-line-height};
-}
diff --git a/packages/devextreme-scss/scss/widgets/generic/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/_colors.scss
index 85a4533e8ef8..1aa1d05bba2c 100644
--- a/packages/devextreme-scss/scss/widgets/generic/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/_colors.scss
@@ -389,6 +389,8 @@ $typography-bg: $base-bg !default;
 $typography-color: $base-text-color !default;
 $typography-link-color: $base-link-color !default;
 
+$base-color-options-panel-bg: rgba(191, 191, 191, 0.15) !default;
+
 :root {
   --dx-component-color-bg: #{$base-bg};
   --dx-color-main-bg: #{$typography-bg};
@@ -403,4 +405,5 @@ $typography-link-color: $base-link-color !default;
   --dx-color-link: #{$base-link-color};
   --dx-color-shadow: #{$base-shadow-color};
   --dx-color-separator: #{$base-border-color};
+  --dx-color-options-panel-bg: #{$base-color-options-panel-bg};
 }
diff --git a/packages/devextreme-scss/scss/widgets/material/_colors.scss b/packages/devextreme-scss/scss/widgets/material/_colors.scss
index 1a27a389588a..918f286dc250 100644
--- a/packages/devextreme-scss/scss/widgets/material/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/material/_colors.scss
@@ -199,6 +199,8 @@ $typography-bg: $base-bg !default;
 $typography-color: $base-text-color !default;
 $typography-link-color: $base-link-color !default;
 
+$base-color-options-panel-bg: rgba(191, 191, 191, 0.15) !default;
+
 :root {
   --dx-component-color-bg: #{$base-bg};
   --dx-color-main-bg: #{$typography-bg};
@@ -213,4 +215,5 @@ $typography-link-color: $base-link-color !default;
   --dx-color-link: #{$base-link-color};
   --dx-color-shadow: #{$base-shadow-color};
   --dx-color-separator: #{$base-border-color};
+  --dx-color-options-panel-bg: #{$base-color-options-panel-bg};
 }
diff --git a/packages/devextreme-scss/tests/accent-palette.test.ts b/packages/devextreme-scss/tests/accent-palette.test.ts
new file mode 100644
index 000000000000..03309097eb4c
--- /dev/null
+++ b/packages/devextreme-scss/tests/accent-palette.test.ts
@@ -0,0 +1,128 @@
+import { existsSync, readFileSync, readdirSync } from 'fs';
+import { dirname, join } from 'path';
+
+const contract = require('../tools/naming/accent-contract.json') as {
+  declaredIn: string;
+  input: { name: string };
+  source: { name: string };
+  settings: { name: string }[];
+  steps: { prefix: string; values: number[] };
+};
+
+const packageRoot = process.cwd();
+const accentStylesheet = join(packageRoot, 'scss', 'widgets', ...contract.declaredIn.split('/'));
+const generatedPalettes = join(packageRoot, 'scss', '_design-system', 'fluent', 'accents');
+const artifactsCss = join(packageRoot, '..', 'devextreme', 'artifacts', 'css');
+const tokensDir = dirname(require.resolve('@devexpress/design-tokens-internal/package.json'));
+const designedPalettes = join(tokensDir, 'tokens', 'base', 'colors', 'palettes', 'fluent');
+
+const contractSteps = contract.steps.values.map(String);
+const stepName = (step: string | number): string => `${contract.steps.prefix}${step}`;
+
+const paletteNames = readdirSync(designedPalettes)
+  .filter((name) => name.endsWith('.json'))
+  .map((name) => name.replace('.json', ''))
+  .sort();
+
+const designedSteps = (palette: string): [string, string][] => Object.entries(
+  JSON.parse(readFileSync(join(designedPalettes, `${palette}.json`), 'utf8')).primary as
+    Record<string, { $value: string }>,
+).map(([step, token]) => [step, token.$value.toLowerCase()]);
+
+const generatedPalette = (palette: string): string => readFileSync(
+  join(generatedPalettes, `${palette}.scss`),
+  'utf8',
+);
+
+const stylesheet = (): string => readFileSync(accentStylesheet, 'utf8');
+
+const bundleNames = existsSync(artifactsCss)
+  ? readdirSync(artifactsCss).filter((name) => /^dx\.fluent-next\.[a-z0-9.]+\.css$/.test(name)).sort()
+  : [];
+
+test('the stylesheet declares exactly what the contract names', () => {
+  const declared = [...stylesheet().matchAll(/(--dx-accent[a-z0-9-]*):/g)].map((match) => match[1]);
+
+  expect(declared).toEqual([
+    contract.source.name,
+    ...contract.settings.map(({ name }) => name),
+    ...contractSteps.map(stepName),
+  ]);
+  expect(stylesheet()).toContain(`var(${contract.input.name})`);
+});
+
+test('the generator is wired to every designed palette', () => {
+  expect(readdirSync(generatedPalettes).filter((name) => name.endsWith('.scss'))
+    .map((name) => name.replace('.scss', '')).sort()).toEqual(paletteNames);
+});
+
+test('every generated palette hands each designed step to the accent, keeping the designed value', () => {
+  const offenders = paletteNames.flatMap((palette) => {
+    const generated = generatedPalette(palette);
+    return designedSteps(palette)
+      .filter(([step, value]) => !generated.includes(
+        `--dxds-primary-${step}: var(${stepName(step)}, ${value});`,
+      ))
+      .map(([step]) => `${palette}: step ${step} is not wrapped into ${stepName(step)} with its `
+        + `designed value — ${/--dxds-primary-\d+: .*/
+          .exec(generated.slice(generated.indexOf(`--dxds-primary-${step}:`)))?.[0]
+          ?? 'the step is missing'}`);
+  });
+
+  expect(offenders).toEqual([]);
+});
+
+test('the palettes read back exactly the steps the contract fixes', () => {
+  const readBack = paletteNames.map((palette) => [
+    palette,
+    [...generatedPalette(palette).matchAll(new RegExp(`var\\(${contract.steps.prefix}(\\d+),`, 'g'))]
+      .map((match) => match[1]),
+  ]);
+
+  expect(readBack).toEqual(paletteNames.map((palette) => [palette, contractSteps]));
+});
+
+test('no step multiplies and divides by the same number — Chrome 145 folds that term to zero', () => {
+  const degenerateFactors = (expression: string): string[] => {
+    const offenders: string[] = [];
+    const multiplier = /(\d+) \* \(/g;
+    let match = multiplier.exec(expression);
+    while (match) {
+      let depth = 1;
+      let index = match.index + match[0].length;
+      while (depth > 0 && index < expression.length) {
+        if (expression[index] === '(') depth += 1;
+        if (expression[index] === ')') depth -= 1;
+        index += 1;
+      }
+      const divisor = /^ \/ (\d+)/.exec(expression.slice(index));
+      if (divisor?.[1] === match[1]) offenders.push(`${match[1]} * (…) / ${divisor[1]}`);
+      match = multiplier.exec(expression);
+    }
+    return offenders;
+  };
+
+  const offenders = [...stylesheet().matchAll(/--dx-accent-color-(\d+): (.+);/g)]
+    .flatMap(([, step, value]) => degenerateFactors(value).map((shape) => `step ${step}: ${shape}`));
+
+  expect(offenders).toEqual([]);
+});
+
+test('the built bundles carry both halves of the accent', () => {
+  expect(bundleNames.length).toBeGreaterThan(0);
+
+  const offenders = bundleNames.flatMap((name) => {
+    const css = readFileSync(join(artifactsCss, name), 'utf8');
+    const computed = [...css.matchAll(/--dx-accent-color-(\d+):/g)].map((match) => match[1]);
+    const unwrapped = [...css.matchAll(/--dxds-primary-(\d+): ?(?!var\()/g)].map((match) => match[1]);
+    return [
+      ...(/@supports \(color: ?oklch\(from red l c h\)\)/.test(css)
+        ? [] : [`${name}: the computed steps are not gated by @supports`]),
+      ...(computed.join() === contractSteps.join()
+        ? [] : [`${name}: computes steps [${computed.join(', ')}]`]),
+      ...unwrapped.map((step) => `${name}: primary step ${step} bypasses ${stepName(step)}`),
+    ];
+  });
+
+  expect(offenders).toEqual([]);
+});
diff --git a/packages/devextreme-scss/tests/base-size-markers.baseline.json b/packages/devextreme-scss/tests/base-size-markers.baseline.json
new file mode 100644
index 000000000000..8720caffd498
--- /dev/null
+++ b/packages/devextreme-scss/tests/base-size-markers.baseline.json
@@ -0,0 +1,5 @@
+{
+  "openKnobs": 0,
+  "unclassified": 0,
+  "unclassifiedByWidget": {}
+}
diff --git a/packages/devextreme-scss/tests/base-size-markers.test.ts b/packages/devextreme-scss/tests/base-size-markers.test.ts
new file mode 100644
index 000000000000..28b748192e54
--- /dev/null
+++ b/packages/devextreme-scss/tests/base-size-markers.test.ts
@@ -0,0 +1,135 @@
+/*
+ * Every fixed pixel size in the shared layer scss/widgets/base/** must end up in one of two states:
+ * set from a theme, or classified with a marker saying why it stays.
+ *
+ * The layer is compiled once per bundle, so a number written into it reaches generic, material,
+ * fluent and fluent-next at the same time. 444 places could not be classified in one commit, so
+ * this is a RATCHET rather than a flat "zero unmarked" like the theme gate
+ * (tests/fluent-next-size-markers.test.ts). The ratchet has since reached zero, which means it now
+ * behaves like that flat bar: any new unmarked place fails the gate. The counts are compared
+ * against tests/base-size-markers.baseline.json and must only ever shrink. Regenerate it
+ * deliberately, as part of a batch, with:
+ *
+ *   UPDATE_BASE_SIZE_BASELINE=1 pnpm test
+ *
+ * The scan is tools/sizes/inventory.mjs, which reads the places from tools/review/px-audit.mjs — the
+ * same module the theme gate and SCALES.md are built from, so the three cannot disagree about what
+ * counts as a place. It is driven as a child process because the tool is ESM and jest transforms
+ * TypeScript only.
+ */
+
+import { execFileSync } from 'child_process';
+import { readdirSync, readFileSync, writeFileSync } from 'fs';
+import { join } from 'path';
+
+const packageRoot = process.cwd();
+const baseRoot = join(packageRoot, 'scss', 'widgets', 'base');
+const tool = join(packageRoot, 'tools', 'sizes', 'inventory.mjs');
+const baselinePath = join(__dirname, 'base-size-markers.baseline.json');
+const updatingBaseline = process.env.UPDATE_BASE_SIZE_BASELINE === '1';
+
+const vocabulary = JSON.parse(
+  readFileSync(join(packageRoot, 'tools', 'review', 'size-markers.json'), 'utf8'),
+);
+const markers: string[] = vocabulary.categories
+  .map((category: { marker: string | null }) => category.marker)
+  .filter(Boolean);
+
+type Summary = {
+  comments: number;
+  settable: {
+    occurrences: number; variables: number; injected: number; open: number;
+  };
+  owned: {
+    occurrences: number;
+    unmarked: number;
+    byCategory: Record<string, number>;
+    byWidget: Record<string, number>;
+  };
+};
+
+const summary: Summary = JSON.parse(
+  execFileSync(process.execPath, [tool, '--json'], { encoding: 'utf8', cwd: packageRoot }),
+);
+
+const walk = (dir: string): string[] => readdirSync(dir, { withFileTypes: true })
+  .flatMap((entry) => {
+    const full = join(dir, entry.name);
+    if (entry.isDirectory()) return walk(full);
+    return entry.name.endsWith('.scss') ? [full] : [];
+  });
+
+test('the inventory accounts for every px literal in the layer', () => {
+  /*
+   * An independent count, so a scanner that quietly stops seeing a file cannot pass the ratchet by
+   * reporting fewer places. Every literal is either in code (settable or base-owned) or in a
+   * comment; nothing may fall between the buckets.
+   */
+  const raw = walk(baseRoot).reduce(
+    (total, file) => total + (readFileSync(file, 'utf8').match(/-?\d*\.?\d+px\b/g)?.length ?? 0),
+    0,
+  );
+  expect(summary.settable.occurrences + summary.owned.occurrences + summary.comments).toBe(raw);
+});
+
+test('the generated inventory lists are not stale', () => {
+  /*
+   * inventory.mjs writes base-owned.json and theme-settable.json, which people read instead of
+   * running the tool — the numbers in a batch report come from there. Nothing regenerated them
+   * automatically, so a batch that changed the layer and forgot to rerun the tool left them
+   * describing the previous state. --check reruns the scan and exits 1 when the files on disk
+   * disagree with it; the fix is `node tools/sizes/inventory.mjs`.
+   */
+  let failure: string | null = null;
+
+  try {
+    execFileSync(process.execPath, [tool, '--check'], { encoding: 'utf8', cwd: packageRoot, stdio: 'pipe' });
+  } catch {
+    failure = 'tools/sizes/lists/* are out of date — run: node tools/sizes/inventory.mjs';
+  }
+
+  expect(failure).toBeNull();
+});
+
+test('no marker name is a substring of a custom property name used in the layer', () => {
+  /*
+   * Same trap as in the theme: the scan looks for the marker as a substring of the line's comment, so
+   * a marker that reads like a custom property would match prose about that property. The layer reads
+   * a handful of --dx-* names (cardView's grid columns, the scheduler animation offset), so it has to
+   * be checked here too and not only against the theme.
+   */
+  const names = new Set(walk(baseRoot).flatMap((file) => [
+    ...readFileSync(file, 'utf8').matchAll(/--(dx[a-z0-9-]*)/g),
+  ].map(([, name]) => name)));
+  const collisions = markers.flatMap((marker) => [...names]
+    .filter((name) => name.includes(marker))
+    .map((name) => `marker "${marker}" is contained in --${name}: rename the marker`));
+  expect(collisions).toEqual([]);
+});
+
+// ---------------------------------------------------------------------------------------------
+// ratchets
+// ---------------------------------------------------------------------------------------------
+
+const findings = {
+  // Knobs the layer already offers that no theme turns: theme-side work, base stays untouched.
+  openKnobs: summary.settable.open,
+  // Places with no knob and no marker: the backlog this task works through, batch by batch.
+  unclassified: summary.owned.unmarked,
+  unclassifiedByWidget: summary.owned.byWidget,
+};
+
+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/bridge-mirror.test.ts b/packages/devextreme-scss/tests/bridge-mirror.test.ts
new file mode 100644
index 000000000000..1445bafcff09
--- /dev/null
+++ b/packages/devextreme-scss/tests/bridge-mirror.test.ts
@@ -0,0 +1,95 @@
+/*
+ * The SCSS bridge mirrors the generated stylesheets, and tools/tokens/report.ts leans on that
+ * without saying so.
+ *
+ * scss/_design-system/variables/_ds.scss declares no custom property of its own — every line of
+ * it is `$x: var(--dxds-x)` — so parseDeclarations reads the largest generated file as an empty
+ * one and a bump report never attributes anything to it. That is harmless for exactly one reason:
+ * every token the bridge exposes is also declared by a stylesheet the report does read, so a
+ * token leaving the package still lands under "Gone from the generated output", against base.scss
+ * rather than against the bridge.
+ *
+ * The reason is structural — getBridgeFiles() is getModeFiles('light'), a subset of the sources
+ * the stylesheets are built from — but nothing held it there. Either list could move and leave
+ * the report silently blind to `ds.$x` disappearing, which is the failure a consumer's build hits.
+ *
+ * So the check is on the report's own parser: what it sees in the stylesheets has to cover what
+ * the bridge offers. If this fails, the bridge carries something the report cannot see — teach
+ * parseDeclarations the `$x: var(--dxds-x)` shape rather than narrowing what is compared here.
+ */
+
+import { readFileSync, readdirSync, existsSync } from 'fs';
+import { join } from 'path';
+
+import { parseDeclarations } from '../tools/tokens/report';
+
+const packageRoot = process.cwd();
+const generatedRoot = join(packageRoot, 'scss', '_design-system');
+const bridgePath = join(generatedRoot, 'variables', '_ds.scss');
+
+if (!existsSync(bridgePath)) {
+  throw new Error(`no generated bridge at ${bridgePath} — the gate needs the token build; `
+    + 'run `pnpm nx build:tokens devextreme-scss`');
+}
+
+const stylesheets = readdirSync(generatedRoot, { withFileTypes: true, recursive: true })
+  .filter((entry) => entry.isFile() && entry.name.endsWith('.scss'))
+  .map((entry) => join(entry.parentPath, entry.name))
+  .filter((file) => file !== bridgePath)
+  .sort();
+
+/* What the report can see: every custom property its own parser finds in the stylesheets. */
+const declared = new Set(stylesheets.flatMap(
+  (file) => [...parseDeclarations(readFileSync(file, 'utf8')).keys()],
+));
+
+/*
+ * What the bridge offers, read without assuming the shape of a line. Matching `$x: var(--dxds-x)`
+ * would drop anything written differently — a fallback, say — and a dropped line is not compared
+ * at all, so the check below would keep passing while covering less. Every non-blank line is
+ * taken, and what it reads is whatever token names appear in its value.
+ */
+const bridge = readFileSync(bridgePath, 'utf8')
+  .split('\n')
+  .map((line) => line.trim())
+  .filter((line) => line)
+  .map((line) => {
+    const declaration = line.match(/^(\$[\w-]+)\s*:\s*(.+);$/);
+
+    return {
+      line,
+      variable: declaration?.[1] ?? null,
+      tokens: [...(declaration?.[2] ?? '').matchAll(/--dxds-[\w-]+/g)].map(([token]) => token),
+    };
+  });
+
+/*
+ * An empty scan on either side would pass the comparison below while proving nothing, and both
+ * sides are generated — a build that stopped early is exactly how that happens.
+ */
+test('both sides of the mirror were read', () => {
+  expect(stylesheets.length).toBeGreaterThan(0);
+  expect(declared.size).toBeGreaterThan(0);
+  expect(bridge.length).toBeGreaterThan(0);
+});
+
+test('every line of the bridge is a declaration', () => {
+  expect(bridge.filter(({ variable }) => !variable).map(({ line }) => line)).toEqual([]);
+});
+
+/* A bridge variable that reads no token is not a bridge to anything. */
+test('every bridge variable reads a token', () => {
+  const silent = bridge
+    .filter(({ variable, tokens }) => variable && !tokens.length)
+    .map(({ variable }) => variable);
+
+  expect(silent).toEqual([]);
+});
+
+test('every token the bridge reads is one the report can see', () => {
+  const invisible = bridge.flatMap(({ variable, tokens }) => tokens
+    .filter((token) => !declared.has(token))
+    .map((token) => `${variable} -> ${token}`));
+
+  expect(invisible).toEqual([]);
+});
diff --git a/packages/devextreme-scss/tests/calc-budget.json b/packages/devextreme-scss/tests/calc-budget.json
new file mode 100644
index 000000000000..a62bbde8e435
--- /dev/null
+++ b/packages/devextreme-scss/tests/calc-budget.json
@@ -0,0 +1,18 @@
+{
+  "dx.fluent-next.blue.dark.compact.css": {
+    "calcOccurrences": 391,
+    "declarationsWithDeepCalc": 5
+  },
+  "dx.fluent-next.blue.dark.css": {
+    "calcOccurrences": 392,
+    "declarationsWithDeepCalc": 5
+  },
+  "dx.fluent-next.blue.light.compact.css": {
+    "calcOccurrences": 391,
+    "declarationsWithDeepCalc": 5
+  },
+  "dx.fluent-next.blue.light.css": {
+    "calcOccurrences": 392,
+    "declarationsWithDeepCalc": 5
+  }
+}
diff --git a/packages/devextreme-scss/tests/calc-budget.test.ts b/packages/devextreme-scss/tests/calc-budget.test.ts
new file mode 100644
index 000000000000..ffa0d93dee87
--- /dev/null
+++ b/packages/devextreme-scss/tests/calc-budget.test.ts
@@ -0,0 +1,75 @@
+/*
+ * Budget gate for runtime calc() in the compiled fluent-next bundles — the enforcement half of the
+ * theme's runtime-calc() policy (scss/widgets/fluent-next/README.md §13). The theme docs live
+ * outside git by decision, so the digest below is the policy's only versioned form:
+ *
+ *   - calc() is legitimate for percentage layout and for values derived from overridable tokens —
+ *     runtime derivation is what the custom properties exist for;
+ *   - a constant multiple of a token is not: when the token scale has the step, use it directly;
+ *   - an expression repeated across rules is declared once and read back through its --dx-* variable
+ *     (component tier in <widget>/_public.scss, system tier in common/_public.scss);
+ *   - degenerate terms (`x + 0`, `x - y - 0`) are guarded away at build time in the base mixins;
+ *   - pixel adjustments (± 1-2px) are frozen debt pending a design review — neither converted nor
+ *     multiplied.
+ *
+ * Two numbers per bundle are pinned: total `calc(` occurrences and declarations whose value nests
+ * `calc(` four or more times (the tier's twin definitions are the only legitimate carriers of deep
+ * nesting — one per published derived value). The comparison is exact equality, like the naming
+ * baseline: a drop is banked by regenerating, growth is a policy decision and must arrive as a
+ * reviewed edit of tests/calc-budget.json. Regenerate deliberately with:
+ *
+ *   UPDATE_CALC_BUDGET=1 pnpm test
+ *
+ * The bundles come from packages/devextreme/artifacts/css — the `test` target depends on
+ * `build:themes`, so they are fresh here; a missing bundle fails the suite loudly instead of
+ * passing silently. Exact equality also pins the bundle set itself: a theme mode appearing or
+ * disappearing shows up as a budget diff.
+ */
+
+import { readFileSync, writeFileSync, readdirSync, existsSync } from 'fs';
+import { join } from 'path';
+
+const packageRoot = process.cwd();
+const artifactsCss = join(packageRoot, '..', 'devextreme', 'artifacts', 'css');
+const budgetPath = join(__dirname, 'calc-budget.json');
+const updatingBudget = process.env.UPDATE_CALC_BUDGET === '1';
+
+const DEEP_NESTING = 4;
+
+const bundleNames = existsSync(artifactsCss)
+  ? readdirSync(artifactsCss).filter((name) => /^dx\.fluent-next\.[a-z0-9.]+\.css$/.test(name)).sort()
+  : [];
+
+if (!bundleNames.length) {
+  throw new Error(`no dx.fluent-next.*.css bundles found in ${artifactsCss} — the gate needs the `
+    + 'built theme; run `pnpm nx run devextreme-scss:build:themes` (the `test` target normally '
+    + 'builds it as a dependency)');
+}
+
+const measure = (css: string) => {
+  // A declaration is one `property: value` slice of the minified bundle; calc( occurrences inside
+  // one value count its nesting depth (operands between the calc( tokens do not matter here).
+  const declarations = css.match(/[a-z-][a-z0-9-]*\s*:[^;{}]*calc\([^;{}]*/g) ?? [];
+  return {
+    calcOccurrences: (css.match(/calc\(/g) ?? []).length,
+    declarationsWithDeepCalc: declarations
+      .filter((declaration) => (declaration.match(/calc\(/g) ?? []).length >= DEEP_NESTING).length,
+  };
+};
+
+const findings = Object.fromEntries(bundleNames.map((name) => [
+  name,
+  measure(readFileSync(join(artifactsCss, name), 'utf8')),
+]));
+
+if (updatingBudget) {
+  test('calc budget regenerated', () => {
+    writeFileSync(budgetPath, `${JSON.stringify(findings, null, 2)}\n`);
+    expect(true).toBe(true);
+  });
+} else {
+  test('runtime calc() in the fluent-next bundles stays within the pinned budget', () => {
+    const budget = JSON.parse(readFileSync(budgetPath, 'utf8'));
+    expect(findings).toEqual(budget);
+  });
+}
diff --git a/packages/devextreme-scss/tests/consumed-tokens.test.ts b/packages/devextreme-scss/tests/consumed-tokens.test.ts
new file mode 100644
index 000000000000..b235de91b37d
--- /dev/null
+++ b/packages/devextreme-scss/tests/consumed-tokens.test.ts
@@ -0,0 +1,197 @@
+import {
+  buildAvailableNames,
+  collectCustomPropertyReferences,
+  collectMarkupCustomPropertyReferences,
+  collectTokenReferences,
+  stripScssComments,
+} from '../build/tokens/consumed-tokens';
+
+describe('collectTokenReferences', () => {
+  it('collects every distinct ds.$ reference a stylesheet makes', () => {
+    const references = collectTokenReferences(
+      '$a: ds.$spacing-40;\n$b: ds.$color-content-neutral-default-rest;',
+      'probe.scss',
+    );
+
+    expect(references).toEqual(['spacing-40', 'color-content-neutral-default-rest']);
+  });
+
+  it('ignores references parked in line comments', () => {
+    expect(collectTokenReferences('// $a: ds.$spacing-40 !default;', 'probe.scss')).toEqual([]);
+  });
+
+  it('ignores references parked in block comments', () => {
+    expect(collectTokenReferences('/* see ds.$spacing-40 */\n$a: ds.$spacing-80;', 'probe.scss')).toEqual([
+      'spacing-80',
+    ]);
+  });
+
+  it('ignores references spread across a multi-line block comment', () => {
+    const content = [
+      '/*',
+      ' * The divergence marker names ds.$color-surface-primary-default-rest and',
+      ' * ds.$color-content-neutral-default-rest as the equivalents.',
+      ' */',
+      '$a: ds.$spacing-40;',
+    ].join('\n');
+
+    expect(collectTokenReferences(content, 'probe.scss')).toEqual(['spacing-40']);
+  });
+
+  it('keeps the declarations between several block comments', () => {
+    const content = [
+      '/* ds.$dead-before */',
+      '$a: ds.$spacing-40;',
+      '/*\n * ds.$dead-between\n */',
+      '$b: ds.$spacing-80;',
+    ].join('\n');
+
+    expect(collectTokenReferences(content, 'probe.scss')).toEqual(['spacing-40', 'spacing-80']);
+  });
+
+  it('ignores a line comment nested inside a block comment', () => {
+    const content = '/*\n// $dead: ds.$color-surface-danger-default-rest !default;\n*/\n$a: ds.$spacing-40;';
+
+    expect(collectTokenReferences(content, 'probe.scss')).toEqual(['spacing-40']);
+  });
+
+  it('captures a malformed name whole instead of truncating it to a valid prefix', () => {
+    expect(collectTokenReferences('$a: ds.$spacing-40_typo;', 'probe.scss')).toEqual(['spacing-40_typo']);
+    expect(collectTokenReferences('$a: ds.$spacingTypo;', 'probe.scss')).toEqual(['spacingTypo']);
+  });
+
+  it('does not treat a variable that merely ends in ds as a namespace', () => {
+    expect(collectTokenReferences('$a: $borders.$spacing-40;', 'probe.scss')).toEqual([]);
+  });
+});
+
+describe('collectCustomPropertyReferences', () => {
+  it('collects a custom property written without going through the bridge', () => {
+    expect(collectCustomPropertyReferences('.x { color: var(--dxds-color-content-neutral-default-rest); }', 'probe.scss')).toEqual([
+      'color-content-neutral-default-rest',
+    ]);
+  });
+
+  it('collects a reference nested in a relative colour', () => {
+    expect(collectCustomPropertyReferences('.x { color: rgb(from var(--dxds-neutral-10) r g b / 40%); }', 'probe.scss')).toEqual([
+      'neutral-10',
+    ]);
+  });
+
+  it('tolerates whitespace after the opening parenthesis', () => {
+    expect(collectCustomPropertyReferences('.x { color: var( --dxds-spacing-40 ); }', 'probe.scss')).toEqual([
+      'spacing-40',
+    ]);
+  });
+
+  it('ignores custom properties of other namespaces', () => {
+    expect(collectCustomPropertyReferences('.x { color: var(--dx-color-text); }', 'probe.scss')).toEqual([]);
+  });
+
+  it('ignores a reference parked in a comment', () => {
+    expect(collectCustomPropertyReferences('// color: var(--dxds-spacing-40);', 'probe.scss')).toEqual([]);
+  });
+});
+
+describe('collectMarkupCustomPropertyReferences', () => {
+  it('collects a reference written with a fallback, as demos write them', () => {
+    expect(collectMarkupCustomPropertyReferences('.x { color: var(--dxds-color-content, #333); }')).toEqual([
+      'color-content',
+    ]);
+  });
+
+  it('keeps a reference that follows a url on the same line', () => {
+    expect(collectMarkupCustomPropertyReferences(
+      '.x { background: url(https://example.com/a.png); color: var(--dxds-color-content); }',
+    )).toEqual(['color-content']);
+  });
+
+  it('ignores a reference parked in a block comment', () => {
+    expect(collectMarkupCustomPropertyReferences('/* color: var(--dxds-gone); */ .x { color: var(--dxds-color-content); }')).toEqual([
+      'color-content',
+    ]);
+  });
+
+  it('ignores a reference parked in an html comment', () => {
+    expect(collectMarkupCustomPropertyReferences('<!-- var(--dxds-gone) --><b style="color: var(--dxds-color-content)"></b>')).toEqual([
+      'color-content',
+    ]);
+  });
+
+  it('does not throw on an unpaired block delimiter, which is normal in markup', () => {
+    expect(() => collectMarkupCustomPropertyReferences('const re = /[*]/; // var(--dxds-color-content)')).not.toThrow();
+  });
+
+  it('captures a malformed name whole, so a typo is reported as written', () => {
+    expect(collectMarkupCustomPropertyReferences('.x { color: var(--dxds-color-contnet); }')).toEqual([
+      'color-contnet',
+    ]);
+  });
+});
+
+describe('stripScssComments delimiter check', () => {
+  it('accepts paired delimiters', () => {
+    expect(() => stripScssComments('/* note */\n$a: 1;\n/* another */', 'probe.scss')).not.toThrow();
+  });
+
+  it('throws on a block comment that is never closed', () => {
+    expect(() => stripScssComments('/* note\n$a: ds.$spacing-40;', 'probe.scss')).toThrow('Unpaired block comment');
+  });
+
+  it('throws on an unpaired closing delimiter', () => {
+    expect(() => stripScssComments('$a: 1;\n*/\n$b: 2;', 'probe.scss')).toThrow('Unpaired block comment');
+  });
+
+  it('throws when delimiters pair up in the wrong order', () => {
+    // Even count, so only the ordering check can catch this one.
+    expect(() => stripScssComments('$a: 1;\n*/\n$b: 2;\n/* note', 'probe.scss')).toThrow('Unpaired block comment');
+  });
+
+  it('names the stylesheet it was given', () => {
+    expect(() => stripScssComments('/* note', 'gantt/_colors.scss')).toThrow('gantt/_colors.scss');
+  });
+
+  it('ignores delimiters that a line comment already removed', () => {
+    expect(() => stripScssComments('// /* not opened here\n$a: 1;', 'probe.scss')).not.toThrow();
+  });
+});
+
+describe('stripScssComments', () => {
+  it('keeps declarations that follow a closed block comment', () => {
+    expect(stripScssComments('/* note */ $a: 1;', 'probe.scss')).toBe(' $a: 1;');
+  });
+});
+
+describe('buildAvailableNames', () => {
+  const consumed = new Set(['components/core/theme/fluent']);
+
+  it('turns a flat token key into the name the bridge declares', () => {
+    const names = buildAvailableNames(
+      ['components/core/theme/fluent:button/color/bg/rest'],
+      consumed,
+    );
+
+    expect([...names]).toEqual(['button-color-bg-rest']);
+  });
+
+  it('skips tokens sourced from files the build does not consume', () => {
+    const names = buildAvailableNames(
+      ['components/wpf/theme/fluent:button/color/bg/rest'],
+      consumed,
+    );
+
+    expect([...names]).toEqual([]);
+  });
+
+  it('keeps a name that another design system also defines, scoped to the consumed file', () => {
+    const names = buildAvailableNames(
+      [
+        'semantic/colors/material/light:color/surface/primary/default/rest',
+        'components/core/theme/fluent:color/surface/primary/default/rest',
+      ],
+      consumed,
+    );
+
+    expect([...names]).toEqual(['color-surface-primary-default-rest']);
+  });
+});
diff --git a/packages/devextreme-scss/tests/data-uri-static-markers.test.ts b/packages/devextreme-scss/tests/data-uri-static-markers.test.ts
new file mode 100644
index 000000000000..5b7ac3857ee0
--- /dev/null
+++ b/packages/devextreme-scss/tests/data-uri-static-markers.test.ts
@@ -0,0 +1,120 @@
+/*
+ * A `dx-data-uri-static` marker claims that a frozen hex literal is the current value of a design
+ * token. Nothing else keeps the two in step: the colour has to be a literal because a CSS var()
+ * does not resolve inside a data-uri, so the token package can be bumped and the literal will
+ * quietly keep the old value while everything around it moves. See
+ * scss/widgets/fluent-next/DIVERGENCES.md for why the literals exist at all.
+ *
+ * The token side is read from the built bundles — the `test` target depends on `build:themes`, so
+ * they are fresh here, and a missing bundle fails loudly rather than passing on an empty scan. Only
+ * the `:root` scope of a bundle counts: the mode classes carry the opposite mode's values, and a
+ * baked literal answers for a page that names no mode.
+ *
+ * There is nothing to regenerate: a failure means either the literal or the marker is wrong, and
+ * which one it is has to be decided by looking at the token.
+ */
+
+import { readFileSync, readdirSync, existsSync } from 'fs';
+import { join } from 'path';
+
+const packageRoot = process.cwd();
+const fluentNext = join(packageRoot, 'scss', 'widgets', 'fluent-next');
+const artifactsCss = join(packageRoot, '..', 'devextreme', 'artifacts', 'css');
+
+const MARKER = /^\s*(\$[a-z0-9-]+):\s*(#[0-9a-fA-F]{3,8})\s*!default;\s*\/\/\s*dx-data-uri-static:\s*ds\.\$([a-z0-9-]+)(.*)$/;
+const MODE_BLOCK = /@if \$mode == "(light|dark)"/;
+
+interface Claim {
+  where: string;
+  variable: string;
+  literal: string;
+  token: string;
+  mode: 'light' | 'dark';
+}
+
+function scssFiles(dir: string): string[] {
+  return readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+    const full = join(dir, entry.name);
+    if (entry.isDirectory()) return scssFiles(full);
+    return entry.name.endsWith('.scss') ? [full] : [];
+  });
+}
+
+function collectClaims(): Claim[] {
+  const claims: Claim[] = [];
+  for (const file of scssFiles(fluentNext)) {
+    const where = file.slice(fluentNext.length + 1);
+    let mode: 'light' | 'dark' | null = null;
+    readFileSync(file, 'utf8').split('\n').forEach((line, index) => {
+      const block = MODE_BLOCK.exec(line);
+      if (block) mode = block[1] as 'light' | 'dark';
+      const marker = MARKER.exec(line);
+      if (!marker) return;
+      const [, variable, literal, token, trailing] = marker;
+      const modes: ('light' | 'dark')[] = /mode-invariant/.test(trailing)
+        ? ['light', 'dark']
+        : [mode ?? 'light'];
+      for (const each of modes) {
+        claims.push({ where: `${where}:${index + 1}`, variable, literal, token, mode: each });
+      }
+    });
+  }
+  return claims;
+}
+
+const expand = (hex: string): string => {
+  const value = hex.trim().toLowerCase();
+  return /^#[0-9a-f]{3}$/.test(value)
+    ? `#${[...value.slice(1)].map((c) => c + c).join('')}`
+    : value;
+};
+
+/*
+ * A bundle declares each role more than once: the mode it was built for sits on `:root`, and the
+ * opposite mode sits on the `dx-theme-mode-*` classes. A literal baked into
+ * a data-uri is what a page with no mode class shows, so only the `:root` scope may answer here —
+ * scanning the whole text would hand back whichever block happens to come first.
+ */
+const rootDeclarations = (css: string): Map<string, string> => {
+  const declarations = new Map<string, string>();
+  for (const [, selector, body] of css.matchAll(/([^{}]+)\{([^{}]*)\}/g)) {
+    if (!selector.split(',').some((one) => one.trim() === ':root')) continue;
+    for (const [, property, value] of body.matchAll(/(--[a-z0-9-]+):([^;]*)/g)) {
+      declarations.set(property, value.trim());
+    }
+  }
+  return declarations;
+};
+
+function resolve(declarations: Map<string, string>, property: string, depth = 0): string | null {
+  const value = declarations.get(property);
+  if (value === undefined) return null;
+  const indirect = /^var\((--[a-z0-9-]+)\)$/.exec(value);
+  return indirect && depth < 8 ? resolve(declarations, indirect[1], depth + 1) : value;
+}
+
+const bundles: Record<string, Map<string, string>> = {};
+for (const mode of ['light', 'dark']) {
+  const path = join(artifactsCss, `dx.fluent-next.blue.${mode}.css`);
+  if (existsSync(path)) bundles[mode] = rootDeclarations(readFileSync(path, 'utf8'));
+}
+
+test('every dx-data-uri-static literal still equals the token it names', () => {
+  expect(Object.keys(bundles).sort()).toEqual(['dark', 'light']);
+
+  const claims = collectClaims();
+  expect(claims.length).toBeGreaterThan(0);
+
+  const drifted = claims.flatMap((claim) => {
+    const actual = resolve(bundles[claim.mode], `--dxds-${claim.token}`);
+    if (actual === null) {
+      return [`${claim.where} ${claim.variable}: ds.$${claim.token} is not in the ${claim.mode} bundle`];
+    }
+    return expand(actual) === expand(claim.literal)
+      ? []
+      : [`${claim.where} ${claim.variable} (${claim.mode}): frozen ${expand(claim.literal)}, `
+         + `ds.$${claim.token} is now ${expand(actual)}`];
+  });
+
+  expect(drifted).toEqual([]);
+});
diff --git a/packages/devextreme-scss/tests/disabled-both-forms.baseline.json b/packages/devextreme-scss/tests/disabled-both-forms.baseline.json
new file mode 100644
index 000000000000..c8f4613211f7
--- /dev/null
+++ b/packages/devextreme-scss/tests/disabled-both-forms.baseline.json
@@ -0,0 +1,17 @@
+[
+  "dx-chat .dx-chat-messagebox",
+  "dx-fa-button .dx-fa-button-icon",
+  "dx-fa-button .dx-icon",
+  "dx-fa-button .dx-overlay-content",
+  "dx-fa-button .dx-overlay-content .dx-fa-button-label-wrapper .dx-fa-button-label",
+  "dx-fileuploader .dx-fileuploader-input",
+  "dx-htmleditor .dx-htmleditor-toolbar-wrapper::before",
+  "dx-pager .dx-page-sizes .dx-selection",
+  "dx-pager .dx-pages .dx-selection",
+  "dx-scheduler .dx-scheduler-time-panel-cell",
+  "dx-tagbox .dx-texteditor-input",
+  "dx-timeview .dx-widget",
+  "dx-toolbar",
+  "dx-toolbar .dx-button .dx-icon",
+  "dx-toolbar .dx-button-text"
+]
diff --git a/packages/devextreme-scss/tests/disabled-own-colour.baseline.json b/packages/devextreme-scss/tests/disabled-own-colour.baseline.json
new file mode 100644
index 000000000000..11ca4ca6a3f2
--- /dev/null
+++ b/packages/devextreme-scss/tests/disabled-own-colour.baseline.json
@@ -0,0 +1,112 @@
+[
+  "dx-accordion-item-title",
+  "dx-avatar",
+  "dx-block-separator",
+  "dx-button",
+  "dx-button-danger",
+  "dx-button-default",
+  "dx-button-mode-outlined",
+  "dx-button-mode-text",
+  "dx-button-normal",
+  "dx-button-success",
+  "dx-cardview-card",
+  "dx-cardview-card-selection",
+  "dx-chat-alertlist-error",
+  "dx-chat-editing-preview-caption",
+  "dx-chat-typingindicator-text",
+  "dx-column-chooser-item",
+  "dx-context-menu",
+  "dx-datagrid-column-chooser",
+  "dx-datagrid-drag-header",
+  "dx-datagrid-draggable-column",
+  "dx-datagrid-filter-panel",
+  "dx-datagrid-filter-panel-clear-filter",
+  "dx-datagrid-filter-panel-text",
+  "dx-datagrid-group-closed",
+  "dx-datagrid-group-opened",
+  "dx-datagrid-search-text",
+  "dx-daterangebox-separator",
+  "dx-dateviewroller-hours",
+  "dx-editor-cell",
+  "dx-empty-area-text",
+  "dx-empty-message",
+  "dx-error-message",
+  "dx-expand",
+  "dx-field-item-help-text",
+  "dx-field-value",
+  "dx-filemanager-item-custom-thumbnail",
+  "dx-filemanager-notification-common",
+  "dx-filemanager-progress-box-error",
+  "dx-filemanager-thumbnails-item",
+  "dx-fileuploader-file-icon",
+  "dx-fileuploader-file-status-message",
+  "dx-filter-range-content",
+  "dx-filterbuilder-range-separator",
+  "dx-filterbuilder-text",
+  "dx-focused",
+  "dx-gantt-task",
+  "dx-gantt-title",
+  "dx-gridcore-nodata-text",
+  "dx-group-panel-item",
+  "dx-group-panel-message",
+  "dx-header-filter",
+  "dx-header-filter-empty",
+  "dx-header-filter-icon",
+  "dx-header-filter-icon--selected",
+  "dx-htmleditor-content",
+  "dx-icon-cursorprohibition",
+  "dx-icon-filter",
+  "dx-icon-imagethumbnail",
+  "dx-informer-error",
+  "dx-informer-info",
+  "dx-list-group-header",
+  "dx-list-group-header-indicator",
+  "dx-list-item-content",
+  "dx-list-slide-menu-button-delete",
+  "dx-list-slide-menu-button-menu",
+  "dx-map-container",
+  "dx-map-shield",
+  "dx-menu",
+  "dx-menu-item-expanded",
+  "dx-menu-item-selected",
+  "dx-overlay-wrapper",
+  "dx-popup-bottom",
+  "dx-popup-content",
+  "dx-popup-title",
+  "dx-resize-handle",
+  "dx-revert-button",
+  "dx-row",
+  "dx-row-focused",
+  "dx-scheduler-all-day-table-cell",
+  "dx-scheduler-appointment",
+  "dx-scheduler-appointment-recurrence-icon",
+  "dx-scheduler-date-time-indicator",
+  "dx-scheduler-dropdown-appointment-date",
+  "dx-scheduler-form-icon",
+  "dx-scheduler-header-panel-cell",
+  "dx-scheduler-header-panel-cell-date343",
+  "dx-sort",
+  "dx-switch-off",
+  "dx-switch-on",
+  "dx-texteditor-input-container",
+  "dx-theme-accent-as-text-color",
+  "dx-theme-background-color-as-text-color",
+  "dx-theme-border-color-as-text-color",
+  "dx-theme-fluent-next-typography",
+  "dx-theme-text-color",
+  "dx-toast-error",
+  "dx-toast-info",
+  "dx-toast-success",
+  "dx-toast-warning",
+  "dx-tooltip-appointment-item-content",
+  "dx-treelist-column-chooser",
+  "dx-treelist-container",
+  "dx-treelist-drag-header",
+  "dx-treelist-draggable-column",
+  "dx-treelist-filter-panel",
+  "dx-treelist-filter-panel-clear-filter",
+  "dx-treelist-filter-panel-text",
+  "dx-treelist-group-closed",
+  "dx-treelist-group-opened",
+  "dx-treelist-search-text"
+]
diff --git a/packages/devextreme-scss/tests/disabled-own-rules.baseline.json b/packages/devextreme-scss/tests/disabled-own-rules.baseline.json
new file mode 100644
index 000000000000..2d06fb15871b
--- /dev/null
+++ b/packages/devextreme-scss/tests/disabled-own-rules.baseline.json
@@ -0,0 +1,42 @@
+[
+  "action-sheet",
+  "box",
+  "button-group",
+  "calendar",
+  "card",
+  "date-box",
+  "date-range-box",
+  "date-view",
+  "diagram",
+  "drawer",
+  "drop-down-button",
+  "drop-down-list",
+  "drop-down-menu",
+  "file-manager",
+  "form",
+  "gantt",
+  "informer",
+  "load-indicator",
+  "load-panel",
+  "map",
+  "menu",
+  "overlay",
+  "popover",
+  "popup",
+  "radio-group",
+  "recurrence-editor",
+  "scroll-view",
+  "scrollable",
+  "select-box",
+  "sortable",
+  "speed-dial-action",
+  "splitter",
+  "splitter-bar",
+  "tab-panel",
+  "text-area",
+  "text-box",
+  "toast",
+  "tooltip",
+  "validation",
+  "widget"
+]
diff --git a/packages/devextreme-scss/tests/disabled-paint.test.ts b/packages/devextreme-scss/tests/disabled-paint.test.ts
new file mode 100644
index 000000000000..4add8b8a3e64
--- /dev/null
+++ b/packages/devextreme-scss/tests/disabled-paint.test.ts
@@ -0,0 +1,377 @@
+
+import { readFileSync, writeFileSync, readdirSync, existsSync } from 'fs';
+import { join } from 'path';
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const registries = require('../tools/naming/registries.json');
+const rootSelectors: Record<string, string[]> = registries.rootSelectors;
+const SYSTEM_FOLDERS: string[] = registries.systemFolders ?? [];
+
+const packageRoot = process.cwd();
+const artifactsCss = join(packageRoot, '..', 'devextreme', 'artifacts', 'css');
+
+const RESET_WITHOUT_PAINT = new Set([
+  'dx-widget',
+  'dx-timeview',
+  'dx-tabs-nav-button',
+  'dx-numberbox-spin-container',
+  'dx-resize-handle',
+  'dx-buttongroup',
+  'dx-dropdownbutton',
+  'dx-radiogroup',
+]);
+
+const PAINT_PROPERTIES = /(^|;)\s*(color|background|background-color|border[a-z-]*color|fill|stroke)\s*:/;
+
+const DISABLED_SELECTOR = /dx-state-disabled|dx-button-disable|--disabled/;
+
+const bundleNames = existsSync(artifactsCss)
+  ? readdirSync(artifactsCss).filter((n) => /^dx\.fluent-next\.[a-z0-9.]+\.css$/.test(n)).sort()
+  : [];
+
+if (!bundleNames.length) {
+  throw new Error(`no dx.fluent-next.*.css bundles found in ${artifactsCss} — the gate needs the `
+    + 'built theme; run `pnpm nx run devextreme-scss:build:themes`');
+}
+
+interface Rule { selector: string; body: string }
+
+const readRules = (css: string): Rule[] => {
+  const rules: Rule[] = [];
+  const re = /([^{}]+)\{([^{}]*)\}/g;
+  let match = re.exec(css);
+
+  while (match !== null) {
+    const selector = match[1].split('}').pop()!.trim();
+
+    if (selector && !selector.startsWith('@')) {
+      rules.push({ selector, body: match[2] });
+    }
+
+    match = re.exec(css);
+  }
+
+  return rules;
+};
+
+const componentOf = (selector: string): string | null => {
+  const classes = selector.match(/\.dx-[a-z0-9-]+/g) ?? [];
+
+  for (const cls of classes) {
+    const name = cls.slice(1);
+
+    if (!name.startsWith('dx-state-') && name !== 'dx-widget') {
+      return name;
+    }
+  }
+
+  return classes.length ? 'dx-widget' : null;
+};
+
+const findOffenders = (css: string): string[] => {
+  const disabledRules = readRules(css).filter((r) => r.selector.includes('dx-state-disabled'));
+
+  const paints = new Set(
+    disabledRules
+      .filter((r) => PAINT_PROPERTIES.test(r.body))
+      .map((r) => componentOf(r.selector))
+      .filter((name): name is string => name !== null),
+  );
+
+  const offenders = disabledRules
+    .filter((r) => /(^|;)\s*opacity\s*:\s*1\s*(;|$)/.test(r.body))
+    .map((r) => componentOf(r.selector))
+    .filter((name): name is string => name !== null)
+    .filter((name) => !RESET_WITHOUT_PAINT.has(name)
+      && ![...paints].some((painted) => painted.startsWith(name) || name.startsWith(painted)));
+
+  return [...new Set(offenders)].sort();
+};
+
+test('the gate catches a component that lifts the dim without painting', () => {
+  const fixture = '.dx-alpha.dx-state-disabled{opacity:1}'
+    + '.dx-alpha.dx-state-disabled .dx-alpha-text{color:#ababab}'
+    + '.dx-beta.dx-state-disabled{opacity:1;box-shadow:none}';
+
+  expect(findOffenders(fixture)).toEqual(['dx-beta']);
+});
+
+const findBorrowedNames = (css: string): string[] => {
+  const borrowed = new Set<string>();
+
+  readRules(css).forEach(({ selector, body }) => {
+    if (selector.startsWith('@') || DISABLED_SELECTOR.test(selector)) {
+      return;
+    }
+
+    for (const read of body.matchAll(/var\((--dx-[a-z0-9-]*disabled[a-z0-9-]*)\)/g)) {
+      const name = read[1];
+      const chained = new RegExp(`(--dx-[a-z0-9-]+)\\s*:\\s*[^;]*${name}`).exec(body);
+
+      if (!chained || !chained[1].includes('disabled')) {
+        borrowed.add(`${name} in ${selector}`);
+      }
+    }
+  });
+
+  return [...borrowed].sort();
+};
+
+test('the gate catches a disabled name borrowed by a resting element', () => {
+  const fixture = '.dx-alpha{border-color:var(--dx-alpha-border-disabled)}'
+    + '.dx-beta.dx-state-disabled{color:var(--dx-beta-content-disabled)}';
+
+  expect(findBorrowedNames(fixture)).toEqual(['--dx-alpha-border-disabled in .dx-alpha']);
+});
+
+describe.each(bundleNames)('%s', (bundleName) => {
+  const css = readFileSync(join(artifactsCss, bundleName), 'utf8');
+  const rules = readRules(css);
+
+  test('a component that lifts the disabled dim also paints the state', () => {
+    expect(findOffenders(css)).toEqual([]);
+  });
+
+  test('a -disabled name is only read where something is disabled', () => {
+    expect(findBorrowedNames(css)).toEqual([]);
+  });
+
+  test('no rule dims every widget at once', () => {
+    const isBlanket = (selector: string): boolean => selector
+      .split(',')
+      .map((part) => part.trim())
+      .some((part) => /^\.dx-state-disabled(\.dx-widget)?( \.dx-widget)?$/.test(part));
+
+    const dimming = rules
+      .filter((r) => isBlanket(r.selector))
+      .filter((r) => /(^|;)\s*opacity\s*:\s*([^;]+)/.test(r.body)
+        && !/(^|;)\s*opacity\s*:\s*1\s*(;|$)/.test(r.body))
+      .map((r) => r.selector);
+
+    expect(dimming).toEqual([]);
+  });
+});
+
+const baselinePath = join(__dirname, 'disabled-own-rules.baseline.json');
+const updatingBaseline = process.env.UPDATE_DISABLED_BASELINE === '1';
+
+const componentsWithoutOwnDisabledRule = (css: string): string[] => {
+  const painted = new Set<string>();
+
+  readRules(css)
+    .filter(({ selector, body }) => !selector.startsWith('@')
+      && DISABLED_SELECTOR.test(selector)
+      && /(^|;)\s*(color|background|background-color|border[a-z-]*color|fill|stroke|opacity)\s*:/.test(body))
+    .forEach(({ selector }) => {
+      for (const cls of selector.matchAll(/\.(dx-[a-z0-9-]+)/g)) {
+        painted.add(cls[1]);
+      }
+    });
+
+  return Object.entries(rootSelectors)
+    .filter(([component]) => !SYSTEM_FOLDERS.includes(component))
+    .filter(([, selectors]) => {
+      const classes = (selectors as string[])
+        .filter((s) => s.trim().startsWith('.dx-'))
+        .map((s) => s.trim().slice(1));
+
+      return classes.length > 0
+        && !classes.some((cls) => [...painted].some((c) => c === cls || c.startsWith(`${cls}-`)));
+    })
+    .map(([component]) => component)
+    .sort();
+};
+
+test('no component arrives without a disabled rule of its own', () => {
+  const css = readFileSync(join(artifactsCss, 'dx.fluent-next.blue.light.css'), 'utf8');
+  const found = componentsWithoutOwnDisabledRule(css);
+
+  if (updatingBaseline) {
+    writeFileSync(baselinePath, `${JSON.stringify(found, null, 2)}\n`);
+  }
+
+  const baseline: string[] = JSON.parse(readFileSync(baselinePath, 'utf8'));
+  const appeared = found.filter((name) => !baseline.includes(name));
+
+  expect(appeared).toEqual([]);
+  expect(found.length).toBeLessThanOrEqual(baseline.length);
+});
+
+const ALLOWED_DIMS: Record<string, number> = {
+  '--dx-global-disabled-opacity': 1,
+  '--dx-grid-icon-link-opacity-disabled': 2,
+  '--dx-grid-text-link-opacity-disabled': 2,
+  '--dx-number-box-spin-opacity': 1,
+  '--dx-scheduler-appointment-opacity-disabled': 3,
+  '--dx-tabs-nav-button-opacity-disabled': 1,
+};
+
+test('no new component dims its disabled state instead of painting it', () => {
+  const css = readFileSync(join(artifactsCss, 'dx.fluent-next.blue.light.css'), 'utf8');
+  const counts: Record<string, number> = {};
+
+  readRules(css)
+    .filter(({ selector }) => !selector.startsWith('@') && DISABLED_SELECTOR.test(selector))
+    .forEach(({ body }) => {
+      const match = /(^|;)\s*opacity\s*:\s*([^;]+)/.exec(body);
+      if (!match || match[2].trim() === '1') {
+        return;
+      }
+      const name = /var\(\s*(--[a-z0-9-]+)/.exec(match[2])?.[1] ?? match[2].trim();
+      counts[name] = (counts[name] ?? 0) + 1;
+    });
+
+  const unlisted = Object.keys(counts).filter((name) => !(name in ALLOWED_DIMS));
+  expect(unlisted).toEqual([]);
+
+  const grown = Object.entries(counts)
+    .filter(([name, n]) => n > ALLOWED_DIMS[name])
+    .map(([name, n]) => `${name}: ${n} > ${ALLOWED_DIMS[name]}`);
+  expect(grown).toEqual([]);
+});
+
+const ownColourBaselinePath = join(__dirname, 'disabled-own-colour.baseline.json');
+
+const targetClassOf = (selectorPart: string): string | null => {
+  const segments = selectorPart.trim().split(/\s+|(?=>)|(?<=>)/)
+    .filter((segment) => segment && !['>', '+', '~'].includes(segment));
+  const last = segments[segments.length - 1];
+
+  if (!last) {
+    return null;
+  }
+
+  return [...last.matchAll(/\.(dx-[a-z0-9-]+)/g)]
+    .map((match) => match[1])
+    .find((cls) => !/^dx-state-|^dx-button-disable/.test(cls)) ?? null;
+};
+
+const rootClasses = new Set(
+  Object.values(rootSelectors).flat().map((selector) => selector.replace(/^\./, '')),
+);
+
+const coversUnconditionally = (selectorPart: string, target: string): boolean => {
+  const compound = selectorPart.trim().split(/\s+|(?=>)|(?<=>)/)
+    .find((segment) => /dx-state-disabled|dx-button-disable/.test(segment));
+
+  if (!compound) {
+    return true;
+  }
+
+  return [...compound.matchAll(/\.(dx-[a-z0-9-]+)/g)]
+    .map((match) => match[1])
+    .every((cls) => /^dx-state-|^dx-button-disable/.test(cls) || rootClasses.has(cls) || cls === target);
+};
+
+const elementsPaintingTheirOwnColour = (css: string): string[] => {
+  const declaresColour = /(^|;)\s*color\s*:/;
+  const own = new Set<string>();
+  const covered = new Set<string>();
+
+  readRules(css)
+    .filter(({ selector, body }) => !selector.startsWith('@') && declaresColour.test(body))
+    .forEach(({ selector, body: _body, ...rest }) => {
+      void _body;
+      void rest;
+      const isDisabled = DISABLED_SELECTOR.test(selector);
+
+      selector.split(',').forEach((part) => {
+        const target = targetClassOf(part);
+
+        if (!target) {
+          return;
+        }
+
+        if (!isDisabled) {
+          own.add(target);
+        } else if (coversUnconditionally(part, target)) {
+          covered.add(target);
+        }
+      });
+    });
+
+  return [...own].filter((cls) => !covered.has(cls)).sort();
+};
+
+test('an element that paints its own colour is reached by a disabled rule', () => {
+  const css = readFileSync(join(artifactsCss, 'dx.fluent-next.blue.light.css'), 'utf8');
+  const found = elementsPaintingTheirOwnColour(css);
+
+  if (process.env.UPDATE_OWN_COLOUR_BASELINE === '1') {
+    writeFileSync(ownColourBaselinePath, `${JSON.stringify(found, null, 2)}\n`);
+  }
+
+  const baseline: string[] = JSON.parse(readFileSync(ownColourBaselinePath, 'utf8'));
+  const appeared = found.filter((cls) => !baseline.includes(cls));
+
+  expect(appeared).toEqual([]);
+  expect(found.length).toBeLessThanOrEqual(baseline.length);
+});
+
+test('the own-colour ratchet notices an element losing its disabled rule', () => {
+  const fixture = `
+    .dx-alpha-caption { color: #111; }
+    .dx-list.dx-state-disabled .dx-alpha-caption { color: #999; }
+    .dx-beta-caption { color: #111; }
+  `;
+
+  expect(elementsPaintingTheirOwnColour(fixture)).toEqual(['dx-beta-caption']);
+});
+
+test('coverage conditional on a modifier does not count for the class', () => {
+  const fixture = `
+    .dx-gamma-caption { color: #111; }
+    .dx-some-modifier.dx-state-disabled .dx-gamma-caption { color: #999; }
+  `;
+
+  expect(elementsPaintingTheirOwnColour(fixture)).toEqual(['dx-gamma-caption']);
+});
+
+const bothFormsBaselinePath = join(__dirname, 'disabled-both-forms.baseline.json');
+
+const rootsMissingAncestorForm = (css: string): string[] => {
+  const parts = readRules(css)
+    .filter(({ selector }) => selector.includes('dx-state-disabled'))
+    .flatMap(({ selector }) => selector.split(',').map((part) => part.trim()));
+  const present = new Set(parts);
+  const missing = new Set<string>();
+
+  parts.forEach((part) => {
+    const self = part.match(/^\.(dx-[a-z0-9-]+)\.dx-state-disabled(?=\s|$)/);
+
+    if (!self || !rootClasses.has(self[1])) {
+      return;
+    }
+
+    const tail = part.slice(self[0].length).trim();
+
+    if (!present.has(`.dx-state-disabled .${self[1]}${tail ? ` ${tail}` : ''}`)) {
+      missing.add(`${self[1]}${tail ? ` ${tail}` : ''}`);
+    }
+  });
+
+  return [...missing].sort();
+};
+
+test('a widget-level disabled rule states both the self and the ancestor form', () => {
+  const css = readFileSync(join(artifactsCss, 'dx.fluent-next.blue.light.css'), 'utf8');
+  const found = rootsMissingAncestorForm(css);
+
+  if (process.env.UPDATE_BOTH_FORMS_BASELINE === '1') {
+    writeFileSync(bothFormsBaselinePath, `${JSON.stringify(found, null, 2)}\n`);
+  }
+
+  const baseline: string[] = JSON.parse(readFileSync(bothFormsBaselinePath, 'utf8'));
+
+  expect(found.filter((entry) => !baseline.includes(entry))).toEqual([]);
+  expect(found.length).toBeLessThanOrEqual(baseline.length);
+});
+
+test('the both-forms gate catches a rule written only for the widget itself', () => {
+  const fixture = `
+    .dx-list.dx-state-disabled .dx-caption { color: #999; }
+    .dx-menu.dx-state-disabled, .dx-state-disabled .dx-menu { color: #999; }
+  `;
+
+  expect(rootsMissingAncestorForm(fixture)).toEqual(['dx-list .dx-caption']);
+});
diff --git a/packages/devextreme-scss/tests/fallback-policy.test.ts b/packages/devextreme-scss/tests/fallback-policy.test.ts
new file mode 100644
index 000000000000..41ad94dd1b2b
--- /dev/null
+++ b/packages/devextreme-scss/tests/fallback-policy.test.ts
@@ -0,0 +1,104 @@
+/*
+ * The fallback policy of the fluent-next tier, as a gate (NAMING.md, "Гейты процесса", rule 1):
+ *
+ *   - inside the theme a `var(--dx-…)` or `var(--dxds-…)` read never carries a fallback. The
+ *     declaration is guaranteed by the tier's own emission on the component root (or by the token
+ *     package on :root), so a fallback would only double the weight and hide a broken emission; the
+ *     name itself is validated by fluent-next-naming.test.ts;
+ *   - the only `--dx-*` names base/** reads are the JS -> CSS runtime contract, and each of those
+ *     reads has exactly the form tools/naming/runtime-contract.json fixes for it: a fallback where
+ *     the value must never be missing, a bare read where the declaration is meant to disappear, or a
+ *     default declared on the container where the theme owns the default.
+ *
+ * A new fallback in the theme, a new `--dx-*` read in base, or a changed read form of a contract
+ * variable is a conscious edit of the json, not a silent pass.
+ */
+
+import { readFileSync, readdirSync, statSync, existsSync } from 'fs';
+import { join, sep } from 'path';
+
+import { stripScssComments } from '../build/tokens/consumed-tokens';
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const contract = require('../tools/naming/runtime-contract.json') as {
+  variables: {
+    name: string;
+    setBy: string;
+    readIn: string;
+    property: string;
+    fallback: string | null;
+    defaultDeclaredIn?: string;
+    whenUnset: string;
+  }[];
+};
+
+const packageRoot = process.cwd();
+const widgetsRoot = join(packageRoot, 'scss', 'widgets');
+const label = (file: string): string => file.slice(widgetsRoot.length + 1).split(sep).join('/');
+
+const walk = (dir: string): string[] => readdirSync(dir).flatMap((entry) => {
+  const absolute = join(dir, entry);
+  if (statSync(absolute).isDirectory()) return walk(absolute);
+  return entry.endsWith('.scss') ? [absolute] : [];
+});
+
+const stripped = (file: string): string => stripScssComments(readFileSync(file, 'utf8'), label(file));
+
+const themeFiles = walk(join(widgetsRoot, 'fluent-next'));
+const baseFiles = walk(join(widgetsRoot, 'base'));
+
+test('the theme never writes a fallback into a var(--dx…) or var(--dxds…) read', () => {
+  const offenders = themeFiles.flatMap((file) => stripped(file).split('\n').flatMap((line, index) => [
+    ...line.matchAll(/var\(\s*(--dx(?:ds)?-[a-z0-9-]+)\s*,/g),
+  ].map((match) => `${label(file)}:${index + 1}: ${match[1]} is read with a fallback — the tier `
+    + 'declares it on the component root, a fallback hides a broken emission (NAMING.md, rule 1)')));
+  expect(offenders).toEqual([]);
+});
+
+test('base reads exactly the runtime-contract names and nothing else of --dx-*', () => {
+  const read = new Set(baseFiles.flatMap((file) => [
+    ...stripped(file).matchAll(/var\(\s*(--dx-[a-z0-9-]+)/g),
+  ].map((match) => match[1])));
+  const listed = new Set(contract.variables.map(({ name }) => name));
+  expect({
+    readButNotListed: [...read].filter((name) => !listed.has(name)).sort(),
+    listedButNotRead: [...listed].filter((name) => !read.has(name)).sort(),
+  }).toEqual({ readButNotListed: [], listedButNotRead: [] });
+});
+
+test('every runtime-contract read has the form its policy fixes', () => {
+  const offenders: string[] = [];
+  contract.variables.forEach((variable) => {
+    const reads = baseFiles.flatMap((file) => [
+      ...stripped(file).matchAll(new RegExp(`var\\(\\s*${variable.name}\\s*(,\\s*([^)]*))?\\)`, 'g')),
+    ].map((match) => ({ file: label(file), fallback: match[2]?.trim() ?? null })));
+
+    if (!reads.some((read) => read.file === variable.readIn)) {
+      offenders.push(`${variable.name}: not read in ${variable.readIn} — update readIn in runtime-contract.json`);
+    }
+    reads.forEach((read) => {
+      if (read.fallback !== variable.fallback) {
+        offenders.push(`${read.file}: ${variable.name} is read with fallback ${JSON.stringify(read.fallback)}, `
+          + `the contract fixes ${JSON.stringify(variable.fallback)} (${variable.whenUnset})`);
+      }
+    });
+    if (variable.defaultDeclaredIn) {
+      const declared = baseFiles.some((file) => label(file) === variable.defaultDeclaredIn
+        && new RegExp(`${variable.name}\\s*:`).test(stripped(file)));
+      if (!declared) {
+        offenders.push(`${variable.name}: ${variable.defaultDeclaredIn} no longer declares the default the `
+          + 'contract relies on');
+      }
+    }
+  });
+  expect(offenders).toEqual([]);
+});
+
+test('the runtime still sets every contract variable where the contract says', () => {
+  const monorepo = join(packageRoot, '..', '..');
+  const missing = contract.variables
+    .filter(({ setBy }) => existsSync(join(monorepo, setBy)))
+    .filter(({ name, setBy }) => !readFileSync(join(monorepo, setBy), 'utf8').includes(`'${name}'`))
+    .map(({ name, setBy }) => `${name} is not set in ${setBy}`);
+  expect(missing).toEqual([]);
+});
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..ee69a78e1f2a
--- /dev/null
+++ b/packages/devextreme-scss/tests/fluent-next-naming.baseline.json
@@ -0,0 +1,596 @@
+{
+  "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
+    },
+    "cardView": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "chat": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "checkBox": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "colorBox": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "colorView": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "contextMenu": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "dataGrid": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "dateBox": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "dateRangeBox": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "dateView": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "diagram": {
+      "themePrefixed": 0,
+      "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": 0,
+      "unclassified": 0
+    },
+    "fileUploader": {
+      "themePrefixed": 0,
+      "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": 0,
+      "unclassified": 0
+    },
+    "pivotGrid": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "popover": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "popup": {
+      "themePrefixed": 0,
+      "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": 0
+    },
+    "treeView": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "validation": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    },
+    "widget": {
+      "themePrefixed": 0,
+      "unclassified": 0
+    }
+  },
+  "baseWiring": [
+    "cardView: $cardview-bg-color (star)",
+    "cardView: $cardview-border-radius (star)",
+    "cardView: $cardview-card--focused-outline-color (star)",
+    "cardView: $cardview-card--selected-bg-color (star)",
+    "cardView: $cardview-card--selected-border-color (star)",
+    "cardView: $cardview-card--selected-divider-color (star)",
+    "cardView: $cardview-card--selected-text-color (star)",
+    "cardView: $cardview-card--selected__cover--noimage-bg-color (star)",
+    "cardView: $cardview-card--selected__cover--noimage__icon-color (star)",
+    "cardView: $cardview-card--selected__cover-bg-color (star)",
+    "cardView: $cardview-card--selected__field-caption-weight (star)",
+    "cardView: $cardview-card-bg-color (star)",
+    "cardView: $cardview-card-border-color (star)",
+    "cardView: $cardview-card-border-radius (star)",
+    "cardView: $cardview-card-border-width (star)",
+    "cardView: $cardview-card-divider-color (star)",
+    "cardView: $cardview-card-min-width (star)",
+    "cardView: $cardview-card-text-color (star)",
+    "cardView: $cardview-card__content-padding (star)",
+    "cardView: $cardview-card__content-row-gap (star)",
+    "cardView: $cardview-card__content__cell-padding-horizontal (star)",
+    "cardView: $cardview-card__content__cell-padding-vertical (star)",
+    "cardView: $cardview-card__content__field-value--highlighted-bg-color (star)",
+    "cardView: $cardview-card__content__field-value--highlighted-border-padding (star)",
+    "cardView: $cardview-card__content__field-value--highlighted-border-radius (star)",
+    "cardView: $cardview-card__content__field-value--highlighted-box-shadow (star)",
+    "cardView: $cardview-card__content__field-value--highlighted-text-color (star)",
+    "cardView: $cardview-card__content__field-value--highlighted-text-weight (star)",
+    "cardView: $cardview-card__cover--noimage-bg-color (star)",
+    "cardView: $cardview-card__cover--noimage__icon-color (star)",
+    "cardView: $cardview-card__cover--noimage__icon-size (star)",
+    "cardView: $cardview-card__cover-bg-color (star)",
+    "cardView: $cardview-card__cover-max-height (star)",
+    "cardView: $cardview-card__field-caption-weight (star)",
+    "cardView: $cardview-card__header-height (star)",
+    "cardView: $cardview-card__header-text-size (star)",
+    "cardView: $cardview-card__header__selection-checkbox-padding-right (star)",
+    "cardView: $cardview-cards-column-gap (star)",
+    "cardView: $cardview-cards-row-gap (star)",
+    "cardView: $cardview-column-chooser--empty__message-horizontal-padding (star)",
+    "cardView: $cardview-column-chooser__select-all-item-horizontal-padding (star)",
+    "cardView: $cardview-columnchooser--empty__message-color (star)",
+    "cardView: $cardview-filter-panel-bg-color (star)",
+    "cardView: $cardview-filter-panel-border-color (star)",
+    "cardView: $cardview-filter-panel-border-radius (star)",
+    "cardView: $cardview-filter-panel-text-color (star)",
+    "cardView: $cardview-filter-panel__icon-color (star)",
+    "cardView: $cardview-gap (star)",
+    "cardView: $cardview-header-gap (star)",
+    "cardView: $cardview-header-item__left-padding (star)",
+    "cardView: $cardview-header-item__right-padding (star)",
+    "cardView: $cardview-header-item__sort-indicator__border-color (star)",
+    "cardView: $cardview-header-item__sort-indicator__border-radius (star)",
+    "cardView: $cardview-header-item__sort-indicator__border-size (star)",
+    "cardView: $cardview-header-panel--empty-line-height (star)",
+    "cardView: $cardview-header-panel-vertical-margin (star)",
+    "cardView: $cardview-header-panel__dropzone-bg-color (star)",
+    "cardView: $cardview-header-panel__dropzone-border-color (star)",
+    "cardView: $cardview-header-panel__dropzone-border-radius (star)",
+    "cardView: $cardview-header-panel__dropzone-border-width (star)",
+    "cardView: $cardview-header-panel__dropzone-height (star)",
+    "cardView: $cardview-header-panel__dropzone-text-color (star)",
+    "cardView: $cardview-header-panel__dropzone-top (star)",
+    "cardView: $cardview-header-panel__dropzone__icon-color (star)",
+    "cardView: $cardview-header-panel__item--disabled-bg-color (star)",
+    "cardView: $cardview-header-panel__item--disabled-border-color (star)",
+    "cardView: $cardview-header-panel__item--disabled-text-color (star)",
+    "cardView: $cardview-header-panel__item--disabled-text-weight (star)",
+    "cardView: $cardview-header-panel__item--disabled__header-filter-icon--selected-color (star)",
+    "cardView: $cardview-header-panel__item--disabled__icon-color (star)",
+    "cardView: $cardview-header-panel__item--disabled__sort-index-text-color (star)",
+    "cardView: $cardview-header-panel__item--disabled__sort-index-text-weight (star)",
+    "cardView: $cardview-header-panel__item--dragged-bg-color (star)",
+    "cardView: $cardview-header-panel__item--dragged-border-color (star)",
+    "cardView: $cardview-header-panel__item--dragged-box-shadow (star)",
+    "cardView: $cardview-header-panel__item--dragged-text-color (star)",
+    "cardView: $cardview-header-panel__item--dragged-text-weight (star)",
+    "cardView: $cardview-header-panel__item--dragged__allowance-icon-color (star)",
+    "cardView: $cardview-header-panel__item--dragged__prohibition-icon-color (star)",
+    "cardView: $cardview-header-panel__item--focused-outline-color (star)",
+    "cardView: $cardview-header-panel__item--hovered-bg-color (star)",
+    "cardView: $cardview-header-panel__item--hovered-border-color (star)",
+    "cardView: $cardview-header-panel__item--hovered-text-color (star)",
+    "cardView: $cardview-header-panel__item--hovered-text-weight (star)",
+    "cardView: $cardview-header-panel__item--hovered__header-filter-icon--selected-color (star)",
+    "cardView: $cardview-header-panel__item--hovered__icon-color (star)",
+    "cardView: $cardview-header-panel__item--hovered__sort-index-text-color (star)",
+    "cardView: $cardview-header-panel__item--hovered__sort-index-text-weight (star)",
+    "cardView: $cardview-header-panel__item-bg-color (star)",
+    "cardView: $cardview-header-panel__item-border-color (star)",
+    "cardView: $cardview-header-panel__item-border-radius (star)",
+    "cardView: $cardview-header-panel__item-border-width (star)",
+    "cardView: $cardview-header-panel__item-padding-horizontal (star)",
+    "cardView: $cardview-header-panel__item-padding-vertical (star)",
+    "cardView: $cardview-header-panel__item-text-color (star)",
+    "cardView: $cardview-header-panel__item-text-weight (star)",
+    "cardView: $cardview-header-panel__item__header-filter-icon--selected-color (star)",
+    "cardView: $cardview-header-panel__item__icon-color (star)",
+    "cardView: $cardview-header-panel__item__icon-size (star)",
+    "cardView: $cardview-header-panel__item__sort-index-text-color (star)",
+    "cardView: $cardview-header-panel__item__sort-index-text-weight (star)",
+    "cardView: $cardview-link-color (star)",
+    "cardView: $cardview-nodata-view-bg-color (star)",
+    "cardView: $cardview-nodata-view-text-color (star)",
+    "cardView: $cardview-nodata-view__icon-bg-color (star)",
+    "cardView: $cardview-nodata-view__icon-color (star)",
+    "cardView: $cardview-nodata-view__icon-container-margin (star)",
+    "cardView: $cardview-nodata-view__icon-container-size (star)",
+    "cardView: $cardview-nodata-view__icon-size (star)",
+    "cardView: $cardview-padding (star)",
+    "cardView: $cardview-text-color (star)",
+    "cardView: $cardview-text-weight (star)",
+    "dataGrid: $datagrid-cell-padding (star)",
+    "treeList: $treelist-expand-checkbox-right-gap (star)",
+    "treeList: $treelist-expand-checkbox-size (star)",
+    "treeList: $treelist-expand-icon-name-collapsed (star)",
+    "treeList: $treelist-expand-icon-name-expanded (star)",
+    "treeList: $treelist-expand-icon-right-gap (star)",
+    "treeList: $treelist-expand-icon-size (star)"
+  ],
+  "systemTierNames": [],
+  "multipleDeclarationHomes": [],
+  "foreignReads": {},
+  "declarationsOutsideVariableFiles": [],
+  "starImportsOfBase": [
+    "cardView/_colors.scss: ../../base/cardView/column_chooser/variables",
+    "cardView/_colors.scss: ../../base/cardView/content_view/content/card/content/variables",
+    "cardView/_colors.scss: ../../base/cardView/content_view/content/card/cover/variables",
+    "cardView/_colors.scss: ../../base/cardView/content_view/content/card/header/variables",
+    "cardView/_colors.scss: ../../base/cardView/content_view/content/card/variables",
+    "cardView/_colors.scss: ../../base/cardView/content_view/content/variables",
+    "cardView/_colors.scss: ../../base/cardView/content_view/no_data/variables",
+    "cardView/_colors.scss: ../../base/cardView/filter_panel/variables",
+    "cardView/_colors.scss: ../../base/cardView/header_panel/item/variables",
+    "cardView/_colors.scss: ../../base/cardView/header_panel/variables",
+    "cardView/_colors.scss: ../../base/cardView/variables",
+    "cardView/_index.scss: ../../base/cardView/index",
+    "cardView/_sizes.scss: ../../base/cardView/column_chooser/variables",
+    "cardView/_sizes.scss: ../../base/cardView/content_view/content/card/content/variables",
+    "cardView/_sizes.scss: ../../base/cardView/content_view/content/card/cover/variables",
+    "cardView/_sizes.scss: ../../base/cardView/content_view/content/card/header/variables",
+    "cardView/_sizes.scss: ../../base/cardView/content_view/content/card/variables",
+    "cardView/_sizes.scss: ../../base/cardView/content_view/content/variables",
+    "cardView/_sizes.scss: ../../base/cardView/content_view/no_data/variables",
+    "cardView/_sizes.scss: ../../base/cardView/filter_panel/variables",
+    "cardView/_sizes.scss: ../../base/cardView/header_panel/item/variables",
+    "cardView/_sizes.scss: ../../base/cardView/header_panel/variables",
+    "cardView/_sizes.scss: ../../base/cardView/variables",
+    "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-list-item-padding-block",
+    "--dx-list-item-padding-inline",
+    "--dx-popup-toolbar-item-padding-inline",
+    "--dx-texteditor-color-text",
+    "--dx-toolbar-height"
+  ],
+  "publicSurfaceUndeclared": [],
+  "publicSurfaceDifferences": [
+    "--dx-theme-mode: only in fluent-next"
+  ],
+  "publicTierManualDeclarations": [
+    "fluent-next/_colors.scss: --dx-color-border",
+    "fluent-next/_colors.scss: --dx-color-danger",
+    "fluent-next/_colors.scss: --dx-color-icon",
+    "fluent-next/_colors.scss: --dx-color-link",
+    "fluent-next/_colors.scss: --dx-color-main-bg",
+    "fluent-next/_colors.scss: --dx-color-options-panel-bg",
+    "fluent-next/_colors.scss: --dx-color-primary",
+    "fluent-next/_colors.scss: --dx-color-separator",
+    "fluent-next/_colors.scss: --dx-color-shadow",
+    "fluent-next/_colors.scss: --dx-color-spin-icon",
+    "fluent-next/_colors.scss: --dx-color-success",
+    "fluent-next/_colors.scss: --dx-color-text",
+    "fluent-next/_colors.scss: --dx-color-warning",
+    "fluent-next/_colors.scss: --dx-component-color-bg",
+    "fluent-next/_design-system.scss: --dx-theme-mode",
+    "fluent-next/_sizes.scss: --dx-border-radius",
+    "fluent-next/_sizes.scss: --dx-border-width",
+    "fluent-next/_sizes.scss: --dx-component-height",
+    "fluent-next/_sizes.scss: --dx-font-size",
+    "fluent-next/_sizes.scss: --dx-font-size-icon",
+    "fluent-next/button/_sizes.scss: --dx-button-padding-inline",
+    "fluent-next/gridBase/_colors.scss: --dx-datagrid-row-alternation-bg",
+    "fluent-next/list/_sizes.scss: --dx-list-item-padding-block",
+    "fluent-next/list/_sizes.scss: --dx-list-item-padding-inline",
+    "fluent-next/popup/_sizes.scss: --dx-popup-toolbar-item-padding-inline",
+    "fluent-next/textEditor/_colors.scss: --dx-texteditor-color-label",
+    "fluent-next/textEditor/_colors.scss: --dx-texteditor-color-text",
+    "fluent-next/toolbar/_sizes.scss: --dx-toolbar-height",
+    "fluent-next/typography/_sizes.scss: --dx-font-size-heading-1",
+    "fluent-next/typography/_sizes.scss: --dx-font-size-heading-2",
+    "fluent-next/typography/_sizes.scss: --dx-font-size-heading-3",
+    "fluent-next/typography/_sizes.scss: --dx-font-size-heading-4",
+    "fluent-next/typography/_sizes.scss: --dx-font-size-heading-5",
+    "fluent-next/typography/_sizes.scss: --dx-font-size-heading-6",
+    "fluent-next/typography/_sizes.scss: --dx-font-size-lg",
+    "fluent-next/typography/_sizes.scss: --dx-font-size-md",
+    "fluent-next/typography/_sizes.scss: --dx-font-size-sm",
+    "fluent-next/typography/_sizes.scss: --dx-font-size-xl",
+    "fluent-next/typography/_sizes.scss: --dx-font-size-xs"
+  ],
+  "unconsumedManifestReads": [
+    "fluent-next/button/_mixins.scss: $button-icon-margin",
+    "fluent-next/button/_mixins.scss: $button-icon-size",
+    "fluent-next/button/_mixins.scss: $button-icon-size",
+    "fluent-next/button/_mixins.scss: $button-icon-size",
+    "fluent-next/button/_mixins.scss: $button-icon-size",
+    "fluent-next/button/_mixins.scss: $button-padding-block",
+    "fluent-next/button/_mixins.scss: $button-padding-block",
+    "fluent-next/button/_mixins.scss: $button-padding-inline",
+    "fluent-next/button/_mixins.scss: $button-padding-inline",
+    "fluent-next/button/_mixins.scss: $button-padding-inline",
+    "fluent-next/button/_mixins.scss: $button-padding-inline",
+    "fluent-next/calendar/_index.scss: $calendar-legacy-width",
+    "fluent-next/checkBox/_index.scss: $check-box-arrow-icon-size",
+    "fluent-next/checkBox/_index.scss: $check-box-arrow-icon-size",
+    "fluent-next/checkBox/_index.scss: $check-box-indeterminate-icon-height",
+    "fluent-next/checkBox/_index.scss: $check-box-indeterminate-icon-width",
+    "fluent-next/diagram/_index.scss: $diagram-icon-margin-inline-end",
+    "fluent-next/diagram/_index.scss: $diagram-icon-margin-inline-start",
+    "fluent-next/gridBase/_index.scss: $grid-cell-padding-block",
+    "fluent-next/gridBase/_index.scss: $grid-cell-padding-block",
+    "fluent-next/gridBase/_index.scss: $grid-cell-padding-inline",
+    "fluent-next/gridBase/_index.scss: $grid-editor-input-padding",
+    "fluent-next/progressBar/_index.scss: $progress-bar-indeterminate-width",
+    "fluent-next/progressBar/_index.scss: $progress-bar-indeterminate-width",
+    "fluent-next/scheduler/_index.scss: $scheduler-appointment-15min-height",
+    "fluent-next/scheduler/_index.scss: $scheduler-appointment-15min-height",
+    "fluent-next/scheduler/_index.scss: $scheduler-appointment-15min-height",
+    "fluent-next/scheduler/_index.scss: $scheduler-appointment-15min-height",
+    "fluent-next/scheduler/_index.scss: $scheduler-appointment-20min-height",
+    "fluent-next/scheduler/_index.scss: $scheduler-appointment-20min-height",
+    "fluent-next/scheduler/_index.scss: $scheduler-appointment-20min-height",
+    "fluent-next/scheduler/_index.scss: $scheduler-appointment-20min-height",
+    "fluent-next/scheduler/_index.scss: $scheduler-appointment-25min-height",
+    "fluent-next/scheduler/_index.scss: $scheduler-appointment-25min-height",
+    "fluent-next/scheduler/_index.scss: $scheduler-appointment-25min-height",
+    "fluent-next/textEditor/_index.scss: $text-editor-label-font-size"
+  ]
+}
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..3943aeb32a0b
--- /dev/null
+++ b/packages/devextreme-scss/tests/fluent-next-naming.test.ts
@@ -0,0 +1,1082 @@
+/*
+ * 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';
+
+import {
+  collectCustomPropertyReferences,
+  collectTokenReferences,
+  stripScssComments,
+} from '../build/tokens/consumed-tokens';
+import {
+  type Parsed, type SourceFile, baseIndex, findSignatureRanges, parseSourceFile,
+  starredBaseParameters as starredParametersOf, baseWiringKind as wiringKindOf,
+  tierRecords as computeTierRecords, planPublication, stalePaths,
+} from '../tools/naming/tier';
+
+const packageRoot = process.cwd();
+const widgetsRoot = join(packageRoot, 'scss', 'widgets');
+const themeRoot = join(widgetsRoot, 'fluent-next');
+
+// Labels a stylesheet for error messages: `fluent-next/common/_mixins.scss`.
+const sourceLabel = (file: string): string => file.slice(widgetsRoot.length + 1);
+
+/*
+ * A style query names a custom property in its condition (`@container style(--dx-theme-mode: dark)`)
+ * and looks exactly like a declaration to a `--dx-…:` match. Preludes hold none, so dropping them
+ * is safe; the reads themselves are covered by the resolve case below.
+ */
+const declarationBody = (content: string, label: string): string => stripScssComments(content, label)
+  .replace(/@[a-z-]+[^;{]*\{/g, '{');
+
+// The --dx-* component tier (see the "wave F" test block and NAMING.md): generated projections in
+// _public.scss, hand-written links in _public-links.scss, and the collector that mounts them.
+const isPublicManifestFile = (file: string): boolean => file.endsWith('_public.scss')
+  || file.endsWith('_public-links.scss');
+const isPublicTierFile = (file: string): boolean => isPublicManifestFile(file)
+  || file.endsWith('_public-tier.scss');
+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'];
+/*
+ * The parser is shared with the emitter (tools/naming/tier.ts). `file` is the path relative to the
+ * theme root (`button/_colors.scss`) — the spelling the baseline uses.
+ */
+type ParsedFile = Parsed & { file: string };
+
+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 sourceFileOf = (file: string): SourceFile => {
+  const path = sourceLabel(file).split(sep).join('/');
+  const segments = path.split('/');
+  const raw = readFileSync(file, 'utf8');
+  return {
+    path,
+    folder: segments.length > 2 ? segments[1] : '',
+    raw,
+    stripped: stripScssComments(raw, path),
+  };
+};
+
+const themeFiles = walk(themeRoot, '.scss');
+const themeSources: SourceFile[] = themeFiles.map(sourceFileOf);
+
+const parseFile = (file: string): ParsedFile => ({
+  ...parseSourceFile(sourceFileOf(file)),
+  file: resolve(file).slice(resolve(themeRoot).length + 1),
+});
+
+const parsedFiles: ParsedFile[] = themeFiles.map((file, index) => ({
+  ...parseSourceFile(themeSources[index]),
+  file: resolve(file).slice(resolve(themeRoot).length + 1),
+}));
+
+/*
+ * `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 base = baseIndex(walk(join(widgetsRoot, 'base'), '.scss').map(sourceFileOf));
+const baseNames = base.names;
+
+const parsedByFile = (file: string): ParsedFile => {
+  const parsed = parsedFiles.find((candidate) => candidate.file === file);
+  if (!parsed) throw new Error(`${file} is not a theme file`);
+  return parsed;
+};
+
+const starredBaseParameters = (file: string): Set<string> => starredParametersOf(parsedByFile(file), base);
+
+// ---------------------------------------------------------------------------------------------
+// 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;
+};
+
+/*
+ * The `--dx-*` names that are NOT part of the public tier: the runtime sets them with
+ * `style.setProperty` and `base/**` reads them. The list, the setter, the read form and what
+ * happens when the runtime gives no value live in tools/naming/runtime-contract.json; the form of
+ * every read is held to it by tests/fallback-policy.test.ts. Here they are only excluded from the
+ * public-surface checks.
+ */
+const RUNTIME_CONTRACT = new Set<string>(
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  (require('../tools/naming/runtime-contract.json') as { variables: { name: string }[] }).variables
+    .map(({ name }) => name),
+);
+
+/*
+ * The application -> CSS contract of the custom accent, the second category outside the component
+ * tier: one colour written by the application and the scale fluent-next derives from it. The names,
+ * the reasons and the step set live in tools/naming/accent-contract.json, next to the runtime
+ * contract; tests/accent-palette.test.ts holds the stylesheet and the generated palettes to it.
+ */
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const accentContract = require('../tools/naming/accent-contract.json') as {
+  declaredIn: string;
+  input: { name: string };
+  source: { name: string };
+  settings: { name: string }[];
+  steps: { prefix: string; values: number[] };
+};
+const isAccentContractFile = (file: string): boolean => file.endsWith(
+  join(...accentContract.declaredIn.split('/')),
+);
+const ACCENT_CONTRACT = new Set([
+  accentContract.input.name,
+  accentContract.source.name,
+  ...accentContract.settings.map(({ name }) => name),
+  ...accentContract.steps.values.map((step) => `${accentContract.steps.prefix}${step}`),
+]);
+
+/** 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: ParsedFile[], 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;
+};
+
+/*
+ * Base wiring is configuration, not ownership. Two shapes, both structural:
+ *   - star: the file star-imports the very base module that declares the name, and the top-level
+ *     `$x: … !default` SETS base's variable (the load-bearing mechanism O8 documents). The spelling
+ *     is base's, so neither grammar nor ownership applies.
+ *   - feeder: `$fluent-<baseName>` passed as a `with()` value for base's `-2` key. Base holds PAIRS
+ *     of parameters for these spots (an old key and a `-2` redesign key) and the theme feeds both;
+ *     the grammar name is already taken by the OLD key's feeder, so renaming the `-2` feeder would
+ *     invent a distinction that does not exist. The knot is base's duplicated parameters — see the
+ *     `-2`-pairs entry in DIVERGENCES.md; until base deduplicates, the feeder keeps the mirror name.
+ * Every wiring declaration is listed exactly in the `baseWiring` finding: a new one is a conscious
+ * baseline edit, not a silent pass.
+ */
+const baseWiringKind = (variable: string, file: string): 'star' | 'feeder' | null => wiringKindOf(
+  variable,
+  parsedByFile(file),
+  base,
+);
+
+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(({ file, declarations }) => declarations.forEach((variable) => {
+      if (isThemeIdentity(variable) || isSystemName(variable)) return;
+      if (baseWiringKind(variable, file)) return; // counted exactly, in baseWiring below
+      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 exact wiring inventory excluded from O1 above. Exact-match by design: adding a wiring
+  // declaration must show up as a baseline diff.
+  baseWiring: parsedFiles
+    .flatMap(({ file, folder, declarations }) => declarations
+      .map((variable) => ({ variable, kind: baseWiringKind(variable, file), folder }))
+      .filter((entry) => entry.kind && !exemptFolders.includes(entry.folder))
+      .map(({ folder, variable, kind }) => `${folder}: ${variable} (${kind})`))
+    .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 = stripScssComments(readFileSync(join(themeRoot, file), 'utf8'), sourceLabel(join(themeRoot, file)));
+      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.
+   */
+  /*
+   * All three publicSurface* checks below cover the LEGACY tier only: the emitted wave-F component
+   * tier (_public.scss / _public-tier.scss) is write-only by design until the consumption wave, it
+   * exists in fluent-next alone by the tier contract (NAMING.md, 06.08), and it has its own hard
+   * invariants in the "wave F" block further down — mixing it in here would drown the legacy
+   * ratchets in 769 by-design entries.
+   */
+  publicSurfaceUnused: (() => {
+    const declared = new Set<string>();
+    THEMES.forEach((theme) => walk(join(packageRoot, 'scss', 'widgets', theme), '.scss')
+      .filter((file) => !isPublicTierFile(file) && !isAccentContractFile(file))
+      .forEach((file) => [...stripScssComments(readFileSync(file, 'utf8'), sourceLabel(file))
+        .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')
+      .filter((file) => !isPublicTierFile(file) && !isAccentContractFile(file))
+      .forEach((file) => [...stripScssComments(readFileSync(file, 'utf8'), sourceLabel(file))
+        .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)
+        && !ACCENT_CONTRACT.has(name))
+      .sort();
+  })(),
+
+  publicSurfaceDifferences: (() => {
+    const perTheme = THEMES.map((theme) => {
+      const names = new Set<string>();
+      walk(join(packageRoot, 'scss', 'widgets', theme), '.scss')
+        .filter((file) => !isPublicTierFile(file) && !isAccentContractFile(file))
+        .forEach((file) => {
+          [...stripScssComments(readFileSync(file, 'utf8'), sourceLabel(file)).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(', ')}`);
+  })(),
+
+  /*
+   * Wave F guard: `--dx-…:` declarations outside the tier files. The component tier is emitted ONLY
+   * from _public.scss / _public-links.scss; everything else declaring a --dx name is the frozen legacy
+   * surface (the pre-standard public tier, typography's scale publication, gridBase's runtime
+   * bits). Exact list by design: a new manual emission is a conscious baseline edit.
+   */
+  publicTierManualDeclarations: walk(themeRoot, '.scss')
+    .filter((file) => !isPublicTierFile(file) && !isAccentContractFile(file))
+    .flatMap((file) => [...declarationBody(readFileSync(file, 'utf8'), sourceLabel(file))
+      .matchAll(/(--dx-[a-z0-9-]+)\s*:/g)]
+      .map((match) => `${sourceLabel(file)}: ${match[1]}`))
+    .sort(),
+
+  /*
+   * Wave F9, the lock on consumption: a read of a TIER variable in a rule file is a place the
+   * --dx-* tier is bypassed — the pixel is right, but a per-instance override silently does
+   * nothing there. Everything convertible was converted by waves F3–F9 (declarations,
+   * calc-interpolations, allowlisted mixin arguments, with() wiring values); this exact list is
+   * the irreducible remainder — Sass math (math.div, `2 *`), unguarded-math mixin arguments,
+   * Sass-local derivations and portal branches (a rule that paints the component inside another
+   * widget's overlay, where the tier does not reach: diagram's toolbar overflow menu) — plus the
+   * declaration files and with() keys, which are excluded by construction. A new entry means a new
+   * bypass: consume it or justify it here. The tier name
+   * set comes from the committed _public.scss / _public-links.scss files (their own gate lives in
+   * the "wave F" block below).
+   */
+  unconsumedManifestReads: (() => {
+    const manifestNames = new Set(walk(themeRoot, '.scss')
+      .filter(isPublicManifestFile)
+      .flatMap((file) => [...stripScssComments(readFileSync(file, 'utf8'), sourceLabel(file))
+        .matchAll(/(--dx-[a-z0-9-]+)\s*:/g)]
+        .map((match) => `$${match[1].slice('--dx-'.length)}`)));
+    return walk(themeRoot, '.scss')
+      .filter((file) => !DECLARATION_FILES.some((name) => file.endsWith(name))
+        && !isPublicTierFile(file))
+      .flatMap((file) => {
+        const source = stripScssComments(readFileSync(file, 'utf8'), sourceLabel(file));
+        return source.split('\n').flatMap((line) => [
+          /*
+           * A with() KEY is base's spelling and is skipped by the leading-token check below even
+           * when it coincides with a manifest name; the VALUE on the same line is a read like any
+           * other — an unconverted `$base-key: $manifest-var,` is a tier bypass and must count.
+           */
+          ...line.matchAll(/(^|[^\w.$-])(\$[a-z0-9-]+)/g),
+        ]
+          .map((match) => match[2])
+          .filter((token) => manifestNames.has(token)
+            && !new RegExp(`^\\s*\\${token}\\s*:`).test(line))
+          .map((token) => `${sourceLabel(file)}: ${token}`));
+      })
+      .sort();
+  })(),
+};
+
+// ---------------------------------------------------------------------------------------------
+// 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 design token package', () => {
+  /*
+   * Guards against editing registries.json by hand or letting it drift from the package. Counted
+   * from the package's flat index, the same source derive-registries.mjs reads — the component tier
+   * is no longer emitted as SCSS, so there is no generated file left to count.
+   */
+  const flatTokens = JSON.parse(readFileSync(
+    require.resolve('@devexpress/design-tokens-internal/tokens.flat.json'),
+    'utf8',
+  ));
+  const tokenCount = Object.keys(flatTokens.tokens)
+    .filter((key) => key.startsWith('components/core/theme/fluent:')).length;
+
+  expect(tokenCount).toBe(registries.derivedFrom.componentTokenCount);
+});
+
+test('no name carries the theme prefix', () => {
+  const offenders = walk(themeRoot, '.scss').flatMap((file) => {
+    const found = [
+      ...stripScssComments(readFileSync(file, 'utf8'), sourceLabel(file)).matchAll(/\$fluent-[\w-]+/g),
+    ];
+    return [...new Set(found.map((match) => match[0]))]
+      .map((name) => `${resolve(file).slice(resolve(themeRoot).length + 1)}: ${name}`);
+  });
+
+  expect(offenders).toEqual([]);
+});
+
+/**
+ * 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 (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('design tokens are read only where variables are declared', () => {
+  // Covers `@use … with ()` arguments too, which stylelint cannot reach — it lints declarations.
+  const offenders = walk(themeRoot, '.scss')
+    .filter((file) => !DECLARATION_FILES.some((name) => file.endsWith(name)))
+    .flatMap((file) => collectTokenReferences(readFileSync(file, 'utf8'), sourceLabel(file))
+      .map((token) => `${sourceLabel(file)}: ds.$${token}`))
+    .sort();
+
+  expect(offenders).toEqual([]);
+});
+
+test('design tokens are never read as a raw custom property', () => {
+  // Banned everywhere, declaration files included: `var(--dxds-…)` compiles even when the name is
+  // wrong, while the bridge fails the build. stylelint covers declaration values, not at-rule
+  // parameters, and that is where these would appear.
+  const offenders = walk(themeRoot, '.scss')
+    .flatMap((file) => collectCustomPropertyReferences(readFileSync(file, 'utf8'), sourceLabel(file))
+      .map((token) => `${sourceLabel(file)}: var(--dxds-${token})`))
+    .sort();
+
+  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([]);
+});
+
+// ---------------------------------------------------------------------------------------------
+// wave F: the --dx-* component tier
+// ---------------------------------------------------------------------------------------------
+
+/*
+ * The tier contract (NAMING.md, 06.08): --dxds-* roles/scales are the stable public API; --dx-* is
+ * the product's own component tier, declared in <folder>/_public.scss onto
+ * registries.rootSelectors and free to evolve between releases. The projections are GENERATED by
+ * tools/naming/publish.mjs and committed; the relations are hand-written in <folder>/_public-links.scss.
+ * Both the emitter and these checks read the same rules from tools/naming/tier.ts, so the checks
+ * hold whatever wrote the files:
+ *   - composition: every eligible variable of a migrated component has its --dx twin, and nothing
+ *     else is declared (eligibility knowledge lives in tierRecords: data-uri exclusion is
+ *     transitive through references, CSS-wide keywords cannot ride a custom property, base wiring
+ *     is base's spelling, null has nothing to publish);
+ *   - the LINK form for a reference the referrer can resolve — same component, or a target
+ *     published on `:root`: `--dx-a: var(--dx-b);` with no SCSS twin, so the relation is stated
+ *     once, in one place, and stays live when the target moves (GOTCHAS §18.3);
+ *   - collector ↔ registries.rootSelectors consistency.
+ */
+
+// A system-tier entry (registries.systemTier) is its own folder; grammar for its names stays the
+// systemConcerns path, so it must not appear in `components` or `migrated`.
+const systemTier: string[] = registries.systemTier ?? [];
+
+const tierRecords = computeTierRecords(
+  themeSources,
+  registries,
+  new Set(findings.baseWiring.map((entry) => /(\$[a-z0-9-]+)/.exec(entry)![1])),
+);
+const publicTierFiles = themeFiles.filter(isPublicManifestFile);
+const folderOf = (file: string): string => sourceLabel(file).split('/')[1];
+const tierDeclared = new Map<string, string>(); // $variable -> declaring _public / _public-links file
+publicTierFiles.forEach((file) => {
+  [...stripScssComments(readFileSync(file, 'utf8'), sourceLabel(file))
+    .matchAll(/(--dx-[a-z0-9-]+)\s*:/g)]
+    .forEach((match) => tierDeclared.set(`$${match[1].slice('--dx-'.length)}`, file));
+});
+
+/*
+ * Which targets a link may point at. A custom property resolves only under the scope it was
+ * declared on, so the referrer must sit inside the target's root: either the target is the same
+ * component's (same _public.scss), or it is published on `:root`, which every rule sits under.
+ * A target on ANOTHER component's root is out — `--dx-button-icon-size` lives on `.dx-button` /
+ * `.dx-dropdowneditor-button`, and a gridBase rule that draws outside a button would resolve it to
+ * nothing, taking the whole declaration with it (GOTCHAS §18.3, §21).
+ */
+const publishesOnRoot = (file: string): boolean => {
+  const folder = folderOf(file);
+  const component = systemTier.includes(folder) ? folder : components[folder];
+  return (registries.rootSelectors[component] ?? []).includes(':root');
+};
+const linkableFrom = (target: string, referrer: string): boolean => {
+  const home = tierDeclared.get(`$${target.slice('--dx-'.length)}`);
+  return !!home && (folderOf(home) === folderOf(referrer) || publishesOnRoot(home));
+};
+
+/*
+ * A tier property whose whole value is `var(--dx-other)` states a relation instead of publishing a
+ * value: "this equals that until someone overrides that". It has no SCSS twin on purpose — the
+ * relation is written once, here, rather than duplicated as an alias variable that a value
+ * comparison then has to rediscover at build time.
+ */
+const tierLinks = new Map<string, { target: string; file: string }>(); // --dx-a -> --dx-b
+publicTierFiles.forEach((file) => {
+  stripScssComments(readFileSync(file, 'utf8'), sourceLabel(file)).split('\n').forEach((line) => {
+    const link = /^\s*(--dx-[a-z0-9-]+)\s*:\s*var\((--dx-[a-z0-9-]+)\);\s*$/.exec(line);
+    if (link) tierLinks.set(link[1], { target: link[2], file });
+  });
+});
+
+/*
+ * The other side of the same coin: a declaration that is nothing but a reference to another
+ * published variable. Where the referrer can resolve the target it must become a link, and the
+ * declaration itself must go. Nothing else catches a frozen copy — the composition case only asks
+ * that the variable HAS a line, and the link case only looks at lines that already contain
+ * var(--dx-…). Every component still to be migrated meets this fork, which is why the check lives
+ * here. An alias whose target sits on another component's root is the boundary of the rule, not an
+ * offender: it keeps its copy, and `tierCopies` holds it against the link form.
+ */
+const tierAliases: { property: string; target: string; source: string }[] = [];
+const tierCopies: { property: string; target: string; source: string }[] = [];
+walk(themeRoot, '.scss')
+  .filter((file) => /(^|\/)_(colors|sizes|variables)\.scss$/.test(file))
+  .forEach((file) => {
+    stripScssComments(readFileSync(file, 'utf8'), sourceLabel(file)).split('\n').forEach((line, index) => {
+      // `!default` is optional on purpose: an alias written without it is the same relation
+      const alias = /^\s*\$([a-z0-9-]+)\s*:\s*(?:[A-Za-z]\w*\.)?\$([a-z0-9-]+)\s*(?:!default)?\s*;\s*$/.exec(line);
+      if (!alias) return;
+      const home = tierDeclared.get(`$${alias[1]}`);
+      if (!home || !tierDeclared.has(`$${alias[2]}`)) return;
+      const record = {
+        property: `--dx-${alias[1]}`,
+        target: `--dx-${alias[2]}`,
+        source: `${sourceLabel(file)}:${index + 1}`,
+      };
+      (linkableFrom(record.target, home) ? tierAliases : tierCopies).push(record);
+    });
+  });
+
+test('component tier: _public.scss declarations equal the eligible variables exactly', () => {
+  const eligible = new Map([...tierRecords].filter(([, { reason }]) => !reason));
+  const missing = [...eligible.keys()].filter((variable) => !tierDeclared.has(variable)).sort()
+    .map((variable) => `${variable} (${eligible.get(variable)!.component}): not published — `
+      + 'run pnpm naming:publish');
+  const extra = [...tierDeclared.keys()]
+    .filter((variable) => !eligible.has(variable) && !tierLinks.has(`--dx-${variable.slice(1)}`)).sort()
+    .map((variable) => {
+      const reason = tierRecords.get(variable)?.reason;
+      return `--dx-${variable.slice(1)} (${sourceLabel(tierDeclared.get(variable)!)}): ${reason
+        ? `the variable is excluded from the tier (${reason})`
+        : 'no such variable in the component\'s declaration files'} — run pnpm naming:publish`;
+    });
+  expect({ missing, extra }).toEqual({ missing: [], extra: [] });
+});
+
+test('component tier: references are written as links to a resolvable target', () => {
+  const offenders: string[] = [];
+  publicTierFiles.forEach((file) => {
+    stripScssComments(readFileSync(file, 'utf8'), sourceLabel(file)).split('\n').forEach((line) => {
+      if (!line.includes('var(--dx-')) return;
+      const declaration = /^\s*(--dx-[a-z0-9-]+)\s*:\s*(.*);\s*$/.exec(line);
+      if (!declaration) {
+        offenders.push(`${sourceLabel(file)}: "${line.trim()}" — var(--dx-…) outside a tier declaration`);
+        return;
+      }
+      const [, property, value] = declaration;
+      const link = tierLinks.get(property);
+      if (!link || `var(${link.target})` !== value.trim()) {
+        offenders.push(`${sourceLabel(file)}: ${property} — a reference must be the WHOLE value and `
+          + 'written as var(--dx-target); a comparison or a formula freezes the relation at build '
+          + 'time (GOTCHAS §18.3)');
+        return;
+      }
+      if (link.target === property) {
+        offenders.push(`${sourceLabel(file)}: ${property} links to itself`);
+        return;
+      }
+      if (!linkableFrom(link.target, file)) {
+        offenders.push(`${sourceLabel(file)}: ${property} links to ${link.target}, which is neither `
+          + 'declared by this component nor published on :root — outside the target\'s root the '
+          + 'link resolves to nothing and the declaration disappears; publish the value instead '
+          + '(GOTCHAS §18.3)');
+      }
+    });
+  });
+  expect(offenders).toEqual([]);
+});
+
+test('component tier: an alias is published as a link, not as a copy of the value', () => {
+  const offenders = tierAliases
+    .filter((alias) => tierLinks.get(alias.property)?.target !== alias.target)
+    .map((alias) => `${alias.source}: the declaration is a reference to `
+      + `${alias.target.slice('--dx-'.length)}, so the tier must publish `
+      + `\`${alias.property}: var(${alias.target});\` and the declaration itself must go — `
+      + 'publishing a copy of the value freezes the relation (GOTCHAS §18.3)');
+  expect(offenders).toEqual([]);
+});
+
+/*
+ * The boundary of the rule above, kept as a case of its own because the tree holds a live example
+ * and the two rules read as one: `$grid-menu-item-icon-size: $button-icon-size` (gridBase/_sizes)
+ * points at a name published on `.dx-button` / `.dx-dropdowneditor-button`. The grid rule that
+ * draws the menu item's icon is under neither, so here the copied value is the correct answer and
+ * the link form is the defect.
+ */
+test('component tier: an alias whose target sits on another root stays a copy', () => {
+  const offenders = tierCopies
+    .filter((copy) => tierLinks.has(copy.property))
+    .map((copy) => `${copy.source}: ${copy.property} is published as a link to ${copy.target}, `
+      + 'which lives on another component\'s root — the value must be published instead '
+      + '(GOTCHAS §18.3)');
+  expect(offenders).toEqual([]);
+});
+
+/*
+ * The defect this catches is invisible while the two values agree: `…-text-bg-focused` pointed at
+ * `…-outlined-bg-HOVERED` (button, PR #34888) and rendered correctly only because the outlined
+ * variant painted focus and hover the same. Dropping the state is legitimate — `…-bg-hovered:
+ * var(--dx-…-bg)` says "this state does not repaint it" — landing on a DIFFERENT state never is.
+ */
+test('component tier: a link between two states must keep the state', () => {
+  // longest first: `selected-hovered` must not be read as `hovered`
+  const states = [...(registries.states as string[])].sort((a, b) => b.length - a.length);
+  const stateOf = (property: string): string | undefined => states
+    .find((state) => property.endsWith(`-${state}`));
+
+  const offenders: string[] = [];
+  tierLinks.forEach(({ target, file }, property) => {
+    const state = stateOf(property);
+    const targetState = stateOf(target);
+    if (state && targetState && state !== targetState) {
+      offenders.push(`${sourceLabel(file)}: ${property} links to ${target} — the ${state} state `
+        + `points at ${targetState}`);
+    }
+  });
+  expect(offenders).toEqual([]);
+});
+
+test('component tier: the collector matches registries.rootSelectors exactly', () => {
+  const collector = stripScssComments(
+    readFileSync(join(themeRoot, '_public-tier.scss'), 'utf8'),
+    'fluent-next/_public-tier.scss',
+  );
+  const namespaceToFolder = new Map<string, string>();
+  [...collector.matchAll(/@use "([^"]+)\/public" as (\w+);/g)]
+    .forEach((match) => namespaceToFolder.set(match[2], match[1]));
+
+  const offenders: string[] = [];
+  const includedFolders: string[] = [];
+  // the @use header is not a selector — rules are matched on the body after it
+  const rulesSource = collector.split('\n').filter((line) => !line.startsWith('@use ')).join('\n');
+  [...rulesSource.matchAll(/([^{}]+)\{([^{}]*)\}/g)].forEach(([, selectorText, body]) => {
+    const namespaces = [...body.matchAll(/@include (\w+)\.publish\(\);/g)].map((match) => match[1]);
+    if (!namespaces.length) return;
+    const folders = namespaces.map((namespace) => namespaceToFolder.get(namespace) ?? `?${namespace}`);
+    includedFolders.push(...folders);
+    const ruleComponents = new Set(folders
+      .map((folder) => (systemTier.includes(folder) ? folder : components[folder])));
+    /*
+     * A rule may serve several components — the document root carries every system-tier folder,
+     * and stylelint forbids repeating the same selector. What must hold is narrower than "one
+     * component per rule": each component in the rule owns exactly this selector list.
+     */
+    const actual = selectorText.split(',').map((selector) => selector.trim()).filter(Boolean).sort();
+    [...ruleComponents].forEach((component) => {
+      const expected = [...(registries.rootSelectors[component] ?? [])].sort();
+      if (JSON.stringify(actual) !== JSON.stringify(expected)) {
+        offenders.push(`collector rule for "${component}": selectors [${actual.join(', ')}] != `
+          + `registries.rootSelectors [${expected.join(', ')}]`);
+      }
+    });
+  });
+
+  const publicFolders = [...new Set(publicTierFiles.map(folderOf))];
+  const sortedIncludes = [...includedFolders].sort();
+  expect({
+    offenders,
+    includedTwice: sortedIncludes.filter((folder, index) => sortedIncludes[index - 1] === folder),
+    notIncluded: publicFolders.filter((folder) => !includedFolders.includes(folder)).sort(),
+    unknownNamespace: includedFolders.filter((folder) => folder.startsWith('?')),
+  }).toEqual({ offenders: [], includedTwice: [], notIncluded: [], unknownNamespace: [] });
+});
+
+test('component tier: every --dx-… read in the theme resolves to a declared name', () => {
+  /*
+   * stylelint does not ban the FORM (the tier is consumed through it) — this is the check that
+   * took over: a read anywhere in fluent-next must hit the tier, the legacy surface, or the JS
+   * runtime contract. A typo'd custom property compiles and dies silently at computed-value time;
+   * this fails the build instead.
+   *
+   * `var()` is not the only way to read one: a style query names the property in its condition
+   * (`@container style(--dx-theme-mode: dark)`), and a typo there is even quieter — the block
+   * simply never matches, so the rules inside it go missing rather than losing one value.
+   */
+  const declared = new Set([
+    ...[...tierDeclared.keys()].map((variable) => `--dx-${variable.slice(1)}`),
+    ...RUNTIME_CONTRACT,
+    ...ACCENT_CONTRACT,
+    ...findings.publicTierManualDeclarations.map((entry) => entry.slice(entry.indexOf(': ') + 2)),
+  ]);
+  const READS = [
+    { pattern: /var\(\s*(--dx-[a-z0-9-]+)/g, form: (name: string): string => `var(${name})` },
+    { pattern: /style\(\s*(--dx-[a-z0-9-]+)/g, form: (name: string): string => `style(${name}: …)` },
+  ];
+  const offenders = walk(themeRoot, '.scss').flatMap((file) => {
+    const content = stripScssComments(readFileSync(file, 'utf8'), sourceLabel(file));
+
+    return READS.flatMap(({ pattern, form }) => [...content.matchAll(pattern)]
+      .map((match) => match[1])
+      .filter((name) => !declared.has(name))
+      .map((name) => `${sourceLabel(file)}: ${form(name)} resolves to no declared --dx name`));
+  });
+  expect(offenders).toEqual([]);
+});
+
+/*
+ * The runtime reachability audit (playground/tier-reachability-audit.html) is the only judge of
+ * whether a variable reaches an element: "nested or not" is decided by the DOM, not by the text of
+ * a selector. But the gallery has an illness of its own — the vacuous pass: a component that is not
+ * on the page has nothing to check, and the audit stays green. That is how wave F stayed at 35
+ * widgets while wave H added 28 more components the gallery never built: their holes surfaced only
+ * in CI, as 208 screenshots.
+ *
+ * This case holds the gallery's roster: every component that publishes the tier must appear on the
+ * page, either as a widget (`widget('dxCardView', …)`) or as markup carrying one of its classes.
+ * Whether the SATELLITES are complete (is the popup opened, is the portal built) cannot be checked
+ * statically — the page itself does that, counting the roots that matched no element at all.
+ */
+test('component tier: every publishing component appears in the runtime-audit gallery', () => {
+  const gallery = join(packageRoot, '..', 'devextreme', 'playground', 'tier-reachability-audit.html');
+  if (!existsSync(gallery)) throw new Error(`the runtime-audit gallery is missing at ${gallery}`);
+  const source = readFileSync(gallery, 'utf8').toLowerCase();
+  const missing = publicTierFiles
+    .map((file) => sourceLabel(file).split('/')[1])
+    .filter((folder) => !systemTier.includes(folder))
+    .filter((folder) => {
+      if (source.includes(`dx${folder.toLowerCase()}`)) return false;
+      const component = components[folder];
+      const roots: string[] = registries.rootSelectors[component] ?? [];
+      return !roots.some((selector) => selector !== ':root' && source.includes(selector.slice(1)));
+    })
+    .map((folder) => `${folder} publishes the tier but the gallery never builds it — add `
+      + `widget('dx${folder}') or markup carrying one of its classes to buildGallery/addPortals`);
+  expect([...new Set(missing)].sort()).toEqual([]);
+});
+
+/*
+ * The mirror of `node tools/naming/publish.mjs --check`, the way "the rename mapping stays
+ * collision-free and fully applied" mirrors `rename.mjs --check`: the committed projections and the
+ * collector are exactly what the emitter would write from today's declarations, and the hand-written
+ * links break none of its rules.
+ */
+test('component tier: the committed files are what tools/naming/publish.mjs writes', () => {
+  const existing = new Map(themeSources
+    .filter(({ path }) => isPublicTierFile(path))
+    .map(({ path, raw }) => [path, raw]));
+  const baseSources = walk(join(widgetsRoot, 'base'), '.scss').map(sourceFileOf);
+  const plan = planPublication(themeSources, baseSources, registries, existing);
+  expect(plan.problems).toEqual([]);
+  expect(stalePaths(plan, existing).map((path) => `${path} is stale — run pnpm naming:publish`)).toEqual([]);
+});
+
+test('component tier: every declaring component has bundle-gated root selectors', () => {
+  // The selectors themselves are gated against the built bundle by derive-registries.mjs; this
+  // holds the committed json coherent — a declaring component may not lack a scope.
+  const declaring = [...new Set(publicTierFiles
+    .map((file) => sourceLabel(file).split('/')[1])
+    .map((folder) => (systemTier.includes(folder) ? folder : components[folder])))];
+  expect(declaring.filter((component) => !registries.rootSelectors?.[component]?.length))
+    .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/fluent-next-size-markers.test.ts b/packages/devextreme-scss/tests/fluent-next-size-markers.test.ts
new file mode 100644
index 000000000000..8e2c5958bc4c
--- /dev/null
+++ b/packages/devextreme-scss/tests/fluent-next-size-markers.test.ts
@@ -0,0 +1,125 @@
+/*
+ * Every fixed pixel size in fluent-next must be classified.
+ *
+ * A px literal with no marker is invisible: it never reaches SCALES.md, so design never sees it and
+ * no decision about it exists (design#1555). The markers are the only channel, so a new unmarked
+ * literal fails here rather than silently joining the backlog.
+ *
+ * The scan itself lives in tools/review/px-audit.mjs — the same module the report is built from, so
+ * the gate and SCALES.md can never disagree about what counts as marked. This test drives it as a
+ * child process because the tool is ESM and jest transforms TypeScript only.
+ */
+
+import { execFileSync } from 'child_process';
+import {
+  mkdtempSync, readdirSync, readFileSync, writeFileSync,
+} from 'fs';
+import { tmpdir } from 'os';
+import { basename, join } from 'path';
+
+const packageRoot = process.cwd();
+const themeRoot = join(packageRoot, 'scss', 'widgets', 'fluent-next');
+const tool = join(packageRoot, 'tools', 'review', 'px-audit.mjs');
+
+const walk = (dir: string): string[] => readdirSync(dir, { withFileTypes: true })
+  .flatMap((entry) => {
+    const full = join(dir, entry.name);
+    if (entry.isDirectory()) return walk(full);
+    return entry.name.endsWith('.scss') ? [full] : [];
+  });
+const vocabulary = JSON.parse(
+  readFileSync(join(packageRoot, 'tools', 'review', 'size-markers.json'), 'utf8'),
+);
+const markers: string[] = vocabulary.categories
+  .map((category: { marker: string | null }) => category.marker)
+  .filter(Boolean);
+
+type Place = { file: string; line: number; literals: string[]; text: string };
+
+const audit = (root?: string): { marked: number; unmarked: Place[] } => {
+  const args = [tool, '--json', ...(root ? [`--root=${root}`] : [])];
+  try {
+    return JSON.parse(execFileSync(process.execPath, args, { encoding: 'utf8' }));
+  } catch (error) {
+    // a non-empty scan exits 1 by design — the payload is still on stdout
+    const { stdout, status } = error as { stdout?: string; status?: number };
+    if (!stdout) throw error;
+    expect(status).toBe(1);
+    return JSON.parse(stdout);
+  }
+};
+
+test('every fixed px size in fluent-next carries a classification marker', () => {
+  const { unmarked } = audit();
+  expect(unmarked.map((place) => `${place.file}:${place.line} (${place.literals.join(', ')}) `
+    + `${place.text}\n    pick a marker: ${markers.join(', ')} — see tools/review/size-markers.json`))
+    .toEqual([]);
+});
+
+test('the gate rejects a new unmarked literal', () => {
+  // negative self-check: a green gate must mean "nothing to find", not "the scan stopped working"
+  const fixture = mkdtempSync(join(tmpdir(), 'fluent-next-px-audit-'));
+  writeFileSync(join(fixture, '_marked.scss'), [
+    '.dx-widget {',
+    '  padding: 3px; // dx-fixed-size: 3px',
+    '  /* 7px inside a block comment is not code */',
+    '  margin: 4px; // a note that says 5px is not a marker either',
+    '}',
+    '',
+  ].join('\n'));
+  writeFileSync(join(fixture, '_unmarked.scss'), '.dx-widget {\n  border-width: 6px;\n}\n');
+
+  const { marked, unmarked } = audit(fixture);
+  expect({
+    marked,
+    unmarked: unmarked.map((place) => `${basename(place.file)}:${place.line} ${place.text}`).sort(),
+  }).toEqual({
+    marked: 1,
+    unmarked: [
+      '_marked.scss:4 margin: 4px; // a note that says 5px is not a marker either',
+      '_unmarked.scss:2 border-width: 6px;',
+    ],
+  });
+});
+
+test('no marker name is a substring of a custom property name used in the theme', () => {
+  /*
+   * The scan looks for the marker as a substring of the line's comment, so a marker that reads like
+   * a custom property would match prose about that property. `dx-border-width` was rejected for
+   * exactly this reason: the theme declares `--dx-border-width`, and a comment mentioning it would
+   * have filed that line under "border thickness".
+   */
+  const names = new Set(walk(themeRoot).flatMap((file) => [
+    ...readFileSync(file, 'utf8').matchAll(/--(dx[a-z0-9-]*)/g),
+  ].map(([, name]) => name)));
+  const collisions = markers.flatMap((marker) => [...names]
+    .filter((name) => name.includes(marker))
+    .map((name) => `marker "${marker}" is contained in --${name}: rename the marker`));
+  expect(collisions).toEqual([]);
+});
+
+/*
+ * A glyph is sized from the spacing scale, not from a typography one.
+ *
+ * Measured on the package at 262.23.0: every icon size core, vnext, blazor and wpf declare comes
+ * from spacing (icon.size = {spacing.120} / {spacing.160} / {spacing.200}), at every density, and
+ * not one from font-size. The theme read font-size in fifteen places until they were moved, and the
+ * move cost nothing because font-size-N and spacing-N resolve to the same rem at every step - which
+ * is exactly why the two are easy to confuse again. A `font-size` that happens to be right is the
+ * failure mode this catches.
+ *
+ * Deliberately narrow: it matches a variable whose own name says it sizes a glyph. The rest of
+ * tools/review/sizes.mjs stays a report - see the note in its header for why a step cannot be
+ * gated the way a colour family can.
+ */
+test('glyph sizes read the spacing scale, not a typography one', () => {
+  const TYPOGRAPHY = /ds\.\$(font-size|line-height|font-weight)-/;
+  const GLYPH = /^\$[a-z0-9-]*(icon|glyph|chevron|arrow)[a-z0-9-]*\s*:/;
+  const offenders = walk(themeRoot)
+    .filter((file) => basename(file) === '_sizes.scss')
+    .flatMap((file) => readFileSync(file, 'utf8').split('\n')
+      .map((line, index) => ({ file, line, number: index + 1 }))
+      .filter(({ line }) => GLYPH.test(line.trim()) && TYPOGRAPHY.test(line))
+      .map(({ file: f, number }) => `${f.replace(`${packageRoot}/`, '')}:${number}`));
+  expect(offenders).toEqual([]);
+});
diff --git a/packages/devextreme-scss/tests/module-variable-default.test.ts b/packages/devextreme-scss/tests/module-variable-default.test.ts
index 92edb88505f2..081c6a562cfd 100644
--- a/packages/devextreme-scss/tests/module-variable-default.test.ts
+++ b/packages/devextreme-scss/tests/module-variable-default.test.ts
@@ -2,6 +2,10 @@ import { createRunner, scss } from './stylelint-rule';
 
 const ruleName = 'dx/module-variable-default';
 const { lint, fix } = createRunner('module-variable-default.mjs', ruleName);
+const classified = createRunner('module-variable-default.mjs', ruleName, [
+  true,
+  { exemptMarkersFrom: 'tools/review/size-markers.json' },
+]);
 
 test('a module-level variable without the flag is reported, at the top level and inside @if branches', () => {
   const { warnings } = lint('missing.scss', scss(
@@ -88,3 +92,28 @@ test('--fix appends the flag, also to a multi-line value', () => {
     '}',
   ));
 });
+
+test('a size classified by the px audit is not a knob, so the flag is not required on it', () => {
+  const source = scss(
+    '$plain: 7px;',
+    '$fixed: 28px; // dx-fixed-size: drawn as rings, so a var() cannot pass',
+    '$shadow: inset 0 2px 0 0 red; // dx-shadow-geometry',
+    '',
+    '/*',
+    ' * dx-fixed-size: its half is negated at twenty positions, so a var() would cost twenty calc()',
+    ' */',
+    '$above: 11px;',
+    '',
+    '// dx-fixed-size: the marker may also be a line comment right above',
+    '$line-above: 12px;',
+    '',
+    '/* dx-fixed-size: a marker one blank line away explains something else */',
+    '',
+    '$detached: 13px;',
+  );
+
+  // only the two unclassified sizes are reported: $plain, and $detached, whose marker is a blank
+  // line away and therefore explains something else
+  expect(classified.lint('classified.scss', source).warnings.map(({ line }) => line)).toEqual([1, 15]);
+  expect(lint('unconfigured.scss', source).warnings).toHaveLength(6);
+});
diff --git a/packages/devextreme-scss/tests/name-truth.test.ts b/packages/devextreme-scss/tests/name-truth.test.ts
new file mode 100644
index 000000000000..9c484b7733a6
--- /dev/null
+++ b/packages/devextreme-scss/tests/name-truth.test.ts
@@ -0,0 +1,57 @@
+/*
+ * A published name has to describe the CSS property it is assigned to.
+ *
+ * The naming enforcer checks the SHAPE of a name - component, element, part, state - and the colour
+ * audit checks that a colour slot reads the right role. Neither asks whether `-height` is written to
+ * a height or `-gap` to a gap, and `--dx-list-bottom-padding` fed a margin for a year without a
+ * single check going red.
+ *
+ * Measured from the built bundle by tools/review/name-truth.mjs, so the question is what the browser
+ * does with the name, not what the SCSS looks like. Only DIRECT assignments are judged: a name
+ * inside a calc() is a quantity another property is computed from, and naming it after that property
+ * would be the lie.
+ */
+
+import { execFileSync } from 'child_process';
+import { readFileSync } from 'fs';
+import { join } from 'path';
+
+const packageRoot = process.cwd();
+const tool = join(packageRoot, 'tools', 'review', 'name-truth.mjs');
+const reviewed = JSON.parse(readFileSync(join(packageRoot, 'tools', 'review', 'name-truth.json'), 'utf8'));
+
+type Row = { name: string; says: string; paints: string[]; decision?: string; why?: string };
+
+const actual: {
+  summary: Record<string, number>;
+  rows: (Row & { verdict: string; bad: string[] })[];
+} = JSON.parse(execFileSync('node', [tool, '--json'], { encoding: 'utf8', maxBuffer: 64 * 1024 * 1024 }));
+
+const DECISIONS = ['banked', 'by-equality', 'defect'];
+
+test('names whose word disagrees with the property they feed are the reviewed ones', () => {
+  const seen = actual.rows
+    .filter((r) => r.verdict === 'wrong')
+    .map((r) => ({ name: r.name, says: r.says, paints: r.bad }))
+    .sort((a, b) => a.name.localeCompare(b.name));
+
+  expect(seen.length).toBeGreaterThan(0);
+  expect(seen).toEqual(reviewed.rows.map(({ decision, why, ...rest }: Row) => rest));
+});
+
+test('every reviewed row carries a decision and a reason', () => {
+  const undecided = reviewed.rows
+    .filter((r: Row) => !r.decision || !DECISIONS.includes(r.decision) || !r.why?.trim())
+    .map((r: Row) => r.name);
+  expect(undecided).toEqual([]);
+});
+
+/*
+ * The vocabulary has to stay closed: a word the pass does not know is a name nobody is checking.
+ * Held loosely - this is a ceiling, not an exact count - because the number falls as words are
+ * given rules and that should not be a red build.
+ */
+test('the words the pass cannot read stay a short list', () => {
+  expect(actual.summary.noRule).toBeLessThanOrEqual(120);
+  expect(actual.summary.agrees).toBeGreaterThan(1800);
+});
diff --git a/packages/devextreme-scss/tests/no-identical-branch-declarations.test.ts b/packages/devextreme-scss/tests/no-identical-branch-declarations.test.ts
index 1c70a11fe2f9..5ff48e001caf 100644
--- a/packages/devextreme-scss/tests/no-identical-branch-declarations.test.ts
+++ b/packages/devextreme-scss/tests/no-identical-branch-declarations.test.ts
@@ -390,3 +390,56 @@ test('--fix takes the doc comment along when the declaration has to move', () =>
     '$divider: $border !default;',
   ));
 });
+
+test("a hoisted declaration takes its trailing comment with it", () => {
+  const { output, warnings } = fix('trailing-comment.scss', scss(
+    '$height: null !default;',
+    '$other: 4px !default;',
+    '',
+    '@if $size == "default" {',
+    '  $height: 17px !default; // dx-literal-required: read in a @container condition',
+    '  $other: 8px !default;',
+    '}',
+    '',
+    '@else {',
+    '  $height: 17px !default; // dx-literal-required: read in a @container condition',
+    '  $other: 6px !default;',
+    '}',
+  ));
+
+  expect(warnings).toEqual([]);
+  expect(output).toBe(scss(
+    '$height: 17px !default; // dx-literal-required: read in a @container condition',
+    '$other: 4px !default;',
+    '',
+    '@if $size == "default" {',
+    '  $other: 8px !default;',
+    '}',
+    '',
+    '@else {',
+    '  $other: 6px !default;',
+    '}',
+  ));
+});
+
+test('a chain whose branches disagree about the trailing comment is reported but not fixed', () => {
+  const source = scss(
+    '$height: null !default;',
+    '',
+    '@if $size == "default" {',
+    '  $height: 17px !default; // dx-literal-required: read in a @container condition',
+    '}',
+    '',
+    '@else {',
+    '  $height: 17px !default; // dx-fixed-size: drawn into the rule',
+    '}',
+  );
+  const { output, warnings } = fix('disagreeing-comment.scss', source);
+
+  expect(warnings).toEqual([{
+    line: 4,
+    rule: ruleName,
+    text: `"$height" has the same value in all 2 branches of the @if chain; declare it once outside the chain (${ruleName})`,
+  }]);
+  expect(output).toBe(source);
+});
diff --git a/packages/devextreme-scss/tests/opentype.js.d.ts b/packages/devextreme-scss/tests/opentype.js.d.ts
index 37bcc4bfeb97..dfd39f3290b2 100644
--- a/packages/devextreme-scss/tests/opentype.js.d.ts
+++ b/packages/devextreme-scss/tests/opentype.js.d.ts
@@ -9,7 +9,7 @@ declare module 'opentype.js' {
         length: number;
 
         get(index: Number): Glyph;
-        push(index: Number, loader: (font: Font, index: Number) => Glyph);
+        push(index: Number, loader: (font: Font, index: Number) => Glyph): void;
     }
 
     interface Font {
diff --git a/packages/devextreme-scss/tests/public-renames.test.ts b/packages/devextreme-scss/tests/public-renames.test.ts
new file mode 100644
index 000000000000..0bf9b666ccaf
--- /dev/null
+++ b/packages/devextreme-scss/tests/public-renames.test.ts
@@ -0,0 +1,108 @@
+/*
+ * The component tier is the theme's public surface: `--dx-*` custom properties a user overrides
+ * from their own stylesheet without rebuilding anything. Their names are derived mechanically from
+ * the SCSS variables (tools/naming/publish.mjs), so an ordinary internal rename retires a public
+ * name and the diff looks like plain regeneration.
+ *
+ * tools/naming/public-renames.json is the record of every such retirement, and this gate is what
+ * gives the record teeth: a retired name must not come back. That forbids the tempting fix — an
+ * alias in _public-links.scss that keeps the old name alive next to the new one, leaving two names
+ * for one role and no way to tell which is real.
+ *
+ * The fluent-next bundles are the whole scope, as in public-surface.test.ts. The older themes
+ * declare a small core vocabulary of their own that overlaps this surface by inheritance —
+ * dx.light.css keeps declaring --dx-color-primary whatever fluent-next does with the name — so
+ * reading them here would say nothing about fluent-next's tier and would make a retirement
+ * unshippable: public-surface.test.ts demands a journal entry for the removal, and that entry is
+ * what the cross-theme scan would then fail on.
+ */
+
+import { readFileSync, readdirSync, existsSync } from 'fs';
+import { join } from 'path';
+
+type Entry = {
+  name: string;
+  replacement: string | null;
+  release: string;
+  note: string;
+};
+
+const packageRoot = process.cwd();
+const artifactsCss = join(packageRoot, '..', 'devextreme', 'artifacts', 'css');
+const journalPath = join(packageRoot, 'tools', 'naming', 'public-renames.json');
+
+const bundleNames = existsSync(artifactsCss)
+  ? readdirSync(artifactsCss).filter((name) => /^dx\.fluent-next\..*\.css$/.test(name)).sort()
+  : [];
+
+if (!bundleNames.length) {
+  throw new Error(`no dx.fluent-next.*.css bundles found in ${artifactsCss} — the gate needs the `
+    + 'built themes; run `pnpm nx run devextreme-scss:build:themes`');
+}
+
+const bundles = bundleNames.map((name) => ({
+  name,
+  css: readFileSync(join(artifactsCss, name), 'utf8'),
+}));
+
+const journal: { retired: Entry[] } = JSON.parse(readFileSync(journalPath, 'utf8'));
+const { retired } = journal;
+
+const NAME = /^--dx-[a-z0-9]+(-[a-z0-9]+)*$/;
+
+/*
+ * A name is a prefix of longer ones (--dx-button-bg vs --dx-button-bg-hovered), so the boundary has
+ * to exclude the name characters `\b` happily matches. Declarations and `var()` reads both count: a
+ * retired name left behind in either place is the same mistake.
+ */
+const occurrences = (
+  where: { name: string; css: string }[],
+  variable: string,
+): string[] => {
+  const pattern = new RegExp(`${variable}(?![\\w-])`);
+  return where.filter(({ css }) => pattern.test(css)).map(({ name }) => name);
+};
+
+/*
+ * With an empty journal every scan below returns nothing, which is also what a broken scan returns.
+ * This pins a name that does ship, so "no retired name found" means the bundles were read.
+ */
+test('the bundle scan finds a name that ships', () => {
+  expect(occurrences(bundles, '--dx-button-border-radius'))
+    .toEqual(bundles.map(({ name }) => name));
+});
+
+test('every journal entry is complete', () => {
+  const malformed = retired.filter((entry) => !NAME.test(entry.name)
+    || (entry.replacement !== null && !NAME.test(entry.replacement))
+    || !entry.release
+    || !entry.note);
+
+  expect(malformed.map(({ name }) => name)).toEqual([]);
+});
+
+test('the journal lists each name once', () => {
+  const names = retired.map(({ name }) => name);
+
+  expect(names.filter((name, index) => names.indexOf(name) !== index)).toEqual([]);
+});
+
+test('no retired name ships in any fluent-next bundle', () => {
+  const found = retired.flatMap(({ name }) => occurrences(bundles, name)
+    .map((bundle) => `${bundle}: ${name}`));
+
+  expect(found).toEqual([]);
+});
+
+/*
+ * A replacement that does not ship makes the entry useless to the person reading the release note.
+ * If the replacement was itself retired later, point the older entry at the current name.
+ */
+test('every replacement ships', () => {
+  const missing = retired
+    .flatMap(({ name, replacement }) => (replacement === null ? [] : [{ name, replacement }]))
+    .filter(({ replacement }) => occurrences(bundles, replacement).length === 0)
+    .map(({ name, replacement }) => `${name} -> ${replacement}`);
+
+  expect(missing).toEqual([]);
+});
diff --git a/packages/devextreme-scss/tests/public-surface.baseline.json b/packages/devextreme-scss/tests/public-surface.baseline.json
new file mode 100644
index 000000000000..1d4a25fed65a
--- /dev/null
+++ b/packages/devextreme-scss/tests/public-surface.baseline.json
@@ -0,0 +1,2313 @@
+[
+  "--dx-accent-chroma-min",
+  "--dx-accent-color-10",
+  "--dx-accent-color-100",
+  "--dx-accent-color-110",
+  "--dx-accent-color-120",
+  "--dx-accent-color-130",
+  "--dx-accent-color-140",
+  "--dx-accent-color-150",
+  "--dx-accent-color-160",
+  "--dx-accent-color-170",
+  "--dx-accent-color-180",
+  "--dx-accent-color-20",
+  "--dx-accent-color-30",
+  "--dx-accent-color-40",
+  "--dx-accent-color-50",
+  "--dx-accent-color-60",
+  "--dx-accent-color-70",
+  "--dx-accent-color-80",
+  "--dx-accent-color-90",
+  "--dx-accent-color-source",
+  "--dx-accent-lightness-max",
+  "--dx-accent-lightness-min",
+  "--dx-accordion-bg",
+  "--dx-accordion-body-padding",
+  "--dx-accordion-content",
+  "--dx-accordion-content-disabled",
+  "--dx-accordion-item-border-radius",
+  "--dx-accordion-item-opened-margin",
+  "--dx-accordion-title-bg-active",
+  "--dx-accordion-title-bg-hovered",
+  "--dx-accordion-title-content-active",
+  "--dx-accordion-title-font-size",
+  "--dx-accordion-title-font-weight",
+  "--dx-accordion-title-height",
+  "--dx-accordion-title-icon-margin",
+  "--dx-accordion-title-icon-size",
+  "--dx-accordion-title-padding-block",
+  "--dx-accordion-title-padding-inline",
+  "--dx-action-sheet-content-disabled",
+  "--dx-action-sheet-item-margin",
+  "--dx-action-sheet-item-margin-block-start",
+  "--dx-backdrop-bg",
+  "--dx-badge-bg",
+  "--dx-badge-bg-disabled",
+  "--dx-badge-border-radius",
+  "--dx-badge-content",
+  "--dx-badge-content-disabled",
+  "--dx-badge-font-size",
+  "--dx-badge-line-height",
+  "--dx-badge-padding",
+  "--dx-border-radius",
+  "--dx-border-width",
+  "--dx-box-item-content-font-size",
+  "--dx-button-border-radius",
+  "--dx-button-border-width",
+  "--dx-button-box-shadow",
+  "--dx-button-contained-bg-disabled",
+  "--dx-button-content-disabled",
+  "--dx-button-content-line-height",
+  "--dx-button-content-padding",
+  "--dx-button-danger-contained-bg",
+  "--dx-button-danger-contained-bg-active",
+  "--dx-button-danger-contained-bg-focused",
+  "--dx-button-danger-contained-bg-hovered",
+  "--dx-button-danger-contained-bg-selected",
+  "--dx-button-danger-contained-content",
+  "--dx-button-danger-contained-content-selected",
+  "--dx-button-danger-contained-icon",
+  "--dx-button-danger-outlined-bg",
+  "--dx-button-danger-outlined-bg-active",
+  "--dx-button-danger-outlined-bg-focused",
+  "--dx-button-danger-outlined-bg-hovered",
+  "--dx-button-danger-outlined-bg-selected",
+  "--dx-button-danger-outlined-border",
+  "--dx-button-danger-outlined-content",
+  "--dx-button-danger-outlined-content-active",
+  "--dx-button-danger-outlined-content-hovered",
+  "--dx-button-danger-outlined-content-selected",
+  "--dx-button-danger-text-bg",
+  "--dx-button-danger-text-bg-active",
+  "--dx-button-danger-text-bg-focused",
+  "--dx-button-danger-text-bg-hovered",
+  "--dx-button-danger-text-bg-selected",
+  "--dx-button-danger-text-content",
+  "--dx-button-danger-text-content-active",
+  "--dx-button-danger-text-content-hovered",
+  "--dx-button-danger-text-content-selected",
+  "--dx-button-default-contained-bg",
+  "--dx-button-default-contained-bg-active",
+  "--dx-button-default-contained-bg-focused",
+  "--dx-button-default-contained-bg-hovered",
+  "--dx-button-default-contained-bg-selected",
+  "--dx-button-default-contained-content",
+  "--dx-button-default-contained-content-selected",
+  "--dx-button-default-contained-icon",
+  "--dx-button-default-outlined-bg",
+  "--dx-button-default-outlined-bg-active",
+  "--dx-button-default-outlined-bg-focused",
+  "--dx-button-default-outlined-bg-hovered",
+  "--dx-button-default-outlined-bg-selected",
+  "--dx-button-default-outlined-border",
+  "--dx-button-default-outlined-content",
+  "--dx-button-default-outlined-content-active",
+  "--dx-button-default-outlined-content-hovered",
+  "--dx-button-default-outlined-content-selected",
+  "--dx-button-default-text-bg",
+  "--dx-button-default-text-bg-active",
+  "--dx-button-default-text-bg-focused",
+  "--dx-button-default-text-bg-hovered",
+  "--dx-button-default-text-bg-selected",
+  "--dx-button-default-text-content",
+  "--dx-button-default-text-content-active",
+  "--dx-button-default-text-content-hovered",
+  "--dx-button-default-text-content-selected",
+  "--dx-button-group-item-contained-border-inline-end-width",
+  "--dx-button-group-separator",
+  "--dx-button-group-text-column-gap",
+  "--dx-button-height",
+  "--dx-button-icon-margin",
+  "--dx-button-icon-size",
+  "--dx-button-icon-text-padding-inline-start",
+  "--dx-button-normal-contained-bg",
+  "--dx-button-normal-contained-bg-active",
+  "--dx-button-normal-contained-bg-focused",
+  "--dx-button-normal-contained-bg-hovered",
+  "--dx-button-normal-contained-bg-selected",
+  "--dx-button-normal-contained-content",
+  "--dx-button-normal-contained-content-selected",
+  "--dx-button-normal-contained-icon",
+  "--dx-button-normal-outlined-bg",
+  "--dx-button-normal-outlined-bg-active",
+  "--dx-button-normal-outlined-bg-focused",
+  "--dx-button-normal-outlined-bg-hovered",
+  "--dx-button-normal-outlined-bg-selected",
+  "--dx-button-normal-outlined-border",
+  "--dx-button-normal-text-bg",
+  "--dx-button-normal-text-bg-active",
+  "--dx-button-normal-text-bg-focused",
+  "--dx-button-normal-text-bg-hovered",
+  "--dx-button-normal-text-bg-selected",
+  "--dx-button-outlined-border-disabled",
+  "--dx-button-padding-block",
+  "--dx-button-padding-inline",
+  "--dx-button-success-contained-bg",
+  "--dx-button-success-contained-bg-active",
+  "--dx-button-success-contained-bg-focused",
+  "--dx-button-success-contained-bg-hovered",
+  "--dx-button-success-contained-bg-selected",
+  "--dx-button-success-contained-content",
+  "--dx-button-success-contained-content-selected",
+  "--dx-button-success-contained-icon",
+  "--dx-button-success-outlined-bg",
+  "--dx-button-success-outlined-bg-active",
+  "--dx-button-success-outlined-bg-focused",
+  "--dx-button-success-outlined-bg-hovered",
+  "--dx-button-success-outlined-bg-selected",
+  "--dx-button-success-outlined-border",
+  "--dx-button-success-outlined-content",
+  "--dx-button-success-outlined-content-active",
+  "--dx-button-success-outlined-content-hovered",
+  "--dx-button-success-outlined-content-selected",
+  "--dx-button-success-text-bg",
+  "--dx-button-success-text-bg-active",
+  "--dx-button-success-text-bg-focused",
+  "--dx-button-success-text-bg-hovered",
+  "--dx-button-success-text-bg-selected",
+  "--dx-button-success-text-content",
+  "--dx-button-success-text-content-active",
+  "--dx-button-success-text-content-hovered",
+  "--dx-button-success-text-content-selected",
+  "--dx-button-text-font-weight",
+  "--dx-button-text-letter-spacing",
+  "--dx-button-text-line-height",
+  "--dx-button-text-transform",
+  "--dx-calendar-bg",
+  "--dx-calendar-bg-hovered",
+  "--dx-calendar-border-width",
+  "--dx-calendar-cell-bg-active",
+  "--dx-calendar-cell-bg-selected",
+  "--dx-calendar-cell-bg-selected-disabled",
+  "--dx-calendar-cell-border-hovered",
+  "--dx-calendar-cell-content-disabled",
+  "--dx-calendar-cell-content-hovered",
+  "--dx-calendar-cell-content-selected",
+  "--dx-calendar-cell-contoured-border",
+  "--dx-calendar-cell-contoured-border-radius",
+  "--dx-calendar-cell-contoured-outline-width",
+  "--dx-calendar-cell-font-size",
+  "--dx-calendar-cell-other-content",
+  "--dx-calendar-cell-other-content-hovered",
+  "--dx-calendar-cell-today-border",
+  "--dx-calendar-cell-today-border-width",
+  "--dx-calendar-content",
+  "--dx-calendar-element-gap",
+  "--dx-calendar-footer-button-height",
+  "--dx-calendar-header-content",
+  "--dx-calendar-invalid-border",
+  "--dx-calendar-invalid-border-focused",
+  "--dx-calendar-legacy-height",
+  "--dx-calendar-legacy-width",
+  "--dx-calendar-navigator-content",
+  "--dx-calendar-view-multiview-padding-inline",
+  "--dx-calendar-week-day-header-font-size",
+  "--dx-calendar-week-day-header-font-weight",
+  "--dx-calendar-week-number-border-radius",
+  "--dx-calendar-week-number-cell-bg",
+  "--dx-calendar-week-number-cell-content",
+  "--dx-card-bg",
+  "--dx-card-bg-disabled",
+  "--dx-card-margin",
+  "--dx-card-shadow",
+  "--dx-card-view-bg",
+  "--dx-card-view-border-radius",
+  "--dx-card-view-card-bg",
+  "--dx-card-view-card-bg-selected",
+  "--dx-card-view-card-border",
+  "--dx-card-view-card-border-radius",
+  "--dx-card-view-card-border-selected",
+  "--dx-card-view-card-border-width",
+  "--dx-card-view-card-content",
+  "--dx-card-view-card-content-cell-padding-block",
+  "--dx-card-view-card-content-cell-padding-inline",
+  "--dx-card-view-card-content-field-value-highlighted-bg",
+  "--dx-card-view-card-content-field-value-highlighted-border-radius",
+  "--dx-card-view-card-content-field-value-highlighted-content",
+  "--dx-card-view-card-content-field-value-highlighted-font-weight",
+  "--dx-card-view-card-content-field-value-highlighted-padding",
+  "--dx-card-view-card-content-field-value-highlighted-shadow",
+  "--dx-card-view-card-content-padding",
+  "--dx-card-view-card-content-row-gap",
+  "--dx-card-view-card-content-selected",
+  "--dx-card-view-card-cover-bg",
+  "--dx-card-view-card-cover-bg-selected",
+  "--dx-card-view-card-cover-max-height",
+  "--dx-card-view-card-cover-noimage-bg",
+  "--dx-card-view-card-cover-noimage-bg-selected",
+  "--dx-card-view-card-cover-noimage-icon",
+  "--dx-card-view-card-cover-noimage-icon-selected",
+  "--dx-card-view-card-cover-noimage-icon-size",
+  "--dx-card-view-card-divider-border",
+  "--dx-card-view-card-divider-border-selected",
+  "--dx-card-view-card-field-caption-font-weight",
+  "--dx-card-view-card-field-caption-font-weight-selected",
+  "--dx-card-view-card-header-font-size",
+  "--dx-card-view-card-header-height",
+  "--dx-card-view-card-header-selection-checkbox-padding-inline-end",
+  "--dx-card-view-card-min-width",
+  "--dx-card-view-card-outline-focused",
+  "--dx-card-view-cards-column-gap",
+  "--dx-card-view-cards-row-gap",
+  "--dx-card-view-column-chooser-empty-message-content",
+  "--dx-card-view-column-chooser-empty-message-horizontal-padding",
+  "--dx-card-view-column-chooser-select-all-item-horizontal-padding",
+  "--dx-card-view-content-disabled",
+  "--dx-card-view-filter-panel-bg",
+  "--dx-card-view-filter-panel-border",
+  "--dx-card-view-filter-panel-border-radius",
+  "--dx-card-view-filter-panel-content",
+  "--dx-card-view-filter-panel-icon",
+  "--dx-card-view-font-weight",
+  "--dx-card-view-gap",
+  "--dx-card-view-header-gap",
+  "--dx-card-view-header-item-padding-inline-end",
+  "--dx-card-view-header-item-padding-inline-start",
+  "--dx-card-view-header-item-sort-indicator-border",
+  "--dx-card-view-header-item-sort-indicator-border-radius",
+  "--dx-card-view-header-item-sort-indicator-border-width",
+  "--dx-card-view-header-panel-dropzone-bg",
+  "--dx-card-view-header-panel-dropzone-border",
+  "--dx-card-view-header-panel-dropzone-border-radius",
+  "--dx-card-view-header-panel-dropzone-border-width",
+  "--dx-card-view-header-panel-dropzone-content",
+  "--dx-card-view-header-panel-dropzone-height",
+  "--dx-card-view-header-panel-dropzone-icon",
+  "--dx-card-view-header-panel-dropzone-inset-block-start",
+  "--dx-card-view-header-panel-empty-line-height",
+  "--dx-card-view-header-panel-item-bg",
+  "--dx-card-view-header-panel-item-bg-hovered",
+  "--dx-card-view-header-panel-item-border",
+  "--dx-card-view-header-panel-item-border-hovered",
+  "--dx-card-view-header-panel-item-border-radius",
+  "--dx-card-view-header-panel-item-border-width",
+  "--dx-card-view-header-panel-item-content",
+  "--dx-card-view-header-panel-item-content-hovered",
+  "--dx-card-view-header-panel-item-dragged-allowance-icon",
+  "--dx-card-view-header-panel-item-dragged-bg",
+  "--dx-card-view-header-panel-item-dragged-border",
+  "--dx-card-view-header-panel-item-dragged-content",
+  "--dx-card-view-header-panel-item-dragged-font-weight",
+  "--dx-card-view-header-panel-item-dragged-prohibition-icon",
+  "--dx-card-view-header-panel-item-dragged-shadow",
+  "--dx-card-view-header-panel-item-dragging-bg",
+  "--dx-card-view-header-panel-item-dragging-border",
+  "--dx-card-view-header-panel-item-dragging-content",
+  "--dx-card-view-header-panel-item-dragging-font-weight",
+  "--dx-card-view-header-panel-item-dragging-header-filter-icon-selected",
+  "--dx-card-view-header-panel-item-dragging-icon",
+  "--dx-card-view-header-panel-item-dragging-sort-index-content",
+  "--dx-card-view-header-panel-item-dragging-sort-index-font-weight",
+  "--dx-card-view-header-panel-item-font-weight",
+  "--dx-card-view-header-panel-item-font-weight-hovered",
+  "--dx-card-view-header-panel-item-header-filter-icon-selected",
+  "--dx-card-view-header-panel-item-header-filter-icon-selected-hovered",
+  "--dx-card-view-header-panel-item-icon",
+  "--dx-card-view-header-panel-item-icon-hovered",
+  "--dx-card-view-header-panel-item-icon-size",
+  "--dx-card-view-header-panel-item-outline-focused",
+  "--dx-card-view-header-panel-item-padding-block",
+  "--dx-card-view-header-panel-item-padding-inline",
+  "--dx-card-view-header-panel-item-sort-index-content",
+  "--dx-card-view-header-panel-item-sort-index-content-hovered",
+  "--dx-card-view-header-panel-item-sort-index-font-weight",
+  "--dx-card-view-header-panel-item-sort-index-font-weight-hovered",
+  "--dx-card-view-header-panel-margin-block",
+  "--dx-card-view-link-content",
+  "--dx-card-view-nodata-view-bg",
+  "--dx-card-view-nodata-view-content",
+  "--dx-card-view-nodata-view-icon",
+  "--dx-card-view-nodata-view-icon-bg",
+  "--dx-card-view-nodata-view-icon-container-margin",
+  "--dx-card-view-nodata-view-icon-container-size",
+  "--dx-card-view-nodata-view-icon-size",
+  "--dx-card-view-padding",
+  "--dx-card-view-text-content",
+  "--dx-cardview-card-cover-max-height",
+  "--dx-chat-alert-list-content",
+  "--dx-chat-alert-padding-block",
+  "--dx-chat-alerts-padding-block",
+  "--dx-chat-alerts-padding-inline",
+  "--dx-chat-alerts-row-gap",
+  "--dx-chat-avatar-bg",
+  "--dx-chat-avatar-content",
+  "--dx-chat-avatar-size",
+  "--dx-chat-bg",
+  "--dx-chat-border",
+  "--dx-chat-border-radius",
+  "--dx-chat-border-width",
+  "--dx-chat-bubble-border-radius",
+  "--dx-chat-bubble-container-gap",
+  "--dx-chat-bubble-delete-gap",
+  "--dx-chat-bubble-delete-icon-size",
+  "--dx-chat-bubble-gap",
+  "--dx-chat-bubble-image-border-radius",
+  "--dx-chat-bubble-image-max-height",
+  "--dx-chat-bubble-image-max-width",
+  "--dx-chat-bubble-image-padding",
+  "--dx-chat-bubble-padding",
+  "--dx-chat-bubble-primary-bg",
+  "--dx-chat-bubble-primary-content",
+  "--dx-chat-bubble-secondary-bg",
+  "--dx-chat-bubble-secondary-content",
+  "--dx-chat-confirmation-popup-content-padding",
+  "--dx-chat-confirmation-popup-toolbar-gap",
+  "--dx-chat-confirmation-popup-toolbar-padding-block",
+  "--dx-chat-confirmation-popup-toolbar-padding-inline",
+  "--dx-chat-content-disabled",
+  "--dx-chat-editing-preview-caption-font-weight",
+  "--dx-chat-file-base-section-gap",
+  "--dx-chat-file-button-size",
+  "--dx-chat-file-container-bg",
+  "--dx-chat-file-container-border-radius",
+  "--dx-chat-file-container-box-shadow",
+  "--dx-chat-file-container-padding",
+  "--dx-chat-file-container-width",
+  "--dx-chat-file-content-disabled",
+  "--dx-chat-file-icon-font-size",
+  "--dx-chat-file-name-font-weight",
+  "--dx-chat-file-secondary-content",
+  "--dx-chat-file-secondary-font-size",
+  "--dx-chat-file-size-max-width",
+  "--dx-chat-file-view-items-gap",
+  "--dx-chat-information-author-name-content",
+  "--dx-chat-information-content-disabled",
+  "--dx-chat-information-edited-gap",
+  "--dx-chat-information-font-size",
+  "--dx-chat-information-gap",
+  "--dx-chat-information-icon-size",
+  "--dx-chat-information-timestamp-content",
+  "--dx-chat-message-box-border",
+  "--dx-chat-message-box-border-block-start-width",
+  "--dx-chat-message-box-border-disabled",
+  "--dx-chat-message-box-file-bg",
+  "--dx-chat-message-box-file-cancel-button-bg-hovered",
+  "--dx-chat-message-box-files-container-padding",
+  "--dx-chat-message-box-files-container-padding-block-start",
+  "--dx-chat-message-box-gap",
+  "--dx-chat-message-box-padding",
+  "--dx-chat-message-box-textarea-border-radius",
+  "--dx-chat-message-box-textarea-padding",
+  "--dx-chat-message-box-toolbar-min-height",
+  "--dx-chat-message-editing-preview-accent-content",
+  "--dx-chat-message-editing-preview-accent-width",
+  "--dx-chat-message-editing-preview-cancel-button-content",
+  "--dx-chat-message-editing-preview-caption-font-size",
+  "--dx-chat-message-editing-preview-content-padding-inline",
+  "--dx-chat-message-editing-preview-content-row-gap",
+  "--dx-chat-message-group-alignment-start-gap",
+  "--dx-chat-message-group-gap",
+  "--dx-chat-message-group-padding",
+  "--dx-chat-message-group-start-grid-template-columns",
+  "--dx-chat-message-list-context-menu-delete-button-bg-focused",
+  "--dx-chat-message-list-context-menu-delete-button-content",
+  "--dx-chat-message-list-context-menu-delete-button-content-focused",
+  "--dx-chat-message-list-day-header-content",
+  "--dx-chat-message-list-day-header-first-padding-block-start",
+  "--dx-chat-message-list-day-header-font-size",
+  "--dx-chat-message-list-day-header-padding-block-end",
+  "--dx-chat-message-list-empty-icon",
+  "--dx-chat-message-list-empty-icon-bg",
+  "--dx-chat-message-list-empty-icon-box-size",
+  "--dx-chat-message-list-empty-icon-margin-block-end",
+  "--dx-chat-message-list-empty-icon-size",
+  "--dx-chat-message-list-empty-message-content",
+  "--dx-chat-message-list-empty-message-font-size",
+  "--dx-chat-message-list-empty-prompt-content",
+  "--dx-chat-message-list-empty-prompt-font-size",
+  "--dx-chat-message-list-empty-row-gap",
+  "--dx-chat-message-list-padding",
+  "--dx-chat-suggestions-border-width",
+  "--dx-chat-suggestions-box-shadow",
+  "--dx-chat-suggestions-button-border-radius",
+  "--dx-chat-suggestions-button-max-width",
+  "--dx-chat-suggestions-gap",
+  "--dx-chat-suggestions-padding",
+  "--dx-chat-typing-indicator-bubble-bg",
+  "--dx-chat-typing-indicator-bubble-border-radius",
+  "--dx-chat-typing-indicator-bubble-column-gap",
+  "--dx-chat-typing-indicator-bubble-padding-block",
+  "--dx-chat-typing-indicator-bubble-padding-inline",
+  "--dx-chat-typing-indicator-circle-bg",
+  "--dx-chat-typing-indicator-circle-border-radius",
+  "--dx-chat-typing-indicator-circle-center-bg",
+  "--dx-chat-typing-indicator-circle-center-size",
+  "--dx-chat-typing-indicator-circle-size",
+  "--dx-chat-typing-indicator-content",
+  "--dx-chat-typing-indicator-font-size",
+  "--dx-chat-typing-indicator-grid-template-columns",
+  "--dx-chat-typing-indicator-padding",
+  "--dx-chat-typing-indicator-row-gap",
+  "--dx-check-box-arrow-font-size",
+  "--dx-check-box-arrow-icon-size",
+  "--dx-check-box-border",
+  "--dx-check-box-border-active",
+  "--dx-check-box-border-disabled",
+  "--dx-check-box-border-hovered",
+  "--dx-check-box-border-read-only",
+  "--dx-check-box-border-width",
+  "--dx-check-box-icon-bg",
+  "--dx-check-box-icon-bg-disabled",
+  "--dx-check-box-icon-border-radius",
+  "--dx-check-box-icon-checked-bg",
+  "--dx-check-box-icon-checked-bg-active",
+  "--dx-check-box-icon-checked-bg-focused",
+  "--dx-check-box-icon-checked-bg-hovered",
+  "--dx-check-box-icon-checked-border",
+  "--dx-check-box-icon-checked-border-active",
+  "--dx-check-box-icon-checked-border-focused",
+  "--dx-check-box-icon-checked-border-hovered",
+  "--dx-check-box-icon-font-size",
+  "--dx-check-box-indeterminate-icon-border-radius",
+  "--dx-check-box-indeterminate-icon-height",
+  "--dx-check-box-indeterminate-icon-width",
+  "--dx-check-box-invalid-bg",
+  "--dx-check-box-invalid-bg-active",
+  "--dx-check-box-invalid-bg-focused",
+  "--dx-check-box-invalid-bg-hovered",
+  "--dx-check-box-invalid-border",
+  "--dx-check-box-invalid-border-active",
+  "--dx-check-box-invalid-border-focused",
+  "--dx-check-box-invalid-border-hovered",
+  "--dx-check-box-invalid-mark-bg",
+  "--dx-check-box-invalid-mark-bg-active",
+  "--dx-check-box-invalid-mark-bg-focused",
+  "--dx-check-box-invalid-mark-bg-hovered",
+  "--dx-check-box-mark-content",
+  "--dx-check-box-text-padding-inline-end",
+  "--dx-check-box-text-padding-inline-start",
+  "--dx-color-border",
+  "--dx-color-box-content-disabled",
+  "--dx-color-box-input-container-height",
+  "--dx-color-box-input-container-inset-inline-start",
+  "--dx-color-box-input-container-width",
+  "--dx-color-box-input-min-width",
+  "--dx-color-box-overlay-bg",
+  "--dx-color-box-overlay-content-padding",
+  "--dx-color-box-overlay-padding",
+  "--dx-color-box-preview-border",
+  "--dx-color-box-preview-icon",
+  "--dx-color-box-preview-icon-size",
+  "--dx-color-box-preview-inset-inline-start",
+  "--dx-color-box-preview-min-width",
+  "--dx-color-box-toolbar-item-padding-inline-end",
+  "--dx-color-danger",
+  "--dx-color-icon",
+  "--dx-color-link",
+  "--dx-color-main-bg",
+  "--dx-color-options-panel-bg",
+  "--dx-color-primary",
+  "--dx-color-separator",
+  "--dx-color-shadow",
+  "--dx-color-spin-icon",
+  "--dx-color-success",
+  "--dx-color-text",
+  "--dx-color-view-alpha-cell-margin-block",
+  "--dx-color-view-alpha-cell-width",
+  "--dx-color-view-alpha-row-margin-block-start",
+  "--dx-color-view-alpha-scale-height",
+  "--dx-color-view-apply-button-margin-inline-end",
+  "--dx-color-view-bg-box-palette-cell-bg",
+  "--dx-color-view-border",
+  "--dx-color-view-border-disabled",
+  "--dx-color-view-color-preview-container-margin",
+  "--dx-color-view-color-preview-container-padding",
+  "--dx-color-view-color-preview-height",
+  "--dx-color-view-container-alpha-label-margin",
+  "--dx-color-view-container-alpha-label-width",
+  "--dx-color-view-container-hex-margin",
+  "--dx-color-view-container-line-height",
+  "--dx-color-view-container-margin-block-end",
+  "--dx-color-view-container-textbox-margin",
+  "--dx-color-view-container-textbox-width",
+  "--dx-color-view-container-width",
+  "--dx-color-view-controls-container-margin",
+  "--dx-color-view-controls-container-width",
+  "--dx-color-view-handle-bg",
+  "--dx-color-view-handle-border",
+  "--dx-color-view-handle-border-disabled",
+  "--dx-color-view-hue-scale-height",
+  "--dx-color-view-hue-scale-margin",
+  "--dx-color-view-hue-scale-width",
+  "--dx-color-view-hue-scale-wrapper-height",
+  "--dx-color-view-label-content",
+  "--dx-color-view-label-content-disabled",
+  "--dx-color-view-palette-height",
+  "--dx-color-view-palette-width",
+  "--dx-color-view-preview-container-margin",
+  "--dx-color-warning",
+  "--dx-component-color-bg",
+  "--dx-component-height",
+  "--dx-context-menu-border-radius",
+  "--dx-context-menu-content-disabled",
+  "--dx-context-menu-icon",
+  "--dx-context-menu-item-border-radius",
+  "--dx-context-menu-item-content-gap",
+  "--dx-context-menu-item-text-padding-inline",
+  "--dx-context-menu-items-container-gap",
+  "--dx-context-menu-items-container-padding",
+  "--dx-context-menu-padding-inline",
+  "--dx-context-menu-separator-height",
+  "--dx-context-menu-separator-margin",
+  "--dx-context-menu-shadow",
+  "--dx-data-grid-block-separator-bg",
+  "--dx-data-grid-block-separator-border-radius",
+  "--dx-data-grid-cell-outline-focused",
+  "--dx-data-grid-cell-padding",
+  "--dx-data-grid-error-message-margin-block-end",
+  "--dx-data-grid-filter-panel-outline-offset-focused",
+  "--dx-data-grid-form-buttons-margin-block-start",
+  "--dx-data-grid-form-buttons-margin-inline-start",
+  "--dx-data-grid-form-buttons-rtl-margin-inline-start",
+  "--dx-data-grid-group-panel-item-bg",
+  "--dx-data-grid-group-panel-item-border",
+  "--dx-data-grid-group-panel-item-border-radius",
+  "--dx-data-grid-group-panel-item-border-width",
+  "--dx-data-grid-group-panel-item-font-weight",
+  "--dx-data-grid-group-panel-item-margin-inline-end",
+  "--dx-data-grid-group-panel-item-min-width",
+  "--dx-data-grid-group-panel-item-padding",
+  "--dx-data-grid-group-panel-item-padding-block",
+  "--dx-data-grid-group-panel-item-rtl-margin-inline-end",
+  "--dx-data-grid-group-panel-item-sort-margin-inline-start",
+  "--dx-data-grid-group-panel-item-sort-rtl-margin-inline-start",
+  "--dx-data-grid-group-row-border",
+  "--dx-data-grid-group-row-font-weight",
+  "--dx-data-grid-outline-offset-focused",
+  "--dx-data-grid-sticky-column-border",
+  "--dx-datagrid-row-alternation-bg",
+  "--dx-date-box-apply-button-margin-inline-end",
+  "--dx-date-box-button-margin-inline-end",
+  "--dx-date-box-button-min-width",
+  "--dx-date-box-container-cell-margin-block-start",
+  "--dx-date-box-content-padding",
+  "--dx-date-box-input-height",
+  "--dx-date-box-overlay-item-adaptive-margin",
+  "--dx-date-box-overlay-item-margin",
+  "--dx-date-box-popup-content-margin",
+  "--dx-date-box-popup-content-padding-block-end",
+  "--dx-date-box-popup-content-padding-block-start",
+  "--dx-date-box-popup-title-min-height",
+  "--dx-date-range-box-active-bar-margin-inline",
+  "--dx-date-range-box-border-block-end-width-hovered",
+  "--dx-date-range-box-custom-button-margin",
+  "--dx-date-range-box-input-filled-border-block-end-width",
+  "--dx-date-range-box-invalid-border-block-end-width",
+  "--dx-date-range-box-separator-content",
+  "--dx-date-view-content",
+  "--dx-date-view-content-disabled",
+  "--dx-date-view-hours-colon-font-size",
+  "--dx-date-view-item-content-selected",
+  "--dx-date-view-item-font-size",
+  "--dx-date-view-item-font-size-selected",
+  "--dx-date-view-item-phone-font-size",
+  "--dx-date-view-item-phone-font-size-selected",
+  "--dx-date-view-roller-bottom-bg",
+  "--dx-date-view-roller-height",
+  "--dx-date-view-roller-item-height",
+  "--dx-date-view-roller-min-width",
+  "--dx-date-view-roller-month-min-width",
+  "--dx-date-view-roller-month-phone-min-width",
+  "--dx-date-view-roller-padding",
+  "--dx-date-view-roller-top-bg",
+  "--dx-date-view-roller-year-min-width",
+  "--dx-diagram-accordion-item-border-block-end",
+  "--dx-diagram-accordion-item-title-min-height",
+  "--dx-diagram-bg",
+  "--dx-diagram-border",
+  "--dx-diagram-border-width",
+  "--dx-diagram-button-margin",
+  "--dx-diagram-button-min-height",
+  "--dx-diagram-button-min-width",
+  "--dx-diagram-canvas-bg",
+  "--dx-diagram-closebutton-margin",
+  "--dx-diagram-color-view-hue-scale-cell-margin-inline-start",
+  "--dx-diagram-color-view-palette-min-width",
+  "--dx-diagram-connection-border",
+  "--dx-diagram-connector-border",
+  "--dx-diagram-context-toolbox-target-height",
+  "--dx-diagram-context-toolbox-target-width",
+  "--dx-diagram-danger-format-bg-active",
+  "--dx-diagram-danger-icon",
+  "--dx-diagram-default-format-bg-active",
+  "--dx-diagram-floating-toolbar-button-size",
+  "--dx-diagram-floating-toolbar-container-border-radius",
+  "--dx-diagram-floating-toolbar-container-padding",
+  "--dx-diagram-floating-toolbar-editor-button-padding",
+  "--dx-diagram-floating-toolbar-editor-padding",
+  "--dx-diagram-floating-toolbar-items-height",
+  "--dx-diagram-geometry-mark-border",
+  "--dx-diagram-height",
+  "--dx-diagram-icon-height",
+  "--dx-diagram-icon-margin-inline-end",
+  "--dx-diagram-icon-margin-inline-start",
+  "--dx-diagram-icon-padding",
+  "--dx-diagram-icon-width",
+  "--dx-diagram-image-icon-accent-border",
+  "--dx-diagram-image-icon-base-content",
+  "--dx-diagram-image-icon-muted-content",
+  "--dx-diagram-item-padding",
+  "--dx-diagram-item-text-padding-inline-start",
+  "--dx-diagram-large-editor-width",
+  "--dx-diagram-loading-indicator-height",
+  "--dx-diagram-loading-indicator-width",
+  "--dx-diagram-medium-editor-width",
+  "--dx-diagram-min-height",
+  "--dx-diagram-normal-format-bg-active",
+  "--dx-diagram-popup-close-icon-font-size",
+  "--dx-diagram-popup-close-icon-line-height",
+  "--dx-diagram-popup-content-padding",
+  "--dx-diagram-popup-title-toolbar-bg",
+  "--dx-diagram-popup-title-toolbar-font-size",
+  "--dx-diagram-properties-layout-icon-size",
+  "--dx-diagram-properties-panel-padding",
+  "--dx-diagram-properties-panel-spacing",
+  "--dx-diagram-selection-bg",
+  "--dx-diagram-selection-mark-content",
+  "--dx-diagram-separator-width",
+  "--dx-diagram-shadow",
+  "--dx-diagram-small-editor-width",
+  "--dx-diagram-success-format-bg-active",
+  "--dx-diagram-title-padding",
+  "--dx-diagram-toolbar-border",
+  "--dx-diagram-toolbar-text-padding-block-end",
+  "--dx-diagram-toolbar-text-padding-block-start",
+  "--dx-diagram-toolbar-text-padding-inline-start",
+  "--dx-diagram-toolbar-wrapper-border-block-end",
+  "--dx-diagram-toolbar-wrapper-padding",
+  "--dx-diagram-toolbox-accordion-v-padding",
+  "--dx-diagram-toolbox-h-padding",
+  "--dx-diagram-toolbox-input-button-min-height",
+  "--dx-diagram-toolbox-input-container-border-block-end",
+  "--dx-diagram-toolbox-input-container-border-block-start",
+  "--dx-diagram-toolbox-input-image-padding",
+  "--dx-diagram-toolbox-input-image-size",
+  "--dx-diagram-toolbox-input-margin",
+  "--dx-diagram-toolbox-mobile-padding",
+  "--dx-diagram-toolbox-shape-text-content",
+  "--dx-diagram-toolbox-width",
+  "--dx-diagram-touchbar-item-padding",
+  "--dx-drawer-backdrop",
+  "--dx-drop-down-button-action-padding-inline",
+  "--dx-drop-down-button-action-spindown-icon-size",
+  "--dx-drop-down-button-icon-right-margin-inline-start",
+  "--dx-drop-down-button-toggle-spindown-icon-size",
+  "--dx-drop-down-editor-button-size",
+  "--dx-drop-down-editor-icon",
+  "--dx-drop-down-editor-icon-active",
+  "--dx-drop-down-editor-invalid-badge-inset-inline-end",
+  "--dx-drop-down-editor-invalid-badge-size",
+  "--dx-drop-down-editor-invalid-badge-with-clear-inset-inline-end",
+  "--dx-drop-down-editor-list-font-size",
+  "--dx-drop-down-editor-list-line-height",
+  "--dx-drop-down-list-min-height",
+  "--dx-drop-down-menu-list-border-radius",
+  "--dx-drop-down-menu-list-min-width",
+  "--dx-drop-down-menu-popup-content-padding",
+  "--dx-drop-down-menu-section-margin-inline",
+  "--dx-drop-down-menu-section-row-gap",
+  "--dx-fieldset-attention-icon-offset",
+  "--dx-fieldset-field-label-content",
+  "--dx-fieldset-field-label-content-disabled",
+  "--dx-fieldset-field-label-value-spacing",
+  "--dx-fieldset-field-margin-block",
+  "--dx-fieldset-field-min-height",
+  "--dx-fieldset-field-value-bottom-padding",
+  "--dx-fieldset-field-value-invalid-content",
+  "--dx-fieldset-field-value-padding-inline",
+  "--dx-fieldset-field-value-top-padding",
+  "--dx-fieldset-header-margin-block",
+  "--dx-fieldset-margin-block",
+  "--dx-fieldset-margin-block-end",
+  "--dx-fieldset-margin-inline",
+  "--dx-fieldset-radio-group-min-height",
+  "--dx-fieldset-value-padding-inline",
+  "--dx-file-manager-bg",
+  "--dx-file-manager-border",
+  "--dx-file-manager-border-focused",
+  "--dx-file-manager-border-width",
+  "--dx-file-manager-breadcrumbs-border-block-end",
+  "--dx-file-manager-breadcrumbs-item-bg-focused",
+  "--dx-file-manager-breadcrumbs-item-content-focused",
+  "--dx-file-manager-breadcrumbs-item-padding-block-end",
+  "--dx-file-manager-breadcrumbs-item-padding-block-start",
+  "--dx-file-manager-breadcrumbs-padding",
+  "--dx-file-manager-breadcrumbs-path-separator-padding-inline-end",
+  "--dx-file-manager-breadcrumbs-path-separator-padding-inline-start",
+  "--dx-file-manager-button-content-padding",
+  "--dx-file-manager-container-border-block-start",
+  "--dx-file-manager-content-disabled",
+  "--dx-file-manager-context-menu-text-item-left-margin",
+  "--dx-file-manager-custom-thumbnail-content",
+  "--dx-file-manager-danger-bg",
+  "--dx-file-manager-details-view-checkbox-column-width",
+  "--dx-file-manager-dialog-min-width",
+  "--dx-file-manager-dialog-name-editor-max-height",
+  "--dx-file-manager-dialog-name-editor-max-width",
+  "--dx-file-manager-dialog-name-editor-min-height",
+  "--dx-file-manager-dirs-panel-padding",
+  "--dx-file-manager-dirs-tree-item-bg-focused",
+  "--dx-file-manager-dirs-tree-item-content-focused",
+  "--dx-file-manager-drawer-panel-content-initial-max-width",
+  "--dx-file-manager-drawer-panel-content-initial-min-width",
+  "--dx-file-manager-drop-zone-placeholder-border",
+  "--dx-file-manager-editor-bg-active",
+  "--dx-file-manager-file-actions-button-size",
+  "--dx-file-manager-file-actions-button-top-bottom-padding",
+  "--dx-file-manager-file-item-bg-hovered",
+  "--dx-file-manager-file-item-border-focused",
+  "--dx-file-manager-file-item-select-bg",
+  "--dx-file-manager-file-item-select-bg-focused",
+  "--dx-file-manager-file-item-select-content",
+  "--dx-file-manager-file-item-select-content-focused",
+  "--dx-file-manager-file-toolbar-bg",
+  "--dx-file-manager-file-uploader-drop-zone-placeholder-border",
+  "--dx-file-manager-height",
+  "--dx-file-manager-i-cancel-height",
+  "--dx-file-manager-i-cancel-width",
+  "--dx-file-manager-inverted-content",
+  "--dx-file-manager-item-content-focused",
+  "--dx-file-manager-menu-item-content-margin",
+  "--dx-file-manager-menu-item-content-padding-inline-end",
+  "--dx-file-manager-menu-item-content-padding-inline-start",
+  "--dx-file-manager-notification-border-block-end-width",
+  "--dx-file-manager-notification-padding-block-end",
+  "--dx-file-manager-overlay-content-max-height",
+  "--dx-file-manager-overlay-content-max-width",
+  "--dx-file-manager-overlay-content-min-height",
+  "--dx-file-manager-overlay-content-min-width",
+  "--dx-file-manager-popup-content-padding",
+  "--dx-file-manager-progress-bold-font-weight",
+  "--dx-file-manager-progress-box-border-radius",
+  "--dx-file-manager-progress-box-button-close-margin-block-start",
+  "--dx-file-manager-progress-box-cancel-button-margin-block-start",
+  "--dx-file-manager-progress-box-close-button-margin-block-start",
+  "--dx-file-manager-progress-box-close-button-margin-inline-start",
+  "--dx-file-manager-progress-box-content-padding",
+  "--dx-file-manager-progress-box-error-max-height",
+  "--dx-file-manager-progress-box-error-padding",
+  "--dx-file-manager-progress-box-image-margin-inline-end",
+  "--dx-file-manager-progress-box-image-size",
+  "--dx-file-manager-progress-box-margin-block-end",
+  "--dx-file-manager-progress-box-padding",
+  "--dx-file-manager-progress-box-without-close-button-padding-inline-end",
+  "--dx-file-manager-progress-panel-border-inline-start-width",
+  "--dx-file-manager-progress-panel-box-padding",
+  "--dx-file-manager-progress-panel-container-padding",
+  "--dx-file-manager-progress-panel-separator-height",
+  "--dx-file-manager-progress-panel-title-padding",
+  "--dx-file-manager-progress-panel-title-padding-block",
+  "--dx-file-manager-progress-panel-width",
+  "--dx-file-manager-progress-title-font-size",
+  "--dx-file-manager-progress-title-font-weight",
+  "--dx-file-manager-splitter-wrapper-inset-inline-end",
+  "--dx-file-manager-thumbnails-item-border",
+  "--dx-file-manager-thumbnails-item-content-padding",
+  "--dx-file-manager-thumbnails-item-height",
+  "--dx-file-manager-thumbnails-item-margin",
+  "--dx-file-manager-thumbnails-item-spacer-height",
+  "--dx-file-manager-thumbnails-item-thumbnail-size",
+  "--dx-file-manager-thumbnails-item-width",
+  "--dx-file-manager-thumbnails-view-port-padding",
+  "--dx-file-manager-toolbar-height",
+  "--dx-file-manager-toolbar-padding",
+  "--dx-file-manager-toolbar-separator-height",
+  "--dx-file-manager-toolbar-separator-item-margin-inline-end",
+  "--dx-file-manager-toolbar-separator-item-width",
+  "--dx-file-manager-toolbar-viewmode-padding",
+  "--dx-file-manager-toolbar-viewmode-width",
+  "--dx-file-manager-tree-view-item-top-bottom-padding",
+  "--dx-file-manager-view-mode-button-content-padding",
+  "--dx-file-uploader-border",
+  "--dx-file-uploader-button-height",
+  "--dx-file-uploader-button-margin-inline-end",
+  "--dx-file-uploader-button-margin-inline-start",
+  "--dx-file-uploader-button-width",
+  "--dx-file-uploader-cancel-button-margin-block-start",
+  "--dx-file-uploader-cancel-button-position-end-margin-inline-end",
+  "--dx-file-uploader-cancel-button-position-end-margin-inline-start",
+  "--dx-file-uploader-content-disabled",
+  "--dx-file-uploader-file-cancel-button-margin-inline-start",
+  "--dx-file-uploader-file-container-button-margin",
+  "--dx-file-uploader-file-container-button-rtl-margin-inline-end",
+  "--dx-file-uploader-file-container-button-size",
+  "--dx-file-uploader-file-container-margin-block-end",
+  "--dx-file-uploader-file-container-padding",
+  "--dx-file-uploader-file-container-shadow",
+  "--dx-file-uploader-file-container-text-margin",
+  "--dx-file-uploader-file-icon",
+  "--dx-file-uploader-file-icon-font-size",
+  "--dx-file-uploader-file-icon-padding-inline-end",
+  "--dx-file-uploader-file-line-height",
+  "--dx-file-uploader-file-name-content",
+  "--dx-file-uploader-file-name-font-weight",
+  "--dx-file-uploader-file-name-status-content",
+  "--dx-file-uploader-file-padding-block-start",
+  "--dx-file-uploader-file-size-font-size",
+  "--dx-file-uploader-file-size-padding",
+  "--dx-file-uploader-file-size-padding-inline-end",
+  "--dx-file-uploader-file-size-padding-inline-start",
+  "--dx-file-uploader-file-status-message-height",
+  "--dx-file-uploader-file-status-message-invalid-content",
+  "--dx-file-uploader-file-status-message-line-margin-block-end",
+  "--dx-file-uploader-file-status-message-margin-block-end",
+  "--dx-file-uploader-file-status-message-margin-block-start",
+  "--dx-file-uploader-file-wrapper-border-width",
+  "--dx-file-uploader-files-container-bg",
+  "--dx-file-uploader-files-container-border-radius",
+  "--dx-file-uploader-files-container-padding",
+  "--dx-file-uploader-invalid-padding-block-start",
+  "--dx-file-uploader-label-content",
+  "--dx-file-uploader-padding-block",
+  "--dx-file-uploader-progress-bar-height",
+  "--dx-file-uploader-progress-bar-status-content",
+  "--dx-file-uploader-show-file-list-padding-block-start",
+  "--dx-file-uploader-status-message-font-size",
+  "--dx-file-uploader-upload-button-margin-block-start",
+  "--dx-file-uploader-upload-button-margin-inline-end",
+  "--dx-file-uploader-upload-button-margin-inline-start",
+  "--dx-filter-builder-action-icon-font-size",
+  "--dx-filter-builder-action-icon-margin-inline-end",
+  "--dx-filter-builder-action-icon-margin-inline-start",
+  "--dx-filter-builder-action-icon-padding",
+  "--dx-filter-builder-bg",
+  "--dx-filter-builder-content",
+  "--dx-filter-builder-content-disabled",
+  "--dx-filter-builder-filled-editor-padding",
+  "--dx-filter-builder-group-content-padding-inline-end",
+  "--dx-filter-builder-group-content-padding-inline-start",
+  "--dx-filter-builder-group-operation-bg",
+  "--dx-filter-builder-group-operation-bg-disabled",
+  "--dx-filter-builder-group-operation-bg-focused",
+  "--dx-filter-builder-group-operation-bg-hovered",
+  "--dx-filter-builder-icon-margin-inline-end",
+  "--dx-filter-builder-icon-margin-inline-start",
+  "--dx-filter-builder-icon-padding",
+  "--dx-filter-builder-item-field-bg",
+  "--dx-filter-builder-item-field-bg-disabled",
+  "--dx-filter-builder-item-field-bg-focused",
+  "--dx-filter-builder-item-field-bg-hovered",
+  "--dx-filter-builder-item-operator-bg",
+  "--dx-filter-builder-item-operator-bg-focused",
+  "--dx-filter-builder-item-operator-bg-hovered",
+  "--dx-filter-builder-item-value-bg",
+  "--dx-filter-builder-item-value-bg-focused",
+  "--dx-filter-builder-item-value-bg-hovered",
+  "--dx-filter-builder-item-value-text-min-width",
+  "--dx-filter-builder-item-value-text-padding",
+  "--dx-filter-builder-menu-icon",
+  "--dx-filter-builder-plus-icon",
+  "--dx-filter-builder-plus-icon-content-disabled",
+  "--dx-filter-builder-plus-icon-content-focused",
+  "--dx-filter-builder-plus-icon-content-hovered",
+  "--dx-filter-builder-range-separator-content",
+  "--dx-filter-builder-range-separator-margin",
+  "--dx-filter-builder-remove-icon",
+  "--dx-filter-builder-remove-icon-content-disabled",
+  "--dx-filter-builder-remove-icon-content-focused",
+  "--dx-filter-builder-remove-icon-content-hovered",
+  "--dx-filter-builder-scrollable-max-height",
+  "--dx-filter-builder-text-border-radius",
+  "--dx-filter-builder-text-content-focused",
+  "--dx-filter-builder-tree-view-item-left-padding",
+  "--dx-filter-builder-tree-view-item-min-height",
+  "--dx-filter-builder-tree-view-item-padding",
+  "--dx-filter-builder-tree-view-item-padding-inline-end",
+  "--dx-filter-builder-tree-view-item-padding-inline-start",
+  "--dx-filter-builder-tree-view-node-margin-inline-end",
+  "--dx-filter-builder-tree-view-node-margin-inline-start",
+  "--dx-filter-builder-tree-view-toggle-inset-inline-start",
+  "--dx-filter-builder-tree-view-toggle-item-visibility-inset-inline-end",
+  "--dx-focus-rect-border-radius",
+  "--dx-focus-rect-outline",
+  "--dx-focus-rect-outline-offset",
+  "--dx-focus-rect-outline-offset-inset",
+  "--dx-focus-rect-outline-width",
+  "--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-5",
+  "--dx-font-size-heading-6",
+  "--dx-font-size-icon",
+  "--dx-font-size-lg",
+  "--dx-font-size-md",
+  "--dx-font-size-sm",
+  "--dx-font-size-xl",
+  "--dx-font-size-xs",
+  "--dx-form-default-top-padding",
+  "--dx-form-field-item-content",
+  "--dx-form-field-item-content-disabled",
+  "--dx-form-field-item-help-text-padding-block-start",
+  "--dx-form-field-item-label-location-left-padding-inline-end",
+  "--dx-form-field-item-label-location-right-padding-inline-start",
+  "--dx-form-field-mark-content",
+  "--dx-form-field-required-content",
+  "--dx-form-first-row-padding-block-start",
+  "--dx-form-group-border",
+  "--dx-form-group-caption-bottom-margin",
+  "--dx-form-group-caption-font-size",
+  "--dx-form-group-caption-top-padding",
+  "--dx-form-group-content-border-block-start",
+  "--dx-form-group-content-bottom-padding",
+  "--dx-form-group-content-margin-block-start",
+  "--dx-form-group-content-padding-block-end",
+  "--dx-form-group-content-padding-block-start",
+  "--dx-form-group-custom-caption-icon-margin",
+  "--dx-form-help-text-font-size",
+  "--dx-form-item-help-content",
+  "--dx-form-label-font-size",
+  "--dx-form-label-icon-size",
+  "--dx-form-layout-manager-padding-block",
+  "--dx-form-layout-manager-padding-inline",
+  "--dx-form-layout-manager-tabpanel-content-padding",
+  "--dx-form-multiview-item-content-padding",
+  "--dx-form-switch-margin-block-end",
+  "--dx-form-switch-margin-block-start",
+  "--dx-form-top-label-bottom-margin",
+  "--dx-form-top-label-padding",
+  "--dx-gallery-border-focused",
+  "--dx-gallery-border-width",
+  "--dx-gallery-content-disabled",
+  "--dx-gallery-indicator-bg",
+  "--dx-gallery-indicator-bg-focused",
+  "--dx-gallery-indicator-border-selected",
+  "--dx-gallery-indicator-height",
+  "--dx-gallery-indicator-inset-block-end",
+  "--dx-gallery-indicator-item-bg-disabled",
+  "--dx-gallery-indicator-item-bg-selected",
+  "--dx-gallery-indicator-item-bg-selected-disabled",
+  "--dx-gallery-indicator-item-border",
+  "--dx-gallery-indicator-item-border-selected",
+  "--dx-gallery-indicator-item-border-width",
+  "--dx-gallery-indicator-item-margin",
+  "--dx-gallery-indicator-item-margin-selected",
+  "--dx-gallery-indicator-size",
+  "--dx-gallery-indicator-size-selected",
+  "--dx-gallery-nav-arrow-content",
+  "--dx-gallery-nav-arrow-content-disabled",
+  "--dx-gallery-nav-button-bg",
+  "--dx-gallery-nav-button-bg-active",
+  "--dx-gallery-nav-button-bg-disabled",
+  "--dx-gallery-nav-button-bg-hovered",
+  "--dx-gallery-nav-button-height",
+  "--dx-gallery-nav-button-inset-inline",
+  "--dx-gallery-nav-button-margin-block-start",
+  "--dx-gallery-nav-button-width",
+  "--dx-gallery-nav-icon-font-size",
+  "--dx-gantt-accent-border",
+  "--dx-gantt-arrow-border",
+  "--dx-gantt-bg",
+  "--dx-gantt-border",
+  "--dx-gantt-border-width",
+  "--dx-gantt-collapsable-row-bg",
+  "--dx-gantt-content",
+  "--dx-gantt-content-disabled",
+  "--dx-gantt-dependency-successor-size",
+  "--dx-gantt-edit-progress-inset-block-end",
+  "--dx-gantt-hb-border-block-start",
+  "--dx-gantt-header-item-height",
+  "--dx-gantt-milestone-size",
+  "--dx-gantt-parent-task-bg",
+  "--dx-gantt-selection-bg",
+  "--dx-gantt-si-padding-inline-end",
+  "--dx-gantt-si-padding-inline-start",
+  "--dx-gantt-splitter-bar-width",
+  "--dx-gantt-successor-bg",
+  "--dx-gantt-task-bg",
+  "--dx-gantt-task-edit-frame-border",
+  "--dx-gantt-task-edit-progress-border",
+  "--dx-gantt-task-edit-progress-height",
+  "--dx-gantt-task-edit-progress-width",
+  "--dx-gantt-task-edit-successor-dependency-l-border",
+  "--dx-gantt-task-edit-wrapper-padding-inline-start",
+  "--dx-gantt-task-height",
+  "--dx-gantt-task-margin-inline-start",
+  "--dx-gantt-task-padding-inline-end",
+  "--dx-gantt-task-padding-inline-start",
+  "--dx-gantt-task-progress-bg",
+  "--dx-gantt-task-progress-inset-block-end",
+  "--dx-gantt-task-progress-notch-border-width",
+  "--dx-gantt-task-res-bg",
+  "--dx-gantt-task-res-content",
+  "--dx-gantt-task-title-padding-inline-start",
+  "--dx-gantt-task-wrapper-padding-block-start",
+  "--dx-gantt-ti-bg",
+  "--dx-gantt-ti-border-inline-end",
+  "--dx-gantt-title-padding",
+  "--dx-gantt-title-padding-inline-end",
+  "--dx-gantt-tm-border-inline-start",
+  "--dx-gantt-toolbar-items-container-min-height",
+  "--dx-gantt-toolbar-separator-border-inline-start",
+  "--dx-gantt-toolbar-wrapper-border-block-end",
+  "--dx-gantt-toolbar-wrapper-padding",
+  "--dx-gantt-vb-border-inline-start",
+  "--dx-gantt-view-min-width",
+  "--dx-global-bg",
+  "--dx-global-content",
+  "--dx-global-content-disabled",
+  "--dx-global-dropdown-border-block-end-width",
+  "--dx-global-dropdown-box-shadow",
+  "--dx-global-dropdown-content-padding",
+  "--dx-global-dropdown-flipped-border-block-start-width",
+  "--dx-global-font-family",
+  "--dx-global-inline-widget-inner-height",
+  "--dx-global-line-height",
+  "--dx-grid-adaptive-column-height",
+  "--dx-grid-after-inset-inline-end",
+  "--dx-grid-ai-chat-empty-icon-bg",
+  "--dx-grid-ai-chat-empty-icon-content",
+  "--dx-grid-ai-chat-message-border",
+  "--dx-grid-ai-chat-message-content-gap",
+  "--dx-grid-ai-chat-message-error-content",
+  "--dx-grid-ai-chat-message-gap",
+  "--dx-grid-ai-chat-message-icon-size",
+  "--dx-grid-ai-chat-message-min-width",
+  "--dx-grid-ai-chat-message-pending-content",
+  "--dx-grid-ai-chat-message-regenerate-button-border-radius",
+  "--dx-grid-ai-chat-message-regenerate-button-content-disabled",
+  "--dx-grid-ai-chat-message-success-content",
+  "--dx-grid-ai-chat-toolbar-item-padding-inline-end",
+  "--dx-grid-ai-confirm-dialog-button-width",
+  "--dx-grid-ai-prompt-editor-progress-bar-height",
+  "--dx-grid-bg",
+  "--dx-grid-border",
+  "--dx-grid-border-focused",
+  "--dx-grid-border-radius",
+  "--dx-grid-border-width",
+  "--dx-grid-bottom-load-panel-padding",
+  "--dx-grid-cell-border-inline-end",
+  "--dx-grid-cell-content-padding",
+  "--dx-grid-cell-font-size",
+  "--dx-grid-cell-height",
+  "--dx-grid-cell-line-height",
+  "--dx-grid-cell-modified-bg",
+  "--dx-grid-cell-padding",
+  "--dx-grid-cell-padding-block",
+  "--dx-grid-cell-padding-inline",
+  "--dx-grid-cell-removed-border",
+  "--dx-grid-cell-removed-content",
+  "--dx-grid-checkbox-size",
+  "--dx-grid-chevron-icon",
+  "--dx-grid-column-chooser-bg",
+  "--dx-grid-column-chooser-content-padding",
+  "--dx-grid-column-chooser-font-weight",
+  "--dx-grid-column-chooser-item-bg",
+  "--dx-grid-column-chooser-item-content",
+  "--dx-grid-column-chooser-item-height",
+  "--dx-grid-column-chooser-item-margin",
+  "--dx-grid-column-chooser-item-margin-block-end",
+  "--dx-grid-column-chooser-list-item-margin",
+  "--dx-grid-column-chooser-message-content",
+  "--dx-grid-column-chooser-padding",
+  "--dx-grid-column-chooser-padding-inline",
+  "--dx-grid-column-chooser-title-font-size",
+  "--dx-grid-column-chooser-tree-view-item-padding-inline-start",
+  "--dx-grid-column-indicator-width",
+  "--dx-grid-column-separator-bg",
+  "--dx-grid-column-separator-width",
+  "--dx-grid-command-adaptive-column-width",
+  "--dx-grid-command-ai-button-max-width",
+  "--dx-grid-command-ai-content-padding-inline-start",
+  "--dx-grid-command-ai-icon-size",
+  "--dx-grid-command-edit-column-width",
+  "--dx-grid-command-edit-column-with-icons-width",
+  "--dx-grid-command-edit-icon-margin",
+  "--dx-grid-command-edit-icon-size",
+  "--dx-grid-command-edit-text-margin",
+  "--dx-grid-command-expand-column-width",
+  "--dx-grid-command-select-column-width",
+  "--dx-grid-content",
+  "--dx-grid-content-disabled",
+  "--dx-grid-content-focused",
+  "--dx-grid-content-padding",
+  "--dx-grid-context-menu-icon-size",
+  "--dx-grid-context-menu-item-padding-block",
+  "--dx-grid-context-menu-item-padding-inline-end",
+  "--dx-grid-context-menu-item-padding-inline-start",
+  "--dx-grid-context-menu-overlay-item-padding",
+  "--dx-grid-context-menu-overlay-item-padding-inline-end",
+  "--dx-grid-drag-header-bg",
+  "--dx-grid-drag-header-border",
+  "--dx-grid-drag-header-box-shadow",
+  "--dx-grid-draggable-column-content",
+  "--dx-grid-draggable-column-opacity",
+  "--dx-grid-drop-highlight-bg",
+  "--dx-grid-drop-highlight-content",
+  "--dx-grid-editor-bg",
+  "--dx-grid-editor-input-border-block-end-width",
+  "--dx-grid-editor-input-padding",
+  "--dx-grid-error-message-padding-inline-end",
+  "--dx-grid-filter-operation-icon-margin-block-start",
+  "--dx-grid-filter-panel-checkbox-padding-inline-end",
+  "--dx-grid-filter-panel-content",
+  "--dx-grid-filter-panel-icon-margin-inline-end",
+  "--dx-grid-filter-panel-icon-size",
+  "--dx-grid-filter-panel-padding",
+  "--dx-grid-filter-row-bg",
+  "--dx-grid-filter-row-editor-padding-inline",
+  "--dx-grid-group-panel-item-margin-inline",
+  "--dx-grid-group-panel-message-line-height",
+  "--dx-grid-group-row-bg",
+  "--dx-grid-group-row-content",
+  "--dx-grid-header-cell-font-size",
+  "--dx-grid-header-cell-padding-block",
+  "--dx-grid-header-cell-sort-index-margin-inline-start",
+  "--dx-grid-header-filter-empty-icon",
+  "--dx-grid-header-filter-icon",
+  "--dx-grid-header-filter-icon-active",
+  "--dx-grid-header-height",
+  "--dx-grid-header-icon-container-size",
+  "--dx-grid-header-icon-size",
+  "--dx-grid-header-line-height",
+  "--dx-grid-header-panel-padding",
+  "--dx-grid-header-row-padding-block-end",
+  "--dx-grid-header-row-padding-block-start",
+  "--dx-grid-header-text-margin-inline",
+  "--dx-grid-hidden-border",
+  "--dx-grid-icon",
+  "--dx-grid-icon-button-border-radius",
+  "--dx-grid-icon-margin",
+  "--dx-grid-link-content",
+  "--dx-grid-link-content-disabled",
+  "--dx-grid-link-icon-min-width",
+  "--dx-grid-margin-inline-start",
+  "--dx-grid-master-detail-cell-bg",
+  "--dx-grid-master-detail-padding",
+  "--dx-grid-menu-bar-item-padding",
+  "--dx-grid-menu-caption-padding-inline-start",
+  "--dx-grid-menu-item-icon-size",
+  "--dx-grid-menu-item-padding",
+  "--dx-grid-no-data-content",
+  "--dx-grid-no-data-font-size",
+  "--dx-grid-outline-focused",
+  "--dx-grid-overlay-content-padding",
+  "--dx-grid-popup-title-border-block-end",
+  "--dx-grid-revert-button-icon-size",
+  "--dx-grid-revert-button-margin",
+  "--dx-grid-revert-button-padding",
+  "--dx-grid-row-alternation-bg",
+  "--dx-grid-row-bg-focused",
+  "--dx-grid-row-bg-hovered",
+  "--dx-grid-row-border",
+  "--dx-grid-row-border-block-start-focused",
+  "--dx-grid-row-border-selected",
+  "--dx-grid-row-content-focused",
+  "--dx-grid-row-content-hovered",
+  "--dx-grid-row-content-selected",
+  "--dx-grid-row-error-bg",
+  "--dx-grid-row-error-content",
+  "--dx-grid-row-invalid-bg",
+  "--dx-grid-row-lines-border-block-end",
+  "--dx-grid-row-lines-border-block-start",
+  "--dx-grid-row-lines-border-inline-start",
+  "--dx-grid-row-removed-bg",
+  "--dx-grid-row-removed-border-block-end",
+  "--dx-grid-row-removed-border-block-start",
+  "--dx-grid-rowsview-empty-height",
+  "--dx-grid-search-bg",
+  "--dx-grid-search-content",
+  "--dx-grid-search-panel-margin-inline-start",
+  "--dx-grid-selection-bg",
+  "--dx-grid-sort-index-icon-inset-block-end",
+  "--dx-grid-sort-index-icon-margin-inline-start",
+  "--dx-grid-sort-index-icon-padding-inline-end",
+  "--dx-grid-sort-index-offset",
+  "--dx-grid-sort-index-width",
+  "--dx-grid-summary-bg",
+  "--dx-grid-summary-content",
+  "--dx-grid-summary-padding-block",
+  "--dx-grid-text-stub-bg",
+  "--dx-grid-toolbar-button-margin-inline-start",
+  "--dx-grid-tree-view-node-padding-inline-start",
+  "--dx-grid-tree-view-search-margin-block-end",
+  "--dx-grid-tree-view-select-all-item-padding-inline-start",
+  "--dx-grid-validation-pending-padding",
+  "--dx-html-editor-add-image-dialog-file-uploader-padding",
+  "--dx-html-editor-add-image-dialog-padding-inline-end",
+  "--dx-html-editor-add-image-dialog-tabs-padding",
+  "--dx-html-editor-ai-dialog-border-radius",
+  "--dx-html-editor-ai-dialog-content-gap",
+  "--dx-html-editor-ai-dialog-content-padding",
+  "--dx-html-editor-ai-dialog-selects-gap",
+  "--dx-html-editor-ai-dialog-title-font-weight",
+  "--dx-html-editor-blockquote-border-inline-start-width",
+  "--dx-html-editor-blockquote-padding-inline-start",
+  "--dx-html-editor-border-block-end-active",
+  "--dx-html-editor-border-width",
+  "--dx-html-editor-code-block-bg",
+  "--dx-html-editor-content-margin",
+  "--dx-html-editor-cover-bg",
+  "--dx-html-editor-faded-content",
+  "--dx-html-editor-file-uploader-input-wrapper-bg",
+  "--dx-html-editor-file-uploader-input-wrapper-border",
+  "--dx-html-editor-file-uploader-input-wrapper-border-radius",
+  "--dx-html-editor-file-uploader-input-wrapper-border-width",
+  "--dx-html-editor-highlighted-row-bg",
+  "--dx-html-editor-input-wrapper-gap",
+  "--dx-html-editor-padding-block",
+  "--dx-html-editor-padding-inline",
+  "--dx-html-editor-placeholder-content",
+  "--dx-html-editor-placeholder-inset-inline",
+  "--dx-html-editor-resize-frame-border",
+  "--dx-html-editor-resize-trigger",
+  "--dx-html-editor-table-border",
+  "--dx-html-editor-table-cell-padding",
+  "--dx-html-editor-table-resizer-highlight-thickness",
+  "--dx-html-editor-table-resizer-thickness",
+  "--dx-html-editor-toolbar-border",
+  "--dx-html-editor-toolbar-menu-separator-margin",
+  "--dx-html-editor-toolbar-padding",
+  "--dx-html-editor-toolbar-size-editor-width",
+  "--dx-html-editor-toolbar-wrapper-inset-block-end",
+  "--dx-html-editor-toolbar-wrapper-inset-block-start",
+  "--dx-html-editor-toolbar-wrapper-inset-inline-end",
+  "--dx-html-editor-toolbar-wrapper-inset-inline-start",
+  "--dx-html-editor-uploader-cover-bg",
+  "--dx-html-editor-variable-bg",
+  "--dx-html-editor-variable-border-radius",
+  "--dx-html-editor-variable-padding",
+  "--dx-informer-border-radius",
+  "--dx-informer-column-gap",
+  "--dx-informer-error-bg",
+  "--dx-informer-error-content",
+  "--dx-informer-icon-size",
+  "--dx-informer-info-bg",
+  "--dx-informer-info-content",
+  "--dx-informer-padding-block",
+  "--dx-informer-padding-inline",
+  "--dx-invalid-badge-bg",
+  "--dx-invalid-badge-content",
+  "--dx-invalid-badge-font-weight",
+  "--dx-invalid-badge-offset",
+  "--dx-invalid-badge-padding-inline",
+  "--dx-invalid-badge-size",
+  "--dx-list-base-select-all-separator-bg",
+  "--dx-list-border",
+  "--dx-list-border-width",
+  "--dx-list-content-disabled",
+  "--dx-list-context-menu-content-border",
+  "--dx-list-delete-button-static-padding",
+  "--dx-list-empty-message-min-height",
+  "--dx-list-expanded-group-content",
+  "--dx-list-group-content",
+  "--dx-list-group-header-bg",
+  "--dx-list-group-header-font-weight",
+  "--dx-list-group-header-padding-block",
+  "--dx-list-header-indicator-content",
+  "--dx-list-hold-menu-bg",
+  "--dx-list-hold-menu-border",
+  "--dx-list-hold-menu-shadow",
+  "--dx-list-icon",
+  "--dx-list-inverted-content",
+  "--dx-list-item-badge-container-width",
+  "--dx-list-item-bg-active",
+  "--dx-list-item-bg-hovered",
+  "--dx-list-item-bg-selected",
+  "--dx-list-item-bg-selected-disabled",
+  "--dx-list-item-bg-selected-focused",
+  "--dx-list-item-bg-selected-hovered",
+  "--dx-list-item-border",
+  "--dx-list-item-border-width",
+  "--dx-list-item-content-hovered",
+  "--dx-list-item-content-selected",
+  "--dx-list-item-gap",
+  "--dx-list-item-ghost-bg",
+  "--dx-list-item-ghost-border",
+  "--dx-list-item-ghost-border-width",
+  "--dx-list-item-ghost-content",
+  "--dx-list-item-height",
+  "--dx-list-item-margin-inline",
+  "--dx-list-item-padding-block",
+  "--dx-list-item-padding-inline",
+  "--dx-list-items-row-gap",
+  "--dx-list-margin-block-end",
+  "--dx-list-menu-button-default-bg",
+  "--dx-list-menu-button-default-content",
+  "--dx-list-menu-button-delete-bg",
+  "--dx-list-next-button-padding",
+  "--dx-list-next-button-padding-inline",
+  "--dx-list-normal-content",
+  "--dx-list-padding-block",
+  "--dx-list-response-wait-opacity",
+  "--dx-list-search-box-margin-block-end",
+  "--dx-list-select-all-height",
+  "--dx-list-slide-menu-button-inset-block-end",
+  "--dx-list-slide-menu-button-menu-border",
+  "--dx-list-slide-menu-button-padding",
+  "--dx-load-indicator-segment-border",
+  "--dx-load-indicator-segment-border-disabled",
+  "--dx-load-indicator-segment-border-width",
+  "--dx-load-indicator-segment-inner-border",
+  "--dx-load-indicator-segment-inner-border-disabled",
+  "--dx-load-indicator-size",
+  "--dx-load-indicator-sparkle-stop-1-bg",
+  "--dx-load-indicator-sparkle-stop-2-bg",
+  "--dx-load-indicator-sparkle-stop-3-bg",
+  "--dx-load-panel-border-radius",
+  "--dx-load-panel-box-shadow",
+  "--dx-load-panel-content-bg",
+  "--dx-load-panel-content-border",
+  "--dx-load-panel-content-border-radius",
+  "--dx-load-panel-content-padding",
+  "--dx-load-panel-padding",
+  "--dx-lookup-arrow-border-radius",
+  "--dx-lookup-box-shadow",
+  "--dx-lookup-field-min-height",
+  "--dx-lookup-icon",
+  "--dx-lookup-icon-active",
+  "--dx-lookup-popup-content-inset-block-start",
+  "--dx-lookup-search-padding-block",
+  "--dx-lookup-search-padding-block-start",
+  "--dx-lookup-search-padding-inline",
+  "--dx-map-marker-tooltip-margin",
+  "--dx-mention-bg",
+  "--dx-mention-border-radius",
+  "--dx-mention-margin-inline",
+  "--dx-mention-padding-block",
+  "--dx-menu-content",
+  "--dx-menu-item-bg-active",
+  "--dx-menu-item-bg-hovered",
+  "--dx-menu-item-bg-selected",
+  "--dx-menu-item-bg-selected-disabled",
+  "--dx-menu-item-bg-selected-focused",
+  "--dx-menu-item-content-disabled",
+  "--dx-menu-item-content-padding-inline-start",
+  "--dx-menu-item-content-selected",
+  "--dx-menu-item-expanded-content",
+  "--dx-menu-item-icon-gap",
+  "--dx-menu-item-line-height",
+  "--dx-menu-item-link-content",
+  "--dx-menu-item-with-icon-padding-inline",
+  "--dx-menu-padding-block",
+  "--dx-menu-padding-inline",
+  "--dx-menu-popup-bg",
+  "--dx-menu-popup-border",
+  "--dx-menu-separator-bg",
+  "--dx-menu-separator-bg-disabled",
+  "--dx-menu-separator-margin-block-end",
+  "--dx-menu-separator-margin-inline-end",
+  "--dx-menu-shadow-focused",
+  "--dx-menu-tree-view-border",
+  "--dx-menu-tree-view-node-border-block-end",
+  "--dx-menu-tree-view-node-padding",
+  "--dx-number-box-content-disabled",
+  "--dx-number-box-spin-bg-active",
+  "--dx-number-box-spin-bg-hovered",
+  "--dx-number-box-spin-container-touch-friendly-width",
+  "--dx-number-box-spin-container-width",
+  "--dx-number-box-spin-icon",
+  "--dx-pagination-content-disabled",
+  "--dx-pagination-first-child-margin-inline-start",
+  "--dx-pagination-first-child-padding-block-end",
+  "--dx-pagination-first-child-padding-block-start",
+  "--dx-pagination-first-child-padding-inline-end",
+  "--dx-pagination-first-child-padding-inline-start",
+  "--dx-pagination-font-weight-selected",
+  "--dx-pagination-info-content",
+  "--dx-pagination-info-margin-inline",
+  "--dx-pagination-nav-button-height",
+  "--dx-pagination-nav-button-icon-size",
+  "--dx-pagination-nav-button-padding",
+  "--dx-pagination-navigate-button-height",
+  "--dx-pagination-navigate-button-width",
+  "--dx-pagination-padding",
+  "--dx-pagination-page-bg-hovered",
+  "--dx-pagination-page-bg-selected",
+  "--dx-pagination-page-bg-selected-disabled",
+  "--dx-pagination-page-border-radius",
+  "--dx-pagination-page-content-selected",
+  "--dx-pagination-page-font-size",
+  "--dx-pagination-page-index-compact-min-width",
+  "--dx-pagination-page-index-width",
+  "--dx-pagination-page-line-height",
+  "--dx-pagination-page-margin-inline-end",
+  "--dx-pagination-page-margin-inline-start",
+  "--dx-pagination-page-padding",
+  "--dx-pagination-page-padding-inline",
+  "--dx-pagination-page-size-margin-inline-start",
+  "--dx-pagination-page-sizes-compact-min-width",
+  "--dx-pagination-pages-count-padding-inline-start",
+  "--dx-pagination-separator-padding",
+  "--dx-pagination-separator-padding-inline-end",
+  "--dx-pagination-separator-padding-inline-start",
+  "--dx-palette-accent",
+  "--dx-palette-bg",
+  "--dx-palette-border",
+  "--dx-palette-text",
+  "--dx-pivot-grid-accent-outline",
+  "--dx-pivot-grid-area-bg",
+  "--dx-pivot-grid-area-box-border",
+  "--dx-pivot-grid-area-box-margin-block-end",
+  "--dx-pivot-grid-area-content",
+  "--dx-pivot-grid-area-field-bg",
+  "--dx-pivot-grid-area-field-border-radius",
+  "--dx-pivot-grid-area-field-line-height",
+  "--dx-pivot-grid-area-field-padding-block",
+  "--dx-pivot-grid-area-fields-margin-block-start",
+  "--dx-pivot-grid-area-font-size",
+  "--dx-pivot-grid-area-padding",
+  "--dx-pivot-grid-border",
+  "--dx-pivot-grid-border-width",
+  "--dx-pivot-grid-button-margin",
+  "--dx-pivot-grid-button-margin-block-start",
+  "--dx-pivot-grid-cell-padding",
+  "--dx-pivot-grid-checkbox-inset-inline-start",
+  "--dx-pivot-grid-chevron-icon",
+  "--dx-pivot-grid-chevron-icon-size",
+  "--dx-pivot-grid-content",
+  "--dx-pivot-grid-content-disabled",
+  "--dx-pivot-grid-data-area-content",
+  "--dx-pivot-grid-drag-header-border",
+  "--dx-pivot-grid-drag-header-content",
+  "--dx-pivot-grid-drag-header-first-shadow",
+  "--dx-pivot-grid-drag-header-shadow",
+  "--dx-pivot-grid-drag-header-shadow-key",
+  "--dx-pivot-grid-drag-source-opacity",
+  "--dx-pivot-grid-empty-area-text-padding",
+  "--dx-pivot-grid-empty-column-width",
+  "--dx-pivot-grid-expand-icon-container-outline",
+  "--dx-pivot-grid-expanded-cell-padding",
+  "--dx-pivot-grid-expanded-padding",
+  "--dx-pivot-grid-field-area-box-bg",
+  "--dx-pivot-grid-field-area-box-border",
+  "--dx-pivot-grid-field-area-box-content",
+  "--dx-pivot-grid-field-area-box-font-weight",
+  "--dx-pivot-grid-field-area-content",
+  "--dx-pivot-grid-field-chooser-area-fields-margin-block-start",
+  "--dx-pivot-grid-field-chooser-button-margin-inline-end",
+  "--dx-pivot-grid-field-chooser-button-margin-inline-start",
+  "--dx-pivot-grid-field-chooser-drag-height",
+  "--dx-pivot-grid-field-chooser-drag-width",
+  "--dx-pivot-grid-field-chooser-field-min-height",
+  "--dx-pivot-grid-field-indicators-offset",
+  "--dx-pivot-grid-field-padding",
+  "--dx-pivot-grid-fields-area-head-cell-padding-inline",
+  "--dx-pivot-grid-fields-area-head-padding",
+  "--dx-pivot-grid-fields-area-head-padding-inline-start",
+  "--dx-pivot-grid-grand-total-bg",
+  "--dx-pivot-grid-header-cell-padding-inline",
+  "--dx-pivot-grid-header-filter-content",
+  "--dx-pivot-grid-header-font-weight",
+  "--dx-pivot-grid-header-top-bottom-padding",
+  "--dx-pivot-grid-headers-font-size",
+  "--dx-pivot-grid-icon-margin",
+  "--dx-pivot-grid-icon-size",
+  "--dx-pivot-grid-icon-sorted-margin-inline-end",
+  "--dx-pivot-grid-icon-sorted-margin-inline-start",
+  "--dx-pivot-grid-indicators-line-height",
+  "--dx-pivot-grid-last-cell-min-width",
+  "--dx-pivot-grid-left-right-padding",
+  "--dx-pivot-grid-position-indicator-bg",
+  "--dx-pivot-grid-position-indicator-horizontal-width",
+  "--dx-pivot-grid-position-indicator-last-margin-inline-start",
+  "--dx-pivot-grid-position-indicator-last-rtl-margin-inline-start",
+  "--dx-pivot-grid-position-indicator-vertical-height",
+  "--dx-pivot-grid-toolbar-margin-inline-end",
+  "--dx-pivot-grid-toolbar-margin-inline-start",
+  "--dx-pivot-grid-toolbar-padding-inline-start",
+  "--dx-pivot-grid-total-bg",
+  "--dx-pivot-grid-total-text-left-padding",
+  "--dx-pivot-grid-tree-view-item-padding",
+  "--dx-pivot-grid-tree-view-node-container-padding-inline-end",
+  "--dx-pivot-grid-tree-view-search-margin",
+  "--dx-popover-popup-title-border-start-end-radius",
+  "--dx-popover-popup-title-border-start-start-radius",
+  "--dx-popup-border-radius",
+  "--dx-popup-bottom-bg",
+  "--dx-popup-bottom-content",
+  "--dx-popup-bottom-toolbar-height",
+  "--dx-popup-button-margin",
+  "--dx-popup-content-box-shadow",
+  "--dx-popup-content-box-shadow-focused",
+  "--dx-popup-content-padding",
+  "--dx-popup-content-padding-block",
+  "--dx-popup-content-with-title-bottom-padding",
+  "--dx-popup-content-with-title-top-padding",
+  "--dx-popup-dialog-backdrop",
+  "--dx-popup-dialog-message-padding",
+  "--dx-popup-title-bg",
+  "--dx-popup-title-border",
+  "--dx-popup-title-border-block-end",
+  "--dx-popup-title-content",
+  "--dx-popup-title-min-height",
+  "--dx-popup-title-padding",
+  "--dx-popup-toolbar-height",
+  "--dx-popup-toolbar-item-padding-inline",
+  "--dx-popup-toolbar-item-spacing",
+  "--dx-popup-toolbar-label-font-size",
+  "--dx-popup-toolbar-padding-inline",
+  "--dx-progress-bar-bg",
+  "--dx-progress-bar-border-radius",
+  "--dx-progress-bar-container-bg-disabled",
+  "--dx-progress-bar-content-disabled",
+  "--dx-progress-bar-height",
+  "--dx-progress-bar-indeterminate-bg",
+  "--dx-progress-bar-indeterminate-bg-disabled",
+  "--dx-progress-bar-indeterminate-invalid-bg",
+  "--dx-progress-bar-indeterminate-width",
+  "--dx-progress-bar-label-content",
+  "--dx-progress-bar-range-bg",
+  "--dx-progress-bar-range-bg-disabled",
+  "--dx-progress-bar-range-indeterminate-bg",
+  "--dx-progress-bar-range-invalid-bg",
+  "--dx-progress-bar-status-font-size",
+  "--dx-progress-bar-status-padding-block-start",
+  "--dx-progress-bar-status-padding-inline-end",
+  "--dx-progress-bar-status-padding-inline-start",
+  "--dx-radio-button-bg-read-only",
+  "--dx-radio-button-border-disabled",
+  "--dx-radio-button-border-read-only",
+  "--dx-radio-button-checked-bg",
+  "--dx-radio-button-checked-bg-active",
+  "--dx-radio-button-checked-bg-focused",
+  "--dx-radio-button-checked-bg-hovered",
+  "--dx-radio-button-checked-border",
+  "--dx-radio-button-checked-border-active",
+  "--dx-radio-button-checked-border-focused",
+  "--dx-radio-button-checked-border-hovered",
+  "--dx-radio-button-content-disabled",
+  "--dx-radio-button-icon-bg",
+  "--dx-radio-button-icon-border",
+  "--dx-radio-button-icon-border-active",
+  "--dx-radio-button-icon-border-hovered",
+  "--dx-radio-button-invalid-bg",
+  "--dx-radio-button-invalid-bg-active",
+  "--dx-radio-button-invalid-bg-focused",
+  "--dx-radio-button-invalid-bg-hovered",
+  "--dx-radio-button-invalid-border",
+  "--dx-radio-button-invalid-border-active",
+  "--dx-radio-button-invalid-border-focused",
+  "--dx-radio-button-invalid-border-hovered",
+  "--dx-radio-button-value-container-padding-inline-end",
+  "--dx-radio-group-collection-column-gap",
+  "--dx-radio-group-collection-horizontal-column-gap",
+  "--dx-radio-group-radio-button-margin-block",
+  "--dx-recurrence-editor-button-group-padding",
+  "--dx-recurrence-editor-count-number-box-margin-block-start",
+  "--dx-recurrence-editor-interval-number-box-margin-block-start",
+  "--dx-recurrence-editor-number-box-margin",
+  "--dx-recurrence-editor-radio-group-item-padding-block-end",
+  "--dx-recurrence-editor-radio-group-margin",
+  "--dx-recurrence-editor-until-date-box-margin-block-start",
+  "--dx-scheduler-accent-border",
+  "--dx-scheduler-agenda-appointment-allday-padding-inline-end",
+  "--dx-scheduler-agenda-appointment-bg-active",
+  "--dx-scheduler-agenda-appointment-bg-hovered",
+  "--dx-scheduler-agenda-appointment-content",
+  "--dx-scheduler-agenda-appointment-item-border-radius",
+  "--dx-scheduler-agenda-appointment-item-padding",
+  "--dx-scheduler-agenda-appointment-last-margin",
+  "--dx-scheduler-agenda-appointment-margin",
+  "--dx-scheduler-agenda-appointment-recurrence-icon",
+  "--dx-scheduler-agenda-appointment-resource-item-margin-inline-start",
+  "--dx-scheduler-agenda-appointment-resource-value-margin-inline-start",
+  "--dx-scheduler-agenda-appointment-right-layout-margin-inline-start",
+  "--dx-scheduler-agenda-appointment-rtl-margin-inline-end",
+  "--dx-scheduler-agenda-appointment-title-font-size",
+  "--dx-scheduler-agenda-date-table-padding-block-start",
+  "--dx-scheduler-agenda-details-content",
+  "--dx-scheduler-agenda-details-font-size",
+  "--dx-scheduler-agenda-left-column-width",
+  "--dx-scheduler-agenda-time-panel-cell-padding",
+  "--dx-scheduler-agenda-title-font-weight",
+  "--dx-scheduler-all-day-appointment-content-padding",
+  "--dx-scheduler-all-day-panel-bg",
+  "--dx-scheduler-all-day-table-cell-height",
+  "--dx-scheduler-all-day-title-font-size",
+  "--dx-scheduler-appointment-10min-icon-font-size",
+  "--dx-scheduler-appointment-10min-icon-inset-inline-end",
+  "--dx-scheduler-appointment-10min-recurrence-padding-inline-end",
+  "--dx-scheduler-appointment-10min-title-font-size",
+  "--dx-scheduler-appointment-10min-title-line-height",
+  "--dx-scheduler-appointment-15min-height",
+  "--dx-scheduler-appointment-15min-icon-font-size",
+  "--dx-scheduler-appointment-15min-icon-inset-inline-end",
+  "--dx-scheduler-appointment-15min-recurrence-padding-inline-end",
+  "--dx-scheduler-appointment-15min-title-font-size",
+  "--dx-scheduler-appointment-15min-title-line-height",
+  "--dx-scheduler-appointment-20min-height",
+  "--dx-scheduler-appointment-20min-icon-inset-inline-end",
+  "--dx-scheduler-appointment-20min-recurrence-padding-inline-end",
+  "--dx-scheduler-appointment-25min-height",
+  "--dx-scheduler-appointment-base-bg",
+  "--dx-scheduler-appointment-bg-active",
+  "--dx-scheduler-appointment-border-radius",
+  "--dx-scheduler-appointment-collector-height",
+  "--dx-scheduler-appointment-collector-margin-inline-end",
+  "--dx-scheduler-appointment-collector-margin-inline-start",
+  "--dx-scheduler-appointment-collector-width",
+  "--dx-scheduler-appointment-content",
+  "--dx-scheduler-appointment-content-details-font-size",
+  "--dx-scheduler-appointment-content-details-margin-block-start",
+  "--dx-scheduler-appointment-content-focused",
+  "--dx-scheduler-appointment-content-padding",
+  "--dx-scheduler-appointment-content-padding-inline-end",
+  "--dx-scheduler-appointment-content-rtl-padding",
+  "--dx-scheduler-appointment-date-content",
+  "--dx-scheduler-appointment-details-font-size",
+  "--dx-scheduler-appointment-dragging-shadow",
+  "--dx-scheduler-appointment-icon-font-size",
+  "--dx-scheduler-appointment-marker-border-radius-active",
+  "--dx-scheduler-appointment-min-size",
+  "--dx-scheduler-appointment-month-font-size",
+  "--dx-scheduler-appointment-month-text-font-size",
+  "--dx-scheduler-appointment-opacity-disabled",
+  "--dx-scheduler-appointment-overlay-bg",
+  "--dx-scheduler-appointment-popup-all-day-item-height",
+  "--dx-scheduler-appointment-popup-days-of-week-buttons-gap",
+  "--dx-scheduler-appointment-popup-icon-container-height",
+  "--dx-scheduler-appointment-popup-icon-margin-block-start",
+  "--dx-scheduler-appointment-popup-icon-padding-inline-end",
+  "--dx-scheduler-appointment-popup-item-padding-inline",
+  "--dx-scheduler-appointment-popup-repeat-end-item-height",
+  "--dx-scheduler-appointment-popup-toolbar-height",
+  "--dx-scheduler-appointment-recurrence-icon-inset-block-start",
+  "--dx-scheduler-appointment-reduced-content-padding",
+  "--dx-scheduler-appointment-reduced-icon-inset-block-start",
+  "--dx-scheduler-appointment-reduced-icon-rtl-inset-inline-start",
+  "--dx-scheduler-appointment-resizing-opacity",
+  "--dx-scheduler-appointment-short-content-padding",
+  "--dx-scheduler-appointment-start-shadow",
+  "--dx-scheduler-appointment-strip-bg",
+  "--dx-scheduler-appointment-strip-border-end-end-radius",
+  "--dx-scheduler-appointment-strip-border-end-start-radius",
+  "--dx-scheduler-appointment-strip-border-start-end-radius",
+  "--dx-scheduler-appointment-strip-border-start-start-radius",
+  "--dx-scheduler-appointment-strip-width",
+  "--dx-scheduler-appointment-title-font-size",
+  "--dx-scheduler-appointment-tooltip-content-margin-inline-start",
+  "--dx-scheduler-appointment-tooltip-date-font-size",
+  "--dx-scheduler-appointment-tooltip-remove-padding-block-start",
+  "--dx-scheduler-appointment-tooltip-title-font-size",
+  "--dx-scheduler-appointment-tooltip-title-margin-block-start",
+  "--dx-scheduler-appointment-transparent-left-border",
+  "--dx-scheduler-appointment-transparent-right-border",
+  "--dx-scheduler-base-border",
+  "--dx-scheduler-bg",
+  "--dx-scheduler-border",
+  "--dx-scheduler-border-radius",
+  "--dx-scheduler-border-width",
+  "--dx-scheduler-cell-bg-active",
+  "--dx-scheduler-cell-bg-hovered",
+  "--dx-scheduler-collapsed-all-day-table-cell-height",
+  "--dx-scheduler-common-collector-margin",
+  "--dx-scheduler-common-collector-size",
+  "--dx-scheduler-content-disabled",
+  "--dx-scheduler-current-time-cell-content",
+  "--dx-scheduler-current-time-cell-date-bg",
+  "--dx-scheduler-date-table-cell-height",
+  "--dx-scheduler-date-time-indicator-height",
+  "--dx-scheduler-dd-appointment-content-hovered",
+  "--dx-scheduler-dropdown-appointment-date-content",
+  "--dx-scheduler-dropdown-button-adaptive-margin",
+  "--dx-scheduler-dropdown-button-adaptive-margin-block",
+  "--dx-scheduler-dropdown-button-height",
+  "--dx-scheduler-dropdown-button-margin",
+  "--dx-scheduler-dropdown-button-margin-block",
+  "--dx-scheduler-dropdown-button-padding",
+  "--dx-scheduler-droppable-cell-bg",
+  "--dx-scheduler-first-month-border",
+  "--dx-scheduler-first-month-cell-bg",
+  "--dx-scheduler-first-of-month-border",
+  "--dx-scheduler-form-icon",
+  "--dx-scheduler-group-header-agenda-font-size",
+  "--dx-scheduler-group-header-border-block-end",
+  "--dx-scheduler-group-header-cell-height",
+  "--dx-scheduler-group-header-content-inset-block-start",
+  "--dx-scheduler-group-header-content-padding-block-start",
+  "--dx-scheduler-group-header-font-size",
+  "--dx-scheduler-group-header-font-weight",
+  "--dx-scheduler-group-header-table-cell-width",
+  "--dx-scheduler-group-separator-border",
+  "--dx-scheduler-header-bg",
+  "--dx-scheduler-header-day-element-height",
+  "--dx-scheduler-header-height",
+  "--dx-scheduler-header-offset",
+  "--dx-scheduler-header-panel-cell-date-content",
+  "--dx-scheduler-header-panel-cell-date-font-size",
+  "--dx-scheduler-header-panel-cell-date-margin-block-end",
+  "--dx-scheduler-header-panel-cell-padding-block-end",
+  "--dx-scheduler-header-panel-current-time-cell-height",
+  "--dx-scheduler-header-panel-day-font-size",
+  "--dx-scheduler-header-panel-empty-cell-border-block-end-width",
+  "--dx-scheduler-header-panel-margin",
+  "--dx-scheduler-header-panel-time-cell-height",
+  "--dx-scheduler-header-panel-time-cell-padding",
+  "--dx-scheduler-inverted-content",
+  "--dx-scheduler-last-group-cell-border-inline-end",
+  "--dx-scheduler-left-column-width",
+  "--dx-scheduler-list-item-border-block-end",
+  "--dx-scheduler-month-appointment-content-padding",
+  "--dx-scheduler-month-appointment-content-rtl-padding",
+  "--dx-scheduler-month-date-font-size",
+  "--dx-scheduler-month-date-text-font-size",
+  "--dx-scheduler-month-date-text-padding",
+  "--dx-scheduler-month-recurrence-appointment-content-padding",
+  "--dx-scheduler-month-recurrence-appointment-content-rtl-padding",
+  "--dx-scheduler-navigator-button-font-size",
+  "--dx-scheduler-navigator-icon-font-size",
+  "--dx-scheduler-panel-content",
+  "--dx-scheduler-recurrence-appointment-content-padding",
+  "--dx-scheduler-recurrence-icon-inset-inline",
+  "--dx-scheduler-recurring-appointment-content-padding",
+  "--dx-scheduler-recurring-appointment-content-rtl-padding",
+  "--dx-scheduler-reduced-icon-inset-inline",
+  "--dx-scheduler-rtl-border-inline-start",
+  "--dx-scheduler-rtl-padding",
+  "--dx-scheduler-scrollable-content-min-height",
+  "--dx-scheduler-small-font-size",
+  "--dx-scheduler-small-margin-block-end",
+  "--dx-scheduler-small-margin-block-start",
+  "--dx-scheduler-small-margin-inline-start",
+  "--dx-scheduler-small-padding-inline-end",
+  "--dx-scheduler-small-padding-inline-start",
+  "--dx-scheduler-time-indicator-bg",
+  "--dx-scheduler-time-indicator-content",
+  "--dx-scheduler-time-indicator-font-size",
+  "--dx-scheduler-time-indicator-size",
+  "--dx-scheduler-time-panel-cell-margin-block-start",
+  "--dx-scheduler-time-panel-content-disabled",
+  "--dx-scheduler-time-panel-font-size",
+  "--dx-scheduler-timeline-cell-height",
+  "--dx-scheduler-timeline-cell-width",
+  "--dx-scheduler-timeline-date-table-cell-height",
+  "--dx-scheduler-timeline-group-header-width",
+  "--dx-scheduler-timeline-group-three-empty-cell-width",
+  "--dx-scheduler-timeline-group-two-empty-cell-width",
+  "--dx-scheduler-timeline-min-height",
+  "--dx-scheduler-toolbar-item-offset",
+  "--dx-scheduler-tooltip-appointment-content",
+  "--dx-scheduler-tooltip-appointment-item-content-date-margin-block-start",
+  "--dx-scheduler-tooltip-appointment-item-marker-body-margin-block-start",
+  "--dx-scheduler-tooltip-content-padding",
+  "--dx-scheduler-tooltip-date-content",
+  "--dx-scheduler-tooltip-date-font-size",
+  "--dx-scheduler-tooltip-date-margin",
+  "--dx-scheduler-tooltip-marker-size",
+  "--dx-scheduler-tooltip-remove-margin-block-start",
+  "--dx-scheduler-tooltip-shadow",
+  "--dx-scheduler-tooltip-subject-font-size",
+  "--dx-scheduler-tooltip-subject-font-weight",
+  "--dx-scheduler-tooltip-title-margin-block-start",
+  "--dx-scheduler-tooltip-title-margin-inline-start",
+  "--dx-scheduler-tooltip-width",
+  "--dx-scheduler-views-empty-cell-border-block-end",
+  "--dx-scheduler-views-empty-cell-border-inline-end",
+  "--dx-scheduler-views-empty-cell-border-inline-start",
+  "--dx-scheduler-views-first-child-border-inline-start",
+  "--dx-scheduler-views-group-header-content-height",
+  "--dx-scheduler-views-group-header-padding",
+  "--dx-scheduler-views-header-border",
+  "--dx-scheduler-views-sidebar-group-header-padding",
+  "--dx-scheduler-views-time-indicator-height",
+  "--dx-scheduler-views-time-panel-border-block-end",
+  "--dx-scheduler-views-vertical-group-min-height",
+  "--dx-scheduler-virtual-row-height",
+  "--dx-scheduler-widget-margin-block-end",
+  "--dx-scheduler-workspace-accent-content",
+  "--dx-scheduler-workspace-bg",
+  "--dx-scheduler-workspace-cell-bg-active",
+  "--dx-scheduler-workspace-cell-bg-focused",
+  "--dx-scheduler-workspace-cell-content-hovered",
+  "--dx-scheduler-workspace-date-table-cell-height",
+  "--dx-scheduler-workspace-info-font-size",
+  "--dx-scheduler-workspace-month-cell-left-offset",
+  "--dx-scheduler-workspace-month-content",
+  "--dx-scheduler-workspace-month-header-height",
+  "--dx-scheduler-workspace-month-timeline-time-height",
+  "--dx-scheduler-workspace-other-month-content",
+  "--dx-scroll-view-icon-pull-down-padding",
+  "--dx-scroll-view-load-indicator-font-size",
+  "--dx-scroll-view-load-indicator-size",
+  "--dx-scroll-view-pull-down-height",
+  "--dx-scroll-view-pull-down-icon-font-size",
+  "--dx-scroll-view-pull-down-image-height",
+  "--dx-scroll-view-pull-down-image-margin",
+  "--dx-scroll-view-pull-down-indicator-padding",
+  "--dx-scroll-view-pull-down-indicator-width",
+  "--dx-scroll-view-pull-down-padding",
+  "--dx-scroll-view-pull-down-text-margin-inline-start",
+  "--dx-scroll-view-pull-down-top-offset",
+  "--dx-scroll-view-rtl-margin-inline-end",
+  "--dx-scroll-view-scroll-bottom-image-height",
+  "--dx-scroll-view-scroll-bottom-image-width",
+  "--dx-scroll-view-scroll-bottom-indicator-margin",
+  "--dx-scroll-view-scroll-bottom-indicator-rtl-margin",
+  "--dx-scroll-view-scroll-bottom-padding",
+  "--dx-scroll-view-shadow",
+  "--dx-scroll-view-top-pocket-height",
+  "--dx-scroll-view-top-pocket-width",
+  "--dx-scrollable-bg",
+  "--dx-scrollable-scroll-bg",
+  "--dx-scrollable-scroll-bg-disabled",
+  "--dx-scrollable-scroll-height",
+  "--dx-scrollable-scroll-padding",
+  "--dx-scrollable-scroll-width",
+  "--dx-scrollable-scrollbar-bg",
+  "--dx-scrollable-scrollbar-size",
+  "--dx-scrollable-scrollbar-thin-size",
+  "--dx-select-box-list-bg",
+  "--dx-slider-accent-bg",
+  "--dx-slider-accent-bg-focused",
+  "--dx-slider-accent-bg-hovered",
+  "--dx-slider-accent-border-focused",
+  "--dx-slider-bar-bg",
+  "--dx-slider-bar-bg-disabled",
+  "--dx-slider-bg-disabled",
+  "--dx-slider-border",
+  "--dx-slider-border-disabled",
+  "--dx-slider-border-radius",
+  "--dx-slider-element-bg",
+  "--dx-slider-handle-border-width",
+  "--dx-slider-handle-inner-border-width",
+  "--dx-slider-handle-invalid-bg",
+  "--dx-slider-handle-size",
+  "--dx-slider-height",
+  "--dx-slider-invalid-bg",
+  "--dx-slider-invalid-bg-focused",
+  "--dx-slider-invalid-bg-hovered",
+  "--dx-slider-invalid-border-focused",
+  "--dx-slider-label-bottom-inset-block-end",
+  "--dx-slider-label-bottom-padding-block-end",
+  "--dx-slider-label-top-inset-block-start",
+  "--dx-slider-label-top-padding-block-start",
+  "--dx-slider-tooltip-content",
+  "--dx-slider-tooltip-height",
+  "--dx-slider-tooltip-top-padding-block-start",
+  "--dx-slider-tooltip-width",
+  "--dx-slider-track-border-radius",
+  "--dx-slider-track-height",
+  "--dx-slider-wrapper-height",
+  "--dx-sortable-clone-opacity",
+  "--dx-sortable-clone-shadow",
+  "--dx-sortable-placeholder-border",
+  "--dx-sortable-placeholder-border-width",
+  "--dx-sortable-placeholder-inside-border-width",
+  "--dx-sortable-source-opacity",
+  "--dx-speed-dial-action-backdrop",
+  "--dx-speed-dial-action-bg",
+  "--dx-speed-dial-action-bg-active",
+  "--dx-speed-dial-action-bg-disabled",
+  "--dx-speed-dial-action-bg-hovered",
+  "--dx-speed-dial-action-content",
+  "--dx-speed-dial-action-content-disabled",
+  "--dx-speed-dial-action-fa-button-label-border-radius",
+  "--dx-speed-dial-action-fa-button-label-font-weight",
+  "--dx-speed-dial-action-fa-button-label-offset",
+  "--dx-speed-dial-action-fa-button-label-padding",
+  "--dx-speed-dial-action-fa-button-size",
+  "--dx-speed-dial-action-label-shadow",
+  "--dx-speed-dial-action-main-bg",
+  "--dx-speed-dial-action-main-bg-active",
+  "--dx-speed-dial-action-main-bg-hovered",
+  "--dx-speed-dial-action-main-content",
+  "--dx-speed-dial-action-main-fa-button-label-padding",
+  "--dx-speed-dial-action-main-fa-button-padding-inline",
+  "--dx-speed-dial-action-main-fa-button-size",
+  "--dx-speed-dial-action-shadow",
+  "--dx-splitter-bar-bg-active",
+  "--dx-splitter-bar-border",
+  "--dx-splitter-bar-border-disabled",
+  "--dx-splitter-bar-border-width",
+  "--dx-splitter-bar-width",
+  "--dx-splitter-resize-handle-bg",
+  "--dx-splitter-resize-handle-bg-disabled",
+  "--dx-splitter-resize-handle-bg-focused",
+  "--dx-splitter-resize-handle-bg-hovered",
+  "--dx-splitter-resize-handle-content",
+  "--dx-splitter-resize-handle-content-disabled",
+  "--dx-splitter-resize-handle-content-focused",
+  "--dx-splitter-resize-handle-gap",
+  "--dx-splitter-resize-handle-icon-size",
+  "--dx-stepper-connector-bg",
+  "--dx-stepper-connector-padding",
+  "--dx-stepper-connector-size",
+  "--dx-stepper-connector-thickness",
+  "--dx-stepper-connector-value-bg",
+  "--dx-stepper-connector-value-bg-disabled",
+  "--dx-stepper-padding",
+  "--dx-stepper-step-accent-bg",
+  "--dx-stepper-step-accent-bg-hovered",
+  "--dx-stepper-step-base-bg",
+  "--dx-stepper-step-base-bg-hovered",
+  "--dx-stepper-step-base-border",
+  "--dx-stepper-step-base-border-hovered",
+  "--dx-stepper-step-base-content",
+  "--dx-stepper-step-base-label-content",
+  "--dx-stepper-step-bg-disabled",
+  "--dx-stepper-step-bg-selected",
+  "--dx-stepper-step-bg-selected-disabled",
+  "--dx-stepper-step-bg-selected-hovered",
+  "--dx-stepper-step-border-disabled",
+  "--dx-stepper-step-content-column-gap",
+  "--dx-stepper-step-content-disabled",
+  "--dx-stepper-step-content-row-gap",
+  "--dx-stepper-step-content-selected",
+  "--dx-stepper-step-content-selected-disabled",
+  "--dx-stepper-step-font-weight-selected",
+  "--dx-stepper-step-icon-size",
+  "--dx-stepper-step-indicator-halo-size",
+  "--dx-stepper-step-indicator-ring-inset",
+  "--dx-stepper-step-indicator-ring-size",
+  "--dx-stepper-step-indicator-size",
+  "--dx-stepper-step-invalid-bg",
+  "--dx-stepper-step-invalid-bg-hovered",
+  "--dx-stepper-step-invalid-bg-selected",
+  "--dx-stepper-step-invalid-bg-selected-hovered",
+  "--dx-stepper-step-invalid-border",
+  "--dx-stepper-step-invalid-border-hovered",
+  "--dx-stepper-step-invalid-content",
+  "--dx-stepper-step-invalid-content-hovered",
+  "--dx-stepper-step-invalid-label-content",
+  "--dx-stepper-step-label-content-selected",
+  "--dx-stepper-step-min-size",
+  "--dx-stepper-step-optional-mark-font-size",
+  "--dx-stepper-step-shadow",
+  "--dx-stepper-step-shadow-disabled",
+  "--dx-stepper-step-transition-duration",
+  "--dx-surface-overlay",
+  "--dx-switch-bg",
+  "--dx-switch-border-disabled",
+  "--dx-switch-box-shadow",
+  "--dx-switch-container-border-radius",
+  "--dx-switch-container-height",
+  "--dx-switch-container-margin-block",
+  "--dx-switch-container-padding-inline",
+  "--dx-switch-container-rtl-offset",
+  "--dx-switch-handle-bg-disabled",
+  "--dx-switch-handle-border-radius",
+  "--dx-switch-handle-height",
+  "--dx-switch-handle-margin",
+  "--dx-switch-handle-off-bg",
+  "--dx-switch-handle-off-bg-active",
+  "--dx-switch-handle-off-bg-hovered",
+  "--dx-switch-handle-on-bg",
+  "--dx-switch-handle-on-box-shadow",
+  "--dx-switch-handle-on-box-shadow-blur",
+  "--dx-switch-handle-on-shadow",
+  "--dx-switch-height",
+  "--dx-switch-invalid-bg",
+  "--dx-switch-invalid-bg-focused",
+  "--dx-switch-invalid-bg-hovered",
+  "--dx-switch-invalid-border",
+  "--dx-switch-invalid-border-focused",
+  "--dx-switch-invalid-border-hovered",
+  "--dx-switch-label-padding",
+  "--dx-switch-off-border",
+  "--dx-switch-off-border-active",
+  "--dx-switch-off-border-hovered",
+  "--dx-switch-off-padding-block-end",
+  "--dx-switch-on-bg",
+  "--dx-switch-on-bg-disabled",
+  "--dx-switch-on-bg-focused",
+  "--dx-switch-on-bg-hovered",
+  "--dx-switch-on-border",
+  "--dx-switch-on-border-disabled",
+  "--dx-switch-on-border-focused",
+  "--dx-switch-on-border-hovered",
+  "--dx-switch-padding",
+  "--dx-switch-transition",
+  "--dx-switch-width",
+  "--dx-tab-panel-border",
+  "--dx-tab-panel-tabs-bottom-border",
+  "--dx-tab-panel-tabs-left-border",
+  "--dx-tab-panel-tabs-right-border",
+  "--dx-tab-panel-tabs-top-border",
+  "--dx-tabs-badge-min-size",
+  "--dx-tabs-icon-size",
+  "--dx-tabs-indicator-primary-length",
+  "--dx-tabs-indicator-primary-thickness",
+  "--dx-tabs-indicator-secondary-border-radius",
+  "--dx-tabs-indicator-secondary-length",
+  "--dx-tabs-indicator-secondary-thickness",
+  "--dx-tabs-item-gap",
+  "--dx-tabs-item-padding",
+  "--dx-tabs-item-padding-block",
+  "--dx-tabs-item-padding-inline",
+  "--dx-tabs-item-secondary-border-radius",
+  "--dx-tabs-nav-button-bg",
+  "--dx-tabs-nav-button-content-disabled",
+  "--dx-tabs-tab-accent-font-weight",
+  "--dx-tabs-tab-basic-font-weight",
+  "--dx-tabs-tab-basic-selector-selected",
+  "--dx-tabs-tab-bg",
+  "--dx-tabs-tab-bg-active",
+  "--dx-tabs-tab-bg-focused",
+  "--dx-tabs-tab-bg-hovered",
+  "--dx-tabs-tab-content",
+  "--dx-tabs-tab-content-disabled",
+  "--dx-tabs-tab-content-selected",
+  "--dx-tabs-tab-height",
+  "--dx-tabs-tab-icon",
+  "--dx-tabs-tab-icon-content-disabled",
+  "--dx-tabs-tab-icon-content-selected",
+  "--dx-tabs-tab-nav-button-content-padding",
+  "--dx-tabs-tab-nav-button-icon-font-size",
+  "--dx-tabs-tab-nav-button-icon-height",
+  "--dx-tabs-tab-nav-button-icon-width",
+  "--dx-tabs-tab-primary-bg-active",
+  "--dx-tabs-tab-primary-bg-focused",
+  "--dx-tabs-tab-primary-bg-hovered",
+  "--dx-tabs-tab-selector-active",
+  "--dx-tabs-tab-selector-disabled",
+  "--dx-tabs-tab-selector-hovered",
+  "--dx-tabs-tab-selector-selected-active",
+  "--dx-tabs-tab-selector-selected-focused",
+  "--dx-tabs-tab-selector-selected-hovered",
+  "--dx-tabs-tab-vertical-nav-button-content-padding",
+  "--dx-tabs-text-column-gap",
+  "--dx-tag-box-filled-with-label-padding-block-end",
+  "--dx-tag-box-filled-with-label-padding-block-start",
+  "--dx-tag-box-list-select-all-border-block-end",
+  "--dx-tag-box-select-all-line",
+  "--dx-tag-box-select-all-margin-block-end",
+  "--dx-tag-box-select-all-padding-block-end",
+  "--dx-tag-box-tag-bg",
+  "--dx-tag-box-tag-bg-disabled",
+  "--dx-tag-box-tag-bg-hovered",
+  "--dx-tag-box-tag-border",
+  "--dx-tag-box-tag-border-focused",
+  "--dx-tag-box-tag-border-radius",
+  "--dx-tag-box-tag-border-width",
+  "--dx-tag-box-tag-container-gap",
+  "--dx-tag-box-tag-container-padding-block",
+  "--dx-tag-box-tag-container-padding-inline-start",
+  "--dx-tag-box-tag-content",
+  "--dx-tag-box-tag-content-active",
+  "--dx-tag-box-tag-content-disabled",
+  "--dx-tag-box-tag-content-font-size",
+  "--dx-tag-box-tag-content-line-height",
+  "--dx-tag-box-tag-content-min-width",
+  "--dx-tag-box-tag-content-padding-block",
+  "--dx-tag-box-tag-content-padding-inline-end",
+  "--dx-tag-box-tag-content-padding-inline-start",
+  "--dx-tag-box-tag-remove-button-content",
+  "--dx-tag-box-tag-size",
+  "--dx-text-area-content-line-height",
+  "--dx-text-area-input-container-margin",
+  "--dx-text-box-content-disabled",
+  "--dx-text-box-search-bar-padding-block-end",
+  "--dx-text-box-search-icon-size",
+  "--dx-text-editor-border",
+  "--dx-text-editor-border-disabled",
+  "--dx-text-editor-border-focused",
+  "--dx-text-editor-border-hovered",
+  "--dx-text-editor-border-read-only",
+  "--dx-text-editor-border-width",
+  "--dx-text-editor-button-filled-inset-inline-end",
+  "--dx-text-editor-button-icon-margin-block-start",
+  "--dx-text-editor-button-icon-only-padding",
+  "--dx-text-editor-button-icon-with-text-margin-block-start",
+  "--dx-text-editor-button-margin-block-end",
+  "--dx-text-editor-button-margin-block-start",
+  "--dx-text-editor-button-underlined-height",
+  "--dx-text-editor-clear-button-icon",
+  "--dx-text-editor-clear-button-width",
+  "--dx-text-editor-content",
+  "--dx-text-editor-content-disabled",
+  "--dx-text-editor-custom-button-margin",
+  "--dx-text-editor-filled-bg",
+  "--dx-text-editor-filled-bg-focused",
+  "--dx-text-editor-filled-bg-hovered",
+  "--dx-text-editor-font-size",
+  "--dx-text-editor-icon-container-size",
+  "--dx-text-editor-indicator",
+  "--dx-text-editor-input-border-radius",
+  "--dx-text-editor-input-filled-padding-block-end",
+  "--dx-text-editor-input-filled-padding-block-start",
+  "--dx-text-editor-input-filled-padding-inline",
+  "--dx-text-editor-input-filled-with-label-padding-block-end",
+  "--dx-text-editor-input-filled-with-label-padding-block-start",
+  "--dx-text-editor-input-min-height",
+  "--dx-text-editor-input-underlined-padding-block-end",
+  "--dx-text-editor-input-underlined-padding-block-start",
+  "--dx-text-editor-input-underlined-padding-inline",
+  "--dx-text-editor-input-underlined-with-label-padding-block-end",
+  "--dx-text-editor-input-underlined-with-label-padding-block-start",
+  "--dx-text-editor-invalid-badge-size",
+  "--dx-text-editor-invalid-border",
+  "--dx-text-editor-invalid-border-focused",
+  "--dx-text-editor-invalid-content",
+  "--dx-text-editor-label-backdrop-height",
+  "--dx-text-editor-label-border-radius",
+  "--dx-text-editor-label-content",
+  "--dx-text-editor-label-content-focused",
+  "--dx-text-editor-label-font-size",
+  "--dx-text-editor-label-height",
+  "--dx-text-editor-label-inset",
+  "--dx-text-editor-label-margin-block-end",
+  "--dx-text-editor-label-offset",
+  "--dx-text-editor-label-outside-height",
+  "--dx-text-editor-label-outside-offset",
+  "--dx-text-editor-label-padding-inline",
+  "--dx-text-editor-line",
+  "--dx-text-editor-line-border-block-end-active",
+  "--dx-text-editor-line-border-block-end-width-active",
+  "--dx-text-editor-line-border-block-end-width-focused",
+  "--dx-text-editor-line-focused",
+  "--dx-text-editor-line-height",
+  "--dx-text-editor-line-hovered",
+  "--dx-text-editor-line-inset-block-end",
+  "--dx-text-editor-line-inset-inline-end",
+  "--dx-text-editor-line-inset-inline-start",
+  "--dx-text-editor-outlined-bg",
+  "--dx-text-editor-outlined-bg-focused",
+  "--dx-text-editor-outlined-bg-hovered",
+  "--dx-text-editor-placeholder",
+  "--dx-text-editor-placeholder-disabled",
+  "--dx-text-editor-spin-button-margin-inline-end",
+  "--dx-text-editor-underlined-bg",
+  "--dx-text-editor-underlined-bg-focused",
+  "--dx-text-editor-underlined-bg-hovered",
+  "--dx-texteditor-color-label",
+  "--dx-texteditor-color-text",
+  "--dx-theme-mode",
+  "--dx-tile-view-bg",
+  "--dx-tile-view-bg-active",
+  "--dx-tile-view-border",
+  "--dx-tile-view-border-hovered",
+  "--dx-tile-view-content",
+  "--dx-tile-view-content-active",
+  "--dx-tile-view-content-disabled",
+  "--dx-tile-view-tile-border",
+  "--dx-tile-view-wrapper-height",
+  "--dx-time-view-clock-arrow-offset",
+  "--dx-time-view-clock-arrow-width",
+  "--dx-time-view-clock-margin-block-end",
+  "--dx-time-view-clock-size",
+  "--dx-time-view-field-min-height",
+  "--dx-time-view-field-number-box-spin-touch-friendly-width",
+  "--dx-time-view-field-number-box-width",
+  "--dx-time-view-format12-width",
+  "--dx-time-view-input-padding-inline-start",
+  "--dx-time-view-number-box-spin-touch-friendly-width",
+  "--dx-time-view-time-separator-margin",
+  "--dx-toast-bg",
+  "--dx-toast-border-radius",
+  "--dx-toast-box-shadow",
+  "--dx-toast-content-font-weight",
+  "--dx-toast-content-padding",
+  "--dx-toast-content-padding-block",
+  "--dx-toast-content-padding-inline",
+  "--dx-toast-error-bg",
+  "--dx-toast-error-content",
+  "--dx-toast-height",
+  "--dx-toast-icon-height",
+  "--dx-toast-icon-margin-inline-end",
+  "--dx-toast-icon-rtl-margin-inline-end",
+  "--dx-toast-icon-width",
+  "--dx-toast-info-bg",
+  "--dx-toast-info-content",
+  "--dx-toast-item-gap",
+  "--dx-toast-stack-gap",
+  "--dx-toast-success-bg",
+  "--dx-toast-success-content",
+  "--dx-toast-warning-bg",
+  "--dx-toast-warning-content",
+  "--dx-toolbar-bg",
+  "--dx-toolbar-button-text-font-weight",
+  "--dx-toolbar-content",
+  "--dx-toolbar-content-disabled",
+  "--dx-toolbar-group-margin",
+  "--dx-toolbar-height",
+  "--dx-toolbar-item-padding",
+  "--dx-toolbar-item-spacing",
+  "--dx-toolbar-label-font-size",
+  "--dx-toolbar-label-font-weight",
+  "--dx-toolbar-menu-section-border-block-end",
+  "--dx-toolbar-padding",
+  "--dx-toolbar-section-padding",
+  "--dx-toolbar-separator-border",
+  "--dx-toolbar-text-editor-width",
+  "--dx-tooltip-arrow-border-radius",
+  "--dx-tooltip-bg",
+  "--dx-tooltip-border-radius",
+  "--dx-tooltip-box-shadow",
+  "--dx-tooltip-content",
+  "--dx-tooltip-font-size",
+  "--dx-tooltip-overlay-content-border",
+  "--dx-tooltip-overlay-content-min-height",
+  "--dx-tooltip-overlay-content-min-width",
+  "--dx-tooltip-padding",
+  "--dx-tooltip-popup-content-padding",
+  "--dx-tree-list-cell-outline-focused",
+  "--dx-tree-list-chevron-icon",
+  "--dx-tree-list-chevron-icon-disabled",
+  "--dx-tree-list-chevron-icon-selected",
+  "--dx-tree-list-empty-space-height",
+  "--dx-tree-list-error-message-margin-block-end",
+  "--dx-tree-list-expand-icon-size",
+  "--dx-tree-list-form-buttons-margin-block-start",
+  "--dx-tree-list-form-buttons-margin-inline-start",
+  "--dx-tree-list-form-buttons-rtl-margin-inline-start",
+  "--dx-tree-list-outline-offset-focused",
+  "--dx-tree-list-sticky-column-border",
+  "--dx-tree-view-bg-focused",
+  "--dx-tree-view-bg-hovered",
+  "--dx-tree-view-border",
+  "--dx-tree-view-border-padding",
+  "--dx-tree-view-border-visible-border",
+  "--dx-tree-view-checkbox-container-size",
+  "--dx-tree-view-checkbox-offset",
+  "--dx-tree-view-container-with-border-offset",
+  "--dx-tree-view-content",
+  "--dx-tree-view-content-focused",
+  "--dx-tree-view-item-bg-selected",
+  "--dx-tree-view-item-bg-selected-disabled",
+  "--dx-tree-view-item-border-radius",
+  "--dx-tree-view-item-content-disabled",
+  "--dx-tree-view-item-content-hovered",
+  "--dx-tree-view-item-content-selected",
+  "--dx-tree-view-item-element-gap",
+  "--dx-tree-view-item-margin",
+  "--dx-tree-view-item-padding",
+  "--dx-tree-view-item-padding-inline",
+  "--dx-tree-view-load-indicator-size",
+  "--dx-tree-view-search-box-margin-block-end",
+  "--dx-tree-view-search-editor-height",
+  "--dx-tree-view-select-all-item-border-block-end",
+  "--dx-tree-view-select-all-item-border-visible-padding",
+  "--dx-tree-view-select-all-item-padding",
+  "--dx-tree-view-spin-icon",
+  "--dx-tree-view-spin-icon-disabled",
+  "--dx-tree-view-toggle-item-width",
+  "--dx-typography-bg",
+  "--dx-typography-heading-1-font-size",
+  "--dx-typography-heading-1-font-weight",
+  "--dx-typography-heading-2-font-size",
+  "--dx-typography-heading-2-font-weight",
+  "--dx-typography-heading-3-font-size",
+  "--dx-typography-heading-3-font-weight",
+  "--dx-typography-heading-4-font-size",
+  "--dx-typography-heading-4-font-weight",
+  "--dx-typography-heading-5-font-size",
+  "--dx-typography-heading-5-font-weight",
+  "--dx-typography-heading-6-font-size",
+  "--dx-typography-heading-6-font-weight",
+  "--dx-typography-l-font-size",
+  "--dx-typography-link-content",
+  "--dx-typography-m-font-size",
+  "--dx-typography-s-font-size",
+  "--dx-typography-xl-font-size",
+  "--dx-typography-xs-font-size",
+  "--dx-valid-badge-content",
+  "--dx-valid-badge-font-size",
+  "--dx-validation-message-bg",
+  "--dx-validation-message-bg-disabled",
+  "--dx-validation-message-content",
+  "--dx-validation-message-content-disabled",
+  "--dx-validation-message-content-padding",
+  "--dx-validation-message-font-size",
+  "--dx-validation-message-line-height",
+  "--dx-validation-message-padding-block",
+  "--dx-validation-message-padding-inline",
+  "--dx-validation-overlay-border-radius",
+  "--dx-validation-summary-content",
+  "--dx-validation-summary-content-disabled",
+  "--dx-validation-summary-item-border-block-end-width",
+  "--dx-validation-summary-item-margin",
+  "--dx-validation-summary-margin-block-start",
+  "--dx-widget-bg"
+]
diff --git a/packages/devextreme-scss/tests/public-surface.test.ts b/packages/devextreme-scss/tests/public-surface.test.ts
new file mode 100644
index 000000000000..08a8d5d82cbe
--- /dev/null
+++ b/packages/devextreme-scss/tests/public-surface.test.ts
@@ -0,0 +1,107 @@
+/*
+ * The baseline of names the theme publishes. tests/public-renames.test.ts keeps a name that was
+ * retired from coming back, but it only knows the names someone wrote into the journal — so on its
+ * own the journal is a promise, not a gate. This file is the gate: the published set is pinned in
+ * public-surface.baseline.json, and a name that leaves it has to be accounted for in
+ * tools/naming/public-renames.json first.
+ *
+ *   pnpm run naming:baseline   # regenerate after a reviewed change
+ *
+ * Regenerating does not excuse a removal: the journal check below runs in update mode too, so a
+ * disappearing name cannot be regenerated away.
+ *
+ * Only declarations count. The handful of names the theme reads but never declares — the accent and
+ * runtime hooks a user sets from the outside — are governed by tools/naming/accent-contract.json
+ * and runtime-contract.json, and tests/fluent-next-naming.test.ts holds them.
+ */
+
+import { readFileSync, readdirSync, existsSync, writeFileSync } from 'fs';
+import { join } from 'path';
+
+type Entry = { name: string };
+
+const packageRoot = process.cwd();
+const artifactsCss = join(packageRoot, '..', 'devextreme', 'artifacts', 'css');
+const baselinePath = join(__dirname, 'public-surface.baseline.json');
+const journalPath = join(packageRoot, 'tools', 'naming', 'public-renames.json');
+
+const bundleNames = existsSync(artifactsCss)
+  ? readdirSync(artifactsCss)
+    // The minified twins carry the same names; comparing them adds nothing but a second spelling.
+    .filter((name) => /^dx\.fluent-next\..*\.css$/.test(name) && !name.endsWith('.min.css'))
+    .sort()
+  : [];
+
+if (!bundleNames.length) {
+  throw new Error(`no dx.fluent-next.*.css bundles found in ${artifactsCss} — the gate needs the `
+    + 'built themes; run `pnpm nx run devextreme-scss:build:themes`');
+}
+
+const declarations = (css: string): string[] => [
+  ...new Set([...css.matchAll(/(--dx-[a-z0-9-]+)\s*:/g)].map((match) => match[1])),
+].sort();
+
+const surfaces = bundleNames.map((name) => ({
+  name,
+  names: declarations(readFileSync(join(artifactsCss, name), 'utf8')),
+}));
+
+const [reference] = surfaces;
+const current = reference.names;
+const currentSet = new Set(current);
+
+const baseline: string[] = JSON.parse(readFileSync(baselinePath, 'utf8'));
+const journal: { retired: Entry[] } = JSON.parse(readFileSync(journalPath, 'utf8'));
+const retired = new Set(journal.retired.map(({ name }) => name));
+
+/*
+ * fluent-next has not shipped yet, so no published name can be relied on and no removal reaches a
+ * user: a journal entry would have nobody to notify, and the journal would fill with names that
+ * were never public, burying the ones that were. Until the theme ships, a removal only has to be
+ * deliberate — which the baseline already enforces. Flip this when fluent-next is released.
+ */
+const THEME_IS_PUBLISHED = false;
+
+const added = current.filter((name) => !baseline.includes(name));
+const removed = baseline.filter((name) => !currentSet.has(name));
+
+/*
+ * A name that ships in one colour mode or density but not another is a mistake either way, and it
+ * would also make "the published set" ambiguous for the checks below.
+ */
+test('every fluent-next bundle publishes the same names', () => {
+  const differing = surfaces
+    .filter(({ names }) => names.join('\n') !== current.join('\n'))
+    .map(({ name }) => name);
+
+  expect(differing).toEqual([]);
+});
+
+/*
+ * Runs in update mode as well: regenerating the baseline is how a reviewed removal is recorded, not
+ * how it is hidden.
+ */
+const undocumented = () => (THEME_IS_PUBLISHED
+  ? removed.filter((name) => !retired.has(name))
+  : []);
+
+test('no name leaves the published surface without a journal entry', () => {
+  expect(undocumented()).toEqual([]);
+});
+
+if (process.env.UPDATE_NAMING_BASELINE === '1') {
+  // Guarded by the same rule, so a regeneration run cannot be the way an unrecorded removal lands.
+  test('baseline regenerated', () => {
+    expect(undocumented()).toEqual([]);
+
+    writeFileSync(baselinePath, `${JSON.stringify(current, null, 2)}\n`);
+  });
+} else {
+  test('no name is published without being in the baseline', () => {
+    expect(added).toEqual([]);
+  });
+
+  test('every name in the baseline still ships', () => {
+    expect(removed).toEqual([]);
+  });
+}
diff --git a/packages/devextreme-scss/tests/roles.baseline.json b/packages/devextreme-scss/tests/roles.baseline.json
new file mode 100644
index 000000000000..ec32e7d0bff0
--- /dev/null
+++ b/packages/devextreme-scss/tests/roles.baseline.json
@@ -0,0 +1,2735 @@
+{
+  "comment": [
+    "Every role the package disagrees with, and what was decided about it.",
+    "",
+    "Exact equality, not a ratchet down: a new disagreement and a resolved one both fail, because both",
+    "are a decision somebody has to record. Re-bank deliberately with UPDATE_ROLES_BASELINE=1 pnpm test,",
+    "and fill in the decision - a banked entry without one fails too.",
+    "",
+    "verdict   cross-family   - the package uses this role, but only for a slot of another kind",
+    "          family-conflict - the package paints this slot from another family entirely",
+    "decision  confirmed   - the package assigns this very role here; only our slot word differs",
+    "          naming      - the role is right for what the property paints; the slot word is not",
+    "          rule-5      - one value in two roles, named after the dominant one (DIVERGENCES)",
+    "          bridge      - built with rgb(from role / a); the foundation names no role for it",
+    "          package-gap - no role of the right family exists; a request, not a swap",
+    "          design      - a correction would move a pixel, so it is not ours to make",
+    "",
+    "typographyUnmarked - typography step reads that carry no marker at all. The px gate only looks at",
+    "literals, so a step read slipped past it; these are banked until each one is routed to a role or",
+    "marked with a reason.",
+    "",
+    "slotLies - the slot word contradicts the CSS property the bundle shows it painting. Same rules as",
+    "above: banked with a decision, exact equality. hairline and rule-5 are deliberate and stay; naming",
+    "is a rename wave waiting for a changelog, not a role defect.",
+    "",
+    "ladders - a slot whose states resolve to one role. `focused` reusing `hovered` is accepted",
+    "convention and never listed. decision no-rung means the system has no role for the second state",
+    "either; design means it does and we skip it.",
+    "",
+    "contrast - foreground and background the bundle puts in ONE rule, resolved per mode. Alpha-bridge",
+    "values and disabled selectors are excluded: the first renders as a tint over an unknown surface,",
+    "the second is exempt from WCAG 1.4.3 and gated by disabled-paint.test.ts. decision graphic-ok means",
+    "the pair is a glyph and clears 3:1; design means it misses the threshold that applies to it.",
+    "",
+    "concepts - one anatomical concept (modifiers + slot + state, sub-elements dropped) painted with",
+    "several roles across components. This is the only check that asks the question the task is named",
+    "after; every other one reads a single declaration. decision spelling means the roles resolve to one",
+    "colour and differ only in family, shade means same family different value, design means the",
+    "components disagree about the colour itself."
+  ],
+  "open": [
+    {
+      "name": "check-box-invalid-mark-bg",
+      "verdict": "cross-family",
+      "roles": [
+        "color-content-danger-shared"
+      ],
+      "slot": "bg",
+      "decision": "confirmed",
+      "why": "reverted 08.09 after checking Fluent 2: the mark is a foreground element there (the box is colorCompoundBrandBackground, the check is colorNeutralForegroundInverted) and the package models it the same way as an icon. NAMING.md decides the SLOT WORD from the property, not the role family - reading it as both was mine. Value-neutral either way"
+    },
+    {
+      "name": "check-box-invalid-mark-bg-active",
+      "verdict": "cross-family",
+      "roles": [
+        "color-content-danger-shared-active"
+      ],
+      "slot": "bg",
+      "decision": "confirmed",
+      "why": "reverted 08.09 after checking Fluent 2: the mark is a foreground element there (the box is colorCompoundBrandBackground, the check is colorNeutralForegroundInverted) and the package models it the same way as an icon. NAMING.md decides the SLOT WORD from the property, not the role family - reading it as both was mine. Value-neutral either way"
+    },
+    {
+      "name": "check-box-invalid-mark-bg-focused",
+      "verdict": "cross-family",
+      "roles": [
+        "color-content-danger-shared-hovered"
+      ],
+      "slot": "bg",
+      "decision": "confirmed",
+      "why": "reverted 08.09 after checking Fluent 2: the mark is a foreground element there (the box is colorCompoundBrandBackground, the check is colorNeutralForegroundInverted) and the package models it the same way as an icon. NAMING.md decides the SLOT WORD from the property, not the role family - reading it as both was mine. Value-neutral either way"
+    },
+    {
+      "name": "check-box-invalid-mark-bg-hovered",
+      "verdict": "cross-family",
+      "roles": [
+        "color-content-danger-shared-hovered"
+      ],
+      "slot": "bg",
+      "decision": "confirmed",
+      "why": "reverted 08.09 after checking Fluent 2: the mark is a foreground element there (the box is colorCompoundBrandBackground, the check is colorNeutralForegroundInverted) and the package models it the same way as an icon. NAMING.md decides the SLOT WORD from the property, not the role family - reading it as both was mine. Value-neutral either way"
+    },
+    {
+      "name": "load-indicator-segment-inner-border",
+      "verdict": "family-conflict",
+      "roles": [
+        "color-bg-primary-subtle"
+      ],
+      "slot": "border",
+      "decision": "package-gap",
+      "why": "border-color: from color-bg-primary-subtle because color-border-primary-subtle does not exist. Nothing to swap to - a role request"
+    },
+    {
+      "name": "radio-button-bg-read-only",
+      "verdict": "cross-family",
+      "roles": [
+        "color-content-disabled"
+      ],
+      "slot": "bg",
+      "decision": "confirmed",
+      "why": "read-only paints the dot, which is the radio's mark - content-disabled, exactly as the package writes radio-button.color.checked.icon.read-only. The ring beside it reads border-read-only on border-disabled, which is checked.border.read-only. The -bg slot word again comes from the property. Banked by D21"
+    },
+    {
+      "name": "radio-button-checked-bg",
+      "verdict": "cross-family",
+      "roles": [
+        "color-content-primary-shared"
+      ],
+      "slot": "bg",
+      "decision": "confirmed",
+      "why": "the dot is the radio's MARK, the way the tick is the check box's, and the package models it as an icon: radio-button.color.checked.icon.* = content-primary-shared*, while radio-button.color.checked.bg.rest is color.none - the disc has no fill at all. NAMING decides the SLOT WORD from the property, so the name keeps -bg (it paints background-color) and only the role family follows what the element is. Same judgment call, and the same wording, as check-box-invalid-mark-bg. Value-neutral: primary-shared is one value across bg, border and content. Banked by D21"
+    },
+    {
+      "name": "radio-button-checked-bg-active",
+      "verdict": "cross-family",
+      "roles": [
+        "color-content-primary-shared-active"
+      ],
+      "slot": "bg",
+      "decision": "confirmed",
+      "why": "the dot is the radio's MARK, the way the tick is the check box's, and the package models it as an icon: radio-button.color.checked.icon.* = content-primary-shared*, while radio-button.color.checked.bg.rest is color.none - the disc has no fill at all. NAMING decides the SLOT WORD from the property, so the name keeps -bg (it paints background-color) and only the role family follows what the element is. Same judgment call, and the same wording, as check-box-invalid-mark-bg. Value-neutral: primary-shared is one value across bg, border and content. Banked by D21"
+    },
+    {
+      "name": "radio-button-checked-bg-focused",
+      "verdict": "cross-family",
+      "roles": [
+        "color-content-primary-shared-hovered"
+      ],
+      "slot": "bg",
+      "decision": "confirmed",
+      "why": "the dot is the radio's MARK, the way the tick is the check box's, and the package models it as an icon: radio-button.color.checked.icon.* = content-primary-shared*, while radio-button.color.checked.bg.rest is color.none - the disc has no fill at all. NAMING decides the SLOT WORD from the property, so the name keeps -bg (it paints background-color) and only the role family follows what the element is. Same judgment call, and the same wording, as check-box-invalid-mark-bg. Value-neutral: primary-shared is one value across bg, border and content. Banked by D21"
+    },
+    {
+      "name": "radio-button-checked-bg-hovered",
+      "verdict": "cross-family",
+      "roles": [
+        "color-content-primary-shared-hovered"
+      ],
+      "slot": "bg",
+      "decision": "confirmed",
+      "why": "the dot is the radio's MARK, the way the tick is the check box's, and the package models it as an icon: radio-button.color.checked.icon.* = content-primary-shared*, while radio-button.color.checked.bg.rest is color.none - the disc has no fill at all. NAMING decides the SLOT WORD from the property, so the name keeps -bg (it paints background-color) and only the role family follows what the element is. Same judgment call, and the same wording, as check-box-invalid-mark-bg. Value-neutral: primary-shared is one value across bg, border and content. Banked by D21"
+    },
+    {
+      "name": "radio-button-invalid-bg",
+      "verdict": "cross-family",
+      "roles": [
+        "color-content-danger-shared"
+      ],
+      "slot": "bg",
+      "decision": "rule-5",
+      "why": "the ring's border-color and the dot's background-color travel as one value - recorded in DIVERGENCES as a rule-5 pair, accepted by review round 2"
+    },
+    {
+      "name": "radio-button-invalid-bg-active",
+      "verdict": "cross-family",
+      "roles": [
+        "color-content-danger-shared-active"
+      ],
+      "slot": "bg",
+      "decision": "confirmed",
+      "why": "the invalid radio dot is its MARK, the way the tick is the check box's: the package models it as an icon (radio.root.color.checked.invalid.icon = content-danger-shared in blazor). The slot word in the name follows the property - the dot paints background-color - and the role family follows what the element IS. Same call as check-box-invalid-mark-bg and as the plain dot. Values coincide: *-danger-shared is one colour across bg, border and content"
+    },
+    {
+      "name": "radio-button-invalid-bg-focused",
+      "verdict": "cross-family",
+      "roles": [
+        "color-content-danger-shared-hovered"
+      ],
+      "slot": "bg",
+      "decision": "rule-5",
+      "why": "see radio-button-invalid-bg"
+    },
+    {
+      "name": "radio-button-invalid-bg-hovered",
+      "verdict": "cross-family",
+      "roles": [
+        "color-content-danger-shared-hovered"
+      ],
+      "slot": "bg",
+      "decision": "rule-5",
+      "why": "see radio-button-invalid-bg"
+    },
+    {
+      "name": "switch-handle-bg-disabled",
+      "verdict": "cross-family",
+      "roles": [
+        "color-content-disabled"
+      ],
+      "slot": "bg",
+      "decision": "confirmed",
+      "why": "see switch-handle-off-bg"
+    },
+    {
+      "name": "switch-handle-off-bg",
+      "verdict": "cross-family",
+      "roles": [
+        "color-content-subtle"
+      ],
+      "slot": "bg",
+      "decision": "confirmed",
+      "why": "the package paints the switch knob (its `trigger` slot) from exactly this role. Our role is right; only the slot word differs, because the property is background-color"
+    },
+    {
+      "name": "switch-handle-off-bg-active",
+      "verdict": "cross-family",
+      "roles": [
+        "color-content"
+      ],
+      "slot": "bg",
+      "decision": "confirmed",
+      "why": "the handle is the switch's TRIGGER - the package names it as its own slot and gives it content roles: switch.color.unchecked.trigger.rest = content-subtle, .hovered and .active = content. The name keeps the -bg slot word because it paints background-color (NAMING M3) and only the family follows what the element is, the same judgment call as the radio dot and check-box-invalid-mark-bg. Before 15.09 these two did not exist and the handle was painted from the TRACK BORDER colour, one variable across two elements - D21"
+    },
+    {
+      "name": "switch-handle-off-bg-hovered",
+      "verdict": "cross-family",
+      "roles": [
+        "color-content"
+      ],
+      "slot": "bg",
+      "decision": "confirmed",
+      "why": "the handle is the switch's TRIGGER - the package names it as its own slot and gives it content roles: switch.color.unchecked.trigger.rest = content-subtle, .hovered and .active = content. The name keeps the -bg slot word because it paints background-color (NAMING M3) and only the family follows what the element is, the same judgment call as the radio dot and check-box-invalid-mark-bg. Before 15.09 these two did not exist and the handle was painted from the TRACK BORDER colour, one variable across two elements - D21"
+    },
+    {
+      "name": "switch-handle-on-box-shadow",
+      "verdict": "cross-family",
+      "roles": [
+        "color-content-inverted"
+      ],
+      "slot": "shadow",
+      "decision": "bridge",
+      "why": "The composite half of `switch-handle-on-shadow`, which is banked a few rows up as a bridge: `0 0 0 <blur> <colour>` with the blur at 0, so the \"shadow\" is a ring drawn around the handle rather than a drop shadow, and its colour is the bridged content-inverted at 10%. Visible only since 17.09, when the pass started reading declarations outside the `_colors.scss` files - this one lives in `switch/_sizes.scss`, because it carries geometry as well as a colour."
+    },
+    {
+      "name": "switch-handle-on-shadow",
+      "verdict": "cross-family",
+      "roles": [
+        "color-content-inverted"
+      ],
+      "slot": "shadow",
+      "decision": "bridge",
+      "why": "rgb(from color-content-inverted / .1) - the foundation names no switch shadow role, recorded in DIVERGENCES and inventoried in BRIDGES.md"
+    }
+  ],
+  "typographyUnmarked": [
+    {
+      "variable": "card-view-card-header-font-size",
+      "reads": "font-size-140",
+      "roleExists": true
+    },
+    {
+      "variable": "card-view-card-header-font-size",
+      "reads": "font-size-160",
+      "roleExists": true
+    },
+    {
+      "variable": "grid-column-chooser-title-font-size",
+      "reads": "font-size-160",
+      "roleExists": true
+    },
+    {
+      "variable": "scheduler-appointment-month-font-size",
+      "reads": "font-size-120",
+      "roleExists": true
+    },
+    {
+      "variable": "scheduler-appointment-month-text-font-size",
+      "reads": "font-size-120",
+      "roleExists": true
+    },
+    {
+      "variable": "scheduler-month-date-text-font-size",
+      "reads": "font-size-160",
+      "roleExists": true
+    },
+    {
+      "variable": "scheduler-small-font-size",
+      "reads": "font-size-140",
+      "roleExists": true
+    },
+    {
+      "variable": "scheduler-workspace-info-font-size",
+      "reads": "font-size-160",
+      "roleExists": true
+    },
+    {
+      "variable": "typography-l-font-size",
+      "reads": "font-size-200",
+      "roleExists": true
+    },
+    {
+      "variable": "typography-l-font-size",
+      "reads": "font-size-280",
+      "roleExists": true
+    },
+    {
+      "variable": "typography-m-font-size",
+      "reads": "font-size-160",
+      "roleExists": true
+    },
+    {
+      "variable": "typography-m-font-size",
+      "reads": "font-size-200",
+      "roleExists": true
+    },
+    {
+      "variable": "typography-s-font-size",
+      "reads": "font-size-140",
+      "roleExists": true
+    },
+    {
+      "variable": "typography-s-font-size",
+      "reads": "font-size-180",
+      "roleExists": false
+    },
+    {
+      "variable": "typography-xl-font-size",
+      "reads": "font-size-240",
+      "roleExists": true
+    },
+    {
+      "variable": "typography-xs-font-size",
+      "reads": "font-size-120",
+      "roleExists": true
+    }
+  ],
+  "slotLies": [
+    {
+      "name": "color-view-border",
+      "slot": "border",
+      "slotSays": "border",
+      "paints": [
+        "box-shadow"
+      ],
+      "decision": "hairline",
+      "why": "A border role drawn with background-color or box-shadow because the line is a 1px pseudo-element, not a real border. Name and role both say border; only the CSS property differs, and the package agrees (a separator is border-subtle). Re-checked 09.09."
+    },
+    {
+      "name": "color-view-border-disabled",
+      "slot": "border",
+      "slotSays": "border",
+      "paints": [
+        "box-shadow"
+      ],
+      "decision": "hairline",
+      "why": "A border role drawn with background-color or box-shadow because the line is a 1px pseudo-element, not a real border. Name and role both say border; only the CSS property differs, and the package agrees (a separator is border-subtle). Re-checked 09.09."
+    },
+    {
+      "name": "diagram-selection-bg",
+      "slot": "bg",
+      "slotSays": "bg",
+      "paints": [
+        "fill"
+      ],
+      "decision": "known",
+      "why": "The name is right - fill on an SVG rect IS a background - and the role divergence is already recorded in DIVERGENCES.md. Re-checked 09.09."
+    },
+    {
+      "name": "gantt-content",
+      "slot": "content",
+      "slotSays": "content",
+      "paints": [
+        "background-color",
+        "border-color",
+        "border-left-color",
+        "border-top-color"
+      ],
+      "decision": "drawn-mark",
+      "why": "Re-classified 09.09, and this one turned out to be correct. Every use is a drawn foreground mark, not a container: the milestone diamond as a box background, the dependency lines as 1px hairlines, the arrowhead as a border triangle. content is the right role for a mark and the right word for the name; the four CSS properties are just how CSS draws marks. This was sitting under rule-5, which claimed the name picked the dominant of two painted families - it does not, and it does not need to."
+    },
+    {
+      "name": "grid-content-focused",
+      "slot": "content",
+      "slotSays": "content",
+      "paints": [
+        "outline-color"
+      ],
+      "decision": "drawn-mark",
+      "why": "the focused cell's inner ring is drawn with outline-color in content-inverted - a white hairline inside the blue frame. The slot word follows the property, the role follows what the element is. It became visible to the scan only when D23 gave the paint a tier name; no pixel moved"
+    },
+    {
+      "name": "splitter-bar-border",
+      "slot": "border",
+      "slotSays": "border",
+      "paints": [
+        "background-color"
+      ],
+      "decision": "hairline",
+      "why": "A border role drawn with background-color or box-shadow because the line is a 1px pseudo-element, not a real border. Name and role both say border; only the CSS property differs, and the package agrees (a separator is border-subtle). Re-checked 09.09."
+    },
+    {
+      "name": "splitter-bar-border-disabled",
+      "slot": "border",
+      "slotSays": "border",
+      "paints": [
+        "background-color"
+      ],
+      "decision": "hairline",
+      "why": "A border role drawn with background-color or box-shadow because the line is a 1px pseudo-element, not a real border. Name and role both say border; only the CSS property differs, and the package agrees (a separator is border-subtle). Re-checked 09.09."
+    }
+  ],
+  "familyMismatches": [
+    {
+      "name": "chat-typing-indicator-circle-bg",
+      "slot": "bg",
+      "roles": [
+        "color-content-disabled"
+      ],
+      "paints": [
+        "background-color"
+      ],
+      "decision": "package-confirms",
+      "why": "A typing dot is a drawn mark, not a surface: the package assigns this very role for this slot, so the family table is what misreads the element here (ai-chat)."
+    },
+    {
+      "name": "chat-typing-indicator-circle-center-bg",
+      "slot": "bg",
+      "roles": [
+        "color-content-subtle"
+      ],
+      "paints": [
+        "background-color"
+      ],
+      "decision": "package-confirms",
+      "why": "The same dot one shade up: the package assigns this very role for this slot, so the family table is what misreads the element here (ai-chat)."
+    },
+    {
+      "name": "check-box-icon-bg",
+      "slot": "bg",
+      "roles": [
+        "color-content-inverted"
+      ],
+      "paints": [
+        "background-color"
+      ],
+      "decision": "package-confirms",
+      "why": "The tick is the control's mark and the package models it as an icon (checkbox.color.*.icon). The repo rule puts the slot word on the painted property, which is background-color, so the two point opposite ways and the colour is the same either way. Recorded as a judgment call when D21 split the mark from the fill."
+    },
+    {
+      "name": "check-box-icon-bg-disabled",
+      "slot": "bg",
+      "roles": [
+        "color-content-disabled"
+      ],
+      "paints": [
+        "background-color",
+        "color"
+      ],
+      "decision": "package-confirms",
+      "why": "Same pair, disabled rung: checkbox.color.disabled.icon = content-disabled."
+    },
+    {
+      "name": "date-view-item-content-selected",
+      "slot": "content",
+      "roles": [
+        "color-bg-primary"
+      ],
+      "paints": [
+        "color"
+      ],
+      "decision": "design",
+      "why": "Text colour painted from color-bg-primary while color-content-primary exists. Blazor has no selected-item colour in its rollers to compare against, but every text slot it does declare there is content-family (roller-title-color = content-subtle, rollers-footer-color = content), and so is every other selected label in our own theme. Out of step with both, but moving it changes a pixel in the date roller and no package set models a roller at all."
+    },
+    {
+      "name": "diagram-connection-border",
+      "slot": "border",
+      "roles": [
+        "color-bg-success"
+      ],
+      "paints": [
+        "fill",
+        "stroke"
+      ],
+      "decision": "design",
+      "why": "SVG: the value reaches fill and stroke. Stroke is the border of a vector shape, so the slot word holds, but the role is from the bg family. No diagram exists in any package set, so nothing can say whether border-success was meant."
+    },
+    {
+      "name": "diagram-connector-border",
+      "slot": "border",
+      "roles": [
+        "color-bg-primary"
+      ],
+      "paints": [
+        "border-color",
+        "fill",
+        "stroke"
+      ],
+      "decision": "design",
+      "why": "Same shape, and this one reaches border-color as well as fill and stroke - one value on three properties, so it is a rule-5 case on top of the family question."
+    },
+    {
+      "name": "diagram-geometry-mark-border",
+      "slot": "border",
+      "roles": [
+        "color-bg-danger"
+      ],
+      "paints": [
+        "stroke"
+      ],
+      "decision": "design",
+      "why": "A stroke painted from color-bg-danger where color-border-danger exists."
+    },
+    {
+      "name": "diagram-image-icon-accent-border",
+      "slot": "border",
+      "roles": [
+        "color-content-primary"
+      ],
+      "paints": [
+        "stroke"
+      ],
+      "decision": "design",
+      "why": "A stroke painted from a content role. For a glyph that may well be right - a drawn mark keeps its content role - but nothing in the package models a diagram icon."
+    },
+    {
+      "name": "diagram-selection-mark-content",
+      "slot": "content",
+      "roles": [
+        "color-border-contrast"
+      ],
+      "paints": [
+        "fill",
+        "stroke"
+      ],
+      "decision": "design",
+      "why": "fill and stroke from color-border-contrast. The selection handle is a filled square with an edge, so one of the two properties is reading the wrong family whichever way it is named."
+    },
+    {
+      "name": "file-manager-editor-bg-active",
+      "slot": "bg",
+      "roles": [
+        "color-content"
+      ],
+      "paints": [
+        "background"
+      ],
+      "decision": "design",
+      "why": "rgb(from color-content r g b / 0.1) used as a pressed background, where color-bg-alpha-active is the role the foundation ships for exactly this. A bridge that predates the alpha family."
+    },
+    {
+      "name": "gallery-indicator-border-selected",
+      "slot": "border",
+      "roles": [
+        "color-bg"
+      ],
+      "paints": [
+        "border-color"
+      ],
+      "decision": "bridge",
+      "why": "rgb(from color-bg r g b / 0.8) - a translucent ring over a photograph. The foundation names no border role with alpha, so the value is bridged from the surface role it sits on."
+    },
+    {
+      "name": "gallery-indicator-item-bg-disabled",
+      "slot": "bg",
+      "roles": [
+        "color-content-disabled"
+      ],
+      "paints": [
+        "background-color"
+      ],
+      "decision": "drawn-mark",
+      "why": "An indicator pip is a drawn mark, so it keeps a content role even though background-color paints it. Blazor confirms the family for the same element - its carousel reads content for the pip at rest - and the selected-disabled sibling next to it already read content-disabled, which the package confirmed. Until 17.09 this one read border-disabled and was the odd one out of its own pair."
+    },
+    {
+      "name": "gallery-indicator-item-bg-selected-disabled",
+      "slot": "bg",
+      "roles": [
+        "color-content-disabled"
+      ],
+      "paints": [
+        "background-color"
+      ],
+      "decision": "package-confirms",
+      "why": "An indicator pip is a drawn mark; the package reads content-disabled for it."
+    },
+    {
+      "name": "html-editor-uploader-cover-bg",
+      "slot": "bg",
+      "roles": [
+        "color-border"
+      ],
+      "paints": [
+        "background-color"
+      ],
+      "decision": "design",
+      "why": "A cover background painted from color-border."
+    },
+    {
+      "name": "list-base-select-all-separator-bg",
+      "slot": "bg",
+      "roles": [
+        "color-border-subtle"
+      ],
+      "paints": [
+        "background-color"
+      ],
+      "decision": "package-confirms",
+      "why": "A separator drawn with background-color keeps its border role - the hairline idiom, and the package's own separator component confirms it."
+    },
+    {
+      "name": "load-indicator-segment-border",
+      "slot": "border",
+      "roles": [
+        "color-content-primary"
+      ],
+      "paints": [
+        "border-color"
+      ],
+      "decision": "package-confirms",
+      "why": "The spinner arc is drawn as a border but it IS the indicator, not an edge: spinner.color.indicator = content-primary."
+    },
+    {
+      "name": "load-indicator-segment-border-disabled",
+      "slot": "border",
+      "roles": [
+        "color-content-disabled"
+      ],
+      "paints": [
+        "border-color"
+      ],
+      "decision": "package-confirms",
+      "why": "Same arc, disabled rung."
+    },
+    {
+      "name": "menu-separator-bg",
+      "slot": "bg",
+      "roles": [
+        "color-border-subtle"
+      ],
+      "paints": [
+        "background-color"
+      ],
+      "decision": "package-confirms",
+      "why": "Hairline idiom, confirmed by the package's separator component."
+    },
+    {
+      "name": "menu-separator-bg-disabled",
+      "slot": "bg",
+      "roles": [
+        "color-border-disabled"
+      ],
+      "paints": [
+        "background-color"
+      ],
+      "decision": "hairline",
+      "why": "A separator line drawn with background-color keeps its border role; the rest rung of the same name is confirmed by the package."
+    },
+    {
+      "name": "pivot-grid-position-indicator-bg",
+      "slot": "bg",
+      "roles": [
+        "color-border-contrast"
+      ],
+      "paints": [
+        "background-color"
+      ],
+      "decision": "hairline",
+      "why": "The drop-position indicator is a line drawn with background-color."
+    },
+    {
+      "name": "progress-bar-bg",
+      "slot": "bg",
+      "roles": [
+        "color-border"
+      ],
+      "paints": [
+        "background-color"
+      ],
+      "decision": "package-confirms",
+      "why": "The track is a line: progress-bar.progress-line.color.track.rest = color.border. Ours reads the same family."
+    },
+    {
+      "name": "progress-bar-container-bg-disabled",
+      "slot": "bg",
+      "roles": [
+        "color-border-disabled"
+      ],
+      "paints": [
+        "background-color"
+      ],
+      "decision": "package-confirms",
+      "why": "progress-bar.progress-line.color.track.disabled = color.border-disabled."
+    },
+    {
+      "name": "progress-bar-indeterminate-bg",
+      "slot": "bg",
+      "roles": [
+        "color-content-primary"
+      ],
+      "paints": [
+        "background-image"
+      ],
+      "decision": "drawn-mark",
+      "why": "The indeterminate stripe is a gradient built from the range colour, and the range IS the indicator - the package puts progress-line.color.indicator on color-content-primary, so the gradient inherits a content role on a bg slot. The same drawn-indicator idiom as the progress track and the slider mark. Visible only since 17.09: the value names no role of its own, it reads the sibling that does."
+    },
+    {
+      "name": "progress-bar-indeterminate-bg-disabled",
+      "slot": "bg",
+      "roles": [
+        "color-content-disabled"
+      ],
+      "paints": [
+        "background-image"
+      ],
+      "decision": "drawn-mark",
+      "why": "The disabled rung of the same gradient."
+    },
+    {
+      "name": "progress-bar-range-bg",
+      "slot": "bg",
+      "roles": [
+        "color-content-primary"
+      ],
+      "paints": [
+        "background-color"
+      ],
+      "decision": "package-confirms",
+      "why": "The filled range is the indicator, not a surface: progress-bar.progress-line.color.indicator.rest = color.content-primary."
+    },
+    {
+      "name": "progress-bar-range-bg-disabled",
+      "slot": "bg",
+      "roles": [
+        "color-content-disabled"
+      ],
+      "paints": [
+        "background-color"
+      ],
+      "decision": "package-confirms",
+      "why": "progress-bar.progress-line.color.indicator.disabled = color.content-disabled."
+    },
+    {
+      "name": "progress-bar-range-indeterminate-bg",
+      "slot": "bg",
+      "roles": [
+        "color-content-primary"
+      ],
+      "paints": [],
+      "decision": "package-confirms",
+      "why": "indeterminate-gradient-center = color.content-primary, the same role the determinate indicator reads."
+    },
+    {
+      "name": "scheduler-time-indicator-bg",
+      "slot": "bg",
+      "roles": [
+        "color-content"
+      ],
+      "paints": [
+        "background-color"
+      ],
+      "decision": "design",
+      "why": "The name says the indicator background; it paints .dx-scheduler-date-time-shader, the veil over past time - a different element, so the element word is wrong before the slot word is. rgb(from color-content r g b / 0.03) where the foundation ships a scrim family. Blazor cannot adjudicate: it has no shader at all, the feature is ours. Renaming changes a published tier name."
+    },
+    {
+      "name": "scheduler-time-indicator-content",
+      "slot": "content",
+      "roles": [
+        "color-bg-danger"
+      ],
+      "paints": [
+        "background-color",
+        "color"
+      ],
+      "decision": "design",
+      "why": "The name says content; it paints background-color on .dx-scheduler-date-time-indicator, the current-time LINE. Blazor paints the same element the same way - .dxbl-sc-time-indicator-line takes background-color from --dxbl-scheduler-primary-color = color-bg-primary - so a line drawn with background-color reading a bg role is the shared idiom and the family is NOT the defect here. What is left is the slot word: -content on something that has never painted text. The hue differs from Blazor (danger against its accent) and that is a product decision, not a role one: the red current-time marker predates the design system. Renaming changes a published tier name."
+    },
+    {
+      "name": "scrollable-scroll-bg",
+      "slot": "bg",
+      "roles": [
+        "color-content-subtle"
+      ],
+      "paints": [
+        "background-color"
+      ],
+      "decision": "package-confirms",
+      "why": "scroll-bar.color.thumb.rest = color.content-subtle, exactly."
+    },
+    {
+      "name": "scrollable-scroll-bg-disabled",
+      "slot": "bg",
+      "roles": [
+        "color-content-disabled"
+      ],
+      "paints": [
+        "background-color"
+      ],
+      "decision": "package-confirms",
+      "why": "The same thumb, disabled rung."
+    },
+    {
+      "name": "slider-accent-bg-focused",
+      "slot": "bg",
+      "roles": [
+        "color-content-primary-shared-active"
+      ],
+      "paints": [
+        "background"
+      ],
+      "decision": "drawn-mark",
+      "why": "The mark inside the handle is the control's indicator, painted with background-color; the radio dot was split the same way in D21."
+    },
+    {
+      "name": "slider-bar-bg",
+      "slot": "bg",
+      "roles": [
+        "color-border-contrast"
+      ],
+      "paints": [
+        "background"
+      ],
+      "decision": "hairline",
+      "why": "The track is a line drawn with background-color, and the package reads color.border for the progress bar's track - the same element one widget over."
+    },
+    {
+      "name": "slider-bg-disabled",
+      "slot": "bg",
+      "roles": [
+        "color-content-disabled"
+      ],
+      "paints": [
+        "background"
+      ],
+      "decision": "package-confirms",
+      "why": "The handle mark and the filled range are the indicator; the progress bar reads content-disabled for the same thing. bg-disabled would merge them with the track."
+    },
+    {
+      "name": "slider-handle-invalid-bg",
+      "slot": "bg",
+      "roles": [
+        "color-border-danger"
+      ],
+      "paints": [
+        "background-color"
+      ],
+      "decision": "design",
+      "why": "The handle ring in the danger hue reads color-border-danger through a name whose slot says bg. D21 split the ring from the mark for the normal family and gave each its own name; the invalid family was not split with it."
+    },
+    {
+      "name": "slider-invalid-bg",
+      "slot": "bg",
+      "roles": [
+        "color-border-danger"
+      ],
+      "paints": [
+        "background-color",
+        "border-color"
+      ],
+      "decision": "design",
+      "why": "Reaches background-color AND border-color - the unsplit invalid pair, same as above."
+    },
+    {
+      "name": "slider-invalid-bg-focused",
+      "slot": "bg",
+      "roles": [
+        "color-content-danger"
+      ],
+      "paints": [
+        "background-color"
+      ],
+      "decision": "package-confirms",
+      "why": "The same indicator in the danger hue; kin of what the progress bar reads."
+    },
+    {
+      "name": "slider-invalid-bg-hovered",
+      "slot": "bg",
+      "roles": [
+        "color-border-danger"
+      ],
+      "paints": [
+        "background-color"
+      ],
+      "decision": "design",
+      "why": "The hovered rung of the same unsplit pair."
+    },
+    {
+      "name": "splitter-resize-handle-bg",
+      "slot": "bg",
+      "roles": [
+        "color-border"
+      ],
+      "paints": [
+        "background-color"
+      ],
+      "decision": "hairline",
+      "why": "The resize bar is a line drawn with background-color, so it keeps its border role - the same idiom as the menu separator and the progress bar track, which the package confirms (progress-line.color.track = color.border). D7 had moved it onto bg-canvas to follow the package gutter model; that made the bar 1.04 against the page and design reversed it."
+    },
+    {
+      "name": "splitter-resize-handle-bg-hovered",
+      "slot": "bg",
+      "roles": [
+        "color-border"
+      ],
+      "paints": [
+        "background-color"
+      ],
+      "decision": "hairline",
+      "why": "The hovered rung of the same line, and after D32 it reads the same role as the rest rung: the bar does not change on hover."
+    },
+    {
+      "name": "stepper-connector-bg",
+      "slot": "bg",
+      "roles": [
+        "color-border-subtle"
+      ],
+      "paints": [
+        "background-color"
+      ],
+      "decision": "hairline",
+      "why": "The connector between steps is a line drawn with background-color."
+    },
+    {
+      "name": "stepper-connector-value-bg-disabled",
+      "slot": "bg",
+      "roles": [
+        "color-content-disabled"
+      ],
+      "paints": [
+        "background-color"
+      ],
+      "decision": "design",
+      "why": "The filled part of a connector painted from content-disabled. Consistent with the progress bar's indicator, but the stepper is in no package set, so it is a decision rather than a confirmation."
+    },
+    {
+      "name": "stepper-step-bg-selected-disabled",
+      "slot": "bg",
+      "roles": [
+        "color-content-disabled"
+      ],
+      "paints": [
+        "background-color",
+        "border-color",
+        "box-shadow"
+      ],
+      "decision": "design",
+      "why": "One value reaching background-color, border-color and box-shadow at once - three families from one content role."
+    },
+    {
+      "name": "stepper-step-invalid-bg-selected",
+      "slot": "bg",
+      "roles": [
+        "color-content-danger"
+      ],
+      "paints": [
+        "background-color",
+        "border-color",
+        "box-shadow"
+      ],
+      "decision": "design",
+      "why": "The same three-property value in the danger hue."
+    },
+    {
+      "name": "stepper-step-shadow",
+      "slot": "shadow",
+      "roles": [
+        "color-bg"
+      ],
+      "paints": [
+        "box-shadow"
+      ],
+      "decision": "naming",
+      "why": "Not a shadow. The rule is box-shadow: 0 0 0 2px <this>, 0 0 0 4px <selected>, 0 0 0 8px <this> - zero offset, zero blur, so these are solid RINGS, and this one is the page-coloured gap that separates the step from the outer ring. color-bg is the right role for a gap the colour of the page; the slot word -shadow is what misdescribes it. A rename, not a repaint, and it changes a published tier name."
+    },
+    {
+      "name": "switch-handle-on-bg",
+      "slot": "bg",
+      "roles": [
+        "color-content-inverted"
+      ],
+      "paints": [
+        "background-color"
+      ],
+      "decision": "package-confirms",
+      "why": "The thumb is a content role by the package's own anatomy: switch.color.checked.trigger.rest = content-inverted (D21)."
+    },
+    {
+      "name": "text-editor-line",
+      "slot": "border",
+      "roles": [
+        "color-content-subtle"
+      ],
+      "paints": [
+        "border-bottom-color"
+      ],
+      "decision": "package-confirms",
+      "why": "The underline is drawn with border-bottom-color but it is the editor's mark, and the package reads a content role for it."
+    },
+    {
+      "name": "text-editor-line-focused",
+      "slot": "border",
+      "roles": [
+        "color-content"
+      ],
+      "paints": [
+        "border-bottom-color"
+      ],
+      "decision": "package-confirms",
+      "why": "Same underline, focused rung."
+    },
+    {
+      "name": "text-editor-line-hovered",
+      "slot": "border",
+      "roles": [
+        "color-content"
+      ],
+      "paints": [
+        "border-bottom-color"
+      ],
+      "decision": "package-confirms",
+      "why": "Same underline, hovered rung."
+    }
+  ],
+  "ladders": [
+    {
+      "stem": "button-danger-contained-content",
+      "states": [
+        "rest",
+        "selected"
+      ],
+      "role": [
+        "color-content-static-dark"
+      ],
+      "decision": "no-rung",
+      "why": "the design system ships no role for the second state either, so the collapse mirrors it rather than skipping a rung"
+    },
+    {
+      "stem": "button-danger-outlined-content",
+      "states": [
+        "active",
+        "selected"
+      ],
+      "role": [
+        "color-content-on-subtle-danger"
+      ],
+      "decision": "no-rung",
+      "why": "After D17 was answered on 17.09 the pressed and selected label read one role, content-on-subtle-<hue>: both are states where the tinted fill inverts for dark, and the neutral label is what clears AA on either side of that inversion. The design system ships no second rung of this role, so the two states cannot differ here."
+    },
+    {
+      "stem": "button-default-contained-content",
+      "states": [
+        "rest",
+        "selected"
+      ],
+      "role": [
+        "color-content-static-dark"
+      ],
+      "decision": "no-rung",
+      "why": "the design system ships no role for the second state either, so the collapse mirrors it rather than skipping a rung"
+    },
+    {
+      "stem": "button-default-outlined-content",
+      "states": [
+        "active",
+        "selected"
+      ],
+      "role": [
+        "color-content-on-subtle-primary"
+      ],
+      "decision": "no-rung",
+      "why": "After D17 was answered on 17.09 the pressed and selected label read one role, content-on-subtle-<hue>: both are states where the tinted fill inverts for dark, and the neutral label is what clears AA on either side of that inversion. The design system ships no second rung of this role, so the two states cannot differ here."
+    },
+    {
+      "stem": "button-default-text-content",
+      "states": [
+        "hovered",
+        "selected"
+      ],
+      "role": [
+        "color-content-primary-hovered"
+      ],
+      "decision": "no-rung",
+      "why": "the design system ships no role for the second state either, so the collapse mirrors it rather than skipping a rung"
+    },
+    {
+      "stem": "button-normal-contained-content",
+      "states": [
+        "rest",
+        "selected"
+      ],
+      "role": [
+        "color-content"
+      ],
+      "decision": "no-rung",
+      "why": "the design system ships no role for the second state either, so the collapse mirrors it rather than skipping a rung"
+    },
+    {
+      "stem": "button-success-contained-content",
+      "states": [
+        "rest",
+        "selected"
+      ],
+      "role": [
+        "color-content-static-dark"
+      ],
+      "decision": "no-rung",
+      "why": "the design system ships no role for the second state either, so the collapse mirrors it rather than skipping a rung"
+    },
+    {
+      "stem": "button-success-outlined-content",
+      "states": [
+        "active",
+        "selected"
+      ],
+      "role": [
+        "color-content-on-subtle-success"
+      ],
+      "decision": "no-rung",
+      "why": "After D17 was answered on 17.09 the pressed and selected label read one role, content-on-subtle-<hue>: both are states where the tinted fill inverts for dark, and the neutral label is what clears AA on either side of that inversion. The design system ships no second rung of this role, so the two states cannot differ here."
+    },
+    {
+      "stem": "calendar-invalid-border",
+      "states": [
+        "focused",
+        "rest"
+      ],
+      "role": [
+        "color-border-danger"
+      ],
+      "decision": "no-rung",
+      "why": "the design system ships no role for the second state either, so the collapse mirrors it rather than skipping a rung"
+    },
+    {
+      "stem": "chat-message-list-context-menu-delete-button-content",
+      "states": [
+        "focused",
+        "rest"
+      ],
+      "role": [
+        "color-content-danger"
+      ],
+      "decision": "no-rung",
+      "why": "the design system ships no role for the second state either, so the collapse mirrors it rather than skipping a rung"
+    },
+    {
+      "stem": "check-box-border",
+      "states": [
+        "disabled",
+        "read-only"
+      ],
+      "role": [
+        "color-border-disabled"
+      ],
+      "decision": "no-rung",
+      "why": "the design system ships no role for the second state either, so the collapse mirrors it rather than skipping a rung"
+    },
+    {
+      "stem": "file-manager-file-item-select-bg",
+      "states": [
+        "focused",
+        "rest"
+      ],
+      "role": [
+        "color-bg-primary"
+      ],
+      "decision": "no-rung",
+      "why": "the design system ships no role for the second state either, so the collapse mirrors it rather than skipping a rung"
+    },
+    {
+      "stem": "file-manager-file-item-select-content",
+      "states": [
+        "focused",
+        "rest"
+      ],
+      "role": [
+        "color-content-inverted"
+      ],
+      "decision": "no-rung",
+      "why": "the design system ships no role for the second state either, so the collapse mirrors it rather than skipping a rung"
+    },
+    {
+      "stem": "gallery-indicator-item-bg",
+      "states": [
+        "disabled",
+        "selected-disabled"
+      ],
+      "role": [
+        "color-content-disabled"
+      ],
+      "decision": "answered",
+      "why": "The disabled pip and the selected-disabled pip now read the same role, which is the point: they are the same mark in the same state, and one of them used to read the border family by mistake."
+    },
+    {
+      "stem": "list-item-bg",
+      "states": [
+        "active",
+        "selected-focused"
+      ],
+      "role": [
+        "color-bg-active"
+      ],
+      "decision": "no-rung",
+      "why": "the design system ships no role for the second state either, so the collapse mirrors it rather than skipping a rung"
+    },
+    {
+      "stem": "popup-content-box-shadow",
+      "states": [
+        "focused",
+        "rest"
+      ],
+      "role": [
+        "box-shadow-2xl"
+      ],
+      "decision": "design",
+      "why": "Both states were hand-built from spacing steps and differed only in the ambient layer - 12px of blur against 8px, with the key layer identical. Tokenising put each on the step its geometry already matched, 2xl, and the difference vanished: the focused popup now carries no elevation of its own and the focus outline is what marks the state. Left open on purpose rather than deleting the -focused name: the designers see both on the screenshots of this wave, and either they want a distinct step for focus or the name goes."
+    },
+    {
+      "stem": "radio-button-border",
+      "states": [
+        "disabled",
+        "read-only"
+      ],
+      "role": [
+        "color-border-disabled"
+      ],
+      "decision": "answered",
+      "why": "read-only and disabled resolve to one role, border-disabled, and that is what the package assigns: radio-button.color.checked.border.read-only and .disabled are both {color.border-disabled}. The stem replaced radio-button-content, which held the same pair before D21 split ring from mark - same collapse, now on the family that actually paints the ring"
+    },
+    {
+      "stem": "slider-invalid-bg",
+      "states": [
+        "hovered",
+        "rest"
+      ],
+      "role": [
+        "color-border-danger"
+      ],
+      "decision": "no-rung",
+      "why": "the design system ships no role for the second state either, so the collapse mirrors it rather than skipping a rung"
+    },
+    {
+      "stem": "splitter-resize-handle-bg",
+      "states": [
+        "hovered",
+        "rest"
+      ],
+      "role": [
+        "color-border"
+      ],
+      "decision": "answered",
+      "why": "The bar no longer changes on hover, by design decision 16.09 (D32). color-border-hovered inverts to a light grey in dark (#ababab), and the grip glyph on it read 2.30 even after the glyph moved to color-content - worse than the same splitter at rest. Keeping the rest role on the hovered rung puts both states at 11.15 light / 4.54 dark. The hover affordance is the cursor, which the resize handle changes anyway; in light the two roles differed by 1.62 against 1.82 on the page, so nothing visible is lost there either."
+    },
+    {
+      "stem": "switch-handle-off-bg",
+      "states": [
+        "active",
+        "hovered"
+      ],
+      "role": [
+        "color-content"
+      ],
+      "decision": "answered",
+      "why": "hovered and active resolve to one role because the package assigns one: switch.color.unchecked.trigger.hovered and .active are both {color.content}. The stem is new - before D21 the handle had no state names of its own at all, it followed the track border"
+    },
+    {
+      "stem": "tabs-tab-content",
+      "states": [
+        "rest",
+        "selected"
+      ],
+      "role": [
+        "color-content"
+      ],
+      "decision": "no-rung",
+      "why": "the design system ships no role for the second state either, so the collapse mirrors it rather than skipping a rung"
+    },
+    {
+      "stem": "tag-box-tag-content",
+      "states": [
+        "active",
+        "rest"
+      ],
+      "role": [
+        "color-content"
+      ],
+      "decision": "no-rung",
+      "why": "the design system ships no role for the second state either, so the collapse mirrors it rather than skipping a rung"
+    },
+    {
+      "stem": "text-editor-border",
+      "states": [
+        "disabled",
+        "read-only"
+      ],
+      "role": [
+        "color-border-disabled"
+      ],
+      "decision": "no-rung",
+      "why": "the design system ships no role for the second state either, so the collapse mirrors it rather than skipping a rung"
+    },
+    {
+      "stem": "tree-view-content",
+      "states": [
+        "focused",
+        "rest"
+      ],
+      "role": [
+        "color-content"
+      ],
+      "decision": "no-rung",
+      "why": "the design system ships no role for the second state either, so the collapse mirrors it rather than skipping a rung"
+    }
+  ],
+  "contrast": [
+    {
+      "selector": ".dx-datagrid-group-panel .dx-block-separator",
+      "fgRole": "color-content",
+      "bgRole": "color-bg-primary",
+      "contrast": {
+        "light": 3.36,
+        "dark": 5.38
+      },
+      "decision": "graphic-ok",
+      "why": "the drop separator of the group panel: a 2px bar in bg-primary, a graphic with a 3:1 floor, and 3.36 clears it. The panel's caption sits beside the bar, not on it. Surfaced by D23, not moved by it"
+    },
+    {
+      "selector": ".dx-messagelist-context-menu-content .dx-menu-item:has(.dx-icon-trash).dx-state-focused",
+      "fgRole": "color-content-danger",
+      "bgRole": "color-bg-hovered",
+      "contrast": {
+        "light": 5.56,
+        "dark": 3.05
+      },
+      "decision": "package-gap",
+      "why": "Widened 09.09 after asking whether danger passes anywhere else. It does not, and the reason is that the role is tuned to one surface. In dark content-danger is danger-80 #e4554f, and it measures 4.58 on the page canvas (bg-canvas #1d1d1d), 4.22 on an ordinary surface (bg #242424) and 3.05 on a hovered one (bg-hovered #3b3b3b). So it clears AA on the canvas by 0.08 and fails everywhere below it. Eleven theme variables put real text on this role - the outlined danger button label, the chat alert list, the chat delete item, the fieldset invalid value, the grid AI error, the informer error, two stepper invalid labels, the text editor invalid message, the validation message and the validation summary - and every one of them sits at 4.22 wherever its widget has its own background. Three more read the role for a glyph (diagram, filterBuilder, cardView), where 4.22 clears the 3:1 that applies. The request splits in two: on an ordinary surface the miss is 0.28 and one ramp step fixes it - danger-70 #ee726a gives 5.36 - so ask the package to move content-danger in dark; on a hovered surface nothing in the family clears AA, danger-70 reaching only 3.87, so that half is a genuine gap. Light is fine throughout (6.07 on the canvas, 5.56 hovered). Why the audit saw one row and not twelve: the rule-local pass needs both colours in one rule, and a validation message takes its background from an ancestor. Third instance of that blind spot in one day."
+    }
+  ],
+  "concepts": [
+    {
+      "concept": "accent border rest",
+      "roles": [
+        "color-content-primary",
+        "color-border-primary",
+        "color-border"
+      ],
+      "families": [
+        "content",
+        "border"
+      ],
+      "members": [
+        {
+          "folder": "diagram",
+          "role": "color-content-primary"
+        },
+        {
+          "folder": "gantt",
+          "role": "color-border-primary"
+        },
+        {
+          "folder": "scheduler",
+          "role": "color-border"
+        }
+      ],
+      "decision": "false-group",
+      "why": "Answered 15.09 by validation, and the answer went against the guess. The three members are three unrelated things sharing the word accent: diagram paints stroke on .dxdi-spinner path - a SPINNER ARC; gantt paints border-color on a real border; scheduler paints the week-boundary grid line, which D19 already accepted as deliberately equal to the ordinary line.\nThe diagram member keeps content-primary, and that is not a preference: our own loadIndicator spinner sits on the identical role, and Blazor confirms it (loading-panel-indicator-no-area-indicator-color = content-primary). Moving it to border-primary, as the group name suggests, would drop the arc from 5.38 to 2.68 in light - under the 3:1 a graphic needs - because border-primary is the pale primary-70 outlier of its family. Same verdict as gantt-content: a drawn mark, painted by whatever property draws it, with a content role that is right."
+    },
+    {
+      "concept": "base bg rest",
+      "roles": [
+        "color-border-subtle",
+        "color-bg-primary-subtle",
+        "color-bg"
+      ],
+      "families": [
+        "border",
+        "bg"
+      ],
+      "members": [
+        {
+          "folder": "list",
+          "role": "color-border-subtle"
+        },
+        {
+          "folder": "scheduler",
+          "role": "color-bg-primary-subtle"
+        },
+        {
+          "folder": "stepper",
+          "role": "color-bg"
+        }
+      ],
+      "decision": "false-group",
+      "why": "Answered 15.09 by validation, confirmed as the reading proposed. Three members, three correct roles: list-base-select-all-separator-bg paints background-color with border-subtle, which is the hairline idiom and exactly what the package calls separator.color; scheduler-appointment-base-bg is the appointment fill on bg-primary-subtle, the role Blazor gives the same element; stepper-step-base-bg is a plain surface on bg. The word base means a different thing in each, which is what made them one group. Nothing to change."
+    },
+    {
+      "concept": "base content rest",
+      "roles": [
+        "color-content-subtle",
+        "color-content"
+      ],
+      "families": [
+        "content"
+      ],
+      "members": [
+        {
+          "folder": "diagram",
+          "role": "color-content-subtle"
+        },
+        {
+          "folder": "stepper",
+          "role": "color-content"
+        }
+      ],
+      "decision": "shade",
+      "why": "Answered 15.09 by validation, confirmed. After the scheduler member was renamed to -base-bg and left for the bg group, two remain: diagram-image-icon-base-content on content-subtle and stepper-step-base-content on content. Both are content roles on content slots painting color:, and they differ by shade - which is a divergence components are entitled to. The naming point this group carried belonged to the scheduler member and is fixed."
+    },
+    {
+      "concept": "checked bg active",
+      "roles": [
+        "color-bg-primary-shared-active",
+        "color-content-primary-shared-active"
+      ],
+      "families": [
+        "bg",
+        "content"
+      ],
+      "members": [
+        {
+          "folder": "checkBox",
+          "role": "color-bg-primary-shared-active"
+        },
+        {
+          "folder": "radioButton",
+          "role": "color-content-primary-shared-active"
+        }
+      ],
+      "decision": "false-group",
+      "why": "grouped by the slot word, not by the element: the check box's -checked-bg IS a fill (checkbox.color.checked.default.bg.* = bg-primary*) and the radio's -checked-bg is the DOT, which the package models as an icon (radio-button.color.checked.icon.* = content-primary-shared*, with checked.bg.rest = color.none). Two families here is the anatomy being right, not a disagreement - and the values coincide anyway, primary-shared being one colour across families. Opened by D21"
+    },
+    {
+      "concept": "checked bg focused",
+      "roles": [
+        "color-bg-primary-shared-hovered",
+        "color-content-primary-shared-hovered"
+      ],
+      "families": [
+        "bg",
+        "content"
+      ],
+      "members": [
+        {
+          "folder": "checkBox",
+          "role": "color-bg-primary-shared-hovered"
+        },
+        {
+          "folder": "radioButton",
+          "role": "color-content-primary-shared-hovered"
+        }
+      ],
+      "decision": "false-group",
+      "why": "grouped by the slot word, not by the element: the check box's -checked-bg IS a fill (checkbox.color.checked.default.bg.* = bg-primary*) and the radio's -checked-bg is the DOT, which the package models as an icon (radio-button.color.checked.icon.* = content-primary-shared*, with checked.bg.rest = color.none). Two families here is the anatomy being right, not a disagreement - and the values coincide anyway, primary-shared being one colour across families. Opened by D21"
+    },
+    {
+      "concept": "checked bg hovered",
+      "roles": [
+        "color-bg-primary-shared-hovered",
+        "color-content-primary-shared-hovered"
+      ],
+      "families": [
+        "bg",
+        "content"
+      ],
+      "members": [
+        {
+          "folder": "checkBox",
+          "role": "color-bg-primary-shared-hovered"
+        },
+        {
+          "folder": "radioButton",
+          "role": "color-content-primary-shared-hovered"
+        }
+      ],
+      "decision": "false-group",
+      "why": "grouped by the slot word, not by the element: the check box's -checked-bg IS a fill (checkbox.color.checked.default.bg.* = bg-primary*) and the radio's -checked-bg is the DOT, which the package models as an icon (radio-button.color.checked.icon.* = content-primary-shared*, with checked.bg.rest = color.none). Two families here is the anatomy being right, not a disagreement - and the values coincide anyway, primary-shared being one colour across families. Opened by D21"
+    },
+    {
+      "concept": "checked bg rest",
+      "roles": [
+        "color-bg-primary-shared",
+        "color-content-primary-shared"
+      ],
+      "families": [
+        "bg",
+        "content"
+      ],
+      "members": [
+        {
+          "folder": "checkBox",
+          "role": "color-bg-primary-shared"
+        },
+        {
+          "folder": "radioButton",
+          "role": "color-content-primary-shared"
+        }
+      ],
+      "decision": "false-group",
+      "why": "grouped by the slot word, not by the element: the check box's -checked-bg IS a fill (checkbox.color.checked.default.bg.* = bg-primary*) and the radio's -checked-bg is the DOT, which the package models as an icon (radio-button.color.checked.icon.* = content-primary-shared*, with checked.bg.rest = color.none). Two families here is the anatomy being right, not a disagreement - and the values coincide anyway, primary-shared being one colour across families. Opened by D21"
+    },
+    {
+      "concept": "empty bg rest",
+      "roles": [
+        "color-bg-canvas",
+        "color-bg-primary-subtler"
+      ],
+      "families": [
+        "bg"
+      ],
+      "members": [
+        {
+          "folder": "chat",
+          "role": "color-bg-canvas"
+        },
+        {
+          "folder": "gridBase",
+          "role": "color-bg-primary-subtler"
+        }
+      ],
+      "decision": "answered",
+      "why": "ANSWERED 17.09, both halves. The question was whether these are one concept: they are not. The chat paints an empty PANEL with the canvas role, and the grid AI chat paints the DISC behind the sparkle glyph, a tinted badge; the anatomy parser grouped them because both names end in \"empty bg rest\", not because the elements match. The contrast half was applied on 17.09: the glyph moved to color-content-primary under a name of its own instead of borrowing the button colours module, which took dark from 2.55 to 4.11 and left light untouched at #0f6cbd. What remains of the disc - a resting element painted from a hover rung - is not this question and is carried by D35."
+    },
+    {
+      "concept": "empty content rest",
+      "roles": [
+        "color-content-subtle",
+        "color-content",
+        "color-content-primary"
+      ],
+      "families": [
+        "content"
+      ],
+      "members": [
+        {
+          "folder": "cardView",
+          "role": "color-content-subtle"
+        },
+        {
+          "folder": "chat",
+          "role": "color-content"
+        },
+        {
+          "folder": "chat",
+          "role": "color-content-subtle"
+        },
+        {
+          "folder": "gridBase",
+          "role": "color-content-primary"
+        }
+      ],
+      "decision": "shade",
+      "why": "the same family, a different shade - a difference two components can honestly have; listed so it is a choice rather than an accident On 17.09 the grid AI chat joined this group: its sparkle glyph stopped borrowing the button colours module and took its own name on color-content-primary, which is the role Blazor gives the same glyph."
+    },
+    {
+      "concept": "error bg rest",
+      "roles": [
+        "color-bg-danger",
+        "color-bg-danger-subtler"
+      ],
+      "families": [
+        "bg"
+      ],
+      "members": [
+        {
+          "folder": "gridBase",
+          "role": "color-bg-danger"
+        },
+        {
+          "folder": "informer",
+          "role": "color-bg-danger-subtler"
+        },
+        {
+          "folder": "toast",
+          "role": "color-bg-danger"
+        }
+      ],
+      "decision": "shade",
+      "why": "the same family, a different shade - a difference two components can honestly have; listed so it is a choice rather than an accident"
+    },
+    {
+      "concept": "error content rest",
+      "roles": [
+        "color-content-static-dark",
+        "color-content-danger"
+      ],
+      "families": [
+        "content"
+      ],
+      "members": [
+        {
+          "folder": "gridBase",
+          "role": "color-content-static-dark"
+        },
+        {
+          "folder": "gridBase",
+          "role": "color-content-danger"
+        },
+        {
+          "folder": "informer",
+          "role": "color-content-danger"
+        },
+        {
+          "folder": "toast",
+          "role": "color-content-static-dark"
+        }
+      ],
+      "decision": "shade",
+      "why": "the same family, a different shade - a difference two components can honestly have; listed so it is a choice rather than an accident"
+    },
+    {
+      "concept": "highlighted bg rest",
+      "roles": [
+        "color-bg-highlight",
+        "color-bg-primary-alpha-active"
+      ],
+      "families": [
+        "bg"
+      ],
+      "members": [
+        {
+          "folder": "cardView",
+          "role": "color-bg-highlight"
+        },
+        {
+          "folder": "htmlEditor",
+          "role": "color-bg-primary-alpha-active"
+        }
+      ],
+      "decision": "shade",
+      "why": "the same family, a different shade - a difference two components can honestly have; listed so it is a choice rather than an accident"
+    },
+    {
+      "concept": "info content rest",
+      "roles": [
+        "color-content",
+        "color-content-subtle"
+      ],
+      "families": [
+        "content"
+      ],
+      "members": [
+        {
+          "folder": "informer",
+          "role": "color-content"
+        },
+        {
+          "folder": "pagination",
+          "role": "color-content-subtle"
+        },
+        {
+          "folder": "toast",
+          "role": "color-content"
+        }
+      ],
+      "decision": "shade",
+      "why": "the same family, a different shade - a difference two components can honestly have; listed so it is a choice rather than an accident"
+    },
+    {
+      "concept": "invalid bg active",
+      "roles": [
+        "color-bg-danger-shared-active",
+        "color-content-danger-shared-active"
+      ],
+      "families": [
+        "bg",
+        "content"
+      ],
+      "members": [
+        {
+          "folder": "checkBox",
+          "role": "color-bg-danger-shared-active"
+        },
+        {
+          "folder": "checkBox",
+          "role": "color-content-danger-shared-active"
+        },
+        {
+          "folder": "radioButton",
+          "role": "color-content-danger-shared-active"
+        }
+      ],
+      "decision": "false-group",
+      "why": "grouped by the word in the names: for the check box this is the box fill, for the radio the dot-mark, which the package models as an icon. Both roles are right for what they paint, and the values coincide - *-danger-shared is one colour across all three families. Opened by D21"
+    },
+    {
+      "concept": "invalid bg focused",
+      "roles": [
+        "color-bg-danger-shared-hovered",
+        "color-content-danger-shared-hovered",
+        "color-content-danger",
+        "color-bg-danger-shared-active"
+      ],
+      "families": [
+        "bg",
+        "content"
+      ],
+      "members": [
+        {
+          "folder": "checkBox",
+          "role": "color-bg-danger-shared-hovered"
+        },
+        {
+          "folder": "checkBox",
+          "role": "color-content-danger-shared-hovered"
+        },
+        {
+          "folder": "radioButton",
+          "role": "color-content-danger-shared-hovered"
+        },
+        {
+          "folder": "slider",
+          "role": "color-content-danger"
+        },
+        {
+          "folder": "switch",
+          "role": "color-bg-danger-shared-active"
+        }
+      ],
+      "decision": "answered",
+      "why": "Answered 09.09, and the answer is not to unify. Measured: the whole *-danger-shared family resolves to ONE value across bg, border and content in both modes - that is what shared means in this set. So the family segment carries no colour information here; it records which property paints the value. The canonical spelling is therefore already decided by the theme's own slot rule (NAMING M3, family follows the painted property), and unifying the three would throw away the only information the segment carries. If the package ever diverges the three, each element will then correctly follow its own family - which is the outcome the original worry asked for. Every member of the cluster already obeys the rule: checkBox border paints border-color, checkBox fill paints background-color, checkBox mark is a glyph, common badge is a fill. The one exception is radioButton, which paints a border AND a fill from a single variable - that is not a spelling choice, it is the anatomy question filed as sweep:radio-invalid-vs-checkbox-invalid. All three roles here resolve to one colour (#76000b light / #9d0013 dark), so this row is a pure spelling cluster and nothing else."
+    },
+    {
+      "concept": "invalid bg hovered",
+      "roles": [
+        "color-bg-danger-shared-hovered",
+        "color-content-danger-shared-hovered",
+        "color-border-danger"
+      ],
+      "families": [
+        "bg",
+        "content",
+        "border"
+      ],
+      "members": [
+        {
+          "folder": "checkBox",
+          "role": "color-bg-danger-shared-hovered"
+        },
+        {
+          "folder": "checkBox",
+          "role": "color-content-danger-shared-hovered"
+        },
+        {
+          "folder": "radioButton",
+          "role": "color-content-danger-shared-hovered"
+        },
+        {
+          "folder": "slider",
+          "role": "color-border-danger"
+        },
+        {
+          "folder": "switch",
+          "role": "color-bg-danger-shared-hovered"
+        }
+      ],
+      "decision": "answered",
+      "why": "Answered 09.09, and the answer is not to unify. Measured: the whole *-danger-shared family resolves to ONE value across bg, border and content in both modes - that is what shared means in this set. So the family segment carries no colour information here; it records which property paints the value. The canonical spelling is therefore already decided by the theme's own slot rule (NAMING M3, family follows the painted property), and unifying the three would throw away the only information the segment carries. If the package ever diverges the three, each element will then correctly follow its own family - which is the outcome the original worry asked for. Every member of the cluster already obeys the rule: checkBox border paints border-color, checkBox fill paints background-color, checkBox mark is a glyph, common badge is a fill. The one exception is radioButton, which paints a border AND a fill from a single variable - that is not a spelling choice, it is the anatomy question filed as sweep:radio-invalid-vs-checkbox-invalid. Note the row is NOT one colour: beside the shared cluster (#9d0013 / #ee726a) it holds slider on border-danger, a different shade. That member is a shade divergence, not a spelling one, and the page used to claim the whole row was free to change."
+    },
+    {
+      "concept": "invalid bg rest",
+      "roles": [
+        "color-bg-danger-shared",
+        "color-content-danger-shared",
+        "color-bg-danger",
+        "color-bg-danger-subtler",
+        "color-border-danger"
+      ],
+      "families": [
+        "bg",
+        "content",
+        "border"
+      ],
+      "members": [
+        {
+          "folder": "checkBox",
+          "role": "color-bg-danger-shared"
+        },
+        {
+          "folder": "checkBox",
+          "role": "color-content-danger-shared"
+        },
+        {
+          "folder": "common",
+          "role": "color-bg-danger"
+        },
+        {
+          "folder": "gridBase",
+          "role": "color-bg-danger-subtler"
+        },
+        {
+          "folder": "progressBar",
+          "role": "color-bg-danger"
+        },
+        {
+          "folder": "radioButton",
+          "role": "color-content-danger-shared"
+        },
+        {
+          "folder": "slider",
+          "role": "color-border-danger"
+        },
+        {
+          "folder": "switch",
+          "role": "color-bg-danger-shared"
+        }
+      ],
+      "decision": "answered",
+      "why": "Answered 09.09, and the answer is not to unify. Measured: the whole *-danger-shared family resolves to ONE value across bg, border and content in both modes - that is what shared means in this set. So the family segment carries no colour information here; it records which property paints the value. The canonical spelling is therefore already decided by the theme's own slot rule (NAMING M3, family follows the painted property), and unifying the three would throw away the only information the segment carries. If the package ever diverges the three, each element will then correctly follow its own family - which is the outcome the original worry asked for. Every member of the cluster already obeys the rule: checkBox border paints border-color, checkBox fill paints background-color, checkBox mark is a glyph, common badge is a fill. The one exception is radioButton, which paints a border AND a fill from a single variable - that is not a spelling choice, it is the anatomy question filed as sweep:radio-invalid-vs-checkbox-invalid. Note the row is NOT one colour: beside the shared cluster (#c50f1f / #e4554f) it holds gridBase on bg-danger-subtler, progressBar on bg-danger and slider on border-danger - three different shades. Same correction as the hovered row."
+    },
+    {
+      "concept": "invalid border focused",
+      "roles": [
+        "color-border-danger",
+        "color-border-danger-shared-hovered",
+        "color-border-danger-shared-active"
+      ],
+      "families": [
+        "border"
+      ],
+      "members": [
+        {
+          "folder": "calendar",
+          "role": "color-border-danger"
+        },
+        {
+          "folder": "checkBox",
+          "role": "color-border-danger-shared-hovered"
+        },
+        {
+          "folder": "radioButton",
+          "role": "color-border-danger-shared-hovered"
+        },
+        {
+          "folder": "slider",
+          "role": "color-border-danger"
+        },
+        {
+          "folder": "switch",
+          "role": "color-border-danger-shared-active"
+        }
+      ],
+      "decision": "shade",
+      "why": "the same family, a different shade - a difference two components can honestly have; listed so it is a choice rather than an accident"
+    },
+    {
+      "concept": "invalid border rest",
+      "roles": [
+        "color-border-danger",
+        "color-border-danger-shared"
+      ],
+      "families": [
+        "border"
+      ],
+      "members": [
+        {
+          "folder": "calendar",
+          "role": "color-border-danger"
+        },
+        {
+          "folder": "checkBox",
+          "role": "color-border-danger-shared"
+        },
+        {
+          "folder": "radioButton",
+          "role": "color-border-danger-shared"
+        },
+        {
+          "folder": "switch",
+          "role": "color-border-danger-shared"
+        }
+      ],
+      "decision": "shade",
+      "why": "the same family, a different shade - a difference two components can honestly have; listed so it is a choice rather than an accident"
+    },
+    {
+      "concept": "invalid content rest",
+      "roles": [
+        "color-content-static-dark",
+        "color-content-danger"
+      ],
+      "families": [
+        "content"
+      ],
+      "members": [
+        {
+          "folder": "common",
+          "role": "color-content-static-dark"
+        },
+        {
+          "folder": "fieldset",
+          "role": "color-content-danger"
+        },
+        {
+          "folder": "fileUploader",
+          "role": "color-content-danger"
+        },
+        {
+          "folder": "stepper",
+          "role": "color-content-danger"
+        }
+      ],
+      "decision": "answered",
+      "why": "Answered 15.09: content-danger for the three that paint TEXT - fieldset, fileUploader and stepper - and the danger FILL family for common, which is not the same element at all. The common member is $invalid-badge-content, the white exclamation mark inside the invalid badge; it sits on a red disc, not on the page, so content-danger would be red on red. What the answer settles is the disc: $invalid-badge-bg moves from bg-danger-shared to bg-danger. The badge is a fixed error marker whose mark is mode-static (content-static-dark is #ffffff in both modes), so the disc must not lighten in dark either - the shared stem took it to #e4554f and the white mark dropped to 3.68 against 6.07 in light. On bg-danger it is #c50f1f and 6.07 in both. Same matched pair as the gallery disc in D1. The group itself is two different elements under one name: invalid text on a surface, and a mark on a danger disc. Both roles are right for what they paint"
+    },
+    {
+      "concept": "inverted content rest",
+      "roles": [
+        "color-content-static-dark",
+        "color-content-inverted"
+      ],
+      "families": [
+        "content"
+      ],
+      "members": [
+        {
+          "folder": "fileManager",
+          "role": "color-content-static-dark"
+        },
+        {
+          "folder": "list",
+          "role": "color-content-static-dark"
+        },
+        {
+          "folder": "scheduler",
+          "role": "color-content-inverted"
+        }
+      ],
+      "decision": "shade",
+      "why": "the same family, a different shade - a difference two components can honestly have; listed so it is a choice rather than an accident"
+    },
+    {
+      "concept": "menu bg rest",
+      "roles": [
+        "color-bg",
+        "color-border-subtle"
+      ],
+      "families": [
+        "bg",
+        "border"
+      ],
+      "members": [
+        {
+          "folder": "list",
+          "role": "color-bg"
+        },
+        {
+          "folder": "menu",
+          "role": "color-bg"
+        },
+        {
+          "folder": "menu",
+          "role": "color-border-subtle"
+        }
+      ],
+      "decision": "shade",
+      "why": "Dissolved 09.09. Blazor sets menu-bg and context-menu-bg to color-bg, which is what our menu and list already read. The third member is $menu-separator-bg, and the package names separator.color = border-subtle for exactly that element. Three members, two elements, no disagreement."
+    },
+    {
+      "concept": "menu icon rest",
+      "roles": [
+        "color-content-subtle",
+        "color-content"
+      ],
+      "families": [
+        "content"
+      ],
+      "members": [
+        {
+          "folder": "contextMenu",
+          "role": "color-content-subtle"
+        },
+        {
+          "folder": "filterBuilder",
+          "role": "color-content"
+        }
+      ],
+      "decision": "shade",
+      "why": "the same family, a different shade - a difference two components can honestly have; listed so it is a choice rather than an accident"
+    },
+    {
+      "concept": "menu shadow rest",
+      "roles": [
+        "box-shadow-lg",
+        "box-shadow-sm"
+      ],
+      "families": [
+        "shadow"
+      ],
+      "members": [
+        {
+          "folder": "contextMenu",
+          "role": "box-shadow-lg"
+        },
+        {
+          "folder": "list",
+          "role": "box-shadow-sm"
+        }
+      ],
+      "decision": "shade",
+      "why": "the same family, a different shade - a difference two components can honestly have; listed so it is a choice rather than an accident. Narrowed on 17.09: the list side used to read a colour role (color-shadow-ambient) against contextMenu's whole shadow role, which was a mismatch of kind, not of shade. Both now read a step of box-shadow - the hold menu sits in the flow and the submenu floats over it, so sm against lg is the difference being recorded."
+    },
+    {
+      "concept": "success content rest",
+      "roles": [
+        "color-content-success",
+        "color-content-static-dark"
+      ],
+      "families": [
+        "content"
+      ],
+      "members": [
+        {
+          "folder": "gridBase",
+          "role": "color-content-success"
+        },
+        {
+          "folder": "toast",
+          "role": "color-content-static-dark"
+        }
+      ],
+      "decision": "shade",
+      "why": "the same family, a different shade - a difference two components can honestly have; listed so it is a choice rather than an accident"
+    },
+    {
+      "concept": "text content focused",
+      "roles": [
+        "color-content",
+        "color-content-primary"
+      ],
+      "families": [
+        "content"
+      ],
+      "members": [
+        {
+          "folder": "filterBuilder",
+          "role": "color-content"
+        },
+        {
+          "folder": "textEditor",
+          "role": "color-content-primary"
+        }
+      ],
+      "decision": "shade",
+      "why": "The same family, a different shade. The filterBuilder chip no longer switches its label to the static white on focus - after the chips moved onto the package model the label keeps color-content across every rung, which is what lets the background stay inside its own -subtle ladder. The text editor still lifts its focused label to the accent, which is a different job: it marks the field the caret is in."
+    },
+    {
+      "concept": "text content rest",
+      "roles": [
+        "color-content",
+        "color-content-subtle"
+      ],
+      "families": [
+        "content"
+      ],
+      "members": [
+        {
+          "folder": "cardView",
+          "role": "color-content"
+        },
+        {
+          "folder": "diagram",
+          "role": "color-content-subtle"
+        },
+        {
+          "folder": "textEditor",
+          "role": "color-content"
+        }
+      ],
+      "decision": "shade",
+      "why": "the same family, a different shade - a difference two components can honestly have; listed so it is a choice rather than an accident"
+    }
+  ],
+  "unusedRoles": {
+    "comment": [
+      "Counted from the package inward: roles the four component sets assign that the theme reads",
+      "nowhere. capability - the role exists in the semantic layer and we simply never reached for it;",
+      "stale - the neighbours reference a name no layer declares, which is their drift, not our gap.",
+      "Exact equality: a role leaving this list means the theme started using it, which is a decision.",
+      "262.23.0 dropped two roles it used to declare and nobody read - color-border-contrast-disabled and color-content-active. The list is two shorter not because the theme started reading them but because they are gone from the package. Noticed while rebasing onto the base carrying that bump, 15.09."
+    ],
+    "capability": [
+      "color-bg-info",
+      "color-bg-info-active",
+      "color-bg-info-hovered",
+      "color-bg-info-selected",
+      "color-bg-info-subtler",
+      "color-bg-info-subtler-active",
+      "color-bg-info-subtler-hovered",
+      "color-bg-info-subtler-selected",
+      "color-bg-inverted-active",
+      "color-bg-inverted-disabled",
+      "color-bg-inverted-hovered",
+      "color-bg-inverted-selected",
+      "color-bg-low-active",
+      "color-bg-on-color",
+      "color-bg-on-color-alpha",
+      "color-bg-on-color-alpha-active",
+      "color-bg-on-color-alpha-disabled",
+      "color-bg-on-color-alpha-hovered",
+      "color-bg-static-dark-selected",
+      "color-bg-static-light-active",
+      "color-bg-static-light-disabled",
+      "color-bg-static-light-hovered",
+      "color-bg-static-light-selected",
+      "color-bg-success-shared",
+      "color-bg-success-shared-active",
+      "color-bg-success-shared-hovered",
+      "color-bg-warning-active",
+      "color-bg-warning-hovered",
+      "color-bg-warning-selected",
+      "color-bg-warning-subtler",
+      "color-bg-warning-subtler-active",
+      "color-bg-warning-subtler-hovered",
+      "color-bg-warning-subtler-selected",
+      "color-border-info",
+      "color-border-inverted",
+      "color-border-inverted-active",
+      "color-border-inverted-disabled",
+      "color-border-inverted-hovered",
+      "color-border-on-color-shared",
+      "color-border-on-color-shared-disabled",
+      "color-border-static-dark",
+      "color-border-static-dark-active",
+      "color-border-static-dark-disabled",
+      "color-border-static-dark-hovered",
+      "color-border-static-light",
+      "color-border-static-light-active",
+      "color-border-static-light-disabled",
+      "color-border-static-light-hovered",
+      "color-border-success-shared",
+      "color-border-success-shared-active",
+      "color-border-success-shared-hovered",
+      "color-border-warning",
+      "color-content-info",
+      "color-content-info-active",
+      "color-content-info-hovered",
+      "color-content-inverted-disabled",
+      "color-content-on-color",
+      "color-content-on-color-disabled",
+      "color-content-on-color-shared",
+      "color-content-on-color-shared-disabled",
+      "color-content-on-color-subtler",
+      "color-content-primary-active",
+      "color-content-static-light-disabled",
+      "color-content-success-shared",
+      "color-content-success-shared-active",
+      "color-content-success-shared-hovered",
+      "color-content-warning-active",
+      "color-content-warning-hovered",
+      "color-focus",
+      "color-focus-inverted",
+      "color-focus-static",
+      "color-focus-static-inverted"
+    ],
+    "stale": [
+      "color-bg-canvas-hovered",
+      "color-bg-none",
+      "color-border-none",
+      "color-content-none",
+      "color-content-static-dark-active",
+      "color-content-subtle-active",
+      "color-content-subtle-disabled",
+      "color-content-subtle-hovered",
+      "color-content-subtle-selected",
+      "color-content-subtler-disabled"
+    ]
+  },
+  "statePairs": {
+    "comment": [
+      "Contrast measured across a state change - added 09.09.2026, and it is what the rest of this file",
+      "could not see. The rule-local pass needs a foreground and a background in one rule; a state",
+      "ladder never writes them together, so the states where a value actually moves were exactly the",
+      "blind spot. Exact equality: a row leaving or entering this list is a decision, not a ratchet.",
+      "threshold: 4.5 where the foreground is a label, 3 where it is a glyph or a boundary (WCAG 1.4.11)."
+    ],
+    "rows": [
+      {
+        "bg": "--dx-button-default-contained-bg-focused",
+        "fg": "--dx-button-default-contained-content",
+        "fgRole": "color-content-static-dark",
+        "bgRole": "color-bg-primary-hovered",
+        "contrast": {
+          "light": 7.82,
+          "dark": 4.21
+        },
+        "selector": ".dx-button.dx-button-default.dx-state-focused",
+        "decision": "answered",
+        "group": "contained-button-label"
+      },
+      {
+        "bg": "--dx-button-default-contained-bg-hovered",
+        "fg": "--dx-button-default-contained-content",
+        "fgRole": "color-content-static-dark",
+        "bgRole": "color-bg-primary-hovered",
+        "contrast": {
+          "light": 7.82,
+          "dark": 4.21
+        },
+        "selector": ".dx-button.dx-button-default.dx-state-hover",
+        "decision": "answered",
+        "group": "contained-button-label"
+      },
+      {
+        "bg": "--dx-button-default-outlined-bg-active",
+        "fg": "--dx-button-default-text-content",
+        "fgRole": "color-content-primary",
+        "bgRole": "color-bg-primary-subtler-active",
+        "contrast": {
+          "light": 2.94,
+          "dark": 4.79
+        },
+        "selector": ".dx-popup-content .dx-scheduler-dropdown-appointment-buttons-block .dx-button.dx-state-sel",
+        "decision": "graphic-ok"
+      },
+      {
+        "bg": "--dx-button-success-contained-bg-focused",
+        "fg": "--dx-button-success-contained-content",
+        "fgRole": "color-content-static-dark",
+        "bgRole": "color-bg-success-hovered",
+        "contrast": {
+          "light": 7.53,
+          "dark": 4.18
+        },
+        "selector": ".dx-button.dx-button-success.dx-state-focused",
+        "decision": "answered",
+        "group": "contained-button-label"
+      },
+      {
+        "bg": "--dx-button-success-contained-bg-hovered",
+        "fg": "--dx-button-success-contained-content",
+        "fgRole": "color-content-static-dark",
+        "bgRole": "color-bg-success-hovered",
+        "contrast": {
+          "light": 7.53,
+          "dark": 4.18
+        },
+        "selector": ".dx-button.dx-button-success.dx-state-hover",
+        "decision": "answered",
+        "group": "contained-button-label"
+      },
+      {
+        "bg": "--dx-check-box-icon-checked-bg-active",
+        "fg": "--dx-check-box-mark-content",
+        "fgRole": "color-content-inverted",
+        "bgRole": "color-bg-primary-shared-active",
+        "contrast": {
+          "light": 11.17,
+          "dark": 2.31
+        },
+        "selector": ".dx-checkbox-checked.dx-state-active .dx-checkbox-icon",
+        "decision": "answered",
+        "group": "checkbox-focused-fill"
+      },
+      {
+        "bg": "--dx-speed-dial-action-main-bg-hovered",
+        "fg": "--dx-speed-dial-action-main-content",
+        "fgRole": "color-content-static-dark",
+        "bgRole": "color-bg-primary-hovered",
+        "contrast": {
+          "light": 7.82,
+          "dark": 4.21
+        },
+        "selector": ".dx-fa-button.dx-fa-button-main .dx-overlay-content.dx-state-hover",
+        "decision": "graphic-ok"
+      },
+      {
+        "bg": "--dx-stepper-step-bg-selected-hovered",
+        "fg": "--dx-stepper-step-content-selected",
+        "fgRole": "color-content-static-dark",
+        "bgRole": "color-bg-primary-hovered",
+        "contrast": {
+          "light": 7.82,
+          "dark": 4.21
+        },
+        "selector": ".dx-step.dx-state-hover.dx-step-completed .dx-step-indicator",
+        "decision": "answered",
+        "group": "contained-button-label"
+      }
+    ],
+    "groups": {
+      "checkbox-focused-fill": {
+        "decision": "answered",
+        "why": "Resolved in part on 15.09, when the designer produced the package tokens for checkbox/color/checked. Three slots, not one: border, bg and icon each have their own token, and our theme painted the border from the BG variable. Figma and Blazor agree that the border is border-primary-shared*, so that half was not a judgement call and is applied - three new names, light pixel-identical (primary-100/120/140 exactly as before), dark better at every rung: the box outline against the page goes 2.88 -> 4.65 at rest, 3.69 -> 5.79 hovered, 1.39 -> 1.98 pressed.\nWHAT REMAINS. The fill. Figma says bg-primary*, Blazor implements content-primary-shared*, and the two are identical in light and differ in dark - which is exactly what decides this row. On Figma's fill the mark reads 3.36 at rest and 1.62 pressed; on Blazor's, 5.42 and 2.31. Neither clears 3.0 in the pressed state, because no primary family inverts its active rung for dark - the same package defect P2 records for danger.\nAND A THIRD THING THE TOKENS SETTLE. The package state list is rest / hovered / active / read-only / disabled - there is no focused. Our theme paints .dx-state-focused AND .dx-state-active from one variable, so a keyboard user SITS at the value the package intends for a transient press. The button already separates them (bg-focused reads bg-primary-hovered). Splitting focus from active would leave the 1.62 where the package put it - under a finger, for the length of a click - and take the keyboard user to 4.30.\nRE-CHECKED 15.09 against a freshly pulled Blazor, and the stem argument above was WRONG. Blazor's checked fills are content-primary-shared for primary but bg-success-shared and bg-danger-shared for the other two - I had read the INDETERMINATE variables, where the dash is a content-coloured mark, as the checked fills. So primary is the outlier inside Blazor, our bg family agrees with their success and danger, and our invalid MARK on content-danger-shared agrees with their indeterminate mark. There was no internal inconsistency.\nWHICH LEAVES A CANDIDATE THAT SATISFIES BOTH SOURCES: bg-primary-shared*. The whole *-shared family is one value across bg, border and content, so it measures exactly like Blazor's content-primary-shared - mark 5.42 at rest and box 4.65 in dark against 3.36 and 2.88 today - while staying in the bg family Figma names, on the stem Blazor itself uses for success and danger. Light is identical to what ships now. The pressed rung still fails (2.31 / 1.98): no primary family inverts its active step for dark, which is P2's defect again.\nRESOLVED 15.09, option 1. Focus now takes the HOVERED rung and the press keeps the package's active one, which is the shape the contained button already had (bg-focused reads bg-primary-hovered, bg-active reads bg-primary-active). The package state list justifies it: there is no focused state in it at all, so painting focus with the value meant for a click was never what the tokens asked for.\nFour variables: -bg-focused and -border-focused moved down a rung, and -bg-active and -border-active were added to hold what the package assigns. The row that measured 1.62 split in two - the press keeps 1.62 on a state that lasts as long as a finger is down, and the focus a keyboard user SITS in went to 4.30, over the 3:1 a glyph needs. Light moves one step on focus, #003c70 -> #005397. Cascade verified on eight combinations: checked rest, hover, focus and press, the invalid pair, and the indeterminate pair including its ::before dash.\nThe fill STEM question is untouched and still open: bg-primary* as it ships, against bg-primary-shared* which reads 5.42 / 4.65 in dark where today it is 3.36 / 2.88.\nSTEM ACCEPTED 15.09. The checked fill moved from the plain bg-primary family to bg-primary-shared*. Light is pixel-identical at every rung - primary-100, 120, 120, 140 exactly as before - because the plain and shared families coincide in light. Dark improves everywhere: rest primary-100 -> 80, hovered and focused 90 -> 70, press 140 -> 120. The rest row left the contrast list (3.36 -> 5.42), hovered and focused left the state-pair list (4.30 -> 6.75), and the press went 1.62 -> 2.31 - still under 3, because the package gives no primary family an inverted active rung, which is P2 again.\nWhy the stem matters at all: the plain family does not know the mode. bg-primary is #0f6cbd in BOTH modes and bg-primary-active #003c70 in both, while the mark on them, content-inverted, does flip - to #161616 in dark. A fixed fill under a flipping mark is what produced 3.36 and 1.62. Every rung of the shared family flips.\nCLOSED 15.09. All three parts are applied - the outline has its own role, focus is separated from the press, and the fill is on the shared stem. What is left below the floor is the press at 2.31 in dark, and no shipped role fixes it: every primary family keeps its active rung un-inverted for dark. That is the same package defect P2 files for danger, so it leaves the theme as a report rather than a question."
+      },
+      "contained-button-label": {
+        "decision": "answered",
+        "why": "The filled default and success buttons, and the completed stepper indicator, put a white label on bg-<hue>-hovered and land at 4.18-4.21 in dark against the 4.5 a label needs. Light is 7.5-7.8, so this is dark-only. The foreground is content-static-dark, which is #ffffff in both modes by design, so the whole movement is in the fill: bg-primary in dark is #0f6cbd giving 5.38, and its hovered rung lightens to #2b7ecf giving 4.21. A hover that lightens is correct for dark; it is the amount that overshoots. Nothing in the theme can fix this - the pair is two package roles used exactly as intended - so this is a report to the design system, alongside the danger-content row already filed. Listed as a question only to confirm we file it rather than swap a role.\nCLOSED 15.09: handed to the designers and left as it is. Nothing in the theme can move it - the pair is two package roles used exactly as intended - so the theme carries it as a known report rather than an open question."
+      }
+    },
+    "measuredOn": "2026-09-09"
+  },
+  "bundleFreshness": {
+    "comment": [
+      "How many tier declarations are missing from the built bundle. Must be 0.",
+      "Not a metric but a guard: every check that looks at a painted property GOES SILENT when the",
+      "bundle is older than the sources - a renamed variable is simply not found, it has no property,",
+      "and it can no longer contradict its slot. The 23-name rename on 09.09 hid 24 declarations that",
+      "way, and the slot check looked like it had passed. Now a stale bundle moves the number",
+      "instead of removing findings."
+    ],
+    "declarationsMissingFromBundle": 0
+  },
+  "rungs": [
+    {
+      "name": "button-danger-outlined-content",
+      "state": "rest",
+      "roles": [
+        "color-content-danger"
+      ],
+      "oursAt": [
+        "selected"
+      ],
+      "want": [
+        "color-content",
+        "color-content-inverted",
+        "color-content-static-dark",
+        "color-content-static-light",
+        "color-content-subtle"
+      ],
+      "decision": "answered",
+      "why": "The outlined and text buttons keep the hue on the label at rest; the package puts a neutral `content` there and brings the hue in only when the button is selected. Opened as D17 and answered by the designer on 16.09: keep the tinted look, move only the two rungs that failed contrast. So the rung difference is the decision, not a defect."
+    },
+    {
+      "name": "button-default-outlined-content",
+      "state": "rest",
+      "roles": [
+        "color-content-primary"
+      ],
+      "oursAt": [
+        "selected"
+      ],
+      "want": [
+        "color-content",
+        "color-content-inverted",
+        "color-content-static-dark",
+        "color-content-static-light",
+        "color-content-subtle"
+      ],
+      "decision": "answered",
+      "why": "The outlined and text buttons keep the hue on the label at rest; the package puts a neutral `content` there and brings the hue in only when the button is selected. Opened as D17 and answered by the designer on 16.09: keep the tinted look, move only the two rungs that failed contrast. So the rung difference is the decision, not a defect."
+    },
+    {
+      "name": "button-default-text-content",
+      "state": "rest",
+      "roles": [
+        "color-content-primary"
+      ],
+      "oursAt": [
+        "selected"
+      ],
+      "want": [
+        "color-content",
+        "color-content-inverted",
+        "color-content-static-dark",
+        "color-content-static-light",
+        "color-content-subtle"
+      ],
+      "decision": "answered",
+      "why": "The outlined and text buttons keep the hue on the label at rest; the package puts a neutral `content` there and brings the hue in only when the button is selected. Opened as D17 and answered by the designer on 16.09: keep the tinted look, move only the two rungs that failed contrast. So the rung difference is the decision, not a defect."
+    },
+    {
+      "name": "button-default-text-content-selected",
+      "state": "selected",
+      "roles": [
+        "color-content-primary-hovered"
+      ],
+      "oursAt": [
+        "hovered"
+      ],
+      "want": [
+        "color-content-danger",
+        "color-content-info",
+        "color-content-primary",
+        "color-content-static-dark",
+        "color-content-subtle-selected",
+        "color-content-success",
+        "color-content-warning"
+      ],
+      "decision": "answered",
+      "why": "The outlined and text buttons keep the hue on the label at rest; the package puts a neutral `content` there and brings the hue in only when the button is selected. Opened as D17 and answered by the designer on 16.09: keep the tinted look, move only the two rungs that failed contrast. So the rung difference is the decision, not a defect. The selected rung of the text button reads the hovered colour of the same ramp, which is inside that decision."
+    },
+    {
+      "name": "button-normal-contained-content-selected",
+      "state": "selected",
+      "roles": [
+        "color-content"
+      ],
+      "oursAt": [
+        "active",
+        "hovered",
+        "rest"
+      ],
+      "want": [
+        "color-content-danger",
+        "color-content-info",
+        "color-content-primary",
+        "color-content-static-dark",
+        "color-content-subtle-selected",
+        "color-content-success",
+        "color-content-warning"
+      ],
+      "decision": "answered",
+      "why": "The outlined and text buttons keep the hue on the label at rest; the package puts a neutral `content` there and brings the hue in only when the button is selected. Opened as D17 and answered by the designer on 16.09: keep the tinted look, move only the two rungs that failed contrast. So the rung difference is the decision, not a defect. This row is the same group seen from the neutral button: its label stays `content` when selected, where the package colours it by hue."
+    },
+    {
+      "name": "button-success-outlined-content",
+      "state": "rest",
+      "roles": [
+        "color-content-success"
+      ],
+      "oursAt": [
+        "selected"
+      ],
+      "want": [
+        "color-content",
+        "color-content-inverted",
+        "color-content-static-dark",
+        "color-content-static-light",
+        "color-content-subtle"
+      ],
+      "decision": "answered",
+      "why": "The outlined and text buttons keep the hue on the label at rest; the package puts a neutral `content` there and brings the hue in only when the button is selected. Opened as D17 and answered by the designer on 16.09: keep the tinted look, move only the two rungs that failed contrast. So the rung difference is the decision, not a defect."
+    },
+    {
+      "name": "card-view-card-bg-selected",
+      "state": "selected",
+      "roles": [
+        "color-bg-primary-subtler-selected"
+      ],
+      "oursAt": [
+        "rest"
+      ],
+      "want": [
+        "color-bg-info-subtler",
+        "color-bg-primary-alpha",
+        "color-bg-primary-subtler",
+        "color-bg-selected",
+        "color-bg-success-subtler",
+        "color-bg-warning-subtler"
+      ],
+      "decision": "confirmed",
+      "why": "The package assigns exactly this role to exactly this thing; only the rung word differs, because it names the card's own `selected` state where we name the element `card-bg-selected`. Nothing to reconcile."
+    },
+    {
+      "name": "chat-avatar-bg",
+      "state": "rest",
+      "roles": [
+        "color-bg-active"
+      ],
+      "oursAt": [
+        "active"
+      ],
+      "want": [
+        "color-bg",
+        "color-bg-canvas",
+        "color-bg-danger-subtler",
+        "color-bg-high",
+        "color-bg-primary-subtler",
+        "color-content-disabled"
+      ],
+      "decision": "package-gap",
+      "why": "Measured before deciding: against the chat surface every neutral RESTING fill the system offers reads 1.04-1.09 - bg 1.00, bg-canvas 1.04, bg-low and bg-high 1.09 - because in light they are all #f5f5f5-#fafafa on #ffffff. The only neutral fills a disc is visible on are the state rungs: bg-selected 1.21 and bg-active 1.31, which is what the avatar reads today. So this is not a rung chosen carelessly but a role the design system does not ship: a resting neutral disc. Kept, and raised as a request to the package team."
+    },
+    {
+      "name": "check-box-icon-bg-disabled",
+      "state": "disabled",
+      "roles": [
+        "color-content-disabled"
+      ],
+      "oursAt": [
+        "read-only"
+      ],
+      "want": [
+        "color-none"
+      ],
+      "decision": "anatomy",
+      "why": "The package paints `color-none` on a disabled box - it leaves it unfilled and lets the border carry the state - and uses content-disabled at read-only instead. We fill it. A different anatomy, not a different role: the disabled paint has its own gate here (tests/disabled-paint.test.ts)."
+    },
+    {
+      "name": "gantt-selection-bg",
+      "state": "rest",
+      "roles": [
+        "color-bg-primary-subtler"
+      ],
+      "oursAt": [
+        "selected"
+      ],
+      "want": [
+        "color-bg",
+        "color-bg-alpha",
+        "color-bg-danger-subtler",
+        "color-bg-info-subtler-hovered",
+        "color-bg-info-subtler-selected",
+        "color-bg-low",
+        "color-bg-primary-alpha",
+        "color-bg-primary-subtle",
+        "color-bg-primary-subtler-selected",
+        "color-bg-selected",
+        "color-bg-success-subtler-selected",
+        "color-bg-warning-subtler-selected",
+        "color-none"
+      ],
+      "decision": "confirmed",
+      "why": "Our element IS the selection, so its name carries no `-selected` suffix; the package reaches the same paint as the `selected` rung of a row. Same role, same paint, different spelling."
+    },
+    {
+      "name": "gantt-ti-bg",
+      "state": "rest",
+      "roles": [
+        "color-bg-primary-alpha-hovered"
+      ],
+      "oursAt": [
+        "hovered"
+      ],
+      "want": [
+        "color-bg",
+        "color-bg-alpha",
+        "color-bg-danger-subtler",
+        "color-bg-info-subtler-hovered",
+        "color-bg-info-subtler-selected",
+        "color-bg-low",
+        "color-bg-primary-alpha",
+        "color-bg-primary-subtle",
+        "color-bg-primary-subtler-selected",
+        "color-bg-selected",
+        "color-bg-success-subtler-selected",
+        "color-bg-warning-subtler-selected",
+        "color-none"
+      ],
+      "decision": "known",
+      "why": "The band marking a time interval reads bg-primary-alpha-hovered, alpha 0.20. The resting rung of the same ramp is 0.11 and legacy fluent drew this band at 0.15, so neither rung is the legacy density and the rest rung is the fainter of the two: against the canvas the band goes from 1.33 to 1.16. Kept at the stronger rung and recorded in DIVERGENCES.md. Noted while measuring: the same ramp is read off-rung in two more places and in both directions - htmlEditor's variable chip is another resting element on the hovered rung, and the scheduler's FOCUSED cell reads the resting rung. That is a ramp-wide question, not this row."
+    },
+    {
+      "name": "grid-ai-chat-empty-icon-bg",
+      "state": "rest",
+      "roles": [
+        "color-bg-primary-subtler"
+      ],
+      "oursAt": [
+        "selected"
+      ],
+      "want": [
+        "color-bg",
+        "color-bg-alpha",
+        "color-bg-danger-subtler",
+        "color-bg-info-subtler-hovered",
+        "color-bg-info-subtler-selected",
+        "color-bg-low",
+        "color-bg-primary-alpha",
+        "color-bg-primary-subtle",
+        "color-bg-primary-subtler-selected",
+        "color-bg-selected",
+        "color-bg-success-subtler-selected",
+        "color-bg-warning-subtler-selected",
+        "color-none"
+      ],
+      "decision": "anatomy",
+      "why": "Answered 17.09 by moving the disc to the rest rung of its own ramp, bg-primary-subtler: the glyph on it goes from 4.02 to 4.64 in light and 4.11 to 4.79 in dark, so the pair leaves the contrast list altogether. The row stays here because the package's grid names that role for a SELECTED row and has no empty-state badge at all - a difference of anatomy, with no rung of theirs left to agree with."
+    },
+    {
+      "name": "grid-cell-modified-bg",
+      "state": "rest",
+      "roles": [
+        "color-bg-success-subtler"
+      ],
+      "oursAt": [
+        "selected"
+      ],
+      "want": [
+        "color-bg",
+        "color-bg-alpha",
+        "color-bg-danger-subtler",
+        "color-bg-info-subtler-hovered",
+        "color-bg-info-subtler-selected",
+        "color-bg-low",
+        "color-bg-primary-alpha",
+        "color-bg-primary-subtle",
+        "color-bg-primary-subtler-selected",
+        "color-bg-selected",
+        "color-bg-success-subtler-selected",
+        "color-bg-warning-subtler-selected",
+        "color-none"
+      ],
+      "decision": "anatomy",
+      "why": "A modified-cell tint is ours alone; the package has no such element and uses that role for a selected row. There is no rung of theirs to agree with."
+    },
+    {
+      "name": "grid-selection-bg",
+      "state": "rest",
+      "roles": [
+        "color-bg-primary-subtler"
+      ],
+      "oursAt": [
+        "selected"
+      ],
+      "want": [
+        "color-bg",
+        "color-bg-alpha",
+        "color-bg-danger-subtler",
+        "color-bg-info-subtler-hovered",
+        "color-bg-info-subtler-selected",
+        "color-bg-low",
+        "color-bg-primary-alpha",
+        "color-bg-primary-subtle",
+        "color-bg-primary-subtler-selected",
+        "color-bg-selected",
+        "color-bg-success-subtler-selected",
+        "color-bg-warning-subtler-selected",
+        "color-none"
+      ],
+      "decision": "confirmed",
+      "why": "See gantt-selection-bg - the selected row of a grid, named as a thing rather than as a state."
+    },
+    {
+      "name": "scrollable-bg",
+      "state": "rest",
+      "roles": [
+        "color-bg"
+      ],
+      "oursAt": [
+        "hovered"
+      ],
+      "want": [
+        "color-none"
+      ],
+      "decision": "anatomy",
+      "why": "The package leaves its scroll surface unpainted at rest (`color-none`) and gives it a background only on hover. Ours is an opaque surface under the content, which is a different element rather than a different rung."
+    },
+    {
+      "name": "slider-element-bg",
+      "state": "rest",
+      "roles": [
+        "color-bg"
+      ],
+      "oursAt": [
+        "hovered"
+      ],
+      "want": [
+        "color-none"
+      ],
+      "decision": "anatomy",
+      "why": "Same as scrollable-bg: the package paints nothing at rest."
+    },
+    {
+      "name": "slider-tooltip-content",
+      "state": "rest",
+      "roles": [
+        "color-content"
+      ],
+      "oursAt": [
+        "hovered"
+      ],
+      "want": [
+        "color-content-danger",
+        "color-content-primary",
+        "color-content-subtle",
+        "color-content-success",
+        "color-content-warning"
+      ],
+      "decision": "anatomy",
+      "why": "The package tints the slider tooltip label by hue and keeps neutral `content` for the hovered rung; our tooltip is one neutral label in every state, which is the tooltip we ship, not a rung of theirs."
+    },
+    {
+      "name": "tabs-tab-content-selected",
+      "state": "selected",
+      "roles": [
+        "color-content"
+      ],
+      "oursAt": [
+        "rest"
+      ],
+      "want": [
+        "color-content-primary-shared"
+      ],
+      "decision": "answered",
+      "why": "Answered 17.09 as D37, option (2). A selected tab used to underline itself in the accent, colour its icon in the accent and leave its label neutral - the two halves of one element disagreeing. The icon joins the label on `content`, so the accent now marks a selected tab in exactly one place, the underline, and both rows sit here for the same reason: the package colours label and icon with content-primary-shared at that rung and we mark the tab by its selector instead. Values: the icon moves #0f6cbd to #161616 in light and #4b90d9 to #ffffff in dark; the underline is untouched."
+    },
+    {
+      "name": "tabs-tab-icon-content-selected",
+      "state": "selected",
+      "roles": [
+        "color-content"
+      ],
+      "oursAt": [
+        "rest"
+      ],
+      "want": [
+        "color-content-primary-shared"
+      ],
+      "decision": "answered",
+      "why": "Answered 17.09 as D37, option (2). A selected tab used to underline itself in the accent, colour its icon in the accent and leave its label neutral - the two halves of one element disagreeing. The icon joins the label on `content`, so the accent now marks a selected tab in exactly one place, the underline, and both rows sit here for the same reason: the package colours label and icon with content-primary-shared at that rung and we mark the tab by its selector instead. Values: the icon moves #0f6cbd to #161616 in light and #4b90d9 to #ffffff in dark; the underline is untouched."
+    },
+    {
+      "name": "text-editor-border-focused",
+      "state": "focused",
+      "roles": [
+        "color-border-active"
+      ],
+      "oursAt": [
+        "active"
+      ],
+      "want": [
+        "color-content-primary"
+      ],
+      "decision": "anatomy",
+      "why": "Measured in the bundle: the accent line the package calls `text-input.line.focused = content-primary` is our `$text-editor-indicator`, which reads exactly `content-primary`. What our `-border-focused` and `-line-focused` paint is the box's own edge underneath that indicator. The role is right; the slot word `line` means a different line on each side."
+    },
+    {
+      "name": "text-editor-line-focused",
+      "state": "focused",
+      "roles": [
+        "color-content"
+      ],
+      "oursAt": [
+        "hovered"
+      ],
+      "want": [
+        "color-content-primary"
+      ],
+      "decision": "anatomy",
+      "why": "See text-editor-border-focused - the same pair of lines, and the accent one already carries the package's role."
+    },
+    {
+      "name": "tree-view-content",
+      "state": "rest",
+      "roles": [
+        "color-content"
+      ],
+      "oursAt": [
+        "active",
+        "hovered"
+      ],
+      "want": [
+        "color-content-subtle"
+      ],
+      "decision": "anatomy",
+      "why": "The package's tree item is `content-subtle` at rest and darkens to `content` on hover; ours is full `content` throughout. A deliberate contrast-positive difference, and moving to their ladder would lower the resting contrast of every tree label."
+    }
+  ]
+}
diff --git a/packages/devextreme-scss/tests/roles.test.ts b/packages/devextreme-scss/tests/roles.test.ts
new file mode 100644
index 000000000000..fdbd585f1505
--- /dev/null
+++ b/packages/devextreme-scss/tests/roles.test.ts
@@ -0,0 +1,443 @@
+/*
+ * The role a colour slot reads has to be the role the design system names for that slot.
+ *
+ * Nothing else checks this. The naming enforcer checks the shape of the name, the resolve diff
+ * checks that a value did not move, the reachability audit checks delivery and the screenshots
+ * check the cascade - a role that is wrong but plausible passes all four, and surfaces only when
+ * the palette is re-anchored or in dark mode, where two roles that share a primitive in light
+ * diverge and no etalon exists to notice.
+ *
+ * The comparison lives in tools/review/roles.mjs - the same module ROLES.md is built from, so the
+ * gate and the report cannot disagree about what counts as a disagreement. Driven as a child
+ * process because the tool is ESM and jest transforms TypeScript only.
+ */
+
+import { execFileSync } from 'child_process';
+import {
+  mkdirSync, mkdtempSync, readFileSync, writeFileSync,
+} from 'fs';
+import { tmpdir } from 'os';
+import { join } from 'path';
+
+const packageRoot = process.cwd();
+const tool = join(packageRoot, 'tools', 'review', 'roles.mjs');
+const baselinePath = join(packageRoot, 'tests', 'roles.baseline.json');
+
+type Finding = {
+  name: string;
+  slot: string | null;
+  roles: string[];
+  package?: { verdict: string };
+};
+type Open = {
+  name: string; verdict: string; roles: string[]; slot: string | null;
+  decision?: string; why?: string;
+};
+
+const DECISIONS = ['confirmed', 'naming', 'rule-5', 'bridge', 'package-gap', 'design'];
+const SLOT_DECISIONS = ['naming', 'hairline', 'rule-5', 'known', 'design', 'drawn-mark', 'ring-and-fill'];
+const FAMILY_DECISIONS = ['package-confirms', 'hairline', 'drawn-mark', 'bridge', 'naming', 'design'];
+const LADDER_DECISIONS = ['no-rung', 'design', 'answered'];
+const CONTRAST_DECISIONS = ['graphic-ok', 'package-gap', 'design'];
+const STATE_PAIR_DECISIONS = ['graphic-ok', 'design', 'answered'];
+const CONCEPT_DECISIONS = ['spelling', 'shade', 'design', 'answered', 'false-group'];
+const RUNG_DECISIONS = ['answered', 'confirmed', 'anatomy', 'design', 'package-gap', 'known'];
+
+type Concept = {
+  concept: string; roles: string[]; families: string[];
+  members: { folder: string; role: string }[]; decision?: string; why?: string;
+};
+
+type ContrastPair = {
+  selector: string; fgRole: string; bgRole: string; contrast: Record<string, number>;
+  decision?: string; why?: string;
+};
+
+type StatePair = {
+  bg: string; fg: string; fgRole: string; bgRole: string;
+  contrast: Record<string, number>; selector: string;
+  group?: string; decision?: string;
+};
+
+type Ladder = { stem: string; states: string[]; role: string[]; decision?: string; why?: string };
+
+type FamilyMismatch = {
+  name: string; slot: string; roles: string[]; paints: string[];
+  decision?: string; why?: string;
+};
+
+type SlotLie = {
+  name: string; slot: string | null; slotSays: string; paints: string[];
+  decision?: string; why?: string;
+};
+
+type Rung = {
+  name: string; state: string; roles: string[]; oursAt: string[]; want: string[];
+  decision?: string; why?: string;
+};
+
+type Typography = { variable: string; family: string; step: number; marker: string | null; roles: string[] };
+
+const run = (theme?: string): {
+  summary: Record<string, unknown>;
+  findings: (Finding & {
+    slot?: string | null; slotLies?: { slotSays: string }; paints?: { properties: string[] };
+    family?: { want: string | null; got: string[] };
+    rung?: { state: string; want: string[]; oursAt: string[] };
+  })[];
+  typography: Typography[];
+  ladders: (Ladder & { unusedRungs: unknown[] })[];
+  lowContrast: ContrastPair[];
+  lowStatePairs: StatePair[];
+  concepts: (Concept & { clusters: unknown[]; oneColour: boolean })[];
+  unusedRoles: { capability: { role: string }[]; stale: { role: string }[] };
+  coverage: { lines: number; collected: number; dataUriStatic: number; unexplained: string[] };
+} => JSON.parse(
+  execFileSync('node', [tool, '--json', ...(theme ? [`--theme=${theme}`] : [])], {
+    encoding: 'utf8',
+    maxBuffer: 64 * 1024 * 1024,
+  }),
+);
+
+const disagreements = (findings: Finding[]): Open[] => findings
+  .filter((f) => f.package && ['cross-family', 'family-conflict'].includes(f.package.verdict))
+  .map((f) => ({
+    name: f.name, verdict: f.package!.verdict, roles: f.roles, slot: f.slot,
+  }))
+  .sort((a, b) => a.name.localeCompare(b.name));
+
+const actual = run();
+const baseline = JSON.parse(readFileSync(baselinePath, 'utf8'));
+
+const unmarked = (typography: Typography[]) => typography
+  .filter((t) => !t.marker)
+  .map((t) => ({ variable: t.variable, reads: `${t.family}-${t.step}`, roleExists: t.roles.length > 0 }))
+  .sort((a, b) => (a.variable + a.reads).localeCompare(b.variable + b.reads));
+
+if (process.env.UPDATE_ROLES_BASELINE) {
+  writeFileSync(baselinePath, `${JSON.stringify({
+    ...baseline,
+    open: disagreements(actual.findings).map((entry) => {
+      const previous = baseline.open.find((o: Open) => o.name === entry.name);
+      return { ...entry, decision: previous?.decision, why: previous?.why };
+    }),
+    typographyUnmarked: unmarked(actual.typography),
+  }, null, 2)}\n`);
+}
+
+/*
+ * Counted from the files, not from the set the collector built - which is the whole point.
+ *
+ * `every colour declaration reaches a verdict` measures completeness over the declarations the pass
+ * managed to collect, so it stayed green through three separate blind spots: a declaration whose
+ * value borrows another component's variable, one written outside `_colors.scss`, and a tier name
+ * written straight as a custom property. Twenty-four declarations in total, invisible to every list
+ * and every family check, with the gate reporting full coverage the entire time.
+ *
+ * This one starts from every line in the theme that mentions a colour or shadow role and requires
+ * each to be either a collected declaration or a `dx-data-uri-static` line, where the role is named
+ * in a comment beside a literal because the value is baked into an SVG. A fourth way of writing a
+ * colour now fails here by name instead of going quietly missing.
+ */
+test('every line that reads a role is collected or explained', () => {
+  expect(actual.coverage.unexplained).toEqual([]);
+  expect(actual.coverage.lines)
+    .toBe(actual.coverage.collected + actual.coverage.dataUriStatic);
+  expect(actual.coverage.collected).toBeGreaterThan(700);
+});
+
+test('every colour declaration reaches a verdict', () => {
+  const unclassified = actual.findings.filter((f) => !f.package?.verdict);
+  expect(unclassified.map((f) => f.name)).toEqual([]);
+});
+
+/*
+ * Exact equality, not a ratchet down. A new disagreement is a role nobody has looked at; a resolved
+ * one is a decision that belongs in the commit that made it. Both have to be banked on purpose.
+ */
+test('the roles the package disagrees with are the reviewed ones', () => {
+  const banked = baseline.open.map(({ decision, why, ...rest }: Open) => rest);
+  expect(disagreements(actual.findings)).toEqual(banked);
+});
+
+/*
+ * A banked disagreement with no decision is the failure mode this whole report exists to prevent:
+ * a role nobody chose, sitting in a list nobody reads. The list is the record, so it carries the
+ * reasoning, not just the names.
+ */
+test('every banked disagreement carries a decision and a reason', () => {
+  const undecided = baseline.open
+    .filter((o: Open) => !o.decision || !DECISIONS.includes(o.decision) || !o.why?.trim())
+    .map((o: Open) => o.name);
+  expect(undecided).toEqual([]);
+});
+
+// A green gate has to mean "nothing to find", not "the scan matched nothing".
+test('a role from the wrong family is caught', () => {
+  const theme = mkdtempSync(join(tmpdir(), 'roles-'));
+  mkdirSync(join(theme, 'switch'));
+  writeFileSync(join(theme, 'switch', '_colors.scss'), [
+    '@use "../../../_design-system/variables/ds" as ds;',
+    '',
+    '$switch-off-border: ds.$color-content-subtle !default;',
+    '',
+  ].join('\n'));
+
+  const planted = run(theme).findings.find((f) => f.name === 'switch-off-border');
+  expect(planted?.package?.verdict).toBe('cross-family');
+});
+
+test('a role the package names for the slot passes', () => {
+  const theme = mkdtempSync(join(tmpdir(), 'roles-'));
+  mkdirSync(join(theme, 'switch'));
+  writeFileSync(join(theme, 'switch', '_colors.scss'), [
+    '@use "../../../_design-system/variables/ds" as ds;',
+    '',
+    '$switch-off-border: ds.$color-border-contrast !default;',
+    '',
+  ].join('\n'));
+
+  const planted = run(theme).findings.find((f) => f.name === 'switch-off-border');
+  expect(planted?.package?.verdict).toBe('agrees');
+});
+
+/*
+ * A typography step read is not a literal, so tools/review/px-audit.mjs never saw it: these slipped
+ * past the marker discipline entirely. Banked rather than ratcheted, for the same reason as above -
+ * routing one onto a role is a decision (caption or base or title, at the same step), and it should
+ * arrive with the commit that made it.
+ */
+test('typography step reads with no marker are the known ones', () => {
+  expect(unmarked(actual.typography)).toEqual(baseline.typographyUnmarked);
+});
+
+/*
+ * The slot is the one claim in a name that can be checked against ground truth: NAMING.md says the
+ * CSS property decides it, and the built bundle says which property the value reaches. Where the two
+ * disagree the name misdescribes the code - sometimes deliberately (a hairline drawn with
+ * background-color is still a border), sometimes not (fourteen filterBuilder `-content` variables
+ * that have never painted text). Banked with the reason either way.
+ *
+ * Needs the built bundle; with none there is nothing to read and the case would pass vacuously, so
+ * it asserts the scan found something first.
+ */
+test('names whose slot contradicts the painted property are the reviewed ones', () => {
+  const lies = actual.findings
+    .filter((f) => f.slotLies)
+    .map((f) => ({
+      name: f.name,
+      slot: f.slot ?? null,
+      slotSays: f.slotLies!.slotSays,
+      paints: f.paints!.properties,
+    }))
+    .sort((a, b) => a.name.localeCompare(b.name));
+
+  expect(lies.length).toBeGreaterThan(0);
+  expect(lies).toEqual(baseline.slotLies.map(({ decision, why, ...rest }: SlotLie) => rest));
+});
+
+/*
+ * The family invariant: a `-bg` slot reads a color-bg-* role, `-content` a color-content-* one,
+ * `-border` a color-border-*. It needs no package - which is the point, because it is the only
+ * check that answers for the nine folders the design system never modelled.
+ *
+ * It was measured from the first run and gated only where the package could also judge it, so
+ * two thirds of what it found - 48 of 68 - were computed and dropped. Among them the scheduler's
+ * time-indicator pair, where both names misdescribe what they paint, and a gallery focus border
+ * painted from a bg role while the border role exists. Exact equality, like everything else here.
+ */
+test('roles whose family contradicts their slot are the reviewed ones', () => {
+  const known = new Set([
+    ...baseline.open.map((o: Open) => o.name),
+    ...baseline.slotLies.map((o: SlotLie) => o.name),
+  ]);
+  const seen = actual.findings
+    .filter((f) => f.family && f.family.want && !f.family.got.includes(f.family.want))
+    .filter((f) => !known.has(f.name))
+    .map((f) => ({
+      name: f.name,
+      slot: f.family!.want as string,
+      roles: f.roles,
+      paints: f.paints?.properties ?? [],
+    }))
+    .sort((a, b) => a.name.localeCompare(b.name));
+
+  expect(seen.length).toBeGreaterThan(0);
+  expect(seen).toEqual(baseline.familyMismatches
+    .map(({ decision, why, ...rest }: FamilyMismatch) => rest));
+});
+
+test('every banked family mismatch carries a decision and a reason', () => {
+  const undecided = baseline.familyMismatches
+    .filter((f: FamilyMismatch) => !f.decision || !FAMILY_DECISIONS.includes(f.decision) || !f.why?.trim())
+    .map((f: FamilyMismatch) => f.name);
+  expect(undecided).toEqual([]);
+});
+
+/*
+ * The rung. Until 17.09 the comparison asked only whether the package uses our role for our slot
+ * ANYWHERE in the component, so `$text-editor-line-focused` read `agrees` while the package names
+ * `content-primary` for that line at focus and `content` only at hover. The state dimension was
+ * parsed into `byState` from the first run and never read.
+ *
+ * Narrow on purpose: it fires only when the package uses OUR role for OUR slot at a DIFFERENT rung,
+ * which is a ladder shifted by a step. The looser reading - our role simply absent from their rung -
+ * fires 185 times and mostly reports that our anatomy is richer than theirs.
+ */
+test('roles that sit on the package\'s rung for another state are the reviewed ones', () => {
+  const seen = actual.findings
+    .filter((f) => f.rung)
+    .map((f) => ({
+      name: f.name,
+      state: f.rung!.state,
+      roles: f.roles,
+      oursAt: f.rung!.oursAt,
+      want: f.rung!.want,
+    }))
+    .sort((a, b) => a.name.localeCompare(b.name));
+
+  expect(seen.length).toBeGreaterThan(0);
+  expect(seen).toEqual(baseline.rungs.map(({ decision, why, ...rest }: Rung) => rest));
+});
+
+test('every banked rung carries a decision and a reason', () => {
+  const undecided = baseline.rungs
+    .filter((r: Rung) => !r.decision || !RUNG_DECISIONS.includes(r.decision) || !r.why?.trim())
+    .map((r: Rung) => r.name);
+  expect(undecided).toEqual([]);
+});
+
+test('every banked slot mismatch carries a decision and a reason', () => {
+  const undecided = baseline.slotLies
+    .filter((o: SlotLie) => !o.decision || !SLOT_DECISIONS.includes(o.decision) || !o.why?.trim())
+    .map((o: SlotLie) => o.name);
+  expect(undecided).toEqual([]);
+});
+
+/*
+ * A state in the name that the eye cannot find. Read from the theme alone, so it answers for the
+ * 22 folders the package has never heard of as well: the question is whether the design system
+ * ships a role for the second state, not whether some other product models the widget.
+ */
+test('slots whose states resolve to one role are the reviewed ones', () => {
+  const seen = actual.ladders
+    .map((l) => ({ stem: l.stem, states: l.states, role: l.role }))
+    .sort((a, b) => a.stem.localeCompare(b.stem));
+  expect(seen).toEqual(baseline.ladders.map(({ decision, why, ...rest }: Ladder) => rest));
+});
+
+test('every banked ladder carries a decision and a reason', () => {
+  const undecided = baseline.ladders
+    .filter((l: Ladder) => !l.decision || !LADDER_DECISIONS.includes(l.decision) || !l.why?.trim())
+    .map((l: Ladder) => l.stem);
+  expect(undecided).toEqual([]);
+});
+
+/*
+ * Dark mode has no screenshot etalon and axe reads text only, so a role that is fine in light and
+ * wrong in dark has nothing watching it. This measures only pairs the bundle puts in one rule -
+ * no guess about which surface a text sits on - and skips alpha bridges and disabled selectors,
+ * which would each invent a number nobody sees.
+ */
+test('text on its own background below AA is the reviewed set', () => {
+  const measured = actual.lowContrast
+    .map(({ selector, fgRole, bgRole, contrast }) => ({ selector, fgRole, bgRole, contrast }))
+    .sort((a, b) => a.selector.localeCompare(b.selector));
+  expect(measured).toEqual(baseline.contrast.map(({ decision, why, ...rest }: ContrastPair) => rest));
+});
+
+test('every banked contrast pair carries a decision and a reason', () => {
+  const undecided = baseline.contrast
+    .filter((c: ContrastPair) => !c.decision || !CONTRAST_DECISIONS.includes(c.decision) || !c.why?.trim())
+    .map((c: ContrastPair) => c.selector);
+  expect(undecided).toEqual([]);
+});
+
+/*
+ * The only check that asks about the theme as a whole rather than one declaration: does the same
+ * concept get the same role everywhere? Six components paint an invalid background six ways, three
+ * of them the identical colour spelled from three different families - nothing that reads one
+ * declaration at a time can see that.
+ */
+test('concepts painted with several roles are the reviewed ones', () => {
+  const seen = actual.concepts
+    .map(({ concept, roles, families, members }) => ({
+      concept,
+      roles,
+      families,
+      members: members.map(({ folder, role }) => ({ folder, role })),
+    }))
+    .sort((a, b) => a.concept.localeCompare(b.concept));
+  expect(seen).toEqual(baseline.concepts.map(({ decision, why, ...rest }: Concept) => rest));
+});
+
+test('every banked concept split carries a decision and a reason', () => {
+  const undecided = baseline.concepts
+    .filter((c: Concept) => !c.decision || !CONCEPT_DECISIONS.includes(c.decision) || !c.why?.trim())
+    .map((c: Concept) => c.concept);
+  expect(undecided).toEqual([]);
+});
+
+/*
+ * The one check that starts from the package rather than from our declarations. A whole family can
+ * be missing without any single declaration looking wrong - that is how the four focus roles stayed
+ * invisible until the component holding them was parsed at all. Exact equality both ways: a role
+ * leaving the list means the theme started using it, and that is a decision worth a diff.
+ */
+test('roles the package assigns and the theme never reads are the known ones', () => {
+  expect(actual.unusedRoles.capability.map((r) => r.role)).toEqual(baseline.unusedRoles.capability);
+  expect(actual.unusedRoles.stale.map((r) => r.role)).toEqual(baseline.unusedRoles.stale);
+});
+
+/*
+ * The pass above measures a foreground and a background only where one rule writes both. A state
+ * ladder never does: the focused rule repaints the fill and leaves the glyph to the rest rule, so
+ * the states where a value actually moves were the blind spot. It cost a wrong verdict once - the
+ * checked checkbox was banked as graphic-ok on 3.36, and the focused rung of the same element is
+ * 1.62 - which is why this is exact equality and not a ratchet.
+ */
+test('contrast lost across a state change is the reviewed set', () => {
+  const measured = actual.lowStatePairs
+    .map(({
+      bg, fg, fgRole, bgRole, contrast, selector,
+    }) => ({
+      bg, fg, fgRole, bgRole, contrast, selector,
+    }))
+    .sort((a, b) => (a.bg + a.selector).localeCompare(b.bg + b.selector));
+  const banked = baseline.statePairs.rows
+    .map(({
+      bg, fg, fgRole, bgRole, contrast, selector,
+    }: StatePair) => ({
+      bg, fg, fgRole, bgRole, contrast, selector,
+    }))
+    .sort((a: StatePair, b: StatePair) => (a.bg + a.selector).localeCompare(b.bg + b.selector));
+  expect(measured).toEqual(banked);
+});
+
+test('every cross-state pair carries a decision, and every design group a reason', () => {
+  const undecided = baseline.statePairs.rows
+    .filter((r: StatePair) => !r.decision || !STATE_PAIR_DECISIONS.includes(r.decision))
+    .map((r: StatePair) => r.bg);
+  expect(undecided).toEqual([]);
+
+  const groups = [...new Set(baseline.statePairs.rows
+    .filter((r: StatePair) => r.group)
+    .map((r: StatePair) => r.group as string) as string[])].sort();
+  expect(Object.keys(baseline.statePairs.groups).sort()).toEqual(groups);
+
+  const unreasoned = Object.entries(baseline.statePairs.groups)
+    .filter(([, g]) => !(g as { why?: string }).why?.trim())
+    .map(([key]) => key);
+  expect(unreasoned).toEqual([]);
+});
+
+/*
+ * Guards every other check in this file. The passes that read a painted property go silent when the
+ * bundle predates the source - a renamed variable is not found, so it reports no property, so it
+ * cannot contradict its slot. That is not hypothetical: renaming twenty-three names on 09.09 hid
+ * twenty-four declarations exactly this way, and the slot check looked like it had passed.
+ */
+test('every tier declaration is present in the bundle the checks read', () => {
+  expect(actual.summary.declarationsMissingFromBundle)
+    .toBe(baseline.bundleFreshness.declarationsMissingFromBundle);
+});
diff --git a/packages/devextreme-scss/tests/stylelint-rule.ts b/packages/devextreme-scss/tests/stylelint-rule.ts
index c8e8d5bafbf7..b402e245107b 100644
--- a/packages/devextreme-scss/tests/stylelint-rule.ts
+++ b/packages/devextreme-scss/tests/stylelint-rule.ts
@@ -15,13 +15,13 @@ const stylelintBin = join(packageRoot, 'node_modules', '.bin', 'stylelint');
 
 export const scss = (...rows: string[]): string => `${rows.join('\n')}\n`;
 
-export const createRunner = (pluginFile: string, ruleName: string): Runner => {
+export const createRunner = (pluginFile: string, ruleName: string, ruleOptions: unknown = true): Runner => {
   const fixture = mkdtempSync(join(tmpdir(), `${basename(pluginFile, '.mjs')}-`));
   const configPath = join(fixture, 'config.json');
   writeFileSync(configPath, JSON.stringify({
     customSyntax: require.resolve('postcss-scss', { paths: [require.resolve('stylelint-scss')] }),
     plugins: [join(packageRoot, 'tools', 'stylelint', pluginFile)],
-    rules: { [ruleName]: true },
+    rules: { [ruleName]: ruleOptions },
   }));
 
   const run = (name: string, source: string, fix: boolean): Result => {
diff --git a/packages/devextreme-scss/tests/theme-mode-scope.test.ts b/packages/devextreme-scss/tests/theme-mode-scope.test.ts
new file mode 100644
index 000000000000..d12e940d2bf5
--- /dev/null
+++ b/packages/devextreme-scss/tests/theme-mode-scope.test.ts
@@ -0,0 +1,132 @@
+/*
+ * Gate for the fluent-next theme-mode invariant: an element carrying `dx-theme-mode-light`,
+ * `-dark` or `-inverted` repaints itself and its subtree.
+ *
+ * It breaks silently, because a custom property is substituted where it is DECLARED, not where it
+ * is read: `:root { --dx-color-text: var(--dxds-color-content) }` computes on <html> and freezes
+ * at the bundle's mode, whatever class sits below. The declaration stays valid and only the colour
+ * is wrong, so nothing fails - 39 properties were in that state before this gate existed.
+ *
+ * Checked against the built bundle, not a list here: the three scopes declare the same names, and
+ * nothing reading one of those names is declared where a mode class cannot reach it. A declaration
+ * on a component root is fine and not flagged - that element may itself sit inside a scope.
+ */
+
+import { existsSync, readdirSync, readFileSync } from 'fs';
+import { join } from 'path';
+import postcss from 'postcss';
+
+const packageRoot = process.cwd();
+const artifactsCss = join(packageRoot, '..', 'devextreme', 'artifacts', 'css');
+
+const MODE_PROPERTY = '--dx-theme-mode';
+const MODE_SCOPES = ['light', 'dark', 'inverted'];
+const MODE_CLASS_PREFIX = '.dx-theme-mode-';
+
+const bundleNames = existsSync(artifactsCss)
+  ? readdirSync(artifactsCss).filter((name) => /^dx\.fluent-next\.[a-z0-9.]+\.css$/.test(name)).sort()
+  : [];
+
+if (!bundleNames.length) {
+  throw new Error(`no dx.fluent-next.*.css bundles found in ${artifactsCss} — the gate needs the `
+    + 'built theme; run `pnpm nx run devextreme-scss:build:themes` (the `test` target normally '
+    + 'does it for you)');
+}
+
+/** The compound a selector actually targets: `:where(.a) .b` -> `.b`, `:root` -> `:root`. */
+const subjectOf = (selector: string): string => selector.trim().split(/[\s>+~]+/).filter(Boolean).pop() ?? '';
+
+const modeScopesOf = (selector: string): string[] => MODE_SCOPES
+  .filter((scope) => subjectOf(selector) === `${MODE_CLASS_PREFIX}${scope}`);
+
+// A rule lands on the document element - the one place a mode class below it cannot reach.
+const isDocumentRoot = (selector: string): boolean => [':root', 'html'].includes(subjectOf(selector));
+
+// A rule can reach the root while also matching something else: `:root, .dx-button { … }` still
+// declares on <html>. So the question is whether ANY selector is the root, with no mode scope in
+// the same list to re-resolve it.
+const freezesOnDocumentRoot = (selectors: string[]): boolean => selectors.some(isDocumentRoot)
+  && !selectors.some((selector) => modeScopesOf(selector).length);
+
+interface BundleFacts {
+  scopeNames: Record<string, Set<string>>;
+  rootDeclarations: { property: string; reads: string[]; selector: string }[];
+  modeScopedNames: Set<string>;
+}
+
+const readBundle = (name: string): BundleFacts => {
+  const root = postcss.parse(readFileSync(join(artifactsCss, name), 'utf8'), { from: name });
+  const scopeNames: Record<string, Set<string>> = Object.fromEntries(
+    MODE_SCOPES.map((scope) => [scope, new Set<string>()]),
+  );
+  const rootDeclarations: BundleFacts['rootDeclarations'] = [];
+  const modeScopedNames = new Set<string>();
+
+  root.walkRules((rule) => {
+    const scopes = new Set(rule.selectors.flatMap(modeScopesOf));
+    const onDocumentRoot = freezesOnDocumentRoot(rule.selectors);
+
+    rule.each((node) => {
+      if (node.type !== 'decl' || !node.prop.startsWith('--')) {
+        return;
+      }
+
+      scopes.forEach((scope) => scopeNames[scope].add(node.prop));
+
+      if (scopes.size) {
+        modeScopedNames.add(node.prop);
+      }
+
+      if (onDocumentRoot) {
+        rootDeclarations.push({
+          property: node.prop,
+          reads: [...node.value.matchAll(/var\(\s*(--[\w-]+)/g)].map((match) => match[1]),
+          selector: rule.selector,
+        });
+      }
+    });
+  });
+
+  return { scopeNames, rootDeclarations, modeScopedNames };
+};
+
+// Frozen = declared on the document element and reading something a mode class redefines, whether
+// directly or through another such declaration - `box-shadow-md` over `color-shadow-key`.
+const frozenProperties = ({ rootDeclarations, modeScopedNames }: BundleFacts): string[] => {
+  const frozen = new Map<string, string>();
+  const tainted = new Set(modeScopedNames);
+
+  for (;;) {
+    const found = rootDeclarations.filter(({ property, reads }) => !tainted.has(property)
+      && reads.some((name) => tainted.has(name)));
+
+    if (!found.length) {
+      return [...frozen.keys()].sort();
+    }
+
+    found.forEach(({ property, selector, reads }) => {
+      tainted.add(property);
+      frozen.set(property, `${selector} { ${property}: … ${reads.find((name) => tainted.has(name)) ?? ''} … }`);
+    });
+  }
+};
+
+describe.each(bundleNames)('%s', (name) => {
+  const facts = readBundle(name);
+
+  test('the three mode scopes declare the same names', () => {
+    const [light, dark, inverted] = MODE_SCOPES.map((scope) => [...facts.scopeNames[scope]].sort());
+
+    expect(light.length).toBeGreaterThan(0);
+    expect(dark).toEqual(light);
+    expect(inverted).toEqual(light);
+  });
+
+  test(`every mode scope names its mode in ${MODE_PROPERTY}`, () => {
+    expect(MODE_SCOPES.filter((scope) => !facts.scopeNames[scope].has(MODE_PROPERTY))).toEqual([]);
+  });
+
+  test('nothing reading a mode-scoped value is declared on the document element', () => {
+    expect(frozenProperties(facts)).toEqual([]);
+  });
+});
diff --git a/packages/devextreme-scss/tests/tier-publish.test.ts b/packages/devextreme-scss/tests/tier-publish.test.ts
new file mode 100644
index 000000000000..ca647899d008
--- /dev/null
+++ b/packages/devextreme-scss/tests/tier-publish.test.ts
@@ -0,0 +1,481 @@
+/*
+ * The emitter of the fluent-next component tier (tools/naming/publish.mjs) and the pure module behind
+ * it (tools/naming/tier.ts), exercised on synthetic files so every case names one rule. The real tree
+ * is covered by tests/fluent-next-naming.test.ts, which reads the same module.
+ */
+
+import { execFileSync } from 'child_process';
+
+import { stripScssComments } from '../build/tokens/consumed-tokens';
+import {
+  type Registries, type SourceFile,
+  COLLECTOR_PATH, GENERATED_MARKER,
+  byCodepoint, parseLinksFile, planPublication, renderCollector, renderPublicFile, stalePaths,
+  tierRecords, useSpecFor,
+} from '../tools/naming/tier';
+
+const file = (path: string, raw: string): SourceFile => {
+  const segments = path.split('/');
+  return {
+    path,
+    folder: segments.length > 2 ? segments[1] : '',
+    raw,
+    stripped: stripScssComments(raw, path),
+  };
+};
+
+const registries = (overrides: Partial<Registries> = {}): Registries => ({
+  components: {
+    badge: 'badge', menu: 'menu', menuBase: 'menu', gridBase: 'grid', icons: 'icon', overlay: 'overlay',
+  },
+  declarationHome: { grid: 'gridBase', menu: 'menuBase', icon: 'icons' },
+  exemptFolders: {},
+  systemTier: ['common', 'typography'],
+  migrated: ['badge', 'menu', 'grid', 'icon', 'overlay', 'typography'],
+  rootSelectors: {
+    common: [':root'],
+    typography: [':root'],
+    icon: [':root'],
+    badge: ['.dx-badge'],
+    menu: ['.dx-menu', '.dx-menu-base'],
+    grid: ['.dx-datagrid', '.dx-treelist'],
+    overlay: ['.dx-overlay-wrapper'],
+  },
+  ...overrides,
+});
+
+const badge = (colors = '$badge-bg: ds.$color-primary;\n$badge-color: ds.$color-content;\n'): SourceFile[] => [
+  file('fluent-next/badge/_colors.scss', colors),
+  file('fluent-next/badge/_sizes.scss', '$badge-size: 16px;\n'),
+];
+
+const plan = (
+  themeFiles: SourceFile[],
+  existing: Record<string, string> = {},
+  overrides: Partial<Registries> = {},
+  baseFiles: SourceFile[] = [],
+) => planPublication(themeFiles, baseFiles, registries(overrides), new Map(Object.entries(existing)));
+
+const lines = (content: string): string[] => content.split('\n').filter((line) => line.startsWith('  --dx-'));
+
+// ---------------------------------------------------------------------------------------------
+// the generated file
+// ---------------------------------------------------------------------------------------------
+
+describe('_public.scss', () => {
+  test('the @use header names the modules that declare the projected variables, in codepoint order', () => {
+    expect(useSpecFor('fluent-next/badge/_public.scss', 'fluent-next/badge/_colors.scss')).toBe('colors');
+    expect(useSpecFor('fluent-next/gridBase/_public.scss', 'fluent-next/gridBase/layout/aiChat/_sizes.scss'))
+      .toBe('layout/aiChat/sizes');
+    expect(useSpecFor('fluent-next/tabs/_public.scss', 'fluent-next/tabs/variables/_colors.scss'))
+      .toBe('variables/colors');
+    expect(useSpecFor('fluent-next/menu/_public.scss', 'fluent-next/menuBase/_colors.scss')).toBe('../menuBase/colors');
+
+    const content = renderPublicFile('fluent-next/badge/_public.scss', [
+      { property: '--dx-badge-size', variable: '$badge-size', sources: ['fluent-next/badge/_sizes.scss'] },
+      { property: '--dx-badge-bg', variable: '$badge-bg', sources: ['fluent-next/badge/_colors.scss'] },
+    ], false);
+    expect(content.split('\n').slice(0, 4)).toEqual([
+      GENERATED_MARKER,
+      '@use "colors" as *;',
+      '@use "sizes" as *;',
+      '',
+    ]);
+  });
+
+  test('a module with no eligible declarations is not imported', () => {
+    const files = [...badge(), file('fluent-next/badge/_variables.scss', '$badge-flag: true;\n')];
+    const content = plan(files).files.get('fluent-next/badge/_public.scss')!;
+    expect(content).not.toContain('@use "variables"');
+    expect(content).toContain('@use "colors" as *;');
+    expect(content).toContain('@use "sizes" as *;');
+  });
+
+  test('the body is sorted by codepoint', () => {
+    const content = renderPublicFile('fluent-next/badge/_public.scss', [
+      { property: '--dx-badge-bga', variable: '$badge-bga', sources: ['fluent-next/badge/_colors.scss'] },
+      { property: '--dx-badge-bg-z', variable: '$badge-bg-z', sources: ['fluent-next/badge/_colors.scss'] },
+      { property: '--dx-badge-bg', variable: '$badge-bg', sources: ['fluent-next/badge/_colors.scss'] },
+      { property: '--dx-badge-1', variable: '$badge-1', sources: ['fluent-next/badge/_colors.scss'] },
+    ], false);
+    expect(lines(content)).toEqual([
+      '  --dx-badge-1: #{$badge-1};',
+      '  --dx-badge-bg: #{$badge-bg};',
+      '  --dx-badge-bg-z: #{$badge-bg-z};',
+      '  --dx-badge-bga: #{$badge-bga};',
+    ]);
+    expect(['--dx-badge-bga', '--dx-badge-bg-z', '--dx-badge-1'].sort(byCodepoint))
+      .toEqual(['--dx-badge-1', '--dx-badge-bg-z', '--dx-badge-bga']);
+  });
+
+  test('the file has the marker, two-space indentation, and a trailing newline', () => {
+    const content = plan(badge()).files.get('fluent-next/badge/_public.scss')!;
+    expect(content).toBe([
+      GENERATED_MARKER,
+      '@use "colors" as *;',
+      '@use "sizes" as *;',
+      '',
+      '@mixin publish {',
+      '  --dx-badge-bg: #{$badge-bg};',
+      '  --dx-badge-color: #{$badge-color};',
+      '  --dx-badge-size: #{$badge-size};',
+      '}',
+      '',
+    ].join('\n'));
+  });
+
+  test('the links file is included only when it exists', () => {
+    const without = plan(badge()).files.get('fluent-next/badge/_public.scss')!;
+    expect(without).not.toContain('links');
+
+    const links = { 'fluent-next/badge/_public-links.scss': '@mixin publish {\n  --dx-badge-bg-hovered: var(--dx-badge-bg);\n}\n' };
+    const withLinks = plan(badge(), links).files.get('fluent-next/badge/_public.scss')!;
+    expect(withLinks).toContain('@use "public-links" as links;');
+    // stylelint wants the empty line between the declarations and the at-rule
+    expect(withLinks.split('\n').slice(-5)).toEqual(['  --dx-badge-size: #{$badge-size};', '', '  @include links.publish();', '}', '']);
+  });
+
+  test('a component whose values are all excluded still publishes its links', () => {
+    const files = [file('fluent-next/badge/_colors.scss', '$badge-icon: data-uri("svg", "<svg/>");\n')];
+    const links = { 'fluent-next/badge/_public-links.scss': '@mixin publish {\n  --dx-badge-fg: var(--dx-color-content);\n}\n' };
+    const common = [file('fluent-next/common/_colors.scss', '$color-content: #000;\n')];
+    const result = plan([...files, ...common], links);
+    expect(result.problems).toEqual([]);
+    expect(result.files.get('fluent-next/badge/_public.scss')).toBe([
+      GENERATED_MARKER,
+      '@use "public-links" as links;',
+      '',
+      '@mixin publish {',
+      '  @include links.publish();',
+      '}',
+      '',
+    ].join('\n'));
+  });
+});
+
+// ---------------------------------------------------------------------------------------------
+// eligibility — one rule per case, through the shared tierRecords
+// ---------------------------------------------------------------------------------------------
+
+describe('eligibility', () => {
+  const reasons = (files: SourceFile[], wiring: string[] = []) => Object.fromEntries(
+    [...tierRecords(files, registries(), new Set(wiring))].map(([variable, { reason }]) => [variable, reason]),
+  );
+
+  test('an ordinary declaration is projected', () => {
+    expect(reasons(badge())).toEqual({ '$badge-bg': null, '$badge-color': null, '$badge-size': null });
+  });
+
+  test('data-uri: a direct call, a feeder mixin, a commented-out feeder, and a reference to any of them', () => {
+    const files = [
+      file('fluent-next/badge/_colors.scss', [
+        '$badge-icon: data-uri("svg", "<svg/>");',
+        '$badge-icon-hovered: $badge-icon;',
+        '$badge-arrow: #000;',
+        '$badge-arrow-active: color.change($badge-arrow, $alpha: 0.5);',
+        '$badge-check: #fff;',
+        '$badge-bg: #eee;',
+      ].join('\n')),
+      file('fluent-next/badge/_mixins.scss', [
+        '.dx-badge { @include icons-mixin($badge-arrow); }',
+        '// .dx-badge-check { @include icon-colored($badge-check); }',
+      ].join('\n')),
+    ];
+    expect(reasons(files)).toEqual({
+      '$badge-icon': 'data-uri',
+      '$badge-icon-hovered': 'data-uri',
+      '$badge-arrow': 'data-uri',
+      '$badge-arrow-active': 'data-uri',
+      '$badge-check': 'data-uri',
+      '$badge-bg': null,
+    });
+  });
+
+  test('base wiring is excluded, both shapes', () => {
+    const wiring = ['$badge-radius', '$fluent-badge-padding'];
+    const files = [file('fluent-next/badge/_sizes.scss', [
+      '$badge-radius: 4px !default;',
+      '$fluent-badge-padding: 2px;',
+      '$badge-size: 16px;',
+    ].join('\n'))];
+    expect(reasons(files, wiring)).toEqual({
+      '$badge-radius': 'base-wiring',
+      '$fluent-badge-padding': 'base-wiring',
+      '$badge-size': null,
+    });
+  });
+
+  test('a value a custom property cannot carry is excluded with its reason', () => {
+    const files = [file('fluent-next/badge/_sizes.scss', [
+      '$badge-a: inherit;',
+      '$badge-b: 1px !important;',
+      '$badge-c: null;',
+      '$badge-d: true;',
+      '$badge-e: false;',
+      '$badge-f: revert-layer;',
+    ].join('\n'))];
+    expect(reasons(files)).toEqual({
+      '$badge-a': 'css-wide-keyword',
+      '$badge-b': 'important',
+      '$badge-c': 'null',
+      '$badge-d': 'sass-flag',
+      '$badge-e': 'sass-flag',
+      '$badge-f': 'css-wide-keyword',
+    });
+  });
+
+  test('only the declaration files of the component\'s folders are read', () => {
+    const files = [
+      ...badge(),
+      file('fluent-next/badge/_index.scss', '$badge-local: 1px;\n'),
+      file('fluent-next/unknown/_colors.scss', '$unknown-bg: #000;\n'),
+    ];
+    expect(Object.keys(reasons(files)).sort()).toEqual(['$badge-bg', '$badge-color', '$badge-size']);
+  });
+});
+
+// ---------------------------------------------------------------------------------------------
+// the plan
+// ---------------------------------------------------------------------------------------------
+
+describe('planPublication', () => {
+  test('a component gets a file when it has something to publish, and only then', () => {
+    const files = [
+      ...badge(),
+      file('fluent-next/icons/_colors.scss', '$icon-arrow: data-uri("svg", "<svg/>");\n'),
+      file('fluent-next/overlay/_index.scss', '.dx-overlay-wrapper { z-index: 1; }\n'),
+      file('fluent-next/common/_sizes.scss', '$size-unit: 4px;\n'),
+      file('fluent-next/typography/_sizes.scss', '$typography-line: 20px;\n'),
+    ];
+    const result = plan(files);
+    expect(result.problems).toEqual([]);
+    expect([...result.files.keys()].sort(byCodepoint)).toEqual([
+      COLLECTOR_PATH,
+      'fluent-next/badge/_public.scss',
+      'fluent-next/common/_public.scss',
+      'fluent-next/typography/_public.scss',
+    ]);
+    expect(result.created).toEqual([
+      'fluent-next/badge/_public.scss',
+      'fluent-next/common/_public.scss',
+      'fluent-next/typography/_public.scss',
+    ]);
+  });
+
+  test('a multi-folder component publishes from the folder that declares its variables', () => {
+    const files = [
+      file('fluent-next/menu/_colors.scss', '$menu-bg: #fff;\n'),
+      file('fluent-next/menuBase/_colors.scss', ''),
+    ];
+    const result = plan(files);
+    expect(result.problems).toEqual([]);
+    expect(result.files.has('fluent-next/menu/_public.scss')).toBe(true);
+    expect(result.files.has('fluent-next/menuBase/_public.scss')).toBe(false);
+  });
+
+  test('removing a variable removes its projection', () => {
+    const before = plan(badge()).files.get('fluent-next/badge/_public.scss')!;
+    const after = plan(badge('$badge-bg: ds.$color-primary;\n')).files.get('fluent-next/badge/_public.scss')!;
+    expect(lines(before)).toContain('  --dx-badge-color: #{$badge-color};');
+    expect(lines(after)).toEqual(['  --dx-badge-bg: #{$badge-bg};', '  --dx-badge-size: #{$badge-size};']);
+  });
+
+  test('the collector groups folders by selector list, the document root first', () => {
+    const files = [
+      ...badge(),
+      file('fluent-next/menu/_colors.scss', '$menu-bg: #fff;\n'),
+      file('fluent-next/gridBase/_sizes.scss', '$grid-row-height: 32px;\n'),
+      file('fluent-next/common/_sizes.scss', '$size-unit: 4px;\n'),
+      file('fluent-next/typography/_sizes.scss', '$typography-line: 20px;\n'),
+    ];
+    expect(plan(files).files.get(COLLECTOR_PATH)).toBe([
+      GENERATED_MARKER,
+      '@use "badge/public" as badgePublic;',
+      '@use "common/public" as commonPublic;',
+      '@use "gridBase/public" as gridBasePublic;',
+      '@use "menu/public" as menuPublic;',
+      '@use "typography/public" as typographyPublic;',
+      '',
+      ':root {',
+      '  @include commonPublic.publish();',
+      '  @include typographyPublic.publish();',
+      '}',
+      '',
+      '.dx-badge {',
+      '  @include badgePublic.publish();',
+      '}',
+      '',
+      '.dx-datagrid,',
+      '.dx-treelist {',
+      '  @include gridBasePublic.publish();',
+      '}',
+      '',
+      '.dx-menu,',
+      '.dx-menu-base {',
+      '  @include menuPublic.publish();',
+      '}',
+      '',
+    ].join('\n'));
+  });
+
+  test('typography is published once although it is both migrated and system tier', () => {
+    const files = [file('fluent-next/typography/_sizes.scss', '$typography-line: 20px;\n')];
+    const collector = plan(files).files.get(COLLECTOR_PATH)!;
+    expect(collector.match(/typographyPublic\.publish/g)).toHaveLength(1);
+    expect(renderCollector([
+      { folder: 'typography', selectors: [':root'] },
+    ]).match(/@use/g)).toHaveLength(1);
+  });
+
+  test('a link may point at the same component or at a :root publication', () => {
+    const files = [
+      ...badge(),
+      file('fluent-next/common/_colors.scss', '$color-content: #000;\n'),
+    ];
+    const links = {
+      'fluent-next/badge/_public-links.scss': [
+        '@mixin publish {',
+        '  --dx-badge-bg-hovered: var(--dx-badge-bg);',
+        '  --dx-badge-fg: var(--dx-color-content);',
+        '}',
+        '',
+      ].join('\n'),
+    };
+    expect(plan(files, links).problems).toEqual([]);
+  });
+
+  describe('problems stop the run and nothing is written', () => {
+    const links = (body: string) => ({
+      'fluent-next/badge/_public-links.scss': `@mixin publish {\n${body}\n}\n`,
+    });
+
+    test('a link to a target nothing publishes', () => {
+      const result = plan(badge(), links('  --dx-badge-bg-hovered: var(--dx-badge-gone);'));
+      expect(result.problems).toEqual([
+        'fluent-next/badge/_public-links.scss: --dx-badge-bg-hovered links to --dx-badge-gone, which nothing publishes',
+      ]);
+      expect(result.files.size).toBe(0);
+    });
+
+    test('a link to a target on another component\'s root', () => {
+      const files = [...badge(), file('fluent-next/menu/_colors.scss', '$menu-bg: #fff;\n')];
+      expect(plan(files, links('  --dx-badge-bg-hovered: var(--dx-menu-bg);')).problems).toEqual([
+        'fluent-next/badge/_public-links.scss: --dx-badge-bg-hovered links to --dx-menu-bg, published on another component\'s root — publish the value instead',
+      ]);
+    });
+
+    test('a link that shadows an eligible declaration', () => {
+      expect(plan(badge(), links('  --dx-badge-color: var(--dx-badge-bg);')).problems).toEqual([
+        'fluent-next/badge/_public-links.scss: --dx-badge-color is a link, but $badge-color is declared and eligible — remove one of the two',
+      ]);
+    });
+
+    test('a link to itself', () => {
+      expect(plan(badge(), links('  --dx-badge-x: var(--dx-badge-x);')).problems).toEqual([
+        'fluent-next/badge/_public-links.scss: --dx-badge-x links to itself',
+      ]);
+    });
+
+    test('a name published by two components', () => {
+      const files = [...badge(), file('fluent-next/menu/_colors.scss', '$menu-bg: #fff;\n')];
+      const result = plan(files, {
+        'fluent-next/menu/_public-links.scss': '@mixin publish {\n  --dx-badge-bg: var(--dx-menu-bg);\n}\n',
+      });
+      expect(result.problems).toEqual(['--dx-badge-bg is published by both badge and menu']);
+    });
+
+    test('a links file holding anything but links', () => {
+      const result = plan(badge(), links('  --dx-badge-bg-hovered: var(--dx-badge-bg);\n  --dx-badge-copy: #{$badge-bg};\n  --dx-badge-bg-hovered: var(--dx-badge-bg);'));
+      expect(result.problems).toEqual([
+        'fluent-next/badge/_public-links.scss:3: a links file may only hold `--dx-a: var(--dx-b);` lines',
+        'fluent-next/badge/_public-links.scss:4: --dx-badge-bg-hovered is linked twice',
+      ]);
+    });
+
+    test('a publishing component without root selectors', () => {
+      const result = plan(badge(), {}, { rootSelectors: { common: [':root'], typography: [':root'] } });
+      expect(result.problems).toEqual([
+        'badge publishes from badge/ but has no rootSelectors — add it to derive-registries.mjs OVERRIDES',
+      ]);
+    });
+
+    test('a _public.scss in a folder that is not the component\'s home', () => {
+      const files = [
+        file('fluent-next/menu/_colors.scss', '$menu-bg: #fff;\n'),
+        file('fluent-next/menuBase/_colors.scss', ''),
+      ];
+      const result = plan(files, { 'fluent-next/menuBase/_public.scss': '@mixin publish {}\n' });
+      expect(result.problems).toEqual([
+        'fluent-next/menuBase/_public.scss: menu publishes from menu/ — remove this copy',
+      ]);
+    });
+
+    test('a _public.scss whose component has nothing left to publish is reported, not deleted', () => {
+      const files = [file('fluent-next/badge/_colors.scss', '$badge-icon: data-uri("svg", "<svg/>");\n')];
+      const result = plan(files, { 'fluent-next/badge/_public.scss': '@mixin publish {}\n' });
+      expect(result.problems).toEqual([
+        'fluent-next/badge/_public.scss: badge has nothing left to publish — remove the file by hand',
+      ]);
+      expect(result.files.size).toBe(0);
+    });
+
+    test('a _public.scss of a folder that is not a publishing component', () => {
+      const result = plan(badge(), { 'fluent-next/probe/_public.scss': '@mixin publish {}\n' });
+      expect(result.problems).toEqual([
+        'fluent-next/probe/_public.scss: probe is not a publishing component — remove the file or register the component',
+      ]);
+    });
+
+    test('declarations of one component spread over two folders', () => {
+      const files = [
+        file('fluent-next/menu/_colors.scss', '$menu-bg: #fff;\n'),
+        file('fluent-next/menuBase/_colors.scss', '$menu-item-bg: #eee;\n'),
+      ];
+      expect(plan(files).problems).toEqual([
+        'menu: variables are declared in several folders (menu, menuBase) — one home per component',
+      ]);
+    });
+  });
+
+  test('--check: stale paths are the files whose bytes differ, and a plan over its own output is empty', () => {
+    const first = plan(badge());
+    expect(stalePaths(first, new Map())).toEqual([COLLECTOR_PATH, 'fluent-next/badge/_public.scss']);
+
+    const committed = Object.fromEntries(first.files);
+    const second = plan(badge(), committed);
+    expect(second.problems).toEqual([]);
+    expect(second.created).toEqual([]);
+    expect(stalePaths(second, new Map(Object.entries(committed)))).toEqual([]);
+
+    const edited = { ...committed, 'fluent-next/badge/_public.scss': `${committed['fluent-next/badge/_public.scss']}\n` };
+    expect(stalePaths(plan(badge(), edited), new Map(Object.entries(edited)))).toEqual(['fluent-next/badge/_public.scss']);
+  });
+});
+
+describe('parseLinksFile', () => {
+  test('reads whole-value links and nothing else', () => {
+    const parsed = parseLinksFile('x/_public-links.scss', [
+      '@use "colors" as *;',
+      '@mixin publish {',
+      '  --dx-a-b: var(--dx-a-c);',
+      '  --dx-a-d: var(--dx-a-c) !important;',
+      '  --dx-a-e: #{$a-e};',
+      '}',
+    ].join('\n'));
+    expect([...parsed.links]).toEqual([['--dx-a-b', '--dx-a-c']]);
+    expect(parsed.problems).toEqual([
+      'x/_public-links.scss:4: a links file may only hold `--dx-a: var(--dx-b);` lines',
+      'x/_public-links.scss:5: a links file may only hold `--dx-a: var(--dx-b);` lines',
+    ]);
+  });
+});
+
+// the shell around the module: a .ts import from .mjs, registries.json, the walk — on the real tree
+test('publish.mjs --check passes on the committed tree', () => {
+  const output = execFileSync(process.execPath, ['tools/naming/publish.mjs', '--check'], {
+    cwd: process.cwd(),
+    encoding: 'utf8',
+    stdio: ['ignore', 'pipe', 'pipe'],
+  });
+  expect(output).toMatch(/^component tier is up to date \(\d+ files\)\n$/);
+});
diff --git a/packages/devextreme-scss/tests/tier-values.test.ts b/packages/devextreme-scss/tests/tier-values.test.ts
new file mode 100644
index 000000000000..f1498291597b
--- /dev/null
+++ b/packages/devextreme-scss/tests/tier-values.test.ts
@@ -0,0 +1,66 @@
+import { readFileSync, readdirSync, existsSync } from 'fs';
+import { join } from 'path';
+
+const packageRoot = process.cwd();
+const artifactsCss = join(packageRoot, '..', 'devextreme', 'artifacts', 'css');
+
+const bundleNames = existsSync(artifactsCss)
+  ? readdirSync(artifactsCss).filter((n) => /^dx\..*\.css$/.test(n)).sort()
+  : [];
+
+if (!bundleNames.length) {
+  throw new Error(`no dx.*.css bundles found in ${artifactsCss} — the gate needs the built themes; `
+    + 'run `pnpm nx run devextreme-scss:build:themes`');
+}
+
+const NOT_A_VALUE = /(--dx[a-z0-9-]*)\s*:\s*(false|true|null)\s*[;}]/g;
+const EMPTY_VALUE = /(--dx[a-z0-9-]*)\s*:\s*[;}]/g;
+
+const scan = (pattern: RegExp): string[] => bundleNames.flatMap((name) => {
+  const css = readFileSync(join(artifactsCss, name), 'utf8');
+  return [...css.matchAll(pattern)].map((m) => `${name}: ${m[1]}: ${m[2] ?? '(empty)'}`);
+});
+
+test('no tier variable ships a Sass literal instead of a value', () => {
+  expect([...new Set(scan(NOT_A_VALUE))]).toEqual([]);
+});
+
+test('no tier variable ships an empty value', () => {
+  expect([...new Set(scan(EMPTY_VALUE))]).toEqual([]);
+});
+
+const resolve = (css: string, value: string, depth = 0): string => {
+  const link = /^var\(\s*(--[a-z0-9-]+)\s*\)$/.exec(value.trim());
+  if (!link || depth > 5) return value.trim();
+  const target = new RegExp(`${link[1]}\\s*:\\s*([^;}]*)`).exec(css);
+  return target ? resolve(css, target[1], depth + 1) : value.trim();
+};
+
+const componentOpacities = (css: string): Map<string, string> => {
+  const found = new Map<string, string>();
+  [...css.matchAll(/(--dx-[a-z0-9-]*opacity[a-z0-9-]*)\s*:\s*([^;}]*)/g)]
+    .forEach((m) => found.set(m[1], m[2].trim()));
+  return found;
+};
+
+test('no component-tier opacity is set to 1', () => {
+  const found = bundleNames.flatMap((name) => {
+    const css = readFileSync(join(artifactsCss, name), 'utf8');
+    return [...componentOpacities(css)]
+      .filter(([, value]) => ['1', '1.0'].includes(resolve(css, value)))
+      .map(([variable]) => `${name}: ${variable}`);
+  });
+
+  expect(found).toEqual([]);
+});
+
+test('every component-tier opacity is read by something', () => {
+  const found = bundleNames.flatMap((name) => {
+    const css = readFileSync(join(artifactsCss, name), 'utf8');
+    return [...componentOpacities(css).keys()]
+      .filter((variable) => !css.includes(`var(${variable}`))
+      .map((variable) => `${name}: ${variable}`);
+  });
+
+  expect(found).toEqual([]);
+});
diff --git a/packages/devextreme-scss/tests/tokens-report.test.ts b/packages/devextreme-scss/tests/tokens-report.test.ts
new file mode 100644
index 000000000000..dd93c9c5cb10
--- /dev/null
+++ b/packages/devextreme-scss/tests/tokens-report.test.ts
@@ -0,0 +1,403 @@
+import {
+  diffGenerated,
+  diffNames,
+  findLostConsumed,
+  parseDeclarations,
+  renderPreamble,
+  renderReport,
+  renderTerminal,
+  type GeneratedOutput,
+  type Report,
+} from '../tools/tokens/report';
+
+const declarations = (entries: Record<string, string>): Map<string, string> => new Map(
+  Object.entries(entries),
+);
+
+const generated = (files: Record<string, Record<string, string>>): GeneratedOutput => new Map(
+  Object.entries(files).map(([file, entries]) => [file, declarations(entries)]),
+);
+
+const refs = (file: string, count: number): { file: string; name: string }[] => Array.from(
+  { length: count },
+  (_, index) => ({ file, name: `--dxds-${file.replace('.scss', '')}-${index}` }),
+);
+
+/*
+ * One section of the terminal view as data. The layout is spelled out here and nowhere else, so an
+ * expectation can be about what the section says rather than about how many spaces a line starts
+ * with — and it still fails when the layout moves, because a tally printed at the entry indent
+ * parses as the last file's entry and leaves `omitted` at zero.
+ */
+const grouped = (rendered: string, heading: string): {
+  files: { file: string; names: string[] }[];
+  omitted: number;
+  filesNotShown: number;
+} => {
+  const lines = rendered.split('\n');
+  const start = lines.indexOf(heading);
+
+  if (start === -1) {
+    throw new Error(`no section headed ${heading}`);
+  }
+
+  const files: { file: string; names: string[] }[] = [];
+  let omitted = 0;
+  let filesNotShown = 0;
+
+  lines.slice(start + 1, lines.indexOf('', start + 1)).forEach((line) => {
+    const tally = line.match(/^ {2}… and (\d+) more(?:, (\d+) file\(s\) not shown)?$/);
+    const current = files.at(-1);
+
+    if (tally) {
+      omitted = Number(tally[1]);
+      filesNotShown = Number(tally[2] ?? 0);
+    } else if (!line.startsWith('    ')) {
+      files.push({ file: line.trim(), names: [] });
+    } else if (current) {
+      /* An entry line carries the name first; a value change pads it out to the column width. */
+      current.names.push(line.trim().split(/\s{2,}/)[0]);
+    } else {
+      throw new Error(`entry with no file above it: ${line}`);
+    }
+  });
+
+  return { files, omitted, filesNotShown };
+};
+
+const report = (overrides: Partial<Report> = {}): Report => ({
+  package: '@devexpress/design-tokens-internal',
+  versionBefore: '262.23.0',
+  versionAfter: '262.24.0',
+  countBefore: 2,
+  countAfter: 3,
+  names: { added: [], removed: [] },
+  lostConsumed: [],
+  output: { changed: [], gone: [], appeared: [] },
+  ...overrides,
+});
+
+describe('parseDeclarations', () => {
+  it('reads every declaration of a generated file, minified or not', () => {
+    expect([...parseDeclarations(':root {\n  --dxds-color-bg: #242424;\n}\n')]).toEqual([
+      ['--dxds-color-bg', '#242424'],
+    ]);
+    expect([...parseDeclarations(':root{--dxds-a:1rem;--dxds-b:2rem}')]).toEqual([
+      ['--dxds-a', '1rem'],
+      ['--dxds-b', '2rem'],
+    ]);
+  });
+
+  it('keeps a reference as the value but does not mistake a read for a declaration', () => {
+    const parsed = parseDeclarations(
+      '--dxds-color-bg: var(--dxds-neutral-250);\ncolor: var(--dxds-color-content);',
+    );
+
+    expect([...parsed]).toEqual([['--dxds-color-bg', 'var(--dxds-neutral-250)']]);
+  });
+
+  it('ignores properties outside the token namespace', () => {
+    expect([...parseDeclarations('--dx-button-bg: red;\ncolor: blue;')]).toEqual([]);
+  });
+});
+
+describe('diffNames', () => {
+  it('reports what appeared and what is gone, sorted and deduplicated', () => {
+    expect(diffNames(['b:x', 'a:y', 'a:y'], ['a:y', 'c:z'])).toEqual({
+      added: ['c:z'],
+      removed: ['b:x'],
+    });
+  });
+
+  it('says nothing when the package did not move', () => {
+    expect(diffNames(['a', 'b'], ['b', 'a'])).toEqual({ added: [], removed: [] });
+  });
+});
+
+describe('findLostConsumed', () => {
+  it('lists the names the theme reads that the package no longer offers', () => {
+    expect(findLostConsumed(['color-bg', 'spacing-40'], new Set(['spacing-40']))).toEqual([
+      'color-bg',
+    ]);
+  });
+
+  it('is empty when every consumed name survived', () => {
+    expect(findLostConsumed(['color-bg'], new Set(['color-bg', 'spacing-40']))).toEqual([]);
+  });
+});
+
+describe('diffGenerated', () => {
+  it('separates a moved value from a name that left and a name that arrived', () => {
+    const before = generated({ 'dark.scss': { '--dxds-a': '1rem', '--dxds-b': '2rem' } });
+    const after = generated({ 'dark.scss': { '--dxds-a': '3rem', '--dxds-c': '4rem' } });
+
+    expect(diffGenerated(before, after)).toEqual({
+      changed: [{ file: 'dark.scss', name: '--dxds-a', was: '1rem', now: '3rem' }],
+      gone: [{ file: 'dark.scss', name: '--dxds-b' }],
+      appeared: [{ file: 'dark.scss', name: '--dxds-c' }],
+    });
+  });
+
+  it('counts a whole file as gone or arrived', () => {
+    const before = generated({ 'dropped.scss': { '--dxds-a': '1rem' } });
+    const after = generated({ 'added.scss': { '--dxds-b': '2rem' } });
+
+    expect(diffGenerated(before, after)).toEqual({
+      changed: [],
+      gone: [{ file: 'dropped.scss', name: '--dxds-a' }],
+      appeared: [{ file: 'added.scss', name: '--dxds-b' }],
+    });
+  });
+
+  it('holds its peace when nothing moved', () => {
+    const output = generated({ 'light.scss': { '--dxds-a': '1rem' } });
+
+    expect(diffGenerated(output, generated({ 'light.scss': { '--dxds-a': '1rem' } }))).toEqual({
+      changed: [],
+      gone: [],
+      appeared: [],
+    });
+  });
+
+  /* Two modes declare the same name, and a value moving in one of them is not the other's news. */
+  it('keeps files apart and orders the findings by file, then by name', () => {
+    const before = generated({
+      'light.scss': { '--dxds-a': '1rem' },
+      'dark.scss': { '--dxds-b': '2rem', '--dxds-a': '1rem' },
+    });
+    const after = generated({
+      'light.scss': { '--dxds-a': '1rem' },
+      'dark.scss': { '--dxds-b': '9rem', '--dxds-a': '8rem' },
+    });
+
+    expect(diffGenerated(before, after).changed).toEqual([
+      { file: 'dark.scss', name: '--dxds-a', was: '1rem', now: '8rem' },
+      { file: 'dark.scss', name: '--dxds-b', was: '2rem', now: '9rem' },
+    ]);
+  });
+});
+
+describe('renderReport', () => {
+  it('opens with the versions and the counts', () => {
+    expect(renderReport(report())).toContain(
+      '# @devexpress/design-tokens-internal: 262.23.0 → 262.24.0',
+    );
+    expect(renderReport(report())).toContain('| tokens | 2 | 3 |');
+  });
+
+  /* Nothing moved from one version to another when only one version is involved. */
+  it('heads a run over an unchanged version as a state, not a transition', () => {
+    const rendered = renderReport(report({ versionBefore: '262.23.0', versionAfter: '262.23.0' }));
+
+    expect(rendered).toContain('# @devexpress/design-tokens-internal 262.23.0');
+    expect(rendered).not.toContain('→');
+  });
+
+  it('marks an empty section instead of leaving it blank', () => {
+    expect(renderReport(report())).toContain('## Values that moved in the generated output (0)\n\n_none_');
+  });
+
+  it('prints a moved value with both sides', () => {
+    const rendered = renderReport(report({
+      output: {
+        changed: [{ file: 'dark.scss', name: '--dxds-a', was: '1rem', now: '3rem' }],
+        gone: [],
+        appeared: [],
+      },
+    }));
+
+    expect(rendered).toContain('- `dark.scss`: `--dxds-a`\n  - was: `1rem`\n  - now: `3rem`');
+  });
+
+  it('says what a lost token costs, in the words of the build that will refuse it', () => {
+    expect(renderReport(report({ lostConsumed: ['color-bg'] })))
+      .toContain('- `color-bg` — the token build will refuse to run');
+  });
+
+  /* The closing line is the call to re-record etalons: it belongs to runs that changed pixels. */
+  it('adds the etalon warning only when something moved or left', () => {
+    const warning = 'etalon screenshots';
+
+    expect(renderReport(report())).not.toContain(warning);
+    expect(renderReport(report({ names: { added: ['a'], removed: ['b'] } }))).not.toContain(warning);
+    expect(renderReport(report({
+      output: {
+        changed: [{ file: 'dark.scss', name: '--dxds-a', was: '1rem', now: '3rem' }],
+        gone: [],
+        appeared: [],
+      },
+    }))).toContain(warning);
+    expect(renderReport(report({
+      output: { changed: [], gone: [{ file: 'dark.scss', name: '--dxds-a' }], appeared: [] },
+    }))).toContain(warning);
+  });
+
+  /* A name that only arrived costs nothing to look at, so it must not raise the alarm. */
+  it('treats an added name as free', () => {
+    expect(renderReport(report({
+      output: { changed: [], gone: [], appeared: [{ file: 'dark.scss', name: '--dxds-c' }] },
+    }))).not.toContain('etalon screenshots');
+  });
+});
+
+describe('renderTerminal', () => {
+  const change = (name: string, file = 'dark.scss') => ({ file, name, was: '1rem', now: '2rem' });
+
+  it('leads with the versions and the size of the move', () => {
+    const rendered = renderTerminal(report({
+      countBefore: 16822,
+      countAfter: 17004,
+      names: { added: ['a', 'b'], removed: ['c'] },
+    }));
+
+    expect(rendered).toContain('@devexpress/design-tokens-internal 262.23.0 → 262.24.0');
+    expect(rendered).toContain('tokens 16822 → 17004  (+2 −1)');
+  });
+
+  /* Four empty sections are what makes the markdown unreadable in a terminal. */
+  it('says only what happened, and says so when nothing did', () => {
+    const quiet = renderTerminal(report());
+
+    expect(quiet).toContain('nothing moved in the generated output');
+    expect(quiet).not.toContain('values that moved');
+    expect(quiet).not.toContain('gone from the generated output');
+  });
+
+  it('names the file once and lines the names up under it', () => {
+    const rendered = renderTerminal(report({
+      output: {
+        changed: [change('--dxds-a'), change('--dxds-longer-name'), change('--dxds-b', 'light.scss')],
+        gone: [],
+        appeared: [],
+      },
+    }));
+
+    expect(rendered).toContain('  dark.scss\n'
+      + '    --dxds-a            1rem → 2rem\n'
+      + '    --dxds-longer-name  1rem → 2rem');
+    expect(rendered).toContain('  light.scss\n    --dxds-b  1rem → 2rem');
+  });
+
+  /* A bump can add thousands of names; the terminal is not where that list belongs. */
+  it('caps a long section and says how much it left out', () => {
+    const rendered = renderTerminal(report({
+      output: { changed: [], gone: [], appeared: refs('base.scss', 9) },
+    }), { limit: 4 });
+
+    expect(grouped(rendered, 'new in the generated output (9)')).toEqual({
+      files: [{
+        file: 'base.scss',
+        names: ['--dxds-base-0', '--dxds-base-1', '--dxds-base-2', '--dxds-base-3'],
+      }],
+      omitted: 5,
+      filesNotShown: 0,
+    });
+  });
+
+  /*
+   * Several files is what tells the two readings of the limit apart. One file hides the difference:
+   * its header shifts what is shown and what is counted by the same one, so a cap taken on the
+   * printed lines comes out right by accident. Here the budget is four entries, the second file
+   * has to keep the header that carries them, and five entries are left over — not seven lines.
+   */
+  it('caps entries rather than the lines they are printed as', () => {
+    const rendered = renderTerminal(report({
+      output: {
+        changed: [],
+        gone: [],
+        appeared: [...refs('base.scss', 3), ...refs('light.scss', 6)],
+      },
+    }), { limit: 4 });
+
+    expect(grouped(rendered, 'new in the generated output (9)')).toEqual({
+      files: [
+        { file: 'base.scss', names: ['--dxds-base-0', '--dxds-base-1', '--dxds-base-2'] },
+        { file: 'light.scss', names: ['--dxds-light-0'] },
+      ],
+      omitted: 5,
+      filesNotShown: 0,
+    });
+  });
+
+  /*
+   * The budget can run out before a file is reached at all. The tally is then not the last printed
+   * file's remainder, and saying so is the difference between "one long file was cut short" and
+   * "there is another file here you cannot see".
+   */
+  it('says when the cap left whole files out of the section', () => {
+    const rendered = renderTerminal(report({
+      output: {
+        changed: [],
+        gone: [],
+        appeared: [...refs('base.scss', 3), ...refs('light.scss', 1), ...refs('dark.scss', 5)],
+      },
+    }), { limit: 4 });
+
+    expect(grouped(rendered, 'new in the generated output (9)')).toEqual({
+      files: [
+        { file: 'base.scss', names: ['--dxds-base-0', '--dxds-base-1', '--dxds-base-2'] },
+        { file: 'light.scss', names: ['--dxds-light-0'] },
+      ],
+      omitted: 5,
+      filesNotShown: 1,
+    });
+  });
+
+  it('puts a lost token first and says what it will cost', () => {
+    const rendered = renderTerminal(report({ lostConsumed: ['color-bg'] }));
+
+    expect(rendered).toContain('the theme reads 1 name(s) this package no longer has');
+    expect(rendered).toContain('    color-bg');
+    expect(rendered).toContain('the token build will refuse to run');
+    expect(rendered).not.toContain('nothing moved in the generated output');
+  });
+
+  it('calls for the etalons only when the pixels are at stake', () => {
+    const etalons = 're-record the etalon screenshots';
+
+    expect(renderTerminal(report({ names: { added: ['a'], removed: [] } }))).not.toContain(etalons);
+    expect(renderTerminal(report({
+      output: { changed: [change('--dxds-a')], gone: [], appeared: [] },
+    }))).toContain(etalons);
+  });
+
+  it('paints nothing unless asked', () => {
+    const plain = renderTerminal(report({ output: { changed: [change('--dxds-a')], gone: [], appeared: [] } }));
+    const painted = renderTerminal(
+      report({ output: { changed: [change('--dxds-a')], gone: [], appeared: [] } }),
+      { color: true },
+    );
+
+    // eslint-disable-next-line no-control-regex
+    expect(plain).not.toMatch(/\u001B\[/);
+    // eslint-disable-next-line no-control-regex
+    expect(painted).toMatch(/\u001B\[/);
+  });
+
+  it('heads an unchanged version without a transition', () => {
+    expect(renderTerminal(report({ versionBefore: '262.23.0', versionAfter: '262.23.0' })))
+      .toContain('@devexpress/design-tokens-internal 262.23.0\ntokens');
+  });
+});
+
+describe('renderPreamble', () => {
+  /* Printed while the rebuild is still ahead, so it must not pretend to know how it went. */
+  it('says what is known before the rebuild and stops there', () => {
+    const rendered = renderPreamble(report({
+      lostConsumed: ['color-none'],
+      output: { changed: [{ file: 'dark.scss', name: '--dxds-a', was: '1rem', now: '2rem' }], gone: [], appeared: [] },
+    }));
+
+    expect(rendered).toContain('262.23.0 → 262.24.0');
+    expect(rendered).toContain('the theme reads 1 name(s) this package no longer has');
+    expect(rendered).toContain('    color-none');
+    expect(rendered).not.toContain('values that moved');
+    expect(rendered).not.toContain('nothing moved in the generated output');
+  });
+
+  it('is the head of the terminal report, not a second version of it', () => {
+    const full = report({ output: { changed: [], gone: [], appeared: [] } });
+
+    expect(renderTerminal(full).startsWith(renderPreamble(full))).toBe(true);
+  });
+});
diff --git a/packages/devextreme-scss/tests/tsconfig.json b/packages/devextreme-scss/tests/tsconfig.json
deleted file mode 100644
index 3c5dc9495a43..000000000000
--- a/packages/devextreme-scss/tests/tsconfig.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-    "extends": "../../../tsconfig.json",
-    "compilerOptions": {
-        "baseUrl": ".",
-        "lib": [
-            "es2019"
-        ],
-        "types": [
-            "node",
-            "jest"
-        ]
-    },
-    "include": [
-        "./*.ts"
-    ]
-}
diff --git a/packages/devextreme-scss/tests/unused-elements.test.ts b/packages/devextreme-scss/tests/unused-elements.test.ts
index 52180125fabf..b06f07ed5dbd 100644
--- a/packages/devextreme-scss/tests/unused-elements.test.ts
+++ b/packages/devextreme-scss/tests/unused-elements.test.ts
@@ -102,7 +102,7 @@ test('There are no unused images in repository', () => {
   expect(fullImagesFileList).toEqual(usedImagesFileList);
 });
 
-const themes = ['generic', 'material', 'fluent'];
+const themes = ['generic', 'material', 'fluent', 'fluent-next'];
 const readAnywhere = variableUsageOf(['base', ...themes]).read;
 
 themes.forEach((themeName) => {
diff --git a/packages/devextreme-scss/tools/naming/accent-contract.json b/packages/devextreme-scss/tools/naming/accent-contract.json
new file mode 100644
index 000000000000..3a282a85da51
--- /dev/null
+++ b/packages/devextreme-scss/tools/naming/accent-contract.json
@@ -0,0 +1,33 @@
+{
+  "comment": "The application -> CSS contract of the custom accent, the mirror image of runtime-contract.json's JS -> CSS one: an application writes ONE colour into --dx-accent-color and scss/widgets/fluent-next/_accent-color.scss derives the whole primary scale from it with relative colour syntax. These names are not part of the component tier - `accent` is neither a component nor a registered system concern - and fluent-next is the only theme that derives a palette, so tests/fluent-next-naming.test.ts excludes them from the public-surface checks. tests/accent-palette.test.ts holds the stylesheet, the generated palettes and the built bundles to this file.",
+  "declaredIn": "fluent-next/_accent-color.scss",
+  "input": {
+    "name": "--dx-accent-color",
+    "setBy": "the application, on the root element",
+    "whenUnset": "every derived step is invalid at computed-value time, so each generated palette keeps the designed colour through var(--dx-accent-color-<step>, <designed value>)"
+  },
+  "source": {
+    "name": "--dx-accent-color-source",
+    "purpose": "the single read of the application's name, so the 18 step expressions do not each carry it"
+  },
+  "settings": [
+    {
+      "name": "--dx-accent-lightness-max",
+      "purpose": "the lightness the light end of the scale arrives at"
+    },
+    {
+      "name": "--dx-accent-lightness-min",
+      "purpose": "the lightness the dark end of the scale arrives at"
+    },
+    {
+      "name": "--dx-accent-chroma-min",
+      "purpose": "the chroma both ends fade to"
+    }
+  ],
+  "steps": {
+    "prefix": "--dx-accent-color-",
+    "values": [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180],
+    "readIn": "_design-system/fluent/accents/*.scss",
+    "fallback": "the designed value of the step, so an unset accent leaves the theme exactly as drawn"
+  }
+}
diff --git a/packages/devextreme-scss/tools/naming/consume.mjs b/packages/devextreme-scss/tools/naming/consume.mjs
new file mode 100644
index 000000000000..fad8ccaeb7ba
--- /dev/null
+++ b/packages/devextreme-scss/tools/naming/consume.mjs
@@ -0,0 +1,297 @@
+/*
+ * Wave F, the consumption side: rewrites a folder's _index.scss so that plain declarations read
+ * the emitted --dx-* component tier instead of the SCSS variable — `padding: $toast-item-gap;`
+ * becomes `padding: var(--dx-toast-item-gap);`. One hop through the custom property the theme
+ * itself declares on the component's root (tools/naming/registries.json -> rootSelectors), so the
+ * rendered value is unchanged and per-instance overrides start to work.
+ *
+ *   node tools/naming/consume.mjs <folder> [<folder> …]   # e.g. badge toast splitter
+ *   node tools/naming/consume.mjs --mixin-args <folder> [<folder> …]
+ *   node tools/naming/consume.mjs --wiring                # all `@use …base… with ()` blocks
+ *
+ * --wiring rewrites the VALUES of base `with ()` configuration across the whole theme: a value
+ * that is exactly one manifest variable becomes `var(--dx-…)`. Reviewed precondition (wave F7,
+ * 13.08.2026): every base parameter wired to a manifest variable is a pure PRINT across the whole
+ * base source — no math, no control flow, no data-uri (the classifier run is recorded in
+ * RENAME_PROGRESS.md). Keys are base's spelling and stay untouched; legacy themes are untouched
+ * by construction (the blocks live in fluent-next folders).
+ *
+ * Deliberately conservative: only a declaration whose value is a whitespace-separated list of
+ * manifest variables of the folder's OWN component and literal CSS tokens is converted. Anything
+ * else — interpolation, Sass functions or operators, namespaced reads, another component's names,
+ * `@use … with ()` wiring, mixin arguments — is reported and left for a reviewed manual edit,
+ * because the safety of `var()` there depends on what the receiver does with the value.
+ * No fallbacks on purpose: inside the theme the declaration is guaranteed by the emitted tier
+ * (fallbacks would double the bundle and hide a broken emission; consumers OUTSIDE the theme are
+ * the ones that must pass a fallback — NAMING.md).
+ *
+ * --mixin-args converts manifest variables inside `@include <mixin>(…)` argument lists, and ONLY
+ * for mixins on the reviewed allowlist below: every allowlisted body either prints its parameters
+ * verbatim into declarations or guards its Sass math with `if(meta.type-of(…) == number, …,
+ * calc(…))` — a var() argument takes the calc branch, exactly like the token bridge already does.
+ * `with ()` wiring is untouched (it is @use configuration, not a call). The exclusion map lists
+ * the parameters a body uses in UNGUARDED math, where a var() would produce invalid CSS.
+ */
+
+/* wave F6, reviewed 13.08.2026 — see NAMING.md "wave F as-built" and RENAME_PROGRESS.md */
+const VAR_SAFE_MIXINS = new Set([
+  'dx-icon-sizing', 'dx-icon-margin', 'dx-icon-font-centered-sizing', 'gradient-linear',
+  'dx-button-styling', 'dx-button-styling-variant', 'dx-button-flat-color-styling',
+  'dx-button-outlined-color-styling', 'resize-handle-states',
+  'dx-texteditor-search-icon', 'dx-dropdownbutton', 'invalid-dropdowneditor-input-padding',
+  'dx-field-value-widget-position', 'dx-fieldset-sizing', 'informer',
+  'loadindicator-animation-sparkle', 'dx-lookup-arrow', 'dx-radiobutton-states-mixin',
+  'dx-scrollable-scroll-content', 'dx-scrollable-scrollbar-hoverable',
+  'dx-scrollable-scrollbar-vertical', 'dx-scrollable-scrollbar-horizontal',
+  'dx-scrollable-scrollbars-alwaysvisible',
+  'dx-switch', 'dx-switch-states-fluent', 'dx-switch-rtl', 'dx-textarea',
+  'dx-editor-outlined', 'dx-editor-filled', 'dx-editor-underlined',
+  'dx-editor-buttons-container-material', 'dx-toolbar-sizing', 'dx-toolbar-item-padding',
+  'dx-base-validation', 'dx-modern-styles-validation',
+  // wave H — base/colorView/_mixins.scss: the two handle colours are printed verbatim into
+  // radial-gradient/box-shadow/border-color, no math and no control flow
+  'dx-base-colorview-styles',
+  /*
+   * wave H — calendar and checkBox. The calendar bodies print their parameters; the one place with
+   * Sass math (`with-footer` height) already carries the meta.type-of guard, and the cell mixin's
+   * alpha uses the same bridge guard as the token bridges. The two parameters that ARE unguarded
+   * math (`$calendar-width * 2`, `math.div(-$icon-height, 2)`) are excluded below.
+   */
+  'dx-calendar-mixin', 'dx-calendar-navigator-mixin', 'dx-calendar-body-mixin',
+  'dx-calendar-cell-mixin', 'dx-calendar-cell-in-range-mixin',
+  'dx-checkbox-icon-centered', 'dx-checkbox-icon-indeterminate',
+  /*
+   * wave H — treeView, speedDialAction and the theme's own list sizing. Every body either prints
+   * its parameters or guards the math with meta.type-of; dx-fa-button-mixin's color.adjust branch
+   * is the null-fallback for legacy callers and this theme passes ready state colours instead.
+   */
+  'default-expander-icon', 'treeview-item', 'treeview-checkbox', 'treeview-aux-items',
+  'dx-fa-button-mixin', 'dx-list-sizing', 'dx-radiogroup-mixin',
+  // the theme's own tabs indicator: the body prints the colour into `&::after { background-color }`
+  'dx-tabs-indicator-background',
+  // scheduler header sizes and the theme's icon-only button sizing: both are plain prints
+  'header-sizes', 'dx-button-onlyicon-sizing',
+  /*
+   * wave H — chat, stepper and diagram's connector. Every body either prints its parameters or
+   * guards its Sass math with the meta.type-of test (`$gap * 2`, the empty-icon padding, the
+   * preview inset), which takes the calc() branch for a var() argument.
+   */
+  'chat', 'chat-alertlist', 'chat-avatar', 'chat-confirmation-popup', 'chat-file', 'chat-fileview',
+  'chat-messagebox', 'chat-messagebubble', 'chat-messagegroup', 'chat-messagelist',
+  'chat-messagelist-contextmenu', 'chat-messagelist-empty', 'chat-suggestions',
+  'chat-typingindicator', 'message-editing-preview', 'connector', 'step', 'step-states', 'stepper',
+  // wave F7a — base/gridBase/layout/aiChat/_mixins.scss, every body is a plain print
+  'ai-chat-messagelist-empty', 'ai-chat-message-pending', 'ai-chat-message-success',
+  'ai-chat-message-error', 'ai-chat-messagebubble-border', 'ai-chat-message-regenerate-button',
+  'ai-chat-message-icon',
+]);
+
+/* mixin -> variables that must STAY SCSS at its call sites (unguarded math in the body) */
+const VAR_UNSAFE_ARGS = new Map([
+  // clip-path: inset(-$texteditor-label-font-size …) — unary minus over a var() string
+  // would print `-var(--dx-…)`, an invalid value
+  ['dx-editor-outlined', new Set(['$text-editor-label-font-size'])],
+  // width: $calendar-width * 2 (the multiview calendar) — unguarded multiplication
+  ['dx-calendar-mixin', new Set(['$calendar-legacy-width'])],
+  // margin-top/-inline-start: math.div(-$icon-…, 2) — unguarded division of a negated parameter
+  ['dx-checkbox-icon-centered', new Set(['$check-box-arrow-icon-size'])],
+  // the same division, reached through the forward to dx-checkbox-icon-centered
+  ['dx-checkbox-icon-indeterminate', new Set([
+    '$check-box-indeterminate-icon-height', '$check-box-indeterminate-icon-width',
+  ])],
+]);
+
+import { readFileSync, writeFileSync, existsSync, readdirSync } from 'fs';
+import { join, dirname } 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'));
+
+/* The tier's contents are read from the committed _public.scss (written by publish.mjs) and _public-links.scss (hand-written). */
+const walkScss = (dir, out = []) => {
+  readdirSync(dir, { withFileTypes: true }).forEach((entry) => {
+    const abs = join(dir, entry.name);
+    if (entry.isDirectory()) walkScss(abs, out);
+    else if (entry.name.endsWith('.scss')) out.push(abs);
+  });
+  return out;
+};
+const surface = {
+  names: walkScss(themeRoot)
+    .filter((file) => file.endsWith('_public.scss') || file.endsWith('_public-links.scss'))
+    .flatMap((file) => {
+      const folder = file.slice(themeRoot.length + 1).split('/')[0];
+      return [...readFileSync(file, 'utf8').matchAll(/(--dx-[a-z0-9-]+)\s*:/g)]
+        .map(([, name]) => ({
+          public: name,
+          source: `$${name.slice('--dx-'.length)}`,
+          component: registries.components[folder],
+        }));
+    }),
+};
+
+const mixinArgsMode = process.argv[2] === '--mixin-args';
+const wiringMode = process.argv[2] === '--wiring';
+const folders = process.argv.slice(mixinArgsMode ? 3 : 2);
+if (!folders.length && !wiringMode) {
+  process.stderr.write('usage: node tools/naming/consume.mjs [--mixin-args|--wiring] <folder> [<folder> …]\n');
+  process.exit(1);
+}
+
+/*
+ * Wiring values that must stay SCSS, whatever the manifest says. Each one is read by base in a way
+ * a var() string cannot survive: unguarded Sass math, or a build-time flag that decides which
+ * rules exist at all. Without this list a later `--wiring` run would silently undo the decision.
+ */
+const WIRING_UNSAFE = new Set([
+  '$scheduler-left-column-width',            // `$x * $scheduler-small-size-factor` in base
+  '$scheduler-appointment-bg-focused',       // `@if $fill-focused-appointment` — a flag, not a value
+  '$scheduler-appointment-shadow-focused',   // `@if $is-shadow-color-for-focused-state`
+]);
+
+if (wiringMode) {
+  const manifestNames = new Set(surface.names
+    .map((name) => name.source)
+    .filter((name) => !WIRING_UNSAFE.has(name)));
+  const walkTheme = (dir, out = []) => {
+    readdirSync(dir, { withFileTypes: true }).forEach((entry) => {
+      const abs = join(dir, entry.name);
+      if (entry.isDirectory()) walkTheme(abs, out);
+      else if (entry.name.endsWith('.scss')) out.push(abs);
+    });
+    return out;
+  };
+  let converted = 0;
+  let files = 0;
+  walkTheme(themeRoot).forEach((file) => {
+    const source = readFileSync(file, 'utf8');
+    const out = source.replace(/(@use\s+"[^"]*base[^"]*"(?:\s+as\s+[\w*-]+)?\s+with\s*\()([\s\S]*?)(\)\s*;)/g,
+      (whole, head, block, tail) => {
+        const next = block.replace(/(:\s*)(\$[a-z0-9-]+)(\s*(?:,|$|\n))/g, (m, before, token, after) => {
+          if (!manifestNames.has(token)) return m;
+          converted += 1;
+          return `${before}var(--dx-${token.slice(1)})${after}`;
+        });
+        return `${head}${next}${tail}`;
+      });
+    if (out !== source) {
+      writeFileSync(file, out);
+      files += 1;
+    }
+  });
+  process.stdout.write(`wiring: converted ${converted} with() value(s) in ${files} file(s)\n`);
+  process.exit(0);
+}
+
+const manifestOf = (component) => new Map(surface.names
+  .filter((name) => name.component === component)
+  .map((name) => [name.source, name.public]));
+
+/* a value convertible in place: only own manifest $names and literal CSS tokens, no calls/math */
+const convertValue = (value, names) => {
+  if (/[#{}()*/+]|(^|\s)-(\s|$)|\$[a-z0-9-]+\.|[a-z0-9-]+\.\$/i.test(value)) return null;
+  const tokens = value.trim().split(/\s+/);
+  let converted = 0;
+  const out = tokens.map((token) => {
+    if (!token.startsWith('$')) return token;
+    const name = names.get(token);
+    if (!name) return null;
+    converted += 1;
+    return `var(${name})`;
+  });
+  if (!converted || out.includes(null)) return null;
+  return out.join(' ');
+};
+
+/* --mixin-args: rewrite manifest variables inside allowlisted @include argument lists */
+const convertMixinArgs = (folder, component, file) => {
+  const names = manifestOf(component);
+  let converted = 0;
+  const skippedMixins = new Set();
+  const source = readFileSync(file, 'utf8');
+  const out = source.replace(/@include\s+([\w.-]+)\s*\(([^;]*?)\)(\s*);/gs, (whole, mixin, args, tail) => {
+    const base = mixin.slice(mixin.indexOf('.') + 1);
+    const hasManifest = [...args.matchAll(/\$[a-z0-9-]+/g)].some(([t]) => names.has(t));
+    if (!hasManifest) return whole;
+    if (!VAR_SAFE_MIXINS.has(base)) {
+      skippedMixins.add(mixin);
+      return whole;
+    }
+    const unsafe = VAR_UNSAFE_ARGS.get(base) ?? new Set();
+    const next = args.replace(/(^|[^\w.{-])(\$[a-z0-9-]+)/g, (m, before, token) => {
+      if (!names.has(token) || unsafe.has(token)) return m;
+      converted += 1;
+      return `${before}var(--dx-${token.slice(1)})`;
+    /* the interpolated form inside a computed argument prints verbatim — same one-to-one swap */
+    }).replace(/#\{\s*(\$[a-z0-9-]+)\s*\}/g, (m, token) => {
+      if (!names.has(token) || unsafe.has(token)) return m;
+      converted += 1;
+      return `var(--dx-${token.slice(1)})`;
+    });
+    return `@include ${mixin}(${next})${tail};`;
+  });
+  writeFileSync(file, out);
+  process.stdout.write(`${folder} (${component}): converted ${converted} mixin argument(s)\n`);
+  skippedMixins.forEach((m) => process.stdout.write(`  not allowlisted, left as is: ${m}\n`));
+};
+
+folders.forEach((folder) => {
+  /* a path with a slash names a specific rule file of the folder (e.g. gridBase/layout/cell.scss) */
+  const explicitFile = folder.includes('/');
+  const owner = explicitFile ? folder.slice(0, folder.indexOf('/')) : folder;
+  const component = registries.components[owner];
+  const file = explicitFile ? join(themeRoot, folder) : join(themeRoot, folder, '_index.scss');
+  if (!component || !existsSync(file)) {
+    process.stderr.write(`${folder}: not a component folder with an _index.scss\n`);
+    process.exitCode = 1;
+    return;
+  }
+  if (mixinArgsMode) {
+    convertMixinArgs(folder, component, file);
+    return;
+  }
+  const names = manifestOf(component);
+  const report = { converted: 0, skipped: [] };
+
+  const lines = readFileSync(file, 'utf8').split('\n').map((line) => {
+    const match = /^(\s*)([a-z-]+)\s*:\s*([^;]*);(\s*)$/.exec(line);
+    const mentionsManifest = [...line.matchAll(/\$[a-z0-9-]+/g)]
+      .some(([token]) => names.has(token));
+    if (!match) {
+      if (mentionsManifest) report.skipped.push(line.trim());
+      return line;
+    }
+    const [, indent, property, value, tail] = match;
+    const converted = convertValue(value, names);
+    if (converted) {
+      report.converted += 1;
+      return `${indent}${property}: ${converted};${tail}`;
+    }
+    /*
+     * An interpolation prints its content verbatim into the value, so a manifest variable inside
+     * `#{…}` (the calc-string pattern: `calc(#{$x} + 1px)`) converts to var() one-to-one. Only
+     * declaration lines — interpolations in selectors and property names are never touched.
+     */
+    if (mentionsManifest && /#\{/.test(value)) {
+      let hits = 0;
+      const next = value.replace(/#\{\s*(\$[a-z0-9-]+)\s*\}/g, (m, token) => {
+        if (!names.has(token)) return m;
+        hits += 1;
+        return `var(--dx-${token.slice(1)})`;
+      });
+      if (hits) {
+        report.converted += hits;
+        return `${indent}${property}: ${next};${tail}`;
+      }
+    }
+    if (mentionsManifest) report.skipped.push(line.trim());
+    return line;
+  });
+
+  writeFileSync(file, lines.join('\n'));
+  process.stdout.write(`${folder} (${component}): converted ${report.converted} declaration(s)\n`);
+  report.skipped.forEach((line) => process.stdout.write(`  left for review: ${line}\n`));
+});
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..971258afcd8c
--- /dev/null
+++ b/packages/devextreme-scss/tools/naming/derive-registries.mjs
@@ -0,0 +1,1339 @@
+/*
+ * 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 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.
+ *
+ * The component names come from the package's flat index rather than from generated output, so the
+ * vocabulary survives the component tier no longer being emitted (it is an alias layer the theme
+ * stopped reading) and the script needs no build to run.
+ */
+
+import { readFileSync, writeFileSync, readdirSync, statSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { createRequire } from 'module';
+
+const here = dirname(fileURLToPath(import.meta.url));
+const require = createRequire(import.meta.url);
+const packageRoot = join(here, '..', '..');
+const themeDir = join(packageRoot, 'scss', 'widgets', 'fluent-next');
+const flatTokens = require.resolve('@devexpress/design-tokens-internal/tokens.flat.json');
+const COMPONENT_TOKEN_SOURCE = 'components/core/theme/fluent';
+const output = join(here, 'registries.json');
+
+// ---------------------------------------------------------------------------------------------
+// Judgment calls. Everything else in registries.json is derived.
+// ---------------------------------------------------------------------------------------------
+
+// Public contract of widgets/fluent-next/_design-system.scss: an element naming a theme mode.
+const THEME_MODE_SELECTORS = ['.dx-theme-mode-light', '.dx-theme-mode-dark', '.dx-theme-mode-inverted'];
+
+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'],
+
+  // System folders whose declarations join the --dx tier (published from <folder>/_public.scss
+  // onto rootSelectors[folder]); grammar stays the systemConcerns path, not the component one.
+  systemTier: ['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'],
+    /*
+     * A tree node in showCheckBoxesMode renders a real CheckBox, and the select-all row IS one. The
+     * node takes focus, the check box inside it does not, so the tree has to paint the focused state
+     * itself - with the check box's own decisions, exactly as the list does.
+     */
+    treeView: ['check-box'],
+    // 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
+    // …and it splits the dirs panel from the items view with a real Splitter, centring the
+    // wrapper on the bar from that widget's own border and bar widths
+    fileManager: ['toolbar', 'splitter-bar'],
+    // the editor's spin buttons are real Buttons
+    textEditor: ['button'],
+  },
+
+  /*
+   * Wave F: where the emitted --dx-* component tier is DECLARED (the Blazor --dxbl- model: on the
+   * component's root class, not in :root — per-instance overrides via the cascade, no :root bloat).
+   * The default derivation is `.dx-<component-without-hyphens>`; an entry here overrides it, and
+   * every selector is machine-gated against the built bundle (assertRootSelectorsExist).
+   *
+   * The root must be an ancestor-or-self of every box the component's variables paint. Two facts
+   * decide the exceptions:
+   *   - overlays render OUTSIDE the widget's source element (inside .dx-overlay-wrapper), so the
+   *     widget class is not an ancestor of the painted boxes — the wrapper/content class is;
+   *   - chassis variables are consumed wherever the chassis renders, so their scope is the shared
+   *     runtime class when the hierarchy provides one (.dx-texteditor, .dx-menu-base), and the
+   *     dependents' root list when it does not (grid).
+   * Popup satellites of composite widgets are included where known (date-box wrapper, tag-box
+   * popup); a consumption wave that converts a declaration must still prove its subject sits under
+   * one of these roots (browser smoke) — grid's column-chooser-style satellites get added here when
+   * that component's consumption wave lands.
+   */
+  rootSelectors: {
+    /*
+     * System tier: theme-wide values live on the document root — plus every element that names a
+     * theme mode, because a `:root`-only alias onto a role resolves once, on <html>, and would
+     * freeze at the bundle's mode. The component tier needs no entry: its roots sit inside the
+     * mode scope already.
+     */
+    common: [':root', ...THEME_MODE_SELECTORS],
+    /*
+     * The drop-down editor's inner button is a dxButton whose root carries dx-button-normal +
+     * dx-dropdowneditor-button but NOT dx-button (found by the F12 runtime reachability audit:
+     * button variables did not reach .dx-button-content inside every dropdown editor).
+     */
+    button: ['.dx-button', '.dx-dropdowneditor-button'],
+    // overlays: the painted boxes live under the overlay wrapper, not under the source element
+    toast: ['.dx-toast-wrapper', '.dx-toast-stack'],
+    tooltip: ['.dx-tooltip-wrapper'],
+    popover: ['.dx-popover-wrapper'],
+    'load-panel': ['.dx-loadpanel-content'],
+    'action-sheet': ['.dx-actionsheet-popup-wrapper', '.dx-actionsheet-popover-wrapper'],
+    'context-menu': ['.dx-context-menu'], // the overlay content itself carries the class
+    'drop-down-list': ['.dx-dropdownlist-popup-wrapper'],
+    'drop-down-menu': ['.dx-dropdownmenu-popup-wrapper'],
+    'date-view': ['.dx-dateview-rollers'], // .dx-dateview exists only in JS; rollers is the styled root
+    // same shape as date-view: .dx-colorview carries no rule, the container is the styled root and
+    // the ancestor of every box the component paints (palette, scales, previews, controls)
+    'color-view': ['.dx-colorview-container'],
+    /*
+     * Wave H satellites. dx-pager and dx-pagination are MUTUALLY EXCLUSIVE
+     * (pagination/content.tsx, getClasses): the standalone widget gets dx-pagination, a grid's
+     * pager runs in grid-compatibility mode and gets dx-pager instead — declaring on one leaves
+     * the tier empty in the other, which is what emptied every grid pager in CI.
+     */
+    pagination: ['.dx-pagination', '.dx-pager'],
+    /*
+     * The header item travels: dragging it puts a COPY inside .dx-sortable-dragging in the viewport
+     * (m_draggable/_createDragElement), and `.dx-sortable-dragging > .dx-cardview-header-item` paints
+     * that copy. The item is the only element reading the tier there, so it carries its own scope.
+     */
+    /*
+     * A tree item travels: applications wrap the widget in a dxSortable with
+     * `filter: '.dx-treeview-item'` (the shipped TreeView drag-and-drop demos do), and the clone is
+     * built in the viewport. The clone container is the scope — declaring on .dx-treeview-item would
+     * repeat 33 properties on every node of every tree.
+     */
+    'tree-view': ['.dx-treeview', '.dx-sortable-dragging'],
+    'card-view': ['.dx-cardview', '.dx-cardview-header-item',
+      /*
+       * The drop indicator of the header panel is a dxSortable placeholder: JS builds it in the
+       * VIEWPORT and puts the cardView class on it, so `.dx-cardview-header-item-sort-indicator`
+       * paints an element no widget root contains. Legacy paints it with literals and before the
+       * tier it read `--dxds-*` from `:root` — both always resolved; the tier names did not, and
+       * the 4px indicator disappeared from six screenshots.
+       */
+      '.dx-cardview-header-item-sort-indicator',
+      // the column chooser is a popup: base paints its empty message and select-all item with
+      // cardView's parameters
+      '.dx-cardview-column-chooser-list', '.dx-cardview-column-chooser-plain'],
+    // the delete-message confirmation popup lives outside .dx-chat
+    chat: ['.dx-chat', '.dx-messagelist-context-menu-content', '.dx-chat-confirmation-popup-wrapper'],
+    // the add-image dialog is a popup (and it renders a fileUploader of its own)
+    'html-editor': ['.dx-htmleditor', '.dx-aidialog', '.dx-htmleditor-add-image-popup'],
+    // the field and operation drop-downs are overlays
+    'filter-builder': ['.dx-filterbuilder', '.dx-filterbuilder-overlay', '.dx-filterbuilder-operations'],
+    // the list's context menu is overlay content
+    list: ['.dx-list', '.dx-list-context-menucontent'],
+    /*
+     * .dx-pivotgrid-fields-container holds the clone while a field is dragged (in the field
+     * chooser and in the field panel). It is created outside both roots, and in CI the dragged
+     * field lost its background, border and shadow.
+     */
+    'pivot-grid': ['.dx-pivotgrid', '.dx-pivotgridfieldchooser', '.dx-pivotgrid-fields-container'],
+    // dialogs, the context menu and the view switcher are popups
+    'file-manager': ['.dx-filemanager', '.dx-filemanager-dialog-popup', '.dx-filemanager-context-menu',
+      '.dx-filemanager-dialog-name-editor-popup', '.dx-filemanager-dialog-delete-item-popup',
+      '.dx-filemanager-view-switcher-popup'],
+    // the properties panel, the toolbox and the context toolbars are popups and floating panels
+    diagram: ['.dx-diagram', '.dx-diagram-properties-popup', '.dx-diagram-toolbox-popup',
+      '.dx-diagram-contextmenu', '.dx-diagram-context-toolbox', '.dx-diagram-floating-toolbar-container'],
+    // wave H roots that are not `.dx-<component>`: an overlay renders outside its source element,
+    // and two components paint a box whose class is not their own
+    popup: ['.dx-popup-wrapper'],
+    'speed-dial-action': ['.dx-fa-button'], // .dx-speeddialaction exists only in JS
+    widget: ['.dx-surface'], // the one variable paints the theme surface itself
+    /*
+     * Portals (the wave F15 class): both widgets paint boxes the JS renders outside the widget
+     * element — the appointment editor and the appointment tooltip for scheduler, the dialogs for
+     * fileManager. Each class sits on the overlay WRAPPER, so it is an ancestor of the painted box.
+     */
+    scheduler: ['.dx-scheduler', '.dx-scheduler-appointment-popup',
+      '.dx-scheduler-appointment-tooltip-wrapper',
+      // the appointment tooltip and the collector render inside .dx-scheduler-overlay-panel, outside
+      // the widget: without it the tooltip lost its marker, its title weight and its paddings
+      '.dx-scheduler-overlay-panel'],
+    'file-manager': ['.dx-filemanager', '.dx-filemanager-dialog-popup'],
+    // the widget root of both exists only in JS; these are the styled roots that contain the boxes
+    map: ['.dx-map-container'],
+    'recurrence-editor': ['.dx-recurrence-repeat-on', '.dx-recurrence-button-group',
+      '.dx-recurrence-numberbox-interval-wrapper', '.dx-recurrence-radiogroup-repeat-type',
+      '.dx-recurrence-datebox-until-date', '.dx-recurrence-numberbox-repeat-count'],
+    validation: ['.dx-invalid-message', '.dx-validationsummary'],
+    overlay: ['.dx-overlay-wrapper'],
+    // field widgets with a drop-down part: the field root plus the popup surface
+    lookup: ['.dx-lookup', '.dx-lookup-popup-wrapper'],
+    'select-box': ['.dx-selectbox', '.dx-selectbox-popup-wrapper'],
+    'tag-box': ['.dx-tagbox', '.dx-tagbox-popup-wrapper'],
+    'date-box': ['.dx-datebox', '.dx-datebox-wrapper'],
+    'color-box': ['.dx-colorbox', '.dx-colorbox-overlay'],
+    'drop-down-button': ['.dx-dropdownbutton', '.dx-dropdownbutton-popup-wrapper'],
+    'drop-down-editor': ['.dx-dropdowneditor', '.dx-dropdowneditor-overlay'],
+    /*
+     * Chassis. .dx-menu-base sits on dxMenu's root, on every submenu overlay content (Submenu
+     * extends ContextMenu, whose content carries the class) and on dxContextMenu's content, so one
+     * class scopes the whole family. Known hole for the consumption wave: the decorative
+     * .dx-context-menu-container-border / -content-delimiter boxes may sit OUTSIDE .dx-menu-base
+     * inside the overlay — prove ancestry before converting those two declarations.
+     */
+    /*
+     * The adaptive mode renders a TreeView inside an overlay whose content carries only
+     * .dx-menu-adaptive-mode — no .dx-menu-base (found by the F14 runtime audit after the PR
+     * screenshot failures: adaptive item metrics collapsed).
+     */
+    menu: ['.dx-menu-base', '.dx-menu-adaptive-mode'],
+    /*
+     * text-editor's shared runtime class covers every REAL editor, but the theme also paints
+     * surfaces that reuse editor styling without the class (found by the F12 reachability audit,
+     * reported live on htmlEditor): dxHtmlEditor's root carries only .dx-htmleditor while
+     * textEditor/_index.scss styles .dx-htmleditor.dx-htmleditor-<stylingMode> with editor vars.
+     */
+    'text-editor': ['.dx-texteditor', '.dx-htmleditor'],
+    /*
+     * The grids paint their overlay satellites outside the grid element: the column chooser is a
+     * Popup whose WRAPPER carries .dx-datagrid-column-chooser / .dx-treelist-column-chooser.
+     */
+    grid: ['.dx-datagrid', '.dx-treelist', '.dx-pivotgrid', '.dx-cardview',
+      '.dx-datagrid-column-chooser', '.dx-treelist-column-chooser',
+      // the header-filter popup wrapper is shared by all grids and lives outside them (F14)
+      '.dx-header-filter-menu',
+      /*
+       * F15, from the second round of PR screenshots. The column drag preview is appended to the
+       * SWATCH container (m_columns_resizing_reordering: element().appendTo(getSwatchContainer)),
+       * so it is a sibling of the grid, not a descendant — its background, border and header
+       * metrics came out unpainted. The AI assistant is a Popup whose wrapper carries
+       * .dx-ai-chat .dx-aidialog (grid_core/ai_chat: wrapperAttr), likewise outside the grid.
+       */
+      '.dx-datagrid-drag-header', '.dx-treelist-drag-header', '.dx-ai-chat',
+      /*
+       * The AI assistant's "abort the running request?" dialog is a standalone dx dialog
+       * (grid_core/ai_assistant/ai_assistant_view: createConfirmDialog with elementAttr), so it
+       * renders at body level and not inside the grid. Its button width is a grid size, so the
+       * component tier has to be published on the dialog itself — the reachability gate caught
+       * this the moment the width stopped being a literal.
+       */
+      '.dx-datagrid-ai-assistant-confirm-dialog', '.dx-treelist-ai-assistant-confirm-dialog'],
+    /*
+     * The dragged clone is created as $('<div>').appendTo(container) — the container defaults to
+     * the viewport — and the placeholder is inserted next to it, so both live outside .dx-sortable
+     * (F15: the row drag preview lost its shadow). .dx-sortable-dragging rides the drag element in
+     * both clone and no-clone modes, which is what `.dx-sortable-dragging > *` needs.
+     */
+    sortable: ['.dx-sortable', '.dx-sortable-dragging', '.dx-sortable-placeholder'],
+    /*
+     * Canonical fieldset markup is .dx-fieldset > .dx-field, but demos and apps also use
+     * .dx-field standalone — the tier rides the field itself so both layouts resolve.
+     */
+    fieldset: ['.dx-fieldset', '.dx-field'],
+    /*
+     * Toolbar paints outside its own element (found by the wave-F5 reachability audit and its
+     * browser smoke): .dx-toolbar-menu-section lives in the overflow-menu POPUP — desktop renders
+     * it under .dx-dropdownmenu-popup-wrapper (verified live: the wrapper carries no toolbar
+     * class), .dx-toolbar-menu-container is the other, mobile overflow surface the bundle styles;
+     * .dx-toolbar-background is a styled legacy hook no code in this repo attaches (external
+     * products may), so it carries the tier itself.
+     */
+    toolbar: ['.dx-toolbar', '.dx-dropdownmenu-popup-wrapper', '.dx-toolbar-menu-container',
+      '.dx-toolbar-background'],
+    // .dx-box exists only in JS; the only styled box is the item content
+    box: ['.dx-box-item-content'],
+    'splitter-bar': ['.dx-splitter-bar', '.dx-splitter-border'], // two disjoint styled roots
+    // global utility painted on arbitrary elements (.dx-icon plus per-widget image boxes):
+    // :root, the same place Blazor keeps its 24 cross-component names
+    icon: [':root'],
+    // the type scale is cross-component (chat, stepper and toolbar read it), so it lives on
+    // :root like icon — the surface class .dx-theme-fluent-next-typography is opt-in and would
+    // leave the borrowers outside the values they read
+    typography: [':root', ...THEME_MODE_SELECTORS],
+  },
+
+  // 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',
+    // Markup a widget writes into its own value, which consumers then render anywhere: the
+    // htmlEditor emits .dx-mention into the HTML it saves, and the Mentions demo shows that HTML
+    // in a chat log with no editor around it. The base layer already says so — `.dx-mention` is a
+    // bare selector there, while `.dx-variable` is nested under `.dx-htmleditor-content`. A
+    // component-tier token would only resolve inside the editor and the highlight would vanish
+    // everywhere else, so the value is published on :root.
+    'mention',
+    '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.
+   * The first four are named by build/bundle-template.fluent-next.scss, which substitutes $COLOR,
+   * $MODE and $SIZE into them (see GOTCHAS.md §5), so their spelling belongs to the build.
+   * The $theme-marker-* trio is the theme's own: each holds one segment of the .dx-theme-marker
+   * font-family that themes.current() parses at runtime. Only their VALUES reach that string, so
+   * the names are free — they carry no component and are named after the thing they compose.
+   */
+  themeIdentity: [
+    '$color', '$mode', '$size', '$accent',
+    '$theme-marker-color', '$theme-marker-mode', '$theme-marker-size-postfix',
+  ],
+
+  // Folders exempt from the standard, with the reason recorded in NAMING.md.
+  /*
+   * Wave H (28.08.2026) emptied this list: cardView's BEM names were the last entry, and the
+   * rename that removed them touched only this theme's copy — the shared `$cardview-*` parameters
+   * of base keep their spelling and stay mirrors, so generic/material/fluent are untouched.
+   */
+  exemptFolders: {},
+
+  // 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'],
+
+  /*
+   * `rest` is not a word here: the design-tokens vocabulary spells the resting value with no
+   * suffix at all (`$color-bg` next to `$color-bg-hovered`), and the theme follows it. `focused`
+   * and `read-only` have no token counterpart — they are DOM states the token tier never models.
+   */
+  states: [
+    'hovered', 'active', 'focused',
+    'selected', 'selected-hovered', 'selected-active', 'selected-focused',
+    'selected-disabled', // cardView: the applied header filter inside a disabled column item
+    '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-button:not(.dx-button-has-text): a button that shows a glyph and nothing else, which
+      // pads itself differently from one carrying a caption
+      'icon-only',
+      // .dx-button-has-text: the same button when it carries a caption beside the glyph
+      'with-text',
+      // .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', 'first-of-month', 'other-month',
+      // calendar cell states drawn as classes, and the two htmlEditor overlay variants
+      'contoured', 'faded', 'noimage', 'highlighted', 'dragged', 'legacy',
+      // .dx-calendar-today marks the current date's cell; .dx-calendar-multiview sits on the
+      // widget root when it shows more than one month at a time
+      'today', 'multiview',
+      // `.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'
+      'basic', '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',
+    'transition-duration', // the stepper animates its step marker; the theme owns the duration
+    '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',
+    // wave H (28.08.2026): the components the tier never reached — see RENAME_PROGRESS.md
+    'color-view', 'calendar', 'check-box', 'drawer', 'filter-builder', 'form', 'html-editor',
+    'list', 'popup', 'radio-group', 'speed-dial-action', 'time-view', 'tree-view', 'widget',
+    'scheduler', 'file-manager', 'tabs',
+    'chat', 'diagram', 'gantt', 'slider', 'stepper', 'pivot-grid', 'pagination', 'file-uploader',
+    'map', 'recurrence-editor', 'card-view',
+  ],
+
+  /*
+   * 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: {
+    // wave H: cardView anatomy, read off the base selectors when the folder migrated
+    'card-view': [
+      'card', 'cover', 'content', 'cell', 'field-value', 'field', 'header', 'selection-checkbox',
+      'column-chooser', 'select-all-item', 'message', 'filter-panel', 'header-panel', 'dropzone',
+      'item', 'header-filter', 'sort-index', 'sort-indicator', 'header-item', 'nodata-view',
+      'icon-container', 'cards', 'divider', 'allowance', 'prohibition', 'link', 'icon', 'caption',
+      'text',
+    ],
+    map: ['marker-tooltip'], // wave H
+    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', 'content'],
+    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'],
+    // wave B7: .dx-switch-on and .dx-switch-off are the two labels the track slides between
+    switch: ['handle', 'container', 'inner', 'label'],
+    /*
+     * `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',
+      // wave B8: the hour and minute hands are boxes the clock positions on the dial
+      'arrow'],
+    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: [
+      // wave H: anatomy the folder needed to enter `migrated`
+      'element', 'handle','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'],
+    // `indicator` is the selection strip: a pseudo-element, so it has anatomy but no class
+    tabs: ['tab', 'item', 'icon', 'nav-button', 'content', 'badge', 'indicator'],
+    '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-size', '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: [
+      // wave H: anatomy the folder needed to enter `migrated`
+      'alert', 'alerts', 'button', 'confirmation-popup-content', 'confirmation-popup-toolbar',
+      'content', 'edited', 'section', 'size', 'start', 'view-items',
+      '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',
+      // wave B3: .dx-chat-messagebubble-image is a real <img> box inside a bubble
+      'image'],
+    /*
+     * `alpha` alone was doing three jobs — the alpha row, the alpha cell and the alpha scale are
+     * three different elements with three different sizes, so each gets its own segment and the
+     * bare `alpha` is gone. `apply-button` names the dialog button the base layer sizes.
+     */
+    'color-view': ['palette', 'palette-cell', 'hue-scale', 'hue-scale-cell', 'hue-scale-wrapper', 'controls',
+      'alpha-row', 'alpha-cell', 'alpha-scale', 'alpha-label', 'apply-button',
+      'container', 'label', 'handle', 'color-preview', 'preview', 'textbox', 'hex', 'overlay',
+      'content-box', 'bg-box'],
+    diagram: [
+      // wave H: anatomy the folder needed to enter `migrated`
+      'accordion-v', 'close-icon', 'closebutton', 'colorbutton', 'connection', 'connector', 'container', 'editor', 'editor-button', 'geometry-mark', 'h', 'input', 'input-button', 'input-image', 'items', 'large-editor', 'medium-editor', 'mobile', 'muted', 'properties-layout-icon', 'selection', 'separator', 'touchbar-item','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: [
+      // wave H: anatomy the folder needed to enter `migrated`
+      'arrow', 'dependency-successor', 'edit-frame', 'edit-successor-dependency-l', 'header-item',
+      'items-container', 'milestone', 'notch', 'selection', 'successor',
+      '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',
+      // wave B14: the quoted block, a table cell, and the bar that resizes a column or row together
+      // with the strip that highlights the one being dragged
+      'blockquote', 'cell', 'resizer', 'highlight'],
+    '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', 'drag-source', '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: [
+      // wave H: anatomy the folder needed to enter `migrated`
+      'content', 'optional-mark','step', 'step-indicator', 'step-label', 'label', 'connector', 'value', 'icon', 'text',
+      'item', 'container',
+      // wave B3: the two box-shadow rings around the indicator — `ring` is the selection ring,
+      // `halo` is the gap the indicator punches in the connector behind it
+      'ring', 'halo'],
+    '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': [
+      // wave H: anatomy the 06.08 untangling gave base parameters, but the vocabulary never got
+      'thumbnail', 'box', 'path-separator', 'dialog', 'dialog-name-editor',
+      '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',
+      // wave B5: .dx-splitter-wrapper is a splitter box the file manager positions itself
+      'splitter-wrapper',
+      'cancel-button', 'notification', 'container', 'separator', 'content', 'item', 'menu-item',
+      'popup', 'overlay', 'editor', 'button', 'icon', 'text', 'title', 'image', 'placeholder',
+      'drop-zone',
+    ],
+    'file-uploader': [
+      // wave H: anatomy the folder needed to enter `migrated`
+      'line',
+      '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'],
+    // `input-container` is .dx-texteditor-input-container: the editor's box, but the text area is
+    // the only widget that re-margins it, so the knob is named after the text area.
+    'text-area': ['content', 'input-container'],
+    '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', 'separator'],
+    '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', 'context-menu', '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',
+      /*
+       * Opening the last of the base-layer fixed sizes: `expand-column` completes the
+       * select/edit/adaptive column family that was already here, `toolbar` and
+       * `regenerate-button` name the AI chat parts the base layer sizes
+       * (.dx-ai-chat .dx-popup-title .dx-toolbar-item, .dx-ai-chat__message-regenerate-button),
+       * and `confirm-dialog` the AI assistant dialog whose buttons carry a fixed width.
+       */
+      'expand-column', 'toolbar', 'regenerate-button', 'confirm-dialog',
+      // the last of the base-layer sizes: menu bar and caption, the search panel, the bottom
+      // load panel and the rows view, each named after the class the shared layer sizes
+      'menu-bar', 'menu-caption', 'search-panel', 'bottom-load-panel', 'rowsview',
+      // .dx-column-indicators: the sort / header-filter icon strip in a column header
+      'column-indicator',
+    ],
+    // 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',
+      // wave B13: the strip the floating label sits on (.dx-label::before) and the glyph inside an
+      // editor button (.dx-button-content .dx-icon) are both real boxes with sizes of their own
+      'backdrop', 'icon',
+    ],
+  },
+};
+
+// ---------------------------------------------------------------------------------------------
+// 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 { tokens } = JSON.parse(readFileSync(flatTokens, 'utf8'));
+  const names = Object.keys(tokens)
+    .filter((key) => key.startsWith(`${COMPONENT_TOKEN_SOURCE}:`))
+    .map((key) => key.slice(key.indexOf(':') + 1).replace(/\//g, '-'));
+
+  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}`);
+    }
+  });
+};
+
+/*
+ * The typo gate for rootSelectors: every class the emitter will declare on must exist in the built
+ * bundle. Hard requirement when REGENERATING (regeneration is a curated act — build first); --check
+ * still works without a build (byte comparison; the committed content already passed the gate).
+ */
+const assertRootSelectorsExist = (rootSelectors) => {
+  const bundle = join(packageRoot, '..', 'devextreme', 'artifacts', 'css', 'dx.fluent-next.blue.light.css');
+  try {
+    statSync(bundle);
+  } catch {
+    if (process.argv.includes('--check')) {
+      process.stderr.write('note: built bundle absent — rootSelectors gate skipped for --check\n');
+      return;
+    }
+    throw new Error(`rootSelectors gate needs the built bundle at ${bundle} — build the theme first`);
+  }
+  const classes = new Set(
+    [...readFileSync(bundle, 'utf8').matchAll(/\.(dx-[a-z0-9-]+)/g)].map((match) => match[1]),
+  );
+  Object.entries(rootSelectors).forEach(([component, selectors]) => {
+    selectors.forEach((selector) => {
+      if (selector === ':root') return;
+      if (!/^\.dx-[a-z0-9-]+$/.test(selector)) {
+        throw new Error(`rootSelectors[${component}]: "${selector}" is not a single .dx-* class or :root`);
+      }
+      if (!classes.has(selector.slice(1))) {
+        throw new Error(`rootSelectors[${component}]: "${selector}" does not occur in the built bundle`);
+      }
+    });
+  });
+};
+
+const build = () => {
+  const folders = listFolders(themeDir);
+  /*
+   * The PACKAGE's own state vocabulary, used only to strip a trailing state off a token name
+   * while deriving parts. It is not our grammar: the package's component tier still spells the
+   * resting value `-rest` (300 of its 732 names), so `rest` has to be strippable here even when
+   * our own names leave it implicit — otherwise `rest` is read as the part and the real parts
+   * (backdrop, grip, scrim, thumb, veil) vanish.
+   */
+  const derived = deriveFromTokens([...OVERRIDES.states, 'rest']);
+
+  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);
+
+  // Wave F: emission scope per migrated component — explicit override or the derived widget class
+  const rootSelectors = {};
+  [...OVERRIDES.migrated, ...OVERRIDES.systemTier].forEach((component) => {
+    rootSelectors[component] = OVERRIDES.rootSelectors[component]
+      ?? [`.dx-${component.replace(/-/g, '')}`];
+  });
+  const orphanRoots = Object.keys(OVERRIDES.rootSelectors)
+    .filter((component) => !OVERRIDES.migrated.includes(component)
+      && !OVERRIDES.systemTier.includes(component));
+  if (orphanRoots.length) {
+    throw new Error(`rootSelectors for non-migrated components: ${orphanRoots.join(', ')}`);
+  }
+  assertRootSelectorsExist(rootSelectors);
+
+  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 the '
+      + '@devexpress/design-tokens-internal package and from the theme folder layout.',
+    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: `@devexpress/design-tokens-internal → ${COMPONENT_TOKEN_SOURCE}`,
+      componentTokenCount: derived.tokenCount,
+      themeFolders: folders.length,
+    },
+    components,
+    declarationHome,
+    systemFolders: OVERRIDES.systemFolders,
+    systemTier: OVERRIDES.systemTier,
+    systemConcerns: [...OVERRIDES.systemConcerns].sort(),
+    chassis: OVERRIDES.chassis,
+    rootSelectors,
+    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..26307dbc1c8b
--- /dev/null
+++ b/packages/devextreme-scss/tools/naming/mapping.json
@@ -0,0 +1,2335 @@
+{
+  "$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 — 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 — 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 — 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 — 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 — 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 — 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 — because the variable is only ever handed to a base mixin that renames it — 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 — 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) — 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 — 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 — `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 — 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` — the resource label, not the task bar — 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 — 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 — 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 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 — 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 *` — 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 — 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 — 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.",
+    "",
+    "F0-base-feeders:",
+    "два безопасных переименования (diagram: без двойника; checkBox: питатель мёртвого правила",
+    "удалён расфидиванием, имя освобождено — устаревшая запись B2-батча снята). 12 питателей",
+    "'-2'-ключей base (fileManager 8, fileUploader 3, pagination 1) НЕ переименованы: их",
+    "грамматические имена заняты питателями СТАРЫХ ключей тех же пар — у base параметры",
+    "задублированы (старый + -2); развязка = чистка дублей в base, см. DIVERGENCES.",
+    "",
+    "F1-anatomy:",
+    "вскрытие пар «старый / -2» в base показало: это НЕ дубли одного места, а РАЗНЫЕ элементы,",
+    "которые base пронумеровал вместо имён (нотификейшн- против диалог-попапов, parent-folder против",
+    "path-separator в breadcrumbs, все .dx-page-size против first-child). Питатели '-2'-ключей получают",
+    "анатомические имена по селекторам base; трио name-editor делит значения с delete-item-диалогом —",
+    "имя по каноническому хозяину (правило 5). margin-left сохраняет физическое слово: base красит",
+    "left в обоих направлениях (rtl-блоки проверены). file-container-padding-2 не переименован,",
+    "а расфидлен: тема красит тот же селектор своим правилом, base-правило мёртвое."
+  ],
+  "batches": {
+    "C0-toast": {
+      "$toast-default-bg": "$toast-bg-rest",
+      "$toast-info-color": "$toast-info-content-rest",
+      "$toast-warning-color": "$toast-warning-content-rest",
+      "$toast-error-color": "$toast-error-content-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-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-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-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-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-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-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-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-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-width",
+      "$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-color": "$badge-content-rest",
+      "$badge-text-color-disabled": "$badge-content-disabled",
+      "$button-group-separator-color": "$button-group-separator-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",
+      "$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-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-width",
+      "$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-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-border-color": "$diagram-border-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-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-width",
+      "$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-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-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-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-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-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-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-border-color": "$menu-popup-border-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-color": "$popup-bottom-content-rest",
+      "$popup-focused-content-shadow-color": "$popup-content-shadow-focused",
+      "$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-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-hover-bg": "$speed-dial-action-bg-hovered",
+      "$speed-dial-action-main-active-bg": "$speed-dial-action-main-bg-active",
+      "$speed-dial-action-main-hover-bg": "$speed-dial-action-main-bg-hovered",
+      "$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-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"
+    },
+    "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-bg-rest",
+      "$dateview-shadow-up": "$date-view-roller-top-bg-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-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-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",
+      "$chat-avatar-background-color": "$chat-avatar-bg-rest",
+      "$chat-file-container-background-color": "$chat-file-container-bg-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",
+      "$colorview-handle-border-color": "$color-view-handle-border-rest",
+      "$colorview-label-color": "$color-view-label-content-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-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-inverted-text-color": "$scheduler-inverted-content-rest",
+      "$scheduler-workspace-other-month-text-color": "$scheduler-workspace-other-month-content-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-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-bg-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",
+      "$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-hover-bg": "$stepper-step-accent-bg-hovered",
+      "$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-width",
+      "$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-width",
+      "$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-width",
+      "$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",
+      "$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-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-bg-rest",
+      "$filterbuilder-group-operation-focus-color": "$filter-builder-group-operation-bg-focused",
+      "$filterbuilder-group-operation-hover-color": "$filter-builder-group-operation-bg-hovered",
+      "$filterbuilder-item-field-color": "$filter-builder-item-field-bg-rest",
+      "$filterbuilder-item-field-focus-color": "$filter-builder-item-field-bg-focused",
+      "$filterbuilder-item-field-hover-color": "$filter-builder-item-field-bg-hovered",
+      "$filterbuilder-item-operator-color": "$filter-builder-item-operator-bg-rest",
+      "$filterbuilder-item-operator-focus-color": "$filter-builder-item-operator-bg-focused",
+      "$filterbuilder-item-operator-hover-color": "$filter-builder-item-operator-bg-hovered",
+      "$filterbuilder-item-value-color": "$filter-builder-item-value-bg-rest",
+      "$filterbuilder-item-value-focus-color": "$filter-builder-item-value-bg-focused",
+      "$filterbuilder-item-value-hover-color": "$filter-builder-item-value-bg-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-outline-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-bg-active",
+      "$scheduler-appointment-base-color": "$scheduler-appointment-base-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-bg-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-bg-rest",
+      "$pivotgrid-totalcolor": "$pivot-grid-total-bg-rest",
+      "$scheduler-appointment-start-color": "$scheduler-appointment-start-shadow-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"
+    },
+    "F0-base-feeders": {
+      "$fluent-diagram-button-min-height": "$diagram-toolbox-input-button-min-height",
+      "$fluent-checkbox-text-padding-start": "$check-box-text-padding-inline-start"
+    },
+    "F1-anatomy": {
+      "$fluent-filemanager-menu-item-content-padding-left-2": "$file-manager-breadcrumbs-path-separator-padding-inline-start",
+      "$fluent-filemanager-menu-item-content-padding-right-2": "$file-manager-breadcrumbs-path-separator-padding-inline-end",
+      "$fluent-filemanager-overlay-content-min-width-2": "$file-manager-dialog-min-width",
+      "$fluent-filemanager-overlay-content-max-width-2": "$file-manager-dialog-name-editor-max-width",
+      "$fluent-filemanager-overlay-content-min-height-2": "$file-manager-dialog-name-editor-min-height",
+      "$fluent-filemanager-overlay-content-max-height-2": "$file-manager-dialog-name-editor-max-height",
+      "$fluent-filemanager-progress-box-padding-2": "$file-manager-progress-panel-box-padding",
+      "$fluent-filemanager-progress-box-common-padding": "$file-manager-progress-box-common-padding",
+      "$fluent-fileuploader-button-margin-left-2": "$file-uploader-file-container-button-margin-left",
+      "$fluent-fileuploader-file-status-message-margin-bottom-2": "$file-uploader-file-status-message-line-margin-block-end",
+      "$fluent-pagination-first-child-margin-left-2": "$pagination-page-size-margin-left"
+    },
+    "G0-implicit-rest": {
+      "$accordion-bg-rest": "$accordion-bg",
+      "$accordion-content-rest": "$accordion-content",
+      "$accordion-title-content-rest": "$accordion-title-content",
+      "$backdrop-rest": "$backdrop-bg",
+      "$badge-content-rest": "$badge-content",
+      "$button-danger-contained-bg-rest": "$button-danger-contained-bg",
+      "$button-danger-contained-content-rest": "$button-danger-contained-content",
+      "$button-danger-contained-icon-rest": "$button-danger-contained-icon",
+      "$button-danger-outlined-border-rest": "$button-danger-outlined-border",
+      "$button-danger-outlined-content-rest": "$button-danger-outlined-content",
+      "$button-danger-text-content-rest": "$button-danger-text-content",
+      "$button-default-contained-bg-rest": "$button-default-contained-bg",
+      "$button-default-contained-content-rest": "$button-default-contained-content",
+      "$button-default-contained-icon-rest": "$button-default-contained-icon",
+      "$button-default-outlined-border-rest": "$button-default-outlined-border",
+      "$button-default-outlined-content-rest": "$button-default-outlined-content",
+      "$button-default-text-content-rest": "$button-default-text-content",
+      "$button-group-separator-rest": "$button-group-separator",
+      "$button-normal-contained-bg-rest": "$button-normal-contained-bg",
+      "$button-normal-contained-content-rest": "$button-normal-contained-content",
+      "$button-normal-contained-icon-rest": "$button-normal-contained-icon",
+      "$button-normal-outlined-border-rest": "$button-normal-outlined-border",
+      "$button-normal-shadow-rest": "$button-normal-shadow",
+      "$button-success-contained-bg-rest": "$button-success-contained-bg",
+      "$button-success-contained-content-rest": "$button-success-contained-content",
+      "$button-success-contained-icon-rest": "$button-success-contained-icon",
+      "$button-success-outlined-border-rest": "$button-success-outlined-border",
+      "$button-success-outlined-content-rest": "$button-success-outlined-content",
+      "$button-success-text-content-rest": "$button-success-text-content",
+      "$calendar-cell-contoured-border-rest": "$calendar-cell-contoured-border",
+      "$calendar-cell-other-content-rest": "$calendar-cell-other-content",
+      "$calendar-content-rest": "$calendar-content",
+      "$calendar-header-content-rest": "$calendar-header-content",
+      "$calendar-invalid-border-rest": "$calendar-invalid-border",
+      "$calendar-navigator-content-rest": "$calendar-navigator-content",
+      "$calendar-week-number-cell-content-rest": "$calendar-week-number-cell-content",
+      "$chat-alert-list-content-rest": "$chat-alert-list-content",
+      "$chat-avatar-bg-rest": "$chat-avatar-bg",
+      "$chat-avatar-content-rest": "$chat-avatar-content",
+      "$chat-bg-rest": "$chat-bg",
+      "$chat-border-rest": "$chat-border",
+      "$chat-bubble-primary-bg-rest": "$chat-bubble-primary-bg",
+      "$chat-bubble-primary-content-rest": "$chat-bubble-primary-content",
+      "$chat-bubble-secondary-bg-rest": "$chat-bubble-secondary-bg",
+      "$chat-bubble-secondary-content-rest": "$chat-bubble-secondary-content",
+      "$chat-file-container-bg-rest": "$chat-file-container-bg",
+      "$chat-file-secondary-content-rest": "$chat-file-secondary-content",
+      "$chat-information-author-name-content-rest": "$chat-information-author-name-content",
+      "$chat-information-timestamp-content-rest": "$chat-information-timestamp-content",
+      "$chat-message-box-border-rest": "$chat-message-box-border",
+      "$chat-message-box-file-bg-rest": "$chat-message-box-file-bg",
+      "$chat-message-box-file-cancel-button-secondary-content-rest": "$chat-message-box-file-cancel-button-secondary-content",
+      "$chat-message-editing-preview-accent-content-rest": "$chat-message-editing-preview-accent-content",
+      "$chat-message-editing-preview-cancel-button-content-rest": "$chat-message-editing-preview-cancel-button-content",
+      "$chat-message-list-context-menu-delete-button-content-rest": "$chat-message-list-context-menu-delete-button-content",
+      "$chat-message-list-day-header-content-rest": "$chat-message-list-day-header-content",
+      "$chat-message-list-empty-icon-bg-rest": "$chat-message-list-empty-icon-bg",
+      "$chat-message-list-empty-icon-rest": "$chat-message-list-empty-icon",
+      "$chat-message-list-empty-message-content-rest": "$chat-message-list-empty-message-content",
+      "$chat-message-list-empty-prompt-content-rest": "$chat-message-list-empty-prompt-content",
+      "$chat-typing-indicator-bubble-bg-rest": "$chat-typing-indicator-bubble-bg",
+      "$chat-typing-indicator-circle-bg-rest": "$chat-typing-indicator-circle-bg",
+      "$chat-typing-indicator-circle-center-bg-rest": "$chat-typing-indicator-circle-center-bg",
+      "$chat-typing-indicator-content-rest": "$chat-typing-indicator-content",
+      "$check-box-border-rest": "$check-box-border",
+      "$check-box-icon-bg-rest": "$check-box-icon-bg",
+      "$check-box-icon-checked-bg-rest": "$check-box-icon-checked-bg",
+      "$check-box-invalid-bg-rest": "$check-box-invalid-bg",
+      "$check-box-invalid-border-rest": "$check-box-invalid-border",
+      "$check-box-invalid-mark-bg-rest": "$check-box-invalid-mark-bg",
+      "$color-box-preview-icon-rest": "$color-box-preview-icon",
+      "$color-view-bg-box-palette-cell-bg-rest": "$color-view-bg-box-palette-cell-bg",
+      "$color-view-border-rest": "$color-view-border",
+      "$color-view-content-box-overlay-bg-rest": "$color-view-content-box-overlay-bg",
+      "$color-view-handle-border-rest": "$color-view-handle-border",
+      "$color-view-handle-bg-rest": "$color-view-handle-bg",
+      "$color-view-label-content-rest": "$color-view-label-content",
+      "$context-menu-icon-rest": "$context-menu-icon",
+      "$context-menu-shadow-rest": "$context-menu-shadow",
+      "$data-grid-block-separator-bg-rest": "$data-grid-block-separator-bg",
+      "$data-grid-group-panel-item-bg-rest": "$data-grid-group-panel-item-bg",
+      "$data-grid-group-panel-item-border-rest": "$data-grid-group-panel-item-border",
+      "$date-view-content-rest": "$date-view-content",
+      "$date-view-roller-bottom-bg-rest": "$date-view-roller-bottom-bg",
+      "$date-view-roller-top-bg-rest": "$date-view-roller-top-bg",
+      "$diagram-border-rest": "$diagram-border",
+      "$diagram-connection-border-rest": "$diagram-connection-border",
+      "$diagram-connector-border-rest": "$diagram-connector-border",
+      "$diagram-content-rest": "$diagram-content",
+      "$diagram-danger-icon-rest": "$diagram-danger-icon",
+      "$diagram-geometry-mark-border-rest": "$diagram-geometry-mark-border",
+      "$diagram-image-icon-accent-border-rest": "$diagram-image-icon-accent-border",
+      "$diagram-image-icon-base-content-rest": "$diagram-image-icon-base-content",
+      "$diagram-popup-title-toolbar-bg-rest": "$diagram-popup-title-toolbar-bg",
+      "$diagram-properties-panel-icon-rest": "$diagram-properties-panel-icon",
+      "$diagram-selection-bg-rest": "$diagram-selection-bg",
+      "$diagram-selection-mark-content-rest": "$diagram-selection-mark-content",
+      "$diagram-toolbar-border-rest": "$diagram-toolbar-border",
+      "$drawer-backdrop-rest": "$drawer-backdrop",
+      "$drop-down-editor-icon-opacity-rest": "$drop-down-editor-icon-opacity",
+      "$drop-down-editor-icon-rest": "$drop-down-editor-icon",
+      "$fieldset-field-label-content-rest": "$fieldset-field-label-content",
+      "$fieldset-field-value-invalid-content-rest": "$fieldset-field-value-invalid-content",
+      "$file-manager-bg-rest": "$file-manager-bg",
+      "$file-manager-border-rest": "$file-manager-border",
+      "$file-manager-custom-thumbnail-content-rest": "$file-manager-custom-thumbnail-content",
+      "$file-manager-danger-bg-rest": "$file-manager-danger-bg",
+      "$file-manager-drop-zone-placeholder-border-rest": "$file-manager-drop-zone-placeholder-border",
+      "$file-manager-file-item-select-bg-rest": "$file-manager-file-item-select-bg",
+      "$file-manager-file-item-select-content-rest": "$file-manager-file-item-select-content",
+      "$file-manager-file-toolbar-bg-rest": "$file-manager-file-toolbar-bg",
+      "$file-manager-icon-danger-content-rest": "$file-manager-icon-danger-content",
+      "$file-manager-icon-inverted-content-rest": "$file-manager-icon-inverted-content",
+      "$file-manager-icon-rest": "$file-manager-icon",
+      "$file-manager-icon-success-content-rest": "$file-manager-icon-success-content",
+      "$file-manager-inverted-content-rest": "$file-manager-inverted-content",
+      "$file-uploader-border-rest": "$file-uploader-border",
+      "$file-uploader-file-container-shadow-rest": "$file-uploader-file-container-shadow",
+      "$file-uploader-file-icon-rest": "$file-uploader-file-icon",
+      "$file-uploader-file-name-content-rest": "$file-uploader-file-name-content",
+      "$file-uploader-file-name-status-content-rest": "$file-uploader-file-name-status-content",
+      "$file-uploader-file-status-message-invalid-content-rest": "$file-uploader-file-status-message-invalid-content",
+      "$file-uploader-files-container-bg-rest": "$file-uploader-files-container-bg",
+      "$file-uploader-label-content-rest": "$file-uploader-label-content",
+      "$file-uploader-progress-bar-status-content-rest": "$file-uploader-progress-bar-status-content",
+      "$filter-builder-bg-rest": "$filter-builder-bg",
+      "$filter-builder-content-rest": "$filter-builder-content",
+      "$filter-builder-group-operation-bg-rest": "$filter-builder-group-operation-bg",
+      "$filter-builder-item-field-bg-rest": "$filter-builder-item-field-bg",
+      "$filter-builder-item-operator-bg-rest": "$filter-builder-item-operator-bg",
+      "$filter-builder-item-value-bg-rest": "$filter-builder-item-value-bg",
+      "$filter-builder-menu-icon-rest": "$filter-builder-menu-icon",
+      "$filter-builder-plus-icon-rest": "$filter-builder-plus-icon",
+      "$filter-builder-remove-icon-rest": "$filter-builder-remove-icon",
+      "$focus-rect-outline-rest": "$focus-rect-outline",
+      "$form-field-item-content-rest": "$form-field-item-content",
+      "$form-field-mark-content-rest": "$form-field-mark-content",
+      "$form-field-required-content-rest": "$form-field-required-content",
+      "$form-group-border-rest": "$form-group-border",
+      "$form-item-help-content-rest": "$form-item-help-content",
+      "$gallery-indicator-item-border-rest": "$gallery-indicator-item-border",
+      "$gallery-nav-arrow-content-rest": "$gallery-nav-arrow-content",
+      "$gallery-nav-button-bg-rest": "$gallery-nav-button-bg",
+      "$gantt-accent-border-rest": "$gantt-accent-border",
+      "$gantt-border-rest": "$gantt-border",
+      "$gantt-content-rest": "$gantt-content",
+      "$gantt-icon-rest": "$gantt-icon",
+      "$gantt-parent-task-bg-rest": "$gantt-parent-task-bg",
+      "$gantt-selection-bg-rest": "$gantt-selection-bg",
+      "$gantt-task-bg-rest": "$gantt-task-bg",
+      "$gantt-task-progress-bg-rest": "$gantt-task-progress-bg",
+      "$gantt-task-res-bg-rest": "$gantt-task-res-bg",
+      "$gantt-task-res-content-rest": "$gantt-task-res-content",
+      "$gantt-ti-bg-rest": "$gantt-ti-bg",
+      "$global-bg-rest": "$global-bg",
+      "$global-content-rest": "$global-content",
+      "$grid-ai-chat-message-border-rest": "$grid-ai-chat-message-border",
+      "$grid-ai-chat-message-error-content-rest": "$grid-ai-chat-message-error-content",
+      "$grid-ai-chat-message-pending-content-rest": "$grid-ai-chat-message-pending-content",
+      "$grid-ai-chat-message-success-content-rest": "$grid-ai-chat-message-success-content",
+      "$grid-bg-rest": "$grid-bg",
+      "$grid-border-rest": "$grid-border",
+      "$grid-cell-modified-bg-rest": "$grid-cell-modified-bg",
+      "$grid-cell-removed-border-rest": "$grid-cell-removed-border",
+      "$grid-cell-removed-content-rest": "$grid-cell-removed-content",
+      "$grid-chevron-icon-rest": "$grid-chevron-icon",
+      "$grid-column-chooser-bg-rest": "$grid-column-chooser-bg",
+      "$grid-column-chooser-item-bg-rest": "$grid-column-chooser-item-bg",
+      "$grid-column-chooser-item-content-rest": "$grid-column-chooser-item-content",
+      "$grid-column-chooser-message-content-rest": "$grid-column-chooser-message-content",
+      "$grid-column-separator-bg-rest": "$grid-column-separator-bg",
+      "$grid-content-rest": "$grid-content",
+      "$grid-drag-header-bg-rest": "$grid-drag-header-bg",
+      "$grid-drag-header-border-rest": "$grid-drag-header-border",
+      "$grid-drag-header-shadow-ambient-rest": "$grid-drag-header-shadow-ambient",
+      "$grid-drag-header-shadow-key-rest": "$grid-drag-header-shadow-key",
+      "$grid-draggable-column-content-rest": "$grid-draggable-column-content",
+      "$grid-drop-highlight-bg-rest": "$grid-drop-highlight-bg",
+      "$grid-drop-highlight-content-rest": "$grid-drop-highlight-content",
+      "$grid-editor-bg-rest": "$grid-editor-bg",
+      "$grid-filter-panel-content-rest": "$grid-filter-panel-content",
+      "$grid-filter-row-bg-rest": "$grid-filter-row-bg",
+      "$grid-group-row-bg-rest": "$grid-group-row-bg",
+      "$grid-group-row-content-rest": "$grid-group-row-content",
+      "$grid-header-filter-empty-icon-rest": "$grid-header-filter-empty-icon",
+      "$grid-header-filter-icon-rest": "$grid-header-filter-icon",
+      "$grid-icon-rest": "$grid-icon",
+      "$grid-link-content-rest": "$grid-link-content",
+      "$grid-master-detail-cell-bg-rest": "$grid-master-detail-cell-bg",
+      "$grid-no-data-content-rest": "$grid-no-data-content",
+      "$grid-row-alternation-bg-rest": "$grid-row-alternation-bg",
+      "$grid-row-error-bg-rest": "$grid-row-error-bg",
+      "$grid-row-error-content-rest": "$grid-row-error-content",
+      "$grid-row-invalid-bg-rest": "$grid-row-invalid-bg",
+      "$grid-row-removed-bg-rest": "$grid-row-removed-bg",
+      "$grid-search-bg-rest": "$grid-search-bg",
+      "$grid-search-content-rest": "$grid-search-content",
+      "$grid-selection-bg-rest": "$grid-selection-bg",
+      "$grid-summary-bg-rest": "$grid-summary-bg",
+      "$grid-summary-content-rest": "$grid-summary-content",
+      "$grid-text-stub-bg-rest": "$grid-text-stub-bg",
+      "$html-editor-code-block-bg-rest": "$html-editor-code-block-bg",
+      "$html-editor-cover-bg-rest": "$html-editor-cover-bg",
+      "$html-editor-faded-content-rest": "$html-editor-faded-content",
+      "$html-editor-file-uploader-input-wrapper-bg-rest": "$html-editor-file-uploader-input-wrapper-bg",
+      "$html-editor-file-uploader-input-wrapper-border-rest": "$html-editor-file-uploader-input-wrapper-border",
+      "$html-editor-highlighted-row-bg-rest": "$html-editor-highlighted-row-bg",
+      "$html-editor-mention-bg-rest": "$html-editor-mention-bg",
+      "$html-editor-placeholder-content-rest": "$html-editor-placeholder-content",
+      "$html-editor-resize-frame-border-rest": "$html-editor-resize-frame-border",
+      "$html-editor-resize-trigger-rest": "$html-editor-resize-trigger",
+      "$html-editor-table-border-rest": "$html-editor-table-border",
+      "$html-editor-toolbar-border-rest": "$html-editor-toolbar-border",
+      "$html-editor-uploader-cover-bg-rest": "$html-editor-uploader-cover-bg",
+      "$html-editor-variable-bg-rest": "$html-editor-variable-bg",
+      "$icon-pulldown-bg-rest": "$icon-pulldown-bg",
+      "$informer-error-bg-rest": "$informer-error-bg",
+      "$informer-error-content-rest": "$informer-error-content",
+      "$informer-info-bg-rest": "$informer-info-bg",
+      "$informer-info-content-rest": "$informer-info-content",
+      "$invalid-badge-bg-rest": "$invalid-badge-bg",
+      "$invalid-badge-content-rest": "$invalid-badge-content",
+      "$list-base-select-all-separator-bg-rest": "$list-base-select-all-separator-bg",
+      "$list-border-rest": "$list-border",
+      "$list-expanded-group-content-rest": "$list-expanded-group-content",
+      "$list-group-content-rest": "$list-group-content",
+      "$list-header-indicator-content-rest": "$list-header-indicator-content",
+      "$list-hold-menu-bg-rest": "$list-hold-menu-bg",
+      "$list-hold-menu-border-rest": "$list-hold-menu-border",
+      "$list-hold-menu-shadow-rest": "$list-hold-menu-shadow",
+      "$list-icon-rest": "$list-icon",
+      "$list-inverted-content-rest": "$list-inverted-content",
+      "$list-item-ghost-border-rest": "$list-item-ghost-border",
+      "$list-item-ghost-content-rest": "$list-item-ghost-content",
+      "$list-menu-button-default-content-rest": "$list-menu-button-default-content",
+      "$list-normal-content-rest": "$list-normal-content",
+      "$list-toggle-delete-icon-rest": "$list-toggle-delete-icon",
+      "$load-indicator-segment-border-rest": "$load-indicator-segment-border",
+      "$load-indicator-segment-inner-border-rest": "$load-indicator-segment-inner-border",
+      "$load-indicator-sparkle-stop-1-bg-rest": "$load-indicator-sparkle-stop-1-bg",
+      "$load-indicator-sparkle-stop-2-bg-rest": "$load-indicator-sparkle-stop-2-bg",
+      "$load-indicator-sparkle-stop-3-bg-rest": "$load-indicator-sparkle-stop-3-bg",
+      "$load-panel-content-bg-rest": "$load-panel-content-bg",
+      "$lookup-icon-rest": "$lookup-icon",
+      "$menu-content-rest": "$menu-content",
+      "$menu-item-expanded-content-rest": "$menu-item-expanded-content",
+      "$menu-item-link-content-rest": "$menu-item-link-content",
+      "$menu-popup-border-rest": "$menu-popup-border",
+      "$number-box-spin-icon-rest": "$number-box-spin-icon",
+      "$number-box-spin-opacity-rest": "$number-box-spin-opacity",
+      "$pivot-grid-accent-outline-rest": "$pivot-grid-accent-outline",
+      "$pivot-grid-area-bg-rest": "$pivot-grid-area-bg",
+      "$pivot-grid-area-content-rest": "$pivot-grid-area-content",
+      "$pivot-grid-area-field-bg-rest": "$pivot-grid-area-field-bg",
+      "$pivot-grid-border-rest": "$pivot-grid-border",
+      "$pivot-grid-chevron-icon-rest": "$pivot-grid-chevron-icon",
+      "$pivot-grid-content-rest": "$pivot-grid-content",
+      "$pivot-grid-data-area-content-rest": "$pivot-grid-data-area-content",
+      "$pivot-grid-drag-header-border-rest": "$pivot-grid-drag-header-border",
+      "$pivot-grid-drag-header-first-shadow-rest": "$pivot-grid-drag-header-first-shadow",
+      "$pivot-grid-drag-header-shadow-key-rest": "$pivot-grid-drag-header-shadow-key",
+      "$pivot-grid-drag-header-shadow-rest": "$pivot-grid-drag-header-shadow",
+      "$pivot-grid-field-area-box-bg-rest": "$pivot-grid-field-area-box-bg",
+      "$pivot-grid-field-area-box-content-rest": "$pivot-grid-field-area-box-content",
+      "$pivot-grid-field-area-content-rest": "$pivot-grid-field-area-content",
+      "$pivot-grid-grand-total-bg-rest": "$pivot-grid-grand-total-bg",
+      "$pivot-grid-header-filter-content-rest": "$pivot-grid-header-filter-content",
+      "$pivot-grid-position-indicator-bg-rest": "$pivot-grid-position-indicator-bg",
+      "$pivot-grid-total-bg-rest": "$pivot-grid-total-bg",
+      "$popup-bottom-content-rest": "$popup-bottom-content",
+      "$popup-content-shadow-ambient-rest": "$popup-content-shadow-ambient",
+      "$popup-content-shadow-key-rest": "$popup-content-shadow-key",
+      "$popup-dialog-backdrop-rest": "$popup-dialog-backdrop",
+      "$popup-title-border-rest": "$popup-title-border",
+      "$popup-title-content-rest": "$popup-title-content",
+      "$progress-bar-bg-rest": "$progress-bar-bg",
+      "$progress-bar-indeterminate-bg-rest": "$progress-bar-indeterminate-bg",
+      "$progress-bar-indeterminate-invalid-bg-rest": "$progress-bar-indeterminate-invalid-bg",
+      "$progress-bar-label-content-rest": "$progress-bar-label-content",
+      "$progress-bar-range-bg-rest": "$progress-bar-range-bg",
+      "$progress-bar-range-indeterminate-bg-rest": "$progress-bar-range-indeterminate-bg",
+      "$progress-bar-range-invalid-bg-rest": "$progress-bar-range-invalid-bg",
+      "$radio-button-checked-bg-rest": "$radio-button-checked-bg",
+      "$radio-button-icon-bg-rest": "$radio-button-icon-bg",
+      "$radio-button-icon-border-rest": "$radio-button-icon-border",
+      "$radio-button-invalid-bg-rest": "$radio-button-invalid-bg",
+      "$scheduler-accent-border-rest": "$scheduler-accent-border",
+      "$scheduler-agenda-appointment-content-rest": "$scheduler-agenda-appointment-content",
+      "$scheduler-agenda-appointment-recurrence-icon-rest": "$scheduler-agenda-appointment-recurrence-icon",
+      "$scheduler-all-day-panel-bg-rest": "$scheduler-all-day-panel-bg",
+      "$scheduler-appointment-base-bg-rest": "$scheduler-appointment-base-bg",
+      "$scheduler-appointment-content-rest": "$scheduler-appointment-content",
+      "$scheduler-appointment-dragging-shadow-rest": "$scheduler-appointment-dragging-shadow",
+      "$scheduler-appointment-start-shadow-rest": "$scheduler-appointment-start-shadow",
+      "$scheduler-appointment-strip-bg-rest": "$scheduler-appointment-strip-bg",
+      "$scheduler-base-border-rest": "$scheduler-base-border",
+      "$scheduler-border-rest": "$scheduler-border",
+      "$scheduler-current-time-cell-content-rest": "$scheduler-current-time-cell-content",
+      "$scheduler-current-time-cell-date-bg-rest": "$scheduler-current-time-cell-date-bg",
+      "$scheduler-dropdown-appointment-date-content-rest": "$scheduler-dropdown-appointment-date-content",
+      "$scheduler-droppable-cell-bg-rest": "$scheduler-droppable-cell-bg",
+      "$scheduler-first-month-border-rest": "$scheduler-first-month-border",
+      "$scheduler-first-month-cell-bg-rest": "$scheduler-first-month-cell-bg",
+      "$scheduler-form-icon-rest": "$scheduler-form-icon",
+      "$scheduler-group-separator-border-rest": "$scheduler-group-separator-border",
+      "$scheduler-header-panel-cell-date-content-rest": "$scheduler-header-panel-cell-date-content",
+      "$scheduler-inverted-content-rest": "$scheduler-inverted-content",
+      "$scheduler-panel-content-rest": "$scheduler-panel-content",
+      "$scheduler-time-indicator-bg-rest": "$scheduler-time-indicator-bg",
+      "$scheduler-time-indicator-content-rest": "$scheduler-time-indicator-content",
+      "$scheduler-tooltip-appointment-content-rest": "$scheduler-tooltip-appointment-content",
+      "$scheduler-tooltip-shadow-rest": "$scheduler-tooltip-shadow",
+      "$scheduler-workspace-accent-content-rest": "$scheduler-workspace-accent-content",
+      "$scheduler-workspace-bg-rest": "$scheduler-workspace-bg",
+      "$scheduler-workspace-month-content-rest": "$scheduler-workspace-month-content",
+      "$scheduler-workspace-other-month-content-rest": "$scheduler-workspace-other-month-content",
+      "$scroll-view-pull-down-bg-rest": "$scroll-view-pull-down-bg",
+      "$scroll-view-shadow-rest": "$scroll-view-shadow",
+      "$select-box-list-bg-rest": "$select-box-list-bg",
+      "$slider-accent-bg-rest": "$slider-accent-bg",
+      "$slider-bar-bg-rest": "$slider-bar-bg",
+      "$slider-border-rest": "$slider-border",
+      "$slider-invalid-bg-rest": "$slider-invalid-bg",
+      "$slider-tooltip-content-rest": "$slider-tooltip-content",
+      "$sortable-clone-shadow-ambient-rest": "$sortable-clone-shadow-ambient",
+      "$sortable-clone-shadow-key-rest": "$sortable-clone-shadow-key",
+      "$sortable-placeholder-border-rest": "$sortable-placeholder-border",
+      "$speed-dial-action-backdrop-rest": "$speed-dial-action-backdrop",
+      "$speed-dial-action-content-rest": "$speed-dial-action-content",
+      "$splitter-bar-border-rest": "$splitter-bar-border",
+      "$splitter-resize-handle-content-rest": "$splitter-resize-handle-content",
+      "$stepper-step-base-border-rest": "$stepper-step-base-border",
+      "$stepper-step-base-content-rest": "$stepper-step-base-content",
+      "$stepper-step-base-label-content-rest": "$stepper-step-base-label-content",
+      "$stepper-step-invalid-border-rest": "$stepper-step-invalid-border",
+      "$stepper-step-invalid-content-rest": "$stepper-step-invalid-content",
+      "$stepper-step-invalid-label-content-rest": "$stepper-step-invalid-label-content",
+      "$stepper-step-shadow-rest": "$stepper-step-shadow",
+      "$surface-overlay-rest": "$surface-overlay",
+      "$switch-handle-on-shadow-rest": "$switch-handle-on-shadow",
+      "$switch-invalid-border-rest": "$switch-invalid-border",
+      "$switch-off-border-rest": "$switch-off-border",
+      "$switch-on-border-rest": "$switch-on-border",
+      "$tab-panel-border-rest": "$tab-panel-border",
+      "$tabs-nav-button-bg-rest": "$tabs-nav-button-bg",
+      "$tabs-tab-bg-rest": "$tabs-tab-bg",
+      "$tabs-tab-content-rest": "$tabs-tab-content",
+      "$tabs-tab-icon-rest": "$tabs-tab-icon",
+      "$tag-box-select-all-line-rest": "$tag-box-select-all-line",
+      "$tag-box-tag-bg-rest": "$tag-box-tag-bg",
+      "$tag-box-tag-content-rest": "$tag-box-tag-content",
+      "$tag-box-tag-remove-button-content-rest": "$tag-box-tag-remove-button-content",
+      "$text-editor-border-rest": "$text-editor-border",
+      "$text-editor-clear-button-icon-rest": "$text-editor-clear-button-icon",
+      "$text-editor-content-rest": "$text-editor-content",
+      "$text-editor-filled-bg-rest": "$text-editor-filled-bg",
+      "$text-editor-indicator-rest": "$text-editor-indicator",
+      "$text-editor-invalid-border-rest": "$text-editor-invalid-border",
+      "$text-editor-invalid-content-rest": "$text-editor-invalid-content",
+      "$text-editor-label-content-rest": "$text-editor-label-content",
+      "$text-editor-line-rest": "$text-editor-line",
+      "$text-editor-outlined-bg-rest": "$text-editor-outlined-bg",
+      "$text-editor-placeholder-rest": "$text-editor-placeholder",
+      "$text-editor-underlined-bg-rest": "$text-editor-underlined-bg",
+      "$tile-view-bg-rest": "$tile-view-bg",
+      "$tile-view-border-rest": "$tile-view-border",
+      "$tile-view-content-rest": "$tile-view-content",
+      "$time-view-clock-accent-bg-rest": "$time-view-clock-accent-bg",
+      "$time-view-clock-bg-rest": "$time-view-clock-bg",
+      "$time-view-clock-digits-content-rest": "$time-view-clock-digits-content",
+      "$toast-bg-rest": "$toast-bg",
+      "$toast-error-content-rest": "$toast-error-content",
+      "$toast-info-content-rest": "$toast-info-content",
+      "$toast-success-content-rest": "$toast-success-content",
+      "$toast-warning-content-rest": "$toast-warning-content",
+      "$toolbar-content-rest": "$toolbar-content",
+      "$toolbar-separator-border-rest": "$toolbar-separator-border",
+      "$tooltip-content-rest": "$tooltip-content",
+      "$tree-list-chevron-icon-rest": "$tree-list-chevron-icon",
+      "$tree-view-border-rest": "$tree-view-border",
+      "$tree-view-content-rest": "$tree-view-content",
+      "$tree-view-spin-icon-rest": "$tree-view-spin-icon",
+      "$typography-bg-rest": "$typography-bg",
+      "$typography-link-content-rest": "$typography-link-content",
+      "$valid-badge-content-rest": "$valid-badge-content",
+      "$validation-message-bg-rest": "$validation-message-bg",
+      "$validation-message-content-rest": "$validation-message-content",
+      "$validation-summary-content-rest": "$validation-summary-content"
+    }
+  }
+}
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/public-renames.json b/packages/devextreme-scss/tools/naming/public-renames.json
new file mode 100644
index 000000000000..c330e6ae1cf7
--- /dev/null
+++ b/packages/devextreme-scss/tools/naming/public-renames.json
@@ -0,0 +1,410 @@
+{
+  "$comment": "Journal of retired component-tier names — the `--dx-*` custom properties the theme publishes. A published name is the one thing a user can rely on without rebuilding the SCSS, so removing or renaming one is a public change, and this file is where that change is recorded. Add the entry in the SAME change that retires the name — which change that was is a question for `git log -- tools/naming/public-renames.json`, so the journal does not repeat it; tests/public-renames.test.ts then enforces that the name never appears in a built fluent-next bundle again, which is what forbids a quiet compatibility alias in _public-links.scss.",
+  "fields": {
+    "name": "The retired name, exactly as it shipped.",
+    "replacement": "The name that takes over the role, or null when the role itself disappeared.",
+    "release": "The release the removal ships in.",
+    "note": "One sentence for the release notes: who this reaches and what they see. Written from the user's side, not ours."
+  },
+  "retired": [
+    {
+      "name": "--dx-color-view-handle-content",
+      "replacement": "--dx-color-view-handle-bg",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The colour-view handle is a filled marker, not text; the slot word now matches the property it paints."
+    },
+    {
+      "name": "--dx-date-view-roller-bottom-shadow",
+      "replacement": "--dx-date-view-roller-bottom-bg",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The roller fade is a gradient background, not a shadow."
+    },
+    {
+      "name": "--dx-date-view-roller-top-shadow",
+      "replacement": "--dx-date-view-roller-top-bg",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The roller fade is a gradient background, not a shadow."
+    },
+    {
+      "name": "--dx-filter-builder-group-operation-content",
+      "replacement": "--dx-filter-builder-group-operation-bg",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The filter chips are backgrounds; the name said content and had never painted text."
+    },
+    {
+      "name": "--dx-filter-builder-group-operation-content-disabled",
+      "replacement": "--dx-filter-builder-group-operation-bg-disabled",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The filter chips are backgrounds; the name said content and had never painted text."
+    },
+    {
+      "name": "--dx-filter-builder-group-operation-content-focused",
+      "replacement": "--dx-filter-builder-group-operation-bg-focused",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The filter chips are backgrounds; the name said content and had never painted text."
+    },
+    {
+      "name": "--dx-filter-builder-group-operation-content-hovered",
+      "replacement": "--dx-filter-builder-group-operation-bg-hovered",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The filter chips are backgrounds; the name said content and had never painted text."
+    },
+    {
+      "name": "--dx-filter-builder-item-field-content",
+      "replacement": "--dx-filter-builder-item-field-bg",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The filter chips are backgrounds; the name said content and had never painted text."
+    },
+    {
+      "name": "--dx-filter-builder-item-field-content-disabled",
+      "replacement": "--dx-filter-builder-item-field-bg-disabled",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The filter chips are backgrounds; the name said content and had never painted text."
+    },
+    {
+      "name": "--dx-filter-builder-item-field-content-focused",
+      "replacement": "--dx-filter-builder-item-field-bg-focused",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The filter chips are backgrounds; the name said content and had never painted text."
+    },
+    {
+      "name": "--dx-filter-builder-item-field-content-hovered",
+      "replacement": "--dx-filter-builder-item-field-bg-hovered",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The filter chips are backgrounds; the name said content and had never painted text."
+    },
+    {
+      "name": "--dx-filter-builder-item-operator-content",
+      "replacement": "--dx-filter-builder-item-operator-bg",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The filter chips are backgrounds; the name said content and had never painted text."
+    },
+    {
+      "name": "--dx-filter-builder-item-operator-content-focused",
+      "replacement": "--dx-filter-builder-item-operator-bg-focused",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The filter chips are backgrounds; the name said content and had never painted text."
+    },
+    {
+      "name": "--dx-filter-builder-item-operator-content-hovered",
+      "replacement": "--dx-filter-builder-item-operator-bg-hovered",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The filter chips are backgrounds; the name said content and had never painted text."
+    },
+    {
+      "name": "--dx-filter-builder-item-value-content",
+      "replacement": "--dx-filter-builder-item-value-bg",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The filter chips are backgrounds; the name said content and had never painted text."
+    },
+    {
+      "name": "--dx-filter-builder-item-value-content-focused",
+      "replacement": "--dx-filter-builder-item-value-bg-focused",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The filter chips are backgrounds; the name said content and had never painted text."
+    },
+    {
+      "name": "--dx-filter-builder-item-value-content-hovered",
+      "replacement": "--dx-filter-builder-item-value-bg-hovered",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The filter chips are backgrounds; the name said content and had never painted text."
+    },
+    {
+      "name": "--dx-list-border-disabled",
+      "replacement": null,
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The disabled list border is painted by the shared disabled border name; the list no longer carries one of its own."
+    },
+    {
+      "name": "--dx-pivot-grid-accent-content",
+      "replacement": "--dx-pivot-grid-accent-outline",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The pivot grid accent paints an outline, not content."
+    },
+    {
+      "name": "--dx-pivot-grid-grand-total-content",
+      "replacement": "--dx-pivot-grid-grand-total-bg",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "Grand totals are a row background, not text."
+    },
+    {
+      "name": "--dx-pivot-grid-total-content",
+      "replacement": "--dx-pivot-grid-total-bg",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "Totals are a row background, not text."
+    },
+    {
+      "name": "--dx-radio-button-content-read-only",
+      "replacement": "--dx-radio-button-bg-read-only",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The read-only dot is drawn with background-color; the pair is now split into the dot and the ring."
+    },
+    {
+      "name": "--dx-radio-button-icon-bg-focused",
+      "replacement": null,
+      "release": "26.2",
+      "pr": 35107,
+      "note": "Fed the ripple, which this theme switches off - the name painted nothing."
+    },
+    {
+      "name": "--dx-radio-button-icon-border-read-only",
+      "replacement": "--dx-radio-button-border-read-only",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The read-only ring keeps its own name after the dot and the ring were separated."
+    },
+    {
+      "name": "--dx-scheduler-appointment-base-content",
+      "replacement": "--dx-scheduler-appointment-base-bg",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The appointment base colour is its fill."
+    },
+    {
+      "name": "--dx-scheduler-appointment-content-active",
+      "replacement": "--dx-scheduler-appointment-bg-active",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The pressed appointment changes its fill."
+    },
+    {
+      "name": "--dx-scheduler-appointment-start-content",
+      "replacement": "--dx-scheduler-appointment-start-shadow",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The start marker is a shadow, not content."
+    },
+    {
+      "name": "--dx-scheduler-workspace-cell-content-focused",
+      "replacement": "--dx-scheduler-workspace-cell-bg-focused",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "A focused cell changes its background."
+    },
+    {
+      "name": "--dx-slider-accent-content-focused",
+      "replacement": "--dx-slider-accent-bg-focused",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The handle is a ring plus a mark: the mark keeps a bg name and the ring gained --dx-slider-accent-border-focused."
+    },
+    {
+      "name": "--dx-slider-invalid-content-focused",
+      "replacement": "--dx-slider-invalid-bg-focused",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The same split in the danger hue; the ring is --dx-slider-invalid-border-focused."
+    },
+    {
+      "name": "--dx-splitter-resize-handle-content-hovered",
+      "replacement": null,
+      "release": "26.2",
+      "pr": 35107,
+      "note": "Was read and never declared, so the hover rule was invalid and the grip kept its rest colour. The rule now reads the rest name."
+    },
+    {
+      "name": "--dx-tabs-tab-basic-border-selected",
+      "replacement": "--dx-tabs-tab-basic-selector-selected",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The tab marker is a selector bar, which is what the package calls it; it was named as a border."
+    },
+    {
+      "name": "--dx-tabs-tab-border-active",
+      "replacement": "--dx-tabs-tab-selector-active",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The tab marker is a selector bar, which is what the package calls it; it was named as a border."
+    },
+    {
+      "name": "--dx-tabs-tab-border-disabled",
+      "replacement": "--dx-tabs-tab-selector-disabled",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The tab marker is a selector bar, which is what the package calls it; it was named as a border."
+    },
+    {
+      "name": "--dx-tabs-tab-border-hovered",
+      "replacement": "--dx-tabs-tab-selector-hovered",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The tab marker is a selector bar, which is what the package calls it; it was named as a border."
+    },
+    {
+      "name": "--dx-tabs-tab-border-selected-active",
+      "replacement": "--dx-tabs-tab-selector-selected-active",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The tab marker is a selector bar, which is what the package calls it; it was named as a border."
+    },
+    {
+      "name": "--dx-tabs-tab-border-selected-focused",
+      "replacement": "--dx-tabs-tab-selector-selected-focused",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The tab marker is a selector bar, which is what the package calls it; it was named as a border."
+    },
+    {
+      "name": "--dx-tabs-tab-border-selected-hovered",
+      "replacement": "--dx-tabs-tab-selector-selected-hovered",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The tab marker is a selector bar, which is what the package calls it; it was named as a border."
+    },
+    {
+      "name": "--dx-tile-view-bg-hovered",
+      "replacement": "--dx-tile-view-border-hovered",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "A hovered tile is marked by its edge; the fill does not move."
+    },
+    {
+      "name": "--dx-tree-view-checkbox-accent-content-focused",
+      "replacement": null,
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The tree no longer restyles the check box inside it: a check box in a tree now reads its own names, identical to one standing outside."
+    },
+    {
+      "name": "--dx-tree-view-checkbox-bg-disabled",
+      "replacement": null,
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The tree no longer restyles the check box inside it: a check box in a tree now reads its own names, identical to one standing outside."
+    },
+    {
+      "name": "--dx-tree-view-checkbox-bg-focused",
+      "replacement": null,
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The tree no longer restyles the check box inside it: a check box in a tree now reads its own names, identical to one standing outside."
+    },
+    {
+      "name": "--dx-tree-view-checkbox-border-disabled",
+      "replacement": null,
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The tree no longer restyles the check box inside it: a check box in a tree now reads its own names, identical to one standing outside."
+    },
+    {
+      "name": "--dx-tree-view-checkbox-border-focused",
+      "replacement": null,
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The tree no longer restyles the check box inside it: a check box in a tree now reads its own names, identical to one standing outside."
+    },
+    {
+      "name": "--dx-tree-view-checkbox-checked-border-focused",
+      "replacement": null,
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The tree no longer restyles the check box inside it: a check box in a tree now reads its own names, identical to one standing outside."
+    },
+    {
+      "name": "--dx-tree-view-checkbox-icon-disabled",
+      "replacement": null,
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The tree no longer restyles the check box inside it: a check box in a tree now reads its own names, identical to one standing outside."
+    },
+    {
+      "name": "--dx-tree-view-checkbox-indeterminate-bg-disabled",
+      "replacement": null,
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The tree no longer restyles the check box inside it: a check box in a tree now reads its own names, identical to one standing outside."
+    },
+    {
+      "name": "--dx-chat-message-box-file-cancel-button-secondary-content",
+      "replacement": "--dx-chat-message-box-file-cancel-button-bg-hovered",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The name said content and the property is background-color: it fills the cancel button on a file chip while the pointer is on it. The new name says what it paints and when."
+    },
+    {
+      "name": "--dx-action-sheet-item-margin-block-end",
+      "replacement": "--dx-action-sheet-item-margin-block-start",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The gap it sets is above the cancel button, not below it: the rule writes margin-top."
+    },
+    {
+      "name": "--dx-calendar-element-padding",
+      "replacement": "--dx-calendar-element-gap",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "It is the gap between the calendar’s parts - the rule writes gap - not padding inside anything."
+    },
+    {
+      "name": "--dx-chat-message-editing-preview-border-width",
+      "replacement": "--dx-chat-message-editing-preview-accent-width",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "There is no border: the accent stripe is a drawn pseudo-element and this is its width. Its colour is already published as -accent-content."
+    },
+    {
+      "name": "--dx-file-uploader-file-size-margin",
+      "replacement": "--dx-file-uploader-file-size-padding",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The shorthand it carries is written to padding, and the file size already publishes its inline paddings under -padding-inline-start and -end."
+    },
+    {
+      "name": "--dx-list-bottom-padding",
+      "replacement": "--dx-list-margin-block-end",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "It is the margin below the last item of the last group, not padding on the list."
+    },
+    {
+      "name": "--dx-pivot-grid-button-top-padding",
+      "replacement": "--dx-pivot-grid-button-margin-block-start",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The rule writes margin-top on the toolbar button."
+    },
+    {
+      "name": "--dx-progress-bar-status-margin-block-start",
+      "replacement": "--dx-progress-bar-status-padding-block-start",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The rule writes padding-top on the status line."
+    },
+    {
+      "name": "--dx-text-editor-spin-button-padding-inline",
+      "replacement": "--dx-text-editor-spin-button-margin-inline-end",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "The rule writes margin-inline-end between the editor’s buttons."
+    },
+    {
+      "name": "--dx-scheduler-workspace-cell-content-active",
+      "replacement": "--dx-scheduler-workspace-cell-bg-active",
+      "release": "26.2",
+      "pr": 35107,
+      "note": "It fills a pressed cell - the rule writes background-color - and the name said content while aliasing a border name."
+    }
+  ]
+}
diff --git a/packages/devextreme-scss/tools/naming/publish.mjs b/packages/devextreme-scss/tools/naming/publish.mjs
new file mode 100644
index 000000000000..f9f1158536e4
--- /dev/null
+++ b/packages/devextreme-scss/tools/naming/publish.mjs
@@ -0,0 +1,91 @@
+/*
+ * Regenerates the fluent-next component tier: every `<folder>/_public.scss` (projections of the
+ * component's eligible variables, alphabetical) and the collector `_public-tier.scss` (mount points
+ * from tools/naming/registries.json). Hand-written relations live next door in `_public-links.scss`
+ * and are never touched — the generated file includes them.
+ *
+ *   node tools/naming/publish.mjs          # regenerates the tier files
+ *   node tools/naming/publish.mjs --check  # exit 1 when a committed file is stale or a rule is broken
+ *
+ * The rules are the ones tests/fluent-next-naming.test.ts enforces; both read them from
+ * tools/naming/tier.ts. Needs no built bundle.
+ *
+ * The published name is derived from the SCSS variable, so renaming a variable retires a public
+ * `--dx-*` name and this file's diff looks like plain regeneration. Record the retirement in
+ * tools/naming/public-renames.json in the same pull request; tests/public-renames.test.ts keeps a
+ * retired name from reappearing, as an alias or otherwise.
+ */
+
+import { readFileSync, writeFileSync, readdirSync, statSync, existsSync } from 'fs';
+import { join, dirname, relative, sep } from 'path';
+import { fileURLToPath } from 'url';
+
+import { stripScssComments } from '../../build/tokens/consumed-tokens.ts';
+import {
+  planPublication, stalePaths, THEME, PUBLIC_FILE, LINKS_FILE, COLLECTOR_PATH,
+} from './tier.ts';
+
+const here = dirname(fileURLToPath(import.meta.url));
+const packageRoot = join(here, '..', '..');
+const widgetsRoot = join(packageRoot, 'scss', 'widgets');
+const registries = JSON.parse(readFileSync(join(here, 'registries.json'), 'utf8'));
+
+const walk = (dir) => readdirSync(dir).flatMap((entry) => {
+  const absolute = join(dir, entry);
+  if (statSync(absolute).isDirectory()) return walk(absolute);
+  return entry.endsWith('.scss') ? [absolute] : [];
+});
+
+const toPosix = (absolute) => relative(widgetsRoot, absolute).split(sep).join('/');
+
+const sourceFile = (absolute) => {
+  const path = toPosix(absolute);
+  const segments = path.split('/');
+  const raw = readFileSync(absolute, 'utf8');
+  return {
+    path,
+    folder: segments.length > 2 ? segments[1] : '',
+    raw,
+    stripped: stripScssComments(raw, path),
+  };
+};
+
+const themeFiles = walk(join(widgetsRoot, THEME)).map(sourceFile);
+const baseFiles = walk(join(widgetsRoot, 'base')).map(sourceFile);
+
+const existing = new Map();
+themeFiles.forEach(({ path, raw }) => {
+  if (path.endsWith(`/${PUBLIC_FILE}`) || path.endsWith(`/${LINKS_FILE}`) || path === COLLECTOR_PATH) {
+    existing.set(path, raw);
+  }
+});
+
+const plan = planPublication(themeFiles, baseFiles, registries, existing);
+
+if (plan.problems.length) {
+  process.stderr.write(`${plan.problems.map((problem) => `  ${problem}`).join('\n')}\n`);
+  process.exit(1);
+}
+
+const stale = stalePaths(plan, existing);
+
+if (process.argv.includes('--check')) {
+  if (stale.length) {
+    process.stderr.write(`${stale.map((path) => `  ${path} is stale`).join('\n')}\nrun pnpm naming:publish\n`);
+    process.exit(1);
+  }
+  process.stdout.write(`component tier is up to date (${plan.files.size} files)\n`);
+} else {
+  stale.forEach((path) => {
+    const absolute = join(widgetsRoot, path);
+    if (!existsSync(dirname(absolute))) {
+      throw new Error(`${path}: the folder does not exist`);
+    }
+    writeFileSync(absolute, plan.files.get(path));
+    process.stdout.write(`wrote ${path}\n`);
+  });
+  plan.created.forEach((path) => {
+    process.stdout.write(`${path} is new — add the component to packages/devextreme/playground/tier-reachability-audit.html\n`);
+  });
+  if (!stale.length) process.stdout.write('component tier is up to date\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..79457676ddd1
--- /dev/null
+++ b/packages/devextreme-scss/tools/naming/registries.json
@@ -0,0 +1,2248 @@
+{
+  "$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 the @devexpress/design-tokens-internal package and from the theme folder layout.",
+  "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": "@devexpress/design-tokens-internal → components/core/theme/fluent",
+    "componentTokenCount": 726,
+    "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"
+  ],
+  "systemTier": [
+    "common",
+    "typography"
+  ],
+  "systemConcerns": [
+    "backdrop",
+    "focus-rect",
+    "global",
+    "invalid-badge",
+    "mention",
+    "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"
+      ]
+    }
+  },
+  "rootSelectors": {
+    "toast": [
+      ".dx-toast-wrapper",
+      ".dx-toast-stack"
+    ],
+    "button": [
+      ".dx-button",
+      ".dx-dropdowneditor-button"
+    ],
+    "text-editor": [
+      ".dx-texteditor",
+      ".dx-htmleditor"
+    ],
+    "text-box": [
+      ".dx-textbox"
+    ],
+    "text-area": [
+      ".dx-textarea"
+    ],
+    "number-box": [
+      ".dx-numberbox"
+    ],
+    "date-box": [
+      ".dx-datebox",
+      ".dx-datebox-wrapper"
+    ],
+    "date-range-box": [
+      ".dx-daterangebox"
+    ],
+    "select-box": [
+      ".dx-selectbox",
+      ".dx-selectbox-popup-wrapper"
+    ],
+    "lookup": [
+      ".dx-lookup",
+      ".dx-lookup-popup-wrapper"
+    ],
+    "tag-box": [
+      ".dx-tagbox",
+      ".dx-tagbox-popup-wrapper"
+    ],
+    "color-box": [
+      ".dx-colorbox",
+      ".dx-colorbox-overlay"
+    ],
+    "drop-down-editor": [
+      ".dx-dropdowneditor",
+      ".dx-dropdowneditor-overlay"
+    ],
+    "drop-down-list": [
+      ".dx-dropdownlist-popup-wrapper"
+    ],
+    "grid": [
+      ".dx-datagrid",
+      ".dx-treelist",
+      ".dx-pivotgrid",
+      ".dx-cardview",
+      ".dx-datagrid-column-chooser",
+      ".dx-treelist-column-chooser",
+      ".dx-header-filter-menu",
+      ".dx-datagrid-drag-header",
+      ".dx-treelist-drag-header",
+      ".dx-ai-chat",
+      ".dx-datagrid-ai-assistant-confirm-dialog",
+      ".dx-treelist-ai-assistant-confirm-dialog"
+    ],
+    "data-grid": [
+      ".dx-datagrid"
+    ],
+    "tree-list": [
+      ".dx-treelist"
+    ],
+    "switch": [
+      ".dx-switch"
+    ],
+    "date-view": [
+      ".dx-dateview-rollers"
+    ],
+    "gallery": [
+      ".dx-gallery"
+    ],
+    "typography": [
+      ":root",
+      ".dx-theme-mode-light",
+      ".dx-theme-mode-dark",
+      ".dx-theme-mode-inverted"
+    ],
+    "toolbar": [
+      ".dx-toolbar",
+      ".dx-dropdownmenu-popup-wrapper",
+      ".dx-toolbar-menu-container",
+      ".dx-toolbar-background"
+    ],
+    "overlay": [
+      ".dx-overlay-wrapper"
+    ],
+    "informer": [
+      ".dx-informer"
+    ],
+    "scroll-view": [
+      ".dx-scrollview"
+    ],
+    "context-menu": [
+      ".dx-context-menu"
+    ],
+    "fieldset": [
+      ".dx-fieldset",
+      ".dx-field"
+    ],
+    "menu": [
+      ".dx-menu-base",
+      ".dx-menu-adaptive-mode"
+    ],
+    "progress-bar": [
+      ".dx-progressbar"
+    ],
+    "load-indicator": [
+      ".dx-loadindicator"
+    ],
+    "drop-down-menu": [
+      ".dx-dropdownmenu-popup-wrapper"
+    ],
+    "accordion": [
+      ".dx-accordion"
+    ],
+    "action-sheet": [
+      ".dx-actionsheet-popup-wrapper",
+      ".dx-actionsheet-popover-wrapper"
+    ],
+    "box": [
+      ".dx-box-item-content"
+    ],
+    "button-group": [
+      ".dx-buttongroup"
+    ],
+    "load-panel": [
+      ".dx-loadpanel-content"
+    ],
+    "tile-view": [
+      ".dx-tileview"
+    ],
+    "validation": [
+      ".dx-invalid-message",
+      ".dx-validationsummary"
+    ],
+    "tooltip": [
+      ".dx-tooltip-wrapper"
+    ],
+    "radio-button": [
+      ".dx-radiobutton"
+    ],
+    "scrollable": [
+      ".dx-scrollable"
+    ],
+    "drop-down-button": [
+      ".dx-dropdownbutton",
+      ".dx-dropdownbutton-popup-wrapper"
+    ],
+    "badge": [
+      ".dx-badge"
+    ],
+    "card": [
+      ".dx-card"
+    ],
+    "icon": [
+      ":root"
+    ],
+    "popover": [
+      ".dx-popover-wrapper"
+    ],
+    "splitter": [
+      ".dx-splitter"
+    ],
+    "splitter-bar": [
+      ".dx-splitter-bar",
+      ".dx-splitter-border"
+    ],
+    "sortable": [
+      ".dx-sortable",
+      ".dx-sortable-dragging",
+      ".dx-sortable-placeholder"
+    ],
+    "tab-panel": [
+      ".dx-tabpanel"
+    ],
+    "color-view": [
+      ".dx-colorview-container"
+    ],
+    "calendar": [
+      ".dx-calendar"
+    ],
+    "check-box": [
+      ".dx-checkbox"
+    ],
+    "drawer": [
+      ".dx-drawer"
+    ],
+    "filter-builder": [
+      ".dx-filterbuilder",
+      ".dx-filterbuilder-overlay",
+      ".dx-filterbuilder-operations"
+    ],
+    "form": [
+      ".dx-form"
+    ],
+    "html-editor": [
+      ".dx-htmleditor",
+      ".dx-aidialog",
+      ".dx-htmleditor-add-image-popup"
+    ],
+    "list": [
+      ".dx-list",
+      ".dx-list-context-menucontent"
+    ],
+    "popup": [
+      ".dx-popup-wrapper"
+    ],
+    "radio-group": [
+      ".dx-radiogroup"
+    ],
+    "speed-dial-action": [
+      ".dx-fa-button"
+    ],
+    "time-view": [
+      ".dx-timeview"
+    ],
+    "tree-view": [
+      ".dx-treeview",
+      ".dx-sortable-dragging"
+    ],
+    "widget": [
+      ".dx-surface"
+    ],
+    "scheduler": [
+      ".dx-scheduler",
+      ".dx-scheduler-appointment-popup",
+      ".dx-scheduler-appointment-tooltip-wrapper",
+      ".dx-scheduler-overlay-panel"
+    ],
+    "file-manager": [
+      ".dx-filemanager",
+      ".dx-filemanager-dialog-popup"
+    ],
+    "tabs": [
+      ".dx-tabs"
+    ],
+    "chat": [
+      ".dx-chat",
+      ".dx-messagelist-context-menu-content",
+      ".dx-chat-confirmation-popup-wrapper"
+    ],
+    "diagram": [
+      ".dx-diagram",
+      ".dx-diagram-properties-popup",
+      ".dx-diagram-toolbox-popup",
+      ".dx-diagram-contextmenu",
+      ".dx-diagram-context-toolbox",
+      ".dx-diagram-floating-toolbar-container"
+    ],
+    "gantt": [
+      ".dx-gantt"
+    ],
+    "slider": [
+      ".dx-slider"
+    ],
+    "stepper": [
+      ".dx-stepper"
+    ],
+    "pivot-grid": [
+      ".dx-pivotgrid",
+      ".dx-pivotgridfieldchooser",
+      ".dx-pivotgrid-fields-container"
+    ],
+    "pagination": [
+      ".dx-pagination",
+      ".dx-pager"
+    ],
+    "file-uploader": [
+      ".dx-fileuploader"
+    ],
+    "map": [
+      ".dx-map-container"
+    ],
+    "recurrence-editor": [
+      ".dx-recurrence-repeat-on",
+      ".dx-recurrence-button-group",
+      ".dx-recurrence-numberbox-interval-wrapper",
+      ".dx-recurrence-radiogroup-repeat-type",
+      ".dx-recurrence-datebox-until-date",
+      ".dx-recurrence-numberbox-repeat-count"
+    ],
+    "card-view": [
+      ".dx-cardview",
+      ".dx-cardview-header-item",
+      ".dx-cardview-header-item-sort-indicator",
+      ".dx-cardview-column-chooser-list",
+      ".dx-cardview-column-chooser-plain"
+    ],
+    "common": [
+      ":root",
+      ".dx-theme-mode-light",
+      ".dx-theme-mode-dark",
+      ".dx-theme-mode-inverted"
+    ]
+  },
+  "themeIdentity": [
+    "$color",
+    "$mode",
+    "$size",
+    "$accent",
+    "$theme-marker-color",
+    "$theme-marker-mode",
+    "$theme-marker-size-postfix"
+  ],
+  "exemptFolders": {},
+  "parts": [
+    "backdrop",
+    "bg",
+    "border",
+    "caption",
+    "chevron",
+    "content",
+    "end-icon",
+    "grip",
+    "highlight",
+    "icon",
+    "indicator",
+    "line",
+    "opacity",
+    "outline",
+    "placeholder",
+    "scrim",
+    "selector",
+    "separator",
+    "shadow",
+    "shadow-ambient",
+    "shadow-key",
+    "shortcut",
+    "start-icon",
+    "subtitle",
+    "text",
+    "thumb",
+    "title",
+    "track",
+    "trigger",
+    "veil"
+  ],
+  "states": [
+    "hovered",
+    "active",
+    "focused",
+    "selected",
+    "selected-hovered",
+    "selected-active",
+    "selected-focused",
+    "selected-disabled",
+    "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",
+      "icon-only",
+      "with-text",
+      "with-title",
+      "on",
+      "off",
+      "horizontal",
+      "vertical",
+      "phone",
+      "compact",
+      "small",
+      "dragging",
+      "inverted",
+      "first-month",
+      "first-of-month",
+      "other-month",
+      "contoured",
+      "faded",
+      "noimage",
+      "highlighted",
+      "dragged",
+      "legacy",
+      "today",
+      "multiview",
+      "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",
+      "basic",
+      "primary",
+      "secondary",
+      "thin",
+      "top",
+      "bottom",
+      "left",
+      "right"
+    ]
+  },
+  "sizeSlots": [
+    "size",
+    "gap",
+    "offset",
+    "spacing",
+    "length",
+    "thickness",
+    "min-size",
+    "grid-template-columns",
+    "transition-duration",
+    "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"
+    ],
+    "treeView": [
+      "check-box"
+    ],
+    "colorBox": [
+      "color-view"
+    ],
+    "pivotGrid": [
+      "tree-view"
+    ],
+    "pagination": [
+      "grid"
+    ],
+    "gantt": [
+      "grid",
+      "form"
+    ],
+    "rangeSlider": [
+      "slider"
+    ],
+    "scrollView": [
+      "scrollable"
+    ],
+    "validation": [
+      "text-editor"
+    ],
+    "filterBuilder": [
+      "text-editor"
+    ],
+    "fileManager": [
+      "toolbar",
+      "splitter-bar"
+    ],
+    "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": {
+    "card-view": [
+      "card",
+      "cover",
+      "content",
+      "cell",
+      "field-value",
+      "field",
+      "header",
+      "selection-checkbox",
+      "column-chooser",
+      "select-all-item",
+      "message",
+      "filter-panel",
+      "header-panel",
+      "dropzone",
+      "item",
+      "header-filter",
+      "sort-index",
+      "sort-indicator",
+      "header-item",
+      "nodata-view",
+      "icon-container",
+      "cards",
+      "divider",
+      "allowance",
+      "prohibition",
+      "link",
+      "icon",
+      "caption",
+      "text"
+    ],
+    "map": [
+      "marker-tooltip"
+    ],
+    "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",
+      "content"
+    ],
+    "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",
+      "label"
+    ],
+    "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",
+      "arrow"
+    ],
+    "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": [
+      "element",
+      "handle",
+      "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",
+      "indicator"
+    ],
+    "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-size",
+      "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": [
+      "alert",
+      "alerts",
+      "button",
+      "confirmation-popup-content",
+      "confirmation-popup-toolbar",
+      "content",
+      "edited",
+      "section",
+      "size",
+      "start",
+      "view-items",
+      "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",
+      "image"
+    ],
+    "color-view": [
+      "palette",
+      "palette-cell",
+      "hue-scale",
+      "hue-scale-cell",
+      "hue-scale-wrapper",
+      "controls",
+      "alpha-row",
+      "alpha-cell",
+      "alpha-scale",
+      "alpha-label",
+      "apply-button",
+      "container",
+      "label",
+      "handle",
+      "color-preview",
+      "preview",
+      "textbox",
+      "hex",
+      "overlay",
+      "content-box",
+      "bg-box"
+    ],
+    "diagram": [
+      "accordion-v",
+      "close-icon",
+      "closebutton",
+      "colorbutton",
+      "connection",
+      "connector",
+      "container",
+      "editor",
+      "editor-button",
+      "geometry-mark",
+      "h",
+      "input",
+      "input-button",
+      "input-image",
+      "items",
+      "large-editor",
+      "medium-editor",
+      "mobile",
+      "muted",
+      "properties-layout-icon",
+      "selection",
+      "separator",
+      "touchbar-item",
+      "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": [
+      "arrow",
+      "dependency-successor",
+      "edit-frame",
+      "edit-successor-dependency-l",
+      "header-item",
+      "items-container",
+      "milestone",
+      "notch",
+      "selection",
+      "successor",
+      "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",
+      "blockquote",
+      "cell",
+      "resizer",
+      "highlight"
+    ],
+    "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",
+      "drag-source",
+      "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": [
+      "content",
+      "optional-mark",
+      "step",
+      "step-indicator",
+      "step-label",
+      "label",
+      "connector",
+      "value",
+      "icon",
+      "text",
+      "item",
+      "container",
+      "ring",
+      "halo"
+    ],
+    "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": [
+      "thumbnail",
+      "box",
+      "path-separator",
+      "dialog",
+      "dialog-name-editor",
+      "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",
+      "splitter-wrapper",
+      "cancel-button",
+      "notification",
+      "container",
+      "separator",
+      "content",
+      "item",
+      "menu-item",
+      "popup",
+      "overlay",
+      "editor",
+      "button",
+      "icon",
+      "text",
+      "title",
+      "image",
+      "placeholder",
+      "drop-zone"
+    ],
+    "file-uploader": [
+      "line",
+      "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",
+      "input-container"
+    ],
+    "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",
+      "separator"
+    ],
+    "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",
+      "context-menu",
+      "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",
+      "expand-column",
+      "toolbar",
+      "regenerate-button",
+      "confirm-dialog",
+      "menu-bar",
+      "menu-caption",
+      "search-panel",
+      "bottom-load-panel",
+      "rowsview",
+      "column-indicator"
+    ],
+    "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",
+      "backdrop",
+      "icon"
+    ]
+  },
+  "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-loading-text",
+    "ai-chat-message-assistant",
+    "ai-chat-message-user",
+    "ai-chat-prompt-suggestion-item",
+    "ai-chat-reasoning-header",
+    "ai-chat-reasoning-item",
+    "ai-chat-submit-area",
+    "backdrop",
+    "badge",
+    "button",
+    "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",
+    "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-skeleton",
+    "grid-cell-renderer-text",
+    "grid-column",
+    "grid-detail-row",
+    "grid-focus-outline",
+    "grid-group-row",
+    "grid-row",
+    "grid-row-header",
+    "grid-top-panel",
+    "grid-view",
+    "link",
+    "listbox-item",
+    "listbox-section-header-item",
+    "listbox-select-all-item",
+    "loading-indicator",
+    "loading-indicator-panel",
+    "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",
+    "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",
+    "color-view",
+    "calendar",
+    "check-box",
+    "drawer",
+    "filter-builder",
+    "form",
+    "html-editor",
+    "list",
+    "popup",
+    "radio-group",
+    "speed-dial-action",
+    "time-view",
+    "tree-view",
+    "widget",
+    "scheduler",
+    "file-manager",
+    "tabs",
+    "chat",
+    "diagram",
+    "gantt",
+    "slider",
+    "stepper",
+    "pivot-grid",
+    "pagination",
+    "file-uploader",
+    "map",
+    "recurrence-editor",
+    "card-view"
+  ]
+}
diff --git a/packages/devextreme-scss/tools/naming/rename.mjs b/packages/devextreme-scss/tools/naming/rename.mjs
new file mode 100644
index 000000000000..7057d2a775fa
--- /dev/null
+++ b/packages/devextreme-scss/tools/naming/rename.mjs
@@ -0,0 +1,439 @@
+/*
+ * 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 ($grid-border vs $grid-border-width), 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('');
+
+/*
+ * Argument lists of `@use … with ( … )` and of `@include …( … )`: a `$name:` KEY inside either is
+ * the base module's parameter, spelled as base spells it, and never a name of this file.
+ */
+const withRanges = (content) => {
+  const ranges = [];
+  const opener = /\bwith\s*\(|@include\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);
+  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';
+  // A bare `-border` segment is the border shorthand or its width (`1px solid`, `$border-width-10`);
+  // radius and the radius corners are matched above. The segment must be hyphen-delimited, or
+  // `borderedwidget` would be read as a border.
+  if (/(^|-)border(-|$)|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.
+    // The bucket heuristic only says something about a SIZE: it reads `border`/`line`/`outline`
+    // as lengths and would flag every colour rename that adds or drops such a word. Ask the
+    // declaration site — either end of the rename, since the batch may or may not be applied yet.
+    const isSize = themeFiles.some((file) => file.endsWith('_sizes.scss')
+      && (declaredIn(file).has(from) || declaredIn(file).has(to)));
+    if (isSize && 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()` or named-`@include` 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.
+       * The named-argument form repeated it on the four base parameters treeview-checkbox() binds.
+       */
+      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()` or named-`@include` 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()` or named-`@include` 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/naming/runtime-contract.json b/packages/devextreme-scss/tools/naming/runtime-contract.json
new file mode 100644
index 000000000000..f620e45908c6
--- /dev/null
+++ b/packages/devextreme-scss/tools/naming/runtime-contract.json
@@ -0,0 +1,54 @@
+{
+  "comment": "The JS -> CSS contract: --dx-* names the runtime sets with style.setProperty and base/** reads. They are not part of the component tier (tests/fluent-next-naming.test.ts excludes them from the surface checks) and their read form is fixed here: `fallback` is the exact text after the comma in var(), null means the read is bare on purpose and `whenUnset` says what happens then. tests/fallback-policy.test.ts holds base/** to this file.",
+  "variables": [
+    {
+      "name": "--dx-cardview-cardsperrow",
+      "setBy": "packages/devextreme/js/__internal/grids/new/card_view/content_view/content/content.tsx",
+      "readIn": "base/cardView/content_view/content/_index.scss",
+      "property": "grid-template-columns",
+      "fallback": null,
+      "whenUnset": "the declaration disappears; the runtime always supplies a number (default 3, 'auto' is resolved to a number in view.tsx), so a CSS fallback would only mask a runtime bug"
+    },
+    {
+      "name": "--dx-cardview-card-min-width",
+      "setBy": "packages/devextreme/js/__internal/grids/new/card_view/content_view/content/content.tsx",
+      "readIn": "base/cardView/content_view/content/card/_index.scss",
+      "property": "min-width",
+      "fallback": "$cardview-card-min-width",
+      "whenUnset": "the theme minimum applies - a card may never get narrower than the theme allows"
+    },
+    {
+      "name": "--dx-cardview-card-max-width",
+      "setBy": "packages/devextreme/js/__internal/grids/new/card_view/content_view/content/content.tsx",
+      "readIn": "base/cardView/content_view/content/card/_index.scss",
+      "property": "max-width",
+      "fallback": null,
+      "whenUnset": "the declaration disappears and max-width keeps its initial value none - an invented limit would clip cards"
+    },
+    {
+      "name": "--dx-cardview-card-cover-max-height",
+      "setBy": "packages/devextreme/js/__internal/grids/new/card_view/content_view/content/content.tsx",
+      "readIn": "base/cardView/content_view/content/card/cover/_index.scss",
+      "property": "max-height",
+      "fallback": null,
+      "defaultDeclaredIn": "base/cardView/content_view/content/_index.scss",
+      "whenUnset": "the cards container declares the theme default on itself and the runtime overrides it there"
+    },
+    {
+      "name": "--dx-cardview-card-cover-ratio",
+      "setBy": "packages/devextreme/js/__internal/grids/new/card_view/content_view/content/content.tsx",
+      "readIn": "base/cardView/content_view/content/card/cover/_index.scss",
+      "property": "aspect-ratio",
+      "fallback": null,
+      "whenUnset": "the declaration disappears and the cover keeps its natural proportions - an invented ratio distorts the image more than none"
+    },
+    {
+      "name": "--dx-scheduler-animation-top",
+      "setBy": "packages/devextreme/js/__internal/scheduler/appointment_popup/form.ts",
+      "readIn": "base/scheduler/_index.scss",
+      "property": "top",
+      "fallback": "0",
+      "whenUnset": "the appointment form animates from the top edge"
+    }
+  ]
+}
diff --git a/packages/devextreme-scss/tools/naming/tier.ts b/packages/devextreme-scss/tools/naming/tier.ts
new file mode 100644
index 000000000000..066a63dfcb5c
--- /dev/null
+++ b/packages/devextreme-scss/tools/naming/tier.ts
@@ -0,0 +1,581 @@
+/*
+ * The fluent-next component tier as a pure computation, shared by tests/fluent-next-naming.test.ts
+ * (the guard) and tools/naming/publish.mjs (the emitter). Nothing here touches the file system:
+ * callers hand in file contents, already stripped of comments where the parser expects it.
+ *
+ * Paths are POSIX and relative to scss/widgets (`fluent-next/button/_colors.scss`,
+ * `base/button/_index.scss`), so the module needs no knowledge of where the package lives. The file
+ * is loaded natively by Node (type stripping) and through ts-jest, which is why it imports nothing
+ * but `node:path` and uses erasable syntax only.
+ */
+
+import { posix } from 'node:path';
+
+export type SourceFile = {
+  /** POSIX path relative to scss/widgets. */
+  path: string;
+  /** First folder under the theme, `''` for theme-root files. */
+  folder: string;
+  raw: string;
+  stripped: string;
+};
+
+export type Use = { spec: string; star: boolean; alias: string | null };
+export type NamespacedReference = { namespace: string; name: string };
+export type Parsed = {
+  path: string;
+  folder: string;
+  declarations: 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.
+   */
+  references: string[];
+  bareReferences: string[];
+  namespacedReferences: NamespacedReference[];
+  uses: Use[];
+};
+
+export type Registries = {
+  components: Record<string, string>;
+  declarationHome: Record<string, string>;
+  exemptFolders: Record<string, string>;
+  systemTier?: string[];
+  migrated: string[];
+  rootSelectors: Record<string, string[]>;
+};
+
+export type TierRecord = {
+  component: string;
+  value: string;
+  reason: string | null;
+  /** Declaring files, POSIX paths relative to scss/widgets. */
+  sources: string[];
+};
+
+export type WiringKind = 'star' | 'feeder';
+export type WiringEntry = { folder: string; variable: string; kind: WiringKind };
+
+export type BaseIndex = {
+  names: Set<string>;
+  declarationsByPath: Map<string, string[]>;
+};
+
+export const THEME = 'fluent-next';
+export const DECLARATION_FILE = /(^|\/)_(colors|sizes|variables)\.scss$/;
+export const CSS_WIDE_KEYWORDS = new Set(['inherit', 'initial', 'unset', 'revert', 'revert-layer']);
+export const PUBLIC_FILE = '_public.scss';
+export const LINKS_FILE = '_public-links.scss';
+export const COLLECTOR_FILE = '_public-tier.scss';
+export const GENERATED_MARKER = '// GENERATED by tools/naming/publish.mjs';
+
+const CONTROL_DIRECTIVES = /@(if|else|each|for|while)\b[^{]*$/;
+const FEEDER_CALLS = /(?:icons?-mixin|icon-colored|data-uri|toggle-delete-icon)\s*\(((?:[^()]|\([^()]*\))*)\)/g;
+const DECLARATION_LINE = /^\s*(\$[a-z0-9-]+)\s*:\s*([^;]*);(.*)$/;
+const LINK_LINE = /^\s*(--dx-[a-z0-9-]+)\s*:\s*var\((--dx-[a-z0-9-]+)\);\s*$/;
+const PROPERTY_LINE = /^\s*(--dx-[a-z0-9-]+)\s*:/;
+
+// ---------------------------------------------------------------------------------------------
+// parsing
+// ---------------------------------------------------------------------------------------------
+
+const findRanges = (content: string, opener: RegExp): [number, number][] => {
+  const ranges: [number, number][] = [];
+  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;
+};
+
+/**
+ * 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.
+ */
+export const findWithRanges = (content: string): [number, number][] => findRanges(content, /\bwith\s*\(/g);
+
+/**
+ * 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.
+ */
+export const findSignatureRanges = (content: string): [number, number][] => findRanges(
+  content,
+  /@(?:mixin|function)\s+[\w-]+\s*\(/g,
+);
+
+/**
+ * Argument lists of `@include`. A named argument (`$checkbox-border-color-focused: $x`) binds the
+ * base mixin's parameter by its own name: the key is base's spelling, exactly like a `with()` key,
+ * and must not read as a declaration of this file.
+ */
+export const findIncludeRanges = (content: string): [number, number][] => findRanges(
+  content,
+  /@include\s+[\w.-]+\s*\(/g,
+);
+
+const inRanges = (position: number, ranges: [number, number][]): boolean => ranges
+  .some(([from, to]) => position >= from && position < to);
+
+/**
+ * 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.
+ */
+export const parseScss = (path: string, folder: string, stripped: string): Parsed => {
+  const content = stripped;
+  const withRanges = [
+    ...findWithRanges(content),
+    ...findSignatureRanges(content),
+    ...findIncludeRanges(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) {
+        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 continues into the `with (…)` block: its
+        // right-hand sides are ordinary references.
+        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;
+    }
+  }
+
+  return {
+    path, folder, declarations, references, bareReferences, namespacedReferences, uses,
+  };
+};
+
+export const parseSourceFile = (file: SourceFile): Parsed => parseScss(file.path, file.folder, file.stripped);
+
+// ---------------------------------------------------------------------------------------------
+// base wiring
+// ---------------------------------------------------------------------------------------------
+
+/**
+ * `base/**` parameter names, keyed by file so a star import can be resolved to the exact module it
+ * pulls in. The wide question ("does base declare this name anywhere") would wave through any
+ * legacy name; the precise one is asked by `starredBaseParameters`.
+ */
+export const baseIndex = (baseFiles: SourceFile[]): BaseIndex => {
+  const declarationsByPath = new Map<string, string[]>();
+  const names = new Set<string>();
+  baseFiles.forEach((file) => {
+    const { declarations } = parseSourceFile(file);
+    declarationsByPath.set(file.path, declarations);
+    declarations.forEach((name) => names.add(name));
+  });
+  return { names, declarationsByPath };
+};
+
+/**
+ * The base parameters a theme file wires by star-importing the very base module that declares them:
+ * a top-level `$x: … !default` there SETS base's variable, so the name is base's spelling.
+ */
+export const starredBaseParameters = (parsed: Parsed, index: BaseIndex): Set<string> => {
+  const names = new Set<string>();
+  parsed.uses.forEach(({ spec, star }) => {
+    if (!star || !spec.includes('base/')) return;
+    const directory = posix.normalize(posix.join(posix.dirname(parsed.path), spec, '..'));
+    const stem = spec.split('/').pop() as string;
+    [posix.join(directory, `_${stem}.scss`), posix.join(directory, stem, '_index.scss')]
+      .forEach((candidate) => (index.declarationsByPath.get(candidate) ?? [])
+        .forEach((name) => names.add(name)));
+  });
+  return names;
+};
+
+/*
+ * Base wiring is configuration, not ownership. Two shapes, both structural:
+ *   - star: the file star-imports the very base module that declares the name, and the top-level
+ *     `$x: … !default` SETS base's variable.
+ *   - feeder: `$fluent-<baseName>` passed as a `with()` value for base's `-2` key.
+ */
+export const baseWiringKind = (variable: string, parsed: Parsed, index: BaseIndex): WiringKind | null => {
+  if (starredBaseParameters(parsed, index).has(variable)) return 'star';
+  if (variable.startsWith('$fluent-') && index.names.has(`$${variable.slice('$fluent-'.length)}`)) {
+    return 'feeder';
+  }
+  return null;
+};
+
+export const baseWiringEntries = (
+  parsedTheme: Parsed[],
+  index: BaseIndex,
+  exemptFolders: string[],
+): WiringEntry[] => parsedTheme
+  .flatMap((parsed) => parsed.declarations
+    .map((variable) => ({ folder: parsed.folder, variable, kind: baseWiringKind(variable, parsed, index) }))
+    .filter((entry): entry is WiringEntry => entry.kind !== null && !exemptFolders.includes(entry.folder)));
+
+// ---------------------------------------------------------------------------------------------
+// the tier: which variables are published, and why the rest are not
+// ---------------------------------------------------------------------------------------------
+
+export const systemTierOf = (registries: Registries): string[] => registries.systemTier ?? [];
+
+export const tierFoldersOf = (component: string, registries: Registries): string[] => {
+  if (systemTierOf(registries).includes(component)) return [component];
+  const exempt = Object.keys(registries.exemptFolders);
+  const folders = Object.entries(registries.components)
+    .filter(([, owner]) => owner === component)
+    .map(([folder]) => folder);
+  const home = registries.declarationHome[component];
+  if (home && !folders.includes(home)) folders.push(home);
+  return folders.filter((folder) => !exempt.includes(folder));
+};
+
+/** Components that may publish: migrated plus the system tier, each once. */
+export const publishingComponents = (registries: Registries): string[] => [
+  ...new Set([...registries.migrated, ...systemTierOf(registries)]),
+];
+
+const inFolder = (file: SourceFile, folder: string): boolean => file.path.startsWith(`${THEME}/${folder}/`);
+
+/** Which variables the tier MUST declare, and why the rest are excluded. */
+export const tierRecords = (
+  themeFiles: SourceFile[],
+  registries: Registries,
+  wiring: ReadonlySet<string>,
+): Map<string, TierRecord> => {
+  const records = new Map<string, TierRecord>();
+
+  publishingComponents(registries).forEach((component) => {
+    const declared = new Map<string, { value: string; marker: boolean; sources: string[] }>();
+    const feeders = new Set<string>();
+    tierFoldersOf(component, registries).forEach((folder) => {
+      themeFiles.filter((file) => inFolder(file, folder)).forEach((file) => {
+        if (DECLARATION_FILE.test(file.path)) {
+          file.stripped.split('\n').forEach((line) => {
+            const match = DECLARATION_LINE.exec(line);
+            if (!match) return;
+            const previous = declared.get(match[1]);
+            const sources = previous?.sources ?? [];
+            if (!sources.includes(file.path)) sources.push(file.path);
+            declared.set(match[1], {
+              value: match[2].trim().replace(/\s*!default$/, ''),
+              marker: (previous?.marker ?? false) || /dx-data-uri-static/.test(match[3] + match[2]),
+              sources,
+            });
+          });
+        }
+        // Feeder calls are read from the RAW file on purpose: a commented-out call still documents
+        // that the variable bakes into an image somewhere.
+        [...file.raw.matchAll(FEEDER_CALLS)]
+          .forEach((call) => [...call[1].matchAll(/\$[a-z0-9-]+/g)]
+            .forEach(([variable]) => feeders.add(variable)));
+      });
+    });
+    declared.forEach(({ value, marker, sources }, variable) => {
+      const reason = marker || feeders.has(variable) || /(^|[^\w-])data-uri\(/.test(value)
+        ? 'data-uri'
+        : wiring.has(variable) ? 'base-wiring'
+          : CSS_WIDE_KEYWORDS.has(value) ? 'css-wide-keyword'
+            : value.includes('!important') ? 'important'
+              : value === 'null' ? 'null'
+                : value === 'false' || value === 'true' ? 'sass-flag' : null;
+      records.set(variable, {
+        component, value, reason, sources,
+      });
+    });
+  });
+
+  // a reference to a data-uri-excluded name carries the same baked image, so the referrer is excluded too
+  for (let changed = true; changed;) {
+    changed = false;
+    records.forEach((record) => {
+      if (record.reason) return;
+      if ([...record.value.matchAll(/\$[a-z0-9-]+/g)]
+        .some(([token]) => records.get(token)?.reason === 'data-uri')) {
+        record.reason = 'data-uri';
+        changed = true;
+      }
+    });
+  }
+  return records;
+};
+
+// ---------------------------------------------------------------------------------------------
+// the files
+// ---------------------------------------------------------------------------------------------
+
+export type Links = Map<string, string>; // --dx-a -> --dx-b
+
+/** Codepoint order: what `sort()` without a comparator does, spelled out so nobody reaches for localeCompare. */
+export const byCodepoint = (a: string, b: string): number => (a < b ? -1 : a > b ? 1 : 0);
+
+export const propertyOf = (variable: string): string => `--dx-${variable.slice(1)}`;
+export const variableOf = (property: string): string => `$${property.slice('--dx-'.length)}`;
+
+/** A links file holds nothing but whole-value references; anything else is returned as a problem. */
+export const parseLinksFile = (path: string, content: string): { links: Links; problems: string[] } => {
+  const links: Links = new Map();
+  const problems: string[] = [];
+  content.split('\n').forEach((line, index) => {
+    if (!PROPERTY_LINE.test(line)) return;
+    const link = LINK_LINE.exec(line);
+    if (!link) {
+      problems.push(`${path}:${index + 1}: a links file may only hold \`--dx-a: var(--dx-b);\` lines`);
+      return;
+    }
+    if (links.has(link[1])) problems.push(`${path}:${index + 1}: ${link[1]} is linked twice`);
+    links.set(link[1], link[2]);
+  });
+  return { links, problems };
+};
+
+/** The `@use` spec that imports `sourcePath` from the directory of `publicPath`. */
+export const useSpecFor = (publicPath: string, sourcePath: string): string => {
+  const relative = posix.relative(posix.dirname(publicPath), sourcePath);
+  const directory = posix.dirname(relative);
+  const stem = posix.basename(relative, '.scss').replace(/^_/, '');
+  return directory === '.' ? stem : posix.join(directory, stem);
+};
+
+export type Projection = { property: string; variable: string; sources: string[] };
+
+export const renderPublicFile = (publicPath: string, projections: Projection[], hasLinks: boolean): string => {
+  const specs = [...new Set(projections.flatMap(({ sources }) => sources
+    .map((source) => useSpecFor(publicPath, source))))].sort(byCodepoint);
+  const header = [
+    GENERATED_MARKER,
+    ...specs.map((spec) => `@use "${spec}" as *;`),
+    ...(hasLinks ? [`@use "${LINKS_FILE.replace(/^_/, '').replace(/\.scss$/, '')}" as links;`] : []),
+  ];
+  const body = [...projections]
+    .sort((a, b) => byCodepoint(a.property, b.property))
+    .map(({ property, variable }) => `  ${property}: #{${variable}};`);
+  if (hasLinks) body.push(...(body.length ? [''] : []), '  @include links.publish();');
+  return `${header.join('\n')}\n\n@mixin publish {\n${body.join('\n')}\n}\n`;
+};
+
+export type CollectorEntry = { folder: string; selectors: string[] };
+
+export const namespaceOf = (folder: string): string => `${folder}Public`;
+
+/**
+ * One rule per distinct selector list: the document root carries every system-tier folder and
+ * stylelint forbids repeating a selector, so folders sharing a selector list share a rule.
+ */
+export const renderCollector = (entries: CollectorEntry[]): string => {
+  const sorted = [...entries].sort((a, b) => byCodepoint(a.folder, b.folder));
+  const uses = sorted.map(({ folder }) => `@use "${folder}/public" as ${namespaceOf(folder)};`);
+
+  const groups = new Map<string, { selectors: string[]; folders: string[] }>();
+  sorted.forEach(({ folder, selectors }) => {
+    const key = selectors.join(',');
+    const group = groups.get(key) ?? { selectors, folders: [] };
+    group.folders.push(folder);
+    groups.set(key, group);
+  });
+  const rules = [...groups.values()]
+    .sort((a, b) => {
+      const rootA = a.selectors.includes(':root') ? 0 : 1;
+      const rootB = b.selectors.includes(':root') ? 0 : 1;
+      return rootA - rootB || byCodepoint(a.folders[0], b.folders[0]);
+    })
+    .map(({ selectors, folders }) => `${selectors.join(',\n')} {\n${folders
+      .map((folder) => `  @include ${namespaceOf(folder)}.publish();`).join('\n')}\n}`);
+
+  return `${GENERATED_MARKER}\n${uses.join('\n')}\n\n${rules.join('\n\n')}\n`;
+};
+
+// ---------------------------------------------------------------------------------------------
+// the plan: every generated file, or the reasons nothing can be written
+// ---------------------------------------------------------------------------------------------
+
+export type Publication = {
+  /** Generated files by path, byte-exact. Empty when `problems` is not. */
+  files: Map<string, string>;
+  /** Paths of `_public.scss` files that did not exist before. */
+  created: string[];
+  problems: string[];
+};
+
+const publicPathOf = (folder: string): string => `${THEME}/${folder}/${PUBLIC_FILE}`;
+const linksPathOf = (folder: string): string => `${THEME}/${folder}/${LINKS_FILE}`;
+export const COLLECTOR_PATH = `${THEME}/${COLLECTOR_FILE}`;
+
+export const planPublication = (
+  themeFiles: SourceFile[],
+  baseFiles: SourceFile[],
+  registries: Registries,
+  existing: ReadonlyMap<string, string>,
+): Publication => {
+  const problems: string[] = [];
+  const exempt = Object.keys(registries.exemptFolders);
+  const parsedTheme = themeFiles.map(parseSourceFile);
+  const wiring = new Set(baseWiringEntries(parsedTheme, baseIndex(baseFiles), exempt)
+    .map(({ variable }) => variable));
+  const records = tierRecords(themeFiles, registries, wiring);
+
+  // eligible variables per component, with the folder that declares them
+  const perComponent = new Map<string, Projection[]>();
+  records.forEach((record, variable) => {
+    if (record.reason) return;
+    const list = perComponent.get(record.component) ?? [];
+    list.push({ property: propertyOf(variable), variable, sources: record.sources });
+    perComponent.set(record.component, list);
+  });
+
+  // hand-written links per folder
+  const linksByFolder = new Map<string, Links>();
+  existing.forEach((content, path) => {
+    if (!path.endsWith(`/${LINKS_FILE}`)) return;
+    const parsed = parseLinksFile(path, content);
+    problems.push(...parsed.problems);
+    linksByFolder.set(path.split('/')[1], parsed.links);
+  });
+
+  // where each component's file lives: the folder that declares its eligible variables
+  const homeOf = new Map<string, string>();
+  const owners = new Map<string, string>(); // property -> component
+  publishingComponents(registries).forEach((component) => {
+    const folders = tierFoldersOf(component, registries);
+    const declaring = [...new Set((perComponent.get(component) ?? [])
+      .flatMap(({ sources }) => sources.map((source) => source.split('/')[1])))];
+    const linking = folders.filter((folder) => (linksByFolder.get(folder)?.size ?? 0) > 0);
+    const candidates = [...new Set([...declaring, ...linking])];
+    if (candidates.length > 1) {
+      problems.push(`${component}: variables are declared in several folders (${candidates.join(', ')}) — one home per component`);
+      return;
+    }
+    if (candidates.length === 1) homeOf.set(component, candidates[0]);
+    (perComponent.get(component) ?? []).forEach(({ property }) => {
+      const owner = owners.get(property);
+      if (owner && owner !== component) problems.push(`${property} is published by both ${owner} and ${component}`);
+      owners.set(property, component);
+    });
+    folders.forEach((folder) => {
+      linksByFolder.get(folder)?.forEach((_, property) => {
+        const owner = owners.get(property);
+        if (owner && owner !== component) problems.push(`${property} is published by both ${owner} and ${component}`);
+        owners.set(property, component);
+      });
+    });
+  });
+
+  const publishesOnRoot = (component: string): boolean => (registries.rootSelectors[component] ?? []).includes(':root');
+
+  // links: a target must be published where the referrer can see it, and a link may not shadow a value
+  linksByFolder.forEach((links, folder) => {
+    const component = systemTierOf(registries).includes(folder) ? folder : registries.components[folder];
+    links.forEach((target, property) => {
+      const eligible = (perComponent.get(component) ?? []).some((projection) => projection.property === property);
+      if (eligible) {
+        problems.push(`${linksPathOf(folder)}: ${property} is a link, but ${variableOf(property)} is declared and eligible — remove one of the two`);
+      }
+      if (target === property) {
+        problems.push(`${linksPathOf(folder)}: ${property} links to itself`);
+        return;
+      }
+      const owner = owners.get(target);
+      if (!owner) {
+        problems.push(`${linksPathOf(folder)}: ${property} links to ${target}, which nothing publishes`);
+      } else if (owner !== component && !publishesOnRoot(owner)) {
+        problems.push(`${linksPathOf(folder)}: ${property} links to ${target}, published on another component's root — publish the value instead`);
+      }
+    });
+  });
+
+  // stray files: a public file where the component has nothing to publish, or in a foreign folder
+  existing.forEach((_, path) => {
+    if (!path.endsWith(`/${PUBLIC_FILE}`)) return;
+    const folder = path.split('/')[1];
+    const component = systemTierOf(registries).includes(folder) ? folder : registries.components[folder];
+    if (!component || !publishingComponents(registries).includes(component)) {
+      problems.push(`${path}: ${folder} is not a publishing component — remove the file or register the component`);
+      return;
+    }
+    const home = homeOf.get(component);
+    if (home === undefined) {
+      problems.push(`${path}: ${component} has nothing left to publish — remove the file by hand`);
+    } else if (home !== folder) {
+      problems.push(`${path}: ${component} publishes from ${home}/ — remove this copy`);
+    }
+  });
+
+  homeOf.forEach((folder, component) => {
+    if (!(registries.rootSelectors[component] ?? []).length) {
+      problems.push(`${component} publishes from ${folder}/ but has no rootSelectors — add it to derive-registries.mjs OVERRIDES`);
+    }
+  });
+
+  if (problems.length) return { files: new Map(), created: [], problems: [...new Set(problems)].sort(byCodepoint) };
+
+  const files = new Map<string, string>();
+  const created: string[] = [];
+  const collector: CollectorEntry[] = [];
+  homeOf.forEach((folder, component) => {
+    const path = publicPathOf(folder);
+    const hasLinks = (linksByFolder.get(folder)?.size ?? 0) > 0;
+    files.set(path, renderPublicFile(path, perComponent.get(component) ?? [], hasLinks));
+    if (!existing.has(path)) created.push(path);
+    collector.push({ folder, selectors: registries.rootSelectors[component] });
+  });
+  files.set(COLLECTOR_PATH, renderCollector(collector));
+
+  return { files, created: created.sort(byCodepoint), problems: [] };
+};
+
+/** Paths whose committed content differs from the plan — what `--check` reports. */
+export const stalePaths = (plan: Publication, existing: ReadonlyMap<string, string>): string[] => [...plan.files]
+  .filter(([path, content]) => existing.get(path) !== content)
+  .map(([path]) => path)
+  .sort(byCodepoint);
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-scss/tools/review/name-truth.json b/packages/devextreme-scss/tools/review/name-truth.json
new file mode 100644
index 000000000000..bc28ec46ec22
--- /dev/null
+++ b/packages/devextreme-scss/tools/review/name-truth.json
@@ -0,0 +1,214 @@
+{
+  "$comment": [
+    "Names whose word and property disagree, reviewed one at a time. Produced by",
+    "tools/review/name-truth.mjs and held by tests/name-truth.test.ts: a new disagreement fails the",
+    "build with the row to paste here, and a row that stops disagreeing fails it too.",
+    "banked      - the colour audit has already decided it (tests/roles.baseline.json)",
+    "by-equality - one quantity written to a neighbouring property on purpose, because the two are",
+    "              the same length by construction: a gap realised with margins, an inset that is a",
+    "              padding, a square whose width is a height",
+    "defect      - a rule that looks wrong and is left as found, named here so it is not invisible"
+  ],
+  "rows": [
+    {
+      "name": "--dx-chat-file-base-section-gap",
+      "says": "gap",
+      "paints": [
+        "margin-inline-end",
+        "margin-inline-start"
+      ],
+      "decision": "by-equality",
+      "why": "A gap between the file name and the file size, realised with margins because the two are not flex children of one container. The word names the intent; there is no gap property to carry it here."
+    },
+    {
+      "name": "--dx-context-menu-padding-inline",
+      "says": "padding-inline",
+      "paints": [
+        "inset-inline-end"
+      ],
+      "decision": "by-equality",
+      "why": "Written to padding on the item, and to inset-inline-end on the popout arrow so the arrow sits exactly one padding in. The second is the first, by equality."
+    },
+    {
+      "name": "--dx-date-view-roller-padding",
+      "says": "padding",
+      "paints": [
+        "height",
+        "top"
+      ],
+      "decision": "by-equality",
+      "why": "The roller’s vertical padding is realised with spacer pseudo-elements, so it is written to their height and to the selected frame’s top."
+    },
+    {
+      "name": "--dx-diagram-selection-bg",
+      "says": "bg",
+      "paints": [
+        "fill"
+      ],
+      "decision": "banked",
+      "why": "Already reviewed by the colour audit: fill is the SVG spelling of a background (roles.baseline.json, slotLies)."
+    },
+    {
+      "name": "--dx-drop-down-editor-invalid-badge-size",
+      "says": "size",
+      "paints": [
+        "padding-inline-end",
+        "padding-left",
+        "padding-right"
+      ],
+      "decision": "by-equality",
+      "why": "The input reserves exactly the badge’s width, so the padding IS the size."
+    },
+    {
+      "name": "--dx-file-uploader-file-wrapper-border-width",
+      "says": "border-width",
+      "paints": [
+        "padding-left",
+        "padding-right"
+      ],
+      "decision": "by-equality",
+      "why": "The wrapper keeps its content clear of its own border by padding of the border’s width."
+    },
+    {
+      "name": "--dx-gantt-content",
+      "says": "content",
+      "paints": [
+        "background-color",
+        "border-color",
+        "border-left-color",
+        "border-top-color"
+      ],
+      "decision": "banked",
+      "why": "Already reviewed by the colour audit: one value painting the band and the marks that bound it (rule 5)."
+    },
+    {
+      "name": "--dx-grid-command-ai-button-max-width",
+      "says": "width",
+      "paints": [
+        "left",
+        "right"
+      ],
+      "decision": "by-equality",
+      "why": "The button is pinned by left and right at its own width."
+    },
+    {
+      "name": "--dx-grid-content-focused",
+      "says": "content",
+      "paints": [
+        "outline-color"
+      ],
+      "decision": "banked",
+      "why": "Already reviewed by the colour audit: the focus ring is an outline, and the name carries the content word from its family."
+    },
+    {
+      "name": "--dx-invalid-badge-padding-inline",
+      "says": "padding-inline",
+      "paints": [
+        "inset-inline-end"
+      ],
+      "decision": "by-equality",
+      "why": "The inset that centres the badge: it is the padding beside the badge, and the badge is positioned at that inset."
+    },
+    {
+      "name": "--dx-list-item-height",
+      "says": "height",
+      "paints": [
+        "width"
+      ],
+      "decision": "by-equality",
+      "why": "The select-all checkbox container is square: its width is the item’s height."
+    },
+    {
+      "name": "--dx-list-item-padding-block",
+      "says": "padding-block",
+      "paints": [
+        "padding-inline"
+      ],
+      "decision": "defect",
+      "why": "Seventeen rules use it as the block half of the item’s padding, and one - .dx-list-item-chevron-container - writes it to padding-inline, where the item’s own -padding-inline is what belongs. Left as found: changing it moves the chevron, which is a decision for whoever owns the list, and this file is where it stops being invisible."
+    },
+    {
+      "name": "--dx-menu-item-icon-gap",
+      "says": "gap",
+      "paints": [
+        "margin-inline-end",
+        "margin-inline-start"
+      ],
+      "decision": "by-equality",
+      "why": "The gap between a menu item’s icon and its text, realised with margin-inline on the icon and on the popout."
+    },
+    {
+      "name": "--dx-scheduler-appointment-start-shadow",
+      "says": "shadow",
+      "paints": [
+        "background-color"
+      ],
+      "decision": "banked",
+      "why": "Already reviewed by the colour audit: the start mark is drawn with an inset shadow in thirteen rules, and background-color is the fourteenth."
+    },
+    {
+      "name": "--dx-scheduler-header-panel-margin",
+      "says": "margin",
+      "paints": [
+        "padding-left",
+        "padding-right"
+      ],
+      "decision": "by-equality",
+      "why": "The panel’s inline margin is realised as padding on the cell inside it."
+    },
+    {
+      "name": "--dx-splitter-bar-border",
+      "says": "border",
+      "paints": [
+        "background-color"
+      ],
+      "decision": "banked",
+      "why": "Already reviewed by the colour audit: a hairline drawn with a background."
+    },
+    {
+      "name": "--dx-splitter-bar-border-disabled",
+      "says": "border",
+      "paints": [
+        "background-color"
+      ],
+      "decision": "banked",
+      "why": "See splitter-bar-border."
+    },
+    {
+      "name": "--dx-splitter-bar-border-width",
+      "says": "border-width",
+      "paints": [
+        "width"
+      ],
+      "decision": "by-equality",
+      "why": "The splitter’s border is an element, not a border property, so its thickness is a width."
+    },
+    {
+      "name": "--dx-tabs-item-padding-block",
+      "says": "padding-block",
+      "paints": [
+        "top"
+      ],
+      "decision": "by-equality",
+      "why": "The secondary indicator is offset by exactly the item’s block padding, so top carries it."
+    },
+    {
+      "name": "--dx-text-editor-input-filled-padding-inline",
+      "says": "padding-inline",
+      "paints": [
+        "min-width"
+      ],
+      "decision": "by-equality",
+      "why": "A filled input’s minimum width is its inline padding doubled, so the padding reaches min-width."
+    },
+    {
+      "name": "--dx-text-editor-invalid-badge-size",
+      "says": "size",
+      "paints": [
+        "padding-inline-end"
+      ],
+      "decision": "by-equality",
+      "why": "See drop-down-editor-invalid-badge-size."
+    }
+  ]
+}
diff --git a/packages/devextreme-scss/tools/review/name-truth.mjs b/packages/devextreme-scss/tools/review/name-truth.mjs
new file mode 100644
index 000000000000..bebc9baac3b7
--- /dev/null
+++ b/packages/devextreme-scss/tools/review/name-truth.mjs
@@ -0,0 +1,211 @@
+/*
+ * Does the last word of a published name describe the CSS property it feeds?
+ *
+ *   node tools/review/name-truth.mjs          # report
+ *   node tools/review/name-truth.mjs --json   # for the gate
+ *
+ * The colour pass already asks a narrow version of this: `slotLies` fires when a name's slot word
+ * and the property it paints belong to different families. It fires only when NO property matches,
+ * so a name that feeds two properties of different families - `--dx-grid-drop-highlight-bg` on
+ * `background-color` AND on `color` - passes it, and the half the name does not describe is
+ * invisible. It also covers colours alone: nothing has ever checked that `-height` feeds a height,
+ * `-padding` a padding or `-gap` a gap, and those are two thirds of the tier.
+ *
+ * Read from the built bundle, because the name's truth is what the browser does with it, not what
+ * the SCSS looks like. Three outcomes per name:
+ *
+ *   agrees   every property it feeds is one the name's last word names
+ *   mixed    it feeds properties of several families and the name can only name one
+ *   wrong    every property it feeds disagrees with the name
+ *
+ * `mixed` is not automatically a defect - NAMING rule 5 allows one value in two properties, named
+ * for the dominant one - but until now that set was never enumerated, so no one could tell a
+ * deliberate pair from an accident.
+ */
+
+import { readFileSync, existsSync } from 'fs';
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+
+const here = dirname(fileURLToPath(import.meta.url));
+const packageRoot = join(here, '..', '..');
+const bundle = join(packageRoot, '..', 'devextreme', 'artifacts', 'css', 'dx.fluent-next.blue.light.css');
+if (!existsSync(bundle)) {
+  console.error(`no bundle at ${bundle} - run: pnpm nx build:themes devextreme-scss`);
+  process.exit(2);
+}
+
+const css = readFileSync(bundle, 'utf8');
+/*
+ * Two ways a name reaches a property, and only one of them is a claim about it.
+ *
+ *   direct   `padding: var(--dx-x)` - the name IS the padding, and it had better say so
+ *   derived  `padding: calc((var(--dx-x) - 16px) / 2)` - the name is a quantity the padding is
+ *            computed FROM, and naming it after the padding would be the lie
+ *
+ * A grid header's height centres a menu with `margin-top: calc((height - 32px) / 2)`. Reading that
+ * as "height paints a margin" is how a pass turns arithmetic into a finding.
+ */
+const paints = new Map();     // name -> Set(property) assigned directly
+const derived = new Map();    // name -> Set(property) computed from it
+for (const [, property, value] of css.matchAll(/([a-z-]+)\s*:\s*([^;{}]*var\(--dx-[^;{}]*)/g)) {
+  /* A custom property on the left is an alias declaration, not paint: it says this name stands for
+   * that one, which is a different relationship and has its own check in publish.mjs. */
+  if (property.startsWith('--')) continue;
+  for (const [, name] of value.matchAll(/var\(\s*(--dx-[a-z0-9-]+)/g)) {
+    if (name.startsWith('--dxds-')) continue;
+    const direct = value.trim().replace(/\s+/g, '') === `var(${name})`;
+    const bucket = direct ? paints : derived;
+    if (!bucket.has(name)) bucket.set(name, new Set());
+    bucket.get(name).add(property);
+  }
+}
+
+/*
+ * The vocabulary, longest word first so `-border-width` is read before `-width` and
+ * `-text-transform` before `-transform`. Each entry: the word, and what it is allowed to feed.
+ * Shorthands count - `border: <width> solid <colour>` carries the width, so a `-border-width` name
+ * on `border` is telling the truth. So does the SVG spelling of a fill and a stroke.
+ */
+const RULES = [
+  ['text-transform', /^text-transform$/],
+  ['border-radius', /border[a-z-]*radius/],
+  ['border-width', /^(border|outline)([a-z-]*(width|inline-start|inline-end|block-start|block-end))?$|^border-(top|right|bottom|left)$/],
+  ['outline-width', /^outline([a-z-]*width)?$/],
+  ['outline-offset', /^outline-offset$/],
+  ['font-size', /^font-size$/],
+  ['font-weight', /^font-weight$/],
+  ['line-height', /^line-height$/],
+  ['letter-spacing', /^letter-spacing$/],
+  ['padding-block-start', /^padding(-block-start|-top)?$/],
+  ['padding-block-end', /^padding(-block-end|-bottom)?$/],
+  ['padding-inline-start', /^padding(-inline-start|-left)?$/],
+  ['padding-inline-end', /^padding(-inline-end|-right)?$/],
+  ['padding-block', /^padding(-block(-start|-end)?|-top|-bottom)?$/],
+  ['padding-inline', /^padding(-inline(-start|-end)?|-left|-right)?$/],
+  ['padding', /^padding/],
+  ['margin-block-start', /^margin(-block-start|-top)?$/],
+  ['margin-block-end', /^margin(-block-end|-bottom)?$/],
+  ['margin-inline-start', /^margin(-inline-start|-left)?$/],
+  ['margin-inline-end', /^margin(-inline-end|-right)?$/],
+  ['margin-block', /^margin(-block(-start|-end)?|-top|-bottom)?$/],
+  ['margin-inline', /^margin(-inline(-start|-end)?|-left|-right)?$/],
+  ['margin', /^margin/],
+  ['gap', /gap$/],
+  ['z-index', /^z-index$/],
+  ['opacity', /^opacity$/],
+  ['box-shadow', /shadow/],
+  ['shadow', /shadow/],
+  ['bg', /^background/],
+  ['background', /^background/],
+  ['fill', /^(fill|background(-color)?)$/],
+  ['width', /(^|-)(width|flex-basis|grid-template-columns)$/],
+  ['height', /(^|-)height$/],
+  ['size', /(width|height|font-size|flex-basis)$/],
+  ['duration', /^(transition|animation)-duration$/],
+  ['delay', /^(transition|animation)-delay$/],
+  ['transform', /^transform$/],
+  ['content', /^(color|fill|stroke|-webkit-text-fill-color|caret-color)$/],
+  ['text', /^(color|fill|stroke)$/],
+  ['title', /^(color|fill)$/],
+  ['caption', /^(color|fill)$/],
+  ['placeholder', /^color$/],
+  ['label', /^color$/],
+  ['icon', /^(color|fill|stroke)$/],
+  ['glyph', /^(color|fill|stroke)$/],
+  ['border', /^(border|outline)[a-z-]*(color)?$|^stroke$/],
+  ['outline', /^outline[a-z-]*$/],
+  ['separator', /^(border[a-z-]*color|background-color)$/],
+  ['divider', /^(border[a-z-]*color|background-color)$/],
+  ['line', /^(border[a-z-]*color|background-color|text-decoration-color)$/],
+  ['selector', /^(border[a-z-]*color|background-color)$/],
+];
+const FAMILY_OF_PROPERTY = [
+  [/^background/, 'bg'], [/^(color|fill|stroke|caret-color|-webkit-text-fill-color)$/, 'content'],
+  [/(border|outline)[a-z-]*color$/, 'border'], [/shadow/, 'shadow'],
+  [/^(padding|margin|gap|column-gap|row-gap|inset|top|right|bottom|left)/, 'box'],
+  [/(width|height|flex-basis|size)$/, 'metric'],
+  [/^(font|line-height|letter-spacing|text-)/, 'type'],
+];
+const familyOf = (property) => FAMILY_OF_PROPERTY.find(([re]) => re.test(property))?.[1] ?? 'other';
+
+/*
+ * A state suffix is not a word about a property: `-bg-hovered` is still a bg. Stripped before the
+ * word is read, or four hundred names fall out of the pass for saying "hovered".
+ */
+const STATES = JSON.parse(readFileSync(join(packageRoot, 'tools', 'naming', 'registries.json'), 'utf8'))
+  .states.slice().sort((a, b) => b.length - a.length);
+const bareOf = (name) => {
+  const n = name.replace(/^--dx-/, '');
+  const state = STATES.find((st) => n.endsWith(`-${st}`));
+  return state ? n.slice(0, -state.length - 1) : n;
+};
+
+const rows = [];
+let agrees = 0;
+const noRule = [];
+for (const [name, set] of [...paints].sort()) {
+  const bare = bareOf(name);
+  let rule = RULES.find(([word]) => bare === word || bare.endsWith(`-${word}`));
+  /*
+   * Two spellings the flat list cannot see.
+   *
+   * A width that belongs to a border names its side first: `-border-inline-start-width` ends in
+   * `-width` and is not a width of the box. And an RTL name is physical on purpose - the theme
+   * publishes `-rtl-margin-inline-start` for the rule that writes `margin-right`, because that IS
+   * what inline-start means when the page is mirrored.
+   */
+  if (/(border|outline)[a-z-]*-width$/.test(bare)) rule = RULES.find(([word]) => word === 'border-width');
+  const mirrored = /-rtl-/.test(bare);
+  if (!rule) { noRule.push({ name, paints: [...set].sort() }); continue; }
+  const props = [...set].sort();
+  const MIRROR = {
+    'inline-start': /^[a-z-]*(right|inline-start)$/, 'inline-end': /^[a-z-]*(left|inline-end)$/,
+  };
+  const axis = Object.keys(MIRROR).find((a) => bare.endsWith(a));
+  const bad = props.filter((p) => !rule[1].test(p) && !(mirrored && axis && MIRROR[axis].test(p)));
+  if (!bad.length) { agrees += 1; continue; }
+  rows.push({
+    name, says: rule[0], paints: props, bad, families: [...new Set(props.map(familyOf))].sort(),
+    verdict: bad.length === props.length ? 'wrong' : 'mixed',
+  });
+}
+
+const result = {
+  summary: {
+    names: paints.size,
+    derivedOnly: [...derived.keys()].filter((n) => !paints.has(n)).length,
+    checked: paints.size - noRule.length,
+    agrees,
+    mixed: rows.filter((r) => r.verdict === 'mixed').length,
+    wrong: rows.filter((r) => r.verdict === 'wrong').length,
+    noRule: noRule.length,
+  },
+  rows,
+  noRule,
+};
+
+if (process.argv.includes('--json')) {
+  console.log(JSON.stringify(result, null, 2));
+} else {
+  const s = result.summary;
+  console.log(`names assigned to a property directly: ${s.names}; carrying a word this pass knows: ${s.checked}`);
+  console.log(`names that only ever feed a calc, judged on nothing: ${s.derivedOnly}`);
+  console.log(`  agrees ${s.agrees}   mixed ${s.mixed}   wrong ${s.wrong}   no rule for the word ${s.noRule}\n`);
+  for (const verdict of ['wrong', 'mixed']) {
+    const list = rows.filter((r) => r.verdict === verdict);
+    console.log(`## ${verdict} - ${list.length}\n`);
+    for (const r of list) {
+      console.log(`  ${r.name.padEnd(56)} says "${r.says}", paints ${r.bad.join(', ')}`
+        + (r.verdict === 'mixed' ? `  (also ${r.paints.filter((p) => !r.bad.includes(p)).join(', ')})` : ''));
+    }
+    console.log('');
+  }
+  const words = new Map();
+  for (const n of noRule) {
+    const w = bareOf(n.name).split('-').slice(-1)[0];
+    words.set(w, (words.get(w) ?? 0) + 1);
+  }
+  console.log(`## words with no rule - ${[...words].length}\n`);
+  console.log([...words].sort((a, b) => b[1] - a[1]).map(([w, c]) => `${w} (${c})`).join(', '));
+}
diff --git a/packages/devextreme-scss/tools/review/nested-scopes.json b/packages/devextreme-scss/tools/review/nested-scopes.json
new file mode 100644
index 000000000000..9c6b4b53728c
--- /dev/null
+++ b/packages/devextreme-scss/tools/review/nested-scopes.json
@@ -0,0 +1,641 @@
+{
+  "accordion": [
+    "dx-accordion-item",
+    "dx-accordion-item-body",
+    "dx-accordion-item-opened",
+    "dx-accordion-item-title",
+    "dx-accordion-item-title-caption"
+  ],
+  "action-sheet": [
+    "dx-actionsheet-container",
+    "dx-button"
+  ],
+  "button": [
+    "dx-button-content",
+    "dx-button-has-icon",
+    "dx-button-mode-contained",
+    "dx-button-mode-outlined",
+    "dx-button-mode-text",
+    "dx-button-text",
+    "dx-calendar-navigator-next-view",
+    "dx-calendar-navigator-previous-view",
+    "dx-dropdownbutton",
+    "dx-scheduler-header",
+    "dx-toolbar-menu-section"
+  ],
+  "button-group": [
+    "dx-buttongroup-mode-contained",
+    "dx-buttongroup-mode-text"
+  ],
+  "calendar": [
+    "dx-calendar-body",
+    "dx-calendar-cell",
+    "dx-calendar-cell-in-range",
+    "dx-calendar-cell-range-hover",
+    "dx-calendar-multiview",
+    "dx-calendar-navigator",
+    "dx-calendar-week-number-cell"
+  ],
+  "card-view": [
+    "dx-card-cover",
+    "dx-card-cover-noimage",
+    "dx-cardview-card",
+    "dx-cardview-card-content",
+    "dx-cardview-card-header",
+    "dx-cardview-card-selection",
+    "dx-cardview-content",
+    "dx-cardview-field-caption",
+    "dx-cardview-field-template",
+    "dx-cardview-field-value",
+    "dx-cardview-field-value__text-part--highlighted",
+    "dx-cardview-header-container",
+    "dx-cardview-header-item-container",
+    "dx-cardview-headerpanel-content--with-header-items",
+    "dx-cardview-headerpanel-text-empty",
+    "dx-cardview-headers",
+    "dx-cardview-root-container",
+    "dx-cardview-sortable",
+    "dx-gridcore-nodata-container",
+    "dx-gridcore-nodata-element",
+    "dx-gridcore-nodata-icon-container"
+  ],
+  "chat": [
+    "dx-avatar",
+    "dx-chat-alertlist",
+    "dx-chat-alertlist-error",
+    "dx-chat-editing-preview",
+    "dx-chat-editing-preview-cancel-button",
+    "dx-chat-editing-preview-caption",
+    "dx-chat-editing-preview-content",
+    "dx-chat-file",
+    "dx-chat-file-download-button",
+    "dx-chat-file-icon-container",
+    "dx-chat-file-name",
+    "dx-chat-file-size",
+    "dx-chat-file-view",
+    "dx-chat-message-edited",
+    "dx-chat-messagebox",
+    "dx-chat-messagebox-textarea-container",
+    "dx-chat-messagebubble",
+    "dx-chat-messagebubble-image",
+    "dx-chat-messagegroup",
+    "dx-chat-messagegroup-alignment-end",
+    "dx-chat-messagegroup-alignment-start",
+    "dx-chat-messagegroup-author-name",
+    "dx-chat-messagegroup-content",
+    "dx-chat-messagegroup-information",
+    "dx-chat-messagegroup-time",
+    "dx-chat-messagelist",
+    "dx-chat-messagelist-day-header",
+    "dx-chat-messagelist-empty-image",
+    "dx-chat-messagelist-empty-message",
+    "dx-chat-messagelist-empty-prompt",
+    "dx-chat-messagelist-empty-view",
+    "dx-chat-suggestions",
+    "dx-chat-textarea",
+    "dx-chat-textarea-toolbar",
+    "dx-chat-typingindicator-bubble",
+    "dx-chat-typingindicator-circle",
+    "dx-chat-typingindicator-content",
+    "dx-chat-typingindicator-text"
+  ],
+  "check-box": [
+    "dx-checkbox-checked",
+    "dx-checkbox-icon",
+    "dx-checkbox-indeterminate",
+    "dx-checkbox-text",
+    "dx-list"
+  ],
+  "color-box": [
+    "dx-colorbox-color-result-preview"
+  ],
+  "color-view": [
+    "dx-colorview-alpha-channel-border",
+    "dx-colorview-alpha-channel-cell",
+    "dx-colorview-alpha-channel-handle",
+    "dx-colorview-alpha-channel-scale",
+    "dx-colorview-color-preview",
+    "dx-colorview-color-preview-container",
+    "dx-colorview-container-row",
+    "dx-colorview-controls-container",
+    "dx-colorview-hue-scale",
+    "dx-colorview-hue-scale-cell",
+    "dx-colorview-hue-scale-handle",
+    "dx-colorview-hue-scale-wrapper",
+    "dx-colorview-palette",
+    "dx-colorview-palette-cell",
+    "dx-colorview-palette-handle"
+  ],
+  "data-grid": [
+    "dx-datagrid-edit-popup",
+    "dx-datagrid-filter-panel",
+    "dx-datagrid-form-buttons-container",
+    "dx-datagrid-group-panel",
+    "dx-datagrid-rowsview",
+    "dx-gridbase-container"
+  ],
+  "date-box": [
+    "dx-datebox-button-cell",
+    "dx-datebox-wrapper-calendar",
+    "dx-datebox-wrapper-rollers",
+    "dx-texteditor"
+  ],
+  "date-view": [
+    "dx-dateview",
+    "dx-dateview-item",
+    "dx-dateview-item-selected",
+    "dx-dateview-item-selected-frame",
+    "dx-dateviewroller",
+    "dx-dateviewroller-hours",
+    "dx-dateviewroller-month"
+  ],
+  "diagram": [
+    "dx-diagram-context-toolbox-target",
+    "dx-diagram-loading-indicator",
+    "dx-diagram-mobile-toolbar-color-box-opened",
+    "dx-diagram-toolbar",
+    "dx-diagram-toolbox-panel",
+    "dx-diagram-touchbar"
+  ],
+  "drawer": [
+    "dx-drawer-shader"
+  ],
+  "drop-down-button": [
+    "dx-dropdownbutton-action",
+    "dx-dropdownbutton-has-arrow",
+    "dx-dropdownbutton-toggle"
+  ],
+  "drop-down-editor": [
+    "dx-datebox",
+    "dx-datebox-date",
+    "dx-datebox-datetime",
+    "dx-datebox-time",
+    "dx-daterangebox",
+    "dx-dropdowneditor-button",
+    "dx-dropdowneditor-icon",
+    "dx-invalid",
+    "dx-valid",
+    "dx-validation-pending"
+  ],
+  "fieldset": [
+    "dx-field-label",
+    "dx-field-value",
+    "dx-field-value-static",
+    "dx-fieldset-header"
+  ],
+  "file-manager": [
+    "dx-filemanager-context-menu",
+    "dx-filemanager-dialog-delete-item-popup",
+    "dx-filemanager-dialog-name-editor-popup",
+    "dx-filemanager-dirs-tree",
+    "dx-filemanager-dirs-tree-item-text",
+    "dx-filemanager-file-actions-button",
+    "dx-filemanager-progress-panel-infos-container",
+    "dx-filemanager-progress-panel-title-text",
+    "dx-filemanager-progresspanel",
+    "dx-filemanager-view-switcher-popup"
+  ],
+  "file-uploader": [
+    "dx-fileuploader-content",
+    "dx-fileuploader-dragover",
+    "dx-fileuploader-file",
+    "dx-fileuploader-file-container",
+    "dx-fileuploader-file-icon",
+    "dx-fileuploader-file-name",
+    "dx-fileuploader-file-size",
+    "dx-fileuploader-file-status-message",
+    "dx-fileuploader-files-container",
+    "dx-fileuploader-input",
+    "dx-fileuploader-input-label",
+    "dx-fileuploader-input-wrapper",
+    "dx-fileuploader-invalid",
+    "dx-fileuploader-show-file-list",
+    "dx-fileuploader-wrapper",
+    "dx-invalid"
+  ],
+  "filter-builder": [
+    "dx-filterbuilder-range-separator"
+  ],
+  "form": [
+    "dx-field-item",
+    "dx-field-item-custom-label-content",
+    "dx-field-item-help-text",
+    "dx-field-item-label-location-left",
+    "dx-field-item-label-location-right",
+    "dx-field-item-label-location-top",
+    "dx-field-item-label-text",
+    "dx-field-item-optional",
+    "dx-field-item-optional-mark",
+    "dx-field-item-required",
+    "dx-field-item-required-mark",
+    "dx-form-group-caption",
+    "dx-form-group-custom-caption",
+    "dx-form-group-with-caption",
+    "dx-layout-manager"
+  ],
+  "gallery": [
+    "dx-gallery-indicator",
+    "dx-gallery-indicator-item",
+    "dx-gallery-indicator-item-active",
+    "dx-gallery-indicator-item-selected",
+    "dx-gallery-nav-button-next",
+    "dx-gallery-nav-button-prev"
+  ],
+  "grid": [
+    "dx-ai-chat--disabled",
+    "dx-ai-chat__action-list-item",
+    "dx-ai-chat__action-list-item--aborted",
+    "dx-ai-chat__action-list-item--error",
+    "dx-ai-chat__action-list-item--success",
+    "dx-ai-chat__content",
+    "dx-ai-chat__message",
+    "dx-ai-chat__message--error",
+    "dx-ai-chat__message--pending",
+    "dx-ai-chat__message--success",
+    "dx-ai-chat__message-content",
+    "dx-ai-chat__message-error-text",
+    "dx-ai-chat__message-header-row",
+    "dx-ai-chat__message-icon",
+    "dx-ai-chat__message-regenerate-button",
+    "dx-ai-chat__empty-image",
+    "dx-ai-prompt-editor__progressbar",
+    "dx-cell-modified",
+    "dx-command-adaptive",
+    "dx-command-ai-header-button",
+    "dx-command-ai-header-content",
+    "dx-data-row",
+    "dx-datagrid-adaptive-more",
+    "dx-datagrid-borders",
+    "dx-datagrid-bottom-load-panel",
+    "dx-datagrid-column-chooser-list",
+    "dx-datagrid-columns-separator",
+    "dx-datagrid-container",
+    "dx-datagrid-content",
+    "dx-datagrid-draggable-column",
+    "dx-datagrid-dragview",
+    "dx-datagrid-edit-popup",
+    "dx-datagrid-filter-panel",
+    "dx-datagrid-filter-range-overlay",
+    "dx-datagrid-filter-row",
+    "dx-datagrid-focus-overlay",
+    "dx-datagrid-group-closed",
+    "dx-datagrid-group-opened",
+    "dx-datagrid-group-panel",
+    "dx-datagrid-header-panel",
+    "dx-datagrid-headers",
+    "dx-datagrid-invalid",
+    "dx-datagrid-nodata",
+    "dx-datagrid-revert-tooltip",
+    "dx-datagrid-rowsview",
+    "dx-datagrid-search-panel",
+    "dx-datagrid-search-text",
+    "dx-datagrid-sticky-columns",
+    "dx-datagrid-summary-item",
+    "dx-datagrid-total-footer",
+    "dx-editor-cell",
+    "dx-gridbase-container",
+    "dx-header-multi-row",
+    "dx-header-row",
+    "dx-highlight-outline",
+    "dx-pivotgrid-fields-container",
+    "dx-row",
+    "dx-sortable-dragging",
+    "dx-treelist-adaptive-more",
+    "dx-treelist-borders",
+    "dx-treelist-bottom-load-panel",
+    "dx-treelist-column-chooser-list",
+    "dx-treelist-columns-separator",
+    "dx-treelist-container",
+    "dx-treelist-content",
+    "dx-treelist-draggable-column",
+    "dx-treelist-dragview",
+    "dx-treelist-edit-popup",
+    "dx-treelist-filter-panel",
+    "dx-treelist-filter-range-overlay",
+    "dx-treelist-filter-row",
+    "dx-treelist-focus-overlay",
+    "dx-treelist-header-panel",
+    "dx-treelist-headers",
+    "dx-treelist-invalid",
+    "dx-treelist-nodata",
+    "dx-treelist-revert-tooltip",
+    "dx-treelist-rowsview",
+    "dx-treelist-search-panel",
+    "dx-treelist-search-text",
+    "dx-treelist-summary-item",
+    "dx-treelist-total-footer"
+  ],
+  "html-editor": [
+    "dx-aidialog-content",
+    "dx-aidialog-controls",
+    "dx-aidialog-title",
+    "dx-htmleditor-content",
+    "dx-htmleditor-toolbar-format",
+    "dx-htmleditor-toolbar-menu-separator",
+    "dx-htmleditor-toolbar-separator",
+    "dx-resize-frame",
+    "dx-table-resize-frame"
+  ],
+  "informer": [
+    "dx-informer-bg",
+    "dx-informer-error",
+    "dx-informer-icon",
+    "dx-informer-info"
+  ],
+  "list": [
+    "dx-list-border-visible",
+    "dx-list-group",
+    "dx-list-group-body",
+    "dx-list-group-header",
+    "dx-list-item",
+    "dx-list-item-after-bag",
+    "dx-list-item-badge-container",
+    "dx-list-item-before-bag",
+    "dx-list-item-chevron",
+    "dx-list-item-response-wait",
+    "dx-list-items",
+    "dx-list-next-button",
+    "dx-list-reorder-handle",
+    "dx-list-search",
+    "dx-list-select-all",
+    "dx-list-select-all-label",
+    "dx-list-slide-menu-button",
+    "dx-list-slide-menu-button-delete",
+    "dx-list-slide-menu-button-menu",
+    "dx-list-static-delete-button"
+  ],
+  "load-indicator": [
+    "dx-loadindicator-content-circle",
+    "dx-loadindicator-content-sparkle",
+    "dx-loadindicator-segment-inner",
+    "dx-loadindicator-wrapper"
+  ],
+  "lookup": [
+    "dx-dropdowneditor-active",
+    "dx-lookup-arrow",
+    "dx-lookup-field",
+    "dx-lookup-popup-search",
+    "dx-lookup-search-wrapper"
+  ],
+  "menu": [
+    "dx-context-menu",
+    "dx-datagrid-filter-row",
+    "dx-menu",
+    "dx-menu-horizontal",
+    "dx-menu-item",
+    "dx-menu-item-expanded",
+    "dx-menu-item-selected",
+    "dx-menu-vertical",
+    "dx-treelist-filter-row"
+  ],
+  "number-box": [
+    "dx-numberbox-spin-button",
+    "dx-numberbox-spin-container",
+    "dx-numberbox-spin-down-icon",
+    "dx-numberbox-spin-touch-friendly",
+    "dx-numberbox-spin-up-icon"
+  ],
+  "pivot-grid": [
+    "dx-pivotgrid-scrollbar-measure-element"
+  ],
+  "popup": [
+    "dx-datagrid-column-chooser",
+    "dx-dialog-message",
+    "dx-dialog-root",
+    "dx-popup-bottom",
+    "dx-popup-content",
+    "dx-popup-title",
+    "dx-treelist-column-chooser"
+  ],
+  "progress-bar": [
+    "dx-invalid",
+    "dx-progressbar-animating-container",
+    "dx-progressbar-container",
+    "dx-progressbar-range",
+    "dx-progressbar-status"
+  ],
+  "radio-button": [
+    "dx-invalid",
+    "dx-list",
+    "dx-radio-value-container",
+    "dx-radiobutton-checked",
+    "dx-radiobutton-icon",
+    "dx-radiobutton-icon-checked",
+    "dx-radiobutton-icon-dot"
+  ],
+  "radio-group": [
+    "dx-radiogroup-horizontal"
+  ],
+  "recurrence-editor": [
+    "dx-recurrence-numberbox-interval",
+    "dx-recurrence-numberbox-interval-label"
+  ],
+  "scheduler": [
+    "dx-scheduler-adaptive",
+    "dx-scheduler-agenda",
+    "dx-scheduler-agenda-nodata",
+    "dx-scheduler-all-day-appointment",
+    "dx-scheduler-all-day-panel",
+    "dx-scheduler-all-day-table",
+    "dx-scheduler-all-day-table-cell",
+    "dx-scheduler-all-day-title",
+    "dx-scheduler-appointment",
+    "dx-scheduler-appointment-collector",
+    "dx-scheduler-appointment-collector-compact",
+    "dx-scheduler-appointment-content",
+    "dx-scheduler-appointment-content-date",
+    "dx-scheduler-appointment-content-details",
+    "dx-scheduler-appointment-recurrence",
+    "dx-scheduler-appointment-recurrence-icon",
+    "dx-scheduler-appointment-reduced",
+    "dx-scheduler-appointment-title",
+    "dx-scheduler-container",
+    "dx-scheduler-date-table-cell",
+    "dx-scheduler-date-table-droppable-cell",
+    "dx-scheduler-date-time-indicator",
+    "dx-scheduler-date-time-shader-all-day",
+    "dx-scheduler-dropdown-appointment-date",
+    "dx-scheduler-fixed-appointments",
+    "dx-scheduler-group-flex-container",
+    "dx-scheduler-group-flex-container-hierarchical",
+    "dx-scheduler-group-header",
+    "dx-scheduler-group-row",
+    "dx-scheduler-group-table",
+    "dx-scheduler-header",
+    "dx-scheduler-header-panel",
+    "dx-scheduler-header-panel-cell",
+    "dx-scheduler-header-panel-empty-cell",
+    "dx-scheduler-sidebar-scrollable",
+    "dx-scheduler-small",
+    "dx-scheduler-time-panel",
+    "dx-scheduler-time-panel-cell",
+    "dx-scheduler-timeline",
+    "dx-scheduler-timeline-day",
+    "dx-scheduler-timeline-month",
+    "dx-scheduler-timeline-week",
+    "dx-scheduler-timeline-work-week",
+    "dx-scheduler-work-space",
+    "dx-scheduler-work-space-all-day-collapsed",
+    "dx-scheduler-work-space-both-scrollbar",
+    "dx-scheduler-work-space-count",
+    "dx-scheduler-work-space-day",
+    "dx-scheduler-work-space-grouped",
+    "dx-scheduler-work-space-horizontal-grouped",
+    "dx-scheduler-work-space-month",
+    "dx-scheduler-work-space-vertical-grouped",
+    "dx-scheduler-work-space-week",
+    "dx-scheduler-work-space-work-week",
+    "dx-tooltip-appointment-item-content-date"
+  ],
+  "scroll-view": [
+    "dx-scrollable-native",
+    "dx-scrollview-pull-down",
+    "dx-scrollview-pull-down-image",
+    "dx-scrollview-pull-down-indicator",
+    "dx-scrollview-pull-down-text",
+    "dx-scrollview-scrollbottom",
+    "dx-scrollview-scrollbottom-indicator",
+    "dx-scrollview-scrollbottom-loading",
+    "dx-scrollview-scrollbottom-text"
+  ],
+  "scrollable": [
+    "dx-scrollable-native",
+    "dx-scrollable-scroll",
+    "dx-scrollable-scroll-content",
+    "dx-scrollable-scrollbars-alwaysvisible",
+    "dx-scrollbar-horizontal",
+    "dx-scrollbar-hoverable",
+    "dx-scrollbar-vertical"
+  ],
+  "slider": [
+    "dx-invalid",
+    "dx-slider-bar",
+    "dx-slider-handle",
+    "dx-slider-label-position-bottom",
+    "dx-slider-label-position-top",
+    "dx-slider-range",
+    "dx-slider-tooltip-position-bottom",
+    "dx-slider-tooltip-position-top",
+    "dx-slider-wrapper"
+  ],
+  "sortable": [
+    "dx-sortable-placeholder-inside",
+    "dx-sortable-source"
+  ],
+  "splitter": [
+    "dx-resize-handle"
+  ],
+  "stepper": [
+    "dx-step",
+    "dx-step-caption",
+    "dx-step-content",
+    "dx-step-indicator",
+    "dx-stepper-connector-container",
+    "dx-stepper-connector-horizontal",
+    "dx-stepper-connector-value",
+    "dx-stepper-connector-vertical",
+    "dx-stepper-horizontal",
+    "dx-stepper-vertical"
+  ],
+  "switch": [
+    "dx-switch-container",
+    "dx-switch-handle",
+    "dx-switch-off",
+    "dx-switch-on",
+    "dx-switch-on-value"
+  ],
+  "tab-panel": [
+    "dx-tabpanel-tabs-position-bottom",
+    "dx-tabpanel-tabs-position-left",
+    "dx-tabpanel-tabs-position-right",
+    "dx-tabpanel-tabs-position-top"
+  ],
+  "tabs": [
+    "dx-tab",
+    "dx-tabs-nav-button",
+    "dx-tabs-styling-mode-primary",
+    "dx-tabs-styling-mode-secondary",
+    "dx-tabs-vertical"
+  ],
+  "tag-box": [
+    "dx-tag",
+    "dx-tag-content",
+    "dx-tag-remove-button"
+  ],
+  "text-box": [
+    "dx-searchbar",
+    "dx-searchbox"
+  ],
+  "text-editor": [
+    "dx-clear-button-area",
+    "dx-daterangebox-separator",
+    "dx-editor-filled",
+    "dx-editor-outlined",
+    "dx-editor-underlined",
+    "dx-invalid",
+    "dx-numberbox-spin",
+    "dx-numberbox-spin-touch-friendly",
+    "dx-placeholder",
+    "dx-searchbox",
+    "dx-show-clear-button",
+    "dx-texteditor-input",
+    "dx-texteditor-label"
+  ],
+  "tile-view": [
+    "dx-tile",
+    "dx-tileview-wrapper"
+  ],
+  "time-view": [
+    "dx-timeview-clock",
+    "dx-timeview-field",
+    "dx-timeview-format12",
+    "dx-timeview-hourarrow",
+    "dx-timeview-minutearrow",
+    "dx-timeview-time-separator"
+  ],
+  "toast": [
+    "dx-toast-content",
+    "dx-toast-error",
+    "dx-toast-icon",
+    "dx-toast-info",
+    "dx-toast-success",
+    "dx-toast-warning"
+  ],
+  "toolbar": [
+    "dx-list-item-content",
+    "dx-toolbar-after",
+    "dx-toolbar-group",
+    "dx-toolbar-item",
+    "dx-toolbar-item-content",
+    "dx-toolbar-label",
+    "dx-toolbar-menu-section"
+  ],
+  "tree-list": [
+    "dx-gridbase-container",
+    "dx-treelist-container",
+    "dx-treelist-edit-popup",
+    "dx-treelist-form-buttons-container",
+    "dx-treelist-rowsview"
+  ],
+  "tree-view": [
+    "dx-treeview-border-visible",
+    "dx-treeview-expander-icon-stub",
+    "dx-treeview-item",
+    "dx-treeview-item-content",
+    "dx-treeview-item-with-checkbox",
+    "dx-treeview-item-without-checkbox",
+    "dx-treeview-node",
+    "dx-treeview-node-loadindicator",
+    "dx-treeview-search",
+    "dx-treeview-select-all-item",
+    "dx-treeview-toggle-item-visibility",
+    "dx-treeview-with-search"
+  ],
+  "validation": [
+    "dx-validationsummary-item",
+    "dx-validationsummary-item-content"
+  ],
+  "date-range-box": [
+    "dx-daterangebox-separator"
+  ]
+}
diff --git a/packages/devextreme-scss/tools/review/package-disabled.mjs b/packages/devextreme-scss/tools/review/package-disabled.mjs
new file mode 100644
index 000000000000..3331669ca99f
--- /dev/null
+++ b/packages/devextreme-scss/tools/review/package-disabled.mjs
@@ -0,0 +1,116 @@
+/* node tools/review/package-disabled.mjs [--json] - the token package's disabled roles against
+   what this theme emits. */
+import { readFileSync } from 'node:fs';
+import { createRequire } from 'node:module';
+import path from 'node:path';
+
+const require = createRequire(import.meta.url);
+const tokensDir = path.dirname(require.resolve('@devexpress/design-tokens-internal/package.json'));
+const bundle = path.resolve('../devextreme/artifacts/css/dx.fluent-next.blue.light.css');
+
+// Package component -> the class the theme puts its rules on. A component the theme spells
+// differently, or splits, is listed with every root it uses.
+const ROOTS = {
+  accordion: ['dx-accordion'],
+  'ai-chat': ['dx-chat', 'dx-ai-chat'],
+  badge: ['dx-badge'],
+  button: ['dx-button'],
+  calendar: ['dx-calendar'],
+  checkbox: ['dx-checkbox'],
+  'collapse-button': ['dx-button'],
+  'color-palette': ['dx-colorview', 'dx-colorbox'],
+  grid: ['dx-datagrid', 'dx-treelist', 'dx-cardview'],
+  link: ['dx-link'],
+  listbox: ['dx-list'],
+  menu: ['dx-menu'],
+  'menu-list': ['dx-context-menu', 'dx-menu'],
+  pagination: ['dx-pagination', 'dx-pager'],
+  'progress-bar': ['dx-progressbar'],
+  'radio-button': ['dx-radiobutton', 'dx-radiogroup'],
+  ribbon: ['dx-toolbar'],
+  splitter: ['dx-splitter'],
+  switch: ['dx-switch'],
+  tabs: ['dx-tab'],
+  tag: ['dx-tag'],
+  'text-content': ['dx-placeholder', 'dx-texteditor'],
+  'text-input': ['dx-texteditor'],
+  treeview: ['dx-treeview'],
+};
+
+const walk = (node, trail = []) => {
+  const out = [];
+  for (const [key, value] of Object.entries(node ?? {})) {
+    if (key.startsWith('$')) continue;
+    if (value && typeof value === 'object' && '$value' in value) out.push([[...trail, key].join('.'), value.$value]);
+    else if (value && typeof value === 'object') out.push(...walk(value, [...trail, key]));
+  }
+  return out;
+};
+
+const roleOf = (raw) => String(raw).replace(/[{}]/g, '').replace(/^color\./, '');
+
+const readRules = (css) => {
+  const rules = [];
+  const re = /([^{}]+)\{([^{}]*)\}/g;
+  let match;
+  while ((match = re.exec(css))) {
+    const selector = match[1].trim().replace(/\s+/g, ' ');
+    if (selector.startsWith('@')) continue;
+    rules.push({ selector, body: match[2] });
+  }
+  return rules;
+};
+
+const tokens = JSON.parse(readFileSync(path.join(tokensDir, 'tokens/components/core/theme/fluent.json'), 'utf8'));
+const css = readFileSync(bundle, 'utf8');
+const rules = readRules(css)
+  .filter(({ selector }) => /dx-state-disabled|dx-button-disable|dx-state-readonly/.test(selector));
+
+// The variable a declaration ends in, resolved to the package role it was fed from.
+const varRole = new Map();
+for (const [, , name, value] of css.matchAll(/(^|;|\{)\s*(--dx-[a-z0-9-]+)\s*:\s*([^;]+)/g)) {
+  const ref = /var\(\s*--dxds-color-([a-z0-9-]+)/.exec(value);
+  if (ref) varRole.set(name, ref[1]);
+}
+
+const report = [];
+for (const [component, entries] of Object.entries(tokens)) {
+  const declared = walk(entries).filter(([p]) => /disabled/i.test(p));
+  if (!declared.length) continue;
+
+  const roots = ROOTS[component] ?? [];
+  const ours = [];
+  for (const rule of rules) {
+    if (!roots.some((root) => rule.selector.includes(`.${root}`))) continue;
+    for (const [, , prop, value] of rule.body.matchAll(/(^|;)\s*([a-z-]+)\s*:\s*([^;]+)/g)) {
+      if (!/color|fill|stroke|opacity|shadow/.test(prop)) continue;
+      const name = /var\(\s*(--dx-[a-z0-9-]+)/.exec(value)?.[1];
+      ours.push({ prop, value: value.trim(), role: name ? varRole.get(name) ?? null : null });
+    }
+  }
+
+  report.push({
+    component,
+    package: declared.map(([p, v]) => ({ place: p, role: roleOf(v) })),
+    theme: ours,
+    verdict: ours.length === 0 ? 'MISSING - the theme paints nothing here' : 'present',
+  });
+}
+
+if (process.argv.includes('--json')) {
+  console.log(JSON.stringify(report, null, 2));
+} else {
+  const missing = report.filter((r) => r.verdict.startsWith('MISSING'));
+  console.log(`Components the package gives a disabled answer for: ${report.length}`);
+  console.log(`Painted nowhere by the theme: ${missing.length}${missing.length ? ` (${missing.map((r) => r.component).join(', ')})` : ''}\n`);
+  for (const row of report) {
+    const pkgRoles = [...new Set(row.package.map((p) => p.role))].sort();
+    const themeRoles = [...new Set(row.theme.map((t) => t.role).filter(Boolean))].sort();
+    const unmatched = pkgRoles.filter((r) => r !== 'none' && !themeRoles.includes(r));
+    console.log(`${row.component.padEnd(16)} ${row.verdict === 'present' ? '' : '** MISSING ** '}`);
+    console.log(`   package: ${pkgRoles.join(', ')}`);
+    console.log(`   theme:   ${themeRoles.join(', ') || '(no role-backed declaration)'}`);
+    if (unmatched.length) console.log(`   role not used by the theme: ${unmatched.join(', ')}`);
+    console.log();
+  }
+}
diff --git a/packages/devextreme-scss/tools/review/px-audit.mjs b/packages/devextreme-scss/tools/review/px-audit.mjs
new file mode 100644
index 000000000000..ff072514ee0b
--- /dev/null
+++ b/packages/devextreme-scss/tools/review/px-audit.mjs
@@ -0,0 +1,148 @@
+/*
+ * The fixed-px gate for fluent-next: a px literal carrying none of the markers listed in
+ * tools/review/size-markers.json does not pass.
+ *
+ *   node tools/review/px-audit.mjs                   # unmarked places; exits 1 when it finds any
+ *   node tools/review/px-audit.mjs --json            # the same, machine-readable (jest uses this)
+ *   node tools/review/px-audit.mjs --root=<dir>      # scan another tree; the test points this at a
+ *                                                    # fixture to prove the gate still bites
+ *
+ * An unmarked value never reaches SCALES.md, so design never sees it and no decision about it
+ * exists. The marker is the only channel to the scales card, not decoration.
+ *
+ * The shared layer scss/widgets/base/** is scanned by tests/base-size-markers.test.ts, which points
+ * --root at it and compares against a baseline: 444 places could not be classified in one commit,
+ * so there the count ratchets down instead of having to be zero. The ratchet has since reached
+ * zero, so in practice both roots now hold the same bar. The default run stays the theme.
+ *
+ * Deliberately out of scope: em/% values — those carry the dx-relative marker but have no gate of
+ * their own.
+ */
+
+import { readFileSync, readdirSync } from 'fs';
+import { join, dirname, relative } 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 vocabulary = JSON.parse(readFileSync(join(here, 'size-markers.json'), 'utf8'));
+export const MARKERS = vocabulary.categories.map((entry) => entry.marker).filter(Boolean);
+
+const PX_LITERAL = /-?\d*\.?\d+px\b/g;
+
+const scssFiles = (dir) => readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+  const full = join(dir, entry.name);
+  if (entry.isDirectory()) return scssFiles(full);
+  return entry.name.endsWith('.scss') ? [full] : [];
+});
+
+// Block comments are blanked, not removed: line numbers must survive, or the gate points at the
+// wrong line.
+const blankBlockComments = (content) => content
+  .replace(/\/\*[\s\S]*?\*\//g, (comment) => comment.replace(/[^\n]/g, ' '));
+
+/** Line -> { code, comment }: the marker is looked up in the comment, the literal in the code. */
+const split = (line) => {
+  const at = line.indexOf('//');
+  return at === -1 ? { code: line, comment: '' } : { code: line.slice(0, at), comment: line.slice(at) };
+};
+
+const ENDS_STATEMENT = /[;{}]$/;
+/*
+ * Tested against the code half of the line: a declaration that carries a trailing marker still
+ * ends its statement, and without stripping the comment the walk below sails past it and lets a
+ * later declaration inherit a marker that was never written for it.
+ */
+const endsStatement = (line) => ENDS_STATEMENT.test(split(line).code.trim());
+const nonBlankAbove = (lines, index) => {
+  for (let at = index - 1; at >= 0; at -= 1) if (lines[at].trim() !== '') return at;
+  return -1;
+};
+
+/*
+ * A marker is written next to the declaration it explains, but a px literal inside a multi-line
+ * declaration lands on a continuation line, where there is no comment to find — the two-layer
+ * box-shadow of cardView's dragged item and the clip-path of textEditor's label both carry a
+ * reviewed marker that the line-by-line lookup could not see. So for a continuation line the
+ * marker is inherited from the declaration: the trailing comments of its earlier lines plus the
+ * comment attached above its first line, block comments included (those are blanked in `code`,
+ * which is why the raw text is passed in separately).
+ *
+ * A line counts as a continuation only when the statement above it is unfinished, so a plain
+ * `min-height: 1px;` never inherits anything from its neighbours.
+ */
+const inheritedComment = (raw, index) => {
+  const above = nonBlankAbove(raw, index);
+  if (above === -1 || endsStatement(raw[above])) return '';
+
+  let start = index;
+  while (start > 0) {
+    const previous = nonBlankAbove(raw, start);
+    if (previous === -1 || endsStatement(raw[previous])) break;
+    start = previous;
+  }
+
+  // a comment line contributes its whole text (a block comment carries no `//` to split on);
+  // a code line contributes only its trailing comment, so a marker can never be read out of code
+  const isComment = (text) => text.startsWith('//') || text.startsWith('/*')
+    || text.startsWith('*') || text.endsWith('*/');
+  const parts = raw.slice(start, index)
+    .map((line) => (isComment(line.trim()) ? line : split(line).comment));
+  for (let at = start - 1; at >= 0; at -= 1) {
+    const text = raw[at].trim();
+    if (text === '' || !isComment(text)) break;
+    parts.push(text);
+    if (text.startsWith('/*')) break;
+  }
+  return parts.join('\n');
+};
+
+export const scanPxLiterals = (root = themeDir) => {
+  const marked = [];
+  const unmarked = [];
+  scssFiles(root).forEach((file) => {
+    const raw = readFileSync(file, 'utf8').split('\n');
+    blankBlockComments(raw.join('\n')).split('\n').forEach((line, index) => {
+      const { code, comment } = split(line);
+      const literals = code.match(PX_LITERAL);
+      if (!literals) return;
+      const scope = comment || inheritedComment(raw, index);
+      const marker = MARKERS.find((entry) => scope.includes(entry)) ?? null;
+      const place = {
+        file: relative(packageRoot, file),
+        line: index + 1,
+        literals: [...new Set(literals)],
+        // distinct values drive the report; the raw count is what an inventory of the layer adds up
+        occurrences: literals.length,
+        marker,
+        text: line.trim(),
+      };
+      (marker ? marked : unmarked).push(place);
+    });
+  });
+  return { marked, unmarked };
+};
+
+if (process.argv[1] === fileURLToPath(import.meta.url)) {
+  const rootArgument = process.argv.find((argument) => argument.startsWith('--root='));
+  const { marked, unmarked } = scanPxLiterals(rootArgument ? rootArgument.slice('--root='.length) : undefined);
+
+  if (process.argv.includes('--json')) {
+    process.stdout.write(`${JSON.stringify({ marked: marked.length, unmarked }, null, 2)}\n`);
+  } else {
+    const byMarker = MARKERS
+      .map((marker) => `${marker} ${marked.filter((place) => place.marker === marker).length}`)
+      .join(', ');
+    process.stdout.write(`px literals in the theme: ${marked.length + unmarked.length} — ${byMarker}\n`);
+    unmarked.forEach((place) => process.stdout.write(`UNMARKED ${place.file}:${place.line}  ${place.text}\n`));
+    if (unmarked.length) {
+      process.stdout.write(`\n${unmarked.length} place(s) with no marker. Append `
+        + '`// <marker>: what the value is` to the line, picking a marker from tools/review/size-markers.json:\n'
+        + `${vocabulary.categories.filter((entry) => entry.marker)
+          .map((entry) => `  ${entry.marker.padEnd(20)}${entry.title} — ${entry.question}`).join('\n')}\n`);
+    }
+  }
+  process.exit(unmarked.length ? 1 : 0);
+}
diff --git a/packages/devextreme-scss/tools/review/reachability.mjs b/packages/devextreme-scss/tools/review/reachability.mjs
new file mode 100644
index 000000000000..aca7535c3ac0
--- /dev/null
+++ b/packages/devextreme-scss/tools/review/reachability.mjs
@@ -0,0 +1,358 @@
+/*
+ * Reachability of the --dx-* component tier, measured on the BUILT fluent-next bundle.
+ *
+ * Two questions, each with its own strictness:
+ *
+ *   1) GATE (fails): a cross-scope duplicate. The same selector and property are declared more than
+ *      once and the copies read variables of DIFFERENT components. The last copy wins; inside the
+ *      other widget its variable is empty, the whole declaration is invalid and the property simply
+ *      disappears. In the legacy themes such duplicates are harmless (the literals match), the tier
+ *      splits them across roots. Found by the screenshots of PR #34774: base/dataGrid and
+ *      base/treeList draw the same UNSCOPED
+ *      `.dx-command-ai-header-button .dx-button.dx-state-focused`, and the focus ring of the AI
+ *      column button vanished in DataGrid. The cure is a shared gridBase name ($grid-outline-focused).
+ *
+ *   2) REPORT (never fails): reads outside the root. A rule reads var(--dx-<component>-…), but its
+ *      selector text contains no root of that component. Most such places are harmless — the element
+ *      IS nested in the root (`.dx-editor-cell` inside the grid) and the selector text just does not
+ *      say so. The dangerous ones are portals: elements JS creates outside the root (the dragged
+ *      column preview, the sortable clone, a popup wrapper). The two cannot be told apart statically
+ *      — that is knowledge about the DOM — so the verdict comes from the runtime audit
+ *      playground/tier-reachability-audit.html, and this list is the material for its gallery: every
+ *      new name here must be either proven nested or added as a root to registries.rootSelectors.
+ *
+ *   3) GATE (fails): a name declared and never read. Questions 1 and 2 both ask "the read happens,
+ *      does it land" — neither notices a name nothing reads at all. Such a name is still API: it
+ *      ships in the bundle, a user sets it and nothing moves. Before publication that is free to
+ *      fix, after publication the name cannot be withdrawn, which is why this one is pinned rather
+ *      than reported. _public.scss is generated from the Sass declarations regardless of whether
+ *      the resulting property is consumed, so build-time helpers leak out as dead API:
+ *      $tree-view-checkbox-offset only composes $tree-view-select-all-item-padding and is folded
+ *      away at build time, $scheduler-left-column-width has to stay a number because the base layer
+ *      multiplies it. Liveness is transitive — a name read only by another dead name is dead too —
+ *      so it is computed as a fixpoint from the reads in ordinary properties.
+ *
+ * Known gap, deliberately not gated here: a name that IS read, by a declaration that never wins.
+ * --dx-time-view-field-number-box-spin-touch-friendly-width is overwritten by the next declaration
+ * of the same property in the same rule; --dx-scheduler-timeline-date-table-cell-height loses
+ * `height` to a three-class selector. Deciding that needs the cascade, not the text, and a wrong
+ * verdict would be worse than none.
+ *
+ * Run: node tools/review/reachability.mjs [--report] [--update-scopes] [--update-unread]
+ * With no built bundle it exits quietly with zero (the gate cannot judge what does not exist).
+ */
+
+import { readFileSync, writeFileSync, statSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { createRequire } from 'module';
+
+const here = dirname(fileURLToPath(import.meta.url));
+const require = createRequire(import.meta.url);
+const postcss = require('postcss');
+const packageRoot = join(here, '..', '..');
+const bundlePath = join(packageRoot, '..', 'devextreme', 'artifacts', 'css', 'dx.fluent-next.blue.light.css');
+
+try {
+  statSync(bundlePath);
+} catch {
+  process.stderr.write('note: the fluent-next bundle is not built — the reachability check is skipped\n');
+  process.exit(0);
+}
+
+const registries = JSON.parse(readFileSync(join(packageRoot, 'tools', 'naming', 'registries.json'), 'utf8'));
+const css = readFileSync(bundlePath, 'utf8');
+const root = postcss.parse(css);
+
+const TIER_READ = /var\(\s*(--dx-[a-z0-9-]+)/g;
+const isTierName = (name) => name.startsWith('--dx-') && !name.startsWith('--dxds-');
+const readsOf = (value) => [...new Set([...value.matchAll(TIER_READ)].map(([, name]) => name))].filter(isTierName);
+
+/* where each tier name is declared */
+const declaredAt = new Map();
+root.walkDecls((decl) => {
+  if (!isTierName(decl.prop)) return;
+  const known = declaredAt.get(decl.prop) ?? new Set();
+  (decl.parent.selectors ?? []).forEach((sel) => known.add(sel.trim()));
+  declaredAt.set(decl.prop, known);
+});
+
+/* --- 0. gate: read and never declared ---------------------------------------------------------
+ * A var(--dx-…) whose name nothing declares. The value never arrives, the declaration is invalid
+ * and simply disappears, and what the user sees is a plausible-looking default - a black glyph, a
+ * missing background - so it reads as a design choice rather than a break.
+ *
+ * Every other pass here silently skipped the class: each of them filters reads down to names that
+ * ARE declared somewhere, because that is how it knows which scope to compare against. A name
+ * declared nowhere has no scope, fell out of the filter, and was never looked at again.
+ *
+ * Allowed only for a name some other layer sets at runtime: the CardView writes its card metrics
+ * onto the element from JS, the scheduler animates the appointment form the same way, and the
+ * accent hook is documented for the user to set. Those are pinned by name, so a sixth one cannot
+ * join them by accident.
+ */
+const SET_ELSEWHERE = new Set([
+  // packages/devextreme/js/__internal/grids/new/card_view/content_view/content/content.tsx
+  '--dx-cardview-card-max-width',
+  '--dx-cardview-card-min-width',
+  '--dx-cardview-card-cover-ratio',
+  '--dx-cardview-cardsperrow',
+  // packages/devextreme/js/__internal/scheduler/appointment_popup/form.ts
+  '--dx-scheduler-animation-top',
+  // the custom-accent hook: undefined until the user sets it, and every read carries a fallback
+  '--dx-accent-color',
+]);
+const undeclared = new Map();
+root.walkRules((rule) => {
+  if (!rule.selectors) return;
+  rule.walkDecls((decl) => {
+    for (const name of readsOf(decl.value)) {
+      if (declaredAt.has(name) || SET_ELSEWHERE.has(name)) continue;
+      if (!undeclared.has(name)) undeclared.set(name, new Set());
+      rule.selectors.forEach((sel) => undeclared.get(name).add(sel.trim()));
+    }
+  });
+});
+undeclared.forEach((where, name) => {
+  process.stdout.write(`\u2718 read and never declared: ${name}\n`);
+  process.stdout.write(`     read at ${[...where].sort().slice(0, 3).join(', ')}\n`);
+  process.stdout.write('     cure: publish the name on the scope that reads it, or read the name that scope does have.\n');
+  process.stdout.write('     If another layer sets it at runtime, add it to SET_ELSEWHERE with the file that does.\n');
+});
+
+/* --- 1. gate: cross-scope duplicate ---------------------------------------------------------- */
+const copies = new Map();
+root.walkRules((rule) => {
+  if (!rule.selectors) return;
+  rule.walkDecls((decl) => {
+    const reads = readsOf(decl.value).filter((name) => declaredAt.has(name));
+    if (!reads.length) return;
+    rule.selectors.forEach((sel) => {
+      const key = `${sel.trim()}§${decl.prop}`;
+      const scope = [...new Set(reads.flatMap((name) => [...declaredAt.get(name)]))].sort().join(',');
+      copies.set(key, [...(copies.get(key) ?? []), { reads, scope }]);
+    });
+  });
+});
+
+const crossScope = [...copies.entries()]
+  .filter(([, list]) => list.length > 1 && new Set(list.map((c) => c.scope)).size > 1);
+
+/* --- 2. report: reads outside the root ------------------------------------------------------- */
+const classesOf = (selector) => new Set([...selector.matchAll(/\.(-?[_a-zA-Z][\w-]*)/g)].map(([, cls]) => cls));
+const coveredBy = (selector, declRoots) => {
+  const classes = classesOf(selector);
+  return [...declRoots].some((declRoot) => declRoot.split(/[\s>+~]+/)
+    .every((part) => part === ':root' || [...classesOf(part)].every((cls) => classes.has(cls))));
+};
+
+const orphans = new Map();
+root.walkRules((rule) => {
+  if (!rule.selectors) return;
+  readsOf(rule.toString()).forEach((name) => {
+    const declRoots = declaredAt.get(name);
+    if (!declRoots) return;
+    rule.selectors.forEach((sel) => {
+      if (coveredBy(sel.trim(), declRoots)) return;
+      orphans.set(`${name}  @  ${sel.trim()}`, true);
+    });
+  });
+});
+
+if (process.argv.includes('--report')) {
+  [...orphans.keys()].sort().forEach((line) => process.stdout.write(`  ${line}\n`));
+}
+
+/* --- 3. gate: a scope outside the root must be a REVIEWED one --------------------------------
+ * What it catches: a rule paints an element the component's root does not reach. "Nested or not"
+ * cannot be decided statically — that is knowledge about the DOM — so the decision is made once and
+ * recorded here, and the gate makes sure NEW such places cannot appear silently.
+ *
+ * That is how 208 screenshots moved in CI: a grid's pager carries dx-pager (never dx-pagination),
+ * cardView's column chooser and the htmlEditor/fileManager dialogs are popups, and the clone of a
+ * dragged pivotGrid field is created in the viewport. Every such place is either a new root in
+ * registries.rootSelectors, or a line here backed by the runtime audit
+ * (playground/tier-reachability-audit.html).
+ *
+ * The key is the component plus the first class of the selector, skipping cross-cutting modifiers
+ * (dx-rtl, dx-state-*, ...): that class is the one answering "which element is this".
+ */
+const GENERIC = /^dx-(rtl|state-|theme-|device-|color-scheme-|widget$|swatch)/;
+const scopesPath = join(here, 'nested-scopes.json');
+const componentOf = (name) => {
+  const bare = name.slice('--dx-'.length);
+  return Object.keys(registries.rootSelectors)
+    .filter((component) => bare === component || bare.startsWith(`${component}-`))
+    .sort((a, b) => b.length - a.length)[0] ?? null;
+};
+const scopeKeyOf = (selector) => {
+  for (const compound of selector.split(/[\s>+~]+/)) {
+    const cls = [...classesOf(compound)].find((one) => !GENERIC.test(one));
+    if (cls) return cls;
+  }
+  return null;
+};
+
+const seenScopes = new Map();
+[...orphans.keys()].forEach((line) => {
+  const [name, selector] = line.split('  @  ');
+  const component = componentOf(name);
+  const scope = scopeKeyOf(selector);
+  if (!component || !scope) return;
+  const key = `${component} :: ${scope}`;
+  if (!seenScopes.has(key)) seenScopes.set(key, `${name}  @  ${selector}`);
+});
+
+/*
+ * A scope that names another widget's overlay (the toolbar's dx-dropdownmenu-popup, a popover or
+ * tooltip wrapper) is a portal by construction: JS mounts it in the overlay container, under no root
+ * of THIS component, so the tier never reaches it and "reviewed" cannot be true. The branch has to
+ * read the Sass twin (or a :root role) instead - that is how the diagram's overflow menu lost its
+ * icon margins for a month while the whitelist kept the gate quiet.
+ */
+const SHARED_OVERLAY = /-(popup|popup-wrapper|overlay|overlay-wrapper|overlay-content|popover|popover-wrapper|tooltip|tooltip-wrapper)$/;
+const ownClassOf = (component, scope) => {
+  const own = [
+    `dx-${component.replace(/-/g, '')}`,
+    ...(registries.rootSelectors[component] ?? []).flatMap((sel) => [...classesOf(sel)]),
+  ];
+  return own.some((cls) => scope === cls || scope.startsWith(`${cls}-`));
+};
+const isForeignPortal = (component, scope) => SHARED_OVERLAY.test(scope) && !ownClassOf(component, scope);
+
+const reviewed = JSON.parse(readFileSync(scopesPath, 'utf8'));
+const listedPortals = Object.entries(reviewed)
+  .flatMap(([component, scopes]) => scopes.filter((scope) => isForeignPortal(component, scope))
+    .map((scope) => `${component} :: ${scope}`));
+if (process.argv.includes('--update-scopes')) {
+  const next = {};
+  [...seenScopes.keys()].sort().forEach((key) => {
+    const [component, scope] = key.split(' :: ');
+    if (isForeignPortal(component, scope)) return;
+    next[component] = [...(next[component] ?? []), scope];
+  });
+  writeFileSync(scopesPath, `${JSON.stringify(next, null, 2)}\n`);
+  process.stdout.write(`nested-scopes.json rewritten: ${seenScopes.size} scope(s)\n`);
+}
+
+const unreviewed = [...seenScopes.entries()]
+  .filter(([key]) => {
+    const [component, scope] = key.split(' :: ');
+    return !(reviewed[component] ?? []).includes(scope) || isForeignPortal(component, scope);
+  });
+
+const portals = [...new Set([
+  ...listedPortals,
+  ...[...seenScopes.keys()].filter((key) => isForeignPortal(...key.split(' :: '))),
+])];
+portals.forEach((key) => {
+  const [component, scope] = key.split(' :: ');
+  process.stdout.write(`✘ portal: .${scope} is another widget's overlay and cannot be a nested scope of ${component}\n`);
+  process.stdout.write('     cure: read the Sass twin (or a :root role) in that branch, or mount the overlay inside the root;\n');
+  process.stdout.write(`     "${scope}" must not be listed in nested-scopes.json["${component}"]\n`);
+});
+
+unreviewed.forEach(([key, example]) => {
+  const [component, scope] = key.split(' :: ');
+  process.stdout.write(`✘ scope outside the roots of ${component}: .${scope}\n`);
+  process.stdout.write(`     example: ${example}\n`);
+  process.stdout.write('     cure: either add the root to OVERRIDES.rootSelectors (derive-registries.mjs),\n');
+  process.stdout.write(`     or, having proven nesting with the runtime audit, add "${scope}" to nested-scopes.json["${component}"]\n`);
+});
+
+/* --- 4. gate: declared and never read --------------------------------------------------------
+ * Liveness spreads backwards from the ordinary properties: a tier name is live when a normal
+ * declaration reads it, when a style query asks about it, or when a live tier name reads it.
+ * Everything the fixpoint does not reach is declared for nobody. The known list is pinned in
+ * unread-tier.json by exact set equality, the way the calc budget and the naming baseline are
+ * pinned: a name that becomes live is banked by regenerating, a name that goes dead is a review,
+ * not a rerun. Bank a drop with:
+ *
+ *   node tools/review/reachability.mjs --update-unread
+ */
+const declaredValues = new Map();
+root.walkDecls((decl) => {
+  if (!isTierName(decl.prop)) return;
+  declaredValues.set(decl.prop, [...(declaredValues.get(decl.prop) ?? []), decl.value]);
+});
+
+/*
+ * A style query reads the name without a var(): `@container style(--dx-theme-mode: dark)` is what
+ * resolves an inverted scope against its NEAREST ancestor, and core/utils/theme_mode.ts asks the
+ * browser for the same property. Counting only var() would call the name that carries the whole
+ * mode mechanism dead API and ask for it to be withdrawn.
+ */
+const STYLE_QUERY_READ = /style\(\s*(--dx-[a-z0-9-]+)/g;
+
+const live = new Set();
+const frontier = [];
+const wake = (name) => {
+  if (live.has(name)) return;
+  live.add(name);
+  frontier.push(name);
+};
+root.walkDecls((decl) => {
+  if (isTierName(decl.prop)) return;
+  readsOf(decl.value).forEach(wake);
+});
+root.walkAtRules('container', (rule) => {
+  [...rule.params.matchAll(STYLE_QUERY_READ)].map(([, name]) => name).filter(isTierName).forEach(wake);
+});
+while (frontier.length) {
+  (declaredValues.get(frontier.pop()) ?? []).forEach((value) => readsOf(value).forEach(wake));
+}
+
+const unread = [...declaredAt.keys()].filter((name) => !live.has(name)).sort();
+const unreadPath = join(here, 'unread-tier.json');
+/*
+ * The pin is a committed file, not something the tool can rebuild on the fly: without it there is
+ * nothing to compare against, and passing would mean the gate quietly stopped working. So fail —
+ * but say what is wrong, rather than throwing ENOENT from readFileSync. This happened on CI once:
+ * reachability.mjs was committed and its pin was left untracked.
+ */
+let pinned;
+try {
+  pinned = JSON.parse(readFileSync(unreadPath, 'utf8'));
+} catch (error) {
+  process.stdout.write(`✘ the unread-name pin is missing or unreadable: ${unreadPath}\n`);
+  process.stdout.write(`     ${error.message}\n`);
+  process.stdout.write('     cure: the file is committed alongside this tool — check it is not left untracked.\n');
+  process.stdout.write('     To create it from scratch: write {"names": []} there and run --update-unread.\n');
+  process.exit(1);
+}
+
+if (process.argv.includes('--update-unread')) {
+  writeFileSync(unreadPath, `${JSON.stringify({ ...pinned, names: unread }, null, 2)}\n`);
+  process.stdout.write(`unread-tier.json rewritten: ${unread.length} name(s)\n`);
+}
+
+const appeared = unread.filter((name) => !pinned.names.includes(name));
+const revived = pinned.names.filter((name) => !unread.includes(name));
+
+appeared.forEach((name) => {
+  process.stdout.write(`✘ declared and never read: ${name}\n`);
+  process.stdout.write(`     declared on ${[...declaredAt.get(name)].sort().join(', ')}\n`);
+  process.stdout.write('     cure: read it where it belongs, or stop publishing it — a name that moves nothing\n');
+  process.stdout.write('     is still API once the theme ships, and then it cannot be withdrawn\n');
+});
+
+if (revived.length) {
+  process.stdout.write(`✘ ${revived.length} pinned name(s) are read now: ${revived.join(', ')}\n`);
+  process.stdout.write('     cure: bank the drop — node tools/review/reachability.mjs --update-unread\n');
+}
+
+crossScope.forEach(([key, list]) => {
+  const [sel, prop] = key.split('§');
+  process.stdout.write(`✘ cross-scope duplicate: ${prop}  @  ${sel}\n`);
+  list.forEach((copy, index) => {
+    process.stdout.write(`     copy ${index + 1}: ${copy.reads.join(' ')} → declared on ${copy.scope.replace(/,/g, ', ')}\n`);
+  });
+  process.stdout.write('     cure: the value must resolve under any of these roots — take a shared-layer name (gridBase/menuBase), not the name of a single widget\n');
+});
+
+process.stdout.write(`${orphans.size} read(s) outside the root text in ${seenScopes.size} scope(s) `
+  + `(${unreviewed.length} unreviewed), ${crossScope.length} cross-scope duplicate(s), `
+  + `${unread.length} name(s) declared and never read (${appeared.length} new), `
+  + `${undeclared.size} read and never declared\n`);
+process.exit(crossScope.length || unreviewed.length || portals.length
+  || appeared.length || revived.length || undeclared.size ? 1 : 0);
diff --git a/packages/devextreme-scss/tools/review/roles.mjs b/packages/devextreme-scss/tools/review/roles.mjs
new file mode 100644
index 000000000000..2624c62db947
--- /dev/null
+++ b/packages/devextreme-scss/tools/review/roles.mjs
@@ -0,0 +1,1331 @@
+/*
+ * The roles report: which semantic role every colour slot of the theme reads, and what the token
+ * package's component tier says the same slot should read.
+ *
+ *   node tools/review/roles.mjs           # → scss/widgets/fluent-next/ROLES.md
+ *   node tools/review/roles.mjs --md      # markdown to stdout
+ *   node tools/review/roles.mjs --json    # machine-readable, for the gate
+ *
+ * Nothing else checks the CHOICE of role. The naming enforcer checks the name, the resolve diff
+ * checks that a value did not move, the reachability audit checks delivery, the screenshots check
+ * the cascade. A role that is wrong but plausible passes all five and surfaces only when the
+ * palette is re-anchored or in dark mode, where two roles that share a primitive in light diverge.
+ *
+ * Two independent signals, because neither alone is enough:
+ *
+ *   1. family  — a `-bg` slot must read a color-bg-* role, `-content` a color-content-* one, and so
+ *                on. Needs no package. This is the class that produced the danger/success/warning
+ *                fix and the gallery nav-disc defect (bg-disabled on a content slot: white on white).
+ *   2. package — `@devexpress/design-tokens-internal/tokens/components/{core,vnext,blazor,wpf}` IS
+ *                the role assignment design made, for four products. The theme does not consume it
+ *                (decision 06.08.2026), and that is exactly why it reads as a reference. Remeasured
+ *                on 262.23.0: of the colour leaves, 712/720 in core and 741/749 in vnext are plain
+ *                `{color.<role>}` references, and not one leaf in core, vnext or wpf points at a
+ *                palette primitive. The rest are references to other scales - focus, box-shadow,
+ *                opacity - plus a single literal in the whole package (`#0f6cbd00`, the transparent
+ *                edge of the progress bar's indeterminate gradient). So the tier carries the mapping
+ *                and no value of its own.
+ *
+ *                And the mapping is not fluent's: `theme/material.json` assigns the SAME role to
+ *                the same path for 724 of its 726 leaves in core, and 753 of 755 in vnext. The two
+ *                that differ are ai-chat.loading-text, where material holds a #ffffff literal where
+ *                fluent holds a role. So what the package names is component anatomy rather than a
+ *                palette artefact, and reading the fluent file is reading the design system itself.
+ *
+ * The package comparison is deliberately slot-level, not path-level. Our anatomy and the package's
+ * do not line up segment by segment - 86 folders against 44 components, different sub-element trees
+ * - and a table that pretended they did would be wrong more often than the roles it checks. So for
+ * each component we cross-tabulate role -> slots as the package uses them, and ask one question:
+ * is our role one the package uses in our slot? A "no" is a question, not a verdict; the report
+ * names the slots the package does use it for, which is usually the answer.
+ */
+
+import { readFileSync, writeFileSync, readdirSync, statSync, existsSync } from 'fs';
+import { join, dirname, relative } from 'path';
+import { fileURLToPath } from 'url';
+import { createRequire } from 'module';
+
+const here = dirname(fileURLToPath(import.meta.url));
+const packageRoot = join(here, '..', '..');
+// --theme= lets the gate run the same code over a synthetic tree, so a green gate means "nothing
+// to find" rather than "the scan matched nothing".
+const themeArg = process.argv.find((a) => a.startsWith('--theme='));
+const themeDir = themeArg ? themeArg.slice('--theme='.length) : join(packageRoot, 'scss', 'widgets', 'fluent-next');
+const registries = JSON.parse(readFileSync(join(packageRoot, 'tools', 'naming', 'registries.json'), 'utf8'));
+
+const require = createRequire(import.meta.url);
+const tokensRoot = dirname(require.resolve('@devexpress/design-tokens-internal/package.json'));
+const tokensVersion = JSON.parse(readFileSync(join(tokensRoot, 'package.json'), 'utf8')).version;
+
+const SETS = ['core', 'vnext', 'blazor', 'wpf'];
+const MODES = ['light', 'dark'];
+
+const leavesOf = (node, trail = []) => Object.entries(node ?? {}).flatMap(([key, value]) => {
+  if (key.startsWith('$') || !value || typeof value !== 'object') return [];
+  if ('$value' in value) return [[[...trail, key].join('.'), value.$value]];
+  return leavesOf(value, [...trail, key]);
+});
+
+/*
+ * Theme folder -> the package components that describe the same thing, most authoritative first.
+ * A judgment call per line, so the list is explicit rather than derived: `chat` is the package's
+ * `ai-chat`, all three grids are its single `grid`, and our chassis folders (textEditor, gridBase)
+ * map to the component the package models, not to a widget name. A folder that is absent here has
+ * no counterpart worth comparing - the report says so instead of guessing.
+ *
+ * Six were added 09.09 after asking whether the gap was real or just my spelling: cardView is the
+ * package's `grid`, the way tools/review/package-disabled.mjs has always mapped it; a speed-dial
+ * action is a button; a lookup is a listbox; an action sheet is a popup. Name similarity was doing
+ * the matching before, and it does not survive contact with another product's vocabulary.
+ */
+const COMPONENT = {
+  accordion: ['accordion'],
+  actionSheet: ['popup', 'menu-list'],
+  buttonGroup: ['button-group', 'button'],
+  cardView: ['grid', 'container-card'],
+  lookup: ['listbox', 'text-input'],
+  speedDialAction: ['button'],
+  validation: ['field', 'message-bar'],
+  badge: ['badge'],
+  button: ['button', 'custom-button'],
+  calendar: ['calendar'],
+  card: ['container-card', 'popover-card'],
+  chat: ['ai-chat'],
+  checkBox: ['checkbox'],
+  colorBox: ['color-palette'],
+  colorView: ['color-palette'],
+  common: ['focus-rect', 'backdrop', 'separator', 'skeleton', 'empty-item'],
+  contextMenu: ['menu-list'],
+  dataGrid: ['grid'],
+  dateRangeBox: ['text-input', 'button-edit'],
+  dateBox: ['text-input', 'button-edit'],
+  drawer: ['drawer'],
+  dropDownEditor: ['text-input', 'button-edit'],
+  dropDownButton: ['split-button'],
+  fileUploader: ['listbox', 'progress-bar'],
+  fieldset: ['field'],
+  form: ['form'],
+  gallery: ['gallery'],
+  gantt: ['grid'],
+  gridBase: ['grid'],
+  informer: ['message-bar'],
+  list: ['listbox'],
+  loadIndicator: ['spinner', 'loading-indicator', 'waitIndicator'],
+  loadPanel: ['loading-panel'],
+  menu: ['menu'],
+  menuBase: ['menu', 'menu-list'],
+  numberBox: ['text-input'],
+  pagination: ['pagination', 'pager'],
+  pivotGrid: ['grid'],
+  popover: ['popover', 'popover-card', 'popover-arrow'],
+  popup: ['popup', 'message-box'],
+  progressBar: ['progress-bar'],
+  radioButton: ['radio-button', 'radio'],
+  radioGroup: ['radio-button', 'radio'],
+  scrollable: ['scroll-bar'],
+  slider: ['progress-bar', 'scroll-bar'],
+  scrollView: ['scroll-view', 'scroll-bar'],
+  selectBox: ['text-input'],
+  splitter: ['splitter'],
+  splitterBar: ['splitter'],
+  switch: ['switch', 'switcher', 'toggle-switch'],
+  tabPanel: ['tabs', 'tab-control'],
+  tabs: ['tabs', 'tab-control'],
+  tagBox: ['tagbox', 'tag'],
+  tileView: ['listbox'],
+  textArea: ['text-area', 'memo'],
+  textBox: ['text-input', 'text-edit'],
+  textEditor: ['text-input', 'text-edit'],
+  toast: ['toast'],
+  toolbar: ['toolbar', 'ribbon', 'bars'],
+  tooltip: ['tooltip'],
+  treeList: ['grid'],
+  treeView: ['treeview', 'tree-view'],
+  typography: ['text-content', 'button-text'],
+};
+
+// slot -> the --dxds- colour family it has to read. null = the slot is genuinely two-sided (a thumb
+// can be filled or outlined), so the family signal says nothing and only the package can answer.
+/*
+ * Cross-cutting nodes: the package models a separator, a focus rect, a backdrop and a skeleton as
+ * components of their own, the way our system tier publishes them on :root rather than inside a
+ * widget. Every component is compared against these too, after its own, so `$menu-separator-bg`
+ * finds `separator.color` instead of reading as a menu background that borrowed a border role.
+ */
+/* A package component whose name IS the slot but is not spelled the way our grammar spells it.
+ * Until 09.09 the package's whole `focus-rect` component - four roles for the focus indicator -
+ * never entered the comparison, because neither `focus-rect.color.default` nor the name
+ * `focus-rect` matches any of our parts, so it was dropped as an unknown slot. */
+const COMPONENT_AS_SLOT = { 'focus-rect': 'outline', skeleton: 'bg', 'empty-item': 'content' };
+
+const SHARED = ['separator', 'focus-rect', 'backdrop', 'skeleton', 'empty-item', 'text-content', 'link'];
+
+const FAMILY = {
+  backdrop: 'bg', bg: 'bg', highlight: 'bg', scrim: 'bg', veil: 'bg',
+  caption: 'content', chevron: 'content', content: 'content', 'end-icon': 'content',
+  icon: 'content', placeholder: 'content', shortcut: 'content', 'start-icon': 'content',
+  subtitle: 'content', text: 'content', title: 'content',
+  border: 'border', line: 'border', outline: 'border', separator: 'border',
+  shadow: 'shadow', 'shadow-ambient': 'shadow', 'shadow-key': 'shadow',
+  grip: null, indicator: null, opacity: null, selector: null, thumb: null, track: null, trigger: null,
+};
+
+/*
+ * Slot kinship. The package splits what we deliberately keep together: `content` is our umbrella
+ * slot and `text` is reserved for elements that tokenise text and icon separately (NAMING.md), so
+ * the package painting our `content` as `text` is the documented naming divergence, not a finding.
+ * Comparison therefore runs twice - exact slot first, then kin - and only a role that crosses a
+ * family boundary is reported. `ambiguous` matches anything: a thumb or a track is legitimately
+ * either filled or outlined, so its family carries no claim.
+ */
+const KIN = {
+  bg: 'bg', backdrop: 'bg', scrim: 'bg', veil: 'bg', highlight: 'bg',
+  content: 'content', text: 'content', icon: 'content', 'start-icon': 'content',
+  'end-icon': 'content', title: 'content', subtitle: 'content', caption: 'content',
+  placeholder: 'content', chevron: 'content', shortcut: 'content', trigger: 'content',
+  border: 'border', outline: 'border', separator: 'border', line: 'border',
+  shadow: 'shadow', 'shadow-ambient': 'shadow', 'shadow-key': 'shadow',
+  grip: 'ambiguous', indicator: 'ambiguous', opacity: 'ambiguous',
+  selector: 'ambiguous', thumb: 'ambiguous', track: 'ambiguous',
+};
+const kinOf = (slot) => KIN[slot] ?? 'ambiguous';
+const kindred = (a, b) => a === b || kinOf(a) === 'ambiguous' || kinOf(b) === 'ambiguous'
+  || kinOf(a) === kinOf(b);
+
+const PARTS = [...registries.parts].sort((a, b) => b.length - a.length);
+const STATES = [...registries.states].sort((a, b) => b.length - a.length);
+// `rest` is absence of a suffix in the theme and an explicit segment in the package; `disable` is a
+// vendor typo that ships in switch.color.checked.bg.disable.
+const PACKAGE_STATES = new Set([...registries.states, 'rest', 'disable']);
+
+const familyOf = (role) => {
+  if (/^(box-shadow|color-shadow)-/.test(role)) return 'shadow';
+  if (role === 'color-none' || role === 'none') return 'none';
+  return /^color-(bg|content|border)\b/.exec(role)?.[1] ?? 'other';
+};
+
+const trailing = (name, vocabulary) => {
+  for (const word of vocabulary) if (name === word || name.endsWith(`-${word}`)) return word;
+  return null;
+};
+
+/*
+ * Resolved values, per mode, read from the package rather than from a built bundle: the report has
+ * to answer "would this swap move a pixel" without waiting for a theme build, and the answer lives
+ * in the tokens. A swap that resolves identically in BOTH modes is free - a declaration fix with no
+ * etalon to re-shoot. One that moves only in dark is the case this whole report exists for: every
+ * screenshot etalon is .light, so nothing in CI can see it.
+ */
+const valueIndex = {};
+for (const mode of MODES) {
+  const map = new Map();
+  const collect = (dir) => {
+    for (const entry of readdirSync(dir)) {
+      const absolute = join(dir, entry);
+      if (statSync(absolute).isDirectory()) { collect(absolute); continue; }
+      if (!entry.endsWith('.json')) continue;
+      if (/material/.test(absolute)) continue;
+      // the mode files sit at semantic/colors/<theme>/<mode>.json - keep only this mode's
+      if (/[\\/]colors[\\/]/.test(absolute) && /^(light|dark)\.json$/.test(entry) && entry !== `${mode}.json`) continue;
+      for (const [name, value] of leavesOf(JSON.parse(readFileSync(absolute, 'utf8')))) {
+        if (!map.has(name)) map.set(name, value);
+      }
+    }
+  };
+  for (const sub of ['base', 'global', 'semantic']) collect(join(tokensRoot, 'tokens', sub));
+  valueIndex[mode] = map;
+}
+const resolveRole = (role, mode, depth = 0) => {
+  const key = role.replace(/^color-/, 'color.');
+  const raw = valueIndex[mode].get(key) ?? valueIndex[mode].get(role);
+  if (raw === undefined) return null;
+  if (typeof raw !== 'string' || !raw.startsWith('{') || depth > 12) return String(raw).toLowerCase();
+  /* The alpha roles are written as a reference with a hex alpha glued on - "{neutral.270}0A".
+   * Resolving the reference alone loses the transparency and resolving the whole string finds
+   * nothing, which is why these came back null and every alpha role looked absent. */
+  const alpha = /^\{([^}]+)\}([0-9a-f]{2})$/i.exec(raw);
+  if (alpha) {
+    const base = resolveRole(alpha[1], mode, depth + 1);
+    return base && /^#[0-9a-f]{6}$/i.test(base) ? `${base}${alpha[2]}`.toLowerCase() : base;
+  }
+  return resolveRole(raw.replace(/[{}]/g, ''), mode, depth + 1);
+};
+const sameValue = (a, b) => MODES.every((mode) => {
+  const va = resolveRole(a, mode);
+  const vb = resolveRole(b, mode);
+  return va !== null && vb !== null && va === vb;
+});
+
+// --- the theme side -----------------------------------------------------------------------------
+
+/*
+ * Block comments are blanked, not removed: dropping them shifts every line number after the first
+ * one in a file, and this whole report is line references. typography/_sizes.scss:69 was printed
+ * as :65 because of a four-line comment above it.
+ */
+const styleFiles = (dir) => readdirSync(dir).flatMap((entry) => {
+  const absolute = join(dir, entry);
+  if (statSync(absolute).isDirectory()) return styleFiles(absolute);
+  return entry.endsWith('.scss') ? [absolute] : [];
+});
+
+/*
+ * Collected in two passes, because a declaration does not have to name a role itself.
+ * `$speed-dial-action-bg: buttonColors.$button-normal-contained-bg` carries the button's value, and
+ * `$pivot-grid-area-field-bg: rgb(from #{$pivot-grid-field-area-box-bg} …)` carries a sibling's.
+ * Collecting only the lines with a literal `ds.$` in them dropped those from the set entirely - no
+ * verdict, no family check, no list - while `every colour declaration reaches a verdict` stayed
+ * green, because it measured completeness over the set the collector had already narrowed.
+ * So: pass one takes every declaration, pass two resolves the references until they reach roles.
+ */
+const rawDeclarations = [];
+for (const file of styleFiles(themeDir)) {
+  const folder = relative(themeDir, file).split('/')[0];
+  const colourFile = file.endsWith('_colors.scss');
+  const source = readFileSync(file, 'utf8').replace(/\/\*[\s\S]*?\*\//g, (m) => m.replace(/[^\n]/g, ''));
+  source.split('\n').forEach((line, index) => {
+    if (/^\s*\/\//.test(line)) return;
+    const sass = /^\s*\$([a-z0-9-]+)\s*:\s*(.+?)(?:\s*!default)?\s*;/.exec(line);
+    if (sass) {
+      rawDeclarations.push({
+        file, folder, colourFile, index, name: sass[1], value: sass[2], sass: true,
+      });
+      return;
+    }
+    /*
+     * A tier name written straight as a custom property is a declaration too, and fourteen of them
+     * sit on the theme root - `--dx-color-warning: #{ds.$color-content-warning}` and its neighbours,
+     * the public aliases. Reading a role directly is the whole test: `--dx-toast-bg: #{$toast-bg}`
+     * in a generated `_public.scss` only republishes a declaration already audited under its Sass
+     * name, and counting it again would double the set.
+     */
+    const custom = /^\s*--(dx-[a-z0-9-]+)\s*:\s*(.+?)\s*;/.exec(line);
+    if (!custom || !/ds\.\$/.test(custom[2])) return;
+    rawDeclarations.push({
+      file, folder, colourFile, index, name: custom[1].replace(/^dx-/, ''), value: custom[2],
+    });
+  });
+}
+
+const valueOf = new Map(rawDeclarations.filter((d) => d.sass).map((d) => [d.name, d.value]));
+/* A reference reaches its roles through however many hops it takes; the depth cap only stops a
+ * cycle, and `seen` keeps a diamond from counting the same source twice. */
+const rolesOf = (value, seen = new Set(), depth = 0) => {
+  if (depth > 8) return [];
+  const direct = [...value.matchAll(/ds\.\$([a-z0-9-]+)/g)].map((r) => r[1]);
+  const refs = [...value.matchAll(/(?:[A-Za-z][\w-]*\.)?\$([a-z0-9-]+)/g)]
+    .map((r) => r[1])
+    .filter((n) => valueOf.has(n) && !seen.has(n));
+  const borrowed = refs.flatMap((n) => {
+    seen.add(n);
+    return rolesOf(valueOf.get(n), seen, depth + 1);
+  });
+  return [...direct, ...borrowed];
+};
+/* What a declaration borrows from, for the report: the names it reads that are declarations
+ * themselves rather than roles. */
+const borrowsOf = (value) => [...new Set([...value.matchAll(/(?:[A-Za-z][\w-]*\.)?\$([a-z0-9-]+)/g)]
+  .map((r) => r[1]).filter((n) => valueOf.has(n)))];
+
+const declarations = [];
+{
+  rawDeclarations.forEach(({
+    file, folder, colourFile, index, name, value,
+  }) => {
+    const roles = [...new Set(rolesOf(value))];
+    const borrows = borrowsOf(value);
+    if (!roles.length) return;
+    /*
+     * Outside the colour files a declaration joins only when it carries a colour: `_sizes.scss`
+     * holds four that do - two shadows and two borders - and several hundred that read the spacing
+     * and radius scales, which the size pass measures instead.
+     */
+    if (!colourFile && !roles.some((role) => /^(color|box-shadow)-/.test(role))) return;
+    const state = trailing(name, STATES);
+    const bare = state ? name.slice(0, -state.length - 1) : name;
+    const slot = trailing(bare, PARTS);
+    /*
+     * A part word can also sit in the middle as a sub-element: `$menu-separator-bg` is slot `bg` on
+     * sub-element `separator`, and the package models exactly that as its own `separator` slot. So
+     * the comparison looks for the package's word among ours, not only at our last position -
+     * otherwise every `<part>-bg` reads as a bg that borrowed a border role.
+     */
+    const middle = slot ? bare.slice(0, -slot.length).replace(/-$/, '') : bare;
+    const subElementSlots = PARTS.filter((part) => middle === part || middle.endsWith(`-${part}`)
+      || middle.startsWith(`${part}-`) || middle.includes(`-${part}-`));
+    declarations.push({
+      folder,
+      where: `${relative(packageRoot, file)}:${index + 1}`,
+      name,
+      slot,
+      subElementSlots,
+      state: state ?? 'rest',
+      roles,
+      bridged: /rgb\(\s*from/.test(value),
+      value: value.trim(),
+      ...(borrows.length ? { borrows } : {}),
+    });
+  });
+}
+
+/*
+ * Does the collector see every line that reads a role?
+ *
+ * Three times now a pass has narrowed its own input and then reported completeness over what was
+ * left: declarations that borrow their value, declarations outside `_colors.scss`, tier names
+ * written as custom properties. Each was found by hand, and each was invisible to `every colour
+ * declaration reaches a verdict`, because that test counts the set the collector already built.
+ *
+ * So this counts from the file instead. Every line that mentions a colour or shadow role has to end
+ * up as a declaration - or carry `dx-data-uri-static`, which means the role is named in a comment
+ * beside a literal because the value is baked into an SVG and never reaches CSS. Anything else is a
+ * blind spot, and the gate names the line.
+ */
+const coverage = { lines: 0, collected: 0, dataUriStatic: 0, unexplained: [] };
+{
+  const collected = new Set(declarations.map((d) => d.where));
+  for (const file of styleFiles(themeDir)) {
+    const source = readFileSync(file, 'utf8').replace(/\/\*[\s\S]*?\*\//g, (m) => m.replace(/[^\n]/g, ''));
+    source.split('\n').forEach((line, index) => {
+      if (/^\s*\/\//.test(line) || !/ds\.\$(color|box-shadow)-/.test(line)) return;
+      coverage.lines += 1;
+      const where = `${relative(packageRoot, file)}:${index + 1}`;
+      if (collected.has(where)) coverage.collected += 1;
+      else if (/dx-data-uri-static/.test(line)) coverage.dataUriStatic += 1;
+      else coverage.unexplained.push(where);
+    });
+  }
+}
+
+// --- the package side ---------------------------------------------------------------------------
+
+const leaves = leavesOf;
+const _unusedLeaves = (node, trail = []) => Object.entries(node ?? {}).flatMap(([key, value]) => {
+  if (key.startsWith('$') || !value || typeof value !== 'object') return [];
+  if ('$value' in value) return [[[...trail, key].join('.'), value.$value]];
+  return leaves(value, [...trail, key]);
+});
+
+/* A package path is `<component>.<sub-elements>.color.<variants>.<slot>.<state>`, and only the part
+ * after `color.` describes the paint - `progress-bar.progress-line.color.indicator.…` would
+ * otherwise match `line` in the sub-element. The slot is the rightmost segment that is one of our
+ * parts, so a package slot we have no word for is reported rather than silently mapped. */
+const dissect = (path) => {
+  const segments = path.split('.');
+  const colourAt = segments.indexOf('color');
+  if (colourAt === -1) return null;
+  const tail = segments.slice(colourAt + 1);
+  const state = PACKAGE_STATES.has(tail.at(-1)) ? tail.pop() : 'rest';
+  for (let i = tail.length - 1; i >= 0; i -= 1) {
+    const slot = trailing(tail[i], PARTS);
+    if (slot) return { slot, state, variant: tail.slice(0, i).join('.') };
+  }
+  /* `separator.color` and `backdrop.color` carry no slot segment because the component IS the slot:
+   * the package models them the way our system tier publishes them, as a thing rather than a part
+   * of a thing. Without this they fall out of the comparison entirely, and every `-separator-border`
+   * in the theme reads as a border nobody named. */
+  const asSlot = COMPONENT_AS_SLOT[segments[0]] ?? trailing(segments[0], PARTS);
+  if (asSlot) return { slot: asSlot, state, variant: tail.join('.') };
+  return { slot: null, state, variant: tail.join('.') };
+};
+
+/*
+ * wpf keeps eight components outside `theme/fluent.json`, in a folder each: accordion,
+ * button-group, docking, groupbox, listbox-edit, pagercontrol, progress-bar and text-content.
+ * Reading only `theme/` dropped 450 leaves, including the whole accordion and the progress bar's
+ * hue variants. Merged under the same set so a role found there answers exactly as one in theme/.
+ */
+const WPF_EXTRA = ['accordion', 'button-group', 'docking', 'groupbox', 'listbox-edit', 'pagercontrol', 'progress-bar', 'text-content'];
+const setFiles = (set) => {
+  const files = [join(tokensRoot, 'tokens', 'components', set, 'theme', 'fluent.json')];
+  if (set === 'wpf') {
+    for (const extra of WPF_EXTRA) {
+      const file = join(tokensRoot, 'tokens', 'components', set, extra, 'fluent.json');
+      if (existsSync(file)) files.push(file);
+    }
+  }
+  return files;
+};
+const componentsOf = (set) => Object.assign({}, ...setFiles(set).map((f) => JSON.parse(readFileSync(f, 'utf8'))));
+
+const packageTier = {};   // set -> component -> { bySlot, byRole, unknownSlots }
+for (const set of SETS) {
+  const components = componentsOf(set);
+  packageTier[set] = {};
+  for (const [component, tree] of Object.entries(components)) {
+    const bySlot = new Map();
+    const byState = new Map();   // slot -> state -> Set(role)
+    const byRole = new Map();
+    const unknownSlots = new Set();
+    for (const [path, raw] of leaves(tree)) {
+      if (typeof raw !== 'string' || !raw.startsWith('{')) continue;
+      const role = raw.replace(/[{}]/g, '').replace(/^(color|global\.color)\./, 'color-');
+      if (!role.startsWith('color-')) continue;
+      const anatomy = dissect(`${component}.${path}`);
+      if (!anatomy) continue;
+      if (!anatomy.slot) { unknownSlots.add(path); continue; }
+      if (!bySlot.has(anatomy.slot)) bySlot.set(anatomy.slot, new Set());
+      bySlot.get(anatomy.slot).add(role);
+      if (!byState.has(anatomy.slot)) byState.set(anatomy.slot, new Map());
+      const states = byState.get(anatomy.slot);
+      if (!states.has(anatomy.state)) states.set(anatomy.state, new Set());
+      states.get(anatomy.state).add(role);
+      if (!byRole.has(role)) byRole.set(role, new Set());
+      byRole.get(role).add(anatomy.slot);
+    }
+    packageTier[set][component] = { bySlot, byState, byRole, unknownSlots };
+  }
+}
+
+/*
+ * Typography: the same question, asked of the size files.
+ *
+ * The colour layer reads roles everywhere (0 direct palette reads). Typography does not: most of
+ * its step reads go straight to a base scale, because the value came from legacy fluent and the
+ * role grid has no step with that value - font-weight 500, font-size 110/180/220/260/360,
+ * line-height 120/180. Most carry `dx-no-semantic-role`; the rest carry no marker at all, because
+ * the px gate only looks at literals and a step read is not a literal.
+ *
+ * None of the four neighbours has this: their component sets reference the typography ROLES and a
+ * bare step three times in total. So a place here is not "the package is missing a role" by
+ * default - it is a choice between the legacy value and the design system's grid, and the report
+ * has to put both in front of whoever decides.
+ */
+const TYPOGRAPHY = ['font-size', 'font-weight', 'line-height'];
+
+const typographyGrid = {};   // family -> [{ role, step }], the steps the role grid actually names
+for (const family of TYPOGRAPHY) {
+  const roles = [];
+  for (const [name, raw] of valueIndex.light) {
+    if (!name.startsWith(`${family}.`)) continue;
+    const step = /^\{?([a-z-]+)\.(\d+)\}?$/.exec(String(raw));
+    if (!step) continue;               // a role points at a step; a step points at a number
+    roles.push({ role: name.split('.')[1], step: Number(step[2]) });
+  }
+  typographyGrid[family] = roles.sort((a, b) => a.step - b.step);
+}
+
+const MARKERS = /dx-(no-semantic-role|icon-glyph-size|offscale|relative|px-nudge|literal-required|fixed-size|line-width|shadow-geometry)/;
+
+const typography = [];
+const sizeFiles = (dir) => readdirSync(dir).flatMap((entry) => {
+  const absolute = join(dir, entry);
+  if (statSync(absolute).isDirectory()) return sizeFiles(absolute);
+  return entry === '_sizes.scss' ? [absolute] : [];
+});
+for (const file of sizeFiles(themeDir)) {
+  const folder = relative(themeDir, file).split('/')[0];
+  readFileSync(file, 'utf8').replace(/\/\*[\s\S]*?\*\//g, (m) => m.replace(/[^\n]/g, '')).split('\n').forEach((line, index) => {
+    if (/^\s*\/\//.test(line)) return;
+    const read = /ds\.\$(font-size|font-weight|line-height)-(\d+)/.exec(line);
+    if (!read) return;
+    const [, family, step] = read;
+    const grid = typographyGrid[family] ?? [];
+    const onGrid = grid.filter((r) => r.step === Number(step));
+    const nearest = [...grid]
+      .sort((a, b) => Math.abs(a.step - Number(step)) - Math.abs(b.step - Number(step)))
+      .slice(0, 3);
+    typography.push({
+      folder,
+      where: `${relative(packageRoot, file)}:${index + 1}`,
+      variable: /\$([a-z0-9-]+)\s*:/.exec(line)?.[1] ?? '(inline)',
+      family,
+      step: Number(step),
+      marker: MARKERS.exec(line)?.[1] ?? null,
+      roles: onGrid.map((r) => r.role),
+      nearest: onGrid.length ? [] : nearest.map((r) => ({ role: r.role, step: r.step })),
+    });
+  });
+}
+
+/*
+ * What each tier name actually paints, read out of the built bundle.
+ *
+ * The slot is supposed to encode the CSS property (NAMING.md: assigned in `color:` -> content, in
+ * `background-color` -> bg, in `border-color` -> border), and that is the one claim in the whole
+ * name that can be checked against ground truth instead of read. filterBuilder is why it is worth
+ * checking: fourteen `-content` variables reach base as `button-color($color, ...)`, which sets
+ * `background-color` - the roles were right all along and the names were not.
+ *
+ * Needs a built bundle; without one this half of the report is simply absent, the way the calc
+ * inventory in SCALES.md is.
+ */
+const PROPERTY_FAMILY = [
+  [/^(background|background-color|background-image)$/, 'bg'],
+  [/^(color|fill|caret-color|-webkit-text-fill-color)$/, 'content'],
+  [/(^|-)border(-|$)|^outline(-|$)|^stroke$|^border-color$/, 'border'],
+  [/shadow$/, 'shadow'],
+];
+const bundlePath = join(packageRoot, '..', 'devextreme', 'artifacts', 'css', 'dx.fluent-next.blue.light.css');
+const paints = new Map();   // --dx-name -> Set(css property)
+/*
+ * Names the bundle declares at all - not what they paint, just that they exist there.
+ *
+ * Every check that reads a painted property goes quiet when the bundle predates the source: a
+ * renamed variable simply is not found, so it reports no property, so it cannot contradict its
+ * slot. Renaming twenty-three names on 09.09 against a bundle built that morning hid twenty-four
+ * declarations this way, and the slot check looked like it had passed. The count below is banked
+ * with exact equality, so a stale bundle moves a number instead of removing findings.
+ */
+const declaredInBundle = new Set();
+if (existsSync(bundlePath)) {
+  const css = readFileSync(bundlePath, 'utf8');
+  for (const [, name] of css.matchAll(/(--dx-[a-z0-9-]+)\s*:/g)) declaredInBundle.add(name);
+  for (const [, property, value] of css.matchAll(/([a-z-]+)\s*:\s*([^;{}]*var\(--dx-[^;{}]*)/g)) {
+    for (const [, name] of value.matchAll(/var\(\s*(--dx-[a-z0-9-]+)/g)) {
+      if (!paints.has(name)) paints.set(name, new Set());
+      paints.get(name).add(property);
+    }
+  }
+}
+const familyOfProperty = (property) => PROPERTY_FAMILY.find(([re]) => re.test(property))?.[1] ?? null;
+
+// --- the comparison -------------------------------------------------------------------------------
+
+const findings = [];
+for (const declaration of declarations) {
+  const {
+    slot, subElementSlots, roles, folder, state,
+  } = declaration;
+  const ourSlots = [slot, ...subElementSlots].filter(Boolean);
+  const record = { ...declaration, family: null, package: null };
+
+  // The family signal follows the CSS property, which is what the slot encodes (NAMING.md): a
+  // separator drawn with background-color is still painted by `bg`. Sub-elements steer the package
+  // comparison, not this one.
+  if (slot && FAMILY[slot]) {
+    const want = FAMILY[slot];
+    const got = [...new Set(roles.map(familyOf))].filter((f) => f !== 'none');
+    if (got.length && !got.includes(want)) record.family = { want, got, slot };
+  }
+
+  const candidates = COMPONENT[folder] ?? [];
+  if (!candidates.length) record.package = { verdict: 'no-counterpart' };
+  else if (!slot) record.package = { verdict: 'slot-unparsed' };
+  else {
+    const seen = [];
+    for (const set of SETS) {
+      for (const candidate of [...candidates, ...SHARED]) {
+        const tier = packageTier[set][candidate];
+        if (!tier) continue;
+        seen.push({ set, component: candidate, tier, own: candidates.includes(candidate) });
+      }
+    }
+    if (!seen.length) record.package = { verdict: 'no-counterpart' };
+    else {
+      const exact = [];
+      const kin = [];
+      /* Whether the package uses our role for another part OF THE SAME widget or only somewhere
+       * else entirely. The first is a word disagreement - the package calls the switch knob a
+       * `trigger` and paints it from a content role, exactly as we do, and only our slot says `bg`.
+       * The second is the one worth a second look. */
+      const sameComponent = new Set();
+      const crossFamily = new Map();
+      const slotRoles = new Set();   // roles the package uses for our slot, or a kin slot
+      for (const { set, component, tier, own } of seen) {
+        /*
+         * What the package offers HERE is gathered strictly: same family as our own slot, no
+         * sub-elements and no wildcard. `$popup-content-shadow-ambient` is a shadow that happens to
+         * live on the content area, and a scroll bar's thumb is ambiguous by design - letting
+         * either widen the candidate set turns a correct role into a conflict with roles that were
+         * never on offer. The lenient reading stays where it belongs: deciding whether our role
+         * already agrees with the package somewhere.
+         */
+        for (const [pkgSlot, pkgRoles] of tier.bySlot) {
+          if (kinOf(pkgSlot) !== kinOf(slot) || kinOf(slot) === 'ambiguous') continue;
+          for (const role of pkgRoles) slotRoles.add(role);
+        }
+        for (const role of roles) {
+          const usedIn = [...(tier.byRole.get(role) ?? [])];
+          if (!usedIn.length) continue;
+          if (usedIn.some((pkgSlot) => ourSlots.includes(pkgSlot))) exact.push(`${set}/${component}`);
+          else if (usedIn.some((pkgSlot) => ourSlots.some((ours) => kindred(pkgSlot, ours)))) kin.push(`${set}/${component}:${usedIn.join(',')}`);
+          else {
+            const key = usedIn.sort().join('|');
+            if (!crossFamily.has(key)) crossFamily.set(key, []);
+            crossFamily.get(key).push(`${set}/${component}`);
+            if (own) sameComponent.add(`${set}/${component}:${usedIn.join(',')}`);
+          }
+        }
+      }
+      const here = [...slotRoles].sort();
+      /* A role of the slot's own family used elsewhere for a different part is not a crossing - the
+       * package simply has not needed it here. Reserve `cross-family` for the case the name
+       * promises: the role belongs to another family than the slot paints with. */
+      const crosses = FAMILY[slot] && roles.some((role) => {
+        const family = familyOf(role);
+        return family !== 'none' && family !== FAMILY[slot];
+      });
+      if (exact.length) record.package = { verdict: 'agrees', where: [...new Set(exact)] };
+      else if (kin.length) record.package = { verdict: 'agrees-kin', where: [...new Set(kin)] };
+      else if (crossFamily.size && crosses) {
+        record.package = {
+          verdict: 'cross-family',
+          usedFor: [...crossFamily].map(([slots, where]) => ({ slots: slots.split('|'), where: [...new Set(where)] })),
+          sameComponent: [...sameComponent],
+          packageUsesHere: here,
+        };
+      } else if (crossFamily.size) {
+        record.package = { verdict: 'role-new', packageUsesHere: here };
+      } else if (here.length) {
+        const ourFamilies = new Set(roles.map(familyOf).filter((f) => f !== 'none'));
+        const theirFamilies = new Set(here.map(familyOf).filter((f) => f !== 'none'));
+        // Only `color-none` on offer is not a family to conflict with - the package simply paints
+        // nothing here, which says nothing about our role.
+        if (!theirFamilies.size) record.package = { verdict: 'slot-absent' };
+        else {
+          const shared = [...ourFamilies].some((f) => theirFamilies.has(f));
+          record.package = { verdict: shared ? 'role-new' : 'family-conflict', packageUsesHere: here };
+        }
+      } else record.package = { verdict: 'slot-absent' };
+
+      /*
+       * The rung, which the verdict above never asks about. `agrees` means the package uses our role
+       * for our slot SOMEWHERE in this component, in any state - so `$text-editor-line-focused` read
+       * `agrees` while the package names `content-primary` for that underline at focus and `content`
+       * only at hover. `byState` has carried the answer since the tier was first parsed, and nothing
+       * read it.
+       *
+       * Narrow on purpose, to one question: does the package use OUR role for OUR slot at a
+       * DIFFERENT rung? That is a ladder shifted by a step, and it is checkable. The looser reading -
+       * our role simply absent from the package's rung - fires 185 times and says mostly that our
+       * anatomy is richer: the package's grid names two roles for its whole content slot, so every
+       * dropzone, filter panel and link of ours disagrees with it and nothing follows from that.
+       */
+      const rung = new Set();
+      const usedAt = new Set();
+      const rungWhere = [];
+      for (const { set, component, tier, own } of seen) {
+        if (!own) continue;
+        for (const [pkgSlot, states] of tier.byState) {
+          if (kinOf(pkgSlot) !== kinOf(slot) || kinOf(slot) === 'ambiguous') continue;
+          for (const [pkgState, named] of states) {
+            if (pkgState === state || (state === 'disabled' && pkgState === 'disable')) {
+              for (const role of named) rung.add(role);
+              rungWhere.push(`${set}/${component}.${pkgSlot}.${pkgState}`);
+            } else if (roles.some((role) => named.has(role))) usedAt.add(pkgState);
+          }
+        }
+      }
+      if (rung.size && usedAt.size && !roles.some((role) => rung.has(role))) {
+        record.rung = {
+          state, want: [...rung].sort(), oursAt: [...usedAt].sort(), where: [...new Set(rungWhere)].sort(),
+        };
+      }
+    }
+  }
+  const painted = [...(paints.get(`--dx-${declaration.name}`) ?? [])].sort();
+  if (painted.length) {
+    const families = [...new Set(painted.map(familyOfProperty).filter(Boolean))];
+    record.paints = { properties: painted, families };
+    // The slot claims a family; the bundle says which one the property actually belongs to.
+    if (FAMILY[slot] && families.length && !families.includes(FAMILY[slot])) {
+      record.slotLies = { slotSays: FAMILY[slot], propertySays: families };
+    }
+  }
+
+  const here = record.package?.packageUsesHere ?? [];
+  if (here.length && roles.length === 1) {
+    const free = here.filter((candidate) => candidate !== roles[0] && sameValue(candidate, roles[0]));
+    const drift = MODES.filter((mode) => {
+      const ours = resolveRole(roles[0], mode);
+      return here.some((candidate) => resolveRole(candidate, mode) !== ours);
+    });
+    record.swap = { free, ours: Object.fromEntries(MODES.map((m) => [m, resolveRole(roles[0], m)])), drift };
+    if (!free.length) {
+      /* The role the package would have us use is often one step away and differs in a single mode.
+       * Naming it turns a diagnosis into a decision - and a candidate that moves dark only is the
+       * signature case of this report: no etalon can see it. */
+      const wanted = FAMILY[record.slot];
+      record.near = here
+        .filter((candidate) => !wanted || familyOf(candidate) === wanted)
+        .map((candidate) => ({
+          role: candidate,
+          moves: MODES.filter((mode) => resolveRole(candidate, mode) !== resolveRole(roles[0], mode)),
+        }))
+        .filter((candidate) => candidate.moves.length)
+        .sort((a, b) => a.moves.length - b.moves.length);
+    }
+  }
+  findings.push(record);
+}
+
+/*
+ * State ladders: does a state actually change the paint?
+ *
+ * Needs neither the package nor a bundle - it reads the theme against itself. A slot whose hovered
+ * and active resolve to one role has a state in the name that the eye cannot find, and the ladder
+ * the design system ships for that role is going unused. Two collapses are accepted convention and
+ * are named here rather than discovered every run: `focused` reuses `hovered` because the
+ * foundation has no focused state (DIVERGENCES), and a state that deliberately resets to the rest
+ * value is a reset, not a gap.
+ */
+const ACCEPTED_COLLAPSE = [['focused', 'hovered'], ['focused', 'active'], ['selected-focused', 'selected-hovered']];
+const acceptedPair = (a, b) => ACCEPTED_COLLAPSE.some(([x, y]) => (a === x && b === y) || (a === y && b === x));
+
+const ladders = [];
+{
+  const groups = new Map();
+  for (const declaration of declarations) {
+    if (!declaration.slot) continue;
+    const stem = declaration.state === 'rest'
+      ? declaration.name
+      : declaration.name.slice(0, -declaration.state.length - 1);
+    if (!groups.has(stem)) groups.set(stem, []);
+    groups.get(stem).push(declaration);
+  }
+  for (const [stem, members] of groups) {
+    if (members.length < 2) continue;
+    const byRole = new Map();
+    for (const member of members) {
+      const key = member.roles.join('+');
+      if (!byRole.has(key)) byRole.set(key, []);
+      byRole.get(key).push(member.state);
+    }
+    for (const [role, states] of byRole) {
+      if (states.length < 2) continue;
+      const pairs = states.flatMap((a, i) => states.slice(i + 1).map((b) => [a, b]));
+      if (pairs.every(([a, b]) => acceptedPair(a, b))) continue;
+      /* The precise question is about OUR role, not the package's anatomy: we paint two states
+       * from role R, so does the design system ship R for the second state? `bg-alpha-hovered`
+       * shared by hovered and active is a gap exactly when `bg-alpha-active` exists. This needs no
+       * component mapping, so it answers for all 86 folders, including the 22 the package has
+       * never heard of. */
+      const unusedRungs = states
+        .filter((state) => state !== 'rest')
+        .flatMap((state) => role.split('+').map((r) => {
+          const rung = `${r.replace(/-(hovered|active|selected|focused|disabled|read-only)$/, '')}-${state}`;
+          return resolveRole(rung, 'light') !== null && rung !== r ? { state, rung } : null;
+        }))
+        .filter(Boolean);
+      ladders.push({
+        stem,
+        folder: members[0].folder,
+        where: members.find((m) => states.includes(m.state)).where,
+        role: role.split('+'),
+        states: states.sort(),
+        unusedRungs,
+      });
+    }
+  }
+  ladders.sort((a, b) => a.stem.localeCompare(b.stem));
+}
+
+/*
+ * Contrast, measured only where the bundle itself puts a foreground and a background in ONE rule.
+ *
+ * This is the blind spot the whole report circles: every screenshot etalon is .light, and axe's
+ * colour-contrast rule looks at text only, so a role that is fine in light and wrong in dark has
+ * nothing watching it. Guessing which surface a text sits on would produce noise; a rule that sets
+ * both is ground truth and needs no assumption. It covers a subset - most backgrounds live on an
+ * ancestor - but every pair it reports is real.
+ */
+const hexOf = (value) => {
+  const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(String(value).trim());
+  if (!hex) return null;
+  const body = hex[1].length === 3 ? [...hex[1]].map((c) => c + c).join('') : hex[1];
+  return [0, 2, 4].map((i) => parseInt(body.slice(i, i + 2), 16));
+};
+const luminance = (rgb) => {
+  const [r, g, b] = rgb.map((channel) => {
+    const c = channel / 255;
+    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+};
+const contrast = (a, b) => {
+  const [x, y] = [luminance(a), luminance(b)].sort((m, n) => n - m);
+  return (x + 0.05) / (y + 0.05);
+};
+
+/* A value built through the alpha bridge renders as a tint over whatever is behind it, not as the
+ * role's opaque hex - measuring it against the role would invent a contrast nobody sees. The
+ * html editor's code block, `rgb(from color-content-subtle r g b / .15)`, is why this is here. */
+const roleOfTierName = new Map(declarations
+  .filter((d) => !d.bridged && d.roles.length === 1)
+  .map((d) => [`--dx-${d.name}`, d.roles[0]]));
+const pairs = [];
+if (existsSync(bundlePath)) {
+  const css = readFileSync(bundlePath, 'utf8');
+  for (const [, selector, body] of css.matchAll(/([^{}]+)\{([^{}]*)\}/g)) {
+    if (selector.trim().startsWith('@')) continue;
+    // WCAG 1.4.3 exempts inactive controls, and the theme's disabled policy is gated separately
+    // (tests/disabled-paint.test.ts). Measuring them here would bury the live pairs under them.
+    if (/dx-state-disabled|dx-state-readonly|dx-button-disable/.test(selector)) continue;
+    const grab = (property) => new RegExp(`(?:^|;)\\s*${property}\\s*:\\s*var\\(\\s*(--dx-[a-z0-9-]+)`).exec(body)?.[1];
+    const fg = grab('color');
+    const bg = grab('background-color') ?? grab('background');
+    if (!fg || !bg) continue;
+    const fgRole = roleOfTierName.get(fg);
+    const bgRole = roleOfTierName.get(bg);
+    if (!fgRole || !bgRole) continue;
+    const measured = {};
+    for (const mode of MODES) {
+      const a = hexOf(resolveRole(fgRole, mode));
+      const b = hexOf(resolveRole(bgRole, mode));
+      if (a && b) measured[mode] = Math.round(contrast(a, b) * 100) / 100;
+    }
+    if (!Object.keys(measured).length) continue;
+    pairs.push({ selector: selector.trim().replace(/\s+/g, ' ').slice(0, 90), fg, bg, fgRole, bgRole, contrast: measured });
+  }
+}
+const AA = 4.5;
+const lowContrast = pairs
+  .filter((pair) => MODES.some((mode) => pair.contrast[mode] !== undefined && pair.contrast[mode] < AA))
+  .filter((pair, index, all) => all.findIndex((other) => other.fg === pair.fg && other.bg === pair.bg) === index)
+  .sort((a, b) => Math.min(...Object.values(a.contrast)) - Math.min(...Object.values(b.contrast)));
+
+/*
+ * Contrast across a state change - the blind spot of the pass above.
+ *
+ * The rule-local pass only sees a foreground and a background written together. A state ladder
+ * never writes them together: the hovered/focused rule repaints the fill and leaves the glyph to
+ * the rule that set it in the rest state. So exactly the states where a value moves are the ones
+ * the rule-local pass cannot measure, and the checked+focused checkbox - 1.62 in dark, against a
+ * rest state that measures a comfortable 3.36 - sat under it unseen.
+ *
+ * Pairing rule: strip the state classes from a selector and two rules describe the same element.
+ * Variant classes (dx-checkbox-checked, dx-invalid) are NOT stripped, so a checked box is never
+ * paired with an unchecked one. A pair is reported only when the fill comes from a state rule and
+ * the glyph from the element's own rest rule - that is the cross-rule case by construction.
+ */
+const STATE_CLASS = /\.dx-state-(?:hover|focused|active|selected)\b/g;
+const elementKey = (selector) => selector
+  .replace(STATE_CLASS, '')
+  .replace(/:(?:hover|focus|focus-visible|active)\b/g, '')
+  .trim()
+  .replace(/\s+/g, ' ');
+
+const foregroundOf = new Map();
+const statePairs = [];
+if (existsSync(bundlePath)) {
+  const css = readFileSync(bundlePath, 'utf8');
+  const rules = [];
+  for (const [, selectorList, body] of css.matchAll(/([^{}]+)\{([^{}]*)\}/g)) {
+    if (selectorList.trim().startsWith('@')) continue;
+    if (/dx-state-disabled|dx-state-readonly|dx-button-disable/.test(selectorList)) continue;
+    const grab = (property) => new RegExp(`(?:^|;)\\s*${property}\\s*:\\s*var\\(\\s*(--dx-[a-z0-9-]+)`).exec(body)?.[1];
+    const fg = grab('color');
+    const bg = grab('background-color') ?? grab('background');
+    if (!fg && !bg) continue;
+    for (const one of selectorList.split(',')) {
+      const selector = one.trim().replace(/\s+/g, ' ');
+      if (!selector) continue;
+      rules.push({ selector, key: elementKey(selector), fg, bg, stated: STATE_CLASS.test(selector) });
+      STATE_CLASS.lastIndex = 0;
+    }
+  }
+  // The rest-state foreground of each element: the last rule that sets `color` without a state.
+  for (const rule of rules) if (rule.fg && !rule.stated) foregroundOf.set(rule.key, rule);
+  /*
+   * A theme may move the label WITH the state, in a rule of its own: the outlined button sets the
+   * background in one rule and the label colour in another, both carrying the same state class.
+   * Pairing such a background with the REST label measures a pair that never renders - it reported
+   * the outlined button at 4.02 where the button actually renders 5.85. So the state's own
+   * foreground wins when there is one, and the rest foreground is the fallback it always was.
+   */
+  const statedForegroundOf = new Map();
+  const stateKey = (selector) => {
+    STATE_CLASS.lastIndex = 0;
+    return `${elementKey(selector)}\u0000${(selector.match(STATE_CLASS) ?? []).sort().join('')}`;
+  };
+  for (const rule of rules) if (rule.fg && rule.stated) statedForegroundOf.set(stateKey(rule.selector), rule);
+  for (const rule of rules) {
+    if (!rule.stated || !rule.bg || rule.fg) continue;
+    const rest = statedForegroundOf.get(stateKey(rule.selector)) ?? foregroundOf.get(rule.key);
+    if (!rest) continue;
+    const fgRole = roleOfTierName.get(rest.fg);
+    const bgRole = roleOfTierName.get(rule.bg);
+    if (!fgRole || !bgRole) continue;
+    const measured = {};
+    for (const mode of MODES) {
+      const a = hexOf(resolveRole(fgRole, mode));
+      const b = hexOf(resolveRole(bgRole, mode));
+      if (a && b) measured[mode] = Math.round(contrast(a, b) * 100) / 100;
+    }
+    if (!Object.keys(measured).length) continue;
+    statePairs.push({
+      selector: rule.selector.slice(0, 90),
+      restSelector: rest.selector.slice(0, 90),
+      fg: rest.fg,
+      bg: rule.bg,
+      fgRole,
+      bgRole,
+      contrast: measured,
+    });
+  }
+}
+/* Both thresholds are reported, as in the pass above: 4.5 for a label, 3 for a glyph or a
+ * boundary. Which one applies is decided by what the element is, and the table says so per row. */
+const GRAPHIC = 3;
+const lowStatePairs = statePairs
+  .filter((pair) => MODES.some((mode) => pair.contrast[mode] !== undefined && pair.contrast[mode] < AA))
+  .filter((pair, index, all) => all.findIndex((other) => other.fg === pair.fg && other.bg === pair.bg) === index)
+  .sort((a, b) => Math.min(...Object.values(a.contrast)) - Math.min(...Object.values(b.contrast)));
+
+/*
+ * The same concept across components.
+ *
+ * Every check above asks about one declaration. This one asks the question the task is actually
+ * named after: does the theme paint the same thing the same way everywhere? Group by what the name
+ * says the thing IS - its modifiers plus slot plus state, with the sub-elements dropped - and a
+ * concept that resolves to several roles is either a considered difference or nobody comparing.
+ *
+ * Ranked by how many FAMILIES disagree, not how many roles: `border-danger` against
+ * `border-danger-shared` is a shade, and two components can honestly differ on it. bg against
+ * border against content for one concept cannot be explained by the element being different.
+ */
+const MODIFIER_WORDS = new Set(Object.values(registries.modifiers).flat());
+const concepts = [];
+{
+  const groups = new Map();
+  for (const declaration of declarations) {
+    if (!declaration.slot || declaration.roles.length !== 1) continue;
+    const bare = declaration.state === 'rest'
+      ? declaration.name
+      : declaration.name.slice(0, -declaration.state.length - 1);
+    const middle = bare.slice(0, -declaration.slot.length).replace(/-$/, '').split('-');
+    const modifiers = [...new Set(middle.filter((word) => MODIFIER_WORDS.has(word)))].sort();
+    if (!modifiers.length) continue;   // without a modifier the concept is too generic to compare
+    const key = `${modifiers.join('+')} ${declaration.slot} ${declaration.state}`;
+    if (!groups.has(key)) groups.set(key, []);
+    groups.get(key).push(declaration);
+  }
+  for (const [concept, members] of groups) {
+    const folders = [...new Set(members.map((m) => m.folder))];
+    const roles = [...new Set(members.map((m) => m.roles[0]))];
+    if (folders.length < 2 || roles.length < 2) continue;
+    const families = [...new Set(roles.map(familyOf).filter((f) => f !== 'none'))];
+    /* Roles that resolve to one colour in both modes are the same paint under different names, and
+     * unifying them costs nothing. That is a different problem from components that genuinely
+     * disagree about the colour, and mixing the two would hide both. */
+    const valueOf = (role) => MODES.map((mode) => resolveRole(role, mode)).join(' / ');
+    const values = new Set(roles.map(valueOf));
+    const oneColour = values.size === 1;
+    /* Inside a split concept, the interesting part is the cluster: components that paint the same
+     * colour while spelling it from different families. Those cost nothing to unify, and until they
+     * are unified the next palette change moves some of them and not the others. */
+    const clusters = [...values].map((value) => ({
+      value,
+      roles: roles.filter((role) => valueOf(role) === value),
+    })).filter((cluster) => cluster.roles.length > 1);
+    const seen = new Set();
+    concepts.push({
+      concept,
+      families,
+      roles,
+      oneColour,
+      clusters,
+      members: members.filter((m) => {
+        const key = `${m.folder}|${m.roles[0]}`;
+        if (seen.has(key)) return false;
+        seen.add(key);
+        return true;
+      }).map((m) => ({ folder: m.folder, name: m.name, role: m.roles[0], where: m.where })),
+    });
+  }
+  concepts.sort((a, b) => b.families.length - a.families.length
+    || b.roles.length - a.roles.length || a.concept.localeCompare(b.concept));
+}
+
+/*
+ * What the package offers and the theme never takes.
+ *
+ * Every other check starts from a declaration we wrote and asks whether its role is right. This one
+ * starts from the package and asks what we never reached for at all - a whole family can be missing
+ * without a single declaration looking wrong, which is how the four focus roles stayed invisible
+ * until the component holding them was finally parsed.
+ *
+ * Split in two, because the two halves mean opposite things: a role that exists in the semantic
+ * layer and goes unread is capability we are not using, while a role the neighbours reference that
+ * does not exist at all is a stale name in their set.
+ */
+const declaredRoles = new Set();
+for (const [name] of valueIndex.light) declaredRoles.add(name.replace(/^(color|global\.color)\./, 'color-'));
+
+const offeredRoles = new Map();
+for (const set of SETS) {
+  for (const [, raw] of leavesOf(componentsOf(set))) {
+    if (typeof raw !== 'string' || !raw.startsWith('{')) continue;
+    const role = raw.replace(/[{}]/g, '').replace(/^(color|global\.color)\./, 'color-');
+    if (!role.startsWith('color-') || role === 'color-none') continue;
+    if (!offeredRoles.has(role)) offeredRoles.set(role, new Set());
+    offeredRoles.get(role).add(set);
+  }
+}
+const readRoles = new Set(declarations.flatMap((d) => d.roles));
+const unusedRoles = { capability: [], stale: [] };
+for (const [role, sets] of [...offeredRoles].sort()) {
+  if (readRoles.has(role)) continue;
+  unusedRoles[declaredRoles.has(role) ? 'capability' : 'stale'].push({ role, sets: [...sets].sort() });
+}
+
+// --- output ---------------------------------------------------------------------------------------
+
+const count = (predicate) => findings.filter(predicate).length;
+const verdicts = ['agrees', 'agrees-kin', 'cross-family', 'family-conflict', 'role-new', 'slot-absent', 'no-counterpart', 'slot-unparsed'];
+const summary = {
+  tokensVersion,
+  declarations: findings.length,
+  typographyStepReads: typography.length,
+  typographyOffGrid: typography.filter((t) => !t.roles.length).length,
+  typographyUnmarked: typography.filter((t) => !t.marker).length,
+  collapsedLadders: ladders.length,
+  conceptsSplit: concepts.length,
+  conceptsSplitAcrossFamilies: concepts.filter((c) => c.families.length > 1).length,
+  conceptsSameColour: concepts.filter((c) => c.oneColour).length,
+  conceptsWithSpellingClusters: concepts.filter((c) => c.clusters.length).length,
+  rolesOffered: offeredRoles.size,
+  rolesRead: offeredRoles.size - unusedRoles.capability.length - unusedRoles.stale.length,
+  rolesUnusedCapability: unusedRoles.capability.length,
+  rolesStaleInNeighbours: unusedRoles.stale.length,
+  contrastPairsMeasured: pairs.length,
+  contrastBelowAA: lowContrast.length,
+  contrastDarkOnly: lowContrast.filter((p) => p.contrast.light >= AA && p.contrast.dark < AA).length,
+  declarationsMissingFromBundle: findings.filter((f) => !declaredInBundle.has(`--dx-${f.name}`)).length,
+  statePairsMeasured: statePairs.length,
+  statePairsBelowGraphic: lowStatePairs.length,
+  familyMismatch: count((f) => f.family),
+  slotLies: count((f) => f.slotLies),
+  rungMismatch: count((f) => f.rung),
+  familyMismatchExplainedByProperty: count((f) => f.family && f.slotLies
+    && f.slotLies.propertySays.some((fam) => f.family.got.includes(fam))),
+  byVerdict: Object.fromEntries(verdicts.map((v) => [v, count((f) => f.package?.verdict === v)])),
+};
+
+const roleList = (roles) => roles.map((r) => `ds.$${r}`).join(' + ');
+
+const swapLine = (f) => {
+  if (!f.swap) return null;
+  const { free, ours, drift } = f.swap;
+  const value = MODES.map((m) => `${m} ${ours[m] ?? '?'}`).join(' / ');
+  if (free.length) {
+    return `    - **free swap**: \`${free[0]}\` resolves identically in both modes (${value})`
+      + (free.length > 1 ? `; also ${free.slice(1).map((r) => `\`${r}\``).join(', ')}` : '');
+  }
+  const near = (f.near ?? []).slice(0, 3)
+    .map((n) => `\`${n.role}\` (moves ${n.moves.join(' and ')})`)
+    .join(', ');
+  return `    - ours resolves ${value}; no role of the right family shares it`
+    + (near ? `. Nearest of the right family: ${near}` : '');
+};
+
+const md = () => {
+  const out = [];
+  out.push('<!-- Generated: node tools/review/roles.mjs. Do not edit by hand. -->');
+  out.push('# Roles - what the theme assigns, what the package assigns\n');
+  out.push(`Package \`@devexpress/design-tokens-internal@${tokensVersion}\`, sets: ${SETS.join(', ')}.\n`);
+  out.push(`Colour declarations reading a role: **${summary.declarations}**.\n`);
+  out.push('| Signal | Count |');
+  out.push('|---|---|');
+  out.push(`| family mismatch (slot wants another \`--dxds-\` family) | **${summary.familyMismatch}** |`);
+  out.push(`| slot contradicts the painted property | **${summary.slotLies}** |`);
+  out.push(`| our role is the package's role for another rung | **${summary.rungMismatch}** |`);
+  out.push(`| states that resolve to one role | **${summary.collapsedLadders}** |`);
+  out.push(`| one concept painted with several roles | **${summary.conceptsSplit}** (${summary.conceptsSplitAcrossFamilies} across families) |`);
+  out.push(`| text/background pairs below AA | **${summary.contrastBelowAA}** of ${summary.contrastPairsMeasured} measured (${summary.contrastDarkOnly} dark only) |`);
+  for (const verdict of verdicts) out.push(`| package: ${verdict} | ${summary.byVerdict[verdict]} |`);
+  out.push('');
+
+  const section = (title, rows, render) => {
+    if (!rows.length) return;
+    out.push(`## ${title} - ${rows.length}\n`);
+    for (const row of rows) out.push(render(row));
+    out.push('');
+  };
+
+  section('Cross-family - the package uses this role, but only for a slot of another kind',
+    findings.filter((f) => f.package?.verdict === 'cross-family'),
+    (f) => [
+      `- \`${f.name}\` = ${roleList(f.roles)}${f.bridged ? ' *(alpha bridge - see BRIDGES.md)*' : ''}  (${f.where})`,
+      ...f.package.usedFor.map((u) => `    - package paints it as **${u.slots.join(', ')}** in ${u.where.join(', ')}`),
+      f.package.sameComponent?.length
+        ? '    - **same widget, different word**: the package uses this very role on another part of it'
+        : null,
+      f.package.packageUsesHere.length
+        ? `    - for our slot \`${f.slot}\` the package uses: ${f.package.packageUsesHere.map((r) => `\`${r}\``).join(', ')}`
+        : `    - the package names no role for slot \`${f.slot}\` here`,
+      swapLine(f),
+    ].filter(Boolean).join('\n'));
+
+  section('Family conflict - the package paints this slot from another family entirely',
+    findings.filter((f) => f.package?.verdict === 'family-conflict'),
+    (f) => [
+      `- \`${f.name}\` = ${roleList(f.roles)}  (${f.where})`,
+      `    - for slot \`${f.slot}\` the package uses: ${f.package.packageUsesHere.map((r) => `\`${r}\``).join(', ')}`,
+      swapLine(f),
+    ].filter(Boolean).join('\n'));
+
+  section('Family mismatch',
+    findings.filter((f) => f.family),
+    (f) => `- \`${f.name}\` = ${roleList(f.roles)}  (${f.where})\n`
+      + `    - slot \`${f.family.slot}\` wants \`color-${f.family.want}-*\`, reads a \`${f.family.got.join('/')}\` role`
+      + (f.package ? `; package verdict: ${f.package.verdict}` : ''));
+
+  section('The rung - our role is the one the package names for another state of the same slot',
+    findings.filter((f) => f.rung),
+    (f) => `- \`${f.name}\` = ${roleList(f.roles)}  (${f.where})\n`
+      + `    - our rung is \`${f.rung.state}\`; the package uses this role for the same slot at `
+      + `${f.rung.oursAt.map((x) => `\`${x}\``).join(', ')}\n`
+      + `    - and names for \`${f.rung.state}\`: ${f.rung.want.map((r) => `\`${r}\``).join(', ')}`);
+
+  out.push(`## Roles the package assigns and the theme never reads - ${unusedRoles.capability.length}\n`);
+  out.push('Counted from the package inward rather than from our declarations outward, because a whole');
+  out.push('family can be missing without any single declaration looking wrong.\n');
+  out.push(`Of the ${offeredRoles.size} roles the four sets assign, the theme reads ${offeredRoles.size - unusedRoles.capability.length - unusedRoles.stale.length}.`);
+  out.push(`${unusedRoles.capability.length} exist in the semantic layer and go unread; ${unusedRoles.stale.length} are names no layer declares -`);
+  out.push('stale references inside the neighbours\' own sets.\n');
+  out.push('| Role | Assigned by |', '|---|---|');
+  for (const u of unusedRoles.capability) out.push(`| \`${u.role}\` | ${u.sets.join(', ')} |`);
+  out.push('');
+
+  out.push(`## One concept, several roles - ${concepts.length} (${summary.conceptsSplitAcrossFamilies} across families)\n`);
+  out.push('Grouped by what the name says the thing is - modifiers, slot, state - with sub-elements');
+  out.push('dropped. A shade apart is a difference two components can honestly have; a family apart is');
+  out.push('one concept painted as a fill in one widget and as a border in the next. Listed first are');
+  out.push('the ones where every role resolves to the SAME colour in both modes - the same paint under');
+  out.push('several names, free to unify and, until then, repainted differently by the next redesign.\n');
+  for (const c of concepts) {
+    out.push(`- **${c.concept}** - ${c.roles.length} roles, ${c.families.length} famil${c.families.length > 1 ? 'ies' : 'y'}`
+      + (c.oneColour ? ', **one colour under several names**' : ''));
+    for (const cluster of c.clusters) {
+      out.push(`    - **one colour, ${cluster.roles.length} names** (${cluster.value}): `
+        + cluster.roles.map((r) => `\`${r}\``).join(', '));
+    }
+    for (const m of c.members) out.push(`    - ${m.folder}: \`${m.role}\`  (${m.where})`);
+  }
+  out.push('');
+
+  out.push(`## Text on its own background, below AA - ${lowContrast.length} of ${pairs.length} measured pairs\n`);
+  out.push('Only pairs the bundle puts in one rule, so no assumption about which surface a text sits');
+  out.push('on. A row that passes in light and fails in dark is the case nothing else can see: the');
+  out.push('etalons are all .light and the axe rule reads text only.\n');
+  out.push('Both thresholds matter and the report does not pick for you: 4.5:1 for text, 3:1 for a');
+  out.push('glyph or a control boundary. A checkmark at 3.36 passes as a graphic; the same number under');
+  out.push('a menu label does not.\n');
+  out.push('| Selector | Text | On | Light | Dark |');
+  out.push('|---|---|---|---|---|');
+  for (const pair of lowContrast) {
+    const mark = (value) => (value === undefined ? '-' : `${value}${value < AA ? ' ⚠' : ''}`);
+    out.push(`| \`${pair.selector}\` | \`${pair.fgRole}\` | \`${pair.bgRole}\` `
+      + `| ${mark(pair.contrast.light)} | ${mark(pair.contrast.dark)} |`);
+  }
+  out.push('');
+
+  out.push(`## A glyph left behind by its own state - ${lowStatePairs.length} of ${statePairs.length} cross-state pairs\n`);
+  out.push('The table above can only measure a foreground and a background written in one rule. A state');
+  out.push('ladder never writes them together: the focused rule repaints the fill and leaves the glyph');
+  out.push('to the rest rule. These rows pair the two by element, with the state classes stripped, so');
+  out.push('the checked box is never matched against an unchecked one.\n');
+  out.push('Two thresholds, as above: 4.5:1 if the foreground is a label, 3:1 if it is a glyph or a');
+  out.push('boundary (WCAG 1.4.11, which no axe rule implements and no screenshot can see). A single');
+  out.push('warning marks a row under 4.5, a double one a row under 3.\n');
+  out.push('| Selector | Glyph | On the state fill | Light | Dark |');
+  out.push('|---|---|---|---|---|');
+  for (const pair of lowStatePairs) {
+    const mark = (value) => (value === undefined ? '-' : `${value}${value < GRAPHIC ? ' \u26a0\u26a0' : value < AA ? ' \u26a0' : ''}`);
+    out.push(`| \`${pair.selector}\` | \`${pair.fgRole}\` | \`${pair.bgRole}\` `
+      + `| ${mark(pair.contrast.light)} | ${mark(pair.contrast.dark)} |`);
+  }
+  out.push('');
+
+  out.push(`## States that resolve to one role - ${ladders.length}\n`);
+  out.push('A state in the name that the eye cannot find. `focused` reusing `hovered` is accepted -');
+  out.push('the foundation has no focused state - and is not listed; everything below is a ladder the');
+  out.push('design system ships and the theme does not climb.\n');
+  out.push('| Where | Slot | Role | States sharing it | Rung the system ships and we skip |');
+  out.push('|---|---|---|---|---|');
+  for (const l of ladders) {
+    const rungs = l.unusedRungs.length
+      ? l.unusedRungs.map((r) => `\`${r.rung}\` (${r.state})`).join(', ')
+      : 'none - the system has no role for the second state either';
+    out.push(`| ${l.where} | \`${l.stem}\` | ${roleList(l.role)} | ${l.states.map((x) => `\`${x}\``).join(', ')} | ${rungs} |`);
+  }
+  out.push('');
+
+  const lies = findings.filter((f) => f.slotLies);
+  out.push(`## The slot does not match the property it paints - ${lies.length}\n`);
+  out.push('Read out of the built bundle, so this is what the browser gets, not what the name claims.');
+  out.push('Most are the name and not the role: fourteen filterBuilder `-content` variables reach base as');
+  out.push('`button-color()`, which sets `background-color`, and the bg roles they carry were right all');
+  out.push('along. Two idioms are deliberate and stay - a hairline drawn with `background-color` keeps its');
+  out.push('border role, and a value that paints two properties is named after the dominant one (rule 5).\n');
+  out.push('| Where | Variable | Reads | Slot says | Actually paints |');
+  out.push('|---|---|---|---|---|');
+  for (const f of lies) {
+    out.push(`| ${f.where} | \`${f.name}\` | ${roleList(f.roles)} | \`${f.slot}\` (${f.slotLies.slotSays}) `
+      + `| ${f.paints.properties.map((x) => `\`${x}\``).join(', ')} |`);
+  }
+  out.push('');
+
+  const offGrid = typography.filter((t) => !t.roles.length);
+  const onGridUnrouted = typography.filter((t) => t.roles.length);
+  out.push(`## Typography off the role grid - ${offGrid.length} of ${typography.length} step reads\n`);
+  out.push('The role grid names no step with this value, so the theme reads the base scale directly.');
+  out.push('Each line is a choice: move onto the nearest role (the value changes, etalons follow), ask');
+  out.push('the package for a role at this step, or record the value as a deliberate divergence.\n');
+  out.push('| Where | Variable | Reads | Marker | Nearest roles |');
+  out.push('|---|---|---|---|---|');
+  for (const t of offGrid) {
+    out.push(`| ${t.where} | \`${t.variable}\` | \`${t.family}-${t.step}\` | ${t.marker ? `\`${t.marker}\`` : '**none**'}`
+      + ` | ${t.nearest.map((n) => `\`${n.role}\` (${n.step})`).join(', ')} |`);
+  }
+  out.push('');
+  if (onGridUnrouted.length) {
+    out.push(`### A role names this step and the theme reads the step anyway - ${onGridUnrouted.length}\n`);
+    out.push('| Where | Variable | Reads | Marker | Role with this step |');
+    out.push('|---|---|---|---|---|');
+    for (const t of onGridUnrouted) {
+      out.push(`| ${t.where} | \`${t.variable}\` | \`${t.family}-${t.step}\` | ${t.marker ? `\`${t.marker}\`` : '**none**'}`
+        + ` | ${t.roles.map((r) => `\`${r}\``).join(', ')} |`);
+    }
+    out.push('');
+  }
+
+  const orphans = [...new Set(findings.filter((f) => f.package?.verdict === 'no-counterpart').map((f) => f.folder))].sort();
+  out.push(`## No package counterpart - ${orphans.length} folders\n`);
+  out.push(`${orphans.join(', ')}\n`);
+  out.push('These are the manual layer: no set describes them, so the role can only be judged by eye');
+  out.push('against the light/dark pair, and a gap goes to design as a card.\n');
+  return out.join('\n');
+};
+
+/*
+ * Every role the theme reads, resolved in both modes.
+ *
+ * The decision page draws specimens - a real checkbox fill with a real mark on it, a real button
+ * in each state - and a specimen is only worth looking at if it is painted with the value the
+ * bundle actually ships. Emitting the palette here keeps the page from re-implementing the
+ * resolver and from drifting away from the numbers printed beside the picture.
+ */
+const palette = {};
+const roleNames = new Set([...declarations.flatMap((d) => d.roles), ...offeredRoles.keys()]);
+// plus everything the semantic layer declares at all: the palette carries the roles offered as a
+// replacement too, and the theme does not read those by definition
+for (const key of valueIndex.light.keys()) {
+  if (key.startsWith('color.')) roleNames.add(key.replace(/^color\./, 'color-'));
+}
+for (const role of [...roleNames].sort()) {
+  const entry = {};
+  for (const mode of MODES) {
+    const value = resolveRole(role, mode);
+    if (value) entry[mode] = value;
+  }
+  if (Object.keys(entry).length) palette[role] = entry;
+}
+
+if (process.argv.includes('--json')) {
+  console.log(JSON.stringify({
+    summary, findings, typography, ladders, lowContrast, lowStatePairs, concepts, unusedRoles, palette, coverage,
+  }, null, 2));
+} else if (process.argv.includes('--md')) {
+  console.log(md());
+} else if (themeArg) {
+  console.error('--theme= is for the gate; pass --json with it');
+  process.exit(2);
+} else {
+  writeFileSync(join(themeDir, 'ROLES.md'), `${md()}\n`);
+  console.log(`declarations ${summary.declarations} | family mismatch ${summary.familyMismatch}`);
+  for (const verdict of verdicts) console.log(`  ${verdict.padEnd(16)} ${summary.byVerdict[verdict]}`);
+  console.log(`\n→ ${relative(process.cwd(), join(themeDir, 'ROLES.md'))}`);
+}
diff --git a/packages/devextreme-scss/tools/review/scales.mjs b/packages/devextreme-scss/tools/review/scales.mjs
new file mode 100644
index 000000000000..94a4b38236a8
--- /dev/null
+++ b/packages/devextreme-scss/tools/review/scales.mjs
@@ -0,0 +1,569 @@
+/*
+ * The scales report: what the theme could not put on a package step, and why.
+ *
+ *   node tools/review/scales.mjs           # → scss/widgets/fluent-next/SCALES.html + SCALES.md
+ *   node tools/review/scales.mjs --md      # markdown only, to stdout
+ *
+ * Categories and their markers live in tools/review/size-markers.json — the same list the gate
+ * tools/review/px-audit.mjs reads, so the report and the gate cannot drift.
+ *
+ * Categories with `source: "sources"` are read from the code by the marker in the comment; the
+ * calc() one is read from the BUILT bundle, because what matters there is how many expressions
+ * actually reach the browser.
+ *
+ * The report computes the "step" column itself: the value is converted to rem at a 16px root and
+ * looked up in the package scale (`scss/_design-system/base.scss`, a generated directory). It
+ * answers the question that otherwise has to be checked by hand for every row — does a step with
+ * exactly this value already exist, or is design being asked for a new one?
+ */
+
+import { readFileSync, writeFileSync, readdirSync, existsSync, statSync } from 'fs';
+import { join, dirname, relative } from 'path';
+import { fileURLToPath } from 'url';
+import postcss from 'postcss';
+
+const here = dirname(fileURLToPath(import.meta.url));
+const packageRoot = join(here, '..', '..');
+const widgetsDir = join(packageRoot, 'scss', 'widgets');
+const themeDir = join(widgetsDir, 'fluent-next');
+const cssDir = join(packageRoot, '..', 'devextreme', 'artifacts', 'css');
+const mdOnly = process.argv.includes('--md');
+
+/* ------------------------------------------------------------------ reading */
+
+const scssFiles = (dir) => readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+  const full = join(dir, entry.name);
+  if (entry.isDirectory()) return scssFiles(full);
+  return entry.name.endsWith('.scss') ? [full] : [];
+});
+
+const sources = new Map();
+[themeDir, join(widgetsDir, 'base')].forEach((dir) => {
+  if (!existsSync(dir) || !statSync(dir).isDirectory()) return;
+  scssFiles(dir).forEach((file) => sources.set(file, readFileSync(file, 'utf8').split('\n')));
+});
+
+const widgetOf = (file) => {
+  const rel = relative(widgetsDir, file);
+  const parts = rel.split('/');
+  if (parts[0] === 'base') return `base/${parts[1]?.replace(/^_|\.scss$/g, '') ?? ''}`;
+  const name = parts[1]?.replace(/^_|\.scss$/g, '') ?? '';
+  return parts.length > 2 ? parts[1] : (name || 'shared');
+};
+
+/* ------------------------------------------------------------ categories */
+
+const vocabulary = JSON.parse(readFileSync(join(here, 'size-markers.json'), 'utf8'));
+const MARKERS = vocabulary.categories.filter((entry) => entry.source === 'sources');
+const CALC_CATEGORY = vocabulary.categories.find((entry) => entry.source === 'bundle');
+
+/* -------------------------------------------------------- package steps */
+
+/**
+ * Package scales: family -> value in rem -> step names. Negative values live in a separate
+ * `spacing-minus` family, so that is the one asked for a negative literal.
+ */
+const scaleSteps = () => {
+  const file = join(packageRoot, 'scss', '_design-system', 'base.scss');
+  const families = new Map();
+  if (!existsSync(file)) return families;
+  [...readFileSync(file, 'utf8').matchAll(/--dxds-([a-z-]+)-(\d+):\s*(-?[\d.]+)rem;/g)]
+    .forEach(([, family, step, rem]) => {
+      if (!families.has(family)) families.set(family, new Map());
+      const byValue = families.get(family);
+      const value = Number(rem);
+      if (!byValue.has(value)) byValue.set(value, []);
+      byValue.get(value).push(`${family}-${step}`);
+    });
+  return families;
+};
+
+const steps = scaleSteps();
+const ROOT_FONT_SIZE = 16;
+
+/** `-1px` in the `spacing` family -> `ds.$spacing-minus-10`, when such a step exists. */
+const stepFor = (literal, family) => {
+  if (!family || !literal.endsWith('px')) return null;
+  const px = Number(literal.slice(0, -2));
+  if (!Number.isFinite(px) || px === 0) return null;
+  const scale = px < 0 && steps.has(`${family}-minus`) ? steps.get(`${family}-minus`) : steps.get(family);
+  const names = scale?.get(px / ROOT_FONT_SIZE);
+  return names?.length ? `ds.$${names[0]}` : null;
+};
+
+const stepsFor = (value, family) => [...new Set((value.match(/-?\d*\.?\d+px/g) ?? [])
+  .map((literal) => stepFor(literal, family))
+  .filter(Boolean))];
+
+/*
+ * The family is chosen by the property, not by the category: the same number exists in several
+ * scales at once, and `ds.$spacing-130` for a font size points the wrong way. The variable name is
+ * as good a hint as the property: `$pivot-grid-area-font-size` speaks for itself.
+ */
+const FAMILY_BY_PROPERTY = [
+  [/font-size/, 'font-size'],
+  [/line-height/, 'line-height'],
+  [/border-radius/, 'border-radius'],
+  [/border-width|outline-width|\bborder\b/, 'border-width'],
+];
+
+const familyFor = (hint, fallback) => (
+  FAMILY_BY_PROPERTY.find(([pattern]) => pattern.test(hint))?.[1] ?? fallback);
+
+/** A line of code -> what it is: a variable declaration, a property, a mixin argument. */
+const describe = (line) => {
+  const declaration = /^\s*(\$[\w-]+)\s*:\s*(.+?)\s*(?:!default)?\s*;/.exec(line);
+  if (declaration) return { kind: 'variable', name: declaration[1], value: declaration[2].replace(/\s*!default\s*$/, '') };
+  const property = /^\s*([a-z-]+)\s*:\s*(.+?)\s*;/.exec(line);
+  if (property) return { kind: 'property', name: property[1], value: property[2] };
+  const argument = /^\s*(\$[\w-]+)\s*:\s*(.+?),?\s*$/.exec(line);
+  if (argument) return { kind: 'argument', name: argument[1], value: argument[2].replace(/,$/, '') };
+  return { kind: 'other', name: '', value: line.trim() };
+};
+
+/**
+ * Where the value actually lands. Besides the direct `property: $variable`, two channels are
+ * counted, without which half of the size variables would look unused: a mixin argument, and a
+ * parameter injected into base through `@use … with (…)`.
+ */
+const usageIndex = new Map();
+const remember = (name, what) => {
+  if (!usageIndex.has(name)) usageIndex.set(name, new Set());
+  usageIndex.get(name).add(what);
+};
+sources.forEach((lines) => {
+  let inWith = false;
+  lines.forEach((line) => {
+    if (/@use\s+["'][^"']+["']\s+with\s*\(/.test(line)) inWith = true;
+    else if (inWith && /\);/.test(line)) inWith = false;
+
+    const declaration = /^\s*\$[\w-]+\s*:/.test(line);
+    const use = /^\s*([a-z-]+)\s*:\s*[^;]*?(\$[\w-]+)/.exec(line);
+    if (use && !declaration) remember(use[2], use[1]);
+
+    const injected = /^\s*\$[\w-]+\s*:\s*(\$[\w-]+)\s*,?\s*$/.exec(line);
+    if (injected) remember(injected[1], inWith ? 'injected into base' : 'mixin argument');
+
+    /* positional mixin argument: the variable name stands alone on the line */
+    const positional = /^\s*(\$[\w-]+)\s*,\s*$/.exec(line);
+    if (positional) remember(positional[1], 'mixin argument');
+
+    [...line.matchAll(/calc\([^;]*?(\$[\w-]+)/g)].forEach((m) => remember(m[1], 'in a calc'));
+  });
+});
+
+const collect = (marker, scale) => {
+  const rows = [];
+  sources.forEach((lines, file) => {
+    lines.forEach((line, index) => {
+      const at = line.indexOf('//');
+      if (at === -1 || !line.slice(at).includes(marker)) return;
+      const comment = line.slice(line.indexOf(marker) + marker.length).replace(/^:?\s*/, '').trim();
+      const code = line.slice(0, at).trimEnd() || line.trim();
+      const info = describe(code);
+      const applied = (info.kind === 'variable' ? [...(usageIndex.get(info.name) ?? [])] : [info.name])
+        .filter(Boolean);
+      rows.push({
+        file: relative(packageRoot, file),
+        line: index + 1,
+        widget: widgetOf(file),
+        note: comment,
+        applied,
+        steps: stepsFor(info.value, familyFor(`${info.name} ${applied.join(' ')}`, scale)),
+        ...info,
+      });
+    });
+  });
+  return rows;
+};
+
+const categories = MARKERS.map((entry) => ({ ...entry, rows: collect(entry.marker, entry.scale) }));
+
+/**
+ * The distinct values of a category are what design is asked about. The vocabulary's `literals`
+ * field decides what counts as a value: `steps` — the step the place sits on (`ds.$font-size-180`
+ * -> `font-size-180`: what is asked for is a role over the step, not a number), `px` — pixels only
+ * (in a px category the `100%` of `inset(calc(100% - 2px) …)` is an edge, not a size), `any` — any
+ * literal with a unit.
+ */
+const distinctValues = (rows, category) => {
+  const map = new Map();
+  const pick = (row) => {
+    if (category.literals === 'steps') {
+      const steps = [...row.value.matchAll(/\$([a-z-]+-\d+)/g)].map((m) => m[1]);
+      if (steps.length) return steps;
+      const weight = /^\s*(\d{3})\s*$/.exec(row.value);
+      return weight ? [weight[1]] : [row.value.trim()];
+    }
+    const literals = row.value.match(category.literals === 'px'
+      ? /-?\d*\.?\d+px/g
+      : /-?\d*\.?\d+(?:px|em|rem|%)/g);
+    return literals ?? [row.value.trim()];
+  };
+  rows.forEach((row) => {
+    [...new Set(pick(row))].forEach((value) => {
+      if (!map.has(value)) map.set(value, []);
+      map.get(value).push(row);
+    });
+  });
+  return [...map.entries()].sort((a, b) => b[1].length - a[1].length);
+};
+
+/* -------------------------------------------------------- the calc category */
+
+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;
+};
+
+const resolveVar = (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);
+      return map.get(name) ?? fallback ?? whole;
+    });
+  }
+  return out.trim();
+};
+
+const bundle = (name) => {
+  const file = join(cssDir, `dx.${name}.css`);
+  if (!existsSync(file)) throw new Error(`no bundle at ${file} — run build:themes-dev`);
+  const ast = postcss.parse(readFileSync(file, 'utf8'));
+  return { ast, map: rootMap(ast) };
+};
+
+const CALC_KINDS = [
+  {
+    id: 'zero',
+    title: 'identically zero',
+    why: 'the same variable is subtracted from itself: `(X − X − 0) / 2`. In the legacy themes those '
+      + 'calls took the numeric branch of the mixin and Sass folded the expression into `0`.',
+    test: (value) => {
+      const vars = value.match(/var\(--dxds-[a-z0-9-]+\)/g) ?? [];
+      return vars.length >= 2 && new Set(vars).size === 1 && /-\s*0\)/.test(value);
+    },
+  },
+  {
+    id: 'mixed',
+    title: 'token and px literal',
+    why: 'the derived value is computed from a token, but the correction stayed absolute — the value '
+      + 'no longer scales along with the step.',
+    test: (value) => /var\(--dxds-/.test(value) && /\d+px/.test(value),
+  },
+  {
+    id: 'scalar',
+    title: 'multiplied by a factor',
+    why: 'a magic multiplier with no matching step — a candidate either for a new step or for a token of its own.',
+    test: (value) => /\d*\.?\d+\s*\*\s*var\(--dxds-/.test(value) || /var\(--dxds-[a-z0-9-]+\)\s*\*\s*\d/.test(value),
+  },
+  {
+    id: 'tokens',
+    title: 'arithmetic over tokens',
+    why: 'an honest derived value: a difference or a fraction of steps. This is what var() is for — '
+      + 'when the scale changes the value follows on its own.',
+    test: () => true,
+  },
+];
+
+const calcPlaces = [];
+['light', 'dark'].forEach((mode) => {
+  const { ast, map } = bundle(`fluent-next.blue.${mode}`);
+  ast.walkRules((rule) => {
+    if (/(^|,)\s*:root\s*$/.test(rule.selector)) return;
+    rule.walkDecls((decl) => {
+      if (!decl.value.includes('calc(')) return;
+      const resolved = resolveVar(decl.value, map);
+      const kind = CALC_KINDS.find((entry) => entry.test(decl.value));
+      calcPlaces.push({
+        mode,
+        // combinators are spaced out: the production build strips those spaces and the dev build
+        // keeps them, and the report must not depend on which flavour produced the bundle
+        selector: rule.selectors[0].trim().replace(/\s*([>+~])\s*/g, ' $1 '),
+        prop: decl.prop,
+        value: decl.value.replace(/\s+/g, ' '),
+        resolved: resolved.replace(/\s+/g, ' '),
+        kind: kind.id,
+      });
+    });
+  });
+});
+
+const calcLight = calcPlaces.filter((place) => place.mode === 'light');
+const calcByKind = CALC_KINDS.map((kind) => {
+  const list = calcLight.filter((place) => place.kind === kind.id);
+  const formulas = new Map();
+  list.forEach((place) => {
+    if (!formulas.has(place.value)) formulas.set(place.value, []);
+    formulas.get(place.value).push(place);
+  });
+  return { ...kind, list, formulas: [...formulas.entries()].sort((a, b) => b[1].length - a[1].length) };
+});
+
+/* -------------------------------------------------------------- markdown */
+
+const escapePipes = (text) => String(text).replace(/\|/g, '\\|');
+
+const countOf = (entry) => (entry.source === 'bundle'
+  ? calcLight.length
+  : categories.find((candidate) => candidate.id === entry.id).rows.length);
+
+const md = () => {
+  const out = [];
+  out.push('<!-- Generated by node tools/review/scales.mjs. Do not edit by hand. -->');
+  out.push('# Scales: what did not land on a package step\n');
+  out.push('Design card: **[design#1555](https://github.com/DevExpress/design/issues/1555)** — the '
+    + 'review happens there; it does not block the release of the theme.\n');
+  out.push('Material for the design team. Every category is marked in the code, so this inventory is '
+    + 'reproducible and cannot drift from the sources. No unmarked fixed size is left in the theme: '
+    + '`tests/fluent-next-size-markers.test.ts` fails on the first px literal without a marker, so a '
+    + 'new place either gets a category or does not pass.\n');
+  out.push('The "step" column is computed: the value is converted to rem at a 16px root and looked up '
+    + 'in the package scale. A filled cell means "a step with exactly this value already exists", an '
+    + 'empty one means "no such step in the scale".\n');
+  out.push('| Category | Marker | Places | Question |');
+  out.push('|---|---|---|---|');
+  vocabulary.categories.forEach((entry) => {
+    out.push(`| ${entry.title} | \`${entry.marker ?? 'calc()'}\` | ${countOf(entry)} | ${entry.question} |`);
+  });
+  out.push('');
+
+  vocabulary.categories.forEach((entry) => {
+    if (entry.source === 'bundle') { out.push(...calcMd()); return; }
+    const category = categories.find((candidate) => candidate.id === entry.id);
+    out.push(`## ${category.title} — \`${category.marker}\`, ${category.rows.length}\n`);
+    out.push(`${category.why}\n`);
+    const values = distinctValues(category.rows, category);
+    out.push(`Distinct values: **${values.length}**. Most frequent: `
+      + `${values.slice(0, 12).map(([value, rows]) => `\`${value}\` ×${rows.length}`).join(', ')}.\n`);
+    const withStep = category.rows.filter((row) => row.steps.length).length;
+    if (category.scale) {
+      out.push(`A step with the same value exists for **${withStep}** of ${category.rows.length} `
+        + `(the scale family is chosen by the property, \`${category.scale}\` by default).\n`);
+    }
+    out.push('| Value | Where | What it is | Lands on | Step | File |');
+    out.push('|---|---|---|---|---|---|');
+    category.rows.forEach((row) => {
+      out.push(`| \`${escapePipes(row.value)}\` | ${row.widget} | ${row.kind === 'variable' ? `\`${row.name}\`` : row.kind} `
+        + `| ${row.applied.length ? row.applied.join(', ') : '—'} `
+        + `| ${row.steps.length ? row.steps.map((step) => `\`${step}\``).join(', ') : '—'} `
+        + `| \`${row.file}:${row.line}\` |`);
+    });
+    out.push('');
+  });
+  return out.join('\n');
+};
+
+const calcMd = () => {
+  const out = [];
+  out.push(`## ${CALC_CATEGORY.title} — calc(), ${calcLight.length} expressions per bundle\n`);
+  out.push('A token arrives in CSS as `var()`, so Sass can no longer fold the arithmetic: everything '
+    + 'that used to be computed at build time is now computed by the browser. For comparison, the '
+    + 'built legacy fluent has **50** `calc()` expressions and not one of them with a token.\n');
+  out.push('| Class | Expressions | Why |');
+  out.push('|---|---|---|');
+  calcByKind.forEach((kind) => out.push(`| ${kind.title} | ${kind.list.length} | ${kind.why} |`));
+  out.push('');
+  calcByKind.forEach((kind) => {
+    if (!kind.list.length) return;
+    out.push(`### ${kind.title} (${kind.list.length})\n`);
+    kind.formulas.forEach(([formula, list]) => {
+      out.push(`**\`${escapePipes(formula)}\`** — ${list.length} place${list.length === 1 ? '' : 's'}:\n`);
+      list.slice(0, 12).forEach((place) => out.push(`- \`${escapePipes(place.selector)}\` → \`${place.prop}\``));
+      if (list.length > 12) out.push(`- … ${list.length - 12} more`);
+      out.push('');
+    });
+  });
+  return out;
+};
+
+/* ------------------------------------------------------------------ HTML */
+
+const escape = (text) => String(text)
+  .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+
+const categorySection = (category) => {
+  const values = distinctValues(category.rows, category);
+  const withStep = category.rows.filter((row) => row.steps.length).length;
+  return `
+  <section class="card" id="${category.id}">
+    <header class="chead">
+      <h2>${escape(category.title)}<span class="count">${category.rows.length}</span></h2>
+      <p class="sub"><code>${escape(category.marker)}</code> — the marker in the code; distinct values
+        <b>${values.length}</b>${category.scale ? `; a step with the same value exists for <b>${withStep}</b>` : ''}</p>
+      <p class="sub"><b>Question:</b> ${escape(category.question)}. ${escape(category.why)}</p>
+    </header>
+    <div class="chips">${values.slice(0, 24).map(([value, rows]) => `
+      <span class="chip"><b>${escape(value)}</b><i>×${rows.length}</i></span>`).join('')}</div>
+    <div class="tablewrap"><table>
+      <thead><tr><th>Value</th><th>Widget</th><th>What it is</th><th>Lands on</th><th>Step</th><th>File</th></tr></thead>
+      <tbody>${category.rows.map((row) => `
+        <tr>
+          <td class="val"><code>${escape(row.value)}</code></td>
+          <td>${escape(row.widget)}</td>
+          <td class="what">${row.kind === 'variable' ? `<code>${escape(row.name)}</code>` : escape(row.kind)}</td>
+          <td class="props">${row.applied.length ? row.applied.map((p) => `<span class="prop">${escape(p)}</span>`).join(' ') : '—'}</td>
+          <td class="step">${row.steps.length ? row.steps.map((step) => `<code>${escape(step)}</code>`).join(' ') : '—'}</td>
+          <td class="file"><code>${escape(row.file)}:${row.line}</code></td>
+        </tr>`).join('')}
+      </tbody>
+    </table></div>
+  </section>`;
+};
+
+const html = () => `<!doctype html>
+<html lang="ru">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>fluent-next scales — material for the design team</title>
+<style>
+:root {
+  color-scheme: light dark;
+  --ink:#14171c; --ink-soft:#565e6b; --ink-faint:#858d9a; --page:#f4f6f8; --card:#fff;
+  --line:#e0e5ec; --line-soft:#eef1f5; --accent:#0f6cbd; --accent-soft:#e8f0fa;
+  --warn:#8a5a00; --warn-bg:#fdf3e0;
+  --sans:'Segoe UI',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
+  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
+}
+@media (prefers-color-scheme: dark) { :root { --ink:#e7eaef; --ink-soft:#a6aeba; --ink-faint:#79818e;
+  --page:#0f1216; --card:#171b21; --line:#272d36; --line-soft:#1e232a; --accent:#6aa9e6;
+  --accent-soft:#17242f; --warn:#e0ad5a; --warn-bg:#2a2317; } }
+:root[data-theme="dark"] { --ink:#e7eaef; --ink-soft:#a6aeba; --ink-faint:#79818e; --page:#0f1216;
+  --card:#171b21; --line:#272d36; --line-soft:#1e232a; --accent:#6aa9e6; --accent-soft:#17242f;
+  --warn:#e0ad5a; --warn-bg:#2a2317; }
+:root[data-theme="light"] { --ink:#14171c; --ink-soft:#565e6b; --ink-faint:#858d9a; --page:#f4f6f8;
+  --card:#fff; --line:#e0e5ec; --line-soft:#eef1f5; --accent:#0f6cbd; --accent-soft:#e8f0fa;
+  --warn:#8a5a00; --warn-bg:#fdf3e0; }
+* { box-sizing:border-box; }
+body { margin:0; background:var(--page); color:var(--ink); font:15px/1.55 var(--sans); }
+h1,h2,h3 { margin:0; font-weight:600; text-wrap:balance; }
+p { margin:0; }
+code { font-family:var(--mono); }
+:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
+header.top { background:var(--card); border-bottom:1px solid var(--line); padding:34px 28px 26px; }
+.inner { max-width:1180px; margin:0 auto; }
+.kicker { font:600 11px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }
+header.top h1 { font-size:clamp(25px,3.2vw,35px); letter-spacing:-.02em; margin-top:14px; }
+.lede { color:var(--ink-soft); max-width:72ch; margin-top:12px; }
+.wrap { max-width:1180px; margin:0 auto; padding:26px 28px 46px; display:flex; flex-direction:column; gap:18px; }
+section.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:22px;
+  display:flex; flex-direction:column; gap:14px; scroll-margin-top:20px; }
+h2 { font-size:19px; display:flex; align-items:baseline; gap:10px; }
+h2 .count { font:600 12px var(--mono); color:var(--ink-faint); }
+.sub { color:var(--ink-soft); max-width:76ch; font-size:14px; }
+.chips { display:flex; flex-wrap:wrap; gap:6px; }
+.chip { display:inline-flex; align-items:baseline; gap:6px; border:1px solid var(--line);
+  border-radius:999px; padding:4px 10px; font:12px var(--mono); }
+.chip i { font-style:normal; color:var(--ink-faint); font-size:11px; }
+.tablewrap { overflow-x:auto; border:1px solid var(--line-soft); border-radius:8px; max-height:520px; overflow-y:auto; }
+table { border-collapse:collapse; width:100%; font-size:13px; }
+thead th { position:sticky; top:0; background:var(--card); text-align:left; font:600 11px/1 var(--sans);
+  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); padding:9px 12px;
+  border-bottom:1px solid var(--line); }
+td { padding:7px 12px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
+tbody tr:last-child td { border-bottom:0; }
+td.val code { font-weight:600; }
+td.what code, td.file code { font-size:11.5px; color:var(--ink-soft); word-break:break-all; }
+td.step code { font-size:11.5px; color:var(--accent); white-space:nowrap; }
+.prop { display:inline-block; font:11px var(--mono); color:var(--ink-faint); border:1px solid var(--line);
+  border-radius:4px; padding:1px 5px; }
+.kinds { display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
+.kind { border:1px solid var(--line); border-radius:8px; padding:14px; display:flex; flex-direction:column; gap:6px; }
+.kind h3 { font-size:14.5px; display:flex; align-items:baseline; gap:8px; }
+.kind h3 b { font:600 18px var(--sans); font-variant-numeric:tabular-nums; }
+.kind p { font-size:12.5px; color:var(--ink-soft); }
+.kind.zero { border-color:var(--warn); background:var(--warn-bg); }
+.formula { border:1px solid var(--line-soft); border-radius:8px; overflow:hidden; }
+.formula summary { cursor:pointer; padding:9px 12px; display:flex; gap:10px; align-items:baseline;
+  list-style:none; background:var(--line-soft); }
+.formula summary::-webkit-details-marker { display:none; }
+.formula summary code { font-size:12px; word-break:break-all; }
+.formula summary .n { margin-left:auto; font:12px var(--mono); color:var(--ink-faint); }
+.formula ul { margin:0; padding:10px 12px 12px 30px; display:flex; flex-direction:column; gap:3px; }
+.formula li { font:11.5px var(--mono); color:var(--ink-soft); }
+nav.rail { display:flex; flex-wrap:wrap; gap:8px; }
+nav.rail a { text-decoration:none; color:var(--ink-soft); border:1px solid var(--line); border-radius:999px;
+  padding:5px 12px; font-size:13px; }
+nav.rail a:hover { color:var(--ink); border-color:var(--ink-faint); }
+@media print { body { background:#fff; } .tablewrap { max-height:none; } section.card { break-inside:avoid; } }
+</style>
+</head>
+<body>
+<header class="top"><div class="inner">
+  <p class="kicker">DevExtreme · fluent-next · material for the design team</p>
+  <h1>Scales: what did not land on a package step</h1>
+  <p class="lede">Categories of values that got neither a step nor a role during the migration. Each
+    one is marked in the code, so this inventory is reproducible by command and cannot drift from the
+    sources. The marker categories are collected from the theme sources, calc() from the built bundle,
+    because what matters there is how many expressions actually reach the browser. No unmarked fixed
+    size is left in the theme: the gate <code>tests/fluent-next-size-markers.test.ts</code> catches
+    them.</p>
+  <p class="lede">The "step" column is computed: the value is converted to rem at a 16px root and
+    looked up in the package scale, the family chosen by the property. A filled cell means "a step
+    with exactly this value already exists", an empty one means "no such step in the scale".</p>
+  <p class="lede"><b>Card: <a href="https://github.com/DevExpress/design/issues/1555">design#1555</a></b>
+    — the review happens there. It does not block the release: values off the scales stay literals,
+    and the card decides which of them deserve steps and roles.</p>
+  <nav class="rail" style="margin-top:18px">
+    ${vocabulary.categories.map((entry) => `<a href="#${entry.id}">${escape(entry.title)} · ${countOf(entry)}</a>`).join('')}
+  </nav>
+</div></header>
+
+<div class="wrap">
+  ${vocabulary.categories.map((entry) => (entry.source === 'bundle'
+    ? calcSection()
+    : categorySection(categories.find((candidate) => candidate.id === entry.id)))).join('')}
+</div>
+</body>
+</html>
+`;
+
+const calcSection = () => `
+  <section class="card" id="calc">
+    <header class="chead">
+      <h2>${escape(CALC_CATEGORY.title)} — <code>calc()</code><span class="count">${calcLight.length}</span></h2>
+      <p class="sub">A token arrives in CSS as <code>var()</code>, so Sass can no longer fold the
+        arithmetic: everything that used to be computed at build time is now computed by the browser.
+        For comparison, the built legacy fluent has <b>50</b> <code>calc()</code> expressions and not
+        one with a token. Below is the light bundle; the dark one has the same set.</p>
+    </header>
+    <div class="kinds">${calcByKind.map((kind) => `
+      <div class="kind${kind.id === 'zero' ? ' zero' : ''}">
+        <h3><b>${kind.list.length}</b> ${escape(kind.title)}</h3>
+        <p>${kind.why.replace(/`([^`]+)`/g, (_, code) => `<code>${escape(code)}</code>`)}</p>
+      </div>`).join('')}
+    </div>
+    ${calcByKind.filter((kind) => kind.list.length).map((kind) => `
+      <h3 style="margin-top:6px">${escape(kind.title)} — ${kind.list.length}</h3>
+      <div style="display:flex;flex-direction:column;gap:8px">${kind.formulas.map(([formula, list]) => `
+        <details class="formula">
+          <summary><code>${escape(formula)}</code><span class="n">${list.length}</span></summary>
+          <ul>${list.map((place) => `<li>${escape(place.selector)} → ${escape(place.prop)}</li>`).join('')}</ul>
+        </details>`).join('')}
+      </div>`).join('')}
+  </section>
+`;
+
+if (mdOnly) {
+  process.stdout.write(`${md()}\n`);
+} else {
+  writeFileSync(join(themeDir, 'SCALES.md'), `${md()}\n`);
+  writeFileSync(join(themeDir, 'SCALES.html'), html());
+  vocabulary.categories.forEach((entry) => {
+    if (entry.source === 'bundle') {
+      process.stdout.write(`${entry.title}: ${calcLight.length} per bundle — `
+        + `${calcByKind.map((kind) => `${kind.title} ${kind.list.length}`).join(', ')}\n`);
+      return;
+    }
+    const category = categories.find((candidate) => candidate.id === entry.id);
+    process.stdout.write(`${category.title}: ${category.rows.length} `
+      + `(distinct values ${distinctValues(category.rows, category).length})\n`);
+  });
+}
diff --git a/packages/devextreme-scss/tools/review/size-markers.json b/packages/devextreme-scss/tools/review/size-markers.json
new file mode 100644
index 000000000000..0b71c0469e5e
--- /dev/null
+++ b/packages/devextreme-scss/tools/review/size-markers.json
@@ -0,0 +1,144 @@
+{
+  "comment": [
+    "Size-marker vocabulary. One source, three consumers:",
+    "  tools/review/scales.mjs    — builds the SCALES.md / SCALES.html report, a section per entry;",
+    "  tools/review/px-audit.mjs  — the gate: a px literal with no marker does not pass",
+    "                               (tests/fluent-next-size-markers.test.ts runs it).",
+    "  tests/base-size-markers.test.ts  — the same scan over the shared layer scss/widgets/base/**, against a baseline: that layer cannot be marked in one go, so the count only ratchets down.",
+    "The report and the gate cannot drift: this list is the only one.",
+    "",
+    "Fields: id — section anchor; marker — the token in a `// <marker>: note` comment;",
+    "title/question/why — section copy; literals — what counts as a distinct value in the summary",
+    "(px — pixels only, any — any literal with a unit, steps — step names);",
+    "scale — the package scale family the report looks the value up in (null — do not look up);",
+    "source — where places come from (sources — from the code by marker, bundle — from the built",
+    "bundle).",
+    "",
+    "Add a category here rather than in code: the report and the gate pick it up on their own.",
+    "A marker name must not be a substring of a custom property name used in the theme — both",
+    "scanners match the marker as a substring of the comment (`dx-border-width` is unusable: the",
+    "theme declares `--dx-border-width`)."
+  ],
+  "categories": [
+    {
+      "id": "offscale",
+      "marker": "dx-offscale",
+      "source": "sources",
+      "title": "A. Sizes off the scales",
+      "question": "which values deserve a step",
+      "literals": "px",
+      "why": "A named theme size with no matching step in any relevant package scale: the value stayed a px literal.",
+      "scale": "spacing"
+    },
+    {
+      "id": "foreign",
+      "marker": "dx-foreign-scale",
+      "source": "sources",
+      "title": "A2. Sizes taken from another family's scale",
+      "question": "does the property's own scale deserve these steps",
+      "literals": "steps",
+      "why": "A length read from the spacing scale although the property has a scale of its own - a font size, a border width - because that scale has no step at the value. Unlike A the number is not a literal: it does sit on a scale, just not the one the property belongs to, so nothing looks wrong until you read which family the step came from. Unlike B a role could not be attached even if the package wanted one, because there is no step to attach it to. A value that DOES exist in the right family is not listed here - that is a plain mistake and gets fixed, not classified.",
+      "scale": "font-size"
+    },
+    {
+      "id": "norole",
+      "marker": "dx-no-semantic-role",
+      "source": "sources",
+      "title": "B. Step exists, role does not",
+      "question": "which steps deserve semantic roles",
+      "literals": "steps",
+      "why": "The value sits on a base scale step, but the package has no semantic role for this case — the theme reads the base scale directly.",
+      "scale": null
+    },
+    {
+      "id": "glyph",
+      "marker": "dx-icon-glyph-size",
+      "source": "sources",
+      "title": "B2. Icon glyph sizes",
+      "question": "answered on 262.23.0: the package sizes glyphs from spacing, so no icon scale is needed - and ours read font-size",
+      "literals": "steps",
+      "why": "A glyph is sized by a font-size step or by a fraction of the font size. Measured across all four package sets and all three densities: every icon size the package declares comes from the SPACING scale (icon.size = {spacing.120} / {spacing.160} / {spacing.200} ...), never from font-size. A dedicated icon scale does exist but is used once in the whole package (ai-chat.reasoning-header.icon.size = {icon.size-12px}). So the answer to the question is no, and the theme is the outlier. The move would be value-neutral: font-size-N and spacing-N resolve to the same rem at every step the theme uses (110 through 360, all twelve checked), so renaming the scale read changes no pixel.",
+      "scale": "font-size"
+    },
+    {
+      "id": "relative",
+      "marker": "dx-relative",
+      "source": "sources",
+      "title": "C. Proportional values",
+      "question": "do proportional values need DS roles",
+      "literals": "any",
+      "why": "The value is proportional to the font size or to the container. It cannot become an absolute token without changing behaviour: em is measured from the element's font size, a token from the root.",
+      "scale": null
+    },
+    {
+      "id": "calc",
+      "marker": null,
+      "source": "bundle",
+      "title": "D. Computed sizes",
+      "question": "what to compute at build time and what at runtime",
+      "literals": null,
+      "why": "A token arrives in CSS as var(), so Sass can no longer fold the arithmetic: derived values move to the browser.",
+      "scale": null
+    },
+    {
+      "id": "nudge",
+      "marker": "dx-px-nudge",
+      "source": "sources",
+      "title": "E. Pixel nudges",
+      "question": "should the correction follow the scale or stay absolute",
+      "literals": "px",
+      "why": "An absolute addition or subtraction on top of a token. When the scale moves the derived value follows and the correction does not — on a large step ±1px goes unnoticed, on a small one it is a visible fraction of the size.",
+      "scale": "spacing"
+    },
+    {
+      "id": "shadow",
+      "marker": "dx-shadow-geometry",
+      "source": "sources",
+      "title": "F. Shadow geometry",
+      "question": "a shadow role as a whole, rather than steps for its numbers",
+      "literals": "px",
+      "why": "Offset, blur and spread inside box-shadow. The package ships shadow geometry as px tokens of its own, so the question is not which step but whether a shadow role is wanted — the theme already takes the shadow colour from a role.",
+      "scale": null
+    },
+    {
+      "id": "linewidth",
+      "marker": "dx-line-width",
+      "source": "sources",
+      "title": "G. Border and line thickness",
+      "question": "put them on border-width steps, or must a hairline stay 1px",
+      "literals": "px",
+      "why": "The thickness of a border, of a hairline drawn with box-shadow, or of a strip revealed by clip-path. A matching step exists (border-width-10 = 1px), but a hairline is not meant to thicken along with the scale.",
+      "scale": "border-width"
+    },
+    {
+      "id": "required",
+      "marker": "dx-literal-required",
+      "source": "sources",
+      "title": "H. Must stay a number",
+      "question": "no decision needed — the value is frozen by the technique",
+      "literals": "px",
+      "why": "A @media or @container condition: var() is invalid there, so the value cannot become a token even once a step exists. When the step moves the condition stays where it is — worth knowing in advance.",
+      "scale": "spacing"
+    },
+    {
+      "id": "fixed",
+      "marker": "dx-fixed-size",
+      "source": "sources",
+      "title": "I. Fixed sizes written into rules",
+      "question": "does it deserve a step, or does the size stay fixed",
+      "literals": "px",
+      "why": "The number is written where it applies — in a rule, a mixin argument or a derived variable — with no name of its own. Unlike A, a step with that value usually does exist: the step column shows which one.",
+      "scale": "spacing"
+    },
+    {
+      "id": "structural",
+      "marker": "dx-structural",
+      "source": "sources",
+      "title": "K. Not a designed size",
+      "question": "no decision needed — the number is a technique, not a size",
+      "literals": "px",
+      "why": "An off-screen parking coordinate (top: -9999px), a one-pixel probe, a number chosen to be far outside the viewport rather than to be seen. Nobody designs it and no step can replace it: making it a token would only invite someone to tune it. Unlike H, the value is not frozen by a syntax — it is frozen by having no visual meaning.",
+      "scale": null
+    }
+  ]
+}
diff --git a/packages/devextreme-scss/tools/review/sizes.mjs b/packages/devextreme-scss/tools/review/sizes.mjs
new file mode 100644
index 000000000000..c5652b18f525
--- /dev/null
+++ b/packages/devextreme-scss/tools/review/sizes.mjs
@@ -0,0 +1,162 @@
+/*
+ * The sizes report: which step of which scale every size slot of the theme reads, and which steps
+ * the token package's component tier uses for the same component.
+ *
+ *   node tools/review/sizes.mjs           # summary to stdout
+ *   node tools/review/sizes.mjs --json    # machine-readable, for the gate
+ *
+ * The colour pass (tools/review/roles.mjs) reads `components/<set>/theme/fluent.json` and answers
+ * "is this the role the design system names for this slot". Nothing read `components/<set>/size/*`,
+ * so the other 1391 declarations of the theme - spacing, border widths, radii and the typography
+ * ramp - were never compared against anything at all.
+ *
+ * The comparison is deliberately coarser than the colour one. A colour slot has a family the name
+ * itself promises, so a mismatch is meaningful on one declaration. A size step has no such promise:
+ * `spacing.120` is not wrong for a padding the way `color-bg-*` is wrong for a `-content` slot. So
+ * this asks the one question that IS answerable per component: does the package ever use this step
+ * of this scale in this component? A "no" is a question - the step may be one the design system
+ * does not put in this component at all - and the report names the steps it does use.
+ *
+ * So this is a REPORT, and deliberately not a gate. The colour pass can be one because a family is
+ * a hard rule: a `-bg` slot reading a content role is wrong on its face, whoever wrote it. A step
+ * carries no such rule. The steps this pass lists as unused are mostly places where the package
+ * models a component more thinly than we do, and banking 170 of them with a reason each would
+ * produce a list that says "we picked a different step, which is fine" 170 times - a gate that
+ * cannot go red for a reason anybody would act on.
+ *
+ * One rule did come out of the pass and IS gated, in tests/fluent-next-size-markers.test.ts: a
+ * glyph is sized from spacing, not from a typography scale. That one is hard, because font-size-N
+ * and spacing-N resolve to the same rem at every step, so the wrong scale reads correct and only a
+ * gate will notice.
+ */
+import { readFileSync, readdirSync, existsSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { createRequire } from 'module';
+
+const here = dirname(fileURLToPath(import.meta.url));
+const packageRoot = join(here, '..', '..');
+const themeDir = join(packageRoot, 'scss', 'widgets', 'fluent-next');
+const require_ = createRequire(import.meta.url);
+
+const SETS = ['core', 'vnext', 'blazor', 'wpf'];
+const DENSITIES = ['fluent_small', 'fluent_medium', 'fluent_large'];
+// The folder-to-component map is the colour pass's; kept in one place so the two cannot disagree.
+const COMPONENT = JSON.parse(
+  readFileSync(join(here, 'roles.mjs'), 'utf8')
+    .match(/const COMPONENT = \{[\s\S]*?\n\};/)[0]
+    .replace('const COMPONENT = ', '')
+    .replace(/\n\};$/, '\n}')
+    .replace(/'/g, '"')
+    .replace(/(\w[\w-]*):/g, '"$1":')
+    .replace(/,(\s*[}\]])/g, '$1')
+    .replace(/^"const" COMPONENT = /, ''),
+);
+
+const tokensRoot = dirname(require_.resolve('@devexpress/design-tokens-internal/package.json'));
+const tokensVersion = JSON.parse(readFileSync(join(tokensRoot, 'package.json'), 'utf8')).version;
+
+// scale + step as the package spells them: {spacing.120} -> spacing/120, {font-size.base-sm} ->
+// font-size/base-sm. `global.` wrappers are unwrapped: {global.border-radius.default} is the
+// border-radius scale's `default` step.
+const refOf = (value) => {
+  const m = String(value).match(/^\{([a-z-]+(?:\.[a-z-]+)?)\.([a-z0-9-]+)\}$/);
+  if (!m) return null;
+  const scale = m[1].startsWith('global.') ? m[1].slice('global.'.length) : m[1];
+  return { scale, step: m[2] };
+};
+
+const packageSteps = new Map(); // component -> scale -> Set(step)
+for (const set of SETS) {
+  for (const density of DENSITIES) {
+    const file = join(tokensRoot, 'tokens', 'components', set, 'size', `${density}.json`);
+    if (!existsSync(file)) continue;
+    const walk = (node, path = []) => {
+      for (const key of Object.keys(node ?? {})) {
+        const value = node[key];
+        if (value && typeof value === 'object' && !('value' in value) && !('$value' in value)) {
+          walk(value, [...path, key]);
+          continue;
+        }
+        const ref = refOf(value.value ?? value.$value);
+        if (!ref) continue;
+        const component = path[0];
+        if (!packageSteps.has(component)) packageSteps.set(component, new Map());
+        const scales = packageSteps.get(component);
+        if (!scales.has(ref.scale)) scales.set(ref.scale, new Map());
+        const steps = scales.get(ref.scale);
+        if (!steps.has(ref.step)) steps.set(ref.step, new Set());
+        steps.get(ref.step).add(`${set}/${density.replace('fluent_', '')}`);
+      }
+    };
+    walk(JSON.parse(readFileSync(file, 'utf8')));
+  }
+}
+
+// Our side: every `ds.$<scale>-<step>` read inside a _sizes.scss, with the variable it feeds.
+const SCALES = ['spacing', 'border-width', 'border-radius', 'font-size', 'line-height', 'font-weight', 'letter-spacing'];
+const declarations = [];
+for (const folder of readdirSync(themeDir).sort()) {
+  const file = join(themeDir, folder, '_sizes.scss');
+  if (!existsSync(file)) continue;
+  const text = readFileSync(file, 'utf8');
+  for (const line of text.split('\n')) {
+    const decl = line.match(/^\$([a-z0-9-]+)\s*:\s*(.+?)(?:\s*!default)?;/);
+    if (!decl) continue;
+    const [, name, value] = decl;
+    for (const scale of SCALES) {
+      const re = new RegExp(`ds\\.\\$${scale}-([a-z0-9-]+)`, 'g');
+      for (const m of value.matchAll(re)) {
+        declarations.push({ folder, name, scale, step: m[1], value: value.trim() });
+      }
+    }
+  }
+}
+
+const stepsFor = (folder, scale) => {
+  const components = COMPONENT[folder] ?? [];
+  const found = new Map();
+  for (const component of components) {
+    const scales = packageSteps.get(component);
+    if (!scales?.has(scale)) continue;
+    for (const [step, where] of scales.get(scale)) {
+      if (!found.has(step)) found.set(step, new Set());
+      for (const w of where) found.get(step).add(w);
+    }
+  }
+  return found;
+};
+
+const findings = declarations.map((d) => {
+  const components = COMPONENT[d.folder] ?? [];
+  if (!components.length) return { ...d, verdict: 'no-counterpart' };
+  const steps = stepsFor(d.folder, d.scale);
+  if (!steps.size) return { ...d, verdict: 'scale-absent' };
+  if (steps.has(d.step)) return { ...d, verdict: 'agrees', where: [...steps.get(d.step)].sort() };
+  return { ...d, verdict: 'step-new', packageUsesHere: [...steps.keys()].sort() };
+});
+
+const verdicts = ['agrees', 'step-new', 'scale-absent', 'no-counterpart'];
+const summary = {
+  tokensVersion,
+  declarations: findings.length,
+  folders: new Set(findings.map((f) => f.folder)).size,
+  byVerdict: Object.fromEntries(verdicts.map((v) => [v, findings.filter((f) => f.verdict === v).length])),
+  byScale: Object.fromEntries(SCALES.map((s) => [s, findings.filter((f) => f.scale === s).length]).filter(([, n]) => n)),
+};
+
+if (process.argv.includes('--json')) {
+  console.log(JSON.stringify({ summary, findings }, null, 2));
+} else {
+  console.log(`size reads ${summary.declarations} in ${summary.folders} folders, package ${tokensVersion}`);
+  for (const v of verdicts) console.log(`  ${v.padEnd(16)} ${summary.byVerdict[v]}`);
+  console.log('\nby scale:');
+  for (const [scale, n] of Object.entries(summary.byScale)) console.log(`  ${scale.padEnd(16)} ${n}`);
+  const neu = findings.filter((f) => f.verdict === 'step-new');
+  const byFolder = {};
+  for (const f of neu) (byFolder[f.folder] ??= []).push(f);
+  console.log(`\nsteps the package does not use in this component (${neu.length}):`);
+  for (const [folder, rows] of Object.entries(byFolder).sort((a, b) => b[1].length - a[1].length).slice(0, 12)) {
+    console.log(`  ${String(rows.length).padStart(3)} ${folder}  e.g. ${rows[0].name} reads ${rows[0].scale}-${rows[0].step}; package uses ${rows[0].packageUsesHere.join(', ')}`);
+  }
+}
diff --git a/packages/devextreme-scss/tools/review/unread-tier.json b/packages/devextreme-scss/tools/review/unread-tier.json
new file mode 100644
index 000000000000..75053ba2fcc3
--- /dev/null
+++ b/packages/devextreme-scss/tools/review/unread-tier.json
@@ -0,0 +1,112 @@
+{
+  "comment": [
+    "--dx-* names the built fluent-next bundle declares and nothing in that bundle reads. The list is",
+    "the worklist for question 3 of reachability.mjs and is pinned by exact set equality: a name that",
+    "starts being read is banked with --update-unread, a name that goes dead fails the gate.",
+    "",
+    "What this measures, precisely: reads INSIDE the bundle. That is not the same as dead. The tier is",
+    "public API, so application CSS is a legitimate reader, and a fifth of the names here are read outside",
+    "it - by apps/demos, packages/devextreme/js or the base layer. --dx-font-size-sm and",
+    "--dx-font-size-heading-5 are set in the Chat demos' own stylesheets; the theme is not supposed to",
+    "read them. The other half of the contract is already measured elsewhere: publicSurfaceUnused in",
+    "tests/fluent-next-naming.test.ts scans those three trees, over the legacy tier. Two questions,",
+    "two gates - do not read either as the whole answer.",
+    "",
+    "The names read in neither place are the ones worth a decision, and they come in three kinds. Counts move with every wave - run the tool rather than trusting a number written here (16.09.2026: 87 names listed, 22 of them read outside the bundle, 65 read nowhere).",
+    "",
+    "Defects: the theme publishes a knob and no rule turns it (--dx-switch-box-shadow,",
+    "--dx-scheduler-appointment-15min-height). Some are leftovers of a rename that moved the read and",
+    "left the declaration - --dx-datagrid-row-alternation-bg beside a live --dx-grid-row-alternation-bg.",
+    "",
+    "Sass helpers the publisher exported by accident: the value was folded into a neighbour at build",
+    "time (--dx-tree-view-checkbox-offset composes $tree-view-select-all-item-padding) or has to stay",
+    "a Sass number because the base layer multiplies it (--dx-scheduler-left-column-width).",
+    "",
+    "Published constants, not knobs: --dx-font-size-heading-1..6 and --dx-font-size-xs..xl are declared",
+    "by all four themes for application markup. In fluent-next the same numbers also ship as",
+    "--dx-typography-heading-N-font-size, and THAT is the pair the theme reads - so these are a stable",
+    "constant to read, never a knob to turn. Worth saying out loud rather than deducing twice."
+  ],
+  "names": [
+    "--dx-border-radius",
+    "--dx-border-width",
+    "--dx-button-icon-margin",
+    "--dx-button-icon-size",
+    "--dx-button-icon-text-padding-inline-start",
+    "--dx-button-padding-block",
+    "--dx-button-padding-inline",
+    "--dx-calendar-legacy-width",
+    "--dx-check-box-indeterminate-icon-height",
+    "--dx-check-box-indeterminate-icon-width",
+    "--dx-color-border",
+    "--dx-color-danger",
+    "--dx-color-icon",
+    "--dx-color-link",
+    "--dx-color-main-bg",
+    "--dx-color-options-panel-bg",
+    "--dx-color-primary",
+    "--dx-color-separator",
+    "--dx-color-shadow",
+    "--dx-color-spin-icon",
+    "--dx-color-success",
+    "--dx-color-text",
+    "--dx-color-warning",
+    "--dx-component-color-bg",
+    "--dx-component-height",
+    "--dx-data-grid-group-panel-item-padding-block",
+    "--dx-datagrid-row-alternation-bg",
+    "--dx-diagram-image-icon-base-content",
+    "--dx-file-manager-file-actions-button-top-bottom-padding",
+    "--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-5",
+    "--dx-font-size-heading-6",
+    "--dx-font-size-icon",
+    "--dx-font-size-lg",
+    "--dx-font-size-md",
+    "--dx-font-size-sm",
+    "--dx-font-size-xl",
+    "--dx-font-size-xs",
+    "--dx-global-inline-widget-inner-height",
+    "--dx-grid-column-chooser-item-margin",
+    "--dx-grid-group-panel-item-margin-inline",
+    "--dx-grid-group-panel-message-line-height",
+    "--dx-grid-group-row-content",
+    "--dx-grid-hidden-border",
+    "--dx-grid-summary-bg",
+    "--dx-list-item-border-width",
+    "--dx-list-item-margin-inline",
+    "--dx-map-marker-tooltip-margin",
+    "--dx-menu-item-bg-hovered",
+    "--dx-menu-item-expanded-content",
+    "--dx-menu-item-line-height",
+    "--dx-menu-item-with-icon-padding-inline",
+    "--dx-pagination-page-padding-inline",
+    "--dx-popup-toolbar-item-padding-inline",
+    "--dx-progress-bar-range-indeterminate-bg",
+    "--dx-scheduler-appointment-15min-height",
+    "--dx-scheduler-appointment-20min-height",
+    "--dx-scheduler-appointment-25min-height",
+    "--dx-scheduler-dd-appointment-content-hovered",
+    "--dx-scheduler-left-column-width",
+    "--dx-slider-height",
+    "--dx-stepper-step-accent-bg-hovered",
+    "--dx-switch-box-shadow",
+    "--dx-switch-handle-on-box-shadow",
+    "--dx-switch-handle-on-box-shadow-blur",
+    "--dx-switch-handle-on-shadow",
+    "--dx-tabs-item-padding-inline",
+    "--dx-texteditor-color-label",
+    "--dx-texteditor-color-text",
+    "--dx-tree-list-expand-icon-size",
+    "--dx-tree-view-border-padding",
+    "--dx-tree-view-checkbox-offset",
+    "--dx-tree-view-container-with-border-offset",
+    "--dx-tree-view-item-padding-inline",
+    "--dx-validation-message-content-padding",
+    "--dx-validation-summary-margin-block-start"
+  ]
+}
diff --git a/packages/devextreme-scss/tools/sizes/inventory.mjs b/packages/devextreme-scss/tools/sizes/inventory.mjs
new file mode 100644
index 000000000000..7649e82ac1db
--- /dev/null
+++ b/packages/devextreme-scss/tools/sizes/inventory.mjs
@@ -0,0 +1,341 @@
+/*
+ * The inventory of fixed sizes in the SHARED layer scss/widgets/base/**.
+ *
+ *   node tools/sizes/inventory.mjs            # write the lists, print the summary
+ *   node tools/sizes/inventory.mjs --check    # read-only; exit 1 if a list on disk is stale
+ *   node tools/sizes/inventory.mjs --json     # read-only; the summary, machine-readable (jest uses this)
+ *
+ * The layer is compiled once per bundle, so a value written into it reaches generic, material,
+ * fluent and fluent-next at the same time. That is why the sizes are split in two, and the split is
+ * not a matter of taste:
+ *
+ *   theme-settable — the literal is the default of a `$x: … !default` declaration. The knob already
+ *                    exists: a theme passes its own value through `@use "…/base/x" with ($x: …)` and
+ *                    the other themes keep the default, byte for byte. Nothing in base has to change.
+ *   base-owned     — the literal is written where it applies: in a rule, a mixin body, a local
+ *                    variable with no `!default`, a calc(), a @media condition. There is no knob, so
+ *                    opening one means editing the shared layer, which is the base owners' call.
+ *
+ * The scan is tools/review/px-audit.mjs — the same module the gate and SCALES.md are built from, so
+ * the inventory cannot claim a different set of places than the gate enforces.
+ */
+
+import { readFileSync, readdirSync, writeFileSync } from 'fs';
+import { dirname, join, relative } from 'path';
+import { fileURLToPath } from 'url';
+
+import { scanPxLiterals } from '../review/px-audit.mjs';
+
+const here = dirname(fileURLToPath(import.meta.url));
+const packageRoot = join(here, '..', '..');
+const baseDir = join(packageRoot, 'scss', 'widgets', 'base');
+const themeDir = join(packageRoot, 'scss', 'widgets', 'fluent-next');
+const listsDir = join(here, 'lists');
+
+/* --------------------------------------------------------------- classifying */
+
+/*
+ * A category answers "why is there no knob here", because that decides the cost of making one:
+ *   local-var  — a `$x: 25px` with no `!default`; adding `!default` is the whole job.
+ *   mixin-arg  — inside a @mixin body or its call; module variables cannot reach it, a parameter can.
+ *   media      — a @media/@container condition; var() is invalid there, so no knob can ever exist.
+ *   structural — an off-screen parking coordinate, not a size anyone designs.
+ *   geometry   — box-shadow / outline / border / clip-path numbers, judged as a shape, not a step.
+ *   calc       — already inside a calc(); a knob has to keep the arithmetic valid for both forms.
+ *   inline     — a plain declaration, the ordinary case.
+ */
+/* A parking coordinate, not a size: nothing anyone designs is a thousand pixels across. */
+const OFF_SCREEN_PX = 1000;
+const isOffScreen = (code) => (code.match(/-?\d*\.?\d+px\b/g) ?? [])
+  .some((literal) => Math.abs(parseFloat(literal)) >= OFF_SCREEN_PX);
+const GEOMETRY = /^(?:box-shadow|outline|outline-offset|outline-width|border|border-\w+|border-\w+-\w+|clip|clip-path)\s*:/;
+
+const codeOf = (text) => {
+  const at = text.indexOf('//');
+  return (at === -1 ? text : text.slice(0, at)).trim();
+};
+
+const categoryOf = (code) => {
+  if (/^\$[\w-]+\s*:/.test(code)) return 'local-var';
+  if (code.includes('@media') || code.includes('@container')) return 'media';
+  if (code.startsWith('@include') || code.startsWith('@mixin')) return 'mixin-arg';
+  if (isOffScreen(code)) return 'structural';
+  if (GEOMETRY.test(code)) return 'geometry';
+  if (code.includes('calc(')) return 'calc';
+  return 'inline';
+};
+
+/*
+ * Lines inside a `@mixin name(…)` parameter list. A literal there is a knob too, even though it is
+ * not a `$x: … !default` declaration: the theme sets it by passing an argument, and the default is
+ * what every other theme keeps. An `@include` argument list is the opposite — a call site, not a
+ * knob — so only `@mixin` opens a signature here.
+ */
+const signatureCache = new Map();
+const mixinParameterLines = (file) => {
+  if (signatureCache.has(file)) return signatureCache.get(file);
+  const inside = new Set();
+  let depth = 0;
+  blankBlockComments(readFileSync(join(packageRoot, file), 'utf8')).split('\n').forEach((line, index) => {
+    const code = codeOf(line);
+    const opening = depth === 0 && /@mixin\b/.test(code);
+    if (!opening && depth === 0) return;
+    if (depth > 0) inside.add(index + 1);
+    depth += (code.match(/\(/g)?.length ?? 0) - (code.match(/\)/g)?.length ?? 0);
+    if (depth < 0) depth = 0;
+  });
+  signatureCache.set(file, inside);
+  return inside;
+};
+
+/** The widget a file belongs to: `_toast.scss` -> toast, `scheduler/views/_index.scss` -> scheduler. */
+const widgetOf = (file) => {
+  const [head, ...rest] = relative('scss/widgets/base', file).split('/');
+  return rest.length ? head : head.replace(/^_/, '').replace(/\.scss$/, '');
+};
+
+/* ------------------------------------------------- what the theme already sets */
+
+const scssFiles = (dir) => readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+  const full = join(dir, entry.name);
+  if (entry.isDirectory()) return scssFiles(full);
+  return entry.name.endsWith('.scss') ? [full] : [];
+});
+
+const blankBlockComments = (content) => content
+  .replace(/\/\*[\s\S]*?\*\//g, (comment) => comment.replace(/[^\n]/g, ' '));
+
+/*
+ * `@use "…/base/x" with (…)` is the only channel into the layer, and the block spans many lines with
+ * nested parens (`var(--dx-a, 4px)`), so it is read by balancing brackets. A one-line regex here
+ * silently under-reports: it finds a few dozen of the 300-odd names that are actually configured.
+ */
+const splitTopLevel = (body) => {
+  const parts = [];
+  let depth = 0;
+  let current = '';
+  [...body].forEach((character) => {
+    if (character === '(') depth += 1;
+    if (character === ')') depth -= 1;
+    if (character === ',' && depth === 0) {
+      parts.push(current);
+      current = '';
+      return;
+    }
+    current += character;
+  });
+  parts.push(current);
+  return parts;
+};
+
+const readThemeConfiguration = () => {
+  const setBy = new Map();
+  scssFiles(themeDir).forEach((file) => {
+    const content = blankBlockComments(readFileSync(file, 'utf8'));
+    [...content.matchAll(/@use\s+"([^"]*base[^"]*)"[^(\n]*with\s*\(/g)].forEach((match) => {
+      let depth = 1;
+      let at = match.index + match[0].length;
+      while (at < content.length && depth > 0) {
+        if (content[at] === '(') depth += 1;
+        if (content[at] === ')') depth -= 1;
+        at += 1;
+      }
+      const body = content.slice(match.index + match[0].length, at - 1).replace(/\/\/[^\n]*/g, '');
+      splitTopLevel(body).forEach((part) => {
+        const name = /^\s*\$([\w-]+)\s*:/.exec(part);
+        if (!name) return;
+        const value = part.slice(part.indexOf(':') + 1).trim().replace(/\s+/g, ' ');
+        setBy.set(name[1], {
+          file: relative(packageRoot, file),
+          value,
+        });
+      });
+    });
+  });
+  return setBy;
+};
+
+/* ------------------------------------------------------------------ the lists */
+
+const build = () => {
+  const { marked, unmarked } = scanPxLiterals(baseDir);
+  const places = [...marked, ...unmarked]
+    .sort((a, b) => a.file.localeCompare(b.file) || a.line - b.line);
+  const setBy = readThemeConfiguration();
+
+  const settable = [];
+  const owned = [];
+
+  places.forEach((place) => {
+    const code = codeOf(place.text);
+    const declaration = /^\$([\w-]+)\s*:/.exec(code);
+    const parameter = Boolean(declaration) && mixinParameterLines(place.file).has(place.line);
+    const isKnob = Boolean(declaration) && (code.includes('!default') || parameter);
+    const common = {
+      file: place.file,
+      line: place.line,
+      widget: widgetOf(place.file),
+      literals: place.literals,
+      occurrences: place.occurrences,
+      marker: place.marker,
+      text: place.text,
+    };
+
+    if (isKnob) {
+      const configured = setBy.get(declaration[1]);
+      settable.push({
+        ...common,
+        variable: declaration[1],
+        kind: parameter ? 'mixin-parameter' : 'module-variable',
+        status: parameter ? 'parameter' : (configured ? 'injected' : 'open'),
+        ...(configured && !parameter ? { setBy: configured.file, setTo: configured.value } : {}),
+      });
+      return;
+    }
+    owned.push({ ...common, category: categoryOf(code) });
+  });
+
+  return { settable, owned };
+};
+
+const tally = (rows, key) => rows.reduce((totals, row) => {
+  totals[row[key]] = (totals[row[key]] ?? 0) + row.occurrences;
+  return totals;
+}, {});
+
+const descending = (totals) => Object.fromEntries(
+  Object.entries(totals).sort(([, a], [, b]) => b - a),
+);
+
+const sum = (rows) => rows.reduce((total, row) => total + row.occurrences, 0);
+
+/* ------------------------------------------------------------------- reports */
+
+const GENERATED = 'GENERATED by tools/sizes/inventory.mjs — do not edit by hand. '
+  + 'Judgment calls belong in that script, not in this file.';
+
+const settableJson = (settable) => ({
+  $comment: [
+    GENERATED,
+    'Sizes the theme can set from outside without touching the shared layer: the literal is the '
+    + 'default of a `$x: … !default` declaration, so `@use "…/base/x" with ($x: …)` replaces it for '
+    + 'one theme and leaves the default — and every other theme — untouched.',
+    'kind "module-variable" — a `$x: … !default` declaration; "mixin-parameter" — a default in a '
+    + '`@mixin name(…)` signature, which a theme replaces by passing an argument.',
+    'status "injected" — fluent-next already passes a value; "open" — the knob exists and nobody '
+    + 'turns it; "parameter" — a mixin parameter, where the signature itself is the channel and there '
+    + 'is nothing to cross-check by name. An "open" row is theme-side work only.',
+    'The match is by variable name. A name declared in a nested module is only reachable once the '
+    + 'parent forwards it (see base/chat/_index.scss), which is why an "open" row can sit next to '
+    + 'injected ones from the same widget.',
+  ],
+  summary: {
+    occurrences: sum(settable),
+    variables: new Set(settable.map((row) => row.variable)).size,
+    injected: sum(settable.filter((row) => row.status === 'injected')),
+    open: sum(settable.filter((row) => row.status === 'open')),
+    parameters: sum(settable.filter((row) => row.status === 'parameter')),
+  },
+  places: settable,
+});
+
+const ownedJson = (owned) => ({
+  $comment: [
+    GENERATED,
+    'Sizes nailed into the shared layer: no `!default` declaration holds them, so opening one means '
+    + 'editing scss/widgets/base/** — which every theme compiles. Each place needs either a knob '
+    + '(and proof the other themes did not move) or a marker saying why it stays.',
+    'category — why there is no knob today: local-var (a $x with no !default), mixin-arg (inside a '
+    + '@mixin body or call), media (a @media condition, where var() is invalid), structural (an '
+    + 'off-screen parking coordinate, not a designed size), geometry (box-shadow / outline / border '
+    + '/ clip-path numbers), calc (already inside a calc()), inline (a plain declaration).',
+    'marker — the classification comment already on the line, from tools/review/size-markers.json.',
+  ],
+  summary: {
+    occurrences: sum(owned),
+    byCategory: descending(tally(owned, 'category')),
+    byWidget: descending(tally(owned, 'widget')),
+    unmarked: sum(owned.filter((row) => !row.marker)),
+    // The backlog proper: what still has neither a knob nor a marker. `byWidget` above counts the
+    // classified places too, so the two differ wherever a batch has already been through.
+    unmarkedByWidget: descending(tally(owned.filter((row) => !row.marker), 'widget')),
+  },
+  places: owned,
+});
+
+/* --------------------------------------------------------------------- output */
+
+/* The raw grep counts px inside comments too; the scan does not. Report the gap instead of hiding it. */
+const commentedOccurrences = () => {
+  const px = /-?\d*\.?\d+px\b/g;
+  return scssFiles(baseDir).reduce((total, file) => {
+    const content = readFileSync(file, 'utf8');
+    const inCode = blankBlockComments(content).split('\n')
+      .reduce((count, line) => count + (codeOf(line).match(px)?.length ?? 0), 0);
+    return total + ((content.match(px)?.length ?? 0) - inCode);
+  }, 0);
+};
+
+export const inventory = () => {
+  const { settable, owned } = build();
+  const comments = commentedOccurrences();
+  return {
+    comments,
+    settable: {
+      occurrences: sum(settable),
+      variables: new Set(settable.map((row) => row.variable)).size,
+      injected: sum(settable.filter((row) => row.status === 'injected')),
+      open: sum(settable.filter((row) => row.status === 'open')),
+      parameters: sum(settable.filter((row) => row.status === 'parameter')),
+    },
+    owned: {
+      occurrences: sum(owned),
+      unmarked: sum(owned.filter((row) => !row.marker)),
+      byCategory: descending(tally(owned, 'category')),
+      byWidget: descending(tally(owned.filter((row) => !row.marker), 'widget')),
+    },
+    artefacts: [
+      ['theme-settable.json', `${JSON.stringify(settableJson(settable), null, 2)}\n`],
+      ['base-owned.json', `${JSON.stringify(ownedJson(owned), null, 2)}\n`],
+    ],
+  };
+};
+
+if (process.argv[1] === fileURLToPath(import.meta.url)) {
+  const {
+    comments, settable, owned, artefacts,
+  } = inventory();
+  const check = process.argv.includes('--check');
+  const json = process.argv.includes('--json');
+
+  const stale = artefacts.filter(([name, content]) => {
+    try {
+      return readFileSync(join(listsDir, name), 'utf8') !== content;
+    } catch {
+      return true;
+    }
+  });
+  // --check and --json are read-only: the gate must not rewrite the tree it is judging.
+  if (!check && !json) artefacts.forEach(([name, content]) => writeFileSync(join(listsDir, name), content));
+
+  if (json) {
+    process.stdout.write(`${JSON.stringify({ comments, settable, owned }, null, 2)}\n`);
+  } else {
+    process.stdout.write([
+      `raw grep of scss/widgets/base: ${settable.occurrences + owned.occurrences + comments} px `
+      + `occurrences (${comments} of them inside comments)`,
+      `in code: ${settable.occurrences + owned.occurrences}`,
+      `  theme-settable ${settable.occurrences}  (injected ${settable.injected}, open ${settable.open}, `
+      + `mixin parameters ${settable.parameters})`,
+      `  base-owned     ${owned.occurrences}  ${Object.entries(owned.byCategory)
+        .map(([category, count]) => `${category} ${count}`).join(', ')}`,
+      `  of those still unclassified: ${owned.unmarked}`,
+      '',
+    ].join('\n'));
+  }
+
+  if (check && stale.length) {
+    process.stdout.write(`stale: ${stale.map(([name]) => name).join(', ')} — run node tools/sizes/inventory.mjs\n`);
+    process.exit(1);
+  }
+}
diff --git a/packages/devextreme-scss/tools/sizes/lists/base-owned.json b/packages/devextreme-scss/tools/sizes/lists/base-owned.json
new file mode 100644
index 000000000000..09301ddfd45f
--- /dev/null
+++ b/packages/devextreme-scss/tools/sizes/lists/base-owned.json
@@ -0,0 +1,2007 @@
+{
+  "$comment": [
+    "GENERATED by tools/sizes/inventory.mjs — do not edit by hand. Judgment calls belong in that script, not in this file.",
+    "Sizes nailed into the shared layer: no `!default` declaration holds them, so opening one means editing scss/widgets/base/** — which every theme compiles. Each place needs either a knob (and proof the other themes did not move) or a marker saying why it stays.",
+    "category — why there is no knob today: local-var (a $x with no !default), mixin-arg (inside a @mixin body or call), media (a @media condition, where var() is invalid), structural (an off-screen parking coordinate, not a designed size), geometry (box-shadow / outline / border / clip-path numbers), calc (already inside a calc()), inline (a plain declaration).",
+    "marker — the classification comment already on the line, from tools/review/size-markers.json."
+  ],
+  "summary": {
+    "occurrences": 217,
+    "byCategory": {
+      "inline": 92,
+      "geometry": 65,
+      "local-var": 35,
+      "calc": 9,
+      "structural": 8,
+      "mixin-arg": 6,
+      "media": 2
+    },
+    "byWidget": {
+      "colorView": 42,
+      "scheduler": 33,
+      "textEditor": 26,
+      "gridBase": 22,
+      "htmlEditor": 16,
+      "cardView": 15,
+      "pivotGrid": 11,
+      "ui": 8,
+      "scrollView": 5,
+      "dataGrid": 5,
+      "fileManager": 5,
+      "sortable": 4,
+      "treeList": 4,
+      "icon_fonts": 2,
+      "multiView": 2,
+      "resizable": 2,
+      "tagBox": 2,
+      "filterBuilder": 2,
+      "fileUploader": 1,
+      "pagination": 1,
+      "slider": 1,
+      "colorBox": 1,
+      "diagram": 1,
+      "gantt": 1,
+      "lookup": 1,
+      "popover": 1,
+      "stepper": 1,
+      "toolbar": 1,
+      "treeView": 1
+    },
+    "unmarked": 0,
+    "unmarkedByWidget": {}
+  },
+  "places": [
+    {
+      "file": "scss/widgets/base/_fileUploader.scss",
+      "line": 213,
+      "widget": "fileUploader",
+      "literals": [
+        "-6px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "margin-top: -6px; // dx-fixed-size: pulls the status text onto the progress line",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/_htmlEditor.scss",
+      "line": 20,
+      "widget": "htmlEditor",
+      "literals": [
+        "11px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "$resize-handle-size: 11px;",
+      "category": "local-var"
+    },
+    {
+      "file": "scss/widgets/base/_htmlEditor.scss",
+      "line": 21,
+      "widget": "htmlEditor",
+      "literals": [
+        "15px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "$touch-resize-handle-size: 15px; // dx-fixed-size: the touch variant of the same handle",
+      "category": "local-var"
+    },
+    {
+      "file": "scss/widgets/base/_htmlEditor.scss",
+      "line": 154,
+      "widget": "htmlEditor",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-structural",
+      "text": "min-height: 1px; // dx-structural: lets the flex item shrink below its content, not a designed height",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/_htmlEditor.scss",
+      "line": 161,
+      "widget": "htmlEditor",
+      "literals": [
+        "-100000px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-structural",
+      "text": "left: -100000px; // dx-structural: parks Quill's clipboard element off-screen",
+      "category": "structural"
+    },
+    {
+      "file": "scss/widgets/base/_htmlEditor.scss",
+      "line": 162,
+      "widget": "htmlEditor",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-structural",
+      "text": "height: 1px; // dx-structural: collapses the off-screen clipboard element, not a designed height",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/_htmlEditor.scss",
+      "line": 226,
+      "widget": "htmlEditor",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-line-width",
+      "text": "border: 1px solid #000; // dx-line-width: a table hairline; the colour beside it is hard-coded too",
+      "category": "geometry"
+    },
+    {
+      "file": "scss/widgets/base/_htmlEditor.scss",
+      "line": 356,
+      "widget": "htmlEditor",
+      "literals": [
+        "0.1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-structural",
+      "text": "height: 0.1px; // dx-structural: a non-zero height the placeholder needs, not a designed size",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/_htmlEditor.scss",
+      "line": 370,
+      "widget": "htmlEditor",
+      "literals": [
+        "35px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "min-height: 35px; // dx-fixed-size: the mention suggestion list keeps a row of space while filtering",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/_htmlEditor.scss",
+      "line": 379,
+      "widget": "htmlEditor",
+      "literals": [
+        "50px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "min-width: 50px; // dx-fixed-size: the narrowest the mention suggestion list may get",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/_htmlEditor.scss",
+      "line": 392,
+      "widget": "htmlEditor",
+      "literals": [
+        "360px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "min-width: 360px; // dx-fixed-size: the link/image dialog form width",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/_htmlEditor.scss",
+      "line": 417,
+      "widget": "htmlEditor",
+      "literals": [
+        "6px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "gap: 6px; // dx-fixed-size: gap between the AI dialog title icon and its text",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/_htmlEditor.scss",
+      "line": 424,
+      "widget": "htmlEditor",
+      "literals": [
+        "240px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "min-width: 240px; // dx-fixed-size: the same dialog form once the popup goes fullscreen",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/_htmlEditor.scss",
+      "line": 437,
+      "widget": "htmlEditor",
+      "literals": [
+        "3px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-line-width",
+      "text": "border-bottom: 3px solid transparent; // dx-line-width: the strip under the colour-format icon that shows the picked colour",
+      "category": "geometry"
+    },
+    {
+      "file": "scss/widgets/base/_htmlEditor.scss",
+      "line": 457,
+      "widget": "htmlEditor",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-line-width",
+      "text": "border: 1px dashed lightslategrey; // dx-line-width: hairline of the image resize frame",
+      "category": "geometry"
+    },
+    {
+      "file": "scss/widgets/base/_htmlEditor.scss",
+      "line": 468,
+      "widget": "htmlEditor",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-line-width",
+      "text": "border: 1px solid white; // dx-line-width: hairline around a resize handle",
+      "category": "geometry"
+    },
+    {
+      "file": "scss/widgets/base/_htmlEditor.scss",
+      "line": 524,
+      "widget": "htmlEditor",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-line-width",
+      "text": "border: 1px solid white; // dx-line-width: hairline around a resize handle",
+      "category": "geometry"
+    },
+    {
+      "file": "scss/widgets/base/_icon_fonts.scss",
+      "line": 313,
+      "widget": "icon_fonts",
+      "literals": [
+        "14px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-icon-glyph-size",
+      "text": "font: 14px/1 DXIcons; // stylelint-disable-line font-family-no-missing-generic-family-keyword, font-family-name-quotes -- dx-icon-glyph-size: the icon font's own size, no icon scale in the package",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/_icon_fonts.scss",
+      "line": 681,
+      "widget": "icon_fonts",
+      "literals": [
+        "14px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-icon-glyph-size",
+      "text": "font: 14px/1 DXIcons; // stylelint-disable-line font-family-no-missing-generic-family-keyword, font-family-name-quotes -- dx-icon-glyph-size: the icon font's own size, no icon scale in the package",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/_multiView.scss",
+      "line": 39,
+      "widget": "multiView",
+      "literals": [
+        "-9999px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-structural",
+      "text": "top: -9999px; // dx-structural: parks the hidden slide off-screen",
+      "category": "structural"
+    },
+    {
+      "file": "scss/widgets/base/_multiView.scss",
+      "line": 40,
+      "widget": "multiView",
+      "literals": [
+        "-9999px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-structural",
+      "text": "left: -9999px; // dx-structural: parks the hidden slide off-screen",
+      "category": "structural"
+    },
+    {
+      "file": "scss/widgets/base/_pagination.scss",
+      "line": 25,
+      "widget": "pagination",
+      "literals": [
+        "8px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "$pagination-paddings: 8px; // dx-fixed-size: the shared source of the two fallbacks below",
+      "category": "local-var"
+    },
+    {
+      "file": "scss/widgets/base/_resizable.scss",
+      "line": 2,
+      "widget": "resizable",
+      "literals": [
+        "3px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "$one-side-handle-size: 3px + $handle-offset; // dx-fixed-size: handle thickness ($handle-offset is 0)",
+      "category": "local-var"
+    },
+    {
+      "file": "scss/widgets/base/_resizable.scss",
+      "line": 3,
+      "widget": "resizable",
+      "literals": [
+        "6px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "$two-side-handle-size: 6px + $handle-offset; // dx-fixed-size: handle thickness ($handle-offset is 0)",
+      "category": "local-var"
+    },
+    {
+      "file": "scss/widgets/base/_scrollView.scss",
+      "line": 54,
+      "widget": "scrollView",
+      "literals": [
+        "-20px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "margin-left: -20px; // dx-fixed-size: centres the android pull-down on the pocket",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/_scrollView.scss",
+      "line": 153,
+      "widget": "scrollView",
+      "literals": [
+        "-15px",
+        "20px",
+        "15px"
+      ],
+      "occurrences": 3,
+      "marker": "dx-fixed-size",
+      "text": "margin: -15px 20px 0 15px; // dx-fixed-size: centres the indicator on its own half-height",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/_scrollView.scss",
+      "line": 234,
+      "widget": "scrollView",
+      "literals": [
+        "-20px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "margin-top: -20px; // dx-fixed-size: pulls the text onto the indicator's line",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/_slider.scss",
+      "line": 5,
+      "widget": "slider",
+      "literals": [
+        "7px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "$slider-tooltip-arrow-height: 7px; // dx-fixed-size: feeds dx-popover-arrow-size, which divides by sqrt(2)",
+      "category": "local-var"
+    },
+    {
+      "file": "scss/widgets/base/_sortable.scss",
+      "line": 14,
+      "widget": "sortable",
+      "literals": [
+        "1px",
+        "3px"
+      ],
+      "occurrences": 2,
+      "marker": "dx-shadow-geometry",
+      "text": "0 1px 3px $sortable-clone-shadow-color-first,",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/_sortable.scss",
+      "line": 15,
+      "widget": "sortable",
+      "literals": [
+        "6px",
+        "8px"
+      ],
+      "occurrences": 2,
+      "marker": "dx-shadow-geometry",
+      "text": "0 6px 8px $sortable-clone-shadow-color-second !default;",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/_tagBox.scss",
+      "line": 15,
+      "widget": "tagBox",
+      "literals": [
+        "0.1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-structural",
+      "text": "width: 0.1px; // T393423, T437866 -- dx-structural: a non-zero width the browsers need, not a designed size",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/_tagBox.scss",
+      "line": 43,
+      "widget": "tagBox",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-px-nudge",
+      "text": "max-width: calc(100% - 1px); // dx-px-nudge: a pixel off the full width so the tag never overflows",
+      "category": "calc"
+    },
+    {
+      "file": "scss/widgets/base/_ui.scss",
+      "line": 13,
+      "widget": "ui",
+      "literals": [
+        "-10px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-structural",
+      "text": "top: -10px; // dx-structural: parks the hidden input off-screen",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/_ui.scss",
+      "line": 14,
+      "widget": "ui",
+      "literals": [
+        "-10px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-structural",
+      "text": "left: -10px; // dx-structural: parks the hidden input off-screen",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/_ui.scss",
+      "line": 41,
+      "widget": "ui",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-structural",
+      "text": "height: 1px; // dx-structural: the screen-reader-only clipping box, not a designed size",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/_ui.scss",
+      "line": 42,
+      "widget": "ui",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-structural",
+      "text": "width: 1px; // dx-structural: the screen-reader-only clipping box, not a designed size",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/_ui.scss",
+      "line": 226,
+      "widget": "ui",
+      "literals": [
+        "150px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "transform: translate3d(0, 150px, 0); // dx-fixed-size: how far the android pop animation travels",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/_ui.scss",
+      "line": 348,
+      "widget": "ui",
+      "literals": [
+        "-10px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "transform: rotate3d(1, 0, 0, 10deg) translate3d(0, -10px, 0) scale3d(1.1, 1.1, 1.1); // dx-fixed-size: how far the 3d drop animation travels",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/_ui.scss",
+      "line": 362,
+      "widget": "ui",
+      "literals": [
+        "-10px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "transform: translate3d(0, -10px, 0) scale3d(1.1, 1.1, 1.1); // dx-fixed-size: how far the fade drop animation travels",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/_ui.scss",
+      "line": 376,
+      "widget": "ui",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "transform: translate3d(0, 10px, 0) scale3d(1.1, 1.1, 1.1); // dx-fixed-size: how far the fade rise animation travels",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/cardView/content_view/content/card/_index.scss",
+      "line": 22,
+      "widget": "cardView",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "outline: 2px solid; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with",
+      "category": "geometry"
+    },
+    {
+      "file": "scss/widgets/base/cardView/content_view/content/card/_index.scss",
+      "line": 24,
+      "widget": "cardView",
+      "literals": [
+        "-2px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "outline-offset: -2px; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with",
+      "category": "geometry"
+    },
+    {
+      "file": "scss/widgets/base/cardView/content_view/content/card/header/_index.scss",
+      "line": 10,
+      "widget": "cardView",
+      "literals": [
+        "12px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "padding: 0 12px; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/cardView/content_view/content/card/header/_index.scss",
+      "line": 42,
+      "widget": "cardView",
+      "literals": [
+        "20px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "width: 20px; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/cardView/content_view/content/card/header/_index.scss",
+      "line": 43,
+      "widget": "cardView",
+      "literals": [
+        "20px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "height: 20px; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/cardView/content_view/no_data/_index.scss",
+      "line": 10,
+      "widget": "cardView",
+      "literals": [
+        "999px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "border-radius: 999px; // dx-fixed-size: a pill radius; the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with",
+      "category": "geometry"
+    },
+    {
+      "file": "scss/widgets/base/cardView/header_panel/_index.scss",
+      "line": 10,
+      "widget": "cardView",
+      "literals": [
+        "6px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "$sortable-side-offset: 6px; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with",
+      "category": "local-var"
+    },
+    {
+      "file": "scss/widgets/base/cardView/header_panel/_index.scss",
+      "line": 50,
+      "widget": "cardView",
+      "literals": [
+        "4px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "gap: 4px; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/cardView/header_panel/item/_index.scss",
+      "line": 9,
+      "widget": "cardView",
+      "literals": [
+        "4px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "gap: 4px; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/cardView/header_panel/item/_index.scss",
+      "line": 55,
+      "widget": "cardView",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "outline: 2px solid; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with",
+      "category": "geometry"
+    },
+    {
+      "file": "scss/widgets/base/cardView/header_panel/item/_index.scss",
+      "line": 57,
+      "widget": "cardView",
+      "literals": [
+        "-2px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "outline-offset: -2px; // dx-fixed-size: the base/cardView chain is not configurable from a theme yet: nothing in it is passed through @use ... with",
+      "category": "geometry"
+    },
+    {
+      "file": "scss/widgets/base/cardView/header_panel/item/_index.scss",
+      "line": 92,
+      "widget": "cardView",
+      "literals": [
+        "1px",
+        "3px"
+      ],
+      "occurrences": 2,
+      "marker": "dx-shadow-geometry",
+      "text": "0 1px 3px $cardview-header-panel__item--dragged-box-shadow-color,",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/cardView/header_panel/item/_index.scss",
+      "line": 93,
+      "widget": "cardView",
+      "literals": [
+        "6px",
+        "8px"
+      ],
+      "occurrences": 2,
+      "marker": "dx-shadow-geometry",
+      "text": "0 6px 8px $cardview-header-panel__item--dragged-box-shadow-color",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/colorBox/_index.scss",
+      "line": 23,
+      "widget": "colorBox",
+      "literals": [
+        "25px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "max-width: calc(100% - 25px); // dx-fixed-size: room the colour preview and its gap take from the placeholder",
+      "category": "calc"
+    },
+    {
+      "file": "scss/widgets/base/colorView/_index.scss",
+      "line": 16,
+      "widget": "colorView",
+      "literals": [
+        "28px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "$colorview-palette-handle-size: 28px; // dx-fixed-size: diameter of the round palette handle, drawn as rings at 6/7/12/13px",
+      "category": "local-var"
+    },
+    {
+      "file": "scss/widgets/base/colorView/_index.scss",
+      "line": 19,
+      "widget": "colorView",
+      "literals": [
+        "36px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "$colorview-handle-first-side-size: 36px; // dx-fixed-size: long side of the scale handles, drawn by the inset shadows",
+      "category": "local-var"
+    },
+    {
+      "file": "scss/widgets/base/colorView/_index.scss",
+      "line": 20,
+      "widget": "colorView",
+      "literals": [
+        "17px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "$colorview-handle-second-side-size: 17px; // dx-fixed-size: short side of the scale handles, drawn by the inset shadows",
+      "category": "local-var"
+    },
+    {
+      "file": "scss/widgets/base/colorView/_index.scss",
+      "line": 84,
+      "widget": "colorView",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-line-width",
+      "text": "padding: 1px 0; // dx-line-width: room for the 1px hairline ring the cells inside carry, which overflow: hidden would clip",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/colorView/_index.scss",
+      "line": 120,
+      "widget": "colorView",
+      "literals": [
+        "-7px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-px-nudge",
+      "text": "left: -7px; // dx-px-nudge: centres the handle across the hue scale, counting its own border",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/colorView/_index.scss",
+      "line": 126,
+      "widget": "colorView",
+      "literals": [
+        "-6px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-px-nudge",
+      "text": "top: -6px; // dx-px-nudge: centres the handle across the alpha scale, counting its own border",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/colorView/_index.scss",
+      "line": 144,
+      "widget": "colorView",
+      "literals": [
+        "16px"
+      ],
+      "occurrences": 2,
+      "marker": "dx-fixed-size",
+      "text": "background-size: 16px 16px; // dx-fixed-size: tile of the transparency checkerboard, drawn by two offset gradients",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/colorView/_index.scss",
+      "line": 145,
+      "widget": "colorView",
+      "literals": [
+        "8px"
+      ],
+      "occurrences": 2,
+      "marker": "dx-fixed-size",
+      "text": "background-position: 0 0, 8px 8px; // dx-fixed-size: half the tile, which is what makes the two gradients read as a checkerboard",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/colorView/_index.scss",
+      "line": 149,
+      "widget": "colorView",
+      "literals": [
+        "6px",
+        "8px",
+        "14px"
+      ],
+      "occurrences": 3,
+      "marker": "dx-fixed-size",
+      "text": "background-position: 0 6px, 8px 14px; // dx-fixed-size: the same checkerboard, shifted to sit inside the alpha scale",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/colorView/_mixins.scss",
+      "line": 3,
+      "widget": "colorView",
+      "literals": [
+        "5px",
+        "6px",
+        "7px",
+        "12px",
+        "13px"
+      ],
+      "occurrences": 5,
+      "marker": "dx-fixed-size",
+      "text": "background: radial-gradient(transparent 5px, $handle-border-color 6px, $handle-color 7px, $handle-color 12px, $handle-border-color 13px); // dx-fixed-size: the handle is drawn, not laid out — a transparent core to 5px, a 1px ring at 6px, fill to 12px and a 1px ring at 13px, inside the 28px diameter",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/colorView/_mixins.scss",
+      "line": 4,
+      "widget": "colorView",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 2,
+      "marker": "dx-shadow-geometry",
+      "text": "box-shadow: 0 1px 1px 0 $handle-border-color; // dx-shadow-geometry: lifts the round handle off the palette",
+      "category": "geometry"
+    },
+    {
+      "file": "scss/widgets/base/colorView/_mixins.scss",
+      "line": 8,
+      "widget": "colorView",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-line-width",
+      "text": "border: 1px solid; // dx-line-width: hairline outline of the handle",
+      "category": "geometry"
+    },
+    {
+      "file": "scss/widgets/base/colorView/_mixins.scss",
+      "line": 10,
+      "widget": "colorView",
+      "literals": [
+        "-5px",
+        "3px",
+        "5px",
+        "-6px",
+        "1px",
+        "4px",
+        "6px"
+      ],
+      "occurrences": 10,
+      "marker": "dx-shadow-geometry",
+      "text": "box-shadow: inset -5px 0 0 3px $handle-color, inset 5px 0 0 3px $handle-color, inset -6px 0 1px 4px $handle-border-color, inset 6px 0 1px 4px $handle-border-color; // dx-shadow-geometry: the grip is drawn entirely with inset shadows — 5px bars inset from both sides, each edged by a 1px ring at 6px",
+      "category": "geometry"
+    },
+    {
+      "file": "scss/widgets/base/colorView/_mixins.scss",
+      "line": 14,
+      "widget": "colorView",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-line-width",
+      "text": "border: 1px solid; // dx-line-width: hairline outline of the handle",
+      "category": "geometry"
+    },
+    {
+      "file": "scss/widgets/base/colorView/_mixins.scss",
+      "line": 16,
+      "widget": "colorView",
+      "literals": [
+        "-5px",
+        "3px",
+        "5px",
+        "-6px",
+        "1px",
+        "4px",
+        "6px"
+      ],
+      "occurrences": 10,
+      "marker": "dx-shadow-geometry",
+      "text": "box-shadow: inset 0 -5px 0 3px $handle-color, inset 0 5px 0 3px $handle-color, inset 0 -6px 1px 4px $handle-border-color, inset 0 6px 1px 4px $handle-border-color; // dx-shadow-geometry: the same grip turned 90deg for the horizontal scale",
+      "category": "geometry"
+    },
+    {
+      "file": "scss/widgets/base/dataGrid/_index.scss",
+      "line": 153,
+      "widget": "dataGrid",
+      "literals": [
+        "-2px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "outline-offset: -2px; // dx-fixed-size: the gridBase tier already paints this across the family; a widget-scoped name would collide under the other grid roots",
+      "category": "geometry"
+    },
+    {
+      "file": "scss/widgets/base/dataGrid/_index.scss",
+      "line": 189,
+      "widget": "dataGrid",
+      "literals": [
+        "14px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "@include dx-icon-sizing(14px); // dx-fixed-size: the gridBase tier already paints this across the family; a widget-scoped name would collide under the other grid roots",
+      "category": "mixin-arg"
+    },
+    {
+      "file": "scss/widgets/base/dataGrid/_index.scss",
+      "line": 320,
+      "widget": "dataGrid",
+      "literals": [
+        "21px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "@include dx-icon-sizing(21px); // dx-fixed-size: the gridBase tier already paints this across the family; a widget-scoped name would collide under the other grid roots",
+      "category": "mixin-arg"
+    },
+    {
+      "file": "scss/widgets/base/dataGrid/_index.scss",
+      "line": 384,
+      "widget": "dataGrid",
+      "literals": [
+        "-1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-px-nudge",
+      "text": "outline-offset: -1px; // dx-px-nudge: a one-pixel inset for the sticky-column overlay",
+      "category": "geometry"
+    },
+    {
+      "file": "scss/widgets/base/dataGrid/layout/cell.scss",
+      "line": 283,
+      "widget": "dataGrid",
+      "literals": [
+        "-2px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "outline-offset: -2px; // dx-fixed-size: the gridBase tier already paints this across the family; a widget-scoped name would collide under the other grid roots",
+      "category": "geometry"
+    },
+    {
+      "file": "scss/widgets/base/diagram/_index.scss",
+      "line": 178,
+      "widget": "diagram",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-px-nudge",
+      "text": "width: calc(100% - 2px) !important; // stylelint-disable-line declaration-no-important -- dx-px-nudge: 2px shaved off a full-width popup",
+      "category": "calc"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 88,
+      "widget": "fileManager",
+      "literals": [
+        "431px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-literal-required",
+      "text": "@media (min-width: 431px) { // dx-literal-required: a media condition, var() is invalid here",
+      "category": "media"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 303,
+      "widget": "fileManager",
+      "literals": [
+        "-5000px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-structural",
+      "text": "top: -5000px; // dx-structural: parks the container off-screen until it is positioned",
+      "category": "structural"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 304,
+      "widget": "fileManager",
+      "literals": [
+        "-5000px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-structural",
+      "text": "left: -5000px; // dx-structural: parks the container off-screen until it is positioned",
+      "category": "structural"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 309,
+      "widget": "fileManager",
+      "literals": [
+        "-5000px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-structural",
+      "text": "top: -5000px; // dx-structural: parks the container off-screen until it is positioned",
+      "category": "structural"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 310,
+      "widget": "fileManager",
+      "literals": [
+        "-5000px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-structural",
+      "text": "left: -5000px; // dx-structural: parks the container off-screen until it is positioned",
+      "category": "structural"
+    },
+    {
+      "file": "scss/widgets/base/filterBuilder/_common.scss",
+      "line": 79,
+      "widget": "filterBuilder",
+      "literals": [
+        "-7px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "margin-top: -7px; // dx-fixed-size: pulls the row onto the group line",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/filterBuilder/_common.scss",
+      "line": 80,
+      "widget": "filterBuilder",
+      "literals": [
+        "-4px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "margin-bottom: -4px; // dx-fixed-size: pulls the row onto the group line",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/gantt/_index.scss",
+      "line": 60,
+      "widget": "gantt",
+      "literals": [
+        "-1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-px-nudge",
+      "text": "margin-top: -1px; // dx-px-nudge: a one-pixel correction on top of the row height",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_index.scss",
+      "line": 25,
+      "widget": "gridBase",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 4,
+      "marker": "dx-structural",
+      "text": "clip: rect(1px, 1px, 1px, 1px); // dx-structural: clips the a11y live region to nothing while keeping it rendered — the NOTE above; not a size",
+      "category": "geometry"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_index.scss",
+      "line": 37,
+      "widget": "gridBase",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "margin-right: 5px !important; // stylelint-disable-line declaration-no-important -- dx-fixed-size: legacy compat helper class, kept for the Foundation layout below",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_index.scss",
+      "line": 55,
+      "widget": "gridBase",
+      "literals": [
+        "-1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-px-nudge",
+      "text": "margin-top: -1px; // dx-px-nudge: pulls the pager up by one border so its top edge overlaps the grid bottom edge",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_index.scss",
+      "line": 86,
+      "widget": "gridBase",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-px-nudge",
+      "text": "padding-top: 1px; // dx-px-nudge: lifts the first submenu row off the menu border",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_index.scss",
+      "line": 314,
+      "widget": "gridBase",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-structural",
+      "text": "max-width: 10px; // dx-structural: deliberately tiny so the table sizes to its columns rather than the container — the fixed variant below resets it to none",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_index.scss",
+      "line": 431,
+      "widget": "gridBase",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-line-width",
+      "text": "border: 2px solid transparent; // dx-line-width: thickness of the invalid-cell ring, drawn on a pseudo-element",
+      "category": "geometry"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_index.scss",
+      "line": 433,
+      "widget": "gridBase",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-px-nudge",
+      "text": "left: 1px; // dx-px-nudge: insets that ring by the cell border on the left",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_index.scss",
+      "line": 481,
+      "widget": "gridBase",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-structural",
+      "text": "min-height: 1px; // dx-structural: one-pixel floor so the headers block keeps layout presence when it has no rows; not a designed height",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_index.scss",
+      "line": 557,
+      "widget": "gridBase",
+      "literals": [
+        "-1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-px-nudge",
+      "text": "top: -1px; // dx-px-nudge: pulls the focus ring out over the cell border",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_index.scss",
+      "line": 558,
+      "widget": "gridBase",
+      "literals": [
+        "-1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-px-nudge",
+      "text": "bottom: -1px; // dx-px-nudge: pulls the focus ring out over the cell border",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_index.scss",
+      "line": 559,
+      "widget": "gridBase",
+      "literals": [
+        "-1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-px-nudge",
+      "text": "left: -1px; // dx-px-nudge: pulls the focus ring out over the cell border",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_index.scss",
+      "line": 560,
+      "widget": "gridBase",
+      "literals": [
+        "-1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-px-nudge",
+      "text": "right: -1px; // dx-px-nudge: pulls the focus ring out over the cell border",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_index.scss",
+      "line": 567,
+      "widget": "gridBase",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-line-width",
+      "text": "border-top: 1px solid transparent; // dx-line-width: hairline placeholder keeping the range-end input aligned with the range-start one",
+      "category": "geometry"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_index.scss",
+      "line": 661,
+      "widget": "gridBase",
+      "literals": [
+        "9px",
+        "6px",
+        "8px"
+      ],
+      "occurrences": 4,
+      "marker": "dx-px-nudge",
+      "text": "padding: 9px 6px 8px 6px; // dx-px-nudge: +1px on each side of the resting padding above, compensating the border the disabled item loses on hover",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_index.scss",
+      "line": 956,
+      "widget": "gridBase",
+      "literals": [
+        "-2px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-px-nudge",
+      "text": "margin-right: -2px; // dx-px-nudge: RTL mirror — pulls the menu out by its own border",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/layout/aiChat/_mixins.scss",
+      "line": 47,
+      "widget": "gridBase",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-line-width",
+      "text": "border-width: 1px; // dx-line-width: hairline border of the incoming message bubble",
+      "category": "geometry"
+    },
+    {
+      "file": "scss/widgets/base/lookup/_index.scss",
+      "line": 10,
+      "widget": "lookup",
+      "literals": [
+        "45px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "height: calc(100% - 45px); // dx-fixed-size: the height the popup toolbar takes from the list",
+      "category": "calc"
+    },
+    {
+      "file": "scss/widgets/base/pivotGrid/_common.scss",
+      "line": 238,
+      "widget": "pivotGrid",
+      "literals": [
+        "-9999px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-structural",
+      "text": "top: -9999px; // dx-structural: parks the scrollbar probe off-screen",
+      "category": "structural"
+    },
+    {
+      "file": "scss/widgets/base/pivotGrid/_index.scss",
+      "line": 63,
+      "widget": "pivotGrid",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-shadow-geometry",
+      "text": "$pivotgrid-drag-header-first-shadow: 0 0 1px $pivotgrid-drag-header-first-shadow-color; // dx-shadow-geometry",
+      "category": "local-var"
+    },
+    {
+      "file": "scss/widgets/base/pivotGrid/_index.scss",
+      "line": 64,
+      "widget": "pivotGrid",
+      "literals": [
+        "1px",
+        "3px"
+      ],
+      "occurrences": 2,
+      "marker": "dx-shadow-geometry",
+      "text": "$pivotgrid-drag-header-second-shadow: 0 1px 3px $pivotgrid-drag-header-second-shadow-color; // dx-shadow-geometry",
+      "category": "local-var"
+    },
+    {
+      "file": "scss/widgets/base/pivotGrid/_index.scss",
+      "line": 69,
+      "widget": "pivotGrid",
+      "literals": [
+        "-5px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "$pivotgrid-expand-icon-offset: -5px; // dx-fixed-size: negated at its use site",
+      "category": "local-var"
+    },
+    {
+      "file": "scss/widgets/base/pivotGrid/_index.scss",
+      "line": 77,
+      "widget": "pivotGrid",
+      "literals": [
+        "-4px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "margin-top: -4px; // dx-fixed-size: pulls the element onto the grid line",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/pivotGrid/_index.scss",
+      "line": 78,
+      "widget": "pivotGrid",
+      "literals": [
+        "-1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "margin-left: -1px; // dx-fixed-size: pulls the element onto the grid line",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/pivotGrid/_index.scss",
+      "line": 82,
+      "widget": "pivotGrid",
+      "literals": [
+        "-3px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "margin-top: -3px; // dx-fixed-size: pulls the element onto the grid line",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/pivotGrid/_index.scss",
+      "line": 87,
+      "widget": "pivotGrid",
+      "literals": [
+        "-3px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "margin-left: -3px; // dx-fixed-size: pulls the element onto the grid line",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/pivotGrid/_index.scss",
+      "line": 340,
+      "widget": "pivotGrid",
+      "literals": [
+        "-1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "margin-top: -1px; // dx-fixed-size: pulls the element onto the grid line",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/pivotGrid/_index.scss",
+      "line": 611,
+      "widget": "pivotGrid",
+      "literals": [
+        "-3px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "margin-left: -3px; // dx-fixed-size: pulls the element onto the grid line",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/popover/_index.scss",
+      "line": 2,
+      "widget": "popover",
+      "literals": [
+        "20px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "@include dx-popover-arrow-size(20px); // dx-fixed-size: the arrow width; the mixin divides it by sqrt(2), so a var() cannot pass",
+      "category": "mixin-arg"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_common.scss",
+      "line": 4,
+      "widget": "scheduler",
+      "literals": [
+        "3px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "$scheduler-appointment-collector-margin: 3px; // dx-fixed-size: the collector margin, multiplied elsewhere so a var() cannot pass",
+      "category": "local-var"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_common.scss",
+      "line": 75,
+      "widget": "scheduler",
+      "literals": [
+        "450px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-literal-required",
+      "text": "@media (max-width: 450px) { // dx-literal-required: a media condition, var() is invalid here",
+      "category": "media"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 90,
+      "widget": "scheduler",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "$scheduler-hovered-appointment-top-shadow-size: 5px; // dx-fixed-size: negated and composed into shadows, so a var() cannot pass",
+      "category": "local-var"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 91,
+      "widget": "scheduler",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-shadow-geometry",
+      "text": "$scheduler-focused-cell-shadow: inset 0 0 0 1px $scheduler-appointment-base-color; // dx-shadow-geometry",
+      "category": "local-var"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 93,
+      "widget": "scheduler",
+      "literals": [
+        "-2px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-shadow-geometry",
+      "text": "$scheduler-vertical-appointment-resizable-hovering-shadow: inset 0 $scheduler-hovered-appointment-top-shadow-size 0 0 $scheduler-appointment-start-color, inset 0 -2px 0 0 $scheduler-appointment-start-color; // dx-shadow-geometry",
+      "category": "local-var"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 95,
+      "widget": "scheduler",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-shadow-geometry",
+      "text": "$scheduler-vertical-appointment-shadow: inset 0 2px 0 0 $scheduler-appointment-start-color; // dx-shadow-geometry",
+      "category": "local-var"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 96,
+      "widget": "scheduler",
+      "literals": [
+        "-2px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-shadow-geometry",
+      "text": "$scheduler-vertical-appointment-resizing-shadow: inset 0 -2px 0 0 $scheduler-appointment-start-color, $scheduler-vertical-appointment-shadow; // dx-shadow-geometry",
+      "category": "local-var"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 100,
+      "widget": "scheduler",
+      "literals": [
+        "-2px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-shadow-geometry",
+      "text": "$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; // dx-shadow-geometry",
+      "category": "local-var"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 101,
+      "widget": "scheduler",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-shadow-geometry",
+      "text": "$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; // dx-shadow-geometry",
+      "category": "local-var"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 104,
+      "widget": "scheduler",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-shadow-geometry",
+      "text": "$scheduler-horizontal-appointment-shadow: inset 2px 0 0 0 $scheduler-appointment-start-color; // dx-shadow-geometry",
+      "category": "local-var"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 105,
+      "widget": "scheduler",
+      "literals": [
+        "-2px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-shadow-geometry",
+      "text": "$scheduler-horizontal-appointment-shadow-rtl: inset -2px 0 0 0 $scheduler-appointment-start-color; // dx-shadow-geometry",
+      "category": "local-var"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 106,
+      "widget": "scheduler",
+      "literals": [
+        "-2px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-shadow-geometry",
+      "text": "$scheduler-horizontal-appointment-resizing-shadow: inset -2px 0 0 0 $scheduler-appointment-start-color, $scheduler-horizontal-appointment-shadow; // dx-shadow-geometry",
+      "category": "local-var"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 132,
+      "widget": "scheduler",
+      "literals": [
+        "14px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "$scheduler-time-indicator-top: 14px; // dx-fixed-size: negated at its use site",
+      "category": "local-var"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 133,
+      "widget": "scheduler",
+      "literals": [
+        "12px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "$scheduler-time-indicator-left: 12px; // dx-fixed-size: negated at its use site",
+      "category": "local-var"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 136,
+      "widget": "scheduler",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-shadow-geometry",
+      "text": "$scheduler-time-indicator-shadow: 0 1px 0 0 $scheduler-time-indicator-shadow-color; // dx-shadow-geometry",
+      "category": "local-var"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 137,
+      "widget": "scheduler",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-shadow-geometry",
+      "text": "$scheduler-time-indicator-text-shadow: $scheduler-time-indicator-shadow-color 1px 0 0; // dx-shadow-geometry",
+      "category": "local-var"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 467,
+      "widget": "scheduler",
+      "literals": [
+        "-1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-px-nudge",
+      "text": "bottom: -1px; // dx-px-nudge: sits on the 1px <th> border, see the note above",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/appointment/regular/_index.scss",
+      "line": 150,
+      "widget": "scheduler",
+      "literals": [
+        "-1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-px-nudge",
+      "text": "left: -1px; // dx-px-nudge: pulls the resize handle onto the appointment's 1px border",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/layout/_header.scss",
+      "line": 9,
+      "widget": "scheduler",
+      "literals": [
+        "-1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-px-nudge",
+      "text": "margin-bottom: -1px; // dx-px-nudge: collapses the header border with the row below",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/views/_index.scss",
+      "line": 44,
+      "widget": "scheduler",
+      "literals": [
+        "20px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "$scheduler-timepanel-cell-offset: 20px; // dx-fixed-size: multiplied elsewhere, so a var() cannot pass",
+      "category": "local-var"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/views/_index.scss",
+      "line": 48,
+      "widget": "scheduler",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "$scheduler-current-time-cell-border-size: 2px; // dx-fixed-size: multiplied elsewhere, so a var() cannot pass",
+      "category": "local-var"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/views/_index.scss",
+      "line": 50,
+      "widget": "scheduler",
+      "literals": [
+        "50px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "$scheduler-workspace-date-table-cell-height: 50px; // dx-fixed-size: four derived heights multiply it, so a var() cannot pass",
+      "category": "local-var"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/views/_index.scss",
+      "line": 54,
+      "widget": "scheduler",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 2,
+      "marker": "dx-px-nudge",
+      "text": "$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)); // dx-px-nudge: -10px under the workspace cell height",
+      "category": "local-var"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/views/_index.scss",
+      "line": 57,
+      "widget": "scheduler",
+      "literals": [
+        "80px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "$scheduler-group-header-table-cell-width: 80px; // dx-fixed-size: multiplied elsewhere, so a var() cannot pass",
+      "category": "local-var"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/views/_index.scss",
+      "line": 121,
+      "widget": "scheduler",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-px-nudge",
+      "text": "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)); // dx-px-nudge: -1px under the derived top offset, so the indicator overlaps the border",
+      "category": "calc"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/views/_index.scss",
+      "line": 405,
+      "widget": "scheduler",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "padding: 0 5px; // dx-fixed-size: horizontal padding of the time panel cell",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/views/_index.scss",
+      "line": 697,
+      "widget": "scheduler",
+      "literals": [
+        "-13px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-px-nudge",
+      "text": "margin-top: -13px; // dx-px-nudge: lifts the hour label to straddle the cell border",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/views/_index.scss",
+      "line": 707,
+      "widget": "scheduler",
+      "literals": [
+        "-1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-px-nudge",
+      "text": "bottom: -1px; // dx-px-nudge: sits the time indicator on the cell border",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/views/_index.scss",
+      "line": 870,
+      "widget": "scheduler",
+      "literals": [
+        "-1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-line-width",
+      "text": "box-shadow: inset 0 -1px 0 $scheduler-base-border-color; // dx-line-width: hairline standing in for the removed border-bottom",
+      "category": "geometry"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/views/day/_index.scss",
+      "line": 45,
+      "widget": "scheduler",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-px-nudge",
+      "text": "margin-top: 1px; // dx-px-nudge: keeps the ungrouped header panel off the border above",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/views/month/_index.scss",
+      "line": 73,
+      "widget": "scheduler",
+      "literals": [
+        "-2px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-line-width",
+      "text": "box-shadow: 0 -2px 0 $scheduler-base-border-color; // dx-line-width: 2px line standing in for the removed border-bottom",
+      "category": "geometry"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/views/timelines/_index.scss",
+      "line": 188,
+      "widget": "scheduler",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-line-width",
+      "text": "border-bottom: 1px solid; // dx-line-width: hairline under the empty header cell",
+      "category": "geometry"
+    },
+    {
+      "file": "scss/widgets/base/stepper/layout/step/_index.scss",
+      "line": 20,
+      "widget": "stepper",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-line-width",
+      "text": "border-width: 1px; // dx-line-width: hairline, the same in every theme",
+      "category": "geometry"
+    },
+    {
+      "file": "scss/widgets/base/textEditor/_mixins.scss",
+      "line": 53,
+      "widget": "textEditor",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "padding: 0 2px; // dx-fixed-size: fluent-next does not call this mixin, so the value only reaches the legacy themes",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/textEditor/_mixins.scss",
+      "line": 201,
+      "widget": "textEditor",
+      "literals": [
+        "1px",
+        "-1px"
+      ],
+      "occurrences": 3,
+      "marker": "dx-line-width",
+      "text": ")} 1px -1px 1px);",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/textEditor/_mixins.scss",
+      "line": 225,
+      "widget": "textEditor",
+      "literals": [
+        "-1px",
+        "1px"
+      ],
+      "occurrences": 4,
+      "marker": "dx-line-width",
+      "text": "clip-path: inset(-1px 1px -1px -1px); // dx-line-width: the notch is carved at the label border, a hairline that must not thicken with the scale",
+      "category": "geometry"
+    },
+    {
+      "file": "scss/widgets/base/textEditor/_mixins.scss",
+      "line": 240,
+      "widget": "textEditor",
+      "literals": [
+        "-1px",
+        "1px"
+      ],
+      "occurrences": 4,
+      "marker": "dx-line-width",
+      "text": "clip-path: inset(-1px -1px -1px 1px); // dx-line-width: the notch is carved at the label border, a hairline that must not thicken with the scale",
+      "category": "geometry"
+    },
+    {
+      "file": "scss/widgets/base/textEditor/_mixins.scss",
+      "line": 245,
+      "widget": "textEditor",
+      "literals": [
+        "-1px",
+        "1px"
+      ],
+      "occurrences": 4,
+      "marker": "dx-line-width",
+      "text": "clip-path: inset(-1px -1px -1px 1px); // dx-line-width: the notch is carved at the label border, a hairline that must not thicken with the scale",
+      "category": "geometry"
+    },
+    {
+      "file": "scss/widgets/base/textEditor/_mixins.scss",
+      "line": 249,
+      "widget": "textEditor",
+      "literals": [
+        "-1px",
+        "1px"
+      ],
+      "occurrences": 4,
+      "marker": "dx-line-width",
+      "text": "clip-path: inset(-1px 1px -1px -1px); // dx-line-width: the notch is carved at the label border, a hairline that must not thicken with the scale",
+      "category": "geometry"
+    },
+    {
+      "file": "scss/widgets/base/textEditor/_mixins.scss",
+      "line": 653,
+      "widget": "textEditor",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "margin-top: 1px; // dx-fixed-size: fluent-next does not call this mixin, so the value only reaches the legacy themes",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/textEditor/_mixins.scss",
+      "line": 654,
+      "widget": "textEditor",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "margin-bottom: 1px; // dx-fixed-size: fluent-next does not call this mixin, so the value only reaches the legacy themes",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/textEditor/_mixins.scss",
+      "line": 786,
+      "widget": "textEditor",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 2,
+      "marker": "dx-px-nudge",
+      "text": "padding-top: if(meta.type-of($material-button-vertical-padding) == number, $material-button-vertical-padding - 1px, calc(#{$material-button-vertical-padding} - 1px)); // dx-px-nudge: -1px under the button's own padding",
+      "category": "calc"
+    },
+    {
+      "file": "scss/widgets/base/textEditor/_mixins.scss",
+      "line": 840,
+      "widget": "textEditor",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 2,
+      "marker": "dx-px-nudge",
+      "text": "padding-top: if(meta.type-of($material-button-vertical-padding) == number, $material-button-vertical-padding - 1px, calc(#{$material-button-vertical-padding} - 1px)); // dx-px-nudge: -1px under the button's own padding",
+      "category": "calc"
+    },
+    {
+      "file": "scss/widgets/base/toolbar/_index.scss",
+      "line": 101,
+      "widget": "toolbar",
+      "literals": [
+        "-5px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "margin: 0 -5px; // dx-fixed-size: pulls the items flush with the toolbar edge",
+      "category": "inline"
+    },
+    {
+      "file": "scss/widgets/base/treeList/_index.scss",
+      "line": 176,
+      "widget": "treeList",
+      "literals": [
+        "14px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "@include dx-icon-sizing(14px); // dx-fixed-size: the gridBase tier already paints this across the family; a widget-scoped name would collide under the other grid roots",
+      "category": "mixin-arg"
+    },
+    {
+      "file": "scss/widgets/base/treeList/_index.scss",
+      "line": 276,
+      "widget": "treeList",
+      "literals": [
+        "16px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "@include dx-icon-sizing(16px); // dx-fixed-size: the gridBase tier already paints this across the family; a widget-scoped name would collide under the other grid roots",
+      "category": "mixin-arg"
+    },
+    {
+      "file": "scss/widgets/base/treeList/_index.scss",
+      "line": 284,
+      "widget": "treeList",
+      "literals": [
+        "21px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "@include dx-icon-sizing(21px); // dx-fixed-size: the gridBase tier already paints this across the family; a widget-scoped name would collide under the other grid roots",
+      "category": "mixin-arg"
+    },
+    {
+      "file": "scss/widgets/base/treeList/layout/cell.scss",
+      "line": 229,
+      "widget": "treeList",
+      "literals": [
+        "-2px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "outline-offset: -2px; // dx-fixed-size: the gridBase tier already paints this across the family; a widget-scoped name would collide under the other grid roots",
+      "category": "geometry"
+    },
+    {
+      "file": "scss/widgets/base/treeView/_common.scss",
+      "line": 86,
+      "widget": "treeView",
+      "literals": [
+        "8px"
+      ],
+      "occurrences": 1,
+      "marker": "dx-fixed-size",
+      "text": "margin-inline-end: 8px; // dx-fixed-size: demos hand-write this class outside the widget, where a tier var would not reach",
+      "category": "inline"
+    }
+  ]
+}
diff --git a/packages/devextreme-scss/tools/sizes/lists/theme-settable.json b/packages/devextreme-scss/tools/sizes/lists/theme-settable.json
new file mode 100644
index 000000000000..a4097a9987ee
--- /dev/null
+++ b/packages/devextreme-scss/tools/sizes/lists/theme-settable.json
@@ -0,0 +1,7756 @@
+{
+  "$comment": [
+    "GENERATED by tools/sizes/inventory.mjs — do not edit by hand. Judgment calls belong in that script, not in this file.",
+    "Sizes the theme can set from outside without touching the shared layer: the literal is the default of a `$x: … !default` declaration, so `@use \"…/base/x\" with ($x: …)` replaces it for one theme and leaves the default — and every other theme — untouched.",
+    "kind \"module-variable\" — a `$x: … !default` declaration; \"mixin-parameter\" — a default in a `@mixin name(…)` signature, which a theme replaces by passing an argument.",
+    "status \"injected\" — fluent-next already passes a value; \"open\" — the knob exists and nobody turns it; \"parameter\" — a mixin parameter, where the signature itself is the channel and there is nothing to cross-check by name. An \"open\" row is theme-side work only.",
+    "The match is by variable name. A name declared in a nested module is only reachable once the parent forwards it (see base/chat/_index.scss), which is why an \"open\" row can sit next to injected ones from the same widget."
+  ],
+  "summary": {
+    "occurrences": 525,
+    "variables": 454,
+    "injected": 501,
+    "open": 0,
+    "parameters": 24
+  },
+  "places": [
+    {
+      "file": "scss/widgets/base/_box.scss",
+      "line": 1,
+      "widget": "box",
+      "literals": [
+        "14px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$box-item-content-font-size: 14px !default;",
+      "variable": "box-item-content-font-size",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/box/_index.scss",
+      "setTo": "var(--dx-box-item-content-font-size)"
+    },
+    {
+      "file": "scss/widgets/base/_contextMenu.scss",
+      "line": 2,
+      "widget": "contextMenu",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$contextmenu-menu-items-container-padding: 1px !default;",
+      "variable": "contextmenu-menu-items-container-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/contextMenu/_index.scss",
+      "setTo": "false"
+    },
+    {
+      "file": "scss/widgets/base/_contextMenu.scss",
+      "line": 3,
+      "widget": "contextMenu",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$contextmenu-menu-separator-height: 1px !default;",
+      "variable": "contextmenu-menu-separator-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/contextMenu/_index.scss",
+      "setTo": "var(--dx-context-menu-separator-height)"
+    },
+    {
+      "file": "scss/widgets/base/_contextMenu.scss",
+      "line": 4,
+      "widget": "contextMenu",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$contextmenu-menu-separator-margin: 5px 0 !default;",
+      "variable": "contextmenu-menu-separator-margin",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/contextMenu/_index.scss",
+      "setTo": "var(--dx-context-menu-separator-margin)"
+    },
+    {
+      "file": "scss/widgets/base/_dateBox.scss",
+      "line": 4,
+      "widget": "dateBox",
+      "literals": [
+        "20px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$datebox-texteditor-height: 20px !default;",
+      "variable": "datebox-texteditor-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/dateBox/_index.scss",
+      "setTo": "var(--dx-date-box-input-height)"
+    },
+    {
+      "file": "scss/widgets/base/_dateBox.scss",
+      "line": 5,
+      "widget": "dateBox",
+      "literals": [
+        "20px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$datebox-popup-content-padding-top: 20px !default;",
+      "variable": "datebox-popup-content-padding-top",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/dateBox/_index.scss",
+      "setTo": "var(--dx-date-box-popup-content-padding-block-start)"
+    },
+    {
+      "file": "scss/widgets/base/_dateBox.scss",
+      "line": 6,
+      "widget": "dateBox",
+      "literals": [
+        "20px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$datebox-popup-content-padding-bottom: 20px !default;",
+      "variable": "datebox-popup-content-padding-bottom",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/dateBox/_index.scss",
+      "setTo": "var(--dx-date-box-popup-content-padding-block-end)"
+    },
+    {
+      "file": "scss/widgets/base/_dateBox.scss",
+      "line": 7,
+      "widget": "dateBox",
+      "literals": [
+        "90px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$datebox-button-min-width: 90px !default;",
+      "variable": "datebox-button-min-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/dateBox/_index.scss",
+      "setTo": "var(--dx-date-box-button-min-width)"
+    },
+    {
+      "file": "scss/widgets/base/_dateBox.scss",
+      "line": 8,
+      "widget": "dateBox",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$datebox-apply-button-margin-right: 10px !default;",
+      "variable": "datebox-apply-button-margin-right",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/dateBox/_index.scss",
+      "setTo": "var(--dx-date-box-apply-button-margin-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/_dropDownList.scss",
+      "line": 2,
+      "widget": "dropDownList",
+      "literals": [
+        "35px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$dropdownlist-list-min-height: 35px !default;",
+      "variable": "dropdownlist-list-min-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/dropDownList/_index.scss",
+      "setTo": "var(--dx-drop-down-list-min-height)"
+    },
+    {
+      "file": "scss/widgets/base/_fieldset.scss",
+      "line": 4,
+      "widget": "fieldset",
+      "literals": [
+        "20px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$fieldset-root-margin-bottom: 20px !default;",
+      "variable": "fieldset-root-margin-bottom",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fieldset/_index.scss",
+      "setTo": "var(--dx-fieldset-margin-block-end)"
+    },
+    {
+      "file": "scss/widgets/base/_fileUploader.scss",
+      "line": 4,
+      "widget": "fileUploader",
+      "literals": [
+        "12px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$fileuploader-button-margin-left: 12px !default;",
+      "variable": "fileuploader-button-margin-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileUploader/_index.scss",
+      "setTo": "var(--dx-file-uploader-button-margin-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/_fileUploader.scss",
+      "line": 5,
+      "widget": "fileUploader",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$fileuploader-upload-button-margin-top: 10px !default;",
+      "variable": "fileuploader-upload-button-margin-top",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileUploader/_index.scss",
+      "setTo": "var(--dx-file-uploader-upload-button-margin-block-start)"
+    },
+    {
+      "file": "scss/widgets/base/_fileUploader.scss",
+      "line": 6,
+      "widget": "fileUploader",
+      "literals": [
+        "22px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$fileuploader-show-file-list-padding-top: 22px !default;",
+      "variable": "fileuploader-show-file-list-padding-top",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileUploader/_index.scss",
+      "setTo": "var(--dx-file-uploader-show-file-list-padding-block-start)"
+    },
+    {
+      "file": "scss/widgets/base/_fileUploader.scss",
+      "line": 7,
+      "widget": "fileUploader",
+      "literals": [
+        "4px"
+      ],
+      "occurrences": 2,
+      "marker": null,
+      "text": "$fileuploader-file-container-padding: 4px 0 4px !default;",
+      "variable": "fileuploader-file-container-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileUploader/_index.scss",
+      "setTo": "false"
+    },
+    {
+      "file": "scss/widgets/base/_fileUploader.scss",
+      "line": 8,
+      "widget": "fileUploader",
+      "literals": [
+        "28px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$fileuploader-button-width: 28px !default;",
+      "variable": "fileuploader-button-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileUploader/_index.scss",
+      "setTo": "var(--dx-file-uploader-button-width)"
+    },
+    {
+      "file": "scss/widgets/base/_fileUploader.scss",
+      "line": 9,
+      "widget": "fileUploader",
+      "literals": [
+        "28px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$fileuploader-button-height: 28px !default;",
+      "variable": "fileuploader-button-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileUploader/_index.scss",
+      "setTo": "var(--dx-file-uploader-button-height)"
+    },
+    {
+      "file": "scss/widgets/base/_fileUploader.scss",
+      "line": 10,
+      "widget": "fileUploader",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$fileuploader-button-margin-right: 10px !default;",
+      "variable": "fileuploader-button-margin-right",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileUploader/_index.scss",
+      "setTo": "var(--dx-file-uploader-button-margin-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/_fileUploader.scss",
+      "line": 11,
+      "widget": "fileUploader",
+      "literals": [
+        "4px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$fileuploader-cancel-button-position-end-margin-left: 4px !default;",
+      "variable": "fileuploader-cancel-button-position-end-margin-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileUploader/_index.scss",
+      "setTo": "var(--dx-file-uploader-cancel-button-position-end-margin-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/_fileUploader.scss",
+      "line": 12,
+      "widget": "fileUploader",
+      "literals": [
+        "16px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$fileuploader-file-status-message-height: 16px !default;",
+      "variable": "fileuploader-file-status-message-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileUploader/_index.scss",
+      "setTo": "var(--dx-file-uploader-file-status-message-height)"
+    },
+    {
+      "file": "scss/widgets/base/_fileUploader.scss",
+      "line": 13,
+      "widget": "fileUploader",
+      "literals": [
+        "22px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$fileuploader-progressbar-height: 22px !default;",
+      "variable": "fileuploader-progressbar-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileUploader/_index.scss",
+      "setTo": "var(--dx-file-uploader-progress-bar-height)"
+    },
+    {
+      "file": "scss/widgets/base/_fileUploader.scss",
+      "line": 14,
+      "widget": "fileUploader",
+      "literals": [
+        "4px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$fileuploader-file-size-padding-left: 4px !default;",
+      "variable": "fileuploader-file-size-padding-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileUploader/_index.scss",
+      "setTo": "var(--dx-file-uploader-file-size-padding-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/_fileUploader.scss",
+      "line": 15,
+      "widget": "fileUploader",
+      "literals": [
+        "6px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$fileuploader-file-icon-padding-right: 6px !default;",
+      "variable": "fileuploader-file-icon-padding-right",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileUploader/_index.scss",
+      "setTo": "var(--dx-file-uploader-file-icon-padding-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/_fileUploader.scss",
+      "line": 16,
+      "widget": "fileUploader",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$fileuploader-file-container-button-margin-left: 10px !default;",
+      "variable": "fileuploader-file-container-button-margin-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileUploader/_index.scss",
+      "setTo": "var(--dx-file-uploader-file-container-button-rtl-margin-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/_fileUploader.scss",
+      "line": 17,
+      "widget": "fileUploader",
+      "literals": [
+        "4px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$fileuploader-cancel-button-position-end-margin-right: 4px !default;",
+      "variable": "fileuploader-cancel-button-position-end-margin-right",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileUploader/_index.scss",
+      "setTo": "var(--dx-file-uploader-cancel-button-position-end-margin-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/_fileUploader.scss",
+      "line": 18,
+      "widget": "fileUploader",
+      "literals": [
+        "4px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$fileuploader-file-size-padding-right: 4px !default;",
+      "variable": "fileuploader-file-size-padding-right",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileUploader/_index.scss",
+      "setTo": "var(--dx-file-uploader-file-size-padding-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/_fileUploader.scss",
+      "line": 19,
+      "widget": "fileUploader",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$fileuploader-file-status-message-line-margin-bottom: 2px !default;",
+      "variable": "fileuploader-file-status-message-line-margin-bottom",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileUploader/_index.scss",
+      "setTo": "var(--dx-file-uploader-file-status-message-line-margin-block-end)"
+    },
+    {
+      "file": "scss/widgets/base/_fileUploader.scss",
+      "line": 20,
+      "widget": "fileUploader",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$fileuploader-cancel-button-margin-top: 5px !default;",
+      "variable": "fileuploader-cancel-button-margin-top",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileUploader/_index.scss",
+      "setTo": "var(--dx-file-uploader-cancel-button-margin-block-start)"
+    },
+    {
+      "file": "scss/widgets/base/_fileUploader.scss",
+      "line": 22,
+      "widget": "fileUploader",
+      "literals": [
+        "12px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$fileuploader-status-message-font-size: 12px !default;",
+      "variable": "fileuploader-status-message-font-size",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileUploader/_index.scss",
+      "setTo": "var(--dx-file-uploader-status-message-font-size)"
+    },
+    {
+      "file": "scss/widgets/base/_fileUploader.scss",
+      "line": 23,
+      "widget": "fileUploader",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$fileuploader-file-size-font-size: 10px !default;",
+      "variable": "fileuploader-file-size-font-size",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileUploader/_index.scss",
+      "setTo": "var(--dx-file-uploader-file-size-font-size)"
+    },
+    {
+      "file": "scss/widgets/base/_form.scss",
+      "line": 2,
+      "widget": "form",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$form-first-row-padding-top: 10px !default;",
+      "variable": "form-first-row-padding-top",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/form/_index.scss",
+      "setTo": "var(--dx-form-first-row-padding-block-start)"
+    },
+    {
+      "file": "scss/widgets/base/_form.scss",
+      "line": 3,
+      "widget": "form",
+      "literals": [
+        "7px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$form-switch-margin-top: 7px !default;",
+      "variable": "form-switch-margin-top",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/form/_index.scss",
+      "setTo": "var(--dx-form-switch-margin-block-start)"
+    },
+    {
+      "file": "scss/widgets/base/_form.scss",
+      "line": 4,
+      "widget": "form",
+      "literals": [
+        "4px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$form-switch-margin-bottom: 4px !default;",
+      "variable": "form-switch-margin-bottom",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/form/_index.scss",
+      "setTo": "var(--dx-form-switch-margin-block-end)"
+    },
+    {
+      "file": "scss/widgets/base/_form.scss",
+      "line": 5,
+      "widget": "form",
+      "literals": [
+        "20px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$form-multiview-item-content-padding: 20px !default;",
+      "variable": "form-multiview-item-content-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/form/_index.scss",
+      "setTo": "var(--dx-form-multiview-item-content-padding)"
+    },
+    {
+      "file": "scss/widgets/base/_form.scss",
+      "line": 6,
+      "widget": "form",
+      "literals": [
+        "19px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$form-group-content-padding-top: 19px !default;",
+      "variable": "form-group-content-padding-top",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/form/_index.scss",
+      "setTo": "var(--dx-form-group-content-padding-block-start)"
+    },
+    {
+      "file": "scss/widgets/base/_form.scss",
+      "line": 7,
+      "widget": "form",
+      "literals": [
+        "20px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$form-group-content-padding-bottom: 20px !default;",
+      "variable": "form-group-content-padding-bottom",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/form/_index.scss",
+      "setTo": "var(--dx-form-group-content-padding-block-end)"
+    },
+    {
+      "file": "scss/widgets/base/_form.scss",
+      "line": 8,
+      "widget": "form",
+      "literals": [
+        "6px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$form-group-content-margin-top: 6px !default;",
+      "variable": "form-group-content-margin-top",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/form/_index.scss",
+      "setTo": "var(--dx-form-group-content-margin-block-start)"
+    },
+    {
+      "file": "scss/widgets/base/_form.scss",
+      "line": 9,
+      "widget": "form",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$form-field-item-label-location-left-padding-inline-end: 10px !default;",
+      "variable": "form-field-item-label-location-left-padding-inline-end",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/form/_index.scss",
+      "setTo": "var(--dx-form-field-item-label-location-left-padding-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/_form.scss",
+      "line": 10,
+      "widget": "form",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$form-field-item-label-location-right-padding-inline-start: 10px !default;",
+      "variable": "form-field-item-label-location-right-padding-inline-start",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/form/_index.scss",
+      "setTo": "var(--dx-form-field-item-label-location-right-padding-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/_gallery.scss",
+      "line": 4,
+      "widget": "gallery",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$gallery-root-border-width: 1px !default;",
+      "variable": "gallery-root-border-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gallery/_index.scss",
+      "setTo": "var(--dx-gallery-border-width)"
+    },
+    {
+      "file": "scss/widgets/base/_gallery.scss",
+      "line": 5,
+      "widget": "gallery",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$gallery-indicator-bottom: 10px !default;",
+      "variable": "gallery-indicator-bottom",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gallery/_index.scss",
+      "setTo": "var(--dx-gallery-indicator-inset-block-end)"
+    },
+    {
+      "file": "scss/widgets/base/_gallery.scss",
+      "line": 6,
+      "widget": "gallery",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$gallery-indicator-height: 10px !default;",
+      "variable": "gallery-indicator-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gallery/_index.scss",
+      "setTo": "var(--dx-gallery-indicator-height)"
+    },
+    {
+      "file": "scss/widgets/base/_gallery.scss",
+      "line": 7,
+      "widget": "gallery",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$gallery-indicator-item-margin: 0 2px !default;",
+      "variable": "gallery-indicator-item-margin",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gallery/_index.scss",
+      "setTo": "var(--dx-gallery-indicator-item-margin)"
+    },
+    {
+      "file": "scss/widgets/base/_htmlEditor.scss",
+      "line": 25,
+      "widget": "htmlEditor",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$htmleditor-border-width: 1px !default;",
+      "variable": "htmleditor-border-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/htmlEditor/_index.scss",
+      "setTo": "var(--dx-html-editor-border-width)"
+    },
+    {
+      "file": "scss/widgets/base/_htmlEditor.scss",
+      "line": 29,
+      "widget": "htmlEditor",
+      "literals": [
+        "3px",
+        "6px"
+      ],
+      "occurrences": 2,
+      "marker": null,
+      "text": "$variable-padding: 3px 6px !default;",
+      "variable": "variable-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/htmlEditor/_index.scss",
+      "setTo": "var(--dx-html-editor-variable-padding)"
+    },
+    {
+      "file": "scss/widgets/base/_htmlEditor.scss",
+      "line": 30,
+      "widget": "htmlEditor",
+      "literals": [
+        "8px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$variable-border-radius: 8px !default;",
+      "variable": "variable-border-radius",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/htmlEditor/_index.scss",
+      "setTo": "var(--dx-html-editor-variable-border-radius)"
+    },
+    {
+      "file": "scss/widgets/base/_htmlEditor.scss",
+      "line": 31,
+      "widget": "htmlEditor",
+      "literals": [
+        "12px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$blockquote-padding-inline-start: 12px !default;",
+      "variable": "blockquote-padding-inline-start",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/htmlEditor/_index.scss",
+      "setTo": "var(--dx-html-editor-blockquote-padding-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/_htmlEditor.scss",
+      "line": 32,
+      "widget": "htmlEditor",
+      "literals": [
+        "4px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$blockquote-border-inline-start-width: 4px !default;",
+      "variable": "blockquote-border-inline-start-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/htmlEditor/_index.scss",
+      "setTo": "var(--dx-html-editor-blockquote-border-inline-start-width)"
+    },
+    {
+      "file": "scss/widgets/base/_htmlEditor.scss",
+      "line": 33,
+      "widget": "htmlEditor",
+      "literals": [
+        "2px",
+        "5px"
+      ],
+      "occurrences": 2,
+      "marker": null,
+      "text": "$table-cell-padding: 2px 5px !default;",
+      "variable": "table-cell-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/htmlEditor/_index.scss",
+      "setTo": "var(--dx-html-editor-table-cell-padding)"
+    },
+    {
+      "file": "scss/widgets/base/_htmlEditor.scss",
+      "line": 34,
+      "widget": "htmlEditor",
+      "literals": [
+        "15px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$placeholder-inset-inline: 15px !default;",
+      "variable": "placeholder-inset-inline",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/htmlEditor/_index.scss",
+      "setTo": "var(--dx-html-editor-placeholder-inset-inline)"
+    },
+    {
+      "file": "scss/widgets/base/_htmlEditor.scss",
+      "line": 35,
+      "widget": "htmlEditor",
+      "literals": [
+        "12px",
+        "15px"
+      ],
+      "occurrences": 2,
+      "marker": null,
+      "text": "$htmleditor-content-padding: 12px 15px !default;",
+      "variable": "htmleditor-content-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/htmlEditor/_index.scss",
+      "setTo": "var(--dx-html-editor-padding-block) var(--dx-html-editor-padding-inline)"
+    },
+    {
+      "file": "scss/widgets/base/_htmlEditor.scss",
+      "line": 36,
+      "widget": "htmlEditor",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$mention-padding-block: 1px !default;",
+      "variable": "mention-padding-block",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/htmlEditor/_index.scss",
+      "setTo": "var(--dx-mention-padding-block)"
+    },
+    {
+      "file": "scss/widgets/base/_htmlEditor.scss",
+      "line": 37,
+      "widget": "htmlEditor",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$mention-border-radius: 2px !default;",
+      "variable": "mention-border-radius",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/htmlEditor/_index.scss",
+      "setTo": "var(--dx-mention-border-radius)"
+    },
+    {
+      "file": "scss/widgets/base/_htmlEditor.scss",
+      "line": 38,
+      "widget": "htmlEditor",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$mention-margin-inline: 2px !default;",
+      "variable": "mention-margin-inline",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/htmlEditor/_index.scss",
+      "setTo": "var(--dx-mention-margin-inline)"
+    },
+    {
+      "file": "scss/widgets/base/_htmlEditor.scss",
+      "line": 39,
+      "widget": "htmlEditor",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$table-resizer-thickness: 5px !default;",
+      "variable": "table-resizer-thickness",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/htmlEditor/_index.scss",
+      "setTo": "var(--dx-html-editor-table-resizer-thickness)"
+    },
+    {
+      "file": "scss/widgets/base/_htmlEditor.scss",
+      "line": 40,
+      "widget": "htmlEditor",
+      "literals": [
+        "3px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$table-resizer-highlight-thickness: 3px !default;",
+      "variable": "table-resizer-highlight-thickness",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/htmlEditor/_index.scss",
+      "setTo": "var(--dx-html-editor-table-resizer-highlight-thickness)"
+    },
+    {
+      "file": "scss/widgets/base/_loadIndicator.scss",
+      "line": 5,
+      "widget": "loadIndicator",
+      "literals": [
+        "32px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$loadindicator-width: 32px !default;",
+      "variable": "loadindicator-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/loadIndicator/_index.scss",
+      "setTo": "var(--dx-load-indicator-size)"
+    },
+    {
+      "file": "scss/widgets/base/_loadIndicator.scss",
+      "line": 6,
+      "widget": "loadIndicator",
+      "literals": [
+        "32px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$loadindicator-height: 32px !default;",
+      "variable": "loadindicator-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/loadIndicator/_index.scss",
+      "setTo": "var(--dx-load-indicator-size)"
+    },
+    {
+      "file": "scss/widgets/base/_loadPanel.scss",
+      "line": 4,
+      "widget": "loadPanel",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$loadpanel-content-padding: 10px !default;",
+      "variable": "loadpanel-content-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/loadPanel/_index.scss",
+      "setTo": "var(--dx-load-panel-content-padding)"
+    },
+    {
+      "file": "scss/widgets/base/_loadPanel.scss",
+      "line": 5,
+      "widget": "loadPanel",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$loadpanel-content-border: 1px solid #ccc !default;",
+      "variable": "loadpanel-content-border",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/loadPanel/_index.scss",
+      "setTo": "var(--dx-load-panel-content-border)"
+    },
+    {
+      "file": "scss/widgets/base/_loadPanel.scss",
+      "line": 6,
+      "widget": "loadPanel",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$loadpanel-content-border-radius: 5px !default;",
+      "variable": "loadpanel-content-border-radius",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/loadPanel/_index.scss",
+      "setTo": "var(--dx-load-panel-content-border-radius)"
+    },
+    {
+      "file": "scss/widgets/base/_map.scss",
+      "line": 2,
+      "widget": "map",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$map-marker-tooltip-margin: 10px !default;",
+      "variable": "map-marker-tooltip-margin",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/map/_index.scss",
+      "setTo": "mapSizes.$map-marker-tooltip-margin"
+    },
+    {
+      "file": "scss/widgets/base/_menu.scss",
+      "line": 4,
+      "widget": "menu",
+      "literals": [
+        "15px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$menu-separator-margin-inline-end: 15px !default;",
+      "variable": "menu-separator-margin-inline-end",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/menu/_index.scss",
+      "setTo": "var(--dx-menu-separator-margin-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/_menu.scss",
+      "line": 5,
+      "widget": "menu",
+      "literals": [
+        "15px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$menu-separator-margin-bottom: 15px !default;",
+      "variable": "menu-separator-margin-bottom",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/menu/_index.scss",
+      "setTo": "var(--dx-menu-separator-margin-block-end)"
+    },
+    {
+      "file": "scss/widgets/base/_menu.scss",
+      "line": 6,
+      "widget": "menu",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$menu-treeview-node-padding: 1px !default;",
+      "variable": "menu-treeview-node-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/menu/_index.scss",
+      "setTo": "var(--dx-menu-tree-view-node-padding)"
+    },
+    {
+      "file": "scss/widgets/base/_menu.scss",
+      "line": 7,
+      "widget": "menu",
+      "literals": [
+        "15px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$menu-item-content-padding-inline-start: 15px !default;",
+      "variable": "menu-item-content-padding-inline-start",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/menu/_index.scss",
+      "setTo": "var(--dx-menu-item-content-padding-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/_numberBox.scss",
+      "line": 5,
+      "widget": "numberBox",
+      "literals": [
+        "22px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$spin-container-width: 22px !default;",
+      "variable": "spin-container-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/numberBox/_index.scss",
+      "setTo": "var(--dx-number-box-spin-container-width)"
+    },
+    {
+      "file": "scss/widgets/base/_numberBox.scss",
+      "line": 6,
+      "widget": "numberBox",
+      "literals": [
+        "64px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$touch-friendly-spin-container-width: 64px !default;",
+      "variable": "touch-friendly-spin-container-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/numberBox/_index.scss",
+      "setTo": "var(--dx-number-box-spin-container-touch-friendly-width)"
+    },
+    {
+      "file": "scss/widgets/base/_pagination.scss",
+      "line": 4,
+      "widget": "pagination",
+      "literals": [
+        "7px",
+        "8px"
+      ],
+      "occurrences": 3,
+      "marker": null,
+      "text": "$pagination-page-padding-fallback: 7px 8px 8px !default;",
+      "variable": "pagination-page-padding-fallback",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pagination/_index.scss",
+      "setTo": "false"
+    },
+    {
+      "file": "scss/widgets/base/_pagination.scss",
+      "line": 5,
+      "widget": "pagination",
+      "literals": [
+        "13px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pagination-page-horizontal-padding: 13px !default;",
+      "variable": "pagination-page-horizontal-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pagination/_index.scss",
+      "setTo": "var(--dx-pagination-page-padding-inline)"
+    },
+    {
+      "file": "scss/widgets/base/_pagination.scss",
+      "line": 6,
+      "widget": "pagination",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pagination-page-margin-left: 5px !default;",
+      "variable": "pagination-page-margin-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pagination/_index.scss",
+      "setTo": "var(--dx-pagination-page-margin-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/_pagination.scss",
+      "line": 7,
+      "widget": "pagination",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pagination-page-margin-right: 1px !default;",
+      "variable": "pagination-page-margin-right",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pagination/_index.scss",
+      "setTo": "var(--dx-pagination-page-margin-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/_pagination.scss",
+      "line": 8,
+      "widget": "pagination",
+      "literals": [
+        "8px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pagination-separator-padding-left: 8px !default;",
+      "variable": "pagination-separator-padding-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pagination/_index.scss",
+      "setTo": "var(--dx-pagination-separator-padding-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/_pagination.scss",
+      "line": 9,
+      "widget": "pagination",
+      "literals": [
+        "8px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pagination-separator-padding-right: 8px !default;",
+      "variable": "pagination-separator-padding-right",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pagination/_index.scss",
+      "setTo": "var(--dx-pagination-separator-padding-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/_pagination.scss",
+      "line": 10,
+      "widget": "pagination",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pagination-navigate-button-width-fallback: 10px !default;",
+      "variable": "pagination-navigate-button-width-fallback",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pagination/_index.scss",
+      "setTo": "false"
+    },
+    {
+      "file": "scss/widgets/base/_pagination.scss",
+      "line": 11,
+      "widget": "pagination",
+      "literals": [
+        "20px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pagination-navigate-button-height: 20px !default;",
+      "variable": "pagination-navigate-button-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pagination/_index.scss",
+      "setTo": "var(--dx-pagination-navigate-button-height)"
+    },
+    {
+      "file": "scss/widgets/base/_pagination.scss",
+      "line": 12,
+      "widget": "pagination",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pagination-first-child-margin-left: 1px !default;",
+      "variable": "pagination-first-child-margin-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pagination/_index.scss",
+      "setTo": "var(--dx-pagination-first-child-margin-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/_pagination.scss",
+      "line": 13,
+      "widget": "pagination",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pagination-first-child-padding-left: 10px !default;",
+      "variable": "pagination-first-child-padding-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pagination/_index.scss",
+      "setTo": "var(--dx-pagination-first-child-padding-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/_pagination.scss",
+      "line": 14,
+      "widget": "pagination",
+      "literals": [
+        "9px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pagination-first-child-padding-right: 9px !default;",
+      "variable": "pagination-first-child-padding-right",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pagination/_index.scss",
+      "setTo": "var(--dx-pagination-first-child-padding-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/_pagination.scss",
+      "line": 15,
+      "widget": "pagination",
+      "literals": [
+        "7px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pagination-first-child-padding-top: 7px !default;",
+      "variable": "pagination-first-child-padding-top",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pagination/_index.scss",
+      "setTo": "var(--dx-pagination-first-child-padding-block-start)"
+    },
+    {
+      "file": "scss/widgets/base/_pagination.scss",
+      "line": 16,
+      "widget": "pagination",
+      "literals": [
+        "8px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pagination-first-child-padding-bottom: 8px !default;",
+      "variable": "pagination-first-child-padding-bottom",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pagination/_index.scss",
+      "setTo": "var(--dx-pagination-first-child-padding-block-end)"
+    },
+    {
+      "file": "scss/widgets/base/_pagination.scss",
+      "line": 17,
+      "widget": "pagination",
+      "literals": [
+        "4px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pagination-page-size-margin-left: 4px !default;",
+      "variable": "pagination-page-size-margin-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pagination/_index.scss",
+      "setTo": "var(--dx-pagination-page-size-margin-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/_pagination.scss",
+      "line": 18,
+      "widget": "pagination",
+      "literals": [
+        "40px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pagination-page-index-width: 40px !default;",
+      "variable": "pagination-page-index-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pagination/_index.scss",
+      "setTo": "var(--dx-pagination-page-index-width)"
+    },
+    {
+      "file": "scss/widgets/base/_pagination.scss",
+      "line": 19,
+      "widget": "pagination",
+      "literals": [
+        "6px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pagination-pages-count-padding-left: 6px !default;",
+      "variable": "pagination-pages-count-padding-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pagination/_index.scss",
+      "setTo": "var(--dx-pagination-pages-count-padding-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/_pagination.scss",
+      "line": 26,
+      "widget": "pagination",
+      "literals": [
+        "9px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pagination-info-paddings: 9px !default;",
+      "variable": "pagination-info-paddings",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pagination/_index.scss",
+      "setTo": "var(--dx-pagination-info-margin-inline)"
+    },
+    {
+      "file": "scss/widgets/base/_pagination.scss",
+      "line": 30,
+      "widget": "pagination",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pagination-navigate-button-padding-block-fallback: $pagination-paddings - 1px !default;",
+      "variable": "pagination-navigate-button-padding-block-fallback",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pagination/_index.scss",
+      "setTo": "false"
+    },
+    {
+      "file": "scss/widgets/base/_popup.scss",
+      "line": 7,
+      "widget": "popup",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$popup-title-padding: 10px !default;",
+      "variable": "popup-title-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/popup/_index.scss",
+      "setTo": "var(--dx-popup-title-padding)"
+    },
+    {
+      "file": "scss/widgets/base/_popup.scss",
+      "line": 8,
+      "widget": "popup",
+      "literals": [
+        "19px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$popup-title-min-height-fallback: 19px !default;",
+      "variable": "popup-title-min-height-fallback",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/popup/_index.scss",
+      "setTo": "false"
+    },
+    {
+      "file": "scss/widgets/base/_popup.scss",
+      "line": 9,
+      "widget": "popup",
+      "literals": [
+        "10px",
+        "5px"
+      ],
+      "occurrences": 4,
+      "marker": null,
+      "text": "$popup-dialog-message-padding: 10px 10px 5px 10px !default;",
+      "variable": "popup-dialog-message-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/popup/_index.scss",
+      "setTo": "var(--dx-popup-dialog-message-padding)"
+    },
+    {
+      "file": "scss/widgets/base/_progressBar.scss",
+      "line": 3,
+      "widget": "progressBar",
+      "literals": [
+        "12px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$progressbar-status-font-size: 12px !default;",
+      "variable": "progressbar-status-font-size",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/progressBar/_index.scss",
+      "setTo": "var(--dx-progress-bar-status-font-size)"
+    },
+    {
+      "file": "scss/widgets/base/_progressBar.scss",
+      "line": 6,
+      "widget": "progressBar",
+      "literals": [
+        "8px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$progressbar-status-padding-right: 8px !default;",
+      "variable": "progressbar-status-padding-right",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/progressBar/_index.scss",
+      "setTo": "var(--dx-progress-bar-status-padding-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/_progressBar.scss",
+      "line": 7,
+      "widget": "progressBar",
+      "literals": [
+        "8px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$progressbar-status-padding-left: 8px !default;",
+      "variable": "progressbar-status-padding-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/progressBar/_index.scss",
+      "setTo": "var(--dx-progress-bar-status-padding-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/_recurrenceEditor.scss",
+      "line": 2,
+      "widget": "recurrenceEditor",
+      "literals": [
+        "25px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$recurrence-interval-number-box-margin-top: 25px !default;",
+      "variable": "recurrence-interval-number-box-margin-top",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/recurrenceEditor/_index.scss",
+      "setTo": "var(--dx-recurrence-editor-interval-number-box-margin-block-start)"
+    },
+    {
+      "file": "scss/widgets/base/_recurrenceEditor.scss",
+      "line": 3,
+      "widget": "recurrenceEditor",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$recurrence-radio-group-item-padding: 10px !default;",
+      "variable": "recurrence-radio-group-item-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/recurrenceEditor/_index.scss",
+      "setTo": "var(--dx-recurrence-editor-radio-group-item-padding-block-end)"
+    },
+    {
+      "file": "scss/widgets/base/_recurrenceEditor.scss",
+      "line": 4,
+      "widget": "recurrenceEditor",
+      "literals": [
+        "8px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$recurrence-button-group-item-padding: 8px !default;",
+      "variable": "recurrence-button-group-item-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/recurrenceEditor/_index.scss",
+      "setTo": "var(--dx-recurrence-editor-button-group-padding)"
+    },
+    {
+      "file": "scss/widgets/base/_scrollView.scss",
+      "line": 5,
+      "widget": "scrollView",
+      "literals": [
+        "40px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scrollview-top-pocket-width: 40px !default;",
+      "variable": "scrollview-top-pocket-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scrollView/_index.scss",
+      "setTo": "var(--dx-scroll-view-top-pocket-width)"
+    },
+    {
+      "file": "scss/widgets/base/_scrollView.scss",
+      "line": 6,
+      "widget": "scrollView",
+      "literals": [
+        "40px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scrollview-top-pocket-height: 40px !default;",
+      "variable": "scrollview-top-pocket-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scrollView/_index.scss",
+      "setTo": "var(--dx-scroll-view-top-pocket-height)"
+    },
+    {
+      "file": "scss/widgets/base/_scrollView.scss",
+      "line": 7,
+      "widget": "scrollView",
+      "literals": [
+        "4px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scrollview-pull-down-indicator-padding: 4px !default;",
+      "variable": "scrollview-pull-down-indicator-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scrollView/_index.scss",
+      "setTo": "var(--dx-scroll-view-pull-down-indicator-padding)"
+    },
+    {
+      "file": "scss/widgets/base/_scrollView.scss",
+      "line": 8,
+      "widget": "scrollView",
+      "literals": [
+        "8px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scrollview-icon-pulldown-padding: 8px !default;",
+      "variable": "scrollview-icon-pulldown-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scrollView/_index.scss",
+      "setTo": "var(--dx-scroll-view-icon-pull-down-padding)"
+    },
+    {
+      "file": "scss/widgets/base/_scrollView.scss",
+      "line": 9,
+      "widget": "scrollView",
+      "literals": [
+        "20px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scrollview-pull-down-indicator-width: 20px !default;",
+      "variable": "scrollview-pull-down-indicator-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scrollView/_index.scss",
+      "setTo": "var(--dx-scroll-view-pull-down-indicator-width)"
+    },
+    {
+      "file": "scss/widgets/base/_scrollView.scss",
+      "line": 10,
+      "widget": "scrollView",
+      "literals": [
+        "20px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scrollview-pull-down-image-margin: 0 20px !default;",
+      "variable": "scrollview-pull-down-image-margin",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scrollView/_index.scss",
+      "setTo": "var(--dx-scroll-view-pull-down-image-margin)"
+    },
+    {
+      "file": "scss/widgets/base/_scrollView.scss",
+      "line": 11,
+      "widget": "scrollView",
+      "literals": [
+        "50px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scrollview-pull-down-image-height: 50px !default;",
+      "variable": "scrollview-pull-down-image-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scrollView/_index.scss",
+      "setTo": "var(--dx-scroll-view-pull-down-image-height)"
+    },
+    {
+      "file": "scss/widgets/base/_scrollView.scss",
+      "line": 12,
+      "widget": "scrollView",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scrollview-scrollbottom-padding: 10px 0 !default;",
+      "variable": "scrollview-scrollbottom-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scrollView/_index.scss",
+      "setTo": "var(--dx-scroll-view-scroll-bottom-padding)"
+    },
+    {
+      "file": "scss/widgets/base/_scrollView.scss",
+      "line": 13,
+      "widget": "scrollView",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scrollview-scrollbottom-indicator-margin: 0 10px 0 0 !default;",
+      "variable": "scrollview-scrollbottom-indicator-margin",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scrollView/_index.scss",
+      "setTo": "var(--dx-scroll-view-scroll-bottom-indicator-margin)"
+    },
+    {
+      "file": "scss/widgets/base/_scrollView.scss",
+      "line": 14,
+      "widget": "scrollView",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scrollview-scrollbottom-indicator-margin-rtl: 0 0 0 10px !default;",
+      "variable": "scrollview-scrollbottom-indicator-margin-rtl",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scrollView/_index.scss",
+      "setTo": "var(--dx-scroll-view-scroll-bottom-indicator-rtl-margin)"
+    },
+    {
+      "file": "scss/widgets/base/_scrollView.scss",
+      "line": 16,
+      "widget": "scrollView",
+      "literals": [
+        "24px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scrollview-pulldown-icon-font-size: 24px !default;",
+      "variable": "scrollview-pulldown-icon-font-size",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scrollView/_index.scss",
+      "setTo": "var(--dx-scroll-view-pull-down-icon-font-size)"
+    },
+    {
+      "file": "scss/widgets/base/_scrollView.scss",
+      "line": 17,
+      "widget": "scrollView",
+      "literals": [
+        "50px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pulldown-height: 50px !default;",
+      "variable": "pulldown-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scrollView/_index.scss",
+      "setTo": "var(--dx-scroll-view-pull-down-height)"
+    },
+    {
+      "file": "scss/widgets/base/_scrollView.scss",
+      "line": 18,
+      "widget": "scrollView",
+      "literals": [
+        "15px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pulldown-padding: 15px !default;",
+      "variable": "pulldown-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scrollView/_index.scss",
+      "setTo": "var(--dx-scroll-view-pull-down-padding)"
+    },
+    {
+      "file": "scss/widgets/base/_slider.scss",
+      "line": 4,
+      "widget": "slider",
+      "literals": [
+        "28px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$slider-tooltip-content-height: 28px !default;",
+      "variable": "slider-tooltip-content-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/slider/_index.scss",
+      "setTo": "var(--dx-slider-tooltip-height)"
+    },
+    {
+      "file": "scss/widgets/base/_slider.scss",
+      "line": 8,
+      "widget": "slider",
+      "literals": [
+        "14px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$slider-label-position-bottom-padding-bottom: 14px !default;",
+      "variable": "slider-label-position-bottom-padding-bottom",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/slider/_index.scss",
+      "setTo": "var(--dx-slider-label-bottom-padding-block-end)"
+    },
+    {
+      "file": "scss/widgets/base/_slider.scss",
+      "line": 9,
+      "widget": "slider",
+      "literals": [
+        "14px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$slider-label-position-top-padding-top: 14px !default;",
+      "variable": "slider-label-position-top-padding-top",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/slider/_index.scss",
+      "setTo": "var(--dx-slider-label-top-padding-block-start)"
+    },
+    {
+      "file": "scss/widgets/base/_sortable.scss",
+      "line": 23,
+      "widget": "sortable",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$sortable-placeholder-border: 1px solid !default;",
+      "variable": "sortable-placeholder-border",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/sortable/_index.scss",
+      "setTo": "var(--dx-sortable-placeholder-border-width) solid"
+    },
+    {
+      "file": "scss/widgets/base/_sortable.scss",
+      "line": 24,
+      "widget": "sortable",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$sortable-placeholder-inside-border-width: 2px !default;",
+      "variable": "sortable-placeholder-inside-border-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/sortable/_index.scss",
+      "setTo": "var(--dx-sortable-placeholder-inside-border-width)"
+    },
+    {
+      "file": "scss/widgets/base/_speedDialAction.scss",
+      "line": 6,
+      "widget": "speedDialAction",
+      "literals": [
+        "4px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$speeddialaction-fa-button-label-border-radius: 4px !default;",
+      "variable": "speeddialaction-fa-button-label-border-radius",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/speedDialAction/_index.scss",
+      "setTo": "var(--dx-speed-dial-action-fa-button-label-border-radius)"
+    },
+    {
+      "file": "scss/widgets/base/_splitterBar.scss",
+      "line": 4,
+      "widget": "splitterBar",
+      "literals": [
+        "7px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$splitterbar-splitter-border-width: 7px !default;",
+      "variable": "splitterbar-splitter-border-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/splitterBar/_index.scss",
+      "setTo": "var(--dx-splitter-bar-border-width)"
+    },
+    {
+      "file": "scss/widgets/base/_splitterBar.scss",
+      "line": 5,
+      "widget": "splitterBar",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$splitterbar-splitter-bar-width: 1px !default;",
+      "variable": "splitterbar-splitter-bar-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/splitterBar/_index.scss",
+      "setTo": "var(--dx-splitter-bar-width)"
+    },
+    {
+      "file": "scss/widgets/base/_tileView.scss",
+      "line": 2,
+      "widget": "tileView",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$tileview-wrapper-height: 1px !default;",
+      "variable": "tileview-wrapper-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/tileView/_index.scss",
+      "setTo": "var(--dx-tile-view-wrapper-height)"
+    },
+    {
+      "file": "scss/widgets/base/_toast.scss",
+      "line": 2,
+      "widget": "toast",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$toast-content-padding: 10px !default;",
+      "variable": "toast-content-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/toast/_index.scss",
+      "setTo": "var(--dx-toast-content-padding)"
+    },
+    {
+      "file": "scss/widgets/base/_toast.scss",
+      "line": 3,
+      "widget": "toast",
+      "literals": [
+        "35px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$toast-icon-width: 35px !default;",
+      "variable": "toast-icon-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/toast/_index.scss",
+      "setTo": "var(--dx-toast-icon-width)"
+    },
+    {
+      "file": "scss/widgets/base/_toast.scss",
+      "line": 4,
+      "widget": "toast",
+      "literals": [
+        "35px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$toast-icon-height: 35px !default;",
+      "variable": "toast-icon-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/toast/_index.scss",
+      "setTo": "var(--dx-toast-icon-height)"
+    },
+    {
+      "file": "scss/widgets/base/_toast.scss",
+      "line": 5,
+      "widget": "toast",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$toast-icon-margin-right: 10px !default;",
+      "variable": "toast-icon-margin-right",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/toast/_index.scss",
+      "setTo": "var(--dx-toast-icon-margin-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/_toast.scss",
+      "line": 6,
+      "widget": "toast",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$toast-icon-margin-left: 10px !default;",
+      "variable": "toast-icon-margin-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/toast/_index.scss",
+      "setTo": "var(--dx-toast-icon-rtl-margin-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/_toast.scss",
+      "line": 7,
+      "widget": "toast",
+      "literals": [
+        "3px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$toast-stack-gap: 3px !default;",
+      "variable": "toast-stack-gap",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/toast/_index.scss",
+      "setTo": "var(--dx-toast-stack-gap)"
+    },
+    {
+      "file": "scss/widgets/base/_tooltip.scss",
+      "line": 2,
+      "widget": "tooltip",
+      "literals": [
+        "34px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$tooltip-overlay-content-min-width: 34px !default;",
+      "variable": "tooltip-overlay-content-min-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/tooltip/_index.scss",
+      "setTo": "var(--dx-tooltip-overlay-content-min-width)"
+    },
+    {
+      "file": "scss/widgets/base/_tooltip.scss",
+      "line": 3,
+      "widget": "tooltip",
+      "literals": [
+        "26px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$tooltip-overlay-content-min-height: 26px !default;",
+      "variable": "tooltip-overlay-content-min-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/tooltip/_index.scss",
+      "setTo": "var(--dx-tooltip-overlay-content-min-height)"
+    },
+    {
+      "file": "scss/widgets/base/_tooltip.scss",
+      "line": 4,
+      "widget": "tooltip",
+      "literals": [
+        "12px",
+        "17px"
+      ],
+      "occurrences": 2,
+      "marker": null,
+      "text": "$tooltip-popup-content-padding: 12px 17px !default;",
+      "variable": "tooltip-popup-content-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/tooltip/_index.scss",
+      "setTo": "var(--dx-tooltip-popup-content-padding)"
+    },
+    {
+      "file": "scss/widgets/base/_validation.scss",
+      "line": 2,
+      "widget": "validation",
+      "literals": [
+        "20px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$validation-summary-margin-top: 20px !default;",
+      "variable": "validation-summary-margin-top",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/common/_mixins.scss",
+      "setTo": "validationSizes.$validation-summary-margin-block-start"
+    },
+    {
+      "file": "scss/widgets/base/_validation.scss",
+      "line": 3,
+      "widget": "validation",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$validation-message-content-padding: 10px !default;",
+      "variable": "validation-message-content-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/common/_mixins.scss",
+      "setTo": "validationSizes.$validation-message-content-padding"
+    },
+    {
+      "file": "scss/widgets/base/_validation.scss",
+      "line": 6,
+      "widget": "validation",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$validation-summary-item-border-bottom-width: 1px !default;",
+      "variable": "validation-summary-item-border-bottom-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/common/_mixins.scss",
+      "setTo": "var(--dx-validation-summary-item-border-block-end-width)"
+    },
+    {
+      "file": "scss/widgets/base/buttonGroup/_index.scss",
+      "line": 4,
+      "widget": "buttonGroup",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$buttongroup-mode-text-column-gap: 1px !default;",
+      "variable": "buttongroup-mode-text-column-gap",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/buttonGroup/_index.scss",
+      "setTo": "var(--dx-button-group-text-column-gap)"
+    },
+    {
+      "file": "scss/widgets/base/calendar/_calendar.scss",
+      "line": 4,
+      "widget": "calendar",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$calendar-border-width: 1px !default;",
+      "variable": "calendar-border-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/calendar/_index.scss",
+      "setTo": "var(--dx-calendar-border-width)"
+    },
+    {
+      "file": "scss/widgets/base/calendar/_calendar.scss",
+      "line": 5,
+      "widget": "calendar",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$calendar-multiview-table-padding: 0 10px !default;",
+      "variable": "calendar-multiview-table-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/calendar/_index.scss",
+      "setTo": "0 var(--dx-calendar-view-multiview-padding-inline)"
+    },
+    {
+      "file": "scss/widgets/base/calendar/_calendar.scss",
+      "line": 7,
+      "widget": "calendar",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$calendar-week-day-header-font-size: 10px !default;",
+      "variable": "calendar-week-day-header-font-size",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/calendar/_index.scss",
+      "setTo": "var(--dx-calendar-week-day-header-font-size)"
+    },
+    {
+      "file": "scss/widgets/base/calendar/_mixins.scss",
+      "line": 134,
+      "widget": "calendar",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$cell-today-border-width: 2px,",
+      "variable": "cell-today-border-width",
+      "kind": "mixin-parameter",
+      "status": "parameter"
+    },
+    {
+      "file": "scss/widgets/base/calendar/_mixins.scss",
+      "line": 135,
+      "widget": "calendar",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$cell-contoured-ring-width: 2px,",
+      "variable": "cell-contoured-ring-width",
+      "kind": "mixin-parameter",
+      "status": "parameter"
+    },
+    {
+      "file": "scss/widgets/base/chat/_index.scss",
+      "line": 6,
+      "widget": "chat",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$chat-messagebox-border-block-start-width: 1px !default;",
+      "variable": "chat-messagebox-border-block-start-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/chat/_index.scss",
+      "setTo": "var(--dx-chat-message-box-border-block-start-width)"
+    },
+    {
+      "file": "scss/widgets/base/chat/_index.scss",
+      "line": 7,
+      "widget": "chat",
+      "literals": [
+        "4px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$chat-messagebubble-padding-image: 4px !default;",
+      "variable": "chat-messagebubble-padding-image",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/chat/_index.scss",
+      "setTo": "var(--dx-chat-bubble-image-padding)"
+    },
+    {
+      "file": "scss/widgets/base/chat/_index.scss",
+      "line": 8,
+      "widget": "chat",
+      "literals": [
+        "8px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$chat-messagebubble-border-radius-image: 8px !default;",
+      "variable": "chat-messagebubble-border-radius-image",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/chat/_index.scss",
+      "setTo": "var(--dx-chat-bubble-image-border-radius)"
+    },
+    {
+      "file": "scss/widgets/base/chat/_index.scss",
+      "line": 9,
+      "widget": "chat",
+      "literals": [
+        "400px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$chat-messagebubble-max-width-image: 400px !default;",
+      "variable": "chat-messagebubble-max-width-image",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/chat/_index.scss",
+      "setTo": "var(--dx-chat-bubble-image-max-width)"
+    },
+    {
+      "file": "scss/widgets/base/chat/_index.scss",
+      "line": 10,
+      "widget": "chat",
+      "literals": [
+        "400px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$chat-messagebubble-max-height-image: 400px !default;",
+      "variable": "chat-messagebubble-max-height-image",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/chat/_index.scss",
+      "setTo": "var(--dx-chat-bubble-image-max-height)"
+    },
+    {
+      "file": "scss/widgets/base/chat/layout/chat/_mixins.scss",
+      "line": 5,
+      "widget": "chat",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$border-width: 1px,",
+      "variable": "border-width",
+      "kind": "mixin-parameter",
+      "status": "parameter"
+    },
+    {
+      "file": "scss/widgets/base/checkBox/_index.scss",
+      "line": 5,
+      "widget": "checkBox",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$checkbox-text-padding-inline-start: 5px !default;",
+      "variable": "checkbox-text-padding-inline-start",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/checkBox/_index.scss",
+      "setTo": "false"
+    },
+    {
+      "file": "scss/widgets/base/colorBox/_index.scss",
+      "line": 5,
+      "widget": "colorBox",
+      "literals": [
+        "40px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$colorbox-input-left-padding: 40px !default;",
+      "variable": "colorbox-input-left-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/colorBox/_index.scss",
+      "setTo": "var(--dx-color-box-input-min-width)"
+    },
+    {
+      "file": "scss/widgets/base/colorBox/_index.scss",
+      "line": 8,
+      "widget": "colorBox",
+      "literals": [
+        "15px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$colorbox-texteditor-input-container-width: 15px !default;",
+      "variable": "colorbox-texteditor-input-container-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/colorBox/_index.scss",
+      "setTo": "var(--dx-color-box-input-container-width)"
+    },
+    {
+      "file": "scss/widgets/base/colorBox/_index.scss",
+      "line": 9,
+      "widget": "colorBox",
+      "literals": [
+        "15px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$colorbox-texteditor-input-container-height: 15px !default;",
+      "variable": "colorbox-texteditor-input-container-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/colorBox/_index.scss",
+      "setTo": "var(--dx-color-box-input-container-height)"
+    },
+    {
+      "file": "scss/widgets/base/colorBox/_index.scss",
+      "line": 10,
+      "widget": "colorBox",
+      "literals": [
+        "14px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$colorbox-texteditor-input-container-inset-inline-start: 14px !default;",
+      "variable": "colorbox-texteditor-input-container-inset-inline-start",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/colorBox/_index.scss",
+      "setTo": "var(--dx-color-box-input-container-inset-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/colorBox/_index.scss",
+      "line": 12,
+      "widget": "colorBox",
+      "literals": [
+        "20px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$colorbox-overlay-padding: 20px !default;",
+      "variable": "colorbox-overlay-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/colorBox/_index.scss",
+      "setTo": "var(--dx-color-box-overlay-padding)"
+    },
+    {
+      "file": "scss/widgets/base/colorBox/_index.scss",
+      "line": 13,
+      "widget": "colorBox",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$colorbox-toolbar-item-padding-right: 10px !default;",
+      "variable": "colorbox-toolbar-item-padding-right",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/colorBox/_index.scss",
+      "setTo": "var(--dx-color-box-toolbar-item-padding-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/colorView/_index.scss",
+      "line": 3,
+      "widget": "colorView",
+      "literals": [
+        "450px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$color-view-container-width: 450px !default;",
+      "variable": "color-view-container-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/colorView/_index.scss",
+      "setTo": "var(--dx-color-view-container-width)"
+    },
+    {
+      "file": "scss/widgets/base/colorView/_index.scss",
+      "line": 4,
+      "widget": "colorView",
+      "literals": [
+        "288px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$color-view-palette-width: 288px !default;",
+      "variable": "color-view-palette-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/colorView/_index.scss",
+      "setTo": "var(--dx-color-view-palette-width)"
+    },
+    {
+      "file": "scss/widgets/base/colorView/_index.scss",
+      "line": 5,
+      "widget": "colorView",
+      "literals": [
+        "299px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$color-view-palette-height: 299px !default;",
+      "variable": "color-view-palette-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/colorView/_index.scss",
+      "setTo": "var(--dx-color-view-palette-height)"
+    },
+    {
+      "file": "scss/widgets/base/colorView/_index.scss",
+      "line": 6,
+      "widget": "colorView",
+      "literals": [
+        "292px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$color-view-alpha-cell-width: 292px !default;",
+      "variable": "color-view-alpha-cell-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/colorView/_index.scss",
+      "setTo": "var(--dx-color-view-alpha-cell-width)"
+    },
+    {
+      "file": "scss/widgets/base/colorView/_index.scss",
+      "line": 7,
+      "widget": "colorView",
+      "literals": [
+        "18px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$color-view-hue-scale-width: 18px !default;",
+      "variable": "color-view-hue-scale-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/colorView/_index.scss",
+      "setTo": "var(--dx-color-view-hue-scale-width)"
+    },
+    {
+      "file": "scss/widgets/base/colorView/_index.scss",
+      "line": 23,
+      "widget": "colorView",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$color-view-label-hex-margin: 10px 0 0 0 !default;",
+      "variable": "color-view-label-hex-margin",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/colorView/_index.scss",
+      "setTo": "var(--dx-color-view-container-hex-margin)"
+    },
+    {
+      "file": "scss/widgets/base/colorView/_index.scss",
+      "line": 24,
+      "widget": "colorView",
+      "literals": [
+        "43px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$color-view-alpha-label-margin-inline-start: 43px !default;",
+      "variable": "color-view-alpha-label-margin-inline-start",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/colorView/_index.scss",
+      "setTo": "var(--dx-color-view-container-alpha-label-margin)"
+    },
+    {
+      "file": "scss/widgets/base/colorView/_index.scss",
+      "line": 25,
+      "widget": "colorView",
+      "literals": [
+        "41px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$color-view-alpha-label-margin-inline-start-rtl: 41px !default;",
+      "variable": "color-view-alpha-label-margin-inline-start-rtl",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/colorView/_index.scss",
+      "setTo": "var(--dx-color-view-container-alpha-label-margin)"
+    },
+    {
+      "file": "scss/widgets/base/colorView/_index.scss",
+      "line": 26,
+      "widget": "colorView",
+      "literals": [
+        "115px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$color-view-alpha-label-width: 115px !default;",
+      "variable": "color-view-alpha-label-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/colorView/_index.scss",
+      "setTo": "var(--dx-color-view-container-alpha-label-width)"
+    },
+    {
+      "file": "scss/widgets/base/colorView/_index.scss",
+      "line": 27,
+      "widget": "colorView",
+      "literals": [
+        "69px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$color-view-textbox-width: 69px !default;",
+      "variable": "color-view-textbox-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/colorView/_index.scss",
+      "setTo": "var(--dx-color-view-container-textbox-width)"
+    },
+    {
+      "file": "scss/widgets/base/colorView/_index.scss",
+      "line": 28,
+      "widget": "colorView",
+      "literals": [
+        "1px",
+        "10px"
+      ],
+      "occurrences": 3,
+      "marker": null,
+      "text": "$color-view-textbox-margin: 1px 1px 10px 0 !default;",
+      "variable": "color-view-textbox-margin",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/colorView/_index.scss",
+      "setTo": "var(--dx-color-view-container-textbox-margin)"
+    },
+    {
+      "file": "scss/widgets/base/colorView/_index.scss",
+      "line": 29,
+      "widget": "colorView",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$color-view-alpha-row-margin-block-start: 10px !default;",
+      "variable": "color-view-alpha-row-margin-block-start",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/colorView/_index.scss",
+      "setTo": "var(--dx-color-view-alpha-row-margin-block-start)"
+    },
+    {
+      "file": "scss/widgets/base/colorView/_index.scss",
+      "line": 30,
+      "widget": "colorView",
+      "literals": [
+        "19px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$color-view-hue-scale-cell-margin-inline-start: 19px !default;",
+      "variable": "color-view-hue-scale-cell-margin-inline-start",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/colorView/_index.scss",
+      "setTo": "var(--dx-color-view-hue-scale-margin)"
+    },
+    {
+      "file": "scss/widgets/base/colorView/_index.scss",
+      "line": 31,
+      "widget": "colorView",
+      "literals": [
+        "90px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$color-view-controls-width: 90px !default;",
+      "variable": "color-view-controls-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/colorView/_index.scss",
+      "setTo": "var(--dx-color-view-controls-container-width)"
+    },
+    {
+      "file": "scss/widgets/base/colorView/_index.scss",
+      "line": 32,
+      "widget": "colorView",
+      "literals": [
+        "27px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$color-view-controls-margin-inline-start: 27px !default;",
+      "variable": "color-view-controls-margin-inline-start",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/colorView/_index.scss",
+      "setTo": "var(--dx-color-view-controls-container-margin)"
+    },
+    {
+      "file": "scss/widgets/base/colorView/_index.scss",
+      "line": 33,
+      "widget": "colorView",
+      "literals": [
+        "25px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$color-view-controls-margin-inline-start-rtl: 25px !default;",
+      "variable": "color-view-controls-margin-inline-start-rtl",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/colorView/_index.scss",
+      "setTo": "var(--dx-color-view-controls-container-margin)"
+    },
+    {
+      "file": "scss/widgets/base/colorView/_index.scss",
+      "line": 34,
+      "widget": "colorView",
+      "literals": [
+        "86px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$color-view-color-preview-width: 86px !default;",
+      "variable": "color-view-color-preview-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/colorView/_index.scss",
+      "setTo": "100%"
+    },
+    {
+      "file": "scss/widgets/base/colorView/_index.scss",
+      "line": 35,
+      "widget": "colorView",
+      "literals": [
+        "40px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$color-view-color-preview-height: 40px !default;",
+      "variable": "color-view-color-preview-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/colorView/_index.scss",
+      "setTo": "var(--dx-color-view-color-preview-height)"
+    },
+    {
+      "file": "scss/widgets/base/colorView/_index.scss",
+      "line": 36,
+      "widget": "colorView",
+      "literals": [
+        "20px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$color-view-alpha-scale-height: 20px !default;",
+      "variable": "color-view-alpha-scale-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/colorView/_index.scss",
+      "setTo": "var(--dx-color-view-alpha-scale-height)"
+    },
+    {
+      "file": "scss/widgets/base/colorView/_index.scss",
+      "line": 37,
+      "widget": "colorView",
+      "literals": [
+        "6px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$color-view-alpha-cell-margin-block: 6px !default;",
+      "variable": "color-view-alpha-cell-margin-block",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/colorView/_index.scss",
+      "setTo": "var(--dx-color-view-alpha-cell-margin-block)"
+    },
+    {
+      "file": "scss/widgets/base/colorView/_index.scss",
+      "line": 38,
+      "widget": "colorView",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$color-view-apply-button-margin-inline-end: 10px !default;",
+      "variable": "color-view-apply-button-margin-inline-end",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/colorView/_index.scss",
+      "setTo": "var(--dx-color-view-apply-button-margin-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/dataGrid/_index.scss",
+      "line": 15,
+      "widget": "dataGrid",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$datagrid-group-row-border: 1px solid !default;",
+      "variable": "datagrid-group-row-border",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/dataGrid/_index.scss",
+      "setTo": "var(--dx-data-grid-group-row-border)"
+    },
+    {
+      "file": "scss/widgets/base/dataGrid/_index.scss",
+      "line": 16,
+      "widget": "dataGrid",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$datagrid-sticky-column-border: 2px solid !default;",
+      "variable": "datagrid-sticky-column-border",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/dataGrid/_index.scss",
+      "setTo": "var(--dx-data-grid-sticky-column-border)"
+    },
+    {
+      "file": "scss/widgets/base/dataGrid/_index.scss",
+      "line": 17,
+      "widget": "dataGrid",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$datagrid-cell-focus-outline: 2px solid !default;",
+      "variable": "datagrid-cell-focus-outline",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/dataGrid/_index.scss",
+      "setTo": "var(--dx-data-grid-cell-outline-focused)"
+    },
+    {
+      "file": "scss/widgets/base/dataGrid/_index.scss",
+      "line": 23,
+      "widget": "dataGrid",
+      "literals": [
+        "30px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$datagrid-common-group-min-width: 30px !default;",
+      "variable": "datagrid-common-group-min-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/dataGrid/_index.scss",
+      "setTo": "var(--dx-data-grid-group-panel-item-min-width)"
+    },
+    {
+      "file": "scss/widgets/base/dataGrid/_index.scss",
+      "line": 24,
+      "widget": "dataGrid",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$datagrid-common-addrow-margin-right: 10px !default;",
+      "variable": "datagrid-common-addrow-margin-right",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/dataGrid/_index.scss",
+      "setTo": "var(--dx-data-grid-group-panel-item-margin-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/dataGrid/_index.scss",
+      "line": 25,
+      "widget": "dataGrid",
+      "literals": [
+        "6px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$datagrid-common-addrow-margin-left: 6px !default;",
+      "variable": "datagrid-common-addrow-margin-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/dataGrid/_index.scss",
+      "setTo": "var(--dx-data-grid-group-panel-item-sort-margin-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/dataGrid/_index.scss",
+      "line": 26,
+      "widget": "dataGrid",
+      "literals": [
+        "3px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$datagrid-common-form-buttons-border-radius: 3px !default;",
+      "variable": "datagrid-common-form-buttons-border-radius",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/dataGrid/_index.scss",
+      "setTo": "var(--dx-data-grid-block-separator-border-radius)"
+    },
+    {
+      "file": "scss/widgets/base/dataGrid/_index.scss",
+      "line": 27,
+      "widget": "dataGrid",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$datagrid-common-form-buttons-margin-left: 10px !default;",
+      "variable": "datagrid-common-form-buttons-margin-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/dataGrid/_index.scss",
+      "setTo": "var(--dx-data-grid-group-panel-item-rtl-margin-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/dataGrid/_index.scss",
+      "line": 28,
+      "widget": "dataGrid",
+      "literals": [
+        "6px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$datagrid-common-form-buttons-margin-right: 6px !default;",
+      "variable": "datagrid-common-form-buttons-margin-right",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/dataGrid/_index.scss",
+      "setTo": "var(--dx-data-grid-group-panel-item-sort-rtl-margin-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/dataGrid/_index.scss",
+      "line": 56,
+      "widget": "dataGrid",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$datagrid-header-filter-outline: 2px solid !default;",
+      "variable": "datagrid-header-filter-outline",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/dataGrid/_index.scss",
+      "setTo": "var(--dx-grid-outline-focused)"
+    },
+    {
+      "file": "scss/widgets/base/dataGrid/_index.scss",
+      "line": 57,
+      "widget": "dataGrid",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$datagrid-header-filter-outline-offset: 2px !default;",
+      "variable": "datagrid-header-filter-outline-offset",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/dataGrid/_index.scss",
+      "setTo": "var(--dx-data-grid-outline-offset-focused)"
+    },
+    {
+      "file": "scss/widgets/base/dataGrid/_index.scss",
+      "line": 58,
+      "widget": "dataGrid",
+      "literals": [
+        "3px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$datagrid-filter-panel-clear-filter-outline-offset: 3px !default;",
+      "variable": "datagrid-filter-panel-clear-filter-outline-offset",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/dataGrid/_index.scss",
+      "setTo": "var(--dx-data-grid-filter-panel-outline-offset-focused)"
+    },
+    {
+      "file": "scss/widgets/base/dataGrid/_index.scss",
+      "line": 59,
+      "widget": "dataGrid",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$datagrid-button-margin-left: 10px !default;",
+      "variable": "datagrid-button-margin-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/dataGrid/_index.scss",
+      "setTo": "var(--dx-data-grid-form-buttons-margin-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/dataGrid/_index.scss",
+      "line": 60,
+      "widget": "dataGrid",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$datagrid-button-margin-top: 10px !default;",
+      "variable": "datagrid-button-margin-top",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/dataGrid/_index.scss",
+      "setTo": "var(--dx-data-grid-form-buttons-margin-block-start)"
+    },
+    {
+      "file": "scss/widgets/base/dataGrid/_index.scss",
+      "line": 61,
+      "widget": "dataGrid",
+      "literals": [
+        "20px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$datagrid-error-message-margin-bottom: 20px !default;",
+      "variable": "datagrid-error-message-margin-bottom",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/dataGrid/_index.scss",
+      "setTo": "var(--dx-data-grid-error-message-margin-block-end)"
+    },
+    {
+      "file": "scss/widgets/base/dataGrid/_index.scss",
+      "line": 62,
+      "widget": "dataGrid",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$datagrid-button-margin-right: 10px !default;",
+      "variable": "datagrid-button-margin-right",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/dataGrid/_index.scss",
+      "setTo": "var(--dx-data-grid-form-buttons-rtl-margin-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/diagram/_index.scss",
+      "line": 6,
+      "widget": "diagram",
+      "literals": [
+        "600px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$diagram-root-height: 600px !default;",
+      "variable": "diagram-root-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/diagram/_index.scss",
+      "setTo": "var(--dx-diagram-height)"
+    },
+    {
+      "file": "scss/widgets/base/diagram/_index.scss",
+      "line": 7,
+      "widget": "diagram",
+      "literals": [
+        "350px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$diagram-root-min-height: 350px !default;",
+      "variable": "diagram-root-min-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/diagram/_index.scss",
+      "setTo": "var(--dx-diagram-min-height)"
+    },
+    {
+      "file": "scss/widgets/base/diagram/_index.scss",
+      "line": 8,
+      "widget": "diagram",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$diagram-toolbar-wrapper-padding: 5px !default;",
+      "variable": "diagram-toolbar-wrapper-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/diagram/_index.scss",
+      "setTo": "var(--dx-diagram-toolbar-wrapper-padding)"
+    },
+    {
+      "file": "scss/widgets/base/diagram/_index.scss",
+      "line": 9,
+      "widget": "diagram",
+      "literals": [
+        "14px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$diagram-button-min-height: 14px !default;",
+      "variable": "diagram-button-min-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/diagram/_index.scss",
+      "setTo": "var(--dx-diagram-toolbox-input-button-min-height)"
+    },
+    {
+      "file": "scss/widgets/base/diagram/_index.scss",
+      "line": 10,
+      "widget": "diagram",
+      "literals": [
+        "8px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$diagram-popup-content-padding: 8px !default;",
+      "variable": "diagram-popup-content-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/diagram/_index.scss",
+      "setTo": "var(--dx-diagram-popup-content-padding)"
+    },
+    {
+      "file": "scss/widgets/base/diagram/_index.scss",
+      "line": 11,
+      "widget": "diagram",
+      "literals": [
+        "300px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$diagram-colorview-palette-min-width: 300px !default;",
+      "variable": "diagram-colorview-palette-min-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/diagram/_index.scss",
+      "setTo": "var(--dx-diagram-color-view-palette-min-width)"
+    },
+    {
+      "file": "scss/widgets/base/diagram/_index.scss",
+      "line": 12,
+      "widget": "diagram",
+      "literals": [
+        "12px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$diagram-colorview-hue-scale-cell-margin-left: 12px !default;",
+      "variable": "diagram-colorview-hue-scale-cell-margin-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/diagram/_index.scss",
+      "setTo": "var(--dx-diagram-color-view-hue-scale-cell-margin-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/diagram/_index.scss",
+      "line": 13,
+      "widget": "diagram",
+      "literals": [
+        "64px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$diagram-loading-indicator-width: 64px !default;",
+      "variable": "diagram-loading-indicator-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/diagram/_index.scss",
+      "setTo": "var(--dx-diagram-loading-indicator-width)"
+    },
+    {
+      "file": "scss/widgets/base/diagram/_index.scss",
+      "line": 14,
+      "widget": "diagram",
+      "literals": [
+        "64px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$diagram-loading-indicator-height: 64px !default;",
+      "variable": "diagram-loading-indicator-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/diagram/_index.scss",
+      "setTo": "var(--dx-diagram-loading-indicator-height)"
+    },
+    {
+      "file": "scss/widgets/base/diagram/_index.scss",
+      "line": 15,
+      "widget": "diagram",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$diagram-context-toolbox-target-width: 1px !default;",
+      "variable": "diagram-context-toolbox-target-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/diagram/_index.scss",
+      "setTo": "var(--dx-diagram-context-toolbox-target-width)"
+    },
+    {
+      "file": "scss/widgets/base/diagram/_index.scss",
+      "line": 16,
+      "widget": "diagram",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$diagram-context-toolbox-target-height: 1px !default;",
+      "variable": "diagram-context-toolbox-target-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/diagram/_index.scss",
+      "setTo": "var(--dx-diagram-context-toolbox-target-height)"
+    },
+    {
+      "file": "scss/widgets/base/diagram/_index.scss",
+      "line": 20,
+      "widget": "diagram",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$diagram-border-width: 1px !default;",
+      "variable": "diagram-border-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/diagram/_index.scss",
+      "setTo": "var(--dx-diagram-border-width)"
+    },
+    {
+      "file": "scss/widgets/base/dropDownButton/_mixins.scss",
+      "line": 4,
+      "widget": "dropDownButton",
+      "literals": [
+        "4px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$dropdownbutton-icon-right-margin-inline-start: 4px,",
+      "variable": "dropdownbutton-icon-right-margin-inline-start",
+      "kind": "mixin-parameter",
+      "status": "parameter"
+    },
+    {
+      "file": "scss/widgets/base/dropDownMenu/_index.scss",
+      "line": 2,
+      "widget": "dropDownMenu",
+      "literals": [
+        "100px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$dropdownmenu-list-min-width: 100px !default;",
+      "variable": "dropdownmenu-list-min-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/dropDownMenu/_index.scss",
+      "setTo": "var(--dx-drop-down-menu-list-min-width)"
+    },
+    {
+      "file": "scss/widgets/base/dropDownMenu/_index.scss",
+      "line": 3,
+      "widget": "dropDownMenu",
+      "literals": [
+        "8px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$dropdownmenu-list-border-radius: 8px !default;",
+      "variable": "dropdownmenu-list-border-radius",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/dropDownMenu/_index.scss",
+      "setTo": "var(--dx-drop-down-menu-list-border-radius)"
+    },
+    {
+      "file": "scss/widgets/base/dropDownMenu/_index.scss",
+      "line": 4,
+      "widget": "dropDownMenu",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$dropdownmenu-popup-content-padding: 1px !default;",
+      "variable": "dropdownmenu-popup-content-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/dropDownMenu/_index.scss",
+      "setTo": "var(--dx-drop-down-menu-popup-content-padding)"
+    },
+    {
+      "file": "scss/widgets/base/dropDownMenu/_mixins.scss",
+      "line": 6,
+      "widget": "dropDownMenu",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$outline-width: 2px,",
+      "variable": "outline-width",
+      "kind": "mixin-parameter",
+      "status": "parameter"
+    },
+    {
+      "file": "scss/widgets/base/dropDownMenu/_mixins.scss",
+      "line": 7,
+      "widget": "dropDownMenu",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$outline-offset: 1px,",
+      "variable": "outline-offset",
+      "kind": "mixin-parameter",
+      "status": "parameter"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 4,
+      "widget": "fileManager",
+      "literals": [
+        "500px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-root-height: 500px !default;",
+      "variable": "filemanager-root-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-height)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 5,
+      "widget": "fileManager",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-root-border: 1px solid !default;",
+      "variable": "filemanager-root-border",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-border-width) solid"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 6,
+      "widget": "fileManager",
+      "literals": [
+        "240px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-overlay-content-min-width: 240px !default;",
+      "variable": "filemanager-overlay-content-min-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-overlay-content-min-width)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 7,
+      "widget": "fileManager",
+      "literals": [
+        "400px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-overlay-content-max-width: 400px !default;",
+      "variable": "filemanager-overlay-content-max-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-overlay-content-max-width)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 8,
+      "widget": "fileManager",
+      "literals": [
+        "15px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-popup-content-padding: 15px !default;",
+      "variable": "filemanager-popup-content-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-popup-content-padding)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 9,
+      "widget": "fileManager",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-progress-box-padding: 5px 0 0 !default;",
+      "variable": "filemanager-progress-box-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-progress-box-padding)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 10,
+      "widget": "fileManager",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-notification-common-padding-bottom: 10px !default;",
+      "variable": "filemanager-notification-common-padding-bottom",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-notification-padding-block-end)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 11,
+      "widget": "fileManager",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-notification-common-border-bottom-width: 1px !default;",
+      "variable": "filemanager-notification-common-border-bottom-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-notification-border-block-end-width)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 12,
+      "widget": "fileManager",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-progress-panel-border-left-width: 1px !default;",
+      "variable": "filemanager-progress-panel-border-left-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-progress-panel-border-inline-start-width)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 13,
+      "widget": "fileManager",
+      "literals": [
+        "340px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-progress-panel-width: 340px !default;",
+      "variable": "filemanager-progress-panel-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-progress-panel-width)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 14,
+      "widget": "fileManager",
+      "literals": [
+        "10px",
+        "20px"
+      ],
+      "occurrences": 4,
+      "marker": null,
+      "text": "$filemanager-progress-panel-container-padding: 10px 20px 20px 20px !default;",
+      "variable": "filemanager-progress-panel-container-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-progress-panel-container-padding)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 15,
+      "widget": "fileManager",
+      "literals": [
+        "5px",
+        "10px"
+      ],
+      "occurrences": 2,
+      "marker": null,
+      "text": "$filemanager-progress-panel-title-padding: 0 0 5px 10px !default;",
+      "variable": "filemanager-progress-panel-title-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-progress-panel-title-padding)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 16,
+      "widget": "fileManager",
+      "literals": [
+        "20px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-progress-panel-separator-height: 20px !default;",
+      "variable": "filemanager-progress-panel-separator-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-progress-panel-separator-height)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 17,
+      "widget": "fileManager",
+      "literals": [
+        "16px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-i-cancel-width: 16px !default;",
+      "variable": "filemanager-i-cancel-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-i-cancel-width)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 18,
+      "widget": "fileManager",
+      "literals": [
+        "16px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-i-cancel-height: 16px !default;",
+      "variable": "filemanager-i-cancel-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-i-cancel-height)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 19,
+      "widget": "fileManager",
+      "literals": [
+        "8px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-progress-box-margin-bottom: 8px !default;",
+      "variable": "filemanager-progress-box-margin-bottom",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-progress-box-margin-block-end)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 20,
+      "widget": "fileManager",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-progress-box-border-radius: 2px !default;",
+      "variable": "filemanager-progress-box-border-radius",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-progress-box-border-radius)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 21,
+      "widget": "fileManager",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 3,
+      "marker": null,
+      "text": "$filemanager-progress-panel-box-padding: 10px 0 10px 10px !default;",
+      "variable": "filemanager-progress-panel-box-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-progress-panel-box-padding)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 22,
+      "widget": "fileManager",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-progress-box-without-close-button-padding-right: 10px !default;",
+      "variable": "filemanager-progress-box-without-close-button-padding-right",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-progress-box-without-close-button-padding-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 23,
+      "widget": "fileManager",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-progress-box-image-margin-right: 10px !default;",
+      "variable": "filemanager-progress-box-image-margin-right",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-progress-box-image-margin-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 24,
+      "widget": "fileManager",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-progress-box-common-padding: 5px 0 !default;",
+      "variable": "filemanager-progress-box-common-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-progress-box-content-padding)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 25,
+      "widget": "fileManager",
+      "literals": [
+        "9px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-progress-box-close-button-margin-top: 9px !default;",
+      "variable": "filemanager-progress-box-close-button-margin-top",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-progress-box-close-button-margin-block-start)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 26,
+      "widget": "fileManager",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-progress-box-close-button-margin-left: 5px !default;",
+      "variable": "filemanager-progress-box-close-button-margin-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-progress-box-close-button-margin-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 27,
+      "widget": "fileManager",
+      "literals": [
+        "2px",
+        "8px",
+        "3px"
+      ],
+      "occurrences": 3,
+      "marker": null,
+      "text": "$filemanager-progress-box-error-padding: 2px 8px 3px !default;",
+      "variable": "filemanager-progress-box-error-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-progress-box-error-padding)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 28,
+      "widget": "fileManager",
+      "literals": [
+        "150px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-progress-box-error-max-height: 150px !default;",
+      "variable": "filemanager-progress-box-error-max-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-progress-box-error-max-height)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 29,
+      "widget": "fileManager",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-toolbar-separator-item-width: 1px !default;",
+      "variable": "filemanager-toolbar-separator-item-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-toolbar-separator-item-width)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 30,
+      "widget": "fileManager",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-toolbar-separator-item-margin-right: 5px !default;",
+      "variable": "filemanager-toolbar-separator-item-margin-right",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-toolbar-separator-item-margin-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 31,
+      "widget": "fileManager",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-container-border-top: 1px solid !default;",
+      "variable": "filemanager-container-border-top",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-container-border-block-start)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 32,
+      "widget": "fileManager",
+      "literals": [
+        "5px",
+        "10px"
+      ],
+      "occurrences": 2,
+      "marker": null,
+      "text": "$filemanager-dirs-panel-padding: 5px 10px !default;",
+      "variable": "filemanager-dirs-panel-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-dirs-panel-padding)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 33,
+      "widget": "fileManager",
+      "literals": [
+        "250px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-drawer-panel-content-initial-min-width: 250px !default;",
+      "variable": "filemanager-drawer-panel-content-initial-min-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-drawer-panel-content-initial-min-width)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 34,
+      "widget": "fileManager",
+      "literals": [
+        "300px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-drawer-panel-content-initial-max-width: 300px !default;",
+      "variable": "filemanager-drawer-panel-content-initial-max-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-drawer-panel-content-initial-max-width)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 35,
+      "widget": "fileManager",
+      "literals": [
+        "2px",
+        "11px"
+      ],
+      "occurrences": 2,
+      "marker": null,
+      "text": "$filemanager-breadcrumbs-padding: 2px 11px !default;",
+      "variable": "filemanager-breadcrumbs-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-breadcrumbs-padding)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 36,
+      "widget": "fileManager",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-breadcrumbs-border-bottom: 1px solid !default;",
+      "variable": "filemanager-breadcrumbs-border-bottom",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-breadcrumbs-border-block-end)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 37,
+      "widget": "fileManager",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-menu-item-content-padding-left: 2px !default;",
+      "variable": "filemanager-menu-item-content-padding-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-menu-item-content-padding-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 38,
+      "widget": "fileManager",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-menu-item-content-padding-right: 2px !default;",
+      "variable": "filemanager-menu-item-content-padding-right",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-menu-item-content-padding-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 39,
+      "widget": "fileManager",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-menu-item-content-margin: 0 10px !default;",
+      "variable": "filemanager-menu-item-content-margin",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-menu-item-content-margin)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 40,
+      "widget": "fileManager",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-breadcrumbs-path-separator-padding-left: 1px !default;",
+      "variable": "filemanager-breadcrumbs-path-separator-padding-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-breadcrumbs-path-separator-padding-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 41,
+      "widget": "fileManager",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-breadcrumbs-path-separator-padding-right: 1px !default;",
+      "variable": "filemanager-breadcrumbs-path-separator-padding-right",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-breadcrumbs-path-separator-padding-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 42,
+      "widget": "fileManager",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-thumbnails-view-port-padding: 5px !default;",
+      "variable": "filemanager-thumbnails-view-port-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-thumbnails-view-port-padding)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 43,
+      "widget": "fileManager",
+      "literals": [
+        "100px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-thumbnails-item-width: 100px !default;",
+      "variable": "filemanager-thumbnails-item-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-thumbnails-item-width)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 44,
+      "widget": "fileManager",
+      "literals": [
+        "100px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-thumbnails-item-height: 100px !default;",
+      "variable": "filemanager-thumbnails-item-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-thumbnails-item-height)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 45,
+      "widget": "fileManager",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-thumbnails-item-border: 1px dashed transparent !default;",
+      "variable": "filemanager-thumbnails-item-border",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-thumbnails-item-border)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 46,
+      "widget": "fileManager",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-thumbnails-item-margin: 5px !default;",
+      "variable": "filemanager-thumbnails-item-margin",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-thumbnails-item-margin)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 47,
+      "widget": "fileManager",
+      "literals": [
+        "13px",
+        "10px"
+      ],
+      "occurrences": 2,
+      "marker": null,
+      "text": "$filemanager-thumbnails-item-content-padding: 13px 0 10px !default;",
+      "variable": "filemanager-thumbnails-item-content-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-thumbnails-item-content-padding)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 48,
+      "widget": "fileManager",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-thumbnails-item-spacer-height: 10px !default;",
+      "variable": "filemanager-thumbnails-item-spacer-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-thumbnails-item-spacer-height)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 49,
+      "widget": "fileManager",
+      "literals": [
+        "10px",
+        "11px"
+      ],
+      "occurrences": 2,
+      "marker": null,
+      "text": "$filemanager-button-content-padding: 10px 11px !default;",
+      "variable": "filemanager-button-content-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-view-mode-button-content-padding)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 50,
+      "widget": "fileManager",
+      "literals": [
+        "300px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-dialog-min-width: 300px !default;",
+      "variable": "filemanager-dialog-min-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-dialog-min-width)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 51,
+      "widget": "fileManager",
+      "literals": [
+        "300px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-overlay-content-min-height: 300px !default;",
+      "variable": "filemanager-overlay-content-min-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-overlay-content-min-height)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 52,
+      "widget": "fileManager",
+      "literals": [
+        "400px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-overlay-content-max-height: 400px !default;",
+      "variable": "filemanager-overlay-content-max-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-overlay-content-max-height)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 53,
+      "widget": "fileManager",
+      "literals": [
+        "340px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-dialog-name-editor-max-width: 340px !default;",
+      "variable": "filemanager-dialog-name-editor-max-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-dialog-name-editor-max-width)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 54,
+      "widget": "fileManager",
+      "literals": [
+        "180px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-dialog-name-editor-min-height: 180px !default;",
+      "variable": "filemanager-dialog-name-editor-min-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-dialog-name-editor-min-height)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 55,
+      "widget": "fileManager",
+      "literals": [
+        "180px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-dialog-name-editor-max-height: 180px !default;",
+      "variable": "filemanager-dialog-name-editor-max-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-dialog-name-editor-max-height)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 56,
+      "widget": "fileManager",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-progressbox-cancel-button-margin-top: 5px !default;",
+      "variable": "filemanager-progressbox-cancel-button-margin-top",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-progress-box-cancel-button-margin-block-start)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 58,
+      "widget": "fileManager",
+      "literals": [
+        "18px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-progress-title-font-size: 18px !default;",
+      "variable": "filemanager-progress-title-font-size",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-progress-title-font-size)"
+    },
+    {
+      "file": "scss/widgets/base/fileManager/_index.scss",
+      "line": 66,
+      "widget": "fileManager",
+      "literals": [
+        "3px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filemanager-splitter-wrapper-right: 3px !default;",
+      "variable": "filemanager-splitter-wrapper-right",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/fileManager/_index.scss",
+      "setTo": "var(--dx-file-manager-splitter-wrapper-inset-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/filterBuilder/_index.scss",
+      "line": 27,
+      "widget": "filterBuilder",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filterbuilder-action-icon-margin-left: 5px !default;",
+      "variable": "filterbuilder-action-icon-margin-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/filterBuilder/_index.scss",
+      "setTo": "var(--dx-filter-builder-action-icon-margin-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/filterBuilder/_index.scss",
+      "line": 28,
+      "widget": "filterBuilder",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filterbuilder-action-icon-margin-right: 5px !default;",
+      "variable": "filterbuilder-action-icon-margin-right",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/filterBuilder/_index.scss",
+      "setTo": "var(--dx-filter-builder-action-icon-margin-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/filterBuilder/_index.scss",
+      "line": 29,
+      "widget": "filterBuilder",
+      "literals": [
+        "26px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filterbuilder-group-content-padding-right: 26px !default;",
+      "variable": "filterbuilder-group-content-padding-right",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/filterBuilder/_index.scss",
+      "setTo": "var(--dx-filter-builder-group-content-padding-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/filterBuilder/_index.scss",
+      "line": 30,
+      "widget": "filterBuilder",
+      "literals": [
+        "7px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filterbuilder-range-separator-margin: 0 7px !default;",
+      "variable": "filterbuilder-range-separator-margin",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/filterBuilder/_index.scss",
+      "setTo": "var(--dx-filter-builder-range-separator-margin)"
+    },
+    {
+      "file": "scss/widgets/base/filterBuilder/_index.scss",
+      "line": 31,
+      "widget": "filterBuilder",
+      "literals": [
+        "20px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filterbuilder-item-value-text-min-width: 20px !default;",
+      "variable": "filterbuilder-item-value-text-min-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/filterBuilder/_index.scss",
+      "setTo": "var(--dx-filter-builder-item-value-text-min-width)"
+    },
+    {
+      "file": "scss/widgets/base/filterBuilder/_index.scss",
+      "line": 32,
+      "widget": "filterBuilder",
+      "literals": [
+        "2px",
+        "7px",
+        "3px"
+      ],
+      "occurrences": 4,
+      "marker": null,
+      "text": "$filterbuilder-item-value-text-padding: 2px 7px 3px 7px !default;",
+      "variable": "filterbuilder-item-value-text-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/filterBuilder/_index.scss",
+      "setTo": "var(--dx-filter-builder-item-value-text-padding)"
+    },
+    {
+      "file": "scss/widgets/base/filterBuilder/_index.scss",
+      "line": 33,
+      "widget": "filterBuilder",
+      "literals": [
+        "5px",
+        "8px"
+      ],
+      "occurrences": 2,
+      "marker": null,
+      "text": "$filterbuilder-action-icon-padding: 5px 8px !default;",
+      "variable": "filterbuilder-action-icon-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/filterBuilder/_index.scss",
+      "setTo": "var(--dx-filter-builder-action-icon-padding)"
+    },
+    {
+      "file": "scss/widgets/base/filterBuilder/_index.scss",
+      "line": 34,
+      "widget": "filterBuilder",
+      "literals": [
+        "26px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filterbuilder-group-content-padding-left: 26px !default;",
+      "variable": "filterbuilder-group-content-padding-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/filterBuilder/_index.scss",
+      "setTo": "var(--dx-filter-builder-group-content-padding-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/filterBuilder/_index.scss",
+      "line": 35,
+      "widget": "filterBuilder",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filterbuilder-treeview-item-padding-left: 5px !default;",
+      "variable": "filterbuilder-treeview-item-padding-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/filterBuilder/_index.scss",
+      "setTo": "var(--dx-filter-builder-tree-view-item-padding-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/filterBuilder/_index.scss",
+      "line": 36,
+      "widget": "filterBuilder",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filterbuilder-treeview-item-padding-right: 5px !default;",
+      "variable": "filterbuilder-treeview-item-padding-right",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/filterBuilder/_index.scss",
+      "setTo": "var(--dx-filter-builder-tree-view-item-padding-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/filterBuilder/_index.scss",
+      "line": 37,
+      "widget": "filterBuilder",
+      "literals": [
+        "15px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filterbuilder-treeview-node-margin-left: 15px !default;",
+      "variable": "filterbuilder-treeview-node-margin-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/filterBuilder/_index.scss",
+      "setTo": "var(--dx-filter-builder-tree-view-node-margin-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/filterBuilder/_index.scss",
+      "line": 38,
+      "widget": "filterBuilder",
+      "literals": [
+        "15px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filterbuilder-treeview-node-margin-right: 15px !default;",
+      "variable": "filterbuilder-treeview-node-margin-right",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/filterBuilder/_index.scss",
+      "setTo": "var(--dx-filter-builder-tree-view-node-margin-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/filterBuilder/_index.scss",
+      "line": 39,
+      "widget": "filterBuilder",
+      "literals": [
+        "360px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$filterbuilder-scrollable-max-height: 360px !default;",
+      "variable": "filterbuilder-scrollable-max-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/filterBuilder/_index.scss",
+      "setTo": "var(--dx-filter-builder-scrollable-max-height)"
+    },
+    {
+      "file": "scss/widgets/base/gantt/_index.scss",
+      "line": 2,
+      "widget": "gantt",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$gantt-toolbar-separator-border-left: 1px solid transparent !default;",
+      "variable": "gantt-toolbar-separator-border-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gantt/_index.scss",
+      "setTo": "var(--dx-gantt-toolbar-separator-border-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/gantt/_index.scss",
+      "line": 3,
+      "widget": "gantt",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$gantt-splitter-bar-width: 2px !default;",
+      "variable": "gantt-splitter-bar-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gantt/_index.scss",
+      "setTo": "var(--dx-gantt-splitter-bar-width)"
+    },
+    {
+      "file": "scss/widgets/base/gantt/_index.scss",
+      "line": 4,
+      "widget": "gantt",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$gantt-view-min-width: 1px !default;",
+      "variable": "gantt-view-min-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gantt/_index.scss",
+      "setTo": "var(--dx-gantt-view-min-width)"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_variables.scss",
+      "line": 4,
+      "widget": "gridBase",
+      "literals": [
+        "7px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$grid-cell-padding: 7px !default;",
+      "variable": "grid-cell-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gridBase/_index.scss",
+      "setTo": "var(--dx-grid-cell-content-padding)"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_variables.scss",
+      "line": 5,
+      "widget": "gridBase",
+      "literals": [
+        "32px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$grid-texteditor-input-padding: 32px !default;",
+      "variable": "grid-texteditor-input-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gridBase/_index.scss",
+      "setTo": "var(--dx-grid-editor-input-padding)"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_variables.scss",
+      "line": 8,
+      "widget": "gridBase",
+      "literals": [
+        "14px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$grid-total-footer-padding-block: 14px !default;",
+      "variable": "grid-total-footer-padding-block",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gridBase/_index.scss",
+      "setTo": "var(--dx-grid-summary-padding-block)"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_variables.scss",
+      "line": 9,
+      "widget": "gridBase",
+      "literals": [
+        "70px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$grid-command-select-column-width: 70px !default;",
+      "variable": "grid-command-select-column-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gridBase/_index.scss",
+      "setTo": "var(--dx-grid-command-select-column-width)"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_variables.scss",
+      "line": 10,
+      "widget": "gridBase",
+      "literals": [
+        "100px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$grid-command-edit-column-width: 100px !default;",
+      "variable": "grid-command-edit-column-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gridBase/_index.scss",
+      "setTo": "var(--dx-grid-command-edit-column-width)"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_variables.scss",
+      "line": 11,
+      "widget": "gridBase",
+      "literals": [
+        "80px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$grid-command-edit-column-with-icons-width: 80px !default;",
+      "variable": "grid-command-edit-column-with-icons-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gridBase/_index.scss",
+      "setTo": "var(--dx-grid-command-edit-column-with-icons-width)"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_variables.scss",
+      "line": 12,
+      "widget": "gridBase",
+      "literals": [
+        "30px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$grid-command-expand-column-width: 30px !default;",
+      "variable": "grid-command-expand-column-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gridBase/_index.scss",
+      "setTo": "var(--dx-grid-command-expand-column-width)"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_variables.scss",
+      "line": 13,
+      "widget": "gridBase",
+      "literals": [
+        "36px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$grid-command-adaptive-column-width: 36px !default;",
+      "variable": "grid-command-adaptive-column-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gridBase/_index.scss",
+      "setTo": "var(--dx-grid-command-adaptive-column-width)"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_variables.scss",
+      "line": 14,
+      "widget": "gridBase",
+      "literals": [
+        "14px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$grid-column-header-indicator-width: 14px !default;",
+      "variable": "grid-column-header-indicator-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gridBase/_index.scss",
+      "setTo": "var(--dx-grid-column-indicator-width)"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_variables.scss",
+      "line": 15,
+      "widget": "gridBase",
+      "literals": [
+        "3px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$grid-text-content-margin: 3px !default;",
+      "variable": "grid-text-content-margin",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gridBase/_index.scss",
+      "setTo": "var(--dx-grid-header-text-margin-inline)"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_variables.scss",
+      "line": 16,
+      "widget": "gridBase",
+      "literals": [
+        "12px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$grid-sort-index-width: 12px !default;",
+      "variable": "grid-sort-index-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gridBase/_index.scss",
+      "setTo": "var(--dx-grid-sort-index-width)"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_variables.scss",
+      "line": 17,
+      "widget": "gridBase",
+      "literals": [
+        "3px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$grid-sort-index-offset: 3px !default;",
+      "variable": "grid-sort-index-offset",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gridBase/_index.scss",
+      "setTo": "var(--dx-grid-sort-index-offset)"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_variables.scss",
+      "line": 18,
+      "widget": "gridBase",
+      "literals": [
+        "50px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$grid-ai-assistant-confirm-dialog-button-width: 50px !default;",
+      "variable": "grid-ai-assistant-confirm-dialog-button-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gridBase/_index.scss",
+      "setTo": "var(--dx-grid-ai-confirm-dialog-button-width)"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_variables.scss",
+      "line": 21,
+      "widget": "gridBase",
+      "literals": [
+        "7px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$grid-context-menu-item-padding-block: 7px !default;",
+      "variable": "grid-context-menu-item-padding-block",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gridBase/_index.scss",
+      "setTo": "var(--dx-grid-context-menu-item-padding-block)"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_variables.scss",
+      "line": 22,
+      "widget": "gridBase",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$grid-context-menu-item-padding-inline-start: 5px !default;",
+      "variable": "grid-context-menu-item-padding-inline-start",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gridBase/_index.scss",
+      "setTo": "var(--dx-grid-context-menu-item-padding-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_variables.scss",
+      "line": 23,
+      "widget": "gridBase",
+      "literals": [
+        "30px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$grid-context-menu-item-padding-inline-end: 30px !default;",
+      "variable": "grid-context-menu-item-padding-inline-end",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gridBase/_index.scss",
+      "setTo": "var(--dx-grid-context-menu-item-padding-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_variables.scss",
+      "line": 24,
+      "widget": "gridBase",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$grid-context-menu-overlay-item-padding: 5px !default;",
+      "variable": "grid-context-menu-overlay-item-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gridBase/_index.scss",
+      "setTo": "var(--dx-grid-context-menu-overlay-item-padding)"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_variables.scss",
+      "line": 25,
+      "widget": "gridBase",
+      "literals": [
+        "30px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$grid-context-menu-overlay-item-padding-inline-end: 30px !default;",
+      "variable": "grid-context-menu-overlay-item-padding-inline-end",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gridBase/_index.scss",
+      "setTo": "var(--dx-grid-context-menu-overlay-item-padding-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_variables.scss",
+      "line": 26,
+      "widget": "gridBase",
+      "literals": [
+        "8px",
+        "5px",
+        "7px"
+      ],
+      "occurrences": 4,
+      "marker": null,
+      "text": "$grid-menu-bar-item-padding: 8px 5px 7px 5px !default;",
+      "variable": "grid-menu-bar-item-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gridBase/_index.scss",
+      "setTo": "var(--dx-grid-menu-bar-item-padding)"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_variables.scss",
+      "line": 27,
+      "widget": "gridBase",
+      "literals": [
+        "6px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$grid-menu-caption-padding-inline-start: 6px !default;",
+      "variable": "grid-menu-caption-padding-inline-start",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gridBase/_index.scss",
+      "setTo": "var(--dx-grid-menu-caption-padding-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_variables.scss",
+      "line": 28,
+      "widget": "gridBase",
+      "literals": [
+        "16px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$grid-column-chooser-title-font-size: 16px !default;",
+      "variable": "grid-column-chooser-title-font-size",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gridBase/_index.scss",
+      "setTo": "var(--dx-grid-column-chooser-title-font-size)"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_variables.scss",
+      "line": 29,
+      "widget": "gridBase",
+      "literals": [
+        "20px"
+      ],
+      "occurrences": 3,
+      "marker": null,
+      "text": "$grid-column-chooser-content-padding: 0 20px 20px 20px !default;",
+      "variable": "grid-column-chooser-content-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gridBase/_index.scss",
+      "setTo": "var(--dx-grid-column-chooser-content-padding)"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_variables.scss",
+      "line": 30,
+      "widget": "gridBase",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$grid-column-chooser-item-margin-block-end: 10px !default;",
+      "variable": "grid-column-chooser-item-margin-block-end",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gridBase/_index.scss",
+      "setTo": "var(--dx-grid-column-chooser-item-margin-block-end)"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_variables.scss",
+      "line": 31,
+      "widget": "gridBase",
+      "literals": [
+        "4px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$grid-column-chooser-tree-view-item-padding-inline-start: 4px !default;",
+      "variable": "grid-column-chooser-tree-view-item-padding-inline-start",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gridBase/_index.scss",
+      "setTo": "var(--dx-grid-column-chooser-tree-view-item-padding-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_variables.scss",
+      "line": 32,
+      "widget": "gridBase",
+      "literals": [
+        "3px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$grid-column-separator-width: 3px !default;",
+      "variable": "grid-column-separator-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gridBase/_index.scss",
+      "setTo": "var(--dx-grid-column-separator-width)"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_variables.scss",
+      "line": 33,
+      "widget": "gridBase",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$grid-toolbar-button-margin-inline-start: 10px !default;",
+      "variable": "grid-toolbar-button-margin-inline-start",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gridBase/_index.scss",
+      "setTo": "var(--dx-grid-toolbar-button-margin-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_variables.scss",
+      "line": 34,
+      "widget": "gridBase",
+      "literals": [
+        "15px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$grid-search-panel-margin-inline-start: 15px !default;",
+      "variable": "grid-search-panel-margin-inline-start",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gridBase/_index.scss",
+      "setTo": "var(--dx-grid-search-panel-margin-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_variables.scss",
+      "line": 35,
+      "widget": "gridBase",
+      "literals": [
+        "100px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$grid-rowsview-empty-height: 100px !default;",
+      "variable": "grid-rowsview-empty-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gridBase/_index.scss",
+      "setTo": "var(--dx-grid-rowsview-empty-height)"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_variables.scss",
+      "line": 36,
+      "widget": "gridBase",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$grid-bottom-load-panel-padding: 10px !default;",
+      "variable": "grid-bottom-load-panel-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gridBase/_index.scss",
+      "setTo": "var(--dx-grid-bottom-load-panel-padding)"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_variables.scss",
+      "line": 37,
+      "widget": "gridBase",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$grid-filter-panel-padding: 10px !default;",
+      "variable": "grid-filter-panel-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gridBase/_index.scss",
+      "setTo": "var(--dx-grid-filter-panel-padding)"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_variables.scss",
+      "line": 38,
+      "widget": "gridBase",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$grid-filter-panel-checkbox-padding-inline-end: 10px !default;",
+      "variable": "grid-filter-panel-checkbox-padding-inline-end",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gridBase/_index.scss",
+      "setTo": "var(--dx-grid-filter-panel-checkbox-padding-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/_variables.scss",
+      "line": 39,
+      "widget": "gridBase",
+      "literals": [
+        "7px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$grid-filter-panel-icon-margin-inline-end: 7px !default;",
+      "variable": "grid-filter-panel-icon-margin-inline-end",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gridBase/_index.scss",
+      "setTo": "var(--dx-grid-filter-panel-icon-margin-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/layout/aiChat/_variables.scss",
+      "line": 1,
+      "widget": "gridBase",
+      "literals": [
+        "4px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$ai-chat-toolbar-item-spacing: 4px !default;",
+      "variable": "ai-chat-toolbar-item-spacing",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gridBase/_index.scss",
+      "setTo": "var(--dx-grid-ai-chat-toolbar-item-padding-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/layout/aiChat/_variables.scss",
+      "line": 2,
+      "widget": "gridBase",
+      "literals": [
+        "8px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$ai-chat-message-gap: 8px !default;",
+      "variable": "ai-chat-message-gap",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gridBase/_index.scss",
+      "setTo": "var(--dx-grid-ai-chat-message-gap)"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/layout/aiChat/_variables.scss",
+      "line": 3,
+      "widget": "gridBase",
+      "literals": [
+        "4px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$ai-chat-message-content-gap: 4px !default;",
+      "variable": "ai-chat-message-content-gap",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gridBase/_index.scss",
+      "setTo": "var(--dx-grid-ai-chat-message-content-gap)"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/layout/aiChat/_variables.scss",
+      "line": 4,
+      "widget": "gridBase",
+      "literals": [
+        "280px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$ai-chat-message-width: 280px !default;",
+      "variable": "ai-chat-message-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gridBase/_index.scss",
+      "setTo": "var(--dx-grid-ai-chat-message-min-width)"
+    },
+    {
+      "file": "scss/widgets/base/gridBase/layout/aiChat/_variables.scss",
+      "line": 5,
+      "widget": "gridBase",
+      "literals": [
+        "4px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$ai-chat-message-regenerate-button-border-radius: 4px !default;",
+      "variable": "ai-chat-message-regenerate-button-border-radius",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/gridBase/_index.scss",
+      "setTo": "var(--dx-grid-ai-chat-message-regenerate-button-border-radius)"
+    },
+    {
+      "file": "scss/widgets/base/list/_index.scss",
+      "line": 6,
+      "widget": "list",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$list-searchbox-margin-bottom: 5px !default;",
+      "variable": "list-searchbox-margin-bottom",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/list/_index.scss",
+      "setTo": "var(--dx-list-search-box-margin-block-end)"
+    },
+    {
+      "file": "scss/widgets/base/list/_index.scss",
+      "line": 9,
+      "widget": "list",
+      "literals": [
+        "20px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$list-item-badge-container-width: 20px !default;",
+      "variable": "list-item-badge-container-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/list/_index.scss",
+      "setTo": "var(--dx-list-item-badge-container-width)"
+    },
+    {
+      "file": "scss/widgets/base/list/_index.scss",
+      "line": 10,
+      "widget": "list",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$list-slide-menu-button-padding: 0 10px !default;",
+      "variable": "list-slide-menu-button-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/list/_index.scss",
+      "setTo": "var(--dx-list-slide-menu-button-padding)"
+    },
+    {
+      "file": "scss/widgets/base/list/_index.scss",
+      "line": 11,
+      "widget": "list",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$list-static-delete-button-padding: 0 5px !default;",
+      "variable": "list-static-delete-button-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/list/_index.scss",
+      "setTo": "var(--dx-list-delete-button-static-padding)"
+    },
+    {
+      "file": "scss/widgets/base/list/_index.scss",
+      "line": 12,
+      "widget": "list",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$list-next-button-padding: 5px !default;",
+      "variable": "list-next-button-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/list/_index.scss",
+      "setTo": "var(--dx-list-next-button-padding)"
+    },
+    {
+      "file": "scss/widgets/base/pivotGrid/_index.scss",
+      "line": 5,
+      "widget": "pivotGrid",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pivotgrid-position-indicator-vertical-height: 2px !default;",
+      "variable": "pivotgrid-position-indicator-vertical-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss",
+      "setTo": "var(--dx-pivot-grid-position-indicator-vertical-height)"
+    },
+    {
+      "file": "scss/widgets/base/pivotGrid/_index.scss",
+      "line": 6,
+      "widget": "pivotGrid",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pivotgrid-position-indicator-horizontal-width: 2px !default;",
+      "variable": "pivotgrid-position-indicator-horizontal-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss",
+      "setTo": "var(--dx-pivot-grid-position-indicator-horizontal-width)"
+    },
+    {
+      "file": "scss/widgets/base/pivotGrid/_index.scss",
+      "line": 7,
+      "widget": "pivotGrid",
+      "literals": [
+        "3px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pivotgrid-position-indicator-last-margin-left: 3px !default;",
+      "variable": "pivotgrid-position-indicator-last-margin-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss",
+      "setTo": "var(--dx-pivot-grid-position-indicator-last-margin-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/pivotGrid/_index.scss",
+      "line": 8,
+      "widget": "pivotGrid",
+      "literals": [
+        "4px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pivotgrid-area-box-margin-bottom: 4px !default;",
+      "variable": "pivotgrid-area-box-margin-bottom",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss",
+      "setTo": "var(--dx-pivot-grid-area-box-margin-block-end)"
+    },
+    {
+      "file": "scss/widgets/base/pivotGrid/_index.scss",
+      "line": 9,
+      "widget": "pivotGrid",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pivotgrid-expand-icon-container-outline: 2px solid !default;",
+      "variable": "pivotgrid-expand-icon-container-outline",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss",
+      "setTo": "var(--dx-pivot-grid-expand-icon-container-outline)"
+    },
+    {
+      "file": "scss/widgets/base/pivotGrid/_index.scss",
+      "line": 10,
+      "widget": "pivotGrid",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pivotgrid-toolbar-margin-right: 10px !default;",
+      "variable": "pivotgrid-toolbar-margin-right",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss",
+      "setTo": "var(--dx-pivot-grid-toolbar-margin-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/pivotGrid/_index.scss",
+      "line": 11,
+      "widget": "pivotGrid",
+      "literals": [
+        "4px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pivotgrid-field-chooser-button-margin-right: 4px !default;",
+      "variable": "pivotgrid-field-chooser-button-margin-right",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss",
+      "setTo": "var(--dx-pivot-grid-field-chooser-button-margin-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/pivotGrid/_index.scss",
+      "line": 12,
+      "widget": "pivotGrid",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pivotgrid-button-margin: 1px !default;",
+      "variable": "pivotgrid-button-margin",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss",
+      "setTo": "var(--dx-pivot-grid-button-margin)"
+    },
+    {
+      "file": "scss/widgets/base/pivotGrid/_index.scss",
+      "line": 13,
+      "widget": "pivotGrid",
+      "literals": [
+        "50px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pivotgrid-last-cell-min-width: 50px !default;",
+      "variable": "pivotgrid-last-cell-min-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss",
+      "setTo": "var(--dx-pivot-grid-last-cell-min-width)"
+    },
+    {
+      "file": "scss/widgets/base/pivotGrid/_index.scss",
+      "line": 14,
+      "widget": "pivotGrid",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pivotgrid-icon-sorted-margin-left: 5px !default;",
+      "variable": "pivotgrid-icon-sorted-margin-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss",
+      "setTo": "var(--dx-pivot-grid-icon-sorted-margin-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/pivotGrid/_index.scss",
+      "line": 15,
+      "widget": "pivotGrid",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pivotgrid-fields-area-head-padding: 0 2px !default;",
+      "variable": "pivotgrid-fields-area-head-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss",
+      "setTo": "var(--dx-pivot-grid-fields-area-head-padding)"
+    },
+    {
+      "file": "scss/widgets/base/pivotGrid/_index.scss",
+      "line": 16,
+      "widget": "pivotGrid",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pivotgrid-treeview-search-margin: 5px !default;",
+      "variable": "pivotgrid-treeview-search-margin",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss",
+      "setTo": "var(--dx-pivot-grid-tree-view-search-margin)"
+    },
+    {
+      "file": "scss/widgets/base/pivotGrid/_index.scss",
+      "line": 17,
+      "widget": "pivotGrid",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pivotgrid-area-padding: 5px !default;",
+      "variable": "pivotgrid-area-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss",
+      "setTo": "var(--dx-pivot-grid-area-padding)"
+    },
+    {
+      "file": "scss/widgets/base/pivotGrid/_index.scss",
+      "line": 18,
+      "widget": "pivotGrid",
+      "literals": [
+        "3px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pivotgrid-area-fields-margin-top: 3px !default;",
+      "variable": "pivotgrid-area-fields-margin-top",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss",
+      "setTo": "var(--dx-pivot-grid-area-fields-margin-block-start)"
+    },
+    {
+      "file": "scss/widgets/base/pivotGrid/_index.scss",
+      "line": 19,
+      "widget": "pivotGrid",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pivotgrid-position-indicator-last-margin-left-rtl: 1px !default;",
+      "variable": "pivotgrid-position-indicator-last-margin-left-rtl",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss",
+      "setTo": "var(--dx-pivot-grid-position-indicator-last-rtl-margin-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/pivotGrid/_index.scss",
+      "line": 20,
+      "widget": "pivotGrid",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pivotgrid-toolbar-margin-left: 10px !default;",
+      "variable": "pivotgrid-toolbar-margin-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss",
+      "setTo": "var(--dx-pivot-grid-toolbar-margin-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/pivotGrid/_index.scss",
+      "line": 21,
+      "widget": "pivotGrid",
+      "literals": [
+        "4px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pivotgrid-field-chooser-button-margin-left: 4px !default;",
+      "variable": "pivotgrid-field-chooser-button-margin-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss",
+      "setTo": "var(--dx-pivot-grid-field-chooser-button-margin-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/pivotGrid/_index.scss",
+      "line": 22,
+      "widget": "pivotGrid",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pivotgrid-fields-area-head-padding-left: 2px !default;",
+      "variable": "pivotgrid-fields-area-head-padding-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss",
+      "setTo": "var(--dx-pivot-grid-fields-area-head-padding-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/pivotGrid/_index.scss",
+      "line": 23,
+      "widget": "pivotGrid",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pivotgrid-icon-sorted-margin-right: 5px !default;",
+      "variable": "pivotgrid-icon-sorted-margin-right",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss",
+      "setTo": "var(--dx-pivot-grid-icon-sorted-margin-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/pivotGrid/_index.scss",
+      "line": 24,
+      "widget": "pivotGrid",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pivotgrid-header-cell-side-padding: 2px !default;",
+      "variable": "pivotgrid-header-cell-side-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss",
+      "setTo": "var(--dx-pivot-grid-header-cell-padding-inline)"
+    },
+    {
+      "file": "scss/widgets/base/pivotGrid/_index.scss",
+      "line": 25,
+      "widget": "pivotGrid",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pivotgrid-fields-area-head-cell-side-padding: 2px !default;",
+      "variable": "pivotgrid-fields-area-head-cell-side-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss",
+      "setTo": "var(--dx-pivot-grid-fields-area-head-cell-padding-inline)"
+    },
+    {
+      "file": "scss/widgets/base/pivotGrid/_index.scss",
+      "line": 50,
+      "widget": "pivotGrid",
+      "literals": [
+        "100px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pivotgrid-common-field-chooser-drag-width: 100px !default;",
+      "variable": "pivotgrid-common-field-chooser-drag-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss",
+      "setTo": "var(--dx-pivot-grid-field-chooser-drag-width)"
+    },
+    {
+      "file": "scss/widgets/base/pivotGrid/_index.scss",
+      "line": 51,
+      "widget": "pivotGrid",
+      "literals": [
+        "100px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pivotgrid-common-field-chooser-drag-height: 100px !default;",
+      "variable": "pivotgrid-common-field-chooser-drag-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss",
+      "setTo": "var(--dx-pivot-grid-field-chooser-drag-height)"
+    },
+    {
+      "file": "scss/widgets/base/pivotGrid/_index.scss",
+      "line": 59,
+      "widget": "pivotGrid",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pivotgrid-border-width: 1px !default;",
+      "variable": "pivotgrid-border-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss",
+      "setTo": "var(--dx-pivot-grid-border-width)"
+    },
+    {
+      "file": "scss/widgets/base/pivotGrid/_index.scss",
+      "line": 60,
+      "widget": "pivotGrid",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pivotgrid-focus-outline-width: 2px !default;",
+      "variable": "pivotgrid-focus-outline-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss",
+      "setTo": "var(--dx-focus-rect-outline-width)"
+    },
+    {
+      "file": "scss/widgets/base/pivotGrid/_index.scss",
+      "line": 61,
+      "widget": "pivotGrid",
+      "literals": [
+        "-2px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pivotgrid-focus-outline-offset: -2px !default;",
+      "variable": "pivotgrid-focus-outline-offset",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss",
+      "setTo": "var(--dx-focus-rect-outline-offset-inset)"
+    },
+    {
+      "file": "scss/widgets/base/pivotGrid/_index.scss",
+      "line": 66,
+      "widget": "pivotGrid",
+      "literals": [
+        "14px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pivotgrid-icon-size: 14px !default;",
+      "variable": "pivotgrid-icon-size",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss",
+      "setTo": "var(--dx-pivot-grid-icon-size)"
+    },
+    {
+      "file": "scss/widgets/base/pivotGrid/_index.scss",
+      "line": 67,
+      "widget": "pivotGrid",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$pivotgrid-common-field-padding: 2px !default;",
+      "variable": "pivotgrid-common-field-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/pivotGrid/_index.scss",
+      "setTo": "var(--dx-pivot-grid-field-padding)"
+    },
+    {
+      "file": "scss/widgets/base/radioGroup/_index.scss",
+      "line": 4,
+      "widget": "radioGroup",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$radiogroup-radio-value-container-padding-inline-end: 10px !default;",
+      "variable": "radiogroup-radio-value-container-padding-inline-end",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/radioGroup/_index.scss",
+      "setTo": "var(--dx-radio-button-value-container-padding-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/radioGroup/_index.scss",
+      "line": 5,
+      "widget": "radioGroup",
+      "literals": [
+        "17px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$radiogroup-collection-column-gap: 17px !default;",
+      "variable": "radiogroup-collection-column-gap",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/radioGroup/_index.scss",
+      "setTo": "var(--dx-radio-group-collection-horizontal-column-gap)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_common.scss",
+      "line": 5,
+      "widget": "scheduler",
+      "literals": [
+        "22px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-appointment-collector-height: 22px !default;",
+      "variable": "scheduler-appointment-collector-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-appointment-collector-height)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 1,
+      "widget": "scheduler",
+      "literals": [
+        "22px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-appointment-collector-height: 22px !default;",
+      "variable": "scheduler-appointment-collector-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-appointment-collector-height)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 48,
+      "widget": "scheduler",
+      "literals": [
+        "3px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-common-collector-margin: 0 3px !default;",
+      "variable": "scheduler-common-collector-margin",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-common-collector-margin)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 49,
+      "widget": "scheduler",
+      "literals": [
+        "28px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-common-collector-size: 28px !default;",
+      "variable": "scheduler-common-collector-size",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-common-collector-size)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 56,
+      "widget": "scheduler",
+      "literals": [
+        "15px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-tooltip-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15) !default;",
+      "variable": "scheduler-tooltip-shadow",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-tooltip-shadow)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 58,
+      "widget": "scheduler",
+      "literals": [
+        "360px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-tooltip-width: 360px !default;",
+      "variable": "scheduler-tooltip-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-tooltip-width)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 59,
+      "widget": "scheduler",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-tooltip-content-padding: 5px !default;",
+      "variable": "scheduler-tooltip-content-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-tooltip-content-padding)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 60,
+      "widget": "scheduler",
+      "literals": [
+        "7px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-tooltip-title-margin-top: 7px !default;",
+      "variable": "scheduler-tooltip-title-margin-top",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-tooltip-title-margin-block-start)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 61,
+      "widget": "scheduler",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-tooltip-title-margin-left: 5px !default;",
+      "variable": "scheduler-tooltip-title-margin-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-tooltip-title-margin-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 62,
+      "widget": "scheduler",
+      "literals": [
+        "5px",
+        "10px"
+      ],
+      "occurrences": 2,
+      "marker": null,
+      "text": "$scheduler-tooltip-date-margin: 5px 10px !default;",
+      "variable": "scheduler-tooltip-date-margin",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-tooltip-date-margin)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 63,
+      "widget": "scheduler",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-tooltip-remove-margin-top: 10px !default;",
+      "variable": "scheduler-tooltip-remove-margin-top",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-tooltip-remove-margin-block-start)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 64,
+      "widget": "scheduler",
+      "literals": [
+        "16px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-tooltip-subject-font-size: 16px !default;",
+      "variable": "scheduler-tooltip-subject-font-size",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-tooltip-subject-font-size)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 65,
+      "widget": "scheduler",
+      "literals": [
+        "12px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-tooltip-date-font-size: 12px !default;",
+      "variable": "scheduler-tooltip-date-font-size",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-tooltip-date-font-size)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 67,
+      "widget": "scheduler",
+      "literals": [
+        "11px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-appointment-content-details-font-size: 11px !default;",
+      "variable": "scheduler-appointment-content-details-font-size",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-appointment-content-details-font-size)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 86,
+      "widget": "scheduler",
+      "literals": [
+        "4px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-appointment-min-size: 4px !default;",
+      "variable": "scheduler-appointment-min-size",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-appointment-min-size)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 87,
+      "widget": "scheduler",
+      "literals": [
+        "5px",
+        "7px"
+      ],
+      "occurrences": 2,
+      "marker": null,
+      "text": "$scheduler-appointment-content-padding: 5px 7px !default;",
+      "variable": "scheduler-appointment-content-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-appointment-content-padding)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 88,
+      "widget": "scheduler",
+      "literals": [
+        "40px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-appointment-reduced-content-padding: 40px !default;",
+      "variable": "scheduler-appointment-reduced-content-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-appointment-reduced-content-padding)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 98,
+      "widget": "scheduler",
+      "literals": [
+        "7px",
+        "15px"
+      ],
+      "occurrences": 3,
+      "marker": null,
+      "text": "$scheduler-appointment-dragging-shadow: 7px 7px 15px 0 rgba(50, 50, 50, 0.2) !default;",
+      "variable": "scheduler-appointment-dragging-shadow",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-appointment-dragging-shadow)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 108,
+      "widget": "scheduler",
+      "literals": [
+        "12px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-grouped-appointment-month-text-size: 12px !default;",
+      "variable": "scheduler-grouped-appointment-month-text-size",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-appointment-month-text-font-size)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 110,
+      "widget": "scheduler",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-border-width: 1px !default;",
+      "variable": "scheduler-border-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-border-width)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 111,
+      "widget": "scheduler",
+      "literals": [
+        "20px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-workspace-info-font-size: 20px !default;",
+      "variable": "scheduler-workspace-info-font-size",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-workspace-info-font-size)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 112,
+      "widget": "scheduler",
+      "literals": [
+        "14px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-small-font-size: 14px !default;",
+      "variable": "scheduler-small-font-size",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-small-font-size)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 113,
+      "widget": "scheduler",
+      "literals": [
+        "30px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-group-header-table-cell-height: 30px !default;",
+      "variable": "scheduler-group-header-table-cell-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-group-header-cell-height)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 114,
+      "widget": "scheduler",
+      "literals": [
+        "16px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-month-date-text-size: 16px !default;",
+      "variable": "scheduler-month-date-text-size",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-month-date-text-font-size)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 115,
+      "widget": "scheduler",
+      "literals": [
+        "6px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-month-date-text-padding: 6px !default;",
+      "variable": "scheduler-month-date-text-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-month-date-text-padding)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 120,
+      "widget": "scheduler",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-reduced-icon-offset: 5px !default;",
+      "variable": "scheduler-reduced-icon-offset",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-reduced-icon-inset-inline)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 121,
+      "widget": "scheduler",
+      "literals": [
+        "20px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-recurrence-icon-offset: 20px !default;",
+      "variable": "scheduler-recurrence-icon-offset",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-recurrence-icon-inset-inline)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 123,
+      "widget": "scheduler",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-agenda-appointment-margin: 5px !default;",
+      "variable": "scheduler-agenda-appointment-margin",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-agenda-appointment-margin)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 124,
+      "widget": "scheduler",
+      "literals": [
+        "20px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-agenda-last-in-date-appointment-margin: 20px !default;",
+      "variable": "scheduler-agenda-last-in-date-appointment-margin",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-agenda-appointment-last-margin)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 130,
+      "widget": "scheduler",
+      "literals": [
+        "30px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-time-indicator-font-size: 30px !default;",
+      "variable": "scheduler-time-indicator-font-size",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-time-indicator-font-size)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 131,
+      "widget": "scheduler",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-time-indicator-size: 1px !default;",
+      "variable": "scheduler-time-indicator-size",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-time-indicator-size)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 139,
+      "widget": "scheduler",
+      "literals": [
+        "18px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-appointment-icon-font-size: 18px !default;",
+      "variable": "scheduler-appointment-icon-font-size",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-appointment-icon-font-size)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 145,
+      "widget": "scheduler",
+      "literals": [
+        "12px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$agenda-appointment-details-font-size: 12px !default;",
+      "variable": "agenda-appointment-details-font-size",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-agenda-details-font-size)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 148,
+      "widget": "scheduler",
+      "literals": [
+        "3px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-appointment-reduced-icon-top: 3px !default;",
+      "variable": "scheduler-appointment-reduced-icon-top",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-appointment-reduced-icon-inset-block-start)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 149,
+      "widget": "scheduler",
+      "literals": [
+        "4px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-appointment-active-marker-border-radius: 4px !default;",
+      "variable": "scheduler-appointment-active-marker-border-radius",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-appointment-marker-border-radius-active)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 150,
+      "widget": "scheduler",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-appointment-content-details-margin-top: 2px !default;",
+      "variable": "scheduler-appointment-content-details-margin-top",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-appointment-content-details-margin-block-start)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 151,
+      "widget": "scheduler",
+      "literals": [
+        "3px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-appointment-reduced-icon-rtl-left: 3px !default;",
+      "variable": "scheduler-appointment-reduced-icon-rtl-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-appointment-reduced-icon-rtl-inset-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 152,
+      "widget": "scheduler",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$agenda-appointment-item-padding: 10px !default;",
+      "variable": "agenda-appointment-item-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-agenda-appointment-item-padding)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 153,
+      "widget": "scheduler",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$agenda-appointment-item-border-radius: 5px !default;",
+      "variable": "agenda-appointment-item-border-radius",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-agenda-appointment-item-border-radius)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 154,
+      "widget": "scheduler",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$agenda-appointment-right-layout-margin-left: 10px !default;",
+      "variable": "agenda-appointment-right-layout-margin-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-agenda-appointment-right-layout-margin-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 155,
+      "widget": "scheduler",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$agenda-appointment-allday-padding-right: 5px !default;",
+      "variable": "agenda-appointment-allday-padding-right",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-agenda-appointment-allday-padding-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 156,
+      "widget": "scheduler",
+      "literals": [
+        "15px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$agenda-appointment-resource-item-margin-left: 15px !default;",
+      "variable": "agenda-appointment-resource-item-margin-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-agenda-appointment-resource-item-margin-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 157,
+      "widget": "scheduler",
+      "literals": [
+        "3px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$agenda-appointment-resource-value-margin-left: 3px !default;",
+      "variable": "agenda-appointment-resource-value-margin-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-agenda-appointment-resource-value-margin-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 158,
+      "widget": "scheduler",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$agenda-appointment-rtl-margin-right: 10px !default;",
+      "variable": "agenda-appointment-rtl-margin-right",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-agenda-appointment-rtl-margin-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 202,
+      "widget": "scheduler",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-views-header-border: 2px solid !default;",
+      "variable": "scheduler-views-header-border",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-views-header-border)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 203,
+      "widget": "scheduler",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-views-empty-cell-border-bottom: 1px solid !default;",
+      "variable": "scheduler-views-empty-cell-border-bottom",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-views-empty-cell-border-block-end)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 204,
+      "widget": "scheduler",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-views-empty-cell-border-right: 1px solid !default;",
+      "variable": "scheduler-views-empty-cell-border-right",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-views-empty-cell-border-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 205,
+      "widget": "scheduler",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-views-empty-cell-border-left: 1px solid !default;",
+      "variable": "scheduler-views-empty-cell-border-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-views-empty-cell-border-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 206,
+      "widget": "scheduler",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-views-first-child-border-left: 1px solid transparent !default;",
+      "variable": "scheduler-views-first-child-border-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-views-first-child-border-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 207,
+      "widget": "scheduler",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-views-time-panel-border-bottom: 1px solid transparent !default;",
+      "variable": "scheduler-views-time-panel-border-bottom",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-views-time-panel-border-block-end)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 208,
+      "widget": "scheduler",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-views-group-header-padding: 0 5px !default;",
+      "variable": "scheduler-views-group-header-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-views-group-header-padding)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 209,
+      "widget": "scheduler",
+      "literals": [
+        "5px",
+        "10px"
+      ],
+      "occurrences": 2,
+      "marker": null,
+      "text": "$scheduler-views-group-header-padding-alt: 0 5px 0 10px !default;",
+      "variable": "scheduler-views-group-header-padding-alt",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-views-sidebar-group-header-padding)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 210,
+      "widget": "scheduler",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-views-time-indicator-height: 1px !default;",
+      "variable": "scheduler-views-time-indicator-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-views-time-indicator-height)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 211,
+      "widget": "scheduler",
+      "literals": [
+        "40px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-views-group-header-content-height: 40px !default;",
+      "variable": "scheduler-views-group-header-content-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-views-group-header-content-height)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 212,
+      "widget": "scheduler",
+      "literals": [
+        "100px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-views-vertical-group-min-height: 100px !default;",
+      "variable": "scheduler-views-vertical-group-min-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-views-vertical-group-min-height)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 214,
+      "widget": "scheduler",
+      "literals": [
+        "100px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-timeline-min-height: 100px !default;",
+      "variable": "scheduler-timeline-min-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-timeline-min-height)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 215,
+      "widget": "scheduler",
+      "literals": [
+        "160px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-timeline-group-two-empty-cell-width: 160px !default;",
+      "variable": "scheduler-timeline-group-two-empty-cell-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-timeline-group-two-empty-cell-width)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 216,
+      "widget": "scheduler",
+      "literals": [
+        "80px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-timeline-group-header-width: 80px !default;",
+      "variable": "scheduler-timeline-group-header-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-timeline-group-header-width)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 217,
+      "widget": "scheduler",
+      "literals": [
+        "240px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-timeline-group-three-empty-cell-width: 240px !default;",
+      "variable": "scheduler-timeline-group-three-empty-cell-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-timeline-group-three-empty-cell-width)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 218,
+      "widget": "scheduler",
+      "literals": [
+        "200px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-timeline-cell-width: 200px !default;",
+      "variable": "scheduler-timeline-cell-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-timeline-cell-width)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 219,
+      "widget": "scheduler",
+      "literals": [
+        "70px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-agenda-left-column-width: 70px !default;",
+      "variable": "scheduler-agenda-left-column-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-agenda-left-column-width)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 220,
+      "widget": "scheduler",
+      "literals": [
+        "18px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-group-header-agenda-font-size: 18px !default;",
+      "variable": "scheduler-group-header-agenda-font-size",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-group-header-agenda-font-size)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 221,
+      "widget": "scheduler",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-agenda-date-table-padding-top: 10px !default;",
+      "variable": "scheduler-agenda-date-table-padding-top",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-agenda-date-table-padding-block-start)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 222,
+      "widget": "scheduler",
+      "literals": [
+        "50px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-renovation-virtual-row-height: 50px !default;",
+      "variable": "scheduler-renovation-virtual-row-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-virtual-row-height)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 283,
+      "widget": "scheduler",
+      "literals": [
+        "7px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-appointment-content-horizontal-padding: 0 7px !default;",
+      "variable": "scheduler-appointment-content-horizontal-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-all-day-appointment-content-padding)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 284,
+      "widget": "scheduler",
+      "literals": [
+        "9px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-appointment-recurrence-icon-top: 9px !default;",
+      "variable": "scheduler-appointment-recurrence-icon-top",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-appointment-recurrence-icon-inset-block-start)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 285,
+      "widget": "scheduler",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-header-panel-current-time-cell-height: 2px !default;",
+      "variable": "scheduler-header-panel-current-time-cell-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-header-panel-current-time-cell-height)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 286,
+      "widget": "scheduler",
+      "literals": [
+        "25px",
+        "7px"
+      ],
+      "occurrences": 2,
+      "marker": null,
+      "text": "$scheduler-appointment-content-recurrence-padding: 0 25px 0 7px !default;",
+      "variable": "scheduler-appointment-content-recurrence-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-recurrence-appointment-content-padding)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 287,
+      "widget": "scheduler",
+      "literals": [
+        "7px",
+        "25px"
+      ],
+      "occurrences": 2,
+      "marker": null,
+      "text": "$scheduler-rtl-padding: 0 7px 0 25px !default;",
+      "variable": "scheduler-rtl-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-rtl-padding)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 288,
+      "widget": "scheduler",
+      "literals": [
+        "24px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-appointment-collector-width: 24px !default;",
+      "variable": "scheduler-appointment-collector-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-appointment-collector-width)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/_index.scss",
+      "line": 289,
+      "widget": "scheduler",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-appointment-content-padding-right: 5px !default;",
+      "variable": "scheduler-appointment-content-padding-right",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-appointment-content-padding-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/appointment/_index.scss",
+      "line": 31,
+      "widget": "scheduler",
+      "literals": [
+        "3px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-appointment-reduced-icon-top: 3px !default;",
+      "variable": "scheduler-appointment-reduced-icon-top",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-appointment-reduced-icon-inset-block-start)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/appointment/_index.scss",
+      "line": 32,
+      "widget": "scheduler",
+      "literals": [
+        "4px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-appointment-active-marker-border-radius: 4px !default;",
+      "variable": "scheduler-appointment-active-marker-border-radius",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-appointment-marker-border-radius-active)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/appointment/_index.scss",
+      "line": 33,
+      "widget": "scheduler",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-appointment-content-details-margin-top: 2px !default;",
+      "variable": "scheduler-appointment-content-details-margin-top",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-appointment-content-details-margin-block-start)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/appointment/_index.scss",
+      "line": 34,
+      "widget": "scheduler",
+      "literals": [
+        "3px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-appointment-reduced-icon-rtl-left: 3px !default;",
+      "variable": "scheduler-appointment-reduced-icon-rtl-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-appointment-reduced-icon-rtl-inset-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/appointment/_index.scss",
+      "line": 62,
+      "widget": "scheduler",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$agenda-appointment-item-padding: 10px !default;",
+      "variable": "agenda-appointment-item-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-agenda-appointment-item-padding)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/appointment/_index.scss",
+      "line": 63,
+      "widget": "scheduler",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$agenda-appointment-item-border-radius: 5px !default;",
+      "variable": "agenda-appointment-item-border-radius",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-agenda-appointment-item-border-radius)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/appointment/_index.scss",
+      "line": 64,
+      "widget": "scheduler",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$agenda-appointment-right-layout-margin-left: 10px !default;",
+      "variable": "agenda-appointment-right-layout-margin-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-agenda-appointment-right-layout-margin-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/appointment/_index.scss",
+      "line": 65,
+      "widget": "scheduler",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$agenda-appointment-allday-padding-right: 5px !default;",
+      "variable": "agenda-appointment-allday-padding-right",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-agenda-appointment-allday-padding-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/appointment/_index.scss",
+      "line": 66,
+      "widget": "scheduler",
+      "literals": [
+        "15px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$agenda-appointment-resource-item-margin-left: 15px !default;",
+      "variable": "agenda-appointment-resource-item-margin-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-agenda-appointment-resource-item-margin-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/appointment/_index.scss",
+      "line": 67,
+      "widget": "scheduler",
+      "literals": [
+        "3px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$agenda-appointment-resource-value-margin-left: 3px !default;",
+      "variable": "agenda-appointment-resource-value-margin-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-agenda-appointment-resource-value-margin-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/appointment/_index.scss",
+      "line": 68,
+      "widget": "scheduler",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$agenda-appointment-rtl-margin-right: 10px !default;",
+      "variable": "agenda-appointment-rtl-margin-right",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-agenda-appointment-rtl-margin-inline-end)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/views/_index.scss",
+      "line": 45,
+      "widget": "scheduler",
+      "literals": [
+        "20px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-workspace-info-font-size: 20px !default;",
+      "variable": "scheduler-workspace-info-font-size",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-workspace-info-font-size)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/views/_index.scss",
+      "line": 46,
+      "widget": "scheduler",
+      "literals": [
+        "14px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-small-font-size: 14px !default;",
+      "variable": "scheduler-small-font-size",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-small-font-size)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/views/_index.scss",
+      "line": 55,
+      "widget": "scheduler",
+      "literals": [
+        "30px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-group-header-table-cell-height: 30px !default;",
+      "variable": "scheduler-group-header-table-cell-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-group-header-cell-height)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/views/_index.scss",
+      "line": 59,
+      "widget": "scheduler",
+      "literals": [
+        "16px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-month-date-text-size: 16px !default;",
+      "variable": "scheduler-month-date-text-size",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-month-date-text-font-size)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/views/_index.scss",
+      "line": 61,
+      "widget": "scheduler",
+      "literals": [
+        "6px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-month-date-text-padding: 6px !default;",
+      "variable": "scheduler-month-date-text-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-month-date-text-padding)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/views/_index.scss",
+      "line": 77,
+      "widget": "scheduler",
+      "literals": [
+        "100px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-timeline-min-height: 100px !default;",
+      "variable": "scheduler-timeline-min-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-timeline-min-height)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/views/_index.scss",
+      "line": 78,
+      "widget": "scheduler",
+      "literals": [
+        "160px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-timeline-group-two-empty-cell-width: 160px !default;",
+      "variable": "scheduler-timeline-group-two-empty-cell-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-timeline-group-two-empty-cell-width)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/views/_index.scss",
+      "line": 79,
+      "widget": "scheduler",
+      "literals": [
+        "80px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-timeline-group-header-width: 80px !default;",
+      "variable": "scheduler-timeline-group-header-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-timeline-group-header-width)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/views/_index.scss",
+      "line": 80,
+      "widget": "scheduler",
+      "literals": [
+        "240px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-timeline-group-three-empty-cell-width: 240px !default;",
+      "variable": "scheduler-timeline-group-three-empty-cell-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-timeline-group-three-empty-cell-width)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/views/_index.scss",
+      "line": 81,
+      "widget": "scheduler",
+      "literals": [
+        "200px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-timeline-cell-width: 200px !default;",
+      "variable": "scheduler-timeline-cell-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-timeline-cell-width)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/views/_index.scss",
+      "line": 95,
+      "widget": "scheduler",
+      "literals": [
+        "70px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-agenda-left-column-width: 70px !default;",
+      "variable": "scheduler-agenda-left-column-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-agenda-left-column-width)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/views/_index.scss",
+      "line": 96,
+      "widget": "scheduler",
+      "literals": [
+        "18px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-group-header-agenda-font-size: 18px !default;",
+      "variable": "scheduler-group-header-agenda-font-size",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-group-header-agenda-font-size)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/views/_index.scss",
+      "line": 97,
+      "widget": "scheduler",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-agenda-date-table-padding-top: 10px !default;",
+      "variable": "scheduler-agenda-date-table-padding-top",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-agenda-date-table-padding-block-start)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/views/_index.scss",
+      "line": 109,
+      "widget": "scheduler",
+      "literals": [
+        "50px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-renovation-virtual-row-height: 50px !default;",
+      "variable": "scheduler-renovation-virtual-row-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-virtual-row-height)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/views/agenda/_index.scss",
+      "line": 7,
+      "widget": "scheduler",
+      "literals": [
+        "70px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-agenda-left-column-width: 70px !default;",
+      "variable": "scheduler-agenda-left-column-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-agenda-left-column-width)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/views/agenda/_index.scss",
+      "line": 8,
+      "widget": "scheduler",
+      "literals": [
+        "18px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-group-header-agenda-font-size: 18px !default;",
+      "variable": "scheduler-group-header-agenda-font-size",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-group-header-agenda-font-size)"
+    },
+    {
+      "file": "scss/widgets/base/scheduler/views/timelines/_index.scss",
+      "line": 9,
+      "widget": "scheduler",
+      "literals": [
+        "100px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scheduler-timeline-min-height: 100px !default;",
+      "variable": "scheduler-timeline-min-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scheduler/_index.scss",
+      "setTo": "var(--dx-scheduler-timeline-min-height)"
+    },
+    {
+      "file": "scss/widgets/base/scrollable/_index.scss",
+      "line": 5,
+      "widget": "scrollable",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scrollable-scroll-width: 5px !default;",
+      "variable": "scrollable-scroll-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scrollable/_index.scss",
+      "setTo": "var(--dx-scrollable-scroll-width)"
+    },
+    {
+      "file": "scss/widgets/base/scrollable/_index.scss",
+      "line": 6,
+      "widget": "scrollable",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scrollable-scroll-height: 5px !default;",
+      "variable": "scrollable-scroll-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scrollable/_index.scss",
+      "setTo": "var(--dx-scrollable-scroll-height)"
+    },
+    {
+      "file": "scss/widgets/base/scrollable/_index.scss",
+      "line": 7,
+      "widget": "scrollable",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$scrollable-scroll-padding: 2px !default;",
+      "variable": "scrollable-scroll-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/scrollable/_index.scss",
+      "setTo": "var(--dx-scrollable-scroll-padding)"
+    },
+    {
+      "file": "scss/widgets/base/splitter/_index.scss",
+      "line": 2,
+      "widget": "splitter",
+      "literals": [
+        "8px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$splitter-resize-handle-gap: 8px !default;",
+      "variable": "splitter-resize-handle-gap",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/splitter/_index.scss",
+      "setTo": "var(--dx-splitter-resize-handle-gap)"
+    },
+    {
+      "file": "scss/widgets/base/stepper/layout/step/_mixins.scss",
+      "line": 77,
+      "widget": "stepper",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$indicator-ring-inset: 2px,",
+      "variable": "indicator-ring-inset",
+      "kind": "mixin-parameter",
+      "status": "parameter"
+    },
+    {
+      "file": "scss/widgets/base/stepper/layout/step/_mixins.scss",
+      "line": 78,
+      "widget": "stepper",
+      "literals": [
+        "4px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$indicator-ring-size: 4px,",
+      "variable": "indicator-ring-size",
+      "kind": "mixin-parameter",
+      "status": "parameter"
+    },
+    {
+      "file": "scss/widgets/base/stepper/layout/step/_mixins.scss",
+      "line": 79,
+      "widget": "stepper",
+      "literals": [
+        "8px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$indicator-halo-size: 8px,",
+      "variable": "indicator-halo-size",
+      "kind": "mixin-parameter",
+      "status": "parameter"
+    },
+    {
+      "file": "scss/widgets/base/switch/_mixins.scss",
+      "line": 17,
+      "widget": "switch",
+      "literals": [
+        "500px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$switch-container-border-radius: 500px,",
+      "variable": "switch-container-border-radius",
+      "kind": "mixin-parameter",
+      "status": "parameter"
+    },
+    {
+      "file": "scss/widgets/base/switch/_mixins.scss",
+      "line": 18,
+      "widget": "switch",
+      "literals": [
+        "4px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$switch-label-padding: 4px 0,",
+      "variable": "switch-label-padding",
+      "kind": "mixin-parameter",
+      "status": "parameter"
+    },
+    {
+      "file": "scss/widgets/base/switch/_mixins.scss",
+      "line": 19,
+      "widget": "switch",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$switch-off-padding-bottom: 10px,",
+      "variable": "switch-off-padding-bottom",
+      "kind": "mixin-parameter",
+      "status": "parameter"
+    },
+    {
+      "file": "scss/widgets/base/textEditor/_index.scss",
+      "line": 6,
+      "widget": "textEditor",
+      "literals": [
+        "34px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$texteditor-clear-button-area-width: 34px !default;",
+      "variable": "texteditor-clear-button-area-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/textEditor/_index.scss",
+      "setTo": "var(--dx-text-editor-clear-button-width)"
+    },
+    {
+      "file": "scss/widgets/base/textEditor/_mixins.scss",
+      "line": 162,
+      "widget": "textEditor",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$label-padding-inline: 2px,",
+      "variable": "label-padding-inline",
+      "kind": "mixin-parameter",
+      "status": "parameter"
+    },
+    {
+      "file": "scss/widgets/base/textEditor/_mixins.scss",
+      "line": 163,
+      "widget": "textEditor",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$label-border-radius: 1px,",
+      "variable": "label-border-radius",
+      "kind": "mixin-parameter",
+      "status": "parameter"
+    },
+    {
+      "file": "scss/widgets/base/textEditor/_mixins.scss",
+      "line": 164,
+      "widget": "textEditor",
+      "literals": [
+        "3px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$label-backdrop-height: 3px,",
+      "variable": "label-backdrop-height",
+      "kind": "mixin-parameter",
+      "status": "parameter"
+    },
+    {
+      "file": "scss/widgets/base/textEditor/_mixins.scss",
+      "line": 716,
+      "widget": "textEditor",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$button-margin-block-start: 1px,",
+      "variable": "button-margin-block-start",
+      "kind": "mixin-parameter",
+      "status": "parameter"
+    },
+    {
+      "file": "scss/widgets/base/textEditor/_mixins.scss",
+      "line": 717,
+      "widget": "textEditor",
+      "literals": [
+        "3px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$button-margin-block-end: 3px,",
+      "variable": "button-margin-block-end",
+      "kind": "mixin-parameter",
+      "status": "parameter"
+    },
+    {
+      "file": "scss/widgets/base/textEditor/_mixins.scss",
+      "line": 718,
+      "widget": "textEditor",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$button-icon-margin-block-start: 1px,",
+      "variable": "button-icon-margin-block-start",
+      "kind": "mixin-parameter",
+      "status": "parameter"
+    },
+    {
+      "file": "scss/widgets/base/textEditor/_mixins.scss",
+      "line": 719,
+      "widget": "textEditor",
+      "literals": [
+        "3px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$button-icon-margin-block-start-with-text: 3px,",
+      "variable": "button-icon-margin-block-start-with-text",
+      "kind": "mixin-parameter",
+      "status": "parameter"
+    },
+    {
+      "file": "scss/widgets/base/textEditor/_mixins.scss",
+      "line": 720,
+      "widget": "textEditor",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$button-icononly-padding: 2px,",
+      "variable": "button-icononly-padding",
+      "kind": "mixin-parameter",
+      "status": "parameter"
+    },
+    {
+      "file": "scss/widgets/base/timeView/_index.scss",
+      "line": 4,
+      "widget": "timeView",
+      "literals": [
+        "70px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$timeview-numberbox-width: 70px !default;",
+      "variable": "timeview-numberbox-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/timeView/_index.scss",
+      "setTo": "var(--dx-time-view-field-number-box-width)"
+    },
+    {
+      "file": "scss/widgets/base/timeView/_index.scss",
+      "line": 5,
+      "widget": "timeView",
+      "literals": [
+        "110px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$timeview-numberbox-spin-touch-friendly-width: 110px !default;",
+      "variable": "timeview-numberbox-spin-touch-friendly-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/timeView/_index.scss",
+      "setTo": "var(--dx-time-view-field-number-box-spin-touch-friendly-width)"
+    },
+    {
+      "file": "scss/widgets/base/timeView/_mixins.scss",
+      "line": 20,
+      "widget": "timeView",
+      "literals": [
+        "182px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$clock-size: 182px,",
+      "variable": "clock-size",
+      "kind": "mixin-parameter",
+      "status": "parameter"
+    },
+    {
+      "file": "scss/widgets/base/timeView/_mixins.scss",
+      "line": 21,
+      "widget": "timeView",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$arrow-width: 10px,",
+      "variable": "arrow-width",
+      "kind": "mixin-parameter",
+      "status": "parameter"
+    },
+    {
+      "file": "scss/widgets/base/toolbar/_index.scss",
+      "line": 4,
+      "widget": "toolbar",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$toolbar-item-padding: 0 5px !default;",
+      "variable": "toolbar-item-padding",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/toolbar/_index.scss",
+      "setTo": "var(--dx-toolbar-item-padding)"
+    },
+    {
+      "file": "scss/widgets/base/toolbar/_index.scss",
+      "line": 5,
+      "widget": "toolbar",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$toolbar-group-margin: 0 10px !default;",
+      "variable": "toolbar-group-margin",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/toolbar/_index.scss",
+      "setTo": "var(--dx-toolbar-group-margin)"
+    },
+    {
+      "file": "scss/widgets/base/toolbar/_index.scss",
+      "line": 6,
+      "widget": "toolbar",
+      "literals": [
+        "150px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$toolbar-texteditor-width: 150px !default;",
+      "variable": "toolbar-texteditor-width",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/toolbar/_index.scss",
+      "setTo": "var(--dx-toolbar-text-editor-width)"
+    },
+    {
+      "file": "scss/widgets/base/toolbar/_mixins.scss",
+      "line": 5,
+      "widget": "toolbar",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$outline-width: 2px,",
+      "variable": "outline-width",
+      "kind": "mixin-parameter",
+      "status": "parameter"
+    },
+    {
+      "file": "scss/widgets/base/toolbar/_mixins.scss",
+      "line": 6,
+      "widget": "toolbar",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$outline-offset: 1px,",
+      "variable": "outline-offset",
+      "kind": "mixin-parameter",
+      "status": "parameter"
+    },
+    {
+      "file": "scss/widgets/base/treeList/_index.scss",
+      "line": 27,
+      "widget": "treeList",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$treelist-expandable-node-line-height: 1px !default;",
+      "variable": "treelist-expandable-node-line-height",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/treeList/_index.scss",
+      "setTo": "var(--dx-tree-list-empty-space-height)"
+    },
+    {
+      "file": "scss/widgets/base/treeList/_index.scss",
+      "line": 32,
+      "widget": "treeList",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$treelist-sticky-column-border: 2px solid !default;",
+      "variable": "treelist-sticky-column-border",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/treeList/_index.scss",
+      "setTo": "var(--dx-tree-list-sticky-column-border)"
+    },
+    {
+      "file": "scss/widgets/base/treeList/_index.scss",
+      "line": 33,
+      "widget": "treeList",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$treelist-cell-focus-outline: 2px solid !default;",
+      "variable": "treelist-cell-focus-outline",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/treeList/_index.scss",
+      "setTo": "var(--dx-tree-list-cell-outline-focused)"
+    },
+    {
+      "file": "scss/widgets/base/treeList/_index.scss",
+      "line": 56,
+      "widget": "treeList",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$treelist-header-filter-outline: 2px solid !default;",
+      "variable": "treelist-header-filter-outline",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/treeList/_index.scss",
+      "setTo": "var(--dx-grid-outline-focused)"
+    },
+    {
+      "file": "scss/widgets/base/treeList/_index.scss",
+      "line": 57,
+      "widget": "treeList",
+      "literals": [
+        "2px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$treelist-header-filter-outline-offset: 2px !default;",
+      "variable": "treelist-header-filter-outline-offset",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/treeList/_index.scss",
+      "setTo": "var(--dx-tree-list-outline-offset-focused)"
+    },
+    {
+      "file": "scss/widgets/base/treeList/_index.scss",
+      "line": 58,
+      "widget": "treeList",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$treelist-button-margin-left: 10px !default;",
+      "variable": "treelist-button-margin-left",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/treeList/_index.scss",
+      "setTo": "var(--dx-tree-list-form-buttons-margin-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/treeList/_index.scss",
+      "line": 59,
+      "widget": "treeList",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$treelist-button-margin-top: 10px !default;",
+      "variable": "treelist-button-margin-top",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/treeList/_index.scss",
+      "setTo": "var(--dx-tree-list-form-buttons-margin-block-start)"
+    },
+    {
+      "file": "scss/widgets/base/treeList/_index.scss",
+      "line": 60,
+      "widget": "treeList",
+      "literals": [
+        "20px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$treelist-error-message-margin-bottom: 20px !default;",
+      "variable": "treelist-error-message-margin-bottom",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/treeList/_index.scss",
+      "setTo": "var(--dx-tree-list-error-message-margin-block-end)"
+    },
+    {
+      "file": "scss/widgets/base/treeList/_index.scss",
+      "line": 61,
+      "widget": "treeList",
+      "literals": [
+        "10px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$treelist-button-margin-right: 10px !default;",
+      "variable": "treelist-button-margin-right",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/treeList/_index.scss",
+      "setTo": "var(--dx-tree-list-form-buttons-rtl-margin-inline-start)"
+    },
+    {
+      "file": "scss/widgets/base/treeView/_index.scss",
+      "line": 2,
+      "widget": "treeView",
+      "literals": [
+        "5px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$treeview-searchbox-margin-bottom: 5px !default;",
+      "variable": "treeview-searchbox-margin-bottom",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/treeView/_index.scss",
+      "setTo": "var(--dx-tree-view-search-box-margin-block-end)"
+    },
+    {
+      "file": "scss/widgets/base/treeView/_index.scss",
+      "line": 13,
+      "widget": "treeView",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$treeview-select-all-item-border-bottom: 1px solid !default;",
+      "variable": "treeview-select-all-item-border-bottom",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/treeView/_index.scss",
+      "setTo": "var(--dx-tree-view-select-all-item-border-block-end)"
+    },
+    {
+      "file": "scss/widgets/base/treeView/_index.scss",
+      "line": 14,
+      "widget": "treeView",
+      "literals": [
+        "1px"
+      ],
+      "occurrences": 1,
+      "marker": null,
+      "text": "$treeview-border-visible-border: 1px solid !default;",
+      "variable": "treeview-border-visible-border",
+      "kind": "module-variable",
+      "status": "injected",
+      "setBy": "scss/widgets/fluent-next/treeView/_index.scss",
+      "setTo": "var(--dx-tree-view-border-visible-border)"
+    }
+  ]
+}
diff --git a/packages/devextreme-scss/tools/stylelint/module-variable-default.mjs b/packages/devextreme-scss/tools/stylelint/module-variable-default.mjs
index 1bf97bfbf8ce..63b812c8a610 100644
--- a/packages/devextreme-scss/tools/stylelint/module-variable-default.mjs
+++ b/packages/devextreme-scss/tools/stylelint/module-variable-default.mjs
@@ -1,3 +1,6 @@
+import { readFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname, join, resolve } from 'path';
 import stylelint from 'stylelint';
 
 const {
@@ -13,6 +16,37 @@ const messages = ruleMessages(ruleName, {
 
 const meta = { fixable: true };
 
+const packageRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..', '..');
+
+// A size classified by the px audit is not a knob: the audit's gate accepts a fixed value only
+// when a theme sets it or a marker says why it stays, so a marked value is one the theme must not
+// pass through @use with(). The marker list is read from the audit's own vocabulary to keep one
+// source of truth; the path is package-relative.
+const readMarkers = (vocabularyPath) => {
+  const { categories } = JSON.parse(readFileSync(join(packageRoot, vocabularyPath), 'utf8'));
+  return categories.map(({ marker }) => marker).filter(Boolean);
+};
+
+// The marker sits where the px audit writes it: in the declaration's trailing comment, or in the
+// comment block directly above it (tools/review/px-audit.mjs reads the same two places).
+const classifyingComments = (decl) => {
+  const parts = [];
+  const trailing = decl.next();
+  if (trailing?.type === 'comment' && trailing.source?.start?.line === decl.source?.end?.line) {
+    parts.push(trailing.text);
+  }
+
+  let node = decl.prev();
+  let gap = decl.raws.before ?? '';
+  while (node?.type === 'comment' && !/\n\s*\n/.test(gap)) {
+    parts.push(node.text);
+    gap = node.raws.before ?? '';
+    node = node.prev();
+  }
+
+  return parts.join('\n');
+};
+
 const isConditional = (node) => node.type === 'atrule' && ['if', 'else'].includes(node.name);
 const isModuleLevel = (decl) => {
   let node = decl.parent;
@@ -22,8 +56,17 @@ const isModuleLevel = (decl) => {
 const hasFlag = (decl, flag) => new RegExp(`!${flag}\\b`, 'i').test(decl.value);
 const isNull = (decl) => /^null(\s+!default)?$/.test(decl.value.trim());
 
-const ruleFunction = (primary) => (root, result) => {
-  if (!validateOptions(result, ruleName, { actual: primary, possible: [true] })) return;
+const ruleFunction = (primary, secondary) => (root, result) => {
+  if (!validateOptions(
+    result,
+    ruleName,
+    { actual: primary, possible: [true] },
+    { actual: secondary, possible: { exemptMarkersFrom: [(value) => typeof value === 'string'] }, optional: true },
+  )) return;
+
+  const markers = secondary?.exemptMarkersFrom ? readMarkers(secondary.exemptMarkersFrom) : [];
+  const isClassified = (decl) => markers.length > 0
+    && markers.some((marker) => classifyingComments(decl).includes(marker));
 
   const assigned = new Set();
 
@@ -33,6 +76,7 @@ const ruleFunction = (primary) => (root, result) => {
     const reassignment = assigned.has(decl.prop);
     if (decl.parent.type === 'root' && !isNull(decl)) assigned.add(decl.prop);
     if (reassignment || hasFlag(decl, 'default') || hasFlag(decl, 'global')) return;
+    if (isClassified(decl)) return;
 
     report({
       message: messages.expected,
diff --git a/packages/devextreme-scss/tools/stylelint/no-identical-branch-declarations.mjs b/packages/devextreme-scss/tools/stylelint/no-identical-branch-declarations.mjs
index 088b41e742bd..b75a5c2a4992 100644
--- a/packages/devextreme-scss/tools/stylelint/no-identical-branch-declarations.mjs
+++ b/packages/devextreme-scss/tools/stylelint/no-identical-branch-declarations.mjs
@@ -140,6 +140,23 @@ const declaredBetween = (parent, after, before, name) => parent.nodes
   .slice(parent.index(after) + 1, parent.index(before))
   .some((node) => isVariable(node) && node.prop === name);
 
+/*
+ * A marker comment sits at the end of the declaration line, and postcss keeps it as a separate
+ * node: removing the declaration alone leaves the comment behind, where it collapses onto the next
+ * surviving declaration and claims something that was never written about it. So a trailing comment
+ * travels with its declaration, and a chain whose branches disagree about it is left to a human.
+ */
+const trailingComment = (decl) => {
+  const next = decl.next();
+  const sameLine = next?.type === 'comment' && next.source?.start?.line === decl.source?.end?.line;
+  return sameLine ? next : undefined;
+};
+
+const trailersAgree = (declarations) => {
+  const texts = declarations.map((decl) => trailingComment(decl)?.text);
+  return texts.every((text) => text === texts[0]);
+};
+
 const attachedComment = (decl) => {
   const previous = decl.prev();
   const attached = previous?.type === 'comment' && !/\n[ \t]*\n/.test(decl.raws.before ?? '');
@@ -171,7 +188,8 @@ const ruleFunction = (primary) => (root, result) => {
       const [first] = declarations;
       const earlier = earlierDeclaration(parent, ifRule, name);
       const overridden = earlier !== undefined && !isNull(earlier.value);
-      const fixable = overridden ? declarations.every((decl) => hasDefaultFlag(decl.value)) : movable.has(name);
+      const fixable = trailersAgree(declarations)
+        && (overridden ? declarations.every((decl) => hasDefaultFlag(decl.value)) : movable.has(name));
 
       const fix = () => {
         const live = branches.filter((branch) => branch.parent);
@@ -184,16 +202,25 @@ const ruleFunction = (primary) => (root, result) => {
           if (parent.type === 'root' && parent.first) parent.first.raws.before = '';
         };
 
+        const dropDeclarations = () => declarations.forEach((decl) => {
+          trailingComment(decl)?.remove();
+          decl.remove();
+        });
+
         if (overridden) {
-          declarations.forEach((decl) => decl.remove());
+          dropDeclarations();
           tidy();
           return;
         }
 
         const hoisted = first.clone();
+        const trailerSource = trailingComment(first);
+        // keep the comment's own raws (`inline` is what makes it print as `//`), move it one space
+        // behind the declaration it explains
+        const trailer = trailerSource?.clone({ raws: { ...trailerSource.raws, before: ' ' } });
         const references = localReferences(first.value);
         const comment = earlier && attachedComment(earlier);
-        declarations.forEach((decl) => decl.remove());
+        dropDeclarations();
 
         const relocate = (insert, gap) => {
           const indent = indentOf(ifRule);
@@ -201,6 +228,7 @@ const ruleFunction = (primary) => (root, result) => {
           hoisted.raws.before = moved ? `\n${indent}` : `${gap}${indent}`;
           if (moved) insert(moved);
           insert(hoisted, moved);
+          if (trailer) parent.insertAfter(hoisted, trailer);
           comment?.remove();
           earlier?.remove();
         };
@@ -212,6 +240,7 @@ const ruleFunction = (primary) => (root, result) => {
         } else if (earlier && !references.some((ref) => declaredBetween(parent, earlier, ifRule, ref))) {
           hoisted.raws.before = earlier.raws.before;
           earlier.replaceWith(hoisted);
+          if (trailer) parent.insertAfter(hoisted, trailer);
         } else {
           relocate((node, previous) => (previous ? parent.insertAfter(previous, node) : parent.insertBefore(ifRule, node)), '\n');
         }
diff --git a/packages/devextreme-scss/tools/tokens/report.ts b/packages/devextreme-scss/tools/tokens/report.ts
new file mode 100644
index 000000000000..36b480c702e9
--- /dev/null
+++ b/packages/devextreme-scss/tools/tokens/report.ts
@@ -0,0 +1,292 @@
+/*
+ * What a design-token package bump did, as data and as the markdown tools/tokens/update.mjs prints.
+ *
+ * Kept free of the file system and of `process` so both sides can use it: the update command loads
+ * it through Node's type stripping, tests/tokens-report.test.ts imports it directly. The same split
+ * build/tokens/consumed-tokens.ts uses.
+ */
+
+/** Custom property name -> value, as one generated file declares them. */
+export type Declarations = Map<string, string>;
+
+/** Generated file path -> its declarations. */
+export type GeneratedOutput = Map<string, Declarations>;
+
+export type NameDiff = { added: string[]; removed: string[] };
+
+export type ValueChange = { file: string; name: string; was: string; now: string };
+
+export type DeclarationRef = { file: string; name: string };
+
+export type OutputDiff = {
+  changed: ValueChange[];
+  gone: DeclarationRef[];
+  appeared: DeclarationRef[];
+};
+
+export type Report = {
+  package: string;
+  versionBefore: string;
+  versionAfter: string;
+  countBefore: number;
+  countAfter: number;
+  names: NameDiff;
+  lostConsumed: string[];
+  output: OutputDiff;
+};
+
+/*
+ * Declarations only. A `var(--dxds-x)` read carries no value of its own, and counting it would
+ * report a change every time an unrelated reference moved.
+ */
+export const parseDeclarations = (css: string): Declarations => new Map(
+  [...css.matchAll(/(--dxds-[\w-]+)\s*:\s*([^;\n}]+)/g)].map(([, name, value]) => [name, value.trim()]),
+);
+
+const byCodepoint = (left: string, right: string): number => (left < right ? -1 : 1);
+
+const missingFrom = (names: Iterable<string>, present: ReadonlySet<string>): string[] => [
+  ...new Set([...names].filter((name) => !present.has(name))),
+].sort(byCodepoint);
+
+export const diffNames = (before: Iterable<string>, after: Iterable<string>): NameDiff => ({
+  added: missingFrom(after, new Set(before)),
+  removed: missingFrom(before, new Set(after)),
+});
+
+/** Names the theme reads that the package no longer offers — the build refuses to run on these. */
+export const findLostConsumed = (
+  consumed: Iterable<string>,
+  available: ReadonlySet<string>,
+): string[] => missingFrom(consumed, available);
+
+const byFileThenName = (
+  left: DeclarationRef,
+  right: DeclarationRef,
+): number => (left.file === right.file
+  ? byCodepoint(left.name, right.name)
+  : byCodepoint(left.file, right.file));
+
+export const diffGenerated = (before: GeneratedOutput, after: GeneratedOutput): OutputDiff => {
+  const changed: ValueChange[] = [];
+  const gone: DeclarationRef[] = [];
+  const appeared: DeclarationRef[] = [];
+
+  before.forEach((declarations, file) => {
+    const now = after.get(file) ?? new Map<string, string>();
+
+    declarations.forEach((was, name) => {
+      const value = now.get(name);
+
+      if (value === undefined) {
+        gone.push({ file, name });
+      } else if (value !== was) {
+        changed.push({ file, name, was, now: value });
+      }
+    });
+  });
+
+  after.forEach((declarations, file) => {
+    const previously = before.get(file) ?? new Map<string, string>();
+
+    declarations.forEach((_, name) => {
+      if (!previously.has(name)) {
+        appeared.push({ file, name });
+      }
+    });
+  });
+
+  return {
+    changed: changed.sort(byFileThenName),
+    gone: gone.sort(byFileThenName),
+    appeared: appeared.sort(byFileThenName),
+  };
+};
+
+const section = (title: string, lines: string[]): string => [
+  `## ${title}`,
+  '',
+  lines.length ? lines.join('\n') : '_none_',
+  '',
+].join('\n');
+
+const reference = ({ file, name }: DeclarationRef): string => `- \`${file}\`: \`${name}\``;
+
+export const renderReport = (report: Report): string => {
+  const { names, output } = report;
+
+  const heading = report.versionBefore === report.versionAfter
+    ? `# ${report.package} ${report.versionAfter}`
+    : `# ${report.package}: ${report.versionBefore} → ${report.versionAfter}`;
+
+  return [
+    heading,
+    '',
+    '| | before | after |',
+    '|---|---|---|',
+    `| tokens | ${report.countBefore} | ${report.countAfter} |`,
+    `| added | | ${names.added.length} |`,
+    `| removed | | ${names.removed.length} |`,
+    '',
+    section(
+      `Read by the theme, gone from the package (${report.lostConsumed.length})`,
+      report.lostConsumed.map((name) => `- \`${name}\` — the token build will refuse to run`),
+    ),
+    section(
+      `Values that moved in the generated output (${output.changed.length})`,
+      output.changed.map(({ file, name, was, now }) => `- \`${file}\`: \`${name}\`\n`
+        + `  - was: \`${was}\`\n  - now: \`${now}\``),
+    ),
+    section(`Gone from the generated output (${output.gone.length})`, output.gone.map(reference)),
+    section(
+      `New in the generated output (${output.appeared.length})`,
+      output.appeared.map(reference),
+    ),
+    ...(output.changed.length || output.gone.length
+      ? ['This is what the bump costs: values moved, so the etalon screenshots have to be '
+        + 're-recorded and looked at.', '']
+      : []),
+  ].join('\n');
+};
+
+/*
+ * The same report for a person watching it happen. Markdown belongs in a pull request; in a
+ * terminal its pipes and its four `_none_` sections are noise, so this view drops what did not
+ * happen, groups the values by file, and caps the long lists. update.mjs picks by `isTTY` and
+ * writes whichever view to stdout alone, which keeps `> report.md` markdown.
+ */
+
+export type TerminalOptions = {
+  /** ANSI colour. Off by default so the output stays comparable. */
+  color?: boolean;
+  /** How many entries a section shows before it says how many more there are. */
+  limit?: number;
+};
+
+const DEFAULT_LIMIT = 12;
+
+const paint = (code: string, text: string, color: boolean): string => (color ? `\u001B[${code}m${text}\u001B[0m` : text);
+
+const bold = (text: string, color: boolean): string => paint('1', text, color);
+const dim = (text: string, color: boolean): string => paint('2', text, color);
+const red = (text: string, color: boolean): string => paint('31', text, color);
+const yellow = (text: string, color: boolean): string => paint('33', text, color);
+
+/* For a flat list, where one line is one entry. Grouped sections take groupCapped below. */
+const capped = (lines: string[], limit: number): string[] => (lines.length > limit
+  ? [...lines.slice(0, limit), `    … and ${lines.length - limit} more`]
+  : lines);
+
+const pad = (text: string, width: number): string => text + ' '.repeat(Math.max(0, width - text.length));
+
+/* Same file, several names: say the file once and line the names up under it. */
+const groupByFile = <T extends DeclarationRef>(
+  entries: T[],
+  line: (entry: T, width: number) => string,
+): string[] => {
+  const files = [...new Set(entries.map(({ file }) => file))];
+
+  return files.flatMap((file) => {
+    const inFile = entries.filter((entry) => entry.file === file);
+    const width = Math.max(...inFile.map(({ name }) => name.length));
+
+    return [`  ${file}`, ...inFile.map((entry) => line(entry, width))];
+  });
+};
+
+/*
+ * The cap is on entries, and it has to be taken before the grouping rather than after it. Capping
+ * the grouped lines spent part of the budget on file headers, counted those headers as omitted
+ * entries — so the tally read one too high per file — and could cut a header away from the
+ * entries under it, leaving names with no file to attribute them to. One file hid all three:
+ * its single header shifts both sides of the subtraction by one.
+ *
+ * The tally sits at the file indent rather than the entry one, because what it leaves out is
+ * rarely the last file's alone — with the budget spent, whole files further down never appear in
+ * the section at all, and a line indented under the last one printed would read as that file's
+ * remainder. Those absent files are counted too: the entry tally alone cannot say whether the
+ * section is a long file cut short or several files that were never reached.
+ */
+const groupCapped = <T extends DeclarationRef>(
+  entries: T[],
+  limit: number,
+  line: (entry: T, width: number) => string,
+): string[] => {
+  const shown = entries.slice(0, limit);
+  const omitted = entries.slice(limit);
+  const seen = new Set(shown.map(({ file }) => file));
+  const unseen = new Set(
+    omitted.filter(({ file }) => !seen.has(file)).map(({ file }) => file),
+  ).size;
+
+  return [
+    ...groupByFile(shown, line),
+    ...(omitted.length
+      ? [`  … and ${omitted.length} more${unseen ? `, ${unseen} file(s) not shown` : ''}`]
+      : []),
+  ];
+};
+
+/*
+ * What can be said before the rebuild: which package, how much it moved, and what the theme reads
+ * that is no longer there. update.mjs prints this first, because the rebuild stops at the first
+ * missing name and never gets to the rest of them.
+ */
+export const renderPreamble = (report: Report, options: TerminalOptions = {}): string => {
+  const color = options.color ?? false;
+  const limit = options.limit ?? DEFAULT_LIMIT;
+  const { names } = report;
+  const lines: string[] = [];
+
+  lines.push(report.versionBefore === report.versionAfter
+    ? `${bold(report.package, color)} ${report.versionAfter}`
+    : `${bold(report.package, color)} ${report.versionBefore} → ${bold(report.versionAfter, color)}`);
+
+  const delta = names.added.length || names.removed.length
+    ? dim(`  (+${names.added.length} −${names.removed.length})`, color)
+    : '';
+
+  lines.push(`tokens ${report.countBefore} → ${report.countAfter}${delta}`, '');
+
+  if (report.lostConsumed.length) {
+    lines.push(red(`the theme reads ${report.lostConsumed.length} name(s) this package no longer has`, color));
+    lines.push(...capped(report.lostConsumed.map((name) => `    ${name}`), limit));
+    lines.push(dim('    the token build will refuse to run', color), '');
+  }
+
+  return lines.join('\n');
+};
+
+export const renderTerminal = (report: Report, options: TerminalOptions = {}): string => {
+  const color = options.color ?? false;
+  const limit = options.limit ?? DEFAULT_LIMIT;
+  const { output } = report;
+  const lines: string[] = [renderPreamble(report, options)];
+
+  if (output.changed.length) {
+    lines.push(`values that moved (${output.changed.length})`);
+    lines.push(...groupCapped(
+      output.changed,
+      limit,
+      ({ name, was, now }, width) => `    ${pad(name, width)}  ${was} → ${bold(now, color)}`,
+    ), '');
+  }
+
+  if (output.gone.length) {
+    lines.push(`gone from the generated output (${output.gone.length})`);
+    lines.push(...groupCapped(output.gone, limit, ({ name }) => `    ${name}`), '');
+  }
+
+  if (output.appeared.length) {
+    lines.push(`new in the generated output (${output.appeared.length})`);
+    lines.push(...groupCapped(output.appeared, limit, ({ name }) => `    ${name}`), '');
+  }
+
+  if (output.changed.length || output.gone.length) {
+    lines.push(yellow('values moved — re-record the etalon screenshots and look at them', color), '');
+  } else if (!report.lostConsumed.length) {
+    lines.push(dim('nothing moved in the generated output', color), '');
+  }
+
+  return lines.join('\n');
+};
diff --git a/packages/devextreme-scss/tools/tokens/update.mjs b/packages/devextreme-scss/tools/tokens/update.mjs
new file mode 100644
index 000000000000..9a90999cb079
--- /dev/null
+++ b/packages/devextreme-scss/tools/tokens/update.mjs
@@ -0,0 +1,208 @@
+/*
+ * One command for a design-token package bump, and the report that goes with it.
+ *
+ *   pnpm run tokens:update 262.24.0   # bump, reinstall, rebuild, regenerate, report
+ *   pnpm run tokens:update            # report the installed package, change nothing
+ *
+ * The four manual steps — edit the dependency, reinstall, rebuild the tokens, regenerate the
+ * registries — are the cheap part. It stops there: the themes are not rebuilt, so the CSS bundles on
+ * disk still come from the previous package until `nx build:themes` runs. The expensive part is knowing what the new package did, and that
+ * is what the report is for: names the theme reads and the package no longer has (the build refuses
+ * those), and every generated value that moved. The second list is the one that costs etalon
+ * screenshots, so it is printed per file with old and new side by side.
+ *
+ * What stays manual on purpose: approving the Renovate pull request, and re-recording the etalons.
+ * A bot can do neither — our etalons are pixels, and a value change has to be looked at.
+ *
+ * The install runs with --no-frozen-lockfile, which is the only way to move a pinned dependency, and
+ * pnpm takes the opportunity to normalise the rest of the lockfile. Read that diff before committing
+ * it: everything beyond this package is pnpm's housekeeping, not part of the bump.
+ *
+ * Everything here is file system and process; the diffing and the markdown live in report.ts, where
+ * tests/tokens-report.test.ts can reach them.
+ */
+
+import { execFileSync } from 'node:child_process';
+import { readdirSync, readFileSync, writeFileSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { getBridgeFiles, THEME_FOLDER } from '../../build/tokens/sources.mjs';
+import {
+  buildAvailableNames,
+  collectCustomPropertyReferences,
+  collectTokenReferences,
+} from '../../build/tokens/consumed-tokens.ts';
+import {
+  diffGenerated,
+  diffNames,
+  findLostConsumed,
+  parseDeclarations,
+  renderPreamble,
+  renderReport,
+  renderTerminal,
+} from './report.ts';
+
+const here = path.dirname(fileURLToPath(import.meta.url));
+const packageRoot = path.resolve(here, '..', '..');
+const repoRoot = path.resolve(packageRoot, '..', '..');
+const generatedRoot = path.join(packageRoot, 'scss', '_design-system');
+const themeRoot = path.join(packageRoot, 'scss', 'widgets', THEME_FOLDER);
+const manifestPath = path.join(packageRoot, 'package.json');
+const PACKAGE = '@devexpress/design-tokens-internal';
+
+/*
+ * Resolved as a path, not through `require`: `require.resolve` caches the resolved filename, pnpm
+ * keeps the previous version in its store, and the cached path stays readable after an install — so
+ * the "after" read would quietly return the package we just replaced.
+ */
+const tokensPackage = path.join(packageRoot, 'node_modules', PACKAGE);
+
+const walk = (dir, extension) => readdirSync(dir, { withFileTypes: true, recursive: true })
+  .filter((entry) => entry.isFile() && entry.name.endsWith(extension))
+  .map((entry) => path.join(entry.parentPath, entry.name));
+
+const readFlatTokens = () => {
+  const { version, tokens } = JSON.parse(
+    readFileSync(path.join(tokensPackage, 'tokens.flat.json'), 'utf8'),
+  );
+
+  return { version, names: Object.keys(tokens) };
+};
+
+const readGenerated = () => new Map(walk(generatedRoot, '.scss').map((file) => [
+  path.relative(generatedRoot, file),
+  parseDeclarations(readFileSync(file, 'utf8')),
+]));
+
+/* The token names the theme actually reads, in the spelling the package uses. */
+const readConsumed = () => {
+  const consumed = new Set();
+
+  walk(themeRoot, '.scss').forEach((file) => {
+    const content = readFileSync(file, 'utf8');
+    const source = path.relative(themeRoot, file);
+
+    collectTokenReferences(content, source).forEach((name) => consumed.add(name));
+    collectCustomPropertyReferences(content, source).forEach((name) => consumed.add(name));
+  });
+
+  return consumed;
+};
+
+/*
+ * Markdown when the output is going somewhere — a file, a pipe, a pull request — and the terminal
+ * view when a person is watching. NO_COLOR is the usual opt-out.
+ *
+ * stdout carries the report and nothing else. Everything a bump says while it works — the command
+ * banners, what the child processes print, the preamble, the closing next steps — goes to stderr,
+ * so `> report.md` gets the markdown even when the run is a bump rather than a report.
+ */
+const plain = Boolean(process.env.NO_COLOR);
+const interactive = process.stdout.isTTY === true;
+const color = interactive && !plain;
+
+/* The preamble is written to stderr, so whether it is coloured follows that stream, not stdout's. */
+const progressColor = process.stderr.isTTY === true && !plain;
+
+const show = (report) => {
+  process.stdout.write(interactive
+    ? `\n${renderTerminal(report, { color })}`
+    : `\n${renderReport(report)}`);
+};
+
+const run = (command, args, cwd) => {
+  process.stderr.write(`\n$ ${command} ${args.join(' ')}\n`);
+
+  try {
+    /* The child writes to fd 2 as well: install and build chatter is progress, not the report. */
+    execFileSync(command, args, { cwd, stdio: ['inherit', 2, 'inherit'] });
+
+    return true;
+  } catch {
+    process.stderr.write(`\n${command} ${args.join(' ')} failed — see its output above.\n`);
+
+    return false;
+  }
+};
+
+const setDependency = (version) => {
+  const manifest = JSON.parse(readFileSync(manifestPath, 'utf8'));
+
+  manifest.devDependencies[PACKAGE] = version;
+  writeFileSync(manifestPath, `${JSON.stringify(manifest, null, 2)}\n`);
+};
+
+// ---------------------------------------------------------------------------------------------
+
+const [target] = process.argv.slice(2);
+
+/*
+ * No argument reports and changes nothing: that is the answer to "what is installed and what does
+ * the theme do with it", and it is what someone typing the command without reading it deserves to
+ * get. A bump has to be asked for by version.
+ */
+const reportOnly = target === undefined || target === '--report';
+
+if (!reportOnly && !/^\d+\.\d+\.\d+(-[\w.]+)?$/.test(target)) {
+  process.stderr.write(`"${target}" is not a version\n`
+    + 'usage: pnpm run tokens:update [<version>]   # without a version: report only\n');
+  process.exit(1);
+}
+const before = { ...readFlatTokens(), generated: readGenerated() };
+
+/* Every step that can fail leaves the tree somewhere; each of them says where, and stops. */
+const giveUp = (version) => {
+  process.stderr.write(`\npackage.json asks for ${version} now.\n`
+    + `To go back: pnpm run tokens:update ${before.version}\n`);
+  process.exit(1);
+};
+
+if (!reportOnly) {
+  setDependency(target);
+
+  if (!run('pnpm', ['install', '--no-frozen-lockfile'], repoRoot)) {
+    giveUp(target);
+  }
+}
+
+const after = readFlatTokens();
+const summary = {
+  package: PACKAGE,
+  versionBefore: before.version,
+  versionAfter: after.version,
+  countBefore: before.names.length,
+  countAfter: after.names.length,
+  names: diffNames(before.names, after.names),
+  lostConsumed: findLostConsumed(
+    readConsumed(),
+    buildAvailableNames(after.names, new Set(getBridgeFiles())),
+  ),
+};
+
+if (!reportOnly) {
+  /*
+   * Said before the rebuild, because the rebuild is what stops on a missing name — and it stops at
+   * the first one, having never looked for the others.
+   */
+  process.stderr.write(`\n${renderPreamble(summary, { color: progressColor })}\n`);
+
+  const rebuilt = run('node', ['build/tokens/build-tokens.mjs'], packageRoot)
+    && run('node', ['tools/naming/derive-registries.mjs'], packageRoot);
+
+  if (!rebuilt) {
+    giveUp(after.version);
+  }
+}
+
+const report = { ...summary, output: diffGenerated(before.generated, readGenerated()) };
+
+show(report);
+
+if (!reportOnly) {
+  process.stderr.write('\nThis rebuilt the token layer, not the themes — '
+    + 'packages/devextreme/artifacts/css still holds the previous bundles.\n'
+    + 'Next: pnpm nx build:themes devextreme-scss, then the etalons if any value moved.\n'
+    + `\nCheck \`git diff pnpm-lock.yaml\`: anything in it beyond ${PACKAGE} is pnpm normalising `
+    + 'the lockfile, not this bump.\n');
+}
diff --git a/packages/devextreme-scss/tsconfig.json b/packages/devextreme-scss/tsconfig.json
new file mode 100644
index 000000000000..18b53e191317
--- /dev/null
+++ b/packages/devextreme-scss/tsconfig.json
@@ -0,0 +1,25 @@
+{
+    "compilerOptions": {
+        "noEmit": true,
+        "strict": true,
+        "target": "es2022",
+        "module": "preserve",
+        "moduleResolution": "bundler",
+        "lib": [
+            "es2022"
+        ],
+        "types": [
+            "node",
+            "jest"
+        ],
+        "forceConsistentCasingInFileNames": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true
+    },
+    "include": [
+        "build/tokens/**/*.ts",
+        "tools/naming/**/*.ts",
+        "tools/tokens/**/*.ts",
+        "tests/**/*.ts"
+    ]
+}
diff --git a/packages/devextreme-themebuilder/src/metadata/collector.ts b/packages/devextreme-themebuilder/src/metadata/collector.ts
index 09fbf044e686..4301b7a680ac 100644
--- a/packages/devextreme-themebuilder/src/metadata/collector.ts
+++ b/packages/devextreme-themebuilder/src/metadata/collector.ts
@@ -1,13 +1,21 @@
 import { promises as fs } from 'fs';
 import {
-  resolve, relative, join, dirname,
+  resolve, relative, join, dirname, sep,
 } from 'path';
 import MetadataGenerator from './generator';
+import internalScssPaths from '../../../devextreme-scss/build/internal-scss-paths.json';
+
+const isInternalScssPath = (relativePath: string): boolean => {
+  const posixPath = relativePath.split(sep).join('/');
+  return internalScssPaths.some((internalPath) => posixPath.startsWith(internalPath));
+};
 
 export default class MetadataCollector {
   generator = new MetadataGenerator();
 
   static async saveScssFiles(files: Promise<FileInfo[]>, destination: string): Promise<void> {
+    await fs.rm(resolve(destination), { recursive: true, force: true });
+
     await Promise.all((await files).map(async (file) => {
       const absolutePath = resolve(join(destination, file.path));
       const directory = dirname(absolutePath);
@@ -35,7 +43,8 @@ export default class MetadataCollector {
     dirName: string,
     handler: (content: string) => string,
   ): Promise<FileInfo[]> {
-    const fileList = await this.getFileList(dirName);
+    const fileList = (await this.getFileList(dirName))
+      .filter((filePath) => !isInternalScssPath(relative(dirName, filePath)));
 
     return Promise.all(fileList.map(async (filePath) => {
       const relativePath = relative(dirName, filePath);
diff --git a/packages/devextreme-themebuilder/tests/data/scss/_design-system/fluent/accents/blue.scss b/packages/devextreme-themebuilder/tests/data/scss/_design-system/fluent/accents/blue.scss
new file mode 100644
index 000000000000..b7fb0c97dace
--- /dev/null
+++ b/packages/devextreme-themebuilder/tests/data/scss/_design-system/fluent/accents/blue.scss
@@ -0,0 +1,3 @@
+:root {
+  --dxds-primary-100: #0f6cbd;
+}
diff --git a/packages/devextreme-themebuilder/tests/data/scss/_design-system/variables/_ds.scss b/packages/devextreme-themebuilder/tests/data/scss/_design-system/variables/_ds.scss
new file mode 100644
index 000000000000..09edaffa3110
--- /dev/null
+++ b/packages/devextreme-themebuilder/tests/data/scss/_design-system/variables/_ds.scss
@@ -0,0 +1 @@
+$primary-100: var(--dxds-primary-100);
diff --git a/packages/devextreme-themebuilder/tests/data/scss/bundles/dx.fluent-next.blue.light.scss b/packages/devextreme-themebuilder/tests/data/scss/bundles/dx.fluent-next.blue.light.scss
new file mode 100644
index 000000000000..7e67cd53ee5f
--- /dev/null
+++ b/packages/devextreme-themebuilder/tests/data/scss/bundles/dx.fluent-next.blue.light.scss
@@ -0,0 +1 @@
+@use "../widgets/fluent-next/colors" with ($color: "blue", $mode: "light");
diff --git a/packages/devextreme-themebuilder/tests/data/scss/widgets/fluent-next/_colors.scss b/packages/devextreme-themebuilder/tests/data/scss/widgets/fluent-next/_colors.scss
new file mode 100644
index 000000000000..feece888aa44
--- /dev/null
+++ b/packages/devextreme-themebuilder/tests/data/scss/widgets/fluent-next/_colors.scss
@@ -0,0 +1,3 @@
+@use "../../_design-system/variables/ds" as ds;
+
+$base-accent: ds.$primary-100;
diff --git a/packages/devextreme-themebuilder/tests/metadata/collector.test.ts b/packages/devextreme-themebuilder/tests/metadata/collector.test.ts
index 1334e81f9621..a213745ecb74 100644
--- a/packages/devextreme-themebuilder/tests/metadata/collector.test.ts
+++ b/packages/devextreme-themebuilder/tests/metadata/collector.test.ts
@@ -1,4 +1,6 @@
-import { join, resolve, dirname } from 'path';
+import {
+  join, resolve, dirname, relative,
+} from 'path';
 import { promises } from 'fs';
 
 import MetadataCollector from '../../src/metadata/collector';
@@ -7,7 +9,7 @@ const rootDir = join(__dirname, '..', '..');
 const scssDir = join(rootDir, 'tests', 'data', 'scss');
 
 describe('MetadataCollector', () => {
-  const expectedFileList: string[] = [
+  const exposedFileList: string[] = [
     join('bundles', 'dx.light.scss'),
     join('bundles', 'dx.material.blue.light.scss'),
     join('widgets', 'generic', 'accordion', '_colors.scss'),
@@ -21,8 +23,16 @@ describe('MetadataCollector', () => {
     join('widgets', 'material', '_index.scss'),
   ];
 
+  const internalFileList: string[] = [
+    join('_design-system', 'fluent', 'accents', 'blue.scss'),
+    join('_design-system', 'variables', '_ds.scss'),
+    join('widgets', 'fluent-next', '_colors.scss'),
+    join('bundles', 'dx.fluent-next.blue.light.scss'),
+  ];
+
   promises.mkdir = jest.fn();
   promises.writeFile = jest.fn();
+  promises.rm = jest.fn();
 
   beforeEach(() => {
     jest.clearAllMocks();
@@ -31,22 +41,26 @@ describe('MetadataCollector', () => {
   test('getFileList', async () => {
     const collector = new MetadataCollector();
     const fileList = await collector.getFileList(join(rootDir, 'tests', 'data', 'scss'));
-    const expectedFullPaths = expectedFileList.map((file) => join(scssDir, file));
+    const expectedFullPaths = [...exposedFileList, ...internalFileList]
+      .map((file) => join(scssDir, file));
 
     expect(fileList.length).toBe(expectedFullPaths.length);
 
     fileList.forEach((file) => expect(expectedFullPaths).toContain(file));
   });
 
-  test('readFiles', async () => {
+  test('readFiles keeps out the paths the scss package marks as internal', async () => {
     const collector = new MetadataCollector();
     const handler = (content: string): string => content;
-    const filesInfo = await collector.readFiles(join(rootDir, 'tests', 'data', 'scss'), handler);
+    const onDisk = (await collector.getFileList(scssDir)).map((file) => relative(scssDir, file));
+    const filesInfo = await collector.readFiles(scssDir, handler);
+    const returnedPaths = filesInfo.map((file) => file.path);
 
-    expect(filesInfo.length).toBe(expectedFileList.length);
+    expect(onDisk.filter((file) => !returnedPaths.includes(file)).sort())
+      .toEqual([...internalFileList].sort());
+    expect(returnedPaths.sort()).toEqual([...exposedFileList].sort());
 
     filesInfo.forEach((file) => {
-      expect(expectedFileList).toContain(file.path);
       expect(typeof file.content).toBe('string');
       expect(file.content.length).toBeGreaterThan(0);
     });
@@ -79,6 +93,17 @@ describe('MetadataCollector', () => {
     expect(promises.writeFile).toHaveBeenCalledWith(expectedDestinationPath, fileContent);
   });
 
+  test('saveScssFiles wipes the destination so sources deleted upstream stop shipping', async () => {
+    const destinationPath = './scss';
+
+    await MetadataCollector.saveScssFiles(Promise.resolve([]), destinationPath);
+
+    expect(promises.rm).toHaveBeenCalledWith(
+      resolve(destinationPath),
+      { recursive: true, force: true },
+    );
+  });
+
   test('saveMetadata', async () => {
     const collector = new MetadataCollector();
     const version = '1.1.1';
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/core/utils/__tests__/swatch_container.test.ts b/packages/devextreme/js/__internal/core/utils/__tests__/swatch_container.test.ts
new file mode 100644
index 000000000000..f34102aa58ea
--- /dev/null
+++ b/packages/devextreme/js/__internal/core/utils/__tests__/swatch_container.test.ts
@@ -0,0 +1,205 @@
+import {
+  afterEach, beforeEach, describe, expect, it, jest,
+} from '@jest/globals';
+import $ from '@js/core/renderer';
+import { value as viewPort } from '@js/core/utils/view_port';
+import swatchContainer from '@ts/core/utils/swatch_container';
+
+/*
+ * The viewport is mocked rather than assigned: `value(x)` falls back to <body> for anything empty,
+ * so the state before documentReady - `value()` returning undefined - is otherwise unreachable,
+ * and that is the state overlays created too early run into (T713615, T1143527).
+ */
+jest.mock('@js/core/utils/view_port');
+
+const viewPortMock = viewPort as unknown as jest.Mock<() => unknown>;
+
+const { getSwatchContainer } = swatchContainer;
+
+// jsdom resolves a custom property declared ON an element but does not inherit it, so the tests
+// name the resolved mode at the elements the code reads it from.
+const MODE_STYLES = `
+  .mode-light { --dx-theme-mode: light; }
+  .mode-dark { --dx-theme-mode: dark; }
+  .mode-sepia { --dx-theme-mode: sepia; }
+`;
+
+const classesOf = (element: Element): string[] => [...element.classList].sort();
+
+describe('getSwatchContainer', () => {
+  let $viewport = document.createElement('div');
+
+  const render = (markup: string): HTMLElement => {
+    const host = document.createElement('div');
+
+    host.innerHTML = markup;
+    document.body.appendChild(host);
+
+    return host.querySelector('.target') as HTMLElement;
+  };
+
+  const containerFor = (
+    markup: string,
+  ): Element => getSwatchContainer(render(markup))?.get(0) as Element;
+
+  beforeEach(() => {
+    document.head.innerHTML = `<style>${MODE_STYLES}</style>`;
+    $viewport = document.createElement('div');
+    $viewport.className = 'dx-viewport';
+    document.body.appendChild($viewport);
+    viewPortMock.mockReturnValue($($viewport));
+  });
+
+  afterEach(() => {
+    document.head.innerHTML = '';
+    document.body.innerHTML = '';
+    viewPortMock.mockReset();
+  });
+
+  it('returns the viewport itself when the element is in no swatch and in no mode', () => {
+    expect(containerFor('<div class="target"></div>')).toBe($viewport);
+  });
+
+  describe('swatches', () => {
+    it('creates a container in the viewport for a swatch', () => {
+      const container = containerFor('<div class="dx-swatch-custom"><div class="target"></div></div>');
+
+      expect(classesOf(container)).toEqual(['dx-swatch-custom']);
+      expect(container.parentElement).toBe($viewport);
+    });
+
+    it('reads the classes off the element itself', () => {
+      expect(classesOf(containerFor('<div class="target dx-swatch-custom"></div>'))).toEqual(['dx-swatch-custom']);
+    });
+
+    it('carries every swatch class, not just the first', () => {
+      const container = containerFor('<div class="dx-swatch-a dx-swatch-b"><div class="target"></div></div>');
+
+      expect(classesOf(container)).toEqual(['dx-swatch-a', 'dx-swatch-b']);
+    });
+
+    it('takes the nearest swatch', () => {
+      const container = containerFor(`
+        <div class="dx-swatch-outer">
+          <div class="dx-swatch-inner"><div class="target"></div></div>
+        </div>`);
+
+      expect(classesOf(container)).toEqual(['dx-swatch-inner']);
+    });
+  });
+
+  describe('theme mode', () => {
+    it('carries the mode the element resolved to', () => {
+      const container = containerFor('<div class="target mode-dark"></div>');
+
+      expect(classesOf(container)).toEqual(['dx-theme-mode-dark']);
+      expect(container.parentElement).toBe($viewport);
+    });
+
+    /*
+     * `dx-theme-mode-inverted` means "the opposite of my surroundings" and the container is
+     * reparented to the viewport, where the surroundings are different ones - so the mode comes
+     * from what the cascade resolved, never from the class the element wears.
+     */
+    it('names the resolved mode, not the class the element carries', () => {
+      const container = containerFor('<div class="target dx-theme-mode-inverted mode-light"></div>');
+
+      expect(classesOf(container)).toEqual(['dx-theme-mode-light']);
+    });
+
+    it('carries no mode when the theme declares none', () => {
+      expect(containerFor('<div class="target dx-theme-mode-inverted"></div>')).toBe($viewport);
+    });
+
+    // The contract is light or dark; anything else names no scope the theme can paint, and a
+    // container carrying it would be a wrapper no rule matches.
+    it('carries no mode when the value names none', () => {
+      expect(containerFor('<div class="target mode-sepia"></div>')).toBe($viewport);
+    });
+
+    it('carries a swatch and a mode together', () => {
+      const container = containerFor(`
+        <div class="dx-swatch-custom">
+          <div class="target mode-dark"></div>
+        </div>`);
+
+      expect(classesOf(container)).toEqual(['dx-swatch-custom', 'dx-theme-mode-dark']);
+    });
+  });
+
+  describe('scopes the viewport already resolves to', () => {
+    it('returns the viewport when it resolves to the same mode', () => {
+      $viewport.classList.add('mode-dark');
+
+      expect(containerFor('<div class="target mode-dark"></div>')).toBe($viewport);
+      expect($viewport.children).toHaveLength(0);
+    });
+
+    it('returns the viewport when it sits in the same swatch', () => {
+      const $swatch = document.createElement('div');
+
+      $swatch.className = 'dx-swatch-custom';
+      document.body.appendChild($swatch);
+      $swatch.appendChild($viewport);
+
+      expect(containerFor('<div class="dx-swatch-custom"><div class="target"></div></div>')).toBe($viewport);
+    });
+
+    it('creates a container when the modes differ', () => {
+      $viewport.classList.add('mode-dark');
+
+      const container = containerFor('<div class="target mode-light"></div>');
+
+      expect(classesOf(container)).toEqual(['dx-theme-mode-light']);
+      expect(container.parentElement).toBe($viewport);
+    });
+  });
+
+  describe('reuse', () => {
+    it('reuses one container for elements in the same swatch and mode', () => {
+      const markup = '<div class="dx-swatch-custom"><div class="target mode-dark"></div></div>';
+
+      expect(containerFor(markup)).toBe(containerFor(markup));
+      expect($viewport.children).toHaveLength(1);
+    });
+
+    it('does not reuse a container carrying a scope the element is not in', () => {
+      const inBoth = containerFor('<div class="dx-swatch-custom"><div class="target mode-dark"></div></div>');
+      const inSwatch = containerFor('<div class="dx-swatch-custom"><div class="target"></div></div>');
+
+      expect(inSwatch).not.toBe(inBoth);
+      expect(classesOf(inSwatch)).toEqual(['dx-swatch-custom']);
+    });
+
+    // Only swatch and mode classes describe the scope; anything else on the page may have tagged
+    // the container, and re-creating it on every call would grow the viewport without bound.
+    it('reuses a container that picked up an unrelated class', () => {
+      const first = containerFor('<div class="dx-swatch-custom"><div class="target"></div></div>');
+
+      first.classList.add('some-app-class');
+
+      expect(containerFor('<div class="dx-swatch-custom"><div class="target"></div></div>')).toBe(first);
+      expect($viewport.children).toHaveLength(1);
+    });
+  });
+
+  describe('before the viewport is set', () => {
+    beforeEach(() => {
+      viewPortMock.mockReturnValue(undefined);
+    });
+
+    it('reports no container for an element in no scope', () => {
+      expect(getSwatchContainer(render('<div class="target"></div>'))).toBeUndefined();
+    });
+
+    it('reports no container for an element in a mode', () => {
+      expect(getSwatchContainer(render('<div class="target mode-dark"></div>'))).toBeUndefined();
+    });
+
+    it('reports no container for an element in a swatch', () => {
+      const element = render('<div class="dx-swatch-custom"><div class="target"></div></div>');
+
+      expect(getSwatchContainer(element)).toBeUndefined();
+    });
+  });
+});
diff --git a/packages/devextreme/js/__internal/core/utils/swatch_container.ts b/packages/devextreme/js/__internal/core/utils/swatch_container.ts
index c426d0b9050d..53685c4f44fd 100644
--- a/packages/devextreme/js/__internal/core/utils/swatch_container.ts
+++ b/packages/devextreme/js/__internal/core/utils/swatch_container.ts
@@ -1,29 +1,94 @@
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import { value } from '@js/core/utils/view_port';
+import { resolvedThemeMode } from '@ts/core/utils/theme_mode';
 
 const SWATCH_CONTAINER_CLASS_PREFIX = 'dx-swatch-';
+const THEME_MODE_CLASS_PREFIX = 'dx-theme-mode-';
 
+const classesByPrefix = (
+  element: Element,
+  prefix: string,
+): string[] => [...element.classList].filter((cssClass) => cssClass.startsWith(prefix));
+
+const closestClassesByPrefix = (
+  $element: dxElementWrapper,
+  prefix: string,
+): string[] => {
+  const $scope = $element.closest(`[class^="${prefix}"], [class*=" ${prefix}"]`);
+
+  return $scope.length ? classesByPrefix($scope.get(0), prefix) : [];
+};
+
+// The container is reparented to the viewport, where the surroundings are different ones, so the
+// class has to name the mode the cascade resolved rather than the one the element wears.
+const themeModeClasses = ($element: dxElementWrapper): string[] => {
+  const mode = resolvedThemeMode($element);
+
+  return mode ? [`${THEME_MODE_CLASS_PREFIX}${mode}`] : [];
+};
+
+const scopeClasses = ($element: dxElementWrapper): string[] => [
+  ...closestClassesByPrefix($element, SWATCH_CONTAINER_CLASS_PREFIX),
+  ...themeModeClasses($element),
+];
+
+const getContainerClasses = (
+  $element: dxElementWrapper,
+  $viewport: dxElementWrapper,
+): string[] => {
+  const classes = scopeClasses($element);
+  // A scope the viewport already resolves to needs no container of its own: it would be a wrapper
+  // that repaints nothing, and one that measures nothing - callers reading the container as a
+  // geometric area (popup drag and resize) would be clamped to its zero height.
+  const sorted = (cssClasses: string[]): string => [...cssClasses].sort().join(' ');
+
+  return sorted(classes) === sorted(scopeClasses($viewport)) ? [] : classes;
+};
+
+// A container carrying a swatch or a mode class beyond the ones asked for belongs to a scope the
+// element itself is not in. A class with neither prefix says nothing about the scope, so it does
+// not disqualify a container - anything on the page may have tagged it.
+const isExactScope = (
+  node: Element,
+  containerClasses: string[],
+): boolean => [SWATCH_CONTAINER_CLASS_PREFIX, THEME_MODE_CLASS_PREFIX]
+  .every((prefix) => classesByPrefix(node, prefix)
+    .every((cssClass) => containerClasses.includes(cssClass)));
+
+/*
+ * Where an overlay belonging to `element` should be rendered: the viewport itself, or a child of it
+ * repeating the swatch and the theme mode the element resolved to.
+ *
+ * Undefined while the viewport is unset - before documentReady - which callers read as "not ready
+ * yet" (speed_dial_action defers to ready(); T713615, T1143527).
+ */
 const getSwatchContainer = (
   element: Element | dxElementWrapper,
-): dxElementWrapper => {
-  const $element = $(element);
-  const swatchContainer = $element.closest(`[class^="${SWATCH_CONTAINER_CLASS_PREFIX}"], [class*=" ${SWATCH_CONTAINER_CLASS_PREFIX}"]`);
-  const viewport: dxElementWrapper = value();
+): dxElementWrapper | undefined => {
+  const $viewport = value() as dxElementWrapper | undefined;
+
+  if (!$viewport?.length) {
+    return $viewport;
+  }
+
+  const containerClasses = getContainerClasses($(element), $viewport);
 
-  if (!swatchContainer.length) {
-    return viewport;
+  if (!containerClasses.length) {
+    return $viewport;
   }
 
-  const swatchClassRegex = new RegExp(`(\\s|^)(${SWATCH_CONTAINER_CLASS_PREFIX}.*?)(\\s|$)`);
-  const swatchClass = swatchContainer[0].className.match(swatchClassRegex)[2];
-  let viewportSwatchContainer = viewport.children(`.${swatchClass}`);
+  const selector = containerClasses.map((cssClass) => `.${cssClass}`).join('');
+  let $container = $($viewport
+    .children(selector)
+    .toArray()
+    .filter((node) => isExactScope(node, containerClasses)));
 
-  if (!viewportSwatchContainer.length) {
-    viewportSwatchContainer = $('<div>').addClass(swatchClass).appendTo(viewport);
+  if (!$container.length) {
+    $container = $('<div>').addClass(containerClasses.join(' ')).appendTo($viewport);
   }
 
-  return viewportSwatchContainer;
+  return $container;
 };
 
 export default { getSwatchContainer };
diff --git a/packages/devextreme/js/__internal/core/utils/theme_mode.ts b/packages/devextreme/js/__internal/core/utils/theme_mode.ts
new file mode 100644
index 000000000000..5a74dca286c0
--- /dev/null
+++ b/packages/devextreme/js/__internal/core/utils/theme_mode.ts
@@ -0,0 +1,28 @@
+import type { dxElementWrapper } from '@js/core/renderer';
+import $ from '@js/core/renderer';
+import { getWindow, hasWindow } from '@js/core/utils/window';
+
+export type ThemeMode = 'light' | 'dark';
+
+/*
+ * Published by a theme on every mode scope it declares. `dx-theme-mode-inverted` asks for the
+ * opposite of its surroundings, so ancestor classes never answer which mode an element ended up
+ * in - only the cascade does, and this property is where it says so.
+ */
+export const THEME_MODE_PROPERTY = '--dx-theme-mode';
+
+/** The mode an element resolves to; null when nothing declared one, or named no mode. */
+export function resolvedThemeMode(
+  element: Element | dxElementWrapper,
+): ThemeMode | null {
+  const node = $(element).get(0);
+  const window = hasWindow() ? getWindow() : undefined;
+
+  if (!node || !window?.getComputedStyle) {
+    return null;
+  }
+
+  const declared = window.getComputedStyle(node).getPropertyValue(THEME_MODE_PROPERTY).trim();
+
+  return declared === 'light' || declared === 'dark' ? declared : null;
+}
diff --git a/packages/devextreme/js/__internal/ui/__tests__/themes.test.ts b/packages/devextreme/js/__internal/ui/__tests__/themes.test.ts
new file mode 100644
index 000000000000..e6cbf4630747
--- /dev/null
+++ b/packages/devextreme/js/__internal/ui/__tests__/themes.test.ts
@@ -0,0 +1,92 @@
+import {
+  afterEach, beforeEach, describe, expect, it,
+} from '@jest/globals';
+import $ from '@js/core/renderer';
+import { themeModeChangedCallback } from '@ts/ui/m_themes_callback';
+import { mode, refreshMode, resetTheme } from '@ts/ui/themes';
+
+/*
+ * jsdom resolves a custom property declared ON an element but does not inherit it, so these cases
+ * name the mode at the element `mode()` reads it from. Inheritance - a scope declaring the property
+ * and a descendant resolving it through the cascade, which is how the mechanism actually works - is
+ * covered in a real browser by e2e/testcafe-devextreme/tests/common/themeModes.ts.
+ */
+const style = (css: string): void => { document.head.innerHTML = `<style>${css}</style>`; };
+
+const withThemeMarker = (themeName: string): string => `.dx-theme-marker { font-family: "dx.${themeName}"; }`;
+
+describe('themes.mode', () => {
+  let element = document.createElement('div');
+
+  beforeEach(() => {
+    element = document.createElement('div');
+    element.className = 'probe';
+    document.body.appendChild(element);
+  });
+
+  afterEach(() => {
+    document.head.innerHTML = '';
+    document.body.innerHTML = '';
+    resetTheme();
+  });
+
+  it('reads the mode the element resolves to', () => {
+    style('.probe { --dx-theme-mode: dark; }');
+
+    expect(mode(element)).toBe('dark');
+  });
+
+  it('accepts a renderer wrapper as well as an element', () => {
+    style('.probe { --dx-theme-mode: dark; }');
+
+    expect(mode($(element))).toBe('dark');
+  });
+
+  it('falls back to the loaded theme when nothing declares a mode', () => {
+    style(withThemeMarker('generic.dark'));
+
+    expect(mode(element)).toBe('dark');
+  });
+
+  it('answers light for a loaded theme that is not dark', () => {
+    style(withThemeMarker('generic.light'));
+
+    expect(mode(element)).toBe('light');
+  });
+
+  it('lets the element outrank the loaded theme', () => {
+    style(`${withThemeMarker('generic.dark')} .probe { --dx-theme-mode: light; }`);
+
+    expect(mode(element)).toBe('light');
+  });
+
+  it('ignores a value that names no mode', () => {
+    style(`${withThemeMarker('generic.dark')} .probe { --dx-theme-mode: sepia; }`);
+
+    expect(mode(element)).toBe('dark');
+  });
+
+  it('answers for a detached element instead of throwing', () => {
+    style(withThemeMarker('generic.dark'));
+
+    expect(mode(document.createElement('div'))).toBe('dark');
+  });
+});
+
+describe('themes.refreshMode', () => {
+  it('announces that a resolved mode may have changed', () => {
+    const told: number[] = [];
+    const subscriber = (): void => { told.push(1); };
+
+    themeModeChangedCallback.add(subscriber);
+
+    try {
+      refreshMode();
+      refreshMode();
+
+      expect(told).toHaveLength(2);
+    } finally {
+      themeModeChangedCallback.remove(subscriber);
+    }
+  });
+});
diff --git a/packages/devextreme/js/__internal/ui/m_themes_callback.ts b/packages/devextreme/js/__internal/ui/m_themes_callback.ts
index 8a5897072ef2..08f9f243d539 100644
--- a/packages/devextreme/js/__internal/ui/m_themes_callback.ts
+++ b/packages/devextreme/js/__internal/ui/m_themes_callback.ts
@@ -1,3 +1,10 @@
 import Callbacks from '@js/core/utils/callbacks';
 
 export const themeReadyCallback = Callbacks();
+
+/*
+ * Fired by `themes.refreshMode()`. Anything rendered outside the scope it belongs to - today that
+ * is open overlays, which live in the viewport - re-reads its mode here. It sits in this module so
+ * that neither themes.ts nor the overlay has to import the other.
+ */
+export const themeModeChangedCallback = Callbacks();
diff --git a/packages/devextreme/js/__internal/ui/overlay/overlay.ts b/packages/devextreme/js/__internal/ui/overlay/overlay.ts
index e1a18de96da5..c196a7d6cf76 100644
--- a/packages/devextreme/js/__internal/ui/overlay/overlay.ts
+++ b/packages/devextreme/js/__internal/ui/overlay/overlay.ts
@@ -46,6 +46,7 @@ import windowUtils from '@ts/core/utils/m_window';
 import type { OptionChanged } from '@ts/core/widget/types';
 import type { SupportedKeys } from '@ts/core/widget/widget';
 import Widget from '@ts/core/widget/widget';
+import { themeModeChangedCallback } from '@ts/ui/m_themes_callback';
 import type {
   BaseControllerProperties,
   ControllerOverlayElements,
@@ -273,6 +274,8 @@ class Overlay<
 
   _viewPortChangeHandle?: () => void;
 
+  _themeModeChangeHandle?: () => void;
+
   _proxiedDocumentDownHandler?: EventHandler;
 
   _supportedKeys(): SupportedKeys {
@@ -414,6 +417,7 @@ class Overlay<
 
     this._$wrapper.attr('data-bind', 'dxControlsDescendantBindings: true');
     this._toggleViewPortSubscription(true);
+    this._toggleThemeModeSubscription(true);
 
     const { hideTopOverlayHandler } = this.option();
 
@@ -631,6 +635,56 @@ class Overlay<
     this._refresh();
   }
 
+  _toggleThemeModeSubscription(toggle: boolean): void {
+    if (this._themeModeChangeHandle) {
+      themeModeChangedCallback.remove(this._themeModeChangeHandle);
+    }
+
+    if (toggle) {
+      this._themeModeChangeHandle = (): void => {
+        this._themeModeChangeHandler();
+      };
+
+      themeModeChangedCallback.add(this._themeModeChangeHandle);
+    }
+  }
+
+  /*
+   * The container carries the mode its owner resolved to when the overlay was shown, and nothing
+   * re-picks it afterwards: `_moveToContainer` runs on becoming visible and on a content
+   * re-render, and a class moving up the tree is neither.
+   */
+  _themeModeChangeHandler(): void {
+    if (!this._isVisible()) {
+      return;
+    }
+
+    // Move only if the scope named a different node: appending is not a no-op for a child already
+    // in place, and the detach takes the focus out, restarts animations and reloads any iframe.
+    const { $container } = this._positionController;
+    const wrapper = this._$wrapper?.get(0) as HTMLElement | undefined;
+
+    if (!$container || $container.get(0) === wrapper?.parentElement) {
+      return;
+    }
+
+    /*
+     * The move detaches the wrapper, and a detached element loses the focus for good - the browser
+     * does not hand it back on re-insert. Unlike a container the application changed on one named
+     * overlay, this runs on every open overlay at once, because an application announced that a
+     * class moved somewhere; taking the caret out of whatever the user was typing in is not part
+     * of that. The selection survives on the element itself, so restoring the focus is enough.
+     */
+    const focused = domAdapter.getActiveElement(wrapper) as HTMLElement | null;
+    const shouldRestoreFocus = !!wrapper && !!focused && domUtils.contains(wrapper, focused);
+
+    this._moveToContainer();
+
+    if (shouldRestoreFocus) {
+      focused?.focus();
+    }
+  }
+
   _renderWrapperAttributes(): void {
     const { wrapperAttr } = this.option();
 
@@ -1583,6 +1637,7 @@ class Overlay<
     }
 
     this._toggleViewPortSubscription(false);
+    this._toggleThemeModeSubscription(false);
     this._toggleSubscriptions(false);
     this._updateZIndexStackPosition(false);
 
diff --git a/packages/devextreme/js/__internal/ui/overlay/overlay_position_controller.ts b/packages/devextreme/js/__internal/ui/overlay/overlay_position_controller.ts
index cc3bef9acf77..a08290530ceb 100644
--- a/packages/devextreme/js/__internal/ui/overlay/overlay_position_controller.ts
+++ b/packages/devextreme/js/__internal/ui/overlay/overlay_position_controller.ts
@@ -173,7 +173,8 @@ export class OverlayPositionController<
   }
 
   get $container(): dxElementWrapper | undefined {
-    // NOTE: swatch classes can be updated runtime
+    // Resolved on every read: the swatch and the theme mode an element sits in can both change at
+    // runtime, and an overlay shown afterwards has to land in the scope that holds then.
     this.updateContainer();
 
     return this._$markupContainer;
diff --git a/packages/devextreme/js/__internal/ui/speed_dial_action/speed_dial_main_item.ts b/packages/devextreme/js/__internal/ui/speed_dial_action/speed_dial_main_item.ts
index 8fe2f4a5ed6f..409f80dbbe3f 100644
--- a/packages/devextreme/js/__internal/ui/speed_dial_action/speed_dial_main_item.ts
+++ b/packages/devextreme/js/__internal/ui/speed_dial_action/speed_dial_main_item.ts
@@ -314,7 +314,7 @@ class SpeedDialMainItem extends SpeedDialItem<SpeedDialMainItemProperties> {
 
     for (const action of actions) {
       const $actionElement = $('<div>')
-        .appendTo(getSwatchContainer(action.$element()));
+        .appendTo(getSwatchContainer(action.$element()) ?? $());
 
       eventsEngine.off($actionElement, 'click');
       eventsEngine.on($actionElement, 'click', () => {
@@ -483,7 +483,7 @@ export function initAction(newAction: SpeedDialAction): void {
 
   if (!speedDialMainItem) {
     const $fabMainElement = $('<div>')
-      .appendTo(getSwatchContainer(newAction.$element()));
+      .appendTo(getSwatchContainer(newAction.$element()) ?? $());
 
     speedDialMainItem = newAction._createComponent(
       $fabMainElement,
diff --git a/packages/devextreme/js/__internal/ui/themes.ts b/packages/devextreme/js/__internal/ui/themes.ts
index 537b6e7f29a9..ff49c99cf5b8 100644
--- a/packages/devextreme/js/__internal/ui/themes.ts
+++ b/packages/devextreme/js/__internal/ui/themes.ts
@@ -11,7 +11,8 @@ import { changeCallback, originalViewPort, value as viewPortValue } from '@js/co
 import { getWindow, hasWindow } from '@js/core/utils/window';
 import errors from '@js/ui/widget/ui.errors';
 import { uiLayerInitialized } from '@ts/core/utils/m_common';
-import { themeReadyCallback } from '@ts/ui/m_themes_callback';
+import { resolvedThemeMode } from '@ts/core/utils/theme_mode';
+import { themeModeChangedCallback, themeReadyCallback } from '@ts/ui/m_themes_callback';
 
 const window = getWindow();
 const ready = readyCallbacks.add;
@@ -350,13 +351,11 @@ export function init(options): void {
   current(options);
 }
 
-function isTheme(themeRegExp: string, themeName: string): boolean {
-  if (!themeName) {
-    // eslint-disable-next-line no-param-reassign
-    themeName = currentThemeName || readThemeMarker();
-  }
+function isTheme(themeRegExp: string, themeName?: string): boolean {
+  // Omitted on purpose by callers that ask about the loaded theme rather than about a given name.
+  const name: string | null = themeName || currentThemeName || readThemeMarker();
 
-  return new RegExp(themeRegExp).test(themeName);
+  return !!name && new RegExp(themeRegExp).test(name);
 }
 
 export function isMaterial(themeName: string): boolean {
@@ -375,7 +374,7 @@ export function isGeneric(themeName: string): boolean {
   return isTheme('generic', themeName);
 }
 
-export function isDark(themeName: string): boolean {
+export function isDark(themeName?: string): boolean {
   return isTheme('dark', themeName);
 }
 
@@ -383,6 +382,28 @@ export function isCompact(themeName: string): boolean {
   return isTheme('compact', themeName);
 }
 
+/**
+ * The colour mode an element is rendered in. `current()` and `isDark()` answer for the loaded
+ * stylesheet; a theme that ships both modes in one bundle has an answer per place instead, and
+ * publishes it in `--dx-theme-mode`. A theme that scopes no modes declares nothing, and the
+ * loaded theme answers.
+ */
+export function mode(element: Element | dxElementWrapper): 'light' | 'dark' {
+  return resolvedThemeMode(element) ?? (isDark() ? 'dark' : 'light');
+}
+
+/**
+ * Re-reads the colour mode for widgets rendered outside the element they belong to - today that is
+ * open overlays, which live in the viewport. Call it after moving a `dx-theme-mode-*` class or
+ * switching the theme.
+ *
+ * Deliberately not called from `current()`: a theme switch swaps one `<link>`'s href, so the new
+ * stylesheet lands after the call returns and any firing from inside would read stale values.
+ */
+export function refreshMode(): void {
+  themeModeChangedCallback.fire();
+}
+
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 function themeReady(callback): void {
   themeReadyCallback.add(callback);
@@ -511,6 +532,8 @@ export default {
   isMaterial,
   isFluent,
   isMaterialBased,
+  mode,
+  refreshMode,
   detachCssClasses,
   attachCssClasses,
   current,
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..b4690c3c07ba
--- /dev/null
+++ b/packages/devextreme/js/__internal/viz/core/themes/fluent-next/index.ts
@@ -0,0 +1,99 @@
+import { extend } from '@js/core/utils/extend';
+import { getAccentColorScheme } from '@ts/viz/core/themes/shared/accent_color_scheme';
+
+// --dxds-font-family-sans-serif
+const FONT_FAMILY = '\'segoe ui\', -apple-system, BlinkMacSystemFont, \'avenir next\', avenir, \'helvetica neue\', helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif';
+
+// --dxds-color-bg, --dxds-color-bg-hovered, --dxds-color-bg-active (dark)
+const DARK_BACKGROUND_COLOR = '#242424';
+const DARK_HOVERED_BACKGROUND_COLOR = '#3b3b3b';
+const DARK_ACTIVE_BACKGROUND_COLOR = '#1d1d1d';
+
+const font = {
+  font: {
+    family: FONT_FAMILY,
+  },
+  title: {
+    font: {
+      family: FONT_FAMILY,
+    },
+  },
+};
+
+const darkBackground = {
+  backgroundColor: DARK_BACKGROUND_COLOR,
+  export: {
+    backgroundColor: DARK_BACKGROUND_COLOR,
+    button: {
+      default: {
+        backgroundColor: DARK_BACKGROUND_COLOR,
+      },
+      hover: {
+        backgroundColor: DARK_HOVERED_BACKGROUND_COLOR,
+      },
+      focus: {
+        backgroundColor: DARK_ACTIVE_BACKGROUND_COLOR,
+      },
+      active: {
+        backgroundColor: DARK_ACTIVE_BACKGROUND_COLOR,
+      },
+    },
+  },
+  rangeSelector: {
+    sliderMarker: {
+      font: {
+        color: DARK_BACKGROUND_COLOR,
+      },
+    },
+  },
+  map: {
+    'layer:area': {
+      borderColor: DARK_BACKGROUND_COLOR,
+    },
+    controlBar: {
+      color: DARK_BACKGROUND_COLOR,
+    },
+  },
+  sparkline: {
+    pointColor: DARK_BACKGROUND_COLOR,
+  },
+  funnel: {
+    item: {
+      border: {
+        color: DARK_BACKGROUND_COLOR,
+      },
+    },
+  },
+};
+
+const themes = [
+  {
+    baseThemeName: 'fluent.blue.light',
+    theme: {
+      name: 'fluent-next.blue.light',
+      defaultPalette: 'Fluent Next',
+      ...font,
+    },
+  },
+  {
+    baseThemeName: 'fluent-next.blue.light',
+    theme: {
+      name: 'fluent-next.blue.light.compact',
+    },
+  },
+  {
+    baseThemeName: 'fluent.blue.dark',
+    theme: extend(true, {
+      name: 'fluent-next.blue.dark',
+      defaultPalette: 'Fluent Next',
+    }, font, darkBackground, getAccentColorScheme('#4B90D9')),
+  },
+  {
+    baseThemeName: 'fluent-next.blue.dark',
+    theme: {
+      name: 'fluent-next.blue.dark.compact',
+    },
+  },
+];
+
+export default themes;
diff --git a/packages/devextreme/js/__internal/viz/palette.ts b/packages/devextreme/js/__internal/viz/palette.ts
index 8d00c26d2486..6b770c0fe627 100644
--- a/packages/devextreme/js/__internal/viz/palette.ts
+++ b/packages/devextreme/js/__internal/viz/palette.ts
@@ -42,6 +42,13 @@ const palettes = {
 
   office: officePalette,
 
+  'fluent next': {
+    simpleSet: ['#0078d4', '#c83d3d', '#008f04', '#eaa300', '#e43ba6', '#865cbf'],
+    indicatingSet: ['#008f04', '#eaa300', '#c83d3d'],
+    gradientSet: ['#0078d4', '#008f04'],
+    accentColor: '#0f6cbd',
+  },
+
   'harmony light': {
     simpleSet: ['#fcb65e', '#679ec5', '#ad79ce', '#7abd5c', '#e18e92', '#b6d623', '#b7abea', '#85dbd5'],
     indicatingSet: ['#b6d623', '#fcb65e', '#e18e92'],
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/js/common/charts.d.ts b/packages/devextreme/js/common/charts.d.ts
index 8907a07b402e..a964e80f860a 100644
--- a/packages/devextreme/js/common/charts.d.ts
+++ b/packages/devextreme/js/common/charts.d.ts
@@ -97,7 +97,7 @@ export type LegendMarkerState = 'normal' | 'hovered' | 'selected';
  * @public
  * @namespace DevExpress.common.charts
  */
-export type Palette = 'Bright' | 'Harmony Light' | 'Ocean' | 'Pastel' | 'Soft' | 'Soft Pastel' | 'Vintage' | 'Violet' | 'Carmine' | 'Dark Moon' | 'Dark Violet' | 'Green Mist' | 'Soft Blue' | 'Material' | 'Office';
+export type Palette = 'Bright' | 'Harmony Light' | 'Ocean' | 'Pastel' | 'Soft' | 'Soft Pastel' | 'Vintage' | 'Violet' | 'Carmine' | 'Dark Moon' | 'Dark Violet' | 'Green Mist' | 'Soft Blue' | 'Material' | 'Office' | 'Fluent Next';
 
 /**
  * @public
diff --git a/packages/devextreme/js/ui/themes.d.ts b/packages/devextreme/js/ui/themes.d.ts
index c4cf17bed007..628ff7fe3c8c 100644
--- a/packages/devextreme/js/ui/themes.d.ts
+++ b/packages/devextreme/js/ui/themes.d.ts
@@ -1,3 +1,5 @@
+import { UserDefinedElement } from '../core/element';
+
 /**
  * @docid ui.themes
  * @namespace DevExpress.ui
@@ -33,6 +35,22 @@ export default class themes {
      * @public
      */
     static initialized(callback: Function): void;
+    /**
+     * @docid ui.themes.mode
+     * @publicName mode(element)
+     * @param1 element:Element|jQuery
+     * @return String
+     * @static
+     * @public
+     */
+    static mode(element: UserDefinedElement): 'light' | 'dark';
+    /**
+     * @docid ui.themes.refreshMode
+     * @publicName refreshMode()
+     * @static
+     * @public
+     */
+    static refreshMode(): void;
 }
 
 export function current(): string;
@@ -41,3 +59,6 @@ export function isFluent(theme: string): boolean;
 export function isMaterial(theme: string): boolean;
 export function isGeneric(theme: string): boolean;
 export function isCompact(theme: string): boolean;
+
+export function mode(element: UserDefinedElement): 'light' | 'dark';
+export function refreshMode(): void;
diff --git a/packages/devextreme/js/ui/themes.js b/packages/devextreme/js/ui/themes.js
index 7ba25bcc98a7..98dbc2a4fd5b 100644
--- a/packages/devextreme/js/ui/themes.js
+++ b/packages/devextreme/js/ui/themes.js
@@ -14,6 +14,8 @@ export const {
     isMaterial,
     isFluent,
     isMaterialBased,
+    mode,
+    refreshMode,
     detachCssClasses,
     attachCssClasses,
     current,
diff --git a/packages/devextreme/playground/jquery.html b/packages/devextreme/playground/jquery.html
index 2389ed7be937..12bca88e1d14 100644
--- a/packages/devextreme/playground/jquery.html
+++ b/packages/devextreme/playground/jquery.html
@@ -7,7 +7,7 @@
 
     <script type="text/javascript">
         const storedThemeId = localStorage.getItem("currentThemeId");
-        const safeThemeId = (storedThemeId && /^[a-z0-9.]+$/.test(storedThemeId)) ? storedThemeId : "light";
+        const safeThemeId = (storedThemeId && /^[a-z0-9.-]+$/.test(storedThemeId)) ? storedThemeId : "light";
 
         const link = document.createElement("link");
         link.href = `../artifacts/css/dx.${encodeURIComponent(safeThemeId)}.css`;
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/playground/tier-reachability-audit.html b/packages/devextreme/playground/tier-reachability-audit.html
new file mode 100644
index 000000000000..ffc2445e0b02
--- /dev/null
+++ b/packages/devextreme/playground/tier-reachability-audit.html
@@ -0,0 +1,514 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>fluent-next: runtime reachability audit of the --dx-* tier</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link id="theme" rel="stylesheet" type="text/css" href="../artifacts/css/dx.fluent-next.blue.light.css">
+  <script src="../artifacts/js/jquery.js"></script>
+  <script src="../artifacts/js/dx-gantt.js"></script>
+  <script src="../artifacts/js/dx-diagram.js"></script>
+  <script src="../artifacts/js/dx.all.debug.js" charset="utf-8"></script>
+  <style>
+    body { font: 13px/1.5 -apple-system, "Segoe UI", sans-serif; margin: 16px; }
+    #report { white-space: pre-wrap; font-family: ui-monospace, Menlo, monospace; background: #f3f5f7; padding: 12px; border-radius: 6px; }
+    #gallery > div { margin: 8px 0; }
+    .fail { color: #b00020; }
+  </style>
+</head>
+<body class="dx-viewport">
+  <h1>Reachability audit: every rule reading var(--dx-…) must see the variable on the elements it matches</h1>
+  <div id="report">initialising…</div>
+  <div id="gallery"></div>
+
+  <script>
+  /*
+   * Method: a CSSOM walk over the bundle — for every rule that reads var(--dx-…) take all the
+   * elements of document.querySelectorAll(selector) and check getComputedStyle(el).getPropertyValue(name):
+   * an empty string means the variable does not arrive (a reachability hole — exactly the htmlEditor bug).
+   * The report is left in window.__auditResult; the page is a standing defence (procedure in TESTING.md).
+   */
+  async function buildGallery() {
+    const g = document.getElementById('gallery');
+    const add = (id, html) => { const d = document.createElement('div'); d.id = id; if (html) d.innerHTML = html; g.appendChild(d); return d; };
+    const widget = (name, options) => { const d = add('w-' + name.toLowerCase()); try { $(d)[name](options ?? {}); } catch (e) { console.warn(name, e.message); } return d; };
+
+    add('m-badge', '<span class="dx-badge">7</span>');
+    add('m-card', '<div class="dx-card" style="width:200px;padding:8px">card</div>');
+    add('m-informer', '<div class="dx-informer"><div class="dx-informer-icon"></div>ok</div>');
+    add('m-field-standalone', '<div class="dx-field"><div class="dx-field-label">Standalone field</div><div class="dx-field-value-static">v</div></div>');
+    add('m-fieldset', '<div class="dx-fieldset"><div class="dx-field"><div class="dx-field-label">L</div><div class="dx-field-value-static">V</div></div></div>');
+    add('m-splitterbar', '<div class="dx-splitter-bar"><div class="dx-splitter-bar-icon"></div></div>');
+
+    widget('dxButton', { text: 'Btn', icon: 'home' });
+    widget('dxButtonGroup', { items: [{ text: 'a' }, { text: 'b' }] });
+    widget('dxTextBox', { label: 'Outlined', stylingMode: 'outlined', value: 'x' });
+    widget('dxTextBox', { mode: 'search', value: 'search' });
+    widget('dxTextArea', { value: 'ta' });
+    widget('dxNumberBox', { showSpinButtons: true, value: 5 });
+    widget('dxSwitch', { value: true });
+    widget('dxRadioGroup', { items: ['a', 'b'], value: 'a' }); // .dx-radiobutton
+    widget('dxProgressBar', { min: 0, max: 100, value: 40 });
+    widget('dxLoadIndicator', {});
+    widget('dxAccordion', { dataSource: [{ title: 't', text: 'x' }], collapsible: true });
+    widget('dxGallery', { dataSource: ['a', 'b'], showIndicator: true, showNavButtons: true, height: 80 });
+    widget('dxTileView', { dataSource: [{ text: 't' }], height: 90 });
+    widget('dxToolbar', { width: 220, items: [
+      { widget: 'dxButton', options: { text: 'A' }, location: 'before' },
+      { widget: 'dxButton', options: { text: 'H1' }, locateInMenu: 'always' },
+    ] });
+    widget('dxMenu', { items: [{ text: 'File', items: [{ text: 'Open' }] }] });
+    widget('dxTabPanel', { dataSource: [{ title: 'tab', text: 'x' }], height: 90 });
+    widget('dxScrollView', { height: 60 }).innerHTML = '<div style="height:200px">scroll</div>'; // .dx-scrollable
+    widget('dxSplitter', { dataSource: [{ text: 'L' }, { text: 'R' }], height: 70, width: 240 });
+    widget('dxDropDownButton', { text: 'dd', items: ['x', 'y'] });
+    widget('dxSelectBox', { items: ['one'], value: 'one' });
+    widget('dxTagBox', { items: ['a', 'b'], value: ['a'] });
+    widget('dxDateBox', { value: new Date(2026, 7, 14) });
+    widget('dxDateRangeBox', { startDate: new Date(2026, 7, 1), endDate: new Date(2026, 7, 14) });
+    widget('dxColorBox', { value: '#0f6cbd' });
+    widget('dxLookup', { items: ['a'], value: 'a' });
+    widget('dxDataGrid', {
+      dataSource: [{ a: 1, b: 'x' }],
+      columns: ['a', 'b'],
+      columnChooser: { enabled: true },
+      filterRow: { visible: true },
+      headerFilter: { visible: true },
+    });
+    widget('dxTreeList', {
+      dataSource: [{ id: 1, a: 'x' }],
+      columns: ['a'],
+      filterRow: { visible: true },
+      headerFilter: { visible: true },
+    });
+    // adaptive menu: the hamburger plus a TreeView in an overlay, which carries no .dx-menu-base
+    const am = add('w-adaptive-menu'); am.style.width = '60px';
+    $(am).dxMenu({ items: [{ text: 'Items 1', items: [{ text: 'Item 1' }, { text: 'Item 2', icon: 'copy' }] }, { text: 'Items 2' }], adaptivityEnabled: true });
+    try { widget('dxCardView', { dataSource: [{ a: 1 }], columns: [{ dataField: 'a', allowHeaderFiltering: true }], headerFilter: { visible: true } }); } catch (e) { console.warn('cardView', e.message); }
+    // validation: an invalid editor with its message
+    const v = widget('dxTextBox', { value: '' });
+    try {
+      $(v).dxValidator({ validationRules: [{ type: 'required' }] });
+      $(v).dxValidator('instance').validate();
+    } catch (e) { console.warn('validator', e.message); } // .dx-invalid-message, .dx-validationsummary
+    try { widget('dxHtmlEditor', { value: '<p>x</p>', stylingMode: 'outlined' }); } catch (e) { console.warn('htmlEditor', e.message); }
+    // synthetic fallback in case Quill is unavailable: the classes are all the CSS needs
+    add('m-htmleditor', '<div class="dx-htmleditor dx-htmleditor-outlined" style="height:40px"></div>');
+
+    // overlays: toast, tooltip, popover, load panel, action sheet, toolbar menu, column chooser, rollers
+    widget('dxToast', { message: 'audit', type: 'info', visible: true, displayTime: 600000, animation: null });
+    const tt = add('m-tt', '<span>target</span>');
+    try { $(add('w-tooltip')).dxTooltip({ target: tt, visible: true, contentTemplate: () => 'tip' }); } catch (e) {}
+    try { $(add('w-popover')).dxPopover({ target: tt, visible: true, contentTemplate: () => 'pop' }); } catch (e) {}
+    try { $(add('w-loadpanel')).dxLoadPanel({ visible: true, message: 'load' }); } catch (e) {}
+    try { $(add('w-actionsheet')).dxActionSheet({ items: [{ text: 'Do' }], visible: true, showCancelButton: true }); } catch (e) {}
+    try { $('#w-dxtoolbar .dx-dropdownmenu-button').trigger('dxclick'); } catch (e) {} // .dx-dropdownmenu-popup-wrapper
+    try { $('#w-dxdatagrid').dxDataGrid('instance').showColumnChooser(); } catch (e) {}
+    // filter menu (operations) in the filter row, header filter, hamburger of the adaptive menu
+    try { $('#w-dxdatagrid .dx-filter-menu .dx-menu-item').first().trigger('dxclick'); } catch (e) {}
+    try { $('#w-dxdatagrid .dx-header-filter').first().trigger('dxclick'); } catch (e) {}
+    try { $('#w-adaptive-menu .dx-menu-hamburger-button, #w-adaptive-menu .dx-button').first().trigger('dxclick'); } catch (e) {}
+    try { $('#w-dxcardview .dx-header-filter, #w-dxcardview .dx-cardview-header-filter-indicator').first().trigger('dxclick'); } catch (e) {}
+    try { $('#w-dxlookup').dxLookup('instance').open(); } catch (e) {}
+    try { $(add('w-rollers')).dxDateBox({ pickerType: 'rollers', value: new Date(2026, 7, 14), opened: true }); } catch (e) {} // .dx-dateview-rollers
+    try { $(add('w-ctx')).dxContextMenu({ items: [{ text: 'i1' }], visible: true, target: 'body', position: { of: tt } }); } catch (e) {}
+    try { $('#w-dxselectbox').dxSelectBox('instance').open(); } catch (e) {} // .dx-dropdownlist-popup-wrapper, .dx-dropdowneditor-overlay (dropDownEditor/dropDownList)
+
+
+    /* ---- wave H: the components that entered the tier in the second pass ---- */
+    widget('dxBox', { direction: 'row', height: 40, items: [{ ratio: 1, text: 'a' }, { ratio: 1, text: 'b' }] });
+    widget('dxCheckBox', { value: true });
+    widget('dxSlider', { min: 0, max: 100, value: 40, width: 200 });
+    widget('dxRangeSlider', { start: 20, end: 60, width: 200 });
+    widget('dxTabs', { dataSource: [{ text: 'one' }, { text: 'two', icon: 'home' }], width: 220 });
+    widget('dxList', { items: ['a', 'b'], height: 90, showSelectionControls: true, selectionMode: 'multiple' });
+    widget('dxCalendar', { value: new Date(2026, 7, 14), showWeekNumbers: true });
+    widget('dxTreeView', { items: [{ text: 'root', expanded: true, items: [{ text: 'leaf' }] }], showCheckBoxesMode: 'normal' });
+    widget('dxForm', { formData: { a: 'x' }, items: [{ dataField: 'a', isRequired: true, helpText: 'help' }] });
+    widget('dxFilterBuilder', { fields: [{ dataField: 'a', dataType: 'string' }], value: ['a', '=', 'x'] });
+    widget('dxFileUploader', { labelText: 'or drop here' });
+    widget('dxColorView', { value: '#0f6cbd', editAlphaChannel: true });
+    widget('dxStepper', { items: [{ text: 'one' }, { text: 'two' }] });
+    widget('dxDrawer', { opened: true, height: 80 });
+    /* dxRecurrenceEditor is not registered as a plugin of its own - it warned and built nothing
+       here for as long as this line existed. The scheduler's appointment form builds it, and the
+       popup below passes a recurrenceRule so that it does. */
+    widget('dxChat', { user: { id: 'me' }, items: [
+      { id: 1, timestamp: Date.now(), text: 'hi', author: { id: 'a', name: 'A' } },
+      { id: 2, timestamp: Date.now(), text: 'yo', author: { id: 'me', name: 'Me' } },
+    ] });
+    widget('dxPagination', { pageCount: 12, showInfo: true, showNavigationButtons: true,
+      showPageSizeSelector: true, allowedPageSizes: [5, 10] });
+    widget('dxPivotGrid', { height: 200, fieldChooser: { enabled: true }, fieldPanel: { visible: true },
+      dataSource: { store: [{ a: 'x', b: 1 }], fields: [
+        { dataField: 'a', area: 'row' }, { dataField: 'b', area: 'data', summaryType: 'count' }] } });
+    widget('dxScheduler', { height: 250, views: ['day'], currentView: 'day',
+      currentDate: new Date(2026, 7, 14),
+      dataSource: [{ text: 'appt', startDate: new Date(2026, 7, 14, 9), endDate: new Date(2026, 7, 14, 10) }] });
+    widget('dxFileManager', { height: 250, permissions: { create: true, delete: true, rename: true },
+      fileSystemProvider: [{ name: 'folder', isDirectory: true, items: [] }, { name: 'f.txt', size: 1 }] });
+    widget('dxGantt', { height: 200, tasks: { dataSource: [
+      { id: 1, title: 'task', start: new Date(2026, 7, 10), end: new Date(2026, 7, 14), progress: 30 }] } });
+    widget('dxDiagram', { height: 200 });
+    // roots with no widget of their own here: the map needs the network, the FAB and timeView are host-built
+    add('m-map', '<div class="dx-map-container"><div class="dx-map-shield"></div></div>');
+    add('m-fab', '<div class="dx-fa-button"><div class="dx-fa-button-icon"></div></div>');
+    add('m-timeview', '<div class="dx-timeview"><div class="dx-timeview-clock"></div><div class="dx-timeview-field"></div></div>');
+    add('m-surface', '<div class="dx-surface">surface</div>');
+    /*
+     * A grid's pager and the standalone widget carry MUTUALLY EXCLUSIVE classes (content.tsx, getClasses):
+     * dx-pager in grid-compatibility mode, dx-pagination as a widget of its own. Both must be exercised.
+     */
+    const pagerGrid = add('w-grid-pager');
+    try {
+      $(pagerGrid).dxDataGrid({
+        dataSource: Array.from({ length: 20 }, (_, i) => ({ a: i })), columns: ['a'],
+        paging: { pageSize: 5 },
+        pager: { visible: true, showInfo: true, showPageSizeSelector: true,
+          allowedPageSizes: [5, 10], showNavigationButtons: true },
+      });
+    } catch (e) { console.warn('grid pager', e.message); }
+
+    // openers for the satellites of wave H
+    try { $('#w-dxpivotgrid').dxPivotGrid('instance').getFieldChooserPopup().show(); } catch (e) { console.warn('field chooser', e.message); }
+    try { $('#w-dxfilemanager').dxFileManager('instance').option('permissions.create', true); } catch (e) {}
+
+    // wave H satellites: popups that would otherwise never be built (rootsEmpty reports the remainder)
+    try { $('#w-dxcardview').dxCardView('instance').showColumnChooser(); } catch (e) { console.warn('cardView chooser', e.message); }
+    /* Twice on purpose: the popup does not build at all when the first call already carries a
+       recurrenceRule, and the recurrence form only appears when one is there. Plain first to build
+       it, then the rule to fill it. */
+    try {
+      const sch = $('#w-dxscheduler').dxScheduler('instance');
+      const appt = { startDate: new Date(2026, 7, 14, 9), endDate: new Date(2026, 7, 14, 10), text: 'appt' };
+      sch.showAppointmentPopup(appt);
+      setTimeout(() => {
+        try { sch.showAppointmentPopup({ ...appt, recurrenceRule: 'FREQ=MONTHLY;INTERVAL=2;COUNT=5' }, false); } catch (e) { console.warn('recurrence form', e.message); }
+      }, 400);
+    } catch (e) { console.warn('scheduler popup', e.message); }
+    try { $('#w-dxfilterbuilder .dx-filterbuilder-item-field').first().trigger('dxclick'); } catch (e) {}
+    try { $('#w-dxfilterbuilder .dx-filterbuilder-item-operation').first().trigger('dxclick'); } catch (e) {}
+    try { $('#w-dxlist').dxList('instance').option('menuItems', [{ text: 'Delete' }]); } catch (e) {}
+    openTheRest();
+    addPortals();
+    await new Promise((r) => setTimeout(r, 1600));
+  }
+
+  /*
+   * Portals: elements JS creates OUTSIDE the root of its widget, so they see the tier only if the root
+   * is declared on them as well. Drag states are reproduced with markup rather than gestures: the audit
+   * checks that the variable resolves on an element with the right classes in the right place of the
+   * tree — exactly what broke in PR #34774 (the column preview without a background, the row clone
+   * without a shadow, the AI popup with a black border). Classes and placement come from the sources:
+   *   .dx-datagrid-drag-header  — m_columns_resizing_reordering: element().appendTo(swatchContainer)
+   *   .dx-sortable-clone/-dragging, .dx-sortable-placeholder — m_draggable/_createDragElement,
+   *                                m_sortable/_getPlaceholderElement (container = the viewport)
+   *   .dx-ai-chat .dx-aidialog  — grid_core/ai_chat: the wrapperAttr of the Popup
+   */
+/*
+ * Roots the gallery declared but never built. Each one used to be checked over an empty set, which
+ * reads as a pass: the audit's own second illness, and the half of G2 that the skip rule does not
+ * reach. Opened with the widget's own API wherever there is one, so the markup comes from the
+ * product rather than from this file.
+ */
+  function openTheRest() {
+    const g = document.getElementById('gallery');
+    const add = (id, html) => { const d = document.createElement('div'); d.id = id; if (html) d.innerHTML = html; g.appendChild(d); return d; };
+    const open = (id, widget) => { try { $(id)[widget]('instance').open(); } catch (e) { console.warn(id, e.message); } };
+    open('#w-dxcolorbox', 'dxColorBox');              // .dx-colorbox-overlay
+    open('#w-dxtagbox', 'dxTagBox');                  // .dx-tagbox-popup-wrapper
+    try { $('#w-dxdropdownbutton').dxDropDownButton('instance').toggle(true); } catch (e) { console.warn('dropDownButton', e.message); }
+    try { $('#w-dxtreelist').dxTreeList('instance').showColumnChooser(); } catch (e) { console.warn('treeList chooser', e.message); }
+    try { $('#w-dxscheduler .dx-scheduler-appointment').first().trigger('dxclick'); } catch (e) {}
+    // an action sheet in popover mode carries a wrapper of its own
+    const asTarget = add('m-as-target', '<span>as</span>');
+    try { $(add('w-actionsheet-popover')).dxActionSheet({ items: [{ text: 'Do' }], usePopover: true, target: asTarget, visible: true }); } catch (e) { console.warn('actionSheet popover', e.message); }
+    try { $(add('w-validationsummary')).dxValidationSummary({}); } catch (e) { console.warn('validationSummary', e.message); }
+    /*
+     * The appointment tooltip has an API and no gesture: a click on an appointment is unreliable
+     * here because a 250px day view collapses them into a collector. It needs a scheduler OF ITS
+     * OWN - a scheduler shows one overlay at a time, so opening the tooltip on the first one closes
+     * the appointment popup and takes 2200 checks with it.
+     */
+    const s2 = add('w-dxscheduler-tooltip');
+    try {
+      $(s2).dxScheduler({
+        height: 200, views: ['day'], currentView: 'day', currentDate: new Date(2026, 7, 14),
+        dataSource: [{ text: 'appt', startDate: new Date(2026, 7, 14, 9), endDate: new Date(2026, 7, 14, 10) }],
+      });
+      $(s2).dxScheduler('instance').showAppointmentTooltip(
+        { text: 'appt', startDate: new Date(2026, 7, 14, 9), endDate: new Date(2026, 7, 14, 10) },
+        s2.querySelector('.dx-scheduler-date-table-cell'),
+      );
+    } catch (e) { console.warn('appointment tooltip', e.message); }
+    /*
+     * Six roots stay empty on purpose, and not because the gallery is short of a widget:
+     * .dx-recurrence-button-group, -datebox-until-date, -numberbox-interval-wrapper,
+     * -numberbox-repeat-count, -radiogroup-repeat-type and -repeat-on are emitted by NO JS in the
+     * product - neither the sources nor the built bundle contains those strings - while base,
+     * fluent and fluent-next all still style them. The scheduler's recurrence form builds
+     * dx-scheduler-form-recurrence-* instead. Dead across every theme, so removing them is a job of
+     * its own rather than something to fake here.
+     */
+    // the three mode classes the theme switches on - nothing in a gallery carries them by itself
+    add('m-modes', '<div class="dx-theme-mode-light"></div><div class="dx-theme-mode-dark"></div><div class="dx-theme-mode-inverted"></div>');
+  }
+
+  function addPortals() {
+    const viewport = document.querySelector('.dx-viewport') || document.body;
+    const portal = document.createElement('div');
+    portal.id = 'portals';
+    portal.innerHTML = `
+      <div class="dx-datagrid-drag-header">Employee</div>
+      <div class="dx-treelist-drag-header">Employee</div>
+      <div class="dx-sortable-dragging dx-sortable-clone">
+        <div class="dx-datagrid dx-datagrid-dragview"><div class="dx-datagrid-rowsview"><table><tr class="dx-row dx-data-row"><td>row</td></tr></table></div></div>
+      </div>
+      <div class="dx-sortable-placeholder dx-sortable-placeholder-inside"></div>
+      <div class="dx-overlay-wrapper dx-ai-chat dx-aidialog">
+        <div class="dx-overlay-content"><div class="dx-ai-chat dx-ai-chat__content">
+          <div class="dx-ai-chat__message dx-ai-chat__message--success">
+            <div class="dx-ai-chat__message-icon"></div><div class="dx-ai-chat__message-status">ok</div>
+            <div class="dx-ai-chat__action-list"><div class="dx-ai-chat__action-list-item dx-ai-chat__action-list-item--success">done</div></div>
+          </div>
+          <div class="dx-ai-chat__message dx-ai-chat__message--error">
+            <div class="dx-ai-chat__message-icon"></div><div class="dx-ai-chat__message-error-text">err</div>
+            <div class="dx-ai-chat__action-list-item dx-ai-chat__action-list-item--error">failed</div>
+            <div class="dx-ai-chat__action-list-item dx-ai-chat__action-list-item--aborted">aborted</div>
+          </div>
+          <div class="dx-ai-chat__message dx-ai-chat__message--pending">
+            <div class="dx-ai-chat__message-icon"></div><div class="dx-ai-chat__message-status">…</div>
+          </div>
+          <div class="dx-ai-chat__message-regenerate-button"></div>
+          <div class="dx-chat"><div class="dx-chat-messagegroup dx-chat-messagegroup-alignment-start"><div class="dx-chat-messagebubble">bubble</div></div></div>
+          <div class="dx-progressbar dx-ai-prompt-editor__progressbar"><div class="dx-progressbar-animating-container"></div></div>
+        </div></div>
+      </div>
+      <div class="dx-sortable-placeholder dx-cardview-header-item-sort-indicator"></div>
+      <div class="dx-scheduler-overlay-panel">
+        <div class="dx-overlay-content"><div class="dx-list"><div class="dx-list-item">
+          <div class="dx-tooltip-appointment-item">
+            <div class="dx-tooltip-appointment-item-marker"><div class="dx-tooltip-appointment-item-marker-body"></div></div>
+            <div class="dx-tooltip-appointment-item-content">
+              <div class="dx-tooltip-appointment-item-content-subject">Subject</div>
+              <div class="dx-tooltip-appointment-item-content-date">10:00 AM</div>
+            </div>
+            <div class="dx-tooltip-appointment-item-delete-button"><div class="dx-icon"></div></div>
+          </div>
+        </div></div></div>
+      </div>
+      <div class="dx-sortable-dragging dx-sortable-clone">
+        <div class="dx-treeview-item"><span>File.txt</span></div>
+      </div>
+      <div class="dx-sortable-dragging dx-sortable-clone">
+        <div class="dx-cardview-header-item">
+          <span class="dx-cardview-header-item-text">Column</span>
+          <div class="dx-cardview-header-item-sorting-order">1</div>
+          <div class="dx-icon dx-header-filter-icon--selected"></div>
+        </div>
+      </div>
+      <div class="dx-overlay-wrapper dx-aidialog dx-popup-wrapper">
+        <div class="dx-overlay-content">
+          <div class="dx-aidialog-title">title</div>
+          <div class="dx-aidialog-content">body</div>
+          <div class="dx-aidialog-controls"><div class="dx-selectbox"></div></div>
+        </div>
+      </div>
+      <div class="dx-overlay-wrapper">
+        <div class="dx-overlay-content dx-messagelist-context-menu-content">
+          <div class="dx-menu-item dx-state-focused"><div class="dx-icon dx-icon-trash"></div>delete</div>
+        </div>
+      </div>
+      <div class="dx-overlay-wrapper dx-popup-wrapper dx-chat-confirmation-popup-wrapper">
+        <div class="dx-overlay-content"><div class="dx-popup-content">delete?</div>
+          <div class="dx-popup-bottom dx-toolbar"><div class="dx-toolbar-items-container"></div></div></div>
+      </div>
+      <div class="dx-overlay-wrapper dx-popup-wrapper dx-htmleditor-add-image-popup">
+        <div class="dx-overlay-content"><div class="dx-popup-content">
+          <div class="dx-form"><div class="dx-collection"><div class="dx-field-item"><div class="dx-field-item-label-text">URL</div></div></div></div>
+          <div class="dx-fileuploader"><div class="dx-fileuploader-input-wrapper"><div class="dx-fileuploader-input-label">drop</div></div></div>
+        </div></div>
+      </div>
+      <div class="dx-overlay-wrapper dx-popup-wrapper dx-filemanager-dialog-popup dx-filemanager-dialog-name-editor-popup">
+        <div class="dx-overlay-content"><div class="dx-popup-content"><div class="dx-textbox dx-texteditor"></div></div></div>
+      </div>
+      <div class="dx-overlay-wrapper dx-popup-wrapper dx-diagram-properties-popup">
+        <div class="dx-overlay-content"><div class="dx-diagram-properties-panel-group-title">group</div>
+          <div class="dx-diagram-properties-panel-group-toolbar dx-toolbar"><div class="dx-toolbar-item"></div></div></div>
+      </div>
+      <div class="dx-overlay-wrapper dx-popup-wrapper dx-diagram-toolbox-popup">
+        <div class="dx-overlay-content"><div class="dx-diagram-toolbox-input"><div class="dx-button"><div class="dx-button-content"></div><div class="dx-icon"></div></div></div></div>
+      </div>
+      <div class="dx-overlay-content dx-list-context-menucontent"><div class="dx-list-items"></div></div>
+      <div class="dx-cardview-column-chooser-list"><div class="dx-empty-message">empty</div></div>
+      <div class="dx-cardview-column-chooser-plain"><div class="dx-treeview"><div class="dx-treeview-select-all-item"></div></div></div>
+      <div class="dx-datagrid"><table><tr><td class="dx-command-ai-header-button"><div class="dx-button dx-state-focused">AI</div></td></tr></table></div>
+      <div class="dx-overlay-wrapper dx-popup-wrapper dx-datagrid-ai-assistant-confirm-dialog">
+        <div class="dx-overlay-content"><div class="dx-popup-content">confirm?</div></div>
+      </div>
+      <div class="dx-overlay-wrapper dx-popup-wrapper dx-treelist-ai-assistant-confirm-dialog">
+        <div class="dx-overlay-content"><div class="dx-popup-content">confirm?</div></div>
+      </div>
+      <div class="dx-overlay-wrapper dx-diagram-contextmenu">
+        <div class="dx-overlay-content"><div class="dx-menu-item">item</div></div>
+      </div>
+      <div class="dx-overlay-wrapper dx-popup-wrapper dx-diagram-toolbox-popup dx-diagram-mobile-popup">
+        <div class="dx-overlay-content"><div class="dx-popup-content">toolbox</div></div>
+      </div>
+      <div class="dx-overlay-wrapper dx-popup-wrapper dx-diagram-context-toolbox">
+        <div class="dx-overlay-content"><div class="dx-popup-content">context toolbox</div></div>
+      </div>
+      <div class="dx-toast-stack"><div class="dx-toast dx-toast-info"><div class="dx-toast-icon"></div><div class="dx-toast-message">stacked</div></div></div>
+      <div class="dx-toolbar dx-toolbar-background"><div class="dx-toolbar-items-container"></div></div>`;
+    viewport.appendChild(portal);
+  }
+
+  /*
+   * The gallery builds every widget at rest, so selectors carrying .dx-state-disabled match almost
+   * nothing and are skipped in silence. The class is dropped from the probe instead: no rule in the
+   * bundle declares a --dx-* inside a disabled scope, so dropping it cannot change which
+   * declarations reach an element. A compound left empty becomes `*`, keeping the ancestor.
+   */
+  const STATE_CLASS = '.dx-state-disabled';
+  const probeSelector = (selectorText) => selectorText
+    .split(',')
+    .map((one) => one
+      .replace(/::?[a-z-]+(\([^)]*\))?/g, '')
+      .split(/(\s*[>+~]\s*|\s+)/)
+      .map((part, index) => (index % 2 || !part.includes(STATE_CLASS)
+        ? part
+        : part.split(STATE_CLASS).join('') || '*'))
+      .join('')
+      .trim())
+    .filter(Boolean)
+    .join(',');
+
+  function audit() {
+    const failures = new Map();
+    /*
+     * A skipped check used to be a single counter, and a counter cannot tell the difference between
+     * a name that is verified twenty times elsewhere and one that is never verified at all. The
+     * second is the blind spot: every element carrying it was a closed overlay, so nothing about
+     * that name has ever been checked. Counted per name, with the selectors that were skipped.
+     */
+    const seenPerName = new Map();   // name -> { ok, skipped, where:Set }
+    const note = (name, key, field) => {
+      if (!seenPerName.has(name)) seenPerName.set(name, { ok: 0, skipped: 0, where: new Set() });
+      const row = seenPerName.get(name);
+      row[field] += 1;
+      if (field === 'skipped' && row.where.size < 4) row.where.add(key);
+    };
+    const failures2 = failures;
+    let rulesChecked = 0;
+    let readsChecked = 0;
+    let notRendered = 0;
+    let stateProbed = 0;
+    for (const sheet of document.styleSheets) {
+      let rules;
+      try { rules = sheet.cssRules; } catch (e) { continue; }
+      const walk = (list) => {
+        for (const rule of list) {
+          /* CSS Nesting: style rules ALWAYS have cssRules (even an empty list) — recursing
+             does not replace handling the rule itself, or only the keyframe tail is seen */
+          if (rule.cssRules?.length) walk(rule.cssRules);
+          if (!rule.style || !rule.selectorText) continue;
+          // runtime contract: JS sets these names conditionally (style.setProperty), and with no value
+          // the declaration is meant to disappear — emptiness here is the design, not a hole
+          const RUNTIME_CONTRACT = ['--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'];
+          /* The accent ramp is derived from --dx-accent-color, which the HOST page sets: the blue
+             bundle ships the derivation and no source, so empty here is the contract, not a hole. */
+          const isAccent = (n) => n.startsWith('--dx-accent-');
+          const reads = [...rule.cssText.matchAll(/var\(\s*(--dx-[a-z0-9-]+)/g)]
+            .map((m) => m[1])
+            .filter((n) => !n.startsWith('--dxds-') && !RUNTIME_CONTRACT.includes(n) && !isAccent(n));
+          if (!reads.length) continue;
+          rulesChecked += 1;
+          let matched;
+          if (rule.selectorText.includes(STATE_CLASS)) stateProbed += 1;
+          try { matched = document.querySelectorAll(probeSelector(rule.selectorText) || rule.selectorText); } catch (e) { continue; }
+          for (const el of matched) {
+            /*
+             * Only ONE kind of invisible element cannot be judged: the content of an overlay that
+             * has never been shown. It still sits inline in the widget, OUTSIDE the wrapper that
+             * carries the component root, so the variable legitimately does not reach it THERE and
+             * would reach it once the overlay opens.
+             *
+             * Everything else that is merely invisible - a display:none pull-down, an empty grid's
+             * no-data panel, the off label of a switch that is on - is already in its final place in
+             * the tree, and a custom property resolves on it whether or not it paints. Skipping
+             * those was the blind spot (G2): 1590 of the 2152 skips were of that kind, and checking
+             * them finds zero holes, which is the point - they were never in doubt, they were
+             * simply never asked.
+             */
+            const inOverlay = el.closest('.dx-overlay-content');
+            if (!el.getClientRects().length && inOverlay && !inOverlay.closest('.dx-overlay-wrapper')) {
+              notRendered += 1;
+              for (const name of reads) note(name, rule.selectorText.slice(0, 70), 'skipped');
+              continue;
+            }
+            const cs = getComputedStyle(el);
+            for (const name of reads) {
+              readsChecked += 1;
+              note(name, rule.selectorText.slice(0, 70), 'ok');
+              if (cs.getPropertyValue(name).trim() === '') {
+                const key = `${name} @ ${rule.selectorText.slice(0, 90)}`;
+                if (!failures.has(key)) failures.set(key, el.className.toString().slice(0, 80));
+              }
+            }
+          }
+        }
+      };
+      walk(rules);
+    }
+    /*
+     * The gallery's second illness: a root is declared but no element on the page carries it — there is
+     * nothing to check and the audit is green over an empty set. The roots come from the bundle itself
+     * (a rule declaring --dx-* IS a root), so no registry is needed here.
+     */
+    const rootsEmpty = [];
+    for (const sheet of document.styleSheets) {
+      let rules; try { rules = sheet.cssRules; } catch (e) { continue; }
+      for (const rule of rules) {
+        if (!rule.style || !rule.selectorText) continue;
+        const declares = [...rule.style].some((prop) => prop.startsWith('--dx-') && !prop.startsWith('--dxds-'));
+        if (!declares) continue;
+        for (const sel of rule.selectorText.split(',')) {
+          const one = sel.trim();
+          if (one === ':root') continue;
+          let n = 0; try { n = document.querySelectorAll(one).length; } catch (e) { continue; }
+          if (!n) rootsEmpty.push(one);
+        }
+      }
+    }
+    /* The names nothing ever checked: every element that could have carried them was unbuilt. */
+    const unchecked = [...seenPerName]
+      .filter(([, row]) => row.ok === 0 && row.skipped > 0)
+      .map(([name, row]) => ({ name, skipped: row.skipped, where: [...row.where] }))
+      .sort((a, b) => a.name.localeCompare(b.name));
+    return { rulesChecked, readsChecked, notRendered, stateProbed, unchecked,
+      rootsEmpty: [...new Set(rootsEmpty)].sort(), failures: [...failures.entries()] };
+  }
+
+  (async () => {
+    await buildGallery();
+    const result = audit();
+    window.__auditResult = result;
+    const el = document.getElementById('report');
+    el.innerHTML = `rules reading the tier: ${result.rulesChecked}; checks (element × name): ${result.readsChecked}; \nnot rendered (closed overlays, not judged): ${result.notRendered}\nprobed with ${STATE_CLASS} dropped: ${result.stateProbed}\n`
+      + (result.unchecked.length
+        ? `<span class="fail">NEVER CHECKED: ${result.unchecked.length} name(s)</span> — every element that reads them was unbuilt:\n`
+          + result.unchecked.map((u) => `  · ${u.name} (×${u.skipped})  ${u.where[0] ?? ''}`).join('\n') + '\n'
+        : '✔ every name the tier reads was checked on at least one built element\n')
+      + (result.rootsEmpty.length
+        ? `<span class="fail">ROOTS WITH NO ELEMENT: ${result.rootsEmpty.length}</span> — the gallery never builds them, so they are checked over an empty set:\n`
+          + result.rootsEmpty.map((s) => `  · ${s}`).join('\n') + '\n'
+        : '✔ every declared root is built by at least one element\n')
+      + (result.failures.length
+        ? `<span class="fail">HOLES: ${result.failures.length}</span>\n` + result.failures.map(([k, cls]) => `✘ ${k}\n    on element: ${cls}`).join('\n')
+        : '✔ no holes: every readable variable is visible to its elements');
+  })();
+  </script>
+</body>
+</html>
diff --git a/packages/devextreme/project.json b/packages/devextreme/project.json
index aa39d154dbbc..420fdffdbf8c 100644
--- a/packages/devextreme/project.json
+++ b/packages/devextreme/project.json
@@ -1246,10 +1246,17 @@
           "outputDir": "./artifacts/npm/devextreme-internal/scss"
         }
       },
+      "dependsOn": [
+        {
+          "projects": ["devextreme-scss"],
+          "target": "build:themes"
+        }
+      ],
       "inputs": [
         "{workspaceRoot}/packages/devextreme-scss/scss/**/*",
         "{workspaceRoot}/packages/devextreme-scss/fonts/**/*",
-        "{workspaceRoot}/packages/devextreme-scss/icons/**/*"
+        "{workspaceRoot}/packages/devextreme-scss/icons/**/*",
+        "{workspaceRoot}/packages/devextreme-scss/build/internal-scss-paths.json"
       ],
       "outputs": [
         "{projectRoot}/artifacts/npm/devextreme/scss/**/*",
@@ -1657,6 +1664,11 @@
         "!{projectRoot}/js/__internal/core/localization/cldr-data/**/*",
         "!{projectRoot}/js/__internal/core/localization/default_messages.ts",
         "test",
+        "{workspaceRoot}/packages/devextreme-dist/package.json",
+        "{workspaceRoot}/packages/devextreme-scss/scss/**/*",
+        "{workspaceRoot}/packages/devextreme-scss/fonts/**/*",
+        "{workspaceRoot}/packages/devextreme-scss/icons/**/*",
+        "{workspaceRoot}/README.md",
         "{workspaceRoot}/pnpm-lock.yaml"
       ],
       "outputs": [
@@ -1717,6 +1729,11 @@
         "internalPackageEnv",
         "default",
         "test",
+        "{workspaceRoot}/packages/devextreme-dist/package.json",
+        "{workspaceRoot}/packages/devextreme-scss/scss/**/*",
+        "{workspaceRoot}/packages/devextreme-scss/fonts/**/*",
+        "{workspaceRoot}/packages/devextreme-scss/icons/**/*",
+        "{workspaceRoot}/README.md",
         "{workspaceRoot}/pnpm-lock.yaml"
       ],
       "outputs": [
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/overlay.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/overlay.tests.js
index 0df2590f3ba9..4a4e771422c3 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/overlay.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/overlay.tests.js
@@ -22,6 +22,7 @@ import * as zIndex from '__internal/ui/overlay/z_index';
 import 'ui/scroll_view/ui.scrollable';
 import selectors from '__internal/core/utils/m_selectors';
 import swatch from '__internal/core/utils/swatch_container';
+import themes from 'ui/themes';
 import documentSizeCallbacks from '__internal/core/utils/document_size_callbacks';
 import keyboardMock from '../../helpers/keyboardMock.js';
 import pointerMock from '../../helpers/pointerMock.js';
@@ -327,6 +328,134 @@ testModule('render', moduleConfig, () => {
         assert.ok(overlayContainer.parent().hasClass(VIEWPORT_CLASS), 'overlay\'s container is the viewport\'s child');
     });
 
+    /*
+     * The generic bundle this suite loads scopes no modes, so these declare --dx-theme-mode
+     * themselves. It goes on the scope element rather than into a document stylesheet: under
+     * ?shadowDom the fixture lives in a shadow root, which a rule in <head> cannot reach, while a
+     * declaration on the element inherits down either way - and inheriting is the whole mechanism.
+     */
+    const declareMode = ($scope, mode) => {
+        $scope.get(0).style.setProperty('--dx-theme-mode', mode);
+
+        return $scope;
+    };
+
+    const modeScope = (mode) => declareMode($('<div>').appendTo('#container'), mode);
+
+    test('Theme mode - an open overlay moves to the mode its owner resolves to after refreshMode', function(assert) {
+        const $scope = modeScope('light');
+        const overlay = $('<div>').appendTo($scope).dxOverlay({ visible: true }).dxOverlay('instance');
+
+        assert.ok(overlay.$wrapper().parent().hasClass('dx-theme-mode-light'), 'starts in the mode of its owner');
+
+        declareMode($scope, 'dark');
+        themes.refreshMode();
+
+        const container = overlay.$wrapper().parent();
+
+        assert.ok(container.hasClass('dx-theme-mode-dark'), 'moved to the new mode');
+        assert.ok(container.parent().hasClass(VIEWPORT_CLASS), 'still a child of the viewport');
+
+        overlay.dispose();
+        $scope.remove();
+    });
+
+    test('Theme mode - refreshMode leaves a hidden overlay alone until it is shown', function(assert) {
+        const $scope = modeScope('light');
+        const overlay = $('<div>').appendTo($scope).dxOverlay({ visible: false }).dxOverlay('instance');
+
+        declareMode($scope, 'dark');
+        themes.refreshMode();
+
+        assert.strictEqual(overlay.$wrapper().parent().length, 0, 'a hidden overlay is not attached anywhere');
+
+        overlay.show();
+
+        assert.ok(overlay.$wrapper().parent().hasClass('dx-theme-mode-dark'), 'and picks the current mode when shown');
+
+        overlay.dispose();
+        $scope.remove();
+    });
+
+    test('Theme mode - refreshMode leaves an overlay whose scope did not change where it is', function(assert) {
+        const $scope = modeScope('light');
+        const overlay = $('<div>').appendTo($scope).dxOverlay({ visible: true }).dxOverlay('instance');
+        const $wrapper = overlay.$wrapper();
+        const container = $wrapper.parent().get(0);
+
+        /*
+         * Re-appending a child that is already in place is not a no-op: the node is detached and
+         * re-inserted, which takes the focus out of the overlay, restarts its animations and
+         * reloads any iframe in its content. Watching for the detach is steadier than asserting on
+         * document.activeElement, which needs the window to be focused.
+         */
+        const containerWatch = new MutationObserver(() => {});
+        const wrapperWatch = new MutationObserver(() => {});
+
+        containerWatch.observe(container, { childList: true });
+        wrapperWatch.observe($wrapper.get(0), { childList: true });
+
+        themes.refreshMode();
+
+        const moves = containerWatch.takeRecords().length + wrapperWatch.takeRecords().length;
+
+        containerWatch.disconnect();
+        wrapperWatch.disconnect();
+
+        assert.strictEqual(overlay.$wrapper().parent().get(0), container, 'still in the same container');
+        assert.strictEqual(moves, 0, 'and nothing was detached to put it back where it already was');
+
+        overlay.dispose();
+        $scope.remove();
+    });
+
+    test('Theme mode - a move keeps the focus inside the overlay', function(assert) {
+        const $scope = modeScope('light');
+        const overlay = $('<div>').appendTo($scope).dxOverlay({
+            visible: true,
+            contentTemplate: () => $('<input class="probe-input" value="hello world">')
+        }).dxOverlay('instance');
+
+        const input = overlay.$content().find('.probe-input').get(0);
+        // under ?shadowDom the overlay lives in a shadow root, and the document reports its host
+        const focused = () => input.getRootNode().activeElement;
+
+        input.focus();
+        input.setSelectionRange(4, 4);
+
+        assert.strictEqual(focused(), input, 'the caret starts inside the overlay');
+
+        declareMode($scope, 'dark');
+        themes.refreshMode();
+
+        assert.ok(overlay.$wrapper().parent().hasClass('dx-theme-mode-dark'), 'the overlay did move');
+        assert.strictEqual(focused(), input, 'and the focus came back to where it was');
+        assert.strictEqual(input.selectionStart, 4, 'with the caret still in place');
+
+        overlay.dispose();
+        $scope.remove();
+    });
+
+    test('Theme mode - a disposed overlay stops listening', function(assert) {
+        const $scope = modeScope('light');
+        const overlay = $('<div>').appendTo($scope).dxOverlay({ visible: true }).dxOverlay('instance');
+        let told = 0;
+
+        overlay._themeModeChangeHandler = () => { told += 1; };
+
+        themes.refreshMode();
+
+        assert.strictEqual(told, 1, 'a live overlay is subscribed - without this the case below passes for the wrong reason');
+
+        overlay.dispose();
+        declareMode($scope, 'dark');
+
+        themes.refreshMode();
+
+        assert.strictEqual(told, 1, 'and a disposed one is not told again');
+        $scope.remove();
+    });
+
     test('Overlay does not fail if swatch is undefined (render before documentReady, T713615, T1143527)', function(assert) {
         const stub = sinon.stub(swatch, 'getSwatchContainer').callsFake(() => {
             return undefined;
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..456200c34855 100644
--- a/packages/devextreme/testing/tests/DevExpress.viz.core/themes.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.viz.core/themes.tests.js
@@ -1,5 +1,6 @@
 import $ from 'jquery';
 import themeModule from 'viz/themes';
+import { createPalette, getGradientPalette } from 'viz/palette';
 import uiThemeModule from 'ui/themes';
 
 uiThemeModule.setDefaultTimeout(0);
@@ -358,6 +359,90 @@ QUnit.test('Invalid input data (with color scheme)', function(assert) {
     });
 });
 
+const FLUENT_NEXT_FONT_FAMILY = '\'segoe ui\', -apple-system, BlinkMacSystemFont, \'avenir next\', avenir, \'helvetica neue\', helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif';
+
+[
+    { theme: 'fluent-next.blue.light', accentColor: '#0F6CBD', backgroundColor: '#ffffff' },
+    { theme: 'fluent-next.blue.light.compact', accentColor: '#0F6CBD', backgroundColor: '#ffffff' },
+    { theme: 'fluent-next.blue.dark', accentColor: '#4B90D9', backgroundColor: '#242424' },
+    { theme: 'fluent-next.blue.dark.compact', accentColor: '#4B90D9', backgroundColor: '#242424' },
+].forEach(({ theme, accentColor, backgroundColor }) => {
+    QUnit.test(`fluent-next theme should be registered: ${theme}`, function(assert) {
+        themeModule.currentTheme(theme);
+
+        assert.strictEqual(themeModule.currentTheme(), theme);
+    });
+
+    QUnit.test(`fluent-next theme should render text with the theme font: ${theme}`, function(assert) {
+        const registeredTheme = themeModule.getTheme(theme);
+
+        assert.strictEqual(registeredTheme.font.family, FLUENT_NEXT_FONT_FAMILY, 'font');
+        assert.strictEqual(registeredTheme.title.font.family, FLUENT_NEXT_FONT_FAMILY, 'title font');
+        assert.strictEqual(registeredTheme.title.subtitle.font.family, FLUENT_NEXT_FONT_FAMILY, 'subtitle font');
+        assert.strictEqual(registeredTheme.chart.title.font.family, FLUENT_NEXT_FONT_FAMILY, 'chart title font');
+        assert.strictEqual(registeredTheme.gauge.title.font.family, FLUENT_NEXT_FONT_FAMILY, 'gauge title font');
+        assert.strictEqual(registeredTheme.title.font.size, 20, 'title font size is inherited');
+        assert.strictEqual(registeredTheme.title.font.weight, 500, 'title font weight is inherited');
+    });
+
+    QUnit.test(`fluent-next theme should paint the background with the theme surface color: ${theme}`, function(assert) {
+        const registeredTheme = themeModule.getTheme(theme);
+
+        assert.strictEqual(registeredTheme.backgroundColor, backgroundColor, 'backgroundColor');
+        assert.strictEqual(registeredTheme.chart.containerBackgroundColor, backgroundColor, 'chart container');
+        assert.strictEqual(registeredTheme.gauge.containerBackgroundColor, backgroundColor, 'gauge container');
+        assert.strictEqual(registeredTheme.rangeSelector.containerBackgroundColor, backgroundColor, 'rangeSelector container');
+        assert.strictEqual(registeredTheme.chart.commonSeriesSettings.candlestick.innerColor, backgroundColor, 'candlestick inner color');
+        assert.strictEqual(registeredTheme.gauge.scale.tick.color, backgroundColor, 'gauge tick');
+        assert.strictEqual(registeredTheme.map.background.color, backgroundColor, 'map background');
+        assert.strictEqual(registeredTheme.map['layer:area'].borderColor, backgroundColor, 'map area border');
+        assert.strictEqual(registeredTheme.map.controlBar.color, backgroundColor, 'map control bar');
+        assert.strictEqual(registeredTheme.sparkline.pointColor, backgroundColor, 'sparkline point');
+        assert.strictEqual(registeredTheme.loadingIndicator.backgroundColor, backgroundColor, 'loading indicator');
+        assert.strictEqual(registeredTheme.export.backgroundColor, backgroundColor, 'export background');
+        assert.strictEqual(registeredTheme.chart.export.backgroundColor, backgroundColor, 'chart export background');
+        assert.strictEqual(registeredTheme.export.button.default.backgroundColor, backgroundColor, 'export button background');
+    });
+
+    QUnit.test(`fluent-next theme should color series with the Fluent Next palette: ${theme}`, function(assert) {
+        const defaultPalette = themeModule.getTheme(theme).defaultPalette;
+
+        const simpleSet = createPalette(undefined, {}, defaultPalette).generateColors(6);
+        const indicatingSet = createPalette(undefined, { type: 'indicatingSet' }, defaultPalette).generateColors(3);
+        const gradientSet = getGradientPalette(undefined, defaultPalette);
+
+        assert.deepEqual(simpleSet, ['#0078d4', '#c83d3d', '#008f04', '#eaa300', '#e43ba6', '#865cbf'], 'simpleSet');
+        assert.deepEqual(indicatingSet, ['#008f04', '#eaa300', '#c83d3d'], 'indicatingSet');
+        assert.deepEqual([gradientSet.getColor(0), gradientSet.getColor(1)], ['#0078d4', '#008f04'], 'gradientSet');
+    });
+
+    QUnit.test(`fluent-next theme should accent widgets with its own primary color: ${theme}`, function(assert) {
+        const registeredTheme = themeModule.getTheme(theme);
+
+        assert.strictEqual(registeredTheme.rangeSelector.selectedRangeColor, accentColor, 'rangeSelector selected range');
+        assert.strictEqual(registeredTheme.rangeSelector.sliderMarker.color, accentColor, 'rangeSelector slider marker');
+        assert.strictEqual(registeredTheme.rangeSelector.sliderHandle.color, accentColor, 'rangeSelector slider handle');
+        assert.strictEqual(registeredTheme.map['layer:marker:dot'].color, accentColor, 'map dot marker');
+        assert.strictEqual(registeredTheme.map['layer:marker:bubble'].color, accentColor, 'map bubble marker');
+        assert.strictEqual(registeredTheme.map.legend.markerColor, accentColor, 'map legend marker');
+        assert.strictEqual(registeredTheme.bullet.color, accentColor, 'bullet');
+        assert.strictEqual(registeredTheme.gauge.valueIndicators.rangebar.color, accentColor, 'gauge rangebar');
+        assert.strictEqual(registeredTheme.gauge.valueIndicators['textcloud'].color, accentColor, 'gauge textcloud');
+    });
+});
+
+['fluent-next.blue.dark', 'fluent-next.blue.dark.compact'].forEach((theme) => {
+    QUnit.test(`fluent-next dark theme should cut out shapes with the surface color instead of the material one: ${theme}`, function(assert) {
+        const registeredTheme = themeModule.getTheme(theme);
+
+        assert.strictEqual(registeredTheme.rangeSelector.sliderMarker.font.color, '#242424', 'rangeSelector slider marker text');
+        assert.strictEqual(registeredTheme.funnel.item.border.color, '#242424', 'funnel item border');
+        assert.strictEqual(registeredTheme.export.button.hover.backgroundColor, '#3b3b3b', 'export button hover');
+        assert.strictEqual(registeredTheme.export.button.focus.backgroundColor, '#1d1d1d', 'export button focus');
+        assert.strictEqual(registeredTheme.export.button.active.backgroundColor, '#1d1d1d', 'export button active');
+    });
+});
+
 
 QUnit.module('refresh all', {
     createItem: function() {
diff --git a/packages/devextreme/ts/dx.all.d.ts b/packages/devextreme/ts/dx.all.d.ts
index e1aea6585339..d3d771cca1d0 100644
--- a/packages/devextreme/ts/dx.all.d.ts
+++ b/packages/devextreme/ts/dx.all.d.ts
@@ -2144,7 +2144,8 @@ declare module DevExpress.common.charts {
     | 'Green Mist'
     | 'Soft Blue'
     | 'Material'
-    | 'Office';
+    | 'Office'
+    | 'Fluent Next';
   export type PaletteColorSet = 'simpleSet' | 'indicatingSet' | 'gradientSet';
   export type PaletteExtensionMode = 'alternate' | 'blend' | 'extrapolate';
   export type PointInteractionMode =
@@ -34245,6 +34246,14 @@ declare module DevExpress.ui {
      * [descr:ui.themes.initialized(callback)]
      */
     static initialized(callback: Function): void;
+    /**
+     * [descr:ui.themes.mode(element)]
+     */
+    static mode(element: DevExpress.core.UserDefinedElement): 'light' | 'dark';
+    /**
+     * [descr:ui.themes.refreshMode()]
+     */
+    static refreshMode(): void;
   }
   /**
    * [descr:Widget]
diff --git a/packages/nx-infra-plugin/src/executors/scss-assemble/executor.e2e.spec.ts b/packages/nx-infra-plugin/src/executors/scss-assemble/executor.e2e.spec.ts
index bebf5fbea714..aa2fea1f6081 100644
--- a/packages/nx-infra-plugin/src/executors/scss-assemble/executor.e2e.spec.ts
+++ b/packages/nx-infra-plugin/src/executors/scss-assemble/executor.e2e.spec.ts
@@ -34,6 +34,11 @@ describe('ScssAssembleExecutor E2E', () => {
     fs.mkdirSync(path.join(scssPackageDir, 'scss'), { recursive: true });
     fs.mkdirSync(path.join(scssPackageDir, 'fonts'), { recursive: true });
     fs.mkdirSync(path.join(scssPackageDir, 'icons', 'material'), { recursive: true });
+    fs.mkdirSync(path.join(scssPackageDir, 'build'), { recursive: true });
+    fs.writeFileSync(
+      path.join(scssPackageDir, 'build', 'internal-scss-paths.json'),
+      JSON.stringify(['widgets/dropped/', 'bundles/dx.dropped.']),
+    );
   });
 
   afterEach(() => {
@@ -83,4 +88,63 @@ describe('ScssAssembleExecutor E2E', () => {
     expect(content).toContain(expectedSvg);
     expect(content).toContain(expectedPng);
   });
+
+  it('should keep the paths listed as internal by the scss package out of the package', async () => {
+    await writeFileText(
+      path.join(scssPackageDir, 'scss', 'widgets', 'kept', '_index.scss'),
+      '.a {}',
+    );
+    await writeFileText(
+      path.join(scssPackageDir, 'scss', 'widgets', 'dropped', 'nested', '_index.scss'),
+      '.b {}',
+    );
+    await writeFileText(path.join(scssPackageDir, 'scss', 'bundles', 'dx.kept.scss'), '.c {}');
+    await writeFileText(
+      path.join(scssPackageDir, 'scss', 'bundles', 'dx.dropped.blue.light.scss'),
+      '.d {}',
+    );
+
+    const context = createMockContext({ root: tempDir });
+    const result = await executor(OPTIONS, context);
+
+    expect(result.success).toBe(true);
+    expect(fs.existsSync(path.join(outputDir, 'widgets', 'kept', '_index.scss'))).toBe(true);
+    expect(fs.existsSync(path.join(outputDir, 'bundles', 'dx.kept.scss'))).toBe(true);
+    expect(fs.existsSync(path.join(outputDir, 'widgets', 'dropped'))).toBe(false);
+    expect(fs.existsSync(path.join(outputDir, 'bundles', 'dx.dropped.blue.light.scss'))).toBe(
+      false,
+    );
+  });
+
+  it('should fail instead of publishing everything when the internal path list is missing', async () => {
+    await writeFileText(path.join(outputDir, 'widgets', 'kept', '_index.scss'), '.a {}');
+    await writeFileText(path.join(scssPackageDir, 'scss', 'placeholder.scss'), '.a {}');
+    fs.rmSync(path.join(scssPackageDir, 'build', 'internal-scss-paths.json'));
+
+    const context = createMockContext({ root: tempDir });
+    const result = await executor(OPTIONS, context);
+
+    expect(result.success).toBe(false);
+    expect(fs.existsSync(path.join(outputDir, 'placeholder.scss'))).toBe(false);
+    expect(await readFileText(path.join(outputDir, 'widgets', 'kept', '_index.scss'))).toBe(
+      '.a {}',
+    );
+  });
+
+  it('should drop files an earlier run left in the output directory', async () => {
+    await writeFileText(path.join(outputDir, 'widgets', 'renamed-away', '_index.scss'), '.old {}');
+    await writeFileText(
+      path.join(scssPackageDir, 'scss', 'widgets', 'kept', '_index.scss'),
+      '.new {}',
+    );
+
+    const context = createMockContext({ root: tempDir });
+    const result = await executor(OPTIONS, context);
+
+    expect(result.success).toBe(true);
+    expect(fs.existsSync(path.join(outputDir, 'widgets', 'renamed-away'))).toBe(false);
+    expect(await readFileText(path.join(outputDir, 'widgets', 'kept', '_index.scss'))).toBe(
+      '.new {}',
+    );
+  });
 });
diff --git a/packages/nx-infra-plugin/src/executors/scss-assemble/scss-assemble.impl.ts b/packages/nx-infra-plugin/src/executors/scss-assemble/scss-assemble.impl.ts
index b49778435343..786867196d63 100644
--- a/packages/nx-infra-plugin/src/executors/scss-assemble/scss-assemble.impl.ts
+++ b/packages/nx-infra-plugin/src/executors/scss-assemble/scss-assemble.impl.ts
@@ -4,12 +4,28 @@ import { glob } from 'glob';
 import { logger } from '@nx/devkit';
 import { createExecutor } from '../../utils/create-executor';
 import { toPosixPath } from '../../utils/path-resolver';
-import { readFileText, writeFileText, ensureDir } from '../../utils/file-operations';
+import { readFileText, writeFileText, ensureDir, exists } from '../../utils/file-operations';
 import { copyDirectory } from '../copy-files/copy-files.impl';
 import { DATA_URI_SCSS_REGEX, encodeDataUriForCssUrl } from '../../utils/scss-data-uri';
 import { ScssAssembleExecutorSchema } from './schema';
 
 const SCSS_EXTENSIONS = new Set(['.scss', '.css']);
+const INTERNAL_SCSS_PATHS_FILE = path.join('build', 'internal-scss-paths.json');
+
+export async function readInternalScssPaths(scssPackagePath: string): Promise<string[]> {
+  const listPath = path.join(scssPackagePath, INTERNAL_SCSS_PATHS_FILE);
+
+  if (!(await exists(listPath))) {
+    throw new Error(`Internal SCSS path list not found: ${listPath}`);
+  }
+
+  return JSON.parse(await readFileText(listPath)) as string[];
+}
+
+export function isInternalScssPath(relativePath: string, internalPaths: string[]): boolean {
+  const posixPath = relativePath.split('\\').join('/');
+  return internalPaths.some((internalPath) => posixPath.startsWith(internalPath));
+}
 
 async function inlineDataUri(content: string, scssRoot: string): Promise<string> {
   const matches = [...content.matchAll(DATA_URI_SCSS_REGEX)];
@@ -37,10 +53,13 @@ async function inlineDataUri(content: string, scssRoot: string): Promise<string>
 async function copyScssWithInlineDataUri(
   scssPackagePath: string,
   outputDir: string,
+  internalPaths: string[],
 ): Promise<void> {
   const scssSourceDir = path.join(scssPackagePath, 'scss');
   const cwd = toPosixPath(scssSourceDir);
-  const relPaths = await glob('**/*', { cwd, nodir: true });
+  const relPaths = (await glob('**/*', { cwd, nodir: true })).filter(
+    (relPath) => !isInternalScssPath(relPath, internalPaths),
+  );
 
   await Promise.all(
     relPaths.map(async (relPath) => {
@@ -87,8 +106,12 @@ export default createExecutor<ScssAssembleExecutorSchema, ResolvedScssAssemble>(
     return { scssPackagePath, outputDir };
   },
   run: async ({ scssPackagePath, outputDir }) => {
+    const internalPaths = await readInternalScssPaths(scssPackagePath);
+
+    await fs.rm(outputDir, { recursive: true, force: true });
+
     await Promise.all([
-      copyScssWithInlineDataUri(scssPackagePath, outputDir),
+      copyScssWithInlineDataUri(scssPackagePath, outputDir, internalPaths),
       copyFonts(scssPackagePath, outputDir),
       copyIcons(scssPackagePath, outputDir),
     ]);
diff --git a/packages/nx-infra-plugin/src/executors/scss-build/executor.e2e.spec.ts b/packages/nx-infra-plugin/src/executors/scss-build/executor.e2e.spec.ts
index 10c6d1e9a037..3012a34283a6 100644
--- a/packages/nx-infra-plugin/src/executors/scss-build/executor.e2e.spec.ts
+++ b/packages/nx-infra-plugin/src/executors/scss-build/executor.e2e.spec.ts
@@ -1,6 +1,6 @@
 import * as fs from 'fs';
 import * as path from 'path';
-import executor from './executor';
+import executor, { findMissingThemeCss } from './executor';
 import { ScssBuildExecutorSchema } from './schema';
 import { createMockContext, createTempDir, cleanupTempDir } from '../../utils/test-utils';
 import { writeFileText, writeJson, readFileText } from '../../utils';
@@ -29,7 +29,9 @@ function createMockModules(projectRoot: string): void {
       '}',
       'module.exports = {',
       '  SassString,',
-      '  compile: () => ({ css: \'@charset "UTF-8"; .a{display:flex}\' })',
+      "  compile: (source) => ({ css: source.includes('unbannered')",
+      "    ? '/* not the banner */\\n:root{--first-declaration:1}\\n/* mentions auto-generated */\\n:root{--last-declaration:2}'",
+      '    : \'/**\\n * Do not edit directly, this file was auto-generated.\\n */\\n@charset "UTF-8"; .a{display:flex}\' })',
       '};',
       '',
     ].join('\n'),
@@ -144,6 +146,11 @@ async function setupProjectStructure(workspaceRoot: string): Promise<string> {
     '.generic-$COLOR { color: red; }',
   );
 
+  await writeFileText(
+    path.join(projectRoot, 'scss', '_design-system', 'fluent', 'accents', 'blue.scss'),
+    ':root { --dxds-primary-100: #0f6cbd; }',
+  );
+
   createMockModules(projectRoot);
   return projectRoot;
 }
@@ -189,6 +196,56 @@ describe('ScssBuildExecutor E2E', () => {
     expect(commonCss).toContain('DevExtreme (dx.common.css)');
   });
 
+  it('compiles design-system accent sources into the accents subfolder without minification', async () => {
+    const projectRoot = await setupProjectStructure(tempDir);
+    await writeFileText(
+      path.join(projectRoot, 'scss', '_design-system', 'fluent', 'accents', 'storm.scss'),
+      ':root { --dxds-primary-100: #6d6a68; }',
+    );
+
+    const context = createMockContext({
+      root: tempDir,
+      projectName: 'devextreme-scss',
+      projectRoot: 'packages/devextreme-scss',
+    });
+
+    const options: ScssBuildExecutorSchema = { mode: 'all', cssOutputDir: './artifacts/css' };
+    const result = await executor(options, context);
+
+    expect(result.success).toBe(true);
+
+    const stormCss = await readFileText(
+      path.join(projectRoot, 'artifacts', 'css', 'accents', 'storm.css'),
+    );
+    expect(stormCss).toContain('DevExtreme (storm.css)');
+    expect(stormCss).not.toContain('/*min:');
+    expect(stormCss).not.toContain('/*prefixed*/');
+    expect(stormCss).not.toContain('auto-generated');
+  });
+
+  it('strips only a leading generator banner, keeping css that merely mentions auto-generated', async () => {
+    const projectRoot = await setupProjectStructure(tempDir);
+    await writeFileText(
+      path.join(projectRoot, 'scss', '_design-system', 'fluent', 'accents', 'unbannered.scss'),
+      ':root { --dxds-primary-100: #6d6a68; }',
+    );
+
+    const context = createMockContext({
+      root: tempDir,
+      projectName: 'devextreme-scss',
+      projectRoot: 'packages/devextreme-scss',
+    });
+
+    await executor({ mode: 'all', cssOutputDir: './artifacts/css' }, context);
+
+    const unbanneredCss = await readFileText(
+      path.join(projectRoot, 'artifacts', 'css', 'accents', 'unbannered.css'),
+    );
+    expect(unbanneredCss).toContain('/* not the banner */');
+    expect(unbanneredCss).toContain('--first-declaration');
+    expect(unbanneredCss).toContain('--last-declaration');
+  });
+
   it('builds ci mode only for selected dev bundles and uses ci profile', async () => {
     const projectRoot = await setupProjectStructure(tempDir);
     const context = createMockContext({
@@ -219,6 +276,41 @@ describe('ScssBuildExecutor E2E', () => {
     expect(fs.existsSync(path.join(projectRoot, 'scss', 'bundles', 'dx.common.scss'))).toBe(true);
   });
 
+  it('fails when the design-system produced no accent palettes', async () => {
+    const projectRoot = await setupProjectStructure(tempDir);
+    fs.rmSync(path.join(projectRoot, 'scss', '_design-system'), { recursive: true });
+
+    const context = createMockContext({
+      root: tempDir,
+      projectName: 'devextreme-scss',
+      projectRoot: 'packages/devextreme-scss',
+    });
+
+    const options: ScssBuildExecutorSchema = { mode: 'all', cssOutputDir: './artifacts/css' };
+    const result = await executor(options, context);
+
+    expect(result.success).toBe(false);
+  });
+
+  it('reports declared themes that left no CSS behind', async () => {
+    const projectRoot = await setupProjectStructure(tempDir);
+    const context = createMockContext({
+      root: tempDir,
+      projectName: 'devextreme-scss',
+      projectRoot: 'packages/devextreme-scss',
+    });
+
+    await executor({ mode: 'all', cssOutputDir: './artifacts/css' }, context);
+
+    const cssDir = path.join(projectRoot, 'artifacts', 'css');
+    const deps = { themeOptions: { getThemes: () => [['generic', 'default', 'light']] } };
+
+    expect(findMissingThemeCss(cssDir, deps as never)).toEqual([]);
+
+    fs.rmSync(path.join(cssDir, 'dx.light.css'));
+    expect(findMissingThemeCss(cssDir, deps as never)).toEqual(['dx.light.css']);
+  });
+
   it('fails in ci mode when a configured bundle source is missing', async () => {
     await setupProjectStructure(tempDir);
     const context = createMockContext({
diff --git a/packages/nx-infra-plugin/src/executors/scss-build/executor.ts b/packages/nx-infra-plugin/src/executors/scss-build/executor.ts
index 8c0bdaed7166..84dd0943568a 100644
--- a/packages/nx-infra-plugin/src/executors/scss-build/executor.ts
+++ b/packages/nx-infra-plugin/src/executors/scss-build/executor.ts
@@ -1 +1,2 @@
 export { default } from './scss-build.impl';
+export { findMissingThemeCss } from './scss-build.impl';
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..ea4fe8b9c320 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
@@ -13,6 +13,12 @@ import { ScssBuildExecutorSchema } from './schema';
 
 const DEFAULT_BUNDLES_DIR = './scss/bundles';
 const DEFAULT_CSS_OUTPUT_DIR = '../devextreme/artifacts/css';
+const ACCENT_SOURCES_DIR = './scss/_design-system/fluent/accents';
+const ACCENT_OUTPUT_DIR_NAME = 'accents';
+const LEADING_COMMENT_REGEX = /^\s*\/\*[\s\S]*?\*\/\s*/;
+const GENERATOR_BANNER_MARKER = 'auto-generated';
+const TOKENS_PACKAGE = '@devexpress/design-tokens-internal';
+const TOKEN_BUILT_BUNDLE_PREFIX = 'dx.fluent-next.';
 const DEFAULT_DEV_BUNDLE_NAMES = [
   'light',
   'light.compact',
@@ -26,6 +32,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 {
@@ -37,6 +46,8 @@ interface BuildDependencies {
   cleanCssSanitizeOptions: unknown;
   cleanCssDevOptions: unknown;
   devextremeVersion: string;
+  /** Version of the design-token package a theme is generated from; null when it is not installed. */
+  tokensVersion: string | null;
 }
 
 type MinifyProfile = 'all' | 'ci';
@@ -52,11 +63,21 @@ function readFileDataUri(filePath: string, svgEncoding?: string): string {
   return encodeDataUriContent(buffer, filePath, svgEncoding);
 }
 
-function createStarLicenseHeader(fileName: string, version: string): string {
+/*
+ * `tokensVersion` is stamped on the stylesheets generated from the design-token package. Values in
+ * those files come from a package version, not from this repository, so a bug report about a colour
+ * or a size cannot be placed without it.
+ */
+function createStarLicenseHeader(
+  fileName: string,
+  version: string,
+  tokensVersion?: string | null,
+): string {
   return [
     '/**',
     `* DevExtreme (${fileName.replace(/\\/g, '/')})`,
     `* Version: ${version}`,
+    ...(tokensVersion ? [`* Design tokens: ${TOKENS_PACKAGE} ${tokensVersion}`] : []),
     `* Build date: ${new Date().toDateString()}`,
     '*',
     `* Copyright (c) 2012 - ${new Date().getFullYear()} Developer Express Inc. ALL RIGHTS RESERVED`,
@@ -74,7 +95,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')
@@ -109,6 +130,28 @@ async function generateScssBundles(
   await writeFileText(path.join(resolvedBundlesDir, 'dx.common.scss'), commonTemplate);
 }
 
+export function findMissingThemeCss(cssOutputDir: string, deps: BuildDependencies): string[] {
+  const declaredCssNames = [
+    ...deps.themeOptions
+      .getThemes()
+      .map(([theme, size, color, mode]) =>
+        generateBundleName(theme, size, color, mode).replace(/\.scss$/, '.css'),
+      ),
+    'dx.common.css',
+  ];
+
+  return declaredCssNames.filter((name) => !fs.existsSync(path.join(cssOutputDir, name)));
+}
+
+function readTokensVersion(projectRequire: NodeRequire): string | null {
+  try {
+    return projectRequire(`${TOKENS_PACKAGE}/package.json`).version ?? null;
+  } catch {
+    // A project that builds no token-generated theme does not depend on the package.
+    return null;
+  }
+}
+
 function loadDependencies(projectRoot: string): BuildDependencies {
   const projectRequire = createRequire(path.join(projectRoot, 'package.json'));
 
@@ -128,6 +171,7 @@ function loadDependencies(projectRoot: string): BuildDependencies {
     ),
     devextremeVersion: projectRequire(path.resolve(projectRoot, '../devextreme/package.json'))
       .version,
+    tokensVersion: readTokensVersion(projectRequire),
   };
 }
 
@@ -199,11 +243,48 @@ async function compileFile(
   const minified = minifier.minify(prefixed.css).styles;
 
   const outFileName = path.basename(sourceFile, '.scss') + '.css';
-  const license = createStarLicenseHeader(outFileName, deps.devextremeVersion);
+  const license = createStarLicenseHeader(
+    outFileName,
+    deps.devextremeVersion,
+    outFileName.startsWith(TOKEN_BUILT_BUNDLE_PREFIX) ? deps.tokensVersion : null,
+  );
   const withHeader = prependLicenseAndMoveCharsetFirst(minified, license);
   await writeFileText(path.join(outputDir, outFileName), withHeader);
 }
 
+async function compileAccentOverrides(
+  projectRoot: string,
+  cssOutputDir: string,
+  deps: BuildDependencies,
+): Promise<void> {
+  const accentSourcesDir = path.resolve(projectRoot, ACCENT_SOURCES_DIR);
+  const pattern = normalizeGlobPathForWindows(path.join(accentSourcesDir, '*.scss'));
+  const accentSources = await glob(pattern, { nodir: true });
+
+  if (accentSources.length === 0) {
+    throw new Error(`No accent palettes to compile in ${accentSourcesDir}`);
+  }
+
+  const accentOutputDir = path.join(cssOutputDir, ACCENT_OUTPUT_DIR_NAME);
+
+  for (const source of accentSources) {
+    logger.verbose(`Compiling accent ${source}`);
+    const compiled = deps.sass.compile(source);
+    const outFileName = `${path.basename(source, '.scss')}.css`;
+    const license = createStarLicenseHeader(
+      outFileName,
+      deps.devextremeVersion,
+      deps.tokensVersion,
+    );
+    const leadingComment = LEADING_COMMENT_REGEX.exec(compiled.css)?.[0] ?? '';
+    const css = leadingComment.includes(GENERATOR_BANNER_MARKER)
+      ? compiled.css.slice(leadingComment.length)
+      : compiled.css;
+    const withHeader = prependLicenseAndMoveCharsetFirst(css, license);
+    await writeFileText(path.join(accentOutputDir, outFileName), withHeader);
+  }
+}
+
 async function copyThemeAssets(projectRoot: string, cssOutputDir: string): Promise<void> {
   const fontsFrom = path.resolve(projectRoot, 'fonts');
   const iconsFrom = path.resolve(projectRoot, 'icons');
@@ -277,6 +358,15 @@ async function runSingleBuild(
     logger.verbose(`Compiling ${source}`);
     await compileFile(source, cssOutputDir, minifyProfile, deps, projectRoot);
   }
+
+  await compileAccentOverrides(projectRoot, cssOutputDir, deps);
+
+  if (options.mode !== 'ci') {
+    const missingThemeCss = findMissingThemeCss(cssOutputDir, deps);
+    if (missingThemeCss.length > 0) {
+      throw new Error(`Declared themes produced no CSS: ${missingThemeCss.join(', ')}`);
+    }
+  }
 }
 
 function loadChokidar(projectRoot: string): {
@@ -316,6 +406,7 @@ async function runWatchBuild(
       await compileFile(source, cssOutputDir, minifyProfile, deps, projectRoot);
     }
 
+    await compileAccentOverrides(projectRoot, cssOutputDir, deps);
     await copyThemeAssets(projectRoot, cssOutputDir);
   };
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f715661f2b0e..d48b9626f635 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -370,7 +370,7 @@ importers:
     dependencies:
       '@angular-devkit/build-angular':
         specifier: ^22.1.4
-        version: 22.1.7(55dedfc4bfd0e10f3715a8a6ea096fbb)
+        version: 22.1.7(a21eed41f64823f7ec15bc27c4068d90)
       '@angular/animations':
         specifier: ^22.1.4
         version: 22.1.6(@angular/core@22.1.6(@angular/compiler@22.1.6)(rxjs@7.8.2)(zone.js@0.16.2))
@@ -1868,6 +1868,9 @@ importers:
 
   packages/devextreme-scss:
     devDependencies:
+      '@devexpress/design-tokens-internal':
+        specifier: 262.23.0
+        version: 262.23.0
       '@stylistic/stylelint-plugin':
         specifier: 3.1.3
         version: 3.1.3(stylelint@16.22.0(typescript@5.9.3))
@@ -1883,9 +1886,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.4(tslib@2.8.1))
       sass-embedded:
         specifier: 1.93.3
         version: 1.93.3
+      style-dictionary:
+        specifier: 5.4.4
+        version: 5.4.4(tslib@2.8.1)
       stylelint:
         specifier: 'catalog:'
         version: 16.22.0(supports-color@7.2.0)(typescript@5.9.3)
@@ -4347,6 +4356,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==}
 
@@ -4426,6 +4447,9 @@ packages:
   '@devexpress/callsite-record@4.1.7':
     resolution: {integrity: sha512-qr3VQYc0KopduFkEY6SxaOIi1Xhm0jIWQfrxxMVboI/p2rjF/Mj/iqaiUxQQP6F3ujpW/7l0mzhf17uwcFZhBA==}
 
+  '@devexpress/design-tokens-internal@262.23.0':
+    resolution: {integrity: sha512-SvEMAINgRDiCEk8bM2uyQBo4yOjXEEjrSSkJFMxmA3oiRUdPGHyrLGpTlgbIofbAXA6hqKANHMMF8k1RDWQggw==}
+
   '@devexpress/utils@2.1.1':
     resolution: {integrity: sha512-hlemXR3L0yDPsMdhTQl9EtjiEYxIHklH7I4RKPkOhfrF5+jb4f3kkfvbKT7nA9aoFEHPPF0/hll43gOBpUpY0g==}
 
@@ -4452,9 +4476,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==}
 
@@ -4464,9 +4485,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==}
 
@@ -6989,16 +7007,6 @@ packages:
     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.0-rc.4':
     resolution: {integrity: sha512-cfiMrfuWCIgsFmcVG0IPuO6qTRHvF7NuG3wngX1RZzc6dU8FuBFb+J3MIR5WrdTNozlumfgL4cvz+R4ozBCvsQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -7562,6 +7570,9 @@ packages:
     peerDependencies:
       '@testing-library/dom': '>=7.21.4'
 
+  '@tokens-studio/types@0.5.2':
+    resolution: {integrity: sha512-rzMcZP0bj2E5jaa7Fj0LGgYHysoCrbrxILVbT0ohsCUH5uCHY/u6J7Qw/TE0n6gR9Js/c9ZO9T8mOoz0HdLMbA==}
+
   '@tsconfig/node10@1.0.12':
     resolution: {integrity: sha512-UCYBaeFvM11aU2y3YPZ//O5Rhj+xKyzy7mvcIoAjASbigy8mHMryP5cK7dgjlz2hWxh1g5pLw084E0a/wlUSFQ==}
 
@@ -8551,6 +8562,10 @@ packages:
   '@yarnpkg/lockfile@1.1.0':
     resolution: {integrity: sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==}
 
+  '@zip.js/zip.js@2.15.0':
+    resolution: {integrity: sha512-hYAuHAaWjt0axbofaDL5XUlmrQPsBDcK3f45ApZuh6N+8UGVk26GoGdtGDvcvzahsHytTQ6DtBVXwG9IcCMjjQ==}
+    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
@@ -8849,6 +8864,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==}
 
@@ -9705,6 +9723,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@7.0.1:
     resolution: {integrity: sha512-g0S8KAD8qf4+V//pr3BfB1aBnARLXNz2Gx+jmHU0LEriUuoQUOPOulVquHKTJ8+EAIIO7fhseNDr9wK5Q9FKBQ==}
     engines: {node: '>=18'}
@@ -12083,9 +12105,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'}
@@ -14165,6 +14194,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==}
 
@@ -14301,6 +14336,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}
@@ -14387,6 +14426,9 @@ packages:
     resolution: {integrity: sha512-KvvtD7SrlBP7dlgkBghEE3r84CABm5SmV2aNcG4oCA+qDnJ/tvKonFVvwWAyyWUEwxuNawdfEAZKP9zM3oZ2Uw==}
     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==}
 
@@ -15041,6 +15083,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==}
 
@@ -15604,6 +15652,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'}
@@ -15714,6 +15765,11 @@ packages:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
+  style-dictionary@5.4.4:
+    resolution: {integrity: sha512-Sd7dkEOLn33EpvlMyS8ykUu0us2EIFUqsysf4DSwZQ46nqQkZ2Q9o5mozu8cSizj3t7E220HaPk7EV1O7LjvDQ==}
+    engines: {node: '>=22.0.0'}
+    hasBin: true
+
   style-loader@3.3.4:
     resolution: {integrity: sha512-0WqXzrsMTyb8yjZJHDqwmnwRJvhALK9LfRtRc6B4UTWe8AijYLZYZ9thuJTZc2VfQWINADW/j+LiJnfy2RoC1w==}
     engines: {node: '>= 12.13.0'}
@@ -16025,6 +16081,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.15:
     resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
     engines: {node: '>=12.0.0'}
@@ -17489,13 +17548,13 @@ snapshots:
       - webpack-cli
       - yaml
 
-  '@angular-devkit/build-angular@22.1.7(55dedfc4bfd0e10f3715a8a6ea096fbb)':
+  '@angular-devkit/build-angular@22.1.7(a21eed41f64823f7ec15bc27c4068d90)':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@angular-devkit/architect': 0.2201.7(chokidar@5.0.0)
       '@angular-devkit/build-webpack': 0.2201.7(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.2)(postcss@8.5.25)))(webpack@5.109.2(@swc/core@1.15.30(@swc/helpers@0.5.21))(esbuild@0.28.2)(postcss@8.5.25))
       '@angular-devkit/core': 22.1.7(chokidar@5.0.0)
-      '@angular/build': 22.1.7(f2401fdfdc62c5246f409a7f4f703ac7)
+      '@angular/build': 22.1.7(eaf17dda9f0af1c674e8dbd93e3524ba)
       '@angular/compiler-cli': 22.1.6(@angular/compiler@22.1.6)(typescript@6.0.3)
       '@babel/core': 8.0.1
       '@babel/generator': 8.0.0
@@ -17554,6 +17613,8 @@ snapshots:
       karma: 6.4.4
     transitivePeerDependencies:
       - '@angular/compiler'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
       - '@minify-html/node'
       - '@rspack/core'
       - '@swc/core'
@@ -17783,7 +17844,7 @@ snapshots:
       - tsx
       - yaml
 
-  '@angular/build@22.1.7(f2401fdfdc62c5246f409a7f4f703ac7)':
+  '@angular/build@22.1.7(eaf17dda9f0af1c674e8dbd93e3524ba)':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@angular-devkit/architect': 0.2201.7(chokidar@5.0.0)
@@ -17802,7 +17863,7 @@ snapshots:
       listr2: 11.0.0
       magic-string: 1.0.0
       mrmime: 2.0.1
-      oxc-parser: 0.142.0
+      oxc-parser: 0.142.0(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)
       parse5-html-rewriting-stream: 8.0.1
       picomatch: 4.0.5
       piscina: 5.2.0
@@ -17826,6 +17887,8 @@ snapshots:
       postcss: 8.5.25
       rollup: 4.59.0
     transitivePeerDependencies:
+      - '@emnapi/core'
+      - '@emnapi/runtime'
       - '@types/node'
       - '@vitejs/devtools'
       - chokidar
@@ -20279,6 +20342,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
@@ -20356,6 +20449,8 @@ snapshots:
       lodash: 4.18.1
       pinkie-promise: 2.0.1
 
+  '@devexpress/design-tokens-internal@262.23.0': {}
+
   '@devexpress/utils@2.1.1':
     dependencies:
       tslib: 2.3.1
@@ -20380,12 +20475,6 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
-  '@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
@@ -20401,11 +20490,6 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
-  '@emnapi/runtime@1.11.1':
-    dependencies:
-      tslib: 2.8.1
-    optional: true
-
   '@emnapi/runtime@1.11.2':
     dependencies:
       tslib: 2.8.1
@@ -22150,13 +22234,6 @@ snapshots:
       '@tybys/wasm-util': 0.10.3
     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
@@ -22435,11 +22512,12 @@ snapshots:
   '@oxc-parser/binding-openharmony-arm64@0.142.0':
     optional: true
 
-  '@oxc-parser/binding-wasm32-wasi@0.142.0':
+  '@oxc-parser/binding-wasm32-wasi@0.142.0(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)':
     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)
+    transitivePeerDependencies:
+      - '@emnapi/core'
+      - '@emnapi/runtime'
     optional: true
 
   '@oxc-parser/binding-win32-arm64-msvc@0.142.0':
@@ -23442,20 +23520,6 @@ snapshots:
       '@napi-rs/wasm-runtime': 1.2.2(@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.0-rc.4':
     optional: true
 
@@ -24017,6 +24081,8 @@ snapshots:
     dependencies:
       '@testing-library/dom': 10.4.1
 
+  '@tokens-studio/types@0.5.2': {}
+
   '@tsconfig/node10@1.0.12': {}
 
   '@tsconfig/node12@1.0.11': {}
@@ -25488,6 +25554,8 @@ snapshots:
 
   '@yarnpkg/lockfile@1.1.0': {}
 
+  '@zip.js/zip.js@2.15.0': {}
+
   '@zkochan/js-yaml@0.0.7':
     dependencies:
       argparse: 2.0.1
@@ -25821,6 +25889,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: {}
@@ -26864,6 +26940,8 @@ snapshots:
 
   commondir@1.0.1: {}
 
+  component-emitter@2.0.0: {}
+
   compress-commons@7.0.1:
     dependencies:
       crc-32: 1.2.2
@@ -30207,8 +30285,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: {}
@@ -33274,7 +33359,7 @@ snapshots:
       object-keys: 1.1.1
       safe-push-apply: 1.0.0
 
-  oxc-parser@0.142.0:
+  oxc-parser@0.142.0(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2):
     dependencies:
       '@oxc-project/types': 0.142.0
     optionalDependencies:
@@ -33294,10 +33379,13 @@ snapshots:
       '@oxc-parser/binding-linux-x64-gnu': 0.142.0
       '@oxc-parser/binding-linux-x64-musl': 0.142.0
       '@oxc-parser/binding-openharmony-arm64': 0.142.0
-      '@oxc-parser/binding-wasm32-wasi': 0.142.0
+      '@oxc-parser/binding-wasm32-wasi': 0.142.0(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)
       '@oxc-parser/binding-win32-arm64-msvc': 0.142.0
       '@oxc-parser/binding-win32-ia32-msvc': 0.142.0
       '@oxc-parser/binding-win32-x64-msvc': 0.142.0
+    transitivePeerDependencies:
+      - '@emnapi/core'
+      - '@emnapi/runtime'
 
   p-finally@2.0.1: {}
 
@@ -33504,6 +33592,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: {}
@@ -33616,6 +33711,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
@@ -33717,6 +33816,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.25):
@@ -34415,7 +34516,6 @@ snapshots:
       '@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
 
@@ -34436,7 +34536,6 @@ snapshots:
       '@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
 
@@ -34558,6 +34657,15 @@ snapshots:
 
   safe-stable-stringify@2.5.0: {}
 
+  safe-ts-transforms-fork@0.0.1(style-dictionary@5.4.4(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.4(tslib@2.8.1)
+
   safer-buffer@2.1.2: {}
 
   sanitize-filename@1.6.4:
@@ -35210,6 +35318,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
@@ -35356,6 +35468,24 @@ snapshots:
 
   strip-json-comments@3.1.1: {}
 
+  style-dictionary@5.4.4(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.15.0
+      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))
@@ -36041,6 +36171,8 @@ snapshots:
 
   tiny-invariant@1.3.3: {}
 
+  tinycolor2@1.6.0: {}
+
   tinyglobby@0.2.15:
     dependencies:
       fdir: 6.5.0(picomatch@4.0.4)
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 4c3035c3a24f..faa3d52077e6 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -14,6 +14,8 @@ engineStrict: true
 # Supply-chain guard: ignore npm versions published less than 24 hours ago.
 # Need a fresher version? Add a targeted minimumReleaseAgeExclude entry with the exact version.
 minimumReleaseAge: 1440 # ⚠️ Do NOT modify this.
+minimumReleaseAgeExclude:
+  - '@devexpress/design-tokens-internal@262.23.0'
 
 overrides:
   "basic-ftp@<5.3.1": ">=5.3.1"