diff --git a/packages/devextreme-cli/src/commands.json b/packages/devextreme-cli/src/commands.json index 23497b50d..51e291c3a 100644 --- a/packages/devextreme-cli/src/commands.json +++ b/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" diff --git a/packages/devextreme-cli/src/templates/react/application/src/components/side-navigation-menu/SideNavigationMenu.scss b/packages/devextreme-cli/src/templates/react/application/src/components/side-navigation-menu/SideNavigationMenu.scss index cfc42a398..9e68c6457 100644 --- a/packages/devextreme-cli/src/templates/react/application/src/components/side-navigation-menu/SideNavigationMenu.scss +++ b/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; diff --git a/packages/devextreme-cli/src/templates/react/application/src/dx-styles.scss b/packages/devextreme-cli/src/templates/react/application/src/dx-styles.scss index 8cef164e6..817e537e0 100644 --- a/packages/devextreme-cli/src/templates/react/application/src/dx-styles.scss +++ b/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); + } +} diff --git a/packages/devextreme-cli/src/templates/react/application/src/layouts/side-nav-inner-toolbar/side-nav-inner-toolbar.scss b/packages/devextreme-cli/src/templates/react/application/src/layouts/side-nav-inner-toolbar/side-nav-inner-toolbar.scss index 432da7802..d535b78e1 100644 --- a/packages/devextreme-cli/src/templates/react/application/src/layouts/side-nav-inner-toolbar/side-nav-inner-toolbar.scss +++ b/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; diff --git a/packages/devextreme-cli/src/templates/react/application/src/themes/metadata.additional.json b/packages/devextreme-cli/src/templates/react/application/src/themes/metadata.additional.json index f93c5991a..277084b16 100644 --- a/packages/devextreme-cli/src/templates/react/application/src/themes/metadata.additional.json +++ b/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, diff --git a/packages/devextreme-cli/src/templates/react/application/src/themes/metadata.base.json b/packages/devextreme-cli/src/templates/react/application/src/themes/metadata.base.json index 40b4f4fe0..57fe3f826 100644 --- a/packages/devextreme-cli/src/templates/react/application/src/themes/metadata.base.json +++ b/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 diff --git a/packages/devextreme-cli/src/templates/vue-v3/application/src/components/side-nav-menu.vue b/packages/devextreme-cli/src/templates/vue-v3/application/src/components/side-nav-menu.vue index 3a690ec34..1b5595493 100644 --- a/packages/devextreme-cli/src/templates/vue-v3/application/src/components/side-nav-menu.vue +++ b/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; diff --git a/packages/devextreme-cli/src/templates/vue-v3/application/src/dx-styles.scss b/packages/devextreme-cli/src/templates/vue-v3/application/src/dx-styles.scss index b296e1e31..2dd178878 100644 --- a/packages/devextreme-cli/src/templates/vue-v3/application/src/dx-styles.scss +++ b/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); + } +} diff --git a/packages/devextreme-cli/src/templates/vue-v3/application/src/layouts/side-nav-inner-toolbar.vue b/packages/devextreme-cli/src/templates/vue-v3/application/src/layouts/side-nav-inner-toolbar.vue index 33664bca2..da0ed1864 100644 --- a/packages/devextreme-cli/src/templates/vue-v3/application/src/layouts/side-nav-inner-toolbar.vue +++ b/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; diff --git a/packages/devextreme-cli/src/templates/vue-v3/application/src/themes/metadata.additional.json b/packages/devextreme-cli/src/templates/vue-v3/application/src/themes/metadata.additional.json index f93c5991a..277084b16 100644 --- a/packages/devextreme-cli/src/templates/vue-v3/application/src/themes/metadata.additional.json +++ b/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, diff --git a/packages/devextreme-cli/src/templates/vue-v3/application/src/themes/metadata.base.json b/packages/devextreme-cli/src/templates/vue-v3/application/src/themes/metadata.base.json index 40b4f4fe0..57fe3f826 100644 --- a/packages/devextreme-cli/src/templates/vue-v3/application/src/themes/metadata.base.json +++ b/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 diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-large-add-view-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-large-add-view-snap.png new file mode 100644 index 000000000..8f69c1ba6 Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-large-add-view-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-large-home-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-large-home-snap.png new file mode 100644 index 000000000..3f350cfd4 Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-large-home-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-large-profile-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-large-profile-snap.png new file mode 100644 index 000000000..1c55ffc5e Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-large-profile-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-large-tasks-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-large-tasks-snap.png new file mode 100644 index 000000000..6d4f504c8 Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-large-tasks-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-large-toggle-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-large-toggle-snap.png new file mode 100644 index 000000000..10d348dc6 Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-large-toggle-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-large-user-panel-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-large-user-panel-snap.png new file mode 100644 index 000000000..6d973c1da Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-large-user-panel-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-small-add-view-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-small-add-view-snap.png new file mode 100644 index 000000000..984108c44 Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-small-add-view-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-small-home-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-small-home-snap.png new file mode 100644 index 000000000..49faeedc7 Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-small-home-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-small-profile-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-small-profile-snap.png new file mode 100644 index 000000000..d77035ae7 Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-small-profile-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-small-tasks-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-small-tasks-snap.png new file mode 100644 index 000000000..60799668c Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-small-tasks-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-small-toggle-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-small-toggle-snap.png new file mode 100644 index 000000000..5b02ad428 Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-small-toggle-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-small-user-panel-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-small-user-panel-snap.png new file mode 100644 index 000000000..85d12fbba Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-small-user-panel-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-xsmall-add-view-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-xsmall-add-view-snap.png new file mode 100644 index 000000000..7f8fb7d93 Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-xsmall-add-view-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-xsmall-home-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-xsmall-home-snap.png new file mode 100644 index 000000000..a703c453e Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-xsmall-home-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-xsmall-profile-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-xsmall-profile-snap.png new file mode 100644 index 000000000..892f40e66 Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-xsmall-profile-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-xsmall-tasks-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-xsmall-tasks-snap.png new file mode 100644 index 000000000..9c482142a Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-xsmall-tasks-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-xsmall-toggle-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-xsmall-toggle-snap.png new file mode 100644 index 000000000..8afe53fd9 Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-xsmall-toggle-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-xsmall-user-panel-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-xsmall-user-panel-snap.png new file mode 100644 index 000000000..837f2b05c Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-inner-toolbar-fluent-xsmall-user-panel-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-large-add-view-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-large-add-view-snap.png new file mode 100644 index 000000000..5ad49ae45 Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-large-add-view-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-large-change-password-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-large-change-password-snap.png new file mode 100644 index 000000000..143c73cd5 Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-large-change-password-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-large-create-account-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-large-create-account-snap.png new file mode 100644 index 000000000..2ebcf451e Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-large-create-account-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-large-home-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-large-home-snap.png new file mode 100644 index 000000000..c6e07ee9e Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-large-home-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-large-login-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-large-login-snap.png new file mode 100644 index 000000000..2334f54db Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-large-login-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-large-profile-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-large-profile-snap.png new file mode 100644 index 000000000..cb67cef5e Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-large-profile-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-large-reset-password-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-large-reset-password-snap.png new file mode 100644 index 000000000..6bcdbd11e Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-large-reset-password-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-large-tasks-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-large-tasks-snap.png new file mode 100644 index 000000000..82ecaf795 Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-large-tasks-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-large-toggle-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-large-toggle-snap.png new file mode 100644 index 000000000..5cfba6a6a Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-large-toggle-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-large-user-panel-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-large-user-panel-snap.png new file mode 100644 index 000000000..6d973c1da Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-large-user-panel-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-small-add-view-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-small-add-view-snap.png new file mode 100644 index 000000000..7243a279b Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-small-add-view-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-small-change-password-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-small-change-password-snap.png new file mode 100644 index 000000000..8abd397c5 Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-small-change-password-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-small-create-account-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-small-create-account-snap.png new file mode 100644 index 000000000..87b535b5e Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-small-create-account-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-small-home-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-small-home-snap.png new file mode 100644 index 000000000..9e68ece64 Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-small-home-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-small-login-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-small-login-snap.png new file mode 100644 index 000000000..c4e2b4143 Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-small-login-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-small-profile-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-small-profile-snap.png new file mode 100644 index 000000000..511399cc1 Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-small-profile-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-small-reset-password-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-small-reset-password-snap.png new file mode 100644 index 000000000..8c7e03583 Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-small-reset-password-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-small-tasks-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-small-tasks-snap.png new file mode 100644 index 000000000..f20f57eee Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-small-tasks-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-small-toggle-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-small-toggle-snap.png new file mode 100644 index 000000000..19b1120af Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-small-toggle-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-small-user-panel-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-small-user-panel-snap.png new file mode 100644 index 000000000..85d12fbba Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-small-user-panel-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-xsmall-add-view-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-xsmall-add-view-snap.png new file mode 100644 index 000000000..7c15be88f Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-xsmall-add-view-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-xsmall-change-password-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-xsmall-change-password-snap.png new file mode 100644 index 000000000..52da38e36 Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-xsmall-change-password-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-xsmall-create-account-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-xsmall-create-account-snap.png new file mode 100644 index 000000000..14849a80b Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-xsmall-create-account-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-xsmall-home-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-xsmall-home-snap.png new file mode 100644 index 000000000..4e5ae67ca Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-xsmall-home-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-xsmall-login-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-xsmall-login-snap.png new file mode 100644 index 000000000..4966a89b7 Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-xsmall-login-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-xsmall-profile-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-xsmall-profile-snap.png new file mode 100644 index 000000000..8adc4ed0c Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-xsmall-profile-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-xsmall-reset-password-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-xsmall-reset-password-snap.png new file mode 100644 index 000000000..6dda9382c Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-xsmall-reset-password-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-xsmall-tasks-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-xsmall-tasks-snap.png new file mode 100644 index 000000000..a95ab3252 Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-xsmall-tasks-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-xsmall-toggle-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-xsmall-toggle-snap.png new file mode 100644 index 000000000..b34c493e8 Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-xsmall-toggle-snap.png differ diff --git a/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-xsmall-user-panel-snap.png b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-xsmall-user-panel-snap.png new file mode 100644 index 000000000..79fd56735 Binary files /dev/null and b/packages/devextreme-cli/testing/__tests__/__image_snapshots__/side-nav-outer-toolbar-fluent-xsmall-user-panel-snap.png differ diff --git a/packages/devextreme-cli/testing/constants.js b/packages/devextreme-cli/testing/constants.js index 5258ed07f..a831f6bf3 100644 --- a/packages/devextreme-cli/testing/constants.js +++ b/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 = [ diff --git a/packages/devextreme-schematics/src/add-layout/files/src/app/layouts/side-nav-inner-toolbar/side-nav-inner-toolbar.component.scss b/packages/devextreme-schematics/src/add-layout/files/src/app/layouts/side-nav-inner-toolbar/side-nav-inner-toolbar.component.scss index 376f4c93a..908637684 100644 --- a/packages/devextreme-schematics/src/add-layout/files/src/app/layouts/side-nav-inner-toolbar/side-nav-inner-toolbar.component.scss +++ b/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; diff --git a/packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/side-navigation-menu/side-navigation-menu.component.scss b/packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/side-navigation-menu/side-navigation-menu.component.scss index 63e4f4c60..a3cc14259 100644 --- a/packages/devextreme-schematics/src/add-layout/files/src/app/shared/components/side-navigation-menu/side-navigation-menu.component.scss +++ b/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; diff --git a/packages/devextreme-schematics/src/add-layout/files/src/dx-styles.scss b/packages/devextreme-schematics/src/add-layout/files/src/dx-styles.scss index dce1c4eb5..5822e87a6 100644 --- a/packages/devextreme-schematics/src/add-layout/files/src/dx-styles.scss +++ b/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); + } +} diff --git a/packages/devextreme-schematics/src/add-layout/files/src/themes/metadata.additional.json b/packages/devextreme-schematics/src/add-layout/files/src/themes/metadata.additional.json index f010a2dba..3992905ea 100644 --- a/packages/devextreme-schematics/src/add-layout/files/src/themes/metadata.additional.json +++ b/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, diff --git a/packages/devextreme-schematics/src/add-layout/files/src/themes/metadata.base.json b/packages/devextreme-schematics/src/add-layout/files/src/themes/metadata.base.json index d47bac496..2f0267e55 100644 --- a/packages/devextreme-schematics/src/add-layout/files/src/themes/metadata.base.json +++ b/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