fix Material font family to avoid flickering and update Viz elements' styles (#31758)

VasilyStrelyaev · web-flow · commit 1c5511d65831 · 2025-11-19T12:01:39.000+02:00
diff --git a/packages/devextreme-scss/scss/widgets/fluent/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/_colors.scss
@@ -22,7 +22,7 @@ $fluent-color-theme-modificator: null !default;
 * $name 10. Font family
 * $type text
 */
-$base-font-family: segoe ui, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, adwaita sans, cantarell, ubuntu, roboto, noto, helvetica, arial, sans-serif !default;
+$base-font-family: 'segoe ui', -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', 'adwaita sans', cantarell, ubuntu, roboto, noto, helvetica, arial, sans-serif !default;
 
 /**
 * $name 30. Page background color
diff --git a/packages/devextreme-scss/scss/widgets/generic/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/_colors.scss
@@ -10,7 +10,7 @@ $generic-color-postfix: null !default;
 * $name 10. Font family
 * $type text
 */
-$base-font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, adwaita sans, cantarell, ubuntu, roboto, noto, helvetica, arial, sans-serif !default;
+$base-font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'segoe ui', 'helvetica neue', 'adwaita sans', cantarell, ubuntu, roboto, noto, helvetica, arial, sans-serif !default;
 
 /**
 * $name 10. Accent color
diff --git a/packages/devextreme-scss/scss/widgets/material/_colors.scss b/packages/devextreme-scss/scss/widgets/material/_colors.scss
@@ -17,7 +17,7 @@ $material-color-theme-modificator: null !default;
 * $name 10. Font family
 * $type text
 */
