Design System: New Fluent theme (dxdsfluent) powered by design tokens

.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

.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' }}

.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:

.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' }}

.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

.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' }}

.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:

.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' }}

.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' }}

.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
 

.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' }}

.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:

.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:
@@ -21,11 +22,24 @@ jobs:
     runs-on: ubuntu-latest
     outputs:
       should-run: ${{ steps.check.outputs.should-run }}
+      styles-changed: ${{ steps.changes.outputs.styles }}
     steps:
+      - uses: actions/checkout@v6
       - name: Check RUN_TESTS flag
         id: check
         run: echo "should-run=${{ env.RUN_TESTS }}" >> $GITHUB_OUTPUT
 
+      - uses: dorny/paths-filter@v4
+        id: changes
+        with:
+          filters: |
+            styles:
+              - 'packages/devextreme-scss/scss/**'
+              - 'packages/devextreme-scss/icons/**'
+              - 'packages/devextreme-scss/images/**'
+              - 'packages/devextreme-scss/fonts/**'
+              - 'packages/devextreme/js/**/themes/**'
+
   get-changes:
     runs-on: ubuntu-latest
     needs: check-should-run
@@ -112,33 +126,44 @@ 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
           )
 
           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
           )
 
+          # Dark accessibility (color-contrast) runs when framework tests are in scope
+          # OR when styles changed — mirroring the style_dependent_matrix gate in testcafe_tests.yml.
           matrix=$(jq -c -n \
             --argjson base "$base_matrix" \
             --argjson darkAccessibility "$dark_accessibility_matrix" \
             --arg frameworkTestsScope "${{ needs.determine-framework-tests-scope.outputs.framework-tests-scope }}" \
-            '{ include: ($base + (if $frameworkTestsScope != "none" then $darkAccessibility else [] end)) }')
+            --arg stylesChanged "${{ needs.check-should-run.outputs.styles-changed }}" \
+            '{ include: ($base + (if $frameworkTestsScope != "none" or $stylesChanged == "true" then $darkAccessibility else [] end)) }')
 
           echo "matrix=$matrix" >> $GITHUB_OUTPUT
 
@@ -860,7 +885,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 +1014,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 }}

.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}}

.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:

apps/demos/testing/common.test.ts

@@ -239,7 +239,12 @@ Object.values(FRAMEWORKS).forEach((approach) => {
 
         if (process.env.STRATEGY === 'accessibility') {
           const ignoredRules = getIgnoredRules(testName);
-          const options = { rules: {} };
+          // dxdsfluent shares fluent's structure/ARIA (already covered by the fluent run),
+          // so only color-contrast is re-checked for it across the demos.
+          const isDesignSystemFluent = process.env.THEME?.startsWith('dxdsfluent');
+          const options = isDesignSystemFluent
+            ? { runOnly: { type: 'rule' as const, values: ['color-contrast'] }, rules: {} }
+            : { rules: {} };
 
           ignoredRules.forEach((ruleName) => {
             options.rules[ruleName] = { enabled: false };

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

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: {

e2e/testcafe-devextreme/helpers/accessibility/test.ts

@@ -1,7 +1,7 @@
 import { ElementContext } from 'axe-core';
 import type { WidgetName } from 'devextreme-testcafe-models/types';
 import { createWidget } from '../createWidget';
-import { isFluent } from '../themeUtils';
+import { getThemeName } from '../themeUtils';
 import { a11yCheck, A11yCheckOptions } from './utils';
 import { generateOptionMatrix, Options } from '../generateOptionMatrix';
 
@@ -16,7 +16,9 @@ export interface Configuration<TComponentOptions = unknown> {
 export const defaultSelector = '#container';
 const defaultOptions = {};
 const defaultCreated = async () => {};
-const defaultA11yCheckConfig = isFluent() ? {} : {
+// Only the base fluent theme runs the full ruleset; dxdsfluent (re-tokenized fluent)
+// and material re-check color-contrast only — the rest is already covered by fluent.
+const defaultA11yCheckConfig = getThemeName() === 'fluent' ? {} : {
   runOnly: 'color-contrast',
 };