refactor(styles): huge styles refactoring

src/app/@theme/components/header/_header.component.theme.scss

@@ -1,11 +1,4 @@
 @mixin base-header-theme($theme-name) {
   /deep/ header {
-    .logo > a {
-      color: $nga-color-secondary !important;
-
-      @include hover-focus-active {
-        color: $nga-color-inverse !important;
-      }
-    }
   }
 }

src/app/@theme/components/header/header.component.ts

@@ -18,7 +18,7 @@ import { NgaThemeService } from '@nga/theme/services/theme.service';
       <nga-action icon="ion-ios-email-outline"></nga-action>
       <nga-action disabled icon="ion-ios-bell-outline"></nga-action>
       <nga-action>
-        <nga-user [menu]="userMenu" name="Han Solo"></nga-user>
+        <nga-user inverse [menu]="userMenu" name="Han Solo"></nga-user>
       </nga-action>
       <nga-action icon="ion-ios-gear-outline"></nga-action>
     </nga-actions>
@@ -49,10 +49,10 @@ export class HeaderComponent {
   }
 
   switchTheme() {
-    if (this.themeService.currentTheme == 'pure') {
+    if (this.themeService.currentTheme == 'light') {
-      this.themeService.changeTheme('gorgeous');
+      this.themeService.changeTheme('cosmic');
     } else {
-      this.themeService.changeTheme('pure');
+      this.themeService.changeTheme('light');
     }
   }
 }

src/app/@theme/styles/cosmic/cosmic.theme.scss

@@ -3,13 +3,13 @@
  * Copyright Akveo. All Rights Reserved.
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
-@import 'variables';
 @import '../components';
+@import 'variables';
+
+@import '~@nga/theme/styles/themes/nga.theme.cosmic';
 @import 'overrides/all';
 
