update theming so the fe starts

e2e/src/app.e2e-spec.ts

@@ -9,8 +9,11 @@ describe('workspace-project App', () => {
   })
 
   it('should display welcome message', () => {
-    page.navigateTo()
-    expect(page.getTitleText()).toEqual('num-portal-webapp app is running!')
+    page.navigateTo().then(() => {
+      page.getTitleText().then((titleText) => {
+        expect(titleText).toEqual('num-portal-webapp app is running!')
+      })
+    })
   })
 
   afterEach(async () => {

package.json

@@ -55,6 +55,7 @@
     "nanoid": "^4.0.2",
     "ngx-echarts": "^8.0.1",
     "rxjs": "^7.8.1",
+    "sass": "^1.78.0",
     "tslib": "^2.3.1",
     "zone.js": "~0.14.10"
   },

src/polyfills.ts

@@ -57,7 +57,7 @@
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
+import 'zone.js';  // Included with Angular CLI.
 
 
 /***************************************************************************************************

src/styles/custom-material/styles/_buttons.themed.scss

@@ -1,3 +1,4 @@
+@use '@angular/material' as mat;
 @mixin buttons($theme) {
   $raised-shadow:
     0 2px 2px 0 rgba(0, 0, 0, 0.14),
@@ -8,7 +9,7 @@
   /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
   /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
   .mat-mdc-icon-button.mat-button-disabled.mat-button-disabled {
-    color: mat-color($additional, light-grey);
+    color: mat.get-color-from-palette($additional, light-grey);
   }
 
   .mat-mdc-button-base {
@@ -42,85 +43,85 @@
       line-height: 34px;
       border-width: 1px;
       border-style: solid;
-      border-color: mat-color($primary, 500);
+      border-color: mat.get-color-from-palette($primary, 500);
       fa-icon {
-        color: mat-color($accent, 500);
+        color: mat.get-color-from-palette($accent, 500);
       }
       /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
       /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
       &:hover:not(.mat-button-disabled) {
-        background: mat-color($primary, 700);
+        background: mat.get-color-from-palette($primary, 700);
         box-shadow: $raised-shadow;
       }
 
       &.cdk-keyboard-focused {
-        background: mat-color($primary, 700);
-        border-color: mat-color($accent, 500);
+        background: mat.get-color-from-palette($primary, 700);
+        border-color: mat.get-color-from-palette($accent, 500);
       }
       /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
       /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
       &.mat-button-disabled {
-        background: mat-color($primary, 100);
-        border-color: mat-color($primary, 100);
+        background: mat.get-color-from-palette($primary, 100);
+        border-color: mat.get-color-from-palette($primary, 100);
         fa-icon {
-          color: mat-color($accent, 200);
+          color: mat.get-color-from-palette($accent, 200);
         }
       }
     }
 
     // Secondary Button
     &.mat-mdc-outlined-button.mat-primary {
-      border-color: mat-color($primary, 500);
+      border-color: mat.get-color-from-palette($primary, 500);
 
       fa-icon {
-        color: mat-color($accent, 500);
+        color: mat.get-color-from-palette($accent, 500);
       }
       /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
       /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
       &:hover:not(.mat-button-disabled) {
-        background: mat-color($accent, 100);
+        background: mat.get-color-from-palette($accent, 100);
         box-shadow: $raised-shadow;
       }
 
       &.cdk-keyboard-focused {
-        background: mat-color($accent, 200);
+        background: mat.get-color-from-palette($accent, 200);
       }
       /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
       /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
       &.mat-button-disabled {
         fa-icon {
-          color: mat-color($accent, 200);
+          color: mat.get-color-from-palette($accent, 200);
         }
-        color: mat-color($additional, light-grey);
-        border-color: mat-color($primary, 100);
+        color: mat.get-color-from-palette($additional, light-grey);
+        border-color: mat.get-color-from-palette($primary, 100);
       }
     }
 
     // Basic Button
     &.mat-mdc-button.mat-primary {
-      color: mat-color($additional, mid-grey);
+      color: mat.get-color-from-palette($additional, mid-grey);
 
       fa-icon {
-        color: mat-color($accent, 500);
+        color: mat.get-color-from-palette($accent, 500);
       }
       /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
       /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
       &:hover:not(.mat-button-disabled) {
-        background: mat-color($accent, 100);
+        background: mat.get-color-from-palette($accent, 100);
         box-shadow: $raised-shadow;
       }
 
       &.cdk-keyboard-focused {
-        background: mat-color($accent, 200);
-        border-color: mat-color($accent, 500);
+        background: mat.get-color-from-palette($accent, 200);
+        border-color: mat.get-color-from-palette($accent, 500);
       }
       /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
       /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
       &.mat-button-disabled {
         fa-icon {
-          color: mat-color($accent, 200);
+          color: mat.get-color-from-palette($accent, 200);
         }
-        color: mat-color($additional, mid-grey);
+        color: mat.get-color-from-palette($additional, mid-grey);
       }
     }
   }

src/styles/custom-material/styles/_code-editor.themed.scss

@@ -1,9 +1,11 @@
+@use '@angular/material' as mat;
+
 @mixin code-editor_themed($theme) {
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
   $additional: map-get($theme, additional);
 
   .monaco-editor.vs .line-numbers {
-    color: mat-color($additional, dark-grey);
+    color: mat.get-color-from-palette($additional, dark-grey);
   }
 }