feat: styling restructuring for multiple themes support and introduct…

…ion of an alternative blue theme (#49, #64)

- rename the styling root 'theme' folder to 'styles'

CUSTOMIZING.md

@@ -36,7 +36,7 @@ When modifying components it is most likely that related test cases will fail. I
 
 ## Styling
 
-Changing the styling of **existing components** can be done by changing relevant information in the global style files under `src/theme`. If too many changes have to be made, it is better to **add the styling in additional files on global or component level**.
+Changing the styling of **existing components** can be done by changing relevant information in the global style files under `src/styles`. If too many changes have to be made, it is better to **add the styling in additional files on global or component level**.
 
 When styling on component level, all styling is encapsulated to exactly this component (default behavior). You can re-use variables from global styling on component level by adding imports like `@import '~theme/variables.scss';`.
 

angular.json

@@ -26,12 +26,24 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
             "aot": true,
+            "extractCss": true,
             "assets": [
               "src/favicon.ico",
               "src/assets",
               "src/manifest.webmanifest"
             ],
-            "styles": ["src/styles.scss"],
+            "styles": [
+              {
+                "input": "src/styles/themes/default/style.scss",
+                "lazy": true,
+                "bundleName": "default"
+              },
+              {
+                "input": "src/styles/themes/blue/style.scss",
+                "lazy": true,
+                "bundleName": "blue"
+              }
+            ],
             "scripts": []
           },
           "configurations": {

src/theme/breakpoints.scss → src/styles/breakpoints.scss

@@ -1,4 +1,8 @@
-// bootstrap 3 breakpoints
+///////////////////////////////////////////////////////////////////////////////
+//
+// breakpoint wrapper to match older bootstrap 3 breakpoints
+//
+///////////////////////////////////////////////////////////////////////////////
 
 // Extra small screen / phone
 $screen-xs: map-get($grid-breakpoints, 'xs');

src/theme/main.scss → src/styles/main.scss

@@ -1,12 +1,33 @@
+///////////////////////////////////////////////////////////////////////////////
 //
-// SPECIFIC THEMING MODULES
-// ===========================================================
+// MAIN STOREFRONT STYLING IMPORTS
 //
-// SET THEME SPECIFIC VARIABLES + BOOTSTRAP MAPPING (need to be imported before Bootstap)
-// @import "variables";
-// @import "variables-bootstrap-customized";
+///////////////////////////////////////////////////////////////////////////////
+
+//
+// THIRD PARTY IMPORTS
+
+// import Bootstrap styles
+@import '~bootstrap/scss/bootstrap';
+
+// import Font Awesome styles
+@import '~@fortawesome/fontawesome-svg-core/styles';
+
+// import Angular Toastr bootstrap styles
+@import '~ngx-toastr/toastr-bs4-alert';
+
+// import Swiper default theme
+@import '~swiper/src/swiper';
+
+//
+// STYLING COMPATIBILITY LAYER
+
+// import breakpoint wrapper to match older bootstrap 3 implementation
+@import 'breakpoints';
+
+//
+// STOREFRONT SPECIFIC IMPORTS
 
-// INCLUDE THEME SPECIFIC COMPONENTS
 @import 'global/fonts/roboto';
 @import 'global/animations';
 @import 'global/icons';

src/styles/themes/blue/style.scss

@@ -0,0 +1,21 @@
+///////////////////////////////////////////////////////////////////////////////
+//
+// THEME SPECIFIC CONFIGURATION
+//
+///////////////////////////////////////////////////////////////////////////////
+
+// set theme specific variables
+@import 'variables';
+
+// import general main theme
+@import '../../main';
+
+// customizations
+
+.logo {
+  background-image: url('/assets/img/logo_blue.png');
+}
+
+.mobile-logo {
+  background-image: url('/assets/img/logo_mobile_blue.png');
+}