@softheon/armature 10.45.5 → 15.0.1

package/assets/styles/sof-styles.scss

@@ -1,18 +1,35 @@
+@use '@angular/material' as mat;
 @import "../../../../../node_modules/@angular/material/theming";
 @import "./arm-theme.scss";
 @import "./utility";
 @import "./variables";
 
 // Theme pallets
-@include mat-core();
-$main-theme: mat-light-theme($arm-primary, $arm-accent, $arm-error);
-$main-theme-dark: mat-dark-theme($arm-primary, $arm-accent, $arm-error);
+@include mat.core();
+$main-theme: mat.define-light-theme((
+  color: (
+    primary: $arm-primary,
+    accent: $arm-accent,
+    error: $arm-error
+  ),
+  typography: mat.define-typography-config(),
+  density: 0,
+));
+$main-theme-dark: mat.define-dark-theme((
+  color: (
+    primary: $arm-primary,
+    accent: $arm-accent,
+    error: $arm-error
+  ),
+  typography: mat.define-typography-config(),
+  density: 0,
+));
 
 body {
   letter-spacing: 0px;
   font-family: "Poppins", sans-serif !important;
   font-size: 14px;
-  @include angular-material-theme($main-theme);
+  @include mat.core-theme($main-theme);
   margin: 0 !important;
 }
 
