1193 font stack (#31426)

dmalykh-devexpress · pomahtri · Copilot · web-flow · commit 0933cfcc65d9 · 2025-10-27T10:37:48.000+04:00
Signed-off-by: Denis Malykh &lt;denis.malykh@devexpress.com&gt;
Co-authored-by: Roman Semenov &lt;roman.semenov@devexpress.com&gt;
Co-authored-by: Copilot &lt;175728472+Copilot@users.noreply.github.com&gt;
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -0,0 +1,9 @@
+{
+    "rules": {
+        "function-name-case": null,
+        "no-empty-source": null,
+        "at-rule-no-unknown": null,
+        "value-keyword-case": null
+    }
+}
+
diff --git a/packages/devextreme-scss/.stylelintrc.json b/packages/devextreme-scss/.stylelintrc.json
@@ -29,7 +29,7 @@
         "shorthand-property-no-redundant-values": null,
         "string-quotes": null,
         "value-no-vendor-prefix": true,
-        "value-keyword-case": ["lower", {"camelCaseSvgKeywords": true}],
+        "value-keyword-case": null,
         "selector-not-notation": null,
         "keyframe-selector-notation": null,
         "media-feature-range-notation": null,
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; // 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;
 
 /**
 * $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, -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-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/js/__internal/core/license/trial_panel.client.ts b/packages/devextreme/js/__internal/core/license/trial_panel.client.ts
@@ -77,9 +77,9 @@ 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-wight': '600',
+  'font-weight': '600',
 };
 
 function createImportantStyles(defaultStyles: StylesMap, customStyles?: StylesMap): string {

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`	`}`