Refactor theme-options, add fluent theme theme-builder (#25834)

packages/devextreme-themebuilder/src/metadata/generator.ts

@@ -2,6 +2,7 @@ export default class MetadataGenerator {
   metadata: ThemesMetadata = {
     generic: [],
     material: [],
+    fluent: [],
   };
 
   static capitalize(key: string): string {
@@ -70,13 +71,14 @@ export default class MetadataGenerator {
   }
 
   static getBundleContent(content: string): string {
-    return content.replace(/(..\/widgets\/(material|generic))"/, '$1/tb_index"');
+    return content.replace(/(..\/widgets\/(material|generic|fluent))"/, '$1/tb_index"');
   }
 
   clean(): void {
     this.metadata = {
       generic: [],
       material: [],
+      fluent: [],
     };
   }
 
@@ -85,9 +87,10 @@ export default class MetadataGenerator {
   }
 
   fillMetaData(item: MetaItem, filePath: string): void {
-    const target = filePath.includes('generic')
-      ? this.metadata.generic
-      : this.metadata.material;
+    const target =
+        filePath.includes('generic') ? this.metadata.generic :
+        filePath.includes('material') ? this.metadata.material :
+        filePath.includes('fluent') ? this.metadata.fluent : [];
 
     target.push(item);
   }

packages/devextreme-themebuilder/src/modules/themes.ts

@@ -115,6 +115,18 @@ const themes: Theme[] = [
   {
     themeId: 42, name: 'material', colorScheme: 'teal-dark-compact', text: 'Teal Dark Compact', group: 'Material Design (Compact)',
   },
+  {
+    themeId: 51, name: 'fluent', colorScheme: 'blue-light', text: 'Blue Light', group: 'Fluent Design',
+  },
+  {
+    themeId: 52, name: 'fluent', colorScheme: 'blue-dark', text: 'Blue Dark', group: 'Fluent Design',
+  },
+  {
+    themeId: 53, name: 'fluent', colorScheme: 'blue-light-compact', text: 'Blue Light Compact', group: 'Fluent Design (Compact)',
+  },
+  {
+    themeId: 54, name: 'fluent', colorScheme: 'blue-dark-compact', text: 'Blue Dark Compact', group: 'Fluent Design (Compact)',
+  },
 ];
 
 export default themes;

packages/devextreme-themebuilder/src/types/types.d.ts

@@ -10,6 +10,7 @@ interface MetaItem {
 interface ThemesMetadata {
   generic: MetaItem[];
   material: MetaItem[];
+  fluent: MetaItem[];
 }
 
 interface ConfigMetaItem {

packages/devextreme-themebuilder/tests/data/metadata.ts

@@ -14,6 +14,7 @@ export const metadata: ThemesMetadata = {
     },
   ],
   material: [],
+  fluent: [],
 };
 export const version = '';
 export const dependencies: FlatStylesDependencies = {};

packages/devextreme-themebuilder/tests/metadata/collector.test.ts

@@ -85,11 +85,11 @@ describe('MetadataCollector', () => {
     const fileName = join('metadata', 'dx-theme-builder-metadata.ts');
     const expectedFileName = resolve(fileName);
     const expectedDirName = dirname(expectedFileName);
-    const meta: ThemesMetadata = { generic: [{ Key: '$var', Value: '\'ON\'' }], material: [] };
+    const meta: ThemesMetadata = { generic: [{ Key: '$var', Value: '\'ON\'' }], material: [], fluent: [] };
 
     collector.generator.metadata = meta;
 
-    let metaContent = 'export const metadata: ThemesMetadata = {\'generic\':[{\'Key\':\'$var\',\'Value\':\'"ON"\'}],\'material\':[]};\n';
+    let metaContent = 'export const metadata: ThemesMetadata = {\'generic\':[{\'Key\':\'$var\',\'Value\':\'"ON"\'}],\'material\':[],\'fluent\':[]};\n';
     metaContent += `export const version: string = '${version}';\n`;
     metaContent += 'export const browsersList: Array<string> = [];\n';
     metaContent += 'export const dependencies: FlatStylesDependencies = {};\n';

packages/devextreme-themebuilder/tests/metadata/generator.test.ts

@@ -2,6 +2,8 @@ import MetadataGenerator from '../../src/metadata/generator';
 
 const generator = new MetadataGenerator();
 
+type Theme = 'material' | 'generic' | 'fluent';
+
 describe('Metadata generator - parseComments', () => {
   const commentSamples: string[] = [
     '* $name 10. Constant name',
@@ -177,7 +179,7 @@ describe('Metadata generator - collectMetadata', () => {
 
     const result = generator.collectMetadata(path, content);
     expect(content).toBe(result);
-    expect(generator.getMetadata()).toEqual({ generic: [], material: [] });
+    expect(generator.getMetadata()).toEqual({ generic: [], material: [], fluent: [] });
   });
 
   test('collectMetadata for file with comments modify file content and add data to metadata', () => {
@@ -214,19 +216,18 @@ $never-used: collector((
         },
       ],
       material: [],
+      fluent: [],
     });
   });
 
   test('clean method clean metadata', () => {
     // metadata is not empty because of the previous test
     expect(generator.getMetadata()).not.toEqual([]);
     generator.clean();
-    expect(generator.getMetadata()).toEqual({ generic: [], material: [] });
+    expect(generator.getMetadata()).toEqual({ generic: [], material: [], fluent: [] });
   });
 
   test('collectMetadata add several item for different files with the same variables names', () => {
-    const path1 = '/scss/widgets/generic/toolbar/_colors.scss';
-    const path2 = '/scss/widgets/material/toolbar/_colors.scss';
     const content = `
 @use "colors";
 /**
@@ -236,8 +237,12 @@ $never-used: collector((
 $slideout-background: #000 !default;
 `;
 
-    generator.collectMetadata(path1, content);
-    generator.collectMetadata(path2, content);
+    [
+      '/scss/widgets/generic/toolbar/_colors.scss',
+      '/scss/widgets/material/toolbar/_colors.scss',
+      '/scss/widgets/fluent/toolbar/_colors.scss',
+      'other.scss',
+    ].forEach((path) => generator.collectMetadata(path, content));
 
     expect(generator.getMetadata()).toEqual({
       generic: [{
@@ -250,6 +255,11 @@ $slideout-background: #000 !default;
         Type: 'color',
         Key: '$slideout-background',
       }],
+      fluent: [{
+        Name: 'Slide out background',
+        Type: 'color',
+        Key: '$slideout-background',
+      }],
     });
   });
 
@@ -279,36 +289,22 @@ describe('Metadata generator - generate files content', () => {
   });
 
   test('getBundleContent', () => {
-    const genericBundleContent = `
-    @use "../widgets/generic/colors" with ($color: "carmine");
-    @use "../widgets/generic/sizes" with ($size: "compact");
-    @use "../widgets/generic/typography";
-    @use "../widgets/generic";`;
-
-    const materialBundleContent = `
-    @use "../widgets/material/colors" with ($color: "carmine");
-    @use "../widgets/material/sizes" with ($size: "compact");
-    @use "../widgets/material/typography";
-    @use "../widgets/material";`;
-    const commonBundleContent = '@use "../widgets/common/ui"';
-
-    const expectedGenericBundleContent = `
-    @use "../widgets/generic/colors" with ($color: "carmine");
-    @use "../widgets/generic/sizes" with ($size: "compact");
-    @use "../widgets/generic/typography";
-    @use "../widgets/generic/tb_index";`;
+    const bundleContent = (theme: Theme) => `
+    @use "../widgets/${theme}/colors" with ($color: "carmine");
+    @use "../widgets/${theme}/sizes" with ($size: "compact");
+    @use "../widgets/${theme}/typography";
+    @use "../widgets/${theme}";`;
+
+    const expectedBundleContent = (theme: Theme) => `
+    @use "../widgets/${theme}/colors" with ($color: "carmine");
+    @use "../widgets/${theme}/sizes" with ($size: "compact");
+    @use "../widgets/${theme}/typography";
+    @use "../widgets/${theme}/tb_index";`;
 
-    const expectedMaterialBundleContent = `
-    @use "../widgets/material/colors" with ($color: "carmine");
-    @use "../widgets/material/sizes" with ($size: "compact");
-    @use "../widgets/material/typography";
-    @use "../widgets/material/tb_index";`;
-
-    expect(MetadataGenerator.getBundleContent(genericBundleContent))
-      .toBe(expectedGenericBundleContent);
+    const commonBundleContent = '@use "../widgets/common/ui"';
 
-    expect(MetadataGenerator.getBundleContent(materialBundleContent))
-      .toBe(expectedMaterialBundleContent);
+    ['material', 'generic', 'fluent'].forEach((theme: Theme) => expect(MetadataGenerator.getBundleContent(bundleContent(theme)))
+        .toBe(expectedBundleContent(theme)));
 
     expect(MetadataGenerator.getBundleContent(commonBundleContent))
       .toBe(commonBundleContent);

packages/devextreme-themebuilder/tests/modules/themes.test.ts

@@ -1,23 +1,15 @@
 /* eslint no-console: 0 */
-import {
-  sizes, materialColors, materialModes, genericColors,
-} from '../../../devextreme/build/gulp/styles/theme-options';
+import { getThemes } from '../../../devextreme/build/gulp/styles/theme-options';
 import themes from '../../src/modules/themes';
 
-const generateThemeName = (theme: string, size: string, color: string, mode: string | null = null): string =>
-  `${theme}.${color}${mode ? `-${mode}` : ''}${size === 'default' ? '' : '-compact'}`;
-
 describe('Themes', () => {
   test('check components and theme builder themes', () => {
-    const knownThemes: string[] = [];
-    sizes.forEach((size: string) => {
-      materialModes.forEach((mode: string) => {
-        materialColors.forEach((color: string) => knownThemes.push(generateThemeName('material', size, color, mode)));
-      });
-      genericColors.forEach((color: string) => knownThemes.push(generateThemeName('generic', size, color)));
-    });
-    const builderThemes: string[] = themes.map((t) => `${t.name}.${t.colorScheme}`);
+    const knownThemes: string[] = getThemes().map(
+        ([theme, size, color, mode = null]: [string, string, string, string | null]): string =>
+        `${theme}.${color}${mode ? `-${mode}` : ''}${size === 'default' ? '' : '-compact'}`
+    );
 
+    const builderThemes: string[] = themes.map((t) => `${t.name}.${t.colorScheme}`);
     const nonListedBuilderThemes: string[] = knownThemes.filter((t) => !builderThemes.includes(t));
     const ownBuilderThemes: string[] = builderThemes.filter((t) => !knownThemes.includes(t));
 

packages/devextreme/build/gulp/styles/style-compiler.js

@@ -14,7 +14,7 @@ const parseArguments = require('minimist');
 
 const cleanCssSanitizeOptions = require('./clean-css-options.json');
 const cleanCssOptions = require('../../../../devextreme-themebuilder/src/data/clean-css-options.json');
-const { sizes, materialColors, materialModes, genericColors, fluentColors, fluentModes } = require('./theme-options');
+const { getThemes } = require('./theme-options');
 const functions = require('../gulp-data-uri').sassFunctions;
 const starLicense = require('../header-pipes').starLicense;
 
@@ -83,17 +83,7 @@ function generateScssBundles(bundlesFolder, getBundleContent) {
         saveBundleFile(bundlesFolder, bundleName, content);
     };
 
-    sizes.forEach(size => {
-        fluentModes.forEach(mode => {
-            fluentColors.forEach(color => saveBundle('fluent', size, color, mode));
-        });
-
-        materialModes.forEach(mode => {
-            materialColors.forEach(color => saveBundle('material', size, color, mode));
-        });
-
-        genericColors.forEach(color => saveBundle('generic', size, color));
-    });
+    getThemes().forEach(([theme, size, color, mode]) => saveBundle(theme, size, color, mode));
 }
 
 function createBundles(callback) {

packages/devextreme/build/gulp/styles/theme-options.js

@@ -7,11 +7,12 @@ const fluentColors = ['blue'];
 const fluentModes = ['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])),
+    ...genericColors.map((color) => ['generic', size, color])
+]);
+
 module.exports = {
-    sizes,
-    materialColors,
-    materialModes,
-    genericColors,
-    fluentColors,
-    fluentModes,
+    getThemes
 };