Change theme to blue.light (#898)

* Add vadiables and get rid of side menu customizations

* Set light theme by default

* Revert "Set light theme by default"

This reverts commit 0f3f418.

* Add variables module to angular jsson

* Change theme to blue.light

* Chamge theme for vue and react apps

* Remove unused class

* Update theme on CI

* Fix color of inner layout

* Update etalons

Author: dxvladislavvolkov

packages/devextreme-cli/src/templates/react/application/src/components/footer/Footer.scss

@@ -3,7 +3,7 @@
 .footer {
   display: block;
   color: rgba($base-text-color, alpha($base-text-color) * 0.7);
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-top: 1px solid var(--dx-color-border);
   padding-top: 20px;
   padding-bottom: 24px;
   margin: 0 40px;

packages/devextreme-cli/src/templates/react/application/src/components/header/Header.scss

@@ -1,14 +1,14 @@
 @import "../../themes/generated/variables.base.scss";
 @import "../../dx-styles.scss";
 
+header {
+  background-color: $base-bg;
+}
+
 .header-component {
   flex: 0 0 auto;
   z-index: 1;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-
-  .dx-toolbar .dx-toolbar-item.menu-button>.dx-toolbar-item-content .dx-icon {
-    color: $base-accent;
-  }
 }
 
 .dx-toolbar.header-toolbar .dx-toolbar-items-container .dx-toolbar-after {

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

@@ -50,7 +50,7 @@
       .dx-treeview-node {
         &[aria-level='1'] {
           font-weight: bold;
-          border-bottom: 1px solid $base-border-color;
+          border-bottom: 1px solid var(--dx-color-border);
         }
 
         &[aria-level='2'] .dx-treeview-item-content {
@@ -60,32 +60,6 @@
       }
       // ##
     }
-
-    // ## Selected & Focuced items customization
-    .dx-treeview {
-      .dx-treeview-node-container {
-        .dx-treeview-node {
-          &.dx-state-selected:not(.dx-state-focused)> .dx-treeview-item {
-            background: transparent;
-          }
-
-          &.dx-state-selected > .dx-treeview-item * {
-            color: $base-accent;
-          }
-
-          &:not(.dx-state-focused)>.dx-treeview-item.dx-state-hover {
-            background-color: lighten($base-bg, 4.00);
-          }
-        }
-      }
-    }
-
-    .dx-theme-generic .dx-treeview {
-      .dx-treeview-node-container .dx-treeview-node.dx-state-selected.dx-state-focused > .dx-treeview-item * {
-        color: inherit;
-      }
-    }
-    // ##
   }
 }
 

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

@@ -4,13 +4,8 @@
 
 #navigation-header {
   @import "../../themes/generated/variables.additional.scss";
-  background-color: $base-accent;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
 
-  .menu-button .dx-icon {
-    color: $base-text-color;
-  }
-
   .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.orange.dark",
+  "baseTheme": "material.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.orange.light",
+  "baseTheme": "material.blue.light",
   "assetsBasePath": "../../../node_modules/devextreme/dist/css/",
   "outputColorScheme": "base",
   "base": true

packages/devextreme-cli/src/templates/react/application/src/variables.scss

@@ -0,0 +1,18 @@
+$theme-mode: "light" !default;
+
+@use "devextreme/scss/widgets/fluent/colors" as * with ($color: "blue", $mode: $theme-mode);
+@use "devextreme/scss/widgets/fluent/sizes" as * with ($size: "default");
+@use "devextreme/scss/widgets/fluent/fieldset/sizes" as *;
+@use "sass:math";
+@use "sass:color";
+
+:root {
+  --plus-icon-color: #242424;
+  --devextreme-logo-color: #596C7D;
+
+  @if $theme-mode == dark {
+    --plus-icon-color: #fff;
+    --devextreme-logo-color: #fff;
+  }
+
+}

packages/devextreme-cli/src/templates/react/sample-pages/home/home.scss

@@ -1,3 +1,5 @@
+@use "../../variables.scss" as *;
+
 .logos-container {
   margin: 0 0 40px 0;
 
@@ -9,6 +11,16 @@
 .devextreme-logo {
   width: 255px;
   height: 60px;
+
+  > path {
+    fill: var(--devextreme-logo-color);
+  }
+
+  .by-devexpress {
+    path {
+      fill: var(--devextreme-logo-color);
+    }
+  }
 }
 
 .react-logo {
@@ -20,6 +32,10 @@
   margin: 20px;
   width: 22px;
   height: 22px;
+
+  path {
+    fill:  var(--plus-icon-color);
+  }
 }
 
 .screen-x-small .logos-container {

packages/devextreme-cli/src/templates/react/sample-pages/home/home.tsx

@@ -30,7 +30,7 @@ export default function Home() {
               <path d={'M195.989 34.2217C193.335 34.2217 191.241 33.2822 189.705 31.4033C188.181 29.5117 187.419 26.8394 187.419 23.3862C187.419 19.8823 188.111 17.1465 189.495 15.1787C190.879 13.2109 192.809 12.2271 195.284 12.2271C197.595 12.2271 199.417 13.0713 200.75 14.7598C202.083 16.4355 202.749 18.7905 202.749 21.8247V24.5288H192.561C192.599 26.4204 192.986 27.8296 193.723 28.7563C194.459 29.6704 195.475 30.1274 196.77 30.1274C198.42 30.1274 200.108 29.6133 201.835 28.585V32.7554C200.21 33.7329 198.261 34.2217 195.989 34.2217ZM195.246 16.1309C194.522 16.1309 193.926 16.5181 193.456 17.2925C192.986 18.0542 192.713 19.2412 192.637 20.8535H197.779C197.753 19.3047 197.519 18.1304 197.074 17.3306C196.63 16.5308 196.021 16.1309 195.246 16.1309Z'} fill={'#596C7D'}/>
               <path d={'M227.162 33.8408V21.1963C227.162 18.0859 226.394 16.5308 224.858 16.5308C223.741 16.5308 222.941 17.0894 222.458 18.2065C221.976 19.311 221.735 21.0884 221.735 23.5386V33.8408H216.631V21.1963C216.631 18.0859 215.851 16.5308 214.289 16.5308C213.197 16.5308 212.404 17.083 211.909 18.1875C211.414 19.292 211.166 21.1138 211.166 23.6528V33.8408H206.101V12.627H210.119L210.728 15.3501H211.052C211.56 14.271 212.251 13.4839 213.127 12.9888C214.016 12.481 214.962 12.2271 215.965 12.2271C218.555 12.2271 220.281 13.4521 221.145 15.9023H221.335C222.414 13.4521 224.147 12.2271 226.534 12.2271C228.413 12.2271 229.834 12.8872 230.799 14.2075C231.777 15.5278 232.266 17.4575 232.266 19.9966V33.8408H227.162Z'} fill={'#596C7D'}/>
               <path d={'M244.206 34.2217C241.552 34.2217 239.458 33.2822 237.921 31.4033C236.398 29.5117 235.636 26.8394 235.636 23.3862C235.636 19.8823 236.328 17.1465 237.712 15.1787C239.096 13.2109 241.025 12.2271 243.501 12.2271C245.812 12.2271 247.633 13.0713 248.966 14.7598C250.299 16.4355 250.966 18.7905 250.966 21.8247V24.5288H240.778C240.816 26.4204 241.203 27.8296 241.939 28.7563C242.676 29.6704 243.691 30.1274 244.986 30.1274C246.637 30.1274 248.325 29.6133 250.052 28.585V32.7554C248.427 33.7329 246.478 34.2217 244.206 34.2217ZM243.463 16.1309C242.739 16.1309 242.143 16.5181 241.673 17.2925C241.203 18.0542 240.93 19.2412 240.854 20.8535H245.996C245.97 19.3047 245.735 18.1304 245.291 17.3306C244.847 16.5308 244.237 16.1309 243.463 16.1309Z'} fill={'#596C7D'}/>
-              <g opacity={'0.5'}>
+              <g className={'by-devexpress'} opacity={'0.5'}>
                 <path d={'M76.7893 44.2302C77.7542 44.2302 78.5127 44.7095 79.0649 45.668C79.6172 46.6265 79.8933 47.9753 79.8933 49.7146C79.8933 51.4729 79.614 52.8313 79.0554 53.7898C78.5032 54.7483 77.7351 55.2275 76.7512 55.2275C76.2751 55.2275 75.853 55.126 75.4849 54.9229C75.123 54.7134 74.7803 54.3484 74.4565 53.8279H74.2947L73.8662 55.0371H72V40.2217H74.5327V43.6875C74.5327 43.8335 74.5295 43.9858 74.5232 44.1445C74.5168 44.3032 74.4756 44.8586 74.3994 45.8108H74.5327C74.8438 45.2268 75.1802 44.8174 75.542 44.5825C75.9038 44.3477 76.3196 44.2302 76.7893 44.2302ZM75.9133 46.3821C75.4309 46.3821 75.0818 46.6074 74.866 47.0581C74.6565 47.5088 74.5454 48.3022 74.5327 49.4385V49.6956C74.5327 50.927 74.6406 51.7935 74.8564 52.2949C75.0786 52.7964 75.4373 53.0471 75.9324 53.0471C76.8464 53.0471 77.3035 51.9236 77.3035 49.6765C77.3035 47.4802 76.8401 46.3821 75.9133 46.3821Z'} fill={'#596C7D'}/>
                 <path d={'M80.5979 44.4302H83.2258L84.6921 50.4192C84.8381 50.9524 84.9556 51.6982 85.0444 52.6567H85.1016C85.1079 52.5044 85.1365 52.2346 85.1873 51.8474C85.238 51.4539 85.2793 51.146 85.311 50.9238C85.3428 50.7017 85.7808 48.5371 86.625 44.4302H89.291L86.2537 55.7988C85.8855 57.1953 85.3967 58.1982 84.7874 58.8076C84.178 59.417 83.3655 59.7217 82.3499 59.7217C81.8484 59.7217 81.4009 59.6677 81.0073 59.5598V57.4365C81.2676 57.5127 81.5596 57.5508 81.8833 57.5508C82.7339 57.5508 83.2925 56.9922 83.5591 55.875L83.74 55.2085L80.5979 44.4302Z'} fill={'#596C7D'}/>
                 <path d={'M104.202 47.9436C104.202 50.2415 103.732 51.9998 102.792 53.2185C101.859 54.4309 100.514 55.0371 98.7554 55.0371H95.3467V41.1167H99.0696C100.688 41.1167 101.948 41.7166 102.85 42.9163C103.751 44.1096 104.202 45.7854 104.202 47.9436ZM101.545 48.0198C101.545 44.9094 100.688 43.3542 98.9744 43.3542H97.9365V52.771H98.7744C99.7202 52.771 100.418 52.3774 100.869 51.5903C101.32 50.7969 101.545 49.6067 101.545 48.0198Z'} fill={'#596C7D'}/>

packages/devextreme-cli/src/templates/vue-v3/application/src/components/app-footer.vue

@@ -14,7 +14,7 @@
 .footer {
   display: block;
   color: rgba($base-text-color, alpha($base-text-color) * 0.7);
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-top: 1px solid var(--dx-color-border);
   padding-top: 20px;
   padding-bottom: 24px;
   margin: 0 40px;