refactor(app): styles refactor

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

@@ -1,4 +1,4 @@
-@mixin base-footer-theme() {
+@mixin base-footer-theme($theme-name) {
   /deep/ base-footer {
   }
 }

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

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

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

@@ -1,4 +1,4 @@
-@mixin search-input-theme() {
+@mixin search-input-theme($theme-name) {
   /deep/ search-input {
     input {
       background: transparent;

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

@@ -2,8 +2,10 @@
 @import '../components/search-input/search-input.component.theme';
 @import '../components/base-footer/base-footer.component.theme';
 
-@mixin custom-components-theme() {
+// TODO: probably move this file into the components folder?
-  @include base-header-theme();
+
-  @include base-footer-theme();
+@mixin custom-components-theme($theme-name) {
-  @include search-input-theme();
+  @include base-header-theme($theme-name);
+  @include base-footer-theme($theme-name);
+  @include search-input-theme($theme-name);
 }

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

@@ -1,10 +1,11 @@
 @import '../components';
-@import 'gorgeous.variables';
+@import 'variables';
 
 @import '~@nga/theme/styles/themes/nga.theme.default';
-@import 'nga-redefines/redefines';
+@import 'overrides/all';
 
-@include nga-theme('gorgeous') {
+$theme-name: 'gorgeous';
-  @include nga-theme-redefines();
+@include nga-theme($theme-name) {
-  @include custom-components-theme();
+  @include nga-theme-overrides($theme-name);
+  @include custom-components-theme($theme-name);
 }

src/app/@theme/styles/gorgeous/nga-redefines/redefines.scss

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

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

@@ -1,4 +1,4 @@
-@mixin nga-layout-redefines {
+@mixin nga-layout-override($theme-name) {
   $layout-shadow: 0 8px 20px 0 rgba(37, 26, 75, 0.68);
 
   /deep/ .layout {

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

@@ -1,4 +1,4 @@
-@mixin nga-menu-redefines {
+@mixin nga-menu-override($theme-name) {
   /deep/ nga-menu {
     ul li {
       &:first-child {

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

@@ -0,0 +1,7 @@
+@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/@theme/styles/pure/nga-redefines/redefines.scss

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

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

@@ -1,4 +1,4 @@
-@mixin nga-layout-redefines {
+@mixin nga-layout-override($theme-name) {
   $layout-border-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08);
 
   /deep/ .layout {

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

@@ -1,4 +1,4 @@
-@mixin nga-menu-redefines {
+@mixin nga-menu-override($theme-name) {
   /deep/ nga-menu {
     ul li {
       transition: all 0.2s ease;

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

@@ -0,0 +1,7 @@
+@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/@theme/styles/pure/pure.theme.scss

@@ -1,10 +1,11 @@
-@import 'pure.variables';
+@import 'variables';
 @import '../components';
-@import 'nga-redefines/redefines';
+@import 'overrides/all';
 
 @import '~@nga/theme/styles/themes/nga.theme.default';
 
-@include nga-theme('pure') {
+$theme-name: 'pure';
-  @include nga-theme-redefines();
+@include nga-theme($theme-name) {
-  @include custom-components-theme();
+  @include nga-theme-overrides($theme-name);
+  @include custom-components-theme($theme-name);
 }