npm - @softheon/armature - Versions diffs - 17.31.2 → 19.0.0 - Mend

@softheon/armature 17.31.2 → 19.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (277) hide show

package/assets/styles/material-override/_button.scss CHANGED Viewed

@@ -1,16 +1,16 @@
-@use "@angular/material" as mat;
+@use "sass:map";
 @use "../arm-theme" as theme;
 @use "../variables" as vars;
-// Base 'sof-button-v2'
+// Base 'sof-button-v2'
 .sof-button-v2 {
   padding: 8px 16px !important;
-  height: 40px !important;
+  height: var(--sftn-btn-height) !important;
   border-radius: 8px !important;
-  font-family: Poppins !important;
+  font-family: var(--sftn-font-family, sans-serif) !important;
   font-style: normal !important;
   font-weight: 500 !important;
-  font-size: 16px !important;
+  font-size: var(--sftn-btn-font-size) !important;
   line-height: normal !important;
   letter-spacing: 0px !important;
   text-transform: capitalize !important;
@@ -35,7 +35,7 @@
   }
 }
-// Base 'sof-button-icon-v2'
+// Base 'sof-button-icon-v2'
 .sof-button-icon-v2 {
   border-radius: 8px !important;
   height: 40px !important;
@@ -55,7 +55,7 @@
   }
 }
