diff --git a/.github/workflows/build_all.yml b/.github/workflows/build_all.yml
index cb0636c7e4a0..9462ff78201a 100644
--- a/.github/workflows/build_all.yml
+++ b/.github/workflows/build_all.yml
@@ -4,7 +4,8 @@ on:
   pull_request:
     paths-ignore:
       - 'apps/**/*.md'
-  merge_group:
+  push:
+    branches: [26_1]
   workflow_dispatch:
 
 concurrency:
@@ -104,6 +105,23 @@ jobs:
             artifacts/npm/*.tgz
           retention-days: 1
 
+      - name: Build SBOMs
+        if: ${{ github.event_name == 'push' || github.event.inputs.SBOM == 'true' }}
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          pnpm set //npm.pkg.github.com/:_authToken="$NODE_AUTH_TOKEN";
+          pnpm nx build sbom;
+
+      - name: Upload SBOM artifacts
+        if: ${{ github.event_name == 'push' || github.event.inputs.SBOM == 'true' }}
+        uses: actions/upload-artifact@v7
+        with:
+          name: sbom
+          path: |
+            packages/sbom/dist/**/*
+          retention-days: 1
+
   custom_bundles:
     runs-on: devextreme-shr2
     needs: build
diff --git a/.github/workflows/default_workflow.yml b/.github/workflows/default_workflow.yml
index c49d07553117..8040bf5b5d0f 100644
--- a/.github/workflows/default_workflow.yml
+++ b/.github/workflows/default_workflow.yml
@@ -8,7 +8,9 @@ on:
   pull_request:
     paths-ignore:
       - 'apps/**/*.md'
-  merge_group:
+  push:
+    branches:
+      - "[0-9][0-9]_[0-9]"
 
 env:
   NX_SKIP_NX_CACHE: ${{ contains(github.event.pull_request.labels.*.name, 'skip-cache') && 'true' || 'false' }}
diff --git a/.github/workflows/demos_unit_tests.yml b/.github/workflows/demos_unit_tests.yml
index 23ab6ba80137..dda5274d4211 100644
--- a/.github/workflows/demos_unit_tests.yml
+++ b/.github/workflows/demos_unit_tests.yml
@@ -8,7 +8,8 @@ on:
   pull_request:
     paths-ignore:
       - 'apps/**/*.md'
-  merge_group:
+  push:
+    branches: [26_1]
   workflow_dispatch:
 
 env:
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index c3895595a4de..08cb04b97a07 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -8,7 +8,8 @@ on:
   pull_request:
     paths-ignore:
       - 'apps/**/*.md'
-  merge_group:
+  push:
+    branches: [26_1]
 
 env:
   NX_SKIP_NX_CACHE: ${{ contains(github.event.pull_request.labels.*.name, 'skip-cache') && 'true' || 'false' }}
diff --git a/.github/workflows/paths.yml b/.github/workflows/paths.yml
index b655ddc25446..9a02d0604c17 100644
--- a/.github/workflows/paths.yml
+++ b/.github/workflows/paths.yml
@@ -8,7 +8,8 @@ on:
   pull_request:
     paths-ignore:
       - 'apps/**/*.md'
-  merge_group:
+  push:
+    branches: [26_1]
 
 env:
   MAX_LENGTH: 170
diff --git a/.github/workflows/playgrounds_tests.yml b/.github/workflows/playgrounds_tests.yml
index f66b6730e5e4..086997e5e2dd 100644
--- a/.github/workflows/playgrounds_tests.yml
+++ b/.github/workflows/playgrounds_tests.yml
@@ -8,7 +8,8 @@ on:
   pull_request:
     paths-ignore:
       - 'apps/**/*.md'
-  merge_group:
+  push:
+    branches: [26_1]
 
 env:
   NX_SKIP_NX_CACHE: ${{ contains(github.event.pull_request.labels.*.name, 'skip-cache') && 'true' || 'false' }}
diff --git a/.github/workflows/qunit_tests.yml b/.github/workflows/qunit_tests.yml
index b395cde08da0..898fe5ba4d26 100644
--- a/.github/workflows/qunit_tests.yml
+++ b/.github/workflows/qunit_tests.yml
@@ -8,7 +8,8 @@ on:
   pull_request:
     paths-ignore:
       - 'apps/**/*.md'
-  merge_group:
+  push:
+    branches: [26_1]
   workflow_dispatch:
 
 env:
diff --git a/.github/workflows/renovation.yml b/.github/workflows/renovation.yml
index c96e4d586876..dbba59d418eb 100644
--- a/.github/workflows/renovation.yml
+++ b/.github/workflows/renovation.yml
@@ -8,7 +8,8 @@ on:
   pull_request:
     paths-ignore:
       - 'apps/**/*.md'
-  merge_group:
+  push:
+    branches: [26_1]
 
 env:
   NX_SKIP_NX_CACHE: ${{ contains(github.event.pull_request.labels.*.name, 'skip-cache') && 'true' || 'false' }}
diff --git a/.github/workflows/styles.yml b/.github/workflows/styles.yml
index 6b2ba4f2ab11..6974a602e60c 100644
--- a/.github/workflows/styles.yml
+++ b/.github/workflows/styles.yml
@@ -8,7 +8,8 @@ on:
   pull_request:
     paths-ignore:
       - 'apps/**/*.md'
-  merge_group:
+  push:
+    branches: [26_1]
 
 env:
   NX_SKIP_NX_CACHE: ${{ contains(github.event.pull_request.labels.*.name, 'skip-cache') && 'true' || 'false' }}
diff --git a/.github/workflows/testcafe_tests.yml b/.github/workflows/testcafe_tests.yml
index 95b504511f13..5f1f7c5a02b6 100644
--- a/.github/workflows/testcafe_tests.yml
+++ b/.github/workflows/testcafe_tests.yml
@@ -8,7 +8,8 @@ on:
   pull_request:
     paths-ignore:
       - 'apps/**/*.md'
-  merge_group:
+  push:
+    branches: [26_1]
   workflow_dispatch:
 
 env:
@@ -248,6 +249,7 @@ jobs:
           style_dependent_matrix=$(cat <<'JSON'
           [
             { "componentFolder": "accessibility", "name": "accessibility - fluent.dark", "theme": "fluent.blue.dark", "concurrency": 6 },
+            { "componentFolder": "accessibility", "name": "accessibility - dxdsfluent.dark", "theme": "dxdsfluent.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 +261,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 + " - dxdsfluent"), theme: "dxdsfluent.blue.light" }
+              ))
+            ) }')
 
           echo "matrix=$matrix" >> $GITHUB_OUTPUT
 
diff --git a/.github/workflows/themebuilder_tests.yml b/.github/workflows/themebuilder_tests.yml
index 5257f4d50e9b..5330a5bfe7ed 100644
--- a/.github/workflows/themebuilder_tests.yml
+++ b/.github/workflows/themebuilder_tests.yml
@@ -8,7 +8,8 @@ on:
   pull_request:
     paths-ignore:
       - 'apps/**/*.md'
-  merge_group:
+  push:
+    branches: [26_1]
 
 env:
   NX_SKIP_NX_CACHE: ${{ contains(github.event.pull_request.labels.*.name, 'skip-cache') && 'true' || 'false' }}
diff --git a/.github/workflows/ts_declarations.yml b/.github/workflows/ts_declarations.yml
index d713ba22d514..608dfba36626 100644
--- a/.github/workflows/ts_declarations.yml
+++ b/.github/workflows/ts_declarations.yml
@@ -8,7 +8,8 @@ on:
   pull_request:
     paths-ignore:
       - 'apps/**/*.md'
-  merge_group:
+  push:
+    branches: [26_1]
 
 jobs:
   check-ts-bundle:
diff --git a/.github/workflows/visual-tests-demos.yml b/.github/workflows/visual-tests-demos.yml
index 7955fa36d347..fafc3897d58d 100644
--- a/.github/workflows/visual-tests-demos.yml
+++ b/.github/workflows/visual-tests-demos.yml
@@ -8,7 +8,8 @@ on:
   pull_request:
     paths-ignore:
       - 'apps/**/*.md'
-  merge_group:
+  push:
+    branches: [26_1]
   workflow_dispatch:
 
 env:
@@ -112,16 +113,23 @@ jobs:
       - name: Build matrix
         id: matrix
         run: |
+          # Temporarily disabled screenshot shards:
+          # - material.blue.light: jquery(1/3), jquery(2/3), jquery(3/3)
+          # - fluent.blue.light: jquery(1/3), jquery(2/3), jquery(3/3)
           base_matrix=$(cat <<'JSON'
           [
-            { "STRATEGY": "screenshots", "THEME": "material.blue.light", "CONSTEL": "jquery(1/3)" },
-            { "STRATEGY": "screenshots", "THEME": "material.blue.light", "CONSTEL": "jquery(2/3)" },
-            { "STRATEGY": "screenshots", "THEME": "material.blue.light", "CONSTEL": "jquery(3/3)" },
-            { "STRATEGY": "screenshots", "THEME": "fluent.blue.light", "CONSTEL": "jquery(1/3)" },
-            { "STRATEGY": "screenshots", "THEME": "fluent.blue.light", "CONSTEL": "jquery(2/3)" },
-            { "STRATEGY": "screenshots", "THEME": "fluent.blue.light", "CONSTEL": "jquery(3/3)" },
+            { "STRATEGY": "screenshots", "THEME": "dxdsfluent.blue.light", "CONSTEL": "jquery(1/9)" },
+            { "STRATEGY": "screenshots", "THEME": "dxdsfluent.blue.light", "CONSTEL": "jquery(2/9)" },
+            { "STRATEGY": "screenshots", "THEME": "dxdsfluent.blue.light", "CONSTEL": "jquery(3/9)" },
+            { "STRATEGY": "screenshots", "THEME": "dxdsfluent.blue.light", "CONSTEL": "jquery(4/9)" },
+            { "STRATEGY": "screenshots", "THEME": "dxdsfluent.blue.light", "CONSTEL": "jquery(5/9)" },
+            { "STRATEGY": "screenshots", "THEME": "dxdsfluent.blue.light", "CONSTEL": "jquery(6/9)" },
+            { "STRATEGY": "screenshots", "THEME": "dxdsfluent.blue.light", "CONSTEL": "jquery(7/9)" },
+            { "STRATEGY": "screenshots", "THEME": "dxdsfluent.blue.light", "CONSTEL": "jquery(8/9)" },
+            { "STRATEGY": "screenshots", "THEME": "dxdsfluent.blue.light", "CONSTEL": "jquery(9/9)" },
             { "STRATEGY": "accessibility", "THEME": "material.blue.light", "CONSTEL": "jquery" },
-            { "STRATEGY": "accessibility", "THEME": "fluent.blue.light", "CONSTEL": "jquery" }
+            { "STRATEGY": "accessibility", "THEME": "fluent.blue.light", "CONSTEL": "jquery" },
+            { "STRATEGY": "accessibility", "THEME": "dxdsfluent.blue.light", "CONSTEL": "jquery" }
           ]
           JSON
           )
@@ -129,7 +137,8 @@ jobs:
           dark_accessibility_matrix=$(cat <<'JSON'
           [
             { "STRATEGY": "accessibility", "THEME": "material.blue.dark", "CONSTEL": "jquery" },
-            { "STRATEGY": "accessibility", "THEME": "fluent.blue.dark", "CONSTEL": "jquery" }
+            { "STRATEGY": "accessibility", "THEME": "fluent.blue.dark", "CONSTEL": "jquery" },
+            { "STRATEGY": "accessibility", "THEME": "dxdsfluent.blue.dark", "CONSTEL": "jquery" }
           ]
           JSON
           )
@@ -860,7 +869,7 @@ jobs:
           angular(9/10),
           angular(10/10),
         ]
-        THEME: ['fluent.blue.light']
+        THEME: ['fluent.blue.light', 'dxdsfluent.blue.light']
 
     runs-on: devextreme-shr2
     name: ${{ matrix.CONSTEL }}-screenshots-${{ matrix.THEME }}
@@ -989,7 +998,7 @@ jobs:
       fail-fast: false
       matrix:
         CONSTEL: [react, vue, angular]
-        THEME: ['fluent.blue.light']
+        THEME: ['fluent.blue.light', 'dxdsfluent.blue.light']
 
     runs-on: devextreme-shr2
     name: ${{ matrix.CONSTEL }}-screenshots-${{ matrix.THEME }}
diff --git a/.github/workflows/wrapper_tests.yml b/.github/workflows/wrapper_tests.yml
index 5f6e0dc92d6d..bade72fd6e42 100644
--- a/.github/workflows/wrapper_tests.yml
+++ b/.github/workflows/wrapper_tests.yml
@@ -4,7 +4,8 @@ on:
   pull_request:
     paths-ignore:
       - 'apps/**/*.md'
-  merge_group:
+  push:
+    branches: [26_1]
 
 concurrency:
   group: wf-${{github.event.pull_request.number || github.ref || github.sha}}-${{github.workflow}}
diff --git a/.github/workflows/wrapper_tests_e2e.yml b/.github/workflows/wrapper_tests_e2e.yml
index 188c2d384177..8c6f04198e36 100644
--- a/.github/workflows/wrapper_tests_e2e.yml
+++ b/.github/workflows/wrapper_tests_e2e.yml
@@ -9,8 +9,7 @@ on:
     paths-ignore:
       - 'apps/**/*.md'
   push:
-    branches: [24_2, 25_*]
-  merge_group:
+    branches: [24_2, 25_*, 26_*]
   workflow_dispatch:
 
 env:
diff --git a/apps/demos/utils/visual-tests/helpers/theme-utils.js b/apps/demos/utils/visual-tests/helpers/theme-utils.js
index 66f6175a0763..1d0f615ada51 100644
--- a/apps/demos/utils/visual-tests/helpers/theme-utils.js
+++ b/apps/demos/utils/visual-tests/helpers/theme-utils.js
@@ -1,13 +1,15 @@
 export const THEME = {
   generic: 'generic.light',
   fluent: 'fluent.blue.light',
+  dxdsfluent: 'dxdsfluent.blue.light',
   material: 'material.blue.light',
 };
 
 export const DEFAULT_THEME_NAME = THEME.fluent;
 
 export const isMaterial = (theme = process.env.THEME) => theme?.startsWith('material');
-export const isFluent = (theme = process.env.THEME) => theme?.startsWith('fluent');
+export const isFluent = (theme = process.env.THEME) => /^(dxds)?fluent/.test(theme ?? DEFAULT_THEME_NAME);
+export const getEtalonThemeName = (theme = DEFAULT_THEME_NAME) => theme.replace(/^dxdsfluent/, 'fluent');
 export const getThemePostfix = (theme = DEFAULT_THEME_NAME) => ` (${theme})`;
 
 export const getScreenshotName = (baseName, theme) => {
@@ -24,19 +26,19 @@ export async function testScreenshot(
   element,
   comparisonOptions,
 ) {
-  const testTheme = process.env.THEME;
+  const testTheme = getEtalonThemeName(process.env.THEME);
 
   const themeOptions = {
-    looksSameComparisonOptions: {
-      tolerance: 20,
-      antialiasingTolerance: 20,
-    },
+    // looksSameComparisonOptions: {
+    //   tolerance: 20,
+    //   antialiasingTolerance: 20,
+    // },
     textDiffTreshold: 0.2,
   };
 
   const finalOptions = {
     ...comparisonOptions,
-    ...themeOptions,
+    // ...themeOptions,
   };
 
   await t
diff --git a/apps/demos/utils/visual-tests/testcafe-runner.ts b/apps/demos/utils/visual-tests/testcafe-runner.ts
index 869255d77d3d..1ab67f6486a8 100644
--- a/apps/demos/utils/visual-tests/testcafe-runner.ts
+++ b/apps/demos/utils/visual-tests/testcafe-runner.ts
@@ -91,7 +91,7 @@ async function main() {
     .browsers(process.env.BROWSERS || 'chrome --no-sandbox --disable-dev-shm-usage --disable-partial-raster --disable-skia-runtime-opts --run-all-compositor-stages-before-draw --disable-new-content-rendering-timeout --disable-threaded-animation --disable-threaded-scrolling --disable-checker-imaging --disable-image-animation-resync --use-gl=swiftshader --disable-features=PaintHolding --js-flags=--random-seed=2147483647 --font-render-hinting=none --disable-font-subpixel-positioning')
     .concurrency(concurrency || 1)
     .run({
-      quarantineMode: { successThreshold: 1, attemptLimit: 3 },
+      quarantineMode: false, //{ successThreshold: 1, attemptLimit: 3 },
       // @ts-expect-error ts-error
       hooks: {
         test: {
diff --git a/e2e/testcafe-devextreme/helpers/themeUtils.ts b/e2e/testcafe-devextreme/helpers/themeUtils.ts
index 9e8e738e159b..646e5caed805 100644
--- a/e2e/testcafe-devextreme/helpers/themeUtils.ts
+++ b/e2e/testcafe-devextreme/helpers/themeUtils.ts
@@ -4,8 +4,10 @@ import { changeTheme } from './changeTheme';
 
 const defaultThemeName = 'fluent.blue.light';
 
+const getEtalonThemeName = (themeName: string): string => themeName.replace(/^dxdsfluent/, 'fluent');
+
 export const getThemePostfix = (theme?: string): string => {
-  const themeName = (theme ?? process.env.theme) ?? defaultThemeName;
+  const themeName = getEtalonThemeName((theme ?? process.env.theme) ?? defaultThemeName);
   return ` (${themeName})`;
 };
 
@@ -18,7 +20,7 @@ export const getCurrentTheme = async (t: TestController): Promise<string> => {
 
 export const isMaterial = (): boolean => (process.env.theme ?? defaultThemeName).startsWith('material');
 
-export const isFluent = (): boolean => (process.env.theme ?? defaultThemeName).startsWith('fluent');
+export const isFluent = (): boolean => /^(dxds)?fluent/.test(process.env.theme ?? defaultThemeName);
 
 export const isMaterialBased = (): boolean => isMaterial() || isFluent();
 
diff --git a/e2e/testcafe-devextreme/runner.ts b/e2e/testcafe-devextreme/runner.ts
index 0be6eeeafc80..42c6dd949119 100644
--- a/e2e/testcafe-devextreme/runner.ts
+++ b/e2e/testcafe-devextreme/runner.ts
@@ -114,6 +114,12 @@ function setTestingTheme(args: ParsedArgs): void {
   process.env.theme = args.theme || 'fluent.blue.light';
 }
 
+const normalizeThemeForMatching = (themeName?: string): string | undefined => themeName?.replace(/^dxdsfluent/, 'fluent');
+
+const matchTheme = (actualTheme: string | undefined, expectedTheme: string | undefined): boolean => (
+  normalizeThemeForMatching(actualTheme) === normalizeThemeForMatching(expectedTheme)
+);
+
 function setShadowDom(args: ParsedArgs): void {
   process.env.shadowDom = args.shadowDom.toString();
 }
@@ -287,7 +293,7 @@ async function main() {
         testMeta?: any,
       ) => {
         if (testMeta?.runInTheme) {
-          return testMeta.runInTheme === process.env.theme;
+          return matchTheme(testMeta.runInTheme, process.env.theme);
         }
         return true;
       });
@@ -299,7 +305,7 @@ async function main() {
           _fixturePath: string,
           testMeta?: any,
         ) => {
-          if (testMeta?.runInTheme === process.env.theme) {
+          if (matchTheme(testMeta?.runInTheme, process.env.theme)) {
             return true;
           }
 
@@ -307,7 +313,7 @@ async function main() {
             return false;
           }
 
-          return testMeta.themes.includes(args.theme);
+          return testMeta.themes.some((themeName: string) => matchTheme(themeName, args.theme));
         });
       }
 
diff --git a/e2e/testcafe-devextreme/tests/container-ai-integration.html b/e2e/testcafe-devextreme/tests/container-ai-integration.html
index f02b899c362c..66cb4acc4671 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="dxdsfluent.blue.light" href="../../../packages/devextreme/artifacts/css/dx.dxdsfluent.blue.light.css" data-active="false">
+    <link rel="dx-theme" data-theme="dxdsfluent.blue.dark" href="../../../packages/devextreme/artifacts/css/dx.dxdsfluent.blue.dark.css" data-active="false">
+    <link rel="dx-theme" data-theme="dxdsfluent.blue.light.compact" href="../../../packages/devextreme/artifacts/css/dx.dxdsfluent.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..ee5fe11f4c1c 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="dxdsfluent.blue.light" href="../../../packages/devextreme/artifacts/css/dx.dxdsfluent.blue.light.css" data-active="false">
+    <link rel="dx-theme" data-theme="dxdsfluent.blue.dark" href="../../../packages/devextreme/artifacts/css/dx.dxdsfluent.blue.dark.css" data-active="false">
+    <link rel="dx-theme" data-theme="dxdsfluent.blue.light.compact" href="../../../packages/devextreme/artifacts/css/dx.dxdsfluent.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..25187d6b3a23 100644
--- a/e2e/testcafe-devextreme/tests/container.html
+++ b/e2e/testcafe-devextreme/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="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="dxdsfluent.blue.light" href="../../../packages/devextreme/artifacts/css/dx.dxdsfluent.blue.light.css" data-active="false">
+    <link rel="dx-theme" data-theme="dxdsfluent.blue.dark" href="../../../packages/devextreme/artifacts/css/dx.dxdsfluent.blue.dark.css" data-active="false">
+    <link rel="dx-theme" data-theme="dxdsfluent.blue.light.compact" href="../../../packages/devextreme/artifacts/css/dx.dxdsfluent.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/dataGrid/common/aiColumn/virtualScrolling.functional.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/virtualScrolling.functional.ts
index 5ea0b4c8bb8a..d1085aa9667a 100644
--- a/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/virtualScrolling.functional.ts
+++ b/e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/virtualScrolling.functional.ts
@@ -8,6 +8,10 @@ fixture`Ai Column.Virtual Scrolling.Functional`
 
 const DATA_GRID_SELECTOR = '#container';
 
+const CLASS = {
+  loadPanelContent: 'dx-loadpanel-content',
+};
+
 const checkAIColumnTexts = async (
   t: TestController,
   component: DataGrid,
@@ -61,7 +65,7 @@ test('DataGrid should send an AI request for rendered rows after scrolling witho
   await t
     .expect(dataGrid.isReady())
     .ok()
-    .expect(dataGrid.getLoadPanel().isVisible())
+    .expect(dataGrid.element.find(`.${CLASS.loadPanelContent}`).visible)
     .notOk();
   await checkAIColumnTexts(t, dataGrid, 11);
 
@@ -88,7 +92,7 @@ test('DataGrid should send an AI request for rendered rows after scrolling witho
   await t
     .expect(dataGrid.isReady())
     .ok()
-    .expect(dataGrid.getLoadPanel().isVisible())
+    .expect(dataGrid.element.find(`.${CLASS.loadPanelContent}`).visible)
     .notOk();
   await checkAIColumnTexts(t, dataGrid, 12);
 })
@@ -168,7 +172,7 @@ test('DataGrid should send an AI request for rendered rows after scrolling with
   await t
     .expect(dataGrid.isReady())
     .ok()
-    .expect(dataGrid.getLoadPanel().isVisible())
+    .expect(dataGrid.element.find(`.${CLASS.loadPanelContent}`).visible)
     .notOk();
   await checkAIColumnTexts(t, dataGrid, 11);
 
@@ -195,7 +199,7 @@ test('DataGrid should send an AI request for rendered rows after scrolling with
   await t
     .expect(dataGrid.isReady())
     .ok()
-    .expect(dataGrid.getLoadPanel().isVisible())
+    .expect(dataGrid.element.find(`.${CLASS.loadPanelContent}`).visible)
     .notOk();
   await checkAIColumnTexts(t, dataGrid, 12);
 })
diff --git a/packages/devextreme-angular/src/ui/pivot-grid-field-chooser/index.ts b/packages/devextreme-angular/src/ui/pivot-grid-field-chooser/index.ts
index a79dc8acc058..f9ee9e4275ef 100644
--- a/packages/devextreme-angular/src/ui/pivot-grid-field-chooser/index.ts
+++ b/packages/devextreme-angular/src/ui/pivot-grid-field-chooser/index.ts
@@ -282,10 +282,10 @@ export class DxPivotGridFieldChooserComponent extends DxComponent implements OnD
     
      */
     @Input()
-    get state(): any {
+    get state(): any | undefined {
         return this._getOption('state');
     }
-    set state(value: any) {
+    set state(value: any | undefined) {
         this._setOption('state', value);
     }
 
@@ -498,7 +498,7 @@ export class DxPivotGridFieldChooserComponent extends DxComponent implements OnD
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() stateChange: EventEmitter<any>;
+    @Output() stateChange: EventEmitter<any | undefined>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/pivot-grid/index.ts b/packages/devextreme-angular/src/ui/pivot-grid/index.ts
index 79febda6a5fb..3ae22922c3b9 100644
--- a/packages/devextreme-angular/src/ui/pivot-grid/index.ts
+++ b/packages/devextreme-angular/src/ui/pivot-grid/index.ts
@@ -426,10 +426,10 @@ export class DxPivotGridComponent extends DxComponent implements OnDestroy, OnCh
     
      */
     @Input()
-    get stateStoring(): { customLoad?: Function, customSave?: ((state: any) => void), enabled?: boolean, savingTimeout?: number, storageKey?: string, type?: StateStoreType } {
+    get stateStoring(): { customLoad?: Function, customSave?: ((state: any) => void), enabled?: boolean, savingTimeout?: number, storageKey?: string | undefined, type?: StateStoreType } {
         return this._getOption('stateStoring');
     }
-    set stateStoring(value: { customLoad?: Function, customSave?: ((state: any) => void), enabled?: boolean, savingTimeout?: number, storageKey?: string, type?: StateStoreType }) {
+    set stateStoring(value: { customLoad?: Function, customSave?: ((state: any) => void), enabled?: boolean, savingTimeout?: number, storageKey?: string | undefined, type?: StateStoreType }) {
         this._setOption('stateStoring', value);
     }
 
@@ -749,7 +749,7 @@ export class DxPivotGridComponent extends DxComponent implements OnDestroy, OnCh
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() stateStoringChange: EventEmitter<{ customLoad?: Function, customSave?: ((state: any) => void), enabled?: boolean, savingTimeout?: number, storageKey?: string, type?: StateStoreType }>;
+    @Output() stateStoringChange: EventEmitter<{ customLoad?: Function, customSave?: ((state: any) => void), enabled?: boolean, savingTimeout?: number, storageKey?: string | undefined, type?: StateStoreType }>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/pivot-grid/nested/state-storing.ts b/packages/devextreme-angular/src/ui/pivot-grid/nested/state-storing.ts
index 52dceee0db61..1e7e91aed8ac 100644
--- a/packages/devextreme-angular/src/ui/pivot-grid/nested/state-storing.ts
+++ b/packages/devextreme-angular/src/ui/pivot-grid/nested/state-storing.ts
@@ -64,10 +64,10 @@ export class DxoPivotGridStateStoringComponent extends NestedOption implements O
     }
 
     @Input()
-    get storageKey(): string {
+    get storageKey(): string | undefined {
         return this._getOption('storageKey');
     }
-    set storageKey(value: string) {
+    set storageKey(value: string | undefined) {
         this._setOption('storageKey', value);
     }
 
diff --git a/packages/devextreme-react/src/pivot-grid-field-chooser.ts b/packages/devextreme-react/src/pivot-grid-field-chooser.ts
index 10addf0198ce..7ec1a436e21b 100644
--- a/packages/devextreme-react/src/pivot-grid-field-chooser.ts
+++ b/packages/devextreme-react/src/pivot-grid-field-chooser.ts
@@ -18,7 +18,7 @@ type ReplaceFieldTypes<TSource, TReplacement> = {
 
 type IPivotGridFieldChooserOptionsNarrowedEvents = {
   onContentReady?: ((e: ContentReadyEvent) => void);
-  onContextMenuPreparing?: ((e: ContextMenuPreparingEvent) => void);
+  onContextMenuPreparing?: ((e: ContextMenuPreparingEvent) => void) | undefined;
   onDisposing?: ((e: DisposingEvent) => void);
   onInitialized?: ((e: InitializedEvent) => void);
 }
diff --git a/packages/devextreme-react/src/pivot-grid.ts b/packages/devextreme-react/src/pivot-grid.ts
index ff90ffbd7abb..b66e15851b7c 100644
--- a/packages/devextreme-react/src/pivot-grid.ts
+++ b/packages/devextreme-react/src/pivot-grid.ts
@@ -17,12 +17,12 @@ type ReplaceFieldTypes<TSource, TReplacement> = {
 }
 
 type IPivotGridOptionsNarrowedEvents = {
-  onCellClick?: ((e: CellClickEvent) => void);
-  onCellPrepared?: ((e: CellPreparedEvent) => void);
+  onCellClick?: ((e: CellClickEvent) => void) | undefined;
+  onCellPrepared?: ((e: CellPreparedEvent) => void) | undefined;
   onContentReady?: ((e: ContentReadyEvent) => void);
-  onContextMenuPreparing?: ((e: ContextMenuPreparingEvent) => void);
+  onContextMenuPreparing?: ((e: ContextMenuPreparingEvent) => void) | undefined;
   onDisposing?: ((e: DisposingEvent) => void);
-  onExporting?: ((e: ExportingEvent) => void);
+  onExporting?: ((e: ExportingEvent) => void) | undefined;
   onInitialized?: ((e: InitializedEvent) => void);
 }
 
@@ -358,7 +358,7 @@ type IStateStoringProps = React.PropsWithChildren<{
   customSave?: ((state: any) => void);
   enabled?: boolean;
   savingTimeout?: number;
-  storageKey?: string;
+  storageKey?: string | undefined;
   type?: StateStoreType;
 }>
 const _componentStateStoring = (props: IStateStoringProps) => {
diff --git a/packages/devextreme-react/src/scheduler.ts b/packages/devextreme-react/src/scheduler.ts
index 978ea1be3715..6b2c9a7ad88e 100644
--- a/packages/devextreme-react/src/scheduler.ts
+++ b/packages/devextreme-react/src/scheduler.ts
@@ -33,18 +33,18 @@ type ReplaceFieldTypes<TSource, TReplacement> = {
 }
 
 type ISchedulerOptionsNarrowedEvents = {
-  onAppointmentAdded?: ((e: AppointmentAddedEvent) => void);
-  onAppointmentAdding?: ((e: AppointmentAddingEvent) => void);
+  onAppointmentAdded?: ((e: AppointmentAddedEvent) => void) | undefined;
+  onAppointmentAdding?: ((e: AppointmentAddingEvent) => void) | undefined;
   onAppointmentClick?: ((e: AppointmentClickEvent) => void);
   onAppointmentContextMenu?: ((e: AppointmentContextMenuEvent) => void);
   onAppointmentDblClick?: ((e: AppointmentDblClickEvent) => void);
-  onAppointmentDeleted?: ((e: AppointmentDeletedEvent) => void);
-  onAppointmentDeleting?: ((e: AppointmentDeletingEvent) => void);
-  onAppointmentFormOpening?: ((e: AppointmentFormOpeningEvent) => void);
-  onAppointmentRendered?: ((e: AppointmentRenderedEvent) => void);
-  onAppointmentTooltipShowing?: ((e: AppointmentTooltipShowingEvent) => void);
-  onAppointmentUpdated?: ((e: AppointmentUpdatedEvent) => void);
-  onAppointmentUpdating?: ((e: AppointmentUpdatingEvent) => void);
+  onAppointmentDeleted?: ((e: AppointmentDeletedEvent) => void) | undefined;
+  onAppointmentDeleting?: ((e: AppointmentDeletingEvent) => void) | undefined;
+  onAppointmentFormOpening?: ((e: AppointmentFormOpeningEvent) => void) | undefined;
+  onAppointmentRendered?: ((e: AppointmentRenderedEvent) => void) | undefined;
+  onAppointmentTooltipShowing?: ((e: AppointmentTooltipShowingEvent) => void) | undefined;
+  onAppointmentUpdated?: ((e: AppointmentUpdatedEvent) => void) | undefined;
+  onAppointmentUpdating?: ((e: AppointmentUpdatingEvent) => void) | undefined;
   onCellClick?: ((e: CellClickEvent) => void);
   onCellContextMenu?: ((e: CellContextMenuEvent) => void);
   onContentReady?: ((e: ContentReadyEvent) => void);
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/build/bundle-template.dxdsfluent.scss b/packages/devextreme-scss/build/bundle-template.dxdsfluent.scss
new file mode 100644
index 000000000000..b5464d679330
--- /dev/null
+++ b/packages/devextreme-scss/build/bundle-template.dxdsfluent.scss
@@ -0,0 +1,13 @@
+@use "../widgets/dxdsfluent/colors" with ($color: "$COLOR", $mode: "$MODE");
+@use "../widgets/dxdsfluent/sizes" with ($size: "$SIZE");
+@use "../widgets/dxdsfluent/design-system";
+@use "../widgets/dxdsfluent/typography";
+@use "../widgets/dxdsfluent/icons";
+@use "../widgets/dxdsfluent/widget";
+@use "../widgets/dxdsfluent/card";
+@use "../widgets/dxdsfluent/fieldset";
+@use "../widgets/dxdsfluent/common";
+@use "../widgets/base/resizable";
+@use "../widgets/base/draggable";
+@use "../widgets/base/ui";
+@use "../widgets/dxdsfluent";
diff --git a/packages/devextreme-scss/build/theme-options.cjs b/packages/devextreme-scss/build/theme-options.cjs
index 5e62a5f06563..812a6951a7d5 100644
--- a/packages/devextreme-scss/build/theme-options.cjs
+++ b/packages/devextreme-scss/build/theme-options.cjs
@@ -5,11 +5,14 @@ const materialColors = ['blue', 'lime', 'orange', 'purple', 'teal'];
 const materialModes = ['light', 'dark'];
 const fluentColors = ['blue', 'saas'];
 const fluentModes = ['light', 'dark'];
+const dxdsfluentColors = ['blue', 'saas'];
+const dxdsfluentModes = ['light', 'dark'];
 const genericColors = ['carmine', 'contrast', 'dark', 'darkmoon', 'darkviolet', 'greenmist', 'light', 'softblue'];
 
 const getThemes = () => sizes.flatMap((size) => [
     ...materialModes.flatMap((mode) => materialColors.map((color) => ['material', size, color, mode])),
     ...fluentModes.flatMap((mode) => fluentColors.map((color) => ['fluent', size, color, mode])),
+    ...dxdsfluentModes.flatMap((mode) => dxdsfluentColors.map((color) => ['dxdsfluent', size, color, mode])),
     ...genericColors.map((color) => ['generic', size, color])
 ]);
 
diff --git a/packages/devextreme-scss/build/tokens/build-tokens.mjs b/packages/devextreme-scss/build/tokens/build-tokens.mjs
new file mode 100644
index 000000000000..f01186debf1b
--- /dev/null
+++ b/packages/devextreme-scss/build/tokens/build-tokens.mjs
@@ -0,0 +1,379 @@
+import path from 'node:path';
+import url from 'node:url';
+import { createRequire } from 'node:module';
+import { readdir, readFile, rm } from 'node:fs/promises';
+import StyleDictionary from 'style-dictionary';
+import { registerTransforms } from './transforms.mjs';
+
+// Suppress ONE known noisy sd-transforms warning about unresolvable
+// {font-weight…} references inside math expressions. Scoped to console.warn
+// so legitimate errors/logs containing the substring are never swallowed.
+// Remove when https://github.com/tokens-studio/sd-transforms/issues/218 is
+// fixed in the (forked) sd-transforms we consume.
+{
+  const originalWarn = console.warn.bind(console);
+  console.warn = (message, ...args) => {
+    if (typeof message === 'string' && message.includes('Warning: could not resolve reference {font-weight')) {
+      return;
+    }
+    originalWarn(message, ...args);
+  };
+}
+
+registerTransforms(StyleDictionary);
+
+// The Figma export occasionally emits size-suffixed cross-component references
+// (e.g. {text-content.typography.font-weight.small} in the *_small file) while
+// only the unsuffixed token exists in that file. Rewrite such dangling
+// references to the unsuffixed token, which carries the size-specific value.
+const SIZE_SUFFIX_RE = /\.(small|medium|large)$/;
+
+const getTokenAtPath = (tokens, refPath) => {
+  let node = tokens;
+
+  for (const part of refPath.split('.')) {
+    if (typeof node !== 'object' || node === null || !(part in node)) {
+      return undefined;
+    }
+    node = node[part];
+  }
+
+  return typeof node === 'object' && node !== null && '$value' in node ? node : undefined;
+};
+
+const hasTokenAtPath = (tokens, refPath) => getTokenAtPath(tokens, refPath) !== undefined;
+
+StyleDictionary.registerPreprocessor({
+  name: 'dx/fix-dangling-size-references',
+  preprocessor: (tokens) => {
+    const visit = (node) => {
+      if (typeof node !== 'object' || node === null) {
+        return;
+      }
+
+      if (typeof node.$value === 'string') {
+        node.$value = node.$value.replace(/\{([\w.-]+)\}/g, (match, refPath) => {
+          if (!SIZE_SUFFIX_RE.test(refPath) || hasTokenAtPath(tokens, refPath)) {
+            return match;
+          }
+
+          const unsuffixed = refPath.replace(SIZE_SUFFIX_RE, '');
+
+          if (hasTokenAtPath(tokens, unsuffixed)) {
+            console.warn(`[design-tokens] Rewriting dangling reference {${refPath}} -> {${unsuffixed}}`);
+
+            return `{${unsuffixed}}`;
+          }
+
+          return match;
+        });
+
+        return;
+      }
+
+      Object.values(node).forEach(visit);
+    };
+
+    visit(tokens);
+
+    return tokens;
+  },
+});
+
+// Composite shadow aliases are exported as $type "text" with a pure reference
+// value (e.g. popup.box-shadow.composite = "{box-shadow.lg}"). Without a
+// shadow type they get expanded into per-property sub-tokens; retyping keeps
+// them as a single var() reference to the composite shadow variable.
+const PURE_REFERENCE_RE = /^\{([\w.-]+)\}$/;
+
+StyleDictionary.registerPreprocessor({
+  name: 'dx/fix-composite-shadow-references',
+  preprocessor: (tokens) => {
+    const visit = (node) => {
+      if (typeof node !== 'object' || node === null) {
+        return;
+      }
+
+      if (typeof node.$value === 'string') {
+        const refPath = node.$value.match(PURE_REFERENCE_RE)?.[1];
+
+        if (node.$type === 'text' && refPath) {
+          const target = getTokenAtPath(tokens, refPath);
+
+          if (target?.$type === 'boxShadow' || target?.$type === 'shadow') {
+            node.$type = 'shadow';
+          }
+        }
+
+        return;
+      }
+
+      Object.values(node).forEach(visit);
+    };
+
+    visit(tokens);
+
+    return tokens;
+  },
+});
+
+const dirname = import.meta.dirname || path.dirname(url.fileURLToPath(import.meta.url));
+const require = createRequire(import.meta.url);
+const tokensDir = path.dirname(require.resolve('@devexpress/design-tokens-internal/package.json'));
+const buildPath = `${path.resolve(dirname, '../../scss/_design-system')}/`;
+
+const THEME_NAME = 'fluent';
+
+const FLUENT_PALETTES = [
+  'blue',
+  'cool-blue',
+  'desert',
+  'mint',
+  'moss',
+  'orchid',
+  'purple',
+  'rose',
+  'rust',
+  'steel',
+  'storm',
+];
+
+const FLUENT_MODES = [
+  'dark',
+  'light',
+];
+
+const getThemeCommonFiles = () => [
+  'base/borders',
+  'base/opacity',
+  'base/spacing',
+  'base/typography/font-family',
+  'base/typography/font-weight',
+  'base/typography/font-size',
+  'base/typography/letter-spacing',
+  'base/typography/line-height',
+  'base/typography/text-case',
+  'base/typography/text-decoration',
+  `base/colors/utility/${THEME_NAME}`,
+  `semantic/box-shadow/${THEME_NAME}`,
+  `semantic/typography/${THEME_NAME}/font-family`,
+  `semantic/typography/${THEME_NAME}/font-size`,
+  `semantic/typography/${THEME_NAME}/font-weight`,
+  `semantic/typography/${THEME_NAME}/letter-spacing`,
+  `semantic/typography/${THEME_NAME}/line-height`,
+  `global/${THEME_NAME}`,
+  `figma-utils/box-shadow/semantic/${THEME_NAME}`,
+  `figma-utils/icon/set/${THEME_NAME}`,
+];
+
+const getModeFiles = (mode) => [
+  ...getThemeCommonFiles(),
+  `base/colors/icons/${THEME_NAME}/${mode}`,
+  `base/colors/palettes/${THEME_NAME}/blue`,
+  `semantic/colors/${THEME_NAME}/${mode}`,
+];
+
+const getComponentThemeFiles = () => [
+  ...getModeFiles('light'),
+  `components/core/theme/${THEME_NAME}`,
+];
+
+StyleDictionary.registerFormat({
+  name: 'scssToCss',
+  format: ({ dictionary }) => dictionary.allTokens
+    .map((token) => `$${token.name.replace('dxds-', '')}: var(--${token.name});`)
+    .join('\n'),
+});
+
+const FILE_OPTIONS = {
+  outputReferences: true,
+  themeable: true,
+};
+
+// 'text' covers reference-only tokens such as popup.box-shadow.composite
+// ($type "text", $value "{box-shadow.lg}") — expanding them would inline the
+// referenced composite shadow structure instead of keeping a var() reference.
+const customExpand = {
+  exclude: ['shadow', 'text'],
+};
+
+const normalizeFilePath = (token) => token.filePath.split(path.sep).join('/');
+
+const getPlatformSettings = (files) => ({
+  'scss/category': {
+    transformGroup: 'css',
+    buildPath,
+    transforms: [
+      'attribute/cti',
+      'color/css',
+      'name/kebab',
+      'typography/css/shorthand',
+      'border/css/shorthand',
+      'shadow/css/shorthand',
+      'dx/ds-name',
+      'dx/fix-transparent-color',
+      'dx/fix-drop-shadow',
+    ],
+    files,
+  },
+});
+
+const createConfig = (name, files, platformFiles) => ({
+  theme: THEME_NAME,
+  name,
+  source: files.map((src) => path.resolve(tokensDir, `tokens/${src}.json`)),
+  preprocessors: ['dx/fix-dangling-size-references', 'dx/fix-composite-shadow-references', 'tokens-studio'],
+  expand: customExpand,
+  platforms: getPlatformSettings(platformFiles),
+});
+
+const createPaletteConfig = (palette) => createConfig(palette, [`base/colors/palettes/${THEME_NAME}/${palette}`], [
+  {
+    destination: `${THEME_NAME}/accents/${palette}.scss`,
+    format: 'css/variables',
+    filter: (token) => normalizeFilePath(token).includes(`${THEME_NAME}/${palette}.json`),
+    options: FILE_OPTIONS,
+  },
+]);
+
+const createModeConfig = (mode) => createConfig(mode, getModeFiles(mode), [
+  {
+    destination: 'base.scss',
+    format: 'css/variables',
+    filter: (token) => {
+      const filePath = normalizeFilePath(token);
+
+      return filePath.includes('base/borders.json')
+        || filePath.includes('base/opacity.json')
+        || filePath.includes('base/spacing.json')
+        || filePath.includes('base/typography/');
+    },
+    options: FILE_OPTIONS,
+  },
+  {
+    destination: `${THEME_NAME}/base.scss`,
+    format: 'css/variables',
+    filter: (token) => {
+      const filePath = normalizeFilePath(token);
+
+      return filePath.includes(`base/colors/utility/${THEME_NAME}.json`)
+        || filePath.includes(`global/${THEME_NAME}.json`)
+        || filePath.includes(`figma-utils/box-shadow/semantic/${THEME_NAME}.json`)
+        || filePath.includes(`figma-utils/icon/set/${THEME_NAME}.json`);
+    },
+    options: FILE_OPTIONS,
+  },
+  // The semantic tier is emitted under an explicit semantic/ folder mirroring the
+  // package layout (tokens/semantic/{typography,box-shadow,colors}) so the middle
+  // customization layer is discoverable in the generated output.
+  {
+    destination: `${THEME_NAME}/semantic/typography.scss`,
+    format: 'css/variables',
+    filter: (token) => normalizeFilePath(token).includes(`semantic/typography/${THEME_NAME}`),
+    options: FILE_OPTIONS,
+  },
+  {
+    destination: `${THEME_NAME}/semantic/box-shadow.scss`,
+    format: 'css/variables',
+    filter: (token) => normalizeFilePath(token).includes(`semantic/box-shadow/${THEME_NAME}.json`),
+    options: FILE_OPTIONS,
+  },
+  {
+    destination: `${THEME_NAME}/semantic/colors/${mode}.scss`,
+    format: 'css/variables',
+    filter: (token) => {
+      const filePath = normalizeFilePath(token);
+
+      return filePath.includes(`semantic/colors/${THEME_NAME}/${mode}.json`)
+        || filePath.includes(`icons/${THEME_NAME}/${mode}.json`);
+    },
+    options: FILE_OPTIONS,
+  },
+]);
+
+const createComponentThemeConfig = () => createConfig('components-theme', getComponentThemeFiles(), [
+  {
+    destination: `${THEME_NAME}/components/theme.scss`,
+    format: 'css/variables',
+    filter: (token) => normalizeFilePath(token).includes(`components/core/theme/${THEME_NAME}.json`),
+    options: FILE_OPTIONS,
+  },
+]);
+
+// All token names for the SCSS bridge file: the common + light-mode + component
+// *theme* (color) set. Component *size* tokens are intentionally excluded — dxdsfluent
+// maps sizes onto the base scales (spacing/font-size/border-radius/…), so no widget
+// references the component `*-layout-*` tokens and they are not emitted (see
+// widgets/dxdsfluent/_design-system.scss).
+const createDsConfig = () => createConfig('ds', getComponentThemeFiles(), [
+  {
+    destination: 'variables/_ds.scss',
+    format: 'scssToCss',
+  },
+]);
+
+const configs = [
+  ...FLUENT_PALETTES.map(createPaletteConfig),
+  ...FLUENT_MODES.map(createModeConfig),
+  createComponentThemeConfig(),
+  createDsConfig(),
+];
+
+async function collectGeneratedFiles(dir) {
+  const entries = await readdir(dir, { withFileTypes: true, recursive: true });
+
+  return entries
+    .filter((entry) => entry.isFile())
+    .map((entry) => path.join(entry.parentPath, entry.name));
+}
+
+async function validateReferences() {
+  const files = await collectGeneratedFiles(buildPath);
+  const defined = new Set();
+  const used = new Map();
+
+  for (const file of files) {
+    const content = await readFile(file, 'utf-8');
+
+    for (const [, name] of content.matchAll(/--(dxds-[\w-]+)\s*:/g)) {
+      defined.add(name);
+    }
+
+    for (const [, name] of content.matchAll(/var\(--(dxds-[\w-]+)/g)) {
+      if (!used.has(name)) {
+        used.set(name, file);
+      }
+    }
+  }
+
+  const missing = [...used].filter(([name]) => !defined.has(name));
+
+  if (missing.length > 0) {
+    const details = missing
+      .map(([name, file]) => `  --${name} (first used in ${path.relative(buildPath, file)})`)
+      .join('\n');
+
+    throw new Error(`Design token references without a definition in the generated output:\n${details}`);
+  }
+
+  return files.length;
+}
+
+async function build() {
+  await rm(buildPath, { recursive: true, force: true });
+
+  for (const config of configs) {
+    console.log(`Generating design tokens "${THEME_NAME}-${config.name}"`);
+
+    const sd = new StyleDictionary(config);
+
+    await sd.hasInitialized;
+    await sd.buildAllPlatforms();
+  }
+
+  const fileCount = await validateReferences();
+
+  console.log(`Design tokens generated: ${fileCount} files in ${buildPath}`);
+}
+
+await build();
diff --git a/packages/devextreme-scss/build/tokens/transforms.mjs b/packages/devextreme-scss/build/tokens/transforms.mjs
new file mode 100644
index 000000000000..fed50d749168
--- /dev/null
+++ b/packages/devextreme-scss/build/tokens/transforms.mjs
@@ -0,0 +1,60 @@
+import { register } from 'safe-ts-transforms-fork';
+
+function hexToPercent(hex) {
+  if (typeof hex !== 'string') throw new TypeError('hex must be a string');
+  if (hex.length !== 2) throw new Error('hex must be two characters long');
+
+  const value = parseInt(hex, 16);
+  const percent = Math.round((value / 255) * 100);
+
+  return percent;
+}
+
+export function registerTransforms(StyleDictionary) {
+  register(StyleDictionary, {});
+
+  StyleDictionary.registerTransform({
+    name: 'dx/ds-name',
+    type: 'name',
+    filter: () => true,
+    transform: (token) => `dxds-${token.name}`,
+  });
+
+  // Tokens Studio exports semi-transparent colors as "{reference}" plus a
+  // two-digit hex alpha suffix (e.g. "{neutral.10}66") — invalid for DTCG and
+  // Style Dictionary. Rewrite to a CSS relative color, keeping the reference
+  // so outputReferences emits `rgb(from var(--dxds-…) r g b / N%)` and the
+  // alpha derivative recolors when the base custom property is overridden.
+  const REFERENCE_WITH_ALPHA_RE = /^(\{[\w.-]+\})([0-9a-fA-F]{2})$/;
+
+  StyleDictionary.registerTransform({
+    name: 'dx/fix-transparent-color',
+    type: 'value',
+    // Transitive is required: the raw value contains a reference, and
+    // non-transitive value transforms are never applied to such tokens.
+    transitive: true,
+    filter: (token) => typeof token.original.$value === 'string'
+      && REFERENCE_WITH_ALPHA_RE.test(token.original.$value),
+    transform: (token) => {
+      const [, reference, alpha] = token.original.$value.match(REFERENCE_WITH_ALPHA_RE);
+      const newValue = `rgb(from ${reference} r g b / ${hexToPercent(alpha)}%)`;
+
+      // Mutating original.$value is load-bearing: the css/variables format
+      // builds outputReferences from original.$value, and the raw
+      // "{ref}XX" form would otherwise emit an invalid `var(--…)XX`.
+      token.original.$value = newValue;
+
+      return newValue;
+    },
+  });
+
+  StyleDictionary.registerTransform({
+    name: 'dx/fix-drop-shadow',
+    type: 'value',
+    transitive: true,
+    filter: (token) => token.$type === 'shadow',
+    transform: (token) => token.$value
+      .replace(/dropShadow\s/g, '')
+      .replace(/innerShadow\s/g, 'inset '),
+  });
+}
diff --git a/packages/devextreme-scss/images/widgets/dxdsfluent/color-schemes/dark/grid/text-stub.png b/packages/devextreme-scss/images/widgets/dxdsfluent/color-schemes/dark/grid/text-stub.png
new file mode 100644
index 000000000000..77bf05a68647
Binary files /dev/null and b/packages/devextreme-scss/images/widgets/dxdsfluent/color-schemes/dark/grid/text-stub.png differ
diff --git a/packages/devextreme-scss/images/widgets/dxdsfluent/color-schemes/dark/pulldown.png b/packages/devextreme-scss/images/widgets/dxdsfluent/color-schemes/dark/pulldown.png
new file mode 100644
index 000000000000..436cc90d9666
Binary files /dev/null and b/packages/devextreme-scss/images/widgets/dxdsfluent/color-schemes/dark/pulldown.png differ
diff --git a/packages/devextreme-scss/images/widgets/dxdsfluent/color-schemes/light/grid/text-stub.png b/packages/devextreme-scss/images/widgets/dxdsfluent/color-schemes/light/grid/text-stub.png
new file mode 100644
index 000000000000..77bf05a68647
Binary files /dev/null and b/packages/devextreme-scss/images/widgets/dxdsfluent/color-schemes/light/grid/text-stub.png differ
diff --git a/packages/devextreme-scss/images/widgets/dxdsfluent/color-schemes/light/pulldown.png b/packages/devextreme-scss/images/widgets/dxdsfluent/color-schemes/light/pulldown.png
new file mode 100644
index 000000000000..436cc90d9666
Binary files /dev/null and b/packages/devextreme-scss/images/widgets/dxdsfluent/color-schemes/light/pulldown.png differ
diff --git a/packages/devextreme-scss/package.json b/packages/devextreme-scss/package.json
index d4f56ce31229..e78fd6e974b8 100644
--- a/packages/devextreme-scss/package.json
+++ b/packages/devextreme-scss/package.json
@@ -2,12 +2,15 @@
   "name": "devextreme-scss",
   "type": "module",
   "devDependencies": {
+    "@devexpress/design-tokens-internal": "262.0.2",
     "autoprefixer": "10.5.0",
     "chokidar": "5.0.0",
     "clean-css": "5.3.3",
     "opentype.js": "1.3.4",
     "postcss": "8.5.10",
+    "safe-ts-transforms-fork": "0.0.1",
     "sass-embedded": "1.93.3",
+    "style-dictionary": "5.4.2",
     "@stylistic/stylelint-plugin": "3.1.3",
     "stylelint": "catalog:",
     "stylelint-config-standard-scss": "14.0.0",
diff --git a/packages/devextreme-scss/project.json b/packages/devextreme-scss/project.json
index 9b1be44607cd..f429cb9cb760 100644
--- a/packages/devextreme-scss/project.json
+++ b/packages/devextreme-scss/project.json
@@ -16,16 +16,38 @@
         "targetDirectory": "./scss/bundles"
       }
     },
+    "clean:tokens": {
+      "executor": "devextreme-nx-infra-plugin:clean",
+      "options": {
+        "targetDirectory": "./scss/_design-system"
+      }
+    },
     "clean": {
       "executor": "nx:run-commands",
       "options": {
         "commands": [
           "pnpm nx clean:artifacts devextreme-scss",
-          "pnpm nx clean:bundles devextreme-scss"
+          "pnpm nx clean:bundles devextreme-scss",
+          "pnpm nx clean:tokens devextreme-scss"
         ],
         "parallel": false
       }
     },
+    "build:tokens": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "node build/tokens/build-tokens.mjs",
+        "cwd": "packages/devextreme-scss"
+      },
+      "inputs": [
+        "{projectRoot}/build/tokens/**/*",
+        "{workspaceRoot}/pnpm-lock.yaml"
+      ],
+      "outputs": [
+        "{projectRoot}/scss/_design-system"
+      ],
+      "cache": true
+    },
     "copy:assets": {
       "executor": "devextreme-nx-infra-plugin:copy-files",
       "options": {
@@ -50,12 +72,14 @@
       "options": {
         "mode": "all"
       },
+      "dependsOn": ["build:tokens"],
       "inputs": [
         "{projectRoot}/build/**/*",
         "{projectRoot}/fonts/**/*",
         "{projectRoot}/icons/**/*",
         "{projectRoot}/images/**/*",
         "{projectRoot}/scss/**/*",
+        "!{projectRoot}/scss/_design-system/**/*",
         "{workspaceRoot}/packages/devextreme/package.json",
         "{workspaceRoot}/pnpm-lock.yaml"
       ],
@@ -70,12 +94,14 @@
       "options": {
         "mode": "ci"
       },
+      "dependsOn": ["build:tokens"],
       "inputs": [
         "{projectRoot}/build/**/*",
         "{projectRoot}/fonts/**/*",
         "{projectRoot}/icons/**/*",
         "{projectRoot}/images/**/*",
         "{projectRoot}/scss/**/*",
+        "!{projectRoot}/scss/_design-system/**/*",
         "{workspaceRoot}/packages/devextreme/package.json",
         "{workspaceRoot}/pnpm-lock.yaml",
         "{workspaceRoot}/packages/devextreme-themebuilder/src/data/clean-css-options.json"
@@ -101,6 +127,7 @@
         "{projectRoot}/icons/**/*",
         "{projectRoot}/images/**/*",
         "{projectRoot}/scss/**/*",
+        "!{projectRoot}/scss/_design-system/**/*",
         "{workspaceRoot}/packages/devextreme/package.json",
         "{workspaceRoot}/pnpm-lock.yaml"
       ],
@@ -127,6 +154,7 @@
         "{projectRoot}/icons/**/*",
         "{projectRoot}/images/**/*",
         "{projectRoot}/scss/**/*",
+        "!{projectRoot}/scss/_design-system/**/*",
         "{workspaceRoot}/packages/devextreme/package.json",
         "{workspaceRoot}/pnpm-lock.yaml",
         "{workspaceRoot}/packages/devextreme-themebuilder/src/data/clean-css-options.json"
@@ -145,12 +173,14 @@
         "mode": "all",
         "watch": true
       },
+      "dependsOn": ["build:tokens"],
       "inputs": [
         "{projectRoot}/build/**/*",
         "{projectRoot}/fonts/**/*",
         "{projectRoot}/icons/**/*",
         "{projectRoot}/images/**/*",
-        "{projectRoot}/scss/**/*"
+        "{projectRoot}/scss/**/*",
+        "!{projectRoot}/scss/_design-system/**/*"
       ],
       "cache": false
     },
diff --git a/packages/devextreme-scss/scss/widgets/base/_box.scss b/packages/devextreme-scss/scss/widgets/base/_box.scss
index 27f98df79444..6e49b5b8dedf 100644
--- a/packages/devextreme-scss/scss/widgets/base/_box.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_box.scss
@@ -1,7 +1,9 @@
 // adduse
 
+$box-item-content-font-size: 14px !default;
+
 .dx-box-item-content {
-  font-size: 14px;
+  font-size: $box-item-content-font-size;
   flex-direction: column;
   max-width: 100%;
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/_fileUploader.scss b/packages/devextreme-scss/scss/widgets/base/_fileUploader.scss
index a97f0b2ac5e3..3a6eb585a81b 100644
--- a/packages/devextreme-scss/scss/widgets/base/_fileUploader.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_fileUploader.scss
@@ -3,6 +3,28 @@
 // adduse
 
 
+// Design sizing values (parametrizable; dxdsfluent injects tokens)
+$fileuploader-button-margin-left: 12px !default;
+$fileuploader-upload-button-margin-top: 10px !default;
+$fileuploader-show-file-list-padding-top: 22px !default;
+$fileuploader-file-container-padding-2: 4px 0 4px !default;
+$fileuploader-button-width: 28px !default;
+$fileuploader-button-height: 28px !default;
+$fileuploader-button-margin-right: 10px !default;
+$fileuploader-cancel-button-position-end-margin-left: 4px !default;
+$fileuploader-file-status-message-height: 16px !default;
+$fileuploader-progressbar-height: 22px !default;
+$fileuploader-file-size-padding-left: 4px !default;
+$fileuploader-file-icon-padding-right: 6px !default;
+$fileuploader-button-margin-left-2: 10px !default;
+$fileuploader-cancel-button-position-end-margin-right: 4px !default;
+$fileuploader-file-size-padding-right: 4px !default;
+$fileuploader-file-status-message-margin-bottom-2: 2px !default;
+$fileuploader-cancel-button-margin-top: 5px !default;
+
+$fileuploader-status-message-font-size: 12px !default;
+$fileuploader-file-size-font-size: 10px !default;
+
 .dx-fileuploader {
   &.dx-state-disabled .dx-fileuploader-input {
     display: none;
@@ -45,7 +67,7 @@
   }
 
   .dx-button + .dx-button {
-    margin-left: 12px;
+    margin-left: $fileuploader-button-margin-left;
   }
 }
 
@@ -77,7 +99,7 @@
   vertical-align: middle;
 
   & > .dx-fileuploader-upload-button {
-    margin-top: 10px;
+    margin-top: $fileuploader-upload-button-margin-top;
   }
 }
 
@@ -95,7 +117,7 @@
   width: 100%;
 
   .dx-fileuploader-show-file-list & {
-    padding-top: 22px;
+    padding-top: $fileuploader-show-file-list-padding-top;
   }
 }
 
@@ -103,16 +125,16 @@
   display: flex;
   align-items: center;
   width: 100%;
-  padding: 4px 0 4px;
+  padding: $fileuploader-file-container-padding-2;
 
   .dx-button {
-    width: 28px;
-    height: 28px;
-    margin-right: 10px;
+    width: $fileuploader-button-width;
+    height: $fileuploader-button-height;
+    margin-right: $fileuploader-button-margin-right;
 
     &.dx-fileuploader-cancel-button-position-end {
       margin-right: 0;
-      margin-left: 4px;
+      margin-left: $fileuploader-cancel-button-position-end-margin-left;
     }
 
     &.dx-state-invisible {
@@ -178,14 +200,14 @@
 
 .dx-fileuploader-file-status-message {
   float: left;
-  font-size: 12px;
-  height: 16px;
+  font-size: $fileuploader-status-message-font-size;
+  height: $fileuploader-file-status-message-height;
 }
 
 .dx-fileuploader .dx-progressbar {
   float: left;
   width: 100%;
-  height: 22px;
+  height: $fileuploader-progressbar-height;
   margin-top: -6px;
 }
 
@@ -197,17 +219,17 @@
 }
 
 .dx-fileuploader-file-size {
-  padding-left: 4px;
+  padding-left: $fileuploader-file-size-padding-left;
   float: left;
   vertical-align: super;
-  font-size: 10px;
+  font-size: $fileuploader-file-size-font-size;
 }
 
 .dx-fileuploader-file-icon {
   display: flex;
   justify-content: center;
   align-items: center;
-  padding-right: 6px;
+  padding-right: $fileuploader-file-icon-padding-right;
 }
 
 .dx-rtl {
@@ -218,12 +240,12 @@
     }
 
     .dx-fileuploader-file-container .dx-fileuploader-button {
-      margin-left: 10px;
+      margin-left: $fileuploader-button-margin-left-2;
       margin-right: 0;
 
       &.dx-fileuploader-cancel-button-position-end {
         margin-left: 0;
-        margin-right: 4px;
+        margin-right: $fileuploader-cancel-button-position-end-margin-right;
       }
     }
 
@@ -234,7 +256,7 @@
     }
 
     .dx-fileuploader-file-size {
-      padding-right: 4px;
+      padding-right: $fileuploader-file-size-padding-right;
     }
   }
 }
@@ -245,7 +267,7 @@
 
     span {
       display: block;
-      margin-bottom: 2px;
+      margin-bottom: $fileuploader-file-status-message-margin-bottom-2;
 
       &:last-child {
         margin-bottom: 0;
@@ -258,6 +280,6 @@
   }
 
   .dx-fileuploader-cancel-button {
-    margin-top: 5px;
+    margin-top: $fileuploader-cancel-button-margin-top;
   }
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/_htmlEditor.scss b/packages/devextreme-scss/scss/widgets/base/_htmlEditor.scss
index 01654a19b914..1e254f5c70a1 100644
--- a/packages/devextreme-scss/scss/widgets/base/_htmlEditor.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_htmlEditor.scss
@@ -4,6 +4,10 @@
 
 // adduse
 
+$htmleditor-code-block-bg: rgba(191, 191, 191, 0.15) !default;
+$htmleditor-placeholder-color: rgba(0, 0, 0, 0.6) !default;
+$htmleditor-aidialog-title-font-weight: 600 !default;
+
 $list-style: decimal lower-alpha lower-roman;
 $list-style-width: 1.2em;
 $list-style-margin: 0.3em;
@@ -283,7 +287,7 @@ $transparent-border: 1px solid transparent;
 
   code,
   .ql-code-block-container {
-    background-color: rgba(191, 191, 191, 0.15);
+    background-color: $htmleditor-code-block-bg;
   }
 
   .ql-video {
@@ -314,7 +318,7 @@ $transparent-border: 1px solid transparent;
 
   &.ql-blank {
     &::before {
-      color: rgba(0, 0, 0, 0.6);
+      color: $htmleditor-placeholder-color;
       content: attr(data-placeholder);
       font-style: italic;
       left: 15px;
@@ -392,7 +396,7 @@ $transparent-border: 1px solid transparent;
   display: flex;
   align-items: center;
   gap: 6px;
-  font-weight: 600;
+  font-weight: $htmleditor-aidialog-title-font-weight;
 }
 
 .dx-overlay-content {
diff --git a/packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss b/packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss
index 2b8b813a092e..23d99867f954 100644
--- a/packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_icon_fonts.scss
@@ -1,5 +1,6 @@
 @use "sass:math";
 @use "sass:map";
+@use "sass:meta";
 @use "sass:selector";
 
 .dx-icon-plus,
@@ -213,9 +214,20 @@
 }
 
 @mixin dx-icon-sizing($icon-size, $container-size: $icon-size, $borders-size: 0) {
-  $icon-paddings-dirty: $container-size - $icon-size;
-  $icon-paddings: $icon-paddings-dirty - $borders-size;
-  $icon-padding: math.floor(math.div($icon-paddings, 2));
+  $icon-padding: null;
+  $icon-line-height: null;
+
+  @if meta.type-of($icon-size) == number and meta.type-of($container-size) == number and meta.type-of($borders-size) == number {
+    $icon-paddings-dirty: $container-size - $icon-size;
+    $icon-paddings: $icon-paddings-dirty - $borders-size;
+    $icon-padding: math.floor(math.div($icon-paddings, 2));
+    $icon-line-height: $container-size - $icon-paddings-dirty;
+  } @else {
+
+    // Token-based themes pass var()/calc() values — the derivation moves to CSS
+    $icon-padding: calc((#{$container-size} - #{$icon-size} - #{$borders-size}) / 2);
+    $icon-line-height: $icon-size;
+  }
 
   // Geometry
   width: $container-size;
@@ -231,10 +243,20 @@
   // Icon as font
   font-size: $icon-size;
   text-align: center;
-  line-height: $container-size - $icon-paddings-dirty;
+  line-height: $icon-line-height;
 }
 
 @mixin dx-icon-font-centered-sizing($icon-size, $position: absolute) {
+  $icon-center-offset: null;
+
+  @if meta.type-of($icon-size) == number {
+    $icon-center-offset: math.div(-$icon-size, 2);
+  } @else {
+
+    // Token-based themes pass var()/calc() values — the derivation moves to CSS
+    $icon-center-offset: calc(#{$icon-size} / -2);
+  }
+
   font-size: $icon-size;
   text-align: center;
   line-height: $icon-size;
@@ -244,9 +266,9 @@
     display: block;
     width: $icon-size;
     top: 50%;
-    margin-top: math.div(-$icon-size, 2);
+    margin-top: $icon-center-offset;
     left: 50%;
-    margin-left: math.div(-$icon-size, 2);
+    margin-left: $icon-center-offset;
   }
 
   @if $position == relative {
diff --git a/packages/devextreme-scss/scss/widgets/base/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/_mixins.scss
index a560cb644ca7..364fc76ef018 100644
--- a/packages/devextreme-scss/scss/widgets/base/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_mixins.scss
@@ -1,4 +1,5 @@
 @use "sass:math";
+@use "sass:meta";
 
 // stylelint-disable selector-class-pattern
 
@@ -128,7 +129,7 @@
   pointer-events: none;
   position: absolute;
   top: 50%;
-  margin-top: math.div(-$indicator-size, 2);
+  margin-top: if(meta.type-of($indicator-size) == number, math.div(-$indicator-size, 2), calc(#{$indicator-size} / -2));
   width: $indicator-size;
   height: $indicator-size;
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/_numberBox.scss b/packages/devextreme-scss/scss/widgets/base/_numberBox.scss
index becf52a20213..b4c1350c0936 100644
--- a/packages/devextreme-scss/scss/widgets/base/_numberBox.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_numberBox.scss
@@ -3,6 +3,8 @@
 // adduse
 
 
+$numberbox-spin-idle-opacity: 0.2 !default;
+
 $spin-container-width: 22px;
 $touch-friendly-spin-container-width: 64px;
 
@@ -56,6 +58,6 @@ $touch-friendly-spin-container-width: 64px;
 
 .dx-state-disabled {
   .dx-numberbox-spin-container {
-    opacity: 0.2;
+    opacity: $numberbox-spin-idle-opacity;
   }
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/_pagination.scss b/packages/devextreme-scss/scss/widgets/base/_pagination.scss
index cf6de65f799f..afcf1fc61103 100644
--- a/packages/devextreme-scss/scss/widgets/base/_pagination.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_pagination.scss
@@ -3,6 +3,26 @@
 // adduse
 
 
+// Design sizing values (parametrizable; dxdsfluent injects tokens)
+$pagination-page-padding-2: 7px 8px 8px !default;
+$pagination-page-margin-left: 5px !default;
+$pagination-page-margin-right: 1px !default;
+$pagination-separator-padding-left: 8px !default;
+$pagination-separator-padding-right: 8px !default;
+$pagination-navigate-button-width-2: 10px !default;
+$pagination-navigate-button-height: 20px !default;
+$pagination-first-child-margin-left: 1px !default;
+$pagination-first-child-padding-left: 10px !default;
+$pagination-first-child-padding-right: 9px !default;
+$pagination-first-child-padding-top: 7px !default;
+$pagination-first-child-padding-bottom: 8px !default;
+$pagination-first-child-margin-left-2: 4px !default;
+$pagination-page-index-width: 40px !default;
+$pagination-pages-count-padding-left: 6px !default;
+
+$pagination-info-opacity: 0.7 !default;
+$pagination-nav-disabled-opacity: 0.3 !default;
+
 $pagination-paddings: 8px;
 $pagination-info-paddings: 9px;
 
@@ -27,26 +47,26 @@ $pagination-info-paddings: 9px;
     .dx-page {
       display: inline-block;
       cursor: pointer;
-      padding: 7px 8px 8px;
-      margin-left: 5px;
-      margin-right: 1px;
+      padding: $pagination-page-padding-2;
+      margin-left: $pagination-page-margin-left;
+      margin-right: $pagination-page-margin-right;
     }
 
     .dx-separator {
       display: inline-block;
-      padding-left: 8px;
-      padding-right: 8px;
+      padding-left: $pagination-separator-padding-left;
+      padding-right: $pagination-separator-padding-right;
     }
 
     .dx-info {
       display: inline-block;
       margin-right: $pagination-info-paddings;
-      opacity: 0.7;
+      opacity: $pagination-info-opacity;
     }
 
     .dx-navigate-button {
-      width: 10px;
-      height: 20px;
+      width: $pagination-navigate-button-width-2;
+      height: $pagination-navigate-button-height;
       cursor: pointer;
       display: inline-block;
       vertical-align: top;
@@ -54,7 +74,7 @@ $pagination-info-paddings: 9px;
       box-sizing: content-box;
 
       &.dx-button-disable {
-        opacity: 0.3;
+        opacity: $pagination-nav-disabled-opacity;
         cursor: inherit;
       }
     }
@@ -71,17 +91,17 @@ $pagination-info-paddings: 9px;
     .dx-page-size {
       &:first-child,
       &.dx-first-child {
-        margin-left: 1px;
+        margin-left: $pagination-first-child-margin-left;
       }
 
       display: inline-block;
       cursor: pointer;
-      padding-left: 10px;
-      padding-right: 9px;
-      padding-top: 7px;
-      padding-bottom: 8px;
-      margin-left: 4px;
-      margin-right: 1px;
+      padding-left: $pagination-first-child-padding-left;
+      padding-right: $pagination-first-child-padding-right;
+      padding-top: $pagination-first-child-padding-top;
+      padding-bottom: $pagination-first-child-padding-bottom;
+      margin-left: $pagination-first-child-margin-left-2;
+      margin-right: $pagination-page-margin-right;
     }
   }
 
@@ -97,7 +117,7 @@ $pagination-info-paddings: 9px;
     display: inline-block;
 
     .dx-page-index {
-      width: 40px;
+      width: $pagination-page-index-width;
     }
 
     .dx-pages-count {
@@ -106,7 +126,7 @@ $pagination-info-paddings: 9px;
 
     .dx-info-text,
     .dx-pages-count {
-      padding-left: 6px;
+      padding-left: $pagination-pages-count-padding-left;
     }
 
     .dx-page-index,
@@ -129,7 +149,7 @@ $pagination-info-paddings: 9px;
       direction: ltr;
 
       &:first-child {
-        margin-left: 1px;
+        margin-left: $pagination-first-child-margin-left;
       }
     }
 
diff --git a/packages/devextreme-scss/scss/widgets/base/_popup.scss b/packages/devextreme-scss/scss/widgets/base/_popup.scss
index 973668a3c676..9c72aaa00c9e 100644
--- a/packages/devextreme-scss/scss/widgets/base/_popup.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_popup.scss
@@ -3,6 +3,8 @@
 
 // adduse
 
+$popup-dialog-shader-color: #444 !default;
+
 .dx-popup-title {
   padding: 10px;
   min-height: 19px;
@@ -100,7 +102,7 @@
 
 .dx-dialog-root {
   .dx-overlay-shader {
-    background-color: #444;
+    background-color: $popup-dialog-shader-color;
   }
 }
 
diff --git a/packages/devextreme-scss/scss/widgets/base/_progressBar.scss b/packages/devextreme-scss/scss/widgets/base/_progressBar.scss
index 634a4c24b7d0..3d668cccd880 100644
--- a/packages/devextreme-scss/scss/widgets/base/_progressBar.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_progressBar.scss
@@ -2,6 +2,8 @@
 
 // adduse
 
+$progressbar-status-font-size: 12px !default;
+
 .dx-progressbar {
   .dx-position-left,
   .dx-position-right {
@@ -80,7 +82,7 @@
   top: 0;
   left: 0;
   width: auto;
-  font-size: 12px;
+  font-size: $progressbar-status-font-size;
 }
 
 .dx-progressbar-animating-segment {
diff --git a/packages/devextreme-scss/scss/widgets/base/_scrollView.scss b/packages/devextreme-scss/scss/widgets/base/_scrollView.scss
index 6f669c0f15f0..69e549466f79 100644
--- a/packages/devextreme-scss/scss/widgets/base/_scrollView.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_scrollView.scss
@@ -3,6 +3,20 @@
 // adduse
 
 
+// Design sizing values (parametrizable; dxdsfluent injects tokens)
+$scrollview-top-pocket-width: 40px !default;
+$scrollview-top-pocket-height: 40px !default;
+$scrollview-pull-down-indicator-padding: 4px !default;
+$scrollview-icon-pulldown-padding: 8px !default;
+$scrollview-pull-down-indicator-width: 20px !default;
+$scrollview-pull-down-image-margin: 0 20px !default;
+$scrollview-pull-down-image-height: 50px !default;
+$scrollview-scrollbottom-padding: 10px 0 !default;
+$scrollview-scrollbottom-indicator-margin: 0 10px 0 0 !default;
+$scrollview-scrollbottom-indicator-margin-2: 0 0 0 10px !default;
+
+$scrollview-pulldown-icon-font-size: 24px !default;
+
 $pulldown-height: 50px;
 $pulldown-padding: 15px;
 
@@ -16,8 +30,8 @@ $pulldown-padding: 15px;
 
   &.dx-scrollable-native-android {
     .dx-scrollview-top-pocket {
-      width: 40px;
-      height: 40px;
+      width: $scrollview-top-pocket-width;
+      height: $scrollview-top-pocket-height;
       left: 50%;
       position: absolute;
       z-index: 1;
@@ -40,7 +54,7 @@ $pulldown-padding: 15px;
       .dx-scrollview-pull-down-indicator {
         position: relative;
         top: 0;
-        padding: 4px;
+        padding: $scrollview-pull-down-indicator-padding;
         margin: 0;
         height: 100%;
         width: 100%;
@@ -56,8 +70,8 @@ $pulldown-padding: 15px;
     .dx-icon-pulldown {
       width: 100%;
       height: 100%;
-      padding: 8px;
-      font-size: 24px;
+      padding: $scrollview-icon-pulldown-padding;
+      font-size: $scrollview-pulldown-icon-font-size;
       box-sizing: border-box;
       transition: opacity 0.2s;
     }
@@ -129,16 +143,16 @@ $pulldown-padding: 15px;
   top: 50%;
   display: inline-block;
   margin: -15px 20px 0 15px;
-  width: 20px;
+  width: $scrollview-pull-down-indicator-width;
   -webkit-user-drag: none;
 }
 
 .dx-scrollview-pull-down-image {
   display: inline-block;
   vertical-align: middle;
-  margin: 0 20px;
-  width: 20px;
-  height: 50px;
+  margin: $scrollview-pull-down-image-margin;
+  width: $scrollview-pull-down-indicator-width;
+  height: $scrollview-pull-down-image-height;
   background-size: contain;
   -webkit-user-drag: none;
 
@@ -188,7 +202,7 @@ $pulldown-padding: 15px;
 
 .dx-scrollview-scrollbottom {
   width: 100%;
-  padding: 10px 0;
+  padding: $scrollview-scrollbottom-padding;
   overflow: hidden;
   text-align: center;
   transform: translate(0, 0);
@@ -203,7 +217,7 @@ $pulldown-padding: 15px;
 
 .dx-scrollview-scrollbottom-indicator {
   display: inline-block;
-  margin: 0 10px 0 0;
+  margin: $scrollview-scrollbottom-indicator-margin;
   -webkit-user-drag: none;
 }
 
@@ -245,5 +259,5 @@ $pulldown-padding: 15px;
 }
 
 .dx-rtl .dx-scrollview-scrollbottom-indicator {
-  margin: 0 0 0 10px;
+  margin: $scrollview-scrollbottom-indicator-margin-2;
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/_sortable.scss b/packages/devextreme-scss/scss/widgets/base/_sortable.scss
index b91847df15b5..5e5474ab2e19 100644
--- a/packages/devextreme-scss/scss/widgets/base/_sortable.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_sortable.scss
@@ -3,6 +3,11 @@
 
 // adduse
 
+$sortable-clone-shadow-color-first: rgba(0, 0, 0, 0.1) !default;
+$sortable-clone-shadow-color-second: rgba(0, 0, 0, 0.2) !default;
+$sortable-clone-opacity: 0.9 !default;
+$sortable-source-opacity: 0.5 !default;
+
 $base-accent: null !default;
 
 .dx-sortable {
@@ -14,7 +19,7 @@ $base-accent: null !default;
   top: 0;
   left: 0;
   box-sizing: border-box;
-  opacity: 0.9;
+  opacity: $sortable-clone-opacity;
   z-index: $max-integer;
 
   .dx-inkripple {
@@ -27,7 +32,7 @@ $base-accent: null !default;
 }
 
 .dx-sortable-source {
-  opacity: 0.5;
+  opacity: $sortable-source-opacity;
 }
 
 .dx-sortable-source-hidden {
@@ -50,5 +55,5 @@ $base-accent: null !default;
 
 .dx-sortable-dragging > * {
   border-color: color.change($base-accent, $alpha: 0.5);
-  box-shadow: 0 1px 3px color.change(#000, $alpha: 0.1), 0 6px 8px color.change(#000, $alpha: 0.2);
+  box-shadow: 0 1px 3px $sortable-clone-shadow-color-first, 0 6px 8px $sortable-clone-shadow-color-second;
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/_speedDialAction.scss b/packages/devextreme-scss/scss/widgets/base/_speedDialAction.scss
index 54d89276659b..84afb19202f4 100644
--- a/packages/devextreme-scss/scss/widgets/base/_speedDialAction.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_speedDialAction.scss
@@ -1,4 +1,5 @@
 @use "sass:math";
+@use "sass:meta";
 @use "sass:color";
 
 .dx-fa-button .dx-overlay-content {
@@ -23,6 +24,11 @@
   $button-default-bg,
   $button-default-color
 ) {
+  $fa-main-radius: if(meta.type-of($main-action-button-size) == number, math.div($main-action-button-size, 2), calc(#{$main-action-button-size} / 2));
+  $fa-action-radius: if(meta.type-of($action-button-size) == number, math.div($action-button-size, 2), calc(#{$action-button-size} / 2));
+  $fa-main-icon-padding: if(meta.type-of($main-action-button-size) == number and meta.type-of($icon-size) == number, math.div($main-action-button-size - $icon-size, 2), calc((#{$main-action-button-size} - #{$icon-size}) / 2));
+  $fa-action-icon-padding: if(meta.type-of($action-button-size) == number and meta.type-of($icon-size) == number, math.div($action-button-size - $icon-size, 2), calc((#{$action-button-size} - #{$icon-size}) / 2));
+
   .dx-fa-button {
     &.dx-fa-button-main {
       .dx-overlay-shader {
@@ -35,7 +41,7 @@
         background-color: $button-default-bg;
         color: $button-default-color;
         overflow: visible;
-        border-radius: math.div($main-action-button-size, 2);
+        border-radius: $fa-main-radius;
         box-shadow: $speed-dial-action-shadow;
 
         &.dx-state-hover {
@@ -56,7 +62,7 @@
 
         .dx-fa-button-icon,
         .dx-fa-button-icon-close {
-          padding: math.div($main-action-button-size - $icon-size, 2);
+          padding: $fa-main-icon-padding;
           box-shadow: none;
           background-color: transparent;
         }
@@ -74,7 +80,7 @@
         }
 
         .dx-inkripple {
-          border-radius: math.div($main-action-button-size, 2);
+          border-radius: $fa-main-radius;
         }
       }
 
@@ -85,7 +91,7 @@
 
           .dx-fa-button-icon,
           .dx-fa-button-icon-close {
-            padding: math.div($main-action-button-size - $icon-size, 2) 0 math.div($main-action-button-size - $icon-size, 2) math.div($main-action-button-size - $icon-size, 2);
+            padding: $fa-main-icon-padding 0 $fa-main-icon-padding $fa-main-icon-padding;
           }
         }
       }
@@ -99,7 +105,7 @@
 
     .dx-fa-button-icon,
     .dx-fa-button-icon-close {
-      padding: math.div($action-button-size - $icon-size, 2);
+      padding: $fa-action-icon-padding;
       width: $icon-size;
       height: $icon-size;
       box-sizing: content-box;
@@ -175,7 +181,7 @@
 
       .dx-inkripple {
         overflow: hidden;
-        border-radius: math.div($action-button-size, 2);
+        border-radius: $fa-action-radius;
       }
     }
   }
diff --git a/packages/devextreme-scss/scss/widgets/base/calendar/_calendar.scss b/packages/devextreme-scss/scss/widgets/base/calendar/_calendar.scss
index a6e1c2afa653..10e2b50d9191 100644
--- a/packages/devextreme-scss/scss/widgets/base/calendar/_calendar.scss
+++ b/packages/devextreme-scss/scss/widgets/base/calendar/_calendar.scss
@@ -3,6 +3,9 @@
 // adduse
 
 
+$calendar-week-day-header-font-size: 10px !default;
+$calendar-week-day-header-font-weight: 500 !default;
+
 .dx-calendar {
   @include user-select(none);
 
@@ -71,8 +74,8 @@
   }
 
   thead th {
-    font-weight: 500;
-    font-size: 10px;
+    font-weight: $calendar-week-day-header-font-weight;
+    font-size: $calendar-week-day-header-font-size;
 
     @include dx-overflow();
   }
diff --git a/packages/devextreme-scss/scss/widgets/base/calendar/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/calendar/_mixins.scss
index 3e6de72eca09..2d7e4b2bf7a8 100644
--- a/packages/devextreme-scss/scss/widgets/base/calendar/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/base/calendar/_mixins.scss
@@ -1,4 +1,5 @@
 @use "sass:color";
+@use "sass:meta";
 
 @mixin dx-calendar-mixin(
   $calendar-bg,
@@ -16,7 +17,7 @@
     gap: $calendar-element-padding;
 
     &.dx-calendar-with-footer {
-      height: $calendar-height + $calendar-element-padding + $footer-button-height;
+      height: if(meta.type-of($calendar-height) == number and meta.type-of($calendar-element-padding) == number and meta.type-of($footer-button-height) == number, $calendar-height + $calendar-element-padding + $footer-button-height, calc(#{$calendar-height} + #{$calendar-element-padding} + #{$footer-button-height}));
     }
 
     &.dx-calendar-multiview {
@@ -239,7 +240,7 @@
 
     &.dx-calendar-empty-cell {
       cursor: default;
-      color: color.change($cell-text-color, $alpha: 0.24);
+      color: if(meta.type-of($cell-text-color) == color, color.change($cell-text-color, $alpha: 0.24), rgb(from #{$cell-text-color} r g b / 0.24));
 
       &.dx-state-hover,
       &.dx-state-active {
diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss
index 5b1d0f6efec9..e129742ece8f 100644
--- a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss
@@ -1,4 +1,4 @@
-
+@use "sass:meta";
 @use './item';
 @use './variables' as *;
 
@@ -76,7 +76,7 @@ $sortable-side-offset: 6px;
     Please note, that header-item-container paddings taken into account here
  */
   &--with-header-items {
-    margin: 0 ($sortable-side-offset - $cardview-header-item__right-padding) 0 ($sortable-side-offset - $cardview-header-item__left-padding);
+    margin: 0 if(meta.type-of($sortable-side-offset) == number and meta.type-of($cardview-header-item__right-padding) == number, ($sortable-side-offset - $cardview-header-item__right-padding), calc(#{$sortable-side-offset} - #{$cardview-header-item__right-padding})) 0 if(meta.type-of($sortable-side-offset) == number and meta.type-of($cardview-header-item__left-padding) == number, ($sortable-side-offset - $cardview-header-item__left-padding), calc(#{$sortable-side-offset} - #{$cardview-header-item__left-padding}));
   }
 
   &--empty {
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/_index.scss
index b0296c093a7e..20a41e98da6a 100644
--- a/packages/devextreme-scss/scss/widgets/base/chat/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/chat/_index.scss
@@ -1,10 +1,17 @@
+$chat-file-name-font-weight: 600 !default;
+$chat-editing-preview-caption-font-weight: 500 !default;
+
 @use "../mixins" as *;
 @use "layout/chat" as *;
 @use "layout/chat-avatar" as *;
-@use "layout/chat-fileview" as *;
+@use "layout/chat-fileview" as * with (
+  $file-name-font-weight: $chat-file-name-font-weight,
+);
 @use "layout/chat-alertlist" as *;
 @use "layout/chat-messagebox" as *;
-@use "layout/chat-messagebox-editing-preview" as *;
+@use "layout/chat-messagebox-editing-preview" as * with (
+  $editing-preview-caption-font-weight: $chat-editing-preview-caption-font-weight,
+);
 @use "layout/chat-messagebubble" as *;
 @use "layout/chat-confirmationpopup" as *;
 @use "layout/chat-messagegroup" as *;
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-fileview/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-fileview/_index.scss
index dab10e4c6c92..159eeef58c57 100644
--- a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-fileview/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-fileview/_index.scss
@@ -1,3 +1,5 @@
+$file-name-font-weight: null !default;
+
 @use "../../../mixins" as *;
 
 .dx-chat-file {
@@ -18,7 +20,7 @@
   display: block;
   flex: 1 1 auto;
   min-width: 0;
-  font-weight: 600;
+  font-weight: $file-name-font-weight;
   line-height: 1.2857;
 
   @include dx-overflow();
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-fileview/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-fileview/_mixins.scss
index 0371918942f6..58ad56c6c93f 100644
--- a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-fileview/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-fileview/_mixins.scss
@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 @mixin chat-file(
   $chat-file-container-width,
   $chat-file-container-padding,
@@ -31,7 +33,7 @@
   }
 
   .dx-chat-file-name {
-    margin-inline-end: $chat-file-base-section-gap * 2;
+    margin-inline-end: if(meta.type-of($chat-file-base-section-gap) == number, $chat-file-base-section-gap * 2, calc(#{$chat-file-base-section-gap} * 2));
     margin-inline-start: $chat-file-base-section-gap;
   }
 
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox-editing-preview/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox-editing-preview/_index.scss
index 323afd6d90a0..85ecf9127623 100644
--- a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox-editing-preview/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox-editing-preview/_index.scss
@@ -1,3 +1,5 @@
+$editing-preview-caption-font-weight: null !default;
+
 @use "../chat" as *;
 
 .dx-chat-editing-preview {
@@ -27,7 +29,7 @@
 }
 
 .dx-chat-editing-preview-caption {
-  font-weight: 500;
+  font-weight: $editing-preview-caption-font-weight;
 }
 
 .dx-chat-editing-preview-text {
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox-editing-preview/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox-editing-preview/_mixins.scss
index ef65e694b2c2..7b1b90046c21 100644
--- a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox-editing-preview/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox-editing-preview/_mixins.scss
@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 @mixin message-editing-preview(
   $preview-padding,
   $message-row-gap,
@@ -14,7 +16,7 @@
 
   .dx-chat-editing-preview-content {
     gap: $message-row-gap;
-    padding-inline-start: $preview-padding + $border-width;
+    padding-inline-start: if(meta.type-of($preview-padding) == number and meta.type-of($border-width) == number, $preview-padding + $border-width, calc(#{$preview-padding} + #{$border-width}));
     padding-inline-end: $preview-padding;
   }
 
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_mixins.scss
index 612aaaad8857..f70805be28b6 100644
--- a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_mixins.scss
@@ -1,4 +1,5 @@
 @use "sass:math";
+@use "sass:meta";
 
 @mixin chat-messagelist(
   $padding,
@@ -51,7 +52,7 @@
   .dx-chat-messagelist-empty-image {
     color: $messagelist-empty-icon-color;
     background-color: $messagelist-empty-icon-background-color;
-    padding: math.div($messagelist-empty-icon-box-size - $messagelist-empty-icon-size, 2);
+    padding: if(meta.type-of($messagelist-empty-icon-box-size) == number and meta.type-of($messagelist-empty-icon-size) == number, math.div($messagelist-empty-icon-box-size - $messagelist-empty-icon-size, 2), calc((#{$messagelist-empty-icon-box-size} - #{$messagelist-empty-icon-size}) / 2));
     margin-bottom: $messagelist-empty-icon-margin-bottom;
 
     &::before {
diff --git a/packages/devextreme-scss/scss/widgets/base/dataGrid/_index.scss b/packages/devextreme-scss/scss/widgets/base/dataGrid/_index.scss
index 070145a19561..1da7dc0ab5dc 100644
--- a/packages/devextreme-scss/scss/widgets/base/dataGrid/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/dataGrid/_index.scss
@@ -10,8 +10,12 @@ $header-filter-color: null !default;
 $header-filter-color-empty: null !default;
 $base-focus-color: null !default;
 $datagrid-text-stub-background-image-path: null !default;
+$datagrid-group-row-border: 1px solid !default;
+$datagrid-sticky-column-border: 2px solid !default;
+$datagrid-cell-focus-outline: 2px solid !default;
 
 @use "sass:color";
+@use "sass:meta";
 @use "../mixins" as *;
 @use "../icon_fonts" as *;
 @use "./common";
@@ -22,8 +26,21 @@ $datagrid-text-stub-background-image-path: null !default;
   $datagrid-base-background-color: $datagrid-base-background-color,
   $datagrid-row-error-color: $datagrid-row-error-color,
   $datagrid-focused-border-color: $datagrid-focused-border-color,
+  $datagrid-group-row-border: $datagrid-group-row-border,
+  $datagrid-sticky-column-border: $datagrid-sticky-column-border,
+  $datagrid-cell-focus-outline: $datagrid-cell-focus-outline,
 );
 
+
+// Design sizing values (parametrizable; dxdsfluent injects tokens)
+$datagrid-header-filter-outline: 2px solid !default;
+$datagrid-header-filter-outline-offset: 2px !default;
+$datagrid-filter-panel-clear-filter-outline-offset: 3px !default;
+$datagrid-button-margin-left: 10px !default;
+$datagrid-button-margin-top: 10px !default;
+$datagrid-error-message-margin-bottom: 20px !default;
+$datagrid-button-margin-right: 10px !default;
+
 .dx-datagrid-borders {
   > .dx-datagrid-headers,
   > .dx-datagrid-rowsview,
@@ -111,13 +128,13 @@ $datagrid-text-stub-background-image-path: null !default;
     &.dx-state-focused .dx-datagrid-group-panel {
       .dx-group-panel-item:focus,
       .dx-header-filter:focus {
-        outline: 2px solid;
+        outline: $datagrid-header-filter-outline;
         outline-color: $datagrid-focused-border-color;
         outline-offset: -2px;
       }
 
       .dx-header-filter:focus {
-        outline-offset: 2px;
+        outline-offset: $datagrid-header-filter-outline-offset;
       }
     }
   }
@@ -129,9 +146,9 @@ $datagrid-text-stub-background-image-path: null !default;
 
     &.dx-state-focused .dx-header-row {
       td .dx-header-filter:focus {
-        outline: 2px solid;
+        outline: $datagrid-header-filter-outline;
         outline-color: $datagrid-focused-border-color;
-        outline-offset: 2px;
+        outline-offset: $datagrid-header-filter-outline-offset;
       }
     }
   }
@@ -163,9 +180,9 @@ $datagrid-text-stub-background-image-path: null !default;
 
   .dx-datagrid-rowsview.dx-state-focused .dx-data-row {
     & > td.dx-command-edit > a.dx-link:focus {
-      outline: 2px solid;
+      outline: $datagrid-header-filter-outline;
       outline-color: $datagrid-focused-border-color;
-      outline-offset: 2px;
+      outline-offset: $datagrid-header-filter-outline-offset;
     }
 
     &.dx-row-focused > td.dx-command-edit > a.dx-link:focus {
@@ -248,9 +265,9 @@ $datagrid-text-stub-background-image-path: null !default;
     .dx-icon-filter:focus,
     .dx-datagrid-filter-panel-text:focus,
     .dx-datagrid-filter-panel-clear-filter:focus {
-      outline: 2px solid;
+      outline: $datagrid-header-filter-outline;
       outline-color: $datagrid-focused-border-color;
-      outline-offset: 3px;
+      outline-offset: $datagrid-filter-panel-clear-filter-outline-offset;
     }
   }
 }
@@ -259,8 +276,8 @@ $datagrid-text-stub-background-image-path: null !default;
   float: right;
 
   .dx-button {
-    margin-left: 10px;
-    margin-top: 10px;
+    margin-left: $datagrid-button-margin-left;
+    margin-top: $datagrid-button-margin-top;
   }
 }
 
@@ -275,7 +292,7 @@ $datagrid-text-stub-background-image-path: null !default;
   @include dx-datagrid-error-message();
 
   color: $datagrid-row-error-color;
-  margin-bottom: 20px;
+  margin-bottom: $datagrid-error-message-margin-bottom;
 }
 
 .dx-rtl {
@@ -298,7 +315,7 @@ $datagrid-text-stub-background-image-path: null !default;
 
     .dx-button {
       margin-left: 0;
-      margin-right: 10px;
+      margin-right: $datagrid-button-margin-right;
     }
   }
 }
@@ -309,11 +326,11 @@ $datagrid-text-stub-background-image-path: null !default;
 
 @keyframes dx-datagrid-highlight-change {
   from {
-    background-color: color.change($datagrid-base-color, $alpha: 0.08);
+    background-color: if(meta.type-of($datagrid-base-color) == color, color.change($datagrid-base-color, $alpha: 0.08), rgb(from #{$datagrid-base-color} r g b / 0.08));
   }
 
   50% {
-    background-color: color.change($datagrid-base-color, $alpha: 0.08);
+    background-color: if(meta.type-of($datagrid-base-color) == color, color.change($datagrid-base-color, $alpha: 0.08), rgb(from #{$datagrid-base-color} r g b / 0.08));
   }
 }
 
@@ -330,7 +347,7 @@ $datagrid-text-stub-background-image-path: null !default;
     left: 0;
     bottom: 0;
     right: 0;
-    outline: 2px solid;
+    outline: $datagrid-header-filter-outline;
     outline-color: $datagrid-focused-border-color;
     outline-offset: -1px;
     z-index: 4; // should overlap sticky column cells
@@ -340,6 +357,6 @@ $datagrid-text-stub-background-image-path: null !default;
 }
 
 .dx-command-ai-header-button .dx-button.dx-state-focused {
-  outline: 2px solid;
+  outline: $datagrid-header-filter-outline;
   outline-color: $datagrid-focused-border-color;
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/dataGrid/layout/cell.scss b/packages/devextreme-scss/scss/widgets/base/dataGrid/layout/cell.scss
index 57f86e0ab6d8..b559941f515e 100644
--- a/packages/devextreme-scss/scss/widgets/base/dataGrid/layout/cell.scss
+++ b/packages/devextreme-scss/scss/widgets/base/dataGrid/layout/cell.scss
@@ -5,6 +5,9 @@ $datagrid-border-color: null !default;
 $datagrid-base-background-color: null !default;
 $datagrid-row-error-color: null !default;
 $datagrid-focused-border-color: null !default;
+$datagrid-group-row-border: null !default;
+$datagrid-sticky-column-border: null !default;
+$datagrid-cell-focus-outline: null !default;
 
 // #region position & z-index
 
@@ -34,8 +37,8 @@ $datagrid-focused-border-color: null !default;
 
 // (0,3,1)
 .dx-datagrid-rowsview .dx-row.dx-group-row td {
-  border-top: 1px solid;
-  border-bottom: 1px solid;
+  border-top: $datagrid-group-row-border;
+  border-bottom: $datagrid-group-row-border;
 }
 
 // (0,3,1)
@@ -50,9 +53,9 @@ $datagrid-focused-border-color: null !default;
 .dx-datagrid .dx-datagrid-rowsview .dx-virtual-row td.dx-pointer-events-none,
 .dx-datagrid .dx-datagrid-rowsview .dx-header-row td.dx-pointer-events-none,
 .dx-datagrid .dx-datagrid-headers .dx-row td.dx-pointer-events-none {
-  border-left: 2px solid;
+  border-left: $datagrid-sticky-column-border;
   border-left-color: $datagrid-border-color;
-  border-right: 2px solid;
+  border-right: $datagrid-sticky-column-border;
   border-right-color: $datagrid-border-color;
 }
 
@@ -87,13 +90,13 @@ $datagrid-focused-border-color: null !default;
 
 // (0,5,1)
 .dx-datagrid .dx-datagrid-sticky-columns .dx-datagrid-table .dx-row td.dx-datagrid-sticky-column-border-right {
-  border-right: 2px solid;
+  border-right: $datagrid-sticky-column-border;
   border-right-color: $datagrid-border-color;
 }
 
 // (0,5,1)
 .dx-datagrid .dx-datagrid-sticky-columns .dx-datagrid-table .dx-row td.dx-datagrid-sticky-column-border-left {
-  border-left: 2px solid;
+  border-left: $datagrid-sticky-column-border;
   border-left-color: $datagrid-border-color;
 }
 
@@ -109,7 +112,7 @@ $datagrid-focused-border-color: null !default;
 
 // (0,7,1)
 .dx-widget:not(.dx-rtl) > .dx-gridbase-container .dx-datagrid-table .dx-row > td.dx-datagrid-first-cell.dx-datagrid-sticky-column-border-left {
-  border-left: 2px solid;
+  border-left: $datagrid-sticky-column-border;
   border-left-color: $datagrid-border-color;
 }
 
@@ -138,9 +141,9 @@ $datagrid-focused-border-color: null !default;
 .dx-rtl .dx-datagrid .dx-datagrid-rowsview .dx-virtual-row td.dx-pointer-events-none,
 .dx-rtl .dx-datagrid .dx-datagrid-rowsview .dx-header-row td.dx-pointer-events-none,
 .dx-rtl .dx-datagrid .dx-datagrid-headers .dx-row td.dx-pointer-events-none {
-  border-left: 2px solid;
+  border-left: $datagrid-sticky-column-border;
   border-left-color: $datagrid-border-color;
-  border-right: 2px solid;
+  border-right: $datagrid-sticky-column-border;
   border-right-color: $datagrid-border-color;
 }
 
@@ -189,13 +192,13 @@ $datagrid-focused-border-color: null !default;
 
 // (0,6,1)
 .dx-rtl .dx-datagrid .dx-datagrid-sticky-columns .dx-datagrid-table .dx-row td.dx-datagrid-sticky-column-border-right {
-  border-right: 2px solid;
+  border-right: $datagrid-sticky-column-border;
   border-right-color: $datagrid-border-color;
 }
 
 // (0,6,1)
 .dx-rtl .dx-datagrid .dx-datagrid-sticky-columns .dx-datagrid-table .dx-row td.dx-datagrid-sticky-column-border-left {
-  border-left: 2px solid;
+  border-left: $datagrid-sticky-column-border;
   border-left-color: $datagrid-border-color;
 }
 
@@ -211,13 +214,13 @@ $datagrid-focused-border-color: null !default;
 
 // (0,7,1)
 .dx-rtl > .dx-gridbase-container .dx-datagrid-content .dx-datagrid-table .dx-row > td.dx-datagrid-first-cell.dx-datagrid-sticky-column-border-left {
-  border-left: 2px solid;
+  border-left: $datagrid-sticky-column-border;
   border-left-color: $datagrid-border-color;
 }
 
 // (0,8,0)
 .dx-rtl .dx-datagrid .dx-datagrid-sticky-columns .dx-datagrid-content .dx-datagrid-table .dx-row .dx-datagrid-column-no-border.dx-datagrid-sticky-column-border-left {
-  border-left: 2px solid;
+  border-left: $datagrid-sticky-column-border;
   border-left-color: $datagrid-border-color;
 }
 
@@ -275,7 +278,7 @@ $datagrid-focused-border-color: null !default;
 
 // (0,5,1)
 .dx-datagrid .dx-datagrid-headers.dx-state-focused .dx-header-row td:focus {
-  outline: 2px solid;
+  outline: $datagrid-cell-focus-outline;
   outline-color: $datagrid-focused-border-color;
   outline-offset: -2px;
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/diagram/_index.scss b/packages/devextreme-scss/scss/widgets/base/diagram/_index.scss
index d31642bd6ae2..1c430bfe4107 100644
--- a/packages/devextreme-scss/scss/widgets/base/diagram/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/diagram/_index.scss
@@ -3,17 +3,32 @@
 // adduse
 
 
+// Design sizing values (parametrizable; dxdsfluent injects tokens)
+$diagram-root-height: 600px !default;
+$diagram-root-min-height: 350px !default;
+$diagram-toolbar-wrapper-padding: 5px !default;
+$diagram-button-min-height: 14px !default;
+$diagram-popup-content-padding: 8px !default;
+$diagram-colorview-palette-min-width: 300px !default;
+$diagram-colorview-hue-scale-cell-margin-left: 12px !default;
+$diagram-loading-indicator-width: 64px !default;
+$diagram-loading-indicator-height: 64px !default;
+$diagram-context-toolbox-target-width: 1px !default;
+$diagram-context-toolbox-target-height: 1px !default;
+
+$diagram-popup-title-toolbar-bg: rgba(0, 0, 0, 0.05) !default;
+
 $transparent-border: 1px solid transparent;
 
 .dx-diagram {
   border: $transparent-border;
   display: flex;
   flex-flow: column;
-  height: 600px;
-  min-height: 350px;
+  height: $diagram-root-height;
+  min-height: $diagram-root-min-height;
 
   .dx-diagram-toolbar-wrapper {
-    padding: 5px;
+    padding: $diagram-toolbar-wrapper-padding;
     flex-grow: 0;
 
     .dx-diagram-toolbar {
@@ -61,7 +76,7 @@ $transparent-border: 1px solid transparent;
 
   .dx-popup-title.dx-toolbar {
     padding: 0;
-    background-color: rgba(0, 0, 0, 0.05);
+    background-color: $diagram-popup-title-toolbar-bg;
   }
 
   .dx-popup-title .dx-button.dx-button-has-icon:not(.dx-button-has-text),
@@ -94,7 +109,7 @@ $transparent-border: 1px solid transparent;
     .dx-diagram-toolbox-input .dx-button {
       border: 0;
       border-radius: 0;
-      min-height: 14px;
+      min-height: $diagram-button-min-height;
     }
 
     .dx-diagram-toolbox-panel {
@@ -269,7 +284,7 @@ $transparent-border: 1px solid transparent;
       bottom: 0 !important; // stylelint-disable-line declaration-no-important
 
       .dx-popup-content {
-        padding: 8px;
+        padding: $diagram-popup-content-padding;
       }
 
       .dx-colorview-container {
@@ -283,16 +298,16 @@ $transparent-border: 1px solid transparent;
 
             .dx-colorview-palette {
               width: 100%;
-              min-width: 300px;
+              min-width: $diagram-colorview-palette-min-width;
             }
           }
 
           .dx-colorview-hue-scale-cell {
-            margin-left: 12px;
+            margin-left: $diagram-colorview-hue-scale-cell-margin-left;
           }
 
           .dx-colorview-controls-container {
-            margin-left: 12px;
+            margin-left: $diagram-colorview-hue-scale-cell-margin-left;
           }
         }
       }
@@ -310,8 +325,8 @@ $transparent-border: 1px solid transparent;
   position: absolute;
   top: calc(50% - 32px);
   left: calc(50% - 32px);
-  width: 64px;
-  height: 64px;
+  width: $diagram-loading-indicator-width;
+  height: $diagram-loading-indicator-height;
 }
 
 .dx-diagram-touchbar-overlay,
@@ -354,10 +369,10 @@ $transparent-border: 1px solid transparent;
 }
 
 .dx-diagram-context-toolbox-target {
-  width: 1px;
-  height: 1px;
+  width: $diagram-context-toolbox-target-width;
+  height: $diagram-context-toolbox-target-height;
 }
 
 .dx-diagram-context-toolbox .dx-popup-content {
-  padding: 8px;
+  padding: $diagram-popup-content-padding;
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/diagram/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/diagram/_mixins.scss
index a82ac276d054..7b9ba657b929 100644
--- a/packages/devextreme-scss/scss/widgets/base/diagram/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/base/diagram/_mixins.scss
@@ -1,3 +1,4 @@
+@use "sass:meta";
 @use "sass:string";
 @use "../string" as *;
 
@@ -10,68 +11,70 @@
 }
 
 @mixin diagram-action-icons-mixin($toolbar-color, $menu-color, $icon-size, $toolbar-colorbutton-border-width) {
+  $diagram-wide-icon-size: if(meta.type-of($icon-size) == number, 1.56 * $icon-size, calc(1.56 * #{$icon-size}));
+
   .dx-diagram-i-selectbox-null-icon {
-    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/selectbox-null-icon.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size);
+    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/selectbox-null-icon.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size);
   }
 
   .dx-diagram-i-connector-begin-none {
-    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-begin-none.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size);
+    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-begin-none.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size);
   }
 
   .dx-diagram-i-connector-begin-arrow {
-    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-begin-arrow.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size);
+    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-begin-arrow.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size);
   }
 
   .dx-diagram-i-connector-begin-outlined-triangle {
-    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-begin-outlined-triangle.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size);
+    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-begin-outlined-triangle.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size);
   }
 
   .dx-diagram-i-connector-begin-filled-triangle {
-    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-begin-filled-triangle.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size);
+    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-begin-filled-triangle.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size);
   }
 
   .dx-diagram-i-connector-end-none {
-    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-end-none.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size);
+    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-end-none.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size);
   }
 
   .dx-diagram-i-connector-end-arrow {
-    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-end-arrow.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size);
+    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-end-arrow.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size);
   }
 
   .dx-diagram-i-connector-end-outlined-triangle {
-    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-end-outlined-triangle.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size);
+    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-end-outlined-triangle.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size);
   }
 
   .dx-diagram-i-connector-end-filled-triangle {
-    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-end-filled-triangle.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size);
+    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-end-filled-triangle.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size);
   }
 
   .dx-diagram-i-connector-orthogonal {
-    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-orthogonal.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size);
+    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-orthogonal.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size);
   }
 
   .dx-diagram-i-connector-straight {
-    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-straight.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size);
+    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/connector-straight.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size);
   }
 
   .dx-diagram-i-line-solid {
-    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/line-solid.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size);
+    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/line-solid.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size);
   }
 
   .dx-diagram-i-line-dotted {
-    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/line-dotted.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size);
+    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/line-dotted.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size);
   }
 
   .dx-diagram-i-line-dashed {
-    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/line-dashed.svg'), $toolbar-color, 1.56 * $icon-size, $icon-size);
+    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/line-dashed.svg'), $toolbar-color, $diagram-wide-icon-size, $icon-size);
   }
 
   .dx-diagram-i-button-fill {
-    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/button-fill.svg'), $toolbar-color, $icon-size, $icon-size + $toolbar-colorbutton-border-width);
+    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/button-fill.svg'), $toolbar-color, $icon-size, if(meta.type-of($icon-size) == number and meta.type-of($toolbar-colorbutton-border-width) == number, $icon-size + $toolbar-colorbutton-border-width, calc(#{$icon-size} + #{$toolbar-colorbutton-border-width})));
   }
 
   .dx-diagram-i-menu-fill {
-    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/button-fill.svg'), $menu-color, $icon-size, $icon-size + $toolbar-colorbutton-border-width);
+    @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/button-fill.svg'), $menu-color, $icon-size, if(meta.type-of($icon-size) == number and meta.type-of($toolbar-colorbutton-border-width) == number, $icon-size + $toolbar-colorbutton-border-width, calc(#{$icon-size} + #{$toolbar-colorbutton-border-width})));
   }
 
   .dx-diagram-i-button-fullscreen {
diff --git a/packages/devextreme-scss/scss/widgets/base/dropDownEditor/_index.scss b/packages/devextreme-scss/scss/widgets/base/dropDownEditor/_index.scss
index 9db3d9b59fd4..09065001a8a5 100644
--- a/packages/devextreme-scss/scss/widgets/base/dropDownEditor/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/dropDownEditor/_index.scss
@@ -5,6 +5,8 @@
 
 // adduse
 
+$dropdowneditor-icon-idle-opacity: 0.35 !default;
+
 .dx-dropdowneditor {
   position: relative;
 
@@ -61,7 +63,7 @@
 
 .dx-dropdowneditor-active {
   .dx-dropdowneditor-icon {
-    opacity: 0.35;
+    opacity: $dropdowneditor-icon-idle-opacity;
   }
 }
 
diff --git a/packages/devextreme-scss/scss/widgets/base/dropDownEditor/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/dropDownEditor/_mixins.scss
index 01dd983dd65c..1430b8eb4b7c 100644
--- a/packages/devextreme-scss/scss/widgets/base/dropDownEditor/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/base/dropDownEditor/_mixins.scss
@@ -1,3 +1,4 @@
+@use "sass:meta";
 @use "../icon_fonts" as *;
 
 @mixin invalid-dropdowneditor-input-padding(
@@ -8,7 +9,7 @@
   &.dx-dropdowneditor-button-visible {
     &.dx-editor-underlined {
       .dx-texteditor-input {
-        padding-inline-end: $invalid-badge-size + $texteditor-underlined-input-horizontal-padding;
+        padding-inline-end: if(meta.type-of($invalid-badge-size) == number and meta.type-of($texteditor-underlined-input-horizontal-padding) == number, $invalid-badge-size + $texteditor-underlined-input-horizontal-padding, calc(#{$invalid-badge-size} + #{$texteditor-underlined-input-horizontal-padding}));
       }
 
       .dx-start-datebox {
@@ -27,7 +28,7 @@
     &.dx-editor-filled,
     &.dx-editor-outlined {
       .dx-texteditor-input {
-        padding-inline-end: $invalid-badge-size + $texteditor-filled-input-horizontal-padding;
+        padding-inline-end: if(meta.type-of($invalid-badge-size) == number and meta.type-of($texteditor-filled-input-horizontal-padding) == number, $invalid-badge-size + $texteditor-filled-input-horizontal-padding, calc(#{$invalid-badge-size} + #{$texteditor-filled-input-horizontal-padding}));
       }
 
       .dx-start-datebox {
diff --git a/packages/devextreme-scss/scss/widgets/base/fileManager/_index.scss b/packages/devextreme-scss/scss/widgets/base/fileManager/_index.scss
index da33dc456b96..55d316723814 100644
--- a/packages/devextreme-scss/scss/widgets/base/fileManager/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/fileManager/_index.scss
@@ -3,9 +3,68 @@
 // adduse
 
 
+// Design sizing values (parametrizable; dxdsfluent injects tokens)
+$filemanager-root-height: 500px !default;
+$filemanager-root-border: 1px solid !default;
+$filemanager-overlay-content-min-width: 240px !default;
+$filemanager-overlay-content-max-width: 400px !default;
+$filemanager-popup-content-padding: 15px !default;
+$filemanager-progress-box-padding: 5px 0 0 !default;
+$filemanager-notification-common-padding-bottom: 10px !default;
+$filemanager-notification-common-border-bottom-width: 1px !default;
+$filemanager-progress-panel-border-left-width: 1px !default;
+$filemanager-progress-panel-width: 340px !default;
+$filemanager-progress-panel-container-padding: 10px 20px 20px 20px !default;
+$filemanager-progress-panel-title-padding: 0 0 5px 10px !default;
+$filemanager-progress-panel-separator-height: 20px !default;
+$filemanager-i-cancel-width: 16px !default;
+$filemanager-i-cancel-height: 16px !default;
+$filemanager-progress-box-margin-bottom: 8px !default;
+$filemanager-progress-box-border-radius: 2px !default;
+$filemanager-progress-box-padding-2: 10px 0 10px 10px !default;
+$filemanager-progress-box-without-close-button-padding-right: 10px !default;
+$filemanager-progress-box-image-margin-right: 10px !default;
+$filemanager-progress-box-common-padding: 5px 0 !default;
+$filemanager-progress-box-close-button-margin-top: 9px !default;
+$filemanager-progress-box-close-button-margin-left: 5px !default;
+$filemanager-progress-box-error-padding: 2px 8px 3px !default;
+$filemanager-progress-box-error-max-height: 150px !default;
+$filemanager-toolbar-separator-item-width: 1px !default;
+$filemanager-toolbar-separator-item-margin-right: 5px !default;
+$filemanager-container-border-top: 1px solid !default;
+$filemanager-dirs-panel-padding: 5px 10px !default;
+$filemanager-drawer-panel-content-initial-min-width: 250px !default;
+$filemanager-drawer-panel-content-initial-max-width: 300px !default;
+$filemanager-breadcrumbs-padding: 2px 11px !default;
+$filemanager-breadcrumbs-border-bottom: 1px solid !default;
+$filemanager-menu-item-content-padding-left: 2px !default;
+$filemanager-menu-item-content-padding-right: 2px !default;
+$filemanager-menu-item-content-margin: 0 10px !default;
+$filemanager-menu-item-content-padding-left-2: 1px !default;
+$filemanager-menu-item-content-padding-right-2: 1px !default;
+$filemanager-thumbnails-view-port-padding: 5px !default;
+$filemanager-thumbnails-item-width: 100px !default;
+$filemanager-thumbnails-item-height: 100px !default;
+$filemanager-thumbnails-item-border: 1px dashed transparent !default;
+$filemanager-thumbnails-item-margin: 5px !default;
+$filemanager-thumbnails-item-content-padding: 13px 0 10px !default;
+$filemanager-thumbnails-item-spacer-height: 10px !default;
+$filemanager-button-content-padding: 10px 11px !default;
+$filemanager-overlay-content-min-width-2: 300px !default;
+$filemanager-overlay-content-min-height: 300px !default;
+$filemanager-overlay-content-max-height: 400px !default;
+$filemanager-overlay-content-max-width-2: 340px !default;
+$filemanager-overlay-content-min-height-2: 180px !default;
+$filemanager-overlay-content-max-height-2: 180px !default;
+$filemanager-progressbox-cancel-button-margin-top: 5px !default;
+
+$filemanager-progress-title-font-size: 18px !default;
+$filemanager-progress-title-font-weight: 600 !default;
+$filemanager-progress-bold-font-weight: 600 !default;
+
 .dx-filemanager {
-  height: 500px;
-  border: 1px solid;
+  height: $filemanager-root-height;
+  border: $filemanager-root-border;
 
   .dx-filemanager-wrapper {
     height: 100%;
@@ -20,25 +79,25 @@
 
   .dx-filemanager-notification-popup {
     & .dx-overlay-content {
-      min-width: 240px;
+      min-width: $filemanager-overlay-content-min-width;
       max-width: 93vw;
 
       @media (min-width: 431px) {
-        max-width: 400px;
+        max-width: $filemanager-overlay-content-max-width;
       }
     }
 
     .dx-popup-content {
-      padding: 15px;
+      padding: $filemanager-popup-content-padding;
 
       .dx-filemanager-progress-box {
-        padding: 5px 0 0;
+        padding: $filemanager-progress-box-padding;
       }
     }
 
     .dx-filemanager-notification-common {
-      padding-bottom: 10px;
-      border-bottom-width: 1px;
+      padding-bottom: $filemanager-notification-common-padding-bottom;
+      border-bottom-width: $filemanager-notification-common-border-bottom-width;
       border-bottom-style: solid;
     }
 
@@ -48,61 +107,61 @@
   }
 
   .dx-drawer-shrink .dx-filemanager-progress-panel {
-    border-left-width: 1px;
+    border-left-width: $filemanager-progress-panel-border-left-width;
     border-left-style: solid;
   }
 
   .dx-filemanager-progress-panel {
-    width: 340px;
+    width: $filemanager-progress-panel-width;
     height: 100%;
 
     .dx-filemanager-progress-panel-container {
-      padding: 10px 20px 20px 20px;
+      padding: $filemanager-progress-panel-container-padding;
     }
 
     .dx-filemanager-progress-panel-title {
       display: flex;
       align-items: flex-start;
-      padding: 0 0 5px 10px;
+      padding: $filemanager-progress-panel-title-padding;
 
       .dx-filemanager-progress-panel-title-text {
         flex: 1 1 auto;
         align-self: center;
-        font-size: 18px;
-        font-weight: 600;
+        font-size: $filemanager-progress-title-font-size;
+        font-weight: $filemanager-progress-title-font-weight;
       }
     }
 
     .dx-filemanager-progress-panel-common .dx-filemanager-progress-box-common {
-      font-weight: 600;
+      font-weight: $filemanager-progress-bold-font-weight;
     }
 
     .dx-filemanager-progress-panel-separator {
-      height: 20px;
+      height: $filemanager-progress-panel-separator-height;
     }
 
     .dx-filemanager-i.dx-filemanager-i-cancel {
-      width: 16px;
-      height: 16px;
+      width: $filemanager-i-cancel-width;
+      height: $filemanager-i-cancel-height;
     }
 
     .dx-filemanager-progress-panel-details > .dx-filemanager-progress-box {
-      margin-bottom: 8px;
-      border-radius: 2px;
+      margin-bottom: $filemanager-progress-box-margin-bottom;
+      border-radius: $filemanager-progress-box-border-radius;
     }
   }
 
   .dx-filemanager-progress-box {
-    padding: 10px 0 10px 10px;
+    padding: $filemanager-progress-box-padding-2;
     display: flex;
     align-items: center;
 
     &.dx-filemanager-progress-box-without-close-button {
-      padding-right: 10px;
+      padding-right: $filemanager-progress-box-without-close-button-padding-right;
     }
 
     .dx-filemanager-progress-box-image {
-      margin-right: 10px;
+      margin-right: $filemanager-progress-box-image-margin-right;
     }
 
     .dx-filemanager-progress-box-wrapper {
@@ -111,42 +170,42 @@
     }
 
     .dx-filemanager-progress-box-common {
-      padding: 5px 0;
+      padding: $filemanager-progress-box-common-padding;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
 
     .dx-filemanager-progress-box-progress-bar {
-      padding: 5px 0;
+      padding: $filemanager-progress-box-common-padding;
     }
 
     .dx-filemanager-progress-box-status {
-      padding: 5px 0;
+      padding: $filemanager-progress-box-common-padding;
     }
 
     .dx-filemanager-progress-box-close-button {
-      margin-top: 9px;
-      margin-left: 5px;
+      margin-top: $filemanager-progress-box-close-button-margin-top;
+      margin-left: $filemanager-progress-box-close-button-margin-left;
     }
   }
 
   .dx-filemanager-progress-box-error {
-    border-radius: 2px;
+    border-radius: $filemanager-progress-box-border-radius;
     display: inline-block;
     border-width: 0;
-    padding: 2px 8px 3px;
+    padding: $filemanager-progress-box-error-padding;
     font-size: 0.85em;
     line-height: normal;
     word-wrap: break-word;
     overflow-y: auto;
-    max-height: 150px;
+    max-height: $filemanager-progress-box-error-max-height;
   }
 
   .dx-filemanager-toolbar {
     .dx-filemanager-toolbar-separator-item {
-      width: 1px;
-      margin-right: 5px;
+      width: $filemanager-toolbar-separator-item-width;
+      margin-right: $filemanager-toolbar-separator-item-margin-right;
     }
   }
 
@@ -158,7 +217,7 @@
   .dx-filemanager-container {
     display: flex;
     height: 100%;
-    border-top: 1px solid;
+    border-top: $filemanager-container-border-top;
     box-sizing: border-box;
     overflow: hidden;
 
@@ -167,7 +226,7 @@
     }
 
     .dx-filemanager-dirs-panel {
-      padding: 5px 10px;
+      padding: $filemanager-dirs-panel-padding;
       height: 100%;
       width: 100%;
       display: block;
@@ -175,7 +234,7 @@
 
     .dx-drawer-opened {
       .dx-splitter-bar.dx-state-disabled {
-        width: 1px;
+        width: $filemanager-toolbar-separator-item-width;
       }
     }
 
@@ -188,8 +247,8 @@
       width: 30%;
 
       &.dx-drawer-panel-content-initial {
-        min-width: 250px;
-        max-width: 300px;
+        min-width: $filemanager-drawer-panel-content-initial-min-width;
+        max-width: $filemanager-drawer-panel-content-initial-max-width;
       }
 
       &.dx-drawer-panel-content-adaptive {
@@ -203,8 +262,8 @@
   }
 
   .dx-filemanager-breadcrumbs {
-    padding: 2px 11px;
-    border-bottom: 1px solid;
+    padding: $filemanager-breadcrumbs-padding;
+    border-bottom: $filemanager-breadcrumbs-border-bottom;
 
     .dx-menu-item-content {
       padding-left: 0;
@@ -212,20 +271,20 @@
     }
 
     .dx-filemanager-breadcrumbs-parent-folder-item .dx-menu-item-content {
-      padding-left: 2px;
-      padding-right: 2px;
+      padding-left: $filemanager-menu-item-content-padding-left;
+      padding-right: $filemanager-menu-item-content-padding-right;
     }
 
     .dx-filemanager-breadcrumbs-separator-item .dx-menu-item-content {
-      width: 1px;
+      width: $filemanager-toolbar-separator-item-width;
       padding-left: 0;
       padding-right: 0;
-      margin: 0 10px;
+      margin: $filemanager-menu-item-content-margin;
     }
 
     .dx-filemanager-breadcrumbs-path-separator-item .dx-menu-item-content {
-      padding-left: 1px;
-      padding-right: 1px;
+      padding-left: $filemanager-menu-item-content-padding-left-2;
+      padding-right: $filemanager-menu-item-content-padding-right-2;
     }
 
     .dx-filemanager-breadcrumbs-separator-item,
@@ -291,7 +350,7 @@
       overflow-x: hidden;
       overflow-y: auto;
       box-sizing: border-box;
-      padding: 5px;
+      padding: $filemanager-thumbnails-view-port-padding;
 
       .dx-filemanager-thumbnails-container {
         user-select: none;
@@ -302,15 +361,15 @@
         text-align: center;
         cursor: pointer;
         white-space: nowrap;
-        width: 100px;
-        height: 100px;
-        border: 1px dashed transparent;
-        margin: 5px;
+        width: $filemanager-thumbnails-item-width;
+        height: $filemanager-thumbnails-item-height;
+        border: $filemanager-thumbnails-item-border;
+        margin: $filemanager-thumbnails-item-margin;
         box-sizing: border-box;
 
         .dx-filemanager-thumbnails-item-content {
           overflow: hidden;
-          padding: 13px 0 10px;
+          padding: $filemanager-thumbnails-item-content-padding;
 
           .dx-filemanager-thumbnails-item-thumbnail {
             border: 0;
@@ -320,7 +379,7 @@
             border: 0;
             padding: 0;
             margin: 0;
-            height: 10px;
+            height: $filemanager-thumbnails-item-spacer-height;
             visibility: hidden;
           }
 
@@ -394,7 +453,7 @@
     box-shadow: none;
 
     .dx-button-content {
-      padding: 10px 11px;
+      padding: $filemanager-button-content-padding;
     }
 
     i {
@@ -444,21 +503,21 @@
 }
 
 .dx-filemanager-dialog-popup > .dx-overlay-content {
-  min-width: 300px;
-  max-width: 400px;
-  min-height: 300px;
-  max-height: 400px;
+  min-width: $filemanager-overlay-content-min-width-2;
+  max-width: $filemanager-overlay-content-max-width;
+  min-height: $filemanager-overlay-content-min-height;
+  max-height: $filemanager-overlay-content-max-height;
 }
 
 .dx-filemanager-dialog-name-editor-popup > .dx-overlay-content {
-  max-width: 340px;
-  min-height: 180px;
-  max-height: 180px;
+  max-width: $filemanager-overlay-content-max-width-2;
+  min-height: $filemanager-overlay-content-min-height-2;
+  max-height: $filemanager-overlay-content-max-height-2;
 }
 
 .dx-filemanager-dialog-delete-item-popup > .dx-overlay-content {
-  max-width: 340px;
-  min-height: 180px;
+  max-width: $filemanager-overlay-content-max-width-2;
+  min-height: $filemanager-overlay-content-min-height-2;
 
   .dx-popup-content .dx-filemanager-dialog-delete-item {
     overflow-wrap: break-word;
@@ -467,16 +526,16 @@
 
 .dx-filemanager-progresspanel {
   box-sizing: border-box;
-  padding: 5px;
+  padding: $filemanager-thumbnails-view-port-padding;
 
   .dx-filemanager-progressbox {
     float: left;
     width: 100%;
-    padding-bottom: 10px;
+    padding-bottom: $filemanager-notification-common-padding-bottom;
   }
 
   .dx-filemanager-progressbox-cancel-button {
-    margin-top: 5px;
+    margin-top: $filemanager-progressbox-cancel-button-margin-top;
     float: right;
   }
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/filterBuilder/_common.scss b/packages/devextreme-scss/scss/widgets/base/filterBuilder/_common.scss
index 9b75f0c399aa..5c5d228908c6 100644
--- a/packages/devextreme-scss/scss/widgets/base/filterBuilder/_common.scss
+++ b/packages/devextreme-scss/scss/widgets/base/filterBuilder/_common.scss
@@ -1,3 +1,18 @@
+$filterbuilder-range-separator-opacity: null !default;
+$filterbuilder-action-icon-margin-left: null !default;
+$filterbuilder-action-icon-margin-right: null !default;
+$filterbuilder-group-content-padding-right: null !default;
+$filterbuilder-range-separator-margin: null !default;
+$filterbuilder-item-value-text-min-width: null !default;
+$filterbuilder-item-value-text-padding: null !default;
+$filterbuilder-action-icon-padding: null !default;
+$filterbuilder-group-content-padding-left: null !default;
+$filterbuilder-treeview-item-padding-left: null !default;
+$filterbuilder-treeview-item-padding-right: null !default;
+$filterbuilder-treeview-node-margin-left: null !default;
+$filterbuilder-treeview-node-margin-right: null !default;
+$filterbuilder-scrollable-max-height: null !default;
+
 // adduse
 
 
@@ -5,14 +20,14 @@
   &.dx-rtl {
     .dx-filterbuilder-text,
     .dx-filterbuilder-action-icon {
-      margin-left: 5px;
+      margin-left: $filterbuilder-action-icon-margin-left;
       margin-right: 0;
     }
 
     .dx-filterbuilder-group {
       .dx-filterbuilder-group-content .dx-filterbuilder-group-content {
         padding-left: 0;
-        padding-right: 26px;
+        padding-right: $filterbuilder-group-content-padding-right;
       }
     }
   }
@@ -20,7 +35,7 @@
   .dx-filterbuilder-text,
   .dx-filterbuilder-action-icon {
     margin-left: 0;
-    margin-right: 5px;
+    margin-right: $filterbuilder-action-icon-margin-right;
   }
 
   .dx-filterbuilder-text,
@@ -47,16 +62,16 @@
 
         .dx-filterbuilder-text-separator,
         .dx-filterbuilder-range-separator {
-          margin: 0 7px;
-          opacity: 0.3;
+          margin: $filterbuilder-range-separator-margin;
+          opacity: $filterbuilder-range-separator-opacity;
         }
 
         &.dx-filterbuilder-group-operation,
         &.dx-filterbuilder-item-field,
         &.dx-filterbuilder-item-operation,
         .dx-filterbuilder-item-value-text {
-          min-width: 20px;
-          padding: 2px 7px 3px 7px;
+          min-width: $filterbuilder-item-value-text-min-width;
+          padding: $filterbuilder-item-value-text-padding;
         }
 
         .dx-texteditor {
@@ -73,13 +88,13 @@
         position: relative;
 
         &.dx-filterbuilder-action-icon {
-          padding: 5px 8px;
+          padding: $filterbuilder-action-icon-padding;
         }
       }
     }
 
     .dx-filterbuilder-group-content .dx-filterbuilder-group-content {
-      padding-left: 26px;
+      padding-left: $filterbuilder-group-content-padding-left;
     }
   }
 
@@ -94,12 +109,12 @@
 
 .dx-filterbuilder-operations {
   .dx-treeview-item {
-    padding-left: 5px;
+    padding-left: $filterbuilder-treeview-item-padding-left;
   }
 
   .dx-rtl {
     .dx-treeview-item {
-      padding-right: 5px;
+      padding-right: $filterbuilder-treeview-item-padding-right;
     }
   }
 }
@@ -112,7 +127,7 @@
       padding-left: 0;
 
       .dx-treeview-node-container-opened {
-        margin-left: 15px;
+        margin-left: $filterbuilder-treeview-node-margin-left;
       }
     }
 
@@ -121,7 +136,7 @@
         padding-right: 0;
 
         .dx-treeview-node-container-opened {
-          margin-right: 15px;
+          margin-right: $filterbuilder-treeview-node-margin-right;
         }
       }
     }
@@ -136,7 +151,7 @@
   }
 
   .dx-scrollable-container {
-    max-height: 360px;
+    max-height: $filterbuilder-scrollable-max-height;
   }
 
   .dx-menu-items-container {
diff --git a/packages/devextreme-scss/scss/widgets/base/filterBuilder/_index.scss b/packages/devextreme-scss/scss/widgets/base/filterBuilder/_index.scss
index 5ad7c17718aa..49e83c6dc4c7 100644
--- a/packages/devextreme-scss/scss/widgets/base/filterBuilder/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/filterBuilder/_index.scss
@@ -22,7 +22,38 @@ $filterbuilder-remove-icon-focus-color: null !default;
 $filterbuilder-menu-icon-color: null !default;
 
 @use "../icon_fonts" as *;
-@use "./common";
+$filterbuilder-range-separator-opacity: 0.3 !default;
+
+$filterbuilder-action-icon-margin-left: 5px !default;
+$filterbuilder-action-icon-margin-right: 5px !default;
+$filterbuilder-group-content-padding-right: 26px !default;
+$filterbuilder-range-separator-margin: 0 7px !default;
+$filterbuilder-item-value-text-min-width: 20px !default;
+$filterbuilder-item-value-text-padding: 2px 7px 3px 7px !default;
+$filterbuilder-action-icon-padding: 5px 8px !default;
+$filterbuilder-group-content-padding-left: 26px !default;
+$filterbuilder-treeview-item-padding-left: 5px !default;
+$filterbuilder-treeview-item-padding-right: 5px !default;
+$filterbuilder-treeview-node-margin-left: 15px !default;
+$filterbuilder-treeview-node-margin-right: 15px !default;
+$filterbuilder-scrollable-max-height: 360px !default;
+
+@use "./common" with (
+  $filterbuilder-range-separator-opacity: $filterbuilder-range-separator-opacity,
+  $filterbuilder-action-icon-margin-left: $filterbuilder-action-icon-margin-left,
+  $filterbuilder-action-icon-margin-right: $filterbuilder-action-icon-margin-right,
+  $filterbuilder-group-content-padding-right: $filterbuilder-group-content-padding-right,
+  $filterbuilder-range-separator-margin: $filterbuilder-range-separator-margin,
+  $filterbuilder-item-value-text-min-width: $filterbuilder-item-value-text-min-width,
+  $filterbuilder-item-value-text-padding: $filterbuilder-item-value-text-padding,
+  $filterbuilder-action-icon-padding: $filterbuilder-action-icon-padding,
+  $filterbuilder-group-content-padding-left: $filterbuilder-group-content-padding-left,
+  $filterbuilder-treeview-item-padding-left: $filterbuilder-treeview-item-padding-left,
+  $filterbuilder-treeview-item-padding-right: $filterbuilder-treeview-item-padding-right,
+  $filterbuilder-treeview-node-margin-left: $filterbuilder-treeview-node-margin-left,
+  $filterbuilder-treeview-node-margin-right: $filterbuilder-treeview-node-margin-right,
+  $filterbuilder-scrollable-max-height: $filterbuilder-scrollable-max-height,
+);
 
 .dx-filterbuilder {
   background-color: $filterbuilder-bg;
diff --git a/packages/devextreme-scss/scss/widgets/base/list/_index.scss b/packages/devextreme-scss/scss/widgets/base/list/_index.scss
index 883acb9f31ed..dda661d29886 100644
--- a/packages/devextreme-scss/scss/widgets/base/list/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/list/_index.scss
@@ -4,6 +4,8 @@
 // adduse
 
 
+$list-response-wait-opacity: 0.5 !default;
+
 $list-searchbox-margin-bottom: 5px;
 
 .dx-list {
@@ -95,7 +97,7 @@ $list-searchbox-margin-bottom: 5px;
 
 
 .dx-list-item-response-wait {
-  opacity: 0.5;
+  opacity: $list-response-wait-opacity;
   transition: opacity 0.2s linear;
 }
 
diff --git a/packages/devextreme-scss/scss/widgets/base/pivotGrid/_index.scss b/packages/devextreme-scss/scss/widgets/base/pivotGrid/_index.scss
index 9438cab26234..c738eac43866 100644
--- a/packages/devextreme-scss/scss/widgets/base/pivotGrid/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/pivotGrid/_index.scss
@@ -1,3 +1,24 @@
+// Design sizing values (parametrizable; dxdsfluent injects tokens)
+$pivotgrid-position-indicator-vertical-height: 2px !default;
+$pivotgrid-position-indicator-horizontal-width: 2px !default;
+$pivotgrid-position-indicator-last-margin-left: 3px !default;
+$pivotgrid-area-box-margin-bottom: 4px !default;
+$pivotgrid-expand-icon-container-outline: 2px solid !default;
+$pivotgrid-toolbar-margin-right: 10px !default;
+$pivotgrid-field-chooser-button-margin-right: 4px !default;
+$pivotgrid-button-margin: 1px !default;
+$pivotgrid-last-cell-min-width: 50px !default;
+$pivotgrid-icon-sorted-margin-left: 5px !default;
+$pivotgrid-fields-area-head-padding: 0 2px !default;
+$pivotgrid-treeview-search-margin: 5px !default;
+$pivotgrid-area-padding: 5px !default;
+$pivotgrid-area-fields-margin-top-2: 3px !default;
+$pivotgrid-position-indicator-last-margin-left-2: 1px !default;
+$pivotgrid-toolbar-margin-left: 10px !default;
+$pivotgrid-field-chooser-button-margin-left: 4px !default;
+$pivotgrid-fields-area-head-padding-left: 2px !default;
+$pivotgrid-icon-sorted-margin-right: 5px !default;
+
 $pivotgrid-drag-header-border-color: null !default;
 $pivotgrid-drag-header-first-shadow-color: null !default;
 $pivotgrid-drag-header-second-shadow-color: null !default;
@@ -22,6 +43,7 @@ $pivotgrid-button-top-padding: null !default;
 @use "../mixins" as *;
 @use "../icon_fonts" as *;
 @use "./common";
+@use "sass:meta";
 
 $pivotgrid-drag-header-border: 1px solid;
 $pivotgrid-drag-header-first-shadow: 0 0 1px $pivotgrid-drag-header-first-shadow-color;
@@ -30,7 +52,7 @@ $pivotgrid-border-width: 1px;
 $pivotgrid-border: $pivotgrid-border-width solid;
 $pivotgrid-icon-size: 14px;
 $pivotgrid-common-field-padding: 2px;
-$pivotgrid-filter-area-border-spacing: $pivotgrid-common-left-right-padding - $pivotgrid-common-field-padding $pivotgrid-header-top-bottom-padding - $pivotgrid-common-field-padding;
+$pivotgrid-filter-area-border-spacing: if(meta.type-of($pivotgrid-common-left-right-padding) == number and meta.type-of($pivotgrid-common-field-padding) == number, $pivotgrid-common-left-right-padding - $pivotgrid-common-field-padding, calc(#{$pivotgrid-common-left-right-padding} - #{$pivotgrid-common-field-padding})) if(meta.type-of($pivotgrid-header-top-bottom-padding) == number and meta.type-of($pivotgrid-common-field-padding) == number, $pivotgrid-header-top-bottom-padding - $pivotgrid-common-field-padding, calc(#{$pivotgrid-header-top-bottom-padding} - #{$pivotgrid-common-field-padding}));
 $pivotgrid-expand-icon-offset: -5px;
 $pivotgrid-expand-icon-text-offset: 0;
 
@@ -41,7 +63,7 @@ $pivotgrid-expand-icon-text-offset: 0;
     &.dx-position-indicator-vertical {
       margin-top: -4px;
       margin-left: -1px;
-      height: 2px;
+      height: $pivotgrid-position-indicator-vertical-height;
 
       &.dx-position-indicator-last {
         margin-top: -3px;
@@ -50,10 +72,10 @@ $pivotgrid-expand-icon-text-offset: 0;
 
     &.dx-position-indicator-horizontal {
       margin-left: -3px;
-      width: 2px;
+      width: $pivotgrid-position-indicator-horizontal-width;
 
       &.dx-position-indicator-last {
-        margin-left: 3px;
+        margin-left: $pivotgrid-position-indicator-last-margin-left;
       }
     }
   }
@@ -105,7 +127,7 @@ $pivotgrid-expand-icon-text-offset: 0;
 
   .dx-area-field.dx-area-box {
     background-color: $pivotgrid-area-background;
-    margin-bottom: 4px;
+    margin-bottom: $pivotgrid-area-box-margin-bottom;
     border: $pivotgrid-border;
     border-color: $pivotgrid-border-color;
     padding: $pivotgrid-common-top-bottom-padding $pivotgrid-common-left-right-padding;
@@ -128,14 +150,14 @@ $pivotgrid-expand-icon-text-offset: 0;
 
 .dx-pivotgrid {
   td:has(> .dx-expand-icon-container:focus-visible) {
-    outline: 2px solid;
+    outline: $pivotgrid-expand-icon-container-outline;
     outline-color: $pivotgrid-accent-color;
     outline-offset: -2px;
   }
 
   .dx-pivotgrid-horizontal-headers td:focus-visible,
   .dx-pivotgrid-vertical-headers td:focus-visible {
-    outline: 2px solid;
+    outline: $pivotgrid-expand-icon-container-outline;
     outline-color: $pivotgrid-accent-color;
     outline-offset: -2px;
   }
@@ -147,7 +169,7 @@ $pivotgrid-expand-icon-text-offset: 0;
   .dx-column-header,
   .dx-filter-header {
     .dx-pivotgrid-toolbar {
-      margin-right: 10px;
+      margin-right: $pivotgrid-toolbar-margin-right;
       float: right;
       display: inline-block;
       position: relative;
@@ -158,7 +180,7 @@ $pivotgrid-expand-icon-text-offset: 0;
       }
 
       .dx-pivotgrid-field-chooser-button {
-        margin-right: 4px;
+        margin-right: $pivotgrid-field-chooser-button-margin-right;
       }
     }
   }
@@ -237,7 +259,7 @@ $pivotgrid-expand-icon-text-offset: 0;
 
     .dx-pivotgrid-toolbar {
       .dx-button {
-        margin: 1px;
+        margin: $pivotgrid-button-margin;
       }
     }
   }
@@ -283,9 +305,9 @@ $pivotgrid-expand-icon-text-offset: 0;
 
   .dx-group-connector {
     position: absolute;
-    width: 2px;
+    width: $pivotgrid-position-indicator-horizontal-width;
     top: 50%;
-    height: 2px;
+    height: $pivotgrid-position-indicator-vertical-height;
     margin-top: -1px;
     background-color: $pivotgrid-border-color;
 
@@ -361,7 +383,7 @@ $pivotgrid-expand-icon-text-offset: 0;
     td {
 
       // max-width: 150px;
-      min-width: 50px;
+      min-width: $pivotgrid-last-cell-min-width;
       border-right: $pivotgrid-border;
       border-right-color: $pivotgrid-border-color;
     }
@@ -481,7 +503,7 @@ $pivotgrid-expand-icon-text-offset: 0;
 
   .dx-icon-sorted {
     display: inline-block;
-    margin-left: 5px;
+    margin-left: $pivotgrid-icon-sorted-margin-left;
     width: $pivotgrid-icon-size;
   }
 
@@ -491,7 +513,7 @@ $pivotgrid-expand-icon-text-offset: 0;
 
     .dx-pivotgrid-fields-area-head {
       td {
-        padding: 0 2px;
+        padding: $pivotgrid-fields-area-head-padding;
       }
     }
   }
@@ -513,7 +535,7 @@ $pivotgrid-expand-icon-text-offset: 0;
   }
 
   .dx-treeview-search {
-    margin: 5px;
+    margin: $pivotgrid-treeview-search-margin;
   }
 
   .dx-area-icon {
@@ -522,7 +544,7 @@ $pivotgrid-expand-icon-text-offset: 0;
   }
 
   .dx-area {
-    padding: 5px;
+    padding: $pivotgrid-area-padding;
     display: flex;
     flex-grow: 1;
     flex-direction: column;
@@ -530,7 +552,7 @@ $pivotgrid-expand-icon-text-offset: 0;
     @include flexible-scrollable();
 
     .dx-area-fields {
-      margin-top: 3px;
+      margin-top: $pivotgrid-area-fields-margin-top-2;
       border: $pivotgrid-border;
       border-color: $pivotgrid-border-color;
       display: flex;
@@ -544,7 +566,7 @@ $pivotgrid-expand-icon-text-offset: 0;
   }
 
   .dx-area-fields[group] {
-    padding: 5px;
+    padding: $pivotgrid-area-padding;
     background-color: $pivotgrid-totalcolor;
     display: flex;
   }
@@ -562,7 +584,7 @@ $pivotgrid-expand-icon-text-offset: 0;
         margin-left: -3px;
 
         &.dx-position-indicator-last {
-          margin-left: 1px;
+          margin-left: $pivotgrid-position-indicator-last-margin-left-2;
         }
       }
     }
@@ -578,12 +600,12 @@ $pivotgrid-expand-icon-text-offset: 0;
     .dx-filter-header {
       .dx-pivotgrid-toolbar {
         margin-right: 0;
-        margin-left: 10px;
+        margin-left: $pivotgrid-toolbar-margin-left;
         float: left;
 
         .dx-pivotgrid-field-chooser-button {
           margin-right: 0;
-          margin-left: 4px;
+          margin-left: $pivotgrid-field-chooser-button-margin-left;
         }
       }
     }
@@ -591,7 +613,7 @@ $pivotgrid-expand-icon-text-offset: 0;
     .dx-column-header {
       .dx-pivotgrid-fields-area-head {
         tr > td:first-child {
-          padding-left: 2px;
+          padding-left: $pivotgrid-fields-area-head-padding-left;
           padding-right: 0;
         }
       }
@@ -699,7 +721,7 @@ $pivotgrid-expand-icon-text-offset: 0;
 
     .dx-icon-sorted {
       margin-left: 0;
-      margin-right: 5px;
+      margin-right: $pivotgrid-icon-sorted-margin-right;
     }
 
     .dx-pivotgridfieldchooser-container .dx-col {
diff --git a/packages/devextreme-scss/scss/widgets/base/radioButton/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/radioButton/_mixins.scss
index 0081edf94f26..31668dcbb25a 100644
--- a/packages/devextreme-scss/scss/widgets/base/radioButton/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/base/radioButton/_mixins.scss
@@ -1,4 +1,5 @@
 @use "sass:math";
+@use "sass:meta";
 
 @mixin dx-radiobutton-icon-mixin(
   $icon-size,
@@ -9,7 +10,7 @@
   $ripple-transition: all 0s ease 0s,
 ) {
   $border-radius: 50%;
-  $dot-icon-border-width: math.div($icon-size - $border-width * 2 - $dot-size, 2);
+  $dot-icon-border-width: if(meta.type-of($icon-size) == number and meta.type-of($border-width) == number and meta.type-of($dot-size) == number, math.div($icon-size - $border-width * 2 - $dot-size, 2), calc((#{$icon-size} - #{$border-width} * 2 - #{$dot-size}) / 2));
 
   .dx-radiobutton-icon {
     position: relative;
diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss
index 9a868e452bed..026ddfbb015c 100644
--- a/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss
@@ -45,7 +45,10 @@ $agenda-appointment-recurrence-icon-color: null !default;
 @use "../mixins" as *;
 @use "../icon_fonts" as *;
 @use "./common";
+$scheduler-tooltip-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15) !default;
+
 @use "./tooltip" with (
+  $scheduler-tooltip-shadow: $scheduler-tooltip-shadow,
   $scheduler-appointment-base-color: $scheduler-appointment-base-color,
   $scheduler-tooltip-appointment-text-color: $scheduler-tooltip-appointment-text-color,
   $scheduler-appointment-overlay-bg: $scheduler-appointment-overlay-bg,
@@ -64,7 +67,7 @@ $scheduler-vertical-appointment-hovering-shadow: inset 0 $scheduler-hovered-appo
 $scheduler-vertical-appointment-shadow: inset 0 2px 0 0 $scheduler-appointment-start-color;
 $scheduler-vertical-appointment-resizing-shadow: inset 0 -2px 0 0 $scheduler-appointment-start-color, $scheduler-vertical-appointment-shadow;
 
-$scheduler-appointment-dragging-shadow: 7px 7px 15px 0 rgba(50, 50, 50, 0.2);
+$scheduler-appointment-dragging-shadow: 7px 7px 15px 0 rgba(50, 50, 50, 0.2) !default;
 
 $scheduler-horizontal-appointment-resizable-hovering-shadow: inset $scheduler-hovered-appointment-top-shadow-size 0 0 0 $scheduler-appointment-start-color, inset -2px 0 0 0 $scheduler-appointment-start-color;
 $scheduler-horizontal-appointment-resizable-hovering-shadow-rtl: inset (-$scheduler-hovered-appointment-top-shadow-size) 0 0 0 $scheduler-appointment-start-color, inset 2px 0 0 0 $scheduler-appointment-start-color;
@@ -95,11 +98,28 @@ $scheduler-time-indicator-size: 1px;
 $scheduler-time-indicator-top: 14px;
 $scheduler-time-indicator-left: 12px;
 
-$scheduler-time-indicator-shadow-color: rgba(255, 255, 255, 0.1);
+$scheduler-time-indicator-shadow-color: rgba(255, 255, 255, 0.1) !default;
 $scheduler-time-indicator-shadow: 0 1px 0 0 $scheduler-time-indicator-shadow-color;
 $scheduler-time-indicator-text-shadow: $scheduler-time-indicator-shadow-color 1px 0 0;
 
+$scheduler-appointment-icon-font-size: 18px !default;
+$scheduler-appointment-date-opacity: 0.7 !default;
+$scheduler-appointment-resizing-opacity: 0.7 !default;
+$scheduler-appointment-disabled-opacity: 0.6 !default;
+$scheduler-appointment-drag-source-opacity: 0.7 !default;
+$agenda-appointment-title-font-weight: 700 !default;
+$agenda-appointment-details-font-size: 12px !default;
+$agenda-appointment-details-opacity: 0.7 !default;
+
 @use "./appointment" with (
+  $scheduler-appointment-icon-font-size: $scheduler-appointment-icon-font-size,
+  $scheduler-appointment-date-opacity: $scheduler-appointment-date-opacity,
+  $scheduler-appointment-resizing-opacity: $scheduler-appointment-resizing-opacity,
+  $scheduler-appointment-disabled-opacity: $scheduler-appointment-disabled-opacity,
+  $scheduler-appointment-drag-source-opacity: $scheduler-appointment-drag-source-opacity,
+  $agenda-appointment-title-font-weight: $agenda-appointment-title-font-weight,
+  $agenda-appointment-details-font-size: $agenda-appointment-details-font-size,
+  $agenda-appointment-details-opacity: $agenda-appointment-details-opacity,
   $scheduler-transparent-top-border: $scheduler-transparent-top-border,
   $scheduler-appointment-base-color: $scheduler-appointment-base-color,
   $scheduler-appointment-text-color: $scheduler-appointment-text-color,
@@ -122,6 +142,18 @@ $scheduler-time-indicator-text-shadow: $scheduler-time-indicator-shadow-color 1p
   $agenda-appointment-active-bg: $agenda-appointment-active-bg,
   $agenda-appointment-title-font-size: $agenda-appointment-title-font-size
 );
+$scheduler-views-header-border: 2px solid !default;
+$scheduler-views-empty-cell-border-bottom: 1px solid !default;
+$scheduler-views-empty-cell-border-right: 1px solid !default;
+$scheduler-views-empty-cell-border-left: 1px solid !default;
+$scheduler-views-first-child-border-left: 1px solid transparent !default;
+$scheduler-views-time-panel-border-bottom: 1px solid transparent !default;
+$scheduler-views-group-header-padding: 0 5px !default;
+$scheduler-views-group-header-padding-alt: 0 5px 0 10px !default;
+$scheduler-views-time-indicator-height: 1px !default;
+$scheduler-views-group-header-content-height: 40px !default;
+$scheduler-views-vertical-group-min-height: 100px !default;
+
 @use "./views" with (
   $scheduler-workspace-background-color: $scheduler-workspace-background-color,
   $scheduler-workspace-accent-color: $scheduler-workspace-accent-color,
@@ -149,6 +181,17 @@ $scheduler-time-indicator-text-shadow: $scheduler-time-indicator-shadow-color 1p
   $scheduler-first-month-cell-background-color: $scheduler-first-month-cell-background-color,
 
   $scheduler-panel-text-color: $scheduler-panel-text-color,
+  $scheduler-views-header-border: $scheduler-views-header-border,
+  $scheduler-views-empty-cell-border-bottom: $scheduler-views-empty-cell-border-bottom,
+  $scheduler-views-empty-cell-border-right: $scheduler-views-empty-cell-border-right,
+  $scheduler-views-empty-cell-border-left: $scheduler-views-empty-cell-border-left,
+  $scheduler-views-first-child-border-left: $scheduler-views-first-child-border-left,
+  $scheduler-views-time-panel-border-bottom: $scheduler-views-time-panel-border-bottom,
+  $scheduler-views-group-header-padding: $scheduler-views-group-header-padding,
+  $scheduler-views-group-header-padding-alt: $scheduler-views-group-header-padding-alt,
+  $scheduler-views-time-indicator-height: $scheduler-views-time-indicator-height,
+  $scheduler-views-group-header-content-height: $scheduler-views-group-header-content-height,
+  $scheduler-views-vertical-group-min-height: $scheduler-views-vertical-group-min-height,
 );
 
 @function calculate-small-left-column-size($size) {
diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/_tooltip.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/_tooltip.scss
index ef43001ff74c..35463df8d4b5 100644
--- a/packages/devextreme-scss/scss/widgets/base/scheduler/_tooltip.scss
+++ b/packages/devextreme-scss/scss/widgets/base/scheduler/_tooltip.scss
@@ -1,5 +1,6 @@
 @use "./mixins" as *;
 
+$scheduler-tooltip-shadow: null !default;
 $scheduler-appointment-base-color: null !default;
 $scheduler-tooltip-appointment-text-color: null !default;
 $scheduler-appointment-overlay-bg: null !default;
@@ -24,7 +25,7 @@ $scheduler-tooltip-list-focused-bg: null !default;
   }
 
   .dx-overlay-content {
-    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15);
+    box-shadow: $scheduler-tooltip-shadow;
   }
 
   .dx-tooltip-appointment-item {
diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/appointment/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/appointment/_index.scss
index 2e0706a69763..880ff59cd416 100644
--- a/packages/devextreme-scss/scss/widgets/base/scheduler/appointment/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/scheduler/appointment/_index.scss
@@ -1,3 +1,8 @@
+$scheduler-appointment-icon-font-size: null !default;
+$scheduler-appointment-date-opacity: null !default;
+$scheduler-appointment-resizing-opacity: null !default;
+$scheduler-appointment-disabled-opacity: null !default;
+$scheduler-appointment-drag-source-opacity: null !default;
 $scheduler-transparent-top-border: null !default;
 $scheduler-appointment-base-color: null !default;
 $scheduler-appointment-text-color: null !default;
@@ -18,9 +23,17 @@ $agenda-appointment-text-color: null !default;
 $agenda-appointment-recurrence-icon-color: null !default;
 $agenda-appointment-hover-bg: null !default;
 $agenda-appointment-active-bg: null !default;
+$agenda-appointment-title-font-weight: null !default;
+$agenda-appointment-details-font-size: null !default;
+$agenda-appointment-details-opacity: null !default;
 $agenda-appointment-title-font-size: null !default;
 
 @use "./regular" with (
+  $appointment-icon-font-size: $scheduler-appointment-icon-font-size,
+  $appointment-date-opacity: $scheduler-appointment-date-opacity,
+  $appointment-resizing-opacity: $scheduler-appointment-resizing-opacity,
+  $appointment-disabled-opacity: $scheduler-appointment-disabled-opacity,
+  $appointment-drag-source-opacity: $scheduler-appointment-drag-source-opacity,
   $transparent-top-border: $scheduler-transparent-top-border,
   $appointment-base-color: $scheduler-appointment-base-color,
   $appointment-text-color: $scheduler-appointment-text-color,
@@ -38,6 +51,9 @@ $agenda-appointment-title-font-size: null !default;
   $reduced-icon-offset: $scheduler-reduced-icon-offset
 );
 @use "./agenda" with (
+  $title-font-weight: $agenda-appointment-title-font-weight,
+  $details-font-size: $agenda-appointment-details-font-size,
+  $details-opacity: $agenda-appointment-details-opacity,
   $marker-base-color: $scheduler-appointment-base-color,
   $title-font-size: $agenda-appointment-title-font-size,
   $text-color: $agenda-appointment-text-color,
diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/appointment/agenda/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/appointment/agenda/_index.scss
index b6ab9b94d858..f79676acdafb 100644
--- a/packages/devextreme-scss/scss/widgets/base/scheduler/appointment/agenda/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/scheduler/appointment/agenda/_index.scss
@@ -6,6 +6,9 @@ $recurrence-icon-color: null !default;
 $hover-bg: null !default;
 $active-bg: null !default;
 $active-color: null !default;
+$title-font-weight: null !default;
+$details-font-size: null !default;
+$details-opacity: null !default;
 $title-font-size: null !default;
 
 .dx-scheduler-agenda {
@@ -62,14 +65,14 @@ $title-font-size: null !default;
   .dx-scheduler-appointment-title {
     @include use-text-overflow-ellipsis();
 
-    font-weight: 700;
+    font-weight: $title-font-weight;
     font-size: $title-font-size;
   }
 
   .dx-scheduler-appointment-content-details {
     display: flex;
-    font-size: 12px;
-    opacity: 0.7;
+    font-size: $details-font-size;
+    opacity: $details-opacity;
   }
 
   .dx-scheduler-appointment-content-allday {
diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/appointment/regular/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/appointment/regular/_index.scss
index 3855fdb3bb56..7766c3e40c88 100644
--- a/packages/devextreme-scss/scss/widgets/base/scheduler/appointment/regular/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/scheduler/appointment/regular/_index.scss
@@ -2,6 +2,11 @@
 @use "../../../mixins" as *;
 @use "../../../icon_fonts" as *;
 
+$appointment-icon-font-size: null !default;
+$appointment-date-opacity: null !default;
+$appointment-resizing-opacity: null !default;
+$appointment-disabled-opacity: null !default;
+$appointment-drag-source-opacity: null !default;
 $transparent-top-border: null !default;
 $appointment-base-color: null !default;
 $appointment-text-color: null !default;
@@ -25,7 +30,7 @@ $reduced-icon-offset: null !default;
   @include dx-icon($name);
 
   top: 3px;
-  font-size: 18px;
+  font-size: $appointment-icon-font-size;
   position: absolute;
   right: $reduced-icon-offset;
 }
@@ -76,7 +81,7 @@ $reduced-icon-offset: null !default;
 }
 
 .dx-scheduler-appointment-content-date {
-  opacity: 0.7;
+  opacity: $appointment-date-opacity;
   display: inline-block;
   white-space: pre-wrap;
 }
@@ -130,7 +135,7 @@ $reduced-icon-offset: null !default;
 
   &.dx-resizable-resizing {
     z-index: 1000;
-    opacity: 0.7;
+    opacity: $appointment-resizing-opacity;
   }
 
   .dx-resizable-handle-left {
@@ -159,12 +164,12 @@ $reduced-icon-offset: null !default;
 
   &.dx-state-disabled {
     cursor: default;
-    opacity: 0.6;
+    opacity: $appointment-disabled-opacity;
     pointer-events: auto;
   }
 
   &.dx-scheduler-appointment-drag-source {
-    opacity: 0.7;
+    opacity: $appointment-drag-source-opacity;
   }
 }
 
diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/views/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/views/_index.scss
index af44f6164aae..24db8a574e20 100644
--- a/packages/devextreme-scss/scss/widgets/base/scheduler/views/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/scheduler/views/_index.scss
@@ -1,3 +1,4 @@
+@use "sass:meta";
 @use "../../mixins" as *;
 @use "sass:math";
 
@@ -27,6 +28,17 @@ $scheduler-workspace-month-text-color: null !default;
 $scheduler-first-month-cell-background-color: null !default;
 
 $scheduler-panel-text-color: null !default;
+$scheduler-views-header-border: null !default;
+$scheduler-views-empty-cell-border-bottom: null !default;
+$scheduler-views-empty-cell-border-right: null !default;
+$scheduler-views-empty-cell-border-left: null !default;
+$scheduler-views-first-child-border-left: null !default;
+$scheduler-views-time-panel-border-bottom: null !default;
+$scheduler-views-group-header-padding: null !default;
+$scheduler-views-group-header-padding-alt: null !default;
+$scheduler-views-time-indicator-height: null !default;
+$scheduler-views-group-header-content-height: null !default;
+$scheduler-views-vertical-group-min-height: null !default;
 
 $scheduler-timepanel-cell-offset: 20px;
 $scheduler-workspace-info-font-size: 20px;
@@ -38,7 +50,7 @@ $scheduler-workspace-date-table-cell-height: 50px;
 $scheduler-all-day-table-cell-height: $scheduler-workspace-date-table-cell-height * 1.5;
 $scheduler-collapsed-all-day-table-cell-height: $scheduler-workspace-date-table-cell-height * 0.5;
 $scheduler-vertical-grouped-all-day-table-cell-height: $scheduler-workspace-date-table-cell-height;
-$scheduler-header-panel-table-cell-height: $scheduler-workspace-date-table-cell-height - 10px;
+$scheduler-header-panel-table-cell-height: if(meta.type-of($scheduler-workspace-date-table-cell-height) == number, $scheduler-workspace-date-table-cell-height - 10px, calc(#{$scheduler-workspace-date-table-cell-height} - 10px));
 $scheduler-group-header-table-cell-height: 30px;
 
 $scheduler-group-header-table-cell-width: 80px;
@@ -84,7 +96,7 @@ $scheduler-month-date-text-padding: 6px;
 
   &::before {
     position: absolute;
-    top: $scheduler-header-panel-table-cell-height - $scheduler-current-time-cell-border-size - 1;
+    top: if(meta.type-of($scheduler-header-panel-table-cell-height) == number and meta.type-of($scheduler-current-time-cell-border-size) == number, $scheduler-header-panel-table-cell-height - $scheduler-current-time-cell-border-size - 1, calc(#{$scheduler-header-panel-table-cell-height} - #{$scheduler-current-time-cell-border-size} - 1px));
     right: 0;
     width: 100%;
     height: $scheduler-current-time-cell-border-size;
@@ -190,12 +202,12 @@ $scheduler-month-date-text-padding: 6px;
 
   &:not(.dx-scheduler-work-space-all-day):not(.dx-scheduler-work-space-month):not(.dx-scheduler-timeline) {
     .dx-scheduler-header-panel {
-      border-bottom: 2px solid;
+      border-bottom: $scheduler-views-header-border;
       border-bottom-color: $scheduler-base-border-color;
     }
 
     .dx-scheduler-header-panel-empty-cell {
-      border-bottom: 2px solid;
+      border-bottom: $scheduler-views-header-border;
       border-bottom-color: $scheduler-base-border-color;
     }
 
@@ -230,9 +242,9 @@ $scheduler-month-date-text-padding: 6px;
   align-items: flex-end;
   flex-shrink: 0;
   width: 0;
-  border-bottom: 1px solid;
+  border-bottom: $scheduler-views-empty-cell-border-bottom;
   border-bottom-color: $scheduler-base-border-color;
-  border-right: 1px solid;
+  border-right: $scheduler-views-empty-cell-border-right;
   border-right-color: $scheduler-base-border-color;
 }
 
@@ -319,7 +331,7 @@ $scheduler-month-date-text-padding: 6px;
       @include flex-container(row, nowrap);
 
       flex: 1 1 0;
-      padding: 0 5px;
+      padding: $scheduler-views-group-header-padding;
       height: auto;
       width: $scheduler-left-column-width;
       justify-content: flex-start;
@@ -498,7 +510,7 @@ $scheduler-month-date-text-padding: 6px;
   border-left-color: $scheduler-base-border-color;
 
   &:first-child {
-    border-left: 1px solid transparent;
+    border-left: $scheduler-views-first-child-border-left;
   }
 
   @include dx-overflow();
@@ -509,7 +521,7 @@ $scheduler-month-date-text-padding: 6px;
   position: relative;
 
   .dx-scheduler-all-day-table-cell {
-    border-bottom: 2px solid;
+    border-bottom: $scheduler-views-header-border;
     border-bottom-color: $scheduler-base-border-color;
   }
 }
@@ -523,7 +535,7 @@ $scheduler-month-date-text-padding: 6px;
   height: $scheduler-all-day-table-cell-height;
   position: relative;
   text-align: center;
-  border-bottom: 2px solid;
+  border-bottom: $scheduler-views-header-border;
   border-bottom-color: $scheduler-base-border-color;
 
   @include user-select(none);
@@ -588,7 +600,7 @@ $scheduler-month-date-text-padding: 6px;
   vertical-align: top;
   height: $scheduler-workspace-date-table-cell-height;
   padding-right: $scheduler-timepanel-cell-offset;
-  border-bottom: 1px solid transparent;
+  border-bottom: $scheduler-views-time-panel-border-bottom;
 
   > div {
     margin-top: -13px;
@@ -603,7 +615,7 @@ $scheduler-month-date-text-padding: 6px;
     position: absolute;
     bottom: -1px;
     width: 10%;
-    height: 1px;
+    height: $scheduler-views-time-indicator-height;
     right: 0;
     background-color: $scheduler-base-border-color;
   }
@@ -687,7 +699,7 @@ $scheduler-month-date-text-padding: 6px;
 
     .dx-scheduler-group-header-content {
       display: flex;
-      height: 40px;
+      height: $scheduler-views-group-header-content-height;
 
       > div {
         margin: auto;
@@ -725,7 +737,7 @@ $scheduler-month-date-text-padding: 6px;
 .dx-scheduler-work-space-vertical-grouped {
   .dx-scheduler-work-space-vertical-group-table {
     height: 100%;
-    min-height: 100px;
+    min-height: $scheduler-views-vertical-group-min-height;
     border-top: $scheduler-base-border;
     border-top-color: $scheduler-base-border-color;
     border-spacing: 0;
@@ -770,7 +782,7 @@ $scheduler-month-date-text-padding: 6px;
 
   .dx-scheduler-date-table-cell {
     &.dx-scheduler-last-group-cell {
-      border-bottom: 2px solid;
+      border-bottom: $scheduler-views-header-border;
       border-bottom-color: $scheduler-base-border-color;
     }
   }
@@ -786,7 +798,7 @@ $scheduler-month-date-text-padding: 6px;
 
 .dx-rtl {
   .dx-scheduler-header-panel-empty-cell {
-    border-left: 1px solid;
+    border-left: $scheduler-views-empty-cell-border-left;
     border-left-color: $scheduler-base-border-color;
     border-right: none;
   }
@@ -862,7 +874,7 @@ $scheduler-month-date-text-padding: 6px;
       }
 
       .dx-scheduler-group-header {
-        padding: 0 5px 0 10px;
+        padding: $scheduler-views-group-header-padding-alt;
       }
 
       &.dx-scheduler-group-column-count-two,
diff --git a/packages/devextreme-scss/scss/widgets/base/switch/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/switch/_mixins.scss
index 54b2b4442bb6..101064353838 100644
--- a/packages/devextreme-scss/scss/widgets/base/switch/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/base/switch/_mixins.scss
@@ -1,3 +1,4 @@
+@use "sass:meta";
 @use "../icon_fonts" as *;
 
 @mixin dx-switch(
@@ -20,10 +21,10 @@
       position: relative;
       padding-top:  $switch-padding,;
       padding-bottom:  $switch-padding,;
-      padding-inline-start: $switch-padding - $switch-container-horizontal-padding;
-      padding-inline-end: $switch-padding + $switch-container-horizontal-padding;
-      inset-inline-start: -$switch-padding;
-      top: -$switch-padding;
+      padding-inline-start: if(meta.type-of($switch-padding) == number and meta.type-of($switch-container-horizontal-padding) == number, $switch-padding - $switch-container-horizontal-padding, calc(#{$switch-padding} - #{$switch-container-horizontal-padding}));
+      padding-inline-end: if(meta.type-of($switch-padding) == number and meta.type-of($switch-container-horizontal-padding) == number, $switch-padding + $switch-container-horizontal-padding, calc(#{$switch-padding} + #{$switch-container-horizontal-padding}));
+      inset-inline-start: if(meta.type-of($switch-padding) == number, -$switch-padding, calc(-1 * #{$switch-padding}));
+      top: if(meta.type-of($switch-padding) == number, -$switch-padding, calc(-1 * #{$switch-padding}));
       overflow: hidden;
       vertical-align: middle;
       box-sizing: content-box;
@@ -353,11 +354,11 @@
     .dx-switch-handle {
       float: right;
       margin-left: 0;
-      margin-right: -$switch-height;
+      margin-right: if(meta.type-of($switch-height) == number, -$switch-height, calc(-1 * #{$switch-height}));
     }
 
     .dx-switch-container {
-      margin: 0 0 0 (-$switch-container-adjustment);
+      margin: 0 0 0 if(meta.type-of($switch-container-adjustment) == number, (-$switch-container-adjustment), calc(-1 * #{$switch-container-adjustment}));
     }
   }
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/textEditor/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/textEditor/_mixins.scss
index a37911b651f9..99501cb5020f 100644
--- a/packages/devextreme-scss/scss/widgets/base/textEditor/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/base/textEditor/_mixins.scss
@@ -1,4 +1,5 @@
 @use "sass:math";
+@use "sass:meta";
 @use "sass:color";
 
 @mixin dx-editor-content-wrapper() {
@@ -18,7 +19,7 @@
     border-top-width: 0;
 
     span {
-      transform: translate(0, -$label-offset-y);
+      transform: translate(0, if(meta.type-of($label-offset-y) == number, -$label-offset-y, calc(-1 * #{$label-offset-y})));
       font-size: $label-font-size;
       margin-top: 0;
       top: 0;
@@ -181,7 +182,7 @@
         font-size: $texteditor-label-font-size;
         top: 0;
         margin-top: 0;
-        transform: translate(0, -$label-offset-y);
+        transform: translate(0, if(meta.type-of($label-offset-y) == number, -$label-offset-y, calc(-1 * #{$label-offset-y})));
         height: $label-active-height;
         line-height: normal;
       }
@@ -237,7 +238,7 @@
             width: 100%;
             position: absolute;
             height: 3px;
-            top: -$label-backdrop-offset-y;
+            top: if(meta.type-of($label-backdrop-offset-y) == number, -$label-backdrop-offset-y, calc(-1 * #{$label-backdrop-offset-y}));
             margin-inline-start: -2px;
             background-color: $label-backdrop-bg;
           }
@@ -312,9 +313,9 @@
           pointer-events: auto;
           font-size: $texteditor-label-outside-font-size;
           margin-top: 0;
-          top: -$label-offset-y-outside;
-          height: #{math.div($texteditor-label-outside-height, $texteditor-label-outside-font-size)}em;
-          line-height: #{math.div($texteditor-label-outside-height, $texteditor-label-outside-font-size)}em;
+          top: if(meta.type-of($label-offset-y-outside) == number, -$label-offset-y-outside, calc(-1 * #{$label-offset-y-outside}));
+          height: if(meta.type-of($texteditor-label-outside-height) == number and meta.type-of($texteditor-label-outside-font-size) == number, #{math.div($texteditor-label-outside-height, $texteditor-label-outside-font-size)}em, $texteditor-label-outside-height);
+          line-height: if(meta.type-of($texteditor-label-outside-height) == number and meta.type-of($texteditor-label-outside-font-size) == number, #{math.div($texteditor-label-outside-height, $texteditor-label-outside-font-size)}em, $texteditor-label-outside-height);
         }
       }
     }
@@ -331,7 +332,7 @@
         }
       }
 
-      $label-empty-margin-top: math.div(-$label-empty-height, 2) + $label-margin-top-diff;
+      $label-empty-margin-top: if(meta.type-of($label-empty-height) == number and meta.type-of($label-margin-top-diff) == number, math.div(-$label-empty-height, 2) + $label-margin-top-diff, calc(#{$label-empty-height} / -2 + #{$label-margin-top-diff}));
 
       &.dx-texteditor-empty {
         @include dx-state-empty(
@@ -434,7 +435,7 @@
         height: $texteditor-label-outside-height;
         line-height: $texteditor-label-outside-height;
         margin-top: 0;
-        top: -$texteditor-label-outside-top-offset;
+        top: if(meta.type-of($texteditor-label-outside-top-offset) == number, -$texteditor-label-outside-top-offset, calc(-1 * #{$texteditor-label-outside-top-offset}));
       }
 
       .dx-label {
@@ -462,7 +463,7 @@
           height: $texteditor-empty-label-height;
           line-height: $texteditor-empty-label-line-height;
           top: 50%;
-          margin-top: math.div(-$texteditor-empty-label-height, 2);
+          margin-top: if(meta.type-of($texteditor-empty-label-height) == number, math.div(-$texteditor-empty-label-height, 2), calc(#{$texteditor-empty-label-height} / -2));
         }
 
         &.dx-textarea {
@@ -549,7 +550,7 @@
         font-size: $texteditor-label-outside-font-size;
         height: $texteditor-label-outside-height;
         line-height: $texteditor-label-outside-height;
-        top: -$texteditor-label-outside-top-offset;
+        top: if(meta.type-of($texteditor-label-outside-top-offset) == number, -$texteditor-label-outside-top-offset, calc(-1 * #{$texteditor-label-outside-top-offset}));
         margin-top: 0;
       }
 
@@ -579,7 +580,7 @@
           height: $texteditor-empty-label-height;
           line-height: $texteditor-empty-label-line-height;
           top: 50%;
-          margin-top: math.div(-$texteditor-empty-label-height, 2);
+          margin-top: if(meta.type-of($texteditor-empty-label-height) == number, math.div(-$texteditor-empty-label-height, 2), calc(#{$texteditor-empty-label-height} / -2));
         }
 
         &.dx-textarea {
@@ -754,7 +755,7 @@
             .dx-button-content {
               display: flex;
               justify-content: center;
-              padding-top: $material-button-vertical-padding - 1px;
+              padding-top: if(meta.type-of($material-button-vertical-padding) == number, $material-button-vertical-padding - 1px, calc(#{$material-button-vertical-padding} - 1px));
 
               .dx-icon {
                 align-self: center;
@@ -808,7 +809,7 @@
           .dx-button-content {
             display: flex;
             justify-content: center;
-            padding-top: $material-button-vertical-padding - 1px;
+            padding-top: if(meta.type-of($material-button-vertical-padding) == number, $material-button-vertical-padding - 1px, calc(#{$material-button-vertical-padding} - 1px));
 
             .dx-icon {
               align-self: center;
diff --git a/packages/devextreme-scss/scss/widgets/base/treeList/_expandable.scss b/packages/devextreme-scss/scss/widgets/base/treeList/_expandable.scss
index 70285b993711..5e7b1c870190 100644
--- a/packages/devextreme-scss/scss/widgets/base/treeList/_expandable.scss
+++ b/packages/devextreme-scss/scss/widgets/base/treeList/_expandable.scss
@@ -1,5 +1,6 @@
 @use "./variables" as *;
 @use "../icon_fonts" as *;
+@use "sass:meta";
 
 .dx-treelist-headers {
   .dx-header-row {
@@ -10,7 +11,7 @@
           float: left;
           width: $treelist-expand-checkbox-size;
           height: 1lh;
-          margin: 0 $treelist-expand-checkbox-right-gap 0 ($treelist-expand-icon-size + $treelist-expand-icon-right-gap);
+          margin: 0 $treelist-expand-checkbox-right-gap 0 if(meta.type-of($treelist-expand-icon-size) == number and meta.type-of($treelist-expand-icon-right-gap) == number, ($treelist-expand-icon-size + $treelist-expand-icon-right-gap), calc(#{$treelist-expand-icon-size} + #{$treelist-expand-icon-right-gap}));
 
           .dx-select-checkbox {
             display: block;
@@ -113,7 +114,7 @@
         &.dx-treelist-select-all {
           .dx-treelist-select-checkbox-container {
             float: right;
-            margin: 0 ($treelist-expand-icon-size + $treelist-expand-icon-right-gap) 0 $treelist-expand-checkbox-right-gap;
+            margin: 0 if(meta.type-of($treelist-expand-icon-size) == number and meta.type-of($treelist-expand-icon-right-gap) == number, ($treelist-expand-icon-size + $treelist-expand-icon-right-gap), calc(#{$treelist-expand-icon-size} + #{$treelist-expand-icon-right-gap})) 0 $treelist-expand-checkbox-right-gap;
           }
         }
       }
diff --git a/packages/devextreme-scss/scss/widgets/base/treeList/_index.scss b/packages/devextreme-scss/scss/widgets/base/treeList/_index.scss
index 045d1d1fc5d0..d786f063cff8 100644
--- a/packages/devextreme-scss/scss/widgets/base/treeList/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/treeList/_index.scss
@@ -12,16 +12,22 @@ $header-filter-color-empty: null !default;
 $base-focus-color: null !default;
 
 @use "sass:color";
+@use "sass:meta";
 @use "../mixins" as *;
 @use "../icon_fonts" as *;
 @use "./common" as *;
 @use "./expandable" as *;
+$treelist-sticky-column-border: 2px solid !default;
+$treelist-cell-focus-outline: 2px solid !default;
+
 @use 'layout/cell' with (
   $treelist-border: $datagrid-border,
   $treelist-border-color: $datagrid-border-color,
   $treelist-base-background-color: $datagrid-base-background-color,
   $treelist-row-error-color: $datagrid-row-error-color,
   $treelist-focused-border-color: $datagrid-focused-border-color,
+  $treelist-sticky-column-border: $treelist-sticky-column-border,
+  $treelist-cell-focus-outline: $treelist-cell-focus-outline,
 );
 
 $treelist-border: $datagrid-border;
@@ -34,6 +40,15 @@ $treelist-focused-border-color: $datagrid-focused-border-color;
 $treelist-text-stub-background-image-path: $datagrid-text-stub-background-image-path;
 $treelist-row-error-color: $datagrid-row-error-color;
 
+
+// Design sizing values (parametrizable; dxdsfluent injects tokens)
+$treelist-header-filter-outline: 2px solid !default;
+$treelist-header-filter-outline-offset: 2px !default;
+$treelist-button-margin-left: 10px !default;
+$treelist-button-margin-top: 10px !default;
+$treelist-error-message-margin-bottom: 20px !default;
+$treelist-button-margin-right: 10px !default;
+
 .dx-treelist-borders {
   > .dx-treelist-headers,
   > .dx-treelist-rowsview,
@@ -127,9 +142,9 @@ $treelist-row-error-color: $datagrid-row-error-color;
 
     &.dx-state-focused .dx-header-row {
       td .dx-header-filter:focus {
-        outline: 2px solid;
+        outline: $treelist-header-filter-outline;
         outline-color: $treelist-focused-border-color;
-        outline-offset: 2px;
+        outline-offset: $treelist-header-filter-outline-offset;
       }
     }
   }
@@ -161,9 +176,9 @@ $treelist-row-error-color: $datagrid-row-error-color;
 
   .dx-treelist-rowsview.dx-state-focused .dx-data-row {
     & > td.dx-command-edit > a.dx-link:focus {
-      outline: 2px solid;
+      outline: $treelist-header-filter-outline;
       outline-color: $datagrid-focused-border-color;
-      outline-offset: 2px;
+      outline-offset: $treelist-header-filter-outline-offset;
     }
 
     &.dx-row-focused > td.dx-command-edit > a.dx-link:focus {
@@ -218,7 +233,7 @@ $treelist-row-error-color: $datagrid-row-error-color;
     .dx-icon-filter:focus,
     .dx-treelist-filter-panel-text:focus,
     .dx-treelist-filter-panel-clear-filter:focus {
-      outline: 2px solid;
+      outline: $treelist-header-filter-outline;
       outline-color: $treelist-focused-border-color;
     }
   }
@@ -228,8 +243,8 @@ $treelist-row-error-color: $datagrid-row-error-color;
   float: right;
 
   .dx-button {
-    margin-left: 10px;
-    margin-top: 10px;
+    margin-left: $treelist-button-margin-left;
+    margin-top: $treelist-button-margin-top;
   }
 }
 
@@ -250,7 +265,7 @@ $treelist-row-error-color: $datagrid-row-error-color;
   @include dx-treelist-error-message();
 
   color: $treelist-row-error-color;
-  margin-bottom: 20px;
+  margin-bottom: $treelist-error-message-margin-bottom;
 }
 
 .dx-rtl {
@@ -273,7 +288,7 @@ $treelist-row-error-color: $datagrid-row-error-color;
 
     .dx-button {
       margin-left: 0;
-      margin-right: 10px;
+      margin-right: $treelist-button-margin-right;
     }
   }
 }
@@ -284,15 +299,15 @@ $treelist-row-error-color: $datagrid-row-error-color;
 
 @keyframes dx-treelist-highlight-change {
   from {
-    background-color: color.change($treelist-base-color, $alpha: 0.08);
+    background-color: if(meta.type-of($treelist-base-color) == color, color.change($treelist-base-color, $alpha: 0.08), rgb(from #{$treelist-base-color} r g b / 0.08));
   }
 
   50% {
-    background-color: color.change($treelist-base-color, $alpha: 0.08);
+    background-color: if(meta.type-of($treelist-base-color) == color, color.change($treelist-base-color, $alpha: 0.08), rgb(from #{$treelist-base-color} r g b / 0.08));
   }
 }
 
 .dx-command-ai-header-button .dx-button.dx-state-focused {
-  outline: 2px solid;
+  outline: $treelist-header-filter-outline;
   outline-color: $treelist-focused-border-color;
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/treeList/layout/cell.scss b/packages/devextreme-scss/scss/widgets/base/treeList/layout/cell.scss
index 6d10c854c402..8550e2160286 100644
--- a/packages/devextreme-scss/scss/widgets/base/treeList/layout/cell.scss
+++ b/packages/devextreme-scss/scss/widgets/base/treeList/layout/cell.scss
@@ -5,6 +5,8 @@ $treelist-border-color: null !default;
 $treelist-base-background-color: null !default;
 $treelist-row-error-color: null !default;
 $treelist-focused-border-color: null !default;
+$treelist-sticky-column-border: null !default;
+$treelist-cell-focus-outline: null !default;
 
 // #region position & z-index
 
@@ -38,9 +40,9 @@ $treelist-focused-border-color: null !default;
 .dx-treelist-container .dx-datagrid-rowsview .dx-virtual-row td.dx-pointer-events-none,
 .dx-treelist-container .dx-datagrid-rowsview .dx-header-row td.dx-pointer-events-none,
 .dx-treelist-container .dx-treelist-headers .dx-row td.dx-pointer-events-none {
-  border-left: 2px solid;
+  border-left: $treelist-sticky-column-border;
   border-left-color: $treelist-border-color;
-  border-right: 2px solid;
+  border-right: $treelist-sticky-column-border;
   border-right-color: $treelist-border-color;
 }
 
@@ -70,13 +72,13 @@ $treelist-focused-border-color: null !default;
 
 // (0,5,1)
 .dx-treelist .dx-treelist-sticky-columns .dx-treelist-table .dx-row td.dx-treelist-sticky-column-border-right {
-  border-right: 2px solid;
+  border-right: $treelist-sticky-column-border;
   border-right-color: $treelist-border-color;
 }
 
 // (0,5,1)
 .dx-treelist .dx-treelist-sticky-columns .dx-treelist-table .dx-row td.dx-treelist-sticky-column-border-left {
-  border-left: 2px solid;
+  border-left: $treelist-sticky-column-border;
   border-left-color: $treelist-border-color;
 }
 
@@ -92,7 +94,7 @@ $treelist-focused-border-color: null !default;
 
 // (0,7,1)
 .dx-treelist:not(.dx-rtl) > .dx-gridbase-container .dx-treelist-table .dx-row > td.dx-treelist-first-cell.dx-treelist-sticky-column-border-left {
-  border-left: 2px solid;
+  border-left: $treelist-sticky-column-border;
   border-left-color: $treelist-border-color;
 }
 
@@ -123,9 +125,9 @@ $treelist-focused-border-color: null !default;
 .dx-rtl .dx-treelist-container .dx-datagrid-rowsview .dx-virtual-row td.dx-pointer-events-none,
 .dx-rtl .dx-treelist-container .dx-datagrid-rowsview .dx-header-row td.dx-pointer-events-none,
 .dx-rtl .dx-treelist-container .dx-treelist-headers .dx-row td.dx-pointer-events-none {
-  border-left: 2px solid;
+  border-left: $treelist-sticky-column-border;
   border-left-color: $treelist-border-color;
-  border-right: 2px solid;
+  border-right: $treelist-sticky-column-border;
   border-right-color: $treelist-border-color;
 }
 
@@ -172,13 +174,13 @@ $treelist-focused-border-color: null !default;
 
 // (0,7,1)
 .dx-rtl > .dx-gridbase-container .dx-treelist-content .dx-treelist-table .dx-row > td.dx-treelist-first-cell.dx-treelist-sticky-column-border-left {
-  border-left: 2px solid;
+  border-left: $treelist-sticky-column-border;
   border-left-color: $treelist-border-color;
 }
 
 // (0,8,0)
 .dx-rtl.dx-treelist .dx-treelist-sticky-columns .dx-treelist-content .dx-treelist-table .dx-row .dx-treelist-column-no-border.dx-treelist-sticky-column-border-left {
-  border-left: 2px solid;
+  border-left: $treelist-sticky-column-border;
   border-left-color: $treelist-border-color;
 }
 
@@ -222,7 +224,7 @@ $treelist-focused-border-color: null !default;
 
 // (0,5,1)
 .dx-treelist-container .dx-treelist-headers.dx-state-focused .dx-header-row td:focus {
-  outline: 2px solid;
+  outline: $treelist-cell-focus-outline;
   outline-color: $treelist-focused-border-color;
   outline-offset: -2px;
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/treeView/_common.scss b/packages/devextreme-scss/scss/widgets/base/treeView/_common.scss
index 9efe8e84d511..8e20ccab66b5 100644
--- a/packages/devextreme-scss/scss/widgets/base/treeView/_common.scss
+++ b/packages/devextreme-scss/scss/widgets/base/treeView/_common.scss
@@ -1,3 +1,5 @@
+$treeview-disabled-opacity: null !default;
+
 @use "../mixins" as *;
 @use "../../base/icon_fonts" as *;
 
@@ -100,7 +102,7 @@ $treeview-searchbox-margin-bottom: 5px;
   }
 
   &.dx-state-disabled {
-    opacity: 0.5;
+    opacity: $treeview-disabled-opacity;
   }
 }
 
diff --git a/packages/devextreme-scss/scss/widgets/base/treeView/_index.scss b/packages/devextreme-scss/scss/widgets/base/treeView/_index.scss
index 4c5e1c10eec3..67a83f513967 100644
--- a/packages/devextreme-scss/scss/widgets/base/treeView/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/treeView/_index.scss
@@ -1,5 +1,10 @@
+$treeview-disabled-opacity: 0.5 !default;
+
 @use 'sass:math';
-@use "./common";
+@use 'sass:meta';
+@use "./common" with (
+  $treeview-disabled-opacity: $treeview-disabled-opacity,
+);
 @use "../../base/icon_fonts" as *;
 
 .dx-treeview-custom-expand-icon,
@@ -83,7 +88,7 @@
   }
 
   .dx-treeview-with-search > .dx-scrollable {
-    height: calc(100% - #{math.round($search-editor-height + $searchbox-margin-bottom)});
+    height: calc(100% - #{if(meta.type-of($search-editor-height) == number and meta.type-of($searchbox-margin-bottom) == number, math.round($search-editor-height + $searchbox-margin-bottom), calc(#{$search-editor-height} + #{$searchbox-margin-bottom}))});
   }
 
   .dx-treeview-select-all-item {
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/_colors.scss
new file mode 100644
index 000000000000..747182b477a9
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/_colors.scss
@@ -0,0 +1,295 @@
+@forward "./variables";
+@use "./variables" as *;
+@use "sass:color";
+@use "./color" as extcolor;
+@use "../../_design-system/variables/ds" as ds;
+
+$color: null !default;
+$mode: null !default;
+
+$fluent-color-accent-modificator: null !default;
+
+/**
+  * $name 10. Accent color
+  * $type color
+  */
+$base-accent: null !default;
+$base-accent-hover: null !default;
+$base-accent-active: null !default;
+$base-accent-selected: null !default;
+
+$fluent-color-theme-modificator: null !default;
+
+/**
+* $name 10. Font family
+* $type text
+*/
+$base-font-family: ds.$font-family-sans-serif !default;
+
+/**
+* $name 30. Page background color
+* $type color
+*/
+$base-typography-bg: null !default;
+
+/**
+* $name 31. Component background color
+* $type color
+*/
+$base-bg: null !default;
+
+/**
+* $name 90. Hover state background color
+* $type color
+*/
+$base-hover-bg: null !default;
+
+/**
+* $name 120. Active state background color
+* $type color
+*/
+$base-active-bg: null !default;
+
+/**
+* $name 130. Selected state background color
+* $type color
+*/
+$base-selected-bg: null !default;
+
+/**
+* $name 40. Border color
+* $type color
+*/
+$base-border-color: null !default;
+$base-border-color-hover: null !default;
+$base-border-color-focused: null !default;
+
+/**
+* $name 41. Border color accessible
+* $type color
+*/
+$base-border-color-accessible: null !default;
+$base-border-color-accessible-hover: null !default;
+$base-border-color-accessible-focused: null !default;
+
+$base-separator-color: null !default;
+
+$base-inverted-bg: null !default;
+$base-shadow-color: null !default;
+
+$base-foreground-disabled: null !default;
+$base-background-disabled: null !default;
+
+/**
+* $name 50. Success color
+* $type color
+*/
+$base-success: null !default;
+
+/**
+* $name 60. Warning color
+* $type color
+*/
+$base-warning: #fde300 !default;
+
+/**
+* $name 70. Danger color
+* $type color
+*/
+$base-danger: null !default;
+$base-danger-hover: null !default;
+$base-danger-active: null !default;
+$base-danger-selected: null !default;
+
+/**
+* $name 20. Text color
+* $type color
+*/
+$base-text-color: null !default;
+$base-inverted-text-color: null !default;
+
+/**
+* $name 20. Label color
+* $type color
+*/
+$base-label-color: null !default;
+
+/**
+* $name 40. Icon color
+* $type color
+*/
+$base-icon-color: null !default;
+
+$base-disabled-opacity: 0.38 !default;
+$base-border-color-disabled: null !default;
+
+$scrollview-pulldown-path: null !default;
+
+
+@if $color == "blue" {
+  $fluent-color-accent-modificator: "blue" !default;
+}
+
+@if $color == "saas" {
+  $fluent-color-accent-modificator: "saas" !default;
+}
+
+@if $mode == "light" {
+  $fluent-color-theme-modificator: "light" !default;
+
+  $base-bg: rgba(255, 255, 255, 1) !default;
+
+  @if $color == "blue" {
+    $base-hover-bg: color.adjust($base-bg, $lightness: -3.9%, $space: hsl) !default;
+    $base-typography-bg: rgba(250, 250, 250, 1) !default;
+
+    $base-accent: rgba(15, 108, 189, 1) !default;
+    $base-success: rgba(16, 124, 16, 1) !default;
+    $base-danger: rgba(209, 52, 56, 1) !default;
+    $base-text-color: rgba(36, 36, 36, 1) !default;
+    $base-label-color: color.adjust($base-text-color, $lightness: 29.80%, $space: hsl) !default;
+    $base-icon-color: color.adjust($base-text-color, $lightness: 23.92%, $space: hsl) !default;
+    $base-border-color: rgba(224, 224, 224, 1) !default;
+    $base-border-color-accessible: color.adjust($base-border-color, $lightness: -49.8%, $space: hsl) !default;
+    $base-shadow-color: #000 !default;
+  }
+
+  @if $color == "saas" {
+    $base-accent: #5486ff !default;
+    $base-typography-bg: #FAFBFF !default;
+
+    $base-hover-bg: color.mix(#FFF, $base-accent, 85%) !default;
+
+    $base-success: #19914B !default;
+    $base-danger: #DC2828 !default;
+    $base-text-color: #21293b !default;
+    $base-label-color: color.adjust($base-text-color, $lightness: 19%, $space: hsl) !default;
+    $base-icon-color: color.adjust($base-text-color, $lightness: 10%, $space: hsl) !default;
+    $base-border-color: #e5e8f0 !default;
+    $base-border-color-accessible: color.adjust($base-border-color, $lightness: -20%, $space: hsl) !default;
+    $base-shadow-color: #3D4A6C !default;
+  }
+
+  $base-accent-hover: color.adjust($base-accent, $saturation: -4.18%, $space: hsl, $lightness: -4.71%) !default;
+  $base-accent-active: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -1deg, $saturation: -4.65%, $lightness: -9.61%) !default;
+  $base-accent-selected: color.adjust($base-accent-active, $saturation: -2.02%, $space: hsl, $lightness: -4.71%) !default;
+
+  $base-foreground-disabled: color.adjust($base-text-color, $lightness: 60%, $space: hsl) !default;
+
+  $base-selected-bg: color.adjust($base-hover-bg, $lightness: -3.92%, $space: hsl) !default;
+  $base-active-bg: color.adjust($base-hover-bg, $lightness: -8.24%, $space: hsl) !default;
+  $base-background-disabled: color.adjust($base-hover-bg, $lightness: -1.96%, $space: hsl) !default;
+
+  $base-border-color-hover: color.adjust($base-border-color, $lightness: -9.8%, $space: hsl) !default;
+  $base-border-color-focused: color.adjust($base-border-color, $lightness: -17.65%, $space: hsl) !default;
+
+  $base-border-color-accessible-hover: color.adjust($base-border-color-accessible, $lightness: -3.92%, $space: hsl) !default;
+  $base-border-color-accessible-focused: color.adjust($base-border-color-accessible-hover, $lightness: -3.92%, $space: hsl) !default;
+  $base-border-color-disabled: $base-border-color !default;
+
+  $base-separator-color: $base-border-color !default;
+
+  $base-inverted-bg: color.adjust($base-bg, $lightness: -100%, $space: hsl) !default;
+
+  $base-inverted-text-color: #fff !default;
+
+  $base-danger-hover: color.adjust($base-danger, $saturation: -3.05%, $space: hsl, $lightness: -5.10%) !default;
+  $base-danger-active: color.adjust($base-danger, $saturation: -3.56%, $space: hsl, $lightness: -35.69%) !default;
+  $base-danger-selected: color.adjust($base-danger, $saturation: -2.78%, $space: hsl, $lightness: -22.55%) !default;
+
+  $scrollview-pulldown-path: data-uri('images/widgets/dxdsfluent/color-schemes/light/pulldown.png') !default;
+}
+
+@if $mode == "dark" {
+  $fluent-color-theme-modificator: "dark" !default;
+
+  @if $color == "blue" {
+    $base-bg: rgba(41, 41, 41, 1) !default;
+    $base-accent: rgba(71, 158, 245, 1) !default;
+    $base-success: #54B054 !default;
+    $base-danger: rgba(227, 125, 128, 1) !default;
+    $base-border-color: rgba(97, 97, 97, 1) !default;
+
+    $base-typography-bg: #1F1F1F !default;
+  }
+
+  @if $color == "saas" {
+    $base-bg: rgba(30, 40, 50, 1) !default;
+    $base-accent: #5492F6 !default;
+    $base-success: #10B230 !default;
+    $base-danger: #F92F2F !default;
+    $base-border-color: #414B5F !default;
+
+    $base-typography-bg: #141E28 !default;
+  }
+
+  $base-accent-hover: color.adjust($base-accent, $saturation: -1.67%, $space: hsl, $lightness: 5.29%) !default;
+  $base-accent-active: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -1deg, $saturation: -16.30%, $lightness: -10.59%) !default;
+  $base-accent-selected: extcolor.adjust-if-not-achromatic($color: $base-accent, $hue: -3deg, $saturation: -9.05%, $lightness: -31.57%) !default;
+
+  $base-text-color: rgba(255, 255, 255, 1) !default;
+  $base-label-color: color.adjust($base-text-color, $lightness: -40.00%, $space: hsl) !default;
+  $base-icon-color: color.adjust($base-text-color, $lightness: -32.16%, $space: hsl) !default;
+  $base-foreground-disabled: color.adjust($base-text-color, $lightness: -63.9%, $space: hsl) !default;
+
+  $base-bg: rgba(41, 41, 41, 1) !default;
+  $base-hover-bg: color.adjust($base-bg, $lightness: 7.8%, $space: hsl) !default;
+  $base-selected-bg: color.adjust($base-bg, $lightness: 5.9%, $space: hsl) !default;
+  $base-active-bg: color.adjust($base-bg, $lightness: -3.9%, $space: hsl) !default;
+  $base-background-disabled: color.adjust($base-bg, $lightness: -8.2%, $space: hsl) !default;
+
+  $base-border-color-hover: color.adjust($base-border-color, $lightness: 7.84%, $space: hsl) !default;
+  $base-border-color-focused: color.adjust($base-border-color, $lightness: 3.92%, $space: hsl) !default;
+  $base-border-color-accessible: color.adjust($base-border-color, $lightness: 29.8%, $space: hsl) !default;
+  $base-border-color-accessible-hover: color.adjust($base-border-color-accessible, $lightness: 6.27%, $space: hsl) !default;
+  $base-border-color-accessible-focused: color.adjust($base-border-color-accessible-hover, $lightness: 3.92%, $space: hsl) !default;
+  $base-border-color-disabled: color.adjust($base-border-color, $lightness: -12.16%, $space: hsl) !default;
+  $base-separator-color: color.adjust($base-border-color, $lightness: -5.88%, $space: hsl) !default;
+
+  $base-inverted-bg: color.adjust($base-bg, $lightness: 100%, $space: hsl) !default;
+  $base-shadow-color: #000 !default;
+  $base-inverted-text-color: #000 !default;
+
+  $base-danger-hover: color.adjust($base-danger, $saturation: 0.44%, $space: hsl, $lightness: 7.45%) !default;
+  $base-danger-active: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 1.8deg, $saturation: -0.9%, $lightness: 28.8%) !default;
+  $base-danger-selected: extcolor.adjust-if-not-achromatic($color: $base-danger, $hue: 0.7deg, $saturation: 1.3%, $lightness: 14.9%);
+
+  $scrollview-pulldown-path: data-uri('images/widgets/dxdsfluent/color-schemes/dark/pulldown.png') !default;
+}
+
+/**
+* $name 100. Focused state text color
+* $type color
+*/
+$base-focus-color: $base-inverted-text-color !default;
+
+/**
+* $name 50. Arrow icon color
+* $type color
+*/
+$base-spin-icon-color: $base-icon-color !default;
+
+/**
+* $name 30. Link color
+* $type color
+*/
+$base-link-color: $base-accent !default;
+
+$base-element-bg: $base-bg !default;
+
+
+:root {
+  --dx-component-color-bg: #{$base-bg};
+  --dx-color-main-bg: #{$base-typography-bg};
+  --dx-color-primary: #{$base-accent};
+  --dx-color-danger: #{$base-danger};
+  --dx-color-success: #{$base-success};
+  --dx-color-warning: #{$base-warning};
+  --dx-color-border: #{$base-border-color};
+  --dx-color-text: #{$base-text-color};
+  --dx-color-icon: #{$base-icon-color};
+  --dx-color-spin-icon: #{$base-spin-icon-color};
+  --dx-color-link: #{$base-link-color};
+  --dx-color-shadow: #{$base-shadow-color};
+  --dx-color-separator: #{$base-separator-color};
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/_design-system.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/_design-system.scss
new file mode 100644
index 000000000000..44b5441a42f8
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/_design-system.scss
@@ -0,0 +1,20 @@
+@use "sass:meta";
+@use "colors";
+
+// The design-tokens package has no "saas" palette yet; use blue until it ships.
+$accent: if(colors.$color == "saas", "blue", colors.$color);
+
+/*
+ * Tier order mirrors the design-tokens package: base scales and palettes, then semantic roles,
+ * then components. The component size tokens (fluent components sizes) are intentionally NOT
+ * emitted: dxdsfluent maps sizes onto the base scales (spacing, font-size, border-radius,
+ * border-width), so the component layout custom properties would never be referenced by any
+ * widget. Only the component color theme is consumed.
+ */
+@include meta.load-css("../../_design-system/base");
+@include meta.load-css("../../_design-system/fluent/base");
+@include meta.load-css("../../_design-system/fluent/accents/#{$accent}");
+@include meta.load-css("../../_design-system/fluent/semantic/typography");
+@include meta.load-css("../../_design-system/fluent/semantic/box-shadow");
+@include meta.load-css("../../_design-system/fluent/semantic/colors/#{colors.$mode}");
+@include meta.load-css("../../_design-system/fluent/components/theme");
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/_index.scss
new file mode 100644
index 000000000000..c104bcdb88ef
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/_index.scss
@@ -0,0 +1,65 @@
+// public widgets
+@use "./box";
+@use "./chat";
+@use "./responsiveBox";
+@use "./button";
+@use "./buttonGroup";
+@use "./scrollView";
+@use "./stepper";
+@use "./splitter";
+@use "./checkBox";
+@use "./switch";
+@use "./tabs";
+@use "./validation";
+@use "./textBox";
+@use "./dropDownBox";
+@use "./informer";
+@use "./list";
+@use "./textArea";
+@use "./numberBox";
+@use "./calendar";
+@use "./dateBox";
+@use "./dateRangeBox";
+@use "./autocomplete";
+@use "./loadIndicator";
+@use "./treeView";
+@use "./menu";
+@use "./selectBox";
+@use "./toolbar";
+@use "./popup";
+@use "./dropDownButton";
+@use "./actionSheet";
+@use "./tileView";
+@use "./toast";
+@use "./popover";
+@use "./progressBar";
+@use "./tooltip";
+@use "./slider";
+@use "./rangeSlider";
+@use "./gallery";
+@use "./lookup";
+@use "./loadPanel";
+@use "./tagBox";
+@use "./radioGroup";
+@use "./accordion";
+@use "./colorBox";
+@use "./dataGrid";
+@use "./treeList";
+@use "./pivotGrid";
+@use "./contextMenu";
+@use "./multiView";
+@use "./tabPanel";
+@use "./fileUploader";
+@use "./scheduler";
+@use "./form";
+@use "./filterBuilder";
+@use "./drawer";
+@use "./htmlEditor";
+@use "./speechToText";
+@use "./speedDialAction";
+@use "./fileManager";
+@use "./diagram";
+@use "./gantt";
+@use "./sortable";
+@use "./map";
+@use "./cardView";
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/_sizes.scss
new file mode 100644
index 000000000000..8902696a03df
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/_sizes.scss
@@ -0,0 +1,87 @@
+$size: null !default;
+
+@use "colors" as *;
+@use "../../_design-system/variables/ds" as ds;
+
+$fluent-size-postfix: null !default;
+$fluent-base-font-size: null !default;
+$fluent-base-inline-widget-height: null !default;
+$fluent-base-inline-block-height: null !default;
+$fluent-base-icon-size: null !default;
+$fluent-base-icon-margin: ds.$spacing-80 !default;
+$fluent-base-inline-horizontal-padding: null !default;
+$fluent-base-border-radius: null !default;
+$fluent-html-editor-add-image-dialog-base-padding: ds.$spacing-50 !default;
+
+/**
+* $name 11. Button height
+* $type text
+*/
+$fluent-button-height: null !default;
+
+/**
+* $name 12. Icon size
+* $type text
+*/
+$fluent-button-icon-size: null !default;
+
+/**
+* $name 13. Icon margin
+* $type text
+*/
+$fluent-button-icon-margin: null !default;
+
+@if $size == "default" {
+  $fluent-size-postfix: "" !default;
+
+  // Font sizes
+  $fluent-base-font-size: ds.$font-size-base-md !default;
+
+  // Base sizes
+  $fluent-base-inline-widget-height: ds.$spacing-320 !default;
+  $fluent-base-inline-block-height: ds.$spacing-200 !default;
+  $fluent-base-icon-size: ds.$spacing-200 !default;
+  $fluent-base-inline-horizontal-padding: ds.$spacing-120 !default;
+  $fluent-base-border-radius: ds.$border-radius-40 !default;
+  $fluent-button-height: ds.$spacing-320 !default;
+  $fluent-button-icon-size: ds.$spacing-200 !default;
+  $fluent-button-icon-margin: ds.$spacing-80 !default;
+}
+
+@if $size == "compact" {
+  $fluent-size-postfix: ".compact" !default;
+
+  // Font sizes
+  $fluent-base-font-size: ds.$font-size-base-sm !default;
+
+  // Base sizes
+  $fluent-base-inline-widget-height: ds.$spacing-240 !default;
+  $fluent-base-inline-block-height: ds.$spacing-160 !default;
+  $fluent-base-icon-size: ds.$spacing-160 !default;
+  $fluent-base-inline-horizontal-padding: ds.$spacing-80 !default;
+  $fluent-base-border-radius: ds.$border-radius-40 !default;
+  $fluent-button-height: ds.$spacing-240 !default;
+  $fluent-button-icon-size: ds.$spacing-160 !default;
+  $fluent-button-icon-margin: ds.$spacing-40 !default;
+}
+
+// Base bordered inline widgets sizes
+$fluent-base-border-width: ds.$border-width-10 !default;
+
+
+/**
+* $name 200. Border radius
+* $type text
+*/
+$base-border-radius: $fluent-base-border-radius !default;
+
+$fluent-base-standard-texteditor-input-horizontal-padding: 0 !default;
+
+
+:root {
+  --dx-component-height: #{$fluent-base-inline-widget-height};
+  --dx-font-size: #{$fluent-base-font-size};
+  --dx-border-width: #{$fluent-base-border-width};
+  --dx-border-radius: #{$fluent-base-border-radius};
+  --dx-font-size-icon: #{$fluent-base-icon-size};
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/_variables.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/_variables.scss
new file mode 100644
index 000000000000..d94d40a78c27
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/_variables.scss
@@ -0,0 +1 @@
+// set the variables for fluent theme
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_colors.scss
new file mode 100644
index 000000000000..3264384e9da6
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_colors.scss
@@ -0,0 +1,24 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$accordion-color: ds.$color-content-neutral-default-rest !default;
+
+/**
+* $name 10. Item title text color
+* $type color
+*/
+$accordion-title-color: inherit !default;
+
+/**
+* $name 20. Item title font size
+* $type text
+*/
+$fluent-accordion-title-font-size: $fluent-base-font-size !default;
+
+$accordion-background-color: transparent !default;
+$accordion-title-active-color: $accordion-color !default;
+$accordion-title-bg-hover: ds.$color-surface-neutral-default-hovered !default;
+$accordion-title-bg-active: ds.$color-surface-neutral-default-hovered !default;
+$accordion-disabled-color: ds.$color-content-neutral-default-disabled !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_index.scss
new file mode 100644
index 000000000000..b22e137d7f80
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_index.scss
@@ -0,0 +1,83 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../../base/accordion";
+
+// adduse
+
+.dx-accordion {
+  background-color: $accordion-background-color;
+  color: $accordion-color;
+}
+
+.dx-accordion-item {
+  transition: margin 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: margin, height;
+
+  &.dx-state-hover {
+    & > .dx-accordion-item-title {
+      background-color: $accordion-title-bg-hover;
+    }
+  }
+
+  &.dx-state-active,
+  &.dx-state-focused {
+    > .dx-accordion-item-title {
+      color: $accordion-title-active-color;
+      background-color: $accordion-title-bg-active;
+    }
+  }
+}
+
+.dx-accordion-item-opened {
+  margin-block: $fluent-accordion-item-opened-margin;
+
+  & > .dx-accordion-item-title {
+    &::before {
+      content: "\f014";
+    }
+  }
+}
+
+.dx-accordion-item-title {
+  border-radius: $accordion-item-border-radius;
+  min-height: $fluent-accordion-title-height;
+  padding: $fluent-accordion-title-vertical-padding $fluent-accordion-title-horizontal-padding;
+
+  &::before {
+    content: "\f016";
+    font-weight: normal;
+    font-size: $accordion-title-icon-size;
+    font-family: DXIcons; // stylelint-disable-line font-family-no-missing-generic-family-keyword, font-family-name-quotes
+    line-height: 100%;
+    margin-inline-end: $accordion-title-icon-margin;
+  }
+
+  .dx-icon {
+    @include dx-icon-sizing($accordion-title-icon-size);
+  }
+}
+
+.dx-accordion-item-title-caption {
+  color: $accordion-title-color;
+  font-size: $fluent-accordion-title-font-size;
+  font-weight: $fluent-accordion-title-font-weight;
+
+  .dx-icon {
+    @include dx-icon-margin($accordion-title-icon-margin);
+  }
+}
+
+.dx-state-disabled {
+  &.dx-accordion {
+    opacity: 1;
+    color: $accordion-disabled-color;
+  }
+}
+
+.dx-accordion-item-body {
+  padding: $fluent-accordion-body-padding;
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_sizes.scss
new file mode 100644
index 000000000000..03179a348a51
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/accordion/_sizes.scss
@@ -0,0 +1,40 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-accordion-title-horizontal-padding: null !default;
+$fluent-accordion-title-vertical-padding: ds.$spacing-60 !default;
+$fluent-accordion-body-padding: null !default;
+$fluent-accordion-title-height: null !default;
+
+$accordion-title-icon-margin: null !default;
+$accordion-title-icon-size: null !default;
+$accordion-item-border-radius: $fluent-base-border-radius !default;
+
+/**
+* $name 10. Item expanded margin
+* $type text
+*/
+$fluent-accordion-item-opened-margin: null !default;
+
+@if $size == "default" {
+  $fluent-accordion-title-horizontal-padding: ds.$spacing-120 !default;
+  $fluent-accordion-body-padding: ds.$spacing-120 !default;
+  $fluent-accordion-title-height: ds.$spacing-440 !default;
+  $accordion-title-icon-margin: ds.$spacing-80 !default;
+  $accordion-title-icon-size: ds.$spacing-200 !default;
+  $fluent-accordion-item-opened-margin: 0 !default;
+}
+
+@else if $size == "compact" {
+  $fluent-accordion-title-horizontal-padding: ds.$spacing-80 !default;
+  $fluent-accordion-body-padding: ds.$spacing-80 !default;
+  $fluent-accordion-title-height: ds.$spacing-320 !default;
+  $accordion-title-icon-margin: ds.$spacing-60 !default;
+  $accordion-title-icon-size: ds.$spacing-160 !default;
+  $fluent-accordion-item-opened-margin: 0 !default;
+}
+
+// Values hoisted from style-file literals (tokenized)
+$fluent-accordion-title-font-weight: ds.$font-weight-500 !default; // dx-no-semantic-role: 500 is off the weight-role scale (400/600/700)
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_colors.scss
new file mode 100644
index 000000000000..89c53a85429e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_colors.scss
@@ -0,0 +1,6 @@
+@use "sass:color";
+@use "../sizes" as *;
+@use "../colors" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_index.scss
new file mode 100644
index 000000000000..98ed5d5c19cd
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_index.scss
@@ -0,0 +1,23 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/actionSheet";
+
+// adduse
+
+
+.dx-actionsheet-container {
+  .dx-actionsheet-item:not(:last-child) {
+    margin: $fluent-actionsheet-item-margin;
+  }
+
+  .dx-button {
+    margin: 0;
+  }
+}
+
+.dx-button.dx-actionsheet-cancel {
+  margin: 0;
+  margin-top: $fluent-actionsheet-item-margin-value;
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_sizes.scss
new file mode 100644
index 000000000000..a31195b33021
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/actionSheet/_sizes.scss
@@ -0,0 +1,7 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-actionsheet-item-margin-value: ds.$spacing-120;
+$fluent-actionsheet-item-margin: 0 0 $fluent-actionsheet-item-margin-value 0 !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_colors.scss
new file mode 100644
index 000000000000..89c53a85429e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_colors.scss
@@ -0,0 +1,6 @@
+@use "sass:color";
+@use "../sizes" as *;
+@use "../colors" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_index.scss
new file mode 100644
index 000000000000..3721d5fd40ad
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_index.scss
@@ -0,0 +1,29 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../common/sizes" as *;
+
+// adduse
+@use "../dropDownList";
+
+@mixin autocomplete-editor-container-offset() {
+  inset-inline-end: $fluent-invalid-badge-horizontal-padding;
+}
+
+.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/dxdsfluent/autocomplete/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_sizes.scss
new file mode 100644
index 000000000000..43b104010f9e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/autocomplete/_sizes.scss
@@ -0,0 +1,4 @@
+@use "../sizes" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_colors.scss
new file mode 100644
index 000000000000..643c59e294d5
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_colors.scss
@@ -0,0 +1,18 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+/**
+* $name 140. Badge text color
+* $type color
+*/
+$badge-color: ds.$badge-color-text-rest !default;
+
+/**
+* $name 150. Badge background color
+* $type color
+*/
+$badge-bg: ds.$badge-color-bg-rest !default;
+
+$badge-text-color-disabled: ds.$badge-color-text-disabled !default;
+$badge-background-color-disabled: ds.$badge-color-bg-disabled !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_index.scss
new file mode 100644
index 000000000000..72216ac1bca3
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_index.scss
@@ -0,0 +1,21 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/badge";
+
+// adduse
+
+.dx-badge {
+  background-color: $badge-bg;
+  color: $badge-color;
+  font-size: $fluent-badge-font-size;
+  padding: $fluent-badge-padding;
+  border-radius: $fluent-badge-border-radius;
+  line-height: $badge-line-height;
+
+  .dx-state-disabled & {
+    color: $badge-text-color-disabled;
+    background-color: $badge-background-color-disabled;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_sizes.scss
new file mode 100644
index 000000000000..5926297b5f3c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/badge/_sizes.scss
@@ -0,0 +1,23 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-badge-padding: null !default;
+$fluent-badge-font-size: null !default;
+$badge-line-height: null !default;
+
+@if $size == "default" {
+  $fluent-badge-padding: 0 ds.$spacing-60 !default;
+  $fluent-badge-font-size: ds.$font-size-caption-md !default;
+  $badge-line-height: ds.$line-height-caption-lg !default;
+}
+
+@else if $size == "compact" {
+  $fluent-badge-padding: 0 ds.$spacing-60 !default;
+  $fluent-badge-font-size: ds.$font-size-caption-sm !default;
+  $badge-line-height: ds.$line-height-caption-md !default;
+}
+
+// Values hoisted from style-file literals (tokenized)
+$fluent-badge-border-radius: ds.$border-radius-full !default; // pill idiom (999em -> radius-full, visually identical)
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/box/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/box/_colors.scss
new file mode 100644
index 000000000000..89c53a85429e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/box/_colors.scss
@@ -0,0 +1,6 @@
+@use "sass:color";
+@use "../sizes" as *;
+@use "../colors" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/box/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/box/_index.scss
new file mode 100644
index 000000000000..0bcc6320f88f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/box/_index.scss
@@ -0,0 +1,13 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/box" with (
+  $box-item-content-font-size: $fluent-box-item-content-font-size,
+);
+
+// adduse
+
+.dx-box-item-content {
+  font-size: $fluent-base-font-size;
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/box/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/box/_sizes.scss
new file mode 100644
index 000000000000..5c162232dc74
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/box/_sizes.scss
@@ -0,0 +1,8 @@
+@use "../../../_design-system/variables/ds" as ds;
+@use "../sizes" as *;
+
+// adduse
+
+
+// Base-layer values injected with design tokens (wave B1)
+$fluent-box-item-content-font-size: ds.$font-size-base-md !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_colors.scss
new file mode 100644
index 000000000000..9280d53881ea
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_colors.scss
@@ -0,0 +1,314 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$button-border-radius: $base-border-radius !default;
+$button-disabled-background: ds.$button-contained-color-bg-disabled !default;
+$button-disabled-icon-opacity: 0.6 !default;
+$button-shadow-color: ds.$color-shadow-key !default;
+
+/**
+* $name 10. Text color
+* $type color
+*/
+$button-normal-color: ds.$button-outline-color-content-rest !default;
+
+/**
+* $name 15. Background color (contained)
+* $type color
+*/
+$button-normal-bg: ds.$button-outline-color-bg-rest !default;
+
+/**
+* $name 16. Background color (outlined)
+* $type color
+*/
+$button-normal-outlined-bg: transparent !default;
+
+/**
+* $name 17. Background color (text)
+* $type color
+*/
+$button-normal-text-bg: transparent !default;
+
+/**
+* $name 20. Selected state text color
+* $type color
+*/
+$button-normal-selected-color: ds.$button-outline-color-content-rest !default;
+
+/**
+* $name 30. Hover state background color
+* $type color
+*/
+$button-normal-hover-bg: ds.$button-outline-color-bg-hovered !default;
+
+/**
+* $name 40. Focused state background color
+* $type color
+*/
+$button-normal-focused-bg: ds.$button-outline-color-bg-hovered !default;
+
+/**
+* $name 50. Active state background color
+* $type color
+*/
+$button-normal-active-bg: ds.$button-outline-color-bg-active !default;
+
+/**
+* $name 25. Selected state background color
+* $type color
+*/
+$button-normal-selected-bg: ds.$color-surface-neutral-alpha-selected !default;
+
+/**
+* $name 10. Text color (contained)
+* $type color
+*/
+$button-default-color: ds.$button-contained-color-content-rest !default;
+
+/**
+* $name 15. Background color
+* $type color
+*/
+$button-default-bg: ds.$button-contained-color-bg-rest !default;
+
+/**
+* $name 20. Selected state text color
+* $type color
+*/
+$button-default-selected-color: ds.$button-contained-color-content-rest !default;
+
+/**
+* $name 30. Hover state background color
+* $type color
+*/
+$button-default-hover-bg: ds.$button-contained-color-bg-hovered !default;
+
+/**
+* $name 40. Focused state background color
+* $type color
+*/
+$button-default-focused-bg: ds.$button-contained-color-bg-hovered !default;
+
+/**
+* $name 50. Active state background color
+* $type color
+*/
+$button-default-active-bg: ds.$button-contained-color-bg-active !default;
+
+/**
+* $name 25. Selected state background color
+* $type color
+*/
+$button-default-selected-bg: ds.$color-surface-primary-default-selected !default;
+
+/**
+* $name 11. Text color (outlined)
+* $type color
+*/
+$button-default-outlined-color: ds.$color-content-primary-default-rest !default;
+$button-default-outlined-border-color: ds.$color-border-primary-default-rest !default;
+
+$button-default-outlined-bg: transparent !default;
+$button-default-outlined-hover-bg: ds.$color-surface-primary-deep-hovered !default;
+$button-default-outlined-focused-bg: ds.$color-surface-primary-deep-hovered !default;
+$button-default-outlined-active-bg: ds.$color-surface-primary-deep-active !default;
+$button-default-outlined-selected-bg: ds.$color-surface-primary-deep-selected !default;
+
+/**
+* $name 11. Text color (text)
+* $type color
+*/
+$button-default-text-color: ds.$color-content-primary-default-rest !default;
+
+/**
+* $name 10. Text color
+* $type color
+*/
+$button-danger-color: ds.$button-contained-color-content-rest !default;
+
+/**
+* $name 15. Background color
+* $type color
+*/
+$button-danger-bg: ds.$color-surface-danger-default-rest !default;
+
+/**
+* $name 20. Selected state text color
+* $type color
+*/
+$button-danger-selected-color: ds.$button-contained-color-content-rest !default;
+
+/**
+* $name 30. Hover state background color
+* $type color
+*/
+$button-danger-hover-bg: ds.$color-surface-danger-default-hovered !default;
+
+/**
+* $name 40. Focused state background color
+* $type color
+*/
+$button-danger-focused-bg: ds.$color-surface-danger-default-hovered !default;
+
+/**
+* $name 50. Active state background color
+* $type color
+*/
+$button-danger-active-bg: ds.$color-surface-danger-default-active !default;
+
+/**
+* $name 25. Selected state background color
+* $type color
+*/
+$button-danger-selected-bg: ds.$color-surface-danger-default-selected !default;
+
+$button-danger-outlined-color: ds.$color-content-danger-default-rest !default;
+$button-danger-outlined-border-color: ds.$color-border-danger-default-rest !default;
+$button-danger-outlined-color-hover: ds.$color-content-danger-default-hovered !default;
+$button-danger-outlined-color-active: ds.$color-content-danger-default-active !default;
+$button-danger-outlined-selected-color: ds.$color-content-danger-default-hovered !default;
+$button-danger-outlined-bg: transparent !default;
+$button-danger-outlined-hover-bg: ds.$color-surface-danger-deep-hovered !default;
+$button-danger-outlined-focused-bg: ds.$color-surface-danger-deep-hovered !default;
+$button-danger-outlined-active-bg: ds.$color-surface-danger-deep-active !default;
+$button-danger-outlined-selected-bg: ds.$color-surface-danger-deep-selected !default;
+
+/**
+* $name 10. Text color
+* $type color
+*/
+$button-success-color: ds.$button-contained-color-content-rest !default;
+
+/**
+* $name 15. Background color
+* $type color
+*/
+$button-success-bg: ds.$color-surface-success-default-rest !default;
+
+/**
+* $name 20. Selected state text color
+* $type color
+*/
+$button-success-selected-color: ds.$button-contained-color-content-rest !default;
+
+/**
+* $name 30. Hover state background color
+* $type color
+*/
+$button-success-hover-bg: ds.$color-surface-success-default-hovered !default;
+
+/**
+* $name 40. Focused state background color
+* $type color
+*/
+$button-success-focused-bg: ds.$color-surface-success-default-hovered !default;
+
+/**
+* $name 50. Active state background color
+* $type color
+*/
+$button-success-active-bg: ds.$color-surface-success-default-active !default;
+
+/**
+* $name 25. Selected state background color
+* $type color
+*/
+$button-success-selected-bg: ds.$color-surface-success-default-selected !default;
+
+$button-success-outlined-color: ds.$color-content-success-default-rest !default;
+$button-success-outlined-border-color: ds.$color-border-success-default-rest !default;
+$button-success-outlined-color-hover: ds.$color-content-success-default-hovered !default;
+$button-success-outlined-color-active: ds.$color-content-success-default-active !default;
+$button-success-outlined-selected-color: ds.$color-content-success-default-hovered !default;
+$button-success-outlined-bg: transparent !default;
+$button-success-outlined-hover-bg: ds.$color-surface-success-deep-hovered !default;
+$button-success-outlined-focused-bg: ds.$color-surface-success-deep-hovered !default;
+$button-success-outlined-active-bg: ds.$color-surface-success-deep-active !default;
+$button-success-outlined-selected-bg: ds.$color-surface-success-deep-selected !default;
+
+$button-default-icon-color: $button-default-color !default;
+$button-normal-icon-color: $button-normal-color !default;
+$button-danger-icon-color: $button-danger-color !default;
+$button-success-icon-color: $button-success-color !default;
+
+$button-disabled-text-color: ds.$button-contained-color-content-disabled !default;
+
+$button-normal-outlined-hover-bg: $button-normal-hover-bg !default;
+$button-normal-outlined-focused-bg: $button-normal-focused-bg !default;
+$button-normal-outlined-active-bg: $button-normal-active-bg !default;
+$button-normal-outlined-selected-bg: $button-normal-selected-bg !default;
+
+$button-normal-text-hover-bg: $button-normal-hover-bg !default;
+$button-normal-text-focused-bg: $button-normal-focused-bg !default;
+$button-normal-text-active-bg: $button-normal-active-bg !default;
+$button-normal-text-selected-bg: $button-normal-selected-bg !default;
+
+/**
+* $name 12. Hover state text color (outlined)
+* $type color
+*/
+$button-default-outlined-color-hover: ds.$color-content-primary-default-hovered !default;
+
+/**
+* $name 13. Active state text color (outlined)
+* $type color
+*/
+$button-default-outlined-color-active: ds.$color-content-primary-default-active !default;
+
+/**
+* $name 21. Selected state text color (outlined)
+* $type color
+*/
+$button-default-outlined-selected-color: ds.$color-content-primary-default-hovered !default;
+
+/**
+* $name 12. Hover state text color (text)
+* $type color
+*/
+$button-default-text-color-hover: ds.$color-content-primary-default-hovered !default;
+
+/**
+* $name 13. Active state text color (text)
+* $type color
+*/
+$button-default-text-color-active: $button-default-outlined-color-active !default;
+
+/**
+* $name 21. Selected state text color (text)
+* $type color
+*/
+$button-default-text-selected-color: ds.$color-content-primary-default-hovered !default;
+
+$button-default-text-bg: transparent !default;
+$button-default-text-hover-bg: $button-default-outlined-hover-bg !default;
+$button-default-text-focused-bg: $button-default-outlined-focused-bg !default;
+$button-default-text-active-bg: $button-default-outlined-active-bg !default;
+$button-default-text-selected-bg: $button-default-outlined-selected-bg !default;
+
+$button-danger-text-color: $button-danger-outlined-color !default;
+$button-danger-text-color-hover: $button-danger-outlined-color-hover !default;
+$button-danger-text-color-active: $button-danger-outlined-color-active !default;
+$button-danger-text-selected-color: $button-danger-outlined-selected-color !default;
+
+$button-danger-text-bg: transparent !default;
+$button-danger-text-hover-bg: $button-danger-outlined-hover-bg !default;
+$button-danger-text-focused-bg: $button-danger-outlined-focused-bg !default;
+$button-danger-text-active-bg: $button-danger-outlined-active-bg !default;
+$button-danger-text-selected-bg: $button-danger-outlined-selected-bg !default;
+
+$button-success-text-color: $button-success-outlined-color !default;
+$button-success-text-color-hover: $button-success-outlined-color-hover !default;
+$button-success-text-color-active: $button-success-outlined-color-active !default;
+$button-success-text-selected-color: $button-success-outlined-selected-color !default;
+
+$button-success-text-bg: transparent !default;
+$button-success-text-hover-bg: $button-success-outlined-hover-bg !default;
+$button-success-text-focused-bg: $button-success-outlined-hover-bg !default;
+$button-success-text-active-bg: $button-success-outlined-active-bg !default;
+$button-success-text-selected-bg: $button-success-outlined-selected-bg !default;
+
+// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
+$button-border-color: ds.$button-outline-color-border-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_index.scss
new file mode 100644
index 000000000000..7a4d6689d907
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_index.scss
@@ -0,0 +1,218 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "mixins" as *;
+@use "../../base/button";
+
+// adduse
+
+.dx-button-content {
+  line-height: $fluent-button-content-line-height;
+}
+
+.dx-button-text {
+  line-height: $fluent-button-text-line-height;
+  text-transform: $fluent-button-text-transform;
+  font-weight: $fluent-button-text-font-weight;
+  letter-spacing: $fluent-button-text-letter-spacing;
+}
+
+.dx-button {
+  @include dx-button-onlyicon-sizing();
+}
+
+.dx-button-has-icon {
+  @include dx-button-onlyicon-sizing();
+}
+
+.dx-button-has-text {
+  @include dx-button-withtext-sizing();
+}
+
+.dx-button-has-icon.dx-button-has-text {
+  @include dx-button-text-and-icon-sizing();
+}
+
+// NOTE: Button styles
+
+.dx-button-mode-contained {
+  &.dx-button-normal {
+    box-shadow: $fluent-button-box-shadow-size $button-shadow-color;
+  }
+}
+
+.dx-button { // stylelint-disable-line no-duplicate-selectors
+  height: $fluent-button-height;
+  position: relative;
+
+  .dx-button-content {
+    position: relative;
+  }
+
+  @include dx-button-styling(
+    $button-normal-bg,
+    $button-normal-color,
+    $button-normal-hover-bg,
+    $button-normal-focused-bg,
+    $button-normal-active-bg,
+    $button-normal-icon-color,
+    $button-normal-selected-bg,
+    $button-normal-selected-color,
+  );
+
+  &.dx-button-default {
+    @include dx-button-styling(
+      $button-default-bg,
+      $button-default-color,
+      $button-default-hover-bg,
+      $button-default-focused-bg,
+      $button-default-active-bg,
+      $button-default-icon-color,
+      $button-default-selected-bg,
+      $button-default-selected-color,
+    );
+  }
+
+  &.dx-button-danger {
+    @include dx-button-styling(
+      $button-danger-bg,
+      $button-danger-color,
+      $button-danger-hover-bg,
+      $button-danger-focused-bg,
+      $button-danger-active-bg,
+      $button-danger-icon-color,
+      $button-danger-selected-bg,
+      $button-danger-selected-color,
+    );
+  }
+
+  &.dx-button-success {
+    @include dx-button-styling(
+      $button-success-bg,
+      $button-success-color,
+      $button-success-hover-bg,
+      $button-success-focused-bg,
+      $button-success-active-bg,
+      $button-success-icon-color,
+      $button-success-selected-bg,
+      $button-success-selected-color,
+    );
+  }
+}
+
+.dx-button-mode-text {
+  @include dx-button-flat-color-styling(
+    $button-normal-color,
+    $button-normal-color,
+    $button-normal-color,
+    $button-normal-text-bg,
+    $button-normal-text-hover-bg,
+    $button-normal-text-focused-bg,
+    $button-normal-text-active-bg,
+    $button-normal-text-selected-bg,
+    $button-normal-selected-color,
+  );
+
+  &.dx-button-default {
+    @include dx-button-flat-color-styling(
+      $button-default-text-color,
+      $button-default-text-color-hover,
+      $button-default-text-color-active,
+      $button-default-text-bg,
+      $button-default-text-hover-bg,
+      $button-default-text-focused-bg,
+      $button-default-text-active-bg,
+      $button-default-text-selected-bg,
+      $button-default-text-selected-color,
+    );
+  }
+
+  &.dx-button-danger {
+    @include dx-button-flat-color-styling(
+      $button-danger-text-color,
+      $button-danger-text-color-hover,
+      $button-danger-text-color-active,
+      $button-danger-text-bg,
+      $button-danger-text-hover-bg,
+      $button-danger-text-focused-bg,
+      $button-danger-text-active-bg,
+      $button-danger-text-selected-bg,
+      $button-danger-text-selected-color,
+    );
+  }
+
+  &.dx-button-success {
+    @include dx-button-flat-color-styling(
+      $button-success-text-color,
+      $button-success-text-color-hover,
+      $button-success-text-color-active,
+      $button-success-text-bg,
+      $button-success-text-hover-bg,
+      $button-success-text-focused-bg,
+      $button-success-text-active-bg,
+      $button-success-text-selected-bg,
+      $button-success-text-selected-color,
+    );
+  }
+}
+
+.dx-button-mode-outlined {
+  @include dx-button-outlined-color-styling(
+    $button-normal-color,
+    $button-normal-color,
+    $button-normal-color,
+    $button-border-color,
+    $button-normal-outlined-bg,
+    $button-normal-outlined-hover-bg,
+    $button-normal-outlined-focused-bg,
+    $button-normal-outlined-active-bg,
+    $button-normal-outlined-selected-bg,
+    $button-normal-selected-color,
+  );
+
+  &.dx-button-default {
+    @include dx-button-outlined-color-styling(
+      $button-default-outlined-color,
+      $button-default-outlined-color-hover,
+      $button-default-outlined-color-active,
+      $button-default-outlined-border-color,
+      $button-default-outlined-bg,
+      $button-default-outlined-hover-bg,
+      $button-default-outlined-focused-bg,
+      $button-default-outlined-active-bg,
+      $button-default-outlined-selected-bg,
+      $button-default-outlined-selected-color,
+    );
+  }
+
+  &.dx-button-danger {
+    @include dx-button-outlined-color-styling(
+      $button-danger-outlined-color,
+      $button-danger-outlined-color-hover,
+      $button-danger-outlined-color-active,
+      $button-danger-outlined-border-color,
+      $button-danger-outlined-bg,
+      $button-danger-outlined-hover-bg,
+      $button-danger-outlined-focused-bg,
+      $button-danger-outlined-active-bg,
+      $button-danger-outlined-selected-bg,
+      $button-danger-outlined-selected-color,
+    );
+  }
+
+  &.dx-button-success {
+    @include dx-button-outlined-color-styling(
+      $button-success-outlined-color,
+      $button-success-outlined-color-hover,
+      $button-success-outlined-color-active,
+      $button-success-outlined-border-color,
+      $button-success-outlined-bg,
+      $button-success-outlined-hover-bg,
+      $button-success-outlined-focused-bg,
+      $button-success-outlined-active-bg,
+      $button-success-outlined-selected-bg,
+      $button-success-outlined-selected-color,
+    );
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_mixins.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_mixins.scss
new file mode 100644
index 000000000000..cebad1772927
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_mixins.scss
@@ -0,0 +1,200 @@
+@use "sass:math";
+@use "sass:color";
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "colors" as *;
+@use "../../base/icon_fonts" as *;
+@use "../../base/button/mixins" as *;
+
+@mixin dx-button-onlyicon-sizing($icon-size: $fluent-button-icon-size) {
+  min-width: $fluent-button-height;
+
+  $button-content-padding: calc((#{$fluent-button-height} - #{$icon-size} - #{$fluent-base-border-width} * 2) / 2);
+
+  @include dx-button-sizing(
+    $button-content-padding,
+    $button-content-padding,
+    $button-content-padding,
+    $icon-size,
+    0
+  );
+}
+
+@mixin dx-button-withtext-sizing() {
+  @include dx-button-sizing(
+    $fluent-button-vertical-padding,
+    $fluent-button-horizontal-padding,
+    $fluent-button-horizontal-padding,
+    $fluent-button-icon-size,
+    calc(#{$fluent-button-icon-size} / 2)
+  );
+}
+
+@mixin dx-button-text-and-icon-sizing() {
+  @include dx-button-sizing(
+    $fluent-button-vertical-padding,
+    $fluent-button-icon-text-padding,
+    $fluent-button-horizontal-padding,
+    $fluent-button-icon-size,
+    $fluent-button-icon-margin,
+  );
+}
+
+
+@mixin dx-button-styling-variant(
+  $background-color,
+  $text-color,
+  $text-color-hover,
+  $text-color-active,
+  $hover-background-color,
+  $focused-background-color,
+  $active-background-color,
+  $icon-color,
+  $selected-background-color: $active-background-color,
+  $selected-color: $text-color,
+) {
+  background-color: $background-color;
+  color: $text-color;
+
+  .dx-icon {
+    color: $icon-color;
+  }
+
+  &.dx-state-selected {
+    background-color: $selected-background-color;
+
+    &,
+    .dx-icon {
+      color: $selected-color;
+    }
+  }
+
+  &.dx-state-hover {
+    background-color: $hover-background-color;
+
+    &,
+    .dx-icon {
+      color: $text-color-hover;
+    }
+  }
+
+  &.dx-state-focused {
+    background-color: $focused-background-color;
+
+    &,
+    .dx-icon {
+      color: $text-color-hover;
+    }
+  }
+
+  &.dx-state-active {
+    background-color: $active-background-color;
+
+    &,
+    .dx-icon {
+      color: $text-color-active;
+    }
+  }
+}
+
+@mixin dx-button-styling(
+  $button-bg,
+  $button-color,
+  $button-hover-bg,
+  $button-focused-bg,
+  $button-active-bg,
+  $button-icon-color,
+  $button-selected-bg,
+  $button-selected-color,
+) {
+  border-radius: $button-border-radius;
+
+  @include dx-button-styling-variant(
+    $button-bg,
+    $button-color,
+    $button-color,
+    $button-color,
+    $button-hover-bg,
+    $button-focused-bg,
+    $button-active-bg,
+    $button-icon-color,
+    $button-selected-bg,
+    $button-selected-color,
+  );
+
+  &.dx-state-disabled {
+    opacity: 1;
+    box-shadow: none;
+
+    .dx-icon {
+      color: $button-disabled-text-color;
+    }
+
+    .dx-button-text {
+      color: $button-disabled-text-color;
+    }
+
+    &.dx-button-mode-contained {
+      background-color: $button-disabled-background;
+    }
+
+    &.dx-button-mode-outlined {
+      border-color: $button-disabled-background;
+    }
+  }
+}
+
+@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: $fluent-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/dxdsfluent/button/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_sizes.scss
new file mode 100644
index 000000000000..61c35d2a5325
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/button/_sizes.scss
@@ -0,0 +1,37 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-button-horizontal-padding: null !default;
+$fluent-button-vertical-padding: null !default;
+$fluent-button-icon-padding: null !default;
+$fluent-button-icon-text-padding: null !default;
+$fluent-button-content-line-height: 0 !default;
+$fluent-button-text-line-height: normal !default;
+$fluent-button-text-transform: none !default;
+$fluent-button-text-font-weight: ds.$font-weight-500 !default; // dx-no-semantic-role: 500 is off the weight-role scale (400/600/700)
+$fluent-button-text-letter-spacing: normal !default;
+
+$fluent-button-box-shadow-size: 0 ds.$spacing-10 ds.$spacing-30 !default;
+
+@if $size == "default" {
+  $fluent-button-horizontal-padding: ds.$spacing-120 !default;
+  $fluent-button-vertical-padding: ds.$spacing-60 !default;
+  $fluent-button-icon-padding: ds.$spacing-60;
+  $fluent-button-icon-text-padding: $fluent-button-horizontal-padding !default;
+}
+
+@else if $size == "compact" {
+  $fluent-button-horizontal-padding: ds.$spacing-80 !default;
+  $fluent-button-vertical-padding: ds.$spacing-40 !default;
+  $fluent-button-icon-padding: ds.$spacing-40 !default;
+  $fluent-button-icon-text-padding: $fluent-button-horizontal-padding !default;
+}
+
+:root {
+  --dx-button-padding-inline: #{$fluent-button-horizontal-padding};
+}
+
+// Values hoisted from style-file literals (tokenized)
+$fluent-button-border-width: ds.$border-width-10 !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_colors.scss
new file mode 100644
index 000000000000..400a4b35f645
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_colors.scss
@@ -0,0 +1,5 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$button-group-separator-color: ds.$separator-color !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_index.scss
new file mode 100644
index 000000000000..3ad28fc12deb
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_index.scss
@@ -0,0 +1,42 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../button/sizes" as *;
+@use "../button/colors" as *;
+@use "../../base/buttonGroup";
+@use "../../base/buttonGroup/mixins" as *;
+
+// adduse
+
+.dx-buttongroup {
+  &.dx-state-disabled {
+    opacity: 1;
+  }
+}
+
+@include dx-buttongroup-sizing(
+  $button-border-radius,
+  1px,
+);
+
+.dx-buttongroup-mode-contained {
+  border-radius: $button-border-radius;
+  box-shadow: $fluent-button-box-shadow-size $button-shadow-color;
+
+  .dx-button-mode-contained {
+    box-shadow: none;
+    border-width: 0;
+    border-style: solid;
+    border-inline-end-width: $fluent-buttongroup-button-mode-contained-border-inline-end-width;
+    border-inline-end-color: $button-group-separator-color;
+
+    &.dx-buttongroup-last-item {
+      border-inline-end-width: 0;
+    }
+  }
+
+  &.dx-state-disabled {
+    box-shadow: none;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_sizes.scss
new file mode 100644
index 000000000000..fdf398539b38
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/buttonGroup/_sizes.scss
@@ -0,0 +1,8 @@
+@use "../../../_design-system/variables/ds" as ds;
+@use "../sizes" as *;
+
+// adduse
+
+
+// Values hoisted from style-file literals (tokenized)
+$fluent-buttongroup-button-mode-contained-border-inline-end-width: ds.$border-width-10 !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_colors.scss
new file mode 100644
index 000000000000..0e9cce1aede4
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_colors.scss
@@ -0,0 +1,45 @@
+@use "../button/colors" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$calendar-color: ds.$color-content-neutral-default-rest !default;
+
+/**
+* $name 20. Navigator text color
+* $type color
+*/
+$calendar-navigator-text-color: $button-normal-color !default;
+
+/**
+* $name 30. Header text color
+* $type color
+*/
+$calendar-header-color: $calendar-color !default;
+
+/**
+* $name 40. Other month text color
+* $type color
+*/
+$calendar-cell-other-color: ds.$color-content-neutral-subdued-rest !default;
+$calendar-bg: transparent !default;
+$calendar-hover-bg: $button-default-outlined-selected-bg !default;
+$calendar-cell-hover-border-color: $calendar-hover-bg !default;
+$calendar-cell-hover-color: $calendar-color !default;
+
+/**
+* $name 50. Selected cell background color
+* $type color
+*/
+$calendar-cell-selected-bg: ds.$color-surface-primary-default-rest !default;
+$calendar-cell-selected-color: ds.$color-content-neutral-default-static-dark-rest !default;
+$calendar-cell-contoured-border-radius: 50% !default;
+$calendar-cell-active-bg: $button-default-outlined-active-bg !default;
+$calendar-cell-contoured-border-color: $calendar-cell-active-bg !default;
+$calendar-invalid-border-color: ds.$color-border-danger-default-rest !default;
+$calendar-invalid-border-color-focused: ds.$color-border-danger-default-hovered !default;
+$calendar-week-number-cell-color: ds.$color-content-neutral-subdued-rest !default;
+$calendar-week-number-cell-bg: ds.$color-surface-neutral-subdued-rest !default;
+$calendar-week-number-border-radius: 0 !default;
+
+$calendar-cell-other-hover-color: $calendar-cell-other-color !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_index.scss
new file mode 100644
index 000000000000..8cb8aaa0fdd7
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_index.scss
@@ -0,0 +1,73 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../button/sizes" as *;
+@use "../button/mixins" as *;
+@use "../../base/calendar/calendar" with (
+  $calendar-week-day-header-font-size: $fluent-calendar-week-day-header-font-size,
+  $calendar-week-day-header-font-weight: $fluent-calendar-week-day-header-font-weight,
+);
+@use "../../base/calendar/mixins" as *;
+
+// adduse
+
+@include dx-calendar-mixin(
+  $calendar-bg,
+  $fluent-calendar-legacy-width,
+  $fluent-calendar-legacy-height,
+  $fluent-calendar-element-padding,
+  $fluent-calendar-footer-button-height,
+  $calendar-invalid-border-color,
+  $calendar-invalid-border-color-focused,
+);
+
+.dx-calendar-navigator-previous-view,
+.dx-calendar-navigator-next-view {
+  @include dx-button-onlyicon-sizing($fluent-base-icon-size);
+}
+
+@include dx-calendar-navigator-mixin(
+  $calendar-navigator-text-color,
+);
+@include dx-calendar-body-mixin(
+  $calendar-week-number-cell-color,
+  $calendar-week-number-cell-bg,
+  $calendar-week-number-border-radius,
+  $fluent-calendar-cell-font-size,
+  $calendar-header-color,
+);
+@include dx-calendar-cell-mixin(
+  $calendar-cell-contoured-border-radius,
+  $calendar-color,
+  $base-border-radius,
+  $calendar-cell-selected-bg,
+  $calendar-hover-bg,
+  $calendar-cell-hover-color,
+  $calendar-cell-active-bg,
+  $calendar-cell-selected-bg,
+  $calendar-cell-selected-color,
+  $calendar-cell-contoured-border-color,
+  $calendar-cell-other-color,
+  $calendar-cell-other-hover-color,
+  $calendar-cell-hover-border-color,
+  999em,
+);
+@include dx-calendar-cell-in-range-mixin(
+  "::before",
+  $calendar-hover-bg,
+  $calendar-cell-hover-border-color,
+  999em,
+  0,
+);
+@include dx-calendar-cell-in-range-mixin(
+  "::after",
+  inherit,
+  $calendar-cell-hover-border-color,
+  999em,
+  1px,
+  '.dx-calendar-cell-range-hover',
+  '.dx-calendar-cell-range-hover-start',
+  '.dx-calendar-cell-range-hover-end',
+);
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_sizes.scss
new file mode 100644
index 000000000000..80caa4f86c35
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/calendar/_sizes.scss
@@ -0,0 +1,33 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-calendar-legacy-width: null !default;
+$fluent-calendar-legacy-height: null !default;
+
+$fluent-calendar-footer-button-height: null !default;
+$fluent-calendar-cell-font-size: null !default;
+
+$fluent-calendar-element-padding: ds.$spacing-80 !default;
+
+@if $size == "default" {
+  $fluent-calendar-legacy-width: 272px !default; // dx-offscale: 272px
+  $fluent-calendar-legacy-height: 264px !default; // dx-offscale: 264px
+
+  $fluent-calendar-cell-font-size: ds.$font-size-base-md !default;
+
+  $fluent-calendar-footer-button-height: ds.$spacing-360 !default;
+}
+
+@else if $size == "compact" {
+  $fluent-calendar-legacy-width: 252px !default; // dx-offscale: 252px
+  $fluent-calendar-legacy-height: 260px !default; // dx-offscale: 260px
+
+  $fluent-calendar-cell-font-size: ds.$font-size-base-sm !default;
+  $fluent-calendar-footer-button-height: ds.$spacing-280 !default;
+}
+
+// Base-layer values injected with design tokens (wave B1)
+$fluent-calendar-week-day-header-font-size: ds.$font-size-caption-sm !default;
+$fluent-calendar-week-day-header-font-weight: ds.$font-weight-500 !default; // dx-no-semantic-role: 500 is off the weight-role scale (400/600/700)
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_colors.scss
new file mode 100644
index 000000000000..39dd71f405d9
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_colors.scss
@@ -0,0 +1,6 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$card-bg: ds.$color-surface-neutral-default-rest !default;
+$card-shadow: ds.$box-shadow-sm !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_index.scss
new file mode 100644
index 000000000000..0c3a26bf3b37
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_index.scss
@@ -0,0 +1,14 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/card";
+
+// adduse
+
+.dx-card {
+  box-shadow: $card-shadow;
+  border-radius: $base-border-radius;
+  background-color: $card-bg;
+  margin: $fluent-card-card-margin;
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_sizes.scss
new file mode 100644
index 000000000000..6cc51572a2a8
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/card/_sizes.scss
@@ -0,0 +1,8 @@
+@use "../../../_design-system/variables/ds" as ds;
+@use "../sizes" as *;
+
+// adduse
+
+
+// Values hoisted from style-file literals (tokenized)
+$fluent-card-card-margin: ds.$spacing-20 ds.$spacing-20 ds.$spacing-30 !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_colors.scss
new file mode 100644
index 000000000000..0f81940bf5fd
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_colors.scss
@@ -0,0 +1,481 @@
+@use '../../../_design-system/variables/ds' as ds;
+@use '../../base/cardView/variables' as *;
+@use '../../base/cardView/header_panel/variables' as *;
+@use '../../base/cardView/header_panel/item/variables' as *;
+@use '../../base/cardView/content_view/content/card/variables' as *;
+@use '../../base/cardView/content_view/content/card/header/variables' as *;
+@use '../../base/cardView/content_view/content/card/cover/variables' as *;
+@use '../../base/cardView/content_view/content/card/content/variables' as *;
+@use '../../base/cardView/content_view/content/variables' as *;
+@use '../../base/cardView/content_view/no_data/variables' as *;
+@use '../../base/cardView/column_chooser/variables' as *;
+@use '../../base/cardView/filter_panel/variables' as *;
+
+// adduse
+
+// Mode/accent is resolved by the design tokens, so the former light/dark branches collapse to one.
+
+// #region COMMON SETTINGS
+
+/**
+* $name 100. Background color
+* $type color
+*/
+$cardview-fluent-common-bg-color: ds.$color-surface-neutral-subdued-rest !default;
+
+/**
+* $name 102. Link color
+* $type color
+*/
+$cardview-fluent-common-link-color: ds.$color-content-primary-default-rest !default;
+
+/**
+* $name 103. Text color
+* $type color
+*/
+$cardview-fluent-common-text-color: ds.$color-content-neutral-default-rest !default;
+
+// #endregion
+
+// #region CARD
+
+/**
+* $name 200. Background color
+* $type color
+*/
+$cardview-fluent-card-bg-color: ds.$color-surface-neutral-default-rest !default;
+
+/**
+* $name 201. Border color
+* $type color
+*/
+$cardview-fluent-card-border-color: ds.$color-border-neutral-default-rest !default;
+
+/**
+* $name 203. Divider color
+* $type color
+*/
+$cardview-fluent-card-divider-color: $cardview-fluent-card-border-color !default;
+
+/**
+* $name 204. Text color
+* $type color
+*/
+$cardview-fluent-card-text-color: $cardview-fluent-common-text-color !default;
+
+/**
+* $name 206. Cover background color
+* $type color
+*/
+$cardview-fluent-card__cover-bg-color: ds.$color-surface-neutral-default-static-light-rest !default;
+
+/**
+* $name 207. "Empty cover" background color
+* $type color
+*/
+$cardview-fluent-card__cover--noimage-bg-color: ds.$color-surface-neutral-deep-rest !default;
+
+/**
+* $name 208. "Empty cover" icon color
+* $type color
+*/
+$cardview-fluent-card__cover--noimage__icon-color: ds.$color-content-neutral-subdued-rest !default;
+
+$cardview-fluent-card--focused-outline-color: ds.$color-border-primary-default-rest !default;
+
+// #endregion
+
+// #region CARD (SELECTED)
+
+/**
+* $name 300. Background color
+* $type color
+*/
+$cardview-fluent-card--selected-bg-color: ds.$color-surface-primary-subdued-rest !default;
+
+/**
+* $name 301. Border color
+* $type color
+*/
+$cardview-fluent-card--selected-border-color: ds.$color-border-primary-default-rest !default;
+
+/**
+* $name 302. Divider color
+* $type color
+*/
+$cardview-fluent-card--selected-divider-color: $cardview-fluent-card--selected-border-color !default;
+
+/**
+* $name 303. Text color
+* $type color
+*/
+$cardview-fluent-card--selected-text-color: $cardview-fluent-card-text-color !default;
+
+/**
+* $name 305. Cover background color
+* $type color
+*/
+$cardview-fluent-card--selected__cover-bg-color: $cardview-fluent-card__cover-bg-color !default;
+
+/**
+* $name 306. "Empty cover" background color
+* $type color
+*/
+$cardview-fluent-card--selected__cover--noimage-bg-color: $cardview-fluent-card__cover--noimage-bg-color !default;
+
+/**
+* $name 307. "Empty cover" icon color
+* $type color
+*/
+$cardview-fluent-card--selected__cover--noimage__icon-color: $cardview-fluent-card__cover--noimage__icon-color !default;
+
+// #endregion
+
+// #region HEADER PANEL ITEM
+
+/**
+* $name 400. Background color
+* $type color
+*/
+$cardview-fluent-header-panel__item-bg-color: ds.$color-surface-neutral-deep-rest !default;
+
+/**
+* $name 401. Border color
+* $type color
+*/
+$cardview-fluent-header-panel__item-border-color: ds.$color-border-neutral-default-rest !default;
+
+/**
+* $name 403. Text color
+* $type color
+*/
+$cardview-fluent-header-panel__item-text-color: $cardview-fluent-common-text-color !default;
+
+/**
+* $name 405. Icon color
+* $type color
+*/
+$cardview-fluent-header-panel__item__icon-color: $cardview-fluent-common-text-color !default;
+
+/**
+* $name 406. Active "Filter" icon color
+* $type color
+*/
+$cardview-fluent-header-panel__item__header-filter-icon--selected-color: ds.$color-content-primary-default-rest !default;
+
+/**
+* $name 407. Sort index text color
+* $type color
+*/
+$cardview-fluent-header-panel__item__sort-index-text-color: $cardview-fluent-common-text-color !default;
+
+$cardview-fluent-header-panel__item--focused-outline-color: ds.$color-border-primary-default-rest !default;
+
+// #endregion
+
+// #region HEADER PANEL ITEM (HOVERED)
+
+/**
+* $name 500. Background color
+* $type color
+*/
+$cardview-fluent-header-panel__item--hovered-bg-color: ds.$color-surface-neutral-deep-hovered !default;
+
+/**
+* $name 501. Border color
+* $type color
+*/
+$cardview-fluent-header-panel__item--hovered-border-color: ds.$color-border-neutral-default-hovered !default;
+
+/**
+* $name 502. Text color
+* $type color
+*/
+$cardview-fluent-header-panel__item--hovered-text-color: $cardview-fluent-header-panel__item-text-color !default;
+
+/**
+* $name 504. Icon color
+* $type color
+*/
+$cardview-fluent-header-panel__item--hovered__icon-color: $cardview-fluent-header-panel__item__icon-color !default;
+
+/**
+* $name 505. Active "Filter" icon color
+* $type color
+*/
+$cardview-fluent-header-panel__item--hovered__header-filter-icon--selected-color: $cardview-fluent-header-panel__item__header-filter-icon--selected-color !default;
+
+/**
+* $name 506. Sort index text color
+* $type color
+*/
+$cardview-fluent-header-panel__item--hovered__sort-index-text-color: $cardview-fluent-header-panel__item__sort-index-text-color !default;
+
+// #endregion
+
+// #region HEADER PANEL ITEM (DISABLED)
+
+/**
+* $name 600. Background color
+* $type color
+*/
+$cardview-fluent-header-panel__item--disabled-bg-color: $cardview-fluent-header-panel__item-bg-color !default;
+
+/**
+* $name 601. Border color
+* $type color
+*/
+$cardview-fluent-header-panel__item--disabled-border-color: $cardview-fluent-header-panel__item-border-color !default;
+
+/**
+* $name 602. Text color
+* $type color
+*/
+$cardview-fluent-header-panel__item--disabled-text-color: ds.$color-content-neutral-default-disabled !default;
+
+/**
+* $name 604. Icon color
+* $type color
+*/
+$cardview-fluent-header-panel__item--disabled__icon-color: ds.$color-content-neutral-default-disabled !default;
+
+/**
+* $name 605. Active "Filter" icon color
+* $type color
+*/
+$cardview-fluent-header-panel__item--disabled__header-filter-icon--selected-color: ds.$color-content-neutral-default-disabled !default;
+
+/**
+* $name 606. Sort index text color
+* $type color
+*/
+$cardview-fluent-header-panel__item--disabled__sort-index-text-color: ds.$color-content-neutral-default-disabled !default;
+
+// #endregion
+
+// #region HEADER PANEL ITEM (ON DRAG)
+
+/**
+* $name 700. Background color
+* $type color
+*/
+$cardview-fluent-header-panel__item--dragged-bg-color: $cardview-fluent-header-panel__item-bg-color !default;
+
+/**
+* $name 701. Border color
+* $type color
+*/
+$cardview-fluent-header-panel__item--dragged-border-color: $cardview-fluent-header-panel__item-border-color !default;
+
+/**
+* $name 702. Text color
+* $type color
+*/
+$cardview-fluent-header-panel__item--dragged-text-color: $cardview-fluent-header-panel__item-text-color !default;
+
+/**
+* $name 704. "Drag allowed" icon color
+* $type color
+*/
+$cardview-fluent-header-panel__item--dragged__allowance-icon-color: $cardview-fluent-common-text-color !default;
+
+/**
+* $name 705. "Drag blocked" icon color
+* $type color
+*/
+$cardview-fluent-header-panel__item--dragged__prohibition-icon-color: ds.$color-content-danger-default-rest !default;
+
+/**
+* $name 706. Box shadow color
+* $type color
+*/
+$cardview-fluent-header-panel__item--dragged-box-shadow-color: ds.$color-shadow-key !default;
+
+// #endregion
+
+// #region HEADER PANEL DROP ZONE
+
+/**
+* $name 800. Background color
+* $type color
+*/
+$cardview-fluent-header-panel__dropzone-bg-color: ds.$color-surface-primary-subdued-rest !default;
+
+/**
+* $name 802. Border color
+* $type color
+*/
+$cardview-fluent-header-panel__dropzone-border-color: ds.$color-border-primary-default-rest !default;
+
+/**
+* $name 803. Text color
+* $type color
+*/
+$cardview-fluent-header-panel__dropzone-text-color: ds.$color-content-primary-default-rest !default;
+
+/**
+* $name 804. Icon color
+* $type color
+*/
+$cardview-fluent-header-panel__dropzone__icon-color: ds.$color-content-primary-default-rest !default;
+
+// #endregion
+
+// #region FILTER PANEL
+
+/**
+* $name 900. Background color
+* $type color
+*/
+$cardview-fluent-filter-panel-bg-color: $cardview-fluent-common-bg-color !default;
+
+/**
+* $name 902. Border color
+* $type color
+*/
+$cardview-fluent-filter-panel-border-color: ds.$color-border-neutral-default-rest !default;
+
+/**
+* $name 903. Text color
+* $type color
+*/
+$cardview-fluent-filter-panel-text-color: ds.$color-content-primary-default-rest !default;
+
+/**
+* $name 904. Icon color
+* $type color
+*/
+$cardview-fluent-filter-panel__icon-color: ds.$color-content-primary-default-rest !default;
+
+// #endregion
+
+// #region EMPTY VIEW
+
+/**
+* $name 1000. Background color
+* $type color
+*/
+$cardview-fluent-nodata-view-bg-color: $cardview-fluent-common-bg-color !default;
+
+/**
+* $name 1001. Text color
+* $type color
+*/
+$cardview-fluent-nodata-view-text-color: ds.$color-content-neutral-subdued-rest !default;
+
+/**
+* $name 1002. Icon color
+* $type color
+*/
+$cardview-fluent-nodata-view__icon-color: $cardview-fluent-nodata-view-text-color !default;
+
+/**
+* $name 1003. Icon background color
+* $type color
+*/
+$cardview-fluent-nodata-view__icon-bg-color: ds.$color-surface-neutral-deep-rest !default;
+
+// #endregion
+
+// #region HIGHLIGHTS IN SEARCH
+
+/**
+* $name 1100. Background color
+* $type color
+*/
+$cardview-fluent-card__content__field-value--highlighted-bg-color: ds.$color-surface-highlight-rest !default;
+
+/**
+* $name 1102. Text color
+* $type color
+*/
+$cardview-fluent-card__content__field-value--highlighted-text-color: ds.$color-content-highlight-rest !default;
+
+/**
+* $name 1104. Box shadow color
+* $type color
+*/
+$cardview-fluent-card__content__field-value--highlighted-box-shadow-color: ds.$color-shadow-key !default;
+
+// #endregion
+
+// #region COLUMN CHOOSER
+
+$cardview-fluent-columnchooser--empty__message-color: ds.$color-content-neutral-subdued-rest !default;
+
+// #endregion
+
+$cardview-bg-color: $cardview-fluent-common-bg-color !default;
+$cardview-link-color: $cardview-fluent-common-link-color !default;
+$cardview-text-color: $cardview-fluent-common-text-color !default;
+
+$cardview-card-bg-color: $cardview-fluent-card-bg-color !default;
+$cardview-card-border-color: $cardview-fluent-card-border-color !default;
+$cardview-card-divider-color: $cardview-fluent-card-divider-color !default;
+$cardview-card-text-color: $cardview-fluent-card-text-color !default;
+$cardview-card__cover-bg-color: $cardview-fluent-card__cover-bg-color !default;
+$cardview-card__cover--noimage-bg-color: $cardview-fluent-card__cover--noimage-bg-color !default;
+$cardview-card__cover--noimage__icon-color: $cardview-fluent-card__cover--noimage__icon-color !default;
+
+$cardview-card--selected-bg-color: $cardview-fluent-card--selected-bg-color !default;
+$cardview-card--selected-border-color: $cardview-fluent-card--selected-border-color !default;
+$cardview-card--selected-divider-color: $cardview-fluent-card--selected-divider-color !default;
+$cardview-card--selected-text-color: $cardview-fluent-card--selected-text-color !default;
+$cardview-card--selected__cover-bg-color: $cardview-fluent-card--selected__cover-bg-color !default;
+$cardview-card--selected__cover--noimage-bg-color: $cardview-fluent-card--selected__cover--noimage-bg-color !default;
+$cardview-card--selected__cover--noimage__icon-color: $cardview-fluent-card--selected__cover--noimage__icon-color !default;
+
+$cardview-card--focused-outline-color: $cardview-fluent-card--focused-outline-color !default;
+
+$cardview-header-panel__item-bg-color: $cardview-fluent-header-panel__item-bg-color !default;
+$cardview-header-panel__item-border-color: $cardview-fluent-header-panel__item-border-color !default;
+$cardview-header-panel__item-text-color: $cardview-fluent-header-panel__item-text-color !default;
+$cardview-header-panel__item__icon-color: $cardview-fluent-header-panel__item__icon-color !default;
+$cardview-header-panel__item__header-filter-icon--selected-color: $cardview-fluent-header-panel__item__header-filter-icon--selected-color !default;
+$cardview-header-panel__item__sort-index-text-color: $cardview-fluent-header-panel__item__sort-index-text-color !default;
+
+$cardview-header-panel__item--focused-outline-color: $cardview-fluent-header-panel__item--focused-outline-color !default;
+
+$cardview-header-panel__item--hovered-bg-color: $cardview-fluent-header-panel__item--hovered-bg-color !default;
+$cardview-header-panel__item--hovered-border-color: $cardview-fluent-header-panel__item--hovered-border-color !default;
+$cardview-header-panel__item--hovered-text-color: $cardview-fluent-header-panel__item--hovered-text-color !default;
+$cardview-header-panel__item--hovered__icon-color: $cardview-fluent-header-panel__item--hovered__icon-color !default;
+$cardview-header-panel__item--hovered__header-filter-icon--selected-color: $cardview-fluent-header-panel__item--hovered__header-filter-icon--selected-color !default;
+$cardview-header-panel__item--hovered__sort-index-text-color: $cardview-fluent-header-panel__item--hovered__sort-index-text-color !default;
+
+$cardview-header-panel__item--disabled-bg-color: $cardview-fluent-header-panel__item--disabled-bg-color !default;
+$cardview-header-panel__item--disabled-border-color: $cardview-fluent-header-panel__item--disabled-border-color !default;
+$cardview-header-panel__item--disabled-text-color: $cardview-fluent-header-panel__item--disabled-text-color !default;
+$cardview-header-panel__item--disabled__icon-color: $cardview-fluent-header-panel__item--disabled__icon-color !default;
+$cardview-header-panel__item--disabled__header-filter-icon--selected-color: $cardview-fluent-header-panel__item--disabled__header-filter-icon--selected-color !default;
+$cardview-header-panel__item--disabled__sort-index-text-color: $cardview-fluent-header-panel__item--disabled__sort-index-text-color !default;
+
+$cardview-header-panel__item--dragged-bg-color: $cardview-fluent-header-panel__item--dragged-bg-color !default;
+$cardview-header-panel__item--dragged-border-color: $cardview-fluent-header-panel__item--dragged-border-color !default;
+$cardview-header-panel__item--dragged-text-color: $cardview-fluent-header-panel__item--dragged-text-color !default;
+$cardview-header-panel__item--dragged__allowance-icon-color: $cardview-fluent-header-panel__item--dragged__allowance-icon-color !default;
+$cardview-header-panel__item--dragged__prohibition-icon-color: $cardview-fluent-header-panel__item--dragged__prohibition-icon-color !default;
+$cardview-header-panel__item--dragged-box-shadow-color: $cardview-fluent-header-panel__item--dragged-box-shadow-color !default;
+
+$cardview-header-panel__dropzone-bg-color: $cardview-fluent-header-panel__dropzone-bg-color !default;
+$cardview-header-panel__dropzone-border-color: $cardview-fluent-header-panel__dropzone-border-color !default;
+$cardview-header-panel__dropzone-text-color: $cardview-fluent-header-panel__dropzone-text-color !default;
+$cardview-header-panel__dropzone__icon-color: $cardview-fluent-header-panel__dropzone__icon-color !default;
+
+$cardview-filter-panel-bg-color: $cardview-fluent-filter-panel-bg-color !default;
+$cardview-filter-panel-border-color: $cardview-fluent-filter-panel-border-color !default;
+$cardview-filter-panel-text-color: $cardview-fluent-filter-panel-text-color !default;
+$cardview-filter-panel__icon-color: $cardview-fluent-filter-panel__icon-color !default;
+
+$cardview-nodata-view-bg-color: $cardview-fluent-nodata-view-bg-color !default;
+$cardview-nodata-view-text-color: $cardview-fluent-nodata-view-text-color !default;
+$cardview-nodata-view__icon-color: $cardview-fluent-nodata-view__icon-color !default;
+$cardview-nodata-view__icon-bg-color: $cardview-fluent-nodata-view__icon-bg-color !default;
+
+$cardview-card__content__field-value--highlighted-bg-color: $cardview-fluent-card__content__field-value--highlighted-bg-color !default;
+$cardview-card__content__field-value--highlighted-text-color: $cardview-fluent-card__content__field-value--highlighted-text-color !default;
+$cardview-card__content__field-value--highlighted-box-shadow: 0 1px 3px $cardview-fluent-card__content__field-value--highlighted-box-shadow-color !default;
+
+$cardview-columnchooser--empty__message-color: $cardview-fluent-columnchooser--empty__message-color !default;
+
+$cardview-header-item__sort-indicator__border-color: ds.$color-border-primary-default-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_index.scss
new file mode 100644
index 000000000000..29f2262bbe3e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_index.scss
@@ -0,0 +1,5 @@
+@use 'colors';
+@use 'sizes';
+@use '../../base/cardView/index' as *;
+
+// adduse
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_sizes.scss
new file mode 100644
index 000000000000..59e300552fe3
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/cardView/_sizes.scss
@@ -0,0 +1,492 @@
+@use "../sizes" as *;
+@use '../../base/cardView/variables' as *;
+@use '../../base/cardView/header_panel/variables' as *;
+@use '../../base/cardView/header_panel/item/variables' as *;
+@use '../../base/cardView/content_view/content/card/variables' as *;
+@use '../../base/cardView/content_view/content/card/header/variables' as *;
+@use '../../base/cardView/content_view/content/card/cover/variables' as *;
+@use '../../base/cardView/content_view/content/card/content/variables' as *;
+@use '../../base/cardView/content_view/content/variables' as *;
+@use '../../base/cardView/content_view/no_data/variables' as *;
+@use '../../base/cardView/column_chooser/variables' as *;
+@use '../../base/cardView/filter_panel/variables' as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+// #region COMMON SETTINGS
+
+/**
+* $name 101. Border radius
+* $type text
+*/
+$cardview-fluent-common-border-radius: null !default;
+
+/**
+* $name 104. Text weight
+* $type select
+* $type-values 100|200|300|400|500|600|700|800|900
+*/
+$cardview-fluent-common-text-weight: null !default;
+
+/**
+* $name 105. Vertical gap between cards
+* $type text
+*/
+$cardview-fluent-common-cards-row-gap: null !default;
+
+/**
+* $name 106. Horizontal gap between cards
+* $type text
+*/
+$cardview-fluent-common-cards-column-gap: null !default;
+
+$cardview-fluent-common-gap: null !default;
+
+$cardview-fluent-common-padding: null !default;
+
+// #endregion
+
+// #region CARD
+
+$cardview-fluent-card-min-width: null !default;
+
+$cardview-fluent-card-border-width: null !default;
+
+/**
+* $name 202. Border radius
+* $type text
+*/
+$cardview-fluent-card-border-radius: null !default;
+
+$cardview-fluent-card__header-height: null !default;
+
+$cardview-fluent-card__header-text-size: null !default;
+
+$cardview-fluent-card__header__selection-checkbox-padding-right: null !default;
+
+/**
+* $name 205. Field name text weight
+* $type select
+* $type-values 100|200|300|400|500|600|700|800|900
+*/
+$cardview-fluent-card__field-caption-weight: null !default;
+
+$cardview-fluent-card__cover-max-height: null !default;
+
+$cardview-fluent-card__cover--noimage__icon-size: null !default;
+
+$cardview-fluent-card__content-padding: null !default;
+
+$cardview-fluent-card__content-row-gap: null !default;
+
+$cardview-fluent-card__content__cell-padding-vertical: null !default;
+
+$cardview-fluent-card__content__cell-padding-horizontal: null !default;
+
+// #endregion
+
+// #region CARD (SELECTED)
+
+/**
+* $name 304. Field name text weight
+* $type select
+* $type-values 100|200|300|400|500|600|700|800|900
+*/
+$cardview-fluent-card--selected__field-caption-weight: null !default;
+
+// #endregion
+
+// #region HEADER
+
+$cardview-fluent-header-gap: null !default;
+
+// #endregion
+
+// #region HEADER PANEL
+
+$cardview-fluent-header-panel-vertical-margin: null !default;
+
+$cardview-fluent-header-panel--empty-line-height: null !default;
+
+// #endregion
+
+// #region HEADER PANEL ITEM
+
+$cardview-fluent-header-panel__item-border-width: null !default;
+
+/**
+* $name 402. Border radius
+* $type text
+*/
+$cardview-fluent-header-panel__item-border-radius: null !default;
+
+$cardview-fluent-header-panel__item-padding-vertical: null !default;
+
+$cardview-fluent-header-panel__item-padding-horizontal: null !default;
+
+/**
+* $name 404. Text weight
+* $type select
+* $type-values 100|200|300|400|500|600|700|800|900
+*/
+$cardview-fluent-header-panel__item-text-weight: null !default;
+
+/**
+* $name 408. Sort index text weight
+* $type select
+* $type-values 100|200|300|400|500|600|700|800|900
+*/
+$cardview-fluent-header-panel__item__sort-index-text-weight: null !default;
+
+$cardview-fluent-header-panel__item__icon-size: null !default;
+
+$cardview-fluent-header-item__left-padding: null !default;
+$cardview-fluent-header-item__right-padding: null !default;
+
+// #endregion
+
+// #region HEADER PANEL ITEM (HOVERED)
+
+/**
+* $name 503. Text weight
+* $type select
+* $type-values 100|200|300|400|500|600|700|800|900
+*/
+$cardview-fluent-header-panel__item--hovered-text-weight: null !default;
+
+/**
+* $name 507. Sort index text weight
+* $type select
+* $type-values 100|200|300|400|500|600|700|800|900
+*/
+$cardview-fluent-header-panel__item--hovered__sort-index-text-weight: null !default;
+
+// #endregion
+
+// #region HEADER PANEL ITEM (DISABLED)
+
+/**
+* $name 603. Text weight
+* $type select
+* $type-values 100|200|300|400|500|600|700|800|900
+*/
+$cardview-fluent-header-panel__item--disabled-text-weight: null !default;
+
+/**
+* $name 607. Sort index text weight
+* $type select
+* $type-values 100|200|300|400|500|600|700|800|900
+*/
+$cardview-fluent-header-panel__item--disabled__sort-index-text-weight: null !default;
+
+// #endregion
+
+// #region HEADER PANEL ITEM (ON DRAG)
+
+/**
+* $name 703. Text weight
+* $type select
+* $type-values 100|200|300|400|500|600|700|800|900
+*/
+$cardview-fluent-header-panel__item--dragged-text-weight: null !default;
+
+$cardview-fluent-header-item__sort-indicator__border-size: null;
+$cardview-fluent-header-item__sort-indicator__border-radius: null;
+
+// #endregion
+
+// #region HEADER PANEL DROP ZONE
+
+$cardview-fluent-header-panel__dropzone-height: null !default;
+
+$cardview-fluent-header-panel__dropzone-top: null !default;
+
+$cardview-fluent-header-panel__dropzone-border-width: null !default;
+
+/**
+* $name 801. Border radius
+* $type text
+*/
+$cardview-fluent-header-panel__dropzone-border-radius: null !default;
+
+// #endregion
+
+// #region FILTER PANEL
+
+/**
+* $name 901. Border radius
+* $type text
+*/
+$cardview-fluent-filter-panel-border-radius: null !default;
+
+// #endregion
+
+// #region NO DATA VIEW
+
+$cardview-fluent-nodata-view__icon-container-size: null !default;
+
+$cardview-fluent-nodata-view__icon-container-margin: null !default;
+
+$cardview-fluent-nodata-view__icon-size: null !default;
+
+// #endregion
+
+// #region HIGHLIGHTS IN SEARCH
+
+/**
+* $name 1101. Border radius
+* $type text
+*/
+$cardview-fluent-card__content__field-value--highlighted-border-radius: null !default;
+
+$cardview-fluent-card__content__field-value--highlighted-border-padding: null !default;
+
+/**
+* $name 1103. Text weight
+* $type select
+* $type-values 100|200|300|400|500|600|700|800|900
+*/
+$cardview-fluent-card__content__field-value--highlighted-text-weight: null !default;
+
+// #endregion
+
+// #region COLUMN CHOOSER
+
+$cardview-fluent-column-chooser--empty__message-horizontal-padding: null !default;
+
+$cardview-fluent-column-chooser__select-all-item-horizontal-padding: null !default;
+
+// #endregion
+
+@if $size == "default" {
+
+  // Common
+  $cardview-fluent-common-border-radius: ds.$border-radius-160 !default;
+  $cardview-fluent-common-text-weight: 400 !default;
+  $cardview-fluent-common-cards-row-gap: ds.$spacing-160 !default;
+  $cardview-fluent-common-cards-column-gap: ds.$spacing-160 !default;
+  $cardview-fluent-common-gap: ds.$spacing-240 !default;
+  $cardview-fluent-common-padding: ds.$spacing-240 !default;
+
+  // Card
+  $cardview-fluent-card-min-width: 250px !default; // dx-offscale: 250px
+  $cardview-fluent-card-border-width: ds.$border-width-10 !default;
+  $cardview-fluent-card-border-radius: ds.$border-radius-80 !default;
+  $cardview-fluent-card__header-height: ds.$spacing-480 !default;
+  $cardview-fluent-card__header-text-size: ds.$spacing-160 !default;
+  $cardview-fluent-card__header__selection-checkbox-padding-right: ds.$spacing-120 !default;
+  $cardview-fluent-card__field-caption-weight: 600 !default;
+  $cardview-fluent-card__cover-max-height: 180px !default; // dx-offscale: 180px
+  $cardview-fluent-card__cover--noimage__icon-size: ds.$spacing-480 !default;
+  $cardview-fluent-card__content-padding: ds.$spacing-120 !default;
+  $cardview-fluent-card__content-row-gap: ds.$spacing-80 !default;
+  $cardview-fluent-card__content__cell-padding-vertical: ds.$spacing-60 !default;
+  $cardview-fluent-card__content__cell-padding-horizontal: ds.$spacing-120 !default;
+
+  // Card - selected
+  $cardview-fluent-card--selected__field-caption-weight: $cardview-fluent-card__field-caption-weight !default;
+
+  // Header
+  $cardview-fluent-header-gap: 0 !default;
+
+  // Header panel
+  $cardview-fluent-header-panel-vertical-margin: ds.$spacing-80 !default;
+  $cardview-fluent-header-panel--empty-line-height: ds.$line-height-title-lg !default;
+
+  // Header panel item - default
+  $cardview-fluent-header-panel__item-border-width: ds.$border-width-10 !default;
+  $cardview-fluent-header-panel__item-border-radius: ds.$border-radius-60 !default;
+  $cardview-fluent-header-panel__item-padding-horizontal: ds.$spacing-80 !default;
+  $cardview-fluent-header-panel__item-padding-vertical: ds.$spacing-50 !default;
+  $cardview-fluent-header-item__left-padding: ds.$spacing-60 !default;
+  $cardview-fluent-header-item__right-padding: ds.$spacing-20 !default;
+  $cardview-fluent-header-panel__item-text-weight: $cardview-fluent-common-text-weight !default;
+  $cardview-fluent-header-panel__item__sort-index-text-weight: 400 !default;
+  $cardview-fluent-header-panel__item__icon-size: $fluent-base-icon-size !default;
+
+  // Header panel item - hovered
+  $cardview-fluent-header-panel__item--hovered-text-weight: $cardview-fluent-header-panel__item-text-weight !default;
+  $cardview-fluent-header-panel__item--hovered__sort-index-text-weight: $cardview-fluent-header-panel__item__sort-index-text-weight !default;
+
+  // Header panel item - disabled
+  $cardview-fluent-header-panel__item--disabled-text-weight: $cardview-fluent-header-panel__item-text-weight !default;
+  $cardview-fluent-header-panel__item--disabled__sort-index-text-weight: $cardview-fluent-header-panel__item__sort-index-text-weight !default;
+
+  // Header panel item - dragged
+  $cardview-fluent-header-panel__item--dragged-text-weight: $cardview-fluent-header-panel__item-text-weight !default;
+  $cardview-fluent-header-item__sort-indicator__border-size: ds.$border-width-20 !default;
+  $cardview-fluent-header-item__sort-indicator__border-radius: ds.$border-radius-80 !default;
+
+  // Header panel Drop-zone
+  $cardview-fluent-header-panel__dropzone-height: ds.$spacing-440 !default;
+  $cardview-fluent-header-panel__dropzone-top: ds.$spacing-minus-60  !default;
+  $cardview-fluent-header-panel__dropzone-border-width: 1.5px !default; // dx-offscale: 1.5px
+  $cardview-fluent-header-panel__dropzone-border-radius: ds.$border-radius-80 !default;
+
+  // Filter panel
+  $cardview-fluent-filter-panel-border-radius: 0 !default;
+
+  // Empty view
+  $cardview-fluent-nodata-view__icon-container-size: ds.$spacing-640 !default;
+  $cardview-fluent-nodata-view__icon-container-margin: ds.$spacing-120 !default;
+  $cardview-fluent-nodata-view__icon-size: ds.$spacing-400 !default;
+
+  // Search highlight
+  $cardview-fluent-card__content__field-value--highlighted-border-radius: ds.$border-radius-50 !default;
+  $cardview-fluent-card__content__field-value--highlighted-border-padding: .125em 0.2em !default;
+  $cardview-fluent-card__content__field-value--highlighted-text-weight: 500 !default;
+
+  // Column chooser
+  $cardview-fluent-column-chooser--empty__message-horizontal-padding: ds.$spacing-240 !default;
+  $cardview-fluent-column-chooser__select-all-item-horizontal-padding: ds.$spacing-140 !default;
+}
+@else if $size == "compact" {
+
+  // Common
+  $cardview-fluent-common-border-radius: ds.$border-radius-160 !default;
+  $cardview-fluent-common-text-weight: 400 !default;
+  $cardview-fluent-common-cards-row-gap: ds.$spacing-120 !default;
+  $cardview-fluent-common-cards-column-gap: ds.$spacing-120 !default;
+  $cardview-fluent-common-gap: ds.$spacing-160 !default;
+  $cardview-fluent-common-padding: ds.$spacing-160 !default;
+
+  // Card
+  $cardview-fluent-card-min-width: 250px !default; // dx-offscale: 250px
+  $cardview-fluent-card-border-width: ds.$border-width-10 !default;
+  $cardview-fluent-card-border-radius: ds.$border-radius-60 !default;
+  $cardview-fluent-card__header-height: ds.$spacing-360 !default;
+  $cardview-fluent-card__header-text-size: ds.$spacing-140 !default;
+  $cardview-fluent-card__header__selection-checkbox-padding-right: ds.$spacing-80 !default;
+  $cardview-fluent-card__field-caption-weight: 600 !default;
+  $cardview-fluent-card__cover-max-height: 140px !default; // dx-offscale: 140px
+  $cardview-fluent-card__cover--noimage__icon-size: ds.$spacing-320 !default;
+  $cardview-fluent-card__content-padding: ds.$spacing-80 !default;
+  $cardview-fluent-card__content-row-gap: ds.$spacing-40 !default;
+  $cardview-fluent-card__content__cell-padding-vertical: ds.$spacing-40 !default;
+  $cardview-fluent-card__content__cell-padding-horizontal: ds.$spacing-80 !default;
+
+  // Card - selected
+  $cardview-fluent-card--selected__field-caption-weight: $cardview-fluent-card__field-caption-weight !default;
+
+  // Header
+  $cardview-fluent-header-gap: ds.$spacing-40 !default;
+
+  // Header panel
+  $cardview-fluent-header-panel-vertical-margin: ds.$spacing-40 !default;
+  $cardview-fluent-header-panel--empty-line-height: ds.$line-height-title-sm !default;
+
+  // Header panel item - default
+  $cardview-fluent-header-panel__item-border-width: ds.$border-width-10 !default;
+  $cardview-fluent-header-panel__item-border-radius: ds.$border-radius-60 !default;
+  $cardview-fluent-header-panel__item-padding-horizontal: ds.$spacing-60 !default;
+  $cardview-fluent-header-panel__item-padding-vertical: ds.$spacing-30 !default;
+  $cardview-fluent-header-item__left-padding: ds.$spacing-30 !default;
+  $cardview-fluent-header-item__right-padding: ds.$spacing-10 !default;
+  $cardview-fluent-header-panel__item-text-weight: $cardview-fluent-common-text-weight !default;
+  $cardview-fluent-header-panel__item__sort-index-text-weight: 400 !default;
+  $cardview-fluent-header-panel__item__icon-size: $fluent-base-icon-size !default;
+
+  // Header panel item - hovered
+  $cardview-fluent-header-panel__item--hovered-text-weight: $cardview-fluent-header-panel__item-text-weight !default;
+  $cardview-fluent-header-panel__item--hovered__sort-index-text-weight: $cardview-fluent-header-panel__item__sort-index-text-weight !default;
+
+  // Header panel item - disabled
+  $cardview-fluent-header-panel__item--disabled-text-weight: $cardview-fluent-header-panel__item-text-weight !default;
+  $cardview-fluent-header-panel__item--disabled__sort-index-text-weight: $cardview-fluent-header-panel__item__sort-index-text-weight !default;
+
+  // Header panel item - dragged
+  $cardview-fluent-header-panel__item--dragged-text-weight: $cardview-fluent-header-panel__item-text-weight !default;
+  $cardview-fluent-header-item__sort-indicator__border-size: ds.$border-width-10 !default;
+  $cardview-fluent-header-item__sort-indicator__border-radius: ds.$border-radius-40 !default;
+
+  // Header panel Drop-zone
+  $cardview-fluent-header-panel__dropzone-height: ds.$spacing-320 !default;
+  $cardview-fluent-header-panel__dropzone-top: ds.$spacing-minus-40  !default;
+  $cardview-fluent-header-panel__dropzone-border-width: 1.5px !default; // dx-offscale: 1.5px
+  $cardview-fluent-header-panel__dropzone-border-radius: ds.$border-radius-60 !default;
+
+  // Filter panel
+  $cardview-fluent-filter-panel-border-radius: 0 !default;
+
+  // Empty view
+  $cardview-fluent-nodata-view__icon-container-size: ds.$spacing-480 !default;
+  $cardview-fluent-nodata-view__icon-container-margin: ds.$spacing-80 !default;
+  $cardview-fluent-nodata-view__icon-size: ds.$spacing-320 !default;
+
+  // Search highlight
+  $cardview-fluent-card__content__field-value--highlighted-border-radius: ds.$border-radius-50 !default;
+  $cardview-fluent-card__content__field-value--highlighted-border-padding: .125em 0.2em !default;
+  $cardview-fluent-card__content__field-value--highlighted-text-weight: 500 !default;
+
+  // Column chooser
+  $cardview-fluent-column-chooser--empty__message-horizontal-padding: ds.$spacing-160 !default;
+  $cardview-fluent-column-chooser__select-all-item-horizontal-padding: ds.$spacing-120 !default;
+}
+
+$cardview-border-radius: $cardview-fluent-common-border-radius !default;
+$cardview-text-weight: $cardview-fluent-common-text-weight !default;
+$cardview-cards-row-gap: $cardview-fluent-common-cards-row-gap !default;
+$cardview-cards-column-gap: $cardview-fluent-common-cards-column-gap !default;
+$cardview-gap: $cardview-fluent-common-gap !default;
+$cardview-padding: $cardview-fluent-common-padding !default;
+
+$cardview-card-min-width: $cardview-fluent-card-min-width !default;
+$cardview-card-border-width: $cardview-fluent-card-border-width !default;
+$cardview-card-border-radius: $cardview-fluent-card-border-radius !default;
+$cardview-card__header-height: $cardview-fluent-card__header-height !default;
+$cardview-card__header-text-size: $cardview-fluent-card__header-text-size !default;
+$cardview-card__header__selection-checkbox-padding-right: $cardview-fluent-card__header__selection-checkbox-padding-right !default;
+$cardview-card__field-caption-weight: $cardview-fluent-card__field-caption-weight !default;
+$cardview-card__cover-max-height: $cardview-fluent-card__cover-max-height !default;
+$cardview-card__cover--noimage__icon-size: $cardview-fluent-card__cover--noimage__icon-size !default;
+$cardview-card__content-padding: $cardview-fluent-card__content-padding !default;
+$cardview-card__content-row-gap: $cardview-fluent-card__content-row-gap !default;
+$cardview-card__content__cell-padding-vertical: $cardview-fluent-card__content__cell-padding-vertical !default;
+$cardview-card__content__cell-padding-horizontal: $cardview-fluent-card__content__cell-padding-horizontal !default;
+
+$cardview-card--selected__field-caption-weight: $cardview-fluent-card--selected__field-caption-weight !default;
+
+$cardview-header-gap: $cardview-fluent-header-gap !default;
+
+$cardview-header-panel-vertical-margin: $cardview-fluent-header-panel-vertical-margin !default;
+$cardview-header-panel--empty-line-height: $cardview-fluent-header-panel--empty-line-height !default;
+
+$cardview-header-panel__item-border-width: $cardview-fluent-header-panel__item-border-width !default;
+$cardview-header-panel__item-border-radius: $cardview-fluent-header-panel__item-border-radius !default;
+$cardview-header-panel__item-padding-horizontal: $cardview-fluent-header-panel__item-padding-horizontal !default;
+$cardview-header-panel__item-padding-vertical: $cardview-fluent-header-panel__item-padding-vertical !default;
+$cardview-header-panel__item-text-weight: $cardview-fluent-header-panel__item-text-weight !default;
+$cardview-header-panel__item__sort-index-text-weight: $cardview-fluent-header-panel__item__sort-index-text-weight !default;
+$cardview-header-panel__item__icon-size: $cardview-fluent-header-panel__item__icon-size !default;
+
+$cardview-header-panel__item--hovered-text-weight: $cardview-fluent-header-panel__item--hovered-text-weight !default;
+$cardview-header-panel__item--hovered__sort-index-text-weight: $cardview-fluent-header-panel__item--hovered__sort-index-text-weight !default;
+
+$cardview-header-panel__item--disabled-text-weight: $cardview-fluent-header-panel__item--disabled-text-weight !default;
+$cardview-header-panel__item--disabled__sort-index-text-weight: $cardview-fluent-header-panel__item--disabled__sort-index-text-weight !default;
+
+$cardview-header-panel__item--dragged-text-weight: $cardview-fluent-header-panel__item--dragged-text-weight !default;
+
+$cardview-header-panel__dropzone-height: $cardview-fluent-header-panel__dropzone-height !default;
+$cardview-header-panel__dropzone-top: $cardview-fluent-header-panel__dropzone-top !default;
+$cardview-header-panel__dropzone-border-width: $cardview-fluent-header-panel__dropzone-border-width !default;
+$cardview-header-panel__dropzone-border-radius: $cardview-fluent-header-panel__dropzone-border-radius !default;
+
+$cardview-filter-panel-border-radius: $cardview-fluent-filter-panel-border-radius !default;
+
+$cardview-nodata-view__icon-container-size: $cardview-fluent-nodata-view__icon-container-size !default;
+$cardview-nodata-view__icon-container-margin: $cardview-fluent-nodata-view__icon-container-margin !default;
+$cardview-nodata-view__icon-size: $cardview-fluent-nodata-view__icon-size !default;
+
+$cardview-card__content__field-value--highlighted-border-radius: $cardview-fluent-card__content__field-value--highlighted-border-radius !default;
+$cardview-card__content__field-value--highlighted-border-padding: $cardview-fluent-card__content__field-value--highlighted-border-padding !default;
+$cardview-card__content__field-value--highlighted-text-weight: $cardview-fluent-card__content__field-value--highlighted-text-weight !default;
+
+$cardview-column-chooser--empty__message-horizontal-padding: $cardview-fluent-column-chooser--empty__message-horizontal-padding !default;
+$cardview-column-chooser__select-all-item-horizontal-padding: $cardview-fluent-column-chooser__select-all-item-horizontal-padding !default;
+
+$cardview-header-item__left-padding: $cardview-fluent-header-item__left-padding !default;
+$cardview-header-item__right-padding: $cardview-fluent-header-item__right-padding !default;
+$cardview-header-item__sort-indicator__border-size: $cardview-fluent-header-item__sort-indicator__border-size !default;
+$cardview-header-item__sort-indicator__border-radius: $cardview-fluent-header-item__sort-indicator__border-radius !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_colors.scss
new file mode 100644
index 000000000000..14ae56e5723a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_colors.scss
@@ -0,0 +1,140 @@
+@use "../textEditor/colors" as *;
+@use "../button/colors" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+/**
+* $name 10. Background color
+* $type color
+*/
+$chat-background-color: ds.$color-surface-neutral-default-rest !default;
+
+/**
+* $name 20. Border color
+* $type color
+*/
+$chat-border-color: ds.$color-border-neutral-default-rest !default;
+$chat-messagebox-border-color: $chat-border-color !default;
+$chat-messagebox-file-background-color: $button-normal-text-hover-bg !default;
+$chat-messagebox-file-cancel-button-secondary-color: $button-normal-text-selected-bg !default;
+$chat-message-editing-preview-accent-color: ds.$color-surface-primary-default-rest !default;
+$chat-message-editing-preview-cancel-button-color: $texteditor-label-color !default;
+
+/**
+* $name 30. Text color
+* $type color
+*/
+$chat-avatar-color: ds.$color-content-neutral-default-rest !default;
+
+/**
+* $name 31. Background color
+* $type color
+*/
+$chat-avatar-background-color: ds.$color-surface-neutral-default-active !default;
+
+/**
+* $name 40. Text color (sent messages)
+* $type color
+*/
+$chat-bubble-color-primary: ds.$color-content-neutral-default-rest !default;
+
+/**
+* $name 41. Background color (sent messages)
+* $type color
+*/
+$chat-bubble-background-color-primary: ds.$color-surface-primary-subdued-rest !default;
+
+/**
+* $name 42. Text color (received messages)
+* $type color
+*/
+$chat-bubble-color-secondary: ds.$color-content-neutral-default-rest !default;
+
+/**
+* $name 43. Background color (received messages)
+* $type color
+*/
+$chat-bubble-background-color-secondary: ds.$color-surface-neutral-subdued-rest !default;
+
+/**
+* $name 50. User name color
+* $type color
+*/
+$chat-information-author-name-color: ds.$color-content-neutral-subdued-rest !default;
+
+/**
+* $name 51. Timestamp color
+* $type color
+*/
+$chat-information-timestamp-color: ds.$color-content-neutral-subdued-rest !default;
+
+/**
+* $name 52. Day header color
+* $type color
+*/
+$chat-messagelist-day-header-color: ds.$color-content-neutral-subdued-rest !default;
+
+/**
+* $name 55. Alert color
+* $type color
+*/
+$chat-alertlist-color: ds.$color-content-danger-default-rest !default;
+
+/**
+* $name 65. Icon color
+* $type color
+*/
+$chat-messagelist-empty-icon-color: ds.$color-content-neutral-subdued-rest !default;
+
+/**
+* $name 66. Icon background color
+* $type color
+*/
+$chat-messagelist-empty-icon-background-color: ds.$color-surface-neutral-subdued-rest !default;
+
+/**
+* $name 67. Title color
+* $type color
+*/
+$chat-messagelist-empty-message-color: ds.$color-content-neutral-default-rest !default;
+
+/**
+* $name 68. Subtitle color
+* $type color
+*/
+$chat-messagelist-empty-prompt-color: ds.$color-content-neutral-subdued-rest !default;
+
+/**
+* $name 80. Text color
+* $type color
+*/
+$chat-typingindicator-color: ds.$color-content-neutral-subdued-rest !default;
+
+/**
+* $name 82. Central circle color
+* $type color
+*/
+$chat-typingindicator-circle-bg-color-center: ds.$color-content-neutral-subdued-rest !default;
+
+/**
+* $name 83. Outer circles color
+* $type color
+*/
+$chat-typingindicator-circle-bg-color: ds.$color-content-neutral-default-disabled !default;
+
+$chat-file-container-background-color: ds.$color-surface-neutral-default-rest !default;
+$chat-file-container-box-shadow: ds.$box-shadow-sm !default;
+$chat-file-secondary-color: ds.$color-content-neutral-subdued-rest !default;
+
+$chat-suggestions-box-shadow: ds.$box-shadow-md !default;
+
+/**
+* $name 81. Background color
+* $type color
+*/
+$chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
+
+$chat-messagelist-contextmenu-delete-button-color: ds.$color-content-danger-default-rest !default;
+$chat-messagelist-contextmenu-delete-button-focused-color: ds.$color-content-danger-default-rest !default;
+$chat-messagelist-contextmenu-delete-button-focused-bg: ds.$color-surface-neutral-default-hovered !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_index.scss
new file mode 100644
index 000000000000..8cae1c6c63a9
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_index.scss
@@ -0,0 +1,153 @@
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/chat" with (
+  $chat-file-name-font-weight: $fluent-chat-file-name-font-weight,
+  $chat-editing-preview-caption-font-weight: $fluent-chat-editing-preview-caption-font-weight,
+);
+@use "../../base/chat/mixins" as *;
+@use "../common/mixins" as *;
+
+// adduse
+
+@include chat(
+  $chat-background-color,
+  $chat-border-color,
+  $chat-border-radius,
+);
+@include chat-avatar(
+  $chat-avatar-size,
+  $chat-avatar-color,
+  $chat-avatar-background-color,
+);
+@include chat-file(
+  $chat-file-container-width,
+  $chat-file-container-padding,
+  $chat-file-container-background-color,
+  $chat-file-container-border-radius,
+  $chat-file-container-box-shadow,
+  $chat-file-button-size,
+  $chat-file-secondary-font-size,
+  $chat-file-secondary-color,
+  $chat-file-base-section-gap,
+  $chat-file-size-max-width,
+  $chat-file-icon-font-size,
+);
+@include chat-fileview(
+  $chat-file-view-items-gap,
+  $chat-file-container-width,
+);
+@include chat-alertlist(
+  $chat-alertlist-color,
+  $chat-alerts-padding-block,
+  $chat-alerts-padding-inline,
+  $chat-alert-padding-block,
+  $chat-alerts-row-gap,
+);
+@include chat-messagebox(
+  $chat-messagebox-padding,
+  $chat-messagebox-border-color,
+  $chat-messagebox-gap,
+  $chat-messagebox-textarea-border-radius,
+  $chat-messagebox-textarea-padding,
+  $chat-messagebox-toolbar-min-height,
+  $chat-file-container-width,
+  $chat-messagebox-files-container-padding,
+  $chat-messagebox-files-container-padding-top,
+  $chat-messagebox-file-background-color,
+  $chat-messagebox-file-cancel-button-secondary-color,
+  $chat-file-container-box-shadow,
+);
+@include chat-messagebubble(
+  $chat-bubble-padding,
+  $chat-bubble-border-radius,
+  $chat-bubble-color-secondary,
+  $chat-bubble-background-color-secondary,
+  $chat-bubble-color-primary,
+  $chat-bubble-background-color-primary,
+  $chat-bubble-container-gap,
+  $chat-bubble-delete-gap,
+  $chat-bubble-delete-icon-size,
+  $chat-bubble-gap,
+);
+@include chat-messagegroup(
+  $chat-messagegroup-gap,
+  $chat-messagegroup-alignment-start-template,
+  $chat-messagegroup-alignment-start-gap,
+  $chat-messagegroup-padding,
+  $chat-information-font-size,
+  $chat-information-author-name-color,
+  $chat-information-timestamp-color,
+  $chat-information-gap,
+  $chat-information-icon-size,
+  $chat-information-edited-gap,
+);
+@include chat-messagelist-empty(
+  $chat-messagelist-padding,
+  $chat-messagelist-empty-icon-box-size,
+  $chat-messagelist-empty-icon-size,
+  $chat-messagelist-empty-icon-margin-bottom,
+  $chat-messagelist-empty-row-gap,
+  $chat-messagelist-empty-icon-color,
+  $chat-messagelist-empty-icon-background-color,
+  $chat-messagelist-empty-message-font-size,
+  $chat-messagelist-empty-message-color,
+  $chat-messagelist-empty-prompt-font-size,
+  $chat-messagelist-empty-prompt-color,
+);
+@include chat-messagelist(
+  $chat-messagelist-padding,
+  $chat-messagelist-day-header-color,
+  $chat-messagelist-day-header-padding-bottom,
+  $chat-messagelist-day-header-first-padding-top,
+  $chat-messagelist-day-header-font-size,
+);
+@include chat-messagelist-contextmenu(
+  $chat-messagelist-contextmenu-delete-button-color,
+  $chat-messagelist-contextmenu-delete-button-focused-color,
+  $chat-messagelist-contextmenu-delete-button-focused-bg,
+);
+@include chat-typingindicator(
+  $chat-typingindicator-template,
+  $chat-typingindicator-padding,
+  $chat-typingindicator-row-gap,
+  $chat-typingindicator-font-size,
+  $chat-typingindicator-color,
+  $chat-typingindicator-bubble-padding-block,
+  $chat-typingindicator-bubble-padding-inline,
+  $chat-typingindicator-bubble-border-radius,
+  $chat-typingindicator-bubble-bg-color,
+  $chat-typingindicator-bubble-column-gap,
+  $chat-typingindicator-circle-size,
+  $chat-typingindicator-circle-size-center,
+  $chat-typingindicator-circle-border-radius,
+  $chat-typingindicator-circle-bg-color,
+  $chat-typingindicator-circle-bg-color-center,
+);
+@include message-editing-preview(
+  $chat-message-editing-preview-content-padding-inline,
+  $chat-message-editing-preview-content-row-gap,
+  $chat-message-editing-preview-accent-color,
+  $chat-message-editing-preview-caption-font-size,
+  $chat-messagebox-padding,
+  $chat-message-editing-preview-border-width,
+  $chat-message-editing-preview-cancel-button-color,
+);
+@include chat-confirmation-popup(
+  $chat-border-radius,
+  $chat-confirmation-popup-content-padding,
+  0 $chat-confirmation-popup-toolbar-padding-block,
+  $chat-confirmation-popup-toolbar-padding-inline,
+  $chat-confirmation-popup-toolbar-gap,
+);
+@include chat-suggestions(
+  $chat-suggestions-padding,
+  $chat-suggestions-button-border-radius,
+  $chat-suggestions-border-width,
+  $chat-suggestions-button-max-width,
+  $chat-suggestions-gap,
+  $chat-suggestions-box-shadow,
+);
+
+.dx-chat-file {
+  @include dx-base-typography();
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_sizes.scss
new file mode 100644
index 000000000000..7604fb081c47
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/chat/_sizes.scss
@@ -0,0 +1,172 @@
+@use "sass:math";
+@use "../textEditor/colors" as *;
+@use "../common/sizes" as *;
+@use "../sizes" as *;
+@use "../typography/sizes" as *;
+@use "../popup/sizes" as *;
+@use "../button/colors" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$chat-border-radius: calc(#{$base-border-radius} * 3) !default;
+$chat-bubble-border-radius: null !default;
+$chat-bubble-padding: null !default;
+$chat-bubble-container-gap: ds.$spacing-40 !default;
+$chat-bubble-delete-gap: null !default;
+$chat-bubble-delete-icon-size: null !default;
+$chat-messagebox-padding: null !default;
+$chat-messagebox-textarea-padding: null !default;
+$chat-messagebox-textarea-border-radius: null !default;
+$chat-messagebox-toolbar-min-height: null !default;
+$chat-messagebox-gap: ds.$spacing-80 !default;
+$chat-messagebox-files-container-padding: ds.$spacing-30 !default;
+$chat-messagebox-files-container-padding-top: ds.$spacing-20 !default;
+$chat-messagelist-padding: null !default;
+$chat-messagegroup-gap: ds.$spacing-40 !default;
+$chat-messagegroup-padding: null !default;
+$chat-information-gap: ds.$spacing-80 !default;
+$chat-avatar-size: ds.$spacing-320 !default;
+$chat-messagegroup-alignment-start-template: auto 82.5% 1fr !default;
+$chat-messagegroup-alignment-start-gap: ds.$spacing-120 !default;
+$chat-information-font-size: ds.$font-size-caption-md !default;
+$chat-information-icon-size: ds.$spacing-120 !default;
+$chat-information-edited-gap: ds.$spacing-20 !default;
+
+$chat-alerts-padding-block: null !default;
+$chat-alerts-padding-inline: ds.$spacing-80 !default;
+$chat-alerts-row-gap: null !default;
+$chat-alert-padding-block: null !default;
+
+$chat-suggestions-padding: null !default;
+$chat-suggestions-border-width: $fluent-base-border-width !default;
+$chat-suggestions-button-border-radius: $button-border-radius !default;
+$chat-suggestions-button-max-width: 200px !default; // dx-offscale: 200px
+$chat-suggestions-gap: ds.$spacing-120 !default;
+
+$chat-message-editing-preview-caption-font-size: $fluent-xs-font-size !default;
+$chat-message-editing-preview-content-row-gap: null !default;
+$chat-message-editing-preview-content-padding-inline: null !default;
+$chat-message-editing-preview-border-width: ds.$border-width-30 !default;
+
+$chat-messagelist-empty-icon-box-size: null !default;
+$chat-messagelist-empty-icon-size: null !default;
+$chat-messagelist-empty-icon-margin-bottom: null !default;
+$chat-messagelist-empty-row-gap: null !default;
+$chat-messagelist-empty-message-font-size: null !default;
+$chat-messagelist-empty-prompt-font-size: null !default;
+$chat-messagelist-day-header-padding-bottom: ds.$spacing-120 !default;
+$chat-messagelist-day-header-first-padding-top: ds.$spacing-200 !default;
+$chat-messagelist-day-header-font-size: ds.$font-size-caption-md !default;
+
+$chat-typingindicator-template: $chat-messagegroup-alignment-start-template !default;
+$chat-typingindicator-padding: null !default;
+$chat-typingindicator-row-gap: $chat-messagegroup-gap !default;
+$chat-typingindicator-font-size: $chat-information-font-size !default;
+$chat-typingindicator-bubble-padding-block: null !default;
+$chat-typingindicator-bubble-padding-inline: null !default;
+$chat-typingindicator-bubble-border-radius: null !default;
+$chat-typingindicator-bubble-column-gap: ds.$spacing-40 !default;
+$chat-typingindicator-circle-size: null !default;
+$chat-typingindicator-circle-size-center: null !default;
+$chat-typingindicator-circle-border-radius: 999em !default;
+
+$chat-confirmation-popup-content-padding: $fluent-popup-content-vertical-padding !default;
+$chat-confirmation-popup-toolbar-padding-block: $fluent-popup-content-withtitle-bottom-padding !default;
+$chat-confirmation-popup-toolbar-padding-inline: $fluent-popup-content-withtitle-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: $fluent-base-border-radius !default;
+$chat-file-button-size: $fluent-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: calc(#{$fluent-base-border-radius} * 3) !default;
+  $chat-bubble-padding: ds.$spacing-80 ds.$spacing-120 !default;
+  $chat-bubble-delete-gap: ds.$spacing-40 !default;
+  $chat-bubble-delete-icon-size: ds.$spacing-200 !default;
+  $chat-messagebox-padding: ds.$spacing-200 !default;
+  $chat-messagebox-textarea-border-radius: ds.$border-radius-80 !default;
+  $chat-messagebox-textarea-padding: ds.$spacing-120 !default;
+  $chat-messagebox-toolbar-min-height: ds.$spacing-320 !default;
+  $chat-messagelist-padding: ds.$spacing-200 !default;
+  $chat-messagegroup-padding: ds.$spacing-240 !default;
+
+  $chat-alerts-padding-block: ds.$spacing-120 !default;
+  $chat-alerts-row-gap: ds.$spacing-20 !default;
+  $chat-alert-padding-block: ds.$spacing-60 !default;
+
+  $chat-suggestions-padding: ds.$spacing-200 !default;
+
+  $chat-message-editing-preview-content-padding-inline: ds.$spacing-120 !default;
+  $chat-message-editing-preview-content-row-gap: ds.$spacing-40 !default;
+
+  $chat-messagelist-empty-icon-box-size: ds.$spacing-640 !default;
+  $chat-messagelist-empty-icon-size: ds.$spacing-400 !default;
+  $chat-messagelist-empty-icon-margin-bottom: ds.$spacing-120 !default;
+  $chat-messagelist-empty-row-gap: ds.$spacing-40 !default;
+  $chat-messagelist-empty-message-font-size: ds.$font-size-180 !default; // dx-no-semantic-role: 180 is off the font-size-role scale
+  $chat-messagelist-empty-prompt-font-size: ds.$font-size-base-md !default;
+
+  $chat-typingindicator-circle-size: math.div(8, 14) * 1em !default;
+  $chat-typingindicator-circle-size-center: math.div(12, 14) * 1em !default;
+  $chat-typingindicator-bubble-padding-block: ds.$spacing-120 !default;
+  $chat-typingindicator-bubble-padding-inline: ds.$spacing-200 !default;
+  $chat-typingindicator-padding: $chat-messagegroup-padding !default;
+  $chat-typingindicator-bubble-border-radius: $chat-bubble-border-radius !default;
+
+  $chat-confirmation-popup-toolbar-gap: ds.$spacing-80 !default;
+
+  $chat-file-icon-font-size: ds.$font-size-200 !default; // dx-icon-glyph-size: text roles not applicable
+}
+
+@else if $size == "compact" {
+  $chat-bubble-border-radius: calc(#{$fluent-base-border-radius} * 2) !default;
+  $chat-bubble-padding: ds.$spacing-60 ds.$spacing-80 !default;
+  $chat-bubble-delete-gap: ds.$spacing-20 !default;
+  $chat-bubble-delete-icon-size: ds.$spacing-160 !default;
+  $chat-messagebox-padding: ds.$spacing-160 !default;
+  $chat-messagebox-textarea-border-radius: ds.$border-radius-80 !default;
+  $chat-messagebox-textarea-padding: ds.$spacing-80 !default;
+  $chat-messagebox-toolbar-min-height: ds.$spacing-240 !default;
+  $chat-messagelist-padding: ds.$spacing-160 !default;
+  $chat-messagegroup-padding: ds.$spacing-120 !default;
+
+  $chat-alerts-padding-block: ds.$spacing-80 !default;
+  $chat-alerts-row-gap: ds.$spacing-20 !default;
+  $chat-alert-padding-block: ds.$spacing-50 !default;
+
+  $chat-suggestions-padding: ds.$spacing-160 !default;
+
+  $chat-message-editing-preview-content-padding-inline: ds.$spacing-80 !default;
+  $chat-message-editing-preview-content-row-gap: ds.$spacing-20 !default;
+
+  $chat-messagelist-empty-icon-box-size: ds.$spacing-480 !default;
+  $chat-messagelist-empty-icon-size: ds.$spacing-320 !default;
+  $chat-messagelist-empty-icon-margin-bottom: ds.$spacing-140 !default;
+  $chat-messagelist-empty-row-gap: ds.$spacing-20 !default;
+  $chat-messagelist-empty-message-font-size: ds.$font-size-140 !default; // dx-no-semantic-role: default branch (180) is off the role scale
+  $chat-messagelist-empty-prompt-font-size: ds.$font-size-base-sm !default;
+
+  $chat-typingindicator-circle-size: math.div(8, 12) * 1em !default;
+  $chat-typingindicator-circle-size-center: math.div(12, 12) * 1em !default;
+  $chat-typingindicator-bubble-padding-block: ds.$spacing-80 !default;
+  $chat-typingindicator-bubble-padding-inline: ds.$spacing-120 !default;
+  $chat-typingindicator-padding: $chat-messagegroup-padding !default;
+  $chat-typingindicator-bubble-border-radius: $chat-bubble-border-radius !default;
+
+  $chat-confirmation-popup-toolbar-gap: ds.$spacing-40 !default;
+
+  $chat-file-icon-font-size: ds.$font-size-160 !default; // dx-icon-glyph-size: text roles not applicable
+}
+
+// Base-layer values injected with design tokens (wave B1)
+$fluent-chat-file-name-font-weight: ds.$font-weight-base-strong !default;
+$fluent-chat-editing-preview-caption-font-weight: ds.$font-weight-500 !default; // dx-no-semantic-role: 500 is off the weight-role scale (400/600/700)
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_colors.scss
new file mode 100644
index 000000000000..720f4b5c88ec
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_colors.scss
@@ -0,0 +1,20 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$checkbox-border-color: ds.$checkbox-color-unchecked-default-border-rest !default;
+$checkbox-border-color-hover: ds.$checkbox-color-unchecked-default-border-hovered !default;
+$checkbox-border-color-active: ds.$checkbox-color-unchecked-default-border-active !default;
+
+$checkbox-foreground-color: ds.$checkbox-color-checked-default-icon-rest !default;
+
+$checkbox-accent-color: ds.$checkbox-color-checked-default-bg-rest !default;
+$checkbox-accent-color-hover: ds.$checkbox-color-checked-default-bg-hovered !default;
+$checkbox-accent-color-focused: ds.$checkbox-color-checked-default-bg-active !default;
+
+$checkbox-invalid-color: ds.$color-border-danger-default-rest !default;
+$checkbox-invalid-color-hover: ds.$color-border-danger-default-hovered !default;
+$checkbox-invalid-color-focused: ds.$color-border-danger-default-hovered !default;
+
+$checkbox-border-color-disabled: ds.$checkbox-color-unchecked-default-border-disabled !default;
+$checkbox-foreground-disabled-color: ds.$checkbox-color-checked-default-icon-disabled !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_index.scss
new file mode 100644
index 000000000000..0a2fcf64e886
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_index.scss
@@ -0,0 +1,223 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../../base/checkBox";
+@use "../../base/checkBox/mixins" as *;
+
+// adduse
+
+.dx-checkbox-icon {
+  width: $fluent-checkbox-arrow-icon-size;
+  height: $fluent-checkbox-arrow-icon-size;
+  border-width: $fluent-checkbox-border-width;
+  border-style: solid;
+  border-color: $checkbox-border-color;
+  border-radius: $fluent-checkbox-icon-border-radius;
+  background-color: $checkbox-foreground-color;
+  font-size: $fluent-checkbox-icon-font-size;
+
+  &::before {
+    z-index: 1;
+  }
+}
+
+.dx-checkbox-text {
+  padding-inline-start: $fluent-checkbox-text-padding-start;
+  padding-inline-end: $fluent-checkbox-text-padding-end;
+}
+
+.dx-checkbox {
+  .dx-checkbox-container {
+    overflow: visible;
+  }
+
+  &.dx-invalid {
+    .dx-checkbox-icon {
+      border-color: $checkbox-invalid-color;
+    }
+  }
+
+  &.dx-state-readonly {
+    .dx-checkbox-icon {
+      border-color: $checkbox-border-color-disabled;
+    }
+  }
+
+  &.dx-state-hover {
+    .dx-checkbox-icon {
+      border-color: $checkbox-border-color-hover;
+    }
+
+    &.dx-invalid {
+      .dx-checkbox-icon {
+        border-color: $checkbox-invalid-color-hover;
+      }
+    }
+  }
+
+  &.dx-state-active {
+    .dx-checkbox-icon {
+      border-color: $checkbox-border-color-active;
+    }
+  }
+
+  &.dx-state-focused {
+    .dx-checkbox-icon {
+      border-color: $checkbox-accent-color-focused;
+    }
+  }
+
+  &.dx-state-active,
+  &.dx-state-focused {
+    &.dx-invalid {
+      .dx-checkbox-icon {
+        border-color: $checkbox-invalid-color-focused;
+      }
+    }
+  }
+
+  &.dx-state-disabled,
+  .dx-state-disabled & {
+    opacity: 1;
+
+    .dx-checkbox-icon {
+      border-color: $checkbox-border-color-disabled;
+    }
+  }
+}
+
+.dx-checkbox-checked {
+  .dx-checkbox-icon {
+    color: $checkbox-foreground-color;
+    border-color: $checkbox-accent-color;
+    background-color: $checkbox-accent-color;
+
+    @include dx-icon(check);
+
+    font-size: $fluent-checkbox-icon-font-size;
+
+    @include dx-checkbox-icon-centered($fluent-checkbox-arrow-icon-size, $fluent-checkbox-arrow-icon-size, $fluent-checkbox-arrow-font-size);
+  }
+
+  &.dx-state-hover {
+    .dx-checkbox-icon {
+      border-color: $checkbox-accent-color-hover;
+      background-color: $checkbox-accent-color-hover;
+    }
+
+    &.dx-invalid {
+      .dx-checkbox-icon {
+        border-color: $checkbox-invalid-color-hover;
+        background-color: $checkbox-invalid-color-hover;
+      }
+    }
+  }
+
+  &.dx-state-active,
+  &.dx-state-focused {
+    .dx-checkbox-icon {
+      border-color: $checkbox-accent-color-focused;
+      background-color: $checkbox-accent-color-focused;
+    }
+
+    &.dx-invalid {
+      .dx-checkbox-icon {
+        border-color: $checkbox-invalid-color-focused;
+        background-color: $checkbox-invalid-color-focused;
+      }
+    }
+  }
+
+  &.dx-invalid {
+    .dx-checkbox-icon {
+      background-color: $checkbox-invalid-color;
+    }
+  }
+
+  &.dx-state-readonly,
+  &.dx-state-disabled,
+  .dx-state-disabled &,
+  &.dx-state-readonly.dx-invalid {
+    .dx-checkbox-icon {
+      color: $checkbox-foreground-disabled-color;
+      background-color: $checkbox-foreground-color;
+    }
+  }
+}
+
+@include dx-checkbox-icon-indeterminate(
+  $checkbox-foreground-color,
+  $checkbox-accent-color,
+  $fluent-checkbox-indeterminate-icon-height,
+  $fluent-checkbox-indeterminate-icon-width,
+  $fluent-checkbox-indeterminate-icon-border-radius,
+);
+
+.dx-checkbox-indeterminate {
+  .dx-checkbox-icon {
+    border-color: $checkbox-accent-color;
+  }
+
+  &.dx-invalid {
+    .dx-checkbox-icon {
+      &::before {
+        background-color: $checkbox-invalid-color;
+      }
+    }
+  }
+
+  &.dx-state-hover {
+    .dx-checkbox-icon {
+      border-color: $checkbox-accent-color-hover;
+
+      &::before {
+        background-color: $checkbox-accent-color-hover;
+      }
+    }
+
+    &.dx-invalid {
+      .dx-checkbox-icon {
+        border-color: $checkbox-invalid-color-hover;
+
+        &::before {
+          background-color: $checkbox-invalid-color-hover;
+        }
+      }
+    }
+  }
+
+  &.dx-state-active,
+  &.dx-state-focused {
+    .dx-checkbox-icon {
+      border-color: $checkbox-accent-color-focused;
+
+      &::before {
+        background-color: $checkbox-accent-color-focused;
+      }
+    }
+
+    &.dx-invalid {
+      .dx-checkbox-icon {
+        border-color: $checkbox-invalid-color-focused;
+
+        &::before {
+          background-color: $checkbox-invalid-color-focused;
+        }
+      }
+    }
+  }
+
+  &.dx-state-readonly,
+  &.dx-state-disabled,
+  .dx-state-disabled &,
+  &.dx-state-readonly.dx-invalid {
+    .dx-checkbox-icon {
+      &::before {
+        background-color: $checkbox-foreground-disabled-color;
+      }
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_sizes.scss
new file mode 100644
index 000000000000..37db82e05e89
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_sizes.scss
@@ -0,0 +1,29 @@
+@use "../sizes" as *;
+@use "colors" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-checkbox-icon-font-size: ds.$font-size-160 !default; // dx-icon-glyph-size: text roles not applicable
+
+$fluent-checkbox-border-width: ds.$border-width-10 !default;
+$fluent-checkbox-icon-border-radius: ds.$border-radius-20 !default;
+
+$fluent-checkbox-arrow-icon-size: 1em !default;
+$fluent-checkbox-arrow-font-size: 0.75em !default;
+$fluent-checkbox-indeterminate-icon-height: 0.5em !default;
+$fluent-checkbox-indeterminate-icon-width: 0.5em !default;
+$fluent-checkbox-indeterminate-icon-border-radius: ds.$border-radius-20 !default;
+
+$fluent-checkbox-text-padding-start: null !default;
+$fluent-checkbox-text-padding-end: null !default;
+
+@if $size == "default" {
+  $fluent-checkbox-text-padding-start: ds.$spacing-120 !default;
+  $fluent-checkbox-text-padding-end: ds.$spacing-80 !default;
+}
+
+@else if $size == "compact" {
+  $fluent-checkbox-text-padding-start: ds.$spacing-80 !default;
+  $fluent-checkbox-text-padding-end: ds.$spacing-60 !default;
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/color.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/color.scss
new file mode 100644
index 000000000000..c68bdf88940c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/color.scss
@@ -0,0 +1,36 @@
+@use "sass:math";
+@use "sass:color";
+
+@function difference($minuend, $subtrahend) {
+  @return color.adjust(
+        $minuend,
+        $red: - (color.channel($subtrahend, "red", $space: rgb)),
+        $green: - (color.channel($subtrahend, "green", $space: rgb)),
+        $blue: - (color.channel($subtrahend, "blue", $space: rgb)));
+}
+
+@function screen($color1, $color2) {
+  $r1: math.div(color.channel($color1, "red", $space: rgb), 255);
+  $g1: math.div(color.channel($color1, "green", $space: rgb), 255);
+  $b1: math.div(color.channel($color1, "blue", $space: rgb), 255);
+
+  $r2: math.div(color.channel($color2, "red", $space: rgb), 255);
+  $g2: math.div(color.channel($color2, "green", $space: rgb), 255);
+  $b2: math.div(color.channel($color2, "blue", $space: rgb), 255);
+
+  @return color.change(
+        $color1,
+        $red: ($r1 + $r2 - $r1 * $r2) * 255,
+        $green: ($g1 + $g2 - $g1 * $g2) * 255,
+        $blue: ($b1 + $b2 - $b1 * $b2) * 255);
+}
+
+@function adjust-if-not-achromatic($color, $hue, $saturation, $lightness) {
+  $out: color.adjust($color, $saturation: $saturation, $lightness: $lightness, $space: hsl);
+
+  @if not color.is-powerless($out, "hue", $space: hsl) {
+    $out: color.adjust($out, $hue: $hue, $space: hsl);
+  }
+
+  @return $out;
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_colors.scss
new file mode 100644
index 000000000000..2eefb13775bc
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_colors.scss
@@ -0,0 +1,7 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$colorbox-preview-icon-color: ds.$color-content-neutral-subdued-rest !default;
+
+$colorbox-foreground-disabled: ds.$color-content-neutral-default-disabled !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_index.scss
new file mode 100644
index 000000000000..b35b20bedbef
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_index.scss
@@ -0,0 +1,69 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../colorView/colors" as *;
+@use "../textEditor/sizes" as *;
+@use "../../base/colorBox";
+@use "../../base/colorBox/mixins" as *;
+
+// adduse
+@use "../colorView";
+@use "../dropDownEditor";
+
+
+.dx-colorbox {
+  .dx-colorbox-input-container {
+    .dx-placeholder::before,
+    .dx-colorbox-input {
+      padding-inline-start: $fluent-colorbox-preview-width;
+    }
+
+    &::after {
+      left: calc(#{$fluent-colorbox-preview-padding} + 1px);
+    }
+  }
+
+  &.dx-texteditor {
+    .dx-texteditor-label {
+      .dx-label-before {
+        min-width: $fluent-colorbox-preview-width;
+      }
+    }
+  }
+}
+
+.dx-colorbox-color-result-preview {
+  position: absolute;
+  top: 50%;
+  z-index: 2;
+  width: $fluent-colorbox-preview-icon-size;
+  height: $fluent-colorbox-preview-icon-size;
+  margin-top: math.div(-$fluent-colorbox-preview-icon-size, 2);
+  inset-inline-start: $fluent-colorbox-preview-padding;
+  border: $fluent-colorbox-color-result-preview-border;
+  border-color: $colorview-border-color;
+
+  .dx-icon-colordismiss {
+    color: $colorbox-preview-icon-color;
+  }
+
+  .dx-state-disabled & {
+    .dx-icon-colordismiss {
+      color: $colorbox-foreground-disabled;
+    }
+  }
+}
+
+.dx-colorbox-overlay {
+  &.dx-overlay-content {
+    background-color: $colorbox-overlay-bg;
+  }
+
+  .dx-popup-content {
+    padding: $fluent-colorbox-overlay-padding;
+  }
+
+  padding: 0;
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_sizes.scss
new file mode 100644
index 000000000000..77cd78b88280
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorBox/_sizes.scss
@@ -0,0 +1,23 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-colorbox-overlay-padding: null !default;
+$fluent-colorbox-preview-padding: null !default;
+$fluent-colorbox-preview-icon-size: $fluent-base-icon-size !default;
+
+@if $size == "default" {
+  $fluent-colorbox-overlay-padding: ds.$spacing-200 !default;
+  $fluent-colorbox-preview-padding: ds.$spacing-120 !default;
+}
+
+@else if $size == "compact" {
+  $fluent-colorbox-overlay-padding: ds.$spacing-160 !default;
+  $fluent-colorbox-preview-padding: ds.$spacing-80 !default;
+}
+
+$fluent-colorbox-preview-width: calc(#{$fluent-colorbox-preview-padding} * 2 + #{$fluent-colorbox-preview-icon-size}) !default;
+
+// Values hoisted from style-file literals (tokenized)
+$fluent-colorbox-color-result-preview-border: ds.$border-width-10 solid !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_colors.scss
new file mode 100644
index 000000000000..e7bc7b02244f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_colors.scss
@@ -0,0 +1,15 @@
+@use "../overlay/colors" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+/**
+* $name 10. Overlay background
+* $type color
+*/
+$colorbox-overlay-bg: $overlay-content-bg !default;
+$colorbox-palette-cell-bg: $colorbox-overlay-bg !default;
+$colorview-border-color: ds.$color-border-neutral-default-rest !default;
+$colorview-label-color: ds.$color-content-neutral-subdued-rest !default;
+$colorview-handle-color: ds.$color-surface-neutral-default-rest !default;
+$colorview-handle-border-color: ds.$color-border-neutral-default-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_index.scss
new file mode 100644
index 000000000000..2570f523371f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_index.scss
@@ -0,0 +1,122 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/colorView/mixins" as *;
+@use "../../base/colorView";
+
+// adduse
+
+
+@include dx-base-colorview-styles($colorview-handle-color, $colorview-handle-border-color);
+
+
+$fluent-colorview-alpha-width: $fluent-colorview-palette-width + 4;
+$fluent-colorview-hue-scale-height: $fluent-colorview-palette-height;
+
+.dx-colorview-container {
+  width: $fluent-colorview-container-width;
+
+  label {
+    line-height: $fluent-colorview-container-line-height;
+    display: flex;
+    align-items: center;
+    margin-bottom: $fluent-colorview-colorview-container-margin-bottom;
+
+    &.dx-colorview-label-hex {
+      margin: $fluent-colorview-container-hex-margin;
+    }
+
+    &.dx-colorview-alpha-channel-label {
+      margin: 0 0 0 $fluent-colorview-container-alpha-label-margin;
+      width: $fluent-colorview-container-alpha-label-width;
+    }
+
+    .dx-texteditor {
+      width: $fluent-colorview-container-textbox-width;
+      margin: $fluent-colorview-container-textbox-margin;
+    }
+  }
+}
+
+.dx-colorview-hue-scale-cell {
+  margin-left: $fluent-colorview-hue-scale-margin;
+}
+
+.dx-colorview-palette {
+  width: $fluent-colorview-palette-width;
+  height: $fluent-colorview-palette-height;
+}
+
+.dx-colorview-alpha-channel-scale {
+  width: $fluent-colorview-palette-width;
+}
+
+.dx-colorview-container-row.dx-colorview-alpha-channel-row {
+  margin-top: $fluent-colorview-alpha-margin;
+  display: flex;
+  align-items: center;
+}
+
+.dx-colorview-hue-scale {
+  width: $fluent-colorview-hue-scale-width;
+  height: $fluent-colorview-hue-scale-height;
+}
+
+.dx-colorview-alpha-channel-cell {
+  width: $fluent-colorview-alpha-width;
+}
+
+.dx-colorview-hue-scale-wrapper {
+  height: $fluent-colorview-hue-scale-height + 2;
+}
+
+.dx-colorview-color-preview {
+  width: 100%;
+  height: $fluent-colorview-color-preview-height;
+}
+
+.dx-colorview-controls-container {
+  width: $fluent-colorview-controls-container-width;
+  margin-left: $fluent-colorview-controls-container-margin;
+}
+
+.dx-colorview-container label { // stylelint-disable-line no-duplicate-selectors
+  color: $colorview-label-color;
+}
+
+.dx-colorview-palette-cell,
+.dx-colorview-alpha-channel-border,
+.dx-colorview-hue-scale-wrapper,
+.dx-colorview-color-preview-container {
+  padding: $fluent-colorview-colorview-color-preview-container-padding;
+  margin: $fluent-colorview-colorview-color-preview-container-margin;
+  margin-top: 0;
+  background-color: $colorbox-palette-cell-bg;
+  box-shadow: 0 0 0 1px $colorview-border-color;
+}
+
+.dx-colorview-color-preview-container {
+  margin-bottom: $fluent-colorview-preview-container-margin;
+}
+
+.dx-rtl {
+  .dx-colorview-controls-container {
+    margin-left: 0;
+    margin-right: $fluent-colorview-controls-container-margin;
+  }
+
+  .dx-colorview-hue-scale-cell {
+    margin-left: 0;
+    margin-right: $fluent-colorview-hue-scale-margin;
+  }
+
+  .dx-colorview-container {
+    label {
+      &.dx-colorview-alpha-channel-label {
+        margin-left: 0;
+        margin-right: $fluent-colorview-container-alpha-label-margin;
+      }
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_sizes.scss
new file mode 100644
index 000000000000..4fcc0caa383a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/colorView/_sizes.scss
@@ -0,0 +1,28 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-colorview-container-width: 450px !default; // dx-offscale: 450px
+$fluent-colorview-palette-width: 288px !default; // dx-offscale: 288px
+$fluent-colorview-palette-height: 299px !default; // dx-offscale: 299px
+$fluent-colorview-alpha-margin: ds.$spacing-100 !default;
+$fluent-colorview-hue-scale-width: ds.$spacing-180 !default;
+$fluent-colorview-hue-scale-margin: ds.$spacing-190 !default;
+$fluent-colorview-color-preview-height: ds.$spacing-400 !default;
+$fluent-colorview-preview-container-margin: ds.$spacing-340 !default;
+
+$fluent-colorview-container-line-height: normal !default;
+$fluent-colorview-container-hex-margin: ds.$spacing-200 0 0 0 !default;
+$fluent-colorview-container-alpha-label-width: 115px !default; // dx-offscale: 115px
+$fluent-colorview-container-alpha-label-margin: 43px !default; // dx-offscale: 43px
+$fluent-colorview-container-textbox-width: 69px !default; // dx-offscale: 69px
+$fluent-colorview-container-textbox-margin: 0 0 0 ds.$spacing-100 !default;
+
+$fluent-colorview-controls-container-width: 90px !default; // dx-offscale: 90px
+$fluent-colorview-controls-container-margin: 27px !default; // dx-offscale: 27px
+
+// Values hoisted from style-file literals (tokenized)
+$fluent-colorview-colorview-container-margin-bottom: ds.$spacing-100 !default;
+$fluent-colorview-colorview-color-preview-container-padding: ds.$spacing-10 !default;
+$fluent-colorview-colorview-color-preview-container-margin: ds.$spacing-10 !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_colors.scss
new file mode 100644
index 000000000000..5ba5112b644d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_colors.scss
@@ -0,0 +1,22 @@
+@use "../colors" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+// Dropdown/overlay shadow layer colors (mode-aware via the shadow roles).
+$base-dropdown-shadow-color1: ds.$color-shadow-ambient !default;
+$base-dropdown-shadow-color2: ds.$color-shadow-key !default;
+
+$common-accent: ds.$color-surface-primary-default-rest !default;
+$common-bg: ds.$color-surface-neutral-default-rest !default;
+$common-border-color: ds.$color-border-neutral-default-rest !default;
+
+// Non-color theme-level values (opacity/font family) — kept referencing the theme layer.
+$common-disabled-opacity: $base-disabled-opacity !default;
+$common-font-family: $base-font-family !default;
+$common-invalid-color: ds.$color-border-danger-default-rest !default;
+$common-inverted-text-color: ds.$color-content-neutral-default-static-dark-rest !default;
+$common-success: ds.$color-surface-success-default-rest !default;
+$common-text-color: ds.$color-content-neutral-default-rest !default;
+$common-typography-bg: ds.$color-surface-neutral-default-rest !default;
+$common-typography-color: ds.$color-content-neutral-default-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_index.scss
new file mode 100644
index 000000000000..cc8a6a4c5418
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_index.scss
@@ -0,0 +1,68 @@
+@use "sass:color";
+@use "colors" as *;
+@use "../colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+
+
+// adduse
+.dx-theme-marker {
+  font-family: "dx.dxdsfluent.#{$fluent-color-accent-modificator}.#{$fluent-color-theme-modificator}#{$fluent-size-postfix}";
+}
+
+// stylelint-disable declaration-no-important
+.dx-theme-accent-as-text-color {
+  color: $common-accent !important;
+}
+
+.dx-theme-text-color {
+  color: $common-text-color !important;
+}
+
+.dx-theme-background-color-as-text-color {
+  color: $common-bg !important;
+}
+
+.dx-theme-border-color-as-text-color {
+  color: $common-border-color !important;
+}
+
+.dx-theme-accent-as-background-color {
+  background-color: $common-accent !important;
+  fill: $common-accent !important;
+}
+
+.dx-theme-text-color-as-background-color {
+  background-color: $common-text-color !important;
+  fill: $common-text-color !important;
+}
+
+.dx-theme-background-color {
+  background-color: $common-bg !important;
+  fill: $common-bg !important;
+}
+
+.dx-theme-typography-background-color {
+  background-color: $common-typography-bg !important;
+}
+
+.dx-theme-border-color-as-background-color {
+  background-color: $common-border-color !important;
+  fill: $common-border-color !important;
+}
+
+.dx-theme-accent-as-border-color {
+  border-color: $common-accent !important;
+}
+
+.dx-theme-text-color-as-border-color {
+  border-color: $common-text-color !important;
+}
+
+.dx-theme-background-color-as-border-color {
+  border-color: $common-bg !important;
+}
+
+.dx-theme-border-color {
+  border-color: $common-border-color !important;
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_mixins.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_mixins.scss
new file mode 100644
index 000000000000..d5d4f862d724
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_mixins.scss
@@ -0,0 +1,106 @@
+@use "sass:math";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/mixins" as *;
+@use "../../base/validation" as *;
+@use "../list/sizes" as *;
+
+$badge-invalid-bg: $common-invalid-color;
+
+@mixin dx-base-typography() {
+  @include dx-base-typography-mixin(
+      $common-typography-color,
+      $fluent-base-font-size,
+      $common-font-family,
+      $fluent-line-height
+    );
+}
+
+@mixin disabled-widget($opacity: $common-disabled-opacity) {
+  @include disabled-widget-mixin($opacity);
+}
+
+@mixin badge-settings() {
+  pointer-events: none;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: 50%;
+  margin-top: calc(#{$fluent-invalid-badge-size} / -2);
+  width: $fluent-invalid-badge-size;
+  height: $fluent-invalid-badge-size;
+  line-height: calc(#{$fluent-invalid-badge-size} + 1px);
+  font-size: $fluent-base-font-size;
+}
+
+@mixin dx-invalid-fluent-badge() {
+  @include badge-settings();
+
+  font-size: $fluent-base-font-size;
+  font-weight: $common-invalid-badge-font-weight;
+  background-color: $badge-invalid-bg;
+  color: $common-inverted-text-color;
+  content: '!';
+  border-radius: 50%;
+}
+
+@mixin dx-valid-fluent-badge() {
+  @include badge-settings();
+
+  font-size: $fluent-valid-badge-font-size;
+  font-weight: bold;
+  font-family: 'DXIcons', sans-serif;
+  color: $common-success;
+  content: '\f005';
+
+  @include validation-badge-animation();
+}
+
+@mixin dx-pending-indicator-fluent() {
+  @include dx-pending-indicator($fluent-invalid-badge-size);
+}
+
+@mixin dx-dropdownlist-list-appearance() {
+  height: 100%;
+
+  &.dx-popup-wrapper .dx-overlay-content {
+    box-shadow: $fluent-base-dropdown-widgets-shadow;
+    border-top-width: 0;
+    border-bottom-width: $common-overlay-content-border-bottom-width;
+
+    &.dx-dropdowneditor-overlay-flipped {
+      border-top-width: $common-dropdowneditor-overlay-flipped-border-top-width;
+      border-bottom-width: 0;
+    }
+  }
+
+  .dx-popup-content {
+    height: 100%;
+    padding: $common-content-padding;
+  }
+
+  .dx-list {
+    height: 100%;
+    min-height: $fluent-list-item-height;
+  }
+
+  .dx-list-select-all {
+    margin-inline: $fluent-list-item-margin-inline;
+    padding: calc(#{$fluent-list-item-vertical-padding} + 2px) 0 calc(#{$fluent-list-item-vertical-padding} - 2px);
+  }
+
+  .dx-list-items {
+    margin-inline: $fluent-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/dxdsfluent/common/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_sizes.scss
new file mode 100644
index 000000000000..1523eee3a39d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/common/_sizes.scss
@@ -0,0 +1,38 @@
+@use "sass:math";
+@use "../sizes" as *;
+@use "./colors" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-line-height: null !default;
+
+$fluent-inline-borderedwidget-inner-size: calc(#{$fluent-base-inline-widget-height} - #{$fluent-base-border-width} * 2) !default;
+
+$fluent-invalid-badge-size: calc(#{$fluent-base-icon-size} - #{ds.$spacing-20}) !default;
+$fluent-invalid-badge-horizontal-padding: calc((#{$fluent-inline-borderedwidget-inner-size} - #{$fluent-invalid-badge-size}) / 2) !default;
+$fluent-invalid-badge-halfhorizontal-padding: calc((#{$fluent-invalid-badge-horizontal-padding}) / 2) !default;
+
+$fluent-valid-badge-font-size: calc(#{$fluent-base-font-size} + 6px) !default;
+
+$fluent-base-dropdown-widgets-shadow: null !default;
+
+@if $size == "default" {
+  $fluent-line-height: 1.428571 !default;
+  $fluent-base-dropdown-widgets-shadow: 0 0 ds.$spacing-20 0 $base-dropdown-shadow-color1, 0 ds.$spacing-80 ds.$spacing-160 0 $base-dropdown-shadow-color2 !default;
+}
+
+@else if $size == "compact" {
+  $fluent-line-height: 1.3333 !default;
+  $fluent-base-dropdown-widgets-shadow: 0 0 ds.$spacing-20 0 $base-dropdown-shadow-color1, 0 ds.$spacing-40 ds.$spacing-80 0 $base-dropdown-shadow-color2 !default;
+}
+
+:root {
+  --dx-line-height: #{$fluent-line-height};
+}
+
+// Values hoisted from style-file literals (tokenized)
+$common-invalid-badge-font-weight: ds.$font-weight-500 !default; // dx-no-semantic-role: 500 is off the weight-role scale (400/600/700)
+$common-content-padding: ds.$spacing-10 !default;
+$common-overlay-content-border-bottom-width: ds.$border-width-10 !default;
+$common-dropdowneditor-overlay-flipped-border-top-width: ds.$border-width-10 !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_colors.scss
new file mode 100644
index 000000000000..123160b958d1
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_colors.scss
@@ -0,0 +1,7 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$contextmenu-foreground-disabled: ds.$color-content-neutral-default-disabled !default;
+$contextmenu-icon-color: ds.$color-content-neutral-subdued-rest !default;
+$contextmenu-shadow: ds.$box-shadow-md !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_index.scss
new file mode 100644
index 000000000000..868352179d17
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_index.scss
@@ -0,0 +1,84 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../button/sizes" as *;
+@use "../menuBase/sizes" as *;
+@use "../menu/colors" as *;
+@use "../menu/sizes" as *;
+@use "../../base/contextMenu";
+
+// adduse
+@use "../overlay";
+@use "../menuBase" as *;
+
+
+.dx-context-menu {
+  color: $menu-color;
+
+  .dx-menu-items-container {
+    display: flex;
+    flex-direction: column;
+    padding: $fluent-context-menu-items-container-padding;
+    gap: $fluent-context-menu-items-container-gap;
+  }
+
+  .dx-menu-item {
+    border-radius: $fluent-context-menu-item-border-radius;
+
+    .dx-menu-item-content {
+      display: flex;
+      align-items: center;
+      padding: $fluent-menu-vertical-padding $fluent-context-menu-horizontal-padding;
+      gap: $fluent-context-menu-item-content-gap;
+
+      .dx-menu-item-text {
+        padding-inline: $fluent-context-menu-item-text-padding-inline;
+      }
+
+      .dx-menu-item-popout-container {
+        inset-inline-end: $fluent-context-menu-horizontal-padding;
+        width: $fluent-base-icon-size;
+        display: flex;
+        align-items: center;
+
+        .dx-menu-item-popout {
+          display: flex;
+          align-items: center;
+
+          @include dx-icon(spinright);
+          @include dx-icon-sizing($fluent-button-icon-size);
+        }
+      }
+    }
+
+    .dx-menu-item-popout {
+      color: $contextmenu-icon-color;
+    }
+
+    &.dx-state-disabled {
+      .dx-menu-item-popout {
+        color: $contextmenu-foreground-disabled;
+      }
+    }
+
+    &.dx-menu-item-has-submenu > .dx-menu-item-content {
+      padding-inline-end: $fluent-menu-item-with-icon-horizontal-padding;
+    }
+  }
+
+  &.dx-overlay-content.dx-state-focused {
+    box-shadow: none;
+  }
+
+  .dx-submenu {
+    background-color: $menu-popup-bg;
+    border-radius: $fluent-context-menu-border-radius;
+    box-shadow: $contextmenu-shadow;
+  }
+
+  .dx-menu-separator {
+    background-color: $menu-separator-bg;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_sizes.scss
new file mode 100644
index 000000000000..456b22020538
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/contextMenu/_sizes.scss
@@ -0,0 +1,22 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-context-menu-horizontal-padding: null !default;
+$fluent-context-menu-border-radius: $base-border-radius !default;
+$fluent-context-menu-items-container-padding: ds.$spacing-40 !default;
+$fluent-context-menu-items-container-gap: ds.$spacing-20 !default;
+$fluent-context-menu-item-border-radius: $base-border-radius !default;
+$fluent-context-menu-item-content-gap: null !default;
+$fluent-context-menu-item-text-padding-inline: ds.$spacing-20 !default;
+
+@if $size == "default" {
+  $fluent-context-menu-horizontal-padding: ds.$spacing-60 !default;
+  $fluent-context-menu-item-content-gap: ds.$spacing-60 !default;
+}
+
+@else if $size == "compact" {
+  $fluent-context-menu-horizontal-padding: ds.$spacing-40 !default;
+  $fluent-context-menu-item-content-gap: ds.$spacing-40 !default;
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_colors.scss
new file mode 100644
index 000000000000..329f6f67bc65
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_colors.scss
@@ -0,0 +1,9 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-datagrid-grouppanel-item-bg: ds.$color-surface-neutral-deep-rest !default;
+
+// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
+$datagrid-accent: ds.$color-surface-primary-default-rest !default;
+$datagrid-border-color-disabled: ds.$color-border-neutral-default-disabled !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_index.scss
new file mode 100644
index 000000000000..cc0c559a4e50
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_index.scss
@@ -0,0 +1,135 @@
+@use "../colors" as *;
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../gridBase" as *;
+@use "../gridBase/colors" as *;
+@use "../gridBase/sizes" as *;
+@use "../../base/dataGrid" as baseGrid with (
+  $datagrid-header-filter-outline: $fluent-datagrid-header-filter-outline,
+  $datagrid-header-filter-outline-offset: $fluent-datagrid-header-filter-outline-offset,
+  $datagrid-filter-panel-clear-filter-outline-offset: $fluent-datagrid-filter-panel-clear-filter-outline-offset,
+  $datagrid-button-margin-left: $fluent-datagrid-button-margin-left,
+  $datagrid-button-margin-top: $fluent-datagrid-button-margin-top,
+  $datagrid-error-message-margin-bottom: $fluent-datagrid-error-message-margin-bottom,
+  $datagrid-button-margin-right: $fluent-datagrid-button-margin-right,
+  $datagrid-border: $datagrid-border,
+  $datagrid-border-color: $datagrid-border-color,
+  $datagrid-drag-header-border-color: $datagrid-drag-header-border-color,
+  $datagrid-row-error-bg: $datagrid-row-error-bg,
+  $datagrid-row-error-color: $datagrid-row-error-color,
+  $datagrid-base-color: $datagrid-base-color,
+  $datagrid-base-background-color: $datagrid-base-background-color,
+  $datagrid-focused-border-color: $datagrid-focused-border-color,
+  $header-filter-color: $header-filter-color,
+  $header-filter-color-empty: $header-filter-color-empty,
+  $base-focus-color: $base-focus-color,
+  $datagrid-text-stub-background-image-path: $datagrid-text-stub-background-image-path,
+  $datagrid-group-row-border: $fluent-datagrid-group-row-border,
+  $datagrid-sticky-column-border: $fluent-datagrid-sticky-column-border,
+  $datagrid-cell-focus-outline: $fluent-datagrid-cell-focus-outline,
+);
+@use 'layout/cell';
+@include grid-base(datagrid);
+
+.dx-datagrid-group-panel {
+  font-size: $fluent-base-font-size;
+  touch-action: pinch-zoom;
+
+  .dx-group-panel-message {
+    color: $datagrid-columnchooser-item-color;
+    font-weight: $datagrid-columnchooser-font-weight;
+    padding: $fluent-datagrid-cell-padding 0;
+    border-top: $fluent-grid-base-border-hidden;
+    border-bottom: $fluent-grid-base-border-hidden;
+    line-height: $fluent-grid-base-group-panel-message-line-height;
+  }
+
+  .dx-group-panel-item {
+    margin-right: $fluent-grid-base-grouppanel-item-margin;
+    color: $datagrid-columnchooser-item-color;
+    font-weight: $fluent-datagrid-grouppanel-item-font-weight;
+    font-size: $fluent-grid-base-header-cell-font-size;
+    line-height: $fluent-grid-base-header-line-height;
+    background: $fluent-datagrid-grouppanel-item-bg;
+    border-radius: $area-field-border-radius;
+    padding: $fluent-datagrid-group-panel-item-padding;
+    border-width: $fluent-datagrid-grouppanel-item-border-width;
+    border-style: solid;
+    border-color: $datagrid-border-color-disabled;
+  }
+
+  .dx-block-separator {
+    margin-right: $fluent-grid-base-grouppanel-item-margin;
+    color: $datagrid-columnchooser-item-color;
+    font-weight: $datagrid-columnchooser-font-weight;
+    background-color: $datagrid-accent;
+  }
+
+  .dx-sort {
+    color: $header-filter-color-empty;
+  }
+}
+
+.dx-datagrid-rowsview {
+  .dx-datagrid-group-row-container {
+    padding-left: $fluent-grid-base-cell-horizontal-padding;
+    padding-right: $fluent-grid-base-cell-horizontal-padding;
+    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: $datagrid-group-row-color;
+      background-color: $datagrid-group-row-bg;
+    }
+
+    font-size: $fluent-grid-base-header-cell-font-size;
+    font-weight: $fluent-datagrid-group-row-font-weight;
+  }
+}
+
+.dx-datagrid-group-opened {
+  @include dx-icon(chevrondown);
+  @include dx-icon-sizing($fluent-base-icon-size);
+
+  color: $datagrid-chevron-icon-color;
+}
+
+.dx-datagrid-group-closed {
+  @include dx-icon(chevronright);
+  @include dx-icon-sizing($fluent-base-icon-size);
+
+  color: $datagrid-chevron-icon-color;
+}
+
+.dx-row.dx-datagrid-group-footer {
+  &.dx-column-lines {
+    border-bottom: $datagrid-border;
+    border-bottom-color: $datagrid-border-color;
+  }
+
+}
+
+
+.dx-rtl {
+  .dx-datagrid-group-panel {
+    .dx-group-panel-item,
+    .dx-block-separator {
+      margin-left: $fluent-grid-base-grouppanel-item-margin;
+    }
+  }
+}
+
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_sizes.scss
new file mode 100644
index 000000000000..3a414e519bfb
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/_sizes.scss
@@ -0,0 +1,41 @@
+@use "../sizes" as *;
+@use '../../base/dataGrid/variables' as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-datagrid-cell-padding: ds.$spacing-70 !default;
+$fluent-datagrid-grouppanel-item-font-weight: ds.$font-weight-base-default !default;
+
+$area-field-border-radius: null !default;
+$area-field-top-bottom-padding: null !default;
+
+@if $size == "default" {
+  $area-field-border-radius: ds.$border-radius-60 !default;
+  $area-field-top-bottom-padding: ds.$spacing-50 !default;
+}
+
+@else if $size == "compact" {
+  $area-field-border-radius: ds.$border-radius-40 !default;
+  $area-field-top-bottom-padding: ds.$spacing-20 !default;
+}
+
+$datagrid-cell-padding: $fluent-datagrid-cell-padding !default;
+
+// Values hoisted from style-file literals (tokenized)
+$fluent-datagrid-group-row-font-weight: ds.$font-weight-500 !default; // dx-no-semantic-role: 500 is off the weight-role scale (400/600/700)
+$fluent-datagrid-grouppanel-item-border-width: ds.$border-width-10 !default;
+$fluent-datagrid-group-panel-item-padding: $area-field-top-bottom-padding ds.$spacing-100 !default;
+
+// Base-layer sizing injected with design tokens (wave B2)
+$fluent-datagrid-header-filter-outline: ds.$spacing-20 solid !default;
+$fluent-datagrid-header-filter-outline-offset: ds.$spacing-20 !default;
+$fluent-datagrid-filter-panel-clear-filter-outline-offset: ds.$spacing-30 !default;
+$fluent-datagrid-button-margin-left: ds.$spacing-100 !default;
+$fluent-datagrid-button-margin-top: ds.$spacing-100 !default;
+$fluent-datagrid-error-message-margin-bottom: ds.$spacing-200 !default;
+$fluent-datagrid-button-margin-right: ds.$spacing-100 !default;
+
+$fluent-datagrid-group-row-border: ds.$border-width-10 solid !default;
+$fluent-datagrid-sticky-column-border: ds.$border-width-20 solid !default;
+$fluent-datagrid-cell-focus-outline: ds.$spacing-20 solid !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/layout/cell.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/layout/cell.scss
new file mode 100644
index 000000000000..99e80814314a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dataGrid/layout/cell.scss
@@ -0,0 +1,103 @@
+/* stylelint-disable no-duplicate-selectors */
+@use "../colors" as *;
+@use "../sizes" as *;
+@use "../../sizes" as *;
+@use "../../gridBase/colors" as *;
+@use "../../gridBase/sizes" as *;
+@use "../../gridBase/variables" as *;
+
+// #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: $datagrid-border;
+  border-top-color: $datagrid-border-color;
+  border-left-width: 0;
+  border-right-width: 0;
+}
+
+// (0,3,1)
+.dx-datagrid-rowsview .dx-row.dx-group-row td {
+  border-top-color: $fluent-grid-base-border-color;
+  border-bottom-color: $fluent-grid-base-border-color;
+}
+
+// (0,3,1)
+.dx-datagrid-sticky-columns .dx-row.dx-datagrid-group-footer > td {
+  border-bottom: $datagrid-border;
+  border-bottom-color: $datagrid-border-color;
+}
+
+// (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: $fluent-grid-base-cell-vertical-padding;
+}
+
+// (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: $datagrid-summary-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/dxdsfluent/dateBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_colors.scss
new file mode 100644
index 000000000000..40cbb6dd23e2
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_colors.scss
@@ -0,0 +1,4 @@
+@use "../sizes" as *;
+@use "../colors" as *;
+
+// adduse
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_index.scss
new file mode 100644
index 000000000000..02c65f326bbc
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_index.scss
@@ -0,0 +1,143 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../dropDownEditor" as *;
+@use "../../base/dropDownEditor/mixins" as *;
+@use "../textEditor" as *;
+@use "../textEditor/sizes" as *;
+@use "../textEditor/colors" as *;
+@use "../calendar/sizes" as *;
+@use "../../base/dateBox";
+@use "mixins" as *;
+
+// adduse
+@use "../timeView";
+@use "../dateView";
+
+.dx-datebox-wrapper {
+  .dx-popup-title {
+    min-height: $fluent-datebox-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: $fluent-datebox-popup-content-margin;
+}
+
+.dx-datebox-wrapper-list {
+  .dx-overlay-content {
+    border-top: none;
+  }
+}
+
+.dx-device-phone .dx-datebox-wrapper-rollers {
+  .dx-popup-content {
+    padding: $fluent-datebox-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: $fluent-datebox-overlay-item-margin;
+  }
+
+  .dx-datebox-container-cell {
+    margin-right: $fluent-datebox-overlay-item-margin;
+    margin-bottom: $fluent-datebox-overlay-item-margin;
+  }
+}
+
+.dx-datebox-wrapper-calendar.dx-datebox-wrapper-datetime {
+  .dx-timeview {
+    padding: $fluent-datebox-overlay-item-margin;
+  }
+
+  .dx-datebox-container-cell {
+    margin-top: $fluent-datebox-datebox-container-cell-margin-top;
+    margin-right: $fluent-datebox-overlay-item-margin;
+  }
+}
+
+@media (max-width: 320px) {
+  .dx-datebox-wrapper-calendar .dx-calendar {
+    margin: $fluent-datebox-overlay-item-margin-adaptive;
+  }
+}
+
+.dx-rtl {
+  .dx-datebox-wrapper {
+    .dx-popup-bottom {
+      .dx-toolbar-button + .dx-toolbar-button {
+        .dx-button {
+          margin-right: $fluent-datebox-button-margin-right;
+          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(
+        $fluent-dropdowneditor-invalid-badge-size,
+        $fluent-base-standard-texteditor-input-horizontal-padding,
+        $fluent-filled-texteditor-input-horizontal-padding
+      );
+    }
+  }
+}
+
+.dx-texteditor {
+  &.dx-datebox-native {
+    .dx-texteditor-input {
+      padding-right: $texteditor-spin-button-horizontal-padding;
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_mixins.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_mixins.scss
new file mode 100644
index 000000000000..c7f0752039b9
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_mixins.scss
@@ -0,0 +1,17 @@
+@use "../../base/icon_fonts" as *;
+@use "../dropDownEditor" as *;
+@use "../textEditor" as *;
+
+@mixin dx-dropdowneditor-button-icon-styling($icon) {
+  .dx-dropdowneditor-icon {
+    @include dx-icon($icon);
+    @include dx-dropdowneditor-button-icon();
+  }
+
+  &.dx-dropdowneditor-active {
+    .dx-dropdowneditor-icon {
+      @include dx-icon($icon);
+      @include dx-dropdowneditor-button-icon();
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_sizes.scss
new file mode 100644
index 000000000000..b8322e9d90e4
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateBox/_sizes.scss
@@ -0,0 +1,14 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-datebox-overlay-item-margin: ds.$spacing-160 !default;
+$fluent-datebox-overlay-item-margin-adaptive: ds.$spacing-180 !default;
+$fluent-datebox-popup-content-margin: 0 ds.$spacing-340 !default;
+
+// Values hoisted from style-file literals (tokenized)
+$fluent-datebox-content-padding: ds.$spacing-100 !default;
+$fluent-datebox-datebox-container-cell-margin-top: -1px !default; // dx-offscale: -1px
+$fluent-datebox-button-margin-right: ds.$spacing-50 !default;
+$fluent-datebox-popup-title-min-height: ds.$spacing-100 !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_colors.scss
new file mode 100644
index 000000000000..0779caa6ee0e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_colors.scss
@@ -0,0 +1 @@
+// adduse
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_index.scss
new file mode 100644
index 000000000000..bb8c0301e28e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_index.scss
@@ -0,0 +1,113 @@
+@use "sass:math";
+@use "../textEditor/sizes" as *;
+@use "../textEditor/colors" as *;
+@use "../dateBox/mixins" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "colors" as *;
+@use "../../base/dateRangeBox";
+@use "../../base/icon_fonts" as *;
+@use "../textEditor" as *;
+
+// adduse
+
+
+.dx-daterangebox {
+  @include dx-dropdowneditor-button-icon-styling(daterangepicker);
+
+  &.dx-editor-outlined,
+  &.dx-editor-filled {
+    &::before {
+      content: none;
+    }
+  }
+
+  .dx-editor-outlined,
+  .dx-editor-filled {
+    &.dx-datebox {
+      &::before {
+        border-radius: 0;
+        width: calc(100% - 2 * $fluent-daterangebox-active-bar-horizontal-margin);
+        margin: 0 $fluent-daterangebox-active-bar-horizontal-margin;
+      }
+    }
+  }
+
+  &.dx-editor-underlined,
+  &.dx-editor-filled {
+    &::before {
+      border-bottom-width: $fluent-daterangebox-editor-filled-border-bottom-width;
+      transition: none;
+    }
+
+    &.dx-state-hover {
+      &::after {
+        border-bottom-width: $fluent-daterangebox-state-hover-border-bottom-width;
+        transition: none;
+      }
+    }
+
+    &.dx-state-focused {
+      &.dx-invalid {
+        &::before {
+          border-bottom-width: $fluent-daterangebox-invalid-border-bottom-width;
+          transition: none;
+        }
+      }
+    }
+  }
+
+  &.dx-editor-underlined {
+    .dx-daterangebox-separator {
+      padding-right: $fluent-filled-texteditor-input-horizontal-padding;
+    }
+  }
+
+  &.dx-texteditor {
+    > .dx-texteditor-buttons-container {
+      > .dx-button,
+      > .dx-clear-button-area {
+        margin-inline-start: $fluent-daterangebox-custom-button-margin;
+        margin-inline-end: $fluent-daterangebox-custom-button-margin;
+
+        &:first-child {
+          margin-inline-start: 0;
+        }
+
+        &:last-child {
+          margin-inline-end: $fluent-daterangebox-custom-button-margin;
+        }
+      }
+
+      > .dx-dropdowneditor-button:last-child {
+        margin-inline-end: $texteditor-spin-button-horizontal-padding;
+      }
+
+      > .dx-clear-button-area:last-child,
+      > .dx-clear-button-area + div:empty:last-child {
+        margin-inline-end: $fluent-filled-texteditor-input-button-horizontal-padding;
+      }
+    }
+  }
+
+  .dx-datebox {
+    &.dx-end-datebox {
+      &.dx-texteditor {
+        &.dx-invalid {
+          .dx-texteditor-input {
+            padding-inline-end: $fluent-texteditor-invalid-badge-size;
+          }
+        }
+      }
+    }
+  }
+}
+
+.dx-daterangebox-separator {
+  padding-left: $fluent-filled-texteditor-input-horizontal-padding;
+  color: $texteditor-disabled-text-color;
+
+  .dx-icon {
+    @include dx-icon-sizing($fluent-base-icon-size);
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_sizes.scss
new file mode 100644
index 000000000000..56ed380b6659
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateRangeBox/_sizes.scss
@@ -0,0 +1,20 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-daterangebox-active-bar-horizontal-margin: null !default;
+
+@if $size == "default" {
+  $fluent-daterangebox-active-bar-horizontal-margin: ds.$spacing-120 !default;
+}
+
+@else if $size == "compact" {
+  $fluent-daterangebox-active-bar-horizontal-margin: ds.$spacing-80 !default;
+}
+
+// Values hoisted from style-file literals (tokenized)
+$fluent-daterangebox-custom-button-margin: ds.$spacing-60 !default;
+$fluent-daterangebox-editor-filled-border-bottom-width: ds.$border-width-10 !default;
+$fluent-daterangebox-state-hover-border-bottom-width: ds.$border-width-10 !default;
+$fluent-daterangebox-invalid-border-bottom-width: ds.$border-width-10 !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_colors.scss
new file mode 100644
index 000000000000..a20fe4627585
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_colors.scss
@@ -0,0 +1,10 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+// Fade gradients over the surface — relative-color bridge (no gradient role in foundation).
+$dateview-shadow-up: 0deg, rgb(from #{ds.$color-surface-neutral-default-rest} r g b / 0) 0%, rgb(from #{ds.$color-surface-neutral-default-rest} r g b / 0.8) 60% !default;
+$dateview-shadow-down: 180deg, rgb(from #{ds.$color-surface-neutral-default-rest} r g b / 0) 0%, rgb(from #{ds.$color-surface-neutral-default-rest} r g b / 0.8) 60% !default;
+$dateview-color: ds.$color-content-neutral-default-rest !default;
+
+$dateview-accent: ds.$color-surface-primary-default-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_index.scss
new file mode 100644
index 000000000000..b3edfe3552b1
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_index.scss
@@ -0,0 +1,141 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/mixins" as *;
+@use "../../base/dateView";
+
+// adduse
+@use "../scrollable";
+
+$fluent-dateview-roller-padding: calc((#{$fluent-dateview-roller-height} - #{$fluent-dateview-roller-item-height}) / 2);
+
+.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: $fluent-dateview-roller-min-width;
+  text-align: center;
+  display: inline-block;
+
+  .dx-button {
+    display: none;
+  }
+
+  .dx-scrollable-content::before,
+  .dx-scrollable-content::after {
+    content: "";
+    height: $fluent-dateview-roller-padding;
+    display: block;
+  }
+
+  .dx-scrollable-container {
+    height: $fluent-dateview-roller-height;
+  }
+
+  &.dx-dateviewroller-year {
+    min-width: $fluent-dateview-roller-year-min-width;
+  }
+
+  &.dx-state-active {
+    .dx-button {
+      display: none;
+    }
+  }
+}
+
+.dx-dateviewroller-month {
+  min-width: $fluent-dateview-roller-month-min-width;
+}
+
+.dx-dateviewroller-hours {
+  &::after {
+    content: ":";
+    font-size: $fluent-dateview-hours-colon-font-size;
+    position: absolute;
+    inset-inline-end: -9%;
+    font-weight: bold;
+    top: 37%;
+    color: $dateview-color;
+  }
+
+  .dx-dateview-item-selected-frame {
+    padding-left: 20%;
+  }
+}
+
+.dx-dateviewroller-minutes {
+  .dx-dateview-item-selected-frame {
+    width: 80%;
+  }
+}
+
+.dx-dateview-item {
+  height: $fluent-dateview-roller-item-height;
+  line-height: $fluent-dateview-roller-item-height;
+  text-align: center;
+  font-size: $fluent-dateview-item-font-size;
+  color: $dateview-color;
+}
+
+.dx-dateview-item-selected {
+  font-size: $fluent-dateview-item-selected-font-size;
+  color: $dateview-accent;
+}
+
+.dx-dateview-item-selected-frame {
+  position: absolute;
+  top: $fluent-dateview-roller-padding;
+  width: 100%;
+
+  &::before,
+  &::after {
+    backface-visibility: hidden;
+    content: "";
+    display: block;
+    width: 100%;
+    position: absolute;
+    height: $fluent-dateview-roller-padding;
+  }
+
+  &::before {
+    top: calc(-1 * #{$fluent-dateview-roller-padding});
+
+    @include gradient-linear($dateview-shadow-up);
+  }
+
+  &::after {
+    top: $fluent-dateview-roller-item-height;
+
+    @include gradient-linear($dateview-shadow-down);
+  }
+}
+
+.dx-device-tablet,
+.dx-device-phone {
+  .dx-dateview-rollers {
+    @include flex-container(row, nowrap);
+  }
+
+  .dx-dateviewroller-month {
+    min-width: $fluent-dateview-phone-roller-month-min-width;
+  }
+
+  .dx-dateview-item {
+    font-size: $fluent-dateview-phone-item-font-size;
+  }
+
+  .dx-dateview-item-selected {
+    font-size: $fluent-dateview-phone-item-selected-font-size;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_sizes.scss
new file mode 100644
index 000000000000..7611ba1506ba
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dateView/_sizes.scss
@@ -0,0 +1,18 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-dateview-roller-height: 182px !default; // dx-offscale: 182px
+$fluent-dateview-roller-item-height: ds.$spacing-400 !default;
+
+// Values hoisted from style-file literals (tokenized)
+$fluent-dateview-roller-min-width: 4em !default; // dx-relative: scales with the parent font-size
+$fluent-dateview-roller-year-min-width: 4.85em !default; // dx-relative: scales with the parent font-size
+$fluent-dateview-roller-month-min-width: 12em !default; // dx-relative: scales with the parent font-size
+$fluent-dateview-hours-colon-font-size: 2.2em !default; // dx-relative: scales with the parent font-size
+$fluent-dateview-item-font-size: 1.3em !default; // dx-relative: scales with the parent font-size
+$fluent-dateview-item-selected-font-size: 1.8em !default; // dx-relative: scales with the parent font-size
+$fluent-dateview-phone-roller-month-min-width: 4em !default; // dx-relative: scales with the parent font-size
+$fluent-dateview-phone-item-font-size: 1.1em !default; // dx-relative: scales with the parent font-size
+$fluent-dateview-phone-item-selected-font-size: 1.4em !default; // dx-relative: scales with the parent font-size
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_colors.scss
new file mode 100644
index 000000000000..e24d3990b0e7
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_colors.scss
@@ -0,0 +1,46 @@
+@use "../colors" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$diagram-border-color: ds.$color-border-neutral-default-rest !default;
+$diagram-toolbar-border-color: ds.$color-border-neutral-default-rest !default;
+$diagram-normal-format-active-bg: ds.$button-outline-color-bg-active !default;
+$diagram-default-format-active-bg: ds.$button-contained-color-bg-active !default;
+$diagram-danger-format-active-bg: ds.$color-surface-danger-default-active !default;
+$diagram-success-format-active-bg: ds.$color-surface-success-default-active !default;
+$diagram-image-icon-base-color: ds.$color-content-neutral-subdued-rest !default;
+$diagram-image-icon-accent-color: ds.$color-content-primary-default-rest !default;
+$diagram-toolbox-shape-text-opacity: null !default;
+
+@if $mode == "light" {
+  $diagram-toolbox-shape-text-opacity: 0.25 !default;
+}
+
+@if $mode == "dark" {
+  $diagram-toolbox-shape-text-opacity: 0.5 !default;
+}
+
+// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
+$diagram-bg: ds.$color-surface-neutral-default-rest !default;
+$diagram-danger: ds.$color-content-danger-default-rest !default;
+
+/*
+ * SVG data-uri icons are colored by baking the value into a background-image data-uri at build
+ * time (string replace of `currentColor`). CSS var() tokens do NOT resolve inside such a data-uri
+ * (they render black), so the icon colors below must stay concrete $base-* values. See DIVERGENCES.
+ */
+$diagram-text-color: $base-text-color !default;
+$diagram-properties-panel-icon-color: $base-inverted-text-color !default;
+
+// Canvas = deeper neutral surface
+$diagram-canvas-bg: ds.$color-surface-neutral-subdued-rest !default;
+$diagram-shadow: 0 1px 8px ds.$color-shadow-key !default;
+
+// Values hoisted from style-file literals (tokenized)
+$diagram-selection-mark-color: ds.$color-border-neutral-accessible-rest !default;
+$diagram-selection-fill-color: rgb(from #{ds.$color-border-neutral-accessible-rest} r g b / 0.02) !default;
+$diagram-image-icon-muted-opacity: ds.$opacity-50 !default;
+
+// Base-layer values injected with design tokens (wave B1)
+$diagram-popup-title-toolbar-bg-color: ds.$color-surface-neutral-alpha-hovered !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_index.scss
new file mode 100644
index 000000000000..a356ff2741f8
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_index.scss
@@ -0,0 +1,489 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/diagram" with (
+  $diagram-root-height: $fluent-diagram-root-height,
+  $diagram-root-min-height: $fluent-diagram-root-min-height,
+  $diagram-toolbar-wrapper-padding: $fluent-diagram-toolbar-wrapper-padding,
+  $diagram-button-min-height: $fluent-diagram-button-min-height,
+  $diagram-popup-content-padding: $fluent-diagram-popup-content-padding,
+  $diagram-colorview-palette-min-width: $fluent-diagram-colorview-palette-min-width,
+  $diagram-colorview-hue-scale-cell-margin-left: $fluent-diagram-colorview-hue-scale-cell-margin-left,
+  $diagram-loading-indicator-width: $fluent-diagram-loading-indicator-width,
+  $diagram-loading-indicator-height: $fluent-diagram-loading-indicator-height,
+  $diagram-context-toolbox-target-width: $fluent-diagram-context-toolbox-target-width,
+  $diagram-context-toolbox-target-height: $fluent-diagram-context-toolbox-target-height,
+  $diagram-popup-title-toolbar-bg: $diagram-popup-title-toolbar-bg-color,
+);
+@use "../../base/diagram/mixins" as *;
+@use "../button/colors" as *;
+@use "../overlay/colors" as *;
+@use "../accordion/colors" as *;
+@use "../popup/colors" as *;
+@use "../speedDialAction/sizes" as *;
+@use "../fieldset/sizes" as *;
+@use "../fieldset/sizes" as *;
+@use "../menu/colors" as *;
+
+// adduse
+
+$fluent-diagram-toolbar-icon-size: $fluent-base-icon-size;
+
+
+.dx-diagram {
+  border-color: $diagram-border-color;
+
+  // stylelint-disable selector-class-pattern
+  .dxdi-control .dxdi-canvas {
+    background-color: $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: $button-default-bg;
+    }
+
+    .connector-side-mark,
+    .extension-line text {
+      fill: $button-default-bg;
+    }
+
+    .container-target,
+    .connection-target,
+    .connection-mark:not(.selector),
+    .connection-point:not(.selector) {
+      stroke: $button-success-bg;
+    }
+
+    .connection-mark:not(.selector),
+    .connection-point:not(.selector) {
+      &.active {
+        fill: $button-success-bg;
+      }
+    }
+
+    .geometry-mark {
+      stroke: $button-danger-bg;
+    }
+
+    .dxdi-main .dxdi-image {
+      .dxdi-spinner {
+        path {
+          stroke: $diagram-image-icon-accent-color;
+          stroke-opacity: 1;
+        }
+
+        ellipse {
+          stroke: $diagram-image-icon-base-color;
+          stroke-opacity: $diagram-image-icon-muted-opacity;
+        }
+      }
+
+      .dxdi-user .dxdi-background {
+        fill: $diagram-image-icon-base-color;
+        opacity: $diagram-image-icon-muted-opacity;
+      }
+
+      .dxdi-warning {
+        ellipse {
+          fill: $diagram-danger;
+        }
+      }
+    }
+  }
+
+  .dxdi-control:not(.focused) .dxdi-canvas {
+    .selection-mark,
+    .geometry-mark {
+      stroke: $diagram-selection-mark-color;
+    }
+
+    .item-selection-rect,
+    .items-selection-rect {
+      fill: transparent;
+      stroke: $diagram-selection-mark-color;
+    }
+
+    .items-selection-rect {
+      fill: $diagram-selection-fill-color;
+    }
+
+    .item-multi-selection-rect {
+      fill: $diagram-selection-fill-color;
+      stroke: $diagram-selection-mark-color;
+    }
+
+    .connector-selection,
+    .connector-multi-selection {
+      stroke: $diagram-selection-mark-color;
+    }
+
+    .connector-point-mark,
+    .connector-side-mark {
+      stroke: $diagram-selection-mark-color;
+    }
+
+    .connector-side-mark {
+      fill: $diagram-selection-mark-color;
+    }
+  }
+
+  .dxdi-text-input-container.connector-text .dxdi-text-input {
+    border-color: $button-default-bg;
+  }
+
+  // stylelint-enable selector-class-pattern
+
+  .dx-diagram-toolbar-wrapper {
+    border-bottom: $diagram-toolbar-wrapper-border-bottom;
+    border-bottom-color: $diagram-toolbar-border-color;
+  }
+
+
+  &.dx-diagram-fullscreen {
+    background-color: $diagram-bg;
+  }
+}
+
+.dx-diagram-toolbox-panel,
+.dx-diagram-properties-panel {
+  background: $overlay-content-bg;
+}
+
+.dx-diagram-floating-toolbar-container {
+  background: $overlay-content-bg;
+  box-shadow: $diagram-shadow;
+  border-radius: $popup-border-radius;
+  padding: $diagram-floating-toolbar-container-padding;
+
+  .dx-toolbar .dx-toolbar-items-container {
+    height: $diagram-floating-toolbar-items-height;
+
+    .dx-texteditor {
+      .dx-texteditor-input,
+      .dx-placeholder::before {
+        color: inherit;
+        padding: $diagram-floating-toolbar-editor-padding;
+      }
+
+      .dx-button {
+        width: auto;
+        height: auto;
+        min-width: $diagram-button-min-width;
+        min-height: $diagram-button-min-height;
+        margin: $diagram-button-margin;
+
+        .dx-button-content {
+          padding: $diagram-floating-toolbar-editor-button-padding;
+        }
+      }
+    }
+  }
+
+  &.dx-diagram-properties-panel-toolbar-container {
+    &,
+    .dx-toolbar,
+    .dx-toolbar-items-container,
+    .dx-toolbar-item,
+    .dx-button {
+      width: $fluent-main-fa-button-size;
+      height: $fluent-main-fa-button-size;
+
+      .dx-button-content {
+        padding-top: 0;
+        padding-bottom: 0;
+        line-height: $fluent-main-fa-button-size;
+      }
+    }
+  }
+
+  .dx-toolbar-item {
+    padding: $diagram-item-padding;
+  }
+}
+
+.dx-diagram-toolbox-popup {
+  & > .dx-overlay-content {
+    box-shadow: $diagram-shadow;
+  }
+
+  .dx-popup-title {
+    margin-bottom: 0;
+
+    &.dx-toolbar {
+      font-size: $diagram-popup-title-toolbar-font-size;
+      min-height: $diagram-toolbox-title-size;
+
+      .dx-toolbar-items-container {
+        height: $diagram-toolbox-title-size;
+      }
+    }
+
+    .dx-button.dx-button-has-icon:not(.dx-button-has-text),
+    .dx-button-content {
+      width: $diagram-toolbox-title-size;
+      height: $diagram-toolbox-title-size;
+    }
+  }
+
+  .dx-popup-content {
+    .dx-diagram-toolbox-input-container,
+    .dx-diagram-toolbox-panel,
+    .dx-diagram-toolbox-panel .dx-accordion {
+      width: $diagram-toolbox-width;
+    }
+  }
+
+  .dx-diagram-toolbox-input-container {
+    border-bottom: $diagram-toolbox-input-container-border-bottom;
+  }
+
+  .dx-diagram-toolbox-input {
+    margin: $diagram-toolbox-input-margin;
+
+    &.dx-editor-outlined {
+      &:not(.dx-state-focused) {
+        box-shadow: none;
+      }
+
+      .dx-texteditor-buttons-container:last-child > .dx-button:last-child {
+        margin-right: 0;
+      }
+    }
+
+    .dx-button {
+      .dx-button-content {
+        padding: $diagram-toolbox-input-image-padding;
+      }
+
+      .dx-icon {
+        font-size: $diagram-toolbox-input-image-size;
+      }
+    }
+  }
+
+  .dx-popup-title .dx-closebutton {
+    width: $diagram-toolbox-title-size;
+    height: $diagram-toolbox-title-size;
+    margin: $diagram-closebutton-margin;
+  }
+
+  .dx-popup-title .dx-closebutton .dx-icon {
+    width: $diagram-icon-width;
+    height: $diagram-icon-height;
+    padding: $diagram-icon-padding;
+    font-size: $diagram-popup-close-icon-font-size;
+    line-height: $diagram-popup-close-icon-line-height;
+    background-position: 2px 2px;
+    background-size: 12px 12px;
+  }
+
+  &.dx-diagram-mobile-popup {
+    .dx-popup-content {
+      padding-top: $diagram-toolbox-mobile-padding;
+
+      .dx-diagram-toolbox-input-container {
+        border-top: $diagram-toolbox-input-container-border-top;
+      }
+    }
+  }
+}
+
+.dx-diagram-toolbox-panel {
+  .dx-accordion {
+    margin: 0;
+
+    .dx-accordion-item {
+      border-left: none;
+      border-right: none;
+      border-bottom: $diagram-accordion-item-border-bottom;
+      border-top: none;
+      box-shadow: none;
+    }
+
+    .dx-accordion-item-opened {
+      margin: 0;
+    }
+
+    .dx-item-content.dx-accordion-item-title {
+      min-height: $diagram-accordion-item-title-min-height;
+    }
+
+    .dx-item-content.dx-accordion-item-body {
+      padding: $diagram-toolbox-accordion-v-padding $diagram-toolbox-h-padding;
+    }
+  }
+
+  .dxdi-toolbox .dxdi-canvas .dxdi-shape-text { // stylelint-disable-line selector-class-pattern
+    opacity: $diagram-toolbox-shape-text-opacity;
+  }
+}
+
+.dx-diagram-properties-popup {
+  .dx-multiview-item,
+  &.dx-diagram-properties-popup-notabs .dx-popup-content {
+    padding: $diagram-properties-panel-padding;
+  }
+
+  .dx-diagram-properties-panel-group-title {
+    text-transform: uppercase;
+    padding: $diagram-properties-panel-spacing;
+  }
+
+  .dx-diagram-properties-panel-group-toolbar {
+    padding: 0 $diagram-properties-panel-spacing $diagram-properties-panel-spacing;
+
+    .dx-toolbar-item {
+      margin-bottom: calc((#{$diagram-properties-panel-spacing}) / 2);
+
+      .dx-button {
+        height: auto;
+      }
+
+      &.dx-diagram-lg-icon-item .dx-diagram-i {
+        background-size: $diagram-properties-layout-icon-size $diagram-properties-layout-icon-size;
+        width: $diagram-properties-layout-icon-size;
+        height: $diagram-properties-layout-icon-size;
+      }
+    }
+  }
+
+  .dx-diagram-properties-panel-group-toolbar:first-child {
+    padding-top: $diagram-properties-panel-spacing;
+  }
+
+  &.dx-diagram-mobile-popup {
+    .dx-popup-title {
+      padding: $diagram-title-padding;
+    }
+
+    .dx-tabpanel {
+      .dx-tab-selected::before {
+        top: 0;
+        bottom: initial;
+      }
+    }
+  }
+}
+
+.dx-diagram-toolbar {
+  .dx-format-active:not(.dx-color-format):not(.dx-background-format) {
+    background-color: $diagram-normal-format-active-bg;
+
+    &.dx-button-success {
+      background-color: $diagram-success-format-active-bg;
+    }
+
+    &.dx-button-default {
+      background-color: $diagram-default-format-active-bg;
+    }
+
+    &.dx-button-danger {
+      background-color: $diagram-danger-format-active-bg;
+    }
+  }
+
+  .dx-texteditor.dx-editor-filled,
+  .dx-dropdowneditor.dx-editor-filled {
+    background-color: transparent;
+
+    &::after {
+      border-bottom-color: transparent;
+    }
+  }
+
+  .dx-diagram-toolbar-separator {
+    height: 50%;
+    border-left-color: $diagram-toolbar-border-color;
+  }
+
+  .dx-diagram-toolbar-menu-separator {
+    border-top-color: $diagram-toolbar-border-color;
+  }
+
+  .dx-diagram-toolbar-text {
+    padding: $fluent-field-value-top-padding 0 $fluent-field-value-bottom-padding $fluent-field-labelvalue-spacing;
+  }
+
+  .dx-diagram-lg-edit-item .dx-texteditor {
+    width: $diagram-large-editor-width;
+  }
+
+  .dx-diagram-md-edit-item .dx-texteditor {
+    width: $diagram-medium-editor-width;
+  }
+
+  .dx-diagram-sm-edit-item .dx-texteditor {
+    width: $diagram-small-editor-width;
+  }
+
+  .dx-diagram-color-edit-item .dx-dropdowneditor-field-before-template-wrapper {
+    .dx-diagram-i,
+    .dx-icon {
+      border-bottom-width: $diagram-toolbar-colorbutton-border-width;
+      border-bottom-style: solid;
+    }
+  }
+}
+
+.dx-diagram-toolbar,
+.dx-dropdownmenu-popup {
+  .dx-diagram-image-dropdown-item,
+  .dx-diagram-color-edit-item {
+    .dx-dropdowneditor-field-before-template-wrapper {
+      .dx-diagram-i,
+      .dx-icon {
+        margin-left: $diagram-icon-margin-left;
+        margin-right: $diagram-icon-margin-right;
+      }
+
+      .dx-icon {
+        font-size: $fluent-diagram-toolbar-icon-size;
+        color: $diagram-text-color;
+      }
+    }
+  }
+}
+
+.dx-diagram-contextmenu.dx-context-menu {
+  .dx-menu-item .dx-menu-item-content .dx-menu-item-popout-container {
+    right: 0;
+  }
+
+  .dx-menu-no-icons > .dx-menu-item-wrapper > .dx-menu-item > .dx-menu-item-content .dx-menu-item-text {
+    padding-left: $diagram-item-text-padding-left;
+  }
+}
+
+.dx-diagram-touchbar {
+  .dx-menu-item .dx-menu-item-content {
+    padding: $diagram-touchbar-item-padding;
+  }
+
+  .dx-menu-separator {
+    width: $diagram-separator-width;
+    height: calc(#{$fluent-diagram-toolbar-icon-size} + #{$diagram-touchbar-item-padding} + #{$diagram-touchbar-item-padding} + 2px);
+    margin: 0;
+  }
+}
+
+@include diagram-action-icons-mixin($diagram-text-color, $diagram-text-color, $fluent-diagram-toolbar-icon-size, $diagram-toolbar-colorbutton-border-width);
+
+.dx-diagram-toolbox-popup .dx-button-has-icon .dx-icon.dx-icon-diagram-toolbox-drag {
+  @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/toolbox-drag.svg'), $diagram-text-color, $diagram-toolbox-title-size, $diagram-toolbox-title-size);
+
+  line-height: $diagram-toolbox-title-size;
+  background-size: $diagram-toolbox-title-size $diagram-toolbox-title-size;
+}
+
+.dx-diagram-i-button-properties-panel-open {
+  @include diagram-icon-colored(data-uri('image/svg+xml;charset=UTF-8', 'images/widgets/common/diagram/properties-panel-open.svg'), $diagram-properties-panel-icon-color, $fluent-diagram-toolbar-icon-size, $fluent-diagram-toolbar-icon-size);
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_sizes.scss
new file mode 100644
index 000000000000..52651313443b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/diagram/_sizes.scss
@@ -0,0 +1,114 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$diagram-toolbox-width: null !default;
+$diagram-toolbox-h-padding: null !default;
+$diagram-toolbox-accordion-v-padding: null !default;
+$diagram-toolbox-input-h-padding: null !default;
+$diagram-toolbox-input-v-padding: null !default;
+$diagram-toolbox-input-image-size: null !default;
+$diagram-toolbox-input-image-padding: null !default;
+$diagram-toolbox-mobile-padding: null !default;
+$diagram-properties-panel-padding: null !default;
+$diagram-properties-panel-spacing: null !default;
+$diagram-properties-layout-icon-size: null !default;
+$diagram-touchbar-item-padding: null !default;
+$diagram-floating-toolbar-items-height: null !default;
+$diagram-floating-toolbar-editor-padding: null !default;
+$diagram-floating-toolbar-editor-button-padding: null !default;
+$diagram-small-editor-width: null !default;
+$diagram-medium-editor-width: null !default;
+$diagram-large-editor-width: null !default;
+
+$diagram-toolbox-input-margin: ds.$spacing-20 !default;
+
+@if $size == "default" {
+  $diagram-toolbox-width: 156px !default; // dx-offscale: 156px
+  $diagram-toolbox-h-padding: ds.$spacing-120 !default;
+  $diagram-toolbox-accordion-v-padding: ds.$spacing-80 !default;
+  $diagram-toolbox-input-h-padding: ds.$spacing-90 !default;
+  $diagram-toolbox-input-v-padding: ds.$spacing-120 !default;
+  $diagram-toolbox-input-image-size: ds.$spacing-180 !default;
+  $diagram-toolbox-input-image-padding: ds.$spacing-60 ds.$spacing-40 !default;
+  $diagram-toolbox-mobile-padding: 68px !default; // dx-offscale: 68px
+
+  $diagram-properties-panel-padding: 0 !default;
+  $diagram-properties-panel-spacing: ds.$spacing-160 !default;
+  $diagram-properties-layout-icon-size: ds.$spacing-640 !default;
+
+  $diagram-touchbar-item-padding: ds.$spacing-100 !default;
+
+  $diagram-floating-toolbar-items-height: ds.$spacing-360 !default;
+  $diagram-floating-toolbar-editor-padding: ds.$spacing-80 ds.$spacing-60 !default;
+  $diagram-floating-toolbar-editor-button-padding: ds.$spacing-40 !default;
+
+  $diagram-small-editor-width: ds.$spacing-1000 !default;
+  $diagram-medium-editor-width: 180px !default; // dx-offscale: 180px
+  $diagram-large-editor-width: 280px !default; // dx-offscale: 280px
+}
+
+@else if $size == "compact" {
+  $diagram-toolbox-width: 130px !default; // dx-offscale: 130px
+  $diagram-toolbox-h-padding: ds.$spacing-100 !default;
+  $diagram-toolbox-accordion-v-padding: ds.$spacing-60 !default;
+  $diagram-toolbox-input-h-padding: ds.$spacing-80 !default;
+  $diagram-toolbox-input-v-padding: ds.$spacing-80 !default;
+  $diagram-toolbox-input-image-size: ds.$spacing-140 !default;
+  $diagram-toolbox-input-image-padding: ds.$spacing-30 ds.$spacing-40 !default;
+  $diagram-toolbox-mobile-padding: 58px !default; // dx-offscale: 58px
+
+  $diagram-properties-panel-padding: ds.$spacing-60 !default;
+  $diagram-properties-panel-spacing: ds.$spacing-80 !default;
+  $diagram-properties-layout-icon-size: ds.$spacing-480 !default;
+
+  $diagram-touchbar-item-padding: ds.$spacing-70 !default;
+
+  $diagram-floating-toolbar-items-height: ds.$spacing-280 !default;
+  $diagram-floating-toolbar-editor-padding: ds.$spacing-60 ds.$spacing-40 !default;
+  $diagram-floating-toolbar-editor-button-padding: ds.$spacing-20 !default;
+
+  $diagram-small-editor-width: ds.$spacing-800 !default;
+  $diagram-medium-editor-width: ds.$spacing-1200 !default;
+  $diagram-large-editor-width: 220px !default; // dx-offscale: 220px
+}
+
+// Values hoisted from style-file literals (tokenized)
+$diagram-popup-close-icon-font-size: ds.$font-size-120 !default; // dx-icon-glyph-size: text roles not applicable
+$diagram-popup-close-icon-line-height: ds.$line-height-120 !default; // dx-icon-glyph-size: text roles not applicable
+$diagram-toolbar-colorbutton-border-width: ds.$border-width-30 !default;
+$diagram-floating-toolbar-container-padding: ds.$spacing-40 !default;
+$diagram-button-margin: ds.$spacing-20 !default;
+$diagram-item-padding: 0 ds.$spacing-40 0 0 !default;
+$diagram-closebutton-margin: ds.$spacing-10 0 0 !default;
+$diagram-icon-width: ds.$spacing-140 !default;
+$diagram-icon-height: ds.$spacing-140 !default;
+$diagram-icon-padding: ds.$spacing-20 !default;
+$diagram-title-padding: ds.$spacing-80 ds.$spacing-80 0 0 !default;
+$diagram-icon-margin-left: ds.$spacing-120 !default;
+$diagram-icon-margin-right: ds.$spacing-120 !default;
+$diagram-item-text-padding-left: ds.$spacing-40 !default;
+$diagram-separator-width: ds.$spacing-10 !default;
+$diagram-toolbar-wrapper-border-bottom: ds.$border-width-10 solid !default;
+$diagram-toolbox-input-container-border-bottom: ds.$border-width-10 solid transparent !default;
+$diagram-toolbox-input-container-border-top: ds.$border-width-10 solid transparent !default;
+$diagram-accordion-item-border-bottom: ds.$border-width-10 solid transparent !default;
+$diagram-toolbox-title-size: ds.$spacing-180 !default;
+$diagram-button-min-width: ds.$spacing-240 !default;
+$diagram-button-min-height: ds.$spacing-240 !default;
+$diagram-accordion-item-title-min-height: ds.$spacing-320 !default;
+$diagram-popup-title-toolbar-font-size: 0.8em !default; // dx-relative: scales with the parent font-size
+
+// Base-layer sizing injected with design tokens (wave B2)
+$fluent-diagram-root-height: 600px !default; // dx-offscale: 600px
+$fluent-diagram-root-min-height: 350px !default; // dx-offscale: 350px
+$fluent-diagram-toolbar-wrapper-padding: ds.$spacing-50 !default;
+$fluent-diagram-button-min-height: ds.$spacing-140 !default;
+$fluent-diagram-popup-content-padding: ds.$spacing-80 !default;
+$fluent-diagram-colorview-palette-min-width: 300px !default; // dx-offscale: 300px
+$fluent-diagram-colorview-hue-scale-cell-margin-left: ds.$spacing-120 !default;
+$fluent-diagram-loading-indicator-width: ds.$spacing-640 !default;
+$fluent-diagram-loading-indicator-height: ds.$spacing-640 !default;
+$fluent-diagram-context-toolbox-target-width: ds.$spacing-10 !default;
+$fluent-diagram-context-toolbox-target-height: ds.$spacing-10 !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_colors.scss
new file mode 100644
index 000000000000..fe19076f191b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_colors.scss
@@ -0,0 +1,9 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+/**
+* $name 10. Shader background color
+* $type color
+*/
+$drawer-shader-background-color: ds.$color-surface-backdrop-default-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_index.scss
new file mode 100644
index 000000000000..a1455d573384
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_index.scss
@@ -0,0 +1,10 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/drawer";
+
+// adduse
+.dx-drawer-shader {
+  background-color: $drawer-shader-background-color;
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_sizes.scss
new file mode 100644
index 000000000000..43b104010f9e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/drawer/_sizes.scss
@@ -0,0 +1,4 @@
+@use "../sizes" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_colors.scss
new file mode 100644
index 000000000000..89c53a85429e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_colors.scss
@@ -0,0 +1,6 @@
+@use "sass:color";
+@use "../sizes" as *;
+@use "../colors" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_index.scss
new file mode 100644
index 000000000000..adb7bf344e97
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_index.scss
@@ -0,0 +1,7 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+
+// adduse
+@use "../dropDownEditor";
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_sizes.scss
new file mode 100644
index 000000000000..43b104010f9e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownBox/_sizes.scss
@@ -0,0 +1,4 @@
+@use "../sizes" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_colors.scss
new file mode 100644
index 000000000000..89c53a85429e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_colors.scss
@@ -0,0 +1,6 @@
+@use "sass:color";
+@use "../sizes" as *;
+@use "../colors" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_index.scss
new file mode 100644
index 000000000000..0393a1fb50e8
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_index.scss
@@ -0,0 +1,45 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../button/mixins" as *;
+@use "../button/sizes" as *;
+@use "../button/colors" as *;
+@use "../common/mixins" as *;
+@use "../../base/dropDownButton";
+@use "../../base/dropDownButton/mixins" as *;
+
+// adduse
+
+@include dx-dropdownbutton(
+  $fluent-dropdownbutton-icon-spindown-size,
+  $fluent-dropdownbutton-action-horizontal-padding,
+);
+
+.dx-dropdownbutton-popup-wrapper {
+  @include dx-dropdownlist-list-appearance();
+}
+
+.dx-dropdownbutton {
+  &:not(.dx-dropdownbutton-has-arrow) {
+    .dx-button-has-icon:not(.dx-button-has-text) {
+      @include dx-button-onlyicon-sizing();
+    }
+  }
+
+  &.dx-state-disabled {
+    opacity: 1;
+  }
+}
+
+.dx-dropdownbutton-action {
+  &.dx-button-has-icon,
+  &.dx-button-has-text {
+    .dx-icon-spindown.dx-icon-right {
+      width: $fluent-dropdownbutton-icon-spindown-right-size;
+      height: $fluent-dropdownbutton-icon-spindown-right-size;
+    }
+  }
+}
+
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_sizes.scss
new file mode 100644
index 000000000000..f126691f1584
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownButton/_sizes.scss
@@ -0,0 +1,20 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-dropdownbutton-action-horizontal-padding: null !default;
+$fluent-dropdownbutton-icon-spindown-size: null !default;
+$fluent-dropdownbutton-icon-spindown-right-size: null !default;
+
+@if $size == "default" {
+  $fluent-dropdownbutton-action-horizontal-padding: ds.$spacing-120 !default;
+  $fluent-dropdownbutton-icon-spindown-size: ds.$spacing-240;
+  $fluent-dropdownbutton-icon-spindown-right-size: ds.$spacing-160 !default;
+}
+
+@else if $size == "compact" {
+  $fluent-dropdownbutton-action-horizontal-padding: ds.$spacing-80 !default;
+  $fluent-dropdownbutton-icon-spindown-size: ds.$spacing-180;
+  $fluent-dropdownbutton-icon-spindown-right-size: ds.$spacing-120 !default;
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_colors.scss
new file mode 100644
index 000000000000..763f4558d965
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_colors.scss
@@ -0,0 +1,14 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$dropdowneditor-icon-color: ds.$color-content-neutral-subdued-rest !default;
+
+/**
+* $name 90. Active arrow icon color
+* $type color
+*/
+$dropdowneditor-icon-active-color: ds.$color-content-neutral-subdued-rest !default;
+
+// Base-layer values injected with design tokens (wave B1)
+$fluent-dropdowneditor-icon-idle-opacity: ds.$opacity-35 !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_index.scss
new file mode 100644
index 000000000000..589ac8ced938
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_index.scss
@@ -0,0 +1,133 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../common/sizes" as *;
+@use "../textEditor/sizes" as *;
+@use "../button/colors" as *;
+@use "../../base/icon_fonts" as *;
+@use "../../base/dropDownEditor" with (
+  $dropdowneditor-icon-idle-opacity: $fluent-dropdowneditor-icon-idle-opacity,
+);
+@use "../../base/dropDownEditor/mixins" as *;
+
+// adduse
+
+
+$fluent-dropdowneditor-container-button-size: $fluent-base-icon-size;
+
+$fluent-dropdowneditor-invalid-badge-offset: calc(#{$fluent-dropdowneditor-container-button-size} + #{$fluent-invalid-badge-halfhorizontal-padding});
+
+$fluent-dropdowneditor-invalid-badge-with-clear-offset: calc(#{$fluent-dropdowneditor-container-button-size} * 2 + #{$fluent-invalid-badge-halfhorizontal-padding});
+
+$fluent-dropdowneditor-invalid-badge-size: calc(#{$fluent-invalid-badge-size} + #{$fluent-invalid-badge-horizontal-padding});
+
+@mixin dx-dropdowneditor-button-icon() {
+  width: $fluent-dropdowneditor-container-button-size;
+  height: 100%;
+
+  @include dx-icon-font-centered-sizing($fluent-dropdowneditor-container-button-size);
+}
+
+.dx-dropdowneditor-button {
+  width: $fluent-dropdowneditor-container-button-size;
+  min-width: $fluent-dropdowneditor-container-button-size;
+
+  .dx-state-readonly & {
+    .dx-dropdowneditor-icon {
+      opacity: 1;
+    }
+  }
+}
+
+.dx-dropdowneditor-icon {
+  color: $dropdowneditor-icon-color;
+
+  @include dx-icon(spindown);
+  @include dx-dropdowneditor-button-icon();
+}
+
+.dx-dropdowneditor-input-wrapper {
+  .dx-texteditor {
+    &::before,
+    &::after {
+      content: none;
+    }
+
+    &.dx-state-hover,
+    &.dx-state-focused,
+    &.dx-state-active &.dx-state-disabled,
+    &.dx-state-readonly,
+    &.dx-state-readonly.dx-state-hover,
+    & {
+      background-color: transparent;
+      box-shadow: none;
+
+      &.dx-texteditor-with-floating-label,
+      &.dx-texteditor-with-label {
+        .dx-texteditor-label {
+          .dx-label-before,
+          .dx-label,
+          .dx-label-after {
+            background-color: transparent;
+            box-shadow: none;
+          }
+        }
+      }
+    }
+  }
+}
+
+.dx-invalid,
+.dx-valid,
+.dx-validation-pending {
+  @include invalid-dropdowneditor-input-padding(
+    $fluent-dropdowneditor-invalid-badge-size,
+    $fluent-base-standard-texteditor-input-horizontal-padding,
+    $fluent-filled-texteditor-input-horizontal-padding
+  );
+}
+
+.dx-dropdowneditor.dx-dropdowneditor-active,
+.dx-dropdowneditor-button.dx-state-active {
+  .dx-dropdowneditor-icon {
+    color: $dropdowneditor-icon-active-color;
+    opacity: 1;
+
+    @include dx-icon(spinup);
+    @include dx-dropdowneditor-button-icon();
+  }
+}
+
+.dx-invalid.dx-dropdowneditor,
+.dx-valid.dx-dropdowneditor {
+  .dx-texteditor-buttons-container {
+    &::after {
+      inset-inline-end: $fluent-dropdowneditor-invalid-badge-offset;
+    }
+  }
+
+  &.dx-show-clear-button:not(.dx-texteditor-empty) {
+    .dx-texteditor-buttons-container {
+      &::after {
+        inset-inline-end: $fluent-dropdowneditor-invalid-badge-with-clear-offset;
+      }
+    }
+  }
+}
+
+.dx-dropdowneditor-overlay {
+  &.dx-popup-wrapper {
+    .dx-overlay-content {
+      box-shadow: $fluent-base-dropdown-widgets-shadow;
+      overflow: hidden;
+    }
+  }
+
+  .dx-list-group-header,
+  .dx-list-item-content,
+  .dx-list-select-all-label {
+    font-size: $fluent-dropdowneditor-list-font-size;
+    line-height: $fluent-dropdowneditor-list-line-height;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_sizes.scss
new file mode 100644
index 000000000000..56ee020daebb
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownEditor/_sizes.scss
@@ -0,0 +1,18 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-dropdowneditor-list-font-size: null !default;
+$fluent-dropdowneditor-list-line-height: null !default;
+
+
+@if $size == "default" {
+  $fluent-dropdowneditor-list-font-size: ds.$font-size-base-md !default;
+  $fluent-dropdowneditor-list-line-height: ds.$line-height-base-md !default;
+}
+
+@else if $size == "compact" {
+  $fluent-dropdowneditor-list-font-size: ds.$spacing-130 !default;
+  $fluent-dropdowneditor-list-line-height: ds.$line-height-base-sm !default;
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_colors.scss
new file mode 100644
index 000000000000..89c53a85429e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_colors.scss
@@ -0,0 +1,6 @@
+@use "sass:color";
+@use "../sizes" as *;
+@use "../colors" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_index.scss
new file mode 100644
index 000000000000..9355f4aa98e9
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_index.scss
@@ -0,0 +1,14 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../common/mixins" as *;
+@use "../../base/dropDownList";
+
+// adduse
+@use "../dropDownEditor";
+
+
+.dx-dropdownlist-popup-wrapper {
+  @include dx-dropdownlist-list-appearance();
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_sizes.scss
new file mode 100644
index 000000000000..43b104010f9e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownList/_sizes.scss
@@ -0,0 +1,4 @@
+@use "../sizes" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_colors.scss
new file mode 100644
index 000000000000..89c53a85429e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_colors.scss
@@ -0,0 +1,6 @@
+@use "sass:color";
+@use "../sizes" as *;
+@use "../colors" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_index.scss
new file mode 100644
index 000000000000..b762c89e5c5e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_index.scss
@@ -0,0 +1,20 @@
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../common/mixins" as *;
+@use "../common/sizes" as *;
+@use "../../base/dropDownMenu";
+
+// adduse
+
+.dx-dropdownmenu-popup-wrapper {
+  .dx-toolbar-menu-section {
+    display: flex;
+    flex-direction: column;
+    row-gap: $fluent-dropdownmenu-section-row-gap;
+    margin-inline: $fluent-dropdownmenu-section-horizontal-margin;
+  }
+
+  .dx-overlay-content {
+    box-shadow: $fluent-base-dropdown-widgets-shadow;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_sizes.scss
new file mode 100644
index 000000000000..05cf7fe0b600
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/dropDownMenu/_sizes.scss
@@ -0,0 +1,7 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-dropdownmenu-section-horizontal-margin: ds.$spacing-40 !default;
+$fluent-dropdownmenu-section-row-gap: ds.$spacing-20 !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_colors.scss
new file mode 100644
index 000000000000..439e2b14c9af
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_colors.scss
@@ -0,0 +1,10 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+/**
+* $name 10. Label text color
+* $type color
+*/
+$fieldset-field-label-color: ds.$color-content-neutral-default-rest !default;
+$fieldset-field-value-invalid-color: ds.$color-border-danger-default-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_index.scss
new file mode 100644
index 000000000000..02224f4f66ae
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_index.scss
@@ -0,0 +1,144 @@
+@use "sass:math";
+@use "sass:color";
+@use "sass:selector";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../common/mixins" as *;
+@use "../typography/mixins" as *;
+@use "../form/sizes" as *;
+@use "../checkBox/sizes" as *;
+@use "../switch/sizes" as *;
+@use "../slider/sizes" as *;
+@use "../../base/fieldset";
+
+// adduse
+
+@mixin dx-fieldset-styling() {
+  .dx-field {
+    @include dx-base-typography();
+  }
+
+  .dx-field-label {
+    color: $fieldset-field-label-color;
+    font-size: $fluent-form-label-font-size;
+    cursor: default;
+
+    i {
+      font-style: normal;
+    }
+  }
+
+  .dx-field-value {
+    &.dx-attention {
+      color: $fieldset-field-value-invalid-color;
+      padding-left: $fluent-fieldset-attention-icon-offset;
+
+      &::before {
+        @include dx-invalid-fluent-badge();
+      }
+    }
+  }
+
+  .dx-field-value:not(.dx-switch):not(.dx-checkbox):not(.dx-button),
+  .dx-field-value-static {
+    width: 60%;
+  }
+}
+
+@mixin dx-field-value-widget-position($name, $size) {
+  &.#{$name},
+  &:not(.dx-widget) > .#{$name} {
+    margin: calc((#{$fluent-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: $fluent-field-labelvalue-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, $fluent-checkbox-icon-font-size);
+    @include dx-field-value-widget-position(dx-switch, $fluent-switch-height);
+    @include dx-field-value-widget-position(dx-slider, $fluent-slider-height);
+    @include dx-field-value-widget-position(dx-radiogroup, $fluent-radiogroup-min-height);
+
+    &.dx-attention {
+      padding: $fluent-field-value-top-padding $fluent-field-value-horizontal-padding $fluent-field-value-bottom-padding;
+      position: relative;
+      padding-left: $fluent-fieldset-attention-icon-offset;
+
+      &::before {
+        left: 0;
+      }
+    }
+  }
+
+  .dx-field-value-static {
+    padding: $fluent-field-value-top-padding $fluent-field-value-horizontal-padding $fluent-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(
+  $fluent-fieldset-vertical-margin,
+  $fluent-fieldset-horizontal-margin,
+  $fluent-fieldset-header-vertical-margin,
+  $fluent-field-vertical-margin
+);
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_sizes.scss
new file mode 100644
index 000000000000..ea7eee1f306f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fieldset/_sizes.scss
@@ -0,0 +1,34 @@
+@use "../sizes" as *;
+@use "../common/sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-fieldset-vertical-margin: null !default;
+$fluent-fieldset-horizontal-margin: null !default;
+$fluent-fieldset-header-vertical-margin: null !default;
+$fluent-field-vertical-margin: null !default;
+$fluent-field-labelvalue-spacing: null !default;
+
+@if $size == "default" {
+  $fluent-fieldset-vertical-margin: ds.$spacing-300 !default;
+  $fluent-fieldset-horizontal-margin: ds.$spacing-200 !default;
+  $fluent-fieldset-header-vertical-margin: ds.$spacing-200 !default;
+  $fluent-field-vertical-margin: ds.$spacing-300 !default;
+  $fluent-field-labelvalue-spacing: ds.$spacing-150 !default;
+}
+
+@else if $size == "compact" {
+  $fluent-fieldset-vertical-margin: ds.$spacing-200 !default;
+  $fluent-fieldset-horizontal-margin: ds.$spacing-160 !default;
+  $fluent-fieldset-header-vertical-margin: ds.$spacing-160 !default;
+  $fluent-field-vertical-margin: ds.$spacing-200 !default;
+  $fluent-field-labelvalue-spacing: ds.$spacing-120 !default;
+}
+
+$fluent-field-min-height: $fluent-base-inline-widget-height !default;
+$fluent-field-value-top-padding: ds.$spacing-210 !default;
+$fluent-field-value-horizontal-padding: $fluent-base-inline-horizontal-padding !default;
+$fluent-field-value-bottom-padding: ds.$spacing-200 !default;
+$fluent-fieldset-attention-icon-offset: calc(#{$fluent-base-inline-horizontal-padding} + #{$fluent-invalid-badge-size}) !default;
+$fluent-radiogroup-min-height: ds.$spacing-260 !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_colors.scss
new file mode 100644
index 000000000000..3abb03a90963
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_colors.scss
@@ -0,0 +1,37 @@
+@use "../colors" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$filemanager-border-color: ds.$color-border-neutral-default-rest !default;
+$filemanager-file-toolbar-bg: ds.$color-surface-neutral-subdued-rest !default;
+$filemanager-editor-active-bg: rgb(from #{ds.$color-content-neutral-default-rest} r g b / 0.1) !default;
+$filemanager-dirs-tree-item-focus-color: ds.$color-content-neutral-default-rest !default;
+$filemanager-breadcrumbs-item-focus-bg: ds.$color-surface-neutral-default-active !default;
+$filemanager-breadcrumbs-item-focus-color: ds.$color-content-neutral-default-rest !default;
+$filemanager-custom-thumbnail-color: ds.$color-content-neutral-default-disabled !default;
+$filemanager-file-item-select-color: ds.$color-content-neutral-default-inverted-rest !default;
+$filemanager-file-item-select-bg: rgb(from #{ds.$color-surface-primary-default-rest} r g b / 0.8) !default;
+$filemanager-file-item-select-focus-color: ds.$color-content-neutral-default-inverted-rest !default;
+$filemanager-file-item-select-focus-bg: rgb(from #{ds.$color-surface-primary-default-rest} r g b / 0.7) !default;
+$filemanager-file-item-hover-bg: ds.$color-surface-neutral-default-hovered !default;
+$filemanager-file-item-focused-border: ds.$color-border-primary-default-rest !default;
+$filemanager-item-focused-color: ds.$color-content-neutral-default-inverted-rest !default;
+$filemanager-dirs-tree-item-focus-bg: ds.$color-surface-neutral-default-active !default;
+
+/*
+ * The status icons (refresh/progress/done/error overlays) are SVG data-uri images: colors are
+ * baked into the background-image at build time (string replace). CSS var() tokens do NOT
+ * resolve inside a data-uri (they render black), so these stay concrete $base-* values.
+ * See DIVERGENCES.md.
+ */
+$filemanager-icon-color: $base-text-color !default;
+$filemanager-icon-success-color: $base-success !default;
+$filemanager-icon-danger-color: $base-danger !default;
+$filemanager-icon-inverted-color: $base-inverted-text-color !default;
+
+// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
+$filemanager-accent: ds.$color-border-primary-default-rest !default;
+$filemanager-bg: ds.$color-surface-neutral-default-rest !default;
+$filemanager-danger: ds.$color-surface-danger-default-rest !default;
+$filemanager-inverted-text-color: ds.$color-content-neutral-default-static-dark-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_index.scss
new file mode 100644
index 000000000000..f69adf44b0e4
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_index.scss
@@ -0,0 +1,318 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/fileManager" with (
+  $filemanager-root-height: $fluent-filemanager-root-height,
+  $filemanager-root-border: $fluent-filemanager-root-border,
+  $filemanager-overlay-content-min-width: $fluent-filemanager-overlay-content-min-width,
+  $filemanager-overlay-content-max-width: $fluent-filemanager-overlay-content-max-width,
+  $filemanager-popup-content-padding: $fluent-filemanager-popup-content-padding,
+  $filemanager-progress-box-padding: $fluent-filemanager-progress-box-padding,
+  $filemanager-notification-common-padding-bottom: $fluent-filemanager-notification-common-padding-bottom,
+  $filemanager-notification-common-border-bottom-width: $fluent-filemanager-notification-common-border-bottom-width,
+  $filemanager-progress-panel-border-left-width: $fluent-filemanager-progress-panel-border-left-width,
+  $filemanager-progress-panel-width: $fluent-filemanager-progress-panel-width,
+  $filemanager-progress-panel-container-padding: $fluent-filemanager-progress-panel-container-padding,
+  $filemanager-progress-panel-title-padding: $fluent-filemanager-progress-panel-title-padding,
+  $filemanager-progress-panel-separator-height: $fluent-filemanager-progress-panel-separator-height,
+  $filemanager-i-cancel-width: $fluent-filemanager-i-cancel-width,
+  $filemanager-i-cancel-height: $fluent-filemanager-i-cancel-height,
+  $filemanager-progress-box-margin-bottom: $fluent-filemanager-progress-box-margin-bottom,
+  $filemanager-progress-box-border-radius: $fluent-filemanager-progress-box-border-radius,
+  $filemanager-progress-box-padding-2: $fluent-filemanager-progress-box-padding-2,
+  $filemanager-progress-box-without-close-button-padding-right: $fluent-filemanager-progress-box-without-close-button-padding-right,
+  $filemanager-progress-box-image-margin-right: $fluent-filemanager-progress-box-image-margin-right,
+  $filemanager-progress-box-common-padding: $fluent-filemanager-progress-box-common-padding,
+  $filemanager-progress-box-close-button-margin-top: $fluent-filemanager-progress-box-close-button-margin-top,
+  $filemanager-progress-box-close-button-margin-left: $fluent-filemanager-progress-box-close-button-margin-left,
+  $filemanager-progress-box-error-padding: $fluent-filemanager-progress-box-error-padding,
+  $filemanager-progress-box-error-max-height: $fluent-filemanager-progress-box-error-max-height,
+  $filemanager-toolbar-separator-item-width: $fluent-filemanager-toolbar-separator-item-width,
+  $filemanager-toolbar-separator-item-margin-right: $fluent-filemanager-toolbar-separator-item-margin-right,
+  $filemanager-container-border-top: $fluent-filemanager-container-border-top,
+  $filemanager-dirs-panel-padding: $fluent-filemanager-dirs-panel-padding,
+  $filemanager-drawer-panel-content-initial-min-width: $fluent-filemanager-drawer-panel-content-initial-min-width,
+  $filemanager-drawer-panel-content-initial-max-width: $fluent-filemanager-drawer-panel-content-initial-max-width,
+  $filemanager-breadcrumbs-padding: $fluent-filemanager-breadcrumbs-padding,
+  $filemanager-breadcrumbs-border-bottom: $fluent-filemanager-breadcrumbs-border-bottom,
+  $filemanager-menu-item-content-padding-left: $fluent-filemanager-menu-item-content-padding-left,
+  $filemanager-menu-item-content-padding-right: $fluent-filemanager-menu-item-content-padding-right,
+  $filemanager-menu-item-content-margin: $fluent-filemanager-menu-item-content-margin,
+  $filemanager-menu-item-content-padding-left-2: $fluent-filemanager-menu-item-content-padding-left-2,
+  $filemanager-menu-item-content-padding-right-2: $fluent-filemanager-menu-item-content-padding-right-2,
+  $filemanager-thumbnails-view-port-padding: $fluent-filemanager-thumbnails-view-port-padding,
+  $filemanager-thumbnails-item-width: $fluent-filemanager-thumbnails-item-width,
+  $filemanager-thumbnails-item-height: $fluent-filemanager-thumbnails-item-height,
+  $filemanager-thumbnails-item-border: $fluent-filemanager-thumbnails-item-border,
+  $filemanager-thumbnails-item-margin: $fluent-filemanager-thumbnails-item-margin,
+  $filemanager-thumbnails-item-content-padding: $fluent-filemanager-thumbnails-item-content-padding,
+  $filemanager-thumbnails-item-spacer-height: $fluent-filemanager-thumbnails-item-spacer-height,
+  $filemanager-button-content-padding: $fluent-filemanager-viewmode-button-content-padding,
+  $filemanager-overlay-content-min-width-2: $fluent-filemanager-overlay-content-min-width-2,
+  $filemanager-overlay-content-min-height: $fluent-filemanager-overlay-content-min-height,
+  $filemanager-overlay-content-max-height: $fluent-filemanager-overlay-content-max-height,
+  $filemanager-overlay-content-max-width-2: $fluent-filemanager-overlay-content-max-width-2,
+  $filemanager-overlay-content-min-height-2: $fluent-filemanager-overlay-content-min-height-2,
+  $filemanager-overlay-content-max-height-2: $fluent-filemanager-overlay-content-max-height-2,
+  $filemanager-progressbox-cancel-button-margin-top: $fluent-filemanager-progressbox-cancel-button-margin-top,
+  $filemanager-progress-title-font-size: $fluent-filemanager-progress-title-font-size,
+  $filemanager-progress-title-font-weight: $fluent-filemanager-progress-title-font-weight,
+  $filemanager-progress-bold-font-weight: $fluent-filemanager-progress-bold-font-weight,
+);
+@use "../../base/fileManager/mixins" as *;
+
+// adduse
+@use "../splitterBar";
+
+
+.dx-filemanager {
+  border-color: $filemanager-border-color;
+
+  .dx-filemanager-notification-common {
+    border-color: $filemanager-border-color;
+    color: $filemanager-danger;
+  }
+
+  .dx-drawer-shrink .dx-filemanager-progress-panel {
+    border-left-color: $filemanager-border-color;
+  }
+
+  .dx-filemanager-progress-panel {
+    background-color: $filemanager-bg;
+
+    .dx-filemanager-progress-panel-title {
+      padding-top: $filemanager-progress-panel-title-padding;
+      padding-bottom: $filemanager-progress-panel-title-padding;
+    }
+  }
+
+  .dx-filemanager-progress-box-image {
+    width: calc(#{$fluent-base-icon-size} * 2);
+    height: calc(#{$fluent-base-icon-size} * 2);
+    font-size: calc(#{$fluent-base-icon-size} * 2);
+  }
+
+  .dx-filemanager-progress-box-error {
+    color: $filemanager-inverted-text-color;
+    background: $filemanager-danger;
+  }
+
+  .dx-filemanager-progress-box .dx-filemanager-progress-box-close-button {
+    margin-top: $filemanager-progress-box-button-close-margin-top;
+  }
+
+  .dx-filemanager-toolbar {
+    padding: $fluent-filemanager-toolbar-padding;
+    background: $filemanager-bg;
+    min-height: $filemanager-toolbar-height;
+
+    &.dx-filemanager-file-toolbar,
+    &.dx-filemanager-file-toolbar .dx-toolbar {
+      background: $filemanager-file-toolbar-bg;
+    }
+
+    .dx-filemanager-toolbar-separator-item {
+      height: $filemanager-toolbar-separator-height;
+      background: $filemanager-border-color;
+    }
+
+    .dx-filemanager-toolbar-viewmode-item .dx-texteditor {
+      width: $filemanager-toolbar-viewmode-width;
+    }
+
+    .dx-texteditor.dx-editor-filled {
+      background: transparent;
+
+      &.dx-state-hover,
+      &.dx-state-active,
+      &.dx-state-focused {
+        background: $filemanager-editor-active-bg;
+      }
+
+      &.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: $filemanager-toolbar-viewmode-padding;
+      padding-right: $filemanager-toolbar-viewmode-padding;
+    }
+  }
+
+  .dx-filemanager-fileuploader-dropzone-placeholder {
+    border: $fluent-filemanager-fileuploader-dropzone-placeholder-border;
+    border-color: $filemanager-accent;
+  }
+
+  .dx-filemanager-container {
+    border-top-color: $filemanager-border-color;
+  }
+
+  .dx-filemanager-dirs-panel {
+    border-right-color: $filemanager-border-color;
+  }
+
+  .dx-filemanager-breadcrumbs {
+    border-bottom-color: $filemanager-border-color;
+
+    .dx-menu-item {
+      &.dx-state-focused {
+        background: $filemanager-breadcrumbs-item-focus-bg;
+        color: $filemanager-breadcrumbs-item-focus-color;
+      }
+    }
+
+    .dx-menu-item-content {
+      padding-top: $filemanager-breadcrumbs-item-padding-top;
+      padding-bottom: $filemanager-breadcrumbs-item-padding-bottom;
+    }
+
+    .dx-filemanager-breadcrumbs-separator-item .dx-menu-item-content {
+      background: $filemanager-border-color;
+    }
+
+    .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: $filemanager-file-item-select-color;
+      background: $filemanager-file-item-select-bg;
+    }
+
+    &.dx-state-hover:not(.dx-state-focused):not(.dx-item-selected) {
+      background: $filemanager-file-item-hover-bg;
+    }
+
+    &.dx-state-focused {
+      border: $fluent-filemanager-state-focused-border;
+      border-color: $filemanager-file-item-focused-border;
+    }
+
+    &.dx-item-selected.dx-state-focused {
+      color: $filemanager-file-item-select-focus-color;
+      background: $filemanager-file-item-select-focus-bg;
+    }
+
+    .dx-filemanager-thumbnails-item-thumbnail {
+      width: calc(#{$fluent-base-icon-size} * 2);
+      height: calc(#{$fluent-base-icon-size} * 2);
+      font-size: calc(#{$fluent-base-icon-size} * 2);
+    }
+
+    .dx-filemanager-item-custom-thumbnail {
+      color: $filemanager-custom-thumbnail-color;
+    }
+  }
+
+  .dx-filemanager-files-view {
+    background: $filemanager-bg;
+
+    &.dx-filemanager-details {
+      .dx-filemanager-details-item-thumbnail {
+        font-size: $fluent-base-icon-size;
+        width: $fluent-base-icon-size;
+        height: $fluent-base-icon-size;
+      }
+
+      .dx-datagrid .dx-datagrid-content .dx-datagrid-table {
+        .dx-command-select {
+          padding: 0;
+          width: $filemanager-details-view-checkbox-column-width;
+          min-width: $filemanager-details-view-checkbox-column-width;
+          max-width: $filemanager-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: $filemanager-item-focused-color;
+      }
+    }
+  }
+
+  .dx-filemanager-details {
+    .dx-filemanager-details-item-name-wrapper {
+      align-items: center;
+    }
+  }
+}
+
+.dx-filemanager-dirs-tree.dx-treeview {
+  .dx-treeview-item {
+    padding-top: $filemanager-treeview-item-top-bottom-padding;
+    padding-bottom: $filemanager-treeview-item-top-bottom-padding;
+  }
+
+  .dx-state-focused > .dx-treeview-item {
+    background: transparent;
+
+    &.dx-state-hover {
+      background: $filemanager-dirs-tree-item-focus-bg;
+    }
+
+    & * {
+      color: $filemanager-dirs-tree-item-focus-color;
+    }
+  }
+
+  .dx-treeview-item-without-checkbox > .dx-treeview-item.dx-filemanager-focused-item {
+    background: $filemanager-dirs-tree-item-focus-bg;
+
+    & * {
+      color: $filemanager-dirs-tree-item-focus-color;
+    }
+  }
+}
+
+.dx-filemanager-view-switcher-popup {
+  width: calc(2 * #{$filemanager-toolbar-viewmode-padding} + #{$fluent-base-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(#{$filemanager-toolbar-viewmode-padding} - 1px);
+    padding-right: $filemanager-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: $filemanager-file-actions-button-size;
+    height: $filemanager-file-actions-button-size;
+
+    .dx-button-content {
+      padding: $fluent-filemanager-button-content-padding;
+    }
+  }
+}
+
+.dx-filemanager-context-menu .dx-menu-item-has-text:not(.dx-menu-item-has-icon) .dx-menu-item-text {
+  margin-left: $filemanager-contextmenu-text-item-left-margin;
+}
+
+@include filemanager-icons-mixin($filemanager-icon-color, $filemanager-icon-success-color, $filemanager-icon-inverted-color, $filemanager-icon-danger-color, $filemanager-icon-inverted-color, $filemanager-large-icon-size);
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_sizes.scss
new file mode 100644
index 000000000000..4eabdf8a8c33
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileManager/_sizes.scss
@@ -0,0 +1,120 @@
+@use "../sizes" as *;
+
+// adduse
+@use "../toolbar/sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+$filemanager-toolbar-separator-height: null !default;
+$filemanager-toolbar-viewmode-width: null !default;
+$filemanager-toolbar-viewmode-padding: null !default;
+$filemanager-breadcrumbs-item-padding-top: null !default;
+$filemanager-breadcrumbs-item-padding-bottom: null !default;
+$filemanager-details-view-checkbox-column-width: null !default;
+$filemanager-file-actions-button-size: null !default;
+$filemanager-treeview-item-top-bottom-padding: null !default;
+$filemanager-file-actions-button-top-bottom-padding: null !default;
+$filemanager-contextmenu-text-item-left-margin: null !default;
+$filemanager-large-icon-size: null !default;
+$filemanager-progress-panel-title-padding: null !default;
+$filemanager-progress-box-button-close-margin-top: null !default;
+
+$filemanager-toolbar-height: $fluent-toolbar-height;
+
+@if $size == "default" {
+  $filemanager-toolbar-separator-height: ds.$spacing-360 !default;
+  $filemanager-toolbar-viewmode-width: 190px !default; // dx-offscale: 190px
+  $filemanager-toolbar-viewmode-padding: ds.$spacing-60 !default;
+  $filemanager-breadcrumbs-item-padding-top: ds.$spacing-70 !default;
+  $filemanager-breadcrumbs-item-padding-bottom: ds.$spacing-80 !default;
+  $filemanager-details-view-checkbox-column-width: 49px !default; // dx-offscale: 49px
+  $filemanager-file-actions-button-size: ds.$spacing-280 !default;
+  $filemanager-treeview-item-top-bottom-padding: ds.$spacing-110 !default;
+  $filemanager-file-actions-button-top-bottom-padding: ds.$spacing-20 !default;
+  $filemanager-contextmenu-text-item-left-margin: ds.$spacing-480 !default;
+  $filemanager-large-icon-size: ds.$spacing-220 !default;
+  $filemanager-progress-panel-title-padding: ds.$spacing-160 !default;
+  $filemanager-progress-box-button-close-margin-top: ds.$spacing-60 !default;
+}
+
+@else if $size == "compact" {
+  $filemanager-toolbar-separator-height: ds.$spacing-260 !default;
+  $filemanager-toolbar-viewmode-width: 150px !default; // dx-offscale: 150px
+  $filemanager-toolbar-viewmode-padding: ds.$spacing-50 !default;
+  $filemanager-breadcrumbs-item-padding-top: ds.$spacing-80 !default;
+  $filemanager-breadcrumbs-item-padding-bottom: ds.$spacing-90 !default;
+  $filemanager-details-view-checkbox-column-width: 43px !default; // dx-offscale: 43px
+  $filemanager-file-actions-button-size: ds.$spacing-220 !default;
+  $filemanager-treeview-item-top-bottom-padding: ds.$spacing-80 !default;
+  $filemanager-file-actions-button-top-bottom-padding: ds.$spacing-90 !default;
+  $filemanager-contextmenu-text-item-left-margin: ds.$spacing-300 !default;
+  $filemanager-large-icon-size: ds.$spacing-160 !default;
+  $filemanager-progress-panel-title-padding: ds.$spacing-100 !default;
+  $filemanager-progress-box-button-close-margin-top: ds.$spacing-50 !default;
+}
+
+
+// Values hoisted from style-file literals (tokenized)
+$fluent-filemanager-toolbar-padding: 0 ds.$spacing-100 !default;
+$fluent-filemanager-button-content-padding: $filemanager-file-actions-button-top-bottom-padding ds.$spacing-60 !default;
+$fluent-filemanager-fileuploader-dropzone-placeholder-border: ds.$border-width-20 solid !default;
+$fluent-filemanager-state-focused-border: ds.$border-width-10 solid !default;
+
+// Base-layer values injected with design tokens (wave B1)
+$fluent-filemanager-progress-title-font-size: ds.$font-size-180 !default; // dx-no-semantic-role: 180 is off the font-size-role scale
+$fluent-filemanager-progress-title-font-weight: ds.$font-weight-title-default !default;
+$fluent-filemanager-progress-bold-font-weight: ds.$font-weight-base-strong !default;
+
+// Base-layer sizing injected with design tokens (wave B2)
+$fluent-filemanager-root-height: 500px !default; // dx-offscale: 500px
+$fluent-filemanager-root-border: ds.$border-width-10 solid !default;
+$fluent-filemanager-overlay-content-min-width: 240px !default; // dx-offscale: 240px
+$fluent-filemanager-overlay-content-max-width: 400px !default; // dx-offscale: 400px
+$fluent-filemanager-popup-content-padding: ds.$spacing-150 !default;
+$fluent-filemanager-progress-box-padding: ds.$spacing-50 0 0 !default;
+$fluent-filemanager-notification-common-padding-bottom: ds.$spacing-100 !default;
+$fluent-filemanager-notification-common-border-bottom-width: ds.$border-width-10 !default;
+$fluent-filemanager-progress-panel-border-left-width: ds.$border-width-10 !default;
+$fluent-filemanager-progress-panel-width: 340px !default; // dx-offscale: 340px
+$fluent-filemanager-progress-panel-container-padding: ds.$spacing-100 ds.$spacing-200 ds.$spacing-200 ds.$spacing-200 !default;
+$fluent-filemanager-progress-panel-title-padding: 0 0 ds.$spacing-50 ds.$spacing-100 !default;
+$fluent-filemanager-progress-panel-separator-height: ds.$spacing-200 !default;
+$fluent-filemanager-i-cancel-width: ds.$spacing-160 !default;
+$fluent-filemanager-i-cancel-height: ds.$spacing-160 !default;
+$fluent-filemanager-progress-box-margin-bottom: ds.$spacing-80 !default;
+$fluent-filemanager-progress-box-border-radius: ds.$border-radius-20 !default;
+$fluent-filemanager-progress-box-padding-2: ds.$spacing-100 0 ds.$spacing-100 ds.$spacing-100 !default;
+$fluent-filemanager-progress-box-without-close-button-padding-right: ds.$spacing-100 !default;
+$fluent-filemanager-progress-box-image-margin-right: ds.$spacing-100 !default;
+$fluent-filemanager-progress-box-common-padding: ds.$spacing-50 0 !default;
+$fluent-filemanager-progress-box-close-button-margin-top: ds.$spacing-90 !default;
+$fluent-filemanager-progress-box-close-button-margin-left: ds.$spacing-50 !default;
+$fluent-filemanager-progress-box-error-padding: ds.$spacing-20 ds.$spacing-80 ds.$spacing-30 !default;
+$fluent-filemanager-progress-box-error-max-height: 150px !default; // dx-offscale: 150px
+$fluent-filemanager-toolbar-separator-item-width: ds.$spacing-10 !default;
+$fluent-filemanager-toolbar-separator-item-margin-right: ds.$spacing-50 !default;
+$fluent-filemanager-container-border-top: ds.$border-width-10 solid !default;
+$fluent-filemanager-dirs-panel-padding: ds.$spacing-50 ds.$spacing-100 !default;
+$fluent-filemanager-drawer-panel-content-initial-min-width: 250px !default; // dx-offscale: 250px
+$fluent-filemanager-drawer-panel-content-initial-max-width: 300px !default; // dx-offscale: 300px
+$fluent-filemanager-breadcrumbs-padding: ds.$spacing-20 ds.$spacing-110 !default;
+$fluent-filemanager-breadcrumbs-border-bottom: ds.$border-width-10 solid !default;
+$fluent-filemanager-menu-item-content-padding-left: ds.$spacing-20 !default;
+$fluent-filemanager-menu-item-content-padding-right: ds.$spacing-20 !default;
+$fluent-filemanager-menu-item-content-margin: 0 ds.$spacing-100 !default;
+$fluent-filemanager-menu-item-content-padding-left-2: ds.$spacing-10 !default;
+$fluent-filemanager-menu-item-content-padding-right-2: ds.$spacing-10 !default;
+$fluent-filemanager-thumbnails-view-port-padding: ds.$spacing-50 !default;
+$fluent-filemanager-thumbnails-item-width: ds.$spacing-1000 !default;
+$fluent-filemanager-thumbnails-item-height: ds.$spacing-1000 !default;
+$fluent-filemanager-thumbnails-item-border: ds.$border-width-10 dashed transparent !default;
+$fluent-filemanager-thumbnails-item-margin: ds.$spacing-50 !default;
+$fluent-filemanager-thumbnails-item-content-padding: ds.$spacing-130 0 ds.$spacing-100 !default;
+$fluent-filemanager-thumbnails-item-spacer-height: ds.$spacing-100 !default;
+$fluent-filemanager-viewmode-button-content-padding: ds.$spacing-100 ds.$spacing-110 !default;
+$fluent-filemanager-overlay-content-min-width-2: 300px !default; // dx-offscale: 300px
+$fluent-filemanager-overlay-content-min-height: 300px !default; // dx-offscale: 300px
+$fluent-filemanager-overlay-content-max-height: 400px !default; // dx-offscale: 400px
+$fluent-filemanager-overlay-content-max-width-2: 340px !default; // dx-offscale: 340px
+$fluent-filemanager-overlay-content-min-height-2: 180px !default; // dx-offscale: 180px
+$fluent-filemanager-overlay-content-max-height-2: 180px !default; // dx-offscale: 180px
+$fluent-filemanager-progressbox-cancel-button-margin-top: ds.$spacing-50 !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_colors.scss
new file mode 100644
index 000000000000..d4130f3dc409
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_colors.scss
@@ -0,0 +1,28 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+/**
+* $name 10. File name text color
+* $type color
+*/
+$fileuploader-filename-color: ds.$color-content-neutral-default-rest !default;
+$fileuploader-file-icon-color: ds.$color-content-neutral-subdued-rest !default;
+$fileuploader-progressbar-status-color: ds.$color-content-neutral-default-rest !default;
+$fluent-fileuploader-files-container-bg-color: ds.$color-surface-neutral-default-rest !default;
+
+/**
+* $name 20. File status text color
+* $type color
+*/
+$fileuploader-falename-status-color: ds.$color-content-neutral-subdued-rest !default;
+
+/**
+* $name 30. Drag-and-drop border color
+* $type color
+*/
+$fileuploader-border-color: ds.$color-border-neutral-default-rest !default;
+
+$fileuploader-danger: ds.$color-surface-danger-default-rest !default;
+$fileuploader-label-color: ds.$color-content-neutral-subdued-rest !default;
+$fluent-fileuploader-file-container-boxshadow: ds.$box-shadow-sm !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_index.scss
new file mode 100644
index 000000000000..0ca5901d214d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_index.scss
@@ -0,0 +1,217 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/mixins" as *;
+@use "../../base/fileUploader" with (
+  $fileuploader-button-margin-left: $fluent-fileuploader-button-margin-left,
+  $fileuploader-upload-button-margin-top: $fluent-fileuploader-upload-button-margin-top,
+  $fileuploader-show-file-list-padding-top: $fluent-fileuploader-show-file-list-padding-top,
+  $fileuploader-file-container-padding-2: $fluent-fileuploader-file-container-padding-2,
+  $fileuploader-button-width: $fluent-fileuploader-button-width,
+  $fileuploader-button-height: $fluent-fileuploader-button-height,
+  $fileuploader-button-margin-right: $fluent-fileuploader-button-margin-right,
+  $fileuploader-cancel-button-position-end-margin-left: $fluent-fileuploader-cancel-button-position-end-margin-left,
+  $fileuploader-file-status-message-height: $fluent-fileuploader-file-status-message-height,
+  $fileuploader-progressbar-height: $fluent-fileuploader-progressbar-height,
+  $fileuploader-file-size-padding-left: $fluent-fileuploader-file-size-padding-left,
+  $fileuploader-file-icon-padding-right: $fluent-fileuploader-file-icon-padding-right,
+  $fileuploader-button-margin-left-2: $fluent-fileuploader-button-margin-left-2,
+  $fileuploader-cancel-button-position-end-margin-right: $fluent-fileuploader-cancel-button-position-end-margin-right,
+  $fileuploader-file-size-padding-right: $fluent-fileuploader-file-size-padding-right,
+  $fileuploader-file-status-message-margin-bottom-2: $fluent-fileuploader-file-status-message-margin-bottom-2,
+  $fileuploader-cancel-button-margin-top: $fluent-fileuploader-cancel-button-margin-top,
+  $fileuploader-status-message-font-size: $fluent-fileuploader-status-message-font-size,
+  $fileuploader-file-size-font-size: $fluent-fileuploader-file-size-font-size,
+);
+
+// adduse
+
+
+.dx-fileuploader-wrapper {
+  padding: $fluent-fileuploader-vertical-padding;
+}
+
+.dx-fileuploader-content > .dx-fileuploader-upload-button {
+  margin-left: $fluent-fileuploader-upload-button-margin-left;
+  margin-right: $fluent-fileuploader-upload-button-margin-right;
+}
+
+.dx-fileuploader-input-wrapper {
+  padding: $fluent-fileuploader-vertical-padding 0 $fluent-fileuploader-vertical-padding;
+  border: $fluent-fileuploader-file-wrapper-border-size dashed transparent;
+}
+
+.dx-fileuploader.dx-state-disabled .dx-fileuploader-input-label {
+  position: relative;
+}
+
+.dx-fileuploader-dragover {
+  .dx-fileuploader-input-wrapper {
+    border: none;
+    padding: 0;
+
+    .dx-fileuploader-button {
+      display: none;
+    }
+  }
+
+  .dx-fileuploader-input-label {
+    text-align: center;
+  }
+
+  .dx-fileuploader-input-container {
+    display: block;
+    width: 100%;
+  }
+
+  .dx-fileuploader-input {
+    display: block;
+    width: 100%;
+    padding-top: calc(#{$fluent-fileuploader-vertical-padding} * 2 + #{$fluent-fileuploader-file-wrapper-border-size});
+    padding-right: $fluent-fileuploader-file-wrapper-border-size;
+
+    // NOTE: height of the widget should be the same in default and drag over states, but not with margin help
+    padding-bottom: calc(#{$fluent-fileuploader-vertical-padding} * 2 + #{$fluent-fileuploader-file-wrapper-border-size} + 1px);
+    padding-left: $fluent-fileuploader-file-wrapper-border-size;
+    box-sizing: content-box;
+  }
+
+  .dx-fileuploader-input-label { // stylelint-disable-line no-duplicate-selectors
+    padding: calc(#{$fluent-fileuploader-vertical-padding} * 2) calc(#{$fluent-fileuploader-vertical-padding} + 2px);
+    border: $fluent-fileuploader-file-wrapper-border-size dashed;
+    border-color: $fileuploader-border-color;
+  }
+}
+
+.dx-fileuploader-file-status-message,
+.dx-fileuploader-file-size {
+  color: $fileuploader-falename-status-color;
+}
+
+.dx-fileuploader-input {
+  padding: $fluent-fileuploader-vertical-padding 0;
+}
+
+.dx-fileuploader-input-label {
+  padding: calc(#{$fluent-fileuploader-vertical-padding} + (#{$fluent-base-font-size} / 2 - #{$fluent-fileuploader-vertical-padding}) / 2 + 1px) calc(#{$fluent-fileuploader-vertical-padding} + 2px);
+  color: $fileuploader-filename-color;
+
+  @include dx-overflow();
+}
+
+.dx-fileuploader-files-container {
+  .dx-fileuploader-show-file-list & {
+    padding: $fluent-fileuploader-files-container-padding;
+  }
+
+  .dx-fileuploader-empty & {
+    padding: 0;
+  }
+
+  .dx-invalid & {
+    padding-top: $fluent-fileuploader-invalid-padding-top;
+  }
+
+  .dx-fileuploader-button .dx-button-content {
+    padding: 0;
+  }
+
+  .dx-fileuploader-file-container {
+    padding: $fluent-fileuploader-file-container-padding;
+    margin-bottom: $fluent-fileuploader-file-container-margin-bottom;
+    border-radius: $fluent-fileuploader-files-container-rounding;
+    background-color: $fluent-fileuploader-files-container-bg-color;
+    box-shadow: $fluent-fileuploader-file-container-boxshadow;
+
+    .dx-fileuploader-button-container + .dx-fileuploader-button-container {
+      .dx-button {
+        margin-right: $fluent-fileuploader-file-container-text-margin;
+
+        .dx-rtl & {
+          margin-left: $fluent-fileuploader-file-container-text-margin;
+          margin-right: 0;
+        }
+      }
+    }
+
+    .dx-fileuploader-button-container {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .dx-button {
+      height: $fluent-fileuploader-file-container-button-size;
+      width: $fluent-fileuploader-file-container-button-size;
+      margin-right: $fluent-fileuploader-file-container-button-margin;
+
+      &.dx-fileuploader-cancel-button-position-end {
+        margin-right: 0;
+        margin-left: $fluent-fileuploader-file-cancel-button-margin-left;
+      }
+
+      .dx-rtl & {
+        margin-left: $fluent-fileuploader-file-container-button-margin;
+        margin-right: 0;
+
+        &.dx-fileuploader-cancel-button-position-end {
+          margin-left: 0;
+          margin-right: $fluent-fileuploader-file-cancel-button-margin-left;
+        }
+      }
+    }
+  }
+}
+
+.dx-fileuploader .dx-progressbar-status {
+  color: $fileuploader-progressbar-status-color;
+}
+
+.dx-fileuploader-file {
+  display: block;
+  padding-top: $fluent-fileuploader-file-padding-top;
+  line-height: $fluent-fileuploader-file-line-height;
+}
+
+.dx-fileuploader-file-icon {
+  color: $fileuploader-file-icon-color;
+  font-size: $fluent-fileuploader-file-icon-font-size;
+}
+
+.dx-fileuploader-file-name {
+  padding-bottom: calc((#{$fluent-fileuploader-vertical-padding}) / 2);
+  color: $fileuploader-filename-color;
+  font-weight: $fluent-fileuploader-file-name-font-weight;
+}
+
+.dx-fileuploader-file-size {
+  float: right;
+  padding: $fluent-fileuploader-file-size-margin;
+  color: $fileuploader-label-color;
+}
+
+.dx-fileuploader-invalid {
+  .dx-fileuploader-file-status-message {
+    color: $fileuploader-danger;
+
+    span {
+      &:first-child {
+        margin-top: $fluent-fileuploader-file-status-message-margin-top;
+      }
+
+      &:last-child {
+        margin-bottom: $fluent-fileuploader-file-status-message-margin-bottom;
+      }
+    }
+  }
+
+  .dx-fileuploader-button-container {
+    vertical-align: middle;
+  }
+
+  .dx-fileuploader-cancel-button {
+    margin-top: 0;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_sizes.scss
new file mode 100644
index 000000000000..63c82f935ae6
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/fileUploader/_sizes.scss
@@ -0,0 +1,71 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-fileuploader-file-container-padding: null !default;
+$fluent-fileuploader-file-container-text-margin: null !default;
+$fluent-fileuploader-file-container-button-margin: null !default;
+$fluent-fileuploader-file-cancel-button-margin-left: ds.$spacing-40 !default;
+$fluent-fileuploader-file-container-button-size: null !default;
+
+$fluent-fileuploader-vertical-padding: ds.$spacing-70 !default;
+$fluent-fileuploader-files-container-padding: null !default;
+$fluent-fileuploader-file-size-margin: null !default;
+$fluent-fileuploader-file-icon-font-size: null !default;
+$fluent-fileuploader-files-container-rounding: ds.$spacing-40 !default;
+
+@if $size == "default" {
+  $fluent-fileuploader-file-container-padding: ds.$spacing-50 ds.$spacing-80 !default;
+  $fluent-fileuploader-file-container-text-margin: ds.$spacing-150 !default;
+  $fluent-fileuploader-file-container-button-margin: ds.$spacing-80 !default;
+  $fluent-fileuploader-file-container-button-size: ds.$spacing-320 !default;
+  $fluent-fileuploader-files-container-padding: ds.$spacing-120 ds.$spacing-40 0 !default;
+  $fluent-fileuploader-file-size-margin: 0 0 0 ds.$spacing-40 !default;
+  $fluent-fileuploader-file-icon-font-size: ds.$font-size-200 !default; // dx-icon-glyph-size: text roles not applicable
+}
+
+@else if $size == "compact" {
+  $fluent-fileuploader-file-container-padding: ds.$spacing-20 ds.$spacing-40 !default;
+  $fluent-fileuploader-file-container-text-margin: ds.$spacing-60 !default;
+  $fluent-fileuploader-file-container-button-margin: ds.$spacing-20 !default;
+  $fluent-fileuploader-file-container-button-size: ds.$spacing-280 !default;
+  $fluent-fileuploader-files-container-padding: ds.$spacing-120 ds.$spacing-40 0 !default;
+  $fluent-fileuploader-file-size-margin: 0 0 ds.$spacing-40 !default;
+  $fluent-fileuploader-file-icon-font-size: ds.$font-size-160 !default; // dx-icon-glyph-size: text roles not applicable
+}
+
+// Values hoisted from style-file literals (tokenized)
+$fluent-fileuploader-file-name-font-weight: ds.$font-weight-500 !default; // dx-no-semantic-role: 500 is off the weight-role scale (400/600/700)
+$fluent-fileuploader-file-line-height: 13px !default; // dx-offscale: 13px
+$fluent-fileuploader-upload-button-margin-left: ds.$spacing-30 !default;
+$fluent-fileuploader-upload-button-margin-right: ds.$spacing-30 !default;
+$fluent-fileuploader-invalid-padding-top: 50px !default; // dx-offscale: 50px
+$fluent-fileuploader-file-container-margin-bottom: ds.$spacing-40 !default;
+$fluent-fileuploader-file-padding-top: ds.$spacing-50 !default;
+$fluent-fileuploader-file-status-message-margin-top: ds.$spacing-20 !default;
+$fluent-fileuploader-file-status-message-margin-bottom: ds.$spacing-20 !default;
+$fluent-fileuploader-file-wrapper-border-size: ds.$border-width-30 !default;
+
+// Base-layer values injected with design tokens (wave B1)
+$fluent-fileuploader-status-message-font-size: ds.$font-size-caption-md !default;
+$fluent-fileuploader-file-size-font-size: ds.$font-size-caption-sm !default;
+
+// Base-layer sizing injected with design tokens (wave B2)
+$fluent-fileuploader-button-margin-left: ds.$spacing-120 !default;
+$fluent-fileuploader-upload-button-margin-top: ds.$spacing-100 !default;
+$fluent-fileuploader-show-file-list-padding-top: ds.$spacing-220 !default;
+$fluent-fileuploader-file-container-padding-2: ds.$spacing-40 0 ds.$spacing-40 !default;
+$fluent-fileuploader-button-width: ds.$spacing-280 !default;
+$fluent-fileuploader-button-height: ds.$spacing-280 !default;
+$fluent-fileuploader-button-margin-right: ds.$spacing-100 !default;
+$fluent-fileuploader-cancel-button-position-end-margin-left: ds.$spacing-40 !default;
+$fluent-fileuploader-file-status-message-height: ds.$spacing-160 !default;
+$fluent-fileuploader-progressbar-height: ds.$spacing-220 !default;
+$fluent-fileuploader-file-size-padding-left: ds.$spacing-40 !default;
+$fluent-fileuploader-file-icon-padding-right: ds.$spacing-60 !default;
+$fluent-fileuploader-button-margin-left-2: ds.$spacing-100 !default;
+$fluent-fileuploader-cancel-button-position-end-margin-right: ds.$spacing-40 !default;
+$fluent-fileuploader-file-size-padding-right: ds.$spacing-40 !default;
+$fluent-fileuploader-file-status-message-margin-bottom-2: ds.$spacing-20 !default;
+$fluent-fileuploader-cancel-button-margin-top: ds.$spacing-50 !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_colors.scss
new file mode 100644
index 000000000000..2fcaa3bee684
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_colors.scss
@@ -0,0 +1,69 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$filterbuilder-bg: ds.$color-surface-neutral-default-rest !default;
+
+/**
+* $name 10. Text color
+* $type color
+*/
+$filterbuilder-text-color: ds.$color-content-neutral-default-rest !default;
+
+/**
+* $name 20. Focused text color
+* $type color
+*/
+$filterbuilder-text-focus-color: ds.$color-content-neutral-default-static-dark-rest !default;
+
+/**
+* $name 30. Plus icon color
+* $type color
+*/
+$filterbuilder-plus-icon-color: ds.$color-content-success-default-rest !default;
+$filterbuilder-plus-icon-hover-color: ds.$color-content-success-default-hovered !default;
+$filterbuilder-plus-icon-focus-color: ds.$color-content-success-default-active !default;
+
+/**
+* $name 40. Remove icon color
+* $type color
+*/
+$filterbuilder-remove-icon-color: ds.$color-content-danger-default-rest !default;
+$filterbuilder-remove-icon-hover-color: ds.$color-content-danger-default-hovered !default;
+$filterbuilder-remove-icon-focus-color: ds.$color-content-danger-default-active !default;
+
+/**
+* $name 50. Group operation button color
+* $type color
+*/
+$filterbuilder-group-operation-color: ds.$color-surface-danger-subdued-rest !default;
+$filterbuilder-group-operation-hover-color: ds.$color-surface-danger-subdued-hovered !default;
+$filterbuilder-group-operation-focus-color: ds.$color-surface-danger-default-rest !default;
+
+/**
+* $name 60. Data field button color
+* $type color
+*/
+$filterbuilder-item-field-color: ds.$color-surface-primary-subdued-rest !default;
+$filterbuilder-item-field-hover-color: ds.$color-surface-primary-subdued-hovered !default;
+$filterbuilder-item-field-focus-color: ds.$color-surface-primary-default-rest !default;
+
+/**
+* $name 70. Operation button color
+* $type color
+*/
+$filterbuilder-item-operator-color: ds.$color-surface-success-subdued-rest !default;
+$filterbuilder-item-operator-hover-color: ds.$color-surface-success-subdued-hovered !default;
+$filterbuilder-item-operator-focus-color: ds.$color-surface-success-default-rest !default;
+
+/**
+* $name 80. Value button color
+* $type color
+*/
+$filterbuilder-item-value-color: ds.$color-surface-neutral-alpha-rest !default;
+$filterbuilder-item-value-hover-color: ds.$color-surface-neutral-alpha-hovered !default;
+$filterbuilder-item-value-focus-color: ds.$color-surface-neutral-alpha-active !default;
+$filterbuilder-menu-icon-color: ds.$color-content-neutral-default-rest !default;
+
+// Base-layer values injected with design tokens (wave B1)
+$fluent-filterbuilder-range-separator-opacity: ds.$opacity-30 !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_index.scss
new file mode 100644
index 000000000000..217a75bf0233
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_index.scss
@@ -0,0 +1,140 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../common/sizes" as *;
+@use "../../base/filterBuilder" as * with (
+  $filterbuilder-action-icon-margin-left: $fluent-filterbuilder-action-icon-margin-left,
+  $filterbuilder-action-icon-margin-right: $fluent-filterbuilder-action-icon-margin-right,
+  $filterbuilder-group-content-padding-right: $fluent-filterbuilder-group-content-padding-right,
+  $filterbuilder-range-separator-margin: $fluent-filterbuilder-range-separator-margin,
+  $filterbuilder-item-value-text-min-width: $fluent-filterbuilder-item-value-text-min-width,
+  $filterbuilder-item-value-text-padding: $fluent-filterbuilder-item-value-text-padding,
+  $filterbuilder-action-icon-padding: $fluent-filterbuilder-action-icon-padding,
+  $filterbuilder-group-content-padding-left: $fluent-filterbuilder-group-content-padding-left,
+  $filterbuilder-treeview-item-padding-left: $fluent-filterbuilder-treeview-item-padding-left,
+  $filterbuilder-treeview-item-padding-right: $fluent-filterbuilder-treeview-item-padding-right,
+  $filterbuilder-treeview-node-margin-left: $fluent-filterbuilder-treeview-node-margin-left,
+  $filterbuilder-treeview-node-margin-right: $fluent-filterbuilder-treeview-node-margin-right,
+  $filterbuilder-scrollable-max-height: $fluent-filterbuilder-scrollable-max-height,
+  $filterbuilder-range-separator-opacity: $fluent-filterbuilder-range-separator-opacity,
+    $filterbuilder-bg: $filterbuilder-bg,
+    $filterbuilder-text-color: $filterbuilder-text-color,
+    $filterbuilder-text-focus-color: $filterbuilder-text-focus-color,
+    $filterbuilder-group-operation-color: $filterbuilder-group-operation-color,
+    $filterbuilder-group-operation-hover-color: $filterbuilder-group-operation-hover-color,
+    $filterbuilder-group-operation-focus-color: $filterbuilder-group-operation-focus-color,
+    $filterbuilder-item-operator-color: $filterbuilder-item-operator-color,
+    $filterbuilder-item-operator-hover-color: $filterbuilder-item-operator-hover-color,
+    $filterbuilder-item-operator-focus-color: $filterbuilder-item-operator-focus-color,
+    $filterbuilder-item-field-color: $filterbuilder-item-field-color,
+    $filterbuilder-item-field-hover-color: $filterbuilder-item-field-hover-color,
+    $filterbuilder-item-field-focus-color: $filterbuilder-item-field-focus-color,
+    $filterbuilder-item-value-color: $filterbuilder-item-value-color,
+    $filterbuilder-item-value-hover-color: $filterbuilder-item-value-hover-color,
+    $filterbuilder-item-value-focus-color: $filterbuilder-item-value-focus-color,
+    $filterbuilder-plus-icon-color: $filterbuilder-plus-icon-color,
+    $filterbuilder-plus-icon-hover-color: $filterbuilder-plus-icon-hover-color,
+    $filterbuilder-plus-icon-focus-color: $filterbuilder-plus-icon-focus-color,
+    $filterbuilder-remove-icon-color: $filterbuilder-remove-icon-color,
+    $filterbuilder-remove-icon-hover-color: $filterbuilder-remove-icon-hover-color,
+    $filterbuilder-remove-icon-focus-color: $filterbuilder-remove-icon-focus-color,
+    $filterbuilder-menu-icon-color: $filterbuilder-menu-icon-color,
+);
+@use "../textEditor/colors" as *;
+
+// adduse
+
+
+.dx-filterbuilder {
+  .dx-filterbuilder-action-icon {
+    font-size: $fluent-filterbuilder-action-icon-font-size;
+  }
+
+  .dx-filterbuilder-group {
+    .dx-filterbuilder-group-item {
+      .dx-filterbuilder-action.dx-filterbuilder-action-icon {
+        padding: $fluent-filterbuilder-icon-padding;
+        vertical-align: middle;
+      }
+    }
+  }
+
+  .dx-filterbuilder-item-value {
+    .dx-editor-filled,
+    .dx-editor-outlined {
+      .dx-texteditor-input {
+        padding: $fluent-filterbuilder-filled-editor-padding;
+      }
+    }
+  }
+
+  .dx-filterbuilder-text,
+  .dx-filterbuilder-item-value-text {
+    border-radius: $fluent-filterbuilder-text-border-radius;
+  }
+}
+
+.dx-filterbuilder-range-separator {
+  color: $texteditor-color;
+}
+
+.dx-filterbuilder-overlay {
+  &.dx-popup-wrapper > .dx-overlay-content {
+    box-shadow: $fluent-base-dropdown-widgets-shadow;
+  }
+
+  &.dx-filterbuilder-operations {
+    .dx-rtl {
+      .dx-treeview-item {
+        padding-right: $fluent-filterbuilder-treeview-item-left-padding;
+      }
+    }
+  }
+
+  .dx-treeview-node {
+    .dx-treeview-node-container-opened {
+      margin-left: $fluent-filterbuilder-treeview-item-left-padding;
+    }
+  }
+
+  .dx-treeview-item {
+    padding: $fluent-filterbuilder-treeview-item-padding;
+    min-height: $fluent-filterbuilder-treeview-item-min-heigth;
+
+    .dx-icon {
+      margin-right: $fluent-filterbuilder-icon-margin-right;
+    }
+  }
+
+  .dx-treeview-toggle-item-visibility {
+    left: $fluent-filterbuilder-treeview-toggle-left;
+  }
+
+  .dx-rtl {
+    .dx-treeview-node {
+      > .dx-treeview-item {
+        padding-right: calc(#{$fluent-filterbuilder-treeview-item-left-padding} * 2);
+      }
+
+      &.dx-treeview-node-is-leaf > .dx-treeview-item {
+        padding-right: $fluent-filterbuilder-treeview-item-left-padding;
+      }
+
+      .dx-treeview-node-container-opened {
+        margin-right: $fluent-filterbuilder-treeview-item-left-padding;
+        margin-left: 0;
+      }
+    }
+
+    .dx-treeview-item {
+      .dx-icon {
+        margin-left: $fluent-filterbuilder-icon-margin-left;
+      }
+    }
+
+    .dx-treeview-toggle-item-visibility {
+      right: $fluent-filterbuilder-treeview-toggle-item-visibility-right;
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_sizes.scss
new file mode 100644
index 000000000000..b61e6cd76ba8
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/filterBuilder/_sizes.scss
@@ -0,0 +1,52 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-filterbuilder-icon-padding: null !default;
+$fluent-filterbuilder-filled-editor-padding: null !default;
+$fluent-filterbuilder-treeview-item-left-padding: null !default;
+$fluent-filterbuilder-treeview-item-padding: null !default;
+$fluent-filterbuilder-treeview-toggle-left: null !default;
+$fluent-filterbuilder-treeview-item-min-heigth: null !default;
+
+@if $size == "default" {
+  $fluent-filterbuilder-icon-padding: ds.$spacing-80 !default;
+  $fluent-filterbuilder-filled-editor-padding: ds.$spacing-130 ds.$spacing-120 !default;
+
+  $fluent-filterbuilder-treeview-item-left-padding: ds.$spacing-120 !default;
+  $fluent-filterbuilder-treeview-item-padding: ds.$spacing-60 ds.$spacing-120 ds.$spacing-60 $fluent-filterbuilder-treeview-item-left-padding !default;
+  $fluent-filterbuilder-treeview-toggle-left: ds.$spacing-160 !default;
+  $fluent-filterbuilder-treeview-item-min-heigth: ds.$spacing-320 !default;
+}
+
+@else if $size == "compact" {
+  $fluent-filterbuilder-icon-padding: ds.$spacing-40 !default;
+  $fluent-filterbuilder-filled-editor-padding: ds.$spacing-80 ds.$spacing-80 !default;
+  $fluent-filterbuilder-treeview-item-left-padding: ds.$spacing-40 !default;
+  $fluent-filterbuilder-treeview-item-padding: ds.$spacing-40 ds.$spacing-120 ds.$spacing-40 $fluent-filterbuilder-treeview-item-left-padding !default;
+  $fluent-filterbuilder-treeview-toggle-left: 0 !default;
+  $fluent-filterbuilder-treeview-item-min-heigth: ds.$spacing-240 !default;
+}
+
+// Values hoisted from style-file literals (tokenized)
+$fluent-filterbuilder-action-icon-font-size: 21px !default; // dx-offscale: 21px
+$fluent-filterbuilder-text-border-radius: ds.$border-radius-50 !default;
+$fluent-filterbuilder-icon-margin-right: ds.$spacing-100 !default;
+$fluent-filterbuilder-icon-margin-left: ds.$spacing-100 !default;
+$fluent-filterbuilder-treeview-toggle-item-visibility-right: ds.$spacing-160 !default;
+
+// Base-layer sizing injected with design tokens (wave B2 — filterBuilder/common)
+$fluent-filterbuilder-action-icon-margin-left: ds.$spacing-50 !default;
+$fluent-filterbuilder-action-icon-margin-right: ds.$spacing-50 !default;
+$fluent-filterbuilder-group-content-padding-right: ds.$spacing-260 !default;
+$fluent-filterbuilder-range-separator-margin: 0 ds.$spacing-70 !default;
+$fluent-filterbuilder-item-value-text-min-width: ds.$spacing-200 !default;
+$fluent-filterbuilder-item-value-text-padding: ds.$spacing-20 ds.$spacing-70 ds.$spacing-30 ds.$spacing-70 !default;
+$fluent-filterbuilder-action-icon-padding: ds.$spacing-50 ds.$spacing-80 !default;
+$fluent-filterbuilder-group-content-padding-left: ds.$spacing-260 !default;
+$fluent-filterbuilder-treeview-item-padding-left: ds.$spacing-50 !default;
+$fluent-filterbuilder-treeview-item-padding-right: ds.$spacing-50 !default;
+$fluent-filterbuilder-treeview-node-margin-left: ds.$spacing-150 !default;
+$fluent-filterbuilder-treeview-node-margin-right: ds.$spacing-150 !default;
+$fluent-filterbuilder-scrollable-max-height: 360px !default; // dx-offscale: 360px
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_colors.scss
new file mode 100644
index 000000000000..9a2e5113c374
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_colors.scss
@@ -0,0 +1,18 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+/**
+* $name 10. Label text color
+* $type color
+*/
+$form-field-item-color: ds.$color-content-neutral-default-rest !default;
+$form-item-help-text-color: ds.$color-content-neutral-subdued-rest !default;
+
+/**
+* $name 20. Group border color
+* $type color
+*/
+$form-group-border-color: ds.$color-border-neutral-default-rest !default;
+$form-field-required-color: $form-field-item-color !default;
+$form-field-mark-color: $form-field-item-color !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_index.scss
new file mode 100644
index 000000000000..9c3b0f54e610
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_index.scss
@@ -0,0 +1,130 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/form";
+@use "../../base/icon_fonts" as *;
+
+// adduse
+@use "../scrollable";
+
+
+.dx-form-group-caption {
+  font-size: $fluent-form-group-caption-font-size;
+}
+
+.dx-form-group-with-caption { // stylelint-disable-line no-duplicate-selectors
+  & > .dx-form-group-content {
+    border-top: $fluent-form-group-content-border-top;
+    border-top-color: $form-group-border-color;
+    padding-bottom: $fluent-form-group-content-bottom-padding;
+    padding-top: $fluent-form-group-caption-top-padding;
+    margin-top: $fluent-form-group-caption-bottom-margin;
+  }
+}
+
+.dx-layout-manager {
+  .dx-field-item {
+    &:not(.dx-last-col) {
+      padding-inline-end: $fluent-form-layout-manager-horizontal-padding;
+    }
+
+    &:not(.dx-first-col) {
+      padding-inline-start: $fluent-form-layout-manager-horizontal-padding;
+    }
+
+    &:not(.dx-first-row) {
+      padding-top: $fluent-form-layout-manager-vertical-padding;
+    }
+
+    padding-bottom: $fluent-form-layout-manager-vertical-padding;
+    font-size: $fluent-form-label-font-size;
+
+    .dx-field-item {
+      &.dx-last-row {
+        padding-bottom: 0;
+      }
+    }
+  }
+
+  .dx-tabpanel .dx-multiview-item-content {
+    padding: $fluent-form-layout-manager-tabpanel-content-padding;
+  }
+}
+
+.dx-form > .dx-layout-manager.dx-layout-manager-one-col {
+  .dx-field-item {
+    .dx-field-item.dx-last-row:not(.dx-last-col) {
+      padding-bottom: $fluent-form-layout-manager-vertical-padding;
+    }
+  }
+}
+
+.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: $fluent-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: $fluent-form-top-label-padding;
+  margin-bottom: $fluent-form-top-label-bottom-margin;
+
+  .dx-form-styling-mode-underlined & {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+.dx-field-item-label-text {
+  color: $form-field-item-color;
+}
+
+.dx-field-item-help-text {
+  color: $form-item-help-text-color;
+  padding-top: $fluent-form-field-item-help-text-padding-top;
+  font-size: $fluent-form-help-text-font-size;
+  font-style: normal;
+
+  .dx-form-styling-mode-underlined & {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+.dx-field-item-optional .dx-label > span::after,
+.dx-field-item-optional-mark {
+  color: $form-field-mark-color;
+}
+
+.dx-field-item-required .dx-label > span::after,
+.dx-field-item-required-mark {
+  color: $form-field-required-color;
+}
+
+.dx-field-item-custom-label-content {
+  .dx-icon {
+    @include dx-icon-sizing($fluent-form-label-icon-size);
+    @include dx-icon-margin(math.div($fluent-base-icon-size, 3));
+  }
+}
+
+.dx-form-group-custom-caption {
+  font-size: $fluent-form-group-caption-font-size;
+
+  .dx-icon {
+    @include dx-icon-sizing($fluent-base-icon-size);
+    @include dx-icon-margin($fluent-form-group-custom-caption-icon-margin);
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_sizes.scss
new file mode 100644
index 000000000000..161a5b46800f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/form/_sizes.scss
@@ -0,0 +1,50 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-form-group-caption-bottom-margin: null !default;
+$fluent-form-group-caption-top-padding: null !default;
+$fluent-form-group-content-bottom-padding: null !default;
+$fluent-form-group-caption-font-size: null !default;
+$fluent-form-top-label-padding: 0 !default;
+$fluent-form-top-label-bottom-margin: null !default;
+$fluent-form-default-top-padding: null !default;
+$fluent-form-help-text-font-size: ds.$font-size-caption-md !default;
+$fluent-form-layout-manager-horizontal-padding: null !default;
+$fluent-form-layout-manager-vertical-padding: null !default;
+$fluent-form-layout-manager-tabpanel-content-padding: null !default;
+
+$fluent-form-label-font-size: $fluent-base-font-size !default;
+$fluent-form-label-icon-size: $fluent-base-icon-size !default;
+$fluent-form-group-custom-caption-icon-margin: null !default;
+
+@if $size == "default" {
+  $fluent-form-group-caption-bottom-margin: ds.$spacing-40 !default;
+  $fluent-form-group-caption-top-padding: ds.$spacing-160 !default;
+  $fluent-form-group-content-bottom-padding: ds.$spacing-160 !default;
+  $fluent-form-group-caption-font-size: ds.$font-size-title-md !default;
+  $fluent-form-group-custom-caption-icon-margin: ds.$spacing-60 !default;
+  $fluent-form-default-top-padding: ds.$spacing-160 !default;
+  $fluent-form-top-label-bottom-margin: ds.$spacing-40 !default;
+  $fluent-form-layout-manager-horizontal-padding: ds.$spacing-120 !default;
+  $fluent-form-layout-manager-vertical-padding: ds.$spacing-80 !default;
+  $fluent-form-layout-manager-tabpanel-content-padding: ds.$spacing-240 !default;
+}
+
+@else if $size == "compact" {
+  $fluent-form-group-caption-bottom-margin: ds.$spacing-40 !default;
+  $fluent-form-group-caption-top-padding: ds.$spacing-120 !default;
+  $fluent-form-group-content-bottom-padding: ds.$spacing-120 !default;
+  $fluent-form-group-caption-font-size: ds.$font-size-title-sm !default;
+  $fluent-form-group-custom-caption-icon-margin: ds.$spacing-40 !default;
+  $fluent-form-default-top-padding: ds.$spacing-80 !default;
+  $fluent-form-top-label-bottom-margin: ds.$spacing-20 !default;
+  $fluent-form-layout-manager-horizontal-padding: ds.$spacing-80 !default;
+  $fluent-form-layout-manager-vertical-padding: ds.$spacing-60 !default;
+  $fluent-form-layout-manager-tabpanel-content-padding: ds.$spacing-160 !default;
+}
+
+// Values hoisted from style-file literals (tokenized)
+$fluent-form-field-item-help-text-padding-top: ds.$spacing-20 !default;
+$fluent-form-group-content-border-top: ds.$border-width-10 solid !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_colors.scss
new file mode 100644
index 000000000000..4ad2dc96d91d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_colors.scss
@@ -0,0 +1,41 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+/**
+* $name 10. Indicator background color
+* $type color
+*/
+$gallery-indicator-bg: ds.$color-surface-neutral-default-rest !default;
+
+/**
+* $name 20. Selected indicator background color
+* $type color
+*/
+$gallery-indicator-item-selected-bg: ds.$color-surface-primary-default-rest !default;
+
+/**
+* $name 30. Focused indicator background color
+* $type color
+*/
+$gallery-indicator-focused-bg: ds.$color-surface-primary-default-rest !default;
+$gallery-indicator-item-border-color: ds.$color-border-neutral-subdued-rest !default;
+
+// Semi-transparent surface over the indicator — relative-color bridge.
+$gallery-indicator-selected-border-color: rgb(from #{ds.$color-surface-neutral-default-rest} r g b / 0.8) !default;
+$gallery-navbutton-color: ds.$color-content-neutral-subdued-rest !default;
+$gallery-nav-arrow-color: ds.$color-content-neutral-default-static-dark-rest !default;
+
+/**
+* $name 40. Hovered navigation button color
+* $type color
+*/
+$gallery-navbutton-hover-color: ds.$color-surface-primary-default-rest !default;
+
+/**
+* $name 50. Active navigation button color
+* $type color
+*/
+$gallery-navbutton-active-color: ds.$color-surface-primary-default-active !default;
+
+$gallery-accent: ds.$color-surface-primary-default-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_index.scss
new file mode 100644
index 000000000000..bbc0b408123c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_index.scss
@@ -0,0 +1,113 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../../base/gallery";
+
+// adduse
+
+.dx-gallery {
+  .dx-gallery-nav-button-prev,
+  .dx-gallery-nav-button-next {
+    position: absolute;
+    top: 0;
+    width: 34%;
+    height: 100%;
+    background: transparent;
+    cursor: pointer;
+
+    &.dx-state-hover::after {
+      background-color: $gallery-navbutton-hover-color;
+    }
+
+    &.dx-state-active::after {
+      background-color: $gallery-navbutton-active-color;
+    }
+
+    @include dx-icon-font-centered-sizing(32px);
+
+    &::after {
+      content: '';
+      position: absolute;
+      width: $fluent-gallery-state-active-width;
+      height: $fluent-gallery-state-active-height;
+      background: $gallery-navbutton-color;
+      border-radius: 50%;
+      top: 50%;
+      margin-top: $fluent-gallery-state-active-margin-top;
+    }
+
+    &::before {
+      position: absolute;
+      z-index: 10;
+      clear: both;
+      font-size: $fluent-gallery-nav-icon-font-size;
+      color: $gallery-nav-arrow-color;
+    }
+  }
+
+  .dx-gallery-nav-button-prev {
+    @include dx-icon(chevronleft);
+
+    &::after {
+      left: $fluent-gallery-button-padding;
+    }
+
+    &::before {
+      left: calc(#{$fluent-gallery-button-padding} - 1px);
+      right: auto;
+      margin-left: 0;
+    }
+  }
+
+  .dx-gallery-nav-button-next {
+    @include dx-icon(chevronright);
+
+    &::after {
+      right: $fluent-gallery-button-padding;
+    }
+
+    &::before {
+      right: calc(#{$fluent-gallery-button-padding} - 1px);
+      left: auto;
+    }
+  }
+}
+
+
+.dx-gallery-indicator {
+  pointer-events: none;
+  text-align: center;
+}
+
+.dx-gallery-indicator-item {
+  border-radius: 50%;
+  box-sizing: border-box;
+  border: $fluent-gallery-indicator-item-border;
+  border-color: $gallery-indicator-item-border-color;
+  pointer-events: auto;
+  margin: calc(5px - #{$fluent-gallery-indicator-size} / 2) 6px;
+  width: $fluent-gallery-indicator-size;
+  height: $fluent-gallery-indicator-size;
+  background: $gallery-indicator-bg;
+}
+
+.dx-gallery-indicator-item-active,
+.dx-gallery-indicator-item-selected {
+  width: $fluent-gallery-indicator-selected-size;
+  height: $fluent-gallery-indicator-selected-size;
+  background: $gallery-indicator-item-selected-bg;
+  border: $fluent-gallery-indicator-item-selected-border;
+  border-color: $gallery-indicator-selected-border-color;
+  margin: calc(5px - #{$fluent-gallery-indicator-selected-size} / 2) 6px;
+}
+
+.dx-state-focused.dx-gallery {
+  border-color: $gallery-accent;
+
+  .dx-gallery-indicator-item-selected {
+    background: $gallery-indicator-focused-bg;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_sizes.scss
new file mode 100644
index 000000000000..05e644590185
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gallery/_sizes.scss
@@ -0,0 +1,16 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-gallery-indicator-size: ds.$spacing-80 !default;
+$fluent-gallery-indicator-selected-size: ds.$spacing-120 !default;
+$fluent-gallery-button-padding: ds.$spacing-80 !default;
+
+// Values hoisted from style-file literals (tokenized)
+$fluent-gallery-nav-icon-font-size: ds.$font-size-320 !default; // dx-icon-glyph-size: text roles not applicable
+$fluent-gallery-state-active-width: ds.$spacing-320 !default;
+$fluent-gallery-state-active-height: ds.$spacing-320 !default;
+$fluent-gallery-state-active-margin-top: -16px !default; // dx-offscale: -16px
+$fluent-gallery-indicator-item-border: ds.$border-width-10 solid !default;
+$fluent-gallery-indicator-item-selected-border: ds.$border-width-20 solid !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_colors.scss
new file mode 100644
index 000000000000..2416b0c8c1ab
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_colors.scss
@@ -0,0 +1,28 @@
+@use "../colors" as *;
+@use "../gridBase/colors" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$gantt-collapsable-row-bg: ds.$color-surface-neutral-deep-rest !default;
+
+/*
+ * Toolbar icons are SVG data-uri images: the color is baked into the background-image at
+ * build time (string replace). CSS var() tokens do NOT resolve inside a data-uri (they render
+ * black), so this stays a concrete $base-* value. See DIVERGENCES.md.
+ */
+$gantt-icon-color: $base-text-color !default;
+$gantt-parent-task-background-color: ds.$color-surface-success-default-rest !default;
+$gantt-task-color: ds.$color-content-neutral-default-inverted-rest !default;
+$gantt-task-background-color: ds.$color-surface-neutral-default-inverted-rest !default;
+$gantt-task-progress-background-color: rgb(from #{ds.$color-surface-neutral-default-inverted-rest} r g b / 0.2) !default;
+
+// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
+$gantt-accent: ds.$color-surface-primary-default-rest !default;
+$gantt-bg: ds.$color-surface-neutral-default-rest !default;
+$gantt-border-color: ds.$color-border-neutral-default-rest !default;
+$gantt-text-color: ds.$color-content-neutral-default-rest !default;
+
+// Color computations hoisted from style files (phase 0.5 layer normalization)
+$gantt-accent-border-color: ds.$color-border-primary-default-rest !default;
+$gantt-accent-light-bg: ds.$color-surface-primary-alpha-hovered !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_index.scss
new file mode 100644
index 000000000000..f4f0c8326ab6
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_index.scss
@@ -0,0 +1,290 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/gantt";
+@use "../../base/gantt/mixins" as *;
+@use "../gridBase/colors" as *;
+@use "../form/sizes" as *;
+
+// adduse
+@use "../splitterBar";
+
+
+$gantt-successor-background-color: white;
+
+.dx-gantt {
+  border: $gantt-root-border;
+  border-color: $gantt-border-color;
+
+  .dx-gantt-toolbar-wrapper {
+    padding: $gantt-toolbar-wrapper-padding;
+    border-bottom: $gantt-toolbar-wrapper-border-bottom;
+    border-bottom-color: $gantt-border-color;
+
+    .dx-gantt-toolbar-separator {
+      border-left-color: $gantt-border-color;
+    }
+
+    .dx-toolbar .dx-toolbar-items-container {
+      min-height: $gantt-toolbar-items-container-min-height;
+    }
+  }
+
+  .dx-gantt-view {
+    background-color: $gantt-bg;
+  }
+
+  .dx-header-row,
+  .dx-treelist-filter-row {
+    height: $gantt-header-item-height;
+  }
+
+  .dx-gantt-header {
+    color: $datagrid-columnchooser-item-color;
+    font-size: $fluent-form-label-font-size;
+
+    .dx-gantt-tsac,
+    .dx-gantt-tsa,
+    .dx-gantt-hb,
+    .dx-gantt-vb {
+      border-color: $gantt-border-color;
+      background-color: $gantt-bg;
+    }
+  }
+
+  .dx-gantt-si {
+    padding-left: $gantt-si-padding-left;
+    padding-right: $gantt-si-padding-right;
+  }
+
+  .dx-gantt-tsac,
+  .dx-gantt-tsa {
+    border-bottom: $gantt-toolbar-wrapper-border-bottom;
+    border-bottom-color: $gantt-border-color;
+  }
+
+  .dx-gantt-hb {
+    border-top: $gantt-hb-border-top;
+    border-top-color: $gantt-border-color;
+  }
+
+  .dx-gantt-vb {
+    border-left: $gantt-vb-border-left;
+    border-left-color: $gantt-border-color;
+  }
+
+  .dx-gantt-taskWrapper {
+    padding-top: $gantt-task-wrapper-padding-top;
+
+    .dx-gantt-task,
+    .dx-gantt-titleOut {
+      height: $gantt-task-height;
+      line-height: $gantt-task-height;
+    }
+
+    .dx-gantt-task {
+      background-color: $gantt-accent;
+      border-radius: $base-border-radius;
+
+      .dx-gantt-tPrg {
+        border-radius: $base-border-radius;
+        background-color: $gantt-task-progress-background-color;
+      }
+
+      &.dx-gantt-smallTask {
+        border-radius: $base-border-radius;
+
+        .dx-gantt-titleIn {
+          padding: $gantt-title-padding;
+        }
+      }
+
+      &.dx-gantt-parent {
+        height: calc(#{$gantt-task-height} - 2px);
+        line-height: calc(#{$gantt-task-height} - 2px);
+        background-color: $gantt-parent-task-background-color;
+        border-left-color: $gantt-parent-task-background-color;
+        border-right-color: $gantt-parent-task-background-color;
+        border-top-color: $gantt-parent-task-background-color;
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: 0;
+
+        &:not(.dx-gantt-noPrg) .dx-gantt-tPrg {
+          background-color: $gantt-task-progress-background-color;
+        }
+
+        &:not(.dx-gantt-smallTask)::before,
+        &:not(.dx-gantt-smallTask)::after,
+        &:not(.dx-gantt-smallTask):not(.dx-gantt-noPrg) .dx-gantt-tPrg::before,
+        &:not(.dx-gantt-smallTask).dx-gantt-cmpl .dx-gantt-tPrg::after {
+          content: '';
+          position: absolute;
+          bottom: $gantt-t-bottom;
+          border-width: $gantt-task-progress-notch-border-width;
+          border-style: solid;
+        }
+
+        &::before,
+        &:not(.dx-gantt-noPrg) .dx-gantt-tPrg::before {
+          left: 0;
+          border-right-color: transparent;
+          border-bottom-color: transparent;
+        }
+
+        &:not(.dx-gantt-noPrg) .dx-gantt-tPrg::before {
+          border-left-color: $gantt-task-progress-background-color;
+          border-top-color: $gantt-task-progress-background-color;
+        }
+
+        &::after,
+        &.dx-gantt-cmpl .dx-gantt-tPrg::after {
+          right: 0;
+          border-left-color: transparent;
+          border-bottom-color: transparent;
+        }
+
+        &.dx-gantt-cmpl::after {
+          border-right-color: $gantt-task-progress-background-color;
+          border-top-color: $gantt-task-progress-background-color;
+        }
+
+        &.dx-gantt-cmpl .dx-gantt-tPrg::after {
+          border-right-color: $gantt-parent-task-background-color;
+          border-top-color: $gantt-parent-task-background-color;
+        }
+
+        .dx-gantt-task-edit-frame {
+          height: calc(#{$gantt-task-height} - 2px);
+        }
+      }
+    }
+
+    .dx-gantt-titleIn {
+      color: $gantt-task-color;
+      padding: 0 $gantt-task-title-padding-left;
+    }
+  }
+
+  .dx-gantt-taskRes {
+    height: $gantt-task-height;
+    line-height: $gantt-task-height;
+    color: $gantt-task-color;
+    background-color: $gantt-task-background-color;
+    border-radius: $base-border-radius;
+    margin-left: $gantt-task-margin-left;
+    padding-left: $gantt-task-padding-left;
+    padding-right: $gantt-task-padding-right;
+  }
+
+  .dx-gantt-titleOut {
+    padding-right: $gantt-title-padding-right;
+  }
+
+  .dx-gantt-milestone {
+    background-color: $gantt-text-color;
+    width: $gantt-milestone-size;
+    height: $gantt-milestone-size;
+  }
+
+  .dx-gantt-task-edit-wrapper {
+    padding-top: $gantt-task-wrapper-padding-top;
+    padding-left: $gantt-task-edit-wrapper-padding-left;
+
+    .dx-gantt-task-edit-frame {
+      height: 100%;
+      border: $gantt-task-edit-frame-border;
+      border-color: $gantt-accent-border-color;
+      border-radius: $base-border-radius;
+
+      .dx-gantt-task-edit-progress {
+        border-color: transparent transparent $gantt-accent-border-color transparent;
+
+        &::before {
+          width: $gantt-task-edit-progress-width;
+          height: $gantt-task-edit-progress-height;
+          bottom: $gantt-task-edit-progress-bottom;
+          border: $gantt-task-edit-progress-border;
+          border-color: $gantt-accent-border-color;
+        }
+      }
+
+      .dx-gantt-task-edit-progress-status {
+        border-radius: $base-border-radius;
+      }
+    }
+  }
+
+  .dx-gantt-task-edit-wrapper-successor {
+    padding-top: $gantt-task-wrapper-padding-top;
+
+    .dx-gantt-task-edit-frame-successor {
+      height: $gantt-task-height;
+    }
+  }
+
+  .dx-gantt-task-edit-dependency-r,
+  .dx-gantt-task-edit-successor-dependency-r,
+  .dx-gantt-task-edit-dependency-l,
+  .dx-gantt-task-edit-successor-dependency-l {
+    background: $gantt-successor-background-color;
+    border: $gantt-task-edit-successor-dependency-l-border;
+    border-color: $gantt-accent-border-color;
+    width: $gantt-dependency-successor-size;
+    height: $gantt-dependency-successor-size;
+    margin: auto;
+    top: 0;
+    bottom: 0;
+  }
+
+  .dx-gantt-task-edit-dependency-r,
+  .dx-gantt-task-edit-successor-dependency-r {
+    left: calc(-1 * #{$gantt-dependency-successor-size} - 1px);
+  }
+
+  .dx-gantt-task-edit-dependency-l,
+  .dx-gantt-task-edit-successor-dependency-l {
+    right: calc(-1 * #{$gantt-dependency-successor-size} - 1px);
+  }
+
+  .dx-gantt-task-edit-dependency-line {
+    background-color: $gantt-text-color;
+  }
+
+  .dx-gantt-sel {
+    background-color: $datagrid-selection-bg;
+  }
+
+  .dx-gantt-conn-v {
+    border-left-color: $gantt-text-color;
+  }
+
+  .dx-gantt-conn-h {
+    border-top-color: $gantt-text-color;
+  }
+
+  .dx-gantt-arrow {
+    border: $gantt-arrow-border;
+    border-color: $gantt-text-color;
+  }
+
+  .dx-gantt-tm {
+    border-left: $gantt-tm-border-left;
+    border-left-color: $gantt-accent;
+  }
+
+  .dx-gantt-ti {
+    border-left: $gantt-tm-border-left;
+    border-left-color: $gantt-accent;
+    border-right: $gantt-ti-border-right;
+    border-right-color: $gantt-accent;
+    background-color: $gantt-accent-light-bg;
+  }
+
+  .dx-gantt-altRow,
+  .dx-gantt-collapsable-row {
+    background-color: $gantt-collapsable-row-bg;
+  }
+}
+
+@include gantt-icons-mixin($gantt-icon-color);
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_sizes.scss
new file mode 100644
index 000000000000..979545e34863
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gantt/_sizes.scss
@@ -0,0 +1,56 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$gantt-header-item-height: null !default;
+$gantt-task-title-padding-left: null !default;
+$gantt-task-height: null !default;
+$gantt-dependency-successor-size: null !default;
+$gantt-milestone-size: null !default;
+
+$gantt-task-wrapper-padding-top: 0 !default;
+
+@if $size == "default" {
+  $gantt-header-item-height: 57px !default; // dx-offscale: 57px
+  $gantt-task-title-padding-left: ds.$spacing-110 !default;
+  $gantt-task-height: 27px !default; // dx-offscale: 27px
+  $gantt-dependency-successor-size: ds.$spacing-120 !default;
+  $gantt-milestone-size: ds.$spacing-170 !default;
+}
+
+@else if $size == "compact" {
+  $gantt-header-item-height: 51px !default; // dx-offscale: 51px
+  $gantt-task-title-padding-left: ds.$spacing-90 !default;
+  $gantt-task-height: ds.$spacing-200 !default;
+  $gantt-dependency-successor-size: ds.$spacing-100 !default;
+  $gantt-milestone-size: ds.$spacing-140 !default;
+}
+
+
+// Values hoisted from style-file literals (tokenized)
+$gantt-task-progress-notch-border-width: ds.$border-width-40 !default;
+$gantt-toolbar-wrapper-padding: ds.$spacing-50 !default;
+$gantt-si-padding-left: ds.$spacing-160 !default;
+$gantt-si-padding-right: ds.$spacing-160 !default;
+$gantt-title-padding: 0 ds.$spacing-20 !default;
+$gantt-t-bottom: -8px !default; // dx-offscale: -8px
+$gantt-task-margin-left: ds.$spacing-210 !default;
+$gantt-task-padding-left: ds.$spacing-40 !default;
+$gantt-task-padding-right: ds.$spacing-40 !default;
+$gantt-title-padding-right: ds.$spacing-200 !default;
+$gantt-task-edit-wrapper-padding-left: ds.$spacing-10 !default;
+$gantt-task-edit-progress-width: ds.$spacing-120 !default;
+$gantt-task-edit-progress-height: ds.$spacing-60 !default;
+$gantt-task-edit-progress-bottom: -14px !default; // dx-offscale: -14px
+$gantt-root-border: ds.$border-width-10 solid !default;
+$gantt-toolbar-wrapper-border-bottom: ds.$border-width-10 solid !default;
+$gantt-hb-border-top: ds.$border-width-10 solid !default;
+$gantt-vb-border-left: ds.$border-width-10 solid !default;
+$gantt-task-edit-frame-border: ds.$border-width-10 solid !default;
+$gantt-task-edit-progress-border: ds.$border-width-10 solid !default;
+$gantt-task-edit-successor-dependency-l-border: ds.$border-width-10 solid !default;
+$gantt-arrow-border: 5px solid !default; // dx-offscale
+$gantt-tm-border-left: ds.$border-width-10 dashed !default;
+$gantt-ti-border-right: ds.$border-width-10 dashed !default;
+$gantt-toolbar-items-container-min-height: 42px !default; // dx-offscale: 42px
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_colors.scss
new file mode 100644
index 000000000000..ff3c428de5ee
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_colors.scss
@@ -0,0 +1,185 @@
+@use "../colors" as *;
+@use "../button/colors" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$datagrid-base-color: ds.$color-content-neutral-default-rest !default;
+
+/**
+* $name 15. Background color
+* $type color
+*/
+$datagrid-base-background-color: ds.$color-surface-neutral-default-rest !default;
+$datagrid-border-color: ds.$color-border-neutral-default-rest !default;
+
+/**
+* $name 20. Header text color
+* $type color
+*/
+$datagrid-columnchooser-item-color: $datagrid-base-color !default;
+
+/**
+* $name 25. Header text weight
+* $type select
+* $type-values 300|500|700
+*/
+$datagrid-columnchooser-font-weight: 600 !default;
+
+/**
+* $name 35. Draggable header border color
+* $type color
+*/
+$datagrid-drag-header-border-color: rgb(from #{ds.$color-border-primary-default-rest} r g b / 0.5) !default;
+$datagrid-drag-header-shadow-color: ds.$color-shadow-ambient !default;
+$datagrid-drag-header-second-shadow-color: ds.$color-shadow-key !default;
+$datagrid-header-drag-bg: $datagrid-base-background-color !default;
+$header-filter-color: $datagrid-columnchooser-item-color !default;
+
+/**
+* $name 51. Selected row background color
+* $type color
+*/
+$datagrid-selection-bg: $button-default-outlined-hover-bg !default;
+
+/**
+* $name 52. Selected row border color
+* $type color
+*/
+$datagrid-row-selected-border-color: $datagrid-border-color !default;
+
+/**
+* $name 50. Selected row text color
+* $type color
+*/
+$datagrid-row-selected-color: $datagrid-base-color !default;
+
+/**
+* $name 65. Focused row text color
+* $type color
+*/
+$datagrid-row-focused-color: ds.$color-content-neutral-default-rest !default;
+
+/**
+* $name 70. Focused row background color
+* $type color
+*/
+$datagrid-row-focused-bg: ds.$color-surface-primary-subdued-rest !default;
+$datagrid-hover-bg: ds.$color-surface-neutral-default-hovered !default;
+$datagrid-row-hovered-color: ds.$color-content-neutral-default-rest !default;
+
+/**
+* $name 40. Modified data background color
+* $type color
+*/
+$datagrid-cell-modified-border-color: $button-success-text-hover-bg !default;
+$datagrid-cell-removed-border-color: $datagrid-border-color !default;
+$datagrid-row-removed-bg: $datagrid-hover-bg !default;
+$datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default;
+
+/**
+* $name 45. Invalid data faded color
+* $type color
+*/
+$datagrid-row-invalid-faded-border-color: $button-danger-text-hover-bg !default;
+$datagrid-nodata-color: ds.$color-content-neutral-subdued-rest !default;
+
+/**
+* $name 90. Group row text color
+* $type color
+*/
+$datagrid-group-row-color: $datagrid-columnchooser-item-color !default;
+
+/**
+* $name 95. Group row background color
+* $type color
+*/
+$datagrid-group-row-bg: ds.$color-surface-neutral-default-rest !default;
+$datagrid-master-detail-cell-bg: ds.$color-surface-neutral-subdued-rest !default;
+
+/**
+* $name 105. Highlighted text color
+* $type color
+*/
+$datagrid-search-color: ds.$color-content-neutral-default-static-dark-rest !default;
+$datagrid-chevron-icon-color: ds.$color-content-neutral-subdued-rest !default;
+
+/**
+* $name 110. Highlighted text background color
+* $type color
+*/
+$datagrid-search-bg: ds.$color-surface-primary-default-rest !default;
+
+/**
+* $name 115. Error row text color
+* $type color
+*/
+$datagrid-row-error-color: ds.$color-content-neutral-default-static-dark-rest !default;
+
+/**
+* $name 120. Error row background color
+* $type color
+*/
+$datagrid-row-error-bg: ds.$color-surface-danger-default-rest !default;
+$datagrid-link-color: ds.$color-content-primary-default-rest !default;
+
+/**
+* $name 75. Focused cell border color
+* $type color
+*/
+$datagrid-focused-border-color: ds.$color-border-primary-default-rest !default;
+
+/**
+* $name 80. Editor background color
+* $type color
+*/
+$datagrid-editor-bg: transparent !default;
+$datagrid-drop-highlight-bg: ds.$color-surface-primary-default-rest !default;
+$datagrid-drop-highlight-color: ds.$color-content-neutral-default-static-dark-rest !default;
+$datagrid-columnchooser-bg: ds.$color-surface-neutral-default-rest !default;
+$datagrid-columnchooser-item-bg: $datagrid-columnchooser-bg !default;
+
+/**
+* $name 85. Alternate row background color
+* $type color
+*/
+$datagrid-row-alternation-bg: ds.$color-surface-neutral-deep-rest !default;
+
+/**
+* $name 100. Summary item color
+* $type color
+*/
+$datagrid-summary-color: ds.$color-content-neutral-subdued-rest !default;
+$datagrid-columnchooser-message-color: ds.$color-content-neutral-subdued-rest !default;
+$datagrid-summary-bg: $datagrid-base-background-color !default;
+$datagrid-column-separator-bg: ds.$color-surface-primary-default-rest !default;
+$datagrid-filter-row-background-color: ds.$color-surface-neutral-subdued-rest !default;
+$datagrid-active-header-filter-icon-color: ds.$color-content-primary-default-rest !default;
+$datagrid-text-stub-background-image-path: null !default;
+$datagrid-filter-panel-color: ds.$color-content-primary-default-rest !default;
+$datagrid-draggable-column-text-color: ds.$color-content-neutral-subdued-rest !default;
+
+$datagrid-text-link-disabled-opacity: $base-disabled-opacity;
+$datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity;
+
+@if $mode == "light" {
+  $datagrid-text-stub-background-image-path: data-uri('images/widgets/dxdsfluent/color-schemes/light/grid/text-stub.png') !default;
+}
+
+@if $mode == "dark" {
+  $datagrid-text-stub-background-image-path: data-uri('images/widgets/dxdsfluent/color-schemes/dark/grid/text-stub.png') !default;
+}
+
+$header-filter-color-empty: $header-filter-color !default;
+$datagrid-border: 1px solid !default;
+
+:root {
+  --dx-datagrid-row-alternation-bg: #{$datagrid-row-alternation-bg};
+}
+
+// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
+$gridbase-accent: ds.$color-content-primary-default-rest !default;
+$gridbase-border-color: ds.$color-border-neutral-default-rest !default;
+$gridbase-danger: ds.$color-content-danger-default-rest !default;
+$gridbase-icon-color: ds.$color-content-neutral-subdued-rest !default;
+$gridbase-success: ds.$color-content-success-default-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_index.scss
new file mode 100644
index 000000000000..24f2d8ccd9a6
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_index.scss
@@ -0,0 +1,1056 @@
+@use "sass:math";
+@use "sass:color";
+@use "sass:selector";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../dropDownEditor" as *;
+@use "../textEditor" as *;
+@use "../textEditor/sizes" as *;
+@use "../common/mixins" as *;
+@use "../common/sizes" as *;
+@use "../popup/colors" as *;
+@use "../popup/sizes" as *;
+@use "../menu/colors" as *;
+@use "../toolbar/colors" as *;
+@use "../button/mixins" as *;
+@use "../button/sizes" as *;
+@use "../../base/button/mixins" as *;
+@use "../button/colors" as *;
+@use "../validation/colors" as *;
+@use "../typography/sizes" as *;
+
+// adduse
+@use "../scrollable";
+@use "../overlay";
+@use "../pagination";
+@use 'variables' as *;
+@forward 'variables';
+@use 'layout/cell' as *;
+@use "layout/aiChat" as *;
+
+$fluent-grid-base-drag-header-first-shadow: 0 0 1px $datagrid-drag-header-shadow-color;
+$fluent-grid-base-drag-header-second-shadow: 0 1px 3px $datagrid-drag-header-second-shadow-color;
+$fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-height;
+
+@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: $datagrid-border-radius;
+      border-top-right-radius: $datagrid-border-radius;
+    }
+
+    .dx-bordered-bottom-view {
+      border-bottom-left-radius: $datagrid-border-radius;
+      border-bottom-right-radius: $datagrid-border-radius;
+    }
+
+    .dx-menu {
+      background-color: transparent;
+      margin-top: calc((#{$fluent-grid-base-header-height} - #{$fluent-button-height}) / 2);
+      margin-left: $fluent-grid-base-root-margin-left;
+      height: $fluent-button-height;
+
+      .dx-menu-item {
+        .dx-menu-item-content {
+          padding: $fluent-grid-base-menu-item-padding;
+
+          .dx-icon {
+            @include dx-icon-sizing($fluent-grid-base-filter-icon-size);
+
+            margin: $fluent-grid-base-icon-margin;
+          }
+        }
+      }
+    }
+
+    &.dx-filter-menu {
+      .dx-menu-item-content {
+        .dx-icon {
+          @include dx-icon-sizing($fluent-grid-base-filter-icon-size);
+
+          &.dx-icon-filter-operation-default {
+            margin-top: $fluent-grid-base-icon-filter-operation-default-margin-top;
+          }
+        }
+      }
+    }
+
+    .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: $fluent-grid-base-texteditor-input-padding;
+          }
+        }
+      }
+    }
+
+    &.dx-context-menu {
+      .dx-menu-items-container {
+        .dx-icon-context-menu-sort-asc {
+          @include dx-icon(sortuptext);
+          @include dx-icon-sizing(calc(#{$fluent-grid-base-filter-icon-size} - 4px));
+        }
+
+        .dx-icon-context-menu-sort-desc {
+          @include dx-icon(sortdowntext);
+          @include dx-icon-sizing(calc(#{$fluent-grid-base-filter-icon-size} - 4px));
+        }
+
+        .dx-icon-context-menu-sort-none {
+          @include dx-icon-sizing(calc(#{$fluent-grid-base-filter-icon-size} - 4px));
+        }
+
+        .dx-icon-fix-column {
+          @include dx-icon(fixcolumn);
+          @include dx-icon-sizing(calc(#{$fluent-grid-base-filter-icon-size} - 4px));
+        }
+
+        .dx-icon-fix-column-left {
+          @include dx-icon(fixcolumnleft);
+          @include dx-icon-sizing(calc(#{$fluent-grid-base-filter-icon-size} - 4px));
+        }
+
+        .dx-icon-fix-column-right {
+          @include dx-icon(fixcolumnright);
+          @include dx-icon-sizing(calc(#{$fluent-grid-base-filter-icon-size} - 4px));
+        }
+
+        .dx-icon-stick-column {
+          @include dx-icon(stickcolumn);
+          @include dx-icon-sizing(calc(#{$fluent-grid-base-filter-icon-size} - 4px));
+        }
+
+        .dx-icon-unfix-column {
+          @include dx-icon(unfixcolumn);
+          @include dx-icon-sizing(calc(#{$fluent-grid-base-filter-icon-size} - 4px));
+        }
+      }
+    }
+
+    .dx-sort-up,
+    .dx-sort-down,
+    .dx-header-filter {
+      @include dx-icon-sizing($fluent-grid-base-header-icon-size, $fluent-grid-base-header-icon-container-size);
+    }
+
+    .dx-header-filter:not(.dx-header-filter-empty) {
+      color: $datagrid-active-header-filter-icon-color;
+    }
+
+    .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: $fluent-grid-base-header-line-height;
+
+      .dx-sort-index-icon {
+        padding-right: $fluent-grid-base-sort-index-icon-padding-right;
+        margin-left: $fluent-grid-base-sort-index-icon-margin-left;
+        font-size: calc(#{$fluent-grid-base-header-cell-font-size} - 1px);
+        position: relative;
+        bottom: $fluent-grid-base-sort-index-icon-bottom;
+      }
+
+      > div {
+        @include dx-icon-sizing($fluent-grid-base-header-icon-size, $fluent-grid-base-header-icon-container-size);
+      }
+
+      > span {
+        margin-left: $fluent-grid-base-sort-index-icon-margin-left-219;
+      }
+    }
+
+    .dx-placeholder::before {
+      font-size: $fluent-grid-base-cell-font-size;
+    }
+  }
+
+  .dx-#{$widget-name} {
+    line-height: inherit;
+
+    .dx-row-alt {
+      &.dx-row:not(.dx-row-removed) {
+        border-bottom-color: transparent;
+      }
+
+      // T838734
+      border-top: $fluent-grid-base-row-removed-border-top;
+      border-top-color: $datagrid-row-alternation-bg;
+      border-bottom: $fluent-grid-base-row-removed-border-bottom;
+      border-bottom-color: $datagrid-row-alternation-bg;
+    }
+
+    .dx-link {
+      color: $datagrid-link-color;
+    }
+
+    .dx-error-row {
+      .dx-closebutton {
+        float: right;
+        margin: calc(#{$fluent-grid-base-cell-vertical-padding} + 2px);
+
+        @include dx-icon(close);
+        @include dx-icon-sizing(14px);
+      }
+
+      .dx-error-message {
+        padding: $fluent-grid-base-cell-vertical-padding;
+        padding-right: $fluent-grid-base-error-message-padding-right;
+      }
+    }
+
+    .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 $fluent-command-edit-text-margin;
+            min-width: $fluent-grid-base-link-icon-min-width;
+          }
+
+          &.dx-command-edit-with-icons {
+            .dx-link {
+              @include dx-icon-sizing($fluent-command-edit-icon-size);
+
+              margin: 0 $fluent-command-edit-icon-margin;
+              vertical-align: middle;
+            }
+
+            .dx-link:not(.dx-link-icon) {
+              width: auto;
+            }
+          }
+
+          .dx-state-disabled {
+            &.dx-link {
+              opacity: $datagrid-text-link-disabled-opacity;
+            }
+
+            &.dx-link-icon {
+              opacity: $datagrid-icon-link-disabled-opacity;
+            }
+          }
+        }
+      }
+    }
+
+    .dx-#{$widget-name}-rowsview .dx-virtual-row > td[style*="text-align: right"]:before {
+      background-position-y: 49px;
+    }
+
+    .dx-command-drag {
+      .dx-#{$widget-name}-drag-icon {
+        @include dx-icon-sizing($fluent-base-icon-size);
+      }
+    }
+
+    .dx-#{$widget-name}-drop-highlight {
+      & > td {
+        .dx-header-filter {
+          color: $datagrid-drop-highlight-color;
+        }
+
+        .dx-checkbox {
+          .dx-checkbox-icon {
+            background-color: $datagrid-drop-highlight-color;
+            color: $datagrid-drop-highlight-bg;
+          }
+        }
+      }
+    }
+  }
+
+  .dx-#{$widget-name}-edit-popup {
+    .dx-popup-content {
+      padding: 0;
+    }
+
+    .dx-error-message {
+      padding: $fluent-grid-base-cell-padding;
+    }
+  }
+
+  .dx-#{$widget-name}-edit-popup-form {
+    padding: $fluent-popup-content-vertical-padding $fluent-popup-content-padding;
+  }
+
+  .dx-#{$widget-name}-headers,
+  .dx-#{$widget-name}-rowsview {
+    .dx-texteditor-input {
+      min-height: $fluent-grid-base-header-line-height;
+    }
+
+    .dx-lookup {
+      height: auto;
+
+      .dx-lookup-field {
+        padding-left: $fluent-grid-base-cell-horizontal-padding;
+        padding-top: $fluent-grid-base-cell-vertical-padding;
+        padding-bottom: $fluent-grid-base-cell-vertical-padding;
+        font-size: $fluent-grid-base-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: $fluent-dropdowneditor-invalid-badge-size;
+          }
+
+          &.dx-rtl .dx-texteditor-input {
+            padding-right: 0;
+            padding-left: $fluent-dropdowneditor-invalid-badge-size;
+          }
+        }
+      }
+
+      &.dx-invalid,
+      &.dx-valid,
+      &.dx-validation-pending {
+        .dx-texteditor-input {
+          padding-right: $fluent-dropdowneditor-invalid-badge-size;
+        }
+
+        &.dx-rtl .dx-texteditor-input {
+          padding-right: 0;
+          padding-left: $fluent-dropdowneditor-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: $datagrid-editor-bg;
+        box-shadow: none;
+      }
+
+      &:not(.dx-tagbox) .dx-texteditor-input {
+        background: $datagrid-editor-bg;
+        font-size: $fluent-grid-base-cell-font-size;
+        height: $fluent-grid-base-cell-height;
+        line-height: $fluent-grid-base-cell-height;
+        margin-top: 0;
+      }
+
+      &:not(.dx-tagbox):not(.dx-colorbox) .dx-texteditor-input {
+        padding: 0 $fluent-grid-base-cell-horizontal-padding;
+      }
+
+      .dx-placeholder::before {
+        padding-right: $fluent-grid-base-cell-horizontal-padding;
+        padding-left: $fluent-grid-base-cell-horizontal-padding;
+      }
+
+      &.dx-validation-pending {
+        .dx-texteditor-input-container {
+          .dx-texteditor-input {
+            padding-top: 0;
+            padding-bottom: 0;
+          }
+        }
+      }
+
+      &:not(.dx-tagbox) .dx-tag-container {
+        min-height: $fluent-grid-base-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: $datagrid-editor-bg;
+    }
+
+    &.dx-focused .dx-dropdowneditor-icon {
+      border-radius: 0;
+    }
+
+    &.dx-editor-inline-block:not(.dx-command-select) {
+      &::before {
+        padding-top: $fluent-grid-base-cell-vertical-padding;
+        padding-bottom: $fluent-grid-base-cell-vertical-padding;
+      }
+    }
+  }
+
+  .dx-#{$widget-name}-column-chooser-list {
+    .dx-empty-message {
+      color: $datagrid-columnchooser-message-color;
+      padding: 0 $fluent-grid-base-column-chooser-horizontal-padding;
+    }
+  }
+
+  .dx-#{$widget-name}-column-chooser {
+    @include dx-base-typography();
+
+    &.dx-#{$widget-name}-column-chooser-mode-drag {
+      .dx-popup-content {
+        padding: $fluent-grid-base-column-chooser-paddings;
+
+        .dx-treeview-search {
+          margin-bottom: $fluent-grid-base-treeview-search-margin;
+        }
+
+        .dx-treeview-node {
+          padding-left: $fluent-grid-base-treeview-node-padding-left;
+        }
+      }
+    }
+
+    &.dx-#{$widget-name}-column-chooser-mode-select {
+      .dx-popup-content {
+        padding: $fluent-grid-base-column-chooser-paddings;
+      }
+
+      .dx-#{$widget-name}-column-chooser-plain, .dx-#{$widget-name}-column-chooser-list {
+        .dx-treeview-select-all-item {
+          padding-inline-start: $fluent-grid-base-treeview-select-all-item-offset;
+        }
+      }
+    }
+
+    .dx-overlay-content {
+      background-color: $datagrid-columnchooser-bg;
+
+      .dx-popup-title {
+        background-color: transparent;
+        border-bottom: $fluent-grid-base-popup-title-border-bottom;
+        border-bottom-color: $popup-title-border-color;
+
+        .dx-toolbar-label {
+          font-size: $fluent-m-font-size;
+        }
+      }
+
+      .dx-popup-content {
+        .dx-column-chooser-item {
+          margin: $fluent-grid-base-column-chooser-list-item-margin;
+          background-color: $datagrid-columnchooser-item-bg;
+          color: $datagrid-columnchooser-item-color;
+          font-weight: $datagrid-columnchooser-font-weight;
+          font-size: $fluent-grid-base-header-cell-font-size;
+          padding: $fluent-grid-base-cell-vertical-padding;
+          line-height: $fluent-grid-base-header-line-height;
+          box-shadow: $fluent-grid-base-drag-header-first-shadow, $fluent-grid-base-drag-header-second-shadow;
+        }
+      }
+    }
+  }
+
+  .dx-#{$widget-name}-drag-header {
+    border-color: $datagrid-drag-header-border-color;
+    box-shadow: $fluent-grid-base-drag-header-first-shadow, $fluent-grid-base-drag-header-second-shadow;
+    color: $datagrid-columnchooser-item-color;
+    font-weight: $datagrid-columnchooser-font-weight;
+    padding: $fluent-grid-base-header-cell-vertical-padding;
+    background-color: $datagrid-header-drag-bg;
+    line-height: $fluent-grid-base-header-line-height;
+    font-size: $fluent-grid-base-header-cell-font-size;
+  }
+
+  .dx-#{$widget-name}-columns-separator {
+    background-color: $datagrid-column-separator-bg;
+  }
+
+  .dx-#{$widget-name}-columns-separator-transparent {
+    background-color: transparent;
+  }
+
+  .dx-#{$widget-name}-focus-overlay {
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      height: $fluent-grid-base-column-chooser-item-height;
+      background-color: $datagrid-focused-border-color;
+      left: 0;
+      right: $fluent-grid-base-after-right;
+    }
+
+    &.dx-focused-cell-modified::after {
+      background-color: $button-success-hover-bg;
+    }
+
+    &.dx-focused-cell-invalid::after {
+      background-color: $button-danger-hover-bg;
+    }
+  }
+
+  .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: $datagrid-hover-bg;
+          color: $datagrid-row-hovered-color;
+        }
+      }
+    }
+  }
+
+  .dx-#{$widget-name}-headers {
+    color: $datagrid-columnchooser-item-color;
+    touch-action: pinch-zoom;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      pointer-events: none;
+      border-bottom: $datagrid-border;
+      border-bottom-color: $datagrid-border-color;
+    }
+
+    .dx-#{$widget-name}-table {
+      .dx-#{$widget-name}-borders & {
+        border-bottom-width: $fluent-grid-base-texteditor-input-border-bottom-width;
+      }
+
+      .dx-row {
+        > td {
+          .dx-sort {
+            color: $header-filter-color-empty;
+          }
+
+          &:not([class*="dx-command"], .dx-editor-cell, .dx-#{$widget-name}-group-space):hover {
+            .dx-#{$widget-name}-text-content {
+              color: $datagrid-base-color;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .dx-#{$widget-name}-filter-row {
+    background-color: $datagrid-filter-row-background-color;
+
+    .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: $menu-color;
+      }
+    }
+
+    .dx-filter-modified {
+      background-color: $datagrid-cell-modified-border-color;
+    }
+
+    td .dx-editor-container .dx-filter-range-content {
+      padding:
+        $fluent-grid-base-cell-vertical-padding
+        $fluent-grid-base-cell-horizontal-padding
+        $fluent-grid-base-cell-vertical-padding
+        $fluent-grid-base-texteditor-input-padding;
+    }
+  }
+
+  .dx-#{$widget-name}-filter-range-overlay {
+    .dx-overlay-content {
+      overflow: inherit;
+      background-color: $datagrid-filter-row-background-color;
+      box-shadow: $fluent-grid-base-drag-header-first-shadow, $fluent-grid-base-drag-header-second-shadow;
+
+      .dx-texteditor {
+        &.dx-state-focused::after,
+        &.dx-state-hover::after {
+          top: auto;
+          bottom: 0;
+        }
+
+        .dx-texteditor-input {
+          font-size: $fluent-grid-base-cell-font-size;
+          height: calc(#{$fluent-grid-base-cell-height} + 1px);
+          padding-right: $fluent-filter-row-between-editor-padding;
+          padding-left: $fluent-filter-row-between-editor-padding;
+        }
+
+        .dx-placeholder::before {
+          padding-left: $fluent-filter-row-between-editor-padding;
+        }
+      }
+
+      .dx-invalid-message.dx-overlay-wrapper {
+        display: none;
+      }
+    }
+  }
+
+  .dx-#{$widget-name}-header-panel {
+    border-bottom: $datagrid-border;
+    border-bottom-color: $datagrid-border-color;
+    padding: $fluent-grid-base-header-panel-padding;
+
+    .dx-toolbar-text-auto-hide .dx-button.dx-button-has-icon {
+      border-radius: $fluent-base-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($fluent-base-icon-size);
+    }
+  }
+
+  .dx-#{$widget-name}-cancel-button {
+    .dx-icon-edit-button-cancel {
+      @include dx-icon(revert);
+      @include dx-icon-sizing($fluent-base-icon-size);
+    }
+  }
+
+  .dx-#{$widget-name}-save-button {
+    .dx-icon-edit-button-save {
+      @include dx-icon(save);
+      @include dx-icon-sizing($fluent-base-icon-size);
+    }
+  }
+
+  .dx-apply-button {
+    .dx-icon-apply-filter {
+      @include dx-icon(filter);
+      @include dx-icon-sizing($fluent-base-icon-size);
+    }
+  }
+
+  .dx-datagrid-export-menu {
+    .dx-menu-item .dx-icon-xlsxfile {
+      @include dx-icon-sizing($fluent-base-icon-size);
+    }
+
+    .dx-menu-item .dx-icon-exportselected {
+      @include dx-icon-sizing($fluent-base-icon-size);
+    }
+  }
+
+  .dx-#{$widget-name}-adaptive-more {
+    vertical-align: middle;
+
+    @include dx-icon-sizing($fluent-base-icon-size);
+
+    color: $gridbase-icon-color;
+  }
+
+  .dx-row.dx-row-focused {
+    .dx-#{$widget-name}-adaptive-more {
+      color: inherit;
+    }
+  }
+
+  .dx-#{$widget-name}-rowsview {
+    border-top: $fluent-grid-base-row-focused-border-top;
+    border-top-color: $fluent-grid-base-border-color;
+
+    .dx-#{$widget-name}-headers + &,
+    &.dx-#{$widget-name}-after-headers {
+      border-top: none;
+    }
+
+    .dx-row {
+      border-top: $fluent-grid-base-row-border;
+      border-bottom: $fluent-grid-base-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: $datagrid-row-invalid-faded-border-color;
+          }
+        }
+      }
+    }
+
+    .dx-overlay-wrapper.dx-invalid-message {
+      .dx-overlay-content {
+        padding: $fluent-grid-base-overlay-content-padding;
+        background-color: $validation-message-background-color;
+        color: $validation-message-color;
+      }
+    }
+
+    .dx-adaptive-detail-row {
+      .dx-field-item-label {
+        padding-top: 0;
+      }
+
+      .dx-field-item-content {
+        line-height: $fluent-grid-base-adaptive-column-height;
+        min-height: $fluent-grid-base-adaptive-column-height;
+        font-size: $fluent-grid-base-cell-font-size;
+
+        &.dx-focused {
+          padding: 0;
+        }
+      }
+
+      .dx-texteditor-input {
+        font-size: $fluent-grid-base-cell-font-size;
+        height: $fluent-grid-base-adaptive-column-height;
+        line-height: $fluent-grid-base-adaptive-column-height;
+      }
+
+      .dx-texteditor::after,
+      .dx-texteditor::before {
+        content: none;
+      }
+
+      .dx-texteditor.dx-editor-outlined {
+        box-shadow: none;
+      }
+    }
+
+    .dx-item-modified {
+      background-color: $datagrid-cell-modified-border-color;
+    }
+
+    .dx-row-focused {
+      &.dx-data-row {
+        & .dx-command-edit .dx-link {
+          color: $datagrid-row-focused-color;
+        }
+
+        & > 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: $datagrid-row-focused-color;
+          }
+        }
+      }
+
+      &.dx-group-row {
+        background-color: $datagrid-row-focused-bg;
+        color: $datagrid-row-focused-color;
+
+        & .dx-#{$widget-name}-group-opened,
+        & .dx-#{$widget-name}-group-closed {
+          color: $datagrid-row-focused-color;
+        }
+      }
+    }
+
+    &.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: $fluent-invalid-badge-size;
+          background-color: transparent;
+
+          @at-root #{selector.append(".dx-rtl", &)},
+          .dx-rtl & {
+            left: $fluent-invalid-badge-size;
+          }
+        }
+      }
+    }
+
+    &.dx-#{$widget-name}-sticky-columns {
+      .dx-row.dx-edit-row > td:not(.dx-master-detail-cell) .dx-texteditor-input {
+        height: calc(#{$fluent-grid-base-cell-height} - 2px);
+        line-height: calc(#{$fluent-grid-base-cell-height} - 2px);
+      }
+
+      .dx-master-detail-row > .dx-master-detail-cell {
+        > .dx-#{$widget-name}-master-detail-container {
+          padding: $grid-masterdetail-padding;
+        }
+      }
+    }
+  }
+
+  .dx-#{$widget-name}-search-text {
+    color: $datagrid-search-color;
+    background-color: $datagrid-search-bg;
+  }
+
+  .dx-#{$widget-name}-nodata {
+    color: $datagrid-nodata-color;
+    font-size: $fluent-grid-base-nodata-font-size;
+  }
+
+  .dx-#{$widget-name}-bottom-load-panel {
+    border-top: $datagrid-border;
+    border-top-color: $datagrid-border-color;
+    background-color: $datagrid-base-background-color;
+  }
+
+  .dx-#{$widget-name}-summary-item {
+    color: $datagrid-summary-color;
+  }
+
+  .dx-#{$widget-name}-total-footer {
+    border-bottom: $datagrid-border;
+    border-bottom-color: $datagrid-border-color;
+    border-top: $datagrid-border;
+    border-top-color: $datagrid-border-color;
+
+    > .dx-#{$widget-name}-content {
+      padding: 0;
+    }
+  }
+
+  .dx-#{$widget-name}-revert-tooltip {
+    .dx-overlay-content {
+      background-color: transparent;
+      min-width: inherit;
+    }
+
+    .dx-revert-button {
+      @include dx-button-sizing(2px, 2px, 2px, 18px, 0);
+
+      border-radius: $button-border-radius;
+
+      @include dx-button-styling-variant(
+        $button-danger-bg,
+        $button-danger-color,
+        $button-danger-color,
+        $button-danger-color,
+        $button-danger-bg,
+        $button-danger-bg,
+        $button-danger-bg,
+        $button-danger-color
+      );
+
+      margin: $fluent-grid-base-revert-button-margin;
+      height: $fluent-grid-base-cell-height;
+      box-shadow: none;
+      min-width: inherit;
+
+      &.dx-button-has-icon:not(.dx-button-has-text) {
+        border-radius: $fluent-grid-base-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: $fluent-grid-base-icon-margin;
+          }
+        }
+      }
+    }
+
+    .dx-#{$widget-name}-rowsview {
+      &.dx-scrollable-scrollbars-alwaysvisible.dx-scrollable-both .dx-scrollable-wrapper .dx-scrollable-container .dx-scrollable-content {
+        padding-left: 0;
+      }
+    }
+  }
+
+  .dx-header-filter-menu {
+    .dx-popup-content {
+      padding: $fluent-grid-base-content-padding;
+    }
+  }
+
+  .dx-#{$widget-name}-filter-panel {
+    background-color: $datagrid-base-background-color;
+    padding: $fluent-grid-base-content-padding-993;
+
+    .dx-#{$widget-name}-filter-panel-text,
+    .dx-#{$widget-name}-filter-panel-clear-filter {
+      color: $datagrid-filter-panel-color;
+      font-size: $fluent-grid-base-cell-font-size;
+      line-height: $fluent-grid-base-checkbox-size;
+    }
+
+    .dx-icon-filter {
+      color: $datagrid-filter-panel-color;
+
+      @include dx-icon-sizing($fluent-filter-panel-icon-size);
+    }
+  }
+
+  .dx-adaptive-item-text {
+    padding-left: $fluent-filled-texteditor-input-horizontal-padding;
+    padding-right: $fluent-filled-texteditor-input-horizontal-padding;
+    &.dx-cell-modified,
+    &.dx-#{$widget-name}-invalid {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+  }
+
+  .dx-#{$widget-name}-dragview {
+    border-radius: $datagrid-border-radius;
+
+    .dx-#{$widget-name}-borders {
+      border-radius: $datagrid-border-radius;
+    }
+  }
+
+  .dx-#{$widget-name}-sticky-columns .dx-#{$widget-name}-draggable-column {
+    opacity: 1;
+    color: $datagrid-draggable-column-text-color;
+  }
+
+  .dx-command-ai-header-content {
+    max-width: calc(100% - ($fluent-button-height - $fluent-grid-base-cell-horizontal-padding + $fluent-grid-base-command-ai-header-button-offset));
+
+    .dx-#{$widget-name}-text-content {
+      padding-left: $fluent-grid-base-command-ai-text-content-padding;
+    }
+
+    .dx-icon-chatsparkleoutline {
+      @include dx-icon-sizing($fluent-grid-base-command-ai-chatsparkleoutline-icon-size);
+    }
+  }
+
+  .dx-command-ai-header-button {
+    left: auto;
+    right: $fluent-grid-base-command-ai-header-button-offset;
+  }
+
+  td[style*="text-align: right"] .dx-command-ai-header-button {
+    left: $fluent-grid-base-command-ai-header-button-offset;
+    right: auto;
+  }
+
+  .dx-ai-prompt-editor__progressbar .dx-progressbar-animating-container {
+    height: $fluent-grid-base-ai-prompt-editor-progressbar-height;
+    border-radius: 0;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_sizes.scss
new file mode 100644
index 000000000000..05eb932b81d9
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_sizes.scss
@@ -0,0 +1,153 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+/**
+* $name 15. Border radius
+* $type text
+*/
+$datagrid-border-radius: 0 !default;
+
+$fluent-grid-base-cell-height: null !default;
+$fluent-grid-base-header-height: null !default;
+$fluent-grid-base-cell-line-height: null !default;
+$fluent-grid-base-cell-font-size: null !default;
+$fluent-grid-base-checkbox-size: null !default;
+$fluent-grid-base-cell-horizontal-padding: null !default;
+$fluent-grid-base-texteditor-input-padding: null !default;
+$fluent-grid-base-menu-item-padding: null !default;
+$fluent-grid-base-column-chooser-horizontal-padding: null !default;
+$fluent-grid-base-column-chooser-paddings: null !default;
+$fluent-grid-base-header-panel-padding: null !default;
+$fluent-grid-base-grouppanel-item-margin: null !default;
+$fluent-grid-base-command-edit-column-width: null !default;
+$fluent-grid-base-command-edit-column-with-icons-width: null !default;
+$fluent-grid-base-adaptive-column-height: null !default;
+$fluent-grid-base-treeview-search-margin: null !default;
+$fluent-grid-base-nodata-font-size: null !default;
+$fluent-filter-row-between-editor-padding: null !default;
+$fluent-command-column-additional-right-margin: null !default;
+$fluent-grid-base-treeview-select-all-item-offset: null !default;
+
+$fluent-grid-base-header-line-height: ds.$line-height-180 !default; // dx-no-semantic-role: 180 is off the line-height-role scale
+$fluent-grid-base-header-icon-size: null !default;
+$fluent-grid-base-header-icon-container-size: ds.$spacing-200 !default;
+$fluent-grid-base-column-chooser-item-margin: ds.$spacing-80 !default;
+$fluent-command-edit-icon-margin: ds.$spacing-40 !default;
+$fluent-command-edit-text-margin: ds.$spacing-20 !default;
+
+$fluent-command-edit-icon-size: null !default;
+$fluent-filter-panel-icon-size: null !default;
+
+$fluent-grid-base-filter-icon-size: $fluent-button-icon-size !default;
+$fluent-grid-base-command-ai-chatsparkleoutline-icon-size: null !default;
+$fluent-grid-base-command-ai-text-content-padding: null !default;
+$fluent-grid-base-command-ai-header-button-offset: null !default;
+$fluent-grid-base-ai-prompt-editor-progressbar-height: ds.$spacing-40 !default;
+
+@if $size == "default" {
+  $fluent-grid-base-cell-height: ds.$spacing-480 !default;
+  $fluent-grid-base-header-height: ds.$spacing-480 !default;
+  $fluent-grid-base-cell-line-height: ds.$line-height-base-md !default;
+  $fluent-grid-base-cell-font-size: ds.$font-size-base-md !default;
+
+  $fluent-grid-base-checkbox-size: ds.$spacing-180 !default;
+  $fluent-grid-base-cell-horizontal-padding: ds.$spacing-160 !default;
+
+  $fluent-grid-base-texteditor-input-padding: ds.$spacing-400 !default;
+  $fluent-grid-base-menu-item-padding: ds.$spacing-110 ds.$spacing-40 !default;
+  $fluent-grid-base-column-chooser-horizontal-padding: ds.$spacing-240 !default;
+  $fluent-grid-base-column-chooser-paddings: ds.$spacing-160 $fluent-grid-base-column-chooser-horizontal-padding ds.$spacing-90 !default;
+  $fluent-grid-base-header-panel-padding: ds.$spacing-80 0 !default;
+  $fluent-grid-base-grouppanel-item-margin: ds.$spacing-60 !default;
+
+  $fluent-grid-base-command-edit-column-width: 115px !default; // dx-offscale: 115px
+  $fluent-grid-base-command-edit-column-with-icons-width: 93px !default; // dx-offscale: 93px
+  $fluent-grid-base-adaptive-column-height: ds.$spacing-400 !default;
+  $fluent-grid-base-treeview-search-margin: ds.$spacing-100 !default;
+  $fluent-grid-base-nodata-font-size: ds.$spacing-170 !default;
+
+  $fluent-filter-row-between-editor-padding: ds.$spacing-120 !default;
+  $fluent-command-column-additional-right-margin: 0 !default;
+
+  $fluent-grid-base-treeview-select-all-item-offset: ds.$spacing-340 !default;
+
+  $fluent-grid-base-header-icon-size: ds.$spacing-200 !default;
+  $fluent-command-edit-icon-size: ds.$spacing-200 !default;
+  $fluent-filter-panel-icon-size: ds.$spacing-200 !default;
+  $fluent-grid-base-command-ai-chatsparkleoutline-icon-size: ds.$spacing-200 !default;
+  $fluent-grid-base-command-ai-text-content-padding: calc(#{$fluent-grid-base-command-ai-chatsparkleoutline-icon-size} + 8px) !default;
+  $fluent-grid-base-command-ai-header-button-offset: ds.$spacing-80 !default;
+}
+
+@else if $size == "compact" {
+  $fluent-grid-base-cell-height: ds.$spacing-360 !default;
+  $fluent-grid-base-header-height: ds.$spacing-360 !default;
+  $fluent-grid-base-cell-line-height: ds.$line-height-base-sm !default;
+  $fluent-grid-base-cell-font-size: ds.$font-size-base-sm !default;
+
+  $fluent-grid-base-checkbox-size: ds.$spacing-160 !default;
+  $fluent-grid-base-cell-horizontal-padding: ds.$spacing-110 !default;
+
+  $fluent-grid-base-texteditor-input-padding: ds.$spacing-360 !default;
+  $fluent-grid-base-menu-item-padding: ds.$spacing-80 ds.$spacing-40 !default;
+  $fluent-grid-base-column-chooser-horizontal-padding: ds.$spacing-80 !default;
+  $fluent-grid-base-column-chooser-paddings: ds.$spacing-80 $fluent-grid-base-column-chooser-horizontal-padding ds.$spacing-80 !default;
+  $fluent-grid-base-header-panel-padding: ds.$spacing-60 0 !default;
+  $fluent-grid-base-grouppanel-item-margin: ds.$spacing-60 !default;
+
+  $fluent-grid-base-command-edit-column-width: 105px !default; // dx-offscale: 105px
+  $fluent-grid-base-command-edit-column-with-icons-width: ds.$spacing-800 !default;
+  $fluent-grid-base-adaptive-column-height: ds.$spacing-260 !default;
+  $fluent-grid-base-treeview-search-margin: ds.$spacing-100 !default;
+  $fluent-grid-base-nodata-font-size: ds.$font-size-base-md !default;
+
+  $fluent-filter-row-between-editor-padding: ds.$spacing-80 !default;
+  $fluent-command-column-additional-right-margin: ds.$spacing-20 !default;
+
+  $fluent-grid-base-treeview-select-all-item-offset: ds.$spacing-280 !default;
+
+  $fluent-grid-base-header-icon-size: ds.$spacing-160 !default;
+  $fluent-command-edit-icon-size: ds.$spacing-160 !default;
+  $fluent-filter-panel-icon-size: ds.$spacing-160 !default;
+  $fluent-grid-base-command-ai-chatsparkleoutline-icon-size: ds.$spacing-160 !default;
+  $fluent-grid-base-command-ai-text-content-padding: calc(#{$fluent-grid-base-command-ai-chatsparkleoutline-icon-size} + 6px) !default;
+  $fluent-grid-base-command-ai-header-button-offset: ds.$spacing-60 !default;
+}
+
+$fluent-grid-base-header-cell-font-size: $fluent-grid-base-cell-font-size !default;
+
+// Values hoisted from style-file literals (tokenized)
+$fluent-grid-base-icon-button-border-radius: ds.$border-radius-20 !default;
+$fluent-grid-base-root-margin-left: ds.$spacing-50 !important !default;
+$fluent-grid-base-icon-margin: 0 ds.$spacing-30 !default;
+$fluent-grid-base-icon-filter-operation-default-margin-top: ds.$spacing-20 !default;
+$fluent-grid-base-sort-index-icon-padding-right: ds.$spacing-40 !default;
+$fluent-grid-base-sort-index-icon-margin-left: -1px !default; // dx-offscale: -1px
+$fluent-grid-base-sort-index-icon-bottom: ds.$spacing-10 !default;
+$fluent-grid-base-sort-index-icon-margin-left-219: ds.$spacing-40 !default;
+$fluent-grid-base-error-message-padding-right: 35px !default; // dx-offscale: 35px
+$fluent-grid-base-treeview-node-padding-left: ds.$spacing-200 !default;
+$fluent-grid-base-column-chooser-list-item-margin: ds.$spacing-20 ds.$spacing-20 $fluent-grid-base-column-chooser-item-margin ds.$spacing-20 !default;
+$fluent-grid-base-column-chooser-item-height: ds.$spacing-20 !default;
+$fluent-grid-base-after-right: ds.$spacing-10 !default;
+$fluent-grid-base-overlay-content-padding: ds.$spacing-90 ds.$spacing-170 ds.$spacing-90 !default;
+$fluent-grid-base-revert-button-margin: 0 0 0 ds.$spacing-10 !default;
+$fluent-grid-base-content-padding: ds.$spacing-80 ds.$spacing-80 0 ds.$spacing-80 !default;
+$fluent-grid-base-content-padding-993: ds.$spacing-180 $fluent-grid-base-cell-horizontal-padding !default;
+$fluent-grid-base-header-row-padding-top: ds.$spacing-120 !default;
+$fluent-grid-base-header-row-padding-bottom: ds.$spacing-120 !default;
+$fluent-grid-base-validation-pending-padding: 0 ds.$spacing-40 0 ds.$spacing-80 !default;
+$fluent-grid-base-row-removed-border-top: ds.$border-width-10 solid !default;
+$fluent-grid-base-row-removed-border-bottom: ds.$border-width-10 solid !default;
+$fluent-grid-base-popup-title-border-bottom: ds.$border-width-10 solid !default;
+$fluent-grid-base-row-focused-border-top: ds.$border-width-10 solid !default;
+$fluent-grid-base-row-lines-border-top: ds.$border-width-10 solid !default;
+$fluent-grid-base-row-lines-border-bottom: ds.$border-width-10 solid !default;
+$fluent-grid-base-row-lines-border-left: ds.$border-width-10 solid !default;
+$fluent-grid-base-pointer-events-none-border-right: ds.$border-width-10 solid !default;
+$fluent-grid-base-border-hidden: ds.$border-width-10 solid transparent !default;
+$fluent-grid-base-row-border: ds.$border-width-10 solid transparent !default;
+$fluent-grid-base-link-icon-min-width: ds.$spacing-200 !default;
+$fluent-grid-base-texteditor-input-border-bottom-width: ds.$border-width-10 !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_variables.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_variables.scss
new file mode 100644
index 000000000000..7efcfb4d27ba
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/_variables.scss
@@ -0,0 +1,10 @@
+@use "sass:math";
+@use "colors" as *;
+@use "sizes" as *;
+
+$fluent-grid-base-border-color: $datagrid-border-color;
+$fluent-grid-base-cell-vertical-padding: calc((#{$fluent-grid-base-cell-height} - #{$fluent-grid-base-cell-line-height}) / 2);
+$fluent-grid-base-cell-padding: $fluent-grid-base-cell-vertical-padding $fluent-grid-base-cell-horizontal-padding;
+$fluent-grid-base-header-cell-vertical-padding: calc((#{$fluent-grid-base-header-height} - #{$fluent-grid-base-header-line-height}) / 2);
+$fluent-grid-base-command-select-column-width: calc(#{$fluent-grid-base-checkbox-size} + 2 * #{$fluent-grid-base-cell-horizontal-padding});
+$grid-masterdetail-padding: 16px;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/aiChat/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/aiChat/_index.scss
new file mode 100644
index 000000000000..2cfd224fedcb
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/aiChat/_index.scss
@@ -0,0 +1,20 @@
+@use "../../colors" as *;
+@use '../../../../base/gridBase/layout/aiChat/mixins' as *;
+@use '../../../colors' as *;
+@use '../../../button/colors' as *;
+@use './sizes' as *;
+@use "../../../../base/widget" as *;
+@include ai-chat-messagelist-empty(
+  $button-default-bg,
+  $button-default-outlined-hover-bg,
+);
+@include ai-chat-message-pending($gridbase-accent);
+@include ai-chat-message-success($gridbase-success);
+@include ai-chat-message-error($gridbase-danger);
+@include ai-chat-messagebubble-border($gridbase-border-color);
+@include ai-chat-message-regenerate-button($button-normal-active-bg);
+@include ai-chat-message-icon($ai-chat-message-icon-size);
+
+.dx-ai-chat--disabled .dx-ai-chat__message-regenerate-button {
+  @include disabled-widget();
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/aiChat/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/aiChat/_sizes.scss
new file mode 100644
index 000000000000..57e3442e5062
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/aiChat/_sizes.scss
@@ -0,0 +1,3 @@
+@use '../../../sizes' as *;
+
+$ai-chat-message-icon-size: $fluent-base-icon-size;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/cell.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/cell.scss
new file mode 100644
index 000000000000..f1f130369178
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/gridBase/layout/cell.scss
@@ -0,0 +1,542 @@
+/* stylelint-disable no-duplicate-selectors */
+@use "sass:math";
+@use "../colors" as *;
+@use "../sizes" as *;
+@use "../../sizes" as *;
+@use "../../textEditor" as *;
+@use "../../textEditor/sizes" as *;
+@use "../variables" as *;
+
+@mixin fluent-grid-base-cell($widget-name) {
+
+  // #region overflow
+
+  // (0,1,0)
+  .dx-cell-modified,
+  .dx-#{$widget-name}-invalid {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  // (0,7,1) - (0,9,1)
+  .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td:not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-select,
+  .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending).dx-command-select,
+  .dx-#{$widget-name} .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row > td.dx-#{$widget-name}-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-#{$widget-name}-select-all).dx-command-select {
+    overflow: visible;
+  }
+
+  // #endregion
+
+  // #region sizing
+
+  // (0,1,0)
+  .dx-command-adaptive {
+    width: calc(2 * #{$fluent-grid-base-cell-horizontal-padding} + #{$fluent-base-icon-size});
+    min-width: calc(2 * #{$fluent-grid-base-cell-horizontal-padding} + #{$fluent-base-icon-size});
+  }
+
+  // (0,2,0)
+  .dx-#{$widget-name} .dx-command-drag {
+    width: calc(2 * #{$fluent-grid-base-cell-horizontal-padding} + #{$fluent-base-icon-size});
+    min-width: calc(2 * #{$fluent-grid-base-cell-horizontal-padding} + #{$fluent-base-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: $fluent-grid-base-command-select-column-width;
+    min-width: $fluent-grid-base-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: $fluent-grid-base-command-edit-column-width;
+    min-width: $fluent-grid-base-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: $fluent-grid-base-command-edit-column-with-icons-width;
+    min-width: $fluent-grid-base-command-edit-column-with-icons-width;
+  }
+
+  // #endregion
+
+  // #region border
+
+  // (0,2,1)
+  .dx-#{$widget-name} .dx-row-lines > td {
+    border-bottom: $datagrid-border;
+    border-bottom-color: $datagrid-border-color;
+  }
+
+  // (0,2,1)
+  .dx-#{$widget-name} .dx-column-lines > td {
+    border-left: $datagrid-border;
+    border-left-color: $datagrid-border-color;
+    border-right: $datagrid-border;
+    border-right-color: $datagrid-border-color;
+  }
+
+  // (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: $datagrid-border;
+    border-top-color: $datagrid-border-color;
+    border-bottom: $datagrid-border;
+    border-bottom-color: $datagrid-border-color;
+  }
+
+  // (0,3,1)
+  .dx-#{$widget-name}-headers .dx-#{$widget-name}-table .dx-row > td {
+    border-bottom: $datagrid-border;
+    border-bottom-color: $datagrid-border-color;
+  }
+
+  // (0,3,1)
+  .dx-#{$widget-name}-rowsview .dx-row.dx-edit-row > td {
+    border-top: $datagrid-border;
+    border-top-color: $datagrid-border-color;
+    border-bottom: $datagrid-border;
+    border-bottom-color: $datagrid-border-color;
+  }
+
+  // (0,3,1)
+  .dx-#{$widget-name}-rowsview .dx-row-removed.dx-row-lines > td {
+    border-top: $fluent-grid-base-row-lines-border-top;
+    border-top-color: $datagrid-cell-removed-border-color;
+    border-bottom: $fluent-grid-base-row-lines-border-bottom;
+    border-bottom-color: $datagrid-cell-removed-border-color;
+  }
+
+  // (0,3,1)
+  .dx-#{$widget-name}-rowsview .dx-row-removed:not(.dx-row-lines) > td {
+    border-top: $fluent-grid-base-row-lines-border-top;
+    border-top-color: $datagrid-hover-bg;
+  }
+
+  // (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: $fluent-grid-base-row-lines-border-bottom;
+    border-bottom-color: $datagrid-row-focused-bg;
+  }
+
+  // (0,4,1)
+  .dx-#{$widget-name}-rowsview .dx-row.dx-edit-row:first-child > td {
+    border-top-width: 0;
+    border-bottom: $datagrid-border;
+    border-bottom-color: $datagrid-border-color;
+  }
+
+  // (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: $datagrid-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: $datagrid-row-selected-border-color;
+    border-right-color: $datagrid-row-selected-border-color;
+  }
+
+  // (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: $fluent-grid-base-row-lines-border-bottom;
+    border-bottom-color: $datagrid-selection-bg;
+    border-top: $fluent-grid-base-row-lines-border-top;
+    border-top-color: $datagrid-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: $datagrid-row-selected-border-color;
+  }
+
+  // (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: $fluent-grid-base-row-lines-border-left;
+    border-left-color: $datagrid-border-color;
+  }
+
+  // (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: $datagrid-hover-bg;
+    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: $datagrid-row-selected-border-color;
+  }
+
+  // (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: $datagrid-row-selected-border-color;
+  }
+
+  // (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: $fluent-grid-base-pointer-events-none-border-right;
+    border-right-color: $datagrid-border-color;
+  }
+
+  // (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: $datagrid-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: $datagrid-border-radius;
+  }
+
+  // (0,4,1)
+  .dx-#{$widget-name} .dx-#{$widget-name}-table .dx-header-row > td:last-child {
+    border-top-right-radius: $datagrid-border-radius;
+  }
+
+  // #endregion
+
+  // #region padding
+
+  // (0,1,0)
+  .dx-cell-modified,
+  .dx-#{$widget-name}-invalid {
+    padding: $fluent-grid-base-cell-vertical-padding 0 $fluent-grid-base-cell-vertical-padding 0;
+  }
+
+  // (0,1,0)
+  .dx-editor-cell {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  // (0,2,1)
+  .dx-#{$widget-name} .dx-row > td {
+    padding: $fluent-grid-base-cell-vertical-padding $fluent-grid-base-cell-horizontal-padding;
+  }
+
+  // (0,2,1)
+  .dx-#{$widget-name}-rowsview td.dx-validation-pending {
+    padding: 0;
+  }
+
+  // (0,3,0)
+  .dx-#{$widget-name}-rowsview .dx-master-detail-row > .dx-master-detail-cell {
+    padding: $grid-masterdetail-padding;
+  }
+
+  // (0,3,1)
+  .dx-#{$widget-name} .dx-#{$widget-name}-table .dx-header-row > td {
+    padding-top: $fluent-grid-base-header-cell-vertical-padding;
+    padding-bottom: $fluent-grid-base-header-cell-vertical-padding;
+  }
+
+  // (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: $fluent-grid-base-cell-padding;
+    padding-right: $fluent-texteditor-invalid-badge-size;
+  }
+
+  // (0,4,0)
+  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-master-detail-row > .dx-master-detail-cell {
+    padding: 0;
+  }
+
+  // (0,4,1)
+  .dx-rtl.dx-#{$widget-name}-rowsview td.dx-validation-pending.dx-cell-modified,
+  .dx-rtl.dx-#{$widget-name}-rowsview td.dx-validation-pending .dx-#{$widget-name}-invalid,
+  .dx-rtl .dx-#{$widget-name}-rowsview td.dx-validation-pending.dx-cell-modified,
+  .dx-rtl .dx-#{$widget-name}-rowsview td.dx-validation-pending .dx-#{$widget-name}-invalid {
+    padding-left: $fluent-texteditor-invalid-badge-size;
+    padding-right: $fluent-grid-base-cell-horizontal-padding;
+  }
+
+  // (0,5,1)
+  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-data-row:not(.dx-row-lines, .dx-edit-row, .dx-selection, .dx-row-focused, .dx-row-removed) > td:not(.dx-editor-cell, .dx-master-detail-cell) {
+    padding-top: calc(#{$fluent-grid-base-cell-vertical-padding} + 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(#{$fluent-grid-base-cell-vertical-padding} - 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: $fluent-grid-base-header-row-padding-top;
+    padding-bottom: $fluent-grid-base-header-row-padding-bottom;
+  }
+
+  // (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: $fluent-grid-base-cell-vertical-padding;
+  }
+
+  // (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((#{$fluent-grid-base-header-height} - #{$fluent-grid-base-checkbox-size}) / 2);
+  }
+
+  // (0,8,1) T1303478
+  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row.dx-selection:not(.dx-edit-row):not(.dx-row-lines):not(.dx-group-row) > td:not(.dx-editor-cell, .dx-master-detail-cell),
+  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row.dx-row-focused:not(.dx-edit-row):not(.dx-row-lines):not(.dx-group-row) > td:not(.dx-editor-cell, .dx-master-detail-cell) {
+    padding-bottom: calc(#{$fluent-grid-base-cell-vertical-padding} - 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: $fluent-grid-base-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: $datagrid-row-alternation-bg;
+  }
+
+  // (0,2,1)
+  .dx-#{$widget-name} .dx-#{$widget-name}-drop-highlight > td {
+    background-color: $datagrid-drop-highlight-bg;
+  }
+
+  // (0,2,1)
+  .dx-#{$widget-name}-rowsview .dx-row-removed > td {
+    background-color: $datagrid-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: $datagrid-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: $datagrid-cell-modified-border-color;
+  }
+
+  // (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: $datagrid-filter-row-background-color;
+  }
+
+  // (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: $datagrid-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: $datagrid-hover-bg;
+  }
+
+  // (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: $datagrid-row-focused-bg;
+  }
+
+  // (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: $datagrid-base-background-color;
+  }
+
+  // (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: $datagrid-hover-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.dx-pointer-events-none {
+    background-color: transparent;
+  }
+
+  // #endregion
+
+  // #region color
+
+  // (0,2,1)
+  .dx-#{$widget-name} .dx-#{$widget-name}-drop-highlight > td {
+    color: $datagrid-drop-highlight-color;
+  }
+
+  // (0,2,1)
+  .dx-#{$widget-name}-rowsview .dx-row-removed > td {
+    color: $datagrid-cell-removed-text-color;
+  }
+
+  // (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: $datagrid-row-selected-color;
+  }
+
+  // (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: $datagrid-row-focused-color;
+  }
+
+  // (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: $datagrid-row-hovered-color;
+  }
+
+  // (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: $datagrid-base-color;
+  }
+
+  // #endregion
+
+  // #region typography
+
+  // (0,2,1)
+  .dx-#{$widget-name} .dx-row > td {
+    font-size: $fluent-grid-base-cell-font-size;
+    line-height: $fluent-grid-base-cell-line-height;
+  }
+
+  // (0,3,1)
+  .dx-#{$widget-name}-headers .dx-#{$widget-name}-table .dx-row > td {
+    line-height: $fluent-grid-base-header-line-height;
+    font-weight: $datagrid-columnchooser-font-weight;
+    font-size: $fluent-grid-base-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/dxdsfluent/htmlEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_colors.scss
new file mode 100644
index 000000000000..8983c36319db
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_colors.scss
@@ -0,0 +1,22 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$htmleditor-toolbar-border-color: ds.$separator-color !default;
+$htmleditor-variable-bg: ds.$color-surface-primary-alpha-hovered !default;
+$htmleditor-resize-frame-border-color: ds.$color-border-primary-default-rest !default;
+$htmleditor-resize-handle-bg: ds.$color-surface-primary-default-rest !default;
+$htmleditor-mention-bg: ds.$color-surface-neutral-default-selected !default;
+$htmleditor-table-border-color: ds.$color-border-neutral-default-rest !default;
+$htmleditor-fileuploader-input-wrapper-border-color: ds.$color-border-neutral-default-rest !default;
+$htmleditor-fileuploader-input-wrapper-bg-color: ds.$color-surface-neutral-subdued-rest !default;
+
+// Color computations hoisted from style files (phase 0.5 layer normalization)
+$htmleditor-cover-bg: rgb(from #{ds.$color-surface-neutral-default-rest} r g b / 0.4) !default;
+$htmleditor-faded-text-color: rgb(from #{ds.$color-content-neutral-default-rest} r g b / 0.8) !default;
+$htmleditor-uploader-cover-bg: rgb(from #{ds.$color-border-neutral-default-rest} r g b / 0.8) !default;
+$htmleditor-highlighted-row-bg: ds.$color-surface-primary-alpha-active !default;
+
+// Base-layer values injected with design tokens (wave B1)
+$fluent-htmleditor-code-block-bg: rgb(from #{ds.$color-content-neutral-subdued-rest} r g b / 0.15) !default;
+$fluent-htmleditor-placeholder-color: ds.$text-content-color-default-placeholder-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_index.scss
new file mode 100644
index 000000000000..53a183d0a9a5
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_index.scss
@@ -0,0 +1,333 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../button/sizes" as *;
+@use "../button/colors" as *;
+@use "../buttonGroup/colors" as *;
+@use "../textEditor/colors" as *;
+@use "../textEditor/index" as *;
+@use "../toolbar/sizes" as *;
+@use "../common/mixins" as *;
+@use "../common/sizes" as *;
+@use "../fileUploader/sizes" as *;
+@use "../popup/sizes" as *;
+@use "../../base/mixins" as *;
+@use "../../base/htmlEditor" with (
+  $htmleditor-code-block-bg: $fluent-htmleditor-code-block-bg,
+  $htmleditor-placeholder-color: $fluent-htmleditor-placeholder-color,
+  $htmleditor-aidialog-title-font-weight: $fluent-htmleditor-aidialog-title-font-weight,
+);
+
+// adduse
+
+.dx-htmleditor {
+  border-color: transparent;
+  position: relative;
+
+  .dx-htmleditor-toolbar-wrapper {
+    padding: 0 $fluent-htmleditor-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: $fluent-htmleditor-toolbar-wrapper-top;
+      bottom: $fluent-htmleditor-toolbar-wrapper-bottom;
+      left: $fluent-htmleditor-toolbar-wrapper-left;
+      right: $fluent-htmleditor-toolbar-wrapper-right;
+      z-index: 2;
+      background-color: $htmleditor-cover-bg;
+      content: '';
+      pointer-events: none;
+    }
+  }
+
+  &.dx-state-focused,
+  &.dx-state-active {
+    &::before {
+      border-bottom: $fluent-htmleditor-state-active-border-bottom;
+      border-bottom-color: $texteditor-indicator-border-color;
+      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: $fluent-htmleditor-content-margin;
+      margin-inline-start: 0;
+    }
+
+    .dx-htmleditor-toolbar-wrapper + .dx-quill-container .dx-htmleditor-content {
+      margin-top: 0;
+    }
+  }
+
+  &.dx-htmleditor-filled {
+    @include texteditor-filled-styling();
+  }
+
+  &.dx-htmleditor-underlined {
+    &::after {
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 0;
+      width: 100%;
+      content: '';
+      position: absolute;
+    }
+
+    @include texteditor-underlined-styling();
+
+    .dx-htmleditor-content {
+      padding-inline-start: 0;
+    }
+  }
+
+  &.dx-state-disabled {
+    opacity: 1;
+  }
+}
+
+.dx-invalid.dx-htmleditor {
+  &.dx-state-hover {
+    &::after {
+      border-bottom-color: $texteditor-invalid-faded-border-color;
+    }
+  }
+
+  &.dx-state-focused,
+  &.dx-state-active {
+    &::before {
+      border-bottom: $fluent-htmleditor-state-active-border-bottom;
+      border-bottom-color: $texteditor-invalid-focused-border-color;
+    }
+  }
+}
+
+.dx-htmleditor-content {
+  line-height: $fluent-line-height;
+  padding: $fluent-html-editor-vertical-padding $fluent-html-editor-horizontal-padding;
+
+  &.ql-blank::before { // stylelint-disable-line selector-class-pattern
+    color: $texteditor-placeholder-color;
+  }
+
+  code,
+  .ql-code-block-container { // stylelint-disable-line selector-class-pattern
+    color: $htmleditor-faded-text-color;
+  }
+
+  blockquote {
+    color: $htmleditor-faded-text-color;
+    border-inline-start-color: $htmleditor-toolbar-border-color;
+  }
+
+  .dx-variable {
+    & > span {
+      background: $htmleditor-variable-bg;
+    }
+  }
+
+  td,
+  th {
+    border-color: $htmleditor-table-border-color;
+  }
+}
+
+@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(#{$fluent-button-vertical-padding} - 3px);
+    }
+  }
+
+  &.dx-size-format {
+    width: $fluent-toolbar-size-editor-width;
+  }
+}
+
+.dx-htmleditor-toolbar-separator {
+  height: calc((#{$fluent-toolbar-height}) / 2);
+  border-inline-start-color: $htmleditor-toolbar-border-color;
+}
+
+.dx-htmleditor-toolbar-menu-separator {
+  border-top-color: $htmleditor-toolbar-border-color;
+  margin-top: $fluent-html-editor-toolbar-menu-separator-margin;
+  margin-bottom: $fluent-html-editor-toolbar-menu-separator-margin;
+}
+
+.dx-resize-frame {
+  border-color: $htmleditor-resize-frame-border-color;
+
+  .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: $htmleditor-resize-handle-bg;
+  }
+
+  .dx-resizable-handle-top,
+  .dx-resizable-handle-left,
+  .dx-resizable-handle-right,
+  .dx-resizable-handle-bottom {
+    &::after {
+      background-color: $htmleditor-resize-handle-bg;
+    }
+  }
+}
+
+.dx-htmleditor-add-image-popup > .dx-overlay-content > .dx-popup-content {
+  .dx-collection .dx-field-item:not(.dx-last-col) {
+    padding-inline-end: $fluent-html-editor-add-image-dialog-base-padding;
+  }
+
+  .dx-fix-ratio-container {
+    .dx-textbox {
+      width: calc(100% - $fluent-button-height - $fluent-html-editor-add-image-dialog-base-padding);
+    }
+
+    .dx-buttongroup {
+      margin-inline-start: $fluent-html-editor-add-image-dialog-base-padding;
+      width: $fluent-button-height;
+      margin-top: calc((#{$fluent-base-inline-widget-height} - #{$fluent-button-height}) / 2);
+    }
+  }
+
+  .dx-collection .dx-field-item:not(.dx-first-col) {
+    padding-inline-start: 0;
+  }
+
+  .dx-tabs {
+    padding: 0 $fluent-html-editor-add-image-dialog-tabs-padding;
+  }
+
+  .dx-fileuploader-input-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: $fluent-htmleditor-input-wrapper-gap;
+    padding: $fluent-html-editor-add-image-dialog-fileuploader-padding;
+    border-width: $fluent-html-editor-fileuploader-input-wrapper-border-size;
+    border-style: dashed;
+    border-color: $htmleditor-fileuploader-input-wrapper-border-color;
+    border-radius: $fluent-html-editor-fileuploader-input-wrapper-border-radius;
+    background-color: $htmleditor-fileuploader-input-wrapper-bg-color;
+
+    &::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: $fluent-fileuploader-vertical-padding;
+      padding-bottom: calc(#{$fluent-fileuploader-vertical-padding} + 1px);
+    }
+
+    .dx-fileuploader-content {
+      background-color: $htmleditor-uploader-cover-bg;
+    }
+  }
+}
+
+.dx-formdialog-field-target .dx-field-item-content {
+  text-align: start;
+}
+
+.dx-mention {
+  background-color: $htmleditor-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: $htmleditor-highlighted-row-bg;
+  }
+}
+
+.dx-formdialog.dx-dropdowneditor-overlay.dx-popup-wrapper .dx-overlay-content {
+  box-shadow: $fluent-popup-content-shadow;
+}
+
+.dx-aidialog-controls {
+  gap: $fluent-aidialog-selects-gap;
+
+  .dx-selectbox {
+    max-width: calc(50% - $fluent-aidialog-selects-gap * 0.5);
+  }
+}
+
+.dx-aidialog-content {
+  padding: $fluent-aidialog-content-padding;
+  gap: $fluent-aidialog-content-gap;
+}
+
+.dx-aidialog {
+  .dx-pending-indicator {
+    @include dx-pending-indicator-centered();
+  }
+
+  &.dx-popup-wrapper > .dx-overlay-content {
+    border-radius: $fluent-aidialog-border-radius;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_sizes.scss
new file mode 100644
index 000000000000..348c451eaeae
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/htmlEditor/_sizes.scss
@@ -0,0 +1,56 @@
+@use "../sizes" as *;
+@use "../toolbar/sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-toolbar-size-editor-width: null !default;
+$fluent-html-editor-vertical-padding: null !default;
+$fluent-html-editor-horizontal-padding: null !default;
+$fluent-html-editor-add-image-dialog-fileuploader-padding: null !default;
+$fluent-html-editor-toolbar-menu-separator-margin: ds.$spacing-40 !default;
+$fluent-html-editor-fileuploader-input-wrapper-border-radius: ds.$border-radius-80 !default;
+$fluent-html-editor-fileuploader-input-wrapper-border-size: 1.5px !default; // dx-offscale: 1.5px
+$fluent-html-editor-add-image-dialog-tabs-padding: null !default;
+$fluent-aidialog-selects-gap: null !default;
+$fluent-aidialog-content-gap: null !default;
+$fluent-aidialog-content-padding: null !default;
+$fluent-aidialog-border-radius: null !default;
+
+@if $size == "default" {
+  $fluent-toolbar-size-editor-width: ds.$spacing-1200 !default;
+  $fluent-html-editor-vertical-padding: ds.$spacing-160 !default;
+  $fluent-html-editor-horizontal-padding: ds.$spacing-160 !default;
+  $fluent-html-editor-add-image-dialog-fileuploader-padding: ds.$spacing-480 0 ds.$spacing-240 !default;
+  $fluent-html-editor-add-image-dialog-tabs-padding: ds.$spacing-140 !default;
+  $fluent-aidialog-selects-gap: ds.$spacing-80 !default;
+  $fluent-aidialog-content-gap: ds.$spacing-160 !default;
+  $fluent-aidialog-content-padding: ds.$spacing-160 ds.$spacing-240 !default;
+  $fluent-aidialog-border-radius: calc(#{$base-border-radius} * 2) !default;
+}
+
+@else if $size == "compact" {
+  $fluent-toolbar-size-editor-width: 90px !default; // dx-offscale: 90px
+  $fluent-html-editor-vertical-padding: ds.$spacing-120 !default;
+  $fluent-html-editor-horizontal-padding: ds.$spacing-120 !default;
+  $fluent-html-editor-add-image-dialog-fileuploader-padding: ds.$spacing-400 0 ds.$spacing-180 !default;
+  $fluent-html-editor-add-image-dialog-tabs-padding: ds.$spacing-80 !default;
+  $fluent-aidialog-selects-gap: ds.$spacing-40 !default;
+  $fluent-aidialog-content-gap: ds.$spacing-120 !default;
+  $fluent-aidialog-content-padding: ds.$spacing-120 ds.$spacing-160 !default;
+  $fluent-aidialog-border-radius: $base-border-radius !default;
+}
+
+$fluent-htmleditor-toolbar-padding: $fluent-html-editor-horizontal-padding !default;
+
+// Values hoisted from style-file literals (tokenized)
+$fluent-htmleditor-toolbar-wrapper-top: ds.$spacing-10 !default;
+$fluent-htmleditor-toolbar-wrapper-bottom: ds.$spacing-10 !default;
+$fluent-htmleditor-toolbar-wrapper-left: ds.$spacing-10 !default;
+$fluent-htmleditor-toolbar-wrapper-right: ds.$spacing-10 !default;
+$fluent-htmleditor-content-margin: ds.$spacing-10 !default;
+$fluent-htmleditor-input-wrapper-gap: ds.$spacing-80 !default;
+$fluent-htmleditor-state-active-border-bottom: ds.$border-width-20 solid !default;
+
+// Base-layer values injected with design tokens (wave B1)
+$fluent-htmleditor-aidialog-title-font-weight: ds.$font-weight-title-default !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_colors.scss
new file mode 100644
index 000000000000..c5aa519e3a45
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_colors.scss
@@ -0,0 +1,8 @@
+@use "sass:color";
+@use "../sizes" as *;
+@use "../colors" as *;
+
+// adduse
+
+// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
+$icons-scrollview-pulldown-path: $scrollview-pulldown-path !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_index.scss
new file mode 100644
index 000000000000..49f37698fa8c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_index.scss
@@ -0,0 +1,46 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+
+// adduse
+
+
+@include dx-font-icons("dxiconsfluent", "DevExtreme Fluent Icons", "devextreme_fluent_icons", optimizeLegibility);
+
+.dx-icon {
+  font-size: $fluent-base-icon-size;
+  line-height: 1;
+  white-space: nowrap;
+  font-feature-settings: 'liga';
+}
+
+.dx-tab {
+  .dx-icon,
+  &.dx-tab-selected .dx-icon {
+    background-size: 100% 100%;
+    background-position: 50% 50%;
+  }
+}
+
+.dx-scrollview-pulldown {
+  background-image: $icons-scrollview-pulldown-path;
+  background-position: 0 0;
+  background-repeat: no-repeat;
+}
+
+.dx-loadindicator-image {
+  background-position: center center;
+  background-repeat: no-repeat;
+}
+
+.dx-loadindicator-image-small {
+  background-position: center center;
+  background-repeat: no-repeat;
+}
+
+.dx-loadindicator-image-large {
+  background-position: center center;
+  background-repeat: no-repeat;
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_sizes.scss
new file mode 100644
index 000000000000..43b104010f9e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/icons/_sizes.scss
@@ -0,0 +1,4 @@
+@use "../sizes" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_colors.scss
new file mode 100644
index 000000000000..d7b1038a3f88
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_colors.scss
@@ -0,0 +1,8 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$informer-error-color: ds.$color-content-danger-default-rest !default;
+$informer-error-background-color: ds.$color-surface-danger-subdued-rest !default;
+$informer-info-color: ds.$color-content-neutral-default-rest !default;
+$informer-info-background-color: ds.$color-surface-neutral-subdued-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_index.scss
new file mode 100644
index 000000000000..3fb9269a558a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_index.scss
@@ -0,0 +1,18 @@
+@use "../../base/informer";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../../base/informer/mixins" as *;
+
+// adduse
+
+@include informer(
+  $informer-error-color,
+  $informer-error-background-color,
+  $informer-info-color,
+  $informer-info-background-color,
+  $informer-border-radius,
+  $informer-icon-size,
+  $informer-padding-inline,
+  $informer-padding-block,
+  $informer-column-gap,
+);
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_sizes.scss
new file mode 100644
index 000000000000..d689b2016731
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/informer/_sizes.scss
@@ -0,0 +1,25 @@
+@use "../common/sizes" as *;
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$informer-icon-size: $fluent-base-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/dxdsfluent/list/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_colors.scss
new file mode 100644
index 000000000000..c516d1fa48fb
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_colors.scss
@@ -0,0 +1,87 @@
+@use "../colors" as *;
+@use "../button/colors" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+/**
+* $name 10. Item text color
+* $type color
+*/
+$list-normal-color: ds.$color-content-neutral-default-rest !default;
+
+/**
+* $name 20. Group border color
+* $type color
+*/
+$list-border-color: ds.$color-border-neutral-default-rest !default;
+
+/**
+* $name 20. Group header background color
+* $type color
+*/
+$list-group-header-bg: transparent !default;
+
+/**
+* $name 30. Hovered state item background color
+* $type color
+*/
+$list-item-hover-bg: ds.$color-surface-neutral-default-hovered !default;
+
+/**
+* $name 30. Selected state item background color
+* $type color
+*/
+$list-item-selected-bg: ds.$color-surface-neutral-default-selected !default;
+$list-item-selected-hover-bg: ds.$color-surface-neutral-default-selected-hovered !default;
+$list-item-focused-selected-bg: ds.$color-surface-neutral-default-active !default;
+$list-item-hover-color: ds.$color-content-neutral-default-rest !default;
+$list-header-indicator-color: ds.$color-content-neutral-subdued-rest !default;
+
+/**
+* $name 40. Active state item background color
+* $type color
+*/
+$list-item-active-bg: ds.$color-surface-neutral-default-active !default;
+$list-holdmenu-bg: ds.$color-surface-neutral-default-rest !default;
+$list-holdmenu-border-color: $list-border-color !default;
+$list-holdmenu-shadow-color: ds.$color-shadow-ambient !default;
+$list-menu-button-default-color: $button-default-color !default;
+$list-menu-button-default-bg: $button-default-bg !default;
+$list-menu-button-delete-bg: ds.$color-surface-danger-default-rest !default;
+$list-item-ghost-bg: ds.$color-surface-neutral-default-rest !default;
+$list-item-ghost-color: ds.$color-content-neutral-subdued-rest !default;
+$list-item-ghost-border-color: ds.$color-border-primary-default-rest !default;
+$list-icon-color: ds.$color-content-neutral-subdued-rest !default;
+
+/*
+ * toggle-delete is an SVG data-uri image: the color is baked into the background-image at
+ * build time. CSS var() tokens do NOT resolve inside a data-uri (they render black), so this
+ * stays a concrete $base-* value. See DIVERGENCES.md.
+ */
+$list-toggle-delete-icon-color: $base-icon-color !default;
+
+$base-select-all-separator-color: ds.$separator-color !default;
+
+/**
+* $name 10. Group header text color
+* $type color
+*/
+$list-group-color: ds.$color-content-neutral-default-rest !default;
+
+/**
+* $name 25. Expanded group header text color
+* $type color
+*/
+$list-expanded-group-color: $list-group-color !default;
+$list-item-selected-color: $list-normal-color !default;
+
+$list-border-color-disabled: ds.$color-border-neutral-default-disabled !default;
+$list-foreground-disabled: ds.$color-content-neutral-default-disabled !default;
+$list-inverted-text-color: ds.$color-content-neutral-default-static-dark-rest !default;
+
+// Values hoisted from style-file literals (tokenized)
+$list-item-disabled-opacity: ds.$opacity-60 !default;
+
+// Base-layer values injected with design tokens (wave B1)
+$fluent-list-response-wait-opacity: ds.$opacity-50 !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_index.scss
new file mode 100644
index 000000000000..a7d5215b61ed
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_index.scss
@@ -0,0 +1,531 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../button/sizes" as *;
+@use "../button/mixins" as *;
+@use "../checkBox/colors" as *;
+@use "../textEditor/sizes" as *;
+@use "../../base/list" as * with (
+  $list-response-wait-opacity: $fluent-list-response-wait-opacity,
+);
+@use "../../base/list/mixins" as *;
+@use "../radioGroup/colors" as *;
+
+// adduse
+@use "../badge";
+
+$fluent-list-border: $fluent-list-border-width solid;
+$fluent-list-item-border: $fluent-list-item-border-width solid;
+
+.dx-state-disabled {
+  &.dx-list {
+    opacity: 1;
+
+    .dx-list-item {
+      opacity: 1;
+      color: $list-foreground-disabled;
+    }
+  }
+
+  .dx-list-select-all-label {
+    color: $list-foreground-disabled;
+
+    &::after {
+      color: $list-border-color-disabled;
+    }
+  }
+
+  .dx-list-item-chevron {
+    color: $list-foreground-disabled;
+  }
+
+  .dx-list-reorder-handle {
+    &::before {
+      color: $list-foreground-disabled;
+    }
+  }
+}
+
+.dx-list-item-chevron-container {
+  padding-inline: $fluent-list-item-vertical-padding;
+}
+
+.dx-list-item-chevron {
+  @include dx-icon(chevronnext);
+  @include dx-icon-sizing($fluent-base-icon-size);
+
+  display: flex;
+  align-items: center;
+  color: $list-icon-color;
+}
+
+.dx-list-item-badge-container {
+  padding-inline-end: $fluent-list-item-horizontal-padding;
+}
+
+.dx-list-item-icon-container {
+  width: calc(#{$fluent-base-icon-size} + #{$fluent-list-item-horizontal-padding});
+  height: $fluent-base-icon-size;
+  vertical-align: bottom;
+}
+
+.dx-list-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dx-list-item-icon {
+  @include dx-icon-sizing($fluent-base-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: $fluent-list-item-gap;
+}
+
+.dx-list {
+  .dx-list-group-header-indicator {
+    display: none;
+  }
+}
+
+.dx-list-collapsible-groups {
+  .dx-list-group-header {
+    &::before {
+      content: none;
+    }
+  }
+}
+
+@mixin item-states() {
+  &.dx-list-item-selected {
+    background-color: $list-item-selected-bg;
+    color: $list-item-selected-color;
+
+    &.dx-state-hover:not(.dx-state-focused) {
+      background-color: $list-item-selected-hover-bg;
+      color: $list-item-selected-color;
+    }
+  }
+
+  &.dx-state-focused {
+    background-color: $list-item-hover-bg;
+    color: $list-item-hover-color;
+  }
+
+  &.dx-state-focused.dx-list-item-selected {
+    background-color: $list-item-focused-selected-bg;
+    color: $list-item-selected-color;
+  }
+
+  &.dx-state-active {
+    background-color: $list-item-active-bg;
+
+    .dx-list-slide-item-content {
+      background-color: $list-item-active-bg;
+    }
+  }
+}
+
+@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% - (#{$fluent-texteditor-input-height} + #{$fluent-list-searchbox-margin-bottom}));
+    }
+
+    .dx-empty-message {
+      min-height: $fluent-list-empty-message-min-height;
+    }
+
+    &.dx-list-select-decorator-enabled {
+      .dx-list-select-all,
+      .dx-list-item {
+        .dx-list-select-all-label,
+        .dx-list-item-content {
+          padding-inline-start: $fluent-list-vertical-padding;
+        }
+
+        &.dx-state-hover {
+          .dx-radiobutton-icon {
+            border-color: $radiogroup-accent-color-hover;
+          }
+
+          .dx-checkbox-icon {
+            border-color: $checkbox-accent-color-hover;
+          }
+
+          .dx-radiobutton-checked {
+            .dx-radiobutton-icon-dot {
+              background-color: $radiogroup-accent-color-hover;
+            }
+          }
+
+          .dx-checkbox-checked {
+            .dx-checkbox-icon {
+              background-color: $checkbox-accent-color-hover;
+            }
+          }
+
+          .dx-checkbox-indeterminate {
+            .dx-checkbox-icon {
+              &::before {
+                background-color: $checkbox-accent-color-hover;
+              }
+            }
+          }
+        }
+
+        &.dx-state-focused {
+          .dx-radiobutton-icon {
+            border-color: $radiogroup-accent-color-active;
+          }
+
+          .dx-checkbox-icon {
+            border-color: $checkbox-accent-color-focused;
+          }
+
+          .dx-radiobutton-checked {
+            .dx-radiobutton-icon-dot {
+              background-color: $radiogroup-accent-color-active;
+            }
+          }
+
+          .dx-checkbox-checked {
+            .dx-checkbox-icon {
+              background-color: $checkbox-accent-color-focused;
+            }
+          }
+
+          .dx-checkbox-indeterminate {
+            .dx-checkbox-icon {
+              &::before {
+                background-color: $checkbox-accent-color-focused;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &:not(.dx-list-select-decorator-enabled) {
+      .dx-list-item {
+        @include item-states();
+      }
+
+      .dx-list-group-header {
+        @include item-states();
+
+        &.dx-state-hover {
+          background-color: $list-item-hover-bg;
+          color: $list-item-hover-color;
+        }
+      }
+    }
+  }
+
+  .dx-list-group {
+    &:not(.dx-list-group-collapsed) {
+      &:not(:last-child) {
+        padding-bottom: $fluent-list-vertical-padding;
+        border-bottom: $fluent-list-item-border;
+        border-bottom-color: $list-border-color;
+      }
+    }
+
+    &: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($fluent-base-icon-size);
+        }
+      }
+
+      .dx-list-group-header {
+        color: $list-group-color;
+      }
+    }
+
+    &:last-of-type {
+      .dx-list-item {
+        &:last-of-type {
+          margin-bottom: $fluent-list-bottom-padding;
+        }
+      }
+    }
+
+    .dx-list-item {
+      &:first-of-type {
+        margin-top: 0;
+      }
+
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .dx-list-group-header {
+    font-weight: $fluent-list-group-header-font-weight;
+    padding: $fluent-list-group-header-vertical-padding $item-horizontal-padding;
+    background: $list-group-header-bg;
+    color: $list-expanded-group-color;
+    border-top: $fluent-list-item-border;
+    border-top-color: transparent;
+    display: flex;
+    align-items: center;
+    column-gap: $fluent-list-item-horizontal-padding;
+
+    .dx-list-group-header-indicator {
+      color: $list-header-indicator-color;
+
+      .dx-list-collapsible-groups & {
+        display: flex;
+        align-items: center;
+
+        @include dx-icon(chevrondown);
+        @include dx-icon-sizing($fluent-base-icon-size);
+      }
+    }
+
+    &::before {
+      content: none;
+    }
+  }
+
+  .dx-list-items {
+    display: flex;
+    flex-direction: column;
+    row-gap: $fluent-list-items-row-gap;
+
+    &:not(:first-of-type) {
+      .dx-list-item {
+        margin-top: 0;
+      }
+    }
+  }
+
+  .dx-list-item {
+    border-radius: $base-border-radius;
+
+    @include toggle-delete-icon($list-toggle-delete-icon-color);
+
+    &.dx-state-hover,
+    &.dx-state-active {
+      background-color: $list-item-hover-bg;
+      color: $list-item-hover-color;
+
+      .dx-list-switchable-delete-button-inner-wrapper {
+        background-color: $list-item-hover-bg;
+      }
+    }
+
+    &:first-of-type {
+      border-top: none;
+      margin-top: $fluent-list-vertical-padding;
+    }
+
+    &:last-of-type {
+      border-bottom: none;
+      margin-bottom: $fluent-list-vertical-padding;
+    }
+
+    .dx-icon {
+      color: $list-icon-color;
+    }
+
+    .dx-icon-toggle-delete {
+      background-size: 100%;
+    }
+
+    &.dx-list-item-ghost-reordering {
+      &.dx-state-focused {
+        &.dx-state-hover {
+          color: $list-item-ghost-color;
+          background: $list-item-ghost-bg;
+          border: $fluent-list-state-hover-border;
+          border-color: $list-item-ghost-border-color;
+        }
+      }
+    }
+  }
+
+  .dx-list-item,
+  .dx-list .dx-empty-message {
+    color: $list-normal-color;
+
+    .dx-list-item-separator-hidden & {
+      border-top: none;
+      border-bottom: none;
+    }
+  }
+
+  .dx-list-item-content {
+    padding: $fluent-list-item-vertical-padding $item-horizontal-padding $fluent-list-item-vertical-padding;
+  }
+
+  .dx-list .dx-empty-message { // stylelint-disable-line no-duplicate-selectors
+    padding: $fluent-list-item-vertical-padding $fluent-list-item-horizontal-padding;
+  }
+
+  .dx-list-next-button .dx-button {
+    @include dx-button-withtext-sizing();
+
+    .dx-button-content {
+      padding-left: $fluent-list-next-button-horizontal-padding;
+      padding-right: $fluent-list-next-button-horizontal-padding;
+    }
+  }
+
+  .dx-list-border-visible {
+    border: $fluent-list-border;
+    border-color: $list-border-color;
+  }
+
+  .dx-list-item-before-bag {
+    &.dx-list-select-checkbox-container,
+    &.dx-list-select-radiobutton-container {
+      display: flex;
+      flex-shrink: 0;
+      width: $fluent-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: $fluent-list-item-vertical-padding 0;
+    position: relative;
+    display: flex;
+
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: $fluent-list-select-all-height;
+      background-color: $base-select-all-separator-color;
+    }
+  }
+
+  .dx-list-select-all-checkbox {
+    margin: 0 calc(#{$item-horizontal-padding} - 4px);
+  }
+
+  .dx-list-select-all-label {
+    padding: 0 $fluent-list-item-horizontal-padding;
+  }
+
+  .dx-list-item-after-bag {
+    padding-inline: $fluent-list-item-vertical-padding;
+
+    &.dx-list-static-delete-button-container {
+      width: calc(#{$item-horizontal-padding} + #{$fluent-button-icon-size});
+      padding: 0;
+    }
+
+    .dx-list-reorder-handle {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      @include dx-icon(dragvertical);
+
+      color: $list-icon-color;
+
+      @include dx-icon-sizing($fluent-base-icon-size);
+    }
+  }
+
+  .dx-list-slide-menu-button {
+    bottom: $fluent-list-slide-menu-button-bottom;
+  }
+
+  .dx-list-slide-menu-button-delete {
+    @include dx-icon(trash);
+
+    color: $list-inverted-text-color;
+    background-color: $list-menu-button-delete-bg;
+    font-size: $fluent-base-icon-size;
+    display: table-cell;
+    vertical-align: middle;
+    padding: 0 $item-horizontal-padding;
+    width: calc(#{$item-horizontal-padding} * 2 + #{$fluent-base-icon-size});
+  }
+
+  .dx-list-slide-menu-button-menu {
+    border: $fluent-list-slide-menu-button-menu-border;
+    color: $list-menu-button-default-color;
+    background-color: $list-menu-button-default-bg;
+  }
+
+  .dx-list-static-delete-button {
+    padding: 0;
+
+    &.dx-button {
+      box-shadow: none;
+      background-color: transparent;
+
+      .dx-button-content {
+        z-index: 1;
+      }
+    }
+  }
+
+  .dx-list-context-menucontent {
+    background-color: $list-holdmenu-bg;
+    border: $fluent-list-context-menucontent-border;
+    border-color: $list-holdmenu-border-color;
+    border-radius: $base-border-radius;
+    box-shadow: $list-holdmenu-shadow-color 0 2px 7.2px 0;
+
+    .dx-list-items {
+      margin-left: $fluent-list-vertical-padding;
+      margin-right: $fluent-list-vertical-padding;
+    }
+  }
+
+  .dx-state-disabled {
+    &.dx-list-item,
+    .dx-list-item {
+      background-color: transparent;
+      opacity: $list-item-disabled-opacity;
+    }
+  }
+}
+
+@include dx-list-sizing($fluent-list-item-horizontal-padding);
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_sizes.scss
new file mode 100644
index 000000000000..3a6ebd2bc0d6
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/list/_sizes.scss
@@ -0,0 +1,48 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-list-vertical-padding: ds.$spacing-40 !default;
+$fluent-list-item-margin-inline: ds.$spacing-40 !default;
+$fluent-list-bottom-padding: ds.$spacing-40 !default;
+$fluent-list-searchbox-margin-bottom: ds.$spacing-40 !default;
+$fluent-list-item-height: null !default;
+$fluent-list-item-vertical-padding: null !default;
+$fluent-list-item-horizontal-padding: null !default;
+$fluent-list-item-gap: ds.$spacing-20 !default;
+$fluent-list-group-header-vertical-padding: null !default;
+$fluent-list-next-button-horizontal-padding: null !default;
+
+@if $size == "default" {
+  $fluent-list-item-height: ds.$spacing-320 !default;
+  $fluent-list-item-vertical-padding: ds.$spacing-60 !default;
+  $fluent-list-item-horizontal-padding: ds.$spacing-120 !default;
+  $fluent-list-group-header-vertical-padding: ds.$spacing-60 !default;
+  $fluent-list-next-button-horizontal-padding: ds.$spacing-320 !default;
+}
+
+@else if $size == "compact" {
+  $fluent-list-item-height: ds.$spacing-240 !default;
+  $fluent-list-item-vertical-padding: ds.$spacing-40 !default;
+  $fluent-list-item-horizontal-padding: ds.$spacing-80 !default;
+  $fluent-list-group-header-vertical-padding: ds.$spacing-80 !default;
+  $fluent-list-next-button-horizontal-padding: ds.$spacing-240 !default;
+}
+
+:root {
+  --dx-list-item-padding-inline: #{$fluent-list-item-horizontal-padding};
+  --dx-list-item-padding-block: #{$fluent-list-item-vertical-padding};
+}
+
+// Values hoisted from style-file literals (tokenized)
+$fluent-list-group-header-font-weight: ds.$font-weight-500 !default; // dx-no-semantic-role: 500 is off the weight-role scale (400/600/700)
+$fluent-list-item-border-width: ds.$border-width-10 !default;
+$fluent-list-border-width: ds.$border-width-10 !default;
+$fluent-list-select-all-height: ds.$spacing-10 !default;
+$fluent-list-slide-menu-button-bottom: ds.$spacing-10 !default;
+$fluent-list-state-hover-border: ds.$border-width-10 solid !default;
+$fluent-list-slide-menu-button-menu-border: ds.$border-width-10 solid transparent !default;
+$fluent-list-context-menucontent-border: ds.$border-width-10 solid !default;
+$fluent-list-items-row-gap: ds.$spacing-20 !default;
+$fluent-list-empty-message-min-height: 2em !default; // dx-relative: scales with the parent font-size
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_colors.scss
new file mode 100644
index 000000000000..4aaacad21c0d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_colors.scss
@@ -0,0 +1,22 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+/**
+* $name 10. Indicator color
+* $type color
+*/
+$load-indicator-segment-bg-color: ds.$spinner-color-primary-loader-rest !default;
+
+/**
+* $name 20. Indicator background color
+* $type color
+*/
+
+// Light track: DS spinner loader==track kills the ring contrast (see DIVERGENCES.md)
+$load-indicator-inner-segment-border-color: ds.$color-surface-primary-subdued-rest !default;
+
+// Decorative accent shimmer; foundation has no sparkle role — primary surface steps (see DIVERGENCES.md)
+$load-indicator-animation-sparkle-bg-color1: ds.$color-surface-primary-default-rest !default;
+$load-indicator-animation-sparkle-bg-color2: ds.$color-surface-primary-default-hovered !default;
+$load-indicator-animation-sparkle-bg-color3: ds.$color-surface-primary-compound-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_index.scss
new file mode 100644
index 000000000000..f9977f2ed6b6
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_index.scss
@@ -0,0 +1,133 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/loadIndicator" as *;
+
+// adduse
+
+.dx-loadindicator {
+  line-height: 100%;
+}
+
+.dx-loadindicator-image {
+  .dx-loadindicator-content {
+    animation: none;
+  }
+}
+
+.dx-loadindicator-icon {
+  height: 100%;
+  width: 100%;
+}
+
+.dx-loadindicator-segment {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+}
+
+.dx-loadindicator-segment-inner {
+  position: relative;
+  height: 100%;
+  border-color: $load-indicator-segment-bg-color;
+  border-width: $load-indicator-segment-border-width;
+  border-style: solid;
+  border-bottom-color: transparent;
+  animation: none;
+  border-radius: 50%;
+}
+
+.dx-loadindicator-content-circle {
+  animation: dx-content-rotation 1568ms linear infinite;
+
+  .dx-loadindicator-icon {
+    position: absolute;
+    animation: dx-icon-rotation 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+  }
+
+  .dx-loadindicator-segment0,
+  .dx-loadindicator-segment1 {
+    width: 50%;
+    height: 100%;
+    overflow: hidden;
+
+    .dx-loadindicator-segment-inner {
+      width: 200%;
+    }
+  }
+
+  .dx-loadindicator-segment0 {
+    left: 0;
+
+    .dx-loadindicator-segment-inner {
+      border-right-color: transparent;
+      transform: rotate(-129deg);
+      animation: dx-left-segment-rotation 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+    }
+  }
+
+  .dx-loadindicator-segment2 {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+
+    .dx-loadindicator-segment-inner {
+      border-color: $load-indicator-inner-segment-border-color;
+      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 loadindicator-animation-sparkle(
+  $load-indicator-animation-sparkle-bg-color1,
+  $load-indicator-animation-sparkle-bg-color2,
+  $load-indicator-animation-sparkle-bg-color3
+);
+
+@keyframes dx-content-rotation {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes dx-icon-rotation {
+  12.5% { transform: rotate(135deg); }
+  25% { transform: rotate(270deg); }
+  37.5% { transform: rotate(405deg); }
+  50% { transform: rotate(540deg); }
+  62.5% { transform: rotate(675deg); }
+  75% { transform: rotate(810deg); }
+  87.5% { transform: rotate(945deg); }
+  to { transform: rotate(1080deg); }
+}
+
+@keyframes dx-left-segment-rotation {
+  from { transform: rotate(130deg); }
+  50% { transform: rotate(-5deg); }
+  to { transform: rotate(130deg); }
+}
+
+@keyframes dx-right-segment-rotation {
+  from { transform: rotate(-130deg); }
+  50% { transform: rotate(5deg); }
+  to { transform: rotate(-130deg); }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_sizes.scss
new file mode 100644
index 000000000000..06134706860a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadIndicator/_sizes.scss
@@ -0,0 +1,7 @@
+@use "../sizes" as *;
+
+// adduse
+
+
+// Values hoisted from style-file literals (tokenized)
+$load-indicator-segment-border-width: 0.12em !default; // dx-relative: scales with the parent font-size
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_colors.scss
new file mode 100644
index 000000000000..f307e697495c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_colors.scss
@@ -0,0 +1,12 @@
+@use "sass:color";
+@use "../sizes" as *;
+@use "../colors" as *;
+@use "../overlay/colors" as *;
+
+// adduse
+
+/**
+* $name 30. Background color
+* $type color
+*/
+$loadpanel-content-bg: $overlay-content-bg !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_index.scss
new file mode 100644
index 000000000000..fdaf77aa3317
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_index.scss
@@ -0,0 +1,17 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/loadPanel";
+
+// adduse
+@use "../overlay";
+
+
+.dx-loadpanel-content {
+  border: none;
+  background: $loadpanel-content-bg;
+  padding: $load-panel-padding;
+  border-radius: $load-panel-border-radius;
+  box-shadow: $load-panel-box-shadow;
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_sizes.scss
new file mode 100644
index 000000000000..0f0fad8ad030
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/loadPanel/_sizes.scss
@@ -0,0 +1,10 @@
+@use "sass:color";
+@use "../colors" as *;
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$load-panel-padding: ds.$spacing-120 ds.$spacing-240 !default;
+$load-panel-border-radius: ds.$border-radius-80 !default;
+$load-panel-box-shadow: 0 ds.$spacing-80 ds.$spacing-160 0 color.change($base-shadow-color, $alpha: 0.14) !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_colors.scss
new file mode 100644
index 000000000000..59cde3abeda1
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_colors.scss
@@ -0,0 +1,9 @@
+@use "../dropDownEditor/colors" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$lookup-icon-color: $dropdowneditor-icon-color !default;
+$lookup-icon-color-active: $dropdowneditor-icon-active-color !default;
+
+$lookup-shadow: ds.$box-shadow-sm !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_index.scss
new file mode 100644
index 000000000000..581d45764d6f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_index.scss
@@ -0,0 +1,174 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../textEditor/sizes" as *;
+@use "../textEditor/colors" as *;
+@use "../dropDownEditor" as *;
+@use "../common/mixins" as *;
+@use "../../base/lookup";
+@use "../../base/lookup/mixins" as *;
+@use "../overlay/colors" as *;
+
+// adduse
+@use "../dropDownList";
+
+.dx-lookup {
+  .dx-lookup-arrow {
+    inset-inline-end: $texteditor-spin-button-horizontal-padding;
+  }
+
+  &.dx-editor-filled,
+  &.dx-editor-outlined {
+    .dx-lookup-field {
+      padding-inline-start: $fluent-filled-texteditor-input-horizontal-padding;
+      padding-inline-end: calc(#{$fluent-filled-texteditor-input-horizontal-padding} + #{$fluent-base-icon-size});
+    }
+
+    &.dx-invalid {
+      .dx-lookup-field {
+        padding-inline-end: calc(#{$fluent-filled-texteditor-input-horizontal-padding} + #{$fluent-base-icon-size} * 2);
+      }
+    }
+  }
+
+  &.dx-editor-underlined {
+    .dx-lookup-field {
+      padding-inline-start: $fluent-base-standard-texteditor-input-horizontal-padding;
+      padding-inline-end: calc(#{$fluent-base-standard-texteditor-input-horizontal-padding} + #{$fluent-base-icon-size} + #{$texteditor-spin-button-horizontal-padding});
+    }
+
+    &.dx-invalid {
+      .dx-lookup-field {
+        padding-inline-end: calc(#{$fluent-base-standard-texteditor-input-horizontal-padding} + #{$fluent-base-icon-size} * 2 + #{$texteditor-spin-button-horizontal-padding});
+      }
+    }
+  }
+
+  &.dx-invalid {
+    .dx-lookup-arrow::after {
+      @include dx-invalid-fluent-badge();
+
+      inset-inline-end: $fluent-base-icon-size;
+    }
+  }
+
+  &.dx-valid {
+    .dx-lookup-arrow::after {
+      @include dx-valid-fluent-badge();
+
+      inset-inline-end: $fluent-base-icon-size;
+    }
+  }
+
+  &.dx-validation-pending {
+    .dx-lookup-field-wrapper {
+      .dx-pending-indicator {
+        @include dx-pending-indicator-fluent();
+
+        inset-inline-end: $fluent-base-icon-size;
+      }
+    }
+  }
+}
+
+.dx-lookup-field {
+  min-height: $lookup-field-height;
+  line-height: $fluent-texteditor-line-height;
+  padding-top: $fluent-filled-texteditor-input-top-padding;
+  padding-bottom: $fluent-filled-texteditor-input-bottom-padding;
+
+  &::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",
+  $fluent-base-icon-size,
+  $lookup-icon-color,
+  $lookup-icon-color-active,
+  $fluent-base-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: $fluent-lookup-popup-content-top;
+  }
+
+  &.dx-popup-wrapper {
+    .dx-overlay-content {
+      overflow: visible;
+    }
+  }
+
+  .dx-popover-arrow {
+    display: block;
+
+    &::after {
+      box-shadow: $lookup-shadow;
+      background: $overlay-content-bg;
+      border-top-right-radius: $lookup-arrow-border-radius;
+    }
+  }
+
+  &.dx-position-top {
+    .dx-popover-arrow {
+      &::after {
+        border-bottom-left-radius: $lookup-arrow-border-radius;
+      }
+    }
+  }
+}
+
+.dx-lookup-empty {
+  .dx-lookup-field {
+    color: $texteditor-placeholder-color;
+  }
+}
+
+.dx-lookup-popup-search .dx-list {
+  height: calc(100% - (#{$fluent-texteditor-input-height} + #{$lookup-search-padding-vertical} + #{$lookup-search-padding-vertical-top}));
+}
+
+.dx-lookup-search-wrapper {
+  padding: $lookup-search-padding-vertical $lookup-search-padding-horizontal;
+  padding-top: $lookup-search-padding-vertical-top;
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_sizes.scss
new file mode 100644
index 000000000000..6fbd2e14f40b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/lookup/_sizes.scss
@@ -0,0 +1,24 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$lookup-field-height: null !default;
+$lookup-search-padding-vertical: ds.$spacing-40 !default;
+$lookup-search-padding-vertical-top: null !default;
+$lookup-search-padding-horizontal: null !default;
+$lookup-arrow-border-radius: ds.$border-radius-20 !default;
+
+$fluent-lookup-popup-content-top: 49px !default; // dx-offscale: 49px
+
+@if $size == "default" {
+  $lookup-field-height: ds.$spacing-300 !default;
+  $lookup-search-padding-horizontal: ds.$spacing-120 !default;
+  $lookup-search-padding-vertical-top: ds.$spacing-120 !default;
+}
+
+@else if $size == "compact" {
+  $lookup-field-height: ds.$spacing-220 !default;
+  $lookup-search-padding-horizontal: ds.$spacing-80 !default;
+  $lookup-search-padding-vertical-top: ds.$spacing-80 !default;
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/map/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/map/_index.scss
new file mode 100644
index 000000000000..7719b08c6cf0
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/map/_index.scss
@@ -0,0 +1,7 @@
+@use "sass:color";
+@use "../colors" as *;
+@use "../sizes" as *;
+@use "../../base/map";
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_colors.scss
new file mode 100644
index 000000000000..8ac3085e70c5
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_colors.scss
@@ -0,0 +1,27 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$menu-popup-bg: ds.$color-surface-neutral-default-rest !default;
+$menu-item-hover-bg: ds.$color-surface-neutral-default-hovered !default;
+$menu-item-bg-active: ds.$color-surface-neutral-default-active !default;
+
+/**
+* $name 10. Text color
+* $type color
+*/
+$menu-color: ds.$color-content-neutral-default-rest !default;
+$menu-item-expanded-color: $menu-color !default;
+
+/**
+* $name 20. Selected item background color
+* $type color
+*/
+$menu-item-selected-bg: ds.$color-surface-neutral-default-selected !default;
+$menu-popup-border-color: ds.$color-border-neutral-default-rest !default;
+$menu-separator-bg: ds.$separator-color !default;
+$menu-item-selected-color: ds.$color-content-neutral-default-rest !default;
+$menu-item-link-color: ds.$color-content-primary-default-rest !default;
+$menu-item-focused-selected-bg: ds.$color-surface-neutral-default-selected-hovered !default;
+
+$menu-focused-shadow: ds.$box-shadow-md !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_index.scss
new file mode 100644
index 000000000000..f5118ca9ec6e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_index.scss
@@ -0,0 +1,108 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../button/sizes" as *;
+@use "../menuBase/sizes" as *;
+@use "../../base/icon_fonts" as *;
+
+// adduse
+@use "../menuBase" as *;
+@use "../../base/menu";
+
+.dx-context-menu-container-border {
+  background-color: transparent;
+}
+
+.dx-context-menu-content-delimiter {
+  background-color: transparent;
+}
+
+.dx-menu {
+  color: $menu-color;
+
+  .dx-menu-horizontal {
+    .dx-menu-item-popout {
+      margin-inline-start: $fluent-menu-icon-to-text-offset;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      @include dx-icon(spindown);
+      @include dx-icon-sizing($fluent-button-icon-size);
+    }
+  }
+
+  .dx-menu-vertical {
+    .dx-menu-item-popout {
+      margin-inline-start: $fluent-menu-icon-to-text-offset;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      @include dx-icon(spinright);
+      @include dx-icon-sizing($fluent-button-icon-size);
+    }
+  }
+
+  .dx-menu-item {
+    border-radius: $base-border-radius;
+
+    .dx-menu-item-content {
+      display: flex;
+      padding: $fluent-menu-vertical-padding $fluent-menu-horizontal-padding;
+
+      .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: $fluent-menu-icon-to-text-offset;
+        }
+      }
+    }
+  }
+}
+
+.dx-menu-adaptive-mode {
+  background-color: $menu-popup-bg;
+
+  .dx-treeview {
+    border: $fluent-menu-treeview-border;
+    border-color: $menu-popup-border-color;
+    border-radius: $base-border-radius;
+
+    &,
+    &.dx-state-focused {
+      box-shadow: $menu-focused-shadow;
+    }
+  }
+
+  .dx-treeview-node {
+    &.dx-state-focused {
+      .dx-treeview-node .dx-treeview-toggle-item-visibility {
+        color: inherit;
+      }
+
+      .dx-treeview-toggle-item-visibility {
+        color: $menu-popup-bg;
+      }
+    }
+  }
+
+  .dx-treeview-node-container:first-child > .dx-treeview-node {
+    border-bottom: $fluent-menu-treeview-node-border-bottom;
+    border-bottom-color: $menu-popup-border-color
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_sizes.scss
new file mode 100644
index 000000000000..bb177fbad03f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/menu/_sizes.scss
@@ -0,0 +1,19 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-menu-vertical-padding: null !default;
+
+@if $size == "default" {
+  $fluent-menu-vertical-padding: ds.$spacing-60 !default;
+}
+
+@if $size == "compact" {
+  $fluent-menu-vertical-padding: ds.$spacing-40 !default;
+}
+
+
+// Values hoisted from style-file literals (tokenized)
+$fluent-menu-treeview-border: ds.$border-width-10 solid !default;
+$fluent-menu-treeview-node-border-bottom: ds.$border-width-10 solid !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_colors.scss
new file mode 100644
index 000000000000..1382f5b714ad
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_colors.scss
@@ -0,0 +1,5 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$menu-item-color-disabled: ds.$color-content-neutral-default-disabled;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_index.scss
new file mode 100644
index 000000000000..588fd3fba2c2
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_index.scss
@@ -0,0 +1,79 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../menu/colors" as *;
+@use "../button/sizes" as *;
+@use "../common/mixins" as *;
+@use "../../base/icon_fonts" as *;
+@use "../../base/mixins" as *;
+@use "../../base/menuBase";
+
+// adduse
+
+.dx-menu-item {
+  color: $menu-color;
+
+  a {
+    color: $menu-item-link-color;
+  }
+
+  &.dx-state-disabled {
+    color: $menu-item-color-disabled;
+  }
+
+  &.dx-state-hover {
+    background-color: $menu-item-hover-bg;
+  }
+
+  &.dx-state-focused {
+    background-color: $menu-item-hover-bg;
+  }
+
+  &.dx-state-active {
+    background-color: $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: $menu-item-selected-bg;
+  color: $menu-item-selected-color;
+
+  &.dx-state-focused {
+    background-color: $menu-item-focused-selected-bg;
+  }
+}
+
+.dx-menu-item-expanded,
+.dx-menu-item-expanded.dx-state-hover,
+.dx-menu-item-expanded.dx-state-focused {
+  color: $menu-item-expanded-color;
+  background-color: $menu-item-selected-bg;
+}
+
+.dx-menu-base {
+  &.dx-state-focused {
+    outline: none;
+  }
+
+  .dx-icon {
+    @include dx-icon-sizing($fluent-button-icon-size);
+  }
+
+  .dx-menu-item {
+    .dx-menu-item-content {
+      line-height: $fluent-menu-item-line-height;
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_sizes.scss
new file mode 100644
index 000000000000..9ce605c48712
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/menuBase/_sizes.scss
@@ -0,0 +1,21 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-menu-item-line-height: null !default;
+$fluent-menu-item-with-icon-horizontal-padding: null !default;
+$fluent-menu-horizontal-padding: null !default;
+$fluent-menu-icon-to-text-offset: ds.$spacing-40;
+
+@if $size == "default" {
+  $fluent-menu-item-line-height: ds.$line-height-base-md !default;
+  $fluent-menu-horizontal-padding: ds.$spacing-120 !default;
+  $fluent-menu-item-with-icon-horizontal-padding: ds.$spacing-400 !default;
+}
+
+@else if $size == "compact" {
+  $fluent-menu-item-line-height: ds.$line-height-base-sm !default;
+  $fluent-menu-horizontal-padding: ds.$spacing-80 !default;
+  $fluent-menu-item-with-icon-horizontal-padding: ds.$spacing-320 !default;
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_colors.scss
new file mode 100644
index 000000000000..89c53a85429e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_colors.scss
@@ -0,0 +1,6 @@
+@use "sass:color";
+@use "../sizes" as *;
+@use "../colors" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_index.scss
new file mode 100644
index 000000000000..eb9938faba2e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_index.scss
@@ -0,0 +1,8 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/multiView";
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_sizes.scss
new file mode 100644
index 000000000000..43b104010f9e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/multiView/_sizes.scss
@@ -0,0 +1,4 @@
+@use "../sizes" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_colors.scss
new file mode 100644
index 000000000000..13f6bc13bfce
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_colors.scss
@@ -0,0 +1,12 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$numberbox-spin-icon-color: ds.$color-content-neutral-subdued-rest !default;
+$numberbox-spin-icon-background-hover: ds.$color-surface-neutral-default-hovered !default;
+$numberbox-spin-icon-background-active: ds.$color-surface-neutral-default-active !default;
+
+$numberbox-foreground-disabled: ds.$color-content-neutral-default-disabled !default;
+
+// Base-layer values injected with design tokens (wave B1)
+$fluent-numberbox-spin-idle-opacity: ds.$opacity-20 !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_index.scss
new file mode 100644
index 000000000000..eeaf2bdcdaf1
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_index.scss
@@ -0,0 +1,89 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../textEditor/sizes" as *;
+@use "../textEditor/colors" as *;
+@use "../../base/numberBox" with (
+  $numberbox-spin-idle-opacity: $fluent-numberbox-spin-idle-opacity,
+);
+
+// adduse
+@use "../textEditor" as *;
+
+.dx-numberbox {
+  &.dx-editor-outlined,
+  &.dx-editor-filled {
+    .dx-numberbox-spin-up {
+      border-start-end-radius: $base-border-radius;
+    }
+
+    .dx-numberbox-spin-down {
+      border-end-end-radius: $base-border-radius;
+    }
+  }
+}
+
+.dx-numberbox-spin-container {
+  overflow: hidden;
+  width: $fluent-numberbox-spin-container-width;
+
+  .dx-state-disabled & {
+    opacity: 1;
+  }
+}
+
+.dx-numberbox-spin-up-icon {
+  @include dx-icon(spinup);
+
+  color: $numberbox-spin-icon-color;
+}
+
+.dx-numberbox-spin-down-icon {
+  @include dx-icon(spindown);
+
+  color: $numberbox-spin-icon-color;
+}
+
+.dx-numberbox-spin-up-icon,
+.dx-numberbox-spin-down-icon {
+  @include dx-icon-font-centered-sizing($fluent-base-icon-size);
+}
+
+.dx-numberbox-spin-button {
+  height: 50%;
+
+  &.dx-state-hover {
+    background-color: $numberbox-spin-icon-background-hover;
+  }
+
+  &.dx-state-active {
+    background-color: $numberbox-spin-icon-background-active;
+  }
+
+  &.dx-state-disabled {
+    .dx-numberbox-spin-up-icon,
+    .dx-numberbox-spin-down-icon {
+      color: $numberbox-foreground-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: $fluent-numberbox-touch-friendly-spin-container-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/dxdsfluent/numberBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_sizes.scss
new file mode 100644
index 000000000000..bcf173631c58
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/numberBox/_sizes.scss
@@ -0,0 +1,16 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-numberbox-spin-container-width: ds.$spacing-240 !default;
+$fluent-numberbox-touch-friendly-spin-container-width: null !default;
+
+@if $size == "default" {
+  $fluent-numberbox-touch-friendly-spin-container-width: ds.$spacing-480 !default;
+}
+
+@else if $size == "compact" {
+  $fluent-numberbox-touch-friendly-spin-container-width: ds.$spacing-480 !default;
+}
+
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_colors.scss
new file mode 100644
index 000000000000..266bef95193b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_colors.scss
@@ -0,0 +1,15 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+/**
+* $name 10. Content background color
+* $type color
+*/
+$overlay-content-bg: ds.$color-surface-neutral-default-rest !default;
+
+/**
+* $name 20. Shader background color
+* $type color
+*/
+$overlay-shader-bg: ds.$color-surface-backdrop-default-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_index.scss
new file mode 100644
index 000000000000..491f1e984e08
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_index.scss
@@ -0,0 +1,16 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../common/mixins" as *;
+@use "../../base/overlay";
+
+// adduse
+.dx-overlay-shader {
+  background-color: $overlay-shader-bg;
+}
+
+.dx-overlay-wrapper {
+  @include dx-base-typography();
+}
+
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_sizes.scss
new file mode 100644
index 000000000000..43b104010f9e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/overlay/_sizes.scss
@@ -0,0 +1,4 @@
+@use "../sizes" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_colors.scss
new file mode 100644
index 000000000000..b1611b6fb89c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_colors.scss
@@ -0,0 +1,20 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+/**
+* $name 180. Pager selected item text color
+* $type color
+*/
+$pagination-page-selected-color: ds.$color-content-neutral-default-static-dark-rest !default;
+$pagination-page-hovered-bg: ds.$color-surface-neutral-default-hovered !default;
+
+/**
+* $name 190. Pager selected item background color
+* $type color
+*/
+$pagination-page-selected-bg: ds.$color-surface-primary-default-rest !default;
+
+// Base-layer values injected with design tokens (wave B1)
+$fluent-pagination-info-opacity: ds.$opacity-70 !default;
+$fluent-pagination-nav-disabled-opacity: ds.$opacity-30 !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_index.scss
new file mode 100644
index 000000000000..2b6cf2e4021e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_index.scss
@@ -0,0 +1,115 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../../base/pagination" with (
+  $pagination-page-padding-2: $fluent-pagination-page-padding-2,
+  $pagination-page-margin-left: $fluent-pagination-page-margin-left,
+  $pagination-page-margin-right: $fluent-pagination-page-margin-right,
+  $pagination-separator-padding-left: $fluent-pagination-separator-padding-left,
+  $pagination-separator-padding-right: $fluent-pagination-separator-padding-right,
+  $pagination-navigate-button-width-2: $fluent-pagination-navigate-button-width-2,
+  $pagination-navigate-button-height: $fluent-pagination-navigate-button-height,
+  $pagination-first-child-margin-left: $fluent-pagination-first-child-margin-left,
+  $pagination-first-child-padding-left: $fluent-pagination-first-child-padding-left,
+  $pagination-first-child-padding-right: $fluent-pagination-first-child-padding-right,
+  $pagination-first-child-padding-top: $fluent-pagination-first-child-padding-top,
+  $pagination-first-child-padding-bottom: $fluent-pagination-first-child-padding-bottom,
+  $pagination-first-child-margin-left-2: $fluent-pagination-first-child-margin-left-2,
+  $pagination-page-index-width: $fluent-pagination-page-index-width,
+  $pagination-pages-count-padding-left: $fluent-pagination-pages-count-padding-left,
+  $pagination-info-opacity: $fluent-pagination-info-opacity,
+  $pagination-nav-disabled-opacity: $fluent-pagination-nav-disabled-opacity,
+);
+@use "../gridBase/sizes" as *;
+
+// adduse
+
+
+.dx-pager,
+.dx-pagination {
+  padding: $fluent-pagination-paddings $fluent-grid-base-cell-horizontal-padding;
+
+  &.dx-light-mode {
+    .dx-page-sizes {
+      min-width: $fluent-pagination-light-pagesizes-min-width;
+    }
+
+    .dx-page-index {
+      min-width: $fluent-pagination-light-pageindex-min-width;
+    }
+
+    .dx-pages {
+      .dx-page-indexes {
+        vertical-align: middle;
+      }
+
+      .dx-navigate-button,
+      .dx-light-pages {
+        vertical-align: middle;
+      }
+    }
+  }
+
+  .dx-pages {
+    .dx-page {
+      padding: $fluent-pagination-page-padding;
+      line-height: $fluent-pagination-page-line-height;
+    }
+
+    .dx-separator {
+      padding-left: $fluent-pagination-separator-paddings;
+      padding-right: $fluent-pagination-separator-paddings;
+    }
+
+    .dx-navigate-button {
+      width: $fluent-pagination-navigate-button-width;
+      height: $fluent-pagination-navbutton-height;
+      padding: $fluent-pagination-navbutton-paddings;
+    }
+
+    .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($fluent-pagination-navbutton-icon-size);
+    }
+  }
+
+  .dx-page,
+  .dx-page-size {
+    font-size: $fluent-pagination-page-font-size;
+
+    &:hover {
+      background-color: $pagination-page-hovered-bg;
+    }
+
+    border-radius: $fluent-pagination-page-border-radius;
+  }
+
+  .dx-page-sizes .dx-page-size {
+    &:first-child,
+    &.dx-first-child {
+      margin-left: 0;
+    }
+
+    padding: $fluent-pagination-page-padding;
+    line-height: $fluent-pagination-page-line-height;
+  }
+
+  .dx-pages,
+  .dx-page-sizes {
+    .dx-selection {
+      font-weight: $fluent-pagination-selected-font-weight;
+      background-color: $pagination-page-selected-bg;
+      color: $pagination-page-selected-color;
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_sizes.scss
new file mode 100644
index 000000000000..c502ae283952
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/pagination/_sizes.scss
@@ -0,0 +1,49 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-pagination-paddings: ds.$spacing-130 !default;
+$fluent-pagination-separator-paddings: ds.$spacing-80 !default;
+$fluent-pagination-page-padding: ds.$spacing-90 ds.$spacing-120 !default;
+$fluent-pagination-page-line-height: ds.$line-height-120 !default; // dx-no-semantic-role: 120 is off the line-height-role scale
+$fluent-pagination-page-font-size: ds.$font-size-base-sm !default;
+$fluent-pagination-navbutton-paddings: $fluent-pagination-page-padding !default;
+$fluent-pagination-navbutton-height: ds.$spacing-120 !default;
+$fluent-pagination-navbutton-icon-size: null !default;
+$fluent-pagination-light-pagesizes-min-width: null !default;
+$fluent-pagination-light-pageindex-min-width: null !default;
+
+@if $size == "default" {
+  $fluent-pagination-navbutton-icon-size: ds.$spacing-210 !default;
+  $fluent-pagination-light-pagesizes-min-width: 62px !default; // dx-offscale: 62px
+  $fluent-pagination-light-pageindex-min-width: ds.$spacing-320 !default;
+}
+
+@else if $size == "compact" {
+  $fluent-pagination-navbutton-icon-size: ds.$spacing-160 !default;
+  $fluent-pagination-light-pagesizes-min-width: 42px !default; // dx-offscale: 42px
+  $fluent-pagination-light-pageindex-min-width: 27px !default; // dx-offscale: 27px
+}
+
+// Values hoisted from style-file literals (tokenized)
+$fluent-pagination-selected-font-weight: ds.$font-weight-500 !default; // dx-no-semantic-role: 500 is off the weight-role scale (400/600/700)
+$fluent-pagination-page-border-radius: 20px !default; // dx-offscale: 20px (pill; candidate: ds.$border-radius-full)
+$fluent-pagination-navigate-button-width: ds.$spacing-90 !default;
+
+// Base-layer sizing injected with design tokens (wave B2)
+$fluent-pagination-page-padding-2: ds.$spacing-70 ds.$spacing-80 ds.$spacing-80 !default;
+$fluent-pagination-page-margin-left: ds.$spacing-50 !default;
+$fluent-pagination-page-margin-right: ds.$spacing-10 !default;
+$fluent-pagination-separator-padding-left: ds.$spacing-80 !default;
+$fluent-pagination-separator-padding-right: ds.$spacing-80 !default;
+$fluent-pagination-navigate-button-width-2: ds.$spacing-100 !default;
+$fluent-pagination-navigate-button-height: ds.$spacing-200 !default;
+$fluent-pagination-first-child-margin-left: ds.$spacing-10 !default;
+$fluent-pagination-first-child-padding-left: ds.$spacing-100 !default;
+$fluent-pagination-first-child-padding-right: ds.$spacing-90 !default;
+$fluent-pagination-first-child-padding-top: ds.$spacing-70 !default;
+$fluent-pagination-first-child-padding-bottom: ds.$spacing-80 !default;
+$fluent-pagination-first-child-margin-left-2: ds.$spacing-40 !default;
+$fluent-pagination-page-index-width: ds.$spacing-400 !default;
+$fluent-pagination-pages-count-padding-left: ds.$spacing-60 !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_colors.scss
new file mode 100644
index 000000000000..2d859d67edf0
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_colors.scss
@@ -0,0 +1,49 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$pivotgrid-area-background: ds.$color-surface-neutral-default-rest !default;
+$pivotgrid-border-color: ds.$color-border-neutral-default-rest !default;
+
+/**
+* $name 10. Header text color
+* $type color
+*/
+$pivotgrid-area-color: ds.$color-content-neutral-default-rest !default;
+$pivotgrid-field-area-box-text-color: $pivotgrid-area-color !default;
+$pivotgrid-field-area-box-background-color: ds.$color-surface-neutral-deep-rest !default;
+$pivotgrid-field-area-box-font-weight: 400 !default;
+$pivotgrid-data-area-color: ds.$color-content-neutral-default-rest !default;
+
+/**
+* $name 20. Total background color
+* $type color
+*/
+$pivotgrid-totalcolor: ds.$color-surface-neutral-default-rest !default;
+
+/**
+* $name 30. Grand total background color
+* $type color
+*/
+$pivotgrid-grandtotalcolor: ds.$color-surface-neutral-deep-rest !default;
+
+/**
+* $name 40. Field area text color
+* $type color
+*/
+$pivotgrid-field-area-text-color: ds.$color-content-neutral-subdued-rest !default;
+$pivotgrid-accent-color: ds.$color-border-primary-default-rest !default;
+$pivotgrid-drag-header-border-color: rgb(from #{ds.$color-border-primary-default-rest} r g b / 0.5) !default;
+$pivotgrid-drag-header-first-shadow-color: ds.$color-shadow-ambient !default;
+$pivotgrid-drag-header-second-shadow-color: ds.$color-shadow-key !default;
+$pivotgrid-position-indicator-color: ds.$color-border-neutral-accessible-rest !default;
+$pivotgrid-chevron-icon-color: $pivotgrid-area-color !default;
+
+// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
+$pivotgrid-accent: ds.$color-content-primary-default-rest !default;
+$pivotgrid-border-color-disabled: ds.$color-border-neutral-default-disabled !default;
+$pivotgrid-text-color: ds.$color-content-neutral-default-rest !default;
+
+// Color computations hoisted from style files (phase 0.5 layer normalization)
+$fluent-pivotgrid-drag-header-shadow: 0 3px 4px ds.$color-shadow-key !default;
+$pivotgrid-area-field-bg: rgb(from #{$pivotgrid-field-area-box-background-color} r g b / 0.9) !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_index.scss
new file mode 100644
index 000000000000..28a183bea148
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_index.scss
@@ -0,0 +1,246 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../common/mixins" as *;
+@use "../../base/icon_fonts" as *;
+@use "../gridBase/colors" as *;
+@use "../treeView/sizes" as *;
+@use "../button/mixins" as *;
+@use "../button/colors" as *;
+@use "../../base/pivotGrid" as basePivotGrid with (
+  $pivotgrid-position-indicator-vertical-height: $fluent-pivotgrid-position-indicator-vertical-height,
+  $pivotgrid-position-indicator-horizontal-width: $fluent-pivotgrid-position-indicator-horizontal-width,
+  $pivotgrid-position-indicator-last-margin-left: $fluent-pivotgrid-position-indicator-last-margin-left,
+  $pivotgrid-area-box-margin-bottom: $fluent-pivotgrid-area-box-margin-bottom,
+  $pivotgrid-expand-icon-container-outline: $fluent-pivotgrid-expand-icon-container-outline,
+  $pivotgrid-toolbar-margin-right: $fluent-pivotgrid-toolbar-margin-right,
+  $pivotgrid-field-chooser-button-margin-right: $fluent-pivotgrid-field-chooser-button-margin-right,
+  $pivotgrid-button-margin: $fluent-pivotgrid-button-margin,
+  $pivotgrid-last-cell-min-width: $fluent-pivotgrid-last-cell-min-width,
+  $pivotgrid-icon-sorted-margin-left: $fluent-pivotgrid-icon-sorted-margin-left,
+  $pivotgrid-fields-area-head-padding: $fluent-pivotgrid-fields-area-head-padding,
+  $pivotgrid-treeview-search-margin: $fluent-pivotgrid-treeview-search-margin,
+  $pivotgrid-area-padding: $fluent-pivotgrid-area-padding,
+  $pivotgrid-area-fields-margin-top-2: $fluent-pivotgrid-area-fields-margin-top-2,
+  $pivotgrid-position-indicator-last-margin-left-2: $fluent-pivotgrid-position-indicator-last-margin-left-2,
+  $pivotgrid-toolbar-margin-left: $fluent-pivotgrid-toolbar-margin-left,
+  $pivotgrid-field-chooser-button-margin-left: $fluent-pivotgrid-field-chooser-button-margin-left,
+  $pivotgrid-fields-area-head-padding-left: $fluent-pivotgrid-fields-area-head-padding-left,
+  $pivotgrid-icon-sorted-margin-right: $fluent-pivotgrid-icon-sorted-margin-right,
+  $pivotgrid-drag-header-border-color: $pivotgrid-drag-header-border-color,
+  $pivotgrid-drag-header-first-shadow-color: $pivotgrid-drag-header-first-shadow-color,
+  $pivotgrid-drag-header-second-shadow-color: $pivotgrid-drag-header-second-shadow-color,
+  $pivotgrid-border-color: $pivotgrid-border-color,
+  $pivotgrid-common-left-right-padding: $pivotgrid-common-left-right-padding,
+  $pivotgrid-area-color: $pivotgrid-area-color,
+  $header-filter-color: $header-filter-color,
+  $header-filter-color-empty: $header-filter-color-empty,
+  $pivotgrid-area-background: $pivotgrid-area-background,
+  $pivotgrid-common-top-bottom-padding: $area-field-top-bottom-padding,
+  $pivotgrid-header-top-bottom-padding: $pivotgrid-header-top-bottom-padding,
+  $pivotgrid-field-indicators-offset: $pivotgrid-field-indicators-offset,
+  $pivotgrid-indicators-line-height: $pivotgrid-indicators-line-height,
+  $pivotgrid-totalcolor: $pivotgrid-totalcolor,
+  $pivotgrid-field-area-text-color: $pivotgrid-field-area-text-color,
+  $pivotgrid-data-area-color: $pivotgrid-data-area-color,
+  $pivotgrid-grandtotalcolor: $pivotgrid-grandtotalcolor,
+  $pivotgrid-accent-color: $pivotgrid-accent-color,
+  $pivotgrid-empty-area-text-padding: $pivotgrid-empty-area-text-padding,
+  $pivotgrid-button-top-padding: $pivotgrid-button-top-padding,
+);
+
+// adduse
+
+
+.dx-pivotgrid-fields-container {
+  &.dx-drag {
+    .dx-area-field.dx-area-box {
+      background-color: $pivotgrid-area-field-bg;
+      border: $fluent-pivotgrid-area-box-border;
+      border-color: $pivotgrid-border-color-disabled;
+      box-shadow: $fluent-pivotgrid-drag-header-shadow;
+    }
+  }
+
+  .dx-area-field.dx-area-box {
+    color: $pivotgrid-field-area-box-text-color;
+    background-color: $pivotgrid-field-area-box-background-color;
+    border-radius: $area-field-border-radius;
+    border: $fluent-pivotgrid-area-box-border;
+    border-color: $pivotgrid-border-color-disabled;
+    font-size: $fluent-pivotgrid-headers-font-size;
+    font-weight: $pivotgrid-field-area-box-font-weight;
+    line-height: $fluent-pivotgrid-area-field-line-height;
+
+    .dx-header-filter {
+      color: $pivotgrid-accent;
+
+      &.dx-header-filter-empty {
+        color: $pivotgrid-area-color;
+      }
+    }
+  }
+
+  .dx-sort-up {
+    @include dx-icon-sizing($fluent-button-icon-size)
+  }
+
+  .dx-sort-down {
+    @include dx-icon-sizing($fluent-button-icon-size)
+  }
+
+  .dx-header-filter {
+    @include dx-icon-sizing($fluent-button-icon-size)
+  }
+}
+
+
+.dx-pivotgrid {
+  background-color: $pivotgrid-area-background;
+
+  .dx-pivotgrid-area {
+    &.dx-pivotgrid-area-data {
+      font-size: $fluent-pivotgrid-area-font-size;
+    }
+
+    &.dx-pivotgrid-vertical-headers,
+    &.dx-pivotgrid-horizontal-headers {
+      font-size: $fluent-pivotgrid-headers-font-size;
+
+      td {
+        font-weight: $fluent-pivotgrid-header-font-weight;
+      }
+
+      .dx-grandtotal,
+      .dx-total {
+        color: $pivotgrid-text-color;
+      }
+    }
+
+    td {
+      padding: $fluent-pivotgrid-cell-padding;
+
+      &.dx-pivotgrid-collapsed,
+      &.dx-pivotgrid-expanded {
+        padding: $fluent-pivotgrid-expanded-cell-padding;
+
+        > span {
+          padding: $fluent-pivotgrid-expanded-padding;
+        }
+      }
+    }
+  }
+
+
+  .dx-area-description-cell {
+    .dx-pivotgrid-toolbar {
+      padding-left: $fluent-pivotgrid-toolbar-padding-left;
+    }
+  }
+
+  .dx-row-total,
+  .dx-grandtotal {
+    &.dx-last-cell {
+      padding-left: $fluent-pivotgrid-total-text-left-padding;
+    }
+  }
+
+  .dx-expand-icon-container {
+    margin: 0;
+
+    @include dx-icon(chevronright);
+
+    font-size: $fluent-pivotgrid-headers-font-size;
+
+    &::before {
+      visibility: hidden;
+    }
+  }
+
+  .dx-pivotgrid-collapsed .dx-expand {
+    @include dx-icon(chevronright);
+    @include dx-icon-font-centered-sizing($fluent-pivotgrid-chevron-icon-size);
+
+    color: $pivotgrid-chevron-icon-color;
+  }
+
+  .dx-pivotgrid-expanded .dx-expand {
+    @include dx-icon(chevrondown);
+    @include dx-icon-font-centered-sizing($fluent-pivotgrid-chevron-icon-size);
+
+    color: $pivotgrid-chevron-icon-color;
+  }
+
+  .dx-area-tree-view {
+    td.dx-white-space-column {
+      width: $pivotgrid-empty-column-width;
+      min-width: $pivotgrid-empty-column-width;
+    }
+  }
+}
+
+.dx-pivotgridfieldchooser {
+  .dx-area-icon {
+    width: $fluent-button-icon-size;
+    height: $fluent-button-icon-size;
+    font-size: $fluent-button-icon-size;
+  }
+
+  .dx-area {
+    .dx-area-caption {
+      text-transform: uppercase;
+      font-size: $fluent-pivotgrid-headers-font-size;
+      font-weight: $fluent-pivotgrid-header-font-weight;
+      color: $pivotgrid-area-color;
+      vertical-align: middle;
+    }
+
+    .dx-area-fields {
+      margin-top: $fluent-pivotgrid-area-fields-margin-top;
+    }
+  }
+
+  .dx-treeview-border-visible .dx-scrollable-content > .dx-treeview-node-container {
+    padding-right: $fluent-pivotgrid-treeview-node-container-padding-right;
+  }
+
+  .dx-treeview-item-with-checkbox.dx-treeview-node-is-leaf {
+    padding-left: 0;
+
+    .dx-checkbox {
+      left: $fluent-pivotgrid-checkbox-left;
+    }
+  }
+
+  .dx-treeview-node-container-opened {
+    .dx-treeview-item-with-checkbox.dx-treeview-node-is-leaf {
+      padding-left: $fluent-treeview-toggle-item-width;
+
+      .dx-checkbox {
+        left: $fluent-treeview-checkbox-offset;
+      }
+    }
+  }
+
+  .dx-treeview-item {
+    min-height: $fluent-pivotgridfieldchooser-field-min-height;
+    padding: $fluent-pivotgrid-treeview-item-padding;
+
+    .dx-icon {
+      margin: $fluent-pivotgrid-icon-margin;
+
+      @include dx-icon-sizing($fluent-button-icon-size);
+    }
+  }
+
+  .dx-treeview-toggle-item-visibility {
+    height: $fluent-pivotgridfieldchooser-field-min-height;
+  }
+}
+
+.dx-pivotgrid-fields-container { // stylelint-disable-line no-duplicate-selectors
+  .dx-position-indicator {
+    background-color: $pivotgrid-position-indicator-color;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_sizes.scss
new file mode 100644
index 000000000000..1b9723a2f0f8
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/pivotGrid/_sizes.scss
@@ -0,0 +1,78 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-pivotgrid-cell-padding: null !default;
+$pivotgrid-common-left-right-padding: null !default;
+$fluent-pivotgrid-expanded-cell-padding: null !default;
+$fluent-pivotgrid-total-text-left-padding: null !default;
+$pivotgrid-header-top-bottom-padding: null !default;
+$pivotgrid-button-top-padding: null !default;
+$area-field-top-bottom-padding: null !default;
+
+$pivotgrid-empty-column-width: ds.$spacing-190 !default;
+$pivotgrid-field-indicators-offset: ds.$spacing-60 !default;
+$pivotgrid-indicators-line-height: ds.$line-height-120 !default; // dx-no-semantic-role: 120 is off the line-height-role scale
+$pivotgrid-empty-area-text-padding: ds.$spacing-50 !default;
+
+$area-field-border-radius: null !default;
+
+@if $size == "default" {
+  $fluent-pivotgrid-cell-padding: ds.$spacing-100 ds.$spacing-160 !default;
+  $pivotgrid-common-left-right-padding: ds.$spacing-100 !default;
+  $pivotgrid-header-top-bottom-padding: ds.$spacing-140 !default;
+  $fluent-pivotgrid-expanded-cell-padding: ds.$spacing-100 ds.$spacing-140 ds.$spacing-100 ds.$spacing-190 !default;
+  $fluent-pivotgrid-total-text-left-padding: ds.$spacing-220 !default;
+  $pivotgrid-button-top-padding: ds.$spacing-100 !default;
+  $area-field-border-radius: ds.$border-radius-60 !default;
+  $area-field-top-bottom-padding: ds.$spacing-50 !default;
+}
+
+@else if $size == "compact" {
+  $fluent-pivotgrid-cell-padding: ds.$spacing-70 ds.$spacing-110 !default;
+  $pivotgrid-common-left-right-padding: ds.$spacing-80 !default;
+  $pivotgrid-header-top-bottom-padding: ds.$spacing-50 !default;
+  $fluent-pivotgrid-expanded-cell-padding: ds.$spacing-70 ds.$spacing-80 ds.$spacing-70 ds.$spacing-130 !default;
+  $fluent-pivotgrid-total-text-left-padding: ds.$spacing-160 !default;
+  $pivotgrid-button-top-padding: ds.$spacing-50 !default;
+  $area-field-border-radius: ds.$border-radius-40 !default;
+  $area-field-top-bottom-padding: ds.$spacing-10 !default;
+}
+
+// Values hoisted from style-file literals (tokenized)
+$fluent-pivotgrid-headers-font-size: ds.$font-size-title-xs !default;
+$fluent-pivotgrid-area-font-size: 13px !default; // dx-offscale: 13px
+$fluent-pivotgrid-area-field-line-height: ds.$line-height-base-md !default;
+$fluent-pivotgrid-header-font-weight: ds.$font-weight-500 !default; // dx-no-semantic-role: 500 is off the weight-role scale (400/600/700)
+$fluent-pivotgrid-expanded-padding: 0 ds.$spacing-50 0 ds.$spacing-100 !default;
+$fluent-pivotgrid-toolbar-padding-left: ds.$spacing-80 !default;
+$fluent-pivotgrid-area-fields-margin-top: ds.$spacing-80 !default;
+$fluent-pivotgrid-treeview-node-container-padding-right: ds.$spacing-80 !default;
+$fluent-pivotgrid-checkbox-left: ds.$spacing-80 !default;
+$fluent-pivotgrid-treeview-item-padding: ds.$spacing-90 ds.$spacing-80 !default;
+$fluent-pivotgrid-icon-margin: 0 ds.$spacing-50 -1px 0 !default; // dx-offscale: -1px
+$fluent-pivotgrid-area-box-border: ds.$border-width-10 solid !default;
+$fluent-pivotgrid-chevron-icon-size: ds.$spacing-200 !default;
+$fluent-pivotgridfieldchooser-field-min-height: ds.$spacing-360 !default;
+
+// Base-layer sizing injected with design tokens (wave B2)
+$fluent-pivotgrid-position-indicator-vertical-height: ds.$spacing-20 !default;
+$fluent-pivotgrid-position-indicator-horizontal-width: ds.$spacing-20 !default;
+$fluent-pivotgrid-position-indicator-last-margin-left: ds.$spacing-30 !default;
+$fluent-pivotgrid-area-box-margin-bottom: ds.$spacing-40 !default;
+$fluent-pivotgrid-expand-icon-container-outline: ds.$spacing-20 solid !default;
+$fluent-pivotgrid-toolbar-margin-right: ds.$spacing-100 !default;
+$fluent-pivotgrid-field-chooser-button-margin-right: ds.$spacing-40 !default;
+$fluent-pivotgrid-button-margin: ds.$spacing-10 !default;
+$fluent-pivotgrid-last-cell-min-width: 50px !default; // dx-offscale: 50px
+$fluent-pivotgrid-icon-sorted-margin-left: ds.$spacing-50 !default;
+$fluent-pivotgrid-fields-area-head-padding: 0 ds.$spacing-20 !default;
+$fluent-pivotgrid-treeview-search-margin: ds.$spacing-50 !default;
+$fluent-pivotgrid-area-padding: ds.$spacing-50 !default;
+$fluent-pivotgrid-area-fields-margin-top-2: ds.$spacing-30 !default;
+$fluent-pivotgrid-position-indicator-last-margin-left-2: ds.$spacing-10 !default;
+$fluent-pivotgrid-toolbar-margin-left: ds.$spacing-100 !default;
+$fluent-pivotgrid-field-chooser-button-margin-left: ds.$spacing-40 !default;
+$fluent-pivotgrid-fields-area-head-padding-left: ds.$spacing-20 !default;
+$fluent-pivotgrid-icon-sorted-margin-right: ds.$spacing-50 !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_colors.scss
new file mode 100644
index 000000000000..30a8aa194a99
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_colors.scss
@@ -0,0 +1,7 @@
+@use "sass:color";
+@use "../sizes" as *;
+@use "../colors" as *;
+@use "../overlay/colors" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_index.scss
new file mode 100644
index 000000000000..ad6910df9b1e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_index.scss
@@ -0,0 +1,17 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../overlay/colors" as *;
+@use "../textEditor/colors" as *;
+@use "../../base/popover";
+
+// adduse
+
+.dx-popover-wrapper {
+  .dx-popup-title {
+    margin: 0;
+    border-top-left-radius: $fluent-popover-popup-title-border-top-left-radius;
+    border-top-right-radius: $fluent-popover-popup-title-border-top-right-radius;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_sizes.scss
new file mode 100644
index 000000000000..52bf737a1260
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/popover/_sizes.scss
@@ -0,0 +1,9 @@
+@use "../../../_design-system/variables/ds" as ds;
+@use "../sizes" as *;
+
+// adduse
+
+
+// Values hoisted from style-file literals (tokenized)
+$fluent-popover-popup-title-border-top-left-radius: ds.$border-radius-60 !default;
+$fluent-popover-popup-title-border-top-right-radius: ds.$border-radius-60 !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_colors.scss
new file mode 100644
index 000000000000..f0595a0a9db1
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_colors.scss
@@ -0,0 +1,21 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+/**
+* $name 20. Header background color
+* $type color
+*/
+$popup-title-bg: transparent !default;
+$popup-title-color: ds.$color-content-neutral-default-rest !default;
+$popup-title-border-color: ds.$color-border-neutral-default-rest !default;
+$popup-bottom-bg: $popup-title-bg !default;
+$popup-bottom-color: ds.$color-content-neutral-default-rest !default;
+$popup-border-radius: calc(#{$base-border-radius} * 2) !default;
+$popup-content-shadow-color1: ds.$color-shadow-ambient !default;
+$popup-content-shadow-color2: ds.$color-shadow-key !default;
+$popup-focused-content-shadow-color: ds.$color-shadow-key !default;
+
+// Base-layer values injected with design tokens (wave B1)
+$fluent-popup-dialog-shader-bg: ds.$color-surface-backdrop-default-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_index.scss
new file mode 100644
index 000000000000..31fb34f23fb4
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_index.scss
@@ -0,0 +1,86 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../overlay/colors" as *;
+@use "../toolbar/mixins" as *;
+@use "../toolbar/sizes" as *;
+@use "../typography/sizes" as *;
+@use "../../base/popup" with (
+  $popup-dialog-shader-color: $fluent-popup-dialog-shader-bg,
+);
+
+// adduse
+@use "../overlay";
+
+$fluent-popup-toolbar-label-font-size: $fluent-m-font-size;
+
+.dx-popup-wrapper {
+  & > .dx-overlay-content {
+    background: $overlay-content-bg;
+    box-shadow: $fluent-popup-content-shadow;
+    border-radius: $popup-border-radius;
+  }
+
+  & > .dx-popup-fullscreen {
+    border-radius: 0;
+  }
+
+  .dx-state-focused {
+    &.dx-overlay-content {
+      box-shadow: $fluent-popup-focused-content-shadow;
+    }
+  }
+}
+
+.dx-popup-title {
+  position: relative;
+  min-height: $fluent-popup-title-min-height;
+  border-bottom: $fluent-popup-title-border-bottom;
+  border-bottom-color: $popup-title-border-color;
+  background: $popup-title-bg;
+  color: $popup-title-color;
+
+  &.dx-toolbar {
+    @include dx-toolbar-sizing(
+      $fluent-popup-toolbar-height,
+      0 $fluent-popup-toolbar-horizontal-padding,
+      $fluent-popup-toolbar-label-font-size,
+      $fluent-popup-toolbar-item-spacing
+    );
+
+    box-shadow: none;
+  }
+}
+
+.dx-popup-content {
+  padding: $fluent-popup-content-vertical-padding $fluent-popup-content-padding;
+
+  & > .dx-button {
+    margin: $fluent-popup-button-margin;
+  }
+}
+
+.dx-popup-bottom {
+  background: $popup-bottom-bg;
+  color: $popup-bottom-color;
+
+  &.dx-toolbar {
+    @include dx-toolbar-sizing(
+      $fluent-popup-bottom-toolbar-height,
+      0 $fluent-popup-content-withtitle-top-padding $fluent-popup-content-withtitle-bottom-padding,
+      $fluent-popup-toolbar-label-font-size,
+      $fluent-popup-toolbar-item-spacing
+    );
+  }
+}
+
+.dx-popup-content.dx-dialog-content {
+  min-width: calc(220px - 2 * #{$fluent-popup-content-padding});
+  padding: $fluent-popup-content-vertical-padding $fluent-popup-content-padding;
+}
+
+.dx-dialog-message {
+  padding: 0;
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_sizes.scss
new file mode 100644
index 000000000000..738363bfa3d8
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/popup/_sizes.scss
@@ -0,0 +1,55 @@
+@use "../sizes" as *;
+@use "colors" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-popup-content-padding: null !default;
+$fluent-popup-content-vertical-padding: null !default;
+$fluent-popup-content-withtitle-top-padding: null !default;
+$fluent-popup-content-withtitle-bottom-padding: null !default;
+$fluent-popup-toolbar-horizontal-padding: null !default;
+$fluent-popup-bottom-toolbar-height: null !default;
+$fluent-popup-toolbar-height: null !default;
+
+$fluent-popup-button-margin: 0 ds.$spacing-80 !default;
+$fluent-popup-toolbar-item-spacing: ds.$spacing-80 !default;
+
+$fluent-popup-content-shadow: null !default;
+$fluent-popup-focused-content-shadow: null !default;
+
+@if $size == "default" {
+  $fluent-popup-content-padding: ds.$spacing-240 !default;
+  $fluent-popup-content-vertical-padding: ds.$spacing-160 !default;
+  $fluent-popup-content-withtitle-top-padding: ds.$spacing-240 !default;
+  $fluent-popup-content-withtitle-bottom-padding: ds.$spacing-160 !default;
+
+  $fluent-popup-toolbar-horizontal-padding: ds.$spacing-240 !default;
+  $fluent-popup-bottom-toolbar-height: ds.$spacing-480 !default;
+  $fluent-popup-toolbar-height: ds.$spacing-480 !default;
+
+  $fluent-popup-content-shadow: 0 0 ds.$spacing-80 0 $popup-content-shadow-color1, 0 ds.$spacing-320 ds.$spacing-640 0 $popup-content-shadow-color2 !default;
+  $fluent-popup-focused-content-shadow: 0 0 ds.$spacing-120 0 $popup-focused-content-shadow-color, 0 ds.$spacing-320 ds.$spacing-640 0 $popup-focused-content-shadow-color !default;
+}
+
+@else if $size == "compact" {
+  $fluent-popup-content-padding: ds.$spacing-160 !default;
+  $fluent-popup-content-vertical-padding: ds.$spacing-120 !default;
+  $fluent-popup-content-withtitle-top-padding: ds.$spacing-160 !default;
+  $fluent-popup-content-withtitle-bottom-padding: ds.$spacing-120 !default;
+
+  $fluent-popup-toolbar-horizontal-padding: ds.$spacing-160 !default;
+  $fluent-popup-bottom-toolbar-height: ds.$spacing-360 !default;
+  $fluent-popup-toolbar-height: ds.$spacing-360 !default;
+
+  $fluent-popup-content-shadow: 0 0 ds.$spacing-80 0 $popup-content-shadow-color1, 0 ds.$spacing-320 ds.$spacing-640 0 $popup-content-shadow-color2 !default;
+  $fluent-popup-focused-content-shadow: 0 0 ds.$spacing-120 0 $popup-focused-content-shadow-color, 0 ds.$spacing-320 ds.$spacing-640 0 $popup-focused-content-shadow-color !default;
+}
+
+:root {
+  --dx-popup-toolbar-item-padding-inline: #{$fluent-popup-toolbar-item-spacing};
+}
+
+// Values hoisted from style-file literals (tokenized)
+$fluent-popup-title-border-bottom: ds.$border-width-10 solid !default;
+$fluent-popup-title-min-height: ds.$spacing-280 !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_colors.scss
new file mode 100644
index 000000000000..4bcf2f2b2c2c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_colors.scss
@@ -0,0 +1,31 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+/**
+* $name 10. Bar background color
+* $type color
+*/
+$progressbar-bg: ds.$progress-bar-progress-line-color-track-rest !default;
+
+/**
+* $name 20. Selected range background color
+* $type color
+*/
+$progressbar-range-bg: ds.$progress-bar-progress-line-color-indicator-rest !default;
+$progressbar-container-disabled-bg: ds.$progress-bar-progress-line-color-track-disabled !default;
+$progressbar-range-disabled-bg: ds.$progress-bar-progress-line-color-indicator-disabled !default;
+$progressbar-range-indeterminate-color: ds.$progress-bar-progress-line-color-indicator-indeterminate-gradient-center !default;
+$progressbar-range-invalid-color: ds.$color-surface-danger-default-rest !default;
+
+$progressbar-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-indeterminate-color, transparent 95%;
+$progressbar-disabled-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-disabled-bg, transparent 95%;
+$progressbar-invalid-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-invalid-color, transparent 95%;
+
+/**
+* $name 30. Label color
+* $type color
+*/
+$progressbar-label-color: ds.$color-content-neutral-default-rest !default;
+
+$progressbar-foreground-disabled: ds.$color-content-neutral-default-disabled !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_index.scss
new file mode 100644
index 000000000000..fa00a916e8e1
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_index.scss
@@ -0,0 +1,126 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/mixins" as *;
+@use "../../base/progressBar" with (
+  $progressbar-status-font-size: $fluent-progressbar-status-font-size,
+);
+
+// adduse
+
+.dx-progressbar-container {
+  height: $progressbar-height;
+  background-color: $progressbar-bg;
+  border-radius: $progressbar-border-radius;
+}
+
+.dx-progressbar-range {
+  position: relative;
+  background-color: $progressbar-range-bg;
+  border-radius: $progressbar-border-radius;
+  box-sizing: content-box;
+}
+
+.dx-progressbar-animating-container {
+  height: $progressbar-height;
+  background-color: $progressbar-bg;
+  background-size: $progressbar-indeterminate-background-width 5px;
+  animation: dx-loader 2s linear infinite;
+  border-radius: $progressbar-border-radius;
+
+  @include gradient-linear($progressbar-interdeterminate-state-gradient);
+
+  background-repeat: repeat;
+}
+
+.dx-invalid {
+  .dx-progressbar-range {
+    background-color: $progressbar-range-invalid-color;
+  }
+
+  .dx-progressbar-animating-container {
+    @include gradient-linear($progressbar-invalid-interdeterminate-state-gradient);
+
+    background-repeat: repeat;
+  }
+}
+
+.dx-state-disabled {
+  &.dx-progressbar {
+    opacity: 1;
+  }
+
+  .dx-progressbar-container {
+    background-color: $progressbar-container-disabled-bg;
+  }
+
+  .dx-progressbar-range {
+    background-color: $progressbar-range-disabled-bg;
+  }
+
+  .dx-progressbar-status {
+    color: $progressbar-foreground-disabled;
+  }
+
+  .dx-progressbar-animating-container {
+    animation: none;
+
+    @include gradient-linear($progressbar-disabled-interdeterminate-state-gradient);
+
+    background-position-x: math.div($progressbar-indeterminate-background-width, 2);
+  }
+}
+
+.dx-progressbar-status {
+  padding-top: $progressbar-status-margin-top;
+  color: $progressbar-label-color;
+
+  .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($progressbar-interdeterminate-state-gradient);
+
+      background-repeat: repeat;
+    }
+
+    &.dx-state-disabled {
+      .dx-progressbar-animating-container {
+        animation: none;
+
+        @include gradient-linear($progressbar-disabled-interdeterminate-state-gradient);
+
+        background-position-x: math.div($progressbar-indeterminate-background-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/dxdsfluent/progressBar/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_sizes.scss
new file mode 100644
index 000000000000..425d4e5578d0
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/progressBar/_sizes.scss
@@ -0,0 +1,22 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$progressbar-height: null !default;
+$progressbar-border-radius: $base-border-radius !default;
+$progressbar-status-margin-top: null !default;
+$progressbar-indeterminate-background-width: 90%;
+
+@if $size == "default" {
+  $progressbar-height: ds.$spacing-40 !default;
+  $progressbar-status-margin-top: ds.$spacing-120 !default;
+}
+
+@else if $size == "compact" {
+  $progressbar-height: ds.$spacing-20 !default;
+  $progressbar-status-margin-top: ds.$spacing-80 !default;
+}
+
+// Base-layer values injected with design tokens (wave B1)
+$fluent-progressbar-status-font-size: ds.$font-size-caption-md !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_colors.scss
new file mode 100644
index 000000000000..aa8c447851f3
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_colors.scss
@@ -0,0 +1,5 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$radiobutton-foreground-disabled: ds.$color-content-neutral-default-disabled !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_index.scss
new file mode 100644
index 000000000000..a927af349313
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_index.scss
@@ -0,0 +1,153 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/radioButton/mixins" as *;
+@use "../radioGroup/colors" as *;
+@use "../../base/radioButton";
+
+// adduse
+
+@include dx-radiobutton-icon-mixin(
+  $fluent-radiobutton-size,
+  $fluent-radiobutton-border-width,
+  $fluent-radiobutton-dot-size,
+  true,
+);
+@include dx-radiobutton-states-mixin(
+  $radiogroup-bg,
+  $radiogroup-border-color,
+  $radiogroup-readonly-border-color,
+  null,
+  null,
+  $radiobutton-focused-bg,
+  $radiogroup-accent-color,
+  $radiobutton-invalid-color,
+  $radiobutton-invalid-color-hover,
+  $radiobutton-invalid-color-focused,
+  1,
+  true,
+);
+
+.dx-radiobutton-icon {
+  &::after {
+    content: none;
+  }
+}
+
+.dx-radio-value-container {
+  padding-inline-end: $fluent-radio-value-container-padding;
+}
+
+.dx-state-readonly {
+  .dx-radiobutton-icon-dot {
+    background-color: $radiobutton-foreground-disabled;
+  }
+
+  .dx-radiobutton-icon {
+    border-color: $radiobutton-foreground-disabled;
+  }
+
+  .dx-radiobutton-checked {
+    &.dx-state-hover,
+    &.dx-state-focused,
+    &.dx-state-active {
+      .dx-radiobutton-icon-dot {
+        background-color: $radiobutton-foreground-disabled;
+      }
+    }
+  }
+}
+
+.dx-radiobutton {
+  &.dx-state-hover {
+    .dx-radiobutton-icon {
+      border-color: $radiogroup-border-color-hover;
+    }
+  }
+
+  &.dx-state-active {
+    .dx-radiobutton-icon {
+      border-color: $radiogroup-border-color-active;
+    }
+  }
+
+  &.dx-state-focused {
+    .dx-radiobutton-icon {
+      border-color: $radiogroup-accent-color-active;
+    }
+  }
+}
+
+.dx-radiobutton-checked {
+  &.dx-state-hover {
+    .dx-radiobutton-icon {
+      border-color: $radiogroup-accent-color-hover;
+    }
+
+    .dx-radiobutton-icon-dot {
+      background-color: $radiogroup-accent-color-hover;
+    }
+  }
+
+  &.dx-state-active,
+  &.dx-state-focused {
+    .dx-radiobutton-icon {
+      border-color: $radiogroup-accent-color-active;
+    }
+
+    .dx-radiobutton-icon-dot {
+      background-color: $radiogroup-accent-color-active;
+    }
+  }
+}
+
+.dx-invalid {
+  .dx-state-hover {
+    &.dx-radiobutton {
+      .dx-radiobutton-icon {
+        border-color: $radiobutton-invalid-color-focused;
+      }
+
+      .dx-radiobutton-icon-dot {
+        background-color: $radiobutton-invalid-color-focused;
+      }
+    }
+  }
+
+  .dx-state-active,
+  .dx-state-focused {
+    &.dx-radiobutton {
+      .dx-radiobutton-icon {
+        border-color: $radiobutton-invalid-color-focused;
+      }
+
+      .dx-radiobutton-icon-dot {
+        background-color: $radiobutton-invalid-color-focused;
+      }
+    }
+  }
+
+  &.dx-state-readonly {
+    .dx-radiobutton {
+      .dx-radiobutton-icon-dot {
+        background-color: $radiobutton-foreground-disabled;
+      }
+    }
+  }
+}
+
+.dx-state-disabled {
+  .dx-radiobutton {
+    color: $radiobutton-foreground-disabled;
+
+    .dx-radiobutton-icon {
+      border-color: $radiobutton-foreground-disabled;
+    }
+
+    .dx-radiobutton-icon-dot {
+      background-color: $radiobutton-foreground-disabled;
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_sizes.scss
new file mode 100644
index 000000000000..5e68605a263b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioButton/_sizes.scss
@@ -0,0 +1,18 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-radiobutton-size: ds.$spacing-160 !default;
+$fluent-radiobutton-dot-size: ds.$spacing-100 !default;
+
+$fluent-radiobutton-border-width: ds.$border-width-10 !default;
+$fluent-radio-value-container-padding: null !default;
+
+@if $size == "default" {
+  $fluent-radio-value-container-padding: ds.$spacing-120 !default;
+}
+
+@else if $size == "compact" {
+  $fluent-radio-value-container-padding: ds.$spacing-80 !default;
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_colors.scss
new file mode 100644
index 000000000000..3859e18548b9
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_colors.scss
@@ -0,0 +1,20 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$radiogroup-accent-color: ds.$color-surface-primary-default-rest !default;
+$radiogroup-accent-color-hover: ds.$color-surface-primary-default-hovered !default;
+$radiogroup-accent-color-active: ds.$color-surface-primary-default-active !default;
+
+$radiogroup-border-color: ds.$color-border-neutral-accessible-rest !default;
+$radiogroup-border-color-hover: ds.$color-border-neutral-accessible-hovered !default;
+$radiogroup-border-color-active: ds.$color-border-neutral-accessible-active !default;
+$radiogroup-bg: ds.$color-surface-neutral-default-rest !default;
+
+$radiobutton-invalid-color: ds.$color-border-danger-default-rest !default;
+$radiobutton-invalid-color-hover: ds.$color-border-danger-default-hovered !default;
+$radiobutton-invalid-color-focused: ds.$color-border-danger-default-hovered !default;
+
+$radiogroup-readonly-border-color: $radiogroup-border-color !default;
+
+$radiobutton-focused-bg: ds.$color-surface-neutral-alpha-hovered !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_index.scss
new file mode 100644
index 000000000000..3cb2a1d1d15b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_index.scss
@@ -0,0 +1,25 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/radioGroup/mixins" as *;
+@use "../../base/radioGroup";
+
+// adduse
+@use "../radioButton";
+@include dx-radiogroup-mixin(
+  $fluent-radio-button-vertical-margin,
+  0,
+);
+
+.dx-radiogroup {
+  &.dx-state-disabled {
+    opacity: 1;
+  }
+}
+
+.dx-radiogroup-horizontal {
+  .dx-collection {
+    column-gap: $fluent-radiogroup-collection-column-gap;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_sizes.scss
new file mode 100644
index 000000000000..ba323c60e150
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/radioGroup/_sizes.scss
@@ -0,0 +1,21 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-radio-button-vertical-margin: null !default;
+$fluent-radio-group-horizontal-gap: null !default;
+
+@if $size == "default" {
+  $fluent-radio-group-horizontal-gap: ds.$spacing-160 !default;
+  $fluent-radio-button-vertical-margin: ds.$spacing-120 !default;
+}
+
+@else if $size == "compact" {
+  $fluent-radio-group-horizontal-gap: ds.$spacing-120 !default;
+  $fluent-radio-button-vertical-margin: ds.$spacing-60 !default;
+}
+
+
+// Values hoisted from style-file literals (tokenized)
+$fluent-radiogroup-collection-column-gap: ds.$spacing-160 !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_colors.scss
new file mode 100644
index 000000000000..89c53a85429e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_colors.scss
@@ -0,0 +1,6 @@
+@use "sass:color";
+@use "../sizes" as *;
+@use "../colors" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_index.scss
new file mode 100644
index 000000000000..810f384c7cba
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_index.scss
@@ -0,0 +1,13 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/rangeSlider";
+@use "../slider/sizes" as *;
+
+// adduse
+
+.dx-rangeslider-start-handle {
+  margin-inline-start: calc(#{$fluent-slider-handle-size} / -2);
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_sizes.scss
new file mode 100644
index 000000000000..43b104010f9e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/rangeSlider/_sizes.scss
@@ -0,0 +1,4 @@
+@use "../sizes" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_colors.scss
new file mode 100644
index 000000000000..89c53a85429e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_colors.scss
@@ -0,0 +1,6 @@
+@use "sass:color";
+@use "../sizes" as *;
+@use "../colors" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_index.scss
new file mode 100644
index 000000000000..3a798ee49b5b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_index.scss
@@ -0,0 +1,40 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../scheduler/sizes" as *;
+@use "../../base/recurrenceEditor" as *;
+
+// adduse
+
+
+.dx-recurrence-numberbox-interval {
+  margin-right: $fluent-recurrence-number-box-margin;
+}
+
+.dx-recurrence-numberbox-interval-label {
+  font-size: $fluent-base-font-size;
+  margin-top: $fluent-recurrence-interval-number-box-margin-top;
+}
+
+.dx-recurrence-button-group {
+  .dx-button-content {
+    padding: $fluent-recurrence-button-group-padding;
+  }
+
+  .dx-buttongroup-wrapper > div {
+    min-width: 0;
+  }
+}
+
+.dx-recurrence-radiogroup-repeat-type {
+  margin: $fluent-recurrence-radio-group-margin 0;
+}
+
+.dx-recurrence-datebox-until-date {
+  margin-top: $fluent-recurrence-until-date-box-top-margin;
+}
+
+.dx-recurrence-numberbox-repeat-count {
+  margin-top: $fluent-recurrence-count-number-box-top-margin;
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_sizes.scss
new file mode 100644
index 000000000000..5ee7c303b8e4
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/recurrenceEditor/_sizes.scss
@@ -0,0 +1,25 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-recurrence-until-date-box-top-margin: null !default;
+$fluent-recurrence-count-number-box-top-margin: null !default;
+$fluent-recurrence-interval-number-box-margin-top: null !default;
+
+@if $size == "default" {
+  $fluent-recurrence-until-date-box-top-margin: ds.$spacing-600 !default;
+  $fluent-recurrence-count-number-box-top-margin: 102px !default; // dx-offscale: 102px
+  $fluent-recurrence-interval-number-box-margin-top: ds.$spacing-300 !default;
+}
+
+@else if $size == "compact" {
+  $fluent-recurrence-until-date-box-top-margin: 46px !default; // dx-offscale: 46px
+  $fluent-recurrence-count-number-box-top-margin: 78px !default; // dx-offscale: 78px
+  $fluent-recurrence-interval-number-box-margin-top: ds.$spacing-220 !default;
+}
+
+// Values hoisted from style-file literals (tokenized)
+$fluent-recurrence-number-box-margin: ds.$spacing-110 !default;
+$fluent-recurrence-button-group-padding: ds.$spacing-60 !default;
+$fluent-recurrence-radio-group-margin: ds.$spacing-150 !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_colors.scss
new file mode 100644
index 000000000000..89c53a85429e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_colors.scss
@@ -0,0 +1,6 @@
+@use "sass:color";
+@use "../sizes" as *;
+@use "../colors" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_index.scss
new file mode 100644
index 000000000000..72e36b8f5b32
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_index.scss
@@ -0,0 +1,7 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_sizes.scss
new file mode 100644
index 000000000000..43b104010f9e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/responsiveBox/_sizes.scss
@@ -0,0 +1,4 @@
+@use "../sizes" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_colors.scss
new file mode 100644
index 000000000000..317f71db26f3
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_colors.scss
@@ -0,0 +1,104 @@
+@use "../button/colors" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+/**
+* $name 10. Border color
+* $type color
+*/
+$scheduler-base-border-color: ds.$color-border-neutral-default-rest !default;
+$scheduler-cell-active-bg: ds.$color-surface-neutral-default-active !default;
+$scheduler-cell-hover-bg: ds.$color-surface-neutral-default-hovered !default;
+$scheduler-group-separator-border-color: ds.$color-border-neutral-accessible-rest !default;
+
+/**
+* $name 20. Hour separator color
+* $type color
+*/
+$scheduler-accent-border-color: ds.$color-border-neutral-default-rest !default;
+
+/**
+* $name 30. Appointment text color
+* $type color
+*/
+$scheduler-appointment-text-color: ds.$color-content-neutral-default-rest !default;
+$scheduler-appointment-focus-color: null !default;
+
+/**
+* $name 40. Appointment background color
+* $type color
+*/
+$scheduler-appointment-base-color: ds.$color-surface-primary-subdued-rest !default;
+
+/**
+* $name 50. Appointment start color
+* $type color
+*/
+$scheduler-appointment-start-color: ds.$color-shadow-key-darker !default;
+$scheduler-appointment-active-color: $button-default-outlined-active-bg;
+
+/**
+* $name 60. Focused cell color
+* $type color
+*/
+$scheduler-workspace-focused-cell-color: ds.$color-surface-primary-alpha-rest !default;
+
+/**
+* $name 70. First day of month separator color
+* $type color
+*/
+$scheduler-first-month-border-color: ds.$color-border-neutral-default-rest !default;
+$scheduler-droppable-cell-background-color: ds.$color-surface-neutral-deep-rest !default;
+$scheduler-panel-text-color: ds.$color-content-neutral-subdued-rest !default;
+$scheduler-workspace-background-color: ds.$color-surface-neutral-default-rest !default;
+$scheduler-workspace-accent-color: ds.$color-content-primary-default-rest !default;
+
+/**
+* $name 80. Date-time indicator color
+* $type color
+*/
+$scheduler-current-time-cell-color: ds.$color-content-primary-default-rest !default;
+$scheduler-time-indicator-color: ds.$color-surface-danger-default-rest !default;
+$scheduler-dd-appointment-hover-text-color: ds.$color-content-neutral-default-inverted-rest !default;
+$scheduler-form-icon-color: ds.$color-content-neutral-subdued-rest !default;
+$scheduler-workspace-month-text-color: ds.$color-content-neutral-default-rest !default;
+$scheduler-workspace-other-month-text-color: ds.$color-content-neutral-subdued-rest !default;
+$scheduler-dropdown-appointment-date-color: ds.$color-content-neutral-subdued-rest !default;
+$scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default;
+$scheduler-workspace-hovered-cell-color: $scheduler-workspace-month-text-color !default;
+$scheduler-header-bg: ds.$color-surface-neutral-default-rest !default;
+$scheduler-alldaypanel-bg: ds.$color-surface-neutral-default-rest !default;
+$scheduler-other-month-cell-opacity: 1 !default;
+$scheduler-fill-focused-appointment: false !default;
+$scheduler-is-shadow-color-for-focused-state: false !default;
+$scheduler-time-indicator-background-color: rgb(from #{ds.$color-content-neutral-default-rest} r g b / 0.03) !default;
+
+$scheduler-tooltip-appointment-text-color: ds.$color-content-neutral-default-rest !default;
+$scheduler-appointment-overlay-bg: ds.$color-surface-neutral-default-rest !default;
+
+// Agenda
+$agenda-appointment-recurrence-icon-color: ds.$color-content-neutral-default-inverted-rest !default;
+$agenda-appointment-hover-bg: ds.$color-surface-neutral-default-hovered !default;
+$agenda-appointment-active-bg: ds.$color-surface-neutral-alpha-active !default;
+$agenda-appointment-text-color: ds.$color-content-neutral-default-rest !default;
+
+$header-panel-cell-date: ds.$color-content-neutral-subdued-rest !default;
+
+$scheduler-first-month-cell-background-color: rgb(from #{$scheduler-appointment-base-color} r g b / 0.15) !default;
+$scheduler-appointment-focus-color: $scheduler-appointment-text-color;
+
+// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
+$scheduler-accent: ds.$color-surface-primary-default-rest !default;
+$scheduler-bg: ds.$color-surface-neutral-default-rest !default;
+$scheduler-border-color: ds.$color-border-neutral-default-rest !default;
+$scheduler-inverted-text-color: ds.$color-content-neutral-default-inverted-rest !default;
+
+// Base-layer values injected with design tokens (wave B1)
+$fluent-scheduler-appointment-dragging-shadow: 7px 7px 15px 0 ds.$color-shadow-key !default;
+$fluent-scheduler-tooltip-shadow: ds.$box-shadow-md !default;
+$fluent-scheduler-agenda-details-opacity: ds.$opacity-70 !default;
+$fluent-scheduler-appointment-date-opacity: ds.$opacity-70 !default;
+$fluent-scheduler-appointment-resizing-opacity: ds.$opacity-70 !default;
+$fluent-scheduler-appointment-disabled-opacity: ds.$opacity-60 !default;
+$fluent-scheduler-appointment-drag-source-opacity: ds.$opacity-70 !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_index.scss
new file mode 100644
index 000000000000..80fca52eebb4
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_index.scss
@@ -0,0 +1,1058 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../list/colors" as *;
+@use "../form/sizes" as *;
+@use "../radioGroup/sizes" as *;
+@use "../toolbar/sizes" as *;
+@use '../../base/scheduler/layout/header' as *;
+@use "../../base/mixins" as *;
+@use "../../base/icon_fonts" as *;
+@use "../../base/scheduler" as baseScheduler with (
+  $scheduler-views-header-border: $fluent-scheduler-views-header-border,
+  $scheduler-views-empty-cell-border-bottom: $fluent-scheduler-views-empty-cell-border-bottom,
+  $scheduler-views-empty-cell-border-right: $fluent-scheduler-views-empty-cell-border-right,
+  $scheduler-views-empty-cell-border-left: $fluent-scheduler-views-empty-cell-border-left,
+  $scheduler-views-first-child-border-left: $fluent-scheduler-views-first-child-border-left,
+  $scheduler-views-time-panel-border-bottom: $fluent-scheduler-views-time-panel-border-bottom,
+  $scheduler-views-group-header-padding: $fluent-scheduler-views-group-header-padding,
+  $scheduler-views-group-header-padding-alt: $fluent-scheduler-views-group-header-padding-alt,
+  $scheduler-views-time-indicator-height: $fluent-scheduler-views-time-indicator-height,
+  $scheduler-views-group-header-content-height: $fluent-scheduler-views-group-header-content-height,
+  $scheduler-views-vertical-group-min-height: $fluent-scheduler-views-vertical-group-min-height,
+  $scheduler-tooltip-shadow: $fluent-scheduler-tooltip-shadow,
+  $scheduler-appointment-icon-font-size: $fluent-scheduler-appointment-icon-font-size,
+  $scheduler-appointment-date-opacity: $fluent-scheduler-appointment-date-opacity,
+  $scheduler-appointment-resizing-opacity: $fluent-scheduler-appointment-resizing-opacity,
+  $scheduler-appointment-disabled-opacity: $fluent-scheduler-appointment-disabled-opacity,
+  $scheduler-appointment-drag-source-opacity: $fluent-scheduler-appointment-drag-source-opacity,
+  $agenda-appointment-title-font-weight: $fluent-scheduler-agenda-title-font-weight,
+  $agenda-appointment-details-font-size: $fluent-scheduler-agenda-details-font-size,
+  $agenda-appointment-details-opacity: $fluent-scheduler-agenda-details-opacity,
+  $scheduler-appointment-dragging-shadow: $fluent-scheduler-appointment-dragging-shadow,
+  $scheduler-tooltip-appointment-text-color: $scheduler-tooltip-appointment-text-color,
+  $scheduler-appointment-overlay-bg: $scheduler-appointment-overlay-bg,
+  $scheduler-tooltip-list-focused-bg: $list-item-hover-bg,
+  $scheduler-appointment-base-color: $scheduler-appointment-base-color,
+  $scheduler-appointment-start-color: $scheduler-appointment-start-color,
+  $scheduler-appointment-active-color: $scheduler-appointment-active-color,
+  $scheduler-base-border-color: $scheduler-base-border-color,
+  $scheduler-accent-border-color: $scheduler-accent-border-color,
+  $scheduler-current-time-cell-color: $scheduler-current-time-cell-color,
+  $scheduler-time-indicator-color: $scheduler-time-indicator-color,
+  $scheduler-time-indicator-background-color: $scheduler-time-indicator-background-color,
+  $scheduler-workspace-background-color: $scheduler-workspace-background-color,
+  $scheduler-other-month-cell-opacity: $scheduler-other-month-cell-opacity,
+  $scheduler-workspace-month-text-color: $scheduler-workspace-month-text-color,
+  $scheduler-workspace-accent-color: $scheduler-workspace-accent-color,
+  $scheduler-first-month-cell-background-color: $scheduler-first-month-cell-background-color,
+  $scheduler-panel-text-color: $scheduler-panel-text-color,
+  $scheduler-left-column-width: $scheduler-left-column-width,
+  $scheduler-timeline-cell-height: $scheduler-timeline-cell-height,
+  $scheduler-workspace-active-cell-color: $scheduler-workspace-active-cell-color,
+  $scheduler-workspace-hovered-cell-color: $scheduler-workspace-hovered-cell-color,
+  $scheduler-workspace-focused-cell-color: $scheduler-workspace-focused-cell-color,
+  $scheduler-droppable-cell-background-color: $scheduler-droppable-cell-background-color,
+  $scheduler-appointment-text-color: $scheduler-appointment-text-color,
+  $scheduler-fill-focused-appointment: $scheduler-fill-focused-appointment,
+  $scheduler-is-shadow-color-for-focused-state: $scheduler-is-shadow-color-for-focused-state,
+  $scheduler-dd-appointment-hover-text-color: $scheduler-dd-appointment-hover-text-color,
+
+  $agenda-appointment-recurrence-icon-color: $agenda-appointment-recurrence-icon-color,
+  $agenda-appointment-hover-bg: $agenda-appointment-hover-bg,
+  $agenda-appointment-active-bg: $agenda-appointment-active-bg,
+  $agenda-appointment-text-color: $agenda-appointment-text-color,
+  $agenda-appointment-title-font-size: $agenda-appointment-title-font-size,
+
+  $scheduler-appointment-popup-icon-margin-top: $fluent-scheduler-appointment-popup-icon-margin-top,
+  $scheduler-appointment-popup-repeat-end-item-height: $fluent-scheduler-appointment-popup-repeat-end-item-height,
+  $scheduler-appointment-popup-repeat-end-item-vertical-margin: $fluent-radio-button-vertical-margin
+);
+@use "../button/colors" as *;
+@use "../button/mixins" as *;
+@use "../tooltip/colors" as *;
+
+// adduse
+@use "../recurrenceEditor" as *;
+@use "../scrollable";
+
+$fluent-scheduler-all-day-table-cell-height: calc(#{$fluent-scheduler-workspace-date-table-cell-height} * 1.5);
+
+
+@include baseScheduler.scheduler-mixin();
+
+.dx-scheduler-timeline .dx-scheduler-header-panel-cell {
+  height: auto;
+}
+
+.dx-scheduler-date-time-indicator {
+  &::before {
+    display: none;
+  }
+}
+
+.dx-scheduler-container {
+  border-radius: $scheduler-border-radius;
+}
+
+.dx-scheduler-time-panel-cell {
+  height: $fluent-scheduler-workspace-date-table-cell-height;
+
+  &::after {
+    content: none;
+  }
+
+  > div {
+    margin-top: $fluent-scheduler-time-panel-cell-margin-top;
+    font-size: $fluent-scheduler-time-panel-font-size;
+
+    .dx-scheduler-small & {
+      font-size: calc(#{$fluent-scheduler-time-panel-font-size} - 1px);
+    }
+  }
+
+  padding-right: $fluent-scheduler-agenda-time-panel-cell-padding;
+
+  .dx-scheduler-small & {
+    padding-right: $fluent-scheduler-small-padding-right;
+  }
+
+  .dx-rtl & {
+    padding-left: $fluent-scheduler-agenda-time-panel-cell-padding;
+    padding-right: 0;
+  }
+
+  .dx-rtl.dx-scheduler-small & {
+    padding-left: $fluent-scheduler-small-padding-left;
+  }
+
+  &.dx-scheduler-time-panel-current-time-cell::before {
+    content: none;
+  }
+}
+
+.dx-scheduler-date-table-cell {
+  height: $fluent-scheduler-workspace-date-table-cell-height;
+}
+
+.dx-scheduler-all-day-title {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  height: $fluent-scheduler-all-day-table-cell-height;
+  font-size: $fluent-scheduler-all-day-title-font-size;
+  border-bottom: baseScheduler.$scheduler-base-border;
+  border-bottom-color: $scheduler-base-border-color;
+  text-align: right;
+  padding-right: $fluent-scheduler-agenda-time-panel-cell-padding;
+
+  .dx-rtl & {
+    justify-content: start;
+  }
+
+  .dx-scheduler-small & {
+    font-size: calc(#{$fluent-scheduler-all-day-title-font-size} * 0.8);
+    padding-right: $fluent-scheduler-small-padding-right;
+  }
+
+  .dx-scheduler-work-space-all-day-collapsed & {
+    height: $fluent-scheduler-collapsed-all-day-table-cell-height;
+  }
+}
+
+.dx-scheduler-all-day-table {
+  height: $fluent-scheduler-all-day-table-cell-height;
+
+  .dx-scheduler-work-space-all-day-collapsed & {
+    height: $fluent-scheduler-collapsed-all-day-table-cell-height;
+  }
+}
+
+.dx-scheduler-appointment-content { // stylelint-disable-line no-duplicate-selectors
+  padding: $fluent-scheduler-appointment-content-padding;
+}
+
+.dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content {
+  padding: $fluent-scheduler-recurring-appointment-content-padding;
+}
+
+.dx-rtl .dx-scheduler-appointment-content {
+  padding: $fluent-scheduler-appointment-content-padding-rtl;
+}
+
+.dx-rtl .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content {
+  padding: $fluent-scheduler-recurring-appointment-content-padding-rtl;
+}
+
+.dx-scheduler-appointment-title {
+  font-size: $fluent-scheduler-appointment-title-font-size;
+}
+
+.dx-scheduler-appointment-content-details {
+  font-size: $fluent-scheduler-appointment-details-font-size;
+}
+
+.dx-rtl .dx-scheduler-work-space-day {
+  .dx-scheduler-all-day-appointment {
+    .dx-scheduler-appointment-content {
+      padding: $fluent-scheduler-appointment-content-padding-rtl;
+    }
+  }
+}
+
+.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: $fluent-scheduler-appointment-content-padding;
+    }
+  }
+
+  .dx-scheduler-date-time-indicator {
+    height: $fluent-scheduler-date-time-indicator-height;
+  }
+
+  .dx-scheduler-date-table-row:nth-child(even) .dx-scheduler-date-table-cell {
+    border-top-style: dashed;
+  }
+
+  .dx-scheduler-appointment {
+    container-type: size;
+
+    &.dx-scheduler-appointment-recurrence {
+      @container (max-height: #{$fluent-scheduler-appointment-15min-height}) {
+        .dx-scheduler-appointment-content {
+          padding-right: $fluent-scheduler-appointment-10min-recurrence-padding-right;
+        }
+      }
+
+      @container (min-height: #{$fluent-scheduler-appointment-15min-height}) and (max-height: #{$fluent-scheduler-appointment-20min-height}) {
+        .dx-scheduler-appointment-content {
+          padding-right: $fluent-scheduler-appointment-15min-recurrence-padding-right;
+        }
+      }
+
+      @container (min-height: #{$fluent-scheduler-appointment-20min-height}) and (max-height: #{$fluent-scheduler-appointment-25min-height}) {
+        .dx-scheduler-appointment-content {
+          padding-right: $fluent-scheduler-appointment-20min-recurrence-padding-right;
+        }
+      }
+    }
+
+    .dx-scheduler-appointment-content {
+      @container (max-height: #{$fluent-scheduler-appointment-25min-height}) {
+        display: flex;
+        align-items: center;
+        padding: $fluent-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: #{$fluent-scheduler-appointment-15min-height}) {
+      .dx-scheduler-appointment-content {
+        .dx-scheduler-appointment-title {
+          font-size: $fluent-scheduler-appointment-10min-title-font-size;
+          line-height: $fluent-scheduler-appointment-10min-title-line-height;
+        }
+
+        .dx-scheduler-appointment-recurrence-icon {
+          right: $fluent-scheduler-appointment-10min-icon-right;
+          font-size: $fluent-scheduler-appointment-10min-icon-font-size;
+        }
+      }
+    }
+
+    @container (min-height: #{$fluent-scheduler-appointment-15min-height}) and (max-height: #{$fluent-scheduler-appointment-20min-height}) {
+      .dx-scheduler-appointment-content {
+        .dx-scheduler-appointment-title {
+          font-size: $fluent-scheduler-appointment-15min-title-font-size;
+          line-height: $fluent-scheduler-appointment-15min-title-line-height;
+        }
+
+        .dx-scheduler-appointment-recurrence-icon {
+          right: $fluent-scheduler-appointment-15min-icon-right;
+          font-size: $fluent-scheduler-appointment-15min-icon-font-size;
+        }
+      }
+    }
+
+    @container (min-height: #{$fluent-scheduler-appointment-20min-height}) and (max-height: #{$fluent-scheduler-appointment-25min-height}) {
+      .dx-scheduler-appointment-content {
+        .dx-scheduler-appointment-recurrence-icon {
+          right: $fluent-scheduler-appointment-20min-icon-right;
+        }
+      }
+    }
+  }
+}
+
+.dx-scheduler-header-panel {
+  margin-top: 0;
+}
+
+.dx-scheduler-header-panel-cell {
+  font-size: $fluent-scheduler-time-panel-font-size;
+  padding-bottom: $fluent-scheduler-header-panel-cell-padding-bottom;
+  padding-left: $header-panel-time-cell-padding;
+  padding-right: $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: $header-panel-time-cell-height;
+  }
+
+  .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-week &,
+  .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-work-week &,
+  .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-month & {
+    @include flex-container(column, nowrap);
+  }
+
+  .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-week &,
+  .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-work-week &,
+  .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-month &,
+  .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-day & {
+    align-items: flex-start;
+    justify-content: flex-end;
+  }
+
+  .dx-scheduler-work-space.dx-scheduler-timeline.dx-scheduler-timeline-day & {
+    align-items: flex-end;
+
+    &:not(.dx-scheduler-header-panel-week-cell) {
+      height: $fluent-scheduler-workspace-month-timeline--time-height;
+      font-size: $fluent-scheduler-time-panel-font-size;
+      padding-left: $fluent-scheduler-header-panel-margin;
+      padding-right: $fluent-scheduler-header-panel-margin;
+    }
+
+    &.dx-scheduler-header-panel-week-cell {
+      align-items: flex-start;
+      display: flex;
+    }
+  }
+
+  &.dx-scheduler-header-panel-week-cell {
+    border-bottom: baseScheduler.$scheduler-base-border;
+    border-bottom-color: $scheduler-base-border-color;
+    flex-flow: column;
+    justify-content: flex-end;
+  }
+
+
+  &.dx-scheduler-header-panel-current-time-cell {
+    color: $scheduler-panel-text-color;
+
+    &::before {
+      content: none;
+    }
+
+    .dx-scheduler-header-panel-cell-date:first-child {
+      margin-bottom: $fluent-scheduler-header-panel-cell-date-margin-bottom;
+    }
+
+    .dx-scheduler-header-panel-cell-date:last-child {
+      color: $scheduler-inverted-text-color;
+      background-color: $scheduler-current-time-cell-color;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      width: $header-day-element-height;
+      height: $header-day-element-height;
+      margin-top: 0;
+    }
+  }
+
+  .dx-scheduler-header-panel-cell-date {
+    display: block;
+    font-size: $fluent-scheduler-header-panel-cell-date-font-size;
+
+    .dx-scheduler-small & {
+      margin: 0 calc(#{$fluent-scheduler-header-panel-margin} * #{baseScheduler.$scheduler-small-size-factor});
+    }
+
+    &:last-child {
+      font-size: $fluent-scheduler-header-panel-day-font-size;
+      margin-top: $fluent-scheduler-small-margin-top;
+      margin-bottom: $fluent-scheduler-small-margin-bottom;
+      margin-left: $fluent-scheduler-small-margin-left;
+      color: $header-panel-cell-date;
+    }
+  }
+}
+
+.dx-scheduler-timeline {
+  .dx-scheduler-date-table-cell {
+    height: $fluent-scheduler-timeline-date-table-cell-height;
+  }
+}
+
+.dx-scheduler-work-space-day {
+  &.dx-scheduler-work-space-count {
+    .dx-scheduler-header-panel {
+      margin-top: 0;
+    }
+  }
+
+  .dx-scheduler-header-panel {
+    .dx-scheduler-group-row {
+      &:not(:first-child) {
+        border-bottom: none;
+      }
+    }
+  }
+
+  &:not(.dx-scheduler-work-space-count):not(.dx-scheduler-work-space-grouped) {
+    .dx-scheduler-time-panel,
+    .dx-scheduler-header-panel-empty-cell {
+      border-right: baseScheduler.$scheduler-base-border;
+      border-right-color: $scheduler-base-border-color;
+    }
+  }
+}
+
+.dx-rtl .dx-scheduler-work-space.dx-scheduler-work-space-month {
+  .dx-scheduler-appointment-content {
+    padding: $fluent-scheduler-month-appointment-content-padding-rtl;
+  }
+
+  .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content {
+    padding: $fluent-scheduler-month-recurrence-appointment-content-padding-rtl;
+  }
+}
+
+.dx-scheduler-work-space.dx-scheduler-work-space-month {
+  .dx-scheduler-date-table-other-month {
+    color: $scheduler-workspace-other-month-text-color;
+  }
+
+  .dx-scheduler-header-panel-cell-date:last-child {
+    color: $header-panel-cell-date;
+    border-radius: initial;
+    background-color: initial;
+  }
+
+  .dx-scheduler-appointment-content {
+    padding: $fluent-scheduler-month-appointment-content-padding;
+    font-size: $fluent-scheduler-appointment-month-text-size;
+  }
+
+  .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content {
+    padding: $fluent-scheduler-month-recurrence-appointment-content-padding;
+  }
+
+  .dx-scheduler-date-table-first-of-month {
+    border-left: $scheduler-first-of-month-border;
+    border-left-color: $scheduler-first-month-border-color;
+    border-top: $scheduler-first-of-month-border;
+    border-top-color: $scheduler-first-month-border-color;
+  }
+
+  .dx-scheduler-header-panel {
+    border-bottom: none;
+  }
+
+  .dx-scheduler-date-table-scrollable .dx-scrollable-content {
+    min-height: $fluent-scheduler-scrollable-content-min-height;
+  }
+
+  .dx-scheduler-date-table-cell {
+    font-size: $fluent-scheduler-month-date-text-size;
+    text-align: left;
+    height: $fluent-scheduler-date-table-cell-height;
+
+    > div {
+      padding: $fluent-scheduler-workspace-month-cell-left-offset;
+    }
+
+    .dx-rtl & {
+      text-align: right;
+    }
+  }
+
+
+  .dx-scheduler-header-panel-current-time-cell {
+    .dx-scheduler-header-panel-cell-date343 {
+      border-radius: initial;
+      background-color: initial;
+      color: $scheduler-current-time-cell-color;
+    }
+  }
+
+  .dx-scheduler-header-panel-cell { // stylelint-disable-line no-duplicate-selectors
+    padding-left: $fluent-scheduler-workspace-month-cell-left-offset;
+
+    .dx-scheduler-header-panel-cell-date {
+      margin-left: 0;
+      line-height: $fluent-scheduler-workspace-month-header-height;
+    }
+  }
+
+  .dx-scheduler-date-table-current-date {
+    color: $scheduler-current-time-cell-color;
+  }
+}
+
+.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: $fluent-scheduler-dropdown-button-vertical-margin;
+      }
+    }
+  }
+
+  .dx-scheduler-work-space.dx-scheduler-work-space-month:not(.dx-rtl) .dx-scheduler-appointment-collector {
+    margin-left: $fluent-scheduler-appointment-collector-margin-left;
+  }
+
+  .dx-scheduler-work-space.dx-scheduler-work-space-month.dx-rtl .dx-scheduler-appointment-collector {
+    margin-right: $fluent-scheduler-appointment-collector-margin-right;
+  }
+}
+
+.dx-scheduler-adaptive {
+  .dx-scheduler-work-space-week .dx-scheduler-header-panel-cell {
+    white-space: nowrap;
+  }
+
+  .dx-scheduler-appointment-collector {
+    margin: $fluent-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: $fluent-scheduler-dropdown-button-adaptive-vertical-margin;
+      }
+    }
+  }
+}
+
+.dx-scheduler-appointment-collector {
+  height: $fluent-scheduler-dropdown-button-height;
+  margin: $fluent-scheduler-dropdown-button-margin;
+  position: absolute;
+
+  &.dx-button {
+    border-radius: $fluent-scheduler-dropdown-button-height;
+    height: $fluent-scheduler-dropdown-button-height;
+    min-width: auto;
+    width: auto;
+
+    &::before {
+      display: none;
+    }
+
+    .dx-button-content {
+      padding: $fluent-scheduler-dropdown-button-padding 0;
+      font-size: $fluent-scheduler-navigator-button-font-size;
+    }
+  }
+}
+
+.dx-scheduler-header {
+  @include header-sizes(
+    $fluent-scheduler-header-height,
+    $fluent-scheduler-header-offset,
+    $fluent-scheduler-toolbar-item-offset,
+  );
+
+  .dx-scheduler-navigator-next,
+  .dx-scheduler-navigator-previous {
+    @include dx-button-onlyicon-sizing($fluent-scheduler-navigator-icon-font-size);
+  }
+
+  background-color: $scheduler-header-bg;
+  border-top-right-radius: $scheduler-border-radius;
+  border-top-left-radius: $scheduler-border-radius;
+}
+
+.dx-scheduler-group-row {
+  .dx-scheduler-group-header {
+    font-weight: $fluent-scheduler-group-header-font-weight;
+  }
+}
+
+.dx-scheduler-group-table,
+.dx-scheduler-header-panel {
+  .dx-scheduler-group-row {
+    .dx-scheduler-group-header {
+      font-size: $fluent-scheduler-group-header-font-size;
+      text-align: left;
+      border-bottom: $fluent-scheduler-group-header-border-bottom;
+      border-bottom-color: $scheduler-base-border-color;
+
+      .dx-scheduler-group-header-content {
+        padding-left: $fluent-scheduler-header-panel-margin;
+
+        .dx-scheduler-work-space-month &,
+        .dx-scheduler-agenda & {
+          padding-left: $fluent-scheduler-workspace-month-cell-left-offset;
+
+          .dx-rtl & {
+            padding-right: $fluent-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: $fluent-scheduler-group-header-content-top;
+          transform: none;
+        }
+      }
+
+      .dx-rtl & {
+        text-align: right;
+      }
+    }
+  }
+}
+
+.dx-scheduler-all-day-panel {
+  background-color: $scheduler-alldaypanel-bg;
+
+  .dx-scheduler-all-day-table-cell {
+    border-bottom: baseScheduler.$scheduler-base-border;
+    border-bottom-color: $scheduler-base-border-color;
+  }
+}
+
+.dx-scheduler-work-space { // stylelint-disable-line no-duplicate-selectors
+  border-bottom-right-radius: $scheduler-border-radius;
+  border-bottom-left-radius: $scheduler-border-radius;
+
+  &:not(.dx-scheduler-work-space-all-day):not(.dx-scheduler-work-space-month):not(.dx-scheduler-timeline) {
+    .dx-scheduler-header-panel,
+    .dx-scheduler-header-panel-empty-cell {
+      border-bottom-width: $fluent-scheduler-header-panel-empty-cell-border-bottom-width;
+    }
+  }
+
+  &.dx-scheduler-work-space-grouped {
+    .dx-scheduler-all-day-title {
+      border-top: baseScheduler.$scheduler-base-border;
+      border-top-color: $scheduler-base-border-color;
+    }
+
+    &.dx-scheduler-work-space-all-day:not(.dx-scheduler-work-space-week):not(.dx-scheduler-work-space-work-week) {
+      .dx-scheduler-group-header {
+        border-bottom: none;
+      }
+    }
+
+    &.dx-scheduler-agenda {
+      .dx-scheduler-date-table-cell {
+        border: none;
+      }
+    }
+
+    &.dx-scheduler-timeline .dx-scheduler-group-row th {
+      .dx-rtl & {
+        border-left: none;
+        border-right: none;
+      }
+    }
+
+    &.dx-scheduler-work-space-both-scrollbar:not(.dx-scheduler-agenda) {
+      .dx-scheduler-all-day-panel {
+        .dx-scheduler-first-group-cell {
+          border-left: none;
+        }
+      }
+    }
+  }
+}
+
+.dx-scheduler-work-space-week {
+  .dx-scheduler-date-table-row:first-child {
+    border-top: none;
+  }
+}
+
+.dx-scheduler-all-day-table-cell,
+.dx-scheduler-date-table-cell {
+  &.dx-state-active {
+    background-color: $scheduler-cell-active-bg;
+  }
+
+  &.dx-state-hover {
+    background-color: $scheduler-cell-hover-bg;
+    color: $scheduler-workspace-hovered-cell-color;
+  }
+
+  &.dx-scheduler-focused-cell {
+    box-shadow: none;
+  }
+}
+
+.dx-scheduler-appointment-popup {
+  > .dx-overlay-content > .dx-toolbar.dx-widget {
+    > .dx-toolbar-items-container {
+      height: $fluent-scheduler-appointment-popup-toolbar-height;
+    }
+  }
+
+  .dx-form {
+    .dx-scheduler-form-icon {
+      color: $scheduler-form-icon-color;
+
+      &.dx-field-item.dx-flex-layout {
+        height: $fluent-scheduler-appointment-popup-icon-container-height;
+        padding-inline-end: $fluent-scheduler-appointment-popup-icon-padding-right;
+      }
+    }
+
+    .dx-scheduler-form-icon-sized-gap {
+      width: $fluent-base-icon-size;
+    }
+
+    .dx-scheduler-form-subject-group .dx-scheduler-form-icon {
+      color: $scheduler-appointment-base-color;
+    }
+
+    .dx-scheduler-days-of-week-buttons {
+      height: $fluent-toolbar-height;
+      gap: $fluent-scheduler-appointment-popup-days-of-week-buttons-gap;
+    }
+
+    .dx-field-item:not(.dx-first-col) {
+      padding-inline-start: $fluent-scheduler-appointment-popup-item-padding-horizontal;
+    }
+
+    .dx-field-item:not(.dx-last-col) {
+      padding-inline-end: $fluent-scheduler-appointment-popup-item-padding-horizontal;
+    }
+
+    .dx-scheduler-form-all-day-switch.dx-field-item.dx-label-h-align {
+      height: $fluent-scheduler-appointment-popup-all-day-item-height;
+
+      .dx-field-item-content {
+        .dx-switch.dx-widget {
+          margin-bottom: $fluent-scheduler-widget-margin-bottom;
+        }
+      }
+    }
+
+    .dx-scheduler-form-repeat-editor .dx-scheduler-form-recurrence-settings-button {
+      height: auto;
+
+      &.dx-button-mode-text.dx-state-focused {
+        outline: auto;
+        outline-offset: -2px;
+      }
+    }
+  }
+}
+
+.dx-scheduler-header-panel,
+.dx-scheduler-time-panel {
+  font-size: $fluent-scheduler-workspace-info-text-size;
+}
+
+
+.dx-scheduler-work-space-grouped:not(.dx-scheduler-agenda) .dx-scheduler-group-row th,
+.dx-scheduler-work-space.dx-scheduler-work-space-grouped:not(.dx-scheduler-work-space-vertical-grouped):not(.dx-scheduler-timeline) .dx-scheduler-last-group-cell {
+  border-right: $fluent-scheduler-last-group-cell-border-right;
+  border-right-color: $scheduler-group-separator-border-color;
+
+  &:last-child {
+    border-right: none;
+  }
+
+  .dx-rtl & {
+    border-left: $fluent-scheduler-rtl-border-left;
+    border-left-color: $scheduler-group-separator-border-color;
+    border-right: baseScheduler.$scheduler-base-border;
+    border-right-color: $scheduler-base-border-color;
+
+    &:last-child {
+      border-left: none;
+    }
+  }
+}
+
+.dx-scheduler-appointment {
+  &,
+  .dx-rtl &,
+  .dx-scheduler-work-space-month &,
+  .dx-scheduler-timeline &,
+  .dx-rtl .dx-scheduler-timeline & {
+    border-left: $fluent-scheduler-appointment-transparent-left-border;
+    border-right: $fluent-scheduler-appointment-transparent-right-border;
+    box-shadow: none;
+    border-radius: $fluent-scheduler-appointment-border-radius;
+
+    &.dx-state-focused {
+      color: $scheduler-appointment-focus-color;
+    }
+
+    &.dx-state-active,
+    &.dx-resizable-resizing,
+    &.dx-state-hover,
+    &.dx-state-hover.dx-resizable {
+      box-shadow: none;
+    }
+  }
+}
+
+.dx-scheduler-fixed-appointments .dx-draggable-dragging .dx-scheduler-appointment {
+  box-shadow: none;
+}
+
+.dx-scheduler-dropdown-appointment-date {
+  color: $scheduler-dropdown-appointment-date-color;
+}
+
+.dx-scheduler-work-space-vertical-grouped { // stylelint-disable-line no-duplicate-selectors
+  &.dx-scheduler-work-space-month {
+    .dx-scheduler-date-table-scrollable {
+      border-top: baseScheduler.$scheduler-base-border;
+      border-top-color: $scheduler-base-border-color;
+    }
+  }
+}
+
+.dx-scheduler-work-space-both-scrollbar {
+  .dx-scheduler-all-day-title {
+    background-color: $scheduler-alldaypanel-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: $fluent-scheduler-appointment-strip-width;
+    height: 100%;
+    background-color: $scheduler-accent;
+  }
+
+  @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: $fluent-scheduler-appointment-strip-border-top-right-radius;
+    border-bottom-right-radius: $fluent-scheduler-appointment-strip-border-bottom-right-radius;
+  }
+}
+
+.dx-scheduler-appointment:not(.dx-scheduler-appointment-has-resource-color):not(.dx-rtl) {
+  .dx-scheduler-appointment-strip {
+    border-top-left-radius: $fluent-scheduler-appointment-strip-border-top-left-radius;
+    border-bottom-left-radius: $fluent-scheduler-appointment-strip-border-bottom-left-radius;
+  }
+}
+
+.dx-scheduler-agenda {
+  .dx-scheduler-group-header {
+    font-size: $fluent-scheduler-group-header-font-size;
+    width: $fluent-scheduler-group-header-table-cell-width;
+
+    .dx-scheduler-group-header-content {
+      padding-top: $fluent-scheduler-group-header-content-padding-top;
+      width: $fluent-scheduler-group-header-table-cell-width;
+
+      &::before {
+        display: none;
+      }
+    }
+  }
+
+  .dx-scheduler-date-table-row,
+  .dx-scheduler-time-panel-row {
+    box-shadow: inset 0 -1px 0 0 $scheduler-border-color;
+  }
+
+  .dx-scheduler-time-panel-cell {
+    text-align: left;
+    padding-left: $fluent-scheduler-agenda-time-panel-cell-padding;
+    padding-right: 0;
+
+    .dx-rtl & {
+      text-align: right;
+      padding-right: $fluent-scheduler-agenda-time-panel-cell-padding;
+      padding-left: 0;
+    }
+
+    > span {
+      font-size: $fluent-scheduler-time-panel-font-size;
+    }
+  }
+
+  .dx-scheduler-date-table-scrollable {
+    padding-top: 0;
+  }
+
+  &.dx-scheduler-work-space-grouped {
+    .dx-scheduler-group-header {
+      border-bottom: none;
+    }
+
+    .dx-scheduler-date-table-row.dx-scheduler-date-table-last-row,
+    .dx-scheduler-time-panel-row.dx-scheduler-date-table-last-row,
+    .dx-scheduler-group-table .dx-scheduler-group-row {
+      border-bottom: none;
+
+      &:not(:last-child) {
+        box-shadow: inset 0 -1px 0 0 $scheduler-group-separator-border-color;
+      }
+    }
+  }
+}
+
+.dx-scheduler-agenda-nodata {
+  font-size: $fluent-scheduler-workspace-info-text-size;
+}
+
+.dx-popup-content .dx-scheduler-dropdown-appointment-buttons-block {
+  .dx-button {
+    min-width: auto;
+    padding: 0;
+
+    @include dx-button-flat-color-styling(
+      $button-default-text-color,
+      $button-default-text-color-hover,
+      $button-default-text-color-active,
+      $button-default-text-bg,
+      $button-default-text-hover-bg,
+      $button-default-text-focused-bg,
+      $button-default-text-active-bg
+    );
+
+    .dx-icon {
+      @include dx-icon-sizing($fluent-base-icon-size);
+    }
+  }
+}
+
+.dx-rtl {
+  .dx-scheduler-work-space-both-scrollbar {
+    .dx-scheduler-header-panel {
+      .dx-scheduler-group-header:first-child {
+        border-right: none;
+      }
+    }
+  }
+
+  &.dx-scheduler-work-space-day {
+    &:not(.dx-scheduler-work-space-count):not(.dx-scheduler-work-space-grouped) {
+      .dx-scheduler-time-panel,
+      .dx-scheduler-header-panel-empty-cell {
+        border-left: baseScheduler.$scheduler-base-border;
+        border-left-color: $scheduler-base-border-color;
+        border-right: none;
+      }
+    }
+  }
+}
+
+.dx-scheduler-appointment-tooltip-wrapper,
+.dx-scheduler-overlay-panel {
+  .dx-overlay-content {
+    background-color: $scheduler-bg;
+
+    .dx-popup-content {
+      padding: 0;
+    }
+
+    .dx-list {
+      .dx-list-item {
+        margin-bottom: 0;
+        margin-top: 0;
+        border-bottom: $fluent-scheduler-list-item-border-bottom;
+        border-bottom-color: $scheduler-border-color;
+
+        &:last-of-type {
+          border-bottom-left-radius: $tooltip-border-radius;
+          border-bottom-right-radius: $tooltip-border-radius;
+          border-bottom: none;
+        }
+
+        &:first-of-type {
+          border-top-left-radius: $tooltip-border-radius;
+          border-top-right-radius: $tooltip-border-radius;
+        }
+
+        .dx-tooltip-appointment-item {
+          margin-left: $fluent-scheduler-appointment-tooltip-content-margin-left;
+
+          .dx-tooltip-appointment-item-marker-body {
+            margin-top: $fluent-scheduler-tooltip-appointment-item-marker-body-margin-top;
+            width: $fluent-tooltip-marker-dimension;
+            height: $fluent-tooltip-marker-dimension;
+          }
+
+          .dx-tooltip-appointment-item-content {
+            .dx-tooltip-appointment-item-content-subject {
+              margin-top: $fluent-scheduler-appointment-tooltip-title-margin-top;
+              font-size: $fluent-scheduler-appointment-tooltip-title-font-size;
+              font-weight: $fluent-scheduler-tooltip-subject-font-weight;
+            }
+
+            .dx-tooltip-appointment-item-content-date {
+              font-size: $fluent-scheduler-appointment-tooltip-date-font-size;
+              opacity: 1;
+              margin-top: $fluent-scheduler-tooltip-appointment-item-content-date-margin-top;
+            }
+          }
+
+          .dx-tooltip-appointment-item-delete-button-container {
+            padding-top: $fluent-scheduler-appointment-tooltip-remove-padding-top;
+          }
+        }
+      }
+    }
+  }
+}
+
+.dx-scheduler-timeline .dx-scheduler-group-flex-container .dx-scheduler-group-header {
+  width: $fluent-scheduler-group-header-width;
+}
+
+.dx-scheduler-header-panel-empty-cell {
+  margin-top: 0;
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_sizes.scss
new file mode 100644
index 000000000000..379a021a056a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scheduler/_sizes.scss
@@ -0,0 +1,283 @@
+@use "../sizes" as *;
+@use "../button/colors" as *;
+@use "../form/sizes" as *;
+@use "../toolbar/sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+
+$fluent-scheduler-workspace-date-table-cell-height: null !default;
+$fluent-scheduler-toolbar-item-offset: null !default;
+$fluent-scheduler-navigator-height: null !default;
+$fluent-scheduler-header-panel-day-font-size: null !default;
+$fluent-scheduler-appointment-tooltip-title-font-size: null !default;
+$fluent-scheduler-appointment-tooltip-date-font-size: null !default;
+$fluent-scheduler-workspace-month-cell-left-offset: null !default;
+$fluent-scheduler-appointment-content-padding: null !default;
+$fluent-scheduler-recurring-appointment-content-padding: null !default;
+$fluent-scheduler-appointment-content-padding-rtl: null !default;
+$fluent-scheduler-recurring-appointment-content-padding-rtl: null !default;
+$fluent-scheduler-dropdown-button-height: null !default;
+$fluent-scheduler-dropdown-button-padding: null !default;
+$fluent-scheduler-dropdown-button-margin: null !default;
+$fluent-scheduler-dropdown-button-vertical-margin: null !default;
+$fluent-scheduler-dropdown-button-adaptive-margin: null !default;
+$fluent-scheduler-dropdown-button-adaptive-vertical-margin: null !default;
+$fluent-scheduler-appointment-tooltip-content-margin-left: null !default;
+$fluent-tooltip-marker-dimension: null !default;
+$fluent-scheduler-appointment-tooltip-title-margin-top: null !default;
+$fluent-scheduler-appointment-tooltip-remove-padding-top: null !default;
+
+$fluent-scheduler-appointment-popup-toolbar-height: null !default;
+$fluent-scheduler-appointment-popup-icon-container-height: null !default;
+$fluent-scheduler-appointment-popup-icon-padding-right: null !default;
+$fluent-scheduler-appointment-popup-icon-margin-top: null !default;
+$fluent-scheduler-appointment-popup-item-padding-horizontal: null !default;
+$fluent-scheduler-appointment-popup-all-day-item-height: null !default;
+$fluent-scheduler-appointment-popup-days-of-week-buttons-gap: null !default;
+$fluent-scheduler-appointment-popup-repeat-end-item-height: null !default;
+
+$fluent-scheduler-appointment-short-content-padding: null !default;
+$fluent-scheduler-appointment-15min-height: null !default;
+$fluent-scheduler-appointment-20min-height: null !default;
+$fluent-scheduler-appointment-25min-height: null !default;
+$fluent-scheduler-appointment-10min-recurrence-padding-right: null !default;
+$fluent-scheduler-appointment-10min-title-font-size: null !default;
+$fluent-scheduler-appointment-10min-title-line-height: null !default;
+$fluent-scheduler-appointment-10min-icon-font-size: null !default;
+$fluent-scheduler-appointment-10min-icon-right: null !default;
+$fluent-scheduler-appointment-15min-recurrence-padding-right: null !default;
+$fluent-scheduler-appointment-15min-title-font-size: null !default;
+$fluent-scheduler-appointment-15min-title-line-height: null !default;
+$fluent-scheduler-appointment-15min-icon-font-size: null !default;
+$fluent-scheduler-appointment-15min-icon-right: null !default;
+$fluent-scheduler-appointment-20min-recurrence-padding-right: null !default;
+$fluent-scheduler-appointment-20min-icon-right: null !default;
+
+$scheduler-left-column-width: 65px !default; // dx-offscale: 65px
+$fluent-scheduler-timeline-date-table-cell-height: 50px !default; // dx-offscale: 50px
+
+/**
+* $name 15. Border radius
+* $type text
+*/
+$scheduler-border-radius: 0 !default;
+
+$fluent-scheduler-navigator-icon-font-size: $fluent-base-icon-size;
+$fluent-scheduler-appointment-month-text-size: ds.$spacing-120 !default;
+$fluent-scheduler-workspace-info-text-size: ds.$spacing-160 !default;
+$fluent-scheduler-all-day-title-font-size: ds.$font-size-caption-md !default;
+$fluent-scheduler-time-panel-font-size: ds.$font-size-caption-md !default;
+$fluent-scheduler-header-panel-margin: ds.$spacing-140 !default;
+$fluent-scheduler-group-header-font-size: ds.$font-size-title-xs !default;
+$fluent-scheduler-group-header-table-cell-width: ds.$spacing-1000 !default;
+$fluent-scheduler-appointment-transparent-left-border: ds.$spacing-10 solid transparent !default;
+$fluent-scheduler-appointment-transparent-right-border: ds.$spacing-10 solid transparent !default;
+$fluent-scheduler-workspace-month-header-height: ds.$spacing-220 !default;
+$fluent-scheduler-workspace-month-timeline--time-height: ds.$spacing-340 !default;
+
+$agenda-appointment-title-font-size: null !default;
+$fluent-scheduler-header-height: null !default;
+$fluent-scheduler-header-offset: null !default;
+
+$scheduler-timeline-cell-height: 50px !default; // dx-offscale: 50px
+
+$header-day-element-height: null !default;
+
+$fluent-scheduler-collapsed-all-day-table-cell-height: null !default;
+
+$header-panel-time-cell-height: ds.$spacing-320 !default;
+$header-panel-time-cell-padding: null !default;
+
+
+@if $size == "default" {
+  $fluent-scheduler-collapsed-all-day-table-cell-height: ds.$spacing-320 !default;
+  $header-panel-time-cell-padding: ds.$spacing-120 !default;
+
+  $header-day-element-height: ds.$spacing-260;
+  $fluent-scheduler-workspace-date-table-cell-height: 38px !default; // dx-offscale: 38px
+
+  $fluent-scheduler-navigator-height: ds.$spacing-360 !default;
+  $fluent-scheduler-header-panel-day-font-size: ds.$font-size-title-sm !default;
+  $fluent-scheduler-header-height: 46px !default; // dx-offscale: 46px
+  $fluent-scheduler-header-offset: 0 ds.$spacing-120 !default;
+  $fluent-scheduler-toolbar-item-offset: ds.$spacing-40 !default;
+
+  $fluent-scheduler-appointment-tooltip-title-font-size: ds.$font-size-title-sm !default;
+  $fluent-scheduler-appointment-tooltip-date-font-size: ds.$font-size-140 !default; // dx-no-semantic-role: compact branch (110) is off the role scale
+  $fluent-scheduler-workspace-month-cell-left-offset: ds.$spacing-80 !default;
+
+  $fluent-scheduler-appointment-content-padding: ds.$spacing-60 ds.$spacing-80 ds.$spacing-60 ds.$spacing-120 !default;
+  $fluent-scheduler-recurring-appointment-content-padding: ds.$spacing-60 ds.$spacing-200 ds.$spacing-60 ds.$spacing-120 !default;
+  $fluent-scheduler-appointment-content-padding-rtl: ds.$spacing-60 ds.$spacing-120 ds.$spacing-60 ds.$spacing-80 !default;
+  $fluent-scheduler-recurring-appointment-content-padding-rtl: ds.$spacing-60 ds.$spacing-120 ds.$spacing-60 ds.$spacing-200 !default;
+  $fluent-scheduler-dropdown-button-height: ds.$spacing-220 !default;
+  $fluent-scheduler-dropdown-button-padding: ds.$spacing-40 !default;
+  $fluent-scheduler-dropdown-button-margin: ds.$spacing-50 ds.$spacing-10 ds.$spacing-30 ds.$spacing-30 !default;
+  $fluent-scheduler-dropdown-button-vertical-margin: ds.$spacing-50 ds.$spacing-30 ds.$spacing-30 ds.$spacing-30 !default;
+  $fluent-scheduler-dropdown-button-adaptive-margin: 0 ds.$spacing-20 !default;
+  $fluent-scheduler-dropdown-button-adaptive-vertical-margin: 0 ds.$spacing-20 0 ds.$spacing-10 !default;
+
+  $fluent-scheduler-appointment-tooltip-content-margin-left: ds.$spacing-60 !default;
+  $fluent-tooltip-marker-dimension: ds.$spacing-120 !default;
+  $fluent-scheduler-appointment-tooltip-title-margin-top: 0 !default;
+  $fluent-scheduler-appointment-tooltip-remove-padding-top: ds.$spacing-10 !default;
+
+  $fluent-scheduler-appointment-popup-toolbar-height: ds.$spacing-560 !default;
+  $fluent-scheduler-appointment-popup-icon-container-height: ds.$spacing-320 !default;
+  $fluent-scheduler-appointment-popup-icon-padding-right: ds.$spacing-100 !default;
+  $fluent-scheduler-appointment-popup-icon-margin-top: ds.$spacing-240 !default;
+  $fluent-scheduler-appointment-popup-item-padding-horizontal: ds.$spacing-60 !default;
+  $fluent-scheduler-appointment-popup-all-day-item-height: ds.$spacing-400 !default;
+  $fluent-scheduler-appointment-popup-days-of-week-buttons-gap: ds.$spacing-120 !default;
+  $fluent-scheduler-appointment-popup-repeat-end-item-height: ds.$spacing-320 !default;
+
+  $agenda-appointment-title-font-size: ds.$font-size-base-md;
+
+  $fluent-scheduler-appointment-short-content-padding: 0 ds.$spacing-80 0 ds.$spacing-120 !default;
+  $fluent-scheduler-appointment-15min-height: 17px !default; // literal: used in @container conditions where var() is invalid
+  $fluent-scheduler-appointment-20min-height: 24px !default; // literal: used in @container conditions where var() is invalid
+  $fluent-scheduler-appointment-25min-height: 32px !default; // literal: used in @container conditions where var() is invalid
+
+  $fluent-scheduler-appointment-10min-recurrence-padding-right: ds.$spacing-140 !default;
+  $fluent-scheduler-appointment-10min-title-font-size: ds.$spacing-80 !default;
+  $fluent-scheduler-appointment-10min-title-line-height: ds.$line-height-120 !default; // dx-no-semantic-role: 120 is off the line-height-role scale
+  $fluent-scheduler-appointment-10min-icon-font-size: ds.$font-size-120 !default; // dx-icon-glyph-size: text roles not applicable
+  $fluent-scheduler-appointment-10min-icon-right: ds.$spacing-20 !default;
+
+  $fluent-scheduler-appointment-15min-recurrence-padding-right: ds.$spacing-140 !default;
+  $fluent-scheduler-appointment-15min-title-font-size: ds.$font-size-base-sm !default;
+  $fluent-scheduler-appointment-15min-title-line-height: ds.$line-height-180 !default; // dx-no-semantic-role: 180 is off the line-height-role scale
+  $fluent-scheduler-appointment-15min-icon-font-size: ds.$font-size-120 !default; // dx-icon-glyph-size: text roles not applicable
+  $fluent-scheduler-appointment-15min-icon-right: ds.$spacing-20 !default;
+
+  $fluent-scheduler-appointment-20min-icon-right: ds.$spacing-20 !default;
+  $fluent-scheduler-appointment-20min-recurrence-padding-right: ds.$spacing-180 !default;
+}
+
+@else if $size == "compact" {
+  $fluent-scheduler-collapsed-all-day-table-cell-height: ds.$spacing-240 !default;
+  $header-panel-time-cell-padding: ds.$spacing-80 !default;
+
+  $header-day-element-height: ds.$spacing-240;
+  $fluent-scheduler-workspace-date-table-cell-height: ds.$spacing-280 !default;
+
+  $fluent-scheduler-navigator-height: ds.$spacing-280 !default;
+  $fluent-scheduler-header-panel-day-font-size: ds.$font-size-title-xs !default;
+  $fluent-scheduler-header-height: ds.$spacing-340 !default;
+  $fluent-scheduler-header-offset: ds.$spacing-20 ds.$spacing-80 !default;
+  $fluent-scheduler-toolbar-item-offset: ds.$spacing-40 !default;
+
+  $fluent-scheduler-appointment-tooltip-title-font-size: ds.$font-size-title-xs !default;
+  $fluent-scheduler-appointment-tooltip-date-font-size: ds.$font-size-110 !default; // dx-no-semantic-role: 110 is off the font-size-role scale
+  $fluent-scheduler-workspace-month-cell-left-offset: ds.$spacing-40 !default;
+
+  $fluent-scheduler-appointment-content-padding: ds.$spacing-40 ds.$spacing-60 ds.$spacing-40 ds.$spacing-80 !default;
+  $fluent-scheduler-recurring-appointment-content-padding: ds.$spacing-40 ds.$spacing-160 ds.$spacing-40 ds.$spacing-80 !default;
+  $fluent-scheduler-appointment-content-padding-rtl: ds.$spacing-40 ds.$spacing-80 ds.$spacing-40 ds.$spacing-60 !default;
+  $fluent-scheduler-recurring-appointment-content-padding-rtl: ds.$spacing-40 ds.$spacing-80 ds.$spacing-40 ds.$spacing-160 !default;
+  $fluent-scheduler-dropdown-button-height: ds.$spacing-180 !default;
+  $fluent-scheduler-dropdown-button-padding: ds.$spacing-20 !default;
+  $fluent-scheduler-dropdown-button-margin: ds.$spacing-20 ds.$spacing-10 ds.$spacing-20 ds.$spacing-30 !default;
+  $fluent-scheduler-dropdown-button-vertical-margin: ds.$spacing-20 ds.$spacing-10 ds.$spacing-20 ds.$spacing-10 !default;
+  $fluent-scheduler-dropdown-button-adaptive-margin: 0 ds.$spacing-20 !default;
+  $fluent-scheduler-dropdown-button-adaptive-vertical-margin: 0 ds.$spacing-20 0 ds.$spacing-10 !default;
+
+  $fluent-scheduler-appointment-tooltip-content-margin-left: ds.$spacing-80 !default;
+  $fluent-tooltip-marker-dimension: ds.$spacing-180 !default;
+  $fluent-scheduler-appointment-tooltip-title-margin-top: ds.$spacing-30 !default;
+  $fluent-scheduler-appointment-tooltip-remove-padding-top: ds.$spacing-20 !default;
+
+  $fluent-scheduler-appointment-popup-toolbar-height: ds.$spacing-480 !default;
+  $fluent-scheduler-appointment-popup-icon-container-height: ds.$spacing-240 !default;
+  $fluent-scheduler-appointment-popup-icon-padding-right: ds.$spacing-80 !default;
+  $fluent-scheduler-appointment-popup-icon-margin-top: ds.$spacing-180 !default;
+  $fluent-scheduler-appointment-popup-item-padding-horizontal: ds.$spacing-40 !default;
+  $fluent-scheduler-appointment-popup-all-day-item-height: ds.$spacing-300 !default;
+  $fluent-scheduler-appointment-popup-days-of-week-buttons-gap: ds.$spacing-80 !default;
+  $fluent-scheduler-appointment-popup-repeat-end-item-height: ds.$spacing-240 !default;
+
+  $agenda-appointment-title-font-size: ds.$spacing-130;
+
+  $fluent-scheduler-appointment-short-content-padding: 0 ds.$spacing-80 0 ds.$spacing-120 !default;
+  $fluent-scheduler-appointment-15min-height: 17px !default; // literal: used in @container conditions where var() is invalid
+  $fluent-scheduler-appointment-20min-height: 24px !default; // literal: used in @container conditions where var() is invalid
+  $fluent-scheduler-appointment-25min-height: 32px !default; // literal: used in @container conditions where var() is invalid
+
+  $fluent-scheduler-appointment-10min-recurrence-padding-right: ds.$spacing-140 !default;
+  $fluent-scheduler-appointment-10min-title-font-size: ds.$spacing-80 !default;
+  $fluent-scheduler-appointment-10min-title-line-height: ds.$line-height-120 !default; // dx-no-semantic-role: 120 is off the line-height-role scale
+  $fluent-scheduler-appointment-10min-icon-font-size: ds.$font-size-120 !default; // dx-icon-glyph-size: text roles not applicable
+  $fluent-scheduler-appointment-10min-icon-right: ds.$spacing-20 !default;
+
+  $fluent-scheduler-appointment-15min-recurrence-padding-right: ds.$spacing-160 !default;
+  $fluent-scheduler-appointment-15min-title-font-size: ds.$font-size-base-sm !default;
+  $fluent-scheduler-appointment-15min-title-line-height: ds.$line-height-120 !default; // dx-no-semantic-role: 120 is off the line-height-role scale
+  $fluent-scheduler-appointment-15min-icon-font-size: ds.$font-size-120 !default; // dx-icon-glyph-size: text roles not applicable
+  $fluent-scheduler-appointment-15min-icon-right: ds.$spacing-50 !default;
+
+  $fluent-scheduler-appointment-20min-recurrence-padding-right: ds.$spacing-200 !default;
+  $fluent-scheduler-appointment-20min-icon-right: ds.$spacing-50 !default;
+}
+
+// Values hoisted from style-file literals (tokenized)
+$fluent-scheduler-group-header-font-weight: ds.$font-weight-500 !default; // dx-no-semantic-role: 500 is off the weight-role scale (400/600/700)
+$fluent-scheduler-tooltip-subject-font-weight: ds.$font-weight-base-strong !default;
+$fluent-scheduler-appointment-title-font-size: ds.$font-size-base-sm !default;
+$fluent-scheduler-appointment-details-font-size: ds.$font-size-caption-sm !default;
+$fluent-scheduler-header-panel-cell-date-font-size: ds.$font-size-title-xs !default;
+$fluent-scheduler-navigator-button-font-size: ds.$font-size-base-sm !default;
+$fluent-scheduler-appointment-border-radius: ds.$border-radius-40 !default;
+$fluent-scheduler-time-panel-cell-margin-top: -6px !default; // dx-offscale: -6px
+$fluent-scheduler-small-padding-right: ds.$spacing-20 !default;
+$fluent-scheduler-small-padding-left: ds.$spacing-20 !default;
+$fluent-scheduler-date-time-indicator-height: ds.$spacing-20 !default;
+$fluent-scheduler-header-panel-cell-padding-bottom: ds.$spacing-20 !default;
+$fluent-scheduler-header-panel-cell-date-margin-bottom: ds.$spacing-10 !default;
+$fluent-scheduler-small-margin-top: ds.$spacing-40 !default;
+$fluent-scheduler-small-margin-bottom: ds.$spacing-40 !default;
+$fluent-scheduler-small-margin-left: ds.$spacing-80 !default;
+$fluent-scheduler-month-appointment-content-padding-rtl: ds.$spacing-40 ds.$spacing-120 0 ds.$spacing-80 !default;
+$fluent-scheduler-month-recurrence-appointment-content-padding-rtl: ds.$spacing-40 ds.$spacing-120 0 ds.$spacing-200 !default;
+$fluent-scheduler-month-appointment-content-padding: ds.$spacing-40 ds.$spacing-80 0 ds.$spacing-120 !default;
+$fluent-scheduler-month-recurrence-appointment-content-padding: ds.$spacing-40 ds.$spacing-200 0 ds.$spacing-120 !default;
+$fluent-scheduler-date-table-cell-height: ds.$spacing-1000 !default;
+$fluent-scheduler-appointment-collector-margin-left: ds.$spacing-520 !default;
+$fluent-scheduler-appointment-collector-margin-right: ds.$spacing-520 !default;
+$fluent-scheduler-group-header-content-top: ds.$spacing-80 !default;
+$fluent-scheduler-widget-margin-bottom: ds.$spacing-30 !default;
+$fluent-scheduler-appointment-strip-width: ds.$spacing-60 !default;
+$fluent-scheduler-group-header-content-padding-top: ds.$spacing-20 !default;
+$fluent-scheduler-tooltip-appointment-item-marker-body-margin-top: ds.$spacing-120 !default;
+$fluent-scheduler-tooltip-appointment-item-content-date-margin-top: ds.$spacing-40 !default;
+$fluent-scheduler-group-header-width: ds.$spacing-1000 !default;
+$fluent-scheduler-group-header-border-bottom: ds.$border-width-10 solid !default;
+$fluent-scheduler-last-group-cell-border-right: ds.$border-width-10 solid !default;
+$fluent-scheduler-rtl-border-left: ds.$border-width-10 solid !default;
+$fluent-scheduler-list-item-border-bottom: ds.$border-width-10 solid !default;
+$fluent-scheduler-month-date-text-size: ds.$font-size-base-md !default;
+$scheduler-first-of-month-border: ds.$border-width-10 solid !default;
+$fluent-scheduler-agenda-time-panel-cell-padding: ds.$spacing-80 !default;
+$fluent-scheduler-scrollable-content-min-height: 600px !default; // dx-offscale: 600px
+$fluent-scheduler-header-panel-empty-cell-border-bottom-width: ds.$border-width-10 !default;
+$fluent-scheduler-appointment-strip-border-top-right-radius: ds.$border-radius-60 !default;
+$fluent-scheduler-appointment-strip-border-bottom-right-radius: ds.$border-radius-60 !default;
+$fluent-scheduler-appointment-strip-border-top-left-radius: ds.$border-radius-60 !default;
+$fluent-scheduler-appointment-strip-border-bottom-left-radius: ds.$border-radius-60 !default;
+
+// Base-layer values injected with design tokens (wave B1)
+$fluent-scheduler-agenda-title-font-weight: ds.$font-weight-base-stronger !default;
+$fluent-scheduler-agenda-details-font-size: ds.$font-size-caption-md !default;
+$fluent-scheduler-appointment-icon-font-size: ds.$font-size-180 !default; // dx-icon-glyph-size: text roles not applicable
+
+// Base-layer sizing injected with design tokens (wave B2 — scheduler/views)
+$fluent-scheduler-views-header-border: ds.$border-width-20 solid !default;
+$fluent-scheduler-views-empty-cell-border-bottom: ds.$border-width-10 solid !default;
+$fluent-scheduler-views-empty-cell-border-right: ds.$border-width-10 solid !default;
+$fluent-scheduler-views-empty-cell-border-left: ds.$border-width-10 solid !default;
+$fluent-scheduler-views-first-child-border-left: ds.$border-width-10 solid transparent !default;
+$fluent-scheduler-views-time-panel-border-bottom: ds.$border-width-10 solid transparent !default;
+$fluent-scheduler-views-group-header-padding: 0 ds.$spacing-50 !default;
+$fluent-scheduler-views-group-header-padding-alt: 0 ds.$spacing-50 0 ds.$spacing-100 !default;
+$fluent-scheduler-views-time-indicator-height: ds.$spacing-10 !default;
+$fluent-scheduler-views-group-header-content-height: ds.$spacing-400 !default;
+$fluent-scheduler-views-vertical-group-min-height: ds.$spacing-1000 !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_colors.scss
new file mode 100644
index 000000000000..41407ed0d429
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_colors.scss
@@ -0,0 +1,5 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$scrollview-shadow-color: ds.$color-shadow-key !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_index.scss
new file mode 100644
index 000000000000..66cf1a28dc9a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_index.scss
@@ -0,0 +1,99 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../scrollable/colors" as *;
+
+// adduse
+@use "../scrollable";
+@use "../../base/scrollView" with (
+  $scrollview-top-pocket-width: $fluent-scrollview-top-pocket-width,
+  $scrollview-top-pocket-height: $fluent-scrollview-top-pocket-height,
+  $scrollview-pull-down-indicator-padding: $fluent-scrollview-pull-down-indicator-padding,
+  $scrollview-icon-pulldown-padding: $fluent-scrollview-icon-pulldown-padding,
+  $scrollview-pull-down-indicator-width: $fluent-scrollview-pull-down-indicator-width,
+  $scrollview-pull-down-image-margin: $fluent-scrollview-pull-down-image-margin,
+  $scrollview-pull-down-image-height: $fluent-scrollview-pull-down-image-height,
+  $scrollview-scrollbottom-padding: $fluent-scrollview-scrollbottom-padding,
+  $scrollview-scrollbottom-indicator-margin: $fluent-scrollview-scrollbottom-indicator-margin,
+  $scrollview-scrollbottom-indicator-margin-2: $fluent-scrollview-scrollbottom-indicator-margin-2,
+  $scrollview-pulldown-icon-font-size: $fluent-scrollview-pulldown-icon-font-size,
+);
+
+
+.dx-scrollview-scrollbottom-text,
+.dx-scrollview-pull-down-text {
+  margin-left: $fluent-scrollview-pull-down-text-margin-left;
+  top: calc((50px - #{$fluent-base-font-size}) / 2);
+  display: inline-block;
+
+  .dx-rtl & {
+    margin-left: 0;
+    margin-right: $fluent-scrollview-rtl-margin-right;
+  }
+}
+
+.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: $scrollable-bg;
+  box-shadow: 0 1px 4px 0 $scrollview-shadow-color;
+}
+
+.dx-scrollview-scrollbottom-loading {
+  .dx-scrollview-scrollbottom-image {
+    width: $fluent-scrollview-scrollbottom-image-width;
+    height: $fluent-scrollview-scrollbottom-image-height;
+  }
+}
+
+.dx-scrollview-scrollbottom-indicator,
+.dx-scrollview-pull-down-indicator {
+  margin-right: 0;
+  height: $scrollview-loading-indicator-size;
+  width: $scrollview-loading-indicator-size;
+  border-radius: math.div($scrollview-loading-indicator-size, 2);
+  display: inline-flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  box-shadow: 0 1px 3px 1px $scrollview-shadow-color;
+  opacity: 1;
+
+
+  > .dx-loadindicator {
+    height: $fluent-scrollview-scrollbottom-image-height;
+    width: $fluent-scrollview-scrollbottom-image-width;
+
+    > .dx-loadindicator-wrapper {
+      font-size: $fluent-scrollview-load-indicator-font-size;
+    }
+  }
+}
+
+.dx-scrollview-pull-down-indicator {
+  position: relative;
+  margin-left: 0;
+  margin-top: math.div(-$scrollview-loading-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/dxdsfluent/scrollView/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_sizes.scss
new file mode 100644
index 000000000000..172c34ddb915
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollView/_sizes.scss
@@ -0,0 +1,28 @@
+@use "../../../_design-system/variables/ds" as ds;
+@use "../sizes" as *;
+
+// adduse
+
+
+// Values hoisted from style-file literals (tokenized)
+$fluent-scrollview-load-indicator-font-size: ds.$font-size-240 !default; // dx-icon-glyph-size: text roles not applicable
+$fluent-scrollview-pull-down-text-margin-left: ds.$spacing-100 !default;
+$fluent-scrollview-rtl-margin-right: ds.$spacing-100 !default;
+$fluent-scrollview-scrollbottom-image-width: ds.$spacing-240 !default;
+$fluent-scrollview-scrollbottom-image-height: ds.$spacing-240 !default;
+$scrollview-loading-indicator-size: 42px !default; // dx-offscale: 42px
+
+// Base-layer values injected with design tokens (wave B1)
+$fluent-scrollview-pulldown-icon-font-size: ds.$font-size-240 !default; // dx-icon-glyph-size: text roles not applicable
+
+// Base-layer sizing injected with design tokens (wave B2)
+$fluent-scrollview-top-pocket-width: ds.$spacing-400 !default;
+$fluent-scrollview-top-pocket-height: ds.$spacing-400 !default;
+$fluent-scrollview-pull-down-indicator-padding: ds.$spacing-40 !default;
+$fluent-scrollview-icon-pulldown-padding: ds.$spacing-80 !default;
+$fluent-scrollview-pull-down-indicator-width: ds.$spacing-200 !default;
+$fluent-scrollview-pull-down-image-margin: 0 ds.$spacing-200 !default;
+$fluent-scrollview-pull-down-image-height: 50px !default; // dx-offscale: 50px
+$fluent-scrollview-scrollbottom-padding: ds.$spacing-100 0 !default;
+$fluent-scrollview-scrollbottom-indicator-margin: 0 ds.$spacing-100 0 0 !default;
+$fluent-scrollview-scrollbottom-indicator-margin-2: 0 0 0 ds.$spacing-100 !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_colors.scss
new file mode 100644
index 000000000000..de8c4862157a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_colors.scss
@@ -0,0 +1,12 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$scrollable-bg: ds.$color-surface-neutral-default-rest !default;
+
+/**
+* $name 10. Scroll bar background color
+* $type color
+*/
+$scrollable-scroll-bg: ds.$scroll-bar-color-thumb-rest !default;
+$scrollable-scrollbar-bg: ds.$scroll-bar-color-bg-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_index.scss
new file mode 100644
index 000000000000..798297e2159f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_index.scss
@@ -0,0 +1,29 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/scrollable";
+@use "../../base/scrollable/mixins" as *;
+
+// adduse
+
+@include dx-scrollable-scroll-content(
+  $scrollable-scroll-bg,
+);
+@include dx-scrollable-scrollbar-hoverable(
+  $scrollable-scrollbar-bg,
+  transparent,
+  $scrollable-scroll-bg,
+);
+@include dx-scrollable-scrollbar-vertical(
+  $fluent-scrollbar-size-thin,
+  $fluent-scrollbar-size,
+  0,
+);
+@include dx-scrollable-scrollbar-horizontal(
+  $fluent-scrollbar-size-thin,
+  $fluent-scrollbar-size,
+  0,
+);
+@include dx-scrollable-scrollbars-alwaysvisible($fluent-scrollbar-size-thin);
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_sizes.scss
new file mode 100644
index 000000000000..e8d4211f5a9f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/scrollable/_sizes.scss
@@ -0,0 +1,7 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-scrollbar-size-thin: ds.$spacing-60;
+$fluent-scrollbar-size: ds.$spacing-130;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_colors.scss
new file mode 100644
index 000000000000..6399ee4177c2
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_colors.scss
@@ -0,0 +1,9 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+/**
+* $name 10. Item background color
+* $type color
+*/
+$selectbox-list-bg: ds.$color-surface-neutral-default-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_index.scss
new file mode 100644
index 000000000000..45dffa2b460b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_index.scss
@@ -0,0 +1,24 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../common/sizes" as *;
+@use "../../base/selectBox";
+
+// adduse
+
+@use "../dropDownList";
+
+.dx-selectbox-popup-wrapper {
+  .dx-overlay-content {
+    box-shadow: $fluent-base-dropdown-widgets-shadow;
+  }
+
+  .dx-popup-content {
+    padding: 0;
+  }
+
+  .dx-list {
+    background-color: $selectbox-list-bg;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_sizes.scss
new file mode 100644
index 000000000000..43b104010f9e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/selectBox/_sizes.scss
@@ -0,0 +1,4 @@
+@use "../sizes" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_colors.scss
new file mode 100644
index 000000000000..c73fb5e128fe
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_colors.scss
@@ -0,0 +1,35 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+/**
+* $name 10. Bar background color
+* $type color
+*/
+$fluent-slider-bar-bg: ds.$color-border-neutral-accessible-rest !default;
+
+/**
+* $name 20. Selected range background color
+* $type color
+*/
+$slider-accent-color: ds.$color-surface-primary-default-rest !default;
+$slider-accent-color-hover: ds.$color-surface-primary-default-hovered !default;
+$slider-accent-color-focused: ds.$color-surface-primary-default-active !default;
+
+$slider-invalid-color: ds.$color-border-danger-default-rest !default;
+$slider-invalid-color-hover: ds.$color-border-danger-default-hovered !default;
+$slider-invalid-color-focused: ds.$color-border-danger-default-hovered !default;
+
+$fluent-slider-disabled-bg: ds.$color-content-neutral-default-disabled !default;
+$fluent-slider-bar-disabled-bg: ds.$color-surface-neutral-default-disabled !default;
+
+/**
+* $name 30. Slider tooltip text color
+* $type color
+*/
+$fluent-slider-tooltip-color: ds.$color-content-neutral-default-rest !default;
+
+// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
+$slider-border-color: ds.$color-border-neutral-default-rest !default;
+$slider-element-bg: ds.$color-surface-neutral-default-rest !default;
+$slider-theme-invalid-color: ds.$color-border-danger-default-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_index.scss
new file mode 100644
index 000000000000..99f26eb808b2
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_index.scss
@@ -0,0 +1,169 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/slider";
+@use "../../base/popover/mixins" as *;
+
+// adduse
+
+.dx-slider-wrapper {
+  height: $fluent-slider-wrapper-height;
+
+  @include dx-popover-arrow-size(14px, 2px);
+}
+
+.dx-slider-bar {
+  margin-top: calc((#{$fluent-slider-wrapper-height} - #{$fluent-slider-track-height}) / 2);
+  margin-right: calc((#{$fluent-slider-handle-size}) / 2);
+  margin-left: calc((#{$fluent-slider-handle-size}) / 2);
+  background: $fluent-slider-bar-bg;
+  height: $fluent-slider-track-height;
+  border-radius: $fluent-slider-track-border-radius;
+}
+
+.dx-slider-range {
+  height: $fluent-slider-track-height;
+  border-radius: $fluent-slider-track-border-radius;
+
+  &.dx-slider-range-visible {
+    background: $slider-accent-color;
+  }
+}
+
+.dx-slider-handle {
+  margin-top: calc(#{$fluent-slider-track-height} / 2 - #{$fluent-slider-handle-size} / 2);
+  margin-inline-end: calc(#{$fluent-slider-handle-size} / -2);
+  width: $fluent-slider-handle-size;
+  height: $fluent-slider-handle-size;
+  border-radius: $fluent-slider-radius;
+  border-width: $fluent-slider-handle-border-width;
+  border-style: solid;
+  border-color: $slider-border-color;
+  background-color: $slider-element-bg;
+
+  &::after {
+    position: absolute;
+    display: block;
+    inset: 0;
+    background: $slider-accent-color;
+    content: "";
+    border-radius: $fluent-slider-radius;
+    border-width: $fluent-slider-handle-inner-border-width;
+    border-style: solid;
+    border-color: $slider-element-bg;
+  }
+
+  &.dx-state-hover {
+    &::after {
+      background: $slider-accent-color-hover;
+    }
+  }
+
+  &.dx-state-focused {
+    border-color: $slider-accent-color-focused;
+
+    &::after {
+      background: $slider-accent-color-focused;
+    }
+  }
+
+  .dx-tooltip-wrapper {
+    .dx-overlay-content {
+      .dx-popup-content {
+        line-height: normal;
+        color: $fluent-slider-tooltip-color;
+
+        .dx-slider-tooltip-position-top & {
+          padding-top: $fluent-slider-tooltip-position-top-padding-top;
+        }
+      }
+
+      &.dx-state-disabled {
+        .dx-popup-content {
+          padding-top: calc((#{$fluent-slider-tooltip-width}) / 2);
+
+          .dx-slider-tooltip-position-top & {
+            padding-top: $fluent-slider-tooltip-position-top-padding-top;
+            padding-bottom: calc((#{$fluent-slider-tooltip-width}) / 2);
+          }
+        }
+      }
+    }
+  }
+}
+
+.dx-slider-tooltip-position-top {
+  padding-top: calc(#{$fluent-slider-tooltip-width} + 6px);
+}
+
+.dx-slider-tooltip-position-bottom {
+  padding-bottom: calc(#{$fluent-slider-tooltip-width} + 6px);
+}
+
+.dx-slider-label-position-bottom {
+  .dx-slider-label {
+    bottom: $fluent-slider-label-bottom;
+  }
+}
+
+.dx-slider-label-position-top {
+  .dx-slider-label {
+    top: $fluent-slider-label-top;
+  }
+}
+
+.dx-invalid {
+  .dx-slider-handle {
+    &::after {
+      background-color: $slider-theme-invalid-color;
+    }
+
+    &.dx-state-hover {
+      &::after {
+        background-color: $slider-invalid-color-hover;
+      }
+    }
+
+    &.dx-state-focused {
+      border-color: $slider-invalid-color-focused;
+
+      &::after {
+        background-color: $slider-invalid-color-focused;
+      }
+    }
+  }
+
+  .dx-slider-range-visible {
+    background-color: $slider-invalid-color;
+    border-color: $slider-invalid-color;
+  }
+}
+
+.dx-state-disabled {
+  &.dx-slider,
+  .dx-slider {
+    opacity: 1;
+
+    .dx-slider-handle {
+      opacity: 1;
+    }
+  }
+
+  &.dx-slider-handle {
+    border-color: $fluent-slider-disabled-bg;
+
+    &::after {
+      background: $fluent-slider-disabled-bg;
+    }
+  }
+
+  .dx-slider-bar {
+    background: $fluent-slider-bar-disabled-bg;
+  }
+
+  .dx-slider-range.dx-slider-range-visible {
+    background: $fluent-slider-disabled-bg;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_sizes.scss
new file mode 100644
index 000000000000..24dc531e2159
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/slider/_sizes.scss
@@ -0,0 +1,43 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-slider-handle-size: null !default;
+$fluent-slider-wrapper-height: null !default;
+$fluent-slider-tooltip-width: null !default;
+$fluent-slider-top-tooltip-margin: null !default;
+
+$fluent-slider-height: ds.$spacing-280 !default; // for fieldset height
+$fluent-slider-radius: 50% !default;
+$fluent-slider-track-height: null !default;
+$fluent-slider-track-border-radius: ds.$border-radius-20 !default;
+$fluent-slider-handle-height: null !default;
+$fluent-slider-handle-inner-size: null !default;
+
+@if $size == "default" {
+  $fluent-slider-track-height: ds.$spacing-40 !default;
+  $fluent-slider-handle-height: ds.$spacing-180 !default;
+  $fluent-slider-handle-size: ds.$spacing-200 !default;
+  $fluent-slider-handle-inner-size: ds.$spacing-180 !default;
+  $fluent-slider-wrapper-height: ds.$spacing-320 !default;
+  $fluent-slider-tooltip-width: ds.$spacing-340 !default;
+  $fluent-slider-top-tooltip-margin: -5px !default; // dx-offscale: -5px
+}
+
+@else if $size == "compact" {
+  $fluent-slider-track-height: ds.$spacing-20 !default;
+  $fluent-slider-handle-height: ds.$spacing-140 !default;
+  $fluent-slider-handle-size: ds.$spacing-160 !default;
+  $fluent-slider-handle-inner-size: ds.$spacing-140 !default;
+  $fluent-slider-wrapper-height: ds.$spacing-260 !default;
+  $fluent-slider-tooltip-width: ds.$spacing-280 !default;
+  $fluent-slider-top-tooltip-margin: ds.$spacing-minus-20 !default;
+}
+
+// Values hoisted from style-file literals (tokenized)
+$fluent-slider-handle-border-width: ds.$border-width-10 !default;
+$fluent-slider-handle-inner-border-width: ds.$border-width-30 !default;
+$fluent-slider-tooltip-position-top-padding-top: ds.$spacing-60 !default;
+$fluent-slider-label-bottom: -18px !default; // dx-offscale: -18px
+$fluent-slider-label-top: -15px !default; // dx-offscale: -15px
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_colors.scss
new file mode 100644
index 000000000000..b32c7499774c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_colors.scss
@@ -0,0 +1,13 @@
+@use "../../../_design-system/variables/ds" as ds;
+@use "sass:color";
+@use "../sizes" as *;
+@use "../colors" as *;
+
+// adduse
+
+
+// Base-layer values injected with design tokens (wave B1)
+$fluent-sortable-clone-shadow-color-first: ds.$color-shadow-ambient !default;
+$fluent-sortable-clone-shadow-color-second: ds.$color-shadow-key !default;
+$fluent-sortable-clone-opacity: ds.$opacity-90 !default;
+$fluent-sortable-source-opacity: ds.$opacity-50 !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_index.scss
new file mode 100644
index 000000000000..07d1dbd9060e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_index.scss
@@ -0,0 +1,15 @@
+@use "../colors" as *;
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/sortable" as * with (
+  $sortable-clone-shadow-color-first: $fluent-sortable-clone-shadow-color-first,
+  $sortable-clone-shadow-color-second: $fluent-sortable-clone-shadow-color-second,
+  $sortable-clone-opacity: $fluent-sortable-clone-opacity,
+  $sortable-source-opacity: $fluent-sortable-source-opacity,
+    $base-accent: $base-accent,
+);
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_sizes.scss
new file mode 100644
index 000000000000..43b104010f9e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/sortable/_sizes.scss
@@ -0,0 +1,4 @@
+@use "../sizes" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/speechToText/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/speechToText/_colors.scss
new file mode 100644
index 000000000000..63068d06cc1a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/speechToText/_colors.scss
@@ -0,0 +1,4 @@
+@use "../colors" as *;
+@use "sass:color";
+
+// adduse
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/speechToText/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/speechToText/_index.scss
new file mode 100644
index 000000000000..3ae03fb5edbd
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/speechToText/_index.scss
@@ -0,0 +1,5 @@
+@use "../../base/speechToText";
+@use "colors" as *;
+@use "sizes" as *;
+
+// adduse
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/speechToText/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/speechToText/_sizes.scss
new file mode 100644
index 000000000000..2f5a2c74b993
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/speechToText/_sizes.scss
@@ -0,0 +1,4 @@
+@use "../common/sizes" as *;
+@use "../sizes" as *;
+
+// adduse
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_colors.scss
new file mode 100644
index 000000000000..87f59c58486c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_colors.scss
@@ -0,0 +1,18 @@
+@use "../colors" as *;
+@use "../overlay/colors" as *;
+@use "../button/colors" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$speed-dial-action-color: ds.$color-content-neutral-default-rest !default;
+$speed-dial-action-shadow: ds.$box-shadow-md !default;
+$speed-dial-action-label-shadow: ds.$box-shadow-sm !default;
+$speed-dial-action-shading-color: $overlay-shader-bg !default;
+
+$speed-dial-action-bg: $button-normal-bg !default;
+$speed-dial-action-hover-bg: $button-normal-hover-bg !default;
+$speed-dial-action-active-bg: $button-normal-active-bg !default;
+
+// Stays a Sass color: the shared base mixin derives hover/active from it via color.adjust() — see TOKENS_MIGRATION.md
+$speed-dial-action-main-bg: $base-accent !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_index.scss
new file mode 100644
index 000000000000..6e4e45c3298d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_index.scss
@@ -0,0 +1,46 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/speedDialAction" as *;
+@use "../button/colors" as *;
+
+// adduse
+@use "../overlay";
+@include dx-fa-button-mixin(
+  $fluent-main-fa-button-size,
+  $fluent-fa-button-size,
+  $fluent-base-icon-size,
+  $fluent-base-font-size,
+  $fluent-fa-button-label-padding,
+  $fluent-fa-button-label-offset,
+  $speed-dial-action-color,
+  $speed-dial-action-bg,
+  $speed-dial-action-shadow,
+  $speed-dial-action-shading-color,
+  $speed-dial-action-hover-bg,
+  $speed-dial-action-active-bg,
+  $speed-dial-action-label-shadow,
+  $speed-dial-action-main-bg,
+  $button-default-color
+);
+
+.dx-fa-button {
+  &.dx-fa-button-main {
+    .dx-overlay-content {
+      .dx-fa-button-label {
+        padding: $fluent-main-fa-button-label-padding;
+        font-size: $fluent-base-font-size;
+        font-weight: $fluent-fa-button-label-font-weight;
+      }
+    }
+
+    &.dx-fa-button-with-label {
+      .dx-overlay-content {
+        .dx-fa-button-icon {
+          padding-inline-start: $fluent-main-fa-button-horizontal-padding;
+        }
+      }
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_sizes.scss
new file mode 100644
index 000000000000..7a617f601f50
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_sizes.scss
@@ -0,0 +1,28 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-main-fa-button-label-padding: null !default;
+$fluent-main-fa-button-horizontal-padding: null !default;
+$fluent-main-fa-button-size: null !default;
+$fluent-fa-button-size: null !default;
+
+@if $size == "default" {
+  $fluent-main-fa-button-size: ds.$spacing-440 !default;
+  $fluent-fa-button-size: ds.$spacing-440 !default;
+  $fluent-main-fa-button-horizontal-padding: ds.$spacing-160;
+  $fluent-main-fa-button-label-padding: 0 $fluent-main-fa-button-horizontal-padding 0 ds.$spacing-80;
+}
+
+@else if $size == "compact" {
+  $fluent-main-fa-button-size: ds.$spacing-320 !default;
+  $fluent-fa-button-size: ds.$spacing-320 !default;
+  $fluent-main-fa-button-horizontal-padding: ds.$spacing-120;
+  $fluent-main-fa-button-label-padding: 0 $fluent-main-fa-button-horizontal-padding 0 ds.$spacing-40;
+}
+
+// Values hoisted from style-file literals (tokenized)
+$fluent-fa-button-label-font-weight: ds.$font-weight-500 !default; // dx-no-semantic-role: 500 is off the weight-role scale (400/600/700)
+$fluent-fa-button-label-offset: ds.$spacing-160 !default;
+$fluent-fa-button-label-padding: ds.$spacing-40 ds.$spacing-80 !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_colors.scss
new file mode 100644
index 000000000000..85b9a141a268
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_colors.scss
@@ -0,0 +1,39 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+/**
+* $name 10. Icon color
+* $type color
+*/
+$splitter-resize-handle-color: ds.$color-content-neutral-subdued-rest !default;
+
+/**
+* $name 30. Focused state icon color
+* $type color
+*/
+$splitter-resize-handle-color-focused: ds.$color-content-neutral-default-static-dark-rest !default;
+
+/**
+* $name 40. Handle background color
+* $type color
+*/
+$splitter-resize-handle-bg: ds.$color-border-neutral-default-rest !default;
+
+/**
+* $name 50. Handle hover state background color
+* $type color
+*/
+$splitter-resize-handle-bg-hover: ds.$color-border-neutral-default-hovered !default;
+
+/**
+* $name 60. Handle focused state background color
+* $type color
+*/
+$splitter-resize-handle-bg-focused: ds.$color-surface-primary-default-rest !default;
+
+/**
+* $name 20. Hover state icon color
+* $type color
+*/
+$splitter-resize-handle-color-hover: $splitter-resize-handle-color !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_index.scss
new file mode 100644
index 000000000000..d54687966826
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_index.scss
@@ -0,0 +1,26 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../../base/splitter";
+@use "../../base/splitter/mixins" as *;
+
+// adduse
+
+.dx-splitter {
+  @include resize-handle-states(
+    $splitter-resize-handle-color,
+    $splitter-resize-handle-bg,
+    $splitter-resize-handle-color-hover,
+    $splitter-resize-handle-bg-hover,
+    $splitter-resize-handle-color-focused,
+    $splitter-resize-handle-bg-focused,
+  );
+}
+
+.dx-resize-handle {
+  .dx-icon {
+    @include dx-icon-sizing($splitter-resize-handle-icon-size);
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_sizes.scss
new file mode 100644
index 000000000000..94c1d0dbe502
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitter/_sizes.scss
@@ -0,0 +1,6 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$splitter-resize-handle-icon-size: ds.$spacing-200;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_colors.scss
new file mode 100644
index 000000000000..62533d55baa8
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_colors.scss
@@ -0,0 +1,6 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$splitter-inactive-color: ds.$color-border-neutral-default-rest !default;
+$splitter-bg: ds.$color-surface-primary-alpha-active !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_index.scss
new file mode 100644
index 000000000000..476b6c48405d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_index.scss
@@ -0,0 +1,18 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/splitterBar";
+
+// adduse
+.dx-splitter-bar {
+  background-color: $splitter-bg;
+
+  &.dx-splitter-inactive {
+    background-color: $splitter-inactive-color;
+  }
+}
+
+.dx-splitter-border {
+  background-color: transparent;
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_sizes.scss
new file mode 100644
index 000000000000..3a9178551640
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/splitterBar/_sizes.scss
@@ -0,0 +1,3 @@
+@use "../sizes" as *;
+
+// adduse
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_colors.scss
new file mode 100644
index 000000000000..63eaff68737b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_colors.scss
@@ -0,0 +1,172 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+/**
+* $name 10. Active color
+* $type color
+*/
+$stepper-step-accent-bg: ds.$color-surface-primary-default-rest !default;
+
+/**
+* $name 20. Hover state active color
+* $type color
+*/
+$stepper-step-accent-hover-bg: ds.$color-surface-primary-default-hovered !default;
+
+/**
+* $name 30. Invalid color
+* $type color
+*/
+$stepper-step-danger-bg: ds.$color-surface-danger-default-rest !default;
+
+/**
+* $name 40. Hover state invalid color
+* $type color
+*/
+$stepper-step-danger-hover-bg: ds.$color-surface-danger-default-hovered !default;
+
+/**
+* $name 60. Background color
+* $type color
+*/
+$stepper-step-base-bg: ds.$color-surface-neutral-default-rest !default;
+
+/**
+* $name 70. Hover state background color
+* $type color
+*/
+$stepper-step-base-hover-bg: ds.$color-surface-neutral-default-hovered !default;
+
+/**
+* $name 80. Border color
+* $type color
+*/
+$stepper-step-base-border-color: ds.$color-border-neutral-default-rest !default;
+
+/**
+* $name 90. Hover state border color
+* $type color
+*/
+$stepper-step-base-hover-border-color: ds.$color-border-neutral-default-hovered !default;
+
+/**
+* $name 100. Text or icon color
+* $type color
+*/
+$stepper-step-base-text-color: ds.$color-content-neutral-default-rest !default;
+
+/**
+* $name 110. Label text color
+* $type color
+*/
+$stepper-step-base-label-color: ds.$color-content-neutral-default-rest !default;
+
+/**
+* $name 120. Background color
+* $type color
+*/
+$stepper-step-selected-bg: $stepper-step-accent-bg !default;
+
+/**
+* $name 130. Hover state background color
+* $type color
+*/
+$stepper-step-selected-hover-bg: $stepper-step-accent-hover-bg !default;
+
+/**
+* $name 140. Text or icon color
+* $type color
+*/
+$stepper-step-selected-text-color: ds.$color-content-neutral-default-static-dark-rest !default;
+
+/**
+* $name 150. Label text color
+* $type color
+*/
+$stepper-step-selected-label-color: $stepper-step-accent-bg !default;
+
+/**
+* $name 160. Background color
+* $type color
+*/
+$stepper-step-invalid-bg: $stepper-step-base-bg !default;
+
+/**
+* $name 170. Hover state background color
+* $type color
+*/
+$stepper-step-invalid-hover-bg: $stepper-step-base-hover-bg !default;
+
+/**
+* $name 180. Border color
+* $type color
+*/
+$stepper-step-invalid-border-color: $stepper-step-base-border-color !default;
+
+/**
+* $name 190. Hover state border color
+* $type color
+*/
+$stepper-step-invalid-hover-border-color: $stepper-step-base-hover-border-color !default;
+
+/**
+* $name 200. Text or icon color
+* $type color
+*/
+$stepper-step-invalid-text-color: $stepper-step-danger-bg !default;
+
+/**
+* $name 210. Hover state text or icon color
+* $type color
+*/
+$stepper-step-invalid-hover-text-color: $stepper-step-danger-hover-bg !default;
+
+/**
+* $name 220. Invalid label text color
+* $type color
+*/
+$stepper-step-invalid-label-color: $stepper-step-danger-bg !default;
+
+/**
+* $name 230. Background color
+* $type color
+*/
+$stepper-step-invalid-selected-bg: $stepper-step-danger-bg !default;
+
+/**
+* $name 240. Hover state background color
+* $type color
+*/
+$stepper-step-invalid-selected-hover-bg: $stepper-step-danger-hover-bg !default;
+$stepper-step-disabled-shadow: $stepper-step-base-bg !default;
+
+/**
+* $name 260. Background color
+* $type color
+*/
+$stepper-step-disabled-bg: ds.$color-surface-neutral-default-disabled !default;
+
+/**
+* $name 270. Text color
+* $type color
+*/
+$stepper-step-disabled-text-color: ds.$color-content-neutral-default-disabled !default;
+
+/**
+* $name 280. Pending color
+* $type color
+*/
+$stepper-connector-bg: ds.$separator-color !default;
+
+/**
+* $name 290. Completed color
+* $type color
+*/
+$stepper-connector-value-bg: ds.$color-surface-primary-default-rest !default;
+
+/**
+* $name 300. Shadow color
+* $type color
+*/
+$stepper-step-shadow-color: ds.$color-surface-neutral-default-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_index.scss
new file mode 100644
index 000000000000..ec250baf6f5e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_index.scss
@@ -0,0 +1,54 @@
+@use "../../base/stepper";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/stepper/mixins" as *;
+
+// adduse
+
+@include stepper(
+  $stepper-padding,
+);
+@include connector(
+  $stepper-connector-bg,
+  $stepper-connector-value-bg,
+  $stepper-connector-size,
+  $stepper-connector-padding,
+  $stepper-connector-thickness,
+);
+@include step(
+  $stepper-step-min-size,
+  $stepper-step-indicator-size,
+  $stepper-step-indicator-size,
+  $stepper-step-content-row-gap,
+  $stepper-step-content-column-gap,
+  $stepper-step-optional-mark-font-size,
+  $stepper-step-icon-size,
+  $stepper-step-transition-duration,
+);
+@include step-states(
+  $stepper-step-shadow-color,
+  $stepper-step-base-bg,
+  $stepper-step-base-hover-bg,
+  $stepper-step-base-border-color,
+  $stepper-step-base-hover-border-color,
+  $stepper-step-base-text-color,
+  $stepper-step-base-label-color,
+  $stepper-step-selected-bg,
+  $stepper-step-selected-hover-bg,
+  $stepper-step-selected-text-color,
+  $stepper-step-selected-label-color,
+  $stepper-step-selected-font-weight,
+  $stepper-step-invalid-bg,
+  $stepper-step-invalid-hover-bg,
+  $stepper-step-invalid-border-color,
+  $stepper-step-invalid-hover-border-color,
+  $stepper-step-invalid-text-color,
+  $stepper-step-invalid-hover-text-color,
+  $stepper-step-invalid-label-color,
+  $stepper-step-invalid-selected-bg,
+  $stepper-step-invalid-selected-hover-bg,
+  $stepper-step-disabled-text-color,
+  $stepper-step-disabled-bg,
+  $stepper-step-disabled-shadow,
+);
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_sizes.scss
new file mode 100644
index 000000000000..f96d524eb4f9
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/stepper/_sizes.scss
@@ -0,0 +1,38 @@
+@use "colors" as *;
+@use "../colors" as *;
+@use "../sizes" as *;
+@use "../typography/sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$stepper-padding: null !default;
+$stepper-step-min-size: null !default;
+$stepper-step-indicator-size: null !default;
+$stepper-step-content-row-gap: null !default;
+$stepper-step-content-column-gap: null !default;
+$stepper-step-optional-mark-font-size: $fluent-xs-font-size !default;
+$stepper-step-icon-size: $fluent-button-icon-size !default;
+
+$stepper-step-selected-font-weight: ds.$font-weight-base-strong !default;
+$stepper-step-transition-duration: .4s !default;
+
+@if $size == "default" {
+  $stepper-padding: ds.$spacing-120 !default;
+  $stepper-step-min-size: ds.$spacing-480 !default;
+  $stepper-step-indicator-size: ds.$spacing-320 !default;
+  $stepper-step-content-row-gap: ds.$spacing-80 !default;
+  $stepper-step-content-column-gap: ds.$spacing-120 !default;
+}
+
+@else if $size == "compact" {
+  $stepper-padding: ds.$spacing-80 !default;
+  $stepper-step-min-size: ds.$spacing-400 !default;
+  $stepper-step-indicator-size: ds.$spacing-240 !default;
+  $stepper-step-content-row-gap: ds.$spacing-60 !default;
+  $stepper-step-content-column-gap: ds.$spacing-80 !default;
+}
+
+$stepper-connector-thickness: ds.$spacing-20 !default;
+$stepper-connector-size: $stepper-step-indicator-size !default;
+$stepper-connector-padding: $stepper-padding !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_colors.scss
new file mode 100644
index 000000000000..a75614cbabfb
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_colors.scss
@@ -0,0 +1,45 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$switch-accent-color: ds.$switch-color-checked-bg-rest !default;
+$switch-accent-color-hover: ds.$switch-color-checked-bg-hovered !default;
+$switch-accent-color-focused: ds.$switch-color-checked-bg-active !default;
+
+/**
+* $name 20. Track 'OFF' background color
+* $type color
+*/
+$switch-bg: ds.$switch-color-unchecked-bg-rest !default;
+
+/**
+* $name 30. Handle 'OFF' background color
+* $type color
+*/
+$switch-handle-off-bg: ds.$switch-color-unchecked-trigger-rest !default;
+
+/**
+* $name 40. Track 'ON' background color
+* $type color
+*/
+$switch-on-bg: ds.$switch-color-checked-bg-rest !default;
+
+/**
+* $name 50. Handle 'ON' background color
+* $type color
+*/
+$switch-handle-on-bg: ds.$switch-color-checked-trigger-rest !default;
+$switch-handle-border-radius: 50% !default;
+$switch-on-disabled-bg: ds.$switch-color-checked-bg-disable !default;
+$switch-handle-disabled-bg: ds.$switch-color-unchecked-trigger-disabled !default;
+$switch-border-color-disabled: ds.$switch-color-unchecked-border-disabled !default;
+$switch-off-border-color: ds.$switch-color-unchecked-border-rest !default;
+$switch-off-border-hover-color: ds.$switch-color-unchecked-border-hovered !default;
+$switch-off-border-active-color: ds.$switch-color-unchecked-border-active !default;
+
+$switch-invalid-color: ds.$color-border-danger-default-rest !default;
+$switch-invalid-color-hover: ds.$color-border-danger-default-hovered !default;
+$switch-invalid-color-focused: ds.$color-border-danger-default-hovered !default;
+
+// Subtle ring around the ON handle; no switch shadow role — relative-color bridge over the handle token (see DIVERGENCES.md)
+$switch-handle-on-shadow-color: rgb(from #{ds.$switch-color-checked-trigger-rest} r g b / 0.1) !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_index.scss
new file mode 100644
index 000000000000..3e070ec4bb2b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_index.scss
@@ -0,0 +1,52 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/mixins" as *;
+@use "../../base/switch";
+@use "../../base/switch/mixins" as *;
+
+// adduse
+
+$fluent-switch-transition: all 0.2s cubic-bezier(0.33,0,0.67,1);
+$fluent-switch-handle-on-shadow: 0 0 0 $fluent-switch-shadow-blur-radius $switch-handle-on-shadow-color;
+$fluent-switch-shadow: none;
+
+@include dx-switch(
+  $fluent-switch-width,
+  $fluent-switch-height,
+  $switch-padding,
+  $switch-handle-height,
+  $switch-container-height,
+  $switch-container-horizontal-padding,
+  $switch-container-vertical-margin,
+  $switch-handle-margin,
+  $switch-handle-border-radius,
+  $fluent-switch-transition,
+);
+@include dx-switch-states-fluent(
+  $switch-on-disabled-bg,
+  $switch-handle-disabled-bg,
+  $fluent-switch-shadow,
+  $switch-bg,
+  $switch-on-bg,
+  $switch-accent-color-hover,
+  $switch-accent-color-focused,
+  $fluent-switch-handle-on-shadow,
+  $switch-handle-off-bg,
+  $switch-handle-on-bg,
+  1px solid,
+  $switch-off-border-color,
+  $switch-off-border-hover-color,
+  $switch-off-border-active-color,
+  $switch-accent-color,
+  $switch-invalid-color,
+  $switch-invalid-color-hover,
+  $switch-invalid-color-focused,
+  $switch-border-color-disabled,
+);
+@include dx-switch-rtl(
+  calc(#{$switch-handle-height} - #{$switch-handle-margin}),
+  $fluent-switch-shadow-blur-radius,
+  $fluent-switch-container-adjustment,
+);
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_sizes.scss
new file mode 100644
index 000000000000..b4ed7a97c503
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/switch/_sizes.scss
@@ -0,0 +1,36 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-switch-width: null !default;
+$switch-handle-margin: null !default;
+$switch-padding: ds.$spacing-80 !default;
+$switch-container-vertical-margin: null !default;
+$switch-container-horizontal-padding: null !default;
+$fluent-switch-height: null !default;
+$switch-handle-height: null !default;
+$switch-container-height: null !default;
+
+$fluent-switch-shadow-blur-radius: 0 !default;
+$fluent-switch-container-adjustment: ds.$spacing-60 !default;
+
+@if $size == "default" {
+  $fluent-switch-width: ds.$spacing-400 !default;
+  $switch-handle-height: ds.$spacing-140 !default;
+  $switch-handle-margin: ds.$spacing-30 !default;
+  $switch-container-vertical-margin: 0 !default;
+  $switch-container-horizontal-padding: $switch-handle-margin !default;
+  $fluent-switch-height: ds.$spacing-200 !default;
+  $switch-container-height: $fluent-switch-height !default;
+}
+
+@else if $size == "compact" {
+  $fluent-switch-width: ds.$spacing-320 !default;
+  $switch-handle-height: ds.$spacing-120 !default;
+  $switch-handle-margin: ds.$spacing-20 !default;
+  $switch-container-vertical-margin: 0 !default;
+  $switch-container-horizontal-padding: $switch-handle-margin !default;
+  $fluent-switch-height: ds.$spacing-160 !default;
+  $switch-container-height: $fluent-switch-height !default;
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_colors.scss
new file mode 100644
index 000000000000..77cf7dcf7d5d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_colors.scss
@@ -0,0 +1,5 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$tabpanel-border-color: ds.$color-border-neutral-default-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_index.scss
new file mode 100644
index 000000000000..13478c90a4c9
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_index.scss
@@ -0,0 +1,76 @@
+@use "sass:color";
+@use "sass:selector";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/tabPanel";
+
+// adduse
+
+.dx-tabpanel {
+  .dx-tabpanel-tab {
+    flex-basis: unset;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+
+  .dx-tabs .dx-tabs-scrollable .dx-tab {
+    flex-basis: auto;
+  }
+
+  .dx-tabs-nav-button {
+    height: auto;
+  }
+}
+
+.dx-tabpanel-tabs-position-top {
+  > .dx-tabpanel-tabs {
+    .dx-tabs {
+      border-bottom: $fluent-tabpanel-tabs-border-bottom;
+      border-bottom-color: $tabpanel-border-color;
+
+      @at-root #{selector.append(".dx-empty-collection", &)} {
+        border-bottom: none;
+      }
+    }
+  }
+}
+
+.dx-tabpanel-tabs-position-bottom {
+  > .dx-tabpanel-tabs {
+    .dx-tabs {
+      border-top: $fluent-tabpanel-tabs-border-top;
+      border-top-color: $tabpanel-border-color;
+
+      @at-root #{selector.append(".dx-empty-collection", &)} {
+        border-top: none;
+      }
+    }
+  }
+}
+
+.dx-tabpanel-tabs-position-left {
+  > .dx-tabpanel-tabs {
+    .dx-tabs {
+      border-right: $fluent-tabpanel-tabs-border-right;
+      border-right-color: $tabpanel-border-color;
+
+      @at-root #{selector.append(".dx-empty-collection", &)} {
+        border-right: none;
+      }
+    }
+  }
+}
+
+.dx-tabpanel-tabs-position-right {
+  > .dx-tabpanel-tabs {
+    .dx-tabs {
+      border-left: $fluent-tabpanel-tabs-border-left;
+      border-left-color: $tabpanel-border-color;
+
+      @at-root #{selector.append(".dx-empty-collection", &)} {
+        border-left: none;
+      }
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_sizes.scss
new file mode 100644
index 000000000000..ed6bbd51f63d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabPanel/_sizes.scss
@@ -0,0 +1,11 @@
+@use "../../../_design-system/variables/ds" as ds;
+@use "../sizes" as *;
+
+// adduse
+
+
+// Values hoisted from style-file literals (tokenized)
+$fluent-tabpanel-tabs-border-bottom: ds.$border-width-10 solid !default;
+$fluent-tabpanel-tabs-border-top: ds.$border-width-10 solid !default;
+$fluent-tabpanel-tabs-border-right: ds.$border-width-10 solid !default;
+$fluent-tabpanel-tabs-border-left: ds.$border-width-10 solid !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/_index.scss
new file mode 100644
index 000000000000..c8641f539d1a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/_index.scss
@@ -0,0 +1,17 @@
+@use "sass:color";
+@use "../colors" as *;
+@use "../sizes" as *;
+@use "../button/colors" as *;
+@use "../button/mixins" as *;
+@use "../../base/icon_fonts" as *;
+@use "../../base/tabs";
+@use "variables/colors" as *;
+@use "variables/sizes" as *;
+@use "mixins" as *;
+@use "layout/tabs" as *;
+@use "layout/tab/base" as *;
+@use "layout/navigation-button/base" as *;
+
+// adduse
+@use "../scrollable";
+@use "../badge";
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/navigation-button/_base.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/navigation-button/_base.scss
new file mode 100644
index 000000000000..c0cff9f89df7
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/navigation-button/_base.scss
@@ -0,0 +1,62 @@
+@use "sass:color";
+@use "../../../colors" as *;
+@use "../../../sizes" as *;
+@use "../../../button/colors" as *;
+@use "../../../button/mixins" as *;
+@use "../../../../base/icon_fonts" as *;
+@use "../../../../base/tabs";
+@use "../../variables/colors" as *;
+@use "../../variables/sizes" as *;
+@use "../../mixins" as *;
+
+// adduse
+@use "../../../scrollable";
+@use "../../../badge";
+
+.dx-tabs .dx-tabs-nav-button {
+  box-shadow: none;
+}
+
+.dx-tabs-styling-mode-secondary .dx-tabs-nav-button {
+  border-radius: $fluent-tab-item-border-radius-secondary;
+}
+
+.dx-tabs-nav-button {
+  border: none;
+  height: $fluent-tab-height;
+  background-color: $tabs-nav-button-bg-color;
+
+  &.dx-button.dx-state-disabled.dx-button-mode-contained {
+    visibility: hidden;
+  }
+
+  &.dx-button-has-icon .dx-icon {
+    width: $fluent-tab-nav-button-icon-width;
+    height: $fluent-tab-nav-button-icon-height;
+    font-size: $fluent-tab-nav-button-icon-font-size;
+  }
+
+  &.dx-state-active {
+    border: none;
+  }
+
+  &.dx-state-disabled {
+    opacity: 1;
+    background-color: $tabs-tab-background;
+
+    .dx-button-content {
+      opacity: $tabs-tab-button-disabled-opacity;
+    }
+  }
+
+  .dx-button-content {
+    flex: unset;
+    padding: $fluent-tab-nav-button-content-padding;
+  }
+}
+
+.dx-tabs-vertical {
+  .dx-tabs-nav-button {
+    padding: $fluent-tab-vertical-nav-button-content-padding;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tab/_base.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tab/_base.scss
new file mode 100644
index 000000000000..4aef73e1ce3a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tab/_base.scss
@@ -0,0 +1,128 @@
+@use "sass:color";
+@use "sass:string" as string;
+@use "../../../colors" as *;
+@use "../../../sizes" as *;
+@use "../../../button/colors" as *;
+@use "../../../button/mixins" as *;
+@use "../../../../base/icon_fonts" as *;
+@use "../../../../base/tabs";
+@use "../../variables/colors" as *;
+@use "../../variables/sizes" as *;
+@use "../../mixins" as *;
+@use "../../../common/sizes" as *;
+
+// adduse
+@use "../../../scrollable";
+@use "../../../badge";
+@use "styling-mode/primary" as *;
+@use "styling-mode/secondary" as *;
+
+
+.dx-tab {
+  gap: $fluent-tabs-item-gap;
+  padding: $fluent-tabs-item-padding;
+  background-color: $tabs-tab-background;
+  color: $tabs-tab-color;
+
+  &.dx-state-hover {
+    background-color: $tabs-hovered-tab-bg-color;
+  }
+
+  &.dx-tab-selected {
+    color: $tabs-tab-selected-color;
+
+    .dx-icon {
+      color: $tabs-tab-icon-selected-color;
+    }
+
+    .dx-tab-text .dx-tab-text-span {
+      visibility: visible;
+
+      .dx-tab-text-span-pseudo {
+        visibility: hidden;
+      }
+    }
+  }
+
+  &.dx-state-disabled {
+    color: $tabs-tab-disabled-color;
+
+    .dx-tab-text .dx-tab-text-span-pseudo {
+      color: $tabs-tab-disabled-color;
+    }
+
+    .dx-icon {
+      color: $tabs-tab-icon-disabled-color;
+    }
+  }
+
+  &.dx-state-active {
+    background-color: $tabs-active-tab-bg-color;
+  }
+
+  .dx-tab-text {
+    column-gap: $fluent-base-icon-margin;
+    row-gap: $fluent-tabs-item-gap;
+    line-height: $fluent-line-height;
+
+    .dx-tab-text-span {
+      position: relative;
+      display: block;
+      font-weight: $fluent-tab-font-weight-accent;
+      visibility: hidden;
+    }
+
+    .dx-tab-text-span-pseudo {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      pointer-events: none;
+      color: $tabs-tab-color;
+      font-weight: $fluent-tab-font-weight-basic;
+      visibility: visible;
+    }
+  }
+
+  .dx-icon {
+    color: $tabs-tab-icon-color;
+    visibility: visible;
+
+    @include dx-icon-sizing($fluent-tabs-icon-size);
+
+    width: 1em;
+    height: 1em;
+    line-height: 1;
+  }
+
+  .dx-tabs-item-badge {
+    align-self: center;
+    min-width: $fluent-badge-min-size;
+    min-height: $fluent-badge-min-size;
+  }
+}
+
+.dx-tabs.dx-state-focused {
+  .dx-tab.dx-state-focused {
+    background-color: $tabs-focused-tab-bg-color;
+  }
+}
+
+.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/dxdsfluent/tabs/layout/tab/styling-mode/_primary.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tab/styling-mode/_primary.scss
new file mode 100644
index 000000000000..890f62cda840
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tab/styling-mode/_primary.scss
@@ -0,0 +1,121 @@
+@use "sass:color";
+@use "../../../../colors" as *;
+@use "../../../../sizes" as *;
+@use "../../../../button/colors" as *;
+@use "../../../../button/mixins" as *;
+@use "../../../../../base/icon_fonts" as *;
+@use "../../../../../base/tabs";
+@use "../../../variables/colors" as *;
+@use "../../../variables/sizes" as *;
+@use "../../../mixins" as *;
+
+// adduse
+@use "../../../../scrollable";
+@use "../../../../badge";
+
+
+.dx-tabs-styling-mode-primary {
+  .dx-tab {
+    &.dx-state-hover {
+      background-color: $tabs-tab-bg-color-hover-primary;
+    }
+
+    &.dx-state-focused {
+      background-color: $tabs-tab-bg-color-focus-primary;
+    }
+
+    &.dx-state-active {
+      background-color: $tabs-tab-bg-color-active-primary;
+    }
+  }
+
+  &.dx-tab-indicator-position-top {
+    .dx-tab {
+      @include dx-tabs-indicator-primary(top);
+    }
+  }
+
+  &.dx-tab-indicator-position-bottom {
+    .dx-tab {
+      @include dx-tabs-indicator-primary(bottom);
+    }
+  }
+
+  &.dx-tab-indicator-position-top,
+  &.dx-tab-indicator-position-bottom {
+    .dx-tab {
+      &.dx-state-hover {
+        @include dx-tabs-indicator-background($tabs-tab-border-color-hover);
+      }
+
+      &.dx-state-active {
+        @include dx-tabs-indicator-background($tabs-tab-border-color-active);
+      }
+    }
+
+    .dx-tab-selected {
+      @include dx-tabs-indicator-background($tabs-tab-border-color-selected-basic);
+
+      &.dx-state-focused {
+        @include dx-tabs-indicator-background($tabs-tab-border-color-selected-focused);
+      }
+
+      &.dx-state-hover {
+        @include dx-tabs-indicator-background($tabs-tab-border-color-selected-hover);
+      }
+
+      &.dx-state-active {
+        @include dx-tabs-indicator-background($tabs-tab-border-color-selected-active);
+      }
+
+      &.dx-state-disabled {
+        @include dx-tabs-indicator-background($tabs-tab-border-color-disabled);
+      }
+    }
+  }
+
+  &.dx-tab-indicator-position-right {
+    .dx-tab {
+      @include dx-tabs-indicator-primary(right);
+    }
+  }
+
+  &.dx-tab-indicator-position-left {
+    .dx-tab {
+      @include dx-tabs-indicator-primary(left);
+    }
+  }
+
+  &.dx-tab-indicator-position-right,
+  &.dx-tab-indicator-position-left {
+    .dx-tab {
+      &.dx-state-hover {
+        @include dx-tabs-indicator-background($tabs-tab-border-color-hover);
+      }
+
+      &.dx-state-active {
+        @include dx-tabs-indicator-background($tabs-tab-border-color-active);
+      }
+    }
+
+    .dx-tab-selected {
+      @include dx-tabs-indicator-background($tabs-tab-border-color-selected-basic);
+
+      &.dx-state-focused {
+        @include dx-tabs-indicator-background($tabs-tab-border-color-selected-focused);
+      }
+
+      &.dx-state-hover {
+        @include dx-tabs-indicator-background($tabs-tab-border-color-selected-hover);
+      }
+
+      &.dx-state-active {
+        @include dx-tabs-indicator-background($tabs-tab-border-color-selected-active);
+      }
+
+      &.dx-state-disabled {
+        @include dx-tabs-indicator-background($tabs-tab-border-color-disabled);
+      }
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tab/styling-mode/_secondary.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tab/styling-mode/_secondary.scss
new file mode 100644
index 000000000000..719a34b5ba77
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tab/styling-mode/_secondary.scss
@@ -0,0 +1,117 @@
+@use "sass:color";
+@use "../../../../colors" as *;
+@use "../../../../sizes" as *;
+@use "../../../../button/colors" as *;
+@use "../../../../button/mixins" as *;
+@use "../../../../../base/icon_fonts" as *;
+@use "../../../../../base/tabs";
+@use "../../../variables/colors" as *;
+@use "../../../variables/sizes" as *;
+@use "../../../mixins" as *;
+
+// adduse
+@use "../../../../scrollable";
+@use "../../../../badge";
+
+
+.dx-tabs-styling-mode-secondary {
+  .dx-tab {
+    border-radius: $fluent-tab-item-border-radius-secondary;
+  }
+
+  &.dx-tab-indicator-position-top {
+    .dx-tab .dx-tab-content {
+      @include dx-tabs-indicator-secondary();
+      @include dx-tabs-horizontal-indicator-secondary(top);
+    }
+  }
+
+  &.dx-tab-indicator-position-bottom {
+    .dx-tab .dx-tab-content {
+      @include dx-tabs-indicator-secondary();
+      @include dx-tabs-horizontal-indicator-secondary(bottom);
+    }
+  }
+
+  &.dx-tab-indicator-position-top,
+  &.dx-tab-indicator-position-bottom {
+    .dx-tab {
+      &.dx-state-hover .dx-tab-content {
+        @include dx-tabs-indicator-background($tabs-tab-border-color-hover);
+      }
+
+      &.dx-state-active .dx-tab-content {
+        @include dx-tabs-indicator-background($tabs-tab-border-color-active);
+      }
+
+      &.dx-tab-selected {
+        .dx-tab-content {
+          @include dx-tabs-indicator-background($tabs-tab-border-color-selected-basic);
+        }
+
+        &.dx-state-focused .dx-tab-content {
+          @include dx-tabs-indicator-background($tabs-tab-border-color-selected-focused);
+        }
+
+        &.dx-state-hover .dx-tab-content {
+          @include dx-tabs-indicator-background($tabs-tab-border-color-selected-hover);
+        }
+
+        &.dx-state-active .dx-tab-content {
+          @include dx-tabs-indicator-background($tabs-tab-border-color-selected-active);
+        }
+
+        &.dx-state-disabled .dx-tab-content {
+          @include dx-tabs-indicator-background($tabs-tab-border-color-disabled);
+        }
+      }
+    }
+  }
+
+  &.dx-tab-indicator-position-right {
+    .dx-tab {
+      @include dx-tabs-indicator-secondary();
+      @include dx-tabs-vertical-indicator-secondary(right);
+    }
+  }
+
+  &.dx-tab-indicator-position-left {
+    .dx-tab {
+      @include dx-tabs-indicator-secondary();
+      @include dx-tabs-vertical-indicator-secondary(left);
+    }
+  }
+
+  &.dx-tab-indicator-position-right,
+  &.dx-tab-indicator-position-left {
+    .dx-tab {
+      &.dx-state-hover {
+        @include dx-tabs-indicator-background($tabs-tab-border-color-hover);
+      }
+
+      &.dx-state-active {
+        @include dx-tabs-indicator-background($tabs-tab-border-color-active);
+      }
+    }
+
+    .dx-tab-selected {
+      @include dx-tabs-indicator-background($tabs-tab-border-color-selected-basic);
+
+      &.dx-state-focused {
+        @include dx-tabs-indicator-background($tabs-tab-border-color-selected-focused);
+      }
+
+      &.dx-state-hover {
+        @include dx-tabs-indicator-background($tabs-tab-border-color-selected-hover);
+      }
+
+      &.dx-state-active {
+        @include dx-tabs-indicator-background($tabs-tab-border-color-selected-active);
+      }
+
+      &.dx-state-disabled {
+        @include dx-tabs-indicator-background($tabs-tab-border-color-disabled);
+      }
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tabs/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tabs/_index.scss
new file mode 100644
index 000000000000..7ae4d1d39d0a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/layout/tabs/_index.scss
@@ -0,0 +1,24 @@
+@use "sass:color";
+@use "../../../colors" as *;
+@use "../../../sizes" as *;
+@use "../../../button/colors" as *;
+@use "../../../button/mixins" as *;
+@use "../../../../base/icon_fonts" as *;
+@use "../../../../base/tabs";
+@use "../../variables/colors" as *;
+@use "../../variables/sizes" as *;
+@use "../../mixins" as *;
+
+// adduse
+@use "../../../scrollable";
+@use "../../../badge";
+
+
+.dx-tabs {
+  padding: 0;
+  background-color: $tabs-tab-background;
+
+  .dx-scrollable {
+    flex-basis: 100%;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/mixins/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/mixins/_index.scss
new file mode 100644
index 000000000000..39b32276eb99
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/mixins/_index.scss
@@ -0,0 +1,86 @@
+@use "../variables/sizes" as *;
+
+// adduse
+
+
+@mixin dx-tabs-indicator {
+  &::after {
+    content: "";
+    position: absolute;
+  }
+}
+
+@mixin dx-tabs-indicator-background($background-color) {
+  &::after {
+    background-color: $background-color;
+  }
+}
+
+@mixin dx-tabs-indicator-primary($position) {
+  @include dx-tabs-indicator();
+
+  &::after {
+    @if $position == top {
+      top: 0;
+      right: 0;
+      left: 0;
+      width: $fluent-indicator-length-primary;
+      height: $fluent-indicator-thickness-primary;
+    } @else if $position == right {
+      top: 0;
+      right: 0;
+      bottom: 0;
+      height: $fluent-indicator-length-primary;
+      width: $fluent-indicator-thickness-primary;
+    } @else if $position == bottom {
+      right: 0;
+      bottom: 0;
+      left: 0;
+      width: $fluent-indicator-length-primary;
+      height: $fluent-indicator-thickness-primary;
+    } @else if $position == left {
+      top: 0;
+      bottom: 0;
+      left: 0;
+      height: $fluent-indicator-length-primary;
+      width: $fluent-indicator-thickness-primary;
+    }
+  }
+}
+
+@mixin dx-tabs-indicator-secondary {
+  @include dx-tabs-indicator();
+
+  &::after {
+    border-radius: $fluent-indicator-border-radius-secondary;
+  }
+}
+
+@mixin dx-tabs-horizontal-indicator-secondary($position) {
+  &::after {
+    right: 0;
+    left: 0;
+    width: $fluent-indicator-length-secondary;
+    height: $fluent-indicator-thickness-secondary;
+
+    @if $position == top {
+      top: calc(-1 * #{$fluent-tabs-item-padding-top-bottom});
+    } @else if $position == bottom {
+      bottom: calc(-1 * #{$fluent-tabs-item-padding-top-bottom});
+    }
+  }
+}
+
+@mixin dx-tabs-vertical-indicator-secondary($position) {
+  &::after {
+    top: $fluent-tabs-item-padding-top-bottom;
+    width: $fluent-indicator-thickness-secondary;
+    height: calc($fluent-indicator-length-secondary - 2 * $fluent-tabs-item-padding-top-bottom);
+
+    @if $position == right {
+      right: 0;
+    } @else if $position == left {
+      left: 0;
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/variables/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/variables/_colors.scss
new file mode 100644
index 000000000000..3935b46b4008
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/variables/_colors.scss
@@ -0,0 +1,87 @@
+@use "sass:color";
+@use "../../colors" as *;
+@use "../../button/colors" as *;
+
+// adduse
+
+/**
+* $name 10. Tab text color
+* $type color
+*/
+$tabs-tab-color: $base-text-color !default;
+
+/**
+* $name 20. Selected tab text color
+* $type color
+*/
+$tabs-tab-selected-color: $base-text-color !default;
+
+/**
+* $name 30. Disabled tab color
+* $type color
+*/
+$tabs-tab-disabled-color: $base-foreground-disabled !default;
+
+/**
+* $name 40. Selected tab border color
+* $type color
+*/
+$tabs-tab-border-color-selected-basic: $base-accent !default;
+$tabs-tab-border-color-selected-active: $base-accent-active !default;
+$tabs-tab-border-color-selected-hover: $base-accent-hover !default;
+$tabs-tab-border-color-selected-focused: $base-accent !default;
+$tabs-tab-border-color-active: $base-border-color-focused !default;
+$tabs-tab-border-color-hover: $base-border-color-hover !default;
+
+/**
+* $name 50. Disabled tab border color
+* $type color
+*/
+$tabs-tab-border-color-disabled: $base-foreground-disabled !default;
+
+/**
+* $name 60. Tab background color
+* $type color
+*/
+$tabs-tab-background: transparent !default;
+
+/**
+* $name 70. Tab icon color
+* $type color
+*/
+$tabs-tab-icon-color: $tabs-tab-color !default;
+
+/**
+* $name 80. Selected tab icon color
+* $type color
+*/
+$tabs-tab-icon-selected-color: $base-accent !default;
+
+/**
+* $name 90. Disabled tab icon color
+* $type color
+*/
+$tabs-tab-icon-disabled-color: $base-foreground-disabled !default;
+$tabs-tab-button-disabled-opacity: 0 !default;
+
+/**
+* $name 100. Hovered tab background color
+* $type color
+*/
+$tabs-hovered-tab-bg-color: transparent !default;
+
+/**
+* $name 110. Focused tab background color
+* $type color
+*/
+$tabs-focused-tab-bg-color: $base-hover-bg !default;
+$tabs-tab-bg-color-hover-primary: $base-hover-bg !default;
+$tabs-tab-bg-color-focus-primary: $base-hover-bg !default;
+$tabs-tab-bg-color-active-primary: $base-selected-bg !default;
+
+/**
+* $name 120. Active tab background color
+* $type color
+*/
+$tabs-active-tab-bg-color: $base-element-bg !default;
+$tabs-nav-button-bg-color: transparent !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/variables/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/variables/_sizes.scss
new file mode 100644
index 000000000000..de1bc00ffd5d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tabs/variables/_sizes.scss
@@ -0,0 +1,62 @@
+@use "../../sizes" as *;
+@use "../../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+
+$fluent-tabs-item-gap: ds.$spacing-40 !default;
+$fluent-tabs-item-padding: null !default;
+$fluent-tabs-item-padding-top-bottom: null !default;
+$fluent-tabs-item-padding-right-left: null !default;
+$fluent-tab-height: null !default;
+
+$fluent-tab-font-weight-basic: ds.$font-weight-base-default !default;
+$fluent-tab-font-weight-accent: ds.$font-weight-500 !default; // dx-no-semantic-role: 500 is off the weight-role scale (400/600/700)
+$fluent-base-icon-margin: null !default;
+$fluent-tabs-icon-size: $fluent-base-icon-size !default;
+
+$fluent-tab-nav-button-icon-width: null !default;
+$fluent-tab-nav-button-icon-height: null !default;
+$fluent-tab-nav-button-icon-font-size: null !default;
+$fluent-tab-nav-button-content-padding: null !default;
+
+$fluent-tab-vertical-nav-button-content-padding: null !default;
+
+$fluent-indicator-thickness-primary: ds.$spacing-20 !default;
+$fluent-indicator-thickness-secondary: ds.$spacing-30 !default;
+
+$fluent-indicator-length-primary: 100% !default;
+$fluent-indicator-length-secondary: 100% !default;
+
+$fluent-tab-item-border-radius-secondary: ds.$border-radius-40 !default;
+$fluent-indicator-border-radius-secondary: ds.$border-radius-40 !default;
+
+$fluent-badge-min-size: null !default;
+
+@if $size == "default" {
+  $fluent-tabs-item-padding-top-bottom: ds.$spacing-120 !default;
+  $fluent-tabs-item-padding-right-left: ds.$spacing-100 !default;
+  $fluent-tabs-item-padding: $fluent-tabs-item-padding-top-bottom $fluent-tabs-item-padding-right-left !default;
+  $fluent-tab-height: auto !default;
+  $fluent-base-icon-margin: ds.$spacing-80 !default;
+  $fluent-tab-nav-button-icon-width: ds.$spacing-200 !default;
+  $fluent-tab-nav-button-icon-height: ds.$spacing-200 !default;
+  $fluent-tab-nav-button-icon-font-size: ds.$font-size-200 !default; // dx-icon-glyph-size: text roles not applicable
+  $fluent-tab-nav-button-content-padding: 0 ds.$spacing-40 !default;
+  $fluent-tab-vertical-nav-button-content-padding: ds.$spacing-40 0 !default;
+  $fluent-badge-min-size: ds.$spacing-200 !default;
+}
+
+@else if $size == "compact" {
+  $fluent-tabs-item-padding-top-bottom: ds.$spacing-80 !default;
+  $fluent-tabs-item-padding-right-left: ds.$spacing-80 !default;
+  $fluent-tabs-item-padding: $fluent-tabs-item-padding-top-bottom $fluent-tabs-item-padding-right-left !default;
+  $fluent-tab-height: auto !default;
+  $fluent-base-icon-margin: ds.$spacing-80 !default;
+  $fluent-tab-nav-button-icon-width: ds.$spacing-160 !default;
+  $fluent-tab-nav-button-icon-height: ds.$spacing-160 !default;
+  $fluent-tab-nav-button-icon-font-size: ds.$font-size-160 !default; // dx-icon-glyph-size: text roles not applicable
+  $fluent-tab-nav-button-content-padding: 0 ds.$spacing-40 !default;
+  $fluent-tab-vertical-nav-button-content-padding: ds.$spacing-40 0 !default;
+  $fluent-badge-min-size: ds.$spacing-160 !default;
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_colors.scss
new file mode 100644
index 000000000000..428c2f5b94c3
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_colors.scss
@@ -0,0 +1,35 @@
+@use "../textEditor/colors" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+/**
+* $name 10. Tag text color
+* $type color
+*/
+$tagbox-tag-color: ds.$color-content-neutral-default-rest !default;
+
+/**
+* $name 20. Tag background color
+* $type color
+*/
+$tagbox-tag-bg: ds.$tag-color-bg-rest !default;
+$tagbox-tag-hover-bg: ds.$color-surface-neutral-default-hovered !default;
+
+/**
+* $name 30. Tag active text color
+* $type color
+*/
+$tagbox-tag-active-color: ds.$color-content-neutral-default-rest !default;
+
+/**
+* $name 40. Tag close button color
+* $type color
+*/
+$tagbox-tag-button-remove-bg: ds.$color-content-neutral-subdued-rest !default;
+$tagbox-tag-border-color-focused: ds.$color-border-primary-default-rest !default;
+$tagbox-select-all-border-color: ds.$color-border-neutral-default-rest !default;
+$tagbox-tag-foreground-disabled: ds.$color-content-neutral-default-disabled !default;
+$tagbox-tag-disabled: ds.$tag-color-bg-disabled !default;
+
+$tagbox-border-color-disabled: ds.$color-border-neutral-default-disabled !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_index.scss
new file mode 100644
index 000000000000..301ef2ae332c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_index.scss
@@ -0,0 +1,185 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../textEditor" as *;
+@use "../common/sizes" as *;
+@use "../../base/tagBox";
+
+// adduse
+
+.dx-tagbox {
+  .dx-tag-container {
+    height: 100%;
+    padding-top: $fluent-tagbox-tag-container-vertical-padding;
+    padding-bottom: $fluent-tagbox-tag-container-vertical-padding;
+    gap: $fluent-tagbox-tag-container-gap;
+
+    .dx-texteditor-input {
+      padding: 0;
+      min-height: 0;
+    }
+  }
+
+  &.dx-editor-underlined {
+    .dx-tag-container {
+      padding-top: calc(#{$fluent-tagbox-tag-container-vertical-padding} + 1px);
+      padding-bottom: calc(#{$fluent-tagbox-tag-container-vertical-padding} + 1px);
+    }
+  }
+
+  &.dx-editor-outlined,
+  &.dx-editor-filled,
+  &.dx-editor-underlined {
+    .dx-texteditor-input {
+      height: $fluent-tagbox-tag-height;
+    }
+  }
+
+  &.dx-editor-outlined,
+  &.dx-editor-filled {
+    .dx-tag-container {
+      padding-inline-start: $fluent-tagbox-tag-container-padding-left;
+    }
+  }
+
+  &.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: $fluent-tagbox-filled-with-label-top-padding;
+        padding-bottom: $fluent-tagbox-filled-with-label-bottom-padding;
+      }
+    }
+
+    &.dx-editor-underlined {
+      .dx-tag-container,
+      .dx-placeholder::before {
+        padding-top: calc(#{$fluent-tagbox-filled-with-label-top-padding} + 1px);
+        padding-bottom: calc(#{$fluent-tagbox-filled-with-label-bottom-padding} + 1px);
+      }
+    }
+  }
+
+  &.dx-state-disabled {
+    .dx-tag-content {
+      color: $tagbox-tag-foreground-disabled;
+      background-color: $tagbox-tag-disabled;
+    }
+
+    .dx-tag-remove-button {
+      &::before {
+        color: $tagbox-tag-foreground-disabled;
+      }
+    }
+  }
+}
+
+.dx-tagbox-single-line {
+  .dx-tag-container {
+    padding-right: 0;
+  }
+}
+
+.dx-tag-content {
+  display: inline-flex;
+  align-items: center;
+  font-size: $fluent-tagbox-tag-content-font-size;
+  line-height: $fluent-tagbox-tag-content-line-height;
+  margin: 0;
+  padding-top: $fluent-tagbox-tag-content-vertical-padding;
+  padding-bottom: $fluent-tagbox-tag-content-vertical-padding;
+  padding-inline-start: $fluent-tagbox-tag-content-padding-left;
+  padding-inline-end: $fluent-tagbox-tag-content-padding-right;
+  min-width: $fluent-tagbox-tag-content-min-width;
+  background-color: $tagbox-tag-bg;
+  color: $tagbox-tag-color;
+  border-radius: $tagbox-tag-border-radius;
+  border-width: $fluent-tagbox-tag-border-width;
+  border-style: solid;
+  border-color: $tagbox-border-color-disabled;
+}
+
+.dx-tag-remove-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: $fluent-tagbox-tag-height;
+  height: 100%;
+
+  @include dx-icon(clear);
+
+  font-size: calc(#{$fluent-tagbox-tag-content-font-size} + 2px);
+
+  &::before {
+    content: "\f15f";
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: $tagbox-tag-button-remove-bg;
+  }
+}
+
+.dx-tag {
+  &:hover {
+    .dx-tag-content {
+      background-color: $tagbox-tag-hover-bg;
+      color: $tagbox-tag-active-color;
+    }
+  }
+
+  &.dx-state-focused {
+    .dx-tag-content {
+      color: $tagbox-tag-active-color;
+      border-color: $tagbox-tag-border-color-focused;
+    }
+  }
+}
+
+@mixin tagbox-editor-container-offset() {
+  inset-inline-end: $fluent-invalid-badge-horizontal-padding;
+}
+
+.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: $fluent-tagbox-list-select-all-border-bottom;
+    border-bottom-color: $tagbox-select-all-border-color;
+    padding-bottom: $fluent-tagbox-select-all-padding-bottom;
+    margin-bottom: $fluent-tagbox-select-all-margin-bottom;
+
+    &::after {
+      background-color: transparent;
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_sizes.scss
new file mode 100644
index 000000000000..115fbe517a66
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tagBox/_sizes.scss
@@ -0,0 +1,52 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-tagbox-tag-content-padding-left: null !default;
+$fluent-tagbox-tag-content-padding-right: null !default;
+$fluent-tagbox-tag-content-vertical-padding: null !default;
+$fluent-tagbox-tag-content-font-size: null !default;
+$fluent-tagbox-tag-container-padding-left: null !default;
+$fluent-tagbox-tag-container-vertical-padding: null !default;
+$fluent-tagbox-tag-height: null !default;
+$fluent-tagbox-select-all-padding-bottom: ds.$spacing-120 !default;
+$fluent-tagbox-select-all-margin-bottom: ds.$spacing-30 !default;
+$tagbox-tag-border-radius: 999em !default;
+$fluent-tagbox-filled-with-label-top-padding: null !default;
+$fluent-tagbox-filled-with-label-bottom-padding: null !default;
+$fluent-tagbox-tag-content-line-height: null !default;
+$fluent-tagbox-tag-container-gap: null !default;
+
+@if $size == "default" {
+  $fluent-tagbox-tag-content-padding-left: ds.$spacing-60 !default;
+  $fluent-tagbox-tag-content-padding-right: ds.$spacing-200 !default;
+  $fluent-tagbox-tag-content-vertical-padding: ds.$spacing-20 !default;
+  $fluent-tagbox-tag-content-font-size: ds.$font-size-caption-md !default;
+  $fluent-tagbox-tag-container-padding-left: ds.$spacing-120 !default;
+  $fluent-tagbox-tag-container-vertical-padding: ds.$spacing-50 !default;
+  $fluent-tagbox-tag-container-gap: ds.$spacing-40 !default;
+  $fluent-tagbox-tag-height: ds.$spacing-200 !default;
+  $fluent-tagbox-tag-content-line-height: 1.1666em !default;
+  $fluent-tagbox-filled-with-label-top-padding: ds.$spacing-90 !default;
+  $fluent-tagbox-filled-with-label-bottom-padding: ds.$spacing-10 !default;
+}
+
+@else if $size == "compact" {
+  $fluent-tagbox-tag-content-padding-left: ds.$spacing-40 !default;
+  $fluent-tagbox-tag-content-padding-right: ds.$spacing-200 !default;
+  $fluent-tagbox-tag-content-vertical-padding: 0 !default;
+  $fluent-tagbox-tag-content-font-size: ds.$font-size-caption-sm !default;
+  $fluent-tagbox-tag-container-padding-left: ds.$spacing-80 !default;
+  $fluent-tagbox-tag-container-vertical-padding: ds.$spacing-30 !default;
+  $fluent-tagbox-tag-container-gap: ds.$spacing-20 !default;
+  $fluent-tagbox-tag-height: ds.$spacing-160 !default;
+  $fluent-tagbox-tag-content-line-height: 1.3333em !default;
+  $fluent-tagbox-filled-with-label-top-padding: ds.$spacing-60 !default;
+  $fluent-tagbox-filled-with-label-bottom-padding: 0 !default;
+}
+
+// Values hoisted from style-file literals (tokenized)
+$fluent-tagbox-tag-border-width: ds.$border-width-10 !default;
+$fluent-tagbox-list-select-all-border-bottom: ds.$border-width-10 solid !default;
+$fluent-tagbox-tag-content-min-width: ds.$spacing-400 !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_colors.scss
new file mode 100644
index 000000000000..89c53a85429e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_colors.scss
@@ -0,0 +1,6 @@
+@use "sass:color";
+@use "../sizes" as *;
+@use "../colors" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_index.scss
new file mode 100644
index 000000000000..5c2ea7b6f4b2
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_index.scss
@@ -0,0 +1,34 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/textArea";
+@use "../../base/textArea/mixins" as *;
+@use "../textEditor/sizes" as *;
+
+// adduse
+
+@include dx-textarea(
+  2px,
+  $textarea-content-line-height,
+  $fluent-filled-texteditor-input-top-padding,
+  $fluent-filled-texteditor-input-with-label-top-padding,
+  $fluent-standard-texteditor-with-label-input-top-padding,
+);
+
+.dx-textarea {
+  &.dx-editor-underlined {
+    .dx-texteditor-input {
+      padding-top: calc(#{$fluent-standard-texteditor-input-top-padding} + 1px);
+      padding-bottom: calc(#{$fluent-standard-texteditor-input-bottom-padding} + 1px);
+    }
+
+    &.dx-texteditor-with-label:not(.dx-texteditor-label-outside),
+    &.dx-texteditor-with-floating-label {
+      .dx-texteditor-input {
+        padding-bottom: $fluent-standard-texteditor-with-label-input-bottom-padding;
+      }
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_sizes.scss
new file mode 100644
index 000000000000..8dbd64397a8a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textArea/_sizes.scss
@@ -0,0 +1,14 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$textarea-content-line-height: null !default;
+
+@if $size == "default" {
+  $textarea-content-line-height: ds.$line-height-base-md !default;
+}
+
+@else if $size == "compact" {
+  $textarea-content-line-height: ds.$line-height-base-sm !default;
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_colors.scss
new file mode 100644
index 000000000000..b9490fd421f6
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_colors.scss
@@ -0,0 +1,6 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
+$textbox-foreground-disabled: ds.$text-input-color-default-content-disabled !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_index.scss
new file mode 100644
index 000000000000..b80866ad8c55
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_index.scss
@@ -0,0 +1,70 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../textEditor/colors" as *;
+@use "../textEditor/sizes" as *;
+@use "../../base/textBox";
+
+// adduse
+@use "../textEditor" as *;
+
+@mixin dx-texteditor-search-icon($texteditor-icon-size) {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: $texteditor-icon-size;
+  height: 100%;
+
+  &::before {
+    font-size: $texteditor-icon-container-size;
+  }
+}
+
+.dx-searchbox {
+  .dx-icon-search {
+    @include dx-icon(search);
+
+    color: $texteditor-placeholder-color;
+  }
+
+  &.dx-editor-underlined {
+    .dx-icon-search {
+      @include dx-texteditor-search-icon($textbox-search-icon-size);
+    }
+
+    .dx-texteditor-input,
+    .dx-placeholder::before {
+      padding-inline-start: $textbox-search-icon-size;
+    }
+  }
+
+  &.dx-editor-filled,
+  &.dx-editor-outlined {
+    .dx-icon-search {
+      @include dx-texteditor-search-icon($textbox-search-icon-size);
+    }
+
+    .dx-texteditor-input,
+    .dx-placeholder::before {
+      padding-inline-start: $textbox-search-icon-size;
+    }
+  }
+
+  &.dx-state-disabled {
+    .dx-icon-search {
+      color: $textbox-foreground-disabled;
+    }
+  }
+}
+
+.dx-searchbar {
+  padding-bottom: $fluent-textbox-searchbar-padding-bottom;
+
+  .dx-texteditor {
+    margin: 0;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_sizes.scss
new file mode 100644
index 000000000000..8b72d3c04eb0
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_sizes.scss
@@ -0,0 +1,17 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$textbox-search-icon-size: null !default;
+
+@if $size == "default" {
+  $textbox-search-icon-size: ds.$spacing-320 !default;
+}
+
+@else if $size == "compact" {
+  $textbox-search-icon-size: ds.$spacing-240 !default;
+}
+
+// Values hoisted from style-file literals (tokenized)
+$fluent-textbox-searchbar-padding-bottom: ds.$spacing-50 !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_colors.scss
new file mode 100644
index 000000000000..2711208782d6
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_colors.scss
@@ -0,0 +1,115 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+/**
+* $name 10. Text color
+* $type color
+*/
+$texteditor-color: ds.$text-input-color-default-content-rest !default;
+
+/**
+* $name 20. Placeholder text color
+* $type color
+*/
+$texteditor-placeholder-color: ds.$text-content-color-default-placeholder-rest !default;
+
+/**
+* $name 30. Outlined background color
+* $type color
+*/
+$texteditor-outlined-bg: ds.$text-input-color-default-bg-rest !default;
+
+/**
+* $name 31. Outlined hovered background color
+* $type color
+*/
+$texteditor-outlined-bg-hover: $texteditor-outlined-bg !default;
+
+/**
+* $name 32. Outlined focused background color
+* $type color
+*/
+$texteditor-outlined-bg-focused: $texteditor-outlined-bg !default;
+
+/**
+* $name 40. Filled background color
+* $type color
+*/
+$texteditor-filled-bg: ds.$color-surface-neutral-deep-rest !default;
+
+/**
+* $name 50. Underlined background color
+* $type color
+*/
+$texteditor-underlined-bg: transparent !default;
+
+/**
+* $name 51. Underlined hovered background color
+* $type color
+*/
+$texteditor-underlined-bg-hover: $texteditor-underlined-bg !default;
+
+/**
+* $name 52. Underlined focused background color
+* $type color
+*/
+$texteditor-underlined-bg-focused: $texteditor-underlined-bg !default;
+
+/**
+* $name 60. Border color
+* $type color
+*/
+$texteditor-border-color: ds.$text-input-color-default-border-rest !default;
+$texteditor-border-color-hover: ds.$text-input-color-default-border-hovered !default;
+$texteditor-border-color-focused: ds.$text-input-color-default-border-active !default;
+
+/**
+* $name 70. Bottom border color
+* $type color
+*/
+$texteditor-border-bottom-color: ds.$text-input-color-default-line-rest !default;
+$texteditor-border-bottom-color-hover: ds.$text-input-color-default-line-hovered !default;
+$texteditor-border-bottom-color-focused: ds.$text-input-color-default-line-hovered !default;
+
+/**
+* $name 80. Focused state indicator color
+* $type color
+*/
+$texteditor-indicator-border-color: ds.$text-input-color-default-line-focused !default;
+
+$texteditor-button-clear-icon-color: ds.$color-content-neutral-subdued-rest !default;
+$texteditor-invalid-focused-border-color: ds.$color-border-danger-default-hovered !default;
+$texteditor-invalid-faded-border-color: ds.$text-input-color-invalid-border-rest !default;
+$texteditor-border-color-disabled: ds.$text-input-color-default-border-disabled !default;
+$texteditor-disabled-text-color: ds.$text-input-color-default-content-disabled !default;
+$texteditor-input-border-radius: $base-border-radius !default;
+$texteditor-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;
+
+/**
+* $name 41. Filled hovered background color
+* $type color
+*/
+$texteditor-filled-bg-hover: $texteditor-filled-bg !default;
+
+/**
+* $name 42. Filled focused background color
+* $type color
+*/
+$texteditor-filled-bg-focused: $texteditor-filled-bg !default;
+
+$texteditor-label-color: $texteditor-placeholder-color;
+$texteditor-label-color-focused: ds.$color-content-primary-default-rest;
+
+:root {
+  --dx-texteditor-color-text: #{$texteditor-color};
+  --dx-texteditor-color-label: #{$texteditor-label-color};
+}
+
+// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
+$texteditor-foreground-disabled: ds.$text-input-color-default-content-disabled !default;
+$texteditor-invalid-color: ds.$text-input-color-invalid-border-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_index.scss
new file mode 100644
index 000000000000..86650460c600
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_index.scss
@@ -0,0 +1,583 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../common/sizes" as *;
+@use "../button/sizes" as *;
+@use "../common/mixins" as *;
+@use "../common/sizes" as *;
+@use "../../base/textEditor";
+@use "../../base/textEditor/mixins" as *;
+@use "../colorBox/sizes" as *;
+
+// adduse
+
+$fluent-base-standard-texteditor-input-horizontal-padding: 0;
+$fluent-texteditor-invalid-badge-size: calc(#{$fluent-invalid-badge-size} + 2 * #{$fluent-invalid-badge-horizontal-padding});
+
+@mixin texteditor-outlined-styling() {
+  background-color: $texteditor-outlined-bg;
+  border-radius: $texteditor-input-border-radius;
+  border-width: $fluent-editor-border-width;
+  border-style: solid;
+  border-color: $texteditor-border-color;
+  border-bottom-color: $texteditor-border-bottom-color;
+
+  &::before {
+    box-sizing: border-box;
+    content: "";
+    position: absolute;
+    left: $fluent-texteditor-before-left;
+    bottom: $fluent-texteditor-before-bottom;
+    right: $fluent-texteditor-before-right;
+    height: $texteditor-input-border-radius;
+    width: calc(100% + 2 * $fluent-editor-border-width);
+    border-bottom-left-radius: $texteditor-input-border-radius;
+    border-bottom-right-radius: $texteditor-input-border-radius;
+    border-bottom-color: $texteditor-indicator-border-color;
+    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 * $fluent-editor-border-width);
+      inset: $fluent-texteditor-label-inset;
+    }
+
+    .dx-datebox {
+      border: none;
+    }
+  }
+
+  &.dx-state-disabled,
+  &.dx-state-readonly {
+    background-color: transparent;
+    border-color: $texteditor-border-color-disabled;
+  }
+
+  &.dx-invalid {
+    border-color: $texteditor-invalid-faded-border-color;
+
+    &.dx-state-hover,
+    &.dx-state-focused {
+      border-color: $texteditor-invalid-focused-border-color;
+    }
+
+    &::before {
+      border-color: $texteditor-invalid-faded-border-color;
+    }
+  }
+
+  &.dx-state-hover {
+    background-color: $texteditor-outlined-bg-hover;
+    border-left-color: $texteditor-border-color-hover;
+    border-right-color: $texteditor-border-color-hover;
+    border-top-color: $texteditor-border-color-hover;
+    border-bottom-color: $texteditor-border-bottom-color-hover;
+  }
+
+  &.dx-state-focused,
+  &.dx-state-active {
+    background-color: $texteditor-outlined-bg-focused;
+    border-left-color: $texteditor-border-color-focused;
+    border-right-color: $texteditor-border-color-focused;
+    border-top-color: $texteditor-border-color-focused;
+    border-bottom-color: $texteditor-border-bottom-color-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: $texteditor-filled-bg;
+  border-radius: $texteditor-input-border-radius;
+  border-width: $fluent-editor-border-width;
+  border-style: solid;
+  border-color: transparent;
+
+  .dx-placeholder::before,
+  .dx-texteditor-input {
+    padding-top: $fluent-filled-texteditor-input-top-padding;
+    padding-bottom: $fluent-filled-texteditor-input-bottom-padding;
+  }
+
+  &::before {
+    left: $fluent-texteditor-before-left;
+    bottom: $fluent-texteditor-before-bottom;
+    right: $fluent-texteditor-before-right;
+    height: $texteditor-input-border-radius;
+    width: calc(100% + 2 * $fluent-editor-border-width);
+    border-bottom-left-radius: $texteditor-input-border-radius;
+    border-bottom-right-radius: $texteditor-input-border-radius;
+    border-bottom-color: $texteditor-indicator-border-color;
+    clip-path: inset(calc(100% - 2px) 0 0);
+  }
+
+  &.dx-state-hover {
+    background-color: $texteditor-filled-bg-hover;
+  }
+
+  &.dx-state-focused,
+  &.dx-state-active {
+    background-color: $texteditor-filled-bg-focused;
+  }
+
+  &.dx-state-disabled,
+  &.dx-state-readonly {
+    background-color: transparent;
+    border-color: $texteditor-border-color-disabled;
+  }
+
+  &.dx-invalid {
+    border-color: $texteditor-invalid-faded-border-color;
+
+    &.dx-state-hover,
+    &.dx-state-focused {
+      border-color: $texteditor-invalid-focused-border-color;
+    }
+  }
+}
+
+@mixin texteditor-underlined-styling() {
+  background-color: $texteditor-underlined-bg;
+  border-radius: 0;
+
+  &::after {
+    border-bottom-width: $fluent-texteditor-state-focused-border-bottom-width;
+    border-bottom-style: solid;
+    border-bottom-color: $texteditor-border-bottom-color;
+  }
+
+  &.dx-state-hover {
+    background-color: $texteditor-underlined-bg-hover;
+
+    &::after {
+      border-bottom-color: $texteditor-border-bottom-color-hover;
+    }
+  }
+
+  &.dx-state-focused,
+  &.dx-state-active {
+    background-color: $texteditor-underlined-bg-focused;
+  }
+
+  .dx-texteditor-input,
+  .dx-lookup-field {
+    min-height: $fluent-texteditor-input-height;
+  }
+
+  .dx-texteditor-input,
+  .dx-placeholder::before {
+    padding-top: $fluent-standard-texteditor-input-top-padding;
+    padding-bottom: $fluent-standard-texteditor-input-bottom-padding;
+    padding-left: $fluent-base-standard-texteditor-input-horizontal-padding;
+    padding-right: $fluent-base-standard-texteditor-input-horizontal-padding;
+  }
+
+  &.dx-state-disabled,
+  &.dx-state-readonly {
+    &::after {
+      border-bottom-color: $texteditor-border-color-disabled;
+    }
+  }
+
+  &.dx-invalid {
+    &::after {
+      border-bottom-color: $texteditor-invalid-faded-border-color;
+    }
+
+    &.dx-state-hover {
+      &::after {
+        border-bottom-color: $texteditor-invalid-focused-border-color;
+      }
+    }
+  }
+}
+
+@mixin texteditor-input-padding-filled() {
+  .dx-texteditor-input {
+    padding-inline-end: calc(#{$fluent-texteditor-invalid-badge-size} + #{$fluent-filled-texteditor-input-horizontal-padding});
+  }
+}
+
+@mixin texteditor-validation-icon-offset() {
+  inset-inline-end: $fluent-invalid-badge-halfhorizontal-padding;
+}
+
+@mixin texteditor-validation-icon-offset-filled() {
+  inset-inline-end: $fluent-filled-texteditor-input-button-horizontal-padding;
+}
+
+@mixin validation-icon-position() {
+  &.dx-invalid,
+  &.dx-valid {
+    &.dx-editor-underlined {
+      .dx-texteditor-input {
+        padding-inline-end: calc(#{$fluent-texteditor-invalid-badge-size} + #{$fluent-base-standard-texteditor-input-horizontal-padding});
+      }
+    }
+
+    &.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(#{$fluent-texteditor-invalid-badge-size} + #{$fluent-base-standard-texteditor-input-horizontal-padding});
+      }
+    }
+
+    &.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: $texteditor-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: $texteditor-label-color-focused;
+      font-size: $fluent-texteditor-label-font-size;
+    }
+
+    &.dx-invalid {
+      .dx-texteditor-label {
+        color: $texteditor-invalid-color;
+      }
+    }
+  }
+
+  &.dx-texteditor-label-outside {
+    .dx-texteditor-label {
+      color: $texteditor-color;
+    }
+
+    &.dx-invalid {
+      .dx-texteditor-label {
+        color: $texteditor-invalid-color;
+      }
+    }
+  }
+
+  &.dx-state-focused,
+  &.dx-state-active {
+    &::before {
+      border-bottom-width: $fluent-texteditor-state-active-border-bottom-width;
+      border-bottom-style: solid;
+      border-bottom-color: $texteditor-indicator-border-color;
+      transform: scale(1);
+      transition-property: transform;
+      transition-duration: 0.2s;
+      transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+    }
+  }
+
+  &.dx-state-disabled {
+    opacity: 1;
+    background-color: transparent;
+
+    .dx-texteditor-label,
+    .dx-placeholder::before,
+    .dx-texteditor-input,
+    .dx-lookup-field {
+      color: $texteditor-disabled-text-color;
+    }
+
+    .dx-lookup-arrow,
+    .dx-dropdowneditor-icon {
+      color: $texteditor-disabled-text-color;
+    }
+  }
+
+  &.dx-state-readonly {
+    .dx-lookup-arrow {
+      display: none;
+    }
+  }
+
+  .dx-texteditor-input {
+    min-height: calc(#{$fluent-texteditor-input-height} - 2px);
+  }
+
+  @include validation-icon-position();
+  @include pending-indicator-position();
+
+  &.dx-editor-filled,
+  &.dx-editor-outlined {
+    .dx-placeholder::before,
+    .dx-texteditor-input {
+      padding: $fluent-filled-texteditor-input-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: $texteditor-icon-container-size;
+    min-width: $texteditor-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: $texteditor-button-clear-icon-color;
+  }
+
+  &.dx-state-disabled {
+    .dx-icon-clear {
+      color: $texteditor-foreground-disabled;
+    }
+  }
+
+  &:not(.dx-texteditor-empty) {
+    @include validation-icon-position();
+    @include pending-indicator-position();
+  }
+}
+
+/* B231111 */
+.dx-placeholder {
+  color: $texteditor-placeholder-color;
+  font-size: $fluent-texteditor-font-size;
+  line-height: normal;
+}
+
+.dx-texteditor-input {
+  margin: 0;
+  background-color: transparent;
+  color: $texteditor-color;
+  font-size: $fluent-texteditor-font-size;
+  line-height: $fluent-texteditor-line-height;
+}
+
+.dx-invalid.dx-texteditor {
+  &.dx-state-hover {
+    &::after {
+      border-bottom-color: $texteditor-invalid-faded-border-color;
+    }
+  }
+
+  &.dx-state-focused,
+  &.dx-state-active {
+    &::before {
+      border-bottom: $fluent-texteditor-state-active-border-bottom;
+      border-bottom-color: $texteditor-invalid-focused-border-color;
+    }
+  }
+
+  &.dx-show-invalid-badge .dx-texteditor-input-container {
+    &::after {
+      @include dx-invalid-fluent-badge();
+    }
+  }
+}
+
+.dx-texteditor-label {
+  position: absolute;
+  font-size: $fluent-texteditor-label-font-size;
+  color: $texteditor-label-color;
+  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: $fluent-texteditor-label-margin-bottom;
+    }
+  }
+
+  .dx-invalid & {
+    color: $texteditor-invalid-color;
+  }
+}
+
+@include dx-editor-outlined(
+  $texteditor-input-border-radius,
+  $fluent-texteditor-label-font-size,
+  $fluent-base-border-width,
+  $fluent-base-border-width,
+  solid,
+  $fluent-base-inline-block-height,
+  $fluent-base-inline-block-height,
+  calc((1px + #{$fluent-texteditor-font-size}) / 2),
+  $fluent-texteditor-label-outside-top-offset,
+  0.5px,
+  $fluent-filled-texteditor-input-horizontal-padding,
+  $fluent-filled-texteditor-input-horizontal-padding,
+  $texteditor-outlined-bg,
+  1px solid transparent,
+  $texteditor-border-color,
+  $texteditor-border-bottom-color,
+  $texteditor-border-color-disabled,
+  $texteditor-border-color-disabled,
+  $texteditor-border-color-hover,
+  $texteditor-border-bottom-color-hover,
+  $texteditor-border-color-focused,
+  $texteditor-border-bottom-color-focused,
+  $texteditor-invalid-faded-border-color,
+  $texteditor-invalid-focused-border-color,
+  $texteditor-label-transition,
+  $fluent-texteditor-font-size,
+  $fluent-filled-texteditor-input-top-padding,
+  1px,
+  $fluent-texteditor-font-size,
+  $fluent-texteditor-label-outside-height,
+);
+@include dx-editor-filled(
+  $texteditor-label-transition,
+  $fluent-texteditor-label-font-size,
+  $fluent-texteditor-label-font-size,
+  $fluent-texteditor-label-font-size,
+  $fluent-texteditor-label-top-offset,
+  $fluent-texteditor-label-outside-top-offset,
+  $fluent-texteditor-font-size,
+  $fluent-texteditor-font-size,
+  $fluent-texteditor-font-size,
+  $fluent-filled-texteditor-input-horizontal-padding,
+  $fluent-filled-texteditor-input-with-label-top-padding,
+  $fluent-filled-texteditor-input-with-label-bottom-padding,
+  $fluent-texteditor-font-size,
+  $fluent-texteditor-label-outside-height,
+);
+@include dx-editor-underlined(
+  $texteditor-label-transition,
+  $fluent-texteditor-label-font-size,
+  $fluent-texteditor-label-font-size,
+  $fluent-texteditor-label-font-size,
+  $fluent-texteditor-label-top-offset,
+  $fluent-texteditor-label-outside-top-offset,
+  $fluent-texteditor-font-size,
+  $fluent-texteditor-font-size,
+  $fluent-texteditor-font-size,
+  $fluent-standard-texteditor-with-label-input-top-padding,
+  $fluent-standard-texteditor-with-label-input-bottom-padding,
+  $fluent-texteditor-font-size,
+  $fluent-texteditor-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(
+  $fluent-underlined-editor-button-height,
+  $fluent-editor-custom-button-margin,
+  $fluent-editor-custom-button-margin,
+  0,
+  $texteditor-spin-button-horizontal-padding,
+  $fluent-button-vertical-padding,
+);
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_sizes.scss
new file mode 100644
index 000000000000..b74eb643e3b6
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_sizes.scss
@@ -0,0 +1,84 @@
+@use "sass:math";
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-texteditor-line-height: null !default;
+$fluent-texteditor-font-size: null !default;
+$fluent-texteditor-input-height: null !default;
+$fluent-texteditor-label-top-offset: null !default;
+$fluent-texteditor-label-outside-top-offset: null !default;
+$fluent-filled-texteditor-input-horizontal-padding: null !default;
+$fluent-filled-texteditor-input-top-padding: null !default;
+$fluent-filled-texteditor-input-bottom-padding: null !default;
+$fluent-standard-texteditor-input-top-padding: null !default;
+$fluent-underlined-editor-button-height: null !default;
+$fluent-texteditor-label-font-size: null !default;
+$fluent-texteditor-label-outside-height: null !default;
+$fluent-standard-texteditor-input-bottom-padding: null !default;
+$fluent-standard-texteditor-with-label-input-top-padding: null !default;
+$fluent-standard-texteditor-with-label-input-bottom-padding: null !default;
+$fluent-filled-texteditor-input-with-label-top-padding: null !default;
+$fluent-filled-texteditor-input-with-label-bottom-padding: null !default;
+$texteditor-icon-container-size: $fluent-base-icon-size !default;
+
+@if $size == "default" {
+  $fluent-texteditor-line-height: 1.428571 !default;
+  $fluent-texteditor-font-size: ds.$font-size-base-md !default;
+  $fluent-texteditor-input-height: ds.$spacing-320 !default;
+  $fluent-texteditor-label-outside-height: ds.$spacing-200 !default;
+  $fluent-texteditor-label-outside-top-offset: ds.$spacing-240 !default;
+  $fluent-texteditor-label-font-size: ds.$font-size-caption-md !default;
+  $fluent-texteditor-label-top-offset: ds.$spacing-minus-10 !default;
+  $fluent-filled-texteditor-input-horizontal-padding: ds.$spacing-120 !default;
+  $fluent-filled-texteditor-input-top-padding: ds.$spacing-50 !default;
+  $fluent-filled-texteditor-input-with-label-top-padding: ds.$spacing-80 !default;
+  $fluent-filled-texteditor-input-bottom-padding: ds.$spacing-50 !default;
+  $fluent-filled-texteditor-input-with-label-bottom-padding: ds.$spacing-20 !default;
+  $fluent-standard-texteditor-input-top-padding: ds.$spacing-50 !default;
+  $fluent-standard-texteditor-input-bottom-padding: ds.$spacing-50 !default;
+  $fluent-standard-texteditor-with-label-input-top-padding: ds.$spacing-90 !default;
+  $fluent-standard-texteditor-with-label-input-bottom-padding: ds.$spacing-30 !default;
+  $fluent-underlined-editor-button-height: ds.$spacing-220 !default;
+}
+
+@else if $size == "compact" {
+  $fluent-texteditor-line-height: 1.3333 !default;
+  $fluent-texteditor-font-size: ds.$font-size-base-sm !default;
+  $fluent-texteditor-input-height: ds.$spacing-240 !default;
+  $fluent-texteditor-label-outside-height: ds.$spacing-160 !default;
+  $fluent-texteditor-label-outside-top-offset: ds.$spacing-180 !default;
+  $fluent-texteditor-label-font-size: ds.$font-size-caption-sm !default;
+  $fluent-texteditor-label-top-offset: ds.$spacing-minus-10 !default;
+  $fluent-filled-texteditor-input-horizontal-padding: ds.$spacing-80 !default;
+  $fluent-filled-texteditor-input-top-padding: ds.$spacing-30 !default;
+  $fluent-filled-texteditor-input-with-label-top-padding: ds.$spacing-60 !default;
+  $fluent-filled-texteditor-input-bottom-padding: ds.$spacing-30 !default;
+  $fluent-filled-texteditor-input-with-label-bottom-padding: 0 !default;
+  $fluent-standard-texteditor-input-top-padding: ds.$spacing-30 !default;
+  $fluent-standard-texteditor-input-bottom-padding: ds.$spacing-30 !default;
+  $fluent-standard-texteditor-with-label-input-top-padding: ds.$spacing-60 !default;
+  $fluent-standard-texteditor-with-label-input-bottom-padding: ds.$spacing-20 !default;
+  $fluent-underlined-editor-button-height: ds.$spacing-220 !default;
+}
+
+$fluent-filled-texteditor-input-padding:
+  $fluent-filled-texteditor-input-top-padding
+  $fluent-filled-texteditor-input-horizontal-padding
+  $fluent-filled-texteditor-input-bottom-padding !default;
+
+$fluent-filled-texteditor-input-button-horizontal-padding: calc(#{$fluent-filled-texteditor-input-horizontal-padding} - #{ds.$spacing-40}) !default;
+$texteditor-spin-button-horizontal-padding: calc((#{$fluent-filled-texteditor-input-horizontal-padding}) / 2) !default;
+
+// Values hoisted from style-file literals (tokenized)
+$fluent-editor-border-width: ds.$border-width-10 !default;
+$fluent-texteditor-before-left: -1px !default; // dx-offscale: -1px
+$fluent-texteditor-before-bottom: -1px !default; // dx-offscale: -1px
+$fluent-texteditor-before-right: -1px !default; // dx-offscale: -1px
+$fluent-texteditor-label-inset: -1px !default; // dx-offscale: -1px
+$fluent-texteditor-label-margin-bottom: -1px !default; // dx-offscale: -1px
+$fluent-texteditor-state-active-border-bottom: ds.$border-width-20 solid !default;
+$fluent-editor-custom-button-margin: ds.$spacing-60 !default;
+$fluent-texteditor-state-focused-border-bottom-width: ds.$border-width-10 !default;
+$fluent-texteditor-state-active-border-bottom-width: ds.$border-width-20 !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_colors.scss
new file mode 100644
index 000000000000..e8df69293771
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_colors.scss
@@ -0,0 +1,15 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+/**
+* $name 10. Item text color
+* $type color
+*/
+$tileview-color: ds.$color-content-neutral-default-rest !default;
+$tileview-bg: ds.$color-surface-neutral-default-rest !default;
+$tileview-border-color: ds.$color-border-neutral-subdued-rest !default;
+$tileview-hover-bg: ds.$color-surface-neutral-default-rest !default;
+$tileview-hover-border-color: ds.$color-border-primary-default-rest !default;
+$tileview-active-bg: ds.$color-surface-neutral-alpha-active !default;
+$tileview-active-color: $tileview-color !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_index.scss
new file mode 100644
index 000000000000..10ca807a7d82
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_index.scss
@@ -0,0 +1,28 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/tileView";
+
+// adduse
+
+
+.dx-tile {
+  color: $tileview-color;
+  background-color: $tileview-bg;
+  border: $fluent-tileview-tile-border;
+  border-color: $tileview-border-color;
+  text-align: left;
+
+  &.dx-state-focused,
+  &.dx-state-hover {
+    background-color: $tileview-hover-bg;
+    border-color: $tileview-hover-border-color;
+  }
+
+  &.dx-state-active {
+    background-color: $tileview-active-bg;
+    color: $tileview-active-color;
+    border-color: transparent;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_sizes.scss
new file mode 100644
index 000000000000..169df4554c57
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tileView/_sizes.scss
@@ -0,0 +1,8 @@
+@use "../../../_design-system/variables/ds" as ds;
+@use "../sizes" as *;
+
+// adduse
+
+
+// Values hoisted from style-file literals (tokenized)
+$fluent-tileview-tile-border: ds.$border-width-10 solid !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_colors.scss
new file mode 100644
index 000000000000..2a3cd176e0c3
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_colors.scss
@@ -0,0 +1,13 @@
+@use "../colors" as *;
+
+// adduse
+
+/*
+ * The clock face and arrows are SVG data-uri images: colors are baked into the
+ * background-image at build time (string replace). CSS var() tokens do NOT resolve inside a
+ * data-uri (they render black), so these stay concrete $base-* values. See DIVERGENCES.md.
+ */
+$clock-digits-color: $base-text-color !default;
+
+$timeview-inverted-bg: $base-inverted-bg !default;
+$timeview-typography-bg: $base-typography-bg !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_index.scss
new file mode 100644
index 000000000000..a77531c55a5d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_index.scss
@@ -0,0 +1,55 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../textEditor/sizes" as *;
+@use "../../base/timeView/mixins" as *;
+@use "../../base/timeView";
+
+// adduse
+
+@include clock-action-icons-mixin($timeview-inverted-bg, $timeview-typography-bg, $clock-digits-color);
+
+.dx-timeview {
+  height: auto;
+  width: auto;
+
+  .dx-texteditor {
+    .dx-texteditor-input {
+      padding-inline-end: 0;
+      padding-inline-start: $fluent-timeview-input-padding-inline-start;
+    }
+
+    .dx-texteditor-container {
+      .dx-texteditor-buttons-container .dx-dropdowneditor-button {
+        margin-inline-end: 0;
+      }
+    }
+  }
+}
+
+.dx-timeview-clock {
+  margin-bottom: $fluent-timeview-timeview-clock-margin-bottom;
+}
+
+.dx-timeview-format12 {
+  width: $fluent-timeview-format12-width;
+  margin-inline-start: $fluent-timeview-time-separator-margin;
+}
+
+.dx-timeview-time-separator {
+  margin: 0 $fluent-timeview-time-separator-margin;
+}
+
+.dx-timeview-field {
+  min-height: $fluent-timeview-field-min-height;
+}
+
+.dx-timeview-field .dx-numberbox {
+  width: $fluent-timeview-format12-width;
+
+  &.dx-numberbox-spin-touch-friendly {
+    width: $fluent-timeview-numberbox-spin-touch-friendly-width;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_sizes.scss
new file mode 100644
index 000000000000..55aa54f95773
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/timeView/_sizes.scss
@@ -0,0 +1,13 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-timeview-field-min-height: 35px !default; // dx-offscale: 35px
+$fluent-timeview-time-separator-margin: ds.$spacing-50 !default;
+$fluent-timeview-format12-width: ds.$spacing-640 !default;
+
+// Values hoisted from style-file literals (tokenized)
+$fluent-timeview-input-padding-inline-start: ds.$spacing-120 !default;
+$fluent-timeview-timeview-clock-margin-bottom: ds.$spacing-100 !default;
+$fluent-timeview-numberbox-spin-touch-friendly-width: 110px !default; // dx-offscale: 110px
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_colors.scss
new file mode 100644
index 000000000000..8150a1ca48a1
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_colors.scss
@@ -0,0 +1,55 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$toast-default-bg: ds.$toast-color-bg-rest !default;
+
+/**
+* $name 10. Info background color
+* $type color
+*/
+$toast-info-bg: $toast-default-bg !default;
+
+/**
+* $name 20. Info text color
+* $type color
+*/
+$toast-info-color: ds.$color-content-neutral-default-rest !default;
+
+/**
+* $name 30. Warning background color
+* $type color
+*/
+$toast-warning-bg: ds.$color-surface-warning-default-rest !default;
+
+/**
+* $name 40. Warning text color
+* $type color
+*/
+$toast-warning-color: ds.$color-content-neutral-default-static-light-rest !default;
+
+/**
+* $name 50. Error background color
+* $type color
+*/
+$toast-error-bg: ds.$color-surface-danger-default-rest !default;
+
+/**
+* $name 60. Error text color
+* $type color
+*/
+$toast-error-color: ds.$color-content-neutral-default-static-dark-rest !default;
+
+/**
+* $name 70. Success background color
+* $type color
+*/
+$toast-success-bg: ds.$color-surface-success-default-rest !default;
+
+/**
+* $name 80. Success text color
+* $type color
+*/
+$toast-success-color: ds.$color-content-neutral-default-static-dark-rest !default;
+
+$toast-shadow: ds.$box-shadow-lg !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_index.scss
new file mode 100644
index 000000000000..aef8d1b5aa19
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_index.scss
@@ -0,0 +1,52 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/toast";
+
+// adduse
+@use "../overlay";
+
+
+.dx-toast-stack {
+  gap: $fluent-toast-item-gap;
+}
+
+.dx-toast-content {
+  font-size: $fluent-base-font-size;
+  font-weight: $toast-content-font-weight;
+  padding: $fluent-toast-content-vertical-padding $fluent-toast-content-horizontal-padding;
+  border-radius: $toast-border-radius;
+  box-shadow: $toast-shadow;
+  min-height: $fluent-toast-height;
+  display: flex;
+  align-items: center;
+}
+
+.dx-toast-icon {
+  display: none;
+}
+
+.dx-toast-message {
+  padding: 0;
+}
+
+.dx-toast-info {
+  background-color: $toast-info-bg;
+  color: $toast-info-color;
+}
+
+.dx-toast-warning {
+  background-color: $toast-warning-bg;
+  color: $toast-warning-color;
+}
+
+.dx-toast-error {
+  background-color: $toast-error-bg;
+  color: $toast-error-color;
+}
+
+.dx-toast-success {
+  background-color: $toast-success-bg;
+  color: $toast-success-color;
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_sizes.scss
new file mode 100644
index 000000000000..f6e22b2045d0
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/toast/_sizes.scss
@@ -0,0 +1,25 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$toast-border-radius: $fluent-base-border-radius !default;
+$fluent-toast-height: null !default;
+$fluent-toast-item-gap: null !default;
+$fluent-toast-content-vertical-padding: null !default;
+$fluent-toast-content-horizontal-padding: ds.$spacing-120 !default;
+
+@if $size == "default" {
+  $fluent-toast-content-vertical-padding: ds.$spacing-120 !default;
+  $fluent-toast-height: ds.$spacing-440 !default;
+  $fluent-toast-item-gap: ds.$spacing-120 !default;
+}
+
+@else if $size == "compact" {
+  $fluent-toast-content-vertical-padding: ds.$spacing-80 !default;
+  $fluent-toast-height: ds.$spacing-360 !default;
+  $fluent-toast-item-gap: ds.$spacing-80 !default;
+}
+
+// Values hoisted from style-file literals (tokenized)
+$toast-content-font-weight: ds.$font-weight-base-default !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_colors.scss
new file mode 100644
index 000000000000..06c3b3a9f51c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_colors.scss
@@ -0,0 +1,11 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+/**
+* $name 10. Background color
+* $type color
+*/
+$toolbar-bg: transparent !default;
+$toolbar-color: ds.$color-content-neutral-default-rest !default;
+$toolbar-separator-color: ds.$separator-color !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_index.scss
new file mode 100644
index 000000000000..667766bd1dba
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_index.scss
@@ -0,0 +1,181 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/icon_fonts" as *;
+@use "../list/sizes" as *;
+@use "../button/mixins" as *;
+@use "../button/colors" as *;
+@use "../button/sizes" as *;
+@use "../checkBox/sizes" as *;
+@use "mixins" as *;
+@use "../../base/toolbar";
+
+// adduse
+@use "../dropDownMenu";
+
+.dx-toolbar {
+  background-color: $toolbar-bg;
+  color: $toolbar-color;
+
+  @include dx-toolbar-sizing(
+    $fluent-toolbar-height,
+    $fluent-toolbar-padding,
+    $fluent-toolbar-label-font-size,
+    $fluent-toolbar-item-spacing
+  );
+
+  &.dx-toolbar-multiline {
+    .dx-toolbar-item {
+      height: $fluent-toolbar-height;
+    }
+  }
+}
+
+.dx-toolbar-after {
+  .dx-toolbar-item {
+    @include dx-toolbar-item-padding($fluent-toolbar-item-spacing);
+  }
+}
+
+.dx-toolbar-background {
+  background-color: $toolbar-bg;
+}
+
+.dx-toolbar-menu-section {
+  border-bottom: $fluent-toolbar-menu-section-border-bottom;
+  border-bottom-color: $toolbar-separator-color;
+
+  .dx-list-item-content,
+  .dx-toolbar-item-auto-hide {
+    padding: $fluent-list-item-vertical-padding $fluent-list-item-horizontal-padding calc(#{$fluent-list-item-vertical-padding} - 1px);
+  }
+
+  .dx-list-item-content {
+    font-size: $fluent-base-font-size;
+    vertical-align: middle;
+
+    .dx-list-item-icon-container {
+      height: $fluent-button-icon-size;
+      width: $fluent-button-icon-size;
+
+      @include dx-icon-margin(math.div($fluent-button-icon-size, 2));
+
+      .dx-icon {
+        font-size: $fluent-button-icon-size;
+
+        @include dx-icon-sizing($fluent-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: $fluent-list-item-height;
+      padding: 0;
+    }
+
+    .dx-button-text {
+      text-transform: none;
+      font-weight: $fluent-toolbar-button-text-font-weight;
+    }
+
+    .dx-button-content {
+      padding: 0 $fluent-list-item-horizontal-padding;
+    }
+  }
+
+  .dx-toolbar-hidden-button {
+    .dx-button-normal {
+      @include dx-button-flat-color-styling(
+        $button-normal-color,
+        $button-normal-color,
+        $button-normal-color,
+        $button-normal-text-bg,
+        $button-normal-text-hover-bg,
+        $button-normal-text-focused-bg,
+        $button-normal-text-active-bg
+      );
+    }
+
+    .dx-button-default {
+      @include dx-button-flat-color-styling(
+        $button-default-text-color,
+        $button-default-text-color-hover,
+        $button-default-text-color-active,
+        $button-default-text-bg,
+        $button-default-text-hover-bg,
+        $button-default-text-focused-bg,
+        $button-default-text-active-bg
+      );
+    }
+
+    .dx-button-danger {
+      @include dx-button-flat-color-styling(
+        $button-danger-bg,
+        $button-danger-bg,
+        $button-danger-bg,
+        $button-danger-text-bg,
+        $button-danger-text-hover-bg,
+        $button-danger-text-focused-bg,
+        $button-danger-text-active-bg
+      );
+    }
+
+    .dx-button-success {
+      @include dx-button-flat-color-styling(
+        $button-success-bg,
+        $button-success-bg,
+        $button-success-bg,
+        $button-success-text-bg,
+        $button-success-text-hover-bg,
+        $button-success-text-focused-bg,
+        $button-success-text-active-bg
+      );
+    }
+
+    .dx-button {
+      &.dx-button-has-icon:not(.dx-button-has-text) {
+        border-radius: 0;
+      }
+    }
+  }
+
+  .dx-toolbar-hidden-button-group {
+    margin-top: $fluent-toolbar-padding;
+    margin-bottom: $fluent-toolbar-padding;
+
+    &:first-of-type {
+      margin-top: $fluent-list-vertical-padding;
+    }
+
+    &:last-of-type {
+      margin-bottom: $fluent-list-vertical-padding;
+    }
+  }
+}
+
+.dx-toolbar-menu-section:empty {
+  border-bottom: none;
+}
+
+.dx-toolbar-button {
+  &.dx-toolbar-text-auto-hide {
+    .dx-button {
+      @include dx-button-onlyicon-sizing();
+    }
+  }
+
+  .dx-switch {
+    display: block;
+    line-height: 0;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_mixins.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_mixins.scss
new file mode 100644
index 000000000000..cf7135588bb1
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_mixins.scss
@@ -0,0 +1,61 @@
+@use "sizes" as *;
+@use "../typography/sizes" as *;
+
+@mixin dx-toolbar-sizing($height, $padding, $label-font-size, $item-spacing) {
+  padding: $padding;
+  overflow: visible;
+
+  .dx-toolbar-before {
+    padding-inline-end: $fluent-toolbar-section-padding;
+  }
+
+  .dx-toolbar-after {
+    padding-inline-start: $fluent-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(#{$fluent-toolbar-item-spacing} * 4);
+    }
+
+    &:last-child {
+      padding: 0;
+    }
+  }
+
+  .dx-toolbar-label {
+    font-size: $label-font-size;
+    font-weight: $fluent-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/dxdsfluent/toolbar/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_sizes.scss
new file mode 100644
index 000000000000..b97e8794fee6
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/toolbar/_sizes.scss
@@ -0,0 +1,31 @@
+@use "../sizes" as *;
+@use "../typography/sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-toolbar-height: null !default;
+
+$fluent-toolbar-padding: 0 !default;
+$fluent-toolbar-item-spacing: ds.$spacing-40 !default;
+$fluent-toolbar-label-font-size: $fluent-m-font-size !default;
+$fluent-toolbar-section-padding: null !default;
+
+@if $size == "default" {
+  $fluent-toolbar-height: ds.$spacing-480 !default;
+  $fluent-toolbar-section-padding: ds.$spacing-120 !default;
+}
+
+@else if $size == "compact" {
+  $fluent-toolbar-height: ds.$spacing-360 !default;
+  $fluent-toolbar-section-padding: ds.$spacing-80 !default;
+}
+
+:root {
+  --dx-toolbar-height: #{$fluent-toolbar-height};
+}
+
+// Values hoisted from style-file literals (tokenized)
+$fluent-toolbar-button-text-font-weight: ds.$font-weight-base-default !default;
+$fluent-toolbar-label-font-weight: ds.$font-weight-500 !default; // dx-no-semantic-role: 500 is off the weight-role scale (400/600/700)
+$fluent-toolbar-menu-section-border-bottom: ds.$border-width-10 solid !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_colors.scss
new file mode 100644
index 000000000000..6d5a410c1e5c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_colors.scss
@@ -0,0 +1,18 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+/**
+* $name 10. Text color
+* $type color
+*/
+$tooltip-color: ds.$color-content-neutral-default-rest !default;
+
+/**
+* $name 20. Background color
+* $type color
+*/
+$tooltip-bg: ds.$tooltip-color-bg-rest !default;
+
+$tooltip-border-radius: $base-border-radius !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_index.scss
new file mode 100644
index 000000000000..e917f51933a1
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_index.scss
@@ -0,0 +1,39 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/tooltip";
+
+// adduse
+
+
+.dx-tooltip-wrapper {
+  .dx-overlay-content {
+    background-color: $tooltip-bg;
+    color: $tooltip-color;
+    border: $fluent-tooltip-overlay-content-border;
+    border-radius: $tooltip-border-radius;
+    min-height: auto;
+
+    .dx-popup-content {
+      padding: $fluent-tooltip-padding;
+      font-size: $fluent-tooltip-font-size;
+    }
+  }
+
+  &.dx-popover-wrapper .dx-popover-arrow {
+    &::after {
+      box-shadow: $fluent-tooltip-shadow;
+      background: $tooltip-bg;
+      border-top-right-radius: $fluent-tooltip-arrow-border-radius;
+    }
+  }
+
+  &.dx-popover-wrapper.dx-position-top {
+    .dx-popover-arrow {
+      &::after {
+        border-bottom-left-radius: $fluent-tooltip-arrow-border-radius;
+      }
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_sizes.scss
new file mode 100644
index 000000000000..acacd12c9c46
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/tooltip/_sizes.scss
@@ -0,0 +1,23 @@
+@use "../common/colors" as *;
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-tooltip-padding: null !default;
+$fluent-tooltip-font-size: null !default;
+$fluent-tooltip-arrow-border-radius: ds.$border-radius-20 !default;
+$fluent-tooltip-shadow: 0 0 ds.$spacing-20 0 $base-dropdown-shadow-color1 !default;
+
+@if $size == "default" {
+  $fluent-tooltip-padding: ds.$spacing-70 ds.$spacing-110 !default;
+  $fluent-tooltip-font-size: ds.$font-size-caption-md;
+}
+
+@else if $size == "compact" {
+  $fluent-tooltip-padding: ds.$spacing-30 ds.$spacing-50 !default;
+  $fluent-tooltip-font-size: ds.$font-size-caption-md;
+}
+
+// Values hoisted from style-file literals (tokenized)
+$fluent-tooltip-overlay-content-border: ds.$border-width-10 solid transparent !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_colors.scss
new file mode 100644
index 000000000000..b63c72bdc990
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_colors.scss
@@ -0,0 +1,6 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$treelist-chevron-icon-color: ds.$color-content-neutral-subdued-rest !default;
+$treelist-selection-chevron-icon-color: $treelist-chevron-icon-color !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_index.scss
new file mode 100644
index 000000000000..915b87551164
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_index.scss
@@ -0,0 +1,67 @@
+@use "../colors" as *;
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/mixins" as *;
+@use "../../base/icon_fonts" as *;
+@use "../gridBase" as *;
+@use "../gridBase/colors" as *;
+@use "../gridBase/sizes" as *;
+@use "../../base/treeList" as baseTreeList with (
+  $treelist-sticky-column-border: $fluent-treelist-sticky-column-border,
+  $treelist-cell-focus-outline: $fluent-treelist-cell-focus-outline,
+  $treelist-header-filter-outline: $fluent-treelist-header-filter-outline,
+  $treelist-header-filter-outline-offset: $fluent-treelist-header-filter-outline-offset,
+  $treelist-button-margin-left: $fluent-treelist-button-margin-left,
+  $treelist-button-margin-top: $fluent-treelist-button-margin-top,
+  $treelist-error-message-margin-bottom: $fluent-treelist-error-message-margin-bottom,
+  $treelist-button-margin-right: $fluent-treelist-button-margin-right,
+  $datagrid-border: $datagrid-border,
+  $datagrid-drag-header-border-color: $datagrid-drag-header-border-color,
+  $datagrid-row-error-bg: $datagrid-row-error-bg,
+  $datagrid-base-color: $datagrid-base-color,
+  $datagrid-base-background-color: $datagrid-base-background-color,
+  $datagrid-border-color: $datagrid-border-color,
+  $datagrid-focused-border-color: $datagrid-focused-border-color,
+  $datagrid-text-stub-background-image-path: $datagrid-text-stub-background-image-path,
+  $datagrid-row-error-color: $datagrid-row-error-color,
+  $header-filter-color: $header-filter-color,
+  $header-filter-color-empty: $header-filter-color-empty,
+  $base-focus-color: $base-focus-color,
+);
+@use 'layout/cell';
+@include grid-base(treelist);
+
+.dx-treelist-rowsview {
+  tr:not(.dx-row-focused) .dx-treelist-empty-space {
+    color: $treelist-chevron-icon-color;
+  }
+
+  .dx-sort-up,
+  .dx-sort-down,
+  .dx-header-filter {
+    vertical-align: middle;
+  }
+
+  tr:not(.dx-row-focused).dx-selection {
+    .dx-treelist-empty-space {
+      color: $treelist-selection-chevron-icon-color;
+    }
+  }
+
+  .dx-treelist-cell-expandable {
+    .dx-treelist-text-content {
+      white-space: normal;
+    }
+  }
+
+  &.dx-treelist-nowrap .dx-treelist-table {
+    .dx-treelist-cell-expandable {
+      .dx-treelist-text-content {
+        white-space: nowrap;
+      }
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_sizes.scss
new file mode 100644
index 000000000000..6d7411838ce3
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/_sizes.scss
@@ -0,0 +1,34 @@
+@use "sass:math";
+@use "../sizes" as *;
+@use "../../base/treeList/variables" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$treelist-fluent-expand-icon-size: null !default;
+
+@if $size == "default" {
+  $treelist-fluent-expand-icon-size: ds.$spacing-200 !default;
+}
+
+@else if $size == "compact" {
+  $treelist-fluent-expand-icon-size: ds.$spacing-160 !default;
+}
+
+$treelist-expand-icon-size: $treelist-fluent-expand-icon-size !default;
+$treelist-expand-icon-name-expanded: chevrondown !default;
+$treelist-expand-icon-name-collapsed: chevronright !default;
+$treelist-expand-icon-right-gap: ds.$spacing-40 !default;
+$treelist-expand-checkbox-size: ds.$spacing-160 !default;
+$treelist-expand-checkbox-right-gap: ds.$spacing-80 !default;
+
+// Base-layer sizing injected with design tokens (wave B2)
+$fluent-treelist-header-filter-outline: ds.$spacing-20 solid !default;
+$fluent-treelist-header-filter-outline-offset: ds.$spacing-20 !default;
+$fluent-treelist-button-margin-left: ds.$spacing-100 !default;
+$fluent-treelist-button-margin-top: ds.$spacing-100 !default;
+$fluent-treelist-error-message-margin-bottom: ds.$spacing-200 !default;
+$fluent-treelist-button-margin-right: ds.$spacing-100 !default;
+
+$fluent-treelist-sticky-column-border: ds.$border-width-20 solid !default;
+$fluent-treelist-cell-focus-outline: ds.$spacing-20 solid !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/layout/cell.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeList/layout/cell.scss
new file mode 100644
index 000000000000..f1e86b56616a
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/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/dxdsfluent/treeView/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_colors.scss
new file mode 100644
index 000000000000..7cc6b616705b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_colors.scss
@@ -0,0 +1,31 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$treeview-color: ds.$color-content-neutral-default-rest !default;
+
+/**
+* $name 80. Focused state background color
+* $type color
+*/
+$treeview-focused-bg: ds.$color-surface-neutral-default-hovered !default;
+$treeview-focus-color: ds.$color-content-neutral-default-rest !default;
+$treeview-hover-bg: ds.$color-surface-neutral-default-hovered !default;
+$treeview-item-hover-color: ds.$color-content-neutral-default-rest !default;
+$treeview-border-color: ds.$color-border-neutral-default-rest !default;
+$treeview-item-selected-color: $treeview-color !default;
+$treeview-item-selected-bg: ds.$color-surface-neutral-default-selected !default;
+$treeview-spin-icon-color: ds.$color-content-neutral-subdued-rest !default;
+$checkbox-border-color-focused: ds.$checkbox-color-checked-default-border-active !default;
+$treeview-checkbox-disabled-control-color-focused: ds.$checkbox-color-checked-default-icon-disabled !default;
+$treeview-checkbox-disabled-background-focused: ds.$color-surface-neutral-default-disabled !default;
+$treeview-item-content-disabled: ds.$color-content-neutral-default-disabled !default;
+$treeview-checkbox-border-color-focused: ds.$checkbox-color-unchecked-default-border-disabled !default;
+$treeview-checkbox-background-color-focused: ds.$color-surface-neutral-default-disabled !default;
+$treeview-checkbox-accent-color-focused: ds.$checkbox-color-checked-default-bg-hovered !default;
+
+// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
+$treeview-text-color: ds.$color-content-neutral-default-rest !default;
+
+// Base-layer values injected with design tokens (wave B1)
+$fluent-treeview-disabled-opacity: ds.$opacity-50 !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_index.scss
new file mode 100644
index 000000000000..7bcc38ca1e78
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_index.scss
@@ -0,0 +1,144 @@
+@use "sass:math";
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/treeView" as * with (
+  $treeview-disabled-opacity: $fluent-treeview-disabled-opacity,
+);
+@use "../../base/icon_fonts" as *;
+
+.dx-treeview-custom-expand-icon,
+.dx-treeview-custom-collapse-icon {
+  @include dx-icon-sizing($fluent-base-icon-size);
+}
+
+.dx-treeview-select-all-item {
+  &.dx-state-focused {
+    .dx-checkbox-icon {
+      border-color: $treeview-checkbox-border-color-focused;
+      background-color: $treeview-checkbox-background-color-focused;
+    }
+  }
+
+  &.dx-state-focused.dx-checkbox-checked {
+    .dx-checkbox-icon {
+      background-color: $treeview-checkbox-accent-color-focused;
+      border-color: $treeview-checkbox-accent-color-focused;
+    }
+  }
+
+  &.dx-state-focused.dx-checkbox-indeterminate {
+    .dx-checkbox-icon {
+      border-color: $treeview-checkbox-accent-color-focused;
+
+      &::before {
+        background-color: $treeview-checkbox-accent-color-focused;
+      }
+    }
+  }
+}
+
+.dx-treeview-item-with-checkbox {
+  .dx-treeview-item {
+    .dx-checkbox.dx-state-disabled {
+      .dx-checkbox-icon {
+        border-color: $treeview-item-content-disabled;
+      }
+
+      &.dx-checkbox-indeterminate {
+        .dx-checkbox-icon::before {
+          background-color: $treeview-item-content-disabled;
+        }
+      }
+    }
+  }
+
+  &.dx-state-focused > .dx-treeview-item {
+    .dx-checkbox {
+      .dx-checkbox-icon {
+        border-color: $treeview-checkbox-border-color-focused;
+        background-color: $treeview-checkbox-background-color-focused;
+      }
+
+      &.dx-checkbox-checked {
+        .dx-checkbox-icon {
+          background-color: $treeview-checkbox-accent-color-focused;
+          border-color: $treeview-checkbox-accent-color-focused;
+        }
+      }
+
+      &.dx-checkbox-indeterminate {
+        .dx-checkbox-icon {
+          border-color: $treeview-checkbox-accent-color-focused;
+
+          &::before {
+            background-color: $treeview-checkbox-accent-color-focused;
+          }
+        }
+      }
+    }
+
+    .dx-checkbox.dx-state-disabled {
+      .dx-checkbox-icon {
+        background-color: $treeview-checkbox-disabled-background-focused;
+        border-color: $treeview-checkbox-disabled-control-color-focused;
+      }
+
+      &.dx-checkbox-checked {
+        .dx-checkbox-icon {
+          color: $treeview-checkbox-disabled-control-color-focused;
+        }
+      }
+
+      &.dx-checkbox-indeterminate {
+        .dx-checkbox-icon::before {
+          background-color: $treeview-checkbox-disabled-control-color-focused;
+        }
+      }
+    }
+  }
+}
+
+.dx-treeview-item-content.dx-state-disabled {
+  color: $treeview-item-content-disabled;
+}
+
+@include default-expander-icon(
+  'chevrondown',
+  'chevronright',
+  $fluent-base-icon-size,
+  $fluent-treeview-toggle-item-width,
+  $treeview-spin-icon-color,
+);
+@include treeview-item(
+  $fluent-treeview-item-element-gap,
+  $fluent-treeview-item-padding,
+  $fluent-base-icon-size,
+  $treeview-hover-bg,
+  $treeview-item-hover-color,
+  $treeview-item-selected-color,
+  calc(#{$fluent-treeview-toggle-item-width} + #{$fluent-treeview-item-element-gap}),
+  $fluent-treeview-item-margin,
+  $fluent-treeview-item-border-radius,
+);
+@include treeview-checkbox(
+  $fluent-checkbox-container-size,
+  $treeview-text-color,
+  $checkbox-border-color-focused,
+  $treeview-item-selected-color,
+  $treeview-item-selected-bg,
+  $treeview-focused-bg,
+  $treeview-focus-color,
+  $fluent-treeview-item-border-radius
+);
+@include treeview-aux-items(
+  $fluent-treeview-searchbox-margin-bottom,
+  $fluent-treeview-search-editor-height,
+  $treeview-border-color,
+  $fluent-select-all-item-padding,
+  $fluent-treeview-item-element-gap,
+  $fluent-select-all-item-border-visible-padding,
+  $fluent-treeview-container-padding,
+  $fluent-treeview-load-indicator-size,
+);
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_sizes.scss
new file mode 100644
index 000000000000..2c68d35addad
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/treeView/_sizes.scss
@@ -0,0 +1,51 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-treeview-toggle-item-width: null !default;
+$fluent-treeview-item-height: null !default;
+$fluent-checkbox-container-size: null !default;
+$fluent-treeview-container-with-border-offset: ds.$spacing-80;
+$fluent-treeview-item-element-gap: ds.$spacing-80 !default;
+$fluent-treeview-item-margin: ds.$spacing-10 0;
+$fluent-treeview-item-border-radius: ds.$border-radius-40;
+$fluent-treeview-border-padding: ds.$spacing-10;
+$fluent-treeview-container-padding:
+  $fluent-treeview-border-padding
+  $fluent-treeview-border-padding
+  $fluent-treeview-border-padding
+  $fluent-treeview-container-with-border-offset;
+
+$fluent-treeview-checkbox-offset: null !default;
+$fluent-select-all-item-padding: null !default;
+$fluent-treeview-item-padding: null !default;
+$fluent-treeview-load-indicator-size: null !default;
+$fluent-treeview-searchbox-margin-bottom: null !default;
+$fluent-treeview-search-editor-height: null !default;
+$fluent-treeview-item-side-padding: ds.$spacing-120 !default;
+$fluent-select-all-item-border-visible-padding: ds.$spacing-260 !default;
+
+@if $size == "default" {
+  $fluent-treeview-item-height: ds.$spacing-440 !default;
+  $fluent-treeview-toggle-item-width: ds.$spacing-200 !default;
+  $fluent-checkbox-container-size: ds.$spacing-200 !default;
+  $fluent-treeview-checkbox-offset: 42px !default; // dx-offscale: 42px
+  $fluent-select-all-item-padding: ds.$spacing-150 42px !default; // dx-offscale: 42px
+  $fluent-treeview-item-padding: ds.$spacing-120 $fluent-treeview-item-side-padding !default;
+  $fluent-treeview-load-indicator-size: ds.$spacing-200 !default;
+  $fluent-treeview-searchbox-margin-bottom: ds.$spacing-80 !default;
+  $fluent-treeview-search-editor-height: ds.$spacing-480;
+}
+
+@else if $size == "compact" {
+  $fluent-treeview-item-height: ds.$spacing-320 !default;
+  $fluent-treeview-toggle-item-width: ds.$spacing-160 !default;
+  $fluent-treeview-checkbox-offset: ds.$spacing-360 !default;
+  $fluent-checkbox-container-size: ds.$spacing-160 !default;
+  $fluent-select-all-item-padding: ds.$spacing-100 $fluent-treeview-checkbox-offset !default;
+  $fluent-treeview-item-padding: ds.$spacing-100 $fluent-treeview-item-side-padding !default;
+  $fluent-treeview-load-indicator-size: ds.$spacing-160 !default;
+  $fluent-treeview-searchbox-margin-bottom: ds.$spacing-40 !default;
+  $fluent-treeview-search-editor-height: ds.$spacing-320;
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_colors.scss
new file mode 100644
index 000000000000..4e781991475d
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_colors.scss
@@ -0,0 +1,6 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$typography-typography-bg: ds.$color-surface-neutral-default-rest !default;
+$typography-typography-link-color: ds.$color-content-primary-default-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_index.scss
new file mode 100644
index 000000000000..787dd47567d8
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_index.scss
@@ -0,0 +1,69 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../common/mixins" as *;
+@use "mixins" as *;
+
+// adduse
+
+.dx-theme-dxdsfluent-typography {
+  background-color: $typography-typography-bg;
+
+  @include dx-base-typography();
+
+  h1 {
+    font-weight: $fluent-h1-font-weight;
+    font-size: $fluent-h1-font-size;
+  }
+
+  h2 {
+    font-weight: $fluent-h2-font-weight;
+    font-size: $fluent-h2-font-size;
+  }
+
+  h3 {
+    font-weight: $fluent-h3-font-weight;
+    font-size: $fluent-h3-font-size;
+  }
+
+  h4 {
+    font-weight: $fluent-h4-font-weight;
+    font-size: $fluent-h4-font-size;
+  }
+
+  h5 {
+    font-weight: $fluent-h5-font-weight;
+    font-size: $fluent-h5-font-size;
+  }
+
+  h6 {
+    font-weight: $fluent-h6-font-weight;
+    font-size: $fluent-h6-font-size;
+  }
+
+  .dx-font-xl {
+    font-size: $fluent-xl-font-size;
+  }
+
+  .dx-font-l {
+    font-size: $fluent-l-font-size;
+  }
+
+  .dx-font-m {
+    font-size: $fluent-m-font-size;
+  }
+
+  .dx-font-s {
+    @include dx-s-font-mixin();
+  }
+
+  small,
+  .dx-font-xs {
+    font-size: $fluent-xs-font-size;
+  }
+
+  a {
+    color: $typography-typography-link-color;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_mixins.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_mixins.scss
new file mode 100644
index 000000000000..49b2ac1f1249
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_mixins.scss
@@ -0,0 +1,5 @@
+@use "sizes" as *;
+
+@mixin dx-s-font-mixin() {
+  font-size: $fluent-s-font-size;
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_sizes.scss
new file mode 100644
index 000000000000..6c4bfea5adca
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/typography/_sizes.scss
@@ -0,0 +1,74 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-xl-font-size: null !default;
+$fluent-l-font-size: null !default;
+$fluent-m-font-size: null !default;
+$fluent-s-font-size: null !default;
+$fluent-xs-font-size: null !default;
+$fluent-h1-font-size: null !default;
+$fluent-h2-font-size: null !default;
+$fluent-h3-font-size: null !default;
+$fluent-h4-font-size: null !default;
+$fluent-h5-font-size: null !default;
+$fluent-h6-font-size: null !default;
+
+/*
+ * The xl/l/m/s/xs classes are raw size utilities (.dx-font-*), not text roles —
+ * they intentionally stay on the base scale. Headings map to semantic headline
+ * roles where a role with the exact legacy value exists (see TOKENS_MIGRATION.md).
+ */
+@if $size == "default" {
+  $fluent-xl-font-size: ds.$spacing-340 !default;
+  $fluent-l-font-size: ds.$font-size-280 !default;
+  $fluent-m-font-size: ds.$font-size-200 !default;
+  $fluent-s-font-size: ds.$font-size-180 !default;
+  $fluent-xs-font-size: ds.$font-size-120 !default;
+
+  $fluent-h1-font-size: ds.$font-size-headline-xl !default;
+  $fluent-h2-font-size: ds.$font-size-360 !default; // dx-no-semantic-role: 360 is off the font-size-role scale
+  $fluent-h3-font-size: ds.$font-size-headline-lg !default;
+  $fluent-h4-font-size: ds.$font-size-260 !default; // dx-no-semantic-role: 260 is off the font-size-role scale
+  $fluent-h5-font-size: ds.$font-size-220 !default; // dx-no-semantic-role: 220 is off the font-size-role scale
+  $fluent-h6-font-size: ds.$font-size-220 !default; // dx-no-semantic-role: 220 is off the font-size-role scale
+}
+
+@else if $size == "compact" {
+  $fluent-xl-font-size: ds.$font-size-240 !default;
+  $fluent-l-font-size: ds.$font-size-200 !default;
+  $fluent-m-font-size: ds.$font-size-160 !default;
+  $fluent-s-font-size: ds.$font-size-140 !default;
+  $fluent-xs-font-size: ds.$font-size-120 !default;
+
+  $fluent-h1-font-size: ds.$font-size-headline-lg !default;
+  $fluent-h2-font-size: ds.$font-size-280 !default; // dx-no-semantic-role: default branch (360) is off the role scale
+  $fluent-h3-font-size: ds.$font-size-headline-sm !default;
+  $fluent-h4-font-size: ds.$font-size-200 !default; // dx-no-semantic-role: default branch (260) is off the role scale
+  $fluent-h5-font-size: ds.$font-size-160 !default; // dx-no-semantic-role: default branch (220) is off the role scale
+  $fluent-h6-font-size: ds.$font-size-160 !default; // dx-no-semantic-role: default branch (220) is off the role scale
+}
+
+:root {
+  --dx-font-size-heading-1: #{$fluent-h1-font-size};
+  --dx-font-size-heading-2: #{$fluent-h2-font-size};
+  --dx-font-size-heading-3: #{$fluent-h3-font-size};
+  --dx-font-size-heading-4: #{$fluent-h4-font-size};
+  --dx-font-size-heading-5: #{$fluent-h5-font-size};
+  --dx-font-size-heading-6: #{$fluent-h6-font-size};
+  --dx-font-size-xl: #{$fluent-xl-font-size};
+  --dx-font-size-lg: #{$fluent-l-font-size};
+  --dx-font-size-md: #{$fluent-m-font-size};
+  --dx-font-size-sm: #{$fluent-s-font-size};
+  --dx-font-size-xs: #{$fluent-xs-font-size};
+}
+
+
+// Values hoisted from style-file literals (tokenized)
+$fluent-h1-font-weight: ds.$font-weight-headline-default !default;
+$fluent-h2-font-weight: ds.$font-weight-headline-default !default;
+$fluent-h3-font-weight: ds.$font-weight-headline-default !default;
+$fluent-h4-font-weight: ds.$font-weight-headline-default !default;
+$fluent-h5-font-weight: ds.$font-weight-headline-strong !default;
+$fluent-h6-font-weight: ds.$font-weight-500 !default; // dx-no-semantic-role: 500 is off the weight-role scale (400/600/700)
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_colors.scss
new file mode 100644
index 000000000000..bb50421c8549
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_colors.scss
@@ -0,0 +1,7 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$validation-message-color: ds.$color-content-neutral-default-static-dark-rest !default;
+$validation-message-background-color: ds.$color-surface-danger-default-rest !default;
+$validation-summary-color: ds.$color-content-danger-default-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_index.scss
new file mode 100644
index 000000000000..194b1e859c8f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_index.scss
@@ -0,0 +1,23 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/validation" as *;
+@use "../textEditor/sizes" as *;
+
+// adduse
+@use "../overlay";
+@include dx-base-validation(
+  $validation-summary-color,
+  $validation-message-color,
+  $validation-message-background-color,
+  $fluent-validation-overlay-border-radius
+);
+@include dx-modern-styles-validation(
+  $fluent-validation-message-font-size,
+  $fluent-validation-message-line-height,
+  $fluent-filled-texteditor-input-horizontal-padding,
+  $fluent-validationsummary-item-margin,
+  $fluent-validation-message-vertical-padding,
+  $fluent-validation-message-horizontal-padding,
+);
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_sizes.scss
new file mode 100644
index 000000000000..e6253e306d1b
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/validation/_sizes.scss
@@ -0,0 +1,29 @@
+@use "../sizes" as *;
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$fluent-validation-message-padding: null !default;
+$fluent-validationsummary-item-margin: null !default;
+$fluent-validation-message-line-height: null !default;
+$fluent-validation-message-horizontal-padding: null !default;
+
+$fluent-validation-overlay-border-radius: ds.$border-radius-40 !default;
+$fluent-validation-message-vertical-padding: ds.$spacing-40 !default;
+$fluent-validation-message-font-size: ds.$font-size-caption-md !default;
+
+@if $size == "default" {
+  $fluent-validation-message-padding: ds.$spacing-60 !default;
+  $fluent-validationsummary-item-margin: ds.$spacing-60 !default;
+
+  $fluent-validation-message-horizontal-padding: ds.$spacing-80 !default;
+  $fluent-validation-message-line-height: ds.$line-height-160 !default; // dx-no-semantic-role: compact branch (120) is off the role scale
+}
+
+@else if $size == "compact" {
+  $fluent-validation-message-padding: ds.$spacing-40 !default;
+  $fluent-validationsummary-item-margin: ds.$spacing-40 !default;
+
+  $fluent-validation-message-horizontal-padding: ds.$spacing-60 !default;
+  $fluent-validation-message-line-height: ds.$line-height-120 !default; // dx-no-semantic-role: 120 is off the line-height-role scale
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_colors.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_colors.scss
new file mode 100644
index 000000000000..5c18d4c6a0c8
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_colors.scss
@@ -0,0 +1,5 @@
+@use "../../../_design-system/variables/ds" as ds;
+
+// adduse
+
+$widget-bg: ds.$color-surface-neutral-default-rest !default;
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_index.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_index.scss
new file mode 100644
index 000000000000..76c11fdf18c5
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_index.scss
@@ -0,0 +1,27 @@
+@use "sass:color";
+@use "colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../common/mixins" as *;
+@use "../../base/widget";
+
+// adduse
+
+.dx-widget {
+  @include dx-base-typography();
+}
+
+.dx-state-disabled {
+  &.dx-widget,
+  .dx-widget {
+    .dx-widget {
+      opacity: 1;
+    }
+
+    @include disabled-widget();
+  }
+}
+
+.dx-surface {
+  background-color: $widget-bg;
+}
diff --git a/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_sizes.scss b/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_sizes.scss
new file mode 100644
index 000000000000..43b104010f9e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/dxdsfluent/widget/_sizes.scss
@@ -0,0 +1,4 @@
+@use "../sizes" as *;
+
+// adduse
+
diff --git a/packages/devextreme-scss/tests/unused-elements.test.ts b/packages/devextreme-scss/tests/unused-elements.test.ts
index 01b22c670cba..6a0588159061 100644
--- a/packages/devextreme-scss/tests/unused-elements.test.ts
+++ b/packages/devextreme-scss/tests/unused-elements.test.ts
@@ -49,7 +49,9 @@ const removeAllCommentsFromContent = (content: string): string => content
 
 const extractVariables = (filePath: string): string[] => {
   const content = removeAllCommentsFromContent(readFileSync(filePath, 'utf8'));
-  const regex = new RegExp(`\\$[${VAR_NAME_CHARS}]+`, 'g');
+  // `ds.$…` references point to the generated design-tokens module
+  // (scss/_design-system/variables/_ds.scss) and are not theme-local variables.
+  const regex = new RegExp(`(?<!ds\\.)\\$[${VAR_NAME_CHARS}]+`, 'g');
   return content.match(regex) ?? [];
 };
 
@@ -85,7 +87,7 @@ test('There are no unused images in repository', () => {
   expect(fullImagesFileList).toEqual(usedImagesFileList);
 });
 
-['generic', 'material', 'fluent'].forEach((themeName) => {
+['generic', 'material', 'fluent', 'dxdsfluent'].forEach((themeName) => {
   test(`There are no unused variables in ${themeName} SCSS files`, () => {
     const baseScssFiles = getFilesFromDirectory(join('scss', 'widgets', 'base'), ['.scss'])
       .map((fileName) => resolve(fileName));
@@ -102,10 +104,16 @@ test('There are no unused images in repository', () => {
 
     const uniqueVariables = findUniqueVariables(variables);
 
-    const exclusions: { generic: string[]; material: string[]; fluent: string[] } = {
+    const exclusions: {
+      generic: string[];
+      material: string[];
+      fluent: string[];
+      dxdsfluent: string[];
+    } = {
       generic: [],
       material: [],
       fluent: [],
+      dxdsfluent: [],
     };
 
     expect(uniqueVariables).toEqual(exclusions[themeName]);
diff --git a/packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/m_field_chooser.ts b/packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/m_field_chooser.ts
index b9278b15106f..4144a191d29a 100644
--- a/packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/m_field_chooser.ts
+++ b/packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/m_field_chooser.ts
@@ -97,7 +97,7 @@ export class FieldChooser extends FieldChooserBase {
         layout: 0,
         dataSource: null,
         encodeHtml: true,
-        onContextMenuPreparing: null,
+        onContextMenuPreparing: undefined,
         allowSearch: false,
         searchTimeout: 500,
         texts: {
diff --git a/packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/m_field_chooser_base.ts b/packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/m_field_chooser_base.ts
index d901fff7e551..85897bb20c14 100644
--- a/packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/m_field_chooser_base.ts
+++ b/packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/m_field_chooser_base.ts
@@ -124,7 +124,7 @@ export class FieldChooserBase extends mixinWidget {
       ...{
         allowFieldDragging: true,
         applyChangesMode: 'instantly',
-        state: null,
+        state: undefined,
         headerFilter: {
           width: 252,
           height: 325,
diff --git a/packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts b/packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts
index f122d1881117..1f0416414458 100644
--- a/packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts
+++ b/packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts
@@ -211,7 +211,7 @@ class PivotGrid extends Widget {
         height: 600,
         applyChangesMode: 'instantly',
       },
-      onContextMenuPreparing: null,
+      onContextMenuPreparing: undefined,
       allowSorting: false,
       allowSortingBySummary: false,
       allowFiltering: false,
@@ -268,13 +268,13 @@ class PivotGrid extends Widget {
         exportToExcel: localizationMessage.format('dxDataGrid-exportToExcel'),
         dataNotAvailable: localizationMessage.format('dxPivotGrid-dataNotAvailable'),
       },
-      onCellClick: null,
-      onCellPrepared: null,
+      onCellClick: undefined,
+      onCellPrepared: undefined,
       showBorders: false,
 
       stateStoring: {
         enabled: false,
-        storageKey: null,
+        storageKey: undefined,
         type: 'localStorage',
         customLoad: null,
         customSave: null,
@@ -283,7 +283,7 @@ class PivotGrid extends Widget {
 
       onExpandValueChanging: null,
       renderCellCountLimit: 20000,
-      onExporting: null,
+      onExporting: undefined,
       headerFilter: {
         width: 252,
         height: 325,
diff --git a/packages/devextreme/js/ui/pivot_grid.d.ts b/packages/devextreme/js/ui/pivot_grid.d.ts
index 15f4c7a7e798..0f4530d96ae1 100644
--- a/packages/devextreme/js/ui/pivot_grid.d.ts
+++ b/packages/devextreme/js/ui/pivot_grid.d.ts
@@ -516,35 +516,35 @@ export interface dxPivotGridOptions extends WidgetOptions<dxPivotGrid> {
     /**
      * @docid
      * @type_function_param1 e:{ui/pivot_grid:CellClickEvent}
-     * @default null
+     * @default undefined
      * @action
      * @public
      */
-    onCellClick?: ((e: CellClickEvent) => void);
+    onCellClick?: ((e: CellClickEvent) => void) | undefined;
     /**
      * @docid
      * @type_function_param1 e:{ui/pivot_grid:CellPreparedEvent}
-     * @default null
+     * @default undefined
      * @action
      * @public
      */
-    onCellPrepared?: ((e: CellPreparedEvent) => void);
+    onCellPrepared?: ((e: CellPreparedEvent) => void) | undefined;
     /**
      * @docid
      * @type_function_param1 e:{ui/pivot_grid:ContextMenuPreparingEvent}
-     * @default null
+     * @default undefined
      * @action
      * @public
      */
-    onContextMenuPreparing?: ((e: ContextMenuPreparingEvent) => void);
+    onContextMenuPreparing?: ((e: ContextMenuPreparingEvent) => void) | undefined;
     /**
      * @docid
      * @type_function_param1 e:{ui/pivot_grid:ExportingEvent}
-     * @default null
+     * @default undefined
      * @action
      * @public
      */
-    onExporting?: ((e: ExportingEvent) => void);
+    onExporting?: ((e: ExportingEvent) => void) | undefined;
     /**
      * @docid
      * @default "standard"
@@ -631,9 +631,9 @@ export interface dxPivotGridOptions extends WidgetOptions<dxPivotGrid> {
       savingTimeout?: number;
       /**
        * @docid
-       * @default null
+       * @default undefined
        */
-      storageKey?: string;
+      storageKey?: string | undefined;
       /**
        * @docid
        * @default "localStorage"
diff --git a/packages/devextreme/js/ui/pivot_grid/data_source.d.ts b/packages/devextreme/js/ui/pivot_grid/data_source.d.ts
index f6cb506ead28..d336a9d855c1 100644
--- a/packages/devextreme/js/ui/pivot_grid/data_source.d.ts
+++ b/packages/devextreme/js/ui/pivot_grid/data_source.d.ts
@@ -173,7 +173,7 @@ export interface PivotGridDataSourceOptions {
      * @default undefined
      * @public
      */
-    fields?: Array<Field>;
+    fields?: Array<Field> | undefined;
     /**
      * @docid
      * @type Filter expression
@@ -293,7 +293,6 @@ export interface PivotGridDataSourceField {
     area?: PivotGridArea | undefined;
     /**
      * @docid PivotGridDataSourceOptions.fields.areaIndex
-     * @default undefined
      * @public
      */
     areaIndex?: number;
@@ -304,13 +303,11 @@ export interface PivotGridDataSourceField {
     calculateCustomSummary?: ((options: { summaryProcess?: string; value?: any; totalValue?: any }) => void);
     /**
      * @docid PivotGridDataSourceOptions.fields.calculateSummaryValue
-     * @default undefined
      * @public
      */
     calculateSummaryValue?: ((e: dxPivotGridSummaryCell) => number | null);
     /**
      * @docid PivotGridDataSourceOptions.fields.caption
-     * @default undefined
      * @public
      */
     caption?: string;
@@ -321,19 +318,16 @@ export interface PivotGridDataSourceField {
     customizeText?: ((cellInfo: { value?: string | number | Date; valueText?: string }) => string);
     /**
      * @docid PivotGridDataSourceOptions.fields.dataField
-     * @default undefined
      * @public
      */
     dataField?: string;
     /**
      * @docid PivotGridDataSourceOptions.fields.dataType
-     * @default undefined
      * @public
      */
     dataType?: PivotGridDataType;
     /**
      * @docid PivotGridDataSourceOptions.fields.displayFolder
-     * @default undefined
      * @public
      */
     displayFolder?: string;
@@ -351,7 +345,6 @@ export interface PivotGridDataSourceField {
     filterType?: FilterType;
     /**
      * @docid PivotGridDataSourceOptions.fields.filterValues
-     * @default undefined
      * @public
      */
     filterValues?: Array<any>;
@@ -363,19 +356,16 @@ export interface PivotGridDataSourceField {
     format?: Format;
     /**
      * @docid PivotGridDataSourceOptions.fields.groupIndex
-     * @default undefined
      * @public
      */
     groupIndex?: number;
     /**
      * @docid PivotGridDataSourceOptions.fields.groupInterval
-     * @default undefined
      * @public
      */
     groupInterval?: PivotGridGroupInterval | number;
     /**
      * @docid PivotGridDataSourceOptions.fields.groupName
-     * @default undefined
      * @public
      */
     groupName?: string;
@@ -399,26 +389,22 @@ export interface PivotGridDataSourceField {
     };
     /**
      * @docid PivotGridDataSourceOptions.fields.isMeasure
-     * @default undefined
      * @public
      */
     isMeasure?: boolean;
     /**
      * @docid PivotGridDataSourceOptions.fields.name
-     * @default undefined
      * @public
      */
     name?: string;
     /**
      * @docid PivotGridDataSourceOptions.fields.runningTotal
-     * @default undefined
      * @public
      */
     runningTotal?: PivotGridRunningTotalMode;
     /**
      * @docid PivotGridDataSourceOptions.fields.selector
      * @type function(data)
-     * @default undefined
      * @public
      */
     selector?: Function;
@@ -436,25 +422,21 @@ export interface PivotGridDataSourceField {
     showTotals?: boolean;
     /**
      * @docid PivotGridDataSourceOptions.fields.showValues
-     * @default undefined
      * @public
      */
     showValues?: boolean;
     /**
      * @docid PivotGridDataSourceOptions.fields.sortBy
-     * @default undefined
      * @public
      */
     sortBy?: PivotGridSortBy;
     /**
      * @docid PivotGridDataSourceOptions.fields.sortBySummaryField
-     * @default undefined
      * @public
      */
     sortBySummaryField?: string;
     /**
      * @docid PivotGridDataSourceOptions.fields.sortBySummaryPath
-     * @default undefined
      * @public
      */
     sortBySummaryPath?: Array<number | string>;
@@ -466,13 +448,11 @@ export interface PivotGridDataSourceField {
     sortOrder?: SortOrder;
     /**
      * @docid PivotGridDataSourceOptions.fields.sortingMethod
-     * @default undefined
      * @public
      */
     sortingMethod?: ((a: { value?: string | number; children?: Array<any> }, b: { value?: string | number; children?: Array<any> }) => number);
     /**
      * @docid PivotGridDataSourceOptions.fields.summaryDisplayMode
-     * @default undefined
      * @public
      */
     summaryDisplayMode?: PivotGridSummaryDisplayMode;
@@ -490,13 +470,11 @@ export interface PivotGridDataSourceField {
     visible?: boolean;
     /**
      * @docid PivotGridDataSourceOptions.fields.width
-     * @default undefined
      * @public
      */
     width?: number;
     /**
      * @docid PivotGridDataSourceOptions.fields.wordWrapEnabled
-     * @default undefined
      * @public
      */
     wordWrapEnabled?: boolean;
diff --git a/packages/devextreme/js/ui/pivot_grid_field_chooser.d.ts b/packages/devextreme/js/ui/pivot_grid_field_chooser.d.ts
index b102bf191fb3..8dec03205fdf 100644
--- a/packages/devextreme/js/ui/pivot_grid_field_chooser.d.ts
+++ b/packages/devextreme/js/ui/pivot_grid_field_chooser.d.ts
@@ -193,12 +193,12 @@ export interface dxPivotGridFieldChooserOptions extends WidgetOptions<dxPivotGri
     /**
      * @docid
      * @type_function_param1 e:{ui/pivot_grid_field_chooser:ContextMenuPreparingEvent}
-     * @default null
+     * @default undefined
 
      * @action
      * @public
      */
-    onContextMenuPreparing?: ((e: ContextMenuPreparingEvent) => void);
+    onContextMenuPreparing?: ((e: ContextMenuPreparingEvent) => void) | undefined;
     /**
      * @docid
      * @default 500
@@ -207,10 +207,10 @@ export interface dxPivotGridFieldChooserOptions extends WidgetOptions<dxPivotGri
     searchTimeout?: number;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @public
      */
-    state?: any;
+    state?: any | undefined;
     /**
      * @docid
      * @public
diff --git a/packages/devextreme/js/ui/scheduler.d.ts b/packages/devextreme/js/ui/scheduler.d.ts
index e7bcc32063fd..e1ed7c0125d4 100644
--- a/packages/devextreme/js/ui/scheduler.d.ts
+++ b/packages/devextreme/js/ui/scheduler.d.ts
@@ -593,11 +593,11 @@ export interface dxSchedulerOptions extends WidgetOptions<dxScheduler> {
     customizeDateNavigatorText?: ((info: DateNavigatorTextInfo) => string) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 itemData:object
      * @public
      */
-    dataCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement);
+    dataCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement) | undefined;
     /**
      * @docid
      * @default null
@@ -607,11 +607,11 @@ export interface dxSchedulerOptions extends WidgetOptions<dxScheduler> {
     dataSource?: DataSourceLike<Appointment> | null;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 itemData:object
      * @public
      */
-    dateCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement);
+    dateCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement) | undefined;
     /**
      * @docid
      * @default undefined
@@ -754,113 +754,113 @@ export interface dxSchedulerOptions extends WidgetOptions<dxScheduler> {
     noDataText?: string;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/scheduler:AppointmentAddedEvent}
      * @action
      * @public
      */
-    onAppointmentAdded?: ((e: AppointmentAddedEvent) => void);
+    onAppointmentAdded?: ((e: AppointmentAddedEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/scheduler:AppointmentAddingEvent}
      * @action
      * @public
      */
-    onAppointmentAdding?: ((e: AppointmentAddingEvent) => void);
+    onAppointmentAdding?: ((e: AppointmentAddingEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type function
      * @type_function_param1 e:{ui/scheduler:AppointmentClickEvent}
      * @action
      * @public
      */
-    onAppointmentClick?: ((e: AppointmentClickEvent) => void) | string;
+    onAppointmentClick?: ((e: AppointmentClickEvent) => void) | string | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type function
      * @type_function_param1 e:{ui/scheduler:AppointmentContextMenuEvent}
      * @action
      * @public
      */
-    onAppointmentContextMenu?: ((e: AppointmentContextMenuEvent) => void) | string;
+    onAppointmentContextMenu?: ((e: AppointmentContextMenuEvent) => void) | string | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type function
      * @type_function_param1 e:{ui/scheduler:AppointmentDblClickEvent}
      * @action
      * @public
      */
-    onAppointmentDblClick?: ((e: AppointmentDblClickEvent) => void) | string;
+    onAppointmentDblClick?: ((e: AppointmentDblClickEvent) => void) | string | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/scheduler:AppointmentDeletedEvent}
      * @action
      * @public
      */
-    onAppointmentDeleted?: ((e: AppointmentDeletedEvent) => void);
+    onAppointmentDeleted?: ((e: AppointmentDeletedEvent) => void) | undefined;
 
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/scheduler:AppointmentDeletingEvent}
      * @action
      * @public
      */
-    onAppointmentDeleting?: ((e: AppointmentDeletingEvent) => void);
+    onAppointmentDeleting?: ((e: AppointmentDeletingEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/scheduler:AppointmentTooltipShowingEvent}
      * @action
      * @public
      */
-    onAppointmentTooltipShowing?: ((e: AppointmentTooltipShowingEvent) => void);
+    onAppointmentTooltipShowing?: ((e: AppointmentTooltipShowingEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/scheduler:AppointmentFormOpeningEvent}
      * @action
      * @public
      */
-    onAppointmentFormOpening?: ((e: AppointmentFormOpeningEvent) => void);
+    onAppointmentFormOpening?: ((e: AppointmentFormOpeningEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/scheduler:AppointmentRenderedEvent}
      * @action
      * @public
      */
-    onAppointmentRendered?: ((e: AppointmentRenderedEvent) => void);
+    onAppointmentRendered?: ((e: AppointmentRenderedEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/scheduler:AppointmentUpdatedEvent}
      * @action
      * @public
      */
-    onAppointmentUpdated?: ((e: AppointmentUpdatedEvent) => void);
+    onAppointmentUpdated?: ((e: AppointmentUpdatedEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/scheduler:AppointmentUpdatingEvent}
      * @action
      * @public
      */
-    onAppointmentUpdating?: ((e: AppointmentUpdatingEvent) => void);
+    onAppointmentUpdating?: ((e: AppointmentUpdatingEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type function
      * @type_function_param1 e:{ui/scheduler:CellClickEvent}
      * @action
      * @public
      */
-    onCellClick?: ((e: CellClickEvent) => void) | string;
+    onCellClick?: ((e: CellClickEvent) => void) | string | undefined;
     /**
      * @docid
      * @default undefined
@@ -871,13 +871,13 @@ export interface dxSchedulerOptions extends WidgetOptions<dxScheduler> {
     onSelectionEnd?: ((e: SelectionEndEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type function
      * @type_function_param1 e:{ui/scheduler:CellContextMenuEvent}
      * @action
      * @public
      */
-    onCellContextMenu?: ((e: CellContextMenuEvent) => void) | string;
+    onCellContextMenu?: ((e: CellContextMenuEvent) => void) | string | undefined;
     /**
      * @docid
      * @default "dialog"
@@ -904,11 +904,11 @@ export interface dxSchedulerOptions extends WidgetOptions<dxScheduler> {
     remoteFiltering?: boolean;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 itemData:object
      * @public
      */
-    resourceCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement);
+    resourceCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement) | undefined;
     /**
      * @docid
      * @default []
@@ -1019,11 +1019,11 @@ export interface dxSchedulerOptions extends WidgetOptions<dxScheduler> {
     textExpr?: string;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 itemData:object
      * @public
      */
-    timeCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement);
+    timeCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement) | undefined;
     /**
      * @docid
      * @default ""
@@ -1094,13 +1094,11 @@ export interface dxSchedulerOptions extends WidgetOptions<dxScheduler> {
       cellDuration?: number;
       /**
        * @docid
-       * @default null
        * @type_function_param1 itemData:object
        */
       dataCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement);
       /**
        * @docid
-       * @default null
        * @type_function_param1 itemData:object
        */
       dateCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement);
@@ -1150,7 +1148,6 @@ export interface dxSchedulerOptions extends WidgetOptions<dxScheduler> {
       name?: string | undefined;
       /**
        * @docid
-       * @default null
        * @type_function_param1 itemData:object
        */
       resourceCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement);
@@ -1166,7 +1163,6 @@ export interface dxSchedulerOptions extends WidgetOptions<dxScheduler> {
       startDayHour?: number;
       /**
        * @docid
-       * @default null
        * @type_function_param1 itemData:object
        */
       timeCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement);
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/fieldChooser.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/fieldChooser.tests.js
index f3b54ed0e922..d400f8525f96 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/fieldChooser.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/fieldChooser.tests.js
@@ -2473,7 +2473,7 @@ QUnit.module('applyChangesMode: onDemand', {
 
         // assert
         assert.strictEqual(isCanceled, false, 'cancelChanges return false');
-        assert.strictEqual(this.fieldChooser.option('state'), null, 'state is empty');
+        assert.strictEqual(this.fieldChooser.option('state'), undefined, 'state is empty');
     });
 
     QUnit.test('cancel changes on field chooser repaint', function(assert) {
diff --git a/packages/devextreme/ts/dx.all.d.ts b/packages/devextreme/ts/dx.all.d.ts
index 93083b2ebac1..5915004ab072 100644
--- a/packages/devextreme/ts/dx.all.d.ts
+++ b/packages/devextreme/ts/dx.all.d.ts
@@ -8082,7 +8082,7 @@ declare module DevExpress.data {
     /**
      * [descr:PivotGridDataSourceOptions.fields]
      */
-    fields?: Array<DevExpress.data.PivotGridDataSource.Field>;
+    fields?: Array<DevExpress.data.PivotGridDataSource.Field> | undefined;
     /**
      * [descr:PivotGridDataSourceOptions.filter]
      */
@@ -24773,9 +24773,11 @@ declare module DevExpress.ui {
     /**
      * [descr:dxPivotGridFieldChooserOptions.onContextMenuPreparing]
      */
-    onContextMenuPreparing?: (
-      e: DevExpress.ui.dxPivotGridFieldChooser.ContextMenuPreparingEvent
-    ) => void;
+    onContextMenuPreparing?:
+      | ((
+          e: DevExpress.ui.dxPivotGridFieldChooser.ContextMenuPreparingEvent
+        ) => void)
+      | undefined;
     /**
      * [descr:dxPivotGridFieldChooserOptions.searchTimeout]
      */
@@ -24783,7 +24785,7 @@ declare module DevExpress.ui {
     /**
      * [descr:dxPivotGridFieldChooserOptions.state]
      */
-    state?: any;
+    state?: any | undefined;
     /**
      * [descr:dxPivotGridFieldChooserOptions.texts]
      */
@@ -25069,21 +25071,27 @@ declare module DevExpress.ui {
     /**
      * [descr:dxPivotGridOptions.onCellClick]
      */
-    onCellClick?: (e: DevExpress.ui.dxPivotGrid.CellClickEvent) => void;
+    onCellClick?:
+      | ((e: DevExpress.ui.dxPivotGrid.CellClickEvent) => void)
+      | undefined;
     /**
      * [descr:dxPivotGridOptions.onCellPrepared]
      */
-    onCellPrepared?: (e: DevExpress.ui.dxPivotGrid.CellPreparedEvent) => void;
+    onCellPrepared?:
+      | ((e: DevExpress.ui.dxPivotGrid.CellPreparedEvent) => void)
+      | undefined;
     /**
      * [descr:dxPivotGridOptions.onContextMenuPreparing]
      */
-    onContextMenuPreparing?: (
-      e: DevExpress.ui.dxPivotGrid.ContextMenuPreparingEvent
-    ) => void;
+    onContextMenuPreparing?:
+      | ((e: DevExpress.ui.dxPivotGrid.ContextMenuPreparingEvent) => void)
+      | undefined;
     /**
      * [descr:dxPivotGridOptions.onExporting]
      */
-    onExporting?: (e: DevExpress.ui.dxPivotGrid.ExportingEvent) => void;
+    onExporting?:
+      | ((e: DevExpress.ui.dxPivotGrid.ExportingEvent) => void)
+      | undefined;
     /**
      * [descr:dxPivotGridOptions.rowHeaderLayout]
      */
@@ -25148,7 +25156,7 @@ declare module DevExpress.ui {
       /**
        * [descr:dxPivotGridOptions.stateStoring.storageKey]
        */
-      storageKey?: string;
+      storageKey?: string | undefined;
       /**
        * [descr:dxPivotGridOptions.stateStoring.type]
        */
@@ -26903,7 +26911,8 @@ declare module DevExpress.ui {
           itemData: any,
           itemIndex: number,
           itemElement: DevExpress.core.DxElement
-        ) => string | DevExpress.core.UserDefinedElement);
+        ) => string | DevExpress.core.UserDefinedElement)
+      | undefined;
     /**
      * [descr:dxSchedulerOptions.dataSource]
      */
@@ -26917,7 +26926,8 @@ declare module DevExpress.ui {
           itemData: any,
           itemIndex: number,
           itemElement: DevExpress.core.DxElement
-        ) => string | DevExpress.core.UserDefinedElement);
+        ) => string | DevExpress.core.UserDefinedElement)
+      | undefined;
     /**
      * [descr:dxSchedulerOptions.dateSerializationFormat]
      */
@@ -27022,82 +27032,86 @@ declare module DevExpress.ui {
     /**
      * [descr:dxSchedulerOptions.onAppointmentAdded]
      */
-    onAppointmentAdded?: (
-      e: DevExpress.ui.dxScheduler.AppointmentAddedEvent
-    ) => void;
+    onAppointmentAdded?:
+      | ((e: DevExpress.ui.dxScheduler.AppointmentAddedEvent) => void)
+      | undefined;
     /**
      * [descr:dxSchedulerOptions.onAppointmentAdding]
      */
-    onAppointmentAdding?: (
-      e: DevExpress.ui.dxScheduler.AppointmentAddingEvent
-    ) => void;
+    onAppointmentAdding?:
+      | ((e: DevExpress.ui.dxScheduler.AppointmentAddingEvent) => void)
+      | undefined;
     /**
      * [descr:dxSchedulerOptions.onAppointmentClick]
      */
     onAppointmentClick?:
       | ((e: DevExpress.ui.dxScheduler.AppointmentClickEvent) => void)
-      | string;
+      | string
+      | undefined;
     /**
      * [descr:dxSchedulerOptions.onAppointmentContextMenu]
      */
     onAppointmentContextMenu?:
       | ((e: DevExpress.ui.dxScheduler.AppointmentContextMenuEvent) => void)
-      | string;
+      | string
+      | undefined;
     /**
      * [descr:dxSchedulerOptions.onAppointmentDblClick]
      */
     onAppointmentDblClick?:
       | ((e: DevExpress.ui.dxScheduler.AppointmentDblClickEvent) => void)
-      | string;
+      | string
+      | undefined;
     /**
      * [descr:dxSchedulerOptions.onAppointmentDeleted]
      */
-    onAppointmentDeleted?: (
-      e: DevExpress.ui.dxScheduler.AppointmentDeletedEvent
-    ) => void;
+    onAppointmentDeleted?:
+      | ((e: DevExpress.ui.dxScheduler.AppointmentDeletedEvent) => void)
+      | undefined;
 
     /**
      * [descr:dxSchedulerOptions.onAppointmentDeleting]
      */
-    onAppointmentDeleting?: (
-      e: DevExpress.ui.dxScheduler.AppointmentDeletingEvent
-    ) => void;
+    onAppointmentDeleting?:
+      | ((e: DevExpress.ui.dxScheduler.AppointmentDeletingEvent) => void)
+      | undefined;
     /**
      * [descr:dxSchedulerOptions.onAppointmentTooltipShowing]
      */
-    onAppointmentTooltipShowing?: (
-      e: DevExpress.ui.dxScheduler.AppointmentTooltipShowingEvent
-    ) => void;
+    onAppointmentTooltipShowing?:
+      | ((e: DevExpress.ui.dxScheduler.AppointmentTooltipShowingEvent) => void)
+      | undefined;
     /**
      * [descr:dxSchedulerOptions.onAppointmentFormOpening]
      */
-    onAppointmentFormOpening?: (
-      e: DevExpress.ui.dxScheduler.AppointmentFormOpeningEvent
-    ) => void;
+    onAppointmentFormOpening?:
+      | ((e: DevExpress.ui.dxScheduler.AppointmentFormOpeningEvent) => void)
+      | undefined;
     /**
      * [descr:dxSchedulerOptions.onAppointmentRendered]
      */
-    onAppointmentRendered?: (
-      e: DevExpress.ui.dxScheduler.AppointmentRenderedEvent
-    ) => void;
+    onAppointmentRendered?:
+      | ((e: DevExpress.ui.dxScheduler.AppointmentRenderedEvent) => void)
+      | undefined;
     /**
      * [descr:dxSchedulerOptions.onAppointmentUpdated]
      */
-    onAppointmentUpdated?: (
-      e: DevExpress.ui.dxScheduler.AppointmentUpdatedEvent
-    ) => void;
+    onAppointmentUpdated?:
+      | ((e: DevExpress.ui.dxScheduler.AppointmentUpdatedEvent) => void)
+      | undefined;
     /**
      * [descr:dxSchedulerOptions.onAppointmentUpdating]
      */
-    onAppointmentUpdating?: (
-      e: DevExpress.ui.dxScheduler.AppointmentUpdatingEvent
-    ) => void;
+    onAppointmentUpdating?:
+      | ((e: DevExpress.ui.dxScheduler.AppointmentUpdatingEvent) => void)
+      | undefined;
     /**
      * [descr:dxSchedulerOptions.onCellClick]
      */
     onCellClick?:
       | ((e: DevExpress.ui.dxScheduler.CellClickEvent) => void)
-      | string;
+      | string
+      | undefined;
     /**
      * [descr:dxSchedulerOptions.onSelectionEnd]
      */
@@ -27109,7 +27123,8 @@ declare module DevExpress.ui {
      */
     onCellContextMenu?:
       | ((e: DevExpress.ui.dxScheduler.CellContextMenuEvent) => void)
-      | string;
+      | string
+      | undefined;
     /**
      * [descr:dxSchedulerOptions.recurrenceEditMode]
      */
@@ -27135,7 +27150,8 @@ declare module DevExpress.ui {
           itemData: any,
           itemIndex: number,
           itemElement: DevExpress.core.DxElement
-        ) => string | DevExpress.core.UserDefinedElement);
+        ) => string | DevExpress.core.UserDefinedElement)
+      | undefined;
     /**
      * [descr:dxSchedulerOptions.resources]
      */
@@ -27222,7 +27238,8 @@ declare module DevExpress.ui {
           itemData: any,
           itemIndex: number,
           itemElement: DevExpress.core.DxElement
-        ) => string | DevExpress.core.UserDefinedElement);
+        ) => string | DevExpress.core.UserDefinedElement)
+      | undefined;
     /**
      * [descr:dxSchedulerOptions.timeZone]
      */
diff --git a/packages/nx-infra-plugin/src/executors/scss-build/scss-build.impl.ts b/packages/nx-infra-plugin/src/executors/scss-build/scss-build.impl.ts
index a505502180a2..c25bdd1f9143 100644
--- a/packages/nx-infra-plugin/src/executors/scss-build/scss-build.impl.ts
+++ b/packages/nx-infra-plugin/src/executors/scss-build/scss-build.impl.ts
@@ -26,6 +26,11 @@ const DEFAULT_DEV_BUNDLE_NAMES = [
   'fluent.blue.dark',
   'fluent.saas.light',
   'fluent.saas.dark',
+  'dxdsfluent.blue.light',
+  'dxdsfluent.blue.light.compact',
+  'dxdsfluent.blue.dark',
+  'dxdsfluent.saas.light',
+  'dxdsfluent.saas.dark',
 ];
 
 interface BuildDependencies {
@@ -74,7 +79,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 === 'dxdsfluent' ? `.${theme}` : '')
     + `.${color}`
     + (mode ? `.${mode}` : '')
     + (size === 'default' ? '' : '.compact')
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0e6836447ceb..4babaa22c139 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1999,6 +1999,9 @@ importers:
 
   packages/devextreme-scss:
     devDependencies:
+      '@devexpress/design-tokens-internal':
+        specifier: 262.0.2
+        version: 262.0.2
       '@stylistic/stylelint-plugin':
         specifier: 3.1.3
         version: 3.1.3(stylelint@16.22.0(typescript@5.9.3))
@@ -2017,9 +2020,15 @@ importers:
       postcss:
         specifier: 8.5.10
         version: 8.5.10
+      safe-ts-transforms-fork:
+        specifier: 0.0.1
+        version: 0.0.1(style-dictionary@5.4.2(tslib@2.8.1))
       sass-embedded:
         specifier: 1.93.3
         version: 1.93.3
+      style-dictionary:
+        specifier: 5.4.2
+        version: 5.4.2(tslib@2.8.1)
       stylelint:
         specifier: 'catalog:'
         version: 16.22.0(typescript@5.9.3)
@@ -4078,6 +4087,18 @@ packages:
   '@bufbuild/protobuf@2.11.0':
     resolution: {integrity: sha512-sBXGT13cpmPR5BMgHE6UEEfEaShh5Ror6rfN3yEK5si7QVrtZg8LEPQb0VVhiLRUslD2yLnXtnRzG035J/mZXQ==}
 
+  '@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==}
 
@@ -4139,6 +4160,9 @@ packages:
   '@devexpress/callsite-record@4.1.7':
     resolution: {integrity: sha512-qr3VQYc0KopduFkEY6SxaOIi1Xhm0jIWQfrxxMVboI/p2rjF/Mj/iqaiUxQQP6F3ujpW/7l0mzhf17uwcFZhBA==}
 
+  '@devexpress/design-tokens-internal@262.0.2':
+    resolution: {integrity: sha512-2UrqNdaD5RvCoY1T5EQDKDe1uvUHJYRiOFXNbMxY90KwQ9VFwLyaUOJJcPXnSK3EnQDD1FZPexl/5zoe1WanqQ==}
+
   '@devexpress/utils@2.1.1':
     resolution: {integrity: sha512-hlemXR3L0yDPsMdhTQl9EtjiEYxIHklH7I4RKPkOhfrF5+jb4f3kkfvbKT7nA9aoFEHPPF0/hll43gOBpUpY0g==}
 
@@ -6802,6 +6826,9 @@ packages:
     peerDependencies:
       '@testing-library/dom': '>=7.21.4'
 
+  '@tokens-studio/types@0.5.2':
+    resolution: {integrity: sha512-rzMcZP0bj2E5jaa7Fj0LGgYHysoCrbrxILVbT0ohsCUH5uCHY/u6J7Qw/TE0n6gR9Js/c9ZO9T8mOoz0HdLMbA==}
+
   '@tootallnate/once@3.0.1':
     resolution: {integrity: sha512-VyMVKRrpHTT8PnotUeV8L/mDaMwD5DaAKCFLP73zAqAtvF0FCqky+Ki7BYbFCYQmqFyTe9316Ed5zS70QUR9eg==}
     engines: {node: '>= 10'}
@@ -7798,6 +7825,10 @@ packages:
   '@yarnpkg/lockfile@1.1.0':
     resolution: {integrity: sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==}
 
+  '@zip.js/zip.js@2.8.30':
+    resolution: {integrity: sha512-ig0aIElRmwDhe+tCyd/aAN9dluG0owGYjafCn7w4k/e+DHsit93yXLB+hBVgc8g/5jYp54L09LSECqEMNXNqgA==}
+    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
@@ -8200,6 +8231,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==}
 
@@ -9190,6 +9224,10 @@ packages:
   commondir@1.0.1:
     resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
 
+  component-emitter@2.0.0:
+    resolution: {integrity: sha512-4m5s3Me2xxlVKG9PkZpQqHQR7bgpnN7joDMJ4yvVkVXngjoITG76IaZmzmywSeRTeTpc6N6r3H3+KyUurV8OYw==}
+    engines: {node: '>=18'}
+
   compress-commons@6.0.2:
     resolution: {integrity: sha512-6FqVXeETqWPoGcfzrXb37E50NP0LXT8kAMu5ooZayhWWdgEY4lBEEcbQNXtkuKQsGduxiIcI4gOTsxTmuq/bSg==}
     engines: {node: '>= 14'}
@@ -11907,9 +11945,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-negated-glob@1.0.0:
     resolution: {integrity: sha512-czXVVn/QEmgvej1f50BZ648vUI+em0xqMq2Sn+QncCLN4zj1UAxlT+kw/6ggQTOaZPd1HqKQGEqbpQVtJucWug==}
     engines: {node: '>=0.10.0'}
@@ -14224,6 +14269,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==}
 
@@ -14354,6 +14405,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}
@@ -14440,6 +14495,9 @@ packages:
     resolution: {integrity: sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==}
     engines: {node: '>=4'}
 
+  postcss-value-parser@3.3.1:
+    resolution: {integrity: sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==}
+
   postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
@@ -15161,6 +15219,12 @@ packages:
     resolution: {integrity: sha512-b3rppTKm9T+PsVCBEOUR46GWI7fdOs00VKZ1+9c1EWDaDMvjQc6tUwuFyIprgGgTcWoVHSKrU8H31ZHA2e0RHA==}
     engines: {node: '>=10'}
 
+  safe-ts-transforms-fork@0.0.1:
+    resolution: {integrity: sha512-8iKn7XPZKPfCLdYFF0HvRF222CR8DGdEz1b3TYljgAftZsCEl+Wya43lbQXytTbiLHg3bvf1lsfBv0kfdNCKzQ==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      style-dictionary: ^5.0.0
+
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
@@ -15760,6 +15824,9 @@ packages:
   stream-splicer@2.0.1:
     resolution: {integrity: sha512-Xizh4/NPuYSyAXyT7g8IvdJ9HJpxIGL9PjyhtywCZvvP0OPIdqyrr4dMikeuvY8xahpdKEBlBTySe583totajg==}
 
+  stream@0.0.3:
+    resolution: {integrity: sha512-aMsbn7VKrl4A2T7QAQQbzgN7NVc70vgF5INQrBXqn4dCXN1zy3L9HGgLO5s7PExmdrzTJ8uR/27aviW8or8/+A==}
+
   streamfilter@3.0.0:
     resolution: {integrity: sha512-kvKNfXCmUyC8lAXSSHCIXBUlo/lhsLcCU/OmzACZYpRUdtKIH68xYhm/+HI15jFJYtNJGYtCgn2wmIiExY1VwA==}
     engines: {node: '>=8.12.0'}
@@ -15889,6 +15956,11 @@ packages:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
+  style-dictionary@5.4.2:
+    resolution: {integrity: sha512-Mienm46H28PWnydBiLFN7nR1QXqTO2FA+Aa/W7jcBJV8N0QGDDTfPQbb10TqwRybdY0rvp1G4pjdVM2HklGI0g==}
+    engines: {node: '>=22.0.0'}
+    hasBin: true
+
   style-loader@3.3.4:
     resolution: {integrity: sha512-0WqXzrsMTyb8yjZJHDqwmnwRJvhALK9LfRtRc6B4UTWe8AijYLZYZ9thuJTZc2VfQWINADW/j+LiJnfy2RoC1w==}
     engines: {node: '>= 12.13.0'}
@@ -16248,6 +16320,9 @@ packages:
   tiny-invariant@1.3.3:
     resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
 
+  tinycolor2@1.6.0:
+    resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==}
+
   tinyglobby@0.2.14:
     resolution: {integrity: sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==}
     engines: {node: '>=12.0.0'}
@@ -20239,6 +20314,36 @@ snapshots:
 
   '@bufbuild/protobuf@2.11.0': {}
 
+  '@bundled-es-modules/deepmerge@4.3.2':
+    dependencies:
+      deepmerge: 4.3.1
+
+  '@bundled-es-modules/glob@13.0.6':
+    dependencies:
+      buffer: 6.0.3
+      events: 3.3.0
+      glob: 13.0.6
+      path: 0.12.7
+      stream: 0.0.3
+      string_decoder: 1.3.0
+      url: 0.11.4
+
+  '@bundled-es-modules/memfs@4.17.0(tslib@2.8.1)':
+    dependencies:
+      assert: 2.1.0
+      buffer: 6.0.3
+      events: 3.3.0
+      memfs: 4.57.2(tslib@2.8.1)
+      path: 0.12.7
+      stream: 0.0.3
+      util: 0.12.5
+    transitivePeerDependencies:
+      - tslib
+
+  '@bundled-es-modules/postcss-calc-ast-parser@0.1.6':
+    dependencies:
+      postcss-calc-ast-parser: 0.1.4
+
   '@cacheable/memory@2.0.8':
     dependencies:
       '@cacheable/utils': 2.4.1
@@ -20302,6 +20407,8 @@ snapshots:
       lodash: 4.18.1
       pinkie-promise: 2.0.1
 
+  '@devexpress/design-tokens-internal@262.0.2': {}
+
   '@devexpress/utils@2.1.1':
     dependencies:
       tslib: 2.3.1
@@ -23798,6 +23905,8 @@ snapshots:
     dependencies:
       '@testing-library/dom': 10.4.1
 
+  '@tokens-studio/types@0.5.2': {}
+
   '@tootallnate/once@3.0.1': {}
 
   '@ts-morph/common@0.22.0':
@@ -25408,6 +25517,8 @@ snapshots:
 
   '@yarnpkg/lockfile@1.1.0': {}
 
+  '@zip.js/zip.js@2.8.30': {}
+
   '@zkochan/js-yaml@0.0.7':
     dependencies:
       argparse: 2.0.1
@@ -25847,6 +25958,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: {}
@@ -27111,6 +27230,8 @@ snapshots:
 
   commondir@1.0.1: {}
 
+  component-emitter@2.0.0: {}
+
   compress-commons@6.0.2:
     dependencies:
       crc-32: 1.2.2
@@ -30999,8 +31120,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-negated-glob@1.0.0: {}
 
   is-negative-zero@2.0.3: {}
@@ -34825,6 +34953,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: {}
@@ -34938,6 +35073,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
@@ -35014,6 +35153,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.10):
@@ -35922,6 +36063,15 @@ snapshots:
 
   safe-stable-stringify@2.5.0: {}
 
+  safe-ts-transforms-fork@0.0.1(style-dictionary@5.4.2(tslib@2.8.1)):
+    dependencies:
+      '@bundled-es-modules/deepmerge': 4.3.2
+      '@bundled-es-modules/postcss-calc-ast-parser': 0.1.6
+      '@tokens-studio/types': 0.5.2
+      colorjs.io: 0.5.2
+      is-mergeable-object: 1.1.1
+      style-dictionary: 5.4.2(tslib@2.8.1)
+
   safer-buffer@2.1.2: {}
 
   sanitize-filename@1.6.4:
@@ -36593,6 +36743,10 @@ snapshots:
       inherits: 2.0.4
       readable-stream: 2.3.8
 
+  stream@0.0.3:
+    dependencies:
+      component-emitter: 2.0.0
+
   streamfilter@3.0.0:
     dependencies:
       readable-stream: 3.6.2
@@ -36760,6 +36914,24 @@ snapshots:
 
   strip-json-comments@3.1.1: {}
 
+  style-dictionary@5.4.2(tslib@2.8.1):
+    dependencies:
+      '@bundled-es-modules/deepmerge': 4.3.2
+      '@bundled-es-modules/glob': 13.0.6
+      '@bundled-es-modules/memfs': 4.17.0(tslib@2.8.1)
+      '@zip.js/zip.js': 2.8.30
+      chalk: 5.6.2
+      change-case: 5.4.4
+      colorjs.io: 0.5.2
+      commander: 12.1.0
+      is-plain-obj: 4.1.0
+      json5: 2.2.3
+      path-unified: 0.2.0
+      prettier: 3.8.1
+      tinycolor2: 1.6.0
+    transitivePeerDependencies:
+      - tslib
+
   style-loader@3.3.4(webpack@5.105.4(@swc/core@1.15.30(@swc/helpers@0.5.21))):
     dependencies:
       webpack: 5.105.4(@swc/core@1.15.30(@swc/helpers@0.5.21))
@@ -37579,6 +37751,8 @@ snapshots:
 
   tiny-invariant@1.3.3: {}
 
+  tinycolor2@1.6.0: {}
+
   tinyglobby@0.2.14:
     dependencies:
       fdir: 6.5.0(picomatch@4.0.4)