refactor(styles): complete styles refactoring

src/app/@theme/layouts/one-column/one-column.layout.scss

@@ -1,4 +1,4 @@
-@import '~@nga/theme/styles/component';
+@import '../../styles/variables';
 
 // TODO move colors to theme
 @include nga-install-component() {

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

@@ -0,0 +1,3 @@
+@mixin ngx-global-theme() {
+  // any global, non-component styles go here
+}

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

@@ -0,0 +1,16 @@
+// themes - our custom or/and out of the box themes
+@import 'variables';
+
+// framework component themes (styles tied to theme variables)
+@import '~@nga/theme/styles/globals';
+@import '~@nga/auth/styles/all';
+
+// custom global styles
+@import 'global';
+
+// install the framework and custom global styles
+@include nga-install() {
+  @include nga-theme-global();
+  @include nga-auth-global();
+  @include ngx-global-theme();
+};

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

@@ -1,7 +0,0 @@
-@import '~@nga/theme/styles/all';
-@include nga-themes-install() {
-  // write global styles here
-}
-
-@import '~@nga/auth/styles/all';
-@include nga-auth-install();

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

@@ -0,0 +1,19 @@
+// nga theming framework
+@import '~@nga/theme/styles/theming';
+// nga our of the box themes
+@import '~@nga/theme/styles/themes';
+
+// which themes you what to enable (empty to enable all - not recommended)
+$nga-enabled-themes: (default, light, cosmic);
+
+$nga-themes: nga-register-theme((
+ // app wise variables for each theme
+), default, default);
+
+$nga-themes: nga-register-theme((
+  // app wise variables for each theme
+), cosmic, cosmic);
+
+$nga-themes: nga-register-theme((
+  // app wise variables for each theme
+), light, light);

src/app/pages/charts/echarts/echarts.component.scss

@@ -1,4 +1,4 @@
-@import '~@nga/theme/styles/component';
+@import '../../../@theme/styles/variables';
 
 @include nga-install-component() {
   display: block;

src/app/pages/dashboard/dashboard.component.scss

@@ -1,4 +1,4 @@
-@import '~@nga/theme/styles/component';
+@import '../../@theme/styles/variables';
 @import '~@nga/theme/styles/global/bootstrap/hero-buttons';
 
 @include nga-install-component() {

src/app/pages/dashboard/status-cards/status-cards.component.scss

@@ -1,4 +1,4 @@
-@import '~@nga/theme/styles/component';
+@import '../../../@theme/styles/variables';
 @import '~@nga/theme/styles/global/bootstrap/hero-buttons';
 
 @include nga-install-component() {

src/app/pages/maps/gmaps/gmaps.component.scss

@@ -1,4 +1,4 @@
-@import '~@nga/theme/styles/component';
+@import '../../../@theme/styles/variables';
 
 @include nga-install-component() {
   /deep/ agm-map .agm-map-container-inner {

src/app/pages/maps/leaflet/leaflet.component.scss

@@ -1,4 +1,4 @@
-@import '~@nga/theme/styles/component';
+@import '../../../@theme/styles/variables';
 
 @include nga-install-component() {
   display: block;

src/app/pages/pages.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 
-import 'style-loader!../@theme/styles/themes.scss';
+import 'style-loader!../@theme/styles/styles.scss';
 
 @Component({
   selector: 'ngx-pages',

src/app/pages/ui-features/buttons/buttons.component.scss

@@ -1,4 +1,4 @@
-@import '~@nga/theme/styles/component';
+@import '../../../@theme/styles/variables';
 @import '~@nga/theme/styles/global/bootstrap/buttons';
 
 @mixin btn-bg($background) {