refactor(@theme): refactor app styles

src/app/@theme/layouts/base-footer/_base-footer.component.theme.scss

@@ -1,9 +1,4 @@
 @mixin base-footer-theme() {
   /deep/ base-footer {
-    color: $nga-color-default;
-
-    a:hover {
-      color: $nga-color-secondary !important;
-    }
   }
 }

src/app/@theme/layouts/base-header/_base-header.component.theme.scss

@@ -1,28 +1,16 @@
 @mixin base-header-theme() {
   /deep/ base-header {
-    i.control-icon {
-      &:hover {
-        color: $nga-color-secondary;
-      }
-    }
+    .logo > a {
+      color: $nga-color-secondary !important;
 
-    .logo {
-      span {
-        color: $nga-color-secondary;
-      }
-
-      &:hover {
-        color: $nga-color-default;
-
-        span {
-          color: $nga-color-default;
-        }
+      @include hover-focus-active {
+        color: $nga-color-inverse !important;
       }
     }
 
     .left > *,
     .right > * {
-      border-color: rgba($nga-color-default, 0.2);
+      border-color: rgba($nga-color-inverse, 0.2);
     }
   }
 }

src/app/@theme/layouts/base-header/base-header.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 
 import { NgaSidebarService, NgaMenuService } from '@nga/theme';
+import { NgaThemeService } from '@nga/theme/services/theme.service';
 
 @Component({
   selector: 'base-header',
@@ -8,7 +9,8 @@ import { NgaSidebarService, NgaMenuService } from '@nga/theme';
   template: `
     <div class="left">
       <i class="control-icon ion ion-navicon" (click)="toggleSidebar()"></i>
-      <span class="logo" (click)="goToHome()">NgX &nbsp; <span>Admin</span></span>
+      <span class="logo" (click)="goToHome()">NgX &nbsp; <a>Admin</a></span>
+      <button (click)="switchTheme()">Switch Theme!</button>
     </div>
     <div class="right">
       <search-input></search-input>
@@ -21,7 +23,8 @@ import { NgaSidebarService, NgaMenuService } from '@nga/theme';
 })
 export class BaseHeaderComponent {
   constructor(private sidebarService: NgaSidebarService,
-              private menuService: NgaMenuService) {
+              private menuService: NgaMenuService,
+              private themeService: NgaThemeService) {
   }
 
   toggleSidebar() {
@@ -31,4 +34,12 @@ export class BaseHeaderComponent {
   goToHome() {
     this.menuService.navigateHome();
   }
+
+  switchTheme() {
+    if (this.themeService.currentTheme == 'pure') {
+      this.themeService.changeTheme('gorgeous');
+    } else {
+      this.themeService.changeTheme('pure');
+    }
+  }
 }

src/app/@theme/search-input/_search-input.component.theme.scss

@@ -1,9 +1,4 @@
 @mixin search-input-theme() {
   /deep/ search-input {
-    i.control-icon {
-      &:hover {
-        color: $nga-color-secondary;
-      }
-    }
   }
 }

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

@@ -0,0 +1,7 @@
+@import '~@nga/theme/styles/themes/nga.theme.default';
+@import '../components';
+@import 'gorgeous.variables';
+
+@include nga-theme('gorgeous') {
+  @include custom-components-theme();
+}

src/app/@theme/styles/pure/_pure.variables.scss

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

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

@@ -1,17 +1,14 @@
-@import '~@nga/theme/styles/themes/nga.theme.default';
 @import '../components';
 @import 'pure.variables';
 
+@import '~@nga/theme/styles/themes/nga.theme.default';
+
 @include nga-theme('pure') {
-  color: $nga-color-default;
-
-  input {
-    color: $nga-color-default;
-  }
-
-  a:hover {
-    color: $nga-color-secondary;
-    text-decoration: none;
+  a, i {
+    @include hover-focus-active {
+      color: $nga-color-secondary !important;
+      text-decoration: none;
+    }
   }
 
   nga-layout-header > nav {
@@ -33,16 +30,12 @@
 
         transition: all 0.2s ease;
         padding: 0.375rem 0 0.375rem 1rem;
-
-        &:hover {
-          background: $nga-color-primary;
-          color: $nga-color-default;
-        }
+        color: $nga-color-inverse;
 
         &.active {
+          color: $nga-color-inverse !important;
+          background: $nga-background;
           font-weight: bold;
-          color: $nga-color-default;
-          background: $nga-color-primary;
         }
 
         i {

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

@@ -1 +1,2 @@
-@import 'pure/pure.theme';
+@import 'pure/pure.theme';
+@import 'gorgeous/gorgeous.theme';