DevExpress · EugeniyKiyashko · Jul 27, 2026 · Jul 31, 2026 · Jul 31, 2026 · Jul 31, 2026
@@ -122,6 +122,14 @@
             "matchPackageNames": [
                 "*"
             ]
+        },
+        {
+            "matchPackageNames": [
+                "@devexpress/design-tokens-internal"
+            ],
+            "automerge": false,
+            "dependencyDashboardApproval": true,
+            "minimumReleaseAge": null
         }
     ],
     "lockFileMaintenance": {

@@ -95,6 +95,9 @@ jobs:
     - name: Run tests
       run: pnpm exec nx test devextreme-scss
 
+    - name: Check naming registries
+      run: pnpm exec nx naming:check devextreme-scss
+
   notify:
     runs-on: ubuntu-latest
     name: Send notifications

@@ -248,6 +248,7 @@ jobs:
           style_dependent_matrix=$(cat <<'JSON'
           [
             { "componentFolder": "accessibility", "name": "accessibility - fluent.dark", "theme": "fluent.blue.dark", "concurrency": 6 },
+            { "componentFolder": "accessibility", "name": "accessibility - fluent-next.dark", "theme": "fluent-next.blue.dark", "concurrency": 6 },
               { "componentFolder": "accessibility", "name": "accessibility - material.light", "theme": "material.blue.light", "concurrency": 6 },
               { "componentFolder": "accessibility", "name": "accessibility - material.dark", "theme": "material.blue.dark", "concurrency": 6 }
             ]
@@ -259,7 +260,15 @@ jobs:
             --argjson baseEnd "$base_matrix_end" \
             --argjson styleDependent "$style_dependent_matrix" \
             --arg stylesChanged "${{ needs.check-should-run.outputs.styles-changed }}" \
-            '{ include: ($baseStart + (if $stylesChanged == "true" then $styleDependent else [] end) + $baseEnd) }')
+            '{ include: (
+              $baseStart
+              + (if $stylesChanged == "true" then $styleDependent else [] end)
+              + $baseEnd
+              + (($baseStart + $baseEnd) | map(
+                select(.theme == null)
+                | . + { name: (.name + " - fluent-next"), theme: "fluent-next.blue.light" }
+              ))
+            ) }')
 
           echo "matrix=$matrix" >> $GITHUB_OUTPUT
 

@@ -482,10 +482,15 @@ jobs:
           - { STRATEGY: screenshots,   THEME: fluent.blue.light,   CONSTEL: jquery(1/3) }
           - { STRATEGY: screenshots,   THEME: fluent.blue.light,   CONSTEL: jquery(2/3) }
           - { STRATEGY: screenshots,   THEME: fluent.blue.light,   CONSTEL: jquery(3/3) }
+          - { STRATEGY: screenshots,   THEME: fluent-next.blue.light, CONSTEL: jquery(1/3) }
+          - { STRATEGY: screenshots,   THEME: fluent-next.blue.light, CONSTEL: jquery(2/3) }
+          - { STRATEGY: screenshots,   THEME: fluent-next.blue.light, CONSTEL: jquery(3/3) }
           - { STRATEGY: accessibility, THEME: material.blue.light, CONSTEL: jquery }
           - { STRATEGY: accessibility, THEME: fluent.blue.light,   CONSTEL: jquery }
+          - { STRATEGY: accessibility, THEME: fluent-next.blue.light, CONSTEL: jquery }
           - { STRATEGY: accessibility, THEME: material.blue.dark,  CONSTEL: jquery }
           - { STRATEGY: accessibility, THEME: fluent.blue.dark,    CONSTEL: jquery }
+          - { STRATEGY: accessibility, THEME: fluent-next.blue.dark, CONSTEL: jquery }
     env:
       ACCESSIBILITY_TESTCAFE_REPORT_PATH: "accessibility_testcafe_report"
 
@@ -662,7 +667,7 @@ jobs:
           angular(9/10),
           angular(10/10),
         ]
