diff --git a/packages/devextreme-themebuilder/src/data/bootstrap-metadata/bootstrap5-metadata.ts b/packages/devextreme-themebuilder/src/data/bootstrap-metadata/bootstrap5-metadata.ts index 624d77743632..930cdded1255 100644 --- a/packages/devextreme-themebuilder/src/data/bootstrap-metadata/bootstrap5-metadata.ts +++ b/packages/devextreme-themebuilder/src/data/bootstrap-metadata/bootstrap5-metadata.ts @@ -3,7 +3,7 @@ export default { 'base-accent': '$primary', 'base-bg': '$body-bg', 'base-text-color': '$body-color', - 'base-border-color': '$table-border-color', + 'base-border-color': '$border-color', 'base-border-radius': '$border-radius', 'base-border-radius-large': '$border-radius-lg', diff --git a/packages/devextreme-themebuilder/src/modules/bootstrap-extractor.ts b/packages/devextreme-themebuilder/src/modules/bootstrap-extractor.ts index 7ac98db4bd68..de11b8b180a2 100644 --- a/packages/devextreme-themebuilder/src/modules/bootstrap-extractor.ts +++ b/packages/devextreme-themebuilder/src/modules/bootstrap-extractor.ts @@ -1,6 +1,6 @@ import * as sass from 'sass-embedded'; import less from 'less'; -import { promises as fs } from 'fs'; +import { promises as fs, existsSync } from 'fs'; import bootstrap3meta from '../data/bootstrap-metadata/bootstrap3-metadata'; import bootstrap4meta from '../data/bootstrap-metadata/bootstrap4-metadata'; import bootstrap5meta from '../data/bootstrap-metadata/bootstrap5-metadata'; @@ -86,16 +86,20 @@ export default class BootstrapExtractor { } async readSassFile(fileName: string): Promise { - const path = require.resolve(`bootstrap${this.version}/scss/${fileName}`); + const path = this.getFilePath(fileName); return fs.readFile(path, 'utf8'); } async sassProcessor(): Promise { const functions = await this.readSassFile('_functions.scss'); const variables = await this.readSassFile('_variables.scss'); + + const variablesDarkFile = '_variables-dark.scss'; + const variablesDark = this.version === 5 && existsSync(this.getFilePath(variablesDarkFile)) ? await this.readSassFile(variablesDarkFile) : ''; // TODO: can be removed safely in bootstrap@6 const result = `${functions} -${variables} +${variables.replace('@import "variables-dark";', '')} +${variablesDark} ${this.input} ${this.getSetterServiceCode('!default')} ${this.getCollectorServiceCode()}`; @@ -111,6 +115,10 @@ ${this.getCollectorServiceCode()}`; ); } + getFilePath(fileName: string): string { + return require.resolve(`bootstrap${this.version}/scss/${fileName}`); + } + getSetterServiceCode(postfix = ''): string { return Object.keys(this.meta) .map((key) => `${this.meta[key]}: dx-empty ${postfix};\n`) diff --git a/packages/devextreme-themebuilder/tests/modules/bootstrap-extractor.test.ts b/packages/devextreme-themebuilder/tests/modules/bootstrap-extractor.test.ts index 3272213bb710..3819d6601a6a 100644 --- a/packages/devextreme-themebuilder/tests/modules/bootstrap-extractor.test.ts +++ b/packages/devextreme-themebuilder/tests/modules/bootstrap-extractor.test.ts @@ -55,6 +55,7 @@ describe('BootstrapExtractor', () => { expect(await extractor.sassProcessor()) .toBe(`${functions.toString()} ${variables.toString()} + ${testSassString} ${setterServiceCode} ${collectorServiceCode}`); @@ -67,14 +68,17 @@ ${collectorServiceCode}`); const extractor = new BootstrapExtractor(testSassString, 5); const functionsPath = require.resolve('bootstrap5/scss/_functions.scss'); const variablesPath = require.resolve('bootstrap5/scss/_variables.scss'); + const variablesDarkPath = require.resolve('bootstrap5/scss/_variables-dark.scss'); const functions = readFileSync(functionsPath); const variables = readFileSync(variablesPath); + const variablesDark = readFileSync(variablesDarkPath); extractor.getSetterServiceCode = (): string => setterServiceCode; extractor.getCollectorServiceCode = (): string => collectorServiceCode; expect(await extractor.sassProcessor()) .toBe(`${functions.toString()} ${variables.toString()} +${variablesDark.toString()} ${testSassString} ${setterServiceCode} ${collectorServiceCode}`);