-/**
+/**
   Button v2 variations -
   3 [theme] ( 'primary', 'neutral', 'destroy' )
   Each [theme] has 4 [emphasis] ( 'solid', 'secondary', 'floating', 'contained' )
@@ -63,56 +63,56 @@
 */
 .sof-button-v2,
 .sof-button-icon-v2 {
-  // solid
+  // solid
   &[emphasis="solid"] {
     &[theme="primary"] {
-      background: mat.get-color-from-palette(theme.$arm-primary, 500) !important;
-      background-color: mat.get-color-from-palette(theme.$arm-primary, 500) !important;
-      color: map-get(theme.$arm-primary, contrast, 500) !important;
+      background: map.get(theme.$arm-primary, 500) !important;
+      background-color: map.get(theme.$arm-primary, 500) !important;
+      color: map.get(theme.$arm-primary, contrast, 500) !important;
       &:hover {
-        background: mat.get-color-from-palette(theme.$arm-primary, 700) !important;
-        background-color: mat.get-color-from-palette(theme.$arm-primary, 700) !important;
+        background: map.get(theme.$arm-primary, 700) !important;
+        background-color: map.get(theme.$arm-primary, 700) !important;
       }
       &:active {
-        background: mat.get-color-from-palette(theme.$arm-primary, 800) !important;
-        background-color: mat.get-color-from-palette(theme.$arm-primary, 800) !important;
+        background: map.get(theme.$arm-primary, 800) !important;
+        background-color: map.get(theme.$arm-primary, 800) !important;
       }
     }
     &[theme="neutral"] {
-      background: mat.get-color-from-palette(theme.$arm-neutral, 500) !important;
-      background-color: mat.get-color-from-palette(theme.$arm-neutral, 500) !important;
-      color: map-get(theme.$arm-neutral, contrast, 500) !important;
+      background: map.get(theme.$arm-neutral, 500) !important;
+      background-color: map.get(theme.$arm-neutral, 500) !important;
+      color: map.get(theme.$arm-neutral, contrast, 500) !important;
       &:hover {
-        background: mat.get-color-from-palette(theme.$arm-neutral, 700) !important;
-        background-color: mat.get-color-from-palette(theme.$arm-neutral, 700) !important;
+        background: map.get(theme.$arm-neutral, 700) !important;
+        background-color: map.get(theme.$arm-neutral, 700) !important;
       }
       &:active {
-        background: mat.get-color-from-palette(theme.$arm-neutral, 800) !important;
-        background-color: mat.get-color-from-palette(theme.$arm-neutral, 800) !important;
+        background: map.get(theme.$arm-neutral, 800) !important;
+        background-color: map.get(theme.$arm-neutral, 800) !important;
       }
     }
     &[theme="destroy"] {
-      background: mat.get-color-from-palette(theme.$arm-error, 500) !important;
-      background-color: mat.get-color-from-palette(theme.$arm-error, 500) !important;
-      color: map-get(theme.$arm-error, contrast, 500) !important;
+      background: map.get(theme.$arm-error, 500) !important;
+      background-color: map.get(theme.$arm-error, 500) !important;
+      color: map.get(theme.$arm-error, contrast, 500) !important;
       &:hover {
-        background: mat.get-color-from-palette(theme.$arm-error, 700) !important;
-        background-color: mat.get-color-from-palette(theme.$arm-error, 700) !important;
+        background: map.get(theme.$arm-error, 700) !important;
+        background-color: map.get(theme.$arm-error, 700) !important;
       }
       &:active {
-        background: mat.get-color-from-palette(theme.$arm-error, 800) !important;
-        background-color: mat.get-color-from-palette(theme.$arm-error, 800) !important;
+        background: map.get(theme.$arm-error, 800) !important;
+        background-color: map.get(theme.$arm-error, 800) !important;
       }
     }
     &[theme="primary"], &[theme="neutral"], &[theme="destroy"] {
       &:disabled {
-        background: mat.get-color-from-palette(theme.$arm-neutral, A50) !important;
-        background-color: mat.get-color-from-palette(theme.$arm-neutral, A50) !important;
+        background: map.get(theme.$arm-neutral, A50) !important;
+        background-color: map.get(theme.$arm-neutral, A50) !important;
         color: vars.$text-low-emphasis !important;
       }
     }
   }
-  // secondary
+  // secondary
   &[emphasis="secondary"] {
     &[theme="primary"], &[theme="neutral"], &[theme="destroy"] {
       background: vars.$surface-color-level-one-light !important;
@@ -120,41 +120,41 @@
       &:hover {
         background: linear-gradient(
           0deg,
-          mat.get-color-from-palette(theme.$arm-neutral, A100) 0%,
-          mat.get-color-from-palette(theme.$arm-neutral, A100) 100%
+          map.get(theme.$arm-neutral, A100) 0%,
+          map.get(theme.$arm-neutral, A100) 100%
         ), vars.$surface-color-level-one-light !important;
         background-color: linear-gradient(
           0deg,
-          mat.get-color-from-palette(theme.$arm-neutral, A100) 0%,
-          mat.get-color-from-palette(theme.$arm-neutral, A100) 100%
+          map.get(theme.$arm-neutral, A100) 0%,
+          map.get(theme.$arm-neutral, A100) 100%
         ), vars.$surface-color-level-one-light !important;
       }
       &:active {
         background: linear-gradient(
           0deg,
-          mat.get-color-from-palette(theme.$arm-neutral, A200) 0%,
-          mat.get-color-from-palette(theme.$arm-neutral, A200) 100%
+          map.get(theme.$arm-neutral, A200) 0%,
+          map.get(theme.$arm-neutral, A200) 100%
         ), vars.$surface-color-level-one-light !important;
         background-color: linear-gradient(
           0deg,
-          mat.get-color-from-palette(theme.$arm-neutral, A200) 0%,
-          mat.get-color-from-palette(theme.$arm-neutral, A200) 100%
+          map.get(theme.$arm-neutral, A200) 0%,
+          map.get(theme.$arm-neutral, A200) 100%
         ), vars.$surface-color-level-one-light !important;
       }
       &:disabled {
-        background: mat.get-color-from-palette(theme.$arm-neutral, A50) !important;
-        background-color: mat.get-color-from-palette(theme.$arm-neutral, A50) !important;
+        background: map.get(theme.$arm-neutral, A50) !important;
+        background-color: map.get(theme.$arm-neutral, A50) !important;
         color: vars.$text-low-emphasis !important;
       }
     }
     &[theme="primary"] {
-      color: mat.get-color-from-palette(theme.$arm-primary, 500) !important;
+      color: map.get(theme.$arm-primary, 500) !important;
     }
     &[theme="neutral"] {
       color: vars.$text-high-emphasis !important;
     }
     &[theme="destroy"] {
-      color: mat.get-color-from-palette(theme.$arm-error, 500) !important;
+      color: map.get(theme.$arm-error, 500) !important;
     }
   }
   // floating, contained
@@ -164,36 +164,36 @@
       background-color: transparent !important;
     }
     &[theme="primary"] {
-      color: mat.get-color-from-palette(theme.$arm-primary, 500) !important;
+      color: map.get(theme.$arm-primary, 500) !important;
       &:hover {
-        background: mat.get-color-from-palette(theme.$arm-primary, A100) !important;
-        background-color: mat.get-color-from-palette(theme.$arm-primary, A100) !important;
+        background: map.get(theme.$arm-primary, A100) !important;
+        background-color: map.get(theme.$arm-primary, A100) !important;
       }
       &:active {
-        background: mat.get-color-from-palette(theme.$arm-primary, A200) !important;
-        background-color: mat.get-color-from-palette(theme.$arm-primary, A200) !important;
+        background: map.get(theme.$arm-primary, A200) !important;
+        background-color: map.get(theme.$arm-primary, A200) !important;
       }
     }
     &[theme="neutral"] {
       color: vars.$text-high-emphasis !important;
       &:hover {
-        background: mat.get-color-from-palette(theme.$arm-neutral, A100) !important;
-        background-color: mat.get-color-from-palette(theme.$arm-neutral, A100) !important;
+        background: map.get(theme.$arm-neutral, A100) !important;
+        background-color: map.get(theme.$arm-neutral, A100) !important;
       }
       &:active {
-        background: mat.get-color-from-palette(theme.$arm-neutral, A200) !important;
-        background-color: mat.get-color-from-palette(theme.$arm-neutral, A200) !important;
+        background: map.get(theme.$arm-neutral, A200) !important;
+        background-color: map.get(theme.$arm-neutral, A200) !important;
       }
     }
     &[theme="destroy"] {
-      color: mat.get-color-from-palette(theme.$arm-error, 500) !important;
+      color: map.get(theme.$arm-error, 500) !important;
       &:hover {
-        background: mat.get-color-from-palette(theme.$arm-error, A100) !important;
-        background-color: mat.get-color-from-palette(theme.$arm-error, A100) !important;
+        background: map.get(theme.$arm-error, A100) !important;
+        background-color: map.get(theme.$arm-error, A100) !important;
       }
       &:active {
-        background: mat.get-color-from-palette(theme.$arm-error, A200) !important;
-        background-color: mat.get-color-from-palette(theme.$arm-error, A200) !important;
+        background: map.get(theme.$arm-error, A200) !important;
+        background-color: map.get(theme.$arm-error, A200) !important;
       }
     }
     &[theme="primary"], &[theme="neutral"], &[theme="destroy"] {
@@ -202,23 +202,23 @@
       }
     }
   }