@@ -154,31 +171,31 @@ mat-form-field {
 }
 
 .color-primary {
-  color: mat-color($arm-primary, 500);
+  color: mat.get-color-from-palette($arm-primary, 500);
 }
 
 .color-accent {
-  color: mat-color($arm-accent, 500);
+  color: mat.get-color-from-palette($arm-accent, 500);
 }
 
 .color-warn {
-  color: mat-color($arm-warn, 500);
+  color: mat.get-color-from-palette($arm-warn, 500);
 }
 
 .color-info {
-  color: mat-color($arm-info, 500);
+  color: mat.get-color-from-palette($arm-info, 500);
 }
 
 .color-success {
-  color: mat-color($arm-success, 500);
+  color: mat.get-color-from-palette($arm-success, 500);
 }
 
 .color-error {
-  color: mat-color($arm-error, 500);
+  color: mat.get-color-from-palette($arm-error, 500);
 }
 
 .color-neutral {
-  color: mat-color($arm-neutral, 500);
+  color: mat.get-color-from-palette($arm-neutral, 500);
 }
 
 .full-width {
@@ -188,7 +205,7 @@ mat-form-field {
 .delete-icon {
   cursor: pointer;
   font-size: 1.5em;
-  color: mat-color($arm-warn, 500);
+  color: mat.get-color-from-palette($arm-warn, 500);
 }
 
 .tooltip {
@@ -225,7 +242,6 @@ mat-form-field {
         width: 100% !important;
       }
     }
-
     .mat-button-toggle-label-content {
       text-transform: uppercase !important;
       font-family: "Poppins" !important;
@@ -241,58 +257,57 @@ mat-form-field {
       height: 100% !important;
     }
     .mat-button-toggle-checked {
-      background-color: mat-color($arm-primary, 100) !important;
+      background-color: mat.get-color-from-palette($arm-primary, 100) !important;
     }
     .toggle-left {
-      border-top: 2px solid mat-color($arm-primary, 500) !important;
-      border-bottom: 2px solid mat-color($arm-primary, 500) !important;
-      border-left: 2px solid mat-color($arm-primary, 500) !important;
-      border-right: 1px solid mat-color($arm-primary, 500) !important;
+      border-top: 2px solid mat.get-color-from-palette($arm-primary, 500) !important;
+      border-bottom: 2px solid mat.get-color-from-palette($arm-primary, 500) !important;
+      border-left: 2px solid mat.get-color-from-palette($arm-primary, 500) !important;
+      border-right: 1px solid mat.get-color-from-palette($arm-primary, 500) !important;
       border-radius: 6px 0px 0px 6px !important;
       width: 120px !important;
     }
     .toggle-middle {
-      border-top: 2px solid mat-color($arm-primary, 500) !important;
-      border-bottom: 2px solid mat-color($arm-primary, 500) !important;
-      border-left: 1px solid mat-color($arm-primary, 500) !important;
-      border-right: 1px solid mat-color($arm-primary, 500) !important;
+      border-top: 2px solid mat.get-color-from-palette($arm-primary, 500) !important;
+      border-bottom: 2px solid mat.get-color-from-palette($arm-primary, 500) !important;
+      border-left: 1px solid mat.get-color-from-palette($arm-primary, 500) !important;
+      border-right: 1px solid mat.get-color-from-palette($arm-primary, 500) !important;
       border-radius: 0px 0px 0px 0px !important;
       width: 120px !important;
     }
     .toggle-right {
-      border-top: 2px solid mat-color($arm-primary, 500) !important;
-      border-bottom: 2px solid mat-color($arm-primary, 500) !important;
-      border-left: 1px solid mat-color($arm-primary, 500) !important;
-      border-right: 2px solid mat-color($arm-primary, 500) !important;
+      border-top: 2px solid mat.get-color-from-palette($arm-primary, 500) !important;
+      border-bottom: 2px solid mat.get-color-from-palette($arm-primary, 500) !important;
+      border-left: 1px solid mat.get-color-from-palette($arm-primary, 500) !important;
+      border-right: 2px solid mat.get-color-from-palette($arm-primary, 500) !important;
       border-radius: 0px 6px 6px 0px !important;
       width: 120px !important;
     }
-
     .mat-button-toggle-disabled {
       &.mat-button-toggle-checked {
-        background-color: mat-color($arm-neutral, 200) !important;
+        background-color: mat.get-color-from-palette($arm-neutral, 200) !important;
       }
       &.toggle-left {
-        border-top: 2px solid mat-color($arm-neutral, 400) !important;
-        border-bottom: 2px solid mat-color($arm-neutral, 400) !important;
-        border-left: 2px solid mat-color($arm-neutral, 400) !important;
-        border-right: 1px solid mat-color($arm-neutral, 400) !important;
+        border-top: 2px solid mat.get-color-from-palette($arm-neutral, 400) !important;
+        border-bottom: 2px solid mat.get-color-from-palette($arm-neutral, 400) !important;
+        border-left: 2px solid mat.get-color-from-palette($arm-neutral, 400) !important;
+        border-right: 1px solid mat.get-color-from-palette($arm-neutral, 400) !important;
         border-radius: 6px 0px 0px 6px !important;
         width: 120px !important;
       }
       &.toggle-middle {
-        border-top: 2px solid mat-color($arm-neutral, 400) !important;
-        border-bottom: 2px solid mat-color($arm-neutral, 400) !important;
-        border-left: 1px solid mat-color($arm-neutral, 400) !important;
-        border-right: 1px solid mat-color($arm-neutral, 400) !important;
+        border-top: 2px solid mat.get-color-from-palette($arm-neutral, 400) !important;
+        border-bottom: 2px solid mat.get-color-from-palette($arm-neutral, 400) !important;
+        border-left: 1px solid mat.get-color-from-palette($arm-neutral, 400) !important;
+        border-right: 1px solid mat.get-color-from-palette($arm-neutral, 400) !important;
         border-radius: 0px 0px 0px 0px !important;
         width: 120px !important;
       }
       &.toggle-right {
-        border-top: 2px solid mat-color($arm-neutral, 400) !important;
-        border-bottom: 2px solid mat-color($arm-neutral, 400) !important;
-        border-left: 1px solid mat-color($arm-neutral, 400) !important;
-        border-right: 2px solid mat-color($arm-neutral, 400) !important;
+        border-top: 2px solid mat.get-color-from-palette($arm-neutral, 400) !important;
+        border-bottom: 2px solid mat.get-color-from-palette($arm-neutral, 400) !important;
+        border-left: 1px solid mat.get-color-from-palette($arm-neutral, 400) !important;
+        border-right: 2px solid mat.get-color-from-palette($arm-neutral, 400) !important;
         border-radius: 0px 6px 6px 0px !important;
         width: 120px !important;
       }
@@ -312,7 +327,7 @@ mat-form-field {
 
 /** Material Overrides */
 
-button.mat-button {
+button.mat-mdc-button {
   &.sof-button {
     padding: 0px 24px !important;
     height: 48px !important;
@@ -335,66 +350,66 @@ button.mat-button {
 
     &:enabled {
       &.mat-primary {
-        color: mat-color($arm-primary, 500) !important;
+        color: mat.get-color-from-palette($arm-primary, 500) !important;
         &:hover {
-          background-color: mat-color($arm-primary, 50);
+          background-color: mat.get-color-from-palette($arm-primary, 50);
         }
         &:focus {
-          background-color: mat-color($arm-primary, 100);
+          background-color: mat.get-color-from-palette($arm-primary, 100);
         }
       }
       &.mat-accent {
-        color: mat-color($arm-accent, 500) !important;
+        color: mat.get-color-from-palette($arm-accent, 500) !important;
         &:hover {
-          background-color: mat-color($arm-accent, 50);
+          background-color: mat.get-color-from-palette($arm-accent, 50);
         }
         &:focus {
-          background-color: mat-color($arm-accent, 100);
+          background-color: mat.get-color-from-palette($arm-accent, 100);
         }
       }
       &.mat-warn {
-        color: mat-color($arm-warn, 500) !important;
+        color: mat.get-color-from-palette($arm-warn, 500) !important;
         &:hover {
-          background-color: mat-color($arm-warn, 50);
+          background-color: mat.get-color-from-palette($arm-warn, 50);
         }
         &:focus {
-          background-color: mat-color($arm-warn, 100);
+          background-color: mat.get-color-from-palette($arm-warn, 100);
         }
       }
       &.mat-success {
-        color: mat-color($arm-success, 500) !important;
+        color: mat.get-color-from-palette($arm-success, 500) !important;
         &:hover {
-          background-color: mat-color($arm-success, 50);
+          background-color: mat.get-color-from-palette($arm-success, 50);
         }
         &:focus {
-          background-color: mat-color($arm-success, 100);
+          background-color: mat.get-color-from-palette($arm-success, 100);
         }
       }
       &.mat-error {
-        color: mat-color($arm-error, 500) !important;
+        color: mat.get-color-from-palette($arm-error, 500) !important;
         &:hover {
-          background-color: mat-color($arm-error, 50);
+          background-color: mat.get-color-from-palette($arm-error, 50);
         }
         &:focus {
-          background-color: mat-color($arm-error, 100);
+          background-color: mat.get-color-from-palette($arm-error, 100);
         }
       }
       &.mat-info {
-        color: mat-color($arm-info, 500) !important;
+        color: mat.get-color-from-palette($arm-info, 500) !important;
         &:hover {
-          background-color: mat-color($arm-info, 50);
+          background-color: mat.get-color-from-palette($arm-info, 50);
         }
         &:focus {
-          background-color: mat-color($arm-info, 100);
+          background-color: mat.get-color-from-palette($arm-info, 100);
         }
       }
       &.mat-neutral {
         color: #000000de !important;
         &:hover {
-          background-color: mat-color($arm-neutral, 50);
+          background-color: mat.get-color-from-palette($arm-neutral, 50);
         }
         &:focus {
-          background-color: mat-color($arm-neutral, 100);
+          background-color: mat.get-color-from-palette($arm-neutral, 100);
         }
       }
     }
@@ -434,66 +449,66 @@ button.mat-button {
 
     &:enabled {
       &.mat-primary {
-        color: mat-color($arm-primary, 500) !important;
+        color: mat.get-color-from-palette($arm-primary, 500) !important;
         &:hover {
-          background-color: mat-color($arm-primary, 50);
+          background-color: mat.get-color-from-palette($arm-primary, 50);
         }
         &:focus {
-          background-color: mat-color($arm-primary, 100);
+          background-color: mat.get-color-from-palette($arm-primary, 100);
         }
       }
       &.mat-accent {
-        color: mat-color($arm-accent, 500) !important;
+        color: mat.get-color-from-palette($arm-accent, 500) !important;
         &:hover {
-          background-color: mat-color($arm-accent, 50);
+          background-color: mat.get-color-from-palette($arm-accent, 50);
         }
         &:focus {
-          background-color: mat-color($arm-accent, 100);
+          background-color: mat.get-color-from-palette($arm-accent, 100);
         }
       }
       &.mat-warn {
-        color: mat-color($arm-warn, 500) !important;
+        color: mat.get-color-from-palette($arm-warn, 500) !important;
         &:hover {
-          background-color: mat-color($arm-warn, 50);
+          background-color: mat.get-color-from-palette($arm-warn, 50);
         }
         &:focus {
-          background-color: mat-color($arm-warn, 100);
+          background-color: mat.get-color-from-palette($arm-warn, 100);
         }
       }
       &.mat-success {
-        color: mat-color($arm-success, 500) !important;
+        color: mat.get-color-from-palette($arm-success, 500) !important;
         &:hover {
-          background-color: mat-color($arm-success, 50);
+          background-color: mat.get-color-from-palette($arm-success, 50);
         }
         &:focus {
-          background-color: mat-color($arm-success, 100);
+          background-color: mat.get-color-from-palette($arm-success, 100);
         }
       }
       &.mat-error {
-        color: mat-color($arm-error, 500) !important;
+        color: mat.get-color-from-palette($arm-error, 500) !important;
         &:hover {
-          background-color: mat-color($arm-error, 50);
+          background-color: mat.get-color-from-palette($arm-error, 50);
         }
         &:focus {
-          background-color: mat-color($arm-error, 100);
+          background-color: mat.get-color-from-palette($arm-error, 100);
         }
       }
       &.mat-info {
-        color: mat-color($arm-info, 500) !important;
+        color: mat.get-color-from-palette($arm-info, 500) !important;
         &:hover {
-          background-color: mat-color($arm-info, 50);
+          background-color: mat.get-color-from-palette($arm-info, 50);
         }
         &:focus {
-          background-color: mat-color($arm-info, 100);
+          background-color: mat.get-color-from-palette($arm-info, 100);
         }
       }
       &.mat-neutral {
         color: #000000de !important;
         &:hover {
-          background-color: mat-color($arm-neutral, 50);
+          background-color: mat.get-color-from-palette($arm-neutral, 50);
         }
         &:focus {
-          background-color: mat-color($arm-neutral, 100);
+          background-color: mat.get-color-from-palette($arm-neutral, 100);
         }
       }
     }
@@ -523,7 +538,7 @@ button.mat-button {
   }
 }
 
-button.mat-flat-button {
+button.mat-mdc-unelevated-button {
   &.sof-flat-button {
     padding: 0px 24px !important;
     height: 48px !important;
@@ -547,66 +562,66 @@ button.mat-flat-button {
     &:enabled {
       color: #ffffff !important;
       &.mat-primary {
-        background: mat-color($arm-primary, 500);
+        background: mat.get-color-from-palette($arm-primary, 500);
         &:hover {
-          background-color: mat-color($arm-primary, 700);
+          background-color: mat.get-color-from-palette($arm-primary, 700);
         }
         &:focus {
-          background-color: mat-color($arm-primary, 900);
+          background-color: mat.get-color-from-palette($arm-primary, 900);
         }
       }
       &.mat-accent {
-        background: mat-color($arm-accent, 500);
+        background: mat.get-color-from-palette($arm-accent, 500);
         &:hover {
-          background-color: mat-color($arm-accent, 700);
+          background-color: mat.get-color-from-palette($arm-accent, 700);
         }
         &:focus {
-          background-color: mat-color($arm-accent, 900);
+          background-color: mat.get-color-from-palette($arm-accent, 900);
         }
       }
       &.mat-warn {
-        background: mat-color($arm-warn, 500);
+        background: mat.get-color-from-palette($arm-warn, 500);
         &:hover {
-          background-color: mat-color($arm-warn, 700);
+          background-color: mat.get-color-from-palette($arm-warn, 700);
         }
         &:focus {
-          background-color: mat-color($arm-warn, 900);
+          background-color: mat.get-color-from-palette($arm-warn, 900);
         }
       }
       &.mat-success {
-        background: mat-color($arm-success, 500);
+        background: mat.get-color-from-palette($arm-success, 500);
         &:hover {
-          background-color: mat-color($arm-success, 700);
+          background-color: mat.get-color-from-palette($arm-success, 700);
         }
         &:focus {
-          background-color: mat-color($arm-success, 900);
+          background-color: mat.get-color-from-palette($arm-success, 900);
         }
       }
       &.mat-error {
-        background: mat-color($arm-error, 500);
+        background: mat.get-color-from-palette($arm-error, 500);
         &:hover {
-          background-color: mat-color($arm-error, 700);
+          background-color: mat.get-color-from-palette($arm-error, 700);
         }
         &:focus {
-          background-color: mat-color($arm-error, 900);
+          background-color: mat.get-color-from-palette($arm-error, 900);
         }
       }
       &.mat-info {
-        background: mat-color($arm-info, 500);
+        background: mat.get-color-from-palette($arm-info, 500);
         &:hover {
-          background-color: mat-color($arm-info, 700);
+          background-color: mat.get-color-from-palette($arm-info, 700);
         }
         &:focus {
-          background-color: mat-color($arm-info, 900);
+          background-color: mat.get-color-from-palette($arm-info, 900);
         }
       }
       &.mat-neutral {
         background: #000000de;
         &:hover {
-          background-color: mat-color($arm-neutral, 700);
+          background-color: mat.get-color-from-palette($arm-neutral, 700);
         }
         &:focus {
-          background-color: mat-color($arm-neutral, 900);
+          background-color: mat.get-color-from-palette($arm-neutral, 900);
         }
       }
       i {
@@ -651,66 +666,66 @@ button.mat-flat-button {
     &:enabled {
       color: #ffffff !important;
       &.mat-primary {
-        background: mat-color($arm-primary, 500);
+        background: mat.get-color-from-palette($arm-primary, 500);
         &:hover {
-          background-color: mat-color($arm-primary, 700);
+          background-color: mat.get-color-from-palette($arm-primary, 700);
         }
         &:focus {
-          background-color: mat-color($arm-primary, 900);
+          background-color: mat.get-color-from-palette($arm-primary, 900);
         }
       }
       &.mat-accent {
-        background: mat-color($arm-accent, 500);
+        background: mat.get-color-from-palette($arm-accent, 500);
         &:hover {
-          background-color: mat-color($arm-accent, 700);
+          background-color: mat.get-color-from-palette($arm-accent, 700);
         }
         &:focus {
-          background-color: mat-color($arm-accent, 900);
+          background-color: mat.get-color-from-palette($arm-accent, 900);
         }
       }
       &.mat-warn {
-        background: mat-color($arm-warn, 500);
+        background: mat.get-color-from-palette($arm-warn, 500);
         &:hover {
-          background-color: mat-color($arm-warn, 700);
+          background-color: mat.get-color-from-palette($arm-warn, 700);
         }
         &:focus {
-          background-color: mat-color($arm-warn, 900);
+          background-color: mat.get-color-from-palette($arm-warn, 900);
         }
       }
       &.mat-success {
-        background: mat-color($arm-success, 500);
+        background: mat.get-color-from-palette($arm-success, 500);
         &:hover {
-          background-color: mat-color($arm-success, 700);
+          background-color: mat.get-color-from-palette($arm-success, 700);
         }
         &:focus {
-          background-color: mat-color($arm-success, 900);
+          background-color: mat.get-color-from-palette($arm-success, 900);
         }
       }
       &.mat-error {
-        background: mat-color($arm-error, 500);
+        background: mat.get-color-from-palette($arm-error, 500);
         &:hover {
-          background-color: mat-color($arm-error, 700);
+          background-color: mat.get-color-from-palette($arm-error, 700);
         }
         &:focus {
-          background-color: mat-color($arm-error, 900);
+          background-color: mat.get-color-from-palette($arm-error, 900);
         }
       }
       &.mat-info {
-        background: mat-color($arm-info, 500);
+        background: mat.get-color-from-palette($arm-info, 500);
         &:hover {
-          background-color: mat-color($arm-info, 700);
+          background-color: mat.get-color-from-palette($arm-info, 700);
         }
         &:focus {
-          background-color: mat-color($arm-info, 900);
+          background-color: mat.get-color-from-palette($arm-info, 900);
         }
       }
       &.mat-neutral {
         background: #000000de;
         &:hover {
-          background-color: mat-color($arm-neutral, 700);
+          background-color: mat.get-color-from-palette($arm-neutral, 700);
         }
         &:focus {
-          background-color: mat-color($arm-neutral, 900);
+          background-color: mat.get-color-from-palette($arm-neutral, 900);
         }
       }
       i {
@@ -744,7 +759,7 @@ button.mat-flat-button {
   }
 }
 
-button.mat-stroked-button {
+button.mat-mdc-outlined-button {
   &.sof-stroked-button {
     padding: 0px 24px !important;
     height: 48px !important;
@@ -768,20 +783,20 @@ button.mat-stroked-button {
 
     &:enabled {
       &.mat-primary {
-        background-color: mat-color($arm-primary, 50) !important;
-        color: mat-color($arm-primary, 500) !important;
+        background-color: mat.get-color-from-palette($arm-primary, 50) !important;
+        color: mat.get-color-from-palette($arm-primary, 500) !important;
         i {
-          color: mat-color($arm-primary, 500) !important;
+          color: mat.get-color-from-palette($arm-primary, 500) !important;
         }
         &:hover {
-          background-color: mat-color($arm-primary, 100) !important;
+          background-color: mat.get-color-from-palette($arm-primary, 100) !important;
           color: white !important;
           i {
             color: white !important;
           }
         }
         &:focus {
-          background-color: mat-color($arm-primary, 200) !important;
+          background-color: mat.get-color-from-palette($arm-primary, 200) !important;
           color: white !important;
           i {
             color: white !important;
@@ -789,20 +804,20 @@ button.mat-stroked-button {
         }
       }
       &.mat-accent {
-        background-color: mat-color($arm-accent, 50) !important;
-        color: mat-color($arm-accent, 500) !important;
+        background-color: mat.get-color-from-palette($arm-accent, 50) !important;
+        color: mat.get-color-from-palette($arm-accent, 500) !important;
         i {
-          color: mat-color($arm-accent, 500) !important;
+          color: mat.get-color-from-palette($arm-accent, 500) !important;
         }
         &:hover {
-          background-color: mat-color($arm-accent, 100) !important;
+          background-color: mat.get-color-from-palette($arm-accent, 100) !important;
           color: white !important;
           i {
             color: white !important;
           }
         }
         &:focus {
-          background-color: mat-color($arm-accent, 200) !important;
+          background-color: mat.get-color-from-palette($arm-accent, 200) !important;
           color: white !important;
           i {
             color: white !important;
@@ -810,20 +825,20 @@ button.mat-stroked-button {
         }
       }
       &.mat-warn {
-        background-color: mat-color($arm-warn, 50) !important;
-        color: mat-color($arm-warn, 500) !important;
+        background-color: mat.get-color-from-palette($arm-warn, 50) !important;
+        color: mat.get-color-from-palette($arm-warn, 500) !important;
         i {
-          color: mat-color($arm-warn, 500) !important;
+          color: mat.get-color-from-palette($arm-warn, 500) !important;
         }
         &:hover {
-          background-color: mat-color($arm-warn, 100) !important;
+          background-color: mat.get-color-from-palette($arm-warn, 100) !important;
           color: white !important;
           i {
             color: white !important;
           }
         }
         &:focus {
-          background-color: mat-color($arm-warn, 200) !important;
+          background-color: mat.get-color-from-palette($arm-warn, 200) !important;
           color: white !important;
           i {
             color: white !important;
@@ -831,20 +846,20 @@ button.mat-stroked-button {
         }
       }
       &.mat-success {
-        background-color: mat-color($arm-success, 50) !important;
-        color: mat-color($arm-success, 500) !important;
+        background-color: mat.get-color-from-palette($arm-success, 50) !important;
+        color: mat.get-color-from-palette($arm-success, 500) !important;
         i {
-          color: mat-color($arm-success, 500) !important;
+          color: mat.get-color-from-palette($arm-success, 500) !important;
         }
         &:hover {
-          background-color: mat-color($arm-success, 100) !important;
+          background-color: mat.get-color-from-palette($arm-success, 100) !important;
           color: white !important;
           i {
             color: white !important;
           }
         }
         &:focus {
-          background-color: mat-color($arm-success, 200) !important;
+          background-color: mat.get-color-from-palette($arm-success, 200) !important;
           color: white !important;
           i {
             color: white !important;
@@ -852,20 +867,20 @@ button.mat-stroked-button {
         }
       }
       &.mat-info {
-        background-color: mat-color($arm-info, 50) !important;
-        color: mat-color($arm-info, 500) !important;
+        background-color: mat.get-color-from-palette($arm-info, 50) !important;
+        color: mat.get-color-from-palette($arm-info, 500) !important;
         i {
-          color: mat-color($arm-info, 500) !important;
+          color: mat.get-color-from-palette($arm-info, 500) !important;
         }
         &:hover {
-          background-color: mat-color($arm-info, 100) !important;
+          background-color: mat.get-color-from-palette($arm-info, 100) !important;
           color: white !important;
           i {
             color: white !important;
           }
         }
         &:focus {
-          background-color: mat-color($arm-info, 200) !important;
+          background-color: mat.get-color-from-palette($arm-info, 200) !important;
           color: white !important;
           i {
             color: white !important;
@@ -873,20 +888,20 @@ button.mat-stroked-button {
         }
       }
       &.mat-error {
-        background-color: mat-color($arm-error, 50) !important;
-        color: mat-color($arm-error, 500) !important;
+        background-color: mat.get-color-from-palette($arm-error, 50) !important;
+        color: mat.get-color-from-palette($arm-error, 500) !important;
         i {
-          color: mat-color($arm-error, 500) !important;
+          color: mat.get-color-from-palette($arm-error, 500) !important;
         }
         &:hover {
-          background-color: mat-color($arm-error, 100) !important;
+          background-color: mat.get-color-from-palette($arm-error, 100) !important;
           color: white !important;
           i {
             color: white !important;
           }
         }
         &:focus {
-          background-color: mat-color($arm-error, 200) !important;
+          background-color: mat.get-color-from-palette($arm-error, 200) !important;
           color: white !important;
           i {
             color: white !important;
@@ -894,16 +909,16 @@ button.mat-stroked-button {
         }
       }
       &.mat-neutral {
-        background-color: mat-color($arm-neutral, 50) !important;
+        background-color: mat.get-color-from-palette($arm-neutral, 50) !important;
         color: #000000de !important;
         i {
           color: #000000de !important;
         }
         &:hover {
-          background-color: mat-color($arm-neutral, 100) !important;
+          background-color: mat.get-color-from-palette($arm-neutral, 100) !important;
         }
         &:focus {
-          background-color: mat-color($arm-neutral, 200) !important;
+          background-color: mat.get-color-from-palette($arm-neutral, 200) !important;
         }
       }
     }
@@ -942,81 +957,81 @@ button.mat-stroked-button {
 
     &:enabled {
       &.mat-primary {
-        border: 2px solid mat-color($arm-primary, 500) !important;
-        color: mat-color($arm-primary, 500) !important;
+        border: 2px solid mat.get-color-from-palette($arm-primary, 500) !important;
+        color: mat.get-color-from-palette($arm-primary, 500) !important;
         i {
-          color: mat-color($arm-primary, 500) !important;
+          color: mat.get-color-from-palette($arm-primary, 500) !important;
         }
         &:hover {
-          background-color: mat-color($arm-primary, 100) !important;
+          background-color: mat.get-color-from-palette($arm-primary, 100) !important;
         }
         &:focus {
-          background-color: mat-color($arm-primary, 200) !important;
+          background-color: mat.get-color-from-palette($arm-primary, 200) !important;
         }
       }
       &.mat-accent {
-        border: 2px solid mat-color($arm-accent, 500) !important;
-        color: mat-color($arm-accent, 500) !important;
+        border: 2px solid mat.get-color-from-palette($arm-accent, 500) !important;
+        color: mat.get-color-from-palette($arm-accent, 500) !important;
         i {
-          color: mat-color($arm-accent, 500) !important;
+          color: mat.get-color-from-palette($arm-accent, 500) !important;
         }
         &:hover {
-          background-color: mat-color($arm-accent, 100) !important;
+          background-color: mat.get-color-from-palette($arm-accent, 100) !important;
         }
         &:focus {
-          background-color: mat-color($arm-accent, 200) !important;
+          background-color: mat.get-color-from-palette($arm-accent, 200) !important;
         }
       }
       &.mat-warn {
-        border: 2px solid mat-color($arm-warn, 500) !important;
-        color: mat-color($arm-warn, 500) !important;
+        border: 2px solid mat.get-color-from-palette($arm-warn, 500) !important;
+        color: mat.get-color-from-palette($arm-warn, 500) !important;
         i {
-          color: mat-color($arm-warn, 500) !important;
+          color: mat.get-color-from-palette($arm-warn, 500) !important;
         }
         &:hover {
-          background-color: mat-color($arm-warn, 100) !important;
+          background-color: mat.get-color-from-palette($arm-warn, 100) !important;
         }
         &:focus {
-          background-color: mat-color($arm-warn, 200) !important;
+          background-color: mat.get-color-from-palette($arm-warn, 200) !important;
         }
       }
       &.mat-success {
-        border: 2px solid mat-color($arm-success, 500) !important;
-        color: mat-color($arm-success, 500) !important;
+        border: 2px solid mat.get-color-from-palette($arm-success, 500) !important;
+        color: mat.get-color-from-palette($arm-success, 500) !important;
         i {
-          color: mat-color($arm-success, 500) !important;
+          color: mat.get-color-from-palette($arm-success, 500) !important;
         }
         &:hover {
-          background-color: mat-color($arm-success, 100) !important;
+          background-color: mat.get-color-from-palette($arm-success, 100) !important;
         }
         &:focus {
-          background-color: mat-color($arm-success, 200) !important;
+          background-color: mat.get-color-from-palette($arm-success, 200) !important;
         }
       }
       &.mat-error {
-        border: 2px solid mat-color($arm-error, 500) !important;
-        color: mat-color($arm-error, 500) !important;
+        border: 2px solid mat.get-color-from-palette($arm-error, 500) !important;
+        color: mat.get-color-from-palette($arm-error, 500) !important;
         i {
-          color: mat-color($arm-error, 500) !important;
+          color: mat.get-color-from-palette($arm-error, 500) !important;
         }
         &:hover {
-          background-color: mat-color($arm-error, 100) !important;
+          background-color: mat.get-color-from-palette($arm-error, 100) !important;
         }
         &:focus {
-          background-color: mat-color($arm-error, 200) !important;
+          background-color: mat.get-color-from-palette($arm-error, 200) !important;
         }
       }
       &.mat-info {
-        border: 2px solid mat-color($arm-info, 500) !important;
-        color: mat-color($arm-info, 500) !important;
+        border: 2px solid mat.get-color-from-palette($arm-info, 500) !important;
+        color: mat.get-color-from-palette($arm-info, 500) !important;
         i {
-          color: mat-color($arm-info, 500) !important;
+          color: mat.get-color-from-palette($arm-info, 500) !important;
         }
         &:hover {
-          background-color: mat-color($arm-info, 100) !important;
+          background-color: mat.get-color-from-palette($arm-info, 100) !important;
         }
         &:focus {
-          background-color: mat-color($arm-info, 200) !important;
+          background-color: mat.get-color-from-palette($arm-info, 200) !important;
         }
       }
       &.mat-neutral {
@@ -1026,10 +1041,10 @@ button.mat-stroked-button {
           color: 000000de !important;
         }
         &:hover {
-          background-color: mat-color($arm-neutral, 100) !important;
+          background-color: mat.get-color-from-palette($arm-neutral, 100) !important;
         }
         &:focus {
-          background-color: mat-color($arm-neutral, 200) !important;
+          background-color: mat.get-color-from-palette($arm-neutral, 200) !important;
         }
       }
     }
@@ -1075,20 +1090,20 @@ button.mat-stroked-button {
 
     &:enabled {
       &.mat-primary {
-        background-color: mat-color($arm-primary, 50) !important;
-        color: mat-color($arm-primary, 500) !important;
+        background-color: mat.get-color-from-palette($arm-primary, 50) !important;
+        color: mat.get-color-from-palette($arm-primary, 500) !important;
         i {
-          color: mat-color($arm-primary, 500) !important;
+          color: mat.get-color-from-palette($arm-primary, 500) !important;
         }
         &:hover {
-          background-color: mat-color($arm-primary, 100) !important;
+          background-color: mat.get-color-from-palette($arm-primary, 100) !important;
           color: white !important;
           i {
             color: white !important;
           }
         }
         &:focus {
-          background-color: mat-color($arm-primary, 200) !important;
+          background-color: mat.get-color-from-palette($arm-primary, 200) !important;
           color: white !important;
           i {
             color: white !important;
@@ -1096,20 +1111,20 @@ button.mat-stroked-button {
         }
       }
       &.mat-accent {
-        background-color: mat-color($arm-accent, 50) !important;
-        color: mat-color($arm-accent, 500) !important;
+        background-color: mat.get-color-from-palette($arm-accent, 50) !important;
+        color: mat.get-color-from-palette($arm-accent, 500) !important;
         i {
-          color: mat-color($arm-accent, 500) !important;
+          color: mat.get-color-from-palette($arm-accent, 500) !important;
         }
         &:hover {
-          background-color: mat-color($arm-accent, 100) !important;
+          background-color: mat.get-color-from-palette($arm-accent, 100) !important;
           color: white !important;
           i {
             color: white !important;
           }
         }
         &:focus {
-          background-color: mat-color($arm-accent, 200) !important;
+          background-color: mat.get-color-from-palette($arm-accent, 200) !important;
           color: white !important;
           i {
             color: white !important;
@@ -1117,20 +1132,20 @@ button.mat-stroked-button {
         }
       }
       &.mat-warn {
-        background-color: mat-color($arm-warn, 50) !important;
-        color: mat-color($arm-warn, 500) !important;
+        background-color: mat.get-color-from-palette($arm-warn, 50) !important;
+        color: mat.get-color-from-palette($arm-warn, 500) !important;
         i {
-          color: mat-color($arm-warn, 500) !important;
+          color: mat.get-color-from-palette($arm-warn, 500) !important;
         }
         &:hover {
-          background-color: mat-color($arm-warn, 100) !important;
+          background-color: mat.get-color-from-palette($arm-warn, 100) !important;
           color: white !important;
           i {
             color: white !important;
           }
         }
         &:focus {
-          background-color: mat-color($arm-warn, 200) !important;
+          background-color: mat.get-color-from-palette($arm-warn, 200) !important;
           color: white !important;
           i {
             color: white !important;
@@ -1138,20 +1153,20 @@ button.mat-stroked-button {
         }
       }
       &.mat-success {
-        background-color: mat-color($arm-success, 50) !important;
-        color: mat-color($arm-success, 500) !important;
+        background-color: mat.get-color-from-palette($arm-success, 50) !important;
+        color: mat.get-color-from-palette($arm-success, 500) !important;
         i {
-          color: mat-color($arm-success, 500) !important;
+          color: mat.get-color-from-palette($arm-success, 500) !important;
         }
         &:hover {
-          background-color: mat-color($arm-success, 100) !important;
+          background-color: mat.get-color-from-palette($arm-success, 100) !important;
           color: white !important;
           i {
             color: white !important;
           }
         }
         &:focus {
-          background-color: mat-color($arm-success, 200) !important;
+          background-color: mat.get-color-from-palette($arm-success, 200) !important;
           color: white !important;
           i {
             color: white !important;
@@ -1159,20 +1174,20 @@ button.mat-stroked-button {
         }
       }
       &.mat-info {
-        background-color: mat-color($arm-info, 50) !important;
-        color: mat-color($arm-info, 500) !important;
+        background-color: mat.get-color-from-palette($arm-info, 50) !important;
+        color: mat.get-color-from-palette($arm-info, 500) !important;
         i {
-          color: mat-color($arm-info, 500) !important;
+          color: mat.get-color-from-palette($arm-info, 500) !important;
         }
         &:hover {
-          background-color: mat-color($arm-info, 100) !important;
+          background-color: mat.get-color-from-palette($arm-info, 100) !important;
           color: white !important;
           i {
             color: white !important;
           }
         }
         &:focus {
-          background-color: mat-color($arm-info, 200) !important;
+          background-color: mat.get-color-from-palette($arm-info, 200) !important;
           color: white !important;
           i {
             color: white !important;
@@ -1180,20 +1195,20 @@ button.mat-stroked-button {
         }
       }
       &.mat-error {
-        background-color: mat-color($arm-error, 50) !important;
-        color: mat-color($arm-error, 500) !important;
+        background-color: mat.get-color-from-palette($arm-error, 50) !important;
+        color: mat.get-color-from-palette($arm-error, 500) !important;
         i {
-          color: mat-color($arm-error, 500) !important;
+          color: mat.get-color-from-palette($arm-error, 500) !important;
         }
         &:hover {
-          background-color: mat-color($arm-error, 100) !important;
+          background-color: mat.get-color-from-palette($arm-error, 100) !important;
           color: white !important;
           i {
             color: white !important;
           }
         }
         &:focus {
-          background-color: mat-color($arm-error, 200) !important;
+          background-color: mat.get-color-from-palette($arm-error, 200) !important;
           color: white !important;
           i {
             color: white !important;
@@ -1201,16 +1216,16 @@ button.mat-stroked-button {
         }
       }
       &.mat-neutral {
-        background-color: mat-color($arm-neutral, 50) !important;
+        background-color: mat.get-color-from-palette($arm-neutral, 50) !important;
         color: #000000de !important;
         i {
           color: #000000de !important;
         }
         &:hover {
-          background-color: mat-color($arm-neutral, 100) !important;
+          background-color: mat.get-color-from-palette($arm-neutral, 100) !important;
         }
         &:focus {
-          background-color: mat-color($arm-neutral, 200) !important;
+          background-color: mat.get-color-from-palette($arm-neutral, 200) !important;
         }
       }
     }
@@ -1228,81 +1243,81 @@ button.mat-stroked-button {
 
     &:enabled {
       &.mat-primary {
-        border: 2px solid mat-color($arm-primary, 500) !important;
-        color: mat-color($arm-primary, 500) !important;
+        border: 2px solid mat.get-color-from-palette($arm-primary, 500) !important;
+        color: mat.get-color-from-palette($arm-primary, 500) !important;
         i {
-          color: mat-color($arm-primary, 500) !important;
+          color: mat.get-color-from-palette($arm-primary, 500) !important;
         }
         &:hover {
-          background-color: mat-color($arm-primary, 100) !important;
+          background-color: mat.get-color-from-palette($arm-primary, 100) !important;
         }
         &:focus {
-          background-color: mat-color($arm-primary, 200) !important;
+          background-color: mat.get-color-from-palette($arm-primary, 200) !important;
         }
       }
       &.mat-accent {
-        border: 2px solid mat-color($arm-accent, 500) !important;
-        color: mat-color($arm-accent, 500) !important;
+        border: 2px solid mat.get-color-from-palette($arm-accent, 500) !important;
+        color: mat.get-color-from-palette($arm-accent, 500) !important;
         i {
-          color: mat-color($arm-accent, 500) !important;
+          color: mat.get-color-from-palette($arm-accent, 500) !important;
         }
         &:hover {
-          background-color: mat-color($arm-accent, 100) !important;
+          background-color: mat.get-color-from-palette($arm-accent, 100) !important;
         }
         &:focus {
-          background-color: mat-color($arm-accent, 200) !important;
+          background-color: mat.get-color-from-palette($arm-accent, 200) !important;
         }
       }
       &.mat-warn {
-        border: 2px solid mat-color($arm-warn, 500) !important;
-        color: mat-color($arm-warn, 500) !important;
+        border: 2px solid mat.get-color-from-palette($arm-warn, 500) !important;
+        color: mat.get-color-from-palette($arm-warn, 500) !important;
         i {
-          color: mat-color($arm-warn, 500) !important;
+          color: mat.get-color-from-palette($arm-warn, 500) !important;
         }
         &:hover {
-          background-color: mat-color($arm-warn, 100) !important;
+          background-color: mat.get-color-from-palette($arm-warn, 100) !important;
         }
         &:focus {
-          background-color: mat-color($arm-warn, 200) !important;
+          background-color: mat.get-color-from-palette($arm-warn, 200) !important;
         }
       }
       &.mat-success {
-        border: 2px solid mat-color($arm-success, 500) !important;
-        color: mat-color($arm-success, 500) !important;
+        border: 2px solid mat.get-color-from-palette($arm-success, 500) !important;
+        color: mat.get-color-from-palette($arm-success, 500) !important;
         i {
-          color: mat-color($arm-success, 500) !important;
+          color: mat.get-color-from-palette($arm-success, 500) !important;
         }
         &:hover {
-          background-color: mat-color($arm-success, 100) !important;
+          background-color: mat.get-color-from-palette($arm-success, 100) !important;
         }
         &:focus {
-          background-color: mat-color($arm-success, 200) !important;
+          background-color: mat.get-color-from-palette($arm-success, 200) !important;
         }
       }
       &.mat-error {
-        border: 2px solid mat-color($arm-error, 500) !important;
-        color: mat-color($arm-error, 500) !important;
+        border: 2px solid mat.get-color-from-palette($arm-error, 500) !important;
+        color: mat.get-color-from-palette($arm-error, 500) !important;
         i {
-          color: mat-color($arm-error, 500) !important;
+          color: mat.get-color-from-palette($arm-error, 500) !important;
         }
         &:hover {
-          background-color: mat-color($arm-error, 100) !important;
+          background-color: mat.get-color-from-palette($arm-error, 100) !important;
         }
         &:focus {
-          background-color: mat-color($arm-error, 200) !important;
+          background-color: mat.get-color-from-palette($arm-error, 200) !important;
         }
       }
       &.mat-info {
-        border: 2px solid mat-color($arm-info, 500) !important;
-        color: mat-color($arm-info, 500) !important;
+        border: 2px solid mat.get-color-from-palette($arm-info, 500) !important;
+        color: mat.get-color-from-palette($arm-info, 500) !important;
         i {
-          color: mat-color($arm-info, 500) !important;
+          color: mat.get-color-from-palette($arm-info, 500) !important;
         }
         &:hover {
-          background-color: mat-color($arm-info, 100) !important;
+          background-color: mat.get-color-from-palette($arm-info, 100) !important;
         }
         &:focus {
-          background-color: mat-color($arm-info, 200) !important;
+          background-color: mat.get-color-from-palette($arm-info, 200) !important;
         }
       }
       &.mat-neutral {
@@ -1312,10 +1327,10 @@ button.mat-stroked-button {
           color: 000000de !important;
         }
         &:hover {
-          background-color: mat-color($arm-neutral, 100) !important;
+          background-color: mat.get-color-from-palette($arm-neutral, 100) !important;
         }
         &:focus {
-          background-color: mat-color($arm-neutral, 200) !important;
+          background-color: mat.get-color-from-palette($arm-neutral, 200) !important;
         }
       }
     }
@@ -1351,7 +1366,7 @@ button.mat-stroked-button {
 }
 
 mat-card {
-  &.mat-card.item-list {
+  &.mat-mdc-card.item-list {
     box-shadow: 0px 1px 7px rgb(166 159 159 / 25%) !important;
     border-radius: 10px !important;
     overflow: overlay !important;
@@ -1360,7 +1375,7 @@ mat-card {
   }
 }
 
-.mat-dialog-title {
+.mat-mdc-dialog-title {
   font-family: Poppins !important;
   font-style: normal !important;
   font-weight: 500 !important;
@@ -1369,7 +1384,7 @@ mat-card {
   letter-spacing: normal !important;
 }
 
-.mat-dialog-content {
+.mat-mdc-dialog-content {
   display: block !important;
   margin: 0 -24px !important;
   padding: 0 0px !important ;
@@ -1377,7 +1392,7 @@ mat-card {
   overflow: auto !important;
 }
 
-.mat-dialog-container {
+.mat-mdc-dialog-container {
   display: block !important;
   background: #ffffff !important;
   border: 1px solid #dfdfdf !important;
@@ -1391,11 +1406,11 @@ mat-card {
   max-height: inherit !important;
 }
 
-.mat-list-base {
+.mat-mdc-list-base {
   padding-top: 0px !important;
 }
 
-::ng-deep .mat-tooltip {
+::ng-deep .mat-mdc-tooltip {
   cursor: pointer !important;
   width: 234px !important;
   height: auto !important;
@@ -1412,7 +1427,7 @@ mat-card {
   background-color: #333333 !important;
 }
 
-.mat-chip {
+.mat-mdc-chip {
   font-style: normal !important;
   font-weight: 500 !important;
   font-size: 12px !important;
@@ -1424,54 +1439,57 @@ mat-card {
 ::ng-deep mat-form-field.sof-form-field {
   font-family: "Poppins" !important;
   &.mat-form-field-invalid {
-    .mat-form-field-flex > div.mat-form-field-outline.mat-form-field-outline-thick {
-      color: mat-color($arm-error, 900) !important;
+    .mat-mdc-form-field-flex > div.mdc-notched-outline > * {
+      border-color: mat.get-color-from-palette($arm-error, 900) !important;
     }
-    .mat-form-field-label {
-      color: mat-color($arm-error, 900) !important;
+    .mdc-notched-outline__notch {
+      border-left: none !important;
+    }
+    .mat-mdc-floating-label {
+      color: mat.get-color-from-palette($arm-error, 900) !important;
     }
   }
-  &.mat-form-field-should-float {
+  &.mat-focused {
     font-weight: 600 !important; // Should be 500, but 400/500 are the same.
     input,
-    span.mat-select-value-text {
+    span.mat-mdc-select-value-text {
       font-weight: 400 !important;
     }
   }
-  &.mat-form-field-disabled .mat-form-field-outline {
+  &.mat-form-field-disabled .mdc-notched-outline {
     background-color: #F7F7F7 !important;
-  } 
-  .mat-form-field-flex > div.mat-form-field-outline.mat-form-field-outline-thick {
-    color: mat-color($arm-primary, 500) !important;
   }
-  .mat-form-field-wrapper {
+  .mat-mdc-form-field-flex > div.mdc-notched-outline {
+    color: mat.get-color-from-palette($arm-primary, 500) !important;
+  }
+  .mat-mdc-text-field-wrapper {
     padding: 0px !important;
   }
-  .mat-form-field-flex {
+  .mat-mdc-form-field-flex {
     padding: 0 16px 0 16px !important;
   }
-  .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-prefix {
+  .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix {
     top: 0em !important;
-    color: mat-color($arm-neutral, 300) !important;
+    color: mat.get-color-from-palette($arm-neutral, 300) !important;
     padding-right: 0.5em !important;
     font-size: 1.5em !important;
   }
-  .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-suffix {
+  .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix {
     top: 0em !important;
     font-size: 1.5em !important;
-    color: mat-color($arm-neutral, 300) !important;
+    color: mat.get-color-from-palette($arm-neutral, 300) !important;
     .error {
-      color: mat-color($arm-error, 500) !important;
+      color: mat.get-color-from-palette($arm-error, 500) !important;
     }
   }
-  .mat-form-field-flex div.mat-form-field-outline-start {
+  .mat-mdc-form-field-flex div.mdc-notched-outline__leading {
     border-radius: 6px 0 0 6px !important;
     min-width: 6px !important;
   }
-  .mat-form-field-flex div.mat-form-field-outline-end {
+  .mat-mdc-form-field-flex div.mdc-notched-outline__trailing {
     border-radius: 0 6px 6px 0 !important;
   }
-  .mat-form-field-subscript-wrapper {
+  .mat-mdc-form-field-subscript-wrapper {
     padding: 14px 16px 0px 16px !important;
   }
   mat-error {
@@ -1480,7 +1498,7 @@ mat-card {
     font-weight: 600 !important; // Should be 500, but 400/500 are the same.
     font-size: 12px !important;
     line-height: 18px !important;
-    color: mat-color($arm-error, 900) !important;
+    color: mat.get-color-from-palette($arm-error, 900) !important;
   }
   mat-hint {
     font-family: "Poppins" !important;
@@ -1489,13 +1507,21 @@ mat-card {
     font-size: 12px !important;
     line-height: 18px !important;
   }
-  &.mat-focused .mat-form-field-label {
-    color: mat-color($arm-primary, 500) !important;
+  &.mat-focused .mdc-floating-label {
+    color: mat.get-color-from-palette($arm-primary, 500) !important;
+  }
+  .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading, 
+  .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch, 
+  .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
+    border-color: mat.get-color-from-palette($arm-primary, 500);
+  }
+  .mat-mdc-text-field-wrapper {
+    --mat-mdc-form-field-label-offset-x: 0px;
   }
 }
 
-::ng-deep .mat-primary .mat-option.mat-selected:not(.mat-option-disabled){
-  color: mat-color($arm-primary, 500) !important;
+::ng-deep .mat-primary .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option.mdc-list-item--disabled){
+  color: mat.get-color-from-palette($arm-primary, 500) !important;
 }
 
 mat-optgroup label,
@@ -1514,41 +1540,35 @@ mat-optgroup mat-option {
 ::ng-deep mat-slide-toggle {
   &.sof-slide-toggle {
     height: auto;
-    .mat-slide-toggle-bar {
-      height: 20px !important;
+    .mdc-switch__track {
+      height: 22px !important;
       width: 32px !important;
-      background: #cccccc !important;
-      border: 1px solid #cccccc !important;
       border-radius: 24px !important;
     }
-    .mat-slide-toggle-thumb {
+    .mdc-switch__handle {
       height: 20px !important;
       width: 20px !important;
-      border: 1px solid #cccccc !important;
       border-radius: 24px !important;
-      top: -1px !important;
-      left: -3px !important;
-    }
-    .mat-slide-toggle-thumb-container {
-      top: -1px !important;
       left: -3px !important;
+      
+      .mdc-switch__shadow {
+        background: #fff !important;
+      }
     }
-    .mat-slide-toggle-content {
+    label {
       font-family: "Poppins" !important;
       font-style: normal !important;
       font-weight: 400 !important;
       font-size: 14px !important;
       line-height: 150% !important;
       white-space: normal !important;
-    }
-    .mat-slide-toggle-label {
       flex-direction: row;
       align-items: start !important;
     }
   }
 
   &.sof-slide-toggle[size="large"] {
-    .mat-slide-toggle-content {
+    label {
       font-family: "Poppins" !important;
       font-style: normal !important;
       font-weight: 400 !important;
@@ -1559,96 +1579,141 @@ mat-optgroup mat-option {
   }
 }
 
-::ng-deep mat-slide-toggle.sof-slide-toggle.mat-checked:not(.mat-disabled) {
+::ng-deep mat-slide-toggle.sof-slide-toggle {
   &.mat-primary {
-    .mat-slide-toggle-thumb {
-      background-color: #ffffff !important;
-      border: 1px solid mat-color($arm-primary, 500) !important;
-    }
-    .mat-slide-toggle-bar {
-      background: mat-color($arm-primary, 500) !important;
-      border: 1px solid mat-color($arm-primary, 500) !important;
+    --mdc-switch-selected-focus-state-layer-color: var(--primary-color-300-parts);
+    --mdc-switch-selected-handle-color: var(--primary-color-300-parts);
+    --mdc-switch-selected-hover-state-layer-color: var(--primary-color-300-parts);
+    --mdc-switch-selected-pressed-state-layer-color: var(--primary-color-300-parts);
+    --mdc-switch-selected-focus-handle-color: var(--primary-color-600-parts);
+    --mdc-switch-selected-hover-handle-color: var(--primary-color-600-parts);
+    --mdc-switch-selected-pressed-handle-color: var(--primary-color-600-parts);
+    --mdc-switch-selected-focus-track-color: var(--primary-color-500-parts);
+    --mdc-switch-selected-hover-track-color: var(--primary-color-500-parts);
+    --mdc-switch-selected-pressed-track-color: var(--primary-color-500-parts);
+    --mdc-switch-selected-track-color: var(--primary-color-500-parts);
+    .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
+      .mdc-switch__handle {
+        border: 1px solid mat.get-color-from-palette($arm-primary, 500) !important;
+      }
     }
   }
   &.mat-accent {
-    .mat-slide-toggle-thumb {
-      background-color: #ffffff !important;
-      border: 1px solid mat-color($arm-accent, 500) !important;
-    }
-    .mat-slide-toggle-bar {
-      background: mat-color($arm-accent, 500) !important;
-      border: 1px solid mat-color($arm-accent, 500) !important;
+    --mdc-switch-selected-focus-state-layer-color: var(--accent-color-300-parts);
+    --mdc-switch-selected-handle-color: var(--accent-color-300-parts);
+    --mdc-switch-selected-hover-state-layer-color: var(--accent-color-300-parts);
+    --mdc-switch-selected-pressed-state-layer-color: var(--accent-color-300-parts);
+    --mdc-switch-selected-focus-handle-color: var(--accent-color-600-parts);
+    --mdc-switch-selected-hover-handle-color: var(--accent-color-600-parts);
+    --mdc-switch-selected-pressed-handle-color: var(--accent-color-600-parts);
+    --mdc-switch-selected-focus-track-color: var(--accent-color-500-parts);
+    --mdc-switch-selected-hover-track-color: var(--accent-color-500-parts);
+    --mdc-switch-selected-pressed-track-color: var(--accent-color-500-parts);
+    --mdc-switch-selected-track-color: var(--accent-color-500-parts);
+    .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
+      .mdc-switch__handle {
+        border: 1px solid mat.get-color-from-palette($arm-accent, 500) !important;
+      }
     }
   }
   &.mat-warn {
-    .mat-slide-toggle-thumb {
-      background-color: #ffffff !important;
-      border: 1px solid mat-color($arm-warn, 500) !important;
-    }
-    .mat-slide-toggle-bar {
-      background: mat-color($arm-warn, 500) !important;
-      border: 1px solid mat-color($arm-warn, 500) !important;
+    --mdc-switch-selected-focus-state-layer-color: var(--warn-color-300-parts);
+    --mdc-switch-selected-handle-color: var(--warn-color-300-parts);
+    --mdc-switch-selected-hover-state-layer-color: var(--warn-color-300-parts);
+    --mdc-switch-selected-pressed-state-layer-color: var(--warn-color-300-parts);
+    --mdc-switch-selected-focus-handle-color: var(--warn-color-600-parts);
+    --mdc-switch-selected-hover-handle-color: var(--warn-color-600-parts);
+    --mdc-switch-selected-pressed-handle-color: var(--warn-color-600-parts);
+    --mdc-switch-selected-focus-track-color: var(--warn-color-500-parts);
+    --mdc-switch-selected-hover-track-color: var(--warn-color-500-parts);
+    --mdc-switch-selected-pressed-track-color: var(--warn-color-500-parts);
+    --mdc-switch-selected-track-color: var(--warn-color-500-parts);
+    .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
+      .mdc-switch__handle {
+        border: 1px solid mat.get-color-from-palette($arm-warn, 500) !important;
+      }
     }
   }
   &.mat-success {
-    .mat-slide-toggle-thumb {
-      background-color: #ffffff !important;
-      border: 1px solid mat-color($arm-success, 500) !important;
-    }
-    .mat-slide-toggle-bar {
-      background: mat-color($arm-success, 500) !important;
-      border: 1px solid mat-color($arm-success, 500) !important;
+    --mdc-switch-selected-focus-state-layer-color: var(--success-color-300-parts);
+    --mdc-switch-selected-handle-color: var(--success-color-300-parts);
+    --mdc-switch-selected-hover-state-layer-color: var(--success-color-300-parts);
+    --mdc-switch-selected-pressed-state-layer-color: var(--success-color-300-parts);
+    --mdc-switch-selected-focus-handle-color: var(--success-color-600-parts);
+    --mdc-switch-selected-hover-handle-color: var(--success-color-600-parts);
+    --mdc-switch-selected-pressed-handle-color: var(--success-color-600-parts);
+    --mdc-switch-selected-focus-track-color: var(--success-color-500-parts);
+    --mdc-switch-selected-hover-track-color: var(--success-color-500-parts);
+    --mdc-switch-selected-pressed-track-color: var(--success-color-500-parts);
+    --mdc-switch-selected-track-color: var(--success-color-500-parts);
+    .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
+      .mdc-switch__handle {
+        border: 1px solid mat.get-color-from-palette($arm-success, 500) !important;
+      }
     }
   }
   &.mat-error {
-    .mat-slide-toggle-thumb {
-      background-color: #ffffff !important;
-      border: 1px solid mat-color($arm-error, 500) !important;
-    }
-    .mat-slide-toggle-bar {
-      background: mat-color($arm-error, 500) !important;
-      border: 1px solid mat-color($arm-error, 500) !important;
+    --mdc-switch-selected-focus-state-layer-color: var(--error-color-300-parts);
+    --mdc-switch-selected-handle-color: var(--error-color-300-parts);
+    --mdc-switch-selected-hover-state-layer-color: var(--error-color-300-parts);
+    --mdc-switch-selected-pressed-state-layer-color: var(--error-color-300-parts);
+    --mdc-switch-selected-focus-handle-color: var(--error-color-600-parts);
+    --mdc-switch-selected-hover-handle-color: var(--error-color-600-parts);
+    --mdc-switch-selected-pressed-handle-color: var(--error-color-600-parts);
+    --mdc-switch-selected-focus-track-color: var(--error-color-500-parts);
+    --mdc-switch-selected-hover-track-color: var(--error-color-500-parts);
+    --mdc-switch-selected-pressed-track-color: var(--error-color-500-parts);
+    --mdc-switch-selected-track-color: var(--error-color-500-parts);
+    .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
+      .mdc-switch__handle {
+        border: 1px solid mat.get-color-from-palette($arm-error, 500) !important;
+      }
     }
   }
   &.mat-info {
-    .mat-slide-toggle-thumb {
-      background-color: #ffffff !important;
-      border: 1px solid mat-color($arm-info, 500) !important;
-    }
-    .mat-slide-toggle-bar {
-      background: mat-color($arm-info, 500) !important;
-      border: 1px solid mat-color($arm-info, 500) !important;
+    --mdc-switch-selected-focus-state-layer-color: var(--info-color-300-parts);
+    --mdc-switch-selected-handle-color: var(--info-color-300-parts);
+    --mdc-switch-selected-hover-state-layer-color: var(--info-color-300-parts);
+    --mdc-switch-selected-pressed-state-layer-color: var(--info-color-300-parts);
+    --mdc-switch-selected-focus-handle-color: var(--info-color-600-parts);
+    --mdc-switch-selected-hover-handle-color: var(--info-color-600-parts);
+    --mdc-switch-selected-pressed-handle-color: var(--info-color-600-parts);
+    --mdc-switch-selected-focus-track-color: var(--info-color-500-parts);
+    --mdc-switch-selected-hover-track-color: var(--info-color-500-parts);
+    --mdc-switch-selected-pressed-track-color: var(--info-color-500-parts);
+    --mdc-switch-selected-track-color: var(--info-color-500-parts);
+    .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
+      .mdc-switch__handle {
+        border: 1px solid mat.get-color-from-palette($arm-info, 500) !important;
+      }
     }
   }
   &.mat-neutral {
-    .mat-slide-toggle-thumb {
-      background-color: #ffffff !important;
-      border: 1px solid #000000de !important;
-    }
-    .mat-slide-toggle-bar {
-      background: #000000de !important;
-      border: 1px solid #000000de !important;
+    --mdc-switch-selected-focus-state-layer-color: var(--neutral-color-300-parts);
+    --mdc-switch-selected-handle-color: var(--neutral-color-300-parts);
+    --mdc-switch-selected-hover-state-layer-color: var(--neutral-color-300-parts);
+    --mdc-switch-selected-pressed-state-layer-color: var(--neutral-color-300-parts);
+    --mdc-switch-selected-focus-handle-color: var(--neutral-color-600-parts);
+    --mdc-switch-selected-hover-handle-color: var(--neutral-color-600-parts);
+    --mdc-switch-selected-pressed-handle-color: var(--neutral-color-600-parts);
+    --mdc-switch-selected-focus-track-color: var(--neutral-color-500-parts);
+    --mdc-switch-selected-hover-track-color: var(--neutral-color-500-parts);
+    --mdc-switch-selected-pressed-track-color: var(--neutral-color-500-parts);
+    --mdc-switch-selected-track-color: var(--neutral-color-500-parts);
+    .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
+      .mdc-switch__handle {
+        border: 1px solid #000000de !important;
+      }
     }
   }
 }
 
-::ng-deep mat-slide-toggle.sof-slide-toggle.mat-disabled {
-  .mat-slide-toggle-thumb {
-    background-color: #ffffff !important;
-    border: 1px solid #f7f7f7 !important;
-  }
-  .mat-slide-toggle-bar {
-    background: #e9e9e9 !important;
-    border: 1px solid #f7f7f7 !important;
-  }
-  .mat-slide-toggle-content {
+::ng-deep mat-slide-toggle.sof-slide-toggle {
+  &:has(.mdc-switch--disabled) label {
     color: rgba(0, 0, 0, 0.87) !important;
   }
 }
 
-.mat-slide-toggle.mat-disabled {
-  opacity: 1 !important;
-}
 // MatSlideToggle class overrides [END]
 
 .mobile-sr-only {
@@ -1733,7 +1798,7 @@ mat-optgroup mat-option {
   }
 }
 
-.word-wrap-checkboxes-override .mat-checkbox-label {
+.word-wrap-checkboxes-override label {
   white-space: initial !important;
   @media only screen and (max-width: $mat-lt-md) {
     white-space: initial;
@@ -1743,12 +1808,13 @@ mat-optgroup mat-option {
 .sm-full-width-datepicker {
   @media only screen and (max-width: $mat-lt-md) {
     width: 100%;
-    .mat-form-field-infix,
-    .mat-form-field-infix > input {
+    .mat-mdc-form-field-infix,
+    .mat-mdc-form-field-infix > input {
       width: 100% !important;
     }
   }
 }
+
 .sof-tokenizer-button-btn-container {
   @media only screen and (max-width: $mat-lt-md) {
     flex-direction: column-reverse !important;
@@ -1799,7 +1865,7 @@ mat-optgroup mat-option {
 }
 
 .mat-card-mobile-header-override {
-  background: mat-color($arm-neutral, 300);
+  background: mat.get-color-from-palette($arm-neutral, 300);
   padding: 16px;
   margin: 0 -16px;
 }
@@ -1897,16 +1963,16 @@ mat-optgroup mat-option {
   max-height: none !important;
   overflow-y: auto !important;
 
-  .mat-table {
+  .mat-mdc-table {
     border: 0;
     vertical-align: middle;
 
-    .mat-header-row {
+    .mat-mdc-header-row {
       min-height: 0;
       height: 0;
     }
 
-    .mat-header-cell {
+    .mat-mdc-header-cell {
       border: 10px solid;
       clip: rect(0 0 0 0);
       height: 1px;
@@ -1917,7 +1983,7 @@ mat-optgroup mat-option {
       width: 1px;
     }
 
-    .mat-row {
+    .mat-mdc-row {
       padding: 10px 20px 0 20px;
       border-bottom: 5px solid #ddd;
       display: block;
@@ -1925,11 +1991,11 @@ mat-optgroup mat-option {
       height: auto;
     }
 
-    td.mat-cell:first-of-type {
+    td.mat-mdc-cell:first-of-type {
       height: 48px;
     }
 
-    .mat-cell {
+    .mat-mdc-cell {
       display: block;
       font-size: initial;
       height: auto;
@@ -1938,7 +2004,7 @@ mat-optgroup mat-option {
       text-align: initial;
 
       &.action-buttons {
-        border-top: 1px solid mat-color($arm-neutral, 300);
+        border-top: 1px solid mat.get-color-from-palette($arm-neutral, 300);
         margin-top: 24px;
         display: flex;
         flex-wrap: wrap;
@@ -1970,13 +2036,13 @@ mat-optgroup mat-option {
         padding-left: 0;
         margin: -10px -20px 8px -20px;
         padding: 16px 20px 16px 20px;
-        background: mat-color($arm-neutral, 300);
+        background: mat.get-color-from-palette($arm-neutral, 300);
         box-sizing: border-box;
         height: auto;
       }
     }
 
-    td.mat-cell.action-buttons {
+    td.mat-mdc-cell.action-buttons {
       margin-bottom: 8px;
     }
   }