diff --git a/.claude/skills/fluent-next-tier/SKILL.md b/.claude/skills/fluent-next-tier/SKILL.md
new file mode 100644
index 000000000000..9c70077ddaa0
--- /dev/null
+++ b/.claude/skills/fluent-next-tier/SKILL.md
@@ -0,0 +1,77 @@
+---
+name: fluent-next-tier
+description: How the fluent-next public `--dx-*` component tier is generated and guarded in packages/devextreme-scss — derive-registries, publish, reachability and tokens:update. Use whenever work touches `registries.json`, `OVERRIDES`/`rootSelectors`, a generated `_public.scss` / `_public-tier.scss`, `_public-links.scss`, `nested-scopes.json`, `unread-tier.json`, a renamed or new fluent-next SCSS variable, a retired `--dx-*` name or `public-renames.json`, a design-token package bump (`@devexpress/design-tokens-internal`, Renovate), or when CI fails in "Check naming registries" / `naming:check` with "stale", "has no rootSelectors", "scope outside the roots", "portal", "declared and never read", "cross-scope duplicate" or "read and never declared" — even if the user names only the symptom.
+---
+
+# fluent-next component tier
+
+fluent-next publishes its SCSS variables as public custom properties (`--dx-button-bg`, …). They are a
+contract from the first release: a published name cannot be withdrawn or renamed silently. Four
+scripts in `packages/devextreme-scss` produce and guard that layer. Run them from that package.
+
+## The pipeline
+
+```
+token package + theme folders + OVERRIDES
+        │  tools/naming/derive-registries.ts
+        ▼
+tools/naming/registries.json            (generated, committed — never edit by hand)
+        │  tools/naming/publish.ts (rules in tools/naming/tier.ts)
+        ▼
+fluent-next/<folder>/_public.scss       (generated, committed, header "// GENERATED by …")
+fluent-next/_public-tier.scss           (generated collector: which root selectors carry which tier)
+fluent-next/<folder>/_public-links.scss (hand-written relations, included by the generated file)
+        │  nx build:themes
+        ▼
+devextreme/artifacts/css/dx.fluent-next.blue.light.css
+        │  tools/review/reachability.ts
+        ▼
+does every --dx-* actually reach the elements that read it?
+```
+
+`tokens:update` sits beside this: it bumps the token package and reports what moved.
+
+## Commands
+
+| Command | What it does | Details |
+|---|---|---|
+| `pnpm run naming:registries` | regenerate `registries.json` (needs built themes) | [derive-registries.md](derive-registries.md) |
+| `pnpm run naming:publish` | regenerate every `_public.scss` and `_public-tier.scss` | [publish.md](publish.md) |
+| `node tools/review/reachability.ts [--report] [--update-scopes] [--update-unread]` | check the built bundle | [reachability.md](reachability.md) |
+| `pnpm run tokens:update [<version>] [--report]` | bump the token package and report | [tokens-update.md](tokens-update.md) |
+| `pnpm run naming:check` | what CI runs: `derive-registries --check` → `publish --check` → `reachability` | — |
+| `pnpm run naming:baseline` | rewrite `tests/fluent-next-naming.baseline.json` | — |
+
+## In CI
+
+`.github/workflows/styles.yml` runs, in one job, `nx test devextreme-scss` and then
+`nx naming:check devextreme-scss` (step "Check naming registries"). `naming:check` depends on
+`build:themes`, so reachability always sees a fresh bundle there. Locally, rebuild the themes first
+(`pnpm nx build:themes devextreme-scss`) — reachability silently skips when no bundle exists.
+
+## A failure, and where to look
+
+| Message | Read |
+|---|---|
+| `registries.json is stale` | [derive-registries.md](derive-registries.md) |
+| `STATES and PARTS overlap…` / `sub-elements of X collide with a state name` | [derive-registries.md](derive-registries.md) |
+| `rootSelectors[x]: "…" does not occur in the built bundle` | [derive-registries.md](derive-registries.md) |
+| `… is stale … run pnpm naming:publish` | [publish.md](publish.md) |
+| `X publishes from folder/ but has no rootSelectors` | [publish.md](publish.md) |
+| `read and never declared`, `cross-scope duplicate`, `scope outside the roots`, `portal:`, `declared and never read`, `pinned name(s) are read now` | [reachability.md](reachability.md) |
+| a token bump turned something red | [tokens-update.md](tokens-update.md) |
+
+## Rules that hold everywhere
+
+- Generated files (`registries.json`, `_public.scss`, `_public-tier.scss`) are only ever changed by
+  re-running their script. A hand edit is caught by `--check` and lost on the next run.
+- Judgment calls live in `OVERRIDES` inside `derive-registries.ts` and are reviewed as code;
+  everything else in `registries.json` is derived.
+- Renaming a fluent-next SCSS variable retires its public `--dx-*` name. Record the old name in
+  `tools/naming/public-renames.json` in the same PR; `tests/public-renames.test.ts` stops it from
+  coming back. Only names that shipped in a release are journaled — see the journal section of
+  [tokens-update.md](tokens-update.md) for when an entry is due and how to write it.
+- `tests/fluent-next-naming.test.ts` reads the same rules as `publish.ts` (both import `tier.ts`):
+  the tier composition, links, the collector and the name grammar for new variables. Its baseline
+  sections fail on any change; after a deliberate one run `pnpm run naming:baseline` and review the
+  diff.
diff --git a/.claude/skills/fluent-next-tier/derive-registries.md b/.claude/skills/fluent-next-tier/derive-registries.md
new file mode 100644
index 000000000000..72473fe28052
--- /dev/null
+++ b/.claude/skills/fluent-next-tier/derive-registries.md
@@ -0,0 +1,68 @@
+# derive-registries.ts
+
+`tools/naming/derive-registries.ts` writes `tools/naming/registries.json`, the single source of truth
+for the fluent-next naming standard.
+
+```
+node tools/naming/derive-registries.ts          # writes registries.json   (pnpm run naming:registries)
+node tools/naming/derive-registries.ts --check  # fails if the committed file is stale
+```
+
+## Where the data comes from
+
+- **The token package** (`@devexpress/design-tokens-internal/tokens.flat.json`, the
+  `components/core/theme/fluent` tokens). From it come the colour `parts` (the last word of every
+  colour token: `bg`, `border`, `content`, `icon`…). The vocabulary is read from the package's flat
+  index, not from generated output, so the script needs no build for this part and cannot drift
+  from the package.
+- **The theme folders** in `scss/widgets/fluent-next/`: each folder becomes a component, its name in
+  kebab case (`dateBox` → `date-box`) unless `OVERRIDES.components` says otherwise.
+- **`OVERRIDES`** at the top of the script — every judgment call, reviewed as code, with the reason
+  next to each entry: folder ↔ component exceptions (`gridBase` → `grid`), `systemFolders` /
+  `systemTier`, `declarationHome`, `chassis` (who renders the grid / menu chassis), `embeds`,
+  `rootSelectors`, `migrated`, `sassOnly`, and the grammar vocabularies (`states`, `modifiers`,
+  `sizeSlots`, `subElements`, `systemConcerns`, `themeIdentity`, `partExclude` / `partsAdd` /
+  `partsRemove`).
+
+`rootSelectors` defaults to `.dx-<component without dashes>` for every migrated and system-tier
+component; an override replaces it, for example when a widget paints outside its own element (a
+dialog rendered into `body`, a toolbar menu inside a popup). Add the reason beside the entry.
+
+## The name grammar it describes
+
+```
+$<component>(-<sub-element>)*(-<modifier>)*-<slot>(-<state>)
+```
+
+Parsed right to left with longest match: the trailing state, then the slot (a colour `part` in
+`_colors.scss`, a `sizeSlot` in `_sizes.scss`), then the middle words. Overlaps between vocabularies
+that compete for different positions are fine (`text` is both a part and a modifier); two are fatal
+and the script refuses them:
+
+- a state that is also a part;
+- a sub-element of a component that is also a state.
+
+## Who reads which field
+
+| Fields | Read by |
+|---|---|
+| `components`, `declarationHome`, `systemTier`, `rootSelectors`, `exemptFolders`, `migrated`, `sassOnly` | `tools/naming/tier.ts` → `publish.ts` (the generator) |
+| `rootSelectors` | `tools/review/reachability.ts` |
+| `systemFolders` | `tests/disabled-paint.test.ts` |
+| the grammar vocabularies, `chassis`, `embeds`, `systemConcerns`, `themeIdentity` | `tests/fluent-next-naming.test.ts` |
+
+## Failures
+
+- **`registries.json is stale — run node tools/naming/derive-registries.ts`** — the committed file
+  differs from what the script builds now: `OVERRIDES` changed, a theme folder was added or removed,
+  or a token package bump changed the colour `parts`. Regenerate with `pnpm run naming:registries` (build the themes
+  first, see below) and review the JSON diff.
+- **`STATES and PARTS overlap, the grammar would be undecidable`** / **`sub-elements of X collide with
+  a state name`** — an `OVERRIDES` edit (or a new part from the package) made a word ambiguous. Pick
+  another word or remove it from `partsAdd` / add it to `partExclude`.
+- **`rootSelectors for non-migrated components: …`** — a `rootSelectors` override for a component that
+  is neither in `migrated` nor in `systemTier`.
+- **`rootSelectors[x]: "…" does not occur in the built bundle`** / **`is not a single .dx-* class or
+  :root`** — a typo in a root selector, or the themes were not rebuilt. Regenerating needs the built
+  bundle at `packages/devextreme/artifacts/css/dx.fluent-next.blue.light.css`; `--check` skips this
+  gate when the bundle is absent (it only compares bytes).
diff --git a/.claude/skills/fluent-next-tier/publish.md b/.claude/skills/fluent-next-tier/publish.md
new file mode 100644
index 000000000000..c0b0b82de4c2
--- /dev/null
+++ b/.claude/skills/fluent-next-tier/publish.md
@@ -0,0 +1,50 @@
+# publish.ts
+
+`tools/naming/publish.ts` regenerates the fluent-next component tier:
+
+- every `fluent-next/<folder>/_public.scss` — the `--dx-*` projections of the component's eligible
+  variables, in alphabetical order;
+- the collector `fluent-next/_public-tier.scss` — which root selectors (`registries.rootSelectors`)
+  carry which component's tier.
+
+```
+node tools/naming/publish.ts          # regenerates the tier files   (pnpm run naming:publish)
+node tools/naming/publish.ts --check  # exit 1 when a committed file is stale or a rule is broken
+```
+
+It needs no built bundle. The rules live in `tools/naming/tier.ts`, which
+`tests/fluent-next-naming.test.ts` reads too, so the emitter and the test can never disagree.
+
+## What is generated and what is not
+
+- `_public.scss` and `_public-tier.scss` carry `// GENERATED by tools/naming/publish.ts`. Never edit
+  them; change the SCSS variable (or `registries.json` via `OVERRIDES`) and re-run.
+- `<folder>/_public-links.scss` is hand-written and never touched by the script; the generated file
+  includes it. A relation between two names goes there as a link, the whole value being
+  `--dx-a: var(--dx-b);`, so it stays live when `--dx-b` is overridden. The naming test checks that a
+  link points at a name declared by the same component or published on `:root`, keeps the state
+  (`-hover` → `-hover`), and that an alias reaching another component's root is published as a value,
+  not a link.
+- Not every variable is eligible: `sassOnly` entries, values a custom property cannot carry (CSS-wide
+  keywords, `null`, data-uri images and what they feed), and base-layer wiring are excluded.
+
+## Renames retire public names
+
+The published name is derived from the SCSS variable, so renaming a variable retires a public
+`--dx-*` name, and the 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. Whether an entry is due (only names that
+shipped) and how to write it: the journal section of [tokens-update.md](tokens-update.md).
+
+## Failures
+
+- **`fluent-next/<folder>/_public.scss is stale` … `run pnpm naming:publish`** — a declaration file
+  changed and the tier was not regenerated, or a generated file was edited by hand. Run
+  `pnpm run naming:publish` and commit the result.
+- **`X publishes from folder/ but has no rootSelectors — add it to derive-registries.ts
+  OVERRIDES`** — only the components in `migrated` and `systemTier` publish, and the generator gives
+  each of them a root, so this means `registries.json` is stale or was edited by hand. Make the change
+  in `OVERRIDES` (add `rootSelectors` there if the default `.dx-<component>` is wrong), then
+  `pnpm run naming:registries` and `pnpm run naming:publish`.
+- The naming test reports `not published — run pnpm naming:publish` or `the variable is excluded from
+  the tier` for the same causes.
diff --git a/.claude/skills/fluent-next-tier/reachability.md b/.claude/skills/fluent-next-tier/reachability.md
new file mode 100644
index 000000000000..bdea4ee57090
--- /dev/null
+++ b/.claude/skills/fluent-next-tier/reachability.md
@@ -0,0 +1,62 @@
+# reachability.ts
+
+`tools/review/reachability.ts` checks, on the **built** fluent-next bundle, that every `--dx-*` name
+reaches the elements that read it. A custom property exists only on the element that declares it
+and its descendants; a `var()` that finds nothing makes the browser drop the whole declaration, with
+no compile error, no lint error and nothing in the console.
+
+```
+node tools/review/reachability.ts                   # the gate (last step of pnpm run naming:check)
+node tools/review/reachability.ts --report          # also list every read outside the root text
+node tools/review/reachability.ts --update-scopes   # rewrite nested-scopes.json from what it sees now
+node tools/review/reachability.ts --update-unread   # rewrite the names list in unread-tier.json
+```
+
+It reads `packages/devextreme/artifacts/css/dx.fluent-next.blue.light.css`; without that file it
+prints a note and exits 0, so rebuild the themes (`pnpm nx build:themes devextreme-scss`) before
+trusting a local green. Inputs besides the bundle: `registries.rootSelectors`, its two lists
+`tools/review/nested-scopes.json` and `tools/review/unread-tier.json`, and the runtime contracts
+`tools/naming/runtime-reads.json` (lengths JS reads back with `getComputedStyle`) and
+`tools/naming/viz-contract.json` (names the charts write into SVG).
+
+## The five checks — each one fails the run
+
+1. **`read and never declared`** — a `var(--dx-foo)` with no `--dx-foo` declared anywhere: a typo or
+   a removed name. Fix the name or publish it on the scope that reads it. Names set at runtime by
+   another layer (CardView card sizes, the scheduler animation, the accent colour) are listed in
+   `SET_ELSEWHERE` in the script; add one there only when another layer really sets it.
+2. **`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 everywhere, and inside the other
+   widget its variable is empty, so the property vanishes. In the legacy themes such duplicates were
+   harmless (equal literals); the tier splits them across roots. Real case: base/dataGrid and
+   base/treeList drew the same unscoped `.dx-command-ai-header-button .dx-button.dx-state-focused` and
+   the AI column button lost its focus ring in DataGrid. Fix: read a shared-layer name
+   (`gridBase`/`menuBase`, e.g. `$grid-outline-focused`), not one widget's.
+3. **`scope outside the roots of X`** — a rule reads `--dx-X-…` but its selector text contains no root
+   of X. Usually harmless (the element is nested in the widget and the selector is just short), but
+   if JS mounts that element outside the widget — a portal: popup, drag preview, sortable clone,
+   dialog in `body` — the variable is missing there. The text cannot tell the two apart, so this is a
+   prompt to check: open the widget in that state and confirm in the DOM that the element sits inside
+   the root. Then either add the scope to `nested-scopes.json["X"]`, or, if it is a portal, add its
+   class to `OVERRIDES.rootSelectors` in `derive-registries.ts` (the tier is then declared on it too)
+   or read a Sass twin / `:root` value in that branch. `--update-scopes` writes every current scope in
+   one go — use it only after the checks, never as a way to turn CI green.
+4. **`portal: .<scope> is another widget's overlay`** — a scope named after another widget's overlay
+   (`-popup`, `-popup-wrapper`, `-overlay`, `-overlay-wrapper`, `-overlay-content`, `-popover`,
+   `-popover-wrapper`, `-tooltip`, `-tooltip-wrapper`) is a portal by construction and cannot be
+   nested. Fires whether or not the scope is listed, and `--update-scopes` refuses to list it. This
+   is how the diagram toolbar's overflow menu was found: its scope had been listed by a bulk update and
+   the icons had lost their margins.
+5. **`declared and never read`** / **`pinned name(s) are read now`** — liveness: a name is live when an
+   ordinary declaration reads it, a `@container style(--dx-…)` query names it, it is in the runtime or
+   viz contract, or a live name reads it (computed to a fixpoint). The dead set is pinned in
+   `unread-tier.json` by exact equality. A **new** dead name is public API that moves nothing — usually
+   a rule switched from `var(--dx-x)` to `$x` or a literal, or the generator published a Sass helper.
+   Read it where it belongs (or stop publishing it before release); after release, a published knob
+   must keep working. A name that **revived** just needs `--update-unread`. The list counts only reads
+   inside the bundle: about half of it is read by demos and application CSS by design.
+
+## Known gap
+
+A name that is read by a declaration that never wins the cascade (overwritten in the same rule, or
+beaten by a more specific selector) passes. Deciding that needs the cascade, not the text.
diff --git a/.claude/skills/fluent-next-tier/tokens-update.md b/.claude/skills/fluent-next-tier/tokens-update.md
new file mode 100644
index 000000000000..1a46a886e03b
--- /dev/null
+++ b/.claude/skills/fluent-next-tier/tokens-update.md
@@ -0,0 +1,122 @@
+# tokens:update
+
+`tools/tokens/update.ts` is one command for a design-token package bump
+(`@devexpress/design-tokens-internal`) and the report that goes with it.
+
+```
+pnpm run tokens:update 262.24.0   # bump, reinstall, rebuild the token layer, check, report
+pnpm run tokens:update            # report the installed package, change nothing
+pnpm run tokens:update --report   # the same, stated explicitly
+```
+
+## What it does
+
+- Edits the dependency and its `minimumReleaseAgeExclude` entry (pnpm refuses a release younger than
+  `minimumReleaseAge`, so the bump carries its own exclusion), reinstalls and rebuilds the token layer
+  (`build/tokens/build-tokens.ts` → `scss/_design-system/`).
+- Runs `derive-registries.ts --check` read-only and prints the report. The diffing and the markdown
+  live in `tools/tokens/report.ts`, covered by `tests/tokens-report.test.ts`.
+
+The report answers the expensive question — what the new package did:
+- names the theme reads that the package no longer has (the build refuses those);
+- every generated value that moved, per file, old and new side by side. This is the list that costs
+  etalon screenshots.
+
+A failed bump puts back what it touched — `package.json`, `pnpm-workspace.yaml`, `pnpm-lock.yaml` and
+the generated token layer — so the tree is where it was, short of `node_modules`.
+
+## What it does not do
+
+- It does not rebuild the themes: the CSS bundles in `packages/devextreme/artifacts/css` still come
+  from the old package until `pnpm nx build:themes devextreme-scss` runs. That is also why the
+  registries are only checked here — their `rootSelectors` gate reads those bundles.
+- Approving the Renovate pull request and re-recording etalons stay manual on purpose: the etalons
+  are pixels, and a value change has to be looked at.
+
+## After a bump
+
+1. `pnpm nx build:themes devextreme-scss`.
+2. If the report said the registries are stale: `pnpm run naming:registries` and review
+   `registries.json` (new parts from the package can change the grammar — see
+   [derive-registries.md](derive-registries.md)).
+3. `pnpm run naming:check`, then the jest suite.
+4. Ask user to re-record the etalons the moved values touch.
+5. Read the `pnpm-lock.yaml` diff before committing: the install runs with `--no-frozen-lockfile`
+   (the only way to move a pinned dependency) and pnpm normalises the rest of the lockfile on the
+   way; anything beyond this package is housekeeping, not the bump.
+6. If adapting the theme to the new package renamed or removed a published `--dx-*` name, record it
+   in the journal — see below.
+
+## The public-name journal (`tools/naming/public-renames.json`)
+
+### Why it exists
+
+Every `--dx-*` custom property a theme publishes is API: an application sets it in its own CSS,
+without rebuilding our SCSS, to retune a widget. If the name disappears, that override silently
+stops working — no error anywhere, the widget just reverts to the theme value. So removing or
+renaming a published name is a breaking change for users, and it has to reach the release notes.
+The journal is that record: one entry per retired name, and the `note` field is the sentence that
+goes into the release notes.
+
+### How a bump leads here
+
+A new token package can drop a role or a scale step, or change what a role means. Adapting the
+theme can then rename a SCSS variable or remove it. In fluent-next the public name is derived from
+the variable (`$button-icon-size` → `--dx-button-icon-size`), so `pnpm run naming:publish`
+retires the old public name without anyone typing it — the diff looks like plain regeneration. The
+same applies to any other change that renames or drops a published name; a bump is just the most
+common reason.
+
+### Which names belong in it
+
+Only names that **shipped in a released version**. The journal tells users about something they
+could have used.
+
+- `generic`, `material`, `fluent`: their `--dx-*` names shipped long ago — every removal is
+  journaled.
+- `fluent-next` ships for the first time in 26.2. Until that release is out, its names that appear
+  and disappear inside the feature branch never reached anyone and do **not** go into the journal
+  (git history keeps them). After 26.2 every fluent-next removal is journaled.
+- To check whether a name shipped: `git grep -F -e '<name>' upstream/main -- packages/devextreme-scss`
+  (or the latest release tag). Not found there → it never shipped → no entry.
+- Not a retirement: the same name with a new value (that is an etalon and release-notes matter,
+  not a rename), and the names in `runtime-contract.json`, `runtime-reads.json`,
+  `viz-contract.json` and `accent-contract.json` — those have their own contract files and tests,
+  which fail on a rename and must be updated with it.
+
+### Writing the entry
+
+Add it in the same change that retires the name:
+
+```json
+{
+  "name": "--dx-file-manager-view-mode-button-content-padding",
+  "replacement": "--dx-file-manager-button-content-padding",
+  "release": "26.2",
+  "note": "Setting it had no effect; set --dx-file-manager-button-content-padding to pad the file actions button."
+}
+```
+
+- `name` — the retired name exactly as it shipped.
+- `replacement` — the name that takes over the role, or `null` when the role is gone.
+- `release` — the release the removal ships in: the major.minor of `version` in
+  `packages/devextreme-scss/package.json` (`26.2.0` → `"26.2"`).
+- `note` — one sentence for the release notes, from the user's side: what they set, what happens
+  now, what to set instead. Not why we changed it internally.
+
+Then rebuild the themes and run `pnpm run naming:baseline`: it rewrites the snapshot baselines,
+including `tests/public-surface.baseline.json`. Review that diff — the name must vanish only from
+the themes you meant.
+
+### What the tests hold
+
+- `tests/public-surface.test.ts` — a name that leaves any theme's published surface fails unless it
+  is in the journal ("no name leaves the published surface without a journal entry").
+- `tests/public-renames.test.ts` — every entry is complete and listed once, a retired name never
+  ships in a fluent-next bundle again, and every `replacement` does ship in the fluent-next bundles.
+  The last check reads only fluent-next: for a legacy-theme rename whose replacement does not exist
+  in fluent-next it fails — stop and ask the user rather than bending the test.
+
+Never bring a retired name back as a compatibility alias in `_public-links.scss` to make a test or
+an application happy: the tests forbid it, and keeping an old name alive is a product decision for
+a human, not a fix.
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/playwright_tests.yml b/.github/workflows/playwright_tests.yml
index fcefcf574a69..4fa7ed477c4d 100644
--- a/.github/workflows/playwright_tests.yml
+++ b/.github/workflows/playwright_tests.yml
@@ -161,6 +161,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 }
           ]
@@ -172,7 +173,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/run-testcafe-on-gh-pages.yml b/.github/workflows/run-testcafe-on-gh-pages.yml
index 30fb28b78929..bc8c809ad169 100644
--- a/.github/workflows/run-testcafe-on-gh-pages.yml
+++ b/.github/workflows/run-testcafe-on-gh-pages.yml
@@ -13,7 +13,7 @@ jobs:
             fail-fast: false
             matrix:
               CONSTEL: [react(1/4), react(2/4), react(3/4), react(4/4), vue(1/4), vue(2/4), vue(3/4), vue(4/4), angular(1/4), angular(2/4), angular(3/4), angular(4/4)]
-              THEME: ['material.blue.light', 'fluent.blue.light']
+              THEME: ['material.blue.light', 'fluent.blue.light', 'fluent-next.blue.light']
 
 
         runs-on: ubuntu-22.04
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 4ac4cf62fe8e..a4c3321ea197 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 13806ede1ce1..52d6d881300f 100644
--- a/.github/workflows/visual-tests-demos.yml
+++ b/.github/workflows/visual-tests-demos.yml
@@ -482,10 +482,15 @@ jobs:
           - { STRATEGY: screenshots,   THEME: fluent.blue.light,   CONSTEL: jquery(1/3) }
           - { STRATEGY: screenshots,   THEME: fluent.blue.light,   CONSTEL: jquery(2/3) }
           - { STRATEGY: screenshots,   THEME: fluent.blue.light,   CONSTEL: jquery(3/3) }
+          - { STRATEGY: screenshots,   THEME: fluent-next.blue.light, CONSTEL: jquery(1/3) }
+          - { STRATEGY: screenshots,   THEME: fluent-next.blue.light, CONSTEL: jquery(2/3) }
+          - { STRATEGY: screenshots,   THEME: fluent-next.blue.light, CONSTEL: jquery(3/3) }
           - { STRATEGY: accessibility, THEME: material.blue.light, CONSTEL: jquery }
           - { STRATEGY: accessibility, THEME: fluent.blue.light,   CONSTEL: jquery }
+          - { STRATEGY: accessibility, THEME: fluent-next.blue.light, CONSTEL: jquery }
           - { 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 }
     env:
       ACCESSIBILITY_TESTCAFE_REPORT_PATH: "accessibility_testcafe_report"
 
@@ -662,7 +667,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 }}
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/Overview/Angular/app/app.component.css b/apps/demos/Demos/Calendar/Overview/Angular/app/app.component.css
index d9345fc2e69c..6eb6c508feab 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: rgb(from var(--dxds-color-content-indigo, #8080ff) r g b / var(--dxds-opacity-80, 1));
 }
 
 ::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: rgb(from var(--dxds-color-content-red, #ff8080) r g b / var(--dxds-opacity-80, 1));
 }
 
 ::ng-deep .dx-calendar-week-number-cell .week-number {
diff --git a/apps/demos/Demos/Calendar/Overview/React/styles.css b/apps/demos/Demos/Calendar/Overview/React/styles.css
index 0695ed34a53b..d4079aa013f0 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: rgb(from var(--dxds-color-content-indigo, #8080ff) r g b / var(--dxds-opacity-80, 1));
 }
 
 .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: rgb(from var(--dxds-color-content-red, #ff8080) r g b / var(--dxds-opacity-80, 1));
 }
 
 .dx-calendar-week-number-cell .week-number {
diff --git a/apps/demos/Demos/Calendar/Overview/ReactJs/styles.css b/apps/demos/Demos/Calendar/Overview/ReactJs/styles.css
index 0695ed34a53b..d4079aa013f0 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: rgb(from var(--dxds-color-content-indigo, #8080ff) r g b / var(--dxds-opacity-80, 1));
 }
 
 .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: rgb(from var(--dxds-color-content-red, #ff8080) r g b / var(--dxds-opacity-80, 1));
 }
 
 .dx-calendar-week-number-cell .week-number {
diff --git a/apps/demos/Demos/Calendar/Overview/Vue/App.vue b/apps/demos/Demos/Calendar/Overview/Vue/App.vue
index 508e98b81d95..4968a7e46366 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: rgb(from var(--dxds-color-content-indigo, #8080ff) r g b / var(--dxds-opacity-80, 1));
 }
 
 .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: rgb(from var(--dxds-color-content-red, #ff8080) r g b / var(--dxds-opacity-80, 1));
 }
 
 .dx-calendar-week-number-cell .week-number {
diff --git a/apps/demos/Demos/Calendar/Overview/jQuery/styles.css b/apps/demos/Demos/Calendar/Overview/jQuery/styles.css
index 0695ed34a53b..d4079aa013f0 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: rgb(from var(--dxds-color-content-indigo, #8080ff) r g b / var(--dxds-opacity-80, 1));
 }
 
 .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: rgb(from var(--dxds-color-content-red, #ff8080) r g b / var(--dxds-opacity-80, 1));
 }
 
 .dx-calendar-week-number-cell .week-number {
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/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/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/React/CenterTemplate.tsx b/apps/demos/Demos/Charts/CenterLabelCustomization/React/CenterTemplate.tsx
index 7faf72602865..e7adc02af172 100644
--- a/apps/demos/Demos/Charts/CenterLabelCustomization/React/CenterTemplate.tsx
+++ b/apps/demos/Demos/Charts/CenterLabelCustomization/React/CenterTemplate.tsx
@@ -4,7 +4,7 @@ import type { PieChartRef } from 'devextreme-react/pie-chart';
 const formatNumber = new Intl.NumberFormat('en-US', {
   minimumFractionDigits: 0,
 }).format;
-const textStyle = { fontSize: 18, fill: '#494949' };
+const textStyle = { fontSize: 18, fill: 'var(--dxds-color-content-subtle, #494949)' };
 const totalStyle = { fontWeight: 600 };
 
 function calculateTotal(pieChart: ReturnType<PieChartRef['instance']>): string {
diff --git a/apps/demos/Demos/Charts/CenterLabelCustomization/ReactJs/CenterTemplate.js b/apps/demos/Demos/Charts/CenterLabelCustomization/ReactJs/CenterTemplate.js
index ab451b8f0c0d..60ab7188b479 100644
--- a/apps/demos/Demos/Charts/CenterLabelCustomization/ReactJs/CenterTemplate.js
+++ b/apps/demos/Demos/Charts/CenterLabelCustomization/ReactJs/CenterTemplate.js
@@ -3,7 +3,7 @@ import React from 'react';
 const formatNumber = new Intl.NumberFormat('en-US', {
   minimumFractionDigits: 0,
 }).format;
-const textStyle = { fontSize: 18, fill: '#494949' };
+const textStyle = { fontSize: 18, fill: 'var(--dxds-color-content-subtle, #494949)' };
 const totalStyle = { fontWeight: 600 };
 function calculateTotal(pieChart) {
   return formatNumber(
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/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/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.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/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/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/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/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/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/MessageStreaming/Angular/app/app.component.css b/apps/demos/Demos/Chat/MessageStreaming/Angular/app/app.component.css
index d3a89301022c..6a57976617da 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-md, 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..4ede8dd269bc 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-md, 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..4ede8dd269bc 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-md, 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 8b2bd9938fa8..ec50c75ae83f 100644
--- a/apps/demos/Demos/Chat/MessageStreaming/Vue/App.vue
+++ b/apps/demos/Demos/Chat/MessageStreaming/Vue/App.vue
@@ -262,8 +262,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;
@@ -277,20 +277,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-md, 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..08f3c02a324c 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-md, 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/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/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 4801e1217d35..fdb916b0ce60 100644
--- a/apps/demos/Demos/Common/NavigationOverview/Angular/app/app.component.css
+++ b/apps/demos/Demos/Common/NavigationOverview/Angular/app/app.component.css
@@ -58,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%;
 }
@@ -102,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 {
@@ -122,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 167326524238..f952c9bfa38d 100644
--- a/apps/demos/Demos/Common/NavigationOverview/React/styles.css
+++ b/apps/demos/Demos/Common/NavigationOverview/React/styles.css
@@ -58,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%;
 }
@@ -102,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 {
@@ -122,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 167326524238..f952c9bfa38d 100644
--- a/apps/demos/Demos/Common/NavigationOverview/ReactJs/styles.css
+++ b/apps/demos/Demos/Common/NavigationOverview/ReactJs/styles.css
@@ -58,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%;
 }
@@ -102,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 {
@@ -122,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 3c3ce397cf37..64e03c8f5a7f 100644
--- a/apps/demos/Demos/Common/NavigationOverview/Vue/App.vue
+++ b/apps/demos/Demos/Common/NavigationOverview/Vue/App.vue
@@ -158,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%;
 }
@@ -202,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 {
@@ -222,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 38f16148a1f5..72ed61087939 100644
--- a/apps/demos/Demos/Common/NavigationOverview/jQuery/styles.css
+++ b/apps/demos/Demos/Common/NavigationOverview/jQuery/styles.css
@@ -58,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%;
 }
@@ -102,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 {
@@ -122,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/PopupAndNotificationsOverview/Angular/app/app.component.css b/apps/demos/Demos/Common/PopupAndNotificationsOverview/Angular/app/app.component.css
index cbc73f88b149..5d1caa500b9b 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: rgb(from var(--dxds-color-bg-static-dark, rgb(19, 32, 51)) r g b / var(--dxds-opacity-80, 0.8));
   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 rgb(from var(--dxds-color-border-on-color-shared, rgb(255, 255, 255)) r g b / var(--dxds-opacity-40, 0.4));
   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..ceafee532e32 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: rgb(from var(--dxds-color-bg-static-dark, rgb(19, 32, 51)) r g b / var(--dxds-opacity-80, 0.8));
   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 rgb(from var(--dxds-color-border-on-color-shared, rgb(255, 255, 255)) r g b / var(--dxds-opacity-40, 0.4));
   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..ceafee532e32 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: rgb(from var(--dxds-color-bg-static-dark, rgb(19, 32, 51)) r g b / var(--dxds-opacity-80, 0.8));
   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 rgb(from var(--dxds-color-border-on-color-shared, rgb(255, 255, 255)) r g b / var(--dxds-opacity-40, 0.4));
   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..133cb632665b 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: rgb(from var(--dxds-color-bg-static-dark, rgb(19, 32, 51)) r g b / var(--dxds-opacity-80, 0.8));
   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 rgb(from var(--dxds-color-border-on-color-shared, rgb(255, 255, 255)) r g b / var(--dxds-opacity-40, 0.4));
   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..ceafee532e32 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: rgb(from var(--dxds-color-bg-static-dark, rgb(19, 32, 51)) r g b / var(--dxds-opacity-80, 0.8));
   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 rgb(from var(--dxds-color-border-on-color-shared, rgb(255, 255, 255)) r g b / var(--dxds-opacity-40, 0.4));
   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/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/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/FocusedRow/Angular/app/app.component.css b/apps/demos/Demos/DataGrid/FocusedRow/Angular/app/app.component.css
index 8771aab54e0a..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;
diff --git a/apps/demos/Demos/DataGrid/FocusedRow/React/styles.css b/apps/demos/Demos/DataGrid/FocusedRow/React/styles.css
index 8771aab54e0a..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;
diff --git a/apps/demos/Demos/DataGrid/FocusedRow/ReactJs/styles.css b/apps/demos/Demos/DataGrid/FocusedRow/ReactJs/styles.css
index 8771aab54e0a..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;
diff --git a/apps/demos/Demos/DataGrid/FocusedRow/Vue/styles.css b/apps/demos/Demos/DataGrid/FocusedRow/Vue/styles.css
index 8771aab54e0a..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;
diff --git a/apps/demos/Demos/DataGrid/FocusedRow/jQuery/styles.css b/apps/demos/Demos/DataGrid/FocusedRow/jQuery/styles.css
index 8771aab54e0a..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;
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 62d1e1e2746a..e4498a594f18 100644
--- a/apps/demos/Demos/DataGrid/RemoteCRUDOperations/Angular/app/app.component.css
+++ b/apps/demos/Demos/DataGrid/RemoteCRUDOperations/Angular/app/app.component.css
@@ -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 11463911334f..57eb6d958b17 100644
--- a/apps/demos/Demos/DataGrid/RemoteCRUDOperations/React/styles.css
+++ b/apps/demos/Demos/DataGrid/RemoteCRUDOperations/React/styles.css
@@ -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 11463911334f..57eb6d958b17 100644
--- a/apps/demos/Demos/DataGrid/RemoteCRUDOperations/ReactJs/styles.css
+++ b/apps/demos/Demos/DataGrid/RemoteCRUDOperations/ReactJs/styles.css
@@ -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 55882fa53849..9ba7546d4dc6 100644
--- a/apps/demos/Demos/DataGrid/RemoteCRUDOperations/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/RemoteCRUDOperations/Vue/App.vue
@@ -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 11463911334f..57eb6d958b17 100644
--- a/apps/demos/Demos/DataGrid/RemoteCRUDOperations/jQuery/styles.css
+++ b/apps/demos/Demos/DataGrid/RemoteCRUDOperations/jQuery/styles.css
@@ -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/Row/Angular/app/app.component.css b/apps/demos/Demos/DataGrid/Row/Angular/app/app.component.css
index 802e628386fc..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,17 +17,17 @@
 
 ::ng-deep #gridContainer tr.notes-row td {
   height: 70px;
-  color: #999;
+  color: var(--dxds-color-content-subtler, #999);
 }
 
 ::ng-deep #gridContainer tbody.dx-state-hover {
-  background-color: #ebebeb;
+  background-color: var(--dxds-color-bg-hovered, #ebebeb);
 }
 
 ::ng-deep #gridContainer tbody.dx-state-hover tr.main-row td {
-  color: #000;
+  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 ce25b4207bee..fec2d9e31dfc 100644
--- a/apps/demos/Demos/DataGrid/Row/React/styles.css
+++ b/apps/demos/Demos/DataGrid/Row/React/styles.css
@@ -17,17 +17,17 @@
 
 #gridContainer tr.notes-row td {
   height: 70px;
-  color: #999;
+  color: var(--dxds-color-content-subtler, #999);
 }
 
 #gridContainer tbody.dx-state-hover {
-  background-color: #ebebeb;
+  background-color: var(--dxds-color-bg-hovered, #ebebeb);
 }
 
 #gridContainer tbody.dx-state-hover tr.main-row td {
-  color: #000;
+  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 ce25b4207bee..fec2d9e31dfc 100644
--- a/apps/demos/Demos/DataGrid/Row/ReactJs/styles.css
+++ b/apps/demos/Demos/DataGrid/Row/ReactJs/styles.css
@@ -17,17 +17,17 @@
 
 #gridContainer tr.notes-row td {
   height: 70px;
-  color: #999;
+  color: var(--dxds-color-content-subtler, #999);
 }
 
 #gridContainer tbody.dx-state-hover {
-  background-color: #ebebeb;
+  background-color: var(--dxds-color-bg-hovered, #ebebeb);
 }
 
 #gridContainer tbody.dx-state-hover tr.main-row td {
-  color: #000;
+  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 512de7459369..5f73659dd7b8 100644
--- a/apps/demos/Demos/DataGrid/Row/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/Row/Vue/App.vue
@@ -98,18 +98,18 @@ const formatDate = new Intl.DateTimeFormat('en-US').format;
 
 #gridContainer tr.notes-row td {
   height: 70px;
-  color: #999;
+  color: var(--dxds-color-content-subtler, #999);
 }
 
 #gridContainer tbody.dx-state-hover {
-  background-color: #ebebeb;
+  background-color: var(--dxds-color-bg-hovered, #ebebeb);
 }
 
 #gridContainer tbody.dx-state-hover tr.main-row td {
-  color: #000;
+  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 ce25b4207bee..fec2d9e31dfc 100644
--- a/apps/demos/Demos/DataGrid/Row/jQuery/styles.css
+++ b/apps/demos/Demos/DataGrid/Row/jQuery/styles.css
@@ -17,17 +17,17 @@
 
 #gridContainer tr.notes-row td {
   height: 70px;
-  color: #999;
+  color: var(--dxds-color-content-subtler, #999);
 }
 
 #gridContainer tbody.dx-state-hover {
-  background-color: #ebebeb;
+  background-color: var(--dxds-color-bg-hovered, #ebebeb);
 }
 
 #gridContainer tbody.dx-state-hover tr.main-row td {
-  color: #000;
+  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 ce25b4207bee..fec2d9e31dfc 100644
--- a/apps/demos/Demos/DataGrid/Row3RdPartyEngineTemplate/jQuery/styles.css
+++ b/apps/demos/Demos/DataGrid/Row3RdPartyEngineTemplate/jQuery/styles.css
@@ -17,17 +17,17 @@
 
 #gridContainer tr.notes-row td {
   height: 70px;
-  color: #999;
+  color: var(--dxds-color-content-subtler, #999);
 }
 
 #gridContainer tbody.dx-state-hover {
-  background-color: #ebebeb;
+  background-color: var(--dxds-color-bg-hovered, #ebebeb);
 }
 
 #gridContainer tbody.dx-state-hover tr.main-row td {
-  color: #000;
+  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 1a1b09047089..a99a69420089 100644
--- a/apps/demos/Demos/DataGrid/RowEditing/Angular/app/app.component.css
+++ b/apps/demos/Demos/DataGrid/RowEditing/Angular/app/app.component.css
@@ -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 45cc2d7f3595..499569efcbcb 100644
--- a/apps/demos/Demos/DataGrid/RowEditing/React/styles.css
+++ b/apps/demos/Demos/DataGrid/RowEditing/React/styles.css
@@ -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 45cc2d7f3595..499569efcbcb 100644
--- a/apps/demos/Demos/DataGrid/RowEditing/ReactJs/styles.css
+++ b/apps/demos/Demos/DataGrid/RowEditing/ReactJs/styles.css
@@ -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 71b2e04a2398..a5d4c7ed12bc 100644
--- a/apps/demos/Demos/DataGrid/RowEditing/Vue/App.vue
+++ b/apps/demos/Demos/DataGrid/RowEditing/Vue/App.vue
@@ -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 45cc2d7f3595..499569efcbcb 100644
--- a/apps/demos/Demos/DataGrid/RowEditing/jQuery/styles.css
+++ b/apps/demos/Demos/DataGrid/RowEditing/jQuery/styles.css
@@ -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/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/Drawer/LeftOrRightPosition/Angular/app/app.component.css b/apps/demos/Demos/Drawer/LeftOrRightPosition/Angular/app/app.component.css
index 1c5805de71e5..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;
 }
diff --git a/apps/demos/Demos/Drawer/LeftOrRightPosition/React/styles.css b/apps/demos/Demos/Drawer/LeftOrRightPosition/React/styles.css
index 08116f777b0d..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;
 }
diff --git a/apps/demos/Demos/Drawer/LeftOrRightPosition/ReactJs/styles.css b/apps/demos/Demos/Drawer/LeftOrRightPosition/ReactJs/styles.css
index 08116f777b0d..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;
 }
diff --git a/apps/demos/Demos/Drawer/LeftOrRightPosition/Vue/App.vue b/apps/demos/Demos/Drawer/LeftOrRightPosition/Vue/App.vue
index 11d41df2d1b5..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;
     }
diff --git a/apps/demos/Demos/Drawer/LeftOrRightPosition/jQuery/styles.css b/apps/demos/Demos/Drawer/LeftOrRightPosition/jQuery/styles.css
index 08116f777b0d..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;
 }
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 54e7a7ad458d..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;
 }
diff --git a/apps/demos/Demos/Drawer/TopOrBottomPosition/React/styles.css b/apps/demos/Demos/Drawer/TopOrBottomPosition/React/styles.css
index dde890b3b28e..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;
 }
diff --git a/apps/demos/Demos/Drawer/TopOrBottomPosition/ReactJs/styles.css b/apps/demos/Demos/Drawer/TopOrBottomPosition/ReactJs/styles.css
index dde890b3b28e..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;
 }
diff --git a/apps/demos/Demos/Drawer/TopOrBottomPosition/Vue/App.vue b/apps/demos/Demos/Drawer/TopOrBottomPosition/Vue/App.vue
index 753faf842d87..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;
     }
diff --git a/apps/demos/Demos/Drawer/TopOrBottomPosition/jQuery/styles.css b/apps/demos/Demos/Drawer/TopOrBottomPosition/jQuery/styles.css
index dde890b3b28e..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;
 }
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/FilterBuilder/Customization/Angular/app/app.component.css b/apps/demos/Demos/FilterBuilder/Customization/Angular/app/app.component.css
index f7de1a04d2d5..4a6f68bc0311 100644
--- a/apps/demos/Demos/FilterBuilder/Customization/Angular/app/app.component.css
+++ b/apps/demos/Demos/FilterBuilder/Customization/Angular/app/app.component.css
@@ -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 d4db49c510e1..2224d6b2f9f0 100644
--- a/apps/demos/Demos/FilterBuilder/Customization/React/styles.css
+++ b/apps/demos/Demos/FilterBuilder/Customization/React/styles.css
@@ -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 d4db49c510e1..2224d6b2f9f0 100644
--- a/apps/demos/Demos/FilterBuilder/Customization/ReactJs/styles.css
+++ b/apps/demos/Demos/FilterBuilder/Customization/ReactJs/styles.css
@@ -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 c8077365c9af..66e82c6dec94 100644
--- a/apps/demos/Demos/FilterBuilder/Customization/Vue/App.vue
+++ b/apps/demos/Demos/FilterBuilder/Customization/Vue/App.vue
@@ -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 d4db49c510e1..2224d6b2f9f0 100644
--- a/apps/demos/Demos/FilterBuilder/Customization/jQuery/styles.css
+++ b/apps/demos/Demos/FilterBuilder/Customization/jQuery/styles.css
@@ -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/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/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/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/Gantt/Appearance/Angular/app/app.component.css b/apps/demos/Demos/Gantt/Appearance/Angular/app/app.component.css
index 128dd2c76ca6..26f8a1fecd1b 100644
--- a/apps/demos/Demos/Gantt/Appearance/Angular/app/app.component.css
+++ b/apps/demos/Demos/Gantt/Appearance/Angular/app/app.component.css
@@ -39,9 +39,9 @@
 }
 
 .custom-task-edit-tooltip {
-  background-color: #fff;
-  color: #000;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+  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;
 }
diff --git a/apps/demos/Demos/Gantt/Appearance/React/styles.css b/apps/demos/Demos/Gantt/Appearance/React/styles.css
index 128dd2c76ca6..26f8a1fecd1b 100644
--- a/apps/demos/Demos/Gantt/Appearance/React/styles.css
+++ b/apps/demos/Demos/Gantt/Appearance/React/styles.css
@@ -39,9 +39,9 @@
 }
 
 .custom-task-edit-tooltip {
-  background-color: #fff;
-  color: #000;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+  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;
 }
diff --git a/apps/demos/Demos/Gantt/Appearance/ReactJs/styles.css b/apps/demos/Demos/Gantt/Appearance/ReactJs/styles.css
index 128dd2c76ca6..26f8a1fecd1b 100644
--- a/apps/demos/Demos/Gantt/Appearance/ReactJs/styles.css
+++ b/apps/demos/Demos/Gantt/Appearance/ReactJs/styles.css
@@ -39,9 +39,9 @@
 }
 
 .custom-task-edit-tooltip {
-  background-color: #fff;
-  color: #000;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+  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;
 }
diff --git a/apps/demos/Demos/Gantt/Appearance/Vue/App.vue b/apps/demos/Demos/Gantt/Appearance/Vue/App.vue
index 14ba506d5213..e01815a66b76 100644
--- a/apps/demos/Demos/Gantt/Appearance/Vue/App.vue
+++ b/apps/demos/Demos/Gantt/Appearance/Vue/App.vue
@@ -211,9 +211,9 @@ function getTimeLeft(task: Task) {
   }
 
   .custom-task-edit-tooltip {
-    background-color: #fff;
-    color: #000;
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+    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;
   }
diff --git a/apps/demos/Demos/Gantt/Appearance/jQuery/styles.css b/apps/demos/Demos/Gantt/Appearance/jQuery/styles.css
index 128dd2c76ca6..26f8a1fecd1b 100644
--- a/apps/demos/Demos/Gantt/Appearance/jQuery/styles.css
+++ b/apps/demos/Demos/Gantt/Appearance/jQuery/styles.css
@@ -39,9 +39,9 @@
 }
 
 .custom-task-edit-tooltip {
-  background-color: #fff;
-  color: #000;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+  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;
 }
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..b79e19140f1d 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: rgb(from var(--dxds-color-bg-static-dark, #000) r g b / var(--dxds-opacity-30, 0.3));
 }
 
 .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..b79e19140f1d 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: rgb(from var(--dxds-color-bg-static-dark, #000) r g b / var(--dxds-opacity-30, 0.3));
 }
 
 .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..b79e19140f1d 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: rgb(from var(--dxds-color-bg-static-dark, #000) r g b / var(--dxds-opacity-30, 0.3));
 }
 
 .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..01f3b852ad91 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: rgb(from var(--dxds-color-bg-static-dark, #000) r g b / var(--dxds-opacity-30, 0.3));
 }
 
 .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..b79e19140f1d 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: rgb(from var(--dxds-color-bg-static-dark, #000) r g b / var(--dxds-opacity-30, 0.3));
 }
 
 .dx-gantt .dx-row {
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 86c54dde1608..36af7b4408dc 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.15));
+  filter: drop-shadow(0 2px 2px rgb(from var(--dxds-color-bg-static-dark, #000) r g b / var(--dxds-opacity-15, 0.15)));
 }
diff --git a/apps/demos/Demos/Gauges/GaugeTitleCustomized/React/styles.css b/apps/demos/Demos/Gauges/GaugeTitleCustomized/React/styles.css
index 89dfd0982049..daa46384b0ff 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.15));
+  filter: drop-shadow(0 2px 2px rgb(from var(--dxds-color-bg-static-dark, #000) r g b / var(--dxds-opacity-15, 0.15)));
 }
diff --git a/apps/demos/Demos/Gauges/GaugeTitleCustomized/ReactJs/styles.css b/apps/demos/Demos/Gauges/GaugeTitleCustomized/ReactJs/styles.css
index 89dfd0982049..daa46384b0ff 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.15));
+  filter: drop-shadow(0 2px 2px rgb(from var(--dxds-color-bg-static-dark, #000) r g b / var(--dxds-opacity-15, 0.15)));
 }
diff --git a/apps/demos/Demos/Gauges/GaugeTitleCustomized/Vue/App.vue b/apps/demos/Demos/Gauges/GaugeTitleCustomized/Vue/App.vue
index c6521c112e9f..1adeca2a2c75 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.15));
+  filter: drop-shadow(0 2px 2px rgb(from var(--dxds-color-bg-static-dark, #000) r g b / var(--dxds-opacity-15, 0.15)));
 }
 </style>
diff --git a/apps/demos/Demos/Gauges/GaugeTitleCustomized/jQuery/styles.css b/apps/demos/Demos/Gauges/GaugeTitleCustomized/jQuery/styles.css
index 89dfd0982049..daa46384b0ff 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.15));
+  filter: drop-shadow(0 2px 2px rgb(from var(--dxds-color-bg-static-dark, #000) r g b / var(--dxds-opacity-15, 0.15)));
 }
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/HtmlEditor/Mentions/Angular/app/app.component.css b/apps/demos/Demos/HtmlEditor/Mentions/Angular/app/app.component.css
index cccb617b6b5e..f36fca6d5cc4 100644
--- a/apps/demos/Demos/HtmlEditor/Mentions/Angular/app/app.component.css
+++ b/apps/demos/Demos/HtmlEditor/Mentions/Angular/app/app.component.css
@@ -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 bf4da71bd3db..f08f0c784639 100644
--- a/apps/demos/Demos/HtmlEditor/Mentions/React/styles.css
+++ b/apps/demos/Demos/HtmlEditor/Mentions/React/styles.css
@@ -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 bf4da71bd3db..f08f0c784639 100644
--- a/apps/demos/Demos/HtmlEditor/Mentions/ReactJs/styles.css
+++ b/apps/demos/Demos/HtmlEditor/Mentions/ReactJs/styles.css
@@ -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 c4c74d54d5e9..a162e66b30c3 100644
--- a/apps/demos/Demos/HtmlEditor/Mentions/Vue/App.vue
+++ b/apps/demos/Demos/HtmlEditor/Mentions/Vue/App.vue
@@ -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 794b024ced70..a4950d63c135 100644
--- a/apps/demos/Demos/HtmlEditor/Mentions/jQuery/styles.css
+++ b/apps/demos/Demos/HtmlEditor/Mentions/jQuery/styles.css
@@ -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/LoadPanel/Overview/Angular/app/app.component.css b/apps/demos/Demos/LoadPanel/Overview/Angular/app/app.component.css
index e022c03f839c..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 {
diff --git a/apps/demos/Demos/LoadPanel/Overview/React/styles.css b/apps/demos/Demos/LoadPanel/Overview/React/styles.css
index e022c03f839c..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 {
diff --git a/apps/demos/Demos/LoadPanel/Overview/ReactJs/styles.css b/apps/demos/Demos/LoadPanel/Overview/ReactJs/styles.css
index e022c03f839c..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 {
diff --git a/apps/demos/Demos/LoadPanel/Overview/Vue/App.vue b/apps/demos/Demos/LoadPanel/Overview/Vue/App.vue
index f529cefa4776..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 {
diff --git a/apps/demos/Demos/LoadPanel/Overview/jQuery/styles.css b/apps/demos/Demos/LoadPanel/Overview/jQuery/styles.css
index e022c03f839c..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 {
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 6046f41e19f6..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;
diff --git a/apps/demos/Demos/Lookup/EventHandling/React/styles.css b/apps/demos/Demos/Lookup/EventHandling/React/styles.css
index 20fd773cbf8b..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;
diff --git a/apps/demos/Demos/Lookup/EventHandling/ReactJs/styles.css b/apps/demos/Demos/Lookup/EventHandling/ReactJs/styles.css
index 20fd773cbf8b..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;
diff --git a/apps/demos/Demos/Lookup/EventHandling/Vue/styles.css b/apps/demos/Demos/Lookup/EventHandling/Vue/styles.css
index 20fd773cbf8b..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;
diff --git a/apps/demos/Demos/Lookup/EventHandling/jQuery/styles.css b/apps/demos/Demos/Lookup/EventHandling/jQuery/styles.css
index bde3cd75b174..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;
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 83a3529bb193..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;
 }
 
diff --git a/apps/demos/Demos/MultiView/Overview/React/styles.css b/apps/demos/Demos/MultiView/Overview/React/styles.css
index 75990f67a42b..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;
 }
 
diff --git a/apps/demos/Demos/MultiView/Overview/ReactJs/styles.css b/apps/demos/Demos/MultiView/Overview/ReactJs/styles.css
index 75990f67a42b..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;
 }
 
diff --git a/apps/demos/Demos/MultiView/Overview/Vue/App.vue b/apps/demos/Demos/MultiView/Overview/Vue/App.vue
index de1bf4d9d0a1..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;
 }
 
diff --git a/apps/demos/Demos/MultiView/Overview/jQuery/styles.css b/apps/demos/Demos/MultiView/Overview/jQuery/styles.css
index 327875ca3021..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;
 }
 
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/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/Resizable/Overview/Angular/app/app.component.css b/apps/demos/Demos/Resizable/Overview/Angular/app/app.component.css
index bd1bdd4b73fe..fee9b98b566d 100644
--- a/apps/demos/Demos/Resizable/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/Resizable/Overview/Angular/app/app.component.css
@@ -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 bd1bdd4b73fe..fee9b98b566d 100644
--- a/apps/demos/Demos/Resizable/Overview/React/styles.css
+++ b/apps/demos/Demos/Resizable/Overview/React/styles.css
@@ -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 bd1bdd4b73fe..fee9b98b566d 100644
--- a/apps/demos/Demos/Resizable/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/Resizable/Overview/ReactJs/styles.css
@@ -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 e8d6209a6453..a15cdfb77a91 100644
--- a/apps/demos/Demos/Resizable/Overview/Vue/App.vue
+++ b/apps/demos/Demos/Resizable/Overview/Vue/App.vue
@@ -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 bd1bdd4b73fe..fee9b98b566d 100644
--- a/apps/demos/Demos/Resizable/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/Resizable/Overview/jQuery/styles.css
@@ -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/ContextMenu/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/ContextMenu/Angular/app/app.component.css
index 1d762a307b6d..14ac036ffd58 100644
--- a/apps/demos/Demos/Scheduler/ContextMenu/Angular/app/app.component.css
+++ b/apps/demos/Demos/Scheduler/ContextMenu/Angular/app/app.component.css
@@ -11,5 +11,5 @@
 
 ::ng-deep .dx-scheduler-appointment-title,
 ::ng-deep .dx-scheduler-appointment-recurrence-icon {
-  color: white;
+  color: var(--dxds-color-content-on-color, white);
 }
diff --git a/apps/demos/Demos/Scheduler/ContextMenu/React/styles.css b/apps/demos/Demos/Scheduler/ContextMenu/React/styles.css
index 7fc42a3bc7b3..f8050b42b522 100644
--- a/apps/demos/Demos/Scheduler/ContextMenu/React/styles.css
+++ b/apps/demos/Demos/Scheduler/ContextMenu/React/styles.css
@@ -11,5 +11,5 @@
 
 .dx-scheduler-appointment-title,
 .dx-scheduler-appointment-recurrence-icon {
-  color: white;
+  color: var(--dxds-color-content-on-color, white);
 }
diff --git a/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/styles.css b/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/styles.css
index 7fc42a3bc7b3..f8050b42b522 100644
--- a/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/styles.css
+++ b/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/styles.css
@@ -11,5 +11,5 @@
 
 .dx-scheduler-appointment-title,
 .dx-scheduler-appointment-recurrence-icon {
-  color: white;
+  color: var(--dxds-color-content-on-color, white);
 }
diff --git a/apps/demos/Demos/Scheduler/ContextMenu/Vue/App.vue b/apps/demos/Demos/Scheduler/ContextMenu/Vue/App.vue
index 86c6bd1c7627..a7e2456d29ba 100644
--- a/apps/demos/Demos/Scheduler/ContextMenu/Vue/App.vue
+++ b/apps/demos/Demos/Scheduler/ContextMenu/Vue/App.vue
@@ -163,6 +163,6 @@ const getCellContextMenuItems = (
 <style>
 .dx-scheduler-appointment-title,
 .dx-scheduler-appointment-recurrence-icon {
-  color: white;
+  color: var(--dxds-color-content-on-color, white);
 }
 </style>
diff --git a/apps/demos/Demos/Scheduler/ContextMenu/jQuery/styles.css b/apps/demos/Demos/Scheduler/ContextMenu/jQuery/styles.css
index 7fc42a3bc7b3..f8050b42b522 100644
--- a/apps/demos/Demos/Scheduler/ContextMenu/jQuery/styles.css
+++ b/apps/demos/Demos/Scheduler/ContextMenu/jQuery/styles.css
@@ -11,5 +11,5 @@
 
 .dx-scheduler-appointment-title,
 .dx-scheduler-appointment-recurrence-icon {
-  color: white;
+  color: var(--dxds-color-content-on-color, white);
 }
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 5ad6721ed2dc..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 {
diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/React/styles.css b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/React/styles.css
index 29fd44e4d767..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 {
diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/styles.css b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/ReactJs/styles.css
index 29fd44e4d767..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 {
diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Vue/App.vue b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/Vue/App.vue
index f8076f7b8be3..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 {
diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/jQuery/styles.css b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/jQuery/styles.css
index 29fd44e4d767..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 {
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/GroupingByResources/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/GroupingByResources/Angular/app/app.component.css
index 21111c5ac7ed..fd2f416de603 100644
--- a/apps/demos/Demos/Scheduler/GroupingByResources/Angular/app/app.component.css
+++ b/apps/demos/Demos/Scheduler/GroupingByResources/Angular/app/app.component.css
@@ -4,5 +4,5 @@
 
 ::ng-deep .dx-scheduler-appointment-title,
 ::ng-deep .dx-scheduler-appointment-content-date {
-  color: white;
+  color: var(--dxds-color-content-on-color, white);
 }
diff --git a/apps/demos/Demos/Scheduler/GroupingByResources/React/styles.css b/apps/demos/Demos/Scheduler/GroupingByResources/React/styles.css
index 9dac366f580b..70335b9a9d00 100644
--- a/apps/demos/Demos/Scheduler/GroupingByResources/React/styles.css
+++ b/apps/demos/Demos/Scheduler/GroupingByResources/React/styles.css
@@ -4,5 +4,5 @@
 
 .dx-scheduler-appointment-title,
 .dx-scheduler-appointment-content-date {
-  color: white;
+  color: var(--dxds-color-content-on-color, white);
 }
diff --git a/apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/styles.css b/apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/styles.css
index 9dac366f580b..70335b9a9d00 100644
--- a/apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/styles.css
+++ b/apps/demos/Demos/Scheduler/GroupingByResources/ReactJs/styles.css
@@ -4,5 +4,5 @@
 
 .dx-scheduler-appointment-title,
 .dx-scheduler-appointment-content-date {
-  color: white;
+  color: var(--dxds-color-content-on-color, white);
 }
diff --git a/apps/demos/Demos/Scheduler/GroupingByResources/Vue/App.vue b/apps/demos/Demos/Scheduler/GroupingByResources/Vue/App.vue
index 7e97c269e0bc..76810f4fe261 100644
--- a/apps/demos/Demos/Scheduler/GroupingByResources/Vue/App.vue
+++ b/apps/demos/Demos/Scheduler/GroupingByResources/Vue/App.vue
@@ -49,6 +49,6 @@ const dataSource = data;
 
 .dx-scheduler-appointment-title,
 .dx-scheduler-appointment-content-date {
-  color: white;
+  color: var(--dxds-color-content-on-color, white);
 }
 </style>
diff --git a/apps/demos/Demos/Scheduler/GroupingByResources/jQuery/styles.css b/apps/demos/Demos/Scheduler/GroupingByResources/jQuery/styles.css
index 9dac366f580b..70335b9a9d00 100644
--- a/apps/demos/Demos/Scheduler/GroupingByResources/jQuery/styles.css
+++ b/apps/demos/Demos/Scheduler/GroupingByResources/jQuery/styles.css
@@ -4,5 +4,5 @@
 
 .dx-scheduler-appointment-title,
 .dx-scheduler-appointment-content-date {
-  color: white;
+  color: var(--dxds-color-content-on-color, white);
 }
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 db2aed812332..9415b351b10f 100644
--- a/apps/demos/Demos/Scheduler/HiddenDays/Angular/app/app.component.css
+++ b/apps/demos/Demos/Scheduler/HiddenDays/Angular/app/app.component.css
@@ -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,11 +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: #c50f1f;
+  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 faf6c3448a39..5b2703977b4d 100644
--- a/apps/demos/Demos/Scheduler/HiddenDays/React/styles.css
+++ b/apps/demos/Demos/Scheduler/HiddenDays/React/styles.css
@@ -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,11 +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: #c50f1f;
+  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 faf6c3448a39..5b2703977b4d 100644
--- a/apps/demos/Demos/Scheduler/HiddenDays/ReactJs/styles.css
+++ b/apps/demos/Demos/Scheduler/HiddenDays/ReactJs/styles.css
@@ -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,11 +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: #c50f1f;
+  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 faf6c3448a39..5b2703977b4d 100644
--- a/apps/demos/Demos/Scheduler/HiddenDays/Vue/styles.css
+++ b/apps/demos/Demos/Scheduler/HiddenDays/Vue/styles.css
@@ -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,11 +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: #c50f1f;
+  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 faf6c3448a39..5b2703977b4d 100644
--- a/apps/demos/Demos/Scheduler/HiddenDays/jQuery/styles.css
+++ b/apps/demos/Demos/Scheduler/HiddenDays/jQuery/styles.css
@@ -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,11 +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: #c50f1f;
+  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/IndividualViewsCustomization/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/Angular/app/app.component.css
index f19377160785..23f21486fc3c 100644
--- a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/Angular/app/app.component.css
+++ b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/Angular/app/app.component.css
@@ -16,5 +16,5 @@
 
 ::ng-deep .dx-scheduler-appointment-title,
 ::ng-deep .dx-scheduler-appointment-content-date {
-  color: #242424;
+  color: var(--dxds-color-content-static-light, #242424);
 }
diff --git a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/React/styles.css b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/React/styles.css
index dc05da1534a0..7bdadac32a58 100644
--- a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/React/styles.css
+++ b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/React/styles.css
@@ -16,5 +16,5 @@
 
 .dx-scheduler-appointment-title,
 .dx-scheduler-appointment-content-date {
-  color: #242424;
+  color: var(--dxds-color-content-static-light, #242424);
 }
diff --git a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/styles.css b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/styles.css
index dc05da1534a0..7bdadac32a58 100644
--- a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/styles.css
+++ b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/styles.css
@@ -16,5 +16,5 @@
 
 .dx-scheduler-appointment-title,
 .dx-scheduler-appointment-content-date {
-  color: #242424;
+  color: var(--dxds-color-content-static-light, #242424);
 }
diff --git a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/Vue/App.vue b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/Vue/App.vue
index c56c87ab7d02..bff2b2a1a2e0 100644
--- a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/Vue/App.vue
+++ b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/Vue/App.vue
@@ -105,6 +105,6 @@ const currentDate = new Date(2021, 3, 27);
 
   .dx-scheduler-appointment-title,
   .dx-scheduler-appointment-content-date {
-    color: #242424;
+    color: var(--dxds-color-content-static-light, #242424);
   }
 </style>
diff --git a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/jQuery/styles.css b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/jQuery/styles.css
index dc05da1534a0..7bdadac32a58 100644
--- a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/jQuery/styles.css
+++ b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/jQuery/styles.css
@@ -16,5 +16,5 @@
 
 .dx-scheduler-appointment-title,
 .dx-scheduler-appointment-content-date {
-  color: #242424;
+  color: var(--dxds-color-content-static-light, #242424);
 }
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 e40bf55f6012..c0a65ae80aca 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);
-  --person-color-1: rgba(50, 134, 56, 1);
-  --person-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,11 +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);
-  --person-color-1: rgba(159, 213, 161, 1);
-  --person-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,
@@ -70,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 {
@@ -126,7 +126,7 @@
 }
 
 ::ng-deep .dx-color-scheme-contrast .info {
-  color: #fff;
+  color: var(--dxds-color-content-on-color, #fff);
 }
 
 ::ng-deep .day-cell {
@@ -137,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: rgb(from var(--person-color-1, #377e3a) r g b / 0.1);
+  background-color: rgb(from var(--person-color-1, #377e3a) r g b / var(--dxds-opacity-10, 0.1));
 }
 
 ::ng-deep .employee-2 {
-  background-color: rgb(from var(--person-color-2, #c25100) r g b / 0.1);
+  background-color: rgb(from var(--person-color-2, #c25100) r g b / var(--dxds-opacity-10, 0.1));
 }
 
 ::ng-deep .employee-weekend-1 {
-  background-color: rgb(from var(--person-color-1, #377e3a) r g b / 0.15);
+  background-color: rgb(from var(--person-color-1, #377e3a) r g b / var(--dxds-opacity-15, 0.15));
 }
 
 ::ng-deep .employee-weekend-2 {
-  background-color: rgb(from var(--person-color-2, #c25100) r g b / 0.15);
+  background-color: rgb(from var(--person-color-2, #c25100) r g b / var(--dxds-opacity-15, 0.15));
 }
 
 ::ng-deep .training-background-0 {
diff --git a/apps/demos/Demos/Scheduler/Overview/React/styles.css b/apps/demos/Demos/Scheduler/Overview/React/styles.css
index d6f20f4f751f..6c3853ad21b5 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);
-  --person-color-1: rgba(50, 134, 56, 1);
-  --person-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,11 +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);
-  --person-color-1: rgba(159, 213, 161, 1);
-  --person-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,
@@ -76,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 {
@@ -126,7 +126,7 @@
 }
 
 .dx-color-scheme-contrast .info {
-  color: #fff;
+  color: var(--dxds-color-content-on-color, #fff);
 }
 
 .day-cell {
@@ -137,19 +137,19 @@
 }
 
 .employee-1 {
-  background-color: rgb(from var(--person-color-1, #377e3a) r g b / 0.1);
+  background-color: rgb(from var(--person-color-1, #377e3a) r g b / var(--dxds-opacity-10, 0.1));
 }
 
 .employee-2 {
-  background-color: rgb(from var(--person-color-2, #c25100) r g b / 0.1);
+  background-color: rgb(from var(--person-color-2, #c25100) r g b / var(--dxds-opacity-10, 0.1));
 }
 
 .employee-weekend-1 {
-  background-color: rgb(from var(--person-color-1, #377e3a) r g b / 0.15);
+  background-color: rgb(from var(--person-color-1, #377e3a) r g b / var(--dxds-opacity-15, 0.15));
 }
 
 .employee-weekend-2 {
-  background-color: rgb(from var(--person-color-2, #c25100) r g b / 0.15);
+  background-color: rgb(from var(--person-color-2, #c25100) r g b / var(--dxds-opacity-15, 0.15));
 }
 
 .training-background-0 {
diff --git a/apps/demos/Demos/Scheduler/Overview/ReactJs/styles.css b/apps/demos/Demos/Scheduler/Overview/ReactJs/styles.css
index d6f20f4f751f..6c3853ad21b5 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);
-  --person-color-1: rgba(50, 134, 56, 1);
-  --person-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,11 +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);
-  --person-color-1: rgba(159, 213, 161, 1);
-  --person-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,
@@ -76,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 {
@@ -126,7 +126,7 @@
 }
 
 .dx-color-scheme-contrast .info {
-  color: #fff;
+  color: var(--dxds-color-content-on-color, #fff);
 }
 
 .day-cell {
@@ -137,19 +137,19 @@
 }
 
 .employee-1 {
-  background-color: rgb(from var(--person-color-1, #377e3a) r g b / 0.1);
+  background-color: rgb(from var(--person-color-1, #377e3a) r g b / var(--dxds-opacity-10, 0.1));
 }
 
 .employee-2 {
-  background-color: rgb(from var(--person-color-2, #c25100) r g b / 0.1);
+  background-color: rgb(from var(--person-color-2, #c25100) r g b / var(--dxds-opacity-10, 0.1));
 }
 
 .employee-weekend-1 {
-  background-color: rgb(from var(--person-color-1, #377e3a) r g b / 0.15);
+  background-color: rgb(from var(--person-color-1, #377e3a) r g b / var(--dxds-opacity-15, 0.15));
 }
 
 .employee-weekend-2 {
-  background-color: rgb(from var(--person-color-2, #c25100) r g b / 0.15);
+  background-color: rgb(from var(--person-color-2, #c25100) r g b / var(--dxds-opacity-15, 0.15));
 }
 
 .training-background-0 {
diff --git a/apps/demos/Demos/Scheduler/Overview/Vue/App.vue b/apps/demos/Demos/Scheduler/Overview/Vue/App.vue
index 7fc235b499b4..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);
-  --person-color-1: rgba(50, 134, 56, 1);
-  --person-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,11 +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);
-  --person-color-1: rgba(159, 213, 161, 1);
-  --person-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,
@@ -120,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 b296a5eacea5..27e1f77613ed 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: rgb(from var(--person-color-1, #377e3a) r g b / 0.1);
+  background-color: rgb(from var(--person-color-1, #377e3a) r g b / var(--dxds-opacity-10, 0.1));
 }
 
 .employee-2 {
-  background-color: rgb(from var(--person-color-2, #c25100) r g b / 0.1);
+  background-color: rgb(from var(--person-color-2, #c25100) r g b / var(--dxds-opacity-10, 0.1));
 }
 
 .employee-weekend-1 {
-  background-color: rgb(from var(--person-color-1, #377e3a) r g b / 0.15);
+  background-color: rgb(from var(--person-color-1, #377e3a) r g b / var(--dxds-opacity-15, 0.15));
 }
 
 .employee-weekend-2 {
-  background-color: rgb(from var(--person-color-2, #c25100) r g b / 0.15);
+  background-color: rgb(from var(--person-color-2, #c25100) r g b / var(--dxds-opacity-15, 0.15));
 }
 
 .training-background-0 {
diff --git a/apps/demos/Demos/Scheduler/Overview/Vue/ResourceCell.vue b/apps/demos/Demos/Scheduler/Overview/Vue/ResourceCell.vue
index 1f1c23e5c693..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 {
@@ -89,6 +89,6 @@ withDefaults(defineProps<{
 }
 
 .dx-color-scheme-contrast .info {
-  color: #fff;
+  color: var(--dxds-color-content-on-color, #fff);
 }
 </style>
diff --git a/apps/demos/Demos/Scheduler/Overview/jQuery/styles.css b/apps/demos/Demos/Scheduler/Overview/jQuery/styles.css
index d6f20f4f751f..6c3853ad21b5 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);
-  --person-color-1: rgba(50, 134, 56, 1);
-  --person-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,11 +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);
-  --person-color-1: rgba(159, 213, 161, 1);
-  --person-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,
@@ -76,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 {
@@ -126,7 +126,7 @@
 }
 
 .dx-color-scheme-contrast .info {
-  color: #fff;
+  color: var(--dxds-color-content-on-color, #fff);
 }
 
 .day-cell {
@@ -137,19 +137,19 @@
 }
 
 .employee-1 {
-  background-color: rgb(from var(--person-color-1, #377e3a) r g b / 0.1);
+  background-color: rgb(from var(--person-color-1, #377e3a) r g b / var(--dxds-opacity-10, 0.1));
 }
 
 .employee-2 {
-  background-color: rgb(from var(--person-color-2, #c25100) r g b / 0.1);
+  background-color: rgb(from var(--person-color-2, #c25100) r g b / var(--dxds-opacity-10, 0.1));
 }
 
 .employee-weekend-1 {
-  background-color: rgb(from var(--person-color-1, #377e3a) r g b / 0.15);
+  background-color: rgb(from var(--person-color-1, #377e3a) r g b / var(--dxds-opacity-15, 0.15));
 }
 
 .employee-weekend-2 {
-  background-color: rgb(from var(--person-color-2, #c25100) r g b / 0.15);
+  background-color: rgb(from var(--person-color-2, #c25100) r g b / var(--dxds-opacity-15, 0.15));
 }
 
 .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 aac1415cc4a9..b68bcc088f39 100644
--- a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Angular/app/app.component.css
+++ b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Angular/app/app.component.css
@@ -1,6 +1,6 @@
 ::ng-deep .dx-scheduler-appointment-title,
 ::ng-deep .dx-scheduler-appointment-content-date {
-  color: #242424;
+  color: var(--dxds-color-content-static-light, #242424);
 }
 
 .options {
@@ -21,8 +21,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 efe6181d9eef..7e5d37ada819 100644
--- a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/React/styles.css
+++ b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/React/styles.css
@@ -1,6 +1,6 @@
 .dx-scheduler-appointment-title,
 .dx-scheduler-appointment-content-date {
-  color: #242424;
+  color: var(--dxds-color-content-static-light, #242424);
 }
 
 .options {
@@ -21,8 +21,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 efe6181d9eef..7e5d37ada819 100644
--- a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/ReactJs/styles.css
+++ b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/ReactJs/styles.css
@@ -1,6 +1,6 @@
 .dx-scheduler-appointment-title,
 .dx-scheduler-appointment-content-date {
-  color: #242424;
+  color: var(--dxds-color-content-static-light, #242424);
 }
 
 .options {
@@ -21,8 +21,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 e419ed6d2bda..457aaade0fb5 100644
--- a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Vue/App.vue
+++ b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Vue/App.vue
@@ -272,7 +272,7 @@ const onOverlappingRuleChanged = (e: DxSelectBoxTypes.ValueChangedEvent) => {
 <style>
 .dx-scheduler-appointment-title,
 .dx-scheduler-appointment-content-date {
-  color: #242424;
+  color: var(--dxds-color-content-static-light, #242424);
 }
 
 .options {
@@ -293,8 +293,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 efe6181d9eef..c7e91c6ad4ac 100644
--- a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/jQuery/styles.css
+++ b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/jQuery/styles.css
@@ -1,6 +1,6 @@
 .dx-scheduler-appointment-title,
 .dx-scheduler-appointment-content-date {
-  color: #242424;
+  color: var(--dxds-color-content-static-light, #242424);
 }
 
 .options {
@@ -21,8 +21,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;
@@ -48,3 +48,4 @@
 .dx-dialog:has(#conflict-dialog) .dx-button {
   width: 100%;
 }
+
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 d90b5b014422..30fff6382bed 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 @@
 ::ng-deep .dx-scheduler-appointment-title,
 ::ng-deep .dx-scheduler-appointment-content-date {
-  color: white;
+  color: var(--dxds-color-content-on-color, white);
 }
 
 .options {
diff --git a/apps/demos/Demos/Scheduler/Resources/React/styles.css b/apps/demos/Demos/Scheduler/Resources/React/styles.css
index 6e169a9168ee..5083fc77ee98 100644
--- a/apps/demos/Demos/Scheduler/Resources/React/styles.css
+++ b/apps/demos/Demos/Scheduler/Resources/React/styles.css
@@ -1,6 +1,6 @@
 .dx-scheduler-appointment-title,
 .dx-scheduler-appointment-content-date {
-  color: white;
+  color: var(--dxds-color-content-on-color, white);
 }
 
 .options {
diff --git a/apps/demos/Demos/Scheduler/Resources/ReactJs/styles.css b/apps/demos/Demos/Scheduler/Resources/ReactJs/styles.css
index 6e169a9168ee..5083fc77ee98 100644
--- a/apps/demos/Demos/Scheduler/Resources/ReactJs/styles.css
+++ b/apps/demos/Demos/Scheduler/Resources/ReactJs/styles.css
@@ -1,6 +1,6 @@
 .dx-scheduler-appointment-title,
 .dx-scheduler-appointment-content-date {
-  color: white;
+  color: var(--dxds-color-content-on-color, white);
 }
 
 .options {
diff --git a/apps/demos/Demos/Scheduler/Resources/Vue/App.vue b/apps/demos/Demos/Scheduler/Resources/Vue/App.vue
index 8f228600d1b5..8e4499ef00fa 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>
   .dx-scheduler-appointment-title,
   .dx-scheduler-appointment-content-date {
-    color: white;
+    color: var(--dxds-color-content-on-color, white);
   }
 
   .options {
diff --git a/apps/demos/Demos/Scheduler/Resources/jQuery/styles.css b/apps/demos/Demos/Scheduler/Resources/jQuery/styles.css
index 6e169a9168ee..5083fc77ee98 100644
--- a/apps/demos/Demos/Scheduler/Resources/jQuery/styles.css
+++ b/apps/demos/Demos/Scheduler/Resources/jQuery/styles.css
@@ -1,6 +1,6 @@
 .dx-scheduler-appointment-title,
 .dx-scheduler-appointment-content-date {
-  color: white;
+  color: var(--dxds-color-content-on-color, white);
 }
 
 .options {
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..107f6987b2e5 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-static-light, #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..7a109fb42e5d 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-static-light, #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..7a109fb42e5d 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-static-light, #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..7a109fb42e5d 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-static-light, #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..1823f3dd2a8f 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-static-light, #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 7b7d8ac280de..47e6c8fb8465 100644
--- a/apps/demos/Demos/Scheduler/Timelines/Angular/app/app.component.css
+++ b/apps/demos/Demos/Scheduler/Timelines/Angular/app/app.component.css
@@ -6,7 +6,7 @@
 
 ::ng-deep .dx-scheduler-appointment-title,
 ::ng-deep .dx-scheduler-appointment-content-date {
-  color: white;
+  color: var(--dxds-color-content-on-color, white);
 }
 
 .options {
@@ -25,4 +25,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 bb9cc2214de7..3f2d4656a684 100644
--- a/apps/demos/Demos/Scheduler/Timelines/React/styles.css
+++ b/apps/demos/Demos/Scheduler/Timelines/React/styles.css
@@ -6,7 +6,7 @@
 
 .dx-scheduler-appointment-title,
 .dx-scheduler-appointment-content-date {
-  color: white;
+  color: var(--dxds-color-content-on-color, white);
 }
 
 .options {
diff --git a/apps/demos/Demos/Scheduler/Timelines/ReactJs/styles.css b/apps/demos/Demos/Scheduler/Timelines/ReactJs/styles.css
index bb9cc2214de7..3f2d4656a684 100644
--- a/apps/demos/Demos/Scheduler/Timelines/ReactJs/styles.css
+++ b/apps/demos/Demos/Scheduler/Timelines/ReactJs/styles.css
@@ -6,7 +6,7 @@
 
 .dx-scheduler-appointment-title,
 .dx-scheduler-appointment-content-date {
-  color: white;
+  color: var(--dxds-color-content-on-color, white);
 }
 
 .options {
diff --git a/apps/demos/Demos/Scheduler/Timelines/Vue/App.vue b/apps/demos/Demos/Scheduler/Timelines/Vue/App.vue
index d97913c794ea..f87d20297542 100644
--- a/apps/demos/Demos/Scheduler/Timelines/Vue/App.vue
+++ b/apps/demos/Demos/Scheduler/Timelines/Vue/App.vue
@@ -74,7 +74,7 @@ function onSnapToCellsModeChanged(e: DxSelectBoxTypes.ValueChangedEvent) {
 
 .dx-scheduler-appointment-title,
 .dx-scheduler-appointment-content-date {
-  color: white;
+  color: var(--dxds-color-content-on-color, white);
 }
 
 .options {
diff --git a/apps/demos/Demos/Scheduler/Timelines/jQuery/styles.css b/apps/demos/Demos/Scheduler/Timelines/jQuery/styles.css
index bb9cc2214de7..3f2d4656a684 100644
--- a/apps/demos/Demos/Scheduler/Timelines/jQuery/styles.css
+++ b/apps/demos/Demos/Scheduler/Timelines/jQuery/styles.css
@@ -6,7 +6,7 @@
 
 .dx-scheduler-appointment-title,
 .dx-scheduler-appointment-content-date {
-  color: white;
+  color: var(--dxds-color-content-on-color, white);
 }
 
 .options {
diff --git a/apps/demos/Demos/Scheduler/VirtualScrolling/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/VirtualScrolling/Angular/app/app.component.css
index 39de335ad50a..190355c40016 100644
--- a/apps/demos/Demos/Scheduler/VirtualScrolling/Angular/app/app.component.css
+++ b/apps/demos/Demos/Scheduler/VirtualScrolling/Angular/app/app.component.css
@@ -11,5 +11,5 @@
 
 ::ng-deep .dx-scheduler-appointment-title,
 ::ng-deep .dx-scheduler-appointment-content-date {
-  color: #242424;
+  color: var(--dxds-color-content-static-light, #242424);
 }
diff --git a/apps/demos/Demos/Scheduler/VirtualScrolling/React/styles.css b/apps/demos/Demos/Scheduler/VirtualScrolling/React/styles.css
index 64a6f1711742..e61f20cdd3f0 100644
--- a/apps/demos/Demos/Scheduler/VirtualScrolling/React/styles.css
+++ b/apps/demos/Demos/Scheduler/VirtualScrolling/React/styles.css
@@ -8,5 +8,5 @@
 
 #scheduler .dx-scheduler-appointment-title,
 #scheduler .dx-scheduler-appointment-content-date {
-  color: #242424;
+  color: var(--dxds-color-content-static-light, #242424);
 }
diff --git a/apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/styles.css b/apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/styles.css
index 64a6f1711742..e61f20cdd3f0 100644
--- a/apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/styles.css
+++ b/apps/demos/Demos/Scheduler/VirtualScrolling/ReactJs/styles.css
@@ -8,5 +8,5 @@
 
 #scheduler .dx-scheduler-appointment-title,
 #scheduler .dx-scheduler-appointment-content-date {
-  color: #242424;
+  color: var(--dxds-color-content-static-light, #242424);
 }
diff --git a/apps/demos/Demos/Scheduler/VirtualScrolling/Vue/styles.css b/apps/demos/Demos/Scheduler/VirtualScrolling/Vue/styles.css
index 64a6f1711742..e61f20cdd3f0 100644
--- a/apps/demos/Demos/Scheduler/VirtualScrolling/Vue/styles.css
+++ b/apps/demos/Demos/Scheduler/VirtualScrolling/Vue/styles.css
@@ -8,5 +8,5 @@
 
 #scheduler .dx-scheduler-appointment-title,
 #scheduler .dx-scheduler-appointment-content-date {
-  color: #242424;
+  color: var(--dxds-color-content-static-light, #242424);
 }
diff --git a/apps/demos/Demos/Scheduler/VirtualScrolling/jQuery/styles.css b/apps/demos/Demos/Scheduler/VirtualScrolling/jQuery/styles.css
index 64a6f1711742..e61f20cdd3f0 100644
--- a/apps/demos/Demos/Scheduler/VirtualScrolling/jQuery/styles.css
+++ b/apps/demos/Demos/Scheduler/VirtualScrolling/jQuery/styles.css
@@ -8,5 +8,5 @@
 
 #scheduler .dx-scheduler-appointment-title,
 #scheduler .dx-scheduler-appointment-content-date {
-  color: #242424;
+  color: var(--dxds-color-content-static-light, #242424);
 }
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/Sortable/Kanban/Angular/app/app.component.css b/apps/demos/Demos/Sortable/Kanban/Angular/app/app.component.css
index 2cbd74a9d134..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;
@@ -55,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 7c82ae4497f2..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;
@@ -55,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 7c82ae4497f2..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;
@@ -55,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 f46dca567260..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;
@@ -136,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 7c82ae4497f2..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;
@@ -55,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/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/TabPanel/Overview/Angular/app/app.component.css b/apps/demos/Demos/TabPanel/Overview/Angular/app/app.component.css
index 1f828fcec85f..ce7a94c7440f 100644
--- a/apps/demos/Demos/TabPanel/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/TabPanel/Overview/Angular/app/app.component.css
@@ -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 380a42ee1dea..3ee47ad418b0 100644
--- a/apps/demos/Demos/TabPanel/Overview/React/styles.css
+++ b/apps/demos/Demos/TabPanel/Overview/React/styles.css
@@ -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 380a42ee1dea..3ee47ad418b0 100644
--- a/apps/demos/Demos/TabPanel/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/TabPanel/Overview/ReactJs/styles.css
@@ -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/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 380a42ee1dea..3ee47ad418b0 100644
--- a/apps/demos/Demos/TabPanel/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/TabPanel/Overview/jQuery/styles.css
@@ -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/Tabs/Overview/Angular/app/app.component.css b/apps/demos/Demos/Tabs/Overview/Angular/app/app.component.css
index 2c6aaef66367..22af4c2c088a 100644
--- a/apps/demos/Demos/Tabs/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/Tabs/Overview/Angular/app/app.component.css
@@ -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 59ab26313017..f280bb196d5e 100644
--- a/apps/demos/Demos/Tabs/Overview/React/styles.css
+++ b/apps/demos/Demos/Tabs/Overview/React/styles.css
@@ -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 59ab26313017..f280bb196d5e 100644
--- a/apps/demos/Demos/Tabs/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/Tabs/Overview/ReactJs/styles.css
@@ -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 fabbd5799d85..b23d25b72bb1 100644
--- a/apps/demos/Demos/Tabs/Overview/Vue/App.vue
+++ b/apps/demos/Demos/Tabs/Overview/Vue/App.vue
@@ -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 59ab26313017..f280bb196d5e 100644
--- a/apps/demos/Demos/Tabs/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/Tabs/Overview/jQuery/styles.css
@@ -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/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/Toolbar/Adaptability/Angular/app/app.component.css b/apps/demos/Demos/Toolbar/Adaptability/Angular/app/app.component.css
index 10b541147446..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;
 }
@@ -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 c2f0e5fd598c..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;
 }
@@ -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 c2f0e5fd598c..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;
 }
@@ -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 5ba11341a603..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;
 }
@@ -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 c2f0e5fd598c..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;
 }
@@ -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/AIColumns/Angular/app/status/status.component.css b/apps/demos/Demos/TreeList/AIColumns/Angular/app/status/status.component.css
index 0679031a6849..d8c8eed0d38d 100644
--- a/apps/demos/Demos/TreeList/AIColumns/Angular/app/status/status.component.css
+++ b/apps/demos/Demos/TreeList/AIColumns/Angular/app/status/status.component.css
@@ -4,15 +4,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));
 }
 
 .status__indicator {
diff --git a/apps/demos/Demos/TreeList/AIColumns/React/styles.css b/apps/demos/Demos/TreeList/AIColumns/React/styles.css
index 543af359354a..9637df75ecc8 100644
--- a/apps/demos/Demos/TreeList/AIColumns/React/styles.css
+++ b/apps/demos/Demos/TreeList/AIColumns/React/styles.css
@@ -50,15 +50,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/TreeList/AIColumns/ReactJs/styles.css b/apps/demos/Demos/TreeList/AIColumns/ReactJs/styles.css
index 543af359354a..9637df75ecc8 100644
--- a/apps/demos/Demos/TreeList/AIColumns/ReactJs/styles.css
+++ b/apps/demos/Demos/TreeList/AIColumns/ReactJs/styles.css
@@ -50,15 +50,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/TreeList/AIColumns/Vue/Status.vue b/apps/demos/Demos/TreeList/AIColumns/Vue/Status.vue
index 7ad94171947c..8fac7c585c28 100644
--- a/apps/demos/Demos/TreeList/AIColumns/Vue/Status.vue
+++ b/apps/demos/Demos/TreeList/AIColumns/Vue/Status.vue
@@ -18,15 +18,15 @@ defineProps<{
 }
 
 .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));
 }
 
 .status__indicator {
diff --git a/apps/demos/Demos/TreeList/AIColumns/jQuery/styles.css b/apps/demos/Demos/TreeList/AIColumns/jQuery/styles.css
index 2a71f2993d3f..f65118f82595 100644
--- a/apps/demos/Demos/TreeList/AIColumns/jQuery/styles.css
+++ b/apps/demos/Demos/TreeList/AIColumns/jQuery/styles.css
@@ -50,15 +50,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/TreeList/FocusedRow/Angular/app/app.component.css b/apps/demos/Demos/TreeList/FocusedRow/Angular/app/app.component.css
index eaf21f80ed7e..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;
diff --git a/apps/demos/Demos/TreeList/FocusedRow/React/styles.css b/apps/demos/Demos/TreeList/FocusedRow/React/styles.css
index eaf21f80ed7e..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;
diff --git a/apps/demos/Demos/TreeList/FocusedRow/ReactJs/styles.css b/apps/demos/Demos/TreeList/FocusedRow/ReactJs/styles.css
index eaf21f80ed7e..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;
diff --git a/apps/demos/Demos/TreeList/FocusedRow/Vue/styles.css b/apps/demos/Demos/TreeList/FocusedRow/Vue/styles.css
index eaf21f80ed7e..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;
diff --git a/apps/demos/Demos/TreeList/FocusedRow/jQuery/styles.css b/apps/demos/Demos/TreeList/FocusedRow/jQuery/styles.css
index eaf21f80ed7e..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;
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/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/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/testing/common.test.ts b/apps/demos/testing/common.test.ts
index c09fc520401a..9344bc853794 100644
--- a/apps/demos/testing/common.test.ts
+++ b/apps/demos/testing/common.test.ts
@@ -224,6 +224,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
@@ -248,9 +254,14 @@ Object.values(FRAMEWORKS).forEach((approach) => {
 
         if (process.env.STRATEGY === 'accessibility') {
           const ignoredRules = getIgnoredRules(testName);
-          const options = { rules: {} };
+          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: {} };
 
           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..56fd5fbe6cd2
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..fc11f8d6bfa0
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..6f380bd59b16
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..d3a9d83c45da
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..b4415c489b8e
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..c010aee6e05b
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..7f194474c9de
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..b439c4f47cd5
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..04018938b4f1
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..fd61b94dc22e
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..f2b903016144
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..dfef0f5e33bd
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..833ea6448d0d
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..bd4754ec5c00
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..72ae91602fd9
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..2b150c0832f8
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..1ee7fd52ddcd
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..74cea4d49387
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..b9c74afd132e
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..08cb4d4c8b74
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..042694d8e814
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..f2e2f7d7de46
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..7afdce42354a
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..1b7d5ecadc6b
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..8a39d3cbd4a0
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..9817acc00fa7
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..bca0618c7a3a
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..dae1632b98ca
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..09c648774bad
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..b8614b5953f0
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..02a1fa5f9558
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..92d8d0dd88c1
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..8bc224ab3a37
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..e8fac900f403
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..e16f8c70698d
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..b17123a7f783
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..37582b4c0bf3
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..2cf558cbac7d
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..b17123a7f783
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..fe3084121f8c
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..c96936f4d05a
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..11e02e524bf7
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..bb2acf689533
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..b2b41d63190b
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..a2487e299a6d
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..0999d9d1e97b
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..6d7c986c224c
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..d5d30797bff6
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..751daf541a0d
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..acba1146bc67
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..9c1bb327f76d
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..bd195cbce791
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..78d337363eae
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..78d337363eae
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..462e021bd7b0
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..4e58e7ad29a5
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..41166d9a35a6
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..a4a03d082d3b
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..8f89c36d11da
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..918a6a29cb32
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..190eaa7be7ef
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..705fe892c435
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..4ae306d67b3f
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..6b1c2a1f1057
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..5e05b1eeff3b
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..9d4663a35808
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..6805a9d9fce9
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..0ee0b149442c
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..fa391f9d0491
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..eb9c89a1c5ff
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..028a15ba8ba7
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..639b62ba3e3d
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..9de790ce71f0
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..de591be455c7
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..a2385e645c2d
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..542fd25779c6
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..9c71fa018563
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..4a4a09aa210d
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..74eaa4e5adf7
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..652d7a6190c9
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..e1bc15ffb9f2
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..30e53b0f657a
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..042a9d03881a
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..b8cd7ed5516c
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..5f329940fe05
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..cbcd121562e6
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..91f560a13ca7
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..eabb7aa7af94
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..0de6e79282af
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..10704465c3b1
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..77691e0e3449
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..a599e859b637
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..2337a0211004
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..6d37d86a5c04
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..5318274ac3cc
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..925d24049b75
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..75b6d8edcbdf
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..d41cedfc67f9
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..657c4fa4f12b
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-PageLevelAIAssistant (fluent-next.blue.light).png b/apps/demos/testing/etalons/Chat-PageLevelAIAssistant (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9b9fca0194d1
Binary files /dev/null and b/apps/demos/testing/etalons/Chat-PageLevelAIAssistant (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..074cbc610377
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-AIPoweredDetailView (fluent-next.blue.light).png b/apps/demos/testing/etalons/DataGrid-AIPoweredDetailView (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7e97dbba5da8
Binary files /dev/null and b/apps/demos/testing/etalons/DataGrid-AIPoweredDetailView (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..5510f849fb73
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..6684e62b53c3
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..1ddcf52059c9
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..1d9547302a52
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..e5c2b05e8512
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..77d538d78b61
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..16eed5deb17a
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..f0dadaea1a25
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..8f8b4d1aee3b
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..5a6296f5ae61
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..71437b0b9be6
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..ed5f6a1b2e03
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..43f412574a60
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..3bdcef2a3226
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..ea112b1cd73b
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..a6aacb183328
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..a2544f1d87cb
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..4c71700771a1
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..b66a1012704b
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..504cf89f1b56
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..3cd86a3ce5d1
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..6ac92719dcbc
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..cec7291800e3
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..4fe721a507a6
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..56fbcaf323fe
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..3a8c71b8bdfa
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..4208da9600fa
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..898cbbd4e9b2
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..d5b032074ca3
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..92a2d6fb2a99
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..6ab9cf7a2b46
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..b14bf05133ff
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..5d964a930233
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..07c981caa08d
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-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..d386a74992bc
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..b133d592611c
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..39b489524806
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..700ef1eea19d
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..4a7b2b9482a8
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..390f14ad9ac6
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..e6c7b6e78437
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..6fdfcb8107c4
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..3c99a12df095
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..4a5e6003aab4
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..98dc1d958b9d
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..b0f410160c5d
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..adfc5df4bb6b
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..aa0cf36fb3b7
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..af35cb678a02
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..aa682b5e2520
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..d0f1188bb19c
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..252f6e2a6e2e
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..ad0d85b60cdd
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..0ac86090acaf
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..1fc265483f84
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..1a9aa2428d60
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..22481700526d
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..f177b197c02c
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..9f779aa3937d
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..376216844869
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..183077047c8d
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..934073d4ee5f
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..37c0954a8bae
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..ee63728982b6
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..727d9e5914a0
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..9ec2c0177ac0
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..95112c23f299
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..275856999e34
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..20782616a506
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..c4634803469b
Binary files /dev/null and b/apps/demos/testing/etalons/VectorMap-ZoomingAndCentering (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/accordion/etalons/accordion_overview_collapsed_electronics_disabled_collapsible (fluent-next.blue.light).png b/apps/demos/testing/widgets/accordion/etalons/accordion_overview_collapsed_electronics_disabled_collapsible (fluent-next.blue.light).png
new file mode 100644
index 000000000000..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..b1a49e64ff2d
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..72ee2230af69
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..cef032bc33ee
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..487138797011
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..4e206b046186
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..da80c8d8afc3
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..391cde90ceda
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..e58360bfcf29
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..aa1284151f3f
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..f76df34eaf93
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..0845243c797c
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_ai_and_chatbot_integration_copy_button_is_hovered (fluent-next.blue.light).png b/apps/demos/testing/widgets/chat/etalons/chat_ai_and_chatbot_integration_copy_button_is_hovered (fluent-next.blue.light).png
new file mode 100644
index 000000000000..abf18c1f0644
Binary files /dev/null and b/apps/demos/testing/widgets/chat/etalons/chat_ai_and_chatbot_integration_copy_button_is_hovered (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/chat_message_streaming_suggestion_card_is_hovered (fluent-next.blue.light).png b/apps/demos/testing/widgets/chat/etalons/chat_message_streaming_suggestion_card_is_hovered (fluent-next.blue.light).png
new file mode 100644
index 000000000000..ca45891f918c
Binary files /dev/null and b/apps/demos/testing/widgets/chat/etalons/chat_message_streaming_suggestion_card_is_hovered (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_ai_powered_detail_view_2_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/datagrid/etalons/datagrid_ai_powered_detail_view_2_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..2b6c4d42b97d
Binary files /dev/null and b/apps/demos/testing/widgets/datagrid/etalons/datagrid_ai_powered_detail_view_2_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..8151d3767b63
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_ResolveTimeConflicts_appointment-popup_recurrence-group_conflict-informer (fluent-next.blue.light)_mask.png b/apps/demos/testing/widgets/scheduler/etalons/scheduler_ResolveTimeConflicts_appointment-popup_recurrence-group_conflict-informer (fluent-next.blue.light)_mask.png
new file mode 100644
index 000000000000..e4f261f4139e
Binary files /dev/null and b/apps/demos/testing/widgets/scheduler/etalons/scheduler_ResolveTimeConflicts_appointment-popup_recurrence-group_conflict-informer (fluent-next.blue.light)_mask.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/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/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..59947033d0e0
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..b78c7bf27219
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..7aedfa21ea3f
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/treelist/AIColumns.test.ts b/apps/demos/testing/widgets/treelist/AIColumns.test.ts
new file mode 100644
index 000000000000..ac38013c77a8
--- /dev/null
+++ b/apps/demos/testing/widgets/treelist/AIColumns.test.ts
@@ -0,0 +1,36 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import { Selector as $ } from 'testcafe';
+import { runManualTest } from '../../../utils/visual-tests/matrix-test-helper';
+import { testScreenshot } from '../../../utils/visual-tests/helpers/theme-utils';
+import { widgetsGalleryServiceMock } from '../../apiMocks/widgetsGalleryServiceMock';
+
+fixture('TreeList.AIColumns')
+  .requestHooks(widgetsGalleryServiceMock)
+  .before(async (ctx) => {
+    ctx.initialWindowSize = [900, 800];
+  });
+
+runManualTest('TreeList', 'AIColumns', (test) => {
+  test('AIColumns', async (t) => {
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+    await t
+      .expect($('.dx-command-ai').withText('Management').exists)
+      .ok()
+      .click($('.dx-page').withText('2'))
+      .expect($('.dx-command-ai').withText('Sales').exists)
+      .ok()
+      .expect($('.dx-loadpanel-content').visible)
+      .notOk();
+
+    await testScreenshot(t, takeScreenshot, 'treelist_ai_columns_salaried_status_desktop.png', '.status--salaried');
+
+    await testScreenshot(t, takeScreenshot, 'treelist_ai_columns_commission_status_desktop.png', '.status--commission');
+
+    await testScreenshot(t, takeScreenshot, 'treelist_ai_columns_terminated_status_desktop.png', '.status--terminated');
+
+    await t
+      .expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  });
+});
diff --git a/apps/demos/testing/widgets/treelist/etalons/treelist_ai_columns_commission_status_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/treelist/etalons/treelist_ai_columns_commission_status_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5c2f95c21355
Binary files /dev/null and b/apps/demos/testing/widgets/treelist/etalons/treelist_ai_columns_commission_status_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/treelist/etalons/treelist_ai_columns_commission_status_desktop (fluent.blue.light).png b/apps/demos/testing/widgets/treelist/etalons/treelist_ai_columns_commission_status_desktop (fluent.blue.light).png
new file mode 100644
index 000000000000..df65735a4db8
Binary files /dev/null and b/apps/demos/testing/widgets/treelist/etalons/treelist_ai_columns_commission_status_desktop (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/treelist/etalons/treelist_ai_columns_commission_status_desktop (material.blue.light).png b/apps/demos/testing/widgets/treelist/etalons/treelist_ai_columns_commission_status_desktop (material.blue.light).png
new file mode 100644
index 000000000000..fcdf17447be4
Binary files /dev/null and b/apps/demos/testing/widgets/treelist/etalons/treelist_ai_columns_commission_status_desktop (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/treelist/etalons/treelist_ai_columns_salaried_status_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/treelist/etalons/treelist_ai_columns_salaried_status_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0417b3f64cd6
Binary files /dev/null and b/apps/demos/testing/widgets/treelist/etalons/treelist_ai_columns_salaried_status_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/treelist/etalons/treelist_ai_columns_salaried_status_desktop (fluent.blue.light).png b/apps/demos/testing/widgets/treelist/etalons/treelist_ai_columns_salaried_status_desktop (fluent.blue.light).png
new file mode 100644
index 000000000000..1667124ce7f4
Binary files /dev/null and b/apps/demos/testing/widgets/treelist/etalons/treelist_ai_columns_salaried_status_desktop (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/treelist/etalons/treelist_ai_columns_salaried_status_desktop (material.blue.light).png b/apps/demos/testing/widgets/treelist/etalons/treelist_ai_columns_salaried_status_desktop (material.blue.light).png
new file mode 100644
index 000000000000..267ae8c34108
Binary files /dev/null and b/apps/demos/testing/widgets/treelist/etalons/treelist_ai_columns_salaried_status_desktop (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/treelist/etalons/treelist_ai_columns_terminated_status_desktop (fluent-next.blue.light).png b/apps/demos/testing/widgets/treelist/etalons/treelist_ai_columns_terminated_status_desktop (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0356a37207ee
Binary files /dev/null and b/apps/demos/testing/widgets/treelist/etalons/treelist_ai_columns_terminated_status_desktop (fluent-next.blue.light).png differ
diff --git a/apps/demos/testing/widgets/treelist/etalons/treelist_ai_columns_terminated_status_desktop (fluent.blue.light).png b/apps/demos/testing/widgets/treelist/etalons/treelist_ai_columns_terminated_status_desktop (fluent.blue.light).png
new file mode 100644
index 000000000000..ab3dec9a1922
Binary files /dev/null and b/apps/demos/testing/widgets/treelist/etalons/treelist_ai_columns_terminated_status_desktop (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/treelist/etalons/treelist_ai_columns_terminated_status_desktop (material.blue.light).png b/apps/demos/testing/widgets/treelist/etalons/treelist_ai_columns_terminated_status_desktop (material.blue.light).png
new file mode 100644
index 000000000000..5a8efa0ccac7
Binary files /dev/null and b/apps/demos/testing/widgets/treelist/etalons/treelist_ai_columns_terminated_status_desktop (material.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..1290b7edfc97
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..b488d6a0c2ac
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..65b4bf231c16
Binary files /dev/null and b/apps/demos/testing/widgets/vectormap/etalons/zoom_vector_map_by_control_bar (fluent-next.blue.light).png differ
diff --git a/apps/demos/utils/visual-tests/helpers/theme-utils.js b/apps/demos/utils/visual-tests/helpers/theme-utils.js
index d93cbd5968da..4c47a7b63052 100644
--- a/apps/demos/utils/visual-tests/helpers/theme-utils.js
+++ b/apps/demos/utils/visual-tests/helpers/theme-utils.js
@@ -1,6 +1,7 @@
 export const THEME = {
   generic: 'generic.light',
   fluent: 'fluent.blue.light',
+  'fluent-next': 'fluent-next.blue.light',
   material: 'material.blue.light',
 };
 
diff --git a/e2e/playwright/README.md b/e2e/playwright/README.md
index 7ad7a8c7ec73..e26c2e6260d6 100644
--- a/e2e/playwright/README.md
+++ b/e2e/playwright/README.md
@@ -69,6 +69,10 @@ test('PivotGrid renders its areas', { tag: ['@generic.light'] }, async ({ page }
 
 Tag a test when its result does not depend on the theme, or when it has an etalon for that theme.
 
+Every folder job also runs in `fluent-next.blue.light` (the `- fluent-next` jobs). These take the
+whole folder like the default jobs do, so a screenshot test needs a `(fluent-next.blue.light)` etalon
+next to its `(fluent.blue.light)` one.
+
 A tag opts a test into a themed job; it does not change the theme of a run. To pin the theme of one
 test or one file, set the fixture option — the same way the browser size is set:
 
diff --git a/e2e/playwright/tests/common/pivotGrid/etalons/PivotGrid contextmenu width (fluent-next.blue.light).png b/e2e/playwright/tests/common/pivotGrid/etalons/PivotGrid contextmenu width (fluent-next.blue.light).png
new file mode 100644
index 000000000000..debf3eccd541
Binary files /dev/null and b/e2e/playwright/tests/common/pivotGrid/etalons/PivotGrid contextmenu width (fluent-next.blue.light).png differ
diff --git a/e2e/playwright/tests/common/pivotGrid/etalons/PivotGrid markup (fluent-next.blue.light).png b/e2e/playwright/tests/common/pivotGrid/etalons/PivotGrid markup (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b3e582875cc8
Binary files /dev/null and b/e2e/playwright/tests/common/pivotGrid/etalons/PivotGrid markup (fluent-next.blue.light).png differ
diff --git a/e2e/playwright/tests/common/pivotGrid/etalons/rows_do_not_overlap_data_fields_if_virtual_scrolling_enabled_T1210807 (fluent-next.blue.light).png b/e2e/playwright/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..1938aec1e16a
Binary files /dev/null and b/e2e/playwright/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/playwright/tests/common/pivotGrid/sort/etalons/T1173442_after_sort_with_summary_display_mode (fluent-next.blue.light).png b/e2e/playwright/tests/common/pivotGrid/sort/etalons/T1173442_after_sort_with_summary_display_mode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..a8b01a5b4d42
Binary files /dev/null and b/e2e/playwright/tests/common/pivotGrid/sort/etalons/T1173442_after_sort_with_summary_display_mode (fluent-next.blue.light).png differ
diff --git a/e2e/playwright/tests/common/pivotGrid/sort/etalons/T1173442_before_sort_with_summary_display_mode (fluent-next.blue.light).png b/e2e/playwright/tests/common/pivotGrid/sort/etalons/T1173442_before_sort_with_summary_display_mode (fluent-next.blue.light).png
new file mode 100644
index 000000000000..6862671ca22f
Binary files /dev/null and b/e2e/playwright/tests/common/pivotGrid/sort/etalons/T1173442_before_sort_with_summary_display_mode (fluent-next.blue.light).png differ
diff --git a/e2e/playwright/tests/container.html b/e2e/playwright/tests/container.html
index 32c6aa58fa88..7207c8b44dc1 100644
--- a/e2e/playwright/tests/container.html
+++ b/e2e/playwright/tests/container.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="true">
     <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="false">
diff --git a/e2e/testcafe-devextreme/helpers/accessibility/test.ts b/e2e/testcafe-devextreme/helpers/accessibility/test.ts
index b0ee0f853879..97537e01b829 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,7 @@ export interface Configuration<TComponentOptions = unknown> {
 export const defaultSelector = '#container';
 const defaultOptions = {};
 const defaultCreated = async () => {};
-const defaultA11yCheckConfig = isFluent() ? {} : {
+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..14dab507a599 100644
--- a/e2e/testcafe-devextreme/helpers/accessibility/utils.ts
+++ b/e2e/testcafe-devextreme/helpers/accessibility/utils.ts
@@ -1,12 +1,22 @@
 /* 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';
+
+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 +35,21 @@ export const a11yCheck = async (
   configuration = {},
 ):
 Promise<void> => {
-  const { error, results } = await axeCheck(t, selector, { rules: {}, ...options });
+  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 f2c7b1daa2c2..7c1fc21278ab 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 (t: TestController, 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 } },
 ).with({ boundTestRun: t })();
diff --git a/e2e/testcafe-devextreme/helpers/testPageUtils.ts b/e2e/testcafe-devextreme/helpers/testPageUtils.ts
index 6748ab2f1687..2b51db19e1c8 100644
--- a/e2e/testcafe-devextreme/helpers/testPageUtils.ts
+++ b/e2e/testcafe-devextreme/helpers/testPageUtils.ts
@@ -64,6 +64,16 @@ export async function loadAxeCore(t: TestController): Promise<void> {
   })).with({ boundTestRun: t })();
 }
 
+export async function applyViewportEnvironment(t: TestController): Promise<void> {
+  await ClientFunction(() => {
+    const { body } = document;
+    body.classList.remove('dx-surface');
+    body.classList.add('dx-viewport');
+
+    (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 95852f714c0e..14db662ef7a8 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..e9c4a1ec09ee 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;
 
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..756e20527b9d
--- /dev/null
+++ b/e2e/testcafe-devextreme/tests/common/accentColor.ts
@@ -0,0 +1,391 @@
+/* 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 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;
+}
+
+interface PaintedAccent {
+  name: string;
+  painted: { selectedRange: string; handles: string[]; markers: string[] };
+  primary: string;
+  inPlace: boolean;
+}
+
+const asHex = (value: string): string => {
+  const probe = document.createElement('div');
+  document.body.appendChild(probe);
+  probe.style.backgroundColor = `rgb(from ${value} r g b)`;
+  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;
+};
+
+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 ACCENT_RANGE = 'accent-range';
+const SELECTED_RANGE = `#${ACCENT_RANGE} .dxrs-slidersContainer > path`;
+const SLIDER_HANDLES = `#${ACCENT_RANGE} .slider > path`;
+const SLIDER_MARKERS = `#${ACCENT_RANGE} .slider-marker > path`;
+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 };
+  });
+
+  swatches.forEach(({ step, swatch, caption }) => {
+    caption.textContent = `${step}\n${asHex(getComputedStyle(swatch).backgroundColor)}`;
+    caption.style.whiteSpace = 'pre';
+  });
+}, { dependencies: { PALETTE_STRIP, asHex } });
+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 accentThroughApi = ClientFunction((color: string | null) => {
+  const { themes } = (window as any).DevExpress.ui;
+
+  themes.customAccentColor(color);
+
+  const probe = document.createElement('div');
+  document.body.appendChild(probe);
+  probe.style.backgroundColor = 'var(--dxds-primary-100)';
+  const seed = asHex(getComputedStyle(probe).backgroundColor);
+  probe.remove();
+
+  return { seed, reported: themes.customAccentColor() };
+}, { dependencies: { asHex } });
+
+const declareBrandColor = ClientFunction((color: string) => {
+  document.documentElement.style.setProperty('--brand', color);
+});
+
+const createAccentRange = async (): Promise<void> => {
+  await appendElementTo('#container', 'div', ACCENT_RANGE, { marginTop: '8px' });
+  await createWidget('dxRangeSelector', {
+    scale: {
+      startValue: 0, endValue: 100, tickInterval: 10, minorTickInterval: 2,
+    },
+    value: [20, 60],
+    behavior: { animationEnabled: false },
+    size: { width: 1080, height: 80 },
+  }, `#${ACCENT_RANGE}`);
+};
+
+const rememberAccentRange = ClientFunction(() => {
+  const { DevExpress } = window as any;
+  const host = document.getElementById(ACCENT_RANGE);
+
+  (window as any).accentRangeAsCreated = {
+    instance: DevExpress.viz.dxRangeSelector.getInstance(host),
+    selectedRange: document.querySelector(SELECTED_RANGE),
+  };
+}, { dependencies: { ACCENT_RANGE, SELECTED_RANGE } });
+
+const paintAccentRange = ClientFunction((color: string, throughApi: boolean) => {
+  const { DevExpress, accentRangeAsCreated } = window as any;
+
+  if (throughApi) {
+    DevExpress.ui.themes.customAccentColor(color);
+  } else {
+    document.documentElement.style.setProperty('--dx-accent-color', color);
+  }
+
+  const host = document.getElementById(ACCENT_RANGE);
+  const selectedRange = document.querySelector(SELECTED_RANGE)!;
+  const paintOf = (selector: string, property: 'fill' | 'stroke'): string[] => Array.from(
+    document.querySelectorAll(selector),
+    (element) => asHex(getComputedStyle(element)[property]),
+  );
+  const probe = document.createElement('div');
+  document.body.appendChild(probe);
+  probe.style.backgroundColor = 'var(--dxds-primary-100)';
+  const primary = asHex(getComputedStyle(probe).backgroundColor);
+  probe.remove();
+
+  return {
+    painted: {
+      selectedRange: asHex(getComputedStyle(selectedRange).stroke),
+      handles: paintOf(SLIDER_HANDLES, 'stroke'),
+      markers: paintOf(SLIDER_MARKERS, 'fill'),
+    },
+    primary,
+    inPlace: selectedRange === accentRangeAsCreated?.selectedRange
+      && DevExpress.viz.dxRangeSelector.getInstance(host) === accentRangeAsCreated?.instance,
+  };
+}, {
+  dependencies: {
+    ACCENT_RANGE, SELECTED_RANGE, SLIDER_HANDLES, SLIDER_MARKERS, asHex,
+  },
+});
+
+const RANGE_ACCENTS = [
+  ...SHIPPED_ACCENTS.map(({ palette, color }) => ({ name: palette, color, throughApi: false })),
+  { name: 'custom', color: '#a703ff', throughApi: false },
+  { name: 'custom through themes.customAccentColor', color: '#107c10', throughApi: true },
+];
+
+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 arbitraryAccent = '#a703ff';
+  const { measured, source, settings } = await measurePalette(arbitraryAccent, 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}`);
+  await createAccentRange();
+});
+
+(isFluentNext() ? test : test.skip)('a range selector paints its selected range, handles and markers in the accent, repainting in place', async (t) => {
+  await rememberAccentRange();
+
+  const results: PaintedAccent[] = [];
+
+  for (const { name, color, throughApi } of RANGE_ACCENTS) {
+    results.push({ name, ...await paintAccentRange(color, throughApi) });
+  }
+
+  await t
+    .expect(results.map(({ name, painted }) => ({ name, ...painted })))
+    .eql(
+      results.map(({ name, primary }) => ({
+        name, selectedRange: primary, handles: [primary, primary], markers: [primary, primary],
+      })),
+      'the selected range, both slider handles and both marker plates are painted in --dxds-primary-100 of every accent',
+    );
+
+  await t
+    .expect(new Set(results.map(({ painted }) => painted.selectedRange)).size)
+    .eql(RANGE_ACCENTS.length, 'no two accents paint the selected range alike');
+
+  await t
+    .expect(results.filter(({ inPlace }) => !inPlace).map(({ name }) => name))
+    .eql([], 'every accent repaints the widget drawn first, neither re-created nor reloaded');
+}).before(createAccentRange);
+
+(isFluentNext() ? test : test.skip)('a translucent accent still gives an opaque palette', async (t) => {
+  const translucentAccent = '#a703ff80';
+  const { measured } = await measurePalette(translucentAccent, STEPS);
+
+  await t
+    .expect(measured.filter((entry) => entry.resolved.includes('/')).map((entry) => entry.step))
+    .eql([], 'no step may inherit the alpha of the accent');
+});
+
+(isFluentNext() ? test : test.skip)('themes.customAccentColor sets, keeps and clears the accent', async (t) => {
+  const designedAccent = '#0f6cbd';
+  const arbitraryAccent = '#a703ff';
+  const designed = await accentThroughApi(null);
+
+  await t.expect(designed.reported).eql('', 'an accent nobody set is reported as unset');
+  await t.expect(designed.seed).eql(designedAccent, 'the theme starts on the accent it was drawn with');
+
+  const applied = await accentThroughApi(arbitraryAccent);
+
+  await t.expect(applied.seed).eql(arbitraryAccent, 'the palette is built from the accent that was set');
+  await t.expect(applied.reported).eql(arbitraryAccent, 'the accent that was set is reported back');
+
+  const afterRefusedValue = await accentThroughApi('not-a-color');
+
+  await t.expect(afterRefusedValue.seed).eql(arbitraryAccent, 'a refused value leaves the palette alone');
+  await t.expect(afterRefusedValue.reported).eql(arbitraryAccent, 'a refused value leaves the accent alone');
+
+  const afterReset = await accentThroughApi(null);
+
+  await t.expect(afterReset.seed).eql(designed.seed, 'null brings the designed palette back');
+  await t.expect(afterReset.reported).eql('', 'a cleared accent is reported as unset');
+});
+
+(isFluentNext() ? test : test.skip)('themes.customAccentColor takes an accent written as a reference', async (t) => {
+  const brandAccent = '#a703ff';
+
+  await declareBrandColor(brandAccent);
+  const applied = await accentThroughApi('var(--brand)');
+
+  await t.expect(applied.seed).eql(brandAccent, 'the palette is built from the color the reference resolves to');
+  await t.expect(applied.reported).eql(brandAccent, 'a reference is reported back as the color it resolves to');
+});
+
+(isFluentNext() ? test : test.skip)('themes.customAccentColor takes an accent written by name', async (t) => {
+  const namedAccent = 'rebeccapurple';
+  const applied = await accentThroughApi(namedAccent);
+
+  await t.expect(applied.seed).eql('#663399', 'the palette is built from the color the name stands for');
+  await t.expect(applied.reported).eql(namedAccent, 'the accent is reported back as it was written, not as a hex');
+});
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..4e4396a20ab2
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..6100e4410590
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..4c6388520a5f
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/etalons/Viz axis and legend (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/etalons/Viz axis and legend (fluent-next.blue.light).png
new file mode 100644
index 000000000000..66bc8f086d2c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/etalons/Viz axis and legend (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/etalons/Viz bar gauge shelf (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/etalons/Viz bar gauge shelf (fluent-next.blue.light).png
new file mode 100644
index 000000000000..0d9f9aa94fa0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/etalons/Viz bar gauge shelf (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/etalons/Viz bullet target (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/etalons/Viz bullet target (fluent-next.blue.light).png
new file mode 100644
index 000000000000..1cd038774d63
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/etalons/Viz bullet target (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/etalons/Viz candlestick reduction (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/etalons/Viz candlestick reduction (fluent-next.blue.light).png
new file mode 100644
index 000000000000..d3fd075059ef
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/etalons/Viz candlestick reduction (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/etalons/Viz chart crosshair dark (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/etalons/Viz chart crosshair dark (fluent-next.blue.light).png
new file mode 100644
index 000000000000..17f1e9783286
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/etalons/Viz chart crosshair dark (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/etalons/Viz chart crosshair light (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/etalons/Viz chart crosshair light (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4bace04ac4ea
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/etalons/Viz chart crosshair light (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/etalons/Viz gauge indicating set (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/etalons/Viz gauge indicating set (fluent-next.blue.light).png
new file mode 100644
index 000000000000..7689ed7d5a93
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/etalons/Viz gauge indicating set (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/etalons/Viz gauge indicators (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/etalons/Viz gauge indicators (fluent-next.blue.light).png
new file mode 100644
index 000000000000..8b8791dc2bea
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/etalons/Viz gauge indicators (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/etalons/Viz map area (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/etalons/Viz map area (fluent-next.blue.light).png
new file mode 100644
index 000000000000..b5a5c05d2c93
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/etalons/Viz map area (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/etalons/Viz map line (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/etalons/Viz map line (fluent-next.blue.light).png
new file mode 100644
index 000000000000..14219b60ff79
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/etalons/Viz map line (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/etalons/Viz range selector invalid dark (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/etalons/Viz range selector invalid dark (fluent-next.blue.light).png
new file mode 100644
index 000000000000..4ce02c8f1aa0
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/etalons/Viz range selector invalid dark (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/etalons/Viz range selector invalid light (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/etalons/Viz range selector invalid light (fluent-next.blue.light).png
new file mode 100644
index 000000000000..431e87665697
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/etalons/Viz range selector invalid light (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/etalons/Viz sankey link (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/etalons/Viz sankey link (fluent-next.blue.light).png
new file mode 100644
index 000000000000..e55097bda279
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/etalons/Viz sankey link (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/etalons/Viz sparkline extremes (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/etalons/Viz sparkline extremes (fluent-next.blue.light).png
new file mode 100644
index 000000000000..9567db1f82f1
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/etalons/Viz sparkline extremes (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/etalons/Viz sparkline line (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/etalons/Viz sparkline line (fluent-next.blue.light).png
new file mode 100644
index 000000000000..5c5e843ccf40
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/etalons/Viz sparkline line (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/etalons/Viz sparkline winloss (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/etalons/Viz sparkline winloss (fluent-next.blue.light).png
new file mode 100644
index 000000000000..89cf87651333
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/etalons/Viz sparkline winloss (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/etalons/Viz tree map tile border (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/etalons/Viz tree map tile border (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c56d7d858dda
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/etalons/Viz tree map tile border (fluent-next.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/common/etalons/Viz tree map tile fill (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/common/etalons/Viz tree map tile fill (fluent-next.blue.light).png
new file mode 100644
index 000000000000..c96572bfd776
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/common/etalons/Viz tree map tile fill (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..986d1ea8fdb5
--- /dev/null
+++ b/e2e/testcafe-devextreme/tests/common/themeModes.ts
@@ -0,0 +1,934 @@
+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';
+
+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';
+
+  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();
+    }
+  });
+
+  const CHART = {
+    dataSource: [{ month: 'a', sales: 1 }, { month: 'b', sales: 2 }],
+    series: [{ type: 'bar', argumentField: 'month', valueField: 'sales' }],
+    legend: { visible: false },
+    animation: { enabled: false },
+    size: { width: 220, height: 160 },
+  };
+
+  const MAP_WITH_LABELLED_MARKERS = {
+    layers: [{
+      type: 'marker',
+      dataSource: {
+        type: 'FeatureCollection',
+        features: [{
+          type: 'Feature',
+          geometry: { type: 'Point', coordinates: [0, 0] },
+          properties: { text: 'a' },
+        }],
+      },
+      label: { enabled: true, dataField: 'text' },
+    }],
+    size: { width: 220, height: 160 },
+  };
+
+  const writeRootProperty = ClientFunction((name: string, value: string) => {
+    const root = document.documentElement;
+
+    if (value) {
+      root.style.setProperty(name, value);
+    } else {
+      root.style.removeProperty(name);
+    }
+  });
+
+  const exportedFrom = ClientFunction((
+    selector: string,
+    widgetName: string,
+    paintedSelector: string,
+    paintedAttribute: string,
+  ) => {
+    const instance = ($(selector) as any)[widgetName]('instance');
+    const markup = (window as any).DevExpress.viz.getMarkup([instance]);
+    const painted = new DOMParser().parseFromString(markup, 'image/svg+xml').querySelector(paintedSelector);
+
+    return {
+      references: (markup.match(/var\(--dx-/g) ?? []).length,
+      painted: painted?.getAttribute(paintedAttribute) ?? '',
+    };
+  });
+
+  type Exported = Promise<{ references: number; painted: string }>;
+
+  const exportedChartFrom = (selector: string): Exported => exportedFrom(selector, 'dxChart', 'text', 'style');
+
+  const exportedHaloFrom = (selector: string): Exported => exportedFrom(selector, 'dxVectorMap', '[stroke-linejoin="round"]', 'stroke');
+
+  const DECLARED_BLUE = 'rgb(11, 7, 3)';
+  const DECLARED_BG = 'rgb(22, 7, 3)';
+  const HANDED_OUT_BLUE = '#0b0703';
+
+  const declareTheNamesTheWidgetsRead = ClientFunction((blue: string, background: string) => {
+    document.documentElement.style.setProperty('--dx-viz-blue', blue);
+    document.documentElement.style.setProperty('--dx-viz-bg', background);
+  });
+
+  const colorsHandedOutByTheWidget = ClientFunction(() => {
+    const { widget } = (window as any);
+    const series = widget.getAllSeries?.() ?? [];
+    const items = widget.getAllItems?.() ?? [];
+
+    return [
+      ...series.flatMap((one) => [
+        one.getColor(),
+        ...one.getAllPoints().map((point) => point.getColor()),
+      ]),
+      ...items.map((item) => item.getColor()),
+    ];
+  });
+
+  const markupOfTheWidget = ClientFunction(() => {
+    const svg = (window as any).widget.svg();
+    const left = (svg.match(/var\(--dx-[a-z-]+/g) ?? []) as string[];
+
+    return { svg, unresolved: left.filter((value, index) => left.indexOf(value) === index) };
+  });
+
+  test('dxChart paints from a name the page declared, leaving no reference behind', async (t) => {
+    const { svg, unresolved } = await markupOfTheWidget();
+
+    await t.expect(await colorsHandedOutByTheWidget()).eql([HANDED_OUT_BLUE, HANDED_OUT_BLUE], 'getColor answers with the colour the cascade resolved, normalised to hex');
+    await t.expect(svg).contains(DECLARED_BLUE, 'the markup carries what the cascade resolved, not the literal the theme writes beside the name');
+    await t.expect(unresolved).eql([], 'and no reference survives into the markup');
+  }).before(async () => {
+    await declareTheNamesTheWidgetsRead(DECLARED_BLUE, DECLARED_BG);
+    await createWidget('dxChart', {
+      ...{
+        dataSource: [{ a: 'x', v: 1 }],
+        series: [{ argumentField: 'a', valueField: 'v' }],
+      },
+      animation: { enabled: false },
+      size: { width: 220, height: 160 },
+    });
+  });
+
+  const DECLARED_IN_OKLCH = 'oklch(0.55 0.15 250)';
+
+  const declaredAsRgb = ClientFunction((declared: string) => {
+    const probe = document.createElement('div');
+
+    document.body.appendChild(probe);
+    probe.style.color = `color-mix(in srgb, ${declared} 100%, transparent)`;
+
+    const channels = (getComputedStyle(probe).color.match(/-?[\d.]+(?:e-?\d+)?/g) ?? [])
+      .slice(0, 3)
+      .map((value) => Math.round(Math.min(1, Math.max(0, Number(value))) * 255));
+
+    probe.remove();
+
+    return `#${channels.map((value) => value.toString(16).padStart(2, '0')).join('')}`;
+  });
+
+  test('dxChart hands out a name declared in another colour space as the sRGB colour it paints', async (t) => {
+    const expected = await declaredAsRgb(DECLARED_IN_OKLCH);
+
+    await t.expect(await colorsHandedOutByTheWidget())
+      .eql([expected, expected], 'getColor brings the colour to sRGB instead of reading its channels as red, green and blue');
+  }).before(async () => {
+    await declareTheNamesTheWidgetsRead(DECLARED_IN_OKLCH, DECLARED_BG);
+    await createWidget('dxChart', {
+      dataSource: [{ a: 'x', v: 1 }],
+      series: [{ argumentField: 'a', valueField: 'v' }],
+      animation: { enabled: false },
+      size: { width: 220, height: 160 },
+    });
+  });
+
+  test('dxPieChart paints from a name the page declared, leaving no reference behind', async (t) => {
+    const { svg, unresolved } = await markupOfTheWidget();
+
+    await t.expect(await colorsHandedOutByTheWidget()).eql([undefined, HANDED_OUT_BLUE], 'getColor answers with the colour the cascade resolved, normalised to hex');
+    await t.expect(svg).contains(DECLARED_BLUE, 'the markup carries what the cascade resolved, not the literal the theme writes beside the name');
+    await t.expect(unresolved).eql([], 'and no reference survives into the markup');
+  }).before(async () => {
+    await declareTheNamesTheWidgetsRead(DECLARED_BLUE, DECLARED_BG);
+    await createWidget('dxPieChart', {
+      ...{
+        dataSource: [{ a: 'x', v: 1 }],
+        series: [{ argumentField: 'a', valueField: 'v' }],
+      },
+      animation: { enabled: false },
+      size: { width: 220, height: 160 },
+    });
+  });
+
+  test('dxPolarChart paints from a name the page declared, leaving no reference behind', async (t) => {
+    const { svg, unresolved } = await markupOfTheWidget();
+
+    await t.expect(await colorsHandedOutByTheWidget()).eql([HANDED_OUT_BLUE, HANDED_OUT_BLUE], 'getColor answers with the colour the cascade resolved, normalised to hex');
+    await t.expect(svg).contains(DECLARED_BLUE, 'the markup carries what the cascade resolved, not the literal the theme writes beside the name');
+    await t.expect(unresolved).eql([], 'and no reference survives into the markup');
+  }).before(async () => {
+    await declareTheNamesTheWidgetsRead(DECLARED_BLUE, DECLARED_BG);
+    await createWidget('dxPolarChart', {
+      ...{
+        dataSource: [{ a: 'x', v: 1 }],
+        series: [{ argumentField: 'a', valueField: 'v' }],
+      },
+      animation: { enabled: false },
+      size: { width: 220, height: 160 },
+    });
+  });
+
+  test('dxFunnel paints from a name the page declared, leaving no reference behind', async (t) => {
+    const { svg, unresolved } = await markupOfTheWidget();
+
+    await t.expect(await colorsHandedOutByTheWidget()).eql([HANDED_OUT_BLUE], 'getColor answers with the colour the cascade resolved, normalised to hex');
+    await t.expect(svg).contains(DECLARED_BLUE, 'the markup carries what the cascade resolved, not the literal the theme writes beside the name');
+    await t.expect(unresolved).eql([], 'and no reference survives into the markup');
+  }).before(async () => {
+    await declareTheNamesTheWidgetsRead(DECLARED_BLUE, DECLARED_BG);
+    await createWidget('dxFunnel', {
+      ...{
+        dataSource: [{ a: 'x', v: 3 }],
+        argumentField: 'a',
+        valueField: 'v',
+      },
+      animation: { enabled: false },
+      size: { width: 220, height: 160 },
+    });
+  });
+
+  test('dxSankey paints from a name the page declared, leaving no reference behind', async (t) => {
+    const { svg, unresolved } = await markupOfTheWidget();
+
+    await t.expect(svg).contains(DECLARED_BLUE, 'the markup carries what the cascade resolved, not the literal the theme writes beside the name');
+    await t.expect(unresolved).eql([], 'and no reference survives into the markup');
+  }).before(async () => {
+    await declareTheNamesTheWidgetsRead(DECLARED_BLUE, DECLARED_BG);
+    await createWidget('dxSankey', {
+      ...{
+        dataSource: [{ source: 'A', target: 'X', weight: 1 }],
+      },
+      animation: { enabled: false },
+      size: { width: 220, height: 160 },
+    });
+  });
+
+  test('dxTreeMap paints from a name the page declared, leaving no reference behind', async (t) => {
+    const { svg, unresolved } = await markupOfTheWidget();
+
+    await t.expect(svg).contains(DECLARED_BLUE, 'the markup carries what the cascade resolved, not the literal the theme writes beside the name');
+    await t.expect(unresolved).eql([], 'and no reference survives into the markup');
+  }).before(async () => {
+    await declareTheNamesTheWidgetsRead(DECLARED_BLUE, DECLARED_BG);
+    await createWidget('dxTreeMap', {
+      ...{
+        dataSource: [{ name: 'a', value: 1 }],
+      },
+      animation: { enabled: false },
+      size: { width: 220, height: 160 },
+    });
+  });
+
+  test('dxVectorMap paints from a name the page declared, leaving no reference behind', async (t) => {
+    const { svg, unresolved } = await markupOfTheWidget();
+
+    await t.expect(svg).contains(DECLARED_BLUE, 'the markup carries what the cascade resolved, not the literal the theme writes beside the name');
+    await t.expect(unresolved).eql([], 'and no reference survives into the markup');
+  }).before(async () => {
+    await declareTheNamesTheWidgetsRead(DECLARED_BLUE, DECLARED_BG);
+    await createWidget('dxVectorMap', {
+      ...{
+        layers: [{
+          type: 'marker',
+          dataSource: {
+            type: 'FeatureCollection',
+            features: [{ type: 'Feature', geometry: { type: 'Point', coordinates: [0, 0] }, properties: { text: 'a' } }],
+          },
+          label: { enabled: true, dataField: 'text' },
+        }],
+      },
+      animation: { enabled: false },
+      size: { width: 220, height: 160 },
+    });
+  });
+
+  test('dxSparkline paints from a name the page declared, leaving no reference behind', async (t) => {
+    const { svg, unresolved } = await markupOfTheWidget();
+
+    await t.expect(svg).contains(DECLARED_BG, 'the markup carries what the cascade resolved, not the literal the theme writes beside the name');
+    await t.expect(unresolved).eql([], 'and no reference survives into the markup');
+  }).before(async () => {
+    await declareTheNamesTheWidgetsRead(DECLARED_BLUE, DECLARED_BG);
+    await createWidget('dxSparkline', {
+      ...{
+        dataSource: [1, 4, 2],
+      },
+      animation: { enabled: false },
+      size: { width: 220, height: 160 },
+    });
+  });
+
+  test('dxBullet paints from a name the page declared, leaving no reference behind', async (t) => {
+    const { svg, unresolved } = await markupOfTheWidget();
+
+    await t.expect(svg).contains(DECLARED_BLUE, 'the markup carries what the cascade resolved, not the literal the theme writes beside the name');
+    await t.expect(unresolved).eql([], 'and no reference survives into the markup');
+  }).before(async () => {
+    await declareTheNamesTheWidgetsRead(DECLARED_BLUE, DECLARED_BG);
+    await createWidget('dxBullet', {
+      ...{
+        value: 40,
+        target: 60,
+      },
+      animation: { enabled: false },
+      size: { width: 220, height: 160 },
+    });
+  });
+
+  test('dxBarGauge paints from a name the page declared, leaving no reference behind', async (t) => {
+    const { svg, unresolved } = await markupOfTheWidget();
+
+    await t.expect(svg).contains(DECLARED_BLUE, 'the markup carries what the cascade resolved, not the literal the theme writes beside the name');
+    await t.expect(unresolved).eql([], 'and no reference survives into the markup');
+  }).before(async () => {
+    await declareTheNamesTheWidgetsRead(DECLARED_BLUE, DECLARED_BG);
+    await createWidget('dxBarGauge', {
+      ...{
+        values: [30],
+      },
+      animation: { enabled: false },
+      size: { width: 220, height: 160 },
+    });
+  });
+
+  test('dxCircularGauge paints from a name the page declared, leaving no reference behind', async (t) => {
+    const { svg, unresolved } = await markupOfTheWidget();
+
+    await t.expect(svg).contains(DECLARED_BG, 'the markup carries what the cascade resolved, not the literal the theme writes beside the name');
+    await t.expect(unresolved).eql([], 'and no reference survives into the markup');
+  }).before(async () => {
+    await declareTheNamesTheWidgetsRead(DECLARED_BLUE, DECLARED_BG);
+    await createWidget('dxCircularGauge', {
+      ...{
+        value: 40,
+      },
+      animation: { enabled: false },
+      size: { width: 220, height: 160 },
+    });
+  });
+
+  test('dxLinearGauge paints from a name the page declared, leaving no reference behind', async (t) => {
+    const { svg, unresolved } = await markupOfTheWidget();
+
+    await t.expect(svg).contains(DECLARED_BLUE, 'the markup carries what the cascade resolved, not the literal the theme writes beside the name');
+    await t.expect(unresolved).eql([], 'and no reference survives into the markup');
+  }).before(async () => {
+    await declareTheNamesTheWidgetsRead(DECLARED_BLUE, DECLARED_BG);
+    await createWidget('dxLinearGauge', {
+      ...{
+        value: 40,
+      },
+      animation: { enabled: false },
+      size: { width: 220, height: 160 },
+    });
+  });
+
+  test('dxRangeSelector paints from a name the page declared, leaving no reference behind', async (t) => {
+    const { svg, unresolved } = await markupOfTheWidget();
+
+    await t.expect(svg).contains(DECLARED_BG, 'the markup carries what the cascade resolved, not the literal the theme writes beside the name');
+    await t.expect(unresolved).eql([], 'and no reference survives into the markup');
+  }).before(async () => {
+    await declareTheNamesTheWidgetsRead(DECLARED_BLUE, DECLARED_BG);
+    await createWidget('dxRangeSelector', {
+      ...{
+        scale: { startValue: 0, endValue: 10 },
+      },
+      behavior: { animationEnabled: false },
+      size: { width: 220, height: 160 },
+    });
+  });
+
+  const WIDGETS_UNDER_TEST = [
+    'dxChart', 'dxPieChart', 'dxPolarChart', 'dxFunnel', 'dxSankey', 'dxTreeMap', 'dxVectorMap',
+    'dxSparkline', 'dxBullet', 'dxBarGauge', 'dxCircularGauge', 'dxLinearGauge', 'dxRangeSelector',
+  ];
+
+  const vizWidgetsExposed = ClientFunction(() => Object.keys((window as any).DevExpress.viz)
+    .filter((name) => /^dx[A-Z]/.test(name))
+    .sort());
+
+  test('every viz widget the namespace exposes has a test of its own', async (t) => {
+    await t.expect(await vizWidgetsExposed()).eql([...WIDGETS_UNDER_TEST].sort());
+  });
+
+  const HANDED_OUT_BG = '#160703';
+  const FLUENT_NEXT_THEMES = [
+    'fluent-next.blue.light', 'fluent-next.blue.light.compact',
+    'fluent-next.blue.dark', 'fluent-next.blue.dark.compact',
+  ];
+  const EXTENSION_MODES = ['blend', 'alternate', 'extrapolate'];
+  const FINAL_COLOR = /^(#[0-9a-f]{6}|rgba\()/;
+
+  const declareTheNames = async (): Promise<void> => {
+    await declareTheNamesTheWidgetsRead(DECLARED_BLUE, DECLARED_BG);
+  };
+
+  const colorsHandedOutByTheNamespace = ClientFunction(() => {
+    const { viz } = (window as any).DevExpress;
+    const theme = viz.getTheme('fluent-next.blue.light');
+
+    return {
+      simpleSet: viz.getPalette('Fluent Next').simpleSet[0],
+      gradientSet: viz.getPalette('Fluent Next').gradientSet[0],
+      generated: viz.generateColors('Fluent Next', 6)[0],
+      marker: theme.map['layer:marker:dot'].color,
+      bullet: theme.bullet.color,
+      rangebar: theme.gauge.valueIndicators.rangebar.color,
+      background: theme.backgroundColor,
+      findTheme: viz.findTheme('fluent-next.blue.light').bullet.color,
+    };
+  });
+
+  const valuesLeftToTheBrowser = ClientFunction((names: string[]) => {
+    const { viz } = (window as any).DevExpress;
+    const leaves: string[] = [];
+    const walk = (value: unknown): void => {
+      if (typeof value === 'string') {
+        leaves.push(value);
+      } else if (value && typeof value === 'object') {
+        Object.values(value).forEach(walk);
+      }
+    };
+
+    names.forEach((name) => walk(viz.getTheme(name)));
+
+    return { leaves: leaves.length, left: leaves.filter((leaf) => /var\(|color-mix\(|from /.test(leaf)) };
+  });
+
+  const generatedPastThePalette = ClientFunction((mode: string) => (window as any).DevExpress.viz
+    .generateColors('Fluent Next', 20, { paletteExtensionMode: mode, useHighlight: true }) as string[]);
+
+  test('the palette and theme functions hand out the colour the page declared, not the name', async (t) => {
+    await t.expect(await colorsHandedOutByTheNamespace()).eql({
+      simpleSet: HANDED_OUT_BLUE,
+      gradientSet: HANDED_OUT_BLUE,
+      generated: HANDED_OUT_BLUE,
+      marker: HANDED_OUT_BLUE,
+      bullet: HANDED_OUT_BLUE,
+      rangebar: HANDED_OUT_BLUE,
+      background: HANDED_OUT_BG,
+      findTheme: HANDED_OUT_BLUE,
+    });
+  }).before(declareTheNames);
+
+  test('no fluent-next theme hands out a name, a mix or a relative colour', async (t) => {
+    const { leaves, left } = await valuesLeftToTheBrowser(FLUENT_NEXT_THEMES);
+
+    await t.expect(leaves).gt(FLUENT_NEXT_THEMES.length * 100, 'the walk reached the whole of every theme');
+    await t.expect(left).eql([], 'every value is one an application can use as it is');
+  }).before(declareTheNames);
+
+  test('generateColors extends the palette past its size into final colours only', async (t) => {
+    for (const mode of EXTENSION_MODES) {
+      const colors = await generatedPastThePalette(mode);
+
+      await t.expect(colors.length).eql(20, `${mode} hands out every colour asked for`);
+      await t.expect(colors.filter((color) => !FINAL_COLOR.test(color)))
+        .eql([], `${mode} hands out only colours an application can parse`);
+      await t.expect(new Set(colors).size).gt(6, `${mode} extends the palette with colours of its own`);
+    }
+  }).before(declareTheNames);
+
+  const CUSTOM_ACCENT = '#b02e0c';
+
+  const accentHandedOutByThePalette = ClientFunction((accent: string) => {
+    const { ui, viz } = (window as any).DevExpress;
+
+    ui.themes.customAccentColor(accent);
+
+    return viz.getPalette('Fluent Next').accentColor;
+  });
+
+  test('a custom accent is handed out as the colour it paints, not the relative colour it is derived with', async (t) => {
+    await t.expect(await accentHandedOutByThePalette(CUSTOM_ACCENT)).eql(CUSTOM_ACCENT);
+    await t.expect((await valuesLeftToTheBrowser(FLUENT_NEXT_THEMES)).left)
+      .eql([], 'no theme hands the accent out as a relative colour either');
+  });
+
+  const watchTheCallbacks = ClientFunction(() => {
+    (window as any).handedToTheCallbacks = {};
+  });
+
+  const colorsHandedToTheCallbacks = ClientFunction(() => (window as any).handedToTheCallbacks);
+
+  test('the legend and tooltip callbacks hand out the colour a widget paints, not the name', async (t) => {
+    await t.hover('#linear-gauge .dxg-tracker path');
+
+    await t.expect(colorsHandedToTheCallbacks()).eql({
+      seriesColor: HANDED_OUT_BLUE,
+      pointColor: HANDED_OUT_BLUE,
+      barColor: HANDED_OUT_BLUE,
+      groupColor: HANDED_OUT_BLUE,
+      indicatorColor: HANDED_OUT_BLUE,
+    });
+  }).before(async () => {
+    await declareTheNames();
+    await watchTheCallbacks();
+    await render('<div id="chart"></div><div id="pie"></div><div id="bar-gauge"></div><div id="map"></div><div id="linear-gauge"></div>');
+    await createWidget('dxChart', () => ({
+      dataSource: [{ a: 'x', v: 1 }],
+      series: [{ argumentField: 'a', valueField: 'v' }],
+      legend: {
+        customizeText(info) {
+          if (info.seriesIndex === 0) {
+            (window as any).handedToTheCallbacks.seriesColor = info.seriesColor;
+          }
+          return String(info.seriesName);
+        },
+      },
+      animation: { enabled: false },
+      size: { width: 220, height: 160 },
+    }), '#chart');
+    await createWidget('dxPieChart', () => ({
+      dataSource: [{ a: 'x', v: 1 }, { a: 'y', v: 2 }],
+      series: [{ argumentField: 'a', valueField: 'v' }],
+      legend: {
+        customizeText(info) {
+          if (info.pointIndex === 0) {
+            (window as any).handedToTheCallbacks.pointColor = info.pointColor;
+          }
+          return String(info.pointName);
+        },
+      },
+      animation: { enabled: false },
+      size: { width: 220, height: 160 },
+    }), '#pie');
+    await createWidget('dxBarGauge', () => ({
+      values: [30, 60],
+      legend: {
+        visible: true,
+        customizeText(info) {
+          if (info.item.index === 0) {
+            (window as any).handedToTheCallbacks.barColor = info.item.color;
+          }
+          return String(info.text);
+        },
+      },
+      animation: { enabled: false },
+      size: { width: 220, height: 160 },
+    }), '#bar-gauge');
+    await createWidget('dxVectorMap', () => ({
+      layers: [{
+        name: 'markers',
+        type: 'marker',
+        elementType: 'bubble',
+        dataField: 'value',
+        colorGroupingField: 'value',
+        colorGroups: [0, 5, 10],
+        dataSource: {
+          type: 'FeatureCollection',
+          features: [
+            { type: 'Feature', geometry: { type: 'Point', coordinates: [0, 0] }, properties: { value: 1 } },
+            { type: 'Feature', geometry: { type: 'Point', coordinates: [20, 20] }, properties: { value: 8 } },
+          ],
+        },
+      }],
+      legends: [{
+        source: { layer: 'markers', grouping: 'color' },
+        customizeText(info) {
+          if (info.index === 0) {
+            (window as any).handedToTheCallbacks.groupColor = info.color;
+          }
+          return String(info.index);
+        },
+      }],
+      size: { width: 220, height: 160 },
+    }), '#map');
+    await createWidget('dxLinearGauge', () => ({
+      value: 40,
+      valueIndicator: { type: 'rangeBar' },
+      tooltip: {
+        enabled: true,
+        customizeTooltip(info) {
+          (window as any).handedToTheCallbacks.indicatorColor = info.color;
+          return { text: String(info.valueText) };
+        },
+      },
+      animation: { enabled: false },
+      size: { width: 220, height: 160 },
+    }), '#linear-gauge');
+  });
+
+  test('a chart exported from a mode scope keeps the background of the scope', async (t) => {
+    const { painted } = await exportedFrom('#scoped-chart', 'dxChart', 'svg', 'data-backgroundcolor');
+
+    await t.expect(painted)
+      .eql(await valueAt('#scoped-chart', '--dx-viz-bg'), 'the markup carries the background the chart is painted on');
+    await t.expect(painted)
+      .notEql(await valueAt('html', '--dx-viz-bg'), 'not the background of the page around the scope');
+  }).before(async () => {
+    await render(`<div class="dx-theme-mode-${oppositeMode}"><div id="scoped-chart"></div></div>`);
+    await createWidget('dxChart', CHART, '#scoped-chart');
+  });
+
+  const gradientStopsExportedToTheCanvas = ClientFunction(() => new Promise<{
+    stops: string[];
+    stopColorAttribute: string;
+    failure: string;
+  }>((resolve) => {
+    const { widget } = (window as any);
+    const nativeAddColorStop = CanvasGradient.prototype.addColorStop;
+    const stops: string[] = [];
+    const stopColorAttribute = document.querySelector('#container stop')?.getAttribute('stop-color') ?? '';
+    let settled = false;
+
+    const settle = (failure = ''): void => {
+      if (settled) {
+        return;
+      }
+
+      settled = true;
+      CanvasGradient.prototype.addColorStop = nativeAddColorStop;
+      resolve({ stops, stopColorAttribute, failure });
+    };
+
+    CanvasGradient.prototype.addColorStop = function watchedAddColorStop(offset, color) {
+      stops.push(String(color));
+
+      try {
+        nativeAddColorStop.call(this, offset, color);
+      } catch (error) {
+        settle(String(error));
+        throw error;
+      }
+    };
+
+    widget.on('fileSaving', (e: { cancel: boolean }) => {
+      e.cancel = true;
+      settle();
+    });
+
+    try {
+      widget.exportTo('probe', 'PNG');
+    } catch (error) {
+      settle(String(error));
+    }
+  }));
+
+  test('exportTo hands a gradient stop the colour the name resolved to', async (t) => {
+    const { stops, stopColorAttribute, failure } = await gradientStopsExportedToTheCanvas();
+
+    await t.expect(stopColorAttribute).eql('var(--dx-viz-blue, #0078d4)', 'the widget writes the name into the attribute, so the exporter is the one that has to resolve it');
+    await t.expect(failure).eql('', 'the export reaches onFileSaving instead of failing in addColorStop');
+    await t.expect(stops.filter((stop) => stop.includes('var('))).eql([], 'no stop reaches the canvas as a reference');
+    await t.expect(stops[0]).eql(DECLARED_BLUE, 'the first stop carries what the page declared, neither the name nor the literal beside it');
+  }).before(async () => {
+    await declareTheNamesTheWidgetsRead(DECLARED_BLUE, DECLARED_BG);
+    await createWidget('dxSankey', {
+      dataSource: [{ source: 'A', target: 'X', weight: 1 }],
+      link: { colorMode: 'gradient' },
+      animation: { enabled: false },
+      size: { width: 220, height: 160 },
+    });
+  });
+
+  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');
+    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) {
+      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>
+    `);
+
+    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');
+
+    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');
+  });
+
+  const TOOLTIP = '.dxc-tooltip';
+  const CLOUD = `${TOOLTIP} path`;
+  const TALLEST_BAR = Selector('#chart .dxc-series rect').filter((bar) => {
+    const heights = Array.from(document.querySelectorAll('#chart .dxc-series rect'))
+      .map((rect) => rect.getBoundingClientRect().height);
+
+    return bar.getBoundingClientRect().height === Math.max(...heights);
+  });
+
+  const chartWithTooltipInTheOtherMode = async (): Promise<void> => {
+    await render(`<div id="scope" class="dx-theme-mode-${oppositeMode}"><div id="chart"></div></div>`);
+    await createWidget('dxChart', { ...CHART, tooltip: { enabled: true } }, '#chart');
+  };
+
+  const colorOfTheNameIn = ClientFunction((selector: string, name: string) => {
+    const probe = document.createElement('div');
+
+    probe.style.color = `var(${name})`;
+    document.querySelector(selector)?.appendChild(probe);
+
+    const { color } = window.getComputedStyle(probe);
+
+    probe.remove();
+
+    return color;
+  });
+
+  const cloudPlacement = ClientFunction(() => {
+    const cloud = document.querySelector('.dxc-tooltip path');
+    const box = cloud?.getBoundingClientRect();
+
+    return {
+      left: box?.left,
+      top: box?.top,
+      width: box?.width,
+      height: box?.height,
+      outline: cloud?.getAttribute('d'),
+    };
+  });
+
+  const putTheTooltipInBody = ClientFunction(() => {
+    (window as any).widget.option('tooltip.container', 'body');
+  });
+
+  test('a chart tooltip is painted in the mode of the scope its chart is in', async (t) => {
+    await t.hover(TALLEST_BAR);
+
+    await t.expect(Selector(CLOUD).exists).ok('the tooltip is drawn');
+
+    const painted = await valueAt(CLOUD, 'fill');
+
+    await t.expect(painted)
+      .eql(await colorOfTheNameIn('#scope', '--dx-viz-tooltip-bg'), 'the cloud takes --dx-viz-tooltip-bg from the scope of its chart');
+    await t.expect(painted)
+      .notEql(await colorOfTheNameIn('#container', '--dx-viz-tooltip-bg'), 'not from the page around the scope');
+    await t.expect(Selector(TOOLTIP).parent(`.dx-theme-mode-${oppositeMode}`).exists)
+      .ok('the tooltip is attached inside a scope of that mode');
+  }).before(chartWithTooltipInTheOtherMode);
+
+  test('a chart tooltip in a mode scope lands where the same tooltip lands in body', async (t) => {
+    await t.hover(TALLEST_BAR);
+
+    await t.expect(Selector(CLOUD).exists).ok('the tooltip is drawn');
+
+    const inTheScope = await cloudPlacement();
+
+    await putTheTooltipInBody();
+    await t.hover('html', { offsetX: 1, offsetY: 1 }).hover(TALLEST_BAR);
+
+    await t.expect(Selector(`body > ${CLOUD}`).exists).ok('the same tooltip, now drawn in body');
+    await t.expect(await cloudPlacement())
+      .eql(inTheScope, 'the scope neither moves the cloud nor turns its arrow');
+  }).before(chartWithTooltipInTheOtherMode);
+
+  test('an open overlay follows its scope once the application says the mode changed', 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 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');
+  });
+
+  const twoChartsInTwoModes = async (): Promise<void> => {
+    await render(`
+      <div class="dx-theme-mode-light"><div id="light-chart"></div></div>
+      <div class="dx-theme-mode-dark"><div id="dark-chart"></div></div>
+    `);
+
+    await createWidget('dxChart', CHART, '#light-chart');
+    await createWidget('dxChart', CHART, '#dark-chart');
+  };
+
+  test('a chart takes its chrome from the scope and its data from the palette', async (t) => {
+    await t.expect(await valueAt('#light-chart .dxc-arg-elements text', 'fill'))
+      .notEql(await valueAt('#dark-chart .dxc-arg-elements text', 'fill'), 'the axis reads against the surface under it');
+    await t.expect(await valueAt('#light-chart .dxc-val-grid path', 'stroke'))
+      .notEql(await valueAt('#dark-chart .dxc-val-grid path', 'stroke'), 'and so does the grid');
+    await t.expect(await valueAt('#light-chart .dxc-series rect', 'fill'))
+      .eql(await valueAt('#dark-chart .dxc-series rect', 'fill'), 'a blue series stays the same blue in both modes');
+  }).before(twoChartsInTwoModes);
+
+  test('a chart repaints the moment a published name changes, with nothing asked of the widget', async (t) => {
+    const asPainted = await valueAt('#chart .dxc-series rect', 'fill');
+
+    await writeRootProperty('--dx-viz-blue', 'rgb(1, 2, 3)');
+
+    const asWritten = await valueAt('#chart .dxc-series rect', 'fill');
+
+    await writeRootProperty('--dx-viz-blue', '');
+
+    const asRestored = await valueAt('#chart .dxc-series rect', 'fill');
+
+    await t.expect(asWritten).eql('rgb(1, 2, 3)', 'the cascade repainted the series, no call was made');
+    await t.expect(asWritten).notEql(asPainted);
+    await t.expect(asRestored).eql(asPainted, 'and the theme is back once the page stops writing it');
+  }).before(async () => {
+    await render('<div id="chart"></div>');
+    await createWidget('dxChart', CHART, '#chart');
+  });
+
+  test('a chart exports the colors it was painted in, not the ones written beside them', async (t) => {
+    const light = await exportedChartFrom('#light-chart');
+    const dark = await exportedChartFrom('#dark-chart');
+
+    await t.expect(light.references).eql(0, 'nothing resolves a reference once the markup is out of the document');
+    await t.expect(dark.references).eql(0);
+    await t.expect(light.painted).notEql('', 'the exported text carries the colour it was painted with');
+    await t.expect(dark.painted).notEql(light.painted, 'each chart exports in the mode of its own scope');
+  }).before(twoChartsInTwoModes);
+
+  test('a map exports the halo behind its labels, not the name the halo was written with', async (t) => {
+    const light = await exportedHaloFrom('#light-map');
+    const dark = await exportedHaloFrom('#dark-map');
+
+    await t.expect(light.references).eql(0, 'a stroke written outside the attribute path resolves too');
+    await t.expect(dark.references).eql(0);
+    await t.expect(light.painted).notEql('', 'the exported halo carries the colour it was painted with');
+    await t.expect(dark.painted).notEql(light.painted, 'each map exports in the mode of its own scope');
+  }).before(async () => {
+    await render(`
+      <div class="dx-theme-mode-light"><div id="light-map"></div></div>
+      <div class="dx-theme-mode-dark"><div id="dark-map"></div></div>
+    `);
+
+    await createWidget('dxVectorMap', MAP_WITH_LABELLED_MARKERS, '#light-map');
+    await createWidget('dxVectorMap', MAP_WITH_LABELLED_MARKERS, '#dark-map');
+  });
+
+  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');
+
+    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..96f959ff7d4d
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..df4d9b0cf4c2
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..695f5487304d
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/common/vizNamedColors.ts b/e2e/testcafe-devextreme/tests/common/vizNamedColors.ts
new file mode 100644
index 000000000000..fb6956554ad0
--- /dev/null
+++ b/e2e/testcafe-devextreme/tests/common/vizNamedColors.ts
@@ -0,0 +1,345 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import { ClientFunction, Selector } from 'testcafe';
+import { createWidget } from '../../helpers/createWidget';
+import { dragWithDisabledMouseUp } from '../../helpers/mouseUpEvents';
+import url from '../../helpers/getPageUrl';
+import { clearTestPage } from '../../helpers/testPageUtils';
+import { getThemeName, testScreenshot } from '../../helpers/themeUtils';
+
+if (getThemeName() === 'fluent-next') {
+  fixture`Viz named colors`
+    .page(url(__dirname, '../container.html'))
+    .afterEach(async (t) => { await clearTestPage(t); });
+
+  const SPARKLINE_DATA = [5.1, 6.8, 4.2, 7.6, 5.5, 3.1, 6.2, 4.8, 8.4, 5.9]
+    .map((val, index) => ({ arg: String(index + 1), val }));
+
+  const CANDLE_DATA = [
+    {
+      arg: 1, open: 5, high: 7.2, low: 4.4, close: 6.6,
+    },
+    {
+      arg: 2, open: 6.6, high: 7, low: 4.8, close: 5.1,
+    },
+    {
+      arg: 3, open: 5.1, high: 6.4, low: 4.6, close: 6.2,
+    },
+    {
+      arg: 4, open: 6.2, high: 6.8, low: 4.2, close: 4.5,
+    },
+    {
+      arg: 5, open: 4.5, high: 6.6, low: 4.1, close: 6.3,
+    },
+  ];
+
+  const TILE_DATA = [
+    { name: 'a', value: 9 }, { name: 'b', value: 5 }, { name: 'c', value: 4 },
+    { name: 'd', value: 3 }, { name: 'e', value: 2 }, { name: 'f', value: 2 },
+  ];
+
+  const AREAS = {
+    type: 'FeatureCollection',
+    features: [
+      { type: 'Feature', properties: { name: 'a' }, geometry: { type: 'Polygon', coordinates: [[[0, 0], [40, 0], [40, 30], [0, 30], [0, 0]]] } },
+      { type: 'Feature', properties: { name: 'b' }, geometry: { type: 'Polygon', coordinates: [[[45, 0], [90, 0], [90, 30], [45, 30], [45, 0]]] } },
+      { type: 'Feature', properties: { name: 'c' }, geometry: { type: 'Polygon', coordinates: [[[0, 35], [90, 35], [90, 60], [0, 60], [0, 35]]] } },
+    ],
+  };
+
+  const LINES = {
+    type: 'FeatureCollection',
+    features: [
+      { type: 'Feature', properties: { name: 'l1' }, geometry: { type: 'LineString', coordinates: [[0, 0], [30, 25], [60, 5], [90, 30]] } },
+      { type: 'Feature', properties: { name: 'l2' }, geometry: { type: 'LineString', coordinates: [[0, 40], [30, 20], [60, 45], [90, 15]] } },
+    ],
+  };
+
+  const HIDDEN_AXIS = {
+    visible: false,
+    grid: { visible: false },
+    tick: { visible: false },
+    label: { visible: false },
+  };
+
+  const drawScopes = ClientFunction((width: number, height: number) => {
+    const container = document.querySelector('#container') as HTMLElement;
+
+    container.style.display = 'flex';
+    container.style.gap = '8px';
+    container.style.width = 'max-content';
+    container.innerHTML = ['light', 'dark'].map((mode) => `
+      <div class="dx-theme-mode-${mode}" style="
+        background: var(--dx-viz-bg);
+        color: var(--dx-viz-content);
+        font: 12px 'Segoe UI', sans-serif;
+        padding: 8px;
+      ">
+        <div style="padding-bottom: 6px">${mode} scope</div>
+        <div id="${mode}" style="width: ${width}px; height: ${height}px"></div>
+      </div>`).join('');
+  });
+
+  const drawScope = ClientFunction((mode: string, width: number, height: number) => {
+    const container = document.querySelector('#container') as HTMLElement;
+
+    container.style.display = 'flex';
+    container.style.width = 'max-content';
+    container.innerHTML = `
+      <div class="dx-theme-mode-${mode}" style="
+        background: var(--dx-viz-bg);
+        color: var(--dx-viz-content);
+        font: 12px 'Segoe UI', sans-serif;
+        padding: 8px;
+      ">
+        <div style="padding-bottom: 6px">${mode} scope</div>
+        <div id="${mode}" style="width: ${width}px; height: ${height}px"></div>
+      </div>`;
+  });
+
+  const inBothScopes = async (
+    widget: 'dxSparkline' | 'dxBullet' | 'dxChart' | 'dxTreeMap' | 'dxBarGauge' | 'dxCircularGauge'
+    | 'dxSankey' | 'dxVectorMap',
+    options: unknown,
+    size: { width: number; height: number },
+  ): Promise<void> => {
+    await drawScopes(size.width, size.height);
+    await createWidget(widget, options, '#light');
+    await createWidget(widget, options, '#dark');
+  };
+
+  const shoot = async (t: TestController, name: string): Promise<void> => {
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+    await testScreenshot(t, takeScreenshot, `${name}.png`, { element: '#container' });
+
+    await t
+      .expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  };
+
+  test('the sparkline line and its first and last point take the published blue', async (t) => {
+    await inBothScopes('dxSparkline', {
+      dataSource: SPARKLINE_DATA,
+      tooltip: { enabled: false },
+    }, { width: 240, height: 60 });
+
+    await shoot(t, 'Viz sparkline line');
+  });
+
+  test('the lowest and the highest point of a sparkline take the published yellow and red', async (t) => {
+    await inBothScopes('dxSparkline', {
+      dataSource: SPARKLINE_DATA,
+      showMinMax: true,
+      pointSize: 8,
+      tooltip: { enabled: false },
+    }, { width: 240, height: 60 });
+
+    await shoot(t, 'Viz sparkline extremes');
+  });
+
+  test('a win and a loss stay grey, from the published pair', async (t) => {
+    await inBothScopes('dxSparkline', {
+      dataSource: [6, 7, 3, 6.5, 2, 4, 8, 6.2, 3.4, 7]
+        .map((val, index) => ({ arg: String(index + 1), val })),
+      type: 'winloss',
+      winlossThreshold: 5,
+      tooltip: { enabled: false },
+    }, { width: 240, height: 60 });
+
+    await shoot(t, 'Viz sparkline winloss');
+  });
+
+  test('a falling candlestick takes the published red', async (t) => {
+    await inBothScopes('dxChart', {
+      dataSource: CANDLE_DATA,
+      series: [{
+        type: 'candlestick',
+        argumentField: 'arg',
+        openValueField: 'open',
+        highValueField: 'high',
+        lowValueField: 'low',
+        closeValueField: 'close',
+      }],
+      legend: { visible: false },
+      animation: { enabled: false },
+      argumentAxis: HIDDEN_AXIS,
+      valueAxis: HIDDEN_AXIS,
+      tooltip: { enabled: false },
+    }, { width: 240, height: 140 });
+
+    await shoot(t, 'Viz candlestick reduction');
+  });
+
+  test('the bullet target takes the published content colour', async (t) => {
+    await inBothScopes('dxBullet', {
+      value: 68,
+      target: 82,
+      startScaleValue: 0,
+      endScaleValue: 100,
+      tooltip: { enabled: false },
+    }, { width: 240, height: 40 });
+
+    await shoot(t, 'Viz bullet target');
+  });
+
+  test('the bar gauge shelf is lifted off the surface', async (t) => {
+    await inBothScopes('dxBarGauge', {
+      startValue: 0,
+      endValue: 100,
+      values: [72, 54, 38],
+      label: { visible: false },
+      legend: { visible: false },
+      animation: { enabled: false },
+      tooltip: { enabled: false },
+    }, { width: 240, height: 130 });
+
+    await shoot(t, 'Viz bar gauge shelf');
+  });
+
+  test('a gauge range container takes the published indicating set', async (t) => {
+    await inBothScopes('dxCircularGauge', {
+      scale: { startValue: 0, endValue: 100, label: { visible: false } },
+      value: 62,
+      rangeContainer: {
+        width: 14,
+        ranges: [
+          { startValue: 0, endValue: 40 },
+          { startValue: 40, endValue: 70 },
+          { startValue: 70, endValue: 100 },
+        ],
+      },
+      animation: { enabled: false },
+      tooltip: { enabled: false },
+    }, { width: 240, height: 150 });
+
+    await shoot(t, 'Viz gauge indicating set');
+  });
+
+  test('the axis, its labels and its title, and the legend read a step quieter', async (t) => {
+    await inBothScopes('dxChart', {
+      dataSource: [4, 7, 5, 9].map((val, index) => ({ arg: index + 1, val })),
+      series: [{
+        type: 'line', argumentField: 'arg', valueField: 'val', name: 'Series',
+      }],
+      title: { text: 'Title', subtitle: { text: 'Subtitle' } },
+      valueAxis: { title: 'Value' },
+      animation: { enabled: false },
+      tooltip: { enabled: false },
+    }, { width: 240, height: 260 });
+
+    await shoot(t, 'Viz axis and legend');
+  });
+
+  test('a tree map tile with no palette colour takes the published blue', async (t) => {
+    await inBothScopes('dxTreeMap', {
+      dataSource: TILE_DATA,
+      valueField: 'value',
+      colorizer: { type: 'none' },
+      tile: { label: { visible: false } },
+      tooltip: { enabled: false },
+    }, { width: 240, height: 120 });
+
+    await shoot(t, 'Viz tree map tile fill');
+  });
+
+  test('a map area takes the published quiet grey', async (t) => {
+    await inBothScopes('dxVectorMap', {
+      layers: [{ dataSource: AREAS, type: 'area' }],
+      bounds: [-4, 64, 94, -4],
+      panningEnabled: false,
+      zoomingEnabled: false,
+      controlBar: { enabled: false },
+      tooltip: { enabled: false },
+    }, { width: 240, height: 130 });
+
+    await shoot(t, 'Viz map area');
+  });
+
+  test('a map line takes the published orange', async (t) => {
+    await inBothScopes('dxVectorMap', {
+      layers: [{ dataSource: LINES, type: 'line' }],
+      bounds: [-4, 49, 94, -4],
+      panningEnabled: false,
+      zoomingEnabled: false,
+      controlBar: { enabled: false },
+      tooltip: { enabled: false },
+    }, { width: 240, height: 130 });
+
+    await shoot(t, 'Viz map line');
+  });
+
+  test('a sankey link takes the published grey', async (t) => {
+    await inBothScopes('dxSankey', {
+      dataSource: [
+        { source: 'A', target: 'X', weight: 4 },
+        { source: 'A', target: 'Y', weight: 2 },
+        { source: 'B', target: 'Y', weight: 3 },
+      ],
+      label: { visible: false },
+      tooltip: { enabled: false },
+    }, { width: 240, height: 130 });
+
+    await shoot(t, 'Viz sankey link');
+  });
+
+  test('the two-colour needle and the subvalue marker take the published names', async (t) => {
+    await inBothScopes('dxCircularGauge', {
+      scale: { startValue: 0, endValue: 100, label: { visible: false } },
+      value: 62,
+      subvalues: [24],
+      valueIndicator: { type: 'twocolorneedle' },
+      animation: { enabled: false },
+      tooltip: { enabled: false },
+    }, { width: 240, height: 150 });
+
+    await shoot(t, 'Viz gauge indicators');
+  });
+
+  ['light', 'dark'].forEach((mode) => {
+    test(`the crosshair is drawn with its own published name: ${mode}`, async (t) => {
+      await drawScope(mode, 240, 140);
+      await createWidget('dxChart', {
+        dataSource: [4, 7, 5, 9].map((val, index) => ({ arg: index + 1, val })),
+        series: [{ type: 'line', argumentField: 'arg', valueField: 'val' }],
+        legend: { visible: false },
+        animation: { enabled: false },
+        crosshair: { enabled: true },
+        tooltip: { enabled: false },
+      }, `#${mode}`);
+
+      await dragWithDisabledMouseUp(t, Selector(`#${mode}`), { offsetX: 30, offsetY: 0 });
+
+      await shoot(t, `Viz chart crosshair ${mode}`);
+    });
+  });
+
+  ['light', 'dark'].forEach((mode) => {
+    test(`a range that is not allowed marks the slider with the published danger: ${mode}`, async (t) => {
+      await drawScope(mode, 400, 90);
+      await createWidget('dxRangeSelector', {
+        scale: {
+          startValue: 0, endValue: 100, tickInterval: 25, minRange: 30,
+        },
+        value: [20, 70],
+        animation: { enabled: false },
+      }, `#${mode}`);
+
+      await dragWithDisabledMouseUp(t, Selector('#container .slider-tracker'), { offsetX: 130, offsetY: 0 });
+
+      await shoot(t, `Viz range selector invalid ${mode}`);
+    });
+  });
+
+  test('the hairline between tree map tiles stays the same colour in both scopes', async (t) => {
+    await inBothScopes('dxTreeMap', {
+      dataSource: TILE_DATA,
+      valueField: 'value',
+      colorizer: { type: 'gradient', range: [0, 9] },
+      tile: { label: { visible: false } },
+      interactWithGroup: false,
+      tooltip: { enabled: false },
+    }, { width: 240, height: 120 });
+
+    await shoot(t, 'Viz tree map tile border');
+  });
+}
diff --git a/e2e/testcafe-devextreme/tests/common/vizPalettes.ts b/e2e/testcafe-devextreme/tests/common/vizPalettes.ts
new file mode 100644
index 000000000000..f4e1cdaa99a3
--- /dev/null
+++ b/e2e/testcafe-devextreme/tests/common/vizPalettes.ts
@@ -0,0 +1,95 @@
+import { ClientFunction } from 'testcafe';
+import url from '../../helpers/getPageUrl';
+import { createWidget } from '../../helpers/createWidget';
+import { clearTestPage } from '../../helpers/testPageUtils';
+import { getThemeName } from '../../helpers/themeUtils';
+
+if (getThemeName() === 'fluent-next') {
+  fixture`Viz palettes`
+    .page(url(__dirname, '../container.html'))
+    .afterEach(async (t) => { await clearTestPage(t); });
+
+  const COUNT = 50;
+  const ROUNDING_APART = 2;
+  const LITERALS = ['#0078d4', '#c83d3d', '#008f04', '#eaa300', '#e43ba6', '#865cbf'];
+
+  const distancesOver = ClientFunction((
+    extensionMode: string,
+    count: number,
+    literals: string[],
+  ) => {
+    const { viz } = (window as any).DevExpress;
+
+    viz.registerPalette('legacy literals', {
+      simpleSet: literals,
+      indicatingSet: [literals[2], literals[3], literals[1]],
+      gradientSet: [literals[0], literals[2]],
+      accentColor: '#0f6cbd',
+    });
+
+    const channelsOf = (color: string): number[] => {
+      const probe = document.createElement('div');
+
+      probe.style.cssText = 'position: absolute; visibility: hidden';
+      probe.style.backgroundColor = color;
+      document.body.appendChild(probe);
+
+      const painted = getComputedStyle(probe).backgroundColor;
+
+      probe.remove();
+
+      const scale = painted.startsWith('color(') ? 255 : 1;
+
+      return (painted.match(/-?[\d.]+/g) ?? []).slice(0, 3)
+        .map((channel) => Math.round(Math.min(255, Math.max(0, Number(channel) * scale))));
+    };
+
+    const generated = (palette: string): string[] => viz
+      .generateColors(palette, count, { paletteExtensionMode: extensionMode, useHighlight: true });
+
+    const fromNames = generated('Fluent Next').map(channelsOf);
+    const fromLiterals = generated('legacy literals').map(channelsOf);
+
+    return fromNames.map((channels: number[], index: number) => Math.max(
+      ...channels.map((channel, at) => Math.abs(channel - fromLiterals[index][at])),
+    ));
+  });
+
+  const handedOut = ClientFunction(() => {
+    const series = (window as any).widget.getAllSeries();
+
+    return [
+      ...series.map((one: { getColor: () => string }) => one.getColor()),
+      ...series[0].getAllPoints().map((point: { getColor: () => string }) => point.getColor()),
+    ];
+  });
+
+  test('a chart hands out colours an application can draw with, not references', async (t) => {
+    const handed = await handedOut();
+    const unusable = handed.filter((color) => !/^(#[0-9a-f]{6}|rgba?\()/i.test(color));
+
+    await t.expect(handed.length).gt(0, 'the chart answered with colours');
+    await t.expect(unusable).eql([], 'every colour is one an application can parse');
+  }).before(async () => {
+    await createWidget('dxChart', {
+      dataSource: [{ arg: 'a', val: 1 }, { arg: 'b', val: 2 }],
+      series: [{ type: 'bar' }, { type: 'bar' }],
+      animation: { enabled: false },
+      size: { width: 300, height: 200 },
+    });
+  });
+
+  ['blend', 'alternate', 'extrapolate'].forEach((extensionMode) => {
+    test(`the browser mixes ${extensionMode} into the same colors the old arithmetic did`, async (t) => {
+      const distances = await distancesOver(extensionMode, COUNT, LITERALS);
+      const furthest = Math.max(...distances);
+      const drifted = distances.filter((distance) => distance > ROUNDING_APART).length;
+
+      await t.expect(distances.length).eql(COUNT, 'every colour of the run was compared');
+      await t.expect(drifted).eql(
+        0,
+        `${drifted} of ${COUNT} colours differ by more than ${ROUNDING_APART} of 255, the furthest by ${furthest}`,
+      );
+    });
+  });
+}
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/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/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..655eb5047860
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..cd094e558309
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..b3254b790132
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..4685dace70c4
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..c9f92375f6e5
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..977419845179
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..5a7a93d88b06
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..4c686ad69d27
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..2c223b9d1525
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..1871a26f16c1
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..ea6f951fbb38
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..b75d7437d105
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..791799e0cd1b
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..8369a7253420
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..3e330cc3574d
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..8369a7253420
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..3e330cc3574d
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..b9353f5fffe1
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..3d4990147641
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..056591cfdb82
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..02ac7b1b60b8
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..645d9d4423c6
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..fed67fbf5088
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..ad7287c814b7
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..a81836412401
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..70cecb821020
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..cff1b63f5284
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..7b5e18db963e
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..8aad5a972960
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..b0305d6f602b
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..8d1f8226fe7a
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..4ad0dcd2b32c
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..599101e21d56
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..0df6b43164de
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..46be475ed900
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..07a51b4a0e97
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..fea94ee8d121
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..37b0e050e1ef
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..8642d6206853
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..fb5645682a53
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..274af8ab9c6a
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..a0106977309b
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..fe420b3c2ac0
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..0179fa5cd2ff
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..ab4056684431
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..91b60b00911e
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..fd7067369983
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..4f7099233143
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..bf52c7c072bc
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..f6e016b52aa0
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..5092b8bdd93c
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..90f8b3868b4b
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..12106883b2d4
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..616136155966
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..0e65bb6cc46a
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..62f1ab01f814
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..d1fd9451b308
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..21f9ad7b6968
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..aa0836dfff66
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..bdda128743a1
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..15bf393e50b2
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..b327fc6155ba
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..593ebd16aa1e
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..691cab661207
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..ce6ce41dbd8d
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..88a753b97004
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..50eeae1f0e5e
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..5a3d3137314b
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..e84355e34a9c
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..963f1e32c7d0
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..01b9a65e9cec
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..b1943f06bc76
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..a17e3e5f4763
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..e21e6b33e781
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..235cce411cee
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..9058d4cabbc1
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..acbd2b359a31
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..e7f0dc7d344b
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..e7f0dc7d344b
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..d0d50be12543
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..e99e35d4f944
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..a9cb03a46bab
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..f9b527aa325c
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..34b7de27a36f
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..16daea34328b
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..3c11ee9edab3
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..31f4b9d3cd25
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..d00e7c186c00
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..2b2df6238b26
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..44e6cdd593d1
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..8ac394ff018a
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..3f992f8d65c8
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..1e3f9980790c
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..2315b30a69bd
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..1fd6c52c652e
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..34ea21d3405a
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..88108c92a532
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..0da0fcd8f72c
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..98d4f79d717d
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..b4135f896dc9
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..91b55fbb7db4
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..2716d4bbebf7
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..54bba8ac567b
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..54bba8ac567b
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..85de816c83d6
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..bc9ee5cc1c38
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..186500fd78fb
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..5ec428aa1598
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..8fb07b830e74
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..4b4421e8d1bb
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..1fe0eee58c63
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..bfdafe51f63d
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..2ef8cae69239
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..3d39c062a9c8
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..cde1363b0f8b
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..111524cc1f48
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..93feaf91e540
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..b477e90f913c
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..78f9918bad13
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..86d134cb749d
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..7aa918b3778e
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..d5bbd7d3d896
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..80a9f1b6a5fc
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..0825525b1b19
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..d0000aae3074
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..609df0bd696e
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..cead93b8abfe
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..9c91264052d4
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..7f9de70d85f6
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..d68a515c7b10
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..ab0cf4709c30
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..320f9519f6b4
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..837bd86c5e88
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..f70ee2e2fe7c
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..c2dafd6ffbf4
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..73ef05df946b
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..1b51c83994fb
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..54e6b9e0d228
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..4c114698230c
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..2737b767e160
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..d2ad18abc1eb
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..c82ecf48e178
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..d2ad18abc1eb
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..a174430ee37a
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..bc7762258481
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..d7686ef2ef0d
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..3ee6a891500d
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..01383fffbac8
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..cf1eddea070a
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..f2603cab351a
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..56beeffda564
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..d3f1117b5d42
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..23902e8080b3
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..5e1ed7e4b878
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..6682e2f6bca3
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..998dd7fd5d62
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..a3f544e88aa2
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..3abe440b7aec
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..c894f4a7697b
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..770f8e6fb09f
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..55e3b06d44a7
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..6fefca459aef
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..bb9333ae34f1
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..08f31f25dc78
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..564d5f597d5c
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..f8e63c54bcf9
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..d1053c07395f
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..c628fc8f1d82
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..93f959474f61
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..b031befd6d6e
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..d41cb4758ce5
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..caff333611c4
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..37b54bea0fd7
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..3c625be2de04
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..1a9a6fae923d
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..5537c4a149b8
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..8fce1ac05f12
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..b9a1c2fc1cf1
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..d514c436c105
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..f1d46b3c8e55
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..b5f164a42963
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..1b1dc7e1491a
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..22d5bb8609e0
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..58cd84392b6c
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..6295f0cecb9a
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..e1999ca8264c
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..2244a94f67fd
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..e3d899e3f56d
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..3f5f151326ed
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..7acab0d582b0
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..7ae7ad98ab1e
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..510ba29dcd8f
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..7ff01a1c7767
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..e030f95a83b9
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..86ba7158cca8
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..c0d6d4ee604c
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..135eb08205b7
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..dd723817ec50
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..4901d6364865
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..e25480287b3f
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..b3db7872a130
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..18cb6b371763
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..3f18e3289c91
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..280edd785253
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..07d711237846
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..ffae08dbf251
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..2babc6f934b9
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..629ea8ee94e9
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..b1eefe8c6b04
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..0984d2632a3b
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..3b800070d302
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..aed15f933b27
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..e06db847d0c3
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..35f6979aca86
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..d74488f2b116
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..e094060c0ca1
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..abedeb94ebbd
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..be0aa3ee3b38
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..398689e10aa5
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..21f801e11241
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..c59b56ac7ca8
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..759c1147b142
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..7bc3e1fc231c
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..2326fd3cb7b1
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..7c6b4094a21f
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..134cdb8e9fe6
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..9fcb95ffed91
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..af1324d11479
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..fc25a2068e15
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..64a9a8256401
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..0ab77456a393
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..70ce32082ab8
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..734111cddb10
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..7262a21d760b
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..f8a51f6b9dd8
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..810f7e73e447
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..4200598e0c83
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..45f14cd3bf1a
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..38445e0166af
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..a91f930b4e1c
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..3cd090dbd85c
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..7bf05e9b8df8
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..bb39d17ac4c6
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..e05886f6aa0d
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..3ad34ba11f40
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..6fe65d7a1a22
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..88629b978a10
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..cbd94f9fb1c2
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..e39490ccdef8
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..1857e70cee4a
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..da522f9cb398
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..6f834e7e6c09
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..4ceada93d87b
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..38049c0c660c
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..421749ba4256
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..e591c06e9acf
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..f5663239d11a
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..631e7aec4b8e
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..c2fc7730a4af
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..66dd22f56676
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..0f7985ae1c96
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..dcb346678a7b
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..e1cd58304932
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..032228d6e91f
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..d0720a7efc1e
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..61e5122ee3d3
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..be5e48092b4f
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..cacea26074e5
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..94e0e72ab804
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..cb6d7948f954
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..10c00fe1742b
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..41e32f571f93
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..ed399c425cfd
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..e3b3c43a4561
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..2b16f3ac5f26
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..7ae8d8c69a54
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..7a87b68607ee
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..4b3f1844dd3f
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..18a7c6ce3e06
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..d529b8e2781e
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..2a7c076d6c23
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..6a0574f36ed0
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..96e857ed1395
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..ff7c32df4c07
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..605b9e9c03d8
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..4d65084c95b4
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..7b56f490a9b8
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..a545751fd191
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..afc8c483c286
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..524aabba7345
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..c7035cc6d6b2
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..72e1aa5196f6
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..6fe2e4f35d51
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..e161c64902c6
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..cf157bcdf6bd
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..2142a0f49b90
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..f4464f39352f
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..f471e370e815
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..03b24619a799
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..ecb8c89da995
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..6833c7dee521
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..359787587191
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..78f237166c8d
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..793e4dd8a6c2
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..f8131d156a91
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..5ca8f1e9d593
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..d34333b540d1
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..20ad9b41712c
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..418fa4f95f49
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..72f0ce5cf8a9
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..a133a908b45f
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..c9679787cbba
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..af747209a73c
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..025025f1cfc6
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..39767b5342d0
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..42a8d6e8119d
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..5c02f9a546cf
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..beda654056cc
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..afdc3db08953
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..f9d8cb6cc3d6
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..4bd9a60dbf83
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..daa71b87428d
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..a91cfadaad91
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..41b01e30708a
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..a203978dd98e
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..b7c4c74a1670
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..b2a9b00ea67b
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..b5fd01afeaa7
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..c5b9b8e27ad6
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..d465c1765206
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..817e631b71d6
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..8d18c7c4cc48
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..5a2ebb4cedb6
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..bdb849a85f22
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..64ebed5d8643
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..ba37b05fccc8
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..50ce2abf896c
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..af4ed0a21c06
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..a1c49a9dd361
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..b9b5e043724b
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..a1896425eebc
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..335eee4d25fd
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..75101d57a7dc
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..9a9d665f906f
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..de8ef5ee9a59
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..631e7aec4b8e
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..0c41725b1186
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..66dd22f56676
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..f486fe3a4516
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..dcb346678a7b
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..5f534e202f88
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..032228d6e91f
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..04c50ec04a0f
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..f66bd9b6768f
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..9cf1c6522472
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..80f2588a3bdc
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..e0aa534818ad
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..27ce444f87ad
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..ef2a43547411
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..7f5cf32c6e03
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..34914a09e0ce
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..20f66ddd6ec9
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..b1697c38aa0e
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..0c98959cff77
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..6b24d9e90e11
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..fd1d8b49bb61
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..55e974fece05
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..55547438f175
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..1258e56ed217
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..d7453d31c8d0
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..f5cc04bbf077
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..03b4bb873e40
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..298fa5222915
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..55a62af638b5
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..49b9467df030
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..ae42d564391f
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..9ad4bfb248fa
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..e1356214164c
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..3c07efd07421
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..c2c0f19c9a26
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..1a7c53191d17
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..d6b8f90ee6d8
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..72602da20451
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..f1117eefdaf2
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..7b0795d8ca6b
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..90022ec5de35
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..856c353ab135
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..075c60fba47b
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..86964493008d
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..7c78cec6261b
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..f0663f8cb516
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..bd417f6d0632
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..2144100d3769
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..bbd514dd2b59
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..e76e74159040
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..15c905a09ece
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..57df6e3438a1
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..a41df4afc124
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..7e0bc8768496
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..be6d602b67c0
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..0fce64fe7f78
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..b38de6703865
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..ad172f6d9a6f
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..1bd668615c49
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..0286945a5bcf
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..ad198dc9218a
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..75c6151876ad
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..ff363b348c5e
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..0f82c160048c
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..1dcf0c38fd72
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..2952b541c7bc
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..4eaa78664606
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..0b3be49e06ef
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..82d84f9f5a24
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..b14bebf0184b
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..5636694d0774
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..6bf81bd89538
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..6784e0d228cf
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..9f8045b82bd3
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..ed835d721059
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..06a69bd66d1f
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..540335037376
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..c87bf9c1063b
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..de6b9bd5d62f
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..4b9619302b3a
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..ebc3faf85a4d
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..b806ef81e59b
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..3139e3500b7f
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..2e688128f0b1
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..dbae165a148a
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..54ea65ea63dd
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..77d9bc514703
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..49d84dba58f0
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..6bc43ee429a4
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..d8f876c03b5a
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..a8eca36841df
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..3d6258f57561
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..9265bc4a83f9
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..adc4c8076a93
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..e37d7c9930a9
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..f9a7da14ec09
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..90c698c38f03
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..79d6b7701d15
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..afa9c1a2609e
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..ec4fd0ca8372
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..c3a52e6726ae
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..84236b418669
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..aef2dc4037a8
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..402b726e096f
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..7c47b08bc8f0
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..99203585dfae
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..67f3acee41f0
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..961874b828b3
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..162122faba1a
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..50c3dba2e9de
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..184c4624589a
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..d230b40e5067
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..58498fec6aa5
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..71f6682c02ee
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..3cff4766ace7
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..ef91cb469b11
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..df648f301f0d
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..579a5f690ba4
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..ce02c97d3e87
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..8356bf325b31
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..487263aacea7
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..c881e3f28b0f
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..b470b60e4f9f
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..8d0841e91af2
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..eea34eb7ab9c
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..c0105580d9f0
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..7fce9c26d3db
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..ddaf4845ae1e
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..021b5337ccd8
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..b235aab8fa64
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..ea0e859943e1
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..b3c27123660d
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..3d2e981c0432
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..47bf766741df
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/Chat suggestions outside of a chat (fluent-next.blue.light).png b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Chat suggestions outside of a chat (fluent-next.blue.light).png
new file mode 100644
index 000000000000..20a0759fde79
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/editors/chat/etalons/Chat suggestions outside of a chat (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/chat/suggestions.ts b/e2e/testcafe-devextreme/tests/editors/chat/suggestions.ts
new file mode 100644
index 000000000000..1261cb610b7c
--- /dev/null
+++ b/e2e/testcafe-devextreme/tests/editors/chat/suggestions.ts
@@ -0,0 +1,48 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import { ClientFunction } from 'testcafe';
+import url from '../../../helpers/getPageUrl';
+import { createWidget } from '../../../helpers/createWidget';
+import { getThemeName, testScreenshot } from '../../../helpers/themeUtils';
+
+const CHAT_SUGGESTIONS_CLASS = 'dx-chat-suggestions';
+
+const render = ClientFunction((markup: string) => {
+  const container = document.querySelector('#container');
+
+  if (container) container.innerHTML = markup;
+});
+
+const createSuggestions = (selector: string) => createWidget('dxButtonGroup', {
+  items: [
+    { text: 'Summary' },
+    { text: 'Ideal Buyer' },
+    { text: 'Competitors' },
+  ],
+  stylingMode: 'outlined',
+  selectionMode: 'none',
+  elementAttr: { class: CHAT_SUGGESTIONS_CLASS },
+  width: 400,
+}, selector);
+
+if (getThemeName() === 'fluent-next') {
+  fixture.disablePageReloads`ChatSuggestions`.page(
+    url(__dirname, '../../container.html'),
+  );
+
+  test('Chat suggestions outside of a chat in light and dark modes', async (t) => {
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+    await testScreenshot(t, takeScreenshot, 'Chat suggestions outside of a chat.png', {
+      element: '#container',
+    });
+
+    await t.expect(compareResults.isValid()).ok(compareResults.errorMessages());
+  }).before(async () => {
+    await render(`
+      <div class="dx-theme-mode-light" style="background-color: var(--dxds-color-bg-canvas);"><div id="light"></div></div>
+      <div class="dx-theme-mode-dark" style="background-color: var(--dxds-color-bg-canvas);"><div id="dark"></div></div>
+    `);
+    await createSuggestions('#light');
+    await createSuggestions('#dark');
+  });
+}
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..8ef8a12382fc
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..8c36aed3e620
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..d232fd71250d
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..81668730386f
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..d4cb2beaeeb6
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..a770e2358835
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..cad5e2bc99f2
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..e81c47716f82
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..9731cead942b
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..6ef1b61f0a41
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..957fc9440b56
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..47a4ac0bdddc
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..3ea0b58f2567
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..9fb034b1bda4
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..2a06688eef18
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..31fc54f5f74f
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..e5bce48d4a29
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..39fee7b4feb5
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..34eb8facb153
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 26cf89030d31..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');
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..9bdf6db9d3f9
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..331829595660
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..180fbd17e0a8
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..4ab3b6f9ef71
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..4ab3b6f9ef71
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..37db02d7a035
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..28e447242d80
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..947cf73aeb17 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,21 @@ test('should exclude from recurrence if mode is "occurrence"', async (t) => {
     .expect(scheduler.getAppointmentCount())
     .eql(2);
 
+  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..d18ae9db14a9 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,8 @@ 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);
+    .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/basic.ts b/e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/basic.ts
index 2eb3f38bc28a..8d3391c2b035 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,8 @@ 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')
+    .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..a85a19c03832 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,7 @@ 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;');
+  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..9b2eec1c9cc2 100644
--- a/packages/devextreme-angular/webpack.test.js
+++ b/packages/devextreme-angular/webpack.test.js
@@ -3,6 +3,7 @@ module.exports = {
   mode: 'development',
   plugins: [],
   resolve: {
+    alias: { stream: require.resolve('stream-browserify') },
     fallback: { stream: require.resolve('stream-browserify') },
   },
   module: {
@@ -24,5 +25,4 @@ module.exports = {
       ],
     }],
   },
-
 };
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 3d814ff59904..4c9af7ddce80 100644
--- a/packages/devextreme-scss/.stylelintrc.json
+++ b/packages/devextreme-scss/.stylelintrc.json
@@ -21,6 +21,10 @@
         "@stylistic/declaration-colon-space-after": "always-single-line",
         "@stylistic/declaration-colon-space-before": "never",
         "declaration-no-important": 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,
         "dx/no-unused-use": true,
         "dx/no-identical-branch-declarations": true,
@@ -63,5 +67,58 @@
         "scss/map-keys-quotes": "always",
         "scss/no-duplicate-dollar-variables": [true, { "ignoreInsideAtRules": ["if", "else"] }],
         "scss/operator-no-newline-after": null
-    }
+    },
+    "overrides": [
+        {
+            "comment": "fluent-next variable names are strict kebab-case: each one maps onto a public --dx-* custom property.",
+            "files": ["scss/widgets/fluent-next/**/*.scss"],
+            "rules": {
+                "scss/dollar-variable-pattern": "^[a-z][a-z0-9]*(-[a-z0-9]+)*$"
+            }
+        },
+        {
+            "comment": "Rule files read design tokens through the widget's own variables. At-rule parameters are invisible to stylelint; fluent-next-naming.test.ts covers them.",
+            "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": "Declaration files read design tokens through the ds bridge, not as custom properties.",
+            "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." }
+                ]
+            }
+        },
+        {
+            "comment": "cardView keeps its cross-theme BEM variable names.",
+            "files": ["scss/widgets/fluent-next/cardView/**/*.scss"],
+            "rules": {
+                "scss/dollar-variable-pattern": "^[a-z][0-9a-z_-]*$"
+            }
+        },
+        {
+            "comment": "cardView declaration files link component tier names through var(--dx-card-view-…).",
+            "files": [
+                "scss/widgets/fluent-next/cardView/_colors.scss",
+                "scss/widgets/fluent-next/cardView/_sizes.scss"
+            ],
+            "rules": {
+                "declaration-property-value-disallowed-list": [
+                    { "/.*/": ["/var\\(\\s*--dxds-/"] },
+                    { "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.ts b/packages/devextreme-scss/build/theme-options.ts
index 56302e5203ba..54a566b4f6f9 100644
--- a/packages/devextreme-scss/build/theme-options.ts
+++ b/packages/devextreme-scss/build/theme-options.ts
@@ -5,10 +5,13 @@ 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'];
 
 export const getThemes = (): Theme[] => sizes.flatMap((size): Theme[] => [
   ...materialModes.flatMap((mode) => materialColors.map((color): Theme => ['material', size, color, mode])),
   ...fluentModes.flatMap((mode) => fluentColors.map((color): Theme => ['fluent', size, color, mode])),
+  ...fluentNextModes.flatMap((mode) => fluentNextColors.map((color): Theme => ['fluent-next', size, color, mode])),
   ...genericColors.map((color): Theme => ['generic', size, color]),
 ]);
diff --git a/packages/devextreme-scss/build/tokens/build-tokens.ts b/packages/devextreme-scss/build/tokens/build-tokens.ts
new file mode 100644
index 000000000000..a9c4d1456cf3
--- /dev/null
+++ b/packages/devextreme-scss/build/tokens/build-tokens.ts
@@ -0,0 +1,584 @@
+import path from 'node:path';
+import { existsSync } from 'node:fs';
+import { createRequire } from 'node:module';
+import {
+  readdir, readFile, rm, writeFile,
+} from 'node:fs/promises';
+import StyleDictionary from 'style-dictionary';
+import type {
+  Config, File, FormatFnArguments, TransformedToken,
+} from 'style-dictionary/types';
+import { fileHeader, formattedVariables } from 'style-dictionary/utils';
+import { registerTransforms } from './transforms.ts';
+import {
+  THEME_NAME, THEME_FOLDER, getBridgeFiles, getModeFiles,
+} from './sources.ts';
+import {
+  buildAvailableNames,
+  collectCustomPropertyReferences,
+  collectTokenReferences,
+} from './consumed-tokens.ts';
+
+type Tree = Record<string, unknown>;
+interface BuildConfig extends Config { theme: string; name: string; source: string[] }
+type Formatting = FormatFnArguments['options']['formatting'];
+
+registerTransforms(StyleDictionary);
+
+const SIZE_SUFFIX_RE = /\.(small|medium|large)$/;
+
+const isTree = (node: unknown): node is Tree => typeof node === 'object' && node !== null;
+
+const getTokenAtPath = (tokens: unknown, refPath: string): Tree | undefined => {
+  let node = tokens;
+
+  for (const part of refPath.split('.')) {
+    if (!isTree(node) || !(part in node)) {
+      return undefined;
+    }
+    node = node[part];
+  }
+
+  return isTree(node) && '$value' in node ? node : undefined;
+};
+
+const hasTokenAtPath = (tokens: unknown, refPath: string): boolean => (
+  getTokenAtPath(tokens, refPath) !== undefined
+);
+
+StyleDictionary.registerPreprocessor({
+  name: 'dx/fix-dangling-size-references',
+  preprocessor: (tokens) => {
+    const visit = (node: unknown): void => {
+      if (!isTree(node)) {
+        return;
+      }
+
+      if (typeof node.$value === 'string') {
+        node.$value = node.$value.replace(/\{([\w.-]+)\}/g, (match: string, refPath: string): string => {
+          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;
+  },
+});
+
+const PURE_REFERENCE_RE = /^\{([\w.-]+)\}$/;
+
+StyleDictionary.registerPreprocessor({
+  name: 'dx/fix-composite-shadow-references',
+  preprocessor: (tokens) => {
+    const visit = (node: unknown): void => {
+      if (!isTree(node)) {
+        return;
+      }
+
+      if (typeof node.$value === 'string') {
+        const refPath = PURE_REFERENCE_RE.exec(node.$value)?.[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: unknown): void => {
+      if (!isTree(node)) {
+        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;
+const resolveFromHere = createRequire(import.meta.url);
+const tokensDir = path.dirname(resolveFromHere.resolve('@devexpress/design-tokens-internal/package.json'));
+const buildPath = `${path.resolve(dirname, '../../scss/_design-system')}/`;
+
+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',
+];
+
+const headerFormatting = (formatting: Formatting & { prefix?: string } = {}): Formatting => {
+  const { prefix, ...rest } = formatting;
+  return rest;
+};
+
+StyleDictionary.registerFormat({
+  name: 'dx/mode-scoped-mixin',
+  format: async ({ dictionary, file, options }) => {
+    const {
+      outputReferences, outputReferenceFallbacks, usesDtcg, formatting, sort,
+    } = options;
+    const { 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 ${String(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 = String(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: string, indent: string, step: string, value: string): string => {
+        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,
+  formatting: { commentStyle: 'none' as const },
+};
+
+const customExpand = {
+  exclude: ['shadow', 'text'],
+};
+
+const normalizeFilePath = (token: TransformedToken): string => token.filePath.split(path.sep).join('/');
+
+const getPlatformSettings = (files: File[]): Config['platforms'] => ({
+  '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: string, files: string[], platformFiles: File[]): BuildConfig => ({
+  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: string): BuildConfig => createConfig(palette, [`base/colors/palettes/${THEME_NAME}/${palette}`], [
+  {
+    destination: `${THEME_NAME}/accents/${palette}.scss`,
+    format: 'dx/accent-palette',
+    filter: (token): boolean => normalizeFilePath(token).includes(`${THEME_NAME}/${palette}.json`),
+    options: FILE_OPTIONS,
+  },
+]);
+
+const createModeConfig = (mode: string): BuildConfig => createConfig(mode, getModeFiles(mode), [
+  {
+    destination: 'base.scss',
+    format: 'css/variables',
+    filter: (token): boolean => {
+      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): boolean => {
+      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,
+  },
+  {
+    destination: `${THEME_NAME}/semantic/typography.scss`,
+    format: 'css/variables',
+    filter: (token): boolean => normalizeFilePath(token).includes(`semantic/typography/${THEME_NAME}`),
+    options: FILE_OPTIONS,
+  },
+  {
+    destination: `${THEME_NAME}/semantic/colors/${mode}.scss`,
+    format: 'dx/mode-scoped-mixin',
+    filter: (token): boolean => {
+      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 },
+  },
+  {
+    destination: `${THEME_NAME}/${MODE_ALIASES_FILE}.scss`,
+    format: 'dx/mode-scoped-mixin',
+    filter: (token): boolean => {
+      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 },
+  },
+]);
+
+const createDsConfig = (): BuildConfig => createConfig('ds', getBridgeFiles(), [
+  {
+    destination: 'variables/_ds.scss',
+    format: 'scssToCss',
+  },
+]);
+
+const configs = [
+  ...FLUENT_PALETTES.map(createPaletteConfig),
+  ...FLUENT_MODES.map(createModeConfig),
+  createDsConfig(),
+];
+
+async function collectGeneratedFiles(dir: string): Promise<string[]> {
+  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(): Promise<number> {
+  const files = await collectGeneratedFiles(buildPath);
+  const defined = new Set<string>();
+  const used = new Map<string, string>();
+
+  const contents = await Promise.all(files.map((file) => readFile(file, 'utf-8')));
+
+  for (const [index, file] of files.entries()) {
+    const content = contents[index];
+
+    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(): Promise<string[]> {
+  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));
+}
+
+const DECLARATION = /^(\s*)(--[\w-]+)\s*:\s*([^;]+);\s*$/;
+
+const parseDeclarations = (content: string): Map<string, string> => content.split('\n').reduce((declarations, line) => {
+  const match = DECLARATION.exec(line);
+
+  return match ? declarations.set(match[2], match[3].trim()) : declarations;
+}, new Map<string, string>());
+
+const readsOf = (value: string): string[] => [...value.matchAll(/var\(\s*(--[\w-]+)/g)].map(([, name]) => name);
+
+const modeDependentNames = (
+  light: Map<string, string>,
+  dark: Map<string, string>,
+  aliases: Map<string, string>,
+): Set<string> => {
+  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: string, keep: (name: string) => boolean): string => content.replace(
+  /(\{\n)([\s\S]*)(\n\})/,
+  (_whole: string, open: string, body: string, close: string): string => {
+    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(): Promise<{ dependent: number; shared: number }> {
+  const modeFile = (mode: string): string => 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') }] as const),
+  ));
+  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',
+  )));
+
+  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 };
+}
+
+async function validateConsumedTokens(): Promise<number> {
+  const { version, tokens }: { version: string; tokens: Tree } = 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<string, { file: string; reference: string }>();
+
+  const styleSheets = await collectThemeStyleSheets();
+  const styleSheetContents = await Promise.all(styleSheets.map((file) => readFile(file, 'utf-8')));
+
+  for (const [index, file] of styleSheets.entries()) {
+    const content = styleSheetContents[index];
+    const source = path.relative(themePath, file);
+    const found: [string, string][] = [
+      ...collectTokenReferences(content, source).map((name): [string, string] => [name, `ds.$${name}`]),
+      ...collectCustomPropertyReferences(content, source).map((name): [string, string] => [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;
+}
+
+function assertSourcesExist(): void {
+  const missing = [...new Set(configs.flatMap((config) => config.source))]
+    .filter((file) => !existsSync(file))
+    .map((file) => `  ${path.relative(tokensDir, file)}`);
+  if (missing.length) {
+    throw new Error(`Token source files absent from @devexpress/design-tokens-internal (see build/tokens/sources.ts):\n${missing.join('\n')}`);
+  }
+}
+
+async function build(): Promise<void> {
+  assertSourcesExist();
+  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);
+
+    // eslint-disable-next-line no-await-in-loop
+    await sd.hasInitialized;
+    // eslint-disable-next-line no-await-in-loop
+    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..ea8e86dc9392
--- /dev/null
+++ b/packages/devextreme-scss/build/tokens/consumed-tokens.ts
@@ -0,0 +1,40 @@
+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('');
+};
+
+export const collectTokenReferences = (content: string, source: string): string[] => [
+  ...stripScssComments(content, source).matchAll(/\bds\.\$([\w-]+)/g),
+].map(([, name]) => name);
+
+export const collectCustomPropertyReferences = (content: string, source: string): string[] => [
+  ...stripScssComments(content, source).matchAll(/var\(\s*--dxds-([\w-]+)/g),
+].map(([, name]) => name);
+
+export const collectMarkupCustomPropertyReferences = (content: string): string[] => [
+  ...content
+    .replace(/\/\*[\s\S]*?\*\//g, ' ')
+    .replace(/<!--[\s\S]*?-->/g, ' ')
+    .matchAll(/var\(\s*--dxds-([\w-]+)/g),
+].map(([, name]) => name);
+
+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.ts b/packages/devextreme-scss/build/tokens/sources.ts
new file mode 100644
index 000000000000..24653bfc6bee
--- /dev/null
+++ b/packages/devextreme-scss/build/tokens/sources.ts
@@ -0,0 +1,34 @@
+export const THEME_NAME = 'fluent';
+export const THEME_FOLDER = 'fluent-next';
+
+export const getThemeCommonFiles = (): string[] => [
+  '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: string): string[] => [
+  ...getThemeCommonFiles(),
+  `base/colors/icons/${THEME_NAME}/${mode}`,
+  `base/colors/palettes/${THEME_NAME}/blue`,
+  `semantic/colors/${THEME_NAME}/${mode}`,
+];
+
+export const getBridgeFiles = (): string[] => getModeFiles('light');
diff --git a/packages/devextreme-scss/build/tokens/transforms.ts b/packages/devextreme-scss/build/tokens/transforms.ts
new file mode 100644
index 000000000000..6827c9578cc1
--- /dev/null
+++ b/packages/devextreme-scss/build/tokens/transforms.ts
@@ -0,0 +1,56 @@
+import { register } from '@tokens-studio/sd-transforms';
+import type StyleDictionary from 'style-dictionary';
+
+function hexToPercent(hex: string): number {
+  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);
+
+  return Math.round((value / 255) * 100);
+}
+
+export function registerTransforms(styleDictionary: typeof StyleDictionary): void {
+  register(styleDictionary, {}).catch((error: unknown) => {
+    throw error;
+  });
+
+  styleDictionary.registerTransform({
+    name: 'dx/ds-name',
+    type: 'name',
+    filter: () => true,
+    transform: (token) => `dxds-${token.name}`,
+  });
+
+  const REFERENCE_WITH_ALPHA_RE = /^(\{[\w.-]+\})([0-9a-fA-F]{2})$/;
+
+  styleDictionary.registerTransform({
+    name: 'dx/fix-transparent-color',
+    type: 'value',
+    transitive: true,
+    filter: (token) => typeof token.original.$value === 'string'
+      && REFERENCE_WITH_ALPHA_RE.test(token.original.$value),
+    transform: (token) => {
+      const original: string = token.original.$value;
+      const [, reference, alpha] = REFERENCE_WITH_ALPHA_RE.exec(original) ?? [];
+      const newValue = `rgb(from ${reference} r g b / ${hexToPercent(alpha)}%)`;
+
+      token.original.$value = newValue;
+
+      return newValue;
+    },
+  });
+
+  styleDictionary.registerTransform({
+    name: 'dx/fix-drop-shadow',
+    type: 'value',
+    transitive: true,
+    filter: (token) => token.$type === 'shadow',
+    transform: (token) => {
+      const value: string = token.$value;
+      return value
+        .replace(/dropShadow\s/g, '')
+        .replace(/innerShadow\s/g, 'inset ');
+    },
+  });
+}
diff --git a/packages/devextreme-scss/eslint.config.mjs b/packages/devextreme-scss/eslint.config.mjs
index a1305d474b95..dc4ae80801d2 100644
--- a/packages/devextreme-scss/eslint.config.mjs
+++ b/packages/devextreme-scss/eslint.config.mjs
@@ -83,4 +83,14 @@ export default [
       }],
     },
   },
+
+  {
+    files: ['build/tokens/transforms.ts', 'build/tokens/build-tokens.ts'],
+    rules: {
+      'no-param-reassign': ['error', {
+        props: true,
+        ignorePropertyModificationsFor: ['token', 'node'],
+      }],
+    },
+  },
 ];
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 55abaa5b97c0..87f261dc2815 100644
--- a/packages/devextreme-scss/package.json
+++ b/packages/devextreme-scss/package.json
@@ -4,8 +4,10 @@
   "author": "Developer Express Inc.",
   "license": "SEE LICENSE IN LICENSE.md",
   "devDependencies": {
+    "@devexpress/design-tokens-internal": "262.26.0",
     "@stylistic/eslint-plugin": "catalog:",
     "@stylistic/stylelint-plugin": "3.1.3",
+    "@tokens-studio/sd-transforms": "2.0.3",
     "@typescript-eslint/eslint-plugin": "catalog:",
     "@typescript-eslint/parser": "catalog:",
     "autoprefixer": "10.5.0",
@@ -17,6 +19,7 @@
     "eslint-plugin-jest": "29.15.2",
     "postcss": "^8.5.23",
     "sass-embedded": "1.105.1",
+    "style-dictionary": "5.4.4",
     "stylelint": "catalog:",
     "stylelint-config-standard-scss": "14.0.0",
     "stylelint-scss": "6.10.0",
@@ -25,10 +28,16 @@
   },
   "scripts": {
     "build": "pnpm --workspace-root nx build devextreme-scss",
+    "check-naming-registries": "pnpm run naming:check",
     "lint": "pnpm run lint-css && pnpm run lint-js",
     "lint-css": "stylelint scss/widgets build",
     "lint-js": "eslint",
+    "naming:baseline": "UPDATE_NAMING_BASELINE=1 jest --no-coverage --runInBand --config=./tests/jest.config.json",
+    "naming:check": "node tools/naming/derive-registries.ts --check && node tools/naming/publish.ts --check && node tools/review/reachability.ts",
+    "naming:publish": "node tools/naming/publish.ts",
+    "naming:registries": "node tools/naming/derive-registries.ts",
     "test": "jest --no-coverage --runInBand --config=./tests/jest.config.json",
+    "tokens:update": "node tools/tokens/update.ts",
     "typecheck": "tsc -p tsconfig.json && tsc -p tests/tsconfig.json",
     "watch": "pnpm --workspace-root nx run devextreme-scss --target=watch"
   },
diff --git a/packages/devextreme-scss/project.json b/packages/devextreme-scss/project.json
index e67ef4494844..7685f98add74 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.ts",
+        "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
     },
@@ -163,16 +205,36 @@
         "{projectRoot}/**/*"
       ]
     },
+    "naming:check": {
+      "executor": "nx:run-script",
+      "options": {
+        "script": "naming:check"
+      },
+      "dependsOn": [
+        "build:themes"
+      ],
+      "inputs": [
+        "{projectRoot}/**/*",
+        "{workspaceRoot}/packages/devextreme/package.json",
+        "{workspaceRoot}/pnpm-lock.yaml"
+      ],
+      "cache": true
+    },
     "test": {
       "executor": "nx:run-script",
       "options": {
         "script": "test"
       },
       "dependsOn": [
+        "build:tokens",
+        "build:themes",
         "typecheck"
       ],
       "inputs": [
         "{projectRoot}/**/*",
+        "{workspaceRoot}/apps/demos/Demos/**/*",
+        "{workspaceRoot}/packages/devextreme/js/**/*",
+        "{workspaceRoot}/packages/devextreme/package.json",
         "{workspaceRoot}/pnpm-lock.yaml"
       ]
     },
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..8608c8b2eb66
--- /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 / 1);
+    --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 / 1);
+    --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 / 1);
+    --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 / 1);
+    --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 / 1);
+    --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 / 1);
+    --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 / 1);
+    --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 / 1);
+    --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 / 1);
+    --dx-accent-color-100: oklch(from var(--dx-accent-color-source) l c h / 1);
+    --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 / 1);
+    --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 / 1);
+    --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 / 1);
+    --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 / 1);
+    --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 / 1);
+    --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 / 1);
+    --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 / 1);
+    --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 / 1);
+  }
+}
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..5c40954d543b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/_colors.scss
@@ -0,0 +1,36 @@
+@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;
+}
+
+: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};
+  --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-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..70f54b9074c1
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/_design-system.scss
@@ -0,0 +1,63 @@
+@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;
+
+@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");
+
+@mixin mode-values($mode) {
+  --dx-theme-mode: #{$mode};
+
+  @if $mode == "light" {
+    @include light-roles.roles();
+  } @else {
+    @include dark-roles.roles();
+  }
+
+  @include mode-aliases.aliases();
+}
+
+@mixin named-scopes($own, $other) {
+  :root,
+  .dx-theme-mode-#{$own} {
+    @include mode-values($own);
+  }
+
+  .dx-theme-mode-#{$other} {
+    @include mode-values($other);
+  }
+}
+
+@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\".";
+}
+
+@include inverted-scope();
+
+@if colors.$mode == "light" {
+  @include named-scopes(colors.$mode, "dark");
+} @else {
+  @include named-scopes(colors.$mode, "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..5a0f24037b81
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/_index.scss
@@ -0,0 +1,65 @@
+@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..a1995481b780
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/_public-tier.scss
@@ -0,0 +1,446 @@
+// GENERATED by tools/naming/publish.ts
+@use "accordion/public" as accordionPublic;
+@use "actionSheet/public" as actionSheetPublic;
+@use "badge/public" as badgePublic;
+@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 "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 "viz/public" as vizPublic;
+@use "widget/public" as widgetPublic;
+
+:root,
+.dx-theme-mode-light,
+.dx-theme-mode-dark,
+.dx-theme-mode-inverted {
+  @include commonPublic.publish();
+  @include typographyPublic.publish();
+}
+
+:root {
+  @include vizPublic.publish();
+}
+
+.dx-accordion {
+  @include accordionPublic.publish();
+}
+
+.dx-actionsheet-popup-wrapper,
+.dx-actionsheet-popover-wrapper {
+  @include actionSheetPublic.publish();
+}
+
+.dx-badge {
+  @include badgePublic.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,
+.dx-chat-suggestions {
+  @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-dropdownmenu-popup-wrapper {
+  @include dropDownMenuPublic.publish();
+}
+
+.dx-fieldset,
+.dx-field {
+  @include fieldsetPublic.publish();
+}
+
+.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 {
+  @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..057164ca899e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/_sizes.scss
@@ -0,0 +1,37 @@
+$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;
+
+  $global-font-size: ds.$font-size-base-md !default;
+
+  $global-inline-widget-height: ds.$spacing-320 !default;
+  $global-icon-size: ds.$spacing-200 !default;
+}
+
+@if $size == "compact" {
+  $theme-marker-size-postfix: ".compact" !default;
+
+  $global-font-size: ds.$font-size-base-sm !default;
+
+  $global-inline-widget-height: ds.$spacing-240 !default;
+  $global-icon-size: ds.$spacing-160 !default;
+}
+
+$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..50e531306489
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/accordion/_index.scss
@@ -0,0 +1,81 @@
+@use "colors" 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..2218550df9a9
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/accordion/_public.scss
@@ -0,0 +1,24 @@
+// GENERATED by tools/naming/publish.ts
+@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..dd5af692b6f8
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/accordion/_sizes.scss
@@ -0,0 +1,33 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$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;
+}
+
+$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..c0ce9f83367d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/actionSheet/_index.scss
@@ -0,0 +1,24 @@
+@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..ef92d6539b05
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/actionSheet/_public.scss
@@ -0,0 +1,9 @@
+// GENERATED by tools/naming/publish.ts
+@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..43dc3b3c2052
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/badge/_index.scss
@@ -0,0 +1,15 @@
+@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..71fe8a8f6ebd
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/badge/_public.scss
@@ -0,0 +1,14 @@
+// GENERATED by tools/naming/publish.ts
+@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..b844f7d02167
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/badge/_sizes.scss
@@ -0,0 +1,18 @@
+@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;
+}
+
+$badge-border-radius: ds.$border-radius-full !default;
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..ac91d40c2bdc
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/box/_index.scss
@@ -0,0 +1,8 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/box";
+
+.dx-box-item-content {
+  font-size: $global-font-size;
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/box/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/box/_sizes.scss
new file mode 100644
index 000000000000..e69de29bb2d1
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..55e08bc09753
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/button/_colors.scss
@@ -0,0 +1,118 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$button-contained-bg-disabled: ds.$color-bg-disabled !default;
+
+$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;
+
+$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..4a3b92de6713
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/button/_index.scss
@@ -0,0 +1,208 @@
+@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-mode-contained {
+  &.dx-button-normal {
+    box-shadow: var(--dx-button-box-shadow);
+  }
+}
+
+.dx-button {
+  @include dx-button-onlyicon-sizing();
+
+  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-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();
+}
+
+.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..a2af849f8d89
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/button/_mixins.scss
@@ -0,0 +1,192 @@
+@use "sizes" 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..03f2c0e31d06
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/button/_public-links.scss
@@ -0,0 +1,35 @@
+@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-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..65353d0c5ade
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/button/_public.scss
@@ -0,0 +1,93 @@
+// GENERATED by tools/naming/publish.ts
+@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..b0a6b07cffde
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/button/_sizes.scss
@@ -0,0 +1,38 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$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;
+
+$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;
+}
+
+$button-content-padding: calc((#{$button-height} - #{$button-icon-size} - #{$global-border-width} * 2) / 2) !default;
+
+$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..0960923c7816
--- /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-subtler !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..ba2884a3758d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/buttonGroup/_index.scss
@@ -0,0 +1,30 @@
+@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 *;
+@include dx-buttongroup-sizing(
+  buttonSizes.$button-border-radius,
+  1px,
+);
+
+.dx-buttongroup-mode-contained {
+  border-radius: buttonSizes.$button-border-radius;
+  box-shadow: buttonSizes.$button-box-shadow;
+
+  .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..c39c8e7368ee
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/buttonGroup/_public.scss
@@ -0,0 +1,9 @@
+// GENERATED by tools/naming/publish.ts
+@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..2b0ab3b73d08
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/buttonGroup/_sizes.scss
@@ -0,0 +1,5 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$button-group-item-contained-border-inline-end-width: ds.$border-width-10 !default;
+
+$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..829bde1dc6b0
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_index.scss
@@ -0,0 +1,89 @@
+@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-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..a020f5b09749
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_public.scss
@@ -0,0 +1,37 @@
+// GENERATED by tools/naming/publish.ts
+@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..f05172130f3a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/calendar/_sizes.scss
@@ -0,0 +1,38 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$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;
+  $calendar-legacy-height: 264px !default;
+
+  $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;
+  $calendar-legacy-height: 260px !default;
+
+  $calendar-cell-font-size: ds.$font-size-base-sm !default;
+  $calendar-footer-button-height: ds.$spacing-280 !default;
+}
+
+$calendar-week-day-header-font-size: ds.$font-size-caption-sm !default;
+$calendar-week-day-header-font-weight: ds.$font-weight-caption-strong !default;
+
+$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..72ee23d58167
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/card/_index.scss
@@ -0,0 +1,13 @@
+@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..baf286b8bfeb
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/card/_public.scss
@@ -0,0 +1,10 @@
+// GENERATED by tools/naming/publish.ts
+@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..c19169c4d048
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/card/_sizes.scss
@@ -0,0 +1,3 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$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..7b8b46df8b7a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/cardView/_colors.scss
@@ -0,0 +1,254 @@
+@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/cover/variables" as *;
+@use "../../base/cardView/content_view/content/card/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 *;
+
+// #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..c0bdf1fbbffc
--- /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..01daafb0213e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/cardView/_public.scss
@@ -0,0 +1,119 @@
+// GENERATED by tools/naming/publish.ts
+@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..bcaf47025fb6
--- /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;
+
+$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 !default;
+$card-view-header-item-sort-indicator-border-radius: null !default;
+
+// #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;
+
+$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: 0.125em 0.2em !default;
+
+$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-title-sm !default;
+  $card-view-card-header-selection-checkbox-padding-inline-end: ds.$spacing-120 !default;
+  $card-view-card-cover-max-height: 180px !default;
+  $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-title-xs !default;
+  $card-view-card-header-selection-checkbox-padding-inline-end: ds.$spacing-80 !default;
+  $card-view-card-cover-max-height: 140px !default;
+  $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..09dc5e708198
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/chat/_index.scss
@@ -0,0 +1,185 @@
+@use "colors";
+@use "sizes" as *;
+@use "../../base/chat" with (
+  $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..dc842297914b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/chat/_public.scss
@@ -0,0 +1,115 @@
+// GENERATED by tools/naming/publish.ts
+@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..2cb3d2b84a33
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/chat/_sizes.scss
@@ -0,0 +1,160 @@
+@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;
+$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;
+$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;
+$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;
+  $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;
+  $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;
+}
+
+$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;
+$chat-bubble-image-max-height: 400px !default;
+
+$chat-file-name-font-weight: ds.$font-weight-base-strong !default;
+$chat-editing-preview-caption-font-weight: ds.$font-weight-caption-strong !default;
+
+$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..e58f2b71a032
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/checkBox/_index.scss
@@ -0,0 +1,250 @@
+@use "sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../../base/checkBox" with (
+  $checkbox-text-padding-inline-start: var(--dx-check-box-text-padding-inline-start),
+);
+@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-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-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..be5130a6f9fa
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/checkBox/_public.scss
@@ -0,0 +1,44 @@
+// GENERATED by tools/naming/publish.ts
+@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..83b654f351a2
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/checkBox/_sizes.scss
@@ -0,0 +1,26 @@
+@use "../sizes" 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;
+$check-box-arrow-font-size: 0.75em !default;
+$check-box-indeterminate-icon-height: 0.5em !default;
+$check-box-indeterminate-icon-width: 0.5em !default;
+$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..617533606eb6
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_index.scss
@@ -0,0 +1,68 @@
+@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-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-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..9301626591aa
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_public.scss
@@ -0,0 +1,21 @@
+// GENERATED by tools/naming/publish.ts
+@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-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..e75556c78d0e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/colorBox/_sizes.scss
@@ -0,0 +1,27 @@
+@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;
+
+$color-box-preview-border: ds.$border-width-10 solid !default;
+
+$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-toolbar-item-padding-inline-end: ds.$spacing-100 !default;
+
+$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..26b367e70e8e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_index.scss
@@ -0,0 +1,81 @@
+@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);
+    color: var(--dx-color-view-label-content);
+
+    &.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-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-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-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..fe72b3ac542c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_public.scss
@@ -0,0 +1,40 @@
+// GENERATED by tools/naming/publish.ts
+@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..a1ce7ae3c355
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/colorView/_sizes.scss
@@ -0,0 +1,32 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$color-view-container-width: 450px !default;
+$color-view-palette-width: 288px !default;
+$color-view-palette-height: 299px !default;
+$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;
+$color-view-container-alpha-label-margin: 43px !default;
+$color-view-container-textbox-width: 69px !default;
+$color-view-container-textbox-margin: 0 0 0 ds.$spacing-100 !default;
+
+$color-view-controls-container-width: 90px !default;
+$color-view-controls-container-margin: 27px !default;
+
+$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;
+
+$color-view-alpha-cell-width: $color-view-palette-width + 4 !default;
+
+$color-view-hue-scale-wrapper-height: $color-view-palette-height + 2 !default;
+
+$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..7f226ad99899
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/common/_colors.scss
@@ -0,0 +1,41 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$surface-overlay: ds.$color-bg !default;
+$backdrop-bg: ds.$color-bg-backdrop !default;
+
+$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;
+
+$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;
+
+$viz-bg: ds.$color-bg !default;
+$viz-bg-active: ds.$color-bg-active !default;
+$viz-bg-higher: ds.$color-bg-higher !default;
+$viz-bg-hovered: ds.$color-bg-hovered !default;
+$viz-border: ds.$color-border !default;
+$viz-border-active: ds.$color-border-active !default;
+$viz-border-hovered: ds.$color-border-hovered !default;
+$viz-content: ds.$color-content !default;
+$viz-content-orange: ds.$color-content-orange !default;
+$viz-content-subtle: ds.$color-content-subtle !default;
+$viz-content-subtler: ds.$color-content-subtler !default;
+$viz-crosshair: ds.$color-content-red !default;
+$viz-gray-subtle: ds.$color-bg-gray-subtle !default;
+$viz-grid: ds.$color-border-subtle !default;
+$viz-purple-subtle: ds.$color-bg-purple-subtle !default;
+$viz-tooltip-bg: ds.$color-bg-inverted !default;
+$viz-tooltip-content: ds.$color-content-inverted !default;
+
+$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..cda377c454c9
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/common/_mixins.scss
@@ -0,0 +1,102 @@
+@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: var(--dx-validation-message-padding-block) var(--dx-validation-message-padding-inline),
+  $validation-message-font-size: var(--dx-validation-message-font-size),
+  $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);
+}
+
+@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-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-links.scss b/packages/devextreme-scss/scss/widgets/fluent-next/common/_public-links.scss
new file mode 100644
index 000000000000..953a9614f8ba
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/common/_public-links.scss
@@ -0,0 +1,3 @@
+@mixin publish {
+  --dx-viz-font-family: var(--dx-global-font-family);
+}
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..f0b4157fb92d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/common/_public.scss
@@ -0,0 +1,59 @@
+// GENERATED by tools/naming/publish.ts
+@use "colors" as *;
+@use "sizes" as *;
+@use "public-links" as links;
+
+@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};
+  --dx-viz-bg: #{$viz-bg};
+  --dx-viz-bg-active: #{$viz-bg-active};
+  --dx-viz-bg-higher: #{$viz-bg-higher};
+  --dx-viz-bg-hovered: #{$viz-bg-hovered};
+  --dx-viz-border: #{$viz-border};
+  --dx-viz-border-active: #{$viz-border-active};
+  --dx-viz-border-hovered: #{$viz-border-hovered};
+  --dx-viz-content: #{$viz-content};
+  --dx-viz-content-orange: #{$viz-content-orange};
+  --dx-viz-content-subtle: #{$viz-content-subtle};
+  --dx-viz-content-subtler: #{$viz-content-subtler};
+  --dx-viz-crosshair: #{$viz-crosshair};
+  --dx-viz-gray-subtle: #{$viz-gray-subtle};
+  --dx-viz-grid: #{$viz-grid};
+  --dx-viz-purple-subtle: #{$viz-purple-subtle};
+  --dx-viz-tooltip-bg: #{$viz-tooltip-bg};
+  --dx-viz-tooltip-content: #{$viz-tooltip-content};
+
+  @include links.publish();
+}
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..40e448e302c8
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/common/_sizes.scss
@@ -0,0 +1,39 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$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;
+
+$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;
+
+$global-dropdown-box-shadow: null !default;
+
+@if $size == "default" {
+  $global-line-height: 1.428571 !default;
+  $global-dropdown-box-shadow: ds.$box-shadow-lg !default;
+}
+
+@else if $size == "compact" {
+  $global-line-height: 1.3333 !default;
+  $global-dropdown-box-shadow: ds.$box-shadow-md !default;
+}
+
+$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;
+
+$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..4b691636cdf2
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/contextMenu/_index.scss
@@ -0,0 +1,93 @@
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../menu/sizes" as menuSizes;
+@use "../button/sizes" as buttonSizes;
+@use "../../base/contextMenu" with (
+  $contextmenu-menu-separator-height: var(--dx-context-menu-separator-height),
+  $contextmenu-menu-separator-margin: var(--dx-context-menu-separator-margin),
+  $contextmenu-menu-items-container-padding: var(--dx-context-menu-items-container-padding),
+);
+@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;
+    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..9985173f2ab5
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/contextMenu/_public.scss
@@ -0,0 +1,18 @@
+// GENERATED by tools/naming/publish.ts
+@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..a7588a47d30c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/contextMenu/_sizes.scss
@@ -0,0 +1,23 @@
+@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;
+}
+
+$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..af165bcdae14
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dataGrid/_colors.scss
@@ -0,0 +1,6 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$data-grid-group-panel-item-bg: ds.$color-bg-low !default;
+
+$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..bf57c34e8da0
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dataGrid/_index.scss
@@ -0,0 +1,133 @@
+@use "sizes";
+@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-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-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..7b334fe06c25
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dataGrid/_public.scss
@@ -0,0 +1,29 @@
+// GENERATED by tools/naming/publish.ts
+@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-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-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..bde8960729a1
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dataGrid/_sizes.scss
@@ -0,0 +1,41 @@
+@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;
+
+$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;
+
+$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;
+
+$data-grid-group-panel-item-min-width: ds.$spacing-300 !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-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..c5d79609f34d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dataGrid/layout/cell.scss
@@ -0,0 +1,99 @@
+/* stylelint-disable no-duplicate-selectors */
+@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..d39ca6272935
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dateBox/_index.scss
@@ -0,0 +1,138 @@
+@use "colors" as *;
+@use "../../base/dropDownEditor/mixins" as *;
+@use "../textEditor/sizes" as textEditorSizes;
+@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-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..7185a797d50f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dateBox/_mixins.scss
@@ -0,0 +1,16 @@
+@use "../../base/icon_fonts" as *;
+@use "../dropDownEditor" 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..87239a1afc1e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dateBox/_public.scss
@@ -0,0 +1,17 @@
+// GENERATED by tools/naming/publish.ts
+@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..16bb849d150a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dateBox/_sizes.scss
@@ -0,0 +1,16 @@
+@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;
+
+$date-box-content-padding: ds.$spacing-100 !default;
+$date-box-container-cell-margin-block-start: -1px !default;
+$date-box-button-margin-inline-end: ds.$spacing-50 !default;
+$date-box-popup-title-min-height: ds.$spacing-100 !default;
+
+$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..05cf6bfc6a5b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dateRangeBox/_index.scss
@@ -0,0 +1,105 @@
+@use "../textEditor/sizes" as textEditorSizes;
+@use "../dateBox/mixins" as *;
+@use "../sizes" as *;
+@use "../../base/dateRangeBox";
+@use "../../base/icon_fonts" 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..ee1bc742b21d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dateRangeBox/_public.scss
@@ -0,0 +1,12 @@
+// GENERATED by tools/naming/publish.ts
+@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..dfb7e4ec5620
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dateRangeBox/_sizes.scss
@@ -0,0 +1,17 @@
+@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;
+}
+
+$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..9c9f4f01b9f8
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dateView/_colors.scss
@@ -0,0 +1,8 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$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..8bfb9754dafd
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dateView/_index.scss
@@ -0,0 +1,140 @@
+@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..f930e279fae3
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dateView/_public.scss
@@ -0,0 +1,23 @@
+// GENERATED by tools/naming/publish.ts
+@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..76e40dad3d0e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dateView/_sizes.scss
@@ -0,0 +1,16 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$date-view-roller-height: 182px !default;
+$date-view-roller-item-height: ds.$spacing-400 !default;
+
+$date-view-roller-min-width: 4em !default;
+$date-view-roller-year-min-width: 4.85em !default;
+$date-view-roller-month-min-width: 12em !default;
+$date-view-hours-colon-font-size: 2.2em !default;
+$date-view-item-font-size: 1.3em !default;
+$date-view-item-font-size-selected: 1.8em !default;
+$date-view-roller-month-phone-min-width: 4em !default;
+$date-view-item-phone-font-size: 1.1em !default;
+$date-view-item-phone-font-size-selected: 1.4em !default;
+
+$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..a854b70449a2
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/diagram/_colors.scss
@@ -0,0 +1,27 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$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-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;
+
+$diagram-bg: ds.$color-bg !default;
+$diagram-danger-icon: ds.$color-content-danger !default;
+
+$diagram-canvas-bg: ds.$color-bg-canvas !default;
+$diagram-shadow: ds.$box-shadow-md !default;
+
+$diagram-selection-mark-content: ds.$color-border-contrast !default;
+$diagram-selection-bg: rgb(from #{ds.$color-border-contrast} r g b / 0.02) !default;
+
+$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..5717af8a2863
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/diagram/_index.scss
@@ -0,0 +1,499 @@
+@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 *;
+@use "../../base/mask" as mask;
+
+.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: var(--dx-diagram-toolbox-title-size);
+
+      .dx-toolbar-items-container {
+        height: var(--dx-diagram-toolbox-title-size);
+      }
+    }
+
+    .dx-button.dx-button-has-icon:not(.dx-button-has-text),
+    .dx-button-content {
+      width: var(--dx-diagram-toolbox-title-size);
+      height: var(--dx-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: var(--dx-diagram-toolbox-title-size);
+    height: var(--dx-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;
+    background-size: 12px 12px;
+  }
+
+  &.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 {
+        mask-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);
+      }
+    }
+  }
+}
+
+.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);
+    margin: 0;
+  }
+}
+
+@include diagram-action-icons-mixin(
+  $toolbar-color: null,
+  $menu-color: null,
+  $icon-size: $diagram-toolbar-icon-size,
+  $toolbar-colorbutton-border-width: $diagram-toolbar-colorbutton-border-width,
+);
+
+.dx-diagram-toolbox-popup .dx-button-has-icon .dx-icon.dx-icon-diagram-toolbox-drag {
+  @include diagram-icon-masked("toolbox-drag", var(--dx-diagram-toolbox-title-size), var(--dx-diagram-toolbox-title-size));
+
+  line-height: var(--dx-diagram-toolbox-title-size);
+  mask-repeat: no-repeat;
+  mask-size: var(--dx-diagram-toolbox-title-size) var(--dx-diagram-toolbox-title-size);
+
+  @include mask.masked-glyph-paint();
+}
+
+.dx-diagram-i-button-properties-panel-open {
+  @include diagram-icon-masked("properties-panel-open", $diagram-toolbar-icon-size, $diagram-toolbar-icon-size);
+  @include mask.masked-glyph-paint();
+}
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..86a2e9d40aa4
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/diagram/_public.scss
@@ -0,0 +1,82 @@
+// GENERATED by tools/naming/publish.ts
+@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-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-title-size: #{$diagram-toolbox-title-size};
+  --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..ba004d23890c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/diagram/_sizes.scss
@@ -0,0 +1,124 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$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;
+}
+
+$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;
+}
+
+@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;
+}
+
+$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;
+
+$diagram-height: 600px !default;
+$diagram-min-height: 350px !default;
+$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;
+$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;
+
+$diagram-toolbar-icon-size: $global-icon-size !default;
+
+$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..3a9e76c72648
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/drawer/_index.scss
@@ -0,0 +1,6 @@
+@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..d6d4b483f3c7
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/drawer/_public.scss
@@ -0,0 +1,6 @@
+// GENERATED by tools/naming/publish.ts
+@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..53c942f05988
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownButton/_index.scss
@@ -0,0 +1,33 @@
+@use "colors" 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..71bae0252fb4
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownButton/_public.scss
@@ -0,0 +1,9 @@
+// GENERATED by tools/naming/publish.ts
+@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..a0f9c7609d80
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownButton/_sizes.scss
@@ -0,0 +1,20 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$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;
+}
+
+$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..b8c7df244fd3
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownEditor/_colors.scss
@@ -0,0 +1,5 @@
+@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;
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..2bffd7f70439
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownEditor/_index.scss
@@ -0,0 +1,107 @@
+@use "../textEditor/sizes" as textEditorSizes;
+@use "../../base/icon_fonts" as *;
+@use "../../base/dropDownEditor";
+@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-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..0e38ec6a0ace
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownEditor/_public.scss
@@ -0,0 +1,14 @@
+// GENERATED by tools/naming/publish.ts
+@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..f62fa6df7f6f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownEditor/_sizes.scss
@@ -0,0 +1,21 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+@use "../common/sizes" as *;
+
+$drop-down-editor-list-font-size: null !default;
+$drop-down-editor-list-line-height: null !default;
+
+@if $size == "default" {
+  $drop-down-editor-list-font-size: ds.$font-size-base-md !default;
+  $drop-down-editor-list-line-height: ds.$line-height-base-md !default;
+}
+
+@else if $size == "compact" {
+  $drop-down-editor-list-font-size: ds.$spacing-130 !default;
+  $drop-down-editor-list-line-height: ds.$line-height-base-sm !default;
+}
+
+$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..4baa52f82ac5
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownList/_index.scss
@@ -0,0 +1,9 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../common/mixins" as *;
+@use "../../base/dropDownList";
+@use "../dropDownEditor";
+
+.dx-dropdownlist-popup-wrapper {
+  @include dx-dropdownlist-list-appearance();
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/dropDownList/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownList/_sizes.scss
new file mode 100644
index 000000000000..e69de29bb2d1
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..2e4674f22d20
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownMenu/_index.scss
@@ -0,0 +1,27 @@
+@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..eb65e3381910
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownMenu/_public.scss
@@ -0,0 +1,10 @@
+// GENERATED by tools/naming/publish.ts
+@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..1c4d2ff28351
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/dropDownMenu/_sizes.scss
@@ -0,0 +1,8 @@
+@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;
+
+$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..f2943d64e905
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/fieldset/_index.scss
@@ -0,0 +1,145 @@
+@use "sass:selector";
+@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);
+
+      &::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..2f4e6ba0972c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/fieldset/_public.scss
@@ -0,0 +1,24 @@
+// GENERATED by tools/naming/publish.ts
+@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..e9fc6027df30
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/fieldset/_sizes.scss
@@ -0,0 +1,43 @@
+@use "../sizes" as *;
+@use "../common/sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$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;
+
+$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..470ad1f3c97f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/fileManager/_colors.scss
@@ -0,0 +1,28 @@
+@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;
+
+$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-static-content: #fff !default; // dx-data-uri-static: ds.$color-content-static-dark (mode-invariant)
+
+$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..1475c2ca87d0
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/fileManager/_index.scss
@@ -0,0 +1,346 @@
+@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-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-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);
+    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-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(
+  $text-color: null,
+  $success-bg-color: $file-manager-icon-success-content,
+  $success-text-color: $file-manager-icon-static-content,
+  $danger-bg-color: $file-manager-icon-danger-content,
+  $danger-text-color: $file-manager-icon-static-content,
+  $icon-size: $file-manager-large-icon-size,
+);
+
+.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..660cb9882b47
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/fileManager/_public.scss
@@ -0,0 +1,101 @@
+// GENERATED by tools/naming/publish.ts
+@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-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-popup-width: #{$file-manager-toolbar-viewmode-popup-width};
+  --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};
+}
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..df714738b58b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/fileManager/_sizes.scss
@@ -0,0 +1,122 @@
+@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-toolbar-viewmode-popup-width: 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-toolbar-viewmode-popup-width: ds.$spacing-400 !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-toolbar-viewmode-popup-width: ds.$spacing-340 !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;
+}
+
+$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;
+
+$file-manager-progress-title-font-size: ds.$font-size-180 !default;
+$file-manager-progress-title-font-weight: ds.$font-weight-title-default !default;
+$file-manager-progress-bold-font-weight: ds.$font-weight-base-strong !default;
+
+$file-manager-height: 500px !default;
+$file-manager-border-width: ds.$border-width-10 !default;
+$file-manager-overlay-content-min-width: 240px !default;
+$file-manager-overlay-content-max-width: 400px !default;
+$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;
+$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-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;
+$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;
+$file-manager-drawer-panel-content-initial-max-width: 300px !default;
+$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-dialog-min-width: 300px !default;
+$file-manager-overlay-content-min-height: 300px !default;
+$file-manager-overlay-content-max-height: 400px !default;
+$file-manager-dialog-name-editor-max-width: 340px !default;
+$file-manager-dialog-name-editor-min-height: 180px !default;
+$file-manager-dialog-name-editor-max-height: 180px !default;
+$file-manager-progress-box-cancel-button-margin-block-start: ds.$spacing-50 !default;
+
+$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..9f8e839b6d30
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/fileUploader/_index.scss
@@ -0,0 +1,210 @@
+@use "../mixins" as *;
+@use "../sizes" as *;
+@use "../../base/mixins" as *;
+@use "../../base/fileUploader" with (
+  $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: 0,
+  $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;
+    padding: calc(var(--dx-file-uploader-padding-block) * 2) calc(var(--dx-file-uploader-padding-block) + 2px);
+    border: var(--dx-file-uploader-file-wrapper-border-width) dashed;
+    border-color: var(--dx-file-uploader-border);
+  }
+
+  .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);
+    padding-bottom: calc(var(--dx-file-uploader-padding-block) * 2 + var(--dx-file-uploader-file-wrapper-border-width) + 1px);
+    padding-left: var(--dx-file-uploader-file-wrapper-border-width);
+    box-sizing: content-box;
+  }
+}
+
+.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);
+  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;
+  }
+}
+
+@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..600a6a55b2e7
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/fileUploader/_public.scss
@@ -0,0 +1,53 @@
+// GENERATED by tools/naming/publish.ts
+@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-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..7400a327e42a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/fileUploader/_sizes.scss
@@ -0,0 +1,62 @@
+@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;
+}
+
+$file-uploader-file-name-font-weight: ds.$font-weight-base-strong !default;
+$file-uploader-file-line-height: 13px !default;
+$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;
+
+$file-uploader-status-message-font-size: ds.$font-size-caption-md !default;
+$file-uploader-file-size-font-size: ds.$font-size-caption-sm !default;
+
+$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;
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..649d9e4e9d90
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/filterBuilder/_colors.scss
@@ -0,0 +1,40 @@
+@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;
+
+$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..9168a13b248f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/filterBuilder/_index.scss
@@ -0,0 +1,166 @@
+@use "../mixins" 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-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-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 {
+        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..b8c6e24e0cb1
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/filterBuilder/_public.scss
@@ -0,0 +1,57 @@
+// GENERATED by tools/naming/publish.ts
+@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-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..26641e4fce7e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/filterBuilder/_sizes.scss
@@ -0,0 +1,47 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$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;
+}
+
+$filter-builder-action-icon-font-size: 21px !default;
+$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;
+
+$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-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;
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..00d0c11f9939
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/form/_index.scss
@@ -0,0 +1,133 @@
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/form" with (
+  $form-first-row-padding-top: var(--dx-form-layout-manager-padding-block),
+  $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-layout-manager-tabpanel-content-padding),
+  $form-group-content-padding-top: var(--dx-form-group-caption-top-padding),
+  $form-group-content-margin-top: var(--dx-form-group-caption-bottom-margin),
+  $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 {
+  & > .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);
+  }
+}
+
+.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);
+    }
+
+    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-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..403291b7a395
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/form/_public.scss
@@ -0,0 +1,33 @@
+// GENERATED by tools/naming/publish.ts
+@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-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-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-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..108c11437d42
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/form/_sizes.scss
@@ -0,0 +1,50 @@
+@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;
+}
+
+$form-field-item-help-text-padding-block-start: ds.$spacing-20 !default;
+$form-group-content-border-block-start: ds.$border-width-10 solid !default;
+
+$form-switch-margin-block-start: ds.$spacing-70 !default;
+$form-switch-margin-block-end: ds.$spacing-40 !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..5c5cdfde4854
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gallery/_colors.scss
@@ -0,0 +1,26 @@
+@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;
+
+$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..5657b99c60ed
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gallery/_index.scss
@@ -0,0 +1,144 @@
+@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);
+
+    &::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);
+      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);
+      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..6ffbe02907ff
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gallery/_public.scss
@@ -0,0 +1,35 @@
+// GENERATED by tools/naming/publish.ts
+@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..687bcb328f9d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gallery/_sizes.scss
@@ -0,0 +1,19 @@
+@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;
+
+$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;
+
+$gallery-border-width: ds.$border-width-10 !default;
+$gallery-indicator-inset-block-end: ds.$spacing-100 !default;
+$gallery-indicator-height: ds.$spacing-100 !default;
+
+$gallery-indicator-item-margin: 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..3ea39909d887
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gantt/_colors.scss
@@ -0,0 +1,22 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$gantt-collapsable-row-bg: ds.$color-bg-low !default;
+
+$gantt-content-disabled: ds.$color-content-disabled !default;
+
+$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;
+
+$gantt-bg: ds.$color-bg !default;
+$gantt-border: ds.$color-border !default;
+$gantt-content: ds.$color-content !default;
+
+$gantt-accent-border: ds.$color-border-primary !default;
+$gantt-ti-bg: ds.$color-bg-primary-alpha-hovered !default;
+
+$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..3c1a5cd46a39
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gantt/_index.scss
@@ -0,0 +1,294 @@
+@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);
+        line-height: calc(var(--dx-gantt-task-height) - 2px);
+        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-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-gantt-task-edit-dependency-l,
+  .dx-gantt-task-edit-successor-dependency-l {
+    right: calc(-1 * var(--dx-gantt-dependency-successor-size) - 1px);
+  }
+
+  .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();
+
+.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..592eb6bd3754
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gantt/_public.scss
@@ -0,0 +1,54 @@
+// GENERATED by tools/naming/publish.ts
+@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..0439cdcf0d1e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gantt/_sizes.scss
@@ -0,0 +1,56 @@
+@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;
+}
+
+$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;
+$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;
+$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;
+
+$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..9a83c397ccf1
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_colors.scss
@@ -0,0 +1,76 @@
+@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;
+
+$grid-text-stub-bg: rgb(from #{ds.$color-bg-inverted} r g b / 0.1) !default;
+$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};
+}
+
+$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..1a0664ff5d83
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_index.scss
@@ -0,0 +1,1118 @@
+@use "sass:selector";
+@use "colors";
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" 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 "../scrollable";
+@use "../overlay";
+@use "../pagination";
+@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: calc(2 * var(--dx-grid-cell-padding-inline) + #{$global-icon-size}),
+  $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-title-label-font-size: typographySizes.$typography-m-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);
+        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);
+
+        @include dx-icon(close);
+        @include dx-icon-sizing(14px);
+      }
+
+      .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 {
+      mask-position: 0 49px;
+    }
+
+    .dx-command-drag {
+      .dx-#{$widget-name}-drag-icon {
+        @include dx-icon-sizing($global-icon-size);
+      }
+    }
+
+    .dx-#{$widget-name}-drop-highlight {
+      & > td {
+        .dx-header-filter {
+          color: 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-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-#{$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);
+          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);
+        line-height: calc(var(--dx-grid-cell-height) - 2px);
+      }
+
+      .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-#{$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);
+
+    .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..854b01793839
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_public-links.scss
@@ -0,0 +1,13 @@
+@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-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);
+}
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..8b09bc27907a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_public.scss
@@ -0,0 +1,168 @@
+// GENERATED by tools/naming/publish.ts
+@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-confirm-dialog-width: #{$grid-ai-confirm-dialog-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-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..1a250a2ce21d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_sizes.scss
@@ -0,0 +1,181 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+@use "../button/sizes" as buttonSizes;
+
+$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;
+$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;
+$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;
+$grid-ai-confirm-dialog-width: null !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;
+
+  $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;
+  $grid-ai-confirm-dialog-width: 425px !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;
+  $grid-ai-confirm-dialog-width: 360px !default;
+}
+
+$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;
+$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;
+
+$grid-command-expand-column-width: ds.$spacing-300 !default;
+
+$grid-ai-confirm-dialog-button-width: ds.$spacing-520 !default;
+
+$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-title-sm !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;
+
+$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..24e9cb100561
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/_variables.scss
@@ -0,0 +1,11 @@
+@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..76300dd578a4
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/layout/aiChat/_index.scss
@@ -0,0 +1,19 @@
+@use "../../../../base/gridBase/layout/aiChat/mixins" 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..a10d620036ce
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/layout/aiChat/_sizes.scss
@@ -0,0 +1,10 @@
+@use "../../../sizes" as *;
+@use "../../../../../_design-system/variables/ds" as ds;
+
+$grid-ai-chat-message-icon-size: $global-icon-size !default;
+
+$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;
+$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..bd0eac35e172
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/gridBase/layout/cell.scss
@@ -0,0 +1,539 @@
+@use "../../sizes" 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,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);
+  }
+
+  // (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);
+  }
+
+  // (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);
+  }
+
+  // (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;
+  }
+
+  // (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);
+  }
+
+  // (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..246fcff56bd3
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_colors.scss
@@ -0,0 +1,16 @@
+@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;
+
+$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;
+
+$html-editor-code-block-bg: ds.$color-bg-active !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..669ff5a5d40a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_index.scss
@@ -0,0 +1,331 @@
+@use "../textEditor/colors" as textEditorColors;
+@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-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-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-fileuploader-content {
+      background-color: var(--dx-html-editor-uploader-cover-bg);
+    }
+  }
+}
+
+.dx-formdialog-field-target .dx-field-item-content {
+  text-align: start;
+}
+
+.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..b7100fb1ad14
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_public.scss
@@ -0,0 +1,52 @@
+// GENERATED by tools/naming/publish.ts
+@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-button-width: #{$html-editor-ai-dialog-button-width};
+  --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-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..62601d8ab51f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/htmlEditor/_sizes.scss
@@ -0,0 +1,64 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$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;
+$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;
+$html-editor-ai-dialog-button-width: 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;
+  $html-editor-ai-dialog-button-width: 110px !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;
+  $html-editor-ai-dialog-button-width: ds.$spacing-1000 !default;
+}
+
+$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;
+
+$html-editor-ai-dialog-title-font-weight: ds.$font-weight-title-default !default;
+
+$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..d71cede6b7f2
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/icons/_index.scss
@@ -0,0 +1,29 @@
+@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-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..f2ca4ace3044
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/informer/_index.scss
@@ -0,0 +1,13 @@
+@use "../../base/informer";
+@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..589d1ffd6e97
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/informer/_public.scss
@@ -0,0 +1,15 @@
+// GENERATED by tools/naming/publish.ts
+@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..81a2bbfc1e7c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/informer/_sizes.scss
@@ -0,0 +1,22 @@
+@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..2b92ac28b80c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/list/_colors.scss
@@ -0,0 +1,36 @@
+@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;
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..90f6bd593c1f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/list/_index.scss
@@ -0,0 +1,525 @@
+@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-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),
+  $list-empty-message-min-height: var(--dx-list-empty-message-min-height),
+);
+@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-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();
+
+    &.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 {
+    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-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..979489bf7c3f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/list/_public.scss
@@ -0,0 +1,58 @@
+// GENERATED by tools/naming/publish.ts
+@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-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..5e3c408c3ad7
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/list/_sizes.scss
@@ -0,0 +1,53 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$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};
+}
+
+$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;
+
+$list-item-badge-container-width: ds.$spacing-200 !default;
+$list-slide-menu-button-padding: 0 ds.$spacing-100 !default;
+$list-next-button-padding: ds.$spacing-50 !default;
+
+$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..340806ff7eac
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/loadIndicator/_colors.scss
@@ -0,0 +1,12 @@
+@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;
+
+$load-indicator-segment-inner-border: ds.$color-bg-primary-subtle !default;
+
+$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..de6a0b4ed359
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/loadIndicator/_index.scss
@@ -0,0 +1,139 @@
+@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..1a79c8bba13b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/loadIndicator/_public.scss
@@ -0,0 +1,15 @@
+// GENERATED by tools/naming/publish.ts
+@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..ce7f8609fb0e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/loadIndicator/_sizes.scss
@@ -0,0 +1,5 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$load-indicator-segment-border-width: 0.12em !default;
+
+$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..3cd2aa09eefa
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/loadPanel/_index.scss
@@ -0,0 +1,11 @@
+@use "../../base/loadPanel" with (
+  $loadpanel-content-padding: var(--dx-load-panel-padding),
+);
+@use "../overlay";
+
+.dx-loadpanel-content {
+  border: none;
+  background: var(--dx-load-panel-content-bg);
+  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..bec8ec619a15
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/loadPanel/_public.scss
@@ -0,0 +1,11 @@
+// GENERATED by tools/naming/publish.ts
+@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-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..e8fdaf690c14
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/loadPanel/_sizes.scss
@@ -0,0 +1,5 @@
+@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;
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..eef49e065327
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/lookup/_index.scss
@@ -0,0 +1,166 @@
+@use "../sizes" as *;
+@use "../textEditor/sizes" as textEditorSizes;
+@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..108b6778de2f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/lookup/_public.scss
@@ -0,0 +1,15 @@
+// GENERATED by tools/naming/publish.ts
+@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..f6e410377200
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/lookup/_sizes.scss
@@ -0,0 +1,24 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$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..f43b68150422
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/map/_public.scss
@@ -0,0 +1,6 @@
+// GENERATED by tools/naming/publish.ts
+@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..81719342ac40
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/menu/_colors.scss
@@ -0,0 +1,22 @@
+@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;
+
+$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..d3c8391dce39
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/menu/_index.scss
@@ -0,0 +1,120 @@
+@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.scss b/packages/devextreme-scss/scss/widgets/fluent-next/menu/_public.scss
new file mode 100644
index 000000000000..07208200aba9
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/menu/_public.scss
@@ -0,0 +1,31 @@
+// GENERATED by tools/naming/publish.ts
+@use "colors" as *;
+@use "sizes" as *;
+
+@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};
+}
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..0eec827d987c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/menu/_sizes.scss
@@ -0,0 +1,37 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$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;
+}
+
+$menu-tree-view-border: ds.$border-width-10 solid !default;
+$menu-tree-view-node-border-block-end: ds.$border-width-10 solid !default;
+
+$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..54635099a584
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/menuBase/_index.scss
@@ -0,0 +1,73 @@
+@use "colors" as *;
+@use "../menu/sizes" as menuSizes;
+@use "../../base/icon_fonts" 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..51462d17f909
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/numberBox/_colors.scss
@@ -0,0 +1,7 @@
+@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;
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..e005a6ac0d3b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/numberBox/_index.scss
@@ -0,0 +1,77 @@
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../../base/numberBox";
+@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..01ca1fecf5bd
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/numberBox/_public.scss
@@ -0,0 +1,12 @@
+// GENERATED by tools/naming/publish.ts
+@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..58fac0fde7b9
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/numberBox/_sizes.scss
@@ -0,0 +1,4 @@
+@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..66a6d5292ceb
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_colors.scss
@@ -0,0 +1,12 @@
+@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;
+
+$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..a8b105f6f0d4
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_index.scss
@@ -0,0 +1,129 @@
+@use "sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../../base/pagination" with (
+  $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-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-page-size-first-child-margin-left: 0,
+);
+@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 {
+    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..56b77f9fd1fc
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_public.scss
@@ -0,0 +1,38 @@
+// GENERATED by tools/naming/publish.ts
+@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-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-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};
+
+  @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..d8fc1e98d9fc
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/pagination/_sizes.scss
@@ -0,0 +1,41 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$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;
+$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;
+}
+
+$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;
+
+$pagination-page-margin-inline-start: ds.$spacing-50 !default;
+$pagination-page-margin-inline-end: ds.$spacing-10 !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;
+
+$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..744bff2b7c51
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_colors.scss
@@ -0,0 +1,28 @@
+@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-position-indicator-bg: ds.$color-border-contrast !default;
+
+$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;
+
+$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..5bff94792160
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_index.scss
@@ -0,0 +1,283 @@
+@use "../mixins" 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-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-field-chooser-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-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-field-area-box-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),
+  $pivotgrid-drag-header-shadow: var(--dx-pivot-grid-drag-header-shadow),
+  $pivotgrid-drag-header-border: var(--dx-pivot-grid-area-box-border),
+  $pivotgrid-drag-header-border-color: var(--dx-pivot-grid-field-area-box-border),
+  $pivotgrid-area-box-border: var(--dx-pivot-grid-area-box-border),
+  $pivotgrid-area-box-border-color: var(--dx-pivot-grid-field-area-box-border),
+  $pivotgrid-header-filter-icon-size: buttonSizes.$button-icon-size,
+);
+
+.dx-pivotgrid-fields-container {
+  &.dx-drag {
+    .dx-area-field.dx-area-box {
+      background-color: var(--dx-pivot-grid-area-field-bg);
+    }
+  }
+
+  .dx-area-field.dx-area-box {
+    color: var(--dx-pivot-grid-field-area-box-content);
+    border-radius: var(--dx-pivot-grid-area-field-border-radius);
+    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-position-indicator {
+    background-color: var(--dx-pivot-grid-position-indicator-bg);
+  }
+}
+
+.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-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);
+  }
+}
+
+@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..cca82b088961
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_public.scss
@@ -0,0 +1,79 @@
+// GENERATED by tools/naming/publish.ts
+@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-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-content: #{$pivot-grid-drag-header-content};
+  --dx-pivot-grid-drag-header-shadow: #{$pivot-grid-drag-header-shadow};
+  --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..63f7cf436854
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/pivotGrid/_sizes.scss
@@ -0,0 +1,87 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$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;
+$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;
+}
+
+$pivot-grid-headers-font-size: ds.$font-size-title-xs !default;
+$pivot-grid-area-font-size: 13px !default;
+$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;
+$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;
+
+$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-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;
+
+$pivot-grid-field-chooser-drag-width: ds.$spacing-1000 !default;
+$pivot-grid-field-chooser-drag-height: ds.$spacing-1000 !default;
+
+$pivot-grid-header-cell-padding-inline: ds.$spacing-20 !default;
+$pivot-grid-fields-area-head-cell-padding-inline: ds.$spacing-20 !default;
+
+$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..f538b35c33d4
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/popover/_index.scss
@@ -0,0 +1,10 @@
+@use "colors" 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..56bf99bf77a6
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/popover/_public.scss
@@ -0,0 +1,7 @@
+// GENERATED by tools/naming/publish.ts
+@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..848abc4e0564
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/popover/_sizes.scss
@@ -0,0 +1,4 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$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..7be7eca744c7
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/popup/_colors.scss
@@ -0,0 +1,8 @@
+@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;
+
+$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..171a1e0d537e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/popup/_index.scss
@@ -0,0 +1,76 @@
+@use "sizes" as *;
+@use "../toolbar/mixins" as *;
+@use "../../base/popup" with (
+  $popup-title-padding: var(--dx-popup-title-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));
+  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..e4ab55356a93
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/popup/_public.scss
@@ -0,0 +1,29 @@
+// GENERATED by tools/naming/publish.ts
+@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-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..aea44840a42b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/popup/_sizes.scss
@@ -0,0 +1,45 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$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;
+}
+
+$popup-title-border-block-end: ds.$border-width-10 solid !default;
+$popup-title-min-height: ds.$spacing-280 !default;
+
+$popup-title-padding: ds.$spacing-100 !default;
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..9e7c933ea722
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/progressBar/_index.scss
@@ -0,0 +1,119 @@
+@use "sass:math";
+@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;
+  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..2f53adac054d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/progressBar/_public.scss
@@ -0,0 +1,24 @@
+// GENERATED by tools/naming/publish.ts
+@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..55486074e233
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/progressBar/_sizes.scss
@@ -0,0 +1,22 @@
+@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;
+}
+
+$progress-bar-status-font-size: ds.$font-size-caption-md !default;
+
+$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..ce34f3b3f16a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/radioButton/_colors.scss
@@ -0,0 +1,33 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$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..597a250096a9
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/radioButton/_index.scss
@@ -0,0 +1,160 @@
+@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-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..71fab4d2b2d5
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/radioButton/_public.scss
@@ -0,0 +1,31 @@
+// GENERATED by tools/naming/publish.ts
+@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..e69de29bb2d1
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..985969b614d1
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/radioGroup/_index.scss
@@ -0,0 +1,11 @@
+@use "colors" as *;
+@use "../../base/radioGroup/mixins" as *;
+@use "../../base/radioGroup" with (
+  $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-column-gap),
+);
+@use "../radioButton";
+@include dx-radiogroup-mixin(
+  var(--dx-radio-group-radio-button-margin-block),
+  0,
+);
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..3c3c06119763
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/radioGroup/_public.scss
@@ -0,0 +1,7 @@
+// GENERATED by tools/naming/publish.ts
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-radio-group-collection-column-gap: #{$radio-group-collection-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..41c5b3f48b9b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/radioGroup/_sizes.scss
@@ -0,0 +1,14 @@
+@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;
+}
+
+$radio-group-collection-column-gap: ds.$spacing-160 !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..42e03588a57e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/rangeSlider/_index.scss
@@ -0,0 +1,8 @@
+@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..50d299ad03b6
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/recurrenceEditor/_index.scss
@@ -0,0 +1,33 @@
+@use "colors" 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..055cf04d7420
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/recurrenceEditor/_public.scss
@@ -0,0 +1,12 @@
+// GENERATED by tools/naming/publish.ts
+@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..612315dd22f5
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/recurrenceEditor/_sizes.scss
@@ -0,0 +1,24 @@
+@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;
+}
+
+$recurrence-editor-radio-group-item-padding-block-end: ds.$spacing-100 !default;
+
+$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..d9a289f6b442
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_colors.scss
@@ -0,0 +1,62 @@
+@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-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;
+
+$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;
+
+$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;
+
+$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..27e25f0dfb36
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_index.scss
@@ -0,0 +1,1110 @@
+@use "../list/colors" as listColors;
+@use "../mixins" as *;
+@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-min-size: var(--dx-scheduler-appointment-min-size),
+  $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-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-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),
+  $scheduler-left-column-width: $scheduler-left-column-width,
+  $scheduler-timeline-cell-height: var(--dx-scheduler-timeline-cell-height),
+  $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),
+  $scheduler-fill-focused-appointment: $scheduler-appointment-bg-focused,
+  $scheduler-is-shadow-color-for-focused-state: $scheduler-appointment-shadow-focused,
+
+  $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-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),
+  $scheduler-timepanel-cell-offset: var(--dx-scheduler-agenda-time-panel-cell-padding),
+  $scheduler-timepanel-cell-small-offset: var(--dx-scheduler-small-padding-inline-end),
+  $scheduler-time-indicator-height: var(--dx-scheduler-date-time-indicator-height),
+  $scheduler-views-all-day-border: var(--dx-scheduler-border-width) solid,
+  $scheduler-header-panel-current-time-cell-color: var(--dx-scheduler-panel-content),
+  $scheduler-focused-cell-shadow: none,
+  $scheduler-agenda-date-table-padding-top: 0,
+);
+@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-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);
+  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 {
+  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-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-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);
+    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-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 {
+    &::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-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-work-space {
+  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-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-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 {
+  &.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-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-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-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-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..2312a5b88396
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_public.scss
@@ -0,0 +1,227 @@
+// GENERATED by tools/naming/publish.ts
+@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-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-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-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-height: #{$scheduler-appointment-min-height};
+  --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-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-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-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..84f34dd58de7
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/scheduler/_sizes.scss
@@ -0,0 +1,299 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$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-min-height: null !default;
+
+$scheduler-appointment-short-content-padding: 0 ds.$spacing-80 0 ds.$spacing-120 !default;
+$scheduler-appointment-15min-height: 17px !default;
+$scheduler-appointment-20min-height: 24px !default;
+$scheduler-appointment-25min-height: 32px !default;
+$scheduler-appointment-10min-recurrence-padding-inline-end: ds.$spacing-140 !default;
+$scheduler-appointment-10min-title-font-size: ds.$spacing-80 !default;
+$scheduler-appointment-10min-title-line-height: ds.$line-height-120 !default;
+$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;
+$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-base-sm !default;
+$scheduler-workspace-info-font-size: ds.$font-size-base-lg !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;
+  $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;
+  $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;
+
+  $scheduler-appointment-min-height: ds.$spacing-200 !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;
+  $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;
+
+  $scheduler-appointment-15min-recurrence-padding-inline-end: ds.$spacing-160 !default;
+  $scheduler-appointment-15min-title-line-height: ds.$line-height-120 !default;
+  $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;
+
+  $scheduler-appointment-min-height: ds.$spacing-180 !default;
+}
+
+$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-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;
+$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;
+
+$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;
+
+$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;
+
+$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;
+$scheduler-rtl-padding: 0 ds.$spacing-70 0 25px !default;
+$scheduler-appointment-collector-width: ds.$spacing-240 !default;
+$scheduler-appointment-content-padding-inline-end: ds.$spacing-50 !default;
+
+$scheduler-common-collector-margin: 0 ds.$spacing-30 !default;
+$scheduler-common-collector-size: ds.$spacing-280 !default;
+
+$scheduler-tooltip-width: 360px !default;
+$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;
+
+$scheduler-tooltip-subject-font-size: ds.$font-size-title-sm !default;
+$scheduler-tooltip-date-font-size: ds.$font-size-caption-md !default;
+
+$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;
+$scheduler-timeline-cell-width: 200px !default;
+$scheduler-agenda-left-column-width: ds.$spacing-720 !default;
+$scheduler-virtual-row-height: ds.$spacing-480 !default;
+
+$scheduler-all-day-table-cell-height: calc(#{$scheduler-workspace-date-table-cell-height} * 1.5) !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-base-sm !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;
+$scheduler-time-indicator-size: ds.$spacing-10 !default;
+$scheduler-small-font-size: ds.$font-size-base-md !default;
+$scheduler-group-header-cell-height: ds.$spacing-300 !default;
+$scheduler-month-date-text-font-size: ds.$font-size-base-lg !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..458334ae620c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/scrollView/_index.scss
@@ -0,0 +1,93 @@
+@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-load-indicator-size),
+  $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);
+  opacity: 1;
+
+  > .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..468b5f5c0cda
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/scrollView/_public.scss
@@ -0,0 +1,26 @@
+// GENERATED by tools/naming/publish.ts
+@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-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..c5c9ac12abee
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/scrollView/_sizes.scss
@@ -0,0 +1,25 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$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;
+
+$scroll-view-pull-down-icon-font-size: ds.$spacing-240 !default;
+
+$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-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;
+
+$scroll-view-pull-down-height: ds.$spacing-520 !default;
+$scroll-view-pull-down-padding: ds.$spacing-150 !default;
+
+$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..91f31e5e88e5
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/scrollable/_index.scss
@@ -0,0 +1,28 @@
+@use "sizes" as *;
+@use "../../base/scrollable" with (
+  $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..54819ebee08d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/scrollable/_public.scss
@@ -0,0 +1,13 @@
+// GENERATED by tools/naming/publish.ts
+@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-padding: #{$scrollable-scroll-padding};
+  --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..7c8882ee524d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/scrollable/_sizes.scss
@@ -0,0 +1,6 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$scrollable-scrollbar-thin-size: ds.$spacing-60 !default;
+$scrollable-scrollbar-size: ds.$spacing-130 !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..6d6977f34124
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/selectBox/_index.scss
@@ -0,0 +1,17 @@
+@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..6a0ecac7a377
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/selectBox/_public.scss
@@ -0,0 +1,6 @@
+// GENERATED by tools/naming/publish.ts
+@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..c4552a846d71
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/slider/_colors.scss
@@ -0,0 +1,25 @@
+@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;
+
+$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..86ae43744c31
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/slider/_index.scss
@@ -0,0 +1,159 @@
+@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-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-slider-tooltip-position-bottom {
+  padding-bottom: calc(var(--dx-slider-tooltip-width) + 6px);
+}
+
+.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..ac4e39c5c92d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/slider/_public.scss
@@ -0,0 +1,37 @@
+// GENERATED by tools/naming/publish.ts
+@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..b34a11c2a78c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/slider/_sizes.scss
@@ -0,0 +1,36 @@
+@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;
+}
+
+$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;
+$slider-label-top-inset-block-start: -15px !default;
+
+$slider-label-bottom-padding-block-end: ds.$spacing-140 !default;
+$slider-label-top-padding-block-start: ds.$spacing-140 !default;
+
+$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..cd4425a8dfd8
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/sortable/_colors.scss
@@ -0,0 +1,5 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$sortable-clone-shadow: ds.$box-shadow-md !default;
+
+$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..762064491d73
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/sortable/_public.scss
@@ -0,0 +1,12 @@
+// GENERATED by tools/naming/publish.ts
+@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..346c0fde8521
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/sortable/_sizes.scss
@@ -0,0 +1,8 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$sortable-clone-opacity: ds.$opacity-90 !default;
+
+$sortable-source-opacity: ds.$opacity-65 !default;
+
+$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..e69de29bb2d1
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..eee9c446b4b3
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/speedDialAction/_colors.scss
@@ -0,0 +1,17 @@
+@use "../button/colors" as buttonColors;
+@use "../../../_design-system/variables/ds" as ds;
+
+$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..6851bd4d0888
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/speedDialAction/_index.scss
@@ -0,0 +1,56 @@
+@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..b80116f6546c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/speedDialAction/_public.scss
@@ -0,0 +1,32 @@
+// GENERATED by tools/naming/publish.ts
+@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-offset: #{$speed-dial-action-fa-button-offset};
+  --dx-speed-dial-action-fa-button-size: #{$speed-dial-action-fa-button-size};
+  --dx-speed-dial-action-fa-button-spacing: #{$speed-dial-action-fa-button-spacing};
+  --dx-speed-dial-action-fa-button-with-label-inset-inline: #{$speed-dial-action-fa-button-with-label-inset-inline};
+  --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..169b9f2e669f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/speedDialAction/_sizes.scss
@@ -0,0 +1,35 @@
+@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;
+$speed-dial-action-fa-button-offset: null !default;
+$speed-dial-action-fa-button-spacing: 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;
+  $speed-dial-action-fa-button-offset: ds.$spacing-600 !default;
+  $speed-dial-action-fa-button-spacing: ds.$spacing-600 !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;
+  $speed-dial-action-fa-button-offset: ds.$spacing-480 !default;
+  $speed-dial-action-fa-button-spacing: ds.$spacing-480 !default;
+}
+
+$speed-dial-action-fa-button-with-label-inset-inline: 0 !default;
+
+$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;
+
+$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..d01929c84f08
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/splitter/_index.scss
@@ -0,0 +1,32 @@
+@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),
+    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..3e752e3ab249
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/splitter/_public.scss
@@ -0,0 +1,15 @@
+// GENERATED by tools/naming/publish.ts
+@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..482c13da4557
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/splitter/_sizes.scss
@@ -0,0 +1,5 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$splitter-resize-handle-icon-size: ds.$spacing-200 !default;
+
+$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..e44fb0b64e8e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/splitterBar/_index.scss
@@ -0,0 +1,21 @@
+@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..1d33ba370273
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/splitterBar/_public.scss
@@ -0,0 +1,11 @@
+// GENERATED by tools/naming/publish.ts
+@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..2c6b9758492e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/splitterBar/_sizes.scss
@@ -0,0 +1,4 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$splitter-bar-border-width: ds.$spacing-70 !default;
+$splitter-bar-width: ds.$spacing-10 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_colors.scss
new file mode 100644
index 000000000000..4df5ac5efb89
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_colors.scss
@@ -0,0 +1,48 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$stepper-step-accent-bg: ds.$color-bg-primary !default;
+
+$stepper-step-bg-selected-hovered: ds.$color-bg-primary-hovered !default;
+
+$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..814f20ae736e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_index.scss
@@ -0,0 +1,80 @@
+@use "../../base/stepper";
+@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);
+}
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..9c96cae60a9c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_public.scss
@@ -0,0 +1,45 @@
+// GENERATED by tools/naming/publish.ts
+@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-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..84f6c99cd006
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/stepper/_sizes.scss
@@ -0,0 +1,35 @@
+@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;
+
+$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..785efe55d8ae
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/switch/_colors.scss
@@ -0,0 +1,32 @@
+@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;
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..9524b7ab0a57
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/switch/_index.scss
@@ -0,0 +1,69 @@
+@use "colors" as *;
+@use "sizes" 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-bg),
+  var(--dx-switch-on-bg),
+  var(--dx-switch-on-border-hovered),
+  var(--dx-switch-on-border-focused),
+  var(--dx-switch-handle-off-bg),
+  var(--dx-switch-handle-on-bg),
+  1px solid,
+  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-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..9e03757ce68d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/switch/_public.scss
@@ -0,0 +1,45 @@
+// GENERATED by tools/naming/publish.ts
+@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-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-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..01bc7286f203
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/switch/_sizes.scss
@@ -0,0 +1,33 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$switch-transition: all 0.2s cubic-bezier(0.33, 0, 0.67, 1) !default;
+
+$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-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;
+}
+
+$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..e4b3c629fd24
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabPanel/_index.scss
@@ -0,0 +1,70 @@
+@use "sass:selector";
+@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..d1d092a8ca0a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabPanel/_public.scss
@@ -0,0 +1,11 @@
+// GENERATED by tools/naming/publish.ts
+@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..a7d549d2ee21
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabPanel/_sizes.scss
@@ -0,0 +1,6 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$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..54f2520e5c6b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/_index.scss
@@ -0,0 +1,17 @@
+@use "../mixins" as *;
+@use "../../base/tabs";
+@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..a8c92d2b1c1e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/_public.scss
@@ -0,0 +1,51 @@
+// GENERATED by tools/naming/publish.ts
+@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..b0bf2dcd7602
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/navigation-button/_base.scss
@@ -0,0 +1,47 @@
+@use "../../../../base/tabs";
+@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..792a36ad2b65
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/tab/_base.scss
@@ -0,0 +1,101 @@
+@use "../../../../base/icon_fonts" as *;
+@use "../../../../base/tabs";
+@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..1b45abd01764
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/tab/styling-mode/_primary.scss
@@ -0,0 +1,118 @@
+@use "../../../../../base/tabs";
+@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..95f83709ca5b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/tab/styling-mode/_secondary.scss
@@ -0,0 +1,114 @@
+@use "../../../../../base/tabs";
+@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..c644548747d9
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/layout/tabs/_index.scss
@@ -0,0 +1,12 @@
+@use "../../../../base/tabs";
+@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..fe8f07115ecd
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/mixins/_index.scss
@@ -0,0 +1,81 @@
+@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..0c38f2d0c83c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tabs/variables/_sizes.scss
@@ -0,0 +1,51 @@
+@use "../../sizes" as *;
+@use "../../../../_design-system/variables/ds" as ds;
+
+$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..21bc98ad847e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tagBox/_index.scss
@@ -0,0 +1,177 @@
+@use "../../base/icon_fonts" 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);
+      padding-bottom: calc(var(--dx-tag-box-tag-container-padding-block) + 1px);
+    }
+  }
+
+  &.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);
+        padding-bottom: calc(var(--dx-tag-box-filled-with-label-padding-block-end) + 1px);
+      }
+    }
+  }
+
+  &.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);
+
+  &::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..c14dca0b4c6c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tagBox/_public.scss
@@ -0,0 +1,33 @@
+// GENERATED by tools/naming/publish.ts
+@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..49d528903eff
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tagBox/_sizes.scss
@@ -0,0 +1,47 @@
+@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;
+}
+
+$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..b55283679158
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/textArea/_index.scss
@@ -0,0 +1,27 @@
+@use "colors" 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);
+      padding-bottom: calc(#{textEditorSizes.$text-editor-input-underlined-padding-block-end} + 1px);
+    }
+
+    &.dx-texteditor-with-label:not(.dx-texteditor-label-outside),
+    &.dx-texteditor-with-floating-label {
+      .dx-texteditor-input {
+        padding-bottom: textEditorSizes.$text-editor-input-underlined-with-label-padding-block-end;
+      }
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/textArea/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/textArea/_public.scss
new file mode 100644
index 000000000000..e1f609d53f87
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/textArea/_public.scss
@@ -0,0 +1,7 @@
+// GENERATED by tools/naming/publish.ts
+@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..0dec21c23857
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/textBox/_colors.scss
@@ -0,0 +1,3 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$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..c1bfcce11476
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/textBox/_index.scss
@@ -0,0 +1,63 @@
+@use "../../base/icon_fonts" as *;
+@use "../textEditor/sizes" as textEditorSizes;
+@use "../../base/textBox";
+@use "../textEditor";
+
+@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..e32ba8fe36e2
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/textBox/_public.scss
@@ -0,0 +1,9 @@
+// GENERATED by tools/naming/publish.ts
+@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..29c8d3cc1891
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/textBox/_sizes.scss
@@ -0,0 +1,14 @@
+@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;
+}
+
+$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..a4de83b6ca72
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_colors.scss
@@ -0,0 +1,42 @@
+@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-label: #{$text-editor-placeholder};
+}
+
+$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..02d2f25d7416
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_index.scss
@@ -0,0 +1,607 @@
+@use "sizes" as *;
+@use "../sizes" 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);
+    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-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);
+  }
+
+  @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),
+  var(--dx-text-editor-label-outside-offset),
+  0.5px,
+  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,
+  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,
+  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..0e81baebb0cd
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_public.scss
@@ -0,0 +1,73 @@
+// GENERATED by tools/naming/publish.ts
+@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..17cceccefcc7
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/textEditor/_sizes.scss
@@ -0,0 +1,107 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+@use "../common/sizes" as *;
+
+$text-editor-invalid-badge-size: calc(#{$invalid-badge-size} + 2 * #{$invalid-badge-padding-inline}) !default;
+
+$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;
+
+$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;
+  $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;
+  $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;
+
+$text-editor-border-width: ds.$border-width-10 !default;
+$text-editor-line-inset-inline-start: -1px !default;
+$text-editor-line-inset-block-end: -1px !default;
+$text-editor-line-inset-inline-end: -1px !default;
+$text-editor-label-inset: -1px !default;
+$text-editor-label-margin-block-end: -1px !default;
+$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;
+
+$text-editor-clear-button-width: ds.$spacing-340 !default;
+
+$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..7e297c782d0f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tileView/_index.scss
@@ -0,0 +1,33 @@
+@use "../mixins" 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..799313c3eeca
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tileView/_public.scss
@@ -0,0 +1,17 @@
+// GENERATED by tools/naming/publish.ts
+@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..43ec1681b4f1
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tileView/_sizes.scss
@@ -0,0 +1,5 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$tile-view-tile-border: ds.$border-width-10 solid !default;
+
+$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..08f657d6c32c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/timeView/_colors.scss
@@ -0,0 +1,7 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$time-view-clock-digits-bg: ds.$color-content !default;
+$time-view-clock-arrow-bg: ds.$color-bg-inverted !default;
+$time-view-clock-bg: ds.$color-bg-canvas !default;
+
+$time-view-clock-shadow: ds.$box-shadow-sm !default;
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..cae448641c34
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/timeView/_index.scss
@@ -0,0 +1,55 @@
+@use "../../base/timeView/mixins" as *;
+@use "../../base/timeView";
+@include clock-action-icons-mixin(
+  var(--dx-time-view-clock-arrow-bg),
+  var(--dx-time-view-clock-bg),
+  var(--dx-time-view-clock-digits-bg),
+  $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),
+  $dial-size: calc(var(--dx-time-view-clock-size) * 85 / 91),
+  $dial-shadow: var(--dx-time-view-clock-shadow),
+);
+
+.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..5880b1012e83
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/timeView/_public.scss
@@ -0,0 +1,19 @@
+// GENERATED by tools/naming/publish.ts
+@use "colors" as *;
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-time-view-clock-arrow-bg: #{$time-view-clock-arrow-bg};
+  --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-bg: #{$time-view-clock-bg};
+  --dx-time-view-clock-digits-bg: #{$time-view-clock-digits-bg};
+  --dx-time-view-clock-margin-block-end: #{$time-view-clock-margin-block-end};
+  --dx-time-view-clock-shadow: #{$time-view-clock-shadow};
+  --dx-time-view-clock-size: #{$time-view-clock-size};
+  --dx-time-view-field-min-height: #{$time-view-field-min-height};
+  --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..0ff4bb96838f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/timeView/_sizes.scss
@@ -0,0 +1,14 @@
+@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;
+
+$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;
+
+$time-view-clock-size: 182px !default;
+$time-view-clock-arrow-width: ds.$spacing-100 !default;
+
+$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..c4c67037c297
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/toast/_index.scss
@@ -0,0 +1,49 @@
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/toast" with (
+  $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-item-gap),
+);
+@use "../overlay";
+
+.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..ce467f2b42e8
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/toast/_public.scss
@@ -0,0 +1,28 @@
+// GENERATED by tools/naming/publish.ts
+@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-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-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..7de76cfdd741
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/toast/_sizes.scss
@@ -0,0 +1,29 @@
+@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;
+}
+
+$toast-content-font-weight: ds.$font-weight-base-default !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-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..e31257dc4eed
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/toolbar/_index.scss
@@ -0,0 +1,201 @@
+@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-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 {
+        @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..f898a360a59b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/toolbar/_mixins.scss
@@ -0,0 +1,58 @@
+@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..8e1ffcf888f2
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/toolbar/_public.scss
@@ -0,0 +1,23 @@
+// GENERATED by tools/naming/publish.ts
+@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..46873ef7274d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/toolbar/_sizes.scss
@@ -0,0 +1,30 @@
+@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};
+}
+
+$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;
+
+$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..b71b42856a96
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tooltip/_index.scss
@@ -0,0 +1,32 @@
+@use "sizes" as *;
+@use "../../base/tooltip" with (
+  $tooltip-overlay-content-min-width: var(--dx-tooltip-overlay-content-min-width),
+  $tooltip-overlay-content-min-height: auto,
+  $tooltip-popup-content-padding: var(--dx-tooltip-padding),
+  $tooltip-content-font-size: var(--dx-tooltip-font-size),
+);
+
+.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);
+  }
+
+  &.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..4e283bdba258
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tooltip/_public.scss
@@ -0,0 +1,15 @@
+// GENERATED by tools/naming/publish.ts
+@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-width: #{$tooltip-overlay-content-min-width};
+  --dx-tooltip-padding: #{$tooltip-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..7582309e351f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/tooltip/_sizes.scss
@@ -0,0 +1,21 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$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;
+}
+
+$tooltip-overlay-content-border: ds.$border-width-10 solid transparent !default;
+
+$tooltip-overlay-content-min-width: ds.$spacing-340 !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..8beba3734e79
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/treeList/_index.scss
@@ -0,0 +1,67 @@
+@use "sizes";
+@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..e4b23da3f1bf
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/treeList/_public.scss
@@ -0,0 +1,20 @@
+// GENERATED by tools/naming/publish.ts
+@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..26d33697389b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/treeList/_sizes.scss
@@ -0,0 +1,31 @@
+@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;
+
+$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;
+
+$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..2d04d1eeb98e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/treeView/_colors.scss
@@ -0,0 +1,17 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$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;
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..96cd125186ed
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/treeView/_index.scss
@@ -0,0 +1,77 @@
+@use "../mixins" 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),
+);
+@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..74cad39cf383
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/treeView/_public.scss
@@ -0,0 +1,37 @@
+// GENERATED by tools/naming/publish.ts
+@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..5c6b38101abe
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/treeView/_sizes.scss
@@ -0,0 +1,49 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$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;
+  $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;
+}
+
+$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..be659e84fb1f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/typography/_index.scss
@@ -0,0 +1,64 @@
+@use "sizes";
+@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..86dc090d725c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/typography/_mixins.scss
@@ -0,0 +1,3 @@
+@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..cc297286863b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/typography/_public.scss
@@ -0,0 +1,25 @@
+// GENERATED by tools/naming/publish.ts
+@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..60421b3bc9f6
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/typography/_sizes.scss
@@ -0,0 +1,63 @@
+@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;
+
+@if $size == "default" {
+  $typography-xl-font-size: ds.$spacing-340 !default;
+  $typography-l-font-size: ds.$font-size-280 !default;
+  $typography-m-font-size: ds.$font-size-200 !default;
+  $typography-s-font-size: ds.$font-size-180 !default;
+
+  $typography-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};
+}
+
+$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..da5cb90af708
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/validation/_index.scss
@@ -0,0 +1,29 @@
+@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-line-height),
+  textEditorSizes.$text-editor-input-filled-padding-inline,
+  var(--dx-validation-summary-item-margin),
+);
+
+.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..aaf9ec5e2a99
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/validation/_public.scss
@@ -0,0 +1,21 @@
+// GENERATED by tools/naming/publish.ts
+@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..13e744dcc535
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/validation/_sizes.scss
@@ -0,0 +1,28 @@
+@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;
+}
+
+@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;
+}
+
+$validation-summary-item-border-block-end-width: ds.$border-width-10 !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/viz/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent-next/viz/_colors.scss
new file mode 100644
index 000000000000..0eae9267ba3c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/viz/_colors.scss
@@ -0,0 +1,17 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$viz-blue: ds.$color-bg-blue !default;
+$viz-gray: ds.$color-bg-gray !default;
+$viz-green: ds.$color-bg-green !default;
+$viz-orange: ds.$color-bg-orange !default;
+$viz-pink: ds.$color-bg-pink !default;
+$viz-primary: ds.$color-bg-primary !default;
+$viz-purple: ds.$color-bg-purple !default;
+$viz-red: ds.$color-bg-red !default;
+$viz-yellow: ds.$color-bg-yellow !default;
+
+$viz-danger: ds.$color-bg-danger !default;
+$viz-success: ds.$color-bg-success !default;
+$viz-warning: ds.$color-bg-warning !default;
+
+$viz-tile-border: ds.$color-content-static-dark !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/viz/_public.scss b/packages/devextreme-scss/scss/widgets/fluent-next/viz/_public.scss
new file mode 100644
index 000000000000..114ebbfb8033
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/viz/_public.scss
@@ -0,0 +1,24 @@
+// GENERATED by tools/naming/publish.ts
+@use "colors" as *;
+@use "sizes" as *;
+
+@mixin publish {
+  --dx-viz-blue: #{$viz-blue};
+  --dx-viz-danger: #{$viz-danger};
+  --dx-viz-export-font-weight: #{$viz-export-font-weight};
+  --dx-viz-font-weight: #{$viz-font-weight};
+  --dx-viz-gray: #{$viz-gray};
+  --dx-viz-green: #{$viz-green};
+  --dx-viz-label-font-weight: #{$viz-label-font-weight};
+  --dx-viz-legend-title-font-weight: #{$viz-legend-title-font-weight};
+  --dx-viz-orange: #{$viz-orange};
+  --dx-viz-pink: #{$viz-pink};
+  --dx-viz-primary: #{$viz-primary};
+  --dx-viz-purple: #{$viz-purple};
+  --dx-viz-red: #{$viz-red};
+  --dx-viz-success: #{$viz-success};
+  --dx-viz-tile-border: #{$viz-tile-border};
+  --dx-viz-title-font-weight: #{$viz-title-font-weight};
+  --dx-viz-warning: #{$viz-warning};
+  --dx-viz-yellow: #{$viz-yellow};
+}
diff --git a/packages/devextreme-scss/scss/widgets/fluent-next/viz/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent-next/viz/_sizes.scss
new file mode 100644
index 000000000000..e1a9af8d1d6a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/viz/_sizes.scss
@@ -0,0 +1,7 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+$viz-export-font-weight: ds.$font-weight-base-default !default;
+$viz-font-weight: ds.$font-weight-caption-default !default;
+$viz-label-font-weight: ds.$font-weight-caption-strong !default;
+$viz-legend-title-font-weight: ds.$font-weight-200 !default;
+$viz-title-font-weight: ds.$font-weight-title-default !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..0d48dfe6aec9
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/widget/_index.scss
@@ -0,0 +1,24 @@
+@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..2d06af2f1340
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent-next/widget/_public.scss
@@ -0,0 +1,6 @@
+// GENERATED by tools/naming/publish.ts
+@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/tests/accent-palette.test.ts b/packages/devextreme-scss/tests/accent-palette.test.ts
new file mode 100644
index 000000000000..00023b55c4b6
--- /dev/null
+++ b/packages/devextreme-scss/tests/accent-palette.test.ts
@@ -0,0 +1,130 @@
+import { existsSync, readFileSync, readdirSync } from 'fs';
+import { dirname, join } from 'path';
+
+import contract from '../tools/naming/accent-contract.json';
+
+const packageRoot = join(__dirname, '..');
+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('every step pins the alpha, so a translucent accent does not fade the whole scale', () => {
+  const offenders = [...stylesheet().matchAll(/--dx-accent-color-(\d+): (.+);/g)]
+    .filter(([, , expression]) => !expression.endsWith('h / 1)'))
+    .map(([, step]) => `step ${step} inherits the alpha of the accent`);
+
+  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/bridge-mirror.test.ts b/packages/devextreme-scss/tests/bridge-mirror.test.ts
new file mode 100644
index 000000000000..b699ff298562
--- /dev/null
+++ b/packages/devextreme-scss/tests/bridge-mirror.test.ts
@@ -0,0 +1,63 @@
+import { readFileSync, readdirSync, existsSync } from 'fs';
+import { join } from 'path';
+
+import { parseDeclarations } from '../tools/tokens/report';
+
+const packageRoot = join(__dirname, '..');
+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();
+
+const declared = new Set(stylesheets.flatMap(
+  (file) => [...parseDeclarations(readFileSync(file, 'utf8')).keys()],
+));
+
+const bridge = readFileSync(bridgePath, 'utf8')
+  .split('\n')
+  .map((line) => line.trim())
+  .filter((line) => line)
+  .map((line) => {
+    const declaration = /^(\$[\w-]+)\s*:\s*(.+);$/.exec(line);
+
+    return {
+      line,
+      variable: declaration?.[1] ?? null,
+      tokens: [...(declaration?.[2] ?? '').matchAll(/--dxds-[\w-]+/g)].map(([token]) => token),
+    };
+  });
+
+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([]);
+});
+
+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..fdf4b4c6c037
--- /dev/null
+++ b/packages/devextreme-scss/tests/calc-budget.json
@@ -0,0 +1,18 @@
+{
+  "dx.fluent-next.blue.dark.compact.css": {
+    "calcOccurrences": 389,
+    "declarationsWithDeepCalc": 5
+  },
+  "dx.fluent-next.blue.dark.css": {
+    "calcOccurrences": 390,
+    "declarationsWithDeepCalc": 5
+  },
+  "dx.fluent-next.blue.light.compact.css": {
+    "calcOccurrences": 389,
+    "declarationsWithDeepCalc": 5
+  },
+  "dx.fluent-next.blue.light.css": {
+    "calcOccurrences": 390,
+    "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..c859ffcfa1af
--- /dev/null
+++ b/packages/devextreme-scss/tests/calc-budget.test.ts
@@ -0,0 +1,50 @@
+import {
+  readFileSync,
+  writeFileSync,
+  readdirSync,
+  existsSync,
+} from 'fs';
+import { join } from 'path';
+
+const packageRoot = join(__dirname, '..');
+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): { calcOccurrences: number; declarationsWithDeepCalc: number } => {
+  const declarations: string[] = 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..6e78e5000373
--- /dev/null
+++ b/packages/devextreme-scss/tests/consumed-tokens.test.ts
@@ -0,0 +1,196 @@
+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', () => {
+    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-mode-parity.test.ts b/packages/devextreme-scss/tests/data-uri-mode-parity.test.ts
new file mode 100644
index 000000000000..71ef27d25821
--- /dev/null
+++ b/packages/devextreme-scss/tests/data-uri-mode-parity.test.ts
@@ -0,0 +1,105 @@
+import { readFileSync, readdirSync, existsSync } from 'fs';
+import { join } from 'path';
+
+const artifactsCss = join(__dirname, '..', '..', 'devextreme', 'artifacts', 'css');
+
+const MODE_DEPENDENT: { rule: string; property: string; reason: string }[] = [];
+
+interface Decl {
+  rule: string;
+  property: string;
+  uri: string;
+}
+
+function declarations(body: string, rule: string): Decl[] {
+  const found: Decl[] = [];
+  let at = 0;
+
+  for (;;) {
+    const start = body.indexOf('url("data:', at);
+    if (start < 0) break;
+    const end = body.indexOf('")', start);
+    if (end < 0) break;
+
+    const declaration = body.slice(body.lastIndexOf(';', start) + 1, start);
+    const colon = declaration.indexOf(':');
+    found.push({
+      rule,
+      property: colon < 0 ? '?' : declaration.slice(0, colon).trim(),
+      uri: body.slice(start + 5, end + 1),
+    });
+    at = end + 2;
+  }
+
+  return found;
+}
+
+function dataUris(css: string): Decl[] {
+  const found: Decl[] = [];
+  const scopes: string[] = [];
+  let cursor = 0;
+
+  for (;;) {
+    const open = css.indexOf('{', cursor);
+    const close = css.indexOf('}', cursor);
+    if (open < 0) break;
+
+    const prelude = css.slice(cursor, open).replace(/^[};]+/, '').trim();
+    const end = css.indexOf('}', open);
+
+    if (close >= 0 && close < open) {
+      scopes.pop();
+      cursor = close + 1;
+    } else if (prelude.startsWith('@')) {
+      scopes.push(prelude);
+      cursor = open + 1;
+    } else if (end < 0) {
+      break;
+    } else {
+      found.push(...declarations(css.slice(open + 1, end), [...scopes, prelude].join(' ')));
+      cursor = end + 1;
+    }
+  }
+
+  return found;
+}
+
+const keyed = (bundle: string): Map<string, string[]> => {
+  const uris = new Map<string, string[]>();
+  dataUris(readFileSync(join(artifactsCss, bundle), 'utf8')).forEach((decl) => {
+    const key = `${decl.property} of ${decl.rule}`;
+    uris.set(key, [...(uris.get(key) ?? []), decl.uri]);
+  });
+  return uris;
+};
+
+const bundles = existsSync(artifactsCss)
+  ? readdirSync(artifactsCss).filter((name) => /^dx\.fluent-next\..*\.css$/.test(name))
+  : [];
+const pairs = bundles
+  .filter((name) => name.includes('.light.'))
+  .map((light) => [light, light.replace('.light.', '.dark.')])
+  .filter(([, dark]) => bundles.includes(dark));
+
+test('every fluent-next bundle is in a light/dark pair', () => {
+  expect(pairs.flat().sort()).toEqual(bundles.sort());
+});
+
+test('the light and the dark bundle carry the same data uris', () => {
+  const excused = new Set(MODE_DEPENDENT.map(({ rule, property }) => `${property} of ${rule}`));
+  const differing = pairs.flatMap(([light, dark]) => {
+    const inLight = keyed(light);
+    const inDark = keyed(dark);
+
+    return [...new Set([...inLight.keys(), ...inDark.keys()])]
+      .filter((rule) => !excused.has(rule))
+      .filter((rule) => (inLight.get(rule) ?? []).join('|') !== (inDark.get(rule) ?? []).join('|'))
+      .map((rule) => `${light} / ${dark}: ${rule} is not the same image in both`);
+  });
+
+  expect(differing).toEqual([]);
+});
+
+test('every excused rule names the reason it is excused', () => {
+  expect(MODE_DEPENDENT.filter(({ reason }) => !reason.trim())).toEqual([]);
+});
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..6eeba4418977
--- /dev/null
+++ b/packages/devextreme-scss/tests/data-uri-static-markers.test.ts
@@ -0,0 +1,105 @@
+import { readFileSync, readdirSync, existsSync } from 'fs';
+import { join } from 'path';
+
+const packageRoot = join(__dirname, '..');
+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')[] = trailing.includes('mode-invariant')
+        ? ['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;
+};
+
+const rootDeclarations = (css: string): Map<string, string> => {
+  const declarations = new Map<string, string>();
+  [...css.matchAll(/([^{}]+)\{([^{}]*)\}/g)]
+    .filter(([, selector]) => selector.split(',').some((one) => one.trim() === ':root'))
+    .forEach(([, , body]) => {
+      [...body.matchAll(/(--[a-z0-9-]+):([^;]*)/g)].forEach(([, property, value]) => {
+        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..060db15d9328
--- /dev/null
+++ b/packages/devextreme-scss/tests/disabled-own-colour.baseline.json
@@ -0,0 +1,111 @@
+[
+  "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-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..134ef36ba111
--- /dev/null
+++ b/packages/devextreme-scss/tests/disabled-paint.test.ts
@@ -0,0 +1,379 @@
+import {
+  readFileSync,
+  writeFileSync,
+  readdirSync,
+  existsSync,
+} from 'fs';
+import { join } from 'path';
+
+import registries from '../tools/naming/registries.json';
+
+const { rootSelectors } = registries;
+const SYSTEM_FOLDERS: string[] = registries.systemFolders ?? [];
+
+const packageRoot = join(__dirname, '..');
+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?.[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)
+        .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 }) => {
+      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 = /^\.(dx-[a-z0-9-]+)\.dx-state-disabled(?=\s|$)/.exec(part);
+
+    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..1e594703af46
--- /dev/null
+++ b/packages/devextreme-scss/tests/fallback-policy.test.ts
@@ -0,0 +1,81 @@
+import {
+  readFileSync,
+  readdirSync,
+  statSync,
+  existsSync,
+} from 'fs';
+import { join, sep } from 'path';
+
+import { stripScssComments } from '../build/tokens/consumed-tokens';
+import contract from '../tools/naming/runtime-contract.json';
+
+const packageRoot = join(__dirname, '..');
+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')));
+  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..90250e6915f4
--- /dev/null
+++ b/packages/devextreme-scss/tests/fluent-next-naming.baseline.json
@@ -0,0 +1,592 @@
+{
+  "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/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": [],
+  "publicSurfaceUnused": [
+    "--dx-button-padding-inline",
+    "--dx-color-shadow",
+    "--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-button-padding-inline: only in generic, material, fluent",
+    "--dx-color-shadow: only in generic, material, fluent",
+    "--dx-popup-toolbar-item-padding-inline: only in generic, material, fluent",
+    "--dx-texteditor-color-text: only in generic, material, fluent",
+    "--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-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/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/textEditor/_colors.scss: --dx-texteditor-color-label",
+    "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..f9549e3ac68e
--- /dev/null
+++ b/packages/devextreme-scss/tests/fluent-next-naming.test.ts
@@ -0,0 +1,717 @@
+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 Registries,
+  type SourceFile,
+  baseIndex,
+  findSignatureRanges,
+  parseSourceFile,
+  starredBaseParameters as starredParametersOf,
+  baseWiringKind as wiringKindOf,
+  tierRecords as computeTierRecords,
+} from '../tools/naming/tier';
+import accentContract from '../tools/naming/accent-contract.json';
+import runtimeContract from '../tools/naming/runtime-contract.json';
+import runtimeReads from '../tools/naming/runtime-reads.json';
+import vizContract from '../tools/naming/viz-contract.json';
+import { required } from './required';
+
+const packageRoot = join(__dirname, '..');
+const widgetsRoot = join(packageRoot, 'scss', 'widgets');
+const themeRoot = join(widgetsRoot, 'fluent-next');
+
+const sourceLabel = (file: string): string => file.slice(widgetsRoot.length + 1);
+
+const declarationBody = (content: string, label: string): string => stripScssComments(
+  content,
+  label,
+)
+  .replace(/@[a-z-]+[^;{]*\{/g, '{');
+
+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');
+interface NamingRegistries extends Registries {
+  chassis: Record<string, { component: string; dependents: string[] }>;
+  embeds?: Record<string, string[]>;
+  modifiers: Record<string, string[]>;
+  parts: string[];
+  sizeSlots: string[];
+  states: string[];
+  subElements: Record<string, string[]>;
+  systemConcerns: string[];
+  systemFolders: string[];
+  themeIdentity: string[];
+}
+const registries: NamingRegistries = 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'];
+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 parsedFiles: ParsedFile[] = themeFiles.map((file, index) => ({
+  ...parseSourceFile(themeSources[index]),
+  file: resolve(file).slice(resolve(themeRoot).length + 1),
+}));
+
+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,
+);
+
+const { components }: { components: Record<string, string> } = registries;
+const exemptFolders = Object.keys(registries.exemptFolders);
+const componentNames = [...new Set(Object.values(components))]
+  .sort((a, b) => b.length - a.length);
+
+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) => 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) => {
+    if (chassis.dependents.includes(folder)) allowed.add(chassis.component);
+  });
+  (registries.embeds?.[folder] ?? []).forEach((component) => allowed.add(component));
+  return allowed;
+};
+
+const RUNTIME_CONTRACT = new Set<string>(runtimeContract.variables.map(({ name }) => name));
+
+const RUNTIME_READS = new Set<string>(runtimeReads.variables.map(({ name }) => name));
+
+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}`),
+]);
+
+const VIZ_CONTRACT = new Set<string>(vizContract.variables.map(({ name }) => name));
+
+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;
+};
+
+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;
+};
+
+const baseWiringKind = (variable: string, file: string): 'star' | 'feeder' | null => wiringKindOf(
+  variable,
+  parsedByFile(file),
+  base,
+);
+
+const findings = {
+  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;
+      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() }
+        : {}),
+    };
+  }),
+
+  baseWiring: parsedFiles
+    .flatMap(({ file, folder, declarations }) => declarations
+      .map((variable) => ({ variable, kind: baseWiringKind(variable, file), folder }))
+      .filter((entry) => entry.kind && !exemptFolders.includes(entry.folder))
+      .map((entry) => `${entry.folder}: ${entry.variable} (${entry.kind})`))
+    .sort(),
+
+  systemTierNames: ((): string[] => {
+    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;
+        offenders.add(variable);
+      }));
+
+    return [...offenders].sort();
+  })(),
+
+  multipleDeclarationHomes: ((): string[] => {
+    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();
+  })(),
+
+  foreignReads: perFolder((files, folder) => {
+    const allowed = readsAllowedFor(folder);
+    const declaredHere = new Set(files.flatMap(({ declarations }) => declarations));
+    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);
+    }));
+
+    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;
+        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();
+  }),
+
+  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(),
+
+  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(),
+
+  crossWidgetStarImports: parsedFiles
+    .filter(({ folder }) => folder && !exemptFolders.includes(folder))
+    .flatMap(({ file, folder, uses }) => uses
+      .filter(({ spec, star }) => {
+        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;
+        return target !== folder && !registries.systemFolders.includes(target);
+      })
+      .map(({ spec }) => `${folder}: ${spec}`))
+    .filter((entry, index, all) => all.indexOf(entry) === index)
+    .sort(),
+
+  publicSurfaceUnused: ((): string[] => {
+    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: ((): string[] => {
+    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)
+        && !RUNTIME_READS.has(name) && !ACCENT_CONTRACT.has(name) && !VIZ_CONTRACT.has(name))
+      .sort();
+  })(),
+
+  publicSurfaceDifferences: ((): string[] => {
+    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(', ')}`);
+  })(),
+
+  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(),
+
+  unconsumedManifestReads: ((): string[] => {
+    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) => [
+          ...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();
+  })(),
+};
+
+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([]);
+});
+
+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(),
+  ];
+
+  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(/-$/, '');
+
+  const ordered = [...middleWords].sort((a, b) => b.length - a.length);
+  let middle = rest;
+  while (middle) {
+    const head = middle;
+    const word = ordered.find((candidate) => head === candidate
+      || head.startsWith(`${candidate}-`));
+    if (!word) {
+      return `"${head}" is neither a sub-element of ${component} nor a modifier`;
+    }
+    middle = head.slice(word.length).replace(/^-/, '');
+  }
+  return null;
+};
+
+test('migrated components follow the grammar strictly', () => {
+  const { migrated } = registries;
+  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', () => {
+  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', () => {
+  const offenders = walk(themeRoot, '.scss')
+    .flatMap((file) => collectCustomPropertyReferences(readFileSync(file, 'utf8'), sourceLabel(file))
+      .map((token) => `${sourceLabel(file)}: var(--dxds-${token})`))
+    .sort();
+
+  expect(offenders).toEqual([]);
+});
+
+const systemTier: string[] = registries.systemTier ?? [];
+
+const tierRecords = computeTierRecords(
+  themeSources,
+  registries,
+  new Set(findings.baseWiring
+    .map((entry) => required(/(\$[a-z0-9_-]+)/.exec(entry), `a variable in "${entry}"`)[1])),
+);
+const publicTierFiles = themeFiles.filter(isPublicManifestFile);
+const folderOf = (file: string): string => sourceLabel(file).split('/')[1];
+const tierDeclared = new Map<string, string>();
+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));
+});
+
+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));
+};
+
+const tierLinks = new Map<string, { target: string; file: string }>();
+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 });
+  });
+});
+
+const tierAliases: { property: string; target: string; source: string }[] = [];
+const tierCopies: { property: string; target: string; source: string }[] = [];
+themeFiles.forEach((file, index) => {
+  if (!/(^|\/)_(colors|sizes|variables)\.scss$/.test(file)) return;
+  parsedFiles[index].declaredValues.forEach(({ name, value, line }) => {
+    const target = /^(?:[A-Za-z]\w*\.)?\$([a-z0-9-]+)(?:\s*!default)?$/.exec(value)?.[1];
+    if (!target) return;
+    const home = tierDeclared.get(name);
+    if (!home || !tierDeclared.has(`$${target}`)) return;
+    const record = {
+      property: `--dx-${name.slice(1)}`,
+      target: `--dx-${target}`,
+      source: `${sourceLabel(file)}:${line}`,
+    };
+    (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} (${required(eligible.get(variable), 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;
+      const declaredIn = required(tierDeclared.get(variable), `${variable} declaration`);
+      return `--dx-${variable.slice(1)} (${sourceLabel(declaredIn)}): ${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');
+        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');
+      }
+    });
+  });
+  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');
+  expect(offenders).toEqual([]);
+});
+
+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');
+  expect(offenders).toEqual([]);
+});
+
+test('component tier: a link between two states must keep the state', () => {
+  const states = [...registries.states].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[] = [];
+  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])));
+    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', () => {
+  const declared = new Set([
+    ...[...tierDeclared.keys()].map((variable) => `--dx-${variable.slice(1)}`),
+    ...RUNTIME_CONTRACT,
+    ...RUNTIME_READS,
+    ...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([]);
+});
+
+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/overridden-parameters.baseline.json b/packages/devextreme-scss/tests/overridden-parameters.baseline.json
index 7381364f380b..8cffe53f1ed0 100644
--- a/packages/devextreme-scss/tests/overridden-parameters.baseline.json
+++ b/packages/devextreme-scss/tests/overridden-parameters.baseline.json
@@ -1,4 +1,109 @@
 [
+  {
+    "theme": "fluent-next",
+    "file": "scss/widgets/base/gridBase/_index.scss",
+    "property": "margin-left",
+    "selector": ".dx-datagrid .dx-column-indicators .dx-sort-index-icon",
+    "paintedOverBy": "scss/widgets/fluent-next/gridBase/_index.scss"
+  },
+  {
+    "theme": "fluent-next",
+    "file": "scss/widgets/base/gridBase/_index.scss",
+    "property": "margin-left",
+    "selector": ".dx-treelist .dx-column-indicators .dx-sort-index-icon",
+    "paintedOverBy": "scss/widgets/fluent-next/gridBase/_index.scss"
+  },
+  {
+    "theme": "fluent-next",
+    "file": "scss/widgets/base/gridBase/_index.scss",
+    "property": "padding-bottom",
+    "selector": ".dx-editor-cell.dx-editor-inline-block:not(.dx-command-select)::before",
+    "paintedOverBy": "scss/widgets/fluent-next/gridBase/_index.scss"
+  },
+  {
+    "theme": "fluent-next",
+    "file": "scss/widgets/base/gridBase/_index.scss",
+    "property": "padding-right",
+    "selector": ".dx-datagrid .dx-column-indicators .dx-sort-index-icon",
+    "paintedOverBy": "scss/widgets/fluent-next/gridBase/_index.scss"
+  },
+  {
+    "theme": "fluent-next",
+    "file": "scss/widgets/base/gridBase/_index.scss",
+    "property": "padding-right",
+    "selector": ".dx-treelist .dx-column-indicators .dx-sort-index-icon",
+    "paintedOverBy": "scss/widgets/fluent-next/gridBase/_index.scss"
+  },
+  {
+    "theme": "fluent-next",
+    "file": "scss/widgets/base/gridBase/_index.scss",
+    "property": "padding-top",
+    "selector": ".dx-editor-cell.dx-editor-inline-block:not(.dx-command-select)::before",
+    "paintedOverBy": "scss/widgets/fluent-next/gridBase/_index.scss"
+  },
+  {
+    "theme": "fluent-next",
+    "file": "scss/widgets/base/gridBase/layout/cell.scss",
+    "property": "padding",
+    "selector": ".dx-cell-modified, .dx-datagrid-invalid",
+    "paintedOverBy": "scss/widgets/fluent-next/gridBase/layout/cell.scss"
+  },
+  {
+    "theme": "fluent-next",
+    "file": "scss/widgets/base/gridBase/layout/cell.scss",
+    "property": "padding",
+    "selector": ".dx-cell-modified, .dx-treelist-invalid",
+    "paintedOverBy": "scss/widgets/fluent-next/gridBase/layout/cell.scss"
+  },
+  {
+    "theme": "fluent-next",
+    "file": "scss/widgets/base/pivotGrid/_index.scss",
+    "property": "padding",
+    "selector": ".dx-pivotgrid .dx-pivotgrid-area td",
+    "paintedOverBy": "scss/widgets/fluent-next/pivotGrid/_index.scss"
+  },
+  {
+    "theme": "fluent-next",
+    "file": "scss/widgets/base/scheduler/_index.scss",
+    "property": "padding",
+    "selector": ".dx-scheduler-work-space-week .dx-scheduler-all-day-appointment .dx-scheduler-appointment-content, .dx-scheduler-work-space-work-week .dx-scheduler-all-day-appointment .dx-scheduler-appointment-content, .dx-scheduler-work-space-day .dx-scheduler-all-day-appointment .dx-scheduler-appointment-content",
+    "paintedOverBy": "scss/widgets/fluent-next/scheduler/_index.scss"
+  },
+  {
+    "theme": "fluent-next",
+    "file": "scss/widgets/base/scheduler/appointment/regular/_index.scss",
+    "property": "box-shadow",
+    "selector": ".dx-scheduler-appointment",
+    "paintedOverBy": "scss/widgets/fluent-next/scheduler/_index.scss"
+  },
+  {
+    "theme": "fluent-next",
+    "file": "scss/widgets/base/scheduler/appointment/regular/_index.scss",
+    "property": "box-shadow",
+    "selector": ".dx-scheduler-appointment.dx-state-active, .dx-scheduler-appointment.dx-resizable-resizing",
+    "paintedOverBy": "scss/widgets/fluent-next/scheduler/_index.scss"
+  },
+  {
+    "theme": "fluent-next",
+    "file": "scss/widgets/base/scheduler/appointment/regular/_index.scss",
+    "property": "box-shadow",
+    "selector": ".dx-scheduler-appointment.dx-state-hover",
+    "paintedOverBy": "scss/widgets/fluent-next/scheduler/_index.scss"
+  },
+  {
+    "theme": "fluent-next",
+    "file": "scss/widgets/base/scheduler/appointment/regular/_index.scss",
+    "property": "box-shadow",
+    "selector": ".dx-scheduler-appointment.dx-state-hover.dx-resizable",
+    "paintedOverBy": "scss/widgets/fluent-next/scheduler/_index.scss"
+  },
+  {
+    "theme": "fluent-next",
+    "file": "scss/widgets/base/scheduler/appointment/regular/_index.scss",
+    "property": "box-shadow",
+    "selector": ".dx-scheduler-fixed-appointments .dx-draggable-dragging .dx-scheduler-appointment",
+    "paintedOverBy": "scss/widgets/fluent-next/scheduler/_index.scss"
+  },
   {
     "theme": "fluent",
     "file": "scss/widgets/base/gridBase/_index.scss",
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..1bc44d5da491
--- /dev/null
+++ b/packages/devextreme-scss/tests/public-renames.test.ts
@@ -0,0 +1,76 @@
+import { readFileSync, readdirSync, existsSync } from 'fs';
+import { join } from 'path';
+
+interface Entry {
+  name: string;
+  replacement: string | null;
+  release: string;
+  note: string;
+}
+
+const packageRoot = join(__dirname, '..');
+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]+)*$/;
+
+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);
+};
+
+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([]);
+});
+
+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
index 0a7cefce72d7..b0824c633357 100644
--- a/packages/devextreme-scss/tests/public-surface.baseline.json
+++ b/packages/devextreme-scss/tests/public-surface.baseline.json
@@ -46,5 +46,2313 @@
       "--dx-texteditor-color-text",
       "--dx-toolbar-height"
     ]
+  },
+  {
+    "themes": [
+      "fluent-next"
+    ],
+    "names": [
+      "--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-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-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-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-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-min-width",
+      "--dx-data-grid-group-panel-item-padding",
+      "--dx-data-grid-group-panel-item-padding-block",
+      "--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-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-title-size",
+      "--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-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-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-popup-width",
+      "--dx-file-manager-toolbar-viewmode-width",
+      "--dx-file-manager-tree-view-item-top-bottom-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-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-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-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-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-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-confirm-dialog-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-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-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-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-button-width",
+      "--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-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-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-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-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-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-size-margin-inline-start",
+      "--dx-pagination-page-sizes-compact-min-width",
+      "--dx-pagination-pages-count-padding-inline-start",
+      "--dx-pagination-separator-padding",
+      "--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-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-content",
+      "--dx-pivot-grid-drag-header-shadow",
+      "--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-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-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-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-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-margin-inline-end",
+      "--dx-scheduler-appointment-collector-margin-inline-start",
+      "--dx-scheduler-appointment-collector-width",
+      "--dx-scheduler-appointment-content",
+      "--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-height",
+      "--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-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-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-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-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-padding",
+      "--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-offset",
+      "--dx-speed-dial-action-fa-button-size",
+      "--dx-speed-dial-action-fa-button-spacing",
+      "--dx-speed-dial-action-fa-button-with-label-inset-inline",
+      "--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-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-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-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-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-bg",
+      "--dx-time-view-clock-arrow-offset",
+      "--dx-time-view-clock-arrow-width",
+      "--dx-time-view-clock-bg",
+      "--dx-time-view-clock-digits-bg",
+      "--dx-time-view-clock-margin-block-end",
+      "--dx-time-view-clock-shadow",
+      "--dx-time-view-clock-size",
+      "--dx-time-view-field-min-height",
+      "--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-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-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-width",
+      "--dx-tooltip-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-viz-bg",
+      "--dx-viz-bg-active",
+      "--dx-viz-bg-higher",
+      "--dx-viz-bg-hovered",
+      "--dx-viz-blue",
+      "--dx-viz-border",
+      "--dx-viz-border-active",
+      "--dx-viz-border-hovered",
+      "--dx-viz-content",
+      "--dx-viz-content-orange",
+      "--dx-viz-content-subtle",
+      "--dx-viz-content-subtler",
+      "--dx-viz-crosshair",
+      "--dx-viz-danger",
+      "--dx-viz-export-font-weight",
+      "--dx-viz-font-family",
+      "--dx-viz-font-weight",
+      "--dx-viz-gray",
+      "--dx-viz-gray-subtle",
+      "--dx-viz-green",
+      "--dx-viz-grid",
+      "--dx-viz-label-font-weight",
+      "--dx-viz-legend-title-font-weight",
+      "--dx-viz-orange",
+      "--dx-viz-pink",
+      "--dx-viz-primary",
+      "--dx-viz-purple",
+      "--dx-viz-purple-subtle",
+      "--dx-viz-red",
+      "--dx-viz-success",
+      "--dx-viz-tile-border",
+      "--dx-viz-title-font-weight",
+      "--dx-viz-tooltip-bg",
+      "--dx-viz-tooltip-content",
+      "--dx-viz-warning",
+      "--dx-viz-yellow",
+      "--dx-widget-bg"
+    ]
   }
 ]
diff --git a/packages/devextreme-scss/tests/public-surface.test.ts b/packages/devextreme-scss/tests/public-surface.test.ts
index e77353a04e2b..f16214432ae4 100644
--- a/packages/devextreme-scss/tests/public-surface.test.ts
+++ b/packages/devextreme-scss/tests/public-surface.test.ts
@@ -6,6 +6,7 @@ import { bundleName, compileBundle } from './compiled-bundles';
 jest.setTimeout(600000);
 
 const baselinePath = join(__dirname, 'public-surface.baseline.json');
+const journalPath = join(__dirname, '..', 'tools', 'naming', 'public-renames.json');
 
 interface Surface { theme: string; name: string; names: string[] }
 
@@ -44,6 +45,8 @@ const outside = (
 
 describe('names the themes publish as custom properties', () => {
   const baseline: Group[] = JSON.parse(readFileSync(baselinePath, 'utf8'));
+  const journal: { retired: { name: string }[] } = JSON.parse(readFileSync(journalPath, 'utf8'));
+  const retired = new Set(journal.retired.map(({ name }) => name));
   const current: Record<string, string[]> = {};
   const expected: Record<string, string[]> = {};
   let surfaces: Surface[] = [];
@@ -71,8 +74,17 @@ describe('names the themes publish as custom properties', () => {
     expect(differing).toEqual([]);
   });
 
+  const undocumented = (): string[] => outside(expected, current)
+    .filter((entry) => !retired.has(entry.slice(entry.indexOf(': ') + 2)));
+
+  test('no name leaves the published surface without a journal entry', () => {
+    expect(undocumented()).toEqual([]);
+  });
+
   if (process.env.UPDATE_NAMING_BASELINE === '1') {
     test('baseline regenerated', () => {
+      expect(undocumented()).toEqual([]);
+
       writeFileSync(baselinePath, `${JSON.stringify(grouped(current), null, 2)}\n`);
 
       expect(Object.values(current).flat().length).toBeGreaterThan(0);
diff --git a/packages/devextreme-scss/tests/required.ts b/packages/devextreme-scss/tests/required.ts
new file mode 100644
index 000000000000..b16e7a061894
--- /dev/null
+++ b/packages/devextreme-scss/tests/required.ts
@@ -0,0 +1,4 @@
+export const required = <T>(value: T | null | undefined, what: string): T => {
+  if (value === null || value === undefined) throw new Error(`${what} is missing`);
+  return value;
+};
diff --git a/packages/devextreme-scss/tests/runtime-reads.test.ts b/packages/devextreme-scss/tests/runtime-reads.test.ts
new file mode 100644
index 000000000000..3426fdb6dd26
--- /dev/null
+++ b/packages/devextreme-scss/tests/runtime-reads.test.ts
@@ -0,0 +1,84 @@
+import {
+  readFileSync,
+  readdirSync,
+  statSync,
+  existsSync,
+} from 'fs';
+import { join, sep } from 'path';
+
+import accent from '../tools/naming/accent-contract.json';
+import written from '../tools/naming/runtime-contract.json';
+import contract from '../tools/naming/runtime-reads.json';
+import painted from '../tools/naming/viz-contract.json';
+
+const packageRoot = join(__dirname, '..');
+const repoRoot = join(packageRoot, '..', '..');
+const themeRoot = join(packageRoot, 'scss', 'widgets', 'fluent-next');
+const artifactsCss = join(packageRoot, '..', 'devextreme', 'artifacts', 'css');
+const runtimeRoot = join(repoRoot, 'packages', 'devextreme', 'js', '__internal');
+
+const walk = (dir: string, extensions: string[]): string[] => readdirSync(dir).flatMap((entry) => {
+  const absolute = join(dir, entry);
+  if (statSync(absolute).isDirectory()) return walk(absolute, extensions);
+  return extensions.some((extension) => entry.endsWith(extension)) ? [absolute] : [];
+});
+
+const declaredNames = (): Set<string> => new Set(walk(themeRoot, ['.scss']).flatMap((file) => [
+  ...readFileSync(file, 'utf8').matchAll(/^\s*(--dx-[a-z0-9-]+)\s*:/gm),
+].map(([, name]) => name)));
+
+test('every runtime-read name is still declared by the theme', () => {
+  const declared = declaredNames();
+  expect(contract.variables.map(({ name }) => name).filter((name) => !declared.has(name)))
+    .toEqual([]);
+});
+
+test('every runtime-read name is still read by the file the contract names', () => {
+  const offenders = contract.variables.flatMap(({ name, readBy }) => {
+    const file = join(repoRoot, readBy);
+    if (!existsSync(file)) return [`${name}: ${readBy} does not exist`];
+    return readFileSync(file, 'utf8').includes(`'${name}'`) ? [] : [`${name}: not read in ${readBy}`];
+  });
+  expect(offenders).toEqual([]);
+});
+
+test('no other place in the runtime reads a --dx-* name', () => {
+  const known = new Set([
+    ...contract.variables.map(({ name }) => name),
+    ...written.variables.map(({ name }) => name),
+    ...painted.variables.map(({ name }) => name),
+    accent.input.name,
+    accent.source.name,
+    ...accent.settings.map(({ name }) => name),
+    ...accent.steps.values.map((step) => `${accent.steps.prefix}${step}`),
+  ]);
+  const unlisted = walk(runtimeRoot, ['.ts', '.tsx'])
+    .filter((file) => !file.includes(`${sep}__tests__${sep}`) && !file.endsWith('.test.ts'))
+    .flatMap((file) => [...readFileSync(file, 'utf8').matchAll(/'(--dx-(?!ds-)[a-z0-9-]+)'/g)]
+      .map(([, name]) => name)
+      .filter((name) => !known.has(name))
+      .map((name) => `${name} in ${file.slice(repoRoot.length + 1)}`));
+  expect([...new Set(unlisted)]).toEqual([]);
+});
+
+const bundles = existsSync(artifactsCss)
+  ? readdirSync(artifactsCss).filter((name) => /^dx\.fluent-next\..*[^n]\.css$/.test(name)).sort()
+  : [];
+
+const resolve = (css: string, name: string): string | undefined => {
+  const declared = [...css.matchAll(new RegExp(`${name}\\s*:\\s*([^;}]+)`, 'g'))].pop()?.[1].trim();
+  const reference = declared && /^var\(\s*(--dx(?:ds)?-[a-z0-9-]+)\s*\)$/.exec(declared);
+  return reference ? resolve(css, reference[1]) : declared;
+};
+
+(bundles.length ? describe : describe.skip)('values the runtime can actually parse', () => {
+  test.each(bundles)('%s declares every length as a plain length', (bundle) => {
+    const css = readFileSync(join(artifactsCss, bundle), 'utf8');
+    const offenders = contract.variables
+      .filter(({ kind }) => kind === 'length')
+      .map(({ name }) => ({ name, value: resolve(css, name) }))
+      .filter(({ value }) => !value || !/^-?\d*\.?\d+(px|rem)?$/.test(value))
+      .map(({ name, value }) => `${name}: ${value ?? 'not declared'} - themeLength reads px and rem only`);
+    expect(offenders).toEqual([]);
+  });
+});
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..235c85336fbd
--- /dev/null
+++ b/packages/devextreme-scss/tests/theme-mode-scope.test.ts
@@ -0,0 +1,111 @@
+import { existsSync, readdirSync, readFileSync } from 'fs';
+import { join } from 'path';
+import postcss from 'postcss';
+
+const packageRoot = join(__dirname, '..');
+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)');
+}
+
+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}`);
+
+const isDocumentRoot = (selector: string): boolean => [':root', 'html'].includes(subjectOf(selector));
+
+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 };
+};
+
+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..a39392bb0d0d
--- /dev/null
+++ b/packages/devextreme-scss/tests/tier-publish.test.ts
@@ -0,0 +1,496 @@
+import { execFileSync } from 'child_process';
+import { join } from 'path';
+
+import { stripScssComments } from '../build/tokens/consumed-tokens';
+import {
+  type Publication, type Registries, type SourceFile,
+  COLLECTOR_PATH, GENERATED_MARKER,
+  byCodepoint, parseLinksFile, planPublication, renderCollector, renderPublicFile, stalePaths,
+  tierRecords, useSpecFor,
+} from '../tools/naming/tier';
+import { required } from './required';
+
+const BADGE_PUBLIC = 'fluent-next/badge/_public.scss';
+
+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[] = [],
+): Publication => planPublication(
+  themeFiles,
+  baseFiles,
+  registries(overrides),
+  new Map(Object.entries(existing)),
+);
+
+const lines = (content: string): string[] => content.split('\n').filter((line) => line.startsWith('  --dx-'));
+
+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 = required(plan(files).files.get(BADGE_PUBLIC), BADGE_PUBLIC);
+    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 = required(plan(badge()).files.get(BADGE_PUBLIC), BADGE_PUBLIC);
+    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 = required(plan(badge()).files.get(BADGE_PUBLIC), BADGE_PUBLIC);
+    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 = required(plan(badge(), links).files.get(BADGE_PUBLIC), BADGE_PUBLIC);
+    expect(withLinks).toContain('@use "public-links" as links;');
+    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'));
+  });
+});
+
+describe('eligibility', () => {
+  const reasons = (files: SourceFile[], wiring: string[] = []): Record<string, string | null> => (
+    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, the marker, 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-static: #107c10 !default; // dx-data-uri-static: ds.$color-bg-success',
+        '$badge-check: #fff;',
+        '$badge-size: 16px;',
+        '$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); }',
+        '.dx-badge-large { @include badge-icons-mixin($badge-size); }',
+      ].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-static': 'data-uri',
+      '$badge-check': null,
+      '$badge-size': null,
+      '$badge-bg': null,
+    });
+  });
+
+  test('a declaration is read up to its semicolon, across lines and past one inside a string', () => {
+    const records = tierRecords([file('fluent-next/badge/_sizes.scss', [
+      '$badge-padding:',
+      '  2px',
+      '  4px !default;',
+      '$badge-glyph: url("data:image/svg+xml;charset=utf8,%3Csvg/%3E");',
+      '$badge-size: 16px;',
+    ].join('\n'))], registries(), new Set());
+    const values = Object.fromEntries([...records]
+      .map(([variable, { value }]) => [variable, value]));
+    expect(values).toEqual({
+      '$badge-padding': '2px 4px',
+      '$badge-glyph': 'url("data:image/svg+xml;charset=utf8,%3Csvg/%3E")',
+      '$badge-size': '16px',
+    });
+  });
+
+  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']);
+  });
+});
+
+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 = required(plan(badge()).files.get(BADGE_PUBLIC), BADGE_PUBLIC);
+    const after = required(
+      plan(badge('$badge-bg: ds.$color-primary;\n')).files.get(BADGE_PUBLIC),
+      BADGE_PUBLIC,
+    );
+    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 = required(plan(files).files.get(COLLECTOR_PATH), 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): Record<string, 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.ts 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',
+    ]);
+  });
+});
+
+test('publish.ts --check passes on the committed tree', () => {
+  const output = execFileSync(process.execPath, ['tools/naming/publish.ts', '--check'], {
+    cwd: join(__dirname, '..'),
+    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..38aeb5169014
--- /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 = join(__dirname, '..');
+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..7720058d33d0
--- /dev/null
+++ b/packages/devextreme-scss/tests/tokens-report.test.ts
@@ -0,0 +1,398 @@
+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}` }),
+);
+
+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 = /^ {2}… and (\d+) more(?:, (\d+) file\(s\) not shown)?$/.exec(line);
+    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) {
+      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: [],
+    });
+  });
+
+  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 |');
+  });
+
+  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');
+  });
+
+  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);
+  });
+
+  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: string; name: string; was: string; now: string;
+  } => ({
+    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)');
+  });
+
+  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');
+  });
+
+  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,
+    });
+  });
+
+  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,
+    });
+  });
+
+  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', () => {
+  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/unused-elements.test.ts b/packages/devextreme-scss/tests/unused-elements.test.ts
index 07fb62e8108f..d25f9bd65f32 100644
--- a/packages/devextreme-scss/tests/unused-elements.test.ts
+++ b/packages/devextreme-scss/tests/unused-elements.test.ts
@@ -100,7 +100,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/tests/viz-contract.test.ts b/packages/devextreme-scss/tests/viz-contract.test.ts
new file mode 100644
index 000000000000..aeec05bc33e5
--- /dev/null
+++ b/packages/devextreme-scss/tests/viz-contract.test.ts
@@ -0,0 +1,190 @@
+import { existsSync, readFileSync, readdirSync } from 'fs';
+import { join } from 'path';
+
+import vizContract from '../tools/naming/viz-contract.json';
+
+const contract = vizContract as {
+  declaredIn: Record<string, string>;
+  readBy: string;
+  palette: string;
+  variables: {
+    name: string; role?: string; from?: string; declaredIn?: string; declaredPerMode: boolean;
+  }[];
+};
+
+const packageRoot = join(__dirname, '..');
+const stylesheet = (path: string): string => readFileSync(
+  join(packageRoot, 'scss', 'widgets', ...path.split('/')),
+  'utf8',
+);
+const source = (path: string): string => readFileSync(join(packageRoot, '..', '..', ...path.split('/')), 'utf8');
+const artifactsCss = join(packageRoot, '..', 'devextreme', 'artifacts', 'css');
+
+const contractNames = contract.variables.map(({ name }) => name).sort();
+const variableOf = (name: string): string => `$${name.slice('--dx-'.length)}`;
+const MODE_SCOPES = ['.dx-theme-mode-light', '.dx-theme-mode-dark', '.dx-theme-mode-inverted'];
+
+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`');
+}
+
+interface Declaration { selectors: string[]; value: string }
+
+const indexes = new Map<string, Map<string, Declaration[]>>();
+
+const indexOf = (css: string): Map<string, Declaration[]> => {
+  const cached = indexes.get(css);
+  if (cached) return cached;
+
+  const index = new Map<string, Declaration[]>();
+  [...css.matchAll(/([^{}]*)\{([^{}]*)\}/g)].forEach(([, prefix, body]) => {
+    const lastInBlock = new Map<string, string>();
+    [...body.matchAll(/(--[\w-]+):([^;}]*)/g)].forEach(([, name, value]) => lastInBlock.set(name, value));
+    const selectors = prefix.split(',').map((part) => part.trim());
+    lastInBlock.forEach((value, name) => {
+      index.set(name, [...(index.get(name) ?? []), { selectors, value: value.trim() }]);
+    });
+  });
+  indexes.set(css, index);
+  return index;
+};
+
+const declarationsOf = (css: string, name: string): Declaration[] => indexOf(css).get(name) ?? [];
+
+const onRoot = (css: string, name: string): string | undefined => declarationsOf(css, name)
+  .find(({ selectors }) => selectors.includes(':root'))?.value;
+
+const resolved = (css: string, name: string): string => {
+  const expand = (value: string, depth: number): string => {
+    if (depth > 12 || !value.includes('var(')) {
+      return value;
+    }
+
+    return value.split(/,(?![^(]*\))/).map((part) => {
+      const [, next, fallback] = /^\s*var\((--[a-z0-9-]+)(?:,(.*))?\)\s*$/i.exec(part) ?? [];
+
+      if (!next) return part.trim();
+
+      const deeper = next.startsWith('--dx-accent-color')
+        ? (fallback ?? '').trim()
+        : onRoot(css, next) ?? (fallback ?? '').trim();
+
+      return expand(deeper, depth + 1);
+    }).join(', ');
+  };
+
+  return expand(onRoot(css, name) ?? '', 0);
+};
+
+const sameValue = (first: string, second: string): boolean => {
+  const plain = (value: string): string => value
+    .toLowerCase()
+    .replace(/["']/g, '')
+    .replace(/\s*,\s*/g, ',')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  return plain(first) === plain(second);
+};
+
+test('every contract name is declared from the role, or from the name, the contract states', () => {
+  const offenders = contract.variables.flatMap(({
+    name, role, from, declaredIn: where, declaredPerMode,
+  }) => {
+    const declaredFromRole = declaredPerMode
+      ? contract.declaredIn.perMode
+      : contract.declaredIn.onRootOnly;
+    const declaredIn = from
+      ? contract.declaredIn.linked
+      : contract.declaredIn[where ?? ''] ?? declaredFromRole;
+    const declaration = from
+      ? `${name}: var(${from});`
+      : `${variableOf(name)}: ds.$${role} !default;`;
+
+    return stylesheet(declaredIn).includes(declaration)
+      ? []
+      : [`${declaredIn} does not declare ${declaration}`];
+  });
+
+  expect(offenders).toEqual([]);
+});
+
+test('the chart themes and the palette read exactly the contract names', () => {
+  const read = [...new Set([...source(contract.readBy), ...source(contract.palette)]
+    .join('')
+    .matchAll(/(--dx-viz-[a-z-]+)/g))]
+    .map((match) => match[1]);
+
+  expect([...new Set(read)].sort()).toEqual(contractNames);
+});
+
+test('a name declared per mode is on every mode scope, the rest only on the root', () => {
+  const offenders = bundleNames.flatMap((bundle) => {
+    const css = readFileSync(join(artifactsCss, bundle), 'utf8');
+
+    return contract.variables.flatMap(({ name, declaredPerMode }) => {
+      const selectors = declarationsOf(css, name).flatMap(({ selectors: each }) => each);
+      const onScopes = MODE_SCOPES.filter((scope) => selectors.includes(scope));
+
+      if (!selectors.includes(':root')) return [`${bundle}: ${name} is not declared on :root`];
+
+      return declaredPerMode
+        ? MODE_SCOPES.filter((scope) => !selectors.includes(scope))
+          .map((scope) => `${bundle}: ${name} is declared per mode but not on ${scope}`)
+        : onScopes.map((scope) => `${bundle}: ${name} is not declared per mode but appears on ${scope}, `
+          + 'which would shadow an application that writes it on the root');
+    });
+  });
+
+  expect(offenders).toEqual([]);
+});
+
+const constantOf = (name: string): string => `VIZ_${name.slice('--dx-viz-'.length).toUpperCase().replace(/-/g, '_')}`;
+
+const fallbackTable = (theme: string, table: string): Record<string, string> => {
+  const body = new RegExp(`const ${table}[^=]*= \\{([\\s\\S]*?)\\n\\};`).exec(theme)?.[1] ?? '';
+  const unquote = (value: string): string => value.replace(/\\'/g, "'");
+  const named = (identifier: string): string => unquote(
+    new RegExp(`const ${identifier} = '((?:[^'\\\\]|\\\\.)*)'`).exec(theme)?.[1] ?? '',
+  );
+
+  return Object.fromEntries([...body.matchAll(/\[(VIZ_[A-Z_]+)\]: (?:'((?:[^'\\\\]|\\\\.)*)'|([A-Z_]+))/g)]
+    .map((match) => [match[1], match[2] === undefined ? named(match[3]) : unquote(match[2])]));
+};
+
+const paletteFallbacks = (): Record<string, string> => Object.fromEntries(
+  [...source(contract.palette).matchAll(/var\((--dx-viz-[a-z-]+), ([^)]*)\)/g)]
+    .map((match) => [constantOf(match[1]), match[2].trim()]),
+);
+
+test('the literal written beside every reference is the value the name carries', () => {
+  const theme = source(contract.readBy);
+  const light = { ...fallbackTable(theme, 'LIGHT'), ...paletteFallbacks() };
+  const dark = { ...light, ...fallbackTable(theme, 'DARK') };
+  const offenders: string[] = [];
+
+  ([['light', light], ['dark', dark]] as [string, Record<string, string>][]).forEach(([mode, fallbacks]) => {
+    const css = readFileSync(join(artifactsCss, `dx.fluent-next.blue.${mode}.css`), 'utf8');
+
+    contract.variables.forEach(({ name }) => {
+      const fallback = fallbacks[constantOf(name)];
+      const carried = resolved(css, name);
+
+      if (!fallback) {
+        offenders.push(`${mode}: ${name} has no fallback in the theme`);
+        return;
+      }
+
+      if (carried && !sameValue(carried, fallback)) {
+        offenders.push(`${mode}: ${name} carries ${carried}, the theme falls back to ${fallback}`);
+      }
+    });
+  });
+
+  expect(offenders).toEqual([]);
+});
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..d20c8798273a
--- /dev/null
+++ b/packages/devextreme-scss/tools/naming/accent-contract.json
@@ -0,0 +1,35 @@
+{
+  "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, through themes.customAccentColor or by hand, 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": "themes.customAccentColor(color), the documented entry point, or the application itself writing the property on the root element",
+    "acceptedForms": "any colour the browser parses, including var(--custom-property) pointing at one; a value that resolves to no colour, or to another element's colour such as currentColor or inherit, is refused with W0024",
+    "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",
+    "alpha": "every step ends in `/ 1`: relative colour syntax hands the alpha of the origin colour down, so an accent written with one would otherwise fade the whole scale",
+    "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/derive-registries.ts b/packages/devextreme-scss/tools/naming/derive-registries.ts
new file mode 100644
index 000000000000..d9292f319069
--- /dev/null
+++ b/packages/devextreme-scss/tools/naming/derive-registries.ts
@@ -0,0 +1,1150 @@
+import {
+  readFileSync, writeFileSync, readdirSync, statSync,
+} from 'fs';
+import { join } from 'path';
+import { createRequire } from 'module';
+
+interface Overrides {
+  components: Record<string, string>;
+  systemFolders: string[];
+  systemTier: string[];
+  declarationHome: Record<string, string>;
+  chassis: Record<string, { component: string; dependents: string[] }>;
+  embeds: Record<string, string[]>;
+  rootSelectors: Record<string, string[]>;
+  systemConcerns: string[];
+  themeIdentity: string[];
+  exemptFolders: Record<string, string>;
+  partExclude: string[];
+  partsAdd: string[];
+  partsRemove: string[];
+  states: string[];
+  modifiers: Record<string, string[]>;
+  sizeSlots: string[];
+  migrated: string[];
+  sassOnly: Record<string, string>;
+  subElements: Record<string, string[]>;
+}
+
+const here = import.meta.dirname;
+const resolveFromHere = createRequire(import.meta.url);
+const packageRoot = join(here, '..', '..');
+const themeDir = join(packageRoot, 'scss', 'widgets', 'fluent-next');
+const flatTokens = resolveFromHere.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: 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', 'viz'],
+
+  // 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', 'viz'],
+
+  // component -> folder that is allowed to declare it (exactly one declaration home).
+  // Only needed where more than one folder currently declares the component's variables.
+  declarationHome: {
+    grid: 'gridBase',
+  },
+
+  // 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 those get 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',
+      ],
+    },
+  },
+
+  /*
+   * The 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'],
+  },
+
+  /*
+   * 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); converting a declaration to the tier 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 is converted.
+   */
+  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],
+    viz: [':root'],
+    /*
+     * 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'],
+    /*
+     * 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', '.dx-chat-suggestions'],
+    // 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'],
+    // 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 widget paints boxes the JS renders outside the widget
+     * element — the appointment editor and the appointment tooltip. Each class sits on the overlay
+     * WRAPPER, so it is an ancestor of the painted box. fileManager is the same class of widget and
+     * is listed with its dialogs above.
+     */
+    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'],
+    // 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 when converting: 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 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',
+    'viz',
+  ],
+
+  /*
+   * 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, 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.
+  /*
+   * The list is empty: 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). 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).
+    'shadow-ambient',
+    'shadow-key',
+  ],
+
+  // A button inside another widget is a nested component, 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 under the logical-axes rule).
+   */
+  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',
+  ],
+
+  // 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',
+    // the finished tails
+    'switch', 'date-view', 'gallery',
+    'typography', 'toolbar', 'overlay', 'informer', 'scroll-view', 'context-menu', 'fieldset',
+    'menu', 'progress-bar', 'load-indicator', 'drop-down-menu',
+    // 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',
+    // the components the tier never reached
+    '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',
+  ],
+
+  /*
+   * Declarations the tier does not publish because nothing would read the custom property: the
+   * value reaches CSS only as Sass - an argument of a base mixin, or a rule that reads the
+   * variable itself - so `--dx-…` set by an application would move nothing, and a published name
+   * cannot be withdrawn after release. Wiring the reads through var() is what takes a name off
+   * this list.
+   */
+  sassOnly: {
+    '$radio-button-size': 'an argument of the base radio-button mixin (radioButton/_index.scss)',
+    '$radio-button-border-width': 'an argument of the base radio-button mixin (radioButton/_index.scss)',
+    '$radio-button-dot-size': 'an argument of the base radio-button mixin (radioButton/_index.scss)',
+    '$diagram-toolbar-icon-size': 'read as Sass by the diagram rules and passed to the base icon mixins',
+    '$diagram-toolbar-colorbutton-border-width': 'read as Sass by the diagram rules and passed to the base mixin',
+    '$file-manager-large-icon-size': 'an argument of the base file-manager icons mixin, set per size mode',
+    '$text-editor-input-filled-padding': 'read as Sass by the filled text-editor rule',
+    '$text-editor-label-transition': 'an argument of the base label mixins (textEditor/_index.scss)',
+    '$tree-view-container-padding': 'an argument of the base tree-view mixin (treeView/_index.scss)',
+  },
+
+  /*
+   * 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: {
+    // 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'],
+    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'],
+    // 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'],
+    /*
+     * 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'],
+    // .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.
+     */
+    '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',
+      'dial'],
+    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: [
+      // 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'],
+    /*
+     * 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: [
+      // 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',
+      // .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: [
+      // 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: [
+      // 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',
+      // 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',
+      // the AI dialog's Generate and Cancel buttons, sized by the theme for the runtime to read
+      'button'],
+    '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: [
+      // anatomy the folder needed to enter `migrated`
+      'content', 'optional-mark', 'step', 'step-indicator', 'step-label', 'label', 'connector', 'value', 'icon', 'text',
+      'item', 'container',
+      // 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'],
+    /*
+     * 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',
+    ],
+    /*
+     * 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': [
+      // 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',
+      // .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': [
+      // 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',
+    ],
+    /*
+     * 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 (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',
+      // 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',
+    ],
+  },
+};
+const kebab = (folder: string): string => folder.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+
+const listFolders = (dir: string): string[] => readdirSync(dir)
+  .filter((entry) => statSync(join(dir, entry)).isDirectory())
+  .sort();
+
+const sortedUnique = (values: string[]): string[] => [...new Set(values)].sort();
+
+const stripState = (name: string, states: string[]): { base: string; state: string | null } => {
+  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 };
+};
+
+interface Derived { parts: string[] }
+
+const deriveFromTokens = (states: string[]): Derived => {
+  const { tokens }: { tokens: Record<string, unknown> } = 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<string>();
+
+  names.forEach((name) => {
+    const { base } = stripState(name, states);
+    const marker = base.indexOf('-color-');
+    if (marker === -1) return;
+    const tail = base.slice(marker + '-color-'.length);
+    if (tail) {
+      const segments = tail.split('-');
+      parts.add(segments[segments.length - 1]);
+    }
+  });
+
+  return {
+    parts: [...parts],
+  };
+};
+
+const assertParseable = (
+  parts: string[],
+  states: string[],
+  subElements: Record<string, string[]>,
+): void => {
+  const clash = (a: string[], b: string[]): string[] => 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.join(',')}`);
+  }
+
+  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.join(',')}`);
+    }
+  });
+};
+
+const assertRootSelectorsExist = (rootSelectors: Record<string, string[]>): void => {
+  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 = (): Record<string, unknown> => {
+  const folders = listFolders(themeDir);
+  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: Record<string, string> = {};
+  folders.forEach((folder) => {
+    if (OVERRIDES.systemFolders.includes(folder)) return;
+    components[folder] = OVERRIDES.components[folder] ?? kebab(folder);
+  });
+
+  const declarationHome: Record<string, string> = {};
+  Object.entries(components).forEach(([folder, component]) => {
+    declarationHome[component] = OVERRIDES.declarationHome[component] ?? folder;
+  });
+
+  const { subElements } = OVERRIDES;
+  assertParseable(parts, OVERRIDES.states, subElements);
+
+  const rootSelectors: Record<string, string[]> = {};
+  [...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.ts — 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.',
+    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,
+    embeds: OVERRIDES.embeds,
+    subElements,
+    migrated: OVERRIDES.migrated,
+    sassOnly: OVERRIDES.sassOnly,
+  };
+};
+
+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.ts\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/public-renames.json b/packages/devextreme-scss/tools/naming/public-renames.json
new file mode 100644
index 000000000000..ca15c95b759b
--- /dev/null
+++ b/packages/devextreme-scss/tools/naming/public-renames.json
@@ -0,0 +1,10 @@
+{
+  "$comment": "Journal of retired component-tier names \u2014 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 \u2014 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": []
+}
diff --git a/packages/devextreme-scss/tools/naming/publish.ts b/packages/devextreme-scss/tools/naming/publish.ts
new file mode 100644
index 000000000000..5ab4b97035d8
--- /dev/null
+++ b/packages/devextreme-scss/tools/naming/publish.ts
@@ -0,0 +1,83 @@
+import {
+  readFileSync,
+  writeFileSync,
+  readdirSync,
+  statSync,
+  existsSync,
+} from 'fs';
+import {
+  join, dirname, relative, sep,
+} from 'path';
+
+import { stripScssComments } from '../../build/tokens/consumed-tokens.ts';
+import {
+  type Registries,
+  type SourceFile,
+  byCodepoint, planPublication, stalePaths, THEME, PUBLIC_FILE, LINKS_FILE, COLLECTOR_PATH,
+} from './tier.ts';
+
+const here = import.meta.dirname;
+const packageRoot = join(here, '..', '..');
+const widgetsRoot = join(packageRoot, 'scss', 'widgets');
+const registries: Registries = JSON.parse(readFileSync(join(here, 'registries.json'), 'utf8'));
+
+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 toPosix = (absolute: string): string => relative(widgetsRoot, absolute).split(sep).join('/');
+
+const sourceFile = (absolute: string): SourceFile => {
+  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<string, string>();
+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 {
+  const stalePathSet = new Set(stale);
+  [...plan.files]
+    .filter(([path]) => stalePathSet.has(path))
+    .sort(([a], [b]) => byCodepoint(a, b))
+    .forEach(([path, content]) => {
+      const absolute = join(widgetsRoot, path);
+      if (!existsSync(dirname(absolute))) {
+        throw new Error(`${path}: the folder does not exist`);
+      }
+      writeFileSync(absolute, content);
+      process.stdout.write(`wrote ${path}\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..e43b87d18bba
--- /dev/null
+++ b/packages/devextreme-scss/tools/naming/registries.json
@@ -0,0 +1,2012 @@
+{
+  "$comment": "GENERATED by tools/naming/derive-registries.ts — 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.",
+  "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",
+    "viz"
+  ],
+  "systemTier": [
+    "common",
+    "typography",
+    "viz"
+  ],
+  "systemConcerns": [
+    "backdrop",
+    "focus-rect",
+    "global",
+    "invalid-badge",
+    "mention",
+    "motion",
+    "palette",
+    "separator",
+    "shadow",
+    "state",
+    "surface",
+    "typography",
+    "valid-badge",
+    "viz"
+  ],
+  "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",
+      ".dx-filemanager-context-menu",
+      ".dx-filemanager-dialog-name-editor-popup",
+      ".dx-filemanager-dialog-delete-item-popup",
+      ".dx-filemanager-view-switcher-popup"
+    ],
+    "tabs": [
+      ".dx-tabs"
+    ],
+    "chat": [
+      ".dx-chat",
+      ".dx-messagelist-context-menu-content",
+      ".dx-chat-confirmation-popup-wrapper",
+      ".dx-chat-suggestions"
+    ],
+    "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"
+    ],
+    "viz": [
+      ":root"
+    ]
+  },
+  "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"
+  ],
+  "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"
+    ]
+  },
+  "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",
+      "dial"
+    ],
+    "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",
+      "button"
+    ],
+    "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"
+    ]
+  },
+  "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"
+  ],
+  "sassOnly": {
+    "$radio-button-size": "an argument of the base radio-button mixin (radioButton/_index.scss)",
+    "$radio-button-border-width": "an argument of the base radio-button mixin (radioButton/_index.scss)",
+    "$radio-button-dot-size": "an argument of the base radio-button mixin (radioButton/_index.scss)",
+    "$diagram-toolbar-icon-size": "read as Sass by the diagram rules and passed to the base icon mixins",
+    "$diagram-toolbar-colorbutton-border-width": "read as Sass by the diagram rules and passed to the base mixin",
+    "$file-manager-large-icon-size": "an argument of the base file-manager icons mixin, set per size mode",
+    "$text-editor-input-filled-padding": "read as Sass by the filled text-editor rule",
+    "$text-editor-label-transition": "an argument of the base label mixins (textEditor/_index.scss)",
+    "$tree-view-container-padding": "an argument of the base tree-view mixin (treeView/_index.scss)"
+  }
+}
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/runtime-reads.json b/packages/devextreme-scss/tools/naming/runtime-reads.json
new file mode 100644
index 000000000000..c50df97d7c5a
--- /dev/null
+++ b/packages/devextreme-scss/tools/naming/runtime-reads.json
@@ -0,0 +1,53 @@
+{
+  "comment": "The CSS -> JS contract, the mirror of runtime-contract.json: --dx-* names the tier declares for the runtime to read back with getComputedStyle. No stylesheet reads them, so reachability.ts counts them live from this file instead of pinning them as dead API, and tests/runtime-reads.test.ts holds every end - the tier still declares each name, the file named in readBy still reads it, no other file in js/__internal reads a --dx-* name without being listed here, and every `length` value resolves to a plain length in the built bundles (themeLength parses px and rem only, so a calc() or a keyword would read as 'not declared' and the runtime would silently keep its legacy literal).",
+  "variables": [
+    {
+      "name": "--dx-speed-dial-action-fa-button-offset",
+      "kind": "length",
+      "readBy": "packages/devextreme/js/__internal/ui/speed_dial_action/speed_dial_main_item.ts",
+      "meaning": "distance from the main button to the first action button"
+    },
+    {
+      "name": "--dx-speed-dial-action-fa-button-spacing",
+      "kind": "length",
+      "readBy": "packages/devextreme/js/__internal/ui/speed_dial_action/speed_dial_main_item.ts",
+      "meaning": "distance between two neighbouring action buttons"
+    },
+    {
+      "name": "--dx-speed-dial-action-fa-button-with-label-inset-inline",
+      "kind": "length",
+      "readBy": "packages/devextreme/js/__internal/ui/speed_dial_action/speed_dial_main_item.ts",
+      "meaning": "horizontal shift of a labelled action button when the main button has no label"
+    },
+    {
+      "name": "--dx-html-editor-ai-dialog-button-width",
+      "kind": "length",
+      "readBy": "packages/devextreme/js/__internal/ui/html_editor/ui/aiDialog.ts",
+      "meaning": "width of the Generate and Cancel buttons of the AI dialog"
+    },
+    {
+      "name": "--dx-file-manager-toolbar-viewmode-popup-width",
+      "kind": "length",
+      "readBy": "packages/devextreme/js/__internal/ui/file_manager/ui.file_manager.toolbar.ts",
+      "meaning": "width of the view-mode switcher popup"
+    },
+    {
+      "name": "--dx-grid-ai-confirm-dialog-width",
+      "kind": "length",
+      "readBy": "packages/devextreme/js/__internal/grids/grid_core/ai_assistant/utils.ts",
+      "meaning": "width of the dialog that confirms aborting an AI request"
+    },
+    {
+      "name": "--dx-scheduler-appointment-min-height",
+      "kind": "length",
+      "readBy": "packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/options/get_view_model_options.ts",
+      "meaning": "minimum height of an appointment in the month and all-day layouts"
+    },
+    {
+      "name": "--dx-theme-mode",
+      "kind": "keyword",
+      "readBy": "packages/devextreme/js/__internal/core/utils/theme_mode.ts",
+      "meaning": "the colour mode an element resolves to; a style query reads the same name from CSS"
+    }
+  ]
+}
diff --git a/packages/devextreme-scss/tools/naming/tier.ts b/packages/devextreme-scss/tools/naming/tier.ts
new file mode 100644
index 000000000000..7a7ccf69cce8
--- /dev/null
+++ b/packages/devextreme-scss/tools/naming/tier.ts
@@ -0,0 +1,569 @@
+import { posix } from 'node:path';
+
+export interface SourceFile {
+  path: string;
+  folder: string;
+  raw: string;
+  stripped: string;
+}
+
+export interface Use { spec: string; star: boolean; alias: string | null }
+export interface NamespacedReference { namespace: string; name: string }
+export interface DeclaredValue { name: string; value: string; line: number }
+export interface Parsed {
+  path: string;
+  folder: string;
+  declarations: string[];
+  declaredValues: DeclaredValue[];
+  references: string[];
+  bareReferences: string[];
+  namespacedReferences: NamespacedReference[];
+  uses: Use[];
+}
+
+export interface Registries {
+  components: Record<string, string>;
+  declarationHome: Record<string, string>;
+  exemptFolders: Record<string, string>;
+  systemTier?: string[];
+  migrated: string[];
+  rootSelectors: Record<string, string[]>;
+  sassOnly?: Record<string, string>;
+}
+
+export interface TierRecord {
+  component: string;
+  value: string;
+  reason: string | null;
+  sources: string[];
+}
+
+export type WiringKind = 'star' | 'feeder';
+export interface WiringEntry { folder: string; variable: string; kind: WiringKind }
+
+export interface 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.ts';
+
+const CONTROL_DIRECTIVES = /@(if|else|each|for|while)\b[^{]*$/;
+const FEEDER_CALLS = /(?<![\w-])(?:icons?-mixin|icon-colored|data-uri|toggle-delete-icon)\s*\(((?:[^()]|\([^()]*\))*)\)/g;
+const DATA_URI_STATIC = /^\s*(\$[a-z0-9_-]+)\s*:.*\/\/.*dx-data-uri-static/i;
+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*:/;
+
+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;
+};
+
+export const findWithRanges = (content: string): [number, number][] => findRanges(content, /\bwith\s*\(/g);
+
+export const findSignatureRanges = (content: string): [number, number][] => findRanges(
+  content,
+  /@(?:mixin|function)\s+[\w-]+\s*\(/g,
+);
+
+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);
+
+const valueFrom = (content: string, start: number): string => {
+  let depth = 0;
+  let quote: string | null = null;
+  let index = start;
+  for (; index < content.length; index += 1) {
+    const char = content[index];
+    if (quote) {
+      if (char === '\\') index += 1;
+      else if (char === quote) quote = null;
+    } else if (char === '"' || char === "'") {
+      quote = char;
+    } else if (char === '(' || char === '[' || (char === '{' && content[index - 1] === '#')) {
+      depth += 1;
+    } else if (char === ')' || char === ']' || (char === '}' && depth > 0)) {
+      depth -= 1;
+    } else if (depth === 0 && (char === ';' || char === '{' || char === '}')) {
+      break;
+    }
+  }
+  return content.slice(start, index).trim().replace(/\s+/g, ' ');
+};
+
+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 declaredValues: DeclaredValue[] = [];
+  const references: string[] = [];
+  const bareReferences: string[] = [];
+  const namespacedReferences: NamespacedReference[] = [];
+  const uses: Use[] = [];
+
+  const blockStack: boolean[] = [];
+  let parens = 0;
+  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;
+      } else {
+        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);
+          if (parens === 0) {
+            declaredValues.push({
+              name,
+              value: valueFrom(content, index + name.length + after.indexOf(':') + 1),
+              line: content.slice(0, index).split('\n').length,
+            });
+          }
+        } 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) {
+        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 {
+      if (char === '(') parens += 1;
+      if (char === ')') parens = Math.max(0, parens - 1);
+      index += 1;
+    }
+  }
+
+  return {
+    path,
+    folder,
+    declarations,
+    declaredValues,
+    references,
+    bareReferences,
+    namespacedReferences,
+    uses,
+  };
+};
+
+export const parseSourceFile = (file: SourceFile): Parsed => parseScss(
+  file.path,
+  file.folder,
+  file.stripped,
+);
+
+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 };
+};
+
+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;
+};
+
+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)));
+
+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));
+};
+
+export const publishingComponents = (registries: Registries): string[] => [
+  ...new Set([...registries.migrated, ...systemTierOf(registries)]),
+];
+
+const inFolder = (file: SourceFile, folder: string): boolean => file.path.startsWith(`${THEME}/${folder}/`);
+
+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)) {
+          const marked = new Set(file.raw.split('\n')
+            .map((line) => DATA_URI_STATIC.exec(line)?.[1]).filter(Boolean));
+          parseSourceFile(file).declaredValues.forEach(({ name, value }) => {
+            const previous = declared.get(name);
+            const sources = previous?.sources ?? [];
+            if (!sources.includes(file.path)) sources.push(file.path);
+            declared.set(name, {
+              value: value.replace(/\s*!default$/, ''),
+              marker: (previous?.marker ?? false) || marked.has(name),
+              sources,
+            });
+          });
+        }
+        [...file.stripped.matchAll(FEEDER_CALLS)]
+          .forEach((call) => [...call[1].matchAll(/\$[a-z0-9-]+/g)]
+            .forEach(([variable]) => feeders.add(variable)));
+      });
+    });
+    declared.forEach(({ value, marker, sources }, variable) => {
+      const reasonOf = (): string | null => {
+        if (marker || feeders.has(variable) || /(^|[^\w-])data-uri\(/.test(value)) return 'data-uri';
+        if (wiring.has(variable)) return 'base-wiring';
+        if (registries.sassOnly?.[variable]) return 'sass-only';
+        if (CSS_WIDE_KEYWORDS.has(value)) return 'css-wide-keyword';
+        if (value.includes('!important')) return 'important';
+        if (value === 'null') return 'null';
+        return value === 'false' || value === 'true' ? 'sass-flag' : null;
+      };
+      const reason = reasonOf();
+      records.set(variable, {
+        component, value, reason, sources,
+      });
+    });
+  });
+
+  for (let changed = true; changed;) {
+    changed = false;
+    records.forEach((record, variable) => {
+      if (record.reason) return;
+      if ([...record.value.matchAll(/\$[a-z0-9-]+/g)]
+        .some(([token]) => records.get(token)?.reason === 'data-uri')) {
+        records.set(variable, { ...record, reason: 'data-uri' });
+        changed = true;
+      }
+    });
+  }
+  return records;
+};
+
+export type Links = Map<string, string>;
+
+export const byCodepoint = (a: string, b: string): number => {
+  if (a < b) return -1;
+  return a > b ? 1 : 0;
+};
+
+export const propertyOf = (variable: string): string => `--dx-${variable.slice(1)}`;
+export const variableOf = (property: string): string => `$${property.slice('--dx-'.length)}`;
+
+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 };
+};
+
+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 interface 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 interface CollectorEntry { folder: string; selectors: string[] }
+
+export const namespaceOf = (folder: string): string => `${folder}Public`;
+
+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`;
+};
+
+export interface Publication {
+  files: Map<string, string>;
+  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);
+
+  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);
+  });
+
+  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);
+  });
+
+  const homeOf = new Map<string, string>();
+  const owners = new Map<string, string>();
+  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');
+
+  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`);
+      }
+    });
+  });
+
+  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.ts 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: [] };
+};
+
+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/naming/viz-contract.json b/packages/devextreme-scss/tools/naming/viz-contract.json
new file mode 100644
index 000000000000..27cbd6c9b03d
--- /dev/null
+++ b/packages/devextreme-scss/tools/naming/viz-contract.json
@@ -0,0 +1,234 @@
+{
+  "comment": "The CSS -> SVG contract of the data-visualization widgets, the third category outside the component tier and the mirror image of runtime-contract.json. A chart is drawn in SVG from JS, so the theme publishes what those widgets paint with and the chart themes in packages/devextreme/js/__internal/viz write the reference itself into the markup: `fill: var(--dx-viz-bg, #ffffff)`. Nothing is read back from the document while painting, which is why a chart repaints the moment one of these names changes, and why a chart inside a mode scope paints in that scope's mode. Only what is handed to the application - getColor(), the public palette and theme functions, an export - is read back, at the moment it is asked for. The literal beside each reference is the fallback for a page that loaded another theme; it is the value the name itself carries, and tests/viz-contract.test.ts holds it to the built bundle so the two cannot drift. tests/fluent-next-naming.test.ts excludes the names from the public-surface checks because the reader is not this package.",
+  "declaredIn": {
+    "perMode": "fluent-next/common/_colors.scss",
+    "onRootOnly": "fluent-next/viz/_colors.scss",
+    "onRootOnlySizes": "fluent-next/viz/_sizes.scss",
+    "linked": "fluent-next/common/_public-links.scss"
+  },
+  "readBy": "packages/devextreme/js/__internal/viz/core/themes/fluent-next/index.ts",
+  "palette": "packages/devextreme/js/__internal/viz/palette.ts",
+  "variables": [
+    {
+      "name": "--dx-viz-bg",
+      "role": "color-bg",
+      "declaredPerMode": true,
+      "paints": "the surface every widget draws on: chart background, loading panel, export menu, map background, candlestick body, sparkline point, the gap between funnel sections - and what is cut out of a mark with it: the text on a crosshair label, the ring and the back disc of a dot marker, and the shutter a range selector lays over the range it did not select, the surface at its own opacity"
+    },
+    {
+      "name": "--dx-viz-bg-hovered",
+      "role": "color-bg-hovered",
+      "declaredPerMode": true,
+      "paints": "the export menu button under the pointer, and the shelf behind a tree map group"
+    },
+    {
+      "name": "--dx-viz-bg-higher",
+      "role": "color-bg-higher",
+      "declaredPerMode": true,
+      "paints": "the shelf a bar gauge draws its bars on: a plate lifted off the surface, far enough from it to read in a light page"
+    },
+    {
+      "name": "--dx-viz-bg-active",
+      "role": "color-bg-active",
+      "declaredPerMode": true,
+      "paints": "the export menu button while pressed or focused"
+    },
+    {
+      "name": "--dx-viz-content",
+      "role": "color-content",
+      "declaredPerMode": true,
+      "paints": "text at full strength - titles, export menu, map labels - and the marks that have to stand out against the surface: constant lines, error bars, map selection borders, a selected map line, range selector ticks and the bullet target"
+    },
+    {
+      "name": "--dx-viz-crosshair",
+      "role": "color-content-red",
+      "declaredPerMode": true,
+      "paints": "the crosshair a chart draws under the pointer, and the plate behind its label: a reading instrument laid over the plot, red so it is never mistaken for a series"
+    },
+    {
+      "name": "--dx-viz-content-subtler",
+      "role": "color-content-subtler",
+      "declaredPerMode": true,
+      "paints": "the axis and everything that reads with it: the widget font colour that axis and legend labels take, the axis line and its ticks, and the titles of the axes. A step quieter than the rest of the text on purpose - the numbers along a scale are there to be read past, not at. The subtitle under the chart title is not among them: it inherits the colour of the title"
+    },
+    {
+      "name": "--dx-viz-content-orange",
+      "role": "color-content-orange",
+      "declaredPerMode": true,
+      "paints": "a map line under the pointer: the strongest step of the orange the line family is drawn in"
+    },
+    {
+      "name": "--dx-viz-content-subtle",
+      "role": "color-content-subtle",
+      "declaredPerMode": true,
+      "paints": "what is quieter than the title but not the axis: tree map group labels, the map control bar border, and the gauge needle the theme falls back to - a thin mark, so it takes a content role and not a tinted surface, which would sink into the dial"
+    },
+    {
+      "name": "--dx-viz-border",
+      "role": "color-border",
+      "declaredPerMode": true,
+      "paints": "lines that frame something: pane and label borders, annotation border, gauge range container, axis breaks, map background border, and the tooltip border once an application shows it"
+    },
+    {
+      "name": "--dx-viz-border-hovered",
+      "role": "color-border-hovered",
+      "declaredPerMode": true,
+      "paints": "the export menu button outline under the pointer"
+    },
+    {
+      "name": "--dx-viz-border-active",
+      "role": "color-border-active",
+      "declaredPerMode": true,
+      "paints": "the export menu button outline while pressed or focused"
+    },
+    {
+      "name": "--dx-viz-gray-subtle",
+      "role": "color-bg-gray-subtle",
+      "declaredPerMode": true,
+      "paints": "the quieter half of a pair that carries no meaning of its own: a losing bar of a win-loss sparkline, a bar below zero, and the fill of a map area"
+    },
+    {
+      "name": "--dx-viz-purple-subtle",
+      "role": "color-bg-purple-subtle",
+      "declaredPerMode": true,
+      "paints": "the plate behind the unselected part of a range selector, drawn only when an application asks for it"
+    },
+    {
+      "name": "--dx-viz-grid",
+      "role": "color-border-subtle",
+      "declaredPerMode": true,
+      "paints": "the grid: major and minor grid lines, legend border, tree map group border"
+    },
+    {
+      "name": "--dx-viz-tile-border",
+      "role": "color-content-static-dark",
+      "declaredPerMode": false,
+      "paints": "the hairline that separates two tree map tiles. It is drawn on top of the tiles, not on the surface, so it does not follow the mode: the tile under it is a palette colour in both"
+    },
+    {
+      "name": "--dx-viz-blue",
+      "role": "color-bg-blue",
+      "declaredPerMode": false,
+      "paints": "the first series colour, the near end of the gradient set the tree map and the map mix their scales from, and the shapes that are data rather than chrome: bullet bar, gauge range bar, the triangle marker a gauge puts on its scale for a subvalue, sparkline line, map markers and the map legend marker, and a tree map tile with no colour of its own - the fill a tile falls back to when the palette is not colouring the leaves"
+    },
+    {
+      "name": "--dx-viz-gray",
+      "role": "color-bg-gray",
+      "declaredPerMode": false,
+      "paints": "a data shape the design deliberately leaves without meaning: a winning bar of a win-loss sparkline, a bar above zero, and the link between two sankey nodes, grey rather than green on purpose"
+    },
+    {
+      "name": "--dx-viz-red",
+      "role": "color-bg-red",
+      "declaredPerMode": false,
+      "paints": "the second series colour, the falling bar of a candlestick or a stock series, the highest point of a sparkline, and the second half of a two-colour gauge needle"
+    },
+    {
+      "name": "--dx-viz-green",
+      "role": "color-bg-green",
+      "declaredPerMode": false,
+      "paints": "the third series colour and the far end of the gradient set"
+    },
+    {
+      "name": "--dx-viz-yellow",
+      "role": "color-bg-yellow",
+      "declaredPerMode": false,
+      "paints": "the fourth series colour and the lowest point of a sparkline"
+    },
+    {
+      "name": "--dx-viz-orange",
+      "role": "color-bg-orange",
+      "declaredPerMode": false,
+      "paints": "a map line at rest"
+    },
+    {
+      "name": "--dx-viz-pink",
+      "role": "color-bg-pink",
+      "declaredPerMode": false,
+      "paints": "the fifth series colour"
+    },
+    {
+      "name": "--dx-viz-purple",
+      "role": "color-bg-purple",
+      "declaredPerMode": false,
+      "paints": "the sixth series colour"
+    },
+    {
+      "name": "--dx-viz-success",
+      "role": "color-bg-success",
+      "declaredPerMode": false,
+      "paints": "the good end of an indicating set: the first range of a gauge range container"
+    },
+    {
+      "name": "--dx-viz-warning",
+      "role": "color-bg-warning",
+      "declaredPerMode": false,
+      "paints": "the middle of an indicating set"
+    },
+    {
+      "name": "--dx-viz-danger",
+      "role": "color-bg-danger",
+      "declaredPerMode": false,
+      "paints": "the bad end of an indicating set, and the slider marker of a range selector while the range being dragged is not allowed"
+    },
+    {
+      "name": "--dx-viz-primary",
+      "role": "color-bg-primary",
+      "declaredPerMode": false,
+      "paints": "the range selector: the selected range, the slider handle and its marker. The one place a chart follows --dx-accent-color, because the range selector is an editor and its selection is the accented control of the page it sits on"
+    },
+    {
+      "name": "--dx-viz-tooltip-bg",
+      "role": "color-bg-inverted",
+      "declaredPerMode": true,
+      "paints": "the tooltip plate and the annotation plate, inverted against the page so they read as something laid over it"
+    },
+    {
+      "name": "--dx-viz-tooltip-content",
+      "role": "color-content-inverted",
+      "declaredPerMode": true,
+      "paints": "the text on those plates"
+    },
+    {
+      "name": "--dx-viz-title-font-weight",
+      "role": "font-weight-title-default",
+      "declaredIn": "onRootOnlySizes",
+      "declaredPerMode": false,
+      "paints": "the weight of a chart title, and of the subtitle that mirrors it. The charts inherited 500 from the material theme, a face Segoe UI does not have; the component titles of this theme have always read this role instead"
+    },
+    {
+      "name": "--dx-viz-font-weight",
+      "role": "font-weight-caption-default",
+      "declaredIn": "onRootOnlySizes",
+      "declaredPerMode": false,
+      "paints": "the weight of the widget font, which every text that sets no weight of its own takes: axis labels and titles, legend items, series labels, the tooltip"
+    },
+    {
+      "name": "--dx-viz-export-font-weight",
+      "role": "font-weight-base-default",
+      "declaredIn": "onRootOnlySizes",
+      "declaredPerMode": false,
+      "paints": "the weight of the export menu text"
+    },
+    {
+      "name": "--dx-viz-legend-title-font-weight",
+      "role": "font-weight-200",
+      "declaredIn": "onRootOnlySizes",
+      "declaredPerMode": false,
+      "paints": "the weight of a legend title. No role carries 200, the weight the charts have always drawn it in, so it takes the value from the scale"
+    },
+    {
+      "name": "--dx-viz-label-font-weight",
+      "role": "font-weight-caption-strong",
+      "declaredIn": "onRootOnlySizes",
+      "declaredPerMode": false,
+      "paints": "the weight of the labels drawn on the data: sankey node labels, tree map tile and group labels. The sankey labels inherited 500 from the generic theme and the group labels 500 from the material theme, a face Segoe UI does not have; the tile labels were 600 already"
+    },
+    {
+      "name": "--dx-viz-font-family",
+      "from": "--dx-global-font-family",
+      "declaredPerMode": true,
+      "paints": "every text the widget draws, titles included. It reads the page's own font name, so a chart is typeset like the widgets around it, and it is declared on the mode scopes because the name it reads is"
+    }
+  ]
+}
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/reachability.ts b/packages/devextreme-scss/tools/review/reachability.ts
new file mode 100644
index 000000000000..f1d601401524
--- /dev/null
+++ b/packages/devextreme-scss/tools/review/reachability.ts
@@ -0,0 +1,275 @@
+import { readFileSync, writeFileSync, statSync } from 'fs';
+import { join } from 'path';
+import postcss from 'postcss';
+import type { Node, Rule } from 'postcss';
+
+interface Registries { rootSelectors: Record<string, string[]> }
+interface Contract { variables: { name: string }[] }
+interface Pinned { names: string[] }
+interface Copy { reads: string[]; scope: string }
+
+const here = import.meta.dirname;
+
+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: Registries = JSON.parse(readFileSync(join(packageRoot, 'tools', 'naming', 'registries.json'), 'utf8'));
+const css = readFileSync(bundlePath, 'utf8');
+const root = postcss.parse(css);
+
+const isRule = (node: Node | undefined): node is Rule => node?.type === 'rule';
+
+const TIER_READ = /var\(\s*(--dx-[a-z0-9-]+)/g;
+const isTierName = (name: string): boolean => name.startsWith('--dx-') && !name.startsWith('--dxds-');
+const readsOf = (value: string): string[] => [
+  ...new Set([...value.matchAll(TIER_READ)].map(([, name]) => name)),
+].filter(isTierName);
+
+const declaredAt = new Map<string, Set<string>>();
+root.walkDecls((decl) => {
+  if (!isTierName(decl.prop)) return;
+  const known = declaredAt.get(decl.prop) ?? new Set<string>();
+  (isRule(decl.parent) ? decl.parent.selectors : []).forEach((sel) => known.add(sel.trim()));
+  declaredAt.set(decl.prop, known);
+});
+
+const SET_ELSEWHERE = new Set([
+  '--dx-cardview-card-max-width',
+  '--dx-cardview-card-min-width',
+  '--dx-cardview-card-cover-ratio',
+  '--dx-cardview-cardsperrow',
+  '--dx-scheduler-animation-top',
+  '--dx-accent-color',
+]);
+const undeclared = new Map<string, Set<string>>();
+root.walkRules((rule) => {
+  rule.walkDecls((decl) => {
+    readsOf(decl.value)
+      .filter((name) => !declaredAt.has(name) && !SET_ELSEWHERE.has(name))
+      .forEach((name) => {
+        const where = undeclared.get(name) ?? new Set<string>();
+        undeclared.set(name, where);
+        rule.selectors.forEach((sel) => where.add(sel.trim()));
+      });
+  });
+});
+undeclared.forEach((where, name) => {
+  process.stdout.write(`✘ 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');
+});
+
+const copies = new Map<string, Copy[]>();
+root.walkRules((rule) => {
+  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);
+
+const classesOf = (selector: string): Set<string> => new Set([...selector.matchAll(/\.(-?[_a-zA-Z][\w-]*)/g)].map(([, cls]) => cls));
+const coveredBy = (selector: string, declRoots: Set<string>): boolean => {
+  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<string, boolean>();
+root.walkRules((rule) => {
+  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`));
+}
+
+const GENERIC = /^dx-(rtl|state-|theme-|device-|color-scheme-|widget$|swatch)/;
+const scopesPath = join(here, 'nested-scopes.json');
+const componentOf = (name: string): string | null => {
+  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: string): string | null => {
+  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<string, string>();
+[...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}`);
+});
+
+const SHARED_OVERLAY = /-(popup|popup-wrapper|overlay|overlay-wrapper|overlay-content|popover|popover-wrapper|tooltip|tooltip-wrapper)$/;
+const ownClassOf = (component: string, scope: string): boolean => {
+  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: string, scope: string): boolean => SHARED_OVERLAY.test(scope)
+  && !ownClassOf(component, scope);
+const isForeignPortalKey = (key: string): boolean => {
+  const [component, scope] = key.split(' :: ');
+  return isForeignPortal(component, scope);
+};
+
+const reviewed: Record<string, string[]> = 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: Record<string, string[]> = {};
+  [...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(isForeignPortalKey),
+])];
+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.ts),\n');
+  process.stdout.write(`     or, having confirmed in the live widget that the element is nested in the root, add "${scope}" to nested-scopes.json["${component}"]\n`);
+});
+
+const declaredValues = new Map<string, string[]>();
+root.walkDecls((decl) => {
+  if (!isTierName(decl.prop)) return;
+  declaredValues.set(decl.prop, [...(declaredValues.get(decl.prop) ?? []), decl.value]);
+});
+
+const STYLE_QUERY_READ = /style\(\s*(--dx-[a-z0-9-]+)/g;
+
+const readContract = (file: string): string[] => {
+  const contract: Contract = JSON.parse(readFileSync(join(packageRoot, 'tools', 'naming', file), 'utf8'));
+  return contract.variables.map(({ name }) => name);
+};
+const runtimeReads = readContract('runtime-reads.json');
+const vizReads = readContract('viz-contract.json');
+
+const live = new Set<string>();
+const frontier: string[] = [];
+const wake = (name: string): void => {
+  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);
+});
+[...runtimeReads, ...vizReads].forEach(wake);
+for (let name = frontier.pop(); name !== undefined; name = frontier.pop()) {
+  (declaredValues.get(name) ?? []).forEach((value) => readsOf(value).forEach(wake));
+}
+
+const unread = [...declaredAt.keys()].filter((name) => !live.has(name)).sort();
+const unreadPath = join(here, 'unread-tier.json');
+const readPinned = (): Pinned => {
+  try {
+    const parsed: Pinned = JSON.parse(readFileSync(unreadPath, 'utf8'));
+    return parsed;
+  } catch (error) {
+    process.stdout.write(`✘ the unread-name pin is missing or unreadable: ${unreadPath}\n`);
+    process.stdout.write(`     ${error instanceof Error ? error.message : String(error)}\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');
+    return process.exit(1);
+  }
+};
+const pinned = readPinned();
+
+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.ts --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/unread-tier.json b/packages/devextreme-scss/tools/review/unread-tier.json
new file mode 100644
index 000000000000..1b1c89b9aefc
--- /dev/null
+++ b/packages/devextreme-scss/tools/review/unread-tier.json
@@ -0,0 +1,103 @@
+{
+  "comment": [
+    "--dx-* names the built fluent-next bundle declares and nothing in that bundle reads. The list is",
+    "the worklist for the 'declared and never read' check of reachability.ts 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 change - run the tool rather than trusting a number written here (28.09.2026: 66 names listed, after a curation pass; the names removed then never shipped, so they are in the finalizing PR's history rather than in tools/naming/public-renames.json, and so are the reasons for the ones kept).",
+    "",
+    "Defects: the theme publishes a knob and no rule turns it. --dx-switch-box-shadow was one such",
+    "example, removed 25.09.2026. --dx-datagrid-row-alternation-bg looked like another, but turned out",
+    "to be read by ~30 theme-agnostic demo files across all four themes, so it was kept and reverted",
+    "back to its original name (26.09.2026) - pick a fresh illustration from the names below if this",
+    "paragraph needs one again. --dx-scheduler-appointment-{15,20,25}min-height are a related but",
+    "distinct case: they ARE consumed, as a Sass interpolation inside a @container breakpoint rather",
+    "than through a custom property, so a runtime override does nothing - kept, not removed.",
+    "",
+    "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, same status) -",
+    "both kept, not removed.",
+    "",
+    "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-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-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-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-hidden-border",
+    "--dx-list-item-border-width",
+    "--dx-list-item-margin-inline",
+    "--dx-map-marker-tooltip-margin",
+    "--dx-menu-item-bg-hovered",
+    "--dx-menu-item-line-height",
+    "--dx-menu-item-with-icon-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-left-column-width",
+    "--dx-scheduler-workspace-cell-bg-active",
+    "--dx-slider-height",
+    "--dx-tabs-item-padding-inline",
+    "--dx-texteditor-color-label",
+    "--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/tokens/report.ts b/packages/devextreme-scss/tools/tokens/report.ts
new file mode 100644
index 000000000000..15dd79ae098b
--- /dev/null
+++ b/packages/devextreme-scss/tools/tokens/report.ts
@@ -0,0 +1,252 @@
+export type Declarations = Map<string, string>;
+
+export type GeneratedOutput = Map<string, Declarations>;
+
+export interface NameDiff { added: string[]; removed: string[] }
+
+export interface ValueChange { file: string; name: string; was: string; now: string }
+
+export interface DeclarationRef { file: string; name: string }
+
+export interface OutputDiff {
+  changed: ValueChange[];
+  gone: DeclarationRef[];
+  appeared: DeclarationRef[];
+}
+
+export interface Report {
+  package: string;
+  versionBefore: string;
+  versionAfter: string;
+  countBefore: number;
+  countAfter: number;
+  names: NameDiff;
+  lostConsumed: string[];
+  output: OutputDiff;
+}
+
+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)),
+});
+
+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');
+};
+
+export interface TerminalOptions {
+  color?: boolean;
+  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);
+
+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));
+
+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))];
+  });
+};
+
+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` : ''}`]
+      : []),
+  ];
+};
+
+export const renderPreamble = (report: Omit<Report, 'output'>, 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.ts b/packages/devextreme-scss/tools/tokens/update.ts
new file mode 100644
index 000000000000..e717cd907eb4
--- /dev/null
+++ b/packages/devextreme-scss/tools/tokens/update.ts
@@ -0,0 +1,235 @@
+import { execFileSync } from 'node:child_process';
+import {
+  cpSync, existsSync, mkdtempSync, readdirSync, readFileSync, realpathSync, rmSync, writeFileSync,
+} from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+
+import { getBridgeFiles, THEME_FOLDER } from '../../build/tokens/sources.ts';
+import {
+  buildAvailableNames,
+  collectCustomPropertyReferences,
+  collectTokenReferences,
+} from '../../build/tokens/consumed-tokens.ts';
+import {
+  type GeneratedOutput,
+  type Report,
+  diffGenerated,
+  diffNames,
+  findLostConsumed,
+  parseDeclarations,
+  renderPreamble,
+  renderReport,
+  renderTerminal,
+} from './report.ts';
+
+interface FlatTokens { version: string; names: string[] }
+interface Manifest { devDependencies: Record<string, string> }
+interface Snapshot { files: Map<string, string>; generated: string | null }
+
+const here = import.meta.dirname;
+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 workspacePath = path.join(repoRoot, 'pnpm-workspace.yaml');
+const lockPath = path.join(repoRoot, 'pnpm-lock.yaml');
+const PACKAGE = '@devexpress/design-tokens-internal';
+
+const tokensPackage = path.join(packageRoot, 'node_modules', PACKAGE);
+
+const walk = (dir: string, extension: string): string[] => readdirSync(dir, {
+  withFileTypes: true, recursive: true,
+})
+  .filter((entry) => entry.isFile() && entry.name.endsWith(extension))
+  .map((entry) => path.join(entry.parentPath, entry.name));
+
+const readFlatTokens = (): FlatTokens => {
+  const { version, tokens }: { version: string; tokens: Record<string, unknown> } = JSON.parse(
+    readFileSync(path.join(tokensPackage, 'tokens.flat.json'), 'utf8'),
+  );
+
+  return { version, names: Object.keys(tokens) };
+};
+
+let notedUnbuilt = false;
+const readGenerated = (): GeneratedOutput => {
+  if (!existsSync(generatedRoot)) {
+    if (notedUnbuilt) return new Map();
+    notedUnbuilt = true;
+    process.stderr.write(`note: ${path.relative(repoRoot, generatedRoot)} is not built yet, so the `
+      + 'value diff is empty — run pnpm nx build:tokens devextreme-scss first to get one\n');
+    return new Map();
+  }
+  return new Map(walk(generatedRoot, '.scss').map((file) => [
+    path.relative(generatedRoot, file),
+    parseDeclarations(readFileSync(file, 'utf8')),
+  ]));
+};
+
+const readConsumed = (): Set<string> => {
+  const consumed = new Set<string>();
+
+  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;
+};
+
+const plain = Boolean(process.env.NO_COLOR);
+const interactive = Boolean(process.stdout.isTTY);
+const color = interactive && !plain;
+
+const progressColor = Boolean(process.stderr.isTTY) && !plain;
+
+const show = (report: Report): void => {
+  process.stdout.write(interactive
+    ? `\n${renderTerminal(report, { color })}`
+    : `\n${renderReport(report)}`);
+};
+
+const executable = (command: string): [string, string[]] => {
+  if (command === 'node') return [process.execPath, []];
+  const pnpm = process.env.npm_execpath;
+  if (!pnpm) return [command, []];
+  const entry = realpathSync(pnpm);
+  return /\.[cm]?js$/.test(entry) ? [process.execPath, [entry]] : [entry, []];
+};
+
+const run = (command: string, args: string[], cwd: string): boolean => {
+  process.stderr.write(`\n$ ${command} ${args.join(' ')}\n`);
+
+  try {
+    const [file, prefix] = executable(command);
+    execFileSync(file, [...prefix, ...args], {
+      cwd,
+      stdio: ['inherit', 2, 'inherit'],
+      shell: file === command && process.platform === 'win32',
+    });
+
+    return true;
+  } catch {
+    process.stderr.write(`\n${command} ${args.join(' ')} failed — see its output above.\n`);
+
+    return false;
+  }
+};
+
+const withReleaseAgeExclusion = (yaml: string, version: string): string => {
+  const entry = `"${PACKAGE}@${version}"`;
+  const existing = new RegExp(`(['"])${PACKAGE.replace(/[/.]/g, '\\$&')}@[^'"]+\\1`);
+  if (existing.test(yaml)) return yaml.replace(existing, entry);
+  if (!/^minimumReleaseAgeExclude:\n/m.test(yaml)) {
+    throw new Error('pnpm-workspace.yaml has no minimumReleaseAgeExclude list to add the package to');
+  }
+  return yaml.replace(/^minimumReleaseAgeExclude:\n/m, (key) => `${key}  - ${entry}\n`);
+};
+
+const setDependency = (version: string): void => {
+  const manifest: Manifest = JSON.parse(readFileSync(manifestPath, 'utf8'));
+
+  manifest.devDependencies[PACKAGE] = version;
+  writeFileSync(manifestPath, `${JSON.stringify(manifest, null, 2)}\n`);
+  writeFileSync(workspacePath, withReleaseAgeExclusion(readFileSync(workspacePath, 'utf8'), version));
+};
+
+const snapshot = (): Snapshot => {
+  const files = new Map([manifestPath, workspacePath, lockPath]
+    .map((file) => [file, readFileSync(file, 'utf8')]));
+  const generated = existsSync(generatedRoot)
+    ? path.join(mkdtempSync(path.join(os.tmpdir(), 'tokens-update-')), 'generated')
+    : null;
+  if (generated) cpSync(generatedRoot, generated, { recursive: true });
+  return { files, generated };
+};
+
+const restore = ({ files, generated }: Snapshot): void => {
+  files.forEach((content, file) => writeFileSync(file, content));
+  rmSync(generatedRoot, { recursive: true, force: true });
+  if (generated) cpSync(generated, generatedRoot, { recursive: true });
+};
+
+const [target] = process.argv.slice(2);
+
+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() };
+const saved = reportOnly ? null : snapshot();
+
+const giveUp = (): never => {
+  if (!saved) throw new Error('nothing to roll back: the report-only run touched nothing');
+  restore(saved);
+  process.stderr.write('\nThe bump failed and was rolled back: package.json, pnpm-workspace.yaml, '
+    + `pnpm-lock.yaml and the token layer are as they were (${before.version}).\n`
+    + 'node_modules may still hold the new package: pnpm install --frozen-lockfile\n');
+  return process.exit(1);
+};
+
+const bumpAndReport = (): void => {
+  if (!reportOnly) {
+    setDependency(target);
+
+    if (!run('pnpm', ['install', '--no-frozen-lockfile'], repoRoot)) {
+      giveUp();
+    }
+  }
+
+  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) {
+    process.stderr.write(`\n${renderPreamble(summary, { color: progressColor })}\n`);
+
+    if (!run('node', ['build/tokens/build-tokens.ts'], packageRoot)) {
+      giveUp();
+    }
+  }
+
+  const registriesCurrent = reportOnly
+    || run('node', ['tools/naming/derive-registries.ts', '--check'], packageRoot);
+
+  const report = { ...summary, output: diffGenerated(before.generated, readGenerated()) };
+
+  show(report);
+
+  if (!reportOnly) {
+    const registries = registriesCurrent ? ''
+      : 'The registries are stale: after build:themes run pnpm run naming:registries and review '
+        + 'tools/naming/registries.json.\n';
+    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'
+      + `${registries}\nCheck \`git diff pnpm-lock.yaml\`: anything in it beyond ${PACKAGE} is pnpm `
+      + 'normalising the lockfile, not this bump.\n');
+  }
+};
+
+try {
+  bumpAndReport();
+} catch (error) {
+  if (reportOnly) throw error;
+  process.stderr.write(`\n${(error instanceof Error ? error.stack : undefined) ?? String(error)}\n`);
+  giveUp();
+}
diff --git a/packages/devextreme-themebuilder/src/metadata/collector.ts b/packages/devextreme-themebuilder/src/metadata/collector.ts
index c13a32b9657a..4301b7a680ac 100644
--- a/packages/devextreme-themebuilder/src/metadata/collector.ts
+++ b/packages/devextreme-themebuilder/src/metadata/collector.ts
@@ -1,8 +1,14 @@
 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();
@@ -37,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 389b51d95d79..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,6 +23,13 @@ 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();
@@ -32,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);
     });
diff --git a/packages/devextreme-themebuilder/tests/modules/themes.test.ts b/packages/devextreme-themebuilder/tests/modules/themes.test.ts
index 95bc087ce291..c617c3be71a5 100644
--- a/packages/devextreme-themebuilder/tests/modules/themes.test.ts
+++ b/packages/devextreme-themebuilder/tests/modules/themes.test.ts
@@ -4,10 +4,12 @@ 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()
+        .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/errors.ts b/packages/devextreme/js/__internal/core/errors.ts
index 75b859fe73a2..4e52eca493ea 100644
--- a/packages/devextreme/js/__internal/core/errors.ts
+++ b/packages/devextreme/js/__internal/core/errors.ts
@@ -126,4 +126,8 @@ export default errorUtils({
   W0023: 'DevExtreme: the following \'devextreme\' package version does not match versions of other DevExpress products used in this application:\n\n'
         + '{0}\n\n'
         + 'Interoperability between different versions of the products listed herein cannot be guaranteed.\n\n',
+
+  W0024: 'Invalid accent color: \'{0}\'. The previous accent color remains in effect.',
+
+  W0025: 'The \'{0}\' theme does not support custom accent colors. Apply a Fluent Next theme to use the \'customAccentColor\' method.',
 });
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..9d7d8a96646a
--- /dev/null
+++ b/packages/devextreme/js/__internal/core/utils/__tests__/swatch_container.test.ts
@@ -0,0 +1,235 @@
+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';
+
+jest.mock('@js/core/utils/view_port');
+
+const viewPortMock = viewPort as unknown as jest.Mock<() => unknown>;
+
+const { getSwatchContainer } = swatchContainer;
+
+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);
+    });
+
+    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);
+    });
+
+    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']);
+    });
+
+    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);
+    });
+
+    const scopeInViewport = (markup: string): Element => {
+      $viewport.innerHTML = markup;
+
+      return $viewport.firstElementChild as Element;
+    };
+
+    const containerOf = (scope: Element): Element => getSwatchContainer(
+      scope.querySelector('.target') as Element,
+    )?.get(0) as Element;
+
+    it('reuses a scope that is a child of the viewport', () => {
+      const scope = scopeInViewport('<div class="dx-theme-mode-dark"><div class="target mode-dark"></div></div>');
+
+      expect(containerOf(scope)).toBe(scope);
+      expect($viewport.children).toHaveLength(1);
+    });
+
+    it.each([
+      'overflow: hidden',
+      'overflow: auto',
+      'overflow-y: auto',
+      'clip-path: inset(0)',
+      'contain: paint',
+      'transform: translateX(1px)',
+      'filter: blur(1px)',
+      'perspective: 100px',
+    ])('does not reuse a viewport child that clips or traps a positioned descendant with %s', (style) => {
+      const scope = scopeInViewport(`<div class="dx-theme-mode-dark" style="${style}"><div class="target mode-dark"></div></div>`);
+      const container = containerOf(scope);
+
+      expect(container).not.toBe(scope);
+      expect(container.parentElement).toBe($viewport);
+      expect(classesOf(container)).toEqual(['dx-theme-mode-dark']);
+      expect(containerOf(scope)).toBe(container);
+      expect($viewport.children).toHaveLength(2);
+    });
+
+    it('does not reuse a swatch that clips either', () => {
+      const scope = scopeInViewport('<div class="dx-swatch-custom" style="overflow: hidden"><div class="target"></div></div>');
+      const container = containerOf(scope);
+
+      expect(container).not.toBe(scope);
+      expect(container.parentElement).toBe($viewport);
+      expect(classesOf(container)).toEqual(['dx-swatch-custom']);
+    });
+  });
+
+  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/__tests__/theme_length.test.ts b/packages/devextreme/js/__internal/core/utils/__tests__/theme_length.test.ts
new file mode 100644
index 000000000000..e0cfe2c8283c
--- /dev/null
+++ b/packages/devextreme/js/__internal/core/utils/__tests__/theme_length.test.ts
@@ -0,0 +1,77 @@
+import {
+  afterEach, beforeEach, describe, expect, it, jest,
+} from '@jest/globals';
+import $ from '@js/core/renderer';
+import { themeLength } from '@ts/core/utils/theme_length';
+
+const PROPERTY = '--probe-length';
+
+describe('themeLength', () => {
+  let element: HTMLElement = document.createElement('div');
+  let declared = '';
+
+  beforeEach(() => {
+    element = document.createElement('div');
+    document.body.appendChild(element);
+    declared = '';
+
+    jest.spyOn(window, 'getComputedStyle').mockImplementation((node) => ({
+      fontSize: '16px',
+      getPropertyValue: (name: string): string => (node === element && name === PROPERTY ? declared : ''),
+    }) as unknown as CSSStyleDeclaration);
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+    element.remove();
+  });
+
+  it('reads a px length', () => {
+    declared = '60px';
+
+    expect(themeLength(element, PROPERTY)).toBe(60);
+  });
+
+  it('converts rem through the root font size', () => {
+    declared = ' 3.75rem ';
+
+    expect(themeLength(element, PROPERTY)).toBe(60);
+  });
+
+  it('reads a unitless zero', () => {
+    declared = '0';
+
+    expect(themeLength(element, PROPERTY)).toBe(0);
+  });
+
+  it('accepts a renderer wrapper', () => {
+    declared = '1.5px';
+
+    expect(themeLength($(element), PROPERTY)).toBe(1.5);
+  });
+
+  it('is undefined when the theme declares nothing', () => {
+    expect(themeLength(element, PROPERTY)).toBeUndefined();
+  });
+
+  it('is undefined for a value that is not a length', () => {
+    declared = 'auto';
+
+    expect(themeLength(element, PROPERTY)).toBeUndefined();
+  });
+
+  it('is undefined for an empty selection', () => {
+    expect(themeLength($(), PROPERTY)).toBeUndefined();
+  });
+
+  it('is undefined without an element', () => {
+    expect(themeLength(undefined, PROPERTY)).toBeUndefined();
+  });
+
+  it('is undefined for a node that is not an element', () => {
+    declared = '60px';
+
+    expect(themeLength($(document), PROPERTY)).toBeUndefined();
+    expect(themeLength($(document.createTextNode('x')) as never, PROPERTY)).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..153b391d9bbf 100644
--- a/packages/devextreme/js/__internal/core/utils/swatch_container.ts
+++ b/packages/devextreme/js/__internal/core/utils/swatch_container.ts
@@ -1,29 +1,98 @@
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import { value } from '@js/core/utils/view_port';
+import { getWindow, hasWindow } from '@js/core/utils/window';
+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) : [];
+};
+
+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);
+  const sorted = (cssClasses: string[]): string => [...cssClasses].sort().join(' ');
+
+  return sorted(classes) === sorted(scopeClasses($viewport)) ? [] : classes;
+};
+
+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)));
+
+const HOST_NEUTRAL_VALUES: Record<string, string> = {
+  overflow: 'visible',
+  'overflow-x': 'visible',
+  'overflow-y': 'visible',
+  'clip-path': 'none',
+  contain: 'none',
+  transform: 'none',
+  filter: 'none',
+  perspective: 'none',
+};
+
+const hostsWithoutClipping = (node: Element): boolean => {
+  const style = hasWindow() ? getWindow().getComputedStyle(node) : undefined;
+
+  return Object.entries(HOST_NEUTRAL_VALUES)
+    .every(([property, neutral]) => ['', neutral].includes(style?.getPropertyValue(property) ?? ''));
+};
 
 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) && hostsWithoutClipping(node)));
 
-  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_length.ts b/packages/devextreme/js/__internal/core/utils/theme_length.ts
new file mode 100644
index 000000000000..aa7e96f34755
--- /dev/null
+++ b/packages/devextreme/js/__internal/core/utils/theme_length.ts
@@ -0,0 +1,35 @@
+import type { dxElementWrapper } from '@js/core/renderer';
+import $ from '@js/core/renderer';
+import { getWindow, hasWindow } from '@js/core/utils/window';
+
+const ELEMENT_NODE = 1;
+
+export function themeLength(
+  element: Element | dxElementWrapper | undefined,
+  property: string,
+): number | undefined {
+  const node = $(element).get(0);
+
+  if (node?.nodeType !== ELEMENT_NODE || !hasWindow()) {
+    return undefined;
+  }
+
+  const view = node.ownerDocument.defaultView ?? getWindow();
+
+  if (!view?.getComputedStyle) {
+    return undefined;
+  }
+
+  const declared = view.getComputedStyle(node).getPropertyValue(property).trim();
+  const match = /^(-?\d*\.?\d+)(px|rem)?$/.exec(declared);
+
+  if (!match) {
+    return undefined;
+  }
+
+  const value = parseFloat(match[1]);
+
+  return match[2] === 'rem'
+    ? value * parseFloat(view.getComputedStyle(node.ownerDocument.documentElement).fontSize)
+    : value;
+}
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..614c1c0adbcd
--- /dev/null
+++ b/packages/devextreme/js/__internal/core/utils/theme_mode.ts
@@ -0,0 +1,22 @@
+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';
+
+export const THEME_MODE_PROPERTY = '--dx-theme-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/grids/grid_core/ai_assistant/__tests__/ai_assistant_view.test.ts b/packages/devextreme/js/__internal/grids/grid_core/ai_assistant/__tests__/ai_assistant_view.test.ts
index 20a4ae50a579..f379eaf1ee7f 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/ai_assistant/__tests__/ai_assistant_view.test.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/ai_assistant/__tests__/ai_assistant_view.test.ts
@@ -360,7 +360,7 @@ describe('AIAssistantView', () => {
         }),
       };
       (createConfirmDialog as jest.Mock).mockReturnValue(mockDialog);
-      createAIAssistantView();
+      const { aiAssistantView } = createAIAssistantView();
 
       const aiChatConfig = (AIChat as jest.Mock).mock.calls[0][0] as AIChatOptions;
       const event = { cancel: false, component: { hide: jest.fn() } };
@@ -377,6 +377,7 @@ describe('AIAssistantView', () => {
             }),
           }),
         }),
+        aiAssistantView.element(),
       );
       expect(mockDialog.show).toHaveBeenCalledTimes(1);
     });
diff --git a/packages/devextreme/js/__internal/grids/grid_core/ai_assistant/__tests__/utils.test.ts b/packages/devextreme/js/__internal/grids/grid_core/ai_assistant/__tests__/utils.test.ts
index 78bb3afe6cb1..a33a6457ccfd 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/ai_assistant/__tests__/utils.test.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/ai_assistant/__tests__/utils.test.ts
@@ -8,6 +8,7 @@ import {
 import type { Message } from '@js/ui/chat';
 import { custom } from '@js/ui/dialog';
 import * as themes from '@js/ui/themes';
+import { themeLength } from '@ts/core/utils/theme_length';
 import type { z } from 'zod';
 
 import {
@@ -45,6 +46,10 @@ jest.mock('@js/ui/themes', () => ({
   isCompact: jest.fn().mockReturnValue(false),
 }));
 
+jest.mock('@ts/core/utils/theme_length', () => ({
+  themeLength: jest.fn(),
+}));
+
 describe('isAIMessage', () => {
   it('should return true for message with assistant author id', () => {
     const message = {
@@ -775,6 +780,35 @@ describe('createConfirmDialog', () => {
     );
   });
 
+  it('should take the width the theme declares on the grid element', () => {
+    (themes.isCompact as jest.Mock).mockReturnValue(true);
+    (themeLength as jest.Mock).mockReturnValue(333);
+    const gridElement = document.createElement('div');
+
+    createConfirmDialog(undefined, gridElement);
+
+    expect((themeLength as jest.Mock).mock.calls[0])
+      .toEqual([gridElement, '--dx-grid-ai-confirm-dialog-width']);
+    expect(custom).toHaveBeenCalledWith(
+      expect.objectContaining({
+        width: 333,
+      }),
+    );
+  });
+
+  it('should keep the legacy width when the theme declares nothing on the grid element', () => {
+    (themes.isCompact as jest.Mock).mockReturnValue(true);
+    (themeLength as jest.Mock).mockReturnValue(undefined);
+
+    createConfirmDialog(undefined, document.createElement('div'));
+
+    expect(custom).toHaveBeenCalledWith(
+      expect.objectContaining({
+        width: AI_ASSISTANT_CONFIRM_DIALOG_COMPACT_WIDTH,
+      }),
+    );
+  });
+
   it('should apply fluent styling to buttons when fluent theme is active', () => {
     (themes.isFluent as jest.Mock).mockReturnValue(true);
 
diff --git a/packages/devextreme/js/__internal/grids/grid_core/ai_assistant/ai_assistant_view.ts b/packages/devextreme/js/__internal/grids/grid_core/ai_assistant/ai_assistant_view.ts
index 13e3a95e9f32..97dbb753da0b 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/ai_assistant/ai_assistant_view.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/ai_assistant/ai_assistant_view.ts
@@ -97,7 +97,7 @@ export class AIAssistantView extends View {
             popupOptions: {
               elementAttr: { class: this.addWidgetPrefix(CLASSES.aiAssistantConfirmDialog) },
             },
-          });
+          }, this.element());
 
           // @ts-expect-error
           confirmDialog.show().done((confirmResult) => {
diff --git a/packages/devextreme/js/__internal/grids/grid_core/ai_assistant/utils.ts b/packages/devextreme/js/__internal/grids/grid_core/ai_assistant/utils.ts
index b5e531ee738d..0cb05159e59a 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/ai_assistant/utils.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/ai_assistant/utils.ts
@@ -1,10 +1,12 @@
 import messageLocalization from '@js/common/core/localization/message';
 import type { ResponseStatus } from '@js/common/grids';
+import type { dxElementWrapper } from '@js/core/renderer';
 import { isObject } from '@js/core/utils/type';
 import type { Properties as ButtonProperties } from '@js/ui/button';
 import type { Message } from '@js/ui/chat';
 import { custom } from '@js/ui/dialog';
 import { current, isCompact, isFluent } from '@js/ui/themes';
+import { themeLength } from '@ts/core/utils/theme_length';
 import type { BaseDialog, DialogParams } from '@ts/ui/dialog';
 import type { z } from 'zod';
 
@@ -259,7 +261,12 @@ const getCancelButtonConfig = (): ButtonProperties => {
   return {};
 };
 
-const getConfirmDialogWidth = (): number => {
+const getConfirmDialogWidth = (gridElement?: Element | dxElementWrapper): number => {
+  const fromTheme = themeLength(gridElement, '--dx-grid-ai-confirm-dialog-width');
+
+  if (fromTheme !== undefined) {
+    return fromTheme;
+  }
   if (isCompact(current())) {
     return AI_ASSISTANT_CONFIRM_DIALOG_COMPACT_WIDTH;
   }
@@ -267,11 +274,14 @@ const getConfirmDialogWidth = (): number => {
   return AI_ASSISTANT_CONFIRM_DIALOG_WIDTH;
 };
 
-export const createConfirmDialog = (options?: DialogParams): BaseDialog => custom({
+export const createConfirmDialog = (
+  options?: DialogParams,
+  gridElement?: Element | dxElementWrapper,
+): BaseDialog => custom({
   messageHtml: messageLocalization.format('dxDataGrid-aiAssistantAbortConfirmText'),
   showTitle: false,
   dragEnabled: false,
-  width: getConfirmDialogWidth(),
+  width: getConfirmDialogWidth(gridElement),
   buttons: [
     {
       text: messageLocalization.format('No'),
diff --git a/packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/generate_grid_view_model.ts b/packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/generate_grid_view_model.ts
index b3d23b419944..231f33a71425 100644
--- a/packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/generate_grid_view_model.ts
+++ b/packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/generate_grid_view_model.ts
@@ -70,6 +70,7 @@ export const generateGridViewModel = (
     isTimelineView,
     hasAllDayPanel,
     isVirtualScrolling,
+    appointmentMinHeight,
   } = optionManager.options;
   const { viewDataProvider } = schedulerStore._workSpace;
 
@@ -85,7 +86,9 @@ export const generateGridViewModel = (
   const step6 = cropByVirtualScreen(step5, optionManager.getVirtualCropOptions());
 
   const step7 = addDirection(step6, 'horizontal', viewOrientation);
-  const step8 = addEmptiness(step7, { isTimelineView, isAdaptivityEnabled, isMonthView });
+  const step8 = addEmptiness(step7, {
+    isTimelineView, isAdaptivityEnabled, isMonthView, appointmentMinHeight,
+  });
 
   return step8;
 };
diff --git a/packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/options/get_max_level.ts b/packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/options/get_max_level.ts
index b80f4d86f1f3..0a56b0e71abc 100644
--- a/packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/options/get_max_level.ts
+++ b/packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/options/get_max_level.ts
@@ -12,6 +12,7 @@ interface Options {
   viewOrientation: Orientation;
   isTimelineView: boolean;
   isAdaptivityEnabled: boolean;
+  appointmentMinHeight?: number;
 }
 
 const ADAPTIVITY_MIN_APPOINTMENT_COUNT = 0;
@@ -25,6 +26,7 @@ export const getMaxLevel = ({
   viewOrientation,
   isTimelineView,
   isAdaptivityEnabled,
+  appointmentMinHeight,
 }: Options): number => {
   switch (maxAppointmentsPerCell) {
     case 'auto': {
@@ -42,6 +44,7 @@ export const getMaxLevel = ({
         isTimelineView,
         isAdaptivityEnabled,
         viewOrientation,
+        appointmentMinHeight,
       });
       const minAbstractSize = getAbstractSizeByViewOrientation(
         defaultAppointmentSize,
diff --git a/packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/options/get_min_appointment_size.test.ts b/packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/options/get_min_appointment_size.test.ts
new file mode 100644
index 000000000000..eae1e7ed77c6
--- /dev/null
+++ b/packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/options/get_min_appointment_size.test.ts
@@ -0,0 +1,50 @@
+import {
+  beforeEach, describe, expect, it, jest,
+} from '@jest/globals';
+import * as themes from '@js/ui/themes';
+
+import { getDefaultAppointmentSize, getMinAppointmentSize } from './get_min_appointment_size';
+
+jest.mock('@js/ui/themes', () => ({
+  current: jest.fn().mockReturnValue('generic.light'),
+  isCompact: jest.fn().mockReturnValue(false),
+}));
+
+const monthView = { isTimelineView: false, isAdaptivityEnabled: false, isMonthView: true };
+
+describe('appointment minimum height', () => {
+  beforeEach(() => {
+    (themes.isCompact as jest.Mock).mockReturnValue(false);
+  });
+
+  it('is the height the theme declares', () => {
+    expect(getMinAppointmentSize({ ...monthView, appointmentMinHeight: 26 }).height).toBe(26);
+  });
+
+  it('falls back to the legacy literals when the theme declares nothing', () => {
+    expect(getMinAppointmentSize(monthView).height).toBe(20);
+
+    (themes.isCompact as jest.Mock).mockReturnValue(true);
+
+    expect(getMinAppointmentSize(monthView).height).toBe(18);
+  });
+
+  it('sizes the default appointment by the same height', () => {
+    const size = getDefaultAppointmentSize({
+      ...monthView, viewOrientation: 'horizontal', appointmentMinHeight: 26,
+    });
+
+    expect(size.height).toBe(26);
+  });
+
+  it('leaves the day view minimum alone', () => {
+    const size = getMinAppointmentSize({
+      isTimelineView: false,
+      isAdaptivityEnabled: false,
+      isMonthView: false,
+      appointmentMinHeight: 26,
+    });
+
+    expect(size.height).toBe(12);
+  });
+});
diff --git a/packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/options/get_min_appointment_size.ts b/packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/options/get_min_appointment_size.ts
index c6df1d1cd46c..7c279d426be4 100644
--- a/packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/options/get_min_appointment_size.ts
+++ b/packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/options/get_min_appointment_size.ts
@@ -8,6 +8,7 @@ interface Options {
   isAdaptivityEnabled: boolean;
   isMonthView?: boolean;
   isAllDayAppointment?: boolean;
+  appointmentMinHeight?: number;
 }
 
 const COMPACT_THEME_APPOINTMENT_DEFAULT_HEIGHT = 18;
@@ -20,16 +21,19 @@ const APPOINTMENT_MIN_WIDTH = 40;
 const TIMELINE_APPOINTMENT_DEFAULT_HEIGHT = 60;
 const ADAPTIVE_APPOINTMENT_DEFAULT_WIDTH = 30; // used for vertical view
 
-// TODO get rid of depending from themes
-const getMinAppointmentHeightByTheme = (): number => (
-  isCompact(currentTheme())
+const getMinAppointmentHeight = (appointmentMinHeight?: number): number => {
+  if (appointmentMinHeight !== undefined) {
+    return appointmentMinHeight;
+  }
+
+  return isCompact(currentTheme())
     ? COMPACT_THEME_APPOINTMENT_DEFAULT_HEIGHT
-    : APPOINTMENT_DEFAULT_HEIGHT
-);
+    : APPOINTMENT_DEFAULT_HEIGHT;
+};
 
 export const getMinAppointmentSize = (options: Options): RealSize => {
   const {
-    isTimelineView, isAdaptivityEnabled, isMonthView, isAllDayAppointment,
+    isTimelineView, isAdaptivityEnabled, isMonthView, isAllDayAppointment, appointmentMinHeight,
   } = options;
 
   if (isAdaptivityEnabled) {
@@ -48,7 +52,7 @@ export const getMinAppointmentSize = (options: Options): RealSize => {
 
   const width = APPOINTMENT_MIN_WIDTH;
   const height = isMonthView || isAllDayAppointment
-    ? getMinAppointmentHeightByTheme()
+    ? getMinAppointmentHeight(appointmentMinHeight)
     : DAY_VIEW_APPOINTMENT_MIN_HEIGHT;
 
   return { width, height };
@@ -58,6 +62,7 @@ export const getDefaultAppointmentSize = ({
   isTimelineView,
   isAdaptivityEnabled,
   viewOrientation,
+  appointmentMinHeight,
 }: Options & {
   viewOrientation: Orientation;
 }): RealSize => {
@@ -72,6 +77,8 @@ export const getDefaultAppointmentSize = ({
     width: viewOrientation === 'vertical'
       ? APPOINTMENT_DEFAULT_VERTICAL_WIDTH
       : APPOINTMENT_DEFAULT_HORIZONTAL_WIDTH,
-    height: isTimelineView ? TIMELINE_APPOINTMENT_DEFAULT_HEIGHT : getMinAppointmentHeightByTheme(),
+    height: isTimelineView
+      ? TIMELINE_APPOINTMENT_DEFAULT_HEIGHT
+      : getMinAppointmentHeight(appointmentMinHeight),
   };
 };
diff --git a/packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/options/get_panel_collector_options.ts b/packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/options/get_panel_collector_options.ts
index 4828185a4a9d..e1300670e8c9 100644
--- a/packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/options/get_panel_collector_options.ts
+++ b/packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/options/get_panel_collector_options.ts
@@ -22,6 +22,7 @@ export const getPanelCollectorOptions = (schedulerStore: Scheduler, {
   collectorCSS,
   DOMMetaData,
   panelName,
+  appointmentMinHeight,
 }: {
   DOMMetaData: DOMMetaData;
   alwaysReserveSpaceForCollector: boolean;
@@ -30,6 +31,7 @@ export const getPanelCollectorOptions = (schedulerStore: Scheduler, {
   isAdaptivityEnabled: boolean;
   collectorCSS: CollectorCSS;
   panelName: PanelName;
+  appointmentMinHeight?: number;
 }): {
   allDayPanelCellSize: RealSize;
   cellSize: RealSize;
@@ -69,6 +71,7 @@ export const getPanelCollectorOptions = (schedulerStore: Scheduler, {
     viewOrientation,
     isTimelineView,
     isAdaptivityEnabled,
+    appointmentMinHeight,
   };
   const maxLevel = getMaxLevel(maxLevelOptions);
   const minLevel = viewOrientation === 'vertical' ? MIN_LEVEL_VERTICAL_VIEW : getMaxLevel({
diff --git a/packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/options/get_view_model_options.ts b/packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/options/get_view_model_options.ts
index e04a6a1fe8c0..1cd8d65f669d 100644
--- a/packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/options/get_view_model_options.ts
+++ b/packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/options/get_view_model_options.ts
@@ -1,5 +1,6 @@
 import type { Orientation } from '@js/common';
 import type { SnapToCellsMode } from '@js/ui/scheduler';
+import { themeLength } from '@ts/core/utils/theme_length';
 import type Scheduler from '@ts/scheduler/scheduler';
 
 import type { ViewType } from '../../../types';
@@ -56,6 +57,7 @@ export interface ViewModelOptions {
   isAdaptivityEnabled: boolean;
   cellDurationMinutes: number;
   isVirtualScrolling: boolean;
+  appointmentMinHeight?: number;
 }
 
 export const getViewModelOptions = (schedulerStore: Scheduler): ViewModelOptions => {
@@ -81,6 +83,7 @@ export const getViewModelOptions = (schedulerStore: Scheduler): ViewModelOptions
   const snapToCellsMode = schedulerStore.getViewOption('snapToCellsMode');
   const showAllDayPanel = schedulerStore.getViewOption('showAllDayPanel');
   const isVirtualScrolling = schedulerStore.isVirtualScrolling();
+  const appointmentMinHeight = themeLength(schedulerStore.$element(), '--dx-scheduler-appointment-min-height');
 
   return {
     type,
@@ -98,5 +101,6 @@ export const getViewModelOptions = (schedulerStore: Scheduler): ViewModelOptions
     cellDurationMinutes,
     hasAllDayPanel: showAllDayPanel && allDayPanelMode !== 'hidden' && viewOrientation === 'vertical',
     isVirtualScrolling,
+    appointmentMinHeight,
   };
 };
diff --git a/packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/options/option_manager.test.ts b/packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/options/option_manager.test.ts
index 38d2c8d21c21..c958b124ebd5 100644
--- a/packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/options/option_manager.test.ts
+++ b/packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/options/option_manager.test.ts
@@ -1,6 +1,7 @@
 import {
   describe, expect, it, jest,
 } from '@jest/globals';
+import $ from '@js/core/renderer';
 import type Scheduler from '@ts/scheduler/scheduler';
 import type { DOMMetaData } from '@ts/scheduler/types';
 
@@ -56,6 +57,7 @@ const createSchedulerStore = (workspace: unknown): Scheduler => ({
   option: (name: string) => schedulerOptions.get(name),
   isVirtualScrolling: () => false,
   getWorkSpace: () => workspace,
+  $element: () => $('<div>'),
 }) as unknown as Scheduler;
 
 describe('OptionManager', () => {
diff --git a/packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/options/option_manager.ts b/packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/options/option_manager.ts
index 3b55c76e9fb1..cd96ccdf3756 100644
--- a/packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/options/option_manager.ts
+++ b/packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/options/option_manager.ts
@@ -102,6 +102,7 @@ export class OptionManager {
         cellDurationMinutes,
         isTimelineView,
         hasAllDayPanel,
+        appointmentMinHeight,
       } = this.options;
       const viewOrientation = panelName === 'allDayPanel' ? 'horizontal' : nativeViewOrientation;
       const isCompactCollector = isAdaptivityEnabled || viewOrientation === 'vertical';
@@ -120,6 +121,7 @@ export class OptionManager {
         collectorCSS,
         DOMMetaData: layoutData.getDOMElementsMetaData(),
         panelName,
+        appointmentMinHeight,
       });
 
       const {
diff --git a/packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/steps/add_emptiness.ts b/packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/steps/add_emptiness.ts
index 249b011ea7b3..8ce008654007 100644
--- a/packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/steps/add_emptiness.ts
+++ b/packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/steps/add_emptiness.ts
@@ -6,6 +6,7 @@ interface AddEmptinessOptions {
   isTimelineView: boolean;
   isAdaptivityEnabled: boolean;
   isMonthView: boolean;
+  appointmentMinHeight?: number;
 }
 
 export const addEmptiness = <T extends Geometry & AllDayPanelOccupation & { allDay: boolean }>(
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..ebbf461461de
--- /dev/null
+++ b/packages/devextreme/js/__internal/ui/__tests__/themes.test.ts
@@ -0,0 +1,304 @@
+import {
+  afterEach, beforeEach, describe, expect, it, jest,
+} from '@jest/globals';
+import $ from '@js/core/renderer';
+import errors from '@js/ui/widget/ui.errors';
+import { themeModeChangedCallback } from '@ts/ui/m_themes_callback';
+import {
+  customAccentColor, init, isFluentNext, mode, refreshMode, resetTheme,
+} from '@ts/ui/themes';
+
+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);
+    }
+  });
+});
+
+describe('themes.isFluentNext', () => {
+  it.each([
+    'fluent-next.blue.light',
+    'fluent-next.blue.dark',
+    'fluent-next.blue.light.compact',
+    'fluent-next.blue.dark.compact',
+  ])('knows %s by name', (themeName) => {
+    expect(isFluentNext(themeName)).toBe(true);
+  });
+
+  it.each([
+    'fluent.blue.light',
+    'generic.light',
+    'material.blue.light',
+  ])('tells %s from it, though the fluent name is a part of the fluent-next one', (themeName) => {
+    expect(isFluentNext(themeName)).toBe(false);
+  });
+});
+
+describe('themes.customAccentColor', () => {
+  const useTheme = (themeName: string, pageCss = ''): void => {
+    style(`${withThemeMarker(themeName)} ${pageCss}`);
+    resetTheme();
+  };
+
+  const useNoThemeYet = (): void => {
+    style('');
+    resetTheme();
+  };
+
+  const declaredAccentColor = (): string => window.getComputedStyle(document.documentElement)
+    .getPropertyValue('--dx-accent-color')
+    .trim();
+
+  beforeEach(() => {
+    useTheme('fluent-next.blue.light');
+  });
+
+  afterEach(() => {
+    document.documentElement.style.removeProperty('--dx-accent-color');
+    document.head.innerHTML = '';
+    resetTheme();
+    jest.restoreAllMocks();
+  });
+
+  it.each([
+    '#a703ff',
+    '#abc',
+    '#a703ff80',
+    'rebeccapurple',
+    'rgb(167, 3, 255)',
+    'rgb(167 3 255)',
+    'hsl(280 100% 50%)',
+    'oklch(0.6 0.15 250)',
+    'color-mix(in oklab, red, blue)',
+    'transparent',
+  ])('declares %s as given, a color the browser parses', (value) => {
+    customAccentColor(value);
+
+    expect(declaredAccentColor()).toBe(value);
+  });
+
+  it('reads the color the page declares in a stylesheet', () => {
+    useTheme('fluent-next.blue.light', ':root { --dx-accent-color: #0f6cbd; }');
+
+    expect(customAccentColor()).toBe('#0f6cbd');
+  });
+
+  it('answers with nothing while no accent color is declared', () => {
+    expect(customAccentColor()).toBe('');
+  });
+
+  it('answers with the color when the value handed in is absent', () => {
+    const withAnAbsentValue = customAccentColor as (color?: string | null) => string | undefined;
+    customAccentColor('#a703ff');
+
+    expect(withAnAbsentValue(undefined)).toBe('#a703ff');
+    expect(declaredAccentColor()).toBe('#a703ff');
+  });
+
+  it('brings back the palette of the theme when passed null', () => {
+    useTheme('fluent-next.blue.light', ':root { --dx-accent-color: #0f6cbd; }');
+    customAccentColor('#a703ff');
+
+    customAccentColor(null);
+
+    expect(declaredAccentColor()).toBe('#0f6cbd');
+  });
+
+  it('takes an accent written as a reference to another custom property', () => {
+    const log = jest.spyOn(errors, 'log').mockImplementation(() => {});
+
+    customAccentColor('var(--brand)');
+
+    expect(document.documentElement.style.getPropertyValue('--dx-accent-color')).toBe('var(--brand)');
+    expect(log).not.toHaveBeenCalled();
+  });
+
+  it.each([
+    'foo',
+    'rgb(167 3)',
+    '   ',
+  ])('leaves the accent color alone and warns about %s, which parses as no color at all', (value) => {
+    const log = jest.spyOn(errors, 'log').mockImplementation(() => {});
+    customAccentColor('#a703ff');
+
+    customAccentColor(value);
+
+    expect(declaredAccentColor()).toBe('#a703ff');
+    expect(log).toHaveBeenCalledWith('W0024', value);
+  });
+
+  it('brings back the palette of the theme when passed an empty string', () => {
+    const log = jest.spyOn(errors, 'log').mockImplementation(() => {});
+    useTheme('fluent-next.blue.light', ':root { --dx-accent-color: #0f6cbd; }');
+    customAccentColor('#a703ff');
+
+    customAccentColor('');
+
+    expect(declaredAccentColor()).toBe('#0f6cbd');
+    expect(log).not.toHaveBeenCalled();
+  });
+
+  it('takes back whatever the getter hands out while no accent color is declared', () => {
+    const log = jest.spyOn(errors, 'log').mockImplementation(() => {});
+
+    customAccentColor(customAccentColor());
+
+    expect(log).not.toHaveBeenCalled();
+  });
+
+  it.each([
+    'currentColor',
+    'inherit',
+    'initial',
+    'unset',
+    'revert',
+    'revert-layer',
+  ])('refuses %s, which points at another color instead of naming one', (value) => {
+    const log = jest.spyOn(errors, 'log').mockImplementation(() => {});
+
+    customAccentColor(value);
+
+    expect(declaredAccentColor()).toBe('');
+    expect(log).toHaveBeenCalledWith('W0024', value);
+  });
+
+  it('reads the value the same however it is capitalized or spaced', () => {
+    jest.spyOn(errors, 'log').mockImplementation(() => {});
+
+    customAccentColor(' #A703FF ');
+    const written = declaredAccentColor();
+    customAccentColor('INHERIT');
+
+    expect([written, declaredAccentColor()]).toEqual(['#A703FF', '#A703FF']);
+  });
+
+  it('declares the color and warns when the loaded theme knows no accent color', () => {
+    const log = jest.spyOn(errors, 'log').mockImplementation(() => {});
+    useTheme('generic.light');
+
+    customAccentColor('#a703ff');
+
+    expect(declaredAccentColor()).toBe('#a703ff');
+    expect(log).toHaveBeenCalledWith('W0025', 'generic.light');
+  });
+
+  it('tells the fluent theme apart from the fluent-next one', () => {
+    const log = jest.spyOn(errors, 'log').mockImplementation(() => {});
+    useTheme('fluent.blue.light');
+
+    customAccentColor('#a703ff');
+
+    expect(declaredAccentColor()).toBe('#a703ff');
+    expect(log).toHaveBeenCalledWith('W0025', 'fluent.blue.light');
+  });
+
+  it('declares the color and stays silent while no theme has named itself yet', () => {
+    const log = jest.spyOn(errors, 'log').mockImplementation(() => {});
+    useNoThemeYet();
+
+    customAccentColor('#a703ff');
+
+    expect(declaredAccentColor()).toBe('#a703ff');
+    expect(log).not.toHaveBeenCalled();
+  });
+
+  it('writes into the document it was initialized with, not into the one the page runs in', () => {
+    const otherDocument = document.implementation.createHTMLDocument();
+
+    try {
+      init({ context: otherDocument, _autoInit: true });
+      customAccentColor('#a703ff');
+
+      expect([
+        otherDocument.documentElement.style.getPropertyValue('--dx-accent-color'),
+        document.documentElement.style.getPropertyValue('--dx-accent-color'),
+      ]).toEqual(['#a703ff', '']);
+    } finally {
+      init({ _autoInit: true });
+    }
+  });
+
+  it('clears the color a theme that knows no accent has inherited from the previous one', () => {
+    const log = jest.spyOn(errors, 'log').mockImplementation(() => {});
+    customAccentColor('#a703ff');
+    useTheme('generic.light');
+
+    customAccentColor(null);
+
+    expect(declaredAccentColor()).toBe('');
+    expect(log).not.toHaveBeenCalled();
+  });
+});
diff --git a/packages/devextreme/js/__internal/ui/file_manager/ui.file_manager.toolbar.ts b/packages/devextreme/js/__internal/ui/file_manager/ui.file_manager.toolbar.ts
index fd35b917b4df..3e8f12fea102 100644
--- a/packages/devextreme/js/__internal/ui/file_manager/ui.file_manager.toolbar.ts
+++ b/packages/devextreme/js/__internal/ui/file_manager/ui.file_manager.toolbar.ts
@@ -17,6 +17,7 @@ import {
   current, isCompact, isFluent, isMaterial,
 } from '@js/ui/themes';
 import Toolbar from '@js/ui/toolbar';
+import { themeLength } from '@ts/core/utils/theme_length';
 import type { OptionChanged } from '@ts/core/widget/types';
 import type { WidgetProperties } from '@ts/core/widget/widget';
 import Widget from '@ts/core/widget/widget';
@@ -433,6 +434,22 @@ class FileManagerToolbar extends Widget<FileManagerToolbarOptions> {
     };
   }
 
+  _getViewModePopupWidth(): number | undefined {
+    const fromTheme = themeLength(this.$element(), '--dx-file-manager-toolbar-viewmode-popup-width');
+
+    if (isDefined(fromTheme)) {
+      return fromTheme;
+    }
+    if (isMaterial(current())) {
+      return isCompact(current()) ? 28 : 36;
+    }
+    if (isFluent(current())) {
+      return isCompact(current()) ? 34 : 40;
+    }
+
+    return undefined;
+  }
+
   // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
   _createViewModeItem() {
     const commandItems: Command[] = ['details', 'thumbnails'].map((name: string) => {
@@ -447,11 +464,10 @@ class FileManagerToolbar extends Widget<FileManagerToolbarOptions> {
     const dropDownOptions: any = {
       container: this._$viewSwitcherPopup,
     };
+    const width = this._getViewModePopupWidth();
 
-    if (isMaterial(current())) {
-      dropDownOptions.width = isCompact(current()) ? 28 : 36;
-    } else if (isFluent(current())) {
-      dropDownOptions.width = isCompact(current()) ? 34 : 40;
+    if (isDefined(width)) {
+      dropDownOptions.width = width;
     }
 
     return {
diff --git a/packages/devextreme/js/__internal/ui/html_editor/ui/aiDialog.ts b/packages/devextreme/js/__internal/ui/html_editor/ui/aiDialog.ts
index cc70306dc760..f0d11f45d800 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/ui/aiDialog.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/ui/aiDialog.ts
@@ -17,6 +17,7 @@ import type { Properties as SelectBoxProperties } from '@js/ui/select_box';
 import SelectBox from '@js/ui/select_box';
 import TextArea from '@js/ui/text_area';
 import { current, isCompact, isMaterial } from '@js/ui/themes';
+import { themeLength } from '@ts/core/utils/theme_length';
 import type { DialogPromise } from '@ts/ui/html_editor/types';
 import BaseDialog from '@ts/ui/html_editor/ui/m_baseDialog';
 import type {
@@ -63,10 +64,6 @@ export const REPLACE_DROPDOWN_WIDTH = 150;
 export const ACTION_BUTTON_WIDTH = 110;
 export const COMPACT_ACTION_BUTTON_WIDTH = 100;
 
-function getActionButtonWidth(): number {
-  return isCompact(current()) ? COMPACT_ACTION_BUTTON_WIDTH : ACTION_BUTTON_WIDTH;
-}
-
 enum DialogState {
   Initial = 'initial',
   Asking = 'asking',
@@ -426,8 +423,13 @@ export default class AIDialog extends BaseDialog<AIDialogResult> {
     };
   }
 
+  protected _getActionButtonWidth(): number {
+    return themeLength(this._$container, '--dx-html-editor-ai-dialog-button-width')
+      ?? (isCompact(current()) ? COMPACT_ACTION_BUTTON_WIDTH : ACTION_BUTTON_WIDTH);
+  }
+
   protected _getGenerateButtonItem(): NamedToolbarItem {
-    const width = getActionButtonWidth();
+    const width = this._getActionButtonWidth();
     const promptTextArea = this._promptTextArea;
     const disabled = !promptTextArea.option('value');
 
@@ -449,7 +451,7 @@ export default class AIDialog extends BaseDialog<AIDialogResult> {
   }
 
   protected _getCancelButtonItem(): NamedToolbarItem {
-    const width = getActionButtonWidth();
+    const width = this._getActionButtonWidth();
     return {
       name: 'cancel',
       toolbar: 'bottom',
diff --git a/packages/devextreme/js/__internal/ui/m_themes_callback.ts b/packages/devextreme/js/__internal/ui/m_themes_callback.ts
index 8a5897072ef2..65c68a2a8da1 100644
--- a/packages/devextreme/js/__internal/ui/m_themes_callback.ts
+++ b/packages/devextreme/js/__internal/ui/m_themes_callback.ts
@@ -1,3 +1,5 @@
 import Callbacks from '@js/core/utils/callbacks';
 
 export const themeReadyCallback = Callbacks();
+
+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 ae3e713b78cb..863ec08c62a0 100644
--- a/packages/devextreme/js/__internal/ui/overlay/overlay.ts
+++ b/packages/devextreme/js/__internal/ui/overlay/overlay.ts
@@ -46,6 +46,7 @@ import selectors from '@ts/core/utils/selectors';
 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,42 @@ 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);
+    }
+  }
+
+  _themeModeChangeHandler(): void {
+    if (!this._isVisible()) {
+      return;
+    }
+
+    const { $container } = this._positionController;
+    const wrapper = this._$wrapper?.get(0) as HTMLElement | undefined;
+
+    if (!$container || $container.get(0) === wrapper?.parentElement) {
+      return;
+    }
+
+    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 +1623,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 de63a15c9281..271eb5839794 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,6 @@ export class OverlayPositionController<
   }
 
   get $container(): dxElementWrapper | undefined {
-    // NOTE: swatch classes can be updated runtime
     this.updateContainer();
 
     return this._$markupContainer;
diff --git a/packages/devextreme/js/__internal/ui/popup/__tests__/popup_position_controller.test.ts b/packages/devextreme/js/__internal/ui/popup/__tests__/popup_position_controller.test.ts
index cefbb17620de..bb60abe2c61d 100644
--- a/packages/devextreme/js/__internal/ui/popup/__tests__/popup_position_controller.test.ts
+++ b/packages/devextreme/js/__internal/ui/popup/__tests__/popup_position_controller.test.ts
@@ -9,6 +9,8 @@ import type { PopupControllerProperties } from '../popup_position_controller';
 import { PopupPositionController } from '../popup_position_controller';
 
 const SWATCH_CLASS = 'dx-swatch-custom';
+const MODE_CLASS = 'dx-theme-mode-dark';
+const MODE_STYLES = '.mode-dark { --dx-theme-mode: dark; }';
 
 describe('PopupPositionController drag and resize area', () => {
   let viewPortElement: HTMLElement = document.createElement('div');
@@ -31,6 +33,10 @@ describe('PopupPositionController drag and resize area', () => {
       .querySelector('.owner') as Element,
   );
 
+  const ownerInMode = (): dxElementWrapper => $(
+    appended('<div class="owner mode-dark"></div>').querySelector('.owner') as Element,
+  );
+
   const controllerFor = (
     properties: Partial<PopupControllerProperties>,
     $root: dxElementWrapper = owner(),
@@ -45,6 +51,7 @@ describe('PopupPositionController drag and resize area', () => {
   ): unknown => controllerFor(properties, $root).$dragResizeContainer?.get(0);
 
   beforeEach(() => {
+    document.head.innerHTML = `<style>${MODE_STYLES}</style>`;
     viewPortElement = appended();
     viewPortElement.className = 'dx-viewport';
     viewPort(viewPortElement);
@@ -52,6 +59,7 @@ describe('PopupPositionController drag and resize area', () => {
 
   afterEach(() => {
     viewPort(null);
+    document.head.innerHTML = '';
     document.body.innerHTML = '';
   });
 
@@ -82,18 +90,21 @@ describe('PopupPositionController drag and resize area', () => {
     expect(areaFor({ dragAndResizeArea: appended(), dragOutsideBoundary: true })).toBe(window);
   });
 
-  describe('for an element inside a swatch', () => {
+  describe.each([
+    { scope: 'a swatch', owner: ownerInSwatch, containerClass: SWATCH_CLASS },
+    { scope: 'a theme mode', owner: ownerInMode, containerClass: MODE_CLASS },
+  ])('for an element inside $scope', ({ owner: ownerInScope, containerClass }) => {
     it('is the view port, not the container the markup goes into', () => {
-      const controller = controllerFor({}, ownerInSwatch());
+      const controller = controllerFor({}, ownerInScope());
 
       expect(controller.$dragResizeContainer?.get(0)).toBe(viewPortElement);
-      expect(controller.$container?.get(0)?.classList.contains(SWATCH_CLASS)).toBe(true);
+      expect(controller.$container?.get(0)?.classList.contains(containerClass)).toBe(true);
     });
 
     it('is still the container the popup was given', () => {
       const container = appended();
 
-      expect(areaFor({ container }, ownerInSwatch())).toBe(container);
+      expect(areaFor({ container }, ownerInScope())).toBe(container);
     });
   });
 });
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 c84b8dd641d7..7b3fe00802b2 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
@@ -17,6 +17,7 @@ import {
 } from '@js/ui/themes';
 import errors from '@js/ui/widget/ui.errors';
 import swatchContainer from '@ts/core/utils/swatch_container';
+import { themeLength } from '@ts/core/utils/theme_length';
 import type { OptionChanged } from '@ts/core/widget/types';
 
 import type SpeedDialAction from './speed_dial_action';
@@ -35,6 +36,12 @@ type SpeedDialActionPosition = Omit<PositionConfig, 'of'> & {
   of?: PositionConfig['of'] | dxElementWrapper | null;
 };
 
+interface ActionsGeometry {
+  indent: number;
+  childIndent: number;
+  childOffset: number;
+}
+
 let speedDialMainItem: SpeedDialMainItem | null = null;
 
 const modifyActionOptions = (action: SpeedDialAction): Partial<SpeedDialItemProperties> => {
@@ -314,7 +321,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', () => {
@@ -351,13 +358,13 @@ class SpeedDialMainItem extends SpeedDialItem<SpeedDialMainItemProperties> {
   _getDirectionIndex(
     actions: SpeedDialItem[],
     direction: SpeedDialItemProperties['direction'],
+    geometry: ActionsGeometry,
   ): number {
     const directionIndex = 1;
 
     if (direction === 'auto') {
       const contentHeight = getHeight(this.$content());
-      const indent = this.initialOption('indent') as unknown as number;
-      const childIndent = this.initialOption('childIndent') as unknown as number;
+      const { indent, childIndent } = geometry;
       const actionsHeight = indent + childIndent * actions.length - contentHeight;
       const offsetTop = this.$content()?.offset()?.top ?? 0;
 
@@ -375,24 +382,39 @@ class SpeedDialMainItem extends SpeedDialItem<SpeedDialMainItemProperties> {
     return direction !== 'down' ? -directionIndex : directionIndex;
   }
 
+  _getActionsGeometry(): ActionsGeometry {
+    const $element = this.$element();
+    const length = (
+      property: string,
+      option: keyof ActionsGeometry,
+    ): number => themeLength($element, property)
+      ?? (this.initialOption(option) as unknown as number);
+
+    return {
+      indent: length('--dx-speed-dial-action-fa-button-offset', 'indent'),
+      childIndent: length('--dx-speed-dial-action-fa-button-spacing', 'childIndent'),
+      childOffset: length('--dx-speed-dial-action-fa-button-with-label-inset-inline', 'childOffset'),
+    };
+  }
+
   _getActionPosition(actions: SpeedDialItem[], index: number): SpeedDialActionPosition {
     const action = actions[index];
     const hasActionLabel = Boolean(action._options.silent('label'));
+    const geometry = this._getActionsGeometry();
+    const { indent, childIndent, childOffset } = geometry;
 
-    const actionOffsetXValue = this.initialOption('childOffset') as unknown as number;
     let actionOffsetX = 0;
 
     if (hasActionLabel && !this._$label) {
       actionOffsetX = this._isPositionLeft(this._getPosition())
-        ? actionOffsetXValue
-        : -actionOffsetXValue;
+        ? childOffset
+        : -childOffset;
     }
 
-    const indent = this.initialOption('indent') as unknown as number;
-    const childIndent = this.initialOption('childIndent') as unknown as number;
     const actionOffsetYValue = indent + childIndent * index;
     const { direction } = this.option();
-    const actionOffsetY = this._getDirectionIndex(actions, direction) * actionOffsetYValue;
+    const directionIndex = this._getDirectionIndex(actions, direction, geometry);
+    const actionOffsetY = directionIndex * actionOffsetYValue;
 
     let actionPositionAtMy: HorizontalAlignment = 'center';
 
@@ -483,7 +505,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 675f5a025202..4c0441708d09 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;
@@ -40,6 +41,22 @@ let defaultTimeout = 15000;
 
 const THEME_MARKER_PREFIX = 'dx.';
 
+const ACCENT_COLOR_PROPERTY = '--dx-accent-color';
+
+const VALUES_THAT_POINT_AT_ANOTHER_COLOR = [
+  'currentcolor', 'inherit', 'initial', 'unset', 'revert', 'revert-layer',
+];
+
+function isValidColor(value: string): boolean {
+  const probe = domAdapter.createElement('div');
+
+  probe.style.color = value;
+
+  const parsed = probe.style.color.trim().toLowerCase();
+
+  return parsed !== '' && !VALUES_THAT_POINT_AT_ANOTHER_COLOR.includes(parsed);
+}
+
 function readThemeMarker(): string | null {
   if (!hasWindow()) {
     return null;
@@ -349,13 +366,10 @@ 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 {
+  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 {
@@ -366,6 +380,10 @@ export function isFluent(themeName: string): boolean {
   return isTheme('fluent', themeName);
 }
 
+export function isFluentNext(themeName: string): boolean {
+  return isTheme('fluent-next', themeName);
+}
+
 export function isMaterialBased(themeName: string): boolean {
   return isMaterial(themeName) || isFluent(themeName);
 }
@@ -374,7 +392,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);
 }
 
@@ -382,6 +400,50 @@ export function isCompact(themeName: string): boolean {
   return isTheme('compact', themeName);
 }
 
+export function mode(element: Element | dxElementWrapper): 'light' | 'dark' {
+  return resolvedThemeMode(element) ?? (isDark() ? 'dark' : 'light');
+}
+
+export function refreshMode(): void {
+  themeModeChangedCallback.fire();
+}
+
+export function customAccentColor(): string;
+export function customAccentColor(color: string | null): void;
+export function customAccentColor(color?: string | null): string | undefined {
+  if (!hasWindow()) {
+    return color === undefined ? '' : undefined;
+  }
+
+  const root = context.documentElement;
+
+  if (color === undefined) {
+    return window.getComputedStyle(root).getPropertyValue(ACCENT_COLOR_PROPERTY).trim();
+  }
+
+  if (color === null || color === '') {
+    root.style.removeProperty(ACCENT_COLOR_PROPERTY);
+
+    return undefined;
+  }
+
+  if (!isValidColor(color)) {
+    errors.log('W0024', color);
+
+    return undefined;
+  }
+
+  const themeName = current();
+
+  if (themeName && !isFluentNext(themeName)) {
+    errors.log('W0025', themeName);
+  }
+
+  root.style.setProperty(ACCENT_COLOR_PROPERTY, color);
+
+  return undefined;
+}
+
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 function themeReady(callback): void {
   themeReadyCallback.add(callback);
@@ -510,6 +572,9 @@ export default {
   isMaterial,
   isFluent,
   isMaterialBased,
+  mode,
+  refreshMode,
+  customAccentColor,
   detachCssClasses,
   attachCssClasses,
   current,
diff --git a/packages/devextreme/js/__internal/viz/__tests__/handed_out.test.ts b/packages/devextreme/js/__internal/viz/__tests__/handed_out.test.ts
new file mode 100644
index 000000000000..0f2baf1f7528
--- /dev/null
+++ b/packages/devextreme/js/__internal/viz/__tests__/handed_out.test.ts
@@ -0,0 +1,229 @@
+import {
+  afterEach, beforeAll, beforeEach, describe, expect, it, jest,
+} from '@jest/globals';
+import { setWindow } from '@js/core/utils/window';
+import * as publicPalette from '@js/viz/palette';
+import * as publicThemes from '@js/viz/themes';
+import { Color } from '@ts/color';
+import { fallbackOf } from '@ts/core/utils/css_variables';
+import type * as HandedOut from '@ts/viz/handed_out';
+import * as rawPalette from '@ts/viz/palette';
+import { getTheme as getRawTheme } from '@ts/viz/themes';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Theme = Record<string, any>;
+
+const palette = publicPalette as unknown as typeof HandedOut;
+const { getTheme } = publicThemes as unknown as { getTheme: (name: string) => Theme };
+
+const LITERALS = 'fluent next literals';
+const LITERAL_PALETTE = {
+  simpleSet: ['#0078d4', '#c83d3d', '#008f04', '#eaa300', '#e43ba6', '#865cbf'],
+  indicatingSet: ['#107c10', '#f7630c', '#c50f1f'],
+  gradientSet: ['#0078d4', '#008f04'],
+  accentColor: '#0f6cbd',
+};
+const FLUENT_NEXT_THEMES = [
+  'fluent-next.blue.light',
+  'fluent-next.blue.light.compact',
+  'fluent-next.blue.dark',
+  'fluent-next.blue.dark.compact',
+];
+const EXTENSION_MODES = ['blend', 'alternate', 'extrapolate'];
+
+const leftToTheBrowser = (value: unknown): string[] => {
+  if (typeof value === 'string') {
+    return /var\(|color-mix\(|from /.test(value) ? [value] : [];
+  }
+
+  return value && typeof value === 'object' ? Object.values(value).flatMap(leftToTheBrowser) : [];
+};
+
+const upTo = (count: number): number[] => Array.from({ length: count }, (_, index) => index);
+
+const generatedFromLiterals = (count: number, options: object): unknown => rawPalette
+  .generateColors(LITERALS, count, options as Parameters<typeof rawPalette.generateColors>[2]);
+
+beforeAll(() => {
+  rawPalette.registerPalette(LITERALS, LITERAL_PALETTE);
+});
+
+describe.each([
+  ['with no window to resolve against', (): void => { setWindow({}, false); }],
+  ['in a document that resolves no name', (): void => {}],
+])('handing the Fluent Next colours out %s', (_, enter) => {
+  beforeEach(enter);
+
+  afterEach(() => {
+    setWindow(window, true);
+  });
+
+  it('hands out the literal of every name, never the name', () => {
+    expect(palette.getPalette('Fluent Next', undefined)).toEqual(LITERAL_PALETTE);
+    expect(palette.getPalette('Fluent Next', { type: 'indicatingSet' })).toEqual(LITERAL_PALETTE.indicatingSet);
+    expect(palette.getAccentColor('Fluent Next')).toBe(LITERAL_PALETTE.accentColor);
+  });
+
+  it.each(EXTENSION_MODES)('extends the palette by %s exactly as it extends the literals', (mode) => {
+    const parameters = { extensionMode: mode, useHighlight: true };
+    const handed = palette.createPalette('Fluent Next', parameters);
+    const literal = rawPalette.createPalette(LITERALS, parameters);
+
+    expect(palette.generateColors('Fluent Next', 20, { paletteExtensionMode: mode, useHighlight: true }))
+      .toEqual(generatedFromLiterals(20, { paletteExtensionMode: mode, useHighlight: true }));
+    expect(upTo(20).map((): unknown => handed.getNextColor(20)))
+      .toEqual(upTo(20).map((): unknown => literal.getNextColor(20)));
+    expect(handed.reset().generateColors(20)).toEqual(literal.reset().generateColors(20));
+  });
+
+  it('splits and grades the gradient set from the literals', () => {
+    const discrete = palette.getDiscretePalette('Fluent Next', 7);
+    const literalDiscrete = rawPalette.getDiscretePalette(LITERALS, 7, undefined);
+    const gradient = palette.getGradientPalette('Fluent Next');
+    const literalGradient = rawPalette.getGradientPalette(LITERALS, undefined);
+
+    expect(upTo(7).map((index) => discrete.getColor(index)))
+      .toEqual(upTo(7).map((index) => literalDiscrete.getColor(index)));
+    expect([0, 0.3, 1].map((ratio) => gradient.getColor(ratio)))
+      .toEqual([0, 0.3, 1].map((ratio) => literalGradient.getColor(ratio)));
+  });
+
+  it.each(FLUENT_NEXT_THEMES)('hands out %s with literals only', (name) => {
+    const theme = getTheme(name);
+    const registered: Theme = getRawTheme(name);
+
+    expect(leftToTheBrowser(theme)).toEqual([]);
+    expect(theme.backgroundColor).toBe(fallbackOf(registered.backgroundColor));
+    expect(theme.font.family).toBe(fallbackOf(registered.font.family));
+    expect(registered.backgroundColor).toMatch(/^var\(--dx-viz-bg, /);
+  });
+
+  it('hands a font weight out as the number every other theme gives', () => {
+    const theme = getTheme('fluent-next.blue.light');
+    const registered: Theme = getRawTheme('fluent-next.blue.light');
+
+    expect(registered.font.weight).toBe('var(--dx-viz-font-weight, 400)');
+    expect(theme.font.weight).toBe(400);
+    expect(theme.title.font.weight).toBe(600);
+  });
+
+  it('leaves every other palette and theme exactly as it was', () => {
+    expect(palette.getPalette('Material', undefined)).toBe(rawPalette.getPalette('Material', undefined));
+    expect(palette.generateColors('Soft Pastel', 20, {}))
+      .toEqual(rawPalette.generateColors('Soft Pastel', 20, { keepLastColorInEnd: false }));
+    ['generic.light', 'generic.dark', 'material.blue.light', 'fluent.blue.light', 'fluent.blue.dark'].forEach((name) => {
+      expect(getTheme(name)).toBe(getRawTheme(name));
+    });
+  });
+});
+
+describe('handing the Fluent Next colours out on a page that paints the names', () => {
+  const DECLARED_FONT = 'Inter, sans-serif';
+  const DECLARED_TITLE_WEIGHT = '700';
+  const MIXED = 'color(srgb 0.2 0.4 0.6)';
+  const PRIMARY_IN_SRGB = 'color(srgb -0.186828 0.505925 0.943796)';
+  let declaredBlue = 'rgb(11, 7, 3)';
+  let declaredPrimary = 'rgb(15, 108, 189)';
+
+  const paint = (written: string): string => {
+    if (/--dx-viz-font-family|font-weight/.test(written)) {
+      return 'none';
+    }
+
+    if (written.startsWith('color-mix(in srgb, var(--dx-viz-primary,')) {
+      return PRIMARY_IN_SRGB;
+    }
+
+    if (/color-mix\(|from /.test(written)) {
+      return MIXED;
+    }
+
+    if (written.startsWith('var(--dx-viz-blue,')) {
+      return declaredBlue;
+    }
+
+    if (written.startsWith('var(--dx-viz-primary,')) {
+      return declaredPrimary;
+    }
+
+    const { r, g, b } = new Color(fallbackOf(written));
+
+    return `rgb(${r}, ${g}, ${b})`;
+  };
+
+  beforeEach(() => {
+    declaredBlue = 'rgb(11, 7, 3)';
+    declaredPrimary = 'rgb(15, 108, 189)';
+    jest.spyOn(window, 'getComputedStyle').mockImplementation((element) => ({
+      fill: paint((element as SVGElement).style.getPropertyValue('fill')),
+      getPropertyValue: (name: string): string => ({
+        '--dx-viz-font-family': DECLARED_FONT,
+        '--dx-viz-title-font-weight': DECLARED_TITLE_WEIGHT,
+      })[name] ?? '',
+    }) as unknown as CSSStyleDeclaration);
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('hands out the colour the page paints a name with', () => {
+    expect((palette.getPalette('Fluent Next', undefined) as Theme).simpleSet[0]).toBe('#0b0703');
+    expect(palette.getAccentColor('Fluent Next')).toBe('#0f6cbd');
+    expect((palette.generateColors('Fluent Next', 6) as string[])[0]).toBe('#0b0703');
+    expect(palette.createPalette('Fluent Next', {}).getNextColor(undefined)).toBe('#0b0703');
+    expect(getTheme('fluent-next.blue.light').bullet.color).toBe('#0b0703');
+  });
+
+  it('hands out what the browser mixes as a colour an application can parse', () => {
+    const extended = palette.generateColors('Fluent Next', 12, { paletteExtensionMode: 'blend' }) as string[];
+
+    expect(extended.filter((color) => !/^#[0-9a-f]{6}$/.test(color))).toEqual([]);
+    expect(extended).toContain('#336699');
+    expect(palette.getDiscretePalette('Fluent Next', 3).getColor(1)).toBe('#336699');
+    expect(palette.getGradientPalette('Fluent Next').getColor(0.5)).toBe('#336699');
+  });
+
+  it('asks the page again every time a created palette hands a colour out', () => {
+    const created = palette.createPalette('Fluent Next', {});
+
+    declaredBlue = 'rgb(1, 2, 3)';
+
+    expect(created.getNextColor(undefined)).toBe('#010203');
+  });
+
+  it('hands out a colour the page declares in another colour space as rgb', () => {
+    declaredPrimary = 'oklch(0.6 0.2 250)';
+
+    expect(palette.getAccentColor('Fluent Next')).toBe('#0081f1');
+  });
+
+  it('reads a name that is not a colour from what the page declares for it', () => {
+    expect(getTheme('fluent-next.blue.light').font.family).toBe(DECLARED_FONT);
+  });
+
+  it('hands a font weight the page declares out as a number', () => {
+    const theme = getTheme('fluent-next.blue.light');
+
+    expect(theme.title.font.weight).toBe(700);
+    expect(theme.font.weight).toBe(400);
+  });
+
+  it('resolves a whole theme with one probe, each distinct value once, and leaves nothing behind', () => {
+    const root = document.documentElement;
+    const appended = jest.spyOn(root, 'appendChild');
+    const names = new Set(leftToTheBrowser(getRawTheme('fluent-next.blue.dark')));
+
+    getTheme('fluent-next.blue.dark');
+
+    expect(appended).toHaveBeenCalledTimes(1);
+
+    const probe = appended.mock.calls[0][0] as Element;
+    const probed = Array.from(probe.children, (swatch) => (swatch as SVGElement).style.getPropertyValue('fill'))
+      .filter((fill) => names.has(fill));
+
+    expect(probed).toHaveLength(names.size);
+    expect(new Set(probed).size).toBe(names.size);
+    expect(root.contains(probe)).toBe(false);
+  });
+});
diff --git a/packages/devextreme/js/__internal/viz/__tests__/palette.test.ts b/packages/devextreme/js/__internal/viz/__tests__/palette.test.ts
new file mode 100644
index 000000000000..cc9030ddbc49
--- /dev/null
+++ b/packages/devextreme/js/__internal/viz/__tests__/palette.test.ts
@@ -0,0 +1,58 @@
+import { describe, expect, it } from '@jest/globals';
+import { createPalette, getDiscretePalette, getGradientPalette } from '@ts/viz/palette';
+
+describe('a palette of published names', () => {
+  const asked = (count: number, extensionMode: string): string[] => createPalette(
+    'fluent next',
+    { useHighlight: true, extensionMode },
+  ).generateColors(count);
+
+  it('hands the names themselves to the widget while the palette suffices', () => {
+    expect(asked(6, 'blend')).toEqual([
+      'var(--dx-viz-blue, #0078d4)',
+      'var(--dx-viz-red, #c83d3d)',
+      'var(--dx-viz-green, #008f04)',
+      'var(--dx-viz-yellow, #eaa300)',
+      'var(--dx-viz-pink, #e43ba6)',
+      'var(--dx-viz-purple, #865cbf)',
+    ]);
+  });
+
+  it('mixes further colors in css, so they follow the names they are mixed from', () => {
+    expect(asked(7, 'blend')[2])
+      .toBe('color-mix(in srgb, var(--dx-viz-red, #c83d3d) 50%, var(--dx-viz-green, #008f04))');
+  });
+
+  it('shades further colors in css when the palette is cycled', () => {
+    const colors = asked(12, 'alternate');
+
+    expect(colors).toHaveLength(12);
+    expect(colors[6]).toBe('rgb(from var(--dx-viz-blue, #0078d4) calc(r + 50) calc(g + 50) calc(b + 50))');
+  });
+
+  it('fans the cycles out in css when the palette is extrapolated', () => {
+    const colors = asked(12, 'extrapolate');
+
+    expect(colors[0]).toBe('hsl(from var(--dx-viz-blue, #0078d4) h s calc(l + 1 * (max(calc(l - 75), min(50, calc(l * 0.9))) - l)))');
+    expect(colors[6]).toBe('hsl(from var(--dx-viz-blue, #0078d4) h s calc(l + 1 * (min(calc(l + 75), max(80, calc(l + (100 - l) * 0.15))) - l)))');
+  });
+
+  it('keeps the gradient in css too', () => {
+    expect(getGradientPalette('fluent next', undefined).getColor(0.25))
+      .toBe('color-mix(in srgb, var(--dx-viz-blue, #0078d4) 75%, var(--dx-viz-green, #008f04))');
+  });
+
+  it.each([['test'], [-1], [2], [undefined]])('answers with nothing when the ratio is %s', (ratio) => {
+    expect(getGradientPalette('fluent next', undefined).getColor(ratio as number)).toBeNull();
+  });
+
+  it('splits into discrete colors in css, so a tree map follows the names too', () => {
+    const discrete = getDiscretePalette('fluent next', 3, undefined);
+
+    expect([discrete.getColor(0), discrete.getColor(1), discrete.getColor(2)]).toEqual([
+      'color-mix(in srgb, var(--dx-viz-blue, #0078d4) 100%, var(--dx-viz-blue, #0078d4))',
+      'color-mix(in srgb, var(--dx-viz-blue, #0078d4) 50%, var(--dx-viz-green, #008f04))',
+      'color-mix(in srgb, var(--dx-viz-green, #008f04) 100%, var(--dx-viz-green, #008f04))',
+    ]);
+  });
+});
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..3408e8f9f1e0
--- /dev/null
+++ b/packages/devextreme/js/__internal/viz/core/themes/fluent-next/index.ts
@@ -0,0 +1,417 @@
+const FONT_FAMILY = '\'segoe ui\', -apple-system, BlinkMacSystemFont, \'avenir next\', avenir, \'segoe ui\', \'helvetica neue\', helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif';
+
+const VIZ_BG = '--dx-viz-bg';
+const VIZ_BG_ACTIVE = '--dx-viz-bg-active';
+const VIZ_BG_HIGHER = '--dx-viz-bg-higher';
+const VIZ_BG_HOVERED = '--dx-viz-bg-hovered';
+const VIZ_BORDER = '--dx-viz-border';
+const VIZ_BORDER_ACTIVE = '--dx-viz-border-active';
+const VIZ_BORDER_HOVERED = '--dx-viz-border-hovered';
+const VIZ_CONTENT = '--dx-viz-content';
+const VIZ_CONTENT_ORANGE = '--dx-viz-content-orange';
+const VIZ_CONTENT_SUBTLE = '--dx-viz-content-subtle';
+const VIZ_CONTENT_SUBTLER = '--dx-viz-content-subtler';
+const VIZ_CROSSHAIR = '--dx-viz-crosshair';
+const VIZ_GRAY_SUBTLE = '--dx-viz-gray-subtle';
+const VIZ_GRID = '--dx-viz-grid';
+const VIZ_PURPLE_SUBTLE = '--dx-viz-purple-subtle';
+const VIZ_TOOLTIP_BG = '--dx-viz-tooltip-bg';
+const VIZ_TOOLTIP_CONTENT = '--dx-viz-tooltip-content';
+const VIZ_FONT_FAMILY = '--dx-viz-font-family';
+const VIZ_EXPORT_FONT_WEIGHT = '--dx-viz-export-font-weight';
+const VIZ_FONT_WEIGHT = '--dx-viz-font-weight';
+const VIZ_LABEL_FONT_WEIGHT = '--dx-viz-label-font-weight';
+const VIZ_LEGEND_TITLE_FONT_WEIGHT = '--dx-viz-legend-title-font-weight';
+const VIZ_TITLE_FONT_WEIGHT = '--dx-viz-title-font-weight';
+
+const VIZ_PRIMARY = '--dx-viz-primary';
+
+const VIZ_DANGER = '--dx-viz-danger';
+
+const VIZ_BLUE = '--dx-viz-blue';
+const VIZ_GRAY = '--dx-viz-gray';
+const VIZ_ORANGE = '--dx-viz-orange';
+const VIZ_RED = '--dx-viz-red';
+const VIZ_YELLOW = '--dx-viz-yellow';
+
+const VIZ_TILE_BORDER = '--dx-viz-tile-border';
+
+const LIGHT = {
+  [VIZ_BG]: '#ffffff',
+  [VIZ_BG_ACTIVE]: '#e1e1e1',
+  [VIZ_BG_HIGHER]: '#ebebeb',
+  [VIZ_BG_HOVERED]: '#f5f5f5',
+  [VIZ_BORDER]: '#cbcbcb',
+  [VIZ_BORDER_ACTIVE]: '#b6b6b6',
+  [VIZ_BORDER_HOVERED]: '#c0c0c0',
+  [VIZ_CONTENT]: '#161616',
+  [VIZ_CONTENT_ORANGE]: '#ad4100',
+  [VIZ_CONTENT_SUBTLE]: '#444444',
+  [VIZ_CONTENT_SUBTLER]: '#656565',
+  [VIZ_CROSSHAIR]: '#b33133',
+  [VIZ_GRAY_SUBTLE]: '#cfcfcf',
+  [VIZ_GRID]: '#e1e1e1',
+  [VIZ_PURPLE_SUBTLE]: '#d5c7f0',
+  [VIZ_TOOLTIP_BG]: '#242424',
+  [VIZ_TOOLTIP_CONTENT]: '#ffffff',
+  [VIZ_FONT_FAMILY]: FONT_FAMILY,
+  [VIZ_EXPORT_FONT_WEIGHT]: '400',
+  [VIZ_FONT_WEIGHT]: '400',
+  [VIZ_LABEL_FONT_WEIGHT]: '600',
+  [VIZ_LEGEND_TITLE_FONT_WEIGHT]: '200',
+  [VIZ_TITLE_FONT_WEIGHT]: '600',
+
+  [VIZ_PRIMARY]: '#0f6cbd',
+
+  [VIZ_DANGER]: '#c50f1f',
+
+  [VIZ_BLUE]: '#0078d4',
+  [VIZ_GRAY]: '#757575',
+  [VIZ_ORANGE]: '#f7630c',
+  [VIZ_RED]: '#c83d3d',
+  [VIZ_YELLOW]: '#eaa300',
+
+  [VIZ_TILE_BORDER]: '#ffffff',
+};
+
+type PublishedName = keyof typeof LIGHT;
+
+const DARK: Record<PublishedName, string> = {
+  ...LIGHT,
+  [VIZ_BG]: '#242424',
+  [VIZ_BG_ACTIVE]: '#1d1d1d',
+  [VIZ_BG_HIGHER]: '#333333',
+  [VIZ_BG_HOVERED]: '#3b3b3b',
+  [VIZ_BORDER]: '#767676',
+  [VIZ_BORDER_ACTIVE]: '#656565',
+  [VIZ_BORDER_HOVERED]: '#ababab',
+  [VIZ_CONTENT]: '#ffffff',
+  [VIZ_CONTENT_ORANGE]: '#f57d48',
+  [VIZ_CONTENT_SUBTLE]: '#cbcbcb',
+  [VIZ_CONTENT_SUBTLER]: '#a1a1a1',
+  [VIZ_CROSSHAIR]: '#e87e78',
+  [VIZ_GRAY_SUBTLE]: '#4a4a4a',
+  [VIZ_GRID]: '#4c4c4c',
+  [VIZ_PURPLE_SUBTLE]: '#563780',
+  [VIZ_TOOLTIP_BG]: '#ffffff',
+  [VIZ_TOOLTIP_CONTENT]: '#161616',
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- description theme option tree
+function buildTheme(name: string, fallback: Record<PublishedName, string>): any {
+  const paint = (published: PublishedName): string => `var(${published}, ${fallback[published]})`;
+
+  return {
+    name,
+    defaultPalette: 'Fluent Next',
+    font: {
+      family: paint(VIZ_FONT_FAMILY),
+      weight: paint(VIZ_FONT_WEIGHT),
+      color: paint(VIZ_CONTENT_SUBTLER),
+    },
+    title: {
+      font: {
+        family: paint(VIZ_FONT_FAMILY),
+        weight: paint(VIZ_TITLE_FONT_WEIGHT),
+      },
+    },
+    backgroundColor: paint(VIZ_BG),
+    primaryTitleColor: paint(VIZ_CONTENT),
+    secondaryTitleColor: paint(VIZ_CONTENT_SUBTLER),
+    axisColor: paint(VIZ_CONTENT_SUBTLER),
+    gridColor: paint(VIZ_GRID),
+    tooltip: {
+      color: paint(VIZ_TOOLTIP_BG),
+      border: {
+        color: paint(VIZ_BORDER),
+      },
+      font: {
+        color: paint(VIZ_TOOLTIP_CONTENT),
+      },
+    },
+    export: {
+      backgroundColor: paint(VIZ_BG),
+      font: {
+        color: paint(VIZ_CONTENT),
+        weight: paint(VIZ_EXPORT_FONT_WEIGHT),
+      },
+      button: {
+        default: {
+          backgroundColor: paint(VIZ_BG),
+          borderColor: paint(VIZ_BORDER),
+          color: paint(VIZ_CONTENT),
+        },
+        hover: {
+          backgroundColor: paint(VIZ_BG_HOVERED),
+          borderColor: paint(VIZ_BORDER_HOVERED),
+          color: paint(VIZ_CONTENT),
+        },
+        focus: {
+          backgroundColor: paint(VIZ_BG_ACTIVE),
+          borderColor: paint(VIZ_BORDER_ACTIVE),
+          color: paint(VIZ_CONTENT),
+        },
+        active: {
+          backgroundColor: paint(VIZ_BG_ACTIVE),
+          borderColor: paint(VIZ_BORDER_ACTIVE),
+          color: paint(VIZ_CONTENT),
+        },
+      },
+    },
+    legend: {
+      title: {
+        font: {
+          weight: paint(VIZ_LEGEND_TITLE_FONT_WEIGHT),
+        },
+      },
+    },
+    'chart:common': {
+      commonSeriesSettings: {
+        label: {
+          border: {
+            color: paint(VIZ_BORDER),
+          },
+        },
+        valueErrorBar: {
+          color: paint(VIZ_CONTENT),
+        },
+      },
+    },
+    'chart:common:axis': {
+      constantLineStyle: {
+        color: paint(VIZ_CONTENT),
+      },
+      breakStyle: {
+        color: paint(VIZ_BORDER),
+      },
+    },
+    'chart:common:annotation': {
+      color: paint(VIZ_TOOLTIP_BG),
+      border: {
+        color: paint(VIZ_TOOLTIP_BG),
+      },
+      font: {
+        color: paint(VIZ_TOOLTIP_CONTENT),
+      },
+    },
+    chart: {
+      commonPaneSettings: {
+        border: {
+          color: paint(VIZ_BORDER),
+        },
+      },
+      commonSeriesSettings: {
+        candlestick: {
+          reduction: {
+            color: paint(VIZ_RED),
+          },
+        },
+        stock: {
+          reduction: {
+            color: paint(VIZ_RED),
+          },
+        },
+      },
+      crosshair: {
+        color: paint(VIZ_CROSSHAIR),
+        label: {
+          font: {
+            color: paint(VIZ_BG),
+          },
+        },
+      },
+      scrollBar: {
+        color: paint(VIZ_BORDER),
+      },
+      zoomAndPan: {
+        dragBoxStyle: {
+          color: paint(VIZ_CONTENT),
+        },
+      },
+    },
+    gauge: {
+      rangeContainer: {
+        backgroundColor: paint(VIZ_BORDER),
+      },
+      valueIndicators: {
+        _default: {
+          color: paint(VIZ_CONTENT_SUBTLE),
+        },
+        rangebar: {
+          color: paint(VIZ_BLUE),
+        },
+        // eslint-disable-next-line spellcheck/spell-checker
+        trianglemarker: {
+          color: paint(VIZ_BLUE),
+        },
+        // eslint-disable-next-line spellcheck/spell-checker
+        twocolorneedle: {
+          secondColor: paint(VIZ_RED),
+        },
+        // eslint-disable-next-line spellcheck/spell-checker
+        textcloud: {
+          color: paint(VIZ_BLUE),
+        },
+      },
+    },
+    barGauge: {
+      backgroundColor: paint(VIZ_BG_HIGHER),
+    },
+    bullet: {
+      color: paint(VIZ_BLUE),
+      targetColor: paint(VIZ_CONTENT),
+    },
+    sankey: {
+      label: {
+        font: {
+          color: paint(VIZ_CONTENT),
+          weight: paint(VIZ_LABEL_FONT_WEIGHT),
+        },
+      },
+      link: {
+        color: paint(VIZ_GRAY),
+      },
+    },
+    treeMap: {
+      group: {
+        color: paint(VIZ_BG_HOVERED),
+        label: {
+          font: {
+            color: paint(VIZ_CONTENT_SUBTLE),
+            weight: paint(VIZ_LABEL_FONT_WEIGHT),
+          },
+        },
+      },
+      tile: {
+        border: {
+          color: paint(VIZ_TILE_BORDER),
+        },
+        color: paint(VIZ_BLUE),
+        label: {
+          font: {
+            weight: paint(VIZ_LABEL_FONT_WEIGHT),
+          },
+        },
+      },
+    },
+    rangeSelector: {
+      background: {
+        color: paint(VIZ_PURPLE_SUBTLE),
+      },
+      selectedRangeColor: paint(VIZ_PRIMARY),
+      sliderMarker: {
+        color: paint(VIZ_PRIMARY),
+        font: {
+          color: paint(VIZ_BG),
+        },
+        invalidRangeColor: paint(VIZ_DANGER),
+      },
+      sliderHandle: {
+        color: paint(VIZ_PRIMARY),
+      },
+      shutter: {
+        color: paint(VIZ_BG),
+        opacity: 0.75,
+      },
+      scale: {
+        tick: {
+          color: paint(VIZ_CONTENT),
+        },
+        minorTick: {
+          color: paint(VIZ_CONTENT),
+        },
+        breakStyle: {
+          color: paint(VIZ_BORDER),
+        },
+      },
+    },
+    map: {
+      layer: {
+        label: {
+          stroke: paint(VIZ_BG),
+          font: {
+            color: paint(VIZ_CONTENT),
+          },
+        },
+      },
+      'layer:area': {
+        color: paint(VIZ_GRAY_SUBTLE),
+        borderColor: paint(VIZ_BG),
+        hoveredBorderColor: paint(VIZ_CONTENT),
+        selectedBorderColor: paint(VIZ_CONTENT),
+      },
+      'layer:line': {
+        color: paint(VIZ_ORANGE),
+        hoveredColor: paint(VIZ_CONTENT_ORANGE),
+        selectedColor: paint(VIZ_CONTENT),
+      },
+      'layer:marker:dot': {
+        color: paint(VIZ_BLUE),
+        borderColor: paint(VIZ_BG),
+        backColor: paint(VIZ_BG),
+      },
+      'layer:marker:bubble': {
+        color: paint(VIZ_BLUE),
+        hoveredBorderColor: paint(VIZ_CONTENT),
+        selectedBorderColor: paint(VIZ_CONTENT),
+      },
+      'layer:marker:pie': {
+        hoveredBorderColor: paint(VIZ_CONTENT),
+        selectedBorderColor: paint(VIZ_CONTENT),
+      },
+      legend: {
+        markerColor: paint(VIZ_BLUE),
+      },
+      background: {
+        borderColor: paint(VIZ_BORDER),
+      },
+      controlBar: {
+        color: paint(VIZ_BG),
+        borderColor: paint(VIZ_CONTENT_SUBTLE),
+      },
+    },
+    sparkline: {
+      barNegativeColor: paint(VIZ_GRAY_SUBTLE),
+      barPositiveColor: paint(VIZ_GRAY),
+      firstLastColor: paint(VIZ_BLUE),
+      lineColor: paint(VIZ_BLUE),
+      lossColor: paint(VIZ_GRAY_SUBTLE),
+      maxColor: paint(VIZ_RED),
+      minColor: paint(VIZ_YELLOW),
+      pointColor: paint(VIZ_BG),
+      winColor: paint(VIZ_GRAY),
+    },
+    funnel: {
+      item: {
+        border: {
+          color: paint(VIZ_BG),
+        },
+      },
+    },
+  };
+}
+
+const themes = [
+  {
+    baseThemeName: 'fluent.blue.light',
+    theme: buildTheme('fluent-next.blue.light', LIGHT),
+  },
+  {
+    baseThemeName: 'fluent-next.blue.light',
+    theme: {
+      name: 'fluent-next.blue.light.compact',
+    },
+  },
+  {
+    baseThemeName: 'fluent.blue.dark',
+    theme: buildTheme('fluent-next.blue.dark', DARK),
+  },
+  {
+    baseThemeName: 'fluent-next.blue.dark',
+    theme: {
+      name: 'fluent-next.blue.dark.compact',
+    },
+  },
+];
+
+export default themes;
diff --git a/packages/devextreme/js/__internal/viz/core/tooltip.ts b/packages/devextreme/js/__internal/viz/core/tooltip.ts
index 56fcf81a6d65..5c54f15fc19f 100644
--- a/packages/devextreme/js/__internal/viz/core/tooltip.ts
+++ b/packages/devextreme/js/__internal/viz/core/tooltip.ts
@@ -29,6 +29,7 @@ import { getHeight, getWidth } from '@ts/core/utils/m_size';
 import { isDefined, isFunction, isPlainObject } from '@ts/core/utils/m_type';
 import { getWindow } from '@ts/core/utils/m_window';
 import { normalizeStyleProp } from '@ts/core/utils/style';
+import swatchContainer from '@ts/core/utils/swatch_container';
 
 import type { ThemeValue } from './base_theme_manager';
 import { Plaque } from './plaque';
@@ -194,13 +195,24 @@ export let Tooltip = class Tooltip {
     this._options = this._widgetRoot = null;
   }
 
-  _getContainer(): Element {
+  _getUserContainer(): Element | undefined {
     const options = this._options;
     let container = $(this._widgetRoot).closest(options.container);
     if (container.length === 0) {
       container = $(options.container);
     }
-    return (container.length ? container : $('body')).get(0);
+    return container.get(0);
+  }
+
+  _getContainer(): Element {
+    const container = this._getUserContainer();
+    if (container) {
+      return container;
+    }
+
+    const scope = swatchContainer.getSwatchContainer(this._widgetRoot);
+
+    return scope?.length ? scope.get(0) : $('body').get(0);
   }
 
   setTemplate(contentTemplate: ThemeValue): void {
@@ -489,8 +501,7 @@ export let Tooltip = class Tooltip {
   }
 
   _getCanvas(): Canvas {
-    const container = this._getContainer();
-    const containerBox = container.getBoundingClientRect();
+    const container = this._getUserContainer();
     const html = domAdapter.getDocumentElement();
     const document = domAdapter.getDocument();
     let left = window.pageXOffset || html.scrollLeft || 0;
@@ -513,7 +524,8 @@ export let Tooltip = class Tooltip {
       bottom: 0,
     };
 
-    if (container !== domAdapter.getBody()) {
+    if (container && container !== domAdapter.getBody()) {
+      const containerBox = container.getBoundingClientRect();
       left = mathMax(box.left, box.left + containerBox.left);
       top = mathMax(box.top, box.top + containerBox.top);
 
diff --git a/packages/devextreme/js/__internal/viz/handed_out.ts b/packages/devextreme/js/__internal/viz/handed_out.ts
new file mode 100644
index 000000000000..c6353fa7b5e9
--- /dev/null
+++ b/packages/devextreme/js/__internal/viz/handed_out.ts
@@ -0,0 +1,214 @@
+import { isPlainObject } from '@js/core/utils/type';
+import { getWindow, hasWindow } from '@js/core/utils/window';
+import domAdapter from '@ts/core/dom_adapter';
+import {
+  asRgb, fallbackOf, isCssVariableReference, portableColor, resolvedInScope,
+} from '@ts/core/utils/css_variables';
+import * as raw from '@ts/viz/palette';
+
+const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
+const LEFT_TO_THE_BROWSER = /var\(|color-mix\(|\(from /;
+const PLAIN_NUMBER = /^-?(?:\d+\.?\d*|\.\d+)$/;
+
+type Page = HTMLElement | undefined;
+
+type Resolved = Map<string, string | number | undefined>;
+
+interface Source {
+  source: unknown;
+  page?: HTMLElement;
+}
+
+interface Colors {
+  getColor: (at: number) => unknown;
+}
+
+interface Extension {
+  extensionMode?: string;
+  keepLastColorInEnd?: boolean;
+  useHighlight?: boolean;
+}
+
+interface GenerationOptions extends Omit<Extension, 'extensionMode'> {
+  baseColorSet?: string;
+  paletteExtensionMode?: string;
+}
+
+function isLeftToTheBrowser(value: unknown): value is string {
+  return typeof value === 'string' && LEFT_TO_THE_BROWSER.test(value);
+}
+
+export function paintingPage(): Page {
+  return hasWindow() && typeof getWindow().getComputedStyle === 'function'
+    ? domAdapter.getDocumentElement()
+    : undefined;
+}
+
+function paintedOn(page: HTMLElement, values: string[]): (string | undefined)[] {
+  const probe = domAdapter.createElementNS(SVG_NAMESPACE, 'svg') as SVGElement;
+  const swatchOf = (fill: string): SVGElement => {
+    const swatch = domAdapter.createElementNS(SVG_NAMESPACE, 'rect') as SVGElement;
+
+    swatch.style.setProperty('fill', fill);
+    probe.appendChild(swatch);
+
+    return swatch;
+  };
+  const swatches = values.map((value) => [swatchOf(value), swatchOf(asRgb(value))]);
+
+  probe.style.setProperty('display', 'none');
+  probe.style.setProperty('fill', 'none');
+  page.appendChild(probe);
+
+  const painted = swatches.map((pair) => pair
+    .map((swatch) => portableColor(getWindow().getComputedStyle(swatch).fill))
+    .find((color) => color !== undefined));
+
+  probe.remove();
+
+  return painted;
+}
+
+function literalOf(value: string, page: Page): string | number | undefined {
+  const literal = value.startsWith('var(') ? resolvedInScope(value, page) : fallbackOf(value);
+
+  if (isCssVariableReference(literal)) {
+    return undefined;
+  }
+
+  return PLAIN_NUMBER.test(literal) ? Number(literal) : literal;
+}
+
+function collectNames(value: unknown, names: Set<string>): Set<string> {
+  if (isLeftToTheBrowser(value)) {
+    names.add(value);
+  } else if (Array.isArray(value)) {
+    value.forEach((item) => collectNames(item, names));
+  } else if (isPlainObject(value)) {
+    Object.values(value).forEach((item) => collectNames(item, names));
+  }
+
+  return names;
+}
+
+function rebuilt(value: unknown, resolved: Resolved): unknown {
+  if (typeof value === 'string') {
+    return resolved.has(value) ? resolved.get(value) : value;
+  }
+
+  if (Array.isArray(value)) {
+    return value.map((item) => rebuilt(item, resolved));
+  }
+
+  if (isPlainObject(value)) {
+    return Object.fromEntries(
+      Object.entries(value).map(([key, item]) => [key, rebuilt(item, resolved)]),
+    );
+  }
+
+  return value;
+}
+
+export function handedOut<T>(value: T, page: Page): T {
+  const names = Array.from(collectNames(value, new Set()));
+
+  if (!names.length) {
+    return value;
+  }
+
+  const painted = page ? paintedOn(page, names) : [];
+  const resolved: Resolved = new Map(
+    names.map((name, index) => [name, painted[index] ?? literalOf(name, page)]),
+  );
+
+  return rebuilt(value, resolved) as T;
+}
+
+function paletteSource(source: unknown, set: string | undefined, themeDefault: unknown): Source {
+  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+  const colors: unknown[] = raw.getPalette(source, { type: set || 'simpleSet', themeDefault });
+  const names = colors.filter(isLeftToTheBrowser);
+
+  if (!names.length) {
+    return { source };
+  }
+
+  const page = paintingPage();
+
+  if (page && paintedOn(page, names).some((painted) => painted !== undefined)) {
+    return { source, page };
+  }
+
+  return { source: handedOut(colors, undefined) };
+}
+
+export function getPalette(palette: unknown, parameters?: unknown): unknown {
+  return handedOut(raw.getPalette(palette, parameters), paintingPage());
+}
+
+export function getAccentColor(palette: unknown, themeDefault?: unknown): unknown {
+  return handedOut(raw.getAccentColor(palette, themeDefault), paintingPage());
+}
+
+export function generateColors(
+  palette: unknown,
+  count: number,
+  options?: GenerationOptions,
+): unknown {
+  const { source, page } = paletteSource(palette, options?.baseColorSet, undefined);
+  const generated = raw.generateColors(
+    source,
+    count,
+    options as Parameters<typeof raw.generateColors>[2],
+  );
+
+  return handedOut(generated, page);
+}
+
+export function createPalette(
+  palette: unknown,
+  parameters?: Extension & { type?: string },
+  themeDefaultPalette?: unknown,
+): ReturnType<typeof raw.createPalette> {
+  const { source, page } = paletteSource(palette, parameters?.type, themeDefaultPalette);
+  const created = raw.createPalette(source, parameters, themeDefaultPalette);
+
+  if (!page) {
+    return created;
+  }
+
+  const { getNextColor, generateColors: generate } = created;
+
+  created.getNextColor = (count): unknown => handedOut(getNextColor.call(created, count), page);
+  created.generateColors = (count, options): unknown => handedOut(
+    generate.call(created, count, options),
+    page,
+  );
+
+  return created;
+}
+
+export function getDiscretePalette(
+  source: unknown,
+  size: number,
+  themeDefaultPalette?: unknown,
+): Colors {
+  const input: Source = size > 0 ? paletteSource(source, 'gradientSet', themeDefaultPalette) : { source };
+  const discrete = raw.getDiscretePalette(input.source, size, themeDefaultPalette);
+
+  return input.page
+    ? { getColor: (index): unknown => handedOut(discrete.getColor(index), input.page) }
+    : discrete;
+}
+
+export function getGradientPalette(
+  source: unknown,
+  themeDefaultPalette?: unknown,
+): Colors {
+  const { source: input, page } = paletteSource(source, 'gradientSet', themeDefaultPalette);
+  const gradient = raw.getGradientPalette(input, themeDefaultPalette);
+
+  return page
+    ? { getColor: (ratio): unknown => handedOut(gradient.getColor(ratio), page) }
+    : gradient;
+}
diff --git a/packages/devextreme/js/__internal/viz/handed_out_theme.ts b/packages/devextreme/js/__internal/viz/handed_out_theme.ts
new file mode 100644
index 000000000000..af96bc951e0b
--- /dev/null
+++ b/packages/devextreme/js/__internal/viz/handed_out_theme.ts
@@ -0,0 +1,6 @@
+import { handedOut, paintingPage } from '@ts/viz/handed_out';
+import { getTheme as getRawTheme } from '@ts/viz/themes';
+
+export function getTheme(themeName?: string): unknown {
+  return handedOut(getRawTheme(themeName), paintingPage());
+}
diff --git a/packages/devextreme/js/__internal/viz/palette.ts b/packages/devextreme/js/__internal/viz/palette.ts
index 35a9950bb577..c053582af99a 100644
--- a/packages/devextreme/js/__internal/viz/palette.ts
+++ b/packages/devextreme/js/__internal/viz/palette.ts
@@ -23,6 +23,21 @@ import { isString } from '@ts/core/utils/m_type';
 import { mixColors, shiftChannels, shiftLightness } from '@ts/viz/color_math';
 import { normalizeEnum } from '@ts/viz/core/utils';
 
+const FLUENT_NEXT_VIZ = {
+  primary: 'var(--dx-viz-primary, #0f6cbd)',
+
+  blue: 'var(--dx-viz-blue, #0078d4)',
+  red: 'var(--dx-viz-red, #c83d3d)',
+  green: 'var(--dx-viz-green, #008f04)',
+  yellow: 'var(--dx-viz-yellow, #eaa300)',
+  pink: 'var(--dx-viz-pink, #e43ba6)',
+  purple: 'var(--dx-viz-purple, #865cbf)',
+
+  success: 'var(--dx-viz-success, #107c10)',
+  warning: 'var(--dx-viz-warning, #f7630c)',
+  danger: 'var(--dx-viz-danger, #c50f1f)',
+};
+
 const HIGHLIGHTING_STEP = 50;
 const DEFAULT_PALETTE = 'material';
 
@@ -43,6 +58,20 @@ const palettes = {
 
   office: officePalette,
 
+  'fluent next': {
+    simpleSet: [
+      FLUENT_NEXT_VIZ.blue,
+      FLUENT_NEXT_VIZ.red,
+      FLUENT_NEXT_VIZ.green,
+      FLUENT_NEXT_VIZ.yellow,
+      FLUENT_NEXT_VIZ.pink,
+      FLUENT_NEXT_VIZ.purple,
+    ],
+    indicatingSet: [FLUENT_NEXT_VIZ.success, FLUENT_NEXT_VIZ.warning, FLUENT_NEXT_VIZ.danger],
+    gradientSet: [FLUENT_NEXT_VIZ.blue, FLUENT_NEXT_VIZ.green],
+    accentColor: FLUENT_NEXT_VIZ.primary,
+  },
+
   '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 b80890ae435c..02eecea8a434 100644
--- a/packages/devextreme/js/__internal/viz/themes.ts
+++ b/packages/devextreme/js/__internal/viz/themes.ts
@@ -19,6 +19,7 @@ import { extend } from '@ts/core/utils/m_extend';
 import { isEmptyObject } from '@ts/core/utils/m_type';
 import { current as getCurrentTheme } from '@ts/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 2c7b3068346f..f00300a9ca66 100644
--- a/packages/devextreme/js/common/charts.d.ts
+++ b/packages/devextreme/js/common/charts.d.ts
@@ -100,7 +100,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/core/errors.js b/packages/devextreme/js/core/errors.js
index be269baa3e89..4f819fd6ac99 100644
--- a/packages/devextreme/js/core/errors.js
+++ b/packages/devextreme/js/core/errors.js
@@ -168,5 +168,11 @@
 /**
     * @name ErrorsCore.W0023
     */
+/**
+    * @name ErrorsCore.W0024
+    */
+/**
+    * @name ErrorsCore.W0025
+    */
 import errors from '../__internal/core/errors';
 export default errors;
diff --git a/packages/devextreme/js/ui/themes.d.ts b/packages/devextreme/js/ui/themes.d.ts
index c4cf17bed007..16bee1c7d797 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,38 @@ 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;
+    /**
+     * @docid ui.themes.customAccentColor
+     * @publicName customAccentColor()
+     * @return String
+     * @static
+     * @public
+     */
+    static customAccentColor(): string;
+    /**
+     * @docid ui.themes.customAccentColor
+     * @publicName customAccentColor(color)
+     * @param1 color:String|null
+     * @static
+     * @public
+     */
+    static customAccentColor(color: string | null): void;
 }
 
 export function current(): string;
@@ -41,3 +75,8 @@ 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;
+export function customAccentColor(): string;
+export function customAccentColor(color: string | null): void;
diff --git a/packages/devextreme/js/ui/themes.js b/packages/devextreme/js/ui/themes.js
index 7ba25bcc98a7..4d2a7eec8486 100644
--- a/packages/devextreme/js/ui/themes.js
+++ b/packages/devextreme/js/ui/themes.js
@@ -14,6 +14,9 @@ export const {
     isMaterial,
     isFluent,
     isMaterialBased,
+    mode,
+    refreshMode,
+    customAccentColor,
     detachCssClasses,
     attachCssClasses,
     current,
diff --git a/packages/devextreme/js/viz/palette.js b/packages/devextreme/js/viz/palette.js
index 17041d680699..a41143ae7f03 100644
--- a/packages/devextreme/js/viz/palette.js
+++ b/packages/devextreme/js/viz/palette.js
@@ -1,10 +1,12 @@
 export {
     currentPalette,
+    registerPalette,
+} from '../__internal/viz/palette';
+export {
     generateColors,
     getPalette,
-    registerPalette,
     getAccentColor,
     createPalette,
     getDiscretePalette,
     getGradientPalette,
-} from '../__internal/viz/palette';
+} from '../__internal/viz/handed_out';
diff --git a/packages/devextreme/js/viz/themes.js b/packages/devextreme/js/viz/themes.js
index 6a6de9b750fc..734efb729776 100644
--- a/packages/devextreme/js/viz/themes.js
+++ b/packages/devextreme/js/viz/themes.js
@@ -1 +1,2 @@
 export * from '../__internal/viz/themes';
+export { getTheme } from '../__internal/viz/handed_out_theme';
diff --git a/packages/devextreme/project.json b/packages/devextreme/project.json
index 5dc2a2cf4e54..3338a73fb94b 100644
--- a/packages/devextreme/project.json
+++ b/packages/devextreme/project.json
@@ -1257,7 +1257,8 @@
       "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/**/*",
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/aiDialog.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/aiDialog.tests.js
index 694c366e0cbc..b0ef7a1ec28d 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/aiDialog.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/aiDialog.tests.js
@@ -1497,6 +1497,43 @@ QUnit.module('AIDialog', () => {
         });
     });
 
+    QUnit.module('sizes declared by the theme', {
+        beforeEach() {
+            this.$style = $('<style nonce="qunit-test">')
+                .text('#htmlEditor { --dx-html-editor-ai-dialog-button-width: 123px; }')
+                .appendTo('head');
+
+            integrationModuleConfig.beforeEach.apply(this);
+        },
+        afterEach() {
+            integrationModuleConfig.afterEach.apply(this);
+
+            this.$style.remove();
+        },
+    }, () => {
+        QUnit.test('generate button takes the width the theme declares', function(assert) {
+            showAIDialog(this, {
+                config: { currentCommand: 'askAI' },
+            });
+
+            const bottomToolbarItems = getBottomToolbarItems(this.aiDialogPopup);
+            const generateToolbarItem = getItemByName(bottomToolbarItems, 'generate');
+
+            assert.strictEqual(generateToolbarItem.options.width, 123, 'width comes from the theme');
+        });
+
+        QUnit.test('cancel button takes the width the theme declares', function(assert) {
+            showAIDialog(this, {
+                config: { currentCommand: 'translate' },
+            });
+
+            const bottomToolbarItems = getBottomToolbarItems(this.aiDialogPopup);
+            const cancelToolbarItem = getItemByName(bottomToolbarItems, 'cancel');
+
+            assert.strictEqual(cancelToolbarItem.options.width, 123, 'width comes from the theme');
+        });
+    });
+
     QUnit.module('Accessibility', moduleConfig, () => {
         QUnit.test('result textarea should have correct aria-label', function(assert) {
             showAIDialog(this);
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/common.initialization.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/common.initialization.tests.js
index d7854522e060..49ce86514ccb 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/common.initialization.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/common.initialization.tests.js
@@ -5,6 +5,7 @@ import { triggerHidingEvent, triggerShownEvent } from 'common/core/events/visibi
 import { isFunction } from 'core/utils/type';
 import $ from 'jquery';
 import { AppointmentDataSource } from '__internal/scheduler/view_model/m_appointment_data_source';
+import { getViewModelOptions } from '__internal/scheduler/view_model/generate_view_model/options/get_view_model_options';
 
 import { createWrapper, initTestMarkup, SchedulerTestWrapper } from '../../helpers/scheduler/helpers.js';
 import { waitForAsync, waitGlobalFailure } from '../../helpers/scheduler/waitForAsync.js';
@@ -164,6 +165,20 @@ QUnit.module('Initialization', {
         });
     });
 
+    QUnit.test('Minimum appointment height comes from the theme', async function(assert) {
+        const $style = $('<style nonce="qunit-test">')
+            .text('.dx-scheduler { --dx-scheduler-appointment-min-height: 44px; }')
+            .appendTo('head');
+
+        try {
+            const { instance } = await createWrapper({ dataSource: [], currentView: 'month' });
+
+            assert.strictEqual(getViewModelOptions(instance).appointmentMinHeight, 44);
+        } finally {
+            $style.remove();
+        }
+    });
+
     QUnit.test('Header panel should be visible in "Day" view with intervalCount > 1 if crossScrollingEnabled: true, showAllDayPanel: false (T895058)', async function(assert) {
         const scheduler = await createWrapper({
             dataSource: [],
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/fileManagerParts/toolbar.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/fileManagerParts/toolbar.tests.js
index 5fec2727c20c..c03dd0cd1900 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/fileManagerParts/toolbar.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/fileManagerParts/toolbar.tests.js
@@ -1122,3 +1122,28 @@ QUnit.module('Toolbar', moduleConfig, () => {
     });
 
 });
+
+QUnit.module('Toolbar sizes declared by the theme', {
+    beforeEach: function() {
+        this.clock = sinon.useFakeTimers();
+        fx.off = true;
+        this.$style = $('<style nonce="qunit-test">')
+            .text('.dx-filemanager { --dx-file-manager-toolbar-viewmode-popup-width: 77px; }')
+            .appendTo('head');
+        this.$element = $('<div>').appendTo('#qunit-fixture');
+    },
+
+    afterEach: function() {
+        this.clock.tick(5000);
+        this.clock.restore();
+        this.$element.remove();
+        this.$style.remove();
+        fx.off = false;
+    }
+}, () => {
+    test('view-mode popup width comes from the theme', function(assert) {
+        const instance = this.$element.dxFileManager({ fileSystemProvider: [] }).dxFileManager('instance');
+
+        assert.strictEqual(instance._toolbar._getViewModePopupWidth(), 77);
+    });
+});
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 958ef47a7f4c..7f19d406318a 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/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,121 @@ testModule('render', moduleConfig, () => {
         assert.ok(overlayContainer.parent().hasClass(VIEWPORT_CLASS), 'overlay\'s container is the viewport\'s child');
     });
 
+    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);
+
+        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);
+        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;
@@ -385,7 +501,6 @@ testModule('render', moduleConfig, () => {
     });
 });
 
-
 testModule('option', moduleConfig, () => {
     test('RTL markup - rtlEnabled by option', function(assert) {
         const overlay = $('#overlay').dxOverlay({ deferRendering: false }).dxOverlay('instance');
@@ -527,7 +642,6 @@ testModule('option', moduleConfig, () => {
     });
 });
 
-
 testModule('visibility', moduleConfig, () => {
     test('overlay should be shown when option visible set to true', function(assert) {
         const $overlay = $('#overlay').dxOverlay({
@@ -790,7 +904,6 @@ testModule('visibility', moduleConfig, () => {
 
             overlay.hide();
             overlay.show();
-
         } finally {
             visibilityChange.DEBUG_set_triggerResizeEvent(triggerFunction);
         }
@@ -1080,7 +1193,6 @@ testModule('visibility', moduleConfig, () => {
     });
 });
 
-
 testModule('position', moduleConfig, () => {
     test('position change should not show the content if the overlay is hidden', function(assert) {
         const instance = $('#overlay').dxOverlay().dxOverlay('instance');
@@ -1163,7 +1275,6 @@ testModule('position', moduleConfig, () => {
             top: '100px'
         }).appendTo($container);
 
-
         const widgetPosition = {
             my: 'bottom',
             at: 'bottom',
@@ -1273,7 +1384,6 @@ testModule('position', moduleConfig, () => {
     });
 });
 
-
 testModule('shading', moduleConfig, () => {
     [true, false].forEach((value) => {
         test('render shading', function(assert) {
@@ -1332,7 +1442,6 @@ testModule('shading', moduleConfig, () => {
     });
 });
 
-
 testModule('dimensions', moduleConfig, () => {
     test('dimensions should be set correctly as number', function(assert) {
         const $content = $('#overlay').dxOverlay({
@@ -1459,7 +1568,6 @@ testModule('dimensions', moduleConfig, () => {
     });
 });
 
-
 testModule('animation', moduleConfig, () => {
     test('correct animation should be present', function(assert) {
         const originAnimate = fx.animate;
@@ -1742,7 +1850,6 @@ testModule('animation', moduleConfig, () => {
             const instance = $element.dxOverlay('instance');
 
             instance.hide();
-
         } finally {
             fx.animate = origFX;
         }
@@ -1773,7 +1880,6 @@ testModule('animation', moduleConfig, () => {
     });
 });
 
-
 testModule('content', moduleConfig, () => {
     test('content ready action should be fired if was set at initialization', function(assert) {
         const contentReadyStub = sinon.stub();
@@ -1947,7 +2053,6 @@ testModule('content', moduleConfig, () => {
     });
 });
 
-
 testModule('defer rendering', moduleConfig, () => {
     test('behavior if option set to true', function(assert) {
         const onContentReadyStub = sinon.stub();
@@ -2004,7 +2109,6 @@ testModule('defer rendering', moduleConfig, () => {
     });
 });
 
-
 testModule('hide on outside click', moduleConfig, () => {
     test('overlay should be hidden after click outside was present', function(assert) {
         const overlay = $('#overlay').dxOverlay({
@@ -2135,7 +2239,6 @@ testModule('hide on outside click', moduleConfig, () => {
         const downEvent = $.Event('dxpointerdown', { pointerType: 'mouse' });
         $(document).trigger(downEvent);
         assert.ok(downEvent.isDefaultPrevented(), 'default prevented');
-
     });
 
     test('overlay should propagate events when shading is false (T181002)', function(assert) {
@@ -2221,7 +2324,6 @@ testModule('hide on outside click', moduleConfig, () => {
         assert.strictEqual(overlay1.option('visible'), false, 'First overlay is now hidden, because it has become active');
     });
 
-
     test('hideOnOutsideClick works after first overlay hiding', function(assert) {
         const $overlay1 = $('#overlay').dxOverlay({
             hideOnOutsideClick: true,
@@ -2630,7 +2732,6 @@ testModule('hide on target scroll', moduleConfig, () => {
     });
 });
 
-
 testModule('container', moduleConfig, () => {
     test('wrapper should have width and height css attributes equal to container width and height', function(assert) {
         const $container = $('#customTargetContainer');
@@ -2975,7 +3076,6 @@ testModule('hide overlay by callback', moduleConfig, () => {
     });
 });
 
-
 testModule('API', moduleConfig, () => {
     test('toggle without args', function(assert) {
         const $overlay = $('#overlay').dxOverlay({
@@ -3183,7 +3283,6 @@ testModule('API', moduleConfig, () => {
     });
 });
 
-
 testModule('integration tests', moduleConfig, () => {
     test('wrong gallery render on start in overlay widget (B232427)', function(assert) {
         const overlay = $('#overlayWithAnonymousTmpl').dxOverlay().dxOverlay('instance');
@@ -3197,7 +3296,6 @@ testModule('integration tests', moduleConfig, () => {
     });
 });
 
-
 testModule('widget sizing render', moduleConfig, () => {
     test('constructor', function(assert) {
         const $element = $('#widget').dxOverlay({ width: 400 });
@@ -3285,7 +3383,6 @@ testModule('keyboard navigation', {
     });
 });
 
-
 testModule('focus policy', {
     beforeEach: function() {
         this.tabEvent = $.Event('keydown', { key: 'Tab' });
@@ -3557,7 +3654,6 @@ testModule('preventScrollEvents', () => {
 
         const $wrapper = $(overlay.content()).parent();
 
-
         const getWrapperEventListeners = () => $._data($wrapper.get(0)).events || {};
 
         assert.strictEqual('dxdrag' in getWrapperEventListeners(), true, 'scroll subscribed');
@@ -3963,7 +4059,6 @@ testModule('scrollable interaction', {
     });
 });
 
-
 testModule('specifying base z-index', moduleConfig, () => {
     test('overlay should render with correct z-index by default', function(assert) {
         const $overlay = $('#overlay').dxOverlay({ visible: true });
@@ -3990,7 +4085,6 @@ testModule('specifying base z-index', moduleConfig, () => {
     });
 });
 
-
 testModule('overlay utils', moduleConfig, () => {
     test('Overlay Base Zindex should return default ZIndex', function(assert) {
         assert.strictEqual(Overlay.baseZIndex(), 1500, 'base zindex is correct');
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/popup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/popup.tests.js
index 4fe854cc1807..fad4e737211f 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/popup.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/popup.tests.js
@@ -143,6 +143,24 @@ const POPUP_DRAGGABLE_CLASS = 'dx-popup-draggable';
 
 const VIEWPORT_CLASS = 'dx-viewport';
 const SWATCH_CLASS = 'dx-swatch-custom';
+const THEME_MODE = 'dark';
+const THEME_MODE_CLASS = `dx-theme-mode-${THEME_MODE}`;
+
+const nestedScope = (decorate) => decorate($('<div>').appendTo($('<div>').appendTo('#qunit-fixture')));
+
+const overlayScopes = [{
+    name: 'swatch',
+    containerClass: SWATCH_CLASS,
+    decorate: ($scope) => $scope.addClass(SWATCH_CLASS)
+}, {
+    name: 'theme mode',
+    containerClass: THEME_MODE_CLASS,
+    decorate: ($scope) => {
+        $scope.get(0).style.setProperty('--dx-theme-mode', THEME_MODE);
+
+        return $scope;
+    }
+}];
 
 const viewport = function() { return $(`.${VIEWPORT_CLASS}`); };
 
@@ -2403,16 +2421,14 @@ QUnit.module('drag', {
         assert.deepEqual([this.$overlayContent[0].style.width, this.$overlayContent[0].style.height], ['auto', 'auto'], 'correct size');
     });
 
-    QUnit.module('popup inside a swatch', {
+    overlayScopes.forEach(({ name, containerClass, decorate }) => QUnit.module(`popup inside a ${name}`, {
         beforeEach: function() {
             this.popup.dispose();
 
-            this.$swatch = $('<div>')
-                .addClass(SWATCH_CLASS)
-                .appendTo($('<div>').appendTo('#qunit-fixture'));
+            this.$scope = nestedScope(decorate);
 
             this.popup = $('<div>')
-                .appendTo(this.$swatch)
+                .appendTo(this.$scope)
                 .dxPopup({
                     animation: null,
                     dragEnabled: true,
@@ -2428,10 +2444,10 @@ QUnit.module('drag', {
             this.$title = this.popup.topToolbar();
         }
     }, () => {
-        QUnit.test('markup should be rendered in a container of the viewport for the swatch', function(assert) {
+        QUnit.test('markup should be rendered in a container of the viewport for the scope', function(assert) {
             const $container = this.$overlayContent.closest(`.${POPUP_WRAPPER_CLASS}`).parent();
 
-            assert.ok($container.hasClass(SWATCH_CLASS), 'container carries the swatch class');
+            assert.ok($container.hasClass(containerClass), 'container carries the scope class');
             assert.ok($container.parent().hasClass(VIEWPORT_CLASS), 'container is a child of the viewport');
         });
 
@@ -2457,7 +2473,7 @@ QUnit.module('drag', {
             assert.strictEqual(position.top - startEvent.maxTopOffset, 0, 'popup should not be dragged above the viewport');
             assert.strictEqual(position.top + startEvent.maxBottomOffset, viewHeight - getOuterHeight(this.$overlayContent), 'popup should not be dragged below the viewport');
         });
-    });
+    }));
 });
 
 QUnit.module('resize', {
@@ -2655,16 +2671,14 @@ QUnit.module('resize', {
         });
     });
 
-    QUnit.module('popup inside a swatch', {
+    overlayScopes.forEach(({ name, decorate }) => QUnit.module(`popup inside a ${name}`, {
         beforeEach: function() {
             this.popup.dispose();
 
-            this.$swatch = $('<div>')
-                .addClass(SWATCH_CLASS)
-                .appendTo($('<div>').appendTo('#qunit-fixture'));
+            this.$scope = nestedScope(decorate);
 
             this.popup = $('<div>')
-                .appendTo(this.$swatch)
+                .appendTo(this.$scope)
                 .dxPopup({
                     animation: null,
                     resizeEnabled: true,
@@ -2690,7 +2704,7 @@ QUnit.module('resize', {
             assert.strictEqual(getWidth(this.$overlayContent), 260, 'width was increased');
             assert.strictEqual(getHeight(this.$overlayContent), 240, 'height was increased');
         });
-    });
+    }));
 
     QUnit.module('resizeObserver integration', {
         beforeEach: function() {
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/speedDialAction.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/speedDialAction.tests.js
index 5bd71ef4f7a7..2bfdeb69921b 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/speedDialAction.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/speedDialAction.tests.js
@@ -1168,4 +1168,36 @@ QUnit.module('direction: auto', {
 
         actions.forEach((action) => action.dispose());
     });
+
+    QUnit.test('actions take their distances from the theme when it declares them', function(assert) {
+        const $style = $('<style nonce="qunit-test">').text(`.dx-fa-button {
+            --dx-speed-dial-action-fa-button-offset: 70px;
+            --dx-speed-dial-action-fa-button-spacing: 30px;
+        }`).appendTo('head');
+
+        config({
+            floatingActionButtonConfig: {
+                position: {
+                    at: 'right bottom',
+                    my: 'right bottom',
+                    offset: '-16 -16',
+                    of: '#fab-container'
+                }
+            }
+        });
+
+        try {
+            const actions = createActions();
+
+            const mainContentTop = $(FAB_MAIN_SELECTOR).find('.dx-overlay-content').offset().top;
+            const $fabContent = $(FAB_SELECTOR).find('.dx-overlay-content');
+
+            assert.strictEqual($fabContent.eq(1).offset().top, mainContentTop - 70, 'the first action sits one theme offset above the main button');
+            assert.strictEqual($fabContent.eq(2).offset().top, mainContentTop - 100, 'the second action sits one theme spacing further');
+
+            actions.forEach((action) => action.dispose());
+        } finally {
+            $style.remove();
+        }
+    });
 });
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..bf70596c9697 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,7 @@
 import $ from 'jquery';
 import themeModule from 'viz/themes';
+import { getTheme as getRegisteredTheme } from '__internal/viz/themes';
+import { createPalette, getGradientPalette } from '__internal/viz/palette';
 import uiThemeModule from 'ui/themes';
 
 uiThemeModule.setDefaultTimeout(0);
@@ -358,6 +360,294 @@ QUnit.test('Invalid input data (with color scheme)', function(assert) {
     });
 });
 
+const PUBLISHED_TITLE_WEIGHT = 'var(--dx-viz-title-font-weight, 600)';
+const PUBLISHED_WEIGHT = 'var(--dx-viz-font-weight, 400)';
+const PUBLISHED_EXPORT_WEIGHT = 'var(--dx-viz-export-font-weight, 400)';
+const PUBLISHED_LEGEND_TITLE_WEIGHT = 'var(--dx-viz-legend-title-font-weight, 200)';
+const PUBLISHED_LABEL_WEIGHT = 'var(--dx-viz-label-font-weight, 600)';
+const PUBLISHED_FONT = 'var(--dx-viz-font-family, \'segoe ui\', -apple-system, BlinkMacSystemFont, \'avenir next\', avenir, \'segoe ui\', \'helvetica neue\', helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif)';
+const PUBLISHED_BLUE = 'var(--dx-viz-blue, #0078d4)';
+const PUBLISHED_DANGER = 'var(--dx-viz-danger, #c50f1f)';
+const PUBLISHED_GRAY = 'var(--dx-viz-gray, #757575)';
+const PUBLISHED_ORANGE = 'var(--dx-viz-orange, #f7630c)';
+const PUBLISHED_SUCCESS = 'var(--dx-viz-success, #107c10)';
+const PUBLISHED_WARNING = 'var(--dx-viz-warning, #f7630c)';
+const PUBLISHED_TILE_BORDER = 'var(--dx-viz-tile-border, #ffffff)';
+const PUBLISHED_GREEN = 'var(--dx-viz-green, #008f04)';
+const PUBLISHED_PRIMARY = 'var(--dx-viz-primary, #0f6cbd)';
+const PUBLISHED_RED = 'var(--dx-viz-red, #c83d3d)';
+const PUBLISHED_YELLOW = 'var(--dx-viz-yellow, #eaa300)';
+
+[
+    { theme: 'fluent-next.blue.light', surface: 'var(--dx-viz-bg, #ffffff)', hovered: 'var(--dx-viz-bg-hovered, #f5f5f5)', pressed: 'var(--dx-viz-bg-active, #e1e1e1)', plate: 'var(--dx-viz-tooltip-bg, #242424)', onPlate: 'var(--dx-viz-tooltip-content, #ffffff)', ink: 'var(--dx-viz-content, #161616)', shelf: 'var(--dx-viz-bg-higher, #ebebeb)', quiet: 'var(--dx-viz-gray-subtle, #cfcfcf)', needle: 'var(--dx-viz-content-subtle, #444444)', crosshair: 'var(--dx-viz-crosshair, #b33133)', mapLineHovered: 'var(--dx-viz-content-orange, #ad4100)', rangePlate: 'var(--dx-viz-purple-subtle, #d5c7f0)', axis: 'var(--dx-viz-content-subtler, #656565)', frame: 'var(--dx-viz-border, #cbcbcb)' },
+    { theme: 'fluent-next.blue.light.compact', surface: 'var(--dx-viz-bg, #ffffff)', hovered: 'var(--dx-viz-bg-hovered, #f5f5f5)', pressed: 'var(--dx-viz-bg-active, #e1e1e1)', plate: 'var(--dx-viz-tooltip-bg, #242424)', onPlate: 'var(--dx-viz-tooltip-content, #ffffff)', ink: 'var(--dx-viz-content, #161616)', shelf: 'var(--dx-viz-bg-higher, #ebebeb)', quiet: 'var(--dx-viz-gray-subtle, #cfcfcf)', needle: 'var(--dx-viz-content-subtle, #444444)', crosshair: 'var(--dx-viz-crosshair, #b33133)', mapLineHovered: 'var(--dx-viz-content-orange, #ad4100)', rangePlate: 'var(--dx-viz-purple-subtle, #d5c7f0)', axis: 'var(--dx-viz-content-subtler, #656565)', frame: 'var(--dx-viz-border, #cbcbcb)' },
+    { theme: 'fluent-next.blue.dark', surface: 'var(--dx-viz-bg, #242424)', hovered: 'var(--dx-viz-bg-hovered, #3b3b3b)', pressed: 'var(--dx-viz-bg-active, #1d1d1d)', plate: 'var(--dx-viz-tooltip-bg, #ffffff)', onPlate: 'var(--dx-viz-tooltip-content, #161616)', ink: 'var(--dx-viz-content, #ffffff)', shelf: 'var(--dx-viz-bg-higher, #333333)', quiet: 'var(--dx-viz-gray-subtle, #4a4a4a)', needle: 'var(--dx-viz-content-subtle, #cbcbcb)', crosshair: 'var(--dx-viz-crosshair, #e87e78)', mapLineHovered: 'var(--dx-viz-content-orange, #f57d48)', rangePlate: 'var(--dx-viz-purple-subtle, #563780)', axis: 'var(--dx-viz-content-subtler, #a1a1a1)', frame: 'var(--dx-viz-border, #767676)' },
+    { theme: 'fluent-next.blue.dark.compact', surface: 'var(--dx-viz-bg, #242424)', hovered: 'var(--dx-viz-bg-hovered, #3b3b3b)', pressed: 'var(--dx-viz-bg-active, #1d1d1d)', plate: 'var(--dx-viz-tooltip-bg, #ffffff)', onPlate: 'var(--dx-viz-tooltip-content, #161616)', ink: 'var(--dx-viz-content, #ffffff)', shelf: 'var(--dx-viz-bg-higher, #333333)', quiet: 'var(--dx-viz-gray-subtle, #4a4a4a)', needle: 'var(--dx-viz-content-subtle, #cbcbcb)', crosshair: 'var(--dx-viz-crosshair, #e87e78)', mapLineHovered: 'var(--dx-viz-content-orange, #f57d48)', rangePlate: 'var(--dx-viz-purple-subtle, #563780)', axis: 'var(--dx-viz-content-subtler, #a1a1a1)', frame: 'var(--dx-viz-border, #767676)' },
+].forEach(({
+    theme, surface, hovered, pressed, plate, onPlate, ink, shelf, quiet, needle, crosshair,
+    mapLineHovered, rangePlate, axis, frame,
+}) => {
+    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 published font: ${theme}`, function(assert) {
+        const registeredTheme = getRegisteredTheme(theme);
+
+        assert.strictEqual(registeredTheme.font.family, PUBLISHED_FONT, 'font');
+        assert.strictEqual(registeredTheme.title.font.family, PUBLISHED_FONT, 'title font');
+        assert.strictEqual(registeredTheme.title.subtitle.font.family, PUBLISHED_FONT, 'subtitle font');
+        assert.strictEqual(registeredTheme.chart.title.font.family, PUBLISHED_FONT, 'chart title font');
+        assert.strictEqual(registeredTheme.gauge.title.font.family, PUBLISHED_FONT, 'gauge title font');
+        assert.strictEqual(registeredTheme.title.font.size, 20, 'title font size is inherited');
+        assert.strictEqual(registeredTheme.title.font.weight, PUBLISHED_TITLE_WEIGHT, 'title font weight');
+        assert.strictEqual(registeredTheme.title.subtitle.font.weight, PUBLISHED_TITLE_WEIGHT, 'subtitle mirrors it');
+    });
+
+    QUnit.test(`fluent-next theme should weigh the rest of the text with the published names: ${theme}`, function(assert) {
+        const registeredTheme = getRegisteredTheme(theme);
+
+        assert.strictEqual(registeredTheme.font.weight, PUBLISHED_WEIGHT, 'widget font, which axis and legend labels take');
+        assert.strictEqual(registeredTheme.export.font.weight, PUBLISHED_EXPORT_WEIGHT, 'export menu');
+        assert.strictEqual(registeredTheme.bullet.export.font.weight, PUBLISHED_EXPORT_WEIGHT, 'bullet export menu');
+        assert.strictEqual(registeredTheme.legend.title.font.weight, PUBLISHED_LEGEND_TITLE_WEIGHT, 'legend title');
+        assert.strictEqual(registeredTheme.map.legend.title.font.weight, PUBLISHED_LEGEND_TITLE_WEIGHT, 'map legend title');
+        assert.strictEqual(registeredTheme.sankey.label.font.weight, PUBLISHED_LABEL_WEIGHT, 'sankey label');
+        assert.strictEqual(registeredTheme.treeMap.tile.label.font.weight, PUBLISHED_LABEL_WEIGHT, 'tree map tile label');
+        assert.strictEqual(registeredTheme.treeMap.group.label.font.weight, PUBLISHED_LABEL_WEIGHT, 'tree map group label');
+    });
+
+    QUnit.test(`fluent-next theme should take every font weight it sets from a published name: ${theme}`, function(assert) {
+        const weights = new Set();
+        const collectWeights = (node) => {
+            Object.keys(node).forEach((key) => {
+                const value = node[key];
+                if(!value || typeof value !== 'object') {
+                    return;
+                }
+                if(key === 'font' && value.weight !== undefined) {
+                    weights.add(value.weight);
+                }
+                collectWeights(value);
+            });
+        };
+
+        collectWeights(getRegisteredTheme(theme));
+
+        assert.deepEqual(Array.from(weights).sort(), [
+            PUBLISHED_EXPORT_WEIGHT,
+            PUBLISHED_WEIGHT,
+            PUBLISHED_LABEL_WEIGHT,
+            PUBLISHED_LEGEND_TITLE_WEIGHT,
+            PUBLISHED_TITLE_WEIGHT,
+        ]);
+    });
+
+    QUnit.test(`fluent-next theme should paint the background with the published surface: ${theme}`, function(assert) {
+        const registeredTheme = getRegisteredTheme(theme);
+
+        assert.strictEqual(registeredTheme.backgroundColor, surface, 'backgroundColor');
+        assert.strictEqual(registeredTheme.chart.containerBackgroundColor, surface, 'chart container');
+        assert.strictEqual(registeredTheme.gauge.containerBackgroundColor, surface, 'gauge container');
+        assert.strictEqual(registeredTheme.rangeSelector.containerBackgroundColor, surface, 'rangeSelector container');
+        assert.strictEqual(registeredTheme.rangeSelector.shutter.color, surface, 'rangeSelector shutter');
+        assert.strictEqual(registeredTheme.rangeSelector.shutter.opacity, 0.75, 'rangeSelector shutter opacity, the same in both modes');
+        assert.strictEqual(registeredTheme.chart.commonSeriesSettings.candlestick.innerColor, surface, 'candlestick inner color');
+        assert.strictEqual(registeredTheme.gauge.scale.tick.color, surface, 'gauge tick');
+        assert.strictEqual(registeredTheme.map.background.color, surface, 'map background');
+        assert.strictEqual(registeredTheme.map['layer:area'].borderColor, surface, 'map area border');
+        assert.strictEqual(registeredTheme.map.controlBar.color, surface, 'map control bar');
+        assert.strictEqual(registeredTheme.sparkline.pointColor, surface, 'sparkline point');
+        assert.strictEqual(registeredTheme.loadingIndicator.backgroundColor, surface, 'loading indicator');
+        assert.strictEqual(registeredTheme.export.backgroundColor, surface, 'export background');
+        assert.strictEqual(registeredTheme.chart.export.backgroundColor, surface, 'chart export background');
+        assert.strictEqual(registeredTheme.export.button.default.backgroundColor, surface, 'export button background');
+    });
+
+    QUnit.test(`fluent-next theme should cut shapes out with the published surface: ${theme}`, function(assert) {
+        const registeredTheme = getRegisteredTheme(theme);
+
+        assert.strictEqual(registeredTheme.rangeSelector.sliderMarker.font.color, surface, 'rangeSelector slider marker text');
+        assert.strictEqual(registeredTheme.chart.crosshair.label.font.color, surface, 'crosshair label text');
+        assert.strictEqual(registeredTheme.map['layer:marker:dot'].borderColor, surface, 'map dot marker ring');
+        assert.strictEqual(registeredTheme.map['layer:marker:dot'].backColor, surface, 'map dot marker back disc');
+        assert.strictEqual(registeredTheme.funnel.item.border.color, surface, 'funnel item border');
+    });
+
+    QUnit.test(`fluent-next theme should light the export button with the hovered and pressed names: ${theme}`, function(assert) {
+        const registeredTheme = getRegisteredTheme(theme);
+
+        assert.strictEqual(registeredTheme.export.button.hover.backgroundColor, hovered, 'export button hover');
+        assert.strictEqual(registeredTheme.export.button.focus.backgroundColor, pressed, 'export button focus');
+        assert.strictEqual(registeredTheme.export.button.active.backgroundColor, pressed, 'export button active');
+    });
+
+    QUnit.test(`fluent-next theme should lift the bar gauge shelf off the surface: ${theme}`, function(assert) {
+        const registeredTheme = getRegisteredTheme(theme);
+
+        assert.strictEqual(registeredTheme.barGauge.backgroundColor, shelf, 'bar gauge shelf');
+    });
+
+    QUnit.test(`fluent-next theme should lay a tooltip and an annotation over the page, not into it: ${theme}`, function(assert) {
+        const registeredTheme = getRegisteredTheme(theme);
+
+        assert.strictEqual(registeredTheme.tooltip.color, plate, 'tooltip plate');
+        assert.strictEqual(registeredTheme.tooltip.font.color, onPlate, 'tooltip text');
+        assert.strictEqual(registeredTheme.tooltip.border.color, frame, 'tooltip border, drawn once an application shows it');
+        assert.strictEqual(registeredTheme.chart.tooltip.border.color, frame, 'chart tooltip border');
+        assert.strictEqual(registeredTheme.chart.commonAnnotationSettings.color, plate, 'annotation plate');
+        assert.strictEqual(registeredTheme.chart.commonAnnotationSettings.border.color, plate, 'annotation border');
+        assert.strictEqual(registeredTheme.chart.commonAnnotationSettings.font.color, onPlate, 'annotation text');
+        assert.strictEqual(registeredTheme.map.commonAnnotationSettings.font.color, onPlate, 'map annotation text');
+    });
+
+    QUnit.test(`fluent-next theme should color series with the Fluent Next palette: ${theme}`, function(assert) {
+        const defaultPalette = getRegisteredTheme(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, [
+            PUBLISHED_BLUE,
+            PUBLISHED_RED,
+            PUBLISHED_GREEN,
+            PUBLISHED_YELLOW,
+            'var(--dx-viz-pink, #e43ba6)',
+            'var(--dx-viz-purple, #865cbf)',
+        ], 'simpleSet');
+        assert.deepEqual(indicatingSet, [PUBLISHED_SUCCESS, PUBLISHED_WARNING, PUBLISHED_DANGER], 'indicatingSet');
+        assert.deepEqual([gradientSet.getColor(0), gradientSet.getColor(1)], [
+            `color-mix(in srgb, ${PUBLISHED_BLUE} 100%, ${PUBLISHED_GREEN})`,
+            `color-mix(in srgb, ${PUBLISHED_BLUE} 0%, ${PUBLISHED_GREEN})`,
+        ], 'gradientSet is mixed by the browser, so it follows the names it is mixed from');
+    });
+
+    QUnit.test(`fluent-next theme should let the range selector follow the accent: ${theme}`, function(assert) {
+        const registeredTheme = getRegisteredTheme(theme);
+
+        assert.strictEqual(registeredTheme.rangeSelector.selectedRangeColor, PUBLISHED_PRIMARY, 'rangeSelector selected range');
+        assert.strictEqual(registeredTheme.rangeSelector.sliderMarker.color, PUBLISHED_PRIMARY, 'rangeSelector slider marker');
+        assert.strictEqual(registeredTheme.rangeSelector.sliderHandle.color, PUBLISHED_PRIMARY, 'rangeSelector slider handle');
+    });
+
+    QUnit.test(`fluent-next theme should mark a range that is not allowed with the published danger: ${theme}`, function(assert) {
+        const registeredTheme = getRegisteredTheme(theme);
+
+        assert.strictEqual(registeredTheme.rangeSelector.sliderMarker.invalidRangeColor, PUBLISHED_DANGER, 'rangeSelector invalid range');
+    });
+
+    QUnit.test(`fluent-next theme should paint the shapes that are data with the published blue: ${theme}`, function(assert) {
+        const registeredTheme = getRegisteredTheme(theme);
+
+        assert.strictEqual(registeredTheme.map['layer:marker:dot'].color, PUBLISHED_BLUE, 'map dot marker');
+        assert.strictEqual(registeredTheme.map['layer:marker:bubble'].color, PUBLISHED_BLUE, 'map bubble marker');
+        assert.strictEqual(registeredTheme.map.legend.markerColor, PUBLISHED_BLUE, 'map legend marker');
+        assert.strictEqual(registeredTheme.bullet.color, PUBLISHED_BLUE, 'bullet');
+        assert.strictEqual(registeredTheme.gauge.valueIndicators.rangebar.color, PUBLISHED_BLUE, 'gauge rangebar');
+        assert.strictEqual(registeredTheme.gauge.valueIndicators['textcloud'].color, PUBLISHED_BLUE, 'gauge textcloud');
+        assert.strictEqual(registeredTheme.sparkline.lineColor, PUBLISHED_BLUE, 'sparkline line');
+        assert.strictEqual(registeredTheme.sparkline.firstLastColor, PUBLISHED_BLUE, 'sparkline first and last point');
+    });
+
+    QUnit.test(`fluent-next theme should paint a falling value with the published red: ${theme}`, function(assert) {
+        const registeredTheme = getRegisteredTheme(theme);
+
+        assert.strictEqual(registeredTheme.chart.commonSeriesSettings.candlestick.reduction.color, PUBLISHED_RED, 'candlestick reduction');
+        assert.strictEqual(registeredTheme.chart.commonSeriesSettings.stock.reduction.color, PUBLISHED_RED, 'stock reduction');
+        assert.strictEqual(registeredTheme.rangeSelector.chart.commonSeriesSettings.candlestick.reduction.color, PUBLISHED_RED, 'rangeSelector candlestick reduction');
+        assert.strictEqual(registeredTheme.rangeSelector.chart.commonSeriesSettings.stock.reduction.color, PUBLISHED_RED, 'rangeSelector stock reduction');
+    });
+
+    QUnit.test(`fluent-next theme should mark the extremes of a sparkline with the published yellow and red: ${theme}`, function(assert) {
+        const registeredTheme = getRegisteredTheme(theme);
+
+        assert.strictEqual(registeredTheme.sparkline.minColor, PUBLISHED_YELLOW, 'sparkline minimum');
+        assert.strictEqual(registeredTheme.sparkline.maxColor, PUBLISHED_RED, 'sparkline maximum');
+    });
+
+    QUnit.test(`fluent-next theme should keep a win and a loss grey, from the published pair: ${theme}`, function(assert) {
+        const registeredTheme = getRegisteredTheme(theme);
+
+        assert.strictEqual(registeredTheme.sparkline.winColor, PUBLISHED_GRAY, 'sparkline win');
+        assert.strictEqual(registeredTheme.sparkline.barPositiveColor, PUBLISHED_GRAY, 'sparkline bar above zero');
+        assert.strictEqual(registeredTheme.sparkline.lossColor, quiet, 'sparkline loss');
+        assert.strictEqual(registeredTheme.sparkline.barNegativeColor, quiet, 'sparkline bar below zero');
+    });
+
+    QUnit.test(`fluent-next theme should leave a sankey link without a meaning, in the published grey: ${theme}`, function(assert) {
+        const registeredTheme = getRegisteredTheme(theme);
+
+        assert.strictEqual(registeredTheme.sankey.link.color, PUBLISHED_GRAY, 'sankey link');
+    });
+
+    QUnit.test(`fluent-next theme should draw the marks that stand out with the published content: ${theme}`, function(assert) {
+        const registeredTheme = getRegisteredTheme(theme);
+
+        assert.strictEqual(registeredTheme.bullet.targetColor, ink, 'bullet target');
+    });
+
+    QUnit.test(`fluent-next theme should name the fills an application can switch on: ${theme}`, function(assert) {
+        const registeredTheme = getRegisteredTheme(theme);
+
+        assert.strictEqual(registeredTheme.treeMap.tile.color, PUBLISHED_BLUE, 'tree map tile fill');
+        assert.strictEqual(registeredTheme.rangeSelector.background.color, rangePlate, 'range selector plate');
+        assert.strictEqual(registeredTheme.map['layer:area'].color, quiet, 'map area fill');
+    });
+
+    QUnit.test(`fluent-next theme should keep a mark that lies on a data colour out of the mode: ${theme}`, function(assert) {
+        const registeredTheme = getRegisteredTheme(theme);
+
+        assert.strictEqual(registeredTheme.treeMap.tile.border.color, PUBLISHED_TILE_BORDER, 'tree map tile border');
+    });
+
+    QUnit.test(`fluent-next theme should read the axis a step quieter than the rest of the text: ${theme}`, function(assert) {
+        const registeredTheme = getRegisteredTheme(theme);
+
+        assert.strictEqual(registeredTheme.font.color, axis, 'widget font, which axis and legend labels take');
+        assert.strictEqual(registeredTheme.axisColor, axis, 'axis line and its ticks');
+        assert.strictEqual(registeredTheme.secondaryTitleColor, axis, 'legend labels and axis titles');
+        assert.strictEqual(registeredTheme.title.subtitle.font.color, ink, 'the subtitle stays with the title');
+    });
+
+    QUnit.test(`fluent-next theme should draw a map line in the published orange: ${theme}`, function(assert) {
+        const line = getRegisteredTheme(theme).map['layer:line'];
+
+        assert.strictEqual(line.color, PUBLISHED_ORANGE, 'map line at rest');
+        assert.strictEqual(line.hoveredColor, mapLineHovered, 'map line under the pointer');
+        assert.strictEqual(line.selectedColor, ink, 'map line selected');
+    });
+
+    QUnit.test(`fluent-next theme should draw the crosshair with its own published name: ${theme}`, function(assert) {
+        const registeredTheme = getRegisteredTheme(theme);
+
+        assert.strictEqual(registeredTheme.chart.crosshair.color, crosshair, 'chart crosshair');
+    });
+
+    QUnit.test(`fluent-next theme should name every gauge indicator the theme draws: ${theme}`, function(assert) {
+        const { valueIndicators } = getRegisteredTheme(theme).gauge;
+
+        const painted = {};
+        Object.keys(valueIndicators).forEach((indicator) => {
+            ['color', 'secondColor'].forEach((slot) => {
+                if(valueIndicators[indicator][slot] !== undefined) {
+                    painted[`${indicator}.${slot}`] = valueIndicators[indicator][slot];
+                }
+            });
+        });
+
+        assert.deepEqual(painted, {
+            '_default.color': needle,
+            'rangebar.color': PUBLISHED_BLUE,
+            'textcloud.color': PUBLISHED_BLUE,
+            'trianglemarker.color': PUBLISHED_BLUE,
+            'twocolorneedle.secondColor': PUBLISHED_RED,
+        });
+    });
+});
+
 
 QUnit.module('refresh all', {
     createItem: function() {
diff --git a/packages/devextreme/testing/tests/DevExpress.viz.core/tooltip.tests.js b/packages/devextreme/testing/tests/DevExpress.viz.core/tooltip.tests.js
index 195233cf2977..b6de35a2ab4b 100644
--- a/packages/devextreme/testing/tests/DevExpress.viz.core/tooltip.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.viz.core/tooltip.tests.js
@@ -9,6 +9,7 @@ import vizUtils from 'viz/core/utils_default';
 import rendererModule from 'viz/core/renderers/renderer_default';
 import domAdapter from '__internal/core/dom_adapter';
 import { implementationsMap } from 'core/utils/size';
+import { value as viewPort, originalViewPort } from 'core/utils/view_port';
 import { initializeSizeMocks, destroySizeMocks } from '../../helpers/sizeMocks.js';
 
 const Tooltip = tooltipModule.Tooltip;
@@ -21,6 +22,10 @@ QUnit.testStart(function() {
 
 const CANVAS = { left: 0, top: 0, width: 800, height: 600, bottom: 0, right: 0 };
 
+function assertViewPortIsBody(assert) {
+    assert.strictEqual(viewPort().get(0), $('body').get(0), 'the page has no .dx-viewport, so the view port a tooltip falls back to is body');
+}
+
 function getInitialOptions() {
     return {
         enabled: true,
@@ -177,6 +182,7 @@ QUnit.test('Set options. Container is incorrect', function(assert) {
     const result = tooltip.setOptions(this.options);
 
     assert.equal(tooltip, result);
+    assertViewPortIsBody(assert);
     assert.equal(tooltip._getContainer(), $('body').get(0));
 });
 
@@ -584,6 +590,151 @@ QUnit.test('getOptions', function(assert) {
     assert.strictEqual(tooltip.getOptions(), this.options);
 });
 
+function themeModeScope(mode) {
+    const $scope = $('<div>').addClass(`dx-theme-mode-${mode}`);
+
+    $scope.get(0).style.setProperty('--dx-theme-mode', mode);
+
+    return $scope;
+}
+
+QUnit.module('Container and canvas', {
+    beforeEach: function() {
+        this.options = getInitialOptions();
+        this.initialViewPort = originalViewPort();
+
+        this.createTooltip = (widgetRoot) => {
+            this.tooltip = new Tooltip({ eventTrigger: sinon.spy(), widgetRoot });
+            this.tooltip.update(this.options);
+
+            return this.tooltip;
+        };
+
+        this.pageCanvas = () => {
+            const tooltip = new Tooltip({ eventTrigger: sinon.spy() });
+
+            tooltip.update($.extend({}, this.options, { container: 'body' }));
+
+            const canvas = tooltip._getCanvas();
+
+            tooltip.dispose();
+
+            return canvas;
+        };
+    },
+    afterEach: function() {
+        this.tooltip && this.tooltip.dispose();
+        viewPort(this.initialViewPort);
+    }
+});
+
+QUnit.test('Without a .dx-viewport, a widget in no scope of its own attaches the tooltip to body', function(assert) {
+    const tooltip = this.createTooltip($('<div>').appendTo('#qunit-fixture').get(0));
+
+    tooltip.show({ valueText: 'text' }, {});
+
+    assertViewPortIsBody(assert);
+    assert.strictEqual(tooltip._getContainer(), $('body').get(0), 'the tooltip falls back to body');
+    assert.strictEqual(tooltip._wrapper.parent().get(0), $('body').get(0), 'and its wrapper is appended there');
+});
+
+QUnit.test('With a .dx-viewport, a widget in no scope of its own attaches the tooltip to the view port', function(assert) {
+    const $viewPort = $('<div>').addClass('dx-viewport').appendTo('#qunit-fixture');
+
+    viewPort($viewPort);
+
+    const tooltip = this.createTooltip($('<div>').appendTo($viewPort).get(0));
+
+    tooltip.show({ valueText: 'text' }, {});
+
+    assert.strictEqual(tooltip._getContainer(), $viewPort.get(0), 'the tooltip falls back to the view port, not to body');
+    assert.strictEqual(tooltip._wrapper.parent().get(0), $viewPort.get(0), 'and its wrapper is appended there');
+});
+
+QUnit.test('With a .dx-viewport, a widget in a theme mode scope attaches the tooltip to that scope', function(assert) {
+    const $viewPort = $('<div>').addClass('dx-viewport').appendTo('#qunit-fixture');
+    const $scope = themeModeScope('dark').appendTo($viewPort);
+
+    viewPort($viewPort);
+
+    const tooltip = this.createTooltip($('<div>').appendTo($scope).get(0));
+
+    tooltip.show({ valueText: 'text' }, {});
+
+    assert.strictEqual(tooltip._getContainer(), $scope.get(0), 'the scope is a child of the view port, so the tooltip goes into it');
+    assert.strictEqual(tooltip._wrapper.parent().get(0), $scope.get(0), 'and its wrapper is appended there');
+});
+
+QUnit.test('With a .dx-viewport, a widget in a theme mode scope that clips attaches the tooltip to the view port\'s container for that mode', function(assert) {
+    const $viewPort = $('<div>').addClass('dx-viewport').appendTo('#qunit-fixture');
+    const $scope = themeModeScope('dark').css('overflow', 'hidden').appendTo($viewPort);
+
+    viewPort($viewPort);
+
+    const tooltip = this.createTooltip($('<div>').appendTo($scope).get(0));
+
+    tooltip.show({ valueText: 'text' }, {});
+
+    const container = tooltip._getContainer();
+
+    assert.notStrictEqual(container, $scope.get(0), 'the scope would clip the tooltip, so it does not host it');
+    assert.strictEqual(container.parentNode, $viewPort.get(0), 'the container is a child of the view port');
+    assert.ok($(container).hasClass('dx-theme-mode-dark'), 'that carries the mode of the scope');
+    assert.strictEqual(tooltip._wrapper.parent().get(0), container, 'and the wrapper is appended there');
+});
+
+QUnit.test('With a .dx-viewport, a widget deeper in a theme mode scope attaches the tooltip to the view port\'s container for that mode', function(assert) {
+    const $viewPort = $('<div>').addClass('dx-viewport').appendTo('#qunit-fixture');
+    const $scope = themeModeScope('dark').appendTo($('<div>').appendTo($viewPort));
+
+    viewPort($viewPort);
+
+    const tooltip = this.createTooltip($('<div>').appendTo($scope).get(0));
+
+    tooltip.show({ valueText: 'text' }, {});
+
+    const container = tooltip._getContainer();
+
+    assert.strictEqual(container.parentNode, $viewPort.get(0), 'the container is a child of the view port');
+    assert.ok($(container).hasClass('dx-theme-mode-dark'), 'that carries the mode of the scope');
+    assert.strictEqual(tooltip._wrapper.parent().get(0), container, 'and the wrapper is appended there');
+});
+
+QUnit.test('The view port the tooltip falls back to does not clip the canvas', function(assert) {
+    const $viewPort = $('<div>').addClass('dx-viewport').appendTo('#qunit-fixture');
+
+    viewPort($viewPort);
+
+    const tooltip = this.createTooltip($('<div>').appendTo($viewPort).get(0));
+
+    assert.deepEqual(tooltip._getCanvas(), this.pageCanvas(), 'the canvas is the page, as it is for a tooltip in body');
+    assert.strictEqual(tooltip.show({ valueText: 'text' }, { x: 100, y: 200, offset: 0 }), true, 'so a point outside the view port box still gets its tooltip');
+});
+
+QUnit.test('The container of a theme mode scope does not clip the canvas', function(assert) {
+    const $viewPort = $('<div>').addClass('dx-viewport').appendTo('#qunit-fixture');
+    const $scope = themeModeScope('dark').appendTo($('<div>').appendTo($viewPort));
+
+    viewPort($viewPort);
+
+    const tooltip = this.createTooltip($('<div>').appendTo($scope).get(0));
+
+    assert.deepEqual(tooltip._getCanvas(), this.pageCanvas(), 'the canvas is the page, not the empty container the view port keeps for the scope');
+    assert.strictEqual(tooltip.show({ valueText: 'text' }, { x: 100, y: 200, offset: 0 }), true, 'so the tooltip is drawn');
+});
+
+QUnit.test('A container given in the options still clips the canvas', function(assert) {
+    const $container = $('<div>').appendTo('#qunit-fixture');
+
+    this.options.container = $container.get(0);
+
+    const tooltip = this.createTooltip($('<div>').appendTo($container).get(0));
+
+    assert.notDeepEqual(tooltip._getCanvas(), this.pageCanvas(), 'the canvas is cut to the container');
+    assert.strictEqual(tooltip.show({ valueText: 'text' }, { x: 100, y: 200, offset: 0 }), false, 'so a point outside it gets no tooltip');
+    assert.strictEqual(tooltip._wrapper.parent().get(0), $container.get(0), 'and the wrapper still goes to the container');
+});
+
 QUnit.module('Manipulation', {
     beforeEach: function() {
         let tooltip;
@@ -695,6 +846,7 @@ QUnit.test('Show preparations. W/o customize, w/ text', function(assert) {
     });
 
     assert.equal(this.tooltip._wrapper.appendTo.callCount, 1, 'wrapper is added to dom');
+    assertViewPortIsBody(assert);
     assert.deepEqual(this.tooltip._wrapper.appendTo.firstCall.args, [$('body').get(0)]);
 });
 
@@ -735,6 +887,7 @@ QUnit.test('Show preparations. W/o customize, w/ text from \'description\' filed
     }, 'state');
 
     assert.equal(this.tooltip._wrapper.appendTo.callCount, 1, 'wrapper is added to dom');
+    assertViewPortIsBody(assert);
     assert.deepEqual(this.tooltip._wrapper.appendTo.firstCall.args, [$('body').get(0)]);
 });
 
@@ -886,6 +1039,7 @@ QUnit.test('Show preparations. W/ customize w/ text, empty text', function(asser
     }, 'state');
 
     assert.equal(this.tooltip._wrapper.appendTo.callCount, 1, 'wrapper is added to dom');
+    assertViewPortIsBody(assert);
     assert.deepEqual(this.tooltip._wrapper.appendTo.firstCall.args, [$('body').get(0)]);
 });
 
@@ -917,6 +1071,7 @@ QUnit.test('Show preparations. W/ customize w/ text, w/ text', function(assert)
     }, 'state');
 
     assert.equal(this.tooltip._wrapper.appendTo.callCount, 1, 'wrapper is added to dom');
+    assertViewPortIsBody(assert);
     assert.deepEqual(this.tooltip._wrapper.appendTo.firstCall.args, [$('body').get(0)]);
 });
 
@@ -1023,6 +1178,7 @@ QUnit.test('Show preparations. W/ customize w/ html', function(assert) {
     }, 'state');
 
     assert.equal(this.tooltip._wrapper.appendTo.callCount, 1, 'wrapper is added to dom');
+    assertViewPortIsBody(assert);
     assert.deepEqual(this.tooltip._wrapper.appendTo.firstCall.args, [$('body').get(0)]);
 });
 
@@ -1055,6 +1211,7 @@ QUnit.test('Show preparations. W/ customize w/ html/text', function(assert) {
     }, 'state');
 
     assert.equal(this.tooltip._wrapper.appendTo.callCount, 1, 'wrapper is added to dom');
+    assertViewPortIsBody(assert);
     assert.deepEqual(this.tooltip._wrapper.appendTo.firstCall.args, [$('body').get(0)]);
 });
 
diff --git a/packages/devextreme/ts/dx.all.d.ts b/packages/devextreme/ts/dx.all.d.ts
index d35548ef27b0..934095c3b10d 100644
--- a/packages/devextreme/ts/dx.all.d.ts
+++ b/packages/devextreme/ts/dx.all.d.ts
@@ -2158,7 +2158,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 =
@@ -34262,6 +34263,22 @@ 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:ui.themes.customAccentColor()]
+     */
+    static customAccentColor(): string;
+    /**
+     * [descr:ui.themes.customAccentColor(color)]
+     */
+    static customAccentColor(color: string | null): 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 4c91405d7bc7..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(() => {
@@ -84,6 +89,48 @@ describe('ScssAssembleExecutor E2E', () => {
     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(
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 1411fda2cfbd..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,10 +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 353a617133b7..3afc9f7eae23 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
@@ -47,7 +47,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'),
@@ -156,6 +158,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;
 }
@@ -201,6 +208,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({
@@ -231,6 +288,22 @@ 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('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/scss-build.impl.ts b/packages/nx-infra-plugin/src/executors/scss-build/scss-build.impl.ts
index c3c50a428f9f..89e2d81bd5dd 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
@@ -14,6 +14,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',
@@ -27,6 +33,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 {
@@ -38,6 +47,7 @@ interface BuildDependencies {
   cleanCssSanitizeOptions: unknown;
   cleanCssDevOptions: unknown;
   devextremeVersion: string;
+  tokensVersion: string | null;
 }
 
 type MinifyProfile = 'all' | 'ci';
@@ -53,11 +63,16 @@ function readFileDataUri(filePath: string, svgEncoding?: string): string {
   return encodeDataUriContent(buffer, filePath, svgEncoding);
 }
 
-function createStarLicenseHeader(fileName: string, version: string): string {
+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`,
@@ -75,7 +90,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')
@@ -110,6 +125,14 @@ async function generateScssBundles(
   await writeFileText(path.join(resolvedBundlesDir, 'dx.common.scss'), commonTemplate);
 }
 
+function readTokensVersion(projectRequire: NodeRequire): string | null {
+  try {
+    return projectRequire(`${TOKENS_PACKAGE}/package.json`).version ?? null;
+  } catch {
+    return null;
+  }
+}
+
 function loadDependencies(projectRoot: string): BuildDependencies {
   const projectRequire = createRequire(path.join(projectRoot, 'package.json'));
 
@@ -129,6 +152,7 @@ function loadDependencies(projectRoot: string): BuildDependencies {
     ),
     devextremeVersion: projectRequire(path.resolve(projectRoot, '../devextreme/package.json'))
       .version,
+    tokensVersion: readTokensVersion(projectRequire),
   };
 }
 
@@ -200,11 +224,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');
@@ -278,6 +339,8 @@ async function runSingleBuild(
     logger.verbose(`Compiling ${source}`);
     await compileFile(source, cssOutputDir, minifyProfile, deps, projectRoot);
   }
+
+  await compileAccentOverrides(projectRoot, cssOutputDir, deps);
 }
 
 async function runWatchBuild(
@@ -307,6 +370,7 @@ async function runWatchBuild(
       await compileFile(source, cssOutputDir, minifyProfile, deps, projectRoot);
     }
 
+    await compileAccentOverrides(projectRoot, cssOutputDir, deps);
     await copyThemeAssets(projectRoot, cssOutputDir);
   };
 
diff --git a/packages/testcafe-models/types.ts b/packages/testcafe-models/types.ts
index 9fef87f4c2a8..fdba42629da3 100644
--- a/packages/testcafe-models/types.ts
+++ b/packages/testcafe-models/types.ts
@@ -7,6 +7,8 @@ export type WidgetName =
   | 'dxActionSheet'
   | 'dxAutocomplete'
   | 'dxButton'
+  | 'dxBarGauge'
+  | 'dxBullet'
   | 'dxButtonGroup'
   | 'dxCalendar'
   | 'dxCalendarView'
@@ -14,6 +16,7 @@ export type WidgetName =
   | 'dxChart'
   | 'dxChat'
   | 'dxCheckBox'
+  | 'dxCircularGauge'
   | 'dxColorBox'
   | 'dxContextMenu'
   | 'dxDataGrid'
@@ -27,9 +30,11 @@ export type WidgetName =
   | 'dxFileManager'
   | 'dxFileUploader'
   | 'dxFilterBuilder'
+  | 'dxFunnel'
   | 'dxForm'
   | 'dxGallery'
   | 'dxHtmlEditor'
+  | 'dxLinearGauge'
   | 'dxList'
   | 'dxLoadIndicator'
   | 'dxLoadPanel'
@@ -40,19 +45,24 @@ export type WidgetName =
   | 'dxNumberBox'
   | 'dxOverlay'
   | 'dxPagination'
+  | 'dxPieChart'
   | 'dxPivotGrid'
   | 'dxPivotGridFieldChooser'
+  | 'dxPolarChart'
   | 'dxPopover'
   | 'dxPopup'
   | 'dxProgressBar'
   | 'dxRadioGroup'
+  | 'dxRangeSelector'
   | 'dxRangeSlider'
+  | 'dxSankey'
   | 'dxScheduler'
   | 'dxScrollable'
   | 'dxScrollView'
   | 'dxSelectBox'
   | 'dxSlider'
   | 'dxSortable'
+  | 'dxSparkline'
   | 'dxSpeechToText'
   | 'dxSpeedDialAction'
   | 'dxSplitter'
@@ -68,9 +78,11 @@ export type WidgetName =
   | 'dxToolbar'
   | 'dxTooltip'
   | 'dxTreeList'
+  | 'dxTreeMap'
   | 'dxTreeView'
   | 'dxValidationSummary'
   | 'dxValidator'
+  | 'dxVectorMap'
   | 'dxGantt';
 
 export interface WidgetOptions {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5646ec3dc18d..294cd312a456 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1853,12 +1853,18 @@ importers:
 
   packages/devextreme-scss:
     devDependencies:
+      '@devexpress/design-tokens-internal':
+        specifier: 262.26.0
+        version: 262.26.0
       '@stylistic/eslint-plugin':
         specifier: 'catalog:'
         version: 5.10.0(eslint@9.39.4(jiti@2.6.1))
       '@stylistic/stylelint-plugin':
         specifier: 3.1.3
         version: 3.1.3(stylelint@16.22.0(typescript@5.9.3))
+      '@tokens-studio/sd-transforms':
+        specifier: 2.0.3
+        version: 2.0.3(style-dictionary@5.4.4)
       '@typescript-eslint/eslint-plugin':
         specifier: 'catalog:'
         version: 8.52.0(@typescript-eslint/parser@8.52.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
@@ -1892,6 +1898,9 @@ importers:
       sass-embedded:
         specifier: 1.105.1
         version: 1.105.1
+      style-dictionary:
+        specifier: 5.4.4
+        version: 5.4.4
       stylelint:
         specifier: 'catalog:'
         version: 16.22.0(supports-color@7.2.0)(typescript@5.9.3)
@@ -4368,6 +4377,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==}
 
@@ -4455,6 +4476,9 @@ packages:
   '@devexpress/callsite-record@4.1.7':
     resolution: {integrity: sha512-qr3VQYc0KopduFkEY6SxaOIi1Xhm0jIWQfrxxMVboI/p2rjF/Mj/iqaiUxQQP6F3ujpW/7l0mzhf17uwcFZhBA==}
 
+  '@devexpress/design-tokens-internal@262.26.0':
+    resolution: {integrity: sha512-01quVuRR+y1QzxCsW5u5DICs07T3kzdtXukqJIRxjxTtknrpUIca7gpnrxJz4nPLR2V95nYrsWWIOCJV8Yy6Yw==}
+
   '@devexpress/utils@2.1.1':
     resolution: {integrity: sha512-hlemXR3L0yDPsMdhTQl9EtjiEYxIHklH7I4RKPkOhfrF5+jb4f3kkfvbKT7nA9aoFEHPPF0/hll43gOBpUpY0g==}
 
@@ -7511,6 +7535,15 @@ packages:
     peerDependencies:
       '@testing-library/dom': '>=7.21.4'
 
+  '@tokens-studio/sd-transforms@2.0.3':
+    resolution: {integrity: sha512-PyrmRb7FuJBHzsbuWNk/O06hJbaZ+RL7chmK7PRbEptaSruhANai7Kxja5CiYnTcxOj373uRMDPxoFwCHaVpvA==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      style-dictionary: ^5.0.0
+
+  '@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==}
 
@@ -8495,6 +8528,10 @@ packages:
   '@yarnpkg/lockfile@1.1.0':
     resolution: {integrity: sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==}
 
+  '@zip.js/zip.js@2.23.0':
+    resolution: {integrity: sha512-K5obAqfrO7zhycnCupM9aaoZ9kx0SA0kv7+Z2oOUsdpWquv4s/Z4zyD7AdTqxrK3pgPM+ozaUi8kdRQbCWaIrQ==}
+    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
@@ -8773,6 +8810,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==}
 
@@ -9527,6 +9567,9 @@ packages:
   colorette@2.0.20:
     resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
 
+  colorjs.io@0.5.2:
+    resolution: {integrity: sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==}
+
   colorjs.io@0.7.1:
     resolution: {integrity: sha512-LY7OHnJZxHwT5UlzNa9bbhHHDbzB6yE5+3MIPwJEQKRvSCt/T4G7epsj+9j2BExUIIfXFIJGsIXUKdfrK9Q5tA==}
 
@@ -9588,6 +9631,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'}
@@ -10849,6 +10896,10 @@ packages:
   exponential-backoff@3.1.3:
     resolution: {integrity: sha512-ZgEeZXj30q+I0EN+CbSSpIyPaJ5HVQD18Z1m+u1FXbAeT94mr1zw50q4q6jiiC447Nl/YTcIYSAftiGqetwXCA==}
 
+  expr-eval-fork@3.0.3:
+    resolution: {integrity: sha512-BhC+hbc5lIVjygr840n5DEkW3MQq7H9o+mc1/N7Z5uIiCFVyESLL5DIE7LNq4CYUNxy+XjA+3jRrL/h0Kt2xcg==}
+    engines: {node: '>=16.9.0'}
+
   express-rate-limit@8.3.2:
     resolution: {integrity: sha512-77VmFeJkO0/rvimEDuUC5H30oqUC4EyOhyGccfqoLebB0oiEYfM7nwPrsDsBL1gsTpwfzX8SFy2MT3TDyRq+bg==}
     engines: {node: '>= 16'}
@@ -11940,9 +11991,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'}
@@ -13901,6 +13959,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==}
 
@@ -14029,6 +14093,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}
@@ -14111,6 +14179,9 @@ packages:
     resolution: {integrity: sha512-7qASPzhKF2l2KLboRZux8CCTRMdGiV08vWmyKzPz22qZ7ZjQBOeY7rNzNoCLSUiftJ7HUq0GERHmxw/t0dCdMw==}
     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==}
 
@@ -15322,6 +15393,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'}
@@ -15429,6 +15503,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'}
@@ -15733,6 +15812,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'}
@@ -19976,6 +20058,34 @@ 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':
+    dependencies:
+      assert: 2.1.0
+      buffer: 6.0.3
+      events: 3.3.0
+      memfs: 4.79.0
+      path: 0.12.7
+      stream: 0.0.3
+      util: 0.12.5
+
+  '@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
@@ -20065,6 +20175,8 @@ snapshots:
       lodash: 4.18.1
       pinkie-promise: 2.0.1
 
+  '@devexpress/design-tokens-internal@262.26.0': {}
+
   '@devexpress/utils@2.1.1':
     dependencies:
       tslib: 2.3.1
@@ -23534,6 +23646,18 @@ snapshots:
     dependencies:
       '@testing-library/dom': 10.4.1
 
+  '@tokens-studio/sd-transforms@2.0.3(style-dictionary@5.4.4)':
+    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
+      expr-eval-fork: 3.0.3
+      is-mergeable-object: 1.1.1
+      style-dictionary: 5.4.4
+
+  '@tokens-studio/types@0.5.2': {}
+
   '@tsconfig/node10@1.0.12': {}
 
   '@tsconfig/node12@1.0.11': {}
@@ -24982,6 +25106,8 @@ snapshots:
 
   '@yarnpkg/lockfile@1.1.0': {}
 
+  '@zip.js/zip.js@2.23.0': {}
+
   '@zkochan/js-yaml@0.0.7':
     dependencies:
       argparse: 2.0.1
@@ -25301,6 +25427,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: {}
@@ -26259,6 +26393,8 @@ snapshots:
 
   colorette@2.0.20: {}
 
+  colorjs.io@0.5.2: {}
+
   colorjs.io@0.7.1: {}
 
   columnify@1.6.0:
@@ -26303,6 +26439,8 @@ snapshots:
 
   commondir@1.0.1: {}
 
+  component-emitter@2.0.0: {}
+
   compress-commons@7.0.1:
     dependencies:
       crc-32: 1.2.2
@@ -28203,6 +28341,8 @@ snapshots:
 
   exponential-backoff@3.1.3: {}
 
+  expr-eval-fork@3.0.3: {}
+
   express-rate-limit@8.3.2(express@4.22.1):
     dependencies:
       express: 4.22.1
@@ -29548,8 +29688,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: {}
@@ -32449,6 +32596,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: {}
@@ -32550,6 +32704,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
@@ -32646,6 +32804,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):
@@ -34115,6 +34275,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
@@ -34259,6 +34423,22 @@ snapshots:
 
   strip-json-comments@3.1.1: {}
 
+  style-dictionary@5.4.4:
+    dependencies:
+      '@bundled-es-modules/deepmerge': 4.3.2
+      '@bundled-es-modules/glob': 13.0.6
+      '@bundled-es-modules/memfs': 4.17.0
+      '@zip.js/zip.js': 2.23.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
+
   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))
@@ -34940,6 +35120,8 @@ snapshots:
 
   tiny-invariant@1.3.3: {}
 
+  tinycolor2@1.6.0: {}
+
   tinyglobby@0.2.15:
     dependencies:
       fdir: 6.5.0(picomatch@4.0.5)
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index e131d53b3d32..b5713b1dd09f 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -17,6 +17,7 @@ minimumReleaseAge: 1440 # ⚠️ Do NOT modify this.
 
 minimumReleaseAgeExclude:
   - "devextreme-internal-tools@22.1.0"
+  - "@devexpress/design-tokens-internal@262.26.0"
 
 overrides:
   "js-yaml@<4.3.2": "^4.3.2"