-  // contained
+  // contained
   &[emphasis="contained"] {
     &[theme="primary"], &[theme="neutral"], &[theme="destroy"] {
       box-sizing: border-box !important;
       border: 2px solid !important;
     }
     &[theme="primary"] {
-      border-color: mat.get-color-from-palette(theme.$arm-primary, 500) !important;
-      color: mat.get-color-from-palette(theme.$arm-primary, 500) !important;
+      border-color: map.get(theme.$arm-primary, 500) !important;
+      color: map.get(theme.$arm-primary, 500) !important;
     }
     &[theme="neutral"] {
-      border-color: mat.get-color-from-palette(theme.$arm-neutral, 500) !important;
+      border-color: map.get(theme.$arm-neutral, 500) !important;
       color: vars.$text-high-emphasis !important;
     }
     &[theme="destroy"] {
-      border-color: mat.get-color-from-palette(theme.$arm-error, 500) !important;
-      color: mat.get-color-from-palette(theme.$arm-error, 500) !important;
+      border-color: map.get(theme.$arm-error, 500) !important;
+      color: map.get(theme.$arm-error, 500) !important;
     }
     &[theme="primary"], &[theme="neutral"], &[theme="destroy"] {
       &:disabled {
@@ -226,20 +226,20 @@
       }
     }
   }
-  // focus ring for all
+  // focus ring for all
   &[theme="primary"], &[theme="neutral"], &[theme="destroy"] {
     &:focus {
       outline: 3px solid !important;
       outline-offset: 2px !important;
-      outline-color: mat.get-color-from-palette(theme.$arm-primary, 300) !important;
+      outline-color: map.get(theme.$arm-primary, 300) !important;
     }
   }
   &[theme="destroy"] {
     &:focus {
-      outline-color: mat.get-color-from-palette(theme.$arm-error, 300) !important;
+      outline-color: map.get(theme.$arm-error, 300) !important;
     }
   }
-  // Remove mat-ripple effects
+  // Remove mat-ripple effects
   span.mat-mdc-button-persistent-ripple {
     display: none !important;
   }
@@ -248,7 +248,7 @@
   }
 }
-// Mat Notification badge
+// Mat Notification badge
 button .mat-badge-content {
   background: vars.$surface-color-inverse-light !important;
   background-color: vars.$surface-color-inverse-light !important;

package/assets/styles/material-override/_calendar.scss CHANGED Viewed

@@ -1,4 +1,4 @@
-@use "@angular/material" as mat;
+@use "sass:map";
 @use "../arm-theme" as theme;
 @use "../variables" as vars;
@@ -16,7 +16,7 @@
 }
 .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
