fix(): theming

angular.json

@@ -601,5 +601,8 @@
                 }
             }
         }
+    },
+    "cli": {
+      "analytics": false
     }
 }

package.json

@@ -6,7 +6,8 @@
         "prepare": "husky || true",
         "new-package": "ng g .:new-package",
         "release:dry-run": "nx release --verbose --dry-run",
-        "postinstall": "patch-package"
+        "postinstall": "patch-package",
+        "ng": "ng"
     },
     "workspaces": [
         "projects/core",

projects/core/package.json

@@ -21,8 +21,23 @@
     ],
     "sideEffects": false,
     "exports": {
-        ".": {
-            "sass": "./styles"
+        "./theme": {
+            "sass": "./styles/_theme.scss"
+        },
+        "./themeVariables": {
+            "sass": "./styles/_themeVariables.scss"
+        },
+        "./menu": {
+            "sass": "./styles/mixins/_menu.scss"
+        },
+        "./menu-theme": {
+            "sass": "./styles/mixins/_menu-theme.scss"
+        },
+        "./loader-theme": {
+            "sass": "./styles/mixins/_loader-theme.scss"
+        },
+        "./icon-theme": {
+            "sass": "./styles/mixins/_icon-theme.scss"
         }
     },
     "scripts": {

projects/core/src/styles/_theme.scss

@@ -1,15 +1,13 @@
 @use '@angular/material' as mat;
 @use './themeVariables' as themeVariables;
 @use './mixins/material-icons-theme' as materialIconsTheme;
-@use './mixins/ngx-components-theme' as ngxComponentsTheme;
 
 @import './roboto';
 
 // Include theme styles for core and each component used in the app
 @include mat.core();
 @include mat.all-component-themes(themeVariables.$theme);
-@include materialIconsTheme.material-icons-theme();
-@include ngxComponentsTheme.all-component-themes(themeVariables.$theme);
+@include materialIconsTheme.theme();
 
 body#hug-ngx {
     margin: 0;

projects/core/src/styles/mixins/_icon-theme.scss

@@ -1,6 +1,6 @@
 @use '@angular/material' as mat;
 
-@mixin icon-theme($theme) {
+@mixin theme($theme) {
     $primary: map-get($theme, primary);
     $accent: map-get($theme, accent);
     $warn: map-get($theme, warn);

projects/core/src/styles/mixins/loader-theme.scss → projects/core/src/styles/mixins/_loader-theme.scss

@@ -1,6 +1,6 @@
 @use '@angular/material' as mat;
 
-@mixin loader-theme($theme) {
+@mixin theme($theme) {
     $primary: map-get($theme, primary);
 
     .loader {

projects/core/src/styles/mixins/material-icons-theme.scss → projects/core/src/styles/mixins/_material-icons-theme.scss

@@ -4,7 +4,7 @@
 
 $fontFamily: "Material Symbols Outlined Variable";
 
-@mixin material-icons-theme {
+@mixin theme {
     .mat-icon {
         font-family: $fontFamily;
 

projects/core/src/styles/mixins/_menu-theme.scss

@@ -1,6 +1,6 @@
 @use "@angular/material" as mat;
 
-@mixin menu-theme($theme) {
+@mixin theme($theme) {
     $primary: map-get($theme, primary);
 
     .ngx-menu,

projects/layout/package.json

@@ -20,6 +20,11 @@
         "components"
     ],
     "sideEffects": false,
+    "exports": {
+        ".": {
+            "sass": "./_layout-theme.scss"
+        }
+    },
     "scripts": {
         "lint": "eslint . --fix",
         "test": "ng test layout",

projects/layout/src/_layout-theme.scss

@@ -1,6 +1,6 @@
 @use '@angular/material'as mat;
 
-@mixin layout-theme($theme) {
+@mixin theme($theme) {
     $primary: map-get($theme, primary);
     $accent: map-get($theme, accent);
     $background: map-get($theme, background);

projects/list-loader/src/list-loader.component.ts

@@ -1,4 +1,4 @@
-import { CommonModule } from '@angular/common';
+import { NgIf } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
 
 @Component({
@@ -9,7 +9,7 @@ import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@a
     encapsulation: ViewEncapsulation.None,
     standalone: true,
     imports: [
-        CommonModule
+        NgIf
     ]
 })
 export class ListLoaderComponent {

projects/message-box-dialog/package.json

@@ -20,6 +20,11 @@
         "components"
     ],
     "sideEffects": false,
+    "exports": {
+        ".": {
+            "sass": "./_message-box-dialog-theme.scss"
+        }
+    },
     "scripts": {
         "lint": "eslint . --fix",
         "test": "ng test message-box-dialog",

projects/message-box-dialog/src/_message-box-dialog-theme.scss

@@ -1,6 +1,6 @@
 @use '@angular/material' as mat;
 
-@mixin message-box-dialog-theme($theme) {
+@mixin theme($theme) {
     $warn: map-get($theme, warn);
 
     .cdk-overlay-container {

projects/search-container/package.json

@@ -20,6 +20,11 @@
         "components"
     ],
     "sideEffects": false,
+    "exports": {
+        ".": {
+            "sass": "./_search-container-theme.scss"
+        }
+    },
     "scripts": {
         "lint": "eslint . --fix",
         "test": "ng test search-container",

projects/search-container/src/_search-container-theme.scss

@@ -1,6 +1,6 @@
 @use '@angular/material' as mat;
 
-@mixin search-container-theme($theme) {
+@mixin theme($theme) {
     $primary: map-get($theme, primary);
     $accent: map-get($theme, accent);
     $background: map-get($theme, background);

projects/sidenav/package.json

@@ -20,6 +20,11 @@
         "components"
     ],
     "sideEffects": false,
+    "exports": {
+        ".": {
+            "sass": "./_sidenav-theme.scss"
+        }
+    },
     "scripts": {
         "lint": "eslint . --fix",
         "test": "ng test sidenav",

projects/user-card/package.json

@@ -20,6 +20,11 @@
         "components"
     ],
     "sideEffects": false,
+    "exports": {
+        ".": {
+            "sass": "./_user-card-theme.scss"
+        }
+    },
     "scripts": {
         "lint": "eslint . --fix",
         "test": "ng test user-card",

projects/user-card/src/_user-card-theme.scss

@@ -1,6 +1,6 @@
 @use '@angular/material' as mat;
 
-@mixin user-card-theme($theme) {
+@mixin theme($theme) {
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
 
@@ -27,7 +27,7 @@
             }
         }
 
-        .header-separator, 
+        .header-separator,
         .header-initials {
             color: mat.get-color-from-palette(mat.$grey-palette, 400);
         }