refactor(theme): massive theme refactoring to use mixins instead of variables

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

@@ -0,0 +1,75 @@
+@import '~@nga/theme/styles_new/all';
+
+// TODO move colors to theme
+@include nga-install-component() {
+  /deep/ {
+    .layout {
+
+      nga-layout-header > nav {
+
+        .left {
+          color: nga-theme(color-inverse);
+
+          a {
+            color: nga-theme(color-inverse) !important;
+
+            &:hover {
+              color: nga-theme(color-secondary) !important;
+            }
+          }
+        }
+
+        .right i {
+          color: #7d85b2;
+
+          &:hover {
+            color: nga-theme(color-secondary);
+          }
+        }
+      }
+
+      nga-sidebar {
+        z-index: 1;
+        background: transparent;
+
+        .scrollable {
+          //box-shadow: $layout-shadow;
+          margin-top: nga-theme(layout-padding);
+          border-top-right-radius: nga-theme(radius);
+        }
+      }
+
+      nga-layout-footer > nav {
+        $footer-link: nga-theme(color-secondary);
+
+        border: none !important;
+        padding: 1.25rem;
+
+        .created-by {
+          color: #7d85b2;
+
+          a {
+            color: #7d85b2 !important;
+
+            &:hover {
+              color: nga-theme(color-secondary) !important;
+            }
+          }
+        }
+      }
+    }
+
+    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-theme(radius);
+          height: 3.5rem;
+          color: nga-theme(color-inverse);
+        }
+      }
+    }
+  }
+}

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

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'ngx-one-column-layout',
+  styleUrls: ['./one-column.layout.scss'],
   template: `
     <nga-layout>
       <nga-layout-header fixed>

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

@@ -1,71 +0,0 @@
-@mixin ngx-layout-theme($theme-name) {
-
-  .layout {
-
-    nga-layout-header > nav {
-
-      .left {
-        color: $nga-color-inverse;
-
-        a {
-          color: $nga-color-inverse !important;
-
-          &:hover {
-            color: $nga-color-secondary !important;
-          }
-        }
-      }
-
-      .right i {
-        color: #7d85b2;
-
-        &:hover {
-          color: $nga-color-secondary;
-        }
-      }
-    }
-
-    nga-sidebar {
-      z-index: 1;
-      background: transparent;
-
-      .scrollable {
-        //box-shadow: $layout-shadow;
-        margin-top: $nga-layout-padding;
-        border-top-right-radius: $nga-radius;
-      }
-    }
-
-    nga-layout-footer > nav {
-      $footer-link: $nga-color-secondary;
-
-      border: none !important;
-      padding: 1.25rem;
-
-      .created-by {
-        color: #7d85b2;
-
-        a {
-          color: #7d85b2 !important;
-
-          &:hover {
-            color: $nga-color-secondary !important;
-          }
-        }
-      }
-    }
-  }
-
-  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/cosmic/_misc.scss

@@ -1,15 +0,0 @@
-@mixin ngx-misc-theme($theme-name) {
-  agm-map {
-    .agm-map-container-inner {
-      height: calc(#{$nga-card-height-xmedium} - 50px);
-    }
-  }
-
-  .leaflet-container {
-    height: calc(#{$nga-card-height-xmedium} - 50px);
-  }
-
-  .echart {
-    height: calc(#{$nga-card-height-xmedium} - 50px);
-  }
-}

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

@@ -1,21 +0,0 @@
-/**
- * @license
- * Copyright Akveo. All Rights Reserved.
- * Licensed under the MIT License. See License.txt in the project root for license information.
- */
-
-$nga-theme: 'cosmic';
-
-@import '~@nga/theme/styles/themes/cosmic/theme';
-@import './layout';
-@import './buttons';
-@import './misc';
-
-@include nga-theme-install($nga-theme) {
-  @include ngx-layout-theme($nga-theme);
-  @include ngx-buttons-theme($nga-theme);
-  @include ngx-misc-theme($nga-theme);
-};
-
-@import '~@nga/auth/styles/themes/cosmic/theme';
-@include nga-auth-install($nga-theme);

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

@@ -1,2 +0,0 @@
-@mixin ngx-buttons-theme($theme-name) {
-}

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

@@ -1,15 +0,0 @@
-@mixin ngx-misc-theme($theme-name) {
-  agm-map {
-    .agm-map-container-inner {
-      height: calc(#{$nga-card-height-xmedium} - 50px);
-    }
-  }
-
-  .leaflet-container {
-    height: calc(#{$nga-card-height-xmedium} - 50px);
-  }
-
-  .echart {
-    height: calc(#{$nga-card-height-xmedium} - 50px);
-  }
-}

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

@@ -1,19 +0,0 @@
-/**
- * @license
- * Copyright Akveo. All Rights Reserved.
- * Licensed under the MIT License. See License.txt in the project root for license information.
- */
-
-$nga-theme: 'default';
-
-@import '~@nga/theme/styles/themes/default/theme';
-@import './buttons';
-@import './misc';
-
-@include nga-theme-install($nga-theme) {
-  @include ngx-buttons-theme($nga-theme);
-  @include ngx-misc-theme($nga-theme);
-};
-
-@import '~@nga/auth/styles/themes/default/theme';
-@include nga-auth-install($nga-theme);

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

@@ -1,2 +0,0 @@
-@mixin ngx-buttons-theme($theme-name) {
-}

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

@@ -1,15 +0,0 @@
-@mixin ngx-misc-theme($theme-name) {
-  agm-map {
-    .agm-map-container-inner {
-      height: calc(#{$nga-card-height-xmedium} - 50px);
-    }
-  }
-
-  .leaflet-container {
-    height: calc(#{$nga-card-height-xmedium} - 50px);
-  }
-
-  .echart {
-    height: calc(#{$nga-card-height-xmedium} - 50px);
-  }
-}

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

@@ -1,19 +0,0 @@
-/**
- * @license
- * Copyright Akveo. All Rights Reserved.
- * Licensed under the MIT License. See License.txt in the project root for license information.
- */
-
-$nga-theme: 'light';
-
-@import '~@nga/theme/styles/themes/light/theme';
-@import './buttons';
-@import './misc';
-
-@include nga-theme-install($nga-theme) {
-  @include ngx-buttons-theme($nga-theme);
-  @include ngx-misc-theme($nga-theme);
-};
-
-@import '~@nga/auth/styles/themes/light/theme';
-@include nga-auth-install($nga-theme);

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

@@ -0,0 +1,2 @@
+@import '~@nga/theme/styles_new/all';
+@include nga-install();

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

@@ -1,3 +1,9 @@
-:host {
+@import '~@nga/theme/styles_new/all';
+
+@include nga-install-component() {
   display: block;
+
+  /deep/ .echart {
+    height: calc(#{nga-theme(card-height-xmedium)} - 50px);
+  }
 }

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

@@ -0,0 +1,7 @@
+@import '~@nga/theme/styles_new/all';
+
+@include nga-install-component() {
+  /deep/ agm-map .agm-map-container-inner {
+    height: calc(#{nga-theme(card-height-xmedium)} - 50px);
+  }
+}

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

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'ngx-gmaps',
+  styleUrls: ['./gmaps.component.scss'],
   templateUrl: './gmaps.component.html',
 })
 export class GmapsComponent {

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

@@ -1,3 +1,9 @@
-:host {
+@import '~@nga/theme/styles_new/all';
+
+@include nga-install-component() {
   display: block;
+
+  /deep/ .leaflet-container {
+    height: calc(#{nga-theme(card-height-xmedium)} - 50px);
+  }
 }

src/app/pages/pages.component.ts

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

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

@@ -1,4 +1,24 @@
-@mixin ngx-buttons-theme($theme-name) {
+@import '~@nga/theme/styles_new/all';
+
+@mixin btn-component($bevel-bd, $glow, $shadow) {
+  .bevel-border {
+    box-shadow: 0 3px 0 0 $bevel-bd;
+  }
+
+  .shadow {
+    box-shadow: 0 4px 10px 0 $shadow;
+  }
+
+  .glow {
+    box-shadow: 0 2px 12px 0 $glow;
+  }
+}
+
+@mixin btn-bg($background) {
+  background-color: $background;
+}
+
+@include nga-install-component() {
 
   $btn-component-size: 50px;
   $btn-component-bd-radius: 12px;
@@ -37,8 +57,8 @@
   }
 
   .example-container .container-title {
+    font-family: nga-theme(font-secondary);
     margin-bottom: 14px;
-    font-family: Exo;
   }
 
   .example-container .container-btn {
@@ -46,26 +66,13 @@
   }
 
   .hero-buttons {
-    @mixin btn-component($bevel-bd, $glow, $shadow) {
-      .bevel-border {
-        box-shadow: 0 3px 0 0 $bevel-bd;
-      }
-
-      .shadow {
-        box-shadow: 0 4px 10px 0 $shadow;
-      }
-
-      .glow {
-        box-shadow: 0 2px 12px 0 $glow;
-      }
-    }
 
     .example-container .states-container.primary-container {
       .gradient {
         @include primary-gradient();
       }
 
-      @include btn-component($btn-primary-bevel-bd, $btn-primary-glow, $btn-primary-shadow);
+      @include btn-component(nga-theme(btn-primary-bevel-bd), nga-theme(btn-primary-glow), nga-theme(btn-primary-shadow));
     }
 
     .example-container .states-container.warning-container {
@@ -73,7 +80,7 @@
         @include warning-gradient();
       }
 
-      @include btn-component($btn-warning-bevel-bd, $btn-warning-glow, $btn-warning-shadow);
+      @include btn-component(nga-theme(btn-warning-bevel-bd), nga-theme(btn-warning-glow), nga-theme(btn-warning-shadow));
     }
 
     .example-container .states-container.success-container {
@@ -81,7 +88,7 @@
         @include success-gradient();
       }
 
-      @include btn-component($btn-success-bevel-bd, $btn-success-glow, $btn-success-shadow);
+      @include btn-component(nga-theme(btn-success-bevel-bd), nga-theme(btn-success-glow), nga-theme(btn-success-shadow));
     }
 
     .example-container .states-container.info-container {
@@ -89,7 +96,7 @@
         @include info-gradient();
       }
 
-      @include btn-component($btn-info-bevel-bd, $btn-info-glow, $btn-info-shadow);
+      @include btn-component(nga-theme(btn-info-bevel-bd), nga-theme(btn-info-glow), nga-theme(btn-info-shadow));
     }
 
     .example-container .states-container.danger-container {
@@ -97,16 +104,16 @@
         @include danger-gradient();
       }
 
-      @include btn-component($btn-danger-bevel-bd, $btn-danger-glow, $btn-danger-shadow);
+      @include btn-component(nga-theme(btn-danger-bevel-bd), nga-theme(btn-danger-glow), nga-theme(btn-danger-shadow));
     }
 
     .example-container .states-container.secondary-container {
       .border {
-        color: $btn-secondary-color;
+        color: nga-theme(btn-secondary-color);
-        border: $btn-secondary-border-width solid $btn-secondary-border;
+        border: nga-theme(btn-secondary-border-width) solid nga-theme(btn-secondary-border);
       }
 
-      @include btn-component($btn-secondary-bevel-bd, $btn-secondary-glow, $btn-secondary-shadow);
+      @include btn-component(nga-theme(btn-secondary-bevel-bd), nga-theme(btn-secondary-glow), nga-theme(btn-secondary-shadow));
     }
   }
 
@@ -114,91 +121,87 @@
     $btn-component-size: 50px;
     $btn-component-bd-radius: 12px;
 
-    @mixin btn-bg($background) {
-      background-color: $background;
-    }
-
     .example-container .states-container.primary-container {
       .original {
-        @include btn-bg($btn-primary-bg);
+        @include btn-bg(nga-theme(btn-primary-bg));
       }
 
       .hover {
-        @include btn-bg($btn-primary-bg-hover-focus);
+        @include btn-bg(nga-theme(btn-primary-bg-hover-focus));
       }
 
       .active {
-        @include btn-bg($btn-primary-bg-active);
+        @include btn-bg(nga-theme(btn-primary-bg-active));
       }
     }
 
     .example-container .states-container.warning-container {
       .original {
-        @include btn-bg($btn-warning-bg);
+        @include btn-bg(nga-theme(btn-warning-bg));
       }
 
       .hover {
-        @include btn-bg($btn-warning-bg-hover-focus);
+        @include btn-bg(nga-theme(btn-warning-bg-hover-focus));
       }
 
       .active {
-        @include btn-bg($btn-warning-bg-active);
+        @include btn-bg(nga-theme(btn-warning-bg-active));
       }
     }
 
     .example-container .states-container.success-container {
       .original {
-        @include btn-bg($btn-success-bg);
+        @include btn-bg(nga-theme(btn-success-bg));
       }
 
       .hover {
-        @include btn-bg($btn-success-bg-hover-focus);
+        @include btn-bg(nga-theme(btn-success-bg-hover-focus));
       }
 
       .active {
-        @include btn-bg($btn-success-bg-active);
+        @include btn-bg(nga-theme(btn-success-bg-active));
       }
     }
 
     .example-container .states-container.info-container {
       .original {
-        @include btn-bg($btn-info-bg);
+        @include btn-bg(nga-theme(btn-info-bg));
       }
 
       .hover {
-        @include btn-bg($btn-info-bg-hover-focus);
+        @include btn-bg(nga-theme(btn-info-bg-hover-focus));
       }
 
       .active {
-        @include btn-bg($btn-info-bg-active);
+        @include btn-bg(nga-theme(btn-info-bg-active));
       }
     }
 
     .example-container .states-container.danger-container {
       .original {
-        @include btn-bg($btn-danger-bg);
+        @include btn-bg(nga-theme(btn-danger-bg));
       }
 
       .hover {
-        @include btn-bg($btn-danger-bg-hover-focus);
+        @include btn-bg(nga-theme(btn-danger-bg-hover-focus));
       }
 
       .active {
-        @include btn-bg($btn-danger-bg-active);
+        @include btn-bg(nga-theme(btn-danger-bg-active));
       }
     }
 
     .example-container .states-container.secondary-container {
       .original {
-        @include btn-bg($btn-secondary-border);
+        @include btn-bg(nga-theme(btn-secondary-border));
       }
 
       .hover {
-        @include btn-bg($btn-secondary-bg-hover-focus);
+        @include btn-bg(nga-theme(btn-secondary-bg-hover-focus));
       }
 
       .active {
-        @include btn-bg($btn-secondary-bg-active);
+        @include btn-bg(nga-theme(btn-secondary-bg-active));
       }
     }
   }
@@ -207,12 +210,12 @@
     display: flex !important;
 
     .container-title {
+      font-family: nga-theme(font-secondary);
       display: flex;
       flex: 1;
       flex-direction: column;
       justify-content: center;
       color: white;
-      font-family: Exo;
     }
   }
 }

src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'ngx-hero-buttons',
+  styleUrls: ['./hero-buttons.component.scss'],
   templateUrl: './hero-buttons.component.html',
 })
 export class HeroButtonComponent {