-  background-color: mat.get-color-from-palette(theme.$arm-primary, 500) !important;
+  background-color: map.get(theme.$arm-primary, 500) !important;
   color: vars.$surface-color-default-light;
 }
@@ -33,11 +33,11 @@ body .mat-calendar-body-today.mat-calendar-body-selected {
 }
 .mat-calendar-body-in-range::before {
-  background: mat.get-color-from-palette(theme.$arm-primary, 50) !important;
+  background: map.get(theme.$arm-primary, 50) !important;
 }
 .mat-calendar-body-selected {
-  background-color: mat.get-color-from-palette(theme.$arm-primary, 500) !important;
+  background-color: map.get(theme.$arm-primary, 500) !important;
   border: none;
 }
@@ -76,10 +76,10 @@ body .mat-calendar-body-today.mat-calendar-body-selected {
 .mat-datepicker-toggle-active {
   .mdc-icon-button {
-    color: mat.get-color-from-palette(theme.$arm-primary, 500) !important;
+    color: map.get(theme.$arm-primary, 500) !important;
   }
 }
 .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
-  background-color: mat.get-color-from-palette(theme.$arm-primary, 100) !important;
+  background-color: map.get(theme.$arm-primary, 100) !important;
 }

package/assets/styles/material-override/_checkbox.scss CHANGED Viewed

@@ -1,3 +1,4 @@
+@use "sass:map";
 @use "../arm-theme" as theme;
 @use "../variables" as vars;
@@ -34,7 +35,7 @@
     .mdc-checkbox__native-control:focus ~ .mdc-checkbox__background {
       outline: 3px solid !important;
       outline-offset: 2px !important;
-      outline-color: map-get(theme.$arm-primary, 300) !important;
+      outline-color: map.get(theme.$arm-primary, 300) !important;
     }
     .mdc-checkbox__background {
@@ -67,66 +68,66 @@
   }
   .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background {
-    border-color: map-get(theme.$arm-neutral, 500) !important;
+    border-color: map.get(theme.$arm-neutral, 500) !important;
   }
   .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,
   .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background {
-    border-color: map-get(theme.$arm-primary, 500) !important;
-    background-color: map-get(theme.$arm-primary, 500) !important;
+    border-color: map.get(theme.$arm-primary, 500) !important;
+    background-color: map.get(theme.$arm-primary, 500) !important;
   }
   &:hover {
     .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background {
-      border-color: map-get(theme.$arm-neutral, 700) !important;
+      border-color: map.get(theme.$arm-neutral, 700) !important;
     }
     .mdc-checkbox .mat-mdc-checkbox-touch-target {
-      background: map-get(theme.$arm-primary, A100) !important;
+      background: map.get(theme.$arm-primary, A100) !important;
     }
     .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,
     .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background {
-      border-color: map-get(theme.$arm-primary, 700) !important;
-      background-color: map-get(theme.$arm-primary, 700) !important;
+      border-color: map.get(theme.$arm-primary, 700) !important;
+      background-color: map.get(theme.$arm-primary, 700) !important;
     }
   }
   &:active {
     .mdc-checkbox .mat-mdc-checkbox-touch-target {
-      background: map-get(theme.$arm-primary, A200) !important;
+      background: map.get(theme.$arm-primary, A200) !important;
     }
     .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,
     .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background {
-      border-color: map-get(theme.$arm-primary, 800) !important;
-      background-color: map-get(theme.$arm-primary, 800) !important;
+      border-color: map.get(theme.$arm-primary, 800) !important;
+      background-color: map.get(theme.$arm-primary, 800) !important;
     }
   }
   &[color="neutral"] {
     .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,
     .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background {
-      border-color: map-get(theme.$arm-neutral, 500) !important;
-      background-color: map-get(theme.$arm-neutral, 500) !important;
+      border-color: map.get(theme.$arm-neutral, 500) !important;
+      background-color: map.get(theme.$arm-neutral, 500) !important;
     }
     &:hover {
       .mdc-checkbox .mat-mdc-checkbox-touch-target {
-        background: map-get(theme.$arm-neutral, A100) !important;
+        background: map.get(theme.$arm-neutral, A100) !important;
       }
       .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,
       .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background {
-        border-color: map-get(theme.$arm-neutral, 700) !important;
-        background-color: map-get(theme.$arm-neutral, 700) !important;
+        border-color: map.get(theme.$arm-neutral, 700) !important;
+        background-color: map.get(theme.$arm-neutral, 700) !important;
       }
     }
     &:active {
       .mdc-checkbox .mat-mdc-checkbox-touch-target {
-        background: map-get(theme.$arm-neutral, A200) !important;
+        background: map.get(theme.$arm-neutral, A200) !important;
       }
       .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,
       .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background {
-        border-color: map-get(theme.$arm-neutral, 800) !important;
-        background-color: map-get(theme.$arm-neutral, 800) !important;
+        border-color: map.get(theme.$arm-neutral, 800) !important;
+        background-color: map.get(theme.$arm-neutral, 800) !important;
       }
     }
   }

