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

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/light/theme.scss';
-import 'style-loader!../@theme/styles/default/theme.scss';
+import 'style-loader!../@theme/styles/themes.scss';
 
 @Component({
   selector: 'ngx-pages',

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

@@ -0,0 +1,221 @@
+@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;
+
+  .states-container .state-container {
+    display: flex;
+
+    .state-value {
+      width: $btn-component-size;
+      height: $btn-component-size;
+      border-radius: $btn-component-bd-radius;
+      margin-bottom: 16px;
+    }
+
+    .state-details {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      margin-left: 17px;
+      height: $btn-component-size;
+    }
+
+    .state-details .header {
+      color: white;
+    }
+
+    .state-details .subheader {
+      font-size: 0.875rem;
+      line-height: 1rem;
+      font-weight: 300;
+    }
+  }
+
+  .example-container {
+    padding-right: 0;
+  }
+
+  .example-container .container-title {
+    font-family: nga-theme(font-secondary);
+    margin-bottom: 14px;
+  }
+
+  .example-container .container-btn {
+    margin-bottom: 24px;
+  }
+
+  .hero-buttons {
+
+    .example-container .states-container.primary-container {
+      .gradient {
+        @include primary-gradient();
+      }
+
+      @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 {
+      .gradient {
+        @include warning-gradient();
+      }
+
+      @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 {
+      .gradient {
+        @include success-gradient();
+      }
+
+      @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 {
+      .gradient {
+        @include info-gradient();
+      }
+
+      @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 {
+      .gradient {
+        @include danger-gradient();
+      }
+
+      @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: nga-theme(btn-secondary-color);
+        border: nga-theme(btn-secondary-border-width) solid nga-theme(btn-secondary-border);
+      }
+
+      @include btn-component(nga-theme(btn-secondary-bevel-bd), nga-theme(btn-secondary-glow), nga-theme(btn-secondary-shadow));
+    }
+  }
+
+  .default-buttons {
+    $btn-component-size: 50px;
+    $btn-component-bd-radius: 12px;
+
+    .example-container .states-container.primary-container {
+      .original {
+        @include btn-bg(nga-theme(btn-primary-bg));
+      }
+
+      .hover {
+        @include btn-bg(nga-theme(btn-primary-bg-hover-focus));
+      }
+
+      .active {
+        @include btn-bg(nga-theme(btn-primary-bg-active));
+      }
+    }
+
+    .example-container .states-container.warning-container {
+      .original {
+        @include btn-bg(nga-theme(btn-warning-bg));
+      }
+
+      .hover {
+        @include btn-bg(nga-theme(btn-warning-bg-hover-focus));
+      }
+
+      .active {
+        @include btn-bg(nga-theme(btn-warning-bg-active));
+      }
+    }
+
+    .example-container .states-container.success-container {
+      .original {
+        @include btn-bg(nga-theme(btn-success-bg));
+      }
+
+      .hover {
+        @include btn-bg(nga-theme(btn-success-bg-hover-focus));
+      }
+
+      .active {
+        @include btn-bg(nga-theme(btn-success-bg-active));
+      }
+    }
+
+    .example-container .states-container.info-container {
+      .original {
+        @include btn-bg(nga-theme(btn-info-bg));
+      }
+
+      .hover {
+        @include btn-bg(nga-theme(btn-info-bg-hover-focus));
+      }
+
+      .active {
+        @include btn-bg(nga-theme(btn-info-bg-active));
+      }
+    }
+
+    .example-container .states-container.danger-container {
+      .original {
+        @include btn-bg(nga-theme(btn-danger-bg));
+      }
+
+      .hover {
+        @include btn-bg(nga-theme(btn-danger-bg-hover-focus));
+      }
+
+      .active {
+        @include btn-bg(nga-theme(btn-danger-bg-active));
+      }
+    }
+
+    .example-container .states-container.secondary-container {
+      .original {
+        @include btn-bg(nga-theme(btn-secondary-border));
+      }
+
+      .hover {
+        @include btn-bg(nga-theme(btn-secondary-bg-hover-focus));
+      }
+
+      .active {
+        @include btn-bg(nga-theme(btn-secondary-bg-active));
+      }
+    }
+  }
+
+  .actions-groups {
+    display: flex !important;
+
+    .container-title {
+      font-family: nga-theme(font-secondary);
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      justify-content: center;
+      color: white;
+    }
+  }
+}

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 {