diff --git a/.stylelintrc.json b/.stylelintrc.json
new file mode 100644
index 000000000000..55aec2d1634c
--- /dev/null
+++ 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
index 7268bc329d08..58b02012e53f 100644
--- 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
index ccb37e17076d..162f38e1ba2a 100644
--- 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
index 3f3f4f103297..450ad438702c 100644
--- 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
index bd7d6466dfe7..5814ffbd70ab 100644
--- 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
index fe0f711ac203..6e7a07db2b80 100644
--- 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
index 0baa9bf47c3f..65d7d66be19c 100644
--- 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
index 1bd4cde77eaa..ba856a92c0ab 100644
--- 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
index 1e42a51a6eb3..0d04c8880e95 100644
--- 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
index 80a45229ac86..87b8d3728c06 100644
--- 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
index 6ae42c046a71..212061069b71 100644
--- 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 {