-        THEME: ['fluent.blue.light']
+        THEME: ['fluent.blue.light', 'fluent-next.blue.light']
 
     runs-on: ${{ github.event_name == 'merge_group' && 'devextreme-shr2-ondemand' || 'devextreme-shr2' }}
     name: ${{ matrix.CONSTEL }}-screenshots-${{ matrix.THEME }}

@@ -36,7 +36,7 @@
   right: 0;
   width: 340px;
   top: 0;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .options > .caption {

@@ -36,7 +36,7 @@
   right: 0;
   width: 340px;
   top: 0;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .options > .caption {

@@ -36,7 +36,7 @@
   right: 0;
   width: 340px;
   top: 0;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .options > .caption {

@@ -123,7 +123,7 @@ const selectedCompanies = computed({
   right: 0;
   width: 340px;
   top: 0;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .options > .caption {

@@ -36,7 +36,7 @@
   right: 0;
   width: 340px;
   top: 0;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .options > .caption {

@@ -6,7 +6,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   left: 0;
   position: absolute;
   bottom: 0;

@@ -6,7 +6,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   left: 0;
   position: absolute;
   bottom: 0;

@@ -6,7 +6,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   left: 0;
   position: absolute;
   bottom: 0;

@@ -6,7 +6,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   left: 0;
   position: absolute;
   bottom: 0;

@@ -6,7 +6,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
   left: 0;
   position: absolute;
   bottom: 0;

@@ -6,22 +6,22 @@
 }
 
 .demo-light {
-  background: rgba(245, 229, 166, 0.5);
+  background: var(--dxds-color-bg-yellow-subtle, rgba(245, 229, 166, 0.5));
 }
 
 .demo-dark {
-  background: rgba(148, 215, 199, 0.5);
+  background: var(--dxds-color-bg-green-subtle, rgba(148, 215, 199, 0.5));
 }
 
 .demo-dark.header {
-  background: rgba(243, 158, 108, 0.5);
+  background: var(--dxds-color-bg-red-subtle, rgba(243, 158, 108, 0.5));
 }
 
 .demo-dark.footer {
-  background: rgba(123, 155, 207, 0.5);
+  background: var(--dxds-color-bg-blue-subtle, rgba(123, 155, 207, 0.5));
 }
 
 .small {
   height: 50px;
-  border: 1px solid lightgray;
+  border: 1px solid var(--dxds-color-border, lightgray);
 }
@@ -6,22 +6,22 @@
 }
 
 .demo-light {
-  background: rgba(245, 229, 166, 0.5);
+  background: var(--dxds-color-bg-yellow-subtle, rgba(245, 229, 166, 0.5));
 }
 
 .demo-dark {
-  background: rgba(148, 215, 199, 0.5);
+  background: var(--dxds-color-bg-green-subtle, rgba(148, 215, 199, 0.5));
 }
 
 .demo-dark.header {
-  background: rgba(243, 158, 108, 0.5);
+  background: var(--dxds-color-bg-red-subtle, rgba(243, 158, 108, 0.5));
 }
 
 .demo-dark.footer {
-  background: rgba(123, 155, 207, 0.5);
+  background: var(--dxds-color-bg-blue-subtle, rgba(123, 155, 207, 0.5));
 }
 
 .small {
   height: 50px;
-  border: 1px solid lightgray;
+  border: 1px solid var(--dxds-color-border, lightgray);
 }
@@ -6,22 +6,22 @@
 }
 
 .demo-light {
-  background: rgba(245, 229, 166, 0.5);
+  background: var(--dxds-color-bg-yellow-subtle, rgba(245, 229, 166, 0.5));
 }
 
 .demo-dark {
-  background: rgba(148, 215, 199, 0.5);
+  background: var(--dxds-color-bg-green-subtle, rgba(148, 215, 199, 0.5));
 }
 
 .demo-dark.header {
-  background: rgba(243, 158, 108, 0.5);
+  background: var(--dxds-color-bg-red-subtle, rgba(243, 158, 108, 0.5));
 }
 
 .demo-dark.footer {
-  background: rgba(123, 155, 207, 0.5);
+  background: var(--dxds-color-bg-blue-subtle, rgba(123, 155, 207, 0.5));
 }
 
 .small {
   height: 50px;
-  border: 1px solid lightgray;
+  border: 1px solid var(--dxds-color-border, lightgray);
 }
@@ -150,24 +150,24 @@ import { DxBox, DxItem } from 'devextreme-vue/box';
 }
 
 .demo-light {
-  background: rgba(245, 229, 166, 0.5);
+  background: var(--dxds-color-bg-yellow-subtle, rgba(245, 229, 166, 0.5));
 }
 
 .demo-dark {
-  background: rgba(148, 215, 199, 0.5);
+  background: var(--dxds-color-bg-green-subtle, rgba(148, 215, 199, 0.5));
 }
 
 .demo-dark.header {
-  background: rgba(243, 158, 108, 0.5);
+  background: var(--dxds-color-bg-red-subtle, rgba(243, 158, 108, 0.5));
 }
 
 .demo-dark.footer {
-  background: rgba(123, 155, 207, 0.5);
+  background: var(--dxds-color-bg-blue-subtle, rgba(123, 155, 207, 0.5));
 }
 
 .small {
   height: 50px;
-  border: 1px solid lightgray;
+  border: 1px solid var(--dxds-color-border, lightgray);
 }
 
 </style>
@@ -6,22 +6,22 @@
 }
 
 .demo-light {
-  background: rgba(245, 229, 166, 0.5);
+  background: var(--dxds-color-bg-yellow-subtle, rgba(245, 229, 166, 0.5));
 }
 
 .demo-dark {
-  background: rgba(148, 215, 199, 0.5);
+  background: var(--dxds-color-bg-green-subtle, rgba(148, 215, 199, 0.5));
 }
 
 .demo-dark.header {
-  background: rgba(243, 158, 108, 0.5);
+  background: var(--dxds-color-bg-red-subtle, rgba(243, 158, 108, 0.5));
 }
 
 .demo-dark.footer {
-  background: rgba(123, 155, 207, 0.5);
+  background: var(--dxds-color-bg-blue-subtle, rgba(123, 155, 207, 0.5));
 }
 
 .small {
   height: 50px;
-  border: 1px solid lightgray;
+  border: 1px solid var(--dxds-color-border, lightgray);
 }
@@ -16,5 +16,5 @@
 .multiple-selection-styling-mode {
   border-left-width: 1px;
   border-left-style: solid;
-  border-color: #ddd;
+  border-color: var(--dxds-color-border-subtle, #ddd);
 }
@@ -16,5 +16,5 @@
 .multiple-selection-styling-mode {
   border-left-width: 1px;
   border-left-style: solid;
-  border-color: #ddd;
+  border-color: var(--dxds-color-border-subtle, #ddd);
 }
@@ -16,5 +16,5 @@
 .multiple-selection-styling-mode {
   border-left-width: 1px;
   border-left-style: solid;
-  border-color: #ddd;
+  border-color: var(--dxds-color-border-subtle, #ddd);
 }
@@ -63,6 +63,6 @@ function itemClick(e: DxButtonGroupTypes.ItemClickEvent) {
   .multiple-selection-styling-mode {
     border-left-width: 1px;
     border-left-style: solid;
-    border-color: #ddd;
+    border-color: var(--dxds-color-border-subtle, #ddd);
   }
 </style>
@@ -16,5 +16,5 @@
 #multiple-selection-styling-mode {
   border-left-width: 1px;
   border-left-style: solid;
-  border-color: #ddd;
+  border-color: var(--dxds-color-border-subtle, #ddd);
 }
@@ -17,7 +17,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .option {

@@ -17,7 +17,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .option {

@@ -17,7 +17,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .option {

@@ -125,7 +125,7 @@ function clearValue() {
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .option {

@@ -17,7 +17,7 @@
 
 .options {
   padding: 20px;
-  background-color: rgba(191, 191, 191, 0.15);
+  background-color: var(--dx-color-options-panel-bg);
 }
 
 .option {