dxdsfluent: spike 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:
@@ -112,24 +113,32 @@ 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
           )
@@ -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 }}

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

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();
 

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,15 +305,15 @@ async function main() {
           _fixturePath: string,
           testMeta?: any,
         ) => {
-          if (testMeta?.runInTheme === process.env.theme) {
+          if (matchTheme(testMeta?.runInTheme, process.env.theme)) {
             return true;
           }
 
           if (!testMeta?.themes || !Array.isArray(testMeta.themes)) {
             return false;
           }
 
-          return testMeta.themes.includes(args.theme);
+          return testMeta.themes.some((themeName: string) => matchTheme(themeName, args.theme));
         });
       }
 

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">

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">

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">