-@import '~@nga/theme/styles/themes/nga.theme.default';
+$theme-name: 'cosmic';
-
-$theme-name: 'pure';
 
 // @nga/theme module styles
 @include nga-theme($theme-name) {

src/app/@theme/styles/cosmic/overrides/_nga-layout.scss

@@ -1,20 +1,9 @@
-@mixin nga-layout-override($theme-name) {
+@mixin nga-layout-override($theme-name) {;
-  $layout-shadow: 0 8px 20px 0 rgba(37, 26, 75, 0.68);
 
+  // TODO: refactor this
   /deep/ .layout {
-    a {
-      @include hover-focus-active {
-        color: $nga-color-secondary !important;
-        text-decoration: none;
-      }
-    }
 
     nga-layout-header > nav {
-      box-shadow: $layout-shadow;
-
-      i:hover {
-        color: $nga-color-secondary;
-      }
 
       .left {
         color: $nga-color-inverse;
@@ -42,19 +31,17 @@
       background: transparent;
 
       .scrollable {
-        box-shadow: $layout-shadow;
+        //box-shadow: $layout-shadow;
         margin-top: $nga-layout-padding;
         border-top-right-radius: $nga-radius;
       }
     }
 
     nga-layout-footer > nav {
-      $footer-text: #7d85b2;
       $footer-link: $nga-color-secondary;
 
       border: none !important;
       padding: 1.25rem;
-      box-shadow: $layout-shadow;
 
       .created-by {
         color: #7d85b2;

src/app/@theme/styles/cosmic/overrides/_nga-menu.scss

@@ -0,0 +1,14 @@
+@mixin nga-menu-override($theme-name) {
+  /deep/ nga-menu {
+    > ul > li:first-child {
+      a {
+        background-image: linear-gradient(to right, #664dd9, #9d52f2) !important;
+        box-shadow: 0 0 12px 0 rgba(128, 51, 255, 0.35) !important;
+        margin: 1rem;
+        border-radius: $nga-radius;
+        height: 3.5rem;
+        color: $nga-color-inverse;
+      }
+    }
+  }
+}

src/app/@theme/styles/gorgeous/_variables.scss

@@ -1,21 +0,0 @@
-$nga-color-default: #2f2e66;
-$nga-color-secondary: #a1a1e6;
-$nga-color-inverse: white;
-
-$nga-foreground: $nga-color-inverse;
-$nga-background: #20274f;
-
-$nga-foreground-inverse: $nga-color-secondary;
-
-$nga-layout-padding: 2.5rem;
-
-$nga-header-height: 4.725rem;
-$nga-header-padding: 1.25rem;
-
-$nga-footer-height: $nga-header-height;
-
-$nga-sidebar-width: 16.25rem;
-$nga-sidebar-width-compact: 3.45rem;
-$nga-sidebar-padding: 0;
-
-$nga-card-background: $nga-color-default;

src/app/@theme/styles/gorgeous/overrides/_nga-menu.scss

@@ -1,46 +0,0 @@
-@mixin nga-menu-override($theme-name) {
-  /deep/ nga-menu {
-    ul li {
-      &:first-child {
-        a {
-          background-image: linear-gradient(to right, #664dd9, #9d52f2) !important;
-          box-shadow: 0 0 12px 0 rgba(128, 51, 255, 0.35) !important;
-          margin: 1rem;
-          border-radius: $nga-radius;
-          height: 3.5rem;
-          color: $nga-color-inverse;
-        }
-      }
-
-      a,
-      & > span.menu-group {
-        display: flex;
-        align-items: center;
-
-        transition: all 0.2s ease;
-        padding: 0.375rem 0 0.375rem 1rem;
-        color: $nga-color-secondary;
-
-        &.active {
-          background: $nga-background;
-          font-weight: bold;
-        }
-
-        i {
-          font-size: 2rem;
-          margin-right: 1.25rem;
-
-          &:first-child {
-            display: flex;
-            justify-content: center;
-          }
-        }
-      }
-
-      & > span.menu-group {
-        color: $nga-color-inverse;
-        font-size: 1rem;
-      }
-    }
-  }
-}

src/app/@theme/styles/light/light.theme.scss

@@ -4,12 +4,11 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 @import '../components';
-@import 'variables';
-
-@import '~@nga/theme/styles/themes/nga.theme.default';
 @import 'overrides/all';
 
-$theme-name: 'gorgeous';
+@import '~@nga/theme/styles/themes/nga.theme.light';
+
+$theme-name: 'light';
 
 // @nga/theme module styles
 @include nga-theme($theme-name) {

src/app/@theme/styles/light/overrides/all.scss

@@ -0,0 +1,2 @@
+@mixin nga-theme-overrides($theme-name) {
+}

src/app/@theme/styles/pure/_variables.scss

@@ -1,17 +0,0 @@
-$nga-color-default: white;
-$nga-color-secondary: #b5bbd5;
-$nga-color-inverse: #7d85b2;
-
-$nga-foreground: $nga-color-inverse;
-$nga-background: #edf1f7;
-
-$nga-header-height: 4.725rem;
-$nga-header-padding: 1.25rem;
-
-$nga-footer-height: $nga-header-height;
-
-$nga-sidebar-width: 16.25rem;
-$nga-sidebar-width-compact: 3.45rem;
-$nga-sidebar-padding: 0;
-
-$nga-user-picture-background: $nga-background;

src/app/@theme/styles/pure/overrides/_nga-layout.scss

@@ -1,27 +0,0 @@
-@mixin nga-layout-override($theme-name) {
-  $layout-border-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08);
-
-  /deep/ .layout {
-    a, i {
-      @include hover-focus-active {
-        color: $nga-color-secondary !important;
-        text-decoration: none;
-      }
-    }
-
-    nga-layout-header > nav {
-      box-shadow: $layout-border-shadow;
-    }
-
-    nga-sidebar {
-      z-index: 1;
-      box-shadow: $layout-border-shadow;
-    }
-
-    nga-layout-footer > nav {
-      box-shadow: $layout-border-shadow;
-      border: none !important;
-      padding: 1.25rem;
-    }
-  }
-}

src/app/@theme/styles/pure/overrides/_nga-menu.scss

@@ -1,39 +0,0 @@
-@mixin nga-menu-override($theme-name) {
-  /deep/ nga-menu {
-    ul li {
-      transition: all 0.2s ease;
-
-      &:first-child {
-        margin-top: 3rem;
-      }
-
-      a, & > span.menu-group {
-        display: flex;
-        align-items: center;
-        padding: 0.375rem 0 0.375rem 1rem;
-        color: $nga-color-inverse;
-
-        &.active {
-          color: $nga-color-inverse !important;
-          background: $nga-background;
-          font-weight: bold;
-        }
-
-        i {
-          font-size: 2rem;
-          margin-right: 1.25rem;
-
-          &:first-child {
-            display: flex;
-            justify-content: center;
-          }
-        }
-      }
-
-      & > span.menu-group {
-        opacity: 0.8;
-        font-size: 1rem;
-      }
-    }
-  }
-}

src/app/@theme/styles/pure/overrides/all.scss

@@ -1,7 +0,0 @@
-@import 'nga-layout';
-@import 'nga-menu';
-
-@mixin nga-theme-overrides($theme-name) {
-  @include nga-layout-override($theme-name);
-  @include nga-menu-override($theme-name);
-}

src/app/pages/pages.component.ts

@@ -1,13 +1,13 @@
 import { Component } from '@angular/core';
 
-import 'style-loader!../@theme/styles/gorgeous/gorgeous.theme.scss';
+import 'style-loader!../@theme/styles/cosmic/cosmic.theme.scss';
-import 'style-loader!../@theme/styles/pure/pure.theme.scss';
+import 'style-loader!../@theme/styles/light/light.theme.scss';
 
 @Component({
   selector: 'ngx-pages',
   template: `
     <ngx-one-column-layout>
-      <nga-menu></nga-menu>
+      <nga-menu inverse></nga-menu>
       <router-outlet></router-outlet>
     </ngx-one-column-layout>
   `,

src/app/pages/pages.module.ts

@@ -22,7 +22,7 @@ const PAGES_COMPONENTS = [
 
 @NgModule({
   imports: [
-    NgaThemeModule.forRoot({ name: 'gorgeous' }),
+    NgaThemeModule.forRoot({ name: 'cosmic' }),
     NgaSidebarModule.forRoot(),
     NgaMenuModule.forRoot({ items: menuItems }),
     PagesRoutingModule,