-$base-font-family: roboto, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, adwaita sans, cantarell, ubuntu, noto, helvetica, arial, sans-serif !default;
+$base-font-family: roboto, 'roboto fallback', -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'segoe ui', 'helvetica neue', 'adwaita sans', cantarell, ubuntu, noto, helvetica, arial, sans-serif !default;
 
 /**
 * $name 20. Text color
diff --git a/packages/devextreme-scss/scss/widgets/material/typography/_index.scss b/packages/devextreme-scss/scss/widgets/material/typography/_index.scss
@@ -11,7 +11,7 @@
 @import "https://fonts.googleapis.com/earlyaccess/notokufiarabic.css";
 
 @font-face {
-  font-family: 'RobotoFallback';
+  font-family: 'roboto fallback';
   font-style: normal;
   font-weight: 300;
   src:
@@ -23,7 +23,7 @@
 }
 
 @font-face {
-  font-family: 'RobotoFallback';
+  font-family: 'roboto fallback';
   font-style: normal;
   font-weight: 400;
   src:
@@ -35,7 +35,7 @@
 }
 
 @font-face {
-  font-family: 'RobotoFallback';
+  font-family: 'roboto fallback';
   font-style: normal;
   font-weight: 500;
   src:
@@ -47,7 +47,7 @@
 }
 
 @font-face {
-  font-family: 'RobotoFallback';
+  font-family: 'roboto fallback';
   font-style: normal;
   font-weight: 700;
   src:
diff --git a/packages/devextreme-themebuilder/tests/data/compilation-results/no-changes-css.ts b/packages/devextreme-themebuilder/tests/data/compilation-results/no-changes-css.ts
@@ -1,5 +1,5 @@
 export default `.dx-accordion {
-  font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,adwaita sans,cantarell,ubuntu,roboto,noto,helvetica,arial,sans-serif;
+  font-family: -apple-system,BlinkMacSystemFont,"avenir next",avenir,"segoe ui","helvetica neue","adwaita sans",cantarell,ubuntu,roboto,noto,helvetica,arial,sans-serif;
   color: #337ab7;
   background-image: url(icons/icons.woff2);
 }
diff --git a/packages/devextreme-themebuilder/tests/data/compilation-results/no-changes-meta.ts b/packages/devextreme-themebuilder/tests/data/compilation-results/no-changes-meta.ts
@@ -1,5 +1,5 @@
 const meta: { [key: string]: string } = {
-  '$base-font-family': "-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, adwaita sans, cantarell, ubuntu, roboto, noto, helvetica, arial, sans-serif",
+  '$base-font-family': "-apple-system, BlinkMacSystemFont, \"avenir next\", avenir, \"segoe ui\", \"helvetica neue\", \"adwaita sans\", cantarell, ubuntu, roboto, noto, helvetica, arial, sans-serif",
   '$base-accent': '#337ab7',
   '$accordion-title-color': '#337ab7',
   '$accordion-item-title-opened-bg': 'transparent',
diff --git a/packages/devextreme-themebuilder/tests/data/scss/widgets/generic/_colors.scss b/packages/devextreme-themebuilder/tests/data/scss/widgets/generic/_colors.scss
@@ -9,7 +9,7 @@ $base-accent: null !default;
 
 
 @if $color == "light" {
-  $base-font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, adwaita sans, cantarell, ubuntu, roboto, noto, helvetica, arial, sans-serif !default;
+  $base-font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'segoe ui', 'helvetica neue', 'adwaita sans', cantarell, ubuntu, roboto, noto, helvetica, arial, sans-serif !default;
 
   $base-accent: #337ab7 !default;
 }
diff --git a/packages/devextreme-themebuilder/tests/modules/compile-manager.test.ts b/packages/devextreme-themebuilder/tests/modules/compile-manager.test.ts
@@ -51,7 +51,7 @@ describe('Compile manager - integration test on test sass', () => {
       outColorScheme: 'test-theme',
     }).then((result) => {
       expect(result.css).toBe(`.dx-swatch-test-theme .dx-accordion {
-  font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,adwaita sans,cantarell,ubuntu,roboto,noto,helvetica,arial,sans-serif;
+  font-family: -apple-system,BlinkMacSystemFont,"avenir next",avenir,"segoe ui","helvetica neue","adwaita sans",cantarell,ubuntu,roboto,noto,helvetica,arial,sans-serif;
   color: #337ab7;
   background-image: url(icons/icons.woff2);
 }
@@ -69,7 +69,7 @@ describe('Compile manager - integration test on test sass', () => {
       assetsBasePath: 'base-path',
     }).then((result) => {
       expect(result.css).toBe(`.dx-accordion {
-  font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,adwaita sans,cantarell,ubuntu,roboto,noto,helvetica,arial,sans-serif;
+  font-family: -apple-system,BlinkMacSystemFont,"avenir next",avenir,"segoe ui","helvetica neue","adwaita sans",cantarell,ubuntu,roboto,noto,helvetica,arial,sans-serif;
   color: #337ab7;
   background-image: url(base-path/icons/icons.woff2);
 }
@@ -88,7 +88,7 @@ describe('Compile manager - integration test on test sass', () => {
     }).then((result) => {
       expect(result.css).toBe('');
       expect(result.compiledMetadata).toEqual({
-        "$base-font-family": "-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, adwaita sans, cantarell, ubuntu, roboto, noto, helvetica, arial, sans-serif",
+        "$base-font-family": "-apple-system, BlinkMacSystemFont, \"avenir next\", avenir, \"segoe ui\", \"helvetica neue\", \"adwaita sans\", cantarell, ubuntu, roboto, noto, helvetica, arial, sans-serif",
         '$base-accent': '#337ab7',
       });
     });
@@ -100,7 +100,7 @@ describe('Compile manager - integration test on test sass', () => {
       noClean: true,
     }).then((result) => {
       expect(result.css).toBe(`.dx-accordion {
-  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, adwaita sans, cantarell, ubuntu, roboto, noto, helvetica, arial, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, \"avenir next\", avenir, \"segoe ui\", \"helvetica neue\", \"adwaita sans\", cantarell, ubuntu, roboto, noto, helvetica, arial, sans-serif;
   color: #337ab7;
   background-image: url(icons/icons.woff2);
 }
diff --git a/packages/devextreme-themebuilder/tests/modules/compiler.test.ts b/packages/devextreme-themebuilder/tests/modules/compiler.test.ts
@@ -18,7 +18,7 @@ const includePaths = [path.join(dataPath, 'scss', 'widgets', 'generic'), path.jo
 const file = path.join(dataPath, 'scss', 'bundles', 'dx.light.scss');
 
 const expectedCss = ({
-                       fontFamily = '-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, adwaita sans, cantarell, ubuntu, roboto, noto, helvetica, arial, sans-serif',
+                       fontFamily = '-apple-system, BlinkMacSystemFont, "avenir next", avenir, "segoe ui", "helvetica neue", "adwaita sans", cantarell, ubuntu, roboto, noto, helvetica, arial, sans-serif',
                        color = '#337ab7',
                        bgColor = 'transparent'
 } = {}) => `.dx-accordion {
@@ -118,7 +118,7 @@ describe('compile', () => {
       // compiled css
       expect(data.result.css.toString()).toBe(
         '.dx-accordion{font-family:'
-        + '-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,adwaita sans,cantarell,ubuntu,roboto,noto,helvetica,arial,sans-serif;'
+        + '-apple-system,BlinkMacSystemFont,"avenir next",avenir,"segoe ui","helvetica neue","adwaita sans",cantarell,ubuntu,roboto,noto,helvetica,arial,sans-serif;'
         + 'color:#337ab7;background-image:url(icons/icons.woff2)}.dx-accordion '
         + '.from-base{background-color:transparent;color:#337ab7}.extra-class{color:red}',
       );
diff --git a/packages/devextreme-themebuilder/tests/modules/pre-compiler.test.ts b/packages/devextreme-themebuilder/tests/modules/pre-compiler.test.ts
@@ -24,13 +24,13 @@ describe('PreCompiler', () => {
   line-height: normal;
 }
 @font-face {
-  font-family: RobotoFallback;
+  font-family: roboto fallback;
   font-style: normal;
   font-weight: 300;
   src: local("Roboto Light"),local("Roboto-Light"),url(fonts/Roboto-300.woff2) format("woff2"),url(fonts/Roboto-300.woff) format("woff"),url(fonts/Roboto-300.ttf) format("truetype");
 }
 @font-face {
-  font-family: RobotoFallback;
+  font-family: roboto fallback;
   font-style: normal;
   font-weight: 400;
   src: local("Roboto"),local("Roboto-Regular"),url(fonts/Roboto-400.woff2) format("woff2"),url(fonts/Roboto-400.woff) format("woff"),url(fonts/Roboto-400.ttf) format("truetype");
@@ -40,20 +40,20 @@ describe('PreCompiler', () => {
   color: rgba(0,0,0,.87);
   font-weight: 400;
   font-size: 14px;
-  font-family: Roboto,RobotoFallback,"Noto Kufi Arabic",Helvetica,Arial,sans-serif;
+  font-family: roboto,"roboto fallback","Noto Kufi Arabic",helvetica,arial,sans-serif;
   line-height: 1.2857;
 }`;
 
     const expectedCss = `@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700);
 @import "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700";
 @font-face {
-  font-family: RobotoFallback;
+  font-family: roboto fallback;
   font-style: normal;
   font-weight: 300;
   src: local("Roboto Light"),local("Roboto-Light"),url(fonts/Roboto-300.woff2) format("woff2"),url(fonts/Roboto-300.woff) format("woff"),url(fonts/Roboto-300.ttf) format("truetype");
 }
 @font-face {
-  font-family: RobotoFallback;
+  font-family: roboto fallback;
   font-style: normal;
   font-weight: 400;
   src: local("Roboto"),local("Roboto-Regular"),url(fonts/Roboto-400.woff2) format("woff2"),url(fonts/Roboto-400.woff) format("woff"),url(fonts/Roboto-400.ttf) format("truetype");
@@ -70,7 +70,7 @@ describe('PreCompiler', () => {
   color: rgba(0,0,0,.87);
   font-weight: 400;
   font-size: 14px;
-  font-family: Roboto,RobotoFallback,"Noto Kufi Arabic",Helvetica,Arial,sans-serif;
+  font-family: roboto,"roboto fallback","Noto Kufi Arabic",helvetica,arial,sans-serif;
   line-height: 1.2857;
 } };`;
     const swatchSass = createSassForSwatch('test-theme-name', sourceCss);
diff --git a/packages/devextreme/js/__internal/core/license/trial_panel.client.ts b/packages/devextreme/js/__internal/core/license/trial_panel.client.ts
@@ -77,7 +77,7 @@ const textStyles = {
   padding: '0px',
   margin: '0px',
   color: 'white',
-  'font-family': '-apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, adwaita sans, cantarell, ubuntu, roboto, noto, helvetica, arial, sans-serif',
+  'font-family': '-apple-system, BlinkMacSystemFont, \'avenir next\', avenir, \'helvetica neue\', \'adwaita sans\', cantarell, ubuntu, roboto, noto, helvetica, arial, sans-serif',
   'font-size': '0.875rem',
   'font-weight': '600',
 };
diff --git a/packages/devextreme/js/__internal/viz/core/themes/generic/light/index.ts b/packages/devextreme/js/__internal/viz/core/themes/generic/light/index.ts
@@ -24,7 +24,7 @@ export default [{
     isDefault: true,
     font: {
       color: SECONDARY_TITLE_COLOR,
-      family: '\'Segoe UI\', \'Helvetica Neue\', \'Trebuchet MS\', Verdana, sans-serif',
+      family: '-apple-system, BlinkMacSystemFont, \'avenir next\', avenir, \'segoe ui\', \'helvetica neue\', \'adwaita sans\', cantarell, ubuntu, roboto, noto, helvetica, arial, sans-serif',
       weight: 400,
       size: 12,
       cursor: 'default',
@@ -39,7 +39,7 @@ export default [{
       backgroundColor: WHITE,
       font: {
         size: 28,
-        family: '\'Segoe UI Light\', \'Helvetica Neue Light\', \'Segoe UI\', \'Helvetica Neue\', \'Trebuchet MS\', Verdana, sans-serif',
+        family: '-apple-system, BlinkMacSystemFont, \'avenir next\', avenir, \'segoe ui\', \'helvetica neue\', \'adwaita sans\', cantarell, ubuntu, roboto, noto, helvetica, arial, sans-serif',
         weight: 200,
       },
       subtitle: {
diff --git a/packages/devextreme/js/__internal/viz/core/themes/material/index.ts b/packages/devextreme/js/__internal/viz/core/themes/material/index.ts
@@ -1,4 +1,4 @@
-const FONT_FAMILY = '\'Roboto\', \'RobotoFallback\', \'Helvetica\', \'Arial\', sans-serif';
+const FONT_FAMILY = 'roboto, \'roboto fallback\', helvetica, arial, sans-serif';
 
 const LIGHT_TITLE_COLOR = 'rgba(0,0,0,0.87)';
 const LIGHT_LABEL_COLOR = 'rgba(0,0,0,0.54)';
diff --git a/packages/devextreme/js/ui/themes.js b/packages/devextreme/js/ui/themes.js
@@ -353,8 +353,8 @@ export function isCompact(themeName) {
 }
 
 export function isWebFontLoaded(text, fontWeight) {
-    const testedFont = 'Roboto, RobotoFallback, Arial';
-    const etalonFont = 'Arial';
+    const testedFont = 'roboto, \'roboto fallback\', arial';
+    const etalonFont = 'arial';
 
     const document = domAdapter.getDocument();
     const testElement = document.createElement('span');
diff --git a/packages/devextreme/testing/tests/DevExpress.ui/themes.tests.js b/packages/devextreme/testing/tests/DevExpress.ui/themes.tests.js
@@ -655,7 +655,7 @@ QUnit.module('web font checker', () => {
         }
 
         const done = assert.async();
-        const font = new FontFace('RobotoFallback', 'url(../../packages/devextreme/artifacts/css/fonts/Roboto-400.woff2)', { weight: 400, unicodeRange: 'U+26' });
+        const font = new FontFace('roboto fallback', 'url(../../packages/devextreme/artifacts/css/fonts/Roboto-400.woff2)', { weight: 400, unicodeRange: 'U+26' });
 
         document.fonts.add(font);
         font.load();
@@ -691,7 +691,7 @@ QUnit.module('web font checker', () => {
         }
 
         const done = assert.async();
-        const font = new FontFace('RobotoFallback', 'url(../../artifacts/css/fonts/Roboto-400.woff2)', { weight: 400 });
+        const font = new FontFace('roboto fallback', 'url(../../artifacts/css/fonts/Roboto-400.woff2)', { weight: 400 });
         document.fonts.add(font);
 
         document.fonts.ready.then(() => {
diff --git a/packages/devextreme/testing/tests/DevExpress.viz.charts/themeManager.tests.js b/packages/devextreme/testing/tests/DevExpress.viz.charts/themeManager.tests.js
@@ -114,7 +114,7 @@ function createThemeManager(options, themeGroupName) {
             alignment: 'center',
             font: {
                 color: '#ffffff',
-                family: '\'Segoe UI\', \'Helvetica Neue\', \'Trebuchet MS\', Verdana, sans-serif',
+                family: '-apple-system, BlinkMacSystemFont, \'avenir next\', avenir, \'segoe ui\', \'helvetica neue\', \'adwaita sans\', cantarell, ubuntu, roboto, noto, helvetica, arial, sans-serif',
                 weight: 400,
                 size: 12,
                 cursor: 'default'
@@ -206,7 +206,7 @@ function createThemeManager(options, themeGroupName) {
         assert.deepEqual(theme.label, {
             font: {
                 color: '#ffffff',
-                family: '\'Segoe UI\', \'Helvetica Neue\', \'Trebuchet MS\', Verdana, sans-serif',
+                family: '-apple-system, BlinkMacSystemFont, \'avenir next\', avenir, \'segoe ui\', \'helvetica neue\', \'adwaita sans\', cantarell, ubuntu, roboto, noto, helvetica, arial, sans-serif',
                 weight: 400,
                 size: 12,
                 cursor: 'default'
@@ -341,7 +341,7 @@ function createThemeManager(options, themeGroupName) {
         assert.deepEqual(theme.label, {
             font: {
                 color: '#ffffff',
-                family: '\'Segoe UI\', \'Helvetica Neue\', \'Trebuchet MS\', Verdana, sans-serif',
+                family: '-apple-system, BlinkMacSystemFont, \'avenir next\', avenir, \'segoe ui\', \'helvetica neue\', \'adwaita sans\', cantarell, ubuntu, roboto, noto, helvetica, arial, sans-serif',
                 weight: 400,
                 size: 12,
                 cursor: 'default'
@@ -1742,7 +1742,7 @@ function createThemeManager(options, themeGroupName) {
         assert.deepEqual(themeManager.getOptions('crosshair').label.font, {
             color: '#ffffff',
             cursor: 'default',
-            family: '\'Segoe UI\', \'Helvetica Neue\', \'Trebuchet MS\', Verdana, sans-serif',
+            family: '-apple-system, BlinkMacSystemFont, \'avenir next\', avenir, \'segoe ui\', \'helvetica neue\', \'adwaita sans\', cantarell, ubuntu, roboto, noto, helvetica, arial, sans-serif',
             size: 12,
             weight: 400
         });
diff --git a/packages/devextreme/testing/tests/DevExpress.viz.core/annotations.plugins.tests.js b/packages/devextreme/testing/tests/DevExpress.viz.core/annotations.plugins.tests.js
@@ -975,7 +975,7 @@ QUnit.module('Lifecycle', {
             font: {
                 color: '#333333',
                 cursor: 'default',
-                family: '\'Segoe UI\', \'Helvetica Neue\', \'Trebuchet MS\', Verdana, sans-serif',
+                family: '-apple-system, BlinkMacSystemFont, \'avenir next\', avenir, \'segoe ui\', \'helvetica neue\', \'adwaita sans\', cantarell, ubuntu, roboto, noto, helvetica, arial, sans-serif',
                 size: 12,
                 weight: 400
             },
@@ -1163,7 +1163,7 @@ QUnit.module('Lifecycle', {
             font: {
                 color: '#333333',
                 cursor: 'default',
-                family: '\'Segoe UI\', \'Helvetica Neue\', \'Trebuchet MS\', Verdana, sans-serif',
+                family: '-apple-system, BlinkMacSystemFont, \'avenir next\', avenir, \'segoe ui\', \'helvetica neue\', \'adwaita sans\', cantarell, ubuntu, roboto, noto, helvetica, arial, sans-serif',
                 size: 12,
                 weight: 400
             },
diff --git a/packages/devextreme/testing/tests/DevExpress.viz.core/baseThemeManager.tests.js b/packages/devextreme/testing/tests/DevExpress.viz.core/baseThemeManager.tests.js
@@ -242,7 +242,7 @@ QUnit.test('initializeFont', function(assert) {
     assert.ok(theme.testLabel);
     assert.equal(theme.testLabel.font.color, 'white', 'color');
     assert.equal(theme.testLabel.font.size, 12, 'size');
-    assert.equal(theme.testLabel.font.family, '\'Segoe UI\', \'Helvetica Neue\', \'Trebuchet MS\', Verdana, sans-serif', 'Font families');
+    assert.equal(theme.testLabel.font.family, '-apple-system, BlinkMacSystemFont, \'avenir next\', avenir, \'segoe ui\', \'helvetica neue\', \'adwaita sans\', cantarell, ubuntu, roboto, noto, helvetica, arial, sans-serif', 'Font families');
     assert.equal(theme.testLabel.font.cursor, 'default');
 });
 
@@ -360,11 +360,11 @@ QUnit.test('initializeFont via font fields', function(assert) {
 
     assert.deepEqual(this.themeManager.theme('testLabel1.font'), {
         size: 12, cursor: 'default', weight: 400, color: 'white',
-        family: '\'Segoe UI\', \'Helvetica Neue\', \'Trebuchet MS\', Verdana, sans-serif'
+        family: '-apple-system, BlinkMacSystemFont, \'avenir next\', avenir, \'segoe ui\', \'helvetica neue\', \'adwaita sans\', cantarell, ubuntu, roboto, noto, helvetica, arial, sans-serif'
     }, 'font 1');
     assert.deepEqual(this.themeManager.theme('testObject2.testLabel2.font'), {
         size: 20, cursor: 'default', weight: 400, color: '#767676',
-        family: '\'Segoe UI\', \'Helvetica Neue\', \'Trebuchet MS\', Verdana, sans-serif'
+        family: '-apple-system, BlinkMacSystemFont, \'avenir next\', avenir, \'segoe ui\', \'helvetica neue\', \'adwaita sans\', cantarell, ubuntu, roboto, noto, helvetica, arial, sans-serif'
     }, 'font 2');
 });
 
diff --git a/packages/devextreme/testing/tests/DevExpress.viz.core/export.tests.js b/packages/devextreme/testing/tests/DevExpress.viz.core/export.tests.js
diff --git a/packages/devextreme/testing/tests/DevExpress.viz.core/tooltip.tests.js b/packages/devextreme/testing/tests/DevExpress.viz.core/tooltip.tests.js
diff --git a/packages/devextreme/testing/tests/DevExpress.viz.funnel/funnel.label.tests.js b/packages/devextreme/testing/tests/DevExpress.viz.funnel/funnel.label.tests.js
diff --git a/packages/devextreme/testing/tests/DevExpress.viz.gauges/barGauge_new.tests.js b/packages/devextreme/testing/tests/DevExpress.viz.gauges/barGauge_new.tests.js
diff --git a/packages/devextreme/testing/tests/DevExpress.viz.gauges/circularGauge.tests.js b/packages/devextreme/testing/tests/DevExpress.viz.gauges/circularGauge.tests.js
diff --git a/packages/devextreme/testing/tests/DevExpress.viz.sankey/sankey.label.tests.js b/packages/devextreme/testing/tests/DevExpress.viz.sankey/sankey.label.tests.js

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	export default `.dx-accordion {
`2`		`- font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,adwaita sans,cantarell,ubuntu,roboto,noto,helvetica,arial,sans-serif;`
	`2`	`+ font-family: -apple-system,BlinkMacSystemFont,"avenir next",avenir,"segoe ui","helvetica neue","adwaita sans",cantarell,ubuntu,roboto,noto,helvetica,arial,sans-serif;`
`3`	`3`	`color: #337ab7;`
`4`	`4`	`background-image: url(icons/icons.woff2);`
`5`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@ $base-accent: null !default;`
`9`	`9`
`10`	`10`
`11`	`11`	`@if $color == "light" {`
`12`		`- $base-font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, adwaita sans, cantarell, ubuntu, roboto, noto, helvetica, arial, sans-serif !default;`
	`12`	`+ $base-font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'segoe ui', 'helvetica neue', 'adwaita sans', cantarell, ubuntu, roboto, noto, helvetica, arial, sans-serif !default;`
`13`	`13`
`14`	`14`	`$base-accent: #337ab7 !default;`
`15`	`15`	`}`