package/assets/styles/material-override/_expansion-panel.scss CHANGED Viewed

@@ -1,20 +1,21 @@
+@use "sass:map";
 @use '../variables' as vars;
 @use '../arm-theme' as theme;
 .sof-expansion-panel {
-  * {
-    box-sizing: border-box !important;
-  }
   box-sizing: border-box !important;
   box-shadow: none !important;
   border-radius: 8px !important;
   background: vars.$surface-color-default-light !important;
+  * {
+    box-sizing: border-box !important;
+  }
   &:focus-within {
     outline: 3px solid !important;
     outline-offset: 2px !important;
-    outline-color: map-get(theme.$arm-primary, 300) !important;
+    outline-color: map.get(theme.$arm-primary, 300) !important;
   }
   &:not(.mat-expanded) {
@@ -25,16 +26,16 @@
       &:hover {
         background: linear-gradient(
           0deg,
-          map-get(theme.$arm-neutral, A50) 0%,
-          map-get(theme.$arm-neutral, A50) 100%
+          map.get(theme.$arm-neutral, A50) 0%,
+          map.get(theme.$arm-neutral, A50) 100%
         ), vars.$surface-color-default-light !important;
       }
       &:active {
         background: linear-gradient(
           0deg,
-          map-get(theme.$arm-neutral, A100) 0%,
-          map-get(theme.$arm-neutral, A100) 100%
+          map.get(theme.$arm-neutral, A100) 0%,
+          map.get(theme.$arm-neutral, A100) 100%
         ), vars.$surface-color-default-light !important;
       }
@@ -51,7 +52,7 @@
   }
   &.mat-expanded {
-    background: map-get(theme.$arm-primary, 50) !important;
+    background: map.get(theme.$arm-primary, 50) !important;
     .mat-expansion-panel-header {
       border: 2px solid transparent !important;
@@ -59,17 +60,17 @@
       &:hover {
         background: linear-gradient(
           0deg,
-          map-get(theme.$arm-primary, A100) 0%,
-          map-get(theme.$arm-primary, A100) 100%
-        ), map-get(theme.$arm-primary, 50) !important;
+          map.get(theme.$arm-primary, A100) 0%,
+          map.get(theme.$arm-primary, A100) 100%
+        ), map.get(theme.$arm-primary, 50) !important;
       }
       &:active {
         background: linear-gradient(
           0deg,
-          map-get(theme.$arm-primary, A200) 0%,
-          map-get(theme.$arm-primary, A200) 100%
-        ), map-get(theme.$arm-primary, 50) !important;
+          map.get(theme.$arm-primary, A200) 0%,
+          map.get(theme.$arm-primary, A200) 100%
+        ), map.get(theme.$arm-primary, 50) !important;
       }
       .mat-content {
@@ -124,7 +125,7 @@
   }
   .mat-expansion-panel-content {
-    background: map-get(theme.$arm-primary, 50) !important;
+    background: map.get(theme.$arm-primary, 50) !important;
     transition: padding 225ms cubic-bezier(0.4, 0, 0.2, 1) !important;
     .mat-expansion-panel-body {
@@ -133,7 +134,7 @@
       overflow-y: hidden !important;
       scrollbar-width: thin;
       scrollbar-gutter: stable !important;
-      scrollbar-color: map-get(theme.$arm-neutral, A200) map-get(theme.$arm-primary, 50) !important;
+      scrollbar-color: map.get(theme.$arm-neutral, A200) map.get(theme.$arm-primary, 50) !important;
       &:hover {
         overflow-y: auto !important;

package/assets/styles/material-override/_form-field.scss CHANGED Viewed

@@ -1,13 +1,13 @@
-@use "@angular/material" as mat;
+@use "sass:map";
 @use "../arm-theme" as theme;
 @use "../variables" as vars;
 mat-form-field.sof-form-field {
-  font-family: "Poppins" !important;
+  font-family: var(--sftn-font-family, sans-serif) !important;
   &.mat-form-field-invalid {
     .mat-mdc-form-field-flex>div.mdc-notched-outline>* {
-      border-color: mat.get-color-from-palette(theme.$arm-error, 500) !important;
+      border-color: map.get(theme.$arm-error, 500) !important;
     }
     .mdc-notched-outline__notch {
@@ -21,12 +21,12 @@ mat-form-field.sof-form-field {
     }
     .mat-mdc-floating-label {
-      color: mat.get-color-from-palette(theme.$arm-error, 500) !important;
+      color: map.get(theme.$arm-error, 500) !important;
       font-family: "Poppins" !important;
     }
     &.mat-focused .mdc-floating-label {
-      color: mat.get-color-from-palette(theme.$arm-error, 500) !important;
+      color: map.get(theme.$arm-error, 500) !important;
       font-family: "Poppins" !important;
     }
   }
@@ -42,7 +42,7 @@ mat-form-field.sof-form-field {
     .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-width: 3px !important;
+      border-width: var(--sftn-input-border-width) !important;
     }
   }
@@ -51,7 +51,7 @@ mat-form-field.sof-form-field {
   }
   .mat-mdc-form-field-flex>div.mdc-notched-outline {
-    color: mat.get-color-from-palette(theme.$arm-primary, 500) !important;
+    color: map.get(theme.$arm-primary, 500) !important;
   }
   .mat-mdc-text-field-wrapper {
@@ -64,18 +64,18 @@ mat-form-field.sof-form-field {
   .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix {
     top: 0em !important;
-    color: mat.get-color-from-palette(theme.$arm-neutral, 300) !important;
+    color: map.get(theme.$arm-neutral, 300) !important;
     padding-right: 0.5em !important;
-    font-size: 1.5em !important;
+    font-size: var(--sftn-input-icon-font-size) !important;
   }
   .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.get-color-from-palette(theme.$arm-neutral, 300) !important;
+    font-size: var(--sftn-input-icon-font-size) !important;
+    color: map.get(theme.$arm-neutral, 300) !important;
     .error {
-      color: mat.get-color-from-palette(theme.$arm-error, 500) !important;
+      color: map.get(theme.$arm-error, 500) !important;
     }
   }
@@ -89,16 +89,16 @@ mat-form-field.sof-form-field {
   }
   mat-error {
-    font-family: "Poppins" !important;
+    font-family: var(--sftn-font-family, sans-serif) !important;
     font-style: normal !important;
     font-weight: 500 !important;
     font-size: 12px !important;
     line-height: 18px !important;
-    color: mat.get-color-from-palette(theme.$arm-error, 500) !important;
+    color: map.get(theme.$arm-error, 500) !important;
   }
   mat-hint {
-    font-family: "Poppins" !important;
+    font-family: var(--sftn-font-family, sans-serif) !important;
     font-style: normal !important;
     font-weight: 400 !important;
     font-size: 12px !important;
@@ -110,14 +110,14 @@ mat-form-field.sof-form-field {
   }
   &.mat-focused .mdc-floating-label {
-    color: mat.get-color-from-palette(theme.$arm-primary, 500) !important;
+    color: map.get(theme.$arm-primary, 500) !important;
     font-family: "Poppins" !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(theme.$arm-primary, 500);
+    border-color: map.get(theme.$arm-primary, 500);
   }
   .mat-mdc-text-field-wrapper {
@@ -125,10 +125,10 @@ mat-form-field.sof-form-field {
   }
 }
-// dropdown specific style overrides
+// dropdown specific style overrides
 .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text {
-  color: mat.get-color-from-palette(theme.$arm-primary, 500) !important;
+  color: map.get(theme.$arm-primary, 500) !important;
 }
 .mat-mdc-option .mat-pseudo-checkbox-minimal {
@@ -136,13 +136,13 @@ mat-form-field.sof-form-field {
 }
 .mat-mdc-option .mat-pseudo-checkbox-checked {
-  background-color: mat.get-color-from-palette(theme.$arm-primary, 500) !important;
+  background-color: map.get(theme.$arm-primary, 500) !important;
 }
 .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow {
-  color: mat.get-color-from-palette(theme.$arm-primary, 500) !important;
+  color: map.get(theme.$arm-primary, 500) !important;
 }
 .mdc-form-field {
   letter-spacing: 0 !important;
-}
+}