Core: Update default font stack (DevExpress#31083)

Co-authored-by: Roman Semenov <[email protected]>

Author: dmalykh-devexpress

apps/demos/testing/etalons/DataGrid-RightToLeftSupport (material.blue.light).png

@@ -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, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif !default; // stylelint-disable-line value-keyword-case
+$base-font-family: segoe ui, -apple-system, blinkmacsystemfont, avenir next, avenir, helvetica neue, adwaita sans, cantarell, ubuntu, roboto, noto, helvetica, arial, sans-serif !default; // stylelint-disable-line value-keyword-case
 
 /**
 * $name 30. Page background color

packages/devextreme-scss/scss/widgets/fluent/_colors.scss

@@ -10,7 +10,7 @@ $generic-color-postfix: null !default;
 * $name 10. Font family
 * $type text
 */
-$base-font-family: 'Helvetica Neue', 'Segoe UI', helvetica, verdana, 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

packages/devextreme-scss/scss/widgets/generic/_colors.scss

@@ -17,7 +17,7 @@ $material-color-theme-modificator: null !default;
 * $name 10. Font family
 * $type text
 */
-$base-font-family: "Roboto", "RobotoFallback", "Noto Kufi Arabic", "Helvetica",  "Arial", sans-serif !default;
+$base-font-family: roboto, -apple-system, blinkmacsystemfont, avenir next, avenir, segoe ui, helvetica neue, adwaita sans, cantarell, ubuntu, noto, helvetica, arial, sans-serif !default;
 
 /**
 * $name 20. Text color

packages/devextreme-scss/scss/widgets/material/_colors.scss

@@ -1,5 +1,5 @@
 export default `.dx-accordion {
-  font-family: "Helvetica Neue","Segoe UI",helvetica,verdana,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);
 }

packages/devextreme-themebuilder/tests/data/compilation-results/no-changes-css.ts

@@ -1,5 +1,5 @@
 const meta: { [key: string]: string } = {
-  '$base-font-family': '"Helvetica Neue", "Segoe UI", helvetica, verdana, 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',

packages/devextreme-themebuilder/tests/data/compilation-results/no-changes-meta.ts

@@ -9,7 +9,8 @@ $base-accent: null !default;
 
 
 @if $color == "light" {
-  $base-font-family: 'Helvetica Neue','Segoe UI',helvetica,verdana,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;
 }
 

packages/devextreme-themebuilder/tests/data/scss/widgets/generic/_colors.scss

@@ -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: "Helvetica Neue","Segoe UI",helvetica,verdana,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: "Helvetica Neue","Segoe UI",helvetica,verdana,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': '"Helvetica Neue", "Segoe UI", helvetica, verdana, 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: "Helvetica Neue", "Segoe UI", helvetica, verdana, 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);
 }

packages/devextreme-themebuilder/tests/modules/compile-manager.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 = '"Helvetica Neue", "Segoe UI", helvetica, verdana, 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:'
-        + '"Helvetica Neue","Segoe UI",helvetica,verdana,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}',
       );