@softheon/armature 17.31.4 → 19.0.2

package/assets/styles/deprecated/_button-deprecated.scss

@@ -1,4 +1,4 @@
-@use "@angular/material" as mat;
+@use "sass:map";
 @use "../arm-theme" as theme;
 
 // @deprecated replace with "/material-override/button"
@@ -30,92 +30,92 @@ button.mat-mdc-button {
 
     &:enabled {
       &.mat-primary {
-        color: mat.get-color-from-palette(theme.$arm-primary, 500);
+        color: map.get(theme.$arm-primary, 500);
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-primary, 50);
+          background-color: map.get(theme.$arm-primary, 50);
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-accent {
-        color: mat.get-color-from-palette(theme.$arm-accent, 500);
+        color: map.get(theme.$arm-accent, 500);
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-accent, 50);
+          background-color: map.get(theme.$arm-accent, 50);
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-warn {
-        color: mat.get-color-from-palette(theme.$arm-warn, 500);
+        color: map.get(theme.$arm-warn, 500);
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-warn, 50);
+          background-color: map.get(theme.$arm-warn, 50);
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-success {
-        color: mat.get-color-from-palette(theme.$arm-success, 500);
+        color: map.get(theme.$arm-success, 500);
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-success, 50);
+          background-color: map.get(theme.$arm-success, 50);
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-error {
-        color: mat.get-color-from-palette(theme.$arm-error, 900);
+        color: map.get(theme.$arm-error, 900);
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-error, 50);
+          background-color: map.get(theme.$arm-error, 50);
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-info {
-        color: mat.get-color-from-palette(theme.$arm-info, 500);
+        color: map.get(theme.$arm-info, 500);
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-info, 50);
+          background-color: map.get(theme.$arm-info, 50);
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-neutral {
-        color: mat.get-color-from-palette(theme.$arm-neutral, 500);
+        color: map.get(theme.$arm-neutral, 500);
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-neutral, 50);
+          background-color: map.get(theme.$arm-neutral, 50);
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
@@ -157,92 +157,92 @@ button.mat-mdc-button {
 
     &:enabled {
       &.mat-primary {
-        color: mat.get-color-from-palette(theme.$arm-primary, 500);
+        color: map.get(theme.$arm-primary, 500);
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-primary, 50);
+          background-color: map.get(theme.$arm-primary, 50);
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-accent {
-        color: mat.get-color-from-palette(theme.$arm-accent, 500);
+        color: map.get(theme.$arm-accent, 500);
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-accent, 50);
+          background-color: map.get(theme.$arm-accent, 50);
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-warn {
-        color: mat.get-color-from-palette(theme.$arm-warn, 500);
+        color: map.get(theme.$arm-warn, 500);
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-warn, 50);
+          background-color: map.get(theme.$arm-warn, 50);
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-success {
-        color: mat.get-color-from-palette(theme.$arm-success, 500);
+        color: map.get(theme.$arm-success, 500);
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-success, 50);
+          background-color: map.get(theme.$arm-success, 50);
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-error {
-        color: mat.get-color-from-palette(theme.$arm-error, 900);
+        color: map.get(theme.$arm-error, 900);
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-error, 50);
+          background-color: map.get(theme.$arm-error, 50);
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-info {
-        color: mat.get-color-from-palette(theme.$arm-info, 500);
+        color: map.get(theme.$arm-info, 500);
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-info, 50);
+          background-color: map.get(theme.$arm-info, 50);
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-neutral {
-        color: mat.get-color-from-palette(theme.$arm-neutral, 500);
+        color: map.get(theme.$arm-neutral, 500);
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-neutral, 50);
+          background-color: map.get(theme.$arm-neutral, 50);
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
@@ -306,106 +306,106 @@ button.mat-mdc-unelevated-button {
     &:enabled {
 
       &.mat-primary {
-        background: mat.get-color-from-palette(theme.$arm-primary, 500);
-        color: map-get(theme.$arm-primary, contrast, 500);
+        background: map.get(theme.$arm-primary, 500);
+        color: map.get(theme.$arm-primary, contrast, 500);
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-primary, 700);
-          color: map-get(theme.$arm-primary, contrast, 700);
+          background-color: map.get(theme.$arm-primary, 700);
+          color: map.get(theme.$arm-primary, contrast, 700);
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-accent {
-        background: mat.get-color-from-palette(theme.$arm-accent, 500);
-        color: map-get(theme.$arm-accent, contrast, 500);
+        background: map.get(theme.$arm-accent, 500);
+        color: map.get(theme.$arm-accent, contrast, 500);
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-accent, 700);
-          color: map-get(theme.$arm-accent, contrast, 700);
+          background-color: map.get(theme.$arm-accent, 700);
+          color: map.get(theme.$arm-accent, contrast, 700);
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-warn {
-        background: mat.get-color-from-palette(theme.$arm-warn, 500);
-        color: map-get(theme.$arm-warn, contrast, 500);
+        background: map.get(theme.$arm-warn, 500);
+        color: map.get(theme.$arm-warn, contrast, 500);
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-warn, 700);
-          color: map-get(theme.$arm-warn, contrast, 700);
+          background-color: map.get(theme.$arm-warn, 700);
+          color: map.get(theme.$arm-warn, contrast, 700);
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-success {
-        background: mat.get-color-from-palette(theme.$arm-success, 500);
-        color: map-get(theme.$arm-success, contrast, 500);
+        background: map.get(theme.$arm-success, 500);
+        color: map.get(theme.$arm-success, contrast, 500);
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-success, 700);
-          color: map-get(theme.$arm-success, contrast, 700);
+          background-color: map.get(theme.$arm-success, 700);
+          color: map.get(theme.$arm-success, contrast, 700);
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-error {
-        background: mat.get-color-from-palette(theme.$arm-error, 900);
-        color: map-get(theme.$arm-error, contrast, 900);
+        background: map.get(theme.$arm-error, 900);
+        color: map.get(theme.$arm-error, contrast, 900);
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-error, 700);
-          color: map-get(theme.$arm-error, contrast, 700);
+          background-color: map.get(theme.$arm-error, 700);
+          color: map.get(theme.$arm-error, contrast, 700);
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-info {
-        background: mat.get-color-from-palette(theme.$arm-info, 500);
-        color: map-get(theme.$arm-info, contrast, 500);
+        background: map.get(theme.$arm-info, 500);
+        color: map.get(theme.$arm-info, contrast, 500);
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-info, 700);
-          color: map-get(theme.$arm-info, contrast, 700);
+          background-color: map.get(theme.$arm-info, 700);
+          color: map.get(theme.$arm-info, contrast, 700);
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-neutral {
-        background: mat.get-color-from-palette(theme.$arm-neutral, 500);
-        color: map-get(theme.$arm-neutral, contrast, 500);
+        background: map.get(theme.$arm-neutral, 500);
+        color: map.get(theme.$arm-neutral, contrast, 500);
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-neutral, 700);
-          color: map-get(theme.$arm-neutral, contrast, 700);
+          background-color: map.get(theme.$arm-neutral, 700);
+          color: map.get(theme.$arm-neutral, contrast, 700);
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
@@ -449,106 +449,106 @@ button.mat-mdc-unelevated-button {
     &:enabled {
 
       &.mat-primary {
-        background: mat.get-color-from-palette(theme.$arm-primary, 500);
-        color: map-get(theme.$arm-primary, contrast, 500);
+        background: map.get(theme.$arm-primary, 500);
+        color: map.get(theme.$arm-primary, contrast, 500);
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-primary, 700);
-          color: map-get(theme.$arm-primary, contrast, 700);
+          background-color: map.get(theme.$arm-primary, 700);
+          color: map.get(theme.$arm-primary, contrast, 700);
         }
       }
 
       &.mat-accent {
-        background: mat.get-color-from-palette(theme.$arm-accent, 500);
-        color: map-get(theme.$arm-accent, contrast, 500);
+        background: map.get(theme.$arm-accent, 500);
+        color: map.get(theme.$arm-accent, contrast, 500);
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-accent, 700);
-          color: map-get(theme.$arm-accent, contrast, 700);
+          background-color: map.get(theme.$arm-accent, 700);
+          color: map.get(theme.$arm-accent, contrast, 700);
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-warn {
-        background: mat.get-color-from-palette(theme.$arm-warn, 500);
-        color: map-get(theme.$arm-warn, contrast, 500);
+        background: map.get(theme.$arm-warn, 500);
+        color: map.get(theme.$arm-warn, contrast, 500);
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-warn, 700);
-          color: map-get(theme.$arm-warn, contrast, 700);
+          background-color: map.get(theme.$arm-warn, 700);
+          color: map.get(theme.$arm-warn, contrast, 700);
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-success {
-        background: mat.get-color-from-palette(theme.$arm-success, 500);
-        color: map-get(theme.$arm-success, contrast, 500);
+        background: map.get(theme.$arm-success, 500);
+        color: map.get(theme.$arm-success, contrast, 500);
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-success, 700);
-          color: map-get(theme.$arm-success, contrast, 700);
+          background-color: map.get(theme.$arm-success, 700);
+          color: map.get(theme.$arm-success, contrast, 700);
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-error {
-        background: mat.get-color-from-palette(theme.$arm-error, 900);
-        color: map-get(theme.$arm-error, contrast, 900);
+        background: map.get(theme.$arm-error, 900);
+        color: map.get(theme.$arm-error, contrast, 900);
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-error, 700);
-          color: map-get(theme.$arm-error, contrast, 700);
+          background-color: map.get(theme.$arm-error, 700);
+          color: map.get(theme.$arm-error, contrast, 700);
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-info {
-        background: mat.get-color-from-palette(theme.$arm-info, 500);
-        color: map-get(theme.$arm-info, contrast, 500);
+        background: map.get(theme.$arm-info, 500);
+        color: map.get(theme.$arm-info, contrast, 500);
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-info, 700);
-          color: map-get(theme.$arm-info, contrast, 700);
+          background-color: map.get(theme.$arm-info, 700);
+          color: map.get(theme.$arm-info, contrast, 700);
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-neutral {
-        background: mat.get-color-from-palette(theme.$arm-neutral, 500);
-        color: map-get(theme.$arm-neutral, contrast, 500);
+        background: map.get(theme.$arm-neutral, 500);
+        color: map.get(theme.$arm-neutral, contrast, 500);
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-neutral, 700);
-          color: map-get(theme.$arm-neutral, contrast, 700);
+          background-color: map.get(theme.$arm-neutral, 700);
+          color: map.get(theme.$arm-neutral, contrast, 700);
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
@@ -611,99 +611,99 @@ button.mat-mdc-outlined-button {
 
     &:enabled {
       &.mat-primary {
-        background-color: mat.get-color-from-palette(theme.$arm-primary, 50) !important;
-        color: mat.get-color-from-palette(theme.$arm-primary, 500) !important;
+        background-color: map.get(theme.$arm-primary, 50) !important;
+        color: map.get(theme.$arm-primary, 500) !important;
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-primary, 100) !important;
+          background-color: map.get(theme.$arm-primary, 100) !important;
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-accent {
-        background-color: mat.get-color-from-palette(theme.$arm-accent, 50) !important;
-        color: mat.get-color-from-palette(theme.$arm-accent, 500) !important;
+        background-color: map.get(theme.$arm-accent, 50) !important;
+        color: map.get(theme.$arm-accent, 500) !important;
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-accent, 100) !important;
+          background-color: map.get(theme.$arm-accent, 100) !important;
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-warn {
-        background-color: mat.get-color-from-palette(theme.$arm-warn, 50) !important;
-        color: mat.get-color-from-palette(theme.$arm-warn, 500) !important;
+        background-color: map.get(theme.$arm-warn, 50) !important;
+        color: map.get(theme.$arm-warn, 500) !important;
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-warn, 100) !important;
+          background-color: map.get(theme.$arm-warn, 100) !important;
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-success {
-        background-color: mat.get-color-from-palette(theme.$arm-success, 50) !important;
-        color: mat.get-color-from-palette(theme.$arm-success, 500) !important;
+        background-color: map.get(theme.$arm-success, 50) !important;
+        color: map.get(theme.$arm-success, 500) !important;
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-success, 100) !important;
+          background-color: map.get(theme.$arm-success, 100) !important;
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-info {
-        background-color: mat.get-color-from-palette(theme.$arm-info, 50) !important;
-        color: mat.get-color-from-palette(theme.$arm-info, 500) !important;
+        background-color: map.get(theme.$arm-info, 50) !important;
+        color: map.get(theme.$arm-info, 500) !important;
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-info, 100) !important;
+          background-color: map.get(theme.$arm-info, 100) !important;
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-error {
-        background-color: mat.get-color-from-palette(theme.$arm-error, 50) !important;
-        color: mat.get-color-from-palette(theme.$arm-error, 900) !important;
+        background-color: map.get(theme.$arm-error, 50) !important;
+        color: map.get(theme.$arm-error, 900) !important;
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-error, 100) !important;
+          background-color: map.get(theme.$arm-error, 100) !important;
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-neutral {
-        background-color: mat.get-color-from-palette(theme.$arm-neutral, 50) !important;
-        color: mat.get-color-from-palette(theme.$arm-neutral, 500) !important;
+        background-color: map.get(theme.$arm-neutral, 50) !important;
+        color: map.get(theme.$arm-neutral, 500) !important;
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-neutral, 100) !important;
+          background-color: map.get(theme.$arm-neutral, 100) !important;
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
@@ -739,99 +739,99 @@ button.mat-mdc-outlined-button {
 
     &:enabled {
       &.mat-primary {
-        border: 2px solid mat.get-color-from-palette(theme.$arm-primary, 500) !important;
-        color: mat.get-color-from-palette(theme.$arm-primary, 500) !important;
+        border: 2px solid map.get(theme.$arm-primary, 500) !important;
+        color: map.get(theme.$arm-primary, 500) !important;
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-primary, 50) !important;
+          background-color: map.get(theme.$arm-primary, 50) !important;
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-accent {
-        border: 2px solid mat.get-color-from-palette(theme.$arm-accent, 500) !important;
-        color: mat.get-color-from-palette(theme.$arm-accent, 500) !important;
+        border: 2px solid map.get(theme.$arm-accent, 500) !important;
+        color: map.get(theme.$arm-accent, 500) !important;
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-accent, 50) !important;
+          background-color: map.get(theme.$arm-accent, 50) !important;
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-warn {
-        border: 2px solid mat.get-color-from-palette(theme.$arm-warn, 500) !important;
-        color: mat.get-color-from-palette(theme.$arm-warn, 500) !important;
+        border: 2px solid map.get(theme.$arm-warn, 500) !important;
+        color: map.get(theme.$arm-warn, 500) !important;
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-warn, 50) !important;
+          background-color: map.get(theme.$arm-warn, 50) !important;
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-success {
-        border: 2px solid mat.get-color-from-palette(theme.$arm-success, 500) !important;
-        color: mat.get-color-from-palette(theme.$arm-success, 50) !important;
+        border: 2px solid map.get(theme.$arm-success, 500) !important;
+        color: map.get(theme.$arm-success, 50) !important;
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-success, 100) !important;
+          background-color: map.get(theme.$arm-success, 100) !important;
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-error {
-        border: 2px solid mat.get-color-from-palette(theme.$arm-error, 900) !important;
-        color: mat.get-color-from-palette(theme.$arm-error, 900) !important;
+        border: 2px solid map.get(theme.$arm-error, 900) !important;
+        color: map.get(theme.$arm-error, 900) !important;
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-error, 50) !important;
+          background-color: map.get(theme.$arm-error, 50) !important;
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-info {
-        border: 2px solid mat.get-color-from-palette(theme.$arm-info, 500) !important;
-        color: mat.get-color-from-palette(theme.$arm-info, 500) !important;
+        border: 2px solid map.get(theme.$arm-info, 500) !important;
+        color: map.get(theme.$arm-info, 500) !important;
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-info, 50) !important;
+          background-color: map.get(theme.$arm-info, 50) !important;
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-neutral {
-        border: 2px solid mat.get-color-from-palette(theme.$arm-neutral, 500) !important;
-        color: mat.get-color-from-palette(theme.$arm-neutral, 500) !important;
+        border: 2px solid map.get(theme.$arm-neutral, 500) !important;
+        color: map.get(theme.$arm-neutral, 500) !important;
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-neutral, 50) !important;
+          background-color: map.get(theme.$arm-neutral, 50) !important;
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
@@ -879,99 +879,99 @@ button.mat-mdc-outlined-button {
 
     &:enabled {
       &.mat-primary {
-        background-color: mat.get-color-from-palette(theme.$arm-primary, 50) !important;
-        color: mat.get-color-from-palette(theme.$arm-primary, 500) !important;
+        background-color: map.get(theme.$arm-primary, 50) !important;
+        color: map.get(theme.$arm-primary, 500) !important;
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-primary, 100) !important;
+          background-color: map.get(theme.$arm-primary, 100) !important;
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-accent {
-        background-color: mat.get-color-from-palette(theme.$arm-accent, 50) !important;
-        color: mat.get-color-from-palette(theme.$arm-accent, 500) !important;
+        background-color: map.get(theme.$arm-accent, 50) !important;
+        color: map.get(theme.$arm-accent, 500) !important;
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-accent, 100) !important;
+          background-color: map.get(theme.$arm-accent, 100) !important;
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-warn {
-        background-color: mat.get-color-from-palette(theme.$arm-warn, 50) !important;
-        color: mat.get-color-from-palette(theme.$arm-warn, 500) !important;
+        background-color: map.get(theme.$arm-warn, 50) !important;
+        color: map.get(theme.$arm-warn, 500) !important;
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-warn, 100) !important
+          background-color: map.get(theme.$arm-warn, 100) !important
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-success {
-        background-color: mat.get-color-from-palette(theme.$arm-success, 50) !important;
-        color: mat.get-color-from-palette(theme.$arm-success, 500) !important;
+        background-color: map.get(theme.$arm-success, 50) !important;
+        color: map.get(theme.$arm-success, 500) !important;
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-success, 100) !important;
+          background-color: map.get(theme.$arm-success, 100) !important;
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-info {
-        background-color: mat.get-color-from-palette(theme.$arm-info, 50) !important;
-        color: mat.get-color-from-palette(theme.$arm-info, 500) !important;
+        background-color: map.get(theme.$arm-info, 50) !important;
+        color: map.get(theme.$arm-info, 500) !important;
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-info, 100) !important
+          background-color: map.get(theme.$arm-info, 100) !important
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-error {
-        background-color: mat.get-color-from-palette(theme.$arm-error, 50) !important;
-        color: mat.get-color-from-palette(theme.$arm-error, 900) !important;
+        background-color: map.get(theme.$arm-error, 50) !important;
+        color: map.get(theme.$arm-error, 900) !important;
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-error, 100) !important;
+          background-color: map.get(theme.$arm-error, 100) !important;
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-neutral {
-        background-color: mat.get-color-from-palette(theme.$arm-neutral, 50) !important;
-        color: mat.get-color-from-palette(theme.$arm-neutral, 500) !important;
+        background-color: map.get(theme.$arm-neutral, 50) !important;
+        color: map.get(theme.$arm-neutral, 500) !important;
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-neutral, 100) !important;
+          background-color: map.get(theme.$arm-neutral, 100) !important;
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
@@ -991,99 +991,99 @@ button.mat-mdc-outlined-button {
 
     &:enabled {
       &.mat-primary {
-        border: 2px solid mat.get-color-from-palette(theme.$arm-primary, 500) !important;
-        color: mat.get-color-from-palette(theme.$arm-primary, 500) !important;
+        border: 2px solid map.get(theme.$arm-primary, 500) !important;
+        color: map.get(theme.$arm-primary, 500) !important;
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-primary, 50) !important;
+          background-color: map.get(theme.$arm-primary, 50) !important;
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-accent {
-        border: 2px solid mat.get-color-from-palette(theme.$arm-accent, 500) !important;
-        color: mat.get-color-from-palette(theme.$arm-accent, 500) !important;
+        border: 2px solid map.get(theme.$arm-accent, 500) !important;
+        color: map.get(theme.$arm-accent, 500) !important;
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-accent, 50) !important;
+          background-color: map.get(theme.$arm-accent, 50) !important;
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-warn {
-        border: 2px solid mat.get-color-from-palette(theme.$arm-warn, 500) !important;
-        color: mat.get-color-from-palette(theme.$arm-warn, 500) !important;
+        border: 2px solid map.get(theme.$arm-warn, 500) !important;
+        color: map.get(theme.$arm-warn, 500) !important;
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-warn, 50) !important;
+          background-color: map.get(theme.$arm-warn, 50) !important;
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-success {
-        border: 2px solid mat.get-color-from-palette(theme.$arm-success, 500) !important;
-        color: mat.get-color-from-palette(theme.$arm-success, 500) !important;
+        border: 2px solid map.get(theme.$arm-success, 500) !important;
+        color: map.get(theme.$arm-success, 500) !important;
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-success, 50) !important;
+          background-color: map.get(theme.$arm-success, 50) !important;
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-error {
-        border: 2px solid mat.get-color-from-palette(theme.$arm-error, 900) !important;
-        color: mat.get-color-from-palette(theme.$arm-error, 900);
+        border: 2px solid map.get(theme.$arm-error, 900) !important;
+        color: map.get(theme.$arm-error, 900);
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-error, 50) !important;
+          background-color: map.get(theme.$arm-error, 50) !important;
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-info {
-        border: 2px solid mat.get-color-from-palette(theme.$arm-info, 500) !important;
-        color: mat.get-color-from-palette(theme.$arm-info, 500) !important;
+        border: 2px solid map.get(theme.$arm-info, 500) !important;
+        color: map.get(theme.$arm-info, 500) !important;
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-info, 50) !important;
+          background-color: map.get(theme.$arm-info, 50) !important;
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }
 
       &.mat-neutral {
-        border: 2px solid mat.get-color-from-palette(theme.$arm-neutral, 500) !important;
-        color: mat.get-color-from-palette(theme.$arm-neutral, 500) !important;
+        border: 2px solid map.get(theme.$arm-neutral, 500) !important;
+        color: map.get(theme.$arm-neutral, 500) !important;
 
         &:hover {
-          background-color: mat.get-color-from-palette(theme.$arm-neutral, 50) !important;
+          background-color: map.get(theme.$arm-neutral, 50) !important;
         }
 
         &:focus {
-          outline: 4px solid mat.get-color-from-palette(theme.$arm-primary, 500);
+          outline: 4px solid map.get(theme.$arm-primary, 500);
           outline-offset: 2px !important;
         }
       }