Use fluent theme by default

packages/devextreme-cli/src/commands.json

@@ -57,7 +57,7 @@
             "description": "Specifies base theme name (default value is generic.light)"
         }, {
             "name": "--input-file",
-            "description": "Specifies file name with input data (a .json file with metadata or a .less/.scss file with Bootstrap variables)"
+            "description": "Specifies file name with input data (a .json file with metadata or a .scss file with Bootstrap 5 variables)"
         }, {
             "name": "--make-swatch",
             "description": "If present, adds a CSS scope to each CSS rule (.dx-swatch-xxx), where xxx is the value from the --output-color-scheme parameter"
@@ -76,9 +76,6 @@
         }, {
             "name": "--remove-external-resources",
             "description": "When present, removes links to external resources, such as fonts. The theme will use local fallbacks instead. Available from DevExtreme v20.2.7."
-        }, {
-            "name": "--bootstrap-version",
-            "description": "Specifies Bootstrap version 4 or 5 if '--input-file' is a '.scss' file. Available from DevExtreme v21.1.5. Default value: 4."
         }]
     }, {
         "name": "export-theme-vars",
@@ -89,7 +86,7 @@
             "description": "Specifies base theme name (default value is generic.light)"
         }, {
             "name": "--input-file",
-            "description": "Specifies file name with input data (a .json file with metadata or a .less/.scss file with Bootstrap variables)"
+            "description": "Specifies file name with input data (a .json file with metadata or a .scss file with Bootstrap 5 variables)"
         }, {
             "name": "--output-format",
             "description": "Specifies the format of output variables (less or scss) (default value is less or the extension extracted from the --output-file value (if it contains any))"
@@ -112,7 +109,7 @@
             "description": "Specifies base theme name (default value is generic.light)"
         }, {
             "name": "--input-file",
-            "description": "Specifies file name with input data (a .json file with metadata or a .less/.scss file with Bootstrap variables)"
+            "description": "Specifies file name with input data (a .json file with metadata or a .scss file with Bootstrap 5 variables)"
         }, {
             "name": "--output-file",
             "description": "Specifies output file name"

packages/devextreme-cli/src/templates/react/application/src/components/side-navigation-menu/SideNavigationMenu.scss

@@ -1,12 +1,13 @@
 @import "../../dx-styles.scss";
 @import "../../themes/generated/variables.additional.scss";
 
-.side-navigation-menu {
+div.dx-swatch-additional.side-navigation-menu {
   display: flex;
   flex-direction: column;
   min-height: 100%;
   height: 100%;
   width: 250px !important;
+  background-color: $base-bg;
 
   .menu-container {
     min-height: 100%;
@@ -22,6 +23,7 @@
       .dx-treeview-item {
         padding-left: 0;
         flex-direction: row-reverse;
+        border-radius: 0;
 
         .dx-icon {
           width: $side-panel-min-width !important;

packages/devextreme-cli/src/templates/react/application/src/dx-styles.scss

@@ -100,3 +100,9 @@ html, body {
 * {
   box-sizing: border-box;
 }
+
+.dx-theme-fluent {
+  .dx-drawer-panel-content {
+    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12);
+  }
+}

packages/devextreme-cli/src/templates/react/application/src/layouts/side-nav-inner-toolbar/side-nav-inner-toolbar.scss

@@ -5,6 +5,7 @@
 #navigation-header {
   @import "../../themes/generated/variables.additional.scss";
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  background-color: $base-bg;
 
   .screen-x-small & {
     padding-left: 20px;

packages/devextreme-cli/src/templates/react/application/src/themes/metadata.additional.json

@@ -1,6 +1,6 @@
 {
   "items": [],
-  "baseTheme": "material.blue.light",
+  "baseTheme": "fluent.blue.light",
   "assetsBasePath": "../../../node_modules/devextreme/dist/css/",
   "outputColorScheme": "additional",
   "makeSwatch": true,

packages/devextreme-cli/src/templates/react/application/src/themes/metadata.base.json

@@ -1,6 +1,6 @@
 {
   "items": [],
-  "baseTheme": "material.blue.light",
+  "baseTheme": "fluent.blue.light",
   "assetsBasePath": "../../../node_modules/devextreme/dist/css/",
   "outputColorScheme": "base",
   "base": true

packages/devextreme-cli/src/templates/vue-v3/application/src/components/side-nav-menu.vue

@@ -111,12 +111,13 @@ export default {
 @import "../dx-styles.scss";
 @import "../themes/generated/variables.additional.scss";
 
-.side-navigation-menu {
+div.dx-swatch-additional.side-navigation-menu {
   display: flex;
   flex-direction: column;
   min-height: 100%;
   height: 100%;
   width: 250px !important;
+  background-color: $base-bg;
 
   .menu-container {
     min-height: 100%;
@@ -132,6 +133,7 @@ export default {
       .dx-treeview-item {
         padding-left: 0;
         flex-direction: row-reverse;
+        border-radius: 0;
 
         .dx-icon {
           width: $side-panel-min-width !important;

packages/devextreme-cli/src/templates/vue-v3/application/src/dx-styles.scss

@@ -64,3 +64,9 @@
  }
 
 $side-panel-min-width: 60px;
+
+.dx-theme-fluent {
+  .dx-drawer-panel-content {
+    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12);
+  }
+}

packages/devextreme-cli/src/templates/vue-v3/application/src/layouts/side-nav-inner-toolbar.vue

@@ -161,6 +161,7 @@ export default {
 #navigation-header {
   @import "../themes/generated/variables.additional.scss";
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  background-color: $base-bg;
 
   .screen-x-small & {
     padding-left: 20px;

packages/devextreme-cli/src/templates/vue-v3/application/src/themes/metadata.additional.json

@@ -1,6 +1,6 @@
 {
   "items": [],
-  "baseTheme": "material.blue.light",
+  "baseTheme": "fluent.blue.light",
   "assetsBasePath": "../../../node_modules/devextreme/dist/css/",
   "outputColorScheme": "additional",
   "makeSwatch": true,

packages/devextreme-cli/src/templates/vue-v3/application/src/themes/metadata.base.json

@@ -1,6 +1,6 @@
 {
   "items": [],
-  "baseTheme": "material.blue.light",
+  "baseTheme": "fluent.blue.light",
   "assetsBasePath": "../../../node_modules/devextreme/dist/css/",
   "outputColorScheme": "base",
   "base": true

packages/devextreme-cli/testing/constants.js

@@ -29,7 +29,8 @@ exports.viewports = {
 
 exports.themes = {
     material: 'material.blue',
-    generic: 'generic'
+    generic: 'generic',
+    fluent: 'fluent.blue'
 };
 
 exports.layouts = [

packages/devextreme-schematics/src/add-layout/files/src/app/layouts/side-nav-inner-toolbar/side-nav-inner-toolbar.component.scss

@@ -5,6 +5,7 @@
 #navigation-header {
   @import "../../../themes/generated/variables.additional.scss";
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  background-color: $base-bg;
 
   :host-context(.screen-x-small) & {
     padding-left: 20px;

packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/side-navigation-menu/side-navigation-menu.component.scss

@@ -1,12 +1,13 @@
 @import "../../../../dx-styles.scss";
 @import "../../../../themes/generated/variables.additional.scss";
 
-:host {
+:host.dx-swatch-additional {
   display: flex;
   flex-direction: column;
   min-height: 100%;
   height: 100%;
   width: 250px !important;
+  background-color: $base-bg;
 
   .menu-container {
     min-height: 100%;
@@ -22,6 +23,7 @@
       .dx-treeview-item {
         padding-left: 0;
         flex-direction: row-reverse;
+        border-radius: 0;
 
         .dx-icon {
           width: $side-panel-min-width !important;

packages/devextreme-schematics/src/add-layout/files/src/dx-styles.scss

@@ -70,3 +70,9 @@ html, body {
 }
 
 $side-panel-min-width: 60px;
+
+.dx-theme-fluent {
+  .dx-drawer-panel-content {
+    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12);
+  }
+}

packages/devextreme-schematics/src/add-layout/files/src/themes/metadata.additional.json

@@ -1,6 +1,6 @@
 {
   "items": [],
-  "baseTheme": "material.blue.light",
+  "baseTheme": "fluent.blue.light",
   "assetsBasePath": "<%= path %>../../node_modules/devextreme/dist/css/",
   "outputColorScheme": "additional",
   "makeSwatch": true,

packages/devextreme-schematics/src/add-layout/files/src/themes/metadata.base.json

@@ -1,6 +1,6 @@
 {
   "items": [],
-  "baseTheme": "material.blue.light",
+  "baseTheme": "fluent.blue.light",
   "assetsBasePath": "<%= path %>../../node_modules/devextreme/dist/css/",
   "outputColorScheme": "base